diff --git a/bun.lockb b/bun.lockb
index 635fb28..06bf92c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 92c4605..30be59f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",
     "@tauri-apps/api": "^1.6.0",
     "next": "14.2.5",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 8a323a3..7e361e4 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri-build = { version = "1.5.3", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.7.0", features = [ "notification-all", "dialog-all"] }
+tauri = { version = "1.7.0", features = [ "window-all", "process-all", "notification-all", "dialog-all"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index fb6a5da..895e3c0 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -22,6 +22,12 @@
       },
       "notification": {
         "all": true
+      },
+      "process": {
+        "all": true
+      },
+      "window": {
+        "all": true
       }
     },
     "bundle": {
diff --git a/src/components/FooterBar.tsx b/src/components/FooterBar.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
deleted file mode 100644
index 2a83bab..0000000
--- a/src/components/HeaderBar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AppBar, Box, Toolbar } from "@mui/material";
-
-export const HeaderBar = () => {
-  return (
-    <AppBar position="static">
-      <Toolbar
-        disableGutters
-        sx={{
-          height: "64px",
-          p: 1,
-        }}
-      >
-        hello this is the left side
-        <Box sx={{ flexGrow: 1 }} />
-        hello this is the right side
-      </Toolbar>
-    </AppBar>
-  );
-};
diff --git a/src/components/HeaderBar/HeaderBar.tsx b/src/components/HeaderBar/HeaderBar.tsx
new file mode 100644
index 0000000..7c8f2c3
--- /dev/null
+++ b/src/components/HeaderBar/HeaderBar.tsx
@@ -0,0 +1,25 @@
+import { Box, Button, Typography } from "@mui/material";
+import { WindowButtons } from "./WindowButtons";
+
+export const HeaderBar = () => {
+  const test = async () => {
+    console.log("hello");
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "64px",
+        p: 1,
+      }}
+    >
+      hello this is the left side
+      <Box sx={{ flexGrow: 1 }} />
+      <Typography>hello this is the right side |</Typography>
+      <Button onClick={test}>Relaunch</Button>
+      <WindowButtons />
+    </Box>
+  );
+};
diff --git a/src/components/HeaderBar/WindowButtons.tsx b/src/components/HeaderBar/WindowButtons.tsx
new file mode 100644
index 0000000..ed5f9a7
--- /dev/null
+++ b/src/components/HeaderBar/WindowButtons.tsx
@@ -0,0 +1,57 @@
+import { Close, CloseFullscreen, Minimize } from "@mui/icons-material";
+import { Box, Button, ButtonGroup, Stack, useTheme } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+
+export const WindowButtons = () => {
+  const userTheme = useTheme();
+
+  const minimize = () => {
+    appWindow.minimize();
+  };
+
+  const maximize = () => {
+    appWindow.toggleMaximize();
+  };
+
+  const close = () => {
+    appWindow.close();
+  };
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={1}>
+        <ButtonGroup>
+          <Button
+            onClick={minimize}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <Minimize
+              fontSize="inherit"
+              sx={{
+                backgroundColor: userTheme.palette.grey[800],
+              }}
+            />
+          </Button>
+          <Button
+            onClick={maximize}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <CloseFullscreen fontSize="inherit" />
+          </Button>
+          <Button
+            onClick={close}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <Close fontSize="inherit" />
+          </Button>
+        </ButtonGroup>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4c1ec15..2abcfc7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,7 +12,7 @@ import {
   sendNotification,
 } from "@tauri-apps/api/notification";
 import { useState } from "react";
-import { HeaderBar } from "../components/HeaderBar";
+import { HeaderBar } from "../components/HeaderBar/HeaderBar";
 
 export default function Home() {
   const [content, setContent] = useState("Please enter your name");