diff --git a/eslint.config.mjs b/eslint.config.mjs
index 909af66..bb7ced0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -7,13 +7,13 @@ export default [
   ...eslintConfigInternxt,
   {
     languageOptions: {
-      parser: typescriptParser
+      parser: typescriptParser,
     },
     rules: {
       '@typescript-eslint/no-explicit-any': 'warn',
       'react/react-in-jsx-scope': 'off',
+      'max-len': 'off',
     },
     ignores: ['dist', 'tmp', 'scripts', 'node_modules', '!.storybook'],
-  }
+  },
 ];
-
diff --git a/src/index.scss b/src/index.scss
index ebcf2ed..cf77fbb 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,91 +1,105 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('tailwindcss');
 
-// @import url('./assets/fonts/InstrumentSans/font.css');
-
-// COLORS
-
-:root,
-#root {
-  background: rgb(var(--color-surface));
-  font-family: 'Instrument Sans', sans-serif;
-  height: 100%;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+@theme {
+  --color-surface: rgb(var(--color-surface-rgb));
+  --color-highlight: rgb(var(--color-highlight-rgb));
+  --color-primary: rgb(var(--color-primary-rgb));
+  --color-primary-dark: rgb(var(--color-primary-dark-rgb));
+  --color-red: rgb(var(--color-red-rgb));
+  --color-red-dark: rgb(var(--color-red-dark-rgb));
+  --color-orange: rgb(var(--color-orange-rgb));
+  --color-orange-dark: rgb(var(--color-orange-dark-rgb));
+  --color-yellow: rgb(var(--color-yellow-rgb));
+  --color-yellow-dark: rgb(var(--color-yellow-dark-rgb));
+  --color-green: rgb(var(--color-green-rgb));
+  --color-green-dark: rgb(var(--color-green-dark-rgb));
+  --color-pink: rgb(var(--color-pink-rgb));
+  --color-pink-dark: rgb(var(--color-pink-dark-rgb));
+  --color-indigo: rgb(var(--color-indigo-rgb));
+  --color-indigo-dark: rgb(var(--color-indigo-dark-rgb));
+  --color-gray-1: rgb(var(--color-gray-1-rgb));
+  --color-gray-5: rgb(var(--color-gray-5-rgb));
+  --color-gray-10: rgb(var(--color-gray-10-rgb));
+  --color-gray-20: rgb(var(--color-gray-20-rgb));
+  --color-gray-30: rgb(var(--color-gray-30-rgb));
+  --color-gray-40: rgb(var(--color-gray-40-rgb));
+  --color-gray-50: rgb(var(--color-gray-50-rgb));
+  --color-gray-60: rgb(var(--color-gray-60-rgb));
+  --color-gray-70: rgb(var(--color-gray-70-rgb));
+  --color-gray-80: rgb(var(--color-gray-80-rgb));
+  --color-gray-90: rgb(var(--color-gray-90-rgb));
+  --color-gray-100: rgb(var(--color-gray-100-rgb));
+}
 
-  --footer-height: 1rem;
+button {
+  cursor: pointer;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
     color-scheme: light;
 
-    --color-primary: 0 102 255;
-    --color-primary-dark: 0 88 219;
-    --color-red: 255 13 0;
-    --color-red-dark: 230 11 0;
-    --color-orange: 255 149 0;
-    --color-orange-dark: 230 134 0;
-    --color-yellow: 255 204 0;
-    --color-yellow-dark: 230 184 0;
-    --color-green: 50 195 86;
-    --color-green-dark: 45 174 77;
-    --color-pink: 255 36 76;
-    --color-pink-dark: 235 0 63;
-    --color-indigo: 81 78 212;
-    --color-indigo-dark: 60 58 207;
-    --color-surface: 255 255 255;
-    --color-highlight: 17 17 17;
-    --color-gray-1: 249 249 252;
-    --color-gray-5: 243 243 248;
-    --color-gray-10: 229 229 235;
-    --color-gray-20: 209 209 215;
-    --color-gray-30: 199 199 205;
-    --color-gray-40: 174 174 179;
-    --color-gray-50: 142 142 148;
-    --color-gray-60: 99 99 103;
-    --color-gray-70: 72 72 75;
-    --color-gray-80: 58 58 59;
-    --color-gray-90: 44 44 48;
-    --color-gray-100: 24 24 27;
+    --color-primary-rgb: 0 102 255;
+    --color-primary-dark-rgb: 0 88 219;
+    --color-red-rgb: 255 13 0;
+    --color-red-dark-rgb: 230 11 0;
+    --color-orange-rgb: 255 149 0;
+    --color-orange-dark-rgb: 230 134 0;
+    --color-yellow-rgb: 255 204 0;
+    --color-yellow-dark-rgb: 230 184 0;
+    --color-green-rgb: 50 195 86;
+    --color-green-dark-rgb: 45 174 77;
+    --color-pink-rgb: 255 36 76;
+    --color-pink-dark-rgb: 235 0 63;
+    --color-indigo-rgb: 81 78 212;
+    --color-indigo-dark-rgb: 60 58 207;
+    --color-surface-rgb: 255 255 255;
+    --color-highlight-rgb: 17 17 17;
+    --color-gray-1-rgb: 249 249 252;
+    --color-gray-5-rgb: 243 243 248;
+    --color-gray-10-rgb: 229 229 235;
+    --color-gray-20-rgb: 209 209 215;
+    --color-gray-30-rgb: 199 199 205;
+    --color-gray-40-rgb: 174 174 179;
+    --color-gray-50-rgb: 142 142 148;
+    --color-gray-60-rgb: 99 99 103;
+    --color-gray-70-rgb: 72 72 75;
+    --color-gray-80-rgb: 58 58 59;
+    --color-gray-90-rgb: 44 44 48;
+    --color-gray-100-rgb: 24 24 27;
   }
 
   :root.dark {
     color-scheme: dark;
 
-    --color-primary: 20 114 255;
-    --color-primary-dark: 0 96 240;
-    --color-red: 255 61 51;
-    --color-red-dark: 255 36 26;
-    --color-orange: 255 164 36;
-    --color-orange-dark: 255 153 10;
-    --color-yellow: 255 214 51;
-    --color-yellow-dark: 255 209 26;
-    --color-green: 72 208 106;
-    --color-green-dark: 52 203 90;
-    --color-pink: 255 71 105;
-    --color-pink-dark: 255 15 80;
-    --color-indigo: 106 103 218;
-    --color-indigo-dark: 85 83 213;
-    --color-surface: 17 17 17;
-    --color-highlight: 255 255 255;
-    --color-gray-1: 24 24 27;
-    --color-gray-5: 44 44 48;
-    --color-gray-10: 58 58 59;
-    --color-gray-20: 72 72 75;
-    --color-gray-30: 99 99 103;
-    --color-gray-40: 142 142 148;
-    --color-gray-50: 174 174 179;
-    --color-gray-60: 199 199 205;
-    --color-gray-70: 209 209 215;
-    --color-gray-80: 229 229 235;
-    --color-gray-90: 243 243 248;
-    --color-gray-100: 249 249 252;
+    --color-primary-rgb: 20 114 255;
+    --color-primary-dark-rgb: 0 96 240;
+    --color-red-rgb: 255 61 51;
+    --color-red-dark-rgb: 255 36 26;
+    --color-orange-rgb: 255 164 36;
+    --color-orange-dark-rgb: 255 153 10;
+    --color-yellow-rgb: 255 214 51;
+    --color-yellow-dark-rgb: 255 209 26;
+    --color-green-rgb: 72 208 106;
+    --color-green-dark-rgb: 52 203 90;
+    --color-pink-rgb: 255 71 105;
+    --color-pink-dark-rgb: 255 15 80;
+    --color-indigo-rgb: 106 103 218;
+    --color-indigo-dark-rgb: 85 83 213;
+    --color-surface-rgb: 17 17 17;
+    --color-highlight-rgb: 255 255 255;
+    --color-gray-1-rgb: 24 24 27;
+    --color-gray-5-rgb: 44 44 48;
+    --color-gray-10-rgb: 58 58 59;
+    --color-gray-20-rgb: 72 72 75;
+    --color-gray-30-rgb: 99 99 103;
+    --color-gray-40-rgb: 142 142 148;
+    --color-gray-50-rgb: 174 174 179;
+    --color-gray-60-rgb: 199 199 205;
+    --color-gray-70-rgb: 209 209 215;
+    --color-gray-80-rgb: 229 229 235;
+    --color-gray-90-rgb: 243 243 248;
+    --color-gray-100-rgb: 249 249 252;
   }
 }
 
@@ -93,66 +107,66 @@
   :root {
     color-scheme: dark;
 
-    --color-primary: 20 114 255;
-    --color-primary-dark: 0 96 240;
-    --color-red: 255 61 51;
-    --color-red-dark: 255 36 26;
-    --color-orange: 255 164 36;
-    --color-orange-dark: 255 153 10;
-    --color-yellow: 255 214 51;
-    --color-yellow-dark: 255 209 26;
-    --color-green: 72 208 106;
-    --color-green-dark: 52 203 90;
-    --color-pink: 255 71 105;
-    --color-pink-dark: 255 15 80;
-    --color-indigo: 106 103 218;
-    --color-indigo-dark: 85 83 213;
-    --color-surface: 17 17 17;
-    --color-highlight: 255 255 255;
-    --color-gray-1: 24 24 27;
-    --color-gray-5: 44 44 48;
-    --color-gray-10: 58 58 59;
-    --color-gray-20: 72 72 75;
-    --color-gray-30: 99 99 103;
-    --color-gray-40: 142 142 148;
-    --color-gray-50: 174 174 179;
-    --color-gray-60: 199 199 205;
-    --color-gray-70: 209 209 215;
-    --color-gray-80: 229 229 235;
-    --color-gray-90: 243 243 248;
-    --color-gray-100: 249 249 252;
+    --color-primary-rgb: 20 114 255;
+    --color-primary-dark-rgb: 0 96 240;
+    --color-red-rgb: 255 61 51;
+    --color-red-dark-rgb: 255 36 26;
+    --color-orange-rgb: 255 164 36;
+    --color-orange-dark-rgb: 255 153 10;
+    --color-yellow-rgb: 255 214 51;
+    --color-yellow-dark-rgb: 255 209 26;
+    --color-green-rgb: 72 208 106;
+    --color-green-dark-rgb: 52 203 90;
+    --color-pink-rgb: 255 71 105;
+    --color-pink-dark-rgb: 255 15 80;
+    --color-indigo-rgb: 106 103 218;
+    --color-indigo-dark-rgb: 85 83 213;
+    --color-surface-rgb: 17 17 17;
+    --color-highlight-rgb: 255 255 255;
+    --color-gray-1-rgb: 24 24 27;
+    --color-gray-5-rgb: 44 44 48;
+    --color-gray-10-rgb: 58 58 59;
+    --color-gray-20-rgb: 72 72 75;
+    --color-gray-30-rgb: 99 99 103;
+    --color-gray-40-rgb: 142 142 148;
+    --color-gray-50-rgb: 174 174 179;
+    --color-gray-60-rgb: 199 199 205;
+    --color-gray-70-rgb: 209 209 215;
+    --color-gray-80-rgb: 229 229 235;
+    --color-gray-90-rgb: 243 243 248;
+    --color-gray-100-rgb: 249 249 252;
   }
 
   :root:not(.dark) {
     color-scheme: light;
 
-    --color-primary: 0 102 255;
-    --color-primary-dark: 0 88 219;
-    --color-red: 255 13 0;
-    --color-red-dark: 230 11 0;
-    --color-orange: 255 149 0;
-    --color-orange-dark: 230 134 0;
-    --color-yellow: 255 204 0;
-    --color-yellow-dark: 230 184 0;
-    --color-green: 50 195 86;
-    --color-green-dark: 45 174 77;
-    --color-pink: 255 36 76;
-    --color-pink-dark: 235 0 63;
-    --color-indigo: 81 78 212;
-    --color-indigo-dark: 60 58 207;
-    --color-surface: 255 255 255;
-    --color-highlight: 17 17 17;
-    --color-gray-1: 249 249 252;
-    --color-gray-5: 243 243 248;
-    --color-gray-10: 229 229 235;
-    --color-gray-20: 209 209 215;
-    --color-gray-30: 199 199 205;
-    --color-gray-40: 174 174 179;
-    --color-gray-50: 142 142 148;
-    --color-gray-60: 99 99 103;
-    --color-gray-70: 72 72 75;
-    --color-gray-80: 58 58 59;
-    --color-gray-90: 44 44 48;
-    --color-gray-100: 24 24 27;
+    --color-primary-rgb: 0 102 255;
+    --color-primary-dark-rgb: 0 88 219;
+    --color-red-rgb: 255 13 0;
+    --color-red-dark-rgb: 230 11 0;
+    --color-orange-rgb: 255 149 0;
+    --color-orange-dark-rgb: 230 134 0;
+    --color-yellow-rgb: 255 204 0;
+    --color-yellow-dark-rgb: 230 184 0;
+    --color-green-rgb: 50 195 86;
+    --color-green-dark-rgb: 45 174 77;
+    --color-pink-rgb: 255 36 76;
+    --color-pink-dark-rgb: 235 0 63;
+    --color-indigo-rgb: 81 78 212;
+    --color-indigo-dark-rgb: 60 58 207;
+    --color-surface-rgb: 255 255 255;
+    --color-highlight-rgb: 17 17 17;
+    --color-gray-1-rgb: 249 249 252;
+    --color-gray-5-rgb: 243 243 248;
+    --color-gray-10-rgb: 229 229 235;
+    --color-gray-20-rgb: 209 209 215;
+    --color-gray-30-rgb: 199 199 205;
+    --color-gray-40-rgb: 174 174 179;
+    --color-gray-50-rgb: 142 142 148;
+    --color-gray-60-rgb: 99 99 103;
+    --color-gray-70-rgb: 72 72 75;
+    --color-gray-80-rgb: 58 58 59;
+    --color-gray-90-rgb: 44 44 48;
+    --color-gray-100-rgb: 24 24 27;
   }
-}
\ No newline at end of file
+}