diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php
index b48253eb1..43927557f 100644
--- a/app/Config/setting-defaults.php
+++ b/app/Config/setting-defaults.php
@@ -14,8 +14,8 @@ return [
     'app-logo'             => '',
     'app-name-header'      => true,
     'app-editor'           => 'wysiwyg',
-    'app-color'            => '#0288D1',
-    'app-color-light'      => 'rgba(21, 101, 192, 0.15)',
+    'app-color'            => '#1d75b6',
+    'app-color-light'      => 'rgba(29,117,182,0.15)',
     'app-custom-head'      => false,
     'registration-enabled' => false,
 
diff --git a/resources/assets/js/components/setting-app-color-picker.js b/resources/assets/js/components/setting-app-color-picker.js
index 064596d86..ddacc4bd0 100644
--- a/resources/assets/js/components/setting-app-color-picker.js
+++ b/resources/assets/js/components/setting-app-color-picker.js
@@ -10,7 +10,7 @@ class SettingAppColorPicker {
         this.colorInput.addEventListener('change', this.updateColor.bind(this));
         this.colorInput.addEventListener('input', this.updateColor.bind(this));
         this.resetButton.addEventListener('click', event => {
-            this.colorInput.value = '#0288D1';
+            this.colorInput.value = '#1d75b6';
             this.updateColor();
         });
     }
diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 024b9cd7e..e3d9e17ca 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -4,28 +4,6 @@ button {
   font-size: 100%;
 }
 
-@mixin generate-button-colors($textColor, $backgroundColor) {
-  background-color: $backgroundColor;
-  color: $textColor;
-  fill: $textColor;
-  border: 1px solid $backgroundColor;
-  &:hover {
-    background-color: lighten($backgroundColor, 8%);
-    color: $textColor;
-  }
-  &:active {
-    background-color: darken($backgroundColor, 8%);
-  }
-  &:focus {
-    background-color: lighten($backgroundColor, 4%);
-    box-shadow: $bs-light;
-    color: $textColor;
-  }
-}
-
-// Button Specific Variables
-$button-border-radius: 2px;
-
 .button  {
   text-decoration: none;
   font-size: 0.85rem;
@@ -36,39 +14,54 @@ $button-border-radius: 2px;
   display: inline-block;
   font-weight: 400;
   outline: 0;
-  border-radius: $button-border-radius;
+  border-radius: 2px;
   cursor: pointer;
-  transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
+  transition: background-color ease-in-out 120ms,
+    filter ease-in-out 120ms,
+    box-shadow ease-in-out 120ms;
   box-shadow: none;
-  background-color: $primary;
+  background-color: var(--color-primary);
   color: #FFF;
   fill: #FFF;
   text-transform: uppercase;
-  border: 1px solid $primary;
+  border: 1px solid var(--color-primary);
   vertical-align: top;
-  &:hover, &:focus {
+  &:hover, &:focus, &:active {
+    background-color: var(--color-primary);
     text-decoration: none;
+    color: #FFFFFF;
+  }
+  &:hover {
+    box-shadow: $bs-light;
+    filter: brightness(110%);
   }
   &:focus {
     outline: 1px dotted currentColor;
     outline-offset: -$-xs;
+    box-shadow: none;
+    filter: brightness(90%);
   }
   &:active {
     outline: 0;
-    background-color: darken($primary, 8%);
   }
 }
-.button.primary {
-  @include generate-button-colors(#FFFFFF, $primary);
-}
+
 .button.outline {
   background-color: transparent;
-  color: #888;
-  fill: #888;
-  border: 1px solid #DDD;
+  color: #666;
+  fill: currentColor;
+  border: 1px solid #CCC;
   &:hover, &:focus, &:active {
+    border: 1px solid #CCC;
     box-shadow: none;
-    background-color: #EEE;
+    background-color: #F2F2F2;
+    filter: none;
+  }
+  &:active {
+    border-color: #BBB;
+    background-color: #DDD;
+    color: #666;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -90,12 +83,18 @@ $button-border-radius: 2px;
   user-select: none;
   font-size: 0.75rem;
   line-height: 1.4em;
-    &:active {
+  color: var(--color-primary);
+  fill: var(--color-primary);
+  &:active {
     outline: 0;
   }
   &:hover {
     text-decoration: none;
   }
+  &:hover, &:focus {
+    color: var(--color-primary);
+    fill: var(--color-primary);
+  }
 }
 
 .button.block {
@@ -125,6 +124,7 @@ $button-border-radius: 2px;
 .button[disabled] {
   background-color: #BBB;
   cursor: default;
+  border-color: #CCC;
   &:hover {
     background-color: #BBB;
     cursor: default;
diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index 3664d0076..65f56a388 100644
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -1,3 +1,13 @@
+/**
+ * Background colors
+ */
+
+.primary-background {
+  background-color: var(--color-primary) !important;
+}
+.primary-background-light {
+  background-color: var(--color-primary-light);
+}
 
 /*
  * Status text colors
@@ -21,8 +31,8 @@
  * Style text colors
  */
 .text-primary, .text-primary:hover, .text-primary-hover:hover  {
-  color: $primary !important;
-  fill: $primary !important;
+  color: var(--color-primary) !important;
+  fill: var(--color-primary) !important;
 }
 
 .text-muted {
diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index a61c235eb..0172956a7 100644
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -150,9 +150,6 @@
     padding: 8px $-m;
   }
 }
-.popup-footer {
-  margin-top: 1px;
-}
 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   height: 444px;
   min-height: 444px;
@@ -582,6 +579,20 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
+.nav-tabs {
+  text-align: center;
+  a, .tab-item {
+    padding: $-m;
+    display: inline-block;
+    color: #666;
+    fill: #666;
+    cursor: pointer;
+    &.selected {
+      border-bottom: 2px solid var(--color-primary);
+    }
+  }
+}
+
 .image-picker .none {
   display: none;
 }
diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 3c81d6d9f..4f89533b0 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -98,7 +98,7 @@
     max-width: 100%;
   }
   [drawio-diagram]:hover {
-    outline: 2px solid $primary;
+    outline: 2px solid var(--color-primary);
   }
 }
 
@@ -339,16 +339,16 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   button {
     background-color: transparent;
     border: none;
-    color: $primary;
+    fill: #666;
     padding: 0;
     cursor: pointer;
     position: absolute;
     left: 8px;
-    top: 9.5px;
+    top: 9px;
   }
   input {
     display: block;
-    padding-left: $-l;
+    padding-left: $-l + 4px;
     width: 300px;
     max-width: 100%;
   }
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 3cf55f1de..687ddd8d2 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -18,7 +18,6 @@ header {
   display: block;
   z-index: 11;
   top: 0;
-  background-color: $primary-dark;
   color: #fff;
   fill: #fff;
   border-bottom: 1px solid #DDD;
@@ -371,18 +370,4 @@ header .search-box {
   .action-buttons .dropdown-container:last-child a {
     padding-left: $-xs;
   }
-}
-
-.nav-tabs {
-  text-align: center;
-  a, .tab-item {
-    padding: $-m;
-    display: inline-block;
-    color: #666;
-    fill: #666;
-    cursor: pointer;
-    &.selected {
-      border-bottom: 2px solid $primary;
-    }
-  }
 }
\ No newline at end of file
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index f1d165a47..f4406144d 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -90,14 +90,14 @@ h2.list-heading {
  * Link styling
  */
 a {
-  color: $primary;
+  color: var(--color-primary);
+  fill: var(--color-primary);
   cursor: pointer;
   text-decoration: none;
-  transition: color ease-in-out 80ms;
+  transition: filter ease-in-out 80ms;
   line-height: 1.6;
   &:hover {
     text-decoration: underline;
-    color: darken($primary, 20%);
   }
   &.icon {
     display: inline-block;
@@ -195,7 +195,7 @@ pre {
 blockquote {
   display: block;
   position: relative;
-  border-left: 4px solid $primary;
+  border-left: 4px solid var(--color-primary);
   background-color: #F8F8F8;
   padding: $-s $-m $-s $-xl;
   &:before {
@@ -239,7 +239,6 @@ pre code {
 }
 
 span.highlight {
-  //background-color: rgba($primary, 0.2);
   font-weight: bold;
   padding: 2px 4px;
 }
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 041b70edf..d2d25127b 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -41,20 +41,20 @@ $fs-m: 14px;
 $fs-s: 12px;
 
 // Colours
-$primary: #0288D1;
-$primary-dark: #0288D1;
-$secondary: #cf4d03;
+:root {
+  --color-primary: '#1d75b6';
+  --color-primary-light: 'rgba(29,117,182,0.15)';
+}
 $positive: #0f7d15;
 $negative: #ab0f0e;
-$info: $primary;
-$warning: $secondary;
-$primary-faded: rgba(21, 101, 192, 0.15);
+$info: #0288D1;
+$warning: #cf4d03;
 
 // Item Colors
 $color-bookshelf: #af5a5a;
 $color-book: #009688;
 $color-chapter: #d7804a;
-$color-page: $primary;
+$color-page: #0288D1;
 $color-page-draft: #9A60DA;
 
 // Text colours
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index d403a714e..d6f4f251b 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -99,7 +99,7 @@ $loadingSize: 10px;
 // Back to top link
 $btt-size: 40px;
 [back-to-top] {
-  background-color: $primary;
+  background-color: var(--color-primary);
   position: fixed;
   bottom: $-m;
   right: $-l;
@@ -187,7 +187,7 @@ $btt-size: 40px;
     margin-bottom: 0;
   }
   .entity-list-item.selected {
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background-color: rgba(0, 0, 0, 0.05) !important;
   }
   .loading {
     height: 400px;
diff --git a/resources/views/auth/invite-set-password.blade.php b/resources/views/auth/invite-set-password.blade.php
index 807bd417f..fbe62f21e 100644
--- a/resources/views/auth/invite-set-password.blade.php
+++ b/resources/views/auth/invite-set-password.blade.php
@@ -16,7 +16,7 @@
                 </div>
 
                 <div class="text-right">
-                    <button class="button primary">{{ trans('auth.user_invite_page_confirm_button') }}</button>
+                    <button class="button">{{ trans('auth.user_invite_page_confirm_button') }}</button>
                 </div>
 
             </form>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 76aa3a6e9..438339e92 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -28,7 +28,7 @@
                     </div>
 
                     <div class="text-right">
-                        <button class="button primary" tabindex="1">{{ title_case(trans('auth.log_in')) }}</button>
+                        <button class="button" tabindex="1">{{ title_case(trans('auth.log_in')) }}</button>
                     </div>
                 </div>
 
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 864b4e7d2..8273ed235 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -16,7 +16,7 @@
                 </div>
 
                 <div class="from-group text-right mt-m">
-                    <button class="button primary">{{ trans('auth.reset_password_send_button') }}</button>
+                    <button class="button">{{ trans('auth.reset_password_send_button') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index 227b39079..930544cde 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -26,7 +26,7 @@
                 </div>
 
                 <div class="from-group text-right mt-m">
-                    <button class="button primary">{{ trans('auth.reset_password') }}</button>
+                    <button class="button">{{ trans('auth.reset_password') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 9cf34f501..60ceba93c 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -31,7 +31,7 @@
                         <a href="{{ url('/login') }}">{{ trans('auth.already_have_account') }}</a>
                     </div>
                     <div class="from-group text-right">
-                        <button class="button primary">{{ trans('auth.create_account') }}</button>
+                        <button class="button">{{ trans('auth.create_account') }}</button>
                     </div>
                 </div>
 
diff --git a/resources/views/auth/user-unconfirmed.blade.php b/resources/views/auth/user-unconfirmed.blade.php
index 2142a5dcb..85473685b 100644
--- a/resources/views/auth/user-unconfirmed.blade.php
+++ b/resources/views/auth/user-unconfirmed.blade.php
@@ -24,7 +24,7 @@
                     @endif
                 </div>
                 <div class="form-group text-right mt-m">
-                    <button type="submit" class="button primary">{{ trans('auth.email_not_confirmed_resend_button') }}</button>
+                    <button type="submit" class="button">{{ trans('auth.email_not_confirmed_resend_button') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php
index 2860e8bcd..be3f742cb 100644
--- a/resources/views/books/delete.blade.php
+++ b/resources/views/books/delete.blade.php
@@ -23,7 +23,7 @@
                 {!! csrf_field() !!}
                 <input type="hidden" name="_method" value="DELETE">
                 <a href="{{$book->getUrl()}}" class="button outline">{{ trans('common.cancel') }}</a>
-                <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                <button type="submit" class="button">{{ trans('common.confirm') }}</button>
             </form>
         </div>
 
diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php
index 5d3f11e2e..110019002 100644
--- a/resources/views/books/form.blade.php
+++ b/resources/views/books/form.blade.php
@@ -37,5 +37,5 @@
 
 <div class="form-group text-right">
     <a href="{{ isset($book) ? $book->getUrl() : url('/books') }}" class="button outline">{{ trans('common.cancel') }}</a>
-    <button type="submit" class="button primary">{{ trans('entities.books_save') }}</button>
+    <button type="submit" class="button">{{ trans('entities.books_save') }}</button>
 </div>
\ No newline at end of file
diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php
index 676e7112e..26ac8470f 100644
--- a/resources/views/books/sort.blade.php
+++ b/resources/views/books/sort.blade.php
@@ -28,7 +28,7 @@
                         <input book-sort-input type="hidden" name="sort-tree">
                         <div class="list text-right">
                             <a href="{{ $book->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                            <button class="button primary" type="submit">{{ trans('entities.books_sort_save') }}</button>
+                            <button class="button" type="submit">{{ trans('entities.books_sort_save') }}</button>
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php
index 3444ee0fb..60f8c9933 100644
--- a/resources/views/chapters/delete.blade.php
+++ b/resources/views/chapters/delete.blade.php
@@ -27,7 +27,7 @@
 
                 <div class="text-right">
                     <a href="{{ $chapter->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                    <button type="submit" class="button">{{ trans('common.confirm') }}</button>
                 </div>
             </form>
         </div>
diff --git a/resources/views/chapters/form.blade.php b/resources/views/chapters/form.blade.php
index 31d8597de..399d3fe36 100644
--- a/resources/views/chapters/form.blade.php
+++ b/resources/views/chapters/form.blade.php
@@ -22,5 +22,5 @@
 
 <div class="form-group text-right">
     <a href="{{ isset($chapter) ? $chapter->getUrl() : $book->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-    <button type="submit" class="button primary">{{ trans('entities.chapters_save') }}</button>
+    <button type="submit" class="button">{{ trans('entities.chapters_save') }}</button>
 </div>
diff --git a/resources/views/chapters/move.blade.php b/resources/views/chapters/move.blade.php
index 7f3de1322..b7fe6cb0a 100644
--- a/resources/views/chapters/move.blade.php
+++ b/resources/views/chapters/move.blade.php
@@ -27,7 +27,7 @@
 
                 <div class="form-group text-right">
                     <a href="{{ $chapter->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button primary">{{ trans('entities.chapters_move') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.chapters_move') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 9d7f230dc..5fbdfa500 100644
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -61,7 +61,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 primary">{{ trans('entities.comment_save') }}</button>
+                    <button type="submit" class="button">{{ 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/create.blade.php b/resources/views/comments/create.blade.php
index abd95f008..61e41a354 100644
--- a/resources/views/comments/create.blade.php
+++ b/resources/views/comments/create.blade.php
@@ -19,7 +19,7 @@
             <div class="form-group text-right">
                 <button type="button" class="button outline"
                         action="hideForm">{{ trans('common.cancel') }}</button>
-                <button type="submit" class="button primary">{{ trans('entities.comment_save') }}</button>
+                <button type="submit" class="button">{{ 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/components/code-editor.blade.php b/resources/views/components/code-editor.blade.php
index 656a77876..31a583182 100644
--- a/resources/views/components/code-editor.blade.php
+++ b/resources/views/components/code-editor.blade.php
@@ -43,7 +43,7 @@
                 </div>
 
                 <div class="form-group">
-                    <button type="button" class="button primary" @click="save()">{{ trans('components.code_save') }}</button>
+                    <button type="button" class="button" @click="save()">{{ trans('components.code_save') }}</button>
                 </div>
 
             </div>
diff --git a/resources/views/components/entity-selector-popup.blade.php b/resources/views/components/entity-selector-popup.blade.php
index 6fb3334e9..0beee658d 100644
--- a/resources/views/components/entity-selector-popup.blade.php
+++ b/resources/views/components/entity-selector-popup.blade.php
@@ -7,7 +7,7 @@
             </div>
             @include('components.entity-selector', ['name' => 'entity-selector'])
             <div class="popup-footer">
-                <button type="button" disabled="true" class="button entity-link-selector-confirm primary corner-button">{{ trans('common.select') }}</button>
+                <button type="button" disabled="true" class="button entity-link-selector-confirm 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 035a6b66f..0971c3ed9 100644
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -72,7 +72,7 @@
                                     <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
 
                                 </div>
-                                <button class="button primary anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
+                                <button class="button anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
                                     {{ trans('components.image_select_image') }}
                                 </button>
                                 <div class="clearfix"></div>
diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php
index b3e148e21..f27209c48 100644
--- a/resources/views/form/entity-permissions.blade.php
+++ b/resources/views/form/entity-permissions.blade.php
@@ -37,6 +37,6 @@
 
     <div class="text-right">
         <a href="{{ $model->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-        <button type="submit" class="button primary">{{ trans('entities.permissions_save') }}</button>
+        <button type="submit" class="button">{{ trans('entities.permissions_save') }}</button>
     </div>
 </form>
\ No newline at end of file
diff --git a/resources/views/pages/attachment-manager.blade.php b/resources/views/pages/attachment-manager.blade.php
index 7b16c6b7b..e362b95d5 100644
--- a/resources/views/pages/attachment-manager.blade.php
+++ b/resources/views/pages/attachment-manager.blade.php
@@ -57,7 +57,7 @@
                         <input type="text"  placeholder="{{ trans('entities.attachments_link_url_hint') }}" v-model="file.link">
                         <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>
+                    <button @click.prevent="attachNewLink(file)" class="button">{{ trans('entities.attach') }}</button>
 
                 </div>
             </div>
@@ -92,7 +92,7 @@
             </div>
 
             <button type="button" class="button outline" @click="cancelEdit">{{ trans('common.back') }}</button>
-            <button @click.enter.prevent="updateFile(fileToEdit)" class="button primary">{{ trans('common.save') }}</button>
+            <button @click.enter.prevent="updateFile(fileToEdit)" class="button">{{ trans('common.save') }}</button>
         </div>
 
     </div>
diff --git a/resources/views/pages/copy.blade.php b/resources/views/pages/copy.blade.php
index f19742172..2b5d7e74e 100644
--- a/resources/views/pages/copy.blade.php
+++ b/resources/views/pages/copy.blade.php
@@ -39,7 +39,7 @@
 
                 <div class="form-group text-right">
                     <a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button primary">{{ trans('entities.pages_copy') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.pages_copy') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php
index a72157a83..2ec046fa0 100644
--- a/resources/views/pages/delete.blade.php
+++ b/resources/views/pages/delete.blade.php
@@ -34,7 +34,7 @@
                         <input type="hidden" name="_method" value="DELETE">
                         <div class="form-group text-right">
                             <a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                            <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                            <button type="submit" class="button">{{ trans('common.confirm') }}</button>
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/pages/guest-create.blade.php b/resources/views/pages/guest-create.blade.php
index 4650f3a1c..5404d8f4b 100644
--- a/resources/views/pages/guest-create.blade.php
+++ b/resources/views/pages/guest-create.blade.php
@@ -27,7 +27,7 @@
 
                 <div class="form-group text-right">
                     <a href="{{ $parent->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button primary">{{ trans('common.continue') }}</button>
+                    <button type="submit" class="button">{{ trans('common.continue') }}</button>
                 </div>
 
             </form>
diff --git a/resources/views/pages/move.blade.php b/resources/views/pages/move.blade.php
index 83421be93..7cf294f14 100644
--- a/resources/views/pages/move.blade.php
+++ b/resources/views/pages/move.blade.php
@@ -27,7 +27,7 @@
 
                 <div class="form-group text-right">
                     <a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button primary">{{ trans('entities.pages_move') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.pages_move') }}</button>
                 </div>
             </form>
 
diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php
index 2a293edc5..34b702c51 100644
--- a/resources/views/partials/custom-styles.blade.php
+++ b/resources/views/partials/custom-styles.blade.php
@@ -1,24 +1,6 @@
 <style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
-    .primary-background {
-        background-color: {{ setting('app-color') }} !important;
-    }
-    .primary-background-light {
-        background-color: {{ setting('app-color-light') }};
-    }
-    .button.primary, .button.primary:hover, .button.primary:active, .button.primary:focus {
-        background-color: {{ setting('app-color') }};
-        border-color: {{ setting('app-color') }};
-    }
-    .nav-tabs a.selected, .nav-tabs .tab-item.selected {
-        border-bottom-color: {{ setting('app-color') }};
-    }
-    .text-primary, .text-primary-hover:hover, .text-primary:hover {
-        color: {{ setting('app-color') }} !important;
-        fill: {{ setting('app-color') }} !important;
-    }
-
-    a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {
-        color: {{ setting('app-color') }};
-        fill: {{ setting('app-color') }};
+    :root {
+        --color-primary: {{ setting('app-color') }};
+        --color-primary-light: {{ setting('app-color-light') }};
     }
 </style>
diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php
index 7a2cf65bd..f19e560a2 100644
--- a/resources/views/search/all.blade.php
+++ b/resources/views/search/all.blade.php
@@ -182,7 +182,7 @@
                         </table>
 
 
-                        <button type="submit" class="button primary">{{ trans('entities.search_update') }}</button>
+                        <button type="submit" class="button">{{ trans('entities.search_update') }}</button>
                     </form>
 
                 </div>
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 510e3af1b..fd589e6e6 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -72,7 +72,7 @@
                 </div>
 
                 <div class="form-group text-right">
-                    <button type="submit" class="button primary">{{ trans('settings.settings_save') }}</button>
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
             </form>
         </div>
@@ -135,7 +135,7 @@
                             <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
                         </div>
                         <div setting-app-color-picker class="text-m-right">
-                            <input type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#0288D1">
+                            <input type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#1d75b6">
                             <input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
                             <br>
                             <button type="button" class="text-button text-muted mt-s mx-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button>
@@ -173,7 +173,7 @@
                 </div>
 
                 <div class="form-group text-right">
-                    <button type="submit" class="button primary">{{ trans('settings.settings_save') }}</button>
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
             </form>
         </div>
@@ -236,7 +236,7 @@
                 </div>
 
                 <div class="form-group text-right">
-                    <button type="submit" class="button primary">{{ trans('settings.settings_save') }}</button>
+                    <button type="submit" class="button">{{ trans('settings.settings_save') }}</button>
                 </div>
             </form>
         </div>
diff --git a/resources/views/settings/roles/delete.blade.php b/resources/views/settings/roles/delete.blade.php
index e0075fa8a..4f40345df 100644
--- a/resources/views/settings/roles/delete.blade.php
+++ b/resources/views/settings/roles/delete.blade.php
@@ -32,7 +32,7 @@
                     <div>
                         <div class="form-group text-right">
                             <a href="{{ url("/settings/roles/{$role->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                            <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                            <button type="submit" class="button">{{ trans('common.confirm') }}</button>
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/settings/roles/form.blade.php b/resources/views/settings/roles/form.blade.php
index a9933a7a6..20b8d65ed 100644
--- a/resources/views/settings/roles/form.blade.php
+++ b/resources/views/settings/roles/form.blade.php
@@ -224,7 +224,7 @@
         @if (isset($role) && $role->id)
             <a href="{{ url("/settings/roles/delete/{$role->id}") }}" class="button outline">{{ trans('settings.role_delete') }}</a>
         @endif
-        <button type="submit" class="button primary">{{ trans('settings.role_save') }}</button>
+        <button type="submit" class="button">{{ trans('settings.role_save') }}</button>
     </div>
 
 </div>
diff --git a/resources/views/shelves/form.blade.php b/resources/views/shelves/form.blade.php
index 1d152a143..fa1940948 100644
--- a/resources/views/shelves/form.blade.php
+++ b/resources/views/shelves/form.blade.php
@@ -66,5 +66,5 @@
 
 <div class="form-group text-right">
     <a href="{{ isset($shelf) ? $shelf->getUrl() : url('/shelves') }}" class="button outline">{{ trans('common.cancel') }}</a>
-    <button type="submit" class="button primary">{{ trans('entities.shelves_save') }}</button>
+    <button type="submit" class="button">{{ trans('entities.shelves_save') }}</button>
 </div>
\ No newline at end of file
diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php
index b9f404bb7..109b81225 100644
--- a/resources/views/users/create.blade.php
+++ b/resources/views/users/create.blade.php
@@ -20,7 +20,7 @@
 
                 <div class="form-group text-right">
                     <a href="{{  url($currentUser->can('users-manage') ? "/settings/users" : "/") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button class="button primary" type="submit">{{ trans('common.save') }}</button>
+                    <button class="button" type="submit">{{ trans('common.save') }}</button>
                 </div>
 
             </form>
diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php
index aa9811bf5..d3349c2f3 100644
--- a/resources/views/users/delete.blade.php
+++ b/resources/views/users/delete.blade.php
@@ -20,7 +20,7 @@
 
                         <input type="hidden" name="_method" value="DELETE">
                         <a href="{{ url("/settings/users/{$user->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
-                        <button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
+                        <button type="submit" class="button">{{ trans('common.confirm') }}</button>
                     </form>
                 </div>
             </div>
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index 92a36c943..9f8fba8df 100644
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -58,7 +58,7 @@
                     @if($authMethod !== 'system')
                         <a href="{{ url("/settings/users/{$user->id}/delete") }}" class="button outline">{{ trans('settings.users_delete') }}</a>
                     @endif
-                    <button class="button primary" type="submit">{{ trans('common.save') }}</button>
+                    <button class="button" type="submit">{{ trans('common.save') }}</button>
                 </div>
             </form>
         </div>