diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index 4db998daf..e330c8503 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -62,7 +62,7 @@ $black: #000000;
 $white: #fff;
 $body-background: $white;
 $body-font-color: $color-body;
-$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+$body-font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
   Roboto, "Helvetica Neue", Arial, sans-serif;
 $body-antialiased: true;
 $global-margin: $space-one;
@@ -269,8 +269,8 @@ $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $black;
-$button-color-alt: $black;
+$button-color: $white;
+$button-color-alt: $white;
 $button-radius: $global-radius;
 $button-sizes: (
   tiny: $font-size-micro,
diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
index 95e75b2cc..94bba8a88 100644
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -51,7 +51,6 @@ $color-background-light: #F9FAFC;
 $color-white: #FFF;
 $color-body: #3C4858;
 $color-heading: #1F2D3D;
-$color-modal-header: #f1f1f1;
 $color-extra-light-blue: #F5F7F9;
 
 // Thumbnail
diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss
index a42136c6e..3a6f62972 100644
--- a/app/javascript/dashboard/assets/scss/app.scss
+++ b/app/javascript/dashboard/assets/scss/app.scss
@@ -1,3 +1,5 @@
+@import 'shared/assets/fonts/inter';
+
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index e0205c3c0..c026fcc73 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -17,6 +17,7 @@
   overflow: scroll;
   position: relative;
   background-color: $color-white;
+  border-radius: $space-small;
 
   .modal--close {
     font-size: $font-size-large;
@@ -28,9 +29,7 @@
   }
 
   .page-top-bar {
-    background: $color-modal-header;
-    text-align: center;
-    @include padding($space-large $space-medium);
+    @include padding($space-large $space-larger 0);
     img {
       max-height: 6rem;
     }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 96c88e524..36107d13a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -6,12 +6,12 @@
       <span>{{ headerTitle }}</span>
     </h1>
     <router-link
-      :to="buttonRoute"
-      class="button icon success"
       v-if="showNewButton && showButton && currentRole"
+      :to="buttonRoute"
+      class="button icon success nice"
     >
       <i class="icon ion-android-add-circle"></i>
-      {{buttonText}}
+      {{ buttonText }}
     </router-link>
   </div>
 </template>
@@ -20,6 +20,9 @@ import BackButton from '../../../components/widgets/BackButton';
 import Auth from '../../../api/auth';
 
 export default {
+  components: {
+    BackButton,
+  },
   props: {
     headerTitle: String,
     buttonRoute: String,
@@ -43,8 +46,5 @@ export default {
       return role === 'administrator';
     },
   },
-  components: {
-    BackButton,
-  },
 };
 </script>
diff --git a/app/javascript/shared/assets/fonts/Inter-Bold.woff b/app/javascript/shared/assets/fonts/Inter-Bold.woff
new file mode 100644
index 000000000..d196122f6
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Bold.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Bold.woff2 b/app/javascript/shared/assets/fonts/Inter-Bold.woff2
new file mode 100644
index 000000000..6df3dbb59
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Bold.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Italic.woff b/app/javascript/shared/assets/fonts/Inter-Italic.woff
new file mode 100644
index 000000000..6d7242f9a
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Italic.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Italic.woff2 b/app/javascript/shared/assets/fonts/Inter-Italic.woff2
new file mode 100644
index 000000000..d8fc3e300
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Italic.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff b/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff
new file mode 100644
index 000000000..b8f1a1f5d
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff2 b/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff2
new file mode 100644
index 000000000..97e99c784
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Light-BETA.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Medium.woff b/app/javascript/shared/assets/fonts/Inter-Medium.woff
new file mode 100644
index 000000000..c16b02fc4
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Medium.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Medium.woff2 b/app/javascript/shared/assets/fonts/Inter-Medium.woff2
new file mode 100644
index 000000000..7939bd148
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Medium.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Regular.woff b/app/javascript/shared/assets/fonts/Inter-Regular.woff
new file mode 100644
index 000000000..e267a73f1
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Regular.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Regular.woff2 b/app/javascript/shared/assets/fonts/Inter-Regular.woff2
new file mode 100644
index 000000000..25b72283d
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Regular.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-SemiBold.woff b/app/javascript/shared/assets/fonts/Inter-SemiBold.woff
new file mode 100644
index 000000000..7147ba1ee
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-SemiBold.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-SemiBold.woff2 b/app/javascript/shared/assets/fonts/Inter-SemiBold.woff2
new file mode 100644
index 000000000..df70c25a6
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-SemiBold.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff b/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff
new file mode 100644
index 000000000..3121b7e7e
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff differ
diff --git a/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff2 b/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff2
new file mode 100644
index 000000000..832328f07
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter-Thin-BETA.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/inter.scss b/app/javascript/shared/assets/fonts/inter.scss
new file mode 100644
index 000000000..c0bc8a765
--- /dev/null
+++ b/app/javascript/shared/assets/fonts/inter.scss
@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Thin-BETA.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Thin-BETA.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Light-BETA.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Light-BETA.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Regular.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Regular.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Italic.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Italic.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Medium.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Medium.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-SemiBold.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-SemiBold.woff?v=3.11') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~shared/assets/fonts/Inter-Bold.woff2?v=3.11') format('woff2'),
+       url('~shared/assets/fonts/Inter-Bold.woff?v=3.11') format('woff');
+}
diff --git a/app/javascript/widget/assets/scss/_forms.scss b/app/javascript/widget/assets/scss/_forms.scss
index 95c6d0f61..107f9333e 100755
--- a/app/javascript/widget/assets/scss/_forms.scss
+++ b/app/javascript/widget/assets/scss/_forms.scss
@@ -13,6 +13,7 @@ $input-height: $space-two * 2;
   box-sizing: border-box;
   color: $color-body;
   display: block;
+  font-family: $font-family;
   font-size: $font-size-default;
   height: $input-height;
   line-height: 1.3;
diff --git a/app/javascript/widget/assets/scss/_reset.scss b/app/javascript/widget/assets/scss/_reset.scss
index 6768b1315..34c5f8b00 100755
--- a/app/javascript/widget/assets/scss/_reset.scss
+++ b/app/javascript/widget/assets/scss/_reset.scss
@@ -21,7 +21,6 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
   vertical-align: baseline;
 }
 
diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss
index b62223bc4..04c3a4d35 100755
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/app/javascript/widget/assets/scss/_variables.scss
@@ -57,7 +57,6 @@ $color-background-light: #fafafa;
 $color-white: #fff;
 $color-body: #3c4858;
 $color-heading: #1f2d3d;
-$color-modal-header: #f1f1f1;
 // Thumbnail
 $thumbnail-radius: 4rem;
 
@@ -88,3 +87,5 @@ $border-radius: 3px;
 $line-height: 1;
 $footer-height: 11.2rem;
 $header-expanded-height: $space-medium * 10;
+
+$font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 6d85097be..7b1809ae4 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -3,10 +3,11 @@
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
+@import 'shared/assets/fonts/inter';
 
 html,
 body {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: $font-family;
   font-size: 10px;
   height: 100%;
 }
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 468419904..8ca73d060 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -39,6 +39,7 @@ export default {
 
   .title {
     font-size: $font-size-big;
+    font-weight: $font-weight-medium;
   }
 }
 </style>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 1b30dc37d..0b1a447e9 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -47,6 +47,7 @@ export default {
 
   .title {
     font-size: $font-size-mega;
+    font-weight: $font-weight-medium;
     margin-bottom: $space-two;
   }