diff --git a/data/sidebars/concepts.yml b/data/sidebars/concepts.yml
index 924c78df..8b020b6a 100644
--- a/data/sidebars/concepts.yml
+++ b/data/sidebars/concepts.yml
@@ -8,6 +8,8 @@
       link: /concepts/components/
     - title: Tools & Examples
       link: /concepts/tools/
+    - title: Engineering Principles
+      link: /concepts/principles/
 
 - group: Architecture
   items:
diff --git a/external/dev-ocean b/external/dev-ocean
index 6bbf269d..b082789e 160000
--- a/external/dev-ocean
+++ b/external/dev-ocean
@@ -1 +1 @@
-Subproject commit 6bbf269da9eaf75c0fd42bd2a71944af52db6f04
+Subproject commit b082789e850b6cdf5af129352f58e029b4a8637b
diff --git a/gatsby-node.js b/gatsby-node.js
index 9dcdeddb..f393bf48 100755
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -54,7 +54,7 @@ exports.createPages = ({ graphql, actions }) => {
                             }
                         }
 
-                        architectureDocs: allMarkdownRemark(
+                        devOceanDocs: allMarkdownRemark(
                             filter: {
                                 fileAbsolutePath: { regex: "/dev-ocean/doc/" }
                             }
@@ -98,13 +98,14 @@ exports.createPages = ({ graphql, actions }) => {
                     })
                 })
 
-                // Create Architecture section from dev-ocean contents
-                const postsArchitecture = result.data.architectureDocs.edges
+                // Create pages from dev-ocean contents
+                const postsDevOcean = result.data.devOceanDocs.edges
 
-                postsArchitecture
+                postsDevOcean
                     // only grab files with required frontmatter defined
                     .filter(
                         post =>
+                            post.node.frontmatter &&
                             post.node.frontmatter.slug &&
                             post.node.frontmatter.title &&
                             post.node.frontmatter.description &&
diff --git a/src/components/DocContent.module.scss b/src/components/DocContent.module.scss
index 2296ce31..bd24aa7b 100644
--- a/src/components/DocContent.module.scss
+++ b/src/components/DocContent.module.scss
@@ -21,6 +21,12 @@
         padding-bottom: $spacer / $line-height;
         border-bottom: 1px solid $brand-grey-lighter;
     }
+
+    table {
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+    }
 }
 
 .empty {
diff --git a/src/components/DocHeader.jsx b/src/components/DocHeader.jsx
index f62949b8..7b804d9a 100644
--- a/src/components/DocHeader.jsx
+++ b/src/components/DocHeader.jsx
@@ -1,13 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import remark from 'remark'
+import remarkReact from 'remark-react'
 import styles from './DocHeader.module.scss'
 
-const DocHeader = ({ title, description }) => (
-    <header className={styles.header}>
-        <h1 className={styles.title}>{title}</h1>
-        {description && <p className={styles.lead}>{description}</p>}
-    </header>
-)
+const DocHeader = ({ title, description }) => {
+    const descriptionHtml =
+        description &&
+        remark()
+            .use(remarkReact)
+            .processSync(description).contents
+
+    return (
+        <header className={styles.header}>
+            <h1 className={styles.title}>{title}</h1>
+            {description && <p className={styles.lead}>{descriptionHtml}</p>}
+        </header>
+    )
+}
 
 DocHeader.propTypes = {
     title: PropTypes.string.isRequired,
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 51766ade..fe43f75d 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -219,6 +219,11 @@ table {
     width: 100%;
     margin-bottom: $spacer * $line-height;
     border-collapse: collapse;
+    display: block;
+
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 
     th,
     td {
@@ -227,6 +232,7 @@ table {
         padding: $spacer / 2;
         border-bottom: 1px solid $brand-grey-lighter;
         text-align: left;
+        font-size: 90%;
 
         &[align='center'] {
             text-align: center;