diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 9ef120ac3f..e2c04312a5 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
     extend: {
       colors: {
         custom: {
-          accent: {
+          primary: {
             10: convertToRGB("--color-accent-10"),
             20: convertToRGB("--color-accent-20"),
             30: convertToRGB("--color-accent-30"),
@@ -37,7 +37,7 @@ module.exports = {
             950: convertToRGB("--color-accent-950"),
             DEFAULT: convertToRGB("--color-accent-100"),
           },
-          bg: {
+          background: {
             10: convertToRGB("--color-bg-10"),
             20: convertToRGB("--color-bg-20"),
             30: convertToRGB("--color-bg-30"),
@@ -59,52 +59,74 @@ module.exports = {
             950: convertToRGB("--color-bg-950"),
             DEFAULT: convertToRGB("--color-bg-100"),
           },
-          sidebar: {
-            10: convertToRGB("--color-sidebar-10"),
-            20: convertToRGB("--color-sidebar-20"),
-            30: convertToRGB("--color-sidebar-30"),
-            40: convertToRGB("--color-sidebar-40"),
-            50: convertToRGB("--color-sidebar-50"),
-            60: convertToRGB("--color-sidebar-60"),
-            70: convertToRGB("--color-sidebar-70"),
-            80: convertToRGB("--color-sidebar-80"),
-            90: convertToRGB("--color-sidebar-90"),
-            100: convertToRGB("--color-sidebar-100"),
-            200: convertToRGB("--color-sidebar-200"),
-            300: convertToRGB("--color-sidebar-300"),
-            400: convertToRGB("--color-sidebar-400"),
-            500: convertToRGB("--color-sidebar-500"),
-            600: convertToRGB("--color-sidebar-600"),
-            700: convertToRGB("--color-sidebar-700"),
-            800: convertToRGB("--color-sidebar-800"),
-            900: convertToRGB("--color-sidebar-900"),
-            950: convertToRGB("--color-sidebar-950"),
-            DEFAULT: convertToRGB("--color-sidebar-100"),
+          text: {
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            950: convertToRGB("--color-text-950"),
+            DEFAULT: convertToRGB("--color-text-500"),
+          },
+          sidebar: {
+            background: {
+              10: convertToRGB("--color-sidebar-bg-10"),
+              20: convertToRGB("--color-sidebar-bg-20"),
+              30: convertToRGB("--color-sidebar-bg-30"),
+              40: convertToRGB("--color-sidebar-bg-40"),
+              50: convertToRGB("--color-sidebar-bg-50"),
+              60: convertToRGB("--color-sidebar-bg-60"),
+              70: convertToRGB("--color-sidebar-bg-70"),
+              80: convertToRGB("--color-sidebar-bg-80"),
+              90: convertToRGB("--color-sidebar-bg-90"),
+              100: convertToRGB("--color-sidebar-bg-100"),
+              200: convertToRGB("--color-sidebar-bg-200"),
+              300: convertToRGB("--color-sidebar-bg-300"),
+              400: convertToRGB("--color-sidebar-bg-400"),
+              500: convertToRGB("--color-sidebar-bg-500"),
+              600: convertToRGB("--color-sidebar-bg-600"),
+              700: convertToRGB("--color-sidebar-bg-700"),
+              800: convertToRGB("--color-sidebar-bg-800"),
+              900: convertToRGB("--color-sidebar-bg-900"),
+              950: convertToRGB("--color-sidebar-bg-950"),
+              DEFAULT: convertToRGB("--color-sidebar-bg-100"),
+            },
+            text: {
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              950: convertToRGB("--color-sidebar-text-950"),
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
           },
-        },
-      },
-      textColor: {
-        custom: {
-          10: convertToRGB("--color-text-10"),
-          20: convertToRGB("--color-text-20"),
-          30: convertToRGB("--color-text-30"),
-          40: convertToRGB("--color-text-40"),
-          50: convertToRGB("--color-text-50"),
-          60: convertToRGB("--color-text-60"),
-          70: convertToRGB("--color-text-70"),
-          80: convertToRGB("--color-text-80"),
-          90: convertToRGB("--color-text-90"),
-          100: convertToRGB("--color-text-100"),
-          200: convertToRGB("--color-text-200"),
-          300: convertToRGB("--color-text-300"),
-          400: convertToRGB("--color-text-400"),
-          500: convertToRGB("--color-text-500"),
-          600: convertToRGB("--color-text-600"),
-          700: convertToRGB("--color-text-700"),
-          800: convertToRGB("--color-text-800"),
-          900: convertToRGB("--color-text-900"),
-          950: convertToRGB("--color-text-950"),
-          DEFAULT: convertToRGB("--color-text-500"),
         },
       },
       keyframes: {