diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index d6dc2d362..38c761ab0 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -13,7 +13,7 @@ import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import TrackRow from '~/components/audio/track/Row.vue'
 import Input from '~/components/ui/Input.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 1df6370d4..897e74099 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -10,7 +10,7 @@ import { useStore } from '~/store'
 import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 
 interface Props {
diff --git a/front/src/components/auth/Logout.vue b/front/src/components/auth/Logout.vue
index f0997e57f..07219db13 100644
--- a/front/src/components/auth/Logout.vue
+++ b/front/src/components/auth/Logout.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Link from '~/components/ui/Link.vue'
 
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 8f652d344..8b4762b38 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -13,7 +13,7 @@ import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Textarea from '~/components/ui/Textarea.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 
 import useLogger from '~/composables/useLogger'
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 7ad4107a4..1b00be8e4 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -15,8 +15,8 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Section from '~/components/ui/Section.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index ec48e3af6..97c474eba 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -22,7 +22,7 @@ import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index bfa89d69e..737a0d821 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -23,7 +23,7 @@ import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index e7eaa491f..3efff68bc 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -23,7 +23,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index d3ae4a485..d3a9d350c 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -15,7 +15,7 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import Button from '~/components/ui/Button.vue'
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index f35d8a94c..c07e9520f 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -8,7 +8,7 @@ import { type WidthProps, width } from '~/composables/width'
 import Pill from './Pill.vue'
 import Alert from './Alert.vue'
 import Layout from './Layout.vue';
-import Spacer from './layout/Spacer.vue';
+import Spacer from './Spacer.vue';
 
 const props = defineProps<{
   title: string
diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 5f02483af..1bb8577e5 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -4,7 +4,7 @@ import { watchEffect } from 'vue';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const { title, overPopover = false, ...colorProps } = defineProps<{
   title:string,
diff --git a/front/src/components/ui/layout/Section.vue b/front/src/components/ui/Section.vue
similarity index 98%
rename from front/src/components/ui/layout/Section.vue
rename to front/src/components/ui/Section.vue
index 836a04e0d..e704158c8 100644
--- a/front/src/components/ui/layout/Section.vue
+++ b/front/src/components/ui/Section.vue
@@ -3,7 +3,7 @@ import type { RouterLinkProps } from 'vue-router'
 import { useAttrs } from 'vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 
diff --git a/front/src/components/ui/layout/Spacer.vue b/front/src/components/ui/Spacer.vue
similarity index 55%
rename from front/src/components/ui/layout/Spacer.vue
rename to front/src/components/ui/Spacer.vue
index b7584e999..518a8f9f3 100644
--- a/front/src/components/ui/layout/Spacer.vue
+++ b/front/src/components/ui/Spacer.vue
@@ -1,21 +1,32 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 
-const { grow, shrink, title, size = 16, ...direction } = defineProps<{
+type Size = 'no-size' | `size-${ '4' | '8' | '12' | '16' | '32' | '46' | '64'}`
+
+const props = defineProps<{
   grow?:true;
   shrink?:true;
   title?:string;
-  size?:number;
-} & { [Direction in 'h' | 'v']? : true }>()
+} & { [Direction in 'h' | 'v']? : true }
+  & ({ [S in Size]? : true } | {size?:number})>()
 
 const minSize = 0;
 
 const measure = ref()
 
-watchEffect(() => measure.value = {
-  size: `${Math.max(size, minSize)}px`,
-  margin: `${(size-Math.max(size, minSize))/2}px`
-})
+watchEffect(() => {
+  const maybeSize = Object.entries(props).find(
+    ([key, value]) => value===true && key.startsWith('size'))
+  const size =
+    maybeSize ?
+      +(maybeSize[0].replace('size', ''))
+      : 'size' in props && props.size ? props.size
+      : 'noSize' in props && props.noSize ? 0
+      : 32
+  measure.value = {
+    size: `${Math.max(size, minSize)}px`,
+    margin: `${(size-Math.max(size, minSize))/2}px`
+}})
 </script>
 
 <template>
@@ -26,8 +37,8 @@ watchEffect(() => measure.value = {
 
 <style module lang="scss">
 .spacer {
-  width: v-bind('direction.v ? 0 : measure.size');
-  height: v-bind('direction.h ? 0 : measure.size');
+  width: v-bind('props.v ? 0 : measure.size');
+  height: v-bind('props.h ? 0 : measure.size');
   margin: v-bind('measure.margin');
   flex-grow:v-bind('grow ? 1 : 0');
   flex-shrink:v-bind('shrink ? 1 : 0');
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 0fdbddf2a..8a465aab2 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -10,7 +10,7 @@ import Link from '~/components/ui/Link.vue'
 import UserMenu from './UserMenu.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import { useRoute } from 'vue-router'
 
 const isCollapsed = ref(true)
diff --git a/front/src/ui/modals/Shortcuts.vue b/front/src/ui/modals/Shortcuts.vue
index 3c9523685..cc56de11f 100644
--- a/front/src/ui/modals/Shortcuts.vue
+++ b/front/src/ui/modals/Shortcuts.vue
@@ -7,7 +7,7 @@ import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const { t } = useI18n()
 const store = useStore()
diff --git a/front/src/ui/modals/Upload.vue b/front/src/ui/modals/Upload.vue
index 3fb181968..7fb4ca189 100644
--- a/front/src/ui/modals/Upload.vue
+++ b/front/src/ui/modals/Upload.vue
@@ -8,7 +8,7 @@ import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue';
 import Card from '~/components/ui/Card.vue';
 import Pagination from '~/components/ui/Pagination.vue';
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index 5b28393b9..e6ef8bfe9 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -7,7 +7,7 @@ import { useRouter } from 'vue-router'
 
 import Input from '~/components/ui/Input.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Link from '~/components/ui/Link.vue'
 
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index a8fe9d69c..bf145d84b 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -13,8 +13,8 @@ import useReport from '~/composables/moderation/useReport'
 import RenderedDescription from '~/components/common/RenderedDescription.vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Section from '~/components/ui/Section.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 95218e0ed..77b15ad1a 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -19,7 +19,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
diff --git a/front/ui-docs/components/ui/input.md b/front/ui-docs/components/ui/input.md
index 025431806..a9d701765 100644
--- a/front/ui-docs/components/ui/input.md
+++ b/front/ui-docs/components/ui/input.md
@@ -2,7 +2,7 @@
 import Input from "~/components/ui/Input.vue"
 import Button from "~/components/ui/Button.vue"
 import Layout from "~/components/ui/Layout.vue"
-import Spacer from "~/components/ui/layout/Spacer.vue"
+import Spacer from "~/components/ui/Spacer.vue"
 import Alert from "~/components/ui/Alert.vue"
 </script>
 
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index ced7f8a5e..8f5275f79 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
diff --git a/front/ui-docs/components/ui/layout/columns.md b/front/ui-docs/components/ui/layout/columns.md
index 3d3c7d7fd..400ffa067 100644
--- a/front/ui-docs/components/ui/layout/columns.md
+++ b/front/ui-docs/components/ui/layout/columns.md
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
diff --git a/front/ui-docs/components/ui/layout/flex.md b/front/ui-docs/components/ui/layout/flex.md
index e4be62371..5476bf970 100644
--- a/front/ui-docs/components/ui/layout/flex.md
+++ b/front/ui-docs/components/ui/layout/flex.md
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
diff --git a/front/ui-docs/components/ui/layout/grid.md b/front/ui-docs/components/ui/layout/grid.md
index efdcc1c02..d4dd266f2 100644
--- a/front/ui-docs/components/ui/layout/grid.md
+++ b/front/ui-docs/components/ui/layout/grid.md
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
diff --git a/front/ui-docs/components/ui/layout/section.md b/front/ui-docs/components/ui/layout/section.md
index 1b1ded451..a0462835b 100644
--- a/front/ui-docs/components/ui/layout/section.md
+++ b/front/ui-docs/components/ui/layout/section.md
@@ -6,16 +6,11 @@ import { type Track, type User } from '~/types'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Toggle from '~/components/ui/Toggle.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
-import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Activity from '~/components/ui/Activity.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 
-const alignLeft = ref(false)
-
-const attributes = computed(() => ({
-  style: alignLeft.value ? 'justify-content: start' : ''
-}))
+const alignLeft = ref(true)
 
 const track: Track = {
   id: 0,
diff --git a/front/ui-docs/components/ui/layout/spacer.md b/front/ui-docs/components/ui/layout/spacer.md
index 5308e7c0e..025e2cacb 100644
--- a/front/ui-docs/components/ui/layout/spacer.md
+++ b/front/ui-docs/components/ui/layout/spacer.md
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
 import Card from '~/components/ui/Card.vue'
 
diff --git a/front/ui-docs/components/ui/layout/stack.md b/front/ui-docs/components/ui/layout/stack.md
index f6935027e..c68990a7d 100644
--- a/front/ui-docs/components/ui/layout/stack.md
+++ b/front/ui-docs/components/ui/layout/stack.md
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'
diff --git a/front/ui-docs/designing-pages.md b/front/ui-docs/designing-pages.md
index fd414afcb..ffd98850f 100644
--- a/front/ui-docs/designing-pages.md
+++ b/front/ui-docs/designing-pages.md
@@ -6,16 +6,12 @@ import { type Track, type User } from '~/types'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Toggle from '~/components/ui/Toggle.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Activity from '~/components/ui/Activity.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 
 const alignLeft = ref(false)
-
-const attributes = computed(() => ({
-  style: alignLeft.value ? 'justify-content: start' : ''
-}))
 </script>
 
 # Designing Pages
diff --git a/front/ui-docs/index.md b/front/ui-docs/index.md
index 3e15216ea..1dcaf141c 100644
--- a/front/ui-docs/index.md
+++ b/front/ui-docs/index.md
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Layout from '../src/components/ui/Layout.vue'
 import Card from '../src/components/ui/Card.vue'
-import Spacer from '../src/components/ui/layout/Spacer.vue'
+import Spacer from '../src/components/ui/Spacer.vue'
 </script>
 
 # Funkwhale design component library
@@ -10,13 +10,13 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
 
 <Layout flex>
 
-<Card to="designing-pages"
+<Card default raised to="/designing-pages"
     title="Designing pages"
-    style="width:min-content"
+    min-content
   />
 
-<Card to="https://design.funkwhale.audio"
-      title="Ui designs" style="width:max-content">
+<Card default raised to="https://design.funkwhale.audio"
+      title="Ui designs" >
 Check out the design system on our Penpot.
 </Card>