diff --git a/bun.lockb b/bun.lockb
index f4ba319..aa791be 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 6c2f6f7..e0d7052 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.6",
-    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/lab": "5.0.0-alpha.143",
     "@mui/material": "^5.16.6",
     "@tauri-apps/api": "^1.6.0",
     "jotai": "^2.9.1",
diff --git a/src/components/Generic/FloatingDialog.tsx b/src/components/Generic/FloatingDialog.tsx
index 4274dad..95c8ad0 100644
--- a/src/components/Generic/FloatingDialog.tsx
+++ b/src/components/Generic/FloatingDialog.tsx
@@ -59,6 +59,7 @@ export const FloatingDialog: FC<FloatingDialog> = ({
         >
           <Box
             sx={{
+              alignItems: "center",
               display: "flex",
               px: 1,
             }}
diff --git a/src/components/HeaderBar/HeaderBar.tsx b/src/components/HeaderBar/HeaderBar.tsx
index 6df0cfb..041310f 100644
--- a/src/components/HeaderBar/HeaderBar.tsx
+++ b/src/components/HeaderBar/HeaderBar.tsx
@@ -1,8 +1,8 @@
-import { Box, Button, IconButton, Typography } from "@mui/material";
-import { WindowButtons } from "./WindowButtons";
-import { BugReport, BugReportOutlined } from "@mui/icons-material";
+import { BugReportOutlined } from "@mui/icons-material";
+import { Box, IconButton, Stack } from "@mui/material";
 import { useRouter } from "next/router";
 import { Settings } from "./Settings/Settings";
+import { WindowButtons } from "./WindowButtons";
 
 export const HeaderBar = () => {
   const router = useRouter();
@@ -42,15 +42,25 @@ export const HeaderBar = () => {
           flexDirection: "row",
         }}
       >
-        <IconButton
-          onClick={() => {
-            router.push("/testing");
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
           }}
         >
-          <BugReportOutlined />
-        </IconButton>
-        <Settings />
-        <WindowButtons />
+          <IconButton
+            onClick={() => {
+              router.push("/testing");
+            }}
+          >
+            <BugReportOutlined />
+          </IconButton>
+          <Settings />
+          <WindowButtons />
+        </Stack>
       </Box>
     </Box>
   );
diff --git a/src/components/HeaderBar/Settings/Settings.tsx b/src/components/HeaderBar/Settings/Settings.tsx
index 088235c..5639e1d 100644
--- a/src/components/HeaderBar/Settings/Settings.tsx
+++ b/src/components/HeaderBar/Settings/Settings.tsx
@@ -1,11 +1,12 @@
 import { SettingsOutlined } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
-import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
+import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Button, IconButton, Tab, useTheme } from "@mui/material";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { useSettings } from "../../../contexts/SettingsContext";
 import { settingsAtom } from "../../../lib/store/jotai/settings";
 import { FloatingDialog } from "../../Generic/FloatingDialog";
+import { SettingsTabDisplay } from "./SettingsTabDisplay";
 
 export const Settings = () => {
   // contexts
@@ -60,7 +61,53 @@ export const Settings = () => {
 
   return (
     <FloatingDialog
-      body={<Typography>Settings</Typography>}
+      body={
+        <Box
+          sx={{
+            // TODO: make look nice
+            border: "1px solid " + theme.palette.grey[700],
+            borderRadius: settings.display.radius + "px",
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            my: 2,
+            overflow: "hidden",
+            p: 0,
+          }}
+        >
+          <TabContext value={subTabValue}>
+            <TabList
+              onChange={(e, value) => {
+                subTabChangeEvent(value);
+              }}
+              scrollButtons={true}
+              sx={{
+                borderBottom: "1px solid " + theme.palette.divider,
+              }}
+              variant="scrollable"
+            >
+              <Tab
+                label="Display"
+                value="display"
+              />
+            </TabList>
+            <Box
+              overflow="auto"
+              sx={{
+                height: "100%",
+                width: "100%",
+              }}
+            >
+              <TabPanel
+                sx={{ p: 2 }}
+                value="display"
+              >
+                <SettingsTabDisplay />
+              </TabPanel>
+            </Box>
+          </TabContext>
+        </Box>
+      }
       bottomBar={
         <Box
           sx={{
diff --git a/src/components/HeaderBar/WindowButtons.tsx b/src/components/HeaderBar/WindowButtons.tsx
index a79f08a..435a8fa 100644
--- a/src/components/HeaderBar/WindowButtons.tsx
+++ b/src/components/HeaderBar/WindowButtons.tsx
@@ -41,7 +41,13 @@ export const WindowButtons = () => {
   });
 
   return (
-    <Box>
+    <Box
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+      }}
+    >
       <Stack
         direction="row"
         spacing={1}
diff --git a/src/contexts/LoadingContext.tsx b/src/contexts/LoadingContext.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/contexts/SettingsContext.tsx b/src/contexts/SettingsContext.tsx
index c5b8d96..ef9df25 100644
--- a/src/contexts/SettingsContext.tsx
+++ b/src/contexts/SettingsContext.tsx
@@ -19,6 +19,17 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [settings, setSettings] = useState<SettingsType>(defaultSettings);
   const [settingsLoading, setSettingsLoading] = useState<boolean>(true);
 
+  const fetchSettings = async () => {
+    try {
+      const existingSettings = await readConfigFile();
+      setSettings(existingSettings);
+    } catch (error) {
+      logcat.log(`Failed to load settings: ${error}`, "ERROR");
+    } finally {
+      setSettingsLoading(false);
+    }
+  };
+
   const updateSettings = async (newSettings: SettingsType) => {
     try {
       await writeConfigFile(newSettings);
@@ -43,17 +54,6 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
   // fetch user settings from local on first load every time
   useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const existingSettings = await readConfigFile();
-        setSettings(existingSettings);
-      } catch (error) {
-        logcat.log(`Failed to load settings: ${error}`, "ERROR");
-      } finally {
-        setSettingsLoading(false);
-      }
-    };
-
     fetchSettings();
   }, []);
 
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index d286767..0d14f8f 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -1,3 +1,4 @@
+import { merge } from "lodash";
 import Paths from "./path";
 import { readTomlFile, writeTomlFile } from "./utils/toml";
 
@@ -25,9 +26,12 @@ export const readConfigFile = async (): Promise<SettingsType> => {
 
   try {
     // try to read the config file
+    await Paths.initialize();
     const data = await readTomlFile<SettingsType>(Paths.getPath("configDirectory") + "config.toml");
     if (data) {
       existingData = data;
+      console.log("existing data");
+      console.log(existingData);
     }
   } catch (error) {
     // file does not exist, called function will throw error
@@ -37,11 +41,12 @@ export const readConfigFile = async (): Promise<SettingsType> => {
 
   // merge the existing data with the default settings
   // existing data will overwrite the default settings for the properties that exist
-  const mergedSettings = { ...defaultSettings, ...existingData };
+  const mergedSettings = merge({}, defaultSettings, existingData);
 
   return mergedSettings;
 };
 
 export const writeConfigFile = async (settingsValues: SettingsType): Promise<void> => {
   await writeTomlFile<SettingsType>(Paths.getPath("configDirectory") + "config.toml", settingsValues);
+  console.debug("Settings file written successfully.");
 };
diff --git a/src/pages/testing.tsx b/src/pages/testing.tsx
index 298a0c6..506d982 100644
--- a/src/pages/testing.tsx
+++ b/src/pages/testing.tsx
@@ -29,7 +29,28 @@ export default function Testing() {
       >
         reset settings
       </Button>
-      <Button onClick={() => {}}>update settings</Button>
+      <Button
+        onClick={() => {
+          updateSettings({
+            display: {
+              dark_mode: false as boolean,
+              accent_color: "#8ab4f8" as string,
+              transition_duration: 200 as number,
+              radius: 8 as number,
+              window_height: 60 as number,
+              window_width: 400 as number,
+              font_family: "monospace" as string,
+              font_scaling: 100,
+            },
+            window: {
+              minimize_button: true as boolean,
+              maximize_button: true as boolean,
+            },
+          });
+        }}
+      >
+        update settings
+      </Button>
       <Button
         onClick={() => {
           console.log(settings);