diff --git a/rollup.config.js b/rollup.config.js
index 7b4ada6..cd71aff 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,3 +1,4 @@
+import { join } from 'path';
 import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
@@ -61,7 +62,11 @@ export default {
       },
       // tell svelte to handle mdsvex files
       extensions: [".svelte", ".svx"],
-      preprocess: mdsvex()
+      preprocess: mdsvex({
+        layout: {
+          _: join(__dirname, './src/docs/Layouts/Main.svelte')
+        }
+      })
     }),
     // we'll extract any component CSS out into
     // a separate file - better for performance
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index be58505..edd82f4 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -54,6 +54,4 @@
 </Carousel>
 ```
 
-<style>
 
-</style>
diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte
new file mode 100644
index 0000000..af1eb14
--- /dev/null
+++ b/src/docs/Layouts/Main.svelte
@@ -0,0 +1,32 @@
+<div class="docs__main-layout__content-container">
+  <div class="docs__main-layout__content-inner-container">
+    <slot></slot>
+  </div>
+</div>
+
+<style>
+.docs__main-layout__content-container {
+  display: flex;
+  justify-content: center;
+}
+@media screen and (min-width: 0px) {
+  .docs__main-layout__content-inner-container {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 768px) {
+  .docs__main-layout__content-inner-container {
+    width: 70%;
+  }
+}
+@media screen and (min-width: 992px) {
+  .docs__main-layout__content-inner-container {
+    width: 60%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs__main-layout__content-inner-container {
+    width: 50%;
+  }
+}
+</style>
\ No newline at end of file