Update dependencies and fix styling issues

src/routes/index.tsx

@@ -4,11 +4,17 @@ import { useDarkMode } from "~hooks/useDarkmode"
 import { SidepanelSettings } from "./sidepanel-settings"
 import { OptionIndex } from "./option-index"
 
-export const OptionRouting = () => (
-  <Routes>
-    <Route path="/" element={<OptionIndex />} />
-  </Routes>
-)
+export const OptionRouting = () => {
+  const { mode } = useDarkMode()
+
+  return (
+    <div className={mode === "dark" ? "dark" : "light"}>
+      <Routes>
+        <Route path="/" element={<OptionIndex />} />
+      </Routes>
+    </div>
+  )
+}
 
 export const SidepanelRouting = () => {
   const { mode } = useDarkMode()

src/routes/option-index.tsx

@@ -1,10 +1,12 @@
+import OptionLayout from "~components/Option/Layout"
+import { Playground } from "~components/Option/Playground/Playground"
 import { SettingsBody } from "~components/Sidepanel/Settings/body"
 import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
 
 export const OptionIndex = () => {
   return (
-    <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
-      hey
-    </div>
+    <OptionLayout>
+      <Playground />
+    </OptionLayout>
   )
 }