diff --git a/src/components/ui/FloatingNav.tsx b/src/components/ui/FloatingNav.tsx
index 7425bf2..f2e563a 100644
--- a/src/components/ui/FloatingNav.tsx
+++ b/src/components/ui/FloatingNav.tsx
@@ -1,6 +1,8 @@
+"use client";
+
 import { useState, useEffect } from 'react';
 import { useButtonClick } from '@/hooks/useButtonClick';
-import { motion } from 'motion/react';
+import { motion, AnimatePresence } from "framer-motion";
 
 type NavItem = {
   name: string;
@@ -55,9 +57,13 @@ export default function FloatingNav({ logo, navItems, ctaButton }: FloatingNavPr
   const CtaButtonHandler = useButtonClick(ctaButton.href);
 
   return (
-    <>
+    <AnimatePresence>
       {visible && (
-        <nav
+        <motion.nav
+          initial={{ y: -100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -100, opacity: 0 }}
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
           className="fixed top-6 left-1/2 -translate-x-1/2 z-50"
         >
           <div className="flex items-center justify-between gap-8 px-4 py-2 border rounded-full border-accent bg-card/80 backdrop-blur-lg">
@@ -74,8 +80,8 @@ export default function FloatingNav({ logo, navItems, ctaButton }: FloatingNavPr
               {ctaButton.text}
             </button>
           </div>
-        </nav>
+        </motion.nav>
       )}
-    </>
+    </AnimatePresence>
   );
 }
\ No newline at end of file