diff --git a/frontend/public/tab_logo.png b/frontend/public/tab_logo.png
index 25f4045..26ac2ee 100644
Binary files a/frontend/public/tab_logo.png and b/frontend/public/tab_logo.png differ
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1daea3e..1a7a728 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3,7 +3,6 @@ import { LanguageProvider } from './context/LanguageContext';
 import { AuthProvider, useAuth } from "./auth/AuthProvider";
 import ScrollToTop from './components/ScrollToTop';
 import Navbar from './components/Navbar';
-import ProfileNavbar from './components/ProfileNavbar';
 import Footer from './components/Footer';
 import Home from './pages/Home';
 import GitHub from './pages/GitHub';
@@ -29,7 +28,7 @@ function AppContent() {
     <BrowserRouter>
       <ScrollToTop />
       <div id="page" style={{ opacity: 1, transition: 'opacity 0.4s ease' }}>
-        {user ? <ProfileNavbar /> : <Navbar />}
+        <Navbar />
 
         <Routes>
           <Route path="/" element={<Home />} />
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 1a9ea42..cfeaccc 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,26 +1,31 @@
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-
+import { useAuth } from "../auth/AuthProvider";
 import { useLanguage } from "../context/LanguageContext";
+import { SvgProfile, SvgSettings, SvgProducts } from "../components/icons/svgs";
 
 import "../styles/Navbar.css";
+import "../styles/ProfileNavbar.css";
 
 export default function Navbar() {
+  const { user, clearAuth } = useAuth();
   const { language, setLanguage, t } = useLanguage();
 
   const location = useLocation();
   const navigate = useNavigate();
-  const isHomeRoute = location.pathname === "/" || location.pathname === "/home";
 
   const [scrolled, setScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [avatarError, setAvatarError] = useState(false);
+  const dropdownRef = useRef(null);
 
   useEffect(() => {
     const onScroll = () => {
       setScrolled(window.scrollY > 40);
     };
 
-    window.addEventListener("scroll", onScroll);
+    window.addEventListener("scroll", onScroll, { passive: true });
 
     return () => {
       window.removeEventListener("scroll", onScroll);
@@ -29,8 +34,23 @@ export default function Navbar() {
 
   useEffect(() => {
     setMenuOpen(false);
+    setDropdownOpen(false);
   }, [location.pathname]);
 
+  useEffect(() => {
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setDropdownOpen(false);
+      }
+    };
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handler);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handler);
+    };
+  }, [dropdownOpen]);
+
   function isActive(path) {
     return location.pathname.startsWith(path);
   }
@@ -39,29 +59,41 @@ export default function Navbar() {
     setMenuOpen((prev) => !prev);
   }
 
-  return (
-    <nav className={`navbar ${isHomeRoute ? "navbar-home" : ""} ${scrolled ? "scrolled" : ""}`.trim()}>
+  function onToggleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleMenu();
+    }
+  }
 
-      <div className="navbar-left">
+  const handleLogout = () => {
+    clearAuth();
+    navigate("/login");
+  };
+
+  const displayName = user?.username || user?.email || "?";
+  const initial = displayName.charAt(0).toUpperCase();
+  const avatar = user?.avatar;
 
-        <Link to="/home" className={`logo-wrapper ${isHomeRoute ? "logo-wrapper-home" : ""}`}>
+  const isHomeRoute = location.pathname === "/" || location.pathname === "/home";
+
+  return (
+    <nav className={`navbar ${scrolled ? "scrolled" : ""}`.trim()}>
 
+      <div className="navbar-left">
+        <Link to="/home" className="logo-wrapper">
           <img
             src="/favicon.ico"
             alt="NexoryDev Logo"
-            className={`logo ${isHomeRoute ? "logo-home-round" : ""}`}
+            className="logo"
           />
-
-          <span className={`logo-text ${isHomeRoute ? "logo-text-home" : ""}`}>
+          <span className="logo-text">
             NexoryDev
           </span>
-
         </Link>
-
       </div>
 
-      <ul className={`navbar-menu ${isHomeRoute ? "navbar-menu-home" : ""} ${menuOpen ? "active" : ""}`.trim()}>
-
+      <ul className={`navbar-menu ${menuOpen ? "active" : ""}`.trim()}>
         <li>
           <Link
             to="/home"
@@ -90,66 +122,141 @@ export default function Navbar() {
         </li>
 
         <li className="navbar-menu-controls">
-          <div className={`language-switch ${isHomeRoute ? "language-switch-home" : ""}`}>
-
+          <div className="language-switch" aria-label={t("nav.language_switcher") || undefined}>
             <button
               className={language === "de" ? "active" : ""}
               onClick={() => setLanguage("de")}
             >
               DE
             </button>
-
             <button
               className={language === "en" ? "active" : ""}
               onClick={() => setLanguage("en")}
             >
               EN
             </button>
-
           </div>
 
-          <button
-            className={`login-btn ${isHomeRoute ? "login-btn-home" : ""}`}
-            onClick={() => navigate("/login")}
-          >
-            {t("nav.login")}
-          </button>
+          {user ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
+              <Link to="/me" onClick={() => setMenuOpen(false)} className="login-btn">
+                {t('profile.dropdown.my_profile')}
+              </Link>
+              <Link to="/me/products" onClick={() => setMenuOpen(false)} className="login-btn">
+                {t('profile.dropdown.products')}
+              </Link>
+              <Link to="/me/settings" onClick={() => setMenuOpen(false)} className="login-btn">
+                {t('profile.dropdown.settings')}
+              </Link>
+              <button
+                onClick={() => { setMenuOpen(false); handleLogout(); }}
+                style={{ marginTop: 4 }}
+                className="login-btn"
+              >
+                {t('profile.dropdown.logout')}
+              </button>
+            </div>
+          ) : (
+            <button
+              className="login-btn"
+              onClick={() => navigate("/login")}
+            >
+              {t("nav.login")}
+            </button>
+          )}
         </li>
-
       </ul>
 
-      <div className={`navbar-right ${isHomeRoute ? "navbar-right-home" : ""}`}>
-
-        <div className={`language-switch ${isHomeRoute ? "language-switch-home" : ""}`}>
-
+      <div className="navbar-right">
+        <div className="language-switch" aria-label={t("nav.language_switcher") || undefined}>
           <button
             className={language === "de" ? "active" : ""}
             onClick={() => setLanguage("de")}
           >
             DE
           </button>
-
           <button
             className={language === "en" ? "active" : ""}
             onClick={() => setLanguage("en")}
           >
             EN
           </button>
-
         </div>
 
-        <button
-          className={`login-btn ${isHomeRoute ? "login-btn-home" : ""}`}
-          onClick={() => navigate("/login")}
-        >
-          {t("nav.login")}
-        </button>
+        {user ? (
+          <div className="user-menu" ref={dropdownRef}>
+            <button
+              className={`user-menu__btn${dropdownOpen ? " open" : ""}`}
+              onClick={() => setDropdownOpen((v) => !v)}
+              aria-expanded={dropdownOpen}
+              aria-label={t("profile.dropdown.aria_label") || undefined}
+            >
+              <span className="user-menu__avatar">
+                {avatar && !avatarError ? (
+                  <img
+                    src={avatar}
+                    alt={displayName}
+                    width={22}
+                    height={22}
+                    style={{ width: 22, height: 22, objectFit: "cover", borderRadius: "50%", display: "block" }}
+                    onError={() => setAvatarError(true)}
+                  />
+                ) : (
+                  <span className="user-menu__initial">{initial}</span>
+                )}
+              </span>
+              <span className="user-menu__label">{displayName || user?.email}</span>
+              <svg className="user-menu__chevron" width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden>
+                <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </button>
 
+            {dropdownOpen && (
+              <div className="user-menu__dropdown">
+                <div className="user-menu__dropdown-header">
+                  <span className="user-menu__dropdown-email">{user?.email}</span>
+                </div>
+                <div className="user-menu__divider" />
+                <button className="user-menu__item" onClick={() => navigate("/me")}>
+                  <SvgProfile size={14} />
+                  {t("profile.dropdown.my_profile")}
+                </button>
+                <button className="user-menu__item" onClick={() => navigate("/me/products")}>
+                  <SvgProducts size={14} />
+                  {t("profile.dropdown.products")}
+                </button>
+                <button className="user-menu__item" onClick={() => navigate("/me/settings")}>
+                  <SvgSettings size={14} />
+                  {t("profile.dropdown.settings")}
+                </button>
+                <div className="user-menu__divider" />
+                <button className="user-menu__item user-menu__item--danger" onClick={handleLogout}>
+                  <svg width="14" height="14" viewBox="0 0 15 15" fill="none">
+                    <path d="M5 13H3a1 1 0 01-1-1V3a1 1 0 011-1h2M10 10l3-2.5L10 5M13 7.5H6" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                  {t("profile.dropdown.logout")}
+                </button>
+              </div>
+            )}
+          </div>
+        ) : (
+          <button
+            className="login-btn"
+            onClick={() => navigate("/login")}
+          >
+            {t("nav.login")}
+          </button>
+        )}
       </div>
 
       <div
         className={`navbar-toggle ${menuOpen ? "active" : ""}`}
         onClick={toggleMenu}
+        role="button"
+        aria-label="Toggle menu"
+        aria-expanded={menuOpen}
+        tabIndex={0}
+        onKeyDown={onToggleKeyDown}
       >
         <span />
         <span />
diff --git a/frontend/src/components/ProfileNavbar.jsx b/frontend/src/components/ProfileNavbar.jsx
deleted file mode 100644
index 5ce1589..0000000
--- a/frontend/src/components/ProfileNavbar.jsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import { useAuth } from "../auth/AuthProvider";
-import { useLanguage } from "../context/LanguageContext";
-import { SvgProfile, SvgSettings, SvgProducts } from "../components/icons/svgs";
-import "../styles/Navbar.css";
-import "../styles/ProfileNavbar.css";
-
-export default function ProfileNavbar() {
-  const { user, clearAuth } = useAuth();
-  const { language, setLanguage, t } = useLanguage();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const isHomeRoute = location.pathname === "/" || location.pathname === "/home";
-  const [scrolled, setScrolled] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [avatarError, setAvatarError] = useState(false);
-  const dropdownRef = useRef(null);
-
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 50);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-
-  useEffect(() => {
-    setMenuOpen(false);
-    setDropdownOpen(false);
-  }, [location.pathname]);
-
-  useEffect(() => {
-    const handler = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setDropdownOpen(false);
-      }
-    };
-    if (dropdownOpen) document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [dropdownOpen]);
-
-  function isActive(path) {
-    return location.pathname.startsWith(path);
-  }
-
-  function toggleMenu() {
-    setMenuOpen((v) => !v);
-  }
-
-  function onToggleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      toggleMenu();
-    }
-  }
-
-  const handleLogout = () => {
-    clearAuth();
-    navigate("/login");
-  };
-
-  const displayName = user?.username || user?.email || "?";
-  const initial = displayName.charAt(0).toUpperCase();
-  const avatar = user?.avatar;
-
-  return (
-    <nav className={`navbar ${isHomeRoute ? "navbar-home" : ""} ${scrolled ? "scrolled" : ""}`.trim()}>
-      <div className="navbar-left">
-        <Link to="/home" className={`logo-wrapper ${isHomeRoute ? "logo-wrapper-home" : ""}`}>
-          <img src="/favicon.ico" alt="NexoryDev Logo" className={`logo ${isHomeRoute ? "logo-home-round" : ""}`} />
-          <span className={`logo-text ${isHomeRoute ? "logo-text-home" : ""}`}>NexoryDev</span>
-        </Link>
-      </div>
-
-      <ul className={`navbar-menu ${isHomeRoute ? "navbar-menu-home" : ""} ${menuOpen ? "active" : ""}`.trim()}>
-        <li>
-          <Link
-            to="/home"
-            className={`nav-link-featured ${isActive("/home") ? "active" : ""}`.trim()}
-          >
-            {t("nav.home")}
-          </Link>
-        </li>
-        <li className="navbar-menu-controls">
-          <div className={`language-switch ${isHomeRoute ? "language-switch-home" : ""}`} aria-label={t("nav.language_switcher")}> 
-            <button className={language === "de" ? "active" : ""} onClick={() => setLanguage("de")}>DE</button>
-            <button className={language === "en" ? "active" : ""} onClick={() => setLanguage("en")}>EN</button>
-          </div>
-
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
-            <Link to="/me" onClick={() => setMenuOpen(false)} className="login-btn">{t('profile.dropdown.my_profile')}</Link>
-            <Link to="/me/products" onClick={() => setMenuOpen(false)} className="login-btn">{t('profile.dropdown.products')}</Link>
-            <Link to="/me/settings" onClick={() => setMenuOpen(false)} className="login-btn">{t('profile.dropdown.settings')}</Link>
-            <button onClick={() => { setMenuOpen(false); handleLogout(); }} style={{ marginTop: 4 }} className="login-btn">{t('profile.dropdown.logout')}</button>
-          </div>
-        </li>
-        <li>
-          <Link
-            to="/github"
-            className={`nav-link-featured ${isActive("/github") ? "active" : ""}`.trim()}
-          >
-            {t("nav.github")}
-          </Link>
-        </li>
-        <li>
-          <Link
-            to="/contact"
-            className={`nav-link-featured ${isActive("/contact") ? "active" : ""}`.trim()}
-          >
-            {t("nav.contact")}
-          </Link>
-        </li>
-      </ul>
-
-      <div className={`navbar-right ${isHomeRoute ? "navbar-right-home" : ""}`}>
-        <div className={`language-switch ${isHomeRoute ? "language-switch-home" : ""}`} aria-label={t("nav.language_switcher")}>
-          <button
-            className={language === "de" ? "active" : ""}
-            onClick={() => setLanguage("de")}
-          >
-            DE
-          </button>
-          <button
-            className={language === "en" ? "active" : ""}
-            onClick={() => setLanguage("en")}
-          >
-            EN
-          </button>
-        </div>
-
-        <div className="user-menu" ref={dropdownRef}>
-          <button
-            className={`user-menu__btn${dropdownOpen ? " open" : ""}`}
-            onClick={() => setDropdownOpen((v) => !v)}
-            aria-expanded={dropdownOpen}
-            aria-label={t("profile.dropdown.aria_label")}
-          >
-          <span className="user-menu__avatar">
-            {avatar && !avatarError ? (
-              <img
-                src={avatar}
-                alt={displayName}
-                width={22}
-                height={22}
-                style={{ width: 22, height: 22, objectFit: "cover", borderRadius: "50%", display: "block" }}
-                onError={() => setAvatarError(true)}
-              />
-            ) : (
-              <span className="user-menu__initial">{initial}</span>
-            )}
-          </span>
-            <span className="user-menu__label">{displayName || user?.email}</span>
-            <svg className="user-menu__chevron" width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden>
-              <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          </button>
-
-          {dropdownOpen && (
-            <div className="user-menu__dropdown">
-              <div className="user-menu__dropdown-header">
-                <span className="user-menu__dropdown-email">{user?.email}</span>
-              </div>
-              <div className="user-menu__divider" />
-              <button className="user-menu__item" onClick={() => navigate("/me")}>
-                <SvgProfile size={14} />
-                {t("profile.dropdown.my_profile")}
-              </button>
-              <button className="user-menu__item" onClick={() => navigate("/me/products")}>
-                <SvgProducts size={14} />
-                {t("profile.dropdown.products")}
-              </button>
-              <button className="user-menu__item" onClick={() => navigate("/me/settings")}>
-                <SvgSettings size={14} />
-                {t("profile.dropdown.settings")}
-              </button>
-              <div className="user-menu__divider" />
-              <button className="user-menu__item user-menu__item--danger" onClick={handleLogout}>
-                <svg width="14" height="14" viewBox="0 0 15 15" fill="none"><path d="M5 13H3a1 1 0 01-1-1V3a1 1 0 011-1h2M10 10l3-2.5L10 5M13 7.5H6" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/></svg>
-                {t("profile.dropdown.logout")}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div
-        className={`navbar-toggle ${menuOpen ? "active" : ""}`}
-        onClick={toggleMenu}
-        role="button"
-        aria-label="Toggle menu"
-        aria-expanded={menuOpen}
-        tabIndex={0}
-        onKeyDown={onToggleKeyDown}
-      >
-        <span />
-        <span />
-        <span />
-      </div>
-    </nav>
-  );
-}
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index 524c47b..14dd6d4 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -6,7 +6,7 @@
   "nav.imprint": "Impressum",
   "nav.language_switcher": "Sprachauswahl",
   "nav.login": "Anmelden",
-
+  
   "footer.nav_section_title": "Rechtliches",
   "footer.tagline": "Open-Source-Projekte · Python, JavaScript, PHP und mehr",
   "footer.nav_heading": "Navigation",
@@ -15,62 +15,12 @@
   "home.hero.kicker": "EINZIGARTIGE LÖSUNGEN",
   "home.hero.title_1": "Einzigartige Lösungen,",
   "home.hero.title_2": "die begeistern.",
-  "home.hero.title_3": "mit klarer Marke und sauberer Technik.",
   "home.hero.description": "Wir entwickeln Discord Bots, Webanwendungen und Mobile Apps – modern, sicher und maßgeschneidert.",
   "home.hero.cta.primary": "Services entdecken",
   "home.hero.cta.secondary": "Kontakt aufnehmen",
   "home.hero.scroll_hint": "Scrollen um zu entdecken",
-
-  "home.services.discord.title": "Discord Bots",
-  "home.services.discord.desc": "Automatisierung, Moderation und Community-Tools.",
-  "home.services.web.title": "Web Entwicklung",
-  "home.services.web.desc": "Websites & Webapps mit modernsten Technologien.",
-  "home.services.app.title": "App Entwicklung",
-  "home.services.app.desc": "Mobile Apps für iOS & Android – performant und intuitiv.",
-  "home.services.individual.title": "Individuelle Lösungen",
-  "home.services.individual.desc": "Maßgeschneiderte Software für dein Projekt.",
-
-  "home.about.kicker": "Über Nexory",
   "home.about.title": "Technologie. Kreativität. Leidenschaft.",
   "home.about.desc": "Wir kombinieren modernes Design mit sauberem Code, um digitale Produkte zu schaffen, die wirklich einen Unterschied machen.",
-  "home.stats.clients.num": "50+",
-  "home.stats.clients.label": "Zufriedene Kunden",
-  "home.stats.projects.num": "100+",
-  "home.stats.projects.label": "Umgesetzte Projekte",
-  "home.stats.experience.num": "2+",
-  "home.stats.experience.label": "Jahre Erfahrung",
-  "home.stats.passion.num": "∞",
-  "home.stats.passion.label": "Leidenschaft",
-
-  "home.features.modern.title": "Modern",
-  "home.features.modern.desc": "Neueste Technologien",
-  "home.features.reliable.title": "Zuverlässig",
-  "home.features.reliable.desc": "Stabil & performant",
-  "home.features.individual.title": "Individuell",
-  "home.features.individual.desc": "Maßgeschneiderte Lösungen",
-  "home.features.creative.title": "Kreativ",
-  "home.features.creative.desc": "Design das begeistert",
-
-  "home.discord_bots.title": "Discord Bots",
-  "home.discord_bots.description": "Individuelle Bots für Communities, Moderation, Ticketing, Economy und KI-Funktionen.",
-  "home.discord_bots.item1": "Schnelle Automationen",
-  "home.discord_bots.item2": "Sichere Moderation",
-  "home.discord_bots.item3": "Community-Tools und Insights",
-  "home.web_development.title": "Web Entwicklung",
-  "home.web_development.description": "Moderne Webanwendungen mit sauberer Architektur, Fokus auf Performance und Nutzererlebnis.",
-  "home.web_development.item1": "Schnelle Ladezeiten",
-  "home.web_development.item2": "Saubere Frontend-Architektur",
-  "home.web_development.item3": "SEO und skalierbare APIs",
-  "home.mobile_apps.title": "App Entwicklung",
-  "home.mobile_apps.description": "Flutter-, React- oder Native-Apps für iOS und Android mit Fokus auf Kundennutzen.",
-  "home.mobile_apps.item1": "Native Performance",
-  "home.mobile_apps.item2": "Sichere Auth & Daten",
-  "home.mobile_apps.item3": "Intuitive Benutzerführung",
-  "home.individual_solutions.title": "Individuelle Lösungen",
-  "home.individual_solutions.description": "Maßgeschneiderte Software für deine Vision – von erster Idee bis Live-Produkt.",
-  "home.individual_solutions.item1": "Maßgeschneiderte Architektur",
-  "home.individual_solutions.item2": "Skalierbare Integrationen",
-  "home.individual_solutions.item3": "Kontinuierliche Weiterentwicklung",
   "home.section.discord.title": "Discord Bots",
   "home.section.discord.desc": "Individuelle Bots für Communitys. Moderation, Tickets, Economy, KI und vieles mehr.",
   "home.section.web.title": "Web Entwicklung",
@@ -80,7 +30,6 @@
   "home.section.individual.title": "Individuelle Lösungen",
   "home.section.individual.desc": "Deine Idee. Unsere Umsetzung. Wir bauen, was du brauchst. Maßgeschneidert für dich.",
   "home.section.learn_more": "Mehr erfahren",
-
   "home.cta.title": "Deine Idee. Auf deine Anforderungen angepasst.",
   "home.cta.button": "Projekt besprechen",
 
@@ -105,13 +54,8 @@
 
   "github.stars": "Sterne",
   "github.forks": "Verzweigungen",
-  "github.issues": "Probleme",
-  "github.updated": "Zuletzt aktualisiert",
-  "github.repo_lang": "Hauptsprache",
-  "github.desc": "Beschreibung",
   "github.loading": "Repositories werden geladen...",
   "github.error": "Daten konnten nicht geladen werden. Bitte versuche es später erneut.",
-  "github.stats_header": "Statistiken",
   "github.repos_header": "Repositories",
   "github.visit_org": "Auf GitHub ansehen →",
   "github.members_header": "Mitglieder",
@@ -131,7 +75,6 @@
   "github.active_ago": "aktiv vor {time}",
   "github.active_unknown": "zuletzt aktiv unbekannt",
   "github.filter_all": "Alle",
-  "github.page_subtitle": "Unsere Open-Source-Projekte auf GitHub",
   "github.projects_soon": "Unsere Projekte werden bald hier zu sehen sein.",
 
   "notfound.title": "Seite nicht gefunden",
@@ -153,14 +96,11 @@
   "login.login_failed": "Anmelden fehlgeschlagen",
   "login.invalid_password": "Passwort muss mindestens 8 Zeichen lang sein",
   "login.email_exists": "Ein Account mit dieser E-Mail existiert bereits",
-  "login.invalid_email": "Ungültige E-Mail-Adresse",
   "login.remember_me": "Angemeldet bleiben",
   "login.network_error": "Netzwerkfehler",
   "login.email_not_verified": "E-Mail noch nicht verifiziert",
   "login.check_email": "Überprüfe dein Postfach und klicke auf den Bestätigungslink",
   "login.register_failed": "Registrierung fehlgeschlagen",
-  "login.verify_failed": "Verifizierung fehlgeschlagen oder Link abgelaufen",
-  "login.verified": "E-Mail erfolgreich verifiziert",
   "login.forgot_password_header": "Passwort zurücksetzen",
   "login.forgot_password": "Passwort vergessen?",
   "login.send_reset": "Link senden",
@@ -178,7 +118,6 @@
   "account.sidebar.products": "Produkte",
   "account.sidebar.settings": "Einstellungen",
   "account.me.badges": "Badges",
-  "account.me.achievements": "Erfolge",
   "account.products.portfolio.name": "Portfolio",
   "account.products.portfolio.desc": "Persönliche Seite",
   "account.products.api.name": "API",
@@ -223,7 +162,6 @@
   "account.settings.github.disconnected": "GitHub-Verbindung getrennt.",
   "account.settings.github.not_configured": "GitHub OAuth ist noch nicht konfiguriert.",
   "account.settings.github.already_linked": "Dieser GitHub-Account ist bereits mit einem anderen NexoryDev-Konto verbunden.",
-  "account.settings.github.sync_badges": "Badges synchronisieren",
   "account.settings.github.sync_new": "{count} neue Badge(s) freigeschaltet!",
   "account.settings.github.sync_none": "Keine neuen Badges gefunden.",
   "account.settings.github.sync_failed": "Badge-Synchronisation fehlgeschlagen.",
@@ -233,10 +171,6 @@
   "account.settings.github.callback_invalid_state": "Ungültiger Sicherheitstoken. Bitte versuche es erneut.",
   "account.settings.github.callback_missing_params": "Ungültige Callback-URL.",
   "account.settings.actions.back": "Zurück",
-  "account.settings.avatar.change": "Bild ändern",
-  "account.settings.avatar.invalid_type": "Nur JPG, PNG und WebP erlaubt.",
-  "account.settings.avatar.too_large": "Datei zu groß (max. 5 MB).",
-  "account.settings.avatar.upload_failed": "Upload fehlgeschlagen.",
   "account.settings.twofa.title": "Zwei-Faktor-Authentifizierung (2FA)",
   "account.settings.twofa.status_enabled": "2FA ist aktiviert.",
   "account.settings.twofa.status_disabled": "2FA ist deaktiviert.",
@@ -288,16 +222,11 @@
   "badge.desc.waitlister": "Hat sich für zukünftige NexoryDev-Services auf der Warteliste eingetragen.",
   "badge.desc.nexory_contributor": "Hat aktiv zu einem Projekt der NexoryDev-Organisation beigetragen.",
   "badge.desc.verified_dev": "Verifiziertes Entwicklerkonto mit vollständigem Profil.",
-  "profile.dropdown.my_profile": "Mein Profil",
-  "profile.dropdown.products": "Produkte",
-  "profile.dropdown.settings": "Einstellungen",
-  "profile.dropdown.logout": "Abmelden",
-  "profile.dropdown.aria_label": "Benutzermenü",
   "badge.close": "Schließen",
 
-  "account.me.badges_loading": "Badges werden geladen\u2026",
+  "account.me.badges_loading": "Badges werden geladen…",
   "account.me.badges_empty": "Noch keine Badges verdient.",
-  "account.me.public_profile": "öffentliches Profil \u2192",
+  "account.me.public_profile": "öffentliches Profil →",
   "account.me.profile_details": "Profil",
   "account.me.avatar_change": "Avatar andern",
   "account.me.avatar_invalid": "Bitte wahle ein gültiges Bild aus.",
@@ -311,44 +240,25 @@
   "account.me.avatar_error.no_file": "Bitte wähle eine Datei aus.",
   "account.me.avatar_error.upload_failed": "Avatar konnte nicht hochgeladen werden.",
   "account.me.bio_label": "Bio",
-  "account.me.bio_placeholder": "Erzähl kurz etwas über dich\u2026",
+  "account.me.bio_placeholder": "Erzähl kurz etwas über dich…",
   "account.me.location_label": "Standort",
-  "account.me.location_select": "Standort auswählen",
-  "account.me.location_placeholder": "z. B. Berlin, Deutschland",
-  "account.me.timezone_label": "Zeitzone",
-  "account.me.timezone_placeholder": "z. B. Europe/Berlin",
-  "account.me.github_status_label": "Mit GitHub verbunden",
-  "account.me.github_connected_as": "Verbunden als {login}",
-  "account.me.github_not_connected": "Nicht verbunden",
   "account.me.save_profile": "Speichern",
   "account.me.saving_profile": "Speichern",
   "account.me.profile_saved": "Profil wurde gespeichert.",
   "account.me.profile_save_failed": "Profil konnte nicht gespeichert werden.",
 
-  "profile.loading": "Profil wird geladen\u2026",
+  "profile.loading": "Profil wird geladen…",
   "profile.not_found": "Dieses Profil existiert nicht.",
   "profile.back": "Zurück",
   "profile.member_since": "Mitglied seit",
   "profile.section.about": "Profil",
-  "profile.bio_label": "Bio",
-  "profile.bio_empty": "Keine Bio hinterlegt.",
-  "profile.location_label": "Standort",
-  "profile.location_option_berlin": "Berlin, Deutschland",
-  "profile.location_option_hamburg": "Hamburg, Deutschland",
-  "profile.location_option_zurich": "Zürich, Schweiz",
-  "profile.location_option_vienna": "Wien, Österreich",
-  "profile.location_option_london": "London, Vereinigtes Königreich",
-  "profile.location_option_new_york": "New York, USA",
-  "profile.location_option_los_angeles": "Los Angeles, USA",
-  "profile.location_option_tokyo": "Tokio, Japan",
-  "profile.location_empty": "Kein Standort angegeben.",
-  "profile.time_label": "Zeit",
-  "profile.time_empty": "Keine Zeitzone angegeben.",
-  "profile.github_label": "GitHub",
-  "profile.github_connected_as": "Verbunden als {login}",
-  "profile.github_not_connected": "Nicht verbunden",
   "profile.section.badges": "Badges",
   "profile.badges_empty": "Noch keine Badges verdient.",
   "profile.copy_link": "Profil-Link teilen",
-  "profile.link_copied": "Link kopiert"
+  "profile.link_copied": "Link kopiert",
+  "profile.dropdown.my_profile": "Mein Profil",
+  "profile.dropdown.products": "Produkte",
+  "profile.dropdown.settings": "Einstellungen",
+  "profile.dropdown.logout": "Abmelden",
+  "profile.dropdown.aria_label": "Benutzermenü"
 }
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index d36cacb..b04f1be 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -6,7 +6,7 @@
   "nav.imprint": "Imprint",
   "nav.language_switcher": "Language Switcher",
   "nav.login": "Login",
-
+  
   "footer.nav_section_title": "Legal",
   "footer.tagline": "Open source projects · Python, JavaScript, React and more",
   "footer.nav_heading": "Navigation",
@@ -15,62 +15,12 @@
   "home.hero.kicker": "DIGITAL SOLUTIONS",
   "home.hero.title_1": "Digital solutions,",
   "home.hero.title_2": "that inspire.",
-  "home.hero.title_3": "with a premium brand feel and clean execution.",
   "home.hero.description": "We develop Discord Bots, web applications and mobile apps – modern, high-performance and custom-tailored.",
   "home.hero.cta.primary": "Start project",
   "home.hero.cta.secondary": "Contact us",
   "home.hero.scroll_hint": "Scroll to discover",
-
-  "home.services.discord.title": "Discord Bots",
-  "home.services.discord.desc": "Automation, moderation and community tools.",
-  "home.services.web.title": "Web Development",
-  "home.services.web.desc": "Websites & web apps with state-of-the-art technologies.",
-  "home.services.app.title": "App Development",
-  "home.services.app.desc": "Mobile apps for iOS & Android – fast and intuitive.",
-  "home.services.individual.title": "Individual Solutions",
-  "home.services.individual.desc": "Custom-tailored software for your project.",
-
-  "home.about.kicker": "About Nexory",
   "home.about.title": "Technology. Creativity. Passion.",
   "home.about.desc": "We combine modern design with clean code to build digital products that truly make a difference.",
-  "home.stats.clients.num": "50+",
-  "home.stats.clients.label": "Happy Clients",
-  "home.stats.projects.num": "100+",
-  "home.stats.projects.label": "Projects Completed",
-  "home.stats.experience.num": "2+",
-  "home.stats.experience.label": "Years Experience",
-  "home.stats.passion.num": "∞",
-  "home.stats.passion.label": "Passion",
-
-  "home.features.modern.title": "Modern",
-  "home.features.modern.desc": "Latest technologies",
-  "home.features.reliable.title": "Reliable",
-  "home.features.reliable.desc": "Stable & high performance",
-  "home.features.individual.title": "Customized",
-  "home.features.individual.desc": "Tailored solutions",
-  "home.features.creative.title": "Creative",
-  "home.features.creative.desc": "Design that inspires",
-
-  "home.discord_bots.title": "Discord Bots",
-  "home.discord_bots.description": "Custom bots for communities, moderation, ticketing, economy, and AI features.",
-  "home.discord_bots.item1": "Fast automations",
-  "home.discord_bots.item2": "Reliable moderation",
-  "home.discord_bots.item3": "Community tools and insights",
-  "home.web_development.title": "Web Development",
-  "home.web_development.description": "Modern sites and applications with a clean architecture, strong performance, and great UX.",
-  "home.web_development.item1": "Fast loading times",
-  "home.web_development.item2": "Clean frontend architecture",
-  "home.web_development.item3": "SEO and scalable APIs",
-  "home.mobile_apps.title": "App Development",
-  "home.mobile_apps.description": "Flutter, React, or native apps for iOS and Android with a strong product focus.",
-  "home.mobile_apps.item1": "Native performance",
-  "home.mobile_apps.item2": "Secure auth and data",
-  "home.mobile_apps.item3": "Intuitive user flows",
-  "home.individual_solutions.title": "Individual Solutions",
-  "home.individual_solutions.description": "Tailored software for your vision – from first idea to live product.",
-  "home.individual_solutions.item1": "Custom system architecture",
-  "home.individual_solutions.item2": "Scalable integrations",
-  "home.individual_solutions.item3": "Continuous refinement",
   "home.section.discord.title": "Discord Bots",
   "home.section.discord.desc": "Custom bots for communities. Moderation, tickets, economy, AI and much more.",
   "home.section.web.title": "Web Development",
@@ -80,7 +30,6 @@
   "home.section.individual.title": "Individual Solutions",
   "home.section.individual.desc": "Your idea. Our implementation. We build what you need. Tailored for you.",
   "home.section.learn_more": "Learn more",
-
   "home.cta.title": "Your Idea. Engineered.",
   "home.cta.button": "Start project",
 
@@ -105,13 +54,8 @@
 
   "github.stars": "Stars",
   "github.forks": "Forks",
-  "github.issues": "Issues",
-  "github.updated": "Last Updated",
-  "github.repo_lang": "Primary Language",
-  "github.desc": "Description",
   "github.loading": "Loading repositories...",
   "github.error": "Failed to load data. Please try again later.",
-  "github.stats_header": "Stats",
   "github.repos_header": "Repositories",
   "github.visit_org": "View on GitHub →",
   "github.members_header": "Members",
@@ -131,7 +75,6 @@
   "github.time_years": "{count} years",
   "github.active_ago": "active {time} ago",
   "github.active_unknown": "last active unknown",
-  "github.filters_all": "All",
   "github.page_sub": "Our open-source projects on GitHub.",
   "github.projects_soon": "More projects coming soon.",
 
@@ -152,7 +95,6 @@
   "login.login_btn": "Already registered?",
   "login.register_btn": "Don't have an account yet?",
   "login.login_failed": "Login failed",
-  "login.invalid_email": "Invalid email address",
   "login.invalid_password": "Password must be at least 8 characters",
   "login.email_exists": "An account with this email already exists",
   "login.remember_me": "Stay logged in",
@@ -160,8 +102,6 @@
   "login.email_not_verified": "Email not verified yet",
   "login.check_email": "Check your inbox and click the confirmation link",
   "login.register_failed": "Registration failed",
-  "login.verify_failed": "Verification failed or link expired",
-  "login.verified": "Email verified successfully",
   "login.forgot_password_header": "Reset password",
   "login.forgot_password": "Forgot password?",
   "login.send_reset": "Send reset link",
@@ -179,7 +119,6 @@
   "account.sidebar.products": "Products",
   "account.sidebar.settings": "Settings",
   "account.me.badges": "Badges",
-  "account.me.achievements": "Achievements",
   "account.products.portfolio.name": "Portfolio",
   "account.products.portfolio.desc": "Personal site",
   "account.products.api.name": "API",
@@ -224,7 +163,6 @@
   "account.settings.github.disconnected": "GitHub connection removed.",
   "account.settings.github.not_configured": "GitHub OAuth is not configured yet.",
   "account.settings.github.already_linked": "This GitHub account is already linked to another NexoryDev account.",
-  "account.settings.github.sync_badges": "Sync badges",
   "account.settings.github.sync_new": "{count} new badge(s) unlocked!",
   "account.settings.github.sync_none": "No new badges found.",
   "account.settings.github.sync_failed": "Badge sync failed.",
@@ -234,10 +172,6 @@
   "account.settings.github.callback_invalid_state": "Invalid security token. Please try again.",
   "account.settings.github.callback_missing_params": "Invalid callback URL.",
   "account.settings.actions.back": "Back",
-  "account.settings.avatar.change": "Change picture",
-  "account.settings.avatar.invalid_type": "Only JPG, PNG and WebP are allowed.",
-  "account.settings.avatar.too_large": "File too large (max. 5 MB).",
-  "account.settings.avatar.upload_failed": "Upload failed.",
   "account.settings.twofa.title": "Two-factor authentication (2FA)",
   "account.settings.twofa.status_enabled": "2FA is enabled.",
   "account.settings.twofa.status_disabled": "2FA is disabled.",
@@ -288,16 +222,11 @@
   "badge.desc.day_one_supporter": "Was there from the very beginning – one of the first NexoryDev users.",
   "badge.desc.nexory_contributor": "Actively contributed to a project in the NexoryDev organisation.",
   "badge.desc.verified_dev": "Verified developer account with a complete profile.",
-  "profile.dropdown.my_profile": "My Profile",
-  "profile.dropdown.products": "Products",
-  "profile.dropdown.settings": "Settings",
-  "profile.dropdown.logout": "Log out",
-  "profile.dropdown.aria_label": "User menu",
   "badge.close": "Close",
 
-  "account.me.badges_loading": "Loading badges\u2026",
+  "account.me.badges_loading": "Loading badges…",
   "account.me.badges_empty": "No badges earned yet.",
-  "account.me.public_profile": "Public profile \u2192",
+  "account.me.public_profile": "Public profile →",
   "account.me.profile_details": "Profile",
   "account.me.avatar_change": "Change avatar",
   "account.me.avatar_invalid": "Please select a valid image file.",
@@ -311,52 +240,25 @@
   "account.me.avatar_error.no_file": "Please select a file.",
   "account.me.avatar_error.upload_failed": "Could not upload the avatar.",
   "account.me.bio_label": "Bio",
-  "account.me.bio_placeholder": "Tell people a little about yourself\u2026",
+  "account.me.bio_placeholder": "Tell people a little about yourself…",
   "account.me.location_label": "Location",
-  "account.me.location_select": "Select location",
-  "account.me.location_option_berlin": "Berlin, Germany",
-  "account.me.location_option_hamburg": "Hamburg, Germany",
-  "account.me.location_option_zurich": "Zurich, Switzerland",
-  "account.me.location_option_vienna": "Vienna, Austria",
-  "account.me.location_option_london": "London, United Kingdom",
-  "account.me.location_option_new_york": "New York, USA",
-  "account.me.location_option_los_angeles": "Los Angeles, USA",
-  "account.me.location_option_tokyo": "Tokyo, Japan",
-  "account.me.location_placeholder": "e.g. Berlin, Germany",
-  "account.me.timezone_label": "Timezone",
-  "account.me.timezone_placeholder": "e.g. Europe/Berlin",
-  "account.me.github_status_label": "Connected with GitHub",
-  "account.me.github_connected_as": "Connected as {login}",
-  "account.me.github_not_connected": "Not connected",
   "account.me.save_profile": "Save",
-  "account.me.saving_profile": "Saving\u2026",
+  "account.me.saving_profile": "Saving…",
   "account.me.profile_saved": "Profile saved.",
   "account.me.profile_save_failed": "Could not save profile.",
 
-  "profile.loading": "Loading profile\u2026",
+  "profile.loading": "Loading profile…",
   "profile.not_found": "This profile does not exist.",
   "profile.back": "Back",
   "profile.member_since": "Member since",
   "profile.section.about": "Profile",
-  "profile.bio_label": "Bio",
-  "profile.bio_empty": "No bio yet.",
-  "profile.location_label": "Location",
-  "profile.location_option_berlin": "Berlin, Germany",
-  "profile.location_option_hamburg": "Hamburg, Germany",
-  "profile.location_option_zurich": "Zurich, Switzerland",
-  "profile.location_option_vienna": "Vienna, Austria",
-  "profile.location_option_london": "London, United Kingdom",
-  "profile.location_option_new_york": "New York, USA",
-  "profile.location_option_los_angeles": "Los Angeles, USA",
-  "profile.location_option_tokyo": "Tokyo, Japan",
-  "profile.location_empty": "No location set.",
-  "profile.time_label": "Time",
-  "profile.time_empty": "No timezone set.",
-  "profile.github_label": "GitHub",
-  "profile.github_connected_as": "Connected as {login}",
-  "profile.github_not_connected": "Not connected",
   "profile.section.badges": "Badges",
   "profile.badges_empty": "No badges earned yet.",
   "profile.copy_link": "Share profile link",
-  "profile.link_copied": "Link copied"
+  "profile.link_copied": "Link copied",
+    "profile.dropdown.my_profile": "My Profile",
+  "profile.dropdown.products": "Products",
+  "profile.dropdown.settings": "Settings",
+  "profile.dropdown.logout": "Log out",
+  "profile.dropdown.aria_label": "User menu"
 }
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index c5221dd..69e7f29 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,16 +1,16 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { Points, PointMaterial } from "@react-three/drei";
-import { EffectComposer, Bloom } from "@react-three/postprocessing";
+import { Points, PointMaterial, Environment, RoundedBox } from "@react-three/drei";
 import { motion, useReducedMotion } from "framer-motion";
 import * as THREE from "three";
 import { ArrowRight, Mouse, MessageSquare, Code2, Smartphone, Users } from "lucide-react";
 import { useLanguage } from "../context/LanguageContext";
 import "../styles/Home.css";
 
-const BG = "#040d1e";
+const BG = "#020409";
 const fadeEase = [0.16, 1, 0.3, 1];
+const SECTION_IDS = ["hero", "discord", "web", "mobile", "individual", "cta"];
 
 function rrect(ctx, x, y, w, h, r) {
   ctx.beginPath();
@@ -26,101 +26,124 @@ function rrect(ctx, x, y, w, h, r) {
   ctx.closePath();
 }
 
-function createNTexture() {
-  const cv = document.createElement("canvas");
-  cv.width = 512; cv.height = 512;
-  const c = cv.getContext("2d");
-  c.fillStyle = "#050e28";
-  c.fillRect(0, 0, 512, 512);
-  const bg = c.createRadialGradient(256, 256, 20, 256, 256, 240);
-  bg.addColorStop(0, "rgba(80, 60, 220, 0.28)");
-  bg.addColorStop(1, "rgba(5, 14, 40, 0)");
-  c.fillStyle = bg;
-  c.fillRect(0, 0, 512, 512);
-  const g = c.createLinearGradient(108, 88, 408, 428);
-  g.addColorStop(0, "#60c8ff");
-  g.addColorStop(0.38, "#c084fc");
-  g.addColorStop(0.72, "#8060ff");
-  g.addColorStop(1, "#f0eeff");
-  c.shadowBlur = 56;
-  c.shadowColor = "#8060ff";
-  c.strokeStyle = g;
-  c.lineWidth = 68;
-  c.lineCap = "round";
-  c.lineJoin = "round";
-  c.beginPath();
-  c.moveTo(138, 380); c.lineTo(138, 128);
-  c.lineTo(374, 380); c.lineTo(374, 128);
-  c.stroke();
-  c.shadowBlur = 70;
-  c.shadowColor = "rgba(200,200,255,0.4)";
-  c.strokeStyle = "rgba(255,255,255,0.22)";
-  c.lineWidth = 8;
-  c.beginPath();
-  c.moveTo(158, 148); c.lineTo(354, 360);
-  c.stroke();
-  const t = new THREE.CanvasTexture(cv);
-  t.anisotropy = 8;
-  return t;
+function fitText(ctx, text, maxWidth, startSize, minSize) {
+  let size = startSize;
+  ctx.font = `800 ${size}px 'Outfit','Inter',sans-serif`;
+
+  while (ctx.measureText(text).width > maxWidth && size > minSize) {
+    size -= 2;
+    ctx.font = `800 ${size}px 'Outfit','Inter',sans-serif`;
+  }
+
+  return size;
 }
 
 function drawFace(label, iconFn, color) {
   const cv = document.createElement("canvas");
-  cv.width = 512; cv.height = 512;
+  cv.width = 1024;
+  cv.height = 1024;
+
   const c = cv.getContext("2d");
-  c.fillStyle = "#050e28"; c.fillRect(0, 0, 512, 512);
-  const bg = c.createRadialGradient(256, 196, 16, 256, 196, 210);
-  bg.addColorStop(0, color + "2a"); bg.addColorStop(1, "rgba(5,14,40,0)");
-  c.fillStyle = bg; c.fillRect(0, 0, 512, 512);
-  const SZ = 152, CY = 200;
+  c.clearRect(0, 0, 1024, 1024);
+
+  const iconSize = 335;
+  const iconCenterY = 365;
+
   c.save();
-  c.translate(256 - SZ / 2, CY - SZ / 2);
-  c.scale(SZ / 24, SZ / 24);
-  c.strokeStyle = color; c.fillStyle = color; c.lineWidth = 1.7;
-  c.lineCap = "round"; c.lineJoin = "round";
-  c.shadowBlur = 6; c.shadowColor = color;
+  c.translate(512 - iconSize / 2, iconCenterY - iconSize / 2);
+  c.scale(iconSize / 24, iconSize / 24);
+  c.strokeStyle = color;
+  c.fillStyle = color;
+  c.lineWidth = 1.9;
+  c.lineCap = "round";
+  c.lineJoin = "round";
+  c.shadowBlur = 16;
+  c.shadowColor = color;
   iconFn(c);
   c.restore();
-  c.shadowBlur = 0; c.strokeStyle = color + "3e"; c.lineWidth = 1.5;
-  c.beginPath(); c.moveTo(144, 325); c.lineTo(368, 325); c.stroke();
-  c.fillStyle = "rgba(255,255,255,0.9)";
-  c.font = "bold 50px 'Outfit','Inter',sans-serif";
-  c.textAlign = "center"; c.shadowBlur = 24; c.shadowColor = color;
-  c.fillText(label, 256, 392);
-  const t = new THREE.CanvasTexture(cv);
-  t.anisotropy = 8;
-  return t;
+
+  c.shadowBlur = 0;
+  c.strokeStyle = `${color}55`;
+  c.lineWidth = 3;
+  c.beginPath();
+  c.moveTo(260, 635);
+  c.lineTo(764, 635);
+  c.stroke();
+
+  c.fillStyle = color;
+  c.textAlign = "center";
+  c.textBaseline = "middle";
+  c.shadowBlur = 22;
+  c.shadowColor = color;
+  fitText(c, label, 780, 84, 48);
+  c.fillText(label, 512, 760);
+
+  const texture = new THREE.CanvasTexture(cv);
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  texture.colorSpace = THREE.SRGBColorSpace;
+
+  return texture;
 }
 
 const ICONS = {
   discord: (c) => {
     c.beginPath();
-    c.moveTo(5.5, 10.0);
-    c.bezierCurveTo(4.8, 7.0, 6.8, 4.5, 9.2, 4.5);
+    c.moveTo(5.5, 10);
+    c.bezierCurveTo(4.8, 7, 6.8, 4.5, 9.2, 4.5);
     c.lineTo(14.8, 4.5);
-    c.bezierCurveTo(17.2, 4.5, 19.2, 7.0, 18.5, 10.0);
+    c.bezierCurveTo(17.2, 4.5, 19.2, 7, 18.5, 10);
     c.lineTo(18.2, 15.5);
-    c.bezierCurveTo(17.8, 18.2, 16.0, 19.5, 14.2, 19.5);
-    c.lineTo(13.0, 21.2); c.lineTo(12.0, 19.5); c.lineTo(9.8, 19.5);
-    c.bezierCurveTo(8.0, 19.5, 6.2, 18.2, 5.8, 15.5);
-    c.closePath(); c.stroke();
-    c.beginPath(); c.arc(9.2, 12.5, 1.9, 0, Math.PI * 2); c.fill();
-    c.beginPath(); c.arc(14.8, 12.5, 1.9, 0, Math.PI * 2); c.fill();
-    c.beginPath(); c.moveTo(9.5, 16.2); c.quadraticCurveTo(12, 18.0, 14.5, 16.2); c.stroke();
+    c.bezierCurveTo(17.8, 18.2, 16, 19.5, 14.2, 19.5);
+    c.lineTo(13, 21.2);
+    c.lineTo(12, 19.5);
+    c.lineTo(9.8, 19.5);
+    c.bezierCurveTo(8, 19.5, 6.2, 18.2, 5.8, 15.5);
+    c.closePath();
+    c.stroke();
+    c.beginPath();
+    c.arc(9.2, 12.5, 1.9, 0, Math.PI * 2);
+    c.fill();
+    c.beginPath();
+    c.arc(14.8, 12.5, 1.9, 0, Math.PI * 2);
+    c.fill();
+    c.beginPath();
+    c.moveTo(9.5, 16.2);
+    c.quadraticCurveTo(12, 18, 14.5, 16.2);
+    c.stroke();
   },
   web: (c) => {
     c.lineWidth = 2.1;
-    c.beginPath(); c.moveTo(8, 6.5); c.lineTo(2.5, 12); c.lineTo(8, 17.5); c.stroke();
-    c.beginPath(); c.moveTo(14.5, 4.5); c.lineTo(9.5, 19.5); c.stroke();
-    c.beginPath(); c.moveTo(16, 6.5); c.lineTo(21.5, 12); c.lineTo(16, 17.5); c.stroke();
+    c.beginPath();
+    c.moveTo(8, 6.5);
+    c.lineTo(2.5, 12);
+    c.lineTo(8, 17.5);
+    c.stroke();
+    c.beginPath();
+    c.moveTo(14.5, 4.5);
+    c.lineTo(9.5, 19.5);
+    c.stroke();
+    c.beginPath();
+    c.moveTo(16, 6.5);
+    c.lineTo(21.5, 12);
+    c.lineTo(16, 17.5);
+    c.stroke();
   },
   app: (c) => {
-    rrect(c, 6.5, 1.5, 11, 21, 2.2); c.stroke();
-    c.beginPath(); c.moveTo(10, 20); c.lineTo(14, 20); c.stroke();
-    c.beginPath(); c.arc(12, 4.2, 1.0, 0, Math.PI * 2); c.fill();
+    rrect(c, 6.5, 1.5, 11, 21, 2.2);
+    c.stroke();
+    c.beginPath();
+    c.moveTo(10, 20);
+    c.lineTo(14, 20);
+    c.stroke();
+    c.beginPath();
+    c.arc(12, 4.2, 1, 0, Math.PI * 2);
+    c.fill();
   },
   individual: (c) => {
-    c.beginPath(); c.arc(12, 7.5, 3.8, 0, Math.PI * 2); c.stroke();
+    c.beginPath();
+    c.arc(12, 7.5, 3.8, 0, Math.PI * 2);
+    c.stroke();
     c.beginPath();
     c.moveTo(3.5, 22);
     c.bezierCurveTo(3.5, 16.5, 7.2, 13.5, 12, 13.5);
@@ -129,91 +152,29 @@ const ICONS = {
   },
 };
 
-function buildMaterials(tex) {
-  function fm(t) {
-    return new THREE.MeshBasicMaterial({ map: t, transparent: true, opacity: 1 });
-  }
-  return [
-    fm(tex.web),        
-    fm(tex.individual), 
-    fm(tex.n),          
-    fm(tex.n),          
-    fm(tex.discord),    
-    fm(tex.app),        
-  ];
-}
-
-const FACE_ROT_Y = [0, 0, -Math.PI / 2, Math.PI, Math.PI / 2, 0];
-const FACE_ROT_X = [-0.28, -0.12, -0.12, -0.12, -0.12, -0.30];
-
-const CAM_POS = [
-  new THREE.Vector3(0.6, 0.45, 7.8),   
-  new THREE.Vector3(0.6, 0.28, 6.8),   
-  new THREE.Vector3(0.6, 0.28, 6.8),   
-  new THREE.Vector3(0.6, 0.28, 6.8),   
-  new THREE.Vector3(0.6, 0.28, 6.8),   
-  new THREE.Vector3(1.0, 0.45, 7.8),   
-];
-
-const CAM_LOOK = [
-  new THREE.Vector3(1.2, 0.0, 0),   
-  new THREE.Vector3(1.8, 0.0, 0),   
-  new THREE.Vector3(0.4, 0.0, 0),   
-  new THREE.Vector3(1.8, 0.0, 0),   
-  new THREE.Vector3(0.4, 0.0, 0),   
-  new THREE.Vector3(1.0, 0.0, 0),   
-];
-
-const CUBE_POS = [
-  new THREE.Vector3(3.2, 0, 0),   
-  new THREE.Vector3(3.2, 0, 0),   
-  new THREE.Vector3(-1.5, 0, 0),  
-  new THREE.Vector3(3.2, 0, 0),   
-  new THREE.Vector3(-1.5, 0, 0),  
-  new THREE.Vector3(1.0, 0, 0),   
-];
-
-const CAM_POS_M = [
-  new THREE.Vector3(0.3, 0.3, 7.2),
-  new THREE.Vector3(0.3, 0.3, 7.0),
-  new THREE.Vector3(0.3, 0.3, 7.0),
-  new THREE.Vector3(0.3, 0.3, 7.0),
-  new THREE.Vector3(0.3, 0.3, 7.0),
-  new THREE.Vector3(0.3, 0.3, 7.4),
-];
-const CUBE_POS_M = Array(6).fill(new THREE.Vector3(0.3, 0, 0));
-const CAM_LOOK_M = Array(6).fill(new THREE.Vector3(0.3, 0, 0));
-
-function easeInOut(t) { return t * t * (3 - 2 * t); }
-
-function lerpSections(arr, p) {
-  const seg = Math.min(Math.floor(p * (arr.length - 1)), arr.length - 2);
-  const loc = p * (arr.length - 1) - seg;
-  return arr[seg].clone().lerp(arr[seg + 1], easeInOut(loc));
-}
-function lerpNum(arr, p) {
-  const seg = Math.min(Math.floor(p * (arr.length - 1)), arr.length - 2);
-  const loc = p * (arr.length - 1) - seg;
-  return arr[seg] + (arr[seg + 1] - arr[seg]) * easeInOut(loc);
-}
-
 function Particles({ count, progressRef }) {
   const ref = useRef();
+
   const pos = useMemo(() => {
-    const d = new Float32Array(count * 3);
-    for (let i = 0; i < count; i++) {
-      d[i * 3]     = (Math.random() - 0.5) * 22;
-      d[i * 3 + 1] = (Math.random() - 0.5) * 12;
-      d[i * 3 + 2] = (Math.random() - 0.5) * 14;
+    const data = new Float32Array(count * 3);
+
+    for (let i = 0; i < count; i += 1) {
+      data[i * 3] = (Math.random() - 0.5) * 22;
+      data[i * 3 + 1] = (Math.random() - 0.5) * 12;
+      data[i * 3 + 2] = (Math.random() - 0.5) * 14;
     }
-    return d;
+
+    return data;
   }, [count]);
-  useFrame((s) => {
+
+  useFrame((state) => {
     if (!ref.current) return;
-    const t = s.clock.elapsedTime;
-    ref.current.rotation.y = t * 0.005 + progressRef.current * 0.1;
-    ref.current.position.y = Math.sin(t * 0.08) * 0.05;
+
+    const time = state.clock.elapsedTime;
+    ref.current.rotation.y = time * 0.005 + progressRef.current * 0.1;
+    ref.current.position.y = Math.sin(time * 0.08) * 0.05;
   });
+
   return (
     <Points ref={ref} positions={pos} stride={3} frustumCulled={false}>
       <PointMaterial transparent depthWrite={false} color="#8090d8" opacity={0.14} size={0.014} sizeAttenuation />
@@ -222,33 +183,43 @@ function Particles({ count, progressRef }) {
 }
 
 function AccentCubes({ mobile }) {
-  const grp = useRef();
+  const groupRef = useRef();
+
   const cubes = useMemo(() => {
-    const n = mobile ? 3 : 5;
-    return Array.from({ length: n }).map((_, i) => ({
-      pos: [(Math.random() - 0.5) * 12 + (i % 2 ? 2.5 : -2.5), (Math.random() - 0.5) * 6, -4 - Math.random() * 5],
-      sc: 0.04 + Math.random() * 0.07,
-      ph: Math.random() * Math.PI * 2,
+    const amount = mobile ? 3 : 5;
+
+    return Array.from({ length: amount }).map((_, index) => ({
+      pos: [
+        (Math.random() - 0.5) * 12 + (index % 2 ? 2.5 : -2.5),
+        (Math.random() - 0.5) * 6,
+        -4 - Math.random() * 5,
+      ],
+      scale: 0.04 + Math.random() * 0.07,
+      phase: Math.random() * Math.PI * 2,
     }));
   }, [mobile]);
-  useFrame((s) => {
-    if (!grp.current) return;
-    const t = s.clock.elapsedTime;
-    grp.current.children.forEach((ch, i) => {
-      ch.position.y = cubes[i].pos[1] + Math.sin(t * 0.3 + cubes[i].ph) * 0.12;
-      ch.rotation.x = t * 0.035 + cubes[i].ph;
-      ch.rotation.y = t * 0.048 + cubes[i].ph;
+
+  useFrame((state) => {
+    if (!groupRef.current) return;
+
+    const time = state.clock.elapsedTime;
+
+    groupRef.current.children.forEach((child, index) => {
+      child.position.y = cubes[index].pos[1] + Math.sin(time * 0.3 + cubes[index].phase) * 0.12;
+      child.rotation.x = time * 0.035 + cubes[index].phase;
+      child.rotation.y = time * 0.048 + cubes[index].phase;
     });
   });
+
   return (
-    <group ref={grp}>
-      {cubes.map((cu, i) => (
-        <mesh key={i} position={cu.pos} scale={cu.sc}>
+    <group ref={groupRef}>
+      {cubes.map((cube, index) => (
+        <mesh key={index} position={cube.pos} scale={cube.scale}>
           <boxGeometry args={[1, 1, 1]} />
-          <meshBasicMaterial color={i % 2 ? "#0a1a40" : "#0c1a38"} />
+          <meshBasicMaterial color={index % 2 ? "#0a1a40" : "#0c1a38"} />
           <lineSegments>
             <edgesGeometry args={[new THREE.BoxGeometry(1, 1, 1)]} />
-            <lineBasicMaterial color={i % 3 === 0 ? "#3060e0" : i % 3 === 1 ? "#6040e0" : "#30a0e0"} transparent opacity={0.45} />
+            <lineBasicMaterial color={index % 3 === 0 ? "#3060e0" : index % 3 === 1 ? "#6040e0" : "#30a0e0"} transparent opacity={0.45} />
           </lineSegments>
         </mesh>
       ))}
@@ -257,25 +228,46 @@ function AccentCubes({ mobile }) {
 }
 
 function Grid() {
-  const mat = useMemo(() => {
+  const material = useMemo(() => {
     const cv = document.createElement("canvas");
-    cv.width = 1024; cv.height = 1024;
+    cv.width = 1024;
+    cv.height = 1024;
+
     const c = cv.getContext("2d");
     c.clearRect(0, 0, 1024, 1024);
-    const N = 16, step = 1024 / N;
-    for (let i = 0; i <= N; i++) {
-      const a = 0.38 - (i / N) * 0.06;
-      c.strokeStyle = `rgba(16,42,100,${a})`; c.lineWidth = 1;
-      c.beginPath(); c.moveTo(i * step, 0); c.lineTo(i * step, 1024); c.stroke();
-      c.beginPath(); c.moveTo(0, i * step); c.lineTo(1024, i * step); c.stroke();
+
+    const amount = 16;
+    const step = 1024 / amount;
+
+    for (let i = 0; i <= amount; i += 1) {
+      const alpha = 0.38 - (i / amount) * 0.06;
+      c.strokeStyle = `rgba(16,42,100,${alpha})`;
+      c.lineWidth = 1;
+      c.beginPath();
+      c.moveTo(i * step, 0);
+      c.lineTo(i * step, 1024);
+      c.stroke();
+      c.beginPath();
+      c.moveTo(0, i * step);
+      c.lineTo(1024, i * step);
+      c.stroke();
     }
-    const tex = new THREE.CanvasTexture(cv);
-    tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
-    tex.repeat.set(2.5, 2.5);
-    return new THREE.MeshBasicMaterial({ map: tex, transparent: true, opacity: 0.3, depthWrite: false });
+
+    const texture = new THREE.CanvasTexture(cv);
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(2.5, 2.5);
+
+    return new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      opacity: 0.3,
+      depthWrite: false,
+    });
   }, []);
+
   return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0.8, -2.4, -3]} material={mat}>
+    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0.8, -2.4, -3]} material={material}>
       <planeGeometry args={[36, 28]} />
     </mesh>
   );
@@ -285,78 +277,103 @@ function NDissolveOverlay({ visible }) {
   const cvRef = useRef();
   const rafRef = useRef(null);
   const startRef = useRef(null);
-  const DURATION = 1800;
 
   useEffect(() => {
     const cv = cvRef.current;
-    if (!cv) return;
+    if (!cv) return undefined;
+
     if (!visible) {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       startRef.current = null;
       const ctx = cv.getContext("2d");
       ctx.clearRect(0, 0, cv.width, cv.height);
-      return;
+      return undefined;
     }
+
     function resize() {
-      cv.width = cv.offsetWidth * (window.devicePixelRatio || 1);
-      cv.height = cv.offsetHeight * (window.devicePixelRatio || 1);
+      const ratio = window.devicePixelRatio || 1;
+      cv.width = cv.offsetWidth * ratio;
+      cv.height = cv.offsetHeight * ratio;
     }
-    resize();
-    function render(ts) {
-      if (!startRef.current) startRef.current = ts;
-      const raw = Math.min((ts - startRef.current) / DURATION, 1);
+
+    function render(timestamp) {
+      if (!startRef.current) startRef.current = timestamp;
+
+      const raw = Math.min((timestamp - startRef.current) / 1800, 1);
       const alpha = raw < 0.5 ? 4 * raw * raw * raw : 1 - Math.pow(-2 * raw + 2, 3) / 2;
       const ctx = cv.getContext("2d");
-      const W = cv.width, H = cv.height;
-      ctx.clearRect(0, 0, W, H);
-      const cx = W / 2, cy = H / 2;
-      const s = Math.min(W, H) * 0.28;
-      const halo = ctx.createRadialGradient(cx, cy, s * 0.1, cx, cy, s * 1.1);
+      const width = cv.width;
+      const height = cv.height;
+      const cx = width / 2;
+      const cy = height / 2;
+      const size = Math.min(width, height) * 0.28;
+      const lineWidth = size * 0.11;
+      const x0 = cx - size * 0.28;
+      const x1 = cx + size * 0.28;
+      const y0 = cy - size * 0.42;
+      const y1 = cy + size * 0.42;
+      const maxAlpha = 0.35 * alpha;
+
+      ctx.clearRect(0, 0, width, height);
+
+      const halo = ctx.createRadialGradient(cx, cy, size * 0.1, cx, cy, size * 1.1);
       halo.addColorStop(0, `rgba(96, 80, 255, ${0.12 * alpha})`);
       halo.addColorStop(0.5, `rgba(80, 40, 200, ${0.05 * alpha})`);
-      halo.addColorStop(1, `rgba(4, 13, 30, 0)`);
+      halo.addColorStop(1, "rgba(4, 13, 30, 0)");
       ctx.fillStyle = halo;
-      ctx.fillRect(0, 0, W, H);
-      const lw = s * 0.11;
-      const x0 = cx - s * 0.28, x1 = cx + s * 0.28;
-      const y0 = cy - s * 0.42, y1 = cy + s * 0.42;
-      const maxAlpha = 0.35 * alpha;
-      const grad = ctx.createLinearGradient(x0, y0, x1, y1);
-      grad.addColorStop(0,    `rgba(96, 200, 255, ${maxAlpha})`);
-      grad.addColorStop(0.38, `rgba(192, 132, 252, ${maxAlpha})`);
-      grad.addColorStop(0.72, `rgba(128, 96, 255, ${maxAlpha})`);
-      grad.addColorStop(1,    `rgba(240, 238, 255, ${maxAlpha})`);
+      ctx.fillRect(0, 0, width, height);
+
+      const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+      gradient.addColorStop(0, `rgba(96, 200, 255, ${maxAlpha})`);
+      gradient.addColorStop(0.38, `rgba(192, 132, 252, ${maxAlpha})`);
+      gradient.addColorStop(0.72, `rgba(128, 96, 255, ${maxAlpha})`);
+      gradient.addColorStop(1, `rgba(240, 238, 255, ${maxAlpha})`);
+
       ctx.shadowBlur = 24 * alpha;
       ctx.shadowColor = `rgba(128, 96, 255, ${maxAlpha})`;
-      ctx.strokeStyle = grad;
-      ctx.lineWidth = lw;
+      ctx.strokeStyle = gradient;
+      ctx.lineWidth = lineWidth;
       ctx.lineCap = "round";
       ctx.lineJoin = "round";
       ctx.beginPath();
-      ctx.moveTo(x0, y1); ctx.lineTo(x0, y0);
-      ctx.lineTo(x1, y1); ctx.lineTo(x1, y0);
+      ctx.moveTo(x0, y1);
+      ctx.lineTo(x0, y0);
+      ctx.lineTo(x1, y1);
+      ctx.lineTo(x1, y0);
       ctx.stroke();
+
       ctx.shadowBlur = 10 * alpha;
       ctx.shadowColor = `rgba(220, 210, 255, ${maxAlpha * 0.5})`;
       ctx.strokeStyle = `rgba(255, 255, 255, ${0.12 * alpha})`;
-      ctx.lineWidth = lw * 0.11;
+      ctx.lineWidth = lineWidth * 0.11;
       ctx.beginPath();
-      ctx.moveTo(x0 + lw * 0.55, y0 + lw * 0.85);
-      ctx.lineTo(x1 - lw * 0.55, y1 - lw * 0.85);
+      ctx.moveTo(x0 + lineWidth * 0.55, y0 + lineWidth * 0.85);
+      ctx.lineTo(x1 - lineWidth * 0.55, y1 - lineWidth * 0.85);
       ctx.stroke();
+
       if (raw < 1) rafRef.current = requestAnimationFrame(render);
     }
+
+    resize();
+    window.addEventListener("resize", resize);
     rafRef.current = requestAnimationFrame(render);
-    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
+
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      window.removeEventListener("resize", resize);
+    };
   }, [visible]);
 
   return (
     <canvas
       ref={cvRef}
       style={{
-        position: "absolute", inset: 0,
-        width: "100%", height: "100%",
-        pointerEvents: "none", zIndex: 2,
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 2,
         opacity: visible ? 1 : 0,
         transition: "opacity 0.5s ease",
       }}
@@ -364,145 +381,198 @@ function NDissolveOverlay({ visible }) {
   );
 }
 
-function Scene({ progressRef, pointerRef, reducedMotion, mobile }) {
-  const cubeRef = useRef();
-  const platRef = useRef();
-  const edgeRef = useRef();
-  const lookAt      = useRef(new THREE.Vector3(1.2, 0, 0));
-  const cubeTarget  = useRef(new THREE.Vector3(3.2, 0, 0));
-
-  const heroRotY      = useRef(0);
-  const wasHero       = useRef(true);
-
-  const materials = useMemo(() => {
-    const tex = {
-      n:          createNTexture(),
-      discord:    drawFace("Discord Bot", ICONS.discord,    "#5865f2"),
-      web:        drawFace("Web Dev",     ICONS.web,        "#0ea5e9"),
-      app:        drawFace("Mobile App",  ICONS.app,        "#ec4899"),
-      individual: drawFace("Individual",  ICONS.individual, "#a855f7"),
-    };
-    return buildMaterials(tex);
-  }, []);
+function CubeFace({ texture, position, rotation }) {
+  return (
+    <mesh position={position} rotation={rotation}>
+      <planeGeometry args={[2.06, 2.06]} />
+      <meshBasicMaterial
+        map={texture}
+        transparent
+        opacity={1}
+        depthWrite={false}
+        depthTest
+        toneMapped={false}
+        polygonOffset
+        polygonOffsetFactor={-4}
+        polygonOffsetUnits={-4}
+      />
+    </mesh>
+  );
+}
 
-  const edgesGeom = useMemo(() => new THREE.EdgesGeometry(new THREE.BoxGeometry(2.2, 2.2, 2.2)), []);
-  const pCount    = mobile ? 26 : 65;
-  const cpArr     = mobile ? CAM_POS_M  : CAM_POS;
-  const clArr     = mobile ? CAM_LOOK_M : CAM_LOOK;
-  const cubeArr   = mobile ? CUBE_POS_M : CUBE_POS;
-
-  useFrame((s) => {
-    const time = s.clock.elapsedTime;
-    const p  = progressRef.current;
-    const px = reducedMotion ? 0 : pointerRef.current.x;
-    const py = reducedMotion ? 0 : pointerRef.current.y;
-
-    const cp = lerpSections(cpArr, p);
-    cp.x += px * (mobile ? 0.02 : 0.06);
-    cp.y += py * (mobile ? 0.012 : 0.032);
-    s.camera.position.lerp(cp, 0.025);
-
-    const cl = lerpSections(clArr, p);
-    lookAt.current.lerp(cl, 0.034);
-    s.camera.lookAt(lookAt.current);
-
-    const ct = lerpSections(cubeArr, p);
-    cubeTarget.current.lerp(ct, 0.038);
-
-    let cubeFade = 1;
-    if (p > 0.8) {
-      const t = Math.max(0, Math.min(1, (p - 0.8) / 0.18));
-      cubeFade = 1 - (t * t * (3 - 2 * t)); 
+function useCubeController(progressRef, pointerRef, reducedMotion, mobile, cubeRef, edgeRef) {
+  const targetPosition = useRef(new THREE.Vector3());
+  const smoothProgress = useRef(0);
+
+  const basePositions = useMemo(() => {
+    if (mobile) {
+      return [
+        new THREE.Vector3(0.3, 0, 0),
+        new THREE.Vector3(0.3, 0, 0),
+        new THREE.Vector3(0.3, 0, 0),
+        new THREE.Vector3(0.3, 0, 0),
+        new THREE.Vector3(0.3, 0, 0),
+        new THREE.Vector3(0.3, 0, 0),
+      ];
     }
 
+    return [
+      new THREE.Vector3(3.2, 0, 0),
+      new THREE.Vector3(3.2, 0, 0),
+      new THREE.Vector3(-1.5, 0, 0),
+      new THREE.Vector3(3.2, 0, 0),
+      new THREE.Vector3(-1.5, 0, 0),
+      new THREE.Vector3(1.0, 0, 0),
+    ];
+  }, [mobile]);
+
+  const faceRotations = useMemo(
+    () => [0, 0, -Math.PI / 2, Math.PI, Math.PI / 2, Math.PI / 2],
+    []
+  );
+
+  const offset = useMemo(
+    () => new THREE.Vector3(mobile ? 0 : -0.6, mobile ? -0.05 : -0.2, 0),
+    [mobile]
+  );
+
+  useFrame((state) => {
     if (!cubeRef.current) return;
-    cubeRef.current.position.lerp(cubeTarget.current, 0.05);
-    cubeRef.current.position.y += Math.sin(time * 0.42) * 0.0014;
-    cubeRef.current.scale.setScalar(cubeFade);
 
-    materials.forEach((mat) => {
-      mat.opacity = cubeFade;
-    });
-    if (edgeRef.current) {
-      edgeRef.current.material.opacity = 0.82 * cubeFade;
-    }
+    const time = state.clock.elapsedTime;
 
-    const isHero = p < 0.05;
+    smoothProgress.current = THREE.MathUtils.lerp(
+      smoothProgress.current,
+      THREE.MathUtils.clamp(progressRef.current, 0, 1),
+      reducedMotion ? 0.18 : 0.085
+    );
 
-    if (isHero) {
-      if (!reducedMotion) heroRotY.current += 0.004;
-      cubeRef.current.rotation.y = heroRotY.current;
-      cubeRef.current.rotation.x = THREE.MathUtils.lerp(
-        cubeRef.current.rotation.x, FACE_ROT_X[0] + py * 0.013, 0.022
-      );
-      wasHero.current = true;
+    const p = smoothProgress.current;
+    const px = reducedMotion ? 0 : THREE.MathUtils.clamp(pointerRef.current.x, -1, 1);
+    const py = reducedMotion ? 0 : THREE.MathUtils.clamp(pointerRef.current.y, -1, 1);
+    const maxIndex = basePositions.length - 1;
+    const segment = THREE.MathUtils.clamp(p * maxIndex, 0, maxIndex);
+    const index = Math.min(Math.floor(segment), maxIndex);
+    const nextIndex = Math.min(index + 1, maxIndex);
+    const blend = THREE.MathUtils.smoothstep(segment - index, 0, 1);
+
+    const target = new THREE.Vector3()
+      .lerpVectors(basePositions[index], basePositions[nextIndex], blend)
+      .add(offset);
+
+    targetPosition.current.lerp(target, 0.1);
+    cubeRef.current.position.lerp(targetPosition.current, 0.12);
+    cubeRef.current.position.y += Math.sin(time * 0.4) * 0.0015;
+
+    if (p < 0.08 && !reducedMotion) {
+      cubeRef.current.rotation.y += 0.006;
     } else {
-      wasHero.current = false;
-      const targetRY = lerpNum(FACE_ROT_Y, p);
-      const targetRX = lerpNum(FACE_ROT_X, p) + py * 0.013;
-      let cur  = cubeRef.current.rotation.y;
-      let diff = ((targetRY - cur) % (Math.PI * 2) + Math.PI * 3) % (Math.PI * 2) - Math.PI;
-      
-      cubeRef.current.rotation.y = THREE.MathUtils.lerp(cur, cur + diff + px * 0.022, 0.022);
-      cubeRef.current.rotation.x = THREE.MathUtils.lerp(cubeRef.current.rotation.x, targetRX, 0.022);
-      heroRotY.current = cubeRef.current.rotation.y;
+      const targetRotY = THREE.MathUtils.lerp(faceRotations[index], faceRotations[nextIndex], blend);
+      cubeRef.current.rotation.y = THREE.MathUtils.lerp(
+        cubeRef.current.rotation.y,
+        targetRotY + px * 0.045,
+        0.11
+      );
     }
 
+    cubeRef.current.rotation.x = THREE.MathUtils.lerp(
+      cubeRef.current.rotation.x,
+      -0.12 + py * 0.018,
+      0.09
+    );
+
     cubeRef.current.rotation.z = THREE.MathUtils.lerp(
       cubeRef.current.rotation.z,
-      Math.sin(time * 0.11 + p * 2.8) * 0.009,
-      0.022
+      Math.sin(time * 0.1) * 0.004,
+      0.08
     );
 
-    if (platRef.current) {
-      platRef.current.position.x = THREE.MathUtils.lerp(
-        platRef.current.position.x, cubeTarget.current.x, 0.038
-      );
-      platRef.current.rotation.z = time * 0.02 + p * 0.3;
-      platRef.current.scale.setScalar(mobile ? 0.54 : 1.0);
+    let fade = 1;
+
+    if (p > 0.86) {
+      const t = (p - 0.86) / 0.14;
+      fade = 1 - t * t * (3 - 2 * t);
+    }
+
+    cubeRef.current.scale.setScalar(mobile ? fade * 1.02 : fade * 1.08);
+
+    cubeRef.current.traverse((child) => {
+      if (child.material && child.material.transparent) {
+        child.material.opacity = fade;
+      }
+    });
+
+    if (edgeRef.current) {
+      edgeRef.current.material.opacity = fade * 0.85;
     }
   });
+}
+
+function Scene({ progressRef, pointerRef, reducedMotion, mobile, cubeTexts = {} }) {
+  const cubeRef = useRef();
+  const edgeRef = useRef();
+
+  const textures = useMemo(
+    () => ({
+      discord: drawFace(cubeTexts.discord || "Discord Bot", ICONS.discord, "#5865f2"),
+      web: drawFace(cubeTexts.web || "Web Entwicklung", ICONS.web, "#0ea5e9"),
+      app: drawFace(cubeTexts.app || "Mobile App", ICONS.app, "#ec4899"),
+      individual: drawFace(cubeTexts.individual || "Individual", ICONS.individual, "#a855f7"),
+    }),
+    [cubeTexts]
+  );
+
+  const edgesGeometry = useMemo(
+    () => new THREE.EdgesGeometry(new THREE.BoxGeometry(2.3, 2.3, 2.3)),
+    []
+  );
+
+  useCubeController(progressRef, pointerRef, reducedMotion, mobile, cubeRef, edgeRef);
 
   return (
     <>
       <color attach="background" args={[BG]} />
-      <fog attach="fog" args={[BG, 6, 24]} />
-      <ambientLight intensity={0.55} color="#5060a0" />
-      <pointLight position={[-3.5, 3.5, 5]} intensity={mobile ? 8 : 18} color="#7060ff" />
-      <pointLight position={[3, -1.5, 5]} intensity={mobile ? 7 : 14} color="#2888ff" />
-      <pointLight position={[-1.5, -3, 4]} intensity={mobile ? 2 : 5} color="#5030c0" />
-      <pointLight position={[-2.5, 7, 0]} intensity={mobile ? 0 : 28} color="#1835b0" />
+      <fog attach="fog" args={[BG, 10, 28]} />
+
+      <ambientLight intensity={0.5} />
+      <pointLight position={[3, 2, 5]} intensity={12} />
+      <Environment preset="night" />
 
       <group ref={cubeRef}>
-        <mesh material={materials}>
-          <boxGeometry args={[2.2, 2.2, 2.2, 1, 1, 1]} />
-        </mesh>
-        <lineSegments ref={edgeRef} geometry={edgesGeom}>
-          <lineBasicMaterial color="#7878ff" transparent opacity={0.82} />
-        </lineSegments>
+        <RoundedBox args={[2.3, 2.3, 2.3]} radius={0.1} smoothness={8}>
+          <meshPhysicalMaterial
+            color="#050e28"
+            metalness={0.9}
+            roughness={0.15}
+            clearcoat={0.6}
+            clearcoatRoughness={0.25}
+            emissiveIntensity={0.12}
+            emissive={new THREE.Color("#111833")}
+          />
+        </RoundedBox>
+
+        <CubeFace texture={textures.discord} position={[0, 0, 1.156]} rotation={[0, 0, 0]} />
+        <CubeFace texture={textures.web} position={[1.156, 0, 0]} rotation={[0, Math.PI / 2, 0]} />
+        <CubeFace texture={textures.app} position={[0, 0, -1.156]} rotation={[0, Math.PI, 0]} />
+        <CubeFace texture={textures.individual} position={[-1.156, 0, 0]} rotation={[0, -Math.PI / 2, 0]} />
       </group>
 
       <Grid />
       <AccentCubes mobile={mobile} />
-      <Particles count={pCount} progressRef={progressRef} />
-
-      {!mobile && (
-        <EffectComposer multisampling={0}>
-          <Bloom luminanceThreshold={0.12} luminanceSmoothing={0.88} intensity={0.75} mipmapBlur />
-        </EffectComposer>
-      )}
+      <Particles count={mobile ? 25 : 60} progressRef={progressRef} />
     </>
   );
 }
 
-function HomeCanvas({ progressRef, pointerRef, webglSupported, ctaVisible }) {
+function HomeCanvas({ progressRef, pointerRef, webglSupported, ctaVisible, cubeTexts }) {
   const reducedMotion = useReducedMotion();
   const [mobile, setMobile] = useState(false);
+
   useEffect(() => {
-    const u = () => setMobile(window.innerWidth < 768);
-    u();
-    window.addEventListener("resize", u);
-    return () => window.removeEventListener("resize", u);
+    const update = () => setMobile(window.innerWidth < 768);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
   }, []);
 
   if (!webglSupported) {
@@ -516,7 +586,7 @@ function HomeCanvas({ progressRef, pointerRef, webglSupported, ctaVisible }) {
   return (
     <div className="home-canvas-shell" aria-hidden="true">
       <Canvas
-        camera={{ position: [0.6, 0.45, mobile ? 7.2 : 7.8], fov: mobile ? 50 : 40 }}
+        camera={{ position: [0, 0, 8], fov: mobile ? 65 : 45 }}
         dpr={[1, mobile ? 1.2 : 1.7]}
         gl={{ antialias: true, alpha: false, powerPreference: "high-performance" }}
       >
@@ -526,6 +596,7 @@ function HomeCanvas({ progressRef, pointerRef, webglSupported, ctaVisible }) {
             pointerRef={pointerRef}
             reducedMotion={reducedMotion}
             mobile={mobile}
+            cubeTexts={cubeTexts}
           />
         </Suspense>
       </Canvas>
@@ -564,7 +635,6 @@ function ServiceSection({ id, icon, align = "left", title, desc, children, learn
             <ArrowRight size={14} />
           </Link>
         </motion.div>
-        {}
         <div aria-hidden="true" />
       </div>
     </section>
@@ -574,55 +644,110 @@ function ServiceSection({ id, icon, align = "left", title, desc, children, learn
 export default function Home() {
   const { t } = useLanguage();
   const progressRef = useRef(0);
-  const pointerRef  = useRef({ x: 0, y: 0 });
+  const pointerRef = useRef({ x: 0, y: 0 });
   const [webglSupported, setWebglSupported] = useState(true);
-  const [ctaVisible, setCtaVisible]         = useState(false);
+  const [ctaVisible, setCtaVisible] = useState(false);
+
+  const cubeTexts = useMemo(
+    () => ({
+      discord: t("home.section.discord.title"),
+      web: t("home.section.web.title"),
+      app: t("home.section.app.title"),
+      individual: t("home.section.individual.title"),
+    }),
+    [t]
+  );
 
   useEffect(() => {
     try {
-      const cv = document.createElement("canvas");
-      setWebglSupported(!!(window.WebGLRenderingContext &&
-        (cv.getContext("webgl") || cv.getContext("experimental-webgl"))));
-    } catch { setWebglSupported(false); }
+      const canvas = document.createElement("canvas");
+      setWebglSupported(
+        Boolean(
+          window.WebGLRenderingContext &&
+            (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+        )
+      );
+    } catch {
+      setWebglSupported(false);
+    }
   }, []);
 
   useEffect(() => {
-    let fr = 0;
+    let frame = 0;
+
     const onScroll = () => {
-      cancelAnimationFrame(fr);
-      fr = requestAnimationFrame(() => {
-        const max = document.documentElement.scrollHeight - window.innerHeight;
-        progressRef.current = max > 0 ? window.scrollY / max : 0;
+      cancelAnimationFrame(frame);
+
+      frame = requestAnimationFrame(() => {
+        const viewportCenter = window.scrollY + window.innerHeight * 0.5;
+        const centers = SECTION_IDS.map((id) => {
+          const element = document.getElementById(id);
+          if (!element) return null;
+          const rect = element.getBoundingClientRect();
+          return window.scrollY + rect.top + rect.height * 0.5;
+        }).filter((value) => value !== null);
+
+        if (centers.length < 2) {
+          progressRef.current = 0;
+          return;
+        }
+
+        if (viewportCenter <= centers[0]) {
+          progressRef.current = 0;
+          return;
+        }
+
+        if (viewportCenter >= centers[centers.length - 1]) {
+          progressRef.current = 1;
+          return;
+        }
+
+        for (let i = 0; i < centers.length - 1; i += 1) {
+          const start = centers[i];
+          const end = centers[i + 1];
+
+          if (viewportCenter >= start && viewportCenter <= end) {
+            const local = end === start ? 0 : (viewportCenter - start) / (end - start);
+            progressRef.current = THREE.MathUtils.clamp((i + local) / (centers.length - 1), 0, 1);
+            return;
+          }
+        }
       });
     };
+
     onScroll();
     window.addEventListener("scroll", onScroll, { passive: true });
     window.addEventListener("resize", onScroll);
+
     return () => {
-      cancelAnimationFrame(fr);
+      cancelAnimationFrame(frame);
       window.removeEventListener("scroll", onScroll);
       window.removeEventListener("resize", onScroll);
     };
   }, []);
 
   useEffect(() => {
-    const onMove = (e) => {
-      pointerRef.current.x = (e.clientX / window.innerWidth  - 0.5) * 2;
-      pointerRef.current.y = -(e.clientY / window.innerHeight - 0.5) * 2;
+    const onMove = (event) => {
+      pointerRef.current.x = (event.clientX / window.innerWidth - 0.5) * 2;
+      pointerRef.current.y = -(event.clientY / window.innerHeight - 0.5) * 2;
     };
+
     window.addEventListener("pointermove", onMove, { passive: true });
     return () => window.removeEventListener("pointermove", onMove);
   }, []);
 
   useEffect(() => {
-    const el = document.getElementById("cta");
-    if (!el) return;
-    const obs = new IntersectionObserver(
+    const element = document.getElementById("cta");
+    if (!element) return undefined;
+
+    const observer = new IntersectionObserver(
       ([entry]) => setCtaVisible(entry.isIntersecting),
       { threshold: 0.3 }
     );
-    obs.observe(el);
-    return () => obs.disconnect();
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
   }, []);
 
   return (
@@ -632,10 +757,11 @@ export default function Home() {
         pointerRef={pointerRef}
         webglSupported={webglSupported}
         ctaVisible={ctaVisible}
+        cubeTexts={cubeTexts}
       />
+
       <div className="home-atmosphere" />
 
-      {}
       <section id="hero" className="journey-section hero-journey-section">
         <motion.div
           className="journey-content hero-journey-content"
@@ -660,8 +786,10 @@ export default function Home() {
             </Link>
           </div>
         </motion.div>
+
         <button
           className="journey-scroll-cue"
+          type="button"
           onClick={() => document.getElementById("discord")?.scrollIntoView({ behavior: "smooth" })}
         >
           <Mouse size={14} />
@@ -669,7 +797,6 @@ export default function Home() {
         </button>
       </section>
 
-      {}
       <ServiceSection
         id="discord"
         icon={<MessageSquare size={22} />}
@@ -714,7 +841,6 @@ export default function Home() {
         <TechList items={["APIs", "Automation", "Integrations", "Scalable"]} />
       </ServiceSection>
 
-      {}
       <section id="cta" className="journey-section final-journey-section">
         <motion.div
           className="journey-content final-journey-content"
diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css
index 540b36f..0f353f4 100644
--- a/frontend/src/styles/Footer.css
+++ b/frontend/src/styles/Footer.css
@@ -10,8 +10,10 @@
   position: relative;
   overflow: hidden;
   color: #ffffff;
-  background: linear-gradient( 180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5) );
-  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  margin-top: 0;
+  border-top: var(--text-decoration) 1px solid;
+  background: linear-gradient(180deg, rgba(4, 13, 30, 0.45) 0%, rgba(3, 10, 24, 0.6) 100%);
+  box-shadow: inset 0 1px 0 var(--text-decoration-shadow), 0 0 12px var(--text-decoration-shadow);
 }
 
 .footer::before,
@@ -29,17 +31,10 @@
 }
 
 .footer::after {
-  background: linear-gradient( 180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5) );
+  background: linear-gradient(180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5));
   opacity: 0.35;
 }
 
-.footer.footer-home {
-  margin-top: 0;
-  border-top: var(--text-decoration) 1px solid;
-  background: linear-gradient( 180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5) );
-  box-shadow: inset 0 1px 0 var(--text-decoration-shadow), 0 0 12px var(--text-decoration-shadow);
-}
-
 .footer-container {
   position: relative;
   z-index: 1;
diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css
index b5055c7..cff853c 100644
--- a/frontend/src/styles/Home.css
+++ b/frontend/src/styles/Home.css
@@ -1,5 +1,3 @@
-
-
 .home-page {
   position: relative;
   background: #030b18;
@@ -11,9 +9,10 @@
 .home-canvas-shell {
   position: fixed;
   inset: 0;
-  z-index: 0;
+  z-index: 1;
   pointer-events: none;
 }
+
 .home-canvas-shell > canvas {
   display: block;
   width: 100% !important;
@@ -44,17 +43,8 @@
 .home-atmosphere {
   position: fixed;
   inset: 0;
-  z-index: 1;
+  z-index: 0;
   pointer-events: none;
-  background:
-    linear-gradient(to right,
-      rgba(3, 11, 24, 0.94) 0%,
-      rgba(3, 11, 24, 0.72) 32%,
-      rgba(3, 11, 24, 0.22) 52%,
-      rgba(3, 11, 24, 0.00) 68%
-    ),
-    linear-gradient(to top, rgba(3, 11, 24, 0.76) 0%, transparent 24%),
-    radial-gradient(ellipse 32% 38% at 80% 4%, rgba(80, 56, 200, 0.10) 0%, transparent 68%);
 }
 
 .journey-section {
@@ -85,12 +75,6 @@
   box-sizing: border-box;
 }
 
-.journey-content {
-  max-width: 1280px;
-  margin: 50px auto;
-  padding: 0 64px;
-}
-
 .journey-kicker {
   display: inline-flex;
   align-items: center;
@@ -166,12 +150,13 @@
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.03);
-  box-shadow: 
+  box-shadow:
     0 24px 60px rgba(0, 0, 0, 0.35),
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
-              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
-              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  transition:
+    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .service-text:hover {
@@ -185,7 +170,6 @@
   grid-area: text;
   justify-self: start;
   margin-left: -250px;
-
 }
 
 .service--right .service-grid {
@@ -200,13 +184,13 @@
 }
 
 #hero {
-  background: 
+  background:
     radial-gradient(circle at 80% 25%, rgba(96, 80, 220, 0.12) 0%, transparent 55%),
     radial-gradient(circle at 20% 75%, rgba(136, 120, 255, 0.05) 0%, transparent 60%);
 }
 
 #discord {
-  background: 
+  background:
     radial-gradient(circle at 15% 30%, rgba(88, 101, 242, 0.12) 0%, transparent 50%),
     radial-gradient(circle at 85% 70%, rgba(88, 101, 242, 0.04) 0%, transparent 60%);
   border-top: 1px solid rgba(88, 101, 242, 0.06);
@@ -215,14 +199,14 @@
 
 #discord .service-text:hover {
   border-color: rgba(88, 101, 242, 0.3);
-  box-shadow: 
+  box-shadow:
     0 24px 60px rgba(0, 0, 0, 0.45),
     0 0 32px rgba(88, 101, 242, 0.14),
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 #web {
-  background: 
+  background:
     radial-gradient(circle at 15% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
     radial-gradient(circle at 85% 70%, rgba(14, 165, 233, 0.03) 0%, transparent 50%);
   border-bottom: 1px solid rgba(14, 165, 233, 0.06);
@@ -230,14 +214,14 @@
 
 #web .service-text:hover {
   border-color: rgba(14, 165, 233, 0.3);
-  box-shadow: 
+  box-shadow:
     0 24px 60px rgba(0, 0, 0, 0.45),
     0 0 32px rgba(14, 165, 233, 0.14),
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 #mobile {
-  background: 
+  background:
     radial-gradient(circle at 15% 30%, rgba(236, 72, 153, 0.09) 0%, transparent 50%),
     radial-gradient(circle at 85% 70%, rgba(236, 72, 153, 0.03) 0%, transparent 60%);
   border-bottom: 1px solid rgba(236, 72, 153, 0.06);
@@ -245,14 +229,14 @@
 
 #mobile .service-text:hover {
   border-color: rgba(236, 72, 153, 0.3);
-  box-shadow: 
+  box-shadow:
     0 24px 60px rgba(0, 0, 0, 0.45),
     0 0 32px rgba(236, 72, 153, 0.14),
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 #individual {
-  background: 
+  background:
     radial-gradient(circle at 15% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 55%),
     radial-gradient(circle at 85% 70%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
   border-bottom: 1px solid rgba(168, 85, 247, 0.06);
@@ -260,14 +244,14 @@
 
 #individual .service-text:hover {
   border-color: rgba(168, 85, 247, 0.3);
-  box-shadow: 
+  box-shadow:
     0 24px 60px rgba(0, 0, 0, 0.45),
     0 0 32px rgba(168, 85, 247, 0.14),
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 #cta {
-  background: 
+  background:
     radial-gradient(circle at 50% 50%, rgba(96, 80, 255, 0.11) 0%, transparent 65%);
   border-top: 1px solid rgba(96, 80, 255, 0.06);
 }
@@ -528,6 +512,8 @@
     max-width: 100% !important;
     justify-self: center !important;
     padding: 32px 24px !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
   .service-journey-section h2 { font-size: 28px; text-align: center; }
   .service-journey-section h2::after,
diff --git a/frontend/src/styles/Login.css b/frontend/src/styles/Login.css
index 97fb147..0dcb34d 100644
--- a/frontend/src/styles/Login.css
+++ b/frontend/src/styles/Login.css
@@ -3,72 +3,124 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: radial-gradient(ellipse at 30% 40%, var(--color-accent-06), transparent 60%),
-              radial-gradient(ellipse at 70% 60%, rgba(183, 136, 255, 0.08), transparent 60%),
-              var(--bg);
+  background: 
+    radial-gradient(circle at 15% 20%, rgba(96, 80, 220, 0.09) 0%, transparent 45%),
+    radial-gradient(circle at 85% 80%, rgba(136, 120, 255, 0.06) 0%, transparent 45%),
+    radial-gradient(circle at 50% 50%, rgba(96, 200, 255, 0.02) 0%, transparent 60%),
+    var(--bg);
+  padding: 24px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Add a subtle animating light pulse in the background */
+.login-hero::before {
+  content: "";
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(136, 120, 255, 0.03) 0%, transparent 70%);
+  top: 15%;
+  left: 20%;
+  pointer-events: none;
+  animation: pulseGlow 12s ease-in-out infinite alternate;
+}
+
+@keyframes pulseGlow {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(80px, 50px) scale(1.15); }
 }
 
 .login-box {
   width: 100%;
-  max-width: 420px;
-  padding: 2rem;
-  background: rgba(22, 27, 34, 0.85);
-  border: 1px solid var(--color-white-08);
-  border-radius: 14px;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 20px 60px var(--color-shadow-strong);
+  max-width: 440px;
+  padding: 2.5rem;
+  background: rgba(4, 13, 30, 0.45);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(139, 92, 246, 0.16);
+  border-radius: 20px;
+  box-shadow: 
+    0 24px 60px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 1.25rem;
+  position: relative;
+  z-index: 10;
+  animation: boxFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes boxFadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .login-box h1 {
-  margin: 0;
-  font-size: 1.8rem;
-  background: linear-gradient(135deg, var(--accent), var(--secondary));
+  margin: 0 0 0.5rem;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  background: linear-gradient(130deg, #60aaff 0%, #9060ff 48%, #60e0ff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 12px rgba(100, 130, 255, 0.15));
+  text-align: center;
 }
 
 .form-error {
-  color: var(--color-dot-red);
-  font-size: 0.85rem;
+  color: #ff9a95;
+  font-size: 0.86rem;
+  font-weight: 500;
   text-align: center;
-  background: var(--color-danger-08);
-  border: 1px solid var(--color-danger-25);
-  border-radius: 8px;
-  padding: 8px 12px;
+  background: rgba(255, 138, 131, 0.05);
+  border: 1px solid rgba(255, 138, 131, 0.22);
+  border-radius: 10px;
+  padding: 10px 14px;
+  box-shadow: 0 4px 12px rgba(255, 138, 131, 0.05);
 }
 
 .form-success {
-  color: var(--color-success);
-  font-size: 0.85rem;
+  color: #7ef4ad;
+  font-size: 0.86rem;
+  font-weight: 500;
   text-align: center;
-  background: var(--color-success-08);
-  border: 1px solid var(--color-success-25);
-  border-radius: 8px;
-  padding: 8px 12px;
+  background: rgba(108, 232, 154, 0.05);
+  border: 1px solid rgba(108, 232, 154, 0.22);
+  border-radius: 10px;
+  padding: 10px 14px;
+  box-shadow: 0 4px 12px rgba(108, 232, 154, 0.05);
 }
 
 .login-box input {
   width: 100%;
-  padding: 10px;
-  border-radius: 8px;
-  border: 1px solid var(--color-white-10);
-  background: var(--color-bg-surface-2);
-  color: white;
+  padding: 13px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(139, 92, 246, 0.15);
+  background: rgba(3, 11, 24, 0.6);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.94rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+}
+
+.login-box input::placeholder {
+  color: #5a637a;
 }
 
 .login-box input:focus {
   outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--color-accent-12);
+  border-color: #8878ff;
+  box-shadow: 
+    0 0 14px rgba(136, 120, 255, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.02);
+  background-color: rgba(3, 11, 24, 0.8);
 }
 
 .input-error {
-  border: 1px solid var(--color-dot-red) !important;
-  box-shadow: 0 0 0 2px var(--color-danger-20);
+  border-color: rgba(255, 138, 131, 0.5) !important;
+  box-shadow: 0 0 12px rgba(255, 138, 131, 0.2) !important;
 }
 
 .password-wrapper {
@@ -78,7 +130,7 @@
 
 .password-wrapper input {
   width: 100%;
-  padding-right: 40px;
+  padding-right: 48px;
 }
 
 .password-wrapper input::-ms-reveal,
@@ -90,74 +142,113 @@
 
 .password-toggle {
   position: absolute;
-  right: 10px;
+  right: 14px;
   top: 50%;
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(180, 192, 255, 0.42);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease, transform 0.2s ease;
+  padding: 4px;
 }
 
 .password-toggle:hover {
-  color: var(--color-white-90);
+  color: #8878ff;
+  transform: translateY(-50%) scale(1.08);
 }
 
 .login-box button:not(.link-btn):not(.password-toggle) {
-  padding: 10px;
+  width: 100%;
+  padding: 13px;
   border-radius: 10px;
   border: none;
-  background: var(--accent);
-  color: var(--color-bg);
-  font-weight: 600;
+  background: linear-gradient(135deg, #4858e8 0%, #6838d8 100%);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.94rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 4px 18px rgba(72, 88, 232, 0.32);
+  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.2s ease;
 }
 
 .login-box button:hover:not(.link-btn):not(.password-toggle) {
-  transform: translateY(-1px);
-  box-shadow: 0 0 24px var(--color-accent-35);
+  transform: translateY(-1.5px);
+  box-shadow: 0 6px 24px rgba(72, 88, 232, 0.52);
+  filter: brightness(1.08);
+}
+
+.login-box button:active:not(.link-btn):not(.password-toggle) {
+  transform: translateY(0);
+  box-shadow: 0 3px 12px rgba(72, 88, 232, 0.4);
 }
 
 .login-box button:disabled {
-  opacity: 0.6;
+  opacity: 0.55;
   cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
 .remember {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 0.85rem;
-  color: var(--color-white-55);
+  gap: 10px;
+  font-size: 0.88rem;
+  color: #6a7590;
   cursor: pointer;
   user-select: none;
+  transition: color 0.2s ease;
+}
+
+.remember:hover {
+  color: #f0f4ff;
 }
 
 .remember input[type="checkbox"] {
-  width: auto;
-  accent-color: var(--accent);
+  width: 17px;
+  height: 17px;
+  border-radius: 4px;
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: rgba(3, 11, 24, 0.6);
+  accent-color: #8878ff;
   cursor: pointer;
 }
 
 .switch {
   display: flex;
   justify-content: center;
+  margin-top: 0.25rem;
 }
 
 .link-btn {
   background: none;
   border: none;
-  color: var(--color-accent);
+  color: rgba(220, 241, 255, 0.65);
   cursor: pointer;
-  font-size: 0.85rem;
+  font-family: inherit;
+  font-size: 0.88rem;
+  font-weight: 500;
+  transition: color 0.22s ease, text-shadow 0.22s ease;
+  padding: 4px 8px;
 }
 
 .link-btn:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.verify {
-  background: linear-gradient(135deg, var(--color-success), var(--color-grad-1));
+  color: #8878ff;
+  text-shadow: 0 0 8px rgba(136, 120, 255, 0.3);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .login-box {
+    padding: 2rem 1.5rem;
+    border-radius: 16px;
+  }
+  .login-box h1 {
+    font-size: 1.8rem;
+  }
 }
diff --git a/frontend/src/styles/Navbar.css b/frontend/src/styles/Navbar.css
index 53cb13e..9887f83 100644
--- a/frontend/src/styles/Navbar.css
+++ b/frontend/src/styles/Navbar.css
@@ -12,38 +12,26 @@
   justify-content: space-between;
   z-index: 999;
   border-radius: 14px;
-  background: rgba(4, 13, 30, 0.55);
+  background: linear-gradient(180deg, rgba(4, 13, 30, 0.45) 0%, rgba(3, 10, 24, 0.6) 100%);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  border: 1px solid rgba(255,255,255,0.06);
-  box-shadow: inset 0 0 8px var(--text-decoration), 0 0 16px var(--text-decoration-shadow);
+  border: 1px solid rgba(139, 92, 246, 0.12);
+  box-shadow: 
+    inset 0 0 12px rgba(139, 92, 246, 0.15), 
+    0 12px 40px rgba(0, 0, 0, 0.5), 
+    0 0 30px rgba(139, 92, 246, 0.04);
   transition: all 0.4s ease;
 }
 
 .navbar.scrolled {
-  background: linear-gradient( 180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5) );
-  backdrop-filter: blur(22px);
-  border-color: rgba(120, 170, 255, 0.12);
-  box-shadow: 0 12px 48px rgba(0,0,0,0.55), 0 0 40px rgba(96, 200, 255, 0.05), 0 0 80px rgba(168, 85, 247, 0.04);
-}
-
-.navbar.navbar-home {
-  top: 0;
-  left: 0;
-  transform: none;
-  width: 100%;
-  max-width: none;
-  height: 78px;
-  border-radius: 0;
-  padding: 0 24px;
-  border: 0;
-  border-bottom: 1px solid rgba(80, 160, 255, 0.08);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
-  backdrop-filter: blur(6px);
-}
-
-.navbar.navbar-home.scrolled {
-  border-bottom: 1px solid var(--text-decoration);
+  background: linear-gradient(180deg, rgba(3, 8, 20, 0.7) 0%, rgba(2, 6, 16, 0.8) 100%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-color: rgba(139, 92, 246, 0.24);
+  box-shadow: 
+    inset 0 0 16px rgba(139, 92, 246, 0.2), 
+    0 16px 48px rgba(0, 0, 0, 0.6), 
+    0 0 40px rgba(139, 92, 246, 0.08);
 }
 
 .navbar-left {
@@ -58,40 +46,33 @@
   text-decoration: none;
 }
 
-.logo-wrapper-home {
-  gap: 10px;
-}
-
 .logo {
   width: 38px;
   height: 38px;
   border-radius: 999px;
-  border: 1px solid var(--text-decoration);
-  box-shadow: 0 0 16px var(--text-decoration-shadow);
+  border: 1.5px solid rgba(139, 92, 246, 0.3);
+  box-shadow: 0 0 16px rgba(139, 92, 246, 0.25);
+  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-.logo-home-round {
-  width: 40px;
-  height: 40px;
-  border-radius: 999px;
-  border: 1px solid var(--text-decoration);
-  box-shadow: 0 0 20px var(--text-decoration-shadow);
+.logo-wrapper:hover .logo {
+  border-color: rgba(96, 112, 255, 0.6);
+  box-shadow: 0 0 20px rgba(96, 138, 255, 0.4);
 }
 
 .logo-text {
   font-size: 19px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: -0.02em;
-  color: #eaffff;
-  text-shadow: 0 0 16px var(--text-decoration-shadow);
+  background: linear-gradient(130deg, #60aaff 0%, #9060ff 48%, #60e0ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 8px rgba(100, 130, 255, 0.28));
+  transition: filter 0.3s ease;
 }
 
-.logo-text-home {
-  font-size: 29px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: #f1fcff;
-  text-shadow: 0 0 18px var(--text-decoration-shadow);
+.logo-wrapper:hover .logo-text {
+  filter: drop-shadow(0 0 12px rgba(144, 96, 255, 0.45));
 }
 
 .navbar-menu {
@@ -101,64 +82,50 @@
   list-style: none;
 }
 
-.navbar-menu-home {
-  gap: 28px;
-}
-
 .navbar-menu a {
   position: relative;
   display: inline-block;
   text-decoration: none;
-  color: white;
-  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 0.92rem;
   letter-spacing: 0.05em;
-  padding: 4px 0;
+  padding: 6px 0;
   text-transform: none;
-  font-weight: 400;
-  transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease;
-}
-
-.navbar-menu-home a {
-  color: #ffffff;
-  text-shadow: 0 0 12px var(--text-decoration-shadow);
-  transform: translateY(-1px);
+  font-weight: 500;
+  font-family: 'Outfit', 'Inter', sans-serif;
+  transition: all 0.3s ease;
 }
 
 .navbar-menu a.nav-link-featured {
   font-size: 0.88rem;
 }
 
-.navbar-menu-home a.nav-link-featured {
-  font-size: 1rem;
-}
-
 .navbar-menu a:hover {
   color: #fff;
+  text-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
 }
 
 .navbar-menu a.active {
   color: #ffffff;
-  text-shadow:     0 0 14px var(--text-decoration-shadow);
+  text-shadow: 0 0 14px rgba(139, 92, 246, 0.4);
 }
 
 .navbar-menu a::after {
-  color: white;
   content: "";
   position: absolute;
-  left: 0;
-  bottom: -8px;
+  left: 50%;
+  bottom: -4px;
+  transform: translateX(-50%);
   width: 0;
   height: 2px;
-  background: var(--fade-purple);
+  border-radius: 99px;
+  background: linear-gradient(90deg, #60aaff, #9060ff);
   transition: width 0.3s ease;
 }
 
-.navbar-menu-home a::after {
-  bottom: -5px;
-}
-
-.navbar-menu a:hover::after {
-  width: 100%;
+.navbar-menu a:hover::after,
+.navbar-menu a.active::after {
+  width: 80%;
 }
 
 .navbar-right {
@@ -167,10 +134,6 @@
   gap: 12px;
 }
 
-.navbar-right-home {
-  gap: 10px;
-}
-
 .navbar-menu-controls {
   display: none;
 }
@@ -180,8 +143,11 @@
   position: relative;
   overflow: hidden;
   isolation: isolate;
-  padding: 4px;
+  padding: 3px;
   border-radius: 999px;
+  background: rgba(7, 18, 40, 0.4);
+  border: 1px solid rgba(139, 92, 246, 0.15);
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .language-switch::before {
@@ -194,9 +160,9 @@
   pointer-events: none;
 }
 
-.language-switch-home {
-  background: rgba(7, 18, 40, 0.78);
-  border: 1px solid var(--text-decoration);
+.language-switch:hover {
+  border-color: rgba(139, 92, 246, 0.3);
+  box-shadow: inset 0 0 8px rgba(139, 92, 246, 0.1), 0 0 16px rgba(139, 92, 246, 0.1);
 }
 
 .language-switch button {
@@ -204,7 +170,7 @@
   z-index: 1;
   border: none;
   background: transparent;
-  color: rgba(220, 241, 255, 0.85);
+  color: rgba(220, 241, 255, 0.65);
   padding: 6px 10px;
   border-radius: 999px;
   cursor: pointer;
@@ -214,50 +180,29 @@
   transition: all 0.3s ease;
 }
 
-.language-switch-home:hover {
-  box-shadow: inset 0 0 8px var(--text-decoration), 0 0 16px var(--text-decoration-shadow);
-}
-
-.language-switch-home button {
-  padding: 5px 9px;
-}
-
 .language-switch button.active {
-  background: var(--fade-purple);
-
+  background: linear-gradient(135deg, #4858e8 0%, #6838d8 100%);
   color: #fff;
-  box-shadow: var(--text-decoration-shadow);
-}
-
-.language-switch-home button.active {
-  box-shadow: var(--text-decoration-shadow);
+  box-shadow: 0 2px 8px rgba(72, 88, 232, 0.4);
 }
 
-
 .login-btn {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   height: 36px;
-  padding: 0 16px;
+  padding: 0 18px;
   border-radius: 8px;
-
-  border: 1px solid var(--text-decoration);
-
-  background: var(--fade-purple);
-
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: linear-gradient(135deg, #4858e8 0%, #6838d8 100%);
   color: #fff;
   font-family: "JetBrains Mono", monospace;
   font-weight: 800;
   letter-spacing: 0.1em;
   font-size: 0.66rem;
-
   cursor: pointer;
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-              box-shadow 0.3s ease,
-              border-color 0.3s ease;
-
-  box-shadow: var(--text-decoration-shadow);
+  box-shadow: 0 4px 12px rgba(72, 88, 232, 0.25);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .login-btn::before {
@@ -275,20 +220,12 @@
   z-index: 1;
 }
 
-.login-btn-home {
-  height: 34px;
-  padding: 0 18px;
-}
-
 .login-btn:hover {
   transform: translateY(-2px);
-  border-color: var(--text-decoration);
-  box-shadow: 0 0 8px var(--text-decoration), 0 0 16px var(--text-decoration-shadow);
-}
-
-.language-switch:hover::before,
-.login-btn:hover::before {
-  opacity: 0.42;
+  border-color: rgba(96, 200, 255, 0.5);
+  box-shadow: 
+    0 6px 20px rgba(72, 88, 232, 0.4),
+    0 0 12px rgba(96, 200, 255, 0.2);
 }
 
 .navbar-toggle {
@@ -301,11 +238,6 @@
     padding: 0 16px;
   }
 
-  .navbar.navbar-home {
-    padding: 0 16px;
-    height: 70px;
-  }
-
   .navbar-menu {
     position: absolute;
     top: 95px;
@@ -317,7 +249,7 @@
     border-radius: 14px;
     background: rgba(4, 10, 24, 0.94);
     backdrop-filter: blur(20px);
-    border: 1px solid var(--text-decoration);
+    border: 1px solid rgba(139, 92, 246, 0.2);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
@@ -325,10 +257,6 @@
     gap: 18px;
   }
 
-  .navbar-menu-home {
-    top: 70px;
-  }
-
   .navbar-menu.active {
     opacity: 1;
     visibility: visible;
@@ -351,7 +279,7 @@
     gap: 14px;
     margin-top: 6px;
     padding-top: 14px;
-    border-top: 1px solid var(--text-decoration);
+    border-top: 1px solid rgba(139, 92, 246, 0.15);
   }
 
   .navbar-menu-controls .language-switch,
diff --git a/frontend/src/styles/ProfileNavbar.css b/frontend/src/styles/ProfileNavbar.css
index 2e15c8f..e46c2e7 100644
--- a/frontend/src/styles/ProfileNavbar.css
+++ b/frontend/src/styles/ProfileNavbar.css
@@ -6,35 +6,26 @@
   display: flex;
   align-items: center;
   gap: 7px;
-
   position: relative;
   overflow: hidden;
-
-  background: transparent;
-  border: 2px solid transparent;
+  background: rgba(7, 18, 40, 0.4);
+  border: 1px solid rgba(139, 92, 246, 0.2);
   border-radius: 999px;
-
   font-family: 'Fira Code', monospace;
   font-size: 0.8rem;
   font-weight: 600;
-
-  padding: 4px 10px 4px 5px;
-  color: var(--color-text-muted);
+  padding: 4px 12px 4px 6px;
+  color: rgba(255, 255, 255, 0.8);
   cursor: pointer;
-
-  background-image: linear-gradient(var(--color-bg), var(--color-bg)),
-    linear-gradient(90deg, var(--color-grad-1), var(--color-grad-2), var(--color-grad-3));
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
-
   transition: all 0.25s ease;
   white-space: nowrap;
 }
 
 .user-menu__btn:hover,
 .user-menu__btn.open {
-  color: var(--color-text);
-  box-shadow: 0 0 14px rgba(88, 166, 255, 0.2);
+  color: #ffffff;
+  border-color: rgba(139, 92, 246, 0.4);
+  box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
 }
 
 .user-menu__avatar {
@@ -60,8 +51,8 @@
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-grad-2), var(--color-grad-3));
-  color: var(--color-bg);
+  background: linear-gradient(135deg, #4858e8 0%, #6838d8 100%);
+  color: #ffffff;
   font-size: 0.7rem;
   font-weight: 700;
   display: flex;
@@ -78,7 +69,7 @@
 }
 
 .user-menu__chevron {
-  color: var(--color-text-muted);
+  color: rgba(255, 255, 255, 0.6);
   transition: transform 0.2s ease;
   flex-shrink: 0;
 }
@@ -92,12 +83,14 @@
   top: calc(100% + 12px);
   right: 0;
   width: 220px;
-
-  background: linear-gradient( 180deg, rgba(7, 12, 24, 0.404), rgba(5, 10, 20, 0.5));
-  border: 1px solid var(--color-border);
+  background: rgba(4, 10, 24, 0.88);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(139, 92, 246, 0.18);
   border-radius: 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-
+  box-shadow: 
+    0 12px 48px rgba(0, 0, 0, 0.6), 
+    0 0 32px rgba(139, 92, 246, 0.05);
   overflow: hidden;
   z-index: 2000;
   animation: user-menu-in 0.14s ease;
@@ -118,7 +111,7 @@
 .user-menu__dropdown-email {
   font-family: 'Fira Code', monospace;
   font-size: 0.74rem;
-  color: var(--color-text-muted);
+  color: rgba(255, 255, 255, 0.5);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -127,7 +120,7 @@
 .user-menu__dropdown-username {
   font-family: 'Fira Code', monospace;
   font-size: 0.74rem;
-  color: var(--color-accent);
+  color: rgba(96, 200, 255, 0.9);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -135,7 +128,7 @@
 
 .user-menu__divider {
   height: 1px;
-  background: var(--color-border);
+  background: rgba(139, 92, 246, 0.12);
 }
 
 .user-menu__item {
@@ -143,19 +136,16 @@
   align-items: center;
   gap: 9px;
   width: 100%;
-  padding: 9px 14px;
-
+  padding: 10px 16px;
   background: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
-
   font-family: 'Fira Code', monospace;
   font-size: 0.8rem;
   font-weight: 400;
-  color: var(--color-text-muted);
-
-  transition: background 0.15s ease, color 0.15s ease;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all 0.15s ease;
 }
 
 .user-menu__item svg {
@@ -165,8 +155,8 @@
 }
 
 .user-menu__item:hover {
-  background: rgba(88, 166, 255, 0.08);
-  color: var(--color-text);
+  background: rgba(139, 92, 246, 0.12);
+  color: #ffffff;
 }
 
 .user-menu__item:hover svg {
@@ -201,4 +191,3 @@
     width: 200px;
   }
 }
-
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 03f9279..b5f8fd4 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,73 +1,51 @@
 :root {
-  --bg:                    #0d1117;
-  --surface:               #161b22;
-  --border:                rgba(134, 236, 255, 0.18);
-  --accent:                #86ecff;
-  --secondary:             #b788ff;
-  --text:                  #e6edf3;
-  --muted:                 #9ea8c7;
-
-  --color-bg:              #0d1117;
-  --color-bg-deep:         #010409;
-  --color-bg-elevated:     #111827;
-  --color-bg-surface:      #161b22;
-  --color-bg-surface-2:    rgba(22, 27, 34, 0.92);
-
-  --color-border:          #364054;
-  --color-border-subtle:   #242b38;
-
-  --color-accent:          #86ecff;
-  --color-accent-2:        #7fbeff;
-  --color-accent-soft:     #93cfff;
-  --color-accent-soft-2:   #9fd4ff;
-
-  --color-grad-1:          #8ef0ff;
-  --color-grad-2:          #73d8ff;
-  --color-grad-3:          #8d9bff;
-  --color-grad-4:          #c08bff;
-
-  --color-text:            #e6edf3;
-  --color-text-bright:     #f0f6fc;
-  --color-text-soft:       #c9d1d9;
-  --color-text-muted:      #9ea8c7;
-  --color-text-dim:        #8b949e;
-
-  --color-dot-red:         #ff5f57;
-  --color-dot-yellow:      #ffbd2e;
-  --color-dot-green:       #28c940;
-
-  --color-white-03:        rgba(255, 255, 255, 0.03);
-  --color-white-04:        rgba(255, 255, 255, 0.04);
-  --color-white-05:        rgba(255, 255, 255, 0.05);
-  --color-white-06:        rgba(255, 255, 255, 0.06);
-  --color-white-08:        rgba(255, 255, 255, 0.08);
-  --color-white-10:        rgba(255, 255, 255, 0.1);
-  --color-white-12:        rgba(255, 255, 255, 0.12);
-  --color-white-25:        rgba(255, 255, 255, 0.25);
-  --color-white-48:        rgba(255, 255, 255, 0.48);
-  --color-white-55:        rgba(255, 255, 255, 0.55);
-  --color-white-60:        rgba(255, 255, 255, 0.6);
-  --color-white-65:        rgba(255, 255, 255, 0.65);
-  --color-white-68:        rgba(255, 255, 255, 0.68);
-  --color-white-72:        rgba(255, 255, 255, 0.72);
-  --color-white-78:        rgba(255, 255, 255, 0.78);
-  --color-white-82:        rgba(255, 255, 255, 0.82);
-  --color-white-90:        rgba(255, 255, 255, 0.9);
-
-  --color-shadow-soft:     rgba(0, 0, 0, 0.18);
-  --color-shadow-card:     rgba(0, 0, 0, 0.35);
-  --color-shadow-strong:   rgba(0, 0, 0, 0.6);
-
-  --color-accent-06:       rgba(134, 236, 255, 0.06);
-  --color-accent-08:       rgba(134, 236, 255, 0.08);
-  --color-accent-10:       rgba(134, 236, 255, 0.1);
-  --color-accent-12:       rgba(134, 236, 255, 0.12);
-  --color-accent-18:       rgba(134, 236, 255, 0.18);
-  --color-accent-25:       rgba(134, 236, 255, 0.25);
-  --color-accent-30:       rgba(134, 236, 255, 0.3);
-  --color-accent-35:       rgba(134, 236, 255, 0.35);
-  --color-accent-40:       rgba(134, 236, 255, 0.4);
-  --color-accent-50:       rgba(134, 236, 255, 0.5);
+  --bg:                    #030b18;
+  --bg-deep:               #01050f;
+  --surface:               rgba(4, 13, 30, 0.45);
+  --surface-hover:         rgba(255, 255, 255, 0.04);
+  --border:                rgba(139, 92, 246, 0.12);
+  --border-hover:          rgba(139, 92, 246, 0.3);
+  --border-focus:          rgba(96, 200, 255, 0.4);
+  --accent:                #8878ff;
+  --accent-secondary:      #60aaff;
+  --text:                  #f0f4ff;
+  --muted:                 #6a7590;
+  --text-dim:              #5a637a;
+
+  --color-bg:              #030b18;
+  --color-bg-deep:         #01050f;
+  --color-bg-elevated:     rgba(4, 13, 30, 0.55);
+  --color-bg-surface:      rgba(4, 13, 30, 0.45);
+  --color-bg-surface-2:    rgba(4, 13, 30, 0.45);
+  --color-border:          rgba(139, 92, 246, 0.12);
+  --color-border-subtle:   rgba(139, 92, 246, 0.08);
+  --color-accent:          #60aaff;
+  --color-accent-2:        #8878ff;
+  --color-accent-soft:     #a8b8ff;
+  --color-accent-soft-2:   #b0b8f8;
+  --color-grad-1:          #60aaff;
+  --color-grad-2:          #8878ff;
+  --color-grad-3:          #a855f7;
+  --color-grad-4:          #ec4899;
+  --color-text:            #f0f4ff;
+  --color-text-bright:     #ffffff;
+  --color-text-soft:       #d0d8ff;
+  --color-text-muted:      #6a7590;
+  --color-text-dim:        #5a637a;
+  --color-shadow-soft:     rgba(0, 0, 0, 0.2);
+  --color-shadow-card:     0 24px 60px rgba(0, 0, 0, 0.35);
+  --color-shadow-strong:   rgba(0, 0, 0, 0.65);
+
+  --color-accent-06:       rgba(139, 92, 246, 0.06);
+  --color-accent-08:       rgba(139, 92, 246, 0.08);
+  --color-accent-10:       rgba(139, 92, 246, 0.1);
+  --color-accent-12:       rgba(139, 92, 246, 0.12);
+  --color-accent-18:       rgba(139, 92, 246, 0.18);
+  --color-accent-25:       rgba(139, 92, 246, 0.25);
+  --color-accent-30:       rgba(139, 92, 246, 0.3);
+  --color-accent-35:       rgba(139, 92, 246, 0.35);
+  --color-accent-40:       rgba(139, 92, 246, 0.4);
+  --color-accent-50:       rgba(139, 92, 246, 0.5);
 
   --color-success:         #6ce89a;
   --color-success-08:      rgba(108, 232, 154, 0.08);
@@ -78,8 +56,8 @@
   --color-danger-20:       rgba(255, 138, 131, 0.2);
   --color-danger-25:       rgba(255, 138, 131, 0.25);
 
-  --fade-purple: linear-gradient(135deg, rgb(99,102,241) 0%, rgb(112,76,245) 12%, rgb(124,58,237) 25%, rgb(145,70,242) 37%, rgb(168,85,247) 50%, rgb(152,88,247) 62%, rgb(139,92,246) 75%, rgb(120,140,250) 88%, rgb(96,200,255) 100% );
-  --text-decoration: rgba(139, 92, 246, 0.6);
+  --fade-purple:           linear-gradient(135deg, #4858e8 0%, #6838d8 100%);
+  --text-decoration:       rgba(139, 92, 246, 0.6);
   --text-decoration-shadow: rgba(139, 92, 246, 0.4);
 }
 
@@ -93,9 +71,13 @@ html, body, #root {
 
 body {
   margin: 0;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
   font-display: swap;
   background-color: var(--bg);
+  background-image: 
+    radial-gradient(circle at 80% 25%, rgba(96, 80, 220, 0.06) 0%, transparent 55%),
+    radial-gradient(circle at 20% 75%, rgba(136, 120, 255, 0.03) 0%, transparent 60%);
+  background-attachment: fixed;
   color: var(--text);
   display: flex;
   flex-direction: column;
@@ -108,11 +90,16 @@ body {
 }
 
 a {
-  color: var(--accent);
+  color: var(--accent-secondary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--text);
 }
 
 main {
   flex: 1;
   width: 100%;
 }
-