diff --git a/docs/content/components/aside/rightside.demo.tsx b/docs/content/components/aside/rightside.demo.tsx
index 14a35087af..a17ba6d01d 100644
--- a/docs/content/components/aside/rightside.demo.tsx
+++ b/docs/content/components/aside/rightside.demo.tsx
@@ -2,7 +2,7 @@ import { Aside } from '@marigold/components';
 
 export default () => (
   <Aside space={4} side="right">
-    <div className="h-48 w-14 border border-slate-300 bg-slate-300" />
-    <div className="border border-slate-300 bg-slate-300" />
+    <div className="h-48 w-full border border-slate-300 bg-slate-300" />
+    <div className="h-48 w-12 border border-slate-300 bg-slate-300" />
   </Aside>
 );
diff --git a/docs/content/components/aside/space.demo.tsx b/docs/content/components/aside/space.demo.tsx
index e24dd5e10b..ae75a2c8f0 100644
--- a/docs/content/components/aside/space.demo.tsx
+++ b/docs/content/components/aside/space.demo.tsx
@@ -3,6 +3,6 @@ import { Aside } from '@marigold/components';
 export default () => (
   <Aside space={5}>
     <div className="h-28 w-14 border border-slate-300 bg-slate-300" />
-    <div className="border border-slate-300 bg-slate-300" />
+    <div className="h-28 w-full border border-slate-300 bg-slate-300" />
   </Aside>
 );
diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx
index 911de725d1..bcd943cd44 100644
--- a/docs/registry/index.tsx
+++ b/docs/registry/index.tsx
@@ -11,23 +11,6 @@ export const registry = {
     ),
     file: 'content/components/accordion/basic-accordion.demo.tsx',
   },
-  rightside: {
-    name: 'rightside',
-    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
-    file: 'content/components/aside/rightside.demo.tsx',
-  },
-  space: {
-    name: 'space',
-    demo: dynamic(() => import('@/content/components/aside/space.demo')),
-    file: 'content/components/aside/space.demo.tsx',
-  },
-  'button-variant': {
-    name: 'button-variant',
-    demo: dynamic(
-      () => import('@/content/components/button/button-variant.demo')
-    ),
-    file: 'content/components/button/button-variant.demo.tsx',
-  },
   'horizontal-breakout': {
     name: 'horizontal-breakout',
     demo: dynamic(
@@ -49,4 +32,21 @@ export const registry = {
     ),
     file: 'content/components/breakout/vertical-breakout.demo.tsx',
   },
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
+  'button-variant': {
+    name: 'button-variant',
+    demo: dynamic(
+      () => import('@/content/components/button/button-variant.demo')
+    ),
+    file: 'content/components/button/button-variant.demo.tsx',
+  },
 } as const;