diff --git a/src/components/Generic/Layout.tsx b/src/components/Generic/Layout.tsx
index d0e5729..d79acea 100644
--- a/src/components/Generic/Layout.tsx
+++ b/src/components/Generic/Layout.tsx
@@ -6,7 +6,7 @@ export const Layout = () => {
   return (
     <Box
       sx={{
-        backgroundColor: "#8ab4f8",
+        // backgroundColor: "#8ab4f8",
         display: "flex",
         flexDirection: "column",
         height: "100vh",
diff --git a/src/components/HeaderBar/Settings/DevChip.tsx b/src/components/HeaderBar/Settings/DevChip.tsx
new file mode 100644
index 0000000..0eb3b80
--- /dev/null
+++ b/src/components/HeaderBar/Settings/DevChip.tsx
@@ -0,0 +1,15 @@
+import { Chip } from "@mui/material";
+
+export const DevChip = () => {
+  return (
+    <Chip
+      color="warning"
+      label="Dev"
+      size="small"
+      sx={{
+        mr: 1,
+      }}
+      variant="outlined"
+    />
+  );
+};
diff --git a/src/components/HeaderBar/Settings/Settings.tsx b/src/components/HeaderBar/Settings/Settings.tsx
index fcd021a..0cd92a8 100644
--- a/src/components/HeaderBar/Settings/Settings.tsx
+++ b/src/components/HeaderBar/Settings/Settings.tsx
@@ -22,7 +22,7 @@ export const Settings = () => {
   // states
   const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
   const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false);
-  const [subTabValue, setSubTabValue] = useState("display");
+  const [subTabValue, setSubTabValue] = useState("style");
   const [applyLoading, setApplyLoading] = useState<boolean>(false);
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
 
diff --git a/src/components/HeaderBar/Settings/SettingsItem.tsx b/src/components/HeaderBar/Settings/SettingsItem.tsx
index b04cfd4..eb0eeac 100644
--- a/src/components/HeaderBar/Settings/SettingsItem.tsx
+++ b/src/components/HeaderBar/Settings/SettingsItem.tsx
@@ -1,19 +1,15 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { FC, ReactNode } from "react";
 
 interface SettingsItemProps {
-  settingsDescription: ReactNode;
-  settingsInput?: ReactNode;
-  settingsInputBottom?: ReactNode;
-  settingsInputLong?: ReactNode;
+  defaultText?: string;
+  description: ReactNode;
+  input?: ReactNode;
+  inputBottom?: ReactNode;
+  inputLong?: ReactNode;
 }
 
-export const SettingsItem: FC<SettingsItemProps> = ({
-  settingsDescription,
-  settingsInput,
-  settingsInputBottom,
-  settingsInputLong,
-}) => {
+export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description, input, inputBottom, inputLong }) => {
   return (
     <Box
       sx={{
@@ -28,8 +24,24 @@ export const SettingsItem: FC<SettingsItemProps> = ({
           width: "100%",
         }}
       >
-        <Box sx={{ width: "60%" }}>{settingsDescription}</Box>
-        {settingsInput && (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            width: "60%",
+          }}
+        >
+          {description}
+          {defaultText && (
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: {defaultText}
+            </Typography>
+          )}
+        </Box>
+        {input && (
           <Box
             sx={{
               display: "flex",
@@ -38,21 +50,21 @@ export const SettingsItem: FC<SettingsItemProps> = ({
               width: "30%",
             }}
           >
-            {settingsInput}
+            {input}
           </Box>
         )}
-        {settingsInputLong && (
+        {inputLong && (
           <Box
             sx={{
               display: "flex",
               justifyContent: "flex-end",
             }}
           >
-            {settingsInputLong}
+            {inputLong}
           </Box>
         )}
       </Box>
-      {settingsInputBottom && (
+      {inputBottom && (
         <Box
           sx={{
             alignItems: "center",
@@ -62,7 +74,7 @@ export const SettingsItem: FC<SettingsItemProps> = ({
             px: 2,
           }}
         >
-          {settingsInputBottom}
+          {inputBottom}
         </Box>
       )}
     </Box>
diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
deleted file mode 100644
index e9c1552..0000000
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
-import { useAtom } from "jotai";
-import { FC } from "react";
-import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
-import { BetaChip } from "../BetaChip";
-import { CategoryTitle } from "../CategoryTitle";
-import { SettingsItem } from "../SettingsItem";
-
-interface SettingsTabBackgroundProps {
-  sx?: any;
-}
-
-export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) => {
-  // atoms
-  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
-
-  const handleSettingsBackgroundValueChange = (
-    settingKey: string,
-    settingValue: boolean | number | string | number[],
-  ) => {
-    const newSettings = {
-      ...stagedSettings,
-      background: {
-        ...stagedSettings.background,
-        [settingKey]: settingValue,
-      },
-    };
-    setStagedSettings(newSettings);
-  };
-
-  return (
-    <Box sx={{ sx }}>
-      <CategoryTitle title="Basic styles" />
-      <SettingsItem
-        settingsDescription={
-          <Box
-            sx={{
-              display: "flex",
-            }}
-          >
-            <BetaChip />
-            <Typography>Dark mode</Typography>
-          </Box>
-        }
-        settingsInput={
-          <Switch
-            checked={stagedSettings.style.dark_mode}
-            name="dark_mode"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, e.target.checked);
-            }}
-          />
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography>Accent color</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: #8ab4f8
-            </Typography>
-          </>
-        }
-        settingsInput={
-          <TextField
-            name="accent_color"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="color"
-            value={stagedSettings.style.accent_color}
-            variant="standard"
-          />
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography>Font family</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: Monospace
-            </Typography>
-          </>
-        }
-        settingsInputLong={
-          <TextField
-            fullWidth
-            name="font_family"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
-            }}
-            select
-            size="small"
-            sx={{
-              maxWidth: "100%",
-            }}
-            value={stagedSettings.style.font_family || "monospace"}
-            variant="outlined"
-          >
-            <MenuItem value="monospace">Monospace</MenuItem>
-            <MenuItem value="sans_serif">Sans Serif</MenuItem>
-            <MenuItem value="comic_sans">Comic Sans</MenuItem>
-            <MenuItem value="system_font">System font</MenuItem>
-          </TextField>
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography>Font scaling</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 100%
-            </Typography>
-          </>
-        }
-        settingsInputBottom={
-          <Slider
-            marks={[
-              {
-                value: 80,
-                label: "80%",
-              },
-              {
-                value: 90,
-                label: "90%",
-              },
-              {
-                value: 100,
-                label: "100%",
-              },
-              {
-                value: 110,
-                label: "110%",
-              },
-              {
-                value: 120,
-                label: "120%",
-              },
-            ]}
-            min={80}
-            max={120}
-            name="font_scaling"
-            onChangeCommitted={(e, value) => {
-              handleSettingsBackgroundValueChange("font_scaling", value);
-            }}
-            step={10}
-            value={stagedSettings.style.font_scaling}
-            valueLabelDisplay="auto"
-          />
-        }
-      />
-      <CategoryTitle title="Advanced settings" />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography component="div">
-              <Chip
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Transition duration
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 200ms
-            </Typography>
-          </>
-        }
-        settingsInput={
-          <TextField
-            InputProps={{
-              endAdornment: <InputAdornment position="end">ms</InputAdornment>,
-              inputProps: { min: 0, max: 100, step: 1 },
-            }}
-            name="transition_duration"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="number"
-            value={stagedSettings.style.transition_duration}
-            variant="standard"
-          />
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography component="div">
-              <Chip
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Radius
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 8px
-            </Typography>
-          </>
-        }
-        settingsInput={
-          <TextField
-            InputProps={{
-              endAdornment: <InputAdornment position="end">px</InputAdornment>,
-              inputProps: { min: 0, max: 100, step: 1 },
-            }}
-            name="radius"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="number"
-            value={stagedSettings.style.radius}
-            variant="standard"
-          />
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography component="div">
-              <Chip
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Window height
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 60%
-            </Typography>
-          </>
-        }
-        settingsInput={
-          <TextField
-            InputProps={{
-              endAdornment: <InputAdornment position="end">%</InputAdornment>,
-              inputProps: { min: 0, max: 100, step: 1 },
-            }}
-            name="window_height"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="number"
-            value={stagedSettings.style.window_height}
-            variant="standard"
-          />
-        }
-      />
-      <SettingsItem
-        settingsDescription={
-          <>
-            <Typography component="div">
-              <Chip
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Window width
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 400px
-            </Typography>
-          </>
-        }
-        settingsInput={
-          <TextField
-            InputProps={{
-              endAdornment: <InputAdornment position="end">px</InputAdornment>,
-              inputProps: { min: 0, max: 10000, step: 1 },
-            }}
-            name="window_width"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="number"
-            value={stagedSettings.style.window_width}
-            variant="standard"
-          />
-        }
-      />
-    </Box>
-  );
-};
diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx
index f50ed36..513d4b9 100644
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx
+++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx
@@ -5,6 +5,7 @@ import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
 import { BetaChip } from "../BetaChip";
 import { CategoryTitle } from "../CategoryTitle";
 import { SettingsItem } from "../SettingsItem";
+import { DevChip } from "../DevChip";
 
 interface SettingsTabStyleProps {
   sx?: any;
@@ -14,7 +15,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
   // atoms
   const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
 
-  const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
+  const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
     const newSettings = {
       ...stagedSettings,
       display: {
@@ -29,43 +30,37 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
     <Box sx={{ sx }}>
       <CategoryTitle title="Basic styles" />
       <SettingsItem
-        settingsDescription={
-          <Box
-            sx={{
-              display: "flex",
-            }}
-          >
-            <BetaChip />
-            <Typography>Dark mode</Typography>
-          </Box>
+        defaultText="On"
+        description={
+          <>
+            <Typography>
+              <BetaChip />
+              Dark mode
+            </Typography>
+          </>
         }
-        settingsInput={
+        input={
           <Switch
             checked={stagedSettings.style.dark_mode}
             name="dark_mode"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, e.target.checked);
+              handleSettingsStyleValueChange(e.target.name, e.target.checked);
             }}
           />
         }
       />
       <SettingsItem
-        settingsDescription={
+        defaultText="#8ab4f8"
+        description={
           <>
             <Typography>Accent color</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: #8ab4f8
-            </Typography>
           </>
         }
-        settingsInput={
+        input={
           <TextField
             name="accent_color"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, e.target.value);
+              handleSettingsStyleValueChange(e.target.name, e.target.value);
             }}
             sx={{
               width: "100%",
@@ -78,23 +73,18 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        defaultText="Monospace"
+        description={
           <>
             <Typography>Font family</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: Monospace
-            </Typography>
           </>
         }
-        settingsInputLong={
+        inputLong={
           <TextField
             fullWidth
             name="font_family"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, e.target.value);
+              handleSettingsStyleValueChange(e.target.name, e.target.value);
             }}
             select
             size="small"
@@ -112,18 +102,13 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        defaultText="100%"
+        description={
           <>
             <Typography>Font scaling</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 100%
-            </Typography>
           </>
         }
-        settingsInputBottom={
+        inputBottom={
           <Slider
             marks={[
               {
@@ -151,7 +136,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             max={120}
             name="font_scaling"
             onChangeCommitted={(e, value) => {
-              handleSettingsDisplayValueChange("font_scaling", value);
+              handleSettingsStyleValueChange("font_scaling", value);
             }}
             step={10}
             value={stagedSettings.style.font_scaling}
@@ -161,29 +146,16 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
       />
       <CategoryTitle title="Advanced settings" />
       <SettingsItem
-        settingsDescription={
+        defaultText="200ms"
+        description={
           <>
             <Typography component="div">
-              <Chip
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
+              <DevChip />
               Transition duration
             </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 200ms
-            </Typography>
           </>
         }
-        settingsInput={
+        input={
           <TextField
             InputProps={{
               endAdornment: <InputAdornment position="end">ms</InputAdornment>,
@@ -191,7 +163,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             }}
             name="transition_duration"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
+              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
             }}
             sx={{
               width: "100%",
@@ -204,7 +176,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography component="div">
               <Chip
@@ -226,7 +198,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             </Typography>
           </>
         }
-        settingsInput={
+        input={
           <TextField
             InputProps={{
               endAdornment: <InputAdornment position="end">px</InputAdornment>,
@@ -234,7 +206,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             }}
             name="radius"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
+              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
             }}
             sx={{
               width: "100%",
@@ -247,7 +219,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography component="div">
               <Chip
@@ -269,7 +241,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             </Typography>
           </>
         }
-        settingsInput={
+        input={
           <TextField
             InputProps={{
               endAdornment: <InputAdornment position="end">%</InputAdornment>,
@@ -277,7 +249,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             }}
             name="window_height"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
+              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
             }}
             sx={{
               width: "100%",
@@ -290,7 +262,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography component="div">
               <Chip
@@ -312,7 +284,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             </Typography>
           </>
         }
-        settingsInput={
+        input={
           <TextField
             InputProps={{
               endAdornment: <InputAdornment position="end">px</InputAdornment>,
@@ -320,7 +292,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
             }}
             name="window_width"
             onChange={(e) => {
-              handleSettingsDisplayValueChange(e.target.name, parseFloat(e.target.value));
+              handleSettingsStyleValueChange(e.target.name, parseFloat(e.target.value));
             }}
             sx={{
               width: "100%",
diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
index a68e0c7..ac6b893 100644
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
+++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
@@ -28,12 +28,18 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
     <Box sx={{ sx }}>
       <CategoryTitle title="Fullscreen" />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography>Fullscreen on startup</Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: On
+            </Typography>
           </>
         }
-        settingsInput={
+        input={
           <Switch
             checked={stagedSettings.window.start_fullscreen}
             name="start_fullscreen"
@@ -45,12 +51,18 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
       />
       <CategoryTitle title="Titlebar Buttons" />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography>Minimize button</Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: On
+            </Typography>
           </>
         }
-        settingsInput={
+        input={
           <Switch
             checked={stagedSettings.window.minimize_button}
             name="minimize_button"
@@ -61,12 +73,12 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        settingsDescription={
+        description={
           <>
             <Typography>Maximize button</Typography>
           </>
         }
-        settingsInput={
+        input={
           <Switch
             checked={stagedSettings.window.maximize_button}
             name="maximize_button"