diff --git a/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss b/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss
index 9e1e44a7..77129ea8 100644
--- a/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss
+++ b/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss
@@ -1,3 +1,5 @@
+@import '../../../common/mixins';
+
 $accent-color: #49baeb;
 $light-grey: #bebebe;
 
@@ -77,10 +79,10 @@ $light-grey: #bebebe;
       content: "\f06a";
       font-family: FontAwesome;
       display: inline-block;
-      margin-left: -2em;
+      @include margin-left(-2em);
       margin-top: 0.5em;
       position: fixed;
-      text-align: right;
+      @include text-align(right);
     }
   }
 
diff --git a/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss b/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss
index ed9da4e4..cbec6c31 100644
--- a/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss
+++ b/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss
@@ -1,5 +1,4 @@
 .admin-buq {
-
     .admin-buq-row {
         display: flex;
         flex-direction: row;
@@ -9,7 +8,7 @@
         margin-right: 0px;
     }
 
-      .admin-buq-main {
+    .admin-buq-main {
         overflow: auto;
         display: flex;
         flex-direction: column;
@@ -27,9 +26,9 @@
         padding: 1em 2em;
 
         .breadcrumb {
-          padding-left: 0;
-          padding-top: 0;
-          font-size: 14px;
+            @include padding-left(0);
+            padding-top: 0;
+            font-size: 14px;
         }
     }
 
@@ -40,23 +39,23 @@
     }
 
     .admin-buq-navigation {
-        border-bottom: #D9D9D9 1px solid;
+        border-bottom: #d9d9d9 1px solid;
         margin-bottom: 1em;
         list-style: none;
         display: flex;
-        padding-left: 0;
+        @include padding-left(0);
 
         .admin-buq-link {
-            background-color: #E4E4E4;
+            background-color: #e4e4e4;
             padding: 10px 15px;
             border-radius: 4px 4px 0 0;
-            margin-right: 2px;
+            @include margin-right(2px);
             cursor: pointer;
         }
 
         .admin-buq-link.active {
-            background-color: #FFFFFF;
-            border: #D9D9D9 1px solid;
+            background-color: #ffffff;
+            border: #d9d9d9 1px solid;
             border-bottom: none;
             color: $link-color;
         }
@@ -84,8 +83,8 @@
     }
 
     .admin-buq-table-add-button {
-        margin-right: 5px;
-        margin-left: auto;
+        @include margin-right(5px);
+        @include margin-left(auto);
     }
 }
 
diff --git a/src/admin-buq/components/Modal/_modal.scss b/src/admin-buq/components/Modal/_modal.scss
index 29f3d09c..a44f994e 100644
--- a/src/admin-buq/components/Modal/_modal.scss
+++ b/src/admin-buq/components/Modal/_modal.scss
@@ -1,28 +1,28 @@
 .modal {
     position: fixed;
     top: 0;
-    left: 0;
+    @include left(0);
     width:100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
   }
-    
+
   .modal-main {
     position:fixed;
     background: white;
     height: auto;
     top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
+    @include left(50%);
+    //TODO: apply here a mixin once the ui-components is merged translate-xy(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: 600px;
     margin: 30px auto;
   }
-    
+
   .display-block {
     display: block;
   }
-    
+
   .display-none {
     display: none;
   }
-  
\ No newline at end of file
diff --git a/src/admin-data-import/_admin-data-import.scss b/src/admin-data-import/_admin-data-import.scss
index 67671631..63b4bfdb 100644
--- a/src/admin-data-import/_admin-data-import.scss
+++ b/src/admin-data-import/_admin-data-import.scss
@@ -69,10 +69,7 @@ input::file-selector-button {
   display: block;
   padding: 8px 16px;
   border-radius: 4px;
-  border-top: #e4e4e4 1px solid;
-  border-right: #e4e4e4 1px solid;
-  border-left: #e4e4e4 1px solid;
-  border-bottom: #e4e4e4 1px solid;
+  border: #e4e4e4 1px solid;
   color: #333333;
   text-shadow: 0 0 0.1em #ffffff;
   background: #e4e4e4 linear-gradient(to bottom, #fefefe, #f1f1f1 10%, #e4e4e4);
diff --git a/src/admin-role-form/_type-form.scss b/src/admin-role-form/_type-form.scss
index cda602f8..fce0f7e4 100644
--- a/src/admin-role-form/_type-form.scss
+++ b/src/admin-role-form/_type-form.scss
@@ -14,7 +14,7 @@ dl.type-form {
 
     dd {
         flex: 1 1 calc(100% - 200px - 1em);
-        margin-left: 1em;
+        @include margin-left(1em);
     }
 
     & > dt:not(:first-of-type),
diff --git a/src/admin-user-form/_user-password-modal.scss b/src/admin-user-form/_user-password-modal.scss
index ca4b4821..5fe7e713 100644
--- a/src/admin-user-form/_user-password-modal.scss
+++ b/src/admin-user-form/_user-password-modal.scss
@@ -2,7 +2,7 @@
 
     //Hack to bypass classes set by the ngModel validation
     input[type=password].number {
-        text-align: left;
+        @include text-align(left);
     }
 
 }
diff --git a/src/buq/_buq.scss b/src/buq/_buq.scss
index e0549e4d..563ce420 100644
--- a/src/buq/_buq.scss
+++ b/src/buq/_buq.scss
@@ -10,7 +10,7 @@
     padding: 1em 2em;
 
     .breadcrumb {
-      padding-left: 0;
+      @include padding-left(0);
       font-size: 14px;
     }
   }
@@ -42,7 +42,7 @@
     .suggestions-results {
       z-index: 1;
       position: absolute;
-      left: 0;
+      @include left(0);
       max-height: 7em;
     }
   }
@@ -66,13 +66,13 @@
   white-space: break-spaces;
   transform: translate(-30%, 115%);
   bottom: 0;
-  padding: 8px 15px 8px 8px;
+  @include padding(8px, 15px, 8px, 8px);
   height: fit-content;
   width: 200px;
 
   &:before {
     top: -25%;
-    left: 28%;
+    @include left(28%);
     border-width: 8px;
     border-color: transparent transparent #fff transparent;
   }
diff --git a/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss b/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss
index 45752717..58a251e7 100644
--- a/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss
+++ b/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss
@@ -14,7 +14,7 @@
     margin-top: 16px;
 
     th {
-      padding-right: 48px;
+      @include padding-right(48px);
     }
 
     .proceed {
diff --git a/src/buq/components/prepareBuq/_prepare-buq-page.scss b/src/buq/components/prepareBuq/_prepare-buq-page.scss
index d9f54f76..f9e3b701 100644
--- a/src/buq/components/prepareBuq/_prepare-buq-page.scss
+++ b/src/buq/components/prepareBuq/_prepare-buq-page.scss
@@ -28,10 +28,10 @@
         &.is-required:after {
             color: $brand-danger;
             content: '*';
-            margin-left: 0.25em;
+            @include margin-left(0.25em);
         }
     }
-    
+
     .prepare-buq-button {
         width: 100%;
         display: flex;
@@ -56,19 +56,19 @@
         border: 0;
         background: #ffffff;
         padding: 1em 2em;
-    
+
         .breadcrumb {
           padding-top: 1.5em;
-          padding-left: 0;
+          @include padding-left(0);
           font-size: 14px;
         }
     }
-    
+
     .prepare-buq-page-title {
         border-bottom: #bebebe 1px solid;
         padding: 3.2px 0em;
     }
-    
+
     .prepare-buq-table-actions {
         display: flex;
         justify-content: center;
@@ -107,7 +107,7 @@
 
         .comments-input-title {
             margin-bottom: 3px;
-            margin-left: 5px;
+            @include margin-left(5px);
         }
     }
 
@@ -135,7 +135,7 @@
         .react-table{
             th{
                 white-space: nowrap;
-                padding-right: 8px;
+                @include padding-right(8px);
             }
         }
     }
@@ -219,10 +219,10 @@
         &.is-required:after {
             color: $brand-danger;
             content: '*';
-            margin-left: 0.25em;
+            @include margin-left(0.25em);
         }
     }
-    
+
     .approve-buq-button {
         width: 100%;
         display: flex;
diff --git a/src/openlmis-header/_header.scss b/src/openlmis-header/_header.scss
index 821c5007..c9379210 100644
--- a/src/openlmis-header/_header.scss
+++ b/src/openlmis-header/_header.scss
@@ -1,174 +1,180 @@
 $font-size-openlmis-header-title: $font-size-extra-large !default;
 
 body > header {
-    border: 0px;
-    padding: 0px;
-    > * {
-        width: 100%;
-        margin: 0px;
-    }
+  border: 0px;
+  padding: 0px;
+  > * {
+    width: 100%;
+    margin: 0px;
+  }
 }
 
 .openlmis-header {
+  align-items: flex-end;
+  background: linear-gradient(
+    to top,
+    $light-gray 0%,
+    lighten($light-gray, 40%) 80%,
+    $white 100%
+  );
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 1em 2em;
+  z-index: 1; // to be above navbar
+  @media screen and (max-width: $res-xs) {
+    padding: 1em 0.5em;
+  }
+  > * {
+    flex: 0 0 auto;
     align-items: flex-end;
-    background: linear-gradient(to top, $light-gray 0%, lighten($light-gray, 40%) 80%, $white 100%);
-    display: flex;
-    flex-wrap: nowrap;
-    padding: 1em 2em;
-    z-index: 1; // to be above navbar
-    @media screen and (max-width: $res-xs) {
-        padding: 1em 0.5em;
-    }
-    > * {
-        flex: 0 0 auto;
-        align-items: flex-end;
-    }
+  }
 
-    > .title {
-        display: block;
-        text-indent: -30000em;
-        overflow: hidden;
-        background-image: url('../assets/common/openlmis-logo.svg');
-        background-repeat: no-repeat;
-        background-size: auto $font-size-openlmis-header-title;
-        flex-grow: 1;
-        font-size: $font-size-openlmis-header-title;
-        height: $font-size-openlmis-header-title;
-        @media screen and (max-width: $res-sm) {
-            background-size: auto 24px;
-        }
-        @media screen and (max-width: $res-xs) {
-            background-size: auto 20px;
-        }
+  > .title {
+    display: block;
+    text-indent: -30000em;
+    overflow: hidden;
+    background-image: url('../assets/common/openlmis-logo.svg');
+    background-repeat: no-repeat;
+    background-size: auto $font-size-openlmis-header-title;
+    @include background-position(left);
+    flex-grow: 1;
+    font-size: $font-size-openlmis-header-title;
+    height: $font-size-openlmis-header-title;
+    @media screen and (max-width: $res-sm) {
+      background-size: auto 24px;
     }
+    @media screen and (max-width: $res-xs) {
+      background-size: auto 20px;
+    }
+  }
 }
 
 .openlmis-header.is-offline {
-    background: transparent;
-    color: $light-gray;
-    > .title {
-        background-image: url('../assets/common/openlmis-logo-white.svg');
-    }
+  background: transparent;
+  color: $light-gray;
+  > .title {
+    background-image: url('../assets/common/openlmis-logo-white.svg');
+  }
 }
 
 .openlmis-header-actions {
+  > * {
+    display: flex;
+    justify-content: flex-end;
     > * {
-        display: flex;
-        justify-content: flex-end;
-        > * {
-            flex: 0 0 auto;
-            margin: 0px;
-            margin-right: 1em;
-            &:last-child{
-                margin-right: 0em;
-            }
-        }
+      flex: 0 0 auto;
+      margin: 0px;
+      @include margin-right(1em);
+      &:last-child {
+        @include margin-right(0em);
+      }
     }
+  }
 
-    a {
-        @media screen and (max-width: $res-sm) {
-            margin-right: 0em;
-        }
+  a {
+    @media screen and (max-width: $res-sm) {
+      @include margin-right(0em);
     }
+  }
 }
 
 .status-offline {
-    @extend a.is-offline;
-    margin-right: 0;
-    span {
-        @media screen and (max-width: $res-sm) {
-            display: none;
-        }
+  @extend a.is-offline;
+  @include margin-right(0em);
+  span {
+    @media screen and (max-width: $res-sm) {
+      display: none;
     }
+  }
 }
 
 .openlmis-header-info {
-    display: flex;
-    flex-direction: row;
-    > * {
-        flex: 0 0 auto;
-    }
-    .openlmis-app-cache{
-        @media screen and (max-width: $res-sm) {
-            display: none;
-        }
-    }
+  display: flex;
+  flex-direction: row;
+  > * {
+    flex: 0 0 auto;
+  }
+  .openlmis-app-cache {
+    @media screen and (max-width: $res-sm) {
+      display: none;
+    }
+  }
 }
 
 .navbar {
-    width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 
-    .navbar-right {
-        float: right !important;
+  @media screen and (max-width: $res-xs) {
+    @include padding-x(1%);
+  }
 
-        @media screen and (max-width: $res-md) {
-            margin-left: auto !important;
-        }
-    }
+  @media screen and (max-width: $res-md) {
+    flex-direction: column;
+  }
 
-    .nav.navbar-nav {
-        flex-direction: row;
-    }
- 
-}
+  .nav.navbar-nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
 
-header > .navbar {
-    @media screen and (max-width: $res-xs) {
-        padding: 0% 1% !important;
+    @media screen and (max-width: $res-md) {
+      flex-direction: column;
     }
-    @media screen and (max-width: $res-xs) {
-        padding: 0% 1% !important;
-    }
-    
-}
+  }
 
-header > .navbar.display-in-browser {
-    display: block;
-    @media screen and (max-width: ($res-md)) {
-        display: none;
-    }
+  .navbar-right-group {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    @include margin-left(auto);
+  }
 }
 
-header > .navbar.display-in-browser {
-    display: block;
-    @media screen and (max-width: ($res-md)) {
-        display: none !important;
-    }
+header > .navbar {
+  @media screen and (max-width: $res-md) {
+    display: none;
+  }
 }
 
 header > .navbar.display-in-mobile {
-    display: none;
-    @media screen and (max-width: ($res-md)) {
-        display: flex;
-    }
-}
+  display: none;
 
-.navbar {
-    margin: 0em;
+  @media screen and (max-width: $res-md) {
+    display: flex;
+  }
 }
 
 .navbar-header {
-    display: flex;
-    padding: 10px 0px;
+  display: flex;
+  width: 100%;
+  padding: 10px 0px;
 
-    .locale-container {
-        @media screen and (max-width: $res-md) {
-            margin: 10px;
-            margin-bottom: 7.5px;
-        }
+  .locale-container {
+    @media screen and (max-width: $res-md) {
+      margin: 10px;
+      margin-bottom: 7.5px;
     }
+  }
 
-    .openlmis-button-group {
-        display: flex;
-        margin-left: auto;
-    }
+  .openlmis-button-group {
+    display: flex;
+    @include margin-left(auto);
+  }
 
-    .navbar-toggler {
-        padding: 0px 20px;
-    }
+  .navbar-toggler {
+    padding: 0px 20px;
+  }
 }
 
 header > .navbar .navbar-nav > li > a {
-    color: $white;
-    font-weight: bold;
+  color: $white;
+  font-weight: bold;
+
+  @media screen and (max-width: $res-md) {
+    color: $black;
+  }
 }
diff --git a/src/openlmis-home/_home.scss b/src/openlmis-home/_home.scss
index 6a3ffdd4..e96ba440 100644
--- a/src/openlmis-home/_home.scss
+++ b/src/openlmis-home/_home.scss
@@ -13,7 +13,7 @@ $image-height: 136px;
     height: $image-height;
     position: absolute;
     bottom: 0.5em;
-    left: 0em;
+    @include left(0em);
     background: url('../assets/openlmis-home/home-background.png') no-repeat right bottom;
     @media screen and (max-width: $res-sm) {
       height: 100%;
@@ -40,7 +40,7 @@ $image-height: 136px;
 
 .scroll {
   width: 100%;
-  float:left;
+  @include float(left);
   overflow-y: auto;
   max-height: 60vh;
   padding-bottom: 1em;