4 files changed, 26 insertions, 29 deletions
diff --git a/web/package.json b/web/package.json
index a565e36..d845c29 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,12 +4,11 @@
   "scripts": {
     "dev": "vite --clearScreen false"
   },
-  "dependencies": {
-    "open-color": "^1.9.1"
-  },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.16",
-    "tailwindcss": "^4.1.16",
     "vite": "^7.1.12"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.1.16"
   }
 }
diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts
index 01240b5..8e64479 100644
--- a/web/src/components/grid/drawGrid.ts
+++ b/web/src/components/grid/drawGrid.ts
@@ -5,7 +5,7 @@ import { RenderedCell, RenderedGrid } from "./renderGrid";
 
 function fillBackground(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
   ctx.clearRect(0, 0, grid.rect.width, grid.rect.height);
-  ctx.fillStyle = colors.neutral[800];
+  ctx.fillStyle = colors.neutral[900];
   ctx.fillRect(0, 0, grid.rect.width, grid.rect.height);
 }
 
@@ -15,7 +15,7 @@ function strokeGrid(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
 }
 
 function strokeGridLines(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
-  ctx.strokeStyle = colors.neutral[700];
+  ctx.strokeStyle = colors.neutral[800];
 
   grid.renderedRows.forEach((row, renderedRowIndex) => {
     const isLastRow = renderedRowIndex === grid.renderedRows.length - 1;
@@ -72,7 +72,7 @@ function drawSelection(
   //   cell.rect.height - 1,
   // );
 
-  ctx.strokeStyle = colors.green[600];
+  ctx.strokeStyle = colors.green[400];
   ctx.lineWidth = 2;
 
   ctx.strokeRect(
diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css
index 3f78671..b580fbf 100644
--- a/web/src/components/toolbar/index.css
+++ b/web/src/components/toolbar/index.css
@@ -1,41 +1,35 @@
 ntv-toolbar {
   display: flex;
-  border-radius: 4px;
-  background: var(--color-neutral-800);
+  border-radius: 99999px;
+  background: var(--color-neutral-900);
   width: min-content;
 }
 
 ntv-toolbar > section {
   display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.25rem;
+  padding: 0.325rem;
 }
 
-ntv-toolbar button[data-variant="menu"] {
-  border-radius: 4px;
-  background: var(--color-neutral-700);
-  padding: 0 0.625rem;
-  height: 1.5rem;
+ntv-toolbar button {
+  border-radius: 99999px;
+  background: var(--color-neutral-800);
+  padding: 0 0.5rem;
+  height: 1.25rem;
   color: white;
   font-size: 0.75rem;
 }
 
+ntv-toolbar button:hover {
+  background: var(--color-neutral-700);
+}
+
 ntv-toolbar button[data-variant="icon"] {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 4px;
-  background: var(--color-neutral-700);
-  padding: 0.125rem 0.625rem;
   aspect-ratio: 1;
-  height: 1.5rem;
-  color: white;
-  font-weight: 600;
-  font-size: 0.75rem;
-}
-
-ntv-toolbar button:hover {
-  background: var(--color-neutral-600);
+  height: 1.25rem;
 }
 
 ntv-toolbar input {
@@ -43,7 +37,7 @@ ntv-toolbar input {
   border-radius: 4px;
   background: var(--color-neutral-900);
   width: 2.5rem;
-  height: 1.5rem;
+  height: 1.25rem;
   color: white;
   font-size: 0.75rem;
   text-align: center;
diff --git a/web/src/index.css b/web/src/index.css
index 4fe2764..bd5ebf3 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
 body {
-  background: var(--color-neutral-900);
+  background: var(--color-neutral-800);
+}
+
+*:focus-visible {
+  outline: 2px solid var(--color-green-400);
 }