diff --git a/frontend-new/index.html b/frontend-new/index.html
index c5e577a7..443b294a 100644
--- a/frontend-new/index.html
+++ b/frontend-new/index.html
@@ -13,7 +13,7 @@
     <meta name="application-name" content="Hangar | PaperMC" />
     <meta name="theme-color" content="#ffffff" />
   </head>
-  <body class="backgroundBody text-[#262626] dark:text-[#E0E6f0]">
+  <body class="background-body text-[#262626] dark:text-[#E0E6f0]">
     <div id="app"></div>
     <script>
       (function () {
diff --git a/frontend-new/src/components/Footer.vue b/frontend-new/src/components/Footer.vue
index 587e8c35..d51761b9 100644
--- a/frontend-new/src/components/Footer.vue
+++ b/frontend-new/src/components/Footer.vue
@@ -13,19 +13,19 @@
                     <router-link
                         :to="{ name: 'staff' }"
                         class="flex items-center rounded-md px-6 py-2"
-                        hover="text-primary100 bg-primary50"
+                        hover="text-primary-100 bg-primary-50"
                     >About Hangar
                     </router-link>
                     <router-link
                         :to="{ name: 'staff' }"
                         class="flex items-center rounded-md px-6 py-2"
-                        hover="text-primary100 bg-primary50"
+                        hover="text-primary-100 bg-primary-50"
                     >Imprint
                     </router-link>
                     <router-link
                         :to="{ name: 'staff' }"
                         class="flex items-center rounded-md px-6 py-2"
-                        hover="text-primary100 bg-primary50"
+                        hover="text-primary-100 bg-primary-50"
                     >Privacy Policy
                     </router-link>
                 </div>
@@ -33,7 +33,7 @@
         </div>
         <div class="footerShape absolute z-1 left-0 right-0 top-0 overflow-hidden" style="transform: scaleY(-1) scaleX(-1);">
          <!--- <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-31.3l-40 4.4c-40 4.8-120 13.1-200 0-80-13.6-160-48.6-240-66.7-80-17.8-160-17.8-240-8.8-80 8.6-160 26.9-240 8.8-80-17.7-160-71.1-200-97.7L0 0v218z"></path></svg>
-     -->       <svg class="fill-backgroundLight10 dark:fill-backgroundDark80 h-180px min-w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-71.3l-40 0,961 V 0,480 C 268.5,456.5 537,433 857,433 C 1177,433 1548.5,456.5 1920,480 C 1920,480 1920,961 1920,961 Z"></path></svg>
+     -->       <svg class="fill-background-light-10 dark:fill-background-dark-80 h-180px min-w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-71.3l-40 0,961 V 0,480 C 268.5,456.5 537,433 857,433 C 1177,433 1548.5,456.5 1920,480 C 1920,480 1920,961 1920,961 Z"></path></svg>
         </div>
     </footer>
 </template>
diff --git a/frontend-new/src/components/Header.vue b/frontend-new/src/components/Header.vue
index 0ebf7a11..30bc6c19 100644
--- a/frontend-new/src/components/Header.vue
+++ b/frontend-new/src/components/Header.vue
@@ -7,10 +7,10 @@ import {useInitialState} from "~/composables/useInitialState";
 import {useInternalApi} from "~/composables/useApi";
 
 // not sure if they need to be part of the initial state, since we directly render them, would only save a request on page switch at most, but I guess its a good demonstration
- /* const announcements = await useInitialState<AnnouncementObject[]>(
+  /* const announcements = await useInitialState<AnnouncementObject[]>(
     "announcements",
     async () => await useInternalApi<AnnouncementObject[]>("data/announcements", false)
-); */  // TODO: This breaks click events
+);  */ // TODO: This breaks click events
 
 const theme = useThemeStore()
 const { t } = useI18n();
@@ -28,7 +28,7 @@ const loggedIn = false; // TODO
     <template v-if="announcements">
         <Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement"/>
     </template>
-    <header class="backgroundHeader">
+    <header class="background-header">
         <div class="inner-header flex items-center max-w-1200px mx-auto justify-between h-65px w-[calc(100%-40px)]">
             <div class="logo-and-nav flex items-center">
                 <Popover class="relative">
@@ -47,13 +47,13 @@ const loggedIn = false; // TODO
                         leave-from-class="translate-y-0 opacity-100"
                         leave-to-class="translate-y-1 opacity-0"
                     >
-                        <PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max backgroundHeader top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-primary100 text-xs p-[20px]">
-                            <p class="text-base font-semibold colorPrimary mb-4">Hangar</p>
+                        <PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max background-header top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-primary-100 text-xs p-[20px]">
+                            <p class="text-base font-semibold color-primary mb-4">Hangar</p>
                             <div class="grid grid-cols-2">
                                 <router-link
                                     :to="{ name: 'index' }"
                                     class="flex items-center rounded-md px-6 py-2"
-                                    hover="text-primary100 bg-primary50"
+                                    hover="text-primary-100 bg-primary-50"
                                 >
                                     <icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
                                     Home
@@ -61,48 +61,48 @@ const loggedIn = false; // TODO
                                 <router-link
                                     :to="{ name: 'staff' }"
                                     class="flex items-center rounded-md px-6 py-2"
-                                    hover="text-primary100 bg-primary50"
+                                    hover="text-primary-100 bg-primary-50"
                                 >
                                     <icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
                                     Team
                                 </router-link>
                             </div>
 
-                            <p class="text-base font-semibold colorPrimary mb-4 mt-10">More from Paper</p>
+                            <p class="text-base font-semibold color-primary mb-4 mt-10">More from Paper</p>
                             <div class="grid grid-cols-2">
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.home") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-forum class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.forums") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-code-braces class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.code") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-book-open class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.docs") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-language-java class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.javadocs") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-puzzle class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.hangar") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-download-circle class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.downloads") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.community") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-primary100 bg-primary50">
+                                <a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-primary-100 bg-primary-50">
                                     <icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
                                     {{ t("nav.hangar.auth") }}
                                 </a>
diff --git a/frontend-new/src/composables/useInitialState.ts b/frontend-new/src/composables/useInitialState.ts
index b9ad6bd5..d79fc8ac 100644
--- a/frontend-new/src/composables/useInitialState.ts
+++ b/frontend-new/src/composables/useInitialState.ts
@@ -4,9 +4,11 @@ import { useContext } from "vite-ssr/vue";
 
 export async function useInitialState<T>(
     key: string,
-    handler: (type: "server" | "client") => Promise<T>, blocking = false
+    handler: (type: "server" | "client") => Promise<T>,
+    blocking = false
 ) {
-  const { initialState } = useContext();
+
+    const { initialState } = useContext();
   const responseValue = ref(initialState[key] || null) as Ref<T | null>;
 
   // remove data from initialState when component unmounts or deactivates
@@ -15,6 +17,8 @@ export async function useInitialState<T>(
       initialState[key] = null;
     }
   };
+
+
   onUnmounted(removeState);
   onDeactivated(removeState);
 
diff --git a/frontend-new/windi.config.ts b/frontend-new/windi.config.ts
index e0108565..f1fb4762 100644
--- a/frontend-new/windi.config.ts
+++ b/frontend-new/windi.config.ts
@@ -35,19 +35,19 @@ export default defineConfig({
         },
       },
       colors: {
-        backgroundDark90: '#111111',
-        backgroundDark80: '#181a1b',
-        backgroundLight10: '#f8faff',
-        backgroundLight0: '#ffffff',
-        primary100: '#004ee9',
-        primary70: '#aec9ff',
-        primary50: '#ecf2fb'
+        'background-dark-90': '#111111',
+        'background-dark-80': '#181a1b',
+        'background-light-10': '#f8faff',
+        'background-light-0': '#ffffff',
+        'primary-100': '#004ee9',
+        'primary-70': '#aec9ff',
+        'primary-50': '#ecf2fb'
       },
     },
   },
   shortcuts: {
-      'backgroundHeader': 'bg-backgroundLight0 dark:bg-backgroundDark90',
-      'backgroundBody': 'bg-backgroundLight10 dark:bg-backgroundDark80',
-      'colorPrimary': 'text-primary100 dark:text-primary70',
+      'background-header': 'bg-background-light-0 dark:bg-background-dark-90',
+      'background-body': 'bg-background-light-10 dark:bg-background-dark-80',
+      'color-primary': 'text-primary-100 dark:text-primary-70',
   },
 });
