diff --git a/Gemfile b/Gemfile
index d8f91dc9..26cf25d9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -40,8 +40,7 @@ gem 'jbuilder', '~> 2.5'
 gem 'haml'
 
 gem "therubyracer"
-gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
-gem "twitter-bootstrap-rails"
+gem 'bootstrap', '~> 4.0.0.alpha6'
 
 gem 'jquery-ui-rails'
 gem 'friendly_id', '~> 5.1.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 324659ea..529d2037 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -41,7 +41,12 @@ GEM
     addressable (2.5.0)
       public_suffix (~> 2.0, >= 2.0.2)
     arel (7.1.4)
+    autoprefixer-rails (6.7.5)
+      execjs
     bcrypt (3.1.11)
+    bootstrap (4.0.0.alpha6)
+      autoprefixer-rails (>= 6.0.3)
+      sass (>= 3.4.19)
     builder (3.2.3)
     byebug (9.0.6)
     capybara (2.8.1)
@@ -59,7 +64,6 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    commonjs (0.2.7)
     concurrent-ruby (1.0.4)
     database_cleaner (1.5.3)
     debug_inspector (0.0.2)
@@ -92,13 +96,6 @@ GEM
       railties (>= 3.2.16)
     launchy (2.4.3)
       addressable (~> 2.3)
-    less (2.6.0)
-      commonjs (~> 0.2.7)
-    less-rails (2.7.1)
-      actionpack (>= 4.0)
-      less (~> 2.6.0)
-      sprockets (> 2, < 4)
-      tilt
     libv8 (3.16.14.17)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -216,11 +213,6 @@ GEM
     turbolinks (5.0.1)
       turbolinks-source (~> 5)
     turbolinks-source (5.0.0)
-    twitter-bootstrap-rails (3.2.2)
-      actionpack (>= 3.1)
-      execjs (>= 2.2.2, >= 2.2)
-      less-rails (>= 2.5.0)
-      railties (>= 3.1)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.4)
@@ -242,6 +234,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap (~> 4.0.0.alpha6)
   byebug
   capybara
   coffee-rails (~> 4.2)
@@ -253,7 +246,6 @@ DEPENDENCIES
   jquery-rails
   jquery-ui-rails
   launchy
-  less-rails
   listen (~> 3.0.5)
   newrelic_rpm
   omniauth
@@ -270,7 +262,6 @@ DEPENDENCIES
   spring-watcher-listen (~> 2.0.0)
   therubyracer
   turbolinks (~> 5)
-  twitter-bootstrap-rails
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
new file mode 100644
index 00000000..461d39d6
--- /dev/null
+++ b/app/assets/stylesheets/_variables.scss
@@ -0,0 +1,7 @@
+$primary-color: #9e9e9e; // grey
+$darkgrey: #212121;
+$lightgrey: #e0e0e0;
+$lightgreen: #C8E6C9; // lightgreen
+$lightred: #FFCDD2; // lightred
+$lightyellow: #fcf5e2; // lightyellow
+$orange: #ffab40; // orange
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
deleted file mode 100644
index 0ebd7fe8..00000000
--- a/app/assets/stylesheets/application.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 00000000..b709ee86
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,3 @@
+@import "bootstrap";
+@import "scaffolds";
+@import "recipients";
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 4ce42667..3508b887 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -1,89 +1,46 @@
+@import 'variables';
+
 body {
-  background-color: #fff;
   color: #333;
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
-  margin: 33px;
-}
-
-p, ol, ul, td {
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: 13px;
+  font-family: 'Roboto', sans-serif;  font-size: 13px;
   line-height: 18px;
   margin: 33px;
 }
 
-pre {
-  background-color: #eee;
-  padding: 10px;
-  font-size: 11px;
-}
-
-a {
-  color: #000;
-
-  &:visited {
-    color: #666;
+.notice, .alert, .subscription, .highlight {
+  margin-top: 12px;
+  padding: 24px;
+  text-align: center;
+  border-radius: 12px;
+  a, a:hover, a:visited {
+    text-decoration: underline;
   }
-
-  &:hover {
-    color: #fff;
-    background-color: #000;
-  }
-}
-
-th {
-  padding-bottom: 5px;
-}
-
-td {
-  padding-bottom: 7px;
-  padding-left: 5px;
-  padding-right: 5px;
 }
 
-div {
-  &.field, &.actions {
-    margin-bottom: 10px;
-  }
+.notice {
+  background-color: $lightgreen;
 }
 
-#notice {
-  color: green;
+.alert {
+  background-color: $lightred;
 }
 
-.field_with_errors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+.highlight {
+  background-color: $lightyellow;
 }
 
-#error_explanation {
-  width: 450px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 0;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
-
-  h2 {
-    text-align: left;
-    font-weight: bold;
-    padding: 5px 5px 5px 15px;
-    font-size: 12px;
-    margin: -7px;
-    margin-bottom: 0;
-    background-color: #c00;
-    color: #fff;
-  }
+header {
+  border-bottom: 1px solid $primary-color;
+  margin-bottom: 30px;
 
-  ul li {
-    font-size: 12px;
-    list-style: square;
+  a, a:hover, a:visited {
+    color: $darkgrey;
   }
 }
 
-label {
-  display: block;
+footer {
+  height: 90px;
+  border-top: 1px solid #ccc;
+  padding-top: 12px;
+  clear: both;
 }
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index b2209df7..ac2b15f0 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -1,38 +1,10 @@
 %header.row
-  .title.col.s9.m11.l8
-    .hide-on-small-only
-      %h5= link_to('Thoughtful<br/>Recommendations.com'.html_safe, root_path)
-    .hide-on-med-and-up
-      %h6= link_to('Thoughtful<br/>Recommendations.com'.html_safe, root_path)
+  .title.col-sm-8
+    %h2= link_to('EdContext'.html_safe, root_path)
 
-  .navigation.col.hide-on-med-and-down.l4.right-align
+  .navigation.col-sm-4.text-right
     - if current_user
-      - unless @limited_header
-        - if current_user.profile.blank?
-          = link_to 'Create Profile', new_profile_path, class: 'btn btn-small grey waves-effect waves-light '
-        - else
-          = link_to 'My Profile', direct_profile_path(current_user.profile), class: 'btn btn-small grey waves-effect waves-light '
-          = link_to 'My Bucketlist', bucketlist_path, class: 'btn btn-small grey waves-effect waves-light '
-
       = link_to 'Sign Out', destroy_user_session_path, rel: "nofollow", method: :delete, class: 'btn btn-small grey waves-effect waves-light '
     - else
       = link_to 'Login', new_user_session_path, class: 'btn btn-small grey waves-effect waves-light '
-      = link_to 'Contribute / Sign Up', contribute_profile_recommendation_path, class: 'btn btn-small grey waves-effect waves-light '
-
-  .col.s3.m1.hide-on-large-only.right-align
-    = link_to '<i class="mdi-navigation-menu medium black-text"></i>'.html_safe, '#', data: {activates: 'mobile-nav'}, class: 'button-collapse'
-    #mobile-nav.side-nav
-      %ul
-        - if current_user
-          - unless @limited_header
-            - if current_user.profile.present?
-              %li= link_to 'My Profile', direct_profile_path(current_user.profile)
-              %li= link_to 'My Bucketlist', bucketlist_path
-              %li= link_to 'Add Something', new_profile_recommendation_path
-            - else
-              %li= link_to 'Create Profile', new_profile_path
-
-          %li= link_to 'Sign Out', destroy_user_session_path, rel: "nofollow", method: :delete
-        - else
-          %li= link_to 'Login', new_user_session_path
-          %li= link_to 'Contribute / Sign Up', contribute_profile_recommendation_path
+      = link_to 'Register', new_user_registration_path, class: 'btn btn-small grey waves-effect waves-light '
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index eee28d59..586eb286 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -5,8 +5,16 @@
     %title Edcontext
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
+    = stylesheet_link_tag    'https://fonts.googleapis.com/css?family=Roboto:300'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
   %body
-    %p.notice= notice
-    %p.alert= alert
-    = yield
+    .container
+      = render partial: 'layouts/header'
+
+      - if notice.present?
+        %p.notice= notice
+
+      - if alert.present?
+        %p.alert= alert
+
+      = yield