diff --git a/frontend-new/src/components/Announcement.vue b/frontend-new/src/components/Announcement.vue
index 5713a918..4e99beac 100644
--- a/frontend-new/src/components/Announcement.vue
+++ b/frontend-new/src/components/Announcement.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { Announcement } from "hangar-api";
+import type {Announcement} from "hangar-api";
 
 const props = defineProps<{ announcement: Announcement }>();
-const { announcement } = toRefs(props);
+const {announcement} = toRefs(props);
 </script>
 
 <template>
-  <div :style="'background-color:' + announcement.color" class="mb-2 p-2 text-center">
-    {{ announcement.text }}
-  </div>
+    <div :style="'background-color:' + announcement.color" class="mb-2 p-2 text-center">
+        {{ announcement.text }}
+    </div>
 </template>
diff --git a/frontend-new/src/components/Footer.vue b/frontend-new/src/components/Footer.vue
index ad390b1b..89942ead 100644
--- a/frontend-new/src/components/Footer.vue
+++ b/frontend-new/src/components/Footer.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts"></script>
 
 <template>
-    <footer class="relative flex items-end mt-10 bg-gradient-to-r from-[#004ee9] to-[#367aff] px-8 pt-20 pb-2 text-[#f8faff] min-h-70">
+    <footer
+        class="relative flex items-end mt-10 bg-gradient-to-r from-[#004ee9] to-[#367aff] px-8 pt-20 pb-2 text-[#f8faff] min-h-70">
         <div class="footerContent w-screen">
-            <div class="flex justify-center flex-col md:flex-row justify-center gap-y-6 md:gap-y-0 md:gap-x-6 max-w-1200px m-auto">
+            <div
+                class="flex justify-center flex-col md:flex-row justify-center gap-y-6 md:gap-y-0 md:gap-x-6 max-w-1200px m-auto">
                 <div class="md:(w-1/3 min-w-1/3 max-w-1/3)">
                     <p class="text-xl font-bold text-center mb-2">About Hangar</p>
-                    <p>Hangar is an NFT plugin repository, hosted in the blockchain. Every plugin is unique and owned just by you. Can you use it on your server? No! You only own the receipt. And that's what makes Hangar so eco-friendly.</p>
+                    <p>Hangar is an NFT plugin repository, hosted in the blockchain. Every plugin is unique and owned
+                        just by you. Can you use it on your server? No! You only own the receipt. And that's what makes
+                        Hangar so eco-friendly.</p>
                 </div>
                 <div class="md:(w-1/3 min-w-1/3 max-w-1/3)">
                     <p class="text-xl font-bold text-center mb-2">Links</p>
@@ -56,9 +60,17 @@
                 </div>
             </div>
         </div>
-        <div class="footerShape absolute z-1 left-0 right-0 top-0 overflow-hidden pointer-events-none" 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-background-light-10 dark:fill-background-dark-80 h-240px min-w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-61.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
+class="footerShape absolute z-1 left-0 right-0 top-0 overflow-hidden pointer-events-none"
+             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-background-light-10 dark:fill-background-dark-80 h-240px min-w-full"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none">
+                <path
+                    d="M0 218h1200v-61.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 aa3e2ed8..4c105e61 100644
--- a/frontend-new/src/components/Header.vue
+++ b/frontend-new/src/components/Header.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type {Announcement as AnnouncementObject} from "hangar-api";
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue'
 import type {Ref} from 'vue';
 import {useThemeStore} from '~/store/theme'
 import {useAPI} from '~/store/api'
 
 
 const theme = useThemeStore()
-const { t } = useI18n();
+const {t} = useI18n();
 
 const api = useAPI();
 
@@ -17,14 +17,14 @@ const announcements: Ref<AnnouncementObject[]> = ref(empty);
 
 api.getAnnouncements()
     .then((value) => {
-        if(value){
+        if (value) {
             const firstObject: AnnouncementObject | null = value[0];
-            if(firstObject){
-                console.log(`Res: ${  firstObject.text}`)
-            }else{
+            if (firstObject) {
+                console.log(`Res: ${firstObject.text}`)
+            } else {
                 console.log("Res is undefined")
             }
-        }else{
+        } else {
             console.log("value is null")
         }
 
@@ -32,7 +32,6 @@ api.getAnnouncements()
     });
 
 
-
 const navBarLinks = [
     {link: 'index', label: 'Home'},
     {link: 'staff', label: 'Team'},
@@ -64,7 +63,8 @@ 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 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-top-primary text-xs p-[20px]">
+                        <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-top-primary text-xs p-[20px]">
                             <p class="text-base font-semibold color-primary mb-4">Hangar</p>
                             <div class="grid grid-cols-2">
                                 <router-link
@@ -87,39 +87,58 @@ const loggedIn = false; // TODO
 
                             <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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[1.2em]"/>
                                     {{ t("nav.hangar.javadocs") }}
                                 </a>
-                                <a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[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-primary-100 bg-primary-50">
+                                <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 text-[1.2em]"/>
                                     {{ t("nav.hangar.auth") }}
                                 </a>
@@ -149,11 +168,15 @@ const loggedIn = false; // TODO
                     <icon-mdi-white-balance-sunny v-else class="text-[1.2em]"></icon-mdi-white-balance-sunny>
                 </button>
                 <div v-if="!loggedIn" class="flex">
-                    <a class="flex items-center rounded-md px-2 py-2" href="https://hangar-auth.benndorf.dev/account/login" hover="text-primary-100 bg-primary-50">
+                    <a
+class="flex items-center rounded-md px-2 py-2"
+                       href="https://hangar-auth.benndorf.dev/account/login" hover="text-primary-100 bg-primary-50">
                         <icon-mdi-key-outline class="mr-1 text-[1.2em]"/>
                         {{ t("nav.login") }}
                     </a>
-                    <a class="flex items-center rounded-md px-2 py-2" href="https://hangar-auth.benndorf.dev/account/signup/" hover="text-primary-100 bg-primary-50">
+                    <a
+class="flex items-center rounded-md px-2 py-2"
+                       href="https://hangar-auth.benndorf.dev/account/signup/" hover="text-primary-100 bg-primary-50">
                         <icon-mdi-clipboard-outline class="mr-1 text-[1.2em]"/>
                         {{ t("nav.signup") }}
                     </a>
diff --git a/frontend-new/src/layouts/default.vue b/frontend-new/src/layouts/default.vue
index 8ce20f53..657ffe02 100644
--- a/frontend-new/src/layouts/default.vue
+++ b/frontend-new/src/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
-  <main style="min-height: 60vh;">
-    <Header />
-      <div style="min-height: 60vh;">
-          <router-view v-bind="$attrs" />
-      </div>
-    <Footer />
-  </main>
+    <main style="min-height: 60vh;">
+        <Header/>
+        <div style="min-height: 60vh;">
+            <router-view v-bind="$attrs"/>
+        </div>
+        <Footer/>
+    </main>
 </template>
diff --git a/frontend-new/src/layouts/error.vue b/frontend-new/src/layouts/error.vue
index 0c0d67a6..6ceb8fe1 100644
--- a/frontend-new/src/layouts/error.vue
+++ b/frontend-new/src/layouts/error.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <main>Error</main>
+    <main>Error</main>
 </template>
diff --git a/frontend-new/src/pages/index.vue b/frontend-new/src/pages/index.vue
index 62f93d17..96b01b9b 100644
--- a/frontend-new/src/pages/index.vue
+++ b/frontend-new/src/pages/index.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/vue";
 
-const { t } = useI18n();
+const {t} = useI18n();
 
 const sorters = [
-    {id: 'stars', label: t("project.sorting.mostStars") },
-    {id: 'downloads', label: t("project.sorting.mostDownloads") },
-    {id: 'views', label: t("project.sorting.mostViews") },
-    {id: 'newest', label: t("project.sorting.newest") },
-    {id: 'updated', label: t("project.sorting.recentlyUpdated") },
+    {id: 'stars', label: t("project.sorting.mostStars")},
+    {id: 'downloads', label: t("project.sorting.mostDownloads")},
+    {id: 'views', label: t("project.sorting.mostViews")},
+    {id: 'newest', label: t("project.sorting.newest")},
+    {id: 'updated', label: t("project.sorting.recentlyUpdated")},
 ];
 
 const versions = [
@@ -51,101 +51,121 @@ const licenses = [
 </script>
 
 <template>
-  <div class="flex flex-col items-center pt-10">
-      <h2 class="text-3xl font-bold uppercase">Find your favorite plugins</h2>
-      <!-- Search Bar & Sorting button -->
-      <div class="flex flex-row mt-6 rounded-md big-box-shadow">
-          <!-- Search Bar -->
-          <input class="rounded-l-md p-3 w-[80vw] max-w-800px focus-visible:(border-white) text-black" type="text" placeholder="Search in 1 projects, proudly made by the community...">
-          <!-- Sorting Button -->
-          <div class="rounded-r-md w-100px bg-gradient-to-r from-[#004ee9] to-[#367aff]">
-              <Menu>
-                  <MenuButton class="rounded-r-md h-1/1 text-left font-semibold flex flex-row items-center gap-2 text-white p-2">
-                      <span>Sort by</span>
-                      <icon-mdi-sort-variant class="text-[1.2em] pointer-events-none overflow-hidden"/>
-                  </MenuButton>
-                  <transition
-                      enter-active-class="transition duration-100 ease-out"
-                      enter-from-class="transform scale-95 opacity-0"
-                      enter-to-class="transform scale-100 opacity-100"
-                      leave-active-class="transition duration-75 ease-out"
-                      leave-from-class="transform scale-100 opacity-100"
-                      leave-to-class="transform scale-95 opacity-0"
-                  >
-                      <MenuItems class="absolute flex flex-col z-10 background-header shadow1 rounded-md border-top-primary">
-                          <MenuItem
-                              v-for='sorter in sorters'
-                              :key='sorter.id'
-                              v-slot="{ active }">
-                              <a :class='{ "bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white": active }' class="p-2">
-                                  {{ sorter.label }}
-                              </a>
-                          </MenuItem>
-                      </MenuItems>
-                  </transition>
-              </Menu>
-          </div>
-      </div>
+    <div class="flex flex-col items-center pt-10">
+        <h2 class="text-3xl font-bold uppercase">Find your favorite plugins</h2>
+        <!-- Search Bar & Sorting button -->
+        <div class="flex flex-row mt-6 rounded-md big-box-shadow">
+            <!-- Search Bar -->
+            <input
+                class="rounded-l-md p-3 w-[80vw] max-w-800px focus-visible:(border-white) text-black" type="text"
+                placeholder="Search in 1 projects, proudly made by the community...">
+            <!-- Sorting Button -->
+            <div class="rounded-r-md w-100px bg-gradient-to-r from-[#004ee9] to-[#367aff]">
+                <Menu>
+                    <MenuButton
+                        class="rounded-r-md h-1/1 text-left font-semibold flex flex-row items-center gap-2 text-white p-2">
+                        <span>Sort by</span>
+                        <icon-mdi-sort-variant class="text-[1.2em] pointer-events-none overflow-hidden"/>
+                    </MenuButton>
+                    <transition
+                        enter-active-class="transition duration-100 ease-out"
+                        enter-from-class="transform scale-95 opacity-0"
+                        enter-to-class="transform scale-100 opacity-100"
+                        leave-active-class="transition duration-75 ease-out"
+                        leave-from-class="transform scale-100 opacity-100"
+                        leave-to-class="transform scale-95 opacity-0"
+                    >
+                        <MenuItems
+                            class="absolute flex flex-col z-10 background-header shadow1 rounded-md border-top-primary">
+                            <MenuItem
+                                v-for='sorter in sorters'
+                                :key='sorter.id'
+                                v-slot="{ active }">
+                                <a
+                                    :class='{ "bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white": active }'
+                                    class="p-2">
+                                    {{ sorter.label }}
+                                </a>
+                            </MenuItem>
+                        </MenuItems>
+                    </transition>
+                </Menu>
+            </div>
+        </div>
 
-  </div>
-  <div class="projectsAndSidebar p-4 mt-5 w-screen max-w-1200px flex justify-around m-auto flex-col md:flex-row gap-y-6 md:gap-y-0 md:gap-x-6">
-      <!-- Projects -->
-      <div class="md:(w-2/3 min-w-2/3 max-w-2/3) min-h-800px bg-gray-200 rounded-md">
+    </div>
+    <div
+        class="projectsAndSidebar p-4 mt-5 w-screen max-w-1200px flex justify-around m-auto flex-col md:flex-row gap-y-6 md:gap-y-0 md:gap-x-6">
+        <!-- Projects -->
+        <div class="md:(w-2/3 min-w-2/3 max-w-2/3) min-h-800px bg-gray-200 rounded-md">
 
-      </div>
-      <!-- Sidebar -->
-      <div class="flex flex-col gap-4 bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-md min-w-300px min-h-800px p-4 text-white">
+        </div>
+        <!-- Sidebar -->
+        <div
+            class="flex flex-col gap-4 bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-md min-w-300px min-h-800px p-4 text-white">
 
-          <div class="versions">
-              <h3 class="font-bold">Minecraft versions</h3>
-              <div class="max-h-30 overflow-auto flex flex-col gap-2">
-                  <label v-for='version in versions' :key='version.version' class="group relative cursor-pointer pl-30px customCheckboxContainer">
-                      {{version.version}}
-                      <input :id='version.version' :name=version.version type="checkbox" class="hidden">
-                      <span class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
-                  </label>
-              </div>
-          </div>
-          <hr>
-          <div class="categories">
-              <h3 class="font-bold">Categories</h3>
-              <div class="flex flex-col gap-2">
-                  <label v-for='category in categories' :key='category.id' class="group relative cursor-pointer pl-30px customCheckboxContainer">
-                      {{category.label}}
-                      <input type="checkbox" class="hidden">
-                      <span class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
-                  </label>
-              </div>
-          </div>
-          <hr>
-          <div class="platforms">
-              <h3 class="font-bold">Platforms</h3>
-              <div class="flex flex-col gap-2">
-                  <label v-for='platform in platforms' :key='platform.id' class="group relative cursor-pointer pl-30px customCheckboxContainer">
-                      {{platform.label}}
-                      <input type="checkbox" class="hidden">
-                      <span class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
-                  </label>
-              </div>
-          </div>
-          <hr>
-          <div class="licenses">
-              <h3 class="font-bold">Licenses</h3>
-              <div class="flex flex-col gap-2">
-                  <label v-for='license in licenses' :key='license.id' class="group relative cursor-pointer pl-30px customCheckboxContainer">
-                      {{license.label}}
-                      <input type="checkbox" class="hidden">
-                      <span class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
-                  </label>
-              </div>
-          </div>
-      </div>
-  </div>
+            <div class="versions">
+                <h3 class="font-bold">Minecraft versions</h3>
+                <div class="max-h-30 overflow-auto flex flex-col gap-2">
+                    <label
+                        v-for='version in versions' :key='version.version'
+                        class="group relative cursor-pointer pl-30px customCheckboxContainer">
+                        {{ version.version }}
+                        <input :id='version.version' :name=version.version type="checkbox" class="hidden">
+                        <span
+                            class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
+                    </label>
+                </div>
+            </div>
+            <hr>
+            <div class="categories">
+                <h3 class="font-bold">Categories</h3>
+                <div class="flex flex-col gap-2">
+                    <label
+                        v-for='category in categories' :key='category.id'
+                        class="group relative cursor-pointer pl-30px customCheckboxContainer">
+                        {{ category.label }}
+                        <input type="checkbox" class="hidden">
+                        <span
+                            class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
+                    </label>
+                </div>
+            </div>
+            <hr>
+            <div class="platforms">
+                <h3 class="font-bold">Platforms</h3>
+                <div class="flex flex-col gap-2">
+                    <label
+                        v-for='platform in platforms' :key='platform.id'
+                        class="group relative cursor-pointer pl-30px customCheckboxContainer">
+                        {{ platform.label }}
+                        <input type="checkbox" class="hidden">
+                        <span
+                            class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
+                    </label>
+                </div>
+            </div>
+            <hr>
+            <div class="licenses">
+                <h3 class="font-bold">Licenses</h3>
+                <div class="flex flex-col gap-2">
+                    <label
+                        v-for='license in licenses' :key='license.id'
+                        class="group relative cursor-pointer pl-30px customCheckboxContainer">
+                        {{ license.label }}
+                        <input type="checkbox" class="hidden">
+                        <span
+                            class="absolute top-5px left-0 h-15px w-15px rounded-sm bg-white group-hover:(bg-gray-300) after:(absolute hidden content-DEFAULT top-3px left-6px w-5px h-10px border-solid border-r-3px border-b-3px)"/>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <route lang="yaml">
 meta:
-  layout: default
+layout: default
 </route>
 
 <style lang="css" scoped>
@@ -155,9 +175,10 @@ meta:
 }
 
 /*This is needed, because you cannot have more than one parent group in tailwind/windi*/
-.customCheckboxContainer input:checked ~ span{
+.customCheckboxContainer input:checked ~ span {
     background-color: #000 !important;
 }
+
 /*The tailwind/windi utility class rotate-45 is BROKEN*/
 .customCheckboxContainer input:checked ~ span:after {
     display: block;
diff --git a/frontend-new/src/styles/main.css b/frontend-new/src/styles/main.css
index a270dd18..dece0853 100644
--- a/frontend-new/src/styles/main.css
+++ b/frontend-new/src/styles/main.css
@@ -2,47 +2,51 @@
 
 /* TODO do we need this? */
 #nprogress {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 #nprogress .bar {
-  @apply bg-teal-600 opacity-75;
+    @apply bg-teal-600 opacity-75;
 
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
 
-  width: 100%;
-  height: 2px;
+    width: 100%;
+    height: 2px;
 }
 
 html {
-    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     font-weight: 400;
 }
 
-.shadow1{
+.shadow1 {
     box-shadow: 0 10px 20px rgb(0 0 0 / 15%), rgb(0 0 0 / 10%) 0 0 0 1px;
 }
 
-.w-fit{
+.w-fit {
     width: fit-content;
 }
 
 ::-webkit-scrollbar {
     width: 10px;
 }
-*{
+
+* {
     scrollbar-color: #004ee9 #f8faff;
     scrollbar-width: thin;
 }
+
 ::-webkit-scrollbar-track {
     background: #f8faff;
 }
+
 ::-webkit-scrollbar-thumb {
     background: #004ee9;
 }
+
 ::-webkit-scrollbar-thumb:hover {
     background: #111111;
 }
diff --git a/frontend-new/src/styles/markdown.css b/frontend-new/src/styles/markdown.css
index 7fcb9054..a9b145b2 100644
--- a/frontend-new/src/styles/markdown.css
+++ b/frontend-new/src/styles/markdown.css
@@ -2,47 +2,47 @@
 @import "prism-theme-vars/base.css";
 
 :root {
-  --prism-font-family: "Input Mono", monospace;
+    --prism-font-family: "Input Mono", monospace;
 }
 
 html:not(.dark) {
-  --prism-foreground: #393a34;
-  --prism-background: #fbfbfb;
-  --prism-comment: #8e8f8e;
-  --prism-string: #a1644c;
-  --prism-literal: #3a9c9b;
-  --prism-keyword: #248358;
-  --prism-function: #7e8a42;
-  --prism-deleted: #a14f55;
-  --prism-class: #2b91af;
-  --prism-builtin: #a52727;
-  --prism-property: #ad502b;
-  --prism-namespace: #c96880;
-  --prism-punctuation: #8e8f8b;
-  --prism-decorator: #bd8f8f;
-  --prism-json-property: #698c96;
+    --prism-foreground: #393a34;
+    --prism-background: #fbfbfb;
+    --prism-comment: #8e8f8e;
+    --prism-string: #a1644c;
+    --prism-literal: #3a9c9b;
+    --prism-keyword: #248358;
+    --prism-function: #7e8a42;
+    --prism-deleted: #a14f55;
+    --prism-class: #2b91af;
+    --prism-builtin: #a52727;
+    --prism-property: #ad502b;
+    --prism-namespace: #c96880;
+    --prism-punctuation: #8e8f8b;
+    --prism-decorator: #bd8f8f;
+    --prism-json-property: #698c96;
 }
 
 html.dark {
-  --prism-scheme: dark;
-  --prism-foreground: #d4cfbf;
-  --prism-background: #1e1e1e;
-  --prism-comment: #758575;
-  --prism-string: #ce9178;
-  --prism-literal: #4fb09d;
-  --prism-keyword: #4d9375;
-  --prism-function: #c2c275;
-  --prism-deleted: #a14f55;
-  --prism-class: #5ebaa8;
-  --prism-builtin: #cb7676;
-  --prism-property: #dd8e6e;
-  --prism-namespace: #c96880;
-  --prism-punctuation: #d4d4d4;
-  --prism-decorator: #bd8f8f;
-  --prism-regex: #ab5e3f;
-  --prism-json-property: #6b8b9e;
-  --prism-line-number: #888888;
-  --prism-line-number-gutter: #eeeeee;
-  --prism-line-highlight-background: #444444;
-  --prism-selection-background: #444444;
+    --prism-scheme: dark;
+    --prism-foreground: #d4cfbf;
+    --prism-background: #1e1e1e;
+    --prism-comment: #758575;
+    --prism-string: #ce9178;
+    --prism-literal: #4fb09d;
+    --prism-keyword: #4d9375;
+    --prism-function: #c2c275;
+    --prism-deleted: #a14f55;
+    --prism-class: #5ebaa8;
+    --prism-builtin: #cb7676;
+    --prism-property: #dd8e6e;
+    --prism-namespace: #c96880;
+    --prism-punctuation: #d4d4d4;
+    --prism-decorator: #bd8f8f;
+    --prism-regex: #ab5e3f;
+    --prism-json-property: #6b8b9e;
+    --prism-line-number: #888888;
+    --prism-line-number-gutter: #eeeeee;
+    --prism-line-highlight-background: #444444;
+    --prism-selection-background: #444444;
 }