diff --git a/docs/source/dev_guide/index.rst b/docs/source/dev_guide/index.rst
index b80075d..b447d5c 100644
--- a/docs/source/dev_guide/index.rst
+++ b/docs/source/dev_guide/index.rst
@@ -1,234 +1,4 @@
-===============================
-👨‍💻 Developer Guide
-===============================
+Developer Guide
+=======================
 
-**Welcome to the ManagerX Developer Guide!**
-
-This comprehensive documentation is your resource for understanding ManagerX's architecture, extending the bot, deploying it to production, and contributing to the project. Whether you're building a new feature, self-hosting ManagerX, or simply curious about how it works, you'll find everything you need here.
-
-.. note::
-   **New to ManagerX?** Start with :doc:`getting_started/index` to set up your development environment.
-
-.. important::
-   This project is under active development. Features and APIs may change. Check back regularly for updates!
-
----
-
-🚀 Quick Start Paths
-====================
-
-**Want to get up and running immediately?**
-
-1. Install dependencies → :doc:`installation/index`
-2. Understand the structure → :doc:`project_structure/index`
-3. Learn the architecture → :doc:`architecture/index`
-4. Start coding → :doc:`bot_development/index`
-
-**Deploying to production?**
-
-1. Review deployment options → :doc:`deployment/index`
-2. Set up your server → :doc:`deployment/index`
-3. Configure monitoring → :doc:`deployment/index`
-4. Establish backups → :doc:`database/index`
-
-**Want to contribute?**
-
-1. Fork the repository
-2. Read :doc:`contributing/index`
-3. Create a feature branch
-4. Follow code style → :doc:`contributing/index`
-5. Write tests → :doc:`testing/index`
-6. Submit a pull request!
-
----
-
-📚 Documentation Structure
-===========================
-
-**Getting Started**
-
-- :doc:`getting_started/index` — Installation, setup, first steps
-- :doc:`installation/index` — Detailed installation instructions
-- :doc:`project_structure/index` — Repository organization
-
-**Understanding ManagerX**
-
-- :doc:`architecture/index` — System design and components
-- :doc:`database/index` — SQLite database schema and operations
-- :doc:`bot_development/index` — Building bot features and cogs
-- :doc:`api_development/index` — Creating API endpoints
-
-**Development**
-
-- :doc:`testing/index` — Unit tests, integration tests, testing strategy
-- :doc:`deployment/index` — Production deployment, hosting options
-- :doc:`contributing/index` — Contribution guidelines, PR process
-- :doc:`troubleshooting/index` — Debugging and common issues
-
----
-
-🏗️ Architecture Overview
-=========================
-
-ManagerX consists of three main components:
-
-**Bot Core (Python)**
-
-Discord.py/py-cord based bot with modular cog system. Handles Discord events, commands, and business logic.
-
-- Location: ``src/bot/``
-- Main entry: ``main.py``
-
-**API Server (FastAPI)**
-
-REST API providing bot data to frontend and external services.
-
-- Location: ``src/api/``
-- Port: 8040
-- Runs in same process as bot
-
-**Web Dashboard (React)**
-
-Modern TypeScript/React frontend with real-time statistics and management interface.
-
-- Location: ``src/web/``
-- Port: 8080
-- Built with Vite
-
-See :doc:`architecture/index` for detailed architecture documentation.
-
----
-
-🛠️ Development Environment
-============================
-
-**Prerequisites:**
-
-- Python 3.11+
-- Node.js 18+ (for web development)
-- Git
-- SQLite3 (usually included with Python)
-
-**Quick Setup:**
-
-.. code-block:: bash
-
-   # Clone repository
-   git clone https://github.com/ManagerX-Development/ManagerX.git
-   cd ManagerX
-   
-   # Create virtual environment
-   python -m venv .venv
-   source .venv/bin/activate  # On Windows: .venv\\Scripts\\activate
-   
-   # Install dependencies
-   pip install -r requirements/bot_req.txt
-   
-   # Set up configuration
-   cp config/config.yaml config/config.local.yaml
-   # Edit config/config.local.yaml with your settings
-   
-   # Run the bot
-   python main.py
-
-For detailed setup, see :doc:`getting_started/index`.
-
----
-
-📖 Common Development Tasks
-============================
-
-**Creating a New Command**
-
-See :doc:`bot_development/index` for complete example
-
-**Adding a Database Table**
-
-See :doc:`database/index` for schema modifications
-
-**Creating an API Endpoint**
-
-See :doc:`api_development/index` for REST endpoint examples
-
-**Writing Tests**
-
-See :doc:`testing/index` for testing patterns
-
-**Deploying to Production**
-
-See :doc:`deployment/index` for deployment procedures
-
----
-
-🤝 Contributing
-================
-
-We welcome contributions! Whether it's bug fixes, new features, or documentation improvements:
-
-1. Fork the repository
-2. Create a feature branch: ``git checkout -b feature/amazing-feature``
-3. Follow code style (see :doc:`contributing/index`)
-4. Write or update tests (see :doc:`testing/index`)
-5. Commit with clear messages (see :doc:`contributing/index`)
-6. Push and create a Pull Request
-
-See :doc:`contributing/index` for complete contribution guidelines.
-
----
-
-📊 Project Statistics
-======================
-
-- **Language:** Python (bot) + TypeScript (web)
-- **Framework:** discord.py + FastAPI + React
-- **Database:** SQLite
-- **Lines of Code:** 10,000+
-- **Cogs/Modules:** 10+
-- **API Endpoints:** 20+
-- **Commands:** 50+
-
----
-
-🔗 Quick Navigation
-====================
-
-Key Sections:
-
-.. toctree::
-   :maxdepth: 1
-   :caption: Getting Started
-   :hidden:
-
-   getting_started
-   installation
-   project_structure
-
-.. toctree::
-   :maxdepth: 1
-   :caption: Core Concepts
-   :hidden:
-
-   architecture
-   design_patterns
-   database_design
-
-.. toctree::
-   :maxdepth: 1
-   :caption: Development
-   :hidden:
-
-   bot_development
-   api_development
-   frontend_development
-   testing
-
-.. toctree::
-   :maxdepth: 1
-   :caption: Community
-   :hidden:
-
-   contributing
-   code_style
-   deployment
-
-   
\ No newline at end of file
+Welcome to the 
\ No newline at end of file
diff --git a/src/bot/cogs/moderation/moderation.py b/src/bot/cogs/moderation/moderation.py
index de7e7cc..3f67077 100644
--- a/src/bot/cogs/moderation/moderation.py
+++ b/src/bot/cogs/moderation/moderation.py
@@ -14,6 +14,14 @@
 import timedelta
 from discord.ui import Container
 from discord import SlashCommandGroup
+
+# Importiere zentrale Konstanten
+from src.bot.core import (
+    SUCCESS_COLOR, ERROR_COLOR, WARN_COLOR, INFO_COLOR,
+    emoji_yes, emoji_no, emoji_warn, emoji_info, 
+    emoji_member, emoji_staff, emoji_summary, emoji_slowmode,
+    AUTHOR, FLOOTER
+)
 # ───────────────────────────────────────────────
 # >> Cogs
 # ───────────────────────────────────────────────
@@ -126,7 +134,7 @@ def _create_moderation_embed(self, action: str, moderator: discord.Member, targe
         if additional_info:
             embed.add_field(name=f"{emoji_summary} × Zusätzlich", value=additional_info, inline=False)
         if target:
-            embed.set_footer(text=f"User ID: {target.id}")
+            embed.set_footer(text=f"User ID: {target.id} | {FLOOTER}")
         else:
             embed.set_footer(text=FLOOTER)
         return embed
diff --git a/src/bot/cogs/moderation/warn.py b/src/bot/cogs/moderation/warn.py
index c56dd7f..005e161 100644
--- a/src/bot/cogs/moderation/warn.py
+++ b/src/bot/cogs/moderation/warn.py
@@ -7,10 +7,19 @@
 from discord import slash_command, Option
 import os
 import datetime
+import datetime
 import ezcord
 import asyncio
 from typing import Optional
 
+# Importiere zentrale Konstanten
+from src.bot.core import (
+    SUCCESS_COLOR, ERROR_COLOR, WARN_COLOR, INFO_COLOR,
+    emoji_yes, emoji_no, emoji_warn, emoji_info, 
+    emoji_member, emoji_staff, emoji_summary, emoji_slowmode,
+    emoji_circleinfo, AUTHOR, FLOOTER
+)
+
 
 # ───────────────────────────────────────────────
 # >> Cogs
@@ -98,7 +107,7 @@ def _create_warn_embed(self, action: str, moderator: discord.Member,
 
     def _create_error_embed(self, title: str, message: str) -> discord.Embed:
         """Erstellt ein einheitliches Error-Embed"""
-        embed = discord.Embed(title=title, color=ERROR_COLOR)
+        embed = discord.Embed(title=title, color=ERROR_COLOR, timestamp=datetime.datetime.now(datetime.timezone.utc))
         embed.set_author(name=AUTHOR)
         embed.add_field(name=f"{emoji_no} {title}", value=message, inline=False)
         embed.set_footer(text=FLOOTER)
diff --git a/src/bot/cogs/user/settings.py b/src/bot/cogs/user/settings.py
index 381ff7b..5f8bdd6 100644
--- a/src/bot/cogs/user/settings.py
+++ b/src/bot/cogs/user/settings.py
@@ -4,6 +4,10 @@
 import ezcord
 
 from mx_handler import TranslationHandler
+import os
+from src.bot.core.constants import ERROR_COLOR, SUCCESS_COLOR, emoji_warn, emoji_delete, AUTHOR, FOOTER
+from DevTools import StatsDB, WarnDatabase, NotesDatabase, LevelDatabase
+import sqlite3
 
 
 class Settings(ezcord.Cog):
@@ -14,6 +18,8 @@ class Settings(ezcord.Cog):
     language = user.create_subgroup(
         "language")
 
+    data = user.create_subgroup("data", "Manage your data")
+
     AVAILABLE_LANGUAGES = {
         "de": "Deutsch 🇩🇪",
         "en": "English 🇬🇧"
@@ -103,6 +109,128 @@ async def list_languages(self, ctx: discord.ApplicationContext):
         response_text = f"**Available Languages:**\n{languages_list}"
         await ctx.respond(response_text, ephemeral=True)
 
+    @data.command(
+        name="delete",
+        description="Lösche alle deine Daten von ManagerX permanent."
+    )
+    async def delete_all_data(self, ctx: discord.ApplicationContext):
+        """Startet den doppelten Bestätigungsprozess zum Löschen aller User-Daten."""
+
+        embed = discord.Embed(
+            title=f"{emoji_warn} ACHTUNG: Datenlöschung",
+            description=(
+                "Bist du sicher, dass du alle deine Daten löschen möchtest?\n\n"
+                "**Was gelöscht wird:**\n"
+                "• XP, Level und Statistiken (Global & Server)\n"
+                "• Deine persönlichen Einstellungen\n\n"
+                "**Was NICHT gelöscht wird:**\n"
+                "• Moderationsdaten (Warnungen & Notizen)\n"
+                "*Hinweis: ManagerX ist es nicht gestattet, Moderationsdaten zu löschen.*\n\n"
+                "⚠️ **WICHTIG:** Dieser Vorgang ist **unwiderruflich**. "
+                "Deine persönlichen Daten sind **für immer** weg!"
+            ),
+            color=ERROR_COLOR
+        )
+        embed.set_author(name=AUTHOR)
+        embed.set_footer(text=FOOTER)
+
+        view = DeletionView(ctx.author.id, self.bot)
+        await ctx.respond(embed=embed, view=view, ephemeral=True)
+
+class DeletionView(discord.ui.View):
+    def __init__(self, user_id, bot):
+        super().__init__(timeout=60)
+        self.user_id = user_id
+        self.bot = bot
+
+    @discord.ui.button(label="Daten löschen", style=discord.ButtonStyle.danger, emoji="🗑️")
+    async def delete_button(self, button: discord.ui.Button, interaction: discord.Interaction):
+        if interaction.user.id != self.user_id:
+            return await interaction.response.send_message("Das ist nicht dein Menü!", ephemeral=True)
+
+        embed = discord.Embed(
+            title="⚠️ LETZTE BESTÄTIGUNG",
+            description=(
+                "Bist du wirklich ABSOLUT sicher?\n\n"
+                "Alle deine Statistiken, Level und Einstellungen werden **permanent** gelöscht.\n"
+                "ManagerX wird alle persönlichen Informationen über dich vergessen.\n\n"
+                "**WICHTIG:** Moderationsdaten (Warns/Notes) dürfen vom Bot nicht gelöscht werden und bleiben erhalten."
+            ),
+            color=ERROR_COLOR
+        )
+        embed.set_author(name=AUTHOR)
+        embed.set_footer(text=FOOTER)
+
+        view = DeletionConfirmationView(self.user_id, self.bot)
+        await interaction.response.edit_message(embed=embed, view=view)
+
+class DeletionConfirmationView(discord.ui.View):
+    def __init__(self, user_id, bot):
+        super().__init__(timeout=60)
+        self.user_id = user_id
+        self.bot = bot
+
+    @discord.ui.button(label="JA, ALLES LÖSCHEN", style=discord.ButtonStyle.danger, emoji="🔥")
+    async def confirm_button(self, button: discord.ui.Button, interaction: discord.Interaction):
+        if interaction.user.id != self.user_id:
+            return await interaction.response.send_message("Das ist nicht dein Menü!", ephemeral=True)
+
+        # Deletion logic implementation
+        try:
+            # Paths to databases
+            stats_db_path = "data/stats.db"
+            level_db_path = "data/levelsystem.db"
+            warn_db_path = "src/bot/cogs/moderation/Datenbanken/warns.db"
+            notes_db_path = "data/data/notes.db"
+
+            # 1. Stats & Level
+            # StatsDB cleanup
+            if os.path.exists(stats_db_path):
+                conn = sqlite3.connect(stats_db_path)
+                cursor = conn.cursor()
+                tables = ["messages", "voice_sessions", "global_user_levels", "daily_stats", "user_achievements", "active_voice_sessions"]
+                for table in tables:
+                    cursor.execute(f"DELETE FROM {table} WHERE user_id = ?", (self.user_id,))
+                conn.commit()
+                conn.close()
+
+            # LevelDatabase cleanup
+            if os.path.exists(level_db_path):
+                conn = sqlite3.connect(level_db_path)
+                cursor = conn.cursor()
+                tables = ["user_levels", "xp_boosts", "achievements", "temporary_roles"]
+                for table in tables:
+                    cursor.execute(f"DELETE FROM {table} WHERE user_id = ?", (self.user_id,))
+                conn.commit()
+                conn.close()
+
+            # 2. Settings (using the existing reset method if available)
+            if hasattr(self.bot, 'settings_db'):
+                if hasattr(self.bot.settings_db, 'reset_user_settings'):
+                    self.bot.settings_db.reset_user_settings(self.user_id)
+                elif hasattr(self.bot.settings_db, 'delete_user_data'): # Fallback to original code's preference
+                    self.bot.settings_db.delete_user_data(self.user_id)
+
+            # 3. Moderationsdaten (Warns & Notes) bleiben bestehen (User-Wunsch/Wichtigkeit)
+            pass
+
+        except Exception as e:
+            # Log error but proceed with message
+            print(f"Error during manual data deletion for {self.user_id}: {e}")
+
+        embed = discord.Embed(
+            title="✅ Daten erfolgreich gelöscht",
+            description="Alle deine Daten wurden permanent aus unserem System entfernt.",
+            color=SUCCESS_COLOR
+        )
+        embed.set_footer(text=FOOTER)
+        
+        await interaction.response.edit_message(embed=embed, view=None)
+
+    @discord.ui.button(label="Abbrechen", style=discord.ButtonStyle.secondary)
+    async def cancel_button(self, button: discord.ui.Button, interaction: discord.Interaction):
+        await interaction.response.edit_message(content="Vorgang abgebrochen. Deine Daten sind sicher.", embed=None, view=None)
+
 def setup(bot):
     """Setup function to add the cog to the bot."""
     bot.add_cog(Settings(bot))
\ No newline at end of file
diff --git a/src/bot/core/__init__.py b/src/bot/core/__init__.py
index 61d58e5..5e7678d 100644
--- a/src/bot/core/__init__.py
+++ b/src/bot/core/__init__.py
@@ -11,6 +11,7 @@
 from .database import DatabaseManager
 from .dashboard import DashboardTask
 from .utils import print_logo, format_uptime, truncate_text
+from .constants import *
 
 __all__ = [
     'ConfigLoader',
@@ -21,5 +22,28 @@
     'DashboardTask',
     'print_logo',
     'format_uptime',
-    'truncate_text'
+    'truncate_text',
+    'SUCCESS_COLOR',
+    'ERROR_COLOR',
+    'WARN_COLOR',
+    'INFO_COLOR',
+    'emoji_yes',
+    'emoji_no',
+    'emoji_warn',
+    'emoji_info',
+    'emoji_forbidden',
+    'emoji_member',
+    'emoji_staff',
+    'emoji_summary',
+    'emoji_slowmode',
+    'emoji_channel',
+    'emoji_moderator',
+    'emoji_statistics',
+    'emoji_annoattention',
+    'emoji_owner',
+    'emoji_delete',
+    'emoji_circleinfo',
+    'AUTHOR',
+    'FLOOTER',
+    'FOOTER'
 ]
\ No newline at end of file
diff --git a/src/bot/core/constants.py b/src/bot/core/constants.py
new file mode 100644
index 0000000..3e4498f
--- /dev/null
+++ b/src/bot/core/constants.py
@@ -0,0 +1,38 @@
+"""
+ManagerX - Constants
+====================
+
+Zentrale Definition von Emojis, Farben und anderen Konstanten.
+"""
+
+import discord
+
+# --- Farben ---
+SUCCESS_COLOR = discord.Color.green()
+ERROR_COLOR = discord.Color.red()
+WARN_COLOR = discord.Color.orange()
+INFO_COLOR = discord.Color.blue()
+
+# --- Emojis (Standard-Sets) ---
+# Hinweis: Diese können später durch Custom-Emojis ersetzt werden
+emoji_yes = "✅"
+emoji_no = "❌"
+emoji_warn = "⚠️"
+emoji_info = "ℹ️"
+emoji_forbidden = "🚫"
+emoji_member = "👤"
+emoji_staff = "🛡️"
+emoji_summary = "📝"
+emoji_slowmode = "⏳"
+emoji_channel = "📁"
+emoji_moderator = "👮"
+emoji_statistics = "📊"
+emoji_annoattention = "📣"
+emoji_owner = "👑"
+emoji_delete = "🗑️"
+emoji_circleinfo = "ℹ️"
+
+# --- Texte ---
+AUTHOR = "ManagerX Network"
+FLOOTER = "Powered by OPPRO.NET Network" # Typo im Original ("FLOOTER"), behalte es für Kompatibilität oder korrigiere es
+FOOTER = "Powered by OPPRO.NET Network"
diff --git a/src/bot/core/dashboard.py b/src/bot/core/dashboard.py
index e39f610..00ea0d8 100644
--- a/src/bot/core/dashboard.py
+++ b/src/bot/core/dashboard.py
@@ -57,7 +57,7 @@ async def _update_stats(self):
                 json.dump(stats, f, indent=4, ensure_ascii=False)
                 
         except Exception as e:
-            logger.error(Category.BOT, f"Dashboard-Update fehlgeschlagen: {e}")
+            logger.error(Category.DISCORD_BOT, f"Dashboard-Update fehlgeschlagen: {e}")
     
     def _get_uptime(self) -> str:
         """Berechnet die Bot-Uptime"""
@@ -77,19 +77,19 @@ def register(self):
         """Registriert den Task (startet ihn noch nicht)"""
         # Startzeit speichern
         self.bot.start_time = datetime.now()
-        logger.info(Category.DISCORD_BOT, "Dashboard-Task registriert")
+        
     
     def start(self):
         """Startet den Dashboard-Update-Task"""
         if self._task and not self._task.is_running():
             self._task.start()
-            logger.success(Category.DISCORD_BOT, "Dashboard-Task gestartet")
+            
     
     def stop(self):
         """Stoppt den Dashboard-Update-Task"""
         if self._task and self._task.is_running():
             self._task.cancel()
-            logger.info(Category.DISCORD_BOT, "Dashboard-Task gestoppt")
+            
     
     def is_running(self) -> bool:
         """
diff --git a/src/web/App.tsx b/src/web/App.tsx
index 35d4a00..beabac2 100644
--- a/src/web/App.tsx
+++ b/src/web/App.tsx
@@ -1,17 +1,42 @@
+import { lazy, Suspense } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { motion, AnimatePresence } from "framer-motion";
-import Index from "./pages/Index";
-import NotFound from "./pages/NotFound";
-import Impressum from "./pages/Impressum";
-import Datenschutz from "./pages/Datenschutz";
-import Nutzungsbedingungen from "./pages/Nutzungsbedingungen";
-import PluginsPage from "./pages/PluginsPage";
-import Status from "./pages/Status";
-import { License } from "./pages/License";
+
+// Lazy load all route components for better performance
+const Index = lazy(() => import("./pages/Index"));
+const NotFound = lazy(() => import("./pages/NotFound"));
+const Impressum = lazy(() => import("./pages/Impressum"));
+const Datenschutz = lazy(() => import("./pages/Datenschutz"));
+const Nutzungsbedingungen = lazy(() => import("./pages/Nutzungsbedingungen"));
+const PluginsPage = lazy(() => import("./pages/PluginsPage"));
+const Status = lazy(() => import("./pages/Status"));
+const License = lazy(() => import("./pages/License").then(module => ({ default: module.License })));
 
 const queryClient = new QueryClient();
 
+// Loading fallback component
+const PageLoader = () => (
+  <div className="min-h-screen bg-background flex items-center justify-center">
+    <div className="flex flex-col items-center gap-4">
+      <motion.div
+        className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-xl shadow-primary/30"
+        animate={{
+          rotate: 360,
+          scale: [1, 1.1, 1],
+        }}
+        transition={{
+          rotate: { duration: 2, repeat: Infinity, ease: "linear" },
+          scale: { duration: 1, repeat: Infinity, ease: "easeInOut" },
+        }}
+      >
+        <div className="w-8 h-8 border-4 border-white border-t-transparent rounded-full" />
+      </motion.div>
+      <p className="text-muted-foreground text-sm font-medium">Lädt...</p>
+    </div>
+  </div>
+);
+
 const AppContent = () => {
   const location = useLocation();
 
@@ -23,20 +48,22 @@ const AppContent = () => {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{
-          duration: 0.6,
+          duration: 0.25, // Reduced from 0.4 for even snappier transitions
           ease: "easeInOut",
         }}
       >
-        <Routes location={location}>
-          <Route path="/" element={<Index />} />
-          <Route path="/legal/imprint" element={<Impressum />} />
-          <Route path="/legal/privacy" element={<Datenschutz />} />
-          <Route path="/legal/terms" element={<Nutzungsbedingungen />} />
-          <Route path="/legal/license" element={<License />} />
-          <Route path="/plugins" element={<PluginsPage />} />
-          <Route path="/status" element={<Status />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
+        <Suspense fallback={<PageLoader />}>
+          <Routes location={location}>
+            <Route path="/" element={<Index />} />
+            <Route path="/legal/imprint" element={<Impressum />} />
+            <Route path="/legal/privacy" element={<Datenschutz />} />
+            <Route path="/legal/terms" element={<Nutzungsbedingungen />} />
+            <Route path="/legal/license" element={<License />} />
+            <Route path="/plugins" element={<PluginsPage />} />
+            <Route path="/status" element={<Status />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </Suspense>
       </motion.div>
     </AnimatePresence>
   );
diff --git a/src/web/components/CTA.tsx b/src/web/components/CTA.tsx
index f11b04f..d65bd6f 100644
--- a/src/web/components/CTA.tsx
+++ b/src/web/components/CTA.tsx
@@ -13,39 +13,41 @@ export const CTA = memo(function CTA() {
   return (
     <section id="support" className="py-32 relative overflow-hidden">
       {/* Premium Background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/8 to-accent/5" />
-      <div className="absolute top-1/2 left-1/4 w-[500px] h-[500px] bg-primary/10 blur-[150px] rounded-full" />
-      <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-accent/10 blur-[150px] rounded-full" />
+      <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/10 to-accent/5" />
+      <div className="absolute top-1/2 left-1/4 w-[500px] h-[500px] bg-primary/20 blur-[150px] rounded-full opacity-40" />
+      <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-accent/20 blur-[150px] rounded-full opacity-40" />
 
       <div className="container relative z-10 px-4">
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
-          transition={{ duration: 0.8, ease: "easeInOut" }}
-          className="glass rounded-[2.5rem] p-10 md:p-24 text-center max-w-5xl mx-auto border border-white/10 backdrop-blur-lg shadow-2xl"
+          transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
+          className="relative glass rounded-[3rem] p-12 md:p-28 text-center max-w-6xl mx-auto border border-white/10 backdrop-blur-3xl shadow-[0_50px_100px_rgba(0,0,0,0.5)] overflow-hidden"
         >
-          <motion.div 
+          {/* Decorative Elements */}
+          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-primary to-transparent" />
+
+          <motion.div
             initial={{ opacity: 0, scale: 0.9 }}
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ delay: 0.1, duration: 0.6, ease: "easeInOut" }}
-            className="inline-flex items-center gap-2 glass rounded-full px-6 py-3 mb-10 border border-accent/20"
+            className="inline-flex items-center gap-3 glass rounded-full px-8 py-4 mb-12 border border-primary/30 shadow-xl shadow-primary/10"
           >
-            <Sparkles className="w-4 h-4 text-accent animate-spin" style={{animationDuration: "3s"}} />
-            <span className="text-sm text-foreground/80 font-bold">100% Kostenlos & Open Source</span>
+            <Sparkles className="w-5 h-5 text-accent animate-pulse" />
+            <span className="text-sm text-foreground/90 font-black uppercase tracking-[0.2em]">100% Kostenlos & Open Source</span>
           </motion.div>
 
-          <motion.h2 
+          <motion.h2
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.2, duration: 0.7, ease: "easeInOut" }}
-            className="text-5xl md:text-7xl font-black mb-8 tracking-tighter leading-tight"
+            className="text-6xl md:text-8xl font-black mb-10 tracking-tighter leading-none"
           >
             <span className="text-foreground">Bereit für das </span>
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary to-accent font-black">nächste Level</span>
-            <span className="text-foreground">?</span>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary font-black drop-shadow-glow">nächste Level</span>
           </motion.h2>
 
           <motion.p
@@ -53,9 +55,9 @@ export const CTA = memo(function CTA() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.3 }}
-            className="text-lg md:text-2xl text-muted-foreground mb-14 max-w-3xl mx-auto leading-relaxed font-medium"
+            className="text-xl md:text-3xl text-muted-foreground/80 mb-16 max-w-4xl mx-auto leading-relaxed font-semibold tracking-tight"
           >
-            Füge ManagerX jetzt zu deinem Server hinzu und erlebe die moderne Discord Server-Verwaltung mit 90 innovativen Slash-Commands.
+            Füge ManagerX jetzt zu deinem Server hinzu und erlebe die moderne Discord Server-Verwaltung mit über 90 innovativen Befehlen.
           </motion.p>
 
           <motion.div
@@ -63,25 +65,25 @@ export const CTA = memo(function CTA() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.4 }}
-            className="flex flex-col sm:flex-row gap-5 justify-center mb-16"
+            className="flex flex-col sm:flex-row gap-8 justify-center mb-20"
           >
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.98 }}>
-              <a 
-                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot" 
-                target="_blank" 
+            <motion.div whileHover={{ scale: 1.05, y: -2 }} whileTap={{ scale: 0.98 }}>
+              <a
+                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
+                target="_blank"
                 rel="noopener noreferrer"
-                className="group inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-gradient-to-r from-primary to-accent text-primary-foreground font-bold text-lg hover:shadow-2xl hover:shadow-primary/50 transition-all"
+                className="group inline-flex items-center gap-4 px-12 py-6 rounded-[2rem] bg-gradient-to-r from-primary to-accent text-white font-black text-xl hover:shadow-[0_20px_50px_rgba(255,0,0,0.5)] transition-all uppercase tracking-widest"
               >
                 <span>Bot einladen</span>
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
+                <ArrowRight className="w-6 h-6 group-hover:translate-x-3 transition-transform" />
               </a>
             </motion.div>
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.98 }}>
-              <a 
-                href="https://discord.gg" 
-                target="_blank" 
+            <motion.div whileHover={{ scale: 1.05, y: -2 }} whileTap={{ scale: 0.98 }}>
+              <a
+                href="https://discord.gg/oppro"
+                target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-8 py-4 rounded-2xl glass hover:bg-white/10 border border-white/20 font-bold text-lg transition-all"
+                className="inline-flex items-center gap-3 px-12 py-6 rounded-[2rem] glass hover:bg-white/10 border border-white/10 font-black text-xl transition-all shadow-xl uppercase tracking-widest"
               >
                 Support Server
               </a>
@@ -89,23 +91,24 @@ export const CTA = memo(function CTA() {
           </motion.div>
 
           {/* Bottom Stats */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0 }}
             whileInView={{ opacity: 1 }}
             viewport={{ once: true }}
             transition={{ delay: 0.5 }}
-            className="flex flex-wrap justify-center gap-8 md:gap-16 pt-10 border-t border-white/10"
+            className="grid grid-cols-1 sm:grid-cols-3 gap-10 md:gap-20 pt-16 border-t border-white/5"
           >
             {stats.map((stat, idx) => (
-              <motion.div 
+              <motion.div
                 key={stat.label}
-                whileHover={{ y: -5 }}
-                className="text-center"
+                whileHover={{ y: -8 }}
+                transition={{ type: "spring", stiffness: 300 }}
+                className="text-center group"
               >
-                <div className="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-1">
+                <div className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-3 group-hover:scale-110 transition-transform duration-500">
                   {stat.value}
                 </div>
-                <div className="text-sm text-muted-foreground font-semibold uppercase tracking-wide">
+                <div className="text-sm text-muted-foreground font-black uppercase tracking-[0.3em]">
                   {stat.label}
                 </div>
               </motion.div>
diff --git a/src/web/components/FeatureCard.tsx b/src/web/components/FeatureCard.tsx
index 2e37368..3ecd813 100644
--- a/src/web/components/FeatureCard.tsx
+++ b/src/web/components/FeatureCard.tsx
@@ -12,80 +12,94 @@ interface FeatureCardProps {
 }
 
 const categoryColors = {
-  moderation: "text-red-400",
-  community: "text-purple-400",
-  social: "text-blue-400",
-  interactive: "text-yellow-400",
+  moderation: "text-[hsl(var(--moderation))]",
+  community: "text-[hsl(var(--community))]",
+  social: "text-[hsl(var(--social))]",
+  interactive: "text-[hsl(var(--interactive))]",
 };
 
 const categoryBgColors = {
-  moderation: "bg-red-500/10",
-  community: "bg-purple-500/10",
-  social: "bg-blue-500/10",
-  interactive: "bg-yellow-500/10",
+  moderation: "bg-[hsl(var(--moderation)/0.15)]",
+  community: "bg-[hsl(var(--community)/0.15)]",
+  social: "bg-[hsl(var(--social)/0.15)]",
+  interactive: "bg-[hsl(var(--interactive)/0.15)]",
 };
 
-export const FeatureCard = memo(function FeatureCard({ 
-  icon: Icon, 
-  title, 
-  features, 
-  category, 
-  delay = 0 
+const categoryGlows = {
+  moderation: "shadow-[hsl(var(--moderation)/0.2)]",
+  community: "shadow-[hsl(var(--community)/0.2)]",
+  social: "shadow-[hsl(var(--social)/0.2)]",
+  interactive: "shadow-[hsl(var(--interactive)/0.2)]",
+};
+
+export const FeatureCard = memo(function FeatureCard({
+  icon: Icon,
+  title,
+  features,
+  category,
+  delay = 0
 }: FeatureCardProps) {
   return (
     <motion.div
       initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-100px" }}
-      transition={{ duration: 0.6, delay, ease: "easeInOut" }}
-      whileHover={{ y: -8, boxShadow: "0 20px 40px rgba(var(--primary), 0.15)" }}
-      className="group glass rounded-3xl p-8 hover:bg-card/80 transition-all duration-500 ease-out border border-white/10 backdrop-blur-lg"
+      transition={{ duration: 0.35, delay, type: "spring", stiffness: 200, damping: 20 }}
+      whileHover={{ y: -15, scale: 1.05 }}
+      whileTap={{ scale: 0.98 }}
+      className="group relative glass rounded-[2.5rem] p-8 hover:bg-card/95 transition-all duration-300 ease-out border border-white/5 backdrop-blur-3xl overflow-hidden shadow-2xl"
     >
+      {/* Dynamic Glow Orb */}
+      <div className={cn(
+        "absolute -top-20 -right-20 w-40 h-40 rounded-full blur-[80px] opacity-0 group-hover:opacity-50 transition-all duration-500",
+        categoryBgColors[category].replace("bg-", "bg-")
+      )} />
+
       {/* Header */}
-      <div className="flex items-start justify-between mb-8">
-        <motion.div 
-          whileHover={{ scale: 1.1, rotate: 5 }}
+      <div className="flex items-start justify-between mb-10">
+        <motion.div
+          whileHover={{ scale: 1.2, rotate: 12 }}
+          transition={{ type: "spring", stiffness: 400, damping: 10 }}
           className={cn(
-            "w-16 h-16 rounded-2xl flex items-center justify-center transition-all duration-300 shadow-lg",
-            categoryBgColors[category]
+            "w-20 h-20 rounded-2xl flex items-center justify-center transition-all duration-300 shadow-xl border border-white/5 relative overflow-hidden",
+            categoryBgColors[category],
+            categoryGlows[category]
           )}
         >
-          <Icon className={cn("w-8 h-8", categoryColors[category])} />
+          <div className="absolute inset-0 bg-white/5 group-hover:bg-transparent transition-colors" />
+          <Icon className={cn("w-10 h-10", categoryColors[category])} />
         </motion.div>
       </div>
-      
-      <motion.h3 
-        initial={{ opacity: 0 }}
-        whileInView={{ opacity: 1 }}
-        transition={{ delay: delay + 0.2 }}
-        className="text-2xl font-bold mb-6 text-foreground group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-primary group-hover:to-accent transition-all"
+
+      <motion.h3
+        className="text-3xl font-black mb-8 text-foreground group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-primary group-hover:to-accent transition-all duration-300 tracking-tighter"
       >
         {title}
       </motion.h3>
-      
-      <div className="space-y-4">
+
+      <div className="space-y-5">
         {features.map((feature, index) => (
           <motion.div
             key={index}
-            initial={{ opacity: 0, x: -10 }}
+            initial={{ opacity: 0, x: -15 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
-            transition={{ delay: delay + 0.1 + index * 0.05 }}
-            className="flex items-start gap-4 text-sm text-muted-foreground group-hover:text-foreground transition-colors"
+            transition={{ delay: delay + 0.05 + index * 0.02 }}
+            className="flex items-start gap-4 text-[15px] font-medium text-muted-foreground group-hover:text-foreground/90 transition-colors"
           >
-            <motion.div 
-              whileHover={{ scale: 1.2 }}
-              className={cn(
-                "w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1 shadow-md",
-                categoryBgColors[category]
-              )}
-            >
+            <div className={cn(
+              "w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 shadow-lg border border-white/5 group-hover:scale-110 transition-transform",
+              categoryBgColors[category]
+            )}>
               <Check className={cn("w-3.5 h-3.5", categoryColors[category])} />
-            </motion.div>
-            <span className="leading-relaxed">{feature}</span>
+            </div>
+            <span className="leading-snug">{feature}</span>
           </motion.div>
         ))}
       </div>
+
+      {/* Playful hover line */}
+      <div className="absolute bottom-0 left-0 w-full h-1.5 bg-gradient-to-r from-transparent via-primary to-transparent opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-300" />
     </motion.div>
   );
 });
diff --git a/src/web/components/Features.tsx b/src/web/components/Features.tsx
index 456a729..13713ea 100644
--- a/src/web/components/Features.tsx
+++ b/src/web/components/Features.tsx
@@ -1,10 +1,10 @@
 import { memo } from "react";
 import { motion } from "framer-motion";
 import { FeatureCard } from "./FeatureCard";
-import { 
-  Shield, 
+import {
+  Shield,
   Award,
-  Globe, 
+  Globe,
   Gamepad2,
   Sparkles
 } from "lucide-react";
@@ -71,42 +71,42 @@ export const Features = memo(function Features() {
       <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/5 to-accent/5" />
       <div className="absolute top-1/4 left-0 w-[600px] h-[600px] bg-primary/10 blur-[150px] rounded-full" />
       <div className="absolute bottom-1/4 right-0 w-[700px] h-[700px] bg-accent/10 blur-[150px] rounded-full" />
-      
+
       <div className="container relative z-10 px-4">
         {/* Section Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
-          transition={{ duration: 0.7, ease: "easeInOut" }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
           className="text-center max-w-3xl mx-auto mb-24"
         >
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, scale: 0.9 }}
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
-            transition={{ duration: 0.6, ease: "easeInOut" }}
+            transition={{ duration: 0.35, ease: "easeInOut" }}
             className="inline-flex items-center gap-2 glass rounded-full px-6 py-3 mb-10 border border-accent/20"
           >
-            <Sparkles className="w-4 h-4 text-accent animate-spin" style={{animationDuration: "3s"}} />
+            <Sparkles className="w-4 h-4 text-accent animate-spin" style={{ animationDuration: "3s" }} />
             <span className="text-sm text-foreground/80 font-bold">Über 90 innovative Befehle</span>
           </motion.div>
-          
-          <motion.h2 
+
+          <motion.h2
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            transition={{ delay: 0.1, duration: 0.7, ease: "easeInOut" }}
+            transition={{ delay: 0.05, duration: 0.4, ease: "easeInOut" }}
             className="text-5xl md:text-7xl font-black mb-8 tracking-tighter leading-tight"
           >
             <span className="text-foreground">Alles, was du </span>
             <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-black">wirklich brauchst</span>
           </motion.h2>
-          <motion.p 
+          <motion.p
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            transition={{ delay: 0.2 }}
+            transition={{ delay: 0.1 }}
             className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed font-medium"
           >
             Ein Bot für alle deine Server-Bedürfnisse. Moderation, Engagement, Social Features und interaktive Tools.
@@ -122,7 +122,7 @@ export const Features = memo(function Features() {
               title={category.title}
               features={category.features}
               category={category.category}
-              delay={index * 0.1}
+              delay={index * 0.05} // Reduced from 0.1 for faster animations
             />
           ))}
         </div>
diff --git a/src/web/components/Footer.tsx b/src/web/components/Footer.tsx
index f68382d..ebcf529 100644
--- a/src/web/components/Footer.tsx
+++ b/src/web/components/Footer.tsx
@@ -10,38 +10,39 @@ const socialLinks = [
 
 export const Footer = memo(function Footer() {
   return (
-    <footer className="relative py-32 bg-background overflow-hidden">
+    <footer className="relative py-32 bg-background overflow-hidden border-t border-white/5">
       {/* Premium Hintergrund-Effekte */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
       <div className="absolute top-0 left-0 w-[400px] h-[400px] bg-primary/10 blur-[150px] rounded-full pointer-events-none" />
       <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent/10 blur-[150px] rounded-full pointer-events-none" />
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.15),rgba(255,255,255,0))]" />
-      
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,0,0,0.05),transparent)]" />
+
       <div className="container relative z-10 px-4">
         <div className="flex flex-col items-center">
-          
+
           {/* --- HERO LOGO REPLICA --- */}
           <motion.div
             initial={{ opacity: 0, scale: 0.9 }}
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
-            className="flex items-center justify-center gap-5 mb-12"
+            className="flex items-center justify-center gap-5 mb-14"
           >
-            <div className="relative">
-              <motion.div 
-                whileHover={{ scale: 1.05, rotate: 5 }}
+            <div className="relative group">
+              <motion.div
+                whileHover={{ scale: 1.1, rotate: 10 }}
                 transition={{ type: "spring", stiffness: 300 }}
-                className="w-28 h-28 rounded-3xl bg-gradient-to-br from-primary via-primary/80 to-accent flex items-center justify-center shadow-2xl shadow-primary/40 border border-white/10 backdrop-blur-sm"
+                className="w-32 h-32 rounded-[2rem] bg-gradient-to-br from-primary via-primary/90 to-accent flex items-center justify-center shadow-2xl shadow-primary/40 border border-white/10 backdrop-blur-xl relative overflow-hidden"
               >
-                <Shield className="w-14 h-14 text-primary-foreground" />
+                <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                <Shield className="w-16 h-16 text-white drop-shadow-glow" />
               </motion.div>
-              <motion.div 
+              <motion.div
                 animate={{ scale: [1, 1.2, 1] }}
-                transition={{ duration: 2, repeat: Infinity }}
-                className="absolute -bottom-2 -right-2 w-10 h-10 bg-gradient-to-br from-accent to-primary rounded-full flex items-center justify-center shadow-xl shadow-accent/50 border border-white/10"
+                transition={{ duration: 2.5, repeat: Infinity }}
+                className="absolute -bottom-3 -right-3 w-12 h-12 bg-gradient-to-br from-accent to-primary rounded-2xl flex items-center justify-center shadow-xl shadow-accent/50 border border-white/10 z-10"
               >
-                <Sparkles className="w-5 h-5 text-accent-foreground" />
+                <Sparkles className="w-6 h-6 text-white" />
               </motion.div>
             </div>
           </motion.div>
@@ -52,10 +53,10 @@ export const Footer = memo(function Footer() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-6xl md:text-7xl font-black mb-6 tracking-tighter text-center bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent"
+            className="text-6xl md:text-8xl font-black mb-8 tracking-tighter text-center"
           >
-            <span className="italic">Manager</span>
-            <span className="ml-2">X</span>
+            <span className="text-foreground">Manager</span>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary ml-2 filter drop-shadow-glow">X</span>
           </motion.h2>
 
           {/* --- SLOGAN --- */}
@@ -64,22 +65,25 @@ export const Footer = memo(function Footer() {
             whileInView={{ opacity: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="text-xl md:text-2xl text-muted-foreground mb-20 font-bold tracking-tight flex items-center gap-4 flex-wrap justify-center"
+            className="text-xl md:text-3xl text-muted-foreground/80 mb-24 font-black tracking-tight flex items-center gap-6 flex-wrap justify-center uppercase italic"
           >
-            <span className="flex items-center gap-2"><Zap className="w-5 h-5 text-primary" /> Sicher</span>
-            <span className="text-primary/40">•</span> 
-            <span className="flex items-center gap-2"><Rocket className="w-5 h-5 text-accent" /> Schnell</span>
-            <span className="text-primary/40">•</span> 
-            <span className="flex items-center gap-2"><Code2 className="w-5 h-5 text-primary" /> Open Source</span>
+            <span className="flex items-center gap-2 hover:text-primary transition-colors cursor-default"><Zap className="w-6 h-6 text-primary" /> Sicher</span>
+            <span className="text-primary/20">•</span>
+            <span className="flex items-center gap-2 hover:text-accent transition-colors cursor-default"><Rocket className="w-6 h-6 text-accent" /> Schnell</span>
+            <span className="text-primary/20">•</span>
+            <Link to="/legal/license" className="flex items-center gap-2 text-muted-foreground/80 hover:text-primary transition-colors cursor-pointer group">
+              <Code2 className="w-6 h-6 text-primary group-hover:rotate-12 transition-transform" />
+              <span>Open Source</span>
+            </Link>
           </motion.p>
 
           {/* --- SOCIAL BUTTONS --- */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.3 }}
-            className="flex flex-wrap justify-center gap-4 mb-24"
+            className="flex flex-wrap justify-center gap-6 mb-32"
           >
             {socialLinks.map((link, idx) => (
               <motion.a
@@ -87,168 +91,151 @@ export const Footer = memo(function Footer() {
                 href={link.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                whileHover={{ y: -6, boxShadow: "0 20px 40px rgba(var(--primary), 0.2)" }}
+                whileHover={{ y: -8, scale: 1.05 }}
                 whileTap={{ scale: 0.98 }}
                 transition={{ delay: idx * 0.1 }}
-                className="group px-8 py-4 rounded-2xl border border-primary/20 bg-primary/5 backdrop-blur-sm flex items-center gap-3 text-sm font-bold hover:bg-primary/10 transition-all shadow-lg hover:shadow-primary/20 hover:border-primary/40"
+                className="group px-10 py-5 rounded-[1.5rem] border border-primary/20 bg-primary/5 backdrop-blur-md flex items-center gap-4 text-sm font-black uppercase tracking-widest hover:bg-primary/10 transition-all shadow-xl hover:shadow-primary/30 hover:border-primary/40 text-white"
               >
-                <link.icon className="w-5 h-5 text-primary group-hover:text-accent transition-colors" />
+                <link.icon className="w-6 h-6 text-primary group-hover:text-accent transition-colors" />
                 {link.label}
               </motion.a>
             ))}
           </motion.div>
 
           {/* --- NAVIGATION & TECH GRID --- */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.4 }}
-            className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12 text-center md:text-left border-y border-white/10 py-20 w-full max-w-6xl mb-20 backdrop-blur-sm"
+            className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-16 text-center md:text-left border-y border-white/5 py-24 w-full max-w-7xl mb-24 backdrop-blur-sm"
           >
-            
-            <motion.div 
-              whileHover={{ y: -5 }}
-              className="flex flex-col gap-5 p-5 rounded-2xl hover:bg-white/5 transition-all"
-            >
-              <span className="text-[11px] font-black uppercase tracking-widest text-primary">Schnellzugriff</span>
-              <a href="#features" className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Star className="w-3.5 h-3.5 text-primary flex-shrink-0" />
+            {/* column 1 */}
+            <div className="flex flex-col gap-6">
+              <span className="text-xs font-black uppercase tracking-[0.4em] text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-2">Navigation</span>
+              <a href="#features" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Star className="w-4 h-4 text-primary transition-transform group-hover:rotate-12" />
                 <span className="group-hover:translate-x-1 transition-transform">Features</span>
               </a>
-              <a href="#stats" className="text-sm text-muted-foreground hover:text-accent transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <BarChart3 className="w-3.5 h-3.5 text-accent flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Stats</span>
-              </a>
-              <a href="#commands" className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Terminal className="w-3.5 h-3.5 text-primary flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Commands</span>
+              <a href="#stats" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <BarChart3 className="w-4 h-4 text-accent transition-transform group-hover:scale-110" />
+                <span className="group-hover:translate-x-1 transition-transform">Statistiken</span>
               </a>
-            </motion.div>
+              <Link to="/plugins" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Terminal className="w-4 h-4 text-primary transition-transform group-hover:rotate-12" />
+                <span className="group-hover:translate-x-1 transition-transform">Plugin System</span>
+              </Link>
+            </div>
 
-            <motion.div 
-              whileHover={{ y: -5 }}
-              className="flex flex-col gap-5 p-5 rounded-2xl hover:bg-white/5 transition-all"
-            >
-              <span className="text-[11px] font-black uppercase tracking-widest text-primary">Links</span>
-              <a href="https://docs.oppro-network.de/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-accent flex items-center justify-center md:justify-start gap-2 font-medium group">
-                <ExternalLink className="w-3.5 h-3.5 text-accent flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Docs</span>
+            {/* column 2 */}
+            <div className="flex flex-col gap-6">
+              <span className="text-xs font-black uppercase tracking-[0.4em] text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-2">Ressourcen</span>
+              <a href="https://docs.oppro-network.de/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <ExternalLink className="w-4 h-4 text-accent" />
+                <span className="group-hover:translate-x-1 transition-transform">Documentation</span>
               </a>
-              <a href="https://discord.com" className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Users className="w-3.5 h-3.5 text-primary flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Invite Bot</span>
+              <a href="https://discord.gg/oppro" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Users className="w-4 h-4 text-primary" />
+                <span className="group-hover:translate-x-1 transition-transform">Support Server</span>
               </a>
-              <a href="https://status.oppro-network.de" className="text-sm text-muted-foreground hover:text-accent transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Activity className="w-3.5 h-3.5 text-accent flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Status Page</span>
-              </a>
-            </motion.div>
+              <Link to="/status" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Activity className="w-4 h-4 text-accent" />
+                <span className="group-hover:translate-x-1 transition-transform">Network Status</span>
+              </Link>
+            </div>
 
-            <motion.div 
-              whileHover={{ y: -5 }}
-              className="flex flex-col gap-5 p-5 rounded-2xl hover:bg-white/5 transition-all"
-            >
-              <span className="text-[11px] font-black uppercase tracking-widest text-primary">Rechtliches</span>
-              <Link to="/legal/privacy" className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Lock className="w-3.5 h-3.5 text-primary flex-shrink-0" />
+            {/* column 3 */}
+            <div className="flex flex-col gap-6">
+              <span className="text-xs font-black uppercase tracking-[0.4em] text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-2">Legal</span>
+              <Link to="/legal/privacy" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Lock className="w-4 h-4 text-primary" />
                 <span className="group-hover:translate-x-1 transition-transform">Datenschutz</span>
               </Link>
-              <Link to="/legal/imprint" className="text-sm text-muted-foreground hover:text-accent transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Info className="w-3.5 h-3.5 text-accent flex-shrink-0" />
+              <Link to="/legal/imprint" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Info className="w-4 h-4 text-accent" />
                 <span className="group-hover:translate-x-1 transition-transform">Impressum</span>
               </Link>
-              <Link to="/legal/terms" className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <FileCheck className="w-3.5 h-3.5 text-primary flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Nutzungsbedingungen</span>
+              <Link to="/legal/terms" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <FileCheck className="w-4 h-4 text-primary" />
+                <span className="group-hover:translate-x-1 transition-transform">AGB</span>
               </Link>
-              <Link to="/legal/license" className="text-sm text-muted-foreground hover:text-accent font-medium flex items-center justify-center md:justify-start gap-2 group">
-                <Code2 className="w-3.5 h-3.5 text-accent flex-shrink-0" />
-                <span className="group-hover:translate-x-1 transition-transform">Open Source</span>
+              <Link to="/legal/license" className="text-sm text-muted-foreground hover:text-white transition-all font-bold group flex items-center justify-center md:justify-start gap-3">
+                <Code2 className="w-4 h-4 text-accent" />
+                <span className="group-hover:translate-x-1 transition-transform">Lizenz</span>
               </Link>
-            </motion.div>
+            </div>
 
-            <motion.div 
-              whileHover={{ y: -5 }}
-              className="flex flex-col gap-5 p-5 rounded-2xl hover:bg-white/5 transition-all"
-            >
-              <span className="text-[11px] font-black uppercase tracking-widest text-primary">System Architecture</span>
-              <div className="space-y-5">
-                <div className="space-y-2">
-                  <div className="flex justify-between text-[10px] font-mono tracking-tighter">
-                    <span className="text-foreground font-bold">Python (Core)</span>
-                    <span className="text-primary font-bold">66.6%</span>
+            {/* column 4 */}
+            <div className="flex flex-col gap-8">
+              <span className="text-xs font-black uppercase tracking-[0.4em] text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-2">Architecture</span>
+              <div className="space-y-6">
+                <div className="space-y-3">
+                  <div className="flex justify-between text-[11px] font-black uppercase tracking-widest">
+                    <span className="text-foreground">Python Core</span>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">66.6%</span>
                   </div>
-                  <div className="h-2 w-full bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
+                  <div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
+                    <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: "66.6%" }}
                       viewport={{ once: true }}
                       transition={{ duration: 1.5, ease: "easeOut" }}
-                      className="h-full bg-gradient-to-r from-primary to-primary/50 shadow-[0_0_12px_rgba(var(--primary),0.5)] rounded-full" 
+                      className="h-full bg-gradient-to-r from-primary to-accent shadow-[0_0_15px_rgba(255,0,0,0.5)] rounded-full"
                     />
                   </div>
                 </div>
 
-                <div className="space-y-2">
-                  <div className="flex justify-between text-[10px] font-mono tracking-tighter">
-                    <span className="text-foreground font-bold">TypeScript (Web)</span>
-                    <span className="text-accent font-bold">32.0%</span>
+                <div className="space-y-3">
+                  <div className="flex justify-between text-[11px] font-black uppercase tracking-widest">
+                    <span className="text-foreground">React/TS Web</span>
+                    <span className="text-accent">32.0%</span>
                   </div>
-                  <div className="h-2 w-full bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
+                  <div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
+                    <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: "32.0%" }}
                       viewport={{ once: true }}
                       transition={{ duration: 1.5, ease: "easeOut", delay: 0.2 }}
-                      className="h-full bg-gradient-to-r from-accent to-accent/50 shadow-[0_0_12px_rgba(var(--accent),0.5)] rounded-full" 
+                      className="h-full bg-gradient-to-r from-accent to-primary shadow-[0_0_15px_rgba(255,0,0,0.3)] rounded-full"
                     />
                   </div>
                 </div>
 
-                <div className="flex items-center gap-3 pt-2">
-                  <div className="flex items-center gap-1.5">
-                    <div className="w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.6)]" />
-                    <span className="text-[9px] font-mono text-muted-foreground font-medium">CSS 1.1%</span>
+                <div className="flex items-center gap-4 pt-2">
+                  <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/5 border border-primary/20 shadow-lg">
+                    <Terminal className="w-4 h-4 text-primary" />
+                    <span className="text-[10px] font-black uppercase tracking-widest text-primary">v2.0.0 Stable</span>
                   </div>
-                  <motion.div 
-                    whileHover={{ scale: 1.05 }}
-                    className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-accent/10 to-accent/5 border border-accent/20 hover:border-accent/40 transition-all"
-                  >
-                    <Terminal className="w-3.5 h-3.5 text-accent" />
-                    <span className="text-[9px] font-mono text-accent font-bold">V2.0.0</span>
-                  </motion.div>
                 </div>
               </div>
-            </motion.div>
+            </div>
           </motion.div>
 
           {/* --- FOOTER BOTTOM --- */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6, delay: 0.5 }}
-            className="flex flex-col md:flex-row items-center justify-between w-full gap-8 pt-8"
+            className="flex flex-col md:flex-row items-center justify-between w-full gap-10 pt-10"
           >
-            <motion.div 
-              whileHover={{ scale: 1.05 }}
-              className="flex items-center gap-3 text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <span>Built with</span>
-              <Heart className="w-4 h-4 text-red-500 fill-red-500 animate-pulse" />
-              <span>by ManagerX Dev Team</span>
-            </motion.div>
-            <motion.div 
+            <motion.div
               whileHover={{ scale: 1.05 }}
-              className="flex items-center gap-3 opacity-50 text-[11px] font-mono uppercase font-bold hover:opacity-100 transition-opacity"
+              className="flex items-center gap-4 text-xs font-black uppercase tracking-[0.3em] text-muted-foreground hover:text-white transition-all cursor-default"
             >
-              <Code2 className="w-3.5 h-3.5 text-primary" />
-              <span>Open Source Project</span>
+              <span>Made with</span>
+              <Heart className="w-5 h-5 text-primary fill-primary animate-pulse" />
+              <span>by ManagerX Team</span>
             </motion.div>
-            <p className="text-[11px] font-mono text-muted-foreground/60 hover:text-muted-foreground/100 transition-colors font-bold">
-              © {new Date().getFullYear()} / ALL RIGHTS RESERVED
-            </p>
+            <div className="flex items-center gap-10">
+              <Link to="/legal/license" className="flex items-center gap-3 opacity-40 text-xs font-black uppercase tracking-widest hover:opacity-100 hover:text-primary transition-all cursor-pointer">
+                <Code2 className="w-4 h-4 text-primary" />
+                <span>Open Source Community</span>
+              </Link>
+              <p className="text-xs font-black text-muted-foreground/50 hover:text-white transition-all tracking-[0.3em] uppercase">
+                © {new Date().getFullYear()} ALL RIGHTS RESERVED
+              </p>
+            </div>
           </motion.div>
         </div>
       </div>
diff --git a/src/web/components/Hero.tsx b/src/web/components/Hero.tsx
index 78471e6..00ca6f6 100644
--- a/src/web/components/Hero.tsx
+++ b/src/web/components/Hero.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Shield, Users, MessageCircle, Sparkles, Zap, Rocket, Code2, ArrowRight } from "lucide-react";
 
@@ -13,7 +14,7 @@ const StatCard = memo(({ stat, index }: { stat: typeof stats[0]; index: number }
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     animate={{ opacity: 1, y: 0 }}
-    transition={{ delay: 0.6 + index * 0.1 }}
+    transition={{ delay: 0.35 + index * 0.05 }}
     className="glass rounded-2xl px-8 py-5 text-center min-w-[140px] hover:bg-card/80 transition-colors duration-300"
   >
     <div className="flex items-center justify-center gap-2 mb-2">
@@ -30,15 +31,24 @@ export const Hero = memo(function Hero() {
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
       {/* Premium Animated Background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-primary/8 via-background to-accent/5" />
-      
-      {/* Animated gradient orbs */}
-      <div className="absolute top-1/4 -left-48 w-96 h-96 bg-primary/20 rounded-full opacity-60 blur-3xl animate-pulse" />
-      <div className="absolute -bottom-32 right-1/4 w-96 h-96 bg-accent/20 rounded-full opacity-60 blur-3xl animate-pulse animation-delay-2" />
-      <div className="absolute top-1/2 -right-32 w-80 h-80 bg-primary/10 rounded-full opacity-40 blur-3xl" />
-      
+      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-background to-accent/5" />
+
+      {/* Animated gradient orbs - Optimized blur/size for legacy hardware */}
+      <div
+        style={{ willChange: "opacity" }}
+        className="absolute top-1/4 -left-48 w-96 h-96 bg-primary/20 rounded-full opacity-50 blur-[80px] animate-pulse"
+      />
+      <div
+        style={{ willChange: "opacity" }}
+        className="absolute -bottom-32 right-1/4 w-96 h-96 bg-accent/15 rounded-full opacity-50 blur-[80px] animate-pulse animation-delay-2000"
+      />
+      <div
+        style={{ willChange: "opacity" }}
+        className="absolute top-1/2 -right-32 w-80 h-80 bg-primary/10 rounded-full opacity-30 blur-[60px]"
+      />
+
       {/* Animated Grid Pattern */}
-      <div className="absolute inset-0 opacity-[0.02] animate-drift grid-pattern" />
+      <div className="absolute inset-0 opacity-[0.03] animate-drift grid-pattern" />
 
       <div className="container relative z-10 px-4 py-20">
         <div className="text-center max-w-5xl mx-auto">
@@ -46,94 +56,111 @@ export const Hero = memo(function Hero() {
           <motion.div
             initial={{ opacity: 0, y: 20, scale: 0.9 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
-            transition={{ delay: 0.1, duration: 0.7, ease: "easeInOut" }}
-            className="inline-flex items-center gap-3 glass rounded-full px-6 py-3 mb-12 border border-accent/30 backdrop-blur-md"
+            transition={{ delay: 0.05, duration: 0.4, ease: "easeInOut" }}
+            className="inline-flex items-center gap-3 glass rounded-full px-6 py-3 mb-12 border border-primary/30 backdrop-blur-md shadow-lg shadow-primary/10"
           >
-            <span className="w-2.5 h-2.5 bg-accent rounded-full animate-pulse" />
-            <span className="text-sm text-foreground/90 font-bold">Version 2.0 in Development</span>
+            <Sparkles className="w-4 h-4 text-accent" />
+            <span className="text-sm text-foreground/90 font-bold uppercase tracking-widest">Version 2.0.0 Stable</span>
             <Sparkles className="w-4 h-4 text-accent" />
           </motion.div>
 
           {/* Logo */}
           <motion.div
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ delay: 0.2, duration: 0.8, ease: "easeInOut" }}
-            className="flex items-center justify-center gap-5 mb-12"
+            initial={{ opacity: 0, scale: 0.8, rotate: -10 }}
+            animate={{ opacity: 1, scale: 1, rotate: 0 }}
+            transition={{ duration: 0.35, type: "spring", stiffness: 260, damping: 20 }}
+            className="flex items-center justify-center gap-5 mb-14"
           >
-            <div className="relative">
-              <motion.div 
-                animate={{ scale: [1, 1.02, 1] }}
-                transition={{ duration: 3, repeat: Infinity }}
-                className="w-28 h-28 rounded-3xl bg-gradient-to-br from-primary via-primary/80 to-accent flex items-center justify-center shadow-2xl shadow-primary/50 border border-white/20 backdrop-blur-sm"
+            <div className="relative group cursor-pointer">
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 20, repeat: Infinity, ease: "linear" }} // Slowed down from 12s for better performance
+                className="absolute inset-0 bg-gradient-to-tr from-primary via-accent to-primary rounded-[2.5rem] blur-xl opacity-40 group-hover:opacity-100 transition-opacity duration-300"
+              />
+              <motion.div
+                whileHover={{ scale: 1.15, rotate: 5 }}
+                whileTap={{ scale: 0.9 }}
+                transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                className="relative w-32 h-32 rounded-[2rem] bg-gradient-to-br from-primary via-primary/90 to-accent/80 flex items-center justify-center shadow-2xl shadow-primary/60 border border-white/20 backdrop-blur-xl group-hover:shadow-primary/80 transition-shadow"
               >
-                <Shield className="w-14 h-14 text-primary-foreground" />
+                <Shield className="w-16 h-16 text-white drop-shadow-glow" />
               </motion.div>
-              <motion.div 
-                animate={{ scale: [1, 1.2, 1], rotate: [0, 10, 0] }}
-                transition={{ duration: 2, repeat: Infinity }}
-                className="absolute -bottom-3 -right-3 w-10 h-10 bg-gradient-to-br from-accent to-primary rounded-full flex items-center justify-center shadow-xl shadow-accent/60 border border-white/20"
+              <motion.div
+                animate={{ scale: [1, 1.2, 1], rotate: [0, 15, 0] }}
+                transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+                className="absolute -bottom-4 -right-4 w-12 h-12 bg-gradient-to-br from-accent to-primary rounded-2xl flex items-center justify-center shadow-xl shadow-accent/40 border border-white/20 z-20 group-hover:rotate-45 transition-transform"
               >
-                <Sparkles className="w-5 h-5 text-accent-foreground" />
+                <Zap className="w-6 h-6 text-white" />
               </motion.div>
             </div>
           </motion.div>
 
           {/* Title */}
           <motion.h1
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.3, duration: 0.8, ease: "easeInOut" }}
-            className="text-7xl md:text-8xl lg:text-9xl font-black mb-10 tracking-tighter leading-none"
+            transition={{ delay: 0.15, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+            className="text-7xl md:text-8xl lg:text-[10rem] font-black mb-10 tracking-tighter leading-none"
           >
             <span className="text-foreground">Manager</span>
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary to-accent ml-2 drop-shadow-2xl">X</span>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary ml-2 filter drop-shadow-[0_0_35px_rgba(255,0,0,0.5)]">X</span>
           </motion.h1>
 
           {/* Slogan */}
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.4, duration: 0.8, ease: "easeInOut" }}
-            className="text-2xl md:text-3xl text-muted-foreground mb-16 max-w-3xl mx-auto leading-relaxed font-semibold tracking-tight flex items-center justify-center gap-3 flex-wrap"
+            transition={{ delay: 0.2, duration: 0.4, ease: "easeInOut" }}
+            className="text-2xl md:text-3xl text-muted-foreground/80 mb-16 max-w-4xl mx-auto leading-relaxed font-semibold tracking-tight flex items-center justify-center gap-5 flex-wrap"
           >
-            <span className="flex items-center gap-2"><Zap className="w-6 h-6 text-primary" />Sicher</span>
-            <span className="text-primary/30">•</span> 
-            <span className="flex items-center gap-2"><Rocket className="w-6 h-6 text-accent" />Schnell</span>
-            <span className="text-primary/30">•</span> 
-            <span className="flex items-center gap-2"><Code2 className="w-6 h-6 text-primary" />Open Source</span>
+            <span className="flex items-center gap-2 hover:text-primary transition-colors cursor-default">
+              <Shield className="w-7 h-7 text-primary" />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Sicher</span>
+            </span>
+            <span className="text-primary/20">•</span>
+            <span className="flex items-center gap-2 hover:text-accent transition-colors cursor-default">
+              <Rocket className="w-7 h-7 text-accent" />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Schnell</span>
+            </span>
+            <span className="text-primary/20">•</span>
+            <Link to="/legal/license" className="flex items-center gap-2 text-muted-foreground/80 hover:text-primary transition-colors cursor-pointer group">
+              <Code2 className="w-7 h-7 text-primary group-hover:rotate-12 transition-transform" />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Open Source</span>
+            </Link>
           </motion.p>
 
           {/* CTA Buttons */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.5, duration: 0.8, ease: "easeInOut" }}
-            className="flex flex-col sm:flex-row gap-5 justify-center mb-20"
+            transition={{ delay: 0.25, duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+            className="flex flex-col sm:flex-row gap-6 justify-center mb-20"
           >
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.98 }}>
-              <a 
-                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot" 
-                target="_blank" 
+            <motion.div whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} transition={{ type: "spring", stiffness: 400, damping: 10 }}>
+              <a
+                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
+                target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-gradient-to-r from-primary to-accent text-primary-foreground font-bold text-lg hover:shadow-2xl hover:shadow-primary/50 transition-all group"
+                className="inline-flex items-center gap-4 px-10 py-5 rounded-[1.5rem] bg-gradient-to-r from-primary to-accent text-white font-black text-xl hover:shadow-[0_20px_50px_rgba(255,0,0,0.5)] transition-all group overflow-hidden relative"
               >
-                <span>Zum Server hinzufügen</span>
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <span className="relative z-10">Jetzt Einladen</span>
+                <ArrowRight className="w-6 h-6 relative z-10 group-hover:translate-x-2 transition-transform" />
               </a>
             </motion.div>
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.98 }}>
-              <a 
+            <motion.div whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} transition={{ type: "spring", stiffness: 400, damping: 10 }}>
+              <a
                 href="#features"
-                className="inline-flex items-center gap-2 px-8 py-4 rounded-2xl glass hover:bg-white/10 border border-white/20 font-bold text-lg transition-all"
+                className="inline-flex items-center gap-2 px-10 py-5 rounded-[1.5rem] glass hover:bg-white/10 border border-white/10 font-black text-xl transition-all shadow-xl relative overflow-hidden group"
               >
-                Features entdecken
+                <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-primary to-accent translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <span className="relative z-10">Features entdecken</span>
               </a>
             </motion.div>
           </motion.div>
 
           {/* Stats */}
-          <div className="flex flex-wrap justify-center gap-6 md:gap-12">
+          <div className="flex flex-wrap justify-center gap-8 md:gap-16">
             {stats.map((stat, index) => (
               <StatCard key={stat.label} stat={stat} index={index} />
             ))}
@@ -142,7 +169,7 @@ export const Hero = memo(function Hero() {
       </div>
 
       {/* Bottom Gradient */}
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-background via-background/80 to-transparent" />
     </section>
   );
 });
\ No newline at end of file
diff --git a/src/web/components/Navbar.tsx b/src/web/components/Navbar.tsx
index 07fd2ad..2c8ed1c 100644
--- a/src/web/components/Navbar.tsx
+++ b/src/web/components/Navbar.tsx
@@ -2,10 +2,10 @@ import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import { 
-  Shield, Menu, X, Sparkles, Puzzle, Activity, 
+import {
+  Shield, Menu, X, Sparkles, Puzzle, Activity,
   Newspaper // Icon für den Blog hinzugefügt
-} from "lucide-react"; 
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const navLinks = [
@@ -20,56 +20,77 @@ export function Navbar() {
   const location = useLocation();
 
   useEffect(() => {
+    let lastScrollY = window.scrollY;
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
+      const currentScrollY = window.scrollY;
+      const scrolled = currentScrollY > 20;
+
+      // Only update state if the status actually changed to save CPU cycles
+      setIsScrolled((prev) => {
+        if (prev !== scrolled) return scrolled;
+        return prev;
+      });
+      lastScrollY = currentScrollY;
     };
-    window.addEventListener("scroll", handleScroll);
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
   return (
     <motion.header
+      style={{ willChange: "transform, opacity" }}
       initial={{ y: -100, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
-      transition={{ duration: 0.8, ease: "easeInOut" }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
       className={cn(
-        "fixed top-0 left-0 right-0 z-50 transition-all duration-700 ease-out",
-        isScrolled ? "glass-strong py-3 shadow-lg shadow-primary/5" : "py-5 bg-transparent"
+        "fixed top-0 left-0 right-0 z-50 transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1)",
+        isScrolled ? "glass-strong py-3 shadow-2xl shadow-primary/10 border-b border-primary/20" : "py-6 bg-transparent"
       )}
     >
       <div className="container px-4">
         <nav className="flex items-center justify-between">
           {/* Logo */}
-          <Link to="/" className="flex items-center gap-3 group">
-            <motion.div 
-              className="w-11 h-11 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center glow-subtle shadow-lg shadow-primary/20 text-white"
-              whileHover={{ rotate: 10, scale: 1.1 }}
+          <Link to="/" className="flex items-center gap-4 group">
+            <motion.div
+              className="w-12 h-12 rounded-[1.2rem] bg-gradient-to-br from-primary to-accent flex items-center justify-center glow-subtle shadow-xl shadow-primary/30 text-white relative overflow-hidden"
+              whileHover={{ rotate: 15, scale: 1.15 }}
+              transition={{ type: "spring", stiffness: 400, damping: 10 }}
             >
-              <Shield className="w-5 h-5" />
+              <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <Shield className="w-6 h-6 drop-shadow-glow" />
             </motion.div>
-            <span className="text-xl font-bold tracking-tighter text-white">
-              Manager<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">X</span>
-            </span>
+            <div className="flex flex-col">
+              <span className="text-2xl font-black tracking-tighter text-white leading-none group-hover:text-primary transition-colors">
+                Manager<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">X</span>
+              </span>
+              <span className="text-[10px] text-muted-foreground font-black uppercase tracking-[0.3em] mt-1 opacity-60">High Performance</span>
+            </div>
           </Link>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-2">
+          <div className="hidden md:flex items-center gap-3 glass p-1.5 rounded-2xl border border-white/5 backdrop-blur-3xl">
             {navLinks.map((link, idx) => (
-              <motion.div key={link.label} initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: idx * 0.1 }}>
+              <motion.div
+                key={link.label}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: idx * 0.05, type: "spring", stiffness: 300, damping: 15 }}
+              >
                 <Link
                   to={link.href}
                   className={cn(
-                    "relative text-[10px] font-black uppercase tracking-[0.2em] transition-all duration-300 group flex items-center gap-2 px-4 py-2 rounded-lg",
-                    location.pathname === link.href 
-                      ? "text-primary bg-primary/10" 
+                    "relative text-[11px] font-black uppercase tracking-[0.2em] transition-all duration-300 group flex items-center gap-2 px-5 py-3 rounded-xl overflow-hidden",
+                    location.pathname === link.href
+                      ? "text-white bg-primary/30 shadow-inner"
                       : "text-muted-foreground hover:text-white hover:bg-white/5"
                   )}
                 >
-                  {link.icon && <link.icon className="w-4 h-4" />}
+                  {link.icon && <link.icon className={cn("w-4 h-4 transition-transform group-hover:rotate-12 group-hover:scale-125", location.pathname === link.href ? "text-primary" : "text-muted-foreground")} />}
                   {link.label}
-                  <span className={cn(
-                    "absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 rounded-full",
-                    location.pathname === link.href ? "w-[calc(100%-32px)] ml-4" : "w-0 group-hover:w-[calc(100%-32px)]"
+                  <div className={cn(
+                    "absolute bottom-0 left-0 h-1 bg-primary transition-all duration-500",
+                    location.pathname === link.href ? "w-full" : "w-0 group-hover:w-full"
                   )} />
                 </Link>
               </motion.div>
@@ -79,15 +100,17 @@ export function Navbar() {
           {/* CTA Button */}
           <div className="hidden md:block">
             <motion.a
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.98 }}
-              href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot" 
-              target="_blank" 
+              whileHover={{ scale: 1.1, rotate: -2, y: -2 }}
+              whileTap={{ scale: 0.9 }}
+              transition={{ type: "spring", stiffness: 400, damping: 10 }}
+              href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
+              target="_blank"
               rel="noopener noreferrer"
-              className="group inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-primary to-accent text-white font-bold hover:shadow-lg hover:shadow-primary/50 transition-all"
+              className="group inline-flex items-center gap-3 px-7 py-3.5 rounded-2xl bg-gradient-to-r from-primary to-accent text-white font-black hover:shadow-[0_15px_40px_rgba(255,0,0,0.5)] transition-all uppercase text-xs tracking-widest relative overflow-hidden"
             >
-              <Sparkles className="w-4 h-4 group-hover:rotate-12 transition-transform" />
-              Bot einladen
+              <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
+              <Sparkles className="w-4 h-4 group-hover:animate-spin-slow transition-transform relative z-10" />
+              <span className="relative z-10">Bot einladen</span>
             </motion.a>
           </div>
 
@@ -105,7 +128,7 @@ export function Navbar() {
       {/* Mobile Menu */}
       <AnimatePresence>
         {isMobileMenuOpen && (
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
@@ -114,19 +137,19 @@ export function Navbar() {
           >
             <div className="container py-10 flex flex-col gap-6">
               {navLinks.map((link, idx) => (
-                <motion.div 
+                <motion.div
                   key={link.label}
                   initial={{ opacity: 0, x: -20 }}
                   animate={{ opacity: 1, x: 0 }}
                   transition={{ delay: idx * 0.1 }}
                 >
-                  <Link 
-                    to={link.href} 
+                  <Link
+                    to={link.href}
                     onClick={() => setIsMobileMenuOpen(false)}
                     className={cn(
                       "text-lg font-bold uppercase flex items-center gap-3 p-3 rounded-lg transition-colors",
-                      location.pathname === link.href 
-                        ? "text-primary bg-primary/10" 
+                      location.pathname === link.href
+                        ? "text-primary bg-primary/10"
                         : "text-foreground/80 hover:text-white hover:bg-white/5"
                     )}
                   >
@@ -135,11 +158,11 @@ export function Navbar() {
                   </Link>
                 </motion.div>
               ))}
-              <motion.a 
+              <motion.a
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.4 }}
-                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot" 
+                href="https://discord.com/oauth2/authorize?client_id=1368201272624287754&permissions=1669118160151&integration_type=0&scope=bot"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="mt-6 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-primary to-accent text-white p-4 rounded-2xl text-center font-bold uppercase tracking-widest hover:shadow-lg transition-all"
diff --git a/src/web/index.css b/src/web/index.css
index 3951b13..70902a3 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -5,7 +5,10 @@
 @tailwind utilities;
 
 @layer base {
-  html, body, #root {
+
+  html,
+  body,
+  #root {
     width: 100%;
     height: 100%;
     margin: 0;
@@ -19,50 +22,55 @@
   }
 
   :root {
-    --background: 230 30% 3%;
-    --foreground: 210 40% 98%;
+    --background: 0 40% 2%;
+    --foreground: 0 0% 98%;
 
-    --card: 230 30% 8%;
-    --card-foreground: 210 40% 98%;
+    --card: 0 35% 6%;
+    --card-foreground: 0 0% 98%;
 
-    --popover: 230 30% 10%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 0 35% 8%;
+    --popover-foreground: 0 0% 98%;
 
-    --primary: 235 85% 64%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0 85% 60%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 230 30% 15%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 0 30% 12%;
+    --secondary-foreground: 0 0% 98%;
 
-    --muted: 230 25% 20%;
-    --muted-foreground: 215 20% 65%;
+    --muted: 0 25% 15%;
+    --muted-foreground: 0 10% 65%;
 
-    --accent: 175 90% 50%;
-    --accent-foreground: 230 25% 5%;
+    --accent: 0 100% 65%;
+    --accent-foreground: 0 100% 5%;
 
-    --success: 120 80% 50%;
-    --warning: 45 95% 55%;
+    --success: 142 70% 50%;
+    --warning: 38 92% 50%;
     --destructive: 0 84% 60%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
 
-    --border: 230 30% 18%;
-    --input: 230 30% 15%;
-    --ring: 235 85% 64%;
+    --border: 0 30% 15%;
+    --input: 0 30% 12%;
+    --ring: 0 85% 60%;
 
-    --radius: 1rem;
+    --radius: 1.25rem;
 
     /* Custom colors */
-    --glow-primary: 235 85% 64%;
-    --glow-accent: 175 90% 50%;
-    --gradient-start: 235 85% 64%;
-    --gradient-end: 175 90% 50%;
-    
-    /* Feature category colors */
-    --moderation: 0 84% 60%;
-    --community: 280 85% 65%;
-    --social: 200 85% 55%;
-    --interactive: 45 95% 55%;
-    --utility: 160 75% 50%;
+    --glow-primary: 0 85% 60%;
+    --glow-accent: 0 100% 65%;
+    --gradient-start: 0 85% 60%;
+    --gradient-end: 0 60% 40%;
+
+    /* Feature category colors - Keeping them distinct but harmonious with red */
+    --moderation: 0 85% 60%;
+    --community: 30 90% 60%;
+    --social: 340 90% 65%;
+    --interactive: 20 95% 60%;
+    --utility: 0 60% 45%;
+
+    /* Efficiency variables */
+    --glass-blur: 12px;
+    --glass-opacity: 0.55;
+    --glass-border-opacity: 0.4;
   }
 
   .dark {
@@ -81,17 +89,23 @@
     font-family: 'Inter', 'Space Grotesk', sans-serif;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: 'Space Grotesk', sans-serif;
     font-weight: 700;
   }
 
   a {
-    @apply transition-all duration-300 ease-out;
+    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 }
 
 @layer utilities {
+
   /* Text Gradients */
   .text-gradient {
     @apply bg-clip-text text-transparent;
@@ -107,16 +121,29 @@
   }
 
   .text-glow {
-    text-shadow: 
+    text-shadow:
       0 0 10px hsl(var(--primary) / 0.4),
       0 0 20px hsl(var(--primary) / 0.3),
       0 0 40px hsl(var(--accent) / 0.2);
   }
 
   @keyframes gradient-flow {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-flow 3s ease infinite;
   }
 
   @keyframes smooth-slide-in {
@@ -124,6 +151,7 @@
       opacity: 0;
       transform: translateY(8px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
@@ -134,6 +162,7 @@
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
@@ -144,34 +173,37 @@
       opacity: 0;
       transform: scale(0.95);
     }
+
     to {
       opacity: 1;
       transform: scale(1);
     }
   }
 
-  /* Smooth transitions */
+  /* Snappy spring transitions */
   .smooth-transition {
-    @apply transition-all duration-500 ease-in-out;
+    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
   .smooth-enter {
-    animation: smooth-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation: smooth-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }
 
   .smooth-fade {
-    animation: smooth-fade-in 0.4s ease-out;
+    animation: smooth-fade-in 0.25s ease-out;
   }
 
   .smooth-scale {
-    animation: smooth-scale-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: smooth-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
+
   /* Grid pattern background */
   .grid-pattern {
     background-image: linear-gradient(hsl(var(--foreground)) 1px, transparent 1px),
-                      linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px);
+      linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px);
     background-size: 80px 80px;
   }
+
   /* Background Gradients */
   .bg-gradient-primary {
     background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
@@ -190,14 +222,14 @@
   }
 
   .bg-gradient-mesh {
-    background: 
+    background:
       radial-gradient(ellipse at 20% 50%, hsl(var(--primary) / 0.15) 0%, transparent 50%),
       radial-gradient(ellipse at 80% 30%, hsl(var(--accent) / 0.1) 0%, transparent 50%);
   }
 
   /* Glow Effects */
   .glow-primary {
-    box-shadow: 
+    box-shadow:
       0 0 30px -5px hsl(var(--primary) / 0.8),
       0 0 60px -10px hsl(var(--primary) / 0.6),
       0 0 100px -20px hsl(var(--accent) / 0.4),
@@ -205,13 +237,13 @@
   }
 
   .glow-accent {
-    box-shadow: 
+    box-shadow:
       0 0 30px -5px hsl(var(--accent) / 0.7),
       0 0 60px -10px hsl(var(--accent) / 0.5);
   }
 
   .glow-subtle {
-    box-shadow: 
+    box-shadow:
       0 0 40px -10px hsl(var(--primary) / 0.4),
       0 0 80px -20px hsl(var(--accent) / 0.2);
   }
@@ -221,33 +253,34 @@
   }
 
   .glow-hover:hover {
-    box-shadow: 
+    box-shadow:
       0 0 40px -5px hsl(var(--primary) / 0.8),
       0 0 80px -15px hsl(var(--accent) / 0.5);
   }
 
-  /* Glass Morphism */
+  /* Glass Morphism - Optimized for performance */
   .glass {
-    background: hsl(var(--card) / 0.5);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-    border: 1px solid hsl(var(--border) / 0.4);
-    border-top-color: hsl(var(--border) / 0.6);
+    background: hsl(var(--card) / var(--glass-opacity));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid hsl(var(--border) / var(--glass-border-opacity));
+    border-top-color: hsl(var(--border) / calc(var(--glass-border-opacity) + 0.2));
   }
 
   .glass-strong {
-    background: hsl(var(--card) / 0.75);
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
+    background: hsl(var(--card) / 0.85);
+    /* Higher opacity for less reliance on blur */
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
     border: 1px solid hsl(var(--border) / 0.5);
     border-top-color: hsl(var(--border) / 0.8);
   }
 
   .glass-light {
-    background: hsl(var(--background) / 0.3);
-    -webkit-backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
-    border: 1px solid hsl(var(--border) / 0.2);
+    background: hsl(var(--background) / 0.4);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    border: 1px solid hsl(var(--border) / 0.3);
   }
 
   /* Feature Card Styles */
@@ -325,10 +358,10 @@
     inset: 0;
     padding: 2px;
     border-radius: var(--radius);
-    background: linear-gradient(135deg, 
-      hsl(var(--primary)), 
-      hsl(var(--accent)), 
-      hsl(var(--primary)));
+    background: linear-gradient(135deg,
+        hsl(var(--primary)),
+        hsl(var(--accent)),
+        hsl(var(--primary)));
     background-size: 300% 300%;
     animation: gradient-flow 3s ease infinite;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -351,19 +384,22 @@
     left: -50%;
     width: 200%;
     height: 200%;
-    background: linear-gradient(
-      to bottom right,
-      transparent 30%,
-      hsl(var(--foreground) / 0.08) 50%,
-      transparent 70%
-    );
+    background: linear-gradient(to bottom right,
+        transparent 30%,
+        hsl(var(--foreground) / 0.08) 50%,
+        transparent 70%);
     transform: rotate(-45deg);
     animation: shine-move 6s infinite;
   }
 
   @keyframes shine-move {
-    0% { transform: translateX(-150%) translateY(-150%) rotate(-45deg); }
-    100% { transform: translateX(150%) translateY(150%) rotate(-45deg); }
+    0% {
+      transform: translateX(-150%) translateY(-150%) rotate(-45deg);
+    }
+
+    100% {
+      transform: translateX(150%) translateY(150%) rotate(-45deg);
+    }
   }
 
   /* Pulse Animation */
@@ -372,9 +408,12 @@
   }
 
   @keyframes pulse-glow {
-    0%, 100% {
+
+    0%,
+    100% {
       box-shadow: 0 0 30px -5px hsl(var(--primary) / 0.6);
     }
+
     50% {
       box-shadow: 0 0 50px 0px hsl(var(--primary) / 0.4);
     }
@@ -395,11 +434,27 @@
   }
 
   @keyframes morph {
-    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
-    20% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
-    40% { border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%; }
-    60% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
-    80% { border-radius: 40% 70% 40% 50% / 40% 50% 60% 70%; }
+
+    0%,
+    100% {
+      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    }
+
+    20% {
+      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    }
+
+    40% {
+      border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%;
+    }
+
+    60% {
+      border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
+    }
+
+    80% {
+      border-radius: 40% 70% 40% 50% / 40% 50% 60% 70%;
+    }
   }
 
   /* Button Styles */
@@ -430,13 +485,28 @@
     animation: float 6s ease-in-out infinite;
   }
 
-  .float-delay-1 { animation-delay: 0s; }
-  .float-delay-2 { animation-delay: 2s; }
-  .float-delay-3 { animation-delay: 4s; }
+  .float-delay-1 {
+    animation-delay: 0s;
+  }
+
+  .float-delay-2 {
+    animation-delay: 2s;
+  }
+
+  .float-delay-3 {
+    animation-delay: 4s;
+  }
 
   @keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-20px); }
+
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+
+    50% {
+      transform: translateY(-20px);
+    }
   }
 
   /* Fade In Animation */
@@ -444,15 +514,24 @@
     animation: fade-in 0.6s ease-out;
   }
 
-  .fade-in-delay-1 { animation-delay: 0.1s; }
-  .fade-in-delay-2 { animation-delay: 0.2s; }
-  .fade-in-delay-3 { animation-delay: 0.3s; }
+  .fade-in-delay-1 {
+    animation-delay: 0.1s;
+  }
+
+  .fade-in-delay-2 {
+    animation-delay: 0.2s;
+  }
+
+  .fade-in-delay-3 {
+    animation-delay: 0.3s;
+  }
 
   @keyframes fade-in {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
@@ -473,6 +552,7 @@
       opacity: 0;
       transform: translateX(-30px);
     }
+
     to {
       opacity: 1;
       transform: translateX(0);
@@ -484,6 +564,7 @@
       opacity: 0;
       transform: translateX(30px);
     }
+
     to {
       opacity: 1;
       transform: translateX(0);
@@ -496,8 +577,8 @@
   }
 
   .hover-lift:hover {
-    @apply -translate-y-2;
-    box-shadow: 0 20px 40px hsl(var(--primary) / 0.2);
+    @apply -translate-y-3 scale-105;
+    box-shadow: 0 25px 50px hsl(var(--primary) / 0.25);
   }
 
   /* Gradient Text on Hover */
@@ -563,13 +644,17 @@
 }
 
 /* Input & Textarea Styles */
-input, textarea, select {
+input,
+textarea,
+select {
   @apply bg-input text-foreground rounded-lg;
   border: 1px solid hsl(var(--border));
   transition: all 0.3s ease;
 }
 
-input:focus, textarea:focus, select:focus {
+input:focus,
+textarea:focus,
+select:focus {
   border-color: hsl(var(--primary));
   box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
   @apply outline-none;
diff --git a/src/web/pages/Datenschutz.tsx b/src/web/pages/Datenschutz.tsx
index 8c5f299..3d86b59 100644
--- a/src/web/pages/Datenschutz.tsx
+++ b/src/web/pages/Datenschutz.tsx
@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { Link } from "react-router-dom";
-import { ArrowLeft, Shield, Mail, Lock, Database, Server } from "lucide-react";
+import { ArrowLeft, Shield, Mail, Lock, Database, Server, CheckCircle, Github, User, Activity, FileText } from "lucide-react";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { motion } from "framer-motion";
@@ -9,26 +9,31 @@ export const Datenschutz = memo(function Datenschutz() {
   const sections = [
     {
       title: "1. Verantwortliche Stelle",
+      icon: User,
       content: (
-        <div className="space-y-2">
-          <p className="font-medium text-foreground">OPPRO.NET Network</p>
-          <p>Verantwortlicher im Sinne der DSGVO:</p>
-          <p className="text-sm">
-            Lenny Steiger<br />
-            E-Mail:{" "}
-            <a href="mailto:contact@oppro-network.de" className="text-primary hover:underline">
-              contact@oppro-network.de
-            </a>
-          </p>
+        <div className="space-y-4">
+          <p className="font-extrabold text-white text-xl tracking-tight">OPPRO.NET Network</p>
+          <div className="space-y-1 text-sm text-muted-foreground font-medium">
+            <p className="text-foreground">Lenny Steiger</p>
+            <p>Eulauer Str. 24</p>
+            <p>04523 Pegau, Deutschland</p>
+            <p className="mt-4">
+              E-Mail:{" "}
+              <a href="mailto:contact@oppro-network.de" className="text-primary hover:underline font-black">
+                contact@oppro-network.de
+              </a>
+            </p>
+          </div>
         </div>
       ),
     },
     {
       title: "2. Datenschutzbeauftragter",
+      icon: Shield,
       content: (
-        <div className="space-y-2">
+        <div className="space-y-2 text-sm">
           <p>Bei Datenschutzfragen können Sie sich an:</p>
-          <p className="text-sm">
+          <p className="font-bold text-foreground">
             E-Mail:{" "}
             <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline">
               legal@oppro-network.de
@@ -38,180 +43,183 @@ export const Datenschutz = memo(function Datenschutz() {
       ),
     },
     {
-      title: "3. Erhobene Personenbezogene Daten",
+      title: "3. Erhobene Daten",
+      icon: Database,
       content: (
-        <div className="space-y-3">
+        <div className="space-y-4">
           <p>Bei der Nutzung von ManagerX verarbeiten wir folgende Daten:</p>
-          <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2 text-sm">
-            <li><strong>Discord-IDs:</strong> Nutzer-ID, Server-ID zur eindeutigen Identifikation</li>
-            <li><strong>Benutzername & Avatar:</strong> Für Logging und Audit-Trail</li>
-            <li><strong>Server-Konfigurationen:</strong> Einstellungen wie Willkommenskanäle, Automoderation, Rollen</li>
-            <li><strong>Moderationsdaten:</strong> Verwarnungen, Kicks, Bans mit Gründen und Zeitstempel</li>
-            <li><strong>XP/Level-Daten:</strong> Aktivitätsstatistiken zur Gamification</li>
-            <li><strong>Voice-Channel-Daten:</strong> Temporäre Kanäle und deren Einstellungen</li>
-            <li><strong>Log-Daten:</strong> Timestamps und Fehlerdiagnose-Informationen</li>
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3 text-[11px] font-bold uppercase tracking-widest text-muted-foreground">
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> Discord-IDs</li>
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> Username & Avatar</li>
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> Server-Settings</li>
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> Moderationsdaten</li>
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> XP/Level-Daten</li>
+            <li className="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/5"><div className="w-1.5 h-1.5 rounded-full bg-primary" /> Log-Daten (Timestamps)</li>
           </ul>
         </div>
       ),
     },
     {
-      title: "4. Zweck der Datenverarbeitung",
+      title: "4. Zweck der Verarbeitung",
+      icon: Activity,
       content: (
-        <div className="space-y-3">
+        <div className="space-y-3 text-sm leading-relaxed">
           <p>Die Daten werden ausschließlich für folgende Zwecke verarbeitet:</p>
-          <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2 text-sm">
-            <li>Bereitstellung und Verwaltung der Bot-Funktionen</li>
-            <li>Nachvollziehbarkeit von Moderationsmaßnahmen (Audit-Trail)</li>
-            <li>Fehlerdiagnose und technische Optimierung</li>
-            <li>Statistiken und Leistungsanalyse</li>
-            <li>Compliance mit Discord-Richtlinien</li>
+          <ul className="space-y-1 text-muted-foreground ml-2">
+            <li>• Bereitstellung und Verwaltung der Bot-Funktionen</li>
+            <li>• Nachvollziehbarkeit von Moderationsmaßnahmen (Audit-Trail)</li>
+            <li>• Fehlerdiagnose und technische Optimierung</li>
+            <li>• Statistiken und Leistungsanalyse</li>
+            <li>• Compliance mit Discord-Richtlinien</li>
           </ul>
         </div>
       ),
     },
     {
-      title: "5. Rechtsgrundlage der Verarbeitung",
+      title: "5. Rechtsgrundlage",
+      icon: FileText,
       content: (
-        <div className="space-y-2 text-sm">
-          <p><strong>Art. 6 Abs. 1 lit. f DSGVO:</strong> Berechtigtes Interesse am Bot-Betrieb und Systemsicherheit</p>
-          <p><strong>Art. 6 Abs. 1 lit. b DSGVO:</strong> Erfüllung der Vertragsbestimmungen bei der Nutzung des Bots</p>
-          <p><strong>Art. 6 Abs. 1 lit. c DSGVO:</strong> Einhaltung gesetzlicher Verpflichtungen</p>
+        <div className="space-y-3 text-sm leading-relaxed">
+          <p><strong>Art. 6 Abs. 1 lit. f DSGVO:</strong> Berechtigtes Interesse am Bot-Betrieb und Systemsicherheit.</p>
+          <p><strong>Art. 6 Abs. 1 lit. b DSGVO:</strong> Erfüllung der Vertragsbestimmungen bei der Nutzung des Bots.</p>
+          <p><strong>Art. 6 Abs. 1 lit. c DSGVO:</strong> Einhaltung gesetzlicher Verpflichtungen.</p>
         </div>
       ),
     },
     {
       title: "6. Speicherdauer",
+      icon: Activity,
       content: (
-        <div className="space-y-2 text-sm">
-          <p><strong>Moderationsdaten:</strong> Speicherung für 2 Jahre ab Eintrag (zur Nachverfolgung von Verstößen)</p>
-          <p><strong>Server-Konfigurationen:</strong> Solange der Bot aktiv ist oder bis zur Löschung</p>
-          <p><strong>XP/Level-Daten:</strong> Bis zur aktiven Löschung durch Server-Admin oder Bot-Entfernung</p>
-          <p><strong>Log-Daten:</strong> Maximale Speicherung von 90 Tagen für technische Fehlerdiagnose</p>
+        <div className="space-y-3 text-sm leading-relaxed">
+          <p><strong>Moderationsdaten:</strong> 2 Jahre ab Eintrag (zur Nachverfolgung).</p>
+          <p><strong>Server-Konfigurationen:</strong> Solange der Bot aktiv ist.</p>
+          <p><strong>XP/Level-Daten:</strong> Bis zur Löschung durch Admin oder Bot-Entfernung.</p>
+          <p><strong>Log-Daten:</strong> Maximal 90 Tage für technische Fehlerdiagnose.</p>
         </div>
       ),
     },
     {
-      title: "7. Hosting & Infrastruktur (Speicherort)",
+      title: "7. Hosting & Standort",
+      icon: Server,
       content: (
-        <div className="space-y-4 text-sm">
-          <p>Wir legen Wert auf Datensparsamkeit und lokale Speicherung:</p>
-          <div className="p-4 rounded-xl bg-primary/5 border border-primary/10">
-            <p className="font-bold flex items-center gap-2 mb-1">
-              <Server className="w-4 h-4 text-primary" /> 
-              Bot-Infrastruktur & Datenbank
-            </p>
-            <p>Gehostet bei <strong>DeinServerHost (DSH)</strong> in Deutschland.</p>
-            <p className="text-xs text-muted-foreground mt-1">
-              Der Standort der Server ist <strong>Frankfurt am Main, Deutschland</strong>. 
-              Dies stellt sicher, dass Nutzerdaten des Bots die EU nicht verlassen.
-            </p>
+        <div className="space-y-4">
+          <div className="p-6 rounded-2xl bg-primary/10 border border-primary/20 shadow-xl shadow-primary/5">
+            <div className="flex items-center gap-3 mb-3">
+              <Server className="w-5 h-5 text-primary" />
+              <span className="font-black text-white uppercase tracking-widest text-xs">Bot-Infrastruktur</span>
+            </div>
+            <p className="text-sm font-bold text-foreground">DeinServerHost (DSH)</p>
+            <p className="text-xs text-muted-foreground mt-1">Standort: Frankfurt am Main, Deutschland (EU)</p>
           </div>
-          <p className="text-xs">
-            Weitere Empfänger: <strong>Discord</strong> (als API-Partner für die Funktionalität).
-          </p>
+          <p className="text-xs italic text-muted-foreground">Dies stellt sicher, dass Nutzerdaten des Bots die EU nicht verlassen.</p>
         </div>
       ),
     },
     {
       title: "8. Datensicherheit",
+      icon: Lock,
       content: (
-        <div className="space-y-2 text-sm">
-          <p>Ihre Daten werden geschützt durch:</p>
-          <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-            <li>SQLite-Datenbanken mit Zugriffskontrolle</li>
-            <li>Verschlüsselte Verbindungen (Discord API über HTTPS)</li>
-            <li>Regelmäßige Backups</li>
-            <li>Begrenzte Zugriffe (nur authorisierte Administratoren)</li>
+        <div className="space-y-3 text-sm leading-relaxed">
+          <ul className="space-y-1">
+            <li>• SQLite-Datenbanken mit Zugriffskontrolle</li>
+            <li>• Verschlüsselte Verbindungen (Discord API über HTTPS)</li>
+            <li>• Regelmäßige Backups</li>
+            <li>• Begrenzte Zugriffe (nur authorisierte Administratoren)</li>
           </ul>
         </div>
       ),
     },
     {
-      title: "9. Ihre Rechte (Art. 15-22 DSGVO)",
+      title: "9. Ihre Rechte",
+      icon: User,
       content: (
-        <div className="space-y-2 text-sm">
-          <p>Sie haben das Recht auf Auskunft, Berichtigung, Löschung (Vergessenwerden), Datenportabilität und Widerspruch.</p>
-          <p className="mt-2">Anfragen richten Sie bitte an: <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline">legal@oppro-network.de</a></p>
+        <div className="space-y-4 text-sm leading-relaxed">
+          <p>Sie haben das Recht auf Auskunft, Berichtigung, Löschung (Vergessenwerden), Datenportabilität und Widerspruch gemäß Art. 15-22 DSGVO.</p>
+          <p className="font-bold text-white underline decoration-primary underline-offset-4">Anfragen an: legal@oppro-network.de</p>
         </div>
       ),
     },
     {
       title: "10. Beschwerderecht",
+      icon: Shield,
       content: (
-        <div className="space-y-2 text-sm">
-          <p>Sie haben das Recht, bei einer Datenschutzbehörde (Landesdatenschutzbehörde Ihres Bundeslandes) Beschwerde einzureichen.</p>
-        </div>
+        <p className="text-sm">Sie haben das Recht, bei einer Datenschutzbehörde (Landesdatenschutzbehörde Ihres Bundeslandes) Beschwerde einzureichen.</p>
       ),
     },
     {
-      title: "11. Automatisierte Entscheidungsfindung",
-      content: "ManagerX trifft keine vollautomatisierten Entscheidungen, die erhebliche rechtliche Auswirkungen haben.",
+      title: "11. Automatisierte Entscheidungen",
+      icon: Activity,
+      content: (
+        <p className="text-sm">ManagerX trifft keine vollautomatisierten Entscheidungen, die erhebliche rechtliche Auswirkungen haben.</p>
+      ),
     },
     {
       title: "12. Cookies & Tracking",
-      content: "Die Website nutzt keine Cookies oder Tracking-Technologien. Es werden nur technisch notwendige Session-Daten im Browser gespeichert.",
+      icon: Lock,
+      content: (
+        <p className="text-sm">Die Website nutzt keine Cookies oder Tracking-Technologien. Es werden nur technisch notwendige Session-Daten im Browser gespeichert.</p>
+      ),
     },
     {
-      title: "13. Webseiten-Hosting (GitHub Pages)",
+      title: "13. Web-Hosting (GitHub Pages)",
+      icon: Github,
       content: (
-        <div className="space-y-2 text-sm">
-          <p>Diese Webseite (Frontend) wird technisch auf <strong>GitHub Pages</strong> bereitgestellt.</p>
-          <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-            <li><strong>Anbieter:</strong> GitHub Inc., USA</li>
-            <li><strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. f DSGVO (Berechtigtes Interesse am stabilen Webbetrieb)</li>
-            <li><strong>Sicherheit:</strong> Datenübertragung erfolgt unter Standardvertragsklauseln (SCC)</li>
-          </ul>
-          <p className="mt-2 italic text-xs">Hinweis: IP-Adressen werden von GitHub zur Abwehr von Angriffen kurzzeitig protokolliert.</p>
+        <div className="space-y-2 text-sm leading-relaxed">
+          <p><strong>Anbieter:</strong> GitHub Inc., USA</p>
+          <p><strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. f DSGVO</p>
+          <p>IP-Adressen werden zur Abwehr von Angriffen kurzzeitig protokolliert (Standardvertragsklauseln).</p>
         </div>
       ),
     },
     {
-      title: "14. Änderungen dieser Erklärung",
-      content: "Änderungen werden auf dieser Seite veröffentlicht. Fortgesetzte Nutzung nach Änderungen bedeutet Zustimmung.",
+      title: "14. Änderungen",
+      icon: FileText,
+      content: (
+        <p className="text-sm text-muted-foreground italic">Änderungen dieser Erklärung werden auf dieser Seite veröffentlicht. Fortgesetzte Nutzung bedeutet Zustimmung.</p>
+      ),
     },
     {
       title: "15. Kontakt",
+      icon: Mail,
       content: (
         <div className="space-y-2 text-sm">
-          <p>
-            E-Mail: <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline">legal@oppro-network.de</a>
-          </p>
-          <p className="text-xs text-muted-foreground/60">Letzte Aktualisierung: Januar 2026</p>
+          <p>E-Mail: <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline font-bold">legal@oppro-network.de</a></p>
+          <p className="text-[10px] text-muted-foreground/60 uppercase tracking-widest mt-4">Letzte Aktualisierung: Januar 2026</p>
         </div>
       ),
     },
   ];
 
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="min-h-screen bg-background flex flex-col font-sans">
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24">
-        <div className="max-w-3xl mx-auto">
-          {/* Back Link - Korrigiert zu motion.div */}
+        <div className="max-w-4xl mx-auto">
+          {/* Back Link */}
           <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }}>
-            <Link 
-              to="/" 
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium"
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-black uppercase tracking-widest"
             >
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              Zurück zur Startseite
+              Zurück zur Zentrale
             </Link>
           </motion.div>
 
           <header className="mb-16">
-            <div className="flex items-center gap-5 mb-6">
-              <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
-                <Lock className="w-6 h-6 text-primary" />
+            <div className="flex items-center gap-6 mb-8">
+              <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20 shadow-xl shadow-primary/10">
+                <Lock className="w-8 h-8 text-primary" />
               </div>
               <div>
-                <h1 className="text-4xl font-black tracking-tight text-foreground uppercase leading-none">
-                  Daten<span className="text-primary">schutz</span>
+                <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-foreground uppercase italic leading-none mb-2">
+                  Daten<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">schutz</span>
                 </h1>
-                <div className="flex gap-3 mt-2 opacity-40">
-                  <span className="text-[10px] font-mono uppercase tracking-widest">DSGVO Konform</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">•</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">Frankfurt Hosted</span>
+                <div className="flex gap-4 opacity-40">
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">DSGVO Standard</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">•</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Frankfurt Hosted</span>
                 </div>
               </div>
             </div>
@@ -219,47 +227,55 @@ export const Datenschutz = memo(function Datenschutz() {
 
           <div className="grid gap-6">
             {sections.map((section, index) => (
-              <motion.div 
+              <motion.div
                 key={index}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                transition={{ delay: index * 0.05 }}
-                className="glass rounded-2xl p-8 border border-white/5 hover:border-primary/10 transition-colors"
+                transition={{ delay: index * 0.04, duration: 0.35 }}
+                className="group glass rounded-[2.5rem] p-8 md:p-10 border border-white/5 hover:border-primary/20 transition-all duration-500 hover:bg-card/90"
               >
-                <h2 className="text-lg font-bold mb-4 flex items-center gap-3">
-                  <Database className="w-4 h-4 text-primary/40" />
-                  {section.title}
-                </h2>
-                <div className="text-muted-foreground leading-relaxed text-sm md:text-base">
+                <div className="flex items-center gap-4 mb-8">
+                  <div className="w-12 h-12 rounded-2xl bg-primary/5 flex items-center justify-center border border-primary/10 group-hover:scale-110 transition-transform">
+                    <section.icon className="w-6 h-6 text-primary" />
+                  </div>
+                  <h2 className="text-2xl font-black tracking-tight text-white group-hover:text-primary transition-colors uppercase italic">
+                    {section.title}
+                  </h2>
+                </div>
+                <div className="text-muted-foreground leading-relaxed">
                   {section.content}
                 </div>
               </motion.div>
             ))}
 
-            {/* Kontakt Footer */}
-            <motion.div 
-              initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1 }}
-              className="mt-12 p-8 rounded-3xl border border-primary/10 bg-primary/[0.02] flex flex-col items-center text-center gap-4"
+            {/* Kontakt Section */}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.35 }}
+              className="mt-12 p-10 glass-strong rounded-[2.5rem] border border-primary/20 bg-primary/[0.02] flex flex-col items-center text-center gap-6"
             >
-              <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center border border-primary/20 mb-2">
-                <Shield className="w-6 h-6 text-primary" />
+              <div className="w-16 h-16 rounded-full bg-background flex items-center justify-center border border-primary/20 shadow-2xl shadow-primary/20">
+                <Shield className="w-8 h-8 text-primary" />
               </div>
-              <h3 className="font-bold text-xl text-foreground">Datenschutz-Anfrage</h3>
-              <p className="text-sm text-muted-foreground max-w-md">
-                Möchten Sie Auskunft über Ihre Daten oder deren Löschung beantragen?
-              </p>
-              <div className="flex flex-col gap-2 mt-2 w-full">
-                <a 
-                  href="mailto:legal@oppro-network.de?subject=DSGVO-Anfrage" 
-                  className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-xl font-bold text-sm hover:opacity-90 transition-opacity"
-                >
-                  <Mail className="w-4 h-4" />
-                  Anfrage per E-Mail
-                </a>
-                <p className="text-xs text-muted-foreground/60">Bearbeitungszeit: i.d.R. weniger als 30 Tage</p>
+              <div className="space-y-2">
+                <h3 className="font-black text-3xl text-white tracking-tighter uppercase italic">Privacy Support</h3>
+                <p className="text-muted-foreground max-w-md mx-auto font-medium text-sm">
+                  Fragen zur Auskunft oder Löschung Ihrer Daten? Unser Legal-Team steht Ihnen direkt zur Verfügung.
+                </p>
               </div>
+              <a
+                href="mailto:legal@oppro-network.de?subject=DSGVO-Anfrage"
+                className="group relative inline-flex items-center justify-center gap-3 px-10 py-5 bg-gradient-to-r from-primary to-accent text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:shadow-[0_15px_40px_rgba(255,0,0,0.5)] transition-all overflow-hidden"
+              >
+                <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <Mail className="w-5 h-5 relative z-10" />
+                <span className="relative z-10">Anfrage senden</span>
+              </a>
+              <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/40 mt-2">
+                Aktueller Stand: Januar 2026 • © ManagerX
+              </p>
             </motion.div>
           </div>
         </div>
diff --git a/src/web/pages/Impressum.tsx b/src/web/pages/Impressum.tsx
index fe622e4..f247e2a 100644
--- a/src/web/pages/Impressum.tsx
+++ b/src/web/pages/Impressum.tsx
@@ -7,161 +7,228 @@ import { motion } from "framer-motion";
 
 export const Impressum = memo(function Impressum() {
   return (
-    <div 
+    <div
       className="min-h-screen bg-background flex flex-col"
     >
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24">
-        <div className="max-w-3xl mx-auto">
+        <div className="max-w-4xl mx-auto">
           {/* Back Button */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
           >
-            <Link 
-              to="/" 
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium"
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-black uppercase tracking-widest"
             >
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              Zurück zur Startseite
+              Zurück zur Zentrale
             </Link>
           </motion.div>
 
-          <header className="mb-12">
-            <div className="flex items-center gap-5 mb-4">
-              <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
-                <ShieldCheck className="w-6 h-6 text-primary" />
+          <header className="mb-16">
+            <div className="flex items-center gap-6 mb-4">
+              <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20 shadow-xl shadow-primary/10">
+                <ShieldCheck className="w-8 h-8 text-primary" />
               </div>
               <div>
-                <h1 className="text-4xl font-black tracking-tight text-foreground uppercase">
-                  Impres<span className="text-primary">sum</span>
+                <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-foreground uppercase italic leading-none">
+                  Impres<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">sum</span>
                 </h1>
-                <p className="text-muted-foreground font-mono text-[10px] uppercase tracking-widest mt-1 opacity-50">
+                <p className="text-muted-foreground font-mono text-[10px] uppercase tracking-widest mt-2 opacity-50">
                   Angaben gemäß § 5 TMG
                 </p>
               </div>
             </div>
           </header>
 
-          <motion.div 
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="glass rounded-3xl p-8 md:p-12 border border-white/5 space-y-12"
-          >
-            {/* Verantwortlich */}
-            <section className="flex flex-col md:flex-row md:items-start gap-6">
-              <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10">
-                <User className="w-5 h-5 text-primary" />
-              </div>
-              <div>
-                <h2 className="text-sm font-bold uppercase tracking-widest text-primary mb-3">Verantwortliche Person (§5 TMG)</h2>
-                <p className="text-xl font-semibold text-foreground">Lenny Steiger</p>
-                <p className="text-sm text-muted-foreground mt-1">Gründer & Projektleiter</p>
-              </div>
-            </section>
-
-            {/* Anschrift */}
-            <section className="flex flex-col md:flex-row md:items-start gap-6">
-              <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10">
-                <MapPin className="w-5 h-5 text-primary" />
-              </div>
-              <div>
-                <h2 className="text-sm font-bold uppercase tracking-widest text-primary mb-3">Adresse</h2>
-                <div className="space-y-1 text-muted-foreground leading-relaxed text-sm">
-                  <p>Lenny Steiger</p>
+          <div className="grid gap-6">
+            {/* Kontakt Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <motion.section
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="glass rounded-3xl p-8 border border-white/5 space-y-6"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center border border-primary/20">
+                    <User className="w-5 h-5 text-primary" />
+                  </div>
+                  <h2 className="text-xs font-black uppercase tracking-[0.3em] text-primary">Verantwortlich</h2>
+                </div>
+                <div>
+                  <p className="text-2xl font-black text-foreground tracking-tight">Lenny Steiger</p>
+                  <p className="text-sm text-muted-foreground mt-1 font-medium">Gründer & Projektleiter</p>
+                </div>
+              </motion.section>
+
+              <motion.section
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 }}
+                className="glass rounded-3xl p-8 border border-white/5 space-y-6"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center border border-primary/20">
+                    <MapPin className="w-5 h-5 text-primary" />
+                  </div>
+                  <h2 className="text-xs font-black uppercase tracking-[0.3em] text-primary">Anschrift</h2>
+                </div>
+                <div className="space-y-1 text-foreground font-bold tracking-tight">
                   <p>Eulauer Str. 24</p>
                   <p>04523 Pegau</p>
-                  <p>Deutschland</p>
+                  <p className="text-muted-foreground font-medium text-sm">Deutschland</p>
                 </div>
-              </div>
-            </section>
+              </motion.section>
+            </div>
 
-            {/* Kontakt */}
-            <section className="flex flex-col md:flex-row md:items-start gap-6">
-              <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10">
-                <Mail className="w-5 h-5 text-primary" />
+            {/* Kontakt Details */}
+            <motion.section
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="glass rounded-3xl p-8 border border-white/5"
+            >
+              <div className="flex items-center gap-4 mb-8">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center border border-primary/20">
+                  <Mail className="w-5 h-5 text-primary" />
+                </div>
+                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-primary">Kommunikation</h2>
               </div>
-              <div>
-                <h2 className="text-sm font-bold uppercase tracking-widest text-primary mb-3">Kontakt</h2>
-                <div className="space-y-2">
-                  <div>
-                    <p className="text-xs text-muted-foreground/70">E-Mail (Allgemein):</p>
-                    <a 
-                      href="mailto:contact@oppro-network.de" 
-                      className="text-sm font-medium text-foreground hover:text-primary transition-colors"
-                    >
-                      contact@oppro-network.de
-                    </a>
-                  </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground/70">E-Mail (Legal):</p>
-                    <a 
-                      href="mailto:legal@oppro-network.de" 
-                      className="text-sm font-medium text-foreground hover:text-primary transition-colors"
-                    >
-                      legal@oppro-network.de
-                    </a>
-                  </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">E-Mail Adresse</p>
+                  <a href="mailto:contact@oppro-network.de" className="text-lg font-black text-foreground hover:text-primary transition-all underline decoration-primary/30 underline-offset-4">
+                    contact@oppro-network.de
+                  </a>
+                </div>
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Support & Legal</p>
+                  <a href="mailto:legal@oppro-network.de" className="text-lg font-black text-foreground hover:text-primary transition-all underline decoration-primary/30 underline-offset-4">
+                    legal@oppro-network.de
+                  </a>
                 </div>
               </div>
-            </section>
-
-            {/* Rechtliche Hinweise */}
-            <section className="border-t border-white/5 pt-8 space-y-4">
-              <h2 className="text-sm font-bold uppercase tracking-widest text-primary mb-4">Rechtliche Informationen</h2>
-              
-              <div className="space-y-3 text-sm text-muted-foreground">
+              <div className="mt-8 pt-8 border-t border-white/5 space-y-4">
                 <div>
-                  <p className="font-medium text-foreground mb-1">Haftungsausschluss (§ 7 TMG)</p>
-                  <p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Umsatzsteuer-Identifikationsnummer</p>
+                  <p className="text-sm text-foreground font-medium">Gemäß §19 UStG wird keine Umsatzsteuer berechnet (Kleinunternehmerregelung)</p>
+                </div>
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Inhaltlich Verantwortlicher</p>
+                  <p className="text-sm text-foreground font-medium">Lenny Steiger (Anschrift wie oben)</p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+                    Direkte Kommunikation via Discord Support-Server bevorzugt.
+                  </p>
+                </div>
+              </div>
+            </motion.section>
+
+            {/* Aufsichtsbehörde & Berufsbezeichnung */}
+            <motion.section
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.25 }}
+              className="glass rounded-3xl p-8 border border-white/5"
+            >
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center border border-primary/20">
+                  <ShieldCheck className="w-5 h-5 text-primary" />
+                </div>
+                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-primary">Rechtliche Angaben</h2>
+              </div>
+              <div className="space-y-6 text-sm">
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Projektart</p>
+                  <p className="text-foreground font-medium">Privates Open-Source-Projekt (nicht-kommerziell)</p>
+                </div>
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Registrierung</p>
+                  <p className="text-foreground font-medium">Keine gewerbliche Anmeldung erforderlich (privates Projekt)</p>
                 </div>
-
                 <div>
-                  <p className="font-medium text-foreground mb-1">Haftung für Links</p>
-                  <p>Unsere Website enthält Links zu externen Websites. Für die Inhalte der verlinkten Seiten sind wir nicht verantwortlich. Die Betreiber der verlinkten Seiten sind allein für deren Inhalte verantwortlich.</p>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-2">Haftungsausschluss</p>
+                  <p className="text-muted-foreground leading-relaxed">Dieses Projekt wird als kostenloser Service ohne Gewinnabsicht betrieben. Es besteht kein Anspruch auf Verfügbarkeit oder Support.</p>
                 </div>
+              </div>
+            </motion.section>
 
+            {/* Rechtliche Hinweise */}
+            <motion.section
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+              className="glass rounded-3xl p-8 md:p-12 border border-white/5 space-y-10"
+            >
+              <div className="space-y-8 text-sm text-muted-foreground leading-relaxed">
                 <div>
-                  <p className="font-medium text-foreground mb-1">Urheberrecht</p>
-                  <p>Die Inhalte und Werke auf dieser Website sind urheberrechtlich geschützt. Eine Vervielfältigung, Bearbeitung, Verbreitung oder jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedarf der vorherigen schriftlichen Zustimmung des Autors oder Erstellers. Der Quellcode ist unter der <strong>GPL-3.0 Lizenz</strong> verfügbar.</p>
+                  <h3 className="text-lg font-black text-foreground mb-3 flex items-center gap-3">
+                    <span className="text-primary/40 font-mono text-sm">01</span>
+                    Haftung für Inhalte
+                  </h3>
+                  <p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
                 </div>
 
                 <div>
-                  <p className="font-medium text-foreground mb-1">Hosting & GitHub Pages</p>
-                  <p>Diese Website wird gehostet auf <strong>GitHub Pages</strong> (GitHub Inc., San Francisco, USA). Informationen zur Datenverarbeitung finden Sie unter: <a href="https://docs.github.com/en/github/site-policy/github-privacy-statement" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">GitHub Privacy Statement</a></p>
+                  <h3 className="text-lg font-black text-foreground mb-3 flex items-center gap-3">
+                    <span className="text-primary/40 font-mono text-sm">02</span>
+                    Haftung für Links
+                  </h3>
+                  <p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
                 </div>
 
                 <div>
-                  <p className="font-medium text-foreground mb-1">Datenschutz</p>
-                  <p>Siehe unsere <Link to="/datenschutz" className="text-primary hover:underline">Datenschutzerklärung</Link> für Informationen über die Verarbeitung personenbezogener Daten.</p>
+                  <h3 className="text-lg font-black text-foreground mb-3 flex items-center gap-3">
+                    <span className="text-primary/40 font-mono text-sm">03</span>
+                    Urheberrecht
+                  </h3>
+                  <p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Der Source-Code ist unter der <Link to="/legal/license" className="text-primary hover:underline">GPL-3.0 Lizenz</Link> frei verfügbar.</p>
                 </div>
 
                 <div>
-                  <p className="font-medium text-foreground mb-1">Nutzungsbedingungen</p>
-                  <p>Die <Link to="/nutzungsbedingungen" className="text-primary hover:underline">Nutzungsbedingungen</Link> regeln die Verwendung dieses Services.</p>
+                  <h3 className="text-lg font-black text-foreground mb-3 flex items-center gap-3">
+                    <span className="text-primary/40 font-mono text-sm">04</span>
+                    Hosting
+                  </h3>
+                  <p>Diese Website wird als statische Seite auf <strong>GitHub Pages</strong> (GitHub Inc., 88 Colin P. Kelly Jr St, San Francisco, CA 94107, USA) bereitgestellt. Die Datenschutzerklärung von GitHub finden Sie <a href="https://docs.github.com/en/github/site-policy/github-privacy-statement" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">hier</a>.</p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5">
+                  <Link to="/legal/privacy" className="group flex flex-col gap-2 p-6 rounded-2xl bg-white/5 border border-white/5 hover:bg-primary/[0.05] hover:border-primary/20 transition-all">
+                    <span className="text-xs font-black uppercase tracking-widest text-primary">Datenschutz</span>
+                    <span className="text-sm text-muted-foreground group-hover:text-foreground">Informationen zur DSGVO</span>
+                  </Link>
+                  <Link to="/legal/terms" className="group flex flex-col gap-2 p-6 rounded-2xl bg-white/5 border border-white/5 hover:bg-primary/[0.05] hover:border-primary/20 transition-all">
+                    <span className="text-xs font-black uppercase tracking-widest text-primary">Bedingungen</span>
+                    <span className="text-sm text-muted-foreground group-hover:text-foreground">Nutzungsrichtlinien für Bot & Web</span>
+                  </Link>
                 </div>
               </div>
-            </section>
+            </motion.section>
 
             {/* Streitbeilegung */}
-            <section className="border-t border-white/5 pt-8 space-y-3">
-              <h2 className="text-sm font-bold uppercase tracking-widest text-primary mb-4">Streitbeilegung</h2>
-              <p className="text-sm text-muted-foreground">
-                Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://ec.europa.eu/consumers/odr/</a>
+            <motion.section
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4 }}
+              className="p-8 glass-strong rounded-3xl border border-primary/20 bg-primary/[0.02]"
+            >
+              <h3 className="text-sm font-black uppercase tracking-widest text-primary mb-4">Streitbeilegung</h3>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
+                <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" className="ml-2 text-foreground font-black hover:text-primary underline decoration-primary/30">https://ec.europa.eu/consumers/odr/</a>
               </p>
-              <p className="text-xs text-muted-foreground/70">Wir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
-            </section>
-
-            {/* Letzte Aktualisierung */}
-            <section className="border-t border-white/5 pt-8">
-              <p className="text-xs text-muted-foreground/60">Letzte Aktualisierung: Januar 2026</p>
-            </section>
-          </motion.div>
+              <p className="mt-4 text-[10px] text-muted-foreground/50 uppercase font-bold">Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
+            </motion.section>
+          </div>
 
-          {/* Optional Footer Disclaimer */}
-          <p className="mt-8 text-center text-[10px] text-muted-foreground/40 leading-relaxed max-w-xl mx-auto">
-            Dieses Impressum gilt auch für unsere Social-Media-Präsenzen und den Discord-Bot ManagerX. Das Projekt wird entwickelt und gehostet von OPPRO.NET Network.
+          <p className="mt-12 text-center text-[10px] text-muted-foreground/30 uppercase tracking-[0.2em] font-black">
+            Stand: 29. Januar 2026 • © ManagerX Development
           </p>
         </div>
       </main>
diff --git a/src/web/pages/License.tsx b/src/web/pages/License.tsx
index 861d458..aaa5f0b 100644
--- a/src/web/pages/License.tsx
+++ b/src/web/pages/License.tsx
@@ -60,7 +60,7 @@ export const License = memo(function License() {
           </h3>
           <p className="text-xs text-muted-foreground mt-1">v{dep.version}</p>
           <p className="text-xs text-muted-foreground mt-1.5">
-            <span className="inline-block px-2 py-0.5 rounded bg-primary/10 text-primary font-mono text-[9px]">
+            <span className="inline-block px-2 py-0.5 rounded bg-primary/10 text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-mono text-[9px] border border-primary/20">
               {dep.license}
             </span>
           </p>
@@ -71,46 +71,60 @@ export const License = memo(function License() {
   );
 
   return (
-    <div 
+    <div
       className="min-h-screen bg-background flex flex-col"
     >
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24">
         <div className="max-w-5xl mx-auto">
           {/* Back Button */}
-          <motion.div 
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-          >
-            <Link 
-              to="/" 
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium"
+          <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.4 }}>
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-all mb-12 group text-sm font-black uppercase tracking-widest"
             >
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              Zurück zur Startseite
+              Zurück zur Zentrale
             </Link>
           </motion.div>
 
-          {/* Header */}
-          <header className="mb-12">
-            <div className="flex items-center gap-5 mb-4">
-              <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
-                <Code2 className="w-6 h-6 text-primary" />
-              </div>
+          <header className="mb-16">
+            <div className="flex items-center gap-6 mb-8">
+              <motion.div
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ delay: 0.1, type: "spring", stiffness: 200 }}
+                className="relative w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20 shadow-xl shadow-primary/10"
+              >
+                <Code2 className="w-8 h-8 text-primary" />
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl animate-pulse" />
+              </motion.div>
               <div>
-                <h1 className="text-4xl font-black tracking-tight text-foreground uppercase">
-                  Open <span className="text-primary">Source</span>
-                </h1>
-                <p className="text-muted-foreground font-mono text-[10px] uppercase tracking-widest mt-1 opacity-50">
-                  GPL-3.0 & Lizenz Information
-                </p>
+                <motion.h1
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                  className="text-5xl md:text-7xl font-black tracking-tighter text-foreground uppercase italic leading-none mb-2"
+                >
+                  Open <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary animate-gradient">Source</span>
+                </motion.h1>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 0.4 }}
+                  transition={{ delay: 0.3 }}
+                  className="flex gap-4"
+                >
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">GPL-3.0 License</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">•</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Free Forever</span>
+                </motion.div>
               </div>
             </div>
           </header>
 
           {/* Main Content */}
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             className="glass rounded-3xl p-8 md:p-12 border border-white/5 space-y-12"
@@ -121,13 +135,13 @@ export const License = memo(function License() {
                 <Shield className="w-6 h-6 text-primary" />
                 <h2 className="text-2xl font-bold text-foreground">GNU General Public License v3.0</h2>
               </div>
-              
+
               <div className="bg-secondary/50 rounded-2xl p-6 border border-primary/10 space-y-4">
                 <p className="text-foreground">
                   <strong>ManagerX</strong> ist lizenziert unter der{" "}
-                  <a 
-                    href="https://www.gnu.org/licenses/gpl-3.0.de.html" 
-                    target="_blank" 
+                  <a
+                    href="https://www.gnu.org/licenses/gpl-3.0.de.html"
+                    target="_blank"
                     rel="noopener noreferrer"
                     className="text-primary hover:underline"
                   >
@@ -137,19 +151,19 @@ export const License = memo(function License() {
 
                 <div className="space-y-3 text-sm text-muted-foreground">
                   <div className="flex items-start gap-3">
-                    <span className="text-primary font-bold mt-0.5">✓</span>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-bold mt-0.5">✓</span>
                     <p><strong>Freiheit zu verwenden:</strong> Sie können das Programm für jeden Zweck verwenden.</p>
                   </div>
                   <div className="flex items-start gap-3">
-                    <span className="text-primary font-bold mt-0.5">✓</span>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-bold mt-0.5">✓</span>
                     <p><strong>Freiheit zu studieren:</strong> Sie können den Quellcode einsehen und verstehen.</p>
                   </div>
                   <div className="flex items-start gap-3">
-                    <span className="text-primary font-bold mt-0.5">✓</span>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-bold mt-0.5">✓</span>
                     <p><strong>Freiheit zu verteilen:</strong> Sie können Kopien weitergeben.</p>
                   </div>
                   <div className="flex items-start gap-3">
-                    <span className="text-primary font-bold mt-0.5">✓</span>
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent font-bold mt-0.5">✓</span>
                     <p><strong>Freiheit zu verbessern:</strong> Sie können das Programm modifizieren und verbesserungen veröffentlichen.</p>
                   </div>
                 </div>
@@ -230,9 +244,18 @@ export const License = memo(function License() {
               </div>
               <div className="bg-secondary/50 rounded-2xl p-6 border border-accent/10">
                 <div className="space-y-3 text-sm text-muted-foreground">
-                  <p>• Bug-Reports und Verbesserungsvorschläge</p>
-                  <p>• Code-Beiträge und Feature-Implementationen</p>
-                  <p>• Dokumentations-Verbesserungen</p>
+                  <div className="flex items-center gap-3">
+                    <span className="text-accent font-bold">✓</span>
+                    <p>Bug-Reports und Verbesserungsvorschläge</p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-accent font-bold">✓</span>
+                    <p>Code-Beiträge und Feature-Implementationen</p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-accent font-bold">✓</span>
+                    <p>Dokumentations-Verbesserungen</p>
+                  </div>
                 </div>
                 <div className="mt-6">
                   <a
@@ -262,9 +285,9 @@ export const License = memo(function License() {
             <section className="space-y-4 pt-8 border-t border-white/10">
               <h3 className="text-sm font-semibold text-muted-foreground uppercase">Links</h3>
               <div className="flex flex-wrap gap-4">
-                <Link to="/datenschutz" className="text-xs text-primary hover:underline">Datenschutz</Link>
-                <Link to="/nutzungsbedingungen" className="text-xs text-primary hover:underline">Nutzungsbedingungen</Link>
-                <Link to="/impressum" className="text-xs text-primary hover:underline">Impressum</Link>
+                <Link to="/legal/privacy" className="text-xs text-primary hover:underline">Datenschutz</Link>
+                <Link to="/legal/terms" className="text-xs text-primary hover:underline">AGB</Link>
+                <Link to="/legal/imprint" className="text-xs text-primary hover:underline">Impressum</Link>
                 <a href="https://github.com/ManagerX-Development/ManagerX" target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline">GitHub</a>
               </div>
             </section>
diff --git a/src/web/pages/NotFound.tsx b/src/web/pages/NotFound.tsx
index 839091d..144d887 100644
--- a/src/web/pages/NotFound.tsx
+++ b/src/web/pages/NotFound.tsx
@@ -1,7 +1,7 @@
 import { useLocation, Link } from "react-router-dom";
 import { useEffect } from "react";
 import { motion } from "framer-motion";
-import { Shield, Sparkles, Home, Terminal } from "lucide-react";
+import { Shield, Home, Terminal, Sparkles, AlertTriangle } from "lucide-react";
 
 const NotFound = () => {
   const location = useLocation();
@@ -10,86 +10,234 @@ const NotFound = () => {
     console.error("404 Error: User attempted to access non-existent route:", location.pathname);
   }, [location.pathname]);
 
+  // Floating particles animation - reduced from 20 to 8 for better performance
+  const particles = Array.from({ length: 8 }, (_, i) => ({
+    id: i,
+    x: Math.random() * 100,
+    y: Math.random() * 100,
+    delay: Math.random() * 2,
+    duration: 3 + Math.random() * 2,
+  }));
+
   return (
-    <div 
-      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background"
-    >
-      {/* --- ORIGINAL HERO BACKGROUND --- */}
+    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background">
+      {/* Enhanced Background */}
       <div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-background to-background" />
-      
-      {/* Simple gradient orbs */}
-      <div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] bg-primary/10 rounded-full opacity-50 blur-[100px]" />
-      <div className="absolute bottom-1/4 right-1/4 w-[300px] h-[300px] bg-accent/10 rounded-full opacity-40 blur-[80px]" />
-      
+
+      {/* Animated gradient orbs - Optimized for legacy hardware */}
+      <motion.div
+        style={{ willChange: "transform, opacity" }}
+        animate={{
+          scale: [1, 1.1, 1],
+          opacity: [0.2, 0.4, 0.2],
+        }}
+        transition={{
+          duration: 6,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+        className="absolute top-1/4 left-1/4 w-[400px] h-[400px] bg-primary/10 rounded-full blur-[80px]"
+      />
+      <motion.div
+        style={{ willChange: "transform, opacity" }}
+        animate={{
+          scale: [1, 1.2, 1],
+          opacity: [0.15, 0.3, 0.15],
+        }}
+        transition={{
+          duration: 8,
+          repeat: Infinity,
+          ease: "easeInOut",
+          delay: 1,
+        }}
+        className="absolute bottom-1/4 right-1/4 w-[350px] h-[350px] bg-accent/10 rounded-full blur-[60px]"
+      />
+
+      {/* Floating particles */}
+      {particles.map((particle) => (
+        <motion.div
+          key={particle.id}
+          className="absolute w-1 h-1 bg-primary/30 rounded-full"
+          style={{
+            left: `${particle.x}%`,
+            top: `${particle.y}%`,
+          }}
+          animate={{
+            y: [0, -30, 0],
+            opacity: [0, 1, 0],
+          }}
+          transition={{
+            duration: particle.duration,
+            repeat: Infinity,
+            delay: particle.delay,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+
       {/* Grid Pattern */}
-      <div className="absolute inset-0 opacity-[0.03] grid-pattern" />
+      <div className="absolute inset-0 opacity-[0.02] grid-pattern" />
 
       <div className="container relative z-10 px-4">
         <div className="text-center max-w-5xl mx-auto">
-          
-          {/* --- ORIGINAL HERO LOGO --- */}
+
+          {/* Logo with enhanced animation */}
           <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
+            initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
-            className="flex items-center justify-center gap-5 mb-8"
+            transition={{ type: "spring", stiffness: 200, damping: 15 }}
+            className="flex items-center justify-center gap-5 mb-12"
           >
             <div className="relative">
-              <div className="w-24 h-24 rounded-3xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/30">
+              <motion.div
+                animate={{
+                  rotate: [0, 5, -5, 0],
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                }}
+                className="w-24 h-24 rounded-3xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-2xl shadow-primary/40"
+              >
                 <Shield className="w-12 h-12 text-primary-foreground" />
-              </div>
-              <div className="absolute -bottom-2 -right-2 w-8 h-8 bg-destructive rounded-full flex items-center justify-center shadow-lg shadow-destructive/30">
-                <span className="text-[10px] font-bold text-white">404</span>
-              </div>
+              </motion.div>
+              <motion.div
+                animate={{
+                  scale: [1, 1.2, 1],
+                }}
+                transition={{
+                  duration: 2,
+                  repeat: Infinity,
+                }}
+                className="absolute -bottom-2 -right-2 w-10 h-10 bg-destructive rounded-full flex items-center justify-center shadow-xl shadow-destructive/50"
+              >
+                <span className="text-xs font-black text-white">404</span>
+              </motion.div>
             </div>
           </motion.div>
 
-          {/* --- ORIGINAL HERO TITLE STYLE --- */}
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
+          {/* Animated 404 Title */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1 }}
-            className="text-6xl md:text-8xl font-bold mb-8 tracking-tight"
+            transition={{ delay: 0.2, duration: 0.6 }}
+            className="mb-8"
           >
-            <span className="text-foreground italic">Error</span>
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent ml-3">404</span>
-          </motion.h1>
+            <motion.h1
+              className="text-8xl md:text-[12rem] font-black mb-4 tracking-tighter leading-none"
+            >
+              <motion.span
+                animate={{
+                  textShadow: [
+                    "0 0 20px rgba(255,0,0,0.3)",
+                    "0 0 40px rgba(255,0,0,0.5)",
+                    "0 0 20px rgba(255,0,0,0.3)",
+                  ],
+                }}
+                transition={{
+                  duration: 2,
+                  repeat: Infinity,
+                }}
+                className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary animate-gradient"
+              >
+                404
+              </motion.span>
+            </motion.h1>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.3 }}
+              className="inline-flex items-center gap-2 glass rounded-full px-6 py-3 border border-destructive/30"
+            >
+              <AlertTriangle className="w-4 h-4 text-destructive animate-pulse" />
+              <span className="text-sm font-black uppercase tracking-widest text-destructive">Route Not Found</span>
+            </motion.div>
+          </motion.div>
 
-          {/* --- DESCRIPTION --- */}
+          {/* Description */}
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
+            transition={{ delay: 0.4 }}
+            className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed font-medium"
           >
-            Dieser Pfad ist im <span className="text-foreground font-medium">ManagerX</span> Netzwerk nicht registriert. Kehre zurück zur Zentrale.
+            Dieser Pfad ist im <span className="text-foreground font-black">ManagerX</span> Netzwerk nicht registriert. Kehre zurück zur Zentrale.
           </motion.p>
 
-          {/* --- CTA BUTTON (HERO STYLE) --- */}
+          {/* CTA Button */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.3 }}
+            transition={{ delay: 0.5 }}
             className="flex justify-center mb-20"
           >
-            <Link to="/" className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-primary to-accent rounded-xl text-white font-bold hover:shadow-lg hover:shadow-primary/50 transition-all group">
-              <Home className="w-5 h-5" />
-              <span>Zurück zur Home</span>
-              <span className="inline-block group-hover:translate-x-1 transition-transform">→</span>
-            </Link>
+            <motion.div
+              whileHover={{ scale: 1.05, y: -2 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <Link
+                to="/"
+                className="group relative inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-primary to-accent rounded-2xl text-white font-black text-lg hover:shadow-[0_20px_50px_rgba(255,0,0,0.5)] transition-all uppercase tracking-widest overflow-hidden"
+              >
+                <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <Home className="w-5 h-5 relative z-10" />
+                <span className="relative z-10">Zurück zur Home</span>
+                <motion.span
+                  animate={{ x: [0, 5, 0] }}
+                  transition={{ duration: 1.5, repeat: Infinity }}
+                  className="relative z-10"
+                >
+                  →
+                </motion.span>
+              </Link>
+            </motion.div>
           </motion.div>
 
-          {/* --- TERMINAL FOOTER --- */}
-          <motion.div 
+          {/* Terminal Footer */}
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
-            transition={{ delay: 0.5 }}
-            className="inline-flex items-center gap-3 px-6 py-2 glass rounded-full border border-white/5 text-[10px] font-mono text-muted-foreground uppercase tracking-widest"
+            transition={{ delay: 0.6 }}
+            className="inline-flex items-center gap-3 px-6 py-3 glass rounded-2xl border border-white/10 text-[10px] font-mono text-muted-foreground uppercase tracking-widest shadow-xl"
           >
             <Terminal className="w-3 h-3 text-primary" />
-            <span>Path: {location.pathname}</span>
+            <span>Path: <span className="text-primary font-bold">{location.pathname}</span></span>
             <span className="text-primary/30">|</span>
-            <span>Status: 404 NOT FOUND</span>
+            <span className="text-destructive font-bold">Status: 404 NOT FOUND</span>
           </motion.div>
+
+          {/* Decorative sparkles */}
+          <div className="absolute top-1/4 right-1/4">
+            <motion.div
+              animate={{
+                rotate: 360,
+                scale: [1, 1.2, 1],
+              }}
+              transition={{
+                duration: 3,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+            >
+              <Sparkles className="w-6 h-6 text-primary/30" />
+            </motion.div>
+          </div>
+          <div className="absolute bottom-1/3 left-1/3">
+            <motion.div
+              animate={{
+                rotate: -360,
+                scale: [1, 1.3, 1],
+              }}
+              transition={{
+                duration: 4,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+            >
+              <Sparkles className="w-4 h-4 text-accent/30" />
+            </motion.div>
+          </div>
         </div>
       </div>
 
diff --git a/src/web/pages/Nutzungsbedingungen.tsx b/src/web/pages/Nutzungsbedingungen.tsx
index 953c688..8fc629a 100644
--- a/src/web/pages/Nutzungsbedingungen.tsx
+++ b/src/web/pages/Nutzungsbedingungen.tsx
@@ -1,226 +1,179 @@
 import { memo } from "react";
 import { Link } from "react-router-dom";
-import { ArrowLeft, FileText, Mail, Github, Shield } from "lucide-react";
+import { ArrowLeft, FileText, Mail, Github, Shield, CheckCircle, Zap, AlertTriangle, Scale, Lock, RefreshCw, HelpCircle, Code2, LogOut, Database } from "lucide-react";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { motion } from "framer-motion";
-const legalSections = [
-  {
-    title: "1. Geltungsbereich",
-    content: "Diese Nutzungsbedingungen regeln die Verwendung des Discord-Bots ManagerX sowie dieser Website. Mit der Nutzung des Bots, der Website oder des Quellcodes erklärst du dich mit diesen Bedingungen einverstanden.",
-  },
-  {
-    title: "2. Lizenz & Open Source",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>ManagerX wird unter der <strong>GNU General Public License v3.0 (GPL-3.0)</strong> lizenziert.</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Quellcode darf frei eingesehen, modifiziert und verbreitet werden</li>
-          <li>Modifikationen müssen ebenfalls unter GPL-3.0 lizenziert werden</li>
-          <li>Kommerzielles Hosting ist gestattet, Quellcode muss verfügbar sein</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "3. Bot-Nutzung",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>ManagerX darf auf Discord-Servern genutzt werden, sofern:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Sie Admin-Rechte auf dem Server haben</li>
-          <li>Die Nutzung den Discord Terms of Service entspricht</li>
-          <li>Sie keine illegalen oder schädlichen Aktivitäten durchführen</li>
-          <li>Sie keine Spam-, Phishing- oder Hacking-Funktionen implementieren</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "4. Verbotene Nutzung",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Folgende Aktivitäten sind streng untersagt:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Reverse Engineering zu böswilligen Zwecken</li>
-          <li>DDoS-Attacken oder Sicherheitsverstöße</li>
-          <li>Automatisierte Spam- oder Harassment-Kampagnen</li>
-          <li>Verbreitung von Malware oder Exploits</li>
-          <li>Verstöße gegen Discord Community Guidelines</li>
-        </ul>
-        <p className="mt-2"><strong>Konsequenz:</strong> Sofortiger Ausschluss und mögliche Benachrichtigung von Discord & Strafverfolgungsbehörden</p>
-      </div>
-    ),
-  },
-  {
-    title: "5. Haftungsausschluss",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>OPPRO.NET Network und die Betreiber von ManagerX übernehmen <strong>keine Haftung</strong> für:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Datenverluste durch Bot-Fehler oder Misconfiguration</li>
-          <li>Ausfallzeiten oder Performance-Probleme</li>
-          <li>Direkte, indirekte oder Folgeschäden</li>
-          <li>Discord API-Änderungen, die Funktionen beeinflussen</li>
-          <li>Verlust von Server-Daten durch User-Fehler</li>
-        </ul>
-        <p className="mt-2 italic">Der Bot wird "AS IS" (ohne Gewährleistung) bereitgestellt.</p>
-      </div>
-    ),
-  },
-  {
-    title: "6. Funktionalität & Änderungen",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Wir behalten uns das Recht vor:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Funktionen zu aktualisieren, zu optimieren oder zu entfernen</li>
-          <li>Wartungsarbeiten ohne vorherige Ankündigung durchzuführen</li>
-          <li>Den Bot zeitweise offline zu nehmen</li>
-          <li>Nutzungsrichtlinien zu ändern (mit 30 Tagen Ankündigung)</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "7. Datenschutz & Datenverwaltung",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Siehe unsere <Link to="/datenschutz" className="text-primary hover:underline">Datenschutzerklärung</Link> für Details über:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Erhobene und verarbeitete Daten</li>
-          <li>Dauer der Speicherung</li>
-          <li>Ihre Rechte nach DSGVO</li>
-          <li>Kontaktinformationen für Datenschutzanfragen</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "8. Geistiges Eigentum",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>ManagerX und die Website-Inhalte (außer Open-Source Code) sind urheberrechtlich geschützt.</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Logos, Design und UI sind Eigentum von OPPRO.NET</li>
-          <li>Source Code ist unter GPL-3.0 lizenziert und frei verwendbar</li>
-          <li>Dokumentation ist unter der Lizenz des Projekts verfügbar</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "9. Benutzercommunity & Support",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Support wird bereitgestellt über:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>GitHub Issues für Bug Reports und Feature Requests</li>
-          <li>E-Mail: support@oppro-network.de</li>
-          <li>Discord Server (falls vorhanden)</li>
-        </ul>
-        <p className="mt-2"><strong>Hinweis:</strong> Support ist gemeinschaftlich und kann nicht garantiert werden.</p>
-      </div>
-    ),
-  },
-  {
-    title: "10. Beendigung der Nutzung",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Wir können Ihren Zugriff beenden, wenn Sie:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>Gegen diese Bedingungen verstoßen</li>
-          <li>Den Bot zu schädlichen Zwecken nutzen</li>
-          <li>Unsere Ressourcen missbrauchen</li>
-        </ul>
-      </div>
-    ),
-  },
-  {
-    title: "11. Abhängigkeiten & Third-Party",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>ManagerX nutzt External Libraries und Services:</p>
-        <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
-          <li>discord.py / py-cord: Offizielle Discord API Library</li>
-          <li>FastAPI & Uvicorn: Python Web Framework</li>
-          <li>SQLite: Datenbankengine</li>
-          <li>Dritte Dienste gemäß requirements.txt</li>
-        </ul>
-        <p className="mt-2">Siehe <code className="bg-white/5 px-2 py-1 rounded text-xs">requirements/req.txt</code> für vollständige Liste.</p>
-      </div>
-    ),
-  },
-  {
-    title: "12. Änderungen dieser Bedingungen",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>Diese Bedingungen können jederzeit geändert werden. Bedeutende Änderungen werden mit 30 Tagen Ankündigung kommuniziert.</p>
-        <p className="text-xs text-muted-foreground/60">Letzte Aktualisierung: Januar 2026</p>
-      </div>
-    ),
-  },
-  {
-    title: "13. Geltend geltendes Recht",
-    content: "Diese Bedingungen unterliegen deutschem Recht. Gerichtsstand ist Deutschland.",
-  },
-  {
-    title: "14. Kontakt bei Fragen",
-    content: (
-      <div className="space-y-2 text-sm">
-        <p>
-          Rechtliche oder vertragliche Fragen:{" "}
-          <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline">
-            legal@oppro-network.de
-          </a>
-        </p>
-        <p>
-          Support & Allgemeine Anfragen:{" "}
-          <a href="mailto:support@oppro-network.de" className="text-primary hover:underline">
-            support@oppro-network.de
-          </a>
-        </p>
-      </div>
-    ),
-  },
-];
 
 export const Nutzungsbedingungen = memo(function Nutzungsbedingungen() {
+  const legalSections = [
+    {
+      title: "1. Geltungsbereich",
+      icon: Scale,
+      content: "Diese Nutzungsbedingungen regeln die Verwendung des Discord-Bots ManagerX sowie dieser Website. Mit der Nutzung des Bots, der Website oder des Quellcodes erklärst du dich mit diesen Bedingungen einverstanden.",
+    },
+    {
+      title: "2. Lizenz & Open Source",
+      icon: Code2,
+      content: (
+        <div className="space-y-4">
+          <p>ManagerX wird unter der <span className="text-primary font-black uppercase tracking-widest text-xs">GNU GPL v3.0</span> lizenziert.</p>
+          <ul className="grid grid-cols-1 gap-2 text-sm text-muted-foreground font-medium">
+            <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0" /> Quellcode darf frei eingesehen, modifiziert und verbreitet werden.</li>
+            <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0" /> Modifikationen müssen ebenfalls unter GPL-3.0 lizenziert werden.</li>
+            <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0" /> Kommerzielles Hosting ist gestattet, Quellcode muss verfügbar sein.</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      title: "3. Bot-Nutzung",
+      icon: Zap,
+      content: (
+        <div className="space-y-3 text-sm leading-relaxed">
+          <p>ManagerX darf auf Discord-Servern genutzt werden, sofern:</p>
+          <ul className="space-y-1 ml-4">
+            <li>• Sie Admin-Rechte auf dem Server haben</li>
+            <li>• Die Nutzung den Discord Terms of Service entspricht</li>
+            <li>• Sie keine illegalen oder schädlichen Aktivitäten durchführen</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      title: "4. Verbotene Nutzung",
+      icon: AlertTriangle,
+      content: (
+        <div className="space-y-3 text-sm leading-relaxed">
+          <p>Folgende Aktivitäten sind streng untersagt:</p>
+          <ul className="space-y-1 ml-4 text-primary">
+            <li>• Reverse Engineering zu böswilligen Zwecken</li>
+            <li>• DDoS-Attacken oder Sicherheitsverstöße</li>
+            <li>• Automatisierte Spam-Kampagnen</li>
+            <li>• Verbreitung von Malware oder Exploits</li>
+          </ul>
+          <p className="mt-4 font-black uppercase tracking-tighter text-xs">Konsequenz: Sofortiger Ausschluss und Meldung an Behörden.</p>
+        </div>
+      ),
+    },
+    {
+      title: "5. Haftungsausschluss",
+      icon: Shield,
+      content: (
+        <div className="space-y-4 text-sm leading-relaxed">
+          <p>OPPRO.NET Network übernimmt <strong>keine Haftung</strong> für:</p>
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 font-bold text-foreground">
+            <li className="flex items-center gap-2"><CheckCircle className="w-3 h-3 text-primary" /> Datenverluste</li>
+            <li className="flex items-center gap-2"><CheckCircle className="w-3 h-3 text-primary" /> Ausfallzeiten</li>
+            <li className="flex items-center gap-2"><CheckCircle className="w-3 h-3 text-primary" /> Indirekte Schäden</li>
+            <li className="flex items-center gap-2"><CheckCircle className="w-3 h-3 text-primary" /> User-Fehler</li>
+          </ul>
+          <p className="italic text-muted-foreground mt-4">Der Bot wird "AS IS" bereitgestellt.</p>
+        </div>
+      ),
+    },
+    {
+      title: "6. Funktionalität",
+      icon: RefreshCw,
+      content: (
+        <div className="space-y-3 text-sm leading-relaxed">
+          <p>Wir behalten uns das Recht vor, Funktionen jederzeit zu aktualisieren, zu optimieren oder zu entfernen, um die Stabilität des Netzwerks zu gewährleisten.</p>
+        </div>
+      ),
+    },
+    {
+      title: "7. Datenschutz",
+      icon: Lock,
+      content: (
+        <p className="text-sm">Siehe unsere <Link to="/legal/privacy" className="text-primary hover:underline font-bold">Datenschutzerklärung</Link> für Details über erhobene Daten und Ihre Rechte nach DSGVO.</p>
+      ),
+    },
+    {
+      title: "8. Geistiges Eigentum",
+      icon: FileText,
+      content: (
+        <p className="text-sm">ManagerX (Logos, Design, UI) sind Eigentum von OPPRO.NET. Der Quellcode ist unter GPL-3.0 frei verwendbar.</p>
+      ),
+    },
+    {
+      title: "9. Community & Support",
+      icon: HelpCircle,
+      content: (
+        <div className="space-y-2 text-sm leading-relaxed">
+          <p>Support erfolgt gemeinschaftlich über GitHub Issues oder E-Mail. Ein Anspruch auf sofortigen Support besteht nicht.</p>
+        </div>
+      ),
+    },
+    {
+      title: "10. Beendigung",
+      icon: LogOut,
+      content: (
+        <p className="text-sm">Wir können Ihren Zugriff beenden, wenn Sie gegen diese Bedingungen verstoßen oder unsere Ressourcen missbrauchen.</p>
+      ),
+    },
+    {
+      title: "11. Abhängigkeiten",
+      icon: Database,
+      content: (
+        <p className="text-sm">ManagerX nutzt externe Libraries (discord.py, FastAPI, SQLite). Siehe <code className="bg-white/5 px-2 py-0.5 rounded">requirements.txt</code> für vollständige Details.</p>
+      ),
+    },
+    {
+      title: "12. Änderungen",
+      icon: RefreshCw,
+      content: (
+        <p className="text-sm">Diese Bedingungen können jederzeit geändert werden. Bedeutende Änderungen werden 30 Tage im Voraus angekündigt.</p>
+      ),
+    },
+    {
+      title: "13. Geltendes Recht",
+      icon: Scale,
+      content: (
+        <p className="text-sm">Diese Bedingungen unterliegen <strong>deutschem Recht</strong>. Gerichtsstand ist Deutschland.</p>
+      ),
+    },
+    {
+      title: "14. Kontakt",
+      icon: Mail,
+      content: (
+        <div className="space-y-2 text-sm">
+          <p>E-Mail: <a href="mailto:legal@oppro-network.de" className="text-primary hover:underline font-bold">legal@oppro-network.de</a></p>
+          <p className="text-[10px] text-muted-foreground/60 uppercase tracking-widest mt-4">Letzte Aktualisierung: Januar 2026</p>
+        </div>
+      ),
+    },
+  ];
+
   return (
-    <div 
-      className="min-h-screen bg-background flex flex-col"
-    >
+    <div className="min-h-screen bg-background flex flex-col font-sans">
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24">
-        <div className="max-w-3xl mx-auto">
-          {/* Zurück Button mit dezentem Hover */}
-          <div 
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-          >
-            <Link 
-              to="/" 
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium"
+        <div className="max-w-4xl mx-auto">
+          {/* Back Button */}
+          <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }}>
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-black uppercase tracking-widest"
             >
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              Zurück zur Startseite
+              Zurück zur Zentrale
             </Link>
-          </div>
+          </motion.div>
 
           <header className="mb-16">
-            <div className="flex items-center gap-5 mb-6">
-              <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
-                <Shield className="w-6 h-6 text-primary" />
+            <div className="flex items-center gap-6 mb-8">
+              <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20 shadow-xl shadow-primary/10">
+                <FileText className="w-8 h-8 text-primary" />
               </div>
               <div>
-                <h1 className="text-4xl font-black tracking-tight text-foreground uppercase">
-                  Nutzungs<span className="text-primary">bedingungen</span>
+                <h1 className="text-5xl md:text-7xl font-black tracking-tighter text-foreground uppercase italic leading-none mb-2">
+                  Nutzer<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">regeln</span>
                 </h1>
-                <div className="flex gap-3 mt-1 opacity-40">
-                  <span className="text-[10px] font-mono uppercase tracking-widest">Global v2.0.0</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">•</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">GPL-3.0</span>
+                <div className="flex gap-4 opacity-40">
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Version 2.0.0</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">•</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">GPL-3.0</span>
                 </div>
               </div>
             </div>
@@ -228,50 +181,57 @@ export const Nutzungsbedingungen = memo(function Nutzungsbedingungen() {
 
           <div className="grid gap-6">
             {legalSections.map((section, index) => (
-              <motion.div 
+              <motion.div
                 key={index}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                transition={{ delay: index * 0.05 }}
-                className="glass rounded-2xl p-8 border border-white/5 hover:border-primary/10 transition-colors"
+                transition={{ delay: index * 0.04, duration: 0.35 }}
+                className="group glass rounded-[2.5rem] p-8 md:p-10 border border-white/5 hover:border-primary/20 transition-all duration-500 hover:bg-card/90"
               >
-                <h2 className="text-lg font-bold mb-4 flex items-center gap-3">
-                  <span className="text-primary/30 font-mono text-sm">0{index + 1}</span>
-                  {section.title}
-                </h2>
-                <p className="text-muted-foreground leading-relaxed text-sm md:text-base">
+                <div className="flex items-center gap-4 mb-8">
+                  <div className="w-12 h-12 rounded-2xl bg-primary/5 flex items-center justify-center border border-primary/10 group-hover:scale-110 transition-transform">
+                    {section.icon && <section.icon className="w-6 h-6 text-primary" />}
+                    {!section.icon && <span className="text-primary font-black font-mono text-xl italic">0{index + 1}</span>}
+                  </div>
+                  <h2 className="text-2xl font-black tracking-tight text-white group-hover:text-primary transition-colors uppercase italic">
+                    {section.title}
+                  </h2>
+                </div>
+                <div className="text-muted-foreground leading-relaxed">
                   {section.content}
-                </p>
+                </div>
               </motion.div>
             ))}
 
-            {/* Kontakt Bereich - dezent gehalten */}
-            <motion.div 
-              initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1 }}
-              className="mt-12 p-8 rounded-3xl border border-white/5 bg-white/[0.02] flex flex-col md:flex-row items-center justify-between gap-6"
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.35 }}
+              className="mt-12 p-10 glass-strong rounded-[2.5rem] border border-primary/20 bg-primary/[0.02] flex flex-col md:flex-row items-center justify-between gap-8"
             >
-              <div className="text-center md:text-left">
-                <h3 className="font-bold">Noch Fragen?</h3>
-                <p className="text-sm text-muted-foreground">Kontaktiere das Development-Team.</p>
+              <div className="text-center md:text-left space-y-2">
+                <h3 className="font-black text-3xl text-white tracking-tighter uppercase italic">Noch Fragen?</h3>
+                <p className="text-muted-foreground font-medium text-sm">
+                  Bei Unklarheiten kontaktiere bitte unser Support-Team oder das Development.
+                </p>
               </div>
               <div className="flex gap-4">
-                <a 
-                  href="mailto:development@oppro-network.de" 
-                  className="p-3 rounded-xl glass border border-white/10 hover:text-primary transition-colors"
-                  title="E-Mail Support"
+                <a
+                  href="mailto:support@oppro-network.de"
+                  className="p-5 rounded-2xl glass-strong border border-white/10 hover:text-primary transition-all hover:scale-110"
+                  title="E-Mail Kontakt"
                 >
-                  <Mail className="w-5 h-5" />
+                  <Mail className="w-6 h-6" />
                 </a>
-                <a 
-                  href="https://github.com/ManagerX-Development/ManagerX" 
-                  target="_blank" 
+                <a
+                  href="https://github.com/ManagerX-Development"
+                  target="_blank"
                   rel="noopener noreferrer"
-                  className="p-3 rounded-xl glass border border-white/10 hover:text-primary transition-colors"
-                  title="GitHub Repository"
+                  className="p-5 rounded-2xl glass-strong border border-white/10 hover:text-primary transition-all hover:scale-110"
+                  title="Source Code"
                 >
-                  <Github className="w-5 h-5" />
+                  <Github className="w-6 h-6" />
                 </a>
               </div>
             </motion.div>
diff --git a/src/web/pages/PluginsPage.tsx b/src/web/pages/PluginsPage.tsx
index d17a0e7..5127d28 100644
--- a/src/web/pages/PluginsPage.tsx
+++ b/src/web/pages/PluginsPage.tsx
@@ -1,133 +1,185 @@
 import { memo } from "react";
 import { Link } from "react-router-dom";
-import { 
-  ArrowLeft, Puzzle, Gamepad2, Globe, ShieldCheck, 
-  Users, Zap, Settings2, Code2, Layers, Mail, Github 
+import {
+  ArrowLeft, Puzzle, Gamepad2, Globe, ShieldCheck,
+  Users, Zap, Settings2, Code2, Layers, Mail, Github
 } from "lucide-react";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { motion } from "framer-motion";
+
 const corePlugins = [
   {
     title: "AI Entertainment",
     features: ["4-Gewinnt (VS KI)", "TicTacToe (VS KI)"],
     description: "Intelligente Minispiele direkt im Discord-Chat durch moderne KI-Integration.",
     icon: Gamepad2,
+    gradient: "from-primary to-accent",
   },
   {
     title: "Global Network",
     features: ["Globalchat", "Server-übergreifend"],
     description: "Verbinde deine Community mit dem gesamten ManagerX-Netzwerk weltweit.",
     icon: Globe,
+    gradient: "from-accent to-primary",
   },
   {
     title: "Security Core",
     features: ["Antispam", "Moderation", "Warn-System", "Notes"],
     description: "Vollständiger Schutz und Verwaltung für dein Team mit intelligenten Filtern.",
     icon: ShieldCheck,
+    gradient: "from-primary via-accent to-primary",
   },
   {
     title: "Social & Engagement",
     features: ["Levelsystem", "Welcome-Engine", "TempVC"],
     description: "Steigere die Aktivität durch Belohnungen und vollautomatische Sprachkanäle.",
     icon: Users,
+    gradient: "from-accent to-primary",
   },
   {
     title: "Automation",
     features: ["Autodelete", "Autorole", "Loggingsystem"],
     description: "Halte deinen Server sauber und organisiert – alles vollautomatisch im Hintergrund.",
     icon: Zap,
+    gradient: "from-primary to-accent",
   },
   {
     title: "System Control",
     features: ["Settings", "Stats"],
     description: "Behalte den vollen Überblick mit detaillierten Analysen und einfacher Konfiguration.",
     icon: Settings2,
+    gradient: "from-accent via-primary to-accent",
   }
 ];
 
 export const PluginsPage = memo(function PluginsPage() {
   return (
-    <div 
-      className="min-h-screen bg-background flex flex-col"
-    >
+    <div className="min-h-screen bg-background flex flex-col">
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24">
         <div className="max-w-5xl mx-auto">
-          
-          {/* Zurück Button */}
-          <div 
+
+          {/* Back Button */}
+          <motion.div
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
           >
-            <Link 
-              to="/" 
-              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium"
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-all mb-12 group text-sm font-black uppercase tracking-widest"
             >
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
-              Zurück zur Startseite
+              Zurück zur Zentrale
             </Link>
-          </div>
+          </motion.div>
 
-          {/* Header Bereich */}
+          {/* Header */}
           <header className="mb-16">
-            <div className="flex items-center gap-5 mb-6">
-              <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
-                <Puzzle className="w-6 h-6 text-primary" />
-              </div>
+            <div className="flex items-center gap-6 mb-8">
+              <motion.div
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ delay: 0.1, type: "spring", stiffness: 200 }}
+                className="relative w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20 shadow-xl shadow-primary/10"
+              >
+                <Puzzle className="w-8 h-8 text-primary" />
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl animate-pulse" />
+              </motion.div>
               <div>
-                <h1 className="text-4xl font-black tracking-tight text-foreground uppercase">
-                  Built-in <span className="text-primary">Modules</span>
-                </h1>
-                <div className="flex gap-3 mt-1 opacity-40">
-                  <span className="text-[10px] font-mono uppercase tracking-widest">Version 2.4.0</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">•</span>
-                  <span className="text-[10px] font-mono uppercase tracking-widest">Native Core</span>
-                </div>
+                <motion.h1
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                  className="text-5xl md:text-7xl font-black tracking-tighter text-foreground uppercase italic leading-none mb-2"
+                >
+                  Built-in <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-primary animate-gradient">Modules</span>
+                </motion.h1>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 0.4 }}
+                  transition={{ delay: 0.3 }}
+                  className="flex gap-4"
+                >
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Version 2.4.0</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">•</span>
+                  <span className="text-[10px] font-black uppercase tracking-[0.3em]">Native Core</span>
+                </motion.div>
               </div>
             </div>
-            <p className="text-muted-foreground max-w-2xl leading-relaxed">
+            <motion.p
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="text-muted-foreground max-w-2xl leading-relaxed text-lg"
+            >
               ManagerX ist modular aufgebaut. Die folgenden Kern-Module sind bereits vorinstalliert und können über das Dashboard konfiguriert werden.
-            </p>
+            </motion.p>
           </header>
 
           {/* Core Plugins Grid */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-24">
             {corePlugins.map((plugin, index) => (
-              <motion.div 
+              <motion.div
                 key={index}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                transition={{ delay: index * 0.05 }}
-                className="glass rounded-2xl p-8 border border-white/5 hover:border-primary/10 transition-colors flex flex-col"
+                transition={{ delay: index * 0.05, duration: 0.35 }}
+                whileHover={{ y: -8, scale: 1.02 }}
+                className="group relative glass rounded-[2rem] p-8 border border-white/5 hover:border-primary/20 transition-all duration-500 flex flex-col overflow-hidden"
               >
-                <div className="flex items-start justify-between mb-6">
-                  <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-primary">
-                    <plugin.icon className="w-5 h-5" />
-                  </div>
-                  <span className="text-[10px] font-mono text-primary/40 uppercase tracking-tighter">Module 0{index + 1}</span>
+                {/* Gradient Border Effect on Hover */}
+                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                  <div className={`absolute inset-0 bg-gradient-to-r ${plugin.gradient} opacity-10 blur-xl`} />
                 </div>
-                
-                <h2 className="text-lg font-bold mb-3 text-white">{plugin.title}</h2>
-                <p className="text-sm text-muted-foreground leading-relaxed mb-6">
-                  {plugin.description}
-                </p>
 
-                <div className="flex flex-wrap gap-2 mt-auto">
-                  {plugin.features.map(f => (
-                    <span key={f} className="text-[9px] font-mono bg-white/5 border border-white/10 text-white/50 px-2 py-1 rounded lowercase">
-                      #{f.replace(/\s+/g, '_')}
+                <div className="relative z-10">
+                  <div className="flex items-start justify-between mb-6">
+                    <motion.div
+                      whileHover={{ rotate: 12, scale: 1.1 }}
+                      transition={{ type: "spring", stiffness: 400 }}
+                      className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${plugin.gradient} flex items-center justify-center text-white shadow-lg group-hover:shadow-primary/50 transition-shadow`}
+                    >
+                      <plugin.icon className="w-6 h-6" />
+                      <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl" />
+                    </motion.div>
+                    <span className="text-[10px] font-mono text-primary/40 uppercase tracking-tighter group-hover:text-primary transition-colors">
+                      Module 0{index + 1}
                     </span>
-                  ))}
+                  </div>
+
+                  <h2 className="text-2xl font-black mb-3 text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-primary group-hover:to-accent transition-all duration-300 uppercase italic tracking-tight">
+                    {plugin.title}
+                  </h2>
+                  <p className="text-sm text-muted-foreground leading-relaxed mb-6">
+                    {plugin.description}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2 mt-auto">
+                    {plugin.features.map(f => (
+                      <span
+                        key={f}
+                        className="text-[9px] font-mono bg-white/5 border border-white/10 text-white/50 px-2 py-1 rounded lowercase group-hover:border-primary/30 group-hover:bg-primary/5 transition-all"
+                      >
+                        #{f.replace(/\s+/g, '_')}
+                      </span>
+                    ))}
+                  </div>
                 </div>
               </motion.div>
             ))}
           </div>
 
-          {/* External Section - Dezent wie Kontaktbereich */}
-          <div className="pt-12 border-t border-white/5">
+          {/* External Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="pt-12 border-t border-white/5"
+          >
             <div className="flex items-center gap-3 mb-8">
               <Layers className="w-5 h-5 text-primary/50" />
               <h2 className="text-xl font-bold uppercase tracking-tight">External Marketplace</h2>
@@ -135,40 +187,63 @@ export const PluginsPage = memo(function PluginsPage() {
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="p-8 rounded-3xl border border-dashed border-white/10 bg-white/[0.01] flex flex-col gap-4">
+              <motion.div
+                whileHover={{ scale: 1.02, y: -4 }}
+                className="p-8 rounded-3xl border border-dashed border-white/10 bg-white/[0.01] flex flex-col gap-4 hover:border-primary/20 transition-all"
+              >
                 <Code2 className="w-6 h-6 text-muted-foreground" />
                 <h3 className="font-bold">Developer SDK</h3>
                 <p className="text-sm text-muted-foreground leading-relaxed">
                   Erstelle eigene Python-Module und integriere sie nahtlos in das ManagerX Ökosystem.
                 </p>
-              </div>
-              <div className="p-8 rounded-3xl border border-dashed border-white/10 bg-white/[0.01] flex flex-col gap-4">
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.02, y: -4 }}
+                className="p-8 rounded-3xl border border-dashed border-white/10 bg-white/[0.01] flex flex-col gap-4 hover:border-primary/20 transition-all"
+              >
                 <Github className="w-6 h-6 text-muted-foreground" />
                 <h3 className="font-bold">Community Library</h3>
                 <p className="text-sm text-muted-foreground leading-relaxed">
                   Teile deine Plugins mit der Community oder entdecke Module von anderen Entwicklern.
                 </p>
-              </div>
+              </motion.div>
             </div>
-          </div>
+          </motion.div>
 
-          {/* Kontakt / Support Footer wie in Legal-Seiten */}
-          <motion.div 
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            className="mt-24 p-8 rounded-3xl border border-white/5 bg-white/[0.02] flex flex-col md:flex-row items-center justify-between gap-6"
+          {/* Contact Footer */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            className="mt-24 p-10 glass-strong rounded-[2.5rem] border border-primary/20 bg-primary/[0.02] flex flex-col md:flex-row items-center justify-between gap-8"
           >
-            <div className="text-center md:text-left">
-              <h3 className="font-bold text-white">Modul-Wunsch?</h3>
-              <p className="text-sm text-muted-foreground">Kontaktiere uns für individuelle Funktions-Ideen.</p>
+            <div className="text-center md:text-left space-y-2">
+              <h3 className="font-black text-3xl text-white tracking-tighter uppercase italic">Modul-Wunsch?</h3>
+              <p className="text-sm text-muted-foreground font-medium">
+                Kontaktiere uns für individuelle Funktions-Ideen.
+              </p>
             </div>
             <div className="flex gap-4">
-              <a href="mailto:development@oppro-network.de" className="p-3 rounded-xl glass border border-white/10 hover:text-primary transition-colors" title="Email">
-                <Mail className="w-5 h-5" />
-              </a>
-              <a href="https://github.com/ManagerX-Development/ManagerX" className="p-3 rounded-xl glass border border-white/10 hover:text-primary transition-colors" title="GitHub">
-                <Github className="w-5 h-5" />
-              </a>
+              <motion.a
+                whileHover={{ scale: 1.1, rotate: 5 }}
+                whileTap={{ scale: 0.95 }}
+                href="mailto:development@oppro-network.de"
+                className="p-5 rounded-2xl glass-strong border border-white/10 hover:text-primary hover:border-primary/30 transition-all"
+                title="Email"
+              >
+                <Mail className="w-6 h-6" />
+              </motion.a>
+              <motion.a
+                whileHover={{ scale: 1.1, rotate: -5 }}
+                whileTap={{ scale: 0.95 }}
+                href="https://github.com/ManagerX-Development/ManagerX"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-5 rounded-2xl glass-strong border border-white/10 hover:text-primary hover:border-primary/30 transition-all"
+                title="GitHub"
+              >
+                <Github className="w-6 h-6" />
+              </motion.a>
             </div>
           </motion.div>
 
diff --git a/src/web/pages/Status.tsx b/src/web/pages/Status.tsx
index 9787ab6..8a4f704 100644
--- a/src/web/pages/Status.tsx
+++ b/src/web/pages/Status.tsx
@@ -1,16 +1,16 @@
 import { memo, useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { 
-  ArrowLeft, Activity, Globe, Cpu, Layers, 
-  CheckCircle2, XCircle, Mail, Github 
+import {
+  ArrowLeft, Activity, Globe, Cpu, Layers,
+  CheckCircle2, XCircle, Mail, Github
 } from "lucide-react";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { motion } from "framer-motion";
 const Status = memo(function Status() {
   // State für die Live-Daten vom Bot
-  const [data, setData] = useState({ 
-    status: "loading", 
+  const [data, setData] = useState({
+    status: "loading",
     latency: "--",
     uptime: "--",
     guilds: 0,
@@ -26,7 +26,7 @@ const Status = memo(function Status() {
         // Abfrage an die neue FastAPI-Route für echte Bot-Daten
         const response = await fetch("http://localhost:8040/api/v1/managerx/stats");
         if (!response.ok) throw new Error("Offline");
-        
+
         const result = await response.json();
         setData({
           status: result.status || "online",
@@ -76,20 +76,20 @@ const Status = memo(function Status() {
   ];
 
   return (
-    <div 
+    <div
       className="min-h-screen bg-background flex flex-col"
     >
       <Navbar />
-      
+
       <main className="flex-grow container relative z-10 px-4 pt-32 pb-24 text-white">
         <div className="max-w-4xl mx-auto">
-          
-          <div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }}>
-            <Link to="/" className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors mb-12 group text-sm font-medium">
+
+          <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.4 }}>
+            <Link to="/" className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-all mb-12 group text-sm font-black uppercase tracking-widest">
               <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
               Zurück zur Zentrale
             </Link>
-          </div>
+          </motion.div>
 
           <header className="mb-16 text-center md:text-left">
             <div className="flex flex-col md:flex-row items-center gap-5 mb-6">
@@ -127,7 +127,7 @@ const Status = memo(function Status() {
 
           <div className="grid gap-4 mb-16">
             {systems.map((system, index) => (
-              <motion.div 
+              <motion.div
                 key={index}
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -158,11 +158,11 @@ const Status = memo(function Status() {
                       {system.isParent && data.status === "online" ? `${data.latency}` : system.latency}
                     </p>
                   </div>
-                  
+
                   <div className={cn(
                     "px-4 py-2 rounded-xl border flex items-center gap-2 min-w-[110px] justify-center",
-                    system.status === "online" 
-                      ? "bg-green-500/10 border-green-500/20 text-green-500" 
+                    system.status === "online"
+                      ? "bg-green-500/10 border-green-500/20 text-green-500"
                       : "bg-red-500/10 border-red-500/20 text-red-500"
                   )}>
                     {system.status === "online" ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}