diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
index f23c01d42..b6a91c6a5 100644
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -94,21 +94,35 @@
     --gray-11: 100 100 100;
     --gray-12: 32 32 32;
 
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
+    --background-color: 247 247 247;
+    --surface-1: 254 254 254;
+    --surface-2: 255 255 255;
+    --surface-active: 255 255 255;
+    --background-input-box: 0, 0, 0, 0.03;
+    --text-blue: 1 22 44;
+    --text-purple: 2 4 49;
+    --text-amber: 37 24 1;
     --border-container: 236 236 236;
-    --border-strong: 235 235 235;
+    --border-strong: 226 227 231;
     --border-weak: 234 234 234;
+    --border-blue-strong: 18 61 117;
     --solid-1: 255 255 255;
     --solid-2: 255 255 255;
     --solid-3: 255 255 255;
     --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
+    --solid-amber: 255 228 181;
     --solid-blue: 218 236 255;
+    --solid-blue-2: 251 253 255;
     --solid-iris: 230 231 255;
+    --solid-purple: 230 231 255;
+    --solid-red: 254 200 201;
+    --solid-amber-button: 255 221 141;
+    --card-color: 255 255 255;
+    --overlay: 0, 0, 0, 0.12;
+    --overlay-avatar: 255, 255, 255, 0.67;
 
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-1: 215, 215, 215, 0.22;
+    --alpha-2: 196, 197, 198, 0.22;
     --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
@@ -209,25 +223,39 @@
     --gray-11: 180 180 180;
     --gray-12: 238 238 238;
 
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
+    --background-color: 28 29 32;
+    --surface-1: 23 24 27;
+    --surface-2: 24 26 29;
+    --surface-active: 53 57 66;
+    --background-input-box: 255, 255, 255, 0.02;
+    --text-blue: 213 234 255;
+    --text-purple: 232 233 254;
+    --text-amber: 255 247 234;
+    --border-strong: 46 45 50;
+    --border-weak: 31 31 37;
+    --border-blue-strong: 201 226 255;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
     --solid-3: 44 45 54;
     --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
+    --solid-amber: 56 50 41;
+    --solid-blue: 15 57 102;
+    --solid-blue-2: 26 29 35;
     --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
+    --solid-purple: 51 51 107;
+    --solid-red: 90 33 34;
+    --solid-amber-button: 255 221 141;
+    --card-color: 28 30 34;
+    --overlay: 0, 0, 0, 0.4;
+    --overlay-avatar: 0, 0, 0, 0.05;
 
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
+    --alpha-1: 35, 36, 42, 0.8;
+    --alpha-2: 147, 153, 176, 0.12;
+    --alpha-3: 33, 34, 38, 0.95;
     --black-alpha-1: 0, 0, 0, 0.3;
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
+    --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
   }
 }
diff --git a/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2 b/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2
new file mode 100644
index 000000000..f22ec2554
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2 b/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2
new file mode 100644
index 000000000..22a12b04e
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/inter.scss b/app/javascript/shared/assets/fonts/inter.scss
index f7fe95c17..fa850804a 100644
--- a/app/javascript/shared/assets/fonts/inter.scss
+++ b/app/javascript/shared/assets/fonts/inter.scss
@@ -53,3 +53,21 @@
   font-display: swap;
   src: url('shared/assets/fonts/Inter/Inter-Bold.woff2') format('woff2');
 }
+
+// Inter Variable Font - Supports any weight from 100-900
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('shared/assets/fonts/Inter/InterVariable-Italic.woff2')
+    format('woff2');
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 82a6c2cbe..65d66a08c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,10 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
+      fontWeight: {
+        420: '420',
+        460: '460',
+      },
       typography: {
         bubble: {
           css: {
diff --git a/theme/colors.js b/theme/colors.js
index 52870e75b..25b4fb690 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -213,14 +213,24 @@ export const colors = {
     black: '#000000',
     brand: '#2781F6',
     background: 'rgb(var(--background-color) / <alpha-value>)',
+    'input-background': 'rgba(var(--background-input-box))',
+    surface: {
+      1: 'rgb(var(--surface-1) / <alpha-value>)',
+      2: 'rgb(var(--surface-2) / <alpha-value>)',
+      active: 'rgb(var(--surface-active) / <alpha-value>)',
+    },
     solid: {
       1: 'rgb(var(--solid-1) / <alpha-value>)',
       2: 'rgb(var(--solid-2) / <alpha-value>)',
       3: 'rgb(var(--solid-3) / <alpha-value>)',
       active: 'rgb(var(--solid-active) / <alpha-value>)',
       amber: 'rgb(var(--solid-amber) / <alpha-value>)',
+      'amber-button': 'rgb(var(--solid-amber-button) / <alpha-value>)',
       blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+      'blue-2': 'rgb(var(--solid-blue-2) / <alpha-value>)',
+      red: 'rgb(var(--solid-red) / <alpha-value>)',
       iris: 'rgb(var(--solid-iris) / <alpha-value>)',
+      purple: 'rgb(var(--solid-purple) / <alpha-value>)',
     },
     alpha: {
       1: 'rgba(var(--alpha-1))',
@@ -230,10 +240,20 @@ export const colors = {
       black2: 'rgba(var(--black-alpha-2))',
       white: 'rgba(var(--white-alpha))',
     },
+    // Border colors
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
     container: 'rgba(var(--border-container))',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',
+    'blue-strong': 'rgb(var(--border-blue-strong) / <alpha-value>)',
     'blue-border': 'rgba(var(--border-blue))',
-    'blue-text': 'rgba(var(--text-blue))',
+    // Text colors
+    'blue-text': 'rgb(var(--text-blue) / <alpha-value>)',
+    'purple-text': 'rgb(var(--text-purple) / <alpha-value>)',
+    'amber-text': 'rgb(var(--text-amber) / <alpha-value>)',
+    card: 'rgb(var(--card-color) / <alpha-value>)',
+    overlay: {
+      default: 'rgba(var(--overlay))',
+      avatar: 'rgba(var(--overlay-avatar))',
+    },
   },
 };