diff --git a/angular.json b/angular.json
index da7a6f58e..b5c3b0265 100644
--- a/angular.json
+++ b/angular.json
@@ -35,6 +35,9 @@
                         "styles": [
                             {
                                 "input": "packages/docs/src/main.scss"
+                            },
+                            {
+                                "input": "packages/docs/src/highlightjs/material-light.scss"
                             }
                         ],
                         "scripts": []
diff --git a/packages/docs/src/app/containers/component-viewer/component-api.template.html b/packages/docs/src/app/containers/component-viewer/component-api.template.html
new file mode 100644
index 000000000..17a9c598a
--- /dev/null
+++ b/packages/docs/src/app/containers/component-viewer/component-api.template.html
@@ -0,0 +1,6 @@
+API Component
+
+<doc-viewer
+    documentUrl="/docs-content/api-docs/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
+    class="docs-component-view-text-content docs-component-api">
+</doc-viewer>
diff --git a/packages/docs/src/app/containers/component-viwer/component-overview.template.html b/packages/docs/src/app/containers/component-viewer/component-overview.template.html
similarity index 100%
rename from packages/docs/src/app/containers/component-viwer/component-overview.template.html
rename to packages/docs/src/app/containers/component-viewer/component-overview.template.html
diff --git a/packages/docs/src/app/containers/component-viwer/component-viewer.component.ts b/packages/docs/src/app/containers/component-viewer/component-viewer.component.ts
similarity index 100%
rename from packages/docs/src/app/containers/component-viwer/component-viewer.component.ts
rename to packages/docs/src/app/containers/component-viewer/component-viewer.component.ts
diff --git a/packages/docs/src/app/containers/component-viwer/component-viewer.module.ts b/packages/docs/src/app/containers/component-viewer/component-viewer.module.ts
similarity index 100%
rename from packages/docs/src/app/containers/component-viwer/component-viewer.module.ts
rename to packages/docs/src/app/containers/component-viewer/component-viewer.module.ts
diff --git a/packages/docs/src/app/containers/component-viwer/component-viewer.template.html b/packages/docs/src/app/containers/component-viewer/component-viewer.template.html
similarity index 100%
rename from packages/docs/src/app/containers/component-viwer/component-viewer.template.html
rename to packages/docs/src/app/containers/component-viewer/component-viewer.template.html
diff --git a/packages/docs/src/app/containers/component-viwer/component-api.template.html b/packages/docs/src/app/containers/component-viwer/component-api.template.html
deleted file mode 100644
index ad678669e..000000000
--- a/packages/docs/src/app/containers/component-viwer/component-api.template.html
+++ /dev/null
@@ -1 +0,0 @@
-API Component
diff --git a/packages/docs/src/app/docs.module.ts b/packages/docs/src/app/docs.module.ts
index dd913b1f3..17e44f2e8 100644
--- a/packages/docs/src/app/docs.module.ts
+++ b/packages/docs/src/app/docs.module.ts
@@ -16,8 +16,8 @@ import {
     ComponentApiComponent,
     ComponentOverviewComponent,
     ComponentViewerComponent
-} from './containers/component-viwer/component-viewer.component';
-import { ComponentViewerModule } from './containers/component-viwer/component-viewer.module';
+} from './containers/component-viewer/component-viewer.component';
+import { ComponentViewerModule } from './containers/component-viewer/component-viewer.module';
 import { DocsComponent } from './docs.component';
 import { DocumentationItems } from './shared/documentation-items/documentation-items';
 
diff --git a/packages/docs/src/highlightjs/material-dark.scss b/packages/docs/src/highlightjs/material-dark.scss
new file mode 100644
index 000000000..eed325853
--- /dev/null
+++ b/packages/docs/src/highlightjs/material-dark.scss
@@ -0,0 +1,122 @@
+/*
+Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme  (c) Kelby Gassmanl <kelby.gassman@gmail.com>
+*/
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    background: #2B2B2D;
+    color: #CDD3D8;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+    font: 300 100%/1 Roboto Mono, monospace;
+    font-size: 14px;
+}
+
+.hljs > *::selection {
+    background-color: #3e4451;
+}
+
+.hljs-comment {
+    color: #656565;
+    font-style: italic;
+}
+
+.hljs-selector-tag {
+    color: #C792EA;
+}
+
+.hljs-string,
+.hljs-subst {
+    color: #9ccc65;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-variable,
+.hljs-template-variable {
+    color: #F77669;
+}
+
+.hljs-keyword {
+    color: #C792EA;
+}
+
+.hljs-function > .hljs-title {
+    color: #75A5FF;
+}
+
+.hljs-tag {
+    color: #ce93d8;
+}
+
+.hljs-name {
+    color: #4dd0e1;
+}
+
+.hljs-type {
+    color: #da4939;
+}
+
+.hljs-attribute {
+    color: #80CBBF;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+    color: #C792EA;
+}
+
+.hljs-params {
+    color: #EEFFF7;
+}
+
+
+.hljs-meta {
+    color: #75A5FF;
+}
+
+.hljs-title {
+    color: #75A5FF;
+}
+
+.hljs-section {
+    color: #ffc66d;
+}
+
+.hljs-addition {
+    background-color: #144212;
+    color: #e6e1dc;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-deletion {
+    background-color: #600;
+    color: #e6e1dc;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-selector-class {
+    color: #FFCB68;
+}
+
+.hljs-selector-id {
+    color: #F77669;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}
diff --git a/packages/docs/src/highlightjs/material-light.scss b/packages/docs/src/highlightjs/material-light.scss
new file mode 100644
index 000000000..e849174ef
--- /dev/null
+++ b/packages/docs/src/highlightjs/material-light.scss
@@ -0,0 +1,90 @@
+/** Adapted from https://github.com/atom-material/atom-material-syntax-light */
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    background: #FAFAFA;
+    color: #37474f;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+    font: 300 100%/1 Roboto Mono, monospace;
+    font-size: 14px;
+}
+
+.hljs > *::selection,
+.hljs-section {
+    background-color: #D6EDEA;
+}
+
+.hljs-comment {
+    color: #B0BEC5;
+    font-style: italic;
+}
+
+.hljs-tag,
+.hljs-selector-tag,
+.hljs-regexp,
+.hljs-meta {
+    color: #9c27b0;
+}
+
+.hljs-string,
+.hljs-subst {
+    color: #0d904f;
+}
+
+.hljs-number,
+.hljs-variable,
+.hljs-template-variable {
+    color: #80CBC4;
+}
+
+.hljs-name,
+.hljs-keyword,
+.hljs-type,
+.hljs-attribute {
+    color: #3b78e7;
+}
+
+.hljs-title,
+.hljs-function > .hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+    color: #6182B8;
+}
+
+.hljs-params {
+    color: #d81b60;
+}
+
+.hljs-addition {
+    color: #3b78e7;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-deletion {
+    color: #E53935;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+    color: #8796B0;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}
diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss
index e6cbf79d4..156e92bc0 100644
--- a/packages/docs/src/main.scss
+++ b/packages/docs/src/main.scss
@@ -4,6 +4,8 @@
 
 @import './app-theme';
 @import './styles/common';
+@import './styles/markdown';
+@import './styles/mosaic-fixed';
 
 
 $primary: mc-palette($mc-blue, 400, 500, 600);
diff --git a/packages/docs/src/styles/_markdown.scss b/packages/docs/src/styles/_markdown.scss
new file mode 100644
index 000000000..ef39d870c
--- /dev/null
+++ b/packages/docs/src/styles/_markdown.scss
@@ -0,0 +1,77 @@
+// Styles for overview and guide docs generated via `marked` from the material2 repo.
+
+.docs-markdown {
+    max-width: 100%;
+
+    h1 {
+        display: inline-block;
+        font-size: 34px;
+        font-weight: 400;
+        padding: 5px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
+
+    h3 {
+        font-size: 20px;
+    }
+
+    h2, h4 {
+        margin-top: 40px;
+    }
+
+    h5 {
+        font-size: 18px;
+    }
+
+    p, ul, ol {
+        font-size: 16px;
+        line-height: 28px;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    td code {
+        font-size: 14px;
+    }
+
+    pre {
+        border-radius: 5px;
+        display: flex;
+        margin: 16px auto;
+        overflow-x: auto;
+        padding: 20px;
+        white-space: pre-wrap;
+
+        code {
+            padding: 0;
+            font-size: 100%;
+        }
+    }
+
+    code {
+        padding: 3px;
+    }
+}
+
+.docs-header-link {
+    header-link a {
+        text-decoration: none;
+        // deduct -30px so the anchor icon will be positioned outside the content
+        margin-left: -30px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .material-icons {
+        visibility: hidden;
+    }
+
+    &:hover .material-icons {
+        visibility: visible;
+    }
+}
diff --git a/packages/docs/src/styles/_mosaic-fixed.scss b/packages/docs/src/styles/_mosaic-fixed.scss
new file mode 100644
index 000000000..dab452e56
--- /dev/null
+++ b/packages/docs/src/styles/_mosaic-fixed.scss
@@ -0,0 +1,5 @@
+
+.mc-tab-group {
+    // TODO: need none
+    text-align: left !important;
+}
diff --git a/tsconfig.webpack.json b/tsconfig.webpack.json
index dc34c12f1..0f11c30ae 100644
--- a/tsconfig.webpack.json
+++ b/tsconfig.webpack.json
@@ -49,6 +49,7 @@
         "packages/**/*.e2e.ts",
         "packages/mosaic-examples/**/*.*",
         "packages/cdk/schematics/**/*.*",
+        "packages/docs/**/*.*",
         "packages/dev-app/**/*.*"
     ],
     "angularCompilerOptions": {