diff --git a/src/layouts/example.astro b/src/layouts/example.astro
index e67d03c..c995838 100644
--- a/src/layouts/example.astro
+++ b/src/layouts/example.astro
@@ -16,26 +16,6 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
 
-
-    <!-- Theme manager -->
-    <script is:inline>
-      // ☝️ This script prevent the FART effect.
-      if (localStorage.getItem("theme") === null) {
-        document.documentElement.setAttribute("data-theme", "light");
-      } else
-        document.documentElement.setAttribute(
-          "data-theme",
-          localStorage.getItem("theme")
-        );
-      // "theme" LocalStorage value is set by the package to remember user preference.
-      // The value is checked and applyed before rendering anything.
-    </script>
-    <script>
-      import { themeChange } from 'theme-change';
-      themeChange();
-      // 👆 you could import the CDN directly instead of these two lines
-    </script>
-
   </head>
 
   <body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6de4642..ebba4d8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,6 +17,25 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
     <meta charset="utf-8" />
     <title>FOSC</title>
     <meta name="generator" content={Astro.generator} />
+
+    <!-- Theme manager -->
+    <script is:inline>
+      // ☝️ This script prevent the FART effect.
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      // "theme" LocalStorage value is set by the package to remember user preference.
+      // The value is checked and applyed before rendering anything.
+    </script>
+    <script>
+      import { themeChange } from 'theme-change';
+      themeChange();
+      // 👆 you could import the CDN directly instead of these two lines
+    </script>
   </head>
 
   <body class="bg-fixed bg-cover bg-center bg-repeat-y">
@@ -35,6 +54,14 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
           <HackerText text="FOSC"></HackerText>
         </div>
 
+        <div class="container mx-auto flex justify-center items-center">
+          <button class="btn" data-set-theme="" data-act-class="ACTIVECLASS">none</button>
+          <button class="btn" data-set-theme="light" data-act-class="ACTIVECLASS">light</button>
+          <button class="btn" data-set-theme="dark" data-act-class="ACTIVECLASS">dark</button>
+          <button class="btn" data-set-theme="cyberpunk" data-act-class="ACTIVECLASS">cyber</button>
+
+        </div>
+
       </div>
     </div>
   </body>
