diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index edee420b5..91df0b0e4 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type RouterLinkProps, RouterLink } from 'vue-router'
-import { type ColorProps, type VariantProps, propsToColor } from '~/composables/colors';
+import { type ColorProps, type DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
 
-const { to, icon, round, ...colorProps } = defineProps<{
+const { to, icon, thin, round, ...colorProps } = defineProps<{
     icon?: string;
-    round?: boolean;
-  } & ColorProps & VariantProps & RouterLinkProps>()
+    thin?: true
+    round?: true;
+  } & RouterLinkProps & (ColorProps | DefaultProps) & VariantProps>()
 
 const isExternalLink = computed(() => {
   return typeof to === 'string' && to.startsWith('http')
 })
 
+const fontWeight = thin ? 400 : 900
+
 const isIconOnly = computed(() => !!icon)
 const isSimple = Object.keys(colorProps).length === 0
 </script>
@@ -58,7 +61,7 @@ const isSimple = Object.keys(colorProps).length === 0
     white-space: nowrap;
 
     font-family: $font-main;
-    font-weight: 900;
+    font-weight: v-bind(fontWeight);
     font-size: 0.875em;
 
     line-height: 1em;
@@ -72,7 +75,7 @@ const isSimple = Object.keys(colorProps).length === 0
     margin: 0 0.5ch;
 
     transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
-    transition:background-color .3s, border-color .2s;
+    transition:background-color .2s, border-color .3s;
 
     i {
       font-size:1.4em;