diff --git a/bun.lockb b/bun.lockb
index 31589bd..1a4f10d 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index db142b9..3c78c04 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@builder.io/react-hydration-overlay": "0.0.8",
     "@dotenvx/dotenvx": "1.5.0",
     "@lukemorales/query-key-factory": "1.3.4",
+    "@react-dev-inspector/vite-plugin": "^2.0.1",
     "@sentry/browser": "8.17.0",
     "@stripe/stripe-js": "4.1.0",
     "@tanstack/query-persist-client-core": "5.51.1",
@@ -30,6 +31,7 @@
     "@tanstack/react-table": "8.19.2",
     "@techmely/cache": "1.0.10",
     "@techmely/domain-driven": "1.1.4",
+    "@techmely/head": "0.1.1",
     "@techmely/hono": "1.1.0",
     "@techmely/logger": "1.1.3",
     "@techmely/metrics": "1.0.10",
@@ -43,6 +45,7 @@
     "@upstash/ratelimit": "1.2.1",
     "@upstash/redis": "1.32.0",
     "@wasmer/sdk": "0.6.0",
+    "beanheads": "0.3.3",
     "bentocache": "1.0.0-beta.9",
     "blurhash": "2.0.5",
     "canvas-confetti": "1.9.3",
@@ -116,6 +119,7 @@
     "npm-check-updates": "16.14.20",
     "npm-run-all2": "6.2.2",
     "postcss": "8.4.39",
+    "react-dev-inspector": "^2.0.1",
     "reassure": "1.0.0",
     "scss": "0.2.4",
     "speedscope": "1.20.0",
diff --git a/pages/AppWrapper.tsx b/pages/AppWrapper.tsx
index 2d13fc0..5bd1857 100644
--- a/pages/AppWrapper.tsx
+++ b/pages/AppWrapper.tsx
@@ -1,15 +1,18 @@
 import type { FC, PropsWithChildren } from "react";
-import type { PageContext } from "vike/types";
 import { handleAnalytics } from "#root/shared/libs/analytics/vercel/vercel.utils";
+import { Inspector } from "react-dev-inspector";
 
 import "#root/assets/styles/nprogress.css";
 
-type Props = {};
-
-const AppWrapper: FC<PropsWithChildren<Props>> = ({ children }) => {
+const AppWrapper: FC<PropsWithChildren> = ({ children }) => {
   if (!import.meta.env.SSR) {
   }
-  return <>{children}</>;
+  return (
+    <>
+      <Inspector />
+      {children}
+    </>
+  );
 };
 
 function initActions() {
diff --git a/pages/index/components/HomeHero.tsx b/pages/index/components/HomeHero.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/pages/index/helpers/scripts.ts b/pages/index/helpers/scripts.ts
new file mode 100644
index 0000000..37d0209
--- /dev/null
+++ b/pages/index/helpers/scripts.ts
@@ -0,0 +1,8 @@
+import type { Head } from "@techmely/head";
+
+export const scriptHandlerSwitchTheme: Head = {
+  script: {
+    id: "handler-light-mode",
+    innerHtml: `(()=>{function e(e){window.__theme=e,"dark"===e?document.documentElement.classList.add("dark"):"light"===e&&document.documentElement.classList.remove("dark")}let t;try{t=localStorage.getItem("theme")}catch(a){}window.__setPreferredTheme=a=>{t=a,e(a);try{localStorage.setItem("theme",a)}catch(r){}};let r=t,c=window.matchMedia("(prefers-color-scheme: dark)");r||(r=c.matches?"dark":"light"),e(r),c.addEventListener("change",a=>{t||e(a.matches?"dark":"light")})})()`,
+  },
+};
diff --git a/vite.config.ts b/vite.config.ts
index d750559..53957e6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,7 @@ import Vike from "vike/plugin";
 import { defineConfig } from "vite";
 import ViteCompress from "vite-plugin-compression2";
 import viteAutoImport from "./shared/libs/vite-auto-import";
+import { inspectorServer as ViteInspectorServer } from "@react-dev-inspector/vite-plugin";
 
 const isProd = process.env.NODE_ENV === "production";
 
@@ -48,6 +49,7 @@ export default defineConfig({
       }),
     ViteReact(),
     ViteTelefunc(),
+    ViteInspectorServer(),
   ].filter(Boolean),
   resolve: {
     alias: {