diff --git a/messages/en.json b/messages/en.json
index da6739c..7d80d91 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -5,6 +5,11 @@
     "about": "About",
     "contact": "Contact",
     "showcase": "Showcase",
-    "blog": "Blog"
+    "blog": "Blog",
+    "usecases": "Use cases",
+    "offers": "Offers",
+    "careers": "Careers",
+    "jobs": "Jobs",
+    "news": "News"
   }
 }
diff --git a/messages/ru.json b/messages/ru.json
index da6739c..eae296d 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -1,10 +1,15 @@
 {
   "Brand": "FlakeForge",
   "Layout": {
-    "home": "Home",
-    "about": "About",
-    "contact": "Contact",
-    "showcase": "Showcase",
-    "blog": "Blog"
+    "home": "Главная",
+    "about": "О нас",
+    "contact": "Контакты",
+    "showcase": "Витрина",
+    "blog": "Блог",
+    "usecases": "Примеры использования",
+    "offers": "Предложения",
+    "careers": "Карьера",
+    "jobs": "Вакансии",
+    "news": "Новости"
   }
 }
diff --git a/messages/uz.json b/messages/uz.json
index da6739c..5d16e69 100644
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -1,10 +1,15 @@
 {
   "Brand": "FlakeForge",
   "Layout": {
-    "home": "Home",
-    "about": "About",
-    "contact": "Contact",
-    "showcase": "Showcase",
-    "blog": "Blog"
+    "home": "Bosh sahifa",
+    "about": "Haqida",
+    "contact": "Aloqa",
+    "showcase": "Ko‘rgazma",
+    "blog": "Blog",
+    "usecases": "Qo‘llanilish holatlari",
+    "offers": "Takliflar",
+    "careers": "Karyeralar",
+    "jobs": "Ish o‘rinlari",
+    "news": "Yangiliklar"
   }
 }
diff --git a/package.json b/package.json
index 622937c..f07c4b2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gsap": "^3.13.0",
+    "lucide-react": "^0.511.0",
     "next": "15.3.2",
     "next-intl": "^4.1.0",
     "next-themes": "^0.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 217bd77..d67a11c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       gsap:
         specifier: ^3.13.0
         version: 3.13.0
+      lucide-react:
+        specifier: ^0.511.0
+        version: 0.511.0(react@19.1.0)
       next:
         specifier: 15.3.2
         version: 15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2279,6 +2282,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@0.511.0:
+    resolution: {integrity: sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -5554,6 +5562,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.511.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
diff --git a/src/shared/config/index.ts b/src/shared/config/index.ts
new file mode 100644
index 0000000..49800c7
--- /dev/null
+++ b/src/shared/config/index.ts
@@ -0,0 +1 @@
+export * from './routes'
diff --git a/src/shared/config/routes.ts b/src/shared/config/routes.ts
new file mode 100644
index 0000000..15f3029
--- /dev/null
+++ b/src/shared/config/routes.ts
@@ -0,0 +1,8 @@
+export const ROUTES = {
+  HOME: '/',
+  ABOUT: '/about',
+  NEWS: '/news',
+  SHOWCASE: '/showcase',
+  BLOG: '/blog',
+  CONTACT: '/contact',
+}
diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index d61b433..a0d1129 100644
--- a/src/shared/styles/globals.css
+++ b/src/shared/styles/globals.css
@@ -3,26 +3,28 @@
 @theme {
   /* Light mode colors */
   --color-primary: #FF4C24;
+  --color-foreground: #000000;
   --color-secondary: #34a853;
   --color-background: #ffffff;
   --color-text: #000000;
   --color-destructive: #ef4444;
   --color-accent: #f1f5f9;
-  --color-input: #d1d5db;
+  --color-input: #c4c4c4;
   --color-ring: #3b82f6;
 
   /* Dark mode colors */
   --color-primary-dark: #FF4C24;
+  --color-foreground-dark: #e5e5e5;
   --color-secondary-dark: #4ade80;
-  --color-background-dark: #030303;
-  --color-text-dark: #ffffff;
+  --color-background-dark: #0a0a0a;
+  --color-text-dark: #e5e5e5;
   --color-destructive-dark: #dc2626;
   --color-accent-dark: #1e293b;
   --color-input-dark: #4b5563;
   --color-ring-dark: #60a5fa;
 
-  /* fonts */
-  --font-sans: 'Markdisc', sans-serif;
+  /* Fonts */
+  --font-sans: 'Orkney', sans-serif;
 }
 
 @layer base {
@@ -31,7 +33,7 @@
     --primary: var(--color-primary);
     --secondary: var(--color-secondary);
     --background: var(--color-background);
-    --foreground: var(--color-text);
+    --foreground: var(--color-foreground);
     --destructive: var(--color-destructive);
     --accent: var(--color-accent);
     --input: var(--color-input);
@@ -46,7 +48,7 @@
     --primary: var(--color-primary-dark);
     --secondary: var(--color-secondary-dark);
     --background: var(--color-background-dark);
-    --foreground: var(--color-text-dark);
+    --foreground: var(--color-foreground-dark);
     --destructive: var(--color-destructive-dark);
     --accent: var(--color-accent-dark);
     --input: var(--color-input-dark);
@@ -60,12 +62,11 @@
   body {
     background-color: var(--background);
     color: var(--foreground);
-    @apply antialiased font-sans;
+    @apply antialiased font-sans border-input;
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 }
 
-/* Add this at the top of your CSS file */
 @font-face {
   font-family: 'Orkney';
   src: url('public/fonts/Orkney-Light.woff2') format('woff2');
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
new file mode 100644
index 0000000..1640559
--- /dev/null
+++ b/src/shared/types/index.ts
@@ -0,0 +1 @@
+export type { LocalesType } from './locale'
diff --git a/src/shared/types/locale.ts b/src/shared/types/locale.ts
new file mode 100644
index 0000000..cdeb272
--- /dev/null
+++ b/src/shared/types/locale.ts
@@ -0,0 +1 @@
+export type LocalesType = 'en' | 'ru' | 'uz'
diff --git a/src/shared/ui/button/Button.tsx b/src/shared/ui/button/Button.tsx
index 7103fff..59379da 100644
--- a/src/shared/ui/button/Button.tsx
+++ b/src/shared/ui/button/Button.tsx
@@ -1,37 +1,60 @@
 'use client'
 
-import { type ButtonHTMLAttributes, type ElementType, forwardRef, type ReactNode } from 'react'
+import {
+  type ButtonHTMLAttributes,
+  type ElementType,
+  forwardRef,
+  type ReactNode,
+  useEffect,
+  useRef,
+} from 'react'
 
 import { cva, type VariantProps } from 'class-variance-authority'
+import { gsap } from 'gsap'
+import type React from 'react'
 
+import { LoadingSpinner } from '@shared/ui/loading-spinner'
 import { cn } from '@lib/utils'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95',
+  'relative inline-flex items-center justify-center font-medium transition-colors duration-200 overflow-hidden disabled:pointer-events-none disabled:opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-primary bg-background text-primary shadow-sm hover:bg-accent hover:text-primary',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: [
+          'bg-gradient-to-r from-primary to-primary/90 text-white shadow-lg shadow-primary/20',
+          'before:absolute before:inset-0 before:bg-white/10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300',
+        ],
+        secondary: [
+          'bg-accent/50 text-foreground border border-accent shadow-sm',
+          'hover:bg-accent/70 hover:shadow-md transition-all duration-200',
+        ],
+        outline: [
+          'border-2 border-primary/20 text-primary bg-transparent',
+          'hover:bg-primary/5 hover:border-primary/40 transition-all duration-200',
+        ],
+        ghost: ['text-foreground bg-transparent', 'hover:bg-accent/30 transition-all duration-200'],
+        destructive: [
+          'bg-gradient-to-r from-destructive to-destructive/90 text-white shadow-lg shadow-destructive/20',
+          'before:absolute before:inset-0 before:bg-white/10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300',
+        ],
+        link: [
+          'text-primary bg-transparent underline-offset-4 p-0 h-auto',
+          'hover:underline transition-all duration-200',
+        ],
       },
-
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3 text-xs',
-        lg: 'h-11 rounded-md px-8 text-base',
-        xl: 'h-14 rounded-lg px-12 text-lg font-semibold',
-        icon: 'h-10 w-10',
-        'icon-sm': 'h-8 w-8',
-        'icon-lg': 'h-12 w-12',
+        sm: 'h-8 px-4 text-xs rounded-xl gap-2 font-medium',
+        default: 'h-10 px-5 text-sm rounded-xl gap-2.5 font-medium',
+        lg: 'h-12 px-7 text-base rounded-2xl gap-3 font-semibold',
+        xl: 'h-14 px-9 text-lg rounded-2xl gap-3.5 font-bold tracking-wide',
+        icon: 'h-10 w-10 rounded-xl',
+        'icon-sm': 'h-8 w-8 rounded-xl',
+        'icon-lg': 'h-12 w-12 rounded-2xl',
       },
       loading: {
-        true: 'cursor-not-allowed opacity-70',
-        false: '',
+        true: 'cursor-not-allowed',
+        false: 'cursor-pointer',
       },
     },
     defaultVariants: {
@@ -49,6 +72,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
     loading?: boolean
     leftIcon?: ReactNode
     rightIcon?: ReactNode
+    hoverText?: string
   }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -64,47 +88,197 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       leftIcon,
       rightIcon,
       disabled,
+      hoverText,
       ...props
     },
     ref
   ) => {
+    const internalRef = useRef<HTMLButtonElement>(null)
+    const childrenRef = useRef<HTMLSpanElement>(null)
+    const hoverTextRef = useRef<HTMLSpanElement>(null)
+    const tl = useRef<gsap.core.Timeline | null>(null)
+
+    const buttonRef = (ref as React.RefObject<HTMLButtonElement>) || internalRef
     const isDisabled = disabled || loading
 
+    useEffect(() => {
+      const button = buttonRef.current
+      const childrenEl = childrenRef.current
+      const hoverTextEl = hoverTextRef.current
+
+      if (!button || !hoverText || !childrenEl || !hoverTextEl) return
+
+      if (tl.current) {
+        tl.current.kill()
+      }
+      tl.current = gsap.timeline({ paused: true })
+
+      const handleMouseEnter = (e: MouseEvent): void => {
+        if (isDisabled) return
+
+        const rect = button.getBoundingClientRect()
+        const mouseX = e.clientX - rect.left
+        const mouseY = e.clientY - rect.top
+
+        const centerX = rect.width / 2
+        const centerY = rect.height / 2
+
+        let fromDirection = { x: 0, y: 0 }
+        let toDirection = { x: 0, y: 0 }
+
+        if (Math.abs(mouseX - centerX) > Math.abs(mouseY - centerY)) {
+          if (mouseX < centerX) {
+            fromDirection = { x: -100, y: 0 }
+            toDirection = { x: 100, y: 0 }
+          } else {
+            fromDirection = { x: 100, y: 0 }
+            toDirection = { x: -100, y: 0 }
+          }
+        } else {
+          if (mouseY < centerY) {
+            fromDirection = { x: 0, y: -100 }
+            toDirection = { x: 0, y: 100 }
+          } else {
+            fromDirection = { x: 0, y: 100 }
+            toDirection = { x: 0, y: -100 }
+          }
+        }
+
+        if (tl.current) {
+          tl.current.clear()
+        }
+
+        gsap.to(button, {
+          x: (mouseX - centerX) * 0.1,
+          y: (mouseY - centerY) * 0.1,
+          scale: 1.05,
+          duration: 0.3,
+          ease: 'power2.out',
+        })
+
+        if (hoverTextEl && childrenEl) {
+          gsap.set(hoverTextEl, {
+            x: fromDirection.x + '%',
+            y: fromDirection.y + '%',
+            opacity: 0,
+          })
+
+          gsap.to(hoverTextEl, {
+            x: '0%',
+            y: '0%',
+            opacity: 1,
+            duration: 0.4,
+            ease: 'back.out(1.7)',
+          })
+
+          gsap.to(childrenEl, {
+            x: toDirection.x + '%',
+            y: toDirection.y + '%',
+            opacity: 0,
+            duration: 0.3,
+            ease: 'power2.in',
+          })
+        }
+      }
+
+      const handleMouseLeave = (): void => {
+        if (isDisabled) return
+
+        gsap.to(button, {
+          x: 0,
+          y: 0,
+          scale: 1,
+          duration: 0.4,
+          ease: 'elastic.out(1, 0.5)',
+        })
+
+        if (hoverTextEl && childrenEl) {
+          gsap.to(hoverTextEl, {
+            opacity: 0,
+            duration: 0.2,
+            ease: 'power2.in',
+          })
+
+          gsap.to(childrenEl, {
+            x: '0%',
+            y: '0%',
+            opacity: 1,
+            duration: 0.4,
+            ease: 'back.out(1.7)',
+            delay: 0.1,
+          })
+        }
+      }
+
+      const handleMouseMove = (e: MouseEvent): void => {
+        if (isDisabled) return
+
+        const rect = button.getBoundingClientRect()
+        const mouseX = e.clientX - rect.left
+        const mouseY = e.clientY - rect.top
+        const centerX = rect.width / 2
+        const centerY = rect.height / 2
+
+        gsap.to(button, {
+          x: (mouseX - centerX) * 0.1,
+          y: (mouseY - centerY) * 0.1,
+          duration: 0.2,
+          ease: 'power2.out',
+        })
+      }
+
+      button.addEventListener('mouseenter', handleMouseEnter)
+      button.addEventListener('mouseleave', handleMouseLeave)
+      button.addEventListener('mousemove', handleMouseMove)
+
+      return () => {
+        button.removeEventListener('mouseenter', handleMouseEnter)
+        button.removeEventListener('mouseleave', handleMouseLeave)
+        button.removeEventListener('mousemove', handleMouseMove)
+        if (tl.current) {
+          tl.current.kill()
+        }
+      }
+    }, [isDisabled, hoverText, buttonRef])
+
     const content = (
       <>
-        {loading ? (
-          <svg
-            className="mr-2 h-4 w-4 animate-spin"
-            fill="none"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+        {loading ? <LoadingSpinner size={size || 'default'} /> : null}
+
+        {!loading && leftIcon ? (
+          <span className="flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-110">
+            {leftIcon}
+          </span>
+        ) : null}
+
+        {children ? (
+          <span ref={childrenRef} className={cn('truncate relative', loading && 'opacity-70')}>
+            {children}
+          </span>
+        ) : null}
+
+        {hoverText ? (
+          <span
+            ref={hoverTextRef}
+            className="absolute inset-0 flex items-center justify-center truncate opacity-0 pointer-events-none font-medium"
           >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              fill="currentColor"
-            />
-          </svg>
+            {hoverText}
+          </span>
+        ) : null}
+
+        {!loading && rightIcon ? (
+          <span className="flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-110">
+            {rightIcon}
+          </span>
         ) : null}
-        {!loading && leftIcon ? <span className="mr-2 flex items-center">{leftIcon}</span> : null}
-        <span className="flex items-center">{children}</span>
-        {!loading && rightIcon ? <span className="ml-2 flex items-center">{rightIcon}</span> : null}
       </>
     )
 
     if (asChild) {
       return (
         <Component
-          ref={ref}
-          className={cn(buttonVariants({ variant, size, loading }), className)}
+          ref={buttonRef}
+          className={cn(buttonVariants({ variant, size, loading }), 'group', className)}
           disabled={isDisabled}
           {...props}
         >
@@ -115,8 +289,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
-        ref={ref}
-        className={cn(buttonVariants({ variant, size, loading }), className)}
+        ref={buttonRef}
+        className={cn(buttonVariants({ variant, size, loading }), 'group', className)}
         disabled={isDisabled}
         {...props}
       >
diff --git a/src/shared/ui/loading-spinner/LoadingSpinner.tsx b/src/shared/ui/loading-spinner/LoadingSpinner.tsx
new file mode 100644
index 0000000..261d328
--- /dev/null
+++ b/src/shared/ui/loading-spinner/LoadingSpinner.tsx
@@ -0,0 +1,25 @@
+import { type FC } from 'react'
+
+import { cn } from '@lib/utils'
+
+type Props = {
+  size?: string
+}
+
+export const LoadingSpinner: FC<Props> = ({ size = 'default' }) => {
+  const spinnerSize =
+    size === 'sm' ? 'h-3 w-3' : size === 'lg' || size === 'xl' ? 'h-5 w-5' : 'h-4 w-4'
+
+  return (
+    <div
+      className={cn(
+        'animate-spin rounded-full border-2 border-current border-t-transparent',
+        spinnerSize
+      )}
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}
+
+LoadingSpinner.displayName = 'LoadingSpinner'
diff --git a/src/shared/ui/loading-spinner/index.ts b/src/shared/ui/loading-spinner/index.ts
new file mode 100644
index 0000000..03d497f
--- /dev/null
+++ b/src/shared/ui/loading-spinner/index.ts
@@ -0,0 +1 @@
+export { LoadingSpinner } from './LoadingSpinner'
diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx
index 507ac46..d7e60db 100644
--- a/src/shared/ui/logo/Logo.tsx
+++ b/src/shared/ui/logo/Logo.tsx
@@ -1,7 +1,39 @@
 import { type FC } from 'react'
 
+import { gsap } from 'gsap'
+
+import { ROUTES } from '@shared/config'
+import { Link } from '@lib/i18n'
 import { cn } from '@lib/utils'
 
-export const Logo: FC = () => <div className={cn('font-bold text-3xl')}>FlakeForge</div>
+type Props = {
+  className?: string
+}
+
+export const Logo: FC<Props> = ({ className }) => (
+  <Link
+    aria-label="Company Logo"
+    className={cn('flex-center', className)}
+    href={ROUTES.HOME}
+    role="img"
+    tabIndex={0}
+    onMouseEnter={e => {
+      gsap.to(e.currentTarget, {
+        scale: 1.02,
+        duration: 0.3,
+        ease: 'power2.out',
+      })
+    }}
+    onMouseLeave={e => {
+      gsap.to(e.currentTarget, {
+        scale: 1,
+        duration: 0.3,
+        ease: 'power2.out',
+      })
+    }}
+  >
+    <div className="font-black text-3xl">FlakeForge</div>
+  </Link>
+)
 
 Logo.displayName = 'Logo'
diff --git a/src/widgets/footer/Footer.tsx b/src/widgets/footer/Footer.tsx
index fb2cd1e..3f59874 100644
--- a/src/widgets/footer/Footer.tsx
+++ b/src/widgets/footer/Footer.tsx
@@ -1,7 +1,7 @@
 import { type FC } from 'react'
 
 export const Footer: FC = () => (
-  <footer className="sticky font-black bottom-0 z-50 text-9xl">footer</footer>
+  <footer className="font-black bottom-0 z-50 text-9xl">footer</footer>
 )
 
 Footer.displayName = 'Footer'
diff --git a/src/widgets/header/Header.tsx b/src/widgets/header/Header.tsx
index b3d7de5..6347c83 100644
--- a/src/widgets/header/Header.tsx
+++ b/src/widgets/header/Header.tsx
@@ -1,30 +1,209 @@
 'use client'
 
-import { type FC } from 'react'
-import { useTranslations } from 'next-intl'
+import { type FC, useEffect, useRef, useState } from 'react'
+import { useLocale, useTranslations } from 'next-intl'
 import { useTheme } from 'next-themes'
 
+import { gsap } from 'gsap'
+
+import { type LocalesType } from '@shared/types'
 import { Logo } from '@shared/ui'
 import { Button } from '@shared/ui/button'
 import { MAIN_HEADER_CONFIG } from '@widgets/header/config'
-import { Link } from '@lib/i18n'
+import { Link, LOCALES, usePathname, useRouter } from '@lib/i18n'
 
 export const Header: FC = () => {
-  const { theme, setTheme } = useTheme()
   const t = useTranslations('Layout')
+  const router = useRouter()
+  const pathname = usePathname()
+  const currentLocale = useLocale()
+  const { theme, setTheme } = useTheme()
+
+  const headerRef = useRef<HTMLElement>(null)
+  const logoRef = useRef<HTMLDivElement>(null)
+  const navRef = useRef<HTMLElement>(null)
+  const actionsRef = useRef<HTMLDivElement>(null)
+  const hoverLineRef = useRef<HTMLDivElement>(null)
+
+  const [, setHoveredNav] = useState<string | null>(null)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+
+    const ctx = gsap.context(() => {
+      if (headerRef.current) {
+        gsap.fromTo(
+          headerRef.current,
+          { y: -20, opacity: 0 },
+          {
+            y: 0,
+            opacity: 1,
+            duration: 0.8,
+            ease: 'power2.out',
+          }
+        )
+      }
+
+      const elements = [logoRef.current, navRef.current, actionsRef.current].filter(Boolean)
+      if (elements.length > 0) {
+        gsap.fromTo(
+          elements,
+          { opacity: 0, y: 10 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            stagger: 0.1,
+            ease: 'power2.out',
+            delay: 0.2,
+          }
+        )
+      }
+    })
+
+    return () => ctx.revert()
+  }, [mounted])
+
+  const handleChangeLocale = (): void => {
+    const currentIndex = LOCALES.indexOf(currentLocale as LocalesType)
+    const nextIndex = (currentIndex + 1) % LOCALES.length
+    const nextLocale = LOCALES[nextIndex]
+
+    router.replace(pathname, { locale: nextLocale })
+  }
+
+  const handleThemeToggle = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  const handleNavHover = (href: string, element: HTMLElement): void => {
+    if (!navRef.current || !hoverLineRef.current) return
+
+    setHoveredNav(href)
+
+    const rect = element.getBoundingClientRect()
+    const navRect = navRef.current.getBoundingClientRect()
+
+    gsap.to(hoverLineRef.current, {
+      width: rect.width - 16,
+      x: rect.left - navRect.left + 8,
+      opacity: 1,
+      duration: 0.3,
+      ease: 'power2.out',
+    })
+  }
+
+  const handleNavContainerLeave = (): void => {
+    setHoveredNav(null)
+
+    if (hoverLineRef.current) {
+      gsap.to(hoverLineRef.current, {
+        opacity: 0,
+        duration: 0.25,
+        ease: 'power2.out',
+      })
+    }
+  }
+
+  const handleButtonHover = (element: HTMLElement | null, isEnter: boolean): void => {
+    if (!element) return
+
+    gsap.to(element, {
+      scale: isEnter ? 1.02 : 1,
+      duration: 0.2,
+      ease: 'power2.out',
+    })
+  }
+
+  const handleThemeHover = (element: HTMLElement | null, isEnter: boolean): void => {
+    if (!element) return
+
+    const icon = element.querySelector('svg')
+    if (icon) {
+      gsap.to(icon, {
+        rotation: isEnter ? 90 : 0,
+        duration: 0.3,
+        ease: 'power2.out',
+      })
+    }
+    handleButtonHover(element, isEnter)
+  }
+
+  if (!mounted) {
+    return null
+  }
 
   return (
-    <header className="sticky top-0 z-50 border-b py-2 backdrop-blur-sm w-full">
-      <div className="container-center flex-between">
-        <Logo />
+    <header
+      ref={headerRef}
+      className="sticky top-0 z-50 backdrop-blur-md border-b border-border/40 bg-background/80"
+      role="banner"
+    >
+      <div className="flex items-center h-16">
+        <div
+          ref={logoRef}
+          className="border-r border-border/40 h-full flex items-center group cursor-pointer"
+          onMouseEnter={e => handleButtonHover(e.currentTarget, true)}
+          onMouseLeave={e => handleButtonHover(e.currentTarget, false)}
+        >
+          <Logo className="size-full px-6 transition-all duration-300 group-hover:text-primary" />
+        </div>
 
-        <nav>
-          <ul className="flex items-center gap-8">
+        <Button
+          aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+          className="hover:text-primary hover:bg-primary/5 border-r border-border/40 rounded-none h-full px-6 transition-all duration-300"
+          variant="ghost"
+          onClick={handleThemeToggle}
+          onMouseEnter={e => handleThemeHover(e.currentTarget, true)}
+          onMouseLeave={e => handleThemeHover(e.currentTarget, false)}
+        >
+          {theme === 'dark' ? (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          )}
+        </Button>
+
+        <nav
+          ref={navRef}
+          aria-label="Main navigation"
+          className="flex-grow px-8 relative"
+          role="navigation"
+          tabIndex={0}
+          onMouseLeave={handleNavContainerLeave}
+        >
+          <div
+            ref={hoverLineRef}
+            className="absolute bottom-2 h-0.5 bg-primary opacity-0 pointer-events-none rounded-full transition-all duration-300"
+          />
+
+          <ul className="flex items-center justify-center gap-8">
             {MAIN_HEADER_CONFIG.map(({ title, href }) => (
               <li key={href}>
                 <Link
-                  className="text-base font-medium text-muted-foreground hover:text-primary transition-colors"
+                  aria-label={`Navigate to ${t(title)}`}
+                  className="text-sm font-medium hover:text-primary transition-all duration-300 uppercase tracking-wide px-3 py-2 rounded-md relative block cursor-pointer"
                   href={href}
+                  onMouseEnter={e => handleNavHover(href, e.currentTarget)}
                 >
                   {t(title)}
                 </Link>
@@ -33,7 +212,28 @@ export const Header: FC = () => {
           </ul>
         </nav>
 
-        <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>theme</Button>
+        <div ref={actionsRef} className="flex items-center border-l border-border/40 h-full">
+          <Button
+            aria-label={`Change language from ${currentLocale}`}
+            className="hover:text-primary uppercase hover:bg-primary/5 border-r border-border/40 rounded-none h-full px-6 transition-all duration-300 cursor-pointer"
+            variant="ghost"
+            onClick={handleChangeLocale}
+            onMouseEnter={e => handleButtonHover(e.currentTarget, true)}
+            onMouseLeave={e => handleButtonHover(e.currentTarget, false)}
+          >
+            {currentLocale}
+          </Button>
+
+          <Button
+            aria-label="Visit Blog"
+            className="px-6 hover:text-primary hover:bg-primary/5 h-full rounded-none font-medium text-sm uppercase tracking-wide transition-all duration-300 cursor-pointer"
+            variant="ghost"
+            onMouseEnter={e => handleButtonHover(e.currentTarget, true)}
+            onMouseLeave={e => handleButtonHover(e.currentTarget, false)}
+          >
+            BLOG
+          </Button>
+        </div>
       </div>
     </header>
   )
diff --git a/src/widgets/header/config.ts b/src/widgets/header/config.ts
index d78080b..51f705e 100644
--- a/src/widgets/header/config.ts
+++ b/src/widgets/header/config.ts
@@ -1,7 +1,9 @@
+import { ROUTES } from '@shared/config'
+
 export const MAIN_HEADER_CONFIG = [
-  { title: 'home', href: '/' },
-  { title: 'about', href: '/about' },
-  { title: 'showcase', href: '/showcase' },
-  { title: 'blog', href: '/blog' },
-  { title: 'contact', href: '/contact' },
+  { title: 'home', href: ROUTES.HOME },
+  { title: 'showcase', href: ROUTES.SHOWCASE },
+  { title: 'about', href: ROUTES.ABOUT },
+  { title: 'news', href: ROUTES.NEWS },
+  { title: 'contact', href: ROUTES.CONTACT },
 ]