diff --git a/package.json b/package.json
index 5d5c1bbe..09e2bdc6 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "emoji-mart": "5.5.2",
     "fast-average-color": "9.4.0",
     "fast-deep-equal": "3.1.3",
+    "framer-motion": "11.0.3",
     "gpt-tokenizer": "2.1.2",
     "hast-util-from-html": "2.0.1",
     "hast-util-to-html": "9.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29faa7db..a35d80fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ dependencies:
   fast-deep-equal:
     specifier: 3.1.3
     version: 3.1.3
+  framer-motion:
+    specifier: 11.0.3
+    version: 11.0.3(react-dom@18.2.0)(react@18.2.0)
   gpt-tokenizer:
     specifier: 2.1.2
     version: 2.1.2
@@ -1856,6 +1859,20 @@ packages:
     resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
     dev: false
 
+  /@emotion/is-prop-valid@0.8.8:
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+    requiresBuild: true
+    dependencies:
+      '@emotion/memoize': 0.7.4
+    dev: false
+    optional: true
+
+  /@emotion/memoize@0.7.4:
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@emotion/memoize@0.8.1:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: false
@@ -8332,6 +8349,24 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
+  /framer-motion@11.0.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+    dev: false
+
   /fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
     dev: false
diff --git a/src/app/[locale]/framer-lazy-feature.ts b/src/app/[locale]/framer-lazy-feature.ts
new file mode 100644
index 00000000..bae59b0f
--- /dev/null
+++ b/src/app/[locale]/framer-lazy-feature.ts
@@ -0,0 +1,3 @@
+import { domMax } from "framer-motion"
+
+export default domMax
diff --git a/src/app/[locale]/providers.tsx b/src/app/[locale]/providers.tsx
index 9f0e3873..267fb7a4 100644
--- a/src/app/[locale]/providers.tsx
+++ b/src/app/[locale]/providers.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { LazyMotion, MotionConfig } from "framer-motion"
 import {
   IntlError,
   IntlErrorCode,
@@ -61,6 +62,9 @@ export const mantineDefaultColorScheme = mantineDefaultColorSchemeT as
   | "light"
   | "dark"
 
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default)
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   useMobileLayout()
   useNProgress()
@@ -97,7 +101,16 @@ export default function Providers({ children }: { children: React.ReactNode }) {
               signInStrategy="simple"
               ignoreWalletDisconnectEvent={true}
             >
-              <ModalStackProvider>{children}</ModalStackProvider>
+              <LazyMotion features={loadFeatures} strict key="framer">
+                <MotionConfig
+                  transition={{
+                    type: "spring",
+                    duration: 0.3,
+                  }}
+                >
+                  <ModalStackProvider>{children}</ModalStackProvider>
+                </MotionConfig>
+              </LazyMotion>
               <NotificationModal
                 colorScheme={colorScheme}
                 filter={filterNotification}
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index fa034160..b4192fb5 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence, m } from "framer-motion"
 import Link from "next/link"
 import React, { Fragment } from "react"
 
@@ -35,15 +36,31 @@ export function Menu({
       <HeadlessUiMenu.Button as={Fragment}>
         {React.cloneElement(target, { ref: refs.setReference })}
       </HeadlessUiMenu.Button>
-      <HeadlessUiMenu.Items
-        ref={refs.setFloating}
-        className={cn(
-          "absolute z-10 mt-1 w-max outline-none text-gray-600 bg-white rounded-lg ring-1 ring-border shadow-md py-2",
-        )}
-        style={floatingStyles}
-      >
-        {dropdown}
-      </HeadlessUiMenu.Items>
+      <AnimatePresence>
+        <HeadlessUiMenu.Items
+          className="absolute z-10 w-max"
+          ref={refs.setFloating}
+          style={floatingStyles}
+        >
+          <m.div
+            className="mt-1 outline-none text-gray-600 bg-white rounded-lg ring-1 ring-border shadow-md py-2"
+            initial={{
+              translateY: "10px",
+              opacity: 0,
+            }}
+            animate={{
+              translateY: "0px",
+              opacity: 1,
+            }}
+            exit={{
+              translateY: "10px",
+              opacity: 0,
+            }}
+          >
+            {dropdown}
+          </m.div>
+        </HeadlessUiMenu.Items>
+      </AnimatePresence>
     </HeadlessUiMenu>
   )
 }
@@ -71,7 +88,7 @@ Menu.Item = function MenuItem({
   const childElement = (
     <>
       <span
-        className="mr-2 fill-gray-500 flex items-center w-4 h-4 text-base leading-none"
+        className="mr-2 fill-gray-500 flex items-center size-4 text-base leading-none"
         aria-hidden
       >
         {icon}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 39eaa046..61692535 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,9 +1,15 @@
 "use client"
 
+import {
+  AnimatePresence,
+  m,
+  useMotionValue,
+  useMotionValueEvent,
+} from "framer-motion"
 import { useTranslations } from "next-intl"
-import React, { forwardRef, Fragment } from "react"
+import React, { forwardRef } from "react"
 
-import { Dialog, Transition } from "@headlessui/react"
+import { Dialog } from "@headlessui/react"
 
 import { cn } from "~/lib/utils"
 
@@ -41,46 +47,57 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
     ref,
   ) => {
     const t = useTranslations()
+    const x = useMotionValue(0)
+
+    useMotionValueEvent(x, "animationComplete", () => {
+      console.log("animation Complete on x")
+      afterLeave?.()
+    })
 
     return (
-      <Transition appear show={open} as={Fragment} afterLeave={afterLeave}>
-        <Dialog
-          onClose={() => setOpen(false)}
-          className="relative"
-          style={{
-            zIndex: zIndex ? zIndex : 10,
-          }}
-        >
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-100"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+      <AnimatePresence>
+        {open && (
+          <Dialog
+            open={open}
+            onClose={() => setOpen(false)}
+            className="relative"
+            style={{
+              zIndex: zIndex ? zIndex : 10,
+            }}
           >
-            <div
+            <m.div
               className="fixed inset-0 bg-black/25 z-40"
               aria-hidden={true}
+              style={{ x }}
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+              }}
+              exit={{
+                opacity: 0,
+              }}
             />
-          </Transition.Child>
 
-          <div
-            className={cn(
-              "fixed inset-0 flex items-center justify-center p-8 z-40",
-              boxClassName,
-            )}
-            ref={ref}
-          >
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-100"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-100"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
+            <m.div
+              className={cn(
+                "fixed inset-0 flex items-center justify-center p-8 z-40",
+                boxClassName,
+              )}
+              ref={ref}
+              initial={{
+                opacity: 0,
+                scale: 1.1,
+              }}
+              animate={{
+                opacity: 1,
+                scale: 1,
+              }}
+              exit={{
+                opacity: 0,
+                scale: 1.1,
+              }}
             >
               {/* The actual dialog panel  */}
               <Dialog.Panel
@@ -101,7 +118,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
                       {title}
                     </span>
                     <span
-                      className="absolute right-4 w-7 h-7 text-xl cursor-pointer bg-white flex items-center justify-center"
+                      className="absolute right-4 size-7 text-xl cursor-pointer bg-white flex items-center justify-center"
                       onClick={() => setOpen(false)}
                     >
                       <i className="i-mingcute-close-line inline-block" />
@@ -118,10 +135,10 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
                   </Button>
                 )}
               </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
+            </m.div>
+          </Dialog>
+        )}
+      </AnimatePresence>
     )
   },
 )
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
index f31c39eb..85574009 100644
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { AnimatePresence, m } from "framer-motion"
 import { useTranslations } from "next-intl"
 import { usePathname } from "next/navigation"
 import React from "react"
@@ -49,38 +50,47 @@ export const Tabs = ({
         className,
       )}
     >
-      {items.map((item) => {
-        if (item.hidden) return null
+      <AnimatePresence>
+        {items.map((item) => {
+          if (item.hidden) return null
 
-        return (
-          <UniLink
-            href={item.href}
-            onClick={item.onClick}
-            key={item.text}
-            className={cn(
-              "inline-flex items-center h-10 whitespace-nowrap cursor-pointer transition-colors focus-ring relative",
-              type === "rounded"
-                ? "rounded-full h-8 px-3 transition-colors"
-                : "after:absolute after:h-[2px] after:transition-[left,right] after:bottom-0",
-              type === "rounded"
-                ? item.active
-                  ? "bg-zinc-950 text-white"
-                  : "bg-zinc-100 text-zinc-800 hover:bg-zinc-200"
-                : item.active
-                  ? "text-black font-medium after:inset-x-0 after:bg-accent"
-                  : "text-gray-500 hover:text-gray-700 after:inset-x-1/2 hover:after:inset-x-0 after:bg-gray-700",
-            )}
-          >
-            {item.tooltip ? (
-              <Tooltip label={item.tooltip}>
+          return (
+            <UniLink
+              href={item.href}
+              onClick={item.onClick}
+              key={item.text}
+              className={cn(
+                "inline-flex items-center h-10 whitespace-nowrap cursor-pointer transition-colors focus-ring relative",
+                type === "rounded"
+                  ? "rounded-full h-8 px-3 transition-colors"
+                  : "",
+                type === "rounded"
+                  ? item.active
+                    ? "bg-zinc-950 text-white"
+                    : "bg-zinc-100 text-zinc-800 hover:bg-zinc-200"
+                  : item.active
+                    ? "text-accent font-medium"
+                    : "text-gray-600 hover:text-accent",
+              )}
+            >
+              {item.tooltip ? (
+                <Tooltip label={item.tooltip}>
+                  <>{t(item.text)}</>
+                </Tooltip>
+              ) : (
                 <>{t(item.text)}</>
-              </Tooltip>
-            ) : (
-              <>{t(item.text)}</>
-            )}
-          </UniLink>
-        )
-      })}
+              )}
+              {type !== "rounded" && item.active && (
+                <m.span
+                  className="absolute inset-x-0 bottom-0 bg-accent h-[2px]"
+                  layout
+                  layoutId="tab-underline"
+                ></m.span>
+              )}
+            </UniLink>
+          )
+        })}
+      </AnimatePresence>
     </div>
   )
 }
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index f505a318..f53177a5 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { AnimatePresence, m } from "framer-motion"
 import { useState } from "react"
 
 import {
@@ -58,7 +59,7 @@ export const Tooltip = ({
   })
 
   return (
-    <>
+    <div className="relative">
       <div
         ref={refs.setReference}
         {...getReferenceProps()}
@@ -70,24 +71,29 @@ export const Tooltip = ({
       >
         {children}
       </div>
-      {isMounted && (
-        <div
-          ref={refs.setFloating}
-          className={cn(
-            "bg-zinc-600 text-white rounded-lg shadow-lg px-3 py-1 whitespace-nowrap",
-            className,
-          )}
-          style={{
-            position: strategy,
-            top: y ?? "0",
-            left: x ?? "0",
-            ...styles,
-          }}
-          {...getFloatingProps()}
-        >
-          {label}
-        </div>
-      )}
-    </>
+      <AnimatePresence>
+        {isMounted && (
+          <m.div
+            ref={refs.setFloating}
+            className={cn(
+              "bg-zinc-600 text-white rounded-lg shadow-lg px-3 py-1 whitespace-nowrap",
+              className,
+            )}
+            style={{
+              position: strategy,
+              top: y ?? "0",
+              left: x ?? "0",
+              ...styles,
+            }}
+            initial={{ translateY: "10px", opacity: 0 }}
+            animate={{ translateY: "0px", opacity: 1 }}
+            exit={{ translateY: "10px", opacity: 0 }}
+            {...getFloatingProps()}
+          >
+            {label}
+          </m.div>
+        )}
+      </AnimatePresence>
+    </div>
   )
 }