diff --git a/frontend/app/api/stats/route.ts b/frontend/app/api/stats/route.ts
new file mode 100644
index 00000000..15e7e636
--- /dev/null
+++ b/frontend/app/api/stats/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { getPlatformStats } from '@/lib/about/stats';
+
+export async function GET() {
+  try {
+    const stats = await getPlatformStats();
+    return NextResponse.json(stats);
+  } catch (error) {
+    console.error('Failed to fetch platform stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stats' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 35d15137..a56f36df 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -51,6 +51,7 @@
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
+  --logo-foreground: oklch(0.25 0.08 250);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
@@ -88,6 +89,7 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
+  --logo-foreground: oklch(0.95 0.05 350);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -135,6 +137,10 @@
   }
 }
 
+.container-main {
+  @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
 .qa-accordion-item:hover,
 .qa-accordion-item:focus-within,
 .qa-accordion-item[data-state='open'] {
@@ -178,6 +184,15 @@
     width: 0%;
   }
 }
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 @keyframes shrink {
   from {
     transform: scaleX(1);
@@ -234,8 +249,12 @@
 
 /* about-community */
 @keyframes scroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 .animate-scroll {
@@ -248,8 +267,12 @@
 
 /* Vertical Marquee Animation */
 @keyframes marquee-vertical {
-  0% { transform: translateY(0); }
-  100% { transform: translateY(-50%); } /* Рухаємось на 50%, бо контент дубльовано */
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  } /* Рухаємось на 50%, бо контент дубльовано */
 }
 
 .animate-marquee-vertical {
@@ -263,9 +286,9 @@
 
 /* Hide scrollbar for horizontal scroll containers */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;  /* Chrome, Safari and Opera */
+  display: none; /* Chrome, Safari and Opera */
 }
diff --git a/frontend/components/auth/logoutButton.tsx b/frontend/components/auth/logoutButton.tsx
index 7ac868e5..c132f1af 100644
--- a/frontend/components/auth/logoutButton.tsx
+++ b/frontend/components/auth/logoutButton.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useLocale } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { LogOut } from 'lucide-react';
-
 import { logout } from '@/lib/logout';
 
 type LogoutButtonProps = {
@@ -11,6 +11,7 @@ type LogoutButtonProps = {
 
 export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
   const locale = useLocale();
+  const t = useTranslations('navigation');
 
   const handleLogout = async () => {
     await logout();
@@ -22,9 +23,9 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
       <button
         type="button"
         onClick={handleLogout}
-        aria-label="Log out"
-        title="Log out"
-        className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+        aria-label={t('logout')}
+        title={t('logout')}
+        className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground active:bg-secondary active:text-foreground"
       >
         <LogOut className="h-5 w-5" />
       </button>
@@ -35,10 +36,31 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
     <button
       type="button"
       onClick={handleLogout}
-      className="inline-flex items-center gap-2 rounded-md bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:opacity-90"
+      className="group relative inline-flex w-fit items-center gap-2 overflow-hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-all duration-500 hover:text-white active:text-white"
     >
-      <LogOut className="h-4 w-4" />
-      Log out
+      <span
+        className="absolute inset-0 opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100 group-active:opacity-100"
+        style={{
+          background:
+            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        aria-hidden="true"
+      />
+
+      <span
+        className="absolute inset-0 translate-x-[-100%] transition-transform duration-1000 ease-in-out group-hover:translate-x-[100%] group-active:translate-x-[100%]"
+        style={{
+          background:
+            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
+          transform: 'skewX(-20deg)',
+        }}
+        aria-hidden="true"
+      />
+
+      <span className="relative z-10 flex items-center gap-2">
+        <LogOut className="h-4 w-4 transition-transform duration-300 group-hover:scale-110 group-active:scale-110" />
+        {t('logout')}
+      </span>
     </button>
   );
 }
diff --git a/frontend/components/blog/BlogCategoryLinks.tsx b/frontend/components/blog/BlogCategoryLinks.tsx
index e3207821..4422b106 100644
--- a/frontend/components/blog/BlogCategoryLinks.tsx
+++ b/frontend/components/blog/BlogCategoryLinks.tsx
@@ -1,8 +1,11 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { Link, usePathname } from '@/i18n/routing';
+import { usePathname } from '@/i18n/routing';
+import { Home } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 type Category = {
   _id: string;
@@ -43,12 +46,6 @@ export function BlogCategoryLinks({
     };
     return categoryTranslations[key] || categoryName;
   };
-  const baseLink =
-    linkClassName ||
-    'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
-      'hover:bg-secondary hover:text-foreground ' +
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
-      'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
 
   const items = categories
     .map(category => ({
@@ -60,38 +57,26 @@ export function BlogCategoryLinks({
 
   return (
     <nav
-      className={cn('flex items-center gap-1', className)}
+      className={cn('flex items-center gap-2', className)}
       aria-label="Blog categories"
     >
-      <Link
-        href="/"
-        onClick={onNavigate}
-        aria-current={pathname === '/' ? 'page' : undefined}
-        className={cn(
-          baseLink,
-          pathname === '/'
-            ? 'bg-muted text-foreground'
-            : 'text-muted-foreground'
-        )}
-      >
+      <HeaderButton href="/" onClick={onNavigate} icon={Home}>
         {tNav('home')}
-      </Link>
+      </HeaderButton>
+
       {items.map(category => {
         const href = `/blog/category/${category.slug}`;
         const isActive = pathname === href;
         return (
-          <Link
+          <AnimatedNavLink
             key={category._id}
             href={href}
+            isActive={isActive}
             onClick={onNavigate}
-            aria-current={isActive ? 'page' : undefined}
-            className={cn(
-              baseLink,
-              isActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
-            )}
+            className={linkClassName}
           >
             {getCategoryLabel(category.displayTitle)}
-          </Link>
+          </AnimatedNavLink>
         );
       })}
     </nav>
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
index 90629de5..1ceac0be 100644
--- a/frontend/components/header/AppMobileMenu.tsx
+++ b/frontend/components/header/AppMobileMenu.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { Menu, X } from 'lucide-react';
+import { Menu, X, LogIn, ShoppingBag, Home } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
+import { Link, usePathname } from '@/i18n/routing';
 
 import { SITE_LINKS } from '@/lib/navigation';
 import { NAV_LINKS } from '@/components/shop/header/nav-links';
-import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
 import { LogoutButton } from '@/components/auth/logoutButton';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 export type AppMobileMenuVariant = 'platform' | 'shop' | 'blog';
 
@@ -26,10 +26,23 @@ export function AppMobileMenu({
   blogCategories = [],
 }: Props) {
   const t = useTranslations('navigation');
+  const pathname = usePathname();
   const [open, setOpen] = useState(false);
-
-  const close = () => setOpen(false);
-  const toggle = () => setOpen(prev => !prev);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const close = () => {
+    setIsAnimating(false);
+    setTimeout(() => setOpen(false), 200);
+  };
+
+  const toggle = () => {
+    if (open) {
+      close();
+    } else {
+      setOpen(true);
+      setTimeout(() => setIsAnimating(true), 10);
+    }
+  };
 
   useEffect(() => {
     if (!open) return;
@@ -48,12 +61,49 @@ export function AppMobileMenu({
     return [];
   }, [variant]);
 
+  useEffect(() => {
+    if (open) {
+      const scrollY = window.scrollY;
+
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = '100%';
+      document.body.style.overflow = 'hidden';
+
+      return () => {
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        document.body.style.overflow = '';
+
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [open]);
+
+  const linkClass = (isActive: boolean) =>
+    `rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+      isActive
+        ? 'text-[var(--accent-primary)]'
+        : 'text-muted-foreground active:text-[var(--accent-hover)]'
+    }`;
+
+  const slugify = (value: string) =>
+    value
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9\s-]/g, '')
+      .replace(/\s+/g, '-');
+
   return (
     <>
       <button
         type="button"
         onClick={toggle}
-        className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+        className="flex h-9 w-9 items-center justify-center rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary"
+        style={{
+          color: open ? 'var(--accent-primary)' : 'var(--muted-foreground)',
+        }}
         aria-label="Toggle menu"
         aria-expanded={open ? 'true' : 'false'}
         aria-controls={open ? 'app-mobile-nav' : undefined}
@@ -63,53 +113,97 @@ export function AppMobileMenu({
 
       {open && (
         <>
-          <button
-            type="button"
-            aria-label="Close menu"
-            className="fixed inset-0 z-40 md:hidden"
+          <div
+            className={`fixed inset-x-0 top-16 bottom-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity duration-200 ${
+              isAnimating ? 'opacity-100' : 'opacity-0'
+            }`}
             onClick={close}
+            aria-hidden="true"
           />
 
           <nav
             id="app-mobile-nav"
-            className="fixed left-0 right-0 top-16 z-50 border-t border-border bg-background px-4 py-4 md:hidden"
+            className={`fixed left-0 right-0 top-16 z-50 h-[calc(100dvh-4rem)] overflow-y-auto bg-background px-4 sm:px-6 lg:px-8 py-4 lg:hidden overscroll-contain transition-transform duration-300 ease-out ${
+              isAnimating ? 'translate-y-0' : '-translate-y-4'
+            }`}
+            style={{
+              opacity: isAnimating ? 1 : 0,
+              transition: 'transform 300ms ease-out, opacity 200ms ease-out',
+            }}
           >
             <div className="flex flex-col gap-1">
               {variant === 'shop' ? (
-                <Link
-                  href="/"
-                  onClick={close}
-                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                >
-                  {t('home')}
-                </Link>
+                <>
+                  <HeaderButton href="/" icon={Home} onClick={close}>
+                    {t('home')}
+                  </HeaderButton>
+                  {links.map(link => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      onClick={close}
+                      className={linkClass(pathname === link.href)}
+                    >
+                      {'labelKey' in link ? t(link.labelKey) : link.label}
+                    </Link>
+                  ))}
+                </>
               ) : null}
 
               {variant === 'blog' ? (
-                <BlogCategoryLinks
-                  categories={blogCategories}
-                  className="flex flex-col gap-1"
-                  linkClassName="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                  onNavigate={close}
-                />
-              ) : (
-                links.map(link => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
+                <>
+                  <HeaderButton href="/" icon={Home} onClick={close}>
+                    {t('home')}
+                  </HeaderButton>
+                  {blogCategories.map(category => {
+                    const slug = slugify(category.title || '');
+                    const href = `/blog/category/${slug}`;
+                    const isActive = pathname === href;
+                    return (
+                      <Link
+                        key={category._id}
+                        href={href}
+                        onClick={close}
+                        className={linkClass(isActive)}
+                      >
+                        {category.title}
+                      </Link>
+                    );
+                  })}
+                </>
+              ) : null}
+
+              {variant === 'platform' ? (
+                <>
+                  {links
+                    .filter(link => link.href !== '/shop')
+                    .map(link => (
+                      <Link
+                        key={link.href}
+                        href={link.href}
+                        onClick={close}
+                        className={linkClass(pathname === link.href)}
+                      >
+                        {'labelKey' in link ? t(link.labelKey) : link.label}
+                      </Link>
+                    ))}
+
+                  <HeaderButton
+                    href="/shop"
+                    icon={ShoppingBag}
+                    showArrow
                     onClick={close}
-                    className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                   >
-                    {'labelKey' in link ? t(link.labelKey) : link.label}
-                  </Link>
-                ))
-              )}
+                    {t('shop')}
+                  </HeaderButton>
+                </>
+              ) : null}
 
               {variant === 'shop' && showAdminLink ? (
                 <Link
                   href="/shop/admin/products/new"
                   onClick={close}
-                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                  className={linkClass(pathname === '/shop/admin/products/new')}
                 >
                   New product
                 </Link>
@@ -122,7 +216,7 @@ export function AppMobileMenu({
                   <Link
                     href="/dashboard"
                     onClick={close}
-                    className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                    className={linkClass(pathname === '/dashboard')}
                   >
                     {t('dashboard')}
                   </Link>
@@ -132,25 +226,21 @@ export function AppMobileMenu({
                       href="/shop/admin"
                       aria-label="Shop admin"
                       title="Shop admin"
-                      className="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                      onClick={close}
+                      className={linkClass(pathname === '/shop/admin')}
                     >
                       Admin
                     </Link>
                   ) : null}
 
-                  {/* LogoutButton стилізується сам; ми тільки позиціонуємо як пункт меню */}
-                  <div className="px-3 py-2" onClick={close}>
+                  <div onClick={close}>
                     <LogoutButton />
                   </div>
                 </>
               ) : (
-                <Link
-                  href="/login"
-                  onClick={close}
-                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                >
+                <HeaderButton href="/login" icon={LogIn} onClick={close}>
                   {t('login')}
-                </Link>
+                </HeaderButton>
               )}
             </div>
           </nav>
diff --git a/frontend/components/header/DesktopActions.tsx b/frontend/components/header/DesktopActions.tsx
new file mode 100644
index 00000000..d0e627f2
--- /dev/null
+++ b/frontend/components/header/DesktopActions.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { LogIn, Settings, User } from 'lucide-react';
+
+import { HeaderButton } from '@/components/shared/HeaderButton';
+import { GitHubStarButton } from '@/components/shared/GitHubStarButton';
+import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
+import { LogoutButton } from '@/components/auth/logoutButton';
+import { CartButton } from '@/components/shop/header/cart-button';
+import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
+
+type DesktopActionsProps = {
+  variant: 'platform' | 'shop' | 'blog';
+  userExists: boolean;
+  showAdminLink?: boolean;
+};
+
+export function DesktopActions({
+  variant,
+  userExists,
+  showAdminLink = false,
+}: DesktopActionsProps) {
+  const t = useTranslations('navigation');
+  const isShop = variant === 'shop';
+  const isBlog = variant === 'blog';
+
+  return (
+    <div className="hidden items-center gap-2 lg:flex">
+      {userExists && (
+        <HeaderButton
+          variant="icon"
+          href="/dashboard"
+          icon={User}
+          label="Dashboard"
+        />
+      )}
+
+      {showAdminLink && (
+        <HeaderButton
+          variant="icon"
+          href="/shop/admin"
+          icon={Settings}
+          label="Shop admin"
+        />
+      )}
+
+      {isBlog && <BlogHeaderSearch />}
+
+      <LanguageSwitcher />
+      <GitHubStarButton />
+
+      {isShop && <CartButton />}
+
+      {!userExists ? (
+        <HeaderButton href="/login" icon={LogIn}>
+          {t('login')}
+        </HeaderButton>
+      ) : (
+        <LogoutButton />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/header/DesktopNav.tsx b/frontend/components/header/DesktopNav.tsx
new file mode 100644
index 00000000..957fc6ef
--- /dev/null
+++ b/frontend/components/header/DesktopNav.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { ShoppingBag } from 'lucide-react';
+import { SITE_LINKS } from '@/lib/navigation';
+
+import { NavLink } from '@/components/header/NavLink';
+import { HeaderButton } from '@/components/shared/HeaderButton';
+import { NavLinks } from '@/components/shop/header/nav-links';
+import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
+
+type Category = {
+  _id: string;
+  title: string;
+};
+
+type DesktopNavProps = {
+  variant: 'platform' | 'shop' | 'blog';
+  blogCategories?: Category[];
+};
+
+export function DesktopNav({ variant, blogCategories = [] }: DesktopNavProps) {
+  const t = useTranslations('navigation');
+
+  if (variant === 'shop') {
+    return <NavLinks className="lg:flex" includeHomeLink />;
+  }
+
+  if (variant === 'blog') {
+    return <BlogCategoryLinks categories={blogCategories} />;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1">
+        {SITE_LINKS.filter(link => link.href !== '/shop').map(link => (
+          <NavLink key={link.href} href={link.href}>
+            {t(link.labelKey)}
+          </NavLink>
+        ))}
+      </div>
+
+      <HeaderButton href="/shop" icon={ShoppingBag} showArrow>
+        {t('shop')}
+      </HeaderButton>
+    </div>
+  );
+}
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 0bdd0df4..52dd41d5 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -19,6 +19,14 @@ function isQaPath(pathname: string): boolean {
   return segments[0] === 'q&a' || segments[1] === 'q&a';
 }
 
+function isHomePath(pathname: string): boolean {
+  const segments = pathname.split('/').filter(Boolean);
+  return (
+    segments.length === 0 ||
+    (segments.length === 1 && ['en', 'pl', 'uk'].includes(segments[0]))
+  );
+}
+
 type MainSwitcherProps = {
   children: ReactNode;
   userExists: boolean;
@@ -34,6 +42,7 @@ export function MainSwitcher({
 }: MainSwitcherProps) {
   const pathname = usePathname();
   const isQa = isQaPath(pathname);
+  const isHome = isHomePath(pathname);
 
   if (isShopPath(pathname)) return <>{children}</>;
 
@@ -52,7 +61,11 @@ export function MainSwitcher({
   }
 
   return (
-    <main className={isQa ? 'mx-auto min-h-[80vh]' : 'mx-auto px-6 min-h-[80vh]'}>
+    <main
+      className={
+        isQa || isHome ? 'mx-auto min-h-[80vh]' : 'mx-auto px-6 min-h-[80vh]'
+      }
+    >
       {children}
     </main>
   );
diff --git a/frontend/components/header/MobileActions.tsx b/frontend/components/header/MobileActions.tsx
new file mode 100644
index 00000000..76cf49c9
--- /dev/null
+++ b/frontend/components/header/MobileActions.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
+import { CartButton } from '@/components/shop/header/cart-button';
+import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
+import { AppMobileMenu } from '@/components/header/AppMobileMenu';
+
+type Category = {
+  _id: string;
+  title: string;
+};
+
+type MobileActionsProps = {
+  variant: 'platform' | 'shop' | 'blog';
+  userExists: boolean;
+  showAdminLink?: boolean;
+  blogCategories?: Category[];
+};
+
+export function MobileActions({
+  variant,
+  userExists,
+  showAdminLink = false,
+  blogCategories = [],
+}: MobileActionsProps) {
+  const isShop = variant === 'shop';
+  const isBlog = variant === 'blog';
+
+  return (
+    <div className="flex items-center gap-1 lg:hidden">
+      {isBlog && <BlogHeaderSearch />}
+      <LanguageSwitcher />
+      {isShop && <CartButton />}
+      <AppMobileMenu
+        variant={variant}
+        userExists={userExists}
+        showAdminLink={showAdminLink}
+        blogCategories={blogCategories}
+      />
+    </div>
+  );
+}
diff --git a/frontend/components/header/NavLink.tsx b/frontend/components/header/NavLink.tsx
new file mode 100644
index 00000000..9d66f983
--- /dev/null
+++ b/frontend/components/header/NavLink.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
+
+interface NavLinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function NavLink({ href, children, className = '' }: NavLinkProps) {
+  const pathname = usePathname();
+
+  const isActive = (() => {
+    const cleanPathname = pathname.replace(/^\/(uk|en|pl)(?=\/|$)/, '') || '/';
+
+    if (href === '/' && cleanPathname === '/') return true;
+
+    if (href !== '/') {
+      return cleanPathname === href || cleanPathname.startsWith(`${href}/`);
+    }
+
+    return false;
+  })();
+
+  return (
+    <AnimatedNavLink href={href} isActive={isActive} className={className}>
+      {children}
+    </AnimatedNavLink>
+  );
+}
diff --git a/frontend/components/header/UnifiedHeader.tsx b/frontend/components/header/UnifiedHeader.tsx
index b952b34a..4b5d85aa 100644
--- a/frontend/components/header/UnifiedHeader.tsx
+++ b/frontend/components/header/UnifiedHeader.tsx
@@ -1,17 +1,9 @@
 'use client';
-import { LogIn, Settings, User } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
-import { SITE_LINKS } from '@/lib/navigation';
 
-import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
-import { LogoutButton } from '@/components/auth/logoutButton';
-
-import { CartButton } from '@/components/shop/header/cart-button';
-import { NavLinks } from '@/components/shop/header/nav-links';
-import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
-import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
-import { AppMobileMenu } from '@/components/header/AppMobileMenu';
+import { Logo } from '@/components/shared/Logo';
+import { DesktopNav } from '@/components/header/DesktopNav';
+import { DesktopActions } from '@/components/header/DesktopActions';
+import { MobileActions } from '@/components/header/MobileActions';
 
 export type UnifiedHeaderVariant = 'platform' | 'shop' | 'blog';
 
@@ -19,7 +11,6 @@ export type UnifiedHeaderProps = {
   variant: UnifiedHeaderVariant;
   userExists: boolean;
   showAdminLink?: boolean;
-  enableSearch?: boolean;
   blogCategories?: Array<{ _id: string; title: string }>;
 };
 
@@ -29,105 +20,34 @@ export function UnifiedHeader({
   showAdminLink = false,
   blogCategories = [],
 }: UnifiedHeaderProps) {
-  const t = useTranslations('navigation');
-  const isShop = variant === 'shop';
-  const isBlog = variant === 'blog';
-  const brandHref = isShop ? '/shop' : isBlog ? '/blog' : '/';
-  const brandBadge = isShop ? t('shop') : isBlog ? t('blog') : '';
+  const brandHref =
+    variant === 'shop' ? '/shop' : variant === 'blog' ? '/blog' : '/';
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-        <div className="flex min-w-0 items-center gap-3">
-          <Link href={brandHref} className="flex min-w-0 items-center gap-2">
-            <span className="truncate text-xl font-bold tracking-tight">
-              DevLovers
-            </span>
-            <span
-              className={[
-                'hidden rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground sm:inline',
-                brandBadge ? '' : 'invisible',
-              ].join(' ')}
-              aria-hidden={!brandBadge}
-            >
-              {brandBadge}
-            </span>
-          </Link>
-        </div>
+      <div className="container-main flex h-16 items-center justify-between">
+        <Logo href={brandHref} />
 
         <nav
-          className="hidden items-center justify-center md:flex"
+          className="hidden items-center justify-center lg:flex"
           aria-label="Primary"
         >
-          {isShop ? (
-            <NavLinks className="md:flex" includeHomeLink />
-          ) : isBlog ? (
-            <BlogCategoryLinks categories={blogCategories} />
-          ) : (
-            <div className="flex items-center gap-1">
-              {SITE_LINKS.map(link => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                >
-                  {t(link.labelKey)}
-                </Link>
-              ))}
-            </div>
-          )}
+          <DesktopNav variant={variant} blogCategories={blogCategories} />
         </nav>
 
         <div className="flex items-center gap-1">
-          <div className="hidden items-center gap-2 md:flex">
-            {userExists && (
-              <Link
-                href="/dashboard"
-                aria-label="Dashboard"
-                title="Dashboard"
-                className="inline-flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-              >
-                <User className="h-5 w-5" />
-              </Link>
-            )}
-            {showAdminLink ? (
-              <Link
-                href="/shop/admin"
-                aria-label="Shop admin"
-                title="Shop admin"
-                className="inline-flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-              >
-                <Settings className="h-5 w-5" aria-hidden="true" />
-              </Link>
-            ) : null}
-
-            {isBlog && <BlogHeaderSearch />}
-            <LanguageSwitcher />
-            {isShop && <CartButton />}
-
-            {!userExists ? (
-              <Link
-                href="/login"
-                className="inline-flex items-center gap-2 rounded-md bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:opacity-90"
-              >
-                <LogIn className="h-4 w-4" />
-                {t('login')}
-              </Link>
-            ) : (
-              <LogoutButton />
-            )}
-          </div>
-          <div className="flex items-center gap-1 md:hidden">
-            {isBlog && <BlogHeaderSearch />}
-            <LanguageSwitcher />
-            {isShop && <CartButton />}
-            <AppMobileMenu
-              variant={isShop ? 'shop' : isBlog ? 'blog' : 'platform'}
-              userExists={userExists}
-              showAdminLink={showAdminLink}
-              blogCategories={blogCategories}
-            />
-          </div>
+          <DesktopActions
+            variant={variant}
+            userExists={userExists}
+            showAdminLink={showAdminLink}
+          />
+
+          <MobileActions
+            variant={variant}
+            userExists={userExists}
+            showAdminLink={showAdminLink}
+            blogCategories={blogCategories}
+          />
         </div>
       </div>
     </header>
diff --git a/frontend/components/shared/AnimatedNavLink.tsx b/frontend/components/shared/AnimatedNavLink.tsx
new file mode 100644
index 00000000..582ea25a
--- /dev/null
+++ b/frontend/components/shared/AnimatedNavLink.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+import type { ComponentProps } from 'react';
+
+interface AnimatedNavLinkProps {
+  href: string;
+  isActive: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  ariaCurrent?: ComponentProps<typeof Link>['aria-current'];
+}
+
+export function AnimatedNavLink({
+  href,
+  isActive,
+  children,
+  onClick,
+  className = '',
+  ariaCurrent,
+}: AnimatedNavLinkProps) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      aria-current={ariaCurrent ?? (isActive ? 'page' : undefined)}
+      className={`
+        group relative px-3 py-2 text-sm font-medium
+        transition-all duration-300 ease-out
+        ${
+          isActive
+            ? '[color:var(--accent-primary)]'
+            : 'text-muted-foreground hover:[color:var(--accent-hover)]'
+        }
+        ${className}
+      `}
+    >
+      {children}
+
+      <span
+        className={`
+          absolute inset-x-0 -bottom-3 h-12
+          transition-opacity duration-300 ease-out
+          ${isActive ? 'opacity-50' : 'opacity-0 group-hover:opacity-40'}
+        `}
+        style={{
+          background: `radial-gradient(ellipse 80px 40px at center bottom, ${
+            isActive ? 'var(--accent-primary)' : 'var(--accent-hover)'
+          } 0%, transparent 70%)`,
+          filter: 'blur(10px)',
+        }}
+        aria-hidden="true"
+      />
+
+      {isActive && (
+        <span
+          className="
+            absolute bottom-[-12px] left-1/2 -translate-x-1/2
+            opacity-100 scale-100
+            transition-all duration-300 ease-out
+          "
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: '8px solid transparent',
+            borderRight: '8px solid transparent',
+            borderBottom: '8px solid var(--accent-primary)',
+            filter: 'drop-shadow(0 0 6px var(--accent-primary))',
+          }}
+          aria-hidden="true"
+        />
+      )}
+
+      {isActive ? (
+        <span
+          className="
+            absolute bottom-[-15px] left-1/2 -translate-x-1/2
+            h-[2px] w-full opacity-100
+            transition-all duration-300 ease-out
+          "
+          style={{
+            background: `linear-gradient(90deg, 
+              transparent 0%, 
+              var(--accent-primary) 50%, 
+              transparent 100%)`,
+            boxShadow: `0 0 12px 2px var(--accent-primary), 0 0 6px 1px var(--accent-primary)`,
+          }}
+          aria-hidden="true"
+        />
+      ) : (
+        <span
+          className="
+            absolute bottom-[-15px] left-1/2 -translate-x-1/2
+            h-[3px] w-0
+            opacity-0 group-hover:opacity-100 group-hover:w-full
+            transition-all duration-300 ease-out
+          "
+          style={{
+            background: `linear-gradient(90deg, 
+              transparent 0%,
+              var(--accent-hover) 20%,
+              transparent 40%,
+              var(--accent-hover) 60%,
+              transparent 80%,
+              var(--accent-hover) 100%)`,
+            backgroundSize: '200% 100%',
+            animation: 'shimmer 2s ease-in-out infinite',
+            boxShadow: `0 0 10px 2px var(--accent-hover)`,
+          }}
+          aria-hidden="true"
+        />
+      )}
+    </Link>
+  );
+}
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index f052df3b..5c802d6e 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -41,7 +41,7 @@ export default function Footer() {
   "
       />
 
-      <div className="relative mx-auto max-w-5xl px-6 py-6">
+      <div className="container-main relative py-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-3">
             <p className="text-sm text-slate-700 dark:text-slate-200">
@@ -101,8 +101,8 @@ export default function Footer() {
                       dark:border-neutral-800/60
                       dark:bg-neutral-950/30
                       dark:text-slate-300
-                      [&:hover]:!text-[var(--accent-primary)]
-                      [&:hover]:!border-[var(--accent-primary)]
+                      [&:hover]:!text-[var(--accent-hover)]
+                      [&:hover]:!border-[var(--accent-hover)]
                     "
                   >
                     <Icon className="h-5 w-5" />
diff --git a/frontend/components/shared/GitHubStarButton.tsx b/frontend/components/shared/GitHubStarButton.tsx
new file mode 100644
index 00000000..04bd9393
--- /dev/null
+++ b/frontend/components/shared/GitHubStarButton.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { Star } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+
+interface GitHubStarButtonProps {
+  className?: string;
+}
+
+export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
+  const [displayCount, setDisplayCount] = useState(0);
+  const [finalCount, setFinalCount] = useState<number | null>(null);
+  const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
+  const hasAnimated = useRef(false);
+
+  useEffect(() => {
+    const fetchStars = async () => {
+      try {
+        const response = await fetch('/api/stats');
+        if (response.ok) {
+          const data = await response.json();
+          const starsStr =
+            typeof data?.githubStars === 'string'
+              ? data.githubStars
+              : String(data?.githubStars ?? '0');
+          let starsNum = 0;
+          const normalized = starsStr.replace(/,/g, '').toLowerCase();
+          if (normalized.includes('k+')) {
+            starsNum = Math.floor(
+              parseFloat(normalized.replace('k+', '')) * 1000
+            );
+          } else {
+            starsNum = parseInt(normalized, 10);
+          }
+          setFinalCount(starsNum);
+        }
+      } catch (error) {
+        console.error('Failed to fetch GitHub stars:', error);
+        setFinalCount(0);
+      }
+    };
+
+    fetchStars();
+  }, []);
+
+  useEffect(() => {
+    if (finalCount === null || hasAnimated.current) return;
+
+    hasAnimated.current = true;
+    const duration = 2000;
+    const steps = 60;
+    const increment = finalCount / steps;
+    let current = 0;
+
+    const timer = setInterval(() => {
+      current += increment;
+      if (current >= finalCount) {
+        setDisplayCount(finalCount);
+        clearInterval(timer);
+      } else {
+        setDisplayCount(Math.floor(current));
+      }
+    }, duration / steps);
+
+    return () => clearInterval(timer);
+  }, [finalCount]);
+
+  const formatStarCount = (count: number): string => {
+    return count.toLocaleString();
+  };
+
+  return (
+    <a
+      href={githubUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Star on GitHub - ${displayCount} stars`}
+      className={`
+        hidden lg:inline-flex
+        group relative
+        items-center
+        px-3 py-2
+        text-sm font-medium
+        rounded-lg
+        overflow-hidden
+        bg-foreground text-background
+        dark:bg-foreground dark:text-background
+        border border-border
+        hover:opacity-90
+        transition-all duration-200
+        shadow-sm
+        ${className}
+      `}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        className="h-5 w-5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+      </svg>
+
+      <span className="flex items-center gap-0.5 ml-2">
+        <span className="font-semibold tabular-nums min-w-[2ch] text-right">
+          {formatStarCount(displayCount)}
+        </span>
+        <Star
+          className="
+            h-4 w-4 flex-shrink-0 
+            transition-all duration-300 
+            group-hover:rotate-12
+            group-hover:text-yellow-400
+            group-hover:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]
+          "
+          fill="currentColor"
+          aria-hidden="true"
+        />
+      </span>
+    </a>
+  );
+}
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
new file mode 100644
index 00000000..8bf54ce5
--- /dev/null
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+import type { LucideIcon } from 'lucide-react';
+
+interface HeaderButtonProps {
+  href?: string;
+  onClick?: () => void;
+
+  icon?: LucideIcon;
+  children?: React.ReactNode;
+
+  variant?: 'icon' | 'default';
+  showArrow?: boolean;
+
+  label?: string;
+
+  className?: string;
+}
+
+export function HeaderButton({
+  href,
+  onClick,
+  icon: Icon,
+  children,
+  variant = 'default',
+  showArrow = false,
+  label,
+  className = '',
+}: HeaderButtonProps) {
+  const isIconOnly = variant === 'icon';
+  const resolvedLabel =
+    label ?? (typeof children === 'string' ? children : undefined);
+
+  if (process.env.NODE_ENV !== 'production' && isIconOnly && !resolvedLabel) {
+    console.warn('HeaderButton: icon-only buttons require a label');
+  }
+
+  const ArrowIcon = showArrow ? (
+    <svg
+      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1 group-active:translate-x-1"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5l7 7-7 7"
+      />
+    </svg>
+  ) : null;
+
+  const content = (
+    <>
+      <span
+        className="
+          absolute inset-0
+          opacity-0 group-hover:opacity-100 group-active:opacity-100
+          transition-opacity duration-500 ease-out
+        "
+        style={{
+          background:
+            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        aria-hidden="true"
+      />
+
+      <span
+        className="
+          absolute inset-0
+          [--tw-translate-x:-100%]
+          group-hover:[--tw-translate-x:100%]
+          group-active:[--tw-translate-x:100%]
+          transition-transform duration-1000 ease-in-out
+          [transform:translateX(var(--tw-translate-x))_skewX(-20deg)]
+        "
+        style={{
+          background: `linear-gradient(90deg, transparent 0%, rgba(255,255,255,${
+            isIconOnly ? '0.3' : '0.4'
+          }) 50%, transparent 100%)`,
+        }}
+        aria-hidden="true"
+      />
+
+      <span
+        className={`relative z-10 flex items-center ${
+          isIconOnly ? 'justify-center' : 'gap-2'
+        }`}
+      >
+        {Icon && (
+          <Icon
+            className={`transition-transform duration-300 group-hover:scale-110 group-active:scale-110 ${
+              isIconOnly ? 'h-5 w-5' : 'h-4 w-4'
+            }`}
+          />
+        )}
+        {children}
+        {ArrowIcon}
+      </span>
+    </>
+  );
+
+  const baseClasses = `
+    group relative
+    inline-flex items-center
+    text-sm font-medium
+    rounded-lg
+    overflow-hidden
+    transition-all duration-500 ease-out
+    ${
+      isIconOnly
+        ? 'h-10 w-10 justify-center text-muted-foreground'
+        : 'gap-2 px-4 py-2 bg-secondary text-secondary-foreground w-fit'
+    }
+    hover:text-white
+    active:text-white
+    ${className}
+  `;
+
+  if (!href) {
+    return (
+      <button
+        onClick={onClick}
+        className={baseClasses}
+        type="button"
+        aria-label={resolvedLabel}
+        title={resolvedLabel}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={baseClasses}
+      aria-label={resolvedLabel}
+      title={resolvedLabel}
+    >
+      {content}
+    </Link>
+  );
+}
diff --git a/frontend/components/shared/HeroSection.tsx b/frontend/components/shared/HeroSection.tsx
index 2b8cb44f..3601f4af 100644
--- a/frontend/components/shared/HeroSection.tsx
+++ b/frontend/components/shared/HeroSection.tsx
@@ -58,8 +58,6 @@ export default function HeroSection() {
     <section
       className="
         relative
-        mx-[-1.5rem]
-        w-[calc(100%+3rem)]
         overflow-hidden
         min-h-[100vh]
         flex
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
index 94da2407..181aa3fd 100644
--- a/frontend/components/shared/LanguageSwitcher.tsx
+++ b/frontend/components/shared/LanguageSwitcher.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
-import { useParams, usePathname,useSearchParams } from 'next/navigation';
+import { useParams, usePathname, useSearchParams } from 'next/navigation';
 import { locales, type Locale } from '@/i18n/config';
 import { Link } from '@/i18n/routing';
+import { Globe } from 'lucide-react';
 
 const localeLabels: Record<Locale, string> = {
   uk: 'UA',
@@ -24,7 +25,6 @@ export default function LanguageSwitcher() {
   const allowRestoreKey = 'quiz-allow-restore';
   const isQuizPage = pathname.startsWith('/quiz/');
 
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -43,11 +43,15 @@ export default function LanguageSwitcher() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 text-gray-700 dark:text-gray-300 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition"
+        className="group flex items-center gap-1.5 text-muted-foreground font-medium transition-colors active:text-[var(--accent-hover)]"
+        aria-label="Change language"
       >
-        {localeLabels[currentLocale]}
+        <Globe className="h-4 w-4 transition-colors group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)]" />
+        <span className="transition-colors group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)]">
+          {localeLabels[currentLocale]}
+        </span>
         <svg
-          className={`h-4 w-4 transition-transform ${
+          className={`h-4 w-4 transition-all group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)] ${
             isOpen ? 'rotate-180' : ''
           }`}
           fill="none"
@@ -64,7 +68,7 @@ export default function LanguageSwitcher() {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 mt-2 py-2 w-20 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-md shadow-lg z-50">
+        <div className="absolute right-0 mt-2 py-2 w-20 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-md shadow-lg z-[60]">
           {locales.map(locale => (
             <Link
               key={locale}
@@ -76,10 +80,10 @@ export default function LanguageSwitcher() {
                 }
                 setIsOpen(false);
               }}
-              className={`block px-4 py-2 text-sm transition ${
+              className={`block px-4 py-2 text-sm transition active:text-[var(--accent-hover)] ${
                 currentLocale === locale
-                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-neutral-800'
+                  ? 'text-muted-foreground font-medium [background-color:color-mix(in_srgb,var(--accent-primary)_10%,transparent)]'
+                  : 'text-muted-foreground hover:bg-secondary active:bg-secondary'
               }`}
             >
               {localeLabels[locale]}
diff --git a/frontend/components/shared/Logo.tsx b/frontend/components/shared/Logo.tsx
new file mode 100644
index 00000000..76d1bcb2
--- /dev/null
+++ b/frontend/components/shared/Logo.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { Link } from '@/i18n/routing';
+
+type LogoProps = {
+  href: string;
+};
+
+export function Logo({ href }: LogoProps) {
+  return (
+    <Link
+      href={href}
+      className="group flex min-w-0 items-center gap-2 active:scale-95 transition-transform"
+    >
+      <span
+        className="
+          truncate text-xl font-bold tracking-tight
+          bg-[linear-gradient(90deg,var(--logo-foreground,var(--foreground)),var(--accent-hover))]
+          bg-[length:200%_100%]
+          bg-[position:0%_50%]
+          bg-clip-text text-transparent
+          transition-[background-position] duration-500 ease-out
+          group-hover:bg-[position:100%_50%]
+          group-active:bg-[position:100%_50%]
+        "
+      >
+        DevLovers
+      </span>
+    </Link>
+  );
+}
diff --git a/frontend/components/shop/header/nav-links.tsx b/frontend/components/shop/header/nav-links.tsx
index 90305682..2a499f2a 100644
--- a/frontend/components/shop/header/nav-links.tsx
+++ b/frontend/components/shop/header/nav-links.tsx
@@ -2,10 +2,13 @@
 
 import { useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
+import { Home } from 'lucide-react';
 
-import { Link, usePathname } from '@/i18n/routing';
+import { usePathname } from '@/i18n/routing';
 import { CATEGORIES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
+import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 const NAV_LINKS = [
   { href: '/shop/products', label: 'All Products' },
@@ -50,14 +53,7 @@ export function NavLinks({
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get('category');
-
-  const baseLink =
-    'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
-    'hover:bg-muted/50 hover:text-foreground ' +
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
-
-  const isHomeActive = pathname === '/';
+  const isHomeActive = pathname.startsWith('/shop');
 
   const computed = useMemo(() => {
     return NAV_LINKS.map(link => {
@@ -75,42 +71,31 @@ export function NavLinks({
   return (
     <nav
       aria-label="Shop navigation"
-      className={cn('flex items-center gap-1', className)}
+      className={cn('flex items-center gap-2', className)}
     >
-      <ul className="flex items-center gap-1">
+      <ul className="flex items-center gap-2">
         {includeHomeLink ? (
           <li>
-            <Link
+            <HeaderButton
               href="/"
               onClick={onNavigate}
-              aria-current={isHomeActive ? 'page' : undefined}
-              className={cn(
-                baseLink,
-                isHomeActive
-                  ? 'bg-muted text-foreground'
-                  : 'text-muted-foreground'
-              )}
+              icon={Home}
+              className={cn(isHomeActive && '[color:var(--accent-primary)]')}
             >
               Home
-            </Link>
+            </HeaderButton>
           </li>
         ) : null}
 
         {computed.map(link => (
           <li key={link.href}>
-            <Link
+            <AnimatedNavLink
               href={link.href}
+              isActive={link.isActive}
               onClick={onNavigate}
-              aria-current={link.isActive ? 'page' : undefined}
-              className={cn(
-                baseLink,
-                link.isActive
-                  ? 'bg-muted text-foreground'
-                  : 'text-muted-foreground'
-              )}
             >
               {link.label}
-            </Link>
+            </AnimatedNavLink>
           </li>
         ))}
       </ul>
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 4b028509..874d69fa 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -56,8 +56,9 @@ export function ThemeToggle() {
 
       <style jsx>{`
         .theme-toggle-btn:hover :global(svg),
-        .theme-toggle-btn:focus-visible :global(svg) {
-          color: var(--accent-primary);
+        .theme-toggle-btn:focus-visible :global(svg),
+        .theme-toggle-btn:active :global(svg) {
+          color: var(--accent-hover);
         }
       `}</style>
     </div>
diff --git a/frontend/lib/navigation.ts b/frontend/lib/navigation.ts
index 194d458b..fa45a131 100644
--- a/frontend/lib/navigation.ts
+++ b/frontend/lib/navigation.ts
@@ -2,8 +2,8 @@ export const SITE_LINKS = [
   { href: '/q&a', labelKey: 'qa' },
   { href: '/quizzes', labelKey: 'quizzes' },
   { href: '/leaderboard', labelKey: 'leaderboard' },
-  { href: '/blog', labelKey: 'blog' },
   { href: '/about', labelKey: 'about' },
+  { href: '/blog', labelKey: 'blog' },
   { href: '/contacts', labelKey: 'contacts' },
   { href: '/shop', labelKey: 'shop' },
 ] as const;