diff --git a/packages/microcosm-www-next/src/components/browser-graphic.js b/packages/microcosm-www-next/src/components/browser-graphic.js
new file mode 100644
index 00000000..a7129eec
--- /dev/null
+++ b/packages/microcosm-www-next/src/components/browser-graphic.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { cat } from '../images'
+
+const BrowserGraphic = () => (
+  <div className="browser-graphic">
+    <header>
+      <p>Quizzfeed</p>
+    </header>
+    <main>
+      <div className="content">
+        <ol className="content__list">
+          <li>Cool</li>
+          <li>Curious</li>
+          <li>Calm</li>
+          <li>Cautious</li>
+        </ol>
+      </div>
+      <div className="graphic">
+        <img src={cat} className="graphic__img" alt="TODO" />
+      </div>
+    </main>
+  </div>
+)
+
+export default BrowserGraphic
diff --git a/packages/microcosm-www-next/src/components/graphic.js b/packages/microcosm-www-next/src/components/graphic.js
index f98270e9..57b7ef9f 100644
--- a/packages/microcosm-www-next/src/components/graphic.js
+++ b/packages/microcosm-www-next/src/components/graphic.js
@@ -1,13 +1,22 @@
 import React from 'react'
+import BrowserGraphic from './browser-graphic'
 
-const Graphic = ({ section, graphicUrl }) => (
+const Graphic = ({ section, microcosmView }) => (
   <figure
     id={'graphic-' + section}
     className="section__graphic__figure"
     data-module="ObserveGraphic"
     data-section={section}
   >
-    <img src={graphicUrl} alt="TODO" />
+    {microcosmView || section === 0 || section == 9 ? (
+      <img
+        src={`/${section}-microcosm.png`}
+        className="microcosm-graphic"
+        alt="TODO"
+      />
+    ) : (
+      <BrowserGraphic />
+    )}
   </figure>
 )
 
diff --git a/packages/microcosm-www-next/src/components/index.js b/packages/microcosm-www-next/src/components/index.js
new file mode 100644
index 00000000..d59e0144
--- /dev/null
+++ b/packages/microcosm-www-next/src/components/index.js
@@ -0,0 +1,5 @@
+import Graphic from './graphic'
+import SideNav from './side-nav'
+import ToggleContainer from './toggle-container'
+
+export { Graphic, SideNav, ToggleContainer }
diff --git a/packages/microcosm-www-next/src/components/side-nav.js b/packages/microcosm-www-next/src/components/side-nav.js
index 572c08d5..e403c8a8 100644
--- a/packages/microcosm-www-next/src/components/side-nav.js
+++ b/packages/microcosm-www-next/src/components/side-nav.js
@@ -13,14 +13,14 @@ const SideNav = ({ graphics, currentSection }) => {
   }
 
   return (
-    <aside className="section-nav">
+    <aside className="side-nav">
       <nav>
-        <ol className="section-nav__list">
+        <ol className="side-nav__list">
           {graphics.map(({ num, elem }) => (
             <li
               key={num}
               className={
-                'section-nav__list__link' +
+                'side-nav__list__link' +
                 (num === currentSection ? ' -active' : '')
               }
             >
diff --git a/packages/microcosm-www-next/src/components/toggle-container.js b/packages/microcosm-www-next/src/components/toggle-container.js
new file mode 100644
index 00000000..0dd1e181
--- /dev/null
+++ b/packages/microcosm-www-next/src/components/toggle-container.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { BrowserIcon, PlanetIcon } from '../images'
+
+const ToggleContainer = ({ typeClass, microcosmView, switchView }) => (
+  <div className={'toggle-container ' + typeClass}>
+    <h3 className="section__content__subheading">
+      Meanwhile, in {microcosmView ? 'the browser' : 'Microcosm'}
+    </h3>
+    <button onClick={switchView} className="section__toggle-btn">
+      {microcosmView ? <BrowserIcon /> : <PlanetIcon />}
+      {microcosmView ? 'Browser View' : 'Microcosm View'}
+    </button>
+  </div>
+)
+
+export default ToggleContainer
diff --git a/packages/microcosm-www-next/src/data/index.json b/packages/microcosm-www-next/src/data/index.json
index 6f1c53d7..0485d7f5 100644
--- a/packages/microcosm-www-next/src/data/index.json
+++ b/packages/microcosm-www-next/src/data/index.json
@@ -1,27 +1,65 @@
 {
+  "0": {
+    "num": "Introduction",
+    "heading": "Welcome to Microcosm",
+    "microcosmText": "Intro lorem ipsum",
+    "browserText": "Intro lorem ipsum",
+    "bookend": true
+  },
   "1": {
     "num": "01.",
     "heading": "Rendering a View",
     "microcosmText": "The <a href='TODO'>Domains</a> are in charge of keeping state organized, and provide whatever data is necessary to the Presenter. A Presenter at its core is a React Component, so it uses the data it pulls from the Domains to render the appropriate view.",
-    "browserText": "A user fires up the browser to take a quiz.",
-    "microcosmUrl": "../static/images/v.png",
-    "browserUrl": "http://via.placeholder.com/400x400"
+    "browserText": "A user fires up the browser to take a quiz."
   },
   "2": {
     "num": "02.",
     "heading": "Creating an Action",
     "microcosmText": "The <a href='TODO'>Presenter</a> creates a new <a href='TODO'>Action</a> in response to the user's click. This particular Action's job will be to fetch some data from an external API on cats. Cool cats.",
-    "browserText": "A user selects an option from the quiz list.",
-    "microcosmUrl": "http://via.placeholder.com/500x500",
-    "browserUrl": "http://via.placeholder.com/300x300"
+    "browserText": "A user selects an option from the quiz list."
   },
   "3": {
     "num": "03.",
     "heading": "The Repository",
     "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
-    "browserText": "Lorem Ipsum.",
-    "microcosmUrl": "http://via.placeholder.com/400x400",
-    "browserUrl": "http://via.placeholder.com/200x200"
+    "browserText": "Lorem Ipsum."
+  },
+  "4": {
+    "num": "04.",
+    "heading": "The Action Begins",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "5": {
+    "num": "05.",
+    "heading": "History's Job",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "6": {
+    "num": "06.",
+    "heading": "Domains Update the State",
+    "microcosmText": "As guardians of the application data, Domains are in charge of updating their state whenever an Action changes status. Here, they're alerted that the Cool Cat Action is now Open. The Modal Domain reacts by updating their state to specify that the modal is open but in a loading state. The Cat’s Domain doesn't care so they just sit there.",
+    "browserText": "The modal opens!"
+  },
+  "7": {
+    "num": "07.",
+    "heading": "Needs a Name",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "8": {
+    "num": "08.",
+    "heading": "History Keeps Track of the Actions",
+    "microcosmText": "Clicking the 'X' triggers the action process all over again. The Presenter sends a new Action up to the Repo. The Action is immediately appended to History and gets to work on it's task. This time however, it doesn't have a slow API to work with like our Cool Cat Action (which is still waiting), it just has a simple message: 'Close the Modal!'. Since the Action is so straightforward, it skips the open step and jumps it's status straight to resolve. The Domains are alerted of the new activity - Close Modal Action is Resolved, and the Modal Domain adjusts it's state accordingly. Yet again, the Cats Domain doesn't care.",
+    "browserText": "Lorem Ipsum."
+  },
+  "9": {
+    "num": "Conclusion",
+    "heading": "Conclusion",
+    "microcosmText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
+    "browserText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
+    "bookend": true
   }
 }
 
diff --git a/packages/microcosm-www-next/src/images/browser-icon.js b/packages/microcosm-www-next/src/images/browser-icon.js
new file mode 100644
index 00000000..4bfac25d
--- /dev/null
+++ b/packages/microcosm-www-next/src/images/browser-icon.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const BrowserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    style={{ marginRight: '10px' }}
+    preserveAspectRatio
+  >
+    <path d="M22,3.2C22,2.5,21.5,2,20.8,2H3.2C2.5,2,2,2.5,2,3.2V15h20C22,15,22,3.2,22,3.2z M20,13H4V4h16V13z M22,16H2c-0.2,0.4-2,4.6-2,5c0,0.5,0.4,1,1,1h22c0.6,0,1-0.5,1-1C24,20.6,22.2,16.4,22,16z M9.8,21l0.5-1h3.5l0.5,1H9.8z" />
+  </svg>
+)
+
+export default BrowserIcon
diff --git a/packages/microcosm-www-next/src/images/cat.png b/packages/microcosm-www-next/src/images/cat.png
new file mode 100644
index 00000000..94120aac
Binary files /dev/null and b/packages/microcosm-www-next/src/images/cat.png differ
diff --git a/packages/microcosm-www-next/src/images/index.js b/packages/microcosm-www-next/src/images/index.js
new file mode 100644
index 00000000..88167633
--- /dev/null
+++ b/packages/microcosm-www-next/src/images/index.js
@@ -0,0 +1,8 @@
+import menu from './menu.png'
+import cat from './cat.png'
+import VigetLogo from './viget-logo.js'
+import microcosmLogo from './microcosm-logo.png'
+import BrowserIcon from './browser-icon.js'
+import PlanetIcon from './planet-icon.js'
+
+export { menu, cat, VigetLogo, microcosmLogo, BrowserIcon, PlanetIcon }
diff --git a/packages/microcosm-www-next/src/images/menu.png b/packages/microcosm-www-next/src/images/menu.png
new file mode 100644
index 00000000..4d9f70c5
Binary files /dev/null and b/packages/microcosm-www-next/src/images/menu.png differ
diff --git a/packages/microcosm-www-next/src/images/microcosm-logo.png b/packages/microcosm-www-next/src/images/microcosm-logo.png
new file mode 100644
index 00000000..7436529d
Binary files /dev/null and b/packages/microcosm-www-next/src/images/microcosm-logo.png differ
diff --git a/packages/microcosm-www-next/src/images/planet-icon.js b/packages/microcosm-www-next/src/images/planet-icon.js
new file mode 100644
index 00000000..fa3aded6
--- /dev/null
+++ b/packages/microcosm-www-next/src/images/planet-icon.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const PlanetIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 69.7 69.4"
+    style={{ marginRight: '10px' }}
+    preserveAspectRatio
+  >
+    <g>
+      <path d="M59.5,15.3C56.7,22.1,50.7,31.3,41,41c-7.8,7.8-16.1,14-23.4,17.5c-0.8,0.4-1.6,0.7-2.3,1c-3.8-2.5-7-5.7-9.4-9.4c-1.4-2.1-2.5-4.5-3.4-6.9c-1.2-3.3-1.8-6.8-1.8-10.5c0-17.7,14.3-32,32-32c3.7,0,7.2,0.6,10.5,1.8c2.4,0.9,4.8,2,6.9,3.4C53.8,8.3,57.1,11.5,59.5,15.3z" />
+      <path d="M69.7,36.7c0,17.7-14.3,32-32,32c-3.7,0-7.2-0.6-10.5-1.8c7.4-3.9,15.5-10.1,23.1-17.7c7.6-7.6,13.8-15.7,17.7-23.1C69.1,29.5,69.7,33,69.7,36.7z" />
+    </g>
+    <g>
+      <path d="M65.9,22.2c-0.3,0.6-0.6,1.3-1,1.9C61,31.6,54.8,39.7,47.2,47.2C39.7,54.8,31.6,61,24.2,64.9c-0.6,0.4-1.3,0.7-1.9,1C17,68.4,13,69.4,9.9,69.4c-3.6,0-5.8-1.2-7.2-2.7C0,64-2,58.5,3.5,47.1c0.3-0.6,0.6-1.3,1-1.9c0.8,2.5,2,4.8,3.4,6.9C5.7,57.3,5.5,61,6.9,62.5c1.2,1.2,4.5,1.5,10.4-0.9c0.7-0.3,1.5-0.6,2.3-1C26.9,57,35.2,50.8,43,43c9.7-9.7,15.7-18.9,18.5-25.7c2.1-5.1,2.4-8.9,0.9-10.3c-0.5-0.5-1.5-0.9-3-0.9c-1.8,0-4.2,0.5-7.3,1.8c-2.1-1.4-4.4-2.5-6.9-3.4c0.6-0.4,1.3-0.7,1.9-1C58.5-2,64,0,66.7,2.7C69.4,5.3,71.4,10.9,65.9,22.2z" />
+    </g>
+  </svg>
+)
+
+export default PlanetIcon
diff --git a/packages/microcosm-www-next/src/components/viget-logo.js b/packages/microcosm-www-next/src/images/viget-logo.js
similarity index 100%
rename from packages/microcosm-www-next/src/components/viget-logo.js
rename to packages/microcosm-www-next/src/images/viget-logo.js
diff --git a/packages/microcosm-www-next/src/layouts/index.js b/packages/microcosm-www-next/src/layouts/index.js
index fcf5a397..a77c0d37 100644
--- a/packages/microcosm-www-next/src/layouts/index.js
+++ b/packages/microcosm-www-next/src/layouts/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
-import VigetLogo from '../components/viget-logo'
+import { menu, VigetLogo, microcosmLogo } from '../images'
 import '../stylesheets/app.scss'
 
 const isBrowser = typeof window !== 'undefined'
@@ -17,10 +17,10 @@ const Navigation = () => (
     <div className="wrapper">
       <h1>
         <span className="screenreader-only">Microcosm</span>
-        <img src="./static/images/microcosm-logo.png" alt="" />
+        <img src={microcosmLogo} alt="" />
       </h1>
 
-      <img src="./static/images/menu.png" alt="menu" />
+      <img src={menu} alt="menu" />
     </div>
   </nav>
 )
diff --git a/packages/microcosm-www-next/src/pages/index.js b/packages/microcosm-www-next/src/pages/index.js
index 467854be..ff5d8ac7 100644
--- a/packages/microcosm-www-next/src/pages/index.js
+++ b/packages/microcosm-www-next/src/pages/index.js
@@ -1,13 +1,12 @@
 import React from 'react'
 import data from '../data/index.json'
-import SideNav from '../components/side-nav'
-import Graphic from '../components/graphic'
+import { Graphic, SideNav, ToggleContainer } from '../components'
 
 export default class IndexPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      currentSection: 1,
+      currentSection: 0,
       graphicsMap: [],
       microcosmView: true,
       numSections: Object.keys(data)
@@ -81,10 +80,11 @@ export default class IndexPage extends React.Component {
   render() {
     let microcosmView = this.state.microcosmView
     let sectionData = data[this.state.currentSection]
+    let bookend = sectionData.bookend
+    let bookendClass = bookend ? '-end' : ''
     let text = microcosmView
       ? sectionData.microcosmText
       : sectionData.browserText
-    let browserClass = !microcosmView ? ' -browserView' : ''
 
     return (
       <div className="wrapper">
@@ -94,58 +94,45 @@ export default class IndexPage extends React.Component {
         />
 
         <section className="section">
-          <div className="toggle-container -mobile">
-            <h3
-              className={'section__content__subheading -bottom' + browserClass}
-            >
-              Meanwhile, in
-            </h3>
-            <button
-              onClick={this.switchView}
-              className={'section__toggle-btn' + browserClass}
+          {!bookend ? (
+            <ToggleContainer
+              typeClass="-mobile"
+              microcosmView={microcosmView}
+              switchView={this.switchView}
             />
-          </div>
-
+          ) : null}
           <div className="section__content">
             <div className="text-container">
               <h2 className="section__content__heading">
-                <span>{sectionData.num}</span>
+                <span className={bookendClass}>{sectionData.num}</span>
                 {sectionData.heading}
               </h2>
-              <h3
-                className={'section__content__subheading -top' + browserClass}
-              >
-                In
-              </h3>
+              {!bookend ? (
+                <h3 className="section__content__subheading">
+                  In {microcosmView ? 'Microcosm' : 'the browser'}
+                </h3>
+              ) : null}
               <p
-                className="section__content__text"
+                className={'section__content__text ' + bookendClass}
                 dangerouslySetInnerHTML={{ __html: text }}
               />
             </div>
 
-            <div className="toggle-container -desktop">
-              <h3
-                className={
-                  'section__content__subheading -bottom' + browserClass
-                }
-              >
-                Meanwhile, in
-              </h3>
-              <button
-                onClick={this.switchView}
-                className={'section__toggle-btn' + browserClass}
+            {!bookend ? (
+              <ToggleContainer
+                typeClass="-desktop"
+                microcosmView={microcosmView}
+                switchView={this.switchView}
               />
-            </div>
+            ) : null}
           </div>
 
           <div className="section__graphic">
             {this.state.numSections.map(num => (
               <Graphic
                 key={num}
-                section={num}
-                graphicUrl={
-                  microcosmView ? data[num].microcosmUrl : data[num].browserUrl
-                }
+                section={parseInt(num)}
+                microcosmView={microcosmView}
               />
             ))}
           </div>
diff --git a/packages/microcosm-www-next/src/stylesheets/app.scss b/packages/microcosm-www-next/src/stylesheets/app.scss
index 9065da9e..0aa2ae73 100644
--- a/packages/microcosm-www-next/src/stylesheets/app.scss
+++ b/packages/microcosm-www-next/src/stylesheets/app.scss
@@ -21,8 +21,9 @@
 @import 'structure/body';
 @import 'structure/nav';
 @import 'structure/section';
-@import 'structure/aside';
 @import 'structure/footer';
 
 // components (page level blocks and components)
-// @import 'components/*';
+@import 'components/browser-graphic';
+@import 'components/side-nav';
+@import 'components/toggle-container';
\ No newline at end of file
diff --git a/packages/microcosm-www-next/src/stylesheets/base/_elements.scss b/packages/microcosm-www-next/src/stylesheets/base/_elements.scss
index 40ac119c..4719fdbf 100644
--- a/packages/microcosm-www-next/src/stylesheets/base/_elements.scss
+++ b/packages/microcosm-www-next/src/stylesheets/base/_elements.scss
@@ -9,7 +9,6 @@
 }
 
 body {
-  color: color(text);
   @include font-family-regular;
   letter-spacing: 0.02em;
 }
diff --git a/packages/microcosm-www-next/src/stylesheets/components/_browser-graphic.scss b/packages/microcosm-www-next/src/stylesheets/components/_browser-graphic.scss
new file mode 100644
index 00000000..bdf36312
--- /dev/null
+++ b/packages/microcosm-www-next/src/stylesheets/components/_browser-graphic.scss
@@ -0,0 +1,99 @@
+$header-height-sm: 60px;
+$header-height-lg: 100px;
+$left-padding-sm: rem(20);
+$left-padding-lg: rem(40);
+
+.browser-graphic {
+  @include font-family-medium;
+  background: #fff;
+  border-color: #e4e4e4;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 40px 20px 20px;
+  height: 76vw;
+  max-height: inherit;
+  text-transform: uppercase;
+
+  &::before {
+    color: #bebebe;
+    content: "\2022\2022\2022";
+    font-size: rem(33);
+    position: absolute;
+    top: -2px;
+  }
+
+  header {
+    align-items: center;
+    border-bottom: 5px solid #e4e4e4;
+    color: #ff0000;
+    display: flex;
+    font-size: rem(20);
+    height: $header-height-sm;
+    padding-left: $left-padding-sm;
+
+    @include breakpoint(small-tablet-up) {
+      font-size: rem(27);
+      height: $header-height-lg;
+      padding-left: $left-padding-lg;
+    }
+  }
+
+  main {
+    display: flex;
+    height: calc(100% - #{$header-height-sm});
+
+    @include breakpoint(small-tablet-up) {
+      height: calc(100% - #{$header-height-lg});
+    }
+  }
+
+  .content,
+  .graphic {
+    flex-basis: 50%;
+  }
+
+  .graphic {
+    background: linear-gradient(#5385e1 70%, #3a69c0 70%);
+  }
+
+  .graphic__img {
+    margin: 0 auto;
+    max-width: 90%;
+    position: relative;
+    top: 43%;
+  }
+
+  .content {
+    align-items: center;
+    display: flex;
+  }
+
+  .content__list {
+    list-style-type: upper-alpha;
+    padding-left: $left-padding-sm * 2;
+
+    @include breakpoint(small-tablet-up) {
+      padding-left: $left-padding-lg * 2;
+    }
+
+    li {
+      color: #646464;
+      margin: rem(10) 0;
+
+      @media screen and (min-width: 472px) {
+        font-size: rem(23);
+        margin: rem(20) 0;
+      }
+
+      @include breakpoint(small-tablet-up) {
+        font-size: rem(30);
+        margin: rem(30) 0;
+      }
+
+      @include breakpoint(large-tablet-up) {
+        font-size: rem(34);
+        padding-left: rem(20);
+      }
+    }
+  }
+}
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss b/packages/microcosm-www-next/src/stylesheets/components/_side-nav.scss
similarity index 92%
rename from packages/microcosm-www-next/src/stylesheets/structure/_aside.scss
rename to packages/microcosm-www-next/src/stylesheets/components/_side-nav.scss
index cd3ed55d..d33c44b3 100644
--- a/packages/microcosm-www-next/src/stylesheets/structure/_aside.scss
+++ b/packages/microcosm-www-next/src/stylesheets/components/_side-nav.scss
@@ -1,6 +1,4 @@
-// SECTION NAV (ASIDE)
-
-.section-nav {
+.side-nav {
   align-items: center;
   display: flex;
   height: 100vh;
@@ -13,7 +11,7 @@
   }
 }
 
-.section-nav__list__link {
+.side-nav__list__link {
   @include breakpoint(medium-desktop-down) {
     border-radius: 2px;
     border: 1px solid white;
diff --git a/packages/microcosm-www-next/src/stylesheets/components/_toggle-container.scss b/packages/microcosm-www-next/src/stylesheets/components/_toggle-container.scss
new file mode 100644
index 00000000..f90221b8
--- /dev/null
+++ b/packages/microcosm-www-next/src/stylesheets/components/_toggle-container.scss
@@ -0,0 +1,52 @@
+.toggle-container.-mobile {
+  @include breakpoint(medium-desktop-down) {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    left: 0;
+    margin-bottom: rem(30);
+    padding: 0 rem(20);
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+  }
+
+  @include breakpoint(medium-desktop-up) {
+    @media (min-height: 901px) {
+      margin-bottom: $footer-height + 45px;
+    }
+  }
+
+  @include breakpoint(large-desktop-up) {
+    display: none;
+  }
+
+  .section__content__subheading {
+    @include breakpoint(medium-desktop-down) {
+      margin-right: 4%;
+      padding-left: rem(40);
+      position: relative;
+
+      &::before {
+        content: url('../images/arrow.svg');
+        left: 0;
+        position: absolute;
+        width: 17px;
+      }
+    }
+  }
+}
+
+.toggle-container.-desktop {
+  display: none;
+
+  @include breakpoint(large-desktop-up) {
+    display: block;
+  }
+
+  .section__content__subheading {
+    margin-bottom: rem(30);
+  }
+}
diff --git a/packages/microcosm-www-next/src/stylesheets/setup/_colors.scss b/packages/microcosm-www-next/src/stylesheets/setup/_colors.scss
index 924fdfe7..82e40c16 100644
--- a/packages/microcosm-www-next/src/stylesheets/setup/_colors.scss
+++ b/packages/microcosm-www-next/src/stylesheets/setup/_colors.scss
@@ -1,6 +1,10 @@
 // Variables
 
 $colors: (
+  bg-0-top: #ffffff,
+  bg-0-bottom: #cccccc,
+  bg-0-nav: #b2b2b2,
+  bg-0-footer: #7d7d7d,
   bg-1-top: #293256,
   bg-1-bottom: #5572a4,
   bg-1-nav: #1d233c,
@@ -13,6 +17,43 @@ $colors: (
   bg-3-bottom: #19594d,
   bg-3-nav: #2c6e67,
   bg-3-footer: #10453b,
+  bg-4-top: #fec42e,
+  bg-4-bottom: #d69b00,
+  bg-4-nav: #b18920,
+  bg-4-footer: #b18920,
+  bg-5-top: #2bbbec,
+  bg-5-bottom: #2d5cae,
+  bg-5-nav: #1e83a5,
+  bg-5-footer: #214c98,
+  bg-6-top: #a3228e,
+  bg-6-bottom: #66339d,
+  bg-6-nav: #721863,
+  bg-6-footer: #55258a,
+  bg-7-top: #a5bee4,
+  bg-7-bottom: #48648f,
+  bg-7-nav: #73859f,
+  bg-7-footer: #334d75,
+  bg-8-top: #88d0c3,
+  bg-8-bottom: #00a287,
+  bg-8-nav: #5f9188,
+  bg-8-footer: #00846e,
+  primary-1: #c9dfff,
+  primary-2: #c34040,
+  primary-3: #7aeed9,
+  primary-4: #b18920,
+  primary-5: #214c98,
+  primary-6: #ff98d8,
+  primary-7: #334d75,
+  primary-8: #00846e,
+  secondary-0: #fff,
+  secondary-1: #c9dfff,
+  secondary-2: #ffa991,
+  secondary-3: #7aeed9,
+  secondary-4: #ffdc81,
+  secondary-5: #d3f7ff,
+  secondary-6: #ff98d8,
+  secondary-7: #a5bee4,
+  secondary-8: #88d0c3,
 
   // elements
   text : #fff,
diff --git a/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss b/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss
index 0651d09e..66239103 100644
--- a/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss
+++ b/packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss
@@ -5,4 +5,4 @@ $page-gutter-desktop: 20px;
 $nav-height: 76px;
 $footer-height: 145px;
 
-$section-count: 3;
+$section-count: 8;  //all sections minus the intro & conclusion
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_body.scss b/packages/microcosm-www-next/src/stylesheets/structure/_body.scss
index a6b43d27..6bce9e42 100644
--- a/packages/microcosm-www-next/src/stylesheets/structure/_body.scss
+++ b/packages/microcosm-www-next/src/stylesheets/structure/_body.scss
@@ -2,12 +2,12 @@ $split-bg-height-mobile: 471px;
 $split-bg-height-desktop: 291px;
 
 body {
-  background-color: color(bg-1-bottom);
+  background-color: color(bg-0-bottom);
   position: relative;
   transition: transition(background-color);
 
   &::before {  //top of half split bg
-    background-color: color(bg-1-top);
+    background-color: color(bg-0-top);
     content: '';
     height: $split-bg-height-mobile;
     position: fixed;
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss b/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss
index 58b300c5..4fecb5c5 100644
--- a/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss
+++ b/packages/microcosm-www-next/src/stylesheets/structure/_footer.scss
@@ -2,7 +2,7 @@ $cta-border-height: 3px;
 $cta-bottom-padding: 6px;
 
 .footer {
-  background-color: color(bg-1-footer);
+  background-color: color(bg-0-footer);
   bottom: 0;
   height: $footer-height;
   position: relative;
@@ -13,6 +13,14 @@ $cta-bottom-padding: 6px;
   @for $i from 1 through $section-count {
     .bg-color-#{$i} & {
       background-color: color(bg-#{$i}-footer);
+
+      .viget-logo svg {
+        fill: color(secondary-#{$i});
+      }
+
+      .footer__cta {
+        color: color(secondary-#{$i});
+      }
     }
   }
 
@@ -49,16 +57,18 @@ $cta-bottom-padding: 6px;
     }
 
     svg {
-      fill: rgba(#fff, 0.5);
+      fill: color(secondary-0);
+      transition: transition(fill);
     }
   }
 }
 
 .footer__cta {
   border-bottom: $cta-border-height solid;
-  color: rgba(#fff, 0.5);
+  color: color(secondary-0);
   font-size: rem(14);
   padding-bottom: $cta-bottom-padding;
   text-decoration: none;
   text-transform: uppercase;
+  transition: transition(color);
 }
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_nav.scss b/packages/microcosm-www-next/src/stylesheets/structure/_nav.scss
index d9bcdeab..03127944 100644
--- a/packages/microcosm-www-next/src/stylesheets/structure/_nav.scss
+++ b/packages/microcosm-www-next/src/stylesheets/structure/_nav.scss
@@ -1,5 +1,5 @@
 .navigation {
-  background-color: color(bg-1-nav);
+  background-color: color(bg-0-nav);
   color: white;
   height: $nav-height;
   left: 0;
diff --git a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss
index 40c83128..585d69ff 100644
--- a/packages/microcosm-www-next/src/stylesheets/structure/_section.scss
+++ b/packages/microcosm-www-next/src/stylesheets/structure/_section.scss
@@ -53,39 +53,6 @@ $section-top-padding-desktop: $nav-height + 110px;
   }
 }
 
-.toggle-container.-mobile {
-  @include breakpoint(medium-desktop-down) {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    left: 0;
-    margin-bottom: rem(30);
-    padding: 0 rem(20);
-    position: fixed;
-    width: 100%;
-    z-index: 1;
-  }
-
-  @include breakpoint(medium-desktop-up) {
-    @media (min-height: 901px) {
-      margin-bottom: $footer-height + 45px;
-    }
-  }
-
-  @include breakpoint(large-desktop-up) {
-    display: none;
-  }
-}
-
-.toggle-container.-desktop {
-  display: none;
-
-  @include breakpoint(large-desktop-up) {
-    display: block;
-  }
-}
 
 // CONTENT - elements
 
@@ -93,6 +60,13 @@ $section-top-padding-desktop: $nav-height + 110px;
   font-size: rem(30);
   margin-bottom: rem(40);
   position: relative;
+  transition: transition(color);
+
+  @for $i from 1 through $section-count {
+    .bg-color-#{$i} & {
+      color: color(primary-#{$i});
+    }
+  }
 
   @include breakpoint(large-desktop-up) {
     margin-bottom: rem(63);
@@ -103,83 +77,60 @@ $section-top-padding-desktop: $nav-height + 110px;
     display: block;
     font-size: rem(14);
     margin-bottom: rem(5);
+    text-transform: uppercase;
 
     @include breakpoint(medium-desktop-down) {
-      left: rem(-40);
-      position: absolute;
-      top: 0.35em;
+      &:not(.-end) {
+        left: rem(-40);
+        position: absolute;
+        top: 0.35em;
+      }
     }
   }
 }
 
 .section__content__subheading {
   @include font-family-medium;
+  color: color(secondary-1);
   margin-bottom: 0.5rem;
   text-transform: uppercase;
+  transition: transition(color);
 
-  .toggle-container.-mobile & {
-    @include breakpoint(medium-desktop-down) {
-      margin-right: 4%;
-      padding-left: rem(40);
-      position: relative;
-
-      &::before {
-        content: url('../images/arrow.svg');
-        left: 0;
-        position: absolute;
-        width: 17px;
-      }
-    }
-  }
-
-  .toggle-container.-desktop & {
-    margin-bottom: rem(30);
-  }
-
-  &.-top {
-    &::after {
-      content: ' Microcosm';
-    }
-
-    &.-browserView {
-      &::after {
-        content: ' the browser';
-      }
-    }
-  }
-
-  &.-bottom {
-    &::after {
-      content: ' the browser...';
-    }
-
-    &.-browserView {
-      &::after {
-        content: ' Microcosm...';
-      }
+  @for $i from 2 through $section-count {
+    .bg-color-#{$i} & {
+      color: color(secondary-#{$i});
     }
   }
 }
 
 .section__content__text {
+  color: color(text);
   font-size: rem(18);
   line-height: rem(27);
+
+  &.-end {
+    color: #000;
+  }
 }
 
 .section__toggle-btn {
+  background-color: color(secondary-1);
   border-radius: 10px;
+  color: color(bg-1-footer);
+  display: flex;
+  fill: color(bg-1-footer);
+  font-size: rem(18);
   height: 57px;
+  justify-content: center;
   text-transform: uppercase;
+  transition: transition(all);
   width: 217px;
-  font-size: rem(18);
 
-  &::after {
-    content: 'Browser View';
-  }
-
-  &.-browserView {
-    &::after {
-      content: 'Microcosm View';
+  @for $i from 2 through $section-count {
+    .bg-color-#{$i} & {
+      background-color: color(secondary-#{$i});
+      color: color(bg-#{$i}-footer);
+      fill: color(bg-#{$i}-footer);
     }
   }
 }
@@ -224,10 +175,14 @@ $section-top-padding-desktop: $nav-height + 110px;
   &:last-child {
     @include breakpoint(large-desktop-up) {
       margin-bottom: 60vh;
+
+      &::after {
+        content: ''
+      }
     }
   }
 
-  img {
+  .microcosm-graphic {
     height: 100%;
     width: 100%;
   }
diff --git a/packages/microcosm-www-next/static/0-microcosm.png b/packages/microcosm-www-next/static/0-microcosm.png
new file mode 100644
index 00000000..b50971c9
Binary files /dev/null and b/packages/microcosm-www-next/static/0-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/1-microcosm.png b/packages/microcosm-www-next/static/1-microcosm.png
new file mode 100755
index 00000000..62f5685e
Binary files /dev/null and b/packages/microcosm-www-next/static/1-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/2-microcosm.png b/packages/microcosm-www-next/static/2-microcosm.png
new file mode 100755
index 00000000..8b216236
Binary files /dev/null and b/packages/microcosm-www-next/static/2-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/3-microcosm.png b/packages/microcosm-www-next/static/3-microcosm.png
new file mode 100755
index 00000000..9490eac3
Binary files /dev/null and b/packages/microcosm-www-next/static/3-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/4-microcosm.png b/packages/microcosm-www-next/static/4-microcosm.png
new file mode 100755
index 00000000..7e3641fd
Binary files /dev/null and b/packages/microcosm-www-next/static/4-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/5-microcosm.png b/packages/microcosm-www-next/static/5-microcosm.png
new file mode 100755
index 00000000..47e04cab
Binary files /dev/null and b/packages/microcosm-www-next/static/5-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/6-microcosm.png b/packages/microcosm-www-next/static/6-microcosm.png
new file mode 100755
index 00000000..17aefe4f
Binary files /dev/null and b/packages/microcosm-www-next/static/6-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/7-microcosm.png b/packages/microcosm-www-next/static/7-microcosm.png
new file mode 100644
index 00000000..473cca03
Binary files /dev/null and b/packages/microcosm-www-next/static/7-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/8-microcosm.png b/packages/microcosm-www-next/static/8-microcosm.png
new file mode 100755
index 00000000..075cfbc3
Binary files /dev/null and b/packages/microcosm-www-next/static/8-microcosm.png differ
diff --git a/packages/microcosm-www-next/static/9-microcosm.png b/packages/microcosm-www-next/static/9-microcosm.png
new file mode 100644
index 00000000..b50971c9
Binary files /dev/null and b/packages/microcosm-www-next/static/9-microcosm.png differ