diff --git a/src/renderer/assets/styles/_document.scss b/src/renderer/assets/styles/_document.scss
index 2ca744a9..4a0ce6fb 100644
--- a/src/renderer/assets/styles/_document.scss
+++ b/src/renderer/assets/styles/_document.scss
@@ -18,12 +18,12 @@
 }
 :root {
     --background: #000;
-    font-family: Rajdhani, sans-serif;
-    font-size: 18px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
     color: #fff;
+    font-family: Poppins, sans-serif;
+    font-size: 16px;
 }
 html {
     height: 100%;
diff --git a/src/renderer/assets/styles/_utils.scss b/src/renderer/assets/styles/_utils.scss
index 480111df..f3513459 100644
--- a/src/renderer/assets/styles/_utils.scss
+++ b/src/renderer/assets/styles/_utils.scss
@@ -18,6 +18,8 @@
     row-gap: 10px;
     column-gap: 20px;
     > :nth-child(2n + 1) {
+        display: flex;
+        flex-direction: column;
         justify-content: center;
     }
 }
diff --git a/src/renderer/components/battle/BotParticipant.vue b/src/renderer/components/battle/BotParticipant.vue
index db2da1ef..dce74a0f 100644
--- a/src/renderer/components/battle/BotParticipant.vue
+++ b/src/renderer/components/battle/BotParticipant.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="participant" data-type="participant" @mouseenter.stop="onMouseEnter" @contextmenu="onRightClick">
+    <TeamParticipant :battle="battle" @contextmenu="onRightClick">
         <Icon :icon="robot" :height="16" />
         <div>{{ getAiFriendlyName(props.bot.aiShortName) }}</div>
-    </div>
+    </TeamParticipant>
     <LuaOptionsModal
         :id="`configure-bot-${bot.name}`"
         v-model="botOptionsOpen"
@@ -21,6 +21,7 @@ import { MenuItem } from "primevue/menuitem";
 import { Ref, ref } from "vue";
 
 import LuaOptionsModal from "@/components/battle/LuaOptionsModal.vue";
+import TeamParticipant from "@/components/battle/TeamParticipant.vue";
 import ContextMenu from "@/components/common/ContextMenu.vue";
 import { getAiFriendlyName } from "@/model/ai";
 import { AbstractBattle } from "@/model/battle/abstract-battle";
@@ -70,29 +71,9 @@ async function configureBot() {
 function setBotOptions(options: Record<string, unknown>) {
     props.battle.setBotOptions(props.bot.name, options);
 }
-
-function onMouseEnter() {
-    api.audio.play("button-hover");
-}
 </script>
 
 <style lang="scss" scoped>
-.participant {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
-    padding: 3px 8px;
-    border-radius: 3px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    &.dragging {
-        pointer-events: auto;
-    }
-    &:hover {
-        background: rgba(255, 255, 255, 0.1);
-    }
-}
 .bot-type {
     opacity: 0.5;
 }
diff --git a/src/renderer/components/battle/PlayerParticipant.vue b/src/renderer/components/battle/PlayerParticipant.vue
index 084449d8..194f2a07 100644
--- a/src/renderer/components/battle/PlayerParticipant.vue
+++ b/src/renderer/components/battle/PlayerParticipant.vue
@@ -1,18 +1,12 @@
 <template>
-    <div
-        v-tooltip.bottom="syncStatus"
-        class="participant"
-        data-type="participant"
-        @mouseenter.stop="onMouseEnter"
-        @contextmenu="onRightClick"
-    >
+    <TeamParticipant :battle="battle" @contextmenu="onRightClick">
         <Flag class="flag" :countryCode="player.countryCode" />
         <div>{{ player.username }}</div>
         <div v-if="!player.battleStatus.isSpectator">
             <div class="ready" :class="{ isReady: player.battleStatus.ready }">⬤</div>
         </div>
         <Icon v-if="!isSynced" :icon="syncAlert" :height="16" color="#f00" />
-    </div>
+    </TeamParticipant>
     <ContextMenu ref="menu" :model="actions" />
 </template>
 
@@ -23,6 +17,7 @@ import { delay } from "jaz-ts-utils";
 import { MenuItem } from "primevue/menuitem";
 import { computed, inject, Ref, ref } from "vue";
 
+import TeamParticipant from "@/components/battle/TeamParticipant.vue";
 import ContextMenu from "@/components/common/ContextMenu.vue";
 import Flag from "@/components/misc/Flag.vue";
 import { AbstractBattle } from "@/model/battle/abstract-battle";
@@ -127,29 +122,9 @@ async function addFriend() {
 function reportPlayer() {
     // TODO
 }
-
-function onMouseEnter() {
-    api.audio.play("button-hover");
-}
 </script>
 
 <style lang="scss" scoped>
-.participant {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
-    padding: 3px 8px;
-    border-radius: 3px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    &.dragging {
-        pointer-events: auto;
-    }
-    &:hover {
-        background: rgba(255, 255, 255, 0.1);
-    }
-}
 .flag {
     width: 16px;
 }
diff --git a/src/renderer/components/battle/TeamComponent.vue b/src/renderer/components/battle/TeamComponent.vue
index 9b5ff5e9..8436f357 100644
--- a/src/renderer/components/battle/TeamComponent.vue
+++ b/src/renderer/components/battle/TeamComponent.vue
@@ -117,11 +117,10 @@ function onDrop(event: DragEvent, teamId: number) {
     }
 }
 .title {
-    font-size: 26px;
+    font-size: 20px;
 }
 .member-count {
     display: inline-block;
-    font-size: 20px;
     opacity: 0.5;
     vertical-align: middle;
 }
diff --git a/src/renderer/components/battle/TeamParticipant.vue b/src/renderer/components/battle/TeamParticipant.vue
new file mode 100644
index 00000000..22ea18ec
--- /dev/null
+++ b/src/renderer/components/battle/TeamParticipant.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="participant" data-type="participant" @mouseenter.stop="onMouseEnter">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { AbstractBattle } from "@/model/battle/abstract-battle";
+
+const props = defineProps<{
+    battle: AbstractBattle;
+}>();
+
+function onMouseEnter() {
+    api.audio.play("button-hover");
+}
+</script>
+
+<style lang="scss" scoped>
+.participant {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 8px;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 14px;
+    &.dragging {
+        pointer-events: auto;
+    }
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+}
+</style>
diff --git a/src/renderer/components/controls/Button.vue b/src/renderer/components/controls/Button.vue
index e5f104f8..7bc834c5 100644
--- a/src/renderer/components/controls/Button.vue
+++ b/src/renderer/components/controls/Button.vue
@@ -54,7 +54,8 @@ async function onClick() {
         min-height: unset;
         align-self: center;
         border-radius: 2px;
-        font-size: 16px;
+        font-size: 14px;
+        font-weight: 300;
     }
 }
 .p-button {
diff --git a/src/renderer/components/controls/Control.vue b/src/renderer/components/controls/Control.vue
index ac2527ee..410e9d92 100644
--- a/src/renderer/components/controls/Control.vue
+++ b/src/renderer/components/controls/Control.vue
@@ -34,6 +34,7 @@ function onMouseEnter() {
 .control {
     display: flex;
     min-height: 35px;
+    max-height: 35px;
     align-items: center;
     align-self: center;
     justify-self: flex-start;
diff --git a/src/renderer/components/misc/BattlePreviewParticipant.vue b/src/renderer/components/misc/BattlePreviewParticipant.vue
index 68c2fb85..4a4e59ed 100644
--- a/src/renderer/components/misc/BattlePreviewParticipant.vue
+++ b/src/renderer/components/misc/BattlePreviewParticipant.vue
@@ -42,7 +42,6 @@ const color = computed(() => {
     border-radius: 3px;
     background: rgba(0, 0, 0, 0.3);
     font-size: 14px;
-    font-weight: 500;
     border: 1px solid rgba(255, 255, 255, 0.1);
     overflow: hidden;
     &.color {
diff --git a/src/renderer/components/navbar/Friend.vue b/src/renderer/components/navbar/Friend.vue
index 1152ea77..aa8cf17d 100644
--- a/src/renderer/components/navbar/Friend.vue
+++ b/src/renderer/components/navbar/Friend.vue
@@ -147,8 +147,6 @@ async function removeFriend() {
 .flag {
 }
 .username {
-    font-size: 18px;
-    font-weight: 600;
 }
 .square {
     :deep(.p-button) {
diff --git a/src/renderer/components/navbar/NavBar.vue b/src/renderer/components/navbar/NavBar.vue
index 25cb4a2f..a5da6707 100644
--- a/src/renderer/components/navbar/NavBar.vue
+++ b/src/renderer/components/navbar/NavBar.vue
@@ -112,20 +112,22 @@ const primaryRoutes = computed(() => {
         .filter((r) => ["/singleplayer", "/multiplayer", "/library", "/learn", "/store", "/development"].includes(r.path))
         .filter(
             (r) =>
-                r.meta.availableOffline === undefined ||
-                r.meta.availableOffline ||
-                (r.meta.availableOffline === false && !offlineMode.value)
+                (r.meta.hide === false || r.meta.hide === undefined) &&
+                (r.meta.availableOffline === undefined ||
+                    r.meta.availableOffline ||
+                    (r.meta.availableOffline === false && !offlineMode.value))
         )
         .sort((a, b) => (a.meta.order ?? 99) - (b.meta.order ?? 99));
 });
 const secondaryRoutes = computed(() => {
     return allRoutes
-        .filter((r) => r.meta.order !== undefined && r.path.startsWith(`/${api.router.currentRoute.value.path.split("/")[1]}/`))
+        .filter((r) => r.path.startsWith(`/${api.router.currentRoute.value.path.split("/")[1]}/`))
         .filter(
             (r) =>
-                r.meta.availableOffline === undefined ||
-                r.meta.availableOffline ||
-                (r.meta.availableOffline === false && !offlineMode.value)
+                (r.meta.hide === false || r.meta.hide === undefined) &&
+                (r.meta.availableOffline === undefined ||
+                    r.meta.availableOffline ||
+                    (r.meta.availableOffline === false && !offlineMode.value))
         )
         .sort((a, b) => (a.meta.order ?? 99) - (b.meta.order ?? 99));
 });
@@ -164,6 +166,7 @@ const serverOffline = api.session.offlineMode;
     gap: 1px;
     transition: transform 0.3s, opacity 0.3s;
     z-index: 1;
+    font-family: Rajdhani, sans-serif;
     &.hidden {
         opacity: 0;
         transform: translateY(-100%);
@@ -215,6 +218,7 @@ const serverOffline = api.session.offlineMode;
         height: 100%;
         font-weight: 600;
         text-transform: uppercase;
+        max-height: unset;
         :deep(.p-button) {
             padding: 0 22px;
         }
@@ -271,6 +275,7 @@ const serverOffline = api.session.offlineMode;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     display: flex;
     height: 36px;
+    font-size: 18px;
     .button {
         background: none;
         border: none;
diff --git a/src/renderer/components/navbar/PopOutPanel.vue b/src/renderer/components/navbar/PopOutPanel.vue
index ac076159..1f65b593 100644
--- a/src/renderer/components/navbar/PopOutPanel.vue
+++ b/src/renderer/components/navbar/PopOutPanel.vue
@@ -23,6 +23,7 @@ const props = defineProps<{
     min-height: 400px;
     max-height: 400px;
     background: rgba(0, 0, 0, 0.95);
+    font-family: Poppins;
     :deep(.content) {
         padding: 0;
     }
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index a328e494..9ec6f2ad 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -21,6 +21,7 @@ declare module "vue-router" {
         title?: string;
         order?: number;
         availableOffline?: boolean;
+        hide?: boolean;
         empty?: boolean;
         blurBg?: boolean;
         transition?: TransitionProps;
diff --git a/src/renderer/typed-router.d.ts b/src/renderer/typed-router.d.ts
index c91b0854..5c945a64 100644
--- a/src/renderer/typed-router.d.ts
+++ b/src/renderer/typed-router.d.ts
@@ -37,10 +37,10 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/debug/': RouteRecordInfo<'/debug/', '/debug', Record<never, never>, Record<never, never>>,
-    '/debug/a': RouteRecordInfo<'/debug/a', '/debug/a', Record<never, never>, Record<never, never>>,
     '/debug/b': RouteRecordInfo<'/debug/b', '/debug/b', Record<never, never>, Record<never, never>>,
     '/debug/controls': RouteRecordInfo<'/debug/controls', '/debug/controls', Record<never, never>, Record<never, never>>,
-    '/debug/playground': RouteRecordInfo<'/debug/playground', '/debug/playground', Record<never, never>, Record<never, never>>,
+    '/debug/font': RouteRecordInfo<'/debug/font', '/debug/font', Record<never, never>, Record<never, never>>,
+    '/debug/pixi-map': RouteRecordInfo<'/debug/pixi-map', '/debug/pixi-map', Record<never, never>, Record<never, never>>,
     '/debug/script-launcher': RouteRecordInfo<'/debug/script-launcher', '/debug/script-launcher', Record<never, never>, Record<never, never>>,
     '/debug/test': RouteRecordInfo<'/debug/test', '/debug/test', Record<never, never>, Record<never, never>>,
     '/development/': RouteRecordInfo<'/development/', '/development', Record<never, never>, Record<never, never>>,
@@ -61,7 +61,6 @@ declare module 'vue-router/auto/routes' {
     '/library/maps/': RouteRecordInfo<'/library/maps/', '/library/maps', Record<never, never>, Record<never, never>>,
     '/library/maps/[id]': RouteRecordInfo<'/library/maps/[id]', '/library/maps/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/library/replays': RouteRecordInfo<'/library/replays', '/library/replays', Record<never, never>, Record<never, never>>,
-    '/library/tutorials': RouteRecordInfo<'/library/tutorials', '/library/tutorials', Record<never, never>, Record<never, never>>,
     '/library/units': RouteRecordInfo<'/library/units', '/library/units', Record<never, never>, Record<never, never>>,
     '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
     '/multiplayer/': RouteRecordInfo<'/multiplayer/', '/multiplayer', Record<never, never>, Record<never, never>>,
diff --git a/src/renderer/views/debug/a.vue b/src/renderer/views/debug/a.vue
deleted file mode 100644
index 3a6c60fd..00000000
--- a/src/renderer/views/debug/a.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<route lang="json5">
-{ meta: { title: "A", order: 3 } }
-</route>
-
-<template>
-    <div>
-        <Select v-model="color" :options="colors" />
-
-        test
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { delay } from "jaz-ts-utils";
-import { ref } from "vue";
-
-import Select from "@/components/controls/Select.vue";
-
-const color = ref("red");
-const colors = ref(["red", "green", "blue"]);
-
-await delay(1000);
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/renderer/views/debug/font.vue b/src/renderer/views/debug/font.vue
new file mode 100644
index 00000000..e677a63f
--- /dev/null
+++ b/src/renderer/views/debug/font.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p class="a">aoufmrnliIL1</p>
+        <p class="b">The lazy fox jumped over the fat tired dog or some shit</p>
+        <p class="c">The lazy fox jumped over the fat tired dog or some shit</p>
+        <p class="d">The lazy fox jumped over the fat tired dog or some shit</p>
+        <p class="e">The lazy fox jumped over the fat tired dog or some shit</p>
+    </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.a {
+    font-family: Rajdhani, sans-serif;
+    font-size: 18px;
+}
+.b {
+    font-family: Rajdhani, sans-serif;
+    font-size: 16px;
+}
+</style>
diff --git a/src/renderer/views/debug/playground.vue b/src/renderer/views/debug/pixi-map.vue
similarity index 97%
rename from src/renderer/views/debug/playground.vue
rename to src/renderer/views/debug/pixi-map.vue
index f06d06e2..d66b84fe 100644
--- a/src/renderer/views/debug/playground.vue
+++ b/src/renderer/views/debug/pixi-map.vue
@@ -1,5 +1,5 @@
 <route lang="json5">
-{ meta: { title: "Playground", order: 1 } }
+{ meta: { title: "Pixi Map" } }
 </route>
 
 <template>
diff --git a/src/renderer/views/library/maps/[id].vue b/src/renderer/views/library/maps/[id].vue
index 218869db..14857d67 100644
--- a/src/renderer/views/library/maps/[id].vue
+++ b/src/renderer/views/library/maps/[id].vue
@@ -1,5 +1,5 @@
 <route lang="json5">
-{ props: true, meta: { title: "Map Details", transition: { name: "slide-left" } } }
+{ props: true, meta: { title: "Map Details", hide: true, transition: { name: "slide-left" } } }
 </route>
 
 <template>
diff --git a/src/renderer/views/library/tutorials.vue b/src/renderer/views/library/tutorials.vue
deleted file mode 100644
index a0addf01..00000000
--- a/src/renderer/views/library/tutorials.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<route lang="json5">
-{ redirect: "/singleplayer/tutorials", meta: { title: "Tutorials", order: 5, transition: { name: "slide-left" } } }
-</route>
-
-<template>
-    <div></div>
-</template>
diff --git a/src/renderer/views/multiplayer/battle.vue b/src/renderer/views/multiplayer/battle.vue
index cf0ee147..87b211dd 100644
--- a/src/renderer/views/multiplayer/battle.vue
+++ b/src/renderer/views/multiplayer/battle.vue
@@ -1,5 +1,5 @@
 <route lang="json5">
-{ meta: { title: "Multiplayer Custom Battle", availableOffline: false, transition: { name: "slide-left" } } }
+{ meta: { title: "Multiplayer Custom Battle", availableOffline: false, hide: true, transition: { name: "slide-left" } } }
 </route>
 
 <template>