diff --git a/content/concepts/architecture.md b/content/concepts/architecture.md
index 4cdd8602..21252d12 100644
--- a/content/concepts/architecture.md
+++ b/content/concepts/architecture.md
@@ -1,3 +1,6 @@
 ---
 title: Architecture
+description: The architecture of Ocean Protocol with all its components and how they work together.
 ---
+
+![Ocean Protocol Components](../images/components.png 'Ocean Protocol Components')
diff --git a/content/concepts/ecosystem.md b/content/concepts/ecosystem.md
index 362efcc8..8f74a440 100644
--- a/content/concepts/ecosystem.md
+++ b/content/concepts/ecosystem.md
@@ -1,3 +1,12 @@
 ---
 title: Ecosystem
+description: The Ocean Protocol network consists of various components.
 ---
+
+Learn about all of them here.
+
+-   💧 keeper
+-   🐋 aquarius
+-   brizo
+-   🦄 pleuston
+-   🦑 squid
diff --git a/content/concepts/introduction.md b/content/concepts/introduction.md
index cda8255c..3d71dac7 100644
--- a/content/concepts/introduction.md
+++ b/content/concepts/introduction.md
@@ -1,5 +1,6 @@
 ---
 title: Introduction
+description: Get up to speed with Ocean Protocol
 ---
 
 What is Ocean Protocol?
diff --git a/content/concepts/terminology.md b/content/concepts/terminology.md
index 04fe91aa..746182fe 100644
--- a/content/concepts/terminology.md
+++ b/content/concepts/terminology.md
@@ -1,9 +1,8 @@
 ---
 title: Terminology
+description: Terminology specific to Ocean Protocol.
 ---
 
-There is terminology specific to Ocean Protocol.
-
 ## Asset
 
 A data set or data service.
diff --git a/content/images/components.png b/content/images/components.png
new file mode 100644
index 00000000..a23edb59
Binary files /dev/null and b/content/images/components.png differ
diff --git a/gatsby-config.js b/gatsby-config.js
index 6b220479..fcfe2ae7 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -26,9 +26,14 @@ module.exports = {
                     {
                         resolve: 'gatsby-remark-images',
                         options: {
-                            maxWidth: 600
+                            maxWidth: 756,
+                            quality: 80,
+                            withWebp: true,
+                            linkImagesToOriginal: false,
+                            showCaptions: true
                         }
                     },
+                    'gatsby-remark-smartypants',
                     'gatsby-remark-prismjs',
                     'gatsby-remark-autolink-headers'
                 ]
diff --git a/package.json b/package.json
index b2a79ab2..102ca927 100755
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "gatsby-remark-autolink-headers": "^2.0.10",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.0.3",
+    "gatsby-remark-smartypants": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.7",
     "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.8",
diff --git a/src/components/HeaderSection.module.scss b/src/components/HeaderSection.module.scss
index 54d15814..d8b06daf 100644
--- a/src/components/HeaderSection.module.scss
+++ b/src/components/HeaderSection.module.scss
@@ -7,6 +7,6 @@
 
 .headerSectionTitle {
     margin: 0;
-    font-size: $font-size-h4;
+    font-size: $font-size-large;
     color: $brand-grey-light;
 }
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index b6da1054..c7677c05 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -3,25 +3,6 @@ import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styles from './Sidebar.module.scss'
 
-function groupExpanded(items, pathname) {
-    var breakException = {}
-
-    try {
-        items.forEach(item => {
-            if (item.link === pathname) {
-                throw breakException
-            }
-        })
-    } catch (e) {
-        if (e !== breakException) {
-            throw e
-        } else {
-            return true
-        }
-    }
-    return false
-}
-
 const SidebarLink = ({ link, title, linkClasses }) => {
     if (link) {
         if (link.match(/^\s?http(s?)/gi)) {
@@ -82,41 +63,25 @@ export default class Sidebar extends Component {
         }
 
         return (
-            <nav>
+            <nav className={styles.sidebar}>
                 {sidebarfile.map((group, i) => (
                     <div key={i}>
-                        {groupExpanded(group.items, location.pathname) ? (
-                            <>
-                                <h4 className={styles.groupTitle}>
-                                    {group.items[0].link ? (
-                                        <SidebarLink
-                                            link={group.items[0].link}
-                                            title={group.group}
-                                            linkClasses={styles.groupTitleLink}
-                                        />
-                                    ) : (
-                                        group.group
-                                    )}
-                                </h4>
-                                <SidebarList
-                                    key={i}
-                                    items={group.items}
-                                    location={location}
+                        <h4 className={styles.groupTitle}>
+                            {group.items[0].link ? (
+                                <SidebarLink
+                                    link={group.items[0].link}
+                                    title={group.group}
+                                    linkClasses={styles.groupTitleLink}
                                 />
-                            </>
-                        ) : (
-                            <h4 className={styles.groupTitle}>
-                                {group.items[0].link ? (
-                                    <SidebarLink
-                                        link={group.items[0].link}
-                                        title={group.group}
-                                        linkClasses={styles.groupTitleLink}
-                                    />
-                                ) : (
-                                    group.group
-                                )}
-                            </h4>
-                        )}
+                            ) : (
+                                group.group
+                            )}
+                        </h4>
+                        <SidebarList
+                            key={i}
+                            items={group.items}
+                            location={location}
+                        />
                     </div>
                 ))}
             </nav>
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 6c894762..bd6d36a0 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,18 +1,33 @@
 @import 'variables';
 
+.sidebar {
+    padding-top: $spacer / 2;
+}
+
 .groupTitle {
-    font-size: $font-size-large;
-    margin-bottom: $spacer / 2;
+    font-size: $font-size-small;
+    font-family: $font-family-button;
+    text-transform: uppercase;
+    margin-top: $spacer;
+    margin-bottom: $spacer / 4;
 }
 
 .groupTitleLink {
     color: $brand-grey-light;
+
+    &:hover,
+    &:focus {
+        transform: none;
+        color: $brand-grey-light;
+    }
 }
 
 .list {
     list-style: none;
     margin: 0;
     padding: 0;
+    border-left: 1px solid $brand-grey-lighter;
+    margin-left: $spacer / 2;
 
     li {
         display: block;
@@ -20,12 +35,21 @@
 }
 
 .link {
-    color: $brand-grey-light;
+    color: $brand-grey;
     display: inline-block;
     padding: $spacer / 6 $spacer / 2;
+    border-left: .1rem solid transparent;
+    margin-left: -.05rem;
+
+    &:hover,
+    &:focus {
+        transform: none;
+        color: $brand-purple;
+    }
 }
 
 .active {
     composes: link;
-    color: $brand-grey;
+    color: $brand-purple;
+    border-left-color: $brand-purple;
 }
diff --git a/src/data/sidebars/concepts.yml b/src/data/sidebars/concepts.yml
index 2405dd8d..92dce312 100644
--- a/src/data/sidebars/concepts.yml
+++ b/src/data/sidebars/concepts.yml
@@ -2,10 +2,10 @@
   items:
     - title: What is Ocean Protocol?
       link: /concepts/introduction/
-    - title: Terminology
-      link: /concepts/terminology/
     - title: Ecosystem overview
       link: /concepts/ecosystem/
+    - title: Terminology
+      link: /concepts/terminology/
 
 - group: Architecture
   items:
diff --git a/src/pages/index.js b/src/pages/index.js
index 89ce88b6..00eaa03e 100755
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -25,11 +25,11 @@ const IndexPage = ({ location }) => (
                 Understand the fundamentals of Ocean Protocol.
             </SectionLink>
 
-            <SectionLink to="/setup/" title="Setup Guides">
+            <SectionLink to="/setup/keeper/" title="Setup Guides">
                 Setting up the Ocean Protocol components.
             </SectionLink>
 
-            <SectionLink to="/tutorials/" title="Tutorials">
+            <SectionLink to="/tutorials/jupyter/" title="Tutorials">
                 Browse tutorials for most common setup and development
                 use-cases.
             </SectionLink>
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 352d4c03..7c47e225 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -30,9 +30,9 @@ $font-size-mini:        .65rem;
 $font-size-text:        $font-size-base;
 $font-size-label:       $font-size-base;
 $font-size-title:       1.4rem;
-$font-size-h1:          3.4rem;
-$font-size-h2:          2.7rem;
-$font-size-h3:          2rem;
+$font-size-h1:          3rem;
+$font-size-h2:          2rem;
+$font-size-h3:          1.7rem;
 $font-size-h4:          1.5rem;
 $font-size-h5:          1.125rem;
 
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index 3205e48d..9881e183 100644
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@@ -17,23 +17,31 @@ export default class DocTemplate extends Component {
         const { location } = this.props
         const post = this.props.data.markdownRemark
         const { section } = post.fields
+        const { title, description } = post.frontmatter
 
         return (
             <Layout location={location}>
                 <HeaderSection title={section} />
                 <Content>
-                    <div className={styles.wrapper}>
+                    <main className={styles.wrapper}>
                         <aside className={styles.sidebar}>
                             <Sidebar location={location} sidebar={section} />
                         </aside>
 
-                        <main className={styles.main}>
-                            <h1>{post.frontmatter.title}</h1>
+                        <article className={styles.main}>
+                            <header className={styles.header}>
+                                <h1 className={styles.title}>{title}</h1>
+                                {description && (
+                                    <p className={styles.lead}>{description}</p>
+                                )}
+                            </header>
+
                             <div
+                                className={styles.docContent}
                                 dangerouslySetInnerHTML={{ __html: post.html }}
                             />
-                        </main>
-                    </div>
+                        </article>
+                    </main>
                 </Content>
             </Layout>
         )
@@ -53,6 +61,7 @@ export const pageQuery = graphql`
             html
             frontmatter {
                 title
+                description
             }
             fields {
                 section
diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss
index 7aa91896..60381650 100644
--- a/src/templates/Doc.module.scss
+++ b/src/templates/Doc.module.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .wrapper {
-    @media (min-width: $break-point--small) {
+    @media (min-width: $break-point--medium) {
         display: flex;
         justify-content: space-between;
     }
@@ -14,3 +14,27 @@
 .main {
     flex: 0 0 70%;
 }
+
+.header {
+    margin-top: $spacer;
+    margin-bottom: $spacer * $line-height;
+}
+
+.title {
+    font-size: $font-size-h1;
+    margin-top: 0;
+    margin-bottom: $spacer / $line-height;
+}
+
+.lead {
+    font-size: $font-size-large;
+}
+
+.docContent {
+    figcaption {
+        font-size: $font-size-small;
+        text-align: center;
+        color: $brand-grey-light;
+        margin-top: $spacer / 2;
+    }
+}