diff --git a/front/ui-docs/components/ui/layout/section.md b/front/ui-docs/components/ui/layout/section.md
index b6b5e984f..119f55e2d 100644
--- a/front/ui-docs/components/ui/layout/section.md
+++ b/front/ui-docs/components/ui/layout/section.md
@@ -9,7 +9,7 @@ import Toggle from '~/components/ui/Toggle.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Activity from '~/components/ui/Activity.vue'
-import LayoutSection from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/layout/Section.vue'
 
 const alignLeft = ref(false)
 
@@ -108,13 +108,19 @@ const user: User = {
 
 # Layout section
 
-## Alignment
+Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
+
+```vue-html
+<Section h3="My title" />
+```
+
+### Align the section to the page
 
 ```vue-html
 <Section alignLeft />
 ```
 
-## Item width
+### Make the section header align with the section contents
 
 Do you want to align the header to tiny, small or medium items?
 
@@ -122,29 +128,28 @@ Do you want to align the header to tiny, small or medium items?
 <Section medium-items />
 ```
 
-## Heading
+### Provide an action
 
-`h1` or `h2` or `h3` `="title"`
+The link or button will be shown on the right side of the header.
 
 ```vue-html
-<Section h3="My title" />
+<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
+
+<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 ```
 
-## Action
+<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
+<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 
-Will be shown on the right side of the header
+You can add props to the Link or Button, for example to make them `primary` or add an icon:
 
-### (a) Add a link:
-
-```vue-html
-<Section :action="{ text:'more...', to:'/' }" />
+```vue-html{1}
+<Section solid primary icon="bi-star"
+    h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 ```
 
-### (b) Or a button:
-
-```vue-html
-<Section :action="{ text:'more...', onClick:'loadMore' }" />
-```
+<Section solid primary icon="bi-star"
+    h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 
 ## Example
 
@@ -153,24 +158,17 @@ Will be shown on the right side of the header
 <Toggle v-model="alignLeft" label="Left-align the layout"/>
 </Layout>
 
----
-
-<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
-
-<LayoutSection :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
+<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
-</LayoutSection>
+</Section>
 
 <LayoutSection
     :alignLeft="alignLeft"
@@ -182,8 +180,6 @@ Will be shown on the right side of the header
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
 </LayoutSection>
-
-</div>
 ```
 
 <Layout flex>
@@ -194,25 +190,31 @@ Will be shown on the right side of the header
 
 <div class="preview" style="margin: 0 -40px; padding: 0 25px;">
 
-<LayoutSection :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
+<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Go to library', to:'/' }">
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
     <Card small title="Relatively Long Album Name">
         Artist Name
-        13 tracks
     </Card>
-</LayoutSection>
+</Section>
 
-<LayoutSection :alignLeft="alignLeft" medium-items h3="Activities (medium items)" :action="{ text:'more...', to:'/' }">
+<Section :alignLeft="alignLeft" medium-items h3="Activities (medium items)" :action="{ text:'Delete selected items', onClick:()=>console.log('Deleted :-)') }">
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
-</LayoutSection>
+</Section>
 
 </div>
+
+## Responsivity
+
+- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
+- On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
+- The remaining space is evenly distributed.
+- Title rows align with the content below them.
+
+Resize the window to observe how the items move.
diff --git a/front/ui-docs/designing-pages.md b/front/ui-docs/designing-pages.md
index 2541cdb1a..fd414afcb 100644
--- a/front/ui-docs/designing-pages.md
+++ b/front/ui-docs/designing-pages.md
@@ -9,100 +9,13 @@ import Toggle from '~/components/ui/Toggle.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Activity from '~/components/ui/Activity.vue'
+import Section from '~/components/ui/layout/Section.vue'
 
 const alignLeft = ref(false)
 
 const attributes = computed(() => ({
   style: alignLeft.value ? 'justify-content: start' : ''
 }))
-
-const track: Track = {
-  id: 0,
-  fid: "",
-
-  title: 'Some lovely track',
-  description: {
-    content_type: 'text/markdown',
-    text: `**New:** Music for the eyes!`
-  },
-  cover: {
-    uuid: "",
-    urls: {
-      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
-      medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
-      large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
-    }
-  },
-  tags: ["example"],
-  uploads: [],
-  downloads_count: 1927549377,
-  artist_credit: [{
-    artist: {
-      id: 0,
-      fid: "",
-
-      name: "The Artist",
-      description: {
-        content_type: 'text/markdown',
-        text: `I'm a musician based on the internet.
-
-  Find all my music on [Funkwhale](https://funkwhale.audio)!`},
-      tags: [],
-
-      content_category: 'music',
-      albums: [],
-      tracks_count: 1,
-      attributed_to: {
-        id: 0,
-        summary: "",
-        preferred_username: "User12345",
-        full_username: "User12345",
-        is_local: false,
-        domain: "myDomain.io"
-      },
-      is_local: false,
-      is_playable: true
-    },
-    credit: "",
-    joinphrase: " and ",
-    index: 22
-  }],
-  disc_number: 7,
-
-  listen_url: "https://funkwhale.audio",
-  creation_date: "12345",
-  attributed_to: {
-    id: 0,
-    summary: "",
-    preferred_username: "User12345",
-    full_username: "User12345",
-    is_local: false,
-    domain: "myDomain.io"
-  },
-
-  is_playable: true,
-  is_local: false
-}
-
-const user: User = {
-  id: 12,
-  avatar: {
-    uuid: "",
-    urls: {
-      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
-      medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
-      large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
-    }
-  },
-  email: "user12345@example.org",
-  summary: { text: "Hi! I'm Example from The Internet.", content_type: "text" },
-  username: "user12345",
-  full_username: "user12345",
-  instance_support_message_display_date: "?",
-  funkwhale_support_message_display_date: "?",
-  is_superuser: true,
-  privacy_level: "everyone"
-}
 </script>
 
 # Designing Pages
@@ -111,110 +24,17 @@ const user: User = {
 
 The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)
 
-### Responsivity
+## Page sections
 
-- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
-- On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
-- The remaining space is evenly distributed.
-- Title rows align with the content below them.
+Use the [Layout Section component](/components/ui/layout/section) to structure the page into separate sections, each with a heading. Make sure the heading level hierarchy makes sense.
 
-Resize the window to observe how the items move.
+<Section :alignLeft="alignLeft" small-items h3="My albums" :action="{ text:'Go to library', to:'/' }">
+    <Card small solid yellow title="Album 1" />
+    <Card small solid green title="Album 2" />
+    <Card small solid blue title="Album 3" />
+</Section>
 
-<Layout flex>
-<Toggle v-model="alignLeft" label="Left-align the layout"/>
-</Layout>
-
----
-
-<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
-<Layout
-    grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
-    v-bind="attributes"
->
-    <!-- The title row's width is a multiple of 3 rows -->
-    <Layout flex no-gap
-        style="grid-column: 1 / -1; align-self: baseline;"
-    >
-        <!-- Set distance between baseline and previous row -->
-        <Spacer v
-            :size="64"
-            style="outline:1px solid red; align-self: baseline;"
-        />
-        <!-- Flexible row content -->
-        <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
-        <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
-            Albums
-        </h3>
-        <Spacer grow />
-        <Button ghost thin auto align-self="baseline"
-            style="grid-column:-1;"
-        >
-            Show all
-        </Button>
-    </Layout>
-</Layout>
-<Layout solid default
-    style="position:relative;"
-    grid="auto / repeat(auto-fit, 46px)"
-    v-bind="attributes"
->
-    <Card small title="Relatively Long Album Name">
-        Artist Name
-        13 tracks
-    </Card>
-    <Card small title="Relatively Long Album Name">
-        Artist Name
-        13 tracks
-    </Card>
-    <Card small title="Relatively Long Album Name">
-        Artist Name
-        13 tracks
-    </Card>
-    <Card small title="Relatively Long Album Name">
-        Artist Name
-        13 tracks
-    </Card>
-    <Card small title="Relatively Long Album Name">
-        Artist Name
-        13 tracks
-    </Card>
-</Layout>
-
-<Layout
-    grid="auto / repeat(auto-fit, calc(46px * 4 + 32px * 3))"
-    v-bind="attributes"
->
-    <Layout flex no-gap
-        style="grid-column: 1 / -1; align-self: baseline;"
-    >
-        <!-- Set distance between baseline and previous row -->
-        <Spacer v
-            :size="64"
-            style="outline:1px solid red; align-self: baseline;"
-        />
-        <!-- Flexible row content -->
-        <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
-        <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
-            Tracks
-        </h3>
-        <Spacer grow />
-        <Button ghost thin auto align-self="baseline"
-            style="grid-column:-1;"
-        >
-            Show all
-        </Button>
-    </Layout>
-</Layout>
-<Layout solid default
-    style="position:relative;"
-    grid="auto / repeat(auto-fit, 46px)"
-    v-bind="attributes"
->
-    <Activity :track="track" :user="user" />
-    <Activity :track="track" :user="user" />
-    <Activity :track="track" :user="user" />
-</Layout>
-</div>
+Sections and their contentsare automatically aligned to the default grid.
 
 ## Navigation