diff --git a/docs/src/components/elements/Container/ContainerDoc.vue b/docs/src/components/elements/Container/ContainerDoc.vue
new file mode 100644
index 0000000..7791122
--- /dev/null
+++ b/docs/src/components/elements/Container/ContainerDoc.vue
@@ -0,0 +1,50 @@
+<template>
+  <DocSection label="Container" :code="code">
+    <template #description>
+      A standard container
+    </template>
+    <template #example>
+      <SuiContainer>
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+          ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+          magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+          quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+          arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+          Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+          Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+          Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+          Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+        </p>
+      </SuiContainer>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiContainer } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiContainer>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+    </p>
+  </SuiContainer>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Container/FluidDoc.vue b/docs/src/components/elements/Container/FluidDoc.vue
new file mode 100644
index 0000000..e008481
--- /dev/null
+++ b/docs/src/components/elements/Container/FluidDoc.vue
@@ -0,0 +1,42 @@
+<template>
+  <DocSection label="Fluid" :code="code">
+    <template #description>
+      A fluid container has no maximum width
+    </template>
+    <template #example>
+      <SuiContainer fluid>
+        <SuiHeader as="h2">Dogs Roles with Humans</SuiHeader>
+        <p>
+          Domestic dogs inherited complex behaviors, such as bite inhibition, from
+          their wolf ancestors, which would have been pack hunters with complex
+          body language. These sophisticated forms of social cognition and
+          communication may account for their trainability, playfulness, and
+          ability to fit into human households and social situations, and these
+          attributes have given dogs a relationship with humans that has enabled
+          them to become one of the most successful species on the planet today.
+        </p>
+      </SuiContainer>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiContainer, SuiHeader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiContainer fluid>
+    <SuiHeader as="h2">Dogs Roles with Humans</SuiHeader>
+    <p>
+      Domestic dogs inherited complex behaviors, such as bite inhibition, from
+      their wolf ancestors, which would have been pack hunters with complex
+      body language. These sophisticated forms of social cognition and
+      communication may account for their trainability, playfulness, and
+      ability to fit into human households and social situations, and these
+      attributes have given dogs a relationship with humans that has enabled
+      them to become one of the most successful species on the planet today.
+    </p>
+  </SuiContainer>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Container/TextAlignmentDoc.vue b/docs/src/components/elements/Container/TextAlignmentDoc.vue
new file mode 100644
index 0000000..85459e1
--- /dev/null
+++ b/docs/src/components/elements/Container/TextAlignmentDoc.vue
@@ -0,0 +1,24 @@
+<template>
+  <DocSection label="Text Alignment" :code="code">
+    <template #description>
+      A container can specify its text alignment
+    </template>
+    <template #example>
+      <SuiContainer textAlign="left">Left Aligned</SuiContainer>
+      <SuiContainer textAlign="center">Center Aligned</SuiContainer>
+      <SuiContainer textAlign="right">Right Aligned</SuiContainer>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiContainer } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiContainer textAlign="left">Left Aligned</SuiContainer>
+  <SuiContainer textAlign="center">Center Aligned</SuiContainer>
+  <SuiContainer textAlign="right">Right Aligned</SuiContainer>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Container/TextContainerDoc.vue b/docs/src/components/elements/Container/TextContainerDoc.vue
new file mode 100644
index 0000000..d794241
--- /dev/null
+++ b/docs/src/components/elements/Container/TextContainerDoc.vue
@@ -0,0 +1,52 @@
+<template>
+  <DocSection label="Text Container" :code="code">
+    <template #description>
+      A container can reduce its maximum width to more naturally accommodate a single column of text
+    </template>
+    <template #example>
+      <SuiContainer text>
+        <SuiHeader as="h2">Header</SuiHeader>
+        <p>
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+          ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+          magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+          quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+          arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+          Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+          Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+          Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+          Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+        </p>
+      </SuiContainer>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiContainer, SuiHeader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiContainer text>
+    <SuiHeader as="h2">Header</SuiHeader>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+    </p>
+  </SuiContainer>
+<\/template>`
+</script>
diff --git a/docs/src/pages/ContainerDoc.vue b/docs/src/pages/ContainerDoc.vue
deleted file mode 100644
index dcaf07b..0000000
--- a/docs/src/pages/ContainerDoc.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-  <div>
-    <sui-segment vertical>
-      <sui-container class="main">
-        <div class="intro">
-          <sui-header as="h1">Container
-            <sui-header-subheader>A container limits content to a maximum width</sui-header-subheader>
-          </sui-header>
-
-          <sui-divider hidden />
-
-          <sui-menu floated="right">
-            <sui-menu-item as="a" icon>
-              <sui-icon name="edit"></sui-icon>
-            </sui-menu-item>
-            <sui-menu-item as="a" icon>
-              <sui-icon name="github"></sui-icon>
-            </sui-menu-item>
-          </sui-menu>
-        </div>
-      </sui-container>
-    </sui-segment>
-
-    <sui-container class="main">
-      <sui-header as="h2" dividing>Types</sui-header>
-
-      <doc-example
-        title="Container"
-        description="A standard container"
-        :code="containerExample"
-      >
-        <sui-container>
-          <p>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-            ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
-            magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
-            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
-            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-            Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
-            dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-            Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
-            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
-            viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
-          </p>
-        </sui-container>
-      </doc-example>
-
-      <doc-example
-        title="Text Container"
-        description="A container can reduce its maximum width to more naturally accommodate a single column of text"
-        :code="textContainerExample"
-      >
-        <sui-container text>
-          <sui-header as="h2">Header</sui-header>
-          <p>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-            ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
-            magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
-            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
-            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-            Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
-            dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-            Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
-            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
-            viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
-          </p>
-        </sui-container>
-      </doc-example>
-
-      <sui-header as="h2" dividing>Variations</sui-header>
-
-      <doc-example
-        title="Text Alignment"
-        description="A container can specify its text alignment"
-        :code="textAlignmentExample"
-      >
-        <div>
-          <sui-container textAlign="left">Left Aligned</sui-container>
-          <sui-container textAlign="center">Center Aligned</sui-container>
-          <sui-container textAlign="right">Right Aligned</sui-container>
-        </div>
-      </doc-example>
-
-      <doc-example
-        title="Fluid"
-        description="A fluid container has no maximum width"
-        :code="fluidExample"
-      >
-        <sui-container fluid>
-          <sui-header as="h2">Dogs Roles with Humans</sui-header>
-          <p>
-            Domestic dogs inherited complex behaviors, such as bite inhibition, from
-            their wolf ancestors, which would have been pack hunters with complex
-            body language. These sophisticated forms of social cognition and
-            communication may account for their trainability, playfulness, and
-            ability to fit into human households and social situations, and these
-            attributes have given dogs a relationship with humans that has enabled
-            them to become one of the most successful species on the planet today.
-          </p>
-        </sui-container>
-      </doc-example>
-
-    </sui-container>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import DocExample from "../components/DocExample.vue"
-
-export default defineComponent({
-  name: 'ContainerDoc',
-  components: { DocExample },
-  setup() {
-    const containerExample = `<template>
-  <sui-container>
-    <p>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
-      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
-      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
-      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
-      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
-      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
-      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
-    </p>
-  </sui-container>
-</template>`
-
-    const textContainerExample = `<template>
-  <sui-container text>
-    <sui-header as="h2">Header</sui-header>
-    <p>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
-      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
-      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
-      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
-      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
-      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
-      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
-    </p>
-  </sui-container>
-</template>`
-
-    const textAlignmentExample = `<template>
-  <div>
-    <sui-container textAlign="left">Left Aligned</sui-container>
-    <sui-container textAlign="center">Center Aligned</sui-container>
-    <sui-container textAlign="right">Right Aligned</sui-container>
-  </div>
-</template>`
-
-    const fluidExample = `<template>
-  <sui-container fluid>
-    <sui-header as="h2">Dogs Roles with Humans</sui-header>
-    <p>
-      Domestic dogs inherited complex behaviors, such as bite inhibition, from
-      their wolf ancestors, which would have been pack hunters with complex
-      body language. These sophisticated forms of social cognition and
-      communication may account for their trainability, playfulness, and
-      ability to fit into human households and social situations, and these
-      attributes have given dogs a relationship with humans that has enabled
-      them to become one of the most successful species on the planet today.
-    </p>
-  </sui-container>
-</template>`
-
-    return {
-      containerExample,
-      textContainerExample,
-      textAlignmentExample,
-      fluidExample
-    }
-  }
-})
-</script>
-
-<style scoped>
-.ui.container.main {
-  margin-left: 3rem !important;
-  width: auto !important;
-  max-width: 960px !important;
-}
-
-.intro:after {
-  content: '';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.main {
-  padding: 2rem 0rem;
-}
-
-.main > h2 {
-  margin: 5rem 0rem 3rem;
-}
-
-.example {
-  padding: 2rem 0rem;
-}
-</style>
\ No newline at end of file
diff --git a/docs/src/pages/elements/Container.vue b/docs/src/pages/elements/Container.vue
new file mode 100644
index 0000000..1b38f6b
--- /dev/null
+++ b/docs/src/pages/elements/Container.vue
@@ -0,0 +1,47 @@
+<template>
+  <DocComponent
+    title="Container"
+    description="A container limits content to a maximum width"
+    :component-docs="docs"
+  />
+
+</template>
+
+<script setup>
+import DocComponent from '@/components/doc/DocComponent.vue'
+
+// Types
+import ContainerDoc from '@/components/elements/Container/ContainerDoc.vue'
+import TextContainerDoc from '@/components/elements/Container/TextContainerDoc.vue'
+
+// Variations
+import TextAlignmentDoc from '@/components/elements/Container/TextAlignmentDoc.vue'
+import FluidDoc from '@/components/elements/Container/FluidDoc.vue'
+
+const docs = [
+  {
+    id: 'container',
+    label: 'Container',
+    category: 'Types',
+    component: ContainerDoc,
+  },
+  {
+    id: 'text-container',
+    label: 'Text Container',
+    category: 'Types',
+    component: TextContainerDoc,
+  },
+  {
+    id: 'text-alignment',
+    label: 'Text Alignment',
+    category: 'Variations',
+    component: TextAlignmentDoc,
+  },
+  {
+    id: 'fluid',
+    label: 'Fluid',
+    category: 'Variations',
+    component: FluidDoc,
+  },
+]
+</script>
diff --git a/docs/src/router.ts b/docs/src/router.ts
index 7ad79c2..7300a40 100644
--- a/docs/src/router.ts
+++ b/docs/src/router.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from './pages/Home.vue'
 import GettingStarted from './pages/GettingStarted.vue'
 import Button from './pages/elements/Button.vue'
-import ContainerDoc from './pages/ContainerDoc.vue'
+import Container from './pages/elements/Container.vue'
 import DividerDoc from './pages/DividerDoc.vue'
 import EmojiDoc from './pages/EmojiDoc.vue'
 import FlagDoc from './pages/FlagDoc.vue'
@@ -53,7 +53,7 @@ const routes: any = [
     children: [
       { path: '/', component: GettingStarted },
       { path: 'elements/button', component: Button },
-      { path: 'elements/container', component: ContainerDoc },
+      { path: 'elements/container', component: Container },
       { path: 'elements/divider', component: DividerDoc },
       { path: 'elements/emoji', component: EmojiDoc },
       { path: 'elements/flag', component: FlagDoc },