diff --git a/src/routes/components/CloseIcon.svelte b/src/routes/components/CloseIcon.svelte
new file mode 100644
index 0000000..c025c6c
--- /dev/null
+++ b/src/routes/components/CloseIcon.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  const { class: className }: { class?: string } = $props()
+</script>
+
+<div class={className ?? ''}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18 18 6M6 6l12 12"
+    />
+  </svg>
+</div>
diff --git a/src/routes/components/HamburgerIcon.svelte b/src/routes/components/HamburgerIcon.svelte
new file mode 100644
index 0000000..fa879ee
--- /dev/null
+++ b/src/routes/components/HamburgerIcon.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  const { class: className }: { class?: string } = $props()
+</script>
+
+<div class={className ?? ''}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+</div>
diff --git a/src/routes/components/ServerPartsGrid.svelte b/src/routes/components/ServerPartsGrid.svelte
index ba08bbd..fde8e0f 100644
--- a/src/routes/components/ServerPartsGrid.svelte
+++ b/src/routes/components/ServerPartsGrid.svelte
@@ -7,10 +7,14 @@
   import { mount } from 'svelte'
   import CellLink from './CellLink.svelte'
   import RangeFilter from './RangeFilter.svelte'
+  import CloseIcon from './CloseIcon.svelte'
+  import HamburgerIcon from './HamburgerIcon.svelte'
 
   const uid = $props.id()
   const { rowData } = $props()
 
+  let filterMenuOpen = $state(true)
+
   const filterDivClass =
     'm-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md'
 
@@ -138,8 +142,29 @@
 </script>
 
 <div class="flex">
-  <div class="h-screen w-48 flex-none">
-    {#if gridApi}
+  <div class="h-screen flex-none {filterMenuOpen ? 'w-48' : 'w-6'}">
+    <button
+      onclick={() => (filterMenuOpen = !filterMenuOpen)}
+      class="m-0 w-full drop-shadow-sm hover:bg-sky-50 hover:drop-shadow-md {filterMenuOpen
+        ? ''
+        : 'h-screen'}"
+    >
+      {#if filterMenuOpen}
+        <div class="flex p-1 px-2">
+          <span>Filters</span>
+          <span class="flex-grow"></span>
+          <CloseIcon />
+        </div>
+      {:else}
+        <div class="flex h-full flex-col pt-1">
+          <HamburgerIcon />
+          <span class="flex-grow"></span>
+          <span class="-rotate-90">Filters</span>
+          <span class="flex-grow"></span>
+        </div>
+      {/if}
+    </button>
+    {#if gridApi && filterMenuOpen}
       {#each checkboxFilterDefs as { label, column } (`${uid}-${column}`)}
         <div class={filterDivClass}>
           <span>{label}</span>
@@ -164,7 +189,7 @@
           valueGetter={(value) => value * 30}
         />
       </div>
-    {:else}
+    {:else if filterMenuOpen}
       <Spinner class="justify-items-end" />
     {/if}
   </div>