diff --git a/border-radius/doc/doc.md b/border-radius/doc/doc.md
index cff7d84..d782ea3 100644
--- a/border-radius/doc/doc.md
+++ b/border-radius/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Border Radius
diff --git a/button/doc/button.md b/button/doc/button.md
index ad76d05..6040d96 100644
--- a/button/doc/button.md
+++ b/button/doc/button.md
@@ -1,7 +1,5 @@
 ```js script
-import 'https://gitcdn.link/repo/PrismJS/prism-themes/master/themes/prism-vsc-dark-plus.css';
 import Button from '../src/Button.vue';
-import '~/md-layout';
 ```
 
 # Button
diff --git a/colors/doc/colors.md b/colors/doc/colors.md
index d6ca04a..d0eadcf 100644
--- a/colors/doc/colors.md
+++ b/colors/doc/colors.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Colors
diff --git a/md-layout/src/logo.svg b/doc-layout/src/logo.svg
similarity index 100%
rename from md-layout/src/logo.svg
rename to doc-layout/src/logo.svg
diff --git a/doc-layout/src/template.js b/doc-layout/src/template.js
new file mode 100644
index 0000000..7d7016d
--- /dev/null
+++ b/doc-layout/src/template.js
@@ -0,0 +1,39 @@
+import '@divriots/dockit-core/style.css';
+import '@divriots/dockit-core/mdjs-layout/define.js';
+import { styles } from '@divriots/dockit-core/mdjs-layout';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import logoSvg from './logo.svg?raw';
+import '~/theme/src/theme.scss';
+
+export const docLayoutTemplate = (content, context) => html`
+  <style>
+    ${unsafeHTML(styles)} .preview-story .story_padded {
+      background-color: var(--doc-color-background);
+    }
+    .box {
+      width: 4rem;
+      height: 4rem;
+      background-color: var(--color-white);
+      box-shadow: var(--shadow-large);
+      border-radius: var(--border-radius-medium);
+    }
+  </style>
+  <mdjs-layout
+    .context="${context}"
+    @color-scheme-change="${(event) => {
+      if (event.detail.colorScheme === 'dark') {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('color-scheme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('color-scheme', 'light');
+      }
+    }}"
+  >
+    <div class="logo" slot="logo" aria-label="starter-vue3">
+      ${unsafeHTML(logoSvg)}
+    </div>
+    <div class="prose dark:prose-invert">${unsafeHTML(content)}</div>
+  </mdjs-layout>
+`;
diff --git a/elevation/doc/doc.md b/elevation/doc/doc.md
index 613b589..dbdaf21 100644
--- a/elevation/doc/doc.md
+++ b/elevation/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Elevation
diff --git a/introduction/doc/index.md b/introduction/doc/index.md
index 58b5bea..279c543 100644
--- a/introduction/doc/index.md
+++ b/introduction/doc/index.md
@@ -1,9 +1,3 @@
-```js script
-import '~/md-layout';
-```
-
-<doc-logo></doc-logo>
-
 # Vue.js v3.x Tech Sample
 
 This is a simple Vue.js-based Design System sample.
diff --git a/md-layout/index.js b/md-layout/index.js
deleted file mode 100644
index 8420b10..0000000
--- a/md-layout/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './src';
diff --git a/md-layout/src/index.js b/md-layout/src/index.js
deleted file mode 100644
index 357e82d..0000000
--- a/md-layout/src/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { html } from 'lit';
-
-import './logo.svg.js';
-
-import '@divriots/dockit-core/style.css';
-import './md-layout.css';
-import '~/theme/src/theme.scss';
diff --git a/md-layout/src/logo.svg.js b/md-layout/src/logo.svg.js
deleted file mode 100644
index a863cb5..0000000
--- a/md-layout/src/logo.svg.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import logo from './logo.svg?raw';
-
-export class DocLogo extends LitElement {
-  static styles = css`
-    svg {
-      width: 4rem;
-      height: 4rem;
-      margin: 1rem 0;
-    }
-  `;
-
-  render() {
-    return html`${unsafeSVG(logo)}`;
-  }
-}
-
-customElements.define('doc-logo', DocLogo);
diff --git a/md-layout/src/md-layout.css b/md-layout/src/md-layout.css
deleted file mode 100644
index 0f8cbfa..0000000
--- a/md-layout/src/md-layout.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css';
-
-body {
-  background-color: var(--doc-color-background, inherit);
-}
-
-.box {
-  width: 4rem;
-  height: 4rem;
-  background-color: var(--color-white);
-  box-shadow: var(--shadow-large);
-  border-radius: var(--border-radius-medium);
-}
diff --git a/mdjs.config.js b/mdjs.config.js
new file mode 100644
index 0000000..7ec532f
--- /dev/null
+++ b/mdjs.config.js
@@ -0,0 +1,5 @@
+import { docLayoutTemplate } from './doc-layout/src/template';
+
+export default {
+  layout: docLayoutTemplate,
+};
diff --git a/spacing/doc/doc.md b/spacing/doc/doc.md
index 8af6279..ec183f0 100644
--- a/spacing/doc/doc.md
+++ b/spacing/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Spacing
diff --git a/studio.config.json b/studio.config.json
index c1bef8a..6981e41 100644
--- a/studio.config.json
+++ b/studio.config.json
@@ -17,7 +17,7 @@
         ]
       ],
       ["components", ["button"]],
-      ["dockit", ["md-layout"]]
+      ["infrastructure", ["doc-layout"]]
     ]
   }
 }
diff --git a/theme/doc/index.md b/theme/doc/index.md
index f33f5a5..87c116c 100644
--- a/theme/doc/index.md
+++ b/theme/doc/index.md
@@ -1,10 +1,7 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
-<doc-logo></doc-logo>
-
 # Vue Theme
 
 This _theme_ for [Vue.js](https://vuejs.org/) is using tokens defined at the top level (i.e. `:where(html)`) to build its own internal tokens. It also defines specific variants (`light` and `dark`) at `html` level based on the top-level tokens.
diff --git a/transition/doc/doc.md b/transition/doc/doc.md
index e2aba4b..a27bc48 100644
--- a/transition/doc/doc.md
+++ b/transition/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Transition
diff --git a/typography/doc/typography.md b/typography/doc/typography.md
index de5c42b..8de116a 100644
--- a/typography/doc/typography.md
+++ b/typography/doc/typography.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # Typography
diff --git a/z-index/doc/doc.md b/z-index/doc/doc.md
index 5de4214..e3ce4c7 100644
--- a/z-index/doc/doc.md
+++ b/z-index/doc/doc.md
@@ -1,6 +1,5 @@
 ```js script
 import '@divriots/dockit-core/css-showcases';
-import '~/md-layout';
 ```
 
 # zIndices