diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e26fb90f4..918914ff3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -435,7 +435,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
@@ -448,7 +448,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -3230,28 +3230,28 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@tweenjs/tween.js": {
@@ -3407,7 +3407,7 @@
       "version": "18.19.80",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.80.tgz",
       "integrity": "sha512-kEWeMwMeIvxYkeg1gTc01awpwLbfMRZXdIhwRcakd/KlK53jmRC26LqcbIt7fnAQTu5GzlnWmzA3H6+l1u6xxQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -4105,7 +4105,7 @@
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4128,7 +4128,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.11.0"
@@ -5169,7 +5169,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/cross-env": {
@@ -5548,7 +5548,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -8309,7 +8309,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/math-intrinsics": {
@@ -10844,7 +10844,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -10888,7 +10888,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/tsconfig-paths": {
@@ -11075,7 +11075,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/unrs-resolver": {
       "version": "1.7.2",
@@ -11227,7 +11227,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/vaul": {
@@ -11824,7 +11824,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
diff --git a/frontend/src/components/navbar/Header.tsx b/frontend/src/components/navbar/Header.tsx
index 2e5f09d81..97300c014 100644
--- a/frontend/src/components/navbar/Header.tsx
+++ b/frontend/src/components/navbar/Header.tsx
@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { FileText, MessageCircle } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/src/components/buttons/button';
+import { buttonVariants } from '@/src/components/buttons/buttonVariants';
 import { useIsMobile } from '@/src/hooks/use-mobile';
 import UserIcon from '@/src/components/navbar/UserIcon';
 import ThemeToggle from '@/src/components/theme/ThemeToggle';
@@ -24,12 +26,31 @@ const Header = ({
     setMobileMenuOpen(!mobileMenuOpen);
   };
 
+  const closeMobileMenu = () => {
+    setMobileMenuOpen(false);
+  };
+
+  // Lock body scroll when drawer is open
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    // Cleanup on unmount
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [mobileMenuOpen]);
+
   const handleLogoClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /');
     window.location.href = '/';
   };
+
   return (
     <>
       <header className="sticky top-0 z-50 flex items-center justify-between border-b p-6 backdrop-blur-sm dark:border-b-slate-800">
@@ -49,7 +70,8 @@ const Header = ({
 
         {/* Right side container for all controls */}
         <div className="flex items-center gap-4">
-          {/* Desktop Navigation - shown when not mobile */}
+          {/* Desktop Navigation - shown when not mobile and not logged in */}
+          <ThemeToggle />
           {!isMobile && !isLoggedIn && (
             <nav className="flex items-center gap-6">
               <Link
@@ -63,57 +85,220 @@ const Header = ({
               </Link>
             </nav>
           )}
+
+          {/* Desktop Navigation - shown when not mobile and logged in */}
+          {!isMobile && isLoggedIn && (
+            <nav className="flex items-center gap-6">
+              <Link
+                to="/assessment"
+                className="text-gray-600 transition-colors hover:text-pink-600 dark:text-slate-200 dark:hover:text-pink-600"
+              >
+                <FileText className="h-6 w-6 text-gray-500" />
+              </Link>
+              <Link
+                to="/chat"
+                className="text-gray-600 transition-colors hover:text-pink-600 dark:text-slate-200 dark:hover:text-pink-600"
+              >
+                <MessageCircle className="h-6 w-6 text-gray-500" />
+              </Link>
+            </nav>
+          )}
+
           {/* Show UserIcon only when logged in */}
           {isLoggedIn && <UserIcon />}
-          {/* Mobile Menu Button - shown only on mobile and when not logged in */}
-          {isMobile && !isLoggedIn && (
+
+          {/* Mobile Menu Button - shown only on mobile */}
+          {isMobile && (
             <button
               type="button"
-              className="flex flex-col"
+              className="relative z-50 flex flex-col"
               onClick={toggleMobileMenu}
               aria-label="Toggle mobile menu"
             >
               <span
-                className={`block h-0.5 w-6 bg-gray-600 transition-transform duration-300 ${mobileMenuOpen ? 'translate-y-1.5 rotate-45' : ''}`}
+                className={`block h-0.5 w-6 bg-gray-600 transition-transform duration-300 dark:bg-slate-200 ${
+                  mobileMenuOpen ? 'translate-y-1.5 rotate-45' : ''
+                }`}
               ></span>
               <span
-                className={`my-1 block h-0.5 w-6 bg-gray-600 transition-opacity duration-300 ${mobileMenuOpen ? 'opacity-0' : ''}`}
+                className={`my-1 block h-0.5 w-6 bg-gray-600 transition-opacity duration-300 dark:bg-slate-200 ${
+                  mobileMenuOpen ? 'opacity-0' : ''
+                }`}
               ></span>
               <span
-                className={`block h-0.5 w-6 bg-gray-600 transition-transform duration-300 ${mobileMenuOpen ? '-translate-y-1.5 -rotate-45' : ''}`}
+                className={`block h-0.5 w-6 bg-gray-600 transition-transform duration-300 dark:bg-slate-200 ${
+                  mobileMenuOpen ? '-translate-y-1.5 -rotate-45' : ''
+                }`}
               ></span>
             </button>
-          )}{' '}
-          <ThemeToggle />
+          )}
         </div>
       </header>
 
-      {/* Mobile Menu Dropdown - only for non-logged in users */}
-      <AnimatePresence>
-        {isMobile && mobileMenuOpen && !isLoggedIn && (
+      {/* Mobile Sheet/Drawer */}
+      {isMobile && (
+        <>
+          {/* Backdrop */}
           <motion.div
-            layout
-            className="absolute left-0 right-0 top-[76px] z-40 border-b border-b-slate-800 bg-white dark:bg-gray-900"
+            className="fixed inset-0 z-40 bg-black/50"
             initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+            animate={{ opacity: mobileMenuOpen ? 1 : 0 }}
             transition={{ duration: 0.3 }}
+            style={{ pointerEvents: mobileMenuOpen ? 'auto' : 'none' }}
+            onClick={closeMobileMenu}
+          />
+
+          {/* Slide Drawer */}
+          <motion.div
+            className="fixed left-0 top-0 z-50 h-full w-full max-w-[100vw] border-r bg-white dark:border-slate-800 dark:bg-gray-900"
+            initial={{ x: '-100%' }}
+            animate={{ x: mobileMenuOpen ? 0 : '-100%' }}
+            transition={{
+              type: 'spring',
+              stiffness: 300,
+              damping: 30
+            }}
           >
-            <div className="flex flex-col items-center justify-center py-2">
-              <Link
-                to="/auth/sign-in"
-                className="py-2 text-gray-600 transition-colors hover:text-pink-600 dark:text-slate-200 dark:hover:text-pink-600"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                Sign In
-              </Link>
-              <Link to="/auth/sign-up" className="py-2" onClick={() => setMobileMenuOpen(false)}>
-                <Button className="bg-pink-600 text-white hover:bg-pink-700">Get Started</Button>
-              </Link>
+            <div className="flex h-full flex-col">
+              {/* Drawer Header */}
+              <div className="flex items-center justify-between border-b p-6 dark:border-slate-800">
+                <button
+                  type="button"
+                  onClick={handleLogoClick}
+                  className="border-none bg-transparent p-0"
+                >
+                  <motion.div
+                    className="flex cursor-pointer items-center gap-2"
+                    initial={{ scale: 0.8, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ duration: 0.5 }}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    <img src={logoSrc} alt={`${appName} Logo`} className="h-auto w-6" />
+                    <span className="pl-2 text-xl font-bold text-pink-600">{appName}</span>
+                  </motion.div>
+                </button>
+                <button
+                  type="button"
+                  onClick={closeMobileMenu}
+                  className="rounded-lg p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+                  aria-label="Close menu"
+                >
+                  <svg
+                    className="h-5 w-5 text-gray-600 dark:text-slate-200"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Drawer Content */}
+              <div className="flex flex-1 flex-col items-center justify-center space-y-8 px-6 py-8">
+                {!isLoggedIn ? (
+                  <>
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{
+                        opacity: mobileMenuOpen ? 1 : 0,
+                        y: mobileMenuOpen ? 0 : 20
+                      }}
+                      transition={{ delay: mobileMenuOpen ? 0.1 : 0, duration: 0.3 }}
+                    >
+                      <Link
+                        to="/auth/sign-in"
+                        className={`${buttonVariants({ variant: 'outline' })} flex w-full items-center gap-2 px-8 py-6 text-xl dark:bg-gray-900 dark:text-pink-600 dark:hover:text-pink-700 sm:w-auto`}
+                        onClick={closeMobileMenu}
+                      >
+                        Sign In
+                      </Link>
+                    </motion.div>
+
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{
+                        opacity: mobileMenuOpen ? 1 : 0,
+                        y: mobileMenuOpen ? 0 : 20
+                      }}
+                      transition={{ delay: mobileMenuOpen ? 0.2 : 0, duration: 0.3 }}
+                    >
+                      <Link to="/auth/sign-up" onClick={closeMobileMenu}>
+                        <Button className="flex w-full items-center gap-2 bg-pink-600 px-8 py-6 text-lg text-white hover:bg-pink-700 sm:w-auto">
+                          Get Started
+                        </Button>
+                      </Link>
+                    </motion.div>
+                  </>
+                ) : (
+                  <>
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{
+                        opacity: mobileMenuOpen ? 1 : 0,
+                        y: mobileMenuOpen ? 0 : 20
+                      }}
+                      transition={{ delay: mobileMenuOpen ? 0.1 : 0, duration: 0.3 }}
+                    >
+                      <Link
+                        to="/user/profile"
+                        className="flex w-full items-center gap-2 rounded-lg bg-pink-600 px-8 py-2 text-lg text-white hover:bg-pink-700 sm:w-auto"
+                        onClick={closeMobileMenu}
+                      >
+                        <UserIcon />
+                        Profile
+                      </Link>
+                    </motion.div>
+
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{
+                        opacity: mobileMenuOpen ? 1 : 0,
+                        y: mobileMenuOpen ? 0 : 20
+                      }}
+                      transition={{ delay: mobileMenuOpen ? 0.15 : 0, duration: 0.3 }}
+                    >
+                      <Link
+                        to="/assessment"
+                        className={`${buttonVariants({ variant: 'outline' })} flex w-full items-center gap-2 px-8 py-6 text-xl dark:bg-gray-900 dark:text-pink-600 dark:hover:text-pink-700 sm:w-auto`}
+                        onClick={closeMobileMenu}
+                      >
+                        <FileText className="h-6 w-6 text-gray-500" />
+                        Assessment
+                      </Link>
+                    </motion.div>
+
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{
+                        opacity: mobileMenuOpen ? 1 : 0,
+                        y: mobileMenuOpen ? 0 : 20
+                      }}
+                      transition={{ delay: mobileMenuOpen ? 0.2 : 0, duration: 0.3 }}
+                    >
+                      <Link
+                        to="/chat"
+                        className={`${buttonVariants({ variant: 'outline' })} flex w-full items-center gap-2 px-8 py-6 text-xl dark:bg-gray-900 dark:text-pink-600 dark:hover:text-pink-700 sm:w-auto`}
+                        onClick={closeMobileMenu}
+                      >
+                        <MessageCircle className="h-6 w-6 text-gray-500" />
+                        Chat
+                      </Link>
+                    </motion.div>
+                  </>
+                )}
+              </div>
             </div>
           </motion.div>
-        )}
-      </AnimatePresence>
+        </>
+      )}
     </>
   );
 };
diff --git a/frontend/src/components/navbar/UserIcon.tsx b/frontend/src/components/navbar/UserIcon.tsx
index 25bfc563f..6e50cfb54 100644
--- a/frontend/src/components/navbar/UserIcon.tsx
+++ b/frontend/src/components/navbar/UserIcon.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { User, List, MessageCircle } from 'lucide-react';
-import { Link, useNavigate } from 'react-router-dom';
+import { User, MessageCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import { assessmentApi } from '@/src/pages/assessment/api';
 import { getConversationsList } from '@/src/pages/chat/sidebar/api/get-list/getConversationsList';
 import { useAuth } from '@/src/pages/auth/context/useAuthContext';
 
 const UserIcon: React.FC = () => {
   const { isAuthenticated } = useAuth();
-  const [hasHistory, setHasHistory] = useState(false);
+  const [/*hasHistory,*/ setHasHistory] = useState(false);
   const [hasConversations, setHasConversations] = useState(false);
   const [loading, setLoading] = useState(true);
-  const navigate = useNavigate();
+  /*const navigate = useNavigate();*/
 
   useEffect(() => {
     const checkHistory = async () => {
@@ -43,12 +43,12 @@ const UserIcon: React.FC = () => {
     window.location.href = '/user/profile';
   };
 
-  const handleHistoryClick = (e: React.MouseEvent) => {
+  /*const handleHistoryClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /assessment/history');
     window.location.href = '/assessment/history';
-  };
+  };*/
 
   const handleChatClick = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -70,27 +70,29 @@ const UserIcon: React.FC = () => {
       {!loading && hasConversations && (
         <button
           onClick={handleChatClick}
+          type="button"
           title="Chat with Dottie"
           className="text-sm font-medium hover:text-pink-600"
         >
           <MessageCircle className="h-5 w-5" />
         </button>
       )}
-      {!loading && hasHistory && (
+      {/*{!loading && hasHistory && (
         <button
           onClick={handleHistoryClick}
           title="Assessment History"
           className="text-sm font-medium hover:text-pink-600"
         >
-          <List className="h-5 w-5" />
+          <FileText className="h-6 w-6" />
         </button>
-      )}
-      <button 
+      )}*/}
+      <button
         onClick={handleProfileClick}
-        title="Profile" 
+        type="button"
+        title="Profile"
         className="hover:text-pink-600"
       >
-        <User className="h-5 w-5" />
+        <User className="h-6 w-6" />
       </button>
     </div>
   );