diff --git a/core/app/assets/images/refinery/branch-end.gif b/core/app/assets/images/refinery/branch-end.gif
deleted file mode 100644
index 22e2a089f4..0000000000
Binary files a/core/app/assets/images/refinery/branch-end.gif and /dev/null differ
diff --git a/core/app/assets/images/refinery/branch-end.png b/core/app/assets/images/refinery/branch-end.png
new file mode 100644
index 0000000000..32d0b5f326
Binary files /dev/null and b/core/app/assets/images/refinery/branch-end.png differ
diff --git a/core/app/assets/images/refinery/branch-start.gif b/core/app/assets/images/refinery/branch-start.gif
deleted file mode 100644
index 824a21cce6..0000000000
Binary files a/core/app/assets/images/refinery/branch-start.gif and /dev/null differ
diff --git a/core/app/assets/images/refinery/branch-start.png b/core/app/assets/images/refinery/branch-start.png
new file mode 100644
index 0000000000..14fbb74ac0
Binary files /dev/null and b/core/app/assets/images/refinery/branch-start.png differ
diff --git a/core/app/assets/images/refinery/branch.gif b/core/app/assets/images/refinery/branch.gif
deleted file mode 100644
index 06bad1757e..0000000000
Binary files a/core/app/assets/images/refinery/branch.gif and /dev/null differ
diff --git a/core/app/assets/images/refinery/branch.png b/core/app/assets/images/refinery/branch.png
new file mode 100644
index 0000000000..5cbba02329
Binary files /dev/null and b/core/app/assets/images/refinery/branch.png differ
diff --git a/core/app/assets/javascripts/refinery/sortable_list.js b/core/app/assets/javascripts/refinery/sortable_list.js
index a4aa23b224..eb18167547 100644
--- a/core/app/assets/javascripts/refinery/sortable_list.js
+++ b/core/app/assets/javascripts/refinery/sortable_list.js
@@ -104,8 +104,8 @@ var create_sortable_list = function(options){
             this.list.div_with_list_and_actions.parents().siblings('div').fadeTo(0, 0.3);
             $('*:not("#reorder_action_done, #reorder_action")', this.list.actions).not(this.list.reorder_action_done.parents('li, ul, div')).fadeTo(0, 0.55);
             this.list.sortable_list.nestedSortable("enable");
-            this.list.reorder_action.hide();
-            this.list.reorder_action_done.show();
+            this.list.reorder_action.css('display', 'none');
+            this.list.reorder_action_done.css('display', 'block');
         }
         , disable_reordering: function(e){
             if(e) { e.preventDefault(); }
diff --git a/core/app/assets/stylesheets/normalize.css b/core/app/assets/stylesheets/normalize.css
new file mode 100644
index 0000000000..3d6624cd18
--- /dev/null
+++ b/core/app/assets/stylesheets/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_actions.sass b/core/app/assets/stylesheets/refinery/components/_actions.sass
new file mode 100644
index 0000000000..d014e48050
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_actions.sass
@@ -0,0 +1,41 @@
+#actions
+  ul
+    padding: 0
+    margin: 0
+    
+    li
+      display: block
+
+      a
+        background: linear-gradient(to bottom, white, #f9fafb)
+        border: 1px solid #c4cdd5
+        color: $base_color
+        border-radius: 3px
+        display: block
+        font-size: 0.9em
+        padding: 0.65em 1em
+        margin-bottom: 0.5em
+        text-decoration: none
+
+        &:before
+          color: $base_color
+
+        &:hover
+          background: #f9fafb
+
+
+        &.hidden
+          display: none
+
+
+        &.add_icon,
+        &.upload_icon
+          background: linear-gradient(to bottom, #65c3f7, $base_color)
+          border: 1px solid $base_color
+          color: white
+
+          &:before
+            color: white
+
+          &:hover
+            background: $base_color
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_dialog.sass b/core/app/assets/stylesheets/refinery/components/_dialog.sass
new file mode 100644
index 0000000000..3fdafc4fcd
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_dialog.sass
@@ -0,0 +1,219 @@
+.hide-overflow
+  overflow: hidden
+
+.ui-widget-overlay
+  background-color: rgba(0,0,0,0.25)
+  height: 100%
+  left: 0
+  position: fixed
+  top: 0
+  width: 100%
+  z-index: 550
+
+
+.ui-dialog
+  border-radius: 3px
+  box-shadow: 0px 0px 10px rgba(0,0,0,0.2)
+  position: absolute
+  background-color: #fff
+  color: $text_base_color
+  width: auto
+  z-index: 1000
+
+  #dialog_loading
+    position: fixed
+    top: 50%
+    left: 50%
+    width: 208px
+    height: 13px
+    margin: -6px 0 0 -104px
+
+  .ui-dialog-titlebar
+    padding: 1.25em
+    border-bottom: 1px solid $line_separator_colour
+
+  .ui-dialog-title
+    font-size: 1.1em
+    color: $text_base_color
+
+  .ui-dialog-titlebar-close
+    @include icon('times')
+    background: none
+    border: none
+    cursor: pointer
+    float: right
+    font-size: 1.2em
+    margin-top: -0.15em
+
+    span
+      border: 0
+      clip: rect(0 0 0 0)
+      height: 1px
+      margin: -1px
+      overflow: hidden
+      padding: 0
+      position: absolute
+      width: 1px
+
+  iframe
+    width: 100% !important
+
+
+#dialog_container
+  background-color: white
+  margin: 1em
+
+  #dialog_container #content .field,
+  .dialog_container .field
+    width: auto
+    margin: 5px 0
+
+  #dialog-form-actions .pagination
+    margin: -4px 6px -4px 0px
+    float: right
+    width: auto
+    a,
+    .current,
+    .disabled
+      line-height: 15px
+
+  #dialog_container #content .form-actions,
+  .ui-dialog .form-actions,
+  .dialog_container .form-actions
+    position: absolute
+    bottom: 0px
+    left: 0px
+    right: 0px
+    border-right: 0px
+    border-left: 0px
+    border-bottom: 0px
+    width: auto
+
+  #dialog_container.dialog.iframed #content .form-actions
+    position: fixed
+
+
+
+// #dialog_frame
+//   width: 952px
+//   height: 460px
+//   padding: 0px
+//   border: 0px solid #F2F1ED
+
+
+
+
+// .visual_editor_hideables
+//   display: none
+
+// .wym_dialog .form-actions,
+// .ui-dialog .form-actions
+//   @include form-actions
+
+// .dialog
+//   form
+//     margin-bottom: 45px
+
+//   .dialog_area > div > .field label:first-child,
+//   .dialog_area > div > label:first-child
+//     margin-top: 0px
+
+
+// .visual_editor_dialog .form-actions,
+// #content.form-actions.dialog-form-actions,
+// .ui-dialog .form-actions
+//   margin-top: 16px
+
+// .visual_editor_dialog .form-actions .form-actions-left,
+// .visual_editor_dialog .form-actions .form-actions-right,
+// .ui-dialog .form-actions .form-actions-left,
+// .ui-dialog .form-actions .form-actions-right
+//   position: absolute
+//   top: 10px
+
+// .visual_editor_dialog .form-actions .form-actions-left,
+// .ui-dialog .form-actions .form-actions-left
+//   left: 10px
+
+// .visual_editor_dialog .form-actions .form-actions-right,
+// .ui-dialog .form-actions .form-actions-right
+//   right: 10px
+
+// #content .form-actions .save-loader
+//   position: absolute
+//   right: -24px
+//   top: 4px
+
+// .visual_editor_dialog .form-actions, .ui-dialog .form-actions
+//   border: 0px none
+//   border-top: 1px solid #E8E8E8
+
+// #dialog_iframe
+//   position: relative
+
+
+
+// body.dialog #content .search_form
+//   float: right
+//   width: auto !important
+//   min-width: 300px
+//   margin-bottom: 0px
+
+
+
+
+
+
+// .ui-dialog[aria-describedby=editor_dialog],
+// .ui-dialog[aria-describedby=dialog_iframe]
+//   outline: none
+
+//   &.ui-dialog
+//     padding: 0
+
+//   &.ui-corner-all
+//     border: 4px solid #22A7F2
+//     border-radius: 0
+
+//   &.ui-widget
+//     font-family: inherit
+//     color: inherit
+
+//   .ui-widget-header
+//     background-image: none
+//     &.ui-corner-all
+//       border: none
+//       border-radius: 0
+
+
+//   .ui-dialog-titlebar
+//     padding: 0
+//     .ui-dialog-title
+//       font-weight: normal
+
+//     .ui-dialog-titlebar-close
+//       background-color: #22A7F2
+//       background-image: none
+//       border: none
+//       outline: none
+//       cursor: pointer
+//       right: 10px
+//       .ui-button-text
+//         display: none
+
+//       &.ui-button-icon-only .ui-icon
+//         position: static
+//         height: 20px
+
+
+
+//   .ui-dialog-content
+//     padding: 0
+//     overflow: visible
+
+//   .editor_dialog
+//     border: none
+
+//   iframe#dialog_frame, iframe#dialog_iframe
+//     display: block !important
+
diff --git a/core/app/assets/stylesheets/refinery/components/_dialog.scss b/core/app/assets/stylesheets/refinery/components/_dialog.scss
deleted file mode 100644
index e36d1f9497..0000000000
--- a/core/app/assets/stylesheets/refinery/components/_dialog.scss
+++ /dev/null
@@ -1,209 +0,0 @@
-/* dialog stuff */
-
-#dialog_container #content .field,
-.dialog_container .field {
-  width: auto;
-  margin: 5px 0;
-}
-#dialog-form-actions .pagination {
-  margin: -4px 6px -4px 0px;
-  float: right;
-  width: auto;
-  a,
-  .current,
-  .disabled{
-    line-height: 15px;
-  }
-}
-#dialog_frame {
-  width:952px;
-  height:460px;
-  padding: 0px;
-  border: 0px solid #F2F1ED;
-}
-.visual_editor_hideables {
-  display: none;
-}
-#content .form-actions,
-.wym_dialog .form-actions,
-.ui-dialog .form-actions {
-  @include form-actions;
-}
-.dialog {
-  form {
-    margin-bottom: 45px;
-  }
-  .dialog_area > div > .field label:first-child,
-  .dialog_area > div > label:first-child {
-    margin-top: 0px;
-  }
-}
-.visual_editor_dialog .form-actions,
-#content.form-actions.dialog-form-actions,
-.ui-dialog .form-actions {
-  margin-top: 16px;
-}
-#content .form-actions .form-actions-left,
-#content .form-actions .form-actions-right,
-.visual_editor_dialog .form-actions .form-actions-left,
-.visual_editor_dialog .form-actions .form-actions-right,
-.ui-dialog .form-actions .form-actions-left,
-.ui-dialog .form-actions .form-actions-right {
-  position: absolute;
-  top: 10px;
-}
-#content .form-actions .form-actions-left,
-.visual_editor_dialog .form-actions .form-actions-left,
-.ui-dialog .form-actions .form-actions-left {
-  left: 10px;
-}
-#content .form-actions .form-actions-right,
-.visual_editor_dialog .form-actions .form-actions-right,
-.ui-dialog .form-actions .form-actions-right {
-  right: 10px;
-}
-#content .form-actions .save-loader {
-  position: absolute;
-  right: -24px;
-  top: 4px;
-}
-.visual_editor_dialog .form-actions, .ui-dialog .form-actions {
-  border: 0px none;
-  border-top: 1px solid #E8E8E8;
-}
-#dialog_iframe {
-  position: relative;
-}
-#dialog_container #content .form-actions,
-.ui-dialog .form-actions,
-.dialog_container .form-actions {
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  border-right: 0px;
-  border-left: 0px;
-  border-bottom: 0px;
-  width: auto;
-}
-#dialog_container.dialog.iframed #content .form-actions {
-  position: fixed;
-}
-body.dialog #content .search_form {
-  float: right;
-  width: auto !important;
-  min-width: 300px;
-  margin-bottom: 0px;
-}
-.ui-dialog {
-  position: absolute;
-  background-color: #fff;
-  color: #000;
-  border: 4px solid #22A7F2;
-  width: auto;
-  z-index: 3;
-  #dialog_loading {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 208px;
-    height: 13px;
-    margin: -6px 0 0 -104px;
-  }
-  .ui-dialog-titlebar {
-    position: relative;
-    width: 100%;
-    height: 33px;
-    background-color: #22A7F2;
-  }
-  .ui-dialog-title {
-    float: left;
-    height: 33px;
-    line-height: 33px;
-    font-size: 16px;
-    padding-left: 10px;
-    color: white;
-  }
-  .ui-dialog-titlebar-close {
-    background-color: #22A7F2;
-    padding-right:0;
-    padding-left:0;
-    padding-top: 5px;
-    position: absolute;
-    right: 10px;
-    width: 22px;
-    height: 33px;
-    line-height: 33px;
-    border: none;
-    span {
-      display: block;
-      margin: 1px;
-      background: transparent image_url('refinery/cross.png') top left no-repeat;
-      text-indent:-10000px;
-    }
-  }
-  .ui-dialog-titlebar-close:hover, .ui-dialog-titlebar-close:focus {
-    padding: 0;
-  }
-  iframe {
-    clear:both;
-    border: 0px none;
-    margin-bottom:-1px;
-    margin-top:1px;
-    width: 100% !important;
-  }
-}
-.ui-dialog[aria-describedby=editor_dialog],
-.ui-dialog[aria-describedby=dialog_iframe] {
-  outline: none;
-
-  &.ui-dialog {
-    padding: 0;
-  }
-  &.ui-corner-all {
-    border: 4px solid #22A7F2;
-    border-radius: 0;
-  }
-  &.ui-widget {
-    font-family: inherit;
-    color: inherit;
-  }
-  .ui-widget-header {
-    background-image: none;
-    &.ui-corner-all {
-      border: none;
-      border-radius: 0;
-    }
-  }
-  .ui-dialog-titlebar {
-    padding: 0;
-    .ui-dialog-title {
-      font-weight: normal;
-    }
-    .ui-dialog-titlebar-close {
-      background-color: #22A7F2;
-      background-image: none;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      right: 10px;
-      .ui-button-text {
-        display: none;
-      }
-      &.ui-button-icon-only .ui-icon {
-        position: static;
-        height: 20px;
-      }
-    }
-  }
-  .ui-dialog-content {
-    padding: 0;
-    overflow: visible;
-  }
-  .editor_dialog {
-    border: none;
-  }
-  iframe#dialog_frame, iframe#dialog_iframe {
-    display: block !important;
-  }
-}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_flash.sass b/core/app/assets/stylesheets/refinery/components/_flash.sass
new file mode 100644
index 0000000000..5601613b20
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_flash.sass
@@ -0,0 +1,70 @@
+.flash
+  margin: 0 1.4em 1em
+  color: $text_base_color
+  font-size: 0.9em
+
+  a
+    font-weight: bold
+
+  &.flash_notice,
+  &.flash_message
+    border-top: 2px solid #50b83c
+    @include icon('check-circle', #50b83c)
+    @include panel(#e3f1df, 0.75em 0.25em 0.75em 0.75em)
+
+    a
+      color: #50b83c
+
+  &.flash_error,
+  &.flash_alert
+    border-top: 2px solid #de3618
+    @include icon('question-circle', #de3618)
+    @include panel(#fbeae5, 0.75em 0.25em 0.75em 0.75em)
+
+    a
+      color: #de3618
+
+  #flash_close
+    background: none
+    border: none
+    color: #41403C
+    cursor: pointer
+    float: right
+    font-size: 1em
+    text-transform: lowercase
+    @include icon('times-circle', #41403C, 1.2em)
+
+.errorExplanation
+  background-color: #fbeae5
+  border: 1px solid #de3618
+  border-radius: 3px
+  font-size: 0.9em
+  padding: 1em
+  margin-bottom: 1.5em
+
+  &:before
+    color: #de3618
+    display: inline-block
+    vertical-align: middle
+
+  p
+    display: inline-block
+    margin: 0
+    vertical-align: middle
+
+  ul
+    margin-bottom: 0
+
+    li
+      font-weight: bold
+
+
+.fieldWithErrors
+  input,
+  textarea
+    background-color: #fbeae5 !important
+    border: 1px solid #de3618 !important
+
+  iframe,
+  .visual_editor_box
+    border-color: #de3618 !important
diff --git a/core/app/assets/stylesheets/refinery/components/_form.sass b/core/app/assets/stylesheets/refinery/components/_form.sass
new file mode 100644
index 0000000000..8fa6801f57
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_form.sass
@@ -0,0 +1,42 @@
+form
+  label
+    display: block
+    font-size: 0.9em
+    margin-bottom: 0.4em
+
+    &.stripped
+      display: inline-block
+
+  .label_with_help
+    display: block
+
+    label
+      display: inline-block
+
+  .field
+    padding-bottom: 1.1em
+
+  input,
+  textarea
+    border: 1px solid #c4cdd5
+    border-radius: 3px
+    box-sizing: border-box
+    box-shadow: inset 0 1px 0 0 rgba(63,63,68,0.05)
+    display: block
+    font-size: 0.9em
+    padding: 0.65em
+
+    &[type="checkbox"]
+      display: inline-block
+
+
+    &.widest
+      width: 100%
+
+    &:focus
+      border: 1px solid $base_color
+      box-shadow: 0 0 0 1px $base_color
+      outline: none
+
+  select
+    font-size: 0.9em
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_form_actions.scss b/core/app/assets/stylesheets/refinery/components/_form_actions.scss
new file mode 100644
index 0000000000..ba82cba0cf
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_form_actions.scss
@@ -0,0 +1,74 @@
+#page_container {
+  #page {
+    #content {
+      form {
+        position: relative;
+
+        .form-actions {
+          position: absolute;
+          bottom: -5em;
+          left: 0;
+
+          .form-actions-left,
+          .form-actions-right {
+            margin-top: 1.5em;
+            margin-bottom: 1.5em;
+          }
+
+          .form-actions-left {
+            .button {
+              margin-right: 0.25em;
+            }
+          }
+
+          .form-actions-right {
+            text-align: right;
+
+            .button {
+              margin-left: 0.25em;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+form {
+  .form-actions {
+    .button {
+      background: linear-gradient(to bottom, #65c3f7, $base_color);
+      border: 1px solid $base_color;
+      border-radius: 3px;
+      color: white;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 0.9em;
+      padding: 0.5em 1em;
+      text-decoration: none;
+
+      &:hover {
+        background: $base_color;
+      }
+
+      &#delete_button {
+        background: linear-gradient(to bottom, #de3618, #c73016);
+        border: 1px solid #b02b13;
+
+        &:hover {
+          background: #c73016;
+        }
+      }
+
+      &#cancel_button {
+        background: linear-gradient(to bottom, white, #f9fafb);
+        border: 1px solid #c4cdd5;
+        color: #666A70;
+
+        &:hover {
+          background: #f9fafb;
+        }
+      }
+    }
+  }
+}
diff --git a/core/app/assets/stylesheets/refinery/components/_icons.scss b/core/app/assets/stylesheets/refinery/components/_icons.scss
index 41eb7536f7..dab7cc17d8 100644
--- a/core/app/assets/stylesheets/refinery/components/_icons.scss
+++ b/core/app/assets/stylesheets/refinery/components/_icons.scss
@@ -13,7 +13,7 @@
 .edit_email_icon      {@include icon('envelope-o');}
 .edit_icon            {@include icon('edit', $icon_edit_colour);}
 .email_icon           {@include icon('envelope-o');}
-.error_icon           {@include icon('question-circle', $icon_error_colour);}
+.error_icon           {@include icon('exclamation-circle', $icon_error_colour);}
 .failure_icon         {@include icon('times');}
 .folder_icon          {@include icon('folder',$icon_folder_colour)}
 .go_icon              {@include icon('caret-square-o-right');}
diff --git a/core/app/assets/stylesheets/refinery/components/_ie.scss b/core/app/assets/stylesheets/refinery/components/_ie.scss
deleted file mode 100644
index faa19df88e..0000000000
--- a/core/app/assets/stylesheets/refinery/components/_ie.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Internet Explorer to follow: */
-/* IE 7 */
-.ie7 #content .form-actions .form-actions-left a.button {
-  height: 19px;
-  line-height: 19px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.ie7 .search_form input.button {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.ie7 body.login .field input.larger,
-.ie7 body.login .field input.larger:focus {
-  background-image: none !important;
-  padding: 0px;
-  line-height: 30px;
-}
-.ie7 .pagination a, .ie7 #content .pagination a,
-.ie7 .pagination .current,
-.ie7 .disabled, .ie7 .pagination em {
-  padding-bottom: 6px;
-}
-.ie7 .pt-BR #search {
-  width: 97px;
-}
-.ie7 .en #search {
-  width: 170px;
-}
-/* IE 8 */
-.ie8 body.login .field input.larger,
-.ie8 body.login .field input.larger:focus {
-  line-height: 30px;
-}
-.ie8 .pagination a, .ie8 #content .pagination a,
-.ie8 .pagination .current, .ie8 .disabled,
-.ie8 .pagination em {
-  padding-bottom: 6px;
-}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_labels.sass b/core/app/assets/stylesheets/refinery/components/_labels.sass
new file mode 100644
index 0000000000..7fbac85ac8
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_labels.sass
@@ -0,0 +1,24 @@
+.label
+  background-color: $text_light_color
+  border-radius: 3px
+  color: #ffffff
+  margin-right: 0.5em
+  padding: 0.25em 0.5em
+  font-size: 0.65em
+  font-weight: bold
+  text-transform: uppercase
+  vertical-align: middle
+  white-space: nowrap
+
+  &.important
+    background-color: #de3618
+
+  &.warning
+    background-color: #ed9315
+
+  &.success
+    background-color: #50b83c
+
+  &.notice
+    background-color: $base_color
+
diff --git a/core/app/assets/stylesheets/refinery/components/_layout.sass b/core/app/assets/stylesheets/refinery/components/_layout.sass
new file mode 100644
index 0000000000..5b5707d1db
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_layout.sass
@@ -0,0 +1,43 @@
+body
+  background-color: $base_light_color
+  font-family: Helvetica
+  color: $text_base_color
+
+main#page_container
+  padding: 3.5em 0 2em
+
+  @include grid-media($tablet-up)
+    margin-left: 15.5em
+
+  #content
+    #records
+      @include panel
+
+body
+  &.new,
+  &.edit,
+  &.create,
+  &.update
+    #content
+      @include panel
+      padding: 1.5em 1.5em 0
+
+  h1
+    font-size: 1.75em
+    margin: 0.67em 0
+    font-weight: 500
+
+  h2
+    font-size: 1.3em
+    font-weight: 600
+    margin: 1.2em 0
+
+  #records
+    h2
+      margin-top: 0
+
+  a
+    color: $base_color
+
+  .hidden
+    display: none
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_locale_marker.scss b/core/app/assets/stylesheets/refinery/components/_locale_marker.scss
new file mode 100644
index 0000000000..df8c54dc14
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_locale_marker.scss
@@ -0,0 +1,10 @@
+.locale_marker {
+  font-size:0.56em;
+  display: inline;
+  color: $text_base_color;
+
+  .fa-stack .fa-comment {
+    color: $icon_locale_colour;
+    font-size: 24px;
+  }
+}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_main_menu.sass b/core/app/assets/stylesheets/refinery/components/_main_menu.sass
new file mode 100644
index 0000000000..c6fc58403a
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_main_menu.sass
@@ -0,0 +1,38 @@
+#main-menu
+  background-color: $main_menu_background_color
+  border-right: 1px solid #dfe3e8
+  bottom: 0
+  position: fixed
+  top: 3.2em
+  width: 15em
+  z-index: 99
+
+  nav
+    ul
+      margin: 2em 0 1em 0
+      padding: 0
+
+      li
+        display: flex
+        margin-top: 0.1em
+        padding: 0.5em 0
+
+        a
+          border-left: 2px solid transparent
+          color: $main_menu_base_light_color
+          display: block
+          font-size: 0.9em
+          padding: 0.5em 0 0.5em 3em
+          text-decoration: none
+          width: 100%
+
+        &:hover,
+        &.active
+          a
+            color: $main_menu_base_light_color
+
+        &.active
+          background-color: $main_menu_background_light_color
+
+          a
+            border-left: 2px solid $main_menu_accent_color
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_page_parts.sass b/core/app/assets/stylesheets/refinery/components/_page_parts.sass
new file mode 100644
index 0000000000..cf1f97a34f
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_page_parts.sass
@@ -0,0 +1,29 @@
+ul#page_parts
+  border-bottom: 1px solid #c4cdd5
+  margin: 1em 0
+  padding: 0
+
+  li
+    display: inline-block
+    padding-right: 0.8em
+
+    &:focus
+      outline: none
+
+    a
+      border-bottom: 2px solid transparent
+      color: $text_light_color
+      display: block
+      font-size: 0.9em
+      padding: 0 0 1.05em
+      text-decoration: none
+
+      &:hover
+        color: $text_base_color
+        border-bottom: 2px solid $text_light_color
+
+
+    &.ui-tabs-active
+      a
+        border-bottom: 2px solid $base_color
+        color: $text_base_color
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_page_parts_controls.sass b/core/app/assets/stylesheets/refinery/components/_page_parts_controls.sass
new file mode 100644
index 0000000000..b179d6fa8e
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_page_parts_controls.sass
@@ -0,0 +1,7 @@
+#page_parts_controls
+  padding: 0
+
+  li
+    float: right
+    display: block
+    margin-right: 0.3em
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_records.scss b/core/app/assets/stylesheets/refinery/components/_records.scss
new file mode 100644
index 0000000000..7c71351a15
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_records.scss
@@ -0,0 +1,37 @@
+#records:not(.tree) {
+  ul {
+    border-collapse: collapse;
+    display: table;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    li {
+      display: table-row;
+      border-bottom: 1px solid $line_separator_light_colour;
+      color: $text_base_color;
+      font-size: 0.9em;
+
+      span {
+        display: table-cell;
+        padding: 0.5em;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background-color: $base_light_color;
+      }
+
+      .actions {
+        a {
+          float: right;
+          margin: 0.3em 0.15em;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_sortable_list.scss b/core/app/assets/stylesheets/refinery/components/_sortable_list.scss
new file mode 100644
index 0000000000..609f488844
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_sortable_list.scss
@@ -0,0 +1,7 @@
+#sortable_list {
+  .reordering {
+    > li {
+      cursor: move;
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_switch_locale_picker.scss b/core/app/assets/stylesheets/refinery/components/_switch_locale_picker.scss
new file mode 100644
index 0000000000..9ff2228db9
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_switch_locale_picker.scss
@@ -0,0 +1,34 @@
+#switch_locale_picker {
+  border-bottom: 1px solid #c4cdd5;
+  margin: 1em 0 1em 0;
+  padding: 0;
+
+  li {
+    display: inline-block;
+    padding-right: 0.8em;
+
+    a {
+      border-bottom: 2px solid transparent;
+      color: $text_light_color;
+      display: block;
+      font-size: 0.85em;
+      padding: 0 0 0.8em;
+      text-decoration: none;
+
+
+      &:hover {
+        color: $text_base_color;
+        border-bottom: 2px solid $text_light_color;
+      }
+
+      &:active {
+        border-bottom: 2px solid $base_color;
+      }
+    }
+
+    &.selected a {
+      border-bottom: 2px solid $base_color;
+      color: $text_base_color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/components/_tree.sass b/core/app/assets/stylesheets/refinery/components/_tree.sass
new file mode 100644
index 0000000000..ee1d3ac294
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/components/_tree.sass
@@ -0,0 +1,56 @@
+#records.tree,
+.tree
+  .title
+    color: $text_base_color
+    font-size: 0.9em
+    line-height: 1.8em
+
+  ul
+    margin: 0
+    padding: 0
+
+    li
+      display: block
+      margin: 0
+      padding: 0.25em 0 0 2em
+      background: image_url('refinery/branch.png') no-repeat 15px 0px
+
+      span.item
+        display: block
+        float: left
+        width: 1em
+        height: 1em
+        margin: 0.25em 0.25em 0 0
+        padding: 0 0 0 0.5em
+        @include icon('file-o', $icon_page_colour)
+
+        &.toggle
+          cursor: pointer
+          @include icon('folder',$icon_folder_colour)
+
+        &.toggle.expanded
+          @include icon('folder-open',$icon_folder_colour)
+
+      &.loading
+        > div
+          > span.icon
+            @include icon('spinner')
+
+      &:first-child
+        background-image: image_url('refinery/branch-start.png')
+
+      &:last-child
+        background-image: image_url('refinery/branch-end.png')
+
+      > div
+        &:hover
+          .title
+            color: $base_color
+
+  .actions
+    float: right
+
+    a
+      float: right
+      font-size: 0.9em
+      margin: 0.3em 0.15em
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/global/_colours.scss b/core/app/assets/stylesheets/refinery/global/_colours.scss
index e7eb7dc36b..e067d228a2 100644
--- a/core/app/assets/stylesheets/refinery/global/_colours.scss
+++ b/core/app/assets/stylesheets/refinery/global/_colours.scss
@@ -4,7 +4,7 @@ $icon_done_colour:    #00a017;  //
 $icon_error_colour:   #ff0;     //RED
 $icon_folder_colour:  #e6cb47;   // dark yellow
 $icon_locale_colour:  #b7e3fc;    // pale blue
-$icon_page_colour:    #86cffa;   //
+$icon_page_colour:    #066CFF;   //
 $icon_warning_colour: #FF6600; // orange
 
 $info_icon_blue:      #316CC8;
@@ -18,4 +18,18 @@ $action_border_colour: $icon_locale_colour;
 
 // $icon_preview_colour: #7f00ff;   // violet
 // $icon_edit_colour:    #007fff;   // azure
-// $icon_add_colour:     #7fff00;   // chartreuse
\ No newline at end of file
+// $icon_add_colour:     #7fff00;   // chartreuse
+
+$base_color: #25a9f4; // blue
+$base_light_color: #f0f2f5;
+$text_base_color: #282C2F; // grey
+$text_light_color: #6D727B;
+
+$main_menu_background_color: #414a52;
+$main_menu_background_light_color: #535D65;
+$main_menu_base_color: #666A70;
+$main_menu_base_light_color: white;
+$main_menu_accent_color: #25a9f4;
+
+$line_separator_colour:  #c4cdd5;
+$line_separator_light_colour:  #ebeef0;
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/global/_grid_settings.sass b/core/app/assets/stylesheets/refinery/global/_grid_settings.sass
new file mode 100644
index 0000000000..0fc1f3cfa6
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/global/_grid_settings.sass
@@ -0,0 +1,2 @@
+$layout-grid: (columns: 1, gutter: 20px)
+$tablet-up: (columns: 12, gutter: 20px, media: "(min-width: 768px)")
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/grid/_desktop.sass b/core/app/assets/stylesheets/refinery/grid/_desktop.sass
new file mode 100644
index 0000000000..dfccca4e65
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/grid/_desktop.sass
@@ -0,0 +1,33 @@
+@include grid-media($tablet-up)
+  body
+    #main-menu
+      display: block
+
+    #page
+      @include grid-column(11)
+      @include grid-shift(0.5)
+
+    main#page_container
+      @include grid-container
+
+    &.index
+      #content
+        @include grid-container
+        @include grid-collapse
+
+        #records
+          @include grid-column(9.5)
+
+        #actions
+          @include grid-column(2.5)
+
+    form
+      .form-actions
+        @include grid-container
+        @include grid-collapse
+
+        .form-actions-left
+          @include grid-column(8)
+
+        .form-actions-right
+          @include grid-column(4)
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/grid/_mobile.sass b/core/app/assets/stylesheets/refinery/grid/_mobile.sass
new file mode 100644
index 0000000000..ae81fe7e84
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/grid/_mobile.sass
@@ -0,0 +1,6 @@
+body
+  #main-menu
+    display: none
+
+  .wrapper
+    @include grid-container
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/mixins/_icon.scss b/core/app/assets/stylesheets/refinery/mixins/_icon.scss
index 39fd2090a4..67a29facce 100644
--- a/core/app/assets/stylesheets/refinery/mixins/_icon.scss
+++ b/core/app/assets/stylesheets/refinery/mixins/_icon.scss
@@ -1,7 +1,7 @@
 // Any icon
-@mixin icon($icon-selector, $color: $icon_default_colour, $padding: 4px, $size: 1.2em, $float: none) {
+@mixin icon($icon-selector, $color: $icon_default_colour, $padding: 4px, $size: 0.95em, $float: none) {
   @include icon-base($color, $size, $float) {
     @extend .fa-#{$icon-selector};
-    &:before {margin-right: 0.1em!important;}
+    &:before {margin-right: 0.3em!important;}
   };
 }
diff --git a/core/app/assets/stylesheets/refinery/mixins/_panel.sass b/core/app/assets/stylesheets/refinery/mixins/_panel.sass
new file mode 100644
index 0000000000..bc63451bf2
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/mixins/_panel.sass
@@ -0,0 +1,7 @@
+@mixin panel($bg_color: white, $padding: 1.5em)
+  background-color: $bg_color
+  border-radius: 3px
+  box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)
+  box-sizing: border-box
+  padding: $padding
+  position: relative
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/pages/components/_form.sass b/core/app/assets/stylesheets/refinery/pages/components/_form.sass
new file mode 100644
index 0000000000..ea9af81d88
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/pages/components/_form.sass
@@ -0,0 +1,14 @@
+form
+  #page-tabs
+    &.ui-sortable
+      a
+        cursor: move
+
+  #more_options_field
+    padding-bottom: 0.5em
+
+    p
+      margin-top: 0.25em
+
+  #draft_field
+    float: right
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/pages/grid/_desktop.sass b/core/app/assets/stylesheets/refinery/pages/grid/_desktop.sass
new file mode 100644
index 0000000000..097838c8da
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/pages/grid/_desktop.sass
@@ -0,0 +1,21 @@
+@include grid-media($tablet-up)
+  body
+    form
+      &.new_page,
+      &.edit_page
+        #more_options
+          @include grid-container
+          @include grid-collapse
+
+          .hemisquare
+            @include grid-column(6)
+
+      #page-tabs
+        .wrapper
+          @include grid-collapse
+
+        #page_parts
+          @include grid-column(11)
+
+        #page_parts_controls
+          @include grid-column(1)
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/refinery.sass b/core/app/assets/stylesheets/refinery/refinery.sass
new file mode 100644
index 0000000000..511a4113a0
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/refinery.sass
@@ -0,0 +1,49 @@
+@import '../normalize.css'
+
+@import "neat"
+
+@import 'global/colours'
+@import 'global/grid_settings'
+
+@import 'font-awesome-sprockets', 'font-awesome'
+
+@import 'mixins/box_sizing'
+@import 'mixins/faux_columns_2'
+@import 'mixins/form_action'
+@import 'mixins/icon_base'
+@import 'mixins/icon'
+@import 'mixins/panel'
+@import 'mixins/rounded'
+
+//@import 'plugins/ui'
+
+@import 'components/icons'
+@import 'components/dialog'
+@import 'components/submenu'
+@import 'components/tooltips'
+
+@import 'grid/mobile'
+@import 'grid/desktop'
+
+@import 'components/actions'
+@import 'components/flash'
+@import 'components/form'
+@import 'components/form_actions'
+@import 'components/labels'
+@import 'components/layout'
+@import 'components/locale_marker'
+@import 'components/main_menu'
+@import 'components/page_parts'
+@import 'components/page_parts_controls'
+@import 'components/records'
+@import 'components/sortable_list'
+@import 'components/switch_locale_picker'
+@import 'components/tree'
+
+@import 'pages/grid/desktop'
+@import 'pages/components/form'
+
+@import 'search/components/search_form'
+@import 'search/components/search_results'
+
+@import 'site_bar'
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/refinery.scss b/core/app/assets/stylesheets/refinery/refinery.scss
deleted file mode 100644
index 15ed8a80b7..0000000000
--- a/core/app/assets/stylesheets/refinery/refinery.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import 'global/colours';
-
-@import 'font-awesome-sprockets', 'font-awesome';
-
-@import 'mixins/box_sizing';
-@import 'mixins/faux_columns_2';
-@import 'mixins/form_action';
-@import 'mixins/icon_base';
-@import 'mixins/icon';
-@import 'mixins/rounded';
-
-@import 'plugins/ui';
-
-@import 'components/icons';
-@import 'components/dialog';
-@import 'components/submenu';
-@import 'components/tooltips';
-@import 'components/ie';
-
-@import 'sections/layout';
-
-@import 'site_bar';
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/search/components/_search_form.sass b/core/app/assets/stylesheets/refinery/search/components/_search_form.sass
new file mode 100644
index 0000000000..10481755e1
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/search/components/_search_form.sass
@@ -0,0 +1,18 @@
+.search_form
+  margin-bottom: 0.5em
+  display: flex
+
+  #search
+    border-radius: 3px 0 0 3px
+    box-sizing: border-box
+    display: block
+    flex: 1 1 0%
+    max-width: 63%
+
+  input[type="submit"]
+    border-radius: 0 3px 3px 0
+    box-sizing: border-box
+    display: block
+    flex: 0 0 auto
+    padding: 0.65em 1em
+    margin-left: -1px
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/search/components/_search_results.sass b/core/app/assets/stylesheets/refinery/search/components/_search_results.sass
new file mode 100644
index 0000000000..615b61289b
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/search/components/_search_results.sass
@@ -0,0 +1,2 @@
+.cancel-search
+  float: right
\ No newline at end of file
diff --git a/core/app/assets/stylesheets/refinery/site_bar.sass b/core/app/assets/stylesheets/refinery/site_bar.sass
new file mode 100644
index 0000000000..8ffbb43285
--- /dev/null
+++ b/core/app/assets/stylesheets/refinery/site_bar.sass
@@ -0,0 +1,193 @@
+body#admin
+  #site_bar
+    position: fixed
+    left: 0
+    right: 0
+    top: 0
+    z-index: 100
+
+#site_bar
+  background-color: white
+  box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)
+  color: #373C3F
+  font-family: Helvetica
+
+  #site_bar_content
+    &:after
+      content: ""
+      clear: both
+      display: block
+
+  a
+    color: #373C3F
+
+  #site_bar_refinery_cms_logo
+    background-color: #25a9f4
+    float: left
+    padding: 0.6em 0
+    width: 15em
+
+    a
+      display: block
+      margin: 0 auto
+      width: 7em
+
+      img
+        max-width: 100%
+
+  #site_bar_branding
+    float: left
+    margin: 1.1em 1em 1em 5em
+
+  #editor_switch
+    float: left
+    margin: 0.5em 0
+
+    a
+      border: 1px solid #25a9f4
+      border-radius: 3px
+      color: #25a9f4
+      display: inline-block
+      font-size: 1em
+      padding: 0.5em 1em
+      text-decoration: none
+
+  #site_bar_logout
+    float: right
+
+//#site_bar {
+//  background: #404650;
+//
+//  #site_bar_content {
+//    color: white;
+//    font-family: Arial;
+//    font-size: 0.9em;
+//    font-weight: normal;
+//    margin: 0 auto;
+//    max-width: 1200px;
+//    padding: 0.8em 0.8em 0.5em;
+//    position: relative;
+//    zoom: 1;
+//
+//    &:before,
+//    &:after { content: ""; display: table; }
+//    &:after { clear: both; }
+//
+//    a {
+//      color: white;
+//      text-decoration: none;
+//
+//      &:hover {
+//        text-decoration: underline;
+//      }
+//    }
+//
+//    #editor_switch {
+//      text-align: center;
+//
+//      a {
+//        display: inline-block;
+//        margin-right: 0.3em;
+//        margin-bottom: 0.5em;
+//        padding: 0em 1em 0em;
+//      }
+//      @media screen and (min-width: 480px) {
+//        text-align: left;
+//      }
+//    }
+//
+//    #site_bar_refinery_cms_logo {
+//      display: block;
+//      text-align: center;
+//
+//      @media screen and (min-width: 480px) {
+//        left: 40%;
+//        max-width: 20%;
+//        position: absolute;
+//        top: 0.35em;
+//      }
+//
+//      @media screen and (min-width: 768px) {
+//        left: 45%;
+//        max-width: 10%;
+//      }
+//
+//      img {
+//        max-width: 40%;
+//
+//        @media screen and (min-width: 480px) {
+//          max-width: 80%;
+//        }
+//
+//        @media screen and (min-width: 768px) {
+//          max-width: 100%;
+//        }
+//      }
+//    }
+//
+//    #site_bar_branding, #editor_switch {
+//      display: block;
+//      margin-top: 0.5em;
+//
+//      @media screen and (min-width: 480px) {
+//        margin-top: 0.25em;
+//      }
+//    }
+//
+//    #site_bar_branding {
+//      text-align: center;
+//
+//      @media screen and (min-width: 480px) {
+//        text-align: right;
+//      }
+//
+//      #site_bar_company_name {
+//        display: block;
+//        font-weight: bold;
+//
+//        @media screen and (min-width: 480px) {
+//          display: inline-block;
+//        }
+//      }
+//
+//      #logout {
+//        display: block;
+//        margin-left: 0.9em;
+//
+//        @media screen and (min-width: 480px) {
+//          display: inline-block;
+//        }
+//      }
+//    }
+//  }
+//}
+//
+//@media screen and (min-width: 480px) {
+//  #site_bar {
+//    #site_bar_content {
+//      #editor_switch {
+//        float: left;
+//        width: 40%;
+//      }
+//
+//      #site_bar_branding {
+//        float: right;
+//        width: 40%;
+//      }
+//    }
+//  }
+//}
+//
+//@media screen and (min-width: 768px) {
+//  #site_bar {
+//    #site_bar_content {
+//      #editor_switch {
+//        width: 45%;
+//      }
+//
+//      #site_bar_branding {
+//        width: 45%;
+//      }
+//    }
+//  }
+//}
diff --git a/core/app/assets/stylesheets/refinery/site_bar.scss b/core/app/assets/stylesheets/refinery/site_bar.scss
deleted file mode 100644
index f25661c7e7..0000000000
--- a/core/app/assets/stylesheets/refinery/site_bar.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-#site_bar {
-  background: #404650;
-
-  #site_bar_content {
-    color: white;
-    font-family: Arial;
-    font-size: 0.9em;
-    font-weight: normal;
-    margin: 0 auto;
-    max-width: 1200px;
-    padding: 0.8em 0.8em 0.5em;
-    position: relative;
-    zoom: 1;
-
-    &:before,
-    &:after { content: ""; display: table; }
-    &:after { clear: both; }
-
-    a {
-      color: white;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    #editor_switch {
-      text-align: center;
-
-      a {
-        display: inline-block;
-        margin-right: 0.3em;
-        margin-bottom: 0.5em;
-        padding: 0em 1em 0em;
-      }
-      @media screen and (min-width: 480px) {
-        text-align: left;
-      }
-    }
-
-    #site_bar_refinery_cms_logo {
-      display: block;
-      text-align: center;
-
-      @media screen and (min-width: 480px) {
-        left: 40%;
-        max-width: 20%;
-        position: absolute;
-        top: 0.35em;
-      }
-
-      @media screen and (min-width: 768px) {
-        left: 45%;
-        max-width: 10%;
-      }
-      
-      img {
-        max-width: 40%;
-
-        @media screen and (min-width: 480px) {
-          max-width: 80%;
-        }
-
-        @media screen and (min-width: 768px) {
-          max-width: 100%;
-        }
-      }
-    }
-
-    #site_bar_branding, #editor_switch {
-      display: block;
-      margin-top: 0.5em;
-
-      @media screen and (min-width: 480px) {
-        margin-top: 0.25em;
-      }
-    }
-
-    #site_bar_branding {
-      text-align: center;
-
-      @media screen and (min-width: 480px) {
-        text-align: right;
-      }
-
-      #site_bar_company_name {
-        display: block;
-        font-weight: bold;
-
-        @media screen and (min-width: 480px) {
-          display: inline-block;
-        }
-      }
-
-      #logout {
-        display: block;
-        margin-left: 0.9em;
-
-        @media screen and (min-width: 480px) {
-          display: inline-block;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 480px) {
-  #site_bar {
-    #site_bar_content {
-      #editor_switch {
-        float: left;
-        width: 40%;
-      }
-
-      #site_bar_branding {
-        float: right;
-        width: 40%;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  #site_bar {
-    #site_bar_content {
-      #editor_switch {
-        width: 45%;
-      }
-
-      #site_bar_branding {
-        width: 45%;
-      }
-    }
-  }
-}
diff --git a/core/app/helpers/refinery/admin/plugin_helper.rb b/core/app/helpers/refinery/admin/plugin_helper.rb
new file mode 100644
index 0000000000..f0473fe794
--- /dev/null
+++ b/core/app/helpers/refinery/admin/plugin_helper.rb
@@ -0,0 +1,9 @@
+module Refinery
+  module Admin
+    module PluginHelper
+      def current_plugin_title
+        Refinery::Plugin.current(params).try(:title)
+      end
+    end
+  end
+end
diff --git a/core/app/views/layouts/refinery/admin.html.erb b/core/app/views/layouts/refinery/admin.html.erb
index d884ce159e..fe646a820b 100644
--- a/core/app/views/layouts/refinery/admin.html.erb
+++ b/core/app/views/layouts/refinery/admin.html.erb
@@ -2,24 +2,25 @@
 <%= render '/refinery/html_tag' %>
   <% content_for :meta, tag(:meta, name: 'refinerycms', content: Refinery.version) %>
   <%= render 'refinery/admin/head' %>
-  <body class="<%= action_name %> <%= I18n.locale %>">
-    <%= render '/refinery/site_bar' %>
+  <body id="admin" class="<%= action_name %> <%= I18n.locale %>">
     <div id='tooltip_container'></div>
-    <div id="admin_container" class="clearfix">
-      <header id="header">
-        <%= render 'refinery/admin/menu' %>
-      </header>
-      <div id="page_container">
-        <div id="page">
-          <div id="content" class="clearfix">
-            <div id="flash_container">
-              <%= render '/refinery/no_script' %>
-              <%= render '/refinery/message' %>
-            </div>
-            <%= yield %>
+    <header id="header" role="banner">
+      <%= render '/refinery/site_bar' %>
+    </header>
+    <aside id="main-menu">
+      <%= render 'refinery/admin/menu' %>
+    </aside>
+    <main id="page_container" role="main">
+      <div id="page">
+        <h1><%= current_plugin_title %></h1>
+        <div id="content" class="clearfix">
+          <div id="flash_container">
+            <%= render '/refinery/no_script' %>
+            <%= render '/refinery/message' %>
           </div>
+          <%= yield %>
         </div>
       </div>
-    </div>
+    </main>
   </body>
 </html>
diff --git a/core/app/views/refinery/_site_bar.html.erb b/core/app/views/refinery/_site_bar.html.erb
index e5fcb7993a..3237b23419 100644
--- a/core/app/views/refinery/_site_bar.html.erb
+++ b/core/app/views/refinery/_site_bar.html.erb
@@ -3,26 +3,30 @@
     <% content_for :stylesheets, stylesheet_link_tag('refinery/site_bar') unless !!local_assigns[:exclude_css] %>
     <%= yield(:stylesheets) unless local_assigns[:head] || local_assigns[:exclude_css] %>
   <% end -%>
-  <div id='site_bar'>
-    <div id='site_bar_content' class='clearfix'>
+  <div id="site_bar">
+    <div id="site_bar_content">
 
-      <%= link_to 'https://www.refinerycms.com', :id => 'site_bar_refinery_cms_logo', :target => '_blank' do %>
-        <%= image_tag 'refinery/refinery-cms-logo.svg', alt: 'Refinery CMS™' %>
-      <% end %>
-
-      <div id='editor_switch'>
-        <%= site_bar_switch_link -%>
-        <%= site_bar_edit_link -%>
+      <div id="site_bar_refinery_cms_logo">
+        <%= link_to Refinery::Core.backend_path do %>
+          <%= image_tag 'refinery/refinery-cms-logo.svg', alt: 'Refinery CMS™' %>
+        <% end %>
       </div>
 
-      <div id='site_bar_branding'>
-        <span id='site_bar_company_name'>
+      <div id="site_bar_branding">
+        <span id="site_bar_company_name">
           <%= Refinery::Core.site_name %>
         </span>
+      </div>
+
+      <div id="editor_switch">
+        <%= site_bar_switch_link -%>
+        <%= site_bar_edit_link -%>
+      </div>
 
+      <div id="site_bar_logout">
         <%= link_to t('.log_out', site_bar_translate_locale_args),
                     ::Refinery::Core.refinery_logout_path,
-                    :id => 'logout' if ::Refinery::Core.refinery_logout_path.present? %>
+                    id: 'logout' if ::Refinery::Core.refinery_logout_path.present? %>
       </div>
     </div>
   </div>
diff --git a/core/app/views/refinery/admin/_locale_picker.html.erb b/core/app/views/refinery/admin/_locale_picker.html.erb
index 9bc5d4d236..799d14849f 100644
--- a/core/app/views/refinery/admin/_locale_picker.html.erb
+++ b/core/app/views/refinery/admin/_locale_picker.html.erb
@@ -1,18 +1,26 @@
 <input type="hidden" name="switch_locale" id="switch_locale" value="<%= local_assigns[:current_locale] %>" />
-<% if Refinery::I18n.frontend_locales.many? %>
-  <label><%= t('.language') %></label>
-  <ul id="switch_locale_picker" class="clearfix">
-    <% locales = Refinery::I18n.locales.clone %>
-    <% Refinery::I18n.frontend_locales.each do |locale| %>
-      <% locale_name = locales.delete(locale) %>
-      <li<%= %Q{ class=selected} if locale.to_s == local_assigns[:current_locale].to_s %>>
-        <%= link_to refinery.url_for(:switch_locale => locale, :parent_id => params[:parent_id]), id: locale do %>
-          <div class="<%=locale %> locale_marker">
-            <%= locale_text_icon(locale.upcase) %>
-          </div>
-          <%= locale_name %>
+
+<% if (frontend_locales = Refinery::I18n.frontend_locales).many? %>
+  <div class="field">
+    <label><%= t('.languages') %></label>
+
+    <ul id="switch_locale_picker">
+
+      <% locales = Refinery::I18n.locales.clone %>
+
+      <% frontend_locales.each do |locale| %>
+        <% locale_name = locales.delete(locale) %>
+
+        <%= content_tag :li, class: ('selected' if locale.to_s == local_assigns[:current_locale].to_s) do %>
+          <%= link_to refinery.url_for(switch_locale: locale, parent_id: params[:parent_id]), id: locale do %>
+            <%= locale_name %>
+
+            <%= content_tag :div, class: [locale, 'locale_marker'] do %>
+              <%= locale_text_icon(locale.upcase) %>
+            <% end %>
+          <% end %>
         <% end %>
-      </li>
-    <% end %>
-  </ul>
+      <% end %>
+    </ul>
+  </div>
 <% end %>
diff --git a/core/app/views/refinery/admin/_menu.html.erb b/core/app/views/refinery/admin/_menu.html.erb
index 6e459d8d4e..e778b59b73 100644
--- a/core/app/views/refinery/admin/_menu.html.erb
+++ b/core/app/views/refinery/admin/_menu.html.erb
@@ -1,4 +1,6 @@
-<nav id="menu">
-  <%= render partial: "refinery/admin/menu_item",
-             collection: current_refinery_user.active_plugins.in_menu -%>
+<nav role="navigation">
+  <ul>
+    <%= render partial: 'refinery/admin/menu_item',
+             collection: current_refinery_user.active_plugins.in_menu %>
+  </ul>
 </nav>
diff --git a/core/app/views/refinery/admin/_menu_item.html.erb b/core/app/views/refinery/admin/_menu_item.html.erb
index d5e0e98e15..85b6738f3c 100644
--- a/core/app/views/refinery/admin/_menu_item.html.erb
+++ b/core/app/views/refinery/admin/_menu_item.html.erb
@@ -1,3 +1,3 @@
-<%= link_to menu_item.title, refinery.url_for(menu_item.url),
-            :class => ("active" if menu_item.highlighted?(params)),
-            :id => "plugin_#{menu_item.name}" %>
+<%= content_tag :li, class: ('active' if menu_item.highlighted?(params)) do %>
+  <%= link_to menu_item.title, refinery.url_for(menu_item.url), id: "plugin_#{menu_item.name}" %>
+<% end %>
\ No newline at end of file
diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml
index 3ba67fa260..5d0bff1f34 100644
--- a/core/config/locales/en.yml
+++ b/core/config/locales/en.yml
@@ -43,7 +43,7 @@ en:
         change: Click here to pick an image
         show: Show
       locale_picker:
-        language: Language
+        languages: Languages
       resource_picker:
         download_current: Download current file
         opens_in_new_window: Opens in a new window
diff --git a/core/config/locales/fr.yml b/core/config/locales/fr.yml
index e37e63fd7f..c276674575 100644
--- a/core/config/locales/fr.yml
+++ b/core/config/locales/fr.yml
@@ -42,7 +42,7 @@ fr:
         change: Cliquer ici pour sélectionner une image
         show: Afficher
       locale_picker:
-        language: Langue
+        languages: Langues
       resource_picker:
         download_current: Télécharger le fichier actuel
         opens_in_new_window: Ouvre une nouvelle fenêtre
diff --git a/core/lib/refinery.rb b/core/lib/refinery.rb
index bd42f7cb40..7d22161ba5 100644
--- a/core/lib/refinery.rb
+++ b/core/lib/refinery.rb
@@ -4,6 +4,7 @@
 require 'rbconfig'
 require 'font-awesome-sass'
 require 'jquery-rails'
+require 'neat'
 
 module Refinery
   require 'refinery/errors'
diff --git a/core/lib/refinery/plugin.rb b/core/lib/refinery/plugin.rb
index 974e997c0f..9d40f9f805 100644
--- a/core/lib/refinery/plugin.rb
+++ b/core/lib/refinery/plugin.rb
@@ -19,6 +19,10 @@ def self.register(&_block)
       ::Refinery::Plugins.registered.unshift(plugin).uniq!(&:name)
     end
 
+    def self.current(params)
+      Refinery::Plugins.registered.find{ |plugin| params[:controller].try(:gsub, "admin/", "") =~ plugin.menu_match}
+    end
+
     # Returns the internationalized version of the title
     def title
       ::I18n.translate(['refinery', 'plugins', name, 'title'].join('.'))
diff --git a/core/refinerycms-core.gemspec b/core/refinerycms-core.gemspec
index e1c7df508c..da0881f40e 100644
--- a/core/refinerycms-core.gemspec
+++ b/core/refinerycms-core.gemspec
@@ -35,6 +35,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'jquery-ui-rails',             '~> 6.0', '>= 6.0.0'
   s.add_dependency 'decorators',                  '~> 2.0', '>= 2.0.0'
   s.add_dependency 'zilch-authorisation',         '~> 0', '>= 0.0.1'
+  s.add_dependency 'neat',                        '~> 2.1', '>= 2.1.0'
 
   s.cert_chain  = [File.expand_path("../../certs/parndt.pem", __FILE__)]
   if $0 =~ /gem\z/ && ARGV.include?("build") && ARGV.include?(__FILE__)
diff --git a/core/spec/lib/refinery/plugin_spec.rb b/core/spec/lib/refinery/plugin_spec.rb
index db23ea0c91..4b4d7e2927 100644
--- a/core/spec/lib/refinery/plugin_spec.rb
+++ b/core/spec/lib/refinery/plugin_spec.rb
@@ -34,6 +34,17 @@ module Refinery
       end
     end
 
+    describe '.current' do
+      it 'returns the current plugin' do
+        expect(Plugin.current({controller: '/refinery/admin/refinery_rspec'}).name).to eq('refinery_rspec')
+      end
+
+      it 'returns nil if does not match any plugin' do
+        params = { controller: '/refinery/admin/refinery_nil_rspec', action: 'index', locale: 'en'}
+        expect(Plugin.current(params)).to be_nil
+      end
+    end
+
     describe '#class_name' do
       it 'returns class name' do
         expect(plugin.class_name).to eq('RefineryRspec')
diff --git a/pages/app/views/refinery/admin/pages/_form_page_parts.html.erb b/pages/app/views/refinery/admin/pages/_form_page_parts.html.erb
index f4ed8469d3..fe365ef97e 100644
--- a/pages/app/views/refinery/admin/pages/_form_page_parts.html.erb
+++ b/pages/app/views/refinery/admin/pages/_form_page_parts.html.erb
@@ -1,30 +1,32 @@
-<% if ::Refinery::Pages.new_page_parts %>
-  <ul id="page_parts_controls">
-     <li>
-      <%= action_icon(:reorder_h, '#', t('.reorder_content_section'), id: 'reorder_page_part' ) %>
-      <%= action_icon(:reorder_done, '#',  t('.reorder_content_section_done'), id: 'reorder_page_part_done')%>
-    </li>
-    <li>
-      <%= action_icon(:add, '#', t('.create_content_section'), id: 'add_page_part')%>
-    <li>
-      <%= action_icon(:delete_section, '#', t('.delete_content_section'), id: 'delete_page_part', class: 'delete_page_part' )  %>
-    </li>
-  </ul>
-<% end %>
-
 <div id='page-tabs' class='clearfix ui-tabs ui-widget ui-widget-content ui-corner-all'>
-  <ul id='page_parts'>
-    <% @page.parts.each_with_index do |part, part_index| %>
-      <li class='ui-state-default<%= ' ui-state-active' if part_index == 0 %>' data-index='<%= part_index %>'>
-        <%= link_to part.title, "##{@page.persisted? ? part.to_param : "page_part_new_#{part_index}"}" %>
-      </li>
-    <% end %>
-    <% ::Refinery::Pages.tabs_for_template(@page.view_template).each_with_index do |tab, tab_index| %>
-      <li class='ui-state-default' id="custom_<%= tab.name %>_tab">
-        <%= link_to tab.name.titleize, "#custom_tab_#{tab_index}" %>
-      </li>
+  <div class="wrapper">
+    <ul id='page_parts'>
+      <% @page.parts.each_with_index do |part, part_index| %>
+        <li class='ui-state-default<%= ' ui-state-active' if part_index == 0 %>' data-index='<%= part_index %>'>
+          <%= link_to part.title, "##{@page.persisted? ? part.to_param : "page_part_new_#{part_index}"}" %>
+        </li>
+      <% end %>
+      <% ::Refinery::Pages.tabs_for_template(@page.view_template).each_with_index do |tab, tab_index| %>
+        <li class='ui-state-default' id="custom_<%= tab.name %>_tab">
+          <%= link_to tab.name.titleize, "#custom_tab_#{tab_index}" %>
+        </li>
+      <% end %>
+    </ul>
+
+    <% if ::Refinery::Pages.new_page_parts %>
+      <ul id="page_parts_controls">
+         <li>
+          <%= action_icon(:reorder_h, '#', t('.reorder_content_section'), id: 'reorder_page_part' ) %>
+          <%= action_icon(:reorder_done, '#',  t('.reorder_content_section_done'), id: 'reorder_page_part_done')%>
+        </li>
+        <li>
+          <%= action_icon(:add, '#', t('.create_content_section'), id: 'add_page_part')%>
+        <li>
+          <%= action_icon(:delete_section, '#', t('.delete_content_section'), id: 'delete_page_part', class: 'delete_page_part' )  %>
+        </li>
+      </ul>
     <% end %>
-  </ul>
+  </div>
 
   <div id='page_part_editors'>
     <% part_index = -1 %>
diff --git a/pages/app/views/refinery/admin/pages/_page.html.erb b/pages/app/views/refinery/admin/pages/_page.html.erb
index 9e49436e3b..a4e8ea9211 100644
--- a/pages/app/views/refinery/admin/pages/_page.html.erb
+++ b/pages/app/views/refinery/admin/pages/_page.html.erb
@@ -47,7 +47,9 @@
     </span>
   </div>
 
-  <%= content_tag :ul, class: 'nested', data: { 'ajax-content': refinery.admin_children_pages_path(page.nested_url) } do %>
-    <%= render(partial: 'page', collection: page.children, cached: ->(child_page) { child_page.self_and_descendants }) if Refinery::Pages.auto_expand_admin_tree %>
+  <% if page.children.present? %>
+    <%= content_tag :ul, class: 'nested', data: { 'ajax-content': refinery.admin_children_pages_path(page.nested_url) } do %>
+      <%= render(partial: 'page', collection: page.children, cached: ->(child_page) { child_page.self_and_descendants }) if Refinery::Pages.auto_expand_admin_tree %>
+    <% end %>
   <% end %>
 </li>