diff --git a/front/index.html b/front/index.html
index 186250640..331427637 100644
--- a/front/index.html
+++ b/front/index.html
@@ -68,7 +68,7 @@
   </style>
 </head>
 
-<body id="body">
+<body id="body" style="margin:0">
   <div id="fake-app">
     <div id="fake-sidebar">
       <div id="orange-square"></div>
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 3e839e5e7..a2c96a00f 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, useSlots, onMounted } from 'vue'
-import { useColor, type ColorProps } from '~/composables/colors'
+import { type ColorProps, useColor } from '~/composables/colors'
 
 import Loader from '~/components/ui/Loader.vue'
 
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 8f70c0450..a316b1e00 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -1,30 +1,31 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { type RouterLinkProps, RouterLink } from 'vue-router';
-const { to, icon } = defineProps<RouterLinkProps & {
+import { type ColorProps, useColor } from '~/composables/colors';
+const { to, icon, color } = defineProps<RouterLinkProps & ColorProps & {
     icon?: string;
     variant?: 'solid' | 'outline' | 'ghost'
   }>()
 
+const colorClass = useColor(() => color)
+
 const isExternalLink = computed(() => {
   return typeof to === 'string' && to.startsWith('http')
 })
 </script>
 
 <template>
-  <a v-if="isExternalLink" :class="$style.external" :href="to?.toString()" target="_blank">
+  <a v-if="isExternalLink" :class="[$style.external, $style[colorClass]]" :href="to?.toString()" target="_blank">
       <slot />
   </a>
-  <RouterLink v-if="to && !isExternalLink" :to="to" v-slot="{ isActive, href, navigate }">
-     <a :href="href" @click="navigate" :class="{ [$style.active]: isActive }">
-      <slot />
+  <RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
+     <slot />
       <i v-if="icon" :class="['bi', icon]" />
-    </a>
   </RouterLink>
 </template>
 
 <style module lang="scss">
-  .active { background:red; }
+  .active { outline: 3px solid red; }
   .external { outline: 3px dotted blue; }
   a {
     background-color: var(--fw-bg-color);
diff --git a/front/src/style/funkwhale.scss b/front/src/style/funkwhale.scss
index b4260465b..e46c5c0c6 100644
--- a/front/src/style/funkwhale.scss
+++ b/front/src/style/funkwhale.scss
@@ -1,5 +1,6 @@
 @charset "utf-8";
 @import "base/index";
+@import "inc/theme.scss";
 @import "font";
 @import "colors";
 
diff --git a/front/src/ui/App.vue b/front/src/ui/App.vue
index 3e09ec1ae..e3f02e0a3 100644
--- a/front/src/ui/App.vue
+++ b/front/src/ui/App.vue
@@ -10,7 +10,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="grid">
+  <div class="funkwhale grid">
     <Sidebar />
     <main>
       <RouterView />
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index af3947b98..457b29926 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -183,7 +183,13 @@ const uploads = useUploadsStore()
 
 <style scoped lang="scss">
 aside {
-  background: var(--fw-beige-300);
+  @include light-theme {
+    background: var(--fw-beige-300);
+  }
+  @include dark-theme {
+    background: var(--fw-blue-700);
+  }
+
   height: 100%;
 
   > .sticky-content {
@@ -288,6 +294,12 @@ aside {
       margin: 0;
       padding: 0 32px 8px;
       color: var(--fw-gray-700);
+      @include light-theme {
+        color: var(--fw-gray-700);
+      }
+      @include dark-theme {
+        color: var(--fw-blue-100);
+      }
       font-size: 14px;
       line-height: 1.2;
     }
