diff --git a/.dprint.jsonc b/.dprint.jsonc
index ac227f6..acb637a 100644
--- a/.dprint.jsonc
+++ b/.dprint.jsonc
@@ -40,7 +40,7 @@
   },
   "excludes": [
     "**/node_modules",
-    "**/*-lock.json"
+    "**/*-lock.yaml"
   ],
   "plugins": [
     "https://plugins.dprint.dev/typescript-0.95.13.wasm",
diff --git a/app/src/lib/graph-interface/keymaps.ts b/app/src/lib/graph-interface/keymaps.ts
index 667dbfd..9fd9b54 100644
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/app/src/lib/graph-interface/keymaps.ts
@@ -1,16 +1,15 @@
-import { animate, lerp } from "$lib/helpers";
-import type { createKeyMap } from "$lib/helpers/createKeyMap";
-import FileSaver from "file-saver";
-import type { GraphManager } from "./graph-manager.svelte";
-import type { GraphState } from "./graph-state.svelte";
+import { animate, lerp } from '$lib/helpers';
+import type { createKeyMap } from '$lib/helpers/createKeyMap';
+import { panelState } from '$lib/sidebar/PanelState.svelte';
+import FileSaver from 'file-saver';
+import type { GraphManager } from './graph-manager.svelte';
+import type { GraphState } from './graph-state.svelte';
 
 type Keymap = ReturnType<typeof createKeyMap>;
 export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: GraphState) {
-
-
   keymap.addShortcut({
-    key: "l",
-    description: "Select linked nodes",
+    key: 'l',
+    description: 'Select linked nodes',
     callback: () => {
       const activeNode = graph.getNode(graphState.activeNodeId);
       if (activeNode) {
@@ -20,56 +19,54 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
           graphState.selectedNodes.add(node.id);
         }
       }
-    },
+    }
   });
 
-
   keymap.addShortcut({
-    key: "?",
-    description: "Toggle Help",
+    key: '?',
+    description: 'Toggle Help',
     callback: () => {
-      // TODO: fix this
-      // showHelp = !showHelp;
-    },
+      panelState.setActivePanel('shortcuts');
+    }
   });
 
   keymap.addShortcut({
-    key: "c",
+    key: 'c',
     ctrl: true,
-    description: "Copy active nodes",
-    callback: () => graphState.copyNodes(),
+    description: 'Copy active nodes',
+    callback: () => graphState.copyNodes()
   });
 
   keymap.addShortcut({
-    key: "v",
+    key: 'v',
     ctrl: true,
-    description: "Paste nodes",
-    callback: () => graphState.pasteNodes(),
+    description: 'Paste nodes',
+    callback: () => graphState.pasteNodes()
   });
 
   keymap.addShortcut({
-    key: "Escape",
-    description: "Deselect nodes",
+    key: 'Escape',
+    description: 'Deselect nodes',
     callback: () => {
       graphState.activeNodeId = -1;
       graphState.clearSelection();
       graphState.edgeEndPosition = null;
       (document.activeElement as HTMLElement)?.blur();
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "A",
+    key: 'A',
     shift: true,
-    description: "Add new Node",
+    description: 'Add new Node',
     callback: () => {
       graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: ".",
-    description: "Center camera",
+    key: '.',
+    description: 'Center camera',
     callback: () => {
       if (!graphState.isBodyFocused()) return;
 
@@ -90,67 +87,67 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
       animate(500, (a: number) => {
         graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
         graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
-        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a))
+        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a));
         if (graphState.mouseDown) return false;
       });
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "a",
+    key: 'a',
     ctrl: true,
     preventDefault: true,
-    description: "Select all nodes",
+    description: 'Select all nodes',
     callback: () => {
       if (!graphState.isBodyFocused()) return;
       for (const node of graph.nodes.keys()) {
         graphState.selectedNodes.add(node);
       }
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "z",
+    key: 'z',
     ctrl: true,
-    description: "Undo",
+    description: 'Undo',
     callback: () => {
       if (!graphState.isBodyFocused()) return;
       graph.undo();
       for (const node of graph.nodes.values()) {
         graphState.updateNodePosition(node);
       }
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "y",
+    key: 'y',
     ctrl: true,
-    description: "Redo",
+    description: 'Redo',
     callback: () => {
       graph.redo();
       for (const node of graph.nodes.values()) {
         graphState.updateNodePosition(node);
       }
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "s",
+    key: 's',
     ctrl: true,
-    description: "Save",
+    description: 'Save',
     preventDefault: true,
     callback: () => {
       const state = graph.serialize();
       const blob = new Blob([JSON.stringify(state)], {
-        type: "application/json;charset=utf-8",
+        type: 'application/json;charset=utf-8'
       });
-      FileSaver.saveAs(blob, "nodarium-graph.json");
-    },
+      FileSaver.saveAs(blob, 'nodarium-graph.json');
+    }
   });
 
   keymap.addShortcut({
-    key: ["Delete", "Backspace", "x"],
-    description: "Delete selected nodes",
+    key: ['Delete', 'Backspace', 'x'],
+    description: 'Delete selected nodes',
     callback: (event) => {
       if (!graphState.isBodyFocused()) return;
       graph.startUndoGroup();
@@ -171,20 +168,18 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
         graphState.clearSelection();
       }
       graph.saveUndoGroup();
-    },
+    }
   });
 
   keymap.addShortcut({
-    key: "f",
-    description: "Smart Connect Nodes",
+    key: 'f',
+    description: 'Smart Connect Nodes',
     callback: () => {
       const nodes = [...graphState.selectedNodes.values()]
         .map((g) => graph.getNode(g))
         .filter((n) => !!n);
       const edge = graph.smartConnect(nodes[0], nodes[1]);
       if (!edge) graph.smartConnect(nodes[1], nodes[0]);
-    },
+    }
   });
-
-
 }
diff --git a/app/src/lib/sidebar/Panel.svelte b/app/src/lib/sidebar/Panel.svelte
index 925dd87..19d90c0 100644
--- a/app/src/lib/sidebar/Panel.svelte
+++ b/app/src/lib/sidebar/Panel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
-  import type { PanelState } from "./PanelState.svelte";
+  import { type Snippet } from "svelte";
+  import { panelState } from "./PanelState.svelte";
 
   const {
     id,
@@ -18,8 +18,6 @@
     children?: Snippet;
   }>();
 
-  const panelState = getContext<PanelState>("panel-state");
-
   const panel = panelState.registerPanel(id, icon, classes, hidden);
   $effect(() => {
     panel.hidden = hidden;
diff --git a/app/src/lib/sidebar/PanelState.svelte.ts b/app/src/lib/sidebar/PanelState.svelte.ts
index d411813..9ca80e0 100644
--- a/app/src/lib/sidebar/PanelState.svelte.ts
+++ b/app/src/lib/sidebar/PanelState.svelte.ts
@@ -1,15 +1,14 @@
-import { localState } from "$lib/helpers/localState.svelte";
+import { localState } from '$lib/helpers/localState.svelte';
 
 type Panel = {
   icon: string;
   classes: string;
   hidden?: boolean;
-}
-
-export class PanelState {
+};
 
+class PanelState {
   panels = $state<Record<string, Panel>>({});
-  activePanel = localState<string | boolean>("node.activePanel", "")
+  activePanel = localState<string | boolean>('node.activePanel', '');
 
   get keys() {
     return Object.keys(this.panels);
@@ -19,7 +18,7 @@ export class PanelState {
     const state = $state({
       icon: icon,
       classes: classes,
-      hidden: hidden,
+      hidden: hidden
     });
     this.panels[id] = state;
     return state;
@@ -29,7 +28,13 @@ export class PanelState {
     if (this.activePanel.value) {
       this.activePanel.value = false;
     } else {
-      this.activePanel.value = this.keys[0]
+      this.activePanel.value = this.keys[0];
     }
   }
+
+  public setActivePanel(panelId: string) {
+    this.activePanel.value = panelId;
+  }
 }
+
+export const panelState = new PanelState();
diff --git a/app/src/lib/sidebar/Sidebar.svelte b/app/src/lib/sidebar/Sidebar.svelte
index 3b6831a..17b6d61 100644
--- a/app/src/lib/sidebar/Sidebar.svelte
+++ b/app/src/lib/sidebar/Sidebar.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-  import { setContext, type Snippet } from "svelte";
-  import { PanelState } from "./PanelState.svelte";
-
-  const state = new PanelState();
-  setContext("panel-state", state);
+  import { type Snippet } from "svelte";
+  import { panelState as state } from "./PanelState.svelte";
 
   const { children } = $props<{ children?: Snippet }>();
 </script>
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index 49feb93..f916dd1 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -2,11 +2,9 @@
 	import type { NodeInput } from '@nodarium/types';
 
 	import Checkbox from './inputs/Checkbox.svelte';
-	import Float from './inputs/Float.svelte';
-	import Integer from './inputs/Integer.svelte';
+	import Number from './inputs/Number.svelte';
 	import Select from './inputs/Select.svelte';
 	import Vec3 from './inputs/Vec3.svelte';
-	// import Number from './inputs/Number.svelte';
 
 	interface Props {
 		input: NodeInput;
@@ -18,9 +16,9 @@
 </script>
 
 {#if input.type === 'float'}
-	<Float bind:value min={input?.min} max={input?.max} />
+	<Number bind:value min={input?.min} max={input?.max} step={0.01} />
 {:else if input.type === 'integer'}
-	<Integer bind:value min={input?.min} max={input?.max} />
+	<Number bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}
 	<Checkbox bind:value {id} />
 {:else if input.type === 'select'}
diff --git a/packages/ui/src/lib/inputs/Integer.svelte b/packages/ui/src/lib/inputs/Integer.svelte
index 083e621..1446b99 100644
--- a/packages/ui/src/lib/inputs/Integer.svelte
+++ b/packages/ui/src/lib/inputs/Integer.svelte
@@ -112,23 +112,25 @@
 	onmousedown={handleMouseDown}
 	onmouseup={handleMouseUp}
 >
+	<div class="">
+		<button onclick={() => handleChange(-step)}>-</button>
+		<input
+			bind:value
+			bind:this={inputEl}
+			{id}
+			{step}
+			{max}
+			{min}
+			type="number"
+			style={`width:${width};`}
+		/>
+
+		<button onclick={() => handleChange(+step)}>+</button>
+	</div>
 	{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
 		<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
 		></span>
 	{/if}
-	<button onclick={() => handleChange(-step)}>-</button>
-	<input
-		bind:value
-		bind:this={inputEl}
-		{id}
-		{step}
-		{max}
-		{min}
-		type="number"
-		style={`width:${width};`}
-	/>
-
-	<button onclick={() => handleChange(+step)}>+</button>
 </div>
 
 <style>
diff --git a/packages/ui/src/lib/inputs/Number.svelte b/packages/ui/src/lib/inputs/Number.svelte
index 0bb9fc1..a7b2bca 100644
--- a/packages/ui/src/lib/inputs/Number.svelte
+++ b/packages/ui/src/lib/inputs/Number.svelte
@@ -12,8 +12,10 @@
 		step = 1,
 		min = $bindable(0),
 		max = $bindable(1),
-		id
+		id: _id
 	}: Props = $props();
+	const uid = $props.id();
+	const id = $derived(_id || uid);
 
 	if (min > max) {
 		[min, max] = [max, min];
@@ -26,7 +28,7 @@
 		return +parseFloat(input + '').toPrecision(2);
 	}
 
-	let inputEl: HTMLInputElement | undefined = $state();
+	let inputEl = $state() as HTMLInputElement;
 
 	let prev = -1;
 	function update() {
@@ -82,6 +84,10 @@
 </div>
 
 <style>
+	:root {
+		--slider-height: 4px;
+	}
+
 	.component-wrapper {
 		display: flex;
 		background-color: var(--layer-2, #4b4b4b);
@@ -145,7 +151,7 @@
 		position: absolute;
 		appearance: none;
 		width: 100%;
-		height: 3px;
+		height: var(--slider-height);
 		background: var(--layer-2, #4b4b4b);
 		cursor: pointer;
 	}
@@ -154,16 +160,18 @@
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: 0px;
-		height: 0px;
+		width: 12px;
+		height: var(--slider-height);
+		background: var(--text-color);
 		box-shadow: none;
 	}
 
 	/* Thumb: for Firefox */
 	input[type='range']::-moz-range-thumb {
 		border: none;
-		width: 0px;
-		height: 0px;
+		width: 12px;
+		height: var(--slider-height);
+		background: var(--text-color);
 		box-shadow: none;
 	}
 </style>