diff --git a/resources/assets/js/components/overlay.js b/resources/assets/js/components/overlay.js
index 2dbf4eb9a..1ba5efcea 100644
--- a/resources/assets/js/components/overlay.js
+++ b/resources/assets/js/components/overlay.js
@@ -6,7 +6,7 @@ class Overlay {
         elem.addEventListener('click', event => {
              if (event.target === elem) return this.hide();
         });
-        let closeButtons = elem.querySelectorAll('.overlay-close');
+        let closeButtons = elem.querySelectorAll('.popup-header-close');
         for (let i=0; i < closeButtons.length; i++) {
             closeButtons[i].addEventListener('click', this.hide.bind(this));
         }
diff --git a/resources/assets/sass/_animations.scss b/resources/assets/sass/_animations.scss
index c03553d15..85fd96206 100644
--- a/resources/assets/sass/_animations.scss
+++ b/resources/assets/sass/_animations.scss
@@ -36,26 +36,6 @@
   }
 }
 
-.anim.menuIn {
-  transform-origin: 100% 0%;
-  animation-name: menuIn;
-  animation-duration: 120ms;
-  animation-delay: 0s;
-  animation-timing-function: cubic-bezier(.62, .28, .23, .99);
-}
-
-@keyframes menuIn {
-  from {
-    opacity: 0;
-    transform: scale3d(0, 0, 1);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
 @keyframes loadingBob {
   0% {
     transform: translate3d(0, 0, 0);
@@ -89,8 +69,4 @@
   animation-duration: 180ms;
   animation-delay: 0s;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
-}
-
-.selectFade {
-  transition: background-color ease-in-out 3000ms;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 51ba25e05..e1a2f9e1f 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -1,12 +1,7 @@
-/*
-* This file contains styling for custom block formats.
-*/
-
 
 /**
  * Callouts
  */
-
 .callout {
   border-left: 3px solid #BBB;
   background-color: #EEE;
@@ -58,14 +53,17 @@
   }
 }
 
+/**
+ * Card-style blocks
+ */
+
 .card {
   background-color: #FFF;
   box-shadow: $bs-card;
   border-radius: 3px;
   border: 1px solid transparent;
   h3 {
-    padding: $-m;
-    padding-bottom: $-xs;
+    padding: $-m $-m $-xs;
     margin: 0;
     font-size: $fs-m;
     color: #222;
@@ -84,21 +82,11 @@
   }
 }
 
-.sidebar .card {
-  .body, .empty-text {
-    padding: $-s $-m;
-  }
-  h3 + .body {
-    padding-top: $-xs;
-  }
-}
-
 .card.drag-card {
   border: 1px solid #DDD;
   border-radius: 4px;
   display: flex;
-  padding: 0;
-  padding-left: $-s + 28px;
+  padding: 0 0 0 ($-s + 28px);
   margin: $-s 0;
   position: relative;
   .drag-card-action {
@@ -106,14 +94,12 @@
   }
   .handle, .drag-card-action {
     display: flex;
-    padding: 0;
     align-items: center;
     text-align: center;
     justify-content: center;
     width: 28px;
     flex-grow: 0;
-    padding-left: $-xs;
-    padding-right: $-xs;
+    padding: 0 $-xs;
     &:hover {
       background-color: #EEE;
     }
@@ -139,42 +125,6 @@
   }
 }
 
-.well {
-  background-color: #F8F8F8;
-  padding: $-m;
-  border: 1px solid #DDD;
-}
-
-.tag-item {
-  display: inline-flex;
-  margin-bottom: $-xs;
-  margin-right: $-xs;
-  border-radius: 4px;
-  border: 1px solid #CCC;
-  overflow: hidden;
-  font-size: 0.85em;
-  a, a:hover, a:active {
-    padding: 4px 8px;
-    color: #777;
-    transition: background-color ease-in-out 80ms;
-    text-decoration: none;
-  }
-  a:hover {
-    background-color: rgba(255, 255, 255, 0.7);
-  }
-  svg {
-    fill: #888;
-  }
-  .tag-value {
-    border-left: 1px solid #DDD;
-    background-color: rgba(255, 255, 255, 0.5);
-  }
-}
-
-.tag-list div:last-child .tag-item {
-  margin-bottom: 0;
-}
-
 .grid-card {
   display: flex;
   flex-direction: column;
@@ -243,4 +193,37 @@
   .content-wrap.card {
     padding: $-m $-l;
   }
+}
+
+/**
+ * Tags
+ */
+.tag-item {
+  display: inline-flex;
+  margin-bottom: $-xs;
+  margin-right: $-xs;
+  border-radius: 4px;
+  border: 1px solid #CCC;
+  overflow: hidden;
+  font-size: 0.85em;
+  a, a:hover, a:active {
+    padding: 4px 8px;
+    color: #777;
+    transition: background-color ease-in-out 80ms;
+    text-decoration: none;
+  }
+  a:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  svg {
+    fill: #888;
+  }
+  .tag-value {
+    border-left: 1px solid #DDD;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.tag-list div:last-child .tag-item {
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 093da80ca..eb7a09342 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -1,15 +1,14 @@
+button {
+  font-size: 100%;
+}
 
 @mixin generate-button-colors($textColor, $backgroundColor) {
   background-color: $backgroundColor;
   color: $textColor;
   fill: $textColor;
-  text-transform: uppercase;
   border: 1px solid $backgroundColor;
-  vertical-align: top;
   &:hover {
     background-color: lighten($backgroundColor, 8%);
-    //box-shadow: $bs-med;
-    text-decoration: none;
     color: $textColor;
   }
   &:active {
@@ -18,7 +17,6 @@
   &:focus {
     background-color: lighten($backgroundColor, 4%);
     box-shadow: $bs-light;
-    text-decoration: none;
     color: $textColor;
   }
 }
@@ -26,7 +24,7 @@
 // Button Specific Variables
 $button-border-radius: 2px;
 
-.button-base {
+.button  {
   text-decoration: none;
   font-size: 0.85rem;
   line-height: 1.4em;
@@ -34,29 +32,36 @@ $button-border-radius: 2px;
   margin-top: $-xs;
   margin-bottom: $-xs;
   display: inline-block;
-  border: none;
   font-weight: 400;
   outline: 0;
   border-radius: $button-border-radius;
   cursor: pointer;
-  transition: all ease-in-out 120ms;
-  box-shadow: 0;
-  @include generate-button-colors(#EEE, $primary);
+  transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
+  box-shadow: none;
+  background-color: $primary;
+  color: #FFF;
+  fill: #FFF;
+  text-transform: uppercase;
+  border: 1px solid $primary;
+  vertical-align: top;
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+  &:active {
+    background-color: darken($primary, 8%);
+  }
 }
-
-.button, input[type="button"], input[type="submit"]  {
-  @extend .button-base;
-  &.pos {
-    @include generate-button-colors(#EEE, $positive);
-  }
-  &.neg {
-    @include generate-button-colors(#EEE, $negative);
-  }
-  &.secondary {
-    @include generate-button-colors(#EEE, $secondary);
-  }
-  &.muted {
-    @include generate-button-colors(#EEE, #AAA);
+.button.primary {
+  @include generate-button-colors(#FFFFFF, $primary);
+}
+.button.outline {
+  background-color: transparent;
+  color: #888;
+  fill: #888;
+  border: 1px solid #DDD;
+  &:hover, &:focus, &:active {
+    box-shadow: none;
+    background-color: #EEE;
   }
 }
 
@@ -69,91 +74,27 @@ $button-border-radius: 2px;
   padding: $-xs*1.2 $-s;
 }
 
-.button.outline {
-  background-color: transparent;
-  color: #888;
-  fill: #888;
-  border: 1px solid #DDD;
-  &:hover, &:focus, &:active {
-    box-shadow: none;
-    background-color: #EEE;
-  }
-  &.page {
-    border-color: $color-page;
-    color: $color-page;
-    fill: $color-page;
-    &:hover, &:focus, &:active {
-      background-color: $color-page;
-      color: #FFF;
-      fill: #FFF;
-    }
-  }
-  &.chapter {
-    border-color: $color-chapter;
-    color: $color-chapter;
-    fill: $color-chapter;
-    &:hover, &:focus, &:active {
-      background-color: $color-chapter;
-      color: #FFF;
-      fill: #FFF;
-    }
-  }
-  &.book {
-    border-color: $color-book;
-    color: $color-book;
-    fill: $color-book;
-    &:hover, &:focus, &:active {
-      background-color: $color-book;
-      color: #FFF;
-      fill: #FFF;
-    }
-  }
-}
-
 .text-button {
-  @extend .link;
+  cursor: pointer;
   background-color: transparent;
   padding: 0;
   margin: 0;
   border: none;
   user-select: none;
   font-size: 0.75rem;
+  line-height: 1.4em;
   &:focus, &:active {
     outline: 0;
   }
   &:hover {
     text-decoration: none;
   }
-  &.neg {
-    color: $negative;
-  }
-  &.muted {
-    color: #666;
-  }
-}
-
-.button-group {
-  @include clearfix;
-  .button, button[type="button"] {
-    margin: $-xs 0 $-xs 0;
-    float: left;
-    border-radius: 0;
-    &:first-child {
-      border-radius: $button-border-radius 0 0 $button-border-radius;
-    }
-    &:last-child {
-      border-radius: 0 $button-border-radius $button-border-radius 0;
-    }
-  }
 }
 
 .button.block {
   width: 100%;
-  text-align: center;
+  text-align: left;
   display: block;
-  &.text-left {
-    text-align: left;
-  }
 }
 
 .button.icon {
@@ -171,9 +112,7 @@ $button-border-radius: 2px;
     width: 24px;
     height: 24px;
   }
-  padding: $-s $-m;
-  padding-bottom: $-s - 2px;
-  padding-left: $-m*2 + 24px;
+  padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
 }
 
 .button[disabled] {
diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index 644b6b8af..4dfc9d4c3 100644
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -1,104 +1,66 @@
+
 /*
- * Text colors
+ * Status text colors
  */
-p.pos, p .pos, span.pos, .text-pos {
-  color: $positive;
-  fill: $positive;
-  &:hover {
-    color: $positive;
-    fill: $positive;
-  }
+.text-pos, .text-pos:hover, .text-pos-hover:hover {
+  color: $positive !important;
+  fill: $positive !important;
 }
 
-p.neg, p .neg, span.neg, .text-neg {
-  color: $negative;
-  fill: $negative;
-  &:hover {
-    color: $negative;
-    fill: $negative;
-  }
+.text-warn, .text-warn:hover, .text-warn-hover:hover {
+  color: $warning !important;
+  fill: $warning !important;
 }
 
-p.muted, p .muted, span.muted, .text-muted {
-  color: lighten($text-dark, 26%);
-  fill: lighten($text-dark, 26%);
+.text-neg, .text-neg:hover, .text-neg-hover:hover  {
+  color: $negative !important;
+  fill: $negative !important;
+}
+
+/*
+ * Style text colors
+ */
+.text-primary, .text-primary:hover, .text-primary-hover:hover  {
+  color: $primary !important;
+  fill: $primary !important;
+}
+
+.text-muted {
+  color: lighten($text-dark, 26%) !important;
+  fill: lighten($text-dark, 26%) !important;
   &.small, .small {
-    color: lighten($text-dark, 32%);
-    fill: lighten($text-dark, 32%);
+    color: lighten($text-dark, 32%) !important;
+    fill: lighten($text-dark, 32%) !important;
   }
 }
 
-p.primary, p .primary, span.primary, .text-primary {
-  color: $primary;
-  fill: $primary;
-  &:hover {
-    color: $primary;
-    fill: $primary;
-  }
-}
-
-p.secondary, p .secondary, span.secondary, .text-secondary {
-  color: $secondary;
-  fill: $secondary;
-  &:hover {
-    color: $secondary;
-    fill: $secondary;
-  }
-}
-
-.text-bookshelf {
+/*
+ * Entity text colors
+ */
+.text-bookshelf, .text-bookshelf:hover {
   color: $color-bookshelf;
   fill: $color-bookshelf;
-  &:hover {
-    color: $color-bookshelf;
-    fill: $color-bookshelf;
-  }
 }
-.text-book {
+.text-book, .text-book:hover {
   color: $color-book;
   fill: $color-book;
-  &:hover {
-    color: $color-book;
-    fill: $color-book;
-  }
 }
-.text-page {
+.text-page, .text-page:hover {
   color: $color-page;
   fill: $color-page;
-  &:hover {
-    color: $color-page;
-    fill: $color-page;
-  }
-  &.draft {
-    color: $color-page-draft;
-    fill: $color-page-draft;
-  }
-  &.draft:hover {
-    color: $color-page-draft;
-    fill: $color-page-draft;
-  }
 }
-.text-chapter {
+.text-page.draft, .text-page.draft:hover {
+  color: $color-page-draft;
+  fill: $color-page-draft;
+}
+.text-chapter, .text-chapter:hover {
   color: $color-chapter;
   fill: $color-chapter;
-  &:hover {
-    color: $color-chapter;
-    fill: $color-chapter;
-  }
-}
-.faded .text-book:hover {
-  color: $color-book !important;
-  fill: $color-book !important;
-}
-.faded .text-chapter:hover {
-  color: $color-chapter !important;
-  fill: $color-chapter !important;
-}
-.faded .text-page:hover {
-  color: $color-page !important;
-  fill: $color-page !important;
 }
 
+/*
+ * Entity background colors
+ */
 .bg-book {
   background-color: $color-book;
 }
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index f835a1991..09b7c5f02 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -115,7 +115,7 @@
   }
 }
 
-.corner-button {
+.popup-footer button, .popup-header-close {
   position: absolute;
   top: 0;
   right: 0;
@@ -123,6 +123,16 @@
   height: 40px;
   border-radius: 0;
   box-shadow: none;
+  &:active {
+    outline: 0;
+  }
+}
+.popup-header-close {
+  background-color: transparent;
+  border: 0;
+  color: #FFF;
+  font-size: 16px;
+  padding: 0 $-m;
 }
 
 .popup-header, .popup-footer {
@@ -135,6 +145,9 @@
     padding: 8px $-m;
   }
 }
+.popup-footer {
+  margin-top: 1px;
+}
 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   height: 444px;
   min-height: 444px;
diff --git a/resources/assets/sass/_html.scss b/resources/assets/sass/_html.scss
index a89d030a1..7c3a3c49b 100644
--- a/resources/assets/sass/_html.scss
+++ b/resources/assets/sass/_html.scss
@@ -17,8 +17,4 @@ body {
   color: #444;
   -webkit-font-smoothing: antialiased;
   background-color: #F2F2F2;
-}
-
-button {
-  font-size: 100%;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss
index 6368bf31b..53381fc14 100644
--- a/resources/assets/sass/_layout.scss
+++ b/resources/assets/sass/_layout.scss
@@ -35,6 +35,9 @@
   &.right-focus {
     grid-template-columns: 1fr 3fr;
   }
+  &.gap-y-xs {
+    grid-row-gap: $-xs;
+  }
   &.gap-xl {
     grid-column-gap: $-xl;
     grid-row-gap: $-xl;
diff --git a/resources/assets/sass/_mixins.scss b/resources/assets/sass/_mixins.scss
index 13c81ae9e..1c45ebd30 100644
--- a/resources/assets/sass/_mixins.scss
+++ b/resources/assets/sass/_mixins.scss
@@ -8,12 +8,3 @@
 @mixin between($min, $max) {
   @media screen and (min-width: $min) and (max-width: $max) { @content; }
 }
-@mixin clearfix() {
-  &:after {
-    display: block;
-    content: '';
-    font-size: 0;
-    clear: both;
-    position: relative;
-  }
-}
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 1a9afd794..dd1c74d24 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -90,7 +90,7 @@ h2.list-heading {
 /*
  * Link styling
  */
-a, .link {
+a {
   color: $primary;
   cursor: pointer;
   text-decoration: none;
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 900958812..14ed507bc 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -36,7 +36,7 @@
                 <hr class="my-l">
                 @foreach($socialDrivers as $driver => $name)
                     <div>
-                        <a id="social-login-{{$driver}}" class="button outline block svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
+                        <a id="social-login-{{$driver}}" class="button outline block svg" href="{{ baseUrl("/login/service/" . $driver) }}">
                             @icon('auth/' . $driver)
                             {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
                         </a>
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 6746904d4..91c9dc2ff 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -5,7 +5,7 @@
         <div class="card content-wrap auto-height">
             <h1 class="list-heading">{{ trans('auth.reset_password') }}</h1>
 
-            <p class="muted small">{{ trans('auth.reset_password_send_instructions') }}</p>
+            <p class="text-muted small">{{ trans('auth.reset_password_send_instructions') }}</p>
 
             <form action="{{ baseUrl("/password/email") }}" method="POST" class="stretch-inputs">
                 {!! csrf_field() !!}
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 615ade3df..ec8f57625 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -42,7 +42,7 @@
                 <hr class="my-l">
                 @foreach($socialDrivers as $driver => $name)
                     <div>
-                        <a id="social-register-{{$driver}}" class="button block outline svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
+                        <a id="social-register-{{$driver}}" class="button block outline svg" href="{{ baseUrl("/register/service/" . $driver) }}">
                             @icon('auth/' . $driver)
                             {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
                         </a>
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index bc139e17f..03d6f680a 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -30,7 +30,7 @@
         @yield('content')
     </section>
 
-    <div back-to-top>
+    <div back-to-top class="primary-background">
         <div class="inner">
             @icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
         </div>
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 04352d898..fbf928102 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -29,17 +29,17 @@
                     @endforeach
                 </div>
             @else
-                <div class="well">
-                    {{--TODO--}}
+                <div>
+                    {{--TODO - Empty States --}}
                     <p class="text-muted italic">{{ trans('entities.books_empty_contents') }}</p>
                     @if(userCan('page-create', $book))
-                        <a href="{{ $book->getUrl('/create-page') }}" class="button outline page">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
+                        <a href="{{ $book->getUrl('/create-page') }}" class="button outline">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
                     @endif
                     @if(userCan('page-create', $book) && userCan('chapter-create', $book))
                         &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp;&nbsp;
                     @endif
                     @if(userCan('chapter-create', $book))
-                        <a href="{{ $book->getUrl('/create-chapter') }}" class="button outline chapter">@icon('chapter'){{ trans('entities.books_empty_add_chapter') }}</a>
+                        <a href="{{ $book->getUrl('/create-chapter') }}" class="button outline">@icon('chapter'){{ trans('entities.books_empty_add_chapter') }}</a>
                     @endif
                 </div>
             @endif
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 6dd41b890..7f2c135a0 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -26,18 +26,18 @@
                     @endforeach
                 </div>
             @else
-                {{--TODO--}}
-                <div v-pre class="well">
+                {{--TODO - Empty States --}}
+                <div v-pre>
                     <p class="text-muted italic">{{ trans('entities.chapters_empty') }}</p>
                     <p>
                         @if(userCan('page-create', $chapter))
-                            <a href="{{ $chapter->getUrl('/create-page') }}" class="button outline page">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
+                            <a href="{{ $chapter->getUrl('/create-page') }}" class="button outline">@icon('page'){{ trans('entities.books_empty_create_page') }}</a>
                         @endif
                         @if(userCan('page-create', $chapter) && userCan('book-update', $book))
                             &nbsp;&nbsp;<em class="text-muted">-{{ trans('entities.books_empty_or') }}-</em>&nbsp;&nbsp; &nbsp;
                         @endif
                         @if(userCan('book-update', $book))
-                            <a href="{{ $book->getUrl('/sort') }}" class="button outline book">@icon('book'){{ trans('entities.books_empty_sort_current_book') }}</a>
+                            <a href="{{ $book->getUrl('/sort') }}" class="button outline">@icon('book'){{ trans('entities.books_empty_sort_current_book') }}</a>
                         @endif
                     </p>
                 </div>
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index b68a2fdc8..9f955f691 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -13,8 +13,8 @@
                 <div dropdown class="dropdown-container">
                     <button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
                     <ul>
-                        <li class="px-l"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
-                        <li><a action="delete" class="text-button neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
+                        <li class="px-m"><small class="text-muted">{{trans('entities.comment_delete_confirm')}}</small></li>
+                        <li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
                     </ul>
                 </div>
             @endif
@@ -64,7 +64,7 @@
                 </div>
                 <div class="form-group text-right">
                     <button type="button" class="button outline" action="closeUpdateForm">{{ trans('common.cancel') }}</button>
-                    <button type="submit" class="button pos">{{ trans('entities.comment_save') }}</button>
+                    <button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
                 </div>
                 <div class="form-group loading" style="display: none;">
                     @include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index 1e5a4231c..bc42e0a0c 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -23,7 +23,7 @@
                     </div>
                     <div class="form-group text-right">
                         <button type="button" class="button outline" action="hideForm">{{ trans('common.cancel') }}</button>
-                        <button type="submit" class="button pos">{{ trans('entities.comment_save') }}</button>
+                        <button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
                     </div>
                     <div class="form-group loading" style="display: none;">
                         @include('partials.loading-icon', ['text' => trans('entities.comment_saving')])
diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index fd4fac9a9..2b83edc71 100644
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -1,4 +1,4 @@
-<header id="header" header-mobile-toggle>
+<header id="header" header-mobile-toggle class="primary-background">
     <div class="grid mx-l">
 
         <div>
diff --git a/resources/views/components/code-editor.blade.php b/resources/views/components/code-editor.blade.php
index 82704b383..7636cd581 100644
--- a/resources/views/components/code-editor.blade.php
+++ b/resources/views/components/code-editor.blade.php
@@ -4,7 +4,7 @@
 
             <div class="popup-header primary-background">
                 <div class="popup-title">{{ trans('components.code_editor') }}</div>
-                <button class="overlay-close neg corner-button button" @click="hide()">x</button>
+                <button class="popup-header-close" @click="hide()">x</button>
             </div>
 
             <div class="p-l popup-content">
@@ -43,7 +43,7 @@
                 </div>
 
                 <div class="form-group">
-                    <button type="button" class="button pos" @click="save()">{{ trans('components.code_save') }}</button>
+                    <button type="button" class="button primary" @click="save()">{{ trans('components.code_save') }}</button>
                 </div>
 
             </div>
diff --git a/resources/views/components/custom-checkbox.blade.php b/resources/views/components/custom-checkbox.blade.php
index 57ab1342c..73b7496f8 100644
--- a/resources/views/components/custom-checkbox.blade.php
+++ b/resources/views/components/custom-checkbox.blade.php
@@ -4,7 +4,7 @@ $value
 $checked
 $label
 --}}
-<label class="toggle-switch @if($errors->has($name)) neg @endif">
+<label class="toggle-switch @if($errors->has($name)) text-neg @endif">
     <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif>
     <span class="custom-checkbox text-primary">@icon('check')</span>
     <span class="label">{{$label}}</span>
diff --git a/resources/views/components/entity-selector-popup.blade.php b/resources/views/components/entity-selector-popup.blade.php
index 39ac2b8bf..c497a16d5 100644
--- a/resources/views/components/entity-selector-popup.blade.php
+++ b/resources/views/components/entity-selector-popup.blade.php
@@ -3,11 +3,11 @@
         <div class="popup-body small">
             <div class="popup-header primary-background">
                 <div class="popup-title">{{ trans('entities.entity_select') }}</div>
-                <button type="button" class="corner-button neg button overlay-close">x</button>
+                <button type="button" class="popup-header-close">x</button>
             </div>
             @include('components.entity-selector', ['name' => 'entity-selector'])
             <div class="popup-footer">
-                <button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">{{ trans('common.select') }}</button>
+                <button type="button" disabled="true" class="button entity-link-selector-confirm primary corner-button">{{ trans('common.select') }}</button>
             </div>
         </div>
     </div>
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index ad3fd2354..df577b545 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -4,7 +4,7 @@
 
             <div class="popup-header primary-background">
                 <div class="popup-title">{{ trans('components.image_select') }}</div>
-                <button class="overlay-close neg corner-button button" @click="hide()">x</button>
+                <button class="popup-header-close" @click="hide()">x</button>
             </div>
 
             <div class="flex-fill image-manager-body">
diff --git a/resources/views/components/image-picker.blade.php b/resources/views/components/image-picker.blade.php
index 27fa26528..e7c74c786 100644
--- a/resources/views/components/image-picker.blade.php
+++ b/resources/views/components/image-picker.blade.php
@@ -7,11 +7,11 @@
         <div class="text-center">
             <button class="button outline small" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
             <br>
-            <button class="text-button muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
+            <button class="text-button text-muted" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
 
             @if ($showRemove)
                 <span class="sep">|</span>
-                <button class="text-button muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
+                <button class="text-button text-muted" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
             @endif
         </div>
     </div>
diff --git a/resources/views/components/tag-manager.blade.php b/resources/views/components/tag-manager.blade.php
index 801919a14..5ae383198 100644
--- a/resources/views/components/tag-manager.blade.php
+++ b/resources/views/components/tag-manager.blade.php
@@ -1,6 +1,6 @@
 <div id="tag-manager" entity-id="{{ isset($entity) ? $entity->id : 0 }}" entity-type="{{ $entity ? $entity->getType() : $entityType }}">
     <div class="tags">
-        <p class="muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
+        <p class="text-muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
 
 
         <draggable :options="{handle: '.handle'}" :list="tags" element="div">
diff --git a/resources/views/form/delete-button.blade.php b/resources/views/form/delete-button.blade.php
deleted file mode 100644
index 6c53effae..000000000
--- a/resources/views/form/delete-button.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<form action="{{$url}}" method="POST" class="inline">
-    {{ csrf_field() }}
-    <input type="hidden" name="_method" value="DELETE">
-    <button type="submit" class="button neg">{{ isset($text) ? $text : trans('common.delete') }}</button>
-</form>
\ No newline at end of file
diff --git a/resources/views/form/password.blade.php b/resources/views/form/password.blade.php
index 0b6a5e043..8f7c4ee01 100644
--- a/resources/views/form/password.blade.php
+++ b/resources/views/form/password.blade.php
@@ -1,5 +1,5 @@
 <input type="password" id="{{ $name }}" name="{{ $name }}"
-       @if($errors->has($name)) class="neg" @endif
+       @if($errors->has($name)) class="text-neg" @endif
        @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
        @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
        @if(old($name)) value="{{ old($name)}}" @endif>
diff --git a/resources/views/form/role-select.blade.php b/resources/views/form/role-select.blade.php
index 036ba7847..eed9cb2f1 100644
--- a/resources/views/form/role-select.blade.php
+++ b/resources/views/form/role-select.blade.php
@@ -2,7 +2,7 @@
 <select id="{{ $name }}" name="{{ $name }}">
     @foreach($options as $option)
         <option value="{{$option->id}}"
-                @if($errors->has($name)) class="neg" @endif
+                @if($errors->has($name)) class="text-neg" @endif
                 @if(isset($model) || old($name)) @if(old($name) && old($name) === $option->id) selected @elseif(isset($model) && $model->role->id === $option->id) selected @endif @endif
                 >
             {{ $option->display_name }}
diff --git a/resources/views/form/text.blade.php b/resources/views/form/text.blade.php
index 3379b69b7..948a55cbc 100644
--- a/resources/views/form/text.blade.php
+++ b/resources/views/form/text.blade.php
@@ -1,5 +1,5 @@
 <input type="text" id="{{ $name }}" name="{{ $name }}"
-       @if($errors->has($name)) class="neg" @endif
+       @if($errors->has($name)) class="text-neg" @endif
        @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
        @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
        @if(isset($model) || old($name)) value="{{ old($name) ? old($name) : $model->$name}}" @endif>
diff --git a/resources/views/form/textarea.blade.php b/resources/views/form/textarea.blade.php
index c3b784d93..8220a0c37 100644
--- a/resources/views/form/textarea.blade.php
+++ b/resources/views/form/textarea.blade.php
@@ -1,5 +1,5 @@
 <textarea id="{{ $name }}" name="{{ $name }}" rows="5"
-          @if($errors->has($name)) class="neg" @endif>@if(isset($model) || old($name)){{ old($name) ? old($name) : $model->$name}}@endif</textarea>
+          @if($errors->has($name)) class="text-neg" @endif>@if(isset($model) || old($name)){{ old($name) ? old($name) : $model->$name}}@endif</textarea>
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>
 @endif
\ No newline at end of file
diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php
index e3b758bf4..e515c0b2d 100644
--- a/resources/views/pages/form-toolbox.blade.php
+++ b/resources/views/pages/form-toolbox.blade.php
@@ -22,7 +22,7 @@
             <div class="px-l files">
 
                 <div id="file-list" v-show="!fileToEdit">
-                    <p class="muted small">{{ trans('entities.attachments_explain') }} <span class="secondary">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
+                    <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
 
                     <div class="tab-container">
                         <div class="nav-tabs">
@@ -37,7 +37,7 @@
                                     <div class="py-s">
                                         <a :href="getFileUrl(file)" target="_blank" v-text="file.name"></a>
                                         <div v-if="file.deleting">
-                                            <span class="neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
+                                            <span class="text-neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
                                             <br>
                                             <span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
                                         </div>
@@ -46,7 +46,7 @@
                                     <div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div>
                                 </div>
                             </draggable>
-                            <p class="small muted" v-if="files.length === 0">
+                            <p class="small text-muted" v-if="files.length === 0">
                                 {{ trans('entities.attachments_no_files') }}
                             </p>
                         </div>
@@ -54,16 +54,16 @@
                             <dropzone placeholder="{{ trans('entities.attachments_dropzone') }}" :upload-url="getUploadUrl()" :uploaded-to="pageId" @success="uploadSuccess"></dropzone>
                         </div>
                         <div v-show="tab === 'link'" @keypress.enter.prevent="attachNewLink(file)">
-                            <p class="muted small">{{ trans('entities.attachments_explain_link') }}</p>
+                            <p class="text-muted small">{{ trans('entities.attachments_explain_link') }}</p>
                             <div class="form-group">
                                 <label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label>
                                 <input type="text" placeholder="{{ trans('entities.attachments_link_name') }}" v-model="file.name">
-                                <p class="small neg" v-for="error in errors.link.name" v-text="error"></p>
+                                <p class="small text-neg" v-for="error in errors.link.name" v-text="error"></p>
                             </div>
                             <div class="form-group">
                                 <label for="attachment-via-link">{{ trans('entities.attachments_link_url') }}</label>
                                 <input type="text"  placeholder="{{ trans('entities.attachments_link_url_hint') }}" v-model="file.link">
-                                <p class="small neg" v-for="error in errors.link.link" v-text="error"></p>
+                                <p class="small text-neg" v-for="error in errors.link.link" v-text="error"></p>
                             </div>
                             <button @click.prevent="attachNewLink(file)" class="button primary">{{ trans('entities.attach') }}</button>
 
@@ -78,7 +78,7 @@
                     <div class="form-group">
                         <label for="attachment-name-edit">{{ trans('entities.attachments_edit_file_name') }}</label>
                         <input type="text" id="attachment-name-edit" placeholder="{{ trans('entities.attachments_edit_file_name') }}" v-model="fileToEdit.name">
-                        <p class="small neg" v-for="error in errors.edit.name" v-text="error"></p>
+                        <p class="small text-neg" v-for="error in errors.edit.name" v-text="error"></p>
                     </div>
 
                     <div class="tab-container">
@@ -94,7 +94,7 @@
                             <div class="form-group">
                                 <label for="attachment-link-edit">{{ trans('entities.attachments_link_url') }}</label>
                                 <input type="text" id="attachment-link-edit" placeholder="{{ trans('entities.attachment_link') }}" v-model="fileToEdit.link">
-                                <p class="small neg" v-for="error in errors.edit.link" v-text="error"></p>
+                                <p class="small text-neg" v-for="error in errors.edit.link" v-text="error"></p>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 152b67c63..5a59349a1 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -48,7 +48,7 @@
                     </ul>
                 </div>
 
-                <button type="submit" id="save-button" class="text-button text-pos">@icon('save'){{ trans('entities.pages_save') }}</button>
+                <button type="submit" id="save-button" class="text-button text-pos-hover">@icon('save'){{ trans('entities.pages_save') }}</button>
             </div>
         </div>
     </div>
@@ -67,7 +67,7 @@
         @if(setting('app-editor') === 'wysiwyg')
             <div wysiwyg-editor class="flex-fill flex">
                 <textarea id="html-editor"  name="html" rows="5" v-pre
-                    @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
+                    @if($errors->has('html')) class="text-neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
             </div>
 
             @if($errors->has('html'))
@@ -95,7 +95,7 @@
 
                     <div markdown-input class="flex flex-fill">
                         <textarea  id="markdown-editor-input"  name="markdown" rows="5"
-                            @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
+                            @if($errors->has('markdown')) class="text-neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
                     </div>
 
                 </div>
diff --git a/resources/views/pages/guest-create.blade.php b/resources/views/pages/guest-create.blade.php
index 2d059bf36..719abc276 100644
--- a/resources/views/pages/guest-create.blade.php
+++ b/resources/views/pages/guest-create.blade.php
@@ -1,5 +1,7 @@
 @extends('base')
 
+{{--TODO - Check design of this view--}}
+
 @section('content')
 
     <div class="container small">
@@ -14,8 +16,8 @@
             </div>
 
             <div class="form-group">
-                <a href="{{ $parent->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
-                <button type="submit" class="button pos">{{ trans('common.continue') }}</button>
+                <a href="{{ $parent->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
+                <button type="submit" class="button primary">{{ trans('common.continue') }}</button>
             </div>
 
         </form>
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php
index e45bd7779..9d968c016 100644
--- a/resources/views/pages/revisions.blade.php
+++ b/resources/views/pages/revisions.blade.php
@@ -60,7 +60,7 @@
                                                 <form action="{{ $revision->getUrl('/delete/') }}" method="POST">
                                                     {!! csrf_field() !!}
                                                     <input type="hidden" name="_method" value="DELETE">
-                                                    <button type="submit" class="text-button neg">@icon('delete'){{ trans('common.delete') }}</button>
+                                                    <button type="submit" class="text-button text-neg">@icon('delete'){{ trans('common.delete') }}</button>
                                                 </form>
                                             </li>
                                         </ul>
diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php
index bbe79cf84..47b7a832c 100644
--- a/resources/views/partials/custom-styles.blade.php
+++ b/resources/views/partials/custom-styles.blade.php
@@ -1,22 +1,19 @@
 <style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
-    header, [back-to-top], .primary-background {
+    .primary-background {
         background-color: {{ setting('app-color') }} !important;
     }
     .primary-background-light {
         background-color: {{ setting('app-color-light') }};
     }
-    .button-base, .button, input[type="button"], input[type="submit"] {
+    .button.primary, .button.primary:hover, .button.primary:active, .button.primary:focus {
         background-color: {{ setting('app-color') }};
         border-color: {{ setting('app-color') }};
     }
-    .button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
-        background-color: {{ setting('app-color') }};
-    }
     .nav-tabs a.selected, .nav-tabs .tab-item.selected {
         border-bottom-color: {{ setting('app-color') }};
     }
-    .text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
-        color: {{ setting('app-color') }};
-        fill: {{ setting('app-color') }};
+    .text-primary, .text-primary-hover:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
+        color: {{ setting('app-color') }} !important;
+        fill: {{ setting('app-color') }} !important;;
     }
 </style>
diff --git a/resources/views/settings/maintenance.blade.php b/resources/views/settings/maintenance.blade.php
index f7f813f26..74a8dbb75 100644
--- a/resources/views/settings/maintenance.blade.php
+++ b/resources/views/settings/maintenance.blade.php
@@ -18,7 +18,7 @@
         <h2 class="list-heading">{{ trans('settings.maint_image_cleanup') }}</h2>
         <div class="grid half gap-xl">
             <div>
-                <p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
+                <p class="small text-muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
             </div>
             <div>
                 <form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}">
@@ -26,7 +26,7 @@
                     <input type="hidden" name="_method" value="DELETE">
                     <div>
                         @if(session()->has('cleanup-images-warning'))
-                            <p class="text neg">
+                            <p class="text-neg">
                                 {{ session()->get('cleanup-images-warning') }}
                             </p>
                             <input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}">
diff --git a/resources/views/settings/roles/form.blade.php b/resources/views/settings/roles/form.blade.php
index f16706dd1..67b4ec058 100644
--- a/resources/views/settings/roles/form.blade.php
+++ b/resources/views/settings/roles/form.blade.php
@@ -48,7 +48,7 @@
             <p>{{ trans('settings.role_asset_desc') }}</p>
 
             @if (isset($role) && $role->system_name === 'admin')
-                <p class="text-secondary">{{ trans('settings.role_asset_admins') }}</p>
+                <p class="text-warn">{{ trans('settings.role_asset_admins') }}</p>
             @endif
 
             <table class="table toggle-switch-list compact">
diff --git a/resources/views/shelves/list-item.blade.php b/resources/views/shelves/list-item.blade.php
index 5766ca755..a3bb2fd52 100644
--- a/resources/views/shelves/list-item.blade.php
+++ b/resources/views/shelves/list-item.blade.php
@@ -9,7 +9,7 @@
         </div>
     </div>
 </a>
-<div class="entity-shelf-books grid third entity-list-item-children">
+<div class="entity-shelf-books grid third gap-y-xs entity-list-item-children">
     @foreach($shelf->books as $book)
         <div>
             <a href="{{ $book->getUrl() }}" class="entity-chip text-book">
diff --git a/resources/views/shelves/show.blade.php b/resources/views/shelves/show.blade.php
index 21e8cf38d..d7f604a63 100644
--- a/resources/views/shelves/show.blade.php
+++ b/resources/views/shelves/show.blade.php
@@ -20,11 +20,12 @@
                 </div>
             @else
                 <p>
+                    {{-- TODO - Empty Shelf State--}}
                     <hr>
                     <span class="text-muted italic">{{ trans('entities.shelves_empty_contents') }}</span>
                     @if(userCan('bookshelf-create', $shelf))
                         <br/>
-                        <a href="{{ $shelf->getUrl('/edit') }}" class="button outline bookshelf">{{ trans('entities.shelves_edit_and_assign') }}</a>
+                        <a href="{{ $shelf->getUrl('/edit') }}" class="button outline">{{ trans('entities.shelves_edit_and_assign') }}</a>
                     @endif
                 </p>
             @endif
diff --git a/resources/views/users/form.blade.php b/resources/views/users/form.blade.php
index 1e103ec70..16a7ebdeb 100644
--- a/resources/views/users/form.blade.php
+++ b/resources/views/users/form.blade.php
@@ -1,6 +1,6 @@
 
 @if($authMethod === 'system' && $user->system_name == 'public')
-    <p class="mb-none text-secondary">{{ trans('settings.users_system_public') }}</p>
+    <p class="mb-none text-warn">{{ trans('settings.users_system_public') }}</p>
 @endif
 
 <div class="pt-m">