diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 32073e3d9..ec41a98f3 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -33,6 +33,8 @@
 // Views
 @import 'views/filter-dropdown';
 
+// fonts
+@import 'pages/fonts';
 
 .App {
   min-width: 960px;
@@ -40,11 +42,11 @@
 
 // =======
 
-body.hide-scrollbar .Pane2{
+body.hide-scrollbar .Pane2 {
   overflow: hidden;
 }
 
-.bp3-fill{
+.bp3-fill {
   .bp3-popover-wrapper,
   .bp3-popover-target {
     display: block;
@@ -82,25 +84,22 @@ body.hide-scrollbar .Pane2{
   max-width: 300px;
 }
 
-.bp3-timezone-picker{
-
-  .bp3-button{
-
-    [icon="caret-down"] {
+.bp3-timezone-picker {
+  .bp3-button {
+    [icon='caret-down'] {
       display: none;
     }
   }
 }
 
-.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
+.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
   background-color: #0066ff;
 }
 
-.bp3-overlay-backdrop{
-  background-color: rgba(0,10,30, .7);
+.bp3-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.7);
 }
 
-
 .ReactVirtualized__Collection {
 }
 
@@ -176,4 +175,4 @@ body.hide-scrollbar .Pane2{
 /* List default theme */
 
 .ReactVirtualized__List {
-}
\ No newline at end of file
+}
diff --git a/client/src/style/fonts/NotoSans-Black.woff b/client/src/style/fonts/NotoSans-Black.woff
new file mode 100644
index 000000000..047276c5f
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Black.woff differ
diff --git a/client/src/style/fonts/NotoSans-Bold.woff b/client/src/style/fonts/NotoSans-Bold.woff
new file mode 100644
index 000000000..0b99655ce
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Bold.woff differ
diff --git a/client/src/style/fonts/NotoSans-ExtraBold.woff b/client/src/style/fonts/NotoSans-ExtraBold.woff
new file mode 100644
index 000000000..c1530df23
Binary files /dev/null and b/client/src/style/fonts/NotoSans-ExtraBold.woff differ
diff --git a/client/src/style/fonts/NotoSans-ExtraLight.woff b/client/src/style/fonts/NotoSans-ExtraLight.woff
new file mode 100644
index 000000000..07044d2d5
Binary files /dev/null and b/client/src/style/fonts/NotoSans-ExtraLight.woff differ
diff --git a/client/src/style/fonts/NotoSans-Italic.woff b/client/src/style/fonts/NotoSans-Italic.woff
new file mode 100644
index 000000000..eb339e6e5
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Italic.woff differ
diff --git a/client/src/style/fonts/NotoSans-Light.woff b/client/src/style/fonts/NotoSans-Light.woff
new file mode 100644
index 000000000..595d1672e
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Light.woff differ
diff --git a/client/src/style/fonts/NotoSans-Medium.woff b/client/src/style/fonts/NotoSans-Medium.woff
new file mode 100644
index 000000000..302c6ef2d
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Medium.woff differ
diff --git a/client/src/style/fonts/NotoSans-Regular.woff b/client/src/style/fonts/NotoSans-Regular.woff
new file mode 100644
index 000000000..96286dffb
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Regular.woff differ
diff --git a/client/src/style/fonts/NotoSans-SemiBold.woff b/client/src/style/fonts/NotoSans-SemiBold.woff
new file mode 100644
index 000000000..251802311
Binary files /dev/null and b/client/src/style/fonts/NotoSans-SemiBold.woff differ
diff --git a/client/src/style/fonts/NotoSans-Thin.woff b/client/src/style/fonts/NotoSans-Thin.woff
new file mode 100644
index 000000000..3aaada6e4
Binary files /dev/null and b/client/src/style/fonts/NotoSans-Thin.woff differ
diff --git a/client/src/style/pages/fonts.scss b/client/src/style/pages/fonts.scss
new file mode 100644
index 000000000..9b68ec990
--- /dev/null
+++ b/client/src/style/pages/fonts.scss
@@ -0,0 +1,80 @@
+// Regular 1
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Regular.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}
+
+//Bold 2
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Black.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 700;
+}
+
+// Extra Bold 3
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-ExtraBold.woff') format('woff');
+  font-style: normal;
+  font-weight: 900;
+  display: swap;
+}
+
+// Medium 4
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Medium.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 500;
+}
+
+// Light 5
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Light.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 300;
+}
+
+// Thin 6
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Thin.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 100;
+}
+
+// Italic 7
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Italic.woff') format('woff');
+  font-style: italic;
+  display: swap;
+  font-weight: 400;
+}
+
+// Extra Light 8
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-ExtraLight.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}
+
+// SemiBold 9
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-SemiBold.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}
diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss
index d9638acb9..a60557f6b 100644
--- a/client/src/style/variables.scss
+++ b/client/src/style/variables.scss
@@ -3,7 +3,7 @@
 $ns: bp3;
 
 $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
-0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
+  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
 
 $blue1: #0069ff;
 $blue2: #0052ff;
@@ -24,9 +24,9 @@ $button-box-shadow-active: 0 0 0 !default;
 $button-intent-box-shadow: 0 0 0 !default;
 $button-intent-box-shadow-active: 0 0 0 !default;
 
-$button-background-color-disabled: #E9ECEF !default;
-$button-background-color: #E6EFFB !default;
-$button-background-color-hover: #CFDCEE !default;
+$button-background-color-disabled: #e9ecef !default;
+$button-background-color: #e6effb !default;
+$button-background-color-hover: #cfdcee !default;
 
 $sidebar-background: #01115e;
 $sidebar-text-color: #fff;