diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..48194f00
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_SOLID_DEVTOOLS=true
diff --git a/bun.lockb b/bun.lockb
index d828b0ba..b1b27fe5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 5a19a2ff..e3e919e8 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import { resolve } from "path";
 import lucidePreprocess from "vite-plugin-lucide-preprocess";
 import solid from "vite-plugin-solid";
+import devtools from "solid-devtools/vite";
 
 export default defineConfig({
   main: {
@@ -16,6 +17,17 @@ export default defineConfig({
         "@renderer": resolve("src/renderer/src"),
       },
     },
-    plugins: [lucidePreprocess(), solid()],
+    plugins: [
+      lucidePreprocess(),
+      devtools({
+        autoname: true,
+        locator: {
+          targetIDE: "vscode", // can also be "webstorm"
+          componentLocation: true,
+          jsxLocation: true,
+        },
+      }),
+      solid(),
+    ],
   },
 });
diff --git a/package.json b/package.json
index d67a863e..26b689a2 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,8 @@
     "@electron/notarize": "^2.5.0",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
+    "@solid-devtools/logger": "^0.8.4",
+    "@solid-devtools/overlay": "^0.30.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/eslint__eslintrc": "^2.1.2",
     "@types/eslint__js": "^8.42.3",
@@ -65,6 +67,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-packagejson": "^2.5.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "solid-devtools": "^0.30.1",
     "solid-js": "^1.7.6",
     "tailwindcss": "^3.4.13",
     "typescript": "~5.6.3",
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 92d817ef..3ef42d79 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -2,5 +2,10 @@ import App from "./App";
 import "@renderer/css/global.css";
 import "@renderer/css/theme.css";
 import { render } from "solid-js/web";
+import { attachDevtoolsOverlay } from "@solid-devtools/overlay";
+
+if (import.meta.env.VITE_SOLID_DEVTOOLS !== "false") {
+  attachDevtoolsOverlay();
+}
 
 render(() => <App />, document.getElementById("root") as HTMLElement);
diff --git a/tsconfig.web.json b/tsconfig.web.json
index 7d35c740..ea94b35c 100644
--- a/tsconfig.web.json
+++ b/tsconfig.web.json
@@ -8,6 +8,7 @@
   ],
   "compilerOptions": {
     "noImplicitAny": true,
+    "sourceMap": true,
     "composite": true,
     "jsxImportSource": "solid-js",
     "baseUrl": ".",