diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx
index f512659a..9c25cd76 100644
--- a/app/docs/components/card/variant/ProductCard.tsx
+++ b/app/docs/components/card/variant/ProductCard.tsx
@@ -5,7 +5,7 @@ const ProductCard = () => {
   return (
     <Card>
       <CardHeader>
-        <Image src="https://via.placeholder.com/600x400" alt="image" width={600} height={400} />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
       </CardHeader>
       <CardContent className="space-y-3">
         <CardTitle>Lorem ipsum dolor sit</CardTitle>
@@ -27,7 +27,7 @@ export const CardComponent = () => {
   return (
     <Card>
       <CardHeader>
-        <Image src="https://via.placeholder.com/600x400" alt="image" width={600} height={400} />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
       </CardHeader>
       <CardContent className="space-y-3">
         <CardTitle>Lorem ipsum dolor sit</CardTitle>
diff --git a/app/docs/components/popover/variant/CardPopover.tsx b/app/docs/components/popover/variant/CardPopover.tsx
index e78e8ec3..71da6392 100644
--- a/app/docs/components/popover/variant/CardPopover.tsx
+++ b/app/docs/components/popover/variant/CardPopover.tsx
@@ -8,13 +8,7 @@ const CardPopover = () => {
       <Popover placement="left">
         <PopoverAction>Left</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -27,13 +21,7 @@ const CardPopover = () => {
       <Popover placement="right">
         <PopoverAction>Right</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -46,13 +34,7 @@ const CardPopover = () => {
       <Popover placement="top">
         <PopoverAction>Top</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -65,13 +47,7 @@ const CardPopover = () => {
       <Popover placement="bottom">
         <PopoverAction>Bottom</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -95,13 +71,7 @@ export const PopoverComponent = () => {
     <Popover placement="left">
       <PopoverAction>Left</PopoverAction>
       <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-        <Image
-          src="https://via.placeholder.com/600x400"
-          className="rounded-t-xl"
-          alt="image"
-          width={600}
-          height={300}
-        />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
         <div className="space-y-2 p-6">
           <PopoverHeading>Keep Design System</PopoverHeading>
           <PopoverDescription>
diff --git a/app/docs/components/popover/variant/IconPopover.tsx b/app/docs/components/popover/variant/IconPopover.tsx
index 8b5d2213..c6ad3de5 100644
--- a/app/docs/components/popover/variant/IconPopover.tsx
+++ b/app/docs/components/popover/variant/IconPopover.tsx
@@ -7,7 +7,7 @@ const IconPopover = () => {
     <div className="flex h-52 items-center justify-center gap-5">
       <Popover placement="left">
         <PopoverAction>Left</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -29,7 +29,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="right">
         <PopoverAction>Right</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -51,7 +51,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="top">
         <PopoverAction>Top</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -73,7 +73,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="bottom">
         <PopoverAction>Bottom</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -107,7 +107,7 @@ export const PopoverComponent = () => {
   return (
     <Popover placement="right">
       <PopoverAction>Right</PopoverAction>
-      <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+      <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 dark:border-metal-800 dark:bg-metal-900 shadow-sm">
         <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
           <Confetti size={24} weight="fill" />
         </div>
diff --git a/app/src/components/Drawer/DrawerContent.tsx b/app/src/components/Drawer/DrawerContent.tsx
index 63e43887..f997856d 100644
--- a/app/src/components/Drawer/DrawerContent.tsx
+++ b/app/src/components/Drawer/DrawerContent.tsx
@@ -23,7 +23,12 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(({ children
             {...props}
             ref={ref}
             className={cn(keepDrawerTheme.content.base, keepDrawerTheme.content.position[position], className)}>
-            {children}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.3, delay: 0.3 } }}
+              exit={{ opacity: 0 }}>
+              {children}
+            </motion.div>
           </motion.div>
         </DrawerPortal>
       )}
diff --git a/app/src/components/Drawer/animation.ts b/app/src/components/Drawer/animation.ts
index d33489d5..5692981c 100644
--- a/app/src/components/Drawer/animation.ts
+++ b/app/src/components/Drawer/animation.ts
@@ -10,22 +10,22 @@ export interface DrawerVariantsProps {
 const drawerVariants: DrawerVariantsProps = {
   left: {
     initial: { x: '-100%', opacity: 0.5 },
-    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, x: '-100%' },
   },
   right: {
     initial: { x: '100%', opacity: 0.5 },
-    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, x: '100%' },
   },
   top: {
     initial: { y: '-100%', opacity: 0.5 },
-    animate: { opacity: 1, height: 'auto', y: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: 'auto', y: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, y: '-100%' },
   },
   bottom: {
     initial: { y: '100%', opacity: 0.5 },
-    animate: { opacity: 1, overflow: 'hidden', y: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, overflow: 'hidden', y: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, y: '100%' },
   },
 }
diff --git a/app/src/components/Dropdown/List.tsx b/app/src/components/Dropdown/List.tsx
index 72e59351..49c036b5 100644
--- a/app/src/components/Dropdown/List.tsx
+++ b/app/src/components/Dropdown/List.tsx
@@ -18,8 +18,11 @@ export const DropdownList = forwardRef<HTMLDivElement, DropdownListProps>(
           y: 0,
           height: '100%',
           transition: {
-            duration: 0.2,
-            delay: 0.3,
+            type: 'spring',
+            duration: 0.3,
+            delay: 0.1,
+            damping: 25,
+            stiffness: 500,
           },
         }}
         exit={{ opacity: 0, y: '10px', height: 0 }}
diff --git a/app/src/components/Modal/ModalContent.tsx b/app/src/components/Modal/ModalContent.tsx
index 659c045f..e8d6c42b 100644
--- a/app/src/components/Modal/ModalContent.tsx
+++ b/app/src/components/Modal/ModalContent.tsx
@@ -13,7 +13,7 @@ const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
     return (
       <AnimatePresence>
         {isOpen && (
-          <ModalPortal>
+          <ModalPortal key="modal">
             <motion.div
               {...props}
               className={cn(
@@ -21,10 +21,10 @@ const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
                 className,
               )}
               ref={ref}
-              initial={{ scale: 0.9, opacity: 0.5 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.2 }}
-              exit={{ opacity: 0, scale: 0.9 }}>
+              initial={{ scale: 0.5, opacity: 0, y: 40 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              transition={{ duration: 0.3, type: 'spring', damping: 25, stiffness: 500 }}
+              exit={{ opacity: 0.5, scale: 0.5, y: 40 }}>
               {children}
             </motion.div>
           </ModalPortal>
diff --git a/app/src/components/Notification/NotificationContent.tsx b/app/src/components/Notification/NotificationContent.tsx
index 7cb9e275..70918d7a 100644
--- a/app/src/components/Notification/NotificationContent.tsx
+++ b/app/src/components/Notification/NotificationContent.tsx
@@ -27,28 +27,53 @@ const contentTheme = {
 
 const NotificationDirection: VariantsProps = {
   'top-left': {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '-100%' },
   },
   'top-right': {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '100%' },
   },
   'bottom-left': {
-    initial: { opacity: 0, y: '100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '-100%' },
   },
   'bottom-right': {
-    initial: { opacity: 0, y: '100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '100%' },
   },
   center: {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, y: '-100%' },
   },
 }
diff --git a/app/src/components/Popover/animation.ts b/app/src/components/Popover/animation.ts
index 60e5314c..c4ede7fc 100644
--- a/app/src/components/Popover/animation.ts
+++ b/app/src/components/Popover/animation.ts
@@ -11,73 +11,97 @@ const popoverVariants: PopoverIVariants = {
   top: {
     initial: {
       opacity: 0,
-      y: '8px',
+      y: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
+      scale: 1,
       y: 0,
+      transformOrigin: 'bottom center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
+      scale: 0.8,
       opacity: 0,
-      y: '4px',
+      y: '10px',
     },
   },
   bottom: {
     initial: {
       opacity: 0,
-      y: '8px',
+      y: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       y: 0,
+      scale: 1,
+      transformOrigin: 'top center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
-      y: '4px',
+      y: '10px',
+      scale: 0.8,
     },
   },
   left: {
     initial: {
       opacity: 0,
-      x: '-8px',
+      x: '-10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
+      transformOrigin: 'right center',
       x: 0,
+      scale: 1,
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
+      scale: 0.8,
       opacity: 0,
-      x: '-4px',
+      x: '-10px',
     },
   },
   right: {
     initial: {
       opacity: 0,
-      x: '20px',
+      x: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       x: 0,
+      scale: 1,
+      transformOrigin: 'left center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
-      x: '4px',
+      x: '10px',
+      scale: 0.8,
     },
   },
 }
diff --git a/app/src/components/Skeleton/theme.ts b/app/src/components/Skeleton/theme.ts
index 72603693..4add9e4c 100644
--- a/app/src/components/Skeleton/theme.ts
+++ b/app/src/components/Skeleton/theme.ts
@@ -1,10 +1,10 @@
-interface keepSkeletonTheme {
+interface KeepSkeletonTheme {
   base: string
   animation: string
   line: string
 }
 
-export const skeletonTheme: keepSkeletonTheme = {
+export const skeletonTheme: KeepSkeletonTheme = {
   base: 'w-full',
   animation: 'animate-pulse',
   line: 'w-full bg-metal-100 dark:bg-metal-800 rounded-xl',
diff --git a/app/src/components/Tooltip/animation.ts b/app/src/components/Tooltip/animation.ts
index afd6299a..b2886527 100644
--- a/app/src/components/Tooltip/animation.ts
+++ b/app/src/components/Tooltip/animation.ts
@@ -12,84 +12,96 @@ const TooltipVariants: TooltipIVariants = {
     initial: {
       opacity: 0,
       y: '8px',
-      scale: 0.7,
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       y: 0,
+      transformOrigin: 'bottom center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
       scale: 1,
     },
     exit: {
       opacity: 0,
       y: '8px',
-      scale: 0.7,
+      scale: 0.8,
     },
   },
   bottom: {
     initial: {
       opacity: 0,
       y: '8px',
-      scale: 0.7,
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
+      transformOrigin: 'top center',
       y: 0,
       scale: 1,
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
       y: '8px',
-      scale: 0.7,
+      scale: 0.8,
     },
   },
   left: {
     initial: {
       opacity: 0,
       x: '-20px',
-      scale: 0.7,
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       x: 0,
       scale: 1,
+      transformOrigin: 'right center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
       x: '-8px',
-      scale: 0.7,
+      scale: 0.8,
     },
   },
   right: {
     initial: {
       opacity: 0,
       x: '20px',
-      scale: 0.9,
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       x: 0,
       scale: 1,
+      transformOrigin: 'left center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
       x: '8px',
-      scale: 0.9,
+      scale: 0.8,
     },
   },
 }
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 3f0fc50a..c7f12e5c 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,11 +1,10 @@
 import type { MDXComponents } from 'mdx/types'
 
-// eslint-disable-next-line no-unused-vars
 export const useMDXComponents: (components: MDXComponents) => MDXComponents = (components) => {
   return {
     h2: (props) => (
       <h2
-        className="section-title group z-10 before:invisible before:block before:content-[''] xl:before:-mt-24 xl:before:h-32 2xl:before:-mt-48 2xl:before:h-[244px]"
+        className="section-title group relative -z-10 before:invisible before:block before:content-[''] xl:before:-mt-24 xl:before:h-32 2xl:before:-mt-48 2xl:before:h-[244px]"
         {...props}>
         {props.children}
         <a
@@ -16,19 +15,6 @@ export const useMDXComponents: (components: MDXComponents) => MDXComponents = (c
         </a>
       </h2>
     ),
-    h3: (props) => (
-      <h3
-        className="group relative z-10 text-body-1 font-bold text-gray-900 before:invisible before:-mt-20 before:block before:h-20 before:content-['']"
-        {...props}>
-        {props.children}
-        <a
-          aria-label={`Link to this section: ${props.children}`}
-          href={`#${props.id}`}
-          className="relative -z-10 ml-2 text-primary-700 opacity-0 transition-opacity group-hover:opacity-100">
-          #
-        </a>
-      </h3>
-    ),
     ...components,
   }
 }
diff --git a/public/images/keep-card.jpg b/public/images/keep-card.jpg
new file mode 100644
index 00000000..55bfd880
Binary files /dev/null and b/public/images/keep-card.jpg differ