diff --git a/src/app.less b/src/app.less
index e84264f..115bd05 100644
--- a/src/app.less
+++ b/src/app.less
@@ -61,9 +61,9 @@ html,body {
   position: relative;
   font-family: @font_family;
   font-size: @font_size;
-  line-height: @line_height;
+  line-height: @line_height_base;
   color: @text_color;
-  background: #f5f3f4;
+  background: @gray_light;
 }
 .clear {clear:both;}
 .section_padding {padding:100px 0px;}
@@ -71,15 +71,16 @@ html,body {
 /*--------------------------------------------------------------
 # Typo
 --------------------------------------------------------------*/
-p {margin-bottom:20px; color:#000;}
-h1 {display: block; font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:left; color:#333;}
-h2 {display: block; font-size: 45px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:center;}
-h3 {display: block; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing:2px;}
-h4 {display: block; font-size: 15px; font-weight: 600; line-height: 1.2;}
-h5 {display: block; font-size: 18px; font-weight: 600; line-height: 1.2; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
+p {margin-bottom:20px; color: @text_color;}
+h1, h2, h3, h4, h5{display: block; line-height: @line_height_heading;}
+h1 {font-size: 25px; font-weight: 600; margin-bottom:10px; text-align:left; color: #333;}
+h2 {font-size: 45px; font-weight: 600; margin-bottom:10px; text-align:center;}
+h3 {font-size: 20px; font-weight: 300; letter-spacing:2px;}
+h4 {font-size: 15px; font-weight: 600;}
+h5 {font-size: 18px; font-weight: 600; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
 strong {font-weight:700;}
-mark {color:#ac1526;}
-a {text-decoration:none; color:#ac1526;}
+mark {color: @cms_brand_secondary;}
+a {text-decoration:none; color: @cms_brand_secondary;}
 a:hover {color:#901624;}
 
 
@@ -88,7 +89,7 @@ a:hover {color:#901624;}
 --------------------------------------------------------------*/
 .input_holder {margin-bottom:20px; display:block;}
 .input_header {margin-bottom:10px;}
-.input_description {font-size:13px; color:#666;}
+.input_description {font-size:13px; color: @text_color;}
 input, textarea, select {
   font-family: @font_family;
 	width: 100%;
@@ -103,7 +104,7 @@ input, textarea, select {
 	transition: all 0.3s;
 }
 textarea {padding:10px; height:auto;}
-input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
+input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
 label {font-weight:600; color: @text_color;}
 
 input[type="checkbox"] {
@@ -148,15 +149,15 @@ input[type="checkbox"] {
     -webkit-transition: background 0.25s linear;
 }
 input[type=checkbox]:checked ~ .check_checkbox {
-  border: 1px solid #28b78d;
+  border: 1px solid @cms_brand_primary;
 }
 
 input[type=checkbox]:checked ~ .check_checkbox:before{
-  background: #28b78d!important;
+  background: @cms_brand_primary!important;
 }
 button{
   height: 40px;
-  background: @cms_brand_secondary;
+  background: @gray_dark;
   border: none;
   color: #FFF;
   cursor: pointer;
@@ -167,7 +168,7 @@ button{
   border-radius: 20px;
 }
 .cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
-.checkbox_holder:hover .check_checkbox {border: 1px solid #28b78d;}
+.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
 
 /*--------------------------------------------------------------
 # CMS CONTENT FORM
@@ -206,16 +207,16 @@ button{
 /*--------------------------------------------------------------
 # CMS ADD BUTTON
 --------------------------------------------------------------*/
-.button {
-  display:inline-block;
-  height:30px;
-  line-height:30px;
-  padding:0px 20px 0px 40px;
-  border-radius:20px;
-  color:#FFF;
-  font-weight:600;
-  font-size:14px;
-  transition:background 0.3s;
+/*.button {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  padding: 0px 20px 0px 40px;
+  border-radius: 20px;
+  color: #FFF;
+  font-weight: 600;
+  font-size: 14px;
+  transition: background 0.3s;
 }
 .button i {font-size:16px; line-height:28px; position:absolute; left:20px;}
 .button:hover {color:#FFF;}
@@ -224,7 +225,7 @@ button{
   position:absolute;
   top:0px;
   right:0px;
-  background:#28b78d;
+  background:@cms_brand_primary;
 }
 .cms_add_button:hover {background:#189671;}
 .button_action {
@@ -233,38 +234,32 @@ button{
   font-size:13px;
   position:relative;
   margin-left:20px;
-  background:#152129;
+  background: @gray_dark;
   padding:0px 10px 0px 30px;
 }
 .button_action i {line-height:25px; left:10px;}
-.button_action:hover {background:#1f3441;}
+.button_action:hover {background:#1f3441;}*/
 
 
 /*--------------------------------------------------------------
 # BACK BUTTON
 --------------------------------------------------------------*/
 .back_button {display:block; float:left; height:30px; width:25px; background:#1f3441; text-align:center; line-height:30px; color:#FFF; font-size:20px; margin-right:10px;}
-.back_button:hover {background:#28b78d; color:#FFF;}
-
-/*--------------------------------------------------------------
-# Content Tables
---------------------------------------------------------------*/
-.content_table_headline {margin-bottom:10px;}
+.back_button:hover {background:@cms_brand_primary; color:#FFF;}
 
 
 /*--------------------------------------------------------------
 # Table Footer
 --------------------------------------------------------------*/
-.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color:#666; margin-bottom:20px;}
+.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color: @text_color; margin-bottom:20px;}
 .cms_paging {float:right; margin-left:10px; display:block; /*border:solid 1px #CCC;*/ background:#FFF;}
 .cms_paging ul {list-style-type:none;}
 .cms_paging ul li {float:left; margin-right:2px;}
 .cms_paging ul li:last-child {margin-right:0px;}
 .cms_paging ul li a {transition:all 0.3s; color:#FFF; text-align:center; display:block; height:25px; width:25px; line-height:25px; background:#CCC;}
 .cms_paging ul li i {}
-.cms_paging ul li.active a {background:#28b78d; color:#FFF;}
-.cms_paging ul li a:hover {background:#28b78d; color:#FFF;}
-
+.cms_paging ul li.active a {background:@cms_brand_primary; color:#FFF;}
+.cms_paging ul li a:hover {background:@cms_brand_primary; color:#FFF;}
 
 /*--------------------------------------------------------------
 # Breakpoints
diff --git a/src/components/my-form.vue b/src/components/my-form.vue
index f9c530a..44c5aa5 100644
--- a/src/components/my-form.vue
+++ b/src/components/my-form.vue
@@ -14,7 +14,7 @@
             </my-input>
         </div>
         <div>
-            <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
+            <button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
         </div>
     </form>
 </template>
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index 11230eb..38d358d 100644
--- a/src/components/my-table.vue
+++ b/src/components/my-table.vue
@@ -143,7 +143,7 @@ export default {
 
             background: white;
             &:nth-child(even) {
-                background: #f5f3f4;
+                background: @gray_light;
             }
         }
 
@@ -180,7 +180,7 @@ export default {
 
                 background: white;
                 &:nth-child(even) {
-                    background: #f5f3f4;
+                    background: @gray_light;
                 }
             }
 
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 7c7a413..655ef5b 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -28,7 +28,7 @@
         left: 0px;
         top: 40px;
         bottom: 0px;
-        background: @cms_bg_light;
+        background: @ui_bg;
         color: white;
         width: 70px;
         transition: all 0.3s;
@@ -64,7 +64,7 @@
                         }
                     }
 
-                    &.active {background:#28b78d;}
+                    &.active {background: @cms_brand_primary;}
                     // &.active .fa {background:#19435e;}
 
                     /*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
@@ -103,7 +103,7 @@
             position: absolute;
             left: 100%;
             top: 0px;
-            background: #152129;
+            background: @gray_dark;
             width: 180px;
             height: auto;
             transition: all 0.3s;
@@ -126,7 +126,7 @@
                 position: absolute;
                 pointer-events: none;
                 border-color: rgba(255, 255, 255, 0);
-                border-right-color: #f5f3f4;
+                border-right-color: @gray_light;
                 border-width: 10px;
                 margin-top: -10px;
             }
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index e2b63cf..43fb4c2 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -40,7 +40,7 @@ export default {
 <style lang="less">
     @import "../mixins.less";
 
-    @barHeight: 40px;
+    @bar_height: 40px;
 
     /*--------------------------------------------------------------
     # Topbar (Sitename)
@@ -51,15 +51,15 @@ export default {
         top: 0;
         right: 0;
         left: 0px;
-        background: @cms_bg_light;
+        background: @ui_bg;
         color: white;
-        height: @barHeight;
+        height: @bar_height;
         z-index: 1500;
 
         &>.logo {
             display: block;
             width: 70px;
-            height:  @barHeight;
+            height:  @bar_height;
             float: left;
             position: relative;
 
@@ -85,7 +85,7 @@ export default {
         &>.name {
             float: left;
             width: auto;
-            line-height: @barHeight;
+            line-height: @bar_height;
             padding-left: 15px;
         }
 
@@ -96,7 +96,7 @@ export default {
         //     height: 100%;
         //     font-size: 22px;
         //     margin-left: 40px;
-        //     height: @barHeight;
+        //     height: @bar_height;
         //     width: 40px;
         //     padding-top: 4px;
         //     cursor: pointer;
@@ -140,7 +140,7 @@ export default {
             }
 
             .image {
-                max-height: @barHeight - 8px;
+                max-height: @bar_height - 8px;
                 img{
                     width:70%; margin:0 auto; display:block;
                 }
diff --git a/src/variables.less b/src/variables.less
index 8dd6e3f..6b726d8 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -4,18 +4,21 @@
 @screen-lg: 1200px;
 
 @font_family: "Open Sans", sans-serif;
-@text_color: #666;
+@text_color: #333;
 @font_size: 14px;
-@line_height: 1.4;
+
+@line_height_base: 1.4;
+@line_height_heading: 1.2;
+
 
 @gray_dark: #152129;
+@gray_light: #f5f3f4;
 
-@cms_bg_lighter: #e0e0e0;
-@cms_bg_light: #1a2e3b;
 
 @cms_brand_primary: #28b78d;
-@cms_brand_secondary: #152129;
+@cms_brand_secondary: #ac1526;
 
+@ui_bg: #1a2e3b;
 
 /*****************************************/