diff --git a/.gitignore b/.gitignore
index 6b3abec7f5..741b7e2c50 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@
 /coverage
 /coverage-selenium.json
 /docs*
-
+archive.tar.gz
+/*/dist
 *.cjsx.js
-
 /phantomjsdriver.log
diff --git a/.travis.yml b/.travis.yml
index a3d4583e6b..9f42d14200 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,13 @@
 # `sudo:false` for faster builds.
 sudo: false
 language: node_js
-node_js:
-  - "0.12.10"
+env:
+  - OX_PROJECT=tutor
+  - OX_PROJECT=coach
+  - OX_PROJECT=exercises
+  - OX_PROJECT=shared
+before_install:
+  - "npm install -g npm@^3"
 script:
   - npm run ci
 after_failure:
diff --git a/README.md b/README.md
index f158afb22a..5b255141fe 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 [![dependency status][dependency-image]][dependency-url]
 [![dev dependency status][dev-dependency-image]][dev-dependency-url]
 
-The JavaScript client for openstax Tutor.
+The Front-end code for Openstax Tutor related projects
 
 ## Install
 
@@ -14,16 +14,16 @@ The JavaScript client for openstax Tutor.
   - If you don’t have `git` installed you can install homebrew and then `brew install git`
 1. `cd tutor-js` move into the checked out directory
 1. `npm install`
-1. `npm start`
+1. `npm run serve <project>` *(where <project is one of tutor|coach|exercises)*
 1. Point your browser to <http://localhost:8000> to use the mock data in `/api`
 
 
 ## Development
 
-- `npm start` starts up a local development webserver which rebuilds files when changed
-- `npm test` runs unit tests
+- `npm run serve <project>` starts up a local development webserver which rebuilds files when changed
+- `npm test` runs unit tests for all projects
 - `npm run coverage` generates a code coverage report
-- `gulp prod` builds minified files for production
+- `npm run build <project> archive` builds minified files for production
 
 Use `PORT=8000 npm start` to change the default webserver port.
 
diff --git a/bin/build b/bin/build
new file mode 100755
index 0000000000..607f980616
--- /dev/null
+++ b/bin/build
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+set -e
+
+bin/checkinputs "$@"
+
+export OX_PROJECT=$1
+echo Building: $OX_PROJECT
+export NODE_ENV=production
+
+[ -d $OX_PROJECT/dist ] && rm -r $OX_PROJECT/dist
+
+webpack --progress --config webpack.config.js
+
+if [ $2 == "archive" ]; then
+    cd $OX_PROJECT
+   # credit/blame to: http://stackoverflow.com/questions/8201729/rename-files-to-md5-sum-extension-bash
+   for F in dist/*.min.*; do
+       mv $F `md5sum $F | perl -MFile::Basename -ne '($m, $f) = split(/\s+/,$_); $f=basename($f); $f =~ m/(.*?)\.(.*)/; print "dist/$1-$m.$2"'`
+   done
+   tar -czf ../archive.tar.gz dist/*
+fi
diff --git a/bin/checkinputs b/bin/checkinputs
new file mode 100755
index 0000000000..8ceb9afedf
--- /dev/null
+++ b/bin/checkinputs
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+if [ $# -eq 0 ]; then
+    echo "No project to build was given. usage:"
+    echo "$0 <tutor|exercises|coach>"
+    exit 1
+fi
\ No newline at end of file
diff --git a/bin/serve b/bin/serve
new file mode 100755
index 0000000000..e56d872e8a
--- /dev/null
+++ b/bin/serve
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+set -e
+
+bin/checkinputs "$@"
+
+export OX_PROJECT=$1
+echo Serving: $OX_PROJECT
+
+webpack-dev-server --progress --config webpack.config.js
diff --git a/bin/tdd b/bin/tdd
new file mode 100755
index 0000000000..3d114f155c
--- /dev/null
+++ b/bin/tdd
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+set -e
+
+on_termination() {
+  echo killing webpack $WEBPACK_PID
+  kill -TERM $WEBPACK_PID 2>/dev/null
+}
+
+bin/checkinputs "$@"
+
+trap on_termination SIGTERM SIGINT
+
+export OX_PROJECT=$1
+echo TDD: $OX_PROJECT
+
+
+webpack-dev-server --config webpack.config.js &
+WEBPACK_PID=$!
+echo webpack started pid: $WEBPACK_PID
+
+
+karma start test/karma.config.js --auto-watch --no-single-run
diff --git a/bin/test b/bin/test
new file mode 100755
index 0000000000..1bcb2c8f32
--- /dev/null
+++ b/bin/test
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+set -e
+
+bin/checkinputs "$@"
+
+export OX_PROJECT=$1
+echo Test: $OX_PROJECT
+
+karma start test/karma.config.js --single-run
diff --git a/bin/test-ci b/bin/test-ci
new file mode 100755
index 0000000000..e6fc9e5a72
--- /dev/null
+++ b/bin/test-ci
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+set -ev
+
+# travis should be setting the OX_PROJECT variable
+# export OX_PROJECT='tutor'
+
+karma start test/karma.config.js --single-run
diff --git a/coach/.gitignore b/coach/.gitignore
new file mode 100644
index 0000000000..f7f6419eb5
--- /dev/null
+++ b/coach/.gitignore
@@ -0,0 +1,6 @@
+/node_modules
+*.orig
+/.tmp
+/dist
+/assets
+/test-failed-*.png
diff --git a/coach/.travis.yml b/coach/.travis.yml
new file mode 100644
index 0000000000..27ce7a9f0b
--- /dev/null
+++ b/coach/.travis.yml
@@ -0,0 +1,7 @@
+# `sudo:false` for faster builds.
+sudo: false
+language: node_js
+node_js:
+  - "0.10"
+after_failure:
+  - npm list
diff --git a/coach/Gulpfile.coffee b/coach/Gulpfile.coffee
new file mode 100644
index 0000000000..50f4001cd1
--- /dev/null
+++ b/coach/Gulpfile.coffee
@@ -0,0 +1,132 @@
+_ = require 'underscore'
+coffeelint      = require 'gulp-coffeelint'
+del             = require 'del'
+env             = require 'gulp-env'
+gulp            = require 'gulp'
+gutil           = require 'gulp-util'
+gzip            = require 'gulp-gzip'
+karma           = require 'karma'
+rev             = require 'gulp-rev'
+tar             = require 'gulp-tar'
+watch           = require 'gulp-watch'
+webpack         = require 'webpack'
+webpackServer   = require 'webpack-dev-server'
+WPExtractText   = require 'extract-text-webpack-plugin'
+
+getWebpackConfig = require './webpack.config'
+
+TestRunner      = require './test/config/test-runner'
+
+KARMA_DEV_CONFIG =
+  configFile: __dirname + '/test/karma-dev.config.coffee'
+  singleRun: false
+
+KARMA_CONFIG =
+  configFile: __dirname + '/test/config/karma.config.coffee'
+  singleRun: true
+
+KARMA_COVERAGE_CONFIG =
+  configFile: __dirname + '/test/config/karma-coverage.config.coffee'
+  singleRun: true
+
+DIST_DIR = './dist'
+
+# -----------------------------------------------------------------------
+#  Build Javascript and Styles using webpack
+# -----------------------------------------------------------------------
+gulp.task '_cleanDist', (done) ->
+  del(['./dist/*'], done)
+
+gulpWebpack = (name) ->
+  env(vars:{ NODE_ENV: 'production' })
+  config = getWebpackConfig(name, process.env.NODE_ENV is 'production')
+  webpack(config, (err, stats) ->
+    throw new gutil.PluginError("webpack", err) if err
+    gutil.log("[webpack]", stats.toString({
+      # output options
+    }))
+  )
+
+gulp.task '_buildMain', _.partial(gulpWebpack, 'main')
+gulp.task '_buildMainMin', _.partial(gulpWebpack, 'main.min')
+gulp.task '_buildFull', _.partial(gulpWebpack, 'fullBuild')
+gulp.task '_buildFullMin', _.partial(gulpWebpack, 'fullBuild.min')
+gulp.task '_buildDemo', _.partial(gulpWebpack, 'demo')
+
+gulp.task 'build', ['_cleanDist', '_buildMain', '_buildMainMin', '_buildFull', '_buildFullMin']
+
+gulp.task '_tagRev', ['build'], ->
+  gulp.src("#{DIST_DIR}/*.min.*")
+    .pipe(rev())
+    .pipe(gulp.dest(DIST_DIR))
+    .pipe(rev.manifest())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Production
+# -----------------------------------------------------------------------
+
+gulp.task '_archive', ['_tagRev'], ->
+  gulp.src(["#{DIST_DIR}/*"], base: DIST_DIR)
+    .pipe(tar('archive.tar'))
+    .pipe(gzip())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Development
+# -----------------------------------------------------------------------
+#
+gulp.task '_karma', ->
+  server = new karma.Server(KARMA_DEV_CONFIG)
+  server.start()
+
+# TODO will rewrite this to fit new config
+gulp.task '_webserver', ->
+  env(vars:{ NODE_ENV: 'development' })
+  config = getWebpackConfig('devServer', process.env.NODE_ENV is 'production')
+  server = new webpackServer(webpack(config), config.devServer)
+  server.listen(config.devServer.port, '0.0.0.0', (err) ->
+    throw new gutil.PluginError("webpack-dev-server", err) if err
+  )
+
+# -----------------------------------------------------------------------
+#  Public Tasks
+# -----------------------------------------------------------------------
+#
+# External tasks called by various people (devs, testers, Travis, production)
+#
+# TODO: Add this to webpack
+gulp.task 'lint', ->
+  gulp.src(['./src/**/*.{cjsx,coffee}', './*.coffee', './test/**/*.{cjsx,coffee}'])
+  .pipe(coffeelint())
+  # Run through both reporters so lint failures are visible and Travis will error
+  .pipe(coffeelint.reporter())
+  .pipe(coffeelint.reporter('fail'))
+
+gulp.task 'prod', ['_archive']
+
+gulp.task 'serve', ['_webserver']
+
+gulp.task 'test', ['lint'], (done) ->
+  server = new karma.Server(KARMA_CONFIG)
+  server.start()
+
+gulp.task 'coverage', ->
+  server = new karma.Server(KARMA_COVERAGE_CONFIG)
+  server.start()
+
+# clean out the dist directory before running since otherwise stale files might be served from there.
+# The _webserver task builds and serves from memory with a fallback to files in dist
+gulp.task 'dev', ['_cleanDist', '_webserver']
+
+gulp.task 'testrunner', ->
+  runner = new TestRunner()
+  watch('{src,test}/**/*', (change) ->
+    runner.onFileChange(change) unless change.unlink
+  )
+
+gulp.task 'tdd', ['_cleanDist', '_webserver', 'testrunner']
+
+gulp.task 'demo', ['_buildDemo']
+
+gulp.task 'release', ['build', 'demo']
diff --git a/coach/README.md b/coach/README.md
new file mode 100644
index 0000000000..e1ff52fb99
--- /dev/null
+++ b/coach/README.md
@@ -0,0 +1,23 @@
+See it [here](https://openstax.github.io/concept-coach/).
+
+# To run locally:
+
+you need to have [tutor-server](https://github.com/openstax/tutor-server) running locally.  Then,
+
+1. Clone this repo
+1. `npm install`
+1. `DEV_PORT=3004 gulp tdd`
+  * Replace with whatever port you'd like
+1. In `tutor-server`'s `config/secrets.yml`, add `http://localhost:3004` to the list of `cc-origins`
+  * Starts around line 20.
+1. Restart the `tutor-server`
+1. Go to `http://localhost:3004` and the Launch button for Concept Coach should be there!
+
+
+# To build for release and deployment:
+
+1. Run `npm run release`
+  * This will switch to gh-pages branch, merge master into it, and then build
+1. Commit files and push to github gh-pages branch
+1. Tag and make release in github
+1. Copy sha hash of tag into webview's `bower.json`
diff --git a/coach/api/cc/dashboard/GET.json b/coach/api/cc/dashboard/GET.json
new file mode 100644
index 0000000000..02c2c74543
--- /dev/null
+++ b/coach/api/cc/dashboard/GET.json
@@ -0,0 +1,107 @@
+{
+  "tasks": [
+    {
+      "id": "403",
+      "title": "Concept Coach",
+      "opens_at": "2016-01-12T19:59:13.835Z",
+      "last_worked_at": "2016-01-12T20:10:06.043Z",
+      "type": "concept_coach",
+      "complete": true
+    }
+  ],
+  "role": {
+    "id": "238",
+    "type": "student"
+  },
+  "course": {
+    "name": "Concept Coach",
+    "teachers": [
+      {
+        "id": "2",
+        "role_id": "43",
+        "first_name": "Charles",
+        "last_name": "Morris"
+      },
+      {
+        "id": "6",
+        "role_id": "171",
+        "first_name": "Molly",
+        "last_name": "Bloom"
+      },
+      {
+        "id": "7",
+        "role_id": "172",
+        "first_name": "Lionel",
+        "last_name": "Hayes"
+      }
+    ]
+  },
+  "chapters": [
+    {
+      "id": "22",
+      "title": "The Chemical Foundation of Life",
+      "chapter_section": [
+        2
+      ],
+      "pages": [
+        {
+          "id": "106",
+          "title": "Sample module 2",
+          "uuid": "7636a3bf-eb80-4898-8b2c-e81c1711b99f",
+          "version": "2",
+          "chapter_section": [
+            2,
+            1
+          ],
+          "last_worked_at": "2016-01-12T20:10:06.043Z",
+          "exercises": [
+            {
+              "id": "1632",
+              "is_completed": true,
+              "is_correct": false
+            },
+            {
+              "id": "1634",
+              "is_completed": true,
+              "is_correct": true
+            },
+            {
+              "id": "1626",
+              "is_completed": true,
+              "is_correct": true
+            }
+          ]
+        },
+        {
+          "id": "107",
+          "title": "Sample module 3",
+          "uuid": "7636a3bf-eb80-4898-8b2c-e81c1711b99f",
+          "version": "2",
+          "chapter_section": [
+            3,
+            1
+          ],
+          "last_worked_at": "2016-01-12T20:10:06.043Z",
+          "exercises": [
+            {
+              "id": "1832",
+              "is_completed": true,
+              "is_correct": false
+            },
+            {
+              "id": "1834",
+              "is_completed": true,
+              "is_correct": true
+            },
+            {
+              "id": "1826",
+              "is_completed": true,
+              "is_correct": true
+            }
+          ]
+        }
+
+      ]
+    }
+  ]
+}
diff --git a/coach/api/cc/tasks/C_UUID/m_uuid/GET.json b/coach/api/cc/tasks/C_UUID/m_uuid/GET.json
new file mode 100644
index 0000000000..593a517d26
--- /dev/null
+++ b/coach/api/cc/tasks/C_UUID/m_uuid/GET.json
@@ -0,0 +1,96 @@
+{
+    "id": "265",
+    "type": "concept_coach",
+    "title": "Dummy task title",
+    "description": "Dummy task description",
+    "opens_at": "2013-01-31T20:48:48.287Z",
+    "is_shared": false,
+    "steps": [{
+        "id": "4571",
+        "task_id": "265",
+        "type": "exercise",
+        "group": "default",
+        "is_completed": false,
+        "related_content": [],
+        "labels": [],
+        "content_url": "https://exercises-dev.openstax.org/exercises/-1@1",
+        "content": {
+            "uid": "-1@1",
+            "tags": [],
+            "stimulus_html": "This is fake exercise -1. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+            "questions": [{
+                "id": "-1",
+                "formats": [
+                    "multiple-choice",
+                    "free-response"
+                ],
+                "stem_html": "Select 10 N.",
+                "answers": [{
+                    "id": "-2",
+                    "content_html": "10 N"
+                }, {
+                    "id": "-3",
+                    "content_html": "1 N"
+                }]
+            }]
+        }
+    }, {
+        "id": "4572",
+        "task_id": "265",
+        "type": "exercise",
+        "group": "default",
+        "is_completed": false,
+        "related_content": [],
+        "labels": [],
+        "content_url": "https://exercises-dev.openstax.org/exercises/-2@1",
+        "content": {
+            "uid": "-2@1",
+            "tags": [],
+            "stimulus_html": "This is fake exercise -2. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+            "questions": [{
+                "id": "-4",
+                "formats": [
+                    "multiple-choice",
+                    "free-response"
+                ],
+                "stem_html": "Select 11 N.",
+                "answers": [{
+                    "id": "-5",
+                    "content_html": "10 N"
+                }, {
+                    "id": "-6",
+                    "content_html": "1 N"
+                }]
+            }]
+        }
+    }, {
+        "id": "4573",
+        "task_id": "265",
+        "type": "exercise",
+        "group": "default",
+        "is_completed": false,
+        "related_content": [],
+        "labels": [],
+        "content_url": "https://exercises-dev.openstax.org/exercises/-3@1",
+        "content": {
+            "uid": "-3@1",
+            "tags": [],
+            "stimulus_html": "This is fake exercise -3. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+            "questions": [{
+                "id": "-7",
+                "formats": [
+                    "multiple-choice",
+                    "free-response"
+                ],
+                "stem_html": "Select 12 N.",
+                "answers": [{
+                    "id": "-8",
+                    "content_html": "10 N"
+                }, {
+                    "id": "-9",
+                    "content_html": "1 N"
+                }]
+            }]
+        }
+    }]
+}
diff --git a/coach/api/enrollment_changes/1/approve/PUT.json b/coach/api/enrollment_changes/1/approve/PUT.json
new file mode 100644
index 0000000000..25c72e74fd
--- /dev/null
+++ b/coach/api/enrollment_changes/1/approve/PUT.json
@@ -0,0 +1,13 @@
+{
+  "id":"1",
+  "to": {
+    "course": {
+      "id":"3","name":"Physics I"
+    },
+    "period":{
+      "id":"6","name":"1st"
+    }
+  },
+  "status":"processed",
+  "requires_enrollee_approval":true
+}
diff --git a/coach/api/enrollment_changes/POST.json b/coach/api/enrollment_changes/POST.json
new file mode 100644
index 0000000000..6f2a7f8ecb
--- /dev/null
+++ b/coach/api/enrollment_changes/POST.json
@@ -0,0 +1,17 @@
+{
+  "id":"1",
+  "to": {
+    "course": {
+      "id":"3","name":"Physics I"
+      "teachers": [
+        {"name": "Charles Morris", "first_name": "Charles", "last_name": "Morris"},
+        {"name": "", "first_name": "William", "last_name": "Blake"}
+      ]
+    },
+    "period":{
+      "id":"6","name":"1st"
+    }
+  },
+  "status":"pending",
+  "requires_enrollee_approval":true
+}
diff --git a/api/notifications.json b/coach/api/notifications/GET.json
similarity index 100%
rename from api/notifications.json
rename to coach/api/notifications/GET.json
diff --git a/coach/api/steps/4571/GET.json b/coach/api/steps/4571/GET.json
new file mode 100644
index 0000000000..b8cfe0b02e
--- /dev/null
+++ b/coach/api/steps/4571/GET.json
@@ -0,0 +1,30 @@
+{
+    "id": "4571",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-1@1",
+    "content": {
+        "uid": "-1@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -1. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-1",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-2",
+                "content_html": "10 N"
+            }, {
+                "id": "-3",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4571/PATCH.json b/coach/api/steps/4571/PATCH.json
new file mode 100644
index 0000000000..b8cfe0b02e
--- /dev/null
+++ b/coach/api/steps/4571/PATCH.json
@@ -0,0 +1,30 @@
+{
+    "id": "4571",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-1@1",
+    "content": {
+        "uid": "-1@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -1. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-1",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-2",
+                "content_html": "10 N"
+            }, {
+                "id": "-3",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4571/completed/PUT.json b/coach/api/steps/4571/completed/PUT.json
new file mode 100644
index 0000000000..c4ad62b69f
--- /dev/null
+++ b/coach/api/steps/4571/completed/PUT.json
@@ -0,0 +1,33 @@
+{
+    "id": "4571",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": true,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-1@1",
+    "content": {
+        "uid": "-1@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -1. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-1",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-2",
+                "content_html": "10 N"
+            }, {
+                "id": "-3",
+                "content_html": "1 N"
+            }]
+        }]
+    },
+    "feedback_html": "The original hypothesis is incorrect because when the coffee maker was plugged in it worked. Therefore, it is incorrect to hypothesize that there is something wrong with the outlet. Alternative hypothesis includes that the toaster wasn’t turned on.",
+    "correct_answer_id": "-3",
+    "is_correct": false
+}
\ No newline at end of file
diff --git a/coach/api/steps/4572/GET.json b/coach/api/steps/4572/GET.json
new file mode 100644
index 0000000000..d70da4104a
--- /dev/null
+++ b/coach/api/steps/4572/GET.json
@@ -0,0 +1,30 @@
+{
+    "id": "4572",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-2@1",
+    "content": {
+        "uid": "-2@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -2. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-4",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-5",
+                "content_html": "10 N"
+            }, {
+                "id": "-6",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4572/PATCH.json b/coach/api/steps/4572/PATCH.json
new file mode 100644
index 0000000000..d70da4104a
--- /dev/null
+++ b/coach/api/steps/4572/PATCH.json
@@ -0,0 +1,30 @@
+{
+    "id": "4572",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-2@1",
+    "content": {
+        "uid": "-2@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -2. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-4",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-5",
+                "content_html": "10 N"
+            }, {
+                "id": "-6",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4572/completed/PUT.json b/coach/api/steps/4572/completed/PUT.json
new file mode 100644
index 0000000000..bec94ffd48
--- /dev/null
+++ b/coach/api/steps/4572/completed/PUT.json
@@ -0,0 +1,33 @@
+{
+    "id": "4572",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-2@1",
+    "content": {
+        "uid": "-2@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -2. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-4",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-5",
+                "content_html": "10 N"
+            }, {
+                "id": "-6",
+                "content_html": "1 N"
+            }]
+        }]
+    },
+    "feedback_html": "The original hypothesis is incorrect because when the coffee maker was plugged in it worked. Therefore, it is incorrect to hypothesize that there is something wrong with the outlet. Alternative hypothesis includes that the toaster wasn’t turned on.",
+    "correct_answer_id": "-5",
+    "is_correct": true
+}
\ No newline at end of file
diff --git a/coach/api/steps/4573/GET.json b/coach/api/steps/4573/GET.json
new file mode 100644
index 0000000000..61bfd5548b
--- /dev/null
+++ b/coach/api/steps/4573/GET.json
@@ -0,0 +1,30 @@
+{
+    "id": "4573",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-3@1",
+    "content": {
+        "uid": "-3@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -3. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-7",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-8",
+                "content_html": "10 N"
+            }, {
+                "id": "-9",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4573/PATCH.json b/coach/api/steps/4573/PATCH.json
new file mode 100644
index 0000000000..61bfd5548b
--- /dev/null
+++ b/coach/api/steps/4573/PATCH.json
@@ -0,0 +1,30 @@
+{
+    "id": "4573",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-3@1",
+    "content": {
+        "uid": "-3@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -3. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-7",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-8",
+                "content_html": "10 N"
+            }, {
+                "id": "-9",
+                "content_html": "1 N"
+            }]
+        }]
+    }
+}
\ No newline at end of file
diff --git a/coach/api/steps/4573/completed/PUT.json b/coach/api/steps/4573/completed/PUT.json
new file mode 100644
index 0000000000..2323a7f5ae
--- /dev/null
+++ b/coach/api/steps/4573/completed/PUT.json
@@ -0,0 +1,33 @@
+{
+    "id": "4573",
+    "task_id": "265",
+    "type": "exercise",
+    "group": "default",
+    "is_completed": false,
+    "related_content": [],
+    "labels": [],
+    "content_url": "https://exercises-dev.openstax.org/exercises/-3@1",
+    "content": {
+        "uid": "-3@1",
+        "tags": [],
+        "stimulus_html": "This is fake exercise -3. <span data-math='\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'></span>",
+        "questions": [{
+            "id": "-7",
+            "formats": [
+                "multiple-choice",
+                "free-response"
+            ],
+            "stem_html": "Select 10 N.",
+            "answers": [{
+                "id": "-8",
+                "content_html": "10 N"
+            }, {
+                "id": "-9",
+                "content_html": "1 N"
+            }]
+        }]
+    },
+    "feedback_html": "The original hypothesis is incorrect because when the coffee maker was plugged in it worked. Therefore, it is incorrect to hypothesize that there is something wrong with the outlet. Alternative hypothesis includes that the toaster wasn’t turned on.",
+    "correct_answer_id": "-9",
+    "is_correct": false
+}
\ No newline at end of file
diff --git a/coach/auth/status/GET.json b/coach/auth/status/GET.json
new file mode 100644
index 0000000000..6517839c56
--- /dev/null
+++ b/coach/auth/status/GET.json
@@ -0,0 +1,46 @@
+{
+  "access_token": "",
+  "user": {
+    "name": "Studious Student",
+    "is_admin": false,
+    "is_customer_service": false,
+    "is_content_analyst": false,
+    "profile_url": "http://localhost:2999/profile"
+  },
+  "endpoints":{
+    "login":"http://localhost:3001/accounts/login",
+    "iframe_login":"http://localhost:3001/auth/iframe",
+    "accounts_iframe":"http://localhost:2999/remote/iframe"
+  },
+  "courses": [
+    {
+      "id": "1",
+      "name": "Biology I",
+      "catalog_offering_identifier": "biology",
+      "ecosystem_id": "1",
+      "ecosystem_book_uuid": "d52e93f4-8653-4273-86da-3850001c0786",
+      "students": [
+        {
+          "last_name": "Morris",
+          "name": "Charles Morris",
+          "period_id": "7",
+          "role_id": "85",
+          "student_identifier":"1324"
+        }
+      ],
+      "roles": [
+        {
+          "id": "11",
+          "type": "student"
+        }
+      ],
+      "periods": [
+        {
+          "id": "1",
+          "name": "1st",
+          "enrollment_code": "mere regime"
+        }
+      ]
+    }
+  ]
+}
diff --git a/coach/coffeelint.json b/coach/coffeelint.json
new file mode 100644
index 0000000000..461c0b7c80
--- /dev/null
+++ b/coach/coffeelint.json
@@ -0,0 +1,49 @@
+{
+  "coffeelint": {
+    "transforms": [
+      "coffee-react-transform"
+    ]
+  },
+  "indentation": {
+    "level": "error",
+    "value": 2
+  },
+  "line_endings": {
+    "value": "unix",
+    "level": "error"
+  },
+  "arrow_spacing": {
+    "level": "error"
+  },
+  "no_empty_functions": {
+    "level": "error"
+  },
+  "no_empty_param_list": {
+    "level": "error"
+  },
+  "no_interpolation_in_single_quotes": {
+    "level": "error"
+  },
+  "no_throwing_strings": {
+    "level": "error"
+  },
+  "no_unnecessary_double_quotes": {
+    "level": "ignore"
+  },
+  "no_unnecessary_fat_arrows": {
+    "level": "error"
+  },
+  "prefer_english_operator": {
+    "level": "error"
+  },
+  "space_operators": {
+    "level": "error"
+  },
+  "spacing_after_comma": {
+    "level": "error"
+  },
+  "max_line_length": {
+    "value": 135,
+    "level": "error"
+  }
+}
diff --git a/coach/configs/base.coffee b/coach/configs/base.coffee
new file mode 100644
index 0000000000..b91476ace9
--- /dev/null
+++ b/coach/configs/base.coffee
@@ -0,0 +1,2 @@
+module.exports =
+  devPort: '3005'
diff --git a/coach/configs/webpack.base.coffee b/coach/configs/webpack.base.coffee
new file mode 100644
index 0000000000..eb34babda5
--- /dev/null
+++ b/coach/configs/webpack.base.coffee
@@ -0,0 +1,9 @@
+module.exports =
+  output:
+    libraryTarget: 'umd'
+    library: 'OpenStaxConceptCoach'
+    umdNamedDefine: true
+  plugins: [
+    # Pass the BASE_URL along
+    new webpack.EnvironmentPlugin( 'BASE_URL' )
+  ]
diff --git a/coach/configs/webpack.debug.coffee b/coach/configs/webpack.debug.coffee
new file mode 100644
index 0000000000..bf19c6005e
--- /dev/null
+++ b/coach/configs/webpack.debug.coffee
@@ -0,0 +1,9 @@
+_ = require 'lodash'
+
+# similar custom configs as production
+productionConfig = require './webpack.production'
+
+debugConfig = _.cloneDeep(productionConfig)
+debugConfig.output.filename = 'main.js'
+
+module.exports = debugConfig
diff --git a/coach/configs/webpack.development.coffee b/coach/configs/webpack.development.coffee
new file mode 100644
index 0000000000..53cf422b65
--- /dev/null
+++ b/coach/configs/webpack.development.coffee
@@ -0,0 +1,7 @@
+module.exports =
+  entry:
+    demo: [
+      'demo'
+      'resources/styles/main.less'
+      'resources/styles/demo.less'
+    ]
\ No newline at end of file
diff --git a/coach/configs/webpack.production.coffee b/coach/configs/webpack.production.coffee
new file mode 100644
index 0000000000..adb5edede0
--- /dev/null
+++ b/coach/configs/webpack.production.coffee
@@ -0,0 +1,20 @@
+webpack = require 'webpack'
+webpackUMDExternal = require 'webpack-umd-external'
+
+module.exports =
+  entry:
+    main: 'index'
+  output:
+    filename: 'main.min.js'
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: 'react/addons'
+      _: 'underscore'
+      BS: 'react-bootstrap'
+      $: 'jquery'
+    })
+  ]
+  externals: webpackUMDExternal(
+    underscore: '_'
+    jquery: '$'
+  )
\ No newline at end of file
diff --git a/coach/demo-mathjax-config.coffee b/coach/demo-mathjax-config.coffee
new file mode 100644
index 0000000000..0476a630cf
--- /dev/null
+++ b/coach/demo-mathjax-config.coffee
@@ -0,0 +1,81 @@
+$ = require 'jquery'
+
+# ripped from webview
+MATHJAX_CONFIG =
+  jax: [
+    'input/MathML',
+    'input/TeX',
+    'input/AsciiMath',
+    'output/NativeMML',
+    'output/HTML-CSS'
+  ],
+  extensions: [
+    'asciimath2jax.js',
+    'tex2jax.js',
+    'mml2jax.js',
+    'MathMenu.js',
+    'MathZoom.js'
+  ],
+  tex2jax: {
+    inlineMath: [
+      ['[TEX_START]', '[TEX_END]'],
+      ['\\(', '\\)']
+    ]
+  },
+  TeX: {
+    extensions: [
+      'AMSmath.js',
+      'AMSsymbols.js',
+      'noErrors.js',
+      'noUndefined.js'
+    ],
+    noErrors: {
+      disabled: true
+    }
+  },
+  AsciiMath: {
+    noErrors: {
+      disabled: true
+    }
+  }
+
+typesetMath = (node) ->
+  # straight up copy of webview's mathjax fn
+  $mathElements = $(node).find('[data-math]:not(.math-rendered)')
+
+  $mathElements.each (iter, element) ->
+
+    $element = $(element)
+    formula = $element.data('math')
+
+    mathTex = "[TEX_START]#{formula}[TEX_END]"
+    $element.text(mathTex)
+
+    # Moved adding to MathJax queue here. Means the queue gets pushed onto more (once per math element),
+    # but what it trys to parse for matching math is WAY less than the whole page.
+    MathJax.Hub.Queue(['Typeset', MathJax.Hub], $element[0])
+    MathJax.Hub.Queue( ->
+      $element[0].classList.add('math-rendered')
+    )
+
+
+startMathJax = ->
+
+  configuredCallback = ->
+    window.MathJax.Hub.Configured()
+
+  if window.MathJax?.Hub
+    window.MathJax.Hub.Config(MATHJAX_CONFIG)
+    # Does not seem to work when passed to Config
+    window.MathJax.Hub.processSectionDelay = 0
+    configuredCallback()
+  else
+    # If the MathJax.js file has not loaded yet:
+    # Call MathJax.Configured once MathJax loads and
+    # loads this config JSON since the CDN URL
+    # says to `delayStartupUntil=configured`
+    MATHJAX_CONFIG.AuthorInit = configuredCallback
+
+    window.MathJax = MATHJAX_CONFIG
+
+module.exports = {typesetMath, startMathJax}
diff --git a/coach/demo.cjsx b/coach/demo.cjsx
new file mode 100644
index 0000000000..5806c2b5e5
--- /dev/null
+++ b/coach/demo.cjsx
@@ -0,0 +1,115 @@
+_ = require 'underscore'
+ConceptCoachAPI = require './src/concept-coach'
+
+api = require './src/api'
+AUTOSHOW = false
+{startMathJax, typesetMath} = require './demo-mathjax-config'
+
+SETTINGS =
+  STUBS:
+    API_BASE_URL: ''
+    COLLECTION_UUID: 'C_UUID'
+    MODULE_UUID: 'm_uuid'
+    CNX_URL: ''
+  LOCAL:
+    API_BASE_URL: 'http://localhost:3001'
+    COLLECTION_UUID: 'f10533ca-f803-490d-b935-88899941197f'
+    MODULE_UUID: '7636a3bf-eb80-4898-8b2c-e81c1711b99f'
+    CNX_URL: 'http://localhost:8000'
+  SERVER:
+    API_BASE_URL: 'https://tutor-dev.openstax.org'
+    COLLECTION_UUID: 'f10533ca-f803-490d-b935-88899941197f'
+    MODULE_UUID: '7636a3bf-eb80-4898-8b2c-e81c1711b99f'
+    CNX_URL: 'https://dev.cnx.org'
+
+settings = SETTINGS.LOCAL
+
+loadApp = ->
+  unless document.readyState is 'interactive'
+    return false
+
+  startMathJax()
+
+  mainDiv = document.getElementById('react-root-container')
+  buttonA = document.getElementById('launcher')
+  buttonB = document.getElementById('launcher-other-course')
+  buttonC = document.getElementById('launcher-intro')
+  buttonMATHS = document.getElementById('launcher-maths')
+
+  demoSettings =
+    collectionUUID: settings.COLLECTION_UUID
+    moduleUUID: settings.MODULE_UUID
+    cnxUrl: settings.CNX_URL
+    processHtmlAndMath: typesetMath # from demo
+    getNextPage: ->
+      nextChapter: '2.2'
+      nextTitle: 'Sample module 3'
+      nextModuleUUID: 'the-next-page-uuid'
+    filterClick: (clickEvent) ->
+      console.info('external click or focus')
+      return false
+
+  initialModel = _.clone(demoSettings)
+  initialModel.mounter = mainDiv
+
+  conceptCoachDemo = new ConceptCoachAPI(settings.API_BASE_URL)
+  conceptCoachDemo.setOptions(initialModel)
+
+  conceptCoachDemo.on 'open', conceptCoachDemo.handleOpened
+  conceptCoachDemo.on 'ui.close', conceptCoachDemo.handleClosed
+
+  show = ->
+    conceptCoachDemo.open(demoSettings)
+    true
+
+  showOtherCourse = ->
+    otherCourseSettings =
+      collectionUUID: 'FAKE_COLLECTION'
+      moduleUUID: 'FAKE_MODULE'
+      cnxUrl: settings.CNX_URL
+
+    conceptCoachDemo.open(otherCourseSettings)
+    true
+
+  showIntro = ->
+    introSettings = _.extend({}, demoSettings, moduleUUID: 'e98bdaec-4060-4b43-ac70-681555a30e22')
+
+    conceptCoachDemo.open(introSettings)
+    true
+
+  showMaths = ->
+    introSettings = _.extend({}, demoSettings,
+      moduleUUID: '4bba6a1c-a0e6-45c0-988c-0d5c23425670',
+      collectionUUID: '27275f49-f212-4506-b3b1-a4d5e3598b99'
+    )
+
+    conceptCoachDemo.open(introSettings)
+    true
+
+  window.conceptCoachDemo = conceptCoachDemo
+  conceptCoachDemo.initialize(buttonA)
+  buttonB.addEventListener 'click', showOtherCourse
+  buttonC.addEventListener 'click', showIntro
+  buttonMATHS.addEventListener 'click', showMaths
+
+  conceptCoachDemo.on 'ui.launching', show
+
+  # Hook in to writing view updates to history api
+  conceptCoachDemo.on 'view.update', (eventData) ->
+    if eventData.route isnt location.pathname
+      history.pushState(eventData.state, null, eventData.route)
+    true
+
+  # listen to back/forward and broadcasting to coach navigation
+  window.addEventListener 'popstate', (eventData) ->
+    conceptCoachDemo.updateToRoute(location.pathname)
+    true
+
+  # open to the expected view right away if view in url
+  conceptCoachDemo.openByRoute(demoSettings, location.pathname) if location.pathname?
+
+  if AUTOSHOW
+    setTimeout( show, 300)
+  true
+
+loadApp() or document.addEventListener('readystatechange', loadApp)
diff --git a/coach/full-build.coffee b/coach/full-build.coffee
new file mode 100644
index 0000000000..81a03eea24
--- /dev/null
+++ b/coach/full-build.coffee
@@ -0,0 +1,3 @@
+ConceptCoachAPI = require './src/concept-coach'
+
+module.exports = ConceptCoachAPI
diff --git a/coach/index.cjsx b/coach/index.cjsx
new file mode 100644
index 0000000000..626cfeae49
--- /dev/null
+++ b/coach/index.cjsx
@@ -0,0 +1,4 @@
+{ConceptCoach} = require './src/concept-coach/base'
+ConceptCoachAPI = require './src/concept-coach'
+
+module.exports = {ConceptCoach, ConceptCoachAPI}
diff --git a/coach/index.html b/coach/index.html
new file mode 100644
index 0000000000..e3f9386efe
--- /dev/null
+++ b/coach/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <link rel="stylesheet" href="./dist/demo.css" />
+  <link rel="stylesheet" href="./dist/main.css" />
+  <script src="//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&amp;delayStartupUntil=configured" async></script>
+  <script src="./dist/demo.js" async></script>
+</head>
+<body>
+  <div class="container cc-demo" id="react-root-container">
+    <div class="row">
+      <div class="col-xs-12 text-center" id="launcher"></div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 text-center">
+        <div class="jumbotron">
+          <button class="btn btn-primary btn-lg" id="launcher-other-course">Launch Fake Course</button>
+          <p>
+            <small>
+              <i>If you are signed in and registered for another course, this will show you what courses you have available to go to.</i>
+            </small>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 text-center">
+        <div class="jumbotron">
+          <button class="btn btn-primary btn-lg" id="launcher-intro">Launch Intro Module</button>
+          <p>
+            <small>
+              <i>Example of no exercises for module</i>
+            </small>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 text-center">
+        <div class="jumbotron">
+          <button class="btn btn-primary btn-lg" id="launcher-maths">Launch Physics Module</button>
+          <p>
+            <small>
+              <i>Example of MATHs</i>
+            </small>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/coach/package.json b/coach/package.json
new file mode 100644
index 0000000000..5aedb8604c
--- /dev/null
+++ b/coach/package.json
@@ -0,0 +1,104 @@
+{
+  "name": "openstax-concept-coach",
+  "version": "0.0.0",
+  "description": "OpenStax Concept Coach",
+  "main": "dist/main.min.js",
+  "scripts": {
+    "test": "gulp test && gulp prod",
+    "coverage": "gulp coverage",
+    "release": "./release.sh",
+    "deployment": "gulp prod",
+    "test-integration": "mocha -R spec ./test-integration/",
+    "start": "gulp dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openstax/concept-coach.git"
+  },
+  "author": "Philip Schatz <http://philschatz.com>",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/openstax/concept-coach/issues"
+  },
+  "homepage": "https://github.com/openstax/concept-coach",
+  "dependencies": {
+    "bootstrap": "3.3.5",
+    "classnames": "2.1.5",
+    "dateformat": "1.0.12",
+    "eventemitter2": "0.4.14",
+    "font-awesome": "4.4.0",
+    "interpolate": "0.1.0",
+    "jquery": "2.1.4",
+    "keymaster": "1.6.2",
+    "lodash": "3.10.1",
+    "openstax-react-components": "openstax/react-components#d-20160715.a",
+    "underscore": "1.8.3"
+  },
+  "devDependencies": {
+    "blanket": "1.1.7",
+    "chai": "2.1.2",
+    "chai-as-promised": "5.1.0",
+    "chromedriver": "2.19.0",
+    "cjsxify": "0.2.6",
+    "coffee-jsx-loader": "0.1.3",
+    "coffee-loader": "0.7.2",
+    "coffee-react-transform": "3.3.0",
+    "coffee-script": "1.9.3",
+    "coffeelint": "1.13.0",
+    "coffeelint-loader": "0.1.1",
+    "css-loader": "0.22.0",
+    "del": "1.1.1",
+    "es6-promise": "^3.0.2",
+    "extract-text-webpack-plugin": "0.8.2",
+    "file-exists": "0.1.1",
+    "file-loader": "0.8.4",
+    "fixed-data-table": "0.4.1",
+    "gulp": "3.9.0",
+    "gulp-coffeelint": "0.4.0",
+    "gulp-env": "0.2.0",
+    "gulp-gzip": "1.0.0",
+    "gulp-rev": "3.0.1",
+    "gulp-tar": "1.4.0",
+    "gulp-util": "3.0.6",
+    "gulp-watch": "4.3.5",
+    "istanbul-instrumenter-loader": "0.1.3",
+    "json-loader": "0.5.3",
+    "karma": "0.13.19",
+    "karma-chai": "0.1.0",
+    "karma-chai-sinon": "0.1.5",
+    "karma-chrome-launcher": "0.2.1",
+    "karma-coverage": "0.5.2",
+    "karma-mocha": "0.1.10",
+    "karma-mocha-reporter": "1.0.4",
+    "karma-nyan-reporter": "0.2.2",
+    "karma-phantomjs-launcher": "0.2.1",
+    "karma-phantomjs-shim": "1.1.1",
+    "karma-sourcemap-loader": "0.3.6",
+    "karma-webpack": "1.7.0",
+    "less": "2.5.3",
+    "less-loader": "2.2.1",
+    "lodash": "3.10.1",
+    "mocha": "2.2.5",
+    "moment": "2.10.6",
+    "phantomjs": "1.9.18",
+    "react": "0.13.1",
+    "react-bootstrap": "0.23.0",
+    "react-hot-loader": "1.3.0",
+    "react-scroll-components": "0.2.2",
+    "selenium-webdriver": "2.47.0",
+    "sinon": "1.17.1",
+    "sinon-chai": "2.8.0",
+    "style-loader": "0.12.4",
+    "url-loader": "0.5.6",
+    "webpack": "1.12.2",
+    "webpack-dev-server": "1.12.0",
+    "webpack-module-hot-accept": "1.0.3",
+    "webpack-umd-external": "1.0.2",
+    "when": "3.7.3"
+  },
+  "config": {
+    "blanket": {
+      "pattern": "src"
+    }
+  }
+}
diff --git a/coach/release.sh b/coach/release.sh
new file mode 100755
index 0000000000..8aabfa4c82
--- /dev/null
+++ b/coach/release.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+set -e
+
+git checkout gh-pages
+
+git pull origin gh-pages
+
+git merge master -m 'merge master in prep for release'
+
+npm install
+
+gulp release
+
+echo "Done with build, git commit and/or tag and push to complete"
diff --git a/coach/resources/images/bg-cc-launcher.png b/coach/resources/images/bg-cc-launcher.png
new file mode 100644
index 0000000000..91e15cf3dc
Binary files /dev/null and b/coach/resources/images/bg-cc-launcher.png differ
diff --git a/coach/resources/styles/components/concept-coach/base.less b/coach/resources/styles/components/concept-coach/base.less
new file mode 100644
index 0000000000..045e538516
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/base.less
@@ -0,0 +1,42 @@
+.concept-coach-view {
+  margin: 80px auto;
+  width: 100%;
+  max-width: 840px;
+
+  a:not(.btn) {
+    color: inherit;
+    border-bottom: 1px solid @openstax-info;
+    padding-bottom: 3px;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: @openstax-info;
+    }
+  }
+
+  &:not(.concept-coach-view-task) {
+    background: @openstax-white;
+    padding: @concept-coach-base-x-padding @concept-coach-base-y-padding;
+  }
+
+  // TODO move out to common
+  .task-step {
+    .task-step-group {
+      font-size: 1.6rem;
+      color: @openstax-neutral;
+      padding-top: 2rem;
+      padding-bottom: 0;
+      .opacity(0.5);
+    }
+    .task-step-group-label {
+      display: inline-block;
+      margin-left: 4px;
+    }
+  }
+
+  .question-feedback {
+    z-index: 1;
+  }
+}
diff --git a/coach/resources/styles/components/concept-coach/breadcrumbs.less b/coach/resources/styles/components/concept-coach/breadcrumbs.less
new file mode 100644
index 0000000000..32e4ed1703
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/breadcrumbs.less
@@ -0,0 +1,5 @@
+@import '~openstax-react-components/resources/styles/components/breadcrumbs/coach';
+
+.concept-coach-task {
+  .concept-coach-breadcrumbs();
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/concept-coach/index.less b/coach/resources/styles/components/concept-coach/index.less
new file mode 100644
index 0000000000..fbc2bb57e6
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/index.less
@@ -0,0 +1,16 @@
+@import './base';
+@import './modal';
+@import './breadcrumbs';
+@import './laptop-and-mug';
+@import './launcher';
+
+.concept-coach {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 100%;
+  text-align: left;
+
+  .loading {
+    min-height: 600px;
+  }
+}
diff --git a/coach/resources/styles/components/concept-coach/laptop-and-mug.less b/coach/resources/styles/components/concept-coach/laptop-and-mug.less
new file mode 100644
index 0000000000..41605f47b8
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/laptop-and-mug.less
@@ -0,0 +1,22 @@
+.keyframes(launcher-steam; {
+            0% { opacity: 1; .translate(0; 10px); }
+            100% { opacity: 0; .translate(0; -40px); }
+          });
+
+.laptop-and-mug {
+
+  .launcher-coffee-steam {
+    path {
+      &:nth-child(1){
+        .animation-duration(3s);
+      }
+      &:nth-child(2){
+        .animation-duration(4s);
+      }
+      .animation(launcher-steam ease-in);
+      .animation-iteration-count(infinite);
+    }
+  }
+
+
+}
diff --git a/coach/resources/styles/components/concept-coach/launcher.less b/coach/resources/styles/components/concept-coach/launcher.less
new file mode 100644
index 0000000000..edba017035
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/launcher.less
@@ -0,0 +1,323 @@
+@launcher-screen: #F1F1F1;
+@launcher-screen-shine: #F5F5F5;
+
+@launcher-text-question-dark: #222E65;
+@launcher-text-question-light: #7A7A99;
+@launcher-text-dark: #E5E5E5;
+@launcher-text-light: #EFEFEF;
+@launcher-text-selected-dark: #9A9A9B;
+@launcher-text-selected-light: #CFCECE;
+
+@launcher-letter-dark: #CFCECE;
+@launcher-circle-text: #9A9A9B;
+
+.launcher-concept() {
+  .launcher-circle {
+    circle {
+      fill: @openstax-white;
+    }
+    .launcher-letter {
+      fill: @launcher-circle-text;
+
+      &-hole { fill: @openstax-white; }
+      &-dark { fill: @launcher-letter-dark; }
+    }
+  }
+  .launcher-text {
+    polygon {
+      &:nth-child(odd)  { fill: @launcher-text-dark; }
+      &:nth-child(even) { fill: @launcher-text-light; }
+    }
+    rect { fill: @launcher-text-light; }
+  }
+}
+
+.launcher-concept(launching) {
+  .launcher-circle {
+    circle {
+      fill: @openstax-white;
+      stroke: @launcher-screen;
+    }
+    .launcher-letter {
+      fill: @launcher-circle-text;
+
+      &-dark { fill: @launcher-circle-text; }
+    }
+  }
+  .launcher-text {
+    polygon {
+      &:nth-child(odd)  { fill: @launcher-text-dark; }
+      &:nth-child(even) { fill: @launcher-text-dark; }
+    }
+    rect { fill: @launcher-text-dark; }
+  }
+}
+
+.launcher-select-keyframes(@default-fill, @select-fill){
+  0%   { fill: @default-fill; }
+  5%   { fill: @select-fill; }
+  20%  { fill: @select-fill; }
+  25%  { fill: @default-fill; }
+  100% { fill: @default-fill; }
+}
+
+.keyframes(launcher-circle-select; {
+  .launcher-select-keyframes(@openstax-white, @openstax-info);
+});
+
+.keyframes(launcher-letter-select; {
+  .launcher-select-keyframes(@launcher-circle-text, @openstax-white);
+});
+
+.keyframes(launcher-letter-dark-select; {
+  .launcher-select-keyframes(@launcher-letter-dark, @openstax-white);
+});
+
+.keyframes(launcher-text-odd-select; {
+  .launcher-select-keyframes(@launcher-text-dark, @launcher-text-selected-dark);
+});
+
+.keyframes(launcher-text-even-select; {
+  .launcher-select-keyframes(@launcher-text-light, @launcher-text-selected-light);
+});
+
+.launcher-animate-concept(@name, @delay, @duration, @timing-function: ease-in){
+  .animation(~'@{name} @{duration} @{timing-function}');
+  .animation-name(@name);
+  .animation-duration(@duration);
+  .animation-delay(@delay);
+  .animation-timing-function(@timing-function);
+  .animation-iteration-count(infinite);
+}
+
+.launcher-concept(selected, @delay: 0s, @duration: 8s) {
+  .launcher-circle {
+    circle {
+      .launcher-animate-concept(launcher-circle-select, @delay, @duration);
+    }
+    .launcher-letter {
+      .launcher-animate-concept(launcher-letter-select, @delay, @duration);
+
+      &-hole { .launcher-animate-concept(launcher-circle-select, @delay, @duration); }
+      &-dark { .launcher-animate-concept(launcher-letter-dark-select, @delay, @duration); }
+    }
+  }
+  .launcher-text {
+    polygon {
+      &:nth-child(odd)  { .launcher-animate-concept(launcher-text-odd-select, @delay, @duration); }
+      &:nth-child(even) { .launcher-animate-concept(launcher-text-even-select, @delay, @duration); }
+    }
+    rect {
+      .launcher-animate-concept(launcher-text-even-select, @delay, @duration);
+    }
+  }
+}
+
+.keyframes(launcher-answer-enter; {
+    0% { opacity: 0; .translate(-200px; 0); }
+   20% { opacity: 0; }
+   60% { opacity: 1; .translate(30px; 0); }
+   80% {             .translate(-10px; 0); }
+  100% {             .translate(0; 0); }
+});
+
+
+.keyframes(launcher-mug-leave; {
+    0% { opacity: 1; .translate(0; 0); }
+   20% { opacity: 1; .translate(-20px; 0); }
+   40% { opacity: 0; .translate(600px; 0); }
+  100% { opacity: 0; .translate(600px; 0); }
+});
+
+.launcher-concepts-animate() {
+  &.launcher-question { .animation-duration(100ms); }
+  &.launcher-a { .animation-duration(200ms); }
+  &.launcher-b { .animation-duration(300ms); }
+  &.launcher-c { .animation-duration(400ms); }
+  &.launcher-d { .animation-duration(500ms); }
+};
+
+.launcher-base() {
+  position: relative;
+  width: 100%;
+  height: 388px;
+  text-align: center;
+
+  .laptop-and-mug {
+    width: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  .btn {
+    position: relative;
+    top: 5%;
+  }
+
+  .launcher-answer {
+    .launcher-concept();
+  }
+  .launcher-desk {
+    .transition(all 200ms linear);
+  }
+  .launcher-concept-coach {
+    .transform-origin(50% 25%);
+    .transition(all 400ms ease-in);
+  }
+  .btn,
+  .launcher-concept-coach-shine-bottom,
+  .launcher-question .launcher-text polygon,
+  .launcher-section-label {
+    .transition(opacity 200ms linear);
+  }
+  .launcher-concept-row {
+    .transition(opacity 800ms linear);
+  }
+  .launcher-background,
+  .launcher-concept-coach-screen {
+    .transition(fill 200ms linear);
+  }
+}
+
+.launcher-animate() {
+
+  .launcher-a { .launcher-concept(selected, 2600ms); }
+  .launcher-b { .launcher-concept(selected, 4600ms); }
+  .launcher-c { .launcher-concept(selected, 600ms); }
+  .launcher-d { .launcher-concept(selected, 6600ms); }
+
+}
+
+.launcher-animate(active) {
+  .launcher-concept-row {
+    .launcher-concepts-animate();
+    .animation(launcher-answer-enter ease-in);
+  }
+
+  .btn {
+    .box-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
+  }
+}
+
+.launcher-animate(launching) {
+  .btn,
+  .launcher-concept-coach-shine-bottom,
+  .launcher-question .launcher-text polygon,
+  .launcher-section-label,
+  .launcher-concept-row {
+    opacity: 0;
+  }
+
+  .launcher-desk {
+    .translate(0, 100%);
+    .transform-origin(50% 100%);
+  }
+  .launcher-concept-coach {
+    .transform(~'translate(-62px, 30px) scale(3.97)');
+  }
+  .launcher-answer {
+    .launcher-concept(launching);
+  }
+  .launcher-coffee {
+    .animation(launcher-mug-leave 300ms ease-in);
+    .animation-fill-mode(both);
+  }
+  .launcher-concept-coach-screen {
+    fill: @openstax-white;
+  }
+  .launcher-background {
+    fill: @openstax-neutral-lighter;
+  }
+  .launcher-laptop {
+    opacity: 0;
+  }
+}
+
+.launcher-animate(closing) {
+  .launcher-concept-row {
+    .translate(0; 0);
+  }
+  .launcher-concept-coach {
+    .scale(1);
+  }
+  .launcher-coffee {
+    .translate(0; 0);
+  }
+}
+
+.concept-coach-launcher-wrapper {
+  position: relative;
+  min-height: 388px;
+  height: 100%;
+
+  button {
+    background-color: #F37440;
+    border: 1px solid transparent;
+    font-weight: bold;
+    padding: 20px;
+    span  { display: block; }
+    .warn {
+      font-size: 90%;
+      font-weight: 300;
+    }
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: darken(#F37440, 10%);
+      border-color: darken(#F37440, 15%);
+    }
+  }
+
+  .launcher-background {
+    background: #9dd4db url('/resources/images/bg-cc-launcher.png') repeat left top;
+    color: white;
+    height: 388px;
+    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
+    width: 100%;
+
+    > h1 {
+      color: white;
+      font-size: 3rem;
+      font-weight: bold;
+      padding-top: 30px;
+      text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.8);
+    }
+  }
+}
+
+.concept-coach-launcher {
+  .launcher-base();
+
+  &:not(.launching):not(.closing){
+    cursor: pointer;
+    .launcher-animate();
+
+    &:hover,
+    &:focus {
+      .launcher-animate(active);
+    }
+  }
+
+  &.launching {
+    position: fixed;
+    z-index: 99;
+    left: 0;
+    top: 0;
+
+    .launcher-animate(launching);
+  }
+
+  &:not(.launching) {
+    .launcher-animate(closing);
+  }
+}
+
+@media (min-width: @screen-xs-min) {
+  .concept-coach-launcher {
+    .btn {
+      position: absolute;
+      top: 40%;
+      left: 8%;
+    }
+  }
+}
diff --git a/coach/resources/styles/components/concept-coach/modal-opened.less b/coach/resources/styles/components/concept-coach/modal-opened.less
new file mode 100644
index 0000000000..3a0d4888b8
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/modal-opened.less
@@ -0,0 +1,8 @@
+body.concept-coach-view.pinned-view.pinned-on {
+  overflow: hidden !important;
+}
+
+body.cc-opened {
+  background: @openstax-neutral-light;
+  overflow: hidden !important;
+}
diff --git a/coach/resources/styles/components/concept-coach/modal.less b/coach/resources/styles/components/concept-coach/modal.less
new file mode 100644
index 0000000000..4fc64ed3d7
--- /dev/null
+++ b/coach/resources/styles/components/concept-coach/modal.less
@@ -0,0 +1,16 @@
+.concept-coach-modal {
+  width: 100%;
+  height: 100%;
+  background: @openstax-neutral-lighter;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  opacity: 0;
+  overflow: auto;
+  .transition(opacity 200ms ease-in-out);
+
+  &.loaded {
+    opacity: 1;
+  }
+}
diff --git a/coach/resources/styles/components/course/confirm-join.less b/coach/resources/styles/components/course/confirm-join.less
new file mode 100644
index 0000000000..a924d07f2c
--- /dev/null
+++ b/coach/resources/styles/components/course/confirm-join.less
@@ -0,0 +1,49 @@
+.confirm-join {
+  @content-width: 400px;
+  text-align: center;
+  .label { font-size: 1.6rem; }
+  .controls {
+    width: @content-width;
+    margin: auto;
+    .form-control {
+      display: inline;
+      width: calc(~"100% - 150px")
+    }
+    .btn.continue {
+      margin-left: 1rem;
+    }
+    .or, .skip {
+      display: block;
+      display: block;
+      text-align: center;
+    }
+    .or {
+      font-size: 14px;
+      margin: 20px auto;
+    }
+    .skip {
+      text-decoration: initial;
+      border-bottom: 0;
+      font-size: 16px;
+      color: @link-color;;
+    }
+  }
+
+  .help-text {
+    color: @openstax-neutral;
+    font-size: 11px;
+    width: @content-width;
+    margin: 30px auto 0 auto;
+    text-align: center;
+  }
+
+  .title {
+    font-size: 24px;
+    border-bottom: 2px solid grey;
+    padding: 20px 50px; // extend border past sides of text
+    margin: 20px auto;
+    border-bottom: 2px solid @openstax-neutral-light;
+    .join { font-size: 26px; }
+  }
+
+}
diff --git a/coach/resources/styles/components/course/enrollment-code.less b/coach/resources/styles/components/course/enrollment-code.less
new file mode 100644
index 0000000000..9d4155b1d0
--- /dev/null
+++ b/coach/resources/styles/components/course/enrollment-code.less
@@ -0,0 +1,7 @@
+.enrollment-code {
+  .btn.enroll {
+    background-color: @openstax-secondary-light;
+    color: white;
+    font-weight: lighter;
+  }
+}
diff --git a/coach/resources/styles/components/course/index.less b/coach/resources/styles/components/course/index.less
new file mode 100644
index 0000000000..f25276e995
--- /dev/null
+++ b/coach/resources/styles/components/course/index.less
@@ -0,0 +1,5 @@
+@import './item';
+@import './student_id';
+@import './registration';
+@import './enrollment-code';
+@import './confirm-join';
diff --git a/coach/resources/styles/components/course/item.less b/coach/resources/styles/components/course/item.less
new file mode 100644
index 0000000000..1bb65c421d
--- /dev/null
+++ b/coach/resources/styles/components/course/item.less
@@ -0,0 +1,3 @@
+.concept-coach-course-item {
+  cursor: pointer;
+}
diff --git a/coach/resources/styles/components/course/registration.less b/coach/resources/styles/components/course/registration.less
new file mode 100644
index 0000000000..42dccb766d
--- /dev/null
+++ b/coach/resources/styles/components/course/registration.less
@@ -0,0 +1,84 @@
+@import '~openstax-react-components/resources/styles/mixins/flexbox';
+
+.concept-coach-view-registration {
+  overflow: hidden;
+  position: relative;
+}
+
+.enroll-or-login {
+  min-height: 280px;
+
+  .flex-display();
+  .flex-direction(column);
+  .align-items(center);
+
+  .laptop-and-mug {
+    position: absolute;
+    top: -50px;
+    left: -450px;
+
+    width: 800px;
+    .launcher-coffee-steam path {
+      fill: @openstax-neutral-light;
+    }
+  }
+
+  .body {
+    margin-left: 300px;
+    text-align: center;
+  }
+
+  .title {
+    margin-top: 5rem;
+    margin-bottom: 3rem;
+  }
+  .code-required {
+    font-weight: 700;
+    color: @openstax-neutral;
+  }
+  .login-gateway {
+    .flex-display();
+    .align-items(center);
+    .justify-content(center);
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+
+    &.is-open {
+      .message{ text-align: center; }
+      a { display: inline-block; }
+    }
+
+    &.is-closed {
+        cursor: pointer;
+    }
+
+    &.sign-up {
+      &.is-closed {
+        margin: 50px auto 10px auto;
+        display: inline-block;
+        font-weight: 300;
+      }
+      &.is-open {
+        width: 400px;
+        height: 140px;
+      }
+    }
+
+    &.login {
+      font-size: 1.6rem;
+      display: inline;
+      &.is-closed {
+        color: @link-color;
+
+        &:hover,
+        &:focus {
+          color: @openstax-info;
+        }
+      }
+      &.is-open {
+        display: block;
+      }
+    }
+  }
+
+}
diff --git a/coach/resources/styles/components/course/student_id.less b/coach/resources/styles/components/course/student_id.less
new file mode 100644
index 0000000000..6f25acb680
--- /dev/null
+++ b/coach/resources/styles/components/course/student_id.less
@@ -0,0 +1,26 @@
+.request-student-id {
+
+  .panels {
+    width: 60%;
+    @media (max-width: @screen-sm-min){ width: 95%; }
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-end;
+    .form-group { margin: 0; }
+    .field  { height: 80px; }
+    .cancel {
+      margin-left: 20px;
+      padding-left: 20px;
+      border-left: 1px solid @openstax-neutral-light;
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      a {
+        border-bottom: 0;
+        color: @link-color;
+        &:hover{ color: darken(@link-color, 20%); }
+      }
+    }
+  }
+}
diff --git a/coach/resources/styles/components/dashboard/index.less b/coach/resources/styles/components/dashboard/index.less
new file mode 100644
index 0000000000..d29046a94f
--- /dev/null
+++ b/coach/resources/styles/components/dashboard/index.less
@@ -0,0 +1,4 @@
+.concept-coach-courses-listing {
+  list-style: none;
+  padding-left: 0;
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/exercise/index.less b/coach/resources/styles/components/exercise/index.less
new file mode 100644
index 0000000000..4260adb985
--- /dev/null
+++ b/coach/resources/styles/components/exercise/index.less
@@ -0,0 +1,33 @@
+.exercise-wrapper[data-step-number] {
+  &::before {
+    content: attr(data-step-number) ")";
+    position: absolute;
+    z-index: 2;
+    left: @concept-coach-base-y-padding - 27px;
+    top: @concept-coach-base-x-padding;
+
+    .exercise-typography();
+  }
+}
+
+.exercise-wrapper {
+  .task-help-links {
+    position: absolute;
+    bottom: 1rem;
+  }
+
+  .card-footer {
+    margin-bottom: 2rem;
+  }
+}
+
+.exercise-identifier-link {
+  position: absolute;
+  right: @concept-coach-base-x-padding;
+  bottom: @concept-coach-base-x-padding;
+  color: @openstax-neutral-dark;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  // override CC global 1px blue border
+  a:not(.btn) { border-bottom: 0px; }
+}
diff --git a/coach/resources/styles/components/navigation/index.less b/coach/resources/styles/components/navigation/index.less
new file mode 100644
index 0000000000..8b1eacbf80
--- /dev/null
+++ b/coach/resources/styles/components/navigation/index.less
@@ -0,0 +1,36 @@
+.concept-coach {
+
+  .navbar-brand {
+    > span {
+      display: inline-block;
+    }
+    .navbar-logo {
+      text-transform: uppercase;
+    }
+    .concept-coach-course-name {
+      margin-left: 2rem;
+      font-style: italic;
+      color: @openstax-neutral-light;
+      font-weight: 300;
+    }
+  }
+  .navbar-default {
+    background: @openstax-white;
+  }
+  .navbar-right {
+    .close {
+      float: none;
+    }
+  }
+  .concept-coach-dashboard-nav {
+    .btn {
+      margin-top: -(@padding-base-vertical + 1);
+      margin-bottom: -(@padding-base-vertical + 1);
+    }
+  }
+  .navbar .dropdown-menu > li > a {
+    text-decoration: none;
+  }
+
+
+}
diff --git a/coach/resources/styles/components/progress/exercise.less b/coach/resources/styles/components/progress/exercise.less
new file mode 100644
index 0000000000..9af5b1267b
--- /dev/null
+++ b/coach/resources/styles/components/progress/exercise.less
@@ -0,0 +1,46 @@
+@progress-size: 3rem;
+@progress-margin: 0.5rem;
+@progress-content-size: .7 * @progress-size;
+
+.concept-coach-progress-exercise {
+  display: inline-block;
+  width: @progress-size;
+  height: @progress-size;
+  border-radius: 50%;
+  line-height: @progress-size;
+  position: relative;
+  background: @openstax-neutral-light;
+  text-align: center;
+  font-size: @progress-content-size;
+
+  &:not(:last-child) {
+    margin-right: @progress-margin;
+  }
+
+  &::before {
+    content: '--';
+    display: block;
+    width: 100%;
+    color: @openstax-neutral;
+  }
+
+  &.is-completed {
+    background: @openstax-incorrect-color;
+
+    &::before {
+      .fa-icon();
+      color: @openstax-white;
+      content: @fa-var-close;
+    }
+  }
+
+  &.is-completed.is-correct {
+    background: @openstax-correct-color;
+
+    &::before {
+      .fa-icon();
+      color: @openstax-white;
+      content: @fa-var-check;
+    }
+  }
+}
diff --git a/coach/resources/styles/components/progress/index.less b/coach/resources/styles/components/progress/index.less
new file mode 100644
index 0000000000..5c961d57da
--- /dev/null
+++ b/coach/resources/styles/components/progress/index.less
@@ -0,0 +1,42 @@
+@import './exercise';
+@import './page';
+
+.chapter-section-prefix {
+  font-weight: 400;
+
+  &[data-section] {
+    &::before {
+      content: attr(data-section);
+      padding-right: 2rem;
+    }
+  }
+}
+
+.concept-coach-progress-pages {
+  list-style: none;
+  padding-left: 0;
+  display: table;
+  width: 100%;
+}
+
+.concept-coach-progress-section {
+  h1 {
+    font-weight: 100;
+    border-bottom: 1px solid @openstax-neutral-light;
+  }
+}
+
+.concept-coach-progress-chapter {
+  h3 {
+    line-height: 1.5em;
+    border-bottom: 1px solid @openstax-neutral-light;
+    margin-bottom: 0 !important;
+    font-weight: 100;
+  }
+
+  &.current {
+    h3 {
+      color: @openstax-info;
+    }
+  }
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/progress/page.less b/coach/resources/styles/components/progress/page.less
new file mode 100644
index 0000000000..e70fe92ff1
--- /dev/null
+++ b/coach/resources/styles/components/progress/page.less
@@ -0,0 +1,45 @@
+.concept-coach-progress-page {
+  display: table-row;
+  width: 100%;
+  cursor: pointer;
+
+  .concept-coach-progress-page-title,
+  .concept-coach-progress-page-last-worked,
+  .concept-coach-progress-exercises {
+    display: table-cell;
+    vertical-align: middle;
+    border-bottom: 1px solid @openstax-neutral-lighter;
+    padding: 0.75rem 0;
+  }
+
+  .concept-coach-progress-page-title .chapter-section-prefix {
+    width: inherit;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-weight: 600;
+
+    &::before {
+      font-weight: 200;
+    }
+  }
+
+  .concept-coach-progress-page-last-worked {
+    text-align: center;
+  }
+
+  &:hover {
+    color: @openstax-info;
+
+    h4 {
+      color: @openstax-info !important;
+    }
+
+    .concept-coach-progress-page-title,
+    .concept-coach-progress-page-last-worked,
+    .concept-coach-progress-exercises {
+      border-color: @openstax-info;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/reactive/index.less b/coach/resources/styles/components/reactive/index.less
new file mode 100644
index 0000000000..31ef2a37d7
--- /dev/null
+++ b/coach/resources/styles/components/reactive/index.less
@@ -0,0 +1,8 @@
+.reactive {
+  .openstax-subtle-load(will-load; 'Loading...'; 0.5s);
+
+  &-loading.is-empty {
+    min-height: 5rem;
+    .openstax-subtle-load(loading; 0.9);
+  }
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/task/index.less b/coach/resources/styles/components/task/index.less
new file mode 100644
index 0000000000..bad02707ce
--- /dev/null
+++ b/coach/resources/styles/components/task/index.less
@@ -0,0 +1,65 @@
+.concept-coach-view-task {
+  .card-body {
+    background: @openstax-white;
+    padding: @concept-coach-base-x-padding @concept-coach-base-y-padding;
+    margin-bottom: 2rem;
+  }
+}
+
+.concept-coach-task-review {
+  .exercise-card {
+    margin-bottom: 4rem;
+  }
+
+  .concept-coach-task-review-controls {
+    .btn {
+      width: 50%;
+      i.fa {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  .coach-coach-review-completed {
+    text-align: center;
+
+    p {
+      margin-top: 1rem;
+      font-size: 2rem;
+    }
+  }
+}
+
+.concept-coach-title {
+  margin-bottom: 1.5rem;
+
+  .chapter-section-prefix {
+    display: inline-block;
+    margin-right: 1rem;
+  }
+
+  &.back-to-book {
+    font-size: 2.4rem;
+
+    span {
+      margin-left: 0.5rem;
+    }
+  }
+
+  &.has-title {
+    .concept-coach-title-link {
+      border-left: 1px solid @openstax-neutral;
+      padding: 0 1rem;
+    }
+  }
+
+  a {
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: @openstax-info;
+    }
+  }
+}
\ No newline at end of file
diff --git a/coach/resources/styles/components/user/index.less b/coach/resources/styles/components/user/index.less
new file mode 100644
index 0000000000..5b6c23a31a
--- /dev/null
+++ b/coach/resources/styles/components/user/index.less
@@ -0,0 +1,15 @@
+.accounts-iframe {
+
+  .heading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid @openstax-neutral;
+  }
+
+  .accounts-iframe {
+    &.logout {
+      overflow: hidden;
+    }
+  }
+}
diff --git a/coach/resources/styles/demo.less b/coach/resources/styles/demo.less
new file mode 100644
index 0000000000..5f5144c6c0
--- /dev/null
+++ b/coach/resources/styles/demo.less
@@ -0,0 +1,4 @@
+@import '~openstax-react-components/resources/styles/main';
+@import "@{bootstrap-path}/jumbotron";
+@import "@{bootstrap-path}/navs";
+@import "@{bootstrap-path}/navbar";
diff --git a/coach/resources/styles/main.less b/coach/resources/styles/main.less
new file mode 100644
index 0000000000..f09aed51fa
--- /dev/null
+++ b/coach/resources/styles/main.less
@@ -0,0 +1,25 @@
+@import '~openstax-react-components/resources/styles/no-conflict';
+@import './components/concept-coach/modal-opened';
+// @import '~animate.less/source/bounceInLeft.less';
+
+// All styles are included inside the wrapper selector
+// This ensures CC specific styles do not alter
+// the appearance of the website that's embedding CC
+.concept-coach-wrapper {
+  width: 100%;
+  height: 100%;
+
+  @import "@{bootstrap-path}/variables";
+
+  @import './components/concept-coach/index';
+  @import './components/navigation/index';
+  @import './components/task/index';
+  @import './components/exercise/index';
+  @import './components/progress/index';
+  @import './components/reactive/index';
+  @import './components/course/index';
+  @import './components/user/index';
+
+  @import './mixins';
+  @import './variables';
+}
diff --git a/coach/resources/styles/mixins.less b/coach/resources/styles/mixins.less
new file mode 100644
index 0000000000..39e8f9b44a
--- /dev/null
+++ b/coach/resources/styles/mixins.less
@@ -0,0 +1,40 @@
+.openstax-subtle-load(will-load; @loading-text: 'Loading...'; @trans-time: 0.25s; @bg-fade: 90%; @bg-base: @openstax-white;) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: @loading-text;
+    background: fade(@bg-base, @bg-fade);
+    top: 0;
+    text-align: center;
+    font-size: 3rem;
+    opacity: 0;
+    display: none;
+
+    .transition(opacity @trans-time ease-in-out);
+  }
+}
+
+.openstax-subtle-load(loading, @opacity: 1) {
+  &::after {
+    .flex-display();
+    .align-items(center);
+    justify-content: center;
+    opacity: @opacity;
+  }
+}
+
+.keyframes(@name; @arguments) {
+  @-moz-keyframes @name { @arguments(); }
+  @-webkit-keyframes @name { @arguments(); }
+  @keyframes @name { @arguments(); }
+}
+
+.transform(@transforms) {
+  -webkit-transform: @transforms;
+      -ms-transform: @transforms; // IE9 only
+       -o-transform: @transforms;
+          transform: @transforms;
+}
diff --git a/coach/resources/styles/variables.less b/coach/resources/styles/variables.less
new file mode 100644
index 0000000000..b30d311c67
--- /dev/null
+++ b/coach/resources/styles/variables.less
@@ -0,0 +1,6 @@
+@openstax-bio-primary:  @green; // green
+@openstax-bio-secondary:   @openstax-neutral-dark; // dark gray
+@openstax-physics-primary:  @dark-blue; // blue
+@openstax-physics-secondary:   @green; // green
+@concept-coach-base-x-padding: 30px;
+@concept-coach-base-y-padding: 80px;
diff --git a/coach/src/api/index.coffee b/coach/src/api/index.coffee
new file mode 100644
index 0000000000..d63e6697e3
--- /dev/null
+++ b/coach/src/api/index.coffee
@@ -0,0 +1,22 @@
+EventEmitter2 = require 'eventemitter2'
+
+{loader, isPending} = require './loader'
+settings = require './settings'
+
+channel = new EventEmitter2 wildcard: true
+
+# HACK - WORKAROUND
+# MediaBodyView.prototype.initializeConceptCoach calls this multiple times
+# (triggered by back-button and most perhaps search)
+IS_INITIALIZED = false
+
+initialize = (baseUrl) ->
+  settings.baseUrl ?= baseUrl
+  loader(channel, settings) unless IS_INITIALIZED
+  IS_INITIALIZED = true
+
+destroy = ->
+  channel.removeAllListeners()
+  IS_INITIALIZED = false
+
+module.exports = {loader, isPending, settings, initialize, destroy, channel}
diff --git a/coach/src/api/loader.coffee b/coach/src/api/loader.coffee
new file mode 100644
index 0000000000..5ff08f9e32
--- /dev/null
+++ b/coach/src/api/loader.coffee
@@ -0,0 +1,96 @@
+_ = require 'underscore'
+deepMerge = require 'lodash.merge'
+$ = require 'jquery'
+interpolate = require 'interpolate'
+
+METHODS_WITH_DATA = ['PUT', 'PATCH', 'POST']
+LOADING = {}
+API_ACCESS_TOKEN = false
+
+defaultFail = (response) ->
+  console.info(response) unless window.__karma__
+
+getAjaxSettingsByEnv = (isLocal, baseUrl, setting, eventData) ->
+
+  {data, change} = eventData
+  apiSetting = _.pick(setting, 'url', 'method')
+  apiSetting.dataType = 'json'
+  apiSetting.contentType = 'application/json;charset=UTF-8'
+
+  if _.includes(METHODS_WITH_DATA, apiSetting.method)
+    apiSetting.data = JSON.stringify(change or data)
+
+  if isLocal
+    apiSetting.url = "#{interpolate(apiSetting.url, data)}/#{apiSetting.method}.json"
+    apiSetting.method = 'GET'
+  else
+    if setting.useCredentials
+      apiSetting.xhrFields =
+        withCredentials: true
+    else if API_ACCESS_TOKEN
+      apiSetting.headers =
+        Authorization: "Bearer #{API_ACCESS_TOKEN}"
+    apiSetting.url = "#{baseUrl}/#{interpolate(apiSetting.url, data)}"
+
+  apiSetting
+
+getResponseDataByEnv = (isLocal, requestEvent, data) ->
+  if isLocal
+    datasToMerge = [{}, {data, query: requestEvent.query}]
+    if requestEvent.change?
+      datasToMerge.push(data: requestEvent.change)
+  else
+    datasToMerge = [{}, requestEvent, {data}]
+  deepMerge.apply {}, datasToMerge
+
+
+handleAPIEvent = (apiEventChannel, baseUrl, setting, requestEvent = {}) ->
+
+  isLocal = window.__karma__ or setting.loadLocally
+  # simulate server delay
+  delay = if isLocal then 20 else 0
+
+  apiSetting = getAjaxSettingsByEnv(isLocal, baseUrl, setting, requestEvent)
+  if apiSetting.method is 'GET'
+    return if LOADING[apiSetting.url]
+    LOADING[apiSetting.url] = true
+
+  _.delay ->
+    $.ajax(apiSetting)
+      .done((responseData) ->
+        delete LOADING[apiSetting.url]
+        try
+          completedEvent = interpolate(setting.completedEvent, requestEvent.data)
+          completedData = getResponseDataByEnv(isLocal, requestEvent, responseData)
+          apiEventChannel.emit(completedEvent, completedData)
+        catch error
+          apiEventChannel.emit('error', {apiSetting, response: responseData, failedData: completedData, exception: error})
+      ).fail((response) ->
+        delete LOADING[apiSetting.url]
+
+        {responseJSON} = response
+
+        failedData = getResponseDataByEnv(isLocal, requestEvent, responseJSON)
+        if _.isString(setting.failedEvent)
+          failedEvent = interpolate(setting.failedEvent, requestEvent.data)
+          apiEventChannel.emit(failedEvent, failedData)
+
+        defaultFail(response)
+        apiEventChannel.emit('error', {response, apiSetting, failedData})
+      ).always((response) ->
+        apiEventChannel.emit('completed')
+      )
+  , delay
+
+isPending = ->
+  not _.isEmpty(LOADING)
+
+loader = (apiEventChannel, settings) ->
+  apiEventChannel.on 'set.access_token', (token) ->
+    API_ACCESS_TOKEN = token
+
+  _.each settings.endpoints, (setting, eventName) ->
+    apiEventChannel.on eventName, _.partial(handleAPIEvent, apiEventChannel, setting.baseUrl or settings.baseUrl, setting)
+
+
+module.exports = {loader, isPending}
diff --git a/coach/src/api/settings.coffee b/coach/src/api/settings.coffee
new file mode 100644
index 0000000000..247b07a78b
--- /dev/null
+++ b/coach/src/api/settings.coffee
@@ -0,0 +1,66 @@
+settings =
+
+  endpoints:
+    'exercise.*.send.save':
+      url: 'api/steps/{id}'
+      method: 'PATCH'
+      completedEvent: 'exercise.{id}.receive.save'
+
+    'exercise.*.send.complete':
+      url: 'api/steps/{id}/completed'
+      method: 'PUT'
+      completedEvent: 'exercise.{id}.receive.complete'
+
+    'exercise.*.send.fetch':
+      url: 'api/steps/{id}'
+      method: 'GET'
+      completedEvent: 'exercise.{id}.receive.fetch'
+
+    'task.*.send.fetch':
+      url: 'api/tasks/{id}'
+      method: 'GET'
+      completedEvent: 'task.{id}.receive.fetch'
+      failedEvent: 'task.{id}.receive.failure'
+
+    'task.*.send.fetchByModule':
+      url: 'api/cc/tasks/{collectionUUID}/{moduleUUID}'
+      method: 'GET'
+      completedEvent: 'task.{collectionUUID}/{moduleUUID}.receive.fetchByModule'
+      failedEvent: 'task.{collectionUUID}/{moduleUUID}.receive.failure'
+
+    'user.status.send.fetch':
+      url: 'auth/status'
+      method: 'GET'
+      useCredentials: true
+      completedEvent: 'user.status.receive.fetch'
+
+    'courseDashboard.*.send.fetch':
+      url: 'api/courses/{id}/cc/dashboard'
+      method: 'GET'
+      completedEvent: 'courseDashboard.{id}.receive.fetch'
+
+    'course.*.send.prevalidation':
+      url: 'api/enrollment_changes/prevalidate'
+      method: 'POST'
+      failedEvent: 'course.{book_uuid}.receive.prevalidation.failure'
+      completedEvent: 'course.{book_uuid}.receive.prevalidation.complete'
+
+    'course.*.send.registration':
+      url: 'api/enrollment_changes'
+      method: 'POST'
+      failedEvent: 'course.{book_uuid}.receive.registration.failure'
+      completedEvent: 'course.{book_uuid}.receive.registration.complete'
+
+    'course.*.send.confirmation':
+      url: 'api/enrollment_changes/{id}/approve'
+      method: 'PUT'
+      failedEvent: 'course.{id}.receive.confirmation.failure'
+      completedEvent: 'course.{id}.receive.confirmation.complete'
+
+    'course.*.send.studentUpdate':
+      url: 'api/user/courses/{id}/student'
+      method: 'PATCH'
+      failedEvent: 'course.*.send.studentUpdate.failure'
+      completedEvent: 'course.*.receive.studentUpdate.complete'
+
+module.exports = settings
diff --git a/coach/src/breadcrumbs/index.cjsx b/coach/src/breadcrumbs/index.cjsx
new file mode 100644
index 0000000000..2b316bcfa6
--- /dev/null
+++ b/coach/src/breadcrumbs/index.cjsx
@@ -0,0 +1,109 @@
+React = require 'react'
+classnames = require 'classnames'
+{Breadcrumb} = require 'shared'
+_ = require 'underscore'
+
+tasks = require '../task/collection'
+exercises = require '../exercise/collection'
+
+
+BreadcrumbDynamic = React.createClass
+  displayName: 'BreadcrumbDynamic'
+
+  propTypes:
+    goToStep: React.PropTypes.func.isRequired
+    step: React.PropTypes.object.isRequired
+
+  getInitialState: ->
+    step: @props.step
+
+  componentWillMount: ->
+    {id} = @props.step
+    exercises.channel.on("load.#{id}", @update)
+
+  componentWillUnmount: ->
+    {id} = @props.step
+    exercises.channel.off("load.#{id}", @update)
+
+  update: (eventData) ->
+    @setState(step: eventData.data)
+
+  goToStep: (stepIndex) ->
+    @props.goToStep(stepIndex)
+
+  render: ->
+    {step} = @state
+    crumbProps = _.omit(@props, 'step')
+
+    <Breadcrumb
+      {...crumbProps}
+      step={step}
+      canReview={true}
+      goToStep={@goToStep}/>
+
+
+
+Breadcrumbs = React.createClass
+  displayName: 'Breadcrumbs'
+
+  propTypes:
+    goToStep: React.PropTypes.func.isRequired
+    moduleUUID: React.PropTypes.string.isRequired
+    collectionUUID: React.PropTypes.string.isRequired
+    currentStep: React.PropTypes.number
+    canReview: React.PropTypes.bool
+
+  getInitialState: ->
+    {collectionUUID, moduleUUID} = @props
+    taskId = "#{collectionUUID}/#{moduleUUID}"
+
+    task: tasks.get(taskId)
+    moduleInfo: tasks.getModuleInfo(taskId)
+
+  makeCrumbEnd: (label, enabled) ->
+    {moduleInfo} = @state
+
+    reviewEnd =
+      type: 'end'
+      data:
+        id: "#{label}"
+        title: moduleInfo.title
+      label: label
+      disabled: not enabled
+
+  render: ->
+    {task, moduleInfo} = @state
+    {currentStep, canReview} = @props
+    return null if _.isEmpty(task.steps)
+
+    crumbs = _.map task.steps, (crumbStep, index) ->
+      data: crumbStep
+      crumb: true
+      type: 'step'
+
+    reviewEnd = @makeCrumbEnd('summary', canReview)
+
+    crumbs.push(reviewEnd)
+
+    breadcrumbs = _.map crumbs, (crumb, index) =>
+      {disabled} = crumb
+      classes = classnames({disabled})
+      crumb.key = index
+
+      <BreadcrumbDynamic
+        className={classes}
+        data-label={crumb.label}
+        key={crumb.data.id}
+        crumb={crumb}
+        step={crumb.data or {}}
+        currentStep={currentStep}
+        goToStep={@props.goToStep}/>
+
+
+    <div className='task-homework'>
+      <div className='task-breadcrumbs'>
+        {breadcrumbs}
+      </div>
+    </div>
+
+module.exports = {Breadcrumbs}
diff --git a/coach/src/buttons/index.cjsx b/coach/src/buttons/index.cjsx
new file mode 100644
index 0000000000..cf1d69db97
--- /dev/null
+++ b/coach/src/buttons/index.cjsx
@@ -0,0 +1,164 @@
+React = require 'react/addons'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+EventEmitter2 = require 'eventemitter2'
+classnames = require 'classnames'
+
+BookLinkBase = React.createClass
+  displayName: 'BookLinkBase'
+  propTypes:
+    children: React.PropTypes.node
+    collectionUUID: React.PropTypes.string.isRequired
+    moduleUUID: React.PropTypes.string
+    link: React.PropTypes.string
+
+  contextTypes:
+    close: React.PropTypes.func
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+
+  broadcastNav: (clickEvent) ->
+    clickEvent.preventDefault()
+
+    {onClick} = @props
+    {close, navigator} = @context
+
+    close()
+    navigator.emit('close.for.book', _.pick(@props, 'collectionUUID', 'moduleUUID', 'link'))
+
+    onClick?(clickEvent)
+    true
+
+  render: ->
+    {children} = @props
+    return null unless children?
+
+    React.addons.cloneWithProps(children, onClick: @broadcastNav)
+
+BookLink = React.createClass
+  displayName: 'BookLink'
+  propTypes:
+    children: React.PropTypes.node
+  render: ->
+    {children, className} = @props
+    linkProps = _.omit(@props, 'children', 'className')
+    classes = classnames 'concept-coach-book-link', className
+
+    <BookLinkBase {...linkProps}>
+      <a role='button' className={classes}>
+        {children}
+      </a>
+    </BookLinkBase>
+
+BookButton = React.createClass
+  displayName: 'BookButton'
+  propTypes:
+    children: React.PropTypes.node
+  render: ->
+    {children, className} = @props
+    linkProps = _.omit(@props, 'children', 'className')
+    classes = classnames 'concept-coach-book-link', className
+
+    <BookLinkBase {...linkProps}>
+      <BS.Button className={classes} {...linkProps}>
+        {children}
+      </BS.Button>
+    </BookLinkBase>
+
+ExerciseButton = React.createClass
+  displayName: 'ExerciseButton'
+  propTypes:
+    children: React.PropTypes.node
+  contextTypes:
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+  getDefaultProps: ->
+    children: 'Exercise'
+  showExercise: ->
+    @context.navigator.emit('show.task', {view: 'task'})
+    @props.onClick?()
+  render: ->
+    <BS.Button onClick={@showExercise}>{@props.children}</BS.Button>
+
+ContinueToBookButton = React.createClass
+  displayName: 'ContinueToBookButton'
+  propTypes:
+    children: React.PropTypes.node
+    moduleUUID: React.PropTypes.string
+  contextTypes:
+    collectionUUID: React.PropTypes.string
+    getNextPage: React.PropTypes.func
+
+  getInitialState: ->
+    @getNextPage()
+  getDefaultProps: ->
+    bsStyle: 'primary'
+  componentWillReceiveProps: (nextProps, nextContext) ->
+    nextPage = @getNextPage(nextProps, nextContext)
+    @setState(nextPage)
+
+  getNextPage: (props, context) ->
+    props ?= @props
+    context ?= @context
+
+    {moduleUUID} = props
+    {collectionUUID} = context
+
+    fallBack =
+      nextChapter: 'Reading'
+      nextModuleUUID: moduleUUID
+
+    context.getNextPage?({moduleUUID, collectionUUID}) or fallBack
+
+  render: ->
+    props = _.omit(@props, 'children')
+    {nextChapter, nextModuleUUID} = @state
+    {collectionUUID} = @context
+
+    continueLabel = @props.children unless _.isEmpty @props.children
+    continueLabel ?= "Continue to #{nextChapter}"
+
+    <BookButton
+      {...props}
+      moduleUUID={nextModuleUUID}
+      collectionUUID={collectionUUID}>
+      {continueLabel}
+      <i className='fa fa-caret-right'></i>
+    </BookButton>
+
+
+GoToBookLink = React.createClass
+  displayName: 'GoToBookLink'
+  contextTypes:
+    moduleUUID: React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+    triggeredFrom:  React.PropTypes.shape(
+      moduleUUID:     React.PropTypes.string
+      collectionUUID: React.PropTypes.string
+    )
+
+  isFromOpen: ->
+    {triggeredFrom} = @context
+    viewingInfo = _.pick(@props, 'moduleUUID', 'collectionUUID')
+
+    _.isEqual(triggeredFrom, viewingInfo)
+
+  render: ->
+    linkAction = if @isFromOpen() then 'Return' else 'Go'
+    <BookLink {...@props}>
+      {linkAction} to Reading
+    </BookLink>
+
+
+ReturnToBookButton = React.createClass
+  displayName: 'ReturnToBookButton'
+  getDefaultProps: ->
+    section: 'Reading'
+  render: ->
+    {section, className} = @props
+    classes = classnames 'btn-plain', className
+
+    <BookButton {...@props} className={classes}>
+      <i className='fa fa-caret-left'></i>
+      Return to {section}
+    </BookButton>
+
+module.exports = {ExerciseButton, ContinueToBookButton, ReturnToBookButton, GoToBookLink, BookLink, BookLinkBase}
diff --git a/coach/src/concept-coach/base.cjsx b/coach/src/concept-coach/base.cjsx
new file mode 100644
index 0000000000..16b87da372
--- /dev/null
+++ b/coach/src/concept-coach/base.cjsx
@@ -0,0 +1,195 @@
+React = require 'react'
+
+_ = require 'underscore'
+classnames = require 'classnames'
+EventEmitter2 = require 'eventemitter2'
+
+{SmartOverflow, SpyMode} = require 'shared'
+
+{Task} = require '../task'
+navigation = {Navigation} = require '../navigation'
+CourseRegistration = require '../course/registration'
+ErrorNotification = require './error-notification'
+AccountsIframe = require '../user/accounts-iframe'
+UpdateStudentIdentifier = require '../course/update-student-identifier'
+LoginGateway = require '../user/login-gateway'
+User = require '../user/model'
+
+{ExerciseStep} = require '../exercise'
+{Dashboard} = require '../dashboard'
+{Progress} = require '../progress'
+
+{channel} = require './model'
+navigator = navigation.channel
+
+# TODO Move this and auth logic to user model
+# These views are used with an authLevel (0, 1, 2, or 3) to determine what views the user is allowed to see.
+VIEWS = ['loading', 'login', 'registration', ['task', 'progress', 'profile', 'dashboard', 'registration', 'student_id'], 'logout']
+
+ConceptCoach = React.createClass
+  displayName: 'ConceptCoach'
+
+  propTypes:
+    close:          React.PropTypes.func
+    moduleUUID:     React.PropTypes.string.isRequired
+    collectionUUID: React.PropTypes.string.isRequired
+    triggeredFrom:  React.PropTypes.shape(
+      moduleUUID:     React.PropTypes.string
+      collectionUUID: React.PropTypes.string
+    )
+
+  getDefaultProps: ->
+    defaultView: _.chain(VIEWS).last().first().value()
+
+  getInitialState: ->
+    userState = User.status(@props.collectionUUID)
+    view = @getAllowedView(userState)
+    userState.view = view
+    userState
+
+  childContextTypes:
+    moduleUUID:     React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+    triggeredFrom:  React.PropTypes.shape(
+      moduleUUID:     React.PropTypes.string
+      collectionUUID: React.PropTypes.string
+    )
+    getNextPage: React.PropTypes.func
+    view: React.PropTypes.oneOf(_.flatten(VIEWS))
+    cnxUrl: React.PropTypes.string
+    bookUrlPattern: React.PropTypes.string
+    close: React.PropTypes.func
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+    processHtmlAndMath: React.PropTypes.func
+
+  getChildContext: ->
+    {view} = @state
+    {cnxUrl, close, moduleUUID, collectionUUID, getNextPage, triggeredFrom} = @props
+    bookUrlPattern = '{cnxUrl}/contents/{ecosystem_book_uuid}'
+    processHtmlAndMath = @props.processHtmlAndMath
+
+    {
+      view,
+      cnxUrl,
+      close,
+      processHtmlAndMath,
+      bookUrlPattern,
+      navigator,
+      moduleUUID,
+      collectionUUID,
+      triggeredFrom,
+      getNextPage
+    }
+
+  componentWillMount: ->
+    User.ensureStatusLoaded()
+
+  componentDidMount: ->
+    mountData = @getMountData('mount')
+    channel.emit('coach.mount.success', mountData)
+
+    User.channel.on('change', @updateUser)
+    navigator.on('show.*', @updateView)
+
+  componentWillUnmount: ->
+    mountData = @getMountData('ummount')
+    channel.emit('coach.unmount.success', mountData)
+
+    User.channel.off('change', @updateUser)
+    navigator.off('show.*', @updateView)
+
+  getAllowedView: (userInfo) ->
+    {defaultView} = @props
+    if not userInfo.isLoaded
+      authLevel = 0
+    else if userInfo.preValidate
+      authLevel = 2 # prevalidate the course
+    else if not userInfo.isLoggedIn
+      authLevel = 1 # login / signup
+    else if not userInfo.isRegistered
+      authLevel = 2 # complete joining the course
+    else
+      authLevel = 3
+
+    view = VIEWS[authLevel]
+
+    # if there are multiple views allowed for this level
+    if _.isArray(view)
+      # and the target/defaultView is one of the views in this level
+      if defaultView in view
+        # then the iew should be the defaultView
+        view = defaultView
+      else
+        # else, the view should be the first of views allowed for this level
+        view = _.first(view)
+
+    view
+
+  getMountData: (action) ->
+    {moduleUUID, collectionUUID} = @props
+    {view} = @state
+    el = @getDOMNode()
+
+    coach: {el, action, view, moduleUUID, collectionUUID}
+
+  updateView: (eventData) ->
+    {view} = eventData
+    @setState({view}) if view? and view isnt @state.view
+
+  showTasks: ->
+    @updateView(view: 'task')
+
+  updateUser: ->
+    userState = User.status(@props.collectionUUID)
+    view = @getAllowedView(userState)
+
+    # tell nav to update view if the next view isn't the current view
+    navigator.emit("show.#{view}", view: view) if view isnt @state.view
+
+    @setState(userState)
+
+  childComponent: (course) ->
+    {view} = @state
+    switch view
+      when 'loading'
+        <span><i className='fa fa-spinner fa-spin'/> Loading ...</span>
+      when 'logout'
+        <AccountsIframe type='logout' />
+      when 'login'
+        <LoginGateway />
+      when 'registration'
+        <CourseRegistration {...@props} />
+      when 'task'
+        <Task {...@props} key='task'/>
+      when 'progress'
+        <Progress id={course.id}/>
+      when 'dashboard'
+        <Dashboard cnxUrl={@props.cnxUrl}/>
+      when 'profile'
+        <AccountsIframe type='profile' onComplete={@updateUser} />
+      when 'registration'
+        <CourseRegistration {...@props} />
+      when 'student_id'
+        <UpdateStudentIdentifier {...@props} course={course} />
+      else
+        <h3 className="error">bad internal state, no view is set</h3>
+
+  render: ->
+    {isLoaded, isLoggedIn, view} = @state
+    course = User.getCourse(@props.collectionUUID)
+
+    className = classnames 'concept-coach-view', "concept-coach-view-#{view}",
+      loading: not (isLoggedIn or isLoaded)
+
+    <div className='concept-coach openstax-wrapper'>
+      <ErrorNotification />
+
+      <SpyMode.Wrapper>
+        <Navigation key='user-status' close={@props.close} course={course}/>
+        <div className={className}>
+          {@childComponent(course)}
+        </div>
+      </SpyMode.Wrapper>
+    </div>
+
+module.exports = {ConceptCoach, channel}
diff --git a/coach/src/concept-coach/coach.cjsx b/coach/src/concept-coach/coach.cjsx
new file mode 100644
index 0000000000..bd5f560c18
--- /dev/null
+++ b/coach/src/concept-coach/coach.cjsx
@@ -0,0 +1,33 @@
+React = require 'react'
+_ = require 'underscore'
+
+{ConceptCoach, channel} = require './base'
+{CCModal} = require './modal'
+{Launcher} = require './launcher'
+
+Coach = React.createClass
+  displayName: 'Coach'
+  getDefaultProps: ->
+    open: false
+    displayLauncher: true
+  propTypes:
+    open: React.PropTypes.bool
+    displayLauncher: React.PropTypes.bool
+    filterClick: React.PropTypes.func
+
+  render: ->
+    {open, displayLauncher, filterClick} = @props
+    coachProps = _.omit(@props, 'open')
+
+    modal = <CCModal filterClick={filterClick}>
+      <ConceptCoach {...coachProps}/>
+    </CCModal> if open
+
+    launcher = <Launcher isLaunching={open}/> if displayLauncher
+
+    <div className='concept-coach-wrapper'>
+      {launcher}
+      {modal}
+    </div>
+
+module.exports = {Coach, channel}
diff --git a/coach/src/concept-coach/error-notification.cjsx b/coach/src/concept-coach/error-notification.cjsx
new file mode 100644
index 0000000000..2094854484
--- /dev/null
+++ b/coach/src/concept-coach/error-notification.cjsx
@@ -0,0 +1,106 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_  = require 'underscore'
+api = require '../api'
+
+
+BASE_CONTACT_LINK = 'http://openstax.force.com/support?l=en_US&c=Products%3AConcept_Coach&cu=1&fs=ContactUs&q='
+
+makeContactMessage = (errors, userAgent, location) ->
+  template = """Hello!
+    I ran into a problem while using Concept Coach on
+    #{userAgent} at #{location}.
+
+    Here is some additional info:
+    #{errors.join()}."""
+
+makeContactURL = (errors, windowContext) ->
+  userAgent = windowContext.navigator.userAgent
+  location = windowContext.location.href
+
+  q = encodeURIComponent(makeContactMessage(errors, userAgent, location))
+
+  "#{BASE_CONTACT_LINK}#{q}"
+
+
+ErrorNotification = React.createClass
+
+  getInitialState: ->
+    errors: false, isShowingDetails: false
+
+  componentWillMount: ->
+    api.channel.on 'error', @onError
+
+  componentWillUnmount: ->
+    api.channel.off 'error', @onError
+
+  onError: ({response, failedData, exception}) ->
+    return if failedData?.stopErrorDisplay # someone else is handling displaying the error
+    if exception?
+      errors = [exception.toString()]
+    else if response.status is 0 # either no response, or the response lacked CORS headers and the browser rejected it
+      errors = ["Unknown response received from server"]
+    else
+      errors = ["#{response.status}: #{response.statusText}"]
+      if _.isArray(failedData.data?.errors) # we have something from server to display
+        errors = errors.concat(
+          _.flatten _.map failedData.data.errors, (error) ->
+            # All 422 errors from BE *should* have a "code" property.  If not, show whatever it is
+            if error.code then error.code else JSON.stringify(error)
+          )
+    @setState(errors: errors)
+
+  toggleDetails: ->
+    @setState(isShowingDetails: not @state.isShowingDetails)
+
+  onHide: ->
+    @setState(errors: false)
+
+  renderDetails: ->
+    <BS.Panel header="Error Details">
+      <ul className="errors-listing">
+        {for error, i in @state.errors
+          <li key={i}>{error}</li>}
+      </ul>
+      <p>
+        {window.navigator.userAgent}
+      </p>
+    </BS.Panel>
+
+  render: ->
+    return null unless @state.errors
+
+    modalProps = _.pick(@props, 'container')
+
+    <BS.Modal
+      {...modalProps}
+      className='errors'
+      show={not _.isEmpty(@state.errors)}
+      onHide={@onHide}>
+
+      <BS.Modal.Header closeButton>
+        <BS.Modal.Title>Error encountered</BS.Modal.Title>
+      </BS.Modal.Header>
+
+      <div className='modal-body'>
+        <p>
+          An unexpected error has occured.  Please
+          visit <a target="_blank"
+            href={makeContactURL(@state.errors, window)}
+          > our support site </a> so we can help to diagnose and correct the issue.
+        </p>
+        <p>
+          When reporting the issue, it would be helpful if you could include the error details.
+        </p>
+        <BS.Button className='-display-errors' style={marginBottom: '1rem'} onClick={@toggleDetails}>
+          {if @state.isShowingDetails then "Hide" else "Show"} Details
+        </BS.Button>
+        {@renderDetails() if @state.isShowingDetails}
+      </div>
+      <div className='modal-footer'>
+        <BS.Button className='ok' bsStyle='primary' onClick={@onHide}>OK</BS.Button>
+      </div>
+    </BS.Modal>
+
+
+module.exports = ErrorNotification
diff --git a/coach/src/concept-coach/index.cjsx b/coach/src/concept-coach/index.cjsx
new file mode 100644
index 0000000000..1a1e2936b1
--- /dev/null
+++ b/coach/src/concept-coach/index.cjsx
@@ -0,0 +1,175 @@
+_ = require 'underscore'
+$ = require 'jquery'
+EventEmitter2 = require 'eventemitter2'
+helpers = require '../helpers'
+
+restAPI = require '../api'
+componentModel = require './model'
+navigation = require '../navigation/model'
+User = require '../user/model'
+exercise = require '../exercise/collection'
+progress = require '../progress/collection'
+task = require '../task/collection'
+
+{Coach} = require './coach'
+coachWrapped = helpers.wrapComponent(Coach)
+
+PROPS = ['moduleUUID', 'collectionUUID', 'cnxUrl', 'getNextPage', 'processHtmlAndMath']
+WRAPPER_CLASSNAME = 'concept-coach-wrapper'
+
+listenAndBroadcast = (componentAPI) ->
+  # Broadcast various internal events out to parent
+  restAPI.channel.on 'error', (response) ->
+    componentAPI.emit('api.error', response)
+
+  restAPI.channel.on 'user.status.receive.fetch', (response) ->
+    componentAPI.emit('user.change', response)
+
+  componentModel.channel.on 'coach.mount.success', (eventData) ->
+    componentModel.update(eventData.coach)
+
+    componentAPI.emit('open', eventData)
+    componentAPI.emit('view.update', navigation.getDataByView(eventData.coach.view))
+
+  componentModel.channel.on 'coach.unmount.success', (eventData) ->
+    componentModel.update(eventData.coach)
+
+    componentAPI.emit('close', eventData)
+    componentAPI.emit('view.update', navigation.getDataByView('close'))
+
+  componentModel.channel.on 'close.clicked', ->
+    componentAPI.emit('ui.close')
+
+  componentModel.channel.on 'launcher.clicked', ->
+    componentAPI.emit('ui.launching')
+
+  navigation.channel.on 'show.*', (eventData) ->
+    componentAPI.emit('view.update', navigation.getDataByView(eventData.view))
+
+  navigation.channel.on 'close.for.book', (eventData) ->
+    componentAPI.emit('book.update', eventData)
+
+  exercise.channel.on 'component.*', (eventData) ->
+    componentAPI.emit("exercise.component.#{eventData.status}", eventData)
+
+setupAPIListeners = (componentAPI) ->
+  navigation.channel.on "switch.*", (eventData) ->
+    {data, view} = eventData
+    componentAPI.update(data)
+    navigation.channel.emit("show.#{view}", {view})
+
+  componentAPI.on 'show.*', (eventData) ->
+    componentAPI.updateToView(eventData.view)
+
+initializeModels = (models) ->
+  _.each models, (model) ->
+    model.init?()
+
+stopModelChannels = (models) ->
+  _.each models, (model) ->
+    model.destroy?() or model.channel?.removeAllListeners?()
+
+deleteProperties = (obj) ->
+  for property, value of obj
+    delete obj[property] unless _.isFunction(obj[property]) or property is 'channel'
+    null
+
+class ConceptCoachAPI extends EventEmitter2
+  constructor: (baseUrl, navOptions = {}) ->
+    super(wildcard: true)
+
+    _.defaults(navOptions, {prefix: '/', base: 'concept-coach/'})
+
+    restAPI.init = _.partial restAPI.initialize, baseUrl
+    navigation.init = _.partial navigation.initialize, navOptions
+
+    @models = [restAPI, navigation, User, exercise, progress, task, componentModel]
+    initializeModels(@models)
+
+    listenAndBroadcast(@)
+    setupAPIListeners(@)
+    User.ensureStatusLoaded(true)
+
+  destroy: ->
+    @close?()
+    @remove()
+
+    stopModelChannels(@models)
+    deleteProperties(@models)
+    deleteProperties(componentModel)
+
+    @removeAllListeners()
+
+  remove: ->
+    coachWrapped.unmountFrom(componentModel.mounter) if @component?.isMounted()
+
+  setOptions: (options) ->
+    isSame = _.isEqual(_.pick(options, PROPS), _.pick(componentModel, PROPS))
+    options = _.extend({}, options, isSame: isSame)
+    componentModel.update(options)
+
+  initialize: (mountNode, props = {}) ->
+    @remove()
+    props = _.clone(props)
+    props.defaultView ?= if componentModel.isSame then componentModel.view else 'task'
+
+    componentModel.update(
+      mounter: mountNode
+      isSame: true
+    )
+
+    props.close = =>
+      @component.setProps(open: false)
+      componentModel.channel.emit('close.clicked')
+
+    @close = props.close
+    @component = coachWrapped.render(mountNode, props)
+
+  open: (props) ->
+    # wait until our logout request has been received and the close
+    User.channel.once 'logout.received', =>
+      @close()
+
+    openProps = _.extend({}, props, open: true)
+    openProps.triggeredFrom = _.pick(props, 'moduleUUID', 'collectionUUID')
+
+    @component.setProps(openProps)
+
+  openByRoute: (props, route) ->
+    props = _.clone(props)
+    props.defaultView = navigation.getViewByRoute(route)
+
+    if props.defaultView? and props.defaultView isnt 'close'
+      @open(props)
+
+  updateToView: (view) ->
+    if @component?.isMounted()
+      if view is 'close'
+        @component.props.close()
+      else
+        navigation.channel.emit("show.#{view}", {view})
+    else if componentModel.mounter? and view isnt 'close'
+      props = _.pick(componentModel, PROPS)
+      props.defaultView = view
+      @open(props)
+
+  updateToRoute: (route) ->
+    view = navigation.getViewByRoute(route)
+    @updateToView(view) if view?
+
+  update: (nextProps) ->
+    return unless @component?
+    props = _.extend({}, _.pick(nextProps, PROPS))
+    @component.setProps(props)
+
+  handleOpened: (eventData, body = document.body) ->
+    body.classList.add('cc-opened')
+
+  handleClosed: (eventData, body = document.body) ->
+    body.classList.remove('cc-opened')
+
+  handleError: (error) ->
+    channel.emit('error', error)
+    console.info(error)
+
+module.exports = ConceptCoachAPI
diff --git a/coach/src/concept-coach/laptop-and-mug.cjsx b/coach/src/concept-coach/laptop-and-mug.cjsx
new file mode 100644
index 0000000000..80768ea5c2
--- /dev/null
+++ b/coach/src/concept-coach/laptop-and-mug.cjsx
@@ -0,0 +1,111 @@
+# coffeelint: disable=max_line_length
+React = require 'react'
+
+LaptopAndMug = React.createClass
+
+  propTypes:
+    height: React.PropTypes.number.isRequired
+
+  render: ->
+    {height} = @props
+    <svg x="0px" y="0px" width="100%" height={"#{height}px"} viewBox="-100 0 1140 388" className="laptop-and-mug"
+      preserveAspectRatio="xMidYMin slice" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+      <g className='launcher-laptop'>
+        <path fill-rule="evenodd" fill="#5F6163" d="M385.927,295.597V122.57c0-20.053,5.683-25.72,25.72-25.72h240.835 c20.034,0,25.72,5.667,25.72,25.72v173.026"/>
+        <path fill-rule="evenodd" fill="#D1D2D2" d="M350.854,295.597h362.421c3.873,0,7.015,3.142,7.015,7.014v3.942 c0,3.872-3.142,7.014-7.015,7.014H350.854c-3.872,0-7.014-3.142-7.014-7.014v-3.942 C343.84,298.738,346.982,295.597,350.854,295.597z"/>
+        <path fill-rule="evenodd" fill="#9A9A9B" d="M561.292,295.629c0,3.834-3.142,7.015-7.015,7.015h-44.424 c-3.874,0-7.016-3.181-7.016-7.015C502.836,295.556,561.292,295.629,561.292,295.629z"/>
+        <path fill="#E5E5E5" d="M660.963,111.404H403.167c-1.766,0-3.21,1.444-3.21,3.209V281.22c0,1.765,1.444,3.21,3.21,3.21h257.796 c1.765,0,3.209-1.445,3.209-3.21V114.613C664.173,112.849,662.728,111.404,660.963,111.404z"/>
+        <path fill="#FFFFFF" d="M660.963,111.147H403.167c-1.766,0-3.21,1.444-3.21,3.209v14.72h264.216v-14.72 C664.173,112.592,662.728,111.147,660.963,111.147z"/>
+        <rect x="428.717" y="119.311" fill="#E5E5E5" width="61.177" height="4"/>
+        <rect x="408.928" y="117.117" fill="#9A9A9B" width="8.987" height="1.198"/>
+        <rect x="408.928" y="120.112" fill="#9A9A9B" width="8.987" height="1.198"/>
+        <rect x="408.928" y="123.108" fill="#9A9A9B" width="8.987" height="1.199"/>
+        <path className='launcher-laptop-shine' fill="#F1F1F1" d="M401.12,283.669c0.558,0.468,1.267,0.761,2.047,0.761h257.796c1.765,0,3.209-1.445,3.209-3.21V129.077 h-26.951L401.12,283.669z"/>
+      </g>
+
+      <g className='launcher-coffee'>
+        <g className='launcher-coffee-steam'>
+          <path fill-rule="evenodd" fill="#FFFFFF" d="M773.967,191.167c3.781,6.054-8.06,11.515-8.06,11.515s6.199-4.644,3.454-11.515 c-2.746-6.872,3.307-9.169,5.757-9.788C775.452,181.296,769.754,184.422,773.967,191.167z"/>
+          <path fill-rule="evenodd" fill="#FFFFFF" d="M756.12,203.833 c0,0,7.693-5.226,4.605-13.243c-3.088-8.016,3.001-10.793,5.757-11.513c0.375-0.099-5.316,4.221-0.575,12.09 C770.161,198.23,756.12,203.833,756.12,203.833z"/>
+        </g>
+        <path className='launcher-coffee-mug' fill-rule="evenodd" fill="#77AF42" d="M814.514,245.441c0,10.459-8.742,18.65-19.097,19.097v10.185 c0,4.672-2.966,8.275-7.639,8.275h-42.649c-4.673,0-8.275-3.603-8.275-8.275v-59.2c0-4.671,0.42-6.366,5.094-6.366h49.013 c4.674,0,4.457,1.694,4.457,6.366v10.186C805.772,226.154,814.514,234.981,814.514,245.441z M795.417,232.71v24.825 c6.585-0.443,12.731-5.399,12.731-12.094C808.148,238.746,802.002,233.152,795.417,232.71z"/>
+        <path className='launcher-coffee-shine' fill-rule="evenodd" fill="#8EC15A" d="M743.989,215.922c1.055,0,1.911,0.855,1.911,1.91v59.199 c0,1.055-0.856,1.911-1.911,1.911c-1.054,0-1.909-0.855-1.909-1.911v-59.199C742.08,216.777,742.936,215.922,743.989,215.922z"/>
+      </g>
+
+      <g className='launcher-concept-coach'>
+        <rect className='launcher-concept-coach-screen' fill="#F1F1F1" x="426.338" y="138.694" width="211.662" height="137.639"/>
+        <polygon className='launcher-concept-coach-shine-bottom' fill="#F5F5F5" points="638,276.333 638,138.694 622.534,138.694 426.338,267.157 426.338,276.333"/>
+        <g className='launcher-section-label'>
+          <path fill="#222E65" d="M432.273,145.027c0.29-0.296,0.659-0.444,1.106-0.444c0.599,0,1.037,0.199,1.313,0.596 c0.153,0.223,0.235,0.447,0.247,0.671h-0.752c-0.048-0.172-0.109-0.303-0.184-0.391c-0.134-0.156-0.333-0.234-0.596-0.234 c-0.268,0-0.479,0.11-0.634,0.331c-0.155,0.221-0.232,0.533-0.232,0.937s0.082,0.706,0.245,0.907 c0.164,0.201,0.371,0.301,0.622,0.301c0.258,0,0.455-0.086,0.59-0.259c0.075-0.093,0.137-0.232,0.186-0.417h0.747 c-0.064,0.392-0.229,0.711-0.494,0.957c-0.265,0.246-0.604,0.369-1.018,0.369c-0.512,0-0.915-0.166-1.208-0.498 c-0.293-0.333-0.439-0.791-0.439-1.372C431.773,145.852,431.939,145.368,432.273,145.027z"/>
+          <path fill="#222E65" d="M435.535,148.25v-3.599h0.747v1.372h1.399v-1.372h0.747v3.599h-0.747v-1.606h-1.399v1.606H435.535z"/>
+          <path fill="#222E65" d="M440.18,144.651h0.851l1.273,3.599h-0.815l-0.238-0.74h-1.325l-0.244,0.74h-0.787L440.18,144.651z M440.13,146.89h0.922l-0.455-1.416L440.13,146.89z"/>
+          <path fill="#222E65" d="M445.178,146.692c-0.211,0.176-0.512,0.264-0.902,0.264h-0.75v1.294h-0.747v-3.599h1.545 c0.356,0,0.641,0.093,0.852,0.278c0.212,0.186,0.318,0.473,0.318,0.862C445.494,146.216,445.388,146.517,445.178,146.692z M444.604,145.396c-0.095-0.08-0.229-0.12-0.4-0.12h-0.678v1.06h0.678c0.171,0,0.305-0.043,0.4-0.129s0.143-0.223,0.143-0.41 S444.699,145.476,444.604,145.396z"/>
+          <path fill="#222E65" d="M448.711,144.651v0.637h-1.077v2.961h-0.757v-2.961h-1.082v-0.637H448.711z"/>
+          <path fill="#222E65" d="M451.812,145.289h-1.904v0.764h1.748v0.625h-1.748v0.925h1.992v0.647h-2.727v-3.599h2.639V145.289z"/>
+          <path fill="#222E65" d="M454.792,144.744c0.132,0.057,0.245,0.141,0.337,0.251c0.076,0.091,0.136,0.192,0.181,0.303 s0.067,0.237,0.067,0.378c0,0.171-0.043,0.339-0.129,0.504c-0.086,0.166-0.229,0.282-0.427,0.351 c0.166,0.067,0.284,0.162,0.353,0.284c0.069,0.123,0.104,0.311,0.104,0.563v0.242c0,0.165,0.007,0.276,0.02,0.334 c0.02,0.093,0.066,0.161,0.139,0.205v0.09h-0.83c-0.023-0.08-0.039-0.144-0.049-0.193c-0.02-0.101-0.03-0.204-0.032-0.31 l-0.005-0.334c-0.003-0.229-0.042-0.382-0.119-0.459c-0.076-0.077-0.219-0.115-0.428-0.115h-0.734v1.411h-0.735v-3.599h1.721 C454.47,144.656,454.66,144.687,454.792,144.744z M453.238,145.276v0.967h0.809c0.161,0,0.281-0.02,0.362-0.059 c0.142-0.068,0.213-0.204,0.213-0.405c0-0.218-0.069-0.365-0.207-0.439c-0.077-0.042-0.193-0.063-0.348-0.063H453.238z"/>
+          <path fill="#222E65" d="M457.372,146.729c0.09-0.161,0.221-0.282,0.394-0.364c-0.171-0.114-0.283-0.237-0.334-0.37 c-0.051-0.132-0.077-0.256-0.077-0.372c0-0.257,0.097-0.477,0.291-0.658c0.194-0.181,0.468-0.272,0.822-0.272 s0.628,0.091,0.822,0.272c0.194,0.182,0.291,0.401,0.291,0.658c0,0.116-0.025,0.24-0.077,0.372 c-0.051,0.133-0.162,0.248-0.333,0.346c0.175,0.098,0.307,0.227,0.395,0.388s0.132,0.341,0.132,0.54 c0,0.298-0.11,0.551-0.331,0.761c-0.221,0.209-0.529,0.313-0.925,0.313c-0.396,0-0.695-0.104-0.899-0.313 c-0.204-0.209-0.306-0.463-0.306-0.761C457.237,147.07,457.282,146.89,457.372,146.729z M458.095,147.627 c0.09,0.096,0.215,0.144,0.375,0.144s0.285-0.048,0.375-0.144c0.091-0.096,0.136-0.231,0.136-0.405 c0-0.181-0.046-0.318-0.138-0.412c-0.092-0.093-0.216-0.14-0.373-0.14s-0.28,0.047-0.373,0.14 c-0.092,0.094-0.138,0.231-0.138,0.412C457.959,147.396,458.004,147.531,458.095,147.627z M458.139,146.016 c0.079,0.082,0.189,0.122,0.329,0.122c0.142,0,0.252-0.041,0.33-0.122s0.116-0.187,0.116-0.315c0-0.14-0.039-0.25-0.116-0.328 c-0.078-0.079-0.188-0.119-0.33-0.119c-0.14,0-0.25,0.04-0.329,0.119c-0.079,0.079-0.119,0.188-0.119,0.328 C458.021,145.83,458.06,145.935,458.139,146.016z"/>
+        </g>
+        <g className='launcher-concept-row launcher-question'>
+          <circle fill="#F47641" cx="450.107" cy="176.179" r="7.236"/>
+          <path fill="#FFFFFF" d="M453.193,177.441c-0.126,0.413-0.313,0.755-0.56,1.028l0.826,0.778l-0.784,0.818l-0.864-0.82 c-0.264,0.16-0.492,0.273-0.685,0.338c-0.322,0.108-0.708,0.162-1.158,0.162c-0.938,0-1.714-0.28-2.326-0.84 c-0.743-0.674-1.114-1.664-1.114-2.969c0-1.315,0.381-2.31,1.143-2.983c0.622-0.55,1.395-0.825,2.319-0.825 c0.931,0,1.712,0.292,2.344,0.874c0.729,0.674,1.094,1.616,1.094,2.827C453.428,176.471,453.35,177.008,453.193,177.441z M450.465,178.408c0.088-0.023,0.2-0.063,0.337-0.123l-0.729-0.693l0.772-0.807l0.731,0.689c0.114-0.234,0.194-0.439,0.239-0.615 c0.072-0.264,0.107-0.571,0.107-0.923c0-0.807-0.165-1.431-0.496-1.872s-0.813-0.662-1.448-0.662 c-0.596,0-1.071,0.211-1.426,0.635s-0.532,1.056-0.532,1.899c0,0.986,0.254,1.693,0.762,2.119 c0.329,0.277,0.723,0.415,1.182,0.415C450.139,178.471,450.305,178.45,450.465,178.408z"/>
+          <g className='launcher-text'>
+            <rect fill="#222E65" x="461.509" y="170.954" width="138.3" height="3.845"/>
+            <polygon fill="#7A7A99" points="599.809,170.954 573.238,170.954 567.367,174.799 599.809,174.799"/>
+            <rect x="461.509" y="177.623" fill="#222E65" width="83.606" height="3.845"/>
+          </g>
+        </g>
+        <g className='launcher-concept-row launcher-answer launcher-a'>
+          <g className='launcher-circle'>
+            <circle fill="#FFFFFF" cx="451.581" cy="196.976" r="5.762"/>
+            <path className='launcher-letter' fill="#9A9A9B" d="M451.479,196.31c0.207-0.026,0.355-0.059,0.444-0.098c0.16-0.068,0.24-0.173,0.24-0.316 c0-0.174-0.062-0.295-0.184-0.361s-0.303-0.1-0.541-0.1c-0.267,0-0.456,0.065-0.566,0.195c-0.079,0.096-0.132,0.227-0.158,0.391 h-1.074c0.023-0.373,0.128-0.678,0.314-0.918c0.295-0.375,0.803-0.562,1.522-0.562c0.468,0,0.884,0.092,1.248,0.277 c0.364,0.185,0.545,0.534,0.545,1.047v1.953c0,0.135,0.002,0.299,0.008,0.492c0.008,0.146,0.03,0.245,0.066,0.297 s0.091,0.095,0.164,0.129v0.164h-1.211c-0.034-0.086-0.057-0.167-0.07-0.242s-0.023-0.162-0.031-0.258 c-0.154,0.167-0.333,0.309-0.534,0.426c-0.241,0.138-0.514,0.207-0.817,0.207c-0.388,0-0.708-0.11-0.961-0.33 c-0.252-0.22-0.379-0.532-0.379-0.936c0-0.523,0.203-0.902,0.61-1.137c0.223-0.127,0.551-0.219,0.984-0.273L451.479,196.31z M452.16,196.83c-0.071,0.044-0.144,0.08-0.216,0.107c-0.073,0.027-0.172,0.053-0.299,0.076l-0.253,0.047 c-0.238,0.042-0.408,0.092-0.512,0.152c-0.175,0.102-0.263,0.259-0.263,0.473c0,0.19,0.054,0.328,0.161,0.412 s0.237,0.127,0.391,0.127c0.243,0,0.467-0.07,0.672-0.211s0.312-0.397,0.319-0.77V196.83z"/>
+          </g>
+          <g className='launcher-text'>
+            <polygon fill="#E5E5E5" points="461.827,193.022 461.827,196.224 534.651,196.224 539.54,193.022  "/>
+            <polygon fill="#EFEFEF" points="554.25,193.022 539.54,193.022 534.651,196.224 554.25,196.224  "/>
+            <polygon fill="#E5E5E5" points="461.827,198.089 461.827,201.291 526.914,201.291 531.802,198.089"/>
+            <polygon fill="#EFEFEF" points="554.25,198.089 531.802,198.089 526.914,201.291 554.25,201.291"/>
+          </g>
+        </g>
+        <g className='launcher-concept-row launcher-answer launcher-b'>
+          <g className='launcher-circle'>
+            <circle fill="#FFFFFF" cx="451.581" cy="214.626" r="5.762"/>
+            <path className='launcher-letter' fill="#9A9A9B" d="M453.428,213.598c0.318,0.404,0.478,0.924,0.478,1.562c0,0.662-0.157,1.209-0.471,1.645 s-0.752,0.652-1.315,0.652c-0.353,0-0.637-0.07-0.852-0.211c-0.128-0.083-0.267-0.229-0.416-0.438v0.535h-1.098v-5.75h1.113v2.047 c0.142-0.198,0.297-0.349,0.468-0.453c0.202-0.13,0.459-0.195,0.771-0.195C452.668,212.993,453.109,213.194,453.428,213.598z M452.498,216.192c0.16-0.232,0.24-0.537,0.24-0.914c0-0.302-0.04-0.552-0.118-0.75c-0.149-0.375-0.425-0.562-0.827-0.562 c-0.407,0-0.687,0.184-0.839,0.551c-0.079,0.195-0.118,0.448-0.118,0.758c0,0.365,0.082,0.667,0.244,0.906 c0.163,0.24,0.411,0.359,0.745,0.359C452.113,216.54,452.337,216.424,452.498,216.192z"/>
+          </g>
+          <g className='launcher-text'>
+            <polygon fill="#E5E5E5" points="461.827,210.412 461.827,213.613 508.098,213.613 512.986,210.412"/>
+            <polygon fill="#EFEFEF" points="554.25,210.412 512.986,210.412 508.098,213.613 554.25,213.613"/>
+            <polygon fill="#E5E5E5" points="461.827,215.542 461.827,218.744 500.263,218.744 505.151,215.542"/>
+            <polygon fill="#EFEFEF" points="554.25,215.542 505.151,215.542 500.263,218.744 554.25,218.744"/>
+          </g>
+        </g>
+        <g className='launcher-concept-row launcher-answer launcher-c'>
+          <g className='launcher-circle'>
+            <circle fill="#FFFFFF" cx="451.581" cy="232.142" r="5.762"/>
+            <path className='launcher-letter' fill="#9A9A9B" d="M452.339,231.77c-0.021-0.159-0.074-0.302-0.161-0.43c-0.125-0.172-0.32-0.258-0.583-0.258 c-0.376,0-0.633,0.186-0.771,0.559c-0.073,0.197-0.109,0.46-0.109,0.787c0,0.312,0.037,0.562,0.109,0.752 c0.133,0.354,0.384,0.531,0.752,0.531c0.261,0,0.446-0.07,0.556-0.211s0.176-0.323,0.2-0.547h1.137 c-0.026,0.338-0.148,0.659-0.368,0.961c-0.349,0.487-0.867,0.73-1.552,0.73s-1.19-0.203-1.513-0.609s-0.485-0.933-0.485-1.58 c0-0.73,0.179-1.299,0.536-1.705s0.85-0.609,1.478-0.609c0.534,0,0.972,0.12,1.312,0.359c0.34,0.24,0.542,0.663,0.604,1.27 H452.339z"/>
+          </g>
+          <g className='launcher-text'>
+            <polygon fill="#E5E5E5" points="461.827,227.885 461.827,231.086 481.415,231.086 486.303,227.885"/>
+            <polygon fill="#EFEFEF" points="565.411,227.885 486.303,227.885 481.415,231.086 565.411,231.086"/>
+            <polygon fill="#E5E5E5" points="461.827,233.201 461.827,236.402 473.297,236.402 478.186,233.201"/>
+            <polygon fill="#EFEFEF" points="524.301,233.201 478.186,233.201 473.297,236.402 524.301,236.402"/>
+          </g>
+        </g>
+        <g className='launcher-concept-row launcher-answer launcher-d'>
+          <g className='launcher-circle'>
+            <circle fill="#FFFFFF" cx="451.581" cy="249.804" r="5.762"/>
+            <path fill="none" d="M451.412,249.075c-0.326,0-0.564,0.123-0.717,0.369s-0.229,0.551-0.229,0.916c0,0.354,0.072,0.636,0.198,0.863 l1.666-1.09c-0.042-0.372-0.145-0.674-0.356-0.854C451.813,249.143,451.625,249.075,451.412,249.075z"/>
+            <path className='launcher-letter' fill="#9A9A9B" d="M450.467,250.36c0-0.365,0.076-0.67,0.229-0.916s0.391-0.369,0.717-0.369c0.213,0,0.401,0.068,0.562,0.203 c0.211,0.18,0.314,0.482,0.356,0.854l1.136-0.744v-2.677h-1.129v2.031c-0.125-0.201-0.288-0.357-0.488-0.471s-0.43-0.17-0.688-0.17 c-0.56,0-1.007,0.208-1.342,0.625s-0.502,0.988-0.502,1.715c0,0.557,0.141,1.019,0.405,1.397l0.941-0.617 C450.539,250.997,450.467,250.715,450.467,250.36z"/>
+            <path className='launcher-letter-dark' fill="#CFCECE" d="M451.084,252.595c0.302,0,0.555-0.057,0.758-0.172s0.384-0.298,0.543-0.551v0.59h1.082v-3.073l-1.136,0.744 c0.01,0.091,0.039,0.161,0.039,0.263c0,0.373-0.082,0.676-0.246,0.91s-0.404,0.352-0.719,0.352s-0.55-0.118-0.705-0.354 c-0.015-0.023-0.021-0.056-0.034-0.081l-0.941,0.617c0.035,0.05,0.064,0.104,0.104,0.151 C450.168,252.394,450.586,252.595,451.084,252.595z"/>
+            <path className='launcher-letter-hole' fill="#FFFFFF" d="M450.699,251.304c0.155,0.236,0.39,0.354,0.705,0.354s0.555-0.117,0.719-0.352s0.246-0.538,0.246-0.91 c0-0.102-0.028-0.172-0.039-0.263l-1.666,1.09C450.679,251.248,450.684,251.281,450.699,251.304z"/>
+          </g>
+          <g className='launcher-text'>
+            <rect x="461.827" y="245.545" fill-rule="evenodd" fill="#EFEFEF" width="100.223" height="3.201"/>
+            <rect x="461.827" y="250.92" fill-rule="evenodd" fill="#EFEFEF" width="48.276" height="3.084"/>
+          </g>
+        </g>
+      </g>
+
+    </svg>
+
+module.exports = LaptopAndMug
diff --git a/coach/src/concept-coach/launcher/background-and-desk.cjsx b/coach/src/concept-coach/launcher/background-and-desk.cjsx
new file mode 100644
index 0000000000..5e45919714
--- /dev/null
+++ b/coach/src/concept-coach/launcher/background-and-desk.cjsx
@@ -0,0 +1,12 @@
+React = require 'react'
+
+BackgroundAndDesk = React.createClass
+  displayName: 'BackgroundAndDesk'
+  propTypes:
+    height: React.PropTypes.number.isRequired
+  render: ->
+    <div className='launcher-background'>
+      <h1>Study Smarter with OpenStax Concept Coach</h1>
+    </div>
+
+module.exports = BackgroundAndDesk
diff --git a/coach/src/concept-coach/launcher/index.cjsx b/coach/src/concept-coach/launcher/index.cjsx
new file mode 100644
index 0000000000..661b901c13
--- /dev/null
+++ b/coach/src/concept-coach/launcher/index.cjsx
@@ -0,0 +1,52 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+BackgroundAndDesk = require './background-and-desk'
+LaptopAndMug = require '../laptop-and-mug'
+
+{channel} = require '../model'
+
+
+Launcher = React.createClass
+  displayName: 'Launcher'
+  propTypes:
+    isLaunching: React.PropTypes.bool
+    defaultHeight: React.PropTypes.number
+  getDefaultProps: ->
+    isLaunching: false
+    defaultHeight: 388
+  getInitialState: ->
+    height: @getHeight()
+  componentWillReceiveProps: (nextProps) ->
+    @setState(height: @getHeight(nextProps)) if @props.isLaunching isnt nextProps.isLaunching
+
+  getHeight: (props) ->
+    props ?= @props
+    {isLaunching, defaultHeight} = props
+    if isLaunching then window.innerHeight else defaultHeight
+
+  launch: ->
+    channel.emit('launcher.clicked')
+    undefined # stop react from complaining about returning false from a handler
+
+  render: ->
+    {isLaunching, defaultHeight} = @props
+    {height} = @state
+
+    classes = classnames 'concept-coach-launcher',
+      launching: isLaunching
+
+    <div className='concept-coach-launcher-wrapper'>
+      <div className={classes} onClick={@launch}>
+        <LaptopAndMug height={defaultHeight}/>
+        <BS.Button bsStyle='primary' bsSize='large'>
+          <span className="launch">Launch Concept Coach</span>
+          <span className="warn">enrollment code needed</span>
+        </BS.Button>
+        <BackgroundAndDesk height={height}/>
+      </div>
+    </div>
+
+module.exports = {Launcher}
diff --git a/coach/src/concept-coach/modal.cjsx b/coach/src/concept-coach/modal.cjsx
new file mode 100644
index 0000000000..4dba5586a7
--- /dev/null
+++ b/coach/src/concept-coach/modal.cjsx
@@ -0,0 +1,64 @@
+React = require 'react'
+classnames = require 'classnames'
+_ = require 'underscore'
+
+{channel} = require './model'
+api = require '../api'
+navigation = require '../navigation/model'
+
+CCModal = React.createClass
+  displayName: 'CCModal'
+  getInitialState: ->
+    isLoaded: false
+
+  componentDidMount: ->
+    mountData = modal: el: @getDOMNode()
+    channel.emit('modal.mount.success', mountData)
+    mountData.modal.el.focus()
+
+    # only wait to set loaded if there is a pending api call
+    if api.isPending()
+      api.channel.once('completed', @setLoaded)
+    else
+      @setLoaded()
+
+  componentWillMount: ->
+    document.addEventListener('click', @checkAllowed, true)
+    document.addEventListener('focus', @checkAllowed, true)
+
+    navigation.channel.on('show.*', @resetScroll)
+
+  componentWillUnmount: ->
+    document.removeEventListener('click', @checkAllowed, true)
+    document.removeEventListener('focus', @checkAllowed, true)
+
+    navigation.channel.off('show.*', @resetScroll)
+
+  resetScroll: ->
+    modal = @getDOMNode()
+    modal.scrollTop = 0
+
+  checkAllowed: (focusEvent) ->
+    modal = @getDOMNode()
+    unless modal.contains(focusEvent.target) or @props.filterClick?(focusEvent)
+      focusEvent.preventDefault()
+      focusEvent.stopImmediatePropagation()
+      modal.focus()
+
+  setLoaded: ->
+    {isLoaded} = @state
+    @setState(isLoaded: true) unless isLoaded
+
+  render: ->
+    {isLoaded} = @state
+
+    classes = classnames 'concept-coach-modal',
+      loaded: isLoaded
+
+    <div className={classes} role='dialog' tabIndex='-1'>
+      <div role='document'>
+        {@props.children}
+      </div>
+    </div>
+
+module.exports = {CCModal, channel}
diff --git a/coach/src/concept-coach/model.coffee b/coach/src/concept-coach/model.coffee
new file mode 100644
index 0000000000..108e530afe
--- /dev/null
+++ b/coach/src/concept-coach/model.coffee
@@ -0,0 +1,10 @@
+_ = require 'underscore'
+EventEmitter2 = require 'eventemitter2'
+
+coach =
+  update: (options) ->
+    _.extend(@, options)
+
+  channel: new EventEmitter2 wildcard: true
+
+module.exports = coach
\ No newline at end of file
diff --git a/coach/src/course/confirm-join.cjsx b/coach/src/course/confirm-join.cjsx
new file mode 100644
index 0000000000..2c3f886084
--- /dev/null
+++ b/coach/src/course/confirm-join.cjsx
@@ -0,0 +1,76 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+ENTER = 'Enter'
+RequestStudentId = require './request-student-id'
+
+Course = require './model'
+ErrorList = require './error-list'
+{AsyncButton} = require 'shared'
+
+ConfirmJoin = React.createClass
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course).isRequired
+    optionalStudentId: React.PropTypes.bool
+
+  startConfirmation: ->
+    @props.course.confirm(@getSchoolId())
+
+  onKeyPress: (ev) ->
+    @onSubmit() if ev.key is ENTER
+
+  onCancel: (ev) ->
+    ev.preventDefault()
+    @props.course.confirm()
+
+  onSubmit: ->
+    @props.course.confirm(@getSchoolId())
+
+  getSchoolId: -> @refs.input.getDOMNode().value
+
+  render: ->
+
+    <BS.Row>
+      <div className="confirm-join form-group">
+
+        <h3 className="title text-center">
+          <div className="join">You are joining</div>
+          <div className="course">{@props.course.description()}</div>
+          <div className="teacher">{@props.course.teacherNames()}</div>
+        </h3>
+
+        <ErrorList course={@props.course} />
+        <p className="label">Enter your school-issued ID</p>
+        <div className='controls'>
+          <div className='field'>
+
+            <input type="text" className="form-control" ref="input"
+              autoFocus
+              defaultValue={@props.course.getStudentIdentifier()}
+              onKeyPress={@onKeyPress}
+            />
+
+            <AsyncButton
+              className="btn btn-success continue"
+              isWaiting={!!@props.course.isBusy}
+              waitingText={'Confirming…'}
+              onClick={@onSubmit}
+            >
+              Continue
+            </AsyncButton>
+
+          </div>
+          <span className="or">or</span>
+          <a href='#' className="skip" onClick={@onCancel}>
+            Skip this step for now<sup>*</sup>
+          </a>
+        </div>
+        <div className="help-text">
+          <sup>*</sup> You can enter you student ID later by clicking on your name in the top right
+          of your dashboard and selecting "Change Student ID" from the menu.
+        </div>
+      </div>
+    </BS.Row>
+
+
+module.exports = ConfirmJoin
diff --git a/coach/src/course/enroll-or-login.cjsx b/coach/src/course/enroll-or-login.cjsx
new file mode 100644
index 0000000000..88fb6c397b
--- /dev/null
+++ b/coach/src/course/enroll-or-login.cjsx
@@ -0,0 +1,38 @@
+React = require 'react'
+classnames = require 'classnames'
+
+NewCourseRegistration = require './new-registration'
+Course = require './model'
+LoginGateway = require '../user/login-gateway'
+LaptopAndMug = require '../concept-coach/laptop-and-mug'
+
+EnrollOrLogin = React.createClass
+  getInitialState: ->
+    isOpen: false
+
+  toggleOpen: (isOpen) ->
+    @setState({isOpen})
+
+  render: ->
+    {isOpen} = @state
+
+    signUpClasses = classnames 'sign-up',
+      'btn btn-primary btn-lg': not isOpen
+
+    <div className="enroll-or-login">
+      <LaptopAndMug height=400 />
+      <div className="body">
+        <LoginGateway className={signUpClasses} onToggle={@toggleOpen}>Sign up for Concept Coach</LoginGateway>
+        <p className="code-required">
+          Enrollment code required
+        </p>
+        <p className="contact">
+          No enrollment code? Contact your instructor.
+        </p>
+        <div className="login">
+          Already have an account? <LoginGateway className="login">Sign in</LoginGateway>
+        </div>
+      </div>
+    </div>
+
+module.exports = EnrollOrLogin
diff --git a/coach/src/course/enrollment-code-input.cjsx b/coach/src/course/enrollment-code-input.cjsx
new file mode 100644
index 0000000000..ffa3c19318
--- /dev/null
+++ b/coach/src/course/enrollment-code-input.cjsx
@@ -0,0 +1,56 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+ENTER = 'Enter'
+
+{CourseListing} = require './listing'
+ErrorList = require './error-list'
+Course = require './model'
+{AsyncButton} = require 'shared'
+User = require '../user/model'
+
+EnrollmentCodeInput = React.createClass
+
+  propTypes:
+    title: React.PropTypes.string.isRequired
+    course: React.PropTypes.instanceOf(Course).isRequired
+    currentCourses: React.PropTypes.arrayOf(React.PropTypes.instanceOf(Course))
+
+  startRegistration: ->
+    @props.course.register(@refs.input.getValue(), User)
+
+  onKeyPress: (ev) ->
+    return if @props.course.isBusy # double enter
+    @startRegistration() if ev.key is ENTER
+
+  renderCurrentCourses: ->
+    <div className='text-center'>
+      <h3>You are not registered for this course.</h3>
+      <p>Did you mean to go to one of these?</p>
+      <CourseListing courses={@props.currentCourses}/>
+    </div>
+
+  render: ->
+    button =
+      <AsyncButton
+        className='enroll'
+        isWaiting={!!@props.course.isBusy}
+        waitingText={'Registering…'}
+        onClick={@startRegistration}
+      >
+        Enroll
+      </AsyncButton>
+
+    <div className="enrollment-code form-group">
+      {@renderCurrentCourses() if @props.currentCourses?.length}
+      <h3 className="text-center">{@props.title}</h3>
+      <hr/>
+      <ErrorList course={@props.course} />
+      <div className="code-wrapper col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
+        <BS.Input type="text" ref="input" label="Enter the enrollment code"
+          placeholder="enrollment code" autoFocus
+          onKeyPress={@onKeyPress}
+          buttonAfter={button} />
+      </div>
+    </div>
+
+module.exports = EnrollmentCodeInput
diff --git a/coach/src/course/error-list.cjsx b/coach/src/course/error-list.cjsx
new file mode 100644
index 0000000000..7748ea434e
--- /dev/null
+++ b/coach/src/course/error-list.cjsx
@@ -0,0 +1,19 @@
+React = require 'react'
+Course = require './model'
+
+ErrorList = React.createClass
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course).isRequired
+
+  render: ->
+    return null unless @props.course.hasErrors()
+    <div className="alert alert-danger">
+      <ul className="errors">
+        {for msg, i in @props.course.errorMessages()
+          <li key={i}>{msg}</li>}
+      </ul>
+    </div>
+
+
+module.exports = ErrorList
diff --git a/coach/src/course/item.cjsx b/coach/src/course/item.cjsx
new file mode 100644
index 0000000000..fedc976b41
--- /dev/null
+++ b/coach/src/course/item.cjsx
@@ -0,0 +1,44 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+EventEmitter2 = require 'eventemitter2'
+interpolate = require 'interpolate'
+_ = require 'underscore'
+
+{BookLinkBase} = require '../buttons'
+navigation = require '../navigation/model'
+
+CourseItem = React.createClass
+  displayName: 'CourseItem'
+
+  contextTypes:
+    cnxUrl: React.PropTypes.string
+    bookUrlPattern: React.PropTypes.string
+
+  getLink: ->
+    {course} = @props
+    {cnxUrl, bookUrlPattern} = @context
+    {ecosystem_book_uuid} = course
+    bookUrlPattern ?= ''
+
+    link = interpolate bookUrlPattern, {cnxUrl, ecosystem_book_uuid}
+    routeData = navigation.getDataByView('task')
+
+    "#{link}#{routeData.route}"
+
+  render: ->
+    {course} = @props
+    return null unless course.isRegistered()
+
+    {ecosystem_book_uuid} = course
+    link = @getLink()
+    category = course.catalog_offering_identifier?.toLowerCase() or 'unknown'
+
+    <BookLinkBase collectionUUID={ecosystem_book_uuid} link={link}>
+      <BS.ListGroupItem
+        className='concept-coach-course-item'
+        data-category={category}>
+          {course.description()}
+      </BS.ListGroupItem>
+    </BookLinkBase>
+
+module.exports = {CourseItem}
diff --git a/coach/src/course/listing.cjsx b/coach/src/course/listing.cjsx
new file mode 100644
index 0000000000..39fb59b3eb
--- /dev/null
+++ b/coach/src/course/listing.cjsx
@@ -0,0 +1,22 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{CourseItem} = require './item'
+
+CourseListing = React.createClass
+  displayName: 'CourseListing'
+  getDefaultProps: ->
+    disabled: false
+  render: ->
+    {courses} = @props
+    listedCourses = _.map courses, (course) ->
+      <CourseItem
+        key="course-#{course.id}"
+        course={course}/>
+
+    <BS.ListGroup className='concept-coach-courses-listing'>
+      {listedCourses}
+    </BS.ListGroup>
+
+module.exports = {CourseListing}
diff --git a/coach/src/course/model.coffee b/coach/src/course/model.coffee
new file mode 100644
index 0000000000..6f1ef9855d
--- /dev/null
+++ b/coach/src/course/model.coffee
@@ -0,0 +1,178 @@
+# coffeelint: disable=max_line_length
+
+_ = require 'underscore'
+React = require 'react'
+EventEmitter2 = require 'eventemitter2'
+
+api  = require '../api'
+
+ERROR_MAP = {
+  invalid_enrollment_code: 'The provided enrollment code is not valid. Please verify the enrollment code and try again.'
+  enrollment_code_does_not_match_book: 'The provided enrollment code matches a course but not for the current book. ' +
+                                       'Please verify the enrollment code and try again.'
+  already_enrolled: 'You are already enrolled in this course. Please log in.'
+  multiple_roles: 'We currently do not support teacher accounts with multiple associated student enrollments.'
+  dropped_student: 'You have been dropped from this course. Please speak to your instructor to rejoin.'
+  already_processed: 'Your enrollment in this course has been processed. Please reload the page.'
+  already_approved: 'Your enrollment in this course has been approved. Please reload the page.'
+  already_rejected: 'Your request to enroll in this course has been rejected for an unknown reason. Please contact OpenStax support.'
+  taken: 'The provided student ID has already been used in this course. Please try again or contact your instructor.'
+  blank_student_identifer: 'The student ID field cannot be left blank. Please enter your student ID.'
+}
+
+
+class Course
+
+  constructor: (attributes) ->
+    @channel = new EventEmitter2
+    _.extend(@, attributes)
+    _.bindAll(@, '_onRegistered', '_onConfirmed', '_onValidated', '_onStudentUpdated')
+
+  # complete and ready for use
+  isRegistered: -> @id and not (@isIncomplete() or @isPending())
+  # Freshly initialized, registration code has not been entered
+  isIncomplete: -> not (@name or @to)
+  # The registration code has been validated but sign-up is not yet started
+  isValidated: -> @status is "validated"
+  # A registration has been created, but not confimed
+  isPending: ->  @status is "pending"
+
+  # forget in-progress registration information.  Called when a join is canceled
+  resetToBlankState: ->
+    delete @to
+    delete @name
+    @channel.emit('change')
+
+  description: ->
+    if @isIncomplete() # still fetching
+      ""
+    else if @isPending() # we originated from a join or move request
+      msg = @describeMovePart(@to)
+      if @from then "from #{@describeMovePart(@from)} to #{msg}" else msg
+    else
+      "#{@name} #{_.first(@periods).name}"
+
+  describeMovePart: (part) ->
+    return '' unless part
+    "#{part.course.name} (section #{part.period.name})"
+
+  teacherNames: ->
+    part = @to or @
+    return '' unless part.course?.teachers
+    teachers = part.course.teachers
+    names = _.map teachers, (teacher) ->
+      teacher.name or "#{teacher.first_name} #{teacher.last_name}"
+    # convert array to sentence
+    if names.length > 1
+      "Instructors: " + names.slice(0, names.length - 1).join(', ') + " and " + names.slice(-1)
+    else
+      "Instructor: " + _.first(names)
+
+  getStudentIdentifier: ->
+    @getStudentRecord()?.student_identifier
+
+  getStudentRecord: ->
+    # Currently the students listing only contains the current student
+    # If that is ever extended then the bootstrap data will need to include
+    # the current user's id so that the `students` array can be searched for it.
+    @students = [{}] if _.isEmpty(@students)
+    _.first(@students)
+
+  hasErrors: ->
+    not _.isEmpty(@errors)
+
+  errorMessages: ->
+    _.map @errors, (err) -> ERROR_MAP[err.code] or "An unknown error with code #{err.code} occured."
+
+  # When a course needs to be manipluated, it's cloned
+  clone: ->
+    new Course({ecosystem_book_uuid: @ecosystem_book_uuid})
+
+  # The clone's attributes are persisted to the user once complete
+  persist: (user) ->
+    other = user.findOrCreateCourse(@ecosystem_book_uuid)
+    _.extend(other, @to?.course)
+    other.status = @status
+    other.enrollment_code = @enrollment_code
+    other.periods = [ @to?.period ]
+    user.onCourseUpdate(other)
+
+  _onValidated: (response) ->
+    {data} = response
+    delete @isBusy
+    @errors = data?.errors
+    response.stopErrorDisplay = true if @errors
+    @status = 'validated' if data?.response is true
+    @channel.emit('change')
+
+  # Submits pending course change for confirmation
+  confirm: (studentId) ->
+    payload = { id: @id }
+    payload.student_identifier = studentId if studentId
+    @isBusy = true
+    api.channel.once "course.#{@id}.receive.confirmation.*", @_onConfirmed
+    api.channel.emit("course.#{@id}.send.confirmation", data: payload)
+    @channel.emit('change')
+
+  _onConfirmed:  (response) ->
+    throw new Error("response is empty in onConfirmed") if _.isEmpty(response)
+    {data} = response
+    if data?.to
+      _.extend(@, data.to.course)
+      @periods = [ data.to.period ]
+    @errors = data?.errors
+    @getStudentRecord().student_identifier = response.data.student_identifier
+    response.stopErrorDisplay = true if @errors
+    delete @status unless @hasErrors() # blank status indicates good to go
+    delete @isBusy
+    @channel.emit('change')
+
+  # Submits a course invite for registration.  If user is signed in
+  # the registration will be saved, otherwise it will only be vaidated
+  register: (enrollment_code, user) ->
+    @enrollment_code = enrollment_code
+    data = {enrollment_code, book_uuid: @ecosystem_book_uuid}
+    @isBusy = true
+    if user.isLoggedIn()
+      api.channel.once "course.#{@ecosystem_book_uuid}.receive.registration.*", @_onRegistered
+      api.channel.emit("course.#{@ecosystem_book_uuid}.send.registration", {data})
+    else
+      api.channel.once "course.#{@ecosystem_book_uuid}.receive.prevalidation.*", @_onValidated
+      api.channel.emit("course.#{@ecosystem_book_uuid}.send.prevalidation", {data})
+    @channel.emit('change')
+
+  _onStudentUpdated: (response) ->
+    _.extend(@, response.data) if response?.data
+    @getStudentRecord().student_identifier = response.data.student_identifier
+    @channel.emit('change')
+
+  updateStudentIdentifier: ( newIdentifier ) ->
+    if _.isEmpty(newIdentifier)
+      @errors = [{code: 'blank_student_identifer'}]
+      @channel.emit('change')
+    else
+      @updateStudent(student_identifier: newIdentifier)
+
+  updateStudent: (attributes) ->
+    data = _.extend({}, attributes, id: @id)
+    api.channel.once "course.#{@ecosystem_book_uuid}.receive.studentUpdate.*", @_onStudentUpdated
+    api.channel.emit("course.#{@ecosystem_book_uuid}.send.studentUpdate", {data})
+
+  _onRegistered: (response) ->
+    throw new Error("response is empty in onRegistered") if _.isEmpty(response)
+    {data} = response
+    console.log data, response
+    _.extend(@, data) if data
+    @errors = data?.errors
+    # a freshly registered course doesn't contain the is_concept_coach flag
+    @is_concept_coach = true
+    response.stopErrorDisplay = true if @errors
+    delete @isBusy
+    @channel.emit('change')
+
+  destroy: ->
+    @channel.emit('destroy')
+    @channel.removeAllListeners()
+
+
+module.exports = Course
diff --git a/coach/src/course/modify-registration.cjsx b/coach/src/course/modify-registration.cjsx
new file mode 100644
index 0000000000..2747f2199d
--- /dev/null
+++ b/coach/src/course/modify-registration.cjsx
@@ -0,0 +1,66 @@
+React = require 'react'
+_ = require 'underscore'
+
+EnrollmentCodeInput = require './enrollment-code-input'
+RequestStudentId = require './request-student-id'
+
+ConfirmJoin = require './confirm-join'
+User = require '../user/model'
+Course = require './model'
+Navigation = require '../navigation/model'
+
+ModifyCourseRegistration = React.createClass
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course)
+
+  # create a private copy of the course to operate on
+  getInitialState: ->
+    course = @props.course.clone()
+    course.channel.on('change', @onCourseChange)
+    {course, original: @props.course}
+
+  componentWillUnmount: ->
+    @state.course.channel.off('change', @onCourseChange)
+
+  onCourseChange: ->
+    if @state.course.isRegistered()
+      # wait 1.5 secs so our success message is briefly displayed, then call onComplete
+      _.delay(@onComplete, 1500)
+    @forceUpdate()
+
+  showTasks: ->
+    Navigation.channel.emit('show.panel', view: 'task')
+
+  onComplete: ->
+    @state.course.persist(User)
+    @showTasks()
+
+  renderComplete: (course) ->
+    <h3 className="text-center">
+      You have successfully modified your registration to be {course.description()}
+    </h3>
+
+  renderCurrentStep: ->
+    {course, original} = @state
+
+    if course.isIncomplete()
+      <EnrollmentCodeInput
+        course={course}
+        title={"Leave #{original.description()} for new section"} />
+    else if course.isPending()
+      <ConfirmJoin
+        course={course}
+        optionalStudentId
+        title={"Are you sure you want to switch your registration #{course.description()}?"}
+      />
+    else
+      @renderComplete(course)
+
+  render: ->
+    <div className='-modify-registration'>
+      <i className='close-icon' onClick={@showTasks}/>
+      {@renderCurrentStep()}
+    </div>
+
+module.exports = ModifyCourseRegistration
diff --git a/coach/src/course/new-registration.cjsx b/coach/src/course/new-registration.cjsx
new file mode 100644
index 0000000000..823b6f929a
--- /dev/null
+++ b/coach/src/course/new-registration.cjsx
@@ -0,0 +1,89 @@
+React = require 'react'
+_ = require 'underscore'
+
+Course = require './model'
+User = require '../user/model'
+ENTER = 'Enter'
+
+EnrollmentCodeInput = require './enrollment-code-input'
+ConfirmJoin = require './confirm-join'
+Navigation = require '../navigation/model'
+User = require '../user/model'
+
+NewCourseRegistration = React.createClass
+
+  propTypes:
+    collectionUUID: React.PropTypes.string.isRequired
+    validateOnly: React.PropTypes.bool
+    title: React.PropTypes.string
+    course: React.PropTypes.instanceOf(Course)
+
+  getDefaultProps: ->
+    title: 'Register for this Concept Coach course'
+
+  componentWillMount: ->
+    course = @props.course or
+      User.getCourse(@props.collectionUUID) or
+      new Course({ecosystem_book_uuid: @props.collectionUUID})
+    course.channel.on('change', @onCourseChange)
+    @setState({course})
+
+  componentWillUnmount: ->
+    @state.course.channel.off('change', @onCourseChange)
+
+  onComplete: ->
+    @state.course.persist(User)
+    Navigation.channel.emit('show')
+
+  onCourseChange: ->
+    if @state.course.isRegistered()
+      # wait 1.5 secs so our success message is briefly displayed, then call onComplete
+      _.delay(@onComplete, 1500)
+    else if @state.course.isValidated()
+      @onComplete()
+
+    @forceUpdate()
+
+  renderValidated: ->
+    <p className="lead">Redirecting to login...</p>
+
+  renderComplete: (course) ->
+    <h3 className="text-center">
+      You have successfully joined {course.description()}
+    </h3>
+
+  isTeacher: ->
+    User.isTeacherForCourse(@props.collectionUUID)
+
+  renderCurrentStep: ->
+    {course} = @state
+    if course.isValidated()
+      @renderValidated()
+    else if course.isIncomplete()
+      title = if @isTeacher() then '' else @props.title
+      <EnrollmentCodeInput course={course} currentCourses={User.registeredCourses()} title={title} />
+    else if course.isPending()
+      <ConfirmJoin course={course} />
+    else
+      @renderComplete(course)
+
+  teacherMessage: ->
+    <div className="teacher-message">
+      <p className="lead">
+        Welcome!
+      </p><p className="lead">
+        To see the student view of your course in Concept Coach,
+        enter an enrollment code from one of your sections.
+      </p><p>
+        We suggest creating a test section for yourself so you can
+        separate your Concept Coach responses from those of your students.
+      </p>
+    </div>
+
+  render: ->
+    <div className="new-registration">
+      {@teacherMessage() if @isTeacher()}
+      {@renderCurrentStep()}
+    </div>
+
+module.exports = NewCourseRegistration
diff --git a/coach/src/course/registration.cjsx b/coach/src/course/registration.cjsx
new file mode 100644
index 0000000000..ca6f3f705e
--- /dev/null
+++ b/coach/src/course/registration.cjsx
@@ -0,0 +1,31 @@
+React = require 'react'
+
+NewCourseRegistration = require './new-registration'
+ModifyCourseRegistration = require './modify-registration'
+EnrollOrLogin = require './enroll-or-login'
+
+UserStatus = require '../user/status-mixin'
+Course = require './model'
+
+CourseRegistration = React.createClass
+
+  propTypes:
+    collectionUUID: React.PropTypes.string.isRequired
+
+  mixins: [UserStatus]
+
+  render: ->
+    user = @getUser()
+    course = user.getCourse(@props.collectionUUID)
+    body = if course and course.isRegistered()
+      <ModifyCourseRegistration {...@props} course={course} />
+    else if user.isLoggedIn()
+      <NewCourseRegistration {...@props} />
+    else
+      <EnrollOrLogin {...@props} />
+
+    <div className="row">
+      {body}
+    </div>
+
+module.exports = CourseRegistration
diff --git a/coach/src/course/request-student-id.cjsx b/coach/src/course/request-student-id.cjsx
new file mode 100644
index 0000000000..a8c2ae2b54
--- /dev/null
+++ b/coach/src/course/request-student-id.cjsx
@@ -0,0 +1,64 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+ENTER = 'Enter'
+
+User = require '../user/model'
+Course = require './model'
+ErrorList = require './error-list'
+{AsyncButton} = require 'shared'
+
+RequestStudentId = React.createClass
+
+  propTypes:
+    onCancel: React.PropTypes.func.isRequired
+    onSubmit: React.PropTypes.func.isRequired
+    label: React.PropTypes.oneOfType([
+      React.PropTypes.string
+      React.PropTypes.element
+    ]).isRequired
+    saveButtonLabel: React.PropTypes.string.isRequired
+    title: React.PropTypes.string.isRequired
+    course: React.PropTypes.instanceOf(Course).isRequired
+
+  startConfirmation: ->
+    @props.course.confirm(@refs.input.getValue())
+
+  onKeyPress: (ev) ->
+    @onSubmit() if ev.key is ENTER
+
+  onCancel: (ev) ->
+    ev.preventDefault()
+    @props.onCancel()
+
+  onSubmit: ->
+    @props.onSubmit(@refs.input.getValue())
+
+  render: ->
+    button =
+      <AsyncButton
+        className="btn btn-success"
+        isWaiting={!!@props.course.isBusy}
+        waitingText={'Confirming…'}
+        onClick={@onSubmit}
+      >{@props.saveButtonLabel}</AsyncButton>
+
+    <div className="request-student-id form-group">
+      <h3 className="text-center">
+        {@props.title}
+      </h3>
+      <ErrorList course={@props.course} />
+      <div className='panels'>
+        <div className='field'>
+          <BS.Input type="text" ref="input" label={@props.label}
+            placeholder="School issued ID" autoFocus
+            defaultValue={@props.course.getStudentIdentifier()}
+            onKeyPress={@onKeyPress}
+            buttonAfter={button} />
+        </div>
+        <div className="cancel">
+          <a href='#' onClick={@onCancel}>Cancel</a>
+        </div>
+      </div>
+    </div>
+
+module.exports = RequestStudentId
diff --git a/coach/src/course/update-student-identifier.cjsx b/coach/src/course/update-student-identifier.cjsx
new file mode 100644
index 0000000000..1d7660d7c3
--- /dev/null
+++ b/coach/src/course/update-student-identifier.cjsx
@@ -0,0 +1,71 @@
+_ = require 'underscore'
+React = require 'react'
+BS = require 'react-bootstrap'
+{AsyncButton} = require 'shared'
+ENTER = 'Enter'
+
+Course = require './model'
+RequestStudentId = require './request-student-id'
+Navigation = require '../navigation/model'
+
+UpdateStudentIdentifer = React.createClass
+  componentWillMount: ->
+    course = @props.course or
+      User.getCourse(@props.collectionUUID) or
+      new Course({ecosystem_book_uuid: @props.collectionUUID})
+    course.channel.on('change', @onCourseChange)
+    @setState({course})
+
+  componentWillUnmount: ->
+    @state.course.channel.off('change', @onCourseChange)
+
+  onCourseChange: ->
+    if @props.course.student_identifier
+      @setState(requestSuccess: true)
+      delete @props.course.student_identifier
+      # wait 1.5 secs so our success message is briefly displayed, then call onComplete
+      _.delay(@onCancel, 1500)
+    @forceUpdate()
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course).isRequired
+
+  startConfirmation: ->
+    @props.course.confirm(@refs.input.getValue())
+
+  onKeyPress: (ev) ->
+    @startConfirmation() if ev.key is ENTER
+
+  onConfirmKeyPress: (ev) ->
+    @startConfirmation() if ev.key is ENTER
+
+  cancelConfirmation: ->
+    @props.course.resetToBlankState()
+
+  onSubmit: (studentId) ->
+    @props.course.updateStudentIdentifier(studentId)
+
+  onCancel: ->
+    Navigation.channel.emit('show.task', view: 'task')
+
+  renderComplete: ->
+    <h3 className="text-center">
+      You have successfully updated your student identifier.
+    </h3>
+
+  render: ->
+    return @renderComplete() if @state.requestSuccess
+
+    <BS.Row>
+      <RequestStudentId
+        label="Enter your school issued ID:"
+        title="Change your student ID"
+        onCancel={@onCancel}
+        onSubmit={@onSubmit}
+        saveButtonLabel="Save"
+        canCancel={true}
+        {...@props}
+      />
+    </BS.Row>
+
+module.exports = UpdateStudentIdentifer
diff --git a/coach/src/dashboard/index.cjsx b/coach/src/dashboard/index.cjsx
new file mode 100644
index 0000000000..55d0877e2a
--- /dev/null
+++ b/coach/src/dashboard/index.cjsx
@@ -0,0 +1,36 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{Reactive} = require '../reactive'
+{CourseListing} = require '../course/listing'
+User = require '../user/model'
+
+apiChannelName = 'user'
+
+DashboardBase = React.createClass
+  displayName: 'DashboardBase'
+  getDefaultProps: ->
+    item: {}
+  render: ->
+    {item, status, cnxUrl} = @props
+
+    <div className='concept-coach-courses'>
+      <h1>Enrolled Courses</h1>
+      <CourseListing
+        courses={item.courses}/>
+    </div>
+
+Dashboard = React.createClass
+  displayName: 'Dashboard'
+  render: ->
+    <Reactive
+      store={User}
+      topic='status'
+      fetcher={User.ensureStatusLoaded.bind(User)}
+      apiChannelName={apiChannelName}
+      channelUpdatePattern='change'>
+      <DashboardBase cnxUrl={@props.cnxUrl}/>
+    </Reactive>
+
+module.exports = {Dashboard, DashboardBase}
diff --git a/coach/src/exercise/collection.coffee b/coach/src/exercise/collection.coffee
new file mode 100644
index 0000000000..e90dadf139
--- /dev/null
+++ b/coach/src/exercise/collection.coffee
@@ -0,0 +1,90 @@
+EventEmitter2 = require 'eventemitter2'
+api = require '../api'
+steps = {}
+freeResponseCache = {}
+
+_ = require 'underscore'
+
+user = require '../user/model'
+
+channel = new EventEmitter2 wildcard: true
+
+STEP_TYPES =
+  'free-response': ['free_response']
+  'multiple-choice': ['answer_id', 'is_completed']
+
+
+getStepsByTaskId = (taskId) ->
+  _.where steps, {task_id: taskId}
+
+quickLoad = (stepId, data) ->
+  steps[stepId] = data
+  channel.emit("quickLoad.#{stepId}", {data})
+
+cacheFreeResponse = (stepId, freeResponse) ->
+  freeResponseCache[stepId] = freeResponse
+
+uncachedFreeResponse = (stepId) ->
+  delete freeResponseCache[stepId] if freeResponseCache[stepId]?
+
+load = (stepId, data) ->
+  steps[stepId] = data
+  channel.emit("load.#{stepId}", {data})
+
+update = (eventData) ->
+  {data} = eventData
+  load(data.id, data)
+
+fetch = (stepId) ->
+  eventData = {data: {id: stepId}, status: 'loading'}
+
+  channel.emit("fetch.#{stepId}", eventData)
+  api.channel.emit("exercise.#{stepId}.send.fetch", eventData)
+
+getCurrentPanel = (stepId) ->
+  panel = 'review'
+
+  step = steps[stepId]
+  question = step?.content?.questions?[0]
+  return panel unless question?
+
+  {formats} = question
+
+  _.find STEP_TYPES, (stepChecks, format) ->
+    return false unless format in formats
+    isStepCompleted = _.reduce stepChecks, (isOtherCompleted, currentCheck) ->
+      step[currentCheck]? and step[currentCheck] and isOtherCompleted
+    , true
+
+    unless isStepCompleted
+      panel = format
+      true
+
+  panel
+
+get = (stepId) ->
+  uncachedFreeResponse(stepId) if steps[stepId].free_response?
+  steps[stepId].cachedFreeResponse = freeResponseCache[stepId]
+  steps[stepId]
+
+getAllParts = (stepId) ->
+  step = steps[stepId]
+  {task_id, content_url} = step
+
+  stepsForTask = getStepsByTaskId(task_id)
+
+  parts = _.filter stepsForTask, (part) ->
+    part.is_in_multipart and part.content_url is content_url
+
+  parts = [step] if _.isEmpty(parts)
+
+  _.map parts, (part) ->
+    get(part.id)
+
+init = ->
+  user.channel.on 'logout.received', ->
+    steps = {}
+
+  api.channel.on("exercise.*.receive.*", update)
+
+module.exports = {fetch, getCurrentPanel, get, getAllParts, init, channel, quickLoad, cacheFreeResponse}
diff --git a/coach/src/exercise/index.cjsx b/coach/src/exercise/index.cjsx
new file mode 100644
index 0000000000..743c19ef2e
--- /dev/null
+++ b/coach/src/exercise/index.cjsx
@@ -0,0 +1,113 @@
+React = require 'react'
+_ = require 'underscore'
+{Exercise, ChapterSectionMixin} = require 'shared'
+
+{channel, getCurrentPanel} = exercises = require './collection'
+tasks = require '../task/collection'
+api = require '../api'
+{Reactive} = require '../reactive'
+apiChannelName = 'exercise'
+
+ExerciseBase = React.createClass
+  displayName: 'ExerciseBase'
+  getInitialState: ->
+    @getStepState()
+
+  mixins: [ ChapterSectionMixin ]
+
+  getStepState: (props) ->
+    props ?= @props
+    {item} = props
+
+    step: _.last(item)
+    parts: item
+
+  componentWillReceiveProps: (nextProps) ->
+    nextState = @getStepState(nextProps)
+
+    @setState(nextState)
+
+  componentDidUpdate: (prevProps, prevState) ->
+    {status} = @props
+    {step} = @state
+
+    channel.emit("component.#{status}", status: status, step: step)
+
+  contextTypes:
+    processHtmlAndMath: React.PropTypes.func
+
+  renderHelpLink: (sections) ->
+    if not sections?.length then return
+
+    section = _.first(sections)
+    <div key='task-help-links' className='task-help-links'>
+      Comes from {@sectionFormat(section.chapter_section)} - {section.title}
+    </div>
+
+  render: ->
+    {step} = @state
+    {taskId} = @props
+    return null if _.isEmpty(step)
+
+    exerciseProps =
+      project: 'concept-coach'
+      taskId: step.task_id
+      parts: [step]
+      getCurrentPanel: getCurrentPanel
+      canReview: true
+      freeResponseValue: step.cachedFreeResponse
+      helpLink: @renderHelpLink(step.related_content)
+
+      setAnswerId: (id, answerId) ->
+        step.answer_id = answerId
+        eventData = change: step, data: step, status: 'saving'
+
+        channel.emit("change.#{step.id}", eventData)
+        api.channel.emit("exercise.#{step.id}.send.save", eventData)
+
+      setFreeResponseAnswer: (id, freeResponse) ->
+        step.free_response = freeResponse
+        eventData = change: step, data: step, status: 'saving'
+        channel.emit("change.#{step.id}", eventData)
+        api.channel.emit("exercise.#{step.id}.send.save", eventData)
+
+      onFreeResponseChange: (id, freeResponse) ->
+        exercises.cacheFreeResponse(id, freeResponse)
+
+      onContinue: ->
+        step.is_completed = true
+        eventData = change: step, data: step, status: 'loading'
+
+        channel.emit("change.#{step.id}", eventData)
+        api.channel.emit("exercise.#{step.id}.send.complete", eventData)
+
+      onStepCompleted: ->
+        channel.emit("completed.#{step.id}")
+
+      onNextStep: ->
+        channel.emit("leave.#{step.id}")
+
+    if taskId?
+      wrapperProps =
+        'data-step-number': tasks.getStepIndex(taskId, step.id) + 1
+
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    <div className='exercise-wrapper' {...wrapperProps}>
+      <Exercise {...exerciseProps} {...htmlAndMathProps} {...@props}/>
+    </div>
+
+ExerciseStep = React.createClass
+  displayName: 'ExerciseStep'
+  render: ->
+    {id} = @props
+
+    <Reactive
+      topic={id}
+      store={exercises}
+      apiChannelName={apiChannelName}
+      getter={exercises.getAllParts}>
+      <ExerciseBase {...@props}/>
+    </Reactive>
+
+module.exports = {ExerciseStep, channel}
diff --git a/coach/src/helpers/index.coffee b/coach/src/helpers/index.coffee
new file mode 100644
index 0000000000..924989a14f
--- /dev/null
+++ b/coach/src/helpers/index.coffee
@@ -0,0 +1,11 @@
+React = require 'react'
+_ = require 'underscore'
+
+helpers =
+
+  wrapComponent: (component) ->
+    render: (DOMNode, props = {}) ->
+      React.render React.createElement(component, props), DOMNode
+    unmountFrom: React.unmountComponentAtNode
+
+module.exports = helpers
diff --git a/coach/src/navigation/course-name.cjsx b/coach/src/navigation/course-name.cjsx
new file mode 100644
index 0000000000..9974b7631c
--- /dev/null
+++ b/coach/src/navigation/course-name.cjsx
@@ -0,0 +1,19 @@
+React = require 'react'
+_ = require 'underscore'
+
+classnames = require 'classnames'
+
+CourseNameBase = React.createClass
+  displayName: 'CourseNameBase'
+  getDefaultProps: ->
+    course: {}
+  render: ->
+    {course, className} = @props
+
+    classes = classnames 'concept-coach-course-name', className
+
+    <span className={classes}>
+      {course.description?()}
+    </span>
+
+module.exports = {CourseNameBase}
diff --git a/coach/src/navigation/index.cjsx b/coach/src/navigation/index.cjsx
new file mode 100644
index 0000000000..19a9cdf7d8
--- /dev/null
+++ b/coach/src/navigation/index.cjsx
@@ -0,0 +1,73 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+{CloseButton} = require 'shared'
+{CourseNameBase} = require './course-name'
+
+Course = require '../course/model'
+user = require '../user/model'
+{channel} = require './model'
+api = require '../api'
+UserMenu = require '../user/menu'
+{NotificationsBar} = require 'shared'
+
+Navigation = React.createClass
+  displayName: 'Navigation'
+
+  contextTypes:
+    close: React.PropTypes.func
+    view: React.PropTypes.string
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course)
+
+  componentWillMount: ->
+    user.ensureStatusLoaded()
+    user.channel.on('change', @update)
+
+  componentWillUnmount: ->
+    user.channel.off('change', @update)
+
+  update: ->
+    @forceUpdate() if @isMounted()
+
+  close: ->
+    @context.close?()
+
+  handleSelect: (selectedKey) ->
+    channel.emit("show.#{selectedKey}", view: selectedKey) if selectedKey?
+
+  render: ->
+    {course} = @props
+    {view} = @context
+
+    brand = [
+      <span key='app' className='navbar-logo'><strong>Concept</strong> Coach</span>
+      <CourseNameBase key = 'course-name' className='hidden-sm hidden-xs' course={course}/>
+    ]
+
+    courseItems = [
+      <BS.NavItem
+        active={view is 'progress'}
+        eventKey='progress'
+        key='progress'
+        className='concept-coach-dashboard-nav -progress'>
+        My Progress
+      </BS.NavItem>
+    ] if course?.isRegistered()
+
+    <BS.Navbar brand={brand} toggleNavKey={0} fixedTop fluid>
+      <BS.CollapsibleNav eventKey={0} collapsible={true}>
+        <BS.Nav right navbar activeKey={view} onSelect={@handleSelect}>
+          <UserMenu course={@props.course} />
+          {courseItems}
+          <BS.NavItem
+            onClick={@close}
+            className='concept-coach-dashboard-nav'>
+            <BS.Button className='btn-plain -coach-close'>Close</BS.Button>
+          </BS.NavItem>
+        </BS.Nav>
+      </BS.CollapsibleNav>
+      <NotificationsBar />
+    </BS.Navbar>
+
+module.exports = {Navigation, channel}
diff --git a/coach/src/navigation/loader.coffee b/coach/src/navigation/loader.coffee
new file mode 100644
index 0000000000..f794c1d269
--- /dev/null
+++ b/coach/src/navigation/loader.coffee
@@ -0,0 +1,14 @@
+_ = require 'underscore'
+interpolate = require 'interpolate'
+
+makeViewSettings = (viewOptions, routePattern, view) ->
+  viewOptions = _.extend({}, viewOptions, {view})
+  route = interpolate(routePattern, viewOptions)
+
+  {state: {view}, route}
+
+loader = (model, viewSettings) ->
+  viewOptions = _.pick(model, 'prefix', 'base')
+  model.views = _.mapObject viewSettings, _.partial(makeViewSettings, viewOptions)
+
+module.exports = {loader}
diff --git a/coach/src/navigation/model.coffee b/coach/src/navigation/model.coffee
new file mode 100644
index 0000000000..a21f6a7128
--- /dev/null
+++ b/coach/src/navigation/model.coffee
@@ -0,0 +1,27 @@
+_ = require 'underscore'
+EventEmitter2 = require 'eventemitter2'
+
+settings = require './settings'
+{loader} = require './loader'
+
+navigation = {}
+channel = new EventEmitter2 wildcard: true
+
+initialize = (options) ->
+  _.extend(navigation, options)
+
+  loader(navigation, settings.views)
+
+getDataByView = (view) ->
+  navigation.views[view]
+
+getViewByRoute = (route) ->
+  navData = _.findWhere navigation.views, {route}
+  view = navData?.state?.view
+
+  if view?
+    view = 'task' if view is 'default'
+
+  view
+
+module.exports = {channel, initialize, getDataByView, getViewByRoute}
diff --git a/coach/src/navigation/settings.coffee b/coach/src/navigation/settings.coffee
new file mode 100644
index 0000000000..8d339cea29
--- /dev/null
+++ b/coach/src/navigation/settings.coffee
@@ -0,0 +1,18 @@
+DEFAULT_PATTERN = '{prefix}{base}{view}'
+
+settings =
+  views:
+    profile: DEFAULT_PATTERN
+    prevalidate: DEFAULT_PATTERN
+    dashboard: DEFAULT_PATTERN
+    task: DEFAULT_PATTERN
+    registration: DEFAULT_PATTERN
+    progress: DEFAULT_PATTERN
+    loading: DEFAULT_PATTERN
+    login: DEFAULT_PATTERN
+    student_id: DEFAULT_PATTERN
+    logout: DEFAULT_PATTERN
+    default: '{prefix}{base}'
+    close: '{prefix}'
+
+module.exports = settings
diff --git a/coach/src/progress/chapter.cjsx b/coach/src/progress/chapter.cjsx
new file mode 100644
index 0000000000..78111f9221
--- /dev/null
+++ b/coach/src/progress/chapter.cjsx
@@ -0,0 +1,49 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{ChapterSectionMixin} = require 'shared'
+{PageProgress} = require './page'
+
+ChapterProgress = React.createClass
+  displayName: 'ChapterProgress'
+  propTypes:
+    maxLength: React.PropTypes.number
+    className: React.PropTypes.string
+    chapter: React.PropTypes.shape(
+      chapter_section: React.PropTypes.array
+      pages: React.PropTypes.arrayOf(React.PropTypes.object)
+    )
+
+  getDefaultProps: ->
+    chapter: {}
+  mixins: [ChapterSectionMixin]
+  render: ->
+    {chapter, className, maxLength} = @props
+    return null unless chapter.pages?.length > 0
+
+    classes = classnames 'concept-coach-progress-chapter', className
+    section = @sectionFormat(chapter.chapter_section)
+
+    sectionProps =
+      className: 'chapter-section-prefix'
+    sectionProps['data-section'] = section if section?
+
+    pages = _.map chapter.pages, (page) ->
+      <PageProgress
+        page={page}
+        maxLength={maxLength}
+        key={"progress-page-#{page.id}"}/>
+
+    title = <h3 {...sectionProps}>
+        {chapter.title}
+    </h3> if chapter.title?
+
+    <div className={classes}>
+      {title}
+      <ul className='concept-coach-progress-pages'>
+        {pages}
+      </ul>
+    </div>
+
+module.exports = {ChapterProgress}
diff --git a/coach/src/progress/collection.coffee b/coach/src/progress/collection.coffee
new file mode 100644
index 0000000000..d27ca032dd
--- /dev/null
+++ b/coach/src/progress/collection.coffee
@@ -0,0 +1,46 @@
+EventEmitter2 = require 'eventemitter2'
+_ = require 'underscore'
+api = require '../api'
+
+local = {}
+channel = new EventEmitter2 wildcard: true
+
+apiChannelName = 'courseDashboard'
+
+load = (id, data) ->
+  local[id] = data
+  channel.emit("load.#{id}", {data})
+
+update = (eventData) ->
+  {data} = eventData
+  load(data.id, data)
+
+fetch = (id) ->
+  eventData = {data: {id: id}, status: 'loading'}
+
+  channel.emit("fetch.#{id}", eventData)
+  api.channel.emit("#{apiChannelName}.#{id}.send.fetch", eventData)
+
+get = (id) ->
+  local[id]
+
+getFilteredChapters = (id, uuids = []) ->
+  progresses = get(id)
+  return unless progresses?
+  {chapters} = progresses
+
+  _.chain(chapters)
+    .map((chapter) ->
+      chapter.pages = _.reject(chapter.pages, (page) ->
+        _.indexOf(uuids, page.uuid) > -1
+      )
+      return null if _.isEmpty chapter.pages
+      chapter
+    )
+    .compact()
+    .value()
+
+init = ->
+  api.channel.on("#{apiChannelName}.*.receive.*", update)
+
+module.exports = {fetch, get, getFilteredChapters, init, channel}
diff --git a/coach/src/progress/current.cjsx b/coach/src/progress/current.cjsx
new file mode 100644
index 0000000000..6e274c5fa6
--- /dev/null
+++ b/coach/src/progress/current.cjsx
@@ -0,0 +1,59 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{channel} = tasks = require '../task/collection'
+{Reactive} = require '../reactive'
+apiChannelName = 'task'
+
+{ChapterProgress} = require './chapter'
+
+CurrentProgressBase = React.createClass
+  displayName: 'CurrentProgressBase'
+  render: ->
+    {item, taskId, maxLength, moduleUUID} = @props
+    task = item
+    return null unless task?.steps?
+
+    page = tasks.getAsPage(taskId)
+
+    chapter =
+      pages: [page]
+
+    <ChapterProgress
+      className='current'
+      chapter={chapter}
+      maxLength={maxLength}
+      key={"progress-chapter-current"}/>
+
+CurrentProgress = React.createClass
+  displayName: 'CurrentProgress'
+
+  contextTypes:
+    moduleUUID:     React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+
+  filter: (props, eventData) ->
+    toCompare = ['collectionUUID', 'moduleUUID']
+
+    setProps = _.pick(props, toCompare)
+    receivedData = _.pick(eventData.data, toCompare)
+
+    _.isEqual(setProps, receivedData)
+
+  render: ->
+    {collectionUUID, moduleUUID} = @context
+    taskId = "#{collectionUUID}/#{moduleUUID}"
+
+    <Reactive
+      topic={taskId}
+      store={tasks}
+      apiChannelName={apiChannelName}
+      collectionUUID={collectionUUID}
+      moduleUUID={moduleUUID}
+      fetcher={tasks.fetchByModule}
+      filter={@filter}>
+      <CurrentProgressBase {...@context} {...@props} taskId={taskId}/>
+    </Reactive>
+
+module.exports = {CurrentProgress}
diff --git a/coach/src/progress/exercise.cjsx b/coach/src/progress/exercise.cjsx
new file mode 100644
index 0000000000..7e19dd92a5
--- /dev/null
+++ b/coach/src/progress/exercise.cjsx
@@ -0,0 +1,23 @@
+React = require 'react'
+classnames = require 'classnames'
+
+ExerciseProgress = React.createClass
+  displayName: 'ExerciseProgress'
+  propTypes:
+    className: React.PropTypes.string
+    exercise: React.PropTypes.shape(
+      is_completed: React.PropTypes.bool
+      is_correct: React.PropTypes.bool
+    )
+  getDefaultProps: ->
+    exercise: {}
+  render: ->
+    {exercise, className} = @props
+
+    classes = classnames 'concept-coach-progress-exercise', className,
+      'is-completed': exercise.is_completed
+      'is-correct': exercise.is_correct
+
+    <div className={classes}></div>
+
+module.exports = {ExerciseProgress}
diff --git a/coach/src/progress/index.cjsx b/coach/src/progress/index.cjsx
new file mode 100644
index 0000000000..e27a15aef3
--- /dev/null
+++ b/coach/src/progress/index.cjsx
@@ -0,0 +1,73 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{ChapterSectionMixin} = require 'shared'
+{Reactive} = require '../reactive'
+{ExerciseButton} = require '../buttons'
+{SectionProgress} = require './section'
+{ChapterProgress} = require './chapter'
+{CurrentProgress} = require './current'
+{channel} = progresses = require './collection'
+tasks = require '../task/collection'
+
+apiChannelName = 'courseDashboard'
+
+ProgressBase = React.createClass
+  displayName: 'ProgressBase'
+  getDefaultProps: ->
+    item: {}
+  contextTypes:
+    moduleUUID:     React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+  render: ->
+    {item, className, status} = @props
+    {moduleUUID, collectionUUID} = @context
+
+    chapters = item
+    classes = classnames 'concept-coach-student-dashboard', className
+
+    currentTask = tasks.get("#{collectionUUID}/#{moduleUUID}")
+    maxExercises = _.chain(chapters)
+      .pluck('pages')
+      .flatten()
+      .pluck('exercises')
+      .max((exercises) ->
+        exercises.length
+      )
+      .value()
+
+    maxLength = Math.max(maxExercises?.length or 0, currentTask?.steps?.length or 0)
+
+    progress = _.map chapters, (chapter) ->
+      <ChapterProgress
+        chapter={chapter}
+        maxLength={maxLength}
+        key={"progress-chapter-#{chapter.id}"}/>
+
+    <div className={classes}>
+      <SectionProgress title='Current Progress'>
+        <CurrentProgress maxLength={maxLength}/>
+      </SectionProgress>
+      <SectionProgress title='Previous'>
+        {progress}
+      </SectionProgress>
+    </div>
+
+Progress = React.createClass
+  displayName: 'Progress'
+  contextTypes:
+    moduleUUID:     React.PropTypes.string
+  render: ->
+    {id} = @props
+    {moduleUUID} = @context
+
+    <Reactive
+      topic={id}
+      getter={_.partial(progresses.getFilteredChapters, _, [moduleUUID])}
+      store={progresses}
+      apiChannelName={apiChannelName}>
+      <ProgressBase/>
+    </Reactive>
+
+module.exports = {Progress, ProgressBase, channel}
diff --git a/coach/src/progress/page.cjsx b/coach/src/progress/page.cjsx
new file mode 100644
index 0000000000..71830f0da8
--- /dev/null
+++ b/coach/src/progress/page.cjsx
@@ -0,0 +1,59 @@
+React = require 'react'
+_ = require 'underscore'
+dateFormat = require 'dateformat'
+classnames = require 'classnames'
+EventEmitter2 = require 'eventemitter2'
+
+{ChapterSectionMixin, ResizeListenerMixin} = require 'shared'
+{ExerciseProgress} = require './exercise'
+
+PageProgress = React.createClass
+  displayName: 'PageProgress'
+  getDefaultProps: ->
+    page: {}
+    dateFormatString: 'mmm. d'
+    progressWidth: 30
+    progressMargin: 5
+    dateBuffer: 100
+
+  contextTypes:
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+
+  mixins: [ChapterSectionMixin, ResizeListenerMixin]
+  switchModule: (data) ->
+    @context.navigator.emit('switch.module', {data, view: 'task'})
+  render: ->
+    {page, dateFormatString, dateBuffer, maxLength, progressWidth, progressMargin, className} = @props
+    {componentEl} = @state
+
+    exercisesProgressWidth = maxLength * progressWidth + (maxLength - 1) * progressMargin
+    titleWidth = componentEl.width - exercisesProgressWidth - dateBuffer
+
+    classes = classnames 'concept-coach-progress-page', className
+    section = @sectionFormat(page.chapter_section)
+    pageLastWorked = dateFormat(new Date(page.last_worked_at), dateFormatString) if page.last_worked_at?
+
+    sectionProps =
+      className: 'chapter-section-prefix'
+    sectionProps['data-section'] = section if section?
+
+    exercises = _.map page.exercises, (exercise) ->
+      <ExerciseProgress
+        exercise={exercise}
+        key={"progress-exercise-#{exercise.id}"}/>
+
+    <li className={classes} onClick={_.partial(@switchModule, {moduleUUID: page.uuid})}>
+      <h4 className='concept-coach-progress-page-title' style={width: titleWidth}>
+        <div {...sectionProps}>
+          {page.title}
+        </div>
+      </h4>
+      <span className='concept-coach-progress-page-last-worked'>{pageLastWorked}</span>
+      <div
+        style={width: exercisesProgressWidth}
+        className='concept-coach-progress-exercises'>
+        {exercises}
+      </div>
+    </li>
+
+module.exports = {PageProgress}
diff --git a/coach/src/progress/section.cjsx b/coach/src/progress/section.cjsx
new file mode 100644
index 0000000000..3fafbe9379
--- /dev/null
+++ b/coach/src/progress/section.cjsx
@@ -0,0 +1,22 @@
+React = require 'react'
+classnames = require 'classnames'
+_ = require 'underscore'
+
+SectionProgress = React.createClass
+  displayName: 'SectionProgress'
+  getDefaultProps: ->
+    progress: null
+    title: 'Progress'
+  render: ->
+    {progress, title, children, className} = @props
+    progress ?= children
+    return null if _.isEmpty(progress)
+
+    classes = classnames 'concept-coach-progress-section', className
+
+    <div className={classes}>
+      <h1>{title}</h1>
+      {progress}
+    </div>
+
+module.exports = {SectionProgress}
diff --git a/coach/src/reactive/index.cjsx b/coach/src/reactive/index.cjsx
new file mode 100644
index 0000000000..2f8baa579f
--- /dev/null
+++ b/coach/src/reactive/index.cjsx
@@ -0,0 +1,117 @@
+React = require 'react/addons'
+classnames = require 'classnames'
+api = require '../api'
+_ = require 'underscore'
+
+interpolate = require 'interpolate'
+
+Reactive = React.createClass
+  displayName: 'Reactive'
+
+  propTypes:
+    children: React.PropTypes.node.isRequired
+    store: React.PropTypes.object.isRequired
+    topic: React.PropTypes.string.isRequired
+    apiChannelPattern: React.PropTypes.string
+    channelUpdatePattern: React.PropTypes.string
+    apiChannelName: React.PropTypes.string
+    fetcher: React.PropTypes.func
+    filter: React.PropTypes.func
+    getStatusMessage: React.PropTypes.func
+    getter: React.PropTypes.func
+
+  getDefaultProps: ->
+    apiChannelPattern: '{apiChannelName}.{topic}.send.*'
+    channelUpdatePattern: 'load.*'
+
+  getInitialState: ->
+    {channelUpdatePattern, apiChannelPattern} = @props
+
+    state = @getState()
+    state.status = 'loading'
+
+    state.storeChannelUpdate = interpolate(channelUpdatePattern, @props)
+    state.apiChannelSend = interpolate(apiChannelPattern, @props)
+
+    state
+
+  fetchModel: (props) ->
+    props ?= @props
+    {topic, store, fetcher} = props
+
+    if _.isFunction(fetcher) then fetcher(props) else store.fetch(topic)
+
+  getState: (eventData = {}, props) ->
+    props ?= @props
+    {topic, store, getter} = props
+    {status} = eventData
+    status ?= 'loaded'
+
+    errors = eventData?.data?.errors
+
+    item: getter?(topic) or store.get?(topic)
+    status: status
+    errors: errors
+
+  isForThisComponent: (eventData, props) ->
+    props ?= @props
+    {topic, filter} = props
+
+    eventData.errors? or filter?(props, eventData) or eventData?.data?.id is topic or eventData?.data?.topic is topic
+
+  update: (eventData, props) ->
+    props ?= @props
+    return unless @isForThisComponent(eventData, props)
+
+    nextState = @getState(eventData, props)
+    @setState(nextState)
+
+  setStatus: (eventData) ->
+    return unless @isForThisComponent(eventData)
+
+    {status} = eventData
+    @setState({status})
+
+  componentWillMount: ->
+    {store} = @props
+    {storeChannelUpdate, apiChannelSend} = @state
+
+    @fetchModel()
+    store.channel.on(storeChannelUpdate, @update)
+    api.channel.on(apiChannelSend, @setStatus)
+
+  componentWillUnmount: ->
+    {topic, store} = @props
+    {storeChannelUpdate, apiChannelSend} = @state
+
+    store.channel.off(storeChannelUpdate, @update)
+    api.channel.off(apiChannelSend, @setStatus)
+
+  componentWillReceiveProps: (nextProps) ->
+    if nextProps.topic isnt @props.topic
+      stubDataForImmediateUpdate =
+        data:
+          id: nextProps.topic
+        status: 'cached'
+
+      @update(stubDataForImmediateUpdate, nextProps)
+      @fetchModel(nextProps)
+
+  render: ->
+    {status, item} = @state
+    {className} = @props
+
+    classes = classnames 'reactive', "reactive-#{status}", className,
+      'is-empty': _.isEmpty(item)
+
+    propsForChildren = _.pick(@state, 'status', 'item', 'errors')
+
+    reactiveItems = React.Children.map(@props.children, (child) ->
+      React.addons.cloneWithProps(child, propsForChildren)
+    )
+
+    <div className={classes}>
+      {reactiveItems}
+    </div>
+
+module.exports = {Reactive}
diff --git a/coach/src/task/collection.coffee b/coach/src/task/collection.coffee
new file mode 100644
index 0000000000..a36e252f8a
--- /dev/null
+++ b/coach/src/task/collection.coffee
@@ -0,0 +1,118 @@
+EventEmitter2 = require 'eventemitter2'
+interpolate = require 'interpolate'
+_ = require 'underscore'
+api = require '../api'
+exercises = require '../exercise/collection'
+
+tasks = {}
+
+user = require '../user/model'
+
+channel = new EventEmitter2 wildcard: true
+
+ERRORS_TO_SILENCE = ['page_has_no_exercises']
+
+getUnhandledErrors = (errors) ->
+  otherErrors = _.reject errors, (error) ->
+    _.indexOf(ERRORS_TO_SILENCE, error.code) > -1
+
+handledAllErrors = (otherErrors) ->
+  _.isEmpty otherErrors
+
+checkFailure = (response) ->
+  if response.data?.errors
+    response.data.errors = getUnhandledErrors(response.data.errors)
+    response.stopErrorDisplay = handledAllErrors(response.data.errors)
+
+load = (taskId, data) ->
+  tasks[taskId] = data
+
+  status = if not data or data.errors? then 'failed' else 'loaded'
+
+  _.each data?.steps, (step) ->
+    exercises.quickLoad(step.id, step)
+
+  channel.emit("load.#{taskId}", {data, status})
+
+update = (eventData) ->
+  return unless eventData?
+  {data, query} = eventData
+  load(query, data)
+
+fetch = (taskId) ->
+  eventData = {data: {id: taskId}, status: 'loading'}
+  eventData.query = taskId
+
+  channel.emit("fetch.#{taskId}", eventData)
+  api.channel.emit("task.#{taskId}.send.fetch", eventData)
+
+fetchByModule = ({collectionUUID, moduleUUID}) ->
+  eventData = {data: {collectionUUID, moduleUUID}, status: 'loading'}
+  eventData.query = "#{collectionUUID}/#{moduleUUID}"
+
+  channel.emit("fetch.#{collectionUUID}/#{moduleUUID}", eventData)
+  api.channel.emit("task.#{collectionUUID}/#{moduleUUID}.send.fetchByModule", eventData)
+
+get = (taskId) ->
+  tasks[taskId]
+
+getCompleteSteps = (taskId) ->
+  _.filter(tasks[taskId]?.steps, (step) ->
+    step? and step.is_completed
+  )
+
+getIncompleteSteps = (taskId) ->
+  _.filter(tasks[taskId]?.steps, (step) ->
+    step? and not step.is_completed
+  )
+
+getFirstIncompleteIndex = (taskId) ->
+  _.max [_.findIndex(tasks[taskId]?.steps, {is_completed: false}), 0]
+
+getStepIndex = (taskId, stepId) ->
+  _.findIndex(tasks[taskId]?.steps, id: stepId)
+
+getModuleInfo = (taskId, cnxUrl = '') ->
+  task = tasks[taskId]
+  return unless task?
+
+  moduleUrlPattern = '{cnxUrl}/contents/{collectionUUID}:{moduleUUID}'
+  {collectionUUID, moduleUUID} = task
+
+  moduleInfo = _.clone(task.steps?[0].related_content?[0]) or {}
+  _.extend moduleInfo, _.pick(task, 'collectionUUID', 'moduleUUID')
+  moduleInfo.link = interpolate moduleUrlPattern, {cnxUrl, collectionUUID, moduleUUID}
+
+  moduleInfo
+
+getAsPage = (taskId) ->
+  task = get(taskId)
+  {moduleUUID, steps} = task
+
+  page = _.pick task, 'last_worked_at', 'id'
+  _.extend page, _.first(_.first(steps).related_content)
+  page.exercises = steps
+  page.uuid = moduleUUID
+
+  page
+
+init = ->
+  user.channel.on 'logout.received', ->
+    tasks = {}
+  api.channel.on("task.*.receive.*", update)
+  api.channel.on('task.*.receive.failure', checkFailure)
+
+module.exports = {
+  init,
+  load,
+  fetch,
+  fetchByModule,
+  get,
+  getCompleteSteps,
+  getIncompleteSteps,
+  getFirstIncompleteIndex,
+  getStepIndex,
+  getModuleInfo,
+  getAsPage,
+  channel
+}
diff --git a/coach/src/task/index.cjsx b/coach/src/task/index.cjsx
new file mode 100644
index 0000000000..d074f8c660
--- /dev/null
+++ b/coach/src/task/index.cjsx
@@ -0,0 +1,172 @@
+React = require 'react'
+EventEmitter2 = require 'eventemitter2'
+_ = require 'underscore'
+classnames = require 'classnames'
+{SpyMode} = require 'shared'
+
+{channel} = tasks = require './collection'
+api = require '../api'
+{Reactive} = require '../reactive'
+apiChannelName = 'task'
+
+exercises = {ExerciseStep} = require '../exercise'
+breadcrumbs = {Breadcrumbs} = require '../breadcrumbs'
+
+{TaskReview} = require './review'
+{TaskTitle} = require './title'
+{NoExercises} = require './no-exercises'
+
+TaskBase = React.createClass
+  displayName: 'TaskBase'
+  getInitialState: ->
+    {item} = @props
+
+    task: item
+    currentStep: 0
+    steps: @setupSteps(item)
+
+  contextTypes:
+    close: React.PropTypes.func
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+
+  setupSteps: (task) ->
+    steps = _.keys(task?.steps)
+    steps.push('summary')
+    steps.push('continue')
+
+    steps
+
+  goToStep: (stepIndex) ->
+    @setState(currentStep: stepIndex) if @isStepAllowed(stepIndex)
+
+  nextStep: ->
+    {currentStep} = @state
+    @goToStep(currentStep + 1)
+
+  goToFirstIncomplete: ->
+    {taskId} = @props
+    stepIndex = tasks.getFirstIncompleteIndex(taskId)
+    @goToStep(stepIndex)
+
+  isStepAllowed: (stepIndex) ->
+    @isExerciseStep(stepIndex) or
+      (@isReviewStep(stepIndex) and @canReview()) or
+      (@isContinueStep(stepIndex) and @shouldContinue())
+
+  isExerciseStep: (stepIndex) ->
+    {task} = @state
+    stepIndex < task.steps.length
+
+  canReview: ->
+    {taskId} = @props
+    not _.isEmpty tasks.getCompleteSteps(taskId)
+
+  shouldContinue: ->
+    {taskId} = @props
+    _.isEmpty tasks.getIncompleteSteps(taskId)
+
+  isReviewStep: (stepIndex) ->
+    {steps} = @state
+    steps[stepIndex] is 'summary'
+
+  isContinueStep: (stepIndex) ->
+    {steps} = @state
+    steps[stepIndex] is 'continue'
+
+  fetchTask: ->
+    tasks.fetchByModule(@props)
+
+  componentWillMount: ->
+    api.channel.on('exercise.*.receive.complete', @fetchTask)
+    exercises.channel.on('leave.*', @nextStep)
+
+  componentWillUnmount: ->
+    api.channel.off('exercise.*.receive.complete', @fetchTask)
+    exercises.channel.off('leave.*', @nextStep)
+
+  componentWillReceiveProps: (nextProps) ->
+    nextState =
+      task: nextProps.item
+      steps: @setupSteps(nextProps.item)
+
+    if (_.isEmpty(@props.item) and not _.isEmpty(nextProps.item)) or
+      (@props.taskId isnt nextProps.taskId)
+        stepIndex = tasks.getFirstIncompleteIndex(nextProps.taskId)
+        nextState.currentStep = stepIndex
+
+    @setState(nextState)
+
+  componentDidUpdate: ->
+    {currentStep, steps} = @state
+    {close, navigator} = @context
+
+    step = steps[currentStep]
+    navigator.emit('show.task', {view: 'task', step: step})
+
+    close() if @isContinueStep(currentStep)
+
+  render: ->
+    {task, currentStep} = @state
+    {taskId} = @props
+    return null unless task?
+
+    breadcrumbs = <Breadcrumbs
+      {...@props}
+      canReview={@canReview()}
+      shouldContinue={@shouldContinue()}
+      goToStep={@goToStep}
+      currentStep={currentStep}/>
+
+    noExercises = not task.steps? or _.isEmpty(task.steps)
+
+    if noExercises
+      panel = <NoExercises/>
+    else if task.steps[currentStep]?
+      panel = <ExerciseStep
+        className='concept-coach-task-body'
+        id={task.steps[currentStep].id}
+        pinned={false}/>
+    else if @isReviewStep(currentStep)
+      panel = <TaskReview {...@props} goToStep={@goToFirstIncomplete}/>
+    else if @isContinueStep(currentStep)
+      panel = null
+
+    taskClasses = classnames 'concept-coach-task',
+      'card-body': noExercises
+
+    <div className={taskClasses}>
+      <TaskTitle {...@props}/>
+      {breadcrumbs}
+      {panel}
+      <SpyMode.Content>{JSON.stringify(task.spy)}</SpyMode.Content>
+    </div>
+
+
+Task = React.createClass
+  displayName: 'Task'
+  filter: (props, eventData) ->
+    toCompare = ['collectionUUID', 'moduleUUID']
+
+    setProps = _.pick(props, toCompare)
+    receivedData = _.pick(eventData.data, toCompare)
+
+    _.isEqual(setProps, receivedData)
+
+  render: ->
+    {collectionUUID, moduleUUID} = @props
+    taskId = "#{collectionUUID}/#{moduleUUID}"
+
+    <Reactive
+      topic={taskId}
+      store={tasks}
+      apiChannelName={apiChannelName}
+      collectionUUID={collectionUUID}
+      moduleUUID={moduleUUID}
+      fetcher={tasks.fetchByModule}
+      filter={@filter}>
+      <TaskBase {...@props} taskId={taskId}/>
+    </Reactive>
+
+
+
+module.exports = {Task, channel}
diff --git a/coach/src/task/no-exercises.cjsx b/coach/src/task/no-exercises.cjsx
new file mode 100644
index 0000000000..126a8a2360
--- /dev/null
+++ b/coach/src/task/no-exercises.cjsx
@@ -0,0 +1,10 @@
+React = require 'react'
+
+NoExercises = React.createClass
+  displayName: 'NoExercises'
+  render: ->
+    <div className='no-exercises'>
+      Sorry, there are no exercises for this module.
+    </div>
+
+module.exports = {NoExercises}
diff --git a/coach/src/task/review.cjsx b/coach/src/task/review.cjsx
new file mode 100644
index 0000000000..45b1ba7b9d
--- /dev/null
+++ b/coach/src/task/review.cjsx
@@ -0,0 +1,100 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+tasks = require './collection'
+
+{ChapterSectionMixin} = require 'shared'
+{ExerciseStep} = require '../exercise'
+{ExerciseButton, ContinueToBookButton, ReturnToBookButton} = require '../buttons'
+
+ReviewControls = React.createClass
+  displayName: 'ReviewControls'
+  mixins: [ChapterSectionMixin]
+
+  propTypes:
+    moduleUUID:     React.PropTypes.string.isRequired
+    collectionUUID: React.PropTypes.string.isRequired
+    taskId:         React.PropTypes.string.isRequired
+
+  render: ->
+    {taskId, moduleUUID, collectionUUID} = @props
+
+    moduleInfo = tasks.getModuleInfo(taskId)
+    section = @sectionFormat(moduleInfo.chapter_section)
+
+    <BS.ButtonGroup justified className='concept-coach-task-review-controls'>
+      <ReturnToBookButton
+        className='btn-lg'
+        moduleUUID={moduleUUID}
+        collectionUUID={collectionUUID}
+        section={section}/>
+      <ContinueToBookButton
+        className='btn-lg'
+        moduleUUID={moduleUUID}/>
+    </BS.ButtonGroup>
+
+TaskReview = React.createClass
+  displayName: 'TaskReview'
+
+  propTypes:
+    moduleUUID:     React.PropTypes.string.isRequired
+    collectionUUID: React.PropTypes.string.isRequired
+
+  getInitialState: ->
+    @getSteps(@props)
+
+  componentWillMount: ->
+    {collectionUUID, moduleUUID} = @props
+    tasks.fetchByModule({collectionUUID, moduleUUID})
+
+  componentWillReceiveProps: (nextProps) ->
+    @setState(@getSteps(nextProps))
+
+  getSteps: (props) ->
+    {taskId} = props
+    completeSteps: tasks.getCompleteSteps(taskId)
+    incompleteSteps: tasks.getIncompleteSteps(taskId)
+
+  render: ->
+    {completeSteps, incompleteSteps} = @state
+    {status, taskId, moduleUUID, collectionUUID} = @props
+
+    if _.isEmpty(completeSteps)
+      completeStepsReview = <div className='card-body'>
+        <h3>Exercise to see Review</h3>
+        <ExerciseButton onClick={_.partial(@props.goToStep, 0)}/>
+      </div>
+    else
+      completeStepsReview = _.map completeSteps, (step) ->
+        <ExerciseStep
+          id={step.id}
+          key={step.id}
+          pinned={false}
+          review='completed'
+          focus={false}
+          taskId={taskId}
+          allowKeyNext={false}/>
+
+    if _.isEmpty(incompleteSteps)
+      completedMessage = <div className='card-body coach-coach-review-completed'>
+        <h2>You're done.</h2>
+        <ReviewControls
+          taskId={taskId}
+          moduleUUID={moduleUUID}
+          collectionUUID={collectionUUID}/>
+        <p>or review your work below.</p>
+      </div>
+      completedEnd = <div className='card-body coach-coach-review-completed'>
+        <ReviewControls
+          taskId={taskId}
+          moduleUUID={moduleUUID}
+          collectionUUID={collectionUUID}/>
+      </div>
+
+    <div className='concept-coach-task-review'>
+      {completedMessage}
+      {completeStepsReview}
+      {completedEnd}
+    </div>
+
+module.exports = {TaskReview}
diff --git a/coach/src/task/title.cjsx b/coach/src/task/title.cjsx
new file mode 100644
index 0000000000..ab2f1adcc6
--- /dev/null
+++ b/coach/src/task/title.cjsx
@@ -0,0 +1,50 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+tasks = require './collection'
+
+{ChapterSectionMixin} = require 'shared'
+{GoToBookLink} = require '../buttons'
+
+TaskTitle = React.createClass
+  displayName: 'TaskTitle'
+  mixins: [ChapterSectionMixin]
+
+  contextTypes:
+    close: React.PropTypes.func
+    moduleUUID: React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+
+  render: ->
+    {taskId, cnxUrl} = @props
+    {close} = @context
+    moduleInfo = tasks.getModuleInfo(taskId, cnxUrl)
+    return null unless moduleInfo
+
+    section = @sectionFormat(moduleInfo.chapter_section)
+
+    sectionProps =
+      className: 'chapter-section-prefix'
+    sectionProps['data-section'] = section if section?
+
+    linkProps = _.pick(@props, 'collectionUUID', 'moduleUUID')
+    linkProps.role = 'button'
+    linkProps.link = moduleInfo.link
+
+    if moduleInfo.title
+      linkProps.target = '_blank'
+      title = <h3 {...sectionProps}>
+        {moduleInfo.title}
+      </h3>
+
+    titleClasses = classnames 'concept-coach-title',
+      'has-title': moduleInfo.title?
+
+    <div className={titleClasses}>
+      {title}
+      <span className='concept-coach-title-link'>
+        <GoToBookLink {...linkProps}/>
+      </span>
+    </div>
+
+module.exports = {TaskTitle}
diff --git a/coach/src/user/accounts-iframe.cjsx b/coach/src/user/accounts-iframe.cjsx
new file mode 100644
index 0000000000..7c1f8d5c7c
--- /dev/null
+++ b/coach/src/user/accounts-iframe.cjsx
@@ -0,0 +1,88 @@
+# coffeelint: disable=no_empty_functions
+
+React = require 'react'
+classnames = require 'classnames'
+
+api   = require '../api'
+User  = require './model'
+
+AccountsIframe = React.createClass
+
+  propTypes:
+    type: React.PropTypes.oneOf(['logout', 'profile']).isRequired
+
+  getInitialState: ->
+    width: '100%', height: 400, isClosable: @props.type is "profile"
+
+  pageLoad: (page) ->
+    if page is "/login"
+      if User.isLoggingOut # we've logged out and are re-displaying login
+        User._signalLogoutCompleted()
+      @setState(isClosable: false)
+    else # we're displaying a profile or settings related page
+      if User.isLoggedIn()
+        @setState(isClosable: true)
+      else
+        @setState(isClosable: false)
+        # somehow we're displaying the profile page but we don't know we're logged in?
+        if page is "/profile"
+          # redisplaying the login page so we can pickup the login info
+          @sendCommand('displayLogin', User.endpoints.iframe_login)
+
+  # Note: we're currently not doing anything with the width because we want that to stay at 100%
+  pageResize: ({width, height}) ->
+    @setState(height: height)
+
+  setTitle: (title) ->
+    @setState(title: title)
+
+  iFrameReady: ->
+    @sendCommand('displayProfile')
+
+  # called when an logout process completes
+  logoutComplete: (success) ->
+    return unless success
+    User._signalLogoutCompleted()
+
+  sendCommand: (command, payload = {}) ->
+    msg = JSON.stringify(data: {"#{command}": payload})
+    React.findDOMNode(@refs.iframe).contentWindow.postMessage(msg, '*')
+
+  parseAndDispatchMessage: (msg) ->
+    return unless @isMounted()
+    try
+      json = JSON.parse(msg.data)
+      for method, payload of json.data
+        if @[method]
+          @[method](payload)
+        else
+          console.warn?("Received message for unsupported #{method}")
+    catch error
+      console.warn(error)
+
+  componentWillUnmount: ->
+    window.removeEventListener('message', @parseAndDispatchMessage)
+  componentWillMount: ->
+    window.addEventListener('message', @parseAndDispatchMessage)
+
+
+  render: ->
+    # the other side of the iframe will validate our address and then only send messages to it
+    me = window.location.protocol + '//' + window.location.host
+    url = if @props.type is 'logout' then User.endpoints.logout else User.endpoints.accounts_iframe
+    url = "#{url}?parent=#{me}"
+    className = classnames( 'accounts-iframe', @props.type )
+    <div className={className}>
+      <div className="heading">
+        <h3 className="title">{@state?.title}</h3>
+      </div>
+      <iframe src={url} ref='iframe'
+        style={width: @state.width, height: @state.height, border: 0}
+        id="OxAccountIframe" name="OxAccountIframe">
+      </iframe>
+    </div>
+
+
+
+
+module.exports = AccountsIframe
diff --git a/coach/src/user/login-gateway.cjsx b/coach/src/user/login-gateway.cjsx
new file mode 100644
index 0000000000..104779be6d
--- /dev/null
+++ b/coach/src/user/login-gateway.cjsx
@@ -0,0 +1,78 @@
+React = require 'react'
+_ = require 'underscore'
+User  = require './model'
+api   = require '../api'
+classnames = require 'classnames'
+
+SECOND = 1000
+
+LoginGateway = React.createClass
+
+  propTypes:
+    window: React.PropTypes.shape(
+      open: React.PropTypes.func
+    )
+    onToggle: React.PropTypes.func
+
+  getDefaultProps: ->
+    window: window
+
+  getInitialState: ->
+    loginWindow: false
+
+  openLogin: (ev) ->
+    ev.preventDefault()
+
+    width  = Math.min(1000, window.screen.width - 20)
+    height = Math.min(800, window.screen.height - 30)
+    options = ["toolbar=no", "location=" + (if @props.window.opera then "no" else "yes"),
+      "directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no",
+      "width=" + width, "height=" + height,
+      "top="   + (window.screen.height - height) / 2,
+      "left="  + (window.screen.width - width)   / 2].join()
+    loginWindow = @props.window.open(@urlForLogin(), 'oxlogin', options)
+    @setState({loginWindow})
+    @props.onToggle?(loginWindow)
+    _.delay(@windowClosedCheck, SECOND)
+
+  parseAndDispatchMessage: (msg) ->
+    return unless @isMounted()
+    try
+      data = JSON.parse(msg.data)
+      if data.user
+        api.channel.emit 'user.status.receive.fetch', data: data
+      @setState(loginWindow: false) # cancel checking for close
+    catch error
+      console.warn(error)
+  componentWillUnmount: ->
+    window.removeEventListener('message', @parseAndDispatchMessage)
+  componentWillMount: ->
+    window.addEventListener('message', @parseAndDispatchMessage)
+
+  windowClosedCheck: ->
+    return unless @isMounted()
+    if @state.loginWindow and @state.loginWindow.closed
+      User.ensureStatusLoaded(true)
+    else
+      _.delay( @windowClosedCheck, SECOND)
+
+  urlForLogin: ->
+    User.endpoints.login + '?parent=' + encodeURIComponent(window.location.href)
+
+  renderOpenMessage: ->
+    <span className="message">
+      Please log in using your OpenStax account in the window. <a data-bypass
+        onClick={@openLogin} href={@urlForLogin()}
+      >Click to reopen window.</a>
+    </span>
+
+  render: ->
+    classes = classnames('login-gateway', @props.className,
+      'is-open': @state.loginWindow
+      'is-closed': not @state.loginWindow
+    )
+    <div role="link" className={classes} onClick={@openLogin}>
+      {if @state.loginWindow then @renderOpenMessage() else @props.children}
+    </div>
+
+module.exports = LoginGateway
diff --git a/coach/src/user/menu.cjsx b/coach/src/user/menu.cjsx
new file mode 100644
index 0000000000..b7941243f6
--- /dev/null
+++ b/coach/src/user/menu.cjsx
@@ -0,0 +1,84 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+EventEmitter2 = require 'eventemitter2'
+{CloseButton} = require 'shared'
+
+Status = require './status-mixin'
+
+Course = require '../course/model'
+
+api = require '../api'
+
+# TODO combine this with link in error notification
+GET_HELP_LINK = 'http://openstax.force.com/support?l=en_US&c=Products%3AConcept_Coach'
+
+getWaitingText = (status) ->
+  "#{status}…"
+
+UserMenu = React.createClass
+  mixins: [Status]
+
+  contextTypes:
+    close: React.PropTypes.func
+    navigator: React.PropTypes.instanceOf(EventEmitter2)
+
+  propTypes:
+    course: React.PropTypes.instanceOf(Course)
+
+  componentWillMount: ->
+    @getUser().ensureStatusLoaded()
+
+  logoutUser: (clickEvent) ->
+    clickEvent.preventDefault()
+    @context.navigator.emit('show.logout', view: 'logout')
+
+  showProfile: (clickEvent) ->
+    clickEvent.preventDefault()
+    @context.navigator.emit('show.profile', view: 'profile')
+
+  updateStudentId: (clickEvent) ->
+    clickEvent.preventDefault()
+    @context.navigator.emit('show.student_id', view: 'student_id')
+
+  update: ->
+    @forceUpdate() if @isMounted()
+
+  close: (clickEvent) ->
+    clickEvent.preventDefault()
+    @context.close?()
+
+  modifyCourse: (clickEvent) ->
+    clickEvent.preventDefault()
+    @context.navigator.emit('show.registration', view: 'registration')
+
+  renderCourseOption: ->
+    if @props.course?.isRegistered()
+      courseChangeText = 'Change Section'
+    else
+      courseChangeText = 'Register for Section'
+    <BS.MenuItem onClick={@modifyCourse}>{courseChangeText}</BS.MenuItem>
+
+  renderStudentIdOption: ->
+    return null unless @props.course?.isRegistered()
+    <BS.MenuItem onClick={@updateStudentId}>Change student ID</BS.MenuItem>
+
+  render: ->
+    # The menu has no valid actions unless the useris logged in
+    user = @getUser()
+    return null unless user.isLoggedIn()
+    <BS.DropdownButton navItem className='concept-coach-user' title={user.name}>
+      {@renderCourseOption()}
+      <BS.MenuItem onClick={@showProfile}>Account Profile</BS.MenuItem>
+      {@renderStudentIdOption()}
+      <BS.MenuItem divider key='dropdown-item-divider'/>
+      <BS.MenuItem
+        key='nav-help-link'
+        className='-help-link'
+        target='_blank'
+        href={GET_HELP_LINK}>
+          Get Help
+      </BS.MenuItem>
+      <BS.MenuItem onClick={@logoutUser}>Logout</BS.MenuItem>
+    </BS.DropdownButton>
+
+module.exports = UserMenu
diff --git a/coach/src/user/model.coffee b/coach/src/user/model.coffee
new file mode 100644
index 0000000000..528d6b24a5
--- /dev/null
+++ b/coach/src/user/model.coffee
@@ -0,0 +1,106 @@
+_ = require 'underscore'
+React = require 'react'
+EventEmitter2 = require 'eventemitter2'
+Course = require '../course/model'
+api = require '../api'
+{BootrapURLs, NotificationActions}  = require 'shared'
+
+BLANK_USER =
+  is_admin: false
+  is_content_analyst: false
+  is_customer_service: false
+  name: null
+  profile_url: null
+  courses: []
+  _course_data: []
+  isLoaded: false
+  isLoggingOut: false
+
+User =
+  channel: new EventEmitter2 wildcard: true
+
+  update: (data) ->
+    _.extend(this, data.user)
+    @_course_data = data.courses
+    pending = @validatedPendingCourses()
+    @courses = _.compact _.map data.courses, (course) ->
+      if course.is_concept_coach and _.detect(course.roles, (role) -> role.type is 'student')
+        new Course(course)
+    _.each pending, (course) =>
+      @courses.push(course)
+      course.register(course.enrollment_code, @)
+    @channel.emit('change')
+
+  validatedPendingCourses: ->
+    _.filter @courses, (course) -> course.isValidated()
+
+  isTeacherForCourse: (collectionUUID) ->
+    course = _.findWhere @_course_data, ecosystem_book_uuid: collectionUUID
+    course and _.detect(course.roles, (role) -> role.type is 'teacher')
+
+  status: (collectionUUID) ->
+    course = @getCourse(collectionUUID)
+    isLoggedIn: @isLoggedIn()
+    isLoaded:   @isLoaded
+    isRegistered: !!course?.isRegistered()
+    preValidate: (not @isLoggedIn()) and (not course?.isValidated())
+
+  getCourse: (collectionUUID) ->
+    _.findWhere( @courses, ecosystem_book_uuid: collectionUUID )
+
+  registeredCourses: ->
+    _.filter @courses, (course) -> course.isRegistered()
+
+  findOrCreateCourse: (collectionUUID) ->
+    @getCourse(collectionUUID) or (
+      course = new Course(ecosystem_book_uuid: collectionUUID)
+      @courses.push(course)
+      course
+    )
+
+  ensureStatusLoaded: (force = false) ->
+    api.channel.emit('user.status.send.fetch') if force or not @isLoggedIn()
+
+  isLoggedIn: ->
+    !!@profile_url
+
+  onCourseUpdate: (course) ->
+    @channel.emit('change')
+    @ensureStatusLoaded(true) # re-fetch course list from server
+
+  removeCourse: (course) ->
+    index = @courses.indexOf(course)
+    @courses.splice(index, 1) unless index is -1
+    @channel.emit('change')
+
+  _signalLogoutCompleted: ->
+    _.extend(this, BLANK_USER)
+    @isLoggingOut = true
+    @channel.emit('logout.received')
+
+  init: ->
+    api.channel.on 'user.status.receive.*', ({data}) ->
+      User.isLoaded = true
+
+      if data.access_token
+        api.channel.emit('set.access_token', data.access_token)
+      User.endpoints = data.endpoints
+      if data.user
+        BootrapURLs.update(data)
+        NotificationActions.startPolling()
+        User.update(data)
+      else
+        _.extend(this, BLANK_USER)
+        User.channel.emit('change')
+
+  destroy: ->
+    User.channel.removeAllListeners()
+    _.invoke @courses, 'destroy'
+    @courses = []
+
+
+# start out as a blank user
+_.extend(User, BLANK_USER)
+User.endpoints = {} # this shoudn't be part of BLANK_USER so it persists between logins
+
+module.exports = User
diff --git a/coach/src/user/status-mixin.coffee b/coach/src/user/status-mixin.coffee
new file mode 100644
index 0000000000..8b81950885
--- /dev/null
+++ b/coach/src/user/status-mixin.coffee
@@ -0,0 +1,15 @@
+User = require './model'
+
+UserStatusMixin = {
+
+  componentDidMount: ->
+    User.channel.on("change", @onUserChange)
+  componentWillUnmount: ->
+    User.channel.off("change", @onUserChange)
+  onUserChange: ->
+    @forceUpdate() if @isMounted()
+  getUser: ->
+    User
+}
+
+module.exports = UserStatusMixin
diff --git a/coach/test/all-tests.coffee b/coach/test/all-tests.coffee
new file mode 100644
index 0000000000..9d011a8a5a
--- /dev/null
+++ b/coach/test/all-tests.coffee
@@ -0,0 +1,2 @@
+testsContext = require.context("./", true, /\.spec\.(cjsx|coffee)$/)
+testsContext.keys().forEach(testsContext)
diff --git a/coach/test/api/error-notification.spec.cjsx b/coach/test/api/error-notification.spec.cjsx
new file mode 100644
index 0000000000..c489e6cf93
--- /dev/null
+++ b/coach/test/api/error-notification.spec.cjsx
@@ -0,0 +1,36 @@
+{Testing, expect, sinon, _, React} = require 'shared/test/helpers'
+
+ErrorNotification = require 'concept-coach/error-notification'
+api = require 'api'
+
+ContainedNotification = React.createClass
+  displayName: 'ContainedNotification'
+  render: ->
+    <div className='notice-container'>
+      <ErrorNotification ref='notice' container={@} {...@props}/>
+    </div>
+
+describe 'Error Notification', ->
+
+  it 'does not render if there are no errors', ->
+    Testing.renderComponent( ContainedNotification ).then ({dom}) ->
+      expect(dom.querySelector('.errors')).to.be.null
+
+  it 'renders exceptions', ->
+    Testing.renderComponent( ContainedNotification ).then ({dom, root}) ->
+      expect(dom.querySelector('.errors')).to.be.null
+      exception = new Error
+      api.channel.emit('error', {exception})
+      expect(dom.querySelector('.errors')).to.not.be.null
+
+
+  it 'displays errors when button is clicked', ->
+    Testing.renderComponent( ContainedNotification ).then ({dom}) ->
+      exception = new Error("You have errors!")
+      api.channel.emit('error', {exception})
+
+      btn = dom.querySelector('.-display-errors')
+      expect(btn.textContent).equal('Show Details')
+      Testing.actions.click btn
+      expect(btn.textContent).equal('Hide Details')
+      expect(dom.querySelector('.errors-listing').textContent).equal('Error: You have errors!')
diff --git a/coach/test/api/index.spec.coffee b/coach/test/api/index.spec.coffee
new file mode 100644
index 0000000000..d77c22d523
--- /dev/null
+++ b/coach/test/api/index.spec.coffee
@@ -0,0 +1,33 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{loader, isPending} = require 'api/loader'
+REAL_LOADER = loader
+
+describe 'API', ->
+  beforeEach ->
+    @loader = sinon.spy()
+    # make sure api's not already required
+    delete require.cache[require.resolve('api')]
+    # set up api/loader's exports to use our stubbed loader
+    require.cache[require.resolve('api/loader')].exports = {loader: @loader, isPending}
+    # and now require api, which will in turn require api/loader with our stub
+    @api = require 'api'
+
+  afterEach ->
+    require.cache[require.resolve('api/loader')].exports = {loader: REAL_LOADER, isPending}
+    # force require to re-parse the api file now that the stub's removed
+    delete require.cache[require.resolve('api')]
+    @api.initialize('/')
+
+  it 'only calls loader a single time', ->
+    @api.initialize('/')
+    expect(@loader.callCount).equal(1)
+    @api.initialize('/')
+    expect(@loader.callCount).equal(1)
+
+  it 'can be re-initialized after destroy', ->
+    @api.initialize('/')
+    expect(@loader.callCount).equal(1)
+    @api.destroy()
+    @api.initialize('/')
+    expect(@loader.callCount).equal(2)
diff --git a/coach/test/api/loader.spec.coffee b/coach/test/api/loader.spec.coffee
new file mode 100644
index 0000000000..1bf8bc2108
--- /dev/null
+++ b/coach/test/api/loader.spec.coffee
@@ -0,0 +1,42 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+$ = require 'jquery'
+
+
+describe 'API loader', ->
+  beforeEach ->
+    @jquery =
+      ajax: sinon.spy ->
+        d = $.Deferred()
+        _.defer -> d.resolve({})
+        d.promise()
+    delete require.cache[require.resolve('api')]
+    delete require.cache[require.resolve('api/loader')]
+    require.cache[require.resolve('jquery')].exports = @jquery
+    @api = require 'api'
+    @api.initialize('test/url')
+
+
+  afterEach ->
+    require.cache[require.resolve('jquery')].exports = $
+    # force require to re-parse the api file now that the stub's removed
+    delete require.cache[require.resolve('api/loader')]
+
+  it 'sets isPending', (done) ->
+    expect(@api.isPending()).to.be.false
+    @api.channel.emit('user.status.send.fetch', data: {})
+    _.delay( =>
+      expect(@api.isPending()).to.be.true
+    , 1)
+    _.delay =>
+      expect(@api.isPending()).to.be.false
+      done()
+    , 50 # longer than loader's isLocal delay
+
+  it 'debounces calls to the same URL', (done) ->
+    for i in [1..10]
+      @api.channel.emit('user.status.send.fetch', data: {})
+    _.delay =>
+      expect(@jquery.ajax.callCount).equal(1)
+      done()
+    , 50
diff --git a/coach/test/breadcrumbs/index.spec.coffee b/coach/test/breadcrumbs/index.spec.coffee
new file mode 100644
index 0000000000..a2e6957192
--- /dev/null
+++ b/coach/test/breadcrumbs/index.spec.coffee
@@ -0,0 +1,23 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{Breadcrumbs} = require 'breadcrumbs'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+tasks = require 'task/collection'
+
+describe 'Breadcrumbs Component', ->
+  beforeEach ->
+    @props =
+      goToStep: sinon.spy()
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+    tasks.load("#{@props.collectionUUID}/#{@props.moduleUUID}",  TASK)
+
+
+  it 'renders steps', ->
+    Testing.renderComponent( Breadcrumbs, props: @props ).then ({dom}) ->
+      expect(dom.querySelectorAll('.openstax-breadcrumbs-step:not(.breadcrumb-end)').length).equal(TASK.steps.length)
+
+  it 'calls goToStep callback', ->
+    Testing.renderComponent( Breadcrumbs, props: @props ).then ({dom}) =>
+      Testing.actions.click dom.querySelector('.openstax-breadcrumbs-step:first-child')
+      expect(@props.goToStep).to.have.been.called
diff --git a/coach/test/buttons/index.coffee b/coach/test/buttons/index.coffee
new file mode 100644
index 0000000000..8b3e16160f
--- /dev/null
+++ b/coach/test/buttons/index.coffee
@@ -0,0 +1,21 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+React = require 'react'
+{ExerciseButton} = require 'buttons'
+
+TestChildComponent = React.createClass
+  render: -> React.createElement('span', {}, 'i am a label')
+
+describe 'Exercise Button', ->
+  beforeEach ->
+    @props =
+      children: React.createElement(TestChildComponent)
+      onClick: sinon.spy()
+
+  it 'renders child components', ->
+    Testing.renderComponent( ExerciseButton, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('i am a label')
+
+  it 'calls onClick callback', ->
+    Testing.renderComponent( ExerciseButton, props: @props ).then ({dom}) =>
+      Testing.actions.click dom.querySelector('span')
+      expect(@props.onClick).to.have.been.called
diff --git a/coach/test/concept-coach/base.spec.coffee b/coach/test/concept-coach/base.spec.coffee
new file mode 100644
index 0000000000..8328b4797a
--- /dev/null
+++ b/coach/test/concept-coach/base.spec.coffee
@@ -0,0 +1,22 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{ConceptCoach} = require 'concept-coach/base'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+tasks = require 'task/collection'
+
+describe 'ConceptCoach base component', ->
+  beforeEach ->
+    @props =
+      close: sinon.spy()
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+    tasks.load("#{@props.collectionUUID}/#{@props.moduleUUID}",  TASK)
+
+  it 'renders as loading by default', ->
+    Testing.renderComponent( ConceptCoach, props: @props ).then ({dom}) ->
+      expect(dom.textContent).to.contain('Loading ...')
+
+  it 'calls close callback', ->
+    Testing.renderComponent( ConceptCoach, props: @props ).then ({dom}) =>
+      Testing.actions.click(dom.querySelector('.concept-coach-dashboard-nav'))
+      expect(@props.close).to.have.been.called
diff --git a/coach/test/concept-coach/coach.spec.coffee b/coach/test/concept-coach/coach.spec.coffee
new file mode 100644
index 0000000000..b5eed6aca5
--- /dev/null
+++ b/coach/test/concept-coach/coach.spec.coffee
@@ -0,0 +1,22 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+{Coach}   = require 'concept-coach/coach'
+{CCModal} = require 'concept-coach/modal'
+
+describe 'Coach wrapper component', ->
+  beforeEach ->
+    @props =
+      open: false
+      displayLauncher: true
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+
+  it 'renders launch state', ->
+    Testing.renderComponent( Coach, props: @props ).then ({dom, element}) ->
+      expect(dom.textContent).to.contain('Launch Concept Coach')
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, CCModal)).to.be.empty
+
+  it 'renders coach when open=true', ->
+    @props.open = true
+    Testing.renderComponent( Coach, props: @props ).then ({dom, element}) ->
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, CCModal)).not.to.be.empty
diff --git a/coach/test/concept-coach/index.spec.coffee b/coach/test/concept-coach/index.spec.coffee
new file mode 100644
index 0000000000..c50e51ee7f
--- /dev/null
+++ b/coach/test/concept-coach/index.spec.coffee
@@ -0,0 +1,20 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+API = require 'concept-coach'
+
+describe 'ConceptCoach API', ->
+
+  beforeEach ->
+    @api = new API
+
+  it 'renders views', ->
+    sinon.spy @api, 'updateToView'
+    @api.emit('show.view', view: 'test')
+    expect(@api.updateToView).to.have.been.calledWith('test')
+
+  it 'sets only allowed props on component when updated', ->
+    @api.initialize document.createElement('div')
+    sinon.spy @api.component, 'setProps'
+    newProps = evilProp: true, moduleUUID: 'test'
+    @api.update(newProps)
+    expect(@api.component.setProps).to.have.been.calledWith(moduleUUID: 'test')
diff --git a/coach/test/concept-coach/laptop-and-mug.spec.coffee b/coach/test/concept-coach/laptop-and-mug.spec.coffee
new file mode 100644
index 0000000000..8184c9d6dd
--- /dev/null
+++ b/coach/test/concept-coach/laptop-and-mug.spec.coffee
@@ -0,0 +1,12 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+LaptopAndMug = require 'concept-coach/laptop-and-mug'
+
+describe 'Laptop and Mug SVG', ->
+  beforeEach ->
+    @props = {height: 42}
+
+  it 'renders laptop and mug without errors', ->
+    Testing.renderComponent( LaptopAndMug, props: @props ).then ({dom}) ->
+      expect(dom.tagName).equal('svg')
+      expect(dom.getAttribute('height')).equal('42px')
diff --git a/coach/test/concept-coach/launcher/background-and-desk.spec.coffee b/coach/test/concept-coach/launcher/background-and-desk.spec.coffee
new file mode 100644
index 0000000000..fff7712381
--- /dev/null
+++ b/coach/test/concept-coach/launcher/background-and-desk.spec.coffee
@@ -0,0 +1,10 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+BackgroundAndDesk = require 'concept-coach/launcher/background-and-desk'
+
+
+describe 'Background with Desk', ->
+
+  it 'renders background and desk without errors', ->
+    Testing.renderComponent( BackgroundAndDesk, props: @props ).then ({dom}) ->
+      expect(dom.tagName.toLowerCase()).equal('div')
diff --git a/coach/test/concept-coach/launcher/index.spec.coffee b/coach/test/concept-coach/launcher/index.spec.coffee
new file mode 100644
index 0000000000..d7a4776093
--- /dev/null
+++ b/coach/test/concept-coach/launcher/index.spec.coffee
@@ -0,0 +1,18 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{Launcher} = require 'concept-coach/launcher'
+{channel} = require 'concept-coach/model'
+
+describe 'Launcher', ->
+
+  it 'renders with launching status', ->
+    Testing.renderComponent( Launcher, props: {isLaunching: true} ).then ({dom}) ->
+      expect(dom.textContent).to.include('Launch Concept Coach')
+      expect(dom.querySelector('.concept-coach-launcher').classList.contains('launching')).to.be.true
+
+  it 'emits launch action when clicked', ->
+    spy = sinon.spy()
+    channel.on('launcher.clicked', spy)
+    Testing.renderComponent( Launcher ).then ({dom}) ->
+      Testing.actions.click dom.querySelector('.concept-coach-launcher')
+      expect(spy).to.have.been.called
diff --git a/coach/test/concept-coach/modal.spec.cjsx b/coach/test/concept-coach/modal.spec.cjsx
new file mode 100644
index 0000000000..07ae82e5b9
--- /dev/null
+++ b/coach/test/concept-coach/modal.spec.cjsx
@@ -0,0 +1,52 @@
+{Testing, expect, sinon, _, React} = require 'shared/test/helpers'
+
+{CCModal} = require 'concept-coach/modal'
+api = require 'api'
+
+describe 'CC Modal Component', ->
+  beforeEach ->
+    @props =
+      filterClick: sinon.spy (clickEvent) ->
+        true
+      children: <button id="click-me"/>
+
+    # simulate click manually.
+    # The event listener for this is outside of React's simulated event system,
+    # because it needs to be the first check for all click and focus events on `document`.
+    @click = (el, onClick) ->
+      ev = document.createEvent("MouseEvent")
+      clickArguments = [
+        "click",
+        true, # bubble
+        true, #cancelable
+        window, null,
+        0, 0, 0, 0, # coordinates
+        false, false, false, false, # modifier keys
+        0, # left
+        null
+      ]
+      ev.initMouseEvent(clickArguments...)
+      el.addEventListener('click', (clickEvent) ->
+        onClick(clickEvent)
+      )
+      el.dispatchEvent(ev)
+
+  it 'sets isLoaded class if api call is pending', ->
+    sinon.stub(api, 'isPending').returns(true)
+    Testing.renderComponent( CCModal, props: @props).then ({dom}) ->
+      expect(dom.classList.contains('loaded')).to.be.false
+      api.channel.emit('completed')
+      expect(dom.classList.contains('loaded')).to.be.true
+
+  it 'calls filter click on a click event that is not within the modal DOM', ->
+    Testing.renderComponent( CCModal, props: @props).then ({root, dom, element}) =>
+      button = dom.querySelector('#click-me')
+
+      # since this element is inside the modal, filter click should not run
+      @click(button, element.checkAllowed)
+      expect(@props.filterClick).not.to.have.been.called
+
+      # elements focused on or clicked on outside the modal should be checked
+      @click(root, element.checkAllowed)
+      expect(@props.filterClick).to.have.been.called
+
diff --git a/test/config/karma-coverage.config.coffee b/coach/test/config/karma-coverage.config.coffee
similarity index 76%
rename from test/config/karma-coverage.config.coffee
rename to coach/test/config/karma-coverage.config.coffee
index 17b993ad4f..0da3891c4a 100644
--- a/test/config/karma-coverage.config.coffee
+++ b/coach/test/config/karma-coverage.config.coffee
@@ -2,8 +2,6 @@
 _ = require 'underscore'
 commonConfig = require './karma.common'
 
-LCOV_FILENAME = 'all.lcov.txt'
-
 module.exports = (karmaConfig) ->
 
   config = _.extend({
@@ -12,12 +10,7 @@ module.exports = (karmaConfig) ->
     # logLevel: karmaConfig.LOG_DEBUG
 
     coverageReporter:
-      dir: 'coverage'
-      reporters: [
-        {type: 'html', subdir: '.'}
-        {type: 'lcovonly', subdir: '.', file: LCOV_FILENAME}
-        # {type: 'text'}
-      ]
+      type: 'text'
 
   }, commonConfig)
 
diff --git a/test/config/karma-dev.config.coffee b/coach/test/config/karma-dev.config.coffee
similarity index 100%
rename from test/config/karma-dev.config.coffee
rename to coach/test/config/karma-dev.config.coffee
diff --git a/test/config/karma-in-background.js b/coach/test/config/karma-in-background.js
similarity index 100%
rename from test/config/karma-in-background.js
rename to coach/test/config/karma-in-background.js
diff --git a/coach/test/config/karma.common.coffee b/coach/test/config/karma.common.coffee
new file mode 100644
index 0000000000..2438af46d4
--- /dev/null
+++ b/coach/test/config/karma.common.coffee
@@ -0,0 +1,67 @@
+_ = require 'underscore'
+path = require 'path'
+
+module.exports =
+  basePath: '../../'
+  frameworks: ['mocha', 'chai', 'chai-sinon', 'phantomjs-shim']
+  browsers: ['PhantomJS']
+  reporters: ['mocha']
+
+  files: [
+    'test/all-tests.coffee'
+    'test/all-source-files.coffee'
+  ]
+
+  preprocessors:
+    'src/**/*.{coffee,cjsx}': ['webpack', 'sourcemap']
+    'test/**/*':  ['webpack', 'sourcemap']
+
+  webpack:
+    devtool: 'eval-source-map'
+    resolve:
+      root: [ path.resolve(__dirname, '../../src'), path.resolve(__dirname, '../../api') ]
+      extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+    module:
+      noParse: [
+        /\/sinon\.js/
+      ]
+      loaders: [
+        { test: /\.coffee$/, loader: "coffee-loader"     }
+        { test: /\.json$/,   loader: "json-loader"       }
+        { test: /\.cjsx$/,   loader: "coffee-jsx-loader" }
+      ]
+      preLoaders: [{
+        test: /\.(cjsx|coffee)$/
+        loader: "coffeelint-loader"
+        exclude: /(node_modules|resources|bower_components)/
+      }]
+
+  webpackMiddleware:
+    # True will suppress error shown in console, so it has to be set to false.
+    quiet: false
+    # Suppress everything except error, so it has to be set to false as well
+    # to see success build.
+    noInfo: false
+    stats:
+      # Config for minimal console.log mess.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
+
+
+  plugins:[
+    require('karma-phantomjs-shim')
+    require('karma-mocha')
+    require('karma-webpack')
+    require('karma-mocha-reporter')
+    require('karma-nyan-reporter')
+    require('karma-phantomjs-launcher')
+    require('karma-chrome-launcher')
+    require('karma-chai')
+    require('karma-chai-sinon')
+    require('karma-sourcemap-loader')
+  ]
diff --git a/test/config/karma.config.coffee b/coach/test/config/karma.config.coffee
similarity index 100%
rename from test/config/karma.config.coffee
rename to coach/test/config/karma.config.coffee
diff --git a/test/config/test-runner.coffee b/coach/test/config/test-runner.coffee
similarity index 100%
rename from test/config/test-runner.coffee
rename to coach/test/config/test-runner.coffee
diff --git a/coach/test/course/confirm-join.spec.coffee b/coach/test/course/confirm-join.spec.coffee
new file mode 100644
index 0000000000..844f6ff325
--- /dev/null
+++ b/coach/test/course/confirm-join.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+ConfirmJoin = require 'course/confirm-join'
+Course = require 'course/model'
+STATUS = require '../../auth/status/GET'
+
+COURSE = STATUS.courses[0]
+
+describe 'ConfirmJoin Component', ->
+
+  beforeEach ->
+    @props =
+      course: new Course(COURSE)
+
+  it 'sets title with coure', ->
+    Testing.renderComponent( ConfirmJoin, props: @props ).then ({dom}) ->
+      title = dom.querySelector('h3.title').textContent
+      expect(title).to.include("You are joining")
+      expect(title).to.include("Biology I")
+
+  it 'confirms model when submit is clicked', ->
+    sinon.stub(@props.course, 'confirm')
+    Testing.renderComponent( ConfirmJoin, props: @props ).then ({dom}) =>
+      dom.querySelector('input').value = 'test'
+      Testing.actions.click(dom.querySelector('.btn-success'))
+      expect(@props.course.confirm).to.have.been.calledWith('test')
+
+  it 'confirms model when enter is pressed in input', ->
+    sinon.stub(@props.course, 'confirm')
+    Testing.renderComponent( ConfirmJoin, props: @props ).then ({dom}) =>
+      input = dom.querySelector('input')
+      input.value = 'test'
+      ReactTestUtils.Simulate.keyPress(input, {key: "Enter"})
+      expect(@props.course.confirm).to.have.been.calledWith('test')
diff --git a/coach/test/course/enroll-or-login.spec.coffee b/coach/test/course/enroll-or-login.spec.coffee
new file mode 100644
index 0000000000..757f8e0e36
--- /dev/null
+++ b/coach/test/course/enroll-or-login.spec.coffee
@@ -0,0 +1,24 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+NewCourseRegistration = require 'course/new-registration'
+User = require 'user/model'
+EnrollOrLogin = require 'course/enroll-or-login'
+
+
+describe 'EnrollOrLogin Component', ->
+
+  it 'renders actions', ->
+    Testing.renderComponent( EnrollOrLogin, props: {} ).then ({dom}) ->
+      expect(dom.textContent).to.include 'Sign up for Concept Coach'
+      expect(dom.textContent).to.include 'No enrollment code? Contact your instructor'
+
+  it 'updates text when log in is clicked', ->
+    Testing.renderComponent( EnrollOrLogin, props: {} ).then ({dom}) ->
+      login = dom.querySelector('.login-gateway.login')
+      Testing.actions.click(login)
+      expect(
+        login.classList.contains('is-open')
+      ).to.be.true
+      expect(login.textContent).to
+        .equal('Please log in using your OpenStax account in the window. Click to reopen window.')
diff --git a/coach/test/course/enrollment-code-input.spec.coffee b/coach/test/course/enrollment-code-input.spec.coffee
new file mode 100644
index 0000000000..84fa779391
--- /dev/null
+++ b/coach/test/course/enrollment-code-input.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+EnrollmentCodeInput = require 'course/enrollment-code-input'
+Course = require 'course/model'
+STATUS = require '../../auth/status/GET'
+
+describe 'EnrollmentCodeInput Component', ->
+
+  beforeEach ->
+    @props =
+      title: 'Join my Course'
+      course: new Course(ecosystem_book_uuid: 'test-uuid')
+      currentCourses: _.map STATUS.courses, (c) -> new Course(c)
+
+  it 'lists current courses', ->
+    @props.optionalStudentId = true
+    Testing.renderComponent( EnrollmentCodeInput, props: @props ).then ({dom}) ->
+      courses = _.pluck(dom.querySelectorAll('.list-group-item'), 'textContent')
+      expect(courses).to.deep.equal(['Biology I 1st'])
+
+  it 'model registers when submit is clicked', ->
+    sinon.stub(@props.course, 'register')
+    Testing.renderComponent( EnrollmentCodeInput, props: @props ).then ({dom}) =>
+      dom.querySelector('input').value = 'test'
+      Testing.actions.click(dom.querySelector('.btn-default'))
+      expect(@props.course.register).to.have.been.calledWith('test')
+
+  it 'model registers when enter is pressed in input', ->
+    sinon.stub(@props.course, 'register')
+    Testing.renderComponent( EnrollmentCodeInput, props: @props ).then ({dom}) =>
+      input = dom.querySelector('input')
+      input.value = 'test'
+      ReactTestUtils.Simulate.keyPress(input, {key: "Enter"})
+      expect(@props.course.register).to.have.been.calledWith('test')
diff --git a/coach/test/course/error-list.spec.coffee b/coach/test/course/error-list.spec.coffee
new file mode 100644
index 0000000000..6e5f46d797
--- /dev/null
+++ b/coach/test/course/error-list.spec.coffee
@@ -0,0 +1,19 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+ErrorList = require 'course/error-list'
+Course = require 'course/model'
+STATUS = require '../../auth/status/GET'
+COURSE = STATUS.courses[0]
+
+describe 'ErrorList Component', ->
+
+  it 'displays errors from course', ->
+    course = new Course(COURSE)
+    course.errors = [
+      {code: 'already_enrolled'}, {code: 'already_processed'}
+    ]
+    Testing.renderComponent( ErrorList, props: {course} ).then ({dom}) ->
+      expect(_.pluck(dom.querySelectorAll('li'), 'textContent')).to.deep.equal(
+        ['You are already enrolled in this course. Please log in.',
+         'Your enrollment in this course has been processed. Please reload the page.']
+      )
diff --git a/coach/test/course/model.spec.coffee b/coach/test/course/model.spec.coffee
new file mode 100644
index 0000000000..3bcea8bb15
--- /dev/null
+++ b/coach/test/course/model.spec.coffee
@@ -0,0 +1,26 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+
+DATA = require '../../auth/status/GET'
+
+describe 'Course Model', ->
+
+  beforeEach ->
+    @course = new Course(_.first(DATA.courses))
+
+  it 'can describe itself', ->
+    expect(@course.description()).to.eq('Biology I 1st')
+
+
+  it 'gets the student record', ->
+    expect(@course.getStudentIdentifier()).to.eq('1324')
+
+
+  it 'sets student id when registering', ->
+    @course._onConfirmed(data: {student_identifier: 'ABCDEF'})
+    expect(@course.getStudentIdentifier()).to.eq('ABCDEF')
+
+  it 'sets student id after modification is performed', ->
+    @course._onStudentUpdated(data: {student_identifier: 'WXYZ'})
+    expect(@course.getStudentIdentifier()).to.eq('WXYZ')
diff --git a/coach/test/course/new-registration.spec.coffee b/coach/test/course/new-registration.spec.coffee
new file mode 100644
index 0000000000..fca26516d2
--- /dev/null
+++ b/coach/test/course/new-registration.spec.coffee
@@ -0,0 +1,37 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+NewCourseRegistration = require 'course/new-registration'
+User = require 'user/model'
+EnrollmentCodeInput = require 'course/enrollment-code-input'
+ConfirmJoin = require 'course/confirm-join'
+
+describe 'NewCourseRegistration Component', ->
+
+  beforeEach ->
+    @props =
+      course: new Course(ecosystem_book_uuid: 'test-collection-uuid')
+      collectionUUID: 'test-collection-uuid'
+
+  describe 'teacher message', ->
+    it 'is normally hidden', ->
+      Testing.renderComponent( NewCourseRegistration, props: @props ).then ({dom}) ->
+        expect(dom.querySelector('.teacher-message')).to.be.null
+
+    it 'is shown to teachers', ->
+      sinon.stub(User, 'isTeacherForCourse').returns(true)
+      Testing.renderComponent( NewCourseRegistration, props: @props ).then ({dom}) ->
+        expect(dom.querySelector('.teacher-message')).not.to.be.null
+
+  it 'renders enrollment code input if course is incomplete', ->
+    sinon.stub(@props.course, 'isIncomplete').returns(true)
+    Testing.renderComponent( NewCourseRegistration, props: @props ).then ({element}) ->
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, ConfirmJoin)).to.be.empty
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, EnrollmentCodeInput)).not.to.be.empty
+
+  it 'renders confirmation if course is pending', ->
+    sinon.stub(@props.course, 'isIncomplete').returns(false)
+    sinon.stub(@props.course, 'isPending').returns(true)
+    Testing.renderComponent( NewCourseRegistration, props: @props ).then ({element}) ->
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, ConfirmJoin)).not.to.be.empty
+      expect(ReactTestUtils.scryRenderedComponentsWithType(element, EnrollmentCodeInput)).to.be.empty
diff --git a/coach/test/course/registration.spec.coffee b/coach/test/course/registration.spec.coffee
new file mode 100644
index 0000000000..4b835efd62
--- /dev/null
+++ b/coach/test/course/registration.spec.coffee
@@ -0,0 +1,46 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+STATUS = require '../../auth/status/GET'
+User = require 'user/model'
+Registration = require 'course/registration'
+EnrollOrLogin = require 'course/enroll-or-login'
+NewCourseRegistration = require 'course/new-registration'
+ModifyCourseRegistration = require 'course/modify-registration'
+
+describe 'Registration Component', ->
+
+  beforeEach ->
+    @props =
+      collectionUUID: 'test-collection-uuid'
+    @course = new Course(STATUS.courses[0])
+    @sandbox = sinon.sandbox.create()
+    @sandbox.stub(User, 'getCourse').returns(@course)
+    @sandbox.stub(User, 'isLoggedIn').returns(true)
+
+  afterEach ->
+    @sandbox.restore()
+
+  it 'renders new if course is new', ->
+    sinon.stub(@course, 'isRegistered').returns(false)
+    Testing.renderComponent( Registration, props: @props ).then ({element}) ->
+      expect(
+        ReactTestUtils.scryRenderedComponentsWithType(element, NewCourseRegistration)
+      ).not.to.be.empty
+
+
+  it 'renders modify if course is already registered', ->
+    Testing.renderComponent( Registration, props: @props ).then ({element}) ->
+      expect(
+        ReactTestUtils.scryRenderedComponentsWithType(element, ModifyCourseRegistration)
+      ).not.to.be.empty
+
+  it 'asks to enroll or login if user doesnt have course and isnt logged in', ->
+    User.getCourse.restore()
+    User.isLoggedIn.restore()
+    @sandbox.stub(User, 'isLoggedIn').returns(false)
+    @sandbox.stub(User, 'getCourse').returns(null)
+    Testing.renderComponent( Registration, props: @props ).then ({element}) ->
+      expect(
+        ReactTestUtils.scryRenderedComponentsWithType(element, EnrollOrLogin)
+      ).not.to.be.empty
diff --git a/coach/test/course/request-student-id.spec.coffee b/coach/test/course/request-student-id.spec.coffee
new file mode 100644
index 0000000000..7f93f26225
--- /dev/null
+++ b/coach/test/course/request-student-id.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+RequestStudentId = require 'course/request-student-id'
+
+describe 'RequestStudentId Component', ->
+
+  beforeEach ->
+    @props =
+      onCancel: sinon.spy()
+      onSubmit: sinon.spy()
+      label: 'a test label'
+      saveButtonLabel: 'this is save btn'
+      title: 'this is title'
+      course: new Course(ecosystem_book_uuid: 'test-collection-uuid')
+
+  it 'renders values from props', ->
+    Testing.renderComponent( RequestStudentId, props: @props ).then ({dom}) =>
+      expect(dom.querySelector('h3').textContent).to.equal(@props.title)
+      expect(dom.querySelector('.control-label').textContent).to.equal(@props.label)
+      expect(dom.querySelector('.btn-default').textContent).to.equal(@props.saveButtonLabel)
+
+  it 'calls onSubmit when save button is clicked', ->
+    Testing.renderComponent( RequestStudentId, props: @props ).then ({dom}) =>
+      expect(@props.onSubmit).not.to.have.been.called
+      dom.querySelector('input').value = 'test value'
+      Testing.actions.click(dom.querySelector('.btn-default'))
+      expect(@props.onSubmit).to.have.been.calledWith('test value')
+
+  it 'calls onCancel when cancel button is clicked', ->
+    Testing.renderComponent( RequestStudentId, props: @props ).then ({dom}) =>
+      expect(@props.onCancel).not.to.have.been.called
+      Testing.actions.click(dom.querySelector('.cancel a'))
+      expect(@props.onCancel).to.have.been.called
diff --git a/coach/test/course/update-student-identifier.spec.coffee b/coach/test/course/update-student-identifier.spec.coffee
new file mode 100644
index 0000000000..1b11b4922a
--- /dev/null
+++ b/coach/test/course/update-student-identifier.spec.coffee
@@ -0,0 +1,29 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+Course = require 'course/model'
+
+UpdateStudentIdentifier = require 'course/update-student-identifier'
+
+describe 'UpdateStudentIdentifier Component', ->
+
+  beforeEach ->
+    @props =
+      course: new Course(ecosystem_book_uuid: 'test-collection-uuid')
+
+  it 'submits a request when form is filled out', ->
+    sinon.stub(@props.course, 'updateStudent')
+    Testing.renderComponent( UpdateStudentIdentifier, props: @props ).then ({dom}) =>
+      dom.querySelector('input').value = 'test value'
+      Testing.actions.click(dom.querySelector('.btn-default'))
+      expect(@props.course.updateStudent).to.have.been.calledWith(student_identifier: 'test value')
+
+  it 'updates when a successful response is recieved',  (done) ->
+    sinon.stub(@props.course, 'updateStudent', (id) ->
+      @_onStudentUpdated({data: {student_identifier: id}})
+    )
+    Testing.renderComponent( UpdateStudentIdentifier, props: @props ).then ({element, dom}) ->
+      dom.querySelector('input').value = 'new id'
+      Testing.actions.click(dom.querySelector('.btn-default'))
+      _.defer ->
+        expect(element.getDOMNode().textContent).to.match(/You have successfully updated your student identifier/)
+        done()
diff --git a/coach/test/exercise/collection.spec.coffee b/coach/test/exercise/collection.spec.coffee
new file mode 100644
index 0000000000..99d41b7c3f
--- /dev/null
+++ b/coach/test/exercise/collection.spec.coffee
@@ -0,0 +1,49 @@
+_ = require 'underscore'
+Collection = require 'exercise/collection'
+step = require '../../api/steps/4571/GET'
+
+describe 'Exercise Collection', ->
+
+  beforeEach ->
+    @stepId = 4571
+    @step = _.clone(step)
+    Collection.quickLoad(@stepId, @step)
+
+  describe 'getCurrentPanel', ->
+    it 'returns free-response by default', ->
+      expect(Collection.getCurrentPanel(@stepId)).equal('free-response')
+
+    it 'returns review if content.questions is missing', ->
+      @step.content = {}
+      Collection.quickLoad(@stepId, @step)
+      expect(Collection.getCurrentPanel(@stepId)).equal('review')
+
+    it 'returns multiple-choice if free_response is present', ->
+      @step.free_response = 'my best guess'
+      Collection.quickLoad(@stepId, @step)
+      expect(Collection.getCurrentPanel(@stepId)).equal('multiple-choice')
+
+  describe 'free response caching', ->
+    it 'get returns cached free response if free response has been cached', ->
+      FIRST_RESPONSE = 'This is the first response'
+      SECOND_RESPONSE = 'This is the second response'
+
+      expect(Collection.get(@stepId).cachedFreeResponse).to.be.falsy
+      Collection.cacheFreeResponse(@stepId, FIRST_RESPONSE)
+      expect(Collection.get(@stepId).cachedFreeResponse).to.equal(FIRST_RESPONSE)
+      Collection.cacheFreeResponse(@stepId, SECOND_RESPONSE)
+      expect(Collection.get(@stepId).cachedFreeResponse).to.equal(SECOND_RESPONSE)
+
+    it 'clears cached free response if actual free-response has been saved', ->
+      FIRST_RESPONSE = 'This is the first response'
+      SAVED_RESPONSE = 'This is the saved response'
+
+      savedStep = _.extend {}, @step, {free_response: SAVED_RESPONSE}
+
+      expect(Collection.get(@stepId).cachedFreeResponse).to.be.falsy
+      Collection.cacheFreeResponse(@stepId, FIRST_RESPONSE)
+      expect(Collection.get(@stepId).cachedFreeResponse).to.equal(FIRST_RESPONSE)
+      Collection.quickLoad(@stepId, savedStep)
+      expect(Collection.get(@stepId).cachedFreeResponse).to.be.falsy
+      expect(Collection.get(@stepId).free_response).to.equal(SAVED_RESPONSE)
+
diff --git a/coach/test/exercise/index.spec.coffee b/coach/test/exercise/index.spec.coffee
new file mode 100644
index 0000000000..753769a37f
--- /dev/null
+++ b/coach/test/exercise/index.spec.coffee
@@ -0,0 +1,66 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+{ExerciseStep} = require 'exercise'
+Collection = require 'exercise/collection'
+step = require '../../api/steps/4573/GET'
+
+
+setFreeResponse = (dom, answer) ->
+  ta = dom.querySelector('textarea')
+  ta.value = answer
+  ReactTestUtils.Simulate.change(ta, target: {value: ta.value})
+
+# utility fn to set the free response
+saveFreeResponse = (dom, answer) ->
+  setFreeResponse(dom, answer)
+  Testing.actions.click(dom.querySelector('button.continue'))
+
+describe 'Exercise Step', ->
+
+  beforeEach ->
+    @props =
+      id: '4573'
+      item: _.clone(step)
+
+    Collection.quickLoad(@props.id, @props.item)
+
+
+  it 'renders given exercise', ->
+    Testing.renderComponent( ExerciseStep, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.openstax-exercise')).not.to.be.null
+
+  it 'caches free response', ->
+    Testing.renderComponent( ExerciseStep, props: @props ).then ({dom}) ->
+      setFreeResponse(dom, 'My Partial Answer')
+      expect(dom.querySelector('textarea').value).equal('My Partial Answer')
+      expect(dom.querySelector('.free-response')).to.be.null
+
+      setFreeResponse(dom, 'My Second Partial Answer')
+      expect(dom.querySelector('textarea').value).equal('My Second Partial Answer')
+      expect(dom.querySelector('.free-response')).to.be.null
+
+
+  it 'saves free response', ->
+    Testing.renderComponent( ExerciseStep, props: @props ).then ({dom}) ->
+      saveFreeResponse(dom, 'My Answer')
+      expect(dom.querySelector('textarea')).to.be.null
+      expect(dom.querySelector('.free-response').innerText).equal('My Answer')
+
+  it 'renders answer choices after free response', ->
+    Testing.renderComponent( ExerciseStep, props: @props ).then ({dom}) ->
+      saveFreeResponse(dom, 'My Second Answer')
+      expect(dom.querySelector('.free-response').textContent).equal('My Second Answer')
+      answers = _.pluck dom.querySelectorAll('.answer-content'), 'textContent'
+      expect(answers).to.deep.equal(
+        _.pluck(step.content.questions[0].answers, 'content_html')
+      )
+
+  it 'sets answer id after selection', ->
+    Testing.renderComponent( ExerciseStep, props: @props ).then ({dom}) =>
+      saveFreeResponse(dom, 'My Second Answer')
+      answer = dom.querySelectorAll('.answers-answer')[0]
+      input = answer.querySelector('input')
+      ReactTestUtils.Simulate.change(input, target:{checked: true})
+      Testing.actions.click(input)
+      selectedAnswer = _.find(step.content.questions[0].answers, id: @props.item.answer_id)
+      expect(selectedAnswer.content_html).equal(answer.innerText)
diff --git a/coach/test/navigation/course-name.spec.coffee b/coach/test/navigation/course-name.spec.coffee
new file mode 100644
index 0000000000..70256f2002
--- /dev/null
+++ b/coach/test/navigation/course-name.spec.coffee
@@ -0,0 +1,13 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+{CourseNameBase} = require 'navigation/course-name'
+
+describe 'CourseNameBase Component', ->
+
+  it 'renders course.description()', ->
+    props =
+      course:
+        description: -> 'My Course'
+
+    Testing.renderComponent( CourseNameBase, {props}).then ({dom}) ->
+      expect(dom.textContent).equal('My Course')
diff --git a/coach/test/navigation/index.spec.coffee b/coach/test/navigation/index.spec.coffee
new file mode 100644
index 0000000000..fde2b38e1c
--- /dev/null
+++ b/coach/test/navigation/index.spec.coffee
@@ -0,0 +1,36 @@
+React = require 'react'
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+{Navigation} = require 'navigation'
+Course = require 'course/model'
+STATUS = require '../../auth/status/GET'
+
+Wrapper = React.createClass
+  childContextTypes:
+    close: React.PropTypes.func
+    view: React.PropTypes.string
+
+  getChildContext: ->
+    _.pick @props, 'close', 'view'
+
+  render: ->
+    React.createElement(Navigation, @props)
+
+
+describe 'Navigation Component', ->
+
+  beforeEach ->
+    @props =
+      course: new Course(STATUS.courses[0])
+      close: sinon.spy()
+      view: 'progress'
+
+  it 'calls close callback', ->
+    Testing.renderComponent(Wrapper, props: @props).then ({dom}) =>
+      Testing.actions.click(dom.querySelector('button.-coach-close'))
+      expect(@props.close).to.have.been.called
+
+  it 'hides progress if course is not registered', ->
+    sinon.stub(@props.course, 'isRegistered').returns(false)
+    Testing.renderComponent(Wrapper, props: @props).then ({dom}) ->
+      expect(dom.querySelector('.-progress')).to.be.null
diff --git a/coach/test/navigation/model.spec.coffee b/coach/test/navigation/model.spec.coffee
new file mode 100644
index 0000000000..5bcec7a530
--- /dev/null
+++ b/coach/test/navigation/model.spec.coffee
@@ -0,0 +1,11 @@
+Navigation = require 'navigation/model'
+
+describe 'Navigation Model', ->
+
+  beforeEach ->
+    Navigation.initialize({})
+
+  it 'gets nav data by view', ->
+    data = Navigation.getDataByView('profile')
+    expect(data).not.to.be.null
+    expect(data.state.view).equal('profile')
diff --git a/coach/test/progress/chapter.spec.coffee b/coach/test/progress/chapter.spec.coffee
new file mode 100644
index 0000000000..ba3781abd0
--- /dev/null
+++ b/coach/test/progress/chapter.spec.coffee
@@ -0,0 +1,21 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{ChapterProgress} = require 'progress/chapter'
+
+DASHBOARD = require '../../api/cc/dashboard/GET'
+
+describe 'ChapterProgress Component', ->
+
+  beforeEach ->
+    @props =
+      chapter: _.clone DASHBOARD.chapters[0]
+      maxLength: 4
+
+  it 'renders the title', ->
+    Testing.renderComponent(ChapterProgress, props: @props).then ({dom}) =>
+      expect(dom.querySelector('h3').textContent).equal(@props.chapter.title)
+
+  it 'renders pages', ->
+    Testing.renderComponent(ChapterProgress, props: @props).then ({dom}) =>
+      pages = _.pluck dom.querySelectorAll('.concept-coach-progress-page-title'), 'textContent'
+      expect(pages).to.deep.equal(_.pluck(@props.chapter.pages, 'title'))
diff --git a/coach/test/progress/current.spec.coffee b/coach/test/progress/current.spec.coffee
new file mode 100644
index 0000000000..5c2f0b06e2
--- /dev/null
+++ b/coach/test/progress/current.spec.coffee
@@ -0,0 +1,32 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+Collection = require 'task/collection'
+{CurrentProgress} = require 'progress/current'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+
+Wrapper = React.createClass
+  childContextTypes:
+    moduleUUID:     React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+
+  getChildContext: ->
+    _.pick @props, 'moduleUUID', 'collectionUUID'
+
+  render: ->
+    React.createElement(CurrentProgress, @props)
+
+describe 'CurrentProgress Component', ->
+
+  beforeEach ->
+    @props =
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+    Collection.load("#{@props.collectionUUID}/#{@props.moduleUUID}", _.extend({}, TASK, @props))
+
+  # Needs update to 'shared/resize-listener
+  # Currently it calls getDomNode inside a _.defer.
+  # When a complete spec run is ongoing, the component is unmounted when it's called
+  xit 'renders status', ->
+    Testing.renderComponent(Wrapper, props: @props).then ({dom, element}) ->
+      expect(dom.querySelector('.concept-coach-progress-page-title')).not.to.be.null
diff --git a/coach/test/progress/exercise.spec.coffee b/coach/test/progress/exercise.spec.coffee
new file mode 100644
index 0000000000..1ed0a8cce7
--- /dev/null
+++ b/coach/test/progress/exercise.spec.coffee
@@ -0,0 +1,23 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+{ExerciseProgress} = require 'progress/exercise'
+
+describe 'ExerciseProgress Component', ->
+
+  beforeEach ->
+    @props =
+      className: 'a-test'
+      exercise:
+        is_correct: true
+        is_completed: true
+
+  it 'renders with classnames to match props', ->
+    Testing.renderComponent( ExerciseProgress, props: @props ).then ({dom}) ->
+      expect(dom.classList.contains('a-test')).to.be.true
+      expect(dom.classList.contains('is-correct')).to.be.true
+      expect(dom.classList.contains('is-completed')).to.be.true
+
+  it 'renders if props are empty', ->
+    Testing.renderComponent( ExerciseProgress ).then ({dom}) ->
+      expect(dom.classList.contains('is-correct')).to.be.false
+      expect(dom.classList.contains('is-completed')).to.be.false
diff --git a/coach/test/progress/index.spec.coffee b/coach/test/progress/index.spec.coffee
new file mode 100644
index 0000000000..78680860f8
--- /dev/null
+++ b/coach/test/progress/index.spec.coffee
@@ -0,0 +1,31 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+Collection = require 'task/collection'
+{Progress} = require 'progress'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+
+Wrapper = React.createClass
+  childContextTypes:
+    moduleUUID:     React.PropTypes.string
+    collectionUUID: React.PropTypes.string
+
+  getChildContext: ->
+    _.pick @props, 'moduleUUID', 'collectionUUID'
+
+  render: ->
+    React.createElement(Progress, @props)
+
+describe 'Progress Component', ->
+
+  beforeEach ->
+    @props =
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+
+    Collection.load("#{@props.collectionUUID}/#{@props.moduleUUID}", _.extend({}, TASK, @props))
+
+  # Note. somethings wrong with the format of the task.  It doesn't render the title text from it
+  it 'renders status', ->
+    Testing.renderComponent(Wrapper, props: @props).then ({dom, element}) ->
+      expect(dom.querySelector('.concept-coach-progress-page-title')).not.to.be.null
diff --git a/coach/test/task/collection.spec.coffee b/coach/test/task/collection.spec.coffee
new file mode 100644
index 0000000000..ad085bce34
--- /dev/null
+++ b/coach/test/task/collection.spec.coffee
@@ -0,0 +1,35 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{TaskReview} = require 'task/review'
+Collection = require 'task/collection'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+User = require 'user/model'
+
+describe 'Task Collection', ->
+
+  beforeEach ->
+    @taskId = 'm_uuid/C_UUID'
+    @task = _.extend({}, TASK, taskId: @taskId, moduleUUID: 'm_uuid', collectionUUID: 'C_UUID' )
+    Collection.load(@taskId, @task)
+
+
+  it 'can get as a page', ->
+    page = Collection.getAsPage(@taskId)
+    expect( _.pluck(page.exercises, 'task_id') )
+      .to.deep.equal(['265', '265', '265'])
+
+  it 'can get the index of a step', ->
+    expect(Collection.getStepIndex(@taskId, '4572')).to.equal(1)
+
+
+  it 'can get the module info', ->
+    info = Collection.getModuleInfo(@taskId, 'test')
+    expect(info).to.deep.equal(
+      collectionUUID:"C_UUID", moduleUUID:"m_uuid", link:'test/contents/C_UUID:m_uuid'
+    )
+
+
+  it 'is reset after user logs out', ->
+    expect( Collection.getModuleInfo(@taskId, 'test') ).not.to.be.undefined
+    User._signalLogoutCompleted()
+    expect( Collection.getModuleInfo(@taskId, 'test') ).to.be.undefined
diff --git a/coach/test/task/index.spec.coffee b/coach/test/task/index.spec.coffee
new file mode 100644
index 0000000000..0a9cfcc6cd
--- /dev/null
+++ b/coach/test/task/index.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{Task} = require 'task'
+Collection = require 'task/collection'
+{channel} = require 'navigation'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+
+describe 'Task Component', ->
+
+  beforeEach ->
+    @props =
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+      goToStep: sinon.spy()
+    @props.taskId = "#{@props.collectionUUID}/#{@props.moduleUUID}"
+    @task = _.extend({}, TASK, @props)
+    Collection.load(@props.taskId, @task)
+
+  it 'renders the first step task', ->
+    _.each @task.steps, (step) -> step.is_completed = false
+    Collection.load(@props.taskId, @task)
+    Testing.renderComponent(Task, props: @props).then ({dom}) =>
+      # console.log dom
+      # console.log JSON.stringify(@task)
+      question = dom.querySelector('.openstax-exercise .question-stem').textContent
+      expect(question).equal(@task.steps[0].content.questions[0].stem_html)
+
+  # TODO: make an update to shared testing component to take in context as an option
+  xit 'renders different step when breadcrumb is clicked', ->
+    Testing.renderComponent(Task, props: @props, context: navigator: channel).then ({element}) =>
+      crumbs = element.getDOMNode().querySelectorAll('.openstax-breadcrumbs-step')
+      Testing.actions.click crumbs[1]
+      question = element.getDOMNode().querySelector('.openstax-exercise .question-stem').textContent
+      expect(question).to.equal(@task.steps[1].content.questions[0].stem_html)
diff --git a/coach/test/task/review.spec.coffee b/coach/test/task/review.spec.coffee
new file mode 100644
index 0000000000..00ad9ba232
--- /dev/null
+++ b/coach/test/task/review.spec.coffee
@@ -0,0 +1,30 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+{TaskReview} = require 'task/review'
+Collection = require 'task/collection'
+TASK = require 'cc/tasks/C_UUID/m_uuid/GET'
+
+describe 'TaskReview Component', ->
+
+  beforeEach ->
+    @props =
+      moduleUUID: 'm_uuid'
+      collectionUUID: 'C_UUID'
+      goToStep: sinon.spy()
+    @props.taskId = "#{@props.collectionUUID}/#{@props.moduleUUID}"
+    @task = _.extend({}, TASK, @props)
+    Collection.load(@props.taskId, @task)
+
+  it 'renders a blank message when no steps are complete', ->
+    Testing.renderComponent(TaskReview, props: @props).then ({dom}) ->
+      expect(dom.querySelector('h3').textContent).equal('Exercise to see Review')
+
+  it 'renders completed steps', ->
+    task = _.clone(@task)
+    task.steps = _.map @task.steps, (step) -> _.extend({}, step, is_completed: true)
+    Collection.load(@props.taskId, task)
+
+    Testing.renderComponent(TaskReview, props: @props).then ({dom}) =>
+      questions = _.map @task.steps, (step) -> step.content.questions[0].stem_html
+      expect( _.pluck(dom.querySelectorAll('.openstax-question .question-stem'), 'textContent') )
+        .to.deep.equal(questions)
diff --git a/coach/test/user/accounts-iframe.spec.coffee b/coach/test/user/accounts-iframe.spec.coffee
new file mode 100644
index 0000000000..1d71000f85
--- /dev/null
+++ b/coach/test/user/accounts-iframe.spec.coffee
@@ -0,0 +1,26 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+User = require 'user/model'
+AccountsIframe = require 'user/accounts-iframe'
+
+describe 'Accounts iframe component', ->
+  beforeEach ->
+    @props =
+      type: 'profile'
+
+    User.endpoints =
+      login: '/test-login'
+      logout: '/logout'
+      accounts_iframe: '/accounts'
+
+  it 'sets src with our url as parent', ->
+    Testing.renderComponent( AccountsIframe, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('iframe').getAttribute('src')).to.match(
+        /\/accounts\?parent=http:\/\/localhost:\d+/
+      )
+
+  it 'uses logout url', ->
+    @props.type = 'logout'
+    Testing.renderComponent( AccountsIframe, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('iframe').getAttribute('src')).to.match(
+        /\/logout\?parent=http:\/\/localhost:\d+/
+      )
diff --git a/coach/test/user/login-gateway.spec.coffee b/coach/test/user/login-gateway.spec.coffee
new file mode 100644
index 0000000000..4cae1cd2be
--- /dev/null
+++ b/coach/test/user/login-gateway.spec.coffee
@@ -0,0 +1,27 @@
+# coffeelint: disable=max_line_length, spacing_after_comma
+
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+User = require 'user/model'
+LoginGateway = require 'user/login-gateway'
+
+describe 'User login gateway component', ->
+  beforeEach ->
+    @props =
+      children: 'My Login Screen'
+      window:
+        open: sinon.stub().returns({})
+    User.endpoints.login = '/test-login'
+
+  it 'renders children', ->
+    Testing.renderComponent( LoginGateway, props: @props, [@title])
+      .then ({dom}) =>
+        expect(dom.textContent).to.equal(@props.children)
+
+  it 'opens a propup window when clicked', ->
+    Testing.renderComponent( LoginGateway, props: @props ).then ({dom, element}) =>
+      Testing.actions.click(dom)
+      expect(@props.window.open).to.have.been.calledWith(
+        sinon.match(/test-login\?parent=http%3A%2F%2Flocalhost%3A\d+%2Fcontext.html/), 'oxlogin',
+        sinon.match(/toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=\d+,height=\d+,top=\d+,left=\d+/)
+      )
+      expect( element.getDOMNode().textContent ).to.include('Click to reopen window')
diff --git a/coach/test/user/menu.spec.coffee b/coach/test/user/menu.spec.coffee
new file mode 100644
index 0000000000..34ec7a1e76
--- /dev/null
+++ b/coach/test/user/menu.spec.coffee
@@ -0,0 +1,30 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+Menu = require 'user/menu'
+User = require 'user/model'
+Course = require 'course/model'
+sandbox = null
+
+describe 'User menu component', ->
+  beforeEach ->
+    @props =
+      course: new Course(ecosystem_book_uuid: 'test-collection-uuid')
+    sandbox = sinon.sandbox.create()
+  afterEach ->
+    sandbox.restore()
+
+  describe 'course options', ->
+
+    beforeEach ->
+      sandbox.stub(User, 'isLoggedIn').returns(true)
+
+    it 'renders for registration when course is not registered', ->
+      sinon.stub(@props.course, 'isRegistered').returns(false)
+      Testing.renderComponent( Menu, props: @props ).then ({dom}) ->
+        expect(dom.textContent).to.match(/Register for Section/)
+
+    it 'renders modification when registered', ->
+      sinon.stub(@props.course, 'isRegistered').returns(true)
+      Testing.renderComponent( Menu, props: @props ).then ({dom}) ->
+        expect(dom.textContent).to.match(/Change Section/)
+        expect(dom.textContent).to.match(/Change student ID/)
diff --git a/coach/test/user/model.spec.coffee b/coach/test/user/model.spec.coffee
new file mode 100644
index 0000000000..dd01e03f2c
--- /dev/null
+++ b/coach/test/user/model.spec.coffee
@@ -0,0 +1,24 @@
+{Testing, expect, sinon, _} = require 'shared/test/helpers'
+
+User = require 'user/model'
+
+describe 'User', ->
+
+
+  it 'defaults to not logged in', ->
+    expect(User.isLoggedIn()).to.be.false
+
+  it 'resets courses when destroy is called and can no longer emit signals', ->
+    fakeCourse =
+      destroy: -> true
+    sinon.stub(fakeCourse, 'destroy')
+    User.courses = [fakeCourse]
+    logoutSpy = sinon.spy()
+    User.channel.on 'logout.received', logoutSpy
+    User.destroy()
+    expect(User.courses).to.be.empty
+    expect(fakeCourse.destroy).to.have.been.called
+    expect(logoutSpy).not.to.have.been.called
+
+    User._signalLogoutCompleted()
+    expect(logoutSpy).to.have.not.been.called
diff --git a/configs/webpack/base.coffee b/configs/webpack/base.coffee
new file mode 100644
index 0000000000..2faf4b8bf9
--- /dev/null
+++ b/configs/webpack/base.coffee
@@ -0,0 +1,230 @@
+path = require 'path'
+
+webpack = require 'webpack'
+ExtractTextPlugin = require 'extract-text-webpack-plugin'
+webpackUMDExternal = require 'webpack-umd-external'
+
+_ = require 'lodash'
+
+
+# base config, true for all builds no matter what conditions
+BASE_CONFIG =
+  cache: true
+  devtool: 'source-map'
+  output:
+    filename: '[name].js'
+    # path: defined in project/environment specific
+    # publicPath: defined in project/environment specific
+  module:
+    noParse: [
+      /\/sinon\.js/
+    ]
+    loaders:   [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['stage-3']}}
+      { test: /\.json$/,   loader: 'json-loader' }
+      { test: /\.(png|jpg|svg|gif)/, loader: 'file-loader?name=[name].[ext]'}
+      { test: /\.(woff|woff2|eot|ttf)/, loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' }
+    ]
+  resolve:
+    extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+  plugins: [
+    new webpack.optimize.DedupePlugin()
+  ]
+
+KARMA_BASE_CONFIG =
+  devtool: 'eval-source-map'
+  node:
+    fs: "empty"
+  resolve:
+    extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+  module:
+    noParse: [
+      /\/sinon\.js/
+    ]
+    loaders: [
+      { test: /\.coffee$/, loader: "coffee-loader"     }
+      { test: /\.json$/,   loader: "json-loader"       }
+      { test: /\.cjsx$/,   loader: "coffee-jsx-loader" }
+    ]
+    preLoaders: [{
+      test: /\.(cjsx|coffee)$/
+      loader: "coffeelint-loader"
+      exclude: /(node_modules|resources|bower_components)/
+    }]
+
+BASE_BUILD_LOADERS =
+  [
+    # less, coffee, and cjsx will have ["react-hot", "webpack-module-hot-accept"]
+    # added in dev config.
+    { test: /\.less$/,   loader: ExtractTextPlugin.extract('css!less') }
+    { test: /\.coffee$/, loader: 'coffee-loader' }
+    { test: /\.cjsx$/,   loader: 'coffee-jsx-loader' }
+  ]
+
+DEV_LOADERS = ['react-hot', 'webpack-module-hot-accept']
+
+BASE_DEV_LOADERS =
+  [
+    { test: /\.coffee$/, loaders: DEV_LOADERS.concat('coffee-loader')}
+    { test: /\.cjsx$/,   loaders: DEV_LOADERS.concat('coffee-jsx-loader')}
+    { test: /\.less$/,   loaders: DEV_LOADERS.concat('style-loader', 'css-loader', 'less-loader') }
+  ]
+
+mergeWebpackConfigs = ->
+
+  mergeArrays = (a, b) ->
+    if _.isArray(a)
+      return a.concat(b)
+
+  mergeArgs = _.chain(arguments).toArray().unshift({}).push(mergeArrays).value()
+  _.mergeWith.apply(null, mergeArgs)
+
+# TODO handle if project doesn't exist
+loadProjectBaseConfig = (projectName) ->
+  projectBaseConfig = require "../../#{projectName}/configs/base"
+
+  _.extend({basePath: projectName}, projectBaseConfig)
+
+
+makeBuildOutputs = (projectConfig) ->
+  path: "dist"
+  publicPath: "/assets/"
+
+makeBuildPlugins = (projectConfig) ->
+  {styleFilename} = projectConfig
+
+  styleFilename ?= '[name].css'
+
+  [new ExtractTextPlugin(styleFilename)]
+
+
+makePathsBase = (projectConfig) ->
+  {basePath} = projectConfig
+
+  pathConfigs =
+    resolve:
+      root: [
+        path.resolve(basePath)
+        path.resolve(basePath, 'src')
+        path.resolve(basePath, 'api')
+      ]
+      alias:
+        'shared': path.resolve('shared')
+
+  pathConfigs
+
+makeDebugBase = (projectConfig) ->
+  # omits minification and using production build of react.
+  debugBase =
+    output: makeBuildOutputs(projectConfig)
+    module:
+      loaders: BASE_BUILD_LOADERS
+    plugins: makeBuildPlugins(projectConfig)
+
+makeProductionBase = (projectConfig) ->
+
+  output = makeBuildOutputs(projectConfig)
+
+  # rename to minified
+  output.filename = '[name].min.js'
+  output.path = "#{projectConfig.basePath}/dist"
+  {styleFilename} = projectConfig
+  styleFilename ?= '[name].min.css'
+
+  productionBase =
+    output: output
+    module:
+      loaders: BASE_BUILD_LOADERS
+    plugins: makeBuildPlugins({styleFilename}).concat([
+      # Minify
+      new webpack.optimize.UglifyJsPlugin(minimize: true)
+
+      # Use the production version of React (no warnings/runtime checks)
+      new webpack.DefinePlugin(
+        'process.env':
+          NODE_ENV: JSON.stringify('production')
+      )
+    ])
+
+makeProductionWithCoverageBase = (projectConfig) ->
+  productionBase = makeProductionBase(projectConfig)
+  postLoaders = [
+    { test: /\.coffee$/, loaders: ["istanbul-instrumenter"] }
+    { test: /\.cjsx$/, loaders: ["istanbul-instrumenter"] }
+  ]
+  mergeWebpackConfigs(productionBase, {postLoaders})
+
+makeDevelopmentBase = (projectConfig) ->
+  host = projectConfig.host or 'localhost'
+  servePath = "http://#{host}:#{projectConfig.devPort}"
+  publicPath = "#{servePath}/dist/"
+  outputPath = "#{projectConfig.basePath}/"
+
+  developmentBase =
+    output:
+      path: 'dist'
+      publicPath: publicPath
+    module:
+      loaders: BASE_DEV_LOADERS
+    plugins: [
+      new webpack.HotModuleReplacementPlugin()
+    ]
+    devServer:
+      contentBase: "#{projectConfig.basePath}/"
+      outputPath: outputPath
+      publicPath: publicPath
+      historyApiFallback: true
+      inline: true
+      port: projectConfig.devPort
+      # It suppress error shown in console, so it has to be set to false.
+      quiet: false
+      progress: true
+      # It suppress everything except error, so it has to be set to false as well
+      # to see success build.
+      noInfo: false
+      host: "#{host}",
+      filename: '[name].js',
+      hot: true
+      stats:
+        # Config for minimal console.log mess.
+        assets: false,
+        colors: true,
+        version: false,
+        hash: false,
+        timings: false,
+        chunks: false,
+        chunkModules: false
+
+  developmentBase
+
+makeEnvironmentBase =
+  debug: makeDebugBase
+  production: makeProductionBase
+  productionWithCoverage: makeProductionWithCoverageBase
+  development: makeDevelopmentBase
+  karma: ->
+    KARMA_BASE_CONFIG
+
+ENVIRONMENTS = _.keys(makeEnvironmentBase)
+
+getEnvironmentName = (environmentName) ->
+  if _.includes(ENVIRONMENTS, environmentName)
+    environmentName
+  else
+    'development'
+
+makeBaseForEnvironment = (environmentName) ->
+  environmentName = getEnvironmentName(environmentName)
+  makeEnvironmentBase[environmentName]
+
+ENVIRONMENT_ALIASES =
+  productionWithCoverage: 'production'
+
+module.exports =
+  mergeWebpackConfigs: mergeWebpackConfigs
+  BASE_CONFIG: BASE_CONFIG
+  loadProjectBaseConfig: loadProjectBaseConfig
+  makePathsBase: makePathsBase
+  makeBaseForEnvironment: makeBaseForEnvironment
+  getEnvironmentName: getEnvironmentName
+  ENVIRONMENT_ALIASES: ENVIRONMENT_ALIASES
diff --git a/configs/webpack/makeConfig.coffee b/configs/webpack/makeConfig.coffee
new file mode 100644
index 0000000000..ec7677dd7b
--- /dev/null
+++ b/configs/webpack/makeConfig.coffee
@@ -0,0 +1,50 @@
+{
+  BASE_CONFIG,
+  loadProjectBaseConfig,
+  mergeWebpackConfigs,
+  makePathsBase,
+  makeBaseForEnvironment,
+  getEnvironmentName,
+  ENVIRONMENT_ALIASES
+} = require './base'
+
+conditionalRequire = (path) ->
+  try
+    require path
+  catch e
+    {}
+
+makeConfig = (projectName, environmentName) ->
+  environmentName = getEnvironmentName(environmentName)
+  environmentFilename = if ENVIRONMENT_ALIASES[environmentName]
+    ENVIRONMENT_ALIASES[environmentName]
+  else
+    environmentName
+
+  projectBaseConfig = loadProjectBaseConfig(projectName)
+
+  projectWebpackBaseConfig =
+    conditionalRequire("../../#{projectName}/configs/webpack.base")
+  projectWebpackEnvironmentConfig =
+    conditionalRequire(
+      "../../#{projectName}/configs/webpack.#{environmentFilename}"
+    )
+
+  if environmentName is 'karma'
+    configs = [
+      makePathsBase(projectBaseConfig),
+      makeBaseForEnvironment(environmentName)(projectBaseConfig),
+      projectWebpackEnvironmentConfig
+    ]
+  else
+    configs = [
+      BASE_CONFIG,
+      makePathsBase(projectBaseConfig),
+      makeBaseForEnvironment(environmentName)(projectBaseConfig),
+      projectWebpackBaseConfig,
+      projectWebpackEnvironmentConfig
+    ]
+
+  mergeWebpackConfigs.apply(null, configs)
+
+module.exports = makeConfig
diff --git a/configs/webpack/testing-tutor.config.coffee b/configs/webpack/testing-tutor.config.coffee
new file mode 100644
index 0000000000..03e002e347
--- /dev/null
+++ b/configs/webpack/testing-tutor.config.coffee
@@ -0,0 +1,67 @@
+path = require 'path'
+webpack = require 'webpack'
+ExtractTextPlugin = require 'extract-text-webpack-plugin'
+
+DEV_LOADERS = ['react-hot', 'webpack-module-hot-accept']
+
+module.exports =
+  devtool: 'eval-source-map'
+  resolve:
+    root: [
+      path.resolve(__dirname, '../../tutor')
+      path.resolve(__dirname, '../../tutor/src')
+    ]
+    extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+  entry:
+    tutor: [
+      'index.coffee',
+      'resources/styles/tutor.less'
+    ]
+    qa: [
+      'src/qa.coffee'
+    ]
+  output:
+    path: 'dist'
+    publicPath: 'http://localhost:8000/dist/'
+    filename: '[name].js'
+
+  module:
+    loaders:   [
+      { test: /\.coffee$/, loaders: DEV_LOADERS.concat('coffee-loader')}
+      { test: /\.cjsx$/,   loaders: DEV_LOADERS.concat('coffee-jsx-loader')}
+      { test: /\.svg/,     loader: 'svg-url-loader'}
+      { test: /\.(png|jpg)/, loader: 'file-loader?name=[name].[ext]'}
+      { test: /\.json$/,   loader: 'json-loader' }
+      {
+        test: /\.(woff|woff2|eot|ttf)/
+        loader: "url-loader?limit=30000&name=[name]-[hash].[ext]"
+      }
+      {
+        test: /\.less$/,   loaders: DEV_LOADERS.concat(
+          'style-loader', 'css-loader', 'less-loader'
+        ) }
+    ]
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
+
+  devServer:
+    port: 8000
+    historyApiFallback: true
+    # It suppress error shown in console, so it has to be set to false.
+    quiet: false
+    progress: true
+    # It suppress everything except error, so it has to be set to false as well
+    # to see success build.
+    noInfo: false
+    filename: '[name].js',
+    stats:
+      # Config for minimal console.log mess.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
diff --git a/exercises/.gitignore b/exercises/.gitignore
new file mode 100644
index 0000000000..147c2a8cfa
--- /dev/null
+++ b/exercises/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+/bower_components
+/.build
+/.tmp
+/dist
diff --git a/exercises/.travis.yml b/exercises/.travis.yml
new file mode 100644
index 0000000000..e6033f7d15
--- /dev/null
+++ b/exercises/.travis.yml
@@ -0,0 +1,7 @@
+# `sudo:false` for faster builds.
+sudo: false
+language: node_js
+node_js:
+  - "0.10"
+before_install:
+  - npm install -g gulp bower
diff --git a/exercises/Gulpfile.coffee b/exercises/Gulpfile.coffee
new file mode 100644
index 0000000000..fa9acc6a79
--- /dev/null
+++ b/exercises/Gulpfile.coffee
@@ -0,0 +1,129 @@
+_ = require 'underscore'
+coffeelint      = require 'gulp-coffeelint'
+del             = require 'del'
+env             = require 'gulp-env'
+gulp            = require 'gulp'
+gutil           = require 'gulp-util'
+gzip            = require 'gulp-gzip'
+karma           = require 'karma'
+rev             = require 'gulp-rev'
+tar             = require 'gulp-tar'
+watch           = require 'gulp-watch'
+webpack         = require 'webpack'
+webpackServer   = require 'webpack-dev-server'
+WPExtractText   = require 'extract-text-webpack-plugin'
+
+TestRunner      = require './test/config/test-runner'
+
+KARMA_CONFIG =
+  configFile: __dirname + '/test/config/karma.config.coffee'
+  singleRun: true
+
+KARMA_COVERAGE_CONFIG =
+  configFile: __dirname + '/test/config/karma-coverage.config.coffee'
+  singleRun: true
+
+DIST_DIR = './dist'
+
+# -----------------------------------------------------------------------
+#  Build Javascript and Styles using webpack
+# -----------------------------------------------------------------------
+gulp.task '_cleanDist', (done) ->
+  del(['./dist/*'], done)
+
+gulp.task '_build', ['_cleanDist'], (done) ->
+  env(vars:{ NODE_ENV: 'production' })
+  webpackConfig = require './webpack.config'
+  config = _.extend({}, webpackConfig, {
+    plugins: [
+      # Use the production version of React (no warnings/runtime checks)
+      new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } })
+      new WPExtractText("exercises.min.css")
+      new webpack.optimize.UglifyJsPlugin({minimize: true})
+    ]
+  })
+  config.output.filename = 'exercises.min.js'
+  webpack(config, (err, stats) ->
+    throw new gutil.PluginError("webpack", err) if err
+    gutil.log("[webpack]", stats.toString({
+      # output options
+    }))
+    done()
+  )
+
+gulp.task '_tagRev', ['_build'], ->
+  gulp.src("#{DIST_DIR}/*.min.*")
+    .pipe(rev())
+    .pipe(gulp.dest(DIST_DIR))
+    .pipe(rev.manifest())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Production
+# -----------------------------------------------------------------------
+
+gulp.task '_archive', ['_tagRev'], ->
+  gulp.src(["#{DIST_DIR}/*"], base: DIST_DIR)
+    .pipe(tar('archive.tar'))
+    .pipe(gzip())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Development
+# -----------------------------------------------------------------------
+gulp.task '_webserver', ->
+  env(vars:{ NODE_ENV: 'development' })
+  webpackConfig = require './webpack.config'
+  config = _.extend( {}, webpackConfig)
+  config.entry.exercises.unshift(
+    './node_modules/webpack-dev-server/client/index.js?http://localhost:8001'
+    'webpack/hot/dev-server'
+  )
+  config.plugins.push( new webpack.HotModuleReplacementPlugin() )
+  for loader in config.module.loaders when _.isArray(loader.loaders)
+    loader.loaders.unshift("react-hot", "webpack-module-hot-accept")
+  server = new webpackServer(webpack(config), config.devServer)
+  server.listen(webpackConfig.devServer.port, '0.0.0.0', (err) ->
+    throw new gutil.PluginError("webpack-dev-server", err) if err
+  )
+
+# -----------------------------------------------------------------------
+#  Public Tasks
+# -----------------------------------------------------------------------
+#
+# External tasks called by various people (devs, testers, Travis, production)
+#
+# TODO: Add this to webpack
+gulp.task 'lint', ->
+  gulp.src(['./src/**/*.{cjsx,coffee}', './*.coffee', './test/**/*.{cjsx,coffee}'])
+  .pipe(coffeelint())
+  # Run through both reporters so lint failures are visible and Travis will error
+  .pipe(coffeelint.reporter())
+  .pipe(coffeelint.reporter('fail'))
+
+gulp.task 'prod', ['_archive']
+
+gulp.task 'serve', ['_webserver']
+
+gulp.task 'test', ['lint'], (done) ->
+  server = new karma.Server(KARMA_CONFIG)
+  server.start()
+
+gulp.task 'coverage', ->
+  server = new karma.Server(KARMA_COVERAGE_CONFIG)
+  server.start()
+
+gulp.task 'watch-lint', ->
+  gulp.watch(['./src/**/*.{cjsx,coffee}', './*.coffee', './test/**/*.{cjsx,coffee}'], ['lint'])
+
+TestRunner = require './test/config/test-runner'
+
+gulp.task 'tdd', ['_cleanDist', '_webserver'], ->
+  runner = new TestRunner()
+  watch('{src,test}/**/*', (change) ->
+    runner.onFileChange(change) unless change.unlink
+  )
+
+# clean out the dist directory before running since otherwise stale files might be served from there.
+# The _webserver task builds and serves from memory with a fallback to files in dist
+gulp.task 'dev', ['_cleanDist', '_webserver', 'watch-lint']
diff --git a/exercises/README.md b/exercises/README.md
new file mode 100644
index 0000000000..953a328d89
--- /dev/null
+++ b/exercises/README.md
@@ -0,0 +1,27 @@
+# exercises-js [![Build Status](https://travis-ci.org/openstax/exercises-js.svg?branch=master)](https://travis-ci.org/openstax/exercises-js) [![devDependency Status](https://david-dm.org/openstax/exercises-js/dev-status.svg)](https://david-dm.org/openstax/exercises-js#info=devDependencies)
+
+# Development Instructions
+
+```sh
+npm install -g gulp
+npm install
+bower install
+```
+
+To build a dist file:
+
+```sh
+gulp dist
+```
+
+To run tests:
+
+```sh
+npm test  # Or gulp test
+```
+
+To continuously run tests:
+
+```sh
+gulp tdd
+```
diff --git a/exercises/api/exercises/1.json b/exercises/api/exercises/1.json
new file mode 100644
index 0000000000..2f809983f5
--- /dev/null
+++ b/exercises/api/exercises/1.json
@@ -0,0 +1,130 @@
+{
+    "attachments": [
+        {
+            "id": 26,
+            "asset": {
+                "url": "\/attachments\/ebb81bc8b216bac6468e2c91f24a8e1600c63e1032a40b4931e57a46d39b739a.png",
+                "large": {
+                    "url": "\/attachments\/large_ebb81bc8b216bac6468e2c91f24a8e1600c63e1032a40b4931e57a46d39b739a.png"
+                },
+                "medium": {
+                    "url": "\/attachments\/medium_ebb81bc8b216bac6468e2c91f24a8e1600c63e1032a40b4931e57a46d39b739a.png"
+                },
+                "small": {
+                    "url": "\/attachments\/small_ebb81bc8b216bac6468e2c91f24a8e1600c63e1032a40b4931e57a46d39b739a.png"
+                }
+            }
+        },
+        {
+            "id": 31,
+            "asset": {
+                "url": "\/attachments\/f2b3f30f6bbe0cdf68aaa9c6cefeddcbe9a8078edfa28952fbb155bbeac13e34.png",
+                "large": {
+                    "url": "\/attachments\/large_f2b3f30f6bbe0cdf68aaa9c6cefeddcbe9a8078edfa28952fbb155bbeac13e34.png"
+                },
+                "medium": {
+                    "url": "\/attachments\/medium_f2b3f30f6bbe0cdf68aaa9c6cefeddcbe9a8078edfa28952fbb155bbeac13e34.png"
+                },
+                "small": {
+                    "url": "\/attachments\/small_f2b3f30f6bbe0cdf68aaa9c6cefeddcbe9a8078edfa28952fbb155bbeac13e34.png"
+                }
+            }
+        }
+    ],
+    "tags": [
+        "book:stax-apbio",
+        "book:stax-micro",
+        "question-type:practice",
+        "format:vocabulary",
+        "filter-type:vocabulary",
+        "cnx-module:71c7c9fc-57fd-418b-ab5b-19eeda1cf3b1",
+        "cnx-feature:71c7c9fc-57fd-418b-ab5b-19eeda1cf3b1#ab",
+        "time:medium",
+        "blooms:2",
+        "dok:2",
+        "exid:stax-micro:5558",
+        "exid:stax-apbio:123",
+        "lo:99-33-9",
+        "lo:22-22-4",
+        "filter-type:ap-test-prep"
+    ],
+    "uid": "1@2",
+    "number": 1,
+    "version": 2,
+    "editors": [],
+    "authors": [
+        {
+            "user_id": 3
+        }
+    ],
+    "copyright_holders": [],
+    "derived_from": [],
+    "title": "Et eum eveniet",
+    "stimulus_html": "Voluptatem rem quas. Modi reprehenderit qui deleniti sit est. Consequatur inventore quisquam. Voluptas nesciunt dicta nam voluptates consequuntur. Quo quia enim magnam fugiat sunt aut qui.",
+    "questions": [
+        {
+            "id": 52,
+            "is_answer_order_important": true,
+            "stimulus_html": "Animi harum omnis mollitia cumque expedita ducimus temporibus. Ipsum recusandae minus reiciendis est consequatur occaecati quo. Incidunt adipisci vitae autem tempore a sed nobis. Et qui dolores distinctio itaque. Sapiente sequi deleniti.",
+            "stem_html": "Provident magni molestiae rerum accusantium. Nisi quam laboriosam sapiente. Autem alias est voluptatem qui et incidunt qui. Quia rerum nesciunt explicabo voluptas non molestias. Id ipsa sint et qui autem.",
+            "answers": [
+                {
+                    "id": 107,
+                    "content_html": "Sit non et dolores. Ea beatae saepe. Fuga est facilis totam harum aut. Nostrum cumque illum dolorem est laborum.",
+                    "correctness": "0.0",
+                    "feedback_html": "feedback1"
+                },
+                {
+                    "id": 108,
+                    "content_html": "Vero nostrum quae sint iste. Iusto quis atque ipsam commodi. Quia occaecati quis architecto.",
+                    "correctness": "1.0",
+                    "feedback_html": "feedback2"
+                },
+                {
+                    "id": 109,
+                    "content_html": "Dolorem libero quidem. Rerum dolorem eum provident sint. Atque qui dolores quis in sequi. Omnis debitis aliquid sint voluptatem vel doloribus numquam. Et occaecati quo.",
+                    "correctness": "0.0",
+                    "feedback_html": "feedback3"
+                }
+            ],
+            "collaborator_solutions": [
+                {
+                    "attachments": [],
+                    "solution_type": "detailed",
+                    "content_html": "test detailed solutione"
+                }
+            ],
+            "community_solutions": [],
+            "hints": [],
+            "formats": [
+                "free-response"
+            ],
+            "combo_choices": []
+        },
+        {
+            "id": 53,
+            "is_answer_order_important": false,
+            "stimulus_html": "",
+            "stem_html": "A test second question stem",
+            "answers": [
+                {
+                    "id": 110,
+                    "content_html": "q1 content",
+                    "correctness": "0.0",
+                    "feedback_html": "feedback 2-1"
+                }
+            ],
+            "collaborator_solutions": [
+                {
+                    "attachments": [],
+                    "solution_type": "detailed",
+                    "content_html": "detailed sol"
+                }
+            ],
+            "community_solutions": [],
+            "hints": [],
+            "formats": [],
+            "combo_choices": []
+        }
+    ]
+}
diff --git a/exercises/api/exercises/1@draft.json b/exercises/api/exercises/1@draft.json
new file mode 100644
index 0000000000..4361375df0
--- /dev/null
+++ b/exercises/api/exercises/1@draft.json
@@ -0,0 +1,49 @@
+{
+    "uid": "1@1",
+    "number": 1541,
+    "version": 2,
+    "editors": [],
+    "authors": [{
+        "user_id": 1,
+        "name": "OpenStax"
+    }],
+    "copyright_holders": [{
+        "user_id": 2,
+        "name": "Rice University"
+    }],
+    "derived_from": [],
+    "attachments": [{
+        "asset": {
+            "url": "https://s3-us-west-2.amazonaws.com/openstax-assets/GjvOxyz198x-qa/exercises/attachments/3e543cffdf297fab85c482b9b1a8cbb09010c165a0ba7996368a21ff3ea86bf3.png",
+            "large": {
+                "url": "https://s3-us-west-2.amazonaws.com/openstax-assets/GjvOxyz198x-qa/exercises/attachments/large_3e543cffdf297fab85c482b9b1a8cbb09010c165a0ba7996368a21ff3ea86bf3.png"
+            },
+            "medium": {
+                "url": "https://s3-us-west-2.amazonaws.com/openstax-assets/GjvOxyz198x-qa/exercises/attachments/medium_3e543cffdf297fab85c482b9b1a8cbb09010c165a0ba7996368a21ff3ea86bf3.png"
+            },
+            "small": {
+                "url": "https://s3-us-west-2.amazonaws.com/openstax-assets/GjvOxyz198x-qa/exercises/attachments/small_3e543cffdf297fab85c482b9b1a8cbb09010c165a0ba7996368a21ff3ea86bf3.png"
+            }
+        }
+    }],
+    "tags": ["apbio", "dok3", "display-free-response", "display-rec-sensitive", "ost-chapter-review", "review", "time-short", "blooms-2", "tutor-only", "apbio-ch19", "apbio-ch19-s02", "apbio-ch19-s02-lo01", "apbio-ch19-ot027"],
+    "stimulus_html": "",
+    "questions": [{
+        "id": 10033,
+        "stimulus_html": "",
+        "stem_html": "<p><img src=\"https://s3-us-west-2.amazonaws.com/openstax-assets/GjvOxyz198x-qa/exercises/attachments/large_3e543cffdf297fab85c482b9b1a8cbb09010c165a0ba7996368a21ff3ea86bf3.png\" alt=\"alt text\"></p>\n\n<p>The population of a species shows changes as illustrated. Two possible future outcomes for the population are also shown. Which of the following can be concluded about this population from the illustration?</p>\n\n<ol>\n  <li>Gene flow in this population has changed the allele frequencies in this population.</li>\n  <li>Natural selection has selected against individuals that are not fit, and selected for individuals that are more fit.</li>\n  <li>Genetic drift is likely to occur as a result of a bottleneck effect in this population. Genetic structure of the survivors will become the genetic structure of the entire population in outcome 1.</li>\n  <li>Genetic drift is likely to occur as a result of inbreeding depression in this population. Genetic structure of the survivors will become the genetic structure of the entire population in outcome 2.</li>\n</ol>\n",
+        "answers": [{
+            "id": 40509,
+            "content_html": "1",
+            "correctness": "0.0"
+        }, {
+            "id": 40508,
+            "content_html": "2",
+            "correctness": "0.0"
+        }],
+        "solutions": [],
+        "hints": [],
+        "formats": ["free-response", "multiple-choice"],
+        "combo_choices": []
+    }]
+}
diff --git a/exercises/coffeelint.json b/exercises/coffeelint.json
new file mode 100644
index 0000000000..461c0b7c80
--- /dev/null
+++ b/exercises/coffeelint.json
@@ -0,0 +1,49 @@
+{
+  "coffeelint": {
+    "transforms": [
+      "coffee-react-transform"
+    ]
+  },
+  "indentation": {
+    "level": "error",
+    "value": 2
+  },
+  "line_endings": {
+    "value": "unix",
+    "level": "error"
+  },
+  "arrow_spacing": {
+    "level": "error"
+  },
+  "no_empty_functions": {
+    "level": "error"
+  },
+  "no_empty_param_list": {
+    "level": "error"
+  },
+  "no_interpolation_in_single_quotes": {
+    "level": "error"
+  },
+  "no_throwing_strings": {
+    "level": "error"
+  },
+  "no_unnecessary_double_quotes": {
+    "level": "ignore"
+  },
+  "no_unnecessary_fat_arrows": {
+    "level": "error"
+  },
+  "prefer_english_operator": {
+    "level": "error"
+  },
+  "space_operators": {
+    "level": "error"
+  },
+  "spacing_after_comma": {
+    "level": "error"
+  },
+  "max_line_length": {
+    "value": 135,
+    "level": "error"
+  }
+}
diff --git a/exercises/configs/base.coffee b/exercises/configs/base.coffee
new file mode 100644
index 0000000000..8f56e21f9e
--- /dev/null
+++ b/exercises/configs/base.coffee
@@ -0,0 +1,3 @@
+module.exports =
+  devPort: '8001'
+  styleFilename: 'exercises.css'
diff --git a/exercises/configs/webpack.base.coffee b/exercises/configs/webpack.base.coffee
new file mode 100644
index 0000000000..24388bc794
--- /dev/null
+++ b/exercises/configs/webpack.base.coffee
@@ -0,0 +1,6 @@
+module.exports =
+  entry:
+    exercises: [
+      'src/index.coffee',
+      'resources/styles/app.less'
+    ]
diff --git a/exercises/index.html b/exercises/index.html
new file mode 100644
index 0000000000..68be0eff7b
--- /dev/null
+++ b/exercises/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./dist/exercises.css"/>
+    <script src="//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&amp;delayStartupUntil=configured" async=""></script>
+  </head>
+  <body>
+    <div id="exercise"></div>
+    <script src="./dist/exercises.js"></script>
+  </body>
+</html>
diff --git a/exercises/index.js b/exercises/index.js
new file mode 100644
index 0000000000..614250fbb7
--- /dev/null
+++ b/exercises/index.js
@@ -0,0 +1,14 @@
+require('coffee-script/register');
+require('coffee-react/register');
+
+var AnswerActionsStore = require('./src/flux/answer');
+var ExerciseActionsStore = require('./src/flux/exercise');
+var Components = require('./src/components');
+module.exports = {
+  Exercise: Components.Exercise,
+  getQuestionType: Components.getQuestionType,
+  AnswerStore: AnswerActionsStore.AnswerStore,
+  AnswerActions: AnswerActionsStore.AnswerActions,
+  ExerciseStore: ExerciseActionsStore.ExerciseStore,
+  ExerciseActions: ExerciseActionsStore.ExerciseActions,
+};
diff --git a/exercises/node_modules/font-awesome/css/font-awesome.css b/exercises/node_modules/font-awesome/css/font-awesome.css
new file mode 100644
index 0000000000..2dcdc22072
--- /dev/null
+++ b/exercises/node_modules/font-awesome/css/font-awesome.css
@@ -0,0 +1,1801 @@
+/*!
+ *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+.fa-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
+.fa-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.fa-ul > li {
+  position: relative;
+}
+.fa-li {
+  position: absolute;
+  left: -2.14285714em;
+  width: 2.14285714em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.fa-li.fa-lg {
+  left: -1.85714286em;
+}
+.fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  border-radius: .1em;
+}
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+.fa.pull-left {
+  margin-right: .3em;
+}
+.fa.pull-right {
+  margin-left: .3em;
+}
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+.fa-rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.fa-rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.fa-rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+  filter: none;
+}
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-1x {
+  line-height: inherit;
+}
+.fa-stack-2x {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.fa-glass:before {
+  content: "\f000";
+}
+.fa-music:before {
+  content: "\f001";
+}
+.fa-search:before {
+  content: "\f002";
+}
+.fa-envelope-o:before {
+  content: "\f003";
+}
+.fa-heart:before {
+  content: "\f004";
+}
+.fa-star:before {
+  content: "\f005";
+}
+.fa-star-o:before {
+  content: "\f006";
+}
+.fa-user:before {
+  content: "\f007";
+}
+.fa-film:before {
+  content: "\f008";
+}
+.fa-th-large:before {
+  content: "\f009";
+}
+.fa-th:before {
+  content: "\f00a";
+}
+.fa-th-list:before {
+  content: "\f00b";
+}
+.fa-check:before {
+  content: "\f00c";
+}
+.fa-remove:before,
+.fa-close:before,
+.fa-times:before {
+  content: "\f00d";
+}
+.fa-search-plus:before {
+  content: "\f00e";
+}
+.fa-search-minus:before {
+  content: "\f010";
+}
+.fa-power-off:before {
+  content: "\f011";
+}
+.fa-signal:before {
+  content: "\f012";
+}
+.fa-gear:before,
+.fa-cog:before {
+  content: "\f013";
+}
+.fa-trash-o:before {
+  content: "\f014";
+}
+.fa-home:before {
+  content: "\f015";
+}
+.fa-file-o:before {
+  content: "\f016";
+}
+.fa-clock-o:before {
+  content: "\f017";
+}
+.fa-road:before {
+  content: "\f018";
+}
+.fa-download:before {
+  content: "\f019";
+}
+.fa-arrow-circle-o-down:before {
+  content: "\f01a";
+}
+.fa-arrow-circle-o-up:before {
+  content: "\f01b";
+}
+.fa-inbox:before {
+  content: "\f01c";
+}
+.fa-play-circle-o:before {
+  content: "\f01d";
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+  content: "\f01e";
+}
+.fa-refresh:before {
+  content: "\f021";
+}
+.fa-list-alt:before {
+  content: "\f022";
+}
+.fa-lock:before {
+  content: "\f023";
+}
+.fa-flag:before {
+  content: "\f024";
+}
+.fa-headphones:before {
+  content: "\f025";
+}
+.fa-volume-off:before {
+  content: "\f026";
+}
+.fa-volume-down:before {
+  content: "\f027";
+}
+.fa-volume-up:before {
+  content: "\f028";
+}
+.fa-qrcode:before {
+  content: "\f029";
+}
+.fa-barcode:before {
+  content: "\f02a";
+}
+.fa-tag:before {
+  content: "\f02b";
+}
+.fa-tags:before {
+  content: "\f02c";
+}
+.fa-book:before {
+  content: "\f02d";
+}
+.fa-bookmark:before {
+  content: "\f02e";
+}
+.fa-print:before {
+  content: "\f02f";
+}
+.fa-camera:before {
+  content: "\f030";
+}
+.fa-font:before {
+  content: "\f031";
+}
+.fa-bold:before {
+  content: "\f032";
+}
+.fa-italic:before {
+  content: "\f033";
+}
+.fa-text-height:before {
+  content: "\f034";
+}
+.fa-text-width:before {
+  content: "\f035";
+}
+.fa-align-left:before {
+  content: "\f036";
+}
+.fa-align-center:before {
+  content: "\f037";
+}
+.fa-align-right:before {
+  content: "\f038";
+}
+.fa-align-justify:before {
+  content: "\f039";
+}
+.fa-list:before {
+  content: "\f03a";
+}
+.fa-dedent:before,
+.fa-outdent:before {
+  content: "\f03b";
+}
+.fa-indent:before {
+  content: "\f03c";
+}
+.fa-video-camera:before {
+  content: "\f03d";
+}
+.fa-photo:before,
+.fa-image:before,
+.fa-picture-o:before {
+  content: "\f03e";
+}
+.fa-pencil:before {
+  content: "\f040";
+}
+.fa-map-marker:before {
+  content: "\f041";
+}
+.fa-adjust:before {
+  content: "\f042";
+}
+.fa-tint:before {
+  content: "\f043";
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+  content: "\f044";
+}
+.fa-share-square-o:before {
+  content: "\f045";
+}
+.fa-check-square-o:before {
+  content: "\f046";
+}
+.fa-arrows:before {
+  content: "\f047";
+}
+.fa-step-backward:before {
+  content: "\f048";
+}
+.fa-fast-backward:before {
+  content: "\f049";
+}
+.fa-backward:before {
+  content: "\f04a";
+}
+.fa-play:before {
+  content: "\f04b";
+}
+.fa-pause:before {
+  content: "\f04c";
+}
+.fa-stop:before {
+  content: "\f04d";
+}
+.fa-forward:before {
+  content: "\f04e";
+}
+.fa-fast-forward:before {
+  content: "\f050";
+}
+.fa-step-forward:before {
+  content: "\f051";
+}
+.fa-eject:before {
+  content: "\f052";
+}
+.fa-chevron-left:before {
+  content: "\f053";
+}
+.fa-chevron-right:before {
+  content: "\f054";
+}
+.fa-plus-circle:before {
+  content: "\f055";
+}
+.fa-minus-circle:before {
+  content: "\f056";
+}
+.fa-times-circle:before {
+  content: "\f057";
+}
+.fa-check-circle:before {
+  content: "\f058";
+}
+.fa-question-circle:before {
+  content: "\f059";
+}
+.fa-info-circle:before {
+  content: "\f05a";
+}
+.fa-crosshairs:before {
+  content: "\f05b";
+}
+.fa-times-circle-o:before {
+  content: "\f05c";
+}
+.fa-check-circle-o:before {
+  content: "\f05d";
+}
+.fa-ban:before {
+  content: "\f05e";
+}
+.fa-arrow-left:before {
+  content: "\f060";
+}
+.fa-arrow-right:before {
+  content: "\f061";
+}
+.fa-arrow-up:before {
+  content: "\f062";
+}
+.fa-arrow-down:before {
+  content: "\f063";
+}
+.fa-mail-forward:before,
+.fa-share:before {
+  content: "\f064";
+}
+.fa-expand:before {
+  content: "\f065";
+}
+.fa-compress:before {
+  content: "\f066";
+}
+.fa-plus:before {
+  content: "\f067";
+}
+.fa-minus:before {
+  content: "\f068";
+}
+.fa-asterisk:before {
+  content: "\f069";
+}
+.fa-exclamation-circle:before {
+  content: "\f06a";
+}
+.fa-gift:before {
+  content: "\f06b";
+}
+.fa-leaf:before {
+  content: "\f06c";
+}
+.fa-fire:before {
+  content: "\f06d";
+}
+.fa-eye:before {
+  content: "\f06e";
+}
+.fa-eye-slash:before {
+  content: "\f070";
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+  content: "\f071";
+}
+.fa-plane:before {
+  content: "\f072";
+}
+.fa-calendar:before {
+  content: "\f073";
+}
+.fa-random:before {
+  content: "\f074";
+}
+.fa-comment:before {
+  content: "\f075";
+}
+.fa-magnet:before {
+  content: "\f076";
+}
+.fa-chevron-up:before {
+  content: "\f077";
+}
+.fa-chevron-down:before {
+  content: "\f078";
+}
+.fa-retweet:before {
+  content: "\f079";
+}
+.fa-shopping-cart:before {
+  content: "\f07a";
+}
+.fa-folder:before {
+  content: "\f07b";
+}
+.fa-folder-open:before {
+  content: "\f07c";
+}
+.fa-arrows-v:before {
+  content: "\f07d";
+}
+.fa-arrows-h:before {
+  content: "\f07e";
+}
+.fa-bar-chart-o:before,
+.fa-bar-chart:before {
+  content: "\f080";
+}
+.fa-twitter-square:before {
+  content: "\f081";
+}
+.fa-facebook-square:before {
+  content: "\f082";
+}
+.fa-camera-retro:before {
+  content: "\f083";
+}
+.fa-key:before {
+  content: "\f084";
+}
+.fa-gears:before,
+.fa-cogs:before {
+  content: "\f085";
+}
+.fa-comments:before {
+  content: "\f086";
+}
+.fa-thumbs-o-up:before {
+  content: "\f087";
+}
+.fa-thumbs-o-down:before {
+  content: "\f088";
+}
+.fa-star-half:before {
+  content: "\f089";
+}
+.fa-heart-o:before {
+  content: "\f08a";
+}
+.fa-sign-out:before {
+  content: "\f08b";
+}
+.fa-linkedin-square:before {
+  content: "\f08c";
+}
+.fa-thumb-tack:before {
+  content: "\f08d";
+}
+.fa-external-link:before {
+  content: "\f08e";
+}
+.fa-sign-in:before {
+  content: "\f090";
+}
+.fa-trophy:before {
+  content: "\f091";
+}
+.fa-github-square:before {
+  content: "\f092";
+}
+.fa-upload:before {
+  content: "\f093";
+}
+.fa-lemon-o:before {
+  content: "\f094";
+}
+.fa-phone:before {
+  content: "\f095";
+}
+.fa-square-o:before {
+  content: "\f096";
+}
+.fa-bookmark-o:before {
+  content: "\f097";
+}
+.fa-phone-square:before {
+  content: "\f098";
+}
+.fa-twitter:before {
+  content: "\f099";
+}
+.fa-facebook-f:before,
+.fa-facebook:before {
+  content: "\f09a";
+}
+.fa-github:before {
+  content: "\f09b";
+}
+.fa-unlock:before {
+  content: "\f09c";
+}
+.fa-credit-card:before {
+  content: "\f09d";
+}
+.fa-rss:before {
+  content: "\f09e";
+}
+.fa-hdd-o:before {
+  content: "\f0a0";
+}
+.fa-bullhorn:before {
+  content: "\f0a1";
+}
+.fa-bell:before {
+  content: "\f0f3";
+}
+.fa-certificate:before {
+  content: "\f0a3";
+}
+.fa-hand-o-right:before {
+  content: "\f0a4";
+}
+.fa-hand-o-left:before {
+  content: "\f0a5";
+}
+.fa-hand-o-up:before {
+  content: "\f0a6";
+}
+.fa-hand-o-down:before {
+  content: "\f0a7";
+}
+.fa-arrow-circle-left:before {
+  content: "\f0a8";
+}
+.fa-arrow-circle-right:before {
+  content: "\f0a9";
+}
+.fa-arrow-circle-up:before {
+  content: "\f0aa";
+}
+.fa-arrow-circle-down:before {
+  content: "\f0ab";
+}
+.fa-globe:before {
+  content: "\f0ac";
+}
+.fa-wrench:before {
+  content: "\f0ad";
+}
+.fa-tasks:before {
+  content: "\f0ae";
+}
+.fa-filter:before {
+  content: "\f0b0";
+}
+.fa-briefcase:before {
+  content: "\f0b1";
+}
+.fa-arrows-alt:before {
+  content: "\f0b2";
+}
+.fa-group:before,
+.fa-users:before {
+  content: "\f0c0";
+}
+.fa-chain:before,
+.fa-link:before {
+  content: "\f0c1";
+}
+.fa-cloud:before {
+  content: "\f0c2";
+}
+.fa-flask:before {
+  content: "\f0c3";
+}
+.fa-cut:before,
+.fa-scissors:before {
+  content: "\f0c4";
+}
+.fa-copy:before,
+.fa-files-o:before {
+  content: "\f0c5";
+}
+.fa-paperclip:before {
+  content: "\f0c6";
+}
+.fa-save:before,
+.fa-floppy-o:before {
+  content: "\f0c7";
+}
+.fa-square:before {
+  content: "\f0c8";
+}
+.fa-navicon:before,
+.fa-reorder:before,
+.fa-bars:before {
+  content: "\f0c9";
+}
+.fa-list-ul:before {
+  content: "\f0ca";
+}
+.fa-list-ol:before {
+  content: "\f0cb";
+}
+.fa-strikethrough:before {
+  content: "\f0cc";
+}
+.fa-underline:before {
+  content: "\f0cd";
+}
+.fa-table:before {
+  content: "\f0ce";
+}
+.fa-magic:before {
+  content: "\f0d0";
+}
+.fa-truck:before {
+  content: "\f0d1";
+}
+.fa-pinterest:before {
+  content: "\f0d2";
+}
+.fa-pinterest-square:before {
+  content: "\f0d3";
+}
+.fa-google-plus-square:before {
+  content: "\f0d4";
+}
+.fa-google-plus:before {
+  content: "\f0d5";
+}
+.fa-money:before {
+  content: "\f0d6";
+}
+.fa-caret-down:before {
+  content: "\f0d7";
+}
+.fa-caret-up:before {
+  content: "\f0d8";
+}
+.fa-caret-left:before {
+  content: "\f0d9";
+}
+.fa-caret-right:before {
+  content: "\f0da";
+}
+.fa-columns:before {
+  content: "\f0db";
+}
+.fa-unsorted:before,
+.fa-sort:before {
+  content: "\f0dc";
+}
+.fa-sort-down:before,
+.fa-sort-desc:before {
+  content: "\f0dd";
+}
+.fa-sort-up:before,
+.fa-sort-asc:before {
+  content: "\f0de";
+}
+.fa-envelope:before {
+  content: "\f0e0";
+}
+.fa-linkedin:before {
+  content: "\f0e1";
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+  content: "\f0e2";
+}
+.fa-legal:before,
+.fa-gavel:before {
+  content: "\f0e3";
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+  content: "\f0e4";
+}
+.fa-comment-o:before {
+  content: "\f0e5";
+}
+.fa-comments-o:before {
+  content: "\f0e6";
+}
+.fa-flash:before,
+.fa-bolt:before {
+  content: "\f0e7";
+}
+.fa-sitemap:before {
+  content: "\f0e8";
+}
+.fa-umbrella:before {
+  content: "\f0e9";
+}
+.fa-paste:before,
+.fa-clipboard:before {
+  content: "\f0ea";
+}
+.fa-lightbulb-o:before {
+  content: "\f0eb";
+}
+.fa-exchange:before {
+  content: "\f0ec";
+}
+.fa-cloud-download:before {
+  content: "\f0ed";
+}
+.fa-cloud-upload:before {
+  content: "\f0ee";
+}
+.fa-user-md:before {
+  content: "\f0f0";
+}
+.fa-stethoscope:before {
+  content: "\f0f1";
+}
+.fa-suitcase:before {
+  content: "\f0f2";
+}
+.fa-bell-o:before {
+  content: "\f0a2";
+}
+.fa-coffee:before {
+  content: "\f0f4";
+}
+.fa-cutlery:before {
+  content: "\f0f5";
+}
+.fa-file-text-o:before {
+  content: "\f0f6";
+}
+.fa-building-o:before {
+  content: "\f0f7";
+}
+.fa-hospital-o:before {
+  content: "\f0f8";
+}
+.fa-ambulance:before {
+  content: "\f0f9";
+}
+.fa-medkit:before {
+  content: "\f0fa";
+}
+.fa-fighter-jet:before {
+  content: "\f0fb";
+}
+.fa-beer:before {
+  content: "\f0fc";
+}
+.fa-h-square:before {
+  content: "\f0fd";
+}
+.fa-plus-square:before {
+  content: "\f0fe";
+}
+.fa-angle-double-left:before {
+  content: "\f100";
+}
+.fa-angle-double-right:before {
+  content: "\f101";
+}
+.fa-angle-double-up:before {
+  content: "\f102";
+}
+.fa-angle-double-down:before {
+  content: "\f103";
+}
+.fa-angle-left:before {
+  content: "\f104";
+}
+.fa-angle-right:before {
+  content: "\f105";
+}
+.fa-angle-up:before {
+  content: "\f106";
+}
+.fa-angle-down:before {
+  content: "\f107";
+}
+.fa-desktop:before {
+  content: "\f108";
+}
+.fa-laptop:before {
+  content: "\f109";
+}
+.fa-tablet:before {
+  content: "\f10a";
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+  content: "\f10b";
+}
+.fa-circle-o:before {
+  content: "\f10c";
+}
+.fa-quote-left:before {
+  content: "\f10d";
+}
+.fa-quote-right:before {
+  content: "\f10e";
+}
+.fa-spinner:before {
+  content: "\f110";
+}
+.fa-circle:before {
+  content: "\f111";
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+  content: "\f112";
+}
+.fa-github-alt:before {
+  content: "\f113";
+}
+.fa-folder-o:before {
+  content: "\f114";
+}
+.fa-folder-open-o:before {
+  content: "\f115";
+}
+.fa-smile-o:before {
+  content: "\f118";
+}
+.fa-frown-o:before {
+  content: "\f119";
+}
+.fa-meh-o:before {
+  content: "\f11a";
+}
+.fa-gamepad:before {
+  content: "\f11b";
+}
+.fa-keyboard-o:before {
+  content: "\f11c";
+}
+.fa-flag-o:before {
+  content: "\f11d";
+}
+.fa-flag-checkered:before {
+  content: "\f11e";
+}
+.fa-terminal:before {
+  content: "\f120";
+}
+.fa-code:before {
+  content: "\f121";
+}
+.fa-mail-reply-all:before,
+.fa-reply-all:before {
+  content: "\f122";
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+  content: "\f123";
+}
+.fa-location-arrow:before {
+  content: "\f124";
+}
+.fa-crop:before {
+  content: "\f125";
+}
+.fa-code-fork:before {
+  content: "\f126";
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+  content: "\f127";
+}
+.fa-question:before {
+  content: "\f128";
+}
+.fa-info:before {
+  content: "\f129";
+}
+.fa-exclamation:before {
+  content: "\f12a";
+}
+.fa-superscript:before {
+  content: "\f12b";
+}
+.fa-subscript:before {
+  content: "\f12c";
+}
+.fa-eraser:before {
+  content: "\f12d";
+}
+.fa-puzzle-piece:before {
+  content: "\f12e";
+}
+.fa-microphone:before {
+  content: "\f130";
+}
+.fa-microphone-slash:before {
+  content: "\f131";
+}
+.fa-shield:before {
+  content: "\f132";
+}
+.fa-calendar-o:before {
+  content: "\f133";
+}
+.fa-fire-extinguisher:before {
+  content: "\f134";
+}
+.fa-rocket:before {
+  content: "\f135";
+}
+.fa-maxcdn:before {
+  content: "\f136";
+}
+.fa-chevron-circle-left:before {
+  content: "\f137";
+}
+.fa-chevron-circle-right:before {
+  content: "\f138";
+}
+.fa-chevron-circle-up:before {
+  content: "\f139";
+}
+.fa-chevron-circle-down:before {
+  content: "\f13a";
+}
+.fa-html5:before {
+  content: "\f13b";
+}
+.fa-css3:before {
+  content: "\f13c";
+}
+.fa-anchor:before {
+  content: "\f13d";
+}
+.fa-unlock-alt:before {
+  content: "\f13e";
+}
+.fa-bullseye:before {
+  content: "\f140";
+}
+.fa-ellipsis-h:before {
+  content: "\f141";
+}
+.fa-ellipsis-v:before {
+  content: "\f142";
+}
+.fa-rss-square:before {
+  content: "\f143";
+}
+.fa-play-circle:before {
+  content: "\f144";
+}
+.fa-ticket:before {
+  content: "\f145";
+}
+.fa-minus-square:before {
+  content: "\f146";
+}
+.fa-minus-square-o:before {
+  content: "\f147";
+}
+.fa-level-up:before {
+  content: "\f148";
+}
+.fa-level-down:before {
+  content: "\f149";
+}
+.fa-check-square:before {
+  content: "\f14a";
+}
+.fa-pencil-square:before {
+  content: "\f14b";
+}
+.fa-external-link-square:before {
+  content: "\f14c";
+}
+.fa-share-square:before {
+  content: "\f14d";
+}
+.fa-compass:before {
+  content: "\f14e";
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+  content: "\f150";
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+  content: "\f151";
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+  content: "\f152";
+}
+.fa-euro:before,
+.fa-eur:before {
+  content: "\f153";
+}
+.fa-gbp:before {
+  content: "\f154";
+}
+.fa-dollar:before,
+.fa-usd:before {
+  content: "\f155";
+}
+.fa-rupee:before,
+.fa-inr:before {
+  content: "\f156";
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+  content: "\f157";
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+  content: "\f158";
+}
+.fa-won:before,
+.fa-krw:before {
+  content: "\f159";
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+  content: "\f15a";
+}
+.fa-file:before {
+  content: "\f15b";
+}
+.fa-file-text:before {
+  content: "\f15c";
+}
+.fa-sort-alpha-asc:before {
+  content: "\f15d";
+}
+.fa-sort-alpha-desc:before {
+  content: "\f15e";
+}
+.fa-sort-amount-asc:before {
+  content: "\f160";
+}
+.fa-sort-amount-desc:before {
+  content: "\f161";
+}
+.fa-sort-numeric-asc:before {
+  content: "\f162";
+}
+.fa-sort-numeric-desc:before {
+  content: "\f163";
+}
+.fa-thumbs-up:before {
+  content: "\f164";
+}
+.fa-thumbs-down:before {
+  content: "\f165";
+}
+.fa-youtube-square:before {
+  content: "\f166";
+}
+.fa-youtube:before {
+  content: "\f167";
+}
+.fa-xing:before {
+  content: "\f168";
+}
+.fa-xing-square:before {
+  content: "\f169";
+}
+.fa-youtube-play:before {
+  content: "\f16a";
+}
+.fa-dropbox:before {
+  content: "\f16b";
+}
+.fa-stack-overflow:before {
+  content: "\f16c";
+}
+.fa-instagram:before {
+  content: "\f16d";
+}
+.fa-flickr:before {
+  content: "\f16e";
+}
+.fa-adn:before {
+  content: "\f170";
+}
+.fa-bitbucket:before {
+  content: "\f171";
+}
+.fa-bitbucket-square:before {
+  content: "\f172";
+}
+.fa-tumblr:before {
+  content: "\f173";
+}
+.fa-tumblr-square:before {
+  content: "\f174";
+}
+.fa-long-arrow-down:before {
+  content: "\f175";
+}
+.fa-long-arrow-up:before {
+  content: "\f176";
+}
+.fa-long-arrow-left:before {
+  content: "\f177";
+}
+.fa-long-arrow-right:before {
+  content: "\f178";
+}
+.fa-apple:before {
+  content: "\f179";
+}
+.fa-windows:before {
+  content: "\f17a";
+}
+.fa-android:before {
+  content: "\f17b";
+}
+.fa-linux:before {
+  content: "\f17c";
+}
+.fa-dribbble:before {
+  content: "\f17d";
+}
+.fa-skype:before {
+  content: "\f17e";
+}
+.fa-foursquare:before {
+  content: "\f180";
+}
+.fa-trello:before {
+  content: "\f181";
+}
+.fa-female:before {
+  content: "\f182";
+}
+.fa-male:before {
+  content: "\f183";
+}
+.fa-gittip:before,
+.fa-gratipay:before {
+  content: "\f184";
+}
+.fa-sun-o:before {
+  content: "\f185";
+}
+.fa-moon-o:before {
+  content: "\f186";
+}
+.fa-archive:before {
+  content: "\f187";
+}
+.fa-bug:before {
+  content: "\f188";
+}
+.fa-vk:before {
+  content: "\f189";
+}
+.fa-weibo:before {
+  content: "\f18a";
+}
+.fa-renren:before {
+  content: "\f18b";
+}
+.fa-pagelines:before {
+  content: "\f18c";
+}
+.fa-stack-exchange:before {
+  content: "\f18d";
+}
+.fa-arrow-circle-o-right:before {
+  content: "\f18e";
+}
+.fa-arrow-circle-o-left:before {
+  content: "\f190";
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+  content: "\f191";
+}
+.fa-dot-circle-o:before {
+  content: "\f192";
+}
+.fa-wheelchair:before {
+  content: "\f193";
+}
+.fa-vimeo-square:before {
+  content: "\f194";
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+  content: "\f195";
+}
+.fa-plus-square-o:before {
+  content: "\f196";
+}
+.fa-space-shuttle:before {
+  content: "\f197";
+}
+.fa-slack:before {
+  content: "\f198";
+}
+.fa-envelope-square:before {
+  content: "\f199";
+}
+.fa-wordpress:before {
+  content: "\f19a";
+}
+.fa-openid:before {
+  content: "\f19b";
+}
+.fa-institution:before,
+.fa-bank:before,
+.fa-university:before {
+  content: "\f19c";
+}
+.fa-mortar-board:before,
+.fa-graduation-cap:before {
+  content: "\f19d";
+}
+.fa-yahoo:before {
+  content: "\f19e";
+}
+.fa-google:before {
+  content: "\f1a0";
+}
+.fa-reddit:before {
+  content: "\f1a1";
+}
+.fa-reddit-square:before {
+  content: "\f1a2";
+}
+.fa-stumbleupon-circle:before {
+  content: "\f1a3";
+}
+.fa-stumbleupon:before {
+  content: "\f1a4";
+}
+.fa-delicious:before {
+  content: "\f1a5";
+}
+.fa-digg:before {
+  content: "\f1a6";
+}
+.fa-pied-piper:before {
+  content: "\f1a7";
+}
+.fa-pied-piper-alt:before {
+  content: "\f1a8";
+}
+.fa-drupal:before {
+  content: "\f1a9";
+}
+.fa-joomla:before {
+  content: "\f1aa";
+}
+.fa-language:before {
+  content: "\f1ab";
+}
+.fa-fax:before {
+  content: "\f1ac";
+}
+.fa-building:before {
+  content: "\f1ad";
+}
+.fa-child:before {
+  content: "\f1ae";
+}
+.fa-paw:before {
+  content: "\f1b0";
+}
+.fa-spoon:before {
+  content: "\f1b1";
+}
+.fa-cube:before {
+  content: "\f1b2";
+}
+.fa-cubes:before {
+  content: "\f1b3";
+}
+.fa-behance:before {
+  content: "\f1b4";
+}
+.fa-behance-square:before {
+  content: "\f1b5";
+}
+.fa-steam:before {
+  content: "\f1b6";
+}
+.fa-steam-square:before {
+  content: "\f1b7";
+}
+.fa-recycle:before {
+  content: "\f1b8";
+}
+.fa-automobile:before,
+.fa-car:before {
+  content: "\f1b9";
+}
+.fa-cab:before,
+.fa-taxi:before {
+  content: "\f1ba";
+}
+.fa-tree:before {
+  content: "\f1bb";
+}
+.fa-spotify:before {
+  content: "\f1bc";
+}
+.fa-deviantart:before {
+  content: "\f1bd";
+}
+.fa-soundcloud:before {
+  content: "\f1be";
+}
+.fa-database:before {
+  content: "\f1c0";
+}
+.fa-file-pdf-o:before {
+  content: "\f1c1";
+}
+.fa-file-word-o:before {
+  content: "\f1c2";
+}
+.fa-file-excel-o:before {
+  content: "\f1c3";
+}
+.fa-file-powerpoint-o:before {
+  content: "\f1c4";
+}
+.fa-file-photo-o:before,
+.fa-file-picture-o:before,
+.fa-file-image-o:before {
+  content: "\f1c5";
+}
+.fa-file-zip-o:before,
+.fa-file-archive-o:before {
+  content: "\f1c6";
+}
+.fa-file-sound-o:before,
+.fa-file-audio-o:before {
+  content: "\f1c7";
+}
+.fa-file-movie-o:before,
+.fa-file-video-o:before {
+  content: "\f1c8";
+}
+.fa-file-code-o:before {
+  content: "\f1c9";
+}
+.fa-vine:before {
+  content: "\f1ca";
+}
+.fa-codepen:before {
+  content: "\f1cb";
+}
+.fa-jsfiddle:before {
+  content: "\f1cc";
+}
+.fa-life-bouy:before,
+.fa-life-buoy:before,
+.fa-life-saver:before,
+.fa-support:before,
+.fa-life-ring:before {
+  content: "\f1cd";
+}
+.fa-circle-o-notch:before {
+  content: "\f1ce";
+}
+.fa-ra:before,
+.fa-rebel:before {
+  content: "\f1d0";
+}
+.fa-ge:before,
+.fa-empire:before {
+  content: "\f1d1";
+}
+.fa-git-square:before {
+  content: "\f1d2";
+}
+.fa-git:before {
+  content: "\f1d3";
+}
+.fa-hacker-news:before {
+  content: "\f1d4";
+}
+.fa-tencent-weibo:before {
+  content: "\f1d5";
+}
+.fa-qq:before {
+  content: "\f1d6";
+}
+.fa-wechat:before,
+.fa-weixin:before {
+  content: "\f1d7";
+}
+.fa-send:before,
+.fa-paper-plane:before {
+  content: "\f1d8";
+}
+.fa-send-o:before,
+.fa-paper-plane-o:before {
+  content: "\f1d9";
+}
+.fa-history:before {
+  content: "\f1da";
+}
+.fa-genderless:before,
+.fa-circle-thin:before {
+  content: "\f1db";
+}
+.fa-header:before {
+  content: "\f1dc";
+}
+.fa-paragraph:before {
+  content: "\f1dd";
+}
+.fa-sliders:before {
+  content: "\f1de";
+}
+.fa-share-alt:before {
+  content: "\f1e0";
+}
+.fa-share-alt-square:before {
+  content: "\f1e1";
+}
+.fa-bomb:before {
+  content: "\f1e2";
+}
+.fa-soccer-ball-o:before,
+.fa-futbol-o:before {
+  content: "\f1e3";
+}
+.fa-tty:before {
+  content: "\f1e4";
+}
+.fa-binoculars:before {
+  content: "\f1e5";
+}
+.fa-plug:before {
+  content: "\f1e6";
+}
+.fa-slideshare:before {
+  content: "\f1e7";
+}
+.fa-twitch:before {
+  content: "\f1e8";
+}
+.fa-yelp:before {
+  content: "\f1e9";
+}
+.fa-newspaper-o:before {
+  content: "\f1ea";
+}
+.fa-wifi:before {
+  content: "\f1eb";
+}
+.fa-calculator:before {
+  content: "\f1ec";
+}
+.fa-paypal:before {
+  content: "\f1ed";
+}
+.fa-google-wallet:before {
+  content: "\f1ee";
+}
+.fa-cc-visa:before {
+  content: "\f1f0";
+}
+.fa-cc-mastercard:before {
+  content: "\f1f1";
+}
+.fa-cc-discover:before {
+  content: "\f1f2";
+}
+.fa-cc-amex:before {
+  content: "\f1f3";
+}
+.fa-cc-paypal:before {
+  content: "\f1f4";
+}
+.fa-cc-stripe:before {
+  content: "\f1f5";
+}
+.fa-bell-slash:before {
+  content: "\f1f6";
+}
+.fa-bell-slash-o:before {
+  content: "\f1f7";
+}
+.fa-trash:before {
+  content: "\f1f8";
+}
+.fa-copyright:before {
+  content: "\f1f9";
+}
+.fa-at:before {
+  content: "\f1fa";
+}
+.fa-eyedropper:before {
+  content: "\f1fb";
+}
+.fa-paint-brush:before {
+  content: "\f1fc";
+}
+.fa-birthday-cake:before {
+  content: "\f1fd";
+}
+.fa-area-chart:before {
+  content: "\f1fe";
+}
+.fa-pie-chart:before {
+  content: "\f200";
+}
+.fa-line-chart:before {
+  content: "\f201";
+}
+.fa-lastfm:before {
+  content: "\f202";
+}
+.fa-lastfm-square:before {
+  content: "\f203";
+}
+.fa-toggle-off:before {
+  content: "\f204";
+}
+.fa-toggle-on:before {
+  content: "\f205";
+}
+.fa-bicycle:before {
+  content: "\f206";
+}
+.fa-bus:before {
+  content: "\f207";
+}
+.fa-ioxhost:before {
+  content: "\f208";
+}
+.fa-angellist:before {
+  content: "\f209";
+}
+.fa-cc:before {
+  content: "\f20a";
+}
+.fa-shekel:before,
+.fa-sheqel:before,
+.fa-ils:before {
+  content: "\f20b";
+}
+.fa-meanpath:before {
+  content: "\f20c";
+}
+.fa-buysellads:before {
+  content: "\f20d";
+}
+.fa-connectdevelop:before {
+  content: "\f20e";
+}
+.fa-dashcube:before {
+  content: "\f210";
+}
+.fa-forumbee:before {
+  content: "\f211";
+}
+.fa-leanpub:before {
+  content: "\f212";
+}
+.fa-sellsy:before {
+  content: "\f213";
+}
+.fa-shirtsinbulk:before {
+  content: "\f214";
+}
+.fa-simplybuilt:before {
+  content: "\f215";
+}
+.fa-skyatlas:before {
+  content: "\f216";
+}
+.fa-cart-plus:before {
+  content: "\f217";
+}
+.fa-cart-arrow-down:before {
+  content: "\f218";
+}
+.fa-diamond:before {
+  content: "\f219";
+}
+.fa-ship:before {
+  content: "\f21a";
+}
+.fa-user-secret:before {
+  content: "\f21b";
+}
+.fa-motorcycle:before {
+  content: "\f21c";
+}
+.fa-street-view:before {
+  content: "\f21d";
+}
+.fa-heartbeat:before {
+  content: "\f21e";
+}
+.fa-venus:before {
+  content: "\f221";
+}
+.fa-mars:before {
+  content: "\f222";
+}
+.fa-mercury:before {
+  content: "\f223";
+}
+.fa-transgender:before {
+  content: "\f224";
+}
+.fa-transgender-alt:before {
+  content: "\f225";
+}
+.fa-venus-double:before {
+  content: "\f226";
+}
+.fa-mars-double:before {
+  content: "\f227";
+}
+.fa-venus-mars:before {
+  content: "\f228";
+}
+.fa-mars-stroke:before {
+  content: "\f229";
+}
+.fa-mars-stroke-v:before {
+  content: "\f22a";
+}
+.fa-mars-stroke-h:before {
+  content: "\f22b";
+}
+.fa-neuter:before {
+  content: "\f22c";
+}
+.fa-facebook-official:before {
+  content: "\f230";
+}
+.fa-pinterest-p:before {
+  content: "\f231";
+}
+.fa-whatsapp:before {
+  content: "\f232";
+}
+.fa-server:before {
+  content: "\f233";
+}
+.fa-user-plus:before {
+  content: "\f234";
+}
+.fa-user-times:before {
+  content: "\f235";
+}
+.fa-hotel:before,
+.fa-bed:before {
+  content: "\f236";
+}
+.fa-viacoin:before {
+  content: "\f237";
+}
+.fa-train:before {
+  content: "\f238";
+}
+.fa-subway:before {
+  content: "\f239";
+}
+.fa-medium:before {
+  content: "\f23a";
+}
diff --git a/exercises/node_modules/font-awesome/fonts/fontawesome-webfont.woff b/exercises/node_modules/font-awesome/fonts/fontawesome-webfont.woff
new file mode 100644
index 0000000000..8b280b98fa
Binary files /dev/null and b/exercises/node_modules/font-awesome/fonts/fontawesome-webfont.woff differ
diff --git a/exercises/package.json b/exercises/package.json
new file mode 100644
index 0000000000..acb0ec4649
--- /dev/null
+++ b/exercises/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "openstax-exercise",
+  "version": "0.0.0",
+  "main": "./index.js",
+  "scripts": {
+    "build-archive": "gulp prod",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "bootstrap": "3.3.2",
+    "bootstrap-material-design": "fezvrasta/bootstrap-material-design#0.3.0",
+    "camelcase": "1.0.2",
+    "classnames": "2.1.3",
+    "es6-promise": "2.3",
+    "flux-react": "2.6.4",
+    "font-awesome": "4.3.0",
+    "history": "^2.1.0",
+    "htmlparser2": "3.8.3",
+    "jquery": "2.1.4",
+    "markdown-it": "4.1.1",
+    "mime-types": "2.1.3",
+    "moment": "2.9.0",
+    "moment-timezone": "0.4.0",
+    "openstax-react-components": "openstax/react-components#a3327fe01b8261024ad353beecb63adb86c8fff7",
+    "pluralize": "1.1.2",
+    "react": "0.13.1",
+    "react-bootstrap": "0.26.2",
+    "react-scroll-components": "0.2.2",
+    "react-widgets": "^2.8",
+    "twix": "0.6.3",
+    "underscore": "1.8.2",
+    "validator": "3.41.2"
+  },
+  "devDependencies": {
+    "blanket": "1.1.7",
+    "chai": "2.1.2",
+    "chai-as-promised": "5.1.0",
+    "chromedriver": "2.16.0",
+    "cjsxify": "0.2.6",
+    "coffee-jsx-loader": "0.1.3",
+    "coffee-loader": "0.7.2",
+    "coffee-react-transform": "3.1.0",
+    "coffee-script": "1.9.1",
+    "coffeelint": "1.11.1",
+    "coffeelint-loader": "0.1.1",
+    "css-loader": "0.16.0",
+    "del": "1.1.1",
+    "extract-text-webpack-plugin": "0.8.2",
+    "file-exists": "0.1.1",
+    "file-loader": "0.8.4",
+    "fixed-data-table": "0.4.1",
+    "gulp": "3.9",
+    "gulp-coffeelint": "0.4.0",
+    "gulp-env": "0.2.0",
+    "gulp-gzip": "1.0.0",
+    "gulp-rev": "3.0.1",
+    "gulp-tar": "1.4.0",
+    "gulp-util": "3.0.6",
+    "gulp-watch": "4.3.5",
+    "istanbul-instrumenter-loader": "0.1.3",
+    "json-loader": "0.5.2",
+    "karma": "0.13",
+    "karma-chai": "0.1.0",
+    "karma-chai-sinon": "0.1.5",
+    "karma-coverage": "0.5.0",
+    "karma-mocha": "0.1.10",
+    "karma-mocha-reporter": "1.0.0",
+    "karma-phantomjs-launcher": "0.2.1",
+    "karma-phantomjs-shim": "1.1.1",
+    "karma-sourcemap-loader": "0.3.5",
+    "karma-webpack": "1.7.0",
+    "less": "2.6.1",
+    "less-loader": "2.2.3",
+    "mocha": "2.2.1",
+    "phantomjs": "1.9.18",
+    "react-hot-loader": "1.3.0",
+    "selenium-webdriver": "2.46.1",
+    "sinon": "1.16.1",
+    "sinon-chai": "2.8.0",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "1.13.0",
+    "webpack-dev-server": "1.14.1",
+    "webpack-module-hot-accept": "1.0.4",
+    "when": "3.7.2"
+  },
+  "config": {
+    "blanket": {
+      "pattern": "src"
+    }
+  }
+}
diff --git a/exercises/resources/styles/app.less b/exercises/resources/styles/app.less
new file mode 100644
index 0000000000..5862b1d970
--- /dev/null
+++ b/exercises/resources/styles/app.less
@@ -0,0 +1,41 @@
+@import './variables/paths';
+
+
+//@import 'katex.css';
+
+@import './vendor-variables';
+
+@import 'variables';
+
+@import (reference) './mixins/generic';
+
+@import '~openstax-react-components/resources/styles/main.less';
+
+@import "@{bootstrap-path}/navs";
+@import "@{bootstrap-path}/navbar";
+@import "@{bootstrap-path}/buttons";
+@import "@{bootstrap-path}/button-groups";
+@import "@{bootstrap-path}/responsive-embed";
+
+@import "@{widgets-path}/variables";
+@import "@{widgets-path}/bootstrap-theme";
+@import "@{widgets-path}/mixins";
+@import "@{widgets-path}/core";
+@import "@{widgets-path}/popup";
+@import "@{widgets-path}/selectlist";
+@import "@{widgets-path}/multiselect";
+
+@import "global/defaults";
+@import "global/widgets";
+@import "./navbar";
+
+@import "./exercises";
+@import "./exercise/preview";
+@import "./vocabulary";
+@import './tags';
+
+.editor-app {
+  padding: 10px;
+  min-height: 100vh;
+
+}
diff --git a/exercises/resources/styles/attachments.less b/exercises/resources/styles/attachments.less
new file mode 100644
index 0000000000..933d566477
--- /dev/null
+++ b/exercises/resources/styles/attachments.less
@@ -0,0 +1,79 @@
+.attachments {
+
+  display: flex;
+  flex-wrap: wrap;
+
+  .attachment {
+
+    min-width: 200px;
+    min-height: 200px;
+    max-width: 400px;
+    flex: 1;
+    border: 1px solid @openstax-neutral;
+    margin: 5px;
+    position: relative;
+
+
+    img {
+      width:100%;
+      height: auto;
+    }
+
+    input.file {
+      width: 0.1px;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    label.selector {
+      &:extend(.btn);
+      &:extend(.btn-default);
+    }
+
+    .controls {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      z-index: 2;
+      > * {
+        margin-left: 0.25rem;
+        box-shadow: 0 8px 6px -6px black;
+      }
+    }
+
+    textarea.copypaste {
+      position: absolute;
+      height: 130px;
+      max-height: 80%;
+      width: ~"calc(100% - 20px)";
+      background: white;
+      left: 10px;
+      bottom: 10px;
+      margin-bottom: 0;
+    }
+
+    .progress {
+      position: absolute;
+      bottom: 0px;
+      left: 5%;
+      width: 90%;
+    }
+
+    .error {
+      background-color: lightyellow;
+      border: 1px solid red;
+      height: 25%;
+      top: 25%;
+      position: absolute;
+      width: 80%;
+      left: 10%;
+      text-align: center;
+      padding-top: 20px;
+      font-size: 1.2rem;
+    }
+
+  }
+}
diff --git a/exercises/resources/styles/card-background.less b/exercises/resources/styles/card-background.less
new file mode 100644
index 0000000000..75e7fefe77
--- /dev/null
+++ b/exercises/resources/styles/card-background.less
@@ -0,0 +1,9 @@
+@import (reference) './mixins/card';
+
+.card.background {
+  .x-card();
+
+  &.mode-view .exercise-background { font-size: 1.5rem; }
+  &.mode-edit .ql-editor { font-size: 1.5rem; }
+
+}
diff --git a/exercises/resources/styles/card-question.less b/exercises/resources/styles/card-question.less
new file mode 100644
index 0000000000..84c3199cba
--- /dev/null
+++ b/exercises/resources/styles/card-question.less
@@ -0,0 +1,154 @@
+@import (reference) './mixins/card';
+
+.card.question {
+  counter-increment: question 1;
+  counter-reset: answer 0;
+
+  .x-card();
+
+  .card-content {
+
+    .answers-table {
+      display: table;
+      border-collapse: collapse;
+
+      border-top: 1px dotted #ccc;
+      margin-top: 1rem;
+
+      .answers-answer {
+        counter-increment: answer 1;
+        display: table-row;
+
+        .answer-letter {
+          display: table-cell;
+          width: 2rem;
+          padding-left: .5rem;
+          &:after { content: counter(answer, lower-latin) ')'; }
+        }
+
+        .answer-content {
+          display: table-cell;
+          padding: .5rem 0;
+          width: 100%;
+          padding-left: 1rem;
+          padding-right: .5rem;
+        }
+      }
+    }
+
+
+
+    // The Row
+    .answers-answer,
+    .answers-add {
+      display: table-row;
+      // transition: background-color .3s ease;
+    }
+    // .answers-answer:hover { background-color: #efefef; }
+    .answer-letter,
+    .answer-actions {
+      display: table-cell;
+      width: 2rem;
+    }
+    .answer-letter { cursor: default; }
+
+  }
+
+
+  &.mode-view,
+  &.mode-preview {
+    &:before {
+      font-size: 3rem;
+      position: absolute;
+      content: counter(question);
+
+      margin-left: 3rem-1rem; // From materialize .card-content (-1rem for double-digit numbers)
+      margin-top: 1.7rem; // From materialize .card-content
+    }
+    .card-content {
+      margin-left: 4rem; // Enough room for double-digit question numbers
+
+      .question-stem {
+        font-size: 1.2rem;
+        margin-top: 1.5rem;
+        min-height: 2rem; // center with the 3rem question number
+      }
+
+      .answers-table .answer-letter {
+        font-weight: bold;
+      }
+    }
+  }
+
+
+  &.mode-edit {
+    .question-toolbar-title:after {
+      content: ' ' counter(question);
+    }
+
+    label { font-size: 1rem; }
+
+    .answers-answer .answer-letter,
+    .answers-add    .answer-letter { color: #ccc; }
+    .answers-answer:not(:last-child) { border-bottom: 1px solid #d0d0d0; }
+    .answer-content-empty { color: #ccc; }
+
+    // Quill injects styles and set height:100% which causes text at the bottom to overflow into nothing
+    .answer-content .ql-container {
+      height: initial;
+      padding: 0;
+    }
+
+    .answers-answer.answer-new {
+      // Show the letter right before you click to add a new answer
+      &:not(:hover) .answer-letter:before { color: rgba(0,0,0,0); }
+      .answer-content { color: #ccc; cursor: pointer; }
+    }
+  }
+
+
+  &.mode-preview {
+    .answer-input-box { display: none; }
+
+    .answer-input-box:checked + label.answers-answer,
+    .answer-input-box:checked + label.answers-answer:hover {
+      background-color: #9e9e9e; // darker than hover
+    }
+
+    .answers-table {
+      width: 100%;
+
+      label.answers-answer {
+        transition: background-color .2s ease-in;
+        &:hover { background-color: #e0e0e0; }
+
+        //Materialize hack
+        color: inherit;
+        font-weight: inherit;
+        font-size: inherit;
+        padding-left: 0;
+        height: inherit;
+        line-height: inherit;
+        //Materialize hack
+        //[type="radio"]:not(:checked) + label:before
+        &:before,
+        &:after { display: none; }
+
+      }
+    }
+  }
+}
+
+// Special-case styling for an exercise with a single question.
+// do not show the question number
+.card-list.has-single-question .card.question {
+  &.mode-view,
+  &.mode-preview {
+    &:before {
+      display: none;
+    }
+    .card-content {
+      margin-left: 0; // No number so no need for the number
+    }
+  }
+}
diff --git a/exercises/resources/styles/exercise-preview.less b/exercises/resources/styles/exercise-preview.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/exercises/resources/styles/exercise-preview.less
@@ -0,0 +1 @@
+
diff --git a/exercises/resources/styles/exercise/preview.less b/exercises/resources/styles/exercise/preview.less
new file mode 100644
index 0000000000..7f9801210b
--- /dev/null
+++ b/exercises/resources/styles/exercise/preview.less
@@ -0,0 +1,9 @@
+
+.exercise-preview {
+  .panel-footer {
+    .exercise-identifier-link span:nth-child(2){
+      color: black;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/exercises/resources/styles/exercises.less b/exercises/resources/styles/exercises.less
new file mode 100644
index 0000000000..5ff0688ff0
--- /dev/null
+++ b/exercises/resources/styles/exercises.less
@@ -0,0 +1,63 @@
+@import "./mixins/editing-panes";
+
+.exercise-navbar-controls {
+
+  .right-side {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .form-group {
+    margin-bottom: 0;
+
+    .mpq-toggle {
+
+      label {
+        width: 180px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        line-height: 14px;
+        justify-content: flex-start;
+        text-align: center;
+        input { margin: 0; }
+      }
+    }
+  }
+}
+
+
+.exercise-editor {
+
+  .editing-panes();
+
+
+  .tab-pane {
+    padding: 20px;
+    background-color: white;
+    border-left: 1px solid @nav-tabs-border-color;
+    border-right: 1px solid @nav-tabs-border-color;
+    border-bottom: 1px solid @nav-tabs-border-color;
+  }
+  .navbar-form {
+    .navbar-btn { margin-top: 0; }
+  }
+
+  .exercise-stimulus {
+    label {
+      display: block;
+    }
+
+    textarea {
+      display: block;
+      margin-bottom: 2rem;
+      width: 100%;
+      height: 8rem;
+    }
+  }
+
+  @import './attachments';
+  @import './question';
+
+}
diff --git a/exercises/resources/styles/global/defaults.less b/exercises/resources/styles/global/defaults.less
new file mode 100644
index 0000000000..a2ea6fce0d
--- /dev/null
+++ b/exercises/resources/styles/global/defaults.less
@@ -0,0 +1,21 @@
+// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+html {
+  font-size: 12px;
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #efefef;
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  cursor: pointer;
+}
diff --git a/exercises/resources/styles/global/font-awesome.less b/exercises/resources/styles/global/font-awesome.less
new file mode 100644
index 0000000000..3015a61354
--- /dev/null
+++ b/exercises/resources/styles/global/font-awesome.less
@@ -0,0 +1,27 @@
+// Import font awesome by individually requiring it's less files
+// This is needed to work around a bug with less variable interpolating url()
+// http://stackoverflow.com/questions/7025031/less-css-url-variable-always-shows-server-base-url-before-variable-output
+@fa-path: '../../../node_modules/font-awesome';
+
+@import "@{fa-path}/less/variables.less";
+@import "@{fa-path}/less/mixins.less";
+// path.less is ommited and our own font-face declaration is used
+// our declaration contains a valid path to the files, and ommits
+// legacy font definitions.
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('./@{fa-path}/fonts/fontawesome-webfont.eot?v=@{fa-version}');
+  src: url('./@{fa-path}/fonts/fontawesome-webfont.woff?v=@{fa-version}'),
+       url('./@{fa-path}/fonts/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@import "@{fa-path}/less/core.less";
+@import "@{fa-path}/less/larger.less";
+@import "@{fa-path}/less/fixed-width.less";
+@import "@{fa-path}/less/list.less";
+@import "@{fa-path}/less/bordered-pulled.less";
+@import "@{fa-path}/less/animated.less";
+@import "@{fa-path}/less/rotated-flipped.less";
+@import "@{fa-path}/less/stacked.less";
+@import "@{fa-path}/less/icons.less";
diff --git a/exercises/resources/styles/global/material.less b/exercises/resources/styles/global/material.less
new file mode 100644
index 0000000000..afb21e9ec9
--- /dev/null
+++ b/exercises/resources/styles/global/material.less
@@ -0,0 +1,122 @@
+@import "@{material-path}/_variables";
+@import "@{material-path}/_colors";
+@import "@{material-path}/_mixins";
+
+@import "@{material-path}/_icons-material-design";
+@import "@{material-path}/_shadows";
+
+body {
+  background-color: #EEEEEE;
+  &.inverse {
+    background: #333333;
+    &, .form-control {
+      color: @darkbg-text;
+    }
+  }
+}
+
+// Well and Jumbotrons
+@import "@{material-path}/_welljumbo";
+
+// Buttons
+@import "@{material-path}/_buttons";
+
+// Checkboxes
+@import "@{material-path}/_checkboxes";
+
+// Toggle buttons
+@import "@{material-path}/_togglebutton";
+
+// Radios
+@import "@{material-path}/_radios";
+
+// Text inputs
+@import "@{material-path}/_inputs";
+
+legend {
+  border-bottom: 0;
+}
+
+// Lists
+@import "@{material-path}/_lists";
+
+// Navbar
+@import "@{material-path}/_navbar";
+
+.navbar.navbar .dropdown-menu,
+.navbar-default.navbar .dropdown-menu,
+.dropdown-menu {
+  border: 0; 
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  .divider {
+    background-color: @tutor-neutral-light;
+  }
+  li {
+    overflow: hidden;
+    position: relative;
+  }
+  .variations(~" li a:hover", color, @tutor-neutral-darker);
+  .variations(~" li a:hover", background-color, @tutor-neutral-bright);
+
+  // Active state
+  .variations(~" > .active > a", color, @tutor-neutral-darker);
+  .variations(~" > .active > a", background-color, @tutor-neutral-light);
+  .variations(~" > .active > a:hover", background-color, @tutor-neutral-light);
+  .variations(~" > .active > a:hover", color, @tutor-neutral-darker);
+  .variations(~" > .active > a:hover", cursor, default);
+}
+
+// Alerts
+@import "@{material-path}/_alerts";
+
+// Progress bar
+@import "@{material-path}/_progress";
+
+// Typography
+.text-warning {
+  color: @btn-warning;
+}
+.text-primary {
+  color: @btn-primary;
+}
+.text-danger {
+  color: @btn-danger;
+}
+.text-success {
+  color: @btn-success;
+}
+.text-info {
+  color: @btn-info;
+}
+
+@import "@{material-path}/_tabs";
+
+@import "@{material-path}/_popups";
+
+@import "@{material-path}/_icons";
+
+@import "@{material-path}/_cards";
+
+@import "@{material-path}/_dialogs";
+
+@import "@{material-path}/_labels";
+
+@import "@{material-path}/_panels";
+
+@import "@{material-path}/_dividers";
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+    outline: 0;
+  }
+}
+
+
+// // External plugins
+// @import "@{material-path}/_plugin-snackbarjs";
+// @import "@{material-path}/_plugin-nouislider";
+// @import "@{material-path}/_plugin-selectize";
+// @import "@{material-path}/_plugin-dropdownjs";
diff --git a/resources/styles/global/tutor-bootstrap.less b/exercises/resources/styles/global/tutor-bootstrap.less
similarity index 100%
rename from resources/styles/global/tutor-bootstrap.less
rename to exercises/resources/styles/global/tutor-bootstrap.less
diff --git a/exercises/resources/styles/global/widgets.less b/exercises/resources/styles/global/widgets.less
new file mode 100644
index 0000000000..160ef6fd91
--- /dev/null
+++ b/exercises/resources/styles/global/widgets.less
@@ -0,0 +1,27 @@
+// this file holds small components that have minimal style requirements
+// if the styles get much larger, they should be extracted into their own file
+
+.error-modal {
+  .response {
+    max-height: 300px;
+    overflow: scroll;
+    border: 1px solid lightgrey;
+    padding: 1rem;
+    .html {
+      .hidden { dispay: none; }
+    }
+  }
+}
+
+
+.network-activity {
+  display: flex;
+  justify-content: center;
+  .spinner{
+    display: flex;
+    align-items: center;
+    .message {
+      font-size: 4rem;
+    }
+  }
+}
diff --git a/exercises/resources/styles/mixins/card.less b/exercises/resources/styles/mixins/card.less
new file mode 100644
index 0000000000..ce81c6a6a8
--- /dev/null
+++ b/exercises/resources/styles/mixins/card.less
@@ -0,0 +1,27 @@
+@import (reference) './quill';
+@import (reference) './toolbar';
+
+.x-card() {
+  .x-toolbar();
+
+  .card-content {
+    .x-quill();
+
+    // Materialize HACK. they remove formatting on all unordered lists ; (
+    ul > li { list-style-type: initial; }
+    ul { padding-left: 40px; }
+    .ql-editor ul { padding: 0; }
+
+    &.has-default-action { cursor: pointer; }
+
+    // Style contenteditable text differently because we do not have control over it
+    .has-html {
+      // So far:
+      // .exercise-background
+      // .answer-content
+      // .question-stem
+      div { margin-top: 1rem; }
+    }
+
+  }
+}
diff --git a/exercises/resources/styles/mixins/editing-panes.less b/exercises/resources/styles/mixins/editing-panes.less
new file mode 100644
index 0000000000..893b2eb6ba
--- /dev/null
+++ b/exercises/resources/styles/mixins/editing-panes.less
@@ -0,0 +1,30 @@
+.editing-panes() {
+  display: flex;
+
+  .openstax-exercise-preview,
+  .editing-controls {
+    flex: 1;
+    height: 100%;
+    justify-content: flex-start;
+  }
+  .openstax-exercise-preview {
+    max-width: 800px;
+  }
+
+  .editing-controls {
+    margin-right: 1rem;
+    position: relative;
+    min-width: 700px;
+    .add-mpq {
+      position: absolute;
+      right: 0;
+      z-index: 2; // above tabs;
+    }
+
+  }
+
+  .exercise-preview > .openstax-exercise-preview {
+    height: inherit;
+  }
+
+}
diff --git a/exercises/resources/styles/mixins/generic.less b/exercises/resources/styles/mixins/generic.less
new file mode 100644
index 0000000000..56fc4fb456
--- /dev/null
+++ b/exercises/resources/styles/mixins/generic.less
@@ -0,0 +1,19 @@
+// Mostly for the toolbar, but also used to style the quill math popup
+.x-user-select(@var) {
+     -moz-user-select: @var;
+  -webkit-user-select: @var;
+}
+
+.x-btn-dialog() {
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  text-transform: uppercase;
+  color: #4caf50;
+  &:hover {
+    color: #66bb6a;
+  }
+
+}
diff --git a/exercises/resources/styles/mixins/quill.less b/exercises/resources/styles/mixins/quill.less
new file mode 100644
index 0000000000..de7f67ed24
--- /dev/null
+++ b/exercises/resources/styles/mixins/quill.less
@@ -0,0 +1,99 @@
+@import './generic';
+
+.x-quill() {
+  // Style the question-stem/exercise-background differently from other quill instances
+  > .quill-wrapper {
+    // Make the main editable area visibly different so you know you can edit
+    border-radius: 5px;
+    padding: 1rem;
+
+    .ql-editor {
+      padding: 1rem;
+      // for a nice box shadow
+      // from GitHub
+      border-color: #aaa;
+      box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(167,167,167,0.5);
+
+      &:focus,
+      &.ql-has-active-popup {
+        // from GitHub
+        border-color: #51a7e8;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5);
+      }
+    }
+  }
+
+
+  .quill-wrapper {
+    padding: .3rem;
+
+    .ql-editor {
+      // Ensure enough space below for the math popup so it does not get overflow-hidden
+      transition: padding-bottom .3s ease-in;
+
+      // .ql-is-active is a hack for the math popup because the editor loses focus
+      &:focus,
+      &.ql-has-active-popup {
+        padding-bottom: 12rem;
+      }
+      // If it is not focused then change the cursor so the user knows to click in it
+      &:not(:focus):not(.ql-has-active-popup) {
+        cursor: pointer;
+      }
+
+      // Make sure all math in the editor has a gray background
+      [data-math] {
+        .x-user-select(all);
+        .katex-inner {
+          // use .katex-inner to get the whole bounding box
+          background-color: #efefef;
+          outline: 1px solid #9e9e9e;
+          cursor: pointer;
+        }
+      }
+    }
+
+
+    // Style the tooltip and buttons
+    .ql-math-tooltip {
+      // .z-depth-3
+      box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+      border-radius: 10px;
+      padding: 5px;
+      border: 1px solid #999;
+      width: 25rem;
+      overflow-x: hidden;
+      .x-user-select(none);
+
+      .title {
+        color: #9e9e9e;
+        margin-right: 1rem;
+      }
+      .math-input {
+        border: 1px solid black;
+        width: 17rem;
+        height: 2rem;
+        padding-left: .5rem;
+      }
+      .preview {
+        color: #616161;
+        margin: 5px auto;
+        width: 20rem;
+        text-align: center;
+        cursor: default;
+      }
+      .ql-btn-group {
+        border-top: 1px solid rgba(160,160,160,0.2); // from card-action-top
+
+        text-align: center;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: .5rem;
+
+        button {
+          .x-btn-dialog();
+        }
+      }
+    }
+  }
+}
diff --git a/exercises/resources/styles/mixins/toolbar.less b/exercises/resources/styles/mixins/toolbar.less
new file mode 100644
index 0000000000..ce8f6bf589
--- /dev/null
+++ b/exercises/resources/styles/mixins/toolbar.less
@@ -0,0 +1,54 @@
+.x-toolbar() {
+  nav {
+    cursor: default;
+
+    &.double-height { height: 7.5rem; }
+
+    .nav-wrapper {
+
+      .btn-toolbar.btn-close {
+        float: right;
+        padding: 0;
+        margin-right: .5rem;
+
+        i {
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+
+      .brand-logo {
+        margin-left: 1rem;
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+
+      // Common stying for both rows in the toolbar
+      .x-header-row() {
+        i {
+          // Need to keep the question-toolbar-formats in so the close button remains in place
+          line-height: 32px;
+        }
+        .btn-toolbar {
+          font-size: 2rem;
+          line-height: 32px;
+          i { height: inherit; line-height: 32px; }
+
+          &:hover                   { background-color: rgba(0,0,0,.1); }
+          &.ql-active:not(:hover) { background-color: rgba(255,255,255,.2); }
+        }
+      }
+
+      .header-row-1 {
+        .x-header-row();
+        margin-top: 1rem;
+        line-height: 1rem;
+      }
+      .header-row-2 {
+        .x-header-row();
+        margin-left: 1rem;
+        line-height: 30px;
+      }
+    }
+  }
+}
diff --git a/exercises/resources/styles/navbar.less b/exercises/resources/styles/navbar.less
new file mode 100644
index 0000000000..2c7ab14591
--- /dev/null
+++ b/exercises/resources/styles/navbar.less
@@ -0,0 +1,31 @@
+.editor-app {
+
+  nav.navbar {
+    .controls-container {
+      display: flex;
+
+    }
+    .view-controls {
+      margin-left: 5px;
+      display: flex;
+      flex: 1;
+
+      > * { display: flex; flex: 1; };
+    }
+
+  }
+
+  .dropdown-menu .logout {
+    input[type=submit] {
+      border: 0;
+      background-color: transparent;
+      width: 100%;
+      text-align: left;
+      padding-left: 0;
+      text-transform: none;
+      text-align: left;
+      &:hover { text-decoration: initial; }
+    }
+  }
+
+}
diff --git a/exercises/resources/styles/question.less b/exercises/resources/styles/question.less
new file mode 100644
index 0000000000..f9e4753fee
--- /dev/null
+++ b/exercises/resources/styles/question.less
@@ -0,0 +1,69 @@
+.question {
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .move-question {
+      cursor: pointer;
+      margin: 0 1rem;
+      font-size: 2rem;
+    }
+    .remove-question {
+      color: @red;
+      i { margin-right: 0.5rem; }
+    }
+  }
+  textarea {
+    margin-bottom: 2rem;
+    width: 100%;
+    height: 8rem;
+  }
+
+  li.correct-answer {
+    label {
+      color: @green;
+    }
+    textarea {
+      border-color: @green;
+    }
+  }
+
+  .answer-actions {
+    > a {
+      margin-left: 10px;
+      cursor: pointer;
+      line-height: 2rem;
+
+      &.is-correct {
+        color: @openstax-neutral;
+      }
+      &.is-correct.correct-answer {
+        color: @green;
+      }
+
+      i.fa {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  .tags select {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+
+  p.add-exercise {
+    width: 100%;
+    margin-bottom: 2em;
+    a {
+      font-size: 2rem;
+      color: white;
+      text-align: center;
+
+      i {
+        margin-right: 10px;
+      }
+    }
+  }
+}
diff --git a/exercises/resources/styles/tags.less b/exercises/resources/styles/tags.less
new file mode 100644
index 0000000000..c3c05957f4
--- /dev/null
+++ b/exercises/resources/styles/tags.less
@@ -0,0 +1,56 @@
+
+.tags {
+
+  .controls i {
+    cursor: pointer;
+    font-size: 120%;
+  }
+  .row + .row {
+    margin-top: 2rem;
+  }
+  .tag-type {
+    margin-top: 2rem;
+    .heading {
+      display: flex;
+      justify-content: space-between;
+      .label { font-weight: bolder; font-size: 110%; }
+    }
+    &.has-single-tag {
+      .tag .controls{ visibility: hidden; }
+    }
+    .tag {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 1rem;
+
+      &.has-error {
+        input, select {
+          border-color: red;
+        }
+        .fa-exclamation-triangle {
+          color: red;
+          margin: 0 0.5rem;
+        }
+      }
+
+      input, select, .rw-widget {
+        width: 100%;
+        flex: 1;
+        margin-right: 0.5rem;
+      }
+
+      &.format-type {
+        flex-direction: column;
+        align-items: flex-start;
+        .form-group {
+          margin: 0 0 0 15px;
+          .radio { margin: 5px 0 }
+          .checkbox { margin: 0; }
+        }
+      }
+
+    }
+
+  }
+}
diff --git a/exercises/resources/styles/variables.less b/exercises/resources/styles/variables.less
new file mode 100644
index 0000000000..3b5255e82e
--- /dev/null
+++ b/exercises/resources/styles/variables.less
@@ -0,0 +1,50 @@
+@import './variables/colors';
+
+// TODO: Decide where best to organize this once more have accumulated
+@tutor-task-width: 1000px;
+
+@tutor-card-body-padding-vertical: 20px;
+@tutor-card-body-padding-horizontal: 140px;
+@tutor-card-footer-line-height: 35px;
+@tutor-card-body-padding: @tutor-card-body-padding-vertical @tutor-card-body-padding-horizontal;
+@tutor-card-padding-collapse-breakpoint: 1020px;
+@tutor-card-body-narrow-padding-horizontal: 20px;
+
+@student-dashboard-row-height: 60px;
+@tutor-teacher-plan-stats-border-style: 1px dotted @tutor-neutral-light;
+
+@tutor-video-iframe-width: 720px;
+@tutor-video-iframe-height: 405px;
+
+@tutor-correct-color: @tutor-success;
+@tutor-correct-background: lighten(saturate(@tutor-success, 60%), 38%);
+@tutor-incorrect-color: @tutor-danger;
+@tutor-incorrect-background: lighten(@tutor-danger, 55%);
+@tutor-answer-background: @tutor-info-bg;
+@tutor-answer-color: @tutor-tertiary-light; // darker than hover
+
+@reading-color: @tutor-quaternary;
+@homework-color: @tutor-tertiary-light;
+@external-color: @tutor-tertiary;
+@event-color: @tutor-secondary;
+@extras-color: @tutor-primary;
+
+// if these are updated, also change MENU_VISIBLE_BREAKPOINT
+// in src/components/reference-book/reference-book.cjsx
+@reference-book-page-width: 1000px;
+@reference-book-menu-width: 300px;
+@reference-book-collapse-width: 85%;
+
+@book-content-collapse-breakpoint: 1020px;
+@book-content-narrow-horizontal-padding: 20px;
+
+// Async
+@tutor-async-loading-timeout: 30s;
+@tutor-async-loading-long-timeout: 120s;
+@-webkit-keyframes tutorAsyncFadeIn { from { opacity: 0; } to { opacity: 1; visibility: visible; } }
+@-moz-keyframes tutorAsyncFadeIn { from { opacity: 0; } to { opacity: 1; visibility: visible;} }
+@keyframes tutorAsyncFadeIn { from { opacity: 0; } to { opacity: 1; visibility: visible; } }
+
+@-webkit-keyframes tutorAsyncFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
+@-moz-keyframes tutorAsyncFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden;} }
+@keyframes tutorAsyncFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
diff --git a/exercises/resources/styles/variables/colors.less b/exercises/resources/styles/variables/colors.less
new file mode 100644
index 0000000000..2d79c08a5c
--- /dev/null
+++ b/exercises/resources/styles/variables/colors.less
@@ -0,0 +1,36 @@
+@tutor-primary: rgb(244, 118, 65); // orange
+@tutor-secondary: rgb(119, 175, 65); // green
+@tutor-tertiary: rgb(35, 48, 102); // dark blue
+@tutor-quaternary: rgb(244, 208, 25); // yellow
+@tutor-highlight: rgb(255, 255, 187); // pale yellow
+
+@tutor-secondary-light: rgb(139, 199, 83); // light green
+@tutor-tertiary-light: rgb(0, 193, 222); // light blue
+
+@tutor-success: @tutor-secondary;
+@tutor-info: @tutor-tertiary-light;
+@tutor-info-bg: lighten(@tutor-info, 53%); // even lighter blue
+@tutor-warning: @tutor-quaternary;
+@tutor-danger: rgb(194, 0, 47); // red
+
+@tutor-white: white;
+@tutor-neutral-lightest: rgb(249, 249, 249); // nearly white
+@tutor-neutral-bright: rgb(245, 245, 245); // bright gray
+@tutor-neutral-lighter: rgb(241, 241, 241); // light gray
+@tutor-neutral-light: rgb(229, 229, 229); // light gray
+@tutor-neutral: rgb(129, 129, 129); // gray
+@tutor-neutral-dark: rgb(95, 97, 99); // dark gray
+@tutor-neutral-darker: rgb(66, 66, 66); // very dark gray
+@tutor-black: black;
+
+@page-background: @tutor-neutral-lighter;
+@footer-background: @tutor-neutral-bright;
+@border-color: @tutor-neutral-light;
+
+@form-error-color: #E35C3B;
+
+@link-color: darken(@tutor-info, 5%);
+@exercise-question-uid-color: lighten(@tutor-neutral,20%);
+
+// NOTE: Make borders and input background colors one of the above grays with a high opacity so it works on
+//       multiple backgrounds.
diff --git a/exercises/resources/styles/variables/paths.less b/exercises/resources/styles/variables/paths.less
new file mode 100644
index 0000000000..cbf8903a48
--- /dev/null
+++ b/exercises/resources/styles/variables/paths.less
@@ -0,0 +1,5 @@
+@fa-font-path: './fonts';
+
+@bootstrap-path: '~bootstrap/less/';
+@widgets-path: '~react-widgets/lib/less/';
+@material-path: '~bootstrap-material-design/less/';
diff --git a/exercises/resources/styles/variables/tutor-bootstrap.less b/exercises/resources/styles/variables/tutor-bootstrap.less
new file mode 100644
index 0000000000..1447ee0811
--- /dev/null
+++ b/exercises/resources/styles/variables/tutor-bootstrap.less
@@ -0,0 +1,865 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+@gray-base:              @tutor-black;
+@gray-darker:            @tutor-neutral-darker; // #222
+@gray-dark:              @tutor-neutral-dark;   // #333
+@gray:                   @tutor-neutral; // #555
+@gray-light:             @tutor-neutral-light; // #777
+@gray-lighter:           @tutor-neutral-lighter; // #eee
+
+@brand-primary:         @tutor-primary; // tutor-primary, orange
+@brand-success:         @tutor-success; // tutor-secondary, green
+@brand-info:            @tutor-info;    // tutor-tertiary-light, light blue-ish
+@brand-warning:         @tutor-warning; // tutor-quaternary, yellow
+@brand-danger:          @tutor-danger;  // tutor-danger, red
+
+@state-info-bg:					@tutor-info-bg;
+@container-large-desktop:      (1200px + @grid-gutter-width);
+
+@link-hover-color:      darken(@link-color, 5%);
+
+
+@popover-max-width:                   none;
+// //== Scaffolding
+// //
+// //## Settings for some of the most global styles.
+
+// //** Background color for `<body>`.
+// @body-bg:               #fff;
+// //** Global text color on `<body>`.
+// @text-color:            @gray-dark;
+
+// //** Global textual link color.
+// @link-color:            @brand-primary;
+// //** Link hover color set via `darken()` function.
+// //** Link hover decoration.
+// @link-hover-decoration: underline;
+
+
+// //== Typography
+// //
+// //## Font, line-height, and color for body text, headings, and more.
+
+// @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+// @font-family-serif:       Georgia, "Times New Roman", Times, serif;
+// //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+// @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+// @font-family-base:        @font-family-sans-serif;
+
+// @font-size-base:          14px;
+// @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+// @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+// @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+// @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+// @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+// @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+// @font-size-h5:            @font-size-base;
+// @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+// //** Unit-less `line-height` for use in components like buttons.
+// @line-height-base:        1.428571429; // 20/14
+// //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+// @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+// //** By default, this inherits from the `<body>`.
+// @headings-font-family:    inherit;
+// @headings-font-weight:    500;
+// @headings-line-height:    1.1;
+// @headings-color:          inherit;
+
+
+// //== Iconography
+// //
+// //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+// //** Load fonts from this directory.
+// @icon-font-path:          "../fonts/";
+// //** File name for all font files.
+// @icon-font-name:          "glyphicons-halflings-regular";
+// //** Element ID within SVG icon file.
+// @icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+// //== Components
+// //
+// //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+// @padding-base-vertical:     6px;
+// @padding-base-horizontal:   12px;
+
+// @padding-large-vertical:    10px;
+// @padding-large-horizontal:  16px;
+
+// @padding-small-vertical:    5px;
+// @padding-small-horizontal:  10px;
+
+// @padding-xs-vertical:       1px;
+// @padding-xs-horizontal:     5px;
+
+// @line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+// @line-height-small:         1.5;
+
+// @border-radius-base:        4px;
+// @border-radius-large:       6px;
+// @border-radius-small:       3px;
+
+// //** Global color for active items (e.g., navs or dropdowns).
+// @component-active-color:    #fff;
+// //** Global background color for active items (e.g., navs or dropdowns).
+// @component-active-bg:       @brand-primary;
+
+// //** Width of the `border` for generating carets that indicator dropdowns.
+// @caret-width-base:          4px;
+// //** Carets increase slightly in size for larger components.
+// @caret-width-large:         5px;
+
+
+// //== Tables
+// //
+// //## Customizes the `.table` component with basic values, each used across all table variations.
+
+// //** Padding for `<th>`s and `<td>`s.
+// @table-cell-padding:            8px;
+// //** Padding for cells in `.table-condensed`.
+// @table-condensed-cell-padding:  5px;
+
+// //** Default background color used for all tables.
+// @table-bg:                      transparent;
+// //** Background color used for `.table-striped`.
+// @table-bg-accent:               #f9f9f9;
+// //** Background color used for `.table-hover`.
+// @table-bg-hover:                #f5f5f5;
+// @table-bg-active:               @table-bg-hover;
+
+// //** Border color for table and cell borders.
+// @table-border-color:            #ddd;
+
+
+// //== Buttons
+// //
+// //## For each of Bootstrap's buttons, define text, background and border color.
+
+// @btn-font-weight:                normal;
+
+// @btn-default-color:              #333;
+// @btn-default-bg:                 #fff;
+// @btn-default-border:             #ccc;
+
+// @btn-primary-color:              #fff;
+// @btn-primary-bg:                 @brand-primary;
+// @btn-primary-border:             darken(@btn-primary-bg, 5%);
+
+// @btn-success-color:              #fff;
+// @btn-success-bg:                 @brand-success;
+// @btn-success-border:             darken(@btn-success-bg, 5%);
+
+// @btn-info-color:                 #fff;
+// @btn-info-bg:                    @brand-info;
+// @btn-info-border:                darken(@btn-info-bg, 5%);
+
+// @btn-warning-color:              #fff;
+// @btn-warning-bg:                 @brand-warning;
+// @btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+// @btn-danger-color:               #fff;
+// @btn-danger-bg:                  @brand-danger;
+// @btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+// @btn-link-disabled-color:        @gray-light;
+
+
+// //== Forms
+// //
+// //##
+
+// //** `<input>` background color
+// @input-bg:                       #fff;
+// //** `<input disabled>` background color
+// @input-bg-disabled:              @gray-lighter;
+
+// //** Text color for `<input>`s
+// @input-color:                    @gray;
+// //** `<input>` border color
+// @input-border:                   #ccc;
+
+// // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+// //** Default `.form-control` border radius
+// // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+// @input-border-radius:            @border-radius-base;
+// //** Large `.form-control` border radius
+// @input-border-radius-large:      @border-radius-large;
+// //** Small `.form-control` border radius
+// @input-border-radius-small:      @border-radius-small;
+
+// //** Border color for inputs on focus
+// @input-border-focus:             #66afe9;
+
+// //** Placeholder text color
+// @input-color-placeholder:        #999;
+
+// //** Default `.form-control` height
+// @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+// //** Large `.form-control` height
+// @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+// //** Small `.form-control` height
+// @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+// //** `.form-group` margin
+// @form-group-margin-bottom:       15px;
+
+// @legend-color:                   @gray-dark;
+// @legend-border-color:            #e5e5e5;
+
+// //** Background color for textual input addons
+// @input-group-addon-bg:           @gray-lighter;
+// //** Border color for textual input addons
+// @input-group-addon-border-color: @input-border;
+
+// //** Disabled cursor for form controls and buttons.
+// @cursor-disabled:                not-allowed;
+
+
+// //== Dropdowns
+// //
+// //## Dropdown menu container and contents.
+
+// //** Background for the dropdown menu.
+// @dropdown-bg:                    #fff;
+// //** Dropdown menu `border-color`.
+// @dropdown-border:                rgba(0,0,0,.15);
+// //** Dropdown menu `border-color` **for IE8**.
+// @dropdown-fallback-border:       #ccc;
+// //** Divider color for between dropdown items.
+// @dropdown-divider-bg:            #e5e5e5;
+
+// //** Dropdown link text color.
+// @dropdown-link-color:            @gray-dark;
+// //** Hover color for dropdown links.
+// @dropdown-link-hover-color:      darken(@gray-dark, 5%);
+// //** Hover background for dropdown links.
+// @dropdown-link-hover-bg:         #f5f5f5;
+
+// //** Active dropdown menu item text color.
+// @dropdown-link-active-color:     @component-active-color;
+// //** Active dropdown menu item background color.
+// @dropdown-link-active-bg:        @component-active-bg;
+
+// //** Disabled dropdown menu item background color.
+// @dropdown-link-disabled-color:   @gray-light;
+
+// //** Text color for headers within dropdown menus.
+// @dropdown-header-color:          @gray-light;
+
+// //** Deprecated `@dropdown-caret-color` as of v3.1.0
+// @dropdown-caret-color:           #000;
+
+
+// //-- Z-index master list
+// //
+// // Warning: Avoid customizing these values. They're used for a bird's eye view
+// // of components dependent on the z-axis and are designed to all work together.
+// //
+// // Note: These variables are not generated into the Customizer.
+
+// @zindex-navbar:            1000;
+// @zindex-dropdown:          1000;
+// @zindex-popover:           1060;
+// @zindex-tooltip:           1070;
+// @zindex-navbar-fixed:      1030;
+// @zindex-modal-background:  1040;
+// @zindex-modal:             1050;
+
+
+// //== Media queries breakpoints
+// //
+// //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// // Extra small screen / phone
+// //** Deprecated `@screen-xs` as of v3.0.1
+// @screen-xs:                  480px;
+// //** Deprecated `@screen-xs-min` as of v3.2.0
+// @screen-xs-min:              @screen-xs;
+// //** Deprecated `@screen-phone` as of v3.0.1
+// @screen-phone:               @screen-xs-min;
+
+// // Small screen / tablet
+// //** Deprecated `@screen-sm` as of v3.0.1
+// @screen-sm:                  768px;
+// @screen-sm-min:              @screen-sm;
+// //** Deprecated `@screen-tablet` as of v3.0.1
+// @screen-tablet:              @screen-sm-min;
+
+// // Medium screen / desktop
+// //** Deprecated `@screen-md` as of v3.0.1
+// @screen-md:                  992px;
+// @screen-md-min:              @screen-md;
+// //** Deprecated `@screen-desktop` as of v3.0.1
+// @screen-desktop:             @screen-md-min;
+
+// // Large screen / wide desktop
+// //** Deprecated `@screen-lg` as of v3.0.1
+// @screen-lg:                  1200px;
+// @screen-lg-min:              @screen-lg;
+// //** Deprecated `@screen-lg-desktop` as of v3.0.1
+// @screen-lg-desktop:          @screen-lg-min;
+
+// // So media queries don't overlap when required, provide a maximum
+// @screen-xs-max:              (@screen-sm-min - 1);
+// @screen-sm-max:              (@screen-md-min - 1);
+// @screen-md-max:              (@screen-lg-min - 1);
+
+
+// //== Grid system
+// //
+// //## Define your custom responsive grid.
+
+// //** Number of columns in the grid.
+// @grid-columns:              12;
+// //** Padding between columns. Gets divided in half for the left and right.
+// @grid-gutter-width:         30px;
+// // Navbar collapse
+// //** Point at which the navbar becomes uncollapsed.
+// @grid-float-breakpoint:     @screen-sm-min;
+// //** Point at which the navbar begins collapsing.
+// @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+// //== Container sizes
+// //
+// //## Define the maximum width of `.container` for different screen sizes.
+
+// // Small screen / tablet
+// @container-tablet:             (720px + @grid-gutter-width);
+// //** For `@screen-sm-min` and up.
+// @container-sm:                 @container-tablet;
+
+// // Medium screen / desktop
+// @container-desktop:            (940px + @grid-gutter-width);
+// //** For `@screen-md-min` and up.
+// @container-md:                 @container-desktop;
+
+// // Large screen / wide desktop
+// //** For `@screen-lg-min` and up.
+// @container-lg:                 @container-large-desktop;
+
+
+// //== Navbar
+// //
+// //##
+
+// // Basics of a navbar
+// @navbar-height:                    50px;
+// @navbar-margin-bottom:             @line-height-computed;
+// @navbar-border-radius:             @border-radius-base;
+// @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+// @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+// @navbar-collapse-max-height:       340px;
+
+// @navbar-default-color:             #777;
+// @navbar-default-bg:                #f8f8f8;
+// @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// // Navbar links
+// @navbar-default-link-color:                #777;
+// @navbar-default-link-hover-color:          #333;
+// @navbar-default-link-hover-bg:             transparent;
+// @navbar-default-link-active-color:         #555;
+// @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+// @navbar-default-link-disabled-color:       #ccc;
+// @navbar-default-link-disabled-bg:          transparent;
+
+// // Navbar brand label
+// @navbar-default-brand-color:               @navbar-default-link-color;
+// @navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+// @navbar-default-brand-hover-bg:            transparent;
+
+// // Navbar toggle
+// @navbar-default-toggle-hover-bg:           #ddd;
+// @navbar-default-toggle-icon-bar-bg:        #888;
+// @navbar-default-toggle-border-color:       #ddd;
+
+
+// // Inverted navbar
+// // Reset inverted navbar basics
+// @navbar-inverse-color:                      lighten(@gray-light, 15%);
+// @navbar-inverse-bg:                         #222;
+// @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// // Inverted navbar links
+// @navbar-inverse-link-color:                 lighten(@gray-light, 15%);
+// @navbar-inverse-link-hover-color:           #fff;
+// @navbar-inverse-link-hover-bg:              transparent;
+// @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+// @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+// @navbar-inverse-link-disabled-color:        #444;
+// @navbar-inverse-link-disabled-bg:           transparent;
+
+// // Inverted navbar brand label
+// @navbar-inverse-brand-color:                @navbar-inverse-link-color;
+// @navbar-inverse-brand-hover-color:          #fff;
+// @navbar-inverse-brand-hover-bg:             transparent;
+
+// // Inverted navbar toggle
+// @navbar-inverse-toggle-hover-bg:            #333;
+// @navbar-inverse-toggle-icon-bar-bg:         #fff;
+// @navbar-inverse-toggle-border-color:        #333;
+
+
+// //== Navs
+// //
+// //##
+
+// //=== Shared nav styles
+// @nav-link-padding:                          10px 15px;
+// @nav-link-hover-bg:                         @gray-lighter;
+
+// @nav-disabled-link-color:                   @gray-light;
+// @nav-disabled-link-hover-color:             @gray-light;
+
+// //== Tabs
+// @nav-tabs-border-color:                     #ddd;
+
+// @nav-tabs-link-hover-border-color:          @gray-lighter;
+
+// @nav-tabs-active-link-hover-bg:             @body-bg;
+// @nav-tabs-active-link-hover-color:          @gray;
+// @nav-tabs-active-link-hover-border-color:   #ddd;
+
+// @nav-tabs-justified-link-border-color:            #ddd;
+// @nav-tabs-justified-active-link-border-color:     @body-bg;
+
+// //== Pills
+// @nav-pills-border-radius:                   @border-radius-base;
+// @nav-pills-active-link-hover-bg:            @component-active-bg;
+// @nav-pills-active-link-hover-color:         @component-active-color;
+
+
+// //== Pagination
+// //
+// //##
+
+// @pagination-color:                     @link-color;
+// @pagination-bg:                        #fff;
+// @pagination-border:                    #ddd;
+
+// @pagination-hover-color:               @link-hover-color;
+// @pagination-hover-bg:                  @gray-lighter;
+// @pagination-hover-border:              #ddd;
+
+// @pagination-active-color:              #fff;
+// @pagination-active-bg:                 @brand-primary;
+// @pagination-active-border:             @brand-primary;
+
+// @pagination-disabled-color:            @gray-light;
+// @pagination-disabled-bg:               #fff;
+// @pagination-disabled-border:           #ddd;
+
+
+// //== Pager
+// //
+// //##
+
+// @pager-bg:                             @pagination-bg;
+// @pager-border:                         @pagination-border;
+// @pager-border-radius:                  15px;
+
+// @pager-hover-bg:                       @pagination-hover-bg;
+
+// @pager-active-bg:                      @pagination-active-bg;
+// @pager-active-color:                   @pagination-active-color;
+
+// @pager-disabled-color:                 @pagination-disabled-color;
+
+
+// //== Jumbotron
+// //
+// //##
+
+// @jumbotron-padding:              30px;
+// @jumbotron-color:                inherit;
+// @jumbotron-bg:                   @gray-lighter;
+// @jumbotron-heading-color:        inherit;
+// @jumbotron-font-size:            ceil((@font-size-base * 1.5));
+
+
+// //== Form states and alerts
+// //
+// //## Define colors for form feedback states and, by default, alerts.
+
+// @state-success-text:             #3c763d;
+// @state-success-bg:               #dff0d8;
+// @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+// @state-info-text:                #31708f;
+// @state-info-bg:                  #d9edf7;
+// @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+// @state-warning-text:             #8a6d3b;
+// @state-warning-bg:               #fcf8e3;
+// @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+// @state-danger-text:              #a94442;
+// @state-danger-bg:                #f2dede;
+// @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+// //== Tooltips
+// //
+// //##
+
+// //** Tooltip max width
+// @tooltip-max-width:           200px;
+// //** Tooltip text color
+// @tooltip-color:               #fff;
+// //** Tooltip background color
+// @tooltip-bg:                  #000;
+// @tooltip-opacity:             .9;
+
+// //** Tooltip arrow width
+// @tooltip-arrow-width:         5px;
+// //** Tooltip arrow color
+// @tooltip-arrow-color:         @tooltip-bg;
+
+
+// //== Popovers
+// //
+// //##
+
+// //** Popover body background color
+// @popover-bg:                          #fff;
+// //** Popover maximum width
+// @popover-max-width:                   276px;
+// //** Popover border color
+// @popover-border-color:                rgba(0,0,0,.2);
+// //** Popover fallback border color
+// @popover-fallback-border-color:       #ccc;
+
+// //** Popover title background color
+// @popover-title-bg:                    darken(@popover-bg, 3%);
+
+// //** Popover arrow width
+// @popover-arrow-width:                 10px;
+// //** Popover arrow color
+// @popover-arrow-color:                 @popover-bg;
+
+// //** Popover outer arrow width
+// @popover-arrow-outer-width:           (@popover-arrow-width + 1);
+// //** Popover outer arrow color
+// @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+// //** Popover outer arrow fallback color
+// @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
+
+
+// //== Labels
+// //
+// //##
+
+// //** Default label background color
+// @label-default-bg:            @gray-light;
+// //** Primary label background color
+// @label-primary-bg:            @brand-primary;
+// //** Success label background color
+// @label-success-bg:            @brand-success;
+// //** Info label background color
+// @label-info-bg:               @brand-info;
+// //** Warning label background color
+// @label-warning-bg:            @brand-warning;
+// //** Danger label background color
+// @label-danger-bg:             @brand-danger;
+
+// //** Default label text color
+// @label-color:                 #fff;
+// //** Default text color of a linked label
+// @label-link-hover-color:      #fff;
+
+
+// //== Modals
+// //
+// //##
+
+// //** Padding applied to the modal body
+// @modal-inner-padding:         15px;
+
+// //** Padding applied to the modal title
+// @modal-title-padding:         15px;
+// //** Modal title line-height
+// @modal-title-line-height:     @line-height-base;
+
+// //** Background color of modal content area
+// @modal-content-bg:                             #fff;
+// //** Modal content border color
+// @modal-content-border-color:                   rgba(0,0,0,.2);
+// //** Modal content border color **for IE8**
+// @modal-content-fallback-border-color:          #999;
+
+// //** Modal backdrop background color
+// @modal-backdrop-bg:           #000;
+// //** Modal backdrop opacity
+// @modal-backdrop-opacity:      .5;
+// //** Modal header border color
+// @modal-header-border-color:   #e5e5e5;
+// //** Modal footer border color
+// @modal-footer-border-color:   @modal-header-border-color;
+
+// @modal-lg:                    900px;
+// @modal-md:                    600px;
+// @modal-sm:                    300px;
+
+
+// //== Alerts
+// //
+// //## Define alert colors, border radius, and padding.
+
+// @alert-padding:               15px;
+// @alert-border-radius:         @border-radius-base;
+// @alert-link-font-weight:      bold;
+
+// @alert-success-bg:            @state-success-bg;
+// @alert-success-text:          @state-success-text;
+// @alert-success-border:        @state-success-border;
+
+// @alert-info-bg:               @state-info-bg;
+// @alert-info-text:             @state-info-text;
+// @alert-info-border:           @state-info-border;
+
+// @alert-warning-bg:            @state-warning-bg;
+// @alert-warning-text:          @state-warning-text;
+// @alert-warning-border:        @state-warning-border;
+
+// @alert-danger-bg:             @state-danger-bg;
+// @alert-danger-text:           @state-danger-text;
+// @alert-danger-border:         @state-danger-border;
+
+
+// //== Progress bars
+// //
+// //##
+
+// //** Background color of the whole progress component
+// @progress-bg:                 #f5f5f5;
+// //** Progress bar text color
+// @progress-bar-color:          #fff;
+// //** Variable for setting rounded corners on progress bar.
+// @progress-border-radius:      @border-radius-base;
+
+// //** Default progress bar color
+// @progress-bar-bg:             @brand-primary;
+// //** Success progress bar color
+// @progress-bar-success-bg:     @brand-success;
+// //** Warning progress bar color
+// @progress-bar-warning-bg:     @brand-warning;
+// //** Danger progress bar color
+// @progress-bar-danger-bg:      @brand-danger;
+// //** Info progress bar color
+// @progress-bar-info-bg:        @brand-info;
+
+
+// //== List group
+// //
+// //##
+
+// //** Background color on `.list-group-item`
+// @list-group-bg:                 #fff;
+// //** `.list-group-item` border color
+// @list-group-border:             #ddd;
+// //** List group border radius
+// @list-group-border-radius:      @border-radius-base;
+
+// //** Background color of single list items on hover
+// @list-group-hover-bg:           #f5f5f5;
+// //** Text color of active list items
+// @list-group-active-color:       @component-active-color;
+// //** Background color of active list items
+// @list-group-active-bg:          @component-active-bg;
+// //** Border color of active list elements
+// @list-group-active-border:      @list-group-active-bg;
+// //** Text color for content within active list items
+// @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+// //** Text color of disabled list items
+// @list-group-disabled-color:      @gray-light;
+// //** Background color of disabled list items
+// @list-group-disabled-bg:         @gray-lighter;
+// //** Text color for content within disabled list items
+// @list-group-disabled-text-color: @list-group-disabled-color;
+
+// @list-group-link-color:         #555;
+// @list-group-link-hover-color:   @list-group-link-color;
+// @list-group-link-heading-color: #333;
+
+
+// //== Panels
+// //
+// //##
+
+// @panel-bg:                    #fff;
+// @panel-body-padding:          15px;
+// @panel-heading-padding:       10px 15px;
+// @panel-footer-padding:        @panel-heading-padding;
+// @panel-border-radius:         @border-radius-base;
+
+// //** Border color for elements within panels
+// @panel-inner-border:          #ddd;
+// @panel-footer-bg:             #f5f5f5;
+
+// @panel-default-text:          @gray-dark;
+// @panel-default-border:        #ddd;
+// @panel-default-heading-bg:    #f5f5f5;
+
+// @panel-primary-text:          #fff;
+// @panel-primary-border:        @brand-primary;
+// @panel-primary-heading-bg:    @brand-primary;
+
+// @panel-success-text:          @state-success-text;
+// @panel-success-border:        @state-success-border;
+// @panel-success-heading-bg:    @state-success-bg;
+
+// @panel-info-text:             @state-info-text;
+// @panel-info-border:           @state-info-border;
+// @panel-info-heading-bg:       @state-info-bg;
+
+// @panel-warning-text:          @state-warning-text;
+// @panel-warning-border:        @state-warning-border;
+// @panel-warning-heading-bg:    @state-warning-bg;
+
+// @panel-danger-text:           @state-danger-text;
+// @panel-danger-border:         @state-danger-border;
+// @panel-danger-heading-bg:     @state-danger-bg;
+
+
+// //== Thumbnails
+// //
+// //##
+
+// //** Padding around the thumbnail image
+// @thumbnail-padding:           4px;
+// //** Thumbnail background color
+// @thumbnail-bg:                @body-bg;
+// //** Thumbnail border color
+// @thumbnail-border:            #ddd;
+// //** Thumbnail border radius
+// @thumbnail-border-radius:     @border-radius-base;
+
+// //** Custom text color for thumbnail captions
+// @thumbnail-caption-color:     @text-color;
+// //** Padding around the thumbnail caption
+// @thumbnail-caption-padding:   9px;
+
+
+// //== Wells
+// //
+// //##
+
+// @well-bg:                     #f5f5f5;
+// @well-border:                 darken(@well-bg, 7%);
+
+
+// //== Badges
+// //
+// //##
+
+// @badge-color:                 #fff;
+// //** Linked badge text color on hover
+// @badge-link-hover-color:      #fff;
+// @badge-bg:                    @gray-light;
+
+// //** Badge text color in active nav link
+// @badge-active-color:          @link-color;
+// //** Badge background color in active nav link
+// @badge-active-bg:             #fff;
+
+// @badge-font-weight:           bold;
+// @badge-line-height:           1;
+// @badge-border-radius:         10px;
+
+
+// //== Breadcrumbs
+// //
+// //##
+
+// @breadcrumb-padding-vertical:   8px;
+// @breadcrumb-padding-horizontal: 15px;
+// //** Breadcrumb background color
+// @breadcrumb-bg:                 #f5f5f5;
+// //** Breadcrumb text color
+// @breadcrumb-color:              #ccc;
+// //** Text color of current page in the breadcrumb
+// @breadcrumb-active-color:       @gray-light;
+// //** Textual separator for between breadcrumb elements
+// @breadcrumb-separator:          "/";
+
+
+// //== Carousel
+// //
+// //##
+
+// @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+// @carousel-control-color:                      #fff;
+// @carousel-control-width:                      15%;
+// @carousel-control-opacity:                    .5;
+// @carousel-control-font-size:                  20px;
+
+// @carousel-indicator-active-bg:                #fff;
+// @carousel-indicator-border-color:             #fff;
+
+// @carousel-caption-color:                      #fff;
+
+
+// //== Close
+// //
+// //##
+
+// @close-font-weight:           bold;
+// @close-color:                 #000;
+// @close-text-shadow:           0 1px 0 #fff;
+
+
+// //== Code
+// //
+// //##
+
+// @code-color:                  #c7254e;
+// @code-bg:                     #f9f2f4;
+
+// @kbd-color:                   #fff;
+// @kbd-bg:                      #333;
+
+// @pre-bg:                      #f5f5f5;
+// @pre-color:                   @gray-dark;
+// @pre-border-color:            #ccc;
+// @pre-scrollable-max-height:   340px;
+
+
+// //== Type
+// //
+// //##
+
+// //** Horizontal offset for forms and lists.
+// @component-offset-horizontal: 180px;
+// //** Text muted color
+// @text-muted:                  @gray-light;
+// //** Abbreviations and acronyms border color
+// @abbr-border-color:           @gray-light;
+// //** Headings small color
+// @headings-small-color:        @gray-light;
+// //** Blockquote small color
+// @blockquote-small-color:      @gray-light;
+// //** Blockquote font size
+// @blockquote-font-size:        (@font-size-base * 1.25);
+// //** Blockquote border color
+// @blockquote-border-color:     @gray-lighter;
+// //** Page header border color
+// @page-header-border-color:    @gray-lighter;
+// //** Width of horizontal description list titles
+// @dl-horizontal-offset:        @component-offset-horizontal;
+// //** Horizontal line color.
+// @hr-border:                   @gray-lighter;
diff --git a/resources/styles/variables/tutor-material.less b/exercises/resources/styles/variables/tutor-material.less
similarity index 100%
rename from resources/styles/variables/tutor-material.less
rename to exercises/resources/styles/variables/tutor-material.less
diff --git a/exercises/resources/styles/vendor-variables.less b/exercises/resources/styles/vendor-variables.less
new file mode 100644
index 0000000000..28686b7f95
--- /dev/null
+++ b/exercises/resources/styles/vendor-variables.less
@@ -0,0 +1,15 @@
+//override font awesome path to our own
+/*
+@fa-font-path: "fonts/";
+
+//override materialize icons font face to correct path 
+@font-face {
+    font-family: "Material-Design-Icons";
+    src:url("fonts/Material-Design-Icons.eot?-g7cqhn");
+    src:url("fonts/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
+        url("fonts/Material-Design-Icons.woff?-g7cqhn") format("woff"),
+        url("fonts/Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
+        url("fonts/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}*/
diff --git a/exercises/resources/styles/vocabulary.less b/exercises/resources/styles/vocabulary.less
new file mode 100644
index 0000000000..84e6d27347
--- /dev/null
+++ b/exercises/resources/styles/vocabulary.less
@@ -0,0 +1,27 @@
+@import "./mixins/editing-panes";
+
+.vocabulary-editor {
+
+  .editing-panes();
+
+  .distractors {
+    .heading {
+      display: flex;
+      justify-content: space-between;
+      .label { font-weight: bolder; font-size: 110%; }
+      .controls i {
+        cursor: pointer;
+        font-size: 120%;
+      }
+
+    }
+  }
+
+  // remove when vocab id is in spy mode
+  .vocabulary-hidden-id {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    color: lightgrey;
+  }
+}
diff --git a/exercises/src/ajax.coffee b/exercises/src/ajax.coffee
new file mode 100644
index 0000000000..8c547b4e50
--- /dev/null
+++ b/exercises/src/ajax.coffee
@@ -0,0 +1,32 @@
+# Simple jQuery.ajax() shim that calls back
+# from https://github.com/philschatz/octokat.js
+ajax = (options, cb) ->
+
+  # Use the browser XMLHttpRequest if it exists. If not, then this is NodeJS
+  # Pull this in for every request so sepia.js has a chance to override `window.XMLHTTPRequest`
+  if window?
+    XMLHttpRequest = window.XMLHttpRequest
+
+  xhr = new XMLHttpRequest()
+  xhr.dataType = options.dataType
+  xhr.overrideMimeType?(options.mimeType)
+  xhr.open(options.type, options.url)
+
+  if options.data and options.type isnt 'GET'
+    xhr.setRequestHeader('Content-Type', options.contentType)
+
+  for name, value of options.headers
+    xhr.setRequestHeader(name, value)
+
+  xhr.onreadystatechange = ->
+    if 4 is xhr.readyState
+      options.statusCode?[xhr.status]?()
+
+      if xhr.status >= 200 and xhr.status < 300 or xhr.status is 304 or xhr.status is 302
+        cb(null, xhr)
+      else
+        cb(xhr)
+  xhr.send(options.data)
+
+
+module.exports = ajax
diff --git a/exercises/src/api.coffee b/exercises/src/api.coffee
new file mode 100644
index 0000000000..7463b848b4
--- /dev/null
+++ b/exercises/src/api.coffee
@@ -0,0 +1,157 @@
+$ = require 'jquery'
+_ = require 'underscore'
+{ExerciseActions, ExerciseStore} = require './stores/exercise'
+{VocabularyActions, VocabularyStore} = require './stores/vocabulary'
+{ErrorsActions} = require './stores/errors'
+
+# Do some special things when running without a tutor-server backend.
+#
+# - suffix calls with `.json` so we can have `/plans` and `/plans/1`
+#   - otherwise there would be a file named `plans` and a directory named `plans`
+# - do not error when a PUT occurs
+IS_LOCAL = window.location.port is '8001' or window.__karma__
+
+CSRF_Token = document.head.querySelector('meta[name=csrf-token]')?.getAttribute("content")
+
+# Make sure API calls occur **after** all local Action listeners complete
+delay = (ms, fn) -> setTimeout(fn, ms)
+
+apiHelper = (Actions, listenAction, successAction, httpMethod, pathMaker) ->
+  listenAction.addListener 'trigger', (args...) ->
+    # Make sure API calls occur **after** all local Action listeners complete
+    delay 20, ->
+      {url, payload, httpMethod:httpMethodOverride} = pathMaker(args...)
+
+      opts =
+        method: httpMethod or httpMethodOverride
+        dataType: 'json'
+        headers:
+          'X-CSRF-Token': CSRF_Token,
+
+      if payload?
+        opts.data = JSON.stringify(payload)
+        opts.processData = false
+        # For now, the backend is expecting JSON and cannot accept url-encoded forms
+        opts.contentType = 'application/json'
+
+      if IS_LOCAL
+        [uri, params] = url.split("?")
+        if opts.method is 'GET'
+          url = "#{uri}.json?#{params}"
+        else
+          url = "#{uri}/#{opts.method}.json?#{params}"
+          opts.method = 'GET'
+
+      resolved = (results, statusStr, jqXhr) ->
+        successAction(results, args...) # Include listenAction for faking
+      rejected = (jqXhr, statusMessage, err) ->
+        statusCode = jqXhr.status
+
+        if statusMessage is 'parsererror' and statusCode is 200 and IS_LOCAL
+          if httpMethod is 'PUT' or httpMethod is 'PATCH'
+            # HACK for PUT
+            successAction(null, args...)
+          else
+            # Hack for local testing. Webserver returns 200 + HTML for 404's
+            Actions.FAILED(404, 'Error Parsing the JSON or a 404', args...)
+        else if statusCode is 404
+          Actions.FAILED(statusCode, 'ERROR_NOTFOUND', args...)
+        else
+          # Parse the error message and fail
+          try
+            msg = JSON.parse(jqXhr.responseText)
+          catch e
+            msg = jqXhr.responseText
+          ErrorsActions.setServerError(statusCode, jqXhr.responseText, {url, opts})
+          Actions.FAILED(statusCode, msg, args...)
+
+      $.ajax(url, opts)
+      .then(resolved, rejected)
+
+start = ->
+  apiHelper ExerciseActions, ExerciseActions.load, ExerciseActions.loaded, 'GET', (id) ->
+    id = if id.indexOf("@") is -1 then "#{id}@latest" else id
+    url: "/api/exercises/#{id}"
+
+  apiHelper ExerciseActions, ExerciseActions.save, ExerciseActions.saved, 'PUT', (id) ->
+
+    # backend expects the changed props and the entire exercise for some reason
+    obj = ExerciseStore.getChanged(id)
+    obj.exercise = ExerciseStore.get(id)
+
+    exerciseId = if id.indexOf("@") is -1 then id else id.split("@")[0]
+
+    url:"/api/exercises/#{exerciseId}@draft"
+    httpMethod: 'PUT'
+    payload: obj
+
+  apiHelper ExerciseActions, ExerciseActions.create, ExerciseActions.created, 'POST', (id, obj) ->
+    # backend expects the changed props and the entire exercise for some reason
+    obj = ExerciseStore.get(id)
+
+    url:"/api/exercises"
+    httpMethod: 'POST'
+    payload: obj
+
+  apiHelper ExerciseActions, ExerciseActions.publish, ExerciseActions.published, 'PUT', (id) ->
+
+    obj = ExerciseStore.get(id)
+    uid = ExerciseStore.getId(id)
+
+    url: "/api/exercises/#{uid}/publish"
+    httpMethod: 'PUT'
+    payload: obj
+
+  apiHelper ExerciseActions, ExerciseActions.deleteAttachment, ExerciseActions.attachmentDeleted, 'DELETE',
+  (exerciseUid, attachmentId) ->
+    url: "/api/exercises/#{exerciseUid}/attachments/#{attachmentId}"
+    httpMethod: 'DELETE'
+
+  apiHelper VocabularyActions, VocabularyActions.load, VocabularyActions.loaded, 'GET', (id) ->
+
+    id = if id.indexOf("@") is -1 then "#{id}@draft" else id
+
+    url: "/api/vocab_terms/#{id}"
+
+  apiHelper VocabularyActions, VocabularyActions.create, VocabularyActions.created, 'POST', (id, obj) ->
+    obj = VocabularyStore.get(id)
+
+    url:"/api/vocab_terms"
+    httpMethod: 'POST'
+    payload: obj
+
+  apiHelper VocabularyActions, VocabularyActions.save, VocabularyActions.saved , 'PUT', (id, obj) ->
+    obj = VocabularyStore.get(id)
+
+    vocabId = if id.indexOf("@") is -1 then id else id.split("@")[0]
+
+    url:"/api/vocab_terms/#{vocabId}@draft"
+    httpMethod: 'PUT'
+    payload: obj
+
+  apiHelper VocabularyActions, VocabularyActions.publish, VocabularyActions.published, 'PUT', (id) ->
+    obj = VocabularyStore.get(id)
+
+    url: "/api/vocab_terms/#{obj.uid}/publish"
+    httpMethod: 'PUT'
+    payload: obj
+
+uploadExerciseImage = (exerciseUid, image, cb) ->
+  url = "/api/exercises/#{exerciseUid}/attachments"
+  xhr = new XMLHttpRequest()
+  xhr.addEventListener 'load', (req) ->
+    cb(if req.currentTarget.status is 201
+      attachment = JSON.parse(req.target.response)
+      ExerciseActions.attachmentUploaded(exerciseUid, attachment)
+      {response: attachment, progress: 100}
+    else
+      {error: req.currentTarget.statusText})
+  xhr.addEventListener 'progress', (ev) ->
+    cb({progress: (ev.total / (ev.total or image.size) * 100) })
+  xhr.open('POST', url, true)
+  xhr.setRequestHeader('X-CSRF-Token', CSRF_Token)
+  form = new FormData()
+  form.append("image", image, image.name)
+  xhr.send(form)
+
+module.exports = {start, uploadExerciseImage}
diff --git a/exercises/src/components/app.cjsx b/exercises/src/components/app.cjsx
new file mode 100644
index 0000000000..63fec400ff
--- /dev/null
+++ b/exercises/src/components/app.cjsx
@@ -0,0 +1,139 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+Location = require 'stores/location'
+
+ErrorModal = require './error-modal'
+UserActionsMenu = require 'components/user-actions-menu'
+{SuretyGuard} = require 'shared'
+NetworkActivity = require './network-activity-spinner'
+{VocabularyStore, VocabularyActions} = require 'stores/vocabulary'
+
+App = React.createClass
+
+  propTypes:
+    location: React.PropTypes.object
+    data:  React.PropTypes.object.isRequired
+
+  getDefaultProps: ->
+    location: new Location
+
+  componentWillMount: ->
+    @props.location.startListening(@onHistoryChange)
+    {view, id} = @props.location.getCurrentUrlParts()
+    if id is 'new'
+      @setState(newId: @createNewRecord(view))
+    else
+      @loadRecord(view, id)
+
+  loadRecord: (type, id) ->
+    return unless type and id
+    {actions, store} = @props.location.partsForView(type)
+
+    unless store.isLoading(id) or store.get(id)
+      store.once 'loaded', =>
+        @props.location.onRecordLoad(type, id, store)
+      actions.load(id)
+
+  update: -> @forceUpdate()
+
+  componentWillUnmount: ->
+    @props.location.stopListening()
+
+  onHistoryChange: (location) ->
+    @setState(location: location)
+    {view, id} = @props.location.getCurrentUrlParts()
+    if id is 'new'
+      @setState(newId: @createNewRecord(view))
+    else
+      @loadRecord(view, id)
+
+  onNewRecord: (type, ev) ->
+    ev.preventDefault()
+    newId = @createNewRecord(type)
+    @setState({newId})
+    @props.location.visitNewRecord(type)
+
+  createNewRecord: (type) ->
+    {actions, store} = @props.location.partsForView(type)
+    newId = store.freshLocalId()
+    actions.createBlank(newId)
+    if type is 'vocabulary'
+      vocabId = VocabularyStore.freshLocalId()
+      actions.setAsVocabularyPlaceHolder(newId, vocabId)
+      VocabularyActions.createBlank(vocabId)
+
+    return newId
+
+  onReset: (ev) ->
+    ev.preventDefault()
+    @props.location.visitSearch()
+
+  render: ->
+    {view, id, args} = @props.location.getCurrentUrlParts()
+    if id is 'new'
+      id = @state.newId or @createNewRecord(view)
+
+    {Body, Controls, store, actions} = @props.location.partsForView(view)
+
+    Body = NetworkActivity if store?.isLoading(id)
+
+    guardProps =
+      onlyPromptIf: ->
+        id and store?.isChanged(id)
+      placement: 'right'
+      message: "You will lose all unsaved changes"
+
+    componentProps =
+      id: id
+      location: @props.location
+
+    classes = classnames(view, 'openstax', 'editor-app', 'container-fluid')
+
+
+    <div className={classes}>
+      <ErrorModal />
+      <nav className="navbar navbar-default">
+        <div className="container-fluid controls-container">
+          <div className="navbar-header">
+            <BS.ButtonToolbar className="navbar-btn">
+              {if view
+                <SuretyGuard
+                  onConfirm={@onReset}
+                  {...guardProps}
+                >
+                  <a href="/exercises" className="btn btn-danger back">Back</a>
+                </SuretyGuard>}
+
+              <SuretyGuard
+                onConfirm={_.partial @onNewRecord, 'exercises'}
+                {...guardProps}
+              >
+                <a className="btn btn-success exercises blank">New Exercise</a>
+              </SuretyGuard>
+
+              <SuretyGuard
+                onConfirm={_.partial @onNewRecord, 'vocabulary'}
+                {...guardProps}
+              >
+                <a className="btn btn-success vocabulary blank">New Vocabulary Term</a>
+              </SuretyGuard>
+
+            </BS.ButtonToolbar>
+          </div>
+
+          <div className="navbar-header view-controls">
+            <Controls {...componentProps} />
+          </div>
+
+          <UserActionsMenu user={@props.data.user} />
+
+
+        </div>
+      </nav>
+
+      <Body {...componentProps} />
+    </div>
+
+module.exports = App
diff --git a/exercises/src/components/error-modal.cjsx b/exercises/src/components/error-modal.cjsx
new file mode 100644
index 0000000000..45dbce9a6f
--- /dev/null
+++ b/exercises/src/components/error-modal.cjsx
@@ -0,0 +1,79 @@
+# coffeelint: disable=max_line_length
+
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{ErrorsStore, ErrorsActions} = require '../stores/errors'
+
+SUPPORT_URL = 'https://docs.google.com/a/rice.edu/forms/d/1gw-KCCQ1oHzfCQ8JjgDgZa9K5bfGEbp959RweYCKcG8/viewform'
+
+HTMLResponse = React.createClass
+
+  markup: ->
+    __html: @props.message
+
+  render: ->
+    <div className="html" dangerouslySetInnerHTML={@markup()} />
+
+ErrorModal = React.createClass
+
+  componentWillMount: ->
+    ErrorsStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    ErrorsStore.removeChangeListener(@update)
+
+  update: -> @forceUpdate()
+
+  onHide: ->
+    ErrorsActions.acknowledge()
+
+  render: ->
+    error = ErrorsStore.getError()
+
+    return null if _.isEmpty(error)
+
+    {statusCode, message, request} = error
+
+    if request.opts.data?
+      dataMessage =
+        <span>with <pre>{request.opts.data}</pre></span>
+
+    debugInfo = [
+    ]
+
+    if statusCode is 500 # 500 errors from BE are HTML encoded
+      message = <HTMLResponse message={message} />
+
+    <BS.Modal
+      className='error-modal'
+      enforceFocus={false}
+      autoFocus={false}
+      show={true}
+      backdrop={false}
+      animation={false}
+      onRequestHide={@onHide}
+      title={"An error with code #{statusCode} has occured"}
+      onHide={@onHide}>
+
+      <div className='modal-body'>
+        <p>Please fill out an <a target="_blank" href={SUPPORT_URL}>internal support
+          request</a> <i>(opens in new tab)</i>.
+        </p>
+        <p>
+          When submitting the request, please include the error details show below.
+        </p>
+        <p>Error details returned from the server:</p>
+        <div className='response'>{message or 'No response was received'}</div>
+        <div className='request'>
+          <kbd>{request.opts.method}</kbd> on {request.url} {dataMessage}
+        </div>
+      </div>
+
+      <div className='modal-footer'>
+        <BS.Button bsStyle='primary' onClick={@onHide}>Close</BS.Button>
+      </div>
+    </BS.Modal>
+
+module.exports = ErrorModal
diff --git a/exercises/src/components/exercise.cjsx b/exercises/src/components/exercise.cjsx
new file mode 100644
index 0000000000..f01c6c3ef5
--- /dev/null
+++ b/exercises/src/components/exercise.cjsx
@@ -0,0 +1,124 @@
+# @csx React.DOM
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+ExercisePreview = require 'components/exercise/preview'
+PublishedModal  = require './published-modal'
+ExerciseTags    = require 'components/exercise/tags'
+Question        = require 'components/exercise/question'
+Attachments     = require 'components/exercise/attachments'
+
+
+Exercise = React.createClass
+  propTypes:
+    id:   React.PropTypes.string.isRequired
+    location: React.PropTypes.object
+
+  getInitialState: -> {}
+  update: -> @forceUpdate()
+
+  componentWillMount: ->
+    ExerciseStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    ExerciseStore.removeChangeListener(@update)
+
+  sync: -> ExerciseActions.sync(@props.id)
+
+  moveQuestion: (questionId, direction) ->
+    ExerciseActions.moveQuestion(@props.id, questionId, direction)
+
+  removeQuestion: (questionId) ->
+    ExerciseActions.removeQuestion(@props.id, questionId)
+
+  updateStimulus: (event) ->
+    ExerciseActions.updateStimulus(@props.id, event.target?.value)
+
+  renderIntroTab: ->
+    id = @props.id
+    <BS.Tab eventKey="intro" title="Intro">
+      <div className="exercise-stimulus">
+        <label>Exercise Stimulus</label>
+        <textarea onChange={@updateStimulus} defaultValue={ExerciseStore.getStimulus(id)}></textarea>
+      </div>
+    </BS.Tab>
+
+  renderMpqTabs: ->
+    {questions} = ExerciseStore.get(@props.id)
+    for question, i in questions
+      <BS.Tab key={question.id} eventKey={"question-#{i}"} title={"Question #{i+1}"}>
+        <Question id={question.id}
+          sync={@sync}
+          canMoveLeft={i isnt 0}
+          canMoveRight={i isnt questions.length - 1}
+          moveQuestion={@moveQuestion}
+          removeQuestion={_.partial(@removeQuestion, question.id)} />
+      </BS.Tab>
+
+  renderSingleQuestionTab: ->
+    {questions} = ExerciseStore.get(@props.id)
+    <BS.Tab key={0} eventKey='question-0' title='Question'>
+      <Question id={_.first(questions)?.id} sync={@sync} />
+    </BS.Tab>
+
+  addQuestion: ->
+    ExerciseActions.addQuestionPart(@props.id)
+
+  selectTab: (tab) -> @setState({tab})
+
+  visitVocab: ->
+    vocabId = ExerciseStore.getVocabId(@props.id)
+    @props.location.visitVocab(vocabId)
+
+  getActiveTab: (showMPQ) ->
+    if (not @state.tab or @state.tab?.indexOf('question-') is -1)
+      return @state.tab
+
+    question = @state.tab.split('-')[1]
+    numQuestions = ExerciseStore.getQuestions(@props.id).length
+    if (not showMPQ or question >= numQuestions)
+      return 'question-0'
+
+    @state.tab
+
+  render: ->
+    exercise = ExerciseStore.get(@props.id)
+    return null unless exercise
+
+    showMPQ = ExerciseStore.isMultiPart(@props.id)
+
+    tab = @getActiveTab(showMPQ)
+
+    <div className='exercise-editor'>
+      <PublishedModal exerciseId={@props.id} />
+      <div className="editing-controls">
+
+       {if showMPQ
+         <BS.Button onClick={@addQuestion} className="add-mpq"
+           bsStyle="primary">Add Question</BS.Button>}
+
+        <BS.Tabs defaultActiveKey='question-0' animation={false}
+          activeKey={tab} onSelect={@selectTab}
+        >
+          {if showMPQ then @renderIntroTab()}
+          {if showMPQ then @renderMpqTabs() else @renderSingleQuestionTab()}
+          <BS.Tab eventKey='tags' title='Tags'>
+            <ExerciseTags exerciseId={@props.id} sync={@sync} />
+          </BS.Tab>
+          { if not ExerciseStore.isNew(@props.id)
+            <BS.Tab eventKey='assets' title='Assets'>
+              <Attachments exerciseId={@props.id} />
+            </BS.Tab>
+          }
+        </BS.Tabs>
+      </div>
+
+      <ExercisePreview exerciseId={@props.id} />
+
+    </div>
+
+
+module.exports = Exercise
diff --git a/exercises/src/components/exercise/answer.cjsx b/exercises/src/components/exercise/answer.cjsx
new file mode 100644
index 0000000000..cdd5916865
--- /dev/null
+++ b/exercises/src/components/exercise/answer.cjsx
@@ -0,0 +1,60 @@
+React = require 'react'
+_ = require 'underscore'
+{AnswerActions, AnswerStore} = require 'stores/answer'
+
+module.exports = React.createClass
+  displayName: 'Answer'
+
+  getInitialState: -> {}
+
+  propTypes:
+    id: React.PropTypes.number.isRequired
+    sync: React.PropTypes.func.isRequired
+
+  updateContent: (event) ->
+    AnswerActions.updateContent(@props.id, event.target?.value)
+    @sync()
+
+  changeCorrect: (event) ->
+    @props.changeAnswer(@props.id)
+    @sync()
+
+  updateFeedback: (event) ->
+    AnswerActions.updateFeedback(@props.id, event.target?.value)
+    @sync()
+
+  sync: ->
+    @props.sync()
+    @forceUpdate()
+
+  render: ->
+    moveUp = <a className="pull-right" onClick={_.partial(@props.moveAnswer, @props.id, 1)}>
+      <i className="fa fa-arrow-circle-down"/>
+    </a> if @props.canMoveUp
+
+    moveDown = <a className="pull-right" onClick={_.partial(@props.moveAnswer, @props.id, -1)}>
+      <i className="fa fa-arrow-circle-up" />
+    </a> if @props.canMoveDown
+
+    correctClassname = 'correct-answer' if AnswerStore.isCorrect(@props.id)
+
+    <li className={correctClassname}>
+      <p>
+        <span className="answer-actions">
+          <a className="pull-right" onClick={_.partial(@props.removeAnswer, @props.id)}>
+            <i className="fa fa-ban" />
+          </a>
+          {moveUp}
+          {moveDown}
+          <a className="pull-right is-correct #{correctClassname}" onClick={@changeCorrect}>
+            <i className="fa fa-check-circle-o" />
+          </a>
+        </span>
+      </p>
+      <label>Distractor</label>
+      <textarea onChange={@updateContent} value={AnswerStore.getContent(@props.id)}>
+      </textarea>
+      <label>Choice-Level Feedback</label>
+      <textarea onChange={@updateFeedback} value={AnswerStore.getFeedback(@props.id)}>
+      </textarea>
+    </li>
diff --git a/exercises/src/components/exercise/attachments/attachment.cjsx b/exercises/src/components/exercise/attachments/attachment.cjsx
new file mode 100644
index 0000000000..a7d2b4fb8d
--- /dev/null
+++ b/exercises/src/components/exercise/attachments/attachment.cjsx
@@ -0,0 +1,38 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+
+Attachment = React.createClass
+
+  propTypes:
+    exerciseUid: React.PropTypes.string.isRequired
+    attachment: React.PropTypes.shape({
+      asset: React.PropTypes.shape({
+        url: React.PropTypes.string.isRequired
+        large: React.PropTypes.shape( url: React.PropTypes.string.isRequired ).isRequired
+        medium: React.PropTypes.shape( url: React.PropTypes.string.isRequired ).isRequired
+        small: React.PropTypes.shape( url: React.PropTypes.string.isRequired ).isRequired
+      }).isRequired
+    }).isRequired
+
+  deleteImage: ->
+    ExerciseActions.deleteAttachment(@props.exerciseUid, @props.attachment.id)
+
+  render: ->
+    # large.url will be null on non-image assets (like PDF)
+    url = @props.attachment.asset.large?.url or @props.attachment.asset.url
+    copypaste = """
+      <img src="#{url}" alt="">
+    """
+    <div className='attachment with-image'>
+      <img className="preview" src={@props.attachment.asset.url} />
+      <div className="controls">
+        <BS.Button onClick={@deleteImage}>Delete</BS.Button>
+      </div>
+      <textarea value={copypaste} readOnly className="copypaste" />
+    </div>
+
+module.exports = Attachment
diff --git a/exercises/src/components/exercise/attachments/chooser.cjsx b/exercises/src/components/exercise/attachments/chooser.cjsx
new file mode 100644
index 0000000000..0c2b83e1ea
--- /dev/null
+++ b/exercises/src/components/exercise/attachments/chooser.cjsx
@@ -0,0 +1,67 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+classnames = require 'classnames'
+api = require 'api'
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+
+AttachmentChooser = React.createClass
+
+  propTypes:
+    exerciseUid: React.PropTypes.string.isRequired
+
+  getInitialState: -> {}
+
+  updateUploadStatus: (status) ->
+    if status.error
+      @setState(error: status.error)
+    if status.progress?
+      @setState(progress: status.progress, error: false)
+    if status.response # 100%, we're done
+      @replaceState({}) # <- N.B. replaceState, not setState.
+
+  uploadImage: ->
+    return unless @state.file
+    api.uploadExerciseImage(@props.exerciseUid, @state.file, @updateUploadStatus)
+    @setState(progress: 0)
+
+  renderUploadStatus: ->
+    return unless @state.progress?
+    <BS.ProgressBar now={@state.progress} />
+
+  onImageChange: (ev) ->
+    ev.preventDefault()
+    file = _.first(ev.target.files)
+    return unless file
+    reader = new FileReader()
+    reader.onloadend = =>
+      @replaceState({file, imageData: reader.result})
+    reader.readAsDataURL(file)
+
+  renderUploadBtn: ->
+    return unless @state.imageData and not @state.progress
+    <BS.Button onClick={@uploadImage}>Upload</BS.Button>
+
+  renderErrors: ->
+    return null unless @state.error
+    <div className='error'>{@state.error}</div>
+
+  render: ->
+    image = <img className="preview" src={@state.imageData} /> if @state.imageData
+    classNames = classnames('attachment', {
+      'with-image': image
+    })
+    <div className={classNames}>
+      {image}
+      <div className="controls">
+        <label className="selector">
+          {if image then 'Choose different image' else 'Add new image'}
+          <input id='file' className="file" type="file" onChange={@onImageChange} />
+        </label>
+        {@renderUploadBtn()}
+      </div>
+      {@renderErrors()}
+      {@renderUploadStatus()}
+    </div>
+
+module.exports = AttachmentChooser
diff --git a/exercises/src/components/exercise/attachments/index.cjsx b/exercises/src/components/exercise/attachments/index.cjsx
new file mode 100644
index 0000000000..2da3d1602d
--- /dev/null
+++ b/exercises/src/components/exercise/attachments/index.cjsx
@@ -0,0 +1,21 @@
+React = require 'react'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+Attachment = require './attachment'
+AttachmentChooser = require './chooser'
+
+Attachements = React.createClass
+
+  propTypes:
+    exerciseId: React.PropTypes.string.isRequired
+
+  render: ->
+    exercise = ExerciseStore.get(@props.exerciseId)
+    <div className="attachments">
+      {for attachment in exercise.attachments or []
+        <Attachment key={attachment.asset.url} exerciseUid={exercise.uid} attachment={attachment} />}
+      <AttachmentChooser exerciseUid={exercise.uid} />
+    </div>
+
+
+module.exports = Attachements
diff --git a/exercises/src/components/exercise/controls.cjsx b/exercises/src/components/exercise/controls.cjsx
new file mode 100644
index 0000000000..c328b10aac
--- /dev/null
+++ b/exercises/src/components/exercise/controls.cjsx
@@ -0,0 +1,88 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+AsyncButton = require 'shared/src/components/buttons/async-button.cjsx'
+MPQToggle = require 'components/exercise/mpq-toggle'
+{SuretyGuard} = require 'shared'
+
+Location = require 'stores/location'
+
+ExerciseControls = React.createClass
+
+  propTypes:
+    id:   React.PropTypes.string.isRequired
+    location: React.PropTypes.object
+
+  componentWillMount: ->
+    ExerciseStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    ExerciseStore.removeChangeListener(@update)
+
+  update: -> @forceUpdate()
+
+  isExerciseDirty: ->
+    @props.id and ExerciseStore.isChanged(@props.id)
+
+  saveExercise: ->
+    if ExerciseStore.isNew(@props.id)
+      ExerciseActions.create(@props.id, ExerciseStore.get(@props.id))
+      ExerciseStore.once 'updated', (id) =>
+        @props.location.visitExercise(id)
+    else
+      ExerciseActions.save(@props.id)
+
+   publishExercise: ->
+    ExerciseActions.publish(@props.id)
+
+  render: ->
+    {id} = @props
+
+    guardProps =
+      onlyPromptIf: @isExerciseDirty
+      placement: 'right'
+      message: "You will lose all unsaved changes"
+
+    <div className="exercise-navbar-controls">
+      <BS.ButtonToolbar className="navbar-btn">
+        { if id?
+          <AsyncButton
+            bsStyle='info'
+            className='draft'
+            onClick={@saveExercise}
+            disabled={not ExerciseStore.isSavable(id)}
+            isWaiting={ExerciseStore.isSaving(id)}
+            waitingText='Saving...'
+            isFailed={ExerciseStore.isFailed(id)}
+            >
+            Save Draft
+          </AsyncButton>
+        }
+        { unless ExerciseStore.isNew(id)
+          <SuretyGuard
+            onConfirm={@publishExercise}
+            okButtonLabel='Publish'
+            placement='right'
+            message="Once an exercise is published, it is available for use."
+          >
+            <AsyncButton
+              bsStyle='primary'
+              className='publish'
+              disabled={not ExerciseStore.isPublishable(id)}
+              isWaiting={ExerciseStore.isPublishing(id)}
+              waitingText='Publishing...'
+              isFailed={ExerciseStore.isFailed(id)}
+              >
+              Publish
+            </AsyncButton>
+          </SuretyGuard>
+        }
+      </BS.ButtonToolbar>
+      <div className="right-side">
+        <MPQToggle exerciseId={@props.id} />
+      </div>
+
+    </div>
+
+module.exports = ExerciseControls
diff --git a/exercises/src/components/exercise/mpq-toggle.cjsx b/exercises/src/components/exercise/mpq-toggle.cjsx
new file mode 100644
index 0000000000..9c39c3286c
--- /dev/null
+++ b/exercises/src/components/exercise/mpq-toggle.cjsx
@@ -0,0 +1,43 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+
+{SuretyGuard} = require 'shared'
+
+MPQToggle = React.createClass
+
+  propTypes:
+    exerciseId: React.PropTypes.string.isRequired
+
+  onConfirm: ->
+    ExerciseActions.toggleMultiPart(@props.exerciseId)
+
+  onToggleMPQ: (ev) ->
+    # show warning if going from multi-part to multiple choice
+    if ExerciseStore.isMultiPart(@props.exerciseId)
+      ev.preventDefault()
+    else
+      ExerciseActions.toggleMultiPart(@props.exerciseId)
+
+  render: ->
+    showMPQ = ExerciseStore.isMultiPart(@props.exerciseId)
+
+    checkbox = <BS.Input type="checkbox" label="Exercise contains multiple parts"
+      checked={showMPQ} wrapperClassName="mpq-toggle" onChange={@onToggleMPQ} />
+
+    if showMPQ
+      <SuretyGuard
+        onConfirm={@onConfirm}
+        okButtonLabel='Convert'
+        placement='left'
+        message={'''
+          If this exercise is converted to be multiple-choice,
+          the intro and all but the first question will be
+          removed.'''}
+      >{checkbox}</SuretyGuard>
+    else
+      checkbox
+
+module.exports = MPQToggle
diff --git a/exercises/src/components/exercise/preview.cjsx b/exercises/src/components/exercise/preview.cjsx
new file mode 100644
index 0000000000..d6e26c229e
--- /dev/null
+++ b/exercises/src/components/exercise/preview.cjsx
@@ -0,0 +1,42 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+
+{ExercisePreview} = require 'shared'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+
+ExercisePreviewWrapper = React.createClass
+
+  propTypes:
+    exerciseId: React.PropTypes.string.isRequired
+
+  componentWillMount: ->
+    ExerciseStore.addChangeListener(@update)
+    unless ExerciseStore.isLoading(@props.exerciseId) or ExerciseStore.get(@props.exerciseId)
+      ExerciseActions.load(@props.exerciseId)
+
+  componentWillUnmount: ->
+    ExerciseStore.removeChangeListener(@update)
+
+  update: -> @forceUpdate()
+
+  previewData: (ex) ->
+    content: ex
+    tags: _.map ex.tags, (tag) -> name: tag
+
+  render: ->
+    exercise = ExerciseStore.get(@props.exerciseId)
+    return null unless exercise
+    <div className="exercise-preview">
+      <ExercisePreview
+        exercise={@previewData(exercise)}
+        displayAllTags={true}
+        displayFormats={true}
+        displayFeedback={true}
+        hideAnswers={false}
+      />
+    </div>
+
+module.exports = ExercisePreviewWrapper
diff --git a/exercises/src/components/exercise/question-format-type.cjsx b/exercises/src/components/exercise/question-format-type.cjsx
new file mode 100644
index 0000000000..59c10c4dc3
--- /dev/null
+++ b/exercises/src/components/exercise/question-format-type.cjsx
@@ -0,0 +1,67 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{QuestionActions, QuestionStore} = require 'stores/question'
+
+
+PREFIX = 'format'
+TYPES =
+  'multiple-choice' : 'Multiple Choice'
+  'true-false'      : 'True/False'
+
+# Temporarily removed as options (not needed & causes 500 on BE)
+#  'vocabulary'      : 'Vocabulary'
+#  'open-ended'      : 'Open Ended'
+
+QuestionFormatType = React.createClass
+
+  propTypes:
+    questionId: React.PropTypes.number.isRequired
+    sync: React.PropTypes.func.isRequired
+
+  update: -> @forceUpdate()
+
+  componentWillMount: ->
+    QuestionStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    QuestionStore.removeChangeListener(@update)
+
+  updateFormat: (ev) ->
+    selected = ev.target.value
+    for id, name of TYPES
+      QuestionActions.toggleFormat(@props.questionId, id, selected is id)
+    @props.sync()
+
+  isFormatChecked: (name) ->
+    QuestionStore.hasFormat(@props.questionId, name)
+
+  setChoiceRequired: (ev) ->
+    QuestionActions.toggleFormat(@props.questionId, 'free-response', not ev.target.checked)
+    @props.sync()
+
+  doesRequireChoices: ->
+    not @isFormatChecked('free-response')
+
+  render: ->
+    <div className="format-type">
+      {for id, name of TYPES
+        <BS.Input
+          key={id}
+          type="radio"
+          name={"#{@props.questionId}-formats"}
+          label={name}
+          value={id}
+          onClick={@updateFormat}
+          checked={@isFormatChecked(id)}
+        />}
+
+      {<BS.Input type="checkbox" label="Requires Choices"
+        onChange={@setChoiceRequired}
+        checked={@doesRequireChoices()}
+      /> if QuestionStore.hasFormat(@props.questionId, 'multiple-choice')}
+    </div>
+
+
+module.exports = QuestionFormatType
diff --git a/exercises/src/components/exercise/question.cjsx b/exercises/src/components/exercise/question.cjsx
new file mode 100644
index 0000000000..5c74481c32
--- /dev/null
+++ b/exercises/src/components/exercise/question.cjsx
@@ -0,0 +1,133 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+
+_ = require 'underscore'
+
+{SuretyGuard} = require 'shared'
+QuestionFormatType = require './question-format-type'
+Answer = require './answer'
+{QuestionActions, QuestionStore} = require 'stores/question'
+{AnswerActions, AnswerStore} = require 'stores/answer'
+
+module.exports = React.createClass
+  displayName: 'Question'
+
+  getInitialState: -> {}
+  update: -> @forceUpdate()
+
+  componentWillMount: ->
+    QuestionStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    QuestionStore.removeChangeListener(@update)
+
+  propTypes:
+    id: React.PropTypes.number.isRequired
+    sync: React.PropTypes.func.isRequired
+
+  sync: ->
+    @props.sync()
+    @forceUpdate()
+
+  changeAnswer: (answerId) ->
+    curAnswer = QuestionStore.getCorrectAnswer(@props.id)
+    QuestionActions.setCorrectAnswer(@props.id, answerId, curAnswer?.id)
+    @sync()
+
+  updateStimulus: (event) ->
+    QuestionActions.updateStimulus(@props.id, event.target?.value)
+    @sync()
+
+  updateStem: (event) ->
+    QuestionActions.updateStem(@props.id, event.target?.value)
+    @sync()
+
+  updateSolution: (event) ->
+    QuestionActions.updateSolution(@props.id, event.target?.value)
+    @sync()
+
+  addAnswer: ->
+    QuestionActions.addNewAnswer(@props.id)
+    @sync()
+
+  removeAnswer:(answerId) ->
+    QuestionActions.removeAnswer(@props.id, answerId)
+    @sync()
+
+  moveAnswer: (answerId, direction) ->
+    QuestionActions.moveAnswer(@props.id, answerId, direction)
+    @sync()
+
+  multipleChoiceClicked: (event) -> QuestionActions.toggleMultipleChoiceFormat(@props.id)
+  freeResponseClicked: (event) -> QuestionActions.toggleFreeResponseFormat(@props.id)
+  preserveOrderClicked: (event) -> QuestionActions.togglePreserveOrder(@props.id)
+
+  render: ->
+    { id, removeQuestion, moveQuestion, canMoveLeft, canMoveRight } = @props
+    invalid = QuestionStore.validate(id)
+    answers = []
+
+    for answer, index in QuestionStore.getAnswers(id)
+      answers.push(<Answer key={answer.id}
+        sync={@props.sync}
+        id={answer.id}
+        canMoveUp={index isnt QuestionStore.getAnswers(id).length - 1}
+        canMoveDown={index isnt 0}
+        moveAnswer={@moveAnswer}
+        removeAnswer={@removeAnswer}
+        changeAnswer={@changeAnswer}/>)
+
+    <div className="question">
+      {if removeQuestion # if we can remove it, that means we're a MPQ
+        <div className="controls">
+          {if canMoveLeft
+            <a className="move-question" onClick={_.partial(moveQuestion, id, -1)}>
+              <i className="fa fa-arrow-circle-left"/>
+            </a>
+          }
+          <SuretyGuard
+            onConfirm={removeQuestion}
+            onlyPromptIf={ -> QuestionStore.isChanged(id)}
+            message="Removing a question will permanently remove the question and it's answers"
+          >
+            <a className="remove-question">
+              <i className="fa fa-trash" />
+              Remove Question
+            </a>
+          </SuretyGuard>
+          {if canMoveRight
+            <a className="move-question" onClick={_.partial(moveQuestion, id, 1)}>
+              <i className="fa fa-arrow-circle-right"/>
+            </a>
+          }
+        </div>
+      }
+      {<BS.Alert bsStyle="warning"
+        >To save your work, you must fill out the {invalid.part}</BS.Alert> unless invalid.valid}
+
+      <QuestionFormatType sync={@props.sync} questionId={id} />
+
+      {<BS.Input type="checkbox" label="Order Matters"
+        onChange={@preserveOrderClicked}
+        checked={QuestionStore.isOrderPreserved(id)}
+        /> if QuestionStore.hasFormat(id, 'multiple-choice')}
+
+      <div>
+        <label>Question Stem</label>
+        <textarea onChange={@updateStem} value={QuestionStore.getStem(id)}></textarea>
+      </div>
+      <div>
+        <label>
+          Answers:
+        </label>
+        <a className="pull-right" onClick={@addAnswer}>Add New</a>
+        <ol>
+          {answers}
+        </ol>
+      </div>
+      <div>
+        <label>Detailed Solution</label>
+        <textarea onChange={@updateSolution} value={QuestionStore.getSolution(id)}></textarea>
+      </div>
+
+    </div>
diff --git a/exercises/src/components/exercise/tags.cjsx b/exercises/src/components/exercise/tags.cjsx
new file mode 100644
index 0000000000..a68b24dbd9
--- /dev/null
+++ b/exercises/src/components/exercise/tags.cjsx
@@ -0,0 +1,44 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+
+Books           = require 'components/tags/books'
+Lo              = require 'components/tags/lo'
+QuestionType    = require 'components/tags/question-type'
+FilterType      = require 'components/tags/filter-type'
+CnxMod          = require 'components/tags/cnx-mod'
+CnxFeature      = require 'components/tags/cnx-feature'
+Dok             = require 'components/tags/dok'
+Blooms          = require 'components/tags/blooms'
+Time            = require 'components/tags/time'
+RequiresContext = require 'components/tags/requires-context'
+
+ExerciseTags = React.createClass
+  propTypes:
+    exerciseId: React.PropTypes.string.isRequired
+
+  render: ->
+    tagProps = {
+      id: @props.exerciseId
+      store:   ExerciseStore
+      actions: ExerciseActions
+    }
+    <div className="tags">
+      <BS.Row>
+        <Books           {...tagProps} />
+        <Lo              {...tagProps} />
+        <QuestionType    {...tagProps} />
+        <FilterType      {...tagProps} />
+        <RequiresContext {...tagProps} />
+        <CnxMod          {...tagProps} />
+        <CnxFeature      {...tagProps} />
+        <Dok             {...tagProps} />
+        <Blooms          {...tagProps} />
+        <Time            {...tagProps} />
+      </BS.Row>
+    </div>
+
+
+module.exports = ExerciseTags
diff --git a/exercises/src/components/network-activity-spinner.cjsx b/exercises/src/components/network-activity-spinner.cjsx
new file mode 100644
index 0000000000..d13098bd91
--- /dev/null
+++ b/exercises/src/components/network-activity-spinner.cjsx
@@ -0,0 +1,19 @@
+React = require 'react'
+
+NetworkActivitySpinner = React.createClass
+
+  propTypes:
+    message: React.PropTypes.string
+
+  getDefaultProps: ->
+    message: 'Loading…'
+
+  render: ->
+    <div className="network-activity">
+      <span className="spinner">
+        <i className="fa fa-spin fa-spinner fa-4x" />
+        <span className="message">{@props.message}</span>
+      </span>
+    </div>
+
+module.exports = NetworkActivitySpinner
diff --git a/exercises/src/components/published-modal.cjsx b/exercises/src/components/published-modal.cjsx
new file mode 100644
index 0000000000..9dd6a884c6
--- /dev/null
+++ b/exercises/src/components/published-modal.cjsx
@@ -0,0 +1,50 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{ExerciseStore} = require 'stores/exercise'
+
+
+PublishedModal = React.createClass
+  getInitialState: -> {}
+
+  componentWillMount: ->
+    ExerciseStore.on('published', @onPublished)
+
+  componentWillUnmount: ->
+    ExerciseStore.off('published', @onPublished)
+
+  onPublished: (publishedId, opt) ->
+    @show() if publishedId is @props.exerciseId
+
+  show: ->
+    @setState(isShowing: true)
+
+  onHide: ->
+    @setState(isShowing: false)
+
+  render: ->
+    return null unless @state.isShowing
+
+    exercise = ExerciseStore.get(@props.exerciseId)
+
+    <BS.Modal
+      show={@state.isShowing}
+      enforceFocus={false}
+      autoFocus={false}
+      backdrop={false}
+      animation={false}
+      onRequestHide={@onHide}
+      title={"Exercise has published sucessfully"}
+      onHide={@onHide}>
+
+      <div className='modal-body'>
+        <b>Exercise {exercise.uid} has published successfully</b>
+      </div>
+
+      <div className='modal-footer'>
+        <BS.Button bsStyle='primary' onClick={@onHide}>Close</BS.Button>
+      </div>
+    </BS.Modal>
+
+module.exports = PublishedModal
diff --git a/exercises/src/components/record-not-found.cjsx b/exercises/src/components/record-not-found.cjsx
new file mode 100644
index 0000000000..9e1ab71d0a
--- /dev/null
+++ b/exercises/src/components/record-not-found.cjsx
@@ -0,0 +1,16 @@
+React = require 'react'
+
+RecordNotFound = React.createClass
+
+  propTypes:
+    id: React.PropTypes.string.isRequired
+    recordType: React.PropTypes.string.isRequired
+
+
+
+  render: ->
+    <div className="record-not-found">
+      <h3>{@props.recordType} ID: {@props.id} was not found</h3>
+    </div>
+
+module.exports = RecordNotFound
diff --git a/exercises/src/components/search.cjsx b/exercises/src/components/search.cjsx
new file mode 100644
index 0000000000..16ca1e564a
--- /dev/null
+++ b/exercises/src/components/search.cjsx
@@ -0,0 +1,64 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+
+NetworkActivity = require 'components/network-activity-spinner'
+RecordNotFound  = require 'components/record-not-found'
+
+Search = React.createClass
+  propTypes:
+    location: React.PropTypes.object.isRequired
+
+  getInitialState: -> {}
+
+  componentWillMount: ->
+    ExerciseStore.addChangeListener(@update)
+
+  componentWillUnmount: ->
+    ExerciseStore.removeChangeListener(@update)
+
+  update: -> @forceUpdate()
+
+  loadExercise: (exerciseId) ->
+    @replaceState(loading: exerciseId)
+    ExerciseStore.once 'loaded', =>
+      @props.location.onRecordLoad('exercises', exerciseId, ExerciseStore) if ExerciseStore.get(exerciseId)
+
+    ExerciseActions.load(exerciseId)
+
+  onFindExercise: ->
+    @loadExercise(this.refs.exerciseId.getDOMNode().value)
+
+  onExerciseKeyPress: (ev) ->
+    return unless ev.key is 'Enter'
+    @loadExercise(this.refs.exerciseId.getDOMNode().value)
+    ev.preventDefault()
+
+  render: ->
+    <div className="search">
+      {<NetworkActivity /> if ExerciseStore.isLoading(@state.loading) }
+      {<RecordNotFound
+        recordType="Exercise" id={@state.loading}
+        /> if ExerciseStore.isFailed(@state.loading)}
+
+      <h1>Edit exercise:</h1>
+
+      <BS.Row>
+        <BS.Col sm=3>
+          <div className="input-group">
+            <input type="text" autoFocus
+              className="form-control"
+              onKeyPress={@onExerciseKeyPress}
+              ref="exerciseId" placeholder="Exercise ID"/>
+            <span className="input-group-btn">
+              <button className="btn btn-default load"
+                type="button" onClick={@onFindExercise}
+              >Load</button>
+            </span>
+          </div>
+        </BS.Col>
+      </BS.Row>
+    </div>
+
+
+module.exports = Search
diff --git a/exercises/src/components/search/controls.cjsx b/exercises/src/components/search/controls.cjsx
new file mode 100644
index 0000000000..5386ec57f6
--- /dev/null
+++ b/exercises/src/components/search/controls.cjsx
@@ -0,0 +1,12 @@
+React = require 'react'
+
+
+SearchControls = React.createClass
+
+
+  # render nothing for now, maybe a header message or something later?
+  render: ->
+    return null
+
+
+module.exports = SearchControls
diff --git a/exercises/src/components/tags/blooms.cjsx b/exercises/src/components/tags/blooms.cjsx
new file mode 100644
index 0000000000..d98e29381f
--- /dev/null
+++ b/exercises/src/components/tags/blooms.cjsx
@@ -0,0 +1,24 @@
+React = require 'react'
+_ = require 'underscore'
+
+SingleDropdown = require './single-dropdown'
+
+CHOICES = {}
+CHOICES[i] = i for i in _.range(1, 8)
+
+BloomsTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  render: ->
+    <SingleDropdown
+      {...@props}
+      label='Blooms'
+      prefix='blooms'
+      choices={CHOICES}
+    />
+
+module.exports = BloomsTag
diff --git a/exercises/src/components/tags/book-selection.cjsx b/exercises/src/components/tags/book-selection.cjsx
new file mode 100644
index 0000000000..1fe259ba0b
--- /dev/null
+++ b/exercises/src/components/tags/book-selection.cjsx
@@ -0,0 +1,41 @@
+React = require 'react'
+_ = require 'underscore'
+
+BOOKS =
+  'stax-soc'     : 'Sociology'
+  'stax-phys'    : 'College Physics'
+  'stax-k12phys' : 'Physics',
+  'stax-bio'     : 'Biology'
+  'stax-apbio'   : 'Biology for AP® Courses'
+
+ # Temporarily removed from list until books are ready
+ # 'stax-cbio'    : 'Concepts of Biology'
+ # 'stax-econ'    : 'Economics'
+ # 'stax-macro'   : 'Macro Economics'
+ # 'stax-micro'   : 'Micro Economics'
+ # 'stax-anp'     : 'Anatomy and Physiology'
+
+BookSelection = React.createClass
+
+  propTypes:
+    onChange: React.PropTypes.func
+    selected: React.PropTypes.string
+    limit: React.PropTypes.array
+
+  render: ->
+    books = if @props.limit
+      _.pick(BOOKS, @props.limit)
+    else
+      BOOKS
+    <select
+      className='form-control'
+      onChange={@props.onChange} value={@props.selected}
+    >
+      {if _.isEmpty(@props.selected)
+        <option key='blank' value={''}></option>}
+      {for tag, name of books
+        <option key={tag} value={tag}>{name}</option>}
+    </select>
+
+
+module.exports = BookSelection
diff --git a/exercises/src/components/tags/books.cjsx b/exercises/src/components/tags/books.cjsx
new file mode 100644
index 0000000000..7e21087015
--- /dev/null
+++ b/exercises/src/components/tags/books.cjsx
@@ -0,0 +1,53 @@
+React = require 'react'
+
+Wrapper = require './wrapper'
+
+BookSelection = require './book-selection'
+
+BookTagSelect = React.createClass
+  propTypes:
+    book: React.PropTypes.string.isRequired
+    id: React.PropTypes.string.isRequired
+
+  updateTag: (ev) ->
+    @props.actions.setPrefixedTag(@props.id,
+      prefix: 'book', tag: ev.target.value, previous: @props.book
+    )
+
+  onDelete: ->
+    @props.actions.setPrefixedTag(@props.id,
+      prefix: 'book', tag: false, previous: @props.book
+    )
+    @props.actions.setPrefixedTag(@props.id,
+      prefix: "exid:#{@props.book}", tag: false, replaceOthers: true
+    )
+
+  render: ->
+    <div className="tag">
+      <BookSelection onChange={@updateTag} selected={@props.book} />
+      <span className="controls">
+        <i onClick={@onDelete} className="fa fa-trash" />
+      </span>
+    </div>
+
+BookTags = React.createClass
+
+  propTypes:
+    id: React.PropTypes.string.isRequired
+    store: React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  add: ->
+    @props.actions.addBlankPrefixedTag(@props.id,
+      prefix: 'book'
+    )
+
+  render: ->
+    tags = @props.store.getTagsWithPrefix(@props.id, 'book')
+    <Wrapper label="Book" onAdd={@add}  singleTag={tags.length is 1}>
+      {for tag in tags
+        <BookTagSelect key={tag} {...@props} book={tag} />}
+    </Wrapper>
+
+
+module.exports = BookTags
diff --git a/exercises/src/components/tags/cnx-feature.cjsx b/exercises/src/components/tags/cnx-feature.cjsx
new file mode 100644
index 0000000000..e27f6eb651
--- /dev/null
+++ b/exercises/src/components/tags/cnx-feature.cjsx
@@ -0,0 +1,30 @@
+React = require 'react'
+
+MultiInput = require './multi-input'
+
+CnxModTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  validateInput: (value) ->
+    'Must match feature ID' unless value.match(
+      /^[\w\-]+$/i
+    )
+
+  cleanInput: (val) ->
+    val.replace(/[^\w\-]/g, '')
+
+  render: ->
+    <MultiInput
+      {...@props}
+      label='CNX Feature'
+      prefix='context-cnxfeature'
+      cleanInput={@cleanInput}
+      placeholder='feature-id'
+      validateInput={@validateInput}
+    />
+
+module.exports = CnxModTag
diff --git a/exercises/src/components/tags/cnx-mod.cjsx b/exercises/src/components/tags/cnx-mod.cjsx
new file mode 100644
index 0000000000..edf8d314b3
--- /dev/null
+++ b/exercises/src/components/tags/cnx-mod.cjsx
@@ -0,0 +1,30 @@
+React = require 'react'
+
+MultiInput = require './multi-input'
+
+CnxModTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  validateInput: (value) ->
+    'Must match CNX module ID (without version number)' unless value.match(
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+    )
+
+  cleanInput: (val) ->
+    val.replace(/[^0-9a-f-]/g, '')
+
+  render: ->
+    <MultiInput
+      {...@props}
+      label='CNX Module'
+      prefix='context-cnxmod'
+      cleanInput={@cleanInput}
+      validateInput={@validateInput}
+      placeholder='#########-####-###-####-############'
+    />
+
+module.exports = CnxModTag
diff --git a/exercises/src/components/tags/dok.cjsx b/exercises/src/components/tags/dok.cjsx
new file mode 100644
index 0000000000..4d9212da13
--- /dev/null
+++ b/exercises/src/components/tags/dok.cjsx
@@ -0,0 +1,24 @@
+React = require 'react'
+_ = require 'underscore'
+
+SingleDropdown = require './single-dropdown'
+
+CHOICES = {}
+CHOICES[i] = i for i in _.range(1, 5)
+
+DokTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  render: ->
+    <SingleDropdown
+      {...@props}
+      label='DOK'
+      prefix='dok'
+      choices={CHOICES}
+    />
+
+module.exports = DokTag
diff --git a/exercises/src/components/tags/error.cjsx b/exercises/src/components/tags/error.cjsx
new file mode 100644
index 0000000000..1a14ef8e16
--- /dev/null
+++ b/exercises/src/components/tags/error.cjsx
@@ -0,0 +1,17 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+
+TagError = React.createClass
+
+  propTypes:
+    error: React.PropTypes.string
+
+  render: ->
+    return null unless @props.error
+    tooltip =
+      <BS.Tooltip><strong>{@props.error}</strong></BS.Tooltip>
+    <BS.OverlayTrigger placement="top" overlay={tooltip}>
+      <i className="fa fa-exclamation-triangle" />
+    </BS.OverlayTrigger>
+
+module.exports = TagError
diff --git a/exercises/src/components/tags/filter-type.cjsx b/exercises/src/components/tags/filter-type.cjsx
new file mode 100644
index 0000000000..4e2ec0629d
--- /dev/null
+++ b/exercises/src/components/tags/filter-type.cjsx
@@ -0,0 +1,39 @@
+React = require 'react'
+_ = require 'underscore'
+
+Wrapper = require './wrapper'
+Multiselect = require 'react-widgets/lib/Multiselect'
+
+PREFIX = 'filter-type'
+TYPES = [
+  {id: 'vocabulary',   title: 'Vocabulary'    }
+  {id: 'test-prep',    title: 'Test Prep'     }
+  {id: 'ap-test-prep', title: 'AP® Test Prep' }
+]
+
+FilterTypeTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  updateTag: (types) ->
+    tags = _.map types, (tag, v) ->
+      if _.isObject(tag) then tag.id else tag
+    @props.actions.setPrefixedTag(@props.id, prefix: PREFIX, tags: tags)
+
+  render: ->
+    tags = @props.store.getTagsWithPrefix(@props.id, PREFIX)
+
+    <Wrapper label="Filter Type">
+      <div className="tag">
+        <Multiselect
+          valueField='title'
+          textField='title' valueField='id'
+          data={TYPES} value={tags} onChange={@updateTag}
+        />
+      </div>
+    </Wrapper>
+
+module.exports = FilterTypeTag
diff --git a/exercises/src/components/tags/lo.cjsx b/exercises/src/components/tags/lo.cjsx
new file mode 100644
index 0000000000..2e69cbcf7b
--- /dev/null
+++ b/exercises/src/components/tags/lo.cjsx
@@ -0,0 +1,94 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+Error = require './error'
+Wrapper = require './wrapper'
+
+PREFIX = 'lo'
+BookSelection = require './book-selection'
+
+Input = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+    tag:     React.PropTypes.string.isRequired
+
+  getDefaultProps: ->
+    inputType: 'text'
+
+  getInitialState: ->
+    [book, lo] = @props.tag.split(':')
+    {book, lo}
+
+  validateInput: (value) ->
+    'Must match LO pattern of dd-dd-dd' unless value.match(
+      /^\d{1,2}-\d{1,2}-\d{1,2}$/
+    )
+
+  componentWillReceiveProps: (nextProps) ->
+    [book, lo] = @props.tag.split(':')
+    @setState({book, lo})
+
+  onTextChange: (ev) ->
+    lo = ev.target.value.replace(/[^0-9\-]/g, '')
+    @setState({errorMsg: null, lo})
+
+  validateAndSave: (attrs = {}) ->
+    {lo, book} = _.defaults attrs, @state
+    if book and lo?.match( /^\d{1,2}-\d{1,2}-\d{1,2}$/ )
+      @props.actions.setPrefixedTag(@props.id,
+        prefix: PREFIX, tag: "#{book}:#{lo}", previous: @props.tag
+      )
+    else
+      @setState({lo, book, errorMsg: 'Must match LO pattern of book:dd-dd-dd'})
+
+  onTextBlur: -> @validateAndSave()
+  updateBook: (ev) ->
+    book = ev.target.value
+    @validateAndSave({book})
+
+  onDelete: ->
+    @props.actions.setPrefixedTag(@props.id,
+      prefix: PREFIX, tag: false, previous: @props.tag
+    )
+
+  render: ->
+
+    <div className={classnames('tag', 'has-error': @state.errorMsg)}>
+      <BookSelection onChange={@updateBook} selected={@state.book}
+        limit={@props.store.getTagsWithPrefix(@props.id, 'book')}
+      />
+      <input
+        className='form-control'
+        type={@props.inputType}
+        onChange={@onTextChange}
+        onBlur={@onTextBlur}
+        value={@state.lo}
+        placeholder={@props.placeholder} />
+      <Error error={@state.errorMsg} />
+      <span className="controls">
+        <i onClick={@onDelete} className="fa fa-trash" />
+      </span>
+    </div>
+
+LoTags = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  onAdd: ->
+    @props.actions.addBlankPrefixedTag(@props.id, prefix: PREFIX)
+
+  render: ->
+    tags = @props.store.getTagsWithPrefix(@props.id, PREFIX)
+    <Wrapper label="LO" onAdd={@onAdd}>
+      {for tag in tags
+        <Input key={tag} {...@props} tag={tag} />}
+    </Wrapper>
+
+module.exports = LoTags
diff --git a/exercises/src/components/tags/multi-input.cjsx b/exercises/src/components/tags/multi-input.cjsx
new file mode 100644
index 0000000000..4d1deea909
--- /dev/null
+++ b/exercises/src/components/tags/multi-input.cjsx
@@ -0,0 +1,78 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+Wrapper = require './wrapper'
+Error = require './error'
+
+Input = React.createClass
+
+  getDefaultProps: ->
+    inputType: 'text'
+
+  propTypes:
+    tag: React.PropTypes.string.isRequired
+
+  getInitialState: ->
+    value: @props.tag
+
+  componentWillReceiveProps: (nextProps) ->
+    @setState(value: nextProps.tag)
+
+  onChange: (ev) ->
+    @setState(errorMsg: null, value: @props.cleanInput(ev.target.value))
+
+  validateAndSave: (ev) ->
+    {value} = @state
+    error = @props.validateInput(value)
+    if error
+      @setState({errorMsg: error})
+    else
+      @props.actions.setPrefixedTag(@props.id,
+        prefix: @props.prefix, tag: value, previous: @props.tag
+      )
+
+  onDelete: ->
+    @props.actions.setPrefixedTag(@props.id,
+      prefix: @props.prefix, tag: false, previous: @props.tag
+    )
+
+  render: ->
+    <div className={classnames('tag', 'has-error': @state.errorMsg)}>
+      <input
+        className='form-control'
+        type={@props.inputType}
+        onChange={@onChange}
+        onBlur={@validateAndSave}
+        value={@state.value}
+        placeholder={@props.placeholder} />
+      <Error error={@state.errorMsg} />
+      <span className="controls">
+        <i onClick={@onDelete} className="fa fa-trash" />
+      </span>
+    </div>
+
+MultiInput = React.createClass
+
+  propTypes:
+    id:            React.PropTypes.string.isRequired
+    store:         React.PropTypes.object.isRequired
+    actions:       React.PropTypes.object.isRequired
+    label:         React.PropTypes.string.isRequired
+    prefix:        React.PropTypes.string.isRequired
+    cleanInput:    React.PropTypes.func.isRequired
+    validateInput: React.PropTypes.func.isRequired
+
+  add: ->
+    @props.actions.addBlankPrefixedTag(@props.id, prefix: @props.prefix)
+
+  render: ->
+    tags = @props.store.getTagsWithPrefix(@props.id, @props.prefix)
+
+    <Wrapper label={@props.label} onAdd={@add} singleTag={tags.length is 1}>
+      {for tag in tags
+        <Input key={tag} {...@props} tag={tag} />}
+    </Wrapper>
+
+module.exports = MultiInput
diff --git a/exercises/src/components/tags/question-type.cjsx b/exercises/src/components/tags/question-type.cjsx
new file mode 100644
index 0000000000..a9fc3d2eb1
--- /dev/null
+++ b/exercises/src/components/tags/question-type.cjsx
@@ -0,0 +1,27 @@
+React = require 'react'
+
+SingleDropdown = require './single-dropdown'
+
+PREFIX = 'type'
+TYPES =
+  'conceptual-or-recall' : 'Conceptual or Recall'
+  'conceptual'           : 'Conceptual'
+  'recall'               : 'Recall'
+  'practice'             : 'Practice'
+
+QuestionTypeTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  render: ->
+    <SingleDropdown
+      {...@props}
+      label='Question Type'
+      prefix={PREFIX}
+      choices={TYPES}
+    />                 #
+
+module.exports = QuestionTypeTag
diff --git a/exercises/src/components/tags/requires-context.cjsx b/exercises/src/components/tags/requires-context.cjsx
new file mode 100644
index 0000000000..12c59eab61
--- /dev/null
+++ b/exercises/src/components/tags/requires-context.cjsx
@@ -0,0 +1,28 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+PREFIX = 'requires-context'
+Wrapper = require './wrapper'
+
+RequiresContextTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  updateTag: (ev) ->
+    tag = if ev.target.checked then 'true' else false # false will remove tag
+    @props.actions.setPrefixedTag(@props.id, prefix: PREFIX, tag: tag, replaceOthers:true)
+
+  render: ->
+    tag = _.first @props.store.getTagsWithPrefix(@props.id, PREFIX)
+
+    <Wrapper label="Requires Context">
+      <div className="tag">
+        <input type="checkbox" label="" onChange={@updateTag} checked={tag is 'true'} />
+      </div>
+    </Wrapper>
+
+module.exports = RequiresContextTag
diff --git a/exercises/src/components/tags/single-dropdown.cjsx b/exercises/src/components/tags/single-dropdown.cjsx
new file mode 100644
index 0000000000..0eb8bf3009
--- /dev/null
+++ b/exercises/src/components/tags/single-dropdown.cjsx
@@ -0,0 +1,34 @@
+React = require 'react'
+_ = require 'underscore'
+
+Wrapper = require './wrapper'
+
+SingleDropdown = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    label:   React.PropTypes.string.isRequired
+    prefix:  React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+
+  updateTag: (ev) ->
+    @props.actions.setPrefixedTag(@props.id,
+      tag: ev.target.value, prefix: @props.prefix, replaceOthers: true
+    )
+
+  render: ->
+    tag = _.first @props.store.getTagsWithPrefix(@props.id, @props.prefix)
+    <Wrapper label={@props.label} singleTag={true}>
+      <div className="tag">
+        <select className='form-control' onChange={@updateTag} value={tag}>
+          {unless tag # a tag cannot be blank once it's set
+            <option key='blank' value={''}>{name}</option>}
+          {for tag, name of @props.choices
+            <option key={tag} value={tag}>{name}</option>}
+        </select>
+      </div>
+    </Wrapper>
+
+module.exports = SingleDropdown
diff --git a/exercises/src/components/tags/time.cjsx b/exercises/src/components/tags/time.cjsx
new file mode 100644
index 0000000000..5da45fcd6b
--- /dev/null
+++ b/exercises/src/components/tags/time.cjsx
@@ -0,0 +1,27 @@
+React = require 'react'
+_ = require 'underscore'
+
+SingleDropdown = require './single-dropdown'
+
+CHOICES = {
+  'short'  : 'Short'
+  'medium' : 'Medium'
+  'long'   : 'Long'
+}
+
+TimeTag = React.createClass
+
+  propTypes:
+    id:      React.PropTypes.string.isRequired
+    store:   React.PropTypes.object.isRequired
+    actions: React.PropTypes.object.isRequired
+
+  render: ->
+    <SingleDropdown
+      {...@props}
+      label='Time'
+      prefix='time'
+      choices={CHOICES}
+    />
+
+module.exports = TimeTag
diff --git a/exercises/src/components/tags/wrapper.cjsx b/exercises/src/components/tags/wrapper.cjsx
new file mode 100644
index 0000000000..c38bf6bf2f
--- /dev/null
+++ b/exercises/src/components/tags/wrapper.cjsx
@@ -0,0 +1,30 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+
+TagWrapper = React.createClass
+
+  propTypes:
+    label: React.PropTypes.string.isRequired
+
+  render: ->
+    classes = classnames('tag-type',
+      'has-error': @props.error
+      'has-single-tag': @props.singleTag is true
+    )
+
+    <BS.Col sm=12 lg=6 className={classes}>
+      <div className="heading">
+        <span className="label">{@props.label}</span>
+        <div className="controls">
+          {if @props.onAdd
+            <i onClick={@props.onAdd} className="fa fa-plus-circle" />}
+        </div>
+      </div>
+
+      {@props.children}
+
+    </BS.Col>
+
+
+module.exports = TagWrapper
diff --git a/exercises/src/components/user-actions-menu.cjsx b/exercises/src/components/user-actions-menu.cjsx
new file mode 100644
index 0000000000..3d71f6c03b
--- /dev/null
+++ b/exercises/src/components/user-actions-menu.cjsx
@@ -0,0 +1,44 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+
+UserActionsMenu = React.createClass
+  propTypes:
+    user:  React.PropTypes.object.isRequired
+
+  componentWillMount: ->
+    @crsfToken =
+      document.querySelector('meta[name=csrf-token]')?.getAttribute('content')
+
+  render: ->
+    name = @props.user?.full_name or
+      [@props.user?.first_name, @props.user?.last_name].join(' ')
+    <BS.Nav right navbar>
+
+      <BS.NavDropdown
+        eventKey={1}
+        id='navbar-dropdown'
+        title={name}
+        ref='navDropDown'>
+        <li className='logout'>
+          <a href='#' onClick={@onLinkClick} >
+            <form
+              acceptCharset='UTF-8'
+              action={'/accounts/logout'}
+              className='-logout-form'
+              method='post'
+            >
+              <input type='hidden' name='_method' value='delete'/>
+              <input type='hidden' name='authenticity_token' value={@crsfToken}/>
+              <input type='submit' aria-label="Log Out" value='Log Out' />
+            </form>
+          </a>
+        </li>
+
+      </BS.NavDropdown>
+    </BS.Nav>
+
+
+module.exports = UserActionsMenu
diff --git a/exercises/src/components/vocabulary.cjsx b/exercises/src/components/vocabulary.cjsx
new file mode 100644
index 0000000000..c1cba34bbb
--- /dev/null
+++ b/exercises/src/components/vocabulary.cjsx
@@ -0,0 +1,87 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+Location = require 'stores/location'
+
+{VocabularyActions, VocabularyStore} = require 'stores/vocabulary'
+Distractors = require 'components/vocabulary/distractors'
+Tags = require 'components/vocabulary/tags'
+ExercisePreview = require 'components/exercise/preview'
+NetworkActivity = require 'components/network-activity-spinner'
+RecordNotFound  = require 'components/record-not-found'
+
+Vocabulary = React.createClass
+  propTypes:
+    id:   React.PropTypes.string.isRequired
+    location: React.PropTypes.object
+
+  setTerm: (ev) ->
+    VocabularyActions.change(@getVocabId(), term: ev.target.value)
+
+  setDefinition: (ev) ->
+    VocabularyActions.change(@getVocabId(), definition: ev.target.value)
+
+  update: -> @forceUpdate()
+
+  componentWillMount: ->
+    VocabularyStore.addChangeListener(@update)
+    @loadIfNeeded( @getVocabId() )
+
+  componentWillReceiveProps: (nextProps) ->
+    @loadIfNeeded( ExerciseStore.get(nextProps.id)?.vocab_term_uid )
+
+  loadIfNeeded: (vocabId) ->
+    if vocabId and not ( VocabularyStore.get(vocabId) or VocabularyStore.isLoading(vocabId) )
+      VocabularyActions.load(vocabId)
+
+  componentWillUnmount: ->
+    VocabularyStore.removeChangeListener(@update)
+
+  getVocabId: ->
+    ExerciseStore.get(@props.id)?.vocab_term_uid
+
+  render: ->
+    vocabId = @getVocabId()
+    return null unless vocabId
+
+    if vocabId and VocabularyStore.isLoading(vocabId)
+      return <NetworkActivity />
+
+    vocabTerm = VocabularyStore.getFromExerciseId(@props.id)
+    unless vocabTerm
+      return <RecordNotFound recordType="Vocabulary Term" id={vocabId} />
+
+    <div className='vocabulary-editor'>
+
+      <div className="editing-controls">
+
+        <BS.Row>
+          <BS.Col sm=6>
+
+            <BS.Input type="text" label="Key Term" onChange={@setTerm} value={vocabTerm.term} />
+
+            <BS.Input type="textarea" label="Key Term Definition"
+              onChange={@setDefinition} value={vocabTerm.definition} />
+
+          </BS.Col>
+          <BS.Col sm=6>
+            <Distractors termId={vocabId} />
+          </BS.Col>
+        </BS.Row>
+
+        <BS.Row>
+          <BS.Col sm=12>
+            <h4>Tags</h4>
+          </BS.Col>
+        </BS.Row>
+        <Tags vocabularyId={vocabId} />
+
+      </div>
+
+      <ExercisePreview exerciseId={@props.id} />
+      <div className="vocabulary-hidden-id">{vocabId}</div>
+    </div>
+
+
+module.exports = Vocabulary
diff --git a/exercises/src/components/vocabulary/controls.cjsx b/exercises/src/components/vocabulary/controls.cjsx
new file mode 100644
index 0000000000..6324f6c584
--- /dev/null
+++ b/exercises/src/components/vocabulary/controls.cjsx
@@ -0,0 +1,104 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+Location = require 'stores/location'
+{VocabularyActions, VocabularyStore} = require 'stores/vocabulary'
+{ExerciseActions} = require 'stores/exercise'
+
+AsyncButton = require 'shared/src/components/buttons/async-button.cjsx'
+{SuretyGuard} = require 'shared'
+
+VocabularyControls = React.createClass
+
+  propTypes:
+    id:   React.PropTypes.string.isRequired
+    location: React.PropTypes.object
+
+  update: -> @forceUpdate()
+
+  componentWillMount: ->
+    VocabularyStore.addChangeListener(@update)
+    VocabularyStore.on('updated', @onUpdated)
+
+  componentWillUnmount: ->
+    VocabularyStore.removeChangeListener(@update)
+    VocabularyStore.off('updated', @onUpdated)
+
+  saveVocabulary: ->
+    vocabId = @getVocabId()
+    if VocabularyStore.isNew(vocabId)
+      VocabularyActions.create(vocabId, VocabularyStore.get(vocabId))
+    else
+      VocabularyActions.save(vocabId)
+
+  onUpdated: ->
+    vocab = VocabularyStore.getFromExerciseId(@props.id)
+    exId = _.last(vocab.exercise_uids)
+    {id} = @props.location.getCurrentUrlParts()
+    if id is exId
+      ExerciseActions.load(exId)
+    else
+      @props.location.visitVocab(exId) # update URL with new version
+
+  publishVocabulary: ->
+    VocabularyActions.publish(@getVocabId())
+
+  isVocabularyDirty: ->
+    vocabId = @getVocabId()
+    vocabId and VocabularyStore.isChanged(vocabId)
+
+  getVocabId: ->
+    ExerciseStore.get(@props.id)?.vocab_term_uid
+
+  # render nothing for now, maybe a header message or something later?
+  render: ->
+
+    {id} = @props
+    vocabTerm = VocabularyStore.getFromExerciseId(@props.id)
+    return null unless vocabTerm
+    vocabId = @getVocabId()
+
+    guardProps =
+      onlyPromptIf: @isVocabularyDirty
+      placement: 'right'
+      message: "You will lose all unsaved changes"
+
+    <div className="vocabulary-navbar-controls">
+      <BS.ButtonToolbar className="navbar-btn">
+
+        <AsyncButton
+          bsStyle='info'
+          className='draft'
+          onClick={@saveVocabulary}
+          disabled={not VocabularyStore.isSavable(vocabId)}
+          isWaiting={VocabularyStore.isSaving(vocabId)}
+          waitingText='Saving...'
+          isFailed={VocabularyStore.isFailed(vocabId)}
+          >
+          Save Draft
+        </AsyncButton>
+
+        { unless VocabularyStore.isNew(vocabId)
+          <SuretyGuard
+            onConfirm={@publishVocabulary}
+            okButtonLabel='Publish'
+            placement='right'
+            message="Once a vocabulary term is published, it is available for use as an exercise. "
+          >
+            <AsyncButton
+              bsStyle='primary'
+              className='publish'
+              disabled={not VocabularyStore.isPublishable(vocabId)}
+              isWaiting={VocabularyStore.isPublishing(vocabId)}
+              waitingText='Publishing...'
+              isFailed={VocabularyStore.isFailed(vocabId)}
+            >
+              Publish
+            </AsyncButton>
+          </SuretyGuard>
+        }
+      </BS.ButtonToolbar>
+    </div>
+
+module.exports = VocabularyControls
diff --git a/exercises/src/components/vocabulary/distractors.cjsx b/exercises/src/components/vocabulary/distractors.cjsx
new file mode 100644
index 0000000000..89831f34f6
--- /dev/null
+++ b/exercises/src/components/vocabulary/distractors.cjsx
@@ -0,0 +1,66 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+
+{VocabularyActions, VocabularyStore} = require 'stores/vocabulary'
+
+Distractor = React.createClass
+  getInitialState: ->
+    term: @props.term
+
+  componentWillReceiveProps: (nextProps) ->
+    @setState(term: nextProps.term)
+
+  save: (ev) ->
+    VocabularyActions.updateDistractor(@props.termId, @props.term, @state.term)
+
+  onKeyPress: (ev) ->
+    if ev.key is 'Enter'
+      @save()
+      VocabularyActions.addBlankDistractor(@props.termId, @props.index + 1)
+      _.defer =>
+        @getDOMNode().parentElement.querySelector("[data-index='#{@props.index+1}']")?.focus()
+
+
+  onChange: (ev) ->
+    @setState(term: ev.target.value)
+
+  render: ->
+    <input
+      data-index={@props.index}
+      className='form-control'
+      type='text'
+      value={@state.term}
+      onKeyPress={@onKeyPress}
+      onChange={@onChange}
+      onBlur={@save}
+      placeholder={@props.placeholder} />
+
+
+Distractors = React.createClass
+  propTypes:
+    termId:   React.PropTypes.string.isRequired
+
+
+  onAdd: ->
+    VocabularyActions.addBlankDistractor(@props.termId)
+
+  render: ->
+    vt = VocabularyStore.get(@props.termId)
+    return null unless vt
+
+    <div className="distractors">
+      <div className="heading">
+        <label className="control-label">Distractors</label>
+        <div className="controls">
+          <i onClick={@onAdd} className="fa fa-plus-circle" />
+        </div>
+      </div>
+      <div className="values">
+        {for distractor, i in vt.distractor_literals or []
+          <Distractor key={i} index={i} termId={@props.termId} term={distractor} />}
+      </div>
+    </div>
+
+module.exports = Distractors
diff --git a/exercises/src/components/vocabulary/tags.cjsx b/exercises/src/components/vocabulary/tags.cjsx
new file mode 100644
index 0000000000..5700828920
--- /dev/null
+++ b/exercises/src/components/vocabulary/tags.cjsx
@@ -0,0 +1,42 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+{VocabularyActions, VocabularyStore} = require 'stores/vocabulary'
+
+Books           = require 'components/tags/books'
+Lo              = require 'components/tags/lo'
+QuestionType    = require 'components/tags/question-type'
+CnxMod          = require 'components/tags/cnx-mod'
+CnxFeature      = require 'components/tags/cnx-feature'
+Dok             = require 'components/tags/dok'
+Blooms          = require 'components/tags/blooms'
+Time            = require 'components/tags/time'
+RequiresContext = require 'components/tags/requires-context'
+
+ExerciseTags = React.createClass
+  propTypes:
+    vocabularyId: React.PropTypes.string.isRequired
+
+  render: ->
+    tagProps = {
+      id: @props.vocabularyId
+      store:   VocabularyStore
+      actions: VocabularyActions
+    }
+    <div className="tags">
+      <BS.Row>
+        <Books           {...tagProps} />
+        <Lo              {...tagProps} />
+        <QuestionType    {...tagProps} />
+        <RequiresContext {...tagProps} />
+        <CnxMod          {...tagProps} />
+        <CnxFeature      {...tagProps} />
+        <Dok             {...tagProps} />
+        <Blooms          {...tagProps} />
+        <Time            {...tagProps} />
+      </BS.Row>
+    </div>
+
+
+module.exports = ExerciseTags
diff --git a/exercises/src/index.coffee b/exercises/src/index.coffee
new file mode 100644
index 0000000000..5a42d3bfaf
--- /dev/null
+++ b/exercises/src/index.coffee
@@ -0,0 +1,35 @@
+React = require 'react'
+
+{AnswerActions, AnswerStore} = require './stores/answer'
+{QuestionActions, QuestionStore} = require './stores/answer'
+{ExerciseActions, ExerciseStore} = require './stores/exercise'
+
+MathJaxHelper =  require 'shared/src/helpers/mathjax'
+Exercise = require './components/exercise'
+App = require './components/app'
+api = require './api'
+
+
+# Just for debugging
+window.React = React
+window.App = React.createFactory(App)
+window.ExerciseActions = ExerciseActions
+window.ExerciseStore = ExerciseStore
+window.AnswerStore = AnswerStore
+window.QuestionStore = QuestionStore
+window.logout = -> ExerciseActions.changeExerciseMode(EXERCISE_MODES.VIEW)
+
+
+loadApp = ->
+
+  api.start()
+  MathJaxHelper.startMathJax()
+
+  root = document.createElement('div')
+  document.body.appendChild(root)
+  data = JSON.parse(
+    document.getElementById('exercises-boostrap-data')?.innerHTML or '{}'
+  )
+  window.React.render(window.App({data}), root)
+
+document.addEventListener('DOMContentLoaded', loadApp)
diff --git a/exercises/src/stores/answer.coffee b/exercises/src/stores/answer.coffee
new file mode 100644
index 0000000000..de4bda3fed
--- /dev/null
+++ b/exercises/src/stores/answer.coffee
@@ -0,0 +1,37 @@
+flux = require 'flux-react'
+{CrudConfig, makeSimpleStore, extendConfig} = require './helpers'
+
+AnswerConfig = {
+  updateContent: (id, content) ->
+    @_change(id, {content_html: content})
+
+  setCorrect: (id) ->
+    @_change(id, {correctness: "1.0"})
+
+  setIncorrect: (id) ->
+    @_change(id, {correctness: "0.0"})
+
+  updateFeedback: (id, feedback) ->
+    @_change(id, {feedback_html: feedback})
+
+  exports:
+    getContent: (id) -> @_get(id).content_html
+    getFeedback: (id) -> @_get(id).feedback_html
+    isCorrect: (id) -> @_get(id).correctness is "1.0"
+
+    validate: (id) ->
+      if (not @_get(id).content_html)
+        return valid: false, part: 'Answer Distractor'
+
+      return valid: true
+
+    getTemplate: ->
+      content_html:"",
+      feedback_html:"",
+      correctness:"1.0"
+}
+
+extendConfig(AnswerConfig, new CrudConfig())
+{actions, store} = makeSimpleStore(AnswerConfig)
+
+module.exports = {AnswerActions:actions, AnswerStore:store}
diff --git a/exercises/src/stores/errors.coffee b/exercises/src/stores/errors.coffee
new file mode 100644
index 0000000000..2d9c9b5919
--- /dev/null
+++ b/exercises/src/stores/errors.coffee
@@ -0,0 +1,31 @@
+_ = require 'underscore'
+flux = require 'flux-react'
+
+{makeSimpleStore} = require './helpers'
+
+ErrorsConfig = {
+
+
+
+  setServerError: (statusCode, message, requestDetails) ->
+    {url, opts} = requestDetails
+
+    sparseOpts = _.pick(opts, 'method', 'data')
+    request = {url, opts: sparseOpts}
+    @_currentServerError = {statusCode, message, request}
+
+    @emit('change')
+
+  acknowledge: ->
+    delete @_currentServerError
+    @emit('change')
+
+  exports:
+    getError: -> @_currentServerError
+
+
+
+}
+
+{actions, store} = makeSimpleStore(ErrorsConfig)
+module.exports = {ErrorsActions:actions, ErrorsStore:store}
diff --git a/exercises/src/stores/exercise.coffee b/exercises/src/stores/exercise.coffee
new file mode 100644
index 0000000000..fada16afc7
--- /dev/null
+++ b/exercises/src/stores/exercise.coffee
@@ -0,0 +1,183 @@
+_ = require 'underscore'
+flux = require 'flux-react'
+{CrudConfig, makeSimpleStore, extendConfig} = require './helpers'
+{QuestionActions, QuestionStore} = require './question'
+TaggingMixin = require './tagging-mixin'
+
+cascadeLoad = (obj, exerciseId) ->
+  for question in obj.questions
+    QuestionActions.loaded(question, question.id)
+  obj
+
+EmptyFn = -> ''
+
+multipartCache = {}
+
+ExerciseConfig = {
+  _loaded: (obj, exerciseId) ->
+    cascadeLoad(obj, exerciseId)
+    @emit('loaded', exerciseId)
+
+  _asyncStatusPublish: {}
+
+  updateStimulus: (id, stimulus_html) -> @_change(id, {stimulus_html})
+
+  sync: (id) ->
+    questions = _.map @_local[id].questions, (question) ->
+      QuestionActions.syncAnswers(question.id)
+      QuestionStore.get(question.id)
+    @_change(id, {questions})
+
+  save: (id) ->
+    @sync(id)
+    @_save(id)
+
+  published: (obj, id) ->
+    @emit('published', id)
+    @saved(obj, id)
+
+  _saved: (obj, id) ->
+    cascadeLoad(obj, id)
+    @_asyncStatusPublish[id] = false
+    @emit('updated', obj.id)
+
+  _created:(obj, id) ->
+    cascadeLoad(obj, obj.number)
+    obj.id = obj.number
+    @emit('updated', obj.id)
+    obj
+
+  setAsVocabularyPlaceHolder: (id, newVocabId) ->
+    @_change(id, {vocab_term_uid: newVocabId})
+
+  publish: (id) ->
+    @_asyncStatusPublish[id] = true
+    @emitChange()
+
+  deleteAttachment: EmptyFn
+
+  attachmentDeleted: (resp, exerciseUid, attachmentId) ->
+    exercise = _.findWhere(@_local, {uid: exerciseUid})
+    exercise.attachments = _.reject exercise.attachments, (attachment) -> attachment.id is attachmentId
+    @emitChange()
+
+  addQuestionPart: (id) ->
+    { questions } = @_get(id)
+
+    newId = QuestionStore.freshLocalId()
+    template = _.extend({}, QuestionStore.getTemplate(), {id: newId})
+    QuestionActions.loaded(template, newId)
+    question = QuestionStore.get(newId)
+
+    @_local[id].questions.push(question)
+    @sync(id)
+
+  toggleMultiPart: (id) ->
+    { questions } = @_get(id)
+
+    if (@_local[id].questions.length > 1)
+      multipartCache[id] = questions
+      newQuestions = [_.first(questions)]
+    else if (multipartCache[id])
+      newQuestions = multipartCache[id]
+      multipartCache[id] = null
+    else
+      return @addQuestionPart(id)
+
+    @_local[id].questions = newQuestions
+    @sync(id)
+
+  removeQuestion: (id, questionId) ->
+    { questions } = @_get(id)
+
+    newQuestions = _.filter(questions, (question) -> question.id isnt questionId)
+    if (newQuestions.length is 0)
+      @_local[id].questions = []
+      @addQuestionPart(id)
+    else
+      @_local[id].questions = newQuestions
+      @sync(id)
+
+  moveQuestion: (id, questionId, direction) ->
+    { questions } = @_get(id)
+    index = _.findIndex questions, (question) ->
+      question.id is questionId
+
+    if (index isnt -1)
+      temp = questions[index]
+      questions[index] = questions[index + direction]
+      questions[index + direction] = temp
+      @_local[id].questions = questions
+      @sync(id)
+
+
+  attachmentUploaded: (uid, attachment) ->
+    exercise = _.findWhere(@_local, {uid})
+    exercise.attachments ||= []
+    exercise.attachments.push(attachment)
+    @emitChange()
+
+  createBlank: (id) ->
+    template = @exports.getTemplate.call(@)
+    @loaded(template, id)
+
+  exports:
+
+    getQuestions: (id) -> @_get(id).questions
+
+    isMultiPart: (id) -> @_get(id)?.questions.length > 1
+
+    isVocabQuestion: (id) -> @_get(id)?.is_vocab
+
+    getVocabId: (id) -> @_get(id)?.vocab_term_uid
+
+    getId: (id) -> @_get(id).uid
+
+    getNumber: (id) -> @_get(id).number
+
+    getStimulus: (id) -> @_get(id).stimulus_html
+
+    getPublishedDate: (id) -> @_local[id].published_at
+
+    isPublished: (id) -> !!@_get(id)?.published_at
+
+    isPublishing: (id) -> !!@_asyncStatusPublish[id]
+
+    isSavable: (id) ->
+      @exports.isChanged.call(@, id) and
+        @exports.validate.call(@, id).valid and
+        not @exports.isSaving.call(@, id) and
+        not @exports.isPublishing.call(@, id)
+
+    isPublishable: (id) ->
+      @exports.validate.call(@, id).valid and
+        not @exports.isChanged.call(@, id) and
+        not @exports.isSaving.call(@, id) and
+        not @exports.isPublishing.call(@, id) and
+        not @_get(id)?.published_at
+
+
+    getTemplate: (id) ->
+      questionId = QuestionStore.freshLocalId()
+
+      tags: []
+      stimulus_html:"",
+      questions:[_.extend({}, QuestionStore.getTemplate(), {id: questionId})]
+
+    validate: (id) ->
+      return {valid: false, part: 'exercise'} unless @_local[id]
+      _.reduce @_local[id].questions, (memo, question) ->
+        validity = QuestionStore.validate(question.id)
+
+        valid: memo.valid and validity.valid
+        part: memo.part or validity.part
+      , valid: true
+
+}
+
+TaggingMixin.extend(ExerciseConfig)
+
+extendConfig(ExerciseConfig, new CrudConfig())
+{actions, store} = makeSimpleStore(ExerciseConfig)
+
+module.exports = {ExerciseActions:actions, ExerciseStore:store}
diff --git a/exercises/src/stores/helpers.coffee b/exercises/src/stores/helpers.coffee
new file mode 100644
index 0000000000..21bf2f333a
--- /dev/null
+++ b/exercises/src/stores/helpers.coffee
@@ -0,0 +1,181 @@
+_ = require 'underscore'
+flux = require 'flux-react'
+
+LOADING = 'loading'
+LOADED  = 'loaded'
+FAILED  = 'failed'
+SAVING  = 'saving'
+DELETING = 'deleting'
+DELETED = 'deleted'
+
+idCounter = 0
+CREATE_KEY = -> "_CREATING_#{idCounter++}"
+
+isNew = (id) -> /_CREATING_/.test(id)
+
+CrudConfig = ->
+  {
+    _asyncStatus: {}
+    _local: {}
+    _changed: {}
+    _errors: {}
+    _reload: {}
+
+    # If the specific type needs to do something else to the object:
+    # _loaded : (obj, id) ->
+    # _saved : (obj, id) ->
+    # _reset : ->
+
+    reset: ->
+      @_asyncStatus = {}
+      @_local = {}
+      @_changed = {}
+      @_errors = {}
+      @_reload = {}
+
+      @_reset?()
+      @emitChange()
+
+    FAILED: (status, msg, id) ->
+      @_asyncStatus[id] = FAILED
+      @_errors[id] = msg
+      unless status is 0 # indicates network failure
+        delete @_local[id]
+        @emitChange()
+
+    load: (id) ->
+      # Add a shortcut for unit testing
+      return if @_asyncStatus[id] is LOADED and @_HACK_DO_NOT_RELOAD
+      @_reload[id] = false
+      @_asyncStatus[id] = LOADING
+      @emitChange()
+
+    loaded: (obj, id) ->
+      # id = obj.id
+      @_asyncStatus[id] = LOADED
+      # HACK When working locally a step completion triggers a reload but the is_completed field on the TaskStep
+      # is discarded. so, if is_completed is set on the local object but not on the returned JSON
+      # Tack on a dummy correct_answer_id
+      if @_local[id] and obj.HACK_LOCAL_STEP_COMPLETION and @_local[id].steps
+        for step in @_local[id].steps
+          # HACK: Tack on a fake correct_answer and feedback to all completed steps that have an exercise but no correct_answer_id
+          if step.is_completed and step.content?.questions?[0]?.answers[0]? and not step.correct_answer_id
+            step.correct_answer_id = step.content.questions[0].answers[0].id
+            step.feedback_html = 'Some <em>FAKE</em> feedback'
+
+      if obj
+        # If the specific type needs to do something else to the object:
+        @_local[id] = @_loaded?(obj, id) or obj
+
+      @emitChange()
+
+    save: (id, obj) ->
+      # Note: id could be isNew()
+      @_asyncStatus[id] = SAVING
+      @emitChange()
+
+    saved: (result, id) ->
+      # id = result.id
+      @_asyncStatus[id] = LOADED # TODO: Maybe make this SAVED
+
+      # If the specific type needs to do something else to the object:
+      obj = @_saved?(result, id)
+      result = obj if obj
+
+      if result
+        @_local[id] = result
+        @_local[result.id] = result
+        delete @_changed[result.id]
+      else
+        console.warn('API WARN: Server did not return JSON after saving. Patching locally')
+        # Merge all the local changes into the new local object
+        @_local[id] = _.extend(@_local[id], @_changed[id])
+      delete @_changed[id]
+      delete @_errors[id]
+      # If the specific type needs to do something else to the object:
+      @emitChange()
+
+    create: (localId, attributes = {}) ->
+      throw new Error('BUG: MUST provide a local id') unless isNew(localId)
+      @_local[localId] = {}
+      @_changed[localId] = attributes
+      @_asyncStatus[localId] = LOADED
+
+    created: (result, localId) ->
+      @_local[localId] = result # HACK: So react component can still manipulate the same object
+      # If the specific type needs to do something else to the object:
+      obj = @_created?(result, result.id, localId)
+      result = obj if obj
+      @_local[result.id] = result
+      @_asyncStatus[localId] = LOADED
+      @_asyncStatus[result.id] = LOADED
+      @emitChange()
+
+    _change: (id, obj) ->
+      @_changed[id] ?= {}
+      _.extend(@_changed[id], obj)
+      @emitChange()
+
+    _save: (id) ->
+      @_asyncStatus[id] = SAVING
+
+    delete: (id) ->
+      @_asyncStatus[id] = DELETING
+
+    deleted: (result, id) ->
+      @_asyncStatus[id] = DELETED
+      delete @_local[id]
+      @emitChange()
+
+    clearChanged: (id) ->
+      delete @_changed[id]
+
+    HACK_DO_NOT_RELOAD: (bool) -> @_HACK_DO_NOT_RELOAD = bool
+
+    # Keep this here so other exports method have access to it
+    _get: (id) ->
+      val = @_local[id]
+      return null unless val or @_asyncStatus[id] is SAVING
+      # Scores stores an Array unlike most other stores
+      if _.isArray(val)
+        val
+      else
+        _.extend({}, val, @_changed[id])
+
+    exports:
+      isUnknown: (id) -> not @_asyncStatus[id]
+      isLoading: (id) -> @_asyncStatus[id] is LOADING
+      isLoaded: (id) -> @_asyncStatus[id] is LOADED
+      isDeleting: (id) -> @_asyncStatus[id] is DELETING
+      isSaving: (id) -> @_asyncStatus[id] is SAVING
+      isFailed: (id) -> @_asyncStatus[id] is FAILED
+      getAsyncStatus: (id) -> @_asyncStatus[id]
+      get: (id) -> @_get(id)
+      isChanged: (id) -> not _.isEmpty(@_changed[id])
+      getChanged: (id) -> @_changed[id] or {}
+      freshLocalId: -> CREATE_KEY()
+      isNew: (id) -> isNew(id)
+      reload: (id) -> @_reload[id]
+  }
+
+# Helper for creating a simple store for actions
+makeSimpleStore = (storeConfig) ->
+
+  actionsConfig = _.omit storeConfig, (value, key) ->
+    typeof value isnt 'function' or key is 'exports'
+
+  actionsConfig = _.keys(actionsConfig)
+  actions = flux.createActions(actionsConfig)
+  storeConfig.actions = _.values(actions)
+  store = flux.createStore(storeConfig)
+  {actions, store}
+
+
+extendConfig = (newConfig, origConfig) ->
+  newConfig.exports ?= {}
+  _.defaults(newConfig, origConfig)
+  _.defaults(newConfig.exports, origConfig.exports)
+  newConfig
+
+
+module.exports = {CrudConfig, makeSimpleStore, extendConfig}
diff --git a/exercises/src/stores/location.coffee b/exercises/src/stores/location.coffee
new file mode 100644
index 0000000000..df3d1bc17a
--- /dev/null
+++ b/exercises/src/stores/location.coffee
@@ -0,0 +1,71 @@
+history = require 'history'
+_ = require 'underscore'
+
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+{VocabularyActions, VocabularyStore} = require 'stores/vocabulary'
+
+VIEWS =
+  exercises:
+    Body:     require 'components/exercise'
+    Controls: require 'components/exercise/controls'
+    store:    ExerciseStore
+    actions:  ExerciseActions
+
+  search:
+    Body:     require 'components/search'
+    Controls: require 'components/search/controls'
+
+  vocabulary:
+    Body:     require 'components/vocabulary'
+    Controls: require 'components/vocabulary/controls'
+    store:    ExerciseStore
+    actions:  ExerciseActions
+
+
+# The Location class pairs urls with components and stores
+class Location
+
+  constructor: ->
+    @_createHistory()
+
+  _createHistory: ->
+    @history = history.createHistory()
+
+  startListening: (cb) ->
+    @historyUnlisten = @history.listen(cb)
+
+  stopListening: ->
+    @historyUnlisten()
+
+  visitNewRecord: (type) ->
+    @history.push("/#{type}/new")
+
+  visitSearch: ->
+    @history.push('/search')
+
+  visitExercise: (id) ->
+    @history.push("/exercises/#{id}")
+
+  visitVocab: (id) ->
+    @history.push("/vocabulary/#{id}")
+
+  getCurrentUrlParts: ->
+    path = window.location.pathname
+    [view, id, args...] = _.tail path.split('/')
+    {view, id, args}
+
+  partsForView: (view = @getCurrentUrlParts().view) ->
+    VIEWS[view] or VIEWS['search']
+
+  # callback for when a record is newly loaded from store
+  # Location may choose to redirect to a different editor depending on the data
+  onRecordLoad: (type, id, store) ->
+    {view} = @getCurrentUrlParts()
+    record = store.get(id)
+    # use vocab editor
+    if type is 'exercises' and record.vocab_term_uid
+      @visitVocab(id) #record.vocab_term_uid)
+    else
+      @history.push("/#{type}/#{id}")
+
+module.exports = Location
diff --git a/exercises/src/stores/question.coffee b/exercises/src/stores/question.coffee
new file mode 100644
index 0000000000..e7dabc817e
--- /dev/null
+++ b/exercises/src/stores/question.coffee
@@ -0,0 +1,136 @@
+_ = require 'underscore'
+flux = require 'flux-react'
+{CrudConfig, makeSimpleStore, extendConfig} = require './helpers'
+{AnswerActions, AnswerStore} = require './answer'
+
+QuestionConfig = {
+  _loaded: (obj, id) ->
+    for answer in obj?.answers
+      AnswerActions.loaded(answer, answer.id)
+
+    obj
+
+  syncAnswers: (id) ->
+    answers = _.map @_local[id]?.answers, (answer) ->
+      AnswerStore.get(answer.id)
+    @_change(id, {answers})
+
+  addNewAnswer: (id) ->
+    newAnswer =
+      id: AnswerStore.freshLocalId()
+      correctness: "0.0"
+      feedback_html: ''
+      content_html: ''
+
+    AnswerActions.created(newAnswer, newAnswer.id)
+    answers = @_local[id]?.answers.push(newAnswer)
+    @syncAnswers(id)
+
+  removeAnswer: (id, answerId) ->
+    AnswerActions.delete(answerId)
+    answers = _.reject @_local[id]?.answers, (answer) ->
+      answer.id is answerId
+    @_local[id]?.answers = answers
+
+  moveAnswer: (id, answerId, direction) ->
+    index = _.findIndex @_local[id]?.answers, (answer) ->
+      answer.id is answerId
+
+    if (index isnt -1)
+      temp = @_local[id]?.answers[index]
+      @_local[id]?.answers[index] = @_local[id]?.answers[index + direction]
+      @_local[id]?.answers[index + direction] = temp
+
+  updateStem: (id, stem_html) ->
+    @_change(id, {stem_html})
+
+  updateStimulus: (id, stimulus_html) -> @_change(id, {stimulus_html})
+
+  updateSolution: (id, feedback) ->
+    solution = _.first(@_get(id).collaborator_solutions)
+    if (solution)
+      solution.content_html = feedback
+    else
+      solution =
+        content_html: feedback
+        attachments: []
+        solution_type: 'detailed'
+
+    @_change(id, {collaborator_solutions: [solution]})
+
+  setCorrectAnswer: (id, newAnswer, curAnswer) ->
+    if not AnswerStore.isCorrect(newAnswer)
+      AnswerActions.setCorrect(newAnswer)
+      AnswerActions.setIncorrect(curAnswer) if curAnswer
+
+  togglePreserveOrder: (id) ->
+    {is_answer_order_important} = @_get(id)
+    @_change(id, {is_answer_order_important: not is_answer_order_important})
+
+  toggleFormat: (id, name, isSelected) ->
+    formats = @_get(id).formats
+
+    formats = if isSelected
+      formats.concat(name)
+    else
+      _.without(formats, name)
+
+    # toggle free-response depending on selection
+    if isSelected
+      switch name
+        when 'true-false'
+          formats = _.without(formats, 'free-response')
+        when 'multiple-choice'
+          formats = formats.concat('free-response')
+
+    @_change(id, {formats: _.unique(formats)})
+
+  exports:
+
+    hasFormat: (id, name) ->
+      _.include @_get(id)?.formats, name
+
+    getAnswers: (id) -> @_get(id)?.answers or []
+
+    getStem: (id) -> @_get(id)?.stem_html
+
+    getStimulus: (id) -> @_get(id)?.stimulus_html
+
+    getSolution: (id) ->
+      _.first(@_get(id).collaborator_solutions)?.content_html
+
+    getCorrectAnswer: (id) ->
+      _.find @_get(id)?.answers, (answer) -> AnswerStore.isCorrect(answer.id)
+
+    isOrderPreserved: (id) ->
+      @_get(id).is_answer_order_important
+
+    getTemplate: ->
+      answerId = AnswerStore.freshLocalId()
+
+      formats: ['multiple-choice', 'free-response']
+      stem_html:"",
+      stimulus_html:"",
+      collaborator_solutions: [{"content_html": "", "solution_type": "detailed"}],
+      answers:[_.extend({}, AnswerStore.getTemplate(), {id: answerId})],
+      is_answer_order_important: false
+
+    validate: (id) ->
+      question = @_get(id)
+      if (not question.stem_html)
+        return valid: false, part: 'Question Stem'
+      if _.isEmpty(question.collaborator_solutions) or not _.first(question.collaborator_solutions)?.content_html
+        return valid: false, part: 'Detailed Solution'
+
+      _.reduce @_get(id).answers, (memo, answer) ->
+        validity = AnswerStore.validate(answer.id)
+
+        valid: memo.valid and validity.valid
+        part: memo.part or validity.part
+      , valid: true
+}
+
+extendConfig(QuestionConfig, new CrudConfig())
+{actions, store} = makeSimpleStore(QuestionConfig)
+
+module.exports = {QuestionActions:actions, QuestionStore:store}
diff --git a/exercises/src/stores/tagging-mixin.coffee b/exercises/src/stores/tagging-mixin.coffee
new file mode 100644
index 0000000000..3de446691d
--- /dev/null
+++ b/exercises/src/stores/tagging-mixin.coffee
@@ -0,0 +1,48 @@
+_ = require 'underscore'
+
+Actions =
+
+  addBlankPrefixedTag: (id, {prefix}) ->
+    prefix += ':'
+    tags = _.clone( @_get(id).tags )
+    # is there already a blank one?
+    unless _.find( tags, (tag) -> tag is prefix )
+      tags.push(prefix)
+      @_change(id, {tags})
+
+  # Updates or creates a prefixed tag
+  # If previous is given, then only the tag with that value will be updated
+  # Otherwise it will be added (unless it exists)
+  # If replaceOthers is set, all others will prefix will be removed
+  setPrefixedTag: (id, {prefix, tag, tags, previous, replaceOthers}) ->
+    prefix += ':'
+    if tags
+      tags = _.reject(@_get(id).tags, (tag) -> 0 is tag.indexOf(prefix))
+        .concat( _.map tags, (tag) -> prefix + tag )
+    else if replaceOthers
+      tags = _.reject @_get(id).tags, (tag) -> 0 is tag.indexOf(prefix)
+    else
+      tags = _.clone @_get(id).tags
+
+    if previous?
+      tags = _.reject tags, (tag) -> tag is prefix + previous
+
+    if tag and not _.find(tags, (tag) -> tag is prefix + tag)
+      tags.push(prefix + tag)
+
+    @_change(id, {tags})
+
+
+Store =
+    getTagsWithPrefix: (id, prefix) ->
+      prefix += ':'
+      tags = _.select @_get(id).tags, (tag) -> 0 is tag.indexOf(prefix)
+      _.map( tags, (tag) -> tag.replace(prefix, '') ).sort()
+
+
+Extend =
+  extend: (config) ->
+    _.extend( config, Actions )
+    _.extend( config.exports, Store )
+
+module.exports = Extend
diff --git a/exercises/src/stores/vocabulary.coffee b/exercises/src/stores/vocabulary.coffee
new file mode 100644
index 0000000000..995edb0d80
--- /dev/null
+++ b/exercises/src/stores/vocabulary.coffee
@@ -0,0 +1,99 @@
+_ = require 'underscore'
+flux = require 'flux-react'
+{CrudConfig, makeSimpleStore, extendConfig} = require './helpers'
+TaggingMixin = require './tagging-mixin'
+{ExerciseStore} = require './exercise'
+
+VocabularyConfig = {
+
+  _asyncStatusPublish: {}
+
+  _loaded: (obj, exerciseId) ->
+
+    @emit('loaded', exerciseId)
+
+  _created:(obj, id) ->
+    obj.id = obj.number
+    @emit('updated', obj.id)
+    obj
+
+  _saved: (obj, id) ->
+    @emit('updated', obj.id)
+    obj
+
+  createBlank: (id) ->
+    template = @exports.getTemplate.call(@)
+    @loaded(template, id)
+
+  updateDistractor: (id, oldValue, newValue) ->
+    distractor_literals = _.clone(@_get(id).distractor_literals or [])
+    index = _.indexOf distractor_literals, oldValue
+    if -1 is index
+      distractor_literals.push(newValue)
+    else if newValue is ''
+      distractor_literals.splice(index, 1)
+    else
+      distractor_literals[index] = newValue
+    @_change(id, {distractor_literals})
+
+  addBlankDistractor: (id, index) ->
+    distractor_literals = _.clone(@_get(id).distractor_literals or [])
+    index = distractor_literals.length unless index?
+    distractor_literals.splice(index, 0, '')
+    @_change(id, {distractor_literals})
+
+  change: (id, attrs) ->
+    @_change(id, attrs)
+
+  publish: (id) ->
+    @_asyncStatusPublish[id] = true
+    @emitChange()
+
+  published: (obj, id) ->
+    @_asyncStatusPublish[id] = false
+    @emit('published', id)
+    @saved(obj, id)
+
+  exports:
+    getFromExerciseId: (id) ->
+      ex = ExerciseStore.get(id)
+      if ex then @exports.get.call(@, ex.vocab_term_uid) else null
+
+    getTemplate: (id) ->
+      term: ''
+      definition: ''
+      distractor_literals: ['']
+      tags: ['dok:1', 'blooms:1', 'time:short']
+
+    hasExercise: (id) -> @_get(id)?.exercise_uids?.length
+
+    getExerciseIds: (id) -> @_get(id)?.exercise_uids
+
+    isSavable: (id) ->
+      @exports.isChanged.call(@, id) and
+        @exports.validate.call(@, id).valid and
+        not @exports.isSaving.call(@, id) and
+        not @exports.isPublishing.call(@, id)
+
+    isPublished: (id) -> !!@_get(id)?.published_at
+
+    isPublishing: (id) -> !!@_asyncStatusPublish[id]
+
+    isPublishable: (id) ->
+      @exports.validate.call(@, id).valid and
+        not @exports.isChanged.call(@, id) and
+        not @exports.isSaving.call(@, id) and
+        not @exports.isPublishing.call(@, id) and
+        not @_get(id)?.published_at
+
+    validate: (id) ->
+      return {valid: false, part: 'vocab'} unless @_get(id)
+      valid: true
+}
+
+TaggingMixin.extend(VocabularyConfig)
+
+extendConfig(VocabularyConfig, new CrudConfig())
+{actions, store} = makeSimpleStore(VocabularyConfig)
+
+module.exports = {VocabularyActions:actions, VocabularyStore:store}
diff --git a/exercises/test/all-source-files.coffee b/exercises/test/all-source-files.coffee
new file mode 100644
index 0000000000..3fea953e9d
--- /dev/null
+++ b/exercises/test/all-source-files.coffee
@@ -0,0 +1,2 @@
+testsContext = require.context("../src", true, /\.(cjsx|coffee)$/)
+testsContext.keys().forEach(testsContext)
diff --git a/exercises/test/all-tests.coffee b/exercises/test/all-tests.coffee
new file mode 100644
index 0000000000..9d011a8a5a
--- /dev/null
+++ b/exercises/test/all-tests.coffee
@@ -0,0 +1,2 @@
+testsContext = require.context("./", true, /\.spec\.(cjsx|coffee)$/)
+testsContext.keys().forEach(testsContext)
diff --git a/exercises/test/components/app.spec.coffee b/exercises/test/components/app.spec.coffee
new file mode 100644
index 0000000000..dd74054759
--- /dev/null
+++ b/exercises/test/components/app.spec.coffee
@@ -0,0 +1,24 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+App = require 'components/app'
+Location = require 'stores/location'
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+Exercise = require 'components/exercise'
+ExerciseControls = require 'components/exercise/controls'
+
+describe 'App component', ->
+  beforeEach ->
+    @props =
+      location: new Location
+      data:
+        user:
+          full_name: 'Bob'
+
+  it 'renders a blank exercise when btn is clicked', ->
+    sinon.stub(@props.location, 'partsForView', ->
+      Body: Exercise, Controls: ExerciseControls, store: ExerciseStore, actions: ExerciseActions
+    )
+    Testing.renderComponent( App, props: @props ).then ({dom}) ->
+      expect( dom.querySelector('.exercise-editor') ).not.to.exist
+      ReactTestUtils.Simulate.click dom.querySelector('.btn.exercises.blank')
+      expect( dom.querySelector('.exercise-editor') ).to.exist
diff --git a/exercises/test/components/exercise.spec.coffee b/exercises/test/components/exercise.spec.coffee
new file mode 100644
index 0000000000..ce93d26c61
--- /dev/null
+++ b/exercises/test/components/exercise.spec.coffee
@@ -0,0 +1,47 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+
+ExercisePreview = require 'components/exercise/preview'
+Exercise = require 'components/exercise'
+{ExerciseActions} = require 'stores/exercise'
+EXERCISE = require 'exercises/1.json'
+Location = require 'stores/location'
+
+describe 'Exercises component', ->
+  beforeEach ->
+    sinon.stub( Location.prototype, '_createHistory', ->
+      @history = {
+        push: -> 0
+      }
+    )
+    @props =
+      id: '1'
+      location: new Location
+    ExerciseActions.loaded(EXERCISE, @props.id)
+
+  afterEach ->
+    Location::_createHistory.restore()
+
+  it 'renders', ->
+    Testing.renderComponent( Exercise, props: @props ).then ({dom}) ->
+      expect(dom.classList.contains('.exercise-editor')).not.to.true
+
+  it 'renders a preview of the exercise', ->
+    Testing.renderComponent( Exercise, props: @props ).then ({element}) =>
+
+      preview = ReactTestUtils.findRenderedComponentWithType(element, ExercisePreview)
+      expect(preview.props.exerciseId).to.equal(@props.id)
+
+  it 'renders with intro and a multiple questions when exercise is MC', ->
+    Testing.renderComponent( Exercise, props: @props ).then ({dom}) ->
+      tabs = _.pluck dom.querySelectorAll('.nav-tabs li'), 'textContent'
+      expect(tabs).to.deep.equal(['Intro', 'Question 1', 'Question 2', 'Tags', 'Assets'])
+
+  it 'renders with out intro and a single question when exercise is MC', ->
+    ExerciseActions.toggleMultiPart(@props.id)
+    Testing.renderComponent( Exercise, props: @props ).then ({dom}) ->
+      tabs = _.pluck dom.querySelectorAll('.nav-tabs li'), 'textContent'
+      expect(tabs).to.deep.equal(['Question', 'Tags', 'Assets'])
+
+  it 'displays question formats on preview', ->
+    Testing.renderComponent( Exercise, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.openstax-exercise-preview .formats-listing')).to.exist
diff --git a/exercises/test/components/exercise/controls.spec.coffee b/exercises/test/components/exercise/controls.spec.coffee
new file mode 100644
index 0000000000..140bb0029a
--- /dev/null
+++ b/exercises/test/components/exercise/controls.spec.coffee
@@ -0,0 +1,36 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'shared/test/helpers'
+{ExercisePreview} = require 'shared'
+
+ExerciseControls = require 'components/exercise/controls'
+Exercise = require 'components/exercise'
+{ExerciseActions, ExerciseStore} = require 'stores/exercise'
+Location = require 'stores/location'
+EXERCISE = require '../../../api/exercises/1.json'
+
+
+describe 'Exercise controls component', ->
+
+  beforeEach ->
+    @props =
+      id: '1'
+      location: new Location
+    @blankProps =
+      id: 'new'
+      location: new Location
+    ExerciseActions.loaded(EXERCISE, @props.id)
+
+  it 'does not enable the save draft on blank exercises', (done) ->
+    Testing.renderComponent( ExerciseControls, props: @blankProps ).then ({dom}) ->
+      draftBtn = dom.querySelector('.btn.draft')
+      expect( draftBtn.hasAttribute('disabled') ).to.be.true
+      done()
+
+  it 'does enables the save draft when not blank and valid and changed', (done) ->
+    #trigger a change
+    ExerciseActions.sync(1)
+    Testing.renderComponent( ExerciseControls, props: @props ).then ({dom}) ->
+      draftBtn = dom.querySelector('.btn.draft')
+      expect( draftBtn.hasAttribute('disabled') ).to.be.false
+      done()
+
+
diff --git a/exercises/test/config/karma-coverage.config.coffee b/exercises/test/config/karma-coverage.config.coffee
new file mode 100644
index 0000000000..0da3891c4a
--- /dev/null
+++ b/exercises/test/config/karma-coverage.config.coffee
@@ -0,0 +1,32 @@
+{webpack} = require './karma.common'
+_ = require 'underscore'
+commonConfig = require './karma.common'
+
+module.exports = (karmaConfig) ->
+
+  config = _.extend({
+
+    # usefull for debugging Karma config
+    # logLevel: karmaConfig.LOG_DEBUG
+
+    coverageReporter:
+      type: 'text'
+
+  }, commonConfig)
+
+  config.reporters.push('coverage')
+
+  for spec, processors of config.preprocessors
+    processors.push('coverage')
+
+  config.webpack.module.postLoaders = [{
+    test: /\.(cjsx|coffee)$/
+    loader: 'istanbul-instrumenter'
+    exclude: /(test|node_modules|resources|bower_components)/
+  }]
+
+  config.plugins.push(
+    require('karma-coverage')
+  )
+
+  karmaConfig.set(config)
diff --git a/exercises/test/config/karma-dev.config.coffee b/exercises/test/config/karma-dev.config.coffee
new file mode 100644
index 0000000000..96fbf621c9
--- /dev/null
+++ b/exercises/test/config/karma-dev.config.coffee
@@ -0,0 +1,11 @@
+{webpack} = require './karma.common'
+_ = require 'underscore'
+commonConfig = require './karma.common'
+
+module.exports = (karmaConfig) ->
+
+  config = _.extend(commonConfig, {
+    browsers: [process.env.KARMA_BROWSER or 'PhantomJS']
+  })
+
+  karmaConfig.set(config)
diff --git a/exercises/test/config/karma-in-background.js b/exercises/test/config/karma-in-background.js
new file mode 100644
index 0000000000..ef1a595878
--- /dev/null
+++ b/exercises/test/config/karma-in-background.js
@@ -0,0 +1,11 @@
+var KarmaServer = require('karma').Server;
+
+var files = JSON.parse(process.argv[2]);
+
+server = new KarmaServer({
+  configFile: __dirname + '/karma-dev.config.coffee',
+  files: files,
+  singleRun: false
+})
+
+server.start()
diff --git a/exercises/test/config/karma.common.coffee b/exercises/test/config/karma.common.coffee
new file mode 100644
index 0000000000..1760df5cc3
--- /dev/null
+++ b/exercises/test/config/karma.common.coffee
@@ -0,0 +1,65 @@
+_ = require 'underscore'
+path = require 'path'
+
+module.exports =
+  basePath: '../../'
+  frameworks: ['mocha', 'chai', 'chai-sinon', 'phantomjs-shim']
+  browsers: ['PhantomJS']
+  reporters: ['mocha']
+
+  files: [
+    'test/all-tests.coffee'
+    'test/all-source-files.coffee'
+  ]
+
+  preprocessors:
+    'src/**/*.{coffee,cjsx}': ['webpack', 'sourcemap']
+    'test/**/*':  ['webpack', 'sourcemap']
+
+  webpack:
+    devtool: 'eval-source-map'
+    resolve:
+      root: [ path.resolve(__dirname, '../../src'), path.resolve(__dirname, '../../api') ]
+      extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+    module:
+      noParse: [
+        /\/sinon\.js/
+      ]
+      loaders: [
+        { test: /\.coffee$/, loader: "coffee-loader"     }
+        { test: /\.json$/,   loader: "json-loader"       }
+        { test: /\.cjsx$/,   loader: "coffee-jsx-loader" }
+      ]
+      preLoaders: [{
+        test: /\.(cjsx|coffee)$/
+        loader: "coffeelint-loader"
+        exclude: /(node_modules|resources|bower_components)/
+      }]
+
+  webpackMiddleware:
+    # True will suppress error shown in console, so it has to be set to false.
+    quiet: false
+    # Suppress everything except error, so it has to be set to false as well
+    # to see success build.
+    noInfo: false
+    stats:
+      # Config for minimal console.log mess.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
+
+
+  plugins:[
+    require('karma-phantomjs-shim')
+    require('karma-mocha')
+    require('karma-webpack')
+    require('karma-mocha-reporter')
+    require('karma-phantomjs-launcher')
+    require('karma-chai')
+    require('karma-chai-sinon')
+    require('karma-sourcemap-loader')
+  ]
diff --git a/exercises/test/config/karma.config.coffee b/exercises/test/config/karma.config.coffee
new file mode 100644
index 0000000000..bc95887459
--- /dev/null
+++ b/exercises/test/config/karma.config.coffee
@@ -0,0 +1,5 @@
+webpack = require('webpack')
+commonConfig = require './karma.common'
+
+module.exports = (config) ->
+  config.set commonConfig
diff --git a/exercises/test/config/test-runner.coffee b/exercises/test/config/test-runner.coffee
new file mode 100644
index 0000000000..278e59e0b1
--- /dev/null
+++ b/exercises/test/config/test-runner.coffee
@@ -0,0 +1,69 @@
+_ = require 'underscore'
+#gulpKarma = require 'gulp-karma'
+Karma  = require 'karma'
+gulp   = require 'gulp'
+gutil  = require 'gulp-util'
+moment = require 'moment'
+path   = require 'path'
+spawn  = require('child_process').spawn
+fileExists = require 'file-exists'
+_ = require 'underscore'
+
+class TestRunner
+
+  isKarmaRunning: false
+
+  pendingSpecs: []
+
+  runKarma: ->
+    specs = _.unique @pendingSpecs
+
+    # no need to start a server if there are no pending specs, or the spec list hasn't changed
+    return if _.isEmpty(@pendingSpecs)
+    if _.isEqual(@curSpecs?.sort(), specs.sort())
+      @pendingSpecs = []
+      return
+
+    # if there's already a karma instance running, then kill it, since we're starting a new one
+    if @isKarmaRunning and @child
+      process.kill(@child.pid, 'SIGTERM')
+      @child = null
+
+    @isKarmaRunning = true
+    gutil.log("[specs]", gutil.colors.green("testing #{specs.join(' ')}"))
+    @pendingSpecs = []
+    startAt = moment()
+
+    @child = spawn( 'node', [
+      path.join(__dirname, 'karma-in-background.js'),
+      JSON.stringify(specs)
+    ], {stdio: 'inherit'} )
+
+    #save the spec list that is being run
+    @curSpecs = specs[...]
+
+    @child.on('exit', (exitCode) =>
+      @isKarmaRunning = false
+      duration = moment.duration(moment().diff(startAt))
+      elapsed = duration.minutes() + ':' + duration.seconds()
+      gutil.log("[test]", gutil.colors.green("done. #{specs.length} specs in #{elapsed}"))
+    )
+
+  onFileChange: (change) ->
+    if change.relative.match(/^src/)
+      testPath = change.relative.replace('src', 'test')
+      testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      spec = testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      existingSpecs = _.select([
+        testPath.replace(/\.(\w+)$/, ".spec.cjsx"), testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      ], fileExists)
+      if _.isEmpty(existingSpecs)
+        gutil.log("[change]", gutil.colors.red("no spec was found for #{change.relative}"))
+      else
+        @pendingSpecs.push(existingSpecs...)
+    else
+      @pendingSpecs.push(change.relative)
+    gutil.log("[test]", gutil.colors.green("pending: #{@pendingSpecs.join(' ')}")) if @pendingSpecs.length
+    @runKarma()
+
+module.exports = TestRunner
diff --git a/exercises/test/example.js b/exercises/test/example.js
new file mode 100644
index 0000000000..9a8032bf6a
--- /dev/null
+++ b/exercises/test/example.js
@@ -0,0 +1,166 @@
+window.config = {
+  logic: {
+    inputs: {
+      scale: {
+        start: 1,
+        end: 3
+      },
+      mass: {
+        start: 1,
+        end: 3
+      },
+      speed: {
+        start: 1,
+        end: 3
+      }
+    },
+    outputs: {
+      ship_mass: function(_arg) {
+        var mass, scale, speed;
+        scale = _arg.scale, mass = _arg.mass, speed = _arg.speed;
+        return scale * Math.pow(100, mass);
+      },
+      ship_speed: function(_arg) {
+        var mass, scale, speed;
+        scale = _arg.scale, mass = _arg.mass, speed = _arg.speed;
+        return scale * Math.pow(10, speed);
+      },
+      ship_force: function(_arg) {
+        var mass, scale, speed;
+        scale = _arg.scale, mass = _arg.mass, speed = _arg.speed;
+        return scale * Math.pow(100, mass) * scale * Math.pow(10, speed);
+      },
+      ship_mass_grams: function(_arg) {
+        var mass, scale, speed;
+        scale = _arg.scale, mass = _arg.mass, speed = _arg.speed;
+        return scale * Math.pow(100, mass) * 1000;
+      },
+      ship_mass_div_speed: function(_arg) {
+        var mass, scale, speed;
+        scale = _arg.scale, mass = _arg.mass, speed = _arg.speed;
+        return scale * Math.pow(100, mass) / scale * Math.pow(10, speed);
+      }
+    }
+  },
+  stimulus_html: 'This exercise has many parts. Each one is a different type of question. Einstein makes a {{ ship_mass }} kg spaceship',
+      questions: [
+        {
+          formats: ['short-answer'],
+          stimulus_html: 'The spaceship moves at <span data-math="{{ ship_speed }}">{{ ship_speed }}</span> m/s',
+          stem_html: 'What is the rest mass in kg?',
+          answers: [
+            {
+              content_html: '{{ ship_mass }}'
+            }
+          ]
+        }, {
+          formats: ['multiple-choice', 'multiple-select', 'short-answer'],
+          stem_html: 'What is the force if it slams into a wall?',
+          short_stem_html: 'Enter your answer in N',
+          answers: [
+            {
+              id: 'id1',
+              value: '{{ ship_force }}',
+              content_html: '{{ ship_force }} N'
+            }, {
+              id: 'id2',
+              value: '{{ ship_mass }}',
+              content_html: '{{ ship_mass }} N',
+              hint: 'Remember 1 Newton (N) is 1 kg*m/s'
+            }
+          ],
+          correct: 'id1'
+        }, {
+          formats: ['multiple-select', 'multiple-choice', 'short-answer'],
+          stem_html: 'What is the force if it slams into a wall? (this has (a) and (b) options)',
+          short_stem_html: 'Enter your answer in N',
+          answers: [
+            {
+              id: 'wrong',
+              content_html: '0'
+            }, {
+              id: 'wrong2',
+              content_html: '1'
+            }, {
+              id: 'id123',
+              content_html: '{{ ship_force }} N'
+            }, {
+              id: 'id456',
+              content_html: '{{ ship_force }} + 0 <br/> + 0 <br/> + 0 N'
+            }, {
+              id: 'id567',
+              values: ['id456', 'id123']
+            }
+          ],
+          correct: 'id567'
+        },
+        {
+          formats: ['fill-in-the-blank', 'true-false', 'multiple-choice'],
+          stimulus_html: 'Simple fill-in-the-blank questions',
+          stem_html: 'If the ship is traveling {{ ship_speed }} m/s and slams into a wall, the impact force is ____ N.',
+          answers: [
+            {
+              content_html: '{{ ship_force }}'
+            }, {
+              content_html: '{{ ship_mass_div_speed }}',
+              hint: 'Remember 1 Newton (N) is 1 kg*m/s'
+            }
+          ],
+          correct: '{{ ship_force }}'
+        }, {
+          formats: ['fill-in-the-blank', 'true-false'],
+          stem_html: 'Photosynthesis ____ ATP',
+          answers: [
+            {
+              content_html: 'creates'
+            }, {
+              content_html: 'smells like'
+            }
+          ],
+          correct: 'creates'
+        },
+        {
+          formats: ['matching'],
+          stimulus_html: 'Matching question (for draw-a-line-to-match)',
+          stem_html: 'Match the words on the left with words on the right by drawing a line',
+          items: ['foot', 'head', 'hand'],
+          answers: [
+            {
+              credit: 1,
+              content_html: 'sock'
+            }, {
+              credit: 1,
+              content_html: 'hat'
+            }, {
+              credit: 1,
+              content_html: 'glove'
+            }
+          ]
+        },
+        {
+          formats: ['short-answer'],
+          stimulus_html: 'These questions have aleady been answered by the student and are meant to test that the Exercise knows not to render radio buttons, input boxes, etc',
+          stem_html: 'What is 2+2?',
+          answer: '42'
+        }, {
+          formats: ['fill-in-the-blank'],
+          stem_html: '2+2 is ____',
+          answer: '0',
+          correct: '4'
+        }, {
+          formats: ['multiple-choice'],
+          stem_html: 'What is 2+2?',
+          answers: [
+            {
+              id: 'id1',
+              content_html: '4'
+            }, {
+              id: 'id2',
+              content_html: '42'
+            }
+          ],
+          correct: 'id1',
+          answer: 'id1'
+        }
+      ]
+};
diff --git a/exercises/test/example.json b/exercises/test/example.json
new file mode 100644
index 0000000000..5f097708a0
--- /dev/null
+++ b/exercises/test/example.json
@@ -0,0 +1 @@
+{"uid":"1@1","number":1,"version":1,"editors":[],"authors":[],"copyright_holders":[],"derived_from":[],"attachments":[],"title":"Sunt eum iste","stimulus_html":"\u003cspan style=\"font-size: 18px;\"\u003eThis \u003c/span\u003e\u003ci style=\"font-size: 18px;\"\u003eExercise\u003c/i\u003e\u003cspan style=\"font-size: 18px;\"\u003e has several questions that test the rendering and \u003cb\u003eediting\u003c/b\u003e of questions. Some are simple and some are more complicated in one aspect or another.\u003c/span\u003e","questions":[{"stimulus_html":"\u003cdiv\u003eQuaerat dolorum sint facilis minima tempora voluptas sit. Minima impedit eos cupiditate rerum. Ut quia a fugit. Sint dolorum rerum enim facere omnis adipisci ad.\u003c/div\u003e","stem_html":"What is \u003cspan data-math=\"1+2^3\"\u003e1+2^3\u003c/span\u003e?","answers":[{"content_html":"\u003cspan data-math=\"123\"\u003e123\u003c/span\u003e"},{"content_html":"24"},{"content_html":"9"},{"content_html":"10"}],"hints":[],"formats":["multiple-choice"],"combo_choices":[]},{"stimulus_html":"","stem_html":"What \u003cb\u003eis\u003c/b\u003e the capitol of France?","answers":[{"content_html":"Tolouse"},{"content_html":"Champagne"},{"content_html":"Dijon"},{"content_html":"Paris"},{"content_html":"\u003cdiv\u003eNice\u003c/div\u003e\u003cdiv\u003ebut not many are ; )\u003c/div\u003e\u003cdiv\u003enice, that is\u003c/div\u003e"},{"content_html":"Bordeaux"}],"hints":[],"formats":["multiple-choice"],"combo_choices":[]},{"stimulus_html":"","stem_html":"\u003cdiv\u003eLorem \u003ci\u003eipsum\u003c/i\u003e sina lorem sina ipsum sina. \u003cspan data-math=\"Lorem_2^3\"\u003eLorem_2^3\u003c/span\u003e ipsum sina lorem sina ipsum sina. Lorem ipsum sina lorem sina ipsum. Lorem ipsum sina lorem sina ipsum. \u003c/div\u003e\u003cdiv\u003eLorem ipsum sina lorem sina \u003cspan data-math=\"\\frac {\\sqrt{b^2 - 4ac}} 2 + 4\"\u003e\\frac {\\sqrt{b^2 - 4ac}} 2 + 4\u003c/span\u003e. Lorem ipsum sina lorem sina ipsum sina.Lorem ipsum sina lorem sina ipsum sina.Lorem ipsum sina lorem sina ipsum sina.\u003c/div\u003e\u003cdiv\u003eQuaerat dolorum sint facilis minima tempora voluptas sit. Minima impedit eos cupiditate rerum. Ut quia a fugit. Sint dolorum rerum enim facere omnis adipisci ad.\u003c/div\u003e\u003cdiv\u003eAnd some lists:\u003c/div\u003e\u003cul\u003e\n\u003cli\u003ered fish\u003c/li\u003e\n\u003cli\u003eblue fish\u003c/li\u003e\n\u003c/ul\u003e\u003cdiv\u003eordered:\u003c/div\u003e\u003col\u003e\n\u003cli\u003eone fish\u003c/li\u003e\n\u003cli\u003etwo fish\u003c/li\u003e\n\u003c/ol\u003e","answers":[{"content_html":"A harum voluptatum eveniet incidunt voluptatem totam exercitationem. Ducimus sit error quis tempore blanditiis aperiam. Voluptatem ex et sapiente nobis. Quia non tempore dolorum nisi similique distinctio."},{"content_html":"Quaerat dolorum sint facilis minima tempora voluptas sit. Minima impedit eos cupiditate rerum. Ut quia a fugit. Sint dolorum rerum enim facere omnis adipisci ad."},{"content_html":"Est quo eos voluptas nesciunt porro harum. Officiis eum est id. Maxime ut reprehenderit officiis quo voluptas autem."}],"hints":[],"formats":["multiple-choice"],"combo_choices":[]},{"stimulus_html":"","stem_html":"What is \u003cspan data-math=\"2+2\"\u003e2+2\u003c/span\u003e?","answers":[{"content_html":"22"},{"content_html":"7"},{"content_html":"4"},{"content_html":"0"}],"hints":[],"formats":["multiple-choice"],"combo_choices":[]},{"stimulus_html":"","stem_html":"What is a \u003cb\u003eFree Response Question\u003c/b\u003e?","answers":[],"hints":[],"formats":["free-response"],"combo_choices":[]}]}
diff --git a/exercises/test/karma.config.coffee b/exercises/test/karma.config.coffee
new file mode 100644
index 0000000000..c87e4e162b
--- /dev/null
+++ b/exercises/test/karma.config.coffee
@@ -0,0 +1,11 @@
+module.exports = (config) ->
+  config.set
+    basePath: '../'
+    frameworks: ['mocha']
+    browsers: ['PhantomJS']
+    reporters: ['mocha']
+    # plugins: ['karma-mocha', 'karma-phantomjs-launcher', 'karma-mocha-reporter']
+    files: [
+      {pattern: 'test/phantomjs-shims.js'}
+      {pattern: '.tmp/all-tests.js'}
+    ]
diff --git a/test/phantomjs-shims.js b/exercises/test/phantomjs-shims.js
similarity index 100%
rename from test/phantomjs-shims.js
rename to exercises/test/phantomjs-shims.js
diff --git a/exercises/webpack.config.coffee b/exercises/webpack.config.coffee
new file mode 100644
index 0000000000..f6865ab592
--- /dev/null
+++ b/exercises/webpack.config.coffee
@@ -0,0 +1,68 @@
+path = require 'path'
+ExtractTextPlugin = require 'extract-text-webpack-plugin'
+
+isProduction = process.env.NODE_ENV is 'production'
+LOADERS = if isProduction then [] else ["react-hot", "webpack-module-hot-accept"]
+lessLoader = if isProduction
+  { test: /\.less$/,   loader: ExtractTextPlugin.extract('css!less') }
+else
+  { test: /\.less$/,   loaders: LOADERS.concat('style-loader', 'css-loader', 'less-loader') }
+
+module.exports =
+  cache: true
+
+  devtool: if isProduction then undefined else 'source-map'
+
+  entry:
+    exercises: [
+      './src/index.coffee',
+      './resources/styles/app.less'
+    ]
+
+  output:
+    path: if isProduction then 'dist' else '/'
+    filename: '[name].js'
+    publicPath: if isProduction then '' else 'http://localhost:8001/dist/'
+
+  plugins: [ new ExtractTextPlugin('exercises.css') ]
+
+  module:
+    noParse: [
+      /\/sinon\.js/
+    ]
+    loaders: [
+      lessLoader
+      { test: /\.json$/,   loader: "json-loader" }
+      { test: /\.coffee$/, loaders: LOADERS.concat("coffee-loader") }
+      { test: /\.cjsx$/,   loaders: LOADERS.concat("coffee-jsx-loader") }
+      { test: /\.(png|jpg|svg|gif)/, loader: 'file-loader?name=[name].[ext]'}
+      { test: /\.(woff|woff2|eot|ttf)/, loader: "url-loader?limit=30000&name=[name]-[hash].[ext]" }
+   ]
+  resolve:
+    root: [ path.resolve(__dirname, './src') ]
+    extensions: ['', '.js', '.json', '.coffee', '.cjsx']
+
+  devServer:
+    contentBase: './'
+    publicPath: 'http://localhost:8001/dist/'
+    historyApiFallback: true
+    inline: true
+    port: process.env['PORT'] or 8001
+    # It suppress error shown in console, so it has to be set to false.
+    quiet: false,
+    # It suppress everything except error, so it has to be set to false as well
+    # to see success build.
+    noInfo: false
+    host: 'localhost',
+    outputPath: '/',
+    filename: '[name].js',
+    hot: true
+    stats:
+      # Config for minimal console.log mess.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
diff --git a/package.json b/package.json
index 82cb6b4d85..edbe6da105 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,17 @@
 {
-  "name": "openstax-tutor",
+  "name": "openstax-frontend",
   "version": "0.0.0",
-  "description": "Client for OpenStax Tutor",
+  "description": "Frontend Code for OpenStax",
   "main": "index.js",
   "scripts": {
-    "ci": "npm run test",
-    "test": "npm run coverage",
+    "ci": "bin/test-ci",
+    "test": "bin/test",
+    "tdd": "bin/tdd",
     "precoverage": "npm run validate",
     "coverage": "gulp coverage",
-    "build": "gulp build",
-    "build-archive": "gulp build-archive",
+    "serve": "bin/serve",
+    "build": "bin/build",
+    "build-archive": "bin/build tutor archive",
     "debug-integration": "echo 'This may require you to kill the mocha process (search for 5858)' && node-debug --hidden 'node_modules/' ./scripts/run-integration-mocha.js --bail ./test-integration/index",
     "test-integration:only": "mocha --bail -R spec ./test-integration/index",
     "pretest-integration": "if [ -z ${SERVER_URL} ]; then NODE_COVERAGE=true npm run build; fi",
@@ -37,17 +39,21 @@
     "bootstrap-material-design": "0.3.0",
     "camelcase": "1.2.1",
     "classnames": "2.1.5",
+    "dateformat": "1.0.12",
     "es6-promise": "2.3.0",
+    "eventemitter2": "0.4.14",
     "flux-react": "2.6.6",
     "font-awesome": "4.4.0",
+    "history": "^2.1.0",
     "htmlparser2": "3.8.3",
+    "interpolate": "0.1.0",
+    "jquery": "2.1.4",
     "keymaster": "1.6.2",
-    "lodash": "2.4.1",
+    "lodash": "4.14.1",
     "markdown-it": "4.4.0",
     "mime-types": "2.1.7",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
-    "openstax-react-components": "openstax/react-components#d-20160729.a",
     "pluralize": "1.2.1",
     "promise-loader": "1.0.0",
     "qs": "6.1.0",
@@ -59,7 +65,9 @@
     "react-router": "0.13.4",
     "react-scroll-components": "0.2.2",
     "react-waypoint": "openstax/react-waypoint#b34b248947feb0b0ebf89fcef6f234f60f3e516c",
+    "react-widgets": "^2.8",
     "recordo": "0.0.5",
+    "svg-url-loader": "^1.1.0",
     "twix": "1.0.0",
     "ultimate-pagination": "0.7.0",
     "underscore": "1.8.3",
@@ -88,6 +96,7 @@
     "csdoc": "0.1.4",
     "css-loader": "0.22.0",
     "del": "1.1.1",
+    "es6-promise": "^3.0.2",
     "eslint": "1.10.3",
     "extract-text-webpack-plugin": "0.8.2",
     "file-exists": "0.1.1",
@@ -132,6 +141,7 @@
     "webpack": "1.12.2",
     "webpack-dev-server": "1.12.0",
     "webpack-module-hot-accept": "1.0.3",
+    "webpack-umd-external": "1.0.2",
     "when": "3.7.3"
   },
   "config": {
diff --git a/shared/.gitignore b/shared/.gitignore
new file mode 100644
index 0000000000..f7f6419eb5
--- /dev/null
+++ b/shared/.gitignore
@@ -0,0 +1,6 @@
+/node_modules
+*.orig
+/.tmp
+/dist
+/assets
+/test-failed-*.png
diff --git a/shared/.travis.yml b/shared/.travis.yml
new file mode 100644
index 0000000000..27ce7a9f0b
--- /dev/null
+++ b/shared/.travis.yml
@@ -0,0 +1,7 @@
+# `sudo:false` for faster builds.
+sudo: false
+language: node_js
+node_js:
+  - "0.10"
+after_failure:
+  - npm list
diff --git a/shared/Gulpfile.coffee b/shared/Gulpfile.coffee
new file mode 100644
index 0000000000..494c02d95e
--- /dev/null
+++ b/shared/Gulpfile.coffee
@@ -0,0 +1,128 @@
+_ = require 'underscore'
+coffeelint      = require 'gulp-coffeelint'
+del             = require 'del'
+env             = require 'gulp-env'
+gulp            = require 'gulp'
+gutil           = require 'gulp-util'
+gzip            = require 'gulp-gzip'
+karma           = require 'karma'
+rev             = require 'gulp-rev'
+tar             = require 'gulp-tar'
+watch           = require 'gulp-watch'
+webpack         = require 'webpack'
+webpackServer   = require 'webpack-dev-server'
+WPExtractText   = require 'extract-text-webpack-plugin'
+
+getWebpackConfig = require './webpack.config'
+
+TestRunner      = require './test/config/test-runner'
+
+KARMA_DEV_CONFIG =
+  configFile: __dirname + '/test/karma-dev.config.coffee'
+  singleRun: false
+
+KARMA_CONFIG =
+  configFile: __dirname + '/test/config/karma.config.coffee'
+  singleRun: true
+
+KARMA_COVERAGE_CONFIG =
+  configFile: __dirname + '/test/config/karma-coverage.config.coffee'
+  singleRun: true
+
+DIST_DIR = './dist'
+
+# -----------------------------------------------------------------------
+#  Build Javascript and Styles using webpack
+# -----------------------------------------------------------------------
+gulp.task '_cleanDist', (done) ->
+  del(['./dist/*'], done)
+
+gulpWebpack = (name) ->
+  env(vars:{ NODE_ENV: 'production' })
+  config = getWebpackConfig(name, process.env.NODE_ENV is 'production')
+  webpack(config, (err, stats) ->
+    throw new gutil.PluginError("webpack", err) if err
+    gutil.log("[webpack]", stats.toString({
+      # output options
+    }))
+  )
+
+gulp.task '_buildMain', _.partial(gulpWebpack, 'main')
+gulp.task '_buildMainMin', _.partial(gulpWebpack, 'main.min')
+gulp.task '_buildFull', _.partial(gulpWebpack, 'fullBuild')
+gulp.task '_buildFullMin', _.partial(gulpWebpack, 'fullBuild.min')
+gulp.task '_buildDemo', _.partial(gulpWebpack, 'demo')
+
+gulp.task '_build', ['_cleanDist', '_buildMain', '_buildMainMin', '_buildFull', '_buildFullMin']
+
+gulp.task '_tagRev', ['_build'], ->
+  gulp.src("#{DIST_DIR}/*.min.*")
+    .pipe(rev())
+    .pipe(gulp.dest(DIST_DIR))
+    .pipe(rev.manifest())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Production
+# -----------------------------------------------------------------------
+
+gulp.task '_archive', ['_tagRev'], ->
+  gulp.src(["#{DIST_DIR}/*"], base: DIST_DIR)
+    .pipe(tar('archive.tar'))
+    .pipe(gzip())
+    .pipe(gulp.dest(DIST_DIR))
+
+# -----------------------------------------------------------------------
+#  Development
+# -----------------------------------------------------------------------
+#
+gulp.task '_karma', ->
+  server = new karma.Server(KARMA_DEV_CONFIG)
+  server.start()
+
+# TODO will rewrite this to fit new config
+gulp.task '_webserver', ->
+  env(vars:{ NODE_ENV: 'development' })
+  config = getWebpackConfig('devServer', process.env.NODE_ENV is 'production')
+  server = new webpackServer(webpack(config), config.devServer)
+  server.listen(config.devServer.port, '0.0.0.0', (err) ->
+    throw new gutil.PluginError("webpack-dev-server", err) if err
+  )
+
+# -----------------------------------------------------------------------
+#  Public Tasks
+# -----------------------------------------------------------------------
+#
+# External tasks called by various people (devs, testers, Travis, production)
+#
+# TODO: Add this to webpack
+gulp.task 'lint', ->
+  gulp.src(['./src/**/*.{cjsx,coffee}', './*.coffee', './test/**/*.{cjsx,coffee}'])
+  .pipe(coffeelint())
+  # Run through both reporters so lint failures are visible and Travis will error
+  .pipe(coffeelint.reporter())
+  .pipe(coffeelint.reporter('fail'))
+
+gulp.task 'prod', ['_archive']
+
+gulp.task 'serve', ['_webserver']
+
+gulp.task 'test', ['lint'], (done) ->
+  server = new karma.Server(KARMA_CONFIG)
+  server.start()
+
+gulp.task 'coverage', ->
+  server = new karma.Server(KARMA_COVERAGE_CONFIG)
+  server.start()
+
+# clean out the dist directory before running since otherwise stale files might be served from there.
+# The _webserver task builds and serves from memory with a fallback to files in dist
+gulp.task 'dev', ['_cleanDist', '_webserver']
+
+gulp.task 'tdd', ['_cleanDist', '_webserver'], ->
+  runner = new TestRunner()
+  watch('{src,test}/**/*', (change) ->
+    runner.onFileChange(change) unless change.unlink
+  )
+
+gulp.task 'demo', ['_buildDemo']
diff --git a/shared/README.md b/shared/README.md
new file mode 100644
index 0000000000..90206dd53d
--- /dev/null
+++ b/shared/README.md
@@ -0,0 +1,83 @@
+# Shared FE things across OpenStax repos
+
+## How to use in another repo
+
+### Install
+
+You can install from npm (or bower) like so:
+
+```bash
+npm install --save openstax/react-components#v0.0.0
+```
+
+This will add the following line to your `package.json`:
+
+```js
+  "openstax-react-components": "github:openstax/react-components#v0.0.0"
+```
+
+For Travis to be able to install, you will need to change this to:
+
+```js
+  "openstax-react-components": "openstax/react-components#v0.0.0"
+```
+
+### Use
+
+Once installed, you need only to require it and use it like so:
+
+```coffeescript
+{ArbitraryHtmlAndMath, Question, CardBody, FreeResponse} = require 'openstax-react-components'
+
+<ArbitraryHtmlAndMath html={"..."}/>
+
+```
+
+Should you be using this in a project without React, you can require it like this:
+
+```coffeescript
+{ArbitraryHtmlAndMath, Question, CardBody, FreeResponse} = require 'openstax-react-components/full-build.min'
+
+# Mount like this
+FreeResponse(DOMNode, props)
+
+```
+
+Support for this will be deprecated.
+
+## Current exposed things
+
+As [seen here](https://github.com/openstax/react-components/blob/master/index.cjsx)
+
+### Exercise related components
+
+* Exercise
+* ExerciseGroup
+* FreeResponse
+
+### Pinned card set components
+
+* PinnedHeaderFooterCard
+* PinnedHeader
+* CardBody
+* PinnableFooter
+
+### Smaller display components
+
+* Question
+* ArbitraryHtmlAndMath
+
+### Button Components
+
+* RefreshButton
+* AsyncButton
+
+### Notices
+* NotificationsBar
+* NotificationActions (polling for notifications)
+
+### Mixins
+
+* ChapterSectionMixin
+* GetPositionMixin
+* ResizeListenerMixin
diff --git a/shared/api/breadcrumbs/steps.json b/shared/api/breadcrumbs/steps.json
new file mode 100644
index 0000000000..1da0230909
--- /dev/null
+++ b/shared/api/breadcrumbs/steps.json
@@ -0,0 +1,15 @@
+{
+  "steps": [{
+    "is_completed": true,
+    "answer_id": "3",
+    "type": "exercise"
+  }, {
+    "is_completed": true,
+    "is_correct": true,
+    "type": "exercise"
+  }, {
+    "type": "exercise"
+  }, {
+    "type": "reading"  
+  }]
+}
\ No newline at end of file
diff --git a/shared/api/exercise-multipart/index.coffee b/shared/api/exercise-multipart/index.coffee
new file mode 100644
index 0000000000..1342e25b2d
--- /dev/null
+++ b/shared/api/exercise-multipart/index.coffee
@@ -0,0 +1,35 @@
+_ = require 'lodash'
+steps = require './steps'
+
+stepsStubs = {}
+
+TASK_ID = '40'
+commonInfo =
+  content_url: 'https://exercises-dev.openstax.org/exercises/120@1'
+  group: 'core'
+  related_content: [
+    title: 'Physics is cool, yo'
+    chapter_section: '1.3'
+  ]
+  task_id: TASK_ID
+
+# stem and stimulus here as well to replicate real JSON
+commonContent =
+  stimulus_html: 'This stim should only show up once.'
+  stem_html: 'This stem should only show up once.'
+  uid: '120@1'
+
+assignStepToTask = (step, stepIndex) ->
+  step.content = _.extend {}, commonContent, step.content
+  _.extend {questionNumber: (stepIndex + 1)}, {stepIndex: stepIndex}, commonInfo, step
+
+
+_.forEach steps, (step, stepIndex) ->
+  stepStubs =
+    'free-response': assignStepToTask _.omit(step, 'correct_answer_id', 'feedback_html'), stepIndex
+    'multiple-choice': assignStepToTask _.omit(step, 'correct_answer_id', 'feedback_html'), stepIndex
+    'review': assignStepToTask _.clone(step), stepIndex
+
+  stepsStubs[step.id] = stepStubs
+
+module.exports = stepsStubs
diff --git a/shared/api/exercise-multipart/steps.js b/shared/api/exercise-multipart/steps.js
new file mode 100644
index 0000000000..96855d5f58
--- /dev/null
+++ b/shared/api/exercise-multipart/steps.js
@@ -0,0 +1,63 @@
+var steps = [{ "id": "step-id-9-1",
+    "type": "exercise",
+    "correct_answer_id": "id2",
+    "is_in_multipart": true,
+    "context": "Mathematics is an old, broad, and deep discipline (field of study). People working to improve math education need to understand <b>\"What is Mathematics?\"</b>",
+    "content": {
+      "questions":[
+        {
+          "id": "987",
+          "formats": ["multiple-choice", "free-response"],
+          "stimulus_html": "Addition is fun",
+          "stem_html":"What is <span data-math='2+2'>2+2</span>?",
+          "answers":[
+            {"id":"id1","content_html":"22"},
+            {"id":"id2","content_html":"4"}
+          ]
+        }
+      ]
+    }
+  },
+  { "id": "step-id-9-2",
+    "type": "exercise",
+    "correct_answer_id": "id3",
+    "is_in_multipart": true,
+    "content": {
+      "questions":[
+        {
+          "id": "876",
+          "formats": ["multiple-choice", "free-response"],
+          "stimulus_html": "Stimulus for Second Exercise",
+          "stem_html":"Is the glass half full or half empty?",
+          "answers":[
+            {"id":"id3","content_html":"Half Full"},
+            {"id":"id4","content_html":"Half Empty"}
+          ]
+        }
+      ]
+    }
+  },
+  { "id": "step-id-9-3",
+    "type": "exercise",
+    "correct_answer_id": "idn2",
+    "is_in_multipart": true,
+    "has_recovery": true,
+    "feedback_html": "Two apples and then <span data-math='2'>2</span> more apples is <strong>four</strong>",
+    "content": {
+      "questions":[
+        {
+          "id": "990",
+          "formats": ["multiple-choice", "free-response"],
+          "stimulus_html": "Multiplication is fun",
+          "stem_html":"What is <span data-math='4+4'>4+4</span>?",
+          "answers":[
+            {"id":"idn1","content_html":"222"},
+            {"id":"idn2","content_html":"42"}
+          ]
+        }
+      ]
+    }
+  }
+];
+
+module.exports = steps;
diff --git a/shared/api/exercise-preview/data.json b/shared/api/exercise-preview/data.json
new file mode 100644
index 0000000000..3e7e5947df
--- /dev/null
+++ b/shared/api/exercise-preview/data.json
@@ -0,0 +1,256 @@
+{
+  "id": "20",
+  "url": "https:\/\/exercises-dev.openstax.org\/exercises\/20@2",
+  "preview": "Read the above content and then watch this video about DNA:\n<div class=\"preview video\">Video<\/div>\n\nAfter watching it, keep it's important lessions in mind while you answer the following questions",
+  "has_video": true,
+  "has_interactive": false,
+  "is_excluded": false,
+  "pool_types": [
+    "homework_core"
+  ],
+  "context": "<div data-type=\"note\" data-has-label=\"true\" id=\"mcbp_04_01\" class=\"note sociology-real-world\" data-label=\"about socieities\">\n<div data-type=\"title\" class=\"title\">Where Societies Meet—The Worst and the Best</div>\n<p id=\"import-auto-id1169034204797\">When cultures meet, technology can help, hinder, and even destroy. The Exxon Valdez oil spillage in Alaska nearly destroyed the local inhabitant’s entire way of life. Oil spills in the Nigerian Delta have forced many of the Ogoni tribe from their land and forced removal has meant that over 100,000 Ogoni have sought refuge in the country of Benin (University of Michigan, n.d.). And the massive Deepwater Horizon oil spill of 2006 drew great attention as it occurred in what is the most developed country, the United States. Environmental disasters continue as Western technology and its need for energy expands into less developed (peripheral) regions of the globe. </p>\n<p id=\"import-auto-id1169034181979\">Of course not all technology is bad. We take electric light for granted in the United States, Europe, and the rest of the developed world. Such light extends the day and allows us to work, read, and travel at night. It makes us safer and more productive. But regions in India, Africa, and elsewhere are not so fortunate. Meeting the challenge, one particular organization, Barefoot College, located in District Ajmer, Rajasthan, India, works with numerous less developed nations to bring solar electricity, water solutions, and education. The focus for the solar projects is the village elders. The elders agree to select two grandmothers to be trained as solar engineers and choose a village committee composed of men and women to help operate the solar program.\n</p>\n<p id=\"eip-85\">The program has brought light to over 450,000 people in 1,015 villages. The environmental rewards include a large reduction in the use of kerosene and in carbon dioxide emissions. The fact that the villagers are operating the projects themselves helps minimize their sense of dependence. \n</p>\n<figure id=\"import-auto-id1169034200522\"><figcaption>Otherwise skeptic or hesitant villagers are more easily convinced of the value of the solar project when they realize that the “solar engineers” are their local grandmothers. (Photo courtesy of \nAbri le Roux/flickr)</figcaption><span data-type=\"media\" id=\"import-auto-id1169034191733\" data-alt=\"Alt text: A photo of a family of villagers in Africa in front of a solar panel on top of a roof\">\n                            <img src=\"https://archive.cnx.org/resources/4c1a3d523a90faf20c8b77d981c6991737e2633d/CNX_Soc2e_Figure_04_01_003.jpg\" data-media-type=\"image/png\" alt=\"Alt text: A photo of a family of villagers in Africa in front of a solar panel on top of a roof\" width=\"275\">\n                        </span>\n                            </figure>\n</div>",
+  "tags": [
+    {
+      "data": "cb7cf05b-7e16-4a53-a498-003b01ec3d7f",
+      "is_visible": false,
+      "type": "cnxmod",
+      "id": "context-cnxmod:cb7cf05b-7e16-4a53-a498-003b01ec3d7f"
+    },
+    {
+      "is_visible": true,
+      "chapter_section": [
+        1,
+        2
+      ],
+      "description": "Recognize and interpret a phylogenetic tree",
+      "type": "lo",
+      "id": "apbio-ch01-s02-lo03"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "apbio"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "apbio-ch01"
+    },
+    {
+      "data": "4",
+      "is_visible": true,
+      "name": "Blooms: 4",
+      "type": "blooms",
+      "id": "blooms-4"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "book:stax-bio"
+    },
+    {
+      "data": "4",
+      "is_visible": true,
+      "name": "Blooms: 4",
+      "type": "blooms",
+      "id": "blooms:4"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "type:practice"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "book:stax-apbio"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "filter-type:import:hs"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "ost-chapter-review"
+    },
+    {
+      "data": "long",
+      "is_visible": true,
+      "name": "Length: L",
+      "type": "length",
+      "id": "time-long"
+    },
+    {
+      "data": "long",
+      "is_visible": true,
+      "name": "Length: L",
+      "type": "length",
+      "id": "time:long"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "critical-thinking"
+    },
+    {
+      "data": "4",
+      "is_visible": true,
+      "name": "DOK: 4",
+      "type": "dok",
+      "id": "dok4"
+    },
+    {
+      "data": "4",
+      "is_visible": true,
+      "name": "DOK: 4",
+      "type": "dok",
+      "id": "dok:4"
+    },
+    {
+      "is_visible": false,
+      "chapter_section": [
+        1,
+        2
+      ],
+      "type": "generic",
+      "id": "apbio-ch01-s02"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "apbio-ch01-ex020"
+    },
+    {
+      "is_visible": false,
+      "type": "generic",
+      "id": "exid:apbio-ch01-ex020"
+    }
+  ],
+  "content": {
+    "questions": [
+      {
+        "combo_choices": [],
+        "formats": [
+          "free-response",
+          "multiple-choice"
+        ],
+        "hints": [],
+        "community_solutions": [],
+        "collaborator_solutions": [
+          {
+            "content_html": "Woese mainly used the sequence of ribosomal RNA subunits.",
+            "solution_type": "detailed",
+            "attachments": []
+          }
+        ],
+        "answers": [
+          {
+            "feedback_html": "Woese did not use a sequence of DNA. He used a sequence of rRNA.",
+            "correctness": "0.0",
+            "content_html": "a sequence of DNA",
+            "id": 24949
+          },
+          {
+            "feedback_html": "Woese used a sequence of rRNA as evidence to determine that there should be a separate domain for Archaea.",
+            "correctness": "1.0",
+            "content_html": "a sequence of rRNA",
+            "id": 24950
+          },
+          {
+            "feedback_html": "A sequence of rRNA, not mRNA, was used.",
+            "correctness": "0.0",
+            "content_html": "a sequence of mRNA.",
+            "id": 24951
+          },
+          {
+            "feedback_html": "rRNA was used as a scientific evidence by Carl Woese.",
+            "correctness": "0.0",
+            "content_html": "a sequence of tRNA.",
+            "id": 24952
+          }
+        ],
+        "stem_html": "What scientific evidence was used by Carl Woese to determine there should be a separate domain for Archaea?",
+        "stimulus_html": "",
+        "is_answer_order_important": true,
+        "id": 6403
+      },
+      {
+        "combo_choices": [],
+        "formats": [
+          "true-false"
+        ],
+        "hints": [],
+        "community_solutions": [],
+        "collaborator_solutions": [
+          {
+            "content_html": "Based on the above do you still think so?",
+            "solution_type": "detailed",
+            "attachments": []
+          }
+        ],
+        "answers": [
+          {
+            "feedback_html": "Really?",
+            "correctness": "1.0",
+            "content_html": "YES",
+            "id": 24953
+          },
+          {
+            "feedback_html": "I thought so.",
+            "correctness": "0.0",
+            "content_html": "NO",
+            "id": 24954
+          }
+        ],
+        "stem_html": "Do you think the video was helpful?",
+        "stimulus_html": "",
+        "is_answer_order_important": false,
+        "id": 6404
+      }
+    ],
+    "stimulus_html": "Read the above content and then watch this video about DNA:\n<iframe width=\"1280\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" frameborder=\"0\" allowfullscreen=\"\"><\/iframe>\n\nAfter watching it, keep it's important lessions in mind while you answer the following questions",
+    "is_vocab": false,
+    "derived_from": [],
+    "copyright_holders": [
+      {
+        "name": "Rice University",
+        "user_id": 2
+      }
+    ],
+    "authors": [
+      {
+        "name": "OpenStax",
+        "user_id": 1
+      }
+    ],
+    "editors": [],
+    "published_at": "2016-05-19T14:05:58.336Z",
+    "version": 2,
+    "number": 20,
+    "uid": "20@2",
+    "tags": [
+      "apbio",
+      "apbio-ch01",
+      "blooms-4",
+      "ost-chapter-review",
+      "time-long",
+      "critical-thinking",
+      "dok4",
+      "apbio-ch01-s02",
+      "apbio-ch01-s02-lo03",
+      "apbio-ch01-ex020",
+      "book:stax-bio",
+      "time:long",
+      "blooms:4",
+      "dok:4",
+      "context-cnxmod:cb7cf05b-7e16-4a53-a498-003b01ec3d7f",
+      "type:practice",
+      "book:stax-apbio",
+      "exid:apbio-ch01-ex020",
+      "filter-type:import:hs"
+    ],
+    "attachments": []
+  }
+}
diff --git a/shared/api/exercise/free-response.json b/shared/api/exercise/free-response.json
new file mode 100644
index 0000000000..bd80c8a047
--- /dev/null
+++ b/shared/api/exercise/free-response.json
@@ -0,0 +1,94 @@
+{
+  "id": "529",
+  "task_id": "10",
+  "type": "exercise",
+  "group": "spaced practice",
+  "is_completed": true,
+  "last_completed_at": "2015-10-06T11:59:00.000Z",
+  "first_completed_at": "2015-10-06T11:59:00.000Z",
+  "related_content": [{
+    "title": "The Science of Biology",
+    "chapter_section": [
+      1,
+      1
+    ]
+  }],
+  "labels": [],
+  "content_url": "https://exercises-dev.openstax.org/exercises/1@1",
+  "content": {
+    "uid": "1@1",
+    "number": 1,
+    "version": 1,
+    "published_at": "2015-09-16T20:13:32.569Z",
+    "editors": [],
+    "authors": [{
+      "user_id": "1",
+      "name": "OpenStax"
+    }],
+    "copyright_holders": [{
+      "user_id": "2",
+      "name": "Rice University"
+    }],
+    "derived_from": [],
+    "attachments": [],
+    "tags": [
+      "apbio",
+      "apbio-ch01",
+      "apbio-ch01-s01",
+      "apbio-ch01-s01-lo02",
+      "apbio-ch01-ex001",
+      "visual-connection",
+      "inbook-yes",
+      "dok3",
+      "time-medium",
+      "display-free-response",
+      "display-rec-sensitive",
+      "blooms-4"
+    ],
+    "stimulus_html": "<p>Imagine you measure the length of a stick <span data-math=\"5\">5</span> times and obtain the following measurements: <span data-math=\"4.4\\,\\text{m}\">4.4\\,\\text{m}</span>, <span data-math=\"4.43\\,\\text{m}\">4.43\\,\\text{m}</span>, <span data-math=\"4.47\\,\\text{m}\">4.47\\,\\text{m}</span>, <span data-math=\"4.39\\,\\text{m}\">4.39\\,\\text{m}</span>, and <span data-math=\"4.3\\,\\text{m}\">4.3\\,\\text{m}</span>. The stick’s actual length is <span data-math=\"5.8\\,\\text{m}\">5.8\\,\\text{m}</span>.</p>",
+    "questions": [{
+      "id": "1",
+      "stimulus_html": "",
+      "stem_html": "<p>In the example below, the scientific method is used to solve an everyday problem. Order the scientific method steps (numbered items) with the process of solving the everyday problem (lettered items). Based on the results of the experiment, is the hypothesis correct? If it is incorrect, propose some alternative hypotheses.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: center;\"> </th>\n      <th style=\"text-align: left;\">Scientific Method</th>\n      <th style=\"text-align: left;\"> </th>\n      <th style=\"text-align: left;\">Everyday process</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: center;\">1</td>\n      <td style=\"text-align: left;\">Observation</td>\n      <td style=\"text-align: left;\">A</td>\n      <td style=\"text-align: left;\">There is something wrong with the electrical outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">2</td>\n      <td style=\"text-align: left;\">Question</td>\n      <td style=\"text-align: left;\">B</td>\n      <td style=\"text-align: left;\">If something is wrong with the outlet, my coffeemaker also won’t work when plugged into it.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">3</td>\n      <td style=\"text-align: left;\">Hypothesis (answer)</td>\n      <td style=\"text-align: left;\">C</td>\n      <td style=\"text-align: left;\">My toaster doesn’t toast my bread.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">4</td>\n      <td style=\"text-align: left;\">Prediction</td>\n      <td style=\"text-align: left;\">D</td>\n      <td style=\"text-align: left;\">I plug my coffee maker into the outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">5</td>\n      <td style=\"text-align: left;\">Experiment</td>\n      <td style=\"text-align: left;\">E</td>\n      <td style=\"text-align: left;\">My coffeemaker works.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">6</td>\n      <td style=\"text-align: left;\">Result</td>\n      <td style=\"text-align: left;\">F</td>\n      <td style=\"text-align: left;\">What is preventing my coffeemaker from working?</td>\n    </tr>\n  </tbody>\n</table>\n",
+      "answers": [{
+        "id": "4",
+        "content_html": "The original hypothesis is incorrect. Alternative hypotheses includes that both coffee maker and toaster were broken. <span data-math=\"-4.81 \\times 10^{-19}\\,\\text{C}.\">-4.81 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "3",
+        "content_html": "The original hypothesis is correct. The coffee maker and the toaster do not work when plugged into the outlet. <span data-math=\"-1.602 \\times 10^{-19}\\,\\text{C}.\">-1.602 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "2",
+        "content_html": "The original hypothesis is incorrect. Alternative hypothesis includes that toaster wasn’t turned on.  <span data-math=\"1.602 \\times 10^{-19}\\,\\text{C}.\">1.602 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "1",
+        "content_html": "The original hypothesis is correct. There is something wrong with the electrical outlet and therefore the toaster doesn’t work. <span data-math=\"4.81 \\times 10^{-19}\\,\\text{C}.\">4.81 \\times 10^{-19}\\,\\text{C}.</span>"
+      }],
+      "solutions": [{
+        "uid": "1@1",
+        "number": 1,
+        "version": 1,
+        "published_at": "2015-09-16T20:13:32.533Z",
+        "editors": [],
+        "authors": [{
+          "user_id": 1,
+          "name": "OpenStax"
+        }],
+        "copyright_holders": [{
+          "user_id": 2,
+          "name": "Rice University"
+        }],
+        "derived_from": [],
+        "attachments": [],
+        "solution_type": "detailed",
+        "content_html": "<ol>\n  <li>C</li>\n  <li>F</li>\n  <li>A</li>\n  <li>B</li>\n  <li>D</li>\n  <li>E</li>\n</ol>\n\n<p>The original hypothesis is incorrect, as the coffeemaker works when plugged into the outlet. Alternative hypotheses include that the toaster might be broken or that the toaster wasn’t turned on.</p>\n"
+      }],
+      "hints": [],
+      "formats": [
+        "free-response",
+        "multiple-choice"
+      ],
+      "combo_choices": []
+    }]
+  },
+  "has_recovery": false
+}
\ No newline at end of file
diff --git a/shared/api/exercise/index.coffee b/shared/api/exercise/index.coffee
new file mode 100644
index 0000000000..21ccbeb255
--- /dev/null
+++ b/shared/api/exercise/index.coffee
@@ -0,0 +1,8 @@
+freeResponse = require './free-response'
+multipleChoice = require './multiple-choice'
+review = require './review'
+
+module.exports =
+  'free-response': freeResponse
+  'multiple-choice': multipleChoice
+  'review': review
diff --git a/shared/api/exercise/multiple-choice.json b/shared/api/exercise/multiple-choice.json
new file mode 100644
index 0000000000..66be126b88
--- /dev/null
+++ b/shared/api/exercise/multiple-choice.json
@@ -0,0 +1,95 @@
+{
+  "id": "529",
+  "task_id": "10",
+  "type": "exercise",
+  "group": "spaced practice",
+  "is_completed": true,
+  "last_completed_at": "2015-10-06T11:59:00.000Z",
+  "first_completed_at": "2015-10-06T11:59:00.000Z",
+  "related_content": [{
+    "title": "The Science of Biology",
+    "chapter_section": [
+      1,
+      1
+    ]
+  }],
+  "labels": [],
+  "content_url": "https://exercises-dev.openstax.org/exercises/1@1",
+  "content": {
+    "uid": "1@1",
+    "number": 1,
+    "version": 1,
+    "published_at": "2015-09-16T20:13:32.569Z",
+    "editors": [],
+    "authors": [{
+      "user_id": "1",
+      "name": "OpenStax"
+    }],
+    "copyright_holders": [{
+      "user_id": "2",
+      "name": "Rice University"
+    }],
+    "derived_from": [],
+    "attachments": [],
+    "tags": [
+      "apbio",
+      "apbio-ch01",
+      "apbio-ch01-s01",
+      "apbio-ch01-s01-lo02",
+      "apbio-ch01-ex001",
+      "visual-connection",
+      "inbook-yes",
+      "dok3",
+      "time-medium",
+      "display-free-response",
+      "display-rec-sensitive",
+      "blooms-4"
+    ],
+    "stimulus_html": "<p>Imagine you measure the length of a stick <span data-math=\"5\">5</span> times and obtain the following measurements: <span data-math=\"4.4\\,\\text{m}\">4.4\\,\\text{m}</span>, <span data-math=\"4.43\\,\\text{m}\">4.43\\,\\text{m}</span>, <span data-math=\"4.47\\,\\text{m}\">4.47\\,\\text{m}</span>, <span data-math=\"4.39\\,\\text{m}\">4.39\\,\\text{m}</span>, and <span data-math=\"4.3\\,\\text{m}\">4.3\\,\\text{m}</span>. The stick’s actual length is <span data-math=\"5.8\\,\\text{m}\">5.8\\,\\text{m}</span>.</p>",
+    "questions": [{
+      "id": "1",
+      "stimulus_html": "",
+      "stem_html": "<p>In the example below, the scientific method is used to solve an everyday problem. Order the scientific method steps (numbered items) with the process of solving the everyday problem (lettered items). Based on the results of the experiment, is the hypothesis correct? If it is incorrect, propose some alternative hypotheses.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: center;\"> </th>\n      <th style=\"text-align: left;\">Scientific Method</th>\n      <th style=\"text-align: left;\"> </th>\n      <th style=\"text-align: left;\">Everyday process</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: center;\">1</td>\n      <td style=\"text-align: left;\">Observation</td>\n      <td style=\"text-align: left;\">A</td>\n      <td style=\"text-align: left;\">There is something wrong with the electrical outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">2</td>\n      <td style=\"text-align: left;\">Question</td>\n      <td style=\"text-align: left;\">B</td>\n      <td style=\"text-align: left;\">If something is wrong with the outlet, my coffeemaker also won’t work when plugged into it.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">3</td>\n      <td style=\"text-align: left;\">Hypothesis (answer)</td>\n      <td style=\"text-align: left;\">C</td>\n      <td style=\"text-align: left;\">My toaster doesn’t toast my bread.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">4</td>\n      <td style=\"text-align: left;\">Prediction</td>\n      <td style=\"text-align: left;\">D</td>\n      <td style=\"text-align: left;\">I plug my coffee maker into the outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">5</td>\n      <td style=\"text-align: left;\">Experiment</td>\n      <td style=\"text-align: left;\">E</td>\n      <td style=\"text-align: left;\">My coffeemaker works.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">6</td>\n      <td style=\"text-align: left;\">Result</td>\n      <td style=\"text-align: left;\">F</td>\n      <td style=\"text-align: left;\">What is preventing my coffeemaker from working?</td>\n    </tr>\n  </tbody>\n</table>\n",
+      "answers": [{
+        "id": "4",
+        "content_html": "The original hypothesis is incorrect. Alternative hypotheses includes that both coffee maker and toaster were broken. <span data-math=\"-4.81 \\times 10^{-19}\\,\\text{C}.\">-4.81 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "3",
+        "content_html": "The original hypothesis is correct. The coffee maker and the toaster do not work when plugged into the outlet. <span data-math=\"-1.602 \\times 10^{-19}\\,\\text{C}.\">-1.602 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "2",
+        "content_html": "The original hypothesis is incorrect. Alternative hypothesis includes that toaster wasn’t turned on.  <span data-math=\"1.602 \\times 10^{-19}\\,\\text{C}.\">1.602 \\times 10^{-19}\\,\\text{C}.</span>"
+      }, {
+        "id": "1",
+        "content_html": "The original hypothesis is correct. There is something wrong with the electrical outlet and therefore the toaster doesn’t work. <span data-math=\"4.81 \\times 10^{-19}\\,\\text{C}.\">4.81 \\times 10^{-19}\\,\\text{C}.</span>"
+      }],
+      "solutions": [{
+        "uid": "1@1",
+        "number": 1,
+        "version": 1,
+        "published_at": "2015-09-16T20:13:32.533Z",
+        "editors": [],
+        "authors": [{
+          "user_id": 1,
+          "name": "OpenStax"
+        }],
+        "copyright_holders": [{
+          "user_id": 2,
+          "name": "Rice University"
+        }],
+        "derived_from": [],
+        "attachments": [],
+        "solution_type": "detailed",
+        "content_html": "<ol>\n  <li>C</li>\n  <li>F</li>\n  <li>A</li>\n  <li>B</li>\n  <li>D</li>\n  <li>E</li>\n</ol>\n\n<p>The original hypothesis is incorrect, as the coffeemaker works when plugged into the outlet. Alternative hypotheses include that the toaster might be broken or that the toaster wasn’t turned on.</p>\n"
+      }],
+      "hints": [],
+      "formats": [
+        "free-response",
+        "multiple-choice"
+      ],
+      "combo_choices": []
+    }]
+  },
+  "has_recovery": false,
+  "free_response": "A sentence explaining all the things!"
+}
\ No newline at end of file
diff --git a/shared/api/exercise/review.json b/shared/api/exercise/review.json
new file mode 100644
index 0000000000..b40e0c12f0
--- /dev/null
+++ b/shared/api/exercise/review.json
@@ -0,0 +1,103 @@
+{
+  "id": "529",
+  "task_id": "10",
+  "type": "exercise",
+  "group": "spaced practice",
+  "is_completed": true,
+  "last_completed_at": "2015-10-06T11:59:00.000Z",
+  "first_completed_at": "2015-10-06T11:59:00.000Z",
+  "related_content": [{
+    "title": "The Science of Biology",
+    "chapter_section": [
+      1,
+      1
+    ]
+  }],
+  "labels": [],
+  "content_url": "https://exercises-dev.openstax.org/exercises/1@1",
+  "content": {
+    "uid": "1@1",
+    "number": 1,
+    "version": 1,
+    "published_at": "2015-09-16T20:13:32.569Z",
+    "editors": [],
+    "authors": [{
+      "user_id": "1",
+      "name": "OpenStax"
+    }],
+    "copyright_holders": [{
+      "user_id": "2",
+      "name": "Rice University"
+    }],
+    "derived_from": [],
+    "attachments": [],
+    "tags": [
+      "apbio",
+      "apbio-ch01",
+      "apbio-ch01-s01",
+      "apbio-ch01-s01-lo02",
+      "apbio-ch01-ex001",
+      "visual-connection",
+      "inbook-yes",
+      "dok3",
+      "time-medium",
+      "display-free-response",
+      "display-rec-sensitive",
+      "blooms-4"
+    ],
+    "stimulus_html": "<p>Imagine you measure the length of a stick <span data-math=\"5\">5</span> times and obtain the following measurements: <span data-math=\"4.4\\,\\text{m}\">4.4\\,\\text{m}</span>, <span data-math=\"4.43\\,\\text{m}\">4.43\\,\\text{m}</span>, <span data-math=\"4.47\\,\\text{m}\">4.47\\,\\text{m}</span>, <span data-math=\"4.39\\,\\text{m}\">4.39\\,\\text{m}</span>, and <span data-math=\"4.3\\,\\text{m}\">4.3\\,\\text{m}</span>. The stick’s actual length is <span data-math=\"5.8\\,\\text{m}\">5.8\\,\\text{m}</span>.</p>",
+    "questions": [{
+      "id": "1",
+      "stimulus_html": "",
+      "stem_html": "<p>In the example below, the scientific method is used to solve an everyday problem. Order the scientific method steps (numbered items) with the process of solving the everyday problem (lettered items). Based on the results of the experiment, is the hypothesis correct? If it is incorrect, propose some alternative hypotheses.</p>\n\n<table>\n  <thead>\n    <tr>\n      <th style=\"text-align: center;\"> </th>\n      <th style=\"text-align: left;\">Scientific Method</th>\n      <th style=\"text-align: left;\"> </th>\n      <th style=\"text-align: left;\">Everyday process</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style=\"text-align: center;\">1</td>\n      <td style=\"text-align: left;\">Observation</td>\n      <td style=\"text-align: left;\">A</td>\n      <td style=\"text-align: left;\">There is something wrong with the electrical outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">2</td>\n      <td style=\"text-align: left;\">Question</td>\n      <td style=\"text-align: left;\">B</td>\n      <td style=\"text-align: left;\">If something is wrong with the outlet, my coffeemaker also won’t work when plugged into it.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">3</td>\n      <td style=\"text-align: left;\">Hypothesis (answer)</td>\n      <td style=\"text-align: left;\">C</td>\n      <td style=\"text-align: left;\">My toaster doesn’t toast my bread.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">4</td>\n      <td style=\"text-align: left;\">Prediction</td>\n      <td style=\"text-align: left;\">D</td>\n      <td style=\"text-align: left;\">I plug my coffee maker into the outlet.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">5</td>\n      <td style=\"text-align: left;\">Experiment</td>\n      <td style=\"text-align: left;\">E</td>\n      <td style=\"text-align: left;\">My coffeemaker works.</td>\n    </tr>\n    <tr>\n      <td style=\"text-align: center;\">6</td>\n      <td style=\"text-align: left;\">Result</td>\n      <td style=\"text-align: left;\">F</td>\n      <td style=\"text-align: left;\">What is preventing my coffeemaker from working?</td>\n    </tr>\n  </tbody>\n</table>\n",
+      "answers": [{
+        "id": "4",
+        "content_html": "The original hypothesis is incorrect. Alternative hypotheses includes that both coffee maker and toaster were broken.",
+        "feedback_html": "Why wouldn't this be true?"
+      }, {
+        "id": "3",
+        "content_html": "The original hypothesis is correct. The coffee maker and the toaster do not work when plugged into the outlet.",
+        "feedback_html": "Correct"
+      }, {
+        "id": "2",
+        "content_html": "The original hypothesis is incorrect. Alternative hypothesis includes that toaster wasn’t turned on.",
+        "feedback_html": "Why wouldn't this be true? are you sure?"
+      }, {
+        "id": "1",
+        "content_html": "The original hypothesis is correct. There is something wrong with the electrical outlet and therefore the toaster doesn’t work.",
+        "feedback_html": "Why wouldn't this be true? The electrical outlet is good."
+      }],
+      "solutions": [{
+        "uid": "1@1",
+        "number": 1,
+        "version": 1,
+        "published_at": "2015-09-16T20:13:32.533Z",
+        "editors": [],
+        "authors": [{
+          "user_id": 1,
+          "name": "OpenStax"
+        }],
+        "copyright_holders": [{
+          "user_id": 2,
+          "name": "Rice University"
+        }],
+        "derived_from": [],
+        "attachments": [],
+        "solution_type": "detailed",
+        "content_html": "<ol>\n  <li>C</li>\n  <li>F</li>\n  <li>A</li>\n  <li>B</li>\n  <li>D</li>\n  <li>E</li>\n</ol>\n\n<p>The original hypothesis is incorrect, as the coffeemaker works when plugged into the outlet. Alternative hypotheses include that the toaster might be broken or that the toaster wasn’t turned on.</p>\n"
+      }],
+      "hints": [],
+      "formats": [
+        "free-response",
+        "multiple-choice"
+      ],
+      "combo_choices": []
+    }]
+  },
+  "has_recovery": false,
+  "answer_id": "2",
+  "free_response": "A sentence explaining all the things!",
+  "feedback_html": "The original hypothesis is incorrect because when the coffee maker was plugged in it worked. Therefore, it is incorrect to hypothesize that there is something wrong with the outlet. Alternative hypothesis includes that the toaster wasn’t turned on.",
+  "correct_answer_id": "4",
+  "is_correct": false
+}
diff --git a/shared/api/html/data.json b/shared/api/html/data.json
new file mode 100644
index 0000000000..1f15de4211
--- /dev/null
+++ b/shared/api/html/data.json
@@ -0,0 +1,3 @@
+{
+  "html": "<iframe width='560' height='315' src='https://www.youtube.com/embed/oq5gaV4ohn4' frameborder='0' allowfullscreen></iframe><div><iframe width='560' height='315' src='https://www.youtube.com/embed/-m3V8w_7vhk' frameborder='0' allowfullscreen></iframe></div><div class='embed-responsive embed-responsive-16by9'><iframe width='560' height='315' src='https://www.youtube.com/embed/y5mt4KBoQnc' frameborder='0' allowfullscreen></iframe></div><iframe width='960' height='560' src='https://archive.cnx.org/specials/e2ca52af-8c6b-450e-ac2f-9300b38e8739/moving-man/' frameborder='0' allowfullscreen></iframe>"
+}
\ No newline at end of file
diff --git a/shared/api/notifications.json b/shared/api/notifications.json
new file mode 100644
index 0000000000..5da6e15acf
--- /dev/null
+++ b/shared/api/notifications.json
@@ -0,0 +1,7 @@
+[{
+  "id": "1",
+  "message": "Warning: Updates will happen soon!  Site will be down."
+}, {
+  "id": "2",
+  "message": "These are test messages."
+}]
diff --git a/shared/coffeelint.json b/shared/coffeelint.json
new file mode 100644
index 0000000000..461c0b7c80
--- /dev/null
+++ b/shared/coffeelint.json
@@ -0,0 +1,49 @@
+{
+  "coffeelint": {
+    "transforms": [
+      "coffee-react-transform"
+    ]
+  },
+  "indentation": {
+    "level": "error",
+    "value": 2
+  },
+  "line_endings": {
+    "value": "unix",
+    "level": "error"
+  },
+  "arrow_spacing": {
+    "level": "error"
+  },
+  "no_empty_functions": {
+    "level": "error"
+  },
+  "no_empty_param_list": {
+    "level": "error"
+  },
+  "no_interpolation_in_single_quotes": {
+    "level": "error"
+  },
+  "no_throwing_strings": {
+    "level": "error"
+  },
+  "no_unnecessary_double_quotes": {
+    "level": "ignore"
+  },
+  "no_unnecessary_fat_arrows": {
+    "level": "error"
+  },
+  "prefer_english_operator": {
+    "level": "error"
+  },
+  "space_operators": {
+    "level": "error"
+  },
+  "spacing_after_comma": {
+    "level": "error"
+  },
+  "max_line_length": {
+    "value": 135,
+    "level": "error"
+  }
+}
diff --git a/shared/configs/base.coffee b/shared/configs/base.coffee
new file mode 100644
index 0000000000..caa9f52c46
--- /dev/null
+++ b/shared/configs/base.coffee
@@ -0,0 +1,3 @@
+module.exports =
+  devPort: '3004'
+  styleFilename: 'main.css'
diff --git a/shared/configs/webpack.base.coffee b/shared/configs/webpack.base.coffee
new file mode 100644
index 0000000000..d5aa9fd3e5
--- /dev/null
+++ b/shared/configs/webpack.base.coffee
@@ -0,0 +1,5 @@
+module.exports =
+  output:
+    libraryTarget: 'umd'
+    library: 'OpenStaxReactComponents'
+    umdNamedDefine: true
\ No newline at end of file
diff --git a/shared/configs/webpack.debug.coffee b/shared/configs/webpack.debug.coffee
new file mode 100644
index 0000000000..bf19c6005e
--- /dev/null
+++ b/shared/configs/webpack.debug.coffee
@@ -0,0 +1,9 @@
+_ = require 'lodash'
+
+# similar custom configs as production
+productionConfig = require './webpack.production'
+
+debugConfig = _.cloneDeep(productionConfig)
+debugConfig.output.filename = 'main.js'
+
+module.exports = debugConfig
diff --git a/shared/configs/webpack.development.coffee b/shared/configs/webpack.development.coffee
new file mode 100644
index 0000000000..ace9621a33
--- /dev/null
+++ b/shared/configs/webpack.development.coffee
@@ -0,0 +1,6 @@
+module.exports =
+  entry:
+    demo: [
+      'demo'
+      'resources/styles/demo.less'
+    ]
\ No newline at end of file
diff --git a/shared/configs/webpack.production.coffee b/shared/configs/webpack.production.coffee
new file mode 100644
index 0000000000..bb2c95abfb
--- /dev/null
+++ b/shared/configs/webpack.production.coffee
@@ -0,0 +1,24 @@
+webpack = require 'webpack'
+webpackUMDExternal = require 'webpack-umd-external'
+
+# likely won't need any of this production stuffs since
+# we won't be building shared separately anymore.
+module.exports =
+  entry:
+    main: 'index'
+  output:
+    filename: 'main.min.js'
+  externals: webpackUMDExternal(
+    react: 'React'
+    'react/addons': 'React.addons'
+    'react-bootstrap': 'ReactBootstrap'
+    'react-scroll-components': 'ReactScrollComponents'
+    underscore: '_'
+  )
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: 'react/addons'
+      _: 'underscore'
+      BS: 'react-bootstrap'
+    })
+  ]
\ No newline at end of file
diff --git a/shared/demo.cjsx b/shared/demo.cjsx
new file mode 100644
index 0000000000..bfab29087e
--- /dev/null
+++ b/shared/demo.cjsx
@@ -0,0 +1,16 @@
+React = require 'react'
+Demo = require './src/components/demo'
+{startMathJax} = require './src/helpers/mathjax'
+
+loadApp = ->
+  unless document.readyState is 'interactive'
+    return false
+
+  startMathJax()
+  mainDiv = document.createElement('div')
+  mainDiv.id = 'react-root-container'
+  document.body.appendChild(mainDiv)
+  React.render(<Demo/>, mainDiv)
+  true
+
+loadApp() or document.addEventListener('readystatechange', loadApp)
diff --git a/shared/full-build.cjsx b/shared/full-build.cjsx
new file mode 100644
index 0000000000..066595a147
--- /dev/null
+++ b/shared/full-build.cjsx
@@ -0,0 +1,13 @@
+exportsToPassOn = require './index'
+mixinsNames = ['ChapterSectionMixin', 'GetPositionMixin', 'ResizeListenerMixin']
+
+componentsToExport = _.omit(exportsToPassOn, mixinsNames)
+mixins = _.pick(exportsToPassOn, mixinsNames)
+
+wrapComponent = (component) ->
+  (DOMNode, props) ->
+    React.render React.createElement(component, props), DOMNode
+
+wrappedExports = _.mapObject componentsToExport, wrapComponent
+
+module.exports = _.extend({}, wrappedExports, mixins)
diff --git a/shared/index.cjsx b/shared/index.cjsx
new file mode 100644
index 0000000000..254db4ae34
--- /dev/null
+++ b/shared/index.cjsx
@@ -0,0 +1,35 @@
+{PinnedHeader, CardBody, PinnableFooter} = require './src/components/pinned-header-footer-card/sections'
+{Exercise, ExerciseWithScroll} = require './src/components/exercise'
+
+module.exports = {
+  ArbitraryHtmlAndMath:   require './src/components/html'
+  AsyncButton:            require './src/components/buttons/async-button'
+  BootrapURLs:            require './src/model/urls'
+  Breadcrumb:             require './src/components/breadcrumb'
+  CardBody,
+  ChapterSectionMixin:    require './src/components/chapter-section-mixin'
+  CloseButton:            require './src/components/buttons/close-button'
+
+  Exercise,
+  ExerciseGroup:          require './src/components/exercise/group'
+  ExerciseIdentifierLink: require './src/components/exercise-identifier-link'
+  ExerciseHelpers:        require './src/model/exercise'
+  ExercisePreview:        require './src/components/exercise-preview'
+  ExerciseWithScroll,
+
+  FreeResponse:           require './src/components/exercise/free-response'
+  GetPositionMixin:       require './src/components/get-position-mixin'
+  ScrollToMixin:          require './src/components/scroll-to-mixin'
+  KeysHelper:             require './src/helpers/keys'
+  NotificationActions:    require './src/model/notifications'
+  NotificationsBar:       require './src/components/notifications/bar'
+  PinnableFooter,
+  PinnedHeader,
+  PinnedHeaderFooterCard: require './src/components/pinned-header-footer-card'
+  Question:               require './src/components/question'
+  RefreshButton:          require './src/components/buttons/refresh-button'
+  ResizeListenerMixin:    require './src/components/resize-listener-mixin'
+  SmartOverflow:          require './src/components/smart-overflow'
+  SpyMode:                require './src/components/spy-mode'
+  SuretyGuard:            require './src/components/surety-guard'
+}
diff --git a/shared/index.html b/shared/index.html
new file mode 100644
index 0000000000..a74bb1c9ea
--- /dev/null
+++ b/shared/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <link rel="stylesheet" href="./dist/main.css" />
+  <link rel="stylesheet" href="./dist/demo.css" />
+  <script src="//cdn.mathjax.org/mathjax/2.5-latest/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&amp;delayStartupUntil=configured" async></script>
+  <script src="./dist/demo.js" async></script>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/shared/package.json b/shared/package.json
new file mode 100644
index 0000000000..54f35c7289
--- /dev/null
+++ b/shared/package.json
@@ -0,0 +1,106 @@
+{
+  "name": "openstax-react-components",
+  "version": "0.0.0",
+  "description": "OpenStax shared React components",
+  "main": "index",
+  "scripts": {
+    "test": "gulp test && gulp prod",
+    "coverage": "gulp coverage",
+    "deployment": "gulp prod",
+    "test-integration": "mocha -R spec ./test-integration/",
+    "start": "gulp dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openstax/react-components.git"
+  },
+  "author": "Philip Schatz <http://philschatz.com>",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/openstax/react-components/issues"
+  },
+  "homepage": "https://github.com/openstax/react-components",
+  "dependencies": {
+    "axios": "0.11.0",
+    "bootstrap": "3.3.5",
+    "camelcase": "1.2.1",
+    "classnames": "2.1.5",
+    "eventemitter2": "0.4.14",
+    "font-awesome": "4.4.0",
+    "keymaster": "1.6.2",
+    "markdown-it": "4.4.0",
+    "moment": "2.13.0",
+    "underscore": "1.8.3"
+  },
+  "devDependencies": {
+    "blanket": "1.1.7",
+    "chai": "2.1.2",
+    "chai-as-promised": "5.1.0",
+    "chromedriver": "2.19.0",
+    "cjsxify": "0.2.6",
+    "coffee-jsx-loader": "0.1.3",
+    "coffee-loader": "0.7.2",
+    "coffee-react-transform": "3.3.0",
+    "coffee-script": "1.9.3",
+    "coffeelint": "1.13.0",
+    "coffeelint-loader": "0.1.1",
+    "css-loader": "0.22.0",
+    "del": "1.1.1",
+    "es6-promise": "2.3.0",
+    "extract-text-webpack-plugin": "0.8.2",
+    "file-exists": "0.1.1",
+    "file-loader": "0.8.4",
+    "fixed-data-table": "0.4.1",
+    "gulp": "3.9.0",
+    "gulp-coffeelint": "0.4.0",
+    "gulp-env": "0.2.0",
+    "gulp-gzip": "1.0.0",
+    "gulp-rev": "3.0.1",
+    "gulp-tar": "1.4.0",
+    "gulp-util": "3.0.6",
+    "gulp-watch": "4.3.5",
+    "istanbul-instrumenter-loader": "0.1.3",
+    "json-loader": "0.5.3",
+    "karma": "0.13.19",
+    "karma-chai": "0.1.0",
+    "karma-chai-sinon": "0.1.5",
+    "karma-chrome-launcher": "0.2.1",
+    "karma-coverage": "0.5.2",
+    "karma-mocha": "0.1.10",
+    "karma-mocha-reporter": "1.0.4",
+    "karma-nyan-reporter": "0.2.2",
+    "karma-phantomjs-launcher": "0.2.1",
+    "karma-phantomjs-shim": "1.1.1",
+    "karma-sourcemap-loader": "0.3.6",
+    "karma-webpack": "1.7.0",
+    "less": "2.5.3",
+    "less-loader": "2.2.1",
+    "lodash": "3.10.1",
+    "mocha": "2.2.5",
+    "phantomjs": "1.9.18",
+    "react": "0.13.1",
+    "react-bootstrap": ">=0.23.0 <=0.26.2",
+    "react-hot-loader": "1.3.0",
+    "react-scroll-components": "0.2.2",
+    "selenium-webdriver": "2.47.0",
+    "sinon": "1.17.1",
+    "sinon-chai": "2.8.0",
+    "style-loader": "0.12.4",
+    "url-loader": "0.5.6",
+    "webpack": "1.12.2",
+    "webpack-dev-server": "1.12.0",
+    "webpack-module-hot-accept": "1.0.3",
+    "webpack-umd-external": "1.0.2",
+    "when": "3.7.3"
+  },
+  "peerDependencies": {
+    "react": "^0.13.1",
+    "react-bootstrap": ">=0.23.0 <=0.26.2",
+    "react-scroll-components": "^0.2.2"
+  },
+  "config": {
+    "blanket": {
+      "pattern": "src"
+    }
+  }
+}
diff --git a/resources/images/icons/icon-calculator.svg b/shared/resources/images/icons/calculator-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-calculator.svg
rename to shared/resources/images/icons/calculator-cl-icon.svg
diff --git a/shared/resources/images/icons/calculator-hs-icon.svg b/shared/resources/images/icons/calculator-hs-icon.svg
new file mode 100644
index 0000000000..8fbab64a55
--- /dev/null
+++ b/shared/resources/images/icons/calculator-hs-icon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" xml:space="preserve">
+<rect fill="#E6E7E8" width="24" height="30"/>
+<rect x="2" y="1.781" fill="#232E66" width="20" height="10"/>
+<g>
+	<rect x="2" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="13.607" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="2" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="18.936" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="1.842" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="16.158" y="24.264" fill="#F47642" width="6" height="4"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-coach.svg b/shared/resources/images/icons/coach-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-coach.svg
rename to shared/resources/images/icons/coach-cl-icon.svg
diff --git a/shared/resources/images/icons/coach-hs-icon.svg b/shared/resources/images/icons/coach-hs-icon.svg
new file mode 100644
index 0000000000..0014481978
--- /dev/null
+++ b/shared/resources/images/icons/coach-hs-icon.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" xml:space="preserve">
+<g>
+	<path fill="#E6E6E6" d="M41,40.94C45.324,36.6,48,30.612,48,24C48,10.745,37.254,0,24,0C10.745,0,0,10.745,0,24
+		c0,6.625,2.685,12.623,7.025,16.966c5.004-1.498,10.819-2.359,17.03-2.359C30.23,38.606,36.014,39.459,41,40.94z"/>
+	<path fill="#C3002F" d="M24,48c6.643,0,12.654-2.699,17-7.06c-4.986-1.481-10.77-2.334-16.945-2.334
+		c-6.211,0-12.026,0.861-17.03,2.359C11.368,45.312,17.37,48,24,48z"/>
+</g>
+<path fill="#F4CF1A" d="M36.492,22.058c-0.008,0-0.016,0.003-0.023,0.003c-0.654-6.24-5.35-9.199-12.255-9.247
+	c-0.001,0-0.001,0-0.002,0c-0.001,0-0.002,0-0.004,0c-0.062,0.001-0.123,0.004-0.184,0.005c-0.062-0.001-0.123-0.004-0.184-0.005
+	c-0.001,0-0.003,0-0.004,0c0,0-0.002,0-0.003,0c-6.903,0.048-11.794,3.019-12.32,9.247c-0.754,0.031-1.361,1.52-1.361,3.353
+	c0,1.854,0.621,3.355,1.385,3.355c0.207,0,0.402-0.113,0.579-0.311c0.256,1.438,0.501,2.898,0.549,4.306
+	c0.177,5.217,0.776,9.709,11.168,9.711c10.602,0,11.398-4.496,11.623-9.716c0.061-1.379,0.299-2.809,0.537-4.22
+	c0.154,0.146,0.324,0.229,0.5,0.229c0.764,0,1.387-1.502,1.387-3.355C37.879,23.561,37.256,22.058,36.492,22.058z"/>
+<path fill="#00AEEF" d="M25.795,3.041c-0.594-0.1-1.17-0.565-1.724-0.555V2.485c-0.001,0-0.002-0.001-0.003-0.001
+	c-0.008-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001c-0.001,0-0.002,0.001-0.002,0.001
+	c-0.002,0-0.003-0.001-0.004-0.001c-0.007-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001
+	c0,0-0.002,0.001-0.003,0.001v0.001c-0.552-0.011-1.13,0.455-1.723,0.555C10.16,5.068,10.16,8.823,11.064,19.869l13.047-2.42
+	l12.852,2.42C37.869,8.823,37.869,5.068,25.795,3.041z"/>
+<path fill="#232E66" d="M37.541,19.948c-0.957-1.704-6.484-5.094-13.526-5.094c-7.042,0-12.571,3.39-13.527,5.094
+	c-0.938,1.674,0.18,3.276,2.814,3.276c1.649,0,3.77-3.653,10.713-3.653c6.942,0,9.063,3.653,10.712,3.653
+	C37.359,23.225,38.479,21.622,37.541,19.948z"/>
+<path fill="#FFFFFF" d="M25.879,9.763c0.033,0,0.068,0.005,0.104,0.02c0.033,0.012,0.064,0.034,0.098,0.064l0.578,0.608
+	c-0.254,0.332-0.57,0.581-0.951,0.749c-0.381,0.167-0.832,0.253-1.352,0.253c-0.479,0-0.905-0.082-1.282-0.244
+	c-0.378-0.162-0.699-0.387-0.964-0.673c-0.263-0.287-0.464-0.625-0.604-1.018c-0.142-0.394-0.212-0.819-0.212-1.279
+	c0-0.468,0.08-0.9,0.241-1.292c0.16-0.393,0.386-0.73,0.676-1.017c0.287-0.284,0.634-0.506,1.038-0.663
+	c0.401-0.158,0.845-0.238,1.331-0.238c0.235,0,0.458,0.021,0.666,0.063c0.209,0.042,0.404,0.099,0.586,0.173
+	c0.182,0.073,0.348,0.16,0.502,0.263c0.15,0.101,0.285,0.214,0.402,0.339l-0.49,0.659c-0.031,0.042-0.07,0.077-0.111,0.11
+	c-0.043,0.033-0.104,0.049-0.184,0.049c-0.049,0-0.1-0.011-0.145-0.033c-0.047-0.023-0.096-0.053-0.146-0.084
+	c-0.051-0.034-0.109-0.068-0.17-0.109c-0.064-0.037-0.135-0.074-0.221-0.107c-0.084-0.032-0.186-0.06-0.3-0.084
+	c-0.11-0.023-0.244-0.034-0.396-0.034c-0.265,0-0.507,0.047-0.725,0.141c-0.219,0.093-0.407,0.226-0.564,0.4
+	c-0.155,0.173-0.278,0.386-0.365,0.632c-0.087,0.248-0.131,0.525-0.131,0.833c0,0.322,0.043,0.608,0.131,0.858
+	c0.087,0.25,0.208,0.462,0.358,0.632c0.152,0.171,0.327,0.301,0.528,0.39c0.202,0.091,0.417,0.134,0.647,0.134
+	c0.133,0,0.253-0.006,0.361-0.02c0.111-0.012,0.212-0.034,0.306-0.065c0.094-0.033,0.18-0.073,0.268-0.124
+	c0.084-0.05,0.17-0.112,0.256-0.188c0.035-0.028,0.072-0.051,0.111-0.071C25.795,9.771,25.834,9.763,25.879,9.763z"/>
+<g>
+	<path fill="#FFFFFF" d="M29.596,33.651c0.572-1.533,0.572-3.04,0.572-3.416c0,0-3.182,1.2-6.154,1.2c-3.105,0-6.154-1.2-6.154-1.2
+		c0,0.42-0.001,1.9,0.55,3.405c1.027,0.332,3.578,1.08,5.645,1.08C26.102,34.721,28.572,33.987,29.596,33.651z"/>
+	<path fill="#FFFFFF" d="M24.055,35.221c-1.918,0-4.172-0.6-5.391-0.974c0.779,1.635,2.313,3.133,5.35,3.133
+		c3.003,0,4.535-1.491,5.322-3.118C28.129,34.637,25.947,35.221,24.055,35.221z"/>
+	<path fill="#CCCCCC" d="M29.336,34.262c0.098-0.203,0.184-0.406,0.26-0.61c-1.023,0.336-3.494,1.069-5.541,1.069
+		c-2.066,0-4.617-0.748-5.645-1.08c0.074,0.203,0.158,0.405,0.254,0.606c1.219,0.374,3.472,0.974,5.391,0.974
+		C25.947,35.221,28.129,34.637,29.336,34.262z"/>
+</g>
+<g>
+	<path fill="#5F6263" d="M21.525,25.735c0-0.958-0.777-1.735-1.736-1.735c-0.958,0-1.735,0.777-1.735,1.735
+		c0,0.075,0.013,0.147,0.022,0.221h3.426C21.512,25.883,21.525,25.811,21.525,25.735z"/>
+	<path fill="#5F6263" d="M29.729,25.735c0-0.958-0.775-1.735-1.734-1.735s-1.736,0.777-1.736,1.735c0,0.075,0.014,0.147,0.023,0.221
+		h3.426C29.717,25.883,29.729,25.811,29.729,25.735z"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-completed.svg b/shared/resources/images/icons/completed-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-completed.svg
rename to shared/resources/images/icons/completed-cl-icon.svg
diff --git a/shared/resources/images/icons/completed-hs-icon.svg b/shared/resources/images/icons/completed-hs-icon.svg
new file mode 100644
index 0000000000..8d3716549d
--- /dev/null
+++ b/shared/resources/images/icons/completed-hs-icon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#F47642" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#FFFFFF" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-correct.svg b/shared/resources/images/icons/correct-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-correct.svg
rename to shared/resources/images/icons/correct-cl-icon.svg
diff --git a/shared/resources/images/icons/correct-hs-icon.svg b/shared/resources/images/icons/correct-hs-icon.svg
new file mode 100644
index 0000000000..0241b334bd
--- /dev/null
+++ b/shared/resources/images/icons/correct-hs-icon.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-correct.svg"><metadata
+   id="metadata3059"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3057" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1074"
+   inkscape:window-height="730"
+   id="namedview3055"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3047">
+	<path
+   fill="#73B451"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3049" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3051" />
+	<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.745,32.247l-3.633,3.633c-0.109,0.111-0.203,0.178-0.39,0.178   c-0.16-0.004-0.33-0.098-0.408-0.178l-1.861-1.86c-0.172-0.173-0.172-0.447,0-0.62l0.355-0.355c0.173-0.172,0.446-0.084,0.62,0.09   l1.239,1.24l3.102-3.102c0.175-0.174,0.446-0.174,0.621,0l0.354,0.354C36.919,31.802,36.919,32.073,36.745,32.247z"
+   id="path3053" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/resources/images/icons/icon-end.svg b/shared/resources/images/icons/end-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-end.svg
rename to shared/resources/images/icons/end-cl-icon.svg
diff --git a/shared/resources/images/icons/end-hs-icon.svg b/shared/resources/images/icons/end-hs-icon.svg
new file mode 100644
index 0000000000..232b624ba0
--- /dev/null
+++ b/shared/resources/images/icons/end-hs-icon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#FFFFFF" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#5F6263" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-event.svg b/shared/resources/images/icons/event-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-event.svg
rename to shared/resources/images/icons/event-cl-icon.svg
diff --git a/shared/resources/images/icons/event-hs-icon.svg b/shared/resources/images/icons/event-hs-icon.svg
new file mode 100644
index 0000000000..b03298884f
--- /dev/null
+++ b/shared/resources/images/icons/event-hs-icon.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F4CF1A" d="M32.475,11.573c0-1.104-0.896-2-2-2h-20c-1.104,0-2,0.896-2,2v4.002h24V11.573z"/>
+	<path fill="#FFFFFF" d="M10.475,30.574h20c1.104,0,2-0.896,2-2v-13h-24v13C8.475,29.678,9.37,30.574,10.475,30.574z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="14.479" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M15.229,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="26.471" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M27.221,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<rect x="11.476" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="11.476" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="18.142" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="17.573" fill="#F47642" width="4.666" height="4"/>
+	<rect x="18.142" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+</g>
+</svg>
diff --git a/resources/images/icons/exercise-details-action.svg b/shared/resources/images/icons/exercise-details-action.svg
similarity index 100%
rename from resources/images/icons/exercise-details-action.svg
rename to shared/resources/images/icons/exercise-details-action.svg
diff --git a/resources/images/icons/exercise-exclude-card-view-action.svg b/shared/resources/images/icons/exercise-exclude-card-view-action.svg
similarity index 100%
rename from resources/images/icons/exercise-exclude-card-view-action.svg
rename to shared/resources/images/icons/exercise-exclude-card-view-action.svg
diff --git a/resources/images/icons/exercise-exclude-details-view-action.svg b/shared/resources/images/icons/exercise-exclude-details-view-action.svg
similarity index 100%
rename from resources/images/icons/exercise-exclude-details-view-action.svg
rename to shared/resources/images/icons/exercise-exclude-details-view-action.svg
diff --git a/resources/images/icons/exercise-feedback-off-action.svg b/shared/resources/images/icons/exercise-feedback-off-action.svg
similarity index 100%
rename from resources/images/icons/exercise-feedback-off-action.svg
rename to shared/resources/images/icons/exercise-feedback-off-action.svg
diff --git a/resources/images/icons/exercise-feedback-on-action.svg b/shared/resources/images/icons/exercise-feedback-on-action.svg
similarity index 100%
rename from resources/images/icons/exercise-feedback-on-action.svg
rename to shared/resources/images/icons/exercise-feedback-on-action.svg
diff --git a/resources/images/icons/exercise-include-action.svg b/shared/resources/images/icons/exercise-include-action.svg
similarity index 100%
rename from resources/images/icons/exercise-include-action.svg
rename to shared/resources/images/icons/exercise-include-action.svg
diff --git a/resources/images/icons/exercise-report-error-action.svg b/shared/resources/images/icons/exercise-report-error-action.svg
similarity index 100%
rename from resources/images/icons/exercise-report-error-action.svg
rename to shared/resources/images/icons/exercise-report-error-action.svg
diff --git a/resources/images/icons/icon-external.svg b/shared/resources/images/icons/external-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-external.svg
rename to shared/resources/images/icons/external-cl-icon.svg
diff --git a/shared/resources/images/icons/external-hs-icon.svg b/shared/resources/images/icons/external-hs-icon.svg
new file mode 100644
index 0000000000..f2050caa71
--- /dev/null
+++ b/shared/resources/images/icons/external-hs-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#FFFFFF" d="M30,32.987c0,0.78-0.613,1.412-1.369,1.412H11.369c-0.757,0-1.369-0.632-1.369-1.412V7.013
+		c0-0.78,0.612-1.413,1.369-1.413h17.262C29.387,5.6,30,6.232,30,7.013V32.987z"/>
+	<rect x="12" y="21.396" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="25.136" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="28.876" fill="#A7A9AC" width="11.199" height="0.801"/>
+</g>
+<polygon fill="#73B451" points="19.434,18.999 23.566,14.867 25.633,16.933 25.632,8.67 17.368,8.67 19.434,10.736 15.303,14.867 
+	"/>
+</svg>
diff --git a/resources/images/icons/icon-feedback.svg b/shared/resources/images/icons/feedback-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-feedback.svg
rename to shared/resources/images/icons/feedback-cl-icon.svg
diff --git a/shared/resources/images/icons/feedback-hs-icon.svg b/shared/resources/images/icons/feedback-hs-icon.svg
new file mode 100644
index 0000000000..85ca782b10
--- /dev/null
+++ b/shared/resources/images/icons/feedback-hs-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#F47642" cx="29.975" cy="29.982" r="30"/>
+<path fill="#FFFFFF" d="M44.458,12.133H15.495c-2.213,0-4.006,1.793-4.006,4.006v23.366c0,2.212,1.793,4.006,4.006,4.006h4.07v7.884
+	c0,1.203,1.156,2.081,2.391,0.848c0.983-0.984,5.048-5.082,8.659-8.731h13.843c2.212,0,4.005-1.794,4.005-4.006V16.139
+	C48.462,13.927,46.669,12.133,44.458,12.133z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3002F" d="M43.937,25.575l-3.102,3.101l3.04,3.039
+	c0.381,0.381,0.381,0.998,0,1.378l-0.828,0.826c-0.381,0.381-0.997,0.381-1.377,0l-3.038-3.038l-2.914,2.913
+	c-0.378,0.378-0.991,0.378-1.369,0l-0.821-0.822c-0.38-0.377-0.38-0.991,0-1.369l2.911-2.913l-3.038-3.039
+	c-0.381-0.38-0.381-0.997,0-1.377l0.828-0.827c0.38-0.381,0.997-0.381,1.378,0l3.037,3.038l3.103-3.101
+	c0.378-0.378,0.99-0.378,1.369,0l0.821,0.822C44.315,24.583,44.315,25.197,43.937,25.575z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M29.833,25.694l-7.941,7.942c-0.239,0.243-0.443,0.388-0.853,0.39
+	c-0.35-0.012-0.721-0.214-0.891-0.39l-4.068-4.068c-0.379-0.378-0.379-0.978,0-1.356l0.775-0.774
+	c0.378-0.378,0.978-0.185,1.355,0.193l2.711,2.712l6.781-6.78c0.38-0.381,0.975-0.381,1.355,0l0.774,0.774
+	C30.214,24.718,30.214,25.313,29.833,25.694z"/>
+</svg>
diff --git a/resources/images/icons/icon-homework.svg b/shared/resources/images/icons/homework-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-homework.svg
rename to shared/resources/images/icons/homework-cl-icon.svg
diff --git a/shared/resources/images/icons/homework-hs-icon.svg b/shared/resources/images/icons/homework-hs-icon.svg
new file mode 100644
index 0000000000..2870808cef
--- /dev/null
+++ b/shared/resources/images/icons/homework-hs-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<g>
+	<circle fill="#00C1DE" cx="20" cy="20" r="20"/>
+	<g>
+		<path fill="#F89646" d="M20.317,19.683L30.986,9.014c-2.309-2.309-5.043-3.929-7.949-4.873l-9.131,9.13L20.317,19.683z"/>
+		<path fill="#F47642" d="M20.317,19.683l6.411,6.412l9.131-9.131c-0.943-2.906-2.564-5.641-4.873-7.95L20.317,19.683z"/>
+		<g>
+			<polygon fill="#F4CF1A" points="26.726,26.098 13.903,13.275 9.281,27.284 12.452,30.454 			"/>
+			<polygon fill="#3B3B3B" points="12.452,30.454 9.281,27.284 7.763,31.886 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-calculator.svg b/shared/resources/images/icons/icon-calculator.svg
new file mode 100644
index 0000000000..8fbab64a55
--- /dev/null
+++ b/shared/resources/images/icons/icon-calculator.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" xml:space="preserve">
+<rect fill="#E6E7E8" width="24" height="30"/>
+<rect x="2" y="1.781" fill="#232E66" width="20" height="10"/>
+<g>
+	<rect x="2" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="13.607" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="2" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="18.936" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="1.842" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="16.158" y="24.264" fill="#F47642" width="6" height="4"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-coach.svg b/shared/resources/images/icons/icon-coach.svg
new file mode 100644
index 0000000000..0014481978
--- /dev/null
+++ b/shared/resources/images/icons/icon-coach.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" xml:space="preserve">
+<g>
+	<path fill="#E6E6E6" d="M41,40.94C45.324,36.6,48,30.612,48,24C48,10.745,37.254,0,24,0C10.745,0,0,10.745,0,24
+		c0,6.625,2.685,12.623,7.025,16.966c5.004-1.498,10.819-2.359,17.03-2.359C30.23,38.606,36.014,39.459,41,40.94z"/>
+	<path fill="#C3002F" d="M24,48c6.643,0,12.654-2.699,17-7.06c-4.986-1.481-10.77-2.334-16.945-2.334
+		c-6.211,0-12.026,0.861-17.03,2.359C11.368,45.312,17.37,48,24,48z"/>
+</g>
+<path fill="#F4CF1A" d="M36.492,22.058c-0.008,0-0.016,0.003-0.023,0.003c-0.654-6.24-5.35-9.199-12.255-9.247
+	c-0.001,0-0.001,0-0.002,0c-0.001,0-0.002,0-0.004,0c-0.062,0.001-0.123,0.004-0.184,0.005c-0.062-0.001-0.123-0.004-0.184-0.005
+	c-0.001,0-0.003,0-0.004,0c0,0-0.002,0-0.003,0c-6.903,0.048-11.794,3.019-12.32,9.247c-0.754,0.031-1.361,1.52-1.361,3.353
+	c0,1.854,0.621,3.355,1.385,3.355c0.207,0,0.402-0.113,0.579-0.311c0.256,1.438,0.501,2.898,0.549,4.306
+	c0.177,5.217,0.776,9.709,11.168,9.711c10.602,0,11.398-4.496,11.623-9.716c0.061-1.379,0.299-2.809,0.537-4.22
+	c0.154,0.146,0.324,0.229,0.5,0.229c0.764,0,1.387-1.502,1.387-3.355C37.879,23.561,37.256,22.058,36.492,22.058z"/>
+<path fill="#00AEEF" d="M25.795,3.041c-0.594-0.1-1.17-0.565-1.724-0.555V2.485c-0.001,0-0.002-0.001-0.003-0.001
+	c-0.008-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001c-0.001,0-0.002,0.001-0.002,0.001
+	c-0.002,0-0.003-0.001-0.004-0.001c-0.007-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001
+	c0,0-0.002,0.001-0.003,0.001v0.001c-0.552-0.011-1.13,0.455-1.723,0.555C10.16,5.068,10.16,8.823,11.064,19.869l13.047-2.42
+	l12.852,2.42C37.869,8.823,37.869,5.068,25.795,3.041z"/>
+<path fill="#232E66" d="M37.541,19.948c-0.957-1.704-6.484-5.094-13.526-5.094c-7.042,0-12.571,3.39-13.527,5.094
+	c-0.938,1.674,0.18,3.276,2.814,3.276c1.649,0,3.77-3.653,10.713-3.653c6.942,0,9.063,3.653,10.712,3.653
+	C37.359,23.225,38.479,21.622,37.541,19.948z"/>
+<path fill="#FFFFFF" d="M25.879,9.763c0.033,0,0.068,0.005,0.104,0.02c0.033,0.012,0.064,0.034,0.098,0.064l0.578,0.608
+	c-0.254,0.332-0.57,0.581-0.951,0.749c-0.381,0.167-0.832,0.253-1.352,0.253c-0.479,0-0.905-0.082-1.282-0.244
+	c-0.378-0.162-0.699-0.387-0.964-0.673c-0.263-0.287-0.464-0.625-0.604-1.018c-0.142-0.394-0.212-0.819-0.212-1.279
+	c0-0.468,0.08-0.9,0.241-1.292c0.16-0.393,0.386-0.73,0.676-1.017c0.287-0.284,0.634-0.506,1.038-0.663
+	c0.401-0.158,0.845-0.238,1.331-0.238c0.235,0,0.458,0.021,0.666,0.063c0.209,0.042,0.404,0.099,0.586,0.173
+	c0.182,0.073,0.348,0.16,0.502,0.263c0.15,0.101,0.285,0.214,0.402,0.339l-0.49,0.659c-0.031,0.042-0.07,0.077-0.111,0.11
+	c-0.043,0.033-0.104,0.049-0.184,0.049c-0.049,0-0.1-0.011-0.145-0.033c-0.047-0.023-0.096-0.053-0.146-0.084
+	c-0.051-0.034-0.109-0.068-0.17-0.109c-0.064-0.037-0.135-0.074-0.221-0.107c-0.084-0.032-0.186-0.06-0.3-0.084
+	c-0.11-0.023-0.244-0.034-0.396-0.034c-0.265,0-0.507,0.047-0.725,0.141c-0.219,0.093-0.407,0.226-0.564,0.4
+	c-0.155,0.173-0.278,0.386-0.365,0.632c-0.087,0.248-0.131,0.525-0.131,0.833c0,0.322,0.043,0.608,0.131,0.858
+	c0.087,0.25,0.208,0.462,0.358,0.632c0.152,0.171,0.327,0.301,0.528,0.39c0.202,0.091,0.417,0.134,0.647,0.134
+	c0.133,0,0.253-0.006,0.361-0.02c0.111-0.012,0.212-0.034,0.306-0.065c0.094-0.033,0.18-0.073,0.268-0.124
+	c0.084-0.05,0.17-0.112,0.256-0.188c0.035-0.028,0.072-0.051,0.111-0.071C25.795,9.771,25.834,9.763,25.879,9.763z"/>
+<g>
+	<path fill="#FFFFFF" d="M29.596,33.651c0.572-1.533,0.572-3.04,0.572-3.416c0,0-3.182,1.2-6.154,1.2c-3.105,0-6.154-1.2-6.154-1.2
+		c0,0.42-0.001,1.9,0.55,3.405c1.027,0.332,3.578,1.08,5.645,1.08C26.102,34.721,28.572,33.987,29.596,33.651z"/>
+	<path fill="#FFFFFF" d="M24.055,35.221c-1.918,0-4.172-0.6-5.391-0.974c0.779,1.635,2.313,3.133,5.35,3.133
+		c3.003,0,4.535-1.491,5.322-3.118C28.129,34.637,25.947,35.221,24.055,35.221z"/>
+	<path fill="#CCCCCC" d="M29.336,34.262c0.098-0.203,0.184-0.406,0.26-0.61c-1.023,0.336-3.494,1.069-5.541,1.069
+		c-2.066,0-4.617-0.748-5.645-1.08c0.074,0.203,0.158,0.405,0.254,0.606c1.219,0.374,3.472,0.974,5.391,0.974
+		C25.947,35.221,28.129,34.637,29.336,34.262z"/>
+</g>
+<g>
+	<path fill="#5F6263" d="M21.525,25.735c0-0.958-0.777-1.735-1.736-1.735c-0.958,0-1.735,0.777-1.735,1.735
+		c0,0.075,0.013,0.147,0.022,0.221h3.426C21.512,25.883,21.525,25.811,21.525,25.735z"/>
+	<path fill="#5F6263" d="M29.729,25.735c0-0.958-0.775-1.735-1.734-1.735s-1.736,0.777-1.736,1.735c0,0.075,0.014,0.147,0.023,0.221
+		h3.426C29.717,25.883,29.729,25.811,29.729,25.735z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-completed.svg b/shared/resources/images/icons/icon-completed.svg
new file mode 100644
index 0000000000..8d3716549d
--- /dev/null
+++ b/shared/resources/images/icons/icon-completed.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#F47642" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#FFFFFF" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-correct.svg b/shared/resources/images/icons/icon-correct.svg
new file mode 100644
index 0000000000..0241b334bd
--- /dev/null
+++ b/shared/resources/images/icons/icon-correct.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-correct.svg"><metadata
+   id="metadata3059"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3057" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1074"
+   inkscape:window-height="730"
+   id="namedview3055"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3047">
+	<path
+   fill="#73B451"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3049" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3051" />
+	<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.745,32.247l-3.633,3.633c-0.109,0.111-0.203,0.178-0.39,0.178   c-0.16-0.004-0.33-0.098-0.408-0.178l-1.861-1.86c-0.172-0.173-0.172-0.447,0-0.62l0.355-0.355c0.173-0.172,0.446-0.084,0.62,0.09   l1.239,1.24l3.102-3.102c0.175-0.174,0.446-0.174,0.621,0l0.354,0.354C36.919,31.802,36.919,32.073,36.745,32.247z"
+   id="path3053" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/shared/resources/images/icons/icon-end.svg b/shared/resources/images/icons/icon-end.svg
new file mode 100644
index 0000000000..232b624ba0
--- /dev/null
+++ b/shared/resources/images/icons/icon-end.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#FFFFFF" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#5F6263" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-event.svg b/shared/resources/images/icons/icon-event.svg
new file mode 100644
index 0000000000..b03298884f
--- /dev/null
+++ b/shared/resources/images/icons/icon-event.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F4CF1A" d="M32.475,11.573c0-1.104-0.896-2-2-2h-20c-1.104,0-2,0.896-2,2v4.002h24V11.573z"/>
+	<path fill="#FFFFFF" d="M10.475,30.574h20c1.104,0,2-0.896,2-2v-13h-24v13C8.475,29.678,9.37,30.574,10.475,30.574z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="14.479" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M15.229,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="26.471" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M27.221,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<rect x="11.476" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="11.476" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="18.142" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="17.573" fill="#F47642" width="4.666" height="4"/>
+	<rect x="18.142" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/icon-external.svg b/shared/resources/images/icons/icon-external.svg
new file mode 100644
index 0000000000..f2050caa71
--- /dev/null
+++ b/shared/resources/images/icons/icon-external.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#FFFFFF" d="M30,32.987c0,0.78-0.613,1.412-1.369,1.412H11.369c-0.757,0-1.369-0.632-1.369-1.412V7.013
+		c0-0.78,0.612-1.413,1.369-1.413h17.262C29.387,5.6,30,6.232,30,7.013V32.987z"/>
+	<rect x="12" y="21.396" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="25.136" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="28.876" fill="#A7A9AC" width="11.199" height="0.801"/>
+</g>
+<polygon fill="#73B451" points="19.434,18.999 23.566,14.867 25.633,16.933 25.632,8.67 17.368,8.67 19.434,10.736 15.303,14.867 
+	"/>
+</svg>
diff --git a/shared/resources/images/icons/icon-feedback.svg b/shared/resources/images/icons/icon-feedback.svg
new file mode 100644
index 0000000000..85ca782b10
--- /dev/null
+++ b/shared/resources/images/icons/icon-feedback.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#F47642" cx="29.975" cy="29.982" r="30"/>
+<path fill="#FFFFFF" d="M44.458,12.133H15.495c-2.213,0-4.006,1.793-4.006,4.006v23.366c0,2.212,1.793,4.006,4.006,4.006h4.07v7.884
+	c0,1.203,1.156,2.081,2.391,0.848c0.983-0.984,5.048-5.082,8.659-8.731h13.843c2.212,0,4.005-1.794,4.005-4.006V16.139
+	C48.462,13.927,46.669,12.133,44.458,12.133z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3002F" d="M43.937,25.575l-3.102,3.101l3.04,3.039
+	c0.381,0.381,0.381,0.998,0,1.378l-0.828,0.826c-0.381,0.381-0.997,0.381-1.377,0l-3.038-3.038l-2.914,2.913
+	c-0.378,0.378-0.991,0.378-1.369,0l-0.821-0.822c-0.38-0.377-0.38-0.991,0-1.369l2.911-2.913l-3.038-3.039
+	c-0.381-0.38-0.381-0.997,0-1.377l0.828-0.827c0.38-0.381,0.997-0.381,1.378,0l3.037,3.038l3.103-3.101
+	c0.378-0.378,0.99-0.378,1.369,0l0.821,0.822C44.315,24.583,44.315,25.197,43.937,25.575z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M29.833,25.694l-7.941,7.942c-0.239,0.243-0.443,0.388-0.853,0.39
+	c-0.35-0.012-0.721-0.214-0.891-0.39l-4.068-4.068c-0.379-0.378-0.379-0.978,0-1.356l0.775-0.774
+	c0.378-0.378,0.978-0.185,1.355,0.193l2.711,2.712l6.781-6.78c0.38-0.381,0.975-0.381,1.355,0l0.774,0.774
+	C30.214,24.718,30.214,25.313,29.833,25.694z"/>
+</svg>
diff --git a/shared/resources/images/icons/icon-homework.svg b/shared/resources/images/icons/icon-homework.svg
new file mode 100644
index 0000000000..2870808cef
--- /dev/null
+++ b/shared/resources/images/icons/icon-homework.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<g>
+	<circle fill="#00C1DE" cx="20" cy="20" r="20"/>
+	<g>
+		<path fill="#F89646" d="M20.317,19.683L30.986,9.014c-2.309-2.309-5.043-3.929-7.949-4.873l-9.131,9.13L20.317,19.683z"/>
+		<path fill="#F47642" d="M20.317,19.683l6.411,6.412l9.131-9.131c-0.943-2.906-2.564-5.641-4.873-7.95L20.317,19.683z"/>
+		<g>
+			<polygon fill="#F4CF1A" points="26.726,26.098 13.903,13.275 9.281,27.284 12.452,30.454 			"/>
+			<polygon fill="#3B3B3B" points="12.452,30.454 9.281,27.284 7.763,31.886 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-incorrect.svg b/shared/resources/images/icons/icon-incorrect.svg
similarity index 100%
rename from resources/images/icons/icon-incorrect.svg
rename to shared/resources/images/icons/icon-incorrect.svg
diff --git a/shared/resources/images/icons/icon-interactive-placeholder.svg b/shared/resources/images/icons/icon-interactive-placeholder.svg
new file mode 100644
index 0000000000..29d7405f2a
--- /dev/null
+++ b/shared/resources/images/icons/icon-interactive-placeholder.svg
@@ -0,0 +1,19 @@
+<svg className="placeholder interactive"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.8,0H25.2C11.3,0,0,11.3,0,25.2v229.7c0,13.9,11.3,25.2,25.2,25.2c0,0,0,0,0,0h160.4
+      c-0.1,20.9-1.8,42.6-16.5,57.3H109c-2.9-0.1-5.4,2.1-5.5,5.1s2.1,5.4,5.1,5.5c0.2,0,0.3,0,0.5,0h182.8c2.9,0.1,5.4-2.1,5.5-5.1
+      s-2.1-5.4-5.1-5.5c-0.2,0-0.3,0-0.5,0h-61.9c-14.7-14.7-16.4-36.4-16.5-57.3h161.4c13.9,0,25.2-11.3,25.2-25.2c0,0,0,0,0,0V25.2
+      C400,11.3,388.7,0,374.8,0z"
+  />
+  <path fill="#FFFFFF"
+    d="M27,17.1h346c6.6,0,12,5.4,12,12v222c0,6.6-5.4,12-12,12H27c-6.6,0-12-5.4-12-12v-222
+      C15,22.5,20.4,17.1,27,17.1z"
+  />
+  <path fill="#5E6062"
+    d="M222.1,60.5L128,82.1v95.8l48.3,39.9l95.8-25V96.9L222.1,60.5z M224.8,150.4v-33l-6.4,1.7v30.4l-34.3,9v6.6
+      l36.8-9.6l41.1,33.5l-81.8,21.3V125l85.4-22.2v80.8L224.8,150.4z M134.4,171.4v-80l39.5,32.9v83.3l-36.7-30.3l32.9-8.6v-6.6
+      L134.4,171.4z M224.9,102.9V70.4l36.7,26.8l-84,21.9l-39.4-32.8l80.3-18.5v36.8L224.9,102.9z"
+  />
+</svg>
diff --git a/shared/resources/images/icons/icon-interactive.svg b/shared/resources/images/icons/icon-interactive.svg
new file mode 100644
index 0000000000..0aeec98500
--- /dev/null
+++ b/shared/resources/images/icons/icon-interactive.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22.1 22" style="enable-background:new 0 0 22.1 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5E6062;}
+	.st1{fill:none;}
+	.st2{fill:#F47641;}
+</style>
+<g>
+	<path class="st0" d="M20.2,0H4.7c-1,0-1.8,0.8-1.8,1.8v15.4c0,1,0.8,1.8,1.8,1.8h15.5c1,0,1.8-0.8,1.8-1.8V1.8
+		C22.1,0.8,21.2,0,20.2,0z M20.6,16.9c0,0.4-0.3,0.7-0.7,0.7h-15c-0.4,0-0.7-0.3-0.7-0.7V2.2c0-0.4,0.3-0.7,0.7-0.7h15
+		c0.4,0,0.7,0.3,0.7,0.7V16.9z"/>
+	<path class="st1" d="M19.9,1.5h-15c-0.4,0-0.7,0.3-0.7,0.7v14.7c0,0.4,0.3,0.7,0.7,0.7h15c0.4,0,0.7-0.3,0.7-0.7V2.2
+		C20.6,1.8,20.3,1.5,19.9,1.5z M9.7,14.6V4.5L17,9.6L9.7,14.6z"/>
+	<path class="st0" d="M1.4,19.7V7.1H0v13.1c0,1,0.8,1.8,1.8,1.8h12.7v-1.5H2.2C1.8,20.5,1.4,20.1,1.4,19.7z"/>
+	<polygon class="st2" points="9.7,14.6 17,9.6 9.7,4.5 	"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-laptop.svg b/shared/resources/images/icons/icon-laptop.svg
similarity index 100%
rename from resources/images/icons/icon-laptop.svg
rename to shared/resources/images/icons/icon-laptop.svg
diff --git a/resources/images/icons/icon-light-bulb.svg b/shared/resources/images/icons/icon-light-bulb.svg
similarity index 100%
rename from resources/images/icons/icon-light-bulb.svg
rename to shared/resources/images/icons/icon-light-bulb.svg
diff --git a/shared/resources/images/icons/icon-multipart.svg b/shared/resources/images/icons/icon-multipart.svg
new file mode 100644
index 0000000000..7feac4c131
--- /dev/null
+++ b/shared/resources/images/icons/icon-multipart.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5F6163;}
+	.st1{fill:#F47641;}
+</style>
+<g>
+	<path class="st0" d="M11.8,22c5.4-0.4,9.8-4.7,10.2-10.2H11.8V22z"/>
+	<path class="st0" d="M10.2,0C4.7,0.4,0.4,4.7,0,10.2h10.2V0z"/>
+	<path class="st0" d="M0,11.8c0.4,5.4,4.7,9.8,10.2,10.2V11.8H0z"/>
+	<path class="st1" d="M11.8,10.2H22C21.6,4.7,17.3,0.4,11.8,0V10.2z"/>
+</g>
+</svg>
diff --git a/resources/images/icons/icon-personalized-interstitial.svg b/shared/resources/images/icons/icon-personalized-interstitial.svg
similarity index 100%
rename from resources/images/icons/icon-personalized-interstitial.svg
rename to shared/resources/images/icons/icon-personalized-interstitial.svg
diff --git a/resources/images/icons/icon-personalized.svg b/shared/resources/images/icons/icon-personalized.svg
similarity index 100%
rename from resources/images/icons/icon-personalized.svg
rename to shared/resources/images/icons/icon-personalized.svg
diff --git a/resources/images/icons/icon-reading.svg b/shared/resources/images/icons/icon-reading.svg
similarity index 100%
rename from resources/images/icons/icon-reading.svg
rename to shared/resources/images/icons/icon-reading.svg
diff --git a/resources/images/icons/icon-recover.svg b/shared/resources/images/icons/icon-recover.svg
similarity index 100%
rename from resources/images/icons/icon-recover.svg
rename to shared/resources/images/icons/icon-recover.svg
diff --git a/resources/images/icons/icon-review-interstitial.svg b/shared/resources/images/icons/icon-review-interstitial.svg
similarity index 100%
rename from resources/images/icons/icon-review-interstitial.svg
rename to shared/resources/images/icons/icon-review-interstitial.svg
diff --git a/resources/images/icons/icon-review.svg b/shared/resources/images/icons/icon-review.svg
similarity index 100%
rename from resources/images/icons/icon-review.svg
rename to shared/resources/images/icons/icon-review.svg
diff --git a/resources/images/icons/icon-test.svg b/shared/resources/images/icons/icon-test.svg
similarity index 100%
rename from resources/images/icons/icon-test.svg
rename to shared/resources/images/icons/icon-test.svg
diff --git a/shared/resources/images/icons/icon-video-placeholder.svg b/shared/resources/images/icons/icon-video-placeholder.svg
new file mode 100644
index 0000000000..7cb98943e4
--- /dev/null
+++ b/shared/resources/images/icons/icon-video-placeholder.svg
@@ -0,0 +1,13 @@
+<svg className="placeholder video"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.81,280A25.17,25.17,0,0,0,400,254.83V25.19A25.2,25.2,0,0,0,374.8,0H25.2A25.19,25.19,0,0,0,0,25.19V254.83A25.18,25.18,0,0,0,25.2,280H374.81Z"
+    transform="translate(0 0)"
+  />
+  <rect fill="#fff" x="15" y="17" width="370" height="246" rx="12" ry="12"/>
+  <path fill="#5E6062"
+    d="M262.37,133c6.68,3.86,6.68,10.17,0,14l-93.55,54c-6.68,3.86-12.15.7-12.15-7V86c0-7.72,5.47-10.87,12.15-7Z"
+    transform="translate(0 0)"
+  />
+</svg>
diff --git a/resources/images/icons/icon-video.svg b/shared/resources/images/icons/icon-video.svg
similarity index 100%
rename from resources/images/icons/icon-video.svg
rename to shared/resources/images/icons/icon-video.svg
diff --git a/resources/images/icons/icon-worked-example.svg b/shared/resources/images/icons/icon-worked-example.svg
similarity index 100%
rename from resources/images/icons/icon-worked-example.svg
rename to shared/resources/images/icons/icon-worked-example.svg
diff --git a/shared/resources/images/icons/incorrect-cl-icon.svg b/shared/resources/images/icons/incorrect-cl-icon.svg
new file mode 100644
index 0000000000..0b31f1a87a
--- /dev/null
+++ b/shared/resources/images/icons/incorrect-cl-icon.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-incorrect.svg"><metadata
+   id="metadata3124"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3122" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="640"
+   inkscape:window-height="480"
+   id="namedview3120"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3112">
+	<path
+   fill="#C3002F"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3114" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3116" />
+</g>
+<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.248,32.054l-1.559,1.559l1.528,1.527  c0.191,0.191,0.191,0.502,0,0.693l-0.417,0.414c-0.191,0.191-0.5,0.191-0.692,0l-1.526-1.526l-1.465,1.464  c-0.191,0.189-0.499,0.189-0.688,0l-0.413-0.412c-0.191-0.191-0.191-0.499,0-0.689l1.463-1.464l-1.526-1.528  c-0.191-0.19-0.191-0.501,0-0.691l0.415-0.416c0.191-0.191,0.502-0.191,0.693,0l1.527,1.527l1.56-1.559  c0.189-0.19,0.497-0.19,0.688,0l0.412,0.413C36.438,31.555,36.438,31.863,36.248,32.054z"
+   id="path3118" />
+</svg>
\ No newline at end of file
diff --git a/shared/resources/images/icons/incorrect-hs-icon.svg b/shared/resources/images/icons/incorrect-hs-icon.svg
new file mode 100644
index 0000000000..0b31f1a87a
--- /dev/null
+++ b/shared/resources/images/icons/incorrect-hs-icon.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-incorrect.svg"><metadata
+   id="metadata3124"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3122" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="640"
+   inkscape:window-height="480"
+   id="namedview3120"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3112">
+	<path
+   fill="#C3002F"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3114" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3116" />
+</g>
+<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.248,32.054l-1.559,1.559l1.528,1.527  c0.191,0.191,0.191,0.502,0,0.693l-0.417,0.414c-0.191,0.191-0.5,0.191-0.692,0l-1.526-1.526l-1.465,1.464  c-0.191,0.189-0.499,0.189-0.688,0l-0.413-0.412c-0.191-0.191-0.191-0.499,0-0.689l1.463-1.464l-1.526-1.528  c-0.191-0.19-0.191-0.501,0-0.691l0.415-0.416c0.191-0.191,0.502-0.191,0.693,0l1.527,1.527l1.56-1.559  c0.189-0.19,0.497-0.19,0.688,0l0.412,0.413C36.438,31.555,36.438,31.863,36.248,32.054z"
+   id="path3118" />
+</svg>
\ No newline at end of file
diff --git a/resources/images/icons/icon-interactive.svg b/shared/resources/images/icons/interactive-cl-icon.svg
similarity index 100%
rename from resources/images/icons/icon-interactive.svg
rename to shared/resources/images/icons/interactive-cl-icon.svg
diff --git a/shared/resources/images/icons/interactive-hs-icon.svg b/shared/resources/images/icons/interactive-hs-icon.svg
new file mode 100644
index 0000000000..9cf380219b
--- /dev/null
+++ b/shared/resources/images/icons/interactive-hs-icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#00C1DE" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#5F6263" d="M32.146,9.73H7.854c-0.967,0-1.751,0.784-1.751,1.751v15.965c0,0.967,0.784,1.75,1.751,1.75h11.146
+		c-0.008,1.451-0.124,2.96-1.146,3.982h-4.176c-0.204,0-0.368,0.164-0.368,0.367c0,0.204,0.164,0.369,0.368,0.369h12.701
+		c0.203,0,0.368-0.165,0.368-0.369c0-0.203-0.165-0.367-0.368-0.367h-4.298c-1.022-1.022-1.138-2.531-1.146-3.982h11.212
+		c0.967,0,1.75-0.783,1.75-1.75V11.481C33.896,10.514,33.113,9.73,32.146,9.73z"/>
+	<g>
+		<path fill="#D1D3D4" d="M32.451,11.188L7.517,27.711c0.186,0.165,0.43,0.267,0.698,0.267h23.569c0.58,0,1.051-0.471,1.051-1.051
+			V12C32.835,11.673,32.685,11.381,32.451,11.188z"/>
+		<path fill="#E6E7E8" d="M31.784,10.95H8.215c-0.58,0-1.05,0.47-1.05,1.05v14.927c0,0.312,0.136,0.592,0.352,0.784l24.935-16.522
+			C32.27,11.04,32.038,10.95,31.784,10.95z"/>
+	</g>
+</g>
+<g>
+	<polygon fill-rule="evenodd" fill="#232E66" points="28.887,16.512 25.152,13.355 25.152,15.606 13.103,15.606 13.103,17.419 
+		25.152,17.419 25.152,19.669 	"/>
+	<polygon fill-rule="evenodd" fill="#F47642" points="11.112,22.147 14.847,18.991 14.847,21.242 26.896,21.242 26.896,23.055 
+		14.847,23.055 14.847,25.306 	"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/interactive-placeholder-cl-icon.svg b/shared/resources/images/icons/interactive-placeholder-cl-icon.svg
new file mode 100644
index 0000000000..29d7405f2a
--- /dev/null
+++ b/shared/resources/images/icons/interactive-placeholder-cl-icon.svg
@@ -0,0 +1,19 @@
+<svg className="placeholder interactive"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.8,0H25.2C11.3,0,0,11.3,0,25.2v229.7c0,13.9,11.3,25.2,25.2,25.2c0,0,0,0,0,0h160.4
+      c-0.1,20.9-1.8,42.6-16.5,57.3H109c-2.9-0.1-5.4,2.1-5.5,5.1s2.1,5.4,5.1,5.5c0.2,0,0.3,0,0.5,0h182.8c2.9,0.1,5.4-2.1,5.5-5.1
+      s-2.1-5.4-5.1-5.5c-0.2,0-0.3,0-0.5,0h-61.9c-14.7-14.7-16.4-36.4-16.5-57.3h161.4c13.9,0,25.2-11.3,25.2-25.2c0,0,0,0,0,0V25.2
+      C400,11.3,388.7,0,374.8,0z"
+  />
+  <path fill="#FFFFFF"
+    d="M27,17.1h346c6.6,0,12,5.4,12,12v222c0,6.6-5.4,12-12,12H27c-6.6,0-12-5.4-12-12v-222
+      C15,22.5,20.4,17.1,27,17.1z"
+  />
+  <path fill="#5E6062"
+    d="M222.1,60.5L128,82.1v95.8l48.3,39.9l95.8-25V96.9L222.1,60.5z M224.8,150.4v-33l-6.4,1.7v30.4l-34.3,9v6.6
+      l36.8-9.6l41.1,33.5l-81.8,21.3V125l85.4-22.2v80.8L224.8,150.4z M134.4,171.4v-80l39.5,32.9v83.3l-36.7-30.3l32.9-8.6v-6.6
+      L134.4,171.4z M224.9,102.9V70.4l36.7,26.8l-84,21.9l-39.4-32.8l80.3-18.5v36.8L224.9,102.9z"
+  />
+</svg>
diff --git a/shared/resources/images/icons/interactive-placeholder-hs-icon.svg b/shared/resources/images/icons/interactive-placeholder-hs-icon.svg
new file mode 100644
index 0000000000..29d7405f2a
--- /dev/null
+++ b/shared/resources/images/icons/interactive-placeholder-hs-icon.svg
@@ -0,0 +1,19 @@
+<svg className="placeholder interactive"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.8,0H25.2C11.3,0,0,11.3,0,25.2v229.7c0,13.9,11.3,25.2,25.2,25.2c0,0,0,0,0,0h160.4
+      c-0.1,20.9-1.8,42.6-16.5,57.3H109c-2.9-0.1-5.4,2.1-5.5,5.1s2.1,5.4,5.1,5.5c0.2,0,0.3,0,0.5,0h182.8c2.9,0.1,5.4-2.1,5.5-5.1
+      s-2.1-5.4-5.1-5.5c-0.2,0-0.3,0-0.5,0h-61.9c-14.7-14.7-16.4-36.4-16.5-57.3h161.4c13.9,0,25.2-11.3,25.2-25.2c0,0,0,0,0,0V25.2
+      C400,11.3,388.7,0,374.8,0z"
+  />
+  <path fill="#FFFFFF"
+    d="M27,17.1h346c6.6,0,12,5.4,12,12v222c0,6.6-5.4,12-12,12H27c-6.6,0-12-5.4-12-12v-222
+      C15,22.5,20.4,17.1,27,17.1z"
+  />
+  <path fill="#5E6062"
+    d="M222.1,60.5L128,82.1v95.8l48.3,39.9l95.8-25V96.9L222.1,60.5z M224.8,150.4v-33l-6.4,1.7v30.4l-34.3,9v6.6
+      l36.8-9.6l41.1,33.5l-81.8,21.3V125l85.4-22.2v80.8L224.8,150.4z M134.4,171.4v-80l39.5,32.9v83.3l-36.7-30.3l32.9-8.6v-6.6
+      L134.4,171.4z M224.9,102.9V70.4l36.7,26.8l-84,21.9l-39.4-32.8l80.3-18.5v36.8L224.9,102.9z"
+  />
+</svg>
diff --git a/shared/resources/images/icons/laptop-cl-icon.svg b/shared/resources/images/icons/laptop-cl-icon.svg
new file mode 100644
index 0000000000..4d82b7698f
--- /dev/null
+++ b/shared/resources/images/icons/laptop-cl-icon.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="30px" viewBox="0 0 50 30" enable-background="new 0 0 50 30" xml:space="preserve">
+<g>
+	<path fill="#E6E7E8" d="M42.02,25.02c0.435,0,0.787-0.352,0.787-0.787h-0.002V2.707c0-0.191-0.068-0.366-0.181-0.502
+		c-0.144-0.174-0.36-0.284-0.604-0.284h-0.4L7.799,24.99c0.055,0.013,0.11,0.029,0.169,0.029H42.02L42.02,25.02z"/>
+	<path fill="#A7A9AC" d="M48.9,26.523H28.879c0,0.472-0.383,0.854-0.854,0.854h-6.062c-0.472,0-0.854-0.383-0.854-0.854H1.108
+		c-0.607,0-1.1,0.492-1.1,1.1v1.26c0,0.607,0.493,1.1,1.1,1.1H48.9c0.606,0,1.1-0.49,1.1-1.1v-1.26
+		C50,27.016,49.508,26.523,48.9,26.523z"/>
+	<path fill="#FFFFFF" d="M32.359,12.726c-0.278-0.205-0.584-0.403-0.901-0.599c0.187-0.316,0.362-0.631,0.511-0.938
+		c0.922-1.899,0.98-3.409,0.166-4.25c-0.404-0.417-0.972-0.63-1.688-0.63c-0.987,0-2.241,0.425-3.598,1.178
+		c-1.188-2.004-2.544-3.215-3.79-3.215c-0.175,0-0.347,0.024-0.513,0.07c-1.127,0.315-1.838,1.648-2.001,3.752
+		c-0.022,0.286-0.031,0.584-0.033,0.89c-0.017,0-0.036-0.002-0.053-0.002c-2.599,0-4.236,0.706-4.609,1.986
+		c-0.389,1.331,0.805,2.902,3.017,4.275c-0.218,0.372-0.418,0.739-0.582,1.096c-0.848,1.835-0.884,3.29-0.102,4.099
+		c0.404,0.418,0.972,0.629,1.687,0.629c0.99,0,2.247-0.426,3.605-1.181c1.188,2.005,2.545,3.218,3.792,3.218
+		c0.176,0,0.348-0.021,0.512-0.067c1.129-0.315,1.84-1.647,2.003-3.753c0.022-0.285,0.03-0.585,0.032-0.893
+		c0.021,0,0.043,0.004,0.062,0.004c2.599,0,4.233-0.707,4.608-1.985C34.814,15.284,34.059,13.977,32.359,12.726z M28.516,19.186
+		c-0.115,1.465-0.524,2.472-1.076,2.625c-0.055,0.016-0.109,0.021-0.17,0.021c-0.627,0-1.668-0.848-2.707-2.604
+		c0.554-0.363,1.117-0.774,1.68-1.229c0.79,0.156,1.565,0.276,2.303,0.338C28.543,18.628,28.536,18.914,28.516,19.186z
+		 M17.074,11.325c0.19-0.65,1.52-1.07,3.388-1.07c0.03,0,0.064,0.004,0.095,0.004c0.052,0.723,0.151,1.48,0.293,2.257
+		c-0.476,0.553-0.912,1.11-1.297,1.662C17.76,13.075,16.887,11.965,17.074,11.325z M21.816,8.193
+		c0.113-1.466,0.526-2.471,1.076-2.626c0.053-0.015,0.111-0.023,0.169-0.023c0.626,0,1.667,0.847,2.705,2.6
+		c-0.556,0.365-1.12,0.777-1.684,1.232c-0.788-0.155-1.561-0.275-2.297-0.336C21.788,8.749,21.795,8.464,21.816,8.193z
+		 M27.021,15.611c-0.375,0.361-0.752,0.699-1.133,1.022c-0.489-0.108-0.979-0.233-1.47-0.378c-0.49-0.143-0.951-0.297-1.395-0.456
+		c-0.151-0.441-0.298-0.899-0.436-1.391c-0.143-0.513-0.266-1.021-0.372-1.524c0.336-0.369,0.692-0.742,1.083-1.12
+		c0.374-0.362,0.755-0.701,1.136-1.026c0.493,0.11,0.989,0.236,1.483,0.38c0.477,0.139,0.938,0.292,1.389,0.454
+		c0.149,0.441,0.297,0.901,0.436,1.394c0.143,0.51,0.264,1.015,0.369,1.514C27.768,14.862,27.404,15.24,27.021,15.611z
+		 M28.967,12.625c-0.042-0.149-0.087-0.292-0.131-0.438c0.281,0.125,0.555,0.255,0.818,0.388c-0.164,0.23-0.338,0.462-0.521,0.695
+		C29.081,13.055,29.027,12.84,28.967,12.625z M26.275,9.899C26.08,9.842,25.889,9.8,25.693,9.748
+		c0.226-0.166,0.451-0.331,0.674-0.479c0.117,0.243,0.234,0.499,0.349,0.768C26.57,9.991,26.425,9.943,26.275,9.899z M22.416,10.852
+		c-0.161,0.156-0.315,0.313-0.47,0.472c-0.046-0.339-0.085-0.674-0.112-0.999c0.329,0.031,0.667,0.074,1.009,0.125
+		C22.7,10.582,22.557,10.715,22.416,10.852z M21.364,14.752c0.042,0.149,0.087,0.292,0.131,0.438
+		c-0.29-0.128-0.567-0.26-0.829-0.393c0.164-0.23,0.339-0.465,0.526-0.703C21.248,14.313,21.302,14.533,21.364,14.752z
+		 M24.063,17.479c0.191,0.057,0.378,0.098,0.569,0.146c-0.226,0.166-0.45,0.33-0.671,0.479c-0.118-0.244-0.234-0.5-0.349-0.767
+		C23.763,17.384,23.909,17.434,24.063,17.479z M27.906,16.525c0.164-0.158,0.32-0.319,0.478-0.48
+		c0.046,0.341,0.087,0.68,0.113,1.006c-0.331-0.031-0.671-0.074-1.017-0.125C27.622,16.794,27.766,16.662,27.906,16.525z
+		 M28.303,10.589c-0.263-0.708-0.546-1.374-0.848-1.985c1.154-0.644,2.205-1.022,2.992-1.022c0.357,0,0.617,0.082,0.773,0.242
+		c0.396,0.411,0.245,1.488-0.396,2.81c-0.137,0.283-0.299,0.574-0.473,0.868C29.716,11.174,29.027,10.87,28.303,10.589z
+		 M22.027,16.788c0.263,0.708,0.545,1.371,0.846,1.979c-1.157,0.646-2.21,1.026-3,1.026c-0.358,0-0.618-0.082-0.773-0.243
+		c-0.465-0.479-0.208-1.871,0.869-3.688C20.6,16.191,21.287,16.502,22.027,16.788z M29.479,14.853
+		c0.474-0.55,0.908-1.105,1.293-1.654c0.293,0.18,0.576,0.363,0.832,0.552c1.187,0.871,1.821,1.753,1.662,2.301
+		c-0.189,0.651-1.521,1.071-3.389,1.071c-0.033,0-0.07-0.004-0.104-0.004C29.723,16.393,29.622,15.632,29.479,14.853z"/>
+	<path fill="#FFFFFF" d="M41.618,1.906H7.967c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.472,0.299,0.617
+		c0.134,0.105,0.303,0.17,0.487,0.17c-0.059,0-0.114-0.017-0.169-0.029L41.618,1.906z"/>
+	<path fill="#F47642" d="M32.166,12.906c-0.348-0.254-0.729-0.502-1.139-0.743c0.25-0.403,0.474-0.801,0.662-1.188
+		c0.856-1.771,0.937-3.152,0.222-3.891c-0.343-0.353-0.833-0.533-1.458-0.533c-1.008,0-2.312,0.469-3.723,1.292
+		c-1.16-2.056-2.495-3.329-3.667-3.329c-0.146,0-0.29,0.02-0.427,0.058c-0.989,0.277-1.618,1.51-1.77,3.471
+		c-0.029,0.379-0.036,0.782-0.03,1.198c-0.124-0.003-0.256-0.017-0.378-0.017c-2.444,0-3.973,0.625-4.304,1.757
+		c-0.359,1.231,0.905,2.753,3.152,4.08c-1.37,2.222-1.779,4.158-0.887,5.08c0.342,0.354,0.833,0.532,1.459,0.532
+		c1.007,0,2.312-0.47,3.723-1.293c1.161,2.058,2.493,3.33,3.668,3.33c0.146,0,0.289-0.019,0.426-0.058
+		c0.99-0.276,1.619-1.51,1.77-3.471c0.029-0.381,0.037-0.783,0.03-1.197C29.62,17.986,29.751,18,29.873,18
+		c2.445,0,3.975-0.624,4.304-1.757C34.465,15.256,33.751,14.071,32.166,12.906z M30.453,7.187c0.447,0,0.783,0.114,1.002,0.339
+		c0.507,0.525,0.384,1.68-0.338,3.17c-0.184,0.376-0.4,0.764-0.645,1.157c-0.738-0.396-1.551-0.765-2.418-1.095
+		c-0.312-0.853-0.656-1.64-1.022-2.352C28.348,7.635,29.555,7.187,30.453,7.187z M27.248,15.764
+		c-0.417,0.404-0.844,0.778-1.271,1.137c-0.545-0.117-1.099-0.252-1.648-0.414c-0.544-0.158-1.059-0.331-1.553-0.512
+		c-0.173-0.495-0.338-1.011-0.491-1.556c-0.16-0.571-0.297-1.14-0.411-1.699c0.374-0.416,0.775-0.837,1.212-1.259
+		c0.417-0.404,0.843-0.778,1.27-1.136c0.548,0.118,1.1,0.253,1.651,0.414c0.533,0.155,1.051,0.327,1.553,0.511
+		c0.174,0.494,0.34,1.01,0.491,1.555c0.16,0.572,0.298,1.14,0.411,1.699C28.079,14.93,27.674,15.351,27.248,15.764z M28.604,15.284
+		c0.117,0.704,0.193,1.384,0.231,2.034c-0.655-0.047-1.344-0.137-2.053-0.264c0.305-0.27,0.608-0.546,0.907-0.836
+		C28.007,15.913,28.309,15.6,28.604,15.284z M25.354,17.409c-0.512,0.399-1.018,0.753-1.517,1.071
+		c-0.268-0.526-0.528-1.104-0.774-1.73c0.354,0.121,0.714,0.236,1.086,0.346C24.553,17.215,24.954,17.312,25.354,17.409z
+		 M21.67,14.59c0.104,0.373,0.216,0.732,0.333,1.088c-0.657-0.267-1.263-0.547-1.808-0.836c0.334-0.492,0.722-1.002,1.158-1.522
+		C21.448,13.74,21.551,14.164,21.67,14.59z M21.728,11.941c-0.118-0.705-0.193-1.384-0.231-2.034
+		c0.655,0.046,1.343,0.136,2.052,0.263c-0.304,0.267-0.608,0.544-0.908,0.834C22.321,11.314,22.02,11.627,21.728,11.941z
+		 M24.978,9.816c0.511-0.399,1.018-0.752,1.517-1.072c0.269,0.526,0.528,1.104,0.774,1.731c-0.355-0.122-0.718-0.239-1.086-0.347
+		C25.777,10.01,25.377,9.912,24.978,9.816z M28.661,12.635c-0.104-0.372-0.216-0.731-0.333-1.085
+		c0.638,0.26,1.236,0.541,1.794,0.837c-0.341,0.502-0.724,1.01-1.146,1.518C28.883,13.484,28.779,13.061,28.661,12.635z M21.5,8.092
+		c0.127-1.651,0.604-2.711,1.307-2.908c0.082-0.023,0.168-0.034,0.255-0.034c0.858,0,2.035,1.082,3.127,3.022
+		c-0.662,0.42-1.339,0.912-2.02,1.467c-0.935-0.19-1.841-0.316-2.7-0.372C21.464,8.86,21.471,8.464,21.5,8.092z M16.765,11.16
+		c0.237-0.814,1.618-1.299,3.693-1.299c0.128,0,0.269,0.014,0.4,0.018c0.046,0.841,0.158,1.734,0.333,2.657
+		c-0.587,0.675-1.106,1.347-1.545,2.001C17.576,13.328,16.51,12.031,16.765,11.16z M19.878,20.038c-0.447,0-0.784-0.114-1.002-0.339
+		c-0.631-0.652-0.294-2.297,0.975-4.331c0.729,0.394,1.542,0.765,2.426,1.101c0.312,0.852,0.656,1.639,1.022,2.35
+		C21.983,19.591,20.776,20.038,19.878,20.038z M28.832,19.133c-0.128,1.651-0.604,2.71-1.309,2.908
+		c-0.082,0.021-0.168,0.034-0.254,0.034c-0.858,0-2.037-1.083-3.127-3.022c0.662-0.421,1.339-0.912,2.017-1.467
+		c0.937,0.189,1.841,0.316,2.7,0.372C28.867,18.365,28.861,18.761,28.832,19.133z M33.566,16.064
+		c-0.237,0.813-1.619,1.301-3.693,1.301c-0.127,0-0.27-0.014-0.4-0.018c-0.046-0.843-0.158-1.736-0.332-2.66
+		c0.577-0.664,1.096-1.333,1.541-1.993c0.398,0.234,0.771,0.475,1.108,0.723C33.124,14.399,33.771,15.364,33.566,16.064z"/>
+	<path fill="#808080" d="M42.891-0.018H7.097c-0.868,0-1.572,0.704-1.572,1.572v24.987h15.584c0,0.473,0.382,0.854,0.854,0.854
+		h6.061c0.474,0,0.854-0.383,0.854-0.854h15.583V1.554C44.462,0.686,43.758-0.018,42.891-0.018z M42.807,24.232
+		c0,0.436-0.354,0.787-0.787,0.787H7.968c-0.184,0-0.353-0.064-0.487-0.17c-0.182-0.146-0.299-0.367-0.299-0.617V2.707
+		c0-0.435,0.352-0.786,0.786-0.786H42.02c0.244,0,0.461,0.11,0.604,0.284c0.112,0.136,0.181,0.311,0.181,0.502v21.525H42.807z"/>
+	<path fill="none" d="M7.968,1.921c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.473,0.299,0.617
+		c0.091,0.07,0.201,0.113,0.318,0.141L41.618,1.921H7.968z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/laptop-hs-icon.svg b/shared/resources/images/icons/laptop-hs-icon.svg
new file mode 100644
index 0000000000..4d82b7698f
--- /dev/null
+++ b/shared/resources/images/icons/laptop-hs-icon.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="30px" viewBox="0 0 50 30" enable-background="new 0 0 50 30" xml:space="preserve">
+<g>
+	<path fill="#E6E7E8" d="M42.02,25.02c0.435,0,0.787-0.352,0.787-0.787h-0.002V2.707c0-0.191-0.068-0.366-0.181-0.502
+		c-0.144-0.174-0.36-0.284-0.604-0.284h-0.4L7.799,24.99c0.055,0.013,0.11,0.029,0.169,0.029H42.02L42.02,25.02z"/>
+	<path fill="#A7A9AC" d="M48.9,26.523H28.879c0,0.472-0.383,0.854-0.854,0.854h-6.062c-0.472,0-0.854-0.383-0.854-0.854H1.108
+		c-0.607,0-1.1,0.492-1.1,1.1v1.26c0,0.607,0.493,1.1,1.1,1.1H48.9c0.606,0,1.1-0.49,1.1-1.1v-1.26
+		C50,27.016,49.508,26.523,48.9,26.523z"/>
+	<path fill="#FFFFFF" d="M32.359,12.726c-0.278-0.205-0.584-0.403-0.901-0.599c0.187-0.316,0.362-0.631,0.511-0.938
+		c0.922-1.899,0.98-3.409,0.166-4.25c-0.404-0.417-0.972-0.63-1.688-0.63c-0.987,0-2.241,0.425-3.598,1.178
+		c-1.188-2.004-2.544-3.215-3.79-3.215c-0.175,0-0.347,0.024-0.513,0.07c-1.127,0.315-1.838,1.648-2.001,3.752
+		c-0.022,0.286-0.031,0.584-0.033,0.89c-0.017,0-0.036-0.002-0.053-0.002c-2.599,0-4.236,0.706-4.609,1.986
+		c-0.389,1.331,0.805,2.902,3.017,4.275c-0.218,0.372-0.418,0.739-0.582,1.096c-0.848,1.835-0.884,3.29-0.102,4.099
+		c0.404,0.418,0.972,0.629,1.687,0.629c0.99,0,2.247-0.426,3.605-1.181c1.188,2.005,2.545,3.218,3.792,3.218
+		c0.176,0,0.348-0.021,0.512-0.067c1.129-0.315,1.84-1.647,2.003-3.753c0.022-0.285,0.03-0.585,0.032-0.893
+		c0.021,0,0.043,0.004,0.062,0.004c2.599,0,4.233-0.707,4.608-1.985C34.814,15.284,34.059,13.977,32.359,12.726z M28.516,19.186
+		c-0.115,1.465-0.524,2.472-1.076,2.625c-0.055,0.016-0.109,0.021-0.17,0.021c-0.627,0-1.668-0.848-2.707-2.604
+		c0.554-0.363,1.117-0.774,1.68-1.229c0.79,0.156,1.565,0.276,2.303,0.338C28.543,18.628,28.536,18.914,28.516,19.186z
+		 M17.074,11.325c0.19-0.65,1.52-1.07,3.388-1.07c0.03,0,0.064,0.004,0.095,0.004c0.052,0.723,0.151,1.48,0.293,2.257
+		c-0.476,0.553-0.912,1.11-1.297,1.662C17.76,13.075,16.887,11.965,17.074,11.325z M21.816,8.193
+		c0.113-1.466,0.526-2.471,1.076-2.626c0.053-0.015,0.111-0.023,0.169-0.023c0.626,0,1.667,0.847,2.705,2.6
+		c-0.556,0.365-1.12,0.777-1.684,1.232c-0.788-0.155-1.561-0.275-2.297-0.336C21.788,8.749,21.795,8.464,21.816,8.193z
+		 M27.021,15.611c-0.375,0.361-0.752,0.699-1.133,1.022c-0.489-0.108-0.979-0.233-1.47-0.378c-0.49-0.143-0.951-0.297-1.395-0.456
+		c-0.151-0.441-0.298-0.899-0.436-1.391c-0.143-0.513-0.266-1.021-0.372-1.524c0.336-0.369,0.692-0.742,1.083-1.12
+		c0.374-0.362,0.755-0.701,1.136-1.026c0.493,0.11,0.989,0.236,1.483,0.38c0.477,0.139,0.938,0.292,1.389,0.454
+		c0.149,0.441,0.297,0.901,0.436,1.394c0.143,0.51,0.264,1.015,0.369,1.514C27.768,14.862,27.404,15.24,27.021,15.611z
+		 M28.967,12.625c-0.042-0.149-0.087-0.292-0.131-0.438c0.281,0.125,0.555,0.255,0.818,0.388c-0.164,0.23-0.338,0.462-0.521,0.695
+		C29.081,13.055,29.027,12.84,28.967,12.625z M26.275,9.899C26.08,9.842,25.889,9.8,25.693,9.748
+		c0.226-0.166,0.451-0.331,0.674-0.479c0.117,0.243,0.234,0.499,0.349,0.768C26.57,9.991,26.425,9.943,26.275,9.899z M22.416,10.852
+		c-0.161,0.156-0.315,0.313-0.47,0.472c-0.046-0.339-0.085-0.674-0.112-0.999c0.329,0.031,0.667,0.074,1.009,0.125
+		C22.7,10.582,22.557,10.715,22.416,10.852z M21.364,14.752c0.042,0.149,0.087,0.292,0.131,0.438
+		c-0.29-0.128-0.567-0.26-0.829-0.393c0.164-0.23,0.339-0.465,0.526-0.703C21.248,14.313,21.302,14.533,21.364,14.752z
+		 M24.063,17.479c0.191,0.057,0.378,0.098,0.569,0.146c-0.226,0.166-0.45,0.33-0.671,0.479c-0.118-0.244-0.234-0.5-0.349-0.767
+		C23.763,17.384,23.909,17.434,24.063,17.479z M27.906,16.525c0.164-0.158,0.32-0.319,0.478-0.48
+		c0.046,0.341,0.087,0.68,0.113,1.006c-0.331-0.031-0.671-0.074-1.017-0.125C27.622,16.794,27.766,16.662,27.906,16.525z
+		 M28.303,10.589c-0.263-0.708-0.546-1.374-0.848-1.985c1.154-0.644,2.205-1.022,2.992-1.022c0.357,0,0.617,0.082,0.773,0.242
+		c0.396,0.411,0.245,1.488-0.396,2.81c-0.137,0.283-0.299,0.574-0.473,0.868C29.716,11.174,29.027,10.87,28.303,10.589z
+		 M22.027,16.788c0.263,0.708,0.545,1.371,0.846,1.979c-1.157,0.646-2.21,1.026-3,1.026c-0.358,0-0.618-0.082-0.773-0.243
+		c-0.465-0.479-0.208-1.871,0.869-3.688C20.6,16.191,21.287,16.502,22.027,16.788z M29.479,14.853
+		c0.474-0.55,0.908-1.105,1.293-1.654c0.293,0.18,0.576,0.363,0.832,0.552c1.187,0.871,1.821,1.753,1.662,2.301
+		c-0.189,0.651-1.521,1.071-3.389,1.071c-0.033,0-0.07-0.004-0.104-0.004C29.723,16.393,29.622,15.632,29.479,14.853z"/>
+	<path fill="#FFFFFF" d="M41.618,1.906H7.967c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.472,0.299,0.617
+		c0.134,0.105,0.303,0.17,0.487,0.17c-0.059,0-0.114-0.017-0.169-0.029L41.618,1.906z"/>
+	<path fill="#F47642" d="M32.166,12.906c-0.348-0.254-0.729-0.502-1.139-0.743c0.25-0.403,0.474-0.801,0.662-1.188
+		c0.856-1.771,0.937-3.152,0.222-3.891c-0.343-0.353-0.833-0.533-1.458-0.533c-1.008,0-2.312,0.469-3.723,1.292
+		c-1.16-2.056-2.495-3.329-3.667-3.329c-0.146,0-0.29,0.02-0.427,0.058c-0.989,0.277-1.618,1.51-1.77,3.471
+		c-0.029,0.379-0.036,0.782-0.03,1.198c-0.124-0.003-0.256-0.017-0.378-0.017c-2.444,0-3.973,0.625-4.304,1.757
+		c-0.359,1.231,0.905,2.753,3.152,4.08c-1.37,2.222-1.779,4.158-0.887,5.08c0.342,0.354,0.833,0.532,1.459,0.532
+		c1.007,0,2.312-0.47,3.723-1.293c1.161,2.058,2.493,3.33,3.668,3.33c0.146,0,0.289-0.019,0.426-0.058
+		c0.99-0.276,1.619-1.51,1.77-3.471c0.029-0.381,0.037-0.783,0.03-1.197C29.62,17.986,29.751,18,29.873,18
+		c2.445,0,3.975-0.624,4.304-1.757C34.465,15.256,33.751,14.071,32.166,12.906z M30.453,7.187c0.447,0,0.783,0.114,1.002,0.339
+		c0.507,0.525,0.384,1.68-0.338,3.17c-0.184,0.376-0.4,0.764-0.645,1.157c-0.738-0.396-1.551-0.765-2.418-1.095
+		c-0.312-0.853-0.656-1.64-1.022-2.352C28.348,7.635,29.555,7.187,30.453,7.187z M27.248,15.764
+		c-0.417,0.404-0.844,0.778-1.271,1.137c-0.545-0.117-1.099-0.252-1.648-0.414c-0.544-0.158-1.059-0.331-1.553-0.512
+		c-0.173-0.495-0.338-1.011-0.491-1.556c-0.16-0.571-0.297-1.14-0.411-1.699c0.374-0.416,0.775-0.837,1.212-1.259
+		c0.417-0.404,0.843-0.778,1.27-1.136c0.548,0.118,1.1,0.253,1.651,0.414c0.533,0.155,1.051,0.327,1.553,0.511
+		c0.174,0.494,0.34,1.01,0.491,1.555c0.16,0.572,0.298,1.14,0.411,1.699C28.079,14.93,27.674,15.351,27.248,15.764z M28.604,15.284
+		c0.117,0.704,0.193,1.384,0.231,2.034c-0.655-0.047-1.344-0.137-2.053-0.264c0.305-0.27,0.608-0.546,0.907-0.836
+		C28.007,15.913,28.309,15.6,28.604,15.284z M25.354,17.409c-0.512,0.399-1.018,0.753-1.517,1.071
+		c-0.268-0.526-0.528-1.104-0.774-1.73c0.354,0.121,0.714,0.236,1.086,0.346C24.553,17.215,24.954,17.312,25.354,17.409z
+		 M21.67,14.59c0.104,0.373,0.216,0.732,0.333,1.088c-0.657-0.267-1.263-0.547-1.808-0.836c0.334-0.492,0.722-1.002,1.158-1.522
+		C21.448,13.74,21.551,14.164,21.67,14.59z M21.728,11.941c-0.118-0.705-0.193-1.384-0.231-2.034
+		c0.655,0.046,1.343,0.136,2.052,0.263c-0.304,0.267-0.608,0.544-0.908,0.834C22.321,11.314,22.02,11.627,21.728,11.941z
+		 M24.978,9.816c0.511-0.399,1.018-0.752,1.517-1.072c0.269,0.526,0.528,1.104,0.774,1.731c-0.355-0.122-0.718-0.239-1.086-0.347
+		C25.777,10.01,25.377,9.912,24.978,9.816z M28.661,12.635c-0.104-0.372-0.216-0.731-0.333-1.085
+		c0.638,0.26,1.236,0.541,1.794,0.837c-0.341,0.502-0.724,1.01-1.146,1.518C28.883,13.484,28.779,13.061,28.661,12.635z M21.5,8.092
+		c0.127-1.651,0.604-2.711,1.307-2.908c0.082-0.023,0.168-0.034,0.255-0.034c0.858,0,2.035,1.082,3.127,3.022
+		c-0.662,0.42-1.339,0.912-2.02,1.467c-0.935-0.19-1.841-0.316-2.7-0.372C21.464,8.86,21.471,8.464,21.5,8.092z M16.765,11.16
+		c0.237-0.814,1.618-1.299,3.693-1.299c0.128,0,0.269,0.014,0.4,0.018c0.046,0.841,0.158,1.734,0.333,2.657
+		c-0.587,0.675-1.106,1.347-1.545,2.001C17.576,13.328,16.51,12.031,16.765,11.16z M19.878,20.038c-0.447,0-0.784-0.114-1.002-0.339
+		c-0.631-0.652-0.294-2.297,0.975-4.331c0.729,0.394,1.542,0.765,2.426,1.101c0.312,0.852,0.656,1.639,1.022,2.35
+		C21.983,19.591,20.776,20.038,19.878,20.038z M28.832,19.133c-0.128,1.651-0.604,2.71-1.309,2.908
+		c-0.082,0.021-0.168,0.034-0.254,0.034c-0.858,0-2.037-1.083-3.127-3.022c0.662-0.421,1.339-0.912,2.017-1.467
+		c0.937,0.189,1.841,0.316,2.7,0.372C28.867,18.365,28.861,18.761,28.832,19.133z M33.566,16.064
+		c-0.237,0.813-1.619,1.301-3.693,1.301c-0.127,0-0.27-0.014-0.4-0.018c-0.046-0.843-0.158-1.736-0.332-2.66
+		c0.577-0.664,1.096-1.333,1.541-1.993c0.398,0.234,0.771,0.475,1.108,0.723C33.124,14.399,33.771,15.364,33.566,16.064z"/>
+	<path fill="#808080" d="M42.891-0.018H7.097c-0.868,0-1.572,0.704-1.572,1.572v24.987h15.584c0,0.473,0.382,0.854,0.854,0.854
+		h6.061c0.474,0,0.854-0.383,0.854-0.854h15.583V1.554C44.462,0.686,43.758-0.018,42.891-0.018z M42.807,24.232
+		c0,0.436-0.354,0.787-0.787,0.787H7.968c-0.184,0-0.353-0.064-0.487-0.17c-0.182-0.146-0.299-0.367-0.299-0.617V2.707
+		c0-0.435,0.352-0.786,0.786-0.786H42.02c0.244,0,0.461,0.11,0.604,0.284c0.112,0.136,0.181,0.311,0.181,0.502v21.525H42.807z"/>
+	<path fill="none" d="M7.968,1.921c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.473,0.299,0.617
+		c0.091,0.07,0.201,0.113,0.318,0.141L41.618,1.921H7.968z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/light-bulb-cl-icon.svg b/shared/resources/images/icons/light-bulb-cl-icon.svg
new file mode 100644
index 0000000000..fe4b79b23a
--- /dev/null
+++ b/shared/resources/images/icons/light-bulb-cl-icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="25px" height="30px" viewBox="0 0 25 30" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M12.5,4.38c-4.634,0-8.386,3.038-8.386,7.644c0,4.607,2.409,5.835,3.344,8.054
+		c0.935,2.218,1.546,4.002,1.546,4.002H12.5h3.495c0,0,0.612-1.784,1.547-4.002s3.344-3.447,3.344-8.054
+		C20.886,7.418,17.135,4.38,12.5,4.38z"/>
+	<rect x="9.048" y="24.714" fill="#D1D3D4" width="6.905" height="1.535"/>
+	<polygon fill="#D1D3D4" points="15.376,28.082 9.624,28.082 9.048,26.548 15.953,26.548 	"/>
+	<polygon fill="#5F6062" points="14.023,30 10.978,30 10.53,28.466 14.47,28.466 	"/>
+	<rect y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="2.799" y="3.744" transform="matrix(0.7072 0.707 -0.707 0.7072 4.323 -1.5739)" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="19.504" y="3.451" transform="matrix(-0.707 0.7072 -0.7072 -0.707 38.3747 -7.6191)" fill="#FFFFFF" width="2.524" height="1.377"/>
+	<rect x="22.475" y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	<rect x="11.812" fill="#FFFFFF" width="1.377" height="2.525"/>
+	<path fill="#E6E7E8" d="M11.229,23.305L9.311,13.14l0.578,0.363c0.372,0.234,1.459,0.84,2.017,0.84s1.305-0.401,1.545-0.556
+		l0.323,0.502c-0.041,0.027-1.022,0.65-1.868,0.65c-0.523,0-1.255-0.333-1.762-0.602l1.671,8.857L11.229,23.305z"/>
+	
+		<rect x="13.776" y="13.689" transform="matrix(0.9861 0.1661 -0.1661 0.9861 3.2693 -2.0809)" fill="#E6E7E8" width="0.597" height="9.627"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/light-bulb-hs-icon.svg b/shared/resources/images/icons/light-bulb-hs-icon.svg
new file mode 100644
index 0000000000..fe4b79b23a
--- /dev/null
+++ b/shared/resources/images/icons/light-bulb-hs-icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="25px" height="30px" viewBox="0 0 25 30" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M12.5,4.38c-4.634,0-8.386,3.038-8.386,7.644c0,4.607,2.409,5.835,3.344,8.054
+		c0.935,2.218,1.546,4.002,1.546,4.002H12.5h3.495c0,0,0.612-1.784,1.547-4.002s3.344-3.447,3.344-8.054
+		C20.886,7.418,17.135,4.38,12.5,4.38z"/>
+	<rect x="9.048" y="24.714" fill="#D1D3D4" width="6.905" height="1.535"/>
+	<polygon fill="#D1D3D4" points="15.376,28.082 9.624,28.082 9.048,26.548 15.953,26.548 	"/>
+	<polygon fill="#5F6062" points="14.023,30 10.978,30 10.53,28.466 14.47,28.466 	"/>
+	<rect y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="2.799" y="3.744" transform="matrix(0.7072 0.707 -0.707 0.7072 4.323 -1.5739)" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="19.504" y="3.451" transform="matrix(-0.707 0.7072 -0.7072 -0.707 38.3747 -7.6191)" fill="#FFFFFF" width="2.524" height="1.377"/>
+	<rect x="22.475" y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	<rect x="11.812" fill="#FFFFFF" width="1.377" height="2.525"/>
+	<path fill="#E6E7E8" d="M11.229,23.305L9.311,13.14l0.578,0.363c0.372,0.234,1.459,0.84,2.017,0.84s1.305-0.401,1.545-0.556
+		l0.323,0.502c-0.041,0.027-1.022,0.65-1.868,0.65c-0.523,0-1.255-0.333-1.762-0.602l1.671,8.857L11.229,23.305z"/>
+	
+		<rect x="13.776" y="13.689" transform="matrix(0.9861 0.1661 -0.1661 0.9861 3.2693 -2.0809)" fill="#E6E7E8" width="0.597" height="9.627"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/personalized-cl-icon.svg b/shared/resources/images/icons/personalized-cl-icon.svg
new file mode 100644
index 0000000000..a6f727a0c3
--- /dev/null
+++ b/shared/resources/images/icons/personalized-cl-icon.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="47.362px" height="25px" viewBox="0 0 47.362 25" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M10.405,15.623c-0.62,0-1.226,0-1.833,0c-0.353,0-0.353,0-0.353,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.002,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.744,0-1.464,0-2.217,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.001-7.508c0-0.844,0.493-1.353,1.329-1.354c2.596-0.004,5.194,0,7.79,0
+			c0.451,0,0.821,0.168,1.068,0.54c0.121,0.178,0.227,0.408,0.227,0.617c0.014,2.627,0.012,5.254,0.012,7.883
+			C10.427,15.529,10.418,15.557,10.405,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="5.213" cy="2.703" r="2.707"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#F47642" d="M22.718,15.623c-0.619,0-1.227,0-1.835,0c-0.351,0-0.351,0-0.351,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.002,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.463,0-2.218,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.003-7.508c0-0.844,0.493-1.353,1.327-1.354c2.598-0.004,5.193,0,7.789,0
+			c0.452,0,0.825,0.168,1.069,0.54c0.121,0.178,0.228,0.408,0.228,0.617c0.016,2.627,0.01,5.254,0.01,7.883
+			C22.737,15.529,22.729,15.557,22.718,15.623z"/>
+		<circle fill-rule="evenodd" fill="#F47642" cx="17.525" cy="2.703" r="2.705"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M35.029,15.623c-0.618,0-1.226,0-1.834,0c-0.352,0-0.352,0-0.352,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.003,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.462,0-2.216,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.002-7.508c0-0.844,0.493-1.353,1.328-1.354c2.597-0.004,5.191,0,7.787,0
+			c0.453,0,0.825,0.168,1.07,0.54c0.12,0.178,0.227,0.408,0.227,0.617c0.016,2.627,0.012,5.254,0.012,7.883
+			C35.051,15.529,35.041,15.557,35.029,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="29.837" cy="2.703" r="2.706"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M47.341,15.623c-0.618,0-1.224,0-1.832,0c-0.353,0-0.353,0-0.353,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.003,0-3.991,0-6.004,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.463,0-2.216,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.001-7.508c0-0.844,0.495-1.353,1.33-1.354c2.596-0.004,5.193,0,7.789,0
+			c0.451,0,0.823,0.168,1.069,0.54c0.119,0.178,0.226,0.408,0.226,0.617c0.015,2.627,0.011,5.254,0.011,7.883
+			C47.362,15.529,47.354,15.557,47.341,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="42.15" cy="2.703" r="2.707"/>
+	</g>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/personalized-hs-icon.svg b/shared/resources/images/icons/personalized-hs-icon.svg
new file mode 100644
index 0000000000..a6f727a0c3
--- /dev/null
+++ b/shared/resources/images/icons/personalized-hs-icon.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="47.362px" height="25px" viewBox="0 0 47.362 25" xml:space="preserve">
+<g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M10.405,15.623c-0.62,0-1.226,0-1.833,0c-0.353,0-0.353,0-0.353,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.002,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.744,0-1.464,0-2.217,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.001-7.508c0-0.844,0.493-1.353,1.329-1.354c2.596-0.004,5.194,0,7.79,0
+			c0.451,0,0.821,0.168,1.068,0.54c0.121,0.178,0.227,0.408,0.227,0.617c0.014,2.627,0.012,5.254,0.012,7.883
+			C10.427,15.529,10.418,15.557,10.405,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="5.213" cy="2.703" r="2.707"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#F47642" d="M22.718,15.623c-0.619,0-1.227,0-1.835,0c-0.351,0-0.351,0-0.351,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.002,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.463,0-2.218,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.003-7.508c0-0.844,0.493-1.353,1.327-1.354c2.598-0.004,5.193,0,7.789,0
+			c0.452,0,0.825,0.168,1.069,0.54c0.121,0.178,0.228,0.408,0.228,0.617c0.016,2.627,0.01,5.254,0.01,7.883
+			C22.737,15.529,22.729,15.557,22.718,15.623z"/>
+		<circle fill-rule="evenodd" fill="#F47642" cx="17.525" cy="2.703" r="2.705"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M35.029,15.623c-0.618,0-1.226,0-1.834,0c-0.352,0-0.352,0-0.352,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.003,0-3.991,0-6.003,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.462,0-2.216,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.002-7.508c0-0.844,0.493-1.353,1.328-1.354c2.597-0.004,5.191,0,7.787,0
+			c0.453,0,0.825,0.168,1.07,0.54c0.12,0.178,0.227,0.408,0.227,0.617c0.016,2.627,0.012,5.254,0.012,7.883
+			C35.051,15.529,35.041,15.557,35.029,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="29.837" cy="2.703" r="2.706"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" fill="#5F6263" d="M47.341,15.623c-0.618,0-1.224,0-1.832,0c-0.353,0-0.353,0-0.353,0.347
+			c0,2.896,0,5.791,0,8.683c0,0.109,0,0.219,0,0.348c-2.003,0-3.991,0-6.004,0c0-3.115,0-6.222,0-9.369c-0.743,0-1.463,0-2.216,0
+			c0-0.125,0-0.213,0-0.303c0-2.504,0-5.006,0.001-7.508c0-0.844,0.495-1.353,1.33-1.354c2.596-0.004,5.193,0,7.789,0
+			c0.451,0,0.823,0.168,1.069,0.54c0.119,0.178,0.226,0.408,0.226,0.617c0.015,2.627,0.011,5.254,0.011,7.883
+			C47.362,15.529,47.354,15.557,47.341,15.623z"/>
+		<circle fill-rule="evenodd" fill="#5F6263" cx="42.15" cy="2.703" r="2.707"/>
+	</g>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/reading-cl-icon.svg b/shared/resources/images/icons/reading-cl-icon.svg
new file mode 100644
index 0000000000..8ebd9a1c5f
--- /dev/null
+++ b/shared/resources/images/icons/reading-cl-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#F4CF1A" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M29.611,33.182c0,0.78-0.612,1.413-1.369,1.413H10.98c-0.756,0-1.369-0.632-1.369-1.413V7.208
+	c0-0.78,0.613-1.413,1.369-1.413h17.262c0.757,0,1.369,0.632,1.369,1.413V33.182z"/>
+<rect x="20.95" y="17.851" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="21.591" fill="#A7A9AC" width="16" height="1"/>
+<rect x="20.95" y="13.868" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="25.331" fill="#A7A9AC" width="16" height="1"/>
+<rect x="11.611" y="29.071" fill="#A7A9AC" width="11.2" height="1"/>
+<polygon fill="#232E66" points="16.908,16.772 18.005,15.449 20,17.856 20,10.128 11.611,10.128 11.611,17.855 14.708,14.12 "/>
+<polygon fill="#73B451" points="18.005,15.475 16.908,16.784 14.708,14.16 11.611,17.855 11.611,18.651 20,18.651 20,17.856 "/>
+</svg>
diff --git a/shared/resources/images/icons/reading-hs-icon.svg b/shared/resources/images/icons/reading-hs-icon.svg
new file mode 100644
index 0000000000..8ebd9a1c5f
--- /dev/null
+++ b/shared/resources/images/icons/reading-hs-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#F4CF1A" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M29.611,33.182c0,0.78-0.612,1.413-1.369,1.413H10.98c-0.756,0-1.369-0.632-1.369-1.413V7.208
+	c0-0.78,0.613-1.413,1.369-1.413h17.262c0.757,0,1.369,0.632,1.369,1.413V33.182z"/>
+<rect x="20.95" y="17.851" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="21.591" fill="#A7A9AC" width="16" height="1"/>
+<rect x="20.95" y="13.868" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="25.331" fill="#A7A9AC" width="16" height="1"/>
+<rect x="11.611" y="29.071" fill="#A7A9AC" width="11.2" height="1"/>
+<polygon fill="#232E66" points="16.908,16.772 18.005,15.449 20,17.856 20,10.128 11.611,10.128 11.611,17.855 14.708,14.12 "/>
+<polygon fill="#73B451" points="18.005,15.475 16.908,16.784 14.708,14.16 11.611,17.855 11.611,18.651 20,18.651 20,17.856 "/>
+</svg>
diff --git a/shared/resources/images/icons/recover-cl-icon.svg b/shared/resources/images/icons/recover-cl-icon.svg
new file mode 100644
index 0000000000..01170362d0
--- /dev/null
+++ b/shared/resources/images/icons/recover-cl-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#232E66" cx="30.134" cy="30" r="30"/>
+<path fill="#73B451" d="M50.604,30.851c0-11.307-9.165-20.471-20.471-20.471V5.102l-9.95,9.95l9.95,9.949v-5.328
+	c6.174,0,11.179,5.003,11.179,11.178s-5.005,11.178-11.179,11.178s-11.179-5.003-11.179-11.178H9.663
+	c0,11.307,9.165,20.471,20.471,20.471S50.604,42.157,50.604,30.851z"/>
+</svg>
diff --git a/shared/resources/images/icons/recover-hs-icon.svg b/shared/resources/images/icons/recover-hs-icon.svg
new file mode 100644
index 0000000000..01170362d0
--- /dev/null
+++ b/shared/resources/images/icons/recover-hs-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#232E66" cx="30.134" cy="30" r="30"/>
+<path fill="#73B451" d="M50.604,30.851c0-11.307-9.165-20.471-20.471-20.471V5.102l-9.95,9.95l9.95,9.949v-5.328
+	c6.174,0,11.179,5.003,11.179,11.178s-5.005,11.178-11.179,11.178s-11.179-5.003-11.179-11.178H9.663
+	c0,11.307,9.165,20.471,20.471,20.471S50.604,42.157,50.604,30.851z"/>
+</svg>
diff --git a/shared/resources/images/icons/review-cl-icon.svg b/shared/resources/images/icons/review-cl-icon.svg
new file mode 100644
index 0000000000..db2a817be6
--- /dev/null
+++ b/shared/resources/images/icons/review-cl-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="23.896px" height="25px" viewBox="0 0 23.896 25" xml:space="preserve">
+<g>
+	<path fill="#5F6263" d="M7.539,9.013L5.813,7.288l0.429-0.461c3.001-2.986,7.855-2.98,10.835,0
+		c1.892,1.891,2.643,4.645,2.024,7.216l4.66-0.001c0.57-3.837-0.695-7.714-3.44-10.459c-4.776-4.776-12.547-4.776-17.323,0
+		L2.554,4.027l-1.72-1.719v6.705L7.539,9.013z"/>
+	<path fill="#5F6263" d="M17.535,18.281l-0.327,0.338l-0.023-0.023c-3.019,2.551-7.536,2.408-10.366-0.421
+		c-1.914-1.915-2.659-4.693-2.009-7.284H0.146c-0.598,3.861,0.664,7.764,3.429,10.527c4.776,4.776,12.548,4.776,17.323,0
+		l0.445-0.444l1.35,1.349l0.336-6.334h-6.671l1.725,1.725l-0.429,0.461C17.615,18.212,17.573,18.244,17.535,18.281z"/>
+	<path fill="#73B451" d="M17.535,18.281c-0.114,0.109-0.231,0.215-0.351,0.314l0.023,0.023L17.535,18.281z"/>
+	<path fill="#FFFFFF" d="M17.653,18.173l0.429-0.461l-0.547,0.568C17.573,18.244,17.615,18.212,17.653,18.173z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/review-hs-icon.svg b/shared/resources/images/icons/review-hs-icon.svg
new file mode 100644
index 0000000000..db2a817be6
--- /dev/null
+++ b/shared/resources/images/icons/review-hs-icon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="23.896px" height="25px" viewBox="0 0 23.896 25" xml:space="preserve">
+<g>
+	<path fill="#5F6263" d="M7.539,9.013L5.813,7.288l0.429-0.461c3.001-2.986,7.855-2.98,10.835,0
+		c1.892,1.891,2.643,4.645,2.024,7.216l4.66-0.001c0.57-3.837-0.695-7.714-3.44-10.459c-4.776-4.776-12.547-4.776-17.323,0
+		L2.554,4.027l-1.72-1.719v6.705L7.539,9.013z"/>
+	<path fill="#5F6263" d="M17.535,18.281l-0.327,0.338l-0.023-0.023c-3.019,2.551-7.536,2.408-10.366-0.421
+		c-1.914-1.915-2.659-4.693-2.009-7.284H0.146c-0.598,3.861,0.664,7.764,3.429,10.527c4.776,4.776,12.548,4.776,17.323,0
+		l0.445-0.444l1.35,1.349l0.336-6.334h-6.671l1.725,1.725l-0.429,0.461C17.615,18.212,17.573,18.244,17.535,18.281z"/>
+	<path fill="#73B451" d="M17.535,18.281c-0.114,0.109-0.231,0.215-0.351,0.314l0.023,0.023L17.535,18.281z"/>
+	<path fill="#FFFFFF" d="M17.653,18.173l0.429-0.461l-0.547,0.568C17.573,18.244,17.615,18.212,17.653,18.173z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/sim-cl-icon.svg b/shared/resources/images/icons/sim-cl-icon.svg
new file mode 100644
index 0000000000..f8f5e184e6
--- /dev/null
+++ b/shared/resources/images/icons/sim-cl-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#e5e5e5;}.cls-3{fill:#5e6162;}</style></defs><title>icon-fa-sim</title><path class="cls-1" d="M20,39.5A19.5,19.5,0,1,1,39.5,20,19.52,19.52,0,0,1,20,39.5Z"/><path class="cls-2" d="M20,1A19,19,0,1,1,1,20,19,19,0,0,1,20,1m0-1A20,20,0,1,0,40,20,20,20,0,0,0,20,0h0Z"/><path class="cls-3" d="M29,23.9a1.5,1.5,0,0,1-1.5,1.5H22.4a7.88,7.88,0,0,0,.6,1.8,0.6,0.6,0,0,1-.6.6H17.6a0.6,0.6,0,0,1-.6-0.6,7.88,7.88,0,0,0,.6-1.8H12.5A1.5,1.5,0,0,1,11,23.9V13.7a1.5,1.5,0,0,1,1.5-1.5h15A1.5,1.5,0,0,1,29,13.7V23.9ZM27.8,13.7a0.31,0.31,0,0,0-.3-0.3h-15a0.31,0.31,0,0,0-.3.3v7.8a0.31,0.31,0,0,0,.3.3h15a0.31,0.31,0,0,0,.3-0.3V13.7Z"/></svg>
\ No newline at end of file
diff --git a/shared/resources/images/icons/sim-hs-icon.svg b/shared/resources/images/icons/sim-hs-icon.svg
new file mode 100644
index 0000000000..f8f5e184e6
--- /dev/null
+++ b/shared/resources/images/icons/sim-hs-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#e5e5e5;}.cls-3{fill:#5e6162;}</style></defs><title>icon-fa-sim</title><path class="cls-1" d="M20,39.5A19.5,19.5,0,1,1,39.5,20,19.52,19.52,0,0,1,20,39.5Z"/><path class="cls-2" d="M20,1A19,19,0,1,1,1,20,19,19,0,0,1,20,1m0-1A20,20,0,1,0,40,20,20,20,0,0,0,20,0h0Z"/><path class="cls-3" d="M29,23.9a1.5,1.5,0,0,1-1.5,1.5H22.4a7.88,7.88,0,0,0,.6,1.8,0.6,0.6,0,0,1-.6.6H17.6a0.6,0.6,0,0,1-.6-0.6,7.88,7.88,0,0,0,.6-1.8H12.5A1.5,1.5,0,0,1,11,23.9V13.7a1.5,1.5,0,0,1,1.5-1.5h15A1.5,1.5,0,0,1,29,13.7V23.9ZM27.8,13.7a0.31,0.31,0,0,0-.3-0.3h-15a0.31,0.31,0,0,0-.3.3v7.8a0.31,0.31,0,0,0,.3.3h15a0.31,0.31,0,0,0,.3-0.3V13.7Z"/></svg>
\ No newline at end of file
diff --git a/shared/resources/images/icons/test-cl-icon.svg b/shared/resources/images/icons/test-cl-icon.svg
new file mode 100644
index 0000000000..c154a9180f
--- /dev/null
+++ b/shared/resources/images/icons/test-cl-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M30,33.528C30,34.341,29.388,35,28.631,35H11.369C10.613,35,10,34.341,10,33.528V6.472
+	C10,5.658,10.613,5,11.369,5h17.262C29.388,5,30,5.658,30,6.472V33.528z"/>
+<rect x="12" y="16.974" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="21.129" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="25.284" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="8.664" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="12.818" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="29.439" fill="#A7A9AC" width="8" height="1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M36.783,17.527L24.824,29.486
+	c-0.359,0.365-0.667,0.584-1.283,0.586c-0.526-0.017-1.085-0.321-1.341-0.586l-6.127-6.125c-0.569-0.57-0.569-1.473,0-2.043
+	l1.169-1.166c0.568-0.569,1.471-0.278,2.04,0.291l4.082,4.084l10.21-10.208c0.572-0.574,1.469-0.574,2.042,0l1.167,1.166
+	C37.356,16.059,37.356,16.955,36.783,17.527z"/>
+</svg>
diff --git a/shared/resources/images/icons/test-hs-icon.svg b/shared/resources/images/icons/test-hs-icon.svg
new file mode 100644
index 0000000000..c154a9180f
--- /dev/null
+++ b/shared/resources/images/icons/test-hs-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M30,33.528C30,34.341,29.388,35,28.631,35H11.369C10.613,35,10,34.341,10,33.528V6.472
+	C10,5.658,10.613,5,11.369,5h17.262C29.388,5,30,5.658,30,6.472V33.528z"/>
+<rect x="12" y="16.974" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="21.129" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="25.284" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="8.664" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="12.818" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="29.439" fill="#A7A9AC" width="8" height="1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M36.783,17.527L24.824,29.486
+	c-0.359,0.365-0.667,0.584-1.283,0.586c-0.526-0.017-1.085-0.321-1.341-0.586l-6.127-6.125c-0.569-0.57-0.569-1.473,0-2.043
+	l1.169-1.166c0.568-0.569,1.471-0.278,2.04,0.291l4.082,4.084l10.21-10.208c0.572-0.574,1.469-0.574,2.042,0l1.167,1.166
+	C37.356,16.059,37.356,16.955,36.783,17.527z"/>
+</svg>
diff --git a/shared/resources/images/icons/video-cl-icon.svg b/shared/resources/images/icons/video-cl-icon.svg
new file mode 100644
index 0000000000..d21d00cfff
--- /dev/null
+++ b/shared/resources/images/icons/video-cl-icon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#5F6062" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F47642" d="M13.003,12.724c0-1.1,0.805-1.598,1.789-1.105l16.423,8.211c0.983,0.492,0.983,1.296,0,1.789l-16.423,8.211
+		c-0.984,0.492-1.789-0.005-1.789-1.105V12.724z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/video-hs-icon.svg b/shared/resources/images/icons/video-hs-icon.svg
new file mode 100644
index 0000000000..d21d00cfff
--- /dev/null
+++ b/shared/resources/images/icons/video-hs-icon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#5F6062" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F47642" d="M13.003,12.724c0-1.1,0.805-1.598,1.789-1.105l16.423,8.211c0.983,0.492,0.983,1.296,0,1.789l-16.423,8.211
+		c-0.984,0.492-1.789-0.005-1.789-1.105V12.724z"/>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/video-placeholder-cl-icon.svg b/shared/resources/images/icons/video-placeholder-cl-icon.svg
new file mode 100644
index 0000000000..7cb98943e4
--- /dev/null
+++ b/shared/resources/images/icons/video-placeholder-cl-icon.svg
@@ -0,0 +1,13 @@
+<svg className="placeholder video"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.81,280A25.17,25.17,0,0,0,400,254.83V25.19A25.2,25.2,0,0,0,374.8,0H25.2A25.19,25.19,0,0,0,0,25.19V254.83A25.18,25.18,0,0,0,25.2,280H374.81Z"
+    transform="translate(0 0)"
+  />
+  <rect fill="#fff" x="15" y="17" width="370" height="246" rx="12" ry="12"/>
+  <path fill="#5E6062"
+    d="M262.37,133c6.68,3.86,6.68,10.17,0,14l-93.55,54c-6.68,3.86-12.15.7-12.15-7V86c0-7.72,5.47-10.87,12.15-7Z"
+    transform="translate(0 0)"
+  />
+</svg>
diff --git a/shared/resources/images/icons/video-placeholder-hs-icon.svg b/shared/resources/images/icons/video-placeholder-hs-icon.svg
new file mode 100644
index 0000000000..7cb98943e4
--- /dev/null
+++ b/shared/resources/images/icons/video-placeholder-hs-icon.svg
@@ -0,0 +1,13 @@
+<svg className="placeholder video"
+  version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+  viewBox="0 0 400 348">
+  <path fill="#5E6062"
+    d="M374.81,280A25.17,25.17,0,0,0,400,254.83V25.19A25.2,25.2,0,0,0,374.8,0H25.2A25.19,25.19,0,0,0,0,25.19V254.83A25.18,25.18,0,0,0,25.2,280H374.81Z"
+    transform="translate(0 0)"
+  />
+  <rect fill="#fff" x="15" y="17" width="370" height="246" rx="12" ry="12"/>
+  <path fill="#5E6062"
+    d="M262.37,133c6.68,3.86,6.68,10.17,0,14l-93.55,54c-6.68,3.86-12.15.7-12.15-7V86c0-7.72,5.47-10.87,12.15-7Z"
+    transform="translate(0 0)"
+  />
+</svg>
diff --git a/shared/resources/images/icons/worked-example-cl-icon.svg b/shared/resources/images/icons/worked-example-cl-icon.svg
new file mode 100644
index 0000000000..e700e3b9aa
--- /dev/null
+++ b/shared/resources/images/icons/worked-example-cl-icon.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#E6E7E8" d="M24.797,35.637c-0.475,0.993-1.675,1.417-2.668,0.943L5.761,28.756c-0.993-0.474-1.417-1.674-0.942-2.666
+		L15.204,4.363c0.474-0.993,1.674-1.417,2.667-0.942l16.368,7.823c0.993,0.474,1.417,1.674,0.943,2.667L24.797,35.637z"/>
+	
+		<rect x="13.868" y="8.366" transform="matrix(0.9022 0.4312 -0.4312 0.9022 7.9547 -8.743)" fill="#232E66" width="18.788" height="9.616"/>
+	<g>
+		
+			<rect x="11.032" y="15.733" transform="matrix(0.9023 0.4312 -0.4312 0.9023 8.916 -4.1794)" fill="#5F6062" width="5.292" height="3.691"/>
+		
+			<rect x="17.12" y="18.644" transform="matrix(0.9022 0.4313 -0.4313 0.9022 10.7714 -6.5218)" fill="#5F6062" width="5.292" height="3.69"/>
+		
+			<rect x="23.208" y="21.554" transform="matrix(0.9022 0.4313 -0.4313 0.9022 12.6191 -8.862)" fill="#5F6062" width="5.292" height="3.69"/>
+	</g>
+	<g>
+		
+			<rect x="8.829" y="20.342" transform="matrix(0.9022 0.4314 -0.4314 0.9022 10.6937 -2.7798)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="14.918" y="23.251" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.5433 -5.1215)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="21.006" y="26.16" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.388 -7.4615)" fill="#5F6062" width="5.293" height="3.691"/>
+	</g>
+	<g>
+		
+			<rect x="6.627" y="24.949" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.4647 -1.3793)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="12.716" y="27.858" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.3096 -3.7209)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="18.804" y="30.767" transform="matrix(0.9023 0.4311 -0.4311 0.9023 16.1544 -6.061)" fill="#F47642" width="5.292" height="3.691"/>
+	</g>
+	<text transform="matrix(0.526 0.2514 -0.2514 0.526 16.876 12.5044)" fill="#00C1DE" font-family="'Lato-Black'" font-size="12">x+y</text>
+</g>
+</svg>
diff --git a/shared/resources/images/icons/worked-example-hs-icon.svg b/shared/resources/images/icons/worked-example-hs-icon.svg
new file mode 100644
index 0000000000..e700e3b9aa
--- /dev/null
+++ b/shared/resources/images/icons/worked-example-hs-icon.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#E6E7E8" d="M24.797,35.637c-0.475,0.993-1.675,1.417-2.668,0.943L5.761,28.756c-0.993-0.474-1.417-1.674-0.942-2.666
+		L15.204,4.363c0.474-0.993,1.674-1.417,2.667-0.942l16.368,7.823c0.993,0.474,1.417,1.674,0.943,2.667L24.797,35.637z"/>
+	
+		<rect x="13.868" y="8.366" transform="matrix(0.9022 0.4312 -0.4312 0.9022 7.9547 -8.743)" fill="#232E66" width="18.788" height="9.616"/>
+	<g>
+		
+			<rect x="11.032" y="15.733" transform="matrix(0.9023 0.4312 -0.4312 0.9023 8.916 -4.1794)" fill="#5F6062" width="5.292" height="3.691"/>
+		
+			<rect x="17.12" y="18.644" transform="matrix(0.9022 0.4313 -0.4313 0.9022 10.7714 -6.5218)" fill="#5F6062" width="5.292" height="3.69"/>
+		
+			<rect x="23.208" y="21.554" transform="matrix(0.9022 0.4313 -0.4313 0.9022 12.6191 -8.862)" fill="#5F6062" width="5.292" height="3.69"/>
+	</g>
+	<g>
+		
+			<rect x="8.829" y="20.342" transform="matrix(0.9022 0.4314 -0.4314 0.9022 10.6937 -2.7798)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="14.918" y="23.251" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.5433 -5.1215)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="21.006" y="26.16" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.388 -7.4615)" fill="#5F6062" width="5.293" height="3.691"/>
+	</g>
+	<g>
+		
+			<rect x="6.627" y="24.949" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.4647 -1.3793)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="12.716" y="27.858" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.3096 -3.7209)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="18.804" y="30.767" transform="matrix(0.9023 0.4311 -0.4311 0.9023 16.1544 -6.061)" fill="#F47642" width="5.292" height="3.691"/>
+	</g>
+	<text transform="matrix(0.526 0.2514 -0.2514 0.526 16.876 12.5044)" fill="#00C1DE" font-family="'Lato-Black'" font-size="12">x+y</text>
+</g>
+</svg>
diff --git a/shared/resources/styles/_components.less b/shared/resources/styles/_components.less
new file mode 100644
index 0000000000..b113a4f887
--- /dev/null
+++ b/shared/resources/styles/_components.less
@@ -0,0 +1,16 @@
+// This file should be imported wrapped within another less file only.
+// Each of them begin with a `&-`, allowing whatever file that is importing
+// this file to easily namespace all the components at once.
+
+@import './components/html/index';
+@import './components/exercise/step-card';
+@import './components/exercise/group';
+@import './components/exercise-badges/index';
+@import './components/exercise-preview/index';
+@import './components/breadcrumbs/step';
+@import './components/question';
+@import './components/close';
+@import './components/spy-mode';
+@import './components/smart-overflow';
+@import './components/notifications-bar';
+@import './components/surety-guard';
diff --git a/shared/resources/styles/components/breadcrumbs/coach.less b/shared/resources/styles/components/breadcrumbs/coach.less
new file mode 100644
index 0000000000..19cfa599b2
--- /dev/null
+++ b/shared/resources/styles/components/breadcrumbs/coach.less
@@ -0,0 +1,141 @@
+@concept-coach-breadcrumb-background: @openstax-white;
+@concept-coach-breadcrumb-color: @openstax-neutral;
+@concept-coach-breadcrumb-border-radius: 0;
+
+.make-breadcrumb-clickable() {
+  &.active {
+    color: @openstax-white;
+    background: @openstax-info;
+    border-color: @openstax-info;
+    cursor: default;
+    font-weight: 400;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: @openstax-info;
+    outline: none;
+  }
+}
+
+.concept-coach-breadcrumbs() {
+  .task-breadcrumbs {
+    margin: 1rem 0;
+  }
+
+  .openstax-breadcrumbs-step {
+    border-width: 2px;
+    border-style: solid;
+    border-radius: @concept-coach-breadcrumb-border-radius;
+    background: @concept-coach-breadcrumb-background;
+    border-color: @concept-coach-breadcrumb-background;
+    color: @concept-coach-breadcrumb-color;
+    margin-right: 1rem;
+    font-size: 2.5rem;
+    line-height: 3.8rem;
+    width: auto;
+    position: relative;
+
+    &:hover,
+    &.active {
+      box-shadow: none;
+      border-radius: @concept-coach-breadcrumb-border-radius;
+      .scale(1);
+    }
+
+    .transition(~'background 0.1s ease-in-out, border-color 0.1s ease-in-out');
+    .make-breadcrumb-clickable();
+
+    &::before {
+      font-weight: 300;
+      position: relative;
+    }
+
+    &.disabled {
+      background: transparent;
+      border-color: transparent;
+      color: lighten(@concept-coach-breadcrumb-color, 25%);
+      cursor: default;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+
+    &.end:not(.disabled) {
+      background: @openstax-white;
+      border-color: @openstax-white;
+      color: @concept-coach-breadcrumb-color;
+      cursor: pointer;
+    }
+
+    &:not(.active) {      
+      &.status-incorrect,
+      &.status-correct {
+        background: @concept-coach-breadcrumb-background;
+      }
+      &.status-incorrect {
+        color: @openstax-incorrect-color;
+      }
+
+      &.status-correct {
+        color: @openstax-correct-color;
+      }
+    }
+
+
+    &.breadcrumb-end[data-label] {
+      top: -0.5em;
+
+      &::before {
+        text-align: center;
+        width: 100%;
+        padding: 0 1rem;
+        font-style: italic;
+        text-transform: capitalize;
+        content: attr(data-label);
+      }
+    }
+  }
+
+  .icon-end {
+    display: none;
+  }
+
+  .icon-stack {
+    > .icon-sm,
+    > .icon-lg {
+      top: -1.5rem;
+      left: 2.2rem;
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      border: 3px solid @openstax-neutral-light;
+    }
+  }
+
+
+  .icon-incorrect,
+  .icon-correct {
+    .fa-icon();
+    font-size: 2.4rem;
+    line-height: 1.8rem;
+    background: @openstax-white;
+  }
+
+  .icon-incorrect {
+    color: @openstax-incorrect-color;
+
+    &::after {    
+      content: @fa-var-times-circle;
+    }
+  }
+
+  .icon-correct {
+    color: @openstax-correct-color;
+
+    &::after {
+      content: @fa-var-check-circle;    
+    }
+  }
+}
\ No newline at end of file
diff --git a/shared/resources/styles/components/breadcrumbs/icons.less b/shared/resources/styles/components/breadcrumbs/icons.less
new file mode 100644
index 0000000000..0191fe063c
--- /dev/null
+++ b/shared/resources/styles/components/breadcrumbs/icons.less
@@ -0,0 +1,28 @@
+// Note: Use tokens instead of strings to be able to do LESS compile-time validation
+
+.x-course-icon-bg(feedback);
+.x-course-icon-bg(homework, exercise);
+.x-course-icon-bg(homework);
+.x-course-icon-bg(external);
+.x-course-icon-bg(event);
+.x-course-icon-bg(end);
+.x-course-icon-bg(interactive);
+.x-course-icon-bg(coach);
+.x-course-icon-bg(video);
+.x-course-icon-bg(reading);
+.x-course-icon-bg(recover);
+.x-course-icon-bg(test);
+.x-course-icon-bg(review, spaced_practice);
+.x-course-icon-bg(personalized);
+.x-course-icon-bg(worked-example);
+
+// The following are usually overlays on other icons
+.x-course-icon-bg(correct);
+.x-course-icon-bg(incorrect);
+
+.icon-placeholder {
+  &:before {
+    content: '?';
+    font-style: normal;
+  }
+}
diff --git a/shared/resources/styles/components/breadcrumbs/index.less b/shared/resources/styles/components/breadcrumbs/index.less
new file mode 100644
index 0000000000..651adb0985
--- /dev/null
+++ b/shared/resources/styles/components/breadcrumbs/index.less
@@ -0,0 +1,75 @@
+// http://caniuse.com/#search=counter
+.task-homework,
+.task-practice,
+.task-chapter_practice,
+.task-concept_coach,
+.task-page_practice {
+  .task-breadcrumbs {
+    counter-reset: step;
+  }
+  .openstax-breadcrumbs-step:not(.breadcrumb-end) {
+    &:before {
+      counter-increment: step;
+      content: counter(step);
+      .crumb-text();
+    }
+    i:not(.icon-incorrect):not(.icon-correct) {
+      display: none;
+    }
+  }
+}
+
+// label readings with chapter info if it exists
+.task-reading {
+  .openstax-breadcrumbs-step[data-chapter] {
+
+    background: @reading-color;
+    color: @openstax-white;
+
+    &.active,
+    &.completed {
+      color: @openstax-white;
+    }
+
+    &::before {
+      content: attr(data-chapter);
+      .crumb-text();
+    }
+    i:not(.icon-incorrect):not(.icon-correct) {
+      display: none;
+    }
+  }
+}
+
+&.is-college {
+  .task-reading {
+    .openstax-breadcrumbs-step[data-chapter] {
+      background: @openstax-white;
+      color: @openstax-neutral;
+      border: 1px solid @openstax-neutral-lighter;
+    }
+    &.active,
+    &.completed {
+      color: @openstax-neutral;
+    }
+  }
+}
+
+.task-breadcrumbs {
+  margin-left: -2px;
+  margin-right: -2px;
+
+  &.shrink {
+    .openstax-breadcrumbs-step {
+      &:not(:hover):not(.active) {
+        .scale(.75, .75);
+        margin-left: -16px;
+      }
+      &:hover, &.active {
+        margin-right: 10px;
+        margin-left: -6px;
+        .openstax-icon-active(1.2, 0.12);
+      }
+    }
+  }
+}
diff --git a/shared/resources/styles/components/breadcrumbs/step.less b/shared/resources/styles/components/breadcrumbs/step.less
new file mode 100644
index 0000000000..015e1f6c45
--- /dev/null
+++ b/shared/resources/styles/components/breadcrumbs/step.less
@@ -0,0 +1,37 @@
+&-breadcrumbs-step {
+
+  &.completed{
+    .icon-end { .x-icon-bg(completed); }
+  }
+
+  .crumb-circle(2rem);
+  position: relative;
+  font-weight: 500;
+  cursor: pointer;
+  margin: 2px;
+  display: inline-block;
+  text-align: center;
+  background: @openstax-white;
+  color: @openstax-neutral;
+
+  &:hover,
+  &.active {
+    .openstax-icon-active(1.4, 0.5);
+  }
+
+  &.active {
+    color: @openstax-primary;
+  }
+  &.completed {
+    background: @openstax-answer-background;
+    color: @openstax-answer-color;
+  }
+  &.status-correct {
+    background: @openstax-correct-background;
+    color: @openstax-correct-color;
+  }
+  &.status-incorrect {
+    background: @openstax-incorrect-background;
+    color: @openstax-incorrect-color;
+  }
+}
\ No newline at end of file
diff --git a/shared/resources/styles/components/close.less b/shared/resources/styles/components/close.less
new file mode 100644
index 0000000000..1acee8733d
--- /dev/null
+++ b/shared/resources/styles/components/close.less
@@ -0,0 +1,5 @@
+&-close-x {
+  &::before {
+    content: "\00d7";
+  }
+}
diff --git a/shared/resources/styles/components/exercise-badges/index.less b/shared/resources/styles/components/exercise-badges/index.less
new file mode 100644
index 0000000000..8fcb833227
--- /dev/null
+++ b/shared/resources/styles/components/exercise-badges/index.less
@@ -0,0 +1,15 @@
+&-exercise-badges {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: @openstax-neutral;
+  .icon {
+    height: 20px;
+    margin-right: 0.5rem;
+  }
+  span {
+    display: flex;
+    align-items: center;
+    & + span { margin-left: 8px; }
+  }
+}
\ No newline at end of file
diff --git a/shared/resources/styles/components/exercise-preview/index.less b/shared/resources/styles/components/exercise-preview/index.less
new file mode 100644
index 0000000000..555b829dee
--- /dev/null
+++ b/shared/resources/styles/components/exercise-preview/index.less
@@ -0,0 +1,299 @@
+&-exercise-preview {
+  position: relative;
+  @action-square-width: 140px;
+  @action-square-height: 130px;
+
+  @action-icon-circle-size: 80px;
+  .sans(@size: 1.5rem, @line-height: 3rem) {
+    font-family: 'Lato', Helvetica, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: @size;
+    line-height: @line-height;
+  }
+  iframe {
+    width: 100%;
+  }
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 0 auto 20px auto;
+  }
+
+  &.non-interactive {
+
+    .placeholder {
+      height: 200px;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  &.is-vertically-truncated {
+    .context {
+      .height-limited-panel(300px);
+    }
+    .question-stem {
+      .height-limited-panel(370px);
+    }
+    .panel-body {
+      .height-limited-panel(720px);
+    }
+  }
+
+
+  &.has-actions {
+    .panel-body {
+      &:hover {
+        .controls-overlay {
+          visibility: visible;
+          background-color: fade( @openstax-neutral-light, 80%);
+          .message { opacity: 1; }
+        }
+      }
+    }
+    .controls-overlay {
+      cursor: pointer;
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;  // completely cover panel body
+      visibility: hidden;
+      z-index: 1;
+      display: flex;
+      border: none;
+      justify-content: center;
+      align-items: center;
+      .transition(all .25s ease-in-out);
+
+      .message {
+        display: block;
+        font-size: 1.5rem;
+        line-height: 1.5rem;
+        font-weight: 700;
+        opacity: 0;
+        .transition(all .25s ease-in-out);
+        .openstax-disable-text-select();
+        .action {
+          display: inline-block;
+          text-align: center;
+          color: white;
+          user-select:  none;
+          width: @action-square-width;
+          height: @action-square-height;
+          &:hover { box-shadow: 0 0 5px rgba(0,0,0,0.5); }
+
+          &:before {
+            .fa-icon();
+            content: "";
+            display: block;
+            margin: 10% auto;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            padding-top: 0;
+            margin-bottom: 5px;
+            font-weight: 300;
+            text-align: center;
+            background-color: white;
+            font-size: @action-icon-circle-size * 0.75;
+            border-radius: @action-icon-circle-size / 2;
+            width: @action-icon-circle-size;
+            height: @action-icon-circle-size;
+          }
+        }
+      }
+    }
+  } // end controls-overlay
+
+
+  &.actions-on-side {
+    @action-square-width: 67px;
+    @action-square-height: 75px;
+    @size-scale: 0.5;
+    .panel-body, .panel-body:hover {
+      padding-left: 90px;
+      position: relative;
+      .controls-overlay {
+        visibility: visible;
+        right: inherit;
+        width: @action-square-width;
+        background-color: transparent;
+        pointer-events: none;
+        .message { opacity: 1; }
+      }
+      .message {
+        pointer-events: all;
+        flex-direction: column;
+        .action {
+          height: @action-square-height;
+          width:  @action-square-width;
+          font-size: 12px;
+          line-height: 12px;
+          &:before {
+            padding-top: 4px;
+            margin-bottom: 0;
+            font-size: @action-icon-circle-size * 0.75 * @size-scale;
+            border-radius: (@action-icon-circle-size / 2) * @size-scale;
+            width: @action-icon-circle-size * @size-scale;
+            height: @action-icon-circle-size * @size-scale;
+          }
+          &.report-error:before{ padding-top: 0px; font-size: 90px * @size-scale; };
+        }
+      }
+    }
+
+  }
+
+  .selected-mask {
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;  // completely cover panel body
+      z-index: 1;
+      opacity: 0.4;
+      background-color: @openstax-neutral-light;
+      pointer-events: none;
+  }
+
+  .panel-body {
+    position: relative;
+
+    // used by formats and tags
+    .metadata-styles() {
+      color: @openstax-neutral;
+      font-size: 1.2rem;
+      line-height: 1.4em;
+    }
+    .question-stem {
+      font-weight: 700;
+      margin-bottom: 1rem;
+      font-size: 1.6rem;
+      line-height: 1.4em;
+    }
+
+    .answers-table {
+      counter-reset: answer;
+      font-size: 1.4rem;
+      line-height: 1.4em;
+      margin-bottom: 2rem;
+
+      .answers-answer {
+        padding-left: 15px;
+        counter-increment: answer;
+        display: table;
+
+        &.answer-correct {
+          color: @openstax-secondary;
+          padding-left: 0;
+
+          &:before {
+            .fa-icon();
+            padding-top: 0.15em;
+            padding-right: .125em;
+            content: @fa-var-check;
+            display: table-cell;
+          }
+        }
+
+        .answer-label {
+          font-weight: 400;
+          display: table-cell;
+        }
+
+        .answer-letter {
+          padding-right: 1rem;
+          display: table-cell;
+          &:after {
+            content: counter(answer, lower-latin) ')';
+          }
+        }
+
+        .answer-answer {
+          display: table-cell;
+          padding-bottom: 5px;
+        }
+      }
+
+      .question-feedback-content {
+        display: none;
+        margin-bottom: 5px;
+        color: @openstax-neutral;
+        margin-left: 0;
+        .sans(1.1rem, 1.1rem);
+        font-style: italic;
+      }
+
+    }
+
+    .formats-listing {
+      .metadata-styles();
+      .header {
+        display: inline-block;
+        margin-right: 1rem;
+      }
+      span {
+        &:after { content: ", "; }
+        &:last-of-type {
+          &:after{ content: ""; }
+        }
+      }
+
+    }
+
+    .detailed-solution {
+      display: none;
+    }
+
+    .exercise-tags {
+      .metadata-styles();
+      .exercise-tag + .exercise-tag:before {
+        content: ',';
+        margin-right: 1rem;
+      }
+
+      .lo-tag {
+        margin-right: 1rem;
+        display: block;
+        content: '';
+      }
+    }
+    .exercise-uid {
+      font-size: 11px;
+      line-height: 11px;
+      color: @openstax-neutral-medium;
+    }
+  }
+
+  &.is-displaying-feedback {
+    .panel-body .answers-table .question-feedback-content { display: table; }
+    .detailed-solution{ display: block; }
+  }
+
+  .stimulus {
+    margin-bottom: 1rem;
+    .preview {
+      width: 200px;
+      height: 200px;
+      margin: auto;
+      overflow: hidden;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-indent: 400px; // move text out of the frame so only background image shows up
+      &.video       { .x-icon-bg("video-placeholder");       }
+      &.interactive { .x-icon-bg("interactive-placeholder"); }
+    }
+  }
+
+  // use absolute positioning for the identifer so it's link is clickable through the overlay
+  .panel-footer .controls {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.1rem;
+    color: @openstax-neutral;
+
+    .exercise-identifier-link a { color: @openstax-neutral; }
+
+    .toggle {
+      border: 0;
+      background-color: transparent;
+      font-size: 1.2rem;
+    }
+  }
+
+} // end of exercise.card styles
diff --git a/shared/resources/styles/components/exercise/group.less b/shared/resources/styles/components/exercise/group.less
new file mode 100644
index 0000000000..2aeaabb540
--- /dev/null
+++ b/shared/resources/styles/components/exercise/group.less
@@ -0,0 +1,17 @@
+&-step-group {
+  font-size: 1.6rem;
+  color: @openstax-neutral;
+  padding-bottom: 2rem;
+  padding-top: 0;
+	text-align: right;
+
+	i.fa {
+		display: inline-block;
+		margin: 0 5px;
+	}
+}
+
+&-step-group-label {
+  display: inline-block;
+  margin-left: 20px;
+}
diff --git a/shared/resources/styles/components/exercise/step-card.less b/shared/resources/styles/components/exercise/step-card.less
new file mode 100644
index 0000000000..e84326280c
--- /dev/null
+++ b/shared/resources/styles/components/exercise/step-card.less
@@ -0,0 +1,56 @@
+&-exercise {
+  .exercise-typography();
+
+  @{placeholder-selector} {
+    font-style: italic;
+  }
+
+  .exercise-stimulus {
+    margin-bottom: 20px;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 8em;
+    line-height: 1.5em;
+    margin: 1em 0 0 0;
+    padding: 0.75em;
+
+    &[disabled] {
+      border: none;
+    }
+  }
+
+}
+
+&-exercise-card, &-multipart-exercise-card {
+  position: relative;
+  .exercise-identifier-link {
+    position: absolute;
+    right: @answer-horizontal-spacing;
+    bottom: @answer-vertical-spacing;
+    color: @answer-label-color;
+    font-size: 1.2rem;
+    line-height: 1.2rem;
+  }
+
+  &.deleted-reading,
+  &.deleted-homework {
+    .btn {
+      display: none;
+    }
+  }
+  &.deleted-homework {
+    .openstax-question:not(.openstax-question-preview) {
+      .question-feedback {
+        display: none;
+      }
+    }
+  }
+}
+
+&-multipart-exercise-card {
+  .card-body {
+    margin-bottom: 4rem;
+  }
+}
diff --git a/shared/resources/styles/components/html/index.less b/shared/resources/styles/components/html/index.less
new file mode 100644
index 0000000000..29477e4ca1
--- /dev/null
+++ b/shared/resources/styles/components/html/index.less
@@ -0,0 +1,9 @@
+&-has-html {
+  .openstax-tables();
+
+  .frame-wrapper {
+    margin: 1rem 0;
+  }
+}
+
+
diff --git a/shared/resources/styles/components/notifications-bar.less b/shared/resources/styles/components/notifications-bar.less
new file mode 100644
index 0000000000..424c0e11cd
--- /dev/null
+++ b/shared/resources/styles/components/notifications-bar.less
@@ -0,0 +1,73 @@
+&-notifications-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color: @openstax-primary;
+
+  .notification {
+    .flex-display();
+    .flex-direction(row);
+    .justify-content(flex-start);
+    .align-items(center);
+    color: @openstax-neutral-lighter;
+    padding: 15px;
+    font-size: 2rem;
+    line-height: 2rem;
+
+    .body, .error {
+      .flex-display();
+      .flex-direction(row);
+      .justify-content(center);
+      .align-items(center);
+      .message {
+        text-align: right;
+      }
+    }
+    .body {
+      .flex(1);
+    }
+
+    & + .notification {
+      border-top: 1px solid darken(@openstax-primary, 5%);
+    }
+
+    .icon {
+      margin-right: 1rem;
+      font-size: 3rem;
+    }
+    .dismiss, .action {
+      color: @openstax-neutral-lighter;
+      cursor: pointer;
+      text-decoration: none;
+      margin-left: 1rem;
+      &:hover {
+        text-decoration: underline;
+        color: @openstax-neutral-light;
+        border-color: @openstax-neutral-light;
+      }
+    }
+    .dismiss {
+      font-size: 1.5rem;
+    }
+    .action {
+      font-size: 1.8rem;
+    }
+    &.email {
+
+
+      input {
+        width: 10rem;
+        margin-left: 1rem;
+        color: @openstax-neutral-darker;
+      }
+      .form-group { margin: 0; }
+      .pin-check {
+        border: 2px solid @openstax-neutral-lighter;
+        border-radius: 20px;
+        padding: 4px;
+        width: 60px;
+        text-align: center;
+      }
+    }
+  }
+}
diff --git a/shared/resources/styles/components/pinned-header-footer-card/index.less b/shared/resources/styles/components/pinned-header-footer-card/index.less
new file mode 100644
index 0000000000..679fcc3af6
--- /dev/null
+++ b/shared/resources/styles/components/pinned-header-footer-card/index.less
@@ -0,0 +1,10 @@
+body.pinned-shy {
+  .pinned-header, .navbar-fixed-top {
+    .make-shy();
+  }
+}
+
+body.pinned-force-shy {
+  // force min height to allow shy scroll on a short task step
+  min-height: 120%;
+}
diff --git a/shared/resources/styles/components/pinned-header-footer-card/sections.less b/shared/resources/styles/components/pinned-header-footer-card/sections.less
new file mode 100644
index 0000000000..4336cf02b2
--- /dev/null
+++ b/shared/resources/styles/components/pinned-header-footer-card/sections.less
@@ -0,0 +1,20 @@
+.pinned-footer {
+  .fixed-bar();
+  background: fadeout(@openstax-white, 20%);
+  padding: 10px @openstax-navbar-padding-horizontal;
+  bottom: 0;
+}
+
+.pinned-header {
+  .make-shy-animate();
+}
+
+.pinned-on {
+  .pinned-header {
+    top: @openstax-navbar-height;
+    .fixed-bar();
+  }
+}
+
+// always wrap around elements by extending bootstrap's clearfix
+.card-body { &:extend(.clearfix all); }
diff --git a/shared/resources/styles/components/question.less b/shared/resources/styles/components/question.less
new file mode 100644
index 0000000000..8b0252cd18
--- /dev/null
+++ b/shared/resources/styles/components/question.less
@@ -0,0 +1,353 @@
+@correct-answer-color: @openstax-correct-color;
+@correct-answer-background: @openstax-correct-background;
+@wrong-answer-color: @openstax-incorrect-color;
+@wrong-answer-background: @openstax-incorrect-background;
+
+@free-response-color: @openstax-neutral-dark;
+@free-response-background:  @openstax-neutral-lighter;
+
+@answer-label-color: @openstax-neutral-medium;
+@answer-label-color-hover: @openstax-neutral-dark;
+@answer-label-color-selected: @openstax-info;
+
+@answer-vertical-spacing: 1.5rem;
+@answer-horizontal-spacing: 1rem;
+@answer-horizontal-buffer: @answer-vertical-spacing + @answer-horizontal-spacing;
+@answer-bubble-size: 4rem;
+@answer-label-spacing: @answer-bubble-size + @answer-horizontal-buffer;
+
+@answer-transition: ~'0.1s ease-in-out';
+
+@feedback-horizontal-spacing: 2 * @answer-horizontal-spacing;
+@feedback-vertical-spacing: @feedback-horizontal-spacing;
+@feedback-horizontal-buffer: 2 * @feedback-horizontal-spacing;
+
+.openstax-bubble(@diameter, @border-size){
+  width: @diameter;
+  height: @diameter;
+  border-radius: 2 * @diameter;
+  border-width: @border-size;
+  border-style: solid;
+
+  &::after {
+    width: @diameter;
+    height: @diameter;
+    line-height: @diameter;
+    margin-left: -1 * @border-size;
+    margin-top: -1 * @border-size;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+.answer-fa-icon(){
+  .fa-icon();
+  // em used here for line-height for compatibility with IE
+  // http://caniuse.com/#feat=rem -- rem ignored in pseudo elements
+  line-height: 1.6em;
+  font-size: 2.5rem;
+}
+
+.answer-bubble(){
+  .openstax-bubble(@answer-bubble-size, 2px);
+  border-color: lighten(@answer-label-color, 15%);
+  color: @answer-label-color-hover;
+
+  .transition(~'color @{answer-transition}, border-color @{answer-transition}, background-color @{answer-transition}');
+}
+
+.answer-bubble(hover){
+  border-color: @answer-label-color-selected;
+}
+
+.answer-bubble(checked){
+  border-color: @answer-label-color-selected;
+  background-color: @answer-label-color-selected;
+  color: @openstax-white;
+}
+
+.answer-bubble(wrong){
+  border-color: @wrong-answer-color;
+  background-color: @wrong-answer-color;
+  color: @openstax-white;
+
+  &::after {
+    .answer-fa-icon();
+    content: @fa-var-close;
+  }
+}
+
+.answer-bubble(correct){
+  border-color: @correct-answer-color;
+  background-color: @correct-answer-color;
+  color: @openstax-white;
+
+  &::after {
+    .answer-fa-icon();
+    content: @fa-var-check;
+  }
+}
+
+.answer-bubble(correct-answer){
+  border-color: @correct-answer-color;
+  color: @correct-answer-color;
+}
+
+.answer-left-block(){
+  display: block;
+  float: left;
+}
+
+.answer(){
+  color: @answer-label-color;
+  .answer-letter {
+    .answer-bubble();
+  }
+}
+
+.answer(hover){
+  color: @answer-label-color-hover;
+  .answer-letter {
+    .answer-bubble(hover);
+  }
+}
+
+.answer(checked){
+  color: @answer-label-color-selected;
+  .answer-letter {
+    .answer-bubble(checked);
+  }
+}
+
+.answer(wrong){
+  color: @wrong-answer-color;
+  .answer-letter {
+    .answer-bubble(wrong);
+  }
+}
+
+.answer(correct){
+  color: @correct-answer-color;
+  .answer-letter {
+    .answer-bubble(correct);
+  }
+}
+
+.answer(correct-answer){
+  color: @correct-answer-color;
+  .answer-letter {
+    .answer-bubble(correct-answer);
+  }
+
+  &::before {
+    content: 'correct answer';
+    color: @answer-label-color;
+    margin-left: -1.25 * @answer-bubble-size;
+    width: 1.25 * @answer-bubble-size;
+    text-align: center;
+    font-size: 1.2rem;
+    // em used here for line-height for compatibility with IE
+    // http://caniuse.com/#feat=rem -- rem ignored in pseudo elements
+    line-height: 1em;
+    margin-top: 0.8rem;
+    .answer-left-block();
+  }
+}
+
+
+&-question {
+
+  .clearfix();
+
+  .detailed-solution {
+    margin-bottom: 1.5rem;
+
+    .header {
+      color: @openstax-neutral-darker;
+      margin-bottom: 0.5rem;
+      .sans(1.3rem, 1.3rem);
+    }
+
+    .solution {
+      color: @openstax-neutral;
+      .sans(1.1rem, 1.1rem);
+      font-style: italic;
+    }
+  }
+
+  img {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+  }
+
+  .question-stem {
+    margin-bottom: 0;
+  }
+
+  .answers-table {
+    margin-bottom: 20px;
+  }
+
+  .instructions {
+    font-size: 1.4rem;
+    font-style: italic;
+    margin-top: 10px;
+
+    i {
+      margin-left: 5px;
+    }
+
+    .text-info{
+      color: @light-blue;
+      padding-left: 5px;
+      cursor: pointer;
+      font-style: normal;
+    }
+
+  }
+
+  .multiple-choice-prompt {
+    font-weight: 600;
+  }
+
+  // free response
+  .free-response {
+    padding: @answer-horizontal-spacing @answer-horizontal-buffer;
+    margin: @answer-vertical-spacing 0 @answer-horizontal-spacing @answer-vertical-spacing;
+    border-left: @answer-horizontal-spacing solid @free-response-background;
+    font-style: italic;
+  }
+
+
+  &:not(.openstax-question-preview) {
+    // answers
+    counter-reset: answer 0;
+
+    .answers-answer {
+      counter-increment: answer 1;
+      width: initial;
+    }
+
+    .answer-content {
+      width: calc(~'100% - @{answer-label-spacing}');
+      margin-left: @answer-horizontal-spacing;
+      margin-top: 0.5 * @answer-horizontal-spacing;
+      .answer-left-block();
+    }
+
+    .answer-letter {
+      .answer-left-block();
+      &::after {
+        content: counter(answer, lower-latin);
+      }
+    }
+
+    .answer-label {
+      font-weight: normal;
+      width: 100%;
+      padding: @answer-vertical-spacing 0 0 0;
+      margin: 0;
+
+      .transition(~'color @{answer-transition}');
+      .answer();
+    }
+
+    // a selectable answer
+    .answer-input-box:not([disabled]) ~ .answer-label {
+      cursor: pointer;
+
+      &:hover {
+        .answer(hover);
+      }
+    }
+
+    // a selected answer
+    &:not(.has-correct-answer){
+      .answer-input-box {
+        display: none;
+
+        &:checked {
+          + .answer-label,
+          + .answer-label:hover {
+            .answer(checked);
+          }
+        }
+      }
+
+      .answer-checked{
+        .answer-label {
+          .answer(checked);
+        }
+      }
+    }
+
+    // answer that has been checked
+    &.has-correct-answer {
+      .answer-checked {
+        &:not(.answer-correct) {
+          .answer-label {
+            .answer(wrong);
+          }
+        }
+
+        &.answer-correct {
+          .answer-label {
+            .answer(correct);
+          }
+        }
+      }
+
+      .answer-correct:not(.answer-checked) {
+        .answer-label {
+          .answer(correct-answer);
+        }
+      }
+    }
+
+    .question-feedback {
+      .popover();
+
+      font-style: italic;
+      color: @answer-label-color;
+
+      position: relative;
+      display: block;
+      width: calc(~'100% + @{feedback-horizontal-buffer}');
+      max-width: calc(~'100% + @{feedback-horizontal-buffer}');
+      margin-left: -1 * @feedback-horizontal-spacing;
+      margin-top: -1 * (@answer-vertical-spacing - @popover-arrow-width/10);
+      margin-bottom: @answer-horizontal-spacing;
+      z-index: 1;
+      .box-shadow(0 0 10px rgba(0, 0, 0, .25));
+      border: none;
+
+      .arrow {
+        &::after {
+          border-width: @popover-arrow-width;
+          content: "";
+        }
+        .popover > .arrow();
+      }
+
+      &.bottom,
+      &.top {
+        > .arrow {
+          left: @answer-bubble-size/2 + @feedback-horizontal-spacing;
+        }
+
+      }
+      &.bottom {
+        margin-top: -5px;
+      }
+      &.top {
+        margin-bottom: -5px;
+      }
+
+      .question-feedback-content {
+        .popover-content();
+        padding: @feedback-vertical-spacing @feedback-horizontal-spacing;
+      }
+    }
+  }
+}
diff --git a/shared/resources/styles/components/smart-overflow.less b/shared/resources/styles/components/smart-overflow.less
new file mode 100644
index 0000000000..9148bdc0e2
--- /dev/null
+++ b/shared/resources/styles/components/smart-overflow.less
@@ -0,0 +1,5 @@
+&-smart-overflow {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: none;
+}
\ No newline at end of file
diff --git a/shared/resources/styles/components/spy-mode.less b/shared/resources/styles/components/spy-mode.less
new file mode 100644
index 0000000000..af9c9a6e42
--- /dev/null
+++ b/shared/resources/styles/components/spy-mode.less
@@ -0,0 +1,30 @@
+&-debug-content {
+
+  &.is-enabled {
+    .debug-toggle-link {
+      color: @openstax-neutral;
+    }
+    .visible-when-debugging {
+      display: block;
+      border: 1px solid;
+      padding: 5px;
+      border-radius: 4px;
+      margin: 5px 0;
+     }
+  }
+
+  .visible-when-debugging {
+    display: none;
+  }
+
+  .debug-toggle-link {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 10; // overlay navbar
+    line-height: 1.5rem;
+    font-size: 1.5rem;
+    color: transparent;
+    &:hover { color: @openstax-neutral; }
+  }
+}
diff --git a/shared/resources/styles/components/surety-guard.less b/shared/resources/styles/components/surety-guard.less
new file mode 100644
index 0000000000..afacb41a6a
--- /dev/null
+++ b/shared/resources/styles/components/surety-guard.less
@@ -0,0 +1,9 @@
+&-surety-guard {
+  .controls {
+    border-top: 1px solid @openstax-neutral-light;
+    display: flex;
+    justify-content: space-around;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+  }
+}
diff --git a/shared/resources/styles/demo.less b/shared/resources/styles/demo.less
new file mode 100644
index 0000000000..b104cf36ad
--- /dev/null
+++ b/shared/resources/styles/demo.less
@@ -0,0 +1,23 @@
+@import "./main";
+
+.demos section {
+  margin-top: 50px;
+}
+
+.demo {
+  margin: 100px 0;
+
+}
+.notices {
+  .test-message {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 500px;
+  }
+}
+
+.exercisePreview-demo, .exercise-demo, .multipartExercise-demo {
+  max-width: 800px;
+  margin: auto;
+}
diff --git a/shared/resources/styles/globals/externals.less b/shared/resources/styles/globals/externals.less
new file mode 100644
index 0000000000..e42a41bf3f
--- /dev/null
+++ b/shared/resources/styles/globals/externals.less
@@ -0,0 +1,2 @@
+@import './openstax-bootstrap';
+@import './font-awesome';
diff --git a/shared/resources/styles/globals/font-awesome.less b/shared/resources/styles/globals/font-awesome.less
new file mode 100644
index 0000000000..7b8718d25b
--- /dev/null
+++ b/shared/resources/styles/globals/font-awesome.less
@@ -0,0 +1,26 @@
+// Import font awesome by individually requiring it's less files
+// This is needed to work around a bug with less variable interpolating url()
+// http://stackoverflow.com/questions/7025031/less-css-url-variable-always-shows-server-base-url-before-variable-output
+
+@import "@{fa-path}less/variables.less";
+@import "@{fa-path}less/mixins.less";
+// path.less is ommited and our own font-face declaration is used
+// our declaration contains a valid path to the files, and ommits
+// legacy font definitions.
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('./@{fa-path}fonts/fontawesome-webfont.eot?v=@{fa-version}');
+  src: url('./@{fa-path}fonts/fontawesome-webfont.woff?v=@{fa-version}'),
+       url('./@{fa-path}fonts/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@import "@{fa-path}less/core.less";
+@import "@{fa-path}less/larger.less";
+@import "@{fa-path}less/fixed-width.less";
+@import "@{fa-path}less/list.less";
+@import "@{fa-path}less/bordered-pulled.less";
+@import "@{fa-path}less/animated.less";
+@import "@{fa-path}less/rotated-flipped.less";
+@import "@{fa-path}less/stacked.less";
+@import "@{fa-path}less/icons.less";
\ No newline at end of file
diff --git a/shared/resources/styles/globals/icons.less b/shared/resources/styles/globals/icons.less
new file mode 100644
index 0000000000..0a1ff51013
--- /dev/null
+++ b/shared/resources/styles/globals/icons.less
@@ -0,0 +1,41 @@
+// # Overview
+//
+// - add `<i class="icon-homework icon-sm" />` tag in the HTML
+//   - Similar to font-awesome icons
+// - use `<span class="icon-stack icon-lg">` for stacking icons
+
+// # Support stacking icons
+//
+// Example:
+//
+// ```html
+// <span class="icon-stack icon-lg">
+//   <i class="icon-lg icon-homework"></i>
+//   <i class="icon-lg icon-correct"></i>
+// </span>
+// ```
+
+.icon-stack {
+  position: relative;
+}
+
+.icon-stack > .icon-sm,
+.icon-stack > .icon-lg {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+// # Icon Classes
+
+.icon-xs  { .x-icon-size(@icon-size-xs); }
+.icon-sm  { .x-icon-size(@icon-size-sm); }
+.icon-md  { .x-icon-size(@icon-size-md); }
+.icon-lg  { .x-icon-size(@icon-size-lg); }
+.icon-xlg { .x-icon-size(@icon-size-xlg); }
+
+.icon-sm.icon-personalized {
+  width: @icon-size-sm * 2;
+  background-size: @icon-size-sm * 2 @icon-size-sm;
+}
diff --git a/shared/resources/styles/globals/maths.less b/shared/resources/styles/globals/maths.less
new file mode 100644
index 0000000000..da0c15ecb2
--- /dev/null
+++ b/shared/resources/styles/globals/maths.less
@@ -0,0 +1,6 @@
+// Math Rendering
+// Hides all data-math elements, but still reserves their space in the DOM.
+// when .MathJax renders them, it'll be inside a .MathJax element which is displayed
+[data-math]:not(.math-rendered) {
+  visibility: hidden;
+}
diff --git a/shared/resources/styles/globals/openstax-bootstrap.less b/shared/resources/styles/globals/openstax-bootstrap.less
new file mode 100644
index 0000000000..0b535c809a
--- /dev/null
+++ b/shared/resources/styles/globals/openstax-bootstrap.less
@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "@{bootstrap-path}/variables";
+@import "@{bootstrap-path}/mixins";
+
+// Reset and dependencies
+@import "@{bootstrap-path}/normalize";
+@import "@{bootstrap-path}/print";
+// @import "@{bootstrap-path}/glyphicons";
+
+// Core CSS
+@import "@{bootstrap-path}/scaffolding";
+@import "@{bootstrap-path}/type";
+@import "@{bootstrap-path}/code";
+@import "@{bootstrap-path}/grid";
+@import "@{bootstrap-path}/tables";
+@import "@{bootstrap-path}/forms";
+@import "@{bootstrap-path}/buttons";
+
+// Components
+@import "@{bootstrap-path}/component-animations";
+@import "@{bootstrap-path}/dropdowns";
+@import "@{bootstrap-path}/button-groups";
+@import "@{bootstrap-path}/input-groups";
+// @import "@{bootstrap-path}/navs";
+// @import "@{bootstrap-path}/navbar";
+// @import "@{bootstrap-path}/breadcrumbs";
+// @import "@{bootstrap-path}/pagination";
+// @import "@{bootstrap-path}/pager";
+// @import "@{bootstrap-path}/labels";
+// @import "@{bootstrap-path}/badges";
+// @import "@{bootstrap-path}/jumbotron";
+// @import "@{bootstrap-path}/thumbnails";
+@import "@{bootstrap-path}/alerts";
+@import "@{bootstrap-path}/progress-bars";
+// @import "@{bootstrap-path}/media";
+@import "@{bootstrap-path}/list-group";
+@import "@{bootstrap-path}/panels";
+@import "@{bootstrap-path}/responsive-embed";
+// @import "@{bootstrap-path}/wells";
+@import "@{bootstrap-path}/close";
+
+// Components w/ JavaScript
+@import "@{bootstrap-path}/modals";
+@import "@{bootstrap-path}/tooltip";
+@import "@{bootstrap-path}/popovers";
+// @import "@{bootstrap-path}/carousel";
+
+// Utility classes
+@import "@{bootstrap-path}/utilities";
+@import "@{bootstrap-path}/responsive-utilities";
diff --git a/shared/resources/styles/main.less b/shared/resources/styles/main.less
new file mode 100644
index 0000000000..8776fbb438
--- /dev/null
+++ b/shared/resources/styles/main.less
@@ -0,0 +1,22 @@
+// External Libraries
+@import './variables/paths';
+@import './globals/externals';
+@import './globals/maths';
+
+@import './variables/index';
+@import './variables/colors';
+@import './variables/openstax-bootstrap';
+@import './mixins/index';
+
+@import './components/pinned-header-footer-card/index';
+@import './components/pinned-header-footer-card/sections';
+
+.openstax {
+  @import './_components';
+
+  &-wrapper {
+    @import './components/breadcrumbs/index';
+    @import './components/breadcrumbs/icons';
+    @import './globals/icons';
+  }
+}
diff --git a/shared/resources/styles/mixins/flexbox.less b/shared/resources/styles/mixins/flexbox.less
new file mode 100644
index 0000000000..2ae1fb416b
--- /dev/null
+++ b/shared/resources/styles/mixins/flexbox.less
@@ -0,0 +1,137 @@
+// --------------------------------------------------
+// Flexbox LESS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+
+// Flexbox display
+// flex or inline-flex
+.flex-display(@display: flex) {
+  display: ~"-webkit-@{display}";
+  display: ~"-moz-@{display}";
+  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display: ~"-ms-@{display}"; // IE11
+  display: @display;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+  -webkit-flex: @columns;
+     -moz-flex: @columns;
+      -ms-flex: @columns;
+          flex: @columns;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+.flex-direction(@direction: row) {
+  -webkit-flex-direction: @direction;
+     -moz-flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+.flex-wrap(@wrap: nowrap) {
+  -webkit-flex-wrap: @wrap;
+     -moz-flex-wrap: @wrap;
+      -ms-flex-wrap: @wrap;
+          flex-wrap: @wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+.flex-flow(@flow) {
+  -webkit-flex-flow: @flow;
+     -moz-flex-flow: @flow;
+      -ms-flex-flow: @flow;
+          flex-flow: @flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+.flex-order(@order: 0) {
+  -webkit-order: @order;
+     -moz-order: @order;
+      -ms-order: @order;
+          order: @order;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+.flex-grow(@grow: 0) {
+  -webkit-flex-grow: @grow;
+     -moz-flex-grow: @grow;
+      -ms-flex-grow: @grow;
+          flex-grow: @grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+.flex-shrink(@shrink: 1) {
+  -webkit-flex-shrink: @shrink;
+     -moz-flex-shrink: @shrink;
+      -ms-flex-shrink: @shrink;
+          flex-shrink: @shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+.flex-basis(@width: auto) {
+  -webkit-flex-basis: @width;
+     -moz-flex-basis: @width;
+      -ms-flex-basis: @width;
+          flex-basis: @width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+.justify-content(@justify: flex-start) {
+  -webkit-justify-content: @justify;
+     -moz-justify-content: @justify;
+            -ms-flex-pack: @justify; // IE 10
+      -ms-justify-content: @justify;
+          justify-content: @justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+.align-content(@align: stretch) {
+  -webkit-align-content: @align;
+     -moz-align-content: @align;
+      -ms-align-content: @align;
+          align-content: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+.align-items(@align: stretch) {
+  -webkit-align-items: @align;
+     -moz-align-items: @align;
+       -ms-flex-align: @align; // IE 10
+      -ms-align-items: @align;
+          align-items: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+.align-self(@align: auto) {
+  -webkit-align-self: @align;
+     -moz-align-self: @align;
+      -ms-align-self: @align;
+          align-self: @align;
+}
diff --git a/shared/resources/styles/mixins/icon.less b/shared/resources/styles/mixins/icon.less
new file mode 100644
index 0000000000..e52a2b0823
--- /dev/null
+++ b/shared/resources/styles/mixins/icon.less
@@ -0,0 +1,52 @@
+@icon-path: '../../images/icons';
+@icon-size-xs: 1rem;
+@icon-size-sm: @icon-size-xs * 1.6;
+@icon-size-md: @icon-size-xs * 2;
+@icon-size-lg: @icon-size-xs * 4;
+@icon-size-xlg: @icon-size-xs * 6;
+
+.x-icon-size(@size) {
+  display: inline-block;
+  width: @size;
+  height: @size;
+  background-size: @size @size;
+  background-repeat: no-repeat;
+  background-position: center;
+  .transition(~"transform .1s ease-in-out, margin .3s ease-in-out");
+}
+
+.x-course-icon-bg(@name; @selector: @name) {
+  // default to high-school icons
+  .icon-@{selector} { background-image: url("@{icon-path}/@{name}-hs-icon.svg"); }
+  &.is-high-school {
+    .icon-@{selector} { background-image: url("@{icon-path}/@{name}-hs-icon.svg"); }
+  }
+  &.is-college {
+    .icon-@{selector} { background-image: url("@{icon-path}/@{name}-cl-icon.svg"); }
+  }
+}
+
+// x-icon-bg defaults to hs icons
+.x-icon-bg(@name; @course_type: 'hs') {
+  background-image: url("@{icon-path}/@{name}-@{course_type}-icon.svg");
+}
+
+.openstax-icon-active(@scale: 1.4; @shadow: 0.12) {
+  .scale(@scale);
+  .box-shadow(0 1px 6px rgba(0, 0, 0, @shadow));
+  border-radius: 50%;
+}
+
+.crumb-circle(@radius){
+  font-size: @radius;
+  border-radius: 2 * @radius;
+  line-height: 2 * @radius;
+  min-width: 2 * @radius;
+}
+
+.crumb-text(){
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  left: 0;
+}
diff --git a/shared/resources/styles/mixins/index.less b/shared/resources/styles/mixins/index.less
new file mode 100644
index 0000000000..07ede6e5ac
--- /dev/null
+++ b/shared/resources/styles/mixins/index.less
@@ -0,0 +1,109 @@
+@import './flexbox';
+@import './icon';
+
+
+.openstax-tables() {
+  table {
+    width: 100%;
+    margin-bottom: 32px;
+
+    padding: 20px 0;
+    line-height: 2.5rem;
+    thead {
+      th {
+        padding: 8px 10px;
+        border-bottom: solid 2px @openstax-neutral-light;
+      }
+      tr:first-of-type:not(:last-child) th {
+        padding-left: 0;
+      }
+    }
+    tr:nth-child(odd) {
+       background: @openstax-neutral-lightest;
+     }
+    tr:nth-child(even) {
+       background: @openstax-white;
+     }
+    td {
+      padding: 8px 10px;
+    }
+    tbody {
+      border-top: solid 4px @openstax-neutral-light;
+    }
+    caption,
+    thead tr:first-of-type:not(:last-child) th{
+      background: @openstax-white;
+
+     font-weight: 900;
+     color: @openstax-neutral-darker;
+    }
+  }
+}
+
+.openstax-tables(@table-header, @table-bottom-color) {
+  table {
+    thead {
+      th {
+        background: @table-header;
+      }
+    }
+    tbody {
+      border-bottom: solid 4px @table-bottom-color;
+    }
+  }
+}
+
+.fixed-bar() {
+  left: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+}
+
+.sans(@size: 1.5rem, @line-height: 3rem) {
+  font-family: 'Lato', Helvetica, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: @size;
+  line-height: @line-height;
+}
+
+.make-shy() {
+  .transform-origin(0 0);
+  .translate(0, -@openstax-navbar-height);
+}
+
+.make-shy-animate() {
+  .transition(transform 0.2s ease-out);
+}
+
+.exercise-typography() {
+  font-size: 1.8rem;
+  line-height: 1.68em;
+}
+
+.openstax-disable-text-select() {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
+// limit an element's height to max-height and display a gradient at the bottom
+.height-limited-panel(@max-height: 150px){
+  position: relative;
+  max-height: @max-height;
+  overflow: hidden;
+  &:after {
+    content: '';
+    width: 100%;
+    height: 150px;
+    position: absolute;
+    left: 0;
+    top: @max-height - 150px;
+    background: linear-gradient(to top, white, white 10%, rgba(255,255,255,0));
+  }
+}
diff --git a/shared/resources/styles/no-conflict.less b/shared/resources/styles/no-conflict.less
new file mode 100644
index 0000000000..044f621c72
--- /dev/null
+++ b/shared/resources/styles/no-conflict.less
@@ -0,0 +1,21 @@
+@import './variables/paths';
+
+@import './variables/index';
+@import './variables/colors';
+@import './variables/openstax-bootstrap';
+@import './mixins/index';
+
+@import "@{bootstrap-path}/mixins";
+@import "@{fa-path}less/variables.less";
+@import "@{fa-path}less/mixins.less";
+
+.openstax {
+  @import "@{bootstrap-path}/popovers";
+  @import './_components';
+
+  &-wrapper {
+    @import './components/breadcrumbs/index';
+    @import './components/breadcrumbs/icons';
+    @import './globals/icons';
+  }
+}
diff --git a/shared/resources/styles/variables/colors.less b/shared/resources/styles/variables/colors.less
new file mode 100644
index 0000000000..656f418bd4
--- /dev/null
+++ b/shared/resources/styles/variables/colors.less
@@ -0,0 +1,64 @@
+@orange: rgb(244, 118, 65);
+@green: rgb(119, 175, 65);
+@dark-blue: rgb(35, 48, 102);
+@yellow: rgb(244, 208, 25);
+
+@pale-yellow: rgb(255, 255, 187);
+@light-green: rgb(139, 199, 83);
+@light-blue: rgb(0, 193, 222);
+
+@red: rgb(194, 0, 47);
+@white: rgb(255, 255, 255);
+@black: rgb(0, 0, 0);
+
+
+@openstax-primary: @orange;
+@openstax-secondary: @green;
+@openstax-tertiary: @dark-blue;
+@openstax-quaternary: @yellow;
+@openstax-highlight: @pale-yellow;
+
+@openstax-secondary-light: @light-green;
+@openstax-tertiary-light: @light-blue;
+
+@openstax-success: @openstax-secondary;
+@openstax-info: @openstax-tertiary-light;
+@openstax-info-bg: lighten(@openstax-info, 53%); // even lighter blue
+@openstax-warning: @openstax-quaternary;
+@openstax-danger: @red; // red
+
+@reading-color: @openstax-quaternary;
+@homework-color: @openstax-tertiary-light;
+@external-color: @openstax-tertiary;
+@event-color: @openstax-secondary;
+@extras-color: @openstax-primary;
+
+@openstax-correct-color: @openstax-success;
+@openstax-correct-background: lighten(saturate(@openstax-success, 60%), 38%);
+@openstax-incorrect-color: @openstax-danger;
+@openstax-incorrect-background: lighten(@openstax-danger, 55%);
+@openstax-answer-background: @openstax-info-bg;
+@openstax-answer-color: @openstax-tertiary-light; // darker than hover
+
+@openstax-white: @white;
+@openstax-neutral-lightest: rgb(249, 249, 249); // nearly white
+@openstax-neutral-bright: rgb(245, 245, 245); // bright gray
+@openstax-neutral-lighter: rgb(241, 241, 241); // light gray
+@openstax-neutral-light: rgb(229, 229, 229); // light gray
+@openstax-neutral-medium: rgb(160, 160, 160); // light gray
+@openstax-neutral: rgb(129, 129, 129); // gray
+@openstax-neutral-dark: rgb(95, 97, 99); // dark gray
+@openstax-neutral-darker: rgb(66, 66, 66); // very dark gray
+@openstax-black: @black;
+
+@page-background: @openstax-neutral-lighter;
+@footer-background: @openstax-neutral-bright;
+@border-color: @openstax-neutral-light;
+
+@form-error-color: #E35C3B;
+
+@link-color: darken(@openstax-info, 5%);
+@exercise-question-uid-color: lighten(@openstax-neutral,20%);
+
+// NOTE: Make borders and input background colors one of the above grays with a high opacity so it works on
+//       multiple backgrounds.
diff --git a/shared/resources/styles/variables/index.less b/shared/resources/styles/variables/index.less
new file mode 100644
index 0000000000..069fccba77
--- /dev/null
+++ b/shared/resources/styles/variables/index.less
@@ -0,0 +1,4 @@
+@placeholder-selector: ~'::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder';
+
+@openstax-navbar-height: 61px;
+@openstax-navbar-padding-horizontal: 4rem;
diff --git a/shared/resources/styles/variables/openstax-bootstrap.less b/shared/resources/styles/variables/openstax-bootstrap.less
new file mode 100644
index 0000000000..69c2053024
--- /dev/null
+++ b/shared/resources/styles/variables/openstax-bootstrap.less
@@ -0,0 +1,865 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+@gray-base:              @openstax-black;
+@gray-darker:            @openstax-neutral-darker; // #222
+@gray-dark:              @openstax-neutral-dark;   // #333
+@gray:                   @openstax-neutral; // #555
+@gray-light:             @openstax-neutral-light; // #777
+@gray-lighter:           @openstax-neutral-lighter; // #eee
+
+@brand-primary:         @openstax-primary; // openstax-primary, orange
+@brand-success:         @openstax-success; // openstax-secondary, green
+@brand-info:            @openstax-info;    // openstax-tertiary-light, light blue-ish
+@brand-warning:         @openstax-warning; // openstax-quaternary, yellow
+@brand-danger:          @openstax-danger;  // openstax-danger, red
+
+@state-info-bg:         @openstax-info-bg;
+// @container-large-desktop:      (1200px + @grid-gutter-width);
+
+@link-hover-color:      darken(@link-color, 5%);
+
+
+@popover-max-width:                   none;
+// //== Scaffolding
+// //
+// //## Settings for some of the most global styles.
+
+// //** Background color for `<body>`.
+// @body-bg:               #fff;
+// //** Global text color on `<body>`.
+// @text-color:            @gray-dark;
+
+// //** Global textual link color.
+// @link-color:            @brand-primary;
+// //** Link hover color set via `darken()` function.
+// //** Link hover decoration.
+// @link-hover-decoration: underline;
+
+
+// //== Typography
+// //
+// //## Font, line-height, and color for body text, headings, and more.
+
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+// @font-family-serif:       Georgia, "Times New Roman", Times, serif;
+// //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+// @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          14px;
+// @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+// @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+// @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+// @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+// @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+// @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+// @font-size-h5:            @font-size-base;
+// @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+// //** Unit-less `line-height` for use in components like buttons.
+@line-height-base:        1.428571429; // 20/14
+// //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+// @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+// //** By default, this inherits from the `<body>`.
+// @headings-font-family:    inherit;
+// @headings-font-weight:    500;
+// @headings-line-height:    1.1;
+// @headings-color:          inherit;
+
+
+// //== Iconography
+// //
+// //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+// //** Load fonts from this directory.
+// @icon-font-path:          "../fonts/";
+// //** File name for all font files.
+// @icon-font-name:          "glyphicons-halflings-regular";
+// //** Element ID within SVG icon file.
+// @icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+// //== Components
+// //
+// //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+// @padding-base-vertical:     6px;
+// @padding-base-horizontal:   12px;
+
+// @padding-large-vertical:    10px;
+// @padding-large-horizontal:  16px;
+
+// @padding-small-vertical:    5px;
+// @padding-small-horizontal:  10px;
+
+// @padding-xs-vertical:       1px;
+// @padding-xs-horizontal:     5px;
+
+// @line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+// @line-height-small:         1.5;
+
+// @border-radius-base:        4px;
+@border-radius-large:       6px;
+// @border-radius-small:       3px;
+
+// //** Global color for active items (e.g., navs or dropdowns).
+// @component-active-color:    #fff;
+// //** Global background color for active items (e.g., navs or dropdowns).
+// @component-active-bg:       @brand-primary;
+
+// //** Width of the `border` for generating carets that indicator dropdowns.
+// @caret-width-base:          4px;
+// //** Carets increase slightly in size for larger components.
+// @caret-width-large:         5px;
+
+
+// //== Tables
+// //
+// //## Customizes the `.table` component with basic values, each used across all table variations.
+
+// //** Padding for `<th>`s and `<td>`s.
+// @table-cell-padding:            8px;
+// //** Padding for cells in `.table-condensed`.
+// @table-condensed-cell-padding:  5px;
+
+// //** Default background color used for all tables.
+// @table-bg:                      transparent;
+// //** Background color used for `.table-striped`.
+// @table-bg-accent:               #f9f9f9;
+// //** Background color used for `.table-hover`.
+// @table-bg-hover:                #f5f5f5;
+// @table-bg-active:               @table-bg-hover;
+
+// //** Border color for table and cell borders.
+// @table-border-color:            #ddd;
+
+
+// //== Buttons
+// //
+// //## For each of Bootstrap's buttons, define text, background and border color.
+
+// @btn-font-weight:                normal;
+
+// @btn-default-color:              #333;
+// @btn-default-bg:                 #fff;
+// @btn-default-border:             #ccc;
+
+// @btn-primary-color:              #fff;
+// @btn-primary-bg:                 @brand-primary;
+// @btn-primary-border:             darken(@btn-primary-bg, 5%);
+
+// @btn-success-color:              #fff;
+// @btn-success-bg:                 @brand-success;
+// @btn-success-border:             darken(@btn-success-bg, 5%);
+
+// @btn-info-color:                 #fff;
+// @btn-info-bg:                    @brand-info;
+// @btn-info-border:                darken(@btn-info-bg, 5%);
+
+// @btn-warning-color:              #fff;
+// @btn-warning-bg:                 @brand-warning;
+// @btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+// @btn-danger-color:               #fff;
+// @btn-danger-bg:                  @brand-danger;
+// @btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+// @btn-link-disabled-color:        @gray-light;
+
+
+// //== Forms
+// //
+// //##
+
+// //** `<input>` background color
+// @input-bg:                       #fff;
+// //** `<input disabled>` background color
+// @input-bg-disabled:              @gray-lighter;
+
+// //** Text color for `<input>`s
+// @input-color:                    @gray;
+// //** `<input>` border color
+// @input-border:                   #ccc;
+
+// // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+// //** Default `.form-control` border radius
+// // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+// @input-border-radius:            @border-radius-base;
+// //** Large `.form-control` border radius
+// @input-border-radius-large:      @border-radius-large;
+// //** Small `.form-control` border radius
+// @input-border-radius-small:      @border-radius-small;
+
+// //** Border color for inputs on focus
+// @input-border-focus:             #66afe9;
+
+// //** Placeholder text color
+// @input-color-placeholder:        #999;
+
+// //** Default `.form-control` height
+// @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+// //** Large `.form-control` height
+// @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+// //** Small `.form-control` height
+// @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+// //** `.form-group` margin
+// @form-group-margin-bottom:       15px;
+
+// @legend-color:                   @gray-dark;
+// @legend-border-color:            #e5e5e5;
+
+// //** Background color for textual input addons
+// @input-group-addon-bg:           @gray-lighter;
+// //** Border color for textual input addons
+// @input-group-addon-border-color: @input-border;
+
+// //** Disabled cursor for form controls and buttons.
+// @cursor-disabled:                not-allowed;
+
+
+// //== Dropdowns
+// //
+// //## Dropdown menu container and contents.
+
+// //** Background for the dropdown menu.
+// @dropdown-bg:                    #fff;
+// //** Dropdown menu `border-color`.
+// @dropdown-border:                rgba(0,0,0,.15);
+// //** Dropdown menu `border-color` **for IE8**.
+// @dropdown-fallback-border:       #ccc;
+// //** Divider color for between dropdown items.
+// @dropdown-divider-bg:            #e5e5e5;
+
+// //** Dropdown link text color.
+// @dropdown-link-color:            @gray-dark;
+// //** Hover color for dropdown links.
+// @dropdown-link-hover-color:      darken(@gray-dark, 5%);
+// //** Hover background for dropdown links.
+// @dropdown-link-hover-bg:         #f5f5f5;
+
+// //** Active dropdown menu item text color.
+// @dropdown-link-active-color:     @component-active-color;
+// //** Active dropdown menu item background color.
+// @dropdown-link-active-bg:        @component-active-bg;
+
+// //** Disabled dropdown menu item background color.
+// @dropdown-link-disabled-color:   @gray-light;
+
+// //** Text color for headers within dropdown menus.
+// @dropdown-header-color:          @gray-light;
+
+// //** Deprecated `@dropdown-caret-color` as of v3.1.0
+// @dropdown-caret-color:           #000;
+
+
+// //-- Z-index master list
+// //
+// // Warning: Avoid customizing these values. They're used for a bird's eye view
+// // of components dependent on the z-axis and are designed to all work together.
+// //
+// // Note: These variables are not generated into the Customizer.
+
+// @zindex-navbar:            1000;
+// @zindex-dropdown:          1000;
+@zindex-popover:           1060;
+// @zindex-tooltip:           1070;
+// @zindex-navbar-fixed:      1030;
+// @zindex-modal-background:  1040;
+// @zindex-modal:             1050;
+
+
+// //== Media queries breakpoints
+// //
+// //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// // Extra small screen / phone
+// //** Deprecated `@screen-xs` as of v3.0.1
+// @screen-xs:                  480px;
+// //** Deprecated `@screen-xs-min` as of v3.2.0
+// @screen-xs-min:              @screen-xs;
+// //** Deprecated `@screen-phone` as of v3.0.1
+// @screen-phone:               @screen-xs-min;
+
+// // Small screen / tablet
+// //** Deprecated `@screen-sm` as of v3.0.1
+// @screen-sm:                  768px;
+// @screen-sm-min:              @screen-sm;
+// //** Deprecated `@screen-tablet` as of v3.0.1
+// @screen-tablet:              @screen-sm-min;
+
+// // Medium screen / desktop
+// //** Deprecated `@screen-md` as of v3.0.1
+// @screen-md:                  992px;
+// @screen-md-min:              @screen-md;
+// //** Deprecated `@screen-desktop` as of v3.0.1
+// @screen-desktop:             @screen-md-min;
+
+// // Large screen / wide desktop
+// //** Deprecated `@screen-lg` as of v3.0.1
+// @screen-lg:                  1200px;
+// @screen-lg-min:              @screen-lg;
+// //** Deprecated `@screen-lg-desktop` as of v3.0.1
+// @screen-lg-desktop:          @screen-lg-min;
+
+// // So media queries don't overlap when required, provide a maximum
+// @screen-xs-max:              (@screen-sm-min - 1);
+// @screen-sm-max:              (@screen-md-min - 1);
+// @screen-md-max:              (@screen-lg-min - 1);
+
+
+// //== Grid system
+// //
+// //## Define your custom responsive grid.
+
+// //** Number of columns in the grid.
+// @grid-columns:              12;
+// //** Padding between columns. Gets divided in half for the left and right.
+// @grid-gutter-width:         30px;
+// // Navbar collapse
+// //** Point at which the navbar becomes uncollapsed.
+// @grid-float-breakpoint:     @screen-sm-min;
+// //** Point at which the navbar begins collapsing.
+// @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+// //== Container sizes
+// //
+// //## Define the maximum width of `.container` for different screen sizes.
+
+// // Small screen / tablet
+// @container-tablet:             (720px + @grid-gutter-width);
+// //** For `@screen-sm-min` and up.
+// @container-sm:                 @container-tablet;
+
+// // Medium screen / desktop
+// @container-desktop:            (940px + @grid-gutter-width);
+// //** For `@screen-md-min` and up.
+// @container-md:                 @container-desktop;
+
+// // Large screen / wide desktop
+// //** For `@screen-lg-min` and up.
+// @container-lg:                 @container-large-desktop;
+
+
+// //== Navbar
+// //
+// //##
+
+// // Basics of a navbar
+// @navbar-height:                    50px;
+// @navbar-margin-bottom:             @line-height-computed;
+// @navbar-border-radius:             @border-radius-base;
+// @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+// @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+// @navbar-collapse-max-height:       340px;
+
+// @navbar-default-color:             #777;
+// @navbar-default-bg:                #f8f8f8;
+// @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// // Navbar links
+// @navbar-default-link-color:                #777;
+// @navbar-default-link-hover-color:          #333;
+// @navbar-default-link-hover-bg:             transparent;
+// @navbar-default-link-active-color:         #555;
+// @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+// @navbar-default-link-disabled-color:       #ccc;
+// @navbar-default-link-disabled-bg:          transparent;
+
+// // Navbar brand label
+// @navbar-default-brand-color:               @navbar-default-link-color;
+// @navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+// @navbar-default-brand-hover-bg:            transparent;
+
+// // Navbar toggle
+// @navbar-default-toggle-hover-bg:           #ddd;
+// @navbar-default-toggle-icon-bar-bg:        #888;
+// @navbar-default-toggle-border-color:       #ddd;
+
+
+// // Inverted navbar
+// // Reset inverted navbar basics
+// @navbar-inverse-color:                      lighten(@gray-light, 15%);
+// @navbar-inverse-bg:                         #222;
+// @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// // Inverted navbar links
+// @navbar-inverse-link-color:                 lighten(@gray-light, 15%);
+// @navbar-inverse-link-hover-color:           #fff;
+// @navbar-inverse-link-hover-bg:              transparent;
+// @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+// @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+// @navbar-inverse-link-disabled-color:        #444;
+// @navbar-inverse-link-disabled-bg:           transparent;
+
+// // Inverted navbar brand label
+// @navbar-inverse-brand-color:                @navbar-inverse-link-color;
+// @navbar-inverse-brand-hover-color:          #fff;
+// @navbar-inverse-brand-hover-bg:             transparent;
+
+// // Inverted navbar toggle
+// @navbar-inverse-toggle-hover-bg:            #333;
+// @navbar-inverse-toggle-icon-bar-bg:         #fff;
+// @navbar-inverse-toggle-border-color:        #333;
+
+
+// //== Navs
+// //
+// //##
+
+// //=== Shared nav styles
+// @nav-link-padding:                          10px 15px;
+// @nav-link-hover-bg:                         @gray-lighter;
+
+// @nav-disabled-link-color:                   @gray-light;
+// @nav-disabled-link-hover-color:             @gray-light;
+
+// //== Tabs
+// @nav-tabs-border-color:                     #ddd;
+
+// @nav-tabs-link-hover-border-color:          @gray-lighter;
+
+// @nav-tabs-active-link-hover-bg:             @body-bg;
+// @nav-tabs-active-link-hover-color:          @gray;
+// @nav-tabs-active-link-hover-border-color:   #ddd;
+
+// @nav-tabs-justified-link-border-color:            #ddd;
+// @nav-tabs-justified-active-link-border-color:     @body-bg;
+
+// //== Pills
+// @nav-pills-border-radius:                   @border-radius-base;
+// @nav-pills-active-link-hover-bg:            @component-active-bg;
+// @nav-pills-active-link-hover-color:         @component-active-color;
+
+
+// //== Pagination
+// //
+// //##
+
+// @pagination-color:                     @link-color;
+// @pagination-bg:                        #fff;
+// @pagination-border:                    #ddd;
+
+// @pagination-hover-color:               @link-hover-color;
+// @pagination-hover-bg:                  @gray-lighter;
+// @pagination-hover-border:              #ddd;
+
+// @pagination-active-color:              #fff;
+// @pagination-active-bg:                 @brand-primary;
+// @pagination-active-border:             @brand-primary;
+
+// @pagination-disabled-color:            @gray-light;
+// @pagination-disabled-bg:               #fff;
+// @pagination-disabled-border:           #ddd;
+
+
+// //== Pager
+// //
+// //##
+
+// @pager-bg:                             @pagination-bg;
+// @pager-border:                         @pagination-border;
+// @pager-border-radius:                  15px;
+
+// @pager-hover-bg:                       @pagination-hover-bg;
+
+// @pager-active-bg:                      @pagination-active-bg;
+// @pager-active-color:                   @pagination-active-color;
+
+// @pager-disabled-color:                 @pagination-disabled-color;
+
+
+// //== Jumbotron
+// //
+// //##
+
+// @jumbotron-padding:              30px;
+// @jumbotron-color:                inherit;
+// @jumbotron-bg:                   @gray-lighter;
+// @jumbotron-heading-color:        inherit;
+// @jumbotron-font-size:            ceil((@font-size-base * 1.5));
+
+
+// //== Form states and alerts
+// //
+// //## Define colors for form feedback states and, by default, alerts.
+
+// @state-success-text:             #3c763d;
+// @state-success-bg:               #dff0d8;
+// @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+// @state-info-text:                #31708f;
+// @state-info-bg:                  #d9edf7;
+// @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+// @state-warning-text:             #8a6d3b;
+// @state-warning-bg:               #fcf8e3;
+// @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+// @state-danger-text:              #a94442;
+// @state-danger-bg:                #f2dede;
+// @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+// //== Tooltips
+// //
+// //##
+
+// //** Tooltip max width
+// @tooltip-max-width:           200px;
+// //** Tooltip text color
+// @tooltip-color:               #fff;
+// //** Tooltip background color
+// @tooltip-bg:                  #000;
+// @tooltip-opacity:             .9;
+
+// //** Tooltip arrow width
+// @tooltip-arrow-width:         5px;
+// //** Tooltip arrow color
+// @tooltip-arrow-color:         @tooltip-bg;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg:                          #fff;
+//** Popover maximum width
+@popover-max-width:                   276px;
+//** Popover border color
+@popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color:       #ccc;
+
+//** Popover title background color
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width:                 10px;
+//** Popover arrow color
+@popover-arrow-color:                 @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
+
+
+// //== Labels
+// //
+// //##
+
+// //** Default label background color
+// @label-default-bg:            @gray-light;
+// //** Primary label background color
+// @label-primary-bg:            @brand-primary;
+// //** Success label background color
+// @label-success-bg:            @brand-success;
+// //** Info label background color
+// @label-info-bg:               @brand-info;
+// //** Warning label background color
+// @label-warning-bg:            @brand-warning;
+// //** Danger label background color
+// @label-danger-bg:             @brand-danger;
+
+// //** Default label text color
+// @label-color:                 #fff;
+// //** Default text color of a linked label
+// @label-link-hover-color:      #fff;
+
+
+// //== Modals
+// //
+// //##
+
+// //** Padding applied to the modal body
+// @modal-inner-padding:         15px;
+
+// //** Padding applied to the modal title
+// @modal-title-padding:         15px;
+// //** Modal title line-height
+// @modal-title-line-height:     @line-height-base;
+
+// //** Background color of modal content area
+// @modal-content-bg:                             #fff;
+// //** Modal content border color
+// @modal-content-border-color:                   rgba(0,0,0,.2);
+// //** Modal content border color **for IE8**
+// @modal-content-fallback-border-color:          #999;
+
+// //** Modal backdrop background color
+// @modal-backdrop-bg:           #000;
+// //** Modal backdrop opacity
+// @modal-backdrop-opacity:      .5;
+// //** Modal header border color
+// @modal-header-border-color:   #e5e5e5;
+// //** Modal footer border color
+// @modal-footer-border-color:   @modal-header-border-color;
+
+// @modal-lg:                    900px;
+// @modal-md:                    600px;
+// @modal-sm:                    300px;
+
+
+// //== Alerts
+// //
+// //## Define alert colors, border radius, and padding.
+
+// @alert-padding:               15px;
+// @alert-border-radius:         @border-radius-base;
+// @alert-link-font-weight:      bold;
+
+// @alert-success-bg:            @state-success-bg;
+// @alert-success-text:          @state-success-text;
+// @alert-success-border:        @state-success-border;
+
+// @alert-info-bg:               @state-info-bg;
+// @alert-info-text:             @state-info-text;
+// @alert-info-border:           @state-info-border;
+
+// @alert-warning-bg:            @state-warning-bg;
+// @alert-warning-text:          @state-warning-text;
+// @alert-warning-border:        @state-warning-border;
+
+// @alert-danger-bg:             @state-danger-bg;
+// @alert-danger-text:           @state-danger-text;
+// @alert-danger-border:         @state-danger-border;
+
+
+// //== Progress bars
+// //
+// //##
+
+// //** Background color of the whole progress component
+// @progress-bg:                 #f5f5f5;
+// //** Progress bar text color
+// @progress-bar-color:          #fff;
+// //** Variable for setting rounded corners on progress bar.
+// @progress-border-radius:      @border-radius-base;
+
+// //** Default progress bar color
+// @progress-bar-bg:             @brand-primary;
+// //** Success progress bar color
+// @progress-bar-success-bg:     @brand-success;
+// //** Warning progress bar color
+// @progress-bar-warning-bg:     @brand-warning;
+// //** Danger progress bar color
+// @progress-bar-danger-bg:      @brand-danger;
+// //** Info progress bar color
+// @progress-bar-info-bg:        @brand-info;
+
+
+// //== List group
+// //
+// //##
+
+// //** Background color on `.list-group-item`
+// @list-group-bg:                 #fff;
+// //** `.list-group-item` border color
+// @list-group-border:             #ddd;
+// //** List group border radius
+// @list-group-border-radius:      @border-radius-base;
+
+// //** Background color of single list items on hover
+// @list-group-hover-bg:           #f5f5f5;
+// //** Text color of active list items
+// @list-group-active-color:       @component-active-color;
+// //** Background color of active list items
+// @list-group-active-bg:          @component-active-bg;
+// //** Border color of active list elements
+// @list-group-active-border:      @list-group-active-bg;
+// //** Text color for content within active list items
+// @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+// //** Text color of disabled list items
+// @list-group-disabled-color:      @gray-light;
+// //** Background color of disabled list items
+// @list-group-disabled-bg:         @gray-lighter;
+// //** Text color for content within disabled list items
+// @list-group-disabled-text-color: @list-group-disabled-color;
+
+// @list-group-link-color:         #555;
+// @list-group-link-hover-color:   @list-group-link-color;
+// @list-group-link-heading-color: #333;
+
+
+// //== Panels
+// //
+// //##
+
+// @panel-bg:                    #fff;
+// @panel-body-padding:          15px;
+// @panel-heading-padding:       10px 15px;
+// @panel-footer-padding:        @panel-heading-padding;
+// @panel-border-radius:         @border-radius-base;
+
+// //** Border color for elements within panels
+// @panel-inner-border:          #ddd;
+// @panel-footer-bg:             #f5f5f5;
+
+// @panel-default-text:          @gray-dark;
+// @panel-default-border:        #ddd;
+// @panel-default-heading-bg:    #f5f5f5;
+
+// @panel-primary-text:          #fff;
+// @panel-primary-border:        @brand-primary;
+// @panel-primary-heading-bg:    @brand-primary;
+
+// @panel-success-text:          @state-success-text;
+// @panel-success-border:        @state-success-border;
+// @panel-success-heading-bg:    @state-success-bg;
+
+// @panel-info-text:             @state-info-text;
+// @panel-info-border:           @state-info-border;
+// @panel-info-heading-bg:       @state-info-bg;
+
+// @panel-warning-text:          @state-warning-text;
+// @panel-warning-border:        @state-warning-border;
+// @panel-warning-heading-bg:    @state-warning-bg;
+
+// @panel-danger-text:           @state-danger-text;
+// @panel-danger-border:         @state-danger-border;
+// @panel-danger-heading-bg:     @state-danger-bg;
+
+
+// //== Thumbnails
+// //
+// //##
+
+// //** Padding around the thumbnail image
+// @thumbnail-padding:           4px;
+// //** Thumbnail background color
+// @thumbnail-bg:                @body-bg;
+// //** Thumbnail border color
+// @thumbnail-border:            #ddd;
+// //** Thumbnail border radius
+// @thumbnail-border-radius:     @border-radius-base;
+
+// //** Custom text color for thumbnail captions
+// @thumbnail-caption-color:     @text-color;
+// //** Padding around the thumbnail caption
+// @thumbnail-caption-padding:   9px;
+
+
+// //== Wells
+// //
+// //##
+
+// @well-bg:                     #f5f5f5;
+// @well-border:                 darken(@well-bg, 7%);
+
+
+// //== Badges
+// //
+// //##
+
+// @badge-color:                 #fff;
+// //** Linked badge text color on hover
+// @badge-link-hover-color:      #fff;
+// @badge-bg:                    @gray-light;
+
+// //** Badge text color in active nav link
+// @badge-active-color:          @link-color;
+// //** Badge background color in active nav link
+// @badge-active-bg:             #fff;
+
+// @badge-font-weight:           bold;
+// @badge-line-height:           1;
+// @badge-border-radius:         10px;
+
+
+// //== Breadcrumbs
+// //
+// //##
+
+// @breadcrumb-padding-vertical:   8px;
+// @breadcrumb-padding-horizontal: 15px;
+// //** Breadcrumb background color
+// @breadcrumb-bg:                 #f5f5f5;
+// //** Breadcrumb text color
+// @breadcrumb-color:              #ccc;
+// //** Text color of current page in the breadcrumb
+// @breadcrumb-active-color:       @gray-light;
+// //** Textual separator for between breadcrumb elements
+// @breadcrumb-separator:          "/";
+
+
+// //== Carousel
+// //
+// //##
+
+// @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+// @carousel-control-color:                      #fff;
+// @carousel-control-width:                      15%;
+// @carousel-control-opacity:                    .5;
+// @carousel-control-font-size:                  20px;
+
+// @carousel-indicator-active-bg:                #fff;
+// @carousel-indicator-border-color:             #fff;
+
+// @carousel-caption-color:                      #fff;
+
+
+// //== Close
+// //
+// //##
+
+// @close-font-weight:           bold;
+// @close-color:                 #000;
+// @close-text-shadow:           0 1px 0 #fff;
+
+
+// //== Code
+// //
+// //##
+
+// @code-color:                  #c7254e;
+// @code-bg:                     #f9f2f4;
+
+// @kbd-color:                   #fff;
+// @kbd-bg:                      #333;
+
+// @pre-bg:                      #f5f5f5;
+// @pre-color:                   @gray-dark;
+// @pre-border-color:            #ccc;
+// @pre-scrollable-max-height:   340px;
+
+
+// //== Type
+// //
+// //##
+
+// //** Horizontal offset for forms and lists.
+// @component-offset-horizontal: 180px;
+// //** Text muted color
+// @text-muted:                  @gray-light;
+// //** Abbreviations and acronyms border color
+// @abbr-border-color:           @gray-light;
+// //** Headings small color
+// @headings-small-color:        @gray-light;
+// //** Blockquote small color
+// @blockquote-small-color:      @gray-light;
+// //** Blockquote font size
+// @blockquote-font-size:        (@font-size-base * 1.25);
+// //** Blockquote border color
+// @blockquote-border-color:     @gray-lighter;
+// //** Page header border color
+// @page-header-border-color:    @gray-lighter;
+// //** Width of horizontal description list titles
+// @dl-horizontal-offset:        @component-offset-horizontal;
+// //** Horizontal line color.
+// @hr-border:                   @gray-lighter;
diff --git a/shared/resources/styles/variables/paths.less b/shared/resources/styles/variables/paths.less
new file mode 100644
index 0000000000..dc4c0eb435
--- /dev/null
+++ b/shared/resources/styles/variables/paths.less
@@ -0,0 +1,2 @@
+@bootstrap-path: '~bootstrap/less/';
+@fa-path: '~font-awesome/';
diff --git a/shared/src/components/breadcrumb/index.cjsx b/shared/src/components/breadcrumb/index.cjsx
new file mode 100644
index 0000000000..63a926bcce
--- /dev/null
+++ b/shared/src/components/breadcrumb/index.cjsx
@@ -0,0 +1,87 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+Breadcrumb = React.createClass
+  displayName: 'Breadcrumb'
+  propTypes:
+    crumb: React.PropTypes.object.isRequired
+    goToStep: React.PropTypes.func.isRequired
+    step: React.PropTypes.object.isRequired
+    canReview: React.PropTypes.bool
+    currentStep: React.PropTypes.number
+    onMouseEnter: React.PropTypes.func
+    onMouseLeave: React.PropTypes.func
+
+  getDefaultProps: ->
+    canReview: true
+    step: {}
+
+  getInitialState: ->
+    @getState(@props)
+
+  componentWillReceiveProps: (nextProps) ->
+    nextState = @getState(nextProps)
+    @setState(nextState)
+
+  getState: ({crumb, currentStep, step, canReview}) ->
+    isCorrect = false
+    isIncorrect = false
+    isCurrent = crumb.key is currentStep
+    isCompleted = step?.is_completed
+    isEnd = crumb.type is 'end'
+    crumbType = if isEnd then crumb.type else step?.type
+
+    if isCompleted
+      if canReview and step.correct_answer_id?
+        if step.is_correct
+          isCorrect = true
+        else if step.answer_id
+          isIncorrect = true
+
+    {isCorrect, isIncorrect, isCurrent, isCompleted, isEnd, crumbType}
+
+  render: ->
+    {step, crumb, goToStep, className} = @props
+    {isCorrect, isIncorrect, isCurrent, isCompleted, isEnd, crumbType} = @state
+
+    propsToPassOn = _.omit(@props, 'onClick', 'title', 'className', 'data-chapter', 'key', 'step')
+
+    if isCurrent
+      title = "Current Step (#{crumbType})"
+
+    if isCompleted
+      title ?= "Step Completed (#{crumbType}). Click to review"
+
+    if isCorrect
+      status = <i className='icon-lg icon-correct'></i>
+
+    if isIncorrect
+      status = <i className='icon-lg icon-incorrect'></i>
+
+    if isEnd
+      title = "#{step.title} Completion"
+
+    classes = classnames 'openstax-breadcrumbs-step', 'icon-stack', 'icon-lg', step.group, "breadcrumb-#{crumbType}", className,
+      current: isCurrent
+      active: isCurrent
+      completed: isCompleted
+      'status-correct': isCorrect
+      'status-incorrect': isIncorrect
+
+    # build list of icon classes from the crumb type and the step labels
+    crumbClasses = _.map(crumb.data.labels, (label) -> "icon-#{label}") if crumb.data.labels?
+    iconClasses = classnames "icon-#{crumbType}", crumbClasses
+
+    <span
+      {...propsToPassOn}
+      className={classes}
+      title={title}
+      onClick={_.partial(goToStep, crumb.key)}
+      data-chapter={crumb.sectionLabel}
+      key="step-#{crumb.key}">
+      <i className="icon-lg #{iconClasses}"></i>
+      {status}
+    </span>
+
+module.exports = Breadcrumb
diff --git a/shared/src/components/buttons/async-button.cjsx b/shared/src/components/buttons/async-button.cjsx
new file mode 100644
index 0000000000..10843a58b5
--- /dev/null
+++ b/shared/src/components/buttons/async-button.cjsx
@@ -0,0 +1,88 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+RefreshButton = require './refresh-button'
+
+module.exports = React.createClass
+  displayName: 'AsyncButton'
+
+  propTypes:
+    isWaiting: React.PropTypes.bool.isRequired
+    isDone: React.PropTypes.bool
+    isFailed: React.PropTypes.bool
+    waitingText: React.PropTypes.node # TODO: This should be a Component or array
+    failedState: React.PropTypes.func
+    failedProps: React.PropTypes.object
+    doneText: React.PropTypes.node
+    isJob: React.PropTypes.bool
+    timeoutLength: React.PropTypes.number
+
+  getInitialState: ->
+    isTimedout: false
+    delayTimeout: null
+
+  componentWillReceiveProps: (nextProps) ->
+    if @props.isWaiting isnt nextProps.isWaiting
+      @clearDelay() unless nextProps.isWaiting
+      @setState(delayTimeout: null)
+
+  componentDidUpdate: ->
+    {isWaiting, isJob} = @props
+    {isTimedout, delayTimeout} = @state
+
+    if not delayTimeout and isWaiting and not isTimedout
+      timeout = @props.timeoutLength or if isJob then 600000 else 30000
+      delayTimeout = _.delay @checkForTimeout, timeout
+      @setState({delayTimeout})
+
+  checkForTimeout: ->
+    {isWaiting} = @props
+    @setState(isTimedout: true, delayTimeout: null) if isWaiting and @isMounted()
+
+  clearDelay: ->
+    {delayTimeout} = @state
+    clearTimeout(delayTimeout)
+
+  getDefaultProps: ->
+    isDone: false
+    isFailed: false
+    waitingText: 'Loading…'
+    failedState: RefreshButton
+    failedProps:
+      beforeText: 'There was a problem.  '
+    doneText: ''
+    isJob: false
+
+  render: ->
+    {className, disabled} = @props
+    {isWaiting, isDone, isFailed} = @props
+    {children, waitingText, failedProps, doneText} = @props
+    {isTimedout} = @state
+    # needs to be capitalized so JSX will transpile as a variable, not element
+    FailedState = @props.failedState
+
+    buttonTypeClass = 'async-button'
+
+    if isFailed or isTimedout
+      stateClass = 'is-failed'
+      return <FailedState {...failedProps} />
+    else if isWaiting
+      stateClass = 'is-waiting'
+      text = waitingText
+      disabled = true
+      spinner = <i className='fa fa-spinner fa-spin'/>
+    else if isDone
+      stateClass = 'is-done'
+      text = doneText
+    else
+      stateClass = null
+      text = children
+
+    <BS.Button {...@props}
+      className={[buttonTypeClass, stateClass, className]}
+      disabled={disabled}
+      >
+        {spinner}
+        {text}
+    </BS.Button>
diff --git a/shared/src/components/buttons/close-button.cjsx b/shared/src/components/buttons/close-button.cjsx
new file mode 100644
index 0000000000..f0e7ae9990
--- /dev/null
+++ b/shared/src/components/buttons/close-button.cjsx
@@ -0,0 +1,7 @@
+React = require 'react'
+classnames = require 'classnames'
+
+module.exports = React.createClass
+  render: ->
+    classNames = classnames 'openstax-close-x', 'close', @props.className
+    <button {...@props} className={classNames} aria-role='close'></button>
diff --git a/shared/src/components/buttons/refresh-button.cjsx b/shared/src/components/buttons/refresh-button.cjsx
new file mode 100644
index 0000000000..7bcd0dd73c
--- /dev/null
+++ b/shared/src/components/buttons/refresh-button.cjsx
@@ -0,0 +1,25 @@
+React = require 'react'
+
+module.exports = React.createClass
+  displayName: 'RefreshButton'
+
+  propTypes:
+    beforeText: React.PropTypes.string
+    buttonText: React.PropTypes.string
+    afterText: React.PropTypes.string
+
+  getDefaultProps: ->
+    beforeText: 'There was a problem loading. '
+    buttonText: 'Refresh'
+    afterText: ' to try again.'
+
+  render: ->
+    {beforeText, buttonText, afterText} = @props
+
+    # Wrap text in quotes so whitespace is preserved
+    # and button is not right next to text.
+    <span className='refresh-button'>
+      {beforeText}
+      <a className='btn btn-primary' href={window.location.href}>{buttonText}</a>
+      {afterText}
+    </span>
diff --git a/shared/src/components/chapter-section-mixin.cjsx b/shared/src/components/chapter-section-mixin.cjsx
new file mode 100644
index 0000000000..8f364e586d
--- /dev/null
+++ b/shared/src/components/chapter-section-mixin.cjsx
@@ -0,0 +1,24 @@
+_ = require 'underscore'
+
+module.exports =
+  getDefaultProps: ->
+    sectionSeparator: '.'
+    skipZeros: true
+    inputStringSeparator: '.'
+
+  sectionFormat: (section, separator) ->
+    {inputStringSeparator, skipZeros, sectionSeparator} = @props
+
+    if _.isString(section)
+      sectionArray = section.split(inputStringSeparator)
+
+    sectionArray = section if _.isArray(section)
+    # prevent mutation
+    sectionArray = _.clone(sectionArray)
+    # ignore 0 in chapter sections
+    sectionArray.pop() if skipZeros and _.last(sectionArray) is 0
+
+    if sectionArray instanceof Array
+      sectionArray.join(separator or sectionSeparator)
+    else
+      section
diff --git a/shared/src/components/demo.cjsx b/shared/src/components/demo.cjsx
new file mode 100644
index 0000000000..f3650a5417
--- /dev/null
+++ b/shared/src/components/demo.cjsx
@@ -0,0 +1,351 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'lodash'
+EventEmitter2 = require 'eventemitter2'
+classnames = require 'classnames'
+
+{Exercise, ExerciseWithScroll} = require './exercise'
+Notifications = require '../model/notifications'
+URLs = require '../model/urls'
+NotificationBar = require './notifications/bar'
+SuretyGuard = require './surety-guard'
+exerciseStub = require '../../api/exercise'
+multipartExerciseStub = require '../../api/exercise-multipart'
+exerciseEvents = new EventEmitter2(wildcard: true)
+STEP_ID = exerciseStub['free-response'].id
+MULTIPART_STEP_IDS = _.keys(multipartExerciseStub)
+SINGLEPART_STEP_IDS = [STEP_ID]
+
+steps = []
+steps[STEP_ID] = {}
+_.forEach multipartExerciseStub, (step, stepId) ->
+  steps[stepId] = {}
+
+stubForExercise = {}
+stubForExercise[STEP_ID] = exerciseStub
+
+stubsForExercises = _.extend {}, multipartExerciseStub, stubForExercise
+
+ExercisePreview = require './exercise-preview'
+exercisePreviewStub = require '../../api/exercise-preview/data'
+
+Breadcrumb = require './breadcrumb'
+breadcrumbStub = require '../../api/breadcrumbs/steps'
+
+ArbitraryHtmlAndMath = require './html'
+HTMLStub = require '../../api/html/data'
+
+getCurrentPanel = (stepId) ->
+  step = steps[stepId]
+  panel = 'free-response'
+  if step.answer_id
+    panel = 'review'
+  else if step.free_response
+    panel = 'multiple-choice'
+  panel
+
+getUpdatedStep = (stepId) ->
+  step = steps[stepId]
+  panel = getCurrentPanel(stepId)
+  steps[stepId] = _.merge({}, stubsForExercises[stepId][panel], step)
+
+getProps = (stepIds) ->
+  localSteps = {}
+
+  _.forEach stepIds, (stepId) ->
+    localSteps[stepId] = getUpdatedStep(stepId)
+
+  parts = _.map stepIds, (stepId) ->
+    localSteps[stepId]
+
+  props =
+    parts: parts
+    canOnlyContinue: (stepId) ->
+      localSteps[stepId].correct_answer_id?
+    getCurrentPanel: getCurrentPanel
+    setAnswerId: (stepId, answerId) ->
+      localSteps[stepId].answer_id = answerId
+    setFreeResponseAnswer: (stepId, freeResponse) ->
+      localSteps[stepId].free_response = freeResponse
+      exerciseEvents.emit('change')
+    onContinue: ->
+      exerciseEvents.emit('change')
+    onStepCompleted: ->
+      console.info('onStepCompleted')
+    onNextStep: ->
+      console.info('onNextStep')
+
+SuretyDemo = React.createClass
+
+  getInitialState: -> triggered: false
+  onConfirm: -> @setState(triggered: true)
+
+  render: ->
+    if @state.triggered
+      message = 'you seem to be sure'
+
+    <div className="surety-demo">
+      <h3>{message}</h3>
+      <SuretyGuard
+        title={false}
+        placement='right'
+        message="Destroy ALL THE THINGS?"
+        onConfirm={@onConfirm}
+      >
+        <BS.Button>
+          Perform Dangerous Operation!
+        </BS.Button>
+      </SuretyGuard>
+    </div>
+
+ExerciseDemo = React.createClass
+  displayName: 'ExerciseDemo'
+  getInitialState: ->
+    exerciseProps: getProps(SINGLEPART_STEP_IDS)
+  getDefaultProps: ->
+    goToStep: ->
+      console.info('goToStep', arguments)
+  update: ->
+    @setState(exerciseProps: getProps(SINGLEPART_STEP_IDS))
+  componentWillMount: ->
+    exerciseEvents.on('change', @update)
+  componentWillUnmount: ->
+    exerciseEvents.off('change', @update)
+  render: ->
+    {exerciseProps} = @state
+    <Exercise {...@props} {...exerciseProps} project='tutor' pinned={false}/>
+
+MultipartExerciseDemo = React.createClass
+  displayName: 'MultipartExerciseDemo'
+  getInitialState: ->
+    exerciseProps: getProps(MULTIPART_STEP_IDS)
+  getDefaultProps: ->
+    goToStep: ->
+      console.info('goToStep', arguments)
+  update: ->
+    @setState(exerciseProps: getProps(MULTIPART_STEP_IDS))
+  componentWillMount: ->
+    exerciseEvents.on('change', @update)
+  componentWillUnmount: ->
+    exerciseEvents.off('change', @update)
+  render: ->
+    {exerciseProps, currentStep} = @state
+    {goToStep, onPartEnter, onPartLeave} = @props
+
+    <ExerciseWithScroll
+      {...exerciseProps}
+      project='concept-coach'
+      goToStep={goToStep}
+      currentStep={currentStep}
+      pinned={false}
+    />
+
+ExercisePreviewDemo = React.createClass
+  displayName: 'ExercisePreviewDemo'
+  getInitialState: ->
+    isSelected: false
+    toggles:
+      feedback:    false
+      interactive: false
+      tags:        false
+      formats:     false
+      height:      false
+
+  onToggle: (ev) ->
+    toggles = @state.toggles
+    toggles[ev.target.name] = ev.target.checked
+    @setState({toggles})
+
+  onSelection: ->
+    @setState(isSelected: not @state.isSelected)
+
+  onDetailsClick: (ev, exercise) ->
+    console.warn "Exercise details was clicked"
+
+  render: ->
+    <ExercisePreview exercise={exercisePreviewStub}
+      onSelection={@onSelection}
+      onDetailsClick={@onDetailsClick}
+      isSelected={@state.isSelected}
+      isInteractive={@state.toggles.interactive}
+      displayFormats={@state.toggles.formats}
+      displayAllTags={@state.toggles.tags}
+      displayFeedback={@state.toggles.feedback}
+      isVerticallyTruncated={@state.toggles.truncated}
+    >
+      <label>
+        <input type="checkbox"
+          onChange={@onToggle} name='interactive'
+          checked={@state.toggles.interactive}
+        /> Interactive
+      </label>
+
+      <label>
+        <input type="checkbox"
+          onChange={@onToggle} name='feedback'
+          checked={@state.toggles.feedback}
+        /> Preview Feedback
+      </label>
+
+      <label>
+        <input type="checkbox"
+          onChange={@onToggle} name='tags'
+          checked={@state.toggles.tags}
+        /> Display All Tags
+      </label>
+
+      <label>
+        <input type="checkbox"
+          onChange={@onToggle} name='formats'
+          checked={@state.toggles.formats}
+        /> Show Formats
+      </label>
+
+      <label>
+        <input type="checkbox"
+          onChange={@onToggle} name='truncated'
+          checked={@state.toggles.truncated}
+        /> Limit Height
+      </label>
+
+    </ExercisePreview>
+
+
+BreadcrumbDemo = React.createClass
+  displayName: 'BreadcrumbDemo'
+  getInitialState: ->
+    currentStep: 0
+
+  goToStep: (stepIndex) ->
+    console.info("goToStep #{stepIndex}")
+    @setState(currentStep: stepIndex)
+
+  render: ->
+    {currentStep} = @state
+
+    crumbs = _.map(breadcrumbStub.steps, (crumbStep, index) ->
+      crumb =
+        key: index
+        data: crumbStep
+        crumb: true
+        type: 'step'
+    )
+
+    crumbs.push(type: 'end', key: crumbs.length + 1, data: {})
+
+    breadcrumbsNoReview = _.map(crumbs, (crumb) =>
+      <Breadcrumb
+        crumb={crumb}
+        key={crumb.key}
+        step={crumb.data or {}}
+        currentStep={currentStep}
+        canReview={false}
+        goToStep={@goToStep}/>
+    )
+
+    breadcrumbsReview = _.map(crumbs, (crumb, key) =>
+      if crumb.type is 'step' and crumb.data.is_completed
+        crumb.data.correct_answer_id = "3"
+
+      <Breadcrumb
+        key={key}
+        crumb={crumb}
+        step={crumb.data or {}}
+        currentStep={currentStep}
+        canReview={true}
+        goToStep={@goToStep}/>
+    )
+
+    <div>
+      <div>
+        <h3>Reading, no review</h3>
+        <div className='task-breadcrumbs'>
+          {breadcrumbsNoReview}
+        </div>
+      </div>
+      <div className='task-homework'>
+        <h3>Homework, no review</h3>
+        <div className='task-breadcrumbs'>
+          {breadcrumbsNoReview}
+        </div>
+      </div>
+      <div>
+        <h3>Reading, with review</h3>
+        <div className='task-breadcrumbs'>
+          {breadcrumbsReview}
+        </div>
+      </div>
+      <div className='task-homework'>
+        <h3>Homework, with review</h3>
+        <div className='task-breadcrumbs'>
+          {breadcrumbsReview}
+        </div>
+      </div>
+    </div>
+
+HTMLDemo = React.createClass
+  displayName: 'HTMLDemo'
+  render: ->
+    <ArbitraryHtmlAndMath {...HTMLStub} className='col-xs-6'/>
+
+
+NoticesDemo = React.createClass
+  getInitialState: -> {running: false}
+
+  startPoll: ->
+    # These will be loaded from the app's bootsrap data in normal use
+    URLs.update(
+      base_accounts_url:    'http://localhost:2999'
+      tutor_notices_url:    'http://localhost:3001/api/notifications'
+      accounts_profile_url: 'http://localhost:2999/profile'
+    )
+    Notifications.startPolling()
+
+  showMessage: ->
+    Notifications.display(
+      message: @refs.message.getDOMNode().value,
+      level: @refs.type.getDOMNode().value
+    )
+
+  render: ->
+    <div className="notices">
+      <NotificationBar />
+      <div className="test-message">
+        <span>Test Message:</span>
+        <input type="text" ref="message" />
+        <select ref="type">
+          <option value="success">Success</option>
+          <option value="notice" selected>Notice</option>
+          <option value="alert">Alert</option>
+          <option value="error">Error</option>
+        </select>
+        <button onClick={@showMessage}>Display</button>
+      </div>
+      <button onClick={@startPoll}>Start Polling</button>
+    </div>
+
+Demo = React.createClass
+  displayName: 'Demo'
+  render: ->
+    demos =
+      exercisePreview: <ExercisePreviewDemo/>
+      notices: <NoticesDemo />
+      multipartExercise: <MultipartExerciseDemo/>
+      exercise: <ExerciseDemo/>
+      surety: <SuretyDemo/>
+      breadcrumbs: <BreadcrumbDemo/>
+      html: <HTMLDemo/>
+
+    demos = _.map(demos, (demo, name) ->
+      <BS.Row key={name} className='demo openstax-wrapper'>
+        <BS.Col xs={12}>
+          <h1>{"#{name}"}</h1>
+          <section className={"#{name}-demo"}>{demo}</section>
+        </BS.Col>
+      </BS.Row>
+    )
+    <BS.Grid className='demos openstax'>
+      {demos}
+    </BS.Grid>
+
+module.exports = Demo
diff --git a/shared/src/components/exercise-badges/index.cjsx b/shared/src/components/exercise-badges/index.cjsx
new file mode 100644
index 0000000000..7e89a386fe
--- /dev/null
+++ b/shared/src/components/exercise-badges/index.cjsx
@@ -0,0 +1,50 @@
+React = require 'react'
+_ = require 'underscore'
+Exercise = require '../../model/exercise'
+Interactive = require './interactive-icon'
+MultiPart   = require './multipart-icon'
+classnames = require 'classnames'
+
+ExerciseBadges = React.createClass
+
+  propTypes:
+    isMultipart:   React.PropTypes.bool
+    hasInteractive:   React.PropTypes.bool
+    hasVideo:   React.PropTypes.bool
+    exercise: React.PropTypes.object
+
+  getDefaultProps: ->
+    isMultipart: false
+    hasInteractive: false
+    hasVideo: false
+    exercise: {}
+
+  render: ->
+    classes = classnames 'openstax-exercise-badges', @props.className
+
+    badges = []
+    if @props.isMultipart or Exercise.isMultipart(@props.exercise)
+      badges.push <span key='mpq' className="mpq">
+          <MultiPart />Multi-part question
+        </span>
+
+    if @props.hasInteractive or Exercise.hasInteractive(@props.exercise)
+      badges.push <span key='interactive' className="interactive">
+          <Interactive />Interactive
+        </span>
+
+    if @props.hasVideo or Exercise.hasVideo(@props.exercise)
+      badges.push <span key='video' className="video">
+          <Interactive />Video
+        </span>
+
+    if badges.length
+      <div className={classes}>
+        {badges}
+      </div>
+    else
+      null
+
+
+
+module.exports = ExerciseBadges
diff --git a/shared/src/components/exercise-badges/interactive-icon.cjsx b/shared/src/components/exercise-badges/interactive-icon.cjsx
new file mode 100644
index 0000000000..01e34154c7
--- /dev/null
+++ b/shared/src/components/exercise-badges/interactive-icon.cjsx
@@ -0,0 +1,28 @@
+# coffeelint: disable=max_line_length
+
+React = require 'react'
+
+# Basically just an icon,
+# create as plain class without this binding and never updates
+class InteractiveIcon extends React.Component
+
+  shouldComponentUpdate: ->
+    false
+
+  render: ->
+    <svg className="icon interactive"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+      viewBox="0 0 22.1 22"
+    >
+      <g>
+        <path style={fill:'#5E6062'} d="M20.2,0H4.7c-1,0-1.8,0.8-1.8,1.8v15.4c0,1,0.8,1.8,1.8,1.8h15.5c1,0,1.8-0.8,1.8-1.8V1.8
+          C22.1,0.8,21.2,0,20.2,0z M20.6,16.9c0,0.4-0.3,0.7-0.7,0.7h-15c-0.4,0-0.7-0.3-0.7-0.7V2.2c0-0.4,0.3-0.7,0.7-0.7h15
+          c0.4,0,0.7,0.3,0.7,0.7V16.9z"/>
+        <path style={fill:'none'} d="M19.9,1.5h-15c-0.4,0-0.7,0.3-0.7,0.7v14.7c0,0.4,0.3,0.7,0.7,0.7h15c0.4,0,0.7-0.3,0.7-0.7V2.2
+          C20.6,1.8,20.3,1.5,19.9,1.5z M9.7,14.6V4.5L17,9.6L9.7,14.6z"/>
+        <path style={fill:'#5E6062'} d="M1.4,19.7V7.1H0v13.1c0,1,0.8,1.8,1.8,1.8h12.7v-1.5H2.2C1.8,20.5,1.4,20.1,1.4,19.7z"/>
+        <polygon style={fill:'#F47641'} points="9.7,14.6 17,9.6 9.7,4.5  "/>
+      </g>
+    </svg>
+
+module.exports = InteractiveIcon
diff --git a/shared/src/components/exercise-badges/multipart-icon.cjsx b/shared/src/components/exercise-badges/multipart-icon.cjsx
new file mode 100644
index 0000000000..acbb9a44de
--- /dev/null
+++ b/shared/src/components/exercise-badges/multipart-icon.cjsx
@@ -0,0 +1,25 @@
+# coffeelint: disable=max_line_length
+
+React = require 'react'
+
+# Basically just an icon,
+# create as plain class without this binding and never updates
+class MultipartIcon extends React.Component
+
+  shouldComponentUpdate: ->
+    false
+
+  render: ->
+    <svg className="icon multipart"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+      viewBox="0 0 22 22"
+    >
+      <g>
+        <path style={fill:'#5F6163'} d="M11.8,22c5.4-0.4,9.8-4.7,10.2-10.2H11.8V22z"/>
+        <path style={fill:'#5F6163'} d="M10.2,0C4.7,0.4,0.4,4.7,0,10.2h10.2V0z"/>
+        <path style={fill:'#5F6163'} d="M0,11.8c0.4,5.4,4.7,9.8,10.2,10.2V11.8H0z"/>
+        <path style={fill:'#F47641'} d="M11.8,10.2H22C21.6,4.7,17.3,0.4,11.8,0V10.2z"/>
+      </g>
+    </svg>
+
+module.exports = MultipartIcon
diff --git a/shared/src/components/exercise-identifier-link.cjsx b/shared/src/components/exercise-identifier-link.cjsx
new file mode 100644
index 0000000000..86e6951a33
--- /dev/null
+++ b/shared/src/components/exercise-identifier-link.cjsx
@@ -0,0 +1,22 @@
+_ = require 'underscore'
+React = require 'react'
+Exercise = require '../model/exercise'
+ChapterSectionMixin = require './chapter-section-mixin'
+
+ExerciseIdentifierLink = React.createClass
+
+  mixins: [ChapterSectionMixin]
+
+  propTypes:
+    bookUUID: React.PropTypes.string
+    exerciseId: React.PropTypes.string.isRequired
+    project: React.PropTypes.oneOf(['concept-coach', 'tutor'])
+
+  render: ->
+    url = Exercise.troubleUrl(@props)
+    <div>
+      <span className='exercise-identifier-link'>
+        ID# {@props.exerciseId} | <a target="_blank" href={url}>Report an error</a>
+      </span>
+    </div>
+module.exports = ExerciseIdentifierLink
diff --git a/shared/src/components/exercise-preview/controls-overlay.cjsx b/shared/src/components/exercise-preview/controls-overlay.cjsx
new file mode 100644
index 0000000000..0ac24d361c
--- /dev/null
+++ b/shared/src/components/exercise-preview/controls-overlay.cjsx
@@ -0,0 +1,38 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+ControlsOverlay = React.createClass
+
+  propTypes:
+    onClick:  React.PropTypes.func
+    actions:  React.PropTypes.object
+    exercise: React.PropTypes.object.isRequired
+
+  onClick: (ev) ->
+    @props.onClick(ev, @props.exercise)
+
+  onActionClick: (ev, handler) ->
+    ev.stopPropagation() if @props.onClick # needed to prevent click from triggering onOverlay handler
+    handler(ev, @props.exercise)
+
+  render: ->
+    return null if _.isEmpty(@props.actions)
+
+    <div
+      onClick={@onClick if @props.onClick}
+      className={classnames('controls-overlay', {active: @props.isSelected})}
+    >
+      <div className='message'>
+        {for type, action of @props.actions
+          <div key={type}
+            className="action #{type}"
+            onClick={_.partial(@onActionClick, _, action.handler)}
+          >
+            <span>{action.message}</span>
+          </div>}
+      </div>
+    </div>
+
+
+module.exports = ControlsOverlay
diff --git a/shared/src/components/exercise-preview/index.cjsx b/shared/src/components/exercise-preview/index.cjsx
new file mode 100644
index 0000000000..6eceda57ea
--- /dev/null
+++ b/shared/src/components/exercise-preview/index.cjsx
@@ -0,0 +1,123 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+BS = require 'react-bootstrap'
+
+ArbitraryHtmlAndMath = require '../html'
+ExerciseIdentifierLink = require '../exercise-identifier-link'
+Question = require '../question'
+ExerciseBadges = require '../exercise-badges'
+ControlsOverlay = require './controls-overlay'
+Exercise = require '../../model/exercise'
+
+ExercisePreview = React.createClass
+
+  propTypes:
+    extractTag:      React.PropTypes.func
+    displayFeedback: React.PropTypes.bool
+    displayAllTags:  React.PropTypes.bool
+    displayFormats:  React.PropTypes.bool
+    panelStyle:      React.PropTypes.string
+    className:       React.PropTypes.string
+    header:          React.PropTypes.element
+    hideAnswers:     React.PropTypes.bool
+    onOverlayClick:  React.PropTypes.func
+    isSelected:      React.PropTypes.bool
+    isInteractive:   React.PropTypes.bool
+    overlayActions:  React.PropTypes.object
+    exercise:        React.PropTypes.shape(
+      content: React.PropTypes.object
+      tags:    React.PropTypes.array
+    ).isRequired
+    isVerticallyTruncated: React.PropTypes.bool
+
+  getDefaultProps: ->
+    panelStyle: 'default'
+    isInteractive:   true
+    overlayActions:  {}
+    extractTag: (tag) ->
+      content = _.compact([tag.name, tag.description]).join(' ') or tag.id
+      isLO = _.include(['lo', 'aplo'], tag.type)
+      {content, isLO}
+
+  renderTag: (tag) ->
+    {content, isLO} = @props.extractTag(tag)
+    classes = if isLO
+      content = "LO: #{content}" if isLO
+      'lo-tag'
+    else
+      'exercise-tag'
+    <span key={tag.id or tag.name} className={classes}>{content}</span>
+
+
+  renderFooter: ->
+    <div className="controls">
+      {@props.children}
+    </div>
+
+  renderStimulus: ->
+    if @props.isInteractive or not @props.exercise.preview
+      <ArbitraryHtmlAndMath className='stimulus' block={true}
+        html={@props.exercise.content.stimulus_html} />
+    else
+      <ArbitraryHtmlAndMath className='stimulus' block={true}
+        html={@props.exercise.preview} />
+
+  render: ->
+    content = @props.exercise.content
+
+    tags = _.clone @props.exercise.tags
+    unless @props.displayAllTags
+      tags = _.where tags, is_visible: true
+    renderedTags = _.map(_.sortBy(tags, 'name'), @renderTag)
+    classes = classnames( 'openstax-exercise-preview', @props.className, {
+      'answers-hidden':   @props.hideAnswers
+      'has-actions':      not _.isEmpty(@props.overlayActions)
+      'is-selected':      @props.isSelected
+      'actions-on-side':  @props.actionsOnSide
+      'non-interactive':  @props.isInteractive is false
+      'is-vertically-truncated': @props.isVerticallyTruncated
+      'is-displaying-formats':   @props.displayFormats
+      'is-displaying-feedback':  @props.displayFeedback
+    })
+
+    questions = _.map(content.questions, (question, questionIter) =>
+      question = _.omit(question, 'answers') if @props.hideAnswers
+
+      <Question
+        key={questionIter}
+        className='openstax-question-preview'
+        model={question}
+        choicesEnabled={false}
+        displayFormats={@props.displayFormats}
+        show_all_feedback={@props.displayFeedback}
+        type='teacher-preview'
+      >
+        {@props.questionFooters?[questionIter]}
+      </Question>
+    )
+
+    <BS.Panel
+      className={classes}
+      bsStyle={@props.panelStyle}
+      header={@props.header}
+      footer={@renderFooter() if @props.children}
+    >
+      {<div className='selected-mask' /> if @props.isSelected}
+
+      <ControlsOverlay exercise={@props.exercise}
+        actions={@props.overlayActions} onClick={@props.onOverlayClick} />
+
+      <ExerciseBadges exercise={@props.exercise} />
+
+      {<ArbitraryHtmlAndMath className='context' block={true}
+        html={@props.exercise.context} /> unless _.isEmpty(@props.exercise.context)}
+
+      {@renderStimulus()}
+
+      {questions}
+      <div className='exercise-uid'>Exercise ID: {@props.exercise.content.uid}</div>
+      <div className='exercise-tags'>{renderedTags}</div>
+    </BS.Panel>
+
+module.exports = ExercisePreview
diff --git a/shared/src/components/exercise/controls.cjsx b/shared/src/components/exercise/controls.cjsx
new file mode 100644
index 0000000000..b3d0bdb4bd
--- /dev/null
+++ b/shared/src/components/exercise/controls.cjsx
@@ -0,0 +1,142 @@
+React = require 'react/addons'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+AsyncButton = require '../buttons/async-button'
+{propTypes, props} = require './props'
+
+ExContinueButton = React.createClass
+  displayName: 'ExContinueButton'
+  propTypes: propTypes.ExContinueButton
+  getDefaultProps: ->
+    isContinueFailed: false
+    waitingText: null
+    isContinueEnabled: true
+
+  render: ->
+    {isContinueEnabled, isContinueFailed, waitingText, onContinue, children} = @props
+    buttonText = children or 'Continue'
+
+    <AsyncButton
+      bsStyle='primary'
+      className='continue'
+      key='step-continue'
+      onClick={onContinue}
+      disabled={not isContinueEnabled}
+      isWaiting={!!waitingText}
+      waitingText={waitingText}
+      isFailed={isContinueFailed}
+      >
+      {buttonText}
+    </AsyncButton>
+
+
+ExReviewControls = React.createClass
+  displayName: 'ExReviewControls'
+  propTypes: propTypes.ExReviewControls
+  getDefaultProps: ->
+    review: ''
+    canTryAnother: false
+    isRecovering: false
+    canRefreshMemory: false
+
+  render: ->
+    {review, canTryAnother, tryAnother, isRecovering, children} = @props
+    {canRefreshMemory, refreshMemory} = @props
+    {isContinueFailed, waitingText, onContinue, isContinueEnabled} = @props
+
+    continueButtonText = if canTryAnother then 'Move On' else children
+
+    if canTryAnother
+      tryAnotherButton = <AsyncButton
+        key='step-try-another'
+        bsStyle='primary'
+        className='-try-another'
+        onClick={tryAnother}
+        isWaiting={isRecovering}
+        waitingText='Loading Another…'>
+        Try Another
+      </AsyncButton>
+
+    if canRefreshMemory
+      refreshMemoryButton = <BS.Button
+        key='step-refresh'
+        bsStyle='primary'
+        className='-refresh-memory'
+        onClick={refreshMemory}>
+        Refresh My Memory
+      </BS.Button>
+
+    continueButton =
+      <ExContinueButton
+        key='step-continue'
+        isContinueFailed={isContinueFailed}
+        waitingText={waitingText}
+        onContinue={onContinue}
+        isContinueEnabled={isContinueEnabled}>
+        {continueButtonText}
+      </ExContinueButton> unless review is 'completed'
+
+    <div className='task-footer-buttons' key='step-buttons'>
+      {tryAnotherButton}
+      {continueButton}
+    </div>
+
+CONTROLS =
+  'free-response': ExContinueButton
+  'multiple-choice': ExContinueButton
+  'review': ExReviewControls
+  'teacher-read-only': ExContinueButton
+
+CONTROLS_TEXT =
+  'free-response': 'Answer'
+  'multiple-choice': 'Submit'
+  'review': 'Next Question'
+  'teacher-read-only': 'Next Question'
+
+ExControlButtons = React.createClass
+  displayName: 'ExerciseControlButtons'
+  getDefaultProps: ->
+    disabled: false
+    isContinueEnabled: false
+    allowKeyNext: false
+  shouldComponentUpdate: (nextProps) ->
+    nextProps.panel?
+  render: ->
+    {panel, controlButtons, controlText} = @props
+
+    ControlButtons = CONTROLS[panel]
+    controlText ?= CONTROLS_TEXT[panel]
+
+    controlProps = _.pick(@props, props.ExReviewControls)
+    controlProps.children = controlText
+
+    <ControlButtons {...controlProps}/>
+
+
+ExerciseDefaultFooter = React.createClass
+  displayName: 'ExerciseDefaultFooter'
+  render: ->
+    <div>{@props.controlButtons}</div>
+
+ExFooter = React.createClass
+  displayName: 'ExFooter'
+  getDefaultProps: ->
+    disabled: false
+    isContinueEnabled: false
+    allowKeyNext: false
+    footer: <ExerciseDefaultFooter/>
+
+  render: ->
+    {footer, idLink} = @props
+
+    footerProps = _.pick(@props, props.StepFooter)
+    footerProps.controlButtons ?= <ExControlButtons {...@props}/>
+
+    <div>
+      {React.addons.cloneWithProps(footer, footerProps)}
+      {idLink}
+    </div>
+
+
+module.exports = {ExContinueButton, ExReviewControls, ExControlButtons, ExFooter}
diff --git a/shared/src/components/exercise/free-response.cjsx b/shared/src/components/exercise/free-response.cjsx
new file mode 100644
index 0000000000..4117bc99ff
--- /dev/null
+++ b/shared/src/components/exercise/free-response.cjsx
@@ -0,0 +1,26 @@
+React = require 'react'
+
+FreeResponse = React.createClass
+  displayName: 'FreeResponse'
+  propTypes:
+    free_response: React.PropTypes.string.isRequired
+
+  getDefaultProps: ->
+    free_response: ''
+
+  render: ->
+    {free_response, student_names} = @props
+    FreeResponse = null
+
+    freeResponseProps =
+      className: 'free-response'
+    freeResponseProps['data-student-names'] = student_names.join(', ') if student_names?
+
+    if free_response? and free_response.length
+      FreeResponse = <div {...freeResponseProps}>
+        {free_response}
+      </div>
+
+    FreeResponse
+
+module.exports = FreeResponse
diff --git a/shared/src/components/exercise/group.cjsx b/shared/src/components/exercise/group.cjsx
new file mode 100644
index 0000000000..7da608d5fc
--- /dev/null
+++ b/shared/src/components/exercise/group.cjsx
@@ -0,0 +1,88 @@
+React = require 'react'
+_ = require 'underscore'
+BS = require 'react-bootstrap'
+camelCase = require 'camelcase'
+
+ChapterSectionMixin = require '../chapter-section-mixin'
+ExerciseIdentifierLink = require '../exercise-identifier-link'
+
+DEFAULT_GROUP =
+  show: false
+REVIEW_GROUP =
+  show: true
+  label: 'Spaced Practice'
+  tooltip:
+    'concept-coach':
+      '''Did you know? Research shows you can strengthen your memory —
+      and spend less time studying — if you revisit material over multiple study sessions.
+      OpenStax Concept Coach will include review questions from prior sections to give your
+      learning a boost.'''
+    'tutor':
+      '''Did you know? Research shows you can strengthen your memory —
+      and spend less time studying — if you revisit material over multiple study sessions.
+      OpenStax Tutor will include review questions from prior sections to give your
+      learning a boost.'''
+
+RULES =
+  default: DEFAULT_GROUP
+  core: DEFAULT_GROUP
+  recovery: DEFAULT_GROUP
+  personalized:
+    show: true
+    label: 'Personalized'
+  #  TODO deprecate spaced practice when BE is updated
+  'spaced practice': REVIEW_GROUP
+  spaced_practice: REVIEW_GROUP
+
+ExerciseGroup = React.createClass
+  displayName: 'ExerciseGroup'
+
+  propTypes:
+    group: React.PropTypes.oneOf(_.keys(RULES)).isRequired
+    project: React.PropTypes.oneOf(['tutor', 'concept-coach']).isRequired
+
+  getDefaultProps: ->
+    group: 'default'
+    related_content: []
+
+  getPossibleGroups: ->
+    _.keys(RULES)
+
+  getGroupLabel: (group, related_content) ->
+
+    if RULES[group].label?
+      labels = RULES[group].label
+
+    labels
+
+  render: ->
+    {group, related_content, exercise_uid, project} = @props
+    groupDOM = []
+
+    if RULES[group].show
+      className = group.replace(' ', '_')
+      labels = @getGroupLabel(group, related_content)
+      isSpacedPractice = className is 'spaced_practice'
+      icon = <i className="icon-sm icon-#{className}" key='group-icon'></i>
+
+      spacedPracticeHeading = <p><b>What is spaced practice?</b></p>
+
+      groupDOM = [
+        icon
+        <span className='openstax-step-group-label' key='group-label'>{labels}</span>
+      ]
+
+    if RULES[group].show and RULES[group].tooltip
+      popover = <BS.Popover id="instructions" ref="popover" className="openstax instructions">
+        {spacedPracticeHeading if isSpacedPractice}
+        {RULES[group].tooltip[project]}
+      </BS.Popover>
+      groupDOM.push  <BS.OverlayTrigger placement="bottom" overlay={popover}>
+        <i className="fa fa-info-circle" />
+      </BS.OverlayTrigger>
+
+    <div className='openstax-step-group'>
+      {groupDOM}
+    </div>
+
+module.exports = ExerciseGroup
diff --git a/shared/src/components/exercise/index.cjsx b/shared/src/components/exercise/index.cjsx
new file mode 100644
index 0000000000..c7df0beb0a
--- /dev/null
+++ b/shared/src/components/exercise/index.cjsx
@@ -0,0 +1,176 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+ExercisePart = require './part'
+{ExFooter} = require './controls'
+{CardBody} = require '../pinned-header-footer-card/sections'
+ExerciseGroup = require './group'
+ExerciseBadges = require '../exercise-badges'
+ExerciseIdentifierLink = require '../exercise-identifier-link'
+ScrollToMixin = require '../scroll-to-mixin'
+
+ExerciseMixin =
+
+  propTypes:
+    parts: React.PropTypes.array.isRequired
+    canOnlyContinue: React.PropTypes.func.isRequired
+    currentStep: React.PropTypes.number.isRequired
+
+  isSinglePart: ->
+    {parts} = @props
+    parts.length is 1
+
+  canAllContinue: ->
+    {parts, canOnlyContinue} = @props
+
+    _.every parts, (part) ->
+      canOnlyContinue(part.id)
+
+  shouldControl: (id) ->
+    not @props.canOnlyContinue(id)
+
+  renderPart: (part, partProps) ->
+    props = _.omit(@props, 'parts', 'canOnlyContinue', 'footer', 'goToStep', 'controlButtons')
+
+    <ExercisePart
+      focus={@isSinglePart()}
+      {...props}
+      {...partProps}
+      step={part}
+      id={part.id}
+      taskId={part.task_id}/>
+
+  renderSinglePart: ->
+    {parts, footer, canOnlyContinue, controlButtons} = @props
+
+    part = _.first(parts)
+
+    partProps =
+      idLink: @renderIdLink()
+      focus: true
+      includeGroup: true
+      footer: footer
+      controlButtons: controlButtons
+
+    @renderPart(part, partProps)
+
+  renderMultiParts: ->
+    {parts, currentStep} = @props
+
+    _.map parts, (part, index) =>
+      # disable keyStep if this is not the current step
+      keySet = null if part.stepIndex isnt currentStep
+
+      partProps =
+        pinned: false
+        focus: part.stepIndex is currentStep
+        includeGroup: false
+        includeFooter: @shouldControl(part.id)
+        keySet: keySet
+        stepPartIndex: part.stepIndex
+        key: "exercise-part-#{index}"
+
+      # stim and stem are the same for different steps currently.
+      # they should only show up once.
+      unless index is 0
+        part.content = _.omit(part.content, 'stimulus_html', 'stem_html')
+
+      @renderPart(part, partProps)
+
+  renderGroup: ->
+    {parts} = @props
+    step = _.last(parts)
+
+    <ExerciseGroup
+      key='step-exercise-group'
+      project={@props.project}
+      group={step.group}
+      related_content={step.related_content}/>
+
+  renderFooter: ->
+    {parts, onNextStep, currentStep, pinned} = @props
+    step = _.last(parts)
+
+    if @canAllContinue()
+      canContinueControlProps =
+        isContinueEnabled: true
+        onContinue: _.partial onNextStep, currentStep: step.stepIndex
+
+    footerProps = _.omit(@props, 'onContinue')
+    footerProps.idLink = @renderIdLink(false) unless pinned
+
+    <ExFooter {...canContinueControlProps} {...footerProps}
+      panel='review' />
+
+  renderIdLink: (related = true) ->
+    {parts} = @props
+    step = _.last(parts)
+
+    related_content = step.related_content if related
+
+    if step.content?.uid
+      <ExerciseIdentifierLink key='exercise-uid'
+        exerciseId={step.content?.uid}
+        related_content={related_content}/>
+
+
+ExerciseWithScroll = React.createClass
+  displayName: 'ExerciseWithScroll'
+  mixins: [ExerciseMixin, ScrollToMixin]
+
+  componentDidMount: ->
+    {currentStep} = @props
+    @scrollToStep(currentStep) if currentStep?
+
+  componentWillReceiveProps: (nextProps) ->
+    @scrollToStep(nextProps.currentStep) if nextProps.currentStep isnt @props.currentStep
+
+  scrollToStep: (currentStep) ->
+    stepSelector = "[data-step='#{currentStep}']"
+    @scrollToSelector(stepSelector, {updateHistory: false, unlessInView: true})
+
+  render: ->
+    {parts, footer, pinned} = @props
+    classes = classnames('openstax-multipart-exercise-card', {
+      "deleted-homework": @props.task?.type is 'homework' and @props.task?.is_deleted
+    })
+
+    if @isSinglePart()
+      @renderSinglePart()
+    else
+      footer ?= @renderFooter() if pinned
+      <CardBody footer={footer} pinned={pinned} className={classes}>
+        <ExerciseBadges isMultipart={true}/>
+        {@renderGroup()}
+        {@renderMultiParts()}
+        {@renderIdLink(false) if pinned}
+      </CardBody>
+
+
+Exercise = React.createClass
+  displayName: 'Exercise'
+  mixins: [ExerciseMixin]
+  render: ->
+    {footer, pinned} = @props
+    classes = classnames('openstax-multipart-exercise-card', {
+      "deleted-homework": @props.task?.type is 'homework' and @props.task?.is_deleted
+    })
+
+    if @isSinglePart()
+      <CardBody footer={footer}
+        className={classes}>
+        { @renderSinglePart() }
+      </CardBody>
+    else
+      <CardBody pinned={pinned}
+        footer={footer or @renderFooter()}
+        className={classes}
+      >
+        <ExerciseBadges isMultipart={true}/>
+        {@renderGroup()}
+        {@renderMultiParts()}
+        {@renderIdLink(false) if pinned}
+      </CardBody>
+
+module.exports = {Exercise, ExerciseWithScroll}
diff --git a/shared/src/components/exercise/mode.cjsx b/shared/src/components/exercise/mode.cjsx
new file mode 100644
index 0000000000..35104badd4
--- /dev/null
+++ b/shared/src/components/exercise/mode.cjsx
@@ -0,0 +1,126 @@
+React = require 'react'
+_ = require 'underscore'
+
+ArbitraryHtmlAndMath = require '../html'
+Question = require '../question'
+FreeResponse = require './free-response'
+
+RESPONSE_CHAR_LIMIT = 10000
+
+{propTypes, props} = require './props'
+modeType = propTypes.ExerciseStepCard.panel
+modeProps = _.extend {}, propTypes.ExFreeResponse, propTypes.ExMulitpleChoice, propTypes.ExReview, mode: modeType
+
+ExMode = React.createClass
+  displayName: 'ExMode'
+  propTypes: modeProps
+  getDefaultProps: ->
+    disabled: false
+    free_response: ''
+    answer_id: ''
+  getInitialState: ->
+    {free_response, answer_id} = @props
+
+    freeResponse: free_response
+    answerId: answer_id
+
+  componentDidMount: ->
+    {mode} = @props
+    @setFreeResponseFocusState() if mode is 'free-response'
+
+  componentDidUpdate: (prevProps) ->
+    {mode, focus} = prevProps
+    @setFreeResponseFocusState() if mode is 'free-response' and focus isnt @props.focus
+
+  componentWillReceiveProps: (nextProps) ->
+    {free_response, answer_id, cachedFreeResponse} = nextProps
+
+    nextAnswers = {}
+    freeResponse = free_response or cachedFreeResponse or ''
+
+    nextAnswers.freeResponse = freeResponse if @state.freeResponse isnt freeResponse
+    nextAnswers.answerId = answer_id if @state.answerId isnt answer_id
+
+    @setState(nextAnswers) unless _.isEmpty(nextAnswers)
+
+  setFreeResponseFocusState: ->
+    {focus} = @props
+    if focus
+      @refs.freeResponse?.getDOMNode?().focus?()
+    else
+      @refs.freeResponse?.getDOMNode?().blur?()
+
+  onFreeResponseChange: ->
+    freeResponse = @refs.freeResponse?.getDOMNode()?.value
+    if freeResponse.length <= RESPONSE_CHAR_LIMIT
+      @setState({freeResponse})
+      @props.onFreeResponseChange?(freeResponse)
+
+  onAnswerChanged: (answer) ->
+    return if answer.id is @state.answerId or @props.mode isnt 'multiple-choice'
+    @setState {answerId: answer.id}
+    @props.onAnswerChanged?(answer)
+
+  getFreeResponse: ->
+    {mode, free_response, disabled} = @props
+    {freeResponse} = @state
+
+
+    if mode is 'free-response'
+      <textarea
+        disabled={disabled}
+        ref='freeResponse'
+        placeholder='Enter your response'
+        value={freeResponse}
+        onChange={@onFreeResponseChange}
+      />
+    else
+      <FreeResponse free_response={free_response}/>
+
+  render: ->
+    {mode, content, onChangeAnswerAttempt, answerKeySet, choicesEnabled} = @props
+    {answerId} = @state
+
+    answerKeySet = null unless choicesEnabled
+
+    questionProperties = [
+      'processHtmlAndMath', 'choicesEnabled', 'correct_answer_id', 'task',
+      'feedback_html', 'type', 'questionNumber', 'project', 'context'
+    ]
+
+    questionProps = _.pick(@props, questionProperties)
+    if mode is 'multiple-choice'
+      changeProps =
+        onChange: @onAnswerChanged
+    else if mode is 'review'
+      changeProps =
+        onChangeAttempt: onChangeAnswerAttempt
+
+    htmlAndMathProps = _.pick(@props, 'processHtmlAndMath')
+
+    {stimulus_html} = content
+    stimulus = <ArbitraryHtmlAndMath
+      {...htmlAndMathProps}
+      className='exercise-stimulus'
+      block={true}
+      html={stimulus_html} /> if stimulus_html?.length > 0
+
+    questions = _.map content.questions, (question) =>
+      question = _.omit(question, 'answers') if mode is 'free-response'
+      <Question
+        {...questionProps}
+        {...changeProps}
+        key="step-question-#{question.id}"
+        model={question}
+        answer_id={answerId}
+        keySet={answerKeySet}>
+        {@getFreeResponse()}
+      </Question>
+
+    <div className='openstax-exercise'>
+      {stimulus}
+      {questions}
+    </div>
+
+
+module.exports = {ExMode}
diff --git a/shared/src/components/exercise/part-card.cjsx b/shared/src/components/exercise/part-card.cjsx
new file mode 100644
index 0000000000..a8e7d92be5
--- /dev/null
+++ b/shared/src/components/exercise/part-card.cjsx
@@ -0,0 +1,164 @@
+React = require 'react'
+_ = require 'underscore'
+
+classnames = require 'classnames'
+keymaster = require 'keymaster'
+
+ExerciseGroup = require './group'
+{CardBody} = require '../pinned-header-footer-card/sections'
+
+{ExFooter} = require './controls'
+{ExMode} = require './mode'
+
+{propTypes, props} = require './props'
+
+CONTINUE_CHECKS =
+  'free-response': 'freeResponse'
+  'multiple-choice': 'answerId'
+  'review': null
+  'teacher-read-only': null
+
+ON_CHANGE =
+  'free-response': 'onFreeResponseChange'
+  'multiple-choice': 'onAnswerChanged'
+  'review': 'onChangeAnswerAttempt'
+  'teacher-read-only': 'onChangeAnswerAttempt'
+
+ExerciseStepCard = React.createClass
+  displayName: 'ExerciseStepCard'
+  propTypes:
+    propTypes.ExerciseStepCard
+  getDefaultProps: ->
+    disabled: false
+    isContinueEnabled: true
+    allowKeyNext: false
+    includeGroup: true
+    includeFooter: true
+
+  getInitialState: ->
+    stepState = @getStepState(@props)
+
+  shouldComponentUpdate: (nextProps, nextState) ->
+    not (_.isEqual(@props, nextProps) and
+      @props.isContinueEnabled is @isContinueEnabled(@props, @state) and
+      @isContinueEnabled(@props, @state) is @isContinueEnabled(nextProps, nextState))
+
+  componentWillReceiveProps: (nextProps) ->
+    unless _.isEqual(@getStepState(@props, @state), @getStepState(nextProps))
+      nextStepState = @getStepState(nextProps)
+      @setState(nextStepState)
+
+    if @props.allowKeyNext isnt nextProps.allowKeyNext
+      @updateKeyBind(nextProps.allowKeyNext)
+
+  updateKeyBind: (allowKeyNext) ->
+    if allowKeyNext then @startKeys() else @clearKeys()
+
+  startKeys: ->
+    keymaster('enter', 'multiple-choice', @onContinue)
+    keymaster.setScope('multiple-choice')
+
+  clearKeys: ->
+    keymaster.unbind('enter', 'multiple-choice')
+    keymaster.deleteScope('multiple-choice')
+
+  getStepState: (props, state = {}) ->
+    {freeResponse} = state
+    {step} = props
+    freeResponse: step.free_response or step.cachedFreeResponse or freeResponse or ''
+    answerId: step.answer_id or ''
+
+  isContinueEnabled: (props, state) ->
+    {panel} = props
+    toCheck = CONTINUE_CHECKS[panel]
+    return true unless toCheck?
+    state[toCheck]?.trim().length > 0
+
+  onAnswerChanged: (answer) ->
+    @setState {answerId: answer.id}
+    @props.onAnswerChanged?(answer)
+
+  onFreeResponseChange: (freeResponse) ->
+    {id} = @props
+
+    @setState {freeResponse}
+    @props.onFreeResponseChange?(id, freeResponse)
+
+  onChangeAnswerAttempt: (answer) ->
+    {id} = @props
+
+    console.log('You cannot change an answer on a problem you\'ve reviewed.', 'TODO: show warning in ui.')
+    @props.onChangeAnswerAttempt?(id, answer)
+
+  onContinue: ->
+    {id, panel, canReview, onNextStep, onStepCompleted, onContinue, isContinueEnabled} = @props
+
+    return unless isContinueEnabled and @isContinueEnabled(@props, @state)
+
+    if onContinue?
+      onContinue(@state)
+      return
+
+    if panel is 'multiple-choice'
+      onStepCompleted(id)
+      onNextStep(id) unless canReview
+
+  render: ->
+    {
+      step,
+      panel,
+      pinned,
+      helpLink,
+      isContinueEnabled,
+      waitingText,
+      className,
+      includeFooter,
+      includeGroup,
+      idLink
+    } = @props
+
+    {group, related_content} = step
+
+    onInputChange = ON_CHANGE[panel]
+
+    panelProps = _.omit(@props, props.notPanel)
+    panelProps.choicesEnabled = not waitingText and panel is 'multiple-choice'
+    panelProps[onInputChange] = @[onInputChange]
+
+    controlProps =
+      isContinueEnabled: isContinueEnabled and @isContinueEnabled(@props, @state)
+      onContinue: @onContinue
+
+    if includeFooter
+      footerProps = @props
+      footerProps = _.omit(footerProps, 'idLink') if pinned
+      footer = <ExFooter {...footerProps} {...controlProps}/>
+
+    if includeGroup
+      exerciseGroup =
+        <ExerciseGroup
+          key='step-exercise-group'
+          project={@props.project}
+          group={group}
+          exercise_uid={step.content?.uid}
+          related_content={related_content}/>
+
+    cardClasses = classnames 'task-step', 'openstax-exercise-card', className, {
+      "deleted-homework": @props.task?.type is 'homework' and @props.task?.is_deleted
+      "deleted-reading": @props.task?.type is 'reading' and @props.task?.is_deleted
+    }
+
+
+    <CardBody className={cardClasses} pinned={pinned} footer={footer}>
+      <div className="exercise-#{panel}" data-step={@props.stepPartIndex}>
+        {exerciseGroup}
+        <ExMode
+          {...step}
+          {...panelProps}
+          mode={panel}/>
+        {idLink if pinned}
+      </div>
+      {helpLink}
+    </CardBody>
+
+module.exports = ExerciseStepCard
diff --git a/shared/src/components/exercise/part.cjsx b/shared/src/components/exercise/part.cjsx
new file mode 100644
index 0000000000..98b339c469
--- /dev/null
+++ b/shared/src/components/exercise/part.cjsx
@@ -0,0 +1,132 @@
+React = require 'react'
+_ = require 'underscore'
+
+camelCase = require 'camelcase'
+
+ExerciseStepCard = require './part-card'
+{propTypes} = require './props'
+{step} = propTypes.ExerciseStepCard
+
+# TODO clean this up.
+REVIEW_CONTROL_PROPS = ['refreshStep', 'recoverFor', 'canTryAnother']
+
+NOT_REVIEW_PROPS = ['onNextStep', 'canReview', 'disabled']
+NOT_TEACHER_READ_ONLY_PROPS = _.union(NOT_REVIEW_PROPS, ['onStepCompleted', 'canTryAnother'])
+NOT_MULTIPLE_CHOICE_PROPS = _.union(REVIEW_CONTROL_PROPS, ['disabled'])
+NOT_FREE_RESPONSE_PROPS = _.union(REVIEW_CONTROL_PROPS, ['onStepCompleted', 'onNextStep', 'canReview'])
+
+ExercisePart = React.createClass
+  displayName: 'ExercisePart'
+  propTypes:
+    id: React.PropTypes.string.isRequired
+    taskId: React.PropTypes.string.isRequired
+    onStepCompleted: React.PropTypes.func.isRequired
+    onNextStep: React.PropTypes.func.isRequired
+    getCurrentPanel: React.PropTypes.func.isRequired
+    step: step
+
+    setFreeResponseAnswer: React.PropTypes.func.isRequired
+    setAnswerId: React.PropTypes.func.isRequired
+
+    getReadingForStep: React.PropTypes.func
+    refreshStep: React.PropTypes.func
+    recoverFor: React.PropTypes.func
+
+    review: React.PropTypes.string
+    focus: React.PropTypes.bool
+    courseId: React.PropTypes.string
+    canTryAnother: React.PropTypes.bool
+    canReview: React.PropTypes.bool
+    disabled: React.PropTypes.bool
+
+    idLink: React.PropTypes.func
+
+  getInitialState: ->
+    {id} = @props
+
+    currentPanel: @props.getCurrentPanel(id)
+
+  componentWillMount: ->
+    {id} = @props
+    @updateCurrentPanel(@props) unless @state.currentPanel
+
+  componentWillReceiveProps: (nextProps) ->
+    @updateCurrentPanel(nextProps)
+
+  updateCurrentPanel: (props) ->
+    {id, getCurrentPanel} = props or @props
+    currentPanel = getCurrentPanel(id)
+    @setState({currentPanel}) if currentPanel? and @state.currentPanel isnt currentPanel
+
+  getDefaultProps: ->
+    focus: true
+    review: ''
+    pinned: true
+    canTryAnother: false
+    canReview: false
+
+  refreshMemory: ->
+    {id, taskId} = @props
+
+    {index} = @props.getReadingForStep(id, taskId)
+    @props.refreshStep(index, id)
+
+  tryAnother: ->
+    {id} = @props
+    @props.recoverFor(id)
+
+  onFreeResponseContinue: (state) ->
+    {id} = @props
+    {freeResponse} = state
+    @props.setFreeResponseAnswer(id, freeResponse)
+
+  onMultipleChoiceAnswerChanged: (answer) ->
+    {id} = @props
+    @props.setAnswerId(id, answer.id)
+
+  getReviewProps: ->
+    reviewProps = _.omit(@props, NOT_REVIEW_PROPS)
+    reviewProps.onContinue = @props.onNextStep
+    reviewProps.refreshMemory = @refreshMemory
+    reviewProps.tryAnother = @tryAnother
+
+    reviewProps
+
+  getMultipleChoiceProps: ->
+    multipleChoiceProps = _.omit(@props, NOT_MULTIPLE_CHOICE_PROPS)
+    multipleChoiceProps.onAnswerChanged = @onMultipleChoiceAnswerChanged
+
+    multipleChoiceProps
+
+  getFreeResponseProps: ->
+    freeResponseProps = _.omit(@props, NOT_FREE_RESPONSE_PROPS)
+    freeResponseProps.onContinue = @onFreeResponseContinue
+
+    freeResponseProps
+
+  getTeacherReadOnlyProps: ->
+    teacherReadOnlyProps = _.omit(@props, NOT_TEACHER_READ_ONLY_PROPS)
+    teacherReadOnlyProps.onContinue = @props.onNextStep
+    teacherReadOnlyProps.controlButtons = false
+    teacherReadOnlyProps.type = 'teacher-review'
+
+    teacherReadOnlyProps
+
+  # add get props methods for different panel types as needed here
+
+  render: ->
+    {id, step, getWaitingText, waitingText} = @props
+    {currentPanel} = @state
+
+    # panel is one of ['review', 'multiple-choice', 'free-response', 'teacher-read-only']
+    getPropsForPanel = camelCase "get-#{currentPanel}-props"
+    cardProps = @[getPropsForPanel]?()
+
+    <ExerciseStepCard
+      {...cardProps}
+      step={step}
+      panel={currentPanel}
+      waitingText={getWaitingText?(id) or waitingText}
+    />
+
+module.exports = ExercisePart
diff --git a/shared/src/components/exercise/props.cjsx b/shared/src/components/exercise/props.cjsx
new file mode 100644
index 0000000000..15f769e5a5
--- /dev/null
+++ b/shared/src/components/exercise/props.cjsx
@@ -0,0 +1,83 @@
+React = require 'react'
+_ = require 'underscore'
+
+extendPropTypes = (propTypes...) ->
+  propTypes.unshift({})
+  _.extend.apply(_, propTypes)
+
+PANEL_PROPS_TYPES =
+  panel: React.PropTypes.oneOf(['review', 'multiple-choice', 'free-response', 'teacher-read-only'])
+
+CONTROL_PROPS_TYPES =
+  controlText: React.PropTypes.string
+
+STEP_PROP_TYPES =
+  content: React.PropTypes.object.isRequired
+  feedback_html: React.PropTypes.string
+  correct_answer_id: React.PropTypes.string
+  answer_id: React.PropTypes.string
+  free_response: React.PropTypes.string
+  group: React.PropTypes.string
+  related_content: React.PropTypes.array
+  task: React.PropTypes.object
+
+CONTINUE_PROP_TYPES =
+  isContinueEnabled: React.PropTypes.bool
+  isContinueFailed: React.PropTypes.bool
+  waitingText: React.PropTypes.string
+  children: React.PropTypes.string
+  onContinue: React.PropTypes.func
+
+REVIEW_CONTROL_PROP_TYPES =
+  review: React.PropTypes.string
+  isRecovering: React.PropTypes.bool
+  canTryAnother: React.PropTypes.bool
+  tryAnother: React.PropTypes.func
+  canRefreshMemory: React.PropTypes.bool
+  refreshMemory: React.PropTypes.func
+
+FREE_RESPONSE_PROP_TYPES =
+  free_response: React.PropTypes.string
+  focus: React.PropTypes.bool.isRequired
+  disabled: React.PropTypes.bool
+  onFreeResponseChange: React.PropTypes.func
+
+MULTIPLE_CHOICE_PROP_TYPES =
+  choicesEnabled: React.PropTypes.bool.isRequired
+  canReview: React.PropTypes.bool.isRequired
+  onAnswerChanged: React.PropTypes.func
+
+
+EXERCISE_STEP_CARD_PROP_TYPES = _.extend({}, CONTINUE_PROP_TYPES, REVIEW_CONTROL_PROP_TYPES)
+EXERCISE_STEP_CARD_PROP_TYPES.step = React.PropTypes.shape(STEP_PROP_TYPES).isRequired
+EXERCISE_STEP_CARD_PROP_TYPES.pinned = React.PropTypes.bool
+EXERCISE_STEP_CARD_PROP_TYPES.allowKeyNav = React.PropTypes.bool
+EXERCISE_STEP_CARD_PROP_TYPES.review = React.PropTypes.string
+EXERCISE_STEP_CARD_PROP_TYPES.controlText = React.PropTypes.string
+
+EXERCISE_STEP_CARD_PROP_TYPES.onAnswerChanged = React.PropTypes.func
+EXERCISE_STEP_CARD_PROP_TYPES.onFreeResponseChange = React.PropTypes.func
+EXERCISE_STEP_CARD_PROP_TYPES.onChangeAnswerAttempt = React.PropTypes.func
+
+CONTROL_PROPS = _.union(_.keys(CONTINUE_PROP_TYPES), _.keys(REVIEW_CONTROL_PROP_TYPES))
+FOOTER_PROPS = ['pinned', 'courseId', 'id', 'taskId', 'review', 'panel', 'controlButtons', 'idLink']
+NOT_PANEL_PROPS = _.union(
+  CONTROL_PROPS,
+  FOOTER_PROPS,
+  ['onContinue', 'isContinueEnabled', 'step']
+)
+
+propTypes =
+  ExContinueButton: extendPropTypes(CONTINUE_PROP_TYPES)
+  ExReviewControls: extendPropTypes(CONTINUE_PROP_TYPES, REVIEW_CONTROL_PROP_TYPES)
+  ExControls: extendPropTypes(CONTINUE_PROP_TYPES, REVIEW_CONTROL_PROP_TYPES, PANEL_PROPS_TYPES, CONTROL_PROPS_TYPES)
+  ExFreeResponse: extendPropTypes(STEP_PROP_TYPES, FREE_RESPONSE_PROP_TYPES)
+  ExMultipleChoice: extendPropTypes(STEP_PROP_TYPES, MULTIPLE_CHOICE_PROP_TYPES)
+  ExReview: extendPropTypes(STEP_PROP_TYPES)
+  ExerciseStepCard: extendPropTypes(EXERCISE_STEP_CARD_PROP_TYPES, PANEL_PROPS_TYPES)
+
+props = _.mapObject(propTypes, _.keys)
+props.StepFooter = FOOTER_PROPS
+props.notPanel = _.union(props.ExReviewControls, props.StepFooter, ['step'])
+
+module.exports = {propTypes, props}
diff --git a/shared/src/components/exercise/settings.coffee b/shared/src/components/exercise/settings.coffee
new file mode 100644
index 0000000000..bd41905600
--- /dev/null
+++ b/shared/src/components/exercise/settings.coffee
@@ -0,0 +1,27 @@
+{ExContinueButton, ExReviewControls} = require './controls'
+
+CONTROLS =
+  'free-response': ExContinueButton
+  'multiple-choice': ExContinueButton
+  'review': ExReviewControls
+  'teacher-read-only': ExContinueButton
+
+CONTROLS_TEXT =
+  'free-response': 'Answer'
+  'multiple-choice': 'Submit'
+  'review': 'Next Question'
+  'teacher-read-only': 'Next Question'
+
+CONTINUE_CHECKS =
+  'free-response': 'freeResponse'
+  'multiple-choice': 'answerId'
+  'review': null
+  'teacher-read-only': null
+
+ON_CHANGE =
+  'free-response': 'onFreeResponseChange'
+  'multiple-choice': 'onAnswerChanged'
+  'review': 'onChangeAnswerAttempt'
+  'teacher-read-only': 'onChangeAnswerAttempt'
+
+module.exports = {CONTROLS, CONTROLS_TEXT, CONTINUE_CHECKS, ON_CHANGE}
diff --git a/shared/src/components/get-position-mixin.cjsx b/shared/src/components/get-position-mixin.cjsx
new file mode 100644
index 0000000000..e2e0d477bb
--- /dev/null
+++ b/shared/src/components/get-position-mixin.cjsx
@@ -0,0 +1,3 @@
+module.exports =
+  getTopPosition: (el) ->
+    el.getBoundingClientRect().top - document.body.getBoundingClientRect().top
diff --git a/shared/src/components/html.cjsx b/shared/src/components/html.cjsx
new file mode 100644
index 0000000000..626077ddd8
--- /dev/null
+++ b/shared/src/components/html.cjsx
@@ -0,0 +1,61 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{ typesetMath } = require '../helpers/mathjax'
+{ wrapFrames } = require '../helpers/html-videos'
+
+module.exports = React.createClass
+  displayName: 'ArbitraryHtmlAndMath'
+  propTypes:
+    className: React.PropTypes.string
+    html: React.PropTypes.string
+    block: React.PropTypes.bool.isRequired
+    processHtmlAndMath: React.PropTypes.func
+  getDefaultProps: ->
+    block: false
+    shouldExcludeFrame: (frame) -> false
+
+  render: ->
+    {className, block} = @props
+
+    classes = classnames 'openstax-has-html', className
+
+    otherProps = _.omit(@props, 'className', 'block', 'html')
+
+    if block
+      <div
+        {...otherProps}
+        className={classes}
+        dangerouslySetInnerHTML={@getHTMLFromProp()} />
+    else
+      <span
+        {...otherProps}
+        className={classes}
+        dangerouslySetInnerHTML={@getHTMLFromProp()} />
+
+  getHTMLFromProp: ->
+    {html} = @props
+    if html
+      __html: html
+
+  # rendering uses dangerouslySetInnerHTML and then runs MathJax,
+  # Both of which React can't optimize like it's normal render operations
+  # Accordingly, only update if any of our props have actually changed
+  shouldComponentUpdate: (nextProps, nextState) ->
+    for propName, value of nextProps
+      return true if @props[propName] isnt value
+    return false
+
+  componentDidMount:  -> @updateDOMNode()
+  componentDidUpdate: -> @updateDOMNode()
+
+  # Perform manipulation on HTML contained inside the components node.
+  updateDOMNode: ->
+    # External links should open in a new window
+    root = @getDOMNode()
+    links = root.querySelectorAll('a')
+    _.each links, (link) ->
+      link.setAttribute('target', '_blank') unless link.getAttribute('href')?[0] is '#'
+    @props.processHtmlAndMath?(root) or typesetMath(root)
+    wrapFrames(root, @props.shouldExcludeFrame)
diff --git a/shared/src/components/notifications/bar.cjsx b/shared/src/components/notifications/bar.cjsx
new file mode 100644
index 0000000000..3b1576d442
--- /dev/null
+++ b/shared/src/components/notifications/bar.cjsx
@@ -0,0 +1,31 @@
+React = require 'react'
+_ = require 'underscore'
+
+Notifications = require '../../model/notifications'
+
+TYPES =
+  system: require './system'
+  accounts: require './email'
+
+NotificationBar = React.createClass
+
+  componentWillMount: ->
+    Notifications.on('change', @onChange)
+  componentWillUnmount: ->
+    Notifications.off('change', @onChange)
+
+  onChange: ->
+    @forceUpdate()
+
+  render: ->
+    notifications = Notifications.getActive()
+    return null if _.isEmpty(notifications)
+
+    <div className="openstax-notifications-bar">
+      {for notice in notifications
+        Component = TYPES[notice.type] or TYPES['system']
+        <Component key={notice.id} notice={notice} />}
+    </div>
+
+
+module.exports = NotificationBar
diff --git a/shared/src/components/notifications/email.cjsx b/shared/src/components/notifications/email.cjsx
new file mode 100644
index 0000000000..1404b37cdb
--- /dev/null
+++ b/shared/src/components/notifications/email.cjsx
@@ -0,0 +1,124 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+classnames = require 'classnames'
+_ = require 'underscore'
+
+URLs = require '../../model/urls'
+Notifications = require '../../model/notifications'
+
+EmailNotification = React.createClass
+  propTypes:
+    notice: React.PropTypes.shape(
+      id: React.PropTypes.number.isRequired
+      value: React.PropTypes.string.isRequired
+    ).isRequired
+
+  acknowledge: ->
+    Notifications.acknowledge(@props.notice)
+    undefined # silence React warning about return value
+
+  # If used elsewhere, the on/off dance needs to be extracted to a component
+  componentWillMount: ->
+    @props.notice.on('change', @onChange)
+  componentWillUnmount: ->
+    @props.notice.off('change', @onChange)
+  componentWillReceiveProps: (nextProps) ->
+    if nextProps.notice and nextProps.notice isnt @props.notice
+      @props.notice.off('change', @onChange)
+      nextProps.notice.on('change', @onChange)
+
+  onChange: ->
+    @forceUpdate()
+
+  onVerify: ->
+    @props.notice.sendConfirmation()
+
+  onPinCheck: ->
+    @props.notice.sendVerification( @refs.verifyInput.getValue(), @onSuccess)
+
+  renderSpinner: ->
+    <span className="body">
+      <span className="message">
+        Requesting...
+      </span>
+      <i className='fa fa-spin fa-2x fa-spinner' />
+    </span>
+
+  renderStart: ->
+    <span className="body">
+      <i className='icon fa fa-envelope-o' />
+      Verifying your email address allows you to recover your password if you ever forget it.
+      <a className='action' onClick={@onVerify}>Verify now</a>
+    </span>
+
+  onVerifyKey: (ev) ->
+    if ev.key is 'Enter'
+      @onPinCheck()
+
+  renderPin: ->
+    _.defer =>
+      @refs.verifyInput?.getInputDOMNode().focus()
+    <span className="body verify">
+      <i className='icon fa fa-envelope-o' />
+      <span className="message">
+        Check your email inbox. Enter the 6-digit verification code:
+      </span>
+      <BS.Input autofocus ref='verifyInput' onKeyPress={@onVerifyKey} type="text" />
+      <a className='pin-check action' onClick={@onPinCheck}>Go</a>
+    </span>
+
+  renderFailure: ->
+    <span className="body">
+      <a href={URLs.get('accounts_profile')} className="action" target="_blank">
+        Visit Profile >>
+      </a>
+    </span>
+
+  renderSuccess: ->
+    <span className="body">
+      <i className='icon fa fa-envelope-o' />
+      <span className="message">Verification was successful!</span>
+    </span>
+
+  onDismiss: ->
+    Notifications.acknowledge(@props.notice)
+    undefined # silence react warning about return value
+
+  onSuccess: ->
+    # wait a bit so the "Success" message is seen, then hide
+    _.delay =>
+      Notifications.acknowledge(@props.notice)
+    , 1500
+
+  render: ->
+
+    body = if @props.notice.is_verified
+      @renderSuccess()
+    else if @props.notice.requestInProgress
+      @renderSpinner()
+    else if @props.notice.verifyInProgress
+      if @props.notice.verificationFailed
+        @renderFailure()
+      else
+        @renderPin()
+    else
+      @renderStart()
+
+    if @props.notice.error
+      error =
+        <span className="error">
+          <i className='icon fa fa-exclamation-circle' />
+          <span className="body">{@props.notice.error}</span>
+        </span>
+
+    classNames = classnames('notification', 'email',
+      {'with-error': @props.notice.error}
+    )
+    <div className={classNames}>
+      {error}
+      {body}
+      <a className='dismiss' onClick={@onDismiss}>Dismiss</a>
+    </div>
+
+
+module.exports = EmailNotification
diff --git a/shared/src/components/notifications/system.cjsx b/shared/src/components/notifications/system.cjsx
new file mode 100644
index 0000000000..86c508cc01
--- /dev/null
+++ b/shared/src/components/notifications/system.cjsx
@@ -0,0 +1,35 @@
+React = require 'react'
+classnames = require 'classnames'
+
+Notifications = require '../../model/notifications'
+
+SystemNotification = React.createClass
+  propTypes:
+    notice: React.PropTypes.shape(
+      id: React.PropTypes.string.isRequired
+      message: React.PropTypes.string.isRequired
+    ).isRequired
+
+  acknowledge: ->
+    Notifications.acknowledge(@props.notice)
+    undefined # silence React warning about return value
+
+  getIcon: ->
+    return @props.notice.icon if @props.notice.icon
+    switch @props.notice.level
+      when 'alert' then 'exclamation-triangle'
+      when 'error', 'warning' then 'exclamation-circle'
+      else
+        'info-circle'
+
+  render: ->
+
+    <div className={classnames('notification', 'system', @props.notice.level)}>
+      <span className="body">
+        <i className={"icon fa fa-#{@getIcon()}"} />
+        {@props.notice.message}
+      </span>
+      <a className='dismiss' onClick={@acknowledge}>Dismiss</a>
+    </div>
+
+module.exports = SystemNotification
diff --git a/shared/src/components/pinned-header-footer-card/index.cjsx b/shared/src/components/pinned-header-footer-card/index.cjsx
new file mode 100644
index 0000000000..a72f55c946
--- /dev/null
+++ b/shared/src/components/pinned-header-footer-card/index.cjsx
@@ -0,0 +1,184 @@
+React = require 'react'
+_ = require 'underscore'
+
+{ScrollListenerMixin} = require 'react-scroll-components'
+ResizeListenerMixin = require '../resize-listener-mixin'
+GetPositionMixin = require '../get-position-mixin'
+
+{PinnedHeader, CardBody, PinnableFooter} = require './sections'
+
+module.exports = React.createClass
+  displayName: 'PinnedHeaderFooterCard'
+  propTypes:
+    cardType: React.PropTypes.string.isRequired
+    buffer: React.PropTypes.number
+    scrollSpeedBuffer: React.PropTypes.number
+    forceShy: React.PropTypes.bool
+    containerBuffer: React.PropTypes.number
+
+  getDefaultProps: ->
+    buffer: 60
+    scrollSpeedBuffer: 30
+    forceShy: false
+    containerBuffer: 30
+
+  getInitialState: ->
+    offset: 0
+    shy: false
+    pinned: false
+    shouldBeShy: false
+    headerHeight: 0
+    containerMarginTop: '0px'
+
+  mixins: [ScrollListenerMixin, ResizeListenerMixin, GetPositionMixin]
+
+  componentWillMount: ->
+    @previousBodyClasses = document.body.className
+    cardBodyClass = @props.cardType
+    document.body.className = "#{cardBodyClass}-view"
+    document.body.classList.add('pinned-view')
+    document.body.classList.add('pinned-force-shy') if @props.forceShy
+
+  componentWillUnmount: ->
+    document.body.className = @previousBodyClasses
+
+  getOffset: ->
+    if @props.fixedOffset?
+      offset = @props.fixedOffset
+    else if @refs.header?
+      offset = @getTopPosition(@refs.header.getDOMNode())
+
+    offset
+
+  setOffset: ->
+    offset = @getOffset()
+    @setState(offset: offset)
+
+  shouldPinHeader: (prevScrollTop, currentScrollTop) ->
+    currentScrollTop >= @state.offset - @props.buffer
+
+  isScrollingSlowed: (prevScrollTop, currentScrollTop) ->
+    Math.abs(prevScrollTop - currentScrollTop) <= @props.scrollSpeedBuffer
+
+  isScrollingDown: (prevScrollTop, currentScrollTop) ->
+    currentScrollTop > prevScrollTop
+
+  isScrollPassBuffer: (prevScrollTop, currentScrollTop) ->
+    currentScrollTop >= @props.buffer + @state.offset
+
+  shouldBeShy: (prevScrollTop, currentScrollTop) ->
+    # should not pin regardless of scroll direction if the scroll top is above buffer
+    unless @isScrollPassBuffer(prevScrollTop, currentScrollTop)
+      shouldBeShy = false
+
+    # otherwise, when scroll top is below buffer
+    # and on down scroll
+    else if @isScrollingDown(prevScrollTop, currentScrollTop)
+      # header should pin
+      shouldBeShy = true
+
+    # or when up scrolling is slow
+    else if @isScrollingSlowed(prevScrollTop, currentScrollTop)
+      # leave the pinning as is
+      shouldBeShy = @state.shy
+
+    # else, the only case left is if up scrolling is fast
+    else
+      # unpin on fast up scroll
+      shouldBeShy = false
+
+    shouldBeShy
+
+  unPin: ->
+    @setState(pinned: false)
+
+  updatePinState: (prevScrollTop) ->
+    addOrRemove = [
+      'remove' # remove class if shouldPinHeader is false
+      'add' # add class if shouldPinHeader is true
+    ]
+    # set the pinned state
+    @setState(
+      # allow shouldBeShy override if needed
+      shy: @state.shouldBeShy or @shouldBeShy(prevScrollTop, @state.scrollTop)
+      pinned: @shouldPinHeader(prevScrollTop, @state.scrollTop)
+      # reset shouldBeShy
+      shouldBeShy: false
+    )
+    shouldPinHeader = @state.pinned * 1
+    shouldBeShy = @state.shy * 1
+
+    pinnedClassAction = addOrRemove[shouldPinHeader]
+    document.body.classList[pinnedClassAction]('pinned-on')
+
+    shyClassAction = addOrRemove[shouldBeShy]
+    document.body.classList[shyClassAction]('pinned-shy')
+
+  forceShy: ->
+    window.scroll(0, @props.buffer + @state.offset)
+    @setState(shouldBeShy: true)
+
+  getHeaderHeight: ->
+    header = @refs.header?.getDOMNode()
+    headerHeight = header?.offsetHeight or 0
+
+  setOriginalContainerMargin: ->
+    container = @refs.container?.getDOMNode()
+    return unless container
+
+    @setState(containerMarginTop: window.getComputedStyle(container).marginTop) if window.getComputedStyle?
+
+  setContainerMargin: ->
+    headerHeight = @getHeaderHeight()
+    container = @refs.container?.getDOMNode()
+    return unless container
+
+    @setState(headerHeight: headerHeight)
+
+  _resizeListener: ->
+    @setContainerMargin()
+
+  componentDidMount: ->
+    @setOffset()
+    @updatePinState(0)
+    @setOriginalContainerMargin()
+    @setContainerMargin()
+
+  componentDidUpdate: (prevProps, prevState) ->
+    didOffsetChange = (not @state.pinned) and not (@state.offset is @getOffset())
+    didShouldPinChange = not prevState.pinned is @shouldPinHeader(prevState.scrollTop, @state.scrollTop)
+    didShouldBeShyChange = not prevState.shy is @shouldBeShy(prevState.scrollTop, @state.scrollTop)
+    didHeaderHeightChange = not (prevState.headerHeight is @getHeaderHeight())
+
+    @setOffset() if didOffsetChange
+    @updatePinState(prevState.scrollTop) if didShouldPinChange or didShouldBeShyChange
+    @setContainerMargin() if didHeaderHeightChange or didShouldPinChange
+
+  componentWillReceiveProps: ->
+    @forceShy() if @props.forceShy
+
+  render: ->
+    {className} = @props
+
+    classes = ['pinned-container']
+    classes.push(className) if className?
+    classes = classes.join(' ')
+
+    childrenProps = _.omit(@props, 'children', 'header', 'footer', 'className')
+
+    if @state.pinned
+      containerStyle =
+        marginTop: (@state.headerHeight + @props.containerBuffer) + 'px'
+    else
+      containerStyle =
+        marginTop: @state.containerMarginTop
+
+    if @props.header?
+      pinnedHeader = <PinnedHeader {...childrenProps} ref='header'>
+        {@props.header}
+      </PinnedHeader>
+
+    <div className={classes} style={containerStyle} ref='container'>
+      {pinnedHeader}
+      {@props.children}
+    </div>
diff --git a/shared/src/components/pinned-header-footer-card/sections.cjsx b/shared/src/components/pinned-header-footer-card/sections.cjsx
new file mode 100644
index 0000000000..15416d569e
--- /dev/null
+++ b/shared/src/components/pinned-header-footer-card/sections.cjsx
@@ -0,0 +1,64 @@
+React = require 'react'
+
+PinnedHeader = React.createClass
+  displayName: 'PinnedHeader'
+
+  propTypes:
+    className: React.PropTypes.string
+
+  render: ->
+    {className} = @props
+    classes = 'pinned-header'
+    classes += " #{className}" if className?
+
+    <div className={classes}>
+      {@props.children}
+    </div>
+
+PinnableFooter = React.createClass
+  displayName: 'PinnableFooter'
+
+  propTypes:
+    className: React.PropTypes.string
+    pinned: React.PropTypes.bool.isRequired
+
+  getDefaultProps: ->
+    pinned: true
+
+  render: ->
+    {className, pinned} = @props
+    classPrefix = if pinned then 'pinned' else 'card'
+    classes = "#{classPrefix}-footer"
+    classes += " #{className}" if className?
+
+    <div className={classes}>
+      {@props.children}
+    </div>
+
+CardBody = React.createClass
+  displayName: 'CardBody'
+
+  propTypes:
+    className: React.PropTypes.string
+    footerClassName: React.PropTypes.string
+    pinned: React.PropTypes.bool.isRequired
+
+  getDefaultProps: ->
+    pinned: true
+
+  render: ->
+    {className, pinned, footerClassName, footer, children} = @props
+    classes = 'card-body'
+    classes += " #{className}" if className?
+
+    if footer
+      pinnableFooter = <PinnableFooter pinned={pinned} className={footerClassName}>
+          {footer}
+        </PinnableFooter>
+
+    <div className={classes}>
+      {children}
+      {pinnableFooter}
+    </div>
+
+module.exports = {PinnedHeader, CardBody, PinnableFooter}
diff --git a/shared/src/components/question/answer.cjsx b/shared/src/components/question/answer.cjsx
new file mode 100644
index 0000000000..5e4805b9d4
--- /dev/null
+++ b/shared/src/components/question/answer.cjsx
@@ -0,0 +1,144 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+keymaster = require 'keymaster'
+
+keysHelper = require '../../helpers/keys'
+ArbitraryHtmlAndMath = require '../html'
+{SimpleFeedback} = require './feedback'
+
+idCounter = 0
+
+isAnswerCorrect = (answer, correctAnswerId) ->
+  isCorrect = answer.id is correctAnswerId
+  isCorrect = (answer.correctness is '1.0') if answer.correctness?
+
+  isCorrect
+
+isAnswerChecked = (answer, chosenAnswer) ->
+  isChecked = answer.id in chosenAnswer
+
+Answer = React.createClass
+  displayName: 'Answer'
+  propTypes:
+    answer: React.PropTypes.shape(
+      id: React.PropTypes.oneOfType([
+        React.PropTypes.string
+        React.PropTypes.number
+      ]).isRequired
+      content_html: React.PropTypes.string.isRequired
+      correctness: React.PropTypes.string
+      selected_count: React.PropTypes.number
+    ).isRequired
+
+    iter: React.PropTypes.number.isRequired
+    qid: React.PropTypes.oneOfType([
+      React.PropTypes.string
+      React.PropTypes.number
+    ]).isRequired
+    type: React.PropTypes.string.isRequired
+    hasCorrectAnswer: React.PropTypes.bool.isRequired
+    onChangeAnswer: React.PropTypes.func.isRequired
+
+    disabled: React.PropTypes.bool
+    chosenAnswer: React.PropTypes.array
+    correctAnswerId: React.PropTypes.string
+    answered_count: React.PropTypes.number
+    show_all_feedback: React.PropTypes.bool
+    keyControl: React.PropTypes.oneOfType([
+      React.PropTypes.string
+      React.PropTypes.number
+      React.PropTypes.array
+    ])
+
+  getDefaultProps: ->
+    disabled: false
+    show_all_feedback: false
+
+  componentWillMount: ->
+    @setUpKeys() if @shouldKey()
+
+  componentWillUnmount: ->
+    {keyControl} = @props
+    keysHelper.off(keyControl, 'multiple-choice') if keyControl?
+
+  componentDidUpdate: (prevProps) ->
+    {keyControl} = @props
+
+    if @shouldKey(prevProps) and not @shouldKey()
+      keysHelper.off(prevProps.keyControl, 'multiple-choice')
+
+    if @shouldKey() and prevProps.keyControl isnt keyControl
+      @setUpKeys()
+
+  shouldKey: (props) ->
+    props ?= @props
+    {keyControl, disabled} = props
+
+    keyControl? and not disabled
+
+  setUpKeys: ->
+    {answer, onChangeAnswer, keyControl} = @props
+
+    keyInAnswer = _.partial onChangeAnswer, answer
+    keysHelper.on keyControl, 'multiple-choice', keyInAnswer
+    keymaster.setScope('multiple-choice')
+
+  contextTypes:
+    processHtmlAndMath: React.PropTypes.func
+
+  render: ->
+    {answer, iter, qid, type, correctAnswerId, answered_count, hasCorrectAnswer, chosenAnswer, onChangeAnswer, disabled} = @props
+    qid ?= "auto-#{idCounter++}"
+
+    isChecked = isAnswerChecked(answer, chosenAnswer)
+    isCorrect = isAnswerCorrect(answer, correctAnswerId)
+
+    classes = classnames 'answers-answer',
+      'answer-checked': isChecked
+      'answer-correct': isCorrect
+
+    unless (hasCorrectAnswer or type is 'teacher-review' or type is 'teacher-preview')
+      radioBox = <input
+        type='radio'
+        className='answer-input-box'
+        checked={isChecked}
+        id="#{qid}-option-#{iter}"
+        name="#{qid}-options"
+        onChange={_.partial(onChangeAnswer, answer)}
+        disabled={disabled}
+      />
+
+    if type is 'teacher-review'
+      percent = Math.round(answer.selected_count / answered_count * 100) or 0
+      selectedCount = <div
+        className='selected-count'
+        data-count="#{answer.selected_count}"
+        data-percent="#{percent}">
+      </div>
+
+    if @props.show_all_feedback and answer.feedback_html
+      feedback = <SimpleFeedback key='question-mc-feedback'>{answer.feedback_html}</SimpleFeedback>
+
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    <div className='openstax-answer'>
+      <div className={classes}>
+        {selectedCount}
+        {radioBox}
+        <label
+          htmlFor="#{qid}-option-#{iter}"
+          className='answer-label'>
+          <div className='answer-letter' />
+          <div className='answer-answer'>
+            <ArbitraryHtmlAndMath
+              {...htmlAndMathProps}
+              className='answer-content'
+              html={answer.content_html} />
+            {feedback}
+          </div>
+        </label>
+      </div>
+    </div>
+
+module.exports = {Answer}
diff --git a/shared/src/components/question/answers-table.cjsx b/shared/src/components/question/answers-table.cjsx
new file mode 100644
index 0000000000..8d8b80f3d6
--- /dev/null
+++ b/shared/src/components/question/answers-table.cjsx
@@ -0,0 +1,143 @@
+React = require 'react'
+_ = require 'underscore'
+
+keymaster = require 'keymaster'
+keysHelper = require '../../helpers/keys'
+
+KEYS =
+  'multiple-choice-numbers': _.range(1, 10) # 1 - 9
+
+# a - i
+KEYS['multiple-choice-alpha'] = _.map(KEYS['multiple-choice-numbers'], _.partial(keysHelper.getCharFromNumKey, _, null))
+
+KEYS['multiple-choice'] = _.zip(KEYS['multiple-choice-numbers'], KEYS['multiple-choice-alpha'])
+
+KEYSETS_PROPS = _.keys(KEYS)
+KEYSETS_PROPS.push(null) # keySet could be null for disabling keyControling
+
+ArbitraryHtmlAndMath = require '../html'
+{Answer} = require './answer'
+{Feedback} = require './feedback'
+Instructions = require './instructions'
+
+idCounter = 0
+
+
+isAnswerChecked = (answer, chosenAnswer) ->
+  isChecked = answer.id in chosenAnswer
+
+AnswersTable = React.createClass
+  displayName: 'AnswersTable'
+  propTypes:
+    model: React.PropTypes.object.isRequired
+    type: React.PropTypes.string.isRequired
+    answer_id: React.PropTypes.string
+    correct_answer_id: React.PropTypes.string
+    feedback_html: React.PropTypes.string
+    answered_count: React.PropTypes.number
+    show_all_feedback: React.PropTypes.bool
+    onChange: React.PropTypes.func
+    onChangeAttempt: React.PropTypes.func
+    keySet: React.PropTypes.oneOf(KEYSETS_PROPS)
+
+  getDefaultProps: ->
+    type: 'student'
+    show_all_feedback: false
+    keySet: 'multiple-choice'
+
+  getInitialState: ->
+    originalKeyScope = @getOriginalKeyScope()
+
+    answer_id: null
+    originalKeyScope: originalKeyScope
+
+  componentWillReceiveProps: (nextProps) ->
+    originalKeyScope = @getOriginalKeyScope(nextProps)
+    @setState({originalKeyScope}) if originalKeyScope?
+
+    @resetToOriginalKeyScope() if not _.isNull(@props.keySet) and _.isNull(nextProps.keySet)
+
+  componentWillUnmount: ->
+    @resetToOriginalKeyScope()
+
+  getOriginalKeyScope: (props) ->
+    props ?= @props
+
+    originalKeyScope = keymaster.getScope()
+    originalKeyScope if props.keySet isnt originalKeyScope and originalKeyScope isnt @state?.originalKeyScope
+
+  resetToOriginalKeyScope: ->
+    {originalKeyScope} = @state
+    keymaster.setScope(originalKeyScope) if originalKeyScope?
+
+    @setState(originalKeyScope: undefined)
+
+  onChangeAnswer: (answer, changeEvent) ->
+    if @props.onChange?
+      @setState(answer_id: answer.id)
+      @props.onChange(answer)
+    else
+      changeEvent.preventDefault()
+      @props.onChangeAttempt?(answer)
+
+  shouldInstructionsShow: ->
+    {type, model, answer_id, correct_answer_id} = @props
+    (
+      model.formats.length > 1 and
+      not (
+        answer_id is correct_answer_id or
+        type in ['teacher-preview', 'teacher-review']
+      )
+    )
+
+  hasIncorrectAnswer: ->
+    {answer_id, correct_answer_id, choicesEnabled} = @props
+    answer_id and not choicesEnabled and answer_id isnt correct_answer_id
+
+  render: ->
+    {
+      model, type, answered_count, choicesEnabled, correct_answer_id,
+      answer_id, feedback_html, show_all_feedback, keySet, project, hasCorrectAnswer
+    } = @props
+
+    {answers, id} = model
+    return null unless answers?.length > 0
+
+    chosenAnswer = [answer_id, @state.answer_id]
+    checkedAnswerIndex = null
+
+    questionAnswerProps =
+      qid: id or "auto-#{idCounter++}"
+      correctAnswerId: correct_answer_id
+      hasCorrectAnswer: hasCorrectAnswer
+      chosenAnswer: chosenAnswer
+      onChangeAnswer: @onChangeAnswer
+      type: type
+      answered_count: answered_count
+      disabled: not choicesEnabled
+      show_all_feedback: show_all_feedback
+
+    answersHtml = _.chain(answers)
+      .map (answer, i) ->
+        additionalProps = {answer, iter: i, key: "#{questionAnswerProps.qid}-option-#{i}", keyControl: KEYS[keySet]?[i]}
+        answerProps = _.extend({}, additionalProps, questionAnswerProps)
+        checkedAnswerIndex = i if isAnswerChecked(answer, chosenAnswer)
+
+        <Answer {...answerProps}/>
+      .value()
+
+    feedback = <Feedback key='question-mc-feedback'>{feedback_html}</Feedback> if feedback_html
+    answersHtml.splice(checkedAnswerIndex + 1, 0, feedback) if feedback? and checkedAnswerIndex?
+
+    instructions = <Instructions
+      project={project}
+      hasFeedback={feedback_html?}
+      hasIncorrectAnswer={@hasIncorrectAnswer()}
+    /> if @shouldInstructionsShow()
+
+    <div className='answers-table'>
+      {instructions}
+      {answersHtml}
+    </div>
+
+module.exports = {AnswersTable}
diff --git a/shared/src/components/question/feedback.cjsx b/shared/src/components/question/feedback.cjsx
new file mode 100644
index 0000000000..f5605bf258
--- /dev/null
+++ b/shared/src/components/question/feedback.cjsx
@@ -0,0 +1,41 @@
+React = require 'react'
+classnames = require 'classnames'
+_ = require 'underscore'
+
+ArbitraryHtmlAndMath = require '../html'
+
+SimpleFeedback = React.createClass
+  displayName: 'SimpleFeedback'
+  propTypes:
+    children: React.PropTypes.string.isRequired
+  contextTypes:
+    processHtmlAndMath: React.PropTypes.func
+  render: ->
+    wrapperClasses = classnames 'question-feedback-content', 'has-html', @props.className
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    <ArbitraryHtmlAndMath
+      {...htmlAndMathProps}
+      className='question-feedback-content has-html'
+      html={@props.children}
+      block={true}/>
+
+Feedback = React.createClass
+  displayName: 'Feedback'
+  propTypes:
+    children: React.PropTypes.string.isRequired
+    position: React.PropTypes.oneOf(['top', 'bottom', 'left', 'right'])
+  getDefaultProps: ->
+    position: 'bottom'
+  contextTypes:
+    processHtmlAndMath: React.PropTypes.func
+  render: ->
+    wrapperClasses = classnames 'question-feedback', @props.position
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    <div className={wrapperClasses}>
+      <div className='arrow'/>
+      <SimpleFeedback {...htmlAndMathProps}>{@props.children}</SimpleFeedback>
+    </div>
+
+module.exports = {Feedback, SimpleFeedback}
\ No newline at end of file
diff --git a/shared/src/components/question/formats-listing.cjsx b/shared/src/components/question/formats-listing.cjsx
new file mode 100644
index 0000000000..f1abcbc4d2
--- /dev/null
+++ b/shared/src/components/question/formats-listing.cjsx
@@ -0,0 +1,24 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{AnswersTable} = require './answers-table'
+ArbitraryHtmlAndMath = require '../html'
+FormatsListing = require './formats-listing'
+
+FormatsListing = React.createClass
+  propTypes:
+    formats: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
+
+  getDefaultProps: ->
+    formats: []
+
+  render: ->
+    <div className="formats-listing">
+      <div className='header'>Formats:</div>
+      {for format, i in @props.formats
+        <span key={i}>{format}</span>}
+    </div>
+
+
+module.exports = FormatsListing
diff --git a/shared/src/components/question/index.cjsx b/shared/src/components/question/index.cjsx
new file mode 100644
index 0000000000..351f066bd8
--- /dev/null
+++ b/shared/src/components/question/index.cjsx
@@ -0,0 +1,96 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+{AnswersTable} = require './answers-table'
+ArbitraryHtmlAndMath = require '../html'
+FormatsListing = require './formats-listing'
+
+QuestionHtml = React.createClass
+  displayName: 'QuestionHtml'
+  propTypes:
+    html: React.PropTypes.string
+    type: React.PropTypes.string
+    questionNumber: React.PropTypes.number
+  getDefaultProps: ->
+    html: ''
+    type: ''
+  contextTypes:
+    processHtmlAndMath: React.PropTypes.func
+
+  render: ->
+    {html, type} = @props
+    return null unless html.length > 0
+
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    <ArbitraryHtmlAndMath
+      {...htmlAndMathProps}
+      className="question-#{type}"
+      block={true}
+      html={html}
+      data-question-number={@props.questionNumber}
+    />
+
+Question = React.createClass
+  displayName: 'Question'
+  propTypes:
+    model: React.PropTypes.object.isRequired
+    task: React.PropTypes.object
+    correct_answer_id: React.PropTypes.string
+    exercise_uid: React.PropTypes.string
+    displayFormats:  React.PropTypes.bool
+
+  childContextTypes:
+    processHtmlAndMath: React.PropTypes.func
+  getChildContext: ->
+    processHtmlAndMath: @props.processHtmlAndMath
+
+  doesArrayHaveProperty: (arrayToCheck, property) ->
+    not _.isEmpty(_.compact(_.pluck(arrayToCheck, property)))
+
+  hasAnswerCorrectness: ->
+    {correct_answer_id, model} = @props
+    {answers} = model
+
+    correct_answer_id or @doesArrayHaveProperty(answers, 'correctness')
+
+  hasSolution: ->
+    {model, correct_answer_id} = @props
+    {collaborator_solutions} = model
+
+    @hasAnswerCorrectness() and @doesArrayHaveProperty(collaborator_solutions, 'content_html')
+
+  render: ->
+    {model, correct_answer_id, exercise_uid, className, questionNumber, context, task} = @props
+    {stem_html, collaborator_solutions, formats, stimulus_html} = model
+
+    hasCorrectAnswer = !! correct_answer_id
+    classes = classnames 'openstax-question', className,
+      'has-correct-answer': hasCorrectAnswer and not (task?.is_deleted and task?.type is 'homework')
+
+    htmlAndMathProps = _.pick(@context, 'processHtmlAndMath')
+
+    exerciseUid = <div className="exercise-uid">{exercise_uid}</div> if exercise_uid?
+
+    if @hasSolution()
+      solution =
+        <div className='detailed-solution'>
+          <div className='header'>Detailed solution</div>
+          <ArbitraryHtmlAndMath {...htmlAndMathProps} className="solution" block
+            html={_.pluck(collaborator_solutions, 'content_html').join('')}
+          />
+        </div>
+
+    <div className={classes} data-question-number={questionNumber}>
+      <QuestionHtml type='context' html={context} />
+      <QuestionHtml type='stimulus' html={stimulus_html} />
+      <QuestionHtml type='stem' html={stem_html} questionNumber={questionNumber} />
+      {@props.children}
+      <AnswersTable {...@props} hasCorrectAnswer={hasCorrectAnswer}/>
+      {<FormatsListing formats={formats} /> if @props.displayFormats}
+      {solution}
+      {exerciseUid}
+    </div>
+
+module.exports = Question
diff --git a/shared/src/components/question/instructions.cjsx b/shared/src/components/question/instructions.cjsx
new file mode 100644
index 0000000000..e41d24024c
--- /dev/null
+++ b/shared/src/components/question/instructions.cjsx
@@ -0,0 +1,50 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+_ = require 'underscore'
+
+PROJECT_NAME_AND_FEEDBACK =
+  'concept-coach':
+    name: 'Concept Coach'
+    feedbackType: 'immediate feedback'
+  'tutor':
+    name: 'Tutor'
+    feedbackType: 'personalized feedback'
+
+Instructions = React.createClass
+  displayName: 'Instructions'
+
+  propTypes:
+    project: React.PropTypes.oneOf _.keys(PROJECT_NAME_AND_FEEDBACK)
+    hasIncorrectAnswer: React.PropTypes.bool
+    hasFeedback: React.PropTypes.bool
+
+  render: ->
+    {project, projectName, feedbackType, hasFeedback, hasIncorrectAnswer} = @props
+
+    if (hasIncorrectAnswer and hasFeedback)
+      return <p className="instructions">
+        Incorrect. Please review your feedback.
+      </p>
+
+    if project?
+      projectName ?= PROJECT_NAME_AND_FEEDBACK[project].name
+      feedbackType ?= PROJECT_NAME_AND_FEEDBACK[project].feedbackType
+
+    popover = <BS.Popover ref="popover" className="openstax instructions">
+      <p><b>Why do you ask me to answer twice?</b></p>
+      <p>
+        We ask for your own response first because recalling an answer from
+        memory helps your learning last longer.
+        Then, we give you multiple-choice options so you can
+        get immediate <span className="feedback-type">{feedbackType}</span>.
+      </p>
+    </BS.Popover>
+
+    <p className="instructions">
+      Now choose from one of the following options
+      <BS.OverlayTrigger placement="right" overlay={popover}>
+        <span className="text-info">Why?</span>
+      </BS.OverlayTrigger>
+    </p>
+
+module.exports = Instructions
diff --git a/shared/src/components/resize-listener-mixin.cjsx b/shared/src/components/resize-listener-mixin.cjsx
new file mode 100644
index 0000000000..6527638406
--- /dev/null
+++ b/shared/src/components/resize-listener-mixin.cjsx
@@ -0,0 +1,55 @@
+React = require 'react'
+_ = require 'underscore'
+
+module.exports =
+  propTypes:
+    resizeThrottle: React.PropTypes.number
+
+  getDefaultProps: ->
+    resizeThrottle: 200
+
+  getInitialState: ->
+    windowEl: {}
+    componentEl: {}
+    sizesInitial: {}
+
+  componentWillMount: ->
+    # need to define @resizeListener so that we can throttle resize effect
+    # and have access to @state.resizeThrottle or @props.resizeThrottle
+    @resizeListener = _.throttle(@resizeEffect, @state.resizeThrottle or @props.resizeThrottle)
+
+  componentDidMount: ->
+    _.defer(@setInitialSize)
+    window.addEventListener('resize', @resizeListener)
+
+  componentWillUnmount: ->
+    window.removeEventListener('resize', @resizeListener)
+
+  resizeEffect: (resizeEvent) ->
+    windowEl = @_getWindowSize()
+    componentEl = @_getComponentSize()
+    sizes = {windowEl, componentEl}
+
+    @setState(sizes)
+    @_resizeListener?(sizes, resizeEvent)
+
+  _getWindowSize: ->
+    width = window.innerWidth
+    height = window.innerHeight
+
+    {width, height}
+
+  _getComponentSize: ->
+    return {height: 0, width: 0} unless @isMounted()
+    componentNode = @getDOMNode()
+    width: componentNode.offsetWidth
+    height: componentNode.offsetHeight
+
+  setInitialSize: ->
+    return unless @isMounted()
+    windowEl = @_getWindowSize()
+    componentEl = @_getComponentSize()
+
+    sizesInitial = {windowEl, componentEl}
+
+    @setState({sizesInitial, windowEl, componentEl})
diff --git a/shared/src/components/scroll-to-mixin.cjsx b/shared/src/components/scroll-to-mixin.cjsx
new file mode 100644
index 0000000000..3db4d518b8
--- /dev/null
+++ b/shared/src/components/scroll-to-mixin.cjsx
@@ -0,0 +1,107 @@
+React = require 'react'
+_ = require 'underscore'
+
+# Note that the GetPositionMixin methods are called directly rather than mixing it in
+# since we're a mixin ourselves our consumers also include GetPosition and it causes
+# duplicate method name errors to mix it in
+GetPositionMixin = require './get-position-mixin'
+
+DEFAULT_DURATION   = 750 # milliseconds
+# This is calculated to be enough for the targeted element to fit under the top navbar
+# The navbar's height is controlled by the less variable @tutor-navbar-height from global/navbar.less
+DEFAULT_TOP_OFFSET = 80  # pixels
+
+# Attempt to scroll to element no more than this number of times.
+# In testing, no more than one attempt has been needed but it's best to have a failsafe to
+# ensure scrolling doesn't enter an infinite loop
+MAXIMUM_SCROLL_ATTEMPTS = 3
+
+# http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
+EASE_IN_OUT = (t) ->
+  if t < .5 then 4 * t * t * t else (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+
+POSITION = (start, end, elapsed, duration) ->
+  return end if (elapsed > duration)
+  start + (end - start) * EASE_IN_OUT(elapsed / duration)
+
+ScrollToMixin =
+  getDefaultProps: ->
+    windowImpl: window
+
+  _scrollingTargetDOM: -> @scrollingTargetDOM?() or React.findDOMNode(@)
+
+  scrollToSelector: (selector, options) ->
+    options = _.extend({updateHistory: true, unlessInView: false}, options)
+
+    el = @getElement(selector)
+    return false unless el
+
+    @scrollToElement(el, options) unless (options.unlessInView and @isElementInView(el))
+
+  isSelectorInView: (selector) ->
+    el = @getElement(selector)
+    return false unless el
+
+    @isElementInView(el)
+
+  isElementInView: (el) ->
+    {top, bottom, height} = el.getBoundingClientRect()
+    visibleHeight = Math.min(window.innerHeight, bottom) - Math.max(0, top)
+
+    visibleHeight > height / 2
+
+  getElement: (selector) ->
+    return if _.isEmpty(selector)
+    @_scrollingTargetDOM().querySelector(selector)
+
+  _onBeforeScroll: (el) ->
+    el.classList.add('target-scroll')
+    @onBeforeScroll?(el)
+
+  _onAfterScroll: (el, options) ->
+    if el?.classList?.contains('target-scroll')
+      _.delay(el.classList.remove.bind(el.classList, 'target-scroll'), 150)
+    @props.windowImpl.history.pushState(null, null, "##{el.id}") if options.updateHistory
+    @onAfterScroll?(el)
+
+  _onScrollStep: (el, options) ->
+    # The element's postion may have changed if scrolling was initiated while
+    # the page was still being manipulated.
+    # If that's the case, we begin another scroll to it's current position
+    if options.attemptNumber < MAXIMUM_SCROLL_ATTEMPTS and @props.windowImpl.pageYOffset isnt @_desiredTopPosition(el)
+      @scrollToElement(el, options.attemptNumber + 1)
+    else
+      @_onAfterScroll(el, options)
+
+  _desiredTopPosition: (el) ->
+    GetPositionMixin.getTopPosition(el) - _.result(@, 'getScrollTopOffset', DEFAULT_TOP_OFFSET)
+
+  scrollToTop: ->
+    @scrollToSelector('#react-root-container', updateHistory: false)
+
+  scrollToElement: (el, options = {} ) ->
+    win       = @props.windowImpl
+    endPos    = @_desiredTopPosition(el)
+
+    if options.immediate is true
+      win.scroll(0, endPos)
+      return
+
+    startPos  = win.pageYOffset
+    startTime = Date.now()
+    duration  = _.result(@, 'getScrollDuration', DEFAULT_DURATION)
+    requestAnimationFrame = win.requestAnimationFrame or _.defer
+    options.attemptNumber ||= 0
+
+    step = =>
+      elapsed = Date.now() - startTime
+      win.scroll(0, POSITION(startPos, endPos, elapsed, duration) )
+      if elapsed < duration then requestAnimationFrame(step)
+      else @_onScrollStep(el, options)
+
+    @_onBeforeScroll(el)
+    step()
+
+
+
+module.exports = ScrollToMixin
diff --git a/shared/src/components/scroll-tracker.cjsx b/shared/src/components/scroll-tracker.cjsx
new file mode 100644
index 0000000000..ce06d12dc7
--- /dev/null
+++ b/shared/src/components/scroll-tracker.cjsx
@@ -0,0 +1,121 @@
+React = require 'react'
+_ = require 'underscore'
+
+ScrollListenerMixin = require 'react-scroll-components'
+GetPositionMixin = require './get-position-mixin'
+
+ScrollTrackerMixin =
+  mixins: [GetPositionMixin]
+  propTypes:
+    setScrollPoint: React.PropTypes.func.isRequired
+    unsetScrollPoint: React.PropTypes.func
+    scrollState: React.PropTypes.object.isRequired
+
+  getInitialState: ->
+    scrollPoint: 0
+
+  setScrollPoint: ->
+    {setScrollPoint, scrollState} = @props
+
+    scrollPoint = @getTopPosition(@getDOMNode())
+    @setState({scrollPoint})
+
+    setScrollPoint(scrollPoint, scrollState)
+
+  unsetScrollPoint: ->
+    {unsetScrollPoint} = @props
+    unsetScrollPoint?(@state.scrollPoint)
+
+  componentDidMount: ->
+    @setScrollPoint()
+
+  componentWillUnmount: ->
+    @unsetScrollPoint()
+
+ScrollTracker = React.createClass
+  displayName: 'ScrollTracker'
+  mixins: [ScrollTrackerMixin]
+  render: ->
+    @props.children
+
+ScrollTrackerParentMixin =
+
+  getInitialState: ->
+    scrollPoints: []
+    scrollState: {}
+    scrollTopBuffer: 0
+
+  setScrollTopBuffer: ->
+    scrollTopBuffer = GetPositionMixin.getTopPosition(@getDOMNode())
+    @setState({scrollTopBuffer})
+
+  setScrollPoint: (scrollPoint, scrollState) ->
+    scrollPointData = _.extend({scrollPoint: scrollPoint}, scrollState)
+    @state.scrollPoints.push(scrollPointData)
+    @sortScrollPoints()
+
+  unsetScrollPoint: (unsetScrollPoint) ->
+    @state.scrollPoints = _.reject @state.scrollPoints, (scrollPoint) ->
+      scrollPoint.scrollPoint is unsetScrollPoint
+    @sortScrollPoints()
+
+  sortScrollPoints: ->
+    sortedDescScrollPoints = _.sortBy @state.scrollPoints, (scrollData) ->
+      -1 * scrollData.scrollPoint
+
+    @setState({scrollPoints: sortedDescScrollPoints})
+
+  getScrollStateByScroll: (scrollTop) ->
+    scrollState = _.find @state.scrollPoints, (scrollData) =>
+      scrollTop > (scrollData.scrollPoint - @state.scrollTopBuffer - 2)
+
+    scrollState or _.last(@state.scrollPoints)
+
+  areKeysSame: (key, keyToCompare) ->
+    key is keyToCompare or parseInt(key) is parseInt(keyToCompare)
+
+  getScrollStateByKey: (stepKey) ->
+    scrollStateIndex = _.findLastIndex @state.scrollPoints, (scrollData) =>
+      @areKeysSame(scrollData.key, stepKey)
+
+    @state.scrollPoints[scrollStateIndex]
+
+  setScrollState: ->
+    scrollState = @getScrollStateByScroll(@state.scrollTop)
+    @setState({scrollState})
+
+    @props.setScrollState(scrollState)
+
+  isScrollPointsStable: (compareState) ->
+    _.isEqual(@state.scrollPoints, compareState.scrollPoints)
+
+  shouldCheckForScrollingState: (state) ->
+    state ?= @state
+    not _.isEmpty(state.scrollPoints) and not _.isUndefined(state.scrollState) and @isScrollPointsStable(state)
+
+  componentDidMount: ->
+    @setScrollTopBuffer()
+    @scrollToKey(@props.currentStep) if @props.currentStep?
+
+  componentWillUpdate: (nextProps, nextState) ->
+    return unless @shouldCheckForScrollingState(nextState)
+    willScrollStateKeyChange = not @areKeysSame(nextState.scrollState.key, @state.scrollState.key)
+    @props.goToStep(nextState.scrollState.key) if willScrollStateKeyChange
+
+  componentDidUpdate: (prevProps, prevState) ->
+    return unless @shouldCheckForScrollingState(prevState)
+    doesScrollStateMatch = @areKeysSame(prevState.scrollState.key, @getScrollStateByScroll(@state.scrollTop)?.key)
+    didCurrentStepChange = not @areKeysSame(@props.currentStep, prevState.scrollState?.key)
+
+    unless doesScrollStateMatch
+      @setScrollState()
+    else if didCurrentStepChange
+      @scrollToKey(@props.currentStep)
+
+  scrollToKey: (stepKey) ->
+    return unless stepKey?
+    scrollState = @getScrollStateByKey(stepKey)
+    return unless scrollState?
+    window.scrollTo(0, (scrollState?.scrollPoint - @state.scrollTopBuffer))
+
+module.exports = {ScrollTrackerMixin, ScrollTracker, ScrollTrackerParentMixin}
diff --git a/shared/src/components/smart-overflow.cjsx b/shared/src/components/smart-overflow.cjsx
new file mode 100644
index 0000000000..0b232fa006
--- /dev/null
+++ b/shared/src/components/smart-overflow.cjsx
@@ -0,0 +1,62 @@
+React = require 'react'
+_ = require 'underscore'
+classnames = require 'classnames'
+
+ResizeListenerMixin = require './resize-listener-mixin'
+
+SmartOverflow = React.createClass
+  propTypes:
+    heightBuffer: React.PropTypes.number
+    marginBottom: React.PropTypes.number
+
+  getInitialState: ->
+    isOverflowing: false
+    triggerHeight: null
+    style: undefined
+
+  getDefaultProps: ->
+    heightBuffer: 20
+    marginBottom: 0
+
+  mixins: [ResizeListenerMixin]
+
+  getOffset: ->
+    componentNode = @getDOMNode()
+    topOffset = componentNode.getBoundingClientRect().top
+
+  getTriggerHeight: ->
+    topOffset = @getOffset()
+    topOffset + @state.sizesInitial.componentEl.height
+
+  componentDidUpdate: ->
+    # on the cycle after sizesInitial initially gets set from ResizeListenerMixin,
+    # determine trigger height
+    unless _.isEmpty(@state.sizesInitial) or @state.triggerHeight?
+      triggerHeight = @getTriggerHeight()
+      triggerHeightState = {triggerHeight}
+      @setState(triggerHeightState)
+
+      # pass in trigger height as well for initial styles
+      sizes = _.defaults({}, @state.sizesInitial, triggerHeightState)
+      @_resizeListener(sizes)
+
+  _resizeListener: (sizes) ->
+    if sizes.windowEl.height < (sizes.triggerHeight or @state.triggerHeight)
+      maxHeight = sizes.windowEl.height - @getOffset() - @props.heightBuffer
+      {marginBottom} = @props
+      style = {maxHeight, marginBottom}
+    else
+      style = undefined
+
+    @setState({style})
+
+  render: ->
+    {className} = @props
+
+    classes = classnames 'openstax-smart-overflow', className
+
+    <div className={classes} style={@state.style}>
+      {@props.children}
+    </div>
+
+module.exports = SmartOverflow
diff --git a/shared/src/components/spy-mode.cjsx b/shared/src/components/spy-mode.cjsx
new file mode 100644
index 0000000000..c32421190d
--- /dev/null
+++ b/shared/src/components/spy-mode.cjsx
@@ -0,0 +1,32 @@
+React = require 'react'
+classnames = require 'classnames'
+
+SpyModeWrapper = React.createClass
+
+  propTypes:
+    onChange: React.PropTypes.func
+
+  getInitialState: ->
+    isEnabled: false
+
+  toggleDebug: (ev) ->
+    @setState(isEnabled: not @state.isEnabled)
+    ev.preventDefault()
+
+  render: ->
+    <div className={classnames('openstax-debug-content', {'is-enabled': @state.isEnabled})}>
+      {@props.children}
+      <a href='#spy' onClick={@toggleDebug} className='debug-toggle-link'>&pi;</a>
+    </div>
+
+SpyModeContent = React.createClass
+
+  propTypes:
+    className: React.PropTypes.string
+
+  render: ->
+    <div className={classnames('visible-when-debugging', @props.className)}>
+      {@props.children}
+    </div>
+
+module.exports = {Content: SpyModeContent, Wrapper:SpyModeWrapper}
diff --git a/shared/src/components/surety-guard.cjsx b/shared/src/components/surety-guard.cjsx
new file mode 100644
index 0000000000..98f6b8a9b8
--- /dev/null
+++ b/shared/src/components/surety-guard.cjsx
@@ -0,0 +1,61 @@
+React = require 'react'
+BS = require 'react-bootstrap'
+
+SuretyGuard = React.createClass
+
+  propTypes:
+    onConfirm:  React.PropTypes.func.isRequired
+    message:    React.PropTypes.string.isRequired
+    placement:  React.PropTypes.string
+    okButtonLabel: React.PropTypes.string
+    cancelButtonLabel: React.PropTypes.string
+    onlyPromptIf: React.PropTypes.func
+
+  getDefaultProps: ->
+    title:             'Are you sure?'
+    placement:         'top'
+    okButtonLabel:     'OK'
+    cancelButtonLabel: 'Cancel'
+
+  onConfirm: (ev) ->
+    @refs.overlay.hide()
+    @props.onConfirm(ev)
+
+  onCancel: ->
+    @refs.overlay.hide()
+
+  renderPopover: ->
+    <BS.Popover
+      id="confirmation-alert"
+      className="openstax-surety-guard"
+      title={@props.title}
+    >
+      <span className="message">{@props.message}</span>
+      <div className="controls">
+        <BS.Button onClick={@onCancel}>
+          {@props.cancelButtonLabel}
+        </BS.Button>
+        <BS.Button onClick={@onConfirm} bsStyle="primary">
+          {@props.okButtonLabel}
+        </BS.Button>
+      </div>
+    </BS.Popover>
+
+  maybeShow: (ev) ->
+    ev.preventDefault()
+    @onConfirm(ev) if @props.onlyPromptIf and not @props.onlyPromptIf()
+
+  render: ->
+    <BS.OverlayTrigger
+      ref="overlay"
+      trigger='click'
+      onClick={@maybeShow}
+      placement={@props.placement}
+      rootClose={true}
+      overlay={@renderPopover()}
+    >
+      {@props.children}
+    </BS.OverlayTrigger>
+
+
+module.exports = SuretyGuard
diff --git a/shared/src/helpers/html-videos.coffee b/shared/src/helpers/html-videos.coffee
new file mode 100644
index 0000000000..bfaac718d5
--- /dev/null
+++ b/shared/src/helpers/html-videos.coffee
@@ -0,0 +1,31 @@
+_ = require 'underscore'
+
+getRatioClass = (frame) ->
+  if (not frame.width or not frame.height)
+    return "embed-responsive-16by9"
+
+  ratio = frame.width / frame.height
+  if (Math.abs(ratio - 16 / 9) > Math.abs(ratio - 4 / 3))
+    return "embed-responsive-4by3"
+  else
+    return "embed-responsive-16by9"
+
+isEmbedded = (frame) ->
+  frame.parentNode?.classList.contains('embed-responsive')
+
+isInteractive = (frame) ->
+  frame.classList.contains('interactive')
+
+wrapFrames = (dom, shouldExcludeFrame) ->
+  _.each(dom.getElementsByTagName('iframe'), (frame) ->
+    return null if isEmbedded(frame) or isInteractive(frame) or shouldExcludeFrame?(frame)
+
+    wrapper = document.createElement("div")
+    wrapper.className = "frame-wrapper embed-responsive #{getRatioClass(frame)}"
+    frame.parentNode.replaceChild(wrapper, frame)
+    wrapper.appendChild(frame)
+  )
+
+  dom
+
+module.exports = { wrapFrames, getRatioClass }
diff --git a/shared/src/helpers/keys.coffee b/shared/src/helpers/keys.coffee
new file mode 100644
index 0000000000..66d217c9e4
--- /dev/null
+++ b/shared/src/helpers/keys.coffee
@@ -0,0 +1,23 @@
+_ = require 'underscore'
+keymaster = require 'keymaster'
+
+keysHelper = {}
+
+handleKeys = (keyFN, keys, keymasterArgs...) ->
+  return keys? unless keys
+  # cover for some annoying keymaster bugs
+  if _.isArray(keys)
+    _.each(keys, (key) ->
+      keyFN key.toString(), keymasterArgs...
+    )
+  else
+    keyFN keys, keymasterArgs...
+
+keysHelper.on = _.partial(handleKeys, keymaster)
+
+keysHelper.off = _.partial(handleKeys, keymaster.unbind)
+
+keysHelper.getCharFromNumKey = (numKey, offset = 1) ->
+  String.fromCharCode((97 - offset) + numKey)
+
+module.exports = keysHelper
diff --git a/shared/src/helpers/mathjax.coffee b/shared/src/helpers/mathjax.coffee
new file mode 100644
index 0000000000..eefef8d22f
--- /dev/null
+++ b/shared/src/helpers/mathjax.coffee
@@ -0,0 +1,79 @@
+_ = require 'underscore'
+
+MATH_MARKER_BLOCK  = '\u200c\u200c\u200c' # zero-width non-joiner
+MATH_MARKER_INLINE = '\u200b\u200b\u200b' # zero-width space
+
+MATH_RENDERED_CLASS = 'math-rendered'
+MATH_DATA_SELECTOR = "[data-math]:not(.#{MATH_RENDERED_CLASS})"
+MATH_ML_SELECTOR   = "math:not(.#{MATH_RENDERED_CLASS})"
+COMBINED_MATH_SELECTOR = "#{MATH_DATA_SELECTOR}, #{MATH_ML_SELECTOR}"
+
+# Search document for math and [data-math] elements and then typeset them
+typesetDocument = (windowImpl) ->
+  latexNodes = []
+  for node in windowImpl.document.querySelectorAll(MATH_DATA_SELECTOR)
+    formula = node.getAttribute('data-math')
+    # divs should be rendered as a block, others inline
+    if node.tagName.toLowerCase() is 'div'
+      node.textContent = "#{MATH_MARKER_BLOCK}#{formula}#{MATH_MARKER_BLOCK}"
+    else
+      node.textContent = "#{MATH_MARKER_INLINE}#{formula}#{MATH_MARKER_INLINE}"
+    latexNodes.push(node)
+
+  unless _.isEmpty(latexNodes)
+    windowImpl.MathJax.Hub.Typeset(latexNodes)
+
+  mathMLNodes = _.toArray(windowImpl.document.querySelectorAll(MATH_ML_SELECTOR))
+  unless _.isEmpty(mathMLNodes)
+    # style the entire document because mathjax is unable to style individual math elements
+    windowImpl.MathJax.Hub.Typeset( windowImpl.document )
+
+  windowImpl.MathJax.Hub.Queue ->
+    # Queue a call to mark the found nodes as rendered so are ignored if typesetting is called repeatedly
+    for node in latexNodes.concat(mathMLNodes)
+      node.classList.add(MATH_RENDERED_CLASS)
+
+# Install a debounce around typesetting function so that it will only run once
+# every Xms even if called multiple times in that period
+typesetDocument = _.debounce( typesetDocument, 100)
+
+# typesetMath is the main exported function.
+# It's called by components like HTML after they're rendered
+typesetMath = (root, windowImpl = window) ->
+  # schedule a Mathjax pass if there is at least one [data-math] or <math> element present
+  if windowImpl.MathJax?.Hub?.Queue? and root.querySelector(COMBINED_MATH_SELECTOR)
+    typesetDocument(windowImpl)
+
+
+# The following should be called once and configures MathJax.
+# Assumes the script to load MathJax is of the form:
+# `...MathJax.js?config=TeX-MML-AM_HTMLorMML-full&amp;delayStartupUntil=configured`
+startMathJax = ->
+  MATHJAX_CONFIG =
+    showProcessingMessages: false
+    tex2jax:
+      displayMath: [[MATH_MARKER_BLOCK, MATH_MARKER_BLOCK]]
+      inlineMath:  [[MATH_MARKER_INLINE, MATH_MARKER_INLINE]]
+    styles:
+      '#MathJax_Message':    visibility: 'hidden', left: '', right: 0
+      '#MathJax_MSIE_Frame': visibility: 'hidden', left: '', right: 0
+
+  configuredCallback = ->
+    window.MathJax.Hub.Configured()
+
+  if window.MathJax?.Hub
+    window.MathJax.Hub.Config(MATHJAX_CONFIG)
+    # Does not seem to work when passed to Config
+    window.MathJax.Hub.processSectionDelay = 0
+    configuredCallback()
+  else
+    # If the MathJax.js file has not loaded yet:
+    # Call MathJax.Configured once MathJax loads and
+    # loads this config JSON since the CDN URL
+    # says to `delayStartupUntil=configured`
+    MATHJAX_CONFIG.AuthorInit = configuredCallback
+
+    window.MathJax = MATHJAX_CONFIG
+
+
+module.exports = {typesetMath, startMathJax}
diff --git a/shared/src/model/exercise.coffee b/shared/src/model/exercise.coffee
new file mode 100644
index 0000000000..303d11fa0f
--- /dev/null
+++ b/shared/src/model/exercise.coffee
@@ -0,0 +1,38 @@
+_ = require 'underscore'
+
+BOOK_UID_XREF =
+  '27275f49-f212-4506-b3b1-a4d5e3598b99': 'Tutor Physics'
+  'd52e93f4-8653-4273-86da-3850001c0786': 'Tutor Biology'
+  '947a1417-5fd5-4b3c-ac8f-bd9d1aedf2d2': 'Macroeconomics with Concept Coach'
+  'bf96bfc5-e723-46c2-9fa2-5a4c9294fa26': 'Concepts of Biology with Concept Coach'
+  '08df2bee-3db4-4243-bd76-ee032da173e8': 'Microeconomics with Concept Coach'
+  '4f86c023-a135-412a-9d96-dcbd1ca61e7d': 'Introduction to Sociology 2e with Concept Coach'
+  'd2fbadca-e4f3-4432-a074-2438c216b62a': 'Principles of Economics with Concept Coach'
+  '99e127f8-f722-4907-a6b3-2d62fca135d6': 'Anatomy & Physiology with Concept Coach'
+
+Exercises =
+
+  troubleUrl: (options = {}) ->
+    url = 'https://docs.google.com/a/rice.edu/forms/d/' +
+    '1AmwbFIRvZJ6F91PQp1I6jQgqM9Kc3qNMrHdLdqhj8FE/viewform' +
+    "?entry.649352110=#{options.exerciseId}"
+    if options.project
+      url += "&entry.1655668181=#{if options.project is 'concept-coach' then 'Yes' else 'No'}"
+    if options.bookUUID and BOOK_UID_XREF[options.bookUUID]
+      url += "&entry.1091629000=#{BOOK_UID_XREF[options.bookUUID]}"
+    url
+
+  getParts: (exercise) ->
+    exercise.content?.questions or []
+
+  isMultipart: (exercise) ->
+    @getParts(exercise).length > 1
+
+  hasInteractive: (exercise) ->
+    exercise.has_interactive
+
+  hasVideo: (exercise) ->
+    exercise.has_video
+
+
+module.exports = Exercises
diff --git a/shared/src/model/notifications.coffee b/shared/src/model/notifications.coffee
new file mode 100644
index 0000000000..e23b7805cb
--- /dev/null
+++ b/shared/src/model/notifications.coffee
@@ -0,0 +1,57 @@
+EventEmitter2 = require 'eventemitter2'
+_ = require 'underscore'
+
+URLs = require './urls'
+EVENT_BUS = new EventEmitter2
+POLLERS = {}
+
+NOTICES = []
+
+CLIENT_ID = 'client-specified'
+Poller = require './notifications/pollers'
+
+Notifications = {
+
+  display: (notice) ->
+    # fill in an id and type if not provided
+    NOTICES.push( _.defaults(_.clone(notice), id: _.uniqueId(CLIENT_ID), type: CLIENT_ID ))
+    @emit('change')
+
+  _startPolling: (type, url) ->
+    POLLERS[type] ||= Poller.forType(@, type)
+    POLLERS[type].setUrl(url)
+
+  startPolling: (@windowImpl = window) ->
+    @_startPolling(
+      'accounts', URLs.construct('base_accounts', 'api', 'user')
+    ) if URLs.get('base_accounts')
+
+    @_startPolling(
+      'tutor', URLs.get('tutor_notices')
+    ) if URLs.get('tutor_notices')
+
+
+  acknowledge: (notice) ->
+    if notice.type is CLIENT_ID
+      NOTICES = _.without(NOTICES, _.findWhere(NOTICES, id: notice.id))
+      @emit('change')
+    else
+      POLLERS[notice.type].acknowledge(notice)
+
+  getActive: ->
+    notices = _.clone NOTICES
+    for type, poller of POLLERS
+      notices = notices.concat( poller.getActiveNotifications() )
+    notices
+
+  stopPolling: ->
+    poller.destroy() for type, poller of POLLERS
+    POLLERS = {}
+
+}
+
+# mixin event emitter methods, particulary it's 'on' and 'off'
+# since they're compatible with Tutor's bindstore mixin
+_.extend Notifications, EVENT_BUS
+
+module.exports = Notifications
diff --git a/shared/src/model/notifications/pollers.coffee b/shared/src/model/notifications/pollers.coffee
new file mode 100644
index 0000000000..665a6f82ac
--- /dev/null
+++ b/shared/src/model/notifications/pollers.coffee
@@ -0,0 +1,96 @@
+_           = require 'underscore'
+moment      = require 'moment'
+axios       = require 'axios'
+STORAGE_KEY = 'ox-notifications'
+User        = require '../user'
+
+class Poller
+
+  @forType: (notices, type) ->
+    new POLLER_TYPES[type](type, notices)
+
+  constructor: (@type, @notices, @interval) ->
+    @localStorageKey = STORAGE_KEY + '-' + @type
+    _.bindAll(@, 'poll', 'onReply', 'onError')
+
+  setUrl: (@url) ->
+    @startPolling() unless @polling
+
+  destroy: ->
+    @notices.windowImpl.clearInterval(@polling) if @polling
+    delete @polling
+
+  startPolling: ->
+    @polling = @notices.windowImpl.setInterval(@poll, @interval.asMilliseconds())
+    @poll()
+
+  poll: ->
+    return if @notices.windowImpl.document.hidden is true
+    axios.get(@url, withCredentials: true).then(@onReply).catch(@onError)
+
+  onReply: ({data}) ->
+    console.warn "base onReply method called unnecessarily"
+
+  onError: (resp) ->
+    console.warn resp
+
+  getActiveNotifications: ->
+    _.values @_activeNotices
+
+  acknowledge: (notice) ->
+    @_setObservedNoticeIds(
+      @_getObservedNoticeIds().concat(notice.id)
+    )
+    delete @_activeNotices[notice.id]
+    @notices.emit('change')
+
+  _setObservedNoticeIds: (newIds) ->
+    @notices.windowImpl.localStorage.setItem(@localStorageKey, JSON.stringify(newIds) )
+
+  _getObservedNoticeIds: ->
+    JSON.parse(@notices.windowImpl.localStorage.getItem(@localStorageKey) or '[]')
+
+  _setActiveNotices: (newActiveNotices, currentIds) ->
+    @_activeNotices = newActiveNotices
+    @notices.emit('change')
+    observedIds = @_getObservedNoticeIds()
+
+    # Prune the list of observed notice ids so it doesn't continue to fill up with old notices
+    outdatedIds = _.difference(observedIds, _.without(currentIds, _.keys(newActiveNotices)...))
+    unless _.isEmpty(outdatedIds)
+      @_setObservedNoticeIds( _.without(observedIds, outdatedIds...) )
+
+
+class TutorNotices extends Poller
+  constructor: (type, notices) ->
+    super(type, notices, moment.duration(5, 'minutes'))
+    @active = {}
+
+  onReply: ({data}) ->
+    observedIds = @_getObservedNoticeIds()
+    notices = {}
+    currentIds = []
+    for notice in data
+      currentIds.push(notice.id)
+      continue unless observedIds.indexOf(notice.id) is -1
+      notices[notice.id] = _.extend(notice, {type: @type})
+
+    @_setActiveNotices(notices, currentIds)
+
+
+class AccountsNagger extends Poller
+  constructor: (type, notices) -> super(type, notices, moment.duration(1, 'day'))
+
+  onReply: ({data}) ->
+    User.setCurrent(data)
+    emails = {}
+    for email in User.current().unVerfiedEmails()
+      emails[email.id] = _.extend(email, {type: @type})
+    @_setActiveNotices(emails, _.keys(emails))
+
+
+POLLER_TYPES =
+  tutor: TutorNotices
+  accounts: AccountsNagger
+
+module.exports = Poller
diff --git a/shared/src/model/urls.coffee b/shared/src/model/urls.coffee
new file mode 100644
index 0000000000..ef1efd9ad8
--- /dev/null
+++ b/shared/src/model/urls.coffee
@@ -0,0 +1,21 @@
+_ = require 'underscore'
+
+URL = {}
+URL_SUFFIX = /_url$/
+
+URLMethods = {
+
+  update: (urls) ->
+    for name, url of urls when name.match(URL_SUFFIX) and _.isString(url)
+      URL[ name.replace(URL_SUFFIX, '') ] = url.replace(/\/$/, '')
+
+  get: (url) ->
+    URL[url]
+
+  construct: (base, parts...) ->
+    @get(base) + '/' + parts.join('/')
+
+  reset: -> URL = {}
+}
+
+module.exports = URLMethods
diff --git a/shared/src/model/user.coffee b/shared/src/model/user.coffee
new file mode 100644
index 0000000000..0c30026288
--- /dev/null
+++ b/shared/src/model/user.coffee
@@ -0,0 +1,64 @@
+_ = require 'underscore'
+axios = require 'axios'
+URLs = require './urls'
+EventEmitter2 = require 'eventemitter2'
+
+ERROR_CODES =
+  pin_not_correct: 'Invalid PIN code'
+  no_pin_confirmation_attempts_remaining: 'Too many PIN attempts'
+
+class Email extends EventEmitter2
+
+  constructor: (@user, attrs) ->
+    _.extend(@, attrs)
+    super()
+
+  sendVerification: (pin, successCallBack) ->
+    @makeRequest('confirm_by_pin', {pin}).then (resp) =>
+      if resp.status is 204
+        delete @error
+        @is_verified = true
+        successCallBack(@)
+      else
+        code = _.first(resp.data?.errors)?.code
+        @error = ERROR_CODES[code]
+        if code is 'no_pin_confirmation_attempts_remaining'
+          @verificationFailed = true
+      @emit('change')
+
+
+  sendConfirmation: ->
+    @makeRequest('resend_confirmation', {send_pin: true}).then (resp) =>
+      @verifyInProgress = (resp.status is 204)
+      @emit('change')
+
+  makeRequest: (type, data = {}) ->
+    @requestInProgress = true
+
+    afterRequest = (resp) =>
+      @requestInProgress = false
+      @emit('change')
+      resp
+    axios(
+      method: 'PUT', baseURL: URLs.get('base_accounts')
+      url: "/api/contact_infos/#{@id}/#{type}.json"
+      withCredentials: true
+      data: data
+    ).catch(afterRequest).then(afterRequest)
+
+class User extends EventEmitter2
+
+  @current: ->
+    return @_current_user
+
+  @setCurrent: (data) ->
+    @_current_user = new User(data)
+
+  constructor: (data) ->
+    @attibutes = data
+    @emails = _.map @attibutes.contact_infos, (ci) => new Email(@, ci)
+
+  unVerfiedEmails: ->
+    _.where @emails, is_verified: false
+
+module.exports = User
diff --git a/shared/test/all-tests.coffee b/shared/test/all-tests.coffee
new file mode 100644
index 0000000000..9d011a8a5a
--- /dev/null
+++ b/shared/test/all-tests.coffee
@@ -0,0 +1,2 @@
+testsContext = require.context("./", true, /\.spec\.(cjsx|coffee)$/)
+testsContext.keys().forEach(testsContext)
diff --git a/shared/test/components/breadcrumb/index.spec.coffee b/shared/test/components/breadcrumb/index.spec.coffee
new file mode 100644
index 0000000000..d0616ced49
--- /dev/null
+++ b/shared/test/components/breadcrumb/index.spec.coffee
@@ -0,0 +1,51 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+BC = require 'components/breadcrumb'
+
+describe 'Breadcrumb Component', ->
+
+  beforeEach ->
+    @props =
+      goToStep: sinon.spy()
+      step: {type: 'reading', is_completed: true, title: 'My Assignment', correct_answer_id: 1}
+      canReview: true
+      currentStep: 1
+      crumb:
+        key: 2,
+        data:
+          labels: ['hot']
+
+  describe 'Title', ->
+    it 'indicates current step', ->
+      @props.crumb.key = 1
+      Testing.renderComponent( BC, props: @props ).then ({dom}) ->
+        expect(dom.getAttribute('title')).equal('Current Step (reading)')
+    it 'indicates completed', ->
+      @props.step.is_completed = true
+      Testing.renderComponent( BC, props: @props ).then ({dom}) ->
+        expect(dom.getAttribute('title')).equal('Step Completed (reading). Click to review')
+    it 'shows end', ->
+      @props.crumb.type = 'end'
+      Testing.renderComponent( BC, props: @props ).then ({dom}) ->
+        expect(dom.getAttribute('title')).equal('My Assignment Completion')
+
+
+  describe 'Status', ->
+    it 'can be correct', ->
+      @props.canReview = true
+      @props.step.is_correct = true
+      Testing.renderComponent( BC, props: @props ).then ({dom}) ->
+        expect(dom.classList.contains('status-correct')).to.be.true
+        expect(dom.querySelector('i.icon-correct')).not.to.be.null
+    it 'can be incorrect', ->
+      @props.canReview = true
+      @props.step.answer_id = 11
+      Testing.renderComponent( BC, props: @props ).then ({dom}) ->
+        expect(dom.classList.contains('status-incorrect')).to.be.true
+        expect(dom.querySelector('i.icon-incorrect')).not.to.be.null
+
+
+  it 'calls onClick handler', ->
+    Testing.renderComponent( BC, props: @props ).then ({dom}) =>
+      Testing.actions.click(dom)
+      expect(@props.goToStep).to.have.been.calledWith(2)
diff --git a/shared/test/components/buttons/async-button.spec.coffee b/shared/test/components/buttons/async-button.spec.coffee
new file mode 100644
index 0000000000..f5cdb7b599
--- /dev/null
+++ b/shared/test/components/buttons/async-button.spec.coffee
@@ -0,0 +1,44 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Button = require 'components/buttons/async-button'
+Failed = React.createClass
+  render: -> React.createElement('span', {}, @props.beforeText)
+
+describe 'Async Button Component', ->
+
+  beforeEach ->
+    @props =
+      isWaiting: false,
+      failedProps: {beforeText: 'yo, you failed'}
+
+  describe 'waiting state', ->
+
+    it 'hides spinner and is not disabled', ->
+      Testing.renderComponent( Button, props: @props ).then ({dom}) ->
+        expect(dom.getAttribute('disabled')).to.be.null
+        expect(dom.querySelector('i.fa-spinner')).to.be.null
+
+    it 'shows spinner and is disabled when true', ->
+      @props.isWaiting = true
+      Testing.renderComponent( Button, props: @props ).then ({dom}) ->
+        expect(dom.getAttribute('disabled')).equal('')
+        expect(dom.querySelector('i.fa-spinner')).not.to.be.null
+
+  it 'renders failed state', ->
+    @props.isFailed = true
+    @props.failedState = Failed
+    Testing.renderComponent( Button, props: @props ).then ({dom, element}) ->
+      expect(element.props.failedState).equal(Failed)
+      expect(dom.textContent).equal('yo, you failed')
+
+  it 'sets timeout', (done) ->
+    @props.timeoutLength = 2
+    @props.isWaiting = true
+    Testing.renderComponent( Button, unmountAfter: 10, props: @props ).then ({dom, wrapper, element}) ->
+      element.componentDidUpdate()
+      expect(element.state.isTimedout).equal(false)
+      _.delay ->
+        expect(element.state.isTimedout).equal(true)
+        done()
+      , 3
diff --git a/shared/test/components/buttons/close-button.spec.coffee b/shared/test/components/buttons/close-button.spec.coffee
new file mode 100644
index 0000000000..8fee62b018
--- /dev/null
+++ b/shared/test/components/buttons/close-button.spec.coffee
@@ -0,0 +1,14 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Button = require 'components/buttons/close-button'
+
+describe 'Close Button Component', ->
+
+  beforeEach ->
+    @props = {}
+
+  it 'has proper classes', ->
+    Testing.renderComponent( Button, props: @props ).then ({dom}) ->
+      expect(dom.getAttribute('aria-role')).equal('close')
+      expect(dom.tagName).equal('BUTTON')
+      expect(dom.classList.contains('openstax-close-x')).to.be.true
diff --git a/shared/test/components/buttons/refresh-button.spec.coffee b/shared/test/components/buttons/refresh-button.spec.coffee
new file mode 100644
index 0000000000..59efb0751e
--- /dev/null
+++ b/shared/test/components/buttons/refresh-button.spec.coffee
@@ -0,0 +1,15 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Button = require 'components/buttons/refresh-button'
+
+describe 'Refresh Button Component', ->
+
+  beforeEach ->
+    @props =
+      beforeText: 'before '
+      buttonText: 'Refresh'
+      afterText: ' after'
+
+  it 'can use custom text', ->
+    Testing.renderComponent( Button, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('before Refresh after')
diff --git a/shared/test/components/chapter-section-mixin.spec.coffee b/shared/test/components/chapter-section-mixin.spec.coffee
new file mode 100644
index 0000000000..e9191be647
--- /dev/null
+++ b/shared/test/components/chapter-section-mixin.spec.coffee
@@ -0,0 +1,28 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+ChapterSection = require 'components/chapter-section-mixin'
+
+Component = React.createClass
+  mixins: [ChapterSection]
+  render: ->
+    React.createElement('span', {},
+      @sectionFormat(@props.section, @props.separator)
+    )
+
+describe 'Chapter Section Mixin', ->
+
+  beforeEach ->
+    @props =
+      section: [1, 2]
+      separator: '.'
+
+  it 'can use custom separator', ->
+    @props.separator = '-'
+    Testing.renderComponent( Component, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('1-2')
+
+  it 'can render chapter/section thats a string', ->
+    @props.section = '3.4'
+    Testing.renderComponent( Component, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('3.4')
diff --git a/shared/test/components/exercise-badges/index.spec.coffee b/shared/test/components/exercise-badges/index.spec.coffee
new file mode 100644
index 0000000000..c95395ad11
--- /dev/null
+++ b/shared/test/components/exercise-badges/index.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'test/helpers'
+ld = require 'lodash'
+Badges = require 'components/exercise-badges'
+
+EXERCISE = require '../../../api/exercise-preview/data'
+
+describe 'Exercise Preview Component', ->
+
+  beforeEach ->
+    @props = {
+      exercise: ld.cloneDeep(EXERCISE)
+    }
+
+  it 'doesnt render if no items were found', ->
+    @props.exercise.has_interactive = false
+    @props.exercise.has_video = false
+    @props.exercise.content.questions = [ @props.exercise.content.questions[0] ]
+    Testing.renderComponent( Badges, props: @props ).then ({dom}) ->
+      expect(dom).not.to.exist
+
+  it 'renders interactive embed', ->
+    @props.exercise.has_interactive = true
+    Testing.renderComponent( Badges, props: @props ).then ({dom}) ->
+      expect( dom.querySelector('.interactive') ).to.exist
+
+  it 'renders for video', ->
+    @props.exercise.has_video = true
+    Testing.renderComponent( Badges, props: @props ).then ({dom}) ->
+      expect( dom.querySelector('.video') ).to.exist
+
+  it 'renders for MPQs', ->
+    @props.exercise.content.questions.push(ld.cloneDeep(@props.exercise.content.questions[0]))
+    Testing.renderComponent( Badges, props: @props ).then ({dom}) ->
+      expect( dom.querySelector('.mpq') ).to.exist
diff --git a/shared/test/components/exercise-identifier-link.spec.coffee b/shared/test/components/exercise-identifier-link.spec.coffee
new file mode 100644
index 0000000000..1068b0e5c3
--- /dev/null
+++ b/shared/test/components/exercise-identifier-link.spec.coffee
@@ -0,0 +1,24 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+ExerciseIdentifierLink = require 'components/exercise-identifier-link'
+
+describe 'Exercise Identifier Link', ->
+
+  beforeEach ->
+    @props =
+      bookUUID: '27275f49-f212-4506-b3b1-a4d5e3598b99'
+      exerciseUID: '1234@42'
+      project: 'tutor'
+
+  it 'sets the Book radio button to the correct title', ->
+    Testing.renderComponent( ExerciseIdentifierLink, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('a').getAttribute('href')).to.match(/Physics/)
+
+  it 'sets CC to No when type is Tutor', ->
+    Testing.renderComponent( ExerciseIdentifierLink, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('a').getAttribute('href')).to.match(/No/)
+
+  it 'sets CC to Yes when type is CC', ->
+    @props.project = 'concept-coach'
+    Testing.renderComponent( ExerciseIdentifierLink, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('a').getAttribute('href')).to.match(/Yes/)
diff --git a/shared/test/components/exercise-preview/index.spec.coffee b/shared/test/components/exercise-preview/index.spec.coffee
new file mode 100644
index 0000000000..15c28c410f
--- /dev/null
+++ b/shared/test/components/exercise-preview/index.spec.coffee
@@ -0,0 +1,74 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'test/helpers'
+ld = require 'lodash'
+ExercisePreview = require 'src/components/exercise-preview'
+
+EXERCISE = require '../../../api/exercise-preview/data'
+ANSWERS  = EXERCISE.content.questions[0].answers
+
+describe 'Exercise Preview Component', ->
+
+  beforeEach ->
+    @props = {
+      exercise: ld.cloneDeep(EXERCISE)
+    }
+
+  it 'displays the exercise answers', ->
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      for answer, i in _.pluck(dom.querySelectorAll('.answers-answer .answer .choice'), 'textContent')
+        expect(answer).to.equal( ANSWERS[i].content_html )
+
+
+  it 'renders the feedback', ->
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      for answer, i in _.pluck(dom.querySelectorAll('.answers-answer .answer .feedback'), 'textContent')
+        expect(answer).to.equal( ANSWERS[i].feedback_html )
+
+  it 'sets the className when displaying feedback', ->
+    _.extend(@props, displayFeedback: true)
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      expect(dom.classList.contains('is-displaying-feedback')).to.be.true
+
+  it 'can hide the answers', ->
+    _.extend(@props, hideAnswers: true)
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.answers-table')).to.be.not.ok
+      expect(dom.classList.contains('answers-hidden')).to.be.true
+
+  it 'can render question formats', ->
+    _.extend(@props, displayFormats: true)
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      formats = dom.querySelector('.formats-listing')
+      expect(_.pluck(formats.querySelectorAll('span'), 'textContent')).to.deep.equal([
+        'free-response', 'multiple-choice'
+      ])
+
+  it 'does not render overlay by default', ->
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      expect( dom.querySelector('.controls-overlay') ).not.to.exist
+
+  it 'callbacks are called when overlay and actions are clicked', ->
+    onSelect = sinon.spy()
+    actions =
+      include:
+        message: 'ReInclude question'
+        handler: sinon.spy()
+
+    _.extend(@props, {overlayActions: actions, onOverlayClick: onSelect})
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      Testing.actions.click( dom.querySelector('.controls-overlay') )
+      expect(onSelect).to.have.been.called
+      expect(actions.include.handler).not.to.have.been.called
+      action = dom.querySelector('.controls-overlay .action.include')
+      expect(action).to.exist
+      Testing.actions.click(action)
+      expect(actions.include.handler).to.have.been.called
+      expect(onSelect.callCount).to.equal(1)
+
+  it 'renders context if given', ->
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('div.context')).to.exist
+
+  it 'hides context if missing', ->
+    _.extend(@props.exercise, context: '')
+    Testing.renderComponent( ExercisePreview, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('div.context')).not.to.exist
diff --git a/resources/styles/book-content/context-mixins.less b/shared/test/components/exercise/free-response.spec.coffee
similarity index 100%
rename from resources/styles/book-content/context-mixins.less
rename to shared/test/components/exercise/free-response.spec.coffee
diff --git a/shared/test/components/exercise/group.spec.coffee b/shared/test/components/exercise/group.spec.coffee
new file mode 100644
index 0000000000..2419604a59
--- /dev/null
+++ b/shared/test/components/exercise/group.spec.coffee
@@ -0,0 +1,29 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Group = require 'components/exercise/group'
+
+describe 'Exercise Group Component', ->
+
+  beforeEach ->
+    @props =
+      group: 'personalized'
+      related_content: [
+        {title: 'Test', chapter_section: [1, 2]}
+      ]
+
+
+  it 'renders the label and icon', ->
+    Testing.renderComponent( Group, props: @props ).then ({dom, wrapper}) ->
+      expect(dom.textContent).equal('Personalized')
+      expect(dom.querySelector('i.icon-personalized')).not.to.be.null
+
+  it 'renders null label and icon for groups that should not be visible', ->
+    @props.group = 'core'
+    Testing.renderComponent( Group, props: @props ).then ({dom, wrapper}) ->
+      expect(dom.querySelector('i.icon-personalized')).to.be.null
+      expect(dom.textContent).equal('')
+
+  it 'renders the exercise uid when passed in', ->
+    @props.group = 'spaced_practice'
+    Testing.renderComponent( Group, props: @props ).then ({dom, wrapper, root, element}) ->
+      expect(dom.querySelector('i[aria-describedby="instructions"]')).to.not.be.null
diff --git a/shared/test/components/exercise/index.spec.coffee b/shared/test/components/exercise/index.spec.coffee
new file mode 100644
index 0000000000..123a45baa3
--- /dev/null
+++ b/shared/test/components/exercise/index.spec.coffee
@@ -0,0 +1,216 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'test/helpers'
+
+{Exercise} = require 'components/exercise'
+STEP = require './step-data'
+CHOICES = STEP.content.questions[0].answers
+
+step = null
+props = null
+
+canOnlyContinue = (partId) ->
+  false
+
+FREE_RESPONSE_PROPS =
+  taskId: '1'
+  onStepCompleted: sinon.spy()
+  onNextStep: sinon.spy()
+  getCurrentPanel: (id) ->
+    panel = 'free-response'
+    if step.answer_id
+      panel = 'review'
+    else if step.free_response
+      panel = 'multiple-choice'
+    panel
+
+  onFreeResponseChange: sinon.spy()
+  setFreeResponseAnswer: sinon.spy((stepId, freeResponse) ->
+    step.free_response = freeResponse
+  )
+  setAnswerId: sinon.spy(sinon.spy((stepId, answerId) ->
+    step.answer_id = answerId
+  ))
+
+  getReadingForStep: sinon.spy()
+  refreshStep: sinon.spy()
+  recoverFor: sinon.spy()
+  canOnlyContinue: sinon.spy(canOnlyContinue)
+
+  review: ''
+  focus: false
+  courseId: '1'
+  canTryAnother: false
+  canReview: true
+  disabled: false
+  task: STEP
+
+resetProps = ->
+  step = _.clone(STEP)
+  props = _.clone(FREE_RESPONSE_PROPS)
+  props.parts = [step]
+
+exerciseActionsAndChecks =
+  enterFreeResponse: ({dom, wrapper, element}, freeResponse = 'HELLO') ->
+    {textarea} = Testing.actions._fillTextarea('textarea', freeResponse, {div: dom})
+    expect(textarea.value).equals(freeResponse)
+    expect(props.onFreeResponseChange).to.have.been.calledWith(step.id, freeResponse)
+
+  continueOnFreeResponse: ({dom, wrapper, element}, freeResponse = 'HELLO') ->
+    Testing.actions._clickMatch('.continue', {div: dom})
+    expect(props.setFreeResponseAnswer).to.have.been.calledWith(step.id, freeResponse)
+    expect(step.free_response).equals(freeResponse)
+
+    wrapper.setProps({})
+    expect(dom.querySelector('.free-response').textContent).equals(freeResponse)
+
+  updateToMultipleChoice: ({dom, wrapper}) ->
+    expect(dom.querySelector(
+      '.openstax-exercise-card .exercise-multiple-choice'
+    )).not.to.be.null
+
+    expect(_.pluck(dom.querySelectorAll('.answer-content'), 'textContent')).to.deep.equal(_.pluck(CHOICES, 'content_html'))
+    expect(dom.querySelectorAll('.answer-input-box:not([disabled])')).to.have.length(CHOICES.length)
+
+  pickMultipleChoice: ({dom, wrapper}) ->
+    choicesDOMs = dom.querySelectorAll('.answer-input-box')
+    
+    FIRST_CHOICE_INDEX = 0
+    SECOND_CHOICE_INDEX = 1
+
+    Testing.actions._changeDOMNode(choicesDOMs[FIRST_CHOICE_INDEX])
+    expect(_.pluck(dom.querySelectorAll('.answer-checked'), 'textContent')).to.deep.equal([CHOICES[FIRST_CHOICE_INDEX].content_html])
+    expect(props.setAnswerId).to.have.been.calledWith(step.id, CHOICES[FIRST_CHOICE_INDEX].id)
+
+    Testing.actions._changeDOMNode(choicesDOMs[SECOND_CHOICE_INDEX])
+    expect(_.pluck(dom.querySelectorAll('.answer-checked'), 'textContent')).to.deep.equal([CHOICES[SECOND_CHOICE_INDEX].content_html])
+    expect(props.setAnswerId).to.have.been.calledWith(step.id, CHOICES[SECOND_CHOICE_INDEX].id)
+
+  setCorrectAnswerAndFeedback: (renderedData, choiceIndex = 0) ->
+    {wrapper, dom} = renderedData
+
+    Testing.actions._clickMatch('.continue', {div: dom}) if dom?
+
+    step.correct_answer_id = CHOICES[choiceIndex].id
+    step.feedback_html = 'The original hypothesis is incorrect.'
+    wrapper?.setProps({})
+
+  checkCorrectAnswerAndFeedback: ({dom, wrapper}, choiceIndex = 0) ->
+    expect(dom.querySelector(
+      '.openstax-exercise-card .exercise-review'
+    )).not.to.be.null
+
+    expect(dom.querySelector('.question-feedback').textContent).equals(step.feedback_html)
+    expect(dom.querySelector('.answer-correct').textContent).equals(CHOICES[choiceIndex].content_html)
+    expect(dom.querySelectorAll('.answer-input-box')).to.have.length(0)
+    expect(dom.querySelector('button.continue').textContent).equals('Next Question')
+
+  continueToNextStep: ({dom, wrapper, element}) ->
+    Testing.actions._clickMatch('.continue', {div: dom})
+    expect(props.onNextStep).to.have.been.called
+
+describe 'Exercise Component', ->
+
+  beforeEach ->
+    resetProps()
+
+  it 'renders with css classes', ->
+    Testing.renderComponent( Exercise, props: props ).then ({dom}) ->
+      expect(dom.querySelector(
+        '.openstax-exercise-card .exercise-free-response'
+      )).not.to.be.null
+
+  it 'can fill textarea for free respone', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+
+  it 'will update step on continue from filling in free response', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+
+  it 'renders multiple choices after continuing from free response', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+
+  it 'can update the multiple choice through the interface', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+      exerciseActionsAndChecks.pickMultipleChoice(args...)
+
+  xit 'can update the multiple choice through key presses', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+      exerciseActionsAndChecks.keyInMultipleChoice(args...)
+
+  it 'renders a review if correct answer and feedback are available after multiple-choice submit', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+      exerciseActionsAndChecks.pickMultipleChoice(args...)
+      exerciseActionsAndChecks.setCorrectAnswerAndFeedback(args...)
+      exerciseActionsAndChecks.checkCorrectAnswerAndFeedback(args...)
+
+  it 'attempts next step on continue from review mode', ->
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+      exerciseActionsAndChecks.pickMultipleChoice(args...)
+      exerciseActionsAndChecks.setCorrectAnswerAndFeedback(args...)
+      exerciseActionsAndChecks.checkCorrectAnswerAndFeedback(args...)
+      exerciseActionsAndChecks.continueToNextStep(args...)
+
+  it 'attempts next step if correct answer and feedback are not available after multiple-choice submit', ->
+    props.canReview = false
+
+    Testing.renderComponent( Exercise, props: props ).then (args...) ->
+
+      exerciseActionsAndChecks.enterFreeResponse(args...)
+      exerciseActionsAndChecks.continueOnFreeResponse(args...)
+      exerciseActionsAndChecks.updateToMultipleChoice(args...)
+      exerciseActionsAndChecks.pickMultipleChoice(args...)
+      exerciseActionsAndChecks.continueToNextStep(args...)
+
+
+  it 'renders a free response if given', ->
+    step.free_response = 'hi hi'
+
+    Testing.renderComponent( Exercise, props: props ).then ({dom}) ->
+      expect(dom.querySelector('.free-response').textContent).equals('hi hi')
+
+  it 'updates free response when passed new ones', ->
+    step.free_response = 'hi hi'
+
+    Testing.renderComponent( Exercise, props: props ).then ({dom, wrapper}) ->
+      step.free_response = 'bye bye'
+
+      wrapper.setProps({step})
+      expect(dom.querySelector('.free-response').textContent).equals('bye bye')
+
+  it 'renders a chosen multiple choice if given', ->
+    step.answer_id = CHOICES[0].id
+
+    Testing.renderComponent( Exercise, props: props ).then ({dom}) ->
+      expect(dom.querySelector('.answer-checked').textContent).equals(CHOICES[0].content_html)
+
+  it 'updates chosen answer when passed in updates', ->
+    step.answer_id = CHOICES[0].id
+
+    Testing.renderComponent( Exercise, props: props ).then ({dom, wrapper}) ->
+      step.answer_id = CHOICES[2].id
+      # something weird is happening, the new property seems to force the component to notice it's receiving new props.
+      wrapper.setProps({step, hack: ''})
+      expect(dom.querySelector('.answer-checked').textContent).equals(CHOICES[2].content_html)
diff --git a/shared/test/components/exercise/step-data.json b/shared/test/components/exercise/step-data.json
new file mode 100644
index 0000000000..3f19e4e0d4
--- /dev/null
+++ b/shared/test/components/exercise/step-data.json
@@ -0,0 +1,87 @@
+{
+  "id": "621836",
+  "task_id": "24639",
+  "type": "exercise",
+  "group": "core",
+  "is_completed": false,
+  "related_content": [
+    {
+      "title": "Temperature and Thermal Energy",
+      "chapter_section": [
+        11,
+        1
+      ]
+    }
+  ],
+  "labels": [],
+  "content_url": "https://exercises-qa.openstax.org/exercises/6690@1",
+  "context": "Water is very important for life. We need water to drink, to wash our hands, to cook, to water plants and many other things.",
+  "content": {
+    "uid": "6690@1",
+    "number": 6690,
+    "version": 1,
+    "published_at": "2015-12-17T22:11:24.761Z",
+    "editors": [],
+    "authors": [
+      {
+        "user_id": "1",
+        "name": "OpenStax"
+      }
+    ],
+    "copyright_holders": [
+      {
+        "user_id": "2",
+        "name": "Rice University"
+      }
+    ],
+    "derived_from": [],
+    "attachments": [],
+    "tags": [
+      "inbook-yes",
+      "display-free-response",
+      "display-rec-sensitive",
+      "dok2",
+      "ost-chapter-review",
+      "time-short",
+      "blooms-2",
+      "k12phys",
+      "concept",
+      "k12phys-ch11",
+      "k12phys-ch11-s01",
+      "k12phys-ch11-s01-lo02",
+      "k12phys-ch11-ex008"
+    ],
+    "stimulus_html": "",
+    "questions": [
+      {
+        "id": "10069",
+        "stimulus_html": "",
+        "stem_html": "A glass of water has a temperature of <span data-math=\"31\">31</span> degrees Celsius. What state of matter is it in?",
+        "answers": [
+          {
+            "id": "40641",
+            "content_html": "solid"
+          },
+          {
+            "id": "40642",
+            "content_html": "liquid"
+          },
+          {
+            "id": "40643",
+            "content_html": "gas"
+          },
+          {
+            "id": "40644",
+            "content_html": "plasma"
+          }
+        ],
+        "hints": [],
+        "formats": [
+          "free-response",
+          "multiple-choice"
+        ],
+        "combo_choices": []
+      }
+    ]
+  }
+}
diff --git a/shared/test/components/html.spec.coffee b/shared/test/components/html.spec.coffee
new file mode 100644
index 0000000000..0a049fc8d5
--- /dev/null
+++ b/shared/test/components/html.spec.coffee
@@ -0,0 +1,48 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Html = require 'components/html'
+
+describe 'Arbitrary Html Component', ->
+
+  beforeEach ->
+    @props =
+      className: 'html'
+      html: '<span>a test phrase</span>'
+      processHtmlAndMath: sinon.spy()
+      block: true
+
+    @frameProps =
+      className: 'html'
+      html: """<iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+      frameborder="0" allowfullscreen></iframe>"""
+      processHtmlAndMath: sinon.spy()
+      block: true
+
+    @nestedFrameProps =
+      className: 'html'
+      html: """<div><iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+      frameborder="0" allowfullscreen></iframe></div>"""
+      processHtmlAndMath: sinon.spy()
+      block: true
+
+  it 'renders html', ->
+    Testing.renderComponent( Html, props: @props ).then ({dom}) ->
+      expect(dom.tagName).equal('DIV')
+      expect(dom.textContent).equal('a test phrase')
+
+  it 'calls math processing function when rendered', ->
+    Testing.renderComponent( Html, props: @props ).then ({dom}) =>
+      expect(@props.processHtmlAndMath).to.have.been.calledWith(dom)
+
+  it 'renders using span when block is false', ->
+    @props.block = false
+    Testing.renderComponent( Html, props: @props ).then ({dom}) ->
+      expect(dom.tagName).equal('SPAN')
+
+  it 'wraps iframes with embed classes', ->
+    Testing.renderComponent( Html, props: @frameProps ).then ({dom}) ->
+      expect(dom.getElementsByClassName('embed-responsive').length).equal(1)
+
+  it 'wraps nested iframes with embed classes', ->
+    Testing.renderComponent( Html, props: @nestedFrameProps ).then ({dom}) ->
+      expect(dom.getElementsByClassName('embed-responsive').length).equal(1)
diff --git a/shared/test/components/notifications/email.spec.coffee b/shared/test/components/notifications/email.spec.coffee
new file mode 100644
index 0000000000..1fb728b2ed
--- /dev/null
+++ b/shared/test/components/notifications/email.spec.coffee
@@ -0,0 +1,31 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+EmailNotification = require 'components/notifications/email'
+
+describe 'Email Notifications', ->
+
+  beforeEach ->
+    @props =
+      notice:
+        id: '1'
+        message: 'a test notice'
+        type: 'tutor'
+        on: sinon.spy()
+        sendConfirmation: sinon.spy()
+        sendVerification: sinon.spy()
+
+  it 'displays verify message initially', ->
+    Testing.renderComponent( EmailNotification, props: @props ).then ({dom}) =>
+      expect(dom.textContent).to.contain('Verify now')
+      expect(dom.querySelector('input')).not.to.exist
+      Testing.actions.click(dom.querySelector('.action'))
+      expect(@props.notice.sendConfirmation).to.have.been.calledWith()
+
+  it 'displays verification input', ->
+    @props.notice.verifyInProgress = true
+    Testing.renderComponent( EmailNotification, props: @props ).then ({dom}) =>
+      expect(dom.querySelector('input')).to.exist
+      expect(dom.textContent).to.contain('Check your email')
+      dom.querySelector('input').value = '123456'
+      Testing.actions.click(dom.querySelector('.action'))
+      expect(@props.notice.sendVerification).to.have.been.calledWith('123456', sinon.match.func)
diff --git a/shared/test/components/notifications/pollers.spec.coffee b/shared/test/components/notifications/pollers.spec.coffee
new file mode 100644
index 0000000000..39f99a8098
--- /dev/null
+++ b/shared/test/components/notifications/pollers.spec.coffee
@@ -0,0 +1,52 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+moment = require 'moment'
+
+Poller = require 'model/notifications/pollers'
+FakeWindow = require 'test/helpers/fake-window'
+TEST_NOTICES = require 'api/notifications'
+
+describe 'Notification Pollers', ->
+  beforeEach ->
+    @notices = {
+      windowImpl: new FakeWindow
+      emit: sinon.spy()
+    }
+    @poller = Poller.forType(@notices, 'tutor')
+    sinon.stub(@poller, 'poll')
+    @poller.setUrl('test-url')
+
+  it 'repeatedly requests tutor notices', ->
+    expect(@notices.windowImpl.setInterval).to.have.been.calledWith(
+      sinon.match.any,
+      moment.duration(5, 'minutes').asMilliseconds()
+    )
+
+  it 'remembers notices when they are dismissed', ->
+    @poller.onReply(data: TEST_NOTICES)
+    expect(@notices.emit).to.have.been.calledWith('change')
+    active = @poller.getActiveNotifications()
+    expect( _.pluck(active, 'id') ).to.deep.equal( _.pluck(TEST_NOTICES, 'id') )
+    expect(@notices.windowImpl.localStorage.setItem).not.to.have.been.called
+
+  it 'does not list items that are ignored', ->
+    @notices.windowImpl.localStorage.getItem.returns('["2"]')
+    @poller.onReply(data: TEST_NOTICES)
+    active = @poller.getActiveNotifications()
+    expect( _.pluck(active, 'id') ).to.deep.equal( [TEST_NOTICES[0].id] )
+
+  it 'removes outdated ids from localstorage', ->
+    # mock that we've observed the current notices
+    @notices.windowImpl.localStorage.getItem.returns('["1", "2"]')
+    @poller.onReply(data: TEST_NOTICES)
+    expect(@notices.windowImpl.localStorage.setItem).not.to.have.been.called
+
+    # load a new set of messages that do not include the previous ones
+    @poller.onReply(
+      data: [{id: '3', message: 'message three'}]
+    )
+
+    # 1 and 2 are removed
+    expect(@notices.windowImpl.localStorage.setItem).to.have.been.calledWith(
+      'ox-notifications-tutor', '[]'
+    )
diff --git a/shared/test/components/notifications/system.spec.coffee b/shared/test/components/notifications/system.spec.coffee
new file mode 100644
index 0000000000..12d2592ed5
--- /dev/null
+++ b/shared/test/components/notifications/system.spec.coffee
@@ -0,0 +1,32 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+SystemNotifications = require 'components/notifications/system'
+Notifications = require 'model/notifications'
+
+describe 'System Notifications', ->
+
+  beforeEach ->
+    sinon.stub(Notifications, 'acknowledge')
+    @props =
+      notice:
+        id: '1'
+        message: 'a test notice'
+        type: 'tutor'
+
+  afterEach ->
+    Notifications.acknowledge.restore()
+
+  it 'remembers notice as ignored when dismiss is clicked', ->
+    Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) =>
+      Testing.actions.click(dom.querySelector('.dismiss'))
+      expect(Notifications.acknowledge).to.have.been.calledWith(@props.notice)
+
+  it 'displays icon based on level', ->
+    @props.notice.level = 'alert'
+    Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.fa-exclamation-triangle')).to.exist
+
+  it 'displays icon provided', ->
+    @props.notice.icon = 'beer'
+    Testing.renderComponent( SystemNotifications, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.fa-beer')).to.exist
diff --git a/shared/test/components/pinned-header-footer-card/index.spec.coffee b/shared/test/components/pinned-header-footer-card/index.spec.coffee
new file mode 100644
index 0000000000..bc18c32020
--- /dev/null
+++ b/shared/test/components/pinned-header-footer-card/index.spec.coffee
@@ -0,0 +1,34 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+PinnedHeaderFooterCard = require 'components/pinned-header-footer-card'
+
+TestChildComponent = React.createClass
+  render: -> React.createElement('span', {}, 'i am a test')
+
+describe 'Pinned Header/Footer Card Component', ->
+
+  beforeEach ->
+    @props =
+      cardType: 'test'
+      children: React.createElement(TestChildComponent)
+
+  it 'renders child components', ->
+    Testing.renderComponent( PinnedHeaderFooterCard, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('i am a test')
+
+  it 'sets body class', ->
+    Testing.renderComponent( PinnedHeaderFooterCard, props: @props ).then ({dom}) ->
+      expect(document.body.classList.contains('test-view')).to.be.true
+      expect(document.body.classList.contains('pinned-view')).to.be.true
+      expect(document.body.classList.contains('pinned-force-shy')).to.be.false
+
+  it 'sets pinned-shy when scrolled down', (done) ->
+    @props.header = React.createElement('span', {}, 'i am header')
+
+    Testing.renderComponent( PinnedHeaderFooterCard, unmountAfter: 20, props: @props ).then ({dom, element}) ->
+      expect(document.body.classList.contains('pinned-shy')).to.be.false
+      element.setState(scrollTop: 400) # imitate react-scroll-components
+      _.defer ->
+        expect(document.body.classList.contains('pinned-shy')).to.be.true
+        done()
diff --git a/shared/test/components/question/answer.spec.coffee b/shared/test/components/question/answer.spec.coffee
new file mode 100644
index 0000000000..21c2e8e3f9
--- /dev/null
+++ b/shared/test/components/question/answer.spec.coffee
@@ -0,0 +1,32 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'test/helpers'
+
+{Answer} = require 'components/question/answer'
+STEP = require '../exercise/step-data'
+
+ANSWER =
+  "id": "40641",
+  "content_html": "solid"
+  "feedback_html": "feedback yo"
+
+describe 'Answer Component', ->
+
+  beforeEach ->
+    @props =
+      answer: ANSWER
+      type: 'student'
+
+    @propsWithFeedback =
+      answer: ANSWER
+      type: 'student'
+      show_all_feedback: true
+
+  it 'renders answer', ->
+    Testing.renderComponent( Answer, props: @props ).then ({dom}) ->
+      answers = _.pluck dom.querySelectorAll('.answer-content'), 'textContent'
+      expect(answers).to.deep.equal(['solid'])
+
+  it 'renders answer feedback based on props', ->
+
+    Testing.renderComponent( Answer, props: @propsWithFeedback ).then ({dom}) ->
+      answers = _.pluck dom.querySelectorAll('.question-feedback-content'), 'textContent'
+      expect(answers).to.deep.equal(['feedback yo'])
diff --git a/shared/test/components/question/index.spec.coffee b/shared/test/components/question/index.spec.coffee
new file mode 100644
index 0000000000..abbe49168f
--- /dev/null
+++ b/shared/test/components/question/index.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _, ReactTestUtils} = require 'test/helpers'
+
+Question = require 'components/question'
+STEP = require '../exercise/step-data'
+
+describe 'Question Component', ->
+
+  beforeEach ->
+    @props =
+      model: STEP.content.questions[0]
+      onChange: sinon.spy()
+      type: 'student'
+
+  it 'renders answers', ->
+    Testing.renderComponent( Question, props: @props ).then ({dom}) ->
+      answers = _.pluck dom.querySelectorAll('.answers-answer'), 'textContent'
+      expect(answers).to.deep.equal(['solid', 'liquid', 'gas', 'plasma'])
+
+  it 'highlights when answer is clicked', (done) ->
+    Testing.renderComponent( Question, props: @props ).then ({dom}) =>
+      answer = dom.querySelectorAll('.answers-answer')[1]
+      input = answer.querySelector('input')
+      expect(answer.classList.contains('answer-checked')).to.be.false
+      ReactTestUtils.Simulate.change(input, target: {checked: true})
+      Testing.actions.click(input)
+      _.defer =>
+        expect(@props.onChange).to.have.been.called
+        expect(answer.classList.contains('answer-checked')).to.be.true
+        done()
+
+  it 'renders the context when given', ->
+    @props.context = STEP.context
+    Testing.renderComponent( Question, props: @props ).then ({dom}) ->
+      expect(dom.querySelector('.question-context').textContent).to.have.string('Water is very important for life')
diff --git a/shared/test/components/smart-overflow.spec.coffee b/shared/test/components/smart-overflow.spec.coffee
new file mode 100644
index 0000000000..0f2ed6658a
--- /dev/null
+++ b/shared/test/components/smart-overflow.spec.coffee
@@ -0,0 +1,23 @@
+React = require 'react'
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+SmartOverflow = require 'components/smart-overflow'
+
+TestChildComponent = React.createClass
+  render: -> React.createElement('span', {}, 'i am a test')
+
+describe 'SmartOverflow Component', ->
+
+  beforeEach ->
+    @props =
+      className: 'testing'
+      children: React.createElement(TestChildComponent)
+
+  it 'renders with className', ->
+    Testing.renderComponent( SmartOverflow, props: @props ).then ({dom}) ->
+      expect(dom.classList.contains('testing')).to.be.true
+      expect(dom.classList.contains('openstax-smart-overflow')).to.be.true
+
+  it 'renders child components', ->
+    Testing.renderComponent( SmartOverflow, props: @props ).then ({dom}) ->
+      expect(dom.textContent).equal('i am a test')
diff --git a/shared/test/components/spy-mode.spec.coffee b/shared/test/components/spy-mode.spec.coffee
new file mode 100644
index 0000000000..c587621c0b
--- /dev/null
+++ b/shared/test/components/spy-mode.spec.coffee
@@ -0,0 +1,40 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+React = require 'react'
+
+SpyMode = require 'components/spy-mode'
+
+TestChildComponent = React.createClass
+  render: -> React.createElement('span', {}, 'i am a test')
+
+describe 'SpyMode', ->
+
+  describe 'Wrapper', ->
+    it 'renders with className', ->
+      Testing.renderComponent( SpyMode.Wrapper ).then ({dom}) ->
+        expect(dom.classList.contains('openstax-debug-content')).to.be.true
+        expect(dom.classList.contains('is-enabled')).to.be.false
+
+    it 'renders a pi symbol', ->
+      Testing.renderComponent( SpyMode.Wrapper ).then ({dom}) ->
+        expect(dom.querySelector('.debug-toggle-link').textContent).equal('π')
+
+    it 'enables debug class when pi symbol is clicked', ->
+      Testing.renderComponent( SpyMode.Wrapper ).then ({dom}) ->
+        Testing.actions.click(dom.querySelector('.debug-toggle-link'))
+        _.defer ->
+          expect(dom.classList.contains('is-enabled')).to.be.true
+
+    it 'renders child components', ->
+      props = {children: React.createElement(TestChildComponent)}
+      Testing.renderComponent( SpyMode.Wrapper, {props} ).then ({dom}) ->
+        expect(dom.textContent).equal('i am a testπ')
+
+  describe 'Content', ->
+    it 'renders with className', ->
+      Testing.renderComponent( SpyMode.Content ).then ({dom}) ->
+        expect(dom.classList.contains('visible-when-debugging')).to.be.true
+
+    it 'renders child components', ->
+      props = {children: React.createElement(TestChildComponent)}
+      Testing.renderComponent( SpyMode.Content, {props} ).then ({dom}) ->
+        expect(dom.textContent).equal('i am a test')
diff --git a/shared/test/components/surety-guard.spec.coffee b/shared/test/components/surety-guard.spec.coffee
new file mode 100644
index 0000000000..c3105589ff
--- /dev/null
+++ b/shared/test/components/surety-guard.spec.coffee
@@ -0,0 +1,30 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+React = require 'react'
+
+SuretyGuard = require 'components/surety-guard'
+
+WrappedComponent = React.createClass
+  render: ->
+    React.createElement(SuretyGuard, @props,
+      React.createElement('a', {}, 'i am a test link')
+    )
+
+describe 'SuretyGuard', ->
+  beforeEach ->
+    @props =
+      onConfirm: sinon.spy()
+      message: 'Yo!, you sure?'
+
+  it 'renders children', ->
+    Testing.renderComponent( WrappedComponent, props: @props ).then ({dom}) ->
+      expect(dom.textContent).to.include('i am a test link')
+
+  it 'displays when clicked', (done) ->
+    Testing.renderComponent( WrappedComponent, props: @props ).then ({dom, element}) ->
+      expect(window.document.querySelector('.openstax-surety-guard')).not.to.exist
+      Testing.actions.click(dom)
+      _.defer ->
+        guard = window.document.querySelector('.openstax-surety-guard')
+        expect(guard).to.exist
+        expect(guard.textContent).to.include('Yo!')
+        done()
diff --git a/shared/test/components/urls.spec.coffee b/shared/test/components/urls.spec.coffee
new file mode 100644
index 0000000000..4fbf0363d1
--- /dev/null
+++ b/shared/test/components/urls.spec.coffee
@@ -0,0 +1,34 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+URLs = require 'model/urls'
+describe 'URLs', ->
+
+  beforeEach ->
+    @urls = {foo_url: 'http://foo.bar.com/'}
+    URLs.update(@urls)
+
+  afterEach ->
+    URLs.reset()
+
+  it 'strips _url from keys', ->
+    expect( URLs.get('foo') ).to.equal( 'http://foo.bar.com' )
+
+  it 'can construct a url from parts', ->
+    expect( URLs.construct('foo', 'bar', 'baz', 1) )
+      .to.equal( 'http://foo.bar.com/bar/baz/1' )
+
+  it 'only remembers keys that end in _url', ->
+    URLs.update({
+      '1test_url': 'http://test.com',
+      '2test':     'http://test.com'
+    })
+    expect( URLs.get('1test') ).to.equal('http://test.com')
+    expect( URLs.get('2test') ).not.to.exist
+
+  it 'ignores non-string urls', ->
+    URLs.update({
+      'object_url': {object: true}
+      'number_url': 42
+    })
+    expect( URLs.get('object') ).not.to.exist
+    expect( URLs.get('number') ).not.to.exist
diff --git a/shared/test/config/karma-coverage.config.coffee b/shared/test/config/karma-coverage.config.coffee
new file mode 100644
index 0000000000..0da3891c4a
--- /dev/null
+++ b/shared/test/config/karma-coverage.config.coffee
@@ -0,0 +1,32 @@
+{webpack} = require './karma.common'
+_ = require 'underscore'
+commonConfig = require './karma.common'
+
+module.exports = (karmaConfig) ->
+
+  config = _.extend({
+
+    # usefull for debugging Karma config
+    # logLevel: karmaConfig.LOG_DEBUG
+
+    coverageReporter:
+      type: 'text'
+
+  }, commonConfig)
+
+  config.reporters.push('coverage')
+
+  for spec, processors of config.preprocessors
+    processors.push('coverage')
+
+  config.webpack.module.postLoaders = [{
+    test: /\.(cjsx|coffee)$/
+    loader: 'istanbul-instrumenter'
+    exclude: /(test|node_modules|resources|bower_components)/
+  }]
+
+  config.plugins.push(
+    require('karma-coverage')
+  )
+
+  karmaConfig.set(config)
diff --git a/shared/test/config/karma-dev.config.coffee b/shared/test/config/karma-dev.config.coffee
new file mode 100644
index 0000000000..96fbf621c9
--- /dev/null
+++ b/shared/test/config/karma-dev.config.coffee
@@ -0,0 +1,11 @@
+{webpack} = require './karma.common'
+_ = require 'underscore'
+commonConfig = require './karma.common'
+
+module.exports = (karmaConfig) ->
+
+  config = _.extend(commonConfig, {
+    browsers: [process.env.KARMA_BROWSER or 'PhantomJS']
+  })
+
+  karmaConfig.set(config)
diff --git a/shared/test/config/karma-in-background.js b/shared/test/config/karma-in-background.js
new file mode 100644
index 0000000000..ef1a595878
--- /dev/null
+++ b/shared/test/config/karma-in-background.js
@@ -0,0 +1,11 @@
+var KarmaServer = require('karma').Server;
+
+var files = JSON.parse(process.argv[2]);
+
+server = new KarmaServer({
+  configFile: __dirname + '/karma-dev.config.coffee',
+  files: files,
+  singleRun: false
+})
+
+server.start()
diff --git a/test/config/karma.common.coffee b/shared/test/config/karma.common.coffee
similarity index 94%
rename from test/config/karma.common.coffee
rename to shared/test/config/karma.common.coffee
index 03d7726f3f..530fdea4e0 100644
--- a/test/config/karma.common.coffee
+++ b/shared/test/config/karma.common.coffee
@@ -1,4 +1,5 @@
 _ = require 'underscore'
+path = require 'path'
 
 module.exports =
   basePath: '../../'
@@ -18,6 +19,7 @@ module.exports =
   webpack:
     devtool: 'eval-source-map'
     resolve:
+      root: [ path.resolve(__dirname, '../../src'), path.resolve(__dirname, '../..') ]
       extensions: ['', '.js', '.json', '.coffee', '.cjsx']
     module:
       noParse: [
diff --git a/shared/test/config/karma.config.coffee b/shared/test/config/karma.config.coffee
new file mode 100644
index 0000000000..bc95887459
--- /dev/null
+++ b/shared/test/config/karma.config.coffee
@@ -0,0 +1,5 @@
+webpack = require('webpack')
+commonConfig = require './karma.common'
+
+module.exports = (config) ->
+  config.set commonConfig
diff --git a/shared/test/config/test-runner.coffee b/shared/test/config/test-runner.coffee
new file mode 100644
index 0000000000..278e59e0b1
--- /dev/null
+++ b/shared/test/config/test-runner.coffee
@@ -0,0 +1,69 @@
+_ = require 'underscore'
+#gulpKarma = require 'gulp-karma'
+Karma  = require 'karma'
+gulp   = require 'gulp'
+gutil  = require 'gulp-util'
+moment = require 'moment'
+path   = require 'path'
+spawn  = require('child_process').spawn
+fileExists = require 'file-exists'
+_ = require 'underscore'
+
+class TestRunner
+
+  isKarmaRunning: false
+
+  pendingSpecs: []
+
+  runKarma: ->
+    specs = _.unique @pendingSpecs
+
+    # no need to start a server if there are no pending specs, or the spec list hasn't changed
+    return if _.isEmpty(@pendingSpecs)
+    if _.isEqual(@curSpecs?.sort(), specs.sort())
+      @pendingSpecs = []
+      return
+
+    # if there's already a karma instance running, then kill it, since we're starting a new one
+    if @isKarmaRunning and @child
+      process.kill(@child.pid, 'SIGTERM')
+      @child = null
+
+    @isKarmaRunning = true
+    gutil.log("[specs]", gutil.colors.green("testing #{specs.join(' ')}"))
+    @pendingSpecs = []
+    startAt = moment()
+
+    @child = spawn( 'node', [
+      path.join(__dirname, 'karma-in-background.js'),
+      JSON.stringify(specs)
+    ], {stdio: 'inherit'} )
+
+    #save the spec list that is being run
+    @curSpecs = specs[...]
+
+    @child.on('exit', (exitCode) =>
+      @isKarmaRunning = false
+      duration = moment.duration(moment().diff(startAt))
+      elapsed = duration.minutes() + ':' + duration.seconds()
+      gutil.log("[test]", gutil.colors.green("done. #{specs.length} specs in #{elapsed}"))
+    )
+
+  onFileChange: (change) ->
+    if change.relative.match(/^src/)
+      testPath = change.relative.replace('src', 'test')
+      testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      spec = testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      existingSpecs = _.select([
+        testPath.replace(/\.(\w+)$/, ".spec.cjsx"), testPath.replace(/\.(\w+)$/, ".spec.coffee")
+      ], fileExists)
+      if _.isEmpty(existingSpecs)
+        gutil.log("[change]", gutil.colors.red("no spec was found for #{change.relative}"))
+      else
+        @pendingSpecs.push(existingSpecs...)
+    else
+      @pendingSpecs.push(change.relative)
+    gutil.log("[test]", gutil.colors.green("pending: #{@pendingSpecs.join(' ')}")) if @pendingSpecs.length
+    @runKarma()
+
+module.exports = TestRunner
diff --git a/shared/test/helpers/fake-window.coffee b/shared/test/helpers/fake-window.coffee
new file mode 100644
index 0000000000..b4cc0a0c74
--- /dev/null
+++ b/shared/test/helpers/fake-window.coffee
@@ -0,0 +1,19 @@
+_ = require 'underscore'
+
+EmptyFn = ->
+  return undefined
+
+class FakeWindow
+  clearInterval: EmptyFn
+  setInterval: -> Math.random()
+  document:
+    hidden: false
+
+  constructor: ->
+    for method in _.functions(@)
+      sinon.spy(@, method)
+    @localStorage =
+      getItem: sinon.stub().returns('[]')
+      setItem: sinon.stub()
+
+module.exports = FakeWindow
diff --git a/shared/test/helpers/html-videos.coffee b/shared/test/helpers/html-videos.coffee
new file mode 100644
index 0000000000..cfbb22ada9
--- /dev/null
+++ b/shared/test/helpers/html-videos.coffee
@@ -0,0 +1,58 @@
+HtmlVideo = require 'helpers/html-videos'
+
+describe 'Html Video Helper', ->
+  it 'can wrap an html video frame in a div', ->
+    dom = document.createElement('div')
+    html = """<iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>"""
+
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive').length).to.equal(1)
+
+  it 'can wrap multiple html videos frame each in a div', ->
+    dom = document.createElement('div')
+    html = """<iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>"""
+
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive').length).to.equal(2)
+
+  it 'can will not wrap frames if a wrapper already exists', ->
+    dom = document.createElement('div')
+    html = """<div class="frame-wrapper embed-responsive">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe></div>"""
+
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive').length).to.equal(1)
+
+  it 'can wrap html videos frame even if nested', ->
+    dom = document.createElement('div')
+    html = """<div><div><iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe></div></div>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>"""
+
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive').length).to.equal(2)
+
+  it 'can add responsive embed classes with correct aspect ratio', ->
+    dom = document.createElement('div')
+
+    html = """<iframe width="560" height="315" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>"""
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive-16by9').length).to.equal(1)
+
+    html = """<iframe width="560" height="420" src="https://www.youtube.com/embed/BINK6r1Wy78"
+    frameborder="0" allowfullscreen></iframe>"""
+    dom.innerHTML = html
+    dom = HtmlVideo.wrapFrames(dom)
+    expect(dom.getElementsByClassName('embed-responsive-4by3').length).to.equal(1)
diff --git a/shared/test/helpers/index.coffee b/shared/test/helpers/index.coffee
new file mode 100644
index 0000000000..1b28dc9c82
--- /dev/null
+++ b/shared/test/helpers/index.coffee
@@ -0,0 +1,46 @@
+_ = require 'underscore'
+expect = chai.expect
+React = require 'react/addons'
+ReactTestUtils = React.addons.TestUtils
+{Promise}      = require 'es6-promise'
+{commonActions} = require './utilities'
+sandbox = null
+
+Wrapper = React.createClass
+
+  render: ->
+    React.createElement(@props._wrapped_component,
+      _.extend(_.omit(@props, '_wrapped_component', 'children'), ref: 'element')
+      @props.children
+    )
+
+Testing = {
+
+  renderComponent: (component, options = {}) ->
+    options.props ||= {}
+    unmountAfter = options.unmountAfter or 1
+    root = document.createElement('div')
+    promise = new Promise( (resolve, reject) ->
+      props = _.clone(options.props)
+      props._wrapped_component = component
+      wrapper = React.render( React.createElement(Wrapper, props), root )
+      resolve({
+        root,
+        wrapper,
+        element: wrapper.refs.element,
+        dom: React.findDOMNode(wrapper.refs.element)
+      })
+    )
+    # defer adding the then callback so it'll be called after whatever is attached after the return
+    _.defer -> promise.then ->
+      _.delay( ->
+        React.unmountComponentAtNode(root)
+      , unmountAfter )
+      return arguments
+    promise
+
+  actions: commonActions
+
+}
+
+module.exports = {Testing, expect, sinon, React, _, ReactTestUtils}
diff --git a/shared/test/helpers/mathjax.spec.coffee b/shared/test/helpers/mathjax.spec.coffee
new file mode 100644
index 0000000000..c663b5a824
--- /dev/null
+++ b/shared/test/helpers/mathjax.spec.coffee
@@ -0,0 +1,41 @@
+{Testing, expect, sinon, _} = require './index'
+
+{typesetMath} = require 'helpers/mathjax'
+FakeWindow = require './fake-window'
+
+callTypeset = (dom, window) ->
+  new Promise( ( res, rej ) ->
+    typesetMath(dom, window)
+    _.delay ->
+      res(dom)
+    , 110
+  )
+
+
+describe 'Mathjax Helper', ->
+
+  beforeEach ->
+    @dom = document.createElement('div')
+    @window = new FakeWindow
+    @window.MathJax = { Hub: {Typeset: sinon.spy(), Queue: sinon.spy()} }
+    @window.document = @dom
+
+  it 'can typeset latex', ->
+    @dom.innerHTML = '<div data-math="\\pi">a pi symbol</div>'
+    callTypeset(@dom, @window).then =>
+      expect( @window.MathJax.Hub.Typeset ).to.have.been.calledWith([@dom.children[0]])
+      expect( @dom.textContent ).to.include('\\pi')
+
+
+  it 'typesets document with mathml is present', ->
+    @dom.innerHTML = '''
+      <math xmlns="http://www.w3.org/1998/Math/MathML"1
+            display="inline">2
+        <mrow>
+          <mi>PI</mi>
+        </mrow>
+      </math>
+    '''
+    callTypeset(@dom, @window).then =>
+      expect( @window.MathJax.Hub.Typeset ).to.have.been.calledWith(@window.document)
+      expect( @dom.textContent ).to.include('PI')
diff --git a/shared/test/helpers/utilities.cjsx b/shared/test/helpers/utilities.cjsx
new file mode 100644
index 0000000000..318341010f
--- /dev/null
+++ b/shared/test/helpers/utilities.cjsx
@@ -0,0 +1,169 @@
+React = require 'react/addons'
+
+{Promise} = require 'es6-promise'
+_ = require 'underscore'
+
+
+routerStub =
+  container: document.createElement('div')
+
+  unmount: ->
+    React.unmountComponentAtNode(@container)
+    @container = document.createElement('div')
+
+  forceUpdate: (component, args...) ->
+    promise = new Promise (resolve, reject) ->
+      try
+        component.forceUpdate( ->
+          resolve(args...)
+        )
+      catch error
+        reject(error)
+
+    promise
+
+componentStub =
+  container: document.createElement('div')
+  _render: (div, component, result) ->
+    result ?= {}
+
+    promise = new Promise (resolve, reject) ->
+      try
+        React.render(component, div, ->
+          component = @
+          # merge in custom results with the default kitchen sink of results
+          result = _.defaults({div, component}, result)
+          resolve(result)
+        )
+      catch error
+        reject(error)
+
+    promise
+
+  render: (component, result) ->
+    @_render(@container, component, result)
+
+  unmount: ->
+    React.unmountComponentAtNode(@container)
+    @container = document.createElement('div')
+
+commonActions =
+  clickButton: (div, selector) ->
+    selector ?= 'button.btn-primary'
+    button = div.querySelector(selector)
+    commonActions.click(button)
+    button = div.querySelector(selector)
+
+  click: (clickElementNode, eventData = {}) ->
+    React.addons.TestUtils.Simulate.click(clickElementNode, eventData)
+
+  # http://stackoverflow.com/questions/24140773/could-not-simulate-mouseenter-event-using-react-test-utils
+  mouseEnter: (clickElementNode, eventData = {}) ->
+    React.addons.TestUtils.SimulateNative.mouseOver(clickElementNode, eventData)
+
+  mouseLeave: (clickElementNode, eventData = {}) ->
+    React.addons.TestUtils.SimulateNative.mouseOut(clickElementNode, eventData)
+
+  blur: (clickElementNode, eventData = {}) ->
+    React.addons.TestUtils.Simulate.blur(clickElementNode, eventData)
+
+  select: (selectElementNode) ->
+    React.addons.TestUtils.Simulate.select(selectElementNode)
+
+  _clickMatch: (selector, args...) ->
+    {div} = args[0]
+    commonActions.clickButton(div, selector)
+    args[0]
+
+  clickMatch: (selector) ->
+    (args...) ->
+      Promise.resolve(commonActions._clickMatch(selector, args...))
+
+  _clickComponent: (target, args...) ->
+    targetNode = React.findDOMNode(target)
+    commonActions.click(targetNode)
+    args[0]
+
+  _clickComponentOfType: (targetComponent, args...) ->
+    {div, component} = args[0]
+    target = React.addons.TestUtils.findRenderedComponentWithType(component, targetComponent)
+    commonActions._clickComponent(target)
+
+  clickComponentOfType: (targetComponent) ->
+    (args...) ->
+      Promise.resolve(commonActions._clickComponentOfType(targetComponent, args...))
+
+  clickComponent: (targetComponent) ->
+    (args...) ->
+      Promise.resolve(commonActions._clickComponent(targetComponent, args...))
+
+  _clickDOMNode: (targetNode, args...) ->
+    commonActions.click(targetNode)
+    args[0]
+
+  clickDOMNode: (targetDOMNode) ->
+    (args...) ->
+      Promise.resolve(commonActions._clickDOMNode(targetDOMNode, args...))
+
+  _focusMatch: (selector, args...) ->
+    {div} = args[0]
+    elementNode = div.querySelector(selector)
+    React.addons.TestUtils.Simulate.focus(elementNode)
+    args[0]
+
+  focusMatch: (selector) ->
+    (args...) ->
+      Promise.resolve(commonActions._focusMatch(selector, args...))
+
+  _changeDOMNode: (targetNode, eventData, args...) ->
+    React.addons.TestUtils.Simulate.change(targetNode, eventData)
+    args[0]
+
+  _changeMatch: (selector, eventData, args...) ->
+    {div} = args[0]
+    elementNode = div.querySelector(selector)
+    commonActions._changeDOMNode(elementNode, eventData)
+    args[0]
+
+  changeMatch: (selector, eventData) ->
+    (args...) ->
+      Promise.resolve(commonActions._changeMatch(selector, eventData, args...))
+
+  _hoverMatch: (selector, args...) ->
+    {div} = args[0]
+    elementNode = div.querySelector(selector)
+    React.addons.TestUtils.Simulate.mouseOver(elementNode)
+    args[0]
+
+  hoverMatch: (selector) ->
+    (args...) ->
+      Promise.resolve(commonActions._hoverMatch(selector, args...))
+
+  _fillTextarea: (selector, response, args...) ->
+    {div} = args[0]
+    selector ?= 'textarea'
+    response ?= 'Test Response'
+
+    textarea = div.querySelector(selector)
+    textarea.value = response
+    React.addons.TestUtils.Simulate.focus(textarea)
+    React.addons.TestUtils.Simulate.keyDown(textarea, {key: 'Enter'})
+    React.addons.TestUtils.Simulate.change(textarea)
+
+    _.defaults(args[0], {textarea})
+
+  fillTextarea: (selector, response) ->
+    (args...) ->
+      Promise.resolve(commonActions._fillTextarea(selector, response, args...))
+
+  playThroughFunctions: (actionAndCheckFunctions) ->
+    (args...) ->
+      # perform appropriate step actions for each incomplete step
+      # by chaining each promised step action
+      # Forces promises to execute in order.  The actions are order dependent
+      # so Promises.all will not work in this case.
+      actionAndCheckFunctions.reduce((current, next) ->
+        current.then(next)
+      , Promise.resolve(args...))
+
+module.exports = {componentStub, commonActions}
diff --git a/shared/test/model/exercise.spec.coffee b/shared/test/model/exercise.spec.coffee
new file mode 100644
index 0000000000..ae287f4daf
--- /dev/null
+++ b/shared/test/model/exercise.spec.coffee
@@ -0,0 +1,12 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+Exercise = require 'model/exercise'
+
+EXERCISE = require 'api/exercise-preview/data'
+
+describe 'Exercise Model Helpers', ->
+
+  it 'tests for types', ->
+    expect( Exercise.isMultipart(EXERCISE) ).to.be.true
+    expect( Exercise.hasVideo(EXERCISE) ).to.be.true
+    expect( Exercise.hasInteractive(EXERCISE) ).to.be.false
diff --git a/shared/test/model/notifications.spec.coffee b/shared/test/model/notifications.spec.coffee
new file mode 100644
index 0000000000..d3c6e1ffce
--- /dev/null
+++ b/shared/test/model/notifications.spec.coffee
@@ -0,0 +1,45 @@
+{Testing, expect, sinon, _} = require 'test/helpers'
+
+URLs = require 'model/urls'
+Notifications = require 'model/notifications'
+Poller = require 'model/notifications/pollers'
+FakeWindow = require 'test/helpers/fake-window'
+
+describe 'Notifications', ->
+  beforeEach ->
+    @windowImpl = new FakeWindow
+    sinon.stub(Poller.prototype, 'poll')
+    sinon.spy(Poller.prototype, 'setUrl')
+
+  afterEach ->
+    Poller::poll.restore()
+    Poller::setUrl.restore()
+    Notifications.stopPolling()
+    URLs.reset()
+
+  it 'polls when URL is set', ->
+    URLs.update(base_accounts_url: 'http://localhost:2999')
+    Notifications.startPolling(@windowImpl)
+    expect(Poller::poll).to.have.callCount(1)
+    expect(Poller::setUrl.lastCall.args).to.deep.equal(['http://localhost:2999/api/user'])
+    URLs.update(tutor_notices_url: 'http://localhost:3001/api/notifications')
+    Notifications.startPolling(@windowImpl)
+    expect(Poller::poll).to.have.callCount(2)
+
+
+  it 'can display and confirm manual notifications', ->
+    changeListener = sinon.stub()
+    notice = {message: 'hello world', icon: 'globe'}
+    Notifications.on('change', changeListener)
+    Notifications.display(notice)
+    expect(changeListener).to.have.been.called
+
+    active = Notifications.getActive()
+    expect(active).to.have.length(1)
+    # should have copied the object vs mutating it
+    expect(active[0]).not.to.not.equal(notice)
+    expect(active[0].type).to.exist
+
+    Notifications.acknowledge(active[0])
+    expect(changeListener).to.have.callCount(2)
+    expect(Notifications.getActive()).to.be.empty
diff --git a/test/all-source-files.coffee b/test/all-source-files.coffee
index 3fea953e9d..5d36dfacfb 100644
--- a/test/all-source-files.coffee
+++ b/test/all-source-files.coffee
@@ -1,2 +1,2 @@
-testsContext = require.context("../src", true, /\.(cjsx|coffee)$/)
-testsContext.keys().forEach(testsContext)
+sourceFiles = require.context("src", true, /\.(cjsx|coffee)$/)
+sourceFiles.keys().forEach(sourceFiles)
\ No newline at end of file
diff --git a/test/all-tests.coffee b/test/all-tests.coffee
index 4453eafe2c..7f72150e6c 100644
--- a/test/all-tests.coffee
+++ b/test/all-tests.coffee
@@ -1,78 +1,5 @@
-# For some reason, this navbar component test will have warnings about setting
-# state when component is unmounted if it's after some of the other specs.
-# The tests still run and progress just fine despite the warnings, but for now,
-# I'm leaving this test here.
-# TODO figure out why.
-#
-# Components
-require './components/course-listing.spec'
-require './components/cc-dashboard/index.spec'
-require './components/cc-dashboard/dashboard.spec'
-require './components/navbar/index.spec'
-require './components/navbar/account-link.spec'
-require './components/navbar/user-actions-menu.spec'
-require './components/navbar/center-controls.spec'
-require './components/navbar/server-error-monitoring.spec'
-require './components/task-plan/reading-plan.spec'
-require './components/task-plan/builder/index.spec'
-require './components/task-plan/homework-plan.spec'
-require './components/task-plan/homework/exercise-controls.spec'
-require './components/task-plan/footer.spec'
-require './components/task.spec'
-require './components/task-homework.spec'
-require './components/task-homework-past-due.spec'
-require './components/task-content.spec'
-require './components/practice.spec'
-require './components/course-calendar/plan.spec'
-require './components/course-calendar.spec'
-require './components/performance-forecast/index.spec'
-require './components/performance-forecast/chapter.spec'
-require './components/performance-forecast/section.spec'
-require './components/performance-forecast/practice-button.spec'
-require './components/performance-forecast/progress-bar.spec'
-require './components/performance-forecast/weaker-panel.spec'
-require './components/performance-forecast/weaker-sections.spec'
-require './components/course-periods-nav.spec'
-require './components/student-dashboard.spec'
-require './components/student-dashboard/progress-guide.spec'
-require './components/reference-book.spec'
-require './components/reference-book/slide-out-menu-toggle.spec'
-require './components/course-settings/roster.spec'
-require './components/icon.spec'
-require './components/tutor-input.spec'
-require './components/tutor-dialog.spec'
-require './components/unsaved-state.spec'
-require './components/buttons/browse-the-book.spec'
-require './components/book-content-mixin.spec'
-require './components/scores/reading-cell.spec'
-require './components/scores/homework-cell.spec'
-require './components/name.spec'
-require './components/scroll-to-link-mixin.spec'
-require './components/media-preview.spec'
-require './components/tutor-popover.spec'
-require './components/course-grouping-label.spec'
+# Somehow this pulls in a test that crashes phantomjs, which in turn causes karma to exit with status 1
+# testsContext = require.context("../tutor/test", true, /\.spec\.(cjsx|coffee)$/)
+# testsContext.keys().forEach(testsContext)
 
-# Flux your muscle
-require './crud-store.spec'
-require './task-store.spec'
-require './task-step-store.spec'
-require './loadable.spec'
-require './teacher-task-plan-store.spec'
-require './performance-forecast-store.spec'
-require './step-panel-policy.spec'
-require './time.spec'
-require './current-user-store.spec'
-require './course-listing-store.spec'
-require './flux/plan-publish.spec'
-require './flux/media.spec'
-require './flux/exercise.spec'
-require './flux/tasking.spec'
-
-# Helpers
-require './task-helpers.spec'
-require './dom-helpers.spec'
-require './helpers/string.spec'
-require './helpers/period.spec'
-require './helpers/job.spec'
-require './helpers/time.spec'
-require './helpers/analytics.spec'
+require 'test/all-tests'
diff --git a/test/components/student-dashboard/practice-buttons.spec.coffee b/test/components/student-dashboard/practice-buttons.spec.coffee
deleted file mode 100644
index 1460f2c663..0000000000
--- a/test/components/student-dashboard/practice-buttons.spec.coffee
+++ /dev/null
@@ -1,24 +0,0 @@
-{Testing, expect, _, ReactTestUtils} = require '../helpers/component-testing'
-
-PerformanceForecast = require '../../../src/flux/performance-forecast'
-Buttons = require '../../../src/components/student-dashboard/practice-buttons'
-
-COURSE_ID  = '1'
-GUIDE_DATA = require '../../../api/courses/1/guide.json'
-
-describe 'Learning Guide Practice Buttons', ->
-  it 'renders practice button', ->
-    PerformanceForecast.Student.actions.loaded(GUIDE_DATA, COURSE_ID)
-    Testing.renderComponent( Buttons,
-      props: { courseId: COURSE_ID }
-    ).then ({dom, element}) ->
-      expect(dom).not.to.be.null
-      expect(dom.querySelector('button.practice')).not.to.be.null
-
-
-  it 'are disabled if Student Scores sections are empty', ->
-    PerformanceForecast.Student.actions.loaded({"title": "Physics"}, COURSE_ID)
-    Testing.renderComponent( Buttons,
-      props: { courseId: COURSE_ID }
-    ).then ({dom, element}) ->
-      expect(dom).to.be.null
diff --git a/test/karma.config.coffee b/test/karma.config.coffee
new file mode 100644
index 0000000000..96ab285cf5
--- /dev/null
+++ b/test/karma.config.coffee
@@ -0,0 +1,53 @@
+_ = require 'underscore'
+makeWebpackConfig = require '../configs/webpack/makeConfig'
+
+KarmaConfig =
+
+  basePath: '../'
+  frameworks: ['mocha', 'chai', 'chai-sinon', 'phantomjs-shim']
+  browsers: ['PhantomJS']
+  reporters: ['mocha']
+
+  # Ideally, would be able to use patterns instead...
+  files: [
+    'test/all-source-files.coffee'
+    'test/all-tests.coffee'
+  ]
+
+  preprocessors:
+    'src/**/*.{coffee,cjsx}': ['webpack', 'sourcemap']
+    'test/**/*':  ['webpack', 'sourcemap']
+
+  webpack: makeWebpackConfig(process.env.OX_PROJECT, 'karma')
+
+  webpackMiddleware:
+    # True will suppress error shown in console, so it has to be set to false.
+    quiet: false
+    # Suppress everything except error, so it has to be set to false as well
+    # to see success build.
+    noInfo: false
+    stats:
+      # Config for minimal console.log mess.
+      assets: false,
+      colors: true,
+      version: false,
+      hash: false,
+      timings: false,
+      chunks: false,
+      chunkModules: false
+
+
+  plugins:[
+    require('karma-phantomjs-shim')
+    require('karma-mocha')
+    require('karma-webpack')
+    require('karma-mocha-reporter')
+    require('karma-phantomjs-launcher')
+    require('karma-chrome-launcher')
+    require('karma-chai')
+    require('karma-chai-sinon')
+    require('karma-sourcemap-loader')
+  ]
+
+module.exports = (config) ->
+  config.set(KarmaConfig)
diff --git a/test/karma.config.js b/test/karma.config.js
new file mode 100644
index 0000000000..fbc267ba5d
--- /dev/null
+++ b/test/karma.config.js
@@ -0,0 +1,3 @@
+require('coffee-script/register');
+
+module.exports = require('./karma.config.coffee');
diff --git a/CONTRIBUTING.md b/tutor/CONTRIBUTING.md
similarity index 100%
rename from CONTRIBUTING.md
rename to tutor/CONTRIBUTING.md
diff --git a/COPYRIGHT b/tutor/COPYRIGHT
similarity index 100%
rename from COPYRIGHT
rename to tutor/COPYRIGHT
diff --git a/GNU-AGPL-3.0 b/tutor/GNU-AGPL-3.0
similarity index 100%
rename from GNU-AGPL-3.0
rename to tutor/GNU-AGPL-3.0
diff --git a/Gulpfile.coffee b/tutor/Gulpfile.coffee
similarity index 100%
rename from Gulpfile.coffee
rename to tutor/Gulpfile.coffee
diff --git a/LICENSING b/tutor/LICENSING
similarity index 100%
rename from LICENSING
rename to tutor/LICENSING
diff --git a/api/courses/1.json b/tutor/api/courses/1.json
similarity index 100%
rename from api/courses/1.json
rename to tutor/api/courses/1.json
diff --git a/api/courses/1/cc/dashboard.json b/tutor/api/courses/1/cc/dashboard.json
similarity index 100%
rename from api/courses/1/cc/dashboard.json
rename to tutor/api/courses/1/cc/dashboard.json
diff --git a/api/courses/1/dashboard.json b/tutor/api/courses/1/dashboard.json
similarity index 100%
rename from api/courses/1/dashboard.json
rename to tutor/api/courses/1/dashboard.json
diff --git a/api/courses/1/guide.json b/tutor/api/courses/1/guide.json
similarity index 100%
rename from api/courses/1/guide.json
rename to tutor/api/courses/1/guide.json
diff --git a/api/courses/1/performance.json b/tutor/api/courses/1/performance.json
similarity index 100%
rename from api/courses/1/performance.json
rename to tutor/api/courses/1/performance.json
diff --git a/api/courses/1/plans.json b/tutor/api/courses/1/plans.json
similarity index 100%
rename from api/courses/1/plans.json
rename to tutor/api/courses/1/plans.json
diff --git a/api/courses/1/plans/POST.json b/tutor/api/courses/1/plans/POST.json
similarity index 100%
rename from api/courses/1/plans/POST.json
rename to tutor/api/courses/1/plans/POST.json
diff --git a/api/courses/1/practice.json b/tutor/api/courses/1/practice.json
similarity index 100%
rename from api/courses/1/practice.json
rename to tutor/api/courses/1/practice.json
diff --git a/api/courses/1/roster.json b/tutor/api/courses/1/roster.json
similarity index 100%
rename from api/courses/1/roster.json
rename to tutor/api/courses/1/roster.json
diff --git a/api/courses/1/students.json b/tutor/api/courses/1/students.json
similarity index 100%
rename from api/courses/1/students.json
rename to tutor/api/courses/1/students.json
diff --git a/api/courses/1/tasks.json b/tutor/api/courses/1/tasks.json
similarity index 100%
rename from api/courses/1/tasks.json
rename to tutor/api/courses/1/tasks.json
diff --git a/api/courses/2/dashboard.json b/tutor/api/courses/2/dashboard.json
similarity index 100%
rename from api/courses/2/dashboard.json
rename to tutor/api/courses/2/dashboard.json
diff --git a/api/courses/2/guide.json b/tutor/api/courses/2/guide.json
similarity index 100%
rename from api/courses/2/guide.json
rename to tutor/api/courses/2/guide.json
diff --git a/api/courses/2/performance.json b/tutor/api/courses/2/performance.json
similarity index 100%
rename from api/courses/2/performance.json
rename to tutor/api/courses/2/performance.json
diff --git a/api/courses/2/plans.json b/tutor/api/courses/2/plans.json
similarity index 100%
rename from api/courses/2/plans.json
rename to tutor/api/courses/2/plans.json
diff --git a/api/courses/2/practice.json b/tutor/api/courses/2/practice.json
similarity index 100%
rename from api/courses/2/practice.json
rename to tutor/api/courses/2/practice.json
diff --git a/api/courses/2/tasks.json b/tutor/api/courses/2/tasks.json
similarity index 100%
rename from api/courses/2/tasks.json
rename to tutor/api/courses/2/tasks.json
diff --git a/api/courses/3/dashboard.json b/tutor/api/courses/3/dashboard.json
similarity index 100%
rename from api/courses/3/dashboard.json
rename to tutor/api/courses/3/dashboard.json
diff --git a/api/courses/4/dashboard.json b/tutor/api/courses/4/dashboard.json
similarity index 100%
rename from api/courses/4/dashboard.json
rename to tutor/api/courses/4/dashboard.json
diff --git a/api/courses/999/dashboard.json b/tutor/api/courses/999/dashboard.json
similarity index 100%
rename from api/courses/999/dashboard.json
rename to tutor/api/courses/999/dashboard.json
diff --git a/api/ecosystems.json b/tutor/api/ecosystems.json
similarity index 100%
rename from api/ecosystems.json
rename to tutor/api/ecosystems.json
diff --git a/api/ecosystems/1/exercises.json b/tutor/api/ecosystems/1/exercises.json
similarity index 100%
rename from api/ecosystems/1/exercises.json
rename to tutor/api/ecosystems/1/exercises.json
diff --git a/api/ecosystems/1/readings.json b/tutor/api/ecosystems/1/readings.json
similarity index 100%
rename from api/ecosystems/1/readings.json
rename to tutor/api/ecosystems/1/readings.json
diff --git a/api/ecosystems/2/exercises.json b/tutor/api/ecosystems/2/exercises.json
similarity index 100%
rename from api/ecosystems/2/exercises.json
rename to tutor/api/ecosystems/2/exercises.json
diff --git a/api/ecosystems/2/readings.json b/tutor/api/ecosystems/2/readings.json
similarity index 100%
rename from api/ecosystems/2/readings.json
rename to tutor/api/ecosystems/2/readings.json
diff --git a/api/ecosystems/3/exercises.json b/tutor/api/ecosystems/3/exercises.json
similarity index 100%
rename from api/ecosystems/3/exercises.json
rename to tutor/api/ecosystems/3/exercises.json
diff --git a/api/ecosystems/3/readings.json b/tutor/api/ecosystems/3/readings.json
similarity index 100%
rename from api/ecosystems/3/readings.json
rename to tutor/api/ecosystems/3/readings.json
diff --git a/api/exercises.json b/tutor/api/exercises.json
similarity index 100%
rename from api/exercises.json
rename to tutor/api/exercises.json
diff --git a/tutor/api/notifications.json b/tutor/api/notifications.json
new file mode 100644
index 0000000000..8a4e1963e9
--- /dev/null
+++ b/tutor/api/notifications.json
@@ -0,0 +1,7 @@
+[{
+  "id": "1",
+  "message": "Warning: Updates will happen soon!  Site will be down."
+}, {
+  "id": "2",
+  "message": "These are test messages."
+}]
\ No newline at end of file
diff --git a/api/pages/0e58aa87-2e09-40a7-8bf3-269b2fa16509.json b/tutor/api/pages/0e58aa87-2e09-40a7-8bf3-269b2fa16509.json
similarity index 100%
rename from api/pages/0e58aa87-2e09-40a7-8bf3-269b2fa16509.json
rename to tutor/api/pages/0e58aa87-2e09-40a7-8bf3-269b2fa16509.json
diff --git a/api/pages/17f6ff53-2d92-4669-acdd-9a958ea7fd0a@12.json b/tutor/api/pages/17f6ff53-2d92-4669-acdd-9a958ea7fd0a@12.json
similarity index 100%
rename from api/pages/17f6ff53-2d92-4669-acdd-9a958ea7fd0a@12.json
rename to tutor/api/pages/17f6ff53-2d92-4669-acdd-9a958ea7fd0a@12.json
diff --git a/api/pages/334f8b61-30eb-4475-8e05-5260a4866b4b@4.68.json b/tutor/api/pages/334f8b61-30eb-4475-8e05-5260a4866b4b@4.68.json
similarity index 100%
rename from api/pages/334f8b61-30eb-4475-8e05-5260a4866b4b@4.68.json
rename to tutor/api/pages/334f8b61-30eb-4475-8e05-5260a4866b4b@4.68.json
diff --git a/api/pages/c20c3501-a63c-4b40-aa6c-0bdafa8a2d33.json b/tutor/api/pages/c20c3501-a63c-4b40-aa6c-0bdafa8a2d33.json
similarity index 100%
rename from api/pages/c20c3501-a63c-4b40-aa6c-0bdafa8a2d33.json
rename to tutor/api/pages/c20c3501-a63c-4b40-aa6c-0bdafa8a2d33.json
diff --git a/api/pages/d419f72d-3349-4449-ab34-c705409df4aa@5.json b/tutor/api/pages/d419f72d-3349-4449-ab34-c705409df4aa@5.json
similarity index 100%
rename from api/pages/d419f72d-3349-4449-ab34-c705409df4aa@5.json
rename to tutor/api/pages/d419f72d-3349-4449-ab34-c705409df4aa@5.json
diff --git a/api/pages/dummy-physics-page.json b/tutor/api/pages/dummy-physics-page.json
similarity index 100%
rename from api/pages/dummy-physics-page.json
rename to tutor/api/pages/dummy-physics-page.json
diff --git a/api/pages/newpagebio.json b/tutor/api/pages/newpagebio.json
similarity index 100%
rename from api/pages/newpagebio.json
rename to tutor/api/pages/newpagebio.json
diff --git a/api/plans/1.json b/tutor/api/plans/1.json
similarity index 100%
rename from api/plans/1.json
rename to tutor/api/plans/1.json
diff --git a/api/plans/1/stats.json b/tutor/api/plans/1/stats.json
similarity index 100%
rename from api/plans/1/stats.json
rename to tutor/api/plans/1/stats.json
diff --git a/api/plans/13.json b/tutor/api/plans/13.json
similarity index 100%
rename from api/plans/13.json
rename to tutor/api/plans/13.json
diff --git a/api/plans/13/stats.json b/tutor/api/plans/13/stats.json
similarity index 100%
rename from api/plans/13/stats.json
rename to tutor/api/plans/13/stats.json
diff --git a/api/plans/2.json b/tutor/api/plans/2.json
similarity index 100%
rename from api/plans/2.json
rename to tutor/api/plans/2.json
diff --git a/api/plans/2/stats.json b/tutor/api/plans/2/stats.json
similarity index 100%
rename from api/plans/2/stats.json
rename to tutor/api/plans/2/stats.json
diff --git a/api/plans/3.json b/tutor/api/plans/3.json
similarity index 100%
rename from api/plans/3.json
rename to tutor/api/plans/3.json
diff --git a/api/plans/3/stats.json b/tutor/api/plans/3/stats.json
similarity index 100%
rename from api/plans/3/stats.json
rename to tutor/api/plans/3/stats.json
diff --git a/api/plans/4/review.json b/tutor/api/plans/4/review.json
similarity index 100%
rename from api/plans/4/review.json
rename to tutor/api/plans/4/review.json
diff --git a/api/plans/4/stats.json b/tutor/api/plans/4/stats.json
similarity index 100%
rename from api/plans/4/stats.json
rename to tutor/api/plans/4/stats.json
diff --git a/api/plans/5.json b/tutor/api/plans/5.json
similarity index 100%
rename from api/plans/5.json
rename to tutor/api/plans/5.json
diff --git a/api/plans/5/review.json b/tutor/api/plans/5/review.json
similarity index 100%
rename from api/plans/5/review.json
rename to tutor/api/plans/5/review.json
diff --git a/api/plans/5/stats.json b/tutor/api/plans/5/stats.json
similarity index 100%
rename from api/plans/5/stats.json
rename to tutor/api/plans/5/stats.json
diff --git a/api/plans/6/stats.json b/tutor/api/plans/6/stats.json
similarity index 100%
rename from api/plans/6/stats.json
rename to tutor/api/plans/6/stats.json
diff --git a/api/plans/7.json b/tutor/api/plans/7.json
similarity index 100%
rename from api/plans/7.json
rename to tutor/api/plans/7.json
diff --git a/api/plans/7/stats.json b/tutor/api/plans/7/stats.json
similarity index 100%
rename from api/plans/7/stats.json
rename to tutor/api/plans/7/stats.json
diff --git a/api/plans/8.json b/tutor/api/plans/8.json
similarity index 100%
rename from api/plans/8.json
rename to tutor/api/plans/8.json
diff --git a/api/plans/8/stats.json b/tutor/api/plans/8/stats.json
similarity index 100%
rename from api/plans/8/stats.json
rename to tutor/api/plans/8/stats.json
diff --git a/api/plans/9/stats.json b/tutor/api/plans/9/stats.json
similarity index 100%
rename from api/plans/9/stats.json
rename to tutor/api/plans/9/stats.json
diff --git a/api/steps/step-id-1-1.json b/tutor/api/steps/step-id-1-1.json
similarity index 100%
rename from api/steps/step-id-1-1.json
rename to tutor/api/steps/step-id-1-1.json
diff --git a/api/steps/step-id-2-1.json b/tutor/api/steps/step-id-2-1.json
similarity index 100%
rename from api/steps/step-id-2-1.json
rename to tutor/api/steps/step-id-2-1.json
diff --git a/api/steps/step-id-3-1.json b/tutor/api/steps/step-id-3-1.json
similarity index 100%
rename from api/steps/step-id-3-1.json
rename to tutor/api/steps/step-id-3-1.json
diff --git a/api/steps/step-id-4-1.json b/tutor/api/steps/step-id-4-1.json
similarity index 100%
rename from api/steps/step-id-4-1.json
rename to tutor/api/steps/step-id-4-1.json
diff --git a/api/steps/step-id-4-2.json b/tutor/api/steps/step-id-4-2.json
similarity index 100%
rename from api/steps/step-id-4-2.json
rename to tutor/api/steps/step-id-4-2.json
diff --git a/api/steps/step-id-4-2/PATCH.json b/tutor/api/steps/step-id-4-2/PATCH.json
similarity index 100%
rename from api/steps/step-id-4-2/PATCH.json
rename to tutor/api/steps/step-id-4-2/PATCH.json
diff --git a/api/steps/step-id-4-2/completed/PUT.json b/tutor/api/steps/step-id-4-2/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-4-2/completed/PUT.json
rename to tutor/api/steps/step-id-4-2/completed/PUT.json
diff --git a/api/steps/step-id-4-2/recovery/PUT.json b/tutor/api/steps/step-id-4-2/recovery/PUT.json
similarity index 100%
rename from api/steps/step-id-4-2/recovery/PUT.json
rename to tutor/api/steps/step-id-4-2/recovery/PUT.json
diff --git a/api/steps/step-id-4-3.json b/tutor/api/steps/step-id-4-3.json
similarity index 100%
rename from api/steps/step-id-4-3.json
rename to tutor/api/steps/step-id-4-3.json
diff --git a/api/steps/step-id-4-3/completed/PUT.json b/tutor/api/steps/step-id-4-3/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-4-3/completed/PUT.json
rename to tutor/api/steps/step-id-4-3/completed/PUT.json
diff --git a/api/steps/step-id-4-4.json b/tutor/api/steps/step-id-4-4.json
similarity index 100%
rename from api/steps/step-id-4-4.json
rename to tutor/api/steps/step-id-4-4.json
diff --git a/api/steps/step-id-4-4/completed/PUT.json b/tutor/api/steps/step-id-4-4/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-4-4/completed/PUT.json
rename to tutor/api/steps/step-id-4-4/completed/PUT.json
diff --git a/api/steps/step-id-4-5.json b/tutor/api/steps/step-id-4-5.json
similarity index 100%
rename from api/steps/step-id-4-5.json
rename to tutor/api/steps/step-id-4-5.json
diff --git a/api/steps/step-id-4-5/PATCH.json b/tutor/api/steps/step-id-4-5/PATCH.json
similarity index 100%
rename from api/steps/step-id-4-5/PATCH.json
rename to tutor/api/steps/step-id-4-5/PATCH.json
diff --git a/api/steps/step-id-4-5/completed/PUT.json b/tutor/api/steps/step-id-4-5/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-4-5/completed/PUT.json
rename to tutor/api/steps/step-id-4-5/completed/PUT.json
diff --git a/api/steps/step-id-5-1.json b/tutor/api/steps/step-id-5-1.json
similarity index 100%
rename from api/steps/step-id-5-1.json
rename to tutor/api/steps/step-id-5-1.json
diff --git a/api/steps/step-id-5-2.json b/tutor/api/steps/step-id-5-2.json
similarity index 100%
rename from api/steps/step-id-5-2.json
rename to tutor/api/steps/step-id-5-2.json
diff --git a/api/steps/step-id-5-3.json b/tutor/api/steps/step-id-5-3.json
similarity index 100%
rename from api/steps/step-id-5-3.json
rename to tutor/api/steps/step-id-5-3.json
diff --git a/api/steps/step-id-6-1.json b/tutor/api/steps/step-id-6-1.json
similarity index 100%
rename from api/steps/step-id-6-1.json
rename to tutor/api/steps/step-id-6-1.json
diff --git a/api/steps/step-id-6-2.json b/tutor/api/steps/step-id-6-2.json
similarity index 100%
rename from api/steps/step-id-6-2.json
rename to tutor/api/steps/step-id-6-2.json
diff --git a/api/steps/step-id-6-3.json b/tutor/api/steps/step-id-6-3.json
similarity index 100%
rename from api/steps/step-id-6-3.json
rename to tutor/api/steps/step-id-6-3.json
diff --git a/api/steps/step-id-6-4-full.json b/tutor/api/steps/step-id-6-4-full.json
similarity index 100%
rename from api/steps/step-id-6-4-full.json
rename to tutor/api/steps/step-id-6-4-full.json
diff --git a/api/steps/step-id-6-4.json b/tutor/api/steps/step-id-6-4.json
similarity index 100%
rename from api/steps/step-id-6-4.json
rename to tutor/api/steps/step-id-6-4.json
diff --git a/api/steps/step-id-7-1.json b/tutor/api/steps/step-id-7-1.json
similarity index 100%
rename from api/steps/step-id-7-1.json
rename to tutor/api/steps/step-id-7-1.json
diff --git a/api/steps/step-id-7-2.json b/tutor/api/steps/step-id-7-2.json
similarity index 100%
rename from api/steps/step-id-7-2.json
rename to tutor/api/steps/step-id-7-2.json
diff --git a/api/steps/step-id-7-3.json b/tutor/api/steps/step-id-7-3.json
similarity index 100%
rename from api/steps/step-id-7-3.json
rename to tutor/api/steps/step-id-7-3.json
diff --git a/api/steps/step-id-7-4.json b/tutor/api/steps/step-id-7-4.json
similarity index 100%
rename from api/steps/step-id-7-4.json
rename to tutor/api/steps/step-id-7-4.json
diff --git a/api/steps/step-id-8-1.json b/tutor/api/steps/step-id-8-1.json
similarity index 100%
rename from api/steps/step-id-8-1.json
rename to tutor/api/steps/step-id-8-1.json
diff --git a/api/steps/step-id-9-1.json b/tutor/api/steps/step-id-9-1.json
similarity index 100%
rename from api/steps/step-id-9-1.json
rename to tutor/api/steps/step-id-9-1.json
diff --git a/api/steps/step-id-9-1/PATCH.json b/tutor/api/steps/step-id-9-1/PATCH.json
similarity index 100%
rename from api/steps/step-id-9-1/PATCH.json
rename to tutor/api/steps/step-id-9-1/PATCH.json
diff --git a/api/steps/step-id-9-1/completed/PUT.json b/tutor/api/steps/step-id-9-1/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-9-1/completed/PUT.json
rename to tutor/api/steps/step-id-9-1/completed/PUT.json
diff --git a/api/steps/step-id-9-2.json b/tutor/api/steps/step-id-9-2.json
similarity index 100%
rename from api/steps/step-id-9-2.json
rename to tutor/api/steps/step-id-9-2.json
diff --git a/api/steps/step-id-9-2/PATCH.json b/tutor/api/steps/step-id-9-2/PATCH.json
similarity index 100%
rename from api/steps/step-id-9-2/PATCH.json
rename to tutor/api/steps/step-id-9-2/PATCH.json
diff --git a/api/steps/step-id-9-2/completed/PUT.json b/tutor/api/steps/step-id-9-2/completed/PUT.json
similarity index 100%
rename from api/steps/step-id-9-2/completed/PUT.json
rename to tutor/api/steps/step-id-9-2/completed/PUT.json
diff --git a/api/steps/step-id-9-3.json b/tutor/api/steps/step-id-9-3.json
similarity index 100%
rename from api/steps/step-id-9-3.json
rename to tutor/api/steps/step-id-9-3.json
diff --git a/api/steps/step-id-9-3/recovery/PUT.json b/tutor/api/steps/step-id-9-3/recovery/PUT.json
similarity index 100%
rename from api/steps/step-id-9-3/recovery/PUT.json
rename to tutor/api/steps/step-id-9-3/recovery/PUT.json
diff --git a/api/steps/step-id-9-4.json b/tutor/api/steps/step-id-9-4.json
similarity index 100%
rename from api/steps/step-id-9-4.json
rename to tutor/api/steps/step-id-9-4.json
diff --git a/api/steps/step-id-9-5.json b/tutor/api/steps/step-id-9-5.json
similarity index 100%
rename from api/steps/step-id-9-5.json
rename to tutor/api/steps/step-id-9-5.json
diff --git a/api/steps/step-id-practice-4.json b/tutor/api/steps/step-id-practice-4.json
similarity index 100%
rename from api/steps/step-id-practice-4.json
rename to tutor/api/steps/step-id-practice-4.json
diff --git a/api/steps/step-id-practice-5.json b/tutor/api/steps/step-id-practice-5.json
similarity index 100%
rename from api/steps/step-id-practice-5.json
rename to tutor/api/steps/step-id-practice-5.json
diff --git a/api/tasks/1.json b/tutor/api/tasks/1.json
similarity index 100%
rename from api/tasks/1.json
rename to tutor/api/tasks/1.json
diff --git a/api/tasks/2.json b/tutor/api/tasks/2.json
similarity index 100%
rename from api/tasks/2.json
rename to tutor/api/tasks/2.json
diff --git a/api/tasks/3.json b/tutor/api/tasks/3.json
similarity index 100%
rename from api/tasks/3.json
rename to tutor/api/tasks/3.json
diff --git a/api/tasks/4-recovered.json b/tutor/api/tasks/4-recovered.json
similarity index 100%
rename from api/tasks/4-recovered.json
rename to tutor/api/tasks/4-recovered.json
diff --git a/api/tasks/4.json b/tutor/api/tasks/4.json
similarity index 100%
rename from api/tasks/4.json
rename to tutor/api/tasks/4.json
diff --git a/api/tasks/5.json b/tutor/api/tasks/5.json
similarity index 100%
rename from api/tasks/5.json
rename to tutor/api/tasks/5.json
diff --git a/api/tasks/6.json b/tutor/api/tasks/6.json
similarity index 100%
rename from api/tasks/6.json
rename to tutor/api/tasks/6.json
diff --git a/api/tasks/7.json b/tutor/api/tasks/7.json
similarity index 100%
rename from api/tasks/7.json
rename to tutor/api/tasks/7.json
diff --git a/api/tasks/8.json b/tutor/api/tasks/8.json
similarity index 100%
rename from api/tasks/8.json
rename to tutor/api/tasks/8.json
diff --git a/api/tasks/9.json b/tutor/api/tasks/9.json
similarity index 100%
rename from api/tasks/9.json
rename to tutor/api/tasks/9.json
diff --git a/api/user.json b/tutor/api/user.json
similarity index 100%
rename from api/user.json
rename to tutor/api/user.json
diff --git a/api/user/courses.json b/tutor/api/user/courses.json
similarity index 100%
rename from api/user/courses.json
rename to tutor/api/user/courses.json
diff --git a/api/user/courses/1.json b/tutor/api/user/courses/1.json
similarity index 100%
rename from api/user/courses/1.json
rename to tutor/api/user/courses/1.json
diff --git a/api/user/courses/1/guide.json b/tutor/api/user/courses/1/guide.json
similarity index 100%
rename from api/user/courses/1/guide.json
rename to tutor/api/user/courses/1/guide.json
diff --git a/tutor/configs/base.coffee b/tutor/configs/base.coffee
new file mode 100644
index 0000000000..898e6e2153
--- /dev/null
+++ b/tutor/configs/base.coffee
@@ -0,0 +1,2 @@
+module.exports =
+  devPort: '8000'
diff --git a/tutor/configs/webpack.base.coffee b/tutor/configs/webpack.base.coffee
new file mode 100644
index 0000000000..b1a8675f61
--- /dev/null
+++ b/tutor/configs/webpack.base.coffee
@@ -0,0 +1,9 @@
+module.exports =
+  entry:
+    tutor: [
+      "index.coffee",
+      "resources/styles/tutor.less"
+    ]
+    qa: [
+      "src/qa.coffee"
+    ]
diff --git a/index.coffee b/tutor/index.coffee
similarity index 92%
rename from index.coffee
rename to tutor/index.coffee
index 438c3aa650..a7412f6b01 100644
--- a/index.coffee
+++ b/tutor/index.coffee
@@ -3,13 +3,13 @@ Recordo = require('recordo')
 Recordo.initialize()
 # Recordo.start()
 
-{BootrapURLs}  = require 'openstax-react-components'
+{BootrapURLs}  = require 'shared'
 
 api = require './src/api'
 router = require './src/router'
 Notices = require './src/helpers/notifications'
 dom = require './src/helpers/dom'
-{startMathJax} = require 'openstax-react-components/src/helpers/mathjax'
+{startMathJax} = require 'shared/src/helpers/mathjax'
 {TransitionAssistant} = require './src/components/unsaved-state'
 
 window._STORES =
diff --git a/index.html b/tutor/index.html
similarity index 100%
rename from index.html
rename to tutor/index.html
diff --git a/resources/fonts/architects-daughter-v6-latin-regular.woff b/tutor/resources/fonts/architects-daughter-v6-latin-regular.woff
similarity index 100%
rename from resources/fonts/architects-daughter-v6-latin-regular.woff
rename to tutor/resources/fonts/architects-daughter-v6-latin-regular.woff
diff --git a/resources/fonts/architects-daughter-v6-latin-regular.woff2 b/tutor/resources/fonts/architects-daughter-v6-latin-regular.woff2
similarity index 100%
rename from resources/fonts/architects-daughter-v6-latin-regular.woff2
rename to tutor/resources/fonts/architects-daughter-v6-latin-regular.woff2
diff --git a/resources/fonts/lato-v11-latin-300.woff b/tutor/resources/fonts/lato-v11-latin-300.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-300.woff
rename to tutor/resources/fonts/lato-v11-latin-300.woff
diff --git a/resources/fonts/lato-v11-latin-300.woff2 b/tutor/resources/fonts/lato-v11-latin-300.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-300.woff2
rename to tutor/resources/fonts/lato-v11-latin-300.woff2
diff --git a/resources/fonts/lato-v11-latin-300italic.woff b/tutor/resources/fonts/lato-v11-latin-300italic.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-300italic.woff
rename to tutor/resources/fonts/lato-v11-latin-300italic.woff
diff --git a/resources/fonts/lato-v11-latin-300italic.woff2 b/tutor/resources/fonts/lato-v11-latin-300italic.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-300italic.woff2
rename to tutor/resources/fonts/lato-v11-latin-300italic.woff2
diff --git a/resources/fonts/lato-v11-latin-700.woff b/tutor/resources/fonts/lato-v11-latin-700.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-700.woff
rename to tutor/resources/fonts/lato-v11-latin-700.woff
diff --git a/resources/fonts/lato-v11-latin-700.woff2 b/tutor/resources/fonts/lato-v11-latin-700.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-700.woff2
rename to tutor/resources/fonts/lato-v11-latin-700.woff2
diff --git a/resources/fonts/lato-v11-latin-900.woff b/tutor/resources/fonts/lato-v11-latin-900.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-900.woff
rename to tutor/resources/fonts/lato-v11-latin-900.woff
diff --git a/resources/fonts/lato-v11-latin-900.woff2 b/tutor/resources/fonts/lato-v11-latin-900.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-900.woff2
rename to tutor/resources/fonts/lato-v11-latin-900.woff2
diff --git a/resources/fonts/lato-v11-latin-italic.woff b/tutor/resources/fonts/lato-v11-latin-italic.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-italic.woff
rename to tutor/resources/fonts/lato-v11-latin-italic.woff
diff --git a/resources/fonts/lato-v11-latin-italic.woff2 b/tutor/resources/fonts/lato-v11-latin-italic.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-italic.woff2
rename to tutor/resources/fonts/lato-v11-latin-italic.woff2
diff --git a/resources/fonts/lato-v11-latin-regular.woff b/tutor/resources/fonts/lato-v11-latin-regular.woff
similarity index 100%
rename from resources/fonts/lato-v11-latin-regular.woff
rename to tutor/resources/fonts/lato-v11-latin-regular.woff
diff --git a/resources/fonts/lato-v11-latin-regular.woff2 b/tutor/resources/fonts/lato-v11-latin-regular.woff2
similarity index 100%
rename from resources/fonts/lato-v11-latin-regular.woff2
rename to tutor/resources/fonts/lato-v11-latin-regular.woff2
diff --git a/resources/fonts/merriweather-v8-latin-300.woff b/tutor/resources/fonts/merriweather-v8-latin-300.woff
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-300.woff
rename to tutor/resources/fonts/merriweather-v8-latin-300.woff
diff --git a/resources/fonts/merriweather-v8-latin-300.woff2 b/tutor/resources/fonts/merriweather-v8-latin-300.woff2
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-300.woff2
rename to tutor/resources/fonts/merriweather-v8-latin-300.woff2
diff --git a/resources/fonts/merriweather-v8-latin-300italic.woff b/tutor/resources/fonts/merriweather-v8-latin-300italic.woff
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-300italic.woff
rename to tutor/resources/fonts/merriweather-v8-latin-300italic.woff
diff --git a/resources/fonts/merriweather-v8-latin-300italic.woff2 b/tutor/resources/fonts/merriweather-v8-latin-300italic.woff2
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-300italic.woff2
rename to tutor/resources/fonts/merriweather-v8-latin-300italic.woff2
diff --git a/resources/fonts/merriweather-v8-latin-700.woff b/tutor/resources/fonts/merriweather-v8-latin-700.woff
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-700.woff
rename to tutor/resources/fonts/merriweather-v8-latin-700.woff
diff --git a/resources/fonts/merriweather-v8-latin-700.woff2 b/tutor/resources/fonts/merriweather-v8-latin-700.woff2
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-700.woff2
rename to tutor/resources/fonts/merriweather-v8-latin-700.woff2
diff --git a/resources/fonts/merriweather-v8-latin-regular.woff b/tutor/resources/fonts/merriweather-v8-latin-regular.woff
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-regular.woff
rename to tutor/resources/fonts/merriweather-v8-latin-regular.woff
diff --git a/resources/fonts/merriweather-v8-latin-regular.woff2 b/tutor/resources/fonts/merriweather-v8-latin-regular.woff2
similarity index 100%
rename from resources/fonts/merriweather-v8-latin-regular.woff2
rename to tutor/resources/fonts/merriweather-v8-latin-regular.woff2
diff --git a/resources/images/courses/biology-background.jpg b/tutor/resources/images/courses/biology-background.jpg
similarity index 100%
rename from resources/images/courses/biology-background.jpg
rename to tutor/resources/images/courses/biology-background.jpg
diff --git a/resources/images/courses/biology-book-thumbnail.png b/tutor/resources/images/courses/biology-book-thumbnail.png
similarity index 100%
rename from resources/images/courses/biology-book-thumbnail.png
rename to tutor/resources/images/courses/biology-book-thumbnail.png
diff --git a/resources/images/courses/biology-title-background.svg b/tutor/resources/images/courses/biology-title-background.svg
similarity index 100%
rename from resources/images/courses/biology-title-background.svg
rename to tutor/resources/images/courses/biology-title-background.svg
diff --git a/resources/images/courses/college_physics-book-thumbnail.png b/tutor/resources/images/courses/college_physics-book-thumbnail.png
similarity index 100%
rename from resources/images/courses/college_physics-book-thumbnail.png
rename to tutor/resources/images/courses/college_physics-book-thumbnail.png
diff --git a/resources/images/courses/concepts_biology-book-thumbnail.png b/tutor/resources/images/courses/concepts_biology-book-thumbnail.png
similarity index 100%
rename from resources/images/courses/concepts_biology-book-thumbnail.png
rename to tutor/resources/images/courses/concepts_biology-book-thumbnail.png
diff --git a/resources/images/courses/hs_physics-book-thumbnail.png b/tutor/resources/images/courses/hs_physics-book-thumbnail.png
similarity index 100%
rename from resources/images/courses/hs_physics-book-thumbnail.png
rename to tutor/resources/images/courses/hs_physics-book-thumbnail.png
diff --git a/resources/images/courses/hs_physics-title-background.svg b/tutor/resources/images/courses/hs_physics-title-background.svg
similarity index 100%
rename from resources/images/courses/hs_physics-title-background.svg
rename to tutor/resources/images/courses/hs_physics-title-background.svg
diff --git a/resources/images/courses/physics-background.jpg b/tutor/resources/images/courses/physics-background.jpg
similarity index 100%
rename from resources/images/courses/physics-background.jpg
rename to tutor/resources/images/courses/physics-background.jpg
diff --git a/resources/images/courses/sociology-book-thumbnail.png b/tutor/resources/images/courses/sociology-book-thumbnail.png
similarity index 100%
rename from resources/images/courses/sociology-book-thumbnail.png
rename to tutor/resources/images/courses/sociology-book-thumbnail.png
diff --git a/tutor/resources/images/icons/exercise-details-action.svg b/tutor/resources/images/icons/exercise-details-action.svg
new file mode 100644
index 0000000000..87ee23e9c6
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-details-action.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
+<circle fill="#FFFFFF" cx="35" cy="35" r="35"/>
+<g>
+	<circle fill="#5E6062" cx="21.354" cy="34.878" r="4.5"/>
+	<circle fill="#5E6062" cx="34.999" cy="35.123" r="4.5"/>
+	<circle fill="#5E6062" cx="48.646" cy="35.123" r="4.5"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-exclude-card-view-action.svg b/tutor/resources/images/icons/exercise-exclude-card-view-action.svg
new file mode 100755
index 0000000000..519750f639
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-exclude-card-view-action.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
+<circle fill="#FFFFFF" cx="35" cy="35" r="35"/>
+<g>
+	<path fill="#F47841" d="M51,37.375c0,1.1-0.9,2-2,2H21c-1.1,0-2-0.9-2-2v-4.75c0-1.1,0.9-2,2-2h28c1.1,0,2,0.9,2,2V37.375z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-exclude-details-view-action.svg b/tutor/resources/images/icons/exercise-exclude-details-view-action.svg
new file mode 100644
index 0000000000..34b07c82a2
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-exclude-details-view-action.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="16.5" cy="16.5" r="16.5"/>
+	<g>
+		<path fill="#F47841" d="M26.5,19.234c0,0.55-0.45,1-1,1h-18c-0.55,0-1-0.45-1-1v-3.469c0-0.55,0.45-1,1-1h18c0.55,0,1,0.45,1,1
+			V19.234z"/>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-feedback-off-action.svg b/tutor/resources/images/icons/exercise-feedback-off-action.svg
new file mode 100644
index 0000000000..2ae646cf28
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-feedback-off-action.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="16.5" cy="16.5" r="16.5"/>
+	<g>
+		<path fill="#5E6062" d="M23.715,12.13c-0.238-0.165-0.561-0.375-0.939-0.604L22,13.082c2.068,1.284,3.662,2.845,3.771,3.458
+			c0.006,0.105-0.135,0.543-0.842,1.285c-1.584,1.666-4.598,3.443-7.23,3.895l-0.91,1.827c3.307-0.126,7.332-2.361,9.393-4.53
+			c0.91-0.959,1.354-1.82,1.316-2.52C27.498,14.82,24.346,12.564,23.715,12.13z"/>
+		<path fill="#5E6062" d="M14.334,23.285l0.796-1.602c-0.006-0.001-0.011-0.001-0.017-0.002l0.451-0.904
+			c0.004,0.001,0.01,0.001,0.018,0.002l5.141-10.326c-0.006-0.003-0.01-0.006-0.016-0.008l0.348-0.697l-2.072-1.033l-0.484,0.975
+			C17.844,9.533,17.17,9.434,16.5,9.434c-4.647,0-10.912,4.424-10.999,7.034c-0.024,0.757,0.441,1.636,1.385,2.611
+			c1.232,1.274,3.147,2.592,5.211,3.466l-0.353,0.708l2.072,1.032l0.5-1.004C14.323,23.282,14.329,23.284,14.334,23.285z
+			 M12.874,20.985c-1.857-0.772-3.642-1.966-4.745-3.107c-0.749-0.775-0.903-1.239-0.899-1.354c0.022-0.678,2.523-3.212,5.638-4.538
+			c-0.956,0.94-1.551,2.248-1.551,3.696c0,1.714,0.837,3.23,2.12,4.174L12.874,20.985z M13.778,15.567h-0.809
+			c0.087-1.82,1.619-3.271,3.501-3.271v0.791C15.035,13.087,13.863,14.184,13.778,15.567z"/>
+		<path fill="#5E6062" d="M21.684,15.683c0-0.527-0.08-1.032-0.227-1.509l-3.172,6.369C20.268,19.815,21.684,17.916,21.684,15.683z"
+			/>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-feedback-on-action.svg b/tutor/resources/images/icons/exercise-feedback-on-action.svg
new file mode 100644
index 0000000000..6db5e30d41
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-feedback-on-action.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="16.5" cy="16.5" r="16.5"/>
+	<path fill="#5E6062" d="M23.715,12.134c-1.178-0.811-4.236-2.695-7.216-2.695c-4.646,0-10.91,4.424-10.998,7.033
+		c-0.024,0.758,0.441,1.636,1.385,2.612c2.101,2.172,6.184,4.479,9.613,4.479c3.359,0,7.56-2.31,9.683-4.542
+		c0.91-0.958,1.354-1.82,1.316-2.52C27.498,14.825,24.346,12.569,23.715,12.134z M13.777,15.572h-0.809
+		c0.087-1.821,1.619-3.272,3.502-3.272v0.792C15.034,13.092,13.862,14.188,13.777,15.572z M14.727,17.208
+		c-0.002,0.054-0.008,0.106-0.008,0.16v-0.16H14.727z M24.93,17.83c-1.832,1.926-5.576,4.005-8.431,4.005
+		c-2.809,0-6.532-2.052-8.371-3.952c-0.749-0.775-0.903-1.24-0.899-1.354c0.022-0.679,2.522-3.212,5.638-4.539
+		c-0.956,0.941-1.551,2.248-1.551,3.696c0,2.863,2.32,5.184,5.184,5.184c2.863,0,5.183-2.32,5.183-5.184
+		c0-1.368-0.533-2.609-1.398-3.535c2.846,1.328,5.348,3.617,5.488,4.394C25.777,16.649,25.637,17.087,24.93,17.83z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-include-action.svg b/tutor/resources/images/icons/exercise-include-action.svg
new file mode 100644
index 0000000000..e824599cbc
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-include-action.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="16.5" cy="16.5" r="16.5"/>
+	<g>
+		<g>
+			<path fill="#009ACC" d="M26.5,19.234c0,0.55-0.45,1-1,1h-18c-0.55,0-1-0.45-1-1v-3.47c0-0.55,0.45-1,1-1h18c0.55,0,1,0.45,1,1
+				V19.234z"/>
+		</g>
+		<g>
+			<path fill="#009ACC" d="M14.766,27.5c-0.55,0-1-0.45-1-1v-18c0-0.55,0.45-1,1-1h3.469c0.55,0,1,0.45,1,1v18c0,0.55-0.45,1-1,1
+				H14.766z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/exercise-report-error-action.svg b/tutor/resources/images/icons/exercise-report-error-action.svg
new file mode 100644
index 0000000000..a6c6b6115a
--- /dev/null
+++ b/tutor/resources/images/icons/exercise-report-error-action.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
+<circle fill="#FFFFFF" cx="16.5" cy="16.5" r="16.5"/>
+<g>
+	<g>
+		<path fill="#FDBD3E" d="M19.542,26.198c0,0.55-0.45,1-1,1h-4.083c-0.55,0-1-0.45-1-1v-2.916c0-0.55,0.45-1,1-1h4.083
+			c0.55,0,1,0.45,1,1V26.198z"/>
+	</g>
+	<g>
+		<path fill="#FDBD3E" d="M19.542,19.658c0,0.55-0.45,1-1,1h-4.083c-0.55,0-1-0.45-1-1v-12c0-0.55,0.45-1,1-1h4.083
+			c0.55,0,1,0.45,1,1V19.658z"/>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-calculator.svg b/tutor/resources/images/icons/icon-calculator.svg
new file mode 100644
index 0000000000..8fbab64a55
--- /dev/null
+++ b/tutor/resources/images/icons/icon-calculator.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" xml:space="preserve">
+<rect fill="#E6E7E8" width="24" height="30"/>
+<rect x="2" y="1.781" fill="#232E66" width="20" height="10"/>
+<g>
+	<rect x="2" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="13.607" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="13.607" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="2" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="18.936" fill="#5F6062" width="6" height="4"/>
+	<rect x="16" y="18.936" fill="#5F6062" width="6" height="4"/>
+</g>
+<g>
+	<rect x="1.842" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="9" y="24.263" fill="#5F6062" width="6" height="4"/>
+	<rect x="16.158" y="24.264" fill="#F47642" width="6" height="4"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-coach.svg b/tutor/resources/images/icons/icon-coach.svg
new file mode 100644
index 0000000000..0014481978
--- /dev/null
+++ b/tutor/resources/images/icons/icon-coach.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" xml:space="preserve">
+<g>
+	<path fill="#E6E6E6" d="M41,40.94C45.324,36.6,48,30.612,48,24C48,10.745,37.254,0,24,0C10.745,0,0,10.745,0,24
+		c0,6.625,2.685,12.623,7.025,16.966c5.004-1.498,10.819-2.359,17.03-2.359C30.23,38.606,36.014,39.459,41,40.94z"/>
+	<path fill="#C3002F" d="M24,48c6.643,0,12.654-2.699,17-7.06c-4.986-1.481-10.77-2.334-16.945-2.334
+		c-6.211,0-12.026,0.861-17.03,2.359C11.368,45.312,17.37,48,24,48z"/>
+</g>
+<path fill="#F4CF1A" d="M36.492,22.058c-0.008,0-0.016,0.003-0.023,0.003c-0.654-6.24-5.35-9.199-12.255-9.247
+	c-0.001,0-0.001,0-0.002,0c-0.001,0-0.002,0-0.004,0c-0.062,0.001-0.123,0.004-0.184,0.005c-0.062-0.001-0.123-0.004-0.184-0.005
+	c-0.001,0-0.003,0-0.004,0c0,0-0.002,0-0.003,0c-6.903,0.048-11.794,3.019-12.32,9.247c-0.754,0.031-1.361,1.52-1.361,3.353
+	c0,1.854,0.621,3.355,1.385,3.355c0.207,0,0.402-0.113,0.579-0.311c0.256,1.438,0.501,2.898,0.549,4.306
+	c0.177,5.217,0.776,9.709,11.168,9.711c10.602,0,11.398-4.496,11.623-9.716c0.061-1.379,0.299-2.809,0.537-4.22
+	c0.154,0.146,0.324,0.229,0.5,0.229c0.764,0,1.387-1.502,1.387-3.355C37.879,23.561,37.256,22.058,36.492,22.058z"/>
+<path fill="#00AEEF" d="M25.795,3.041c-0.594-0.1-1.17-0.565-1.724-0.555V2.485c-0.001,0-0.002-0.001-0.003-0.001
+	c-0.008-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001c-0.001,0-0.002,0.001-0.002,0.001
+	c-0.002,0-0.003-0.001-0.004-0.001c-0.007-0.001-0.017,0.001-0.025,0.001c-0.007,0-0.017-0.002-0.025-0.001
+	c0,0-0.002,0.001-0.003,0.001v0.001c-0.552-0.011-1.13,0.455-1.723,0.555C10.16,5.068,10.16,8.823,11.064,19.869l13.047-2.42
+	l12.852,2.42C37.869,8.823,37.869,5.068,25.795,3.041z"/>
+<path fill="#232E66" d="M37.541,19.948c-0.957-1.704-6.484-5.094-13.526-5.094c-7.042,0-12.571,3.39-13.527,5.094
+	c-0.938,1.674,0.18,3.276,2.814,3.276c1.649,0,3.77-3.653,10.713-3.653c6.942,0,9.063,3.653,10.712,3.653
+	C37.359,23.225,38.479,21.622,37.541,19.948z"/>
+<path fill="#FFFFFF" d="M25.879,9.763c0.033,0,0.068,0.005,0.104,0.02c0.033,0.012,0.064,0.034,0.098,0.064l0.578,0.608
+	c-0.254,0.332-0.57,0.581-0.951,0.749c-0.381,0.167-0.832,0.253-1.352,0.253c-0.479,0-0.905-0.082-1.282-0.244
+	c-0.378-0.162-0.699-0.387-0.964-0.673c-0.263-0.287-0.464-0.625-0.604-1.018c-0.142-0.394-0.212-0.819-0.212-1.279
+	c0-0.468,0.08-0.9,0.241-1.292c0.16-0.393,0.386-0.73,0.676-1.017c0.287-0.284,0.634-0.506,1.038-0.663
+	c0.401-0.158,0.845-0.238,1.331-0.238c0.235,0,0.458,0.021,0.666,0.063c0.209,0.042,0.404,0.099,0.586,0.173
+	c0.182,0.073,0.348,0.16,0.502,0.263c0.15,0.101,0.285,0.214,0.402,0.339l-0.49,0.659c-0.031,0.042-0.07,0.077-0.111,0.11
+	c-0.043,0.033-0.104,0.049-0.184,0.049c-0.049,0-0.1-0.011-0.145-0.033c-0.047-0.023-0.096-0.053-0.146-0.084
+	c-0.051-0.034-0.109-0.068-0.17-0.109c-0.064-0.037-0.135-0.074-0.221-0.107c-0.084-0.032-0.186-0.06-0.3-0.084
+	c-0.11-0.023-0.244-0.034-0.396-0.034c-0.265,0-0.507,0.047-0.725,0.141c-0.219,0.093-0.407,0.226-0.564,0.4
+	c-0.155,0.173-0.278,0.386-0.365,0.632c-0.087,0.248-0.131,0.525-0.131,0.833c0,0.322,0.043,0.608,0.131,0.858
+	c0.087,0.25,0.208,0.462,0.358,0.632c0.152,0.171,0.327,0.301,0.528,0.39c0.202,0.091,0.417,0.134,0.647,0.134
+	c0.133,0,0.253-0.006,0.361-0.02c0.111-0.012,0.212-0.034,0.306-0.065c0.094-0.033,0.18-0.073,0.268-0.124
+	c0.084-0.05,0.17-0.112,0.256-0.188c0.035-0.028,0.072-0.051,0.111-0.071C25.795,9.771,25.834,9.763,25.879,9.763z"/>
+<g>
+	<path fill="#FFFFFF" d="M29.596,33.651c0.572-1.533,0.572-3.04,0.572-3.416c0,0-3.182,1.2-6.154,1.2c-3.105,0-6.154-1.2-6.154-1.2
+		c0,0.42-0.001,1.9,0.55,3.405c1.027,0.332,3.578,1.08,5.645,1.08C26.102,34.721,28.572,33.987,29.596,33.651z"/>
+	<path fill="#FFFFFF" d="M24.055,35.221c-1.918,0-4.172-0.6-5.391-0.974c0.779,1.635,2.313,3.133,5.35,3.133
+		c3.003,0,4.535-1.491,5.322-3.118C28.129,34.637,25.947,35.221,24.055,35.221z"/>
+	<path fill="#CCCCCC" d="M29.336,34.262c0.098-0.203,0.184-0.406,0.26-0.61c-1.023,0.336-3.494,1.069-5.541,1.069
+		c-2.066,0-4.617-0.748-5.645-1.08c0.074,0.203,0.158,0.405,0.254,0.606c1.219,0.374,3.472,0.974,5.391,0.974
+		C25.947,35.221,28.129,34.637,29.336,34.262z"/>
+</g>
+<g>
+	<path fill="#5F6263" d="M21.525,25.735c0-0.958-0.777-1.735-1.736-1.735c-0.958,0-1.735,0.777-1.735,1.735
+		c0,0.075,0.013,0.147,0.022,0.221h3.426C21.512,25.883,21.525,25.811,21.525,25.735z"/>
+	<path fill="#5F6263" d="M29.729,25.735c0-0.958-0.775-1.735-1.734-1.735s-1.736,0.777-1.736,1.735c0,0.075,0.014,0.147,0.023,0.221
+		h3.426C29.717,25.883,29.729,25.811,29.729,25.735z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-completed.svg b/tutor/resources/images/icons/icon-completed.svg
new file mode 100644
index 0000000000..8d3716549d
--- /dev/null
+++ b/tutor/resources/images/icons/icon-completed.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#F47642" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#FFFFFF" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-correct.svg b/tutor/resources/images/icons/icon-correct.svg
new file mode 100644
index 0000000000..0241b334bd
--- /dev/null
+++ b/tutor/resources/images/icons/icon-correct.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-correct.svg"><metadata
+   id="metadata3059"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3057" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1074"
+   inkscape:window-height="730"
+   id="namedview3055"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3047">
+	<path
+   fill="#73B451"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3049" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3051" />
+	<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.745,32.247l-3.633,3.633c-0.109,0.111-0.203,0.178-0.39,0.178   c-0.16-0.004-0.33-0.098-0.408-0.178l-1.861-1.86c-0.172-0.173-0.172-0.447,0-0.62l0.355-0.355c0.173-0.172,0.446-0.084,0.62,0.09   l1.239,1.24l3.102-3.102c0.175-0.174,0.446-0.174,0.621,0l0.354,0.354C36.919,31.802,36.919,32.073,36.745,32.247z"
+   id="path3053" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/tutor/resources/images/icons/icon-end.svg b/tutor/resources/images/icons/icon-end.svg
new file mode 100644
index 0000000000..232b624ba0
--- /dev/null
+++ b/tutor/resources/images/icons/icon-end.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#FFFFFF" cx="20" cy="20" r="20"/>
+<rect x="28.758" y="12.375" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.855 -10.5536)" fill="#5F6263" width="1.512" height="24"/>
+<g>
+	<rect x="9.405" y="8.034" transform="matrix(0.8965 0.443 -0.443 0.8965 9.1115 -6.9373)" fill="#FFFFFF" width="20" height="16"/>
+	<rect x="12.839" y="5.333" transform="matrix(0.8965 0.443 -0.443 0.8965 4.8354 -6.0363)" fill="#5F6263" width="5" height="4"/>
+	<rect x="15.55" y="11.133" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6857 -6.6368)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="21.804" y="9.763" transform="matrix(0.8966 0.4429 -0.4429 0.8966 7.7238 -9.5482)" fill="#5F6263" width="5.001" height="4"/>
+	
+		<rect x="24.515" y="15.563" transform="matrix(0.8966 0.4429 -0.4429 0.8966 10.5734 -10.1486)" fill="#5F6263" width="5" height="4.001"/>
+	<rect x="9.295" y="12.505" transform="matrix(0.8965 0.443 -0.443 0.8965 7.6467 -3.7245)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="12.006" y="18.306" transform="matrix(0.8965 0.443 -0.443 0.8965 10.4961 -4.3247)" fill="#5F6263" width="5" height="4"/>
+	<rect x="18.26" y="16.935" transform="matrix(0.8965 0.443 -0.443 0.8965 10.5359 -7.2372)" fill="#5F6263" width="5" height="4"/>
+	
+		<rect x="20.97" y="22.736" transform="matrix(0.8965 0.4431 -0.4431 0.8965 13.3906 -7.8391)" fill="#5F6263" width="5.001" height="4"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-event.svg b/tutor/resources/images/icons/icon-event.svg
new file mode 100644
index 0000000000..b03298884f
--- /dev/null
+++ b/tutor/resources/images/icons/icon-event.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F4CF1A" d="M32.475,11.573c0-1.104-0.896-2-2-2h-20c-1.104,0-2,0.896-2,2v4.002h24V11.573z"/>
+	<path fill="#FFFFFF" d="M10.475,30.574h20c1.104,0,2-0.896,2-2v-13h-24v13C8.475,29.678,9.37,30.574,10.475,30.574z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="14.479" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M15.229,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<circle fill="#FFFFFF" cx="26.471" cy="12.074" r="2"/>
+	<path fill="#5F6263" d="M27.221,12.323c0,0.414-0.336,0.75-0.75,0.75l0,0c-0.414,0-0.75-0.336-0.75-0.75v-4.5
+		c0-0.414,0.336-0.75,0.75-0.75l0,0c0.414,0,0.75,0.336,0.75,0.75V12.323z"/>
+</g>
+<g>
+	<rect x="11.476" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="11.476" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="18.142" y="17.573" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="17.573" fill="#F47642" width="4.666" height="4"/>
+	<rect x="18.142" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+	<rect x="24.808" y="23.572" fill="#CCCCCC" width="4.666" height="4"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-external.svg b/tutor/resources/images/icons/icon-external.svg
new file mode 100644
index 0000000000..f2050caa71
--- /dev/null
+++ b/tutor/resources/images/icons/icon-external.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#FFFFFF" d="M30,32.987c0,0.78-0.613,1.412-1.369,1.412H11.369c-0.757,0-1.369-0.632-1.369-1.412V7.013
+		c0-0.78,0.612-1.413,1.369-1.413h17.262C29.387,5.6,30,6.232,30,7.013V32.987z"/>
+	<rect x="12" y="21.396" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="25.136" fill="#A7A9AC" width="16" height="0.801"/>
+	<rect x="12" y="28.876" fill="#A7A9AC" width="11.199" height="0.801"/>
+</g>
+<polygon fill="#73B451" points="19.434,18.999 23.566,14.867 25.633,16.933 25.632,8.67 17.368,8.67 19.434,10.736 15.303,14.867 
+	"/>
+</svg>
diff --git a/tutor/resources/images/icons/icon-feedback.svg b/tutor/resources/images/icons/icon-feedback.svg
new file mode 100644
index 0000000000..85ca782b10
--- /dev/null
+++ b/tutor/resources/images/icons/icon-feedback.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#F47642" cx="29.975" cy="29.982" r="30"/>
+<path fill="#FFFFFF" d="M44.458,12.133H15.495c-2.213,0-4.006,1.793-4.006,4.006v23.366c0,2.212,1.793,4.006,4.006,4.006h4.07v7.884
+	c0,1.203,1.156,2.081,2.391,0.848c0.983-0.984,5.048-5.082,8.659-8.731h13.843c2.212,0,4.005-1.794,4.005-4.006V16.139
+	C48.462,13.927,46.669,12.133,44.458,12.133z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3002F" d="M43.937,25.575l-3.102,3.101l3.04,3.039
+	c0.381,0.381,0.381,0.998,0,1.378l-0.828,0.826c-0.381,0.381-0.997,0.381-1.377,0l-3.038-3.038l-2.914,2.913
+	c-0.378,0.378-0.991,0.378-1.369,0l-0.821-0.822c-0.38-0.377-0.38-0.991,0-1.369l2.911-2.913l-3.038-3.039
+	c-0.381-0.38-0.381-0.997,0-1.377l0.828-0.827c0.38-0.381,0.997-0.381,1.378,0l3.037,3.038l3.103-3.101
+	c0.378-0.378,0.99-0.378,1.369,0l0.821,0.822C44.315,24.583,44.315,25.197,43.937,25.575z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M29.833,25.694l-7.941,7.942c-0.239,0.243-0.443,0.388-0.853,0.39
+	c-0.35-0.012-0.721-0.214-0.891-0.39l-4.068-4.068c-0.379-0.378-0.379-0.978,0-1.356l0.775-0.774
+	c0.378-0.378,0.978-0.185,1.355,0.193l2.711,2.712l6.781-6.78c0.38-0.381,0.975-0.381,1.355,0l0.774,0.774
+	C30.214,24.718,30.214,25.313,29.833,25.694z"/>
+</svg>
diff --git a/tutor/resources/images/icons/icon-homework.svg b/tutor/resources/images/icons/icon-homework.svg
new file mode 100644
index 0000000000..2870808cef
--- /dev/null
+++ b/tutor/resources/images/icons/icon-homework.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<g>
+	<circle fill="#00C1DE" cx="20" cy="20" r="20"/>
+	<g>
+		<path fill="#F89646" d="M20.317,19.683L30.986,9.014c-2.309-2.309-5.043-3.929-7.949-4.873l-9.131,9.13L20.317,19.683z"/>
+		<path fill="#F47642" d="M20.317,19.683l6.411,6.412l9.131-9.131c-0.943-2.906-2.564-5.641-4.873-7.95L20.317,19.683z"/>
+		<g>
+			<polygon fill="#F4CF1A" points="26.726,26.098 13.903,13.275 9.281,27.284 12.452,30.454 			"/>
+			<polygon fill="#3B3B3B" points="12.452,30.454 9.281,27.284 7.763,31.886 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-incorrect.svg b/tutor/resources/images/icons/icon-incorrect.svg
new file mode 100644
index 0000000000..0b31f1a87a
--- /dev/null
+++ b/tutor/resources/images/icons/icon-incorrect.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon-incorrect.svg"><metadata
+   id="metadata3124"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs3122" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="640"
+   inkscape:window-height="480"
+   id="namedview3120"
+   showgrid="false"
+   inkscape:zoom="5.9"
+   inkscape:cx="20"
+   inkscape:cy="20"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3112">
+	<path
+   fill="#C3002F"
+   d="M33.6,28.2c-2.978,0-5.4,2.423-5.4,5.4S30.622,39,33.6,39s5.4-2.422,5.4-5.399S36.577,28.2,33.6,28.2z"
+   id="path3114" />
+	<path
+   fill="#FFFFFF"
+   d="M33.6,27.2c-3.529,0-6.4,2.871-6.4,6.4c0,3.528,2.871,6.399,6.4,6.399s6.4-2.871,6.4-6.399   C40,30.071,37.129,27.2,33.6,27.2z M33.6,39c-2.978,0-5.4-2.422-5.4-5.399s2.423-5.4,5.4-5.4s5.4,2.423,5.4,5.4S36.577,39,33.6,39z   "
+   id="path3116" />
+</g>
+<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   fill="#FFFFFF"
+   d="M36.248,32.054l-1.559,1.559l1.528,1.527  c0.191,0.191,0.191,0.502,0,0.693l-0.417,0.414c-0.191,0.191-0.5,0.191-0.692,0l-1.526-1.526l-1.465,1.464  c-0.191,0.189-0.499,0.189-0.688,0l-0.413-0.412c-0.191-0.191-0.191-0.499,0-0.689l1.463-1.464l-1.526-1.528  c-0.191-0.19-0.191-0.501,0-0.691l0.415-0.416c0.191-0.191,0.502-0.191,0.693,0l1.527,1.527l1.56-1.559  c0.189-0.19,0.497-0.19,0.688,0l0.412,0.413C36.438,31.555,36.438,31.863,36.248,32.054z"
+   id="path3118" />
+</svg>
\ No newline at end of file
diff --git a/tutor/resources/images/icons/icon-interactive.svg b/tutor/resources/images/icons/icon-interactive.svg
new file mode 100644
index 0000000000..9cf380219b
--- /dev/null
+++ b/tutor/resources/images/icons/icon-interactive.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#00C1DE" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#5F6263" d="M32.146,9.73H7.854c-0.967,0-1.751,0.784-1.751,1.751v15.965c0,0.967,0.784,1.75,1.751,1.75h11.146
+		c-0.008,1.451-0.124,2.96-1.146,3.982h-4.176c-0.204,0-0.368,0.164-0.368,0.367c0,0.204,0.164,0.369,0.368,0.369h12.701
+		c0.203,0,0.368-0.165,0.368-0.369c0-0.203-0.165-0.367-0.368-0.367h-4.298c-1.022-1.022-1.138-2.531-1.146-3.982h11.212
+		c0.967,0,1.75-0.783,1.75-1.75V11.481C33.896,10.514,33.113,9.73,32.146,9.73z"/>
+	<g>
+		<path fill="#D1D3D4" d="M32.451,11.188L7.517,27.711c0.186,0.165,0.43,0.267,0.698,0.267h23.569c0.58,0,1.051-0.471,1.051-1.051
+			V12C32.835,11.673,32.685,11.381,32.451,11.188z"/>
+		<path fill="#E6E7E8" d="M31.784,10.95H8.215c-0.58,0-1.05,0.47-1.05,1.05v14.927c0,0.312,0.136,0.592,0.352,0.784l24.935-16.522
+			C32.27,11.04,32.038,10.95,31.784,10.95z"/>
+	</g>
+</g>
+<g>
+	<polygon fill-rule="evenodd" fill="#232E66" points="28.887,16.512 25.152,13.355 25.152,15.606 13.103,15.606 13.103,17.419 
+		25.152,17.419 25.152,19.669 	"/>
+	<polygon fill-rule="evenodd" fill="#F47642" points="11.112,22.147 14.847,18.991 14.847,21.242 26.896,21.242 26.896,23.055 
+		14.847,23.055 14.847,25.306 	"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-laptop.svg b/tutor/resources/images/icons/icon-laptop.svg
new file mode 100644
index 0000000000..4d82b7698f
--- /dev/null
+++ b/tutor/resources/images/icons/icon-laptop.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="50px" height="30px" viewBox="0 0 50 30" enable-background="new 0 0 50 30" xml:space="preserve">
+<g>
+	<path fill="#E6E7E8" d="M42.02,25.02c0.435,0,0.787-0.352,0.787-0.787h-0.002V2.707c0-0.191-0.068-0.366-0.181-0.502
+		c-0.144-0.174-0.36-0.284-0.604-0.284h-0.4L7.799,24.99c0.055,0.013,0.11,0.029,0.169,0.029H42.02L42.02,25.02z"/>
+	<path fill="#A7A9AC" d="M48.9,26.523H28.879c0,0.472-0.383,0.854-0.854,0.854h-6.062c-0.472,0-0.854-0.383-0.854-0.854H1.108
+		c-0.607,0-1.1,0.492-1.1,1.1v1.26c0,0.607,0.493,1.1,1.1,1.1H48.9c0.606,0,1.1-0.49,1.1-1.1v-1.26
+		C50,27.016,49.508,26.523,48.9,26.523z"/>
+	<path fill="#FFFFFF" d="M32.359,12.726c-0.278-0.205-0.584-0.403-0.901-0.599c0.187-0.316,0.362-0.631,0.511-0.938
+		c0.922-1.899,0.98-3.409,0.166-4.25c-0.404-0.417-0.972-0.63-1.688-0.63c-0.987,0-2.241,0.425-3.598,1.178
+		c-1.188-2.004-2.544-3.215-3.79-3.215c-0.175,0-0.347,0.024-0.513,0.07c-1.127,0.315-1.838,1.648-2.001,3.752
+		c-0.022,0.286-0.031,0.584-0.033,0.89c-0.017,0-0.036-0.002-0.053-0.002c-2.599,0-4.236,0.706-4.609,1.986
+		c-0.389,1.331,0.805,2.902,3.017,4.275c-0.218,0.372-0.418,0.739-0.582,1.096c-0.848,1.835-0.884,3.29-0.102,4.099
+		c0.404,0.418,0.972,0.629,1.687,0.629c0.99,0,2.247-0.426,3.605-1.181c1.188,2.005,2.545,3.218,3.792,3.218
+		c0.176,0,0.348-0.021,0.512-0.067c1.129-0.315,1.84-1.647,2.003-3.753c0.022-0.285,0.03-0.585,0.032-0.893
+		c0.021,0,0.043,0.004,0.062,0.004c2.599,0,4.233-0.707,4.608-1.985C34.814,15.284,34.059,13.977,32.359,12.726z M28.516,19.186
+		c-0.115,1.465-0.524,2.472-1.076,2.625c-0.055,0.016-0.109,0.021-0.17,0.021c-0.627,0-1.668-0.848-2.707-2.604
+		c0.554-0.363,1.117-0.774,1.68-1.229c0.79,0.156,1.565,0.276,2.303,0.338C28.543,18.628,28.536,18.914,28.516,19.186z
+		 M17.074,11.325c0.19-0.65,1.52-1.07,3.388-1.07c0.03,0,0.064,0.004,0.095,0.004c0.052,0.723,0.151,1.48,0.293,2.257
+		c-0.476,0.553-0.912,1.11-1.297,1.662C17.76,13.075,16.887,11.965,17.074,11.325z M21.816,8.193
+		c0.113-1.466,0.526-2.471,1.076-2.626c0.053-0.015,0.111-0.023,0.169-0.023c0.626,0,1.667,0.847,2.705,2.6
+		c-0.556,0.365-1.12,0.777-1.684,1.232c-0.788-0.155-1.561-0.275-2.297-0.336C21.788,8.749,21.795,8.464,21.816,8.193z
+		 M27.021,15.611c-0.375,0.361-0.752,0.699-1.133,1.022c-0.489-0.108-0.979-0.233-1.47-0.378c-0.49-0.143-0.951-0.297-1.395-0.456
+		c-0.151-0.441-0.298-0.899-0.436-1.391c-0.143-0.513-0.266-1.021-0.372-1.524c0.336-0.369,0.692-0.742,1.083-1.12
+		c0.374-0.362,0.755-0.701,1.136-1.026c0.493,0.11,0.989,0.236,1.483,0.38c0.477,0.139,0.938,0.292,1.389,0.454
+		c0.149,0.441,0.297,0.901,0.436,1.394c0.143,0.51,0.264,1.015,0.369,1.514C27.768,14.862,27.404,15.24,27.021,15.611z
+		 M28.967,12.625c-0.042-0.149-0.087-0.292-0.131-0.438c0.281,0.125,0.555,0.255,0.818,0.388c-0.164,0.23-0.338,0.462-0.521,0.695
+		C29.081,13.055,29.027,12.84,28.967,12.625z M26.275,9.899C26.08,9.842,25.889,9.8,25.693,9.748
+		c0.226-0.166,0.451-0.331,0.674-0.479c0.117,0.243,0.234,0.499,0.349,0.768C26.57,9.991,26.425,9.943,26.275,9.899z M22.416,10.852
+		c-0.161,0.156-0.315,0.313-0.47,0.472c-0.046-0.339-0.085-0.674-0.112-0.999c0.329,0.031,0.667,0.074,1.009,0.125
+		C22.7,10.582,22.557,10.715,22.416,10.852z M21.364,14.752c0.042,0.149,0.087,0.292,0.131,0.438
+		c-0.29-0.128-0.567-0.26-0.829-0.393c0.164-0.23,0.339-0.465,0.526-0.703C21.248,14.313,21.302,14.533,21.364,14.752z
+		 M24.063,17.479c0.191,0.057,0.378,0.098,0.569,0.146c-0.226,0.166-0.45,0.33-0.671,0.479c-0.118-0.244-0.234-0.5-0.349-0.767
+		C23.763,17.384,23.909,17.434,24.063,17.479z M27.906,16.525c0.164-0.158,0.32-0.319,0.478-0.48
+		c0.046,0.341,0.087,0.68,0.113,1.006c-0.331-0.031-0.671-0.074-1.017-0.125C27.622,16.794,27.766,16.662,27.906,16.525z
+		 M28.303,10.589c-0.263-0.708-0.546-1.374-0.848-1.985c1.154-0.644,2.205-1.022,2.992-1.022c0.357,0,0.617,0.082,0.773,0.242
+		c0.396,0.411,0.245,1.488-0.396,2.81c-0.137,0.283-0.299,0.574-0.473,0.868C29.716,11.174,29.027,10.87,28.303,10.589z
+		 M22.027,16.788c0.263,0.708,0.545,1.371,0.846,1.979c-1.157,0.646-2.21,1.026-3,1.026c-0.358,0-0.618-0.082-0.773-0.243
+		c-0.465-0.479-0.208-1.871,0.869-3.688C20.6,16.191,21.287,16.502,22.027,16.788z M29.479,14.853
+		c0.474-0.55,0.908-1.105,1.293-1.654c0.293,0.18,0.576,0.363,0.832,0.552c1.187,0.871,1.821,1.753,1.662,2.301
+		c-0.189,0.651-1.521,1.071-3.389,1.071c-0.033,0-0.07-0.004-0.104-0.004C29.723,16.393,29.622,15.632,29.479,14.853z"/>
+	<path fill="#FFFFFF" d="M41.618,1.906H7.967c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.472,0.299,0.617
+		c0.134,0.105,0.303,0.17,0.487,0.17c-0.059,0-0.114-0.017-0.169-0.029L41.618,1.906z"/>
+	<path fill="#F47642" d="M32.166,12.906c-0.348-0.254-0.729-0.502-1.139-0.743c0.25-0.403,0.474-0.801,0.662-1.188
+		c0.856-1.771,0.937-3.152,0.222-3.891c-0.343-0.353-0.833-0.533-1.458-0.533c-1.008,0-2.312,0.469-3.723,1.292
+		c-1.16-2.056-2.495-3.329-3.667-3.329c-0.146,0-0.29,0.02-0.427,0.058c-0.989,0.277-1.618,1.51-1.77,3.471
+		c-0.029,0.379-0.036,0.782-0.03,1.198c-0.124-0.003-0.256-0.017-0.378-0.017c-2.444,0-3.973,0.625-4.304,1.757
+		c-0.359,1.231,0.905,2.753,3.152,4.08c-1.37,2.222-1.779,4.158-0.887,5.08c0.342,0.354,0.833,0.532,1.459,0.532
+		c1.007,0,2.312-0.47,3.723-1.293c1.161,2.058,2.493,3.33,3.668,3.33c0.146,0,0.289-0.019,0.426-0.058
+		c0.99-0.276,1.619-1.51,1.77-3.471c0.029-0.381,0.037-0.783,0.03-1.197C29.62,17.986,29.751,18,29.873,18
+		c2.445,0,3.975-0.624,4.304-1.757C34.465,15.256,33.751,14.071,32.166,12.906z M30.453,7.187c0.447,0,0.783,0.114,1.002,0.339
+		c0.507,0.525,0.384,1.68-0.338,3.17c-0.184,0.376-0.4,0.764-0.645,1.157c-0.738-0.396-1.551-0.765-2.418-1.095
+		c-0.312-0.853-0.656-1.64-1.022-2.352C28.348,7.635,29.555,7.187,30.453,7.187z M27.248,15.764
+		c-0.417,0.404-0.844,0.778-1.271,1.137c-0.545-0.117-1.099-0.252-1.648-0.414c-0.544-0.158-1.059-0.331-1.553-0.512
+		c-0.173-0.495-0.338-1.011-0.491-1.556c-0.16-0.571-0.297-1.14-0.411-1.699c0.374-0.416,0.775-0.837,1.212-1.259
+		c0.417-0.404,0.843-0.778,1.27-1.136c0.548,0.118,1.1,0.253,1.651,0.414c0.533,0.155,1.051,0.327,1.553,0.511
+		c0.174,0.494,0.34,1.01,0.491,1.555c0.16,0.572,0.298,1.14,0.411,1.699C28.079,14.93,27.674,15.351,27.248,15.764z M28.604,15.284
+		c0.117,0.704,0.193,1.384,0.231,2.034c-0.655-0.047-1.344-0.137-2.053-0.264c0.305-0.27,0.608-0.546,0.907-0.836
+		C28.007,15.913,28.309,15.6,28.604,15.284z M25.354,17.409c-0.512,0.399-1.018,0.753-1.517,1.071
+		c-0.268-0.526-0.528-1.104-0.774-1.73c0.354,0.121,0.714,0.236,1.086,0.346C24.553,17.215,24.954,17.312,25.354,17.409z
+		 M21.67,14.59c0.104,0.373,0.216,0.732,0.333,1.088c-0.657-0.267-1.263-0.547-1.808-0.836c0.334-0.492,0.722-1.002,1.158-1.522
+		C21.448,13.74,21.551,14.164,21.67,14.59z M21.728,11.941c-0.118-0.705-0.193-1.384-0.231-2.034
+		c0.655,0.046,1.343,0.136,2.052,0.263c-0.304,0.267-0.608,0.544-0.908,0.834C22.321,11.314,22.02,11.627,21.728,11.941z
+		 M24.978,9.816c0.511-0.399,1.018-0.752,1.517-1.072c0.269,0.526,0.528,1.104,0.774,1.731c-0.355-0.122-0.718-0.239-1.086-0.347
+		C25.777,10.01,25.377,9.912,24.978,9.816z M28.661,12.635c-0.104-0.372-0.216-0.731-0.333-1.085
+		c0.638,0.26,1.236,0.541,1.794,0.837c-0.341,0.502-0.724,1.01-1.146,1.518C28.883,13.484,28.779,13.061,28.661,12.635z M21.5,8.092
+		c0.127-1.651,0.604-2.711,1.307-2.908c0.082-0.023,0.168-0.034,0.255-0.034c0.858,0,2.035,1.082,3.127,3.022
+		c-0.662,0.42-1.339,0.912-2.02,1.467c-0.935-0.19-1.841-0.316-2.7-0.372C21.464,8.86,21.471,8.464,21.5,8.092z M16.765,11.16
+		c0.237-0.814,1.618-1.299,3.693-1.299c0.128,0,0.269,0.014,0.4,0.018c0.046,0.841,0.158,1.734,0.333,2.657
+		c-0.587,0.675-1.106,1.347-1.545,2.001C17.576,13.328,16.51,12.031,16.765,11.16z M19.878,20.038c-0.447,0-0.784-0.114-1.002-0.339
+		c-0.631-0.652-0.294-2.297,0.975-4.331c0.729,0.394,1.542,0.765,2.426,1.101c0.312,0.852,0.656,1.639,1.022,2.35
+		C21.983,19.591,20.776,20.038,19.878,20.038z M28.832,19.133c-0.128,1.651-0.604,2.71-1.309,2.908
+		c-0.082,0.021-0.168,0.034-0.254,0.034c-0.858,0-2.037-1.083-3.127-3.022c0.662-0.421,1.339-0.912,2.017-1.467
+		c0.937,0.189,1.841,0.316,2.7,0.372C28.867,18.365,28.861,18.761,28.832,19.133z M33.566,16.064
+		c-0.237,0.813-1.619,1.301-3.693,1.301c-0.127,0-0.27-0.014-0.4-0.018c-0.046-0.843-0.158-1.736-0.332-2.66
+		c0.577-0.664,1.096-1.333,1.541-1.993c0.398,0.234,0.771,0.475,1.108,0.723C33.124,14.399,33.771,15.364,33.566,16.064z"/>
+	<path fill="#808080" d="M42.891-0.018H7.097c-0.868,0-1.572,0.704-1.572,1.572v24.987h15.584c0,0.473,0.382,0.854,0.854,0.854
+		h6.061c0.474,0,0.854-0.383,0.854-0.854h15.583V1.554C44.462,0.686,43.758-0.018,42.891-0.018z M42.807,24.232
+		c0,0.436-0.354,0.787-0.787,0.787H7.968c-0.184,0-0.353-0.064-0.487-0.17c-0.182-0.146-0.299-0.367-0.299-0.617V2.707
+		c0-0.435,0.352-0.786,0.786-0.786H42.02c0.244,0,0.461,0.11,0.604,0.284c0.112,0.136,0.181,0.311,0.181,0.502v21.525H42.807z"/>
+	<path fill="none" d="M7.968,1.921c-0.434,0-0.786,0.351-0.786,0.786v21.525c0,0.25,0.117,0.473,0.299,0.617
+		c0.091,0.07,0.201,0.113,0.318,0.141L41.618,1.921H7.968z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-light-bulb.svg b/tutor/resources/images/icons/icon-light-bulb.svg
new file mode 100644
index 0000000000..fe4b79b23a
--- /dev/null
+++ b/tutor/resources/images/icons/icon-light-bulb.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="25px" height="30px" viewBox="0 0 25 30" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M12.5,4.38c-4.634,0-8.386,3.038-8.386,7.644c0,4.607,2.409,5.835,3.344,8.054
+		c0.935,2.218,1.546,4.002,1.546,4.002H12.5h3.495c0,0,0.612-1.784,1.547-4.002s3.344-3.447,3.344-8.054
+		C20.886,7.418,17.135,4.38,12.5,4.38z"/>
+	<rect x="9.048" y="24.714" fill="#D1D3D4" width="6.905" height="1.535"/>
+	<polygon fill="#D1D3D4" points="15.376,28.082 9.624,28.082 9.048,26.548 15.953,26.548 	"/>
+	<polygon fill="#5F6062" points="14.023,30 10.978,30 10.53,28.466 14.47,28.466 	"/>
+	<rect y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="2.799" y="3.744" transform="matrix(0.7072 0.707 -0.707 0.7072 4.323 -1.5739)" fill="#FFFFFF" width="2.525" height="1.377"/>
+	
+		<rect x="19.504" y="3.451" transform="matrix(-0.707 0.7072 -0.7072 -0.707 38.3747 -7.6191)" fill="#FFFFFF" width="2.524" height="1.377"/>
+	<rect x="22.475" y="11.389" fill="#FFFFFF" width="2.525" height="1.377"/>
+	<rect x="11.812" fill="#FFFFFF" width="1.377" height="2.525"/>
+	<path fill="#E6E7E8" d="M11.229,23.305L9.311,13.14l0.578,0.363c0.372,0.234,1.459,0.84,2.017,0.84s1.305-0.401,1.545-0.556
+		l0.323,0.502c-0.041,0.027-1.022,0.65-1.868,0.65c-0.523,0-1.255-0.333-1.762-0.602l1.671,8.857L11.229,23.305z"/>
+	
+		<rect x="13.776" y="13.689" transform="matrix(0.9861 0.1661 -0.1661 0.9861 3.2693 -2.0809)" fill="#E6E7E8" width="0.597" height="9.627"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-personalized-interstitial.svg b/tutor/resources/images/icons/icon-personalized-interstitial.svg
new file mode 100755
index 0000000000..9833b06dad
--- /dev/null
+++ b/tutor/resources/images/icons/icon-personalized-interstitial.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 19.4" style="enable-background:new 0 0 50 19.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.6;fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="18.5" cy="3.6" r="3.6"/>
+	<g>
+		<g>
+			<circle class="st1" cx="5.5" cy="3.6" r="3.6"/>
+			<path class="st1" d="M7.7,7.4C7.1,7.8,6.4,8.1,5.5,8.1c-0.9,0-1.6-0.3-2.2-0.7C1.4,7.7,0,9.4,0,11.3v6.1v2h11v-2v-6.1
+				C11,9.4,9.6,7.7,7.7,7.4z"/>
+		</g>
+		<path class="st0" d="M20.7,7.4c-0.6,0.5-1.4,0.7-2.2,0.7c-0.9,0-1.6-0.3-2.2-0.7c-1.9,0.4-3.3,2-3.3,3.9v6.1v2h11v-2v-6.1
+			C24,9.4,22.6,7.7,20.7,7.4z"/>
+		<g>
+			<circle class="st1" cx="31.5" cy="3.6" r="3.6"/>
+			<path class="st1" d="M33.7,7.4c-0.6,0.5-1.4,0.7-2.2,0.7c-0.9,0-1.6-0.3-2.2-0.7c-1.9,0.4-3.3,2-3.3,3.9v6.1v2h11v-2v-6.1
+				C37,9.4,35.6,7.7,33.7,7.4z"/>
+		</g>
+		<g>
+			<circle class="st1" cx="44.5" cy="3.6" r="3.6"/>
+			<path class="st1" d="M46.7,7.4c-0.6,0.5-1.4,0.7-2.2,0.7c-0.9,0-1.6-0.3-2.2-0.7c-1.9,0.4-3.3,2-3.3,3.9v6.1v2h11v-2v-6.1
+				C50,9.4,48.6,7.7,46.7,7.4z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-personalized.svg b/tutor/resources/images/icons/icon-personalized.svg
new file mode 100644
index 0000000000..ca806101e3
--- /dev/null
+++ b/tutor/resources/images/icons/icon-personalized.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 33 13" style="enable-background:new 0 0 33 13;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F47641;}
+	.st1{fill:#5E6062;}
+</style>
+<g>
+	<ellipse class="st0" cx="12.2" cy="2.4" rx="2.4" ry="2.4"/>
+	<g>
+		<g>
+			<ellipse class="st1" cx="3.6" cy="2.4" rx="2.4" ry="2.4"/>
+			<path class="st1" d="M5.1,4.9C4.7,5.2,4.2,5.4,3.6,5.4c-0.6,0-1.1-0.2-1.5-0.5C0.9,5.2,0,6.3,0,7.6v4.1V13h7.3v-1.3V7.6
+				C7.3,6.3,6.3,5.2,5.1,4.9z"/>
+		</g>
+		<path class="st0" d="M13.7,4.9c-0.4,0.3-0.9,0.5-1.5,0.5c-0.6,0-1.1-0.2-1.5-0.5C9.5,5.2,8.6,6.3,8.6,7.6v4.1V13h7.3v-1.3V7.6
+			C15.8,6.3,14.9,5.2,13.7,4.9z"/>
+		<g>
+			<ellipse class="st1" cx="20.8" cy="2.4" rx="2.4" ry="2.4"/>
+			<path class="st1" d="M22.3,4.9c-0.4,0.3-0.9,0.5-1.5,0.5c-0.6,0-1.1-0.2-1.5-0.5c-1.2,0.2-2.1,1.3-2.1,2.6v4.1V13h7.3v-1.3V7.6
+				C24.4,6.3,23.5,5.2,22.3,4.9z"/>
+		</g>
+		<g>
+			<ellipse class="st1" cx="29.4" cy="2.4" rx="2.4" ry="2.4"/>
+			<path class="st1" d="M30.9,4.9c-0.4,0.3-0.9,0.5-1.5,0.5c-0.6,0-1.1-0.2-1.5-0.5c-1.2,0.2-2.1,1.3-2.1,2.6v4.1V13H33v-1.3V7.6
+				C33,6.3,32.1,5.2,30.9,4.9z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-reading.svg b/tutor/resources/images/icons/icon-reading.svg
new file mode 100644
index 0000000000..8ebd9a1c5f
--- /dev/null
+++ b/tutor/resources/images/icons/icon-reading.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#F4CF1A" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M29.611,33.182c0,0.78-0.612,1.413-1.369,1.413H10.98c-0.756,0-1.369-0.632-1.369-1.413V7.208
+	c0-0.78,0.613-1.413,1.369-1.413h17.262c0.757,0,1.369,0.632,1.369,1.413V33.182z"/>
+<rect x="20.95" y="17.851" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="21.591" fill="#A7A9AC" width="16" height="1"/>
+<rect x="20.95" y="13.868" fill="#A7A9AC" width="6.5" height="1"/>
+<rect x="11.611" y="25.331" fill="#A7A9AC" width="16" height="1"/>
+<rect x="11.611" y="29.071" fill="#A7A9AC" width="11.2" height="1"/>
+<polygon fill="#232E66" points="16.908,16.772 18.005,15.449 20,17.856 20,10.128 11.611,10.128 11.611,17.855 14.708,14.12 "/>
+<polygon fill="#73B451" points="18.005,15.475 16.908,16.784 14.708,14.16 11.611,17.855 11.611,18.651 20,18.651 20,17.856 "/>
+</svg>
diff --git a/tutor/resources/images/icons/icon-recover.svg b/tutor/resources/images/icons/icon-recover.svg
new file mode 100644
index 0000000000..01170362d0
--- /dev/null
+++ b/tutor/resources/images/icons/icon-recover.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
+<circle fill="#232E66" cx="30.134" cy="30" r="30"/>
+<path fill="#73B451" d="M50.604,30.851c0-11.307-9.165-20.471-20.471-20.471V5.102l-9.95,9.95l9.95,9.949v-5.328
+	c6.174,0,11.179,5.003,11.179,11.178s-5.005,11.178-11.179,11.178s-11.179-5.003-11.179-11.178H9.663
+	c0,11.307,9.165,20.471,20.471,20.471S50.604,42.157,50.604,30.851z"/>
+</svg>
diff --git a/tutor/resources/images/icons/icon-review-interstitial.svg b/tutor/resources/images/icons/icon-review-interstitial.svg
new file mode 100755
index 0000000000..68cccba0da
--- /dev/null
+++ b/tutor/resources/images/icons/icon-review-interstitial.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 25.1" style="enable-background:new 0 0 24 25.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.6;fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M7.6,9.1L5.9,7.3l0.4-0.5c3-3,7.9-3,10.9,0c1.9,1.9,2.6,4.6,2,7.2h4.7c0.6-3.8-0.7-7.7-3.4-10.5
+		C15.6-1.2,7.9-1.2,3.1,3.6L2.7,4L0.8,2.3v6.7H7.6z"/>
+	<path class="st1" d="M17.6,18.4l-0.3,0.3l0,0c-3,2.6-7.5,2.4-10.4-0.4c-1.9-1.9-2.7-4.7-2-7.3H0.1c-0.6,3.9,0.7,7.8,3.4,10.5
+		c4.8,4.8,12.6,4.8,17.4,0l0.4-0.4l1.4,1.3l0.4-6.3h-6.7l1.7,1.7l-0.4,0.5C17.7,18.3,17.7,18.3,17.6,18.4z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-review.svg b/tutor/resources/images/icons/icon-review.svg
new file mode 100644
index 0000000000..cefc6567a0
--- /dev/null
+++ b/tutor/resources/images/icons/icon-review.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20.9 22" style="enable-background:new 0 0 20.9 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F47641;}
+	.st1{fill:#606364;}
+	.st2{fill:#73B450;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M6.5,7.9L5,6.4L5.4,6c2.6-2.6,6.9-2.6,9.5,0c1.7,1.7,2.3,4,1.8,6.3h4.1c0.5-3.3-0.6-6.8-3-9.2
+		C13.5-1,6.8-1,2.5,3.2L2.2,3.5L0.6,2v5.9H6.5z"/>
+	<path class="st1" d="M15.3,16.1L15,16.4l0,0c-2.6,2.3-6.6,2.1-9.1-0.4c-1.7-1.7-2.4-4.1-1.8-6.4H0c-0.5,3.4,0.6,6.9,3,9.2
+		c4.2,4.2,11,4.2,15.2,0l0.4-0.4l1.2,1.1l0.4-5.5h-5.9l1.5,1.5L15.3,16.1C15.4,16,15.4,16,15.3,16.1z"/>
+	<path class="st2" d="M15.3,16.1c-0.1,0.1-0.2,0.2-0.4,0.3l0,0L15.3,16.1z"/>
+	<path class="st3" d="M15.5,16l0.4-0.4L15.5,16C15.4,16,15.4,16,15.5,16z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-test.svg b/tutor/resources/images/icons/icon-test.svg
new file mode 100644
index 0000000000..c154a9180f
--- /dev/null
+++ b/tutor/resources/images/icons/icon-test.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#232E66" cx="20" cy="20" r="20"/>
+<path fill="#FFFFFF" d="M30,33.528C30,34.341,29.388,35,28.631,35H11.369C10.613,35,10,34.341,10,33.528V6.472
+	C10,5.658,10.613,5,11.369,5h17.262C29.388,5,30,5.658,30,6.472V33.528z"/>
+<rect x="12" y="16.974" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="21.129" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="25.284" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="8.664" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="12.818" fill="#A7A9AC" width="16" height="1"/>
+<rect x="12" y="29.439" fill="#A7A9AC" width="8" height="1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#73B451" d="M36.783,17.527L24.824,29.486
+	c-0.359,0.365-0.667,0.584-1.283,0.586c-0.526-0.017-1.085-0.321-1.341-0.586l-6.127-6.125c-0.569-0.57-0.569-1.473,0-2.043
+	l1.169-1.166c0.568-0.569,1.471-0.278,2.04,0.291l4.082,4.084l10.21-10.208c0.572-0.574,1.469-0.574,2.042,0l1.167,1.166
+	C37.356,16.059,37.356,16.955,36.783,17.527z"/>
+</svg>
diff --git a/tutor/resources/images/icons/icon-video.svg b/tutor/resources/images/icons/icon-video.svg
new file mode 100644
index 0000000000..d21d00cfff
--- /dev/null
+++ b/tutor/resources/images/icons/icon-video.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<circle fill="#5F6062" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#F47642" d="M13.003,12.724c0-1.1,0.805-1.598,1.789-1.105l16.423,8.211c0.983,0.492,0.983,1.296,0,1.789l-16.423,8.211
+		c-0.984,0.492-1.789-0.005-1.789-1.105V12.724z"/>
+</g>
+</svg>
diff --git a/tutor/resources/images/icons/icon-worked-example.svg b/tutor/resources/images/icons/icon-worked-example.svg
new file mode 100644
index 0000000000..e700e3b9aa
--- /dev/null
+++ b/tutor/resources/images/icons/icon-worked-example.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
+<circle fill="#73B451" cx="20" cy="20" r="20"/>
+<g>
+	<path fill="#E6E7E8" d="M24.797,35.637c-0.475,0.993-1.675,1.417-2.668,0.943L5.761,28.756c-0.993-0.474-1.417-1.674-0.942-2.666
+		L15.204,4.363c0.474-0.993,1.674-1.417,2.667-0.942l16.368,7.823c0.993,0.474,1.417,1.674,0.943,2.667L24.797,35.637z"/>
+	
+		<rect x="13.868" y="8.366" transform="matrix(0.9022 0.4312 -0.4312 0.9022 7.9547 -8.743)" fill="#232E66" width="18.788" height="9.616"/>
+	<g>
+		
+			<rect x="11.032" y="15.733" transform="matrix(0.9023 0.4312 -0.4312 0.9023 8.916 -4.1794)" fill="#5F6062" width="5.292" height="3.691"/>
+		
+			<rect x="17.12" y="18.644" transform="matrix(0.9022 0.4313 -0.4313 0.9022 10.7714 -6.5218)" fill="#5F6062" width="5.292" height="3.69"/>
+		
+			<rect x="23.208" y="21.554" transform="matrix(0.9022 0.4313 -0.4313 0.9022 12.6191 -8.862)" fill="#5F6062" width="5.292" height="3.69"/>
+	</g>
+	<g>
+		
+			<rect x="8.829" y="20.342" transform="matrix(0.9022 0.4314 -0.4314 0.9022 10.6937 -2.7798)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="14.918" y="23.251" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.5433 -5.1215)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="21.006" y="26.16" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.388 -7.4615)" fill="#5F6062" width="5.293" height="3.691"/>
+	</g>
+	<g>
+		
+			<rect x="6.627" y="24.949" transform="matrix(0.9022 0.4314 -0.4314 0.9022 12.4647 -1.3793)" fill="#5F6062" width="5.293" height="3.69"/>
+		
+			<rect x="12.716" y="27.858" transform="matrix(0.9023 0.4312 -0.4312 0.9023 14.3096 -3.7209)" fill="#5F6062" width="5.293" height="3.691"/>
+		
+			<rect x="18.804" y="30.767" transform="matrix(0.9023 0.4311 -0.4311 0.9023 16.1544 -6.061)" fill="#F47642" width="5.292" height="3.691"/>
+	</g>
+	<text transform="matrix(0.526 0.2514 -0.2514 0.526 16.876 12.5044)" fill="#00C1DE" font-family="'Lato-Black'" font-size="12">x+y</text>
+</g>
+</svg>
diff --git a/resources/images/learning-guide/cloud.svg b/tutor/resources/images/learning-guide/cloud.svg
similarity index 100%
rename from resources/images/learning-guide/cloud.svg
rename to tutor/resources/images/learning-guide/cloud.svg
diff --git a/resources/images/learning-guide/flag-blue.svg b/tutor/resources/images/learning-guide/flag-blue.svg
similarity index 100%
rename from resources/images/learning-guide/flag-blue.svg
rename to tutor/resources/images/learning-guide/flag-blue.svg
diff --git a/resources/images/learning-guide/flag-green.svg b/tutor/resources/images/learning-guide/flag-green.svg
similarity index 100%
rename from resources/images/learning-guide/flag-green.svg
rename to tutor/resources/images/learning-guide/flag-green.svg
diff --git a/resources/images/learning-guide/flag-grey.svg b/tutor/resources/images/learning-guide/flag-grey.svg
similarity index 100%
rename from resources/images/learning-guide/flag-grey.svg
rename to tutor/resources/images/learning-guide/flag-grey.svg
diff --git a/resources/images/learning-guide/flag-yellow.svg b/tutor/resources/images/learning-guide/flag-yellow.svg
similarity index 100%
rename from resources/images/learning-guide/flag-yellow.svg
rename to tutor/resources/images/learning-guide/flag-yellow.svg
diff --git a/resources/images/learning-guide/guide-pencil.svg b/tutor/resources/images/learning-guide/guide-pencil.svg
similarity index 100%
rename from resources/images/learning-guide/guide-pencil.svg
rename to tutor/resources/images/learning-guide/guide-pencil.svg
diff --git a/resources/images/learning-guide/houston-skyline.svg b/tutor/resources/images/learning-guide/houston-skyline.svg
similarity index 100%
rename from resources/images/learning-guide/houston-skyline.svg
rename to tutor/resources/images/learning-guide/houston-skyline.svg
diff --git a/resources/images/learning-guide/openstax-plane.svg b/tutor/resources/images/learning-guide/openstax-plane.svg
similarity index 100%
rename from resources/images/learning-guide/openstax-plane.svg
rename to tutor/resources/images/learning-guide/openstax-plane.svg
diff --git a/resources/images/openstax-logo.svg b/tutor/resources/images/openstax-logo.svg
similarity index 100%
rename from resources/images/openstax-logo.svg
rename to tutor/resources/images/openstax-logo.svg
diff --git a/resources/images/rice-logo.png b/tutor/resources/images/rice-logo.png
similarity index 100%
rename from resources/images/rice-logo.png
rename to tutor/resources/images/rice-logo.png
diff --git a/resources/styles/book-content/ap-bio/ap-connection.less b/tutor/resources/styles/book-content/ap-bio/ap-connection.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/ap-connection.less
rename to tutor/resources/styles/book-content/ap-bio/ap-connection.less
diff --git a/resources/styles/book-content/ap-bio/ap-everyday.less b/tutor/resources/styles/book-content/ap-bio/ap-everyday.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/ap-everyday.less
rename to tutor/resources/styles/book-content/ap-bio/ap-everyday.less
diff --git a/resources/styles/book-content/ap-bio/ap-science-practices.less b/tutor/resources/styles/book-content/ap-bio/ap-science-practices.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/ap-science-practices.less
rename to tutor/resources/styles/book-content/ap-bio/ap-science-practices.less
diff --git a/resources/styles/book-content/ap-bio/art-connection.less b/tutor/resources/styles/book-content/ap-bio/art-connection.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/art-connection.less
rename to tutor/resources/styles/book-content/ap-bio/art-connection.less
diff --git a/resources/styles/book-content/ap-bio/career.less b/tutor/resources/styles/book-content/ap-bio/career.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/career.less
rename to tutor/resources/styles/book-content/ap-bio/career.less
diff --git a/resources/styles/book-content/ap-bio/everyday.less b/tutor/resources/styles/book-content/ap-bio/everyday.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/everyday.less
rename to tutor/resources/styles/book-content/ap-bio/everyday.less
diff --git a/resources/styles/book-content/ap-bio/evolution.less b/tutor/resources/styles/book-content/ap-bio/evolution.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/evolution.less
rename to tutor/resources/styles/book-content/ap-bio/evolution.less
diff --git a/resources/styles/book-content/ap-bio/index.less b/tutor/resources/styles/book-content/ap-bio/index.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/index.less
rename to tutor/resources/styles/book-content/ap-bio/index.less
diff --git a/resources/styles/book-content/ap-bio/interactive.less b/tutor/resources/styles/book-content/ap-bio/interactive.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/interactive.less
rename to tutor/resources/styles/book-content/ap-bio/interactive.less
diff --git a/resources/styles/book-content/ap-bio/scientific.less b/tutor/resources/styles/book-content/ap-bio/scientific.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/scientific.less
rename to tutor/resources/styles/book-content/ap-bio/scientific.less
diff --git a/resources/styles/book-content/ap-bio/variables.less b/tutor/resources/styles/book-content/ap-bio/variables.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/variables.less
rename to tutor/resources/styles/book-content/ap-bio/variables.less
diff --git a/resources/styles/book-content/ap-bio/visual-connection.less b/tutor/resources/styles/book-content/ap-bio/visual-connection.less
similarity index 100%
rename from resources/styles/book-content/ap-bio/visual-connection.less
rename to tutor/resources/styles/book-content/ap-bio/visual-connection.less
diff --git a/resources/styles/book-content/base.less b/tutor/resources/styles/book-content/base.less
similarity index 100%
rename from resources/styles/book-content/base.less
rename to tutor/resources/styles/book-content/base.less
diff --git a/resources/styles/components/app.less b/tutor/resources/styles/book-content/context-mixins.less
similarity index 100%
rename from resources/styles/components/app.less
rename to tutor/resources/styles/book-content/context-mixins.less
diff --git a/resources/styles/book-content/hs-physics/fun-in-physics.less b/tutor/resources/styles/book-content/hs-physics/fun-in-physics.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/fun-in-physics.less
rename to tutor/resources/styles/book-content/hs-physics/fun-in-physics.less
diff --git a/resources/styles/book-content/hs-physics/grasp-check.less b/tutor/resources/styles/book-content/hs-physics/grasp-check.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/grasp-check.less
rename to tutor/resources/styles/book-content/hs-physics/grasp-check.less
diff --git a/resources/styles/book-content/hs-physics/index.less b/tutor/resources/styles/book-content/hs-physics/index.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/index.less
rename to tutor/resources/styles/book-content/hs-physics/index.less
diff --git a/resources/styles/book-content/hs-physics/interactive.less b/tutor/resources/styles/book-content/hs-physics/interactive.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/interactive.less
rename to tutor/resources/styles/book-content/hs-physics/interactive.less
diff --git a/resources/styles/book-content/hs-physics/links-to-physics.less b/tutor/resources/styles/book-content/hs-physics/links-to-physics.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/links-to-physics.less
rename to tutor/resources/styles/book-content/hs-physics/links-to-physics.less
diff --git a/resources/styles/book-content/hs-physics/variables.less b/tutor/resources/styles/book-content/hs-physics/variables.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/variables.less
rename to tutor/resources/styles/book-content/hs-physics/variables.less
diff --git a/resources/styles/book-content/hs-physics/virtual-physics.less b/tutor/resources/styles/book-content/hs-physics/virtual-physics.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/virtual-physics.less
rename to tutor/resources/styles/book-content/hs-physics/virtual-physics.less
diff --git a/resources/styles/book-content/hs-physics/watch-physics.less b/tutor/resources/styles/book-content/hs-physics/watch-physics.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/watch-physics.less
rename to tutor/resources/styles/book-content/hs-physics/watch-physics.less
diff --git a/resources/styles/book-content/hs-physics/work-in-physics.less b/tutor/resources/styles/book-content/hs-physics/work-in-physics.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/work-in-physics.less
rename to tutor/resources/styles/book-content/hs-physics/work-in-physics.less
diff --git a/resources/styles/book-content/hs-physics/worked-examples.less b/tutor/resources/styles/book-content/hs-physics/worked-examples.less
similarity index 100%
rename from resources/styles/book-content/hs-physics/worked-examples.less
rename to tutor/resources/styles/book-content/hs-physics/worked-examples.less
diff --git a/resources/styles/book-content/index.less b/tutor/resources/styles/book-content/index.less
similarity index 100%
rename from resources/styles/book-content/index.less
rename to tutor/resources/styles/book-content/index.less
diff --git a/resources/styles/book-content/interactive.less b/tutor/resources/styles/book-content/interactive.less
similarity index 100%
rename from resources/styles/book-content/interactive.less
rename to tutor/resources/styles/book-content/interactive.less
diff --git a/resources/styles/book-content/learning-objectives.less b/tutor/resources/styles/book-content/learning-objectives.less
similarity index 100%
rename from resources/styles/book-content/learning-objectives.less
rename to tutor/resources/styles/book-content/learning-objectives.less
diff --git a/resources/styles/book-content/link-to-learning.less b/tutor/resources/styles/book-content/link-to-learning.less
similarity index 100%
rename from resources/styles/book-content/link-to-learning.less
rename to tutor/resources/styles/book-content/link-to-learning.less
diff --git a/resources/styles/book-content/mixins.less b/tutor/resources/styles/book-content/mixins.less
similarity index 100%
rename from resources/styles/book-content/mixins.less
rename to tutor/resources/styles/book-content/mixins.less
diff --git a/resources/styles/book-content/note.less b/tutor/resources/styles/book-content/note.less
similarity index 100%
rename from resources/styles/book-content/note.less
rename to tutor/resources/styles/book-content/note.less
diff --git a/resources/styles/book-content/os-teacher.less b/tutor/resources/styles/book-content/os-teacher.less
similarity index 100%
rename from resources/styles/book-content/os-teacher.less
rename to tutor/resources/styles/book-content/os-teacher.less
diff --git a/resources/styles/book-content/questions.less b/tutor/resources/styles/book-content/questions.less
similarity index 100%
rename from resources/styles/book-content/questions.less
rename to tutor/resources/styles/book-content/questions.less
diff --git a/resources/styles/book-content/splash-image.less b/tutor/resources/styles/book-content/splash-image.less
similarity index 100%
rename from resources/styles/book-content/splash-image.less
rename to tutor/resources/styles/book-content/splash-image.less
diff --git a/resources/styles/book-content/target.less b/tutor/resources/styles/book-content/target.less
similarity index 100%
rename from resources/styles/book-content/target.less
rename to tutor/resources/styles/book-content/target.less
diff --git a/resources/styles/book-content/theming-mixins.less b/tutor/resources/styles/book-content/theming-mixins.less
similarity index 100%
rename from resources/styles/book-content/theming-mixins.less
rename to tutor/resources/styles/book-content/theming-mixins.less
diff --git a/resources/styles/book-content/typography.less b/tutor/resources/styles/book-content/typography.less
similarity index 100%
rename from resources/styles/book-content/typography.less
rename to tutor/resources/styles/book-content/typography.less
diff --git a/resources/styles/book-content/variables.less b/tutor/resources/styles/book-content/variables.less
similarity index 100%
rename from resources/styles/book-content/variables.less
rename to tutor/resources/styles/book-content/variables.less
diff --git a/resources/styles/components/confirm-leave-mixin.less b/tutor/resources/styles/components/app.less
similarity index 100%
rename from resources/styles/components/confirm-leave-mixin.less
rename to tutor/resources/styles/components/app.less
diff --git a/resources/styles/components/assignment-links.less b/tutor/resources/styles/components/assignment-links.less
similarity index 100%
rename from resources/styles/components/assignment-links.less
rename to tutor/resources/styles/components/assignment-links.less
diff --git a/resources/styles/components/cc-dashboard/help.less b/tutor/resources/styles/components/cc-dashboard/help.less
similarity index 100%
rename from resources/styles/components/cc-dashboard/help.less
rename to tutor/resources/styles/components/cc-dashboard/help.less
diff --git a/resources/styles/components/cc-dashboard/index.less b/tutor/resources/styles/components/cc-dashboard/index.less
similarity index 100%
rename from resources/styles/components/cc-dashboard/index.less
rename to tutor/resources/styles/components/cc-dashboard/index.less
diff --git a/resources/styles/components/cc-student-redirect.less b/tutor/resources/styles/components/cc-student-redirect.less
similarity index 100%
rename from resources/styles/components/cc-student-redirect.less
rename to tutor/resources/styles/components/cc-student-redirect.less
diff --git a/resources/styles/components/dialog.less b/tutor/resources/styles/components/confirm-leave-mixin.less
similarity index 100%
rename from resources/styles/components/dialog.less
rename to tutor/resources/styles/components/confirm-leave-mixin.less
diff --git a/resources/styles/components/course-calendar/add.less b/tutor/resources/styles/components/course-calendar/add.less
similarity index 100%
rename from resources/styles/components/course-calendar/add.less
rename to tutor/resources/styles/components/course-calendar/add.less
diff --git a/resources/styles/components/course-calendar/header.less b/tutor/resources/styles/components/course-calendar/header.less
similarity index 100%
rename from resources/styles/components/course-calendar/header.less
rename to tutor/resources/styles/components/course-calendar/header.less
diff --git a/resources/styles/components/course-calendar/index.less b/tutor/resources/styles/components/course-calendar/index.less
similarity index 100%
rename from resources/styles/components/course-calendar/index.less
rename to tutor/resources/styles/components/course-calendar/index.less
diff --git a/resources/styles/components/course-calendar/month.less b/tutor/resources/styles/components/course-calendar/month.less
similarity index 100%
rename from resources/styles/components/course-calendar/month.less
rename to tutor/resources/styles/components/course-calendar/month.less
diff --git a/resources/styles/components/course-calendar/plan-details.less b/tutor/resources/styles/components/course-calendar/plan-details.less
similarity index 100%
rename from resources/styles/components/course-calendar/plan-details.less
rename to tutor/resources/styles/components/course-calendar/plan-details.less
diff --git a/resources/styles/components/course-calendar/plan.less b/tutor/resources/styles/components/course-calendar/plan.less
similarity index 100%
rename from resources/styles/components/course-calendar/plan.less
rename to tutor/resources/styles/components/course-calendar/plan.less
diff --git a/resources/styles/components/course-calendar/plans-by-week.less b/tutor/resources/styles/components/course-calendar/plans-by-week.less
similarity index 100%
rename from resources/styles/components/course-calendar/plans-by-week.less
rename to tutor/resources/styles/components/course-calendar/plans-by-week.less
diff --git a/resources/styles/components/course-listings.less b/tutor/resources/styles/components/course-listings.less
similarity index 100%
rename from resources/styles/components/course-listings.less
rename to tutor/resources/styles/components/course-listings.less
diff --git a/resources/styles/components/course-settings.less b/tutor/resources/styles/components/course-settings.less
similarity index 100%
rename from resources/styles/components/course-settings.less
rename to tutor/resources/styles/components/course-settings.less
diff --git a/resources/styles/components/index.less b/tutor/resources/styles/components/dialog.less
similarity index 100%
rename from resources/styles/components/index.less
rename to tutor/resources/styles/components/dialog.less
diff --git a/resources/styles/components/exercise-preview.less b/tutor/resources/styles/components/exercise-preview.less
similarity index 100%
rename from resources/styles/components/exercise-preview.less
rename to tutor/resources/styles/components/exercise-preview.less
diff --git a/resources/styles/components/exercises.less b/tutor/resources/styles/components/exercises.less
similarity index 100%
rename from resources/styles/components/exercises.less
rename to tutor/resources/styles/components/exercises.less
diff --git a/resources/styles/components/html.less b/tutor/resources/styles/components/html.less
similarity index 100%
rename from resources/styles/components/html.less
rename to tutor/resources/styles/components/html.less
diff --git a/resources/styles/components/icon.less b/tutor/resources/styles/components/icon.less
similarity index 100%
rename from resources/styles/components/icon.less
rename to tutor/resources/styles/components/icon.less
diff --git a/resources/styles/components/markdown.less b/tutor/resources/styles/components/index.less
similarity index 100%
rename from resources/styles/components/markdown.less
rename to tutor/resources/styles/components/index.less
diff --git a/resources/styles/components/practice-button.less b/tutor/resources/styles/components/markdown.less
similarity index 100%
rename from resources/styles/components/practice-button.less
rename to tutor/resources/styles/components/markdown.less
diff --git a/resources/styles/components/media-preview.less b/tutor/resources/styles/components/media-preview.less
similarity index 100%
rename from resources/styles/components/media-preview.less
rename to tutor/resources/styles/components/media-preview.less
diff --git a/resources/styles/components/multi-select.less b/tutor/resources/styles/components/multi-select.less
similarity index 100%
rename from resources/styles/components/multi-select.less
rename to tutor/resources/styles/components/multi-select.less
diff --git a/resources/styles/components/performance-forecast/colors-mixin.less b/tutor/resources/styles/components/performance-forecast/colors-mixin.less
similarity index 100%
rename from resources/styles/components/performance-forecast/colors-mixin.less
rename to tutor/resources/styles/components/performance-forecast/colors-mixin.less
diff --git a/resources/styles/components/performance-forecast/guide-key-mixin.less b/tutor/resources/styles/components/performance-forecast/guide-key-mixin.less
similarity index 100%
rename from resources/styles/components/performance-forecast/guide-key-mixin.less
rename to tutor/resources/styles/components/performance-forecast/guide-key-mixin.less
diff --git a/resources/styles/components/performance-forecast/heading.less b/tutor/resources/styles/components/performance-forecast/heading.less
similarity index 100%
rename from resources/styles/components/performance-forecast/heading.less
rename to tutor/resources/styles/components/performance-forecast/heading.less
diff --git a/resources/styles/components/performance-forecast/index.less b/tutor/resources/styles/components/performance-forecast/index.less
similarity index 100%
rename from resources/styles/components/performance-forecast/index.less
rename to tutor/resources/styles/components/performance-forecast/index.less
diff --git a/resources/styles/components/performance-forecast/responsive.less b/tutor/resources/styles/components/performance-forecast/responsive.less
similarity index 100%
rename from resources/styles/components/performance-forecast/responsive.less
rename to tutor/resources/styles/components/performance-forecast/responsive.less
diff --git a/resources/styles/components/performance-forecast/section-mixin.less b/tutor/resources/styles/components/performance-forecast/section-mixin.less
similarity index 100%
rename from resources/styles/components/performance-forecast/section-mixin.less
rename to tutor/resources/styles/components/performance-forecast/section-mixin.less
diff --git a/resources/styles/components/performance-forecast/statistics.less b/tutor/resources/styles/components/performance-forecast/statistics.less
similarity index 100%
rename from resources/styles/components/performance-forecast/statistics.less
rename to tutor/resources/styles/components/performance-forecast/statistics.less
diff --git a/resources/styles/components/performance-forecast/teacher-student.less b/tutor/resources/styles/components/performance-forecast/teacher-student.less
similarity index 100%
rename from resources/styles/components/performance-forecast/teacher-student.less
rename to tutor/resources/styles/components/performance-forecast/teacher-student.less
diff --git a/resources/styles/components/performance-forecast/teacher.less b/tutor/resources/styles/components/performance-forecast/teacher.less
similarity index 100%
rename from resources/styles/components/performance-forecast/teacher.less
rename to tutor/resources/styles/components/performance-forecast/teacher.less
diff --git a/resources/styles/components/pinned-header-footer-card/sections.less b/tutor/resources/styles/components/pinned-header-footer-card/sections.less
similarity index 100%
rename from resources/styles/components/pinned-header-footer-card/sections.less
rename to tutor/resources/styles/components/pinned-header-footer-card/sections.less
diff --git a/resources/styles/components/task-plan/teacher-task-plans-listing.less b/tutor/resources/styles/components/practice-button.less
similarity index 100%
rename from resources/styles/components/task-plan/teacher-task-plans-listing.less
rename to tutor/resources/styles/components/practice-button.less
diff --git a/resources/styles/components/questions-dashboard.less b/tutor/resources/styles/components/questions-dashboard.less
similarity index 100%
rename from resources/styles/components/questions-dashboard.less
rename to tutor/resources/styles/components/questions-dashboard.less
diff --git a/resources/styles/components/reference-book/exercise.less b/tutor/resources/styles/components/reference-book/exercise.less
similarity index 100%
rename from resources/styles/components/reference-book/exercise.less
rename to tutor/resources/styles/components/reference-book/exercise.less
diff --git a/resources/styles/components/reference-book/index.less b/tutor/resources/styles/components/reference-book/index.less
similarity index 100%
rename from resources/styles/components/reference-book/index.less
rename to tutor/resources/styles/components/reference-book/index.less
diff --git a/resources/styles/components/reference-book/navbar.less b/tutor/resources/styles/components/reference-book/navbar.less
similarity index 100%
rename from resources/styles/components/reference-book/navbar.less
rename to tutor/resources/styles/components/reference-book/navbar.less
diff --git a/resources/styles/components/reference-book/page-navigation-controls.less b/tutor/resources/styles/components/reference-book/page-navigation-controls.less
similarity index 100%
rename from resources/styles/components/reference-book/page-navigation-controls.less
rename to tutor/resources/styles/components/reference-book/page-navigation-controls.less
diff --git a/resources/styles/components/reference-book/page.less b/tutor/resources/styles/components/reference-book/page.less
similarity index 100%
rename from resources/styles/components/reference-book/page.less
rename to tutor/resources/styles/components/reference-book/page.less
diff --git a/resources/styles/components/reference-book/slide-out-menu.less b/tutor/resources/styles/components/reference-book/slide-out-menu.less
similarity index 100%
rename from resources/styles/components/reference-book/slide-out-menu.less
rename to tutor/resources/styles/components/reference-book/slide-out-menu.less
diff --git a/resources/styles/components/reference-book/toc.less b/tutor/resources/styles/components/reference-book/toc.less
similarity index 100%
rename from resources/styles/components/reference-book/toc.less
rename to tutor/resources/styles/components/reference-book/toc.less
diff --git a/resources/styles/components/scores/export.less b/tutor/resources/styles/components/scores/export.less
similarity index 100%
rename from resources/styles/components/scores/export.less
rename to tutor/resources/styles/components/scores/export.less
diff --git a/resources/styles/components/scores/index.less b/tutor/resources/styles/components/scores/index.less
similarity index 100%
rename from resources/styles/components/scores/index.less
rename to tutor/resources/styles/components/scores/index.less
diff --git a/resources/styles/components/scores/table.less b/tutor/resources/styles/components/scores/table.less
similarity index 100%
rename from resources/styles/components/scores/table.less
rename to tutor/resources/styles/components/scores/table.less
diff --git a/resources/styles/components/sections-chooser.less b/tutor/resources/styles/components/sections-chooser.less
similarity index 100%
rename from resources/styles/components/sections-chooser.less
rename to tutor/resources/styles/components/sections-chooser.less
diff --git a/resources/styles/components/student-dashboard.less b/tutor/resources/styles/components/student-dashboard.less
similarity index 100%
rename from resources/styles/components/student-dashboard.less
rename to tutor/resources/styles/components/student-dashboard.less
diff --git a/resources/styles/components/student-dashboard/dashboard.less b/tutor/resources/styles/components/student-dashboard/dashboard.less
similarity index 100%
rename from resources/styles/components/student-dashboard/dashboard.less
rename to tutor/resources/styles/components/student-dashboard/dashboard.less
diff --git a/resources/styles/components/student-dashboard/dont-forget-panel.less b/tutor/resources/styles/components/student-dashboard/dont-forget-panel.less
similarity index 100%
rename from resources/styles/components/student-dashboard/dont-forget-panel.less
rename to tutor/resources/styles/components/student-dashboard/dont-forget-panel.less
diff --git a/resources/styles/components/student-dashboard/empty-panel.less b/tutor/resources/styles/components/student-dashboard/empty-panel.less
similarity index 100%
rename from resources/styles/components/student-dashboard/empty-panel.less
rename to tutor/resources/styles/components/student-dashboard/empty-panel.less
diff --git a/resources/styles/components/student-dashboard/panel.less b/tutor/resources/styles/components/student-dashboard/panel.less
similarity index 100%
rename from resources/styles/components/student-dashboard/panel.less
rename to tutor/resources/styles/components/student-dashboard/panel.less
diff --git a/resources/styles/components/student-dashboard/progress-guide.less b/tutor/resources/styles/components/student-dashboard/progress-guide.less
similarity index 100%
rename from resources/styles/components/student-dashboard/progress-guide.less
rename to tutor/resources/styles/components/student-dashboard/progress-guide.less
diff --git a/resources/styles/components/student-dashboard/task.less b/tutor/resources/styles/components/student-dashboard/task.less
similarity index 100%
rename from resources/styles/components/student-dashboard/task.less
rename to tutor/resources/styles/components/student-dashboard/task.less
diff --git a/resources/styles/components/task-plan/builder.less b/tutor/resources/styles/components/task-plan/builder.less
similarity index 100%
rename from resources/styles/components/task-plan/builder.less
rename to tutor/resources/styles/components/task-plan/builder.less
diff --git a/resources/styles/components/task-plan/chapter-section.less b/tutor/resources/styles/components/task-plan/chapter-section.less
similarity index 100%
rename from resources/styles/components/task-plan/chapter-section.less
rename to tutor/resources/styles/components/task-plan/chapter-section.less
diff --git a/resources/styles/components/task-plan/footer.less b/tutor/resources/styles/components/task-plan/footer.less
similarity index 100%
rename from resources/styles/components/task-plan/footer.less
rename to tutor/resources/styles/components/task-plan/footer.less
diff --git a/resources/styles/components/task-plan/guide.less b/tutor/resources/styles/components/task-plan/guide.less
similarity index 100%
rename from resources/styles/components/task-plan/guide.less
rename to tutor/resources/styles/components/task-plan/guide.less
diff --git a/resources/styles/components/task-plan/homework.less b/tutor/resources/styles/components/task-plan/homework.less
similarity index 100%
rename from resources/styles/components/task-plan/homework.less
rename to tutor/resources/styles/components/task-plan/homework.less
diff --git a/resources/styles/components/task-plan/homework/exercise-summary.less b/tutor/resources/styles/components/task-plan/homework/exercise-summary.less
similarity index 100%
rename from resources/styles/components/task-plan/homework/exercise-summary.less
rename to tutor/resources/styles/components/task-plan/homework/exercise-summary.less
diff --git a/resources/styles/components/task-plan/homework/exercises.less b/tutor/resources/styles/components/task-plan/homework/exercises.less
similarity index 100%
rename from resources/styles/components/task-plan/homework/exercises.less
rename to tutor/resources/styles/components/task-plan/homework/exercises.less
diff --git a/resources/styles/components/task-plan/index.less b/tutor/resources/styles/components/task-plan/index.less
similarity index 100%
rename from resources/styles/components/task-plan/index.less
rename to tutor/resources/styles/components/task-plan/index.less
diff --git a/resources/styles/components/task-plan/lms-info.less b/tutor/resources/styles/components/task-plan/lms-info.less
similarity index 100%
rename from resources/styles/components/task-plan/lms-info.less
rename to tutor/resources/styles/components/task-plan/lms-info.less
diff --git a/resources/styles/components/task-plan/reading-stats.less b/tutor/resources/styles/components/task-plan/reading-stats.less
similarity index 100%
rename from resources/styles/components/task-plan/reading-stats.less
rename to tutor/resources/styles/components/task-plan/reading-stats.less
diff --git a/resources/styles/components/task-plan/reading.less b/tutor/resources/styles/components/task-plan/reading.less
similarity index 100%
rename from resources/styles/components/task-plan/reading.less
rename to tutor/resources/styles/components/task-plan/reading.less
diff --git a/resources/styles/components/times.less b/tutor/resources/styles/components/task-plan/teacher-task-plans-listing.less
similarity index 100%
rename from resources/styles/components/times.less
rename to tutor/resources/styles/components/task-plan/teacher-task-plans-listing.less
diff --git a/resources/styles/components/task-step/all-steps.less b/tutor/resources/styles/components/task-step/all-steps.less
similarity index 95%
rename from resources/styles/components/task-step/all-steps.less
rename to tutor/resources/styles/components/task-step/all-steps.less
index cd8d7d5d90..b17240a3fc 100644
--- a/resources/styles/components/task-step/all-steps.less
+++ b/tutor/resources/styles/components/task-step/all-steps.less
@@ -1,4 +1,4 @@
-@import '~openstax-react-components/resources/styles/components/breadcrumbs/coach';
+@import '~shared/resources/styles/components/breadcrumbs/coach';
 @import '../../book-content/note';
 
 .task {
diff --git a/resources/styles/components/task-step/concept-coach-end.less b/tutor/resources/styles/components/task-step/concept-coach-end.less
similarity index 100%
rename from resources/styles/components/task-step/concept-coach-end.less
rename to tutor/resources/styles/components/task-step/concept-coach-end.less
diff --git a/resources/styles/components/task-step/ends.less b/tutor/resources/styles/components/task-step/ends.less
similarity index 100%
rename from resources/styles/components/task-step/ends.less
rename to tutor/resources/styles/components/task-step/ends.less
diff --git a/resources/styles/components/task-step/exercise.less b/tutor/resources/styles/components/task-step/exercise.less
similarity index 100%
rename from resources/styles/components/task-step/exercise.less
rename to tutor/resources/styles/components/task-step/exercise.less
diff --git a/resources/styles/components/task-step/external.less b/tutor/resources/styles/components/task-step/external.less
similarity index 100%
rename from resources/styles/components/task-step/external.less
rename to tutor/resources/styles/components/task-step/external.less
diff --git a/resources/styles/components/task-step/index.less b/tutor/resources/styles/components/task-step/index.less
similarity index 100%
rename from resources/styles/components/task-step/index.less
rename to tutor/resources/styles/components/task-step/index.less
diff --git a/resources/styles/components/task-step/reading.less b/tutor/resources/styles/components/task-step/reading.less
similarity index 100%
rename from resources/styles/components/task-step/reading.less
rename to tutor/resources/styles/components/task-step/reading.less
diff --git a/resources/styles/components/task-step/reading/completed.less b/tutor/resources/styles/components/task-step/reading/completed.less
similarity index 100%
rename from resources/styles/components/task-step/reading/completed.less
rename to tutor/resources/styles/components/task-step/reading/completed.less
diff --git a/resources/styles/components/task-step/reading/interactive.less b/tutor/resources/styles/components/task-step/reading/interactive.less
similarity index 100%
rename from resources/styles/components/task-step/reading/interactive.less
rename to tutor/resources/styles/components/task-step/reading/interactive.less
diff --git a/resources/styles/components/task-step/step-footer-mixin.less b/tutor/resources/styles/components/task-step/step-footer-mixin.less
similarity index 100%
rename from resources/styles/components/task-step/step-footer-mixin.less
rename to tutor/resources/styles/components/task-step/step-footer-mixin.less
diff --git a/resources/styles/components/task-step/video.less b/tutor/resources/styles/components/task-step/video.less
similarity index 100%
rename from resources/styles/components/task-step/video.less
rename to tutor/resources/styles/components/task-step/video.less
diff --git a/resources/styles/components/task-teacher-review/breadcrumbs.less b/tutor/resources/styles/components/task-teacher-review/breadcrumbs.less
similarity index 100%
rename from resources/styles/components/task-teacher-review/breadcrumbs.less
rename to tutor/resources/styles/components/task-teacher-review/breadcrumbs.less
diff --git a/resources/styles/components/task-teacher-review/index.less b/tutor/resources/styles/components/task-teacher-review/index.less
similarity index 100%
rename from resources/styles/components/task-teacher-review/index.less
rename to tutor/resources/styles/components/task-teacher-review/index.less
diff --git a/resources/styles/components/task-teacher-review/question.less b/tutor/resources/styles/components/task-teacher-review/question.less
similarity index 100%
rename from resources/styles/components/task-teacher-review/question.less
rename to tutor/resources/styles/components/task-teacher-review/question.less
diff --git a/resources/styles/components/task/details.less b/tutor/resources/styles/components/task/details.less
similarity index 100%
rename from resources/styles/components/task/details.less
rename to tutor/resources/styles/components/task/details.less
diff --git a/resources/styles/components/task/index.less b/tutor/resources/styles/components/task/index.less
similarity index 100%
rename from resources/styles/components/task/index.less
rename to tutor/resources/styles/components/task/index.less
diff --git a/resources/styles/components/task/milestones.less b/tutor/resources/styles/components/task/milestones.less
similarity index 100%
rename from resources/styles/components/task/milestones.less
rename to tutor/resources/styles/components/task/milestones.less
diff --git a/resources/styles/components/task/progress.less b/tutor/resources/styles/components/task/progress.less
similarity index 100%
rename from resources/styles/components/task/progress.less
rename to tutor/resources/styles/components/task/progress.less
diff --git a/test/components/task-plan/breadcrumbs.spec b/tutor/resources/styles/components/times.less
similarity index 100%
rename from test/components/task-plan/breadcrumbs.spec
rename to tutor/resources/styles/components/times.less
diff --git a/resources/styles/components/tri-state-checkbox.less b/tutor/resources/styles/components/tri-state-checkbox.less
similarity index 100%
rename from resources/styles/components/tri-state-checkbox.less
rename to tutor/resources/styles/components/tri-state-checkbox.less
diff --git a/resources/styles/components/tutor-dialog.less b/tutor/resources/styles/components/tutor-dialog.less
similarity index 100%
rename from resources/styles/components/tutor-dialog.less
rename to tutor/resources/styles/components/tutor-dialog.less
diff --git a/resources/styles/components/tutor-input.less b/tutor/resources/styles/components/tutor-input.less
similarity index 100%
rename from resources/styles/components/tutor-input.less
rename to tutor/resources/styles/components/tutor-input.less
diff --git a/resources/styles/global/buttons.less b/tutor/resources/styles/global/buttons.less
similarity index 100%
rename from resources/styles/global/buttons.less
rename to tutor/resources/styles/global/buttons.less
diff --git a/resources/styles/global/externals.less b/tutor/resources/styles/global/externals.less
similarity index 100%
rename from resources/styles/global/externals.less
rename to tutor/resources/styles/global/externals.less
diff --git a/resources/styles/global/forms.less b/tutor/resources/styles/global/forms.less
similarity index 100%
rename from resources/styles/global/forms.less
rename to tutor/resources/styles/global/forms.less
diff --git a/resources/styles/global/maths.less b/tutor/resources/styles/global/maths.less
similarity index 100%
rename from resources/styles/global/maths.less
rename to tutor/resources/styles/global/maths.less
diff --git a/resources/styles/global/menus.less b/tutor/resources/styles/global/menus.less
similarity index 100%
rename from resources/styles/global/menus.less
rename to tutor/resources/styles/global/menus.less
diff --git a/resources/styles/global/navbar.less b/tutor/resources/styles/global/navbar.less
similarity index 100%
rename from resources/styles/global/navbar.less
rename to tutor/resources/styles/global/navbar.less
diff --git a/resources/styles/global/notifications-bar.less b/tutor/resources/styles/global/notifications-bar.less
similarity index 100%
rename from resources/styles/global/notifications-bar.less
rename to tutor/resources/styles/global/notifications-bar.less
diff --git a/resources/styles/global/panel.less b/tutor/resources/styles/global/panel.less
similarity index 100%
rename from resources/styles/global/panel.less
rename to tutor/resources/styles/global/panel.less
diff --git a/resources/styles/global/popover.less b/tutor/resources/styles/global/popover.less
similarity index 100%
rename from resources/styles/global/popover.less
rename to tutor/resources/styles/global/popover.less
diff --git a/resources/styles/global/progress-bars.less b/tutor/resources/styles/global/progress-bars.less
similarity index 100%
rename from resources/styles/global/progress-bars.less
rename to tutor/resources/styles/global/progress-bars.less
diff --git a/resources/styles/global/scaffold.less b/tutor/resources/styles/global/scaffold.less
similarity index 100%
rename from resources/styles/global/scaffold.less
rename to tutor/resources/styles/global/scaffold.less
diff --git a/resources/styles/global/tooltip.less b/tutor/resources/styles/global/tooltip.less
similarity index 100%
rename from resources/styles/global/tooltip.less
rename to tutor/resources/styles/global/tooltip.less
diff --git a/resources/styles/global/tutor-booksplash-background.less b/tutor/resources/styles/global/tutor-booksplash-background.less
similarity index 100%
rename from resources/styles/global/tutor-booksplash-background.less
rename to tutor/resources/styles/global/tutor-booksplash-background.less
diff --git a/tutor/resources/styles/global/tutor-bootstrap.less b/tutor/resources/styles/global/tutor-bootstrap.less
new file mode 100644
index 0000000000..6e90708446
--- /dev/null
+++ b/tutor/resources/styles/global/tutor-bootstrap.less
@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "@{bootstrap-path}/variables";
+@import "@{bootstrap-path}/mixins";
+
+// Reset and dependencies
+@import "@{bootstrap-path}/normalize";
+@import "@{bootstrap-path}/print";
+// @import "@{bootstrap-path}/glyphicons";
+
+// Core CSS
+@import "@{bootstrap-path}/scaffolding";
+@import "@{bootstrap-path}/type";
+@import "@{bootstrap-path}/code";
+@import "@{bootstrap-path}/grid";
+@import "@{bootstrap-path}/tables";
+@import "@{bootstrap-path}/forms";
+@import "@{bootstrap-path}/buttons";
+
+// Components
+@import "@{bootstrap-path}/component-animations";
+@import "@{bootstrap-path}/dropdowns";
+@import "@{bootstrap-path}/button-groups";
+@import "@{bootstrap-path}/input-groups";
+@import "@{bootstrap-path}/navs";
+@import "@{bootstrap-path}/navbar";
+// @import "@{bootstrap-path}/breadcrumbs";
+// @import "@{bootstrap-path}/pagination";
+// @import "@{bootstrap-path}/pager";
+@import "@{bootstrap-path}/labels";
+@import "@{bootstrap-path}/badges";
+// @import "@{bootstrap-path}/jumbotron";
+@import "@{bootstrap-path}/thumbnails";
+@import "@{bootstrap-path}/alerts";
+@import "@{bootstrap-path}/progress-bars";
+@import "@{bootstrap-path}/media";
+@import "@{bootstrap-path}/list-group";
+@import "@{bootstrap-path}/panels";
+@import "@{bootstrap-path}/responsive-embed";
+@import "@{bootstrap-path}/wells";
+@import "@{bootstrap-path}/close";
+
+// Components w/ JavaScript
+@import "@{bootstrap-path}/modals";
+@import "@{bootstrap-path}/tooltip";
+@import "@{bootstrap-path}/popovers";
+// @import "@{bootstrap-path}/carousel";
+
+// Utility classes
+@import "@{bootstrap-path}/utilities";
+@import "@{bootstrap-path}/responsive-utilities";
\ No newline at end of file
diff --git a/resources/styles/global/tutor-material.less b/tutor/resources/styles/global/tutor-material.less
similarity index 100%
rename from resources/styles/global/tutor-material.less
rename to tutor/resources/styles/global/tutor-material.less
diff --git a/resources/styles/global/typography.less b/tutor/resources/styles/global/typography.less
similarity index 100%
rename from resources/styles/global/typography.less
rename to tutor/resources/styles/global/typography.less
diff --git a/resources/styles/mixins.less b/tutor/resources/styles/mixins.less
similarity index 100%
rename from resources/styles/mixins.less
rename to tutor/resources/styles/mixins.less
diff --git a/resources/styles/mixins/exercise-cards-column-layout.less b/tutor/resources/styles/mixins/exercise-cards-column-layout.less
similarity index 100%
rename from resources/styles/mixins/exercise-cards-column-layout.less
rename to tutor/resources/styles/mixins/exercise-cards-column-layout.less
diff --git a/resources/styles/mixins/for.less b/tutor/resources/styles/mixins/for.less
similarity index 100%
rename from resources/styles/mixins/for.less
rename to tutor/resources/styles/mixins/for.less
diff --git a/resources/styles/mixins/page-navigation-arrows.less b/tutor/resources/styles/mixins/page-navigation-arrows.less
similarity index 100%
rename from resources/styles/mixins/page-navigation-arrows.less
rename to tutor/resources/styles/mixins/page-navigation-arrows.less
diff --git a/resources/styles/mixins/tutor-modal.less b/tutor/resources/styles/mixins/tutor-modal.less
similarity index 100%
rename from resources/styles/mixins/tutor-modal.less
rename to tutor/resources/styles/mixins/tutor-modal.less
diff --git a/resources/styles/mixins/tutor-plans.less b/tutor/resources/styles/mixins/tutor-plans.less
similarity index 100%
rename from resources/styles/mixins/tutor-plans.less
rename to tutor/resources/styles/mixins/tutor-plans.less
diff --git a/resources/styles/qa.less b/tutor/resources/styles/qa.less
similarity index 100%
rename from resources/styles/qa.less
rename to tutor/resources/styles/qa.less
diff --git a/resources/styles/tutor.less b/tutor/resources/styles/tutor.less
similarity index 97%
rename from resources/styles/tutor.less
rename to tutor/resources/styles/tutor.less
index 6534882583..1e1dd6ff9f 100644
--- a/resources/styles/tutor.less
+++ b/tutor/resources/styles/tutor.less
@@ -10,7 +10,7 @@
 @import './variables/tutor-material';
 
 // shared openstax components
-@import '~openstax-react-components/resources/styles/main';
+@import '~shared/resources/styles/main';
 
 // App Global Styling
 @import './global/scaffold';
diff --git a/resources/styles/variables.less b/tutor/resources/styles/variables.less
similarity index 100%
rename from resources/styles/variables.less
rename to tutor/resources/styles/variables.less
diff --git a/resources/styles/variables/colors.less b/tutor/resources/styles/variables/colors.less
similarity index 100%
rename from resources/styles/variables/colors.less
rename to tutor/resources/styles/variables/colors.less
diff --git a/resources/styles/variables/paths.less b/tutor/resources/styles/variables/paths.less
similarity index 100%
rename from resources/styles/variables/paths.less
rename to tutor/resources/styles/variables/paths.less
diff --git a/resources/styles/variables/tutor-bootstrap.less b/tutor/resources/styles/variables/tutor-bootstrap.less
similarity index 100%
rename from resources/styles/variables/tutor-bootstrap.less
rename to tutor/resources/styles/variables/tutor-bootstrap.less
diff --git a/tutor/resources/styles/variables/tutor-material.less b/tutor/resources/styles/variables/tutor-material.less
new file mode 100644
index 0000000000..7ce2885700
--- /dev/null
+++ b/tutor/resources/styles/variables/tutor-material.less
@@ -0,0 +1,89 @@
+// // material icons path
+// @material-font-path: "../fonts";
+
+// // Material colors palette
+// @red: #F44336;
+// @pink: #E91E63;
+// @purple: #9C27B0;
+// @deeppurple: #673AB7;
+// @indigo: #3F51B5;
+// @blue: #4285f4;
+// @lightblue: #03A9F4;
+// @cyan: #00BCD4;
+// @teal: #009688;
+// @lightgreen: #8BC34A;
+// @lime: #CDDC39;
+// @lightyellow: #FFEB3B;
+// @orange: #FF9800;
+// @deeporange: #FF5722;
+// @grey: #9E9E9E;
+// @bluegrey: #607D8B;
+// @brown: #795548;
+// @lightgrey: #ECECEC;
+
+// Bootstrap shades
+@primary:         @tutor-primary;
+@success:         @tutor-success;
+@info:            @tutor-info;
+@warning:         @tutor-warning;
+@danger:          @tutor-danger;
+
+
+// Typography elements for Material
+@darkbg-text: @tutor-neutral-lightest;
+@lightbg-text: @tutor-neutral-darker;
+@icon-color: @tutor-neutral-dark;
+
+
+// Bootstrap variables
+// @btn-default: transparent;
+// @btn-default-text: @lightbg-text;
+
+// @btn-primary: @primary;
+// @btn-primary-text: @darkbg-text;
+
+// @btn-success: @success;
+// @btn-success-text: @darkbg-text;
+
+// @btn-info: @info;
+// @btn-info-text: @darkbg-text;
+
+// @btn-warning: @warning;
+// @btn-warning-text: @darkbg-text;
+
+// @btn-danger: @danger;
+// @btn-danger-text: @darkbg-text;
+
+// @input-unchecked: rgba(137, 137, 137, 0.3);
+// @input-checked: rgba(15, 157, 88, 0.3);
+
+// @radio-default: @lightbg-text;
+// @radio-primary: @primary;
+// @radio-success: @success;
+// @radio-info:    @info;
+// @radio-warning: @warning;
+// @radio-danger:  @danger;
+
+// @input-danger: @danger;
+// @input-default: @primary;
+// @input-warning: @warning;
+// @input-success: @success;
+// @input-info:    @info;
+
+// @alert-success: @success;
+// @alert-info: @info;
+// @alert-warning: @warning;
+// @alert-danger: @danger;
+
+// @progress-success: @success;
+// @progress-info: @info;
+// @progress-warning: @warning;
+// @progress-danger: @danger;
+
+// Card
+// @card-body-text: @lightbg-text;
+// @card-body-background: #fff;
+// @card-image-headline: #fff;
+
+// @text-disabled: #a8a8a8;
+// @background-disabled: #eaeaea;
\ No newline at end of file
diff --git a/scripts/lint-cjsx-files.sh b/tutor/scripts/lint-cjsx-files.sh
similarity index 100%
rename from scripts/lint-cjsx-files.sh
rename to tutor/scripts/lint-cjsx-files.sh
diff --git a/scripts/run-integration-mocha.js b/tutor/scripts/run-integration-mocha.js
similarity index 100%
rename from scripts/run-integration-mocha.js
rename to tutor/scripts/run-integration-mocha.js
diff --git a/scripts/run-test-integration-inner.sh b/tutor/scripts/run-test-integration-inner.sh
similarity index 100%
rename from scripts/run-test-integration-inner.sh
rename to tutor/scripts/run-test-integration-inner.sh
diff --git a/scripts/run-test-integration.sh b/tutor/scripts/run-test-integration.sh
similarity index 100%
rename from scripts/run-test-integration.sh
rename to tutor/scripts/run-test-integration.sh
diff --git a/scripts/validate-package-json.js b/tutor/scripts/validate-package-json.js
similarity index 100%
rename from scripts/validate-package-json.js
rename to tutor/scripts/validate-package-json.js
diff --git a/src/README.md b/tutor/src/README.md
similarity index 100%
rename from src/README.md
rename to tutor/src/README.md
diff --git a/src/api.coffee b/tutor/src/api.coffee
similarity index 100%
rename from src/api.coffee
rename to tutor/src/api.coffee
diff --git a/src/components/app.cjsx b/tutor/src/components/app.cjsx
similarity index 96%
rename from src/components/app.cjsx
rename to tutor/src/components/app.cjsx
index 382bce226b..d769cc9327 100644
--- a/src/components/app.cjsx
+++ b/tutor/src/components/app.cjsx
@@ -5,7 +5,7 @@ classnames = require 'classnames'
 
 Navbar = require './navbar'
 Analytics = require '../helpers/analytics'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 {CourseStore} = require '../flux/course'
 {TransitionActions, TransitionStore} = require '../flux/transition'
 
diff --git a/src/components/assignment-links.cjsx b/tutor/src/components/assignment-links.cjsx
similarity index 100%
rename from src/components/assignment-links.cjsx
rename to tutor/src/components/assignment-links.cjsx
diff --git a/src/components/bind-store-mixin.cjsx b/tutor/src/components/bind-store-mixin.cjsx
similarity index 100%
rename from src/components/bind-store-mixin.cjsx
rename to tutor/src/components/bind-store-mixin.cjsx
diff --git a/src/components/bind-stores-mixin.coffee b/tutor/src/components/bind-stores-mixin.coffee
similarity index 100%
rename from src/components/bind-stores-mixin.coffee
rename to tutor/src/components/bind-stores-mixin.coffee
diff --git a/src/components/book-content-mixin.cjsx b/tutor/src/components/book-content-mixin.cjsx
similarity index 100%
rename from src/components/book-content-mixin.cjsx
rename to tutor/src/components/book-content-mixin.cjsx
diff --git a/src/components/breadcrumb/index.cjsx b/tutor/src/components/breadcrumb/index.cjsx
similarity index 98%
rename from src/components/breadcrumb/index.cjsx
rename to tutor/src/components/breadcrumb/index.cjsx
index c7eb32211d..e2d546b537 100644
--- a/src/components/breadcrumb/index.cjsx
+++ b/tutor/src/components/breadcrumb/index.cjsx
@@ -1,5 +1,5 @@
 React = require 'react'
-{Breadcrumb} = require 'openstax-react-components'
+{Breadcrumb} = require 'shared'
 
 {StepPanel} = require '../../helpers/policies'
 
diff --git a/src/components/buttons/back-button.cjsx b/tutor/src/components/buttons/back-button.cjsx
similarity index 100%
rename from src/components/buttons/back-button.cjsx
rename to tutor/src/components/buttons/back-button.cjsx
diff --git a/src/components/buttons/browse-the-book.cjsx b/tutor/src/components/buttons/browse-the-book.cjsx
similarity index 100%
rename from src/components/buttons/browse-the-book.cjsx
rename to tutor/src/components/buttons/browse-the-book.cjsx
diff --git a/src/components/buttons/practice-button.cjsx b/tutor/src/components/buttons/practice-button.cjsx
similarity index 100%
rename from src/components/buttons/practice-button.cjsx
rename to tutor/src/components/buttons/practice-button.cjsx
diff --git a/src/components/cc-dashboard/chapter.cjsx b/tutor/src/components/cc-dashboard/chapter.cjsx
similarity index 100%
rename from src/components/cc-dashboard/chapter.cjsx
rename to tutor/src/components/cc-dashboard/chapter.cjsx
diff --git a/src/components/cc-dashboard/dashboard.cjsx b/tutor/src/components/cc-dashboard/dashboard.cjsx
similarity index 100%
rename from src/components/cc-dashboard/dashboard.cjsx
rename to tutor/src/components/cc-dashboard/dashboard.cjsx
diff --git a/src/components/cc-dashboard/desktop-image.cjsx b/tutor/src/components/cc-dashboard/desktop-image.cjsx
similarity index 99%
rename from src/components/cc-dashboard/desktop-image.cjsx
rename to tutor/src/components/cc-dashboard/desktop-image.cjsx
index 186034ab36..693abb8dbb 100644
--- a/src/components/cc-dashboard/desktop-image.cjsx
+++ b/tutor/src/components/cc-dashboard/desktop-image.cjsx
@@ -26,7 +26,7 @@ DesktopImage = React.createClass
       <path d="M14.083,40.082l0,25.127l267.028,0l40.149,-25.127l-307.177,0Z"
         className='banner' />
       <text className='course-name' x="55.571px" y="59px">
-          {course.name}
+          {course?.name}
       </text>
       <path d="M14.083,220.594c0,6.48 5.253,11.736 11.736,11.736l321.563,0c6.481,0 11.736,-5.256 11.736,-11.736l0,-155.385l-345.035,0l0,155.385Z" style={fill:'#fff' } />
       <path d="M347.382,16.389l-321.563,0c-6.483,0 -11.736,5.254 -11.736,11.736l0,11.957l345.036,0l0,-11.957c0,-6.482 -5.255,-11.736 -11.737,-11.736Z" style={fill:'#fff'} />
diff --git a/src/components/cc-dashboard/empty-period.cjsx b/tutor/src/components/cc-dashboard/empty-period.cjsx
similarity index 100%
rename from src/components/cc-dashboard/empty-period.cjsx
rename to tutor/src/components/cc-dashboard/empty-period.cjsx
diff --git a/src/components/cc-dashboard/help.cjsx b/tutor/src/components/cc-dashboard/help.cjsx
similarity index 100%
rename from src/components/cc-dashboard/help.cjsx
rename to tutor/src/components/cc-dashboard/help.cjsx
diff --git a/src/components/cc-dashboard/index.cjsx b/tutor/src/components/cc-dashboard/index.cjsx
similarity index 100%
rename from src/components/cc-dashboard/index.cjsx
rename to tutor/src/components/cc-dashboard/index.cjsx
diff --git a/src/components/cc-dashboard/section-performance.cjsx b/tutor/src/components/cc-dashboard/section-performance.cjsx
similarity index 100%
rename from src/components/cc-dashboard/section-performance.cjsx
rename to tutor/src/components/cc-dashboard/section-performance.cjsx
diff --git a/src/components/cc-dashboard/section-progress.cjsx b/tutor/src/components/cc-dashboard/section-progress.cjsx
similarity index 100%
rename from src/components/cc-dashboard/section-progress.cjsx
rename to tutor/src/components/cc-dashboard/section-progress.cjsx
diff --git a/src/components/cc-dashboard/section.cjsx b/tutor/src/components/cc-dashboard/section.cjsx
similarity index 100%
rename from src/components/cc-dashboard/section.cjsx
rename to tutor/src/components/cc-dashboard/section.cjsx
diff --git a/src/components/cc-student-redirect.cjsx b/tutor/src/components/cc-student-redirect.cjsx
similarity index 100%
rename from src/components/cc-student-redirect.cjsx
rename to tutor/src/components/cc-student-redirect.cjsx
diff --git a/src/components/countdown-redirect.cjsx b/tutor/src/components/countdown-redirect.cjsx
similarity index 100%
rename from src/components/countdown-redirect.cjsx
rename to tutor/src/components/countdown-redirect.cjsx
diff --git a/src/components/course-calendar/add-menu-mixin.cjsx b/tutor/src/components/course-calendar/add-menu-mixin.cjsx
similarity index 100%
rename from src/components/course-calendar/add-menu-mixin.cjsx
rename to tutor/src/components/course-calendar/add-menu-mixin.cjsx
diff --git a/src/components/course-calendar/add.cjsx b/tutor/src/components/course-calendar/add.cjsx
similarity index 100%
rename from src/components/course-calendar/add.cjsx
rename to tutor/src/components/course-calendar/add.cjsx
diff --git a/src/components/course-calendar/duration.cjsx b/tutor/src/components/course-calendar/duration.cjsx
similarity index 100%
rename from src/components/course-calendar/duration.cjsx
rename to tutor/src/components/course-calendar/duration.cjsx
diff --git a/src/components/course-calendar/header.cjsx b/tutor/src/components/course-calendar/header.cjsx
similarity index 100%
rename from src/components/course-calendar/header.cjsx
rename to tutor/src/components/course-calendar/header.cjsx
diff --git a/src/components/course-calendar/index.cjsx b/tutor/src/components/course-calendar/index.cjsx
similarity index 100%
rename from src/components/course-calendar/index.cjsx
rename to tutor/src/components/course-calendar/index.cjsx
diff --git a/src/components/course-calendar/list.cjsx b/tutor/src/components/course-calendar/list.cjsx
similarity index 100%
rename from src/components/course-calendar/list.cjsx
rename to tutor/src/components/course-calendar/list.cjsx
diff --git a/src/components/course-calendar/month.cjsx b/tutor/src/components/course-calendar/month.cjsx
similarity index 100%
rename from src/components/course-calendar/month.cjsx
rename to tutor/src/components/course-calendar/month.cjsx
diff --git a/src/components/course-calendar/plan-details.cjsx b/tutor/src/components/course-calendar/plan-details.cjsx
similarity index 100%
rename from src/components/course-calendar/plan-details.cjsx
rename to tutor/src/components/course-calendar/plan-details.cjsx
diff --git a/src/components/course-calendar/plan-display.cjsx b/tutor/src/components/course-calendar/plan-display.cjsx
similarity index 100%
rename from src/components/course-calendar/plan-display.cjsx
rename to tutor/src/components/course-calendar/plan-display.cjsx
diff --git a/src/components/course-calendar/plan-label.cjsx b/tutor/src/components/course-calendar/plan-label.cjsx
similarity index 100%
rename from src/components/course-calendar/plan-label.cjsx
rename to tutor/src/components/course-calendar/plan-label.cjsx
diff --git a/src/components/course-calendar/plan.cjsx b/tutor/src/components/course-calendar/plan.cjsx
similarity index 100%
rename from src/components/course-calendar/plan.cjsx
rename to tutor/src/components/course-calendar/plan.cjsx
diff --git a/src/components/course-data-mixin.cjsx b/tutor/src/components/course-data-mixin.cjsx
similarity index 100%
rename from src/components/course-data-mixin.cjsx
rename to tutor/src/components/course-data-mixin.cjsx
diff --git a/src/components/course-grouping-label.cjsx b/tutor/src/components/course-grouping-label.cjsx
similarity index 100%
rename from src/components/course-grouping-label.cjsx
rename to tutor/src/components/course-grouping-label.cjsx
diff --git a/src/components/course-listing.cjsx b/tutor/src/components/course-listing.cjsx
similarity index 98%
rename from src/components/course-listing.cjsx
rename to tutor/src/components/course-listing.cjsx
index 58d40682c5..97c8f2fc7e 100644
--- a/src/components/course-listing.cjsx
+++ b/tutor/src/components/course-listing.cjsx
@@ -6,7 +6,7 @@ WindowHelpers = require '../helpers/window'
 
 {CourseListingActions, CourseListingStore} = require '../flux/course-listing'
 {CourseStore} = require '../flux/course'
-{RefreshButton} = require 'openstax-react-components'
+{RefreshButton} = require 'shared'
 EmptyCourses    = require './course-listing/empty'
 CourseDataMixin = require './course-data-mixin'
 
diff --git a/src/components/course-listing/empty.cjsx b/tutor/src/components/course-listing/empty.cjsx
similarity index 100%
rename from src/components/course-listing/empty.cjsx
rename to tutor/src/components/course-listing/empty.cjsx
diff --git a/src/components/course-periods-nav.cjsx b/tutor/src/components/course-periods-nav.cjsx
similarity index 100%
rename from src/components/course-periods-nav.cjsx
rename to tutor/src/components/course-periods-nav.cjsx
diff --git a/src/components/course-settings/add-period.cjsx b/tutor/src/components/course-settings/add-period.cjsx
similarity index 98%
rename from src/components/course-settings/add-period.cjsx
rename to tutor/src/components/course-settings/add-period.cjsx
index 4b8c83ccbc..cf0801ca32 100644
--- a/src/components/course-settings/add-period.cjsx
+++ b/tutor/src/components/course-settings/add-period.cjsx
@@ -3,7 +3,7 @@ BS = require 'react-bootstrap'
 _ = require 'underscore'
 {PeriodActions, PeriodStore} = require '../../flux/period'
 {TutorInput} = require '../tutor-input'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 CourseGroupingLabel = require '../course-grouping-label'
 
diff --git a/src/components/course-settings/add-student.cjsx b/tutor/src/components/course-settings/add-student.cjsx
similarity index 100%
rename from src/components/course-settings/add-student.cjsx
rename to tutor/src/components/course-settings/add-student.cjsx
diff --git a/src/components/course-settings/archive-period.cjsx b/tutor/src/components/course-settings/archive-period.cjsx
similarity index 97%
rename from src/components/course-settings/archive-period.cjsx
rename to tutor/src/components/course-settings/archive-period.cjsx
index fa6fe07504..27103bcafe 100644
--- a/src/components/course-settings/archive-period.cjsx
+++ b/tutor/src/components/course-settings/archive-period.cjsx
@@ -4,7 +4,7 @@ _ = require 'underscore'
 {PeriodActions, PeriodStore} = require '../../flux/period'
 {RosterActions, RosterStore} = require '../../flux/roster'
 {TutorInput} = require '../tutor-input'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 Icon = require '../icon'
 CourseGroupingLabel = require '../course-grouping-label'
diff --git a/src/components/course-settings/cc-enrollment-code.cjsx b/tutor/src/components/course-settings/cc-enrollment-code.cjsx
similarity index 100%
rename from src/components/course-settings/cc-enrollment-code.cjsx
rename to tutor/src/components/course-settings/cc-enrollment-code.cjsx
diff --git a/src/components/course-settings/change-period.cjsx b/tutor/src/components/course-settings/change-period.cjsx
similarity index 100%
rename from src/components/course-settings/change-period.cjsx
rename to tutor/src/components/course-settings/change-period.cjsx
diff --git a/src/components/course-settings/drop-student.cjsx b/tutor/src/components/course-settings/drop-student.cjsx
similarity index 100%
rename from src/components/course-settings/drop-student.cjsx
rename to tutor/src/components/course-settings/drop-student.cjsx
diff --git a/src/components/course-settings/dropped-roster.cjsx b/tutor/src/components/course-settings/dropped-roster.cjsx
similarity index 100%
rename from src/components/course-settings/dropped-roster.cjsx
rename to tutor/src/components/course-settings/dropped-roster.cjsx
diff --git a/src/components/course-settings/index.cjsx b/tutor/src/components/course-settings/index.cjsx
similarity index 100%
rename from src/components/course-settings/index.cjsx
rename to tutor/src/components/course-settings/index.cjsx
diff --git a/src/components/course-settings/period-roster.cjsx b/tutor/src/components/course-settings/period-roster.cjsx
similarity index 100%
rename from src/components/course-settings/period-roster.cjsx
rename to tutor/src/components/course-settings/period-roster.cjsx
diff --git a/src/components/course-settings/remove-teacher.cjsx b/tutor/src/components/course-settings/remove-teacher.cjsx
similarity index 97%
rename from src/components/course-settings/remove-teacher.cjsx
rename to tutor/src/components/course-settings/remove-teacher.cjsx
index e1d729b100..0a3a9429b1 100644
--- a/src/components/course-settings/remove-teacher.cjsx
+++ b/tutor/src/components/course-settings/remove-teacher.cjsx
@@ -6,7 +6,7 @@ BindStoreMixin = require '../bind-store-mixin'
 {RosterStore, RosterActions} = require '../../flux/roster'
 Icon = require '../icon'
 Name = require '../name'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 WARN_REMOVE_CURRENT = 'If you remove yourself from the course you will be redirected to the dashboard.'
 
diff --git a/src/components/course-settings/rename-course.cjsx b/tutor/src/components/course-settings/rename-course.cjsx
similarity index 98%
rename from src/components/course-settings/rename-course.cjsx
rename to tutor/src/components/course-settings/rename-course.cjsx
index 302624df84..9a82557a3a 100644
--- a/src/components/course-settings/rename-course.cjsx
+++ b/tutor/src/components/course-settings/rename-course.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 BS = require 'react-bootstrap'
 _ = require 'underscore'
 {CourseStore, CourseActions} = require '../../flux/course'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 {TutorInput} = require '../tutor-input'
 classnames = require 'classnames'
 
diff --git a/src/components/course-settings/rename-period.cjsx b/tutor/src/components/course-settings/rename-period.cjsx
similarity index 98%
rename from src/components/course-settings/rename-period.cjsx
rename to tutor/src/components/course-settings/rename-period.cjsx
index de7cc7a65c..bc80aeffda 100644
--- a/src/components/course-settings/rename-period.cjsx
+++ b/tutor/src/components/course-settings/rename-period.cjsx
@@ -3,7 +3,7 @@ BS = require 'react-bootstrap'
 _ = require 'underscore'
 {PeriodActions, PeriodStore} = require '../../flux/period'
 {TutorInput} = require '../tutor-input'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 BindStoreMixin = require '../bind-store-mixin'
 CourseGroupingLabel = require '../course-grouping-label'
diff --git a/src/components/course-settings/reset-password.cjsx b/tutor/src/components/course-settings/reset-password.cjsx
similarity index 100%
rename from src/components/course-settings/reset-password.cjsx
rename to tutor/src/components/course-settings/reset-password.cjsx
diff --git a/src/components/course-settings/roster.cjsx b/tutor/src/components/course-settings/roster.cjsx
similarity index 100%
rename from src/components/course-settings/roster.cjsx
rename to tutor/src/components/course-settings/roster.cjsx
diff --git a/src/components/course-settings/set-timezone.cjsx b/tutor/src/components/course-settings/set-timezone.cjsx
similarity index 98%
rename from src/components/course-settings/set-timezone.cjsx
rename to tutor/src/components/course-settings/set-timezone.cjsx
index a93e24cc22..63b9ec2dcb 100644
--- a/src/components/course-settings/set-timezone.cjsx
+++ b/tutor/src/components/course-settings/set-timezone.cjsx
@@ -4,7 +4,7 @@ moment = require 'moment-timezone'
 
 _ = require 'underscore'
 {CourseStore, CourseActions} = require '../../flux/course'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 {TutorRadio} = require '../tutor-input'
 classnames = require 'classnames'
 
diff --git a/src/components/course-settings/settings.cjsx b/tutor/src/components/course-settings/settings.cjsx
similarity index 100%
rename from src/components/course-settings/settings.cjsx
rename to tutor/src/components/course-settings/settings.cjsx
diff --git a/src/components/course-settings/student-enrollment-link.cjsx b/tutor/src/components/course-settings/student-enrollment-link.cjsx
similarity index 100%
rename from src/components/course-settings/student-enrollment-link.cjsx
rename to tutor/src/components/course-settings/student-enrollment-link.cjsx
diff --git a/src/components/course-settings/student-enrollment.cjsx b/tutor/src/components/course-settings/student-enrollment.cjsx
similarity index 100%
rename from src/components/course-settings/student-enrollment.cjsx
rename to tutor/src/components/course-settings/student-enrollment.cjsx
diff --git a/src/components/course-settings/teacher-roster.cjsx b/tutor/src/components/course-settings/teacher-roster.cjsx
similarity index 100%
rename from src/components/course-settings/teacher-roster.cjsx
rename to tutor/src/components/course-settings/teacher-roster.cjsx
diff --git a/src/components/course-settings/undrop-student.cjsx b/tutor/src/components/course-settings/undrop-student.cjsx
similarity index 100%
rename from src/components/course-settings/undrop-student.cjsx
rename to tutor/src/components/course-settings/undrop-student.cjsx
diff --git a/src/components/course-settings/view-archived-periods.cjsx b/tutor/src/components/course-settings/view-archived-periods.cjsx
similarity index 96%
rename from src/components/course-settings/view-archived-periods.cjsx
rename to tutor/src/components/course-settings/view-archived-periods.cjsx
index 8011e83f1c..8e9832f9e3 100644
--- a/src/components/course-settings/view-archived-periods.cjsx
+++ b/tutor/src/components/course-settings/view-archived-periods.cjsx
@@ -3,7 +3,7 @@ BS = require 'react-bootstrap'
 _ = require 'underscore'
 {PeriodActions, PeriodStore} = require '../../flux/period'
 {TutorInput}  = require '../tutor-input'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 {CourseStore} = require '../../flux/course'
 Icon = require '../icon'
 PH   = require '../../helpers/period'
@@ -11,7 +11,7 @@ Time = require '../time'
 BindStoreMixin      = require '../bind-store-mixin'
 CourseGroupingLabel = require '../course-grouping-label'
 
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 ViewArchivedPeriods = React.createClass
 
diff --git a/src/components/dialog.cjsx b/tutor/src/components/dialog.cjsx
similarity index 96%
rename from src/components/dialog.cjsx
rename to tutor/src/components/dialog.cjsx
index 7f3ba20fcf..0310d98901 100644
--- a/src/components/dialog.cjsx
+++ b/tutor/src/components/dialog.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 BS = require 'react-bootstrap'
 TutorDialog = require './tutor-dialog'
 
-{CloseButton} = require 'openstax-react-components'
+{CloseButton} = require 'shared'
 
 ###
 <Dialog
diff --git a/src/components/exercises/cards.cjsx b/tutor/src/components/exercises/cards.cjsx
similarity index 98%
rename from src/components/exercises/cards.cjsx
rename to tutor/src/components/exercises/cards.cjsx
index 3a3b14c878..f4185c8157 100644
--- a/src/components/exercises/cards.cjsx
+++ b/tutor/src/components/exercises/cards.cjsx
@@ -8,7 +8,7 @@ Dialog = require '../tutor-dialog'
 
 ExerciseHelpers = require '../../helpers/exercise'
 
-{ScrollToMixin} = require 'openstax-react-components'
+{ScrollToMixin} = require 'shared'
 
 ChapterSection = require '../task-plan/chapter-section'
 Icon = require '../icon'
diff --git a/src/components/exercises/details.cjsx b/tutor/src/components/exercises/details.cjsx
similarity index 98%
rename from src/components/exercises/details.cjsx
rename to tutor/src/components/exercises/details.cjsx
index c9375e23e3..f76dfa1a8c 100644
--- a/src/components/exercises/details.cjsx
+++ b/tutor/src/components/exercises/details.cjsx
@@ -3,7 +3,7 @@ BS        = require 'react-bootstrap'
 keymaster = require 'keymaster'
 
 {ExerciseStore}   = require '../../flux/exercise'
-{ExercisePreview, ScrollToMixin} = require 'openstax-react-components'
+{ExercisePreview, ScrollToMixin} = require 'shared'
 NoExercisesFound  = require './no-exercises-found'
 Icon              = require '../icon'
 
diff --git a/src/components/exercises/no-exercises-found.cjsx b/tutor/src/components/exercises/no-exercises-found.cjsx
similarity index 100%
rename from src/components/exercises/no-exercises-found.cjsx
rename to tutor/src/components/exercises/no-exercises-found.cjsx
diff --git a/src/components/exercises/preview.cjsx b/tutor/src/components/exercises/preview.cjsx
similarity index 95%
rename from src/components/exercises/preview.cjsx
rename to tutor/src/components/exercises/preview.cjsx
index bdc7393ee1..05e2952ab9 100644
--- a/src/components/exercises/preview.cjsx
+++ b/tutor/src/components/exercises/preview.cjsx
@@ -1,6 +1,6 @@
 React = require 'react'
 
-{ExercisePreview} = require 'openstax-react-components'
+{ExercisePreview} = require 'shared'
 BindStoreMixin = require '../bind-store-mixin'
 
 # Wraps the ExercisePreview component so it will re-render in
diff --git a/src/components/exercises/sectionizer.cjsx b/tutor/src/components/exercises/sectionizer.cjsx
similarity index 97%
rename from src/components/exercises/sectionizer.cjsx
rename to tutor/src/components/exercises/sectionizer.cjsx
index 03836fbfe7..f6e47288ab 100644
--- a/src/components/exercises/sectionizer.cjsx
+++ b/tutor/src/components/exercises/sectionizer.cjsx
@@ -4,7 +4,7 @@ cn = require 'classnames'
 classnames = require 'classnames'
 Pagination = require('ultimate-pagination')
 
-{ResizeListenerMixin, ScrollToMixin} = require 'openstax-react-components'
+{ResizeListenerMixin, ScrollToMixin} = require 'shared'
 
 Sectionizer = React.createClass
 
diff --git a/src/components/icon.cjsx b/tutor/src/components/icon.cjsx
similarity index 100%
rename from src/components/icon.cjsx
rename to tutor/src/components/icon.cjsx
diff --git a/src/components/index.cjsx b/tutor/src/components/index.cjsx
similarity index 100%
rename from src/components/index.cjsx
rename to tutor/src/components/index.cjsx
diff --git a/src/components/late-icon.cjsx b/tutor/src/components/late-icon.cjsx
similarity index 100%
rename from src/components/late-icon.cjsx
rename to tutor/src/components/late-icon.cjsx
diff --git a/src/components/loadable-item.cjsx b/tutor/src/components/loadable-item.cjsx
similarity index 100%
rename from src/components/loadable-item.cjsx
rename to tutor/src/components/loadable-item.cjsx
diff --git a/src/components/loadable.cjsx b/tutor/src/components/loadable.cjsx
similarity index 96%
rename from src/components/loadable.cjsx
rename to tutor/src/components/loadable.cjsx
index f57df6119d..6136287c75 100644
--- a/src/components/loadable.cjsx
+++ b/tutor/src/components/loadable.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 BS = require 'react-bootstrap'
 
 BindStoreMixin = require './bind-store-mixin'
-{RefreshButton} = require 'openstax-react-components'
+{RefreshButton} = require 'shared'
 
 # This component is useful for viewing something that needs to be loaded.
 #
diff --git a/src/components/markdown.cjsx b/tutor/src/components/markdown.cjsx
similarity index 84%
rename from src/components/markdown.cjsx
rename to tutor/src/components/markdown.cjsx
index 54ece44b39..717fd5992c 100644
--- a/src/components/markdown.cjsx
+++ b/tutor/src/components/markdown.cjsx
@@ -1,6 +1,6 @@
 React = require 'react'
 Markdown = require 'markdown-it'
-{ArbitraryHtmlAndMath} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath} = require 'shared'
 _ = require 'underscore'
 
 md = new Markdown()
diff --git a/src/components/media-preview.cjsx b/tutor/src/components/media-preview.cjsx
similarity index 98%
rename from src/components/media-preview.cjsx
rename to tutor/src/components/media-preview.cjsx
index aca9083fa5..10707dc089 100644
--- a/src/components/media-preview.cjsx
+++ b/tutor/src/components/media-preview.cjsx
@@ -1,6 +1,6 @@
 React = require 'react'
 TutorPopover = require './tutor-popover'
-{ArbitraryHtmlAndMath} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath} = require 'shared'
 
 _ = require 'underscore'
 S = require '../helpers/string'
diff --git a/src/components/multi-select.cjsx b/tutor/src/components/multi-select.cjsx
similarity index 100%
rename from src/components/multi-select.cjsx
rename to tutor/src/components/multi-select.cjsx
diff --git a/src/components/name.cjsx b/tutor/src/components/name.cjsx
similarity index 100%
rename from src/components/name.cjsx
rename to tutor/src/components/name.cjsx
diff --git a/src/components/navbar/account-link.cjsx b/tutor/src/components/navbar/account-link.cjsx
similarity index 100%
rename from src/components/navbar/account-link.cjsx
rename to tutor/src/components/navbar/account-link.cjsx
diff --git a/src/components/navbar/book-links.cjsx b/tutor/src/components/navbar/book-links.cjsx
similarity index 100%
rename from src/components/navbar/book-links.cjsx
rename to tutor/src/components/navbar/book-links.cjsx
diff --git a/src/components/navbar/center-controls.cjsx b/tutor/src/components/navbar/center-controls.cjsx
similarity index 100%
rename from src/components/navbar/center-controls.cjsx
rename to tutor/src/components/navbar/center-controls.cjsx
diff --git a/src/components/navbar/course-name.cjsx b/tutor/src/components/navbar/course-name.cjsx
similarity index 100%
rename from src/components/navbar/course-name.cjsx
rename to tutor/src/components/navbar/course-name.cjsx
diff --git a/src/components/navbar/index.cjsx b/tutor/src/components/navbar/index.cjsx
similarity index 97%
rename from src/components/navbar/index.cjsx
rename to tutor/src/components/navbar/index.cjsx
index fa8864bbec..3a529205e9 100644
--- a/src/components/navbar/index.cjsx
+++ b/tutor/src/components/navbar/index.cjsx
@@ -8,7 +8,7 @@ ServerErrorMonitoring = require './server-error-monitoring'
 UserActionsMenu = require './user-actions-menu'
 BookLinks = require './book-links'
 CenterControls = require './center-controls'
-{NotificationsBar} = require 'openstax-react-components'
+{NotificationsBar} = require 'shared'
 
 {CurrentUserActions} = require '../../flux/current-user'
 {CourseStore} = require '../../flux/course'
diff --git a/src/components/navbar/logout.cjsx b/tutor/src/components/navbar/logout.cjsx
similarity index 100%
rename from src/components/navbar/logout.cjsx
rename to tutor/src/components/navbar/logout.cjsx
diff --git a/src/components/navbar/server-error-monitoring.cjsx b/tutor/src/components/navbar/server-error-monitoring.cjsx
similarity index 98%
rename from src/components/navbar/server-error-monitoring.cjsx
rename to tutor/src/components/navbar/server-error-monitoring.cjsx
index 7685074170..620789d759 100644
--- a/src/components/navbar/server-error-monitoring.cjsx
+++ b/tutor/src/components/navbar/server-error-monitoring.cjsx
@@ -26,8 +26,9 @@ makeContactMessage = (statusCode, message, request) ->
     #{errorInfo}."""
 
 makeContactURL = (supportLinkBase, statusCode, message, request) ->
+  console.info('lkajsdflkjs')
   q = encodeURIComponent(makeContactMessage(statusCode, message, request))
-
+  console.info('makeContactURL', q)
   "#{supportLinkBase}#{SUPPORT_LINK_PARAMS}#{q}"
 
 reloadOnce = ->
diff --git a/src/components/navbar/user-actions-menu.cjsx b/tutor/src/components/navbar/user-actions-menu.cjsx
similarity index 100%
rename from src/components/navbar/user-actions-menu.cjsx
rename to tutor/src/components/navbar/user-actions-menu.cjsx
diff --git a/src/components/navbar/username.cjsx b/tutor/src/components/navbar/username.cjsx
similarity index 100%
rename from src/components/navbar/username.cjsx
rename to tutor/src/components/navbar/username.cjsx
diff --git a/src/components/new-tab-link.cjsx b/tutor/src/components/new-tab-link.cjsx
similarity index 100%
rename from src/components/new-tab-link.cjsx
rename to tutor/src/components/new-tab-link.cjsx
diff --git a/src/components/no-periods.cjsx b/tutor/src/components/no-periods.cjsx
similarity index 100%
rename from src/components/no-periods.cjsx
rename to tutor/src/components/no-periods.cjsx
diff --git a/src/components/performance-forecast/chapter-section-type.coffee b/tutor/src/components/performance-forecast/chapter-section-type.coffee
similarity index 100%
rename from src/components/performance-forecast/chapter-section-type.coffee
rename to tutor/src/components/performance-forecast/chapter-section-type.coffee
diff --git a/src/components/performance-forecast/chapter.cjsx b/tutor/src/components/performance-forecast/chapter.cjsx
similarity index 95%
rename from src/components/performance-forecast/chapter.cjsx
rename to tutor/src/components/performance-forecast/chapter.cjsx
index 4e0b810d67..25529b80d9 100644
--- a/src/components/performance-forecast/chapter.cjsx
+++ b/tutor/src/components/performance-forecast/chapter.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 BS = require 'react-bootstrap'
 Router = require 'react-router'
 
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 
 ChapterSectionType = require './chapter-section-type'
 ProgressBar = require './progress-bar'
diff --git a/src/components/performance-forecast/color-key.cjsx b/tutor/src/components/performance-forecast/color-key.cjsx
similarity index 100%
rename from src/components/performance-forecast/color-key.cjsx
rename to tutor/src/components/performance-forecast/color-key.cjsx
diff --git a/src/components/performance-forecast/guide.cjsx b/tutor/src/components/performance-forecast/guide.cjsx
similarity index 100%
rename from src/components/performance-forecast/guide.cjsx
rename to tutor/src/components/performance-forecast/guide.cjsx
diff --git a/src/components/performance-forecast/index.cjsx b/tutor/src/components/performance-forecast/index.cjsx
similarity index 100%
rename from src/components/performance-forecast/index.cjsx
rename to tutor/src/components/performance-forecast/index.cjsx
diff --git a/src/components/performance-forecast/info-link.cjsx b/tutor/src/components/performance-forecast/info-link.cjsx
similarity index 100%
rename from src/components/performance-forecast/info-link.cjsx
rename to tutor/src/components/performance-forecast/info-link.cjsx
diff --git a/src/components/performance-forecast/practice-button.cjsx b/tutor/src/components/performance-forecast/practice-button.cjsx
similarity index 100%
rename from src/components/performance-forecast/practice-button.cjsx
rename to tutor/src/components/performance-forecast/practice-button.cjsx
diff --git a/src/components/performance-forecast/progress-bar.cjsx b/tutor/src/components/performance-forecast/progress-bar.cjsx
similarity index 100%
rename from src/components/performance-forecast/progress-bar.cjsx
rename to tutor/src/components/performance-forecast/progress-bar.cjsx
diff --git a/src/components/performance-forecast/section.cjsx b/tutor/src/components/performance-forecast/section.cjsx
similarity index 94%
rename from src/components/performance-forecast/section.cjsx
rename to tutor/src/components/performance-forecast/section.cjsx
index caabd07f75..7b7f76a361 100644
--- a/src/components/performance-forecast/section.cjsx
+++ b/tutor/src/components/performance-forecast/section.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 BS = require 'react-bootstrap'
 Router = require 'react-router'
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 ChapterSectionType  = require './chapter-section-type'
 ProgressBar = require './progress-bar'
 Statistics  = require './statistics'
diff --git a/src/components/performance-forecast/statistics.cjsx b/tutor/src/components/performance-forecast/statistics.cjsx
similarity index 97%
rename from src/components/performance-forecast/statistics.cjsx
rename to tutor/src/components/performance-forecast/statistics.cjsx
index b1a6efbe9b..69dd99a386 100644
--- a/src/components/performance-forecast/statistics.cjsx
+++ b/tutor/src/components/performance-forecast/statistics.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 BS = require 'react-bootstrap'
 Router = require 'react-router'
 _ = require 'underscore'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 {CurrentUserStore} = require '../../flux/current-user'
 
diff --git a/src/components/performance-forecast/student.cjsx b/tutor/src/components/performance-forecast/student.cjsx
similarity index 100%
rename from src/components/performance-forecast/student.cjsx
rename to tutor/src/components/performance-forecast/student.cjsx
diff --git a/src/components/performance-forecast/teacher-student.cjsx b/tutor/src/components/performance-forecast/teacher-student.cjsx
similarity index 100%
rename from src/components/performance-forecast/teacher-student.cjsx
rename to tutor/src/components/performance-forecast/teacher-student.cjsx
diff --git a/src/components/performance-forecast/teacher.cjsx b/tutor/src/components/performance-forecast/teacher.cjsx
similarity index 100%
rename from src/components/performance-forecast/teacher.cjsx
rename to tutor/src/components/performance-forecast/teacher.cjsx
diff --git a/src/components/performance-forecast/weaker-panel.cjsx b/tutor/src/components/performance-forecast/weaker-panel.cjsx
similarity index 100%
rename from src/components/performance-forecast/weaker-panel.cjsx
rename to tutor/src/components/performance-forecast/weaker-panel.cjsx
diff --git a/src/components/performance-forecast/weaker-sections.cjsx b/tutor/src/components/performance-forecast/weaker-sections.cjsx
similarity index 100%
rename from src/components/performance-forecast/weaker-sections.cjsx
rename to tutor/src/components/performance-forecast/weaker-sections.cjsx
diff --git a/src/components/plan-stats/course-bar.cjsx b/tutor/src/components/plan-stats/course-bar.cjsx
similarity index 100%
rename from src/components/plan-stats/course-bar.cjsx
rename to tutor/src/components/plan-stats/course-bar.cjsx
diff --git a/src/components/plan-stats/event.cjsx b/tutor/src/components/plan-stats/event.cjsx
similarity index 100%
rename from src/components/plan-stats/event.cjsx
rename to tutor/src/components/plan-stats/event.cjsx
diff --git a/src/components/plan-stats/index.cjsx b/tutor/src/components/plan-stats/index.cjsx
similarity index 98%
rename from src/components/plan-stats/index.cjsx
rename to tutor/src/components/plan-stats/index.cjsx
index e635a02377..4880b14ad5 100644
--- a/src/components/plan-stats/index.cjsx
+++ b/tutor/src/components/plan-stats/index.cjsx
@@ -5,7 +5,7 @@ Router = require 'react-router'
 
 {TaskPlanStatsStore, TaskPlanStatsActions} = require '../../flux/task-plan-stats'
 LoadableItem = require '../loadable-item'
-{SmartOverflow} = require 'openstax-react-components'
+{SmartOverflow} = require 'shared'
 {CoursePeriodsNav} = require '../course-periods-nav'
 
 CourseBar = require './course-bar'
diff --git a/src/components/plan-stats/performances.cjsx b/tutor/src/components/plan-stats/performances.cjsx
similarity index 100%
rename from src/components/plan-stats/performances.cjsx
rename to tutor/src/components/plan-stats/performances.cjsx
diff --git a/src/components/plan-stats/progress.cjsx b/tutor/src/components/plan-stats/progress.cjsx
similarity index 97%
rename from src/components/plan-stats/progress.cjsx
rename to tutor/src/components/plan-stats/progress.cjsx
index 712deade05..25f5787aad 100644
--- a/src/components/plan-stats/progress.cjsx
+++ b/tutor/src/components/plan-stats/progress.cjsx
@@ -3,7 +3,7 @@ _ = require 'underscore'
 BS = require 'react-bootstrap'
 classnames = require 'classnames'
 
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 
 Progress = React.createClass
   displayName: 'Progress'
diff --git a/src/components/pluralize.cjsx b/tutor/src/components/pluralize.cjsx
similarity index 100%
rename from src/components/pluralize.cjsx
rename to tutor/src/components/pluralize.cjsx
diff --git a/src/components/qa/book-link.cjsx b/tutor/src/components/qa/book-link.cjsx
similarity index 100%
rename from src/components/qa/book-link.cjsx
rename to tutor/src/components/qa/book-link.cjsx
diff --git a/src/components/qa/content-toggle.cjsx b/tutor/src/components/qa/content-toggle.cjsx
similarity index 100%
rename from src/components/qa/content-toggle.cjsx
rename to tutor/src/components/qa/content-toggle.cjsx
diff --git a/src/components/qa/content.cjsx b/tutor/src/components/qa/content.cjsx
similarity index 100%
rename from src/components/qa/content.cjsx
rename to tutor/src/components/qa/content.cjsx
diff --git a/src/components/qa/exercise-card.cjsx b/tutor/src/components/qa/exercise-card.cjsx
similarity index 96%
rename from src/components/qa/exercise-card.cjsx
rename to tutor/src/components/qa/exercise-card.cjsx
index 90cda05650..e998a6febf 100644
--- a/src/components/qa/exercise-card.cjsx
+++ b/tutor/src/components/qa/exercise-card.cjsx
@@ -3,7 +3,7 @@ React = require 'react'
 classnames = require 'classnames'
 {ExerciseStore} = require '../../flux/exercise'
 String = require '../../helpers/string'
-{ExercisePreview} = require 'openstax-react-components'
+{ExercisePreview} = require 'shared'
 exerciseDataFilter = require '../../flux/qa-exercise-data-filter'
 Exercise = React.createClass
 
diff --git a/src/components/qa/exercises.cjsx b/tutor/src/components/qa/exercises.cjsx
similarity index 98%
rename from src/components/qa/exercises.cjsx
rename to tutor/src/components/qa/exercises.cjsx
index 11516cbcde..68acca6440 100644
--- a/src/components/qa/exercises.cjsx
+++ b/tutor/src/components/qa/exercises.cjsx
@@ -2,7 +2,7 @@ _ = require 'underscore'
 BS = require 'react-bootstrap'
 React = require 'react'
 classnames = require 'classnames'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 {ReferenceBookStore} = require '../../flux/reference-book'
 {ExerciseStore, ExerciseActions} = require '../../flux/exercise'
diff --git a/src/components/qa/index.cjsx b/tutor/src/components/qa/index.cjsx
similarity index 100%
rename from src/components/qa/index.cjsx
rename to tutor/src/components/qa/index.cjsx
diff --git a/src/components/qa/reference-book-wrapper.cjsx b/tutor/src/components/qa/reference-book-wrapper.cjsx
similarity index 100%
rename from src/components/qa/reference-book-wrapper.cjsx
rename to tutor/src/components/qa/reference-book-wrapper.cjsx
diff --git a/src/components/qa/view-book.cjsx b/tutor/src/components/qa/view-book.cjsx
similarity index 98%
rename from src/components/qa/view-book.cjsx
rename to tutor/src/components/qa/view-book.cjsx
index 9c4860de1b..2f2f4522de 100644
--- a/src/components/qa/view-book.cjsx
+++ b/tutor/src/components/qa/view-book.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 classnames = require 'classnames'
 BS = require 'react-bootstrap'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 {EcosystemsStore} = require '../../flux/ecosystems'
 {ReferenceBookActions, ReferenceBookStore} = require '../../flux/reference-book'
diff --git a/src/components/questions/dashboard.cjsx b/tutor/src/components/questions/dashboard.cjsx
similarity index 100%
rename from src/components/questions/dashboard.cjsx
rename to tutor/src/components/questions/dashboard.cjsx
diff --git a/src/components/questions/exercise-controls.cjsx b/tutor/src/components/questions/exercise-controls.cjsx
similarity index 97%
rename from src/components/questions/exercise-controls.cjsx
rename to tutor/src/components/questions/exercise-controls.cjsx
index ffee9155f8..ff625ee8eb 100644
--- a/src/components/questions/exercise-controls.cjsx
+++ b/tutor/src/components/questions/exercise-controls.cjsx
@@ -4,7 +4,7 @@ cn = require 'classnames'
 
 {ExerciseStore, ExerciseActions} = require '../../flux/exercise'
 {CourseStore} = require '../../flux/course'
-{AsyncButton, ScrollToMixin} = require 'openstax-react-components'
+{AsyncButton, ScrollToMixin} = require 'shared'
 showDialog = require './unsaved-dialog'
 
 Icon = require '../icon'
diff --git a/src/components/questions/exercises-display.cjsx b/tutor/src/components/questions/exercises-display.cjsx
similarity index 99%
rename from src/components/questions/exercises-display.cjsx
rename to tutor/src/components/questions/exercises-display.cjsx
index bd2ab54636..b6ce155108 100644
--- a/src/components/questions/exercises-display.cjsx
+++ b/tutor/src/components/questions/exercises-display.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 BS = require 'react-bootstrap'
 
-{PinnedHeaderFooterCard} = require 'openstax-react-components'
+{PinnedHeaderFooterCard} = require 'shared'
 {ExerciseStore, ExerciseActions} = require '../../flux/exercise'
 
 Help = require './help'
diff --git a/src/components/questions/help.cjsx b/tutor/src/components/questions/help.cjsx
similarity index 100%
rename from src/components/questions/help.cjsx
rename to tutor/src/components/questions/help.cjsx
diff --git a/src/components/questions/index.cjsx b/tutor/src/components/questions/index.cjsx
similarity index 100%
rename from src/components/questions/index.cjsx
rename to tutor/src/components/questions/index.cjsx
diff --git a/src/components/questions/loading-display.cjsx b/tutor/src/components/questions/loading-display.cjsx
similarity index 100%
rename from src/components/questions/loading-display.cjsx
rename to tutor/src/components/questions/loading-display.cjsx
diff --git a/src/components/questions/no-exercises-found.cjsx b/tutor/src/components/questions/no-exercises-found.cjsx
similarity index 100%
rename from src/components/questions/no-exercises-found.cjsx
rename to tutor/src/components/questions/no-exercises-found.cjsx
diff --git a/src/components/questions/sections-chooser.cjsx b/tutor/src/components/questions/sections-chooser.cjsx
similarity index 100%
rename from src/components/questions/sections-chooser.cjsx
rename to tutor/src/components/questions/sections-chooser.cjsx
diff --git a/src/components/questions/unsaved-dialog.cjsx b/tutor/src/components/questions/unsaved-dialog.cjsx
similarity index 100%
rename from src/components/questions/unsaved-dialog.cjsx
rename to tutor/src/components/questions/unsaved-dialog.cjsx
diff --git a/src/components/reference-book/exercise.cjsx b/tutor/src/components/reference-book/exercise.cjsx
similarity index 96%
rename from src/components/reference-book/exercise.cjsx
rename to tutor/src/components/reference-book/exercise.cjsx
index e972f50f84..282a7c9af3 100644
--- a/src/components/reference-book/exercise.cjsx
+++ b/tutor/src/components/reference-book/exercise.cjsx
@@ -3,7 +3,7 @@ React = require 'react'
 {ReferenceBookExerciseActions, ReferenceBookExerciseStore} = require '../../flux/reference-book-exercise'
 
 LoadableItem = require '../loadable-item'
-{ArbitraryHtmlAndMath, Question} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath, Question} = require 'shared'
 
 ReferenceBookMissingExercise = React.createClass
   displayName: 'ReferenceBookMissingExercise'
diff --git a/src/components/reference-book/index.cjsx b/tutor/src/components/reference-book/index.cjsx
similarity index 100%
rename from src/components/reference-book/index.cjsx
rename to tutor/src/components/reference-book/index.cjsx
diff --git a/src/components/reference-book/navbar.cjsx b/tutor/src/components/reference-book/navbar.cjsx
similarity index 100%
rename from src/components/reference-book/navbar.cjsx
rename to tutor/src/components/reference-book/navbar.cjsx
diff --git a/src/components/reference-book/page-navigation.cjsx b/tutor/src/components/reference-book/page-navigation.cjsx
similarity index 100%
rename from src/components/reference-book/page-navigation.cjsx
rename to tutor/src/components/reference-book/page-navigation.cjsx
diff --git a/src/components/reference-book/page-shell.cjsx b/tutor/src/components/reference-book/page-shell.cjsx
similarity index 100%
rename from src/components/reference-book/page-shell.cjsx
rename to tutor/src/components/reference-book/page-shell.cjsx
diff --git a/src/components/reference-book/page.cjsx b/tutor/src/components/reference-book/page.cjsx
similarity index 95%
rename from src/components/reference-book/page.cjsx
rename to tutor/src/components/reference-book/page.cjsx
index 7510d67652..6ef1414cdf 100644
--- a/src/components/reference-book/page.cjsx
+++ b/tutor/src/components/reference-book/page.cjsx
@@ -1,11 +1,11 @@
 React = require 'react'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 _  = require 'underscore'
 classnames = require 'classnames'
 
 {BookContentMixin} = require '../book-content-mixin'
-{ArbitraryHtmlAndMath, GetPositionMixin} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath, GetPositionMixin} = require 'shared'
 
 {ReferenceBookExerciseShell} = require './exercise'
 
diff --git a/src/components/reference-book/reference-book.cjsx b/tutor/src/components/reference-book/reference-book.cjsx
similarity index 96%
rename from src/components/reference-book/reference-book.cjsx
rename to tutor/src/components/reference-book/reference-book.cjsx
index 218c06bdb8..b40d4de045 100644
--- a/src/components/reference-book/reference-book.cjsx
+++ b/tutor/src/components/reference-book/reference-book.cjsx
@@ -1,13 +1,13 @@
 React = require 'react'
 _  = require 'underscore'
 classnames = require 'classnames'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 {ReferenceBookActions, ReferenceBookStore} = require '../../flux/reference-book'
 
 NavBar = require './navbar'
 Menu = require './slide-out-menu'
-{ChapterSectionMixin, ResizeListenerMixin} = require 'openstax-react-components'
+{ChapterSectionMixin, ResizeListenerMixin} = require 'shared'
 PageShell = require './page-shell'
 PageNavigation = require './page-navigation'
 
diff --git a/src/components/reference-book/slide-out-menu-toggle.cjsx b/tutor/src/components/reference-book/slide-out-menu-toggle.cjsx
similarity index 100%
rename from src/components/reference-book/slide-out-menu-toggle.cjsx
rename to tutor/src/components/reference-book/slide-out-menu-toggle.cjsx
diff --git a/src/components/reference-book/slide-out-menu.cjsx b/tutor/src/components/reference-book/slide-out-menu.cjsx
similarity index 97%
rename from src/components/reference-book/slide-out-menu.cjsx
rename to tutor/src/components/reference-book/slide-out-menu.cjsx
index 6c03af16ef..c29f7f9cfe 100644
--- a/src/components/reference-book/slide-out-menu.cjsx
+++ b/tutor/src/components/reference-book/slide-out-menu.cjsx
@@ -3,7 +3,7 @@ Router = require 'react-router'
 _  = require 'underscore'
 
 {ReferenceBookActions, ReferenceBookStore} = require '../../flux/reference-book'
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 
 Section = React.createClass
   displayName: 'ReferenceBookTocSection'
diff --git a/src/components/reference-book/teacher-content-toggle.cjsx b/tutor/src/components/reference-book/teacher-content-toggle.cjsx
similarity index 100%
rename from src/components/reference-book/teacher-content-toggle.cjsx
rename to tutor/src/components/reference-book/teacher-content-toggle.cjsx
diff --git a/src/components/root.cjsx b/tutor/src/components/root.cjsx
similarity index 100%
rename from src/components/root.cjsx
rename to tutor/src/components/root.cjsx
diff --git a/src/components/scores/absent-cell.cjsx b/tutor/src/components/scores/absent-cell.cjsx
similarity index 100%
rename from src/components/scores/absent-cell.cjsx
rename to tutor/src/components/scores/absent-cell.cjsx
diff --git a/src/components/scores/average-info.cjsx b/tutor/src/components/scores/average-info.cjsx
similarity index 100%
rename from src/components/scores/average-info.cjsx
rename to tutor/src/components/scores/average-info.cjsx
diff --git a/src/components/scores/cell-status-mixin.cjsx b/tutor/src/components/scores/cell-status-mixin.cjsx
similarity index 100%
rename from src/components/scores/cell-status-mixin.cjsx
rename to tutor/src/components/scores/cell-status-mixin.cjsx
diff --git a/src/components/scores/concept-coach-cell.cjsx b/tutor/src/components/scores/concept-coach-cell.cjsx
similarity index 100%
rename from src/components/scores/concept-coach-cell.cjsx
rename to tutor/src/components/scores/concept-coach-cell.cjsx
diff --git a/src/components/scores/export.cjsx b/tutor/src/components/scores/export.cjsx
similarity index 98%
rename from src/components/scores/export.cjsx
rename to tutor/src/components/scores/export.cjsx
index 653d0489ff..c5368f7ee7 100644
--- a/src/components/scores/export.cjsx
+++ b/tutor/src/components/scores/export.cjsx
@@ -4,7 +4,7 @@ mime = require 'mime-types'
 classnames = require 'classnames'
 
 BindStoreMixin = require '../bind-store-mixin'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 TimeDifference = require '../time-difference'
 
 {ScoresExportStore, ScoresExportActions} = require '../../flux/scores-export'
diff --git a/src/components/scores/external-cell.cjsx b/tutor/src/components/scores/external-cell.cjsx
similarity index 100%
rename from src/components/scores/external-cell.cjsx
rename to tutor/src/components/scores/external-cell.cjsx
diff --git a/src/components/scores/homework-cell.cjsx b/tutor/src/components/scores/homework-cell.cjsx
similarity index 100%
rename from src/components/scores/homework-cell.cjsx
rename to tutor/src/components/scores/homework-cell.cjsx
diff --git a/src/components/scores/index.cjsx b/tutor/src/components/scores/index.cjsx
similarity index 99%
rename from src/components/scores/index.cjsx
rename to tutor/src/components/scores/index.cjsx
index 26400d6165..8e7ef0acc5 100644
--- a/src/components/scores/index.cjsx
+++ b/tutor/src/components/scores/index.cjsx
@@ -13,7 +13,7 @@ Router = require 'react-router'
 LoadableItem = require '../loadable-item'
 ScoresExport = require './export'
 {CoursePeriodsNavShell} = require '../course-periods-nav'
-{ResizeListenerMixin} = require 'openstax-react-components'
+{ResizeListenerMixin} = require 'shared'
 
 Scores = React.createClass
   displayName: 'Scores'
diff --git a/src/components/scores/late-work.cjsx b/tutor/src/components/scores/late-work.cjsx
similarity index 100%
rename from src/components/scores/late-work.cjsx
rename to tutor/src/components/scores/late-work.cjsx
diff --git a/src/components/scores/name-cell.cjsx b/tutor/src/components/scores/name-cell.cjsx
similarity index 100%
rename from src/components/scores/name-cell.cjsx
rename to tutor/src/components/scores/name-cell.cjsx
diff --git a/src/components/scores/pie-progress.cjsx b/tutor/src/components/scores/pie-progress.cjsx
similarity index 100%
rename from src/components/scores/pie-progress.cjsx
rename to tutor/src/components/scores/pie-progress.cjsx
diff --git a/src/components/scores/quick-external-stats.cjsx b/tutor/src/components/scores/quick-external-stats.cjsx
similarity index 100%
rename from src/components/scores/quick-external-stats.cjsx
rename to tutor/src/components/scores/quick-external-stats.cjsx
diff --git a/src/components/scores/reading-cell.cjsx b/tutor/src/components/scores/reading-cell.cjsx
similarity index 100%
rename from src/components/scores/reading-cell.cjsx
rename to tutor/src/components/scores/reading-cell.cjsx
diff --git a/src/components/scores/sorting-header.cjsx b/tutor/src/components/scores/sorting-header.cjsx
similarity index 100%
rename from src/components/scores/sorting-header.cjsx
rename to tutor/src/components/scores/sorting-header.cjsx
diff --git a/src/components/scores/table-filters.cjsx b/tutor/src/components/scores/table-filters.cjsx
similarity index 100%
rename from src/components/scores/table-filters.cjsx
rename to tutor/src/components/scores/table-filters.cjsx
diff --git a/src/components/scores/table.cjsx b/tutor/src/components/scores/table.cjsx
similarity index 100%
rename from src/components/scores/table.cjsx
rename to tutor/src/components/scores/table.cjsx
diff --git a/src/components/scroll-spy.cjsx b/tutor/src/components/scroll-spy.cjsx
similarity index 100%
rename from src/components/scroll-spy.cjsx
rename to tutor/src/components/scroll-spy.cjsx
diff --git a/src/components/scroll-to-link-mixin.cjsx b/tutor/src/components/scroll-to-link-mixin.cjsx
similarity index 95%
rename from src/components/scroll-to-link-mixin.cjsx
rename to tutor/src/components/scroll-to-link-mixin.cjsx
index 2a49646170..5831dab8aa 100644
--- a/src/components/scroll-to-link-mixin.cjsx
+++ b/tutor/src/components/scroll-to-link-mixin.cjsx
@@ -1,6 +1,6 @@
 React = require 'react'
 
-{ScrollToMixin} = require 'openstax-react-components'
+{ScrollToMixin} = require 'shared'
 
 # This mixin extends the scroll-to-mixin to handle
 # scrolling to a link when it's clicked
diff --git a/src/components/scroll-tracker.cjsx b/tutor/src/components/scroll-tracker.cjsx
similarity index 98%
rename from src/components/scroll-tracker.cjsx
rename to tutor/src/components/scroll-tracker.cjsx
index 3ae07cc4b5..fa8ca0890b 100644
--- a/src/components/scroll-tracker.cjsx
+++ b/tutor/src/components/scroll-tracker.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 _ = require 'underscore'
 
-{GetPositionMixin} = require 'openstax-react-components'
+{GetPositionMixin} = require 'shared'
 
 ScrollTracker =
   mixins: [GetPositionMixin]
diff --git a/src/components/sections-chooser.cjsx b/tutor/src/components/sections-chooser.cjsx
similarity index 100%
rename from src/components/sections-chooser.cjsx
rename to tutor/src/components/sections-chooser.cjsx
diff --git a/src/components/student-dashboard/all-events-by-week.cjsx b/tutor/src/components/student-dashboard/all-events-by-week.cjsx
similarity index 100%
rename from src/components/student-dashboard/all-events-by-week.cjsx
rename to tutor/src/components/student-dashboard/all-events-by-week.cjsx
diff --git a/src/components/student-dashboard/dashboard.cjsx b/tutor/src/components/student-dashboard/dashboard.cjsx
similarity index 100%
rename from src/components/student-dashboard/dashboard.cjsx
rename to tutor/src/components/student-dashboard/dashboard.cjsx
diff --git a/src/components/student-dashboard/dont-forget-panel.cjsx b/tutor/src/components/student-dashboard/dont-forget-panel.cjsx
similarity index 100%
rename from src/components/student-dashboard/dont-forget-panel.cjsx
rename to tutor/src/components/student-dashboard/dont-forget-panel.cjsx
diff --git a/src/components/student-dashboard/empty-panel.cjsx b/tutor/src/components/student-dashboard/empty-panel.cjsx
similarity index 100%
rename from src/components/student-dashboard/empty-panel.cjsx
rename to tutor/src/components/student-dashboard/empty-panel.cjsx
diff --git a/src/components/student-dashboard/event-info-icon.cjsx b/tutor/src/components/student-dashboard/event-info-icon.cjsx
similarity index 100%
rename from src/components/student-dashboard/event-info-icon.cjsx
rename to tutor/src/components/student-dashboard/event-info-icon.cjsx
diff --git a/src/components/student-dashboard/event-row.cjsx b/tutor/src/components/student-dashboard/event-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/event-row.cjsx
rename to tutor/src/components/student-dashboard/event-row.cjsx
diff --git a/src/components/student-dashboard/event-task-row.cjsx b/tutor/src/components/student-dashboard/event-task-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/event-task-row.cjsx
rename to tutor/src/components/student-dashboard/event-task-row.cjsx
diff --git a/src/components/student-dashboard/events-panel.cjsx b/tutor/src/components/student-dashboard/events-panel.cjsx
similarity index 100%
rename from src/components/student-dashboard/events-panel.cjsx
rename to tutor/src/components/student-dashboard/events-panel.cjsx
diff --git a/src/components/student-dashboard/external-row.cjsx b/tutor/src/components/student-dashboard/external-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/external-row.cjsx
rename to tutor/src/components/student-dashboard/external-row.cjsx
diff --git a/src/components/student-dashboard/generic-event-row.cjsx b/tutor/src/components/student-dashboard/generic-event-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/generic-event-row.cjsx
rename to tutor/src/components/student-dashboard/generic-event-row.cjsx
diff --git a/src/components/student-dashboard/homework-row.cjsx b/tutor/src/components/student-dashboard/homework-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/homework-row.cjsx
rename to tutor/src/components/student-dashboard/homework-row.cjsx
diff --git a/src/components/student-dashboard/index.cjsx b/tutor/src/components/student-dashboard/index.cjsx
similarity index 100%
rename from src/components/student-dashboard/index.cjsx
rename to tutor/src/components/student-dashboard/index.cjsx
diff --git a/src/components/student-dashboard/progress-guide.cjsx b/tutor/src/components/student-dashboard/progress-guide.cjsx
similarity index 97%
rename from src/components/student-dashboard/progress-guide.cjsx
rename to tutor/src/components/student-dashboard/progress-guide.cjsx
index 2f65a1b9cb..6dd599d6a9 100644
--- a/src/components/student-dashboard/progress-guide.cjsx
+++ b/tutor/src/components/student-dashboard/progress-guide.cjsx
@@ -1,6 +1,6 @@
 React = require 'react'
 BS = require 'react-bootstrap'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 LoadableItem = require '../loadable-item'
 _ = require 'underscore'
@@ -8,7 +8,7 @@ S = require '../../helpers/string'
 
 PerformanceForecast = require '../../flux/performance-forecast'
 ChapterSection = require '../task-plan/chapter-section'
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 PerformanceForecastSection = require '../performance-forecast/section'
 PerformanceForecastColorKey = require '../performance-forecast/color-key'
 PracticeButton = require '../performance-forecast/practice-button'
diff --git a/src/components/student-dashboard/reading-row.cjsx b/tutor/src/components/student-dashboard/reading-row.cjsx
similarity index 100%
rename from src/components/student-dashboard/reading-row.cjsx
rename to tutor/src/components/student-dashboard/reading-row.cjsx
diff --git a/src/components/student-dashboard/this-week-panel.cjsx b/tutor/src/components/student-dashboard/this-week-panel.cjsx
similarity index 100%
rename from src/components/student-dashboard/this-week-panel.cjsx
rename to tutor/src/components/student-dashboard/this-week-panel.cjsx
diff --git a/src/components/student-dashboard/upcoming-panel.cjsx b/tutor/src/components/student-dashboard/upcoming-panel.cjsx
similarity index 100%
rename from src/components/student-dashboard/upcoming-panel.cjsx
rename to tutor/src/components/student-dashboard/upcoming-panel.cjsx
diff --git a/src/components/tabs-with-children.cjsx b/tutor/src/components/tabs-with-children.cjsx
similarity index 100%
rename from src/components/tabs-with-children.cjsx
rename to tutor/src/components/tabs-with-children.cjsx
diff --git a/src/components/task-plan/builder/date-time.cjsx b/tutor/src/components/task-plan/builder/date-time.cjsx
similarity index 98%
rename from src/components/task-plan/builder/date-time.cjsx
rename to tutor/src/components/task-plan/builder/date-time.cjsx
index e553e72bc1..4ce3b586e6 100644
--- a/src/components/task-plan/builder/date-time.cjsx
+++ b/tutor/src/components/task-plan/builder/date-time.cjsx
@@ -5,7 +5,7 @@ _      = require 'underscore'
 
 {TutorDateInput, TutorTimeInput} = require '../../tutor-input'
 TimeHelper    = require '../../../helpers/time'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 DateTime = React.createClass
 
diff --git a/src/components/task-plan/builder/index.cjsx b/tutor/src/components/task-plan/builder/index.cjsx
similarity index 99%
rename from src/components/task-plan/builder/index.cjsx
rename to tutor/src/components/task-plan/builder/index.cjsx
index 2dd0e94234..baac5a5d36 100644
--- a/src/components/task-plan/builder/index.cjsx
+++ b/tutor/src/components/task-plan/builder/index.cjsx
@@ -19,7 +19,7 @@ TimeHelper = require '../../../helpers/time'
 {TaskingStore, TaskingActions} = require '../../../flux/tasking'
 {TutorInput, TutorDateInput, TutorTimeInput, TutorTextArea} = require '../../tutor-input'
 {CourseStore, CourseActions}   = require '../../../flux/course'
-{AsyncButton} = require 'openstax-react-components'
+{AsyncButton} = require 'shared'
 
 Tasking = require './tasking'
 
diff --git a/src/components/task-plan/builder/tasking-date-times.cjsx b/tutor/src/components/task-plan/builder/tasking-date-times.cjsx
similarity index 100%
rename from src/components/task-plan/builder/tasking-date-times.cjsx
rename to tutor/src/components/task-plan/builder/tasking-date-times.cjsx
diff --git a/src/components/task-plan/builder/tasking.cjsx b/tutor/src/components/task-plan/builder/tasking.cjsx
similarity index 100%
rename from src/components/task-plan/builder/tasking.cjsx
rename to tutor/src/components/task-plan/builder/tasking.cjsx
diff --git a/src/components/task-plan/builder/time-zone-settings-link.cjsx b/tutor/src/components/task-plan/builder/time-zone-settings-link.cjsx
similarity index 100%
rename from src/components/task-plan/builder/time-zone-settings-link.cjsx
rename to tutor/src/components/task-plan/builder/time-zone-settings-link.cjsx
diff --git a/src/components/task-plan/chapter-section.cjsx b/tutor/src/components/task-plan/chapter-section.cjsx
similarity index 89%
rename from src/components/task-plan/chapter-section.cjsx
rename to tutor/src/components/task-plan/chapter-section.cjsx
index 4367c711f9..196fc49396 100644
--- a/src/components/task-plan/chapter-section.cjsx
+++ b/tutor/src/components/task-plan/chapter-section.cjsx
@@ -1,5 +1,5 @@
 React = require 'react'
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 _ = require 'underscore'
 
 module.exports = React.createClass
diff --git a/src/components/task-plan/event/index.cjsx b/tutor/src/components/task-plan/event/index.cjsx
similarity index 100%
rename from src/components/task-plan/event/index.cjsx
rename to tutor/src/components/task-plan/event/index.cjsx
diff --git a/src/components/task-plan/external/index.cjsx b/tutor/src/components/task-plan/external/index.cjsx
similarity index 100%
rename from src/components/task-plan/external/index.cjsx
rename to tutor/src/components/task-plan/external/index.cjsx
diff --git a/src/components/task-plan/feedback.cjsx b/tutor/src/components/task-plan/feedback.cjsx
similarity index 100%
rename from src/components/task-plan/feedback.cjsx
rename to tutor/src/components/task-plan/feedback.cjsx
diff --git a/src/components/task-plan/footer.cjsx b/tutor/src/components/task-plan/footer.cjsx
similarity index 98%
rename from src/components/task-plan/footer.cjsx
rename to tutor/src/components/task-plan/footer.cjsx
index 821986cce0..96ff4d101b 100644
--- a/src/components/task-plan/footer.cjsx
+++ b/tutor/src/components/task-plan/footer.cjsx
@@ -4,7 +4,7 @@ Router = require 'react-router'
 {TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'
 {PlanPublishStore, PlanPublishActions} = require '../../flux/plan-publish'
 PlanHelper = require '../../helpers/plan'
-{AsyncButton, SuretyGuard} = require 'openstax-react-components'
+{AsyncButton, SuretyGuard} = require 'shared'
 TutorDialog = require '../tutor-dialog'
 BackButton = require '../buttons/back-button'
 
diff --git a/src/components/task-plan/guide.cjsx b/tutor/src/components/task-plan/guide.cjsx
similarity index 100%
rename from src/components/task-plan/guide.cjsx
rename to tutor/src/components/task-plan/guide.cjsx
diff --git a/src/components/task-plan/homework.cjsx b/tutor/src/components/task-plan/homework.cjsx
similarity index 100%
rename from src/components/task-plan/homework.cjsx
rename to tutor/src/components/task-plan/homework.cjsx
diff --git a/src/components/task-plan/homework/add-exercises.cjsx b/tutor/src/components/task-plan/homework/add-exercises.cjsx
similarity index 98%
rename from src/components/task-plan/homework/add-exercises.cjsx
rename to tutor/src/components/task-plan/homework/add-exercises.cjsx
index f4f7906016..f4badcd651 100644
--- a/src/components/task-plan/homework/add-exercises.cjsx
+++ b/tutor/src/components/task-plan/homework/add-exercises.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 _ = require 'underscore'
 
 LoadingExercises = require './loading-exercises-mixin'
-{PinnedHeaderFooterCard, ScrollToMixin} = require 'openstax-react-components'
+{PinnedHeaderFooterCard, ScrollToMixin} = require 'shared'
 {CourseStore} = require '../../../flux/course'
 {ExerciseStore, ExerciseActions} = require '../../../flux/exercise'
 {TaskPlanStore, TaskPlanActions} = require '../../../flux/task-plan'
diff --git a/src/components/task-plan/homework/choose-exercises.cjsx b/tutor/src/components/task-plan/homework/choose-exercises.cjsx
similarity index 97%
rename from src/components/task-plan/homework/choose-exercises.cjsx
rename to tutor/src/components/task-plan/homework/choose-exercises.cjsx
index 830cd1bbd6..1da1650213 100644
--- a/src/components/task-plan/homework/choose-exercises.cjsx
+++ b/tutor/src/components/task-plan/homework/choose-exercises.cjsx
@@ -8,7 +8,7 @@ classnames = require 'classnames'
 AddExercises    = require './add-exercises'
 ReviewExercises = require './review-exercises'
 SelectTopics    = require '../select-topics'
-{ScrollToMixin} = require 'openstax-react-components'
+{ScrollToMixin} = require 'shared'
 
 {ExerciseActions} = require '../../../flux/exercise'
 
diff --git a/src/components/task-plan/homework/exercise-controls.cjsx b/tutor/src/components/task-plan/homework/exercise-controls.cjsx
similarity index 100%
rename from src/components/task-plan/homework/exercise-controls.cjsx
rename to tutor/src/components/task-plan/homework/exercise-controls.cjsx
diff --git a/src/components/task-plan/homework/exercises-table.cjsx b/tutor/src/components/task-plan/homework/exercises-table.cjsx
similarity index 97%
rename from src/components/task-plan/homework/exercises-table.cjsx
rename to tutor/src/components/task-plan/homework/exercises-table.cjsx
index 2a4b866f18..d3dbf5b20f 100644
--- a/src/components/task-plan/homework/exercises-table.cjsx
+++ b/tutor/src/components/task-plan/homework/exercises-table.cjsx
@@ -4,7 +4,7 @@ _     = require 'underscore'
 {TaskPlanStore}        = require '../../../flux/task-plan'
 {ExerciseStore}        = require '../../../flux/exercise'
 
-{ArbitraryHtmlAndMath} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath} = require 'shared'
 
 LoadingExercises       = require './loading-exercises-mixin'
 ChapterSection         = require '../chapter-section'
diff --git a/src/components/task-plan/homework/loading-exercises-mixin.cjsx b/tutor/src/components/task-plan/homework/loading-exercises-mixin.cjsx
similarity index 100%
rename from src/components/task-plan/homework/loading-exercises-mixin.cjsx
rename to tutor/src/components/task-plan/homework/loading-exercises-mixin.cjsx
diff --git a/src/components/task-plan/homework/review-exercises.cjsx b/tutor/src/components/task-plan/homework/review-exercises.cjsx
similarity index 99%
rename from src/components/task-plan/homework/review-exercises.cjsx
rename to tutor/src/components/task-plan/homework/review-exercises.cjsx
index c2177da3d8..ba0fdff6a5 100644
--- a/src/components/task-plan/homework/review-exercises.cjsx
+++ b/tutor/src/components/task-plan/homework/review-exercises.cjsx
@@ -7,7 +7,7 @@ LoadingExercises = require './loading-exercises-mixin'
 
 {TaskPlanStore, TaskPlanActions} = require '../../../flux/task-plan'
 {ExerciseStore} = require '../../../flux/exercise'
-{ExercisePreview, SuretyGuard, PinnedHeaderFooterCard} = require 'openstax-react-components'
+{ExercisePreview, SuretyGuard, PinnedHeaderFooterCard} = require 'shared'
 
 ExerciseControls = require './exercise-controls'
 ExerciseTable    = require './exercises-table'
diff --git a/src/components/task-plan/index.cjsx b/tutor/src/components/task-plan/index.cjsx
similarity index 100%
rename from src/components/task-plan/index.cjsx
rename to tutor/src/components/task-plan/index.cjsx
diff --git a/src/components/task-plan/lms-info.cjsx b/tutor/src/components/task-plan/lms-info.cjsx
similarity index 100%
rename from src/components/task-plan/lms-info.cjsx
rename to tutor/src/components/task-plan/lms-info.cjsx
diff --git a/src/components/task-plan/plan-mixin.coffee b/tutor/src/components/task-plan/plan-mixin.coffee
similarity index 98%
rename from src/components/task-plan/plan-mixin.coffee
rename to tutor/src/components/task-plan/plan-mixin.coffee
index bf2a1f92dd..fd98c65a01 100644
--- a/src/components/task-plan/plan-mixin.coffee
+++ b/tutor/src/components/task-plan/plan-mixin.coffee
@@ -2,7 +2,7 @@ React = require 'react'
 {TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'
 {TaskingStore, TaskingActions} = require '../../flux/tasking'
 {TimeStore} = require '../../flux/time'
-{CloseButton} = require 'openstax-react-components'
+{CloseButton} = require 'shared'
 TutorDialog = require '../tutor-dialog'
 S = require '../../helpers/string'
 
diff --git a/src/components/task-plan/reading.cjsx b/tutor/src/components/task-plan/reading.cjsx
similarity index 100%
rename from src/components/task-plan/reading.cjsx
rename to tutor/src/components/task-plan/reading.cjsx
diff --git a/src/components/task-plan/select-topics.cjsx b/tutor/src/components/task-plan/select-topics.cjsx
similarity index 100%
rename from src/components/task-plan/select-topics.cjsx
rename to tutor/src/components/task-plan/select-topics.cjsx
diff --git a/src/components/task-plan/teacher-task-plans-listing.cjsx b/tutor/src/components/task-plan/teacher-task-plans-listing.cjsx
similarity index 100%
rename from src/components/task-plan/teacher-task-plans-listing.cjsx
rename to tutor/src/components/task-plan/teacher-task-plans-listing.cjsx
diff --git a/src/components/task-step/all-steps.cjsx b/tutor/src/components/task-step/all-steps.cjsx
similarity index 100%
rename from src/components/task-step/all-steps.cjsx
rename to tutor/src/components/task-step/all-steps.cjsx
diff --git a/src/components/task-step/concept-coach-end.cjsx b/tutor/src/components/task-step/concept-coach-end.cjsx
similarity index 92%
rename from src/components/task-step/concept-coach-end.cjsx
rename to tutor/src/components/task-step/concept-coach-end.cjsx
index a198d75692..54db66d466 100644
--- a/src/components/task-step/concept-coach-end.cjsx
+++ b/tutor/src/components/task-step/concept-coach-end.cjsx
@@ -3,7 +3,7 @@ BS = require 'react-bootstrap'
 _ = require 'underscore'
 
 {TaskStore} = require '../../flux/task'
-{CardBody, PinnableFooter, ChapterSectionMixin} = require 'openstax-react-components'
+{CardBody, PinnableFooter, ChapterSectionMixin} = require 'shared'
 Review = require '../task/review'
 
 ConceptCoachEnd = React.createClass
diff --git a/src/components/task-step/ends.cjsx b/tutor/src/components/task-step/ends.cjsx
similarity index 98%
rename from src/components/task-step/ends.cjsx
rename to tutor/src/components/task-step/ends.cjsx
index f8955a3b54..960859db6b 100644
--- a/src/components/task-step/ends.cjsx
+++ b/tutor/src/components/task-step/ends.cjsx
@@ -14,7 +14,7 @@ TaskStep = require './index'
 {CourseStore} = require '../../flux/course'
 {TaskStore} = require '../../flux/task'
 {TaskStepStore} = require '../../flux/task-step'
-{CardBody, PinnableFooter} = require 'openstax-react-components'
+{CardBody, PinnableFooter} = require 'shared'
 Review = require '../task/review'
 {ConceptCoachEnd} = require './concept-coach-end'
 
diff --git a/src/components/task-step/exercise.cjsx b/tutor/src/components/task-step/exercise.cjsx
similarity index 97%
rename from src/components/task-step/exercise.cjsx
rename to tutor/src/components/task-step/exercise.cjsx
index 22bb02290f..84891337b5 100644
--- a/src/components/task-step/exercise.cjsx
+++ b/tutor/src/components/task-step/exercise.cjsx
@@ -8,8 +8,8 @@ _ = require 'underscore'
 
 BrowseTheBook = require '../buttons/browse-the-book'
 
-{ChapterSectionMixin, CardBody, ExerciseWithScroll} = require 'openstax-react-components'
-{ExControlButtons} = require 'openstax-react-components/src/components/exercise/controls'
+{ChapterSectionMixin, CardBody, ExerciseWithScroll} = require 'shared'
+{ExControlButtons} = require 'shared/src/components/exercise/controls'
 
 ScrollSpy = require '../scroll-spy'
 StepFooter = require './step-footer'
diff --git a/src/components/task-step/index.cjsx b/tutor/src/components/task-step/index.cjsx
similarity index 97%
rename from src/components/task-step/index.cjsx
rename to tutor/src/components/task-step/index.cjsx
index 6530399546..f16a492243 100644
--- a/src/components/task-step/index.cjsx
+++ b/tutor/src/components/task-step/index.cjsx
@@ -1,5 +1,5 @@
 React = require 'react'
-{SpyMode} = require 'openstax-react-components'
+{SpyMode} = require 'shared'
 
 {TaskStore} = require '../../flux/task'
 {TaskStepActions, TaskStepStore} = require '../../flux/task-step'
diff --git a/src/components/task-step/step-footer-mixin.cjsx b/tutor/src/components/task-step/step-footer-mixin.cjsx
similarity index 98%
rename from src/components/task-step/step-footer-mixin.cjsx
rename to tutor/src/components/task-step/step-footer-mixin.cjsx
index 11adc86604..7c7839fdd0 100644
--- a/src/components/task-step/step-footer-mixin.cjsx
+++ b/tutor/src/components/task-step/step-footer-mixin.cjsx
@@ -8,7 +8,7 @@ classnames = require 'classnames'
 BrowseTheBook = require '../buttons/browse-the-book'
 LateIcon = require '../late-icon'
 
-{ChapterSectionMixin} = require 'openstax-react-components'
+{ChapterSectionMixin} = require 'shared'
 
 {TaskStore} = require '../../flux/task'
 {ViewingAsStudentName} = require '../task/viewing-as-student-name'
diff --git a/src/components/task-step/step-footer.cjsx b/tutor/src/components/task-step/step-footer.cjsx
similarity index 100%
rename from src/components/task-step/step-footer.cjsx
rename to tutor/src/components/task-step/step-footer.cjsx
diff --git a/src/components/task-step/step-mixin.cjsx b/tutor/src/components/task-step/step-mixin.cjsx
similarity index 95%
rename from src/components/task-step/step-mixin.cjsx
rename to tutor/src/components/task-step/step-mixin.cjsx
index 9d5308b4d4..f43bfc2b90 100644
--- a/src/components/task-step/step-mixin.cjsx
+++ b/tutor/src/components/task-step/step-mixin.cjsx
@@ -5,7 +5,7 @@ classnames = require 'classnames'
 _ = require 'underscore'
 {StepPanel} = require '../../helpers/policies'
 
-{AsyncButton, CardBody} = require 'openstax-react-components'
+{AsyncButton, CardBody} = require 'shared'
 {TaskStore} = require '../../flux/task'
 
 {TaskStepStore} = require '../../flux/task-step'
diff --git a/src/components/task-step/step-with-reading-content.cjsx b/tutor/src/components/task-step/step-with-reading-content.cjsx
similarity index 95%
rename from src/components/task-step/step-with-reading-content.cjsx
rename to tutor/src/components/task-step/step-with-reading-content.cjsx
index aa7a55cf6a..4a8a56493a 100644
--- a/src/components/task-step/step-with-reading-content.cjsx
+++ b/tutor/src/components/task-step/step-with-reading-content.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 
 {TaskStepStore} = require '../../flux/task-step'
-{ArbitraryHtmlAndMath, ChapterSectionMixin} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath, ChapterSectionMixin} = require 'shared'
 {BookContentMixin, LinkContentMixin} = require '../book-content-mixin'
 
 # TODO: will combine with below, after BookContentMixin clean up
diff --git a/src/components/task-step/step.cjsx b/tutor/src/components/task-step/step.cjsx
similarity index 88%
rename from src/components/task-step/step.cjsx
rename to tutor/src/components/task-step/step.cjsx
index 9e1ad5866e..b36f40259b 100644
--- a/src/components/task-step/step.cjsx
+++ b/tutor/src/components/task-step/step.cjsx
@@ -3,7 +3,7 @@ BS = require 'react-bootstrap'
 _ = require 'underscore'
 {StepPanel} = require '../../helpers/policies'
 
-{AsyncButton, CardBody} = require 'openstax-react-components'
+{AsyncButton, CardBody} = require 'shared'
 
 StepCard = React.createClass
   displayName: 'StepCard'
diff --git a/src/components/task-teacher-review/breadcrumbs.cjsx b/tutor/src/components/task-teacher-review/breadcrumbs.cjsx
similarity index 100%
rename from src/components/task-teacher-review/breadcrumbs.cjsx
rename to tutor/src/components/task-teacher-review/breadcrumbs.cjsx
diff --git a/src/components/task-teacher-review/crumb-mixin.cjsx b/tutor/src/components/task-teacher-review/crumb-mixin.cjsx
similarity index 100%
rename from src/components/task-teacher-review/crumb-mixin.cjsx
rename to tutor/src/components/task-teacher-review/crumb-mixin.cjsx
diff --git a/src/components/task-teacher-review/exercise.cjsx b/tutor/src/components/task-teacher-review/exercise.cjsx
similarity index 98%
rename from src/components/task-teacher-review/exercise.cjsx
rename to tutor/src/components/task-teacher-review/exercise.cjsx
index 1885cb226e..49516d4e25 100644
--- a/src/components/task-teacher-review/exercise.cjsx
+++ b/tutor/src/components/task-teacher-review/exercise.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 _ = require 'underscore'
 BS = require 'react-bootstrap'
 
-{ArbitraryHtmlAndMath, Question, CardBody, FreeResponse, ExerciseGroup} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath, Question, CardBody, FreeResponse, ExerciseGroup} = require 'shared'
 {ExerciseStore} = require '../../flux/exercise'
 
 TaskTeacherReviewQuestion = React.createClass
diff --git a/src/components/task-teacher-review/index.cjsx b/tutor/src/components/task-teacher-review/index.cjsx
similarity index 99%
rename from src/components/task-teacher-review/index.cjsx
rename to tutor/src/components/task-teacher-review/index.cjsx
index 5d3482bdd9..5c3c38b55d 100644
--- a/src/components/task-teacher-review/index.cjsx
+++ b/tutor/src/components/task-teacher-review/index.cjsx
@@ -5,7 +5,7 @@ CrumbMixin = require './crumb-mixin'
 Breadcrumbs = require './breadcrumbs'
 {ReviewShell} = require './review'
 {StatsModalShell} = require '../plan-stats'
-{PinnedHeaderFooterCard, ChapterSectionMixin, ScrollToMixin} = require 'openstax-react-components'
+{PinnedHeaderFooterCard, ChapterSectionMixin, ScrollToMixin} = require 'shared'
 
 _ = require 'underscore'
 
diff --git a/src/components/task-teacher-review/review.cjsx b/tutor/src/components/task-teacher-review/review.cjsx
similarity index 100%
rename from src/components/task-teacher-review/review.cjsx
rename to tutor/src/components/task-teacher-review/review.cjsx
diff --git a/src/components/task/breadcrumbs.cjsx b/tutor/src/components/task/breadcrumbs.cjsx
similarity index 98%
rename from src/components/task/breadcrumbs.cjsx
rename to tutor/src/components/task/breadcrumbs.cjsx
index 2e20449855..bdc59f392f 100644
--- a/src/components/task/breadcrumbs.cjsx
+++ b/tutor/src/components/task/breadcrumbs.cjsx
@@ -6,7 +6,7 @@ React = require 'react'
 _ = require 'underscore'
 
 CrumbMixin = require './crumb-mixin'
-{ChapterSectionMixin, ResizeListenerMixin} = require 'openstax-react-components'
+{ChapterSectionMixin, ResizeListenerMixin} = require 'shared'
 {BreadcrumbTaskDynamic} = require '../breadcrumb'
 
 module.exports = React.createClass
diff --git a/src/components/task/crumb-mixin.cjsx b/tutor/src/components/task/crumb-mixin.cjsx
similarity index 100%
rename from src/components/task/crumb-mixin.cjsx
rename to tutor/src/components/task/crumb-mixin.cjsx
diff --git a/src/components/task/details.cjsx b/tutor/src/components/task/details.cjsx
similarity index 100%
rename from src/components/task/details.cjsx
rename to tutor/src/components/task/details.cjsx
diff --git a/src/components/task/index.cjsx b/tutor/src/components/task/index.cjsx
similarity index 99%
rename from src/components/task/index.cjsx
rename to tutor/src/components/task/index.cjsx
index 97fc93eec8..2876d91306 100644
--- a/src/components/task/index.cjsx
+++ b/tutor/src/components/task/index.cjsx
@@ -25,7 +25,7 @@ ProgressPanel = require './progress/panel'
 
 {UnsavedStateMixin} = require '../unsaved-state'
 
-{PinnedHeaderFooterCard, PinnedHeader, ScrollToMixin} = require 'openstax-react-components'
+{PinnedHeaderFooterCard, PinnedHeader, ScrollToMixin} = require 'shared'
 
 module.exports = React.createClass
   propTypes:
diff --git a/src/components/task/progress/arrow.cjsx b/tutor/src/components/task/progress/arrow.cjsx
similarity index 100%
rename from src/components/task/progress/arrow.cjsx
rename to tutor/src/components/task/progress/arrow.cjsx
diff --git a/src/components/task/progress/index.cjsx b/tutor/src/components/task/progress/index.cjsx
similarity index 100%
rename from src/components/task/progress/index.cjsx
rename to tutor/src/components/task/progress/index.cjsx
diff --git a/src/components/task/progress/milestones.cjsx b/tutor/src/components/task/progress/milestones.cjsx
similarity index 98%
rename from src/components/task/progress/milestones.cjsx
rename to tutor/src/components/task/progress/milestones.cjsx
index 31a4b0f97c..2bf1525f38 100644
--- a/src/components/task/progress/milestones.cjsx
+++ b/tutor/src/components/task/progress/milestones.cjsx
@@ -4,7 +4,7 @@ BS = require 'react-bootstrap'
 classnames = require 'classnames'
 
 CrumbMixin = require '../crumb-mixin'
-{ChapterSectionMixin, ArbitraryHtmlAndMath} = require 'openstax-react-components'
+{ChapterSectionMixin, ArbitraryHtmlAndMath} = require 'shared'
 {BreadcrumbStatic} = require '../../breadcrumb'
 
 {TaskStepActions, TaskStepStore} = require '../../../flux/task-step'
diff --git a/src/components/task/progress/panel.cjsx b/tutor/src/components/task/progress/panel.cjsx
similarity index 100%
rename from src/components/task/progress/panel.cjsx
rename to tutor/src/components/task/progress/panel.cjsx
diff --git a/src/components/task/review.cjsx b/tutor/src/components/task/review.cjsx
similarity index 100%
rename from src/components/task/review.cjsx
rename to tutor/src/components/task/review.cjsx
diff --git a/src/components/task/viewing-as-student-name.cjsx b/tutor/src/components/task/viewing-as-student-name.cjsx
similarity index 100%
rename from src/components/task/viewing-as-student-name.cjsx
rename to tutor/src/components/task/viewing-as-student-name.cjsx
diff --git a/src/components/time-difference.cjsx b/tutor/src/components/time-difference.cjsx
similarity index 100%
rename from src/components/time-difference.cjsx
rename to tutor/src/components/time-difference.cjsx
diff --git a/src/components/time.cjsx b/tutor/src/components/time.cjsx
similarity index 100%
rename from src/components/time.cjsx
rename to tutor/src/components/time.cjsx
diff --git a/src/components/tri-state-checkbox.cjsx b/tutor/src/components/tri-state-checkbox.cjsx
similarity index 100%
rename from src/components/tri-state-checkbox.cjsx
rename to tutor/src/components/tri-state-checkbox.cjsx
diff --git a/src/components/tutor-dialog.cjsx b/tutor/src/components/tutor-dialog.cjsx
similarity index 98%
rename from src/components/tutor-dialog.cjsx
rename to tutor/src/components/tutor-dialog.cjsx
index 66b8873305..14917c5d2c 100644
--- a/src/components/tutor-dialog.cjsx
+++ b/tutor/src/components/tutor-dialog.cjsx
@@ -8,7 +8,7 @@ DialogProperties =
   title:         React.PropTypes.string.isRequired
   onOk:          React.PropTypes.func.isRequired
   onCancel:      React.PropTypes.func.isRequired
-  body:          React.PropTypes.element.isRequired
+  body:          React.PropTypes.any.isRequired
   show:          React.PropTypes.bool
   buttons:       React.PropTypes.arrayOf( React.PropTypes.element )
   okBtnText:     React.PropTypes.string
diff --git a/src/components/tutor-errors.cjsx b/tutor/src/components/tutor-errors.cjsx
similarity index 100%
rename from src/components/tutor-errors.cjsx
rename to tutor/src/components/tutor-errors.cjsx
diff --git a/src/components/tutor-input.cjsx b/tutor/src/components/tutor-input.cjsx
similarity index 100%
rename from src/components/tutor-input.cjsx
rename to tutor/src/components/tutor-input.cjsx
diff --git a/src/components/tutor-popover.cjsx b/tutor/src/components/tutor-popover.cjsx
similarity index 100%
rename from src/components/tutor-popover.cjsx
rename to tutor/src/components/tutor-popover.cjsx
diff --git a/src/components/unsaved-state.cjsx b/tutor/src/components/unsaved-state.cjsx
similarity index 100%
rename from src/components/unsaved-state.cjsx
rename to tutor/src/components/unsaved-state.cjsx
diff --git a/src/flux/app.coffee b/tutor/src/flux/app.coffee
similarity index 100%
rename from src/flux/app.coffee
rename to tutor/src/flux/app.coffee
diff --git a/src/flux/cc-dashboard.coffee b/tutor/src/flux/cc-dashboard.coffee
similarity index 100%
rename from src/flux/cc-dashboard.coffee
rename to tutor/src/flux/cc-dashboard.coffee
diff --git a/src/flux/course-appearance-codes.coffee b/tutor/src/flux/course-appearance-codes.coffee
similarity index 100%
rename from src/flux/course-appearance-codes.coffee
rename to tutor/src/flux/course-appearance-codes.coffee
diff --git a/src/flux/course-listing.coffee b/tutor/src/flux/course-listing.coffee
similarity index 100%
rename from src/flux/course-listing.coffee
rename to tutor/src/flux/course-listing.coffee
diff --git a/src/flux/course.coffee b/tutor/src/flux/course.coffee
similarity index 100%
rename from src/flux/course.coffee
rename to tutor/src/flux/course.coffee
diff --git a/src/flux/current-user.coffee b/tutor/src/flux/current-user.coffee
similarity index 100%
rename from src/flux/current-user.coffee
rename to tutor/src/flux/current-user.coffee
diff --git a/src/flux/ecosystems.coffee b/tutor/src/flux/ecosystems.coffee
similarity index 100%
rename from src/flux/ecosystems.coffee
rename to tutor/src/flux/ecosystems.coffee
diff --git a/src/flux/exercise.coffee b/tutor/src/flux/exercise.coffee
similarity index 100%
rename from src/flux/exercise.coffee
rename to tutor/src/flux/exercise.coffee
diff --git a/src/flux/helpers.coffee b/tutor/src/flux/helpers.coffee
similarity index 100%
rename from src/flux/helpers.coffee
rename to tutor/src/flux/helpers.coffee
diff --git a/src/flux/job.coffee b/tutor/src/flux/job.coffee
similarity index 100%
rename from src/flux/job.coffee
rename to tutor/src/flux/job.coffee
diff --git a/src/flux/media.coffee b/tutor/src/flux/media.coffee
similarity index 100%
rename from src/flux/media.coffee
rename to tutor/src/flux/media.coffee
diff --git a/src/flux/notifications.coffee b/tutor/src/flux/notifications.coffee
similarity index 100%
rename from src/flux/notifications.coffee
rename to tutor/src/flux/notifications.coffee
diff --git a/src/flux/performance-forecast.coffee b/tutor/src/flux/performance-forecast.coffee
similarity index 100%
rename from src/flux/performance-forecast.coffee
rename to tutor/src/flux/performance-forecast.coffee
diff --git a/src/flux/period.coffee b/tutor/src/flux/period.coffee
similarity index 100%
rename from src/flux/period.coffee
rename to tutor/src/flux/period.coffee
diff --git a/src/flux/plan-publish.coffee b/tutor/src/flux/plan-publish.coffee
similarity index 100%
rename from src/flux/plan-publish.coffee
rename to tutor/src/flux/plan-publish.coffee
diff --git a/src/flux/qa-exercise-data-filter.coffee b/tutor/src/flux/qa-exercise-data-filter.coffee
similarity index 100%
rename from src/flux/qa-exercise-data-filter.coffee
rename to tutor/src/flux/qa-exercise-data-filter.coffee
diff --git a/src/flux/reference-book-exercise.coffee b/tutor/src/flux/reference-book-exercise.coffee
similarity index 100%
rename from src/flux/reference-book-exercise.coffee
rename to tutor/src/flux/reference-book-exercise.coffee
diff --git a/src/flux/reference-book-page.coffee b/tutor/src/flux/reference-book-page.coffee
similarity index 100%
rename from src/flux/reference-book-page.coffee
rename to tutor/src/flux/reference-book-page.coffee
diff --git a/src/flux/reference-book.coffee b/tutor/src/flux/reference-book.coffee
similarity index 100%
rename from src/flux/reference-book.coffee
rename to tutor/src/flux/reference-book.coffee
diff --git a/src/flux/roster.coffee b/tutor/src/flux/roster.coffee
similarity index 100%
rename from src/flux/roster.coffee
rename to tutor/src/flux/roster.coffee
diff --git a/src/flux/scores-export.coffee b/tutor/src/flux/scores-export.coffee
similarity index 100%
rename from src/flux/scores-export.coffee
rename to tutor/src/flux/scores-export.coffee
diff --git a/src/flux/scores.coffee b/tutor/src/flux/scores.coffee
similarity index 100%
rename from src/flux/scores.coffee
rename to tutor/src/flux/scores.coffee
diff --git a/src/flux/step-title.coffee b/tutor/src/flux/step-title.coffee
similarity index 100%
rename from src/flux/step-title.coffee
rename to tutor/src/flux/step-title.coffee
diff --git a/src/flux/student-dashboard.coffee b/tutor/src/flux/student-dashboard.coffee
similarity index 100%
rename from src/flux/student-dashboard.coffee
rename to tutor/src/flux/student-dashboard.coffee
diff --git a/src/flux/task-plan-stats.coffee b/tutor/src/flux/task-plan-stats.coffee
similarity index 100%
rename from src/flux/task-plan-stats.coffee
rename to tutor/src/flux/task-plan-stats.coffee
diff --git a/src/flux/task-plan.coffee b/tutor/src/flux/task-plan.coffee
similarity index 100%
rename from src/flux/task-plan.coffee
rename to tutor/src/flux/task-plan.coffee
diff --git a/src/flux/task-progress.coffee b/tutor/src/flux/task-progress.coffee
similarity index 100%
rename from src/flux/task-progress.coffee
rename to tutor/src/flux/task-progress.coffee
diff --git a/src/flux/task-step.coffee b/tutor/src/flux/task-step.coffee
similarity index 100%
rename from src/flux/task-step.coffee
rename to tutor/src/flux/task-step.coffee
diff --git a/src/flux/task-teacher-review.coffee b/tutor/src/flux/task-teacher-review.coffee
similarity index 100%
rename from src/flux/task-teacher-review.coffee
rename to tutor/src/flux/task-teacher-review.coffee
diff --git a/src/flux/task.coffee b/tutor/src/flux/task.coffee
similarity index 100%
rename from src/flux/task.coffee
rename to tutor/src/flux/task.coffee
diff --git a/src/flux/tasking.coffee b/tutor/src/flux/tasking.coffee
similarity index 100%
rename from src/flux/tasking.coffee
rename to tutor/src/flux/tasking.coffee
diff --git a/src/flux/teacher-task-plan.coffee b/tutor/src/flux/teacher-task-plan.coffee
similarity index 100%
rename from src/flux/teacher-task-plan.coffee
rename to tutor/src/flux/teacher-task-plan.coffee
diff --git a/src/flux/time.coffee b/tutor/src/flux/time.coffee
similarity index 100%
rename from src/flux/time.coffee
rename to tutor/src/flux/time.coffee
diff --git a/src/flux/toc.coffee b/tutor/src/flux/toc.coffee
similarity index 100%
rename from src/flux/toc.coffee
rename to tutor/src/flux/toc.coffee
diff --git a/src/flux/transition.coffee b/tutor/src/flux/transition.coffee
similarity index 100%
rename from src/flux/transition.coffee
rename to tutor/src/flux/transition.coffee
diff --git a/src/helpers/analytics.coffee b/tutor/src/helpers/analytics.coffee
similarity index 100%
rename from src/helpers/analytics.coffee
rename to tutor/src/helpers/analytics.coffee
diff --git a/src/helpers/api.coffee b/tutor/src/helpers/api.coffee
similarity index 100%
rename from src/helpers/api.coffee
rename to tutor/src/helpers/api.coffee
diff --git a/src/helpers/clipboard.coffee b/tutor/src/helpers/clipboard.coffee
similarity index 100%
rename from src/helpers/clipboard.coffee
rename to tutor/src/helpers/clipboard.coffee
diff --git a/src/helpers/conditional-rendering.coffee b/tutor/src/helpers/conditional-rendering.coffee
similarity index 100%
rename from src/helpers/conditional-rendering.coffee
rename to tutor/src/helpers/conditional-rendering.coffee
diff --git a/src/helpers/content.coffee b/tutor/src/helpers/content.coffee
similarity index 100%
rename from src/helpers/content.coffee
rename to tutor/src/helpers/content.coffee
diff --git a/src/helpers/dom.coffee b/tutor/src/helpers/dom.coffee
similarity index 100%
rename from src/helpers/dom.coffee
rename to tutor/src/helpers/dom.coffee
diff --git a/src/helpers/durations.coffee b/tutor/src/helpers/durations.coffee
similarity index 100%
rename from src/helpers/durations.coffee
rename to tutor/src/helpers/durations.coffee
diff --git a/src/helpers/exercise.coffee b/tutor/src/helpers/exercise.coffee
similarity index 91%
rename from src/helpers/exercise.coffee
rename to tutor/src/helpers/exercise.coffee
index 965443696b..5b8023c72a 100644
--- a/src/helpers/exercise.coffee
+++ b/tutor/src/helpers/exercise.coffee
@@ -1,6 +1,6 @@
 _ = require 'underscore'
 {ExerciseStore} = require '../flux/exercise'
-{ExerciseHelpers} = require 'openstax-react-components'
+{ExerciseHelpers} = require 'shared'
 
 TutorHelpers = {
 
diff --git a/src/helpers/job.coffee b/tutor/src/helpers/job.coffee
similarity index 100%
rename from src/helpers/job.coffee
rename to tutor/src/helpers/job.coffee
diff --git a/src/helpers/notifications.coffee b/tutor/src/helpers/notifications.coffee
similarity index 76%
rename from src/helpers/notifications.coffee
rename to tutor/src/helpers/notifications.coffee
index 4f7d9f0bfe..36e54d1b5f 100644
--- a/src/helpers/notifications.coffee
+++ b/tutor/src/helpers/notifications.coffee
@@ -1,4 +1,4 @@
-{NotificationActions} = require 'openstax-react-components'
+{NotificationActions} = require 'shared'
 
 
 module.exports =
diff --git a/src/helpers/period.coffee b/tutor/src/helpers/period.coffee
similarity index 100%
rename from src/helpers/period.coffee
rename to tutor/src/helpers/period.coffee
diff --git a/src/helpers/plan.coffee b/tutor/src/helpers/plan.coffee
similarity index 100%
rename from src/helpers/plan.coffee
rename to tutor/src/helpers/plan.coffee
diff --git a/src/helpers/policies/index.coffee b/tutor/src/helpers/policies/index.coffee
similarity index 100%
rename from src/helpers/policies/index.coffee
rename to tutor/src/helpers/policies/index.coffee
diff --git a/src/helpers/policies/policies.coffee b/tutor/src/helpers/policies/policies.coffee
similarity index 100%
rename from src/helpers/policies/policies.coffee
rename to tutor/src/helpers/policies/policies.coffee
diff --git a/src/helpers/policies/utils.coffee b/tutor/src/helpers/policies/utils.coffee
similarity index 100%
rename from src/helpers/policies/utils.coffee
rename to tutor/src/helpers/policies/utils.coffee
diff --git a/src/helpers/routes-and-destinations.coffee b/tutor/src/helpers/routes-and-destinations.coffee
similarity index 100%
rename from src/helpers/routes-and-destinations.coffee
rename to tutor/src/helpers/routes-and-destinations.coffee
diff --git a/src/helpers/string.coffee b/tutor/src/helpers/string.coffee
similarity index 100%
rename from src/helpers/string.coffee
rename to tutor/src/helpers/string.coffee
diff --git a/src/helpers/task-plan.coffee b/tutor/src/helpers/task-plan.coffee
similarity index 100%
rename from src/helpers/task-plan.coffee
rename to tutor/src/helpers/task-plan.coffee
diff --git a/src/helpers/task.coffee b/tutor/src/helpers/task.coffee
similarity index 100%
rename from src/helpers/task.coffee
rename to tutor/src/helpers/task.coffee
diff --git a/src/helpers/time.coffee b/tutor/src/helpers/time.coffee
similarity index 100%
rename from src/helpers/time.coffee
rename to tutor/src/helpers/time.coffee
diff --git a/src/helpers/webpack-async-loader.coffee b/tutor/src/helpers/webpack-async-loader.coffee
similarity index 100%
rename from src/helpers/webpack-async-loader.coffee
rename to tutor/src/helpers/webpack-async-loader.coffee
diff --git a/src/helpers/window.coffee b/tutor/src/helpers/window.coffee
similarity index 100%
rename from src/helpers/window.coffee
rename to tutor/src/helpers/window.coffee
diff --git a/src/qa.coffee b/tutor/src/qa.coffee
similarity index 100%
rename from src/qa.coffee
rename to tutor/src/qa.coffee
diff --git a/src/router.cjsx b/tutor/src/router.cjsx
similarity index 100%
rename from src/router.cjsx
rename to tutor/src/router.cjsx
diff --git a/src/sandbox.cjsx b/tutor/src/sandbox.cjsx
similarity index 100%
rename from src/sandbox.cjsx
rename to tutor/src/sandbox.cjsx
diff --git a/test-integration/README.md b/tutor/test-integration/README.md
similarity index 100%
rename from test-integration/README.md
rename to tutor/test-integration/README.md
diff --git a/test-integration/all.coffee b/tutor/test-integration/all.coffee
similarity index 100%
rename from test-integration/all.coffee
rename to tutor/test-integration/all.coffee
diff --git a/test-integration/calendar.coffee b/tutor/test-integration/calendar.coffee
similarity index 100%
rename from test-integration/calendar.coffee
rename to tutor/test-integration/calendar.coffee
diff --git a/test-integration/cc-dashboard.coffee b/tutor/test-integration/cc-dashboard.coffee
similarity index 100%
rename from test-integration/cc-dashboard.coffee
rename to tutor/test-integration/cc-dashboard.coffee
diff --git a/test-integration/exhaustive/calendar.coffee b/tutor/test-integration/exhaustive/calendar.coffee
similarity index 100%
rename from test-integration/exhaustive/calendar.coffee
rename to tutor/test-integration/exhaustive/calendar.coffee
diff --git a/test-integration/exhaustive/index.js b/tutor/test-integration/exhaustive/index.js
similarity index 100%
rename from test-integration/exhaustive/index.js
rename to tutor/test-integration/exhaustive/index.js
diff --git a/test-integration/exhaustive/reference-book.coffee b/tutor/test-integration/exhaustive/reference-book.coffee
similarity index 100%
rename from test-integration/exhaustive/reference-book.coffee
rename to tutor/test-integration/exhaustive/reference-book.coffee
diff --git a/test-integration/helpers/README.md b/tutor/test-integration/helpers/README.md
similarity index 100%
rename from test-integration/helpers/README.md
rename to tutor/test-integration/helpers/README.md
diff --git a/test-integration/helpers/describe.coffee b/tutor/test-integration/helpers/describe.coffee
similarity index 100%
rename from test-integration/helpers/describe.coffee
rename to tutor/test-integration/helpers/describe.coffee
diff --git a/test-integration/helpers/index.coffee b/tutor/test-integration/helpers/index.coffee
similarity index 100%
rename from test-integration/helpers/index.coffee
rename to tutor/test-integration/helpers/index.coffee
diff --git a/test-integration/helpers/timeout.coffee b/tutor/test-integration/helpers/timeout.coffee
similarity index 100%
rename from test-integration/helpers/timeout.coffee
rename to tutor/test-integration/helpers/timeout.coffee
diff --git a/test-integration/helpers/ui/README.md b/tutor/test-integration/helpers/ui/README.md
similarity index 100%
rename from test-integration/helpers/ui/README.md
rename to tutor/test-integration/helpers/ui/README.md
diff --git a/test-integration/helpers/ui/calendar.coffee b/tutor/test-integration/helpers/ui/calendar.coffee
similarity index 100%
rename from test-integration/helpers/ui/calendar.coffee
rename to tutor/test-integration/helpers/ui/calendar.coffee
diff --git a/test-integration/helpers/ui/cc-dashboard.coffee b/tutor/test-integration/helpers/ui/cc-dashboard.coffee
similarity index 100%
rename from test-integration/helpers/ui/cc-dashboard.coffee
rename to tutor/test-integration/helpers/ui/cc-dashboard.coffee
diff --git a/test-integration/helpers/ui/cc-roster.coffee b/tutor/test-integration/helpers/ui/cc-roster.coffee
similarity index 100%
rename from test-integration/helpers/ui/cc-roster.coffee
rename to tutor/test-integration/helpers/ui/cc-roster.coffee
diff --git a/test-integration/helpers/ui/course-select.coffee b/tutor/test-integration/helpers/ui/course-select.coffee
similarity index 100%
rename from test-integration/helpers/ui/course-select.coffee
rename to tutor/test-integration/helpers/ui/course-select.coffee
diff --git a/test-integration/helpers/ui/exercise-selector.coffee b/tutor/test-integration/helpers/ui/exercise-selector.coffee
similarity index 100%
rename from test-integration/helpers/ui/exercise-selector.coffee
rename to tutor/test-integration/helpers/ui/exercise-selector.coffee
diff --git a/test-integration/helpers/ui/forecast.coffee b/tutor/test-integration/helpers/ui/forecast.coffee
similarity index 100%
rename from test-integration/helpers/ui/forecast.coffee
rename to tutor/test-integration/helpers/ui/forecast.coffee
diff --git a/test-integration/helpers/ui/items.coffee b/tutor/test-integration/helpers/ui/items.coffee
similarity index 100%
rename from test-integration/helpers/ui/items.coffee
rename to tutor/test-integration/helpers/ui/items.coffee
diff --git a/test-integration/helpers/ui/reference-book.coffee b/tutor/test-integration/helpers/ui/reference-book.coffee
similarity index 100%
rename from test-integration/helpers/ui/reference-book.coffee
rename to tutor/test-integration/helpers/ui/reference-book.coffee
diff --git a/test-integration/helpers/ui/roster.coffee b/tutor/test-integration/helpers/ui/roster.coffee
similarity index 100%
rename from test-integration/helpers/ui/roster.coffee
rename to tutor/test-integration/helpers/ui/roster.coffee
diff --git a/test-integration/helpers/ui/scores.coffee b/tutor/test-integration/helpers/ui/scores.coffee
similarity index 100%
rename from test-integration/helpers/ui/scores.coffee
rename to tutor/test-integration/helpers/ui/scores.coffee
diff --git a/test-integration/helpers/ui/student-dashboard.coffee b/tutor/test-integration/helpers/ui/student-dashboard.coffee
similarity index 100%
rename from test-integration/helpers/ui/student-dashboard.coffee
rename to tutor/test-integration/helpers/ui/student-dashboard.coffee
diff --git a/test-integration/helpers/ui/task-builder.coffee b/tutor/test-integration/helpers/ui/task-builder.coffee
similarity index 100%
rename from test-integration/helpers/ui/task-builder.coffee
rename to tutor/test-integration/helpers/ui/task-builder.coffee
diff --git a/test-integration/helpers/ui/task-plan-review.coffee b/tutor/test-integration/helpers/ui/task-plan-review.coffee
similarity index 100%
rename from test-integration/helpers/ui/task-plan-review.coffee
rename to tutor/test-integration/helpers/ui/task-plan-review.coffee
diff --git a/test-integration/helpers/ui/task-teacher.coffee b/tutor/test-integration/helpers/ui/task-teacher.coffee
similarity index 100%
rename from test-integration/helpers/ui/task-teacher.coffee
rename to tutor/test-integration/helpers/ui/task-teacher.coffee
diff --git a/test-integration/helpers/ui/task.coffee b/tutor/test-integration/helpers/ui/task.coffee
similarity index 100%
rename from test-integration/helpers/ui/task.coffee
rename to tutor/test-integration/helpers/ui/task.coffee
diff --git a/test-integration/helpers/ui/test-element.coffee b/tutor/test-integration/helpers/ui/test-element.coffee
similarity index 100%
rename from test-integration/helpers/ui/test-element.coffee
rename to tutor/test-integration/helpers/ui/test-element.coffee
diff --git a/test-integration/helpers/ui/user.coffee b/tutor/test-integration/helpers/ui/user.coffee
similarity index 100%
rename from test-integration/helpers/ui/user.coffee
rename to tutor/test-integration/helpers/ui/user.coffee
diff --git a/test-integration/helpers/utils/dom.coffee b/tutor/test-integration/helpers/utils/dom.coffee
similarity index 100%
rename from test-integration/helpers/utils/dom.coffee
rename to tutor/test-integration/helpers/utils/dom.coffee
diff --git a/test-integration/helpers/utils/for-each.coffee b/tutor/test-integration/helpers/utils/for-each.coffee
similarity index 100%
rename from test-integration/helpers/utils/for-each.coffee
rename to tutor/test-integration/helpers/utils/for-each.coffee
diff --git a/test-integration/helpers/utils/fresh-id.coffee b/tutor/test-integration/helpers/utils/fresh-id.coffee
similarity index 100%
rename from test-integration/helpers/utils/fresh-id.coffee
rename to tutor/test-integration/helpers/utils/fresh-id.coffee
diff --git a/test-integration/helpers/utils/index.coffee b/tutor/test-integration/helpers/utils/index.coffee
similarity index 100%
rename from test-integration/helpers/utils/index.coffee
rename to tutor/test-integration/helpers/utils/index.coffee
diff --git a/test-integration/helpers/utils/screenshot.coffee b/tutor/test-integration/helpers/utils/screenshot.coffee
similarity index 100%
rename from test-integration/helpers/utils/screenshot.coffee
rename to tutor/test-integration/helpers/utils/screenshot.coffee
diff --git a/test-integration/helpers/utils/to-locator.coffee b/tutor/test-integration/helpers/utils/to-locator.coffee
similarity index 100%
rename from test-integration/helpers/utils/to-locator.coffee
rename to tutor/test-integration/helpers/utils/to-locator.coffee
diff --git a/test-integration/helpers/utils/verbose.coffee b/tutor/test-integration/helpers/utils/verbose.coffee
similarity index 100%
rename from test-integration/helpers/utils/verbose.coffee
rename to tutor/test-integration/helpers/utils/verbose.coffee
diff --git a/test-integration/helpers/utils/wait.coffee b/tutor/test-integration/helpers/utils/wait.coffee
similarity index 100%
rename from test-integration/helpers/utils/wait.coffee
rename to tutor/test-integration/helpers/utils/wait.coffee
diff --git a/test-integration/helpers/utils/window-position.coffee b/tutor/test-integration/helpers/utils/window-position.coffee
similarity index 100%
rename from test-integration/helpers/utils/window-position.coffee
rename to tutor/test-integration/helpers/utils/window-position.coffee
diff --git a/test-integration/index.js b/tutor/test-integration/index.js
similarity index 100%
rename from test-integration/index.js
rename to tutor/test-integration/index.js
diff --git a/test-integration/roster.coffee b/tutor/test-integration/roster.coffee
similarity index 100%
rename from test-integration/roster.coffee
rename to tutor/test-integration/roster.coffee
diff --git a/test-integration/scores.coffee b/tutor/test-integration/scores.coffee
similarity index 100%
rename from test-integration/scores.coffee
rename to tutor/test-integration/scores.coffee
diff --git a/test-integration/simple.js b/tutor/test-integration/simple.js
similarity index 100%
rename from test-integration/simple.js
rename to tutor/test-integration/simple.js
diff --git a/test-integration/student/dashboard.js b/tutor/test-integration/student/dashboard.js
similarity index 100%
rename from test-integration/student/dashboard.js
rename to tutor/test-integration/student/dashboard.js
diff --git a/test-integration/task-plan/cleanup.coffee b/tutor/test-integration/task-plan/cleanup.coffee
similarity index 100%
rename from test-integration/task-plan/cleanup.coffee
rename to tutor/test-integration/task-plan/cleanup.coffee
diff --git a/test-integration/task-plan/draft.coffee b/tutor/test-integration/task-plan/draft.coffee
similarity index 100%
rename from test-integration/task-plan/draft.coffee
rename to tutor/test-integration/task-plan/draft.coffee
diff --git a/test-integration/task-plan/homework.coffee b/tutor/test-integration/task-plan/homework.coffee
similarity index 100%
rename from test-integration/task-plan/homework.coffee
rename to tutor/test-integration/task-plan/homework.coffee
diff --git a/test-integration/task-plan/publish.coffee b/tutor/test-integration/task-plan/publish.coffee
similarity index 100%
rename from test-integration/task-plan/publish.coffee
rename to tutor/test-integration/task-plan/publish.coffee
diff --git a/test-integration/task.coffee b/tutor/test-integration/task.coffee
similarity index 100%
rename from test-integration/task.coffee
rename to tutor/test-integration/task.coffee
diff --git a/test-integration/writing-a-spec.md b/tutor/test-integration/writing-a-spec.md
similarity index 100%
rename from test-integration/writing-a-spec.md
rename to tutor/test-integration/writing-a-spec.md
diff --git a/test/DEBUG_README.md b/tutor/test/DEBUG_README.md
similarity index 100%
rename from test/DEBUG_README.md
rename to tutor/test/DEBUG_README.md
diff --git a/tutor/test/all-tests.coffee b/tutor/test/all-tests.coffee
new file mode 100644
index 0000000000..4453eafe2c
--- /dev/null
+++ b/tutor/test/all-tests.coffee
@@ -0,0 +1,78 @@
+# For some reason, this navbar component test will have warnings about setting
+# state when component is unmounted if it's after some of the other specs.
+# The tests still run and progress just fine despite the warnings, but for now,
+# I'm leaving this test here.
+# TODO figure out why.
+#
+# Components
+require './components/course-listing.spec'
+require './components/cc-dashboard/index.spec'
+require './components/cc-dashboard/dashboard.spec'
+require './components/navbar/index.spec'
+require './components/navbar/account-link.spec'
+require './components/navbar/user-actions-menu.spec'
+require './components/navbar/center-controls.spec'
+require './components/navbar/server-error-monitoring.spec'
+require './components/task-plan/reading-plan.spec'
+require './components/task-plan/builder/index.spec'
+require './components/task-plan/homework-plan.spec'
+require './components/task-plan/homework/exercise-controls.spec'
+require './components/task-plan/footer.spec'
+require './components/task.spec'
+require './components/task-homework.spec'
+require './components/task-homework-past-due.spec'
+require './components/task-content.spec'
+require './components/practice.spec'
+require './components/course-calendar/plan.spec'
+require './components/course-calendar.spec'
+require './components/performance-forecast/index.spec'
+require './components/performance-forecast/chapter.spec'
+require './components/performance-forecast/section.spec'
+require './components/performance-forecast/practice-button.spec'
+require './components/performance-forecast/progress-bar.spec'
+require './components/performance-forecast/weaker-panel.spec'
+require './components/performance-forecast/weaker-sections.spec'
+require './components/course-periods-nav.spec'
+require './components/student-dashboard.spec'
+require './components/student-dashboard/progress-guide.spec'
+require './components/reference-book.spec'
+require './components/reference-book/slide-out-menu-toggle.spec'
+require './components/course-settings/roster.spec'
+require './components/icon.spec'
+require './components/tutor-input.spec'
+require './components/tutor-dialog.spec'
+require './components/unsaved-state.spec'
+require './components/buttons/browse-the-book.spec'
+require './components/book-content-mixin.spec'
+require './components/scores/reading-cell.spec'
+require './components/scores/homework-cell.spec'
+require './components/name.spec'
+require './components/scroll-to-link-mixin.spec'
+require './components/media-preview.spec'
+require './components/tutor-popover.spec'
+require './components/course-grouping-label.spec'
+
+# Flux your muscle
+require './crud-store.spec'
+require './task-store.spec'
+require './task-step-store.spec'
+require './loadable.spec'
+require './teacher-task-plan-store.spec'
+require './performance-forecast-store.spec'
+require './step-panel-policy.spec'
+require './time.spec'
+require './current-user-store.spec'
+require './course-listing-store.spec'
+require './flux/plan-publish.spec'
+require './flux/media.spec'
+require './flux/exercise.spec'
+require './flux/tasking.spec'
+
+# Helpers
+require './task-helpers.spec'
+require './dom-helpers.spec'
+require './helpers/string.spec'
+require './helpers/period.spec'
+require './helpers/job.spec'
+require './helpers/time.spec'
+require './helpers/analytics.spec'
diff --git a/test/components/book-content-mixin.spec.coffee b/tutor/test/components/book-content-mixin.spec.coffee
similarity index 100%
rename from test/components/book-content-mixin.spec.coffee
rename to tutor/test/components/book-content-mixin.spec.coffee
diff --git a/test/components/buttons/browse-the-book.spec.coffee b/tutor/test/components/buttons/browse-the-book.spec.coffee
similarity index 100%
rename from test/components/buttons/browse-the-book.spec.coffee
rename to tutor/test/components/buttons/browse-the-book.spec.coffee
diff --git a/test/components/cc-dashboard/dashboard.spec.coffee b/tutor/test/components/cc-dashboard/dashboard.spec.coffee
similarity index 100%
rename from test/components/cc-dashboard/dashboard.spec.coffee
rename to tutor/test/components/cc-dashboard/dashboard.spec.coffee
diff --git a/test/components/cc-dashboard/index.spec.coffee b/tutor/test/components/cc-dashboard/index.spec.coffee
similarity index 85%
rename from test/components/cc-dashboard/index.spec.coffee
rename to tutor/test/components/cc-dashboard/index.spec.coffee
index d1d9c851f0..ec43c8105c 100644
--- a/test/components/cc-dashboard/index.spec.coffee
+++ b/tutor/test/components/cc-dashboard/index.spec.coffee
@@ -8,7 +8,7 @@ DashboardShell = require '../../../src/components/cc-dashboard'
 BaseModel = require '../../../api/courses/1/cc/dashboard.json'
 ExtendBaseStore = (props) -> _.extend({}, BaseModel, props)
 
-BlankCourse = ExtendBaseStore(course: periods: [])
+BlankCourse = ExtendBaseStore(course:{ periods: [], name: "Blank!"})
 
 IDS =
   BLANK: '0'
@@ -29,12 +29,14 @@ describe 'Concept Coach Dashboard Shell', ->
     CourseActions.loaded(CourseObj, IDS.BASE)
     _.defer(done)
 
-  it 'displays the help page when there are no periods', ->
+  it 'displays the help page when there are no periods', (done) ->
     RenderHelper(IDS.BLANK).then ({dom}) ->
       expect(dom).to.exist
       expect(dom.classList.contains('cc-dashboard-help')).to.be.true
+      done()
 
-  it 'renders dashboard when there are periods', ->
+  it 'renders dashboard when there are periods', (done) ->
     RenderHelper(IDS.BASE).then ({dom}) ->
       expect(dom).to.exist
       expect(dom.classList.contains('cc-dashboard')).to.exist
+      done()
diff --git a/test/components/countdown-redirect.spec.coffee b/tutor/test/components/countdown-redirect.spec.coffee
similarity index 100%
rename from test/components/countdown-redirect.spec.coffee
rename to tutor/test/components/countdown-redirect.spec.coffee
diff --git a/test/components/course-calendar.spec.coffee b/tutor/test/components/course-calendar.spec.coffee
similarity index 100%
rename from test/components/course-calendar.spec.coffee
rename to tutor/test/components/course-calendar.spec.coffee
diff --git a/test/components/course-calendar/plan-durations.fake.json b/tutor/test/components/course-calendar/plan-durations.fake.json
similarity index 100%
rename from test/components/course-calendar/plan-durations.fake.json
rename to tutor/test/components/course-calendar/plan-durations.fake.json
diff --git a/test/components/course-calendar/plan.spec.cjsx b/tutor/test/components/course-calendar/plan.spec.cjsx
similarity index 100%
rename from test/components/course-calendar/plan.spec.cjsx
rename to tutor/test/components/course-calendar/plan.spec.cjsx
diff --git a/test/components/course-grouping-label.spec.coffee b/tutor/test/components/course-grouping-label.spec.coffee
similarity index 100%
rename from test/components/course-grouping-label.spec.coffee
rename to tutor/test/components/course-grouping-label.spec.coffee
diff --git a/test/components/course-listing.spec.coffee b/tutor/test/components/course-listing.spec.coffee
similarity index 100%
rename from test/components/course-listing.spec.coffee
rename to tutor/test/components/course-listing.spec.coffee
diff --git a/test/components/course-periods-nav.spec.cjsx b/tutor/test/components/course-periods-nav.spec.cjsx
similarity index 100%
rename from test/components/course-periods-nav.spec.cjsx
rename to tutor/test/components/course-periods-nav.spec.cjsx
diff --git a/test/components/course-settings/change-period.spec.coffee b/tutor/test/components/course-settings/change-period.spec.coffee
similarity index 100%
rename from test/components/course-settings/change-period.spec.coffee
rename to tutor/test/components/course-settings/change-period.spec.coffee
diff --git a/test/components/course-settings/roster.spec.coffee b/tutor/test/components/course-settings/roster.spec.coffee
similarity index 100%
rename from test/components/course-settings/roster.spec.coffee
rename to tutor/test/components/course-settings/roster.spec.coffee
diff --git a/test/components/exercises/preview.spec.coffee b/tutor/test/components/exercises/preview.spec.coffee
similarity index 100%
rename from test/components/exercises/preview.spec.coffee
rename to tutor/test/components/exercises/preview.spec.coffee
diff --git a/test/components/helpers/calendar/actions.coffee b/tutor/test/components/helpers/calendar/actions.coffee
similarity index 100%
rename from test/components/helpers/calendar/actions.coffee
rename to tutor/test/components/helpers/calendar/actions.coffee
diff --git a/test/components/helpers/calendar/checks.coffee b/tutor/test/components/helpers/calendar/checks.coffee
similarity index 100%
rename from test/components/helpers/calendar/checks.coffee
rename to tutor/test/components/helpers/calendar/checks.coffee
diff --git a/test/components/helpers/calendar/index.coffee b/tutor/test/components/helpers/calendar/index.coffee
similarity index 100%
rename from test/components/helpers/calendar/index.coffee
rename to tutor/test/components/helpers/calendar/index.coffee
diff --git a/test/components/helpers/component-testing.coffee b/tutor/test/components/helpers/component-testing.coffee
similarity index 100%
rename from test/components/helpers/component-testing.coffee
rename to tutor/test/components/helpers/component-testing.coffee
diff --git a/test/components/helpers/task-plan.coffee b/tutor/test/components/helpers/task-plan.coffee
similarity index 100%
rename from test/components/helpers/task-plan.coffee
rename to tutor/test/components/helpers/task-plan.coffee
diff --git a/test/components/helpers/task/actions.coffee b/tutor/test/components/helpers/task/actions.coffee
similarity index 99%
rename from test/components/helpers/task/actions.coffee
rename to tutor/test/components/helpers/task/actions.coffee
index d31101144d..65d01d66a9 100644
--- a/test/components/helpers/task/actions.coffee
+++ b/tutor/test/components/helpers/task/actions.coffee
@@ -9,7 +9,7 @@ React = require 'react/addons'
 
 TaskStep = require '../../../../src/components/task-step'
 {BreadcrumbTaskDynamic} = require '../../../../src/components/breadcrumb'
-{Exercise} = require 'openstax-react-components'
+{Exercise} = require 'shared'
 
 {routerStub, commonActions} = require '../utilities'
 
diff --git a/test/components/helpers/task/checks.coffee b/tutor/test/components/helpers/task/checks.coffee
similarity index 99%
rename from test/components/helpers/task/checks.coffee
rename to tutor/test/components/helpers/task/checks.coffee
index 5b4c070e31..6131cbc0b4 100644
--- a/test/components/helpers/task/checks.coffee
+++ b/tutor/test/components/helpers/task/checks.coffee
@@ -10,7 +10,7 @@ React = require 'react/addons'
 {BreadcrumbTaskDynamic} = require '../../../../src/components/breadcrumb'
 ProgressBar = require '../../../../src/components/task/progress'
 ProgressPanel = require '../../../../src/components/task/progress/panel'
-{ExerciseGroup} = require 'openstax-react-components'
+{ExerciseGroup} = require 'shared'
 
 checks =
   _checkAllowContinue: ({div, component, state, router, history}) ->
diff --git a/test/components/helpers/task/index.cjsx b/tutor/test/components/helpers/task/index.cjsx
similarity index 100%
rename from test/components/helpers/task/index.cjsx
rename to tutor/test/components/helpers/task/index.cjsx
diff --git a/test/components/helpers/utilities.cjsx b/tutor/test/components/helpers/utilities.cjsx
similarity index 100%
rename from test/components/helpers/utilities.cjsx
rename to tutor/test/components/helpers/utilities.cjsx
diff --git a/test/components/icon.spec.cjsx b/tutor/test/components/icon.spec.cjsx
similarity index 100%
rename from test/components/icon.spec.cjsx
rename to tutor/test/components/icon.spec.cjsx
diff --git a/test/components/media-preview.spec.coffee b/tutor/test/components/media-preview.spec.coffee
similarity index 100%
rename from test/components/media-preview.spec.coffee
rename to tutor/test/components/media-preview.spec.coffee
diff --git a/test/components/multi-select.spec.coffee b/tutor/test/components/multi-select.spec.coffee
similarity index 100%
rename from test/components/multi-select.spec.coffee
rename to tutor/test/components/multi-select.spec.coffee
diff --git a/test/components/name.spec.coffee b/tutor/test/components/name.spec.coffee
similarity index 100%
rename from test/components/name.spec.coffee
rename to tutor/test/components/name.spec.coffee
diff --git a/test/components/navbar/account-link.spec.coffee b/tutor/test/components/navbar/account-link.spec.coffee
similarity index 100%
rename from test/components/navbar/account-link.spec.coffee
rename to tutor/test/components/navbar/account-link.spec.coffee
diff --git a/test/components/navbar/center-controls.spec.coffee b/tutor/test/components/navbar/center-controls.spec.coffee
similarity index 100%
rename from test/components/navbar/center-controls.spec.coffee
rename to tutor/test/components/navbar/center-controls.spec.coffee
diff --git a/test/components/navbar/index.spec.coffee b/tutor/test/components/navbar/index.spec.coffee
similarity index 100%
rename from test/components/navbar/index.spec.coffee
rename to tutor/test/components/navbar/index.spec.coffee
diff --git a/test/components/navbar/server-error-monitoring.spec.coffee b/tutor/test/components/navbar/server-error-monitoring.spec.coffee
similarity index 100%
rename from test/components/navbar/server-error-monitoring.spec.coffee
rename to tutor/test/components/navbar/server-error-monitoring.spec.coffee
diff --git a/test/components/navbar/spec-test-params.coffee b/tutor/test/components/navbar/spec-test-params.coffee
similarity index 100%
rename from test/components/navbar/spec-test-params.coffee
rename to tutor/test/components/navbar/spec-test-params.coffee
diff --git a/test/components/navbar/user-actions-menu.spec.coffee b/tutor/test/components/navbar/user-actions-menu.spec.coffee
similarity index 100%
rename from test/components/navbar/user-actions-menu.spec.coffee
rename to tutor/test/components/navbar/user-actions-menu.spec.coffee
diff --git a/test/components/performance-forecast/chapter.spec.coffee b/tutor/test/components/performance-forecast/chapter.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/chapter.spec.coffee
rename to tutor/test/components/performance-forecast/chapter.spec.coffee
diff --git a/test/components/performance-forecast/index.spec.coffee b/tutor/test/components/performance-forecast/index.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/index.spec.coffee
rename to tutor/test/components/performance-forecast/index.spec.coffee
diff --git a/test/components/performance-forecast/practice-button.spec.coffee b/tutor/test/components/performance-forecast/practice-button.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/practice-button.spec.coffee
rename to tutor/test/components/performance-forecast/practice-button.spec.coffee
diff --git a/test/components/performance-forecast/progress-bar.spec.coffee b/tutor/test/components/performance-forecast/progress-bar.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/progress-bar.spec.coffee
rename to tutor/test/components/performance-forecast/progress-bar.spec.coffee
diff --git a/test/components/performance-forecast/section.spec.coffee b/tutor/test/components/performance-forecast/section.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/section.spec.coffee
rename to tutor/test/components/performance-forecast/section.spec.coffee
diff --git a/test/components/performance-forecast/weaker-panel.spec.coffee b/tutor/test/components/performance-forecast/weaker-panel.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/weaker-panel.spec.coffee
rename to tutor/test/components/performance-forecast/weaker-panel.spec.coffee
diff --git a/test/components/performance-forecast/weaker-sections.spec.coffee b/tutor/test/components/performance-forecast/weaker-sections.spec.coffee
similarity index 100%
rename from test/components/performance-forecast/weaker-sections.spec.coffee
rename to tutor/test/components/performance-forecast/weaker-sections.spec.coffee
diff --git a/test/components/practice.spec.coffee b/tutor/test/components/practice.spec.coffee
similarity index 100%
rename from test/components/practice.spec.coffee
rename to tutor/test/components/practice.spec.coffee
diff --git a/test/components/qa/exercises.spec.coffee b/tutor/test/components/qa/exercises.spec.coffee
similarity index 100%
rename from test/components/qa/exercises.spec.coffee
rename to tutor/test/components/qa/exercises.spec.coffee
diff --git a/test/components/question.spec.cjsx b/tutor/test/components/question.spec.cjsx
similarity index 96%
rename from test/components/question.spec.cjsx
rename to tutor/test/components/question.spec.cjsx
index c9f784cbe3..78f4a0a1b6 100644
--- a/test/components/question.spec.cjsx
+++ b/tutor/test/components/question.spec.cjsx
@@ -1,6 +1,6 @@
 {Testing, expect, sinon, _, ReactTestUtils} = require './helpers/component-testing'
 
-{Question} = require 'openstax-react-components'
+{Question} = require 'shared'
 
 STEP = (require '../../api/tasks/4.json').steps[0]
 MODEL = STEP.content.questions[0]
diff --git a/test/components/questions/dashboard.spec.coffee b/tutor/test/components/questions/dashboard.spec.coffee
similarity index 91%
rename from test/components/questions/dashboard.spec.coffee
rename to tutor/test/components/questions/dashboard.spec.coffee
index 28eabbb604..ed579a1632 100644
--- a/test/components/questions/dashboard.spec.coffee
+++ b/tutor/test/components/questions/dashboard.spec.coffee
@@ -27,5 +27,5 @@ describe 'Questions Dashboard Component', ->
     CourseActions.loaded(course, COURSE_ID)
     Testing.renderComponent( Dashboard, props: @props ).then ({dom}) ->
       expect(dom.textContent).to.contain(
-        'Exclude desired questions before giving students access to Concept Coach'
+        'Students will only see questions from sections they work on in Concept Coach'
       )
diff --git a/test/components/questions/exercises-display.spec.coffee b/tutor/test/components/questions/exercises-display.spec.coffee
similarity index 71%
rename from test/components/questions/exercises-display.spec.coffee
rename to tutor/test/components/questions/exercises-display.spec.coffee
index 042bc1cf5f..afdf6b1971 100644
--- a/test/components/questions/exercises-display.spec.coffee
+++ b/tutor/test/components/questions/exercises-display.spec.coffee
@@ -3,30 +3,35 @@ ld = require 'lodash'
 
 ExercisesDisplay = require '../../../src/components/questions/exercises-display'
 
+COURSE  = require '../../../api/courses/1.json'
 EXERCISES = require '../../../api/exercises'
 SECTION_IDS  = [1, 2]
 COURSE_ID = '1'
 
 {ExerciseActions} = require '../../../src/flux/exercise'
+{CourseActions} = require '../../../src/flux/course'
 
 
 describe 'QL exercises display', ->
 
   beforeEach ->
     @props =
+      ecosystemId: '1'
       courseId: COURSE_ID
       helpTooltip: 'This is help'
       sectionIds: SECTION_IDS
+    CourseActions.loaded(COURSE, COURSE_ID)
     ExerciseActions.loadedForCourse(EXERCISES, COURSE_ID, SECTION_IDS)
     sinon.stub(ExerciseActions, 'saveExerciseExclusion').returns(null)
 
   afterEach ->
     ExerciseActions.saveExerciseExclusion.restore()
 
-  it 'renders cards', ->
-    Testing.renderComponent( ExercisesDisplay, props: @props ).then ({dom}) ->
+  it 'renders cards', (done) ->
+    Testing.renderComponent( ExercisesDisplay, props: @props, unmountAfter: 20 ).then ({dom}) ->
       expect( dom.querySelectorAll('.openstax-exercise-preview').length ).to
         .equal(EXERCISES.items.length)
+      done()
 
   it 'displays dialog when exercises are at minimum (5)', ->
     expect(EXERCISES.items.length).to.equal(5)
@@ -38,12 +43,3 @@ describe 'QL exercises display', ->
         document.querySelector('.question-library-min-exercise-exclusions .btn-default')
       )
       expect( ExerciseActions.saveExerciseExclusion ).to.have.been.called
-
-  it 'saves exercise exclusions immediately when not at minimum', ->
-    ex = ld.cloneDeep(EXERCISES)
-    ex.items = ex.items.slice(0, 3)
-    ExerciseActions.loadedForCourse(ex, COURSE_ID, SECTION_IDS)
-    Testing.renderComponent( ExercisesDisplay, props: @props ).then ({dom}) ->
-      Testing.actions.click(dom.querySelector('.openstax-exercise-preview .action.exclude'))
-      expect( ExerciseActions.saveExerciseExclusion ).to.have.been
-        .calledWith(COURSE_ID, ex.items[0].id, true)
diff --git a/test/components/reference-book.spec.coffee b/tutor/test/components/reference-book.spec.coffee
similarity index 100%
rename from test/components/reference-book.spec.coffee
rename to tutor/test/components/reference-book.spec.coffee
diff --git a/test/components/reference-book/slide-out-menu-toggle.spec.coffee b/tutor/test/components/reference-book/slide-out-menu-toggle.spec.coffee
similarity index 100%
rename from test/components/reference-book/slide-out-menu-toggle.spec.coffee
rename to tutor/test/components/reference-book/slide-out-menu-toggle.spec.coffee
diff --git a/test/components/reference-book/teacher-content-toggle.spec.coffee b/tutor/test/components/reference-book/teacher-content-toggle.spec.coffee
similarity index 100%
rename from test/components/reference-book/teacher-content-toggle.spec.coffee
rename to tutor/test/components/reference-book/teacher-content-toggle.spec.coffee
diff --git a/test/components/scores/homework-cell.spec.coffee b/tutor/test/components/scores/homework-cell.spec.coffee
similarity index 100%
rename from test/components/scores/homework-cell.spec.coffee
rename to tutor/test/components/scores/homework-cell.spec.coffee
diff --git a/test/components/scores/late-work.spec.coffee b/tutor/test/components/scores/late-work.spec.coffee
similarity index 91%
rename from test/components/scores/late-work.spec.coffee
rename to tutor/test/components/scores/late-work.spec.coffee
index 1441aff7f0..887cc80ffb 100644
--- a/test/components/scores/late-work.spec.coffee
+++ b/tutor/test/components/scores/late-work.spec.coffee
@@ -57,10 +57,13 @@ describe 'Student Scores Latework Popover', ->
 
   it 'displays re-approve messages for addtional work', ->
     @props.task.is_late_work_accepted = true
+    @props.task.completed_exercise_count = 7
+    @props.task.completed_on_time_step_count = 0
+    @props.task.completed_accepted_late_exercise_count = 2
     @props.task.completed_accepted_late_step_count = 2
     @props.task.completed_step_count = 7
     Testing.renderComponent( LateWorkPopover, props: @props ).then ({dom}) ->
       expect(dom.querySelector('.body').textContent).to.include(
-        'This student worked 6 questions'
+        "This student worked 3 questions\nafter you accepted a late score"
       )
       expect(dom.querySelector('.popover-title').textContent).to.equal('Additional late work')
diff --git a/test/components/scores/reading-cell.spec.coffee b/tutor/test/components/scores/reading-cell.spec.coffee
similarity index 100%
rename from test/components/scores/reading-cell.spec.coffee
rename to tutor/test/components/scores/reading-cell.spec.coffee
diff --git a/test/components/scroll-spy.spec.cjsx b/tutor/test/components/scroll-spy.spec.cjsx
similarity index 100%
rename from test/components/scroll-spy.spec.cjsx
rename to tutor/test/components/scroll-spy.spec.cjsx
diff --git a/test/components/scroll-to-link-mixin.spec.coffee b/tutor/test/components/scroll-to-link-mixin.spec.coffee
similarity index 100%
rename from test/components/scroll-to-link-mixin.spec.coffee
rename to tutor/test/components/scroll-to-link-mixin.spec.coffee
diff --git a/test/components/student-dashboard.spec.coffee b/tutor/test/components/student-dashboard.spec.coffee
similarity index 100%
rename from test/components/student-dashboard.spec.coffee
rename to tutor/test/components/student-dashboard.spec.coffee
diff --git a/test/components/student-dashboard/event-row.cjsx b/tutor/test/components/student-dashboard/event-row.cjsx
similarity index 100%
rename from test/components/student-dashboard/event-row.cjsx
rename to tutor/test/components/student-dashboard/event-row.cjsx
diff --git a/test/components/student-dashboard/progress-guide.spec.coffee b/tutor/test/components/student-dashboard/progress-guide.spec.coffee
similarity index 100%
rename from test/components/student-dashboard/progress-guide.spec.coffee
rename to tutor/test/components/student-dashboard/progress-guide.spec.coffee
diff --git a/test/components/task-content.spec.coffee b/tutor/test/components/task-content.spec.coffee
similarity index 100%
rename from test/components/task-content.spec.coffee
rename to tutor/test/components/task-content.spec.coffee
diff --git a/test/components/task-homework-past-due.spec.coffee b/tutor/test/components/task-homework-past-due.spec.coffee
similarity index 100%
rename from test/components/task-homework-past-due.spec.coffee
rename to tutor/test/components/task-homework-past-due.spec.coffee
diff --git a/test/components/task-homework.spec.coffee b/tutor/test/components/task-homework.spec.coffee
similarity index 100%
rename from test/components/task-homework.spec.coffee
rename to tutor/test/components/task-homework.spec.coffee
diff --git a/tutor/test/components/task-plan/breadcrumbs.spec b/tutor/test/components/task-plan/breadcrumbs.spec
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/components/task-plan/builder/index.spec.coffee b/tutor/test/components/task-plan/builder/index.spec.coffee
similarity index 100%
rename from test/components/task-plan/builder/index.spec.coffee
rename to tutor/test/components/task-plan/builder/index.spec.coffee
diff --git a/test/components/task-plan/external-plan.spec.coffee b/tutor/test/components/task-plan/external-plan.spec.coffee
similarity index 100%
rename from test/components/task-plan/external-plan.spec.coffee
rename to tutor/test/components/task-plan/external-plan.spec.coffee
diff --git a/test/components/task-plan/footer.spec.coffee b/tutor/test/components/task-plan/footer.spec.coffee
similarity index 100%
rename from test/components/task-plan/footer.spec.coffee
rename to tutor/test/components/task-plan/footer.spec.coffee
diff --git a/test/components/task-plan/homework-plan.spec.coffee b/tutor/test/components/task-plan/homework-plan.spec.coffee
similarity index 100%
rename from test/components/task-plan/homework-plan.spec.coffee
rename to tutor/test/components/task-plan/homework-plan.spec.coffee
diff --git a/test/components/task-plan/homework/choose-exercises.spec.coffee b/tutor/test/components/task-plan/homework/choose-exercises.spec.coffee
similarity index 100%
rename from test/components/task-plan/homework/choose-exercises.spec.coffee
rename to tutor/test/components/task-plan/homework/choose-exercises.spec.coffee
diff --git a/test/components/task-plan/homework/exercise-controls.spec.cjsx b/tutor/test/components/task-plan/homework/exercise-controls.spec.cjsx
similarity index 100%
rename from test/components/task-plan/homework/exercise-controls.spec.cjsx
rename to tutor/test/components/task-plan/homework/exercise-controls.spec.cjsx
diff --git a/test/components/task-plan/lms-info.spec.coffee b/tutor/test/components/task-plan/lms-info.spec.coffee
similarity index 100%
rename from test/components/task-plan/lms-info.spec.coffee
rename to tutor/test/components/task-plan/lms-info.spec.coffee
diff --git a/test/components/task-plan/reading-plan.spec.coffee b/tutor/test/components/task-plan/reading-plan.spec.coffee
similarity index 100%
rename from test/components/task-plan/reading-plan.spec.coffee
rename to tutor/test/components/task-plan/reading-plan.spec.coffee
diff --git a/test/components/task.spec.coffee b/tutor/test/components/task.spec.coffee
similarity index 100%
rename from test/components/task.spec.coffee
rename to tutor/test/components/task.spec.coffee
diff --git a/test/components/tutor-dialog.spec.coffee b/tutor/test/components/tutor-dialog.spec.coffee
similarity index 100%
rename from test/components/tutor-dialog.spec.coffee
rename to tutor/test/components/tutor-dialog.spec.coffee
diff --git a/test/components/tutor-input.spec.cjsx b/tutor/test/components/tutor-input.spec.cjsx
similarity index 100%
rename from test/components/tutor-input.spec.cjsx
rename to tutor/test/components/tutor-input.spec.cjsx
diff --git a/test/components/tutor-popover.spec.cjsx b/tutor/test/components/tutor-popover.spec.cjsx
similarity index 99%
rename from test/components/tutor-popover.spec.cjsx
rename to tutor/test/components/tutor-popover.spec.cjsx
index 896c64787c..83a5af5f7c 100644
--- a/test/components/tutor-popover.spec.cjsx
+++ b/tutor/test/components/tutor-popover.spec.cjsx
@@ -1,7 +1,7 @@
 {Testing, sinon, expect, _, React} = require './helpers/component-testing'
 
 TutorPopover = require '../../src/components/tutor-popover'
-{ArbitraryHtmlAndMath} = require 'openstax-react-components'
+{ArbitraryHtmlAndMath} = require 'shared'
 
 TEST_LINK_TEXT = 'This is the link text.'
 TEST_HTML = '<p>This is the test HTML</p>
diff --git a/test/components/unsaved-state.spec.coffee b/tutor/test/components/unsaved-state.spec.coffee
similarity index 100%
rename from test/components/unsaved-state.spec.coffee
rename to tutor/test/components/unsaved-state.spec.coffee
diff --git a/test/course-listing-store.spec.coffee b/tutor/test/course-listing-store.spec.coffee
similarity index 100%
rename from test/course-listing-store.spec.coffee
rename to tutor/test/course-listing-store.spec.coffee
diff --git a/test/courses-test-data.coffee b/tutor/test/courses-test-data.coffee
similarity index 100%
rename from test/courses-test-data.coffee
rename to tutor/test/courses-test-data.coffee
diff --git a/test/crud-store.spec.coffee b/tutor/test/crud-store.spec.coffee
similarity index 100%
rename from test/crud-store.spec.coffee
rename to tutor/test/crud-store.spec.coffee
diff --git a/test/current-user-store.spec.coffee b/tutor/test/current-user-store.spec.coffee
similarity index 100%
rename from test/current-user-store.spec.coffee
rename to tutor/test/current-user-store.spec.coffee
diff --git a/test/dom-helpers.spec.coffee b/tutor/test/dom-helpers.spec.coffee
similarity index 100%
rename from test/dom-helpers.spec.coffee
rename to tutor/test/dom-helpers.spec.coffee
diff --git a/test/flux/cc-dashboard.spec.coffee b/tutor/test/flux/cc-dashboard.spec.coffee
similarity index 100%
rename from test/flux/cc-dashboard.spec.coffee
rename to tutor/test/flux/cc-dashboard.spec.coffee
diff --git a/test/flux/course-listing.spec.coffee b/tutor/test/flux/course-listing.spec.coffee
similarity index 100%
rename from test/flux/course-listing.spec.coffee
rename to tutor/test/flux/course-listing.spec.coffee
diff --git a/test/flux/course.spec.coffee b/tutor/test/flux/course.spec.coffee
similarity index 100%
rename from test/flux/course.spec.coffee
rename to tutor/test/flux/course.spec.coffee
diff --git a/test/flux/exercise.spec.coffee b/tutor/test/flux/exercise.spec.coffee
similarity index 100%
rename from test/flux/exercise.spec.coffee
rename to tutor/test/flux/exercise.spec.coffee
diff --git a/test/flux/media.spec.coffee b/tutor/test/flux/media.spec.coffee
similarity index 100%
rename from test/flux/media.spec.coffee
rename to tutor/test/flux/media.spec.coffee
diff --git a/test/flux/plan-publish.spec.coffee b/tutor/test/flux/plan-publish.spec.coffee
similarity index 100%
rename from test/flux/plan-publish.spec.coffee
rename to tutor/test/flux/plan-publish.spec.coffee
diff --git a/test/flux/qa-exercise-data-filter.spec.coffee b/tutor/test/flux/qa-exercise-data-filter.spec.coffee
similarity index 100%
rename from test/flux/qa-exercise-data-filter.spec.coffee
rename to tutor/test/flux/qa-exercise-data-filter.spec.coffee
diff --git a/test/flux/scores.spec.coffee b/tutor/test/flux/scores.spec.coffee
similarity index 100%
rename from test/flux/scores.spec.coffee
rename to tutor/test/flux/scores.spec.coffee
diff --git a/test/flux/tasking.spec.coffee b/tutor/test/flux/tasking.spec.coffee
similarity index 100%
rename from test/flux/tasking.spec.coffee
rename to tutor/test/flux/tasking.spec.coffee
diff --git a/test/flux/toc.spec.coffee b/tutor/test/flux/toc.spec.coffee
similarity index 100%
rename from test/flux/toc.spec.coffee
rename to tutor/test/flux/toc.spec.coffee
diff --git a/test/helpers/analytics.spec.coffee b/tutor/test/helpers/analytics.spec.coffee
similarity index 100%
rename from test/helpers/analytics.spec.coffee
rename to tutor/test/helpers/analytics.spec.coffee
diff --git a/test/helpers/api.spec.coffee b/tutor/test/helpers/api.spec.coffee
similarity index 100%
rename from test/helpers/api.spec.coffee
rename to tutor/test/helpers/api.spec.coffee
diff --git a/test/helpers/content.spec.coffee b/tutor/test/helpers/content.spec.coffee
similarity index 100%
rename from test/helpers/content.spec.coffee
rename to tutor/test/helpers/content.spec.coffee
diff --git a/test/helpers/job.spec.coffee b/tutor/test/helpers/job.spec.coffee
similarity index 100%
rename from test/helpers/job.spec.coffee
rename to tutor/test/helpers/job.spec.coffee
diff --git a/test/helpers/period.spec.coffee b/tutor/test/helpers/period.spec.coffee
similarity index 100%
rename from test/helpers/period.spec.coffee
rename to tutor/test/helpers/period.spec.coffee
diff --git a/test/helpers/string.spec.coffee b/tutor/test/helpers/string.spec.coffee
similarity index 100%
rename from test/helpers/string.spec.coffee
rename to tutor/test/helpers/string.spec.coffee
diff --git a/test/helpers/task-plan.spec.coffee b/tutor/test/helpers/task-plan.spec.coffee
similarity index 100%
rename from test/helpers/task-plan.spec.coffee
rename to tutor/test/helpers/task-plan.spec.coffee
diff --git a/test/helpers/time.spec.coffee b/tutor/test/helpers/time.spec.coffee
similarity index 100%
rename from test/helpers/time.spec.coffee
rename to tutor/test/helpers/time.spec.coffee
diff --git a/test/loadable.spec.cjsx b/tutor/test/loadable.spec.cjsx
similarity index 100%
rename from test/loadable.spec.cjsx
rename to tutor/test/loadable.spec.cjsx
diff --git a/test/performance-forecast-store.spec.coffee b/tutor/test/performance-forecast-store.spec.coffee
similarity index 100%
rename from test/performance-forecast-store.spec.coffee
rename to tutor/test/performance-forecast-store.spec.coffee
diff --git a/tutor/test/phantomjs-shims.js b/tutor/test/phantomjs-shims.js
new file mode 100644
index 0000000000..0e81ccb9ee
--- /dev/null
+++ b/tutor/test/phantomjs-shims.js
@@ -0,0 +1,36 @@
+// From https://github.com/facebook/react/blob/master/src/test/phantomjs-shims.js
+(function() {
+
+var Ap = Array.prototype;
+var slice = Ap.slice;
+var Fp = Function.prototype;
+
+if (!Fp.bind) {
+  // PhantomJS doesn't support Function.prototype.bind natively, so
+  // polyfill it whenever this module is required.
+  Fp.bind = function(context) {
+    var func = this;
+    var args = slice.call(arguments, 1);
+
+    function bound() {
+      var invokedAsConstructor = func.prototype && (this instanceof func);
+      return func.apply(
+        // Ignore the context parameter when invoking the bound function
+        // as a constructor. Note that this includes not only constructor
+        // invocations using the new keyword but also calls to base class
+        // constructors such as BaseClass.call(this, ...) or super(...).
+        !invokedAsConstructor && context || this,
+        args.concat(slice.call(arguments))
+      );
+    }
+
+    // The bound function must share the .prototype of the unbound
+    // function so that any object created by one constructor will count
+    // as an instance of both constructors.
+    bound.prototype = func.prototype;
+
+    return bound;
+  };
+}
+
+})();
diff --git a/test/step-panel-policy.spec.coffee b/tutor/test/step-panel-policy.spec.coffee
similarity index 100%
rename from test/step-panel-policy.spec.coffee
rename to tutor/test/step-panel-policy.spec.coffee
diff --git a/test/task-helpers.spec.coffee b/tutor/test/task-helpers.spec.coffee
similarity index 100%
rename from test/task-helpers.spec.coffee
rename to tutor/test/task-helpers.spec.coffee
diff --git a/test/task-step-store.spec.coffee b/tutor/test/task-step-store.spec.coffee
similarity index 100%
rename from test/task-step-store.spec.coffee
rename to tutor/test/task-step-store.spec.coffee
diff --git a/test/task-store.spec.coffee b/tutor/test/task-store.spec.coffee
similarity index 100%
rename from test/task-store.spec.coffee
rename to tutor/test/task-store.spec.coffee
diff --git a/test/teacher-task-plan-store.spec.coffee b/tutor/test/teacher-task-plan-store.spec.coffee
similarity index 100%
rename from test/teacher-task-plan-store.spec.coffee
rename to tutor/test/teacher-task-plan-store.spec.coffee
diff --git a/test/time.spec.coffee b/tutor/test/time.spec.coffee
similarity index 100%
rename from test/time.spec.coffee
rename to tutor/test/time.spec.coffee
diff --git a/webpack.config.coffee b/tutor/webpack.config.coffee
similarity index 100%
rename from webpack.config.coffee
rename to tutor/webpack.config.coffee
diff --git a/webpack.config.js b/webpack.config.js
index c855c0eb2d..0cd852623d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,2 +1,17 @@
 require('coffee-script/register');
-module.exports = require("./webpack.config.coffee");
+
+makeConfig = require("./configs/webpack/makeConfig");
+if (!process.env.OX_PROJECT){
+  console.warn("OX_PROJECT env var is not defined");
+  process.exit(1);
+}
+
+var mode = process.env.NODE_ENV || 'development';
+console.log("mode: ", mode);
+config = makeConfig(process.env.OX_PROJECT, mode);
+
+//config = require("./configs/webpack/testing-tutor.config.coffee");
+// testing debug - rm before mergeing
+// console.dir(config);
+
+module.exports = config