diff --git a/src/app.html b/src/app.html
index 40b3466..a142ec1 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
+  <body data-sveltekit-preload-data="hover" class="bg-neutral-800">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/routes/components/Grid.svelte b/src/routes/components/Grid.svelte
index 8c3e45e..307a8e7 100644
--- a/src/routes/components/Grid.svelte
+++ b/src/routes/components/Grid.svelte
@@ -12,6 +12,7 @@
     ValidationModule,
     themeBalham,
     ColumnAutoSizeModule,
+    colorSchemeDark,
   } from 'ag-grid-community'
   import { onMount } from 'svelte'
 
@@ -38,7 +39,7 @@
   onMount(() => {
     const gridOptions: GridOptions<RowData> = {
       columnDefs,
-      theme: themeBalham,
+      theme: themeBalham.withPart(colorSchemeDark),
       rowData: Array.isArray(rowData) ? rowData : [],
       defaultColDef: {
         sortable: true,
diff --git a/src/routes/components/ServerPartsGrid.svelte b/src/routes/components/ServerPartsGrid.svelte
index 40a8a26..cf812a7 100644
--- a/src/routes/components/ServerPartsGrid.svelte
+++ b/src/routes/components/ServerPartsGrid.svelte
@@ -16,7 +16,7 @@
   let filterMenuOpen = $state(true)
 
   const filterDivClass =
-    'm-1 w-46 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md'
+    'm-1 w-46 rounded-sm border-1 border-neutral-500 bg-gray-50 px-1 drop-shadow-md bg-neutral-700 text-neutral-100'
 
   let gridApi: GridApi | undefined = $state()
 
@@ -149,7 +149,7 @@
   >
     <button
       onclick={() => (filterMenuOpen = !filterMenuOpen)}
-      class="m-0 w-full drop-shadow-sm hover:bg-sky-50 hover:drop-shadow-md {filterMenuOpen
+      class="m-0 w-full bg-neutral-700 text-neutral-400 drop-shadow-sm hover:bg-cyan-900 hover:drop-shadow-md {filterMenuOpen
         ? ''
         : 'h-screen'}"
     >
