diff --git a/docs/pages/playground.html b/docs/pages/playground.html
index 1b8927a9..ca9c7338 100644
--- a/docs/pages/playground.html
+++ b/docs/pages/playground.html
@@ -4,59 +4,9 @@ title: Interactive Playground
 description: Try PHPFlasher notifications live in your browser. Experiment with different types, themes, positions, and options - no installation required.
 ---
 
-<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
-    <!-- Hero Section -->
-    <section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 rounded-3xl mb-12 shadow-2xl">
-        <!-- Animated background elements -->
-        <div class="absolute inset-0 overflow-hidden">
-            <div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
-            <div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-400/20 rounded-full blur-3xl translate-x-1/3 translate-y-1/3"></div>
-            <div class="absolute top-1/2 left-1/2 w-64 h-64 bg-indigo-400/10 rounded-full blur-2xl -translate-x-1/2 -translate-y-1/2 animate-pulse"></div>
-
-            <!-- Floating notification icons -->
-            <div class="absolute top-[20%] left-[10%] opacity-20 animate-bounce" style="animation-delay: 0s; animation-duration: 3s;">
-                <i class="fas fa-check-circle text-4xl text-white"></i>
-            </div>
-            <div class="absolute top-[30%] right-[15%] opacity-20 animate-bounce" style="animation-delay: 0.5s; animation-duration: 2.5s;">
-                <i class="fas fa-bell text-3xl text-white"></i>
-            </div>
-            <div class="absolute bottom-[25%] left-[20%] opacity-20 animate-bounce" style="animation-delay: 1s; animation-duration: 3.5s;">
-                <i class="fas fa-info-circle text-3xl text-white"></i>
-            </div>
-            <div class="absolute bottom-[30%] right-[10%] opacity-20 animate-bounce" style="animation-delay: 1.5s; animation-duration: 2.8s;">
-                <i class="fas fa-exclamation-triangle text-3xl text-white"></i>
-            </div>
-        </div>
-
-        <div class="relative z-10 px-8 py-16 text-center">
-            <div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-white/90 text-sm font-medium mb-6">
-                <i class="fas fa-flask mr-2"></i>
-                Interactive Playground
-            </div>
-
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
-                Try PHPFlasher <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-orange-300">Live</span>
-            </h1>
-
-            <p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-8 leading-relaxed">
-                Experiment with notifications in real-time. Choose types, themes, positions, and see the generated code instantly.
-            </p>
-
-            <div class="flex flex-wrap justify-center gap-4">
-                <a href="#studio" class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5">
-                    <i class="fas fa-play mr-2"></i>
-                    Start Experimenting
-                </a>
-                <a href="/themes/" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-xl border border-white/30 hover:bg-white/20 transition-all duration-300">
-                    <i class="fas fa-palette mr-2"></i>
-                    Browse Themes
-                </a>
-            </div>
-        </div>
-    </section>
-
+<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
     <!-- Quick Stats -->
-    <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+    <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
             <div class="text-3xl font-bold text-indigo-600 mb-1">4</div>
             <div class="text-slate-600 text-sm">Notification Types</div>
diff --git a/docs/pages/themes/index.html b/docs/pages/themes/index.html
index f01981de..c89972e9 100644
--- a/docs/pages/themes/index.html
+++ b/docs/pages/themes/index.html
@@ -4,47 +4,9 @@ title: Theme Gallery
 description: Explore 26 beautiful notification themes for PHPFlasher. From minimal to material design, iOS to Slack-style - find the perfect look for your application.
 ---
 
-<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
-    <!-- Hero Section -->
-    <section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 rounded-3xl mb-12 shadow-2xl">
-        <!-- Animated background -->
-        <div class="absolute inset-0 overflow-hidden">
-            <div class="absolute top-0 left-1/4 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl"></div>
-            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>
-
-            <!-- Grid pattern -->
-            <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.4&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
-        </div>
-
-        <div class="relative z-10 px-8 py-16 text-center">
-            <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white/90 text-sm font-medium mb-6">
-                <i class="fas fa-palette mr-2"></i>
-                26 Beautiful Themes
-            </div>
-
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
-                Theme <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300">Gallery</span>
-            </h1>
-
-            <p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-8 leading-relaxed">
-                Choose from professionally designed themes. From minimalist to brand-inspired styles - find the perfect look for your application.
-            </p>
-
-            <div class="flex flex-wrap justify-center gap-4">
-                <a href="#themes" class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5">
-                    <i class="fas fa-th-large mr-2"></i>
-                    Browse Themes
-                </a>
-                <a href="/playground/" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-xl border border-white/30 hover:bg-white/20 transition-all duration-300">
-                    <i class="fas fa-flask mr-2"></i>
-                    Try in Playground
-                </a>
-            </div>
-        </div>
-    </section>
-
+<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
     <!-- Theme Categories -->
-    <section id="themes" class="scroll-mt-8">
+    <section id="themes">
         <!-- Brand-Inspired Themes -->
         <div class="mb-12">
             <div class="flex items-center mb-6">