diff --git a/src/components/App.css b/src/components/App.css
new file mode 100644
index 0000000..22474cb
--- /dev/null
+++ b/src/components/App.css
@@ -0,0 +1,38 @@
+@font-face {
+  font-family: "SpaceGrotesk";
+  src:
+    local("SpaceGrotesk"),
+    url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Inter";
+  src:
+    local("Inter"),
+    url("../fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+}
+
+html,
+body {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#root {
+  box-sizing: border-box;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#header,
+#footer {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+#body {
+  flex-grow: 1;
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0f15d79..5162423 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -5,6 +5,7 @@ import { Provider, type ProviderProps } from "react-redux"
 import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
 import { type Action } from "redux"
 
+import "./App.css"
 import { InactiveDialog, ScreenTimeDialog } from "../features"
 import { useCountdown, useEventListener, useLocation } from "../hooks"
 // import "../scripts"
@@ -84,30 +85,6 @@ const App = <A extends Action = Action, S = unknown>({
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <style>{`
-        html, body {
-          box-sizing: border-box;
-          height: 100%;
-          padding: 0;
-          margin: 0;
-        }
-
-        #root {
-          box-sizing: border-box;
-          min-height: 100%;
-          display: flex;
-          flex-direction: column;
-        }
-
-        #header, #footer {
-          flex-grow: 0;
-          flex-shrink: 0;
-        }
-
-        #body {
-          flex-grow: 1;
-        }   
-      `}</style>
       <Provider store={store}>
         <InactiveDialog open={isIdle} onClose={resetIdleSeconds} />
         <ScreenTimeDialog
diff --git a/src/fonts/Inter-VariableFont_slnt,wght.ttf b/src/fonts/Inter-VariableFont_slnt,wght.ttf
new file mode 100644
index 0000000..ec3164e
Binary files /dev/null and b/src/fonts/Inter-VariableFont_slnt,wght.ttf differ
diff --git a/src/fonts/SpaceGrotesk-VariableFont_wght.ttf b/src/fonts/SpaceGrotesk-VariableFont_wght.ttf
new file mode 100644
index 0000000..cf0b503
Binary files /dev/null and b/src/fonts/SpaceGrotesk-VariableFont_wght.ttf differ
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index f07b593..93d4dcb 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -11,6 +11,7 @@ export default interface Color {
   50: string
 }
 
+// primary / teacher
 export const primary: Color = {
   900: "#A60039",
   800: "#BE0947",
@@ -23,7 +24,9 @@ export const primary: Color = {
   100: "#FF6699",
   50: "#FF9ABC",
 }
+export { primary as teacher }
 
+// secondary / indy
 export const secondary: Color = {
   900: "#BF9400",
   800: "#CFA30B",
@@ -36,7 +39,9 @@ export const secondary: Color = {
   100: "#FFE382",
   50: "#FFEDAD",
 }
+export { secondary as indy }
 
+// tertiary / student
 export const tertiary: Color = {
   900: "#01668C",
   800: "#007FAF",
@@ -49,3 +54,4 @@ export const tertiary: Color = {
   100: "#4DCEFF",
   50: "#85DDFF",
 }
+export { tertiary as student }
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index 2c86954..d82e9dd 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -2,6 +2,7 @@ import {
   createTheme,
   type PaletteColor,
   type PaletteOptions,
+  type PaletteColorOptions,
 } from "@mui/material"
 import { common, red } from "@mui/material/colors"
 
@@ -13,6 +14,9 @@ declare module "@mui/material/styles" {
     tertiary: PaletteColor
     white: PaletteColor
     black: PaletteColor
+    teacher: PaletteColor
+    student: PaletteColor
+    indy: PaletteColor
   }
   interface Palette extends CustomPaletteColors {}
   interface PaletteOptions extends CustomPaletteColors {}
@@ -22,6 +26,9 @@ export interface PropsColorOverrides {
   tertiary: true
   white: true
   black: true
+  teacher: true
+  student: true
+  indy: true
 }
 
 declare module "@mui/material" {
@@ -57,37 +64,36 @@ const {
   palette: { augmentColor },
 } = createTheme()
 
+const teacher: PaletteColorOptions = {
+  main: primary[500],
+  contrastText: common.white,
+}
+
+const student: PaletteColorOptions = {
+  main: tertiary[500],
+  contrastText: common.white,
+}
+
+const indy: PaletteColorOptions = {
+  main: secondary[500],
+  contrastText: common.black,
+}
+
 const palette: PaletteOptions = {
-  primary: {
-    main: primary[500],
-    contrastText: common.white,
-  },
-  secondary: {
-    main: secondary[500],
-    contrastText: common.black,
-  },
-  tertiary: augmentColor({
-    color: {
-      main: tertiary[500],
-      contrastText: common.white,
-    },
-  }),
-  white: augmentColor({
-    color: {
-      main: common.white,
-    },
-  }),
-  black: augmentColor({
-    color: {
-      main: common.black,
-    },
-  }),
-  info: {
-    main: "#f1ecec",
-  },
-  error: {
-    main: red.A700,
-  },
+  // primary / teacher
+  primary: teacher,
+  teacher: augmentColor({ color: teacher }),
+  // secondary / indy
+  secondary: indy,
+  indy: augmentColor({ color: indy }),
+  // tertiary / student
+  tertiary: augmentColor({ color: student }),
+  student: augmentColor({ color: student }),
+  // other
+  white: augmentColor({ color: { main: common.white } }),
+  black: augmentColor({ color: { main: common.black } }),
+  info: { main: "#f1ecec" },
+  error: { main: red.A700 },
 }
 
 export default palette