diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index e6bfb81..6410cf5 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -13,6 +13,7 @@ import {
   PopoverButton,
   PopoverGroup,
   PopoverPanel,
+  Transition
 } from '@headlessui/react'
 import {
   Bars3Icon,
@@ -112,23 +113,26 @@ export default function Header() {
         <div className="flex lg:flex-1">
           <button 
             onClick={() => router.push('/')}
-            className="-m-1.5 p-1.5"
+            className="p-2 flex items-center gap-3 max-w-full lg:-m-1.5 lg:gap-0"
           >
             <span className="sr-only">ProfitPlanet</span>
             <Image
               src="/images/logos/pp_logo_gold_transparent.png"
               alt="ProfitPlanet Logo"
-              width={240}
-              height={70}
-              className="h-[4.5rem] w-auto"
+              width={280}
+              height={84}
+              className="h-14 w-auto flex-shrink-0 sm:h-16 lg:h-[4.5rem]"
             />
+            {/* Removed flickering mobile heading (now only shown inside the sliding panel) */}
           </button>
         </div>
         <div className="flex lg:hidden">
           <button
             type="button"
             onClick={() => setMobileMenuOpen(true)}
-            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+            aria-expanded={mobileMenuOpen}
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400 transition-transform duration-300 ease-out data-[open=true]:rotate-90"
+            data-open={mobileMenuOpen ? 'true' : 'false'}
           >
             <span className="sr-only">Open main menu</span>
             <Bars3Icon aria-hidden="true" className="size-6" />
@@ -254,144 +258,173 @@ export default function Header() {
         </div>
       </nav>
       <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
-        <div className="fixed inset-0 z-50" />
-        <DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-black/10 dark:sm:ring-gray-100/10 transition-colors">
-          <div className="flex items-center justify-between">
-            <button 
-              onClick={() => router.push('/')}
-              className="-m-1.5 p-1.5"
-            >
-              <span className="sr-only">ProfitPlanet</span>
-              <Image
-                src="/images/logos/pp_logo_gold_transparent.png"
-                alt="ProfitPlanet Logo"
-                width={185}
-                height={52}
-                className="h-[3.25rem] w-auto"
-              />
-            </button>
-            <button
-              type="button"
-              onClick={() => setMobileMenuOpen(false)}
-              className="-m-2.5 rounded-md p-2.5 text-gray-400"
-            >
-              <span className="sr-only">Close menu</span>
-              <XMarkIcon aria-hidden="true" className="size-6" />
-            </button>
-          </div>
-          <div className="mt-6 flow-root">
-            <div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
-              {/* Insert theme toggle in mobile */}
-              <div className="py-6">
-                <button
-                  onClick={toggleTheme}
-                  className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
+        {/* Overlay with fade */}
+        <Transition
+          appear
+          show={mobileMenuOpen}
+        >
+          <Transition.Child
+            enter="transition-opacity duration-300 ease-out"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-200 ease-in"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm" />
+          </Transition.Child>
+
+          {/* Sliding panel */}
+          <Transition.Child
+            enter="transform transition-transform duration-300 ease-out"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transform transition-transform duration-250 ease-in"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <DialogPanel className="fixed inset-y-0 right-0 z-50 w-full sm:max-w-sm h-full overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-900 p-5 sm:ring-1 sm:ring-black/10 dark:sm:ring-gray-100/10">
+              <div className="flex items-center justify-between">
+                <button 
+                  onClick={() => router.push('/')}
+                  className="p-1.5 flex items-center gap-3"
                 >
-                  {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
-                  {isDark ? 'Light Mode' : 'Dark Mode'}
+                  <span className="sr-only">ProfitPlanet</span>
+                  <Image
+                    src="/images/logos/pp_logo_gold_transparent.png"
+                    alt="ProfitPlanet Logo"
+                    width={190}
+                    height={60}
+                    className="h-12 w-auto flex-shrink-0"
+                  />
+                  <span className="text-xl font-bold tracking-tight text-[#D4AF37]">
+                    Profit Planet
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="rounded-md p-2.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-transform duration-300 hover:scale-110"
+                >
+                  <span className="sr-only">Close menu</span>
+                  <XMarkIcon aria-hidden="true" className="size-6" />
                 </button>
               </div>
-              {user ? (
-                <>
-                  <div className="space-y-2 py-6">
-                    <Disclosure as="div" className="-mx-3">
-                      <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
-                        Shop
-                        <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
-                      </DisclosureButton>
-                      <DisclosurePanel className="mt-2 space-y-1">
-                        {shopItems.map(item => (
-                          <DisclosureButton
-                            key={item.name}
-                            as="button"
-                            onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
-                            className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                          >
-                            {item.name}
-                          </DisclosureButton>
-                        ))}
-                      </DisclosurePanel>
-                    </Disclosure>
-                    {navLinks.map(link => (
-                      <button
-                        key={link.name}
-                        onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
-                        className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                      >
-                        {link.name}
-                      </button>
-                    ))}
+              <div className="mt-6 flow-root">
+                <div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
+                  <div className="py-6">
+                    <button
+                      onClick={toggleTheme}
+                      className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
+                    >
+                      {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+                      {isDark ? 'Light Mode' : 'Dark Mode'}
+                    </button>
+                    <div className="mt-4 px-1">
+                      <LanguageSwitcher variant="dark" />
+                    </div>
                   </div>
-                  <div className="py-6 space-y-2">
-                    <div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
-                      <div className="font-medium text-white">
-                        {user?.firstName && user?.lastName 
-                          ? `${user.firstName} ${user.lastName}`
-                          : user?.email || 'User'
-                        }
+                  {user ? (
+                    <>
+                      <div className="space-y-2 py-6">
+                        <Disclosure as="div">
+                          <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
+                            Shop
+                            <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
+                          </DisclosureButton>
+                          <DisclosurePanel className="mt-2 space-y-1">
+                            {shopItems.map(item => (
+                              <DisclosureButton
+                                key={item.name}
+                                as="button"
+                                onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
+                                className="block rounded-lg py-2 pl-6 pr-3 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                              >
+                                {item.name}
+                              </DisclosureButton>
+                            ))}
+                          </DisclosurePanel>
+                        </Disclosure>
+                        {navLinks.map(link => (
+                          <button
+                            key={link.name}
+                            onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
+                            className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                          >
+                            {link.name}
+                          </button>
+                        ))}
                       </div>
-                      <div className="text-sm text-gray-400">
-                        {user?.email || 'user@example.com'}
+                      <div className="py-6 space-y-2">
+                        <div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
+                          <div className="font-medium text-white">
+                            {user?.firstName && user?.lastName 
+                              ? `${user.firstName} ${user.lastName}`
+                              : user?.email || 'User'
+                            }
+                          </div>
+                          <div className="text-sm text-gray-400">
+                            {user?.email || 'user@example.com'}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => { router.push('/profile'); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          Profile
+                        </button>
+                        <button
+                          onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          Logout
+                        </button>
                       </div>
-                      <div className="mt-4">
-                        <div className="text-sm font-medium text-gray-400 mb-2">Language</div>
-                        <LanguageSwitcher variant="dark" />
+                    </>
+                  ) : (
+                    <div className="py-6 space-y-4">
+                      <Disclosure as="div">
+                        <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
+                          Shop
+                          <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
+                        </DisclosureButton>
+                        <DisclosurePanel className="mt-2 space-y-1">
+                          {shopItems.map(item => (
+                            <DisclosureButton
+                              key={item.name}
+                              as="button"
+                              onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
+                              className="block rounded-lg py-2 pl-6 pr-3 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                            >
+                              {item.name}
+                            </DisclosureButton>
+                          ))}
+                        </DisclosurePanel>
+                      </Disclosure>
+                      {navLinks.map(link => (
+                        <button
+                          key={link.name}
+                          onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          {link.name}
+                        </button>
+                      ))}
+                      <div className="px-3">
+                        <button
+                          onClick={() => { router.push('/login'); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          Log in
+                        </button>
                       </div>
                     </div>
-                    <button
-                      onClick={() => {
-                        router.push('/profile');
-                        setMobileMenuOpen(false);
-                      }}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                    >
-                      Profile
-                    </button>
-                    <button
-                      onClick={() => {
-                        handleLogout();
-                        setMobileMenuOpen(false);
-                      }}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                    >
-                      Logout
-                    </button>
-                  </div>
-                </>
-              ) : (
-                <div className="py-6 space-y-4">
-                  <Disclosure as="div" className="-mx-3">
-                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
-                      Shop
-                      <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
-                    </DisclosureButton>
-                    <DisclosurePanel className="mt-2 space-y-1">
-                      {shopItems.map(item => (
-                        <DisclosureButton
-                          key={item.name}
-                          as="button"
-                          onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
-                          className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                        >
-                          {item.name}
-                        </DisclosureButton>
-                      ))}
-                    </DisclosurePanel>
-                  </Disclosure>
-                  {navLinks.map(link => (
-                    <button
-                      key={link.name}
-                      onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                    >
-                      {link.name}
-                    </button>
-                  ))}
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-        </DialogPanel>
+              </div>
+            </DialogPanel>
+          </Transition.Child>
+        </Transition>
       </Dialog>
     </header>
   )