diff --git a/client-src/views/draw/components/colors/colors.module.css b/client-src/views/draw/components/colors/colors.module.css
index 4e5cd5c..1679d32 100644
--- a/client-src/views/draw/components/colors/colors.module.css
+++ b/client-src/views/draw/components/colors/colors.module.css
@@ -9,6 +9,7 @@
   flex-grow: 2;
   border: none;
   height: 24px;
+  min-width: 40px;
   width: 100%;
   padding: none;
 }
diff --git a/client-src/views/draw/components/controls/controls.module.css b/client-src/views/draw/components/controls/controls.module.css
index f185b09..09c7486 100644
--- a/client-src/views/draw/components/controls/controls.module.css
+++ b/client-src/views/draw/components/controls/controls.module.css
@@ -1,22 +1,3 @@
-.container {
-  position: fixed;
-  width: min(100%, 320px);
-  top: 48px;
-  left: 0px;
-  padding: 12px;
-  background-color: rgba(255, 255, 255, 0.95);
-  border-bottom-right-radius: 16px;
-  box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.16),
-    0px 0px 36px 0px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-  transform: translate(-100%, 0px);
-}
-
-.open {
-  transform: translate(0%, 0px);
-  transition: transform 0.2s;
-}
-
 .inputs {
   display: grid;
   grid-template-columns: 96px 1fr auto;
diff --git a/client-src/views/draw/components/controls/controls.tsx b/client-src/views/draw/components/controls/controls.tsx
index 025ab95..d9a4553 100644
--- a/client-src/views/draw/components/controls/controls.tsx
+++ b/client-src/views/draw/components/controls/controls.tsx
@@ -9,12 +9,10 @@ import { useControls, COLORS } from "./use-controls";
 
 export function Controls() {
   const {
-    isPanelOpen,
     handleSizeChangeStart,
     handleSizeChange,
     handleStrokeWidthChangeStart,
     handleStrokeWidthChange,
-    handleIsFilledChange,
     handleStyleChangeComplete,
     handleStrokeColorChange,
     handleFillColorChange,
@@ -23,7 +21,7 @@ export function Controls() {
 
   return (
     <div
-      className={[styles.container, isPanelOpen ? styles.open : ""].join(" ")}
+      className={styles.container}
     >
       <div className={styles.inputs}>
         <Slider
diff --git a/client-src/views/draw/components/controls/use-controls.tsx b/client-src/views/draw/components/controls/use-controls.tsx
index 597e684..e13dc43 100644
--- a/client-src/views/draw/components/controls/use-controls.tsx
+++ b/client-src/views/draw/components/controls/use-controls.tsx
@@ -1,10 +1,6 @@
 import * as React from "react";
-import { Colors } from "../colors";
-import { Checkbox } from "../checkbox";
-import { Slider } from "../slider";
-import styles from "./controls.module.css";
 import { app, useAppState } from "../../state";
-import type { State } from "../../state/state";
+import type { State } from "../../state/types";
 
 export const COLORS = [
   "#000000",
@@ -38,13 +34,6 @@ export function useControls() {
     app.patchStyle({ strokeWidth: v[0] });
   }, []);
 
-  const handleIsFilledChange = React.useCallback(
-    (v: boolean | "indeterminate") => {
-      app.setNextStyleForAllShapes({ isFilled: !!v });
-    },
-    [],
-  );
-
   const handleStyleChangeComplete = React.useCallback(() => {
     app.finishStyleUpdate();
   }, []);
@@ -58,12 +47,10 @@ export function useControls() {
   }, []);
 
   return {
-    isPanelOpen: appState.isPanelOpen,
     handleSizeChangeStart,
     handleSizeChange,
     handleStrokeWidthChangeStart,
     handleStrokeWidthChange,
-    handleIsFilledChange,
     handleStyleChangeComplete,
     handleStrokeColorChange,
     handleFillColorChange,
diff --git a/client-src/views/draw/components/slider/slider.tsx b/client-src/views/draw/components/slider/slider.tsx
index 1c2121e..517693f 100644
--- a/client-src/views/draw/components/slider/slider.tsx
+++ b/client-src/views/draw/components/slider/slider.tsx
@@ -13,12 +13,10 @@ interface SliderProps extends SliderOwnProps {
   value: number[]
   onPointerDown: () => void
   onPointerUp: () => void
-  onDoubleClick: () => void
   label?: string
 }
 
 export function Slider({
-  onDoubleClick,
   onPointerUp,
   onPointerDown,
   onValueChange,
@@ -38,7 +36,7 @@ export function Slider({
 
   return (
     <>
-      <Label.Root dir="ltr" htmlFor={props.name} onDoubleClick={onDoubleClick}>
+      <Label.Root dir="ltr" htmlFor={props.name}>
         {props.name}
       </Label.Root>
       <Root
diff --git a/client-src/views/draw/draw-page.tsx b/client-src/views/draw/draw-page.tsx
index 4da0ed3..d078111 100644
--- a/client-src/views/draw/draw-page.tsx
+++ b/client-src/views/draw/draw-page.tsx
@@ -7,11 +7,12 @@ export function DrawPage() {
   useKeyboardShortcuts();
 
   return (
-    <div>
-      <div className={`w-full h-60`}>
+    <div className="w-full" style={{ display: "flex", flexDirection: "row", gap: "1rem" }}>
+      <div style={{ width: "fit-content" }}><Controls /></div>
+      <div className={`h-60 flex-grow`}>
         <Editor />
       </div>
-      <Controls />
+      <button>Send</button>
     </div>
   );
 }
diff --git a/client-src/vite-env.d.ts b/client-src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/client-src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..2d27278
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["client-src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..722fe8e
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts", "server-src"]
+}
diff --git a/tsconfig.shared.json b/tsconfig.shared.json
new file mode 100644
index 0000000..07a31a3
--- /dev/null
+++ b/tsconfig.shared.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["shared-src"]
+}