diff --git a/docs/pages/themes/index.html b/docs/pages/themes/index.html
index c89972e9..dcf1385e 100644
--- a/docs/pages/themes/index.html
+++ b/docs/pages/themes/index.html
@@ -5,6 +5,34 @@ description: Explore 26 beautiful notification themes for PHPFlasher. From minim
 ---
 
 <div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
+    <!-- Try All Themes Section -->
+    <section class="bg-white rounded-2xl border border-slate-200 p-8 mb-8">
+        <div class="text-center mb-6">
+            <h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
+            <p class="text-slate-600">Click any button to see the theme in action</p>
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
+            <button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
+            <button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
+            <button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
+            <button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
+            <button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
+            <button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
+            <button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
+            <button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
+            <button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
+            <button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
+            <button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
+            <button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
+            <button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
+            <button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
+            <button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
+            <button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
+            <button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
+        </div>
+    </section>
+
     <!-- Theme Categories -->
     <section id="themes">
         <!-- Brand-Inspired Themes -->
@@ -292,34 +320,6 @@ description: Explore 26 beautiful notification themes for PHPFlasher. From minim
         </div>
     </section>
 
-    <!-- Try All Themes Section -->
-    <section class="bg-white rounded-2xl border border-slate-200 p-8 mb-12">
-        <div class="text-center mb-8">
-            <h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
-            <p class="text-slate-600">Click any button to see the theme in action</p>
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
-            <button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
-            <button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
-            <button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
-            <button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
-            <button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
-            <button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
-            <button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
-            <button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
-            <button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
-            <button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
-            <button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
-            <button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
-            <button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
-            <button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
-            <button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
-            <button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
-            <button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
-        </div>
-    </section>
-
     <!-- Usage Section -->
     <section class="bg-slate-50 rounded-2xl p-8 mb-12">
         <div class="max-w-3xl mx-auto">