diff --git a/client-src/views/draw/components/controls/controls.tsx b/client-src/views/draw/components/controls/controls.tsx
index f44696e..025ab95 100644
--- a/client-src/views/draw/components/controls/controls.tsx
+++ b/client-src/views/draw/components/controls/controls.tsx
@@ -1,78 +1,29 @@
-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'
-
-const COLORS = [
-  '#000000',
-  '#ffc107',
-  '#ff5722',
-  '#e91e63',
-  '#673ab7',
-  '#00bcd4',
-  '#efefef',
-]
-
-const appStateSelector = (s: State) => s.appState
+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 { useControls, COLORS } from "./use-controls";
 
 export function Controls() {
-  const appState = useAppState(appStateSelector)
-  const { style } = appState
-
-  const handleSizeChangeStart = React.useCallback(() => {
-    app.setSnapshot()
-  }, [])
-
-  const handleSizeChange = React.useCallback((v: number[]) => {
-    app.patchStyle({ size: v[0] })
-  }, [])
-
-  const handleStrokeWidthChangeStart = React.useCallback(() => {
-    app.setSnapshot()
-  }, [])
-
-  const handleStrokeWidthChange = React.useCallback((v: number[]) => {
-    app.patchStyle({ strokeWidth: v[0] })
-  }, [])
-
-  const handleIsFilledChange = React.useCallback(
-    (v: boolean | 'indeterminate') => {
-      app.setNextStyleForAllShapes({ isFilled: !!v })
-    },
-    []
-  )
-
-  const handleStyleChangeComplete = React.useCallback(() => {
-    app.finishStyleUpdate()
-  }, [])
-
-  const handleStrokeColorChange = React.useCallback((color: string) => {
-    app.patchStyle({ stroke: color })
-  }, [])
-
-  const handleFillColorChange = React.useCallback((color: string) => {
-    app.patchStyle({ fill: color })
-  }, [])
-
-  // Resets
-
-  const handleResetSize = React.useCallback(() => {
-    app.resetStyle('size')
-  }, [])
-
-  const handleResetStrokeWidth = React.useCallback(() => {
-    app.resetStyle('strokeWidth')
-  }, [])
+  const {
+    isPanelOpen,
+    handleSizeChangeStart,
+    handleSizeChange,
+    handleStrokeWidthChangeStart,
+    handleStrokeWidthChange,
+    handleIsFilledChange,
+    handleStyleChangeComplete,
+    handleStrokeColorChange,
+    handleFillColorChange,
+    style,
+  } = useControls();
 
   return (
     <div
-      className={[
-        styles.container,
-        appState.isPanelOpen ? styles.open : '',
-      ].join(' ')}
+      className={[styles.container, isPanelOpen ? styles.open : ""].join(" ")}
     >
       <div className={styles.inputs}>
         <Slider
@@ -81,7 +32,6 @@ export function Controls() {
           min={1}
           max={100}
           step={1}
-          onDoubleClick={handleResetSize}
           onValueChange={handleSizeChange}
           onPointerDown={handleSizeChangeStart}
           onPointerUp={handleStyleChangeComplete}
@@ -98,7 +48,6 @@ export function Controls() {
           min={0}
           max={100}
           step={1}
-          onDoubleClick={handleResetStrokeWidth}
           onValueChange={handleStrokeWidthChange}
           onPointerDown={handleStrokeWidthChangeStart}
           onPointerUp={handleStyleChangeComplete}
@@ -112,6 +61,11 @@ export function Controls() {
           />
         )}
       </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <button onClick={app.undo}>Undo</button>
+        <button onClick={app.redo}>Redo</button>
+        <button onClick={app.resetDoc}>Clear</button>
+      </div>
     </div>
-  )
+  );
 }
diff --git a/client-src/views/draw/components/controls/use-controls.tsx b/client-src/views/draw/components/controls/use-controls.tsx
new file mode 100644
index 0000000..597e684
--- /dev/null
+++ b/client-src/views/draw/components/controls/use-controls.tsx
@@ -0,0 +1,72 @@
+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";
+
+export const COLORS = [
+  "#000000",
+  "#ffc107",
+  "#ff5722",
+  "#e91e63",
+  "#673ab7",
+  "#00bcd4",
+  "#efefef",
+];
+
+const appStateSelector = (s: State) => s.appState;
+
+export function useControls() {
+  const appState = useAppState(appStateSelector);
+  const { style } = appState;
+
+  const handleSizeChangeStart = React.useCallback(() => {
+    app.setSnapshot();
+  }, []);
+
+  const handleSizeChange = React.useCallback((v: number[]) => {
+    app.patchStyle({ size: v[0] });
+  }, []);
+
+  const handleStrokeWidthChangeStart = React.useCallback(() => {
+    app.setSnapshot();
+  }, []);
+
+  const handleStrokeWidthChange = React.useCallback((v: number[]) => {
+    app.patchStyle({ strokeWidth: v[0] });
+  }, []);
+
+  const handleIsFilledChange = React.useCallback(
+    (v: boolean | "indeterminate") => {
+      app.setNextStyleForAllShapes({ isFilled: !!v });
+    },
+    [],
+  );
+
+  const handleStyleChangeComplete = React.useCallback(() => {
+    app.finishStyleUpdate();
+  }, []);
+
+  const handleStrokeColorChange = React.useCallback((color: string) => {
+    app.patchStyle({ stroke: color });
+  }, []);
+
+  const handleFillColorChange = React.useCallback((color: string) => {
+    app.patchStyle({ fill: color });
+  }, []);
+
+  return {
+    isPanelOpen: appState.isPanelOpen,
+    handleSizeChangeStart,
+    handleSizeChange,
+    handleStrokeWidthChangeStart,
+    handleStrokeWidthChange,
+    handleIsFilledChange,
+    handleStyleChangeComplete,
+    handleStrokeColorChange,
+    handleFillColorChange,
+    style,
+  };
+}
diff --git a/client-src/views/draw/components/editor/editor.module.css b/client-src/views/draw/components/editor/editor.module.css
index 10afb29..e69de29 100644
--- a/client-src/views/draw/components/editor/editor.module.css
+++ b/client-src/views/draw/components/editor/editor.module.css
@@ -1,8 +0,0 @@
-.container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
diff --git a/client-src/views/draw/components/editor/editor.tsx b/client-src/views/draw/components/editor/editor.tsx
index a271829..9f80a40 100644
--- a/client-src/views/draw/components/editor/editor.tsx
+++ b/client-src/views/draw/components/editor/editor.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
-import { Renderer } from '@tldraw/core'
-import { app, useAppState } from '../../state'
-import styles from './editor.module.css'
+import * as React from "react";
+import { Renderer } from "@tldraw/core";
+import { app, useAppState } from "../../state";
+import styles from "./editor.module.css";
 
 export function Editor(): JSX.Element {
   const {
@@ -13,29 +13,27 @@ export function Editor(): JSX.Element {
     onPointerMove,
     onPointerUp,
     shapeUtils,
-  } = app
-  const { page, pageState } = useAppState()
+  } = app;
+  const { page, pageState } = useAppState();
 
   React.useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    window.freehand = app
-  }, [])
+    window.freehand = app;
+  }, []);
 
   return (
-    <div className={styles.container}>
-      <Renderer
-        page={page}
-        pageState={pageState}
-        shapeUtils={shapeUtils as any}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        onPinch={onPinch}
-        onPinchStart={onPinchStart}
-        onPinchEnd={onPinchEnd}
-        onPan={onPan}
-      />
-    </div>
-  )
+    <Renderer
+      page={page}
+      pageState={pageState}
+      shapeUtils={shapeUtils as any}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPinch={onPinch}
+      onPinchStart={onPinchStart}
+      onPinchEnd={onPinchEnd}
+      onPan={onPan}
+    />
+  );
 }
diff --git a/client-src/views/draw/components/panel/index.ts b/client-src/views/draw/components/panel/index.ts
deleted file mode 100644
index aa0566f..0000000
--- a/client-src/views/draw/components/panel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './panel'
diff --git a/client-src/views/draw/components/panel/panel.module.css b/client-src/views/draw/components/panel/panel.module.css
deleted file mode 100644
index 1567d0a..0000000
--- a/client-src/views/draw/components/panel/panel.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.container {
-  position: absolute;
-  display: flex;
-  z-index: 20;
-  width: fit-content;
-  user-select: none;
-}
-
-.container a,
-.container button {
-  border: none;
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: black;
-  font-family: 'Recursive', sans-serif;
-  user-select: none;
-  background-color: rgba(255, 255, 255, 1);
-  text-shadow: 1px 1px 2px rgba(255, 255, 255, 1),
-    1px 1px 3px rgba(255, 255, 255, 1), 1px 1px 8px rgba(255, 255, 255, 1);
-}
-
-.container button {
-  padding: 16px 40px;
-}
-
-.container a:hover,
-.container button:hover,
-.container button[data-active='true'] {
-  color: dodgerblue;
-  background-color: white;
-}
-
-.bottom {
-  bottom: 0px;
-}
-
-.left {
-  left: 0px;
-}
-
-.right {
-  right: 0px;
-}
-
-.top {
-  top: 0px;
-}
-
-.center {
-  position: fixed;
-  width: 100%;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: none;
-  z-index: 10;
-}
-
-.center a {
-  color: black;
-  text-decoration: none;
-}
diff --git a/client-src/views/draw/components/panel/panel.tsx b/client-src/views/draw/components/panel/panel.tsx
deleted file mode 100644
index fecf5be..0000000
--- a/client-src/views/draw/components/panel/panel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import styles from './panel.module.css'
-import { app, useAppState } from '../../state'
-import { GitHubLogoIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
-
-export function Panel() {
-  const tool = useAppState((s) => s.appState.tool)
-
-  return (
-    <>
-      <div
-        className={[styles.container, styles.bottom, styles.right].join(' ')}
-      >
-        <button onClick={app.undo}>Undo</button>
-        <button onClick={app.redo}>Redo</button>
-        <button onClick={app.resetDoc}>Clear</button>
-      </div>
-    </>
-  )
-}
diff --git a/client-src/views/draw/draw-page.tsx b/client-src/views/draw/draw-page.tsx
index 0b1e170..4da0ed3 100644
--- a/client-src/views/draw/draw-page.tsx
+++ b/client-src/views/draw/draw-page.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react'
-import { Editor } from './components/editor'
-import { Controls } from './components/controls'
-import { Panel } from './components/panel'
-import { useKeyboardShortcuts } from './hooks'
+import * as React from "react";
+import { Editor } from "./components/editor";
+import { Controls } from "./components/controls";
+import { useKeyboardShortcuts } from "./hooks";
 
 export function DrawPage() {
-  useKeyboardShortcuts()
+  useKeyboardShortcuts();
 
   return (
-    <div className="app">
-      <Editor />
+    <div>
+      <div className={`w-full h-60`}>
+        <Editor />
+      </div>
       <Controls />
-      <Panel />
     </div>
-  )
-}
\ No newline at end of file
+  );
+}