diff --git a/assets/css/main.css b/assets/css/main.css
index 4f3ca8e24..8e64b0e6a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -57,6 +57,7 @@ body {
   background: $dt('color.white');
   color: $dt('color.gray.700');
   font-family: $dt('font.sans');
+  min-width: $dt('size.xs');
 
   @dark {
     background: $dt('color.black');
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
index 4631fe729..ac178181f 100644
--- a/components/app/AppFooter.vue
+++ b/components/app/AppFooter.vue
@@ -2,6 +2,7 @@
 const docus = useDocus()
 const socialIcons = ref(null)
 const icons = computed(() => docus.value.footer?.iconLinks || [])
+const textLinks = computed(() => docus.value.footer?.textLinks || [])
 const socialIconsCount = computed(() => Object.entries(docus.value.socials).filter(([_, v]) => v).length)
 const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value : 0))
 </script>
@@ -10,20 +11,42 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
   <footer>
     <Container padded class="footer-container">
       <!-- Left -->
-      <a v-if="docus.footer?.credits" :href="docus.footer.credits.href" rel="noopener" target="_blank" class="left">
-        <Component :is="docus.footer.credits.icon" v-if="docus.footer.credits.icon" class="left-icon" />
-        <p>{{ docus.footer.credits.text }}</p>
-      </a>
+      <div class="left">
+        <a v-if="docus.footer?.credits" :href="docus.footer.credits.href" rel="noopener" target="_blank">
+          <Component :is="docus.footer.credits.icon" v-if="docus.footer.credits.icon" class="left-icon" />
+          <p>{{ docus.footer.credits.text }}</p>
+        </a>
+      </div>
 
       <!-- Center -->
       <div class="center">
-        <a v-for="icon in icons.slice(0, 6 - nbSocialIcons)" :key="icon.label" rel="noopener" :aria-label="icon.label"
-          :href="icon.href" target="_blank">
+        <!-- TODO: inner app links with NuxtLink -->
+        <a
+          v-for="link in textLinks"
+          :key="link.href"
+          class="text-link"
+          :aria-label="link.text"
+          :href="link.href"
+          :target="link.target || '_self'"
+        >
+          {{ link.text }}
+        </a>
+      </div>
+
+      <div class="right">
+        <a
+          v-for="icon in icons.slice(0, 6 - nbSocialIcons)"
+          :key="icon.label"
+          class="icon-link"
+          rel="noopener"
+          :aria-label="icon.label"
+          :href="icon.href"
+          target="_blank"
+        >
           <Icon :name="icon.icon || icon.component" />
         </a>
         <AppSocialIcons ref="socialIcons" />
       </div>
-
     </Container>
   </footer>
 </template>
@@ -40,44 +63,6 @@ css({
       borderTopColor: '{color.gray.900}'
     },
 
-    ':deep(.icon)': {
-      width: '{space.4}',
-      height: '{space.4}'
-    },
-
-    a: {
-      color: '{color.gray.500}',
-      '@dark': {
-        color: '{color.gray.400}'
-      },
-      '&:hover': {
-        color: '{color.gray.700}',
-        '@dark': {
-          color: '{color.gray.200}',
-        }
-      },
-    },
-
-    '.left': {
-      display: 'flex',
-      alignItems: 'center',
-      p: {
-        fontSize: '{fontSize.xs}',
-        fontWeight: '{fontWeight.bold}'
-      },
-      '&-icon': {
-        width: '{space.4}',
-        fill: 'currentcolor',
-        marginRight: '{space.2}',
-      }
-    },
-
-    '.center': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '{space.4}'
-    },
-
     '.footer-container': {
       display: 'grid',
       gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
@@ -87,24 +72,95 @@ css({
         justifyItems: 'legacy',
 
       },
+
+      ':deep(.icon)': {
+        width: '{space.4}',
+        height: '{space.4}'
+      },
+
+      a: {
+        color: '{color.gray.500}',
+        '@dark': {
+          color: '{color.gray.400}'
+        },
+        '&:hover': {
+          color: '{color.gray.700}',
+          '@dark': {
+            color: '{color.gray.200}',
+          }
+        },
+      },
+
       '.left': {
         gridColumn: 'span 12 / span 12',
+        display: 'flex',
+        py: '{space.4}',
+        order: 1,
+
         '@sm': {
-          gridColumn: 'span 4 / span 4'
-        }
+          gridColumn: 'span 3 / span 3',
+          order: 0,
+        },
+
+        a: {
+          display: 'flex',
+          alignItems: 'center',
+        },
+
+        p: {
+          fontSize: '{text.xs.fontSize}',
+          lineHeight: '{text.xs.lineHeight}',
+          fontWeight: '{fontWeight.medium}'
+        },
+
+        '&-icon': {
+          flexShrink: 0,
+          width: '{space.4}',
+          height: '{space.4}',
+          fill: 'currentcolor',
+          marginRight: '{space.2}',
+        },
       },
+
       '.center': {
+        gridColumn: 'span 12 / span 12',
         display: 'flex',
-        justifyContent: 'center',
+        flexDirection: 'column',
+        alignItems: 'center',
+
+        '@sm': {
+          gridColumn: 'span 6 / span 6',
+          flexDirection: 'row',
+          justifyContent: 'center',
+        },
+
+        '.text-link': {
+          padding: '{space.2}',
+          fontSize: '{text.sm.fontSize}',
+          lineHeight: '{text.sm.lineHeight}',
+          fontWeight: '{fontWeight.medium}'
+        }
+
+      },
+
+      '.right': {
         gridColumn: 'span 12 / span 12',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        // marginLeft: 'calc(0px - {space.4})',
+
         '@sm': {
-          gridColumn: 'span 4 / span 4'
+          gridColumn: 'span 3 / span 3',
+          marginRight: 'calc(0px - {space.4})',
         },
-        a: {
-          display: 'flex'
+
+        '.icon-link': {
+          display: 'flex',
+          padding: '{space.4}'
         }
       },
-    }
+    },
   }
 })
 </style>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index d0338476a..995b54b6d 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -70,7 +70,7 @@ css({
       display: 'grid',
       height: '100%',
       gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
-      gap: '2rem'
+      gap: '{space.2}'
     },
 
     '.section': {
@@ -78,26 +78,25 @@ css({
       alignItems: 'center',
       flex: 'none',
       '&.left': {
-        gridColumn: 'span 2 / span 2'
+        gridColumn: 'span 4 / span 4'
       },
       '&.center': {
-        gridColumn: 'span 8 / span 8',
+        gridColumn: 'span 4 / span 4',
         justifyContent: 'center',
         flex: '1'
       },
       '&.right': {
         display: 'flex',
-        gridColumn: 'span 2 / span 2',
+        gridColumn: 'span 4 / span 4',
         justifyContent: 'flex-end',
         alignItems: 'center',
         flex: 'none',
-        gap: '{space.4}',
+        marginRight: 'calc(0px - {space.4})',
         '.social-icons': {
           display: 'none',
           '@md': {
             display: 'flex',
             alignItems: 'center',
-            gap: '{space.4}'
           }
         }
       }
diff --git a/components/app/AppSearch.vue b/components/app/AppSearch.vue
index b5b56f2e7..d3103aa62 100644
--- a/components/app/AppSearch.vue
+++ b/components/app/AppSearch.vue
@@ -6,15 +6,14 @@ const onClick = () => element.value.querySelector('button').click()
 
 <template>
   <div class="doc-search" @click="onClick">
-    <button
-      type="button"
-      aria-label="Search"
-    >
-      <Icon name="heroicons-outline:search" />
-      <span>Search</span>
-      <span>
-        <kbd>⌘</kbd>
-        <kbd>K</kbd>
+    <button type="button" aria-label="Search">
+      <span class="content">
+        <Icon name="heroicons-outline:search" />
+        <span>Search</span>
+        <span>
+          <kbd>⌘</kbd>
+          <kbd>K</kbd>
+        </span>
       </span>
     </button>
   </div>
@@ -29,45 +28,49 @@ css({
       }
     },
     button: {
-      borderRadius: '{radii.md}',
-      display: 'flex',
-      alignItems: 'center',
-      color: '{color.gray.500}',
-      borderStyle: 'solid',
-      borderWidth: '1px',
-      borderColor: '{color.gray.100}',
-      fontSize: '{fontSize.xs}',
-      gap: '{space.2}',
-      padding: '{space.rem.375}',
-      '@dark': {
-        color: '{color.gray.400}',
-        borderColor: '{color.gray.900}',
-      },
-      '&:hover': {
-        color: '{color.gray.700}',
-        borderColor: '{color.gray.400}',
+      padding: '{space.2} {space.4}',
+      '.content': {
+        borderRadius: '{radii.md}',
+        display: 'flex',
+        alignItems: 'center',
+        color: '{color.gray.500}',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: '{color.gray.100}',
+        fontSize: '{fontSize.xs}',
+        gap: '{space.2}',
+        padding: '{space.rem.375}',
         '@dark': {
-          color: '{color.gray.200}',
-          borderColor: '{color.gray.700}',
+          color: '{color.gray.400}',
+          borderColor: '{color.gray.900}',
+        },
+        '&:hover': {
+          color: '{color.gray.700}',
+          borderColor: '{color.gray.400}',
+          '@dark': {
+            color: '{color.gray.200}',
+            borderColor: '{color.gray.700}',
+          }
+        },
+        span: {
+          '&:first-child': {
+            display: 'block',
+            fontSize: '{fontSize.xs}',
+            fontWeight: '{fontWeight.medium}',
+          },
+          '&:nth-child(2)': {
+            flex: 'none',
+            display: 'none',
+            fontSize: '{fontSize.xs}',
+            fontWeight: '{fontWeight.semibold}',
+            '@sm': {
+              display: 'block'
+            }
+          }
         }
       }
     },
-    span: {
-      '&:first-child': {
-        display: 'block',
-        fontSize: '{fontSize.xs}',
-        fontWeight: '{fontWeight.medium}',
-      },
-      '&:nth-child(2)': {
-        flex: 'none',
-        display: 'none',
-        fontSize: '{fontSize.xs}',
-        fontWeight: '{fontWeight.semibold}',
-        '@sm': {
-          display: 'block'
-        }
-      }
-    }
+
   }
 })
 </style>
diff --git a/components/app/AppSocialIcons.vue b/components/app/AppSocialIcons.vue
index 62b116de8..9e817245e 100644
--- a/components/app/AppSocialIcons.vue
+++ b/components/app/AppSocialIcons.vue
@@ -41,6 +41,7 @@ css({
   a: {
     display: 'flex',
     color: '{color.gray.500}',
+    padding: '{space.4}',
 
     '@dark': {
       color: '{color.gray.400}'
diff --git a/components/app/ThemeSelect.vue b/components/app/ThemeSelect.vue
index 829f56160..158b96578 100644
--- a/components/app/ThemeSelect.vue
+++ b/components/app/ThemeSelect.vue
@@ -23,6 +23,7 @@ const onClick = () => {
 css({
   button: {
     display: 'flex',
+    padding: '{space.4}',
 
     color: '{color.gray.500}',
     '@dark': {
diff --git a/nuxt.schema.ts b/nuxt.schema.ts
index c6e81f84e..b344ba960 100644
--- a/nuxt.schema.ts
+++ b/nuxt.schema.ts
@@ -156,6 +156,28 @@ export default defineNuxtConfigSchema({
           text: 'Powered by Docus',
           href: 'https://docus.dev'
         },
+        /**
+         * Text links to be added into center section of the footer.
+         *
+         * @studio-icon material-symbols:add-link
+         */
+        textLinks: {
+          $schema: {
+            type: 'array',
+            items: {
+              type: 'object',
+              required: ['text', 'href'],
+              properties: {
+                href: {
+                  type: 'string',
+                  description: 'URL when clicking the link'
+                },
+                text: { type: 'string', description: 'Text of the link' },
+                target: { type: 'string', description: 'Target attribute of the link' }
+              }
+            }
+          }
+        },
         /**
          * Icons to be added to Social Icons in footer.
          *
diff --git a/tokens.config.ts b/tokens.config.ts
index 8493aad8a..631e653de 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -7,7 +7,7 @@ export default defineTheme({
   },
   docus: {
     header: { height: '64px' },
-    footer: { padding: '{space.6} 0' }
+    footer: { padding: '{space.4} 0' }
   },
   typography: {
     color: {