diff --git a/.changeset/dirty-roses-happen.md b/.changeset/dirty-roses-happen.md
new file mode 100644
index 0000000..a8a9a6e
--- /dev/null
+++ b/.changeset/dirty-roses-happen.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+framer-motion animation
diff --git a/apps/ui/lib/components/Button/index.tsx b/apps/ui/lib/components/Button/index.tsx
index 2d07ff1..7438fd6 100644
--- a/apps/ui/lib/components/Button/index.tsx
+++ b/apps/ui/lib/components/Button/index.tsx
@@ -5,52 +5,52 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const buttonVariants = cva(
-    'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
-    {
-        variants: {
-            variant: {
-                default:
-                    'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
-                destructive:
-                    'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
-                outline:
-                    ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
-                secondary:
-                    'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
-                link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
-            },
-            size: {
-                default: 'grv-h-10 grv-px-4 grv-py-2',
-                sm: 'grv-h-9 grv-rounded-md grv-px-3',
-                lg: 'grv-h-11 grv-rounded-md grv-px-8',
-                icon: 'grv-h-10 grv-w-10',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
+  'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
+        destructive:
+          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
+        outline:
+          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
+        secondary:
+          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+        link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
+      },
+      size: {
+        default: 'grv-h-10 grv-px-4 grv-py-2',
+        sm: 'grv-h-9 grv-rounded-md grv-px-3',
+        lg: 'grv-h-11 grv-rounded-md grv-px-8',
+        icon: 'grv-h-10 grv-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
 );
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'button';
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
 
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
 Button.displayName = 'Button';
 
diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
index fdac16d..1791133 100644
--- a/apps/ui/lib/components/Chip/Chip.tsx
+++ b/apps/ui/lib/components/Chip/Chip.tsx
@@ -6,132 +6,131 @@ import { X as CloseIcon } from 'lucide-react';
 import { cn } from '@utils/utils';
 
 const chipVariants = cva(
-    'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
-    {
-        variants: {
-            variant: {
-                filled: 'grv-bg-primary-500 ui',
-                outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
-            },
-            size: {
-                sm: 'grv-h-6 grv-px-3 ui',
-                md: 'grv-h-8 grv-px-4 ui',
-                lg: 'grv-h-10 grv-px-5 ui',
-            },
-            clickable: {
-                true: 'grv-cursor-pointer',
-                false: '',
-            },
-        },
-        defaultVariants: {
-            variant: 'filled',
-            size: 'md',
-            clickable: false,
-        },
-    }
+  'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
+  {
+    variants: {
+      variant: {
+        filled: 'grv-bg-primary-500 ui',
+        outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
+      },
+      size: {
+        sm: 'grv-h-6 grv-px-3 ui',
+        md: 'grv-h-8 grv-px-4 ui',
+        lg: 'grv-h-10 grv-px-5 ui',
+      },
+      clickable: {
+        true: 'grv-cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'filled',
+      size: 'md',
+      clickable: false,
+    },
+  }
 );
 
 export interface ChipDivProps
-    extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof chipVariants> {
-    onDelete?: () => void;
-    as?: React.ElementType;
-    href?: never;
-    beforeChildren?: React.ReactNode;
-    afterChildren?: React.ReactNode;
+  onDelete?: () => void;
+  as?: React.ElementType;
+  href?: never;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
 }
 
 export interface ChipAnchorProps
-    extends React.HTMLAttributes<HTMLAnchorElement>,
+  extends React.HTMLAttributes<HTMLAnchorElement>,
     VariantProps<typeof chipVariants> {
-    onDelete?: () => void;
-    href?: string;
-    target?: string;
-    as?: React.ElementType;
-    beforeChildren?: React.ReactNode;
-    afterChildren?: React.ReactNode;
+  onDelete?: () => void;
+  href?: string;
+  target?: string;
+  as?: React.ElementType;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
 }
 
 export type ChipProps = ChipAnchorProps | ChipDivProps;
 
 const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            clickable,
-            onDelete,
-            href,
-            as,
-            beforeChildren,
-            afterChildren,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const Component = as || (href ? 'a' : 'div');
-        const isClickable = Boolean(clickable || href || props.onClick);
-
-        const textColor =
-            variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
+  (
+    {
+      className,
+      variant,
+      size,
+      clickable,
+      onDelete,
+      href,
+      as,
+      beforeChildren,
+      afterChildren,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = as || (href ? 'a' : 'div');
+    const isClickable = Boolean(clickable || href || props.onClick);
 
+    const textColor =
+      variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
 
-        const textSize =
-            size === 'sm'
-                ? 'grv-text-[10px]'
-                : size === 'md'
-                    ? 'grv-text-[12px]'
-                    : 'grv-text-[14px]';
+    const textSize =
+      size === 'sm'
+        ? 'grv-text-[10px]'
+        : size === 'md'
+          ? 'grv-text-[12px]'
+          : 'grv-text-[14px]';
 
-        return (
-            <Component
-                ref={ref}
-                className={cn(
-                    chipVariants({ variant, size, clickable: isClickable }),
-                    'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
-                    className
-                )}
-                {...(href && { href })}
-                {...props}
-            >
-                {beforeChildren && (
-                    <div
-                        className={cn(
-                            'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
-                        )}
-                    >
-                        {beforeChildren}
-                    </div>
-                )}
-                <div className={cn(textColor, textSize)}>{children}</div>
-                {afterChildren && (
-                    <div
-                        className={cn(
-                            `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
-                        )}
-                    >
-                        {afterChildren}
-                    </div>
-                )}
-                {onDelete && (
-                    <div
-                        className={cn(
-                            'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
-                            textSize
-                        )}
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            onDelete();
-                        }}
-                    >
-                        <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
-                    </div>
-                )}
-            </Component>
-        );
-    }
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          chipVariants({ variant, size, clickable: isClickable }),
+          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
+          className
+        )}
+        {...(href && { href })}
+        {...props}
+      >
+        {beforeChildren && (
+          <div
+            className={cn(
+              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
+            )}
+          >
+            {beforeChildren}
+          </div>
+        )}
+        <div className={cn(textColor, textSize)}>{children}</div>
+        {afterChildren && (
+          <div
+            className={cn(
+              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
+            )}
+          >
+            {afterChildren}
+          </div>
+        )}
+        {onDelete && (
+          <div
+            className={cn(
+              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
+              textSize
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
+          </div>
+        )}
+      </Component>
+    );
+  }
 );
 
 Chip.displayName = 'Chip';
diff --git a/apps/ui/lib/components/Modal/Modal.stories.tsx b/apps/ui/lib/components/Modal/Modal.stories.tsx
index bc4b8ac..032b743 100644
--- a/apps/ui/lib/components/Modal/Modal.stories.tsx
+++ b/apps/ui/lib/components/Modal/Modal.stories.tsx
@@ -1,12 +1,12 @@
 import {
-    Dialog,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-    DialogClose,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
 } from './Modal';
 import { Text } from '../Typography';
 import { Button } from '../Button';
@@ -17,157 +17,156 @@ import { useState } from 'react';
 import { Eye, EyeOff, Lock, Mail } from 'lucide-react';
 
 export default {
-    title: 'Components/Modal',
-    component: Dialog,
-    decorators: [withGlobalStyles],
+  title: 'Components/Modal',
+  component: Dialog,
+  decorators: [withGlobalStyles],
 };
 
 const BasicDialog = () => (
-    <Dialog>
-        <DialogTrigger asChild>
-            <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
-        </DialogTrigger>
-
-        <DialogContent className="grv-p-4">
-            <DialogClose />
-            <DialogHeader>
-                <DialogTitle>Dialog Title</DialogTitle>
-                <DialogDescription>
-                    This is a description for the dialog content.
-                </DialogDescription>
-            </DialogHeader>
-
-            <Text>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
-                risus non rikus.
-            </Text>
-        </DialogContent>
-    </Dialog>
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogClose />
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a description for the dialog content.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
+        risus non rikus.
+      </Text>
+    </DialogContent>
+  </Dialog>
 );
 
 export const Basic = () => <BasicDialog />;
 
 const ModalWithFooter = () => (
-    <Dialog>
-        <DialogTrigger asChild>
-            <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
-        </DialogTrigger>
-
-        <DialogContent className="grv-p-4">
-            <DialogClose />
-            <DialogHeader>
-                <DialogTitle>Dialog Title</DialogTitle>
-                <DialogDescription>
-                    This is a description for the dialog content.
-                </DialogDescription>
-            </DialogHeader>
-
-            <Text>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
-                risus non rikus.
-            </Text>
-
-            <DialogFooter>
-                <Button className="grv-btn grv-btn-primary">Save</Button>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogClose />
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a description for the dialog content.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
+        risus non rikus.
+      </Text>
+
+      <DialogFooter>
+        <Button className="grv-btn grv-btn-primary">Save</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 );
 
 export const WithFooter = () => <ModalWithFooter />;
 
 const ModalWithImage = () => (
-    <Dialog>
-        <DialogTrigger asChild>
-            <Button className="grv-btn grv-btn-primary">Open Greeting Card</Button>
-        </DialogTrigger>
-
-        <DialogContent className="grv-p-4">
-            <DialogHeader>
-                <DialogTitle>Hello 2025</DialogTitle>
-            </DialogHeader>
-            <DialogClose />
-
-            <img
-                className="grv-w-full grv-h-64 grv-object-cover grv-rounded-md"
-                src="https://images.unsplash.com/photo-1709884732297-4b3c1a3f725b?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                alt="Random Image"
-            />
-
-            <Text>
-                Wish you a very happy new year. May this year bring you joy and
-                happiness.
-            </Text>
-        </DialogContent>
-    </Dialog>
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Greeting Card</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogHeader>
+        <DialogTitle>Hello 2025</DialogTitle>
+      </DialogHeader>
+      <DialogClose />
+
+      <img
+        className="grv-w-full grv-h-64 grv-object-cover grv-rounded-md"
+        src="https://images.unsplash.com/photo-1709884732297-4b3c1a3f725b?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Random Image"
+      />
+
+      <Text>
+        Wish you a very happy new year. May this year bring you joy and
+        happiness.
+      </Text>
+    </DialogContent>
+  </Dialog>
 );
 
 export const WithImage = () => <ModalWithImage />;
 
 export const LoginModal = {
-    render: () => {
-        const [showPassword, setShowPassword] = useState(false);
-        return (
-            <Dialog>
-                <DialogTrigger asChild>
-                    <Button variant="default">Login</Button>
-                </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px] grv-flex">
-                    <DialogClose className="grv-bg-error-300" />
-                    <DialogHeader>
-                        <DialogTitle>Login</DialogTitle>
-                        <DialogDescription>
-                            Please enter your credentials to login.
-                        </DialogDescription>
-                    </DialogHeader>
-                    <form className="grid gap-4 py-4">
-                        <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="email" className="text-right">
-                                Email
-                            </Label>
-                            <TextField.Root variant="outlined" error={true}>
-                                <TextField.Icon position="start">
-                                    <Mail className="grv-w-4 grv-h-4" />
-                                </TextField.Icon>
-                                <TextField.Input placeholder="Email" type="email" />
-                                <TextField.HelperText>
-                                    Please enter a valid email address
-                                </TextField.HelperText>
-                            </TextField.Root>
-                        </div>
-                        <div className="grid grid-cols-4 items-center gap-4">
-                            <Label htmlFor="password" className="text-right">
-                                Password
-                            </Label>
-                            <TextField.Root variant={'outlined'}>
-                                <TextField.Icon position="start">
-                                    <Lock className="grv-w-4 grv-h-4" />
-                                </TextField.Icon>
-                                <TextField.Input
-                                    type={showPassword ? "text" : "password"}
-                                    placeholder="Enter password"
-                                />
-                                <TextField.Icon position="end">
-                                    <Button
-                                        variant={'outline'}
-                                        onClick={() => setShowPassword(!showPassword)}
-                                    >
-                                        {showPassword ? (
-                                            <EyeOff className="grv-w-4 grv-h-4" />
-                                        ) : (
-                                            <Eye className="grv-w-4 grv-h-4" />
-                                        )}
-                                    </Button>
-                                </TextField.Icon>
-                            </TextField.Root>
-                        </div>
-                        <Button type="submit" className="mt-4">
-                            Login
-                        </Button>
-                    </form>
-                </DialogContent>
-            </Dialog>
-        )
-    }
+  render: () => {
+    const [showPassword, setShowPassword] = useState(false);
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="default">Login</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px] grv-flex">
+          <DialogClose className="grv-bg-error-300" />
+          <DialogHeader>
+            <DialogTitle>Login</DialogTitle>
+            <DialogDescription>
+              Please enter your credentials to login.
+            </DialogDescription>
+          </DialogHeader>
+          <form className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="email" className="text-right">
+                Email
+              </Label>
+              <TextField.Root variant="outlined" error={true}>
+                <TextField.Icon position="start">
+                  <Mail className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input placeholder="Email" type="email" />
+                <TextField.HelperText>
+                  Please enter a valid email address
+                </TextField.HelperText>
+              </TextField.Root>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="password" className="text-right">
+                Password
+              </Label>
+              <TextField.Root variant={'outlined'}>
+                <TextField.Icon position="start">
+                  <Lock className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="Enter password"
+                />
+                <TextField.Icon position="end">
+                  <Button
+                    variant={'outline'}
+                    onClick={() => setShowPassword(!showPassword)}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="grv-w-4 grv-h-4" />
+                    ) : (
+                      <Eye className="grv-w-4 grv-h-4" />
+                    )}
+                  </Button>
+                </TextField.Icon>
+              </TextField.Root>
+            </div>
+            <Button type="submit" className="mt-4">
+              Login
+            </Button>
+          </form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
 };
-
diff --git a/apps/ui/lib/components/Textfield/Textfield.stories.tsx b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
index 65e4777..730d298 100644
--- a/apps/ui/lib/components/Textfield/Textfield.stories.tsx
+++ b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
@@ -1,29 +1,38 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { TextField } from './index';
-import { Mail, Lock, Eye, EyeOff, Search, User, Check, AlertCircle } from 'lucide-react';
+import {
+  Mail,
+  Lock,
+  Eye,
+  EyeOff,
+  Search,
+  User,
+  Check,
+  AlertCircle,
+} from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '../Button';
 
 const meta: Meta<typeof TextField.Root> = {
-    title: 'Components/TextField',
-    component: TextField.Root,
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['standard', 'outlined', 'filled'],
-            description: 'The visual style of the text field',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the text field',
-        },
-        error: {
-            control: 'boolean',
-            description: 'Whether the text field is in an error state',
-        },
+  title: 'Components/TextField',
+  component: TextField.Root,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['standard', 'outlined', 'filled'],
+      description: 'The visual style of the text field',
     },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the text field',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether the text field is in an error state',
+    },
+  },
 };
 
 export default meta;
@@ -31,189 +40,177 @@ type Story = StoryObj<typeof TextField.Root>;
 
 // Basic TextField
 export const Basic: Story = {
-    render: (args) => (
-        <TextField.Root {...args}>
-            <TextField.Input placeholder="Enter text" />
-        </TextField.Root>
-    ),
+  render: (args) => (
+    <TextField.Root {...args}>
+      <TextField.Input placeholder="Enter text" />
+    </TextField.Root>
+  ),
 };
 
 // With Icons
 export const WithIcons: Story = {
-    render: () => (
-        <div className="grv-space-y-4">
-            <TextField.Root variant={'outlined'}>
-                <TextField.Icon position="start">
-                    <Mail className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input placeholder="Enter email" />
-            </TextField.Root>
-
-            <TextField.Root variant={'outlined'}>
-                <TextField.Icon position="start">
-                    <Search className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input placeholder="Search..." />
-                <TextField.Icon position="end">
-                    <AlertCircle className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-            </TextField.Root>
-        </div>
-    ),
+  render: () => (
+    <div className="grv-space-y-4">
+      <TextField.Root variant={'outlined'}>
+        <TextField.Icon position="start">
+          <Mail className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input placeholder="Enter email" />
+      </TextField.Root>
+
+      <TextField.Root variant={'outlined'}>
+        <TextField.Icon position="start">
+          <Search className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input placeholder="Search..." />
+        <TextField.Icon position="end">
+          <AlertCircle className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+      </TextField.Root>
+    </div>
+  ),
 };
 
 // Password Input with Toggle
 export const PasswordInput: Story = {
-    render: () => {
-        const [showPassword, setShowPassword] = useState(false);
-        return (
-            <TextField.Root variant={'outlined'}>
-                <TextField.Icon position="start">
-                    <Lock className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input
-                    type={showPassword ? "text" : "password"}
-                    placeholder="Enter password"
-                />
-                <TextField.Icon position="end">
-                    <Button
-                        variant={'outline'}
-                        onClick={() => setShowPassword(!showPassword)}
-                    >
-                        {showPassword ? (
-                            <EyeOff className="grv-w-4 grv-h-4" />
-                        ) : (
-                            <Eye className="grv-w-4 grv-h-4" />
-                        )}
-                    </Button>
-                </TextField.Icon>
-            </TextField.Root>
-        );
-    },
+  render: () => {
+    const [showPassword, setShowPassword] = useState(false);
+    return (
+      <TextField.Root variant={'outlined'}>
+        <TextField.Icon position="start">
+          <Lock className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input
+          type={showPassword ? 'text' : 'password'}
+          placeholder="Enter password"
+        />
+        <TextField.Icon position="end">
+          <Button
+            variant={'outline'}
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? (
+              <EyeOff className="grv-w-4 grv-h-4" />
+            ) : (
+              <Eye className="grv-w-4 grv-h-4" />
+            )}
+          </Button>
+        </TextField.Icon>
+      </TextField.Root>
+    );
+  },
 };
 
 // Different Variants
 export const Variants: Story = {
-    render: () => (
-        <div className="grv-space-y-4">
-            <TextField.Root variant="standard">
-                <TextField.Input placeholder="Standard variant" />
-            </TextField.Root>
-
-            <TextField.Root variant="outlined">
-                <TextField.Input placeholder="Outlined variant" />
-            </TextField.Root>
-
-            <TextField.Root variant="filled">
-                <TextField.Input placeholder="Filled variant" />
-            </TextField.Root>
-        </div>
-    ),
+  render: () => (
+    <div className="grv-space-y-4">
+      <TextField.Root variant="standard">
+        <TextField.Input placeholder="Standard variant" />
+      </TextField.Root>
+
+      <TextField.Root variant="outlined">
+        <TextField.Input placeholder="Outlined variant" />
+      </TextField.Root>
+
+      <TextField.Root variant="filled">
+        <TextField.Input placeholder="Filled variant" />
+      </TextField.Root>
+    </div>
+  ),
 };
 
 // Different Sizes
 export const Sizes: Story = {
-    render: () => (
-        <div className="grv-space-y-4">
-            <TextField.Root variant={'outlined'} size="sm">
-                <TextField.Input placeholder="Small size" />
-            </TextField.Root>
-
-            <TextField.Root variant={'outlined'} size="md">
-                <TextField.Input placeholder="Medium size" />
-            </TextField.Root>
-
-            <TextField.Root variant={'outlined'} size="lg">
-                <TextField.Input placeholder="Large size" />
-            </TextField.Root>
-        </div>
-    ),
+  render: () => (
+    <div className="grv-space-y-4">
+      <TextField.Root variant={'outlined'} size="sm">
+        <TextField.Input placeholder="Small size" />
+      </TextField.Root>
+
+      <TextField.Root variant={'outlined'} size="md">
+        <TextField.Input placeholder="Medium size" />
+      </TextField.Root>
+
+      <TextField.Root variant={'outlined'} size="lg">
+        <TextField.Input placeholder="Large size" />
+      </TextField.Root>
+    </div>
+  ),
 };
 
 // With Helper Text
 export const WithHelperText: Story = {
-    render: () => (
-        <div className="grv-space-y-4">
-            <TextField.Root variant={'outlined'}>
-                <TextField.Input placeholder="With helper text" />
-                <TextField.HelperText>
-                    This is a helpful message
-                </TextField.HelperText>
-            </TextField.Root>
-
-            <TextField.Root variant={'outlined'} error={true}>
-                <TextField.Input placeholder="With error" />
-                <TextField.HelperText>
-                    This field is required
-                </TextField.HelperText>
-            </TextField.Root>
-        </div>
-    ),
+  render: () => (
+    <div className="grv-space-y-4">
+      <TextField.Root variant={'outlined'}>
+        <TextField.Input placeholder="With helper text" />
+        <TextField.HelperText>This is a helpful message</TextField.HelperText>
+      </TextField.Root>
+
+      <TextField.Root variant={'outlined'} error={true}>
+        <TextField.Input placeholder="With error" />
+        <TextField.HelperText>This field is required</TextField.HelperText>
+      </TextField.Root>
+    </div>
+  ),
 };
 
 // Form Example
 export const FormExample: Story = {
-    render: () => (
-        <form className="grv-space-y-4 grv-max-w-md">
-            <TextField.Root variant="outlined">
-                <TextField.Icon position="start">
-                    <User className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input placeholder="Username" />
-                <TextField.Icon position="end">
-                    <Check className="grv-w-4 grv-h-4 grv-text-green-500" />
-                </TextField.Icon>
-                <TextField.HelperText>
-                    Username is available
-                </TextField.HelperText>
-            </TextField.Root>
-
-            <TextField.Root variant="outlined" error={true}>
-                <TextField.Icon position="start">
-                    <Mail className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input placeholder="Email" type="email" />
-                <TextField.HelperText>
-                    Please enter a valid email address
-                </TextField.HelperText>
-            </TextField.Root>
-
-            <TextField.Root variant="outlined">
-                <TextField.Icon position="start">
-                    <Lock className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input type="password" placeholder="Password" />
-                <TextField.HelperText>
-                    Must be at least 8 characters
-                </TextField.HelperText>
-            </TextField.Root>
-        </form>
-    ),
+  render: () => (
+    <form className="grv-space-y-4 grv-max-w-md">
+      <TextField.Root variant="outlined">
+        <TextField.Icon position="start">
+          <User className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input placeholder="Username" />
+        <TextField.Icon position="end">
+          <Check className="grv-w-4 grv-h-4 grv-text-green-500" />
+        </TextField.Icon>
+        <TextField.HelperText>Username is available</TextField.HelperText>
+      </TextField.Root>
+
+      <TextField.Root variant="outlined" error={true}>
+        <TextField.Icon position="start">
+          <Mail className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input placeholder="Email" type="email" />
+        <TextField.HelperText>
+          Please enter a valid email address
+        </TextField.HelperText>
+      </TextField.Root>
+
+      <TextField.Root variant="outlined">
+        <TextField.Icon position="start">
+          <Lock className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input type="password" placeholder="Password" />
+        <TextField.HelperText>
+          Must be at least 8 characters
+        </TextField.HelperText>
+      </TextField.Root>
+    </form>
+  ),
 };
 
 // Disabled State
 export const DisabledStates: Story = {
-    render: () => (
-        <div className="grv-space-y-4">
-            <TextField.Root>
-                <TextField.Input
-                    placeholder="Disabled input"
-                    disabled
-                />
-            </TextField.Root>
-
-            <TextField.Root variant="outlined">
-                <TextField.Icon position="start">
-                    <Mail className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-                <TextField.Input
-                    placeholder="Disabled with icons"
-                    disabled
-                />
-                <TextField.Icon position="end">
-                    <AlertCircle className="grv-w-4 grv-h-4" />
-                </TextField.Icon>
-            </TextField.Root>
-        </div>
-    ),
-};
\ No newline at end of file
+  render: () => (
+    <div className="grv-space-y-4">
+      <TextField.Root>
+        <TextField.Input placeholder="Disabled input" disabled />
+      </TextField.Root>
+
+      <TextField.Root variant="outlined">
+        <TextField.Icon position="start">
+          <Mail className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+        <TextField.Input placeholder="Disabled with icons" disabled />
+        <TextField.Icon position="end">
+          <AlertCircle className="grv-w-4 grv-h-4" />
+        </TextField.Icon>
+      </TextField.Root>
+    </div>
+  ),
+};
diff --git a/apps/ui/lib/components/Textfield/index.tsx b/apps/ui/lib/components/Textfield/index.tsx
index 1ca5296..8e62359 100644
--- a/apps/ui/lib/components/Textfield/index.tsx
+++ b/apps/ui/lib/components/Textfield/index.tsx
@@ -5,211 +5,234 @@ import { cn } from '@utils/utils';
 import { Text } from '../Typography';
 
 const textFieldVariants = cva(
-    'grv-w-full grv-rounded-md grv-transition-all grv-duration-200 grv-ease-in-out',
-    {
-        variants: {
-            variant: {
-                filled: 'grv-bg-secondary-100 focus:bg-primary-50 grv-border-b-2 grv-border-primary focus:grv-outline-secondary-500 focus:grv-outline-2 focus:grv-border-secondary-500 ',
-                outlined: 'grv-bg-transparent grv-outline-2 focus:grv-outline-secondary-300  focus:border-primary-500 focus:grv-outline-2 focus:grv-border-secondary-500',
-                standard: 'grv-bg-transparent grv-border-none grv-outline-none grv-relative',
-            },
-            size: {
-                sm: 'grv-py-1 grv-px-2 grv-text-sm',
-                md: 'grv-py-2 grv-px-3 grv-text-base',
-                lg: 'grv-py-3 grv-px-4 grv-text-lg',
-            },
-            error: {
-                true: 'grv-border-error-500 focus:grv-border-error-500',
-                false: '',
-            },
-        },
-        defaultVariants: {
-            variant: 'standard',
-            size: 'md',
-            error: false,
-        },
-    }
+  'grv-w-full grv-rounded-md grv-transition-all grv-duration-200 grv-ease-in-out',
+  {
+    variants: {
+      variant: {
+        filled:
+          'grv-bg-secondary-100 focus:bg-primary-50 grv-border-b-2 grv-border-primary focus:grv-outline-secondary-500 focus:grv-outline-2 focus:grv-border-secondary-500 ',
+        outlined:
+          'grv-bg-transparent grv-outline-2 focus:grv-outline-secondary-300  focus:border-primary-500 focus:grv-outline-2 focus:grv-border-secondary-500',
+        standard:
+          'grv-bg-transparent grv-border-none grv-outline-none grv-relative',
+      },
+      size: {
+        sm: 'grv-py-1 grv-px-2 grv-text-sm',
+        md: 'grv-py-2 grv-px-3 grv-text-base',
+        lg: 'grv-py-3 grv-px-4 grv-text-lg',
+      },
+      error: {
+        true: 'grv-border-error-500 focus:grv-border-error-500',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'standard',
+      size: 'md',
+      error: false,
+    },
+  }
 );
 
 type TextFieldContextType = {
-    variant?: VariantProps<typeof textFieldVariants>['variant'];
-    size?: VariantProps<typeof textFieldVariants>['size'];
-    error?: boolean;
-    isFocused: boolean;
-    setIsFocused: (value: boolean) => void;
+  variant?: VariantProps<typeof textFieldVariants>['variant'];
+  size?: VariantProps<typeof textFieldVariants>['size'];
+  error?: boolean;
+  isFocused: boolean;
+  setIsFocused: (value: boolean) => void;
 };
 
-const TextFieldContext = createContext<TextFieldContextType | undefined>(undefined);
+const TextFieldContext = createContext<TextFieldContextType | undefined>(
+  undefined
+);
 
 const useTextField = () => {
-    const context = useContext(TextFieldContext);
-    if (!context) {
-        throw new Error('TextField components must be used within a TextField.Root');
-    }
-    return context;
+  const context = useContext(TextFieldContext);
+  if (!context) {
+    throw new Error(
+      'TextField components must be used within a TextField.Root'
+    );
+  }
+  return context;
 };
 
 interface TextFieldRootProps extends MotionProps {
-    children: React.ReactNode;
-    variant?: VariantProps<typeof textFieldVariants>['variant'];
-    size?: VariantProps<typeof textFieldVariants>['size'];
-    error?: boolean;
-    className?: string;
+  children: React.ReactNode;
+  variant?: VariantProps<typeof textFieldVariants>['variant'];
+  size?: VariantProps<typeof textFieldVariants>['size'];
+  error?: boolean;
+  className?: string;
 }
 
-interface TextFieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    className?: string;
+interface TextFieldInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  className?: string;
 }
 
 interface TextFieldIconProps {
-    children: React.ReactNode;
-    position: 'start' | 'end';
-    className?: string;
+  children: React.ReactNode;
+  position: 'start' | 'end';
+  className?: string;
 }
 
 interface TextFieldHelperTextProps {
-    children: React.ReactNode;
-    className?: string;
+  children: React.ReactNode;
+  className?: string;
 }
 
-const Root = ({ children, variant, size, error = false, className, ...props }: TextFieldRootProps) => {
-    const [isFocused, setIsFocused] = useState(false);
-
-    const containerVariants = {
-        initial: { scale: 1 },
-        focus: { scale: 1.01 },
-    };
-
-    const dashVariants = {
-        initial: {
-            scaleX: 1,
-            backgroundColor: '#e5e7eb'
-        },
-        focus: {
-            scaleX: 1,
-            backgroundColor: '#3b82f6'
-        },
-    };
-
-    return (
-        <TextFieldContext.Provider value={{ variant, size, error, isFocused, setIsFocused }}>
-            <div className="grv-flex grv-flex-col grv-gap-1">
-                <motion.div
-                    className={cn(
-                        'grv-relative',
-                        className
-                    )}
-                    initial="initial"
-                    animate={isFocused ? 'focus' : 'initial'}
-                    variants={containerVariants}
-                    {...props}
-                >
-                    <div className="grv-flex grv-items-center">
-                        {children}
-                    </div>
-                    {variant === 'standard' && (
-                        <motion.div
-                            className={cn(
-                                'grv-absolute grv-bottom-[-8px] grv-left-0 grv-right-0 grv-h-[2px] grv-rounded-full',
-                                error ? 'grv-bg-red-500' : 'grv-bg-gray-200'
-                            )}
-                            variants={dashVariants}
-                            initial="initial"
-                            animate={isFocused ? 'focus' : 'initial'}
-                            transition={{ duration: 0.2 }}
-                        />
-                    )}
-                </motion.div>
-            </div>
-        </TextFieldContext.Provider>
-    );
+const Root = ({
+  children,
+  variant,
+  size,
+  error = false,
+  className,
+  ...props
+}: TextFieldRootProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const containerVariants = {
+    initial: { scale: 1 },
+    focus: { scale: 1.01 },
+  };
+
+  const dashVariants = {
+    initial: {
+      scaleX: 1,
+      backgroundColor: '#e5e7eb',
+    },
+    focus: {
+      scaleX: 1,
+      backgroundColor: '#3b82f6',
+    },
+  };
+
+  return (
+    <TextFieldContext.Provider
+      value={{ variant, size, error, isFocused, setIsFocused }}
+    >
+      <div className="grv-flex grv-flex-col grv-gap-1">
+        <motion.div
+          className={cn('grv-relative', className)}
+          initial="initial"
+          animate={isFocused ? 'focus' : 'initial'}
+          variants={containerVariants}
+          {...props}
+        >
+          <div className="grv-flex grv-items-center">{children}</div>
+          {variant === 'standard' && (
+            <motion.div
+              className={cn(
+                'grv-absolute grv-bottom-[-8px] grv-left-0 grv-right-0 grv-h-[2px] grv-rounded-full',
+                error ? 'grv-bg-red-500' : 'grv-bg-gray-200'
+              )}
+              variants={dashVariants}
+              initial="initial"
+              animate={isFocused ? 'focus' : 'initial'}
+              transition={{ duration: 0.2 }}
+            />
+          )}
+        </motion.div>
+      </div>
+    </TextFieldContext.Provider>
+  );
 };
 
 const Input = forwardRef<HTMLInputElement, TextFieldInputProps>(
-    ({ className, type = 'text', placeholder, disabled, required, readOnly, onFocus, onBlur, ...props }, ref) => {
-        const { variant, size, error, setIsFocused } = useTextField();
-
-        return (
-            <input
-                ref={ref}
-                type={type}
-                placeholder={placeholder}
-                disabled={disabled}
-                required={required}
-                readOnly={readOnly}
-                className={cn(
-                    textFieldVariants({ variant, size, error }),
-                    'grv-w-full grv-bg-transparent focus:outline-none',
-                    disabled && 'grv-cursor-not-allowed grv-opacity-50',
-                    className
-                )}
-                onFocus={(e) => {
-                    setIsFocused(true);
-                    onFocus?.(e);
-                }}
-                onBlur={(e) => {
-                    setIsFocused(false);
-                    onBlur?.(e);
-                }}
-                {...props}
-            />
-        );
-    }
-);
-
-const Icon = ({ children, position, className }: TextFieldIconProps) => {
-    const { isFocused } = useTextField();
-
-    const iconVariants = {
-        initial: { opacity: 0.7 },
-        focus: { opacity: 1 },
-    };
+  (
+    {
+      className,
+      type = 'text',
+      placeholder,
+      disabled,
+      required,
+      readOnly,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const { variant, size, error, setIsFocused } = useTextField();
 
     return (
-        <motion.span
-            className={cn(
-                position === 'start' ? 'grv-ml-3 grv-mr-2' : 'grv-mr-3 grv-ml-2',
-                'grv-text-text-secondary',
-                className
-            )}
-            variants={iconVariants}
-            initial="initial"
-            animate={isFocused ? 'focus' : 'initial'}
-        >
-            {children}
-        </motion.span>
+      <input
+        ref={ref}
+        type={type}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        className={cn(
+          textFieldVariants({ variant, size, error }),
+          'grv-w-full grv-bg-transparent focus:outline-none',
+          disabled && 'grv-cursor-not-allowed grv-opacity-50',
+          className
+        )}
+        onFocus={(e) => {
+          setIsFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
+        {...props}
+      />
     );
+  }
+);
+
+const Icon = ({ children, position, className }: TextFieldIconProps) => {
+  const { isFocused } = useTextField();
+
+  const iconVariants = {
+    initial: { opacity: 0.7 },
+    focus: { opacity: 1 },
+  };
+
+  return (
+    <motion.span
+      className={cn(
+        position === 'start' ? 'grv-ml-3 grv-mr-2' : 'grv-mr-3 grv-ml-2',
+        'grv-text-text-secondary',
+        className
+      )}
+      variants={iconVariants}
+      initial="initial"
+      animate={isFocused ? 'focus' : 'initial'}
+    >
+      {children}
+    </motion.span>
+  );
 };
 
 const HelperText = ({ children, className }: TextFieldHelperTextProps) => {
-    const { error } = useTextField();
-
-    return (
-        <AnimatePresence>
-            <motion.p
-                className={cn(
-                    'grv-text-xs grv-mt-1 grv-block',
-                    error ? 'grv-text-error-500' : 'grv-text-text-secondary',
-                    className
-                )}
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                transition={{ duration: 0.2 }}
-            >
-                <Text>
-                    {children}
-                </Text>
-            </motion.p>
-        </AnimatePresence>
-    );
+  const { error } = useTextField();
+
+  return (
+    <AnimatePresence>
+      <motion.p
+        className={cn(
+          'grv-text-xs grv-mt-1 grv-block',
+          error ? 'grv-text-error-500' : 'grv-text-text-secondary',
+          className
+        )}
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -10 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Text>{children}</Text>
+      </motion.p>
+    </AnimatePresence>
+  );
 };
 
 export const TextField = {
-    Root,
-    Input: Input,
-    Icon,
-    HelperText,
+  Root,
+  Input: Input,
+  Icon,
+  HelperText,
 };
 
-Input.displayName = 'TextField.Input';
\ No newline at end of file
+Input.displayName = 'TextField.Input';
diff --git a/apps/ui/lib/components/Typography/Typography.stories.tsx b/apps/ui/lib/components/Typography/Typography.stories.tsx
index 834b414..4b8f1d4 100644
--- a/apps/ui/lib/components/Typography/Typography.stories.tsx
+++ b/apps/ui/lib/components/Typography/Typography.stories.tsx
@@ -1,292 +1,275 @@
 import { Text } from '../..';
 
 export default {
-    title: 'Components/Text',
-    component: Text,
-    parameters: {
-        layout: 'centered',
+  title: 'Components/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: [
+          'body-1',
+          'body-2',
+          'body-3',
+          'button-1',
+          'button-2',
+          'button-3',
+          'heading-1',
+          'heading-2',
+          'heading-3',
+          'heading-4',
+          'heading-5',
+          'heading-6',
+          'label-1',
+          'label-2',
+          'label-2-strong',
+          'label-3',
+          'subtitle-1',
+          'subtitle-2',
+          'subtitle-3',
+        ],
+      },
+      defaultValue: 'body-1',
+      description: 'The variant of the Text component.',
     },
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-                options: [
-                    'body-1',
-                    'body-2',
-                    'body-3',
-                    'button-1',
-                    'button-2',
-                    'button-3',
-                    'heading-1',
-                    'heading-2',
-                    'heading-3',
-                    'heading-4',
-                    'heading-5',
-                    'heading-6',
-                    'label-1',
-                    'label-2',
-                    'label-2-strong',
-                    'label-3',
-                    'subtitle-1',
-                    'subtitle-2',
-                    'subtitle-3',
-                ],
-            },
-            defaultValue: 'body-1',
-            description: 'The variant of the Text component.',
-        },
-        alignment: {
-            control: {
-                type: 'select',
-                options: ['left', 'right', 'center', 'justify'],
-            },
-            defaultValue: 'left',
-            description: 'The text alignment of the Text component.',
-        },
-        color: {
-            control: 'color',
-            defaultValue: '#2A2C35',
-            description: 'The color of the text in the Text component.',
-        },
-        asChild: {
-            control: 'text',
-            description:
-                'The type of child element to render within the Text component.',
-        },
-        children: {
-            control: 'text',
-            description: 'The text content of the Text component.',
-        },
+    alignment: {
+      control: {
+        type: 'select',
+        options: ['left', 'right', 'center', 'justify'],
+      },
+      defaultValue: 'left',
+      description: 'The text alignment of the Text component.',
     },
+    color: {
+      control: 'color',
+      defaultValue: '#2A2C35',
+      description: 'The color of the text in the Text component.',
+    },
+    asChild: {
+      control: 'text',
+      description:
+        'The type of child element to render within the Text component.',
+    },
+    children: {
+      control: 'text',
+      description: 'The text content of the Text component.',
+    },
+  },
 };
 
-
 export const Default = () => (
-    <Text
-        variant="heading-1"
-        alignment="left"
-        color="#2A2C35"
-        children="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    />
+  <Text
+    variant="heading-1"
+    alignment="left"
+    color="#2A2C35"
+    children="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  />
 );
 
 // Combined Story
 export const AllVariants = () => {
-    return (
-        <>
-            {/* Body-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-1" color="#2A2C35">
-                    body-1
-                </Text>
-            </div>
+  return (
+    <>
+      {/* Body-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-1" color="#2A2C35">
+          body-1
+        </Text>
+      </div>
 
-            {/* Body-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-2" color="#2A2C35">
-                    body-2
-                </Text>
-            </div>
+      {/* Body-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-2" color="#2A2C35">
+          body-2
+        </Text>
+      </div>
 
-            {/* Body-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-3" color="#2A2C35">
-                    body-3
-                </Text>
-            </div>
+      {/* Body-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-3" color="#2A2C35">
+          body-3
+        </Text>
+      </div>
 
-            {/* Button-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="button-1" color="#2A2C35">
-                    Button-1
-                </Text>
-            </div>
+      {/* Button-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="button-1" color="#2A2C35">
+          Button-1
+        </Text>
+      </div>
 
-            {/* Button-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="button-2" color="#2A2C35">
-                    Button-2
-                </Text>
-            </div>
+      {/* Button-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="button-2" color="#2A2C35">
+          Button-2
+        </Text>
+      </div>
 
-            {/* Heading-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-1" color="#2A2C35">
-                    Heading-1
-                </Text>
-            </div>
+      {/* Heading-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-1" color="#2A2C35">
+          Heading-1
+        </Text>
+      </div>
 
-            {/* Heading-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-2" color="#2A2C35">
-                    Heading-2
-                </Text>
-            </div>
+      {/* Heading-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-2" color="#2A2C35">
+          Heading-2
+        </Text>
+      </div>
 
-            {/* Heading-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-3" color="#2A2C35">
-                    Heading-3
-                </Text>
-            </div>
+      {/* Heading-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-3" color="#2A2C35">
+          Heading-3
+        </Text>
+      </div>
 
-            {/* Heading-4 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-4" color="#2A2C35">
-                    Heading-4
-                </Text>
-            </div>
+      {/* Heading-4 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-4" color="#2A2C35">
+          Heading-4
+        </Text>
+      </div>
 
-            {/* Heading-5 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-5" color="#2A2C35">
-                    Heading-5
-                </Text>
-            </div>
+      {/* Heading-5 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-5" color="#2A2C35">
+          Heading-5
+        </Text>
+      </div>
 
-            {/* Heading-6 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-6" color="#2A2C35">
-                    Heading-6
-                </Text>
-            </div>
+      {/* Heading-6 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-6" color="#2A2C35">
+          Heading-6
+        </Text>
+      </div>
 
-            {/* Label-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="label-1" color="#2A2C35">
-                    label-1
-                </Text>
-            </div>
+      {/* Label-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="label-1" color="#2A2C35">
+          label-1
+        </Text>
+      </div>
 
-            {/* Label-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="label-2" color="#2A2C35">
-                    label-2
-                </Text>
-            </div>
+      {/* Label-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="label-2" color="#2A2C35">
+          label-2
+        </Text>
+      </div>
 
-            {/* Subtitle-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-1" color="#2A2C35">
-                    subtitle-1
-                </Text>
-            </div>
+      {/* Subtitle-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-1" color="#2A2C35">
+          subtitle-1
+        </Text>
+      </div>
 
-            {/* Subtitle-2*/}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-2" color="#2A2C35">
-                    subtitle-2
-                </Text>
-            </div>
+      {/* Subtitle-2*/}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-2" color="#2A2C35">
+          subtitle-2
+        </Text>
+      </div>
 
-            {/* Subtitle-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-3" color="#2A2C35">
-                    subtitle-3
-                </Text>
-            </div>
-        </>
-    );
+      {/* Subtitle-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-3" color="#2A2C35">
+          subtitle-3
+        </Text>
+      </div>
+    </>
+  );
 };
 
-
 export const withTailwind = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
-                With extensible tailwind classes
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
+        With extensible tailwind classes
+      </Text>
+    </div>
+  );
 };
 
 export const withTailwindAndVariant = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text variant="heading-1" className="grv-text-error-700">
-                with tailwind classes and variant
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text variant="heading-1" className="grv-text-error-700">
+        with tailwind classes and variant
+      </Text>
+    </div>
+  );
 };
 
 export const withTailwindAndVariant2 = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text
-                variant="heading-1"
-                className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
-            >
-                with tailwind classes and variant
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text
+        variant="heading-1"
+        className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
+      >
+        with tailwind classes and variant
+      </Text>
+    </div>
+  );
 };
 
 export const AlignmentCenter = () => (
-    <Text
-        variant="body-1"
-        alignment="center"
-        color="#2A2C35"
-    >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Text>
+  <Text variant="body-1" alignment="center" color="#2A2C35">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </Text>
 );
 
 // Alignment Left
 export const AlignmentLeft = () => (
-    <Text
-        variant="body-1"
-        alignment="left"
-        color="#2A2C35"
-    >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
-    </Text>
+  <Text variant="body-1" alignment="left" color="#2A2C35">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi.
+  </Text>
 );
 
 // Alignment Right
 export const AlignmentRight = () => (
-    <Text
-        variant="body-1"
-        alignment="right"
-        color="#2A2C35"
-    >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
-    </Text>
+  <Text variant="body-1" alignment="right" color="#2A2C35">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi.
+  </Text>
 );
 
 // Alignment Justify
 export const AlignmentJustify = () => (
-    <Text
-        variant="body-1"
-        alignment="justify"
-        color="#2A2C35"
-    >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
-    </Text>
+  <Text variant="body-1" alignment="justify" color="#2A2C35">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi.
+  </Text>
 );
 
 // Max Lines Example
 export const MaxLinesEllipsis = () => (
-    <Text
-        variant="body-2"
-        alignment="left"
-        color="#2A2C35"
-        maxLines={2}
-    >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
-    </Text>
+  <Text variant="body-2" alignment="left" color="#2A2C35" maxLines={2}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi.
+  </Text>
 );
 
 // As Child Example
 export const AsChildExample = () => (
-    <Text
-        variant="body-1"
-        asChild={true}
-        alignment="center"
-        color="#2A2C35"
-    >
-        <h1>This is heading 1</h1>
-    </Text>
-);
\ No newline at end of file
+  <Text variant="body-1" asChild={true} alignment="center" color="#2A2C35">
+    <h1>This is heading 1</h1>
+  </Text>
+);
diff --git a/apps/ui/package.json b/apps/ui/package.json
index b2e8b98..a3f706c 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -49,6 +49,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
+    "framer-motion": "^11.17.0",
     "lucide-react": "^0.377.0",
     "postcss-prefix-selector": "^1.16.1",
     "tailwind-merge": "^2.3.0",
diff --git a/package-lock.json b/package-lock.json
index 76549d2..8a6e418 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,6 +90,7 @@
         "@radix-ui/react-select": "^2.0.0",
         "class-variance-authority": "^0.7.0",
         "classnames": "^2.5.1",
+        "framer-motion": "^11.17.0",
         "lucide-react": "^0.377.0",
         "postcss-prefix-selector": "^1.16.1",
         "tailwind-merge": "^2.3.0",
@@ -17059,16 +17060,18 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.5.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz",
-      "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==",
+      "version": "11.17.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
+      "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
       "dependencies": {
+        "motion-dom": "^11.16.4",
+        "motion-utils": "^11.16.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
         "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@emotion/is-prop-valid": {
@@ -22584,6 +22587,19 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.16.4",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
+      "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
+      "dependencies": {
+        "motion-utils": "^11.16.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
+      "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw=="
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "license": "MIT",