diff --git a/apps/dashboard/src/components/activity/components/overview-item.tsx b/apps/dashboard/src/components/activity/components/overview-item.tsx
index 16297ddba88..f33b14949a7 100644
--- a/apps/dashboard/src/components/activity/components/overview-item.tsx
+++ b/apps/dashboard/src/components/activity/components/overview-item.tsx
@@ -1,7 +1,6 @@
-import { Copy } from 'lucide-react';
-import { ReactNode } from 'react';
-import { cn } from '@/utils/ui';
 import { CopyButton } from '@/components/primitives/copy-button';
+import { cn } from '@/utils/ui';
+import { ReactNode } from 'react';
 
 interface OverviewItemProps {
   label: string;
@@ -28,11 +27,9 @@ export function OverviewItem({
           <CopyButton
             valueToCopy={value}
             mode="ghost"
-            size="xs"
+            size="2xs"
             className="text-foreground-600 mr-0 size-3 gap-0 p-0 opacity-0 transition-opacity group-hover:opacity-100"
-          >
-            <Copy className="h-3 w-3" />
-          </CopyButton>
+          ></CopyButton>
         )}
         {children || <span className={cn('text-foreground-600 text-xs', isMonospace && 'font-mono')}>{value}</span>}
       </div>
diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
index 1708b6c1cc6..34872987a91 100644
--- a/apps/dashboard/src/components/primitives/button.tsx
+++ b/apps/dashboard/src/components/primitives/button.tsx
@@ -24,7 +24,8 @@ export const buttonVariants = tv({
     ],
     icon: [
       // base
-      'flex size-5 shrink-0 items-center justify-center',
+      'flex size-5 shrink-0 items-center justify-center transition-transform duration-200',
+      '[&.arrow-right-hover-animation]:group-hover:translate-x-0.5',
     ],
   },
   variants: {
@@ -353,17 +354,20 @@ export type ButtonProps = React.ComponentPropsWithoutRef<typeof ButtonRoot> & {
   trailingIcon?: IconType;
 };
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, ...rest }, forwardedRef) => {
-    return (
-      <ButtonRoot ref={forwardedRef} {...rest}>
-        {LeadingIcon && <ButtonIcon as={LeadingIcon} />}
-        <Slottable>{children}</Slottable>
-        {TrailingIcon && <ButtonIcon as={TrailingIcon} />}
-      </ButtonRoot>
-    );
-  }
-);
+const Button = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, children, ...rest }: ButtonProps) => {
+  const isArrowRight = TrailingIcon?.name === 'RiArrowRightSLine';
+
+  return (
+    <ButtonRoot {...rest}>
+      {LeadingIcon && <ButtonIcon as={LeadingIcon} />}
+      <Slottable>{children}</Slottable>
+      {TrailingIcon && (
+        <ButtonIcon className={isArrowRight ? 'arrow-right-hover-animation' : undefined} as={TrailingIcon} />
+      )}
+    </ButtonRoot>
+  );
+};
+
 Button.displayName = 'Button';
 
 function ButtonIcon<T extends React.ElementType>({
@@ -381,4 +385,4 @@ function ButtonIcon<T extends React.ElementType>({
 }
 ButtonIcon.displayName = BUTTON_ICON_NAME;
 
-export { Button, ButtonIcon as ButtonIcon, ButtonRoot as Root };
+export { Button, ButtonIcon, ButtonRoot };
diff --git a/apps/dashboard/src/components/primitives/copy-button.tsx b/apps/dashboard/src/components/primitives/copy-button.tsx
index 80a1dfc64d5..7d13d1057de 100644
--- a/apps/dashboard/src/components/primitives/copy-button.tsx
+++ b/apps/dashboard/src/components/primitives/copy-button.tsx
@@ -1,20 +1,77 @@
-import { HoverToCopy } from '@/components/primitives/hover-to-copy';
-import { cn } from '@/utils/ui';
-import { RiFileCopyLine } from 'react-icons/ri';
+import { AnimatePresence, motion } from 'motion/react';
+import { useState } from 'react';
+import { RiCheckLine, RiFileCopyLine } from 'react-icons/ri';
+import { cn } from '../../utils/ui';
 import { Button, ButtonProps } from './button';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 type CopyButtonProps = ButtonProps & {
   valueToCopy: string;
+  inputGroup?: boolean;
 };
 
 export const CopyButton = (props: CopyButtonProps) => {
-  const { className, valueToCopy, children, ...rest } = props;
+  const { className, valueToCopy, inputGroup, children, ...rest } = props;
+
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(valueToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  const sizeClass = props.size === '2xs' ? 'size-3' : 'size-4';
 
   return (
-    <HoverToCopy asChild valueToCopy={valueToCopy}>
-      <Button mode="outline" variant="secondary" className={cn('flex items-center gap-1', className)} {...rest}>
-        {children || <RiFileCopyLine className="size-4" />}
-      </Button>
-    </HoverToCopy>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          mode="outline"
+          variant="secondary"
+          className={cn(className, inputGroup && 'h-[34px] rounded-none border-l ring-0')}
+          onClick={handleCopy}
+          aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+          disabled={copied}
+          {...rest}
+        >
+          {children}
+          <div className={`relative ${sizeClass}`}>
+            <AnimatePresence mode="wait" initial={false}>
+              {copied ? (
+                <motion.div
+                  key="check"
+                  initial={{ scale: 0.5, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.5, opacity: 0 }}
+                  transition={{ type: 'spring', duration: 0.1, bounce: 0.5 }}
+                  className="absolute inset-0"
+                >
+                  <RiCheckLine className={`${sizeClass} text-success`} aria-hidden="true" />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="copy"
+                  initial={{ scale: 0.5, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.5, opacity: 0 }}
+                  transition={{ type: 'spring', duration: 0.15, bounce: 0.5 }}
+                  className="absolute inset-0"
+                >
+                  <RiFileCopyLine className={`${sizeClass}`} />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="px-2 py-1 text-xs" sideOffset={4}>
+        {copied ? 'Copied!' : 'Click to copy'}
+      </TooltipContent>
+    </Tooltip>
   );
 };
diff --git a/apps/dashboard/src/components/primitives/hover-to-copy.tsx b/apps/dashboard/src/components/primitives/hover-to-copy.tsx
deleted file mode 100644
index cace094279b..00000000000
--- a/apps/dashboard/src/components/primitives/hover-to-copy.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ComponentProps, useState } from 'react';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
-
-type HoverToCopyProps = ComponentProps<typeof TooltipTrigger> & {
-  valueToCopy: string;
-};
-
-export const HoverToCopy = (props: HoverToCopyProps) => {
-  const { valueToCopy, ...rest } = props;
-  const [isCopied, setIsCopied] = useState(false);
-
-  const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    try {
-      await navigator.clipboard.writeText(valueToCopy);
-      setIsCopied(true);
-      const timeout = setTimeout(() => setIsCopied(false), 1500);
-      return () => clearTimeout(timeout);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  return (
-    <Tooltip>
-      <TooltipTrigger aria-label="Copy to clipboard" onClick={copyToClipboard} {...rest} />
-      <TooltipContent
-        side="right"
-        onPointerDownOutside={(e) => {
-          e.preventDefault();
-        }}
-      >
-        {isCopied ? 'Copied!' : 'Click to copy'}
-      </TooltipContent>
-    </Tooltip>
-  );
-};
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx
index b59bc54b3a5..a241457001f 100644
--- a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx
+++ b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx
@@ -298,10 +298,7 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
                     <FormControl>
                       <InputField className="flex overflow-hidden pr-0">
                         <Input placeholder="Untitled" className="cursor-default" {...field} readOnly />
-                        <CopyButton
-                          valueToCopy={field.value}
-                          className="h-[34px] rounded-none border-l border-neutral-200"
-                        />
+                        <CopyButton valueToCopy={field.value} inputGroup />
                       </InputField>
                     </FormControl>
                     <FormMessage />
@@ -364,8 +361,10 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
               leadingIcon={RiSettingsLine}
               className="flex w-full justify-start gap-1.5 p-1.5 text-xs font-medium"
               type="button"
+              trailingIcon={RiArrowRightSLine}
             >
-              Configure channel preferences <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
+              Configure channel preferences
+              <span className="ml-auto" />
             </Button>
           </Link>
         </SidebarContent>
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
index 5260c783ab2..1caee6d6621 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step-form.tsx
@@ -255,11 +255,7 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
                           <FormControl>
                             <Input placeholder="Untitled" className="cursor-default" {...field} readOnly />
                           </FormControl>
-                          <CopyButton
-                            valueToCopy={field.value}
-                            size="xs"
-                            className="h-[34px] rounded-none border-l border-neutral-200"
-                          />
+                          <CopyButton valueToCopy={field.value} size="xs" inputGroup />
                         </InputField>
                         <FormMessage />
                       </FormItem>
diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
index e7d6cff999b..deb0875e174 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
@@ -14,7 +14,7 @@ import type { WorkflowResponseDto } from '@novu/shared';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { useMemo, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { RiFileCopyLine, RiSendPlaneFill } from 'react-icons/ri';
+import { RiSendPlaneFill } from 'react-icons/ri';
 import { Code2 } from '../../icons/code-2';
 import { CopyButton } from '../../primitives/copy-button';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../primitives/form/form';
@@ -133,13 +133,7 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
               <TabsTrigger className={tabsTriggerClassName} value="python" variant="regular">
                 Python
               </TabsTrigger>
-              <CopyButton
-                mode="ghost"
-                leadingIcon={RiFileCopyLine}
-                className="text-foreground-400 ml-auto"
-                size="xs"
-                valueToCopy={snippetValue}
-              >
+              <CopyButton mode="ghost" className="text-foreground-400 ml-auto" size="xs" valueToCopy={snippetValue}>
                 Copy code
               </CopyButton>
             </TabsList>
diff --git a/apps/dashboard/src/components/workflow-row.tsx b/apps/dashboard/src/components/workflow-row.tsx
index 3df3a1890f1..ccb96964d40 100644
--- a/apps/dashboard/src/components/workflow-row.tsx
+++ b/apps/dashboard/src/components/workflow-row.tsx
@@ -8,7 +8,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/primitives/dropdown-menu';
-import { HoverToCopy } from '@/components/primitives/hover-to-copy';
 import { TableCell, TableRow } from '@/components/primitives/table';
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/components/primitives/tooltip';
 import TruncatedText from '@/components/truncated-text';
@@ -27,7 +26,6 @@ import { ComponentProps, useState } from 'react';
 import { FaCode } from 'react-icons/fa6';
 import {
   RiDeleteBin2Line,
-  RiFileCopyLine,
   RiFlashlightLine,
   RiGitPullRequestFill,
   RiMore2Fill,
@@ -40,6 +38,7 @@ import { type ExternalToast } from 'sonner';
 import { ConfirmationModal } from './confirmation-modal';
 import { DeleteWorkflowDialog } from './delete-workflow-dialog';
 import { CompactButton } from './primitives/button-compact';
+import { CopyButton } from './primitives/copy-button';
 import { ToastIcon } from './primitives/sonner';
 import { showToast } from './primitives/sonner-helpers';
 import { TimeDisplayHoverCard } from './time-display-hover-card';
@@ -191,10 +190,16 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
           )}
           <TruncatedText className="max-w-[32ch]">{workflow.name}</TruncatedText>
         </div>
-        <HoverToCopy className="group relative z-10 flex items-center gap-1" valueToCopy={workflow.workflowId}>
+        <div className="flex items-center gap-1 transition-opacity duration-200">
           <TruncatedText className="text-foreground-400 font-code block text-xs">{workflow.workflowId}</TruncatedText>
-          <RiFileCopyLine className="text-foreground-400 invisible size-3 group-hover:visible" />
-        </HoverToCopy>
+
+          <CopyButton
+            className="z-10 flex size-2 p-0 px-1 opacity-0 group-hover:opacity-100"
+            valueToCopy={workflow.workflowId}
+            size="2xs"
+            mode="ghost"
+          ></CopyButton>
+        </div>
       </WorkflowLinkTableCell>
       <WorkflowLinkTableCell workflow={workflow} className="min-w-[200px]">
         <WorkflowStatus status={workflow.status} />