diff --git a/front/ui-docs/.vitepress/theme/Theme.vue b/front/ui-docs/.vitepress/theme/Theme.vue
index 6c6c34497..263960be7 100644
--- a/front/ui-docs/.vitepress/theme/Theme.vue
+++ b/front/ui-docs/.vitepress/theme/Theme.vue
@@ -16,7 +16,14 @@ const { Theme } = DefaultTheme
 }
 
 .Layout {
-  background-color: light-dark(white, black);
+  --vp-code-block-bg: light-dark(var(--fw-beige-200), var(--fw-gray-900));
+  --vp-c-bg-alt: light-dark(var(--fw-beige-300), var(--fw-gray-850));
+  --vp-c-divider: light-dark(var(--fw-beige-300), var(--fw-gray-850));
+  --vp-code-line-highlight-color: light-dark(var(--fw-beige-300), var(--fw-gray-850));
+  --vp-custom-block-details-bg: light-dark(var(--fw-beige-400), var(--fw-gray-800));
+  --vp-nav-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
+  --vp-sidebar-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
+  background-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
 }
 
 .VPNavBarTitle .title {
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 036c4279c..e7af845dc 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -24,29 +24,29 @@ The following containers are responsive. Change your window's size or select a d
 
 <Layout flex style="--gap:8px">
   <Card width="163px" title="flex" to="/components/ui/layout/flex" >
-    <Layout flex>
+    <Layout flex style="outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
-      <Button secondary icon="bi-eye" />
+      <Button outline icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout>
   </Card>
   <Card width="163px" title="grid" to="/components/ui/layout/grid" >
-    <Layout grid column-width="40">
+    <Layout grid column-width="40" style="outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
-      <Button secondary icon="bi-eye" style="grid-row: span 2; height: 100%;"  />
+      <Button outline icon="bi-eye" style="grid-row: span 2; height: 100%;"  />
       <Button destructive icon="bi-eye" />
     </Layout>
   </Card>
-  <Card width="163px" title="stack" to="/components/ui/layout/stack" >
-    <Layout stack style="--gap:0; margin:-8px;">
+  <Card width="163px" title="stack" to="/components/ui/layout/stack">
+    <Layout stack style="--gap:0; margin:-8px; outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
-      <Button secondary icon="bi-eye" />
+      <Button outline icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout></Card>
   <Card width="163px" title="columns" to="./layout/columns" >
-    <Layout columns column-width="40">
+    <Layout columns column-width="40" style="outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
-      <Button secondary icon="bi-eye" />
+      <Button outline icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout></Card>
 </Layout>