diff --git a/src/components/BreadCrumbComponent.tsx b/src/components/BreadCrumbComponent.tsx
index 79b85842e..3dd3753e9 100644
--- a/src/components/BreadCrumbComponent.tsx
+++ b/src/components/BreadCrumbComponent.tsx
@@ -11,7 +11,7 @@ import {
 import { FullCourseContent } from '@/db/course';
 import { Home } from 'lucide-react';
 import Link from 'next/link';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 
 export default function BreadCrumbComponent({
   rest,
@@ -93,7 +93,7 @@ export default function BreadCrumbComponent({
               finalRouteArray = [...rest];
             }
             return (
-              <>
+              <Fragment key={indexofBreadCrumbId}>
                 {index !== array.length - 1 ? (
                   <>
                     <BreadcrumbItem>
@@ -116,7 +116,7 @@ export default function BreadCrumbComponent({
                     </BreadcrumbPage>
                   </BreadcrumbItem>
                 )}
-              </>
+              </Fragment>
             );
           })}
         </BreadcrumbList>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bc0bb781a..052a855c5 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -41,7 +41,7 @@ export const Navbar = () => {
   );
 
   return (
-    <AnimatePresence>
+    <>
       <motion.nav
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -143,35 +143,33 @@ export const Navbar = () => {
         </div>
 
         {/* Mobile menu */}
-        {!session?.user && (
-          <>
-            {isMenuOpen && (
+        <AnimatePresence>
+          {!session?.user && isMenuOpen && (
+            <motion.div
+              className="bg-background p-4 md:hidden"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+            >
               <motion.div
-                className="bg-background p-4 md:hidden"
+                className="flex gap-2"
                 initial={{ opacity: 0, y: -20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -20 }}
               >
-                <motion.div
-                  className="flex gap-2"
-                  initial={{ opacity: 0, y: -20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                >
-                  <AppbarAuth />
+                <AppbarAuth />
                   <Button variant={'branding'} className="w-full">
-                    <Link
+                  <Link
                       href={'https://harkirat.classx.co.in/new-courses'}
-                      target="_blank"
-                    >
-                      Join now
-                    </Link>
-                  </Button>
-                </motion.div>
+                    target="_blank"
+                  >
+                    Join now
+                  </Link>
+                </Button>
               </motion.div>
-            )}
-          </>
-        )}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </motion.nav>
 
       {/* Mobile search overlay */}
@@ -195,6 +193,6 @@ export const Navbar = () => {
           </motion.div>
         )}
       </AnimatePresence>
-    </AnimatePresence>
+    </>
   );
 };