diff --git a/branding/assets/fonts/Overpass-VariableFont_wght.ttf b/branding/assets/fonts/Overpass-VariableFont_wght.ttf
new file mode 100644
index 000000000..1cf730a5a
Binary files /dev/null and b/branding/assets/fonts/Overpass-VariableFont_wght.ttf differ
diff --git a/branding/assets/styles/imports/_branding.scss b/branding/assets/styles/imports/_branding.scss
index 55fbcb81e..e4acf1873 100644
--- a/branding/assets/styles/imports/_branding.scss
+++ b/branding/assets/styles/imports/_branding.scss
@@ -3,20 +3,36 @@
     * Here, all SCSS variables and classes can be adapted to your custom design. 
     *
 */
+ 
+@font-face {
+    font-family: Overpass;
+    src: url('~@/assets/fonts/Overpass-VariableFont_wght.ttf');
+}
 
 $color-primary: #6e8b87;
-$color-primary-light: #a6ff00;
+$color-primary-yunite: #a6ff00;
+$color-primary-light: #fff;
+$color-primary-active: hsla(0,0%,100%,.8);
+
+$font-family-heading: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
+$font-family-text: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
 
 $color-header-background: $color-primary;
-$color-footer-background: $color-primary-light;
+$color-footer-background: $color-primary-yunite;
 
-$color-locale-menu: $color-primary-light;
+$color-locale-menu: $color-primary-yunite;
 
 .main-navigation a {
     color: $color-primary-light;
+    text-transform: uppercase;
+    font-size: 16px;
+    font-weight: 500;
 }
 .main-navigation a:hover {
-    color: $color-neutral-100;
+    color: $color-primary-active;
+}
+.main-navigation .router-link-exact-active { 
+    color:  #A6FF00!important;
 }
 
 .main-navigation .locale-menu {
@@ -30,3 +46,25 @@ $color-locale-menu: $color-primary-light;
 #nav-search-box .hc-hashtag a{
     color: #17b53f;
 }
+
+#footer {
+ background-color: $color-primary-yunite;
+}
+
+#footer a {
+    color: $color-primary;
+}
+
+.branding-menu .ds-text {
+    font-family: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 16px;
+}
+
+.ds-footer {
+    font-family: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
+    text-transform: uppercase;
+    font-size: 16px;
+    font-weight: 500;
+  }