diff --git a/components/Header.vue b/components/Header.vue
index aaa2ffd..5cf299f 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -42,7 +42,7 @@
         </ol>
       </div>
     </div>
-    <WindowControl class="h-16 w-16 p-4" />
+    <WindowControl  />
   </div>
 </template>
 
diff --git a/components/HeaderButton.vue b/components/HeaderButton.vue
index bbe809d..0811c13 100644
--- a/components/HeaderButton.vue
+++ b/components/HeaderButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="transition h-10 w-10 text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 p-2">
+    <button class="transition h-full aspect-square text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100 p-[1.1rem]">
         <slot />
     </button>
 </template>
\ No newline at end of file
diff --git a/components/WindowControl.vue b/components/WindowControl.vue
index 75ea06b..548ef0e 100644
--- a/components/WindowControl.vue
+++ b/components/WindowControl.vue
@@ -1,4 +1,7 @@
 <template>
+  <HeaderButton v-if="showMinimise" @click="() => minimise()">
+    <MinusIcon />
+  </HeaderButton>
   <HeaderButton @click="() => close()">
     <XMarkIcon />
   </HeaderButton>
@@ -8,11 +11,14 @@
 import { MinusIcon, XMarkIcon } from "@heroicons/vue/16/solid";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
-async function close(){
-  console.log(window);
-  const result = await window.close();
-  console.log(`closed window: ${result}`);
+const window = getCurrentWindow();
+const showMinimise = await window.isMinimizable();
+
+async function close() {
+  await window.close();
 }
 
-const window = getCurrentWindow();
+async function minimise() {
+  await window.minimize();
+}
 </script>