diff --git a/README.md b/README.md
index c7cb83a..cc3fe7d 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,16 @@ npm run build-docs
 
 The GitHub pages documentation is built into `/dist/docs` (defined in `vue.config.js`). It is configured as a subtree of the GitHub repo on the `gh-pages` branch.
 
+
+### Running Documentation
+
+```bash
+npm run serve
+```
+
+The documentation should then become available at `http://localhost:8080` (or the next available port)
+
+
 ## References
 
 Project structure inspired by: https://blog.logrocket.com/building-vue-3-component-library/
diff --git a/dist/forge-ui-components.css b/dist/forge-ui-components.css
index 96a73fe..bb3c497 100644
--- a/dist/forge-ui-components.css
+++ b/dist/forge-ui-components.css
@@ -29,7 +29,6 @@ h3 {
   margin-bottom: 6px;
   font-weight: bold; }
 code {
-  background-color: #F3F4F6;
   border-radius: 6px;
   border: 1px solid #E5E7EB;
   padding: 9px; }
@@ -44,7 +43,12 @@ code {
   font-size: 0.85rem;
   line-height: 20px;
   height: 32px;
-  position: relative; }
+  position: relative;
+  justify-content: center;
+  font-weight: bold;
+  height: auto;
+  padding: 8px 16px;
+  border: 0; }
 .ff-btn.ff-btn-icon {
     padding: 6px 9px; }
 .ff-btn.ff-btn-small {
@@ -57,29 +61,26 @@ code {
 .ff-btn:hover {
     cursor: pointer; }
 .ff-btn--primary {
-    background-color: #1E3A8A;
-    border: 1px solid #1E3A8A;
-    color: #F9FAFB; }
+    background-color: #BC3838;
+    color: white; }
 .ff-btn--primary:hover {
-      background-color: #4338CA; }
+      background-color: #AB1818; }
 .ff-btn--secondary {
-    background-color: white;
-    color: #1E3A8A;
-    border: 1px solid #1E3A8A; }
+    color: white;
+    background-color: #31959A; }
 .ff-btn--secondary:hover {
-      background-color: #4338CA;
-      border-color: #4338CA;
-      color: white; }
+      background-color: #397B7E; }
 .ff-btn--tertiary {
-    color: #1E3A8A; }
+    color: #31959A; }
 .ff-btn--tertiary:hover {
-      background-color: #4338CA;
+      background-color: #397B7E;
       color: white; }
 .ff-btn--danger {
-    color: #D12B2B;
-    border: 1px solid #D12B2B; }
+    color: white;
+    background-color: #D82525;
+    border: 1px solid #D82525; }
 .ff-btn--danger:hover {
-      background-color: #D12B2B;
+      background-color: #D82525;
       color: white; }
 .ff-btn .ff-btn--icon,
   .ff-btn .ff-btn--icon svg {
@@ -117,3 +118,41 @@ code {
   padding: 6px 9px;
   height: 32px;
   width: 100%; }
+.ff-input.ff-text-input:focus {
+    outline: none; }
+.ff-bg-light {
+  color: #1F2937;
+  background-color: #F9FAFB;
+  /* Core */
+  /* FlowForge Components */ }
+.ff-bg-light h1, .ff-bg-light h2, .ff-bg-light h3, .ff-bg-light h4, .ff-bg-light h5 {
+    color: #374151; }
+.ff-bg-light p {
+    color: #1F2937; }
+.ff-bg-light select {
+    background-color: #F9FAFB; }
+.ff-bg-light code {
+    background-color: #F3F4F6;
+    border-color: #E5E7EB; }
+.ff-bg-light .ff-input.ff-text-input {
+    background-color: white;
+    border-color: #D1D5DB; }
+.ff-bg-light .ff-input.ff-text-input:focus {
+      border-color: #31959A; }
+.ff-bg-dark {
+  color: #F9FAFB;
+  background-color: #1F2937;
+  /* Core */
+  /* FlowForge Components */ }
+.ff-bg-dark table td, .ff-bg-dark table th {
+    border-color: #6B7280; }
+.ff-bg-dark select {
+    background-color: #1F2937; }
+.ff-bg-dark code {
+    background-color: #111827;
+    border-color: #374151; }
+.ff-bg-dark .ff-input.ff-text-input {
+    background-color: #374151;
+    border-color: #111827; }
+.ff-bg-dark .ff-input.ff-text-input:focus {
+      border-color: #31959A; }
diff --git a/dist/forge-ui-components.js b/dist/forge-ui-components.js
index 67680b4..6cdb599 100644
--- a/dist/forge-ui-components.js
+++ b/dist/forge-ui-components.js
@@ -5,6 +5,10 @@ var vue = require('vue');
 var script$1 = {
     name: 'ff-button',
     props: {
+        type: {
+            default: 'button', // "button" or "submit"
+            type: String
+        },
         kind: {
             default: 'primary',
             type: String // "primary", "secondary", "tertiary"
@@ -56,6 +60,7 @@ const _hoisted_3 = {
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("button", {
     class: vue.normalizeClass(["ff-btn", 'ff-btn--' + $props.kind + ($options.hasIcon ? ' ff-btn-icon' : '') + ($props.size === 'small' ? ' ff-btn-small' : '') + ($props.size === 'full-width' ? ' ff-btn-fwidth' : '')]),
+    type: "button",
     onClick: _cache[0] || (_cache[0] = $event => ($options.go()))
   }, [
     ($options.hasIconLeft)
@@ -111,13 +116,14 @@ var script = {
     emits: ['update:modelValue', 'input', 'blur', 'keyup']
 };
 
-const _hoisted_1 = ["type", "placeholder", "value"];
+const _hoisted_1 = ["type", "placeholder", "disabled", "value"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("input", {
     type: $props.password ? 'password' : 'text',
     class: "ff-input ff-text-input",
     placeholder: $props.placeholder,
+    disabled: $props.disabled,
     value: $props.modelValue,
     onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
     onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
diff --git a/dist/forge-ui-components.mjs b/dist/forge-ui-components.mjs
index accdb1e..600ea47 100644
--- a/dist/forge-ui-components.mjs
+++ b/dist/forge-ui-components.mjs
@@ -3,6 +3,10 @@ import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommen
 var script$1 = {
     name: 'ff-button',
     props: {
+        type: {
+            default: 'button', // "button" or "submit"
+            type: String
+        },
         kind: {
             default: 'primary',
             type: String // "primary", "secondary", "tertiary"
@@ -54,6 +58,7 @@ const _hoisted_3 = {
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", {
     class: normalizeClass(["ff-btn", 'ff-btn--' + $props.kind + ($options.hasIcon ? ' ff-btn-icon' : '') + ($props.size === 'small' ? ' ff-btn-small' : '') + ($props.size === 'full-width' ? ' ff-btn-fwidth' : '')]),
+    type: "button",
     onClick: _cache[0] || (_cache[0] = $event => ($options.go()))
   }, [
     ($options.hasIconLeft)
@@ -109,13 +114,14 @@ var script = {
     emits: ['update:modelValue', 'input', 'blur', 'keyup']
 };
 
-const _hoisted_1 = ["type", "placeholder", "value"];
+const _hoisted_1 = ["type", "placeholder", "disabled", "value"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("input", {
     type: $props.password ? 'password' : 'text',
     class: "ff-input ff-text-input",
     placeholder: $props.placeholder,
+    disabled: $props.disabled,
     value: $props.modelValue,
     onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
     onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value))),
diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
index d1e9261..a7d46ec 100644
--- a/docs/DesignLanguage.vue
+++ b/docs/DesignLanguage.vue
@@ -10,83 +10,92 @@
             </li>
         </ul>
     </nav>
-    <main>
-        <!-- <h1>Documentation</h1> -->
-        <div class="section" id="section-buttons">
-            <!-- <markdown-viewer :content="'# Hello World'"/> -->
-            <div>
-                <h1>Buttons</h1>
-                <h2 ref="ff-button"><pre>ff-button</pre></h2>
-                <h3>Properties:</h3>
-                <props-table :rows="groups[0].components[0].props"></props-table>
-                <h3>Slots:</h3>
-                <slots-table :rows="groups[0].components[0].slots"></slots-table>
-                <h3>Examples:</h3>
-                <div class="examples">
-                    <div class="example">
-                        <ff-button>Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[0].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="secondary">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[1].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="tertiary">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[2].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="danger">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[3].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button :disabled="true">Hello World</ff-button>
-                        <code>{{ groups[0].components[0].examples[4].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon-left><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[5].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon-right><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[6].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary" size="small">
-                            <template v-slot:icon-left><PlusSmIcon /></template>
-                            Hello World
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[7].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-button kind="primary">
-                            <template v-slot:icon><PlusSmIcon /></template>
-                        </ff-button>
-                        <code>{{ groups[0].components[0].examples[8].code }}</code>
+    <main :class="{'ff-bg-light': theme === 'light', 'ff-bg-dark': theme === 'dark'}">
+        <!-- Theme Selection -->
+        <div class="theme-selection">
+            <label>Theme:</label>
+            <select v-model="theme">
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </div>
+        <div class="container">
+            <div class="section" id="section-buttons">
+                <!-- <markdown-viewer :content="'# Hello World'"/> -->
+                <div>
+                    <h1>Buttons</h1>
+                    <h2 ref="ff-button"><pre>ff-button</pre></h2>
+                    <h3>Properties:</h3>
+                    <props-table :rows="groups[0].components[0].props"></props-table>
+                    <h3>Slots:</h3>
+                    <slots-table :rows="groups[0].components[0].slots"></slots-table>
+                    <h3>Examples:</h3>
+                    <div class="examples">
+                        <div class="example">
+                            <ff-button>Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[0].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="secondary">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[1].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="tertiary">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[2].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="danger">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[3].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button :disabled="true">Hello World</ff-button>
+                            <code>{{ groups[0].components[0].examples[4].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon-left><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[5].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon-right><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[6].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary" size="small">
+                                <template v-slot:icon-left><PlusSmIcon /></template>
+                                Hello World
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[7].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-button kind="primary">
+                                <template v-slot:icon><PlusSmIcon /></template>
+                            </ff-button>
+                            <code>{{ groups[0].components[0].examples[8].code }}</code>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div>
-                <h1>Inputs</h1>
-                <h2 ref="ff-text-input"><pre>ff-text-input</pre></h2>
-                <h3>Properties:</h3>
-                <props-table :rows="groups[1].components[0].props"></props-table>
-                <h3>Examples:</h3>
-                <div class="examples">
-                    <div class="example">
-                        <ff-text-input placeholder="Insert something here..." v-model="models.textInput0"/>
-                        {{ models.textInput0 }}
-                        <code>{{ groups[1].components[0].examples[0].code }}</code>
-                    </div>
-                    <div class="example">
-                        <ff-text-input :password="true" placeholder="Password goes here..."/>
-                        <code>{{ groups[1].components[0].examples[1].code }}</code>
+                <div>
+                    <h1>Inputs</h1>
+                    <h2 ref="ff-text-input"><pre>ff-text-input</pre></h2>
+                    <h3>Properties:</h3>
+                    <props-table :rows="groups[1].components[0].props"></props-table>
+                    <h3>Examples:</h3>
+                    <div class="examples">
+                        <div class="example">
+                            <ff-text-input placeholder="Insert something here..." v-model="models.textInput0"/>
+                            {{ models.textInput0 }}
+                            <code>{{ groups[1].components[0].examples[0].code }}</code>
+                        </div>
+                        <div class="example">
+                            <ff-text-input :password="true" placeholder="Password goes here..."/>
+                            <code>{{ groups[1].components[0].examples[1].code }}</code>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -114,6 +123,7 @@ export default {
     },
     data () {
         return {
+            theme: 'light',
             models: {
                 textInput0: ''
             },
diff --git a/docs/index.scss b/docs/index.scss
index 6ea8d77..816586f 100644
--- a/docs/index.scss
+++ b/docs/index.scss
@@ -23,11 +23,17 @@ nav {
     color: $ff-white;
 }
 
-main {
-    color: $ff-grey-800;
+.container {
     max-width: 968px;
 }
 
+.theme-selection {
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: $ff-unit-sm $ff-unit-md;
+}
+
 h1 {
     border-bottom-width: 1px;
 }
diff --git a/package.json b/package.json
index 6568961..c7884b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flowforge/forge-ui-components",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "",
     "author": {
         "name": "FlowForge Inc."
diff --git a/src/index.scss b/src/index.scss
index 4fdf1df..8c62bc0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -5,3 +5,6 @@
 @import "./stylesheets/ff-utility.scss";
 @import "./stylesheets/ff-core.scss";
 @import "./stylesheets/ff-components.scss";
+
+@import "./stylesheets/ff-theme-light.scss";
+@import "./stylesheets/ff-theme-dark.scss";
\ No newline at end of file
diff --git a/src/stylesheets/ff-colors.scss b/src/stylesheets/ff-colors.scss
index 1d1e3c5..0ae4f4d 100644
--- a/src/stylesheets/ff-colors.scss
+++ b/src/stylesheets/ff-colors.scss
@@ -26,6 +26,17 @@ $ff-red-700: #AB1818;
 $ff-red-800: #8F0001;
 $ff-red-900: #760000;
 
+$ff-teal-50: #E4FBFC;
+$ff-teal-100: #C4F3F5;
+$ff-teal-200: #B2EBEE;
+$ff-teal-300: #8CE2E7;
+$ff-teal-400: #74D4D9;
+$ff-teal-500: #50C3C9;
+$ff-teal-600: #35AAB0;
+$ff-teal-700: #31959A;
+$ff-teal-800: #397B7E;
+$ff-teal-900: #406466;
+
 $ff-blue-50: #EFF6FF;
 $ff-blue-100: #DBEAFE;
 $ff-blue-200: #BFDBFE;
diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
index 3125118..1f9a812 100644
--- a/src/stylesheets/ff-components.scss
+++ b/src/stylesheets/ff-components.scss
@@ -11,6 +11,12 @@
   line-height: 20px;
   height: 32px;
   position: relative;
+  
+  justify-content: center;
+  font-weight: bold;
+  height: auto;
+  padding: 8px 16px;
+  border: 0;
 
   &.ff-btn-icon {
     padding: $ff-unit-sm $ff-unit-md;
@@ -57,7 +63,8 @@
     }
   }
   &--danger {
-    color: $ff-color--danger;
+    color: $ff-white;
+    background-color: $ff-color--danger;
     border: 1px solid $ff-color--danger;
     &:hover {
       background-color: $ff-color--danger;
@@ -100,7 +107,8 @@
     .ff-btn--icon-left {
       left: 0;
       padding-left: $ff-unit-lg;
-    }.ff-btn--icon-left {
+    }
+    .ff-btn--icon-left {
       right: 0;
       padding-right: $ff-unit-lg;
     }
@@ -108,9 +116,6 @@
 
   &:disabled {
     cursor: not-allowed;
-    background-color: $ff-white;
-    border-color: $ff-grey-300;
-    color: $ff-grey-300;
   }
 }
 
@@ -121,5 +126,8 @@
     padding: $ff-unit-sm $ff-unit-md;
     height: 32px;
     width: 100%;
+    &:focus {
+      outline: none;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/stylesheets/ff-core.scss b/src/stylesheets/ff-core.scss
index 32f6f03..c0f54ce 100644
--- a/src/stylesheets/ff-core.scss
+++ b/src/stylesheets/ff-core.scss
@@ -39,7 +39,6 @@ h3 {
 }
 
 code {
-    background-color: $ff-grey-100;
     border-radius: $ff-unit-sm;
     border: 1px solid $ff-grey-200;
     padding: $ff-unit-md;
diff --git a/src/stylesheets/ff-theme-dark.scss b/src/stylesheets/ff-theme-dark.scss
new file mode 100644
index 0000000..4fc6abc
--- /dev/null
+++ b/src/stylesheets/ff-theme-dark.scss
@@ -0,0 +1,46 @@
+.ff-bg-dark {
+    color: $ff-grey-50;
+    background-color: $ff-grey-800;
+    
+    /* Core */
+
+    table {
+        td, th {
+            border-color: $ff-grey-500;
+        }
+    }
+
+    select {
+        background-color: $ff-grey-800;
+    }
+
+    code {
+        background-color: $ff-grey-900;
+        border-color: $ff-grey-700;
+    }
+
+    /* FlowForge Components */
+
+    .ff-btn {
+        &--tertiary {
+            // color: $ff-teal-500;
+            &:hover {
+                // background-color: $ff-color--secondary--highlight;
+                color: $ff-white;
+            }
+        }
+        &:disabled {
+            background-color: $ff-grey-700;
+            border-color: $ff-grey-500;
+            color: $ff-grey-500;
+        }
+    }
+
+    .ff-input.ff-text-input {
+        background-color: $ff-grey-700;
+        border-color: $ff-grey-900;
+        &:focus {
+          border-color: $ff-white;
+        }
+    }
+}
diff --git a/src/stylesheets/ff-theme-light.scss b/src/stylesheets/ff-theme-light.scss
new file mode 100644
index 0000000..610c419
--- /dev/null
+++ b/src/stylesheets/ff-theme-light.scss
@@ -0,0 +1,40 @@
+.ff-bg-light {
+    color: $ff-grey-800;
+    background-color: $ff-grey-50;
+
+    /* Core */
+
+    h1, h2, h3, h4, h5{
+        color: $ff-grey-700;
+    }
+    p {
+        color: $ff-grey-800;
+    }
+
+    select {
+        background-color: $ff-grey-50;
+    }
+
+    code {
+        background-color: $ff-grey-100;
+        border-color: $ff-grey-200;
+    }
+
+    /* FlowForge Components */
+
+    .ff-btn {
+        &:disabled {
+            background-color: $ff-white;
+            border-color: $ff-grey-300;
+            color: $ff-grey-300;
+        }
+    }
+
+    .ff-input.ff-text-input {
+        background-color: $ff-white;
+        border-color: $ff-grey-300;
+        &:focus {
+        //   border-color: $ff-color--secondary;
+        }
+    }
+}
diff --git a/vue.config.js b/vue.config.js
index a4497e1..64bf11b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,10 +7,5 @@ module.exports = {
         lintStyleOnBuild: true,
         stylelint: {}
     },
-    pages: {
-        index: {
-            entry: 'docs/main.js'
-        }
-    },
     outputDir: path.resolve(__dirname, 'dist/docs')
 }