diff --git a/.github/workflows/build-design-system.yml b/.github/workflows/build-design-system.yml
new file mode 100644
index 00000000..f6adff56
--- /dev/null
+++ b/.github/workflows/build-design-system.yml
@@ -0,0 +1,34 @@
+name: Build Design System
+
+on:
+  push:
+    paths:
+      - "packages/design-system/src/tokens/**" # Trigger only when files in the tokens folder change
+  pull_request:
+    paths:
+      - "packages/design-system/src/tokens/**"
+
+jobs:
+  build-design-system:
+    runs-on: ubuntu-latest
+
+    steps:
+    # Step 1: Checkout the repository
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Step 2: Set up Bun
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+
+    # Step 3: Navigate to the design-system package and install dependencies
+    - name: Install dependencies
+      working-directory: ./packages/design-system
+      run: bun install
+
+    # Step 4: Run the build script
+    - name: Run build script
+      working-directory: ./packages/design-system
+      run: bun run build
diff --git a/.github/workflows/update-leaderboard.yml b/.github/workflows/update-leaderboard.yml
deleted file mode 100644
index 67e36f9a..00000000
--- a/.github/workflows/update-leaderboard.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Update Leaderboard
-
-on:
-  issues:
-    types: [closed]
-
-jobs:
-  update-leaderboard:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Run script to update leaderboard
-        run: |
-          node updateLeaderboard.js
-
-      - name: Commit and push changes
-        run: |
-          git config --global user.name "GitHub Action"
-          git config --global user.email "action@github.com"
-          git add leaderboard.md
-          git commit -m "Update leaderboard"
-          git push
diff --git a/.github/workflows/updateLeaderboard.js b/.github/workflows/updateLeaderboard.js
deleted file mode 100644
index 3e3f3e1b..00000000
--- a/.github/workflows/updateLeaderboard.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const fs = require('fs');
-const { Octokit } = require('@octokit/rest');
-
-const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
-
-async function updateLeaderboard() {
-  const issues = await octokit.issues.listForRepo({
-    owner: 'your-username',
-    repo: 'your-repo',
-    state: 'closed',
-  });
-
-  const points = {};
-
-  issues.data.forEach((issue) => {
-    const user = issue.user.login;
-    points[user] = (points[user] || 0) + 10; // هر ایشو ۱۰ امتیاز
-  });
-
-  let markdown = `# Leaderboard\n\n| نام کاربر | امتیازات کل |\n|-----------|-------------|\n`;
-  Object.entries(points).forEach(([user, point]) => {
-    markdown += `| ${user} | ${point} |\n`;
-  });
-
-  fs.writeFileSync('leaderboard.md', markdown);
-}
-
-updateLeaderboard().catch(console.error);
diff --git a/.hintrc b/.hintrc
index aa8de6b4..1f143282 100644
--- a/.hintrc
+++ b/.hintrc
@@ -1,5 +1,8 @@
 {
   "extends": [
     "development"
-  ]
+  ],
+  "hints": {
+    "typescript-config/consistent-casing": "off"
+  }
 }
\ No newline at end of file
diff --git a/apps/core/app/auth/layout.tsx b/apps/core/app/auth/layout.tsx
index 37223c29..77d65b6b 100644
--- a/apps/core/app/auth/layout.tsx
+++ b/apps/core/app/auth/layout.tsx
@@ -1,4 +1,4 @@
-import "@repo/ui/globals.css";
+import "@repo/ui/globals.scss";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
diff --git a/apps/core/app/layout.tsx b/apps/core/app/layout.tsx
index cd49a80c..d6619102 100644
--- a/apps/core/app/layout.tsx
+++ b/apps/core/app/layout.tsx
@@ -1,4 +1,4 @@
-import "@repo/ui/globals.css";
+import "@repo/ui/globals.scss";
 import { cn } from "@repo/ui/lib/utils";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
diff --git a/bun.lockb b/bun.lockb
index 0fde82fd..59c7cade 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
new file mode 100644
index 00000000..39a464dd
--- /dev/null
+++ b/packages/design-system/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@repo/design-system",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "bun run src/scripts/build.ts"
+  },
+  "exports": {
+    "./styles": "./src/styles/main.scss", 
+    "./tailwind": "./src/tailwind/config.ts"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "*",
+    "style-dictionary": "^4.3.2"
+  }
+}
diff --git a/packages/design-system/src/scripts/build-colors-style.ts b/packages/design-system/src/scripts/build-colors-style.ts
new file mode 100644
index 00000000..93a43f02
--- /dev/null
+++ b/packages/design-system/src/scripts/build-colors-style.ts
@@ -0,0 +1,79 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for token files
+const tokensDir = path.join(__dirname, "../tokens");
+const stylesDir = path.join(__dirname, "../styles/base");
+const resolveTokenReference = (value: string): string => {
+  return value.replace(/{(.+?)}/g, (_, match) => `var(--${match.replace(".", "-")})`);
+};
+
+// Generate SCSS content for a given theme
+const generateScssContent = (
+  theme: "dark" | "light",
+  tokens: Record<string, any>,
+): string => {
+  const lines: string[] = [];
+
+  const selector = theme === "dark" ? ":root" : ".light";
+
+  // Add the @use directive
+  lines.push(`@use "_palette.scss" as *;\n`);
+
+  // Start the layer and class
+  lines.push(`@layer base {`);
+  lines.push(`  ${selector} {`);
+
+  // Process each token in the "color" group
+  const colorTokens = tokens.color;
+  for (const key in colorTokens) {
+    const value = colorTokens[key].$value;
+
+    // Convert token reference (e.g., {zinc.200}) to CSS variable (e.g., var(--zinc.200))
+    const resolvedValue = resolveTokenReference(value);
+    lines.push(`    --${key}: ${resolvedValue};`);
+  }
+
+  // Close the class and layer
+  lines.push(`  }`);
+  lines.push(`}`);
+
+  return lines.join("\n");
+};
+
+// Function to build and write SCSS for a given theme
+export const buildColorsScss = (theme: "dark" | "light"): void => {
+  // Define the input and output file paths
+  const partFileName = theme === "dark" ? "Default" : "Light";
+  const inputFilePath = path.join(
+    tokensDir,
+    `token_Color_${partFileName}.json`,
+  );
+  const outputFilePath = path.join(stylesDir, `_colors-${theme}.scss`);
+
+  // Ensure the input file exists
+  if (!fs.existsSync(inputFilePath)) {
+    console.error(`Token file not found: ${inputFilePath}`);
+    return;
+  }
+
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
+  const tokens = JSON.parse(rawData);
+
+  // Generate SCSS content
+  const scssContent = generateScssContent(theme, tokens);
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(stylesDir)) {
+    fs.mkdirSync(stylesDir, { recursive: true });
+  }
+
+  // Write the SCSS content to the file
+  fs.writeFileSync(outputFilePath, scssContent, "utf-8");
+  console.log(`SCSS file created for ${theme} theme at: ${outputFilePath}`);
+};
+
+// Reusable calls for light and dark themes
+buildColorsScss("light");
+buildColorsScss("dark");
diff --git a/packages/design-system/src/scripts/build-colors-tailwind.ts b/packages/design-system/src/scripts/build-colors-tailwind.ts
new file mode 100644
index 00000000..8ec0cb8f
--- /dev/null
+++ b/packages/design-system/src/scripts/build-colors-tailwind.ts
@@ -0,0 +1,61 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for token files
+const tokensDir = path.join(__dirname, "../tokens");
+const outputDir = path.join(__dirname, "../tailwind");
+
+// Utility to resolve token references to match the key directly
+const resolveTokenReference = (key: string): string => {
+  return `hsl(var(--${key}))`;
+};
+
+// Generate TypeScript content for colors
+const generateColorsTsContent = (tokens: Record<string, any>): string => {
+  const colorTokens = tokens.color;
+  const lines: string[] = [];
+
+  // Add the TypeScript export header
+  lines.push(`export const colors = {`);
+
+  // Process each token and use the key for the variable name
+  for (const key in colorTokens) {
+    lines.push(`  "${key}": "${resolveTokenReference(key)}",`);
+  }
+
+  // Close the object
+  lines.push(`};`);
+
+  return lines.join("\n");
+};
+
+// Function to build and write colors.ts
+export const buildColorsTailwind = (): void => {
+  const inputFilePath = path.join(tokensDir, `token_Color_Light.json`);
+  const outputFilePath = path.join(outputDir, `colors.ts`);
+
+  // Ensure the input file exists
+  if (!fs.existsSync(inputFilePath)) {
+    console.error(`Token file not found: ${inputFilePath}`);
+    return;
+  }
+
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
+  const tokens = JSON.parse(rawData);
+
+  // Generate TypeScript content
+  const tsContent = generateColorsTsContent(tokens);
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the TypeScript content to the file
+  fs.writeFileSync(outputFilePath, tsContent, "utf-8");
+  console.log(`colors.ts file created at: ${outputFilePath}`);
+};
+
+// Build colors.ts
+buildColorsTailwind();
diff --git a/packages/design-system/src/scripts/build-config-tailwind.ts b/packages/design-system/src/scripts/build-config-tailwind.ts
new file mode 100644
index 00000000..707c2fa7
--- /dev/null
+++ b/packages/design-system/src/scripts/build-config-tailwind.ts
@@ -0,0 +1,40 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for the output file
+const outputDir = path.join(__dirname, "../tailwind");
+const outputFilePath = path.join(outputDir, "config.ts");
+
+// Content for the tailwindConfig.ts file
+const generateTailwindConfigContent = (): string => {
+  return `
+import { colors } from "./colors";
+import { palette } from "./palette";
+
+export const tailwindConfig = {
+  theme: {
+    extend: {
+      colors: { ...colors, ...palette },
+    },
+  },
+};
+`.trim();
+};
+
+// Function to create the tailwindConfig.ts file
+export const buildTailwindConfig = (): void => {
+  // Generate the content
+  const configContent = generateTailwindConfigContent();
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the content to the file
+  fs.writeFileSync(outputFilePath, configContent, "utf-8");
+  console.log(`tailwindConfig.ts file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildTailwindConfig();
diff --git a/packages/design-system/src/scripts/build-main-style.ts b/packages/design-system/src/scripts/build-main-style.ts
new file mode 100644
index 00000000..df13714c
--- /dev/null
+++ b/packages/design-system/src/scripts/build-main-style.ts
@@ -0,0 +1,32 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for the output file
+const outputDir = path.join(__dirname, "../styles");
+const outputFilePath = path.join(outputDir, "main.scss");
+
+// Content for the main.scss file
+const generateMainScssContent = (): string => {
+  return `
+@use "./base/_colors-dark.scss" as *;
+@use "./base/_colors-light.scss" as *;
+`.trim();
+};
+
+// Function to create the main.scss file
+export const buildMainScss = (): void => {
+  // Generate the content
+  const scssContent = generateMainScssContent();
+
+  // Ensure the output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the content to the file
+  fs.writeFileSync(outputFilePath, scssContent, "utf-8");
+  console.log(`main.scss file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildMainScss();
diff --git a/packages/design-system/src/scripts/build-palette-style.ts b/packages/design-system/src/scripts/build-palette-style.ts
new file mode 100644
index 00000000..e3710589
--- /dev/null
+++ b/packages/design-system/src/scripts/build-palette-style.ts
@@ -0,0 +1,54 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { hexToHsl } from './utills.js';
+
+// Paths for input and output files
+const inputFilePath = path.join(__dirname, '../tokens/token_Palette_Primitive.json');
+const outputFilePath = path.join(__dirname, '../styles/base/_palette.scss');
+
+// Generate SCSS content with groups separated by an empty line
+const generateScssContent = (tokens: Record<string, any>): string => {
+  const lines: string[] = [];
+
+  for (const group in tokens) {
+    const groupTokens = tokens[group];
+    for (const key in groupTokens) {
+      const value = groupTokens[key];
+      if (value.$type === 'color') {
+        lines.push(`  --${group}-${key}: ${hexToHsl(value.$value)};`);
+      }
+    }
+    lines.push(''); // Add an empty line after each group
+  }
+
+  return `
+@layer base {
+  :root {
+${lines.join('\n')}
+  }
+}
+`.trim();
+};
+
+// Function to build and write SCSS content
+export const buildPaletteScss = (): void => {
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, 'utf-8');
+  const tokens = JSON.parse(rawData);
+
+  // Generate SCSS content
+  const scssContent = generateScssContent(tokens);
+
+  // Ensure the output directory exists
+  const outputDir = path.dirname(outputFilePath);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the SCSS content to the file
+  fs.writeFileSync(outputFilePath, scssContent, 'utf-8');
+  console.log(`SCSS file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildPaletteScss();
diff --git a/packages/design-system/src/scripts/build-palette-tailwind.ts b/packages/design-system/src/scripts/build-palette-tailwind.ts
new file mode 100644
index 00000000..ac1e2780
--- /dev/null
+++ b/packages/design-system/src/scripts/build-palette-tailwind.ts
@@ -0,0 +1,54 @@
+import * as fs from "fs";
+import * as path from "path";
+
+// Paths for input and output files
+const inputFilePath = path.join(__dirname, "../tokens/token_Palette_Primitive.json");
+const outputFilePath = path.join(__dirname, "../tailwind/palette.ts");
+
+// Generate TypeScript content with groups of palette colors
+const generatePaletteTsContent = (tokens: Record<string, any>): string => {
+  const lines: string[] = [];
+
+  // Start the TypeScript export object
+  lines.push(`export const palette = {`);
+
+  for (const group in tokens) {
+    const groupTokens = tokens[group];
+    lines.push(`  "${group}": {`);
+    for (const key in groupTokens) {
+      const value = groupTokens[key];
+      if (value.$type === "color") {
+        // Add a line for each color token
+        lines.push(`    "${key}": "var(--${group}-${key})",`);
+      }
+    }
+    lines.push(`  },`); // Close the group
+  }
+
+  lines.push(`};`); // Close the object
+
+  return lines.join("\n");
+};
+
+// Function to build and write the palette.ts file
+export const buildPaletteTailwind = (): void => {
+  // Read and parse the JSON file
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
+  const tokens = JSON.parse(rawData);
+
+  // Generate TypeScript content
+  const tsContent = generatePaletteTsContent(tokens);
+
+  // Ensure the output directory exists
+  const outputDir = path.dirname(outputFilePath);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write the TypeScript content to the file
+  fs.writeFileSync(outputFilePath, tsContent, "utf-8");
+  console.log(`palette.ts file created at: ${outputFilePath}`);
+};
+
+// Run the script
+buildPaletteTailwind();
diff --git a/packages/design-system/src/scripts/build.ts b/packages/design-system/src/scripts/build.ts
new file mode 100644
index 00000000..7fbbb23c
--- /dev/null
+++ b/packages/design-system/src/scripts/build.ts
@@ -0,0 +1,32 @@
+import { buildColorsTailwind } from "./build-colors-tailwind.js";
+import { buildColorsScss } from "./build-colors-style.js";
+import { buildPaletteTailwind } from "./build-palette-tailwind.js";
+import { buildPaletteScss } from "./build-palette-style.js";
+import { buildTailwindConfig } from "./build-config-tailwind.js";
+import { buildMainScss } from "./build-main-style.js";
+
+const main = () => {
+  try {
+    console.log("🎨 Building design system...");
+
+    // Styles
+    console.log("Building SCSS styles...");
+    buildPaletteScss();
+    buildColorsScss("light");
+    buildColorsScss("dark");
+    buildMainScss();
+
+    // Tailwind
+    console.log("Building Tailwind configurations...");
+    buildColorsTailwind();
+    buildPaletteTailwind();
+    buildTailwindConfig();
+
+    console.log("✅ Design system built successfully!");
+  } catch (error) {
+    console.error("❌ Build failed:", error);
+    process.exit(1);
+  }
+};
+
+main();
diff --git a/packages/design-system/src/scripts/utills.ts b/packages/design-system/src/scripts/utills.ts
new file mode 100644
index 00000000..1394777e
--- /dev/null
+++ b/packages/design-system/src/scripts/utills.ts
@@ -0,0 +1,26 @@
+// Utility to convert HEX to HSL
+export const hexToHsl = (hex: string): string => {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+  
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+  
+    let h = 0;
+    if (delta !== 0) {
+      if (max === r) {
+        h = ((g - b) / delta + (g < b ? 6 : 0)) * 60;
+      } else if (max === g) {
+        h = ((b - r) / delta + 2) * 60;
+      } else {
+        h = ((r - g) / delta + 4) * 60;
+      }
+    }
+  
+    const l = (max + min) / 2;
+    const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  
+    return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  };
\ No newline at end of file
diff --git a/packages/design-system/src/styles/base/_colors-dark.scss b/packages/design-system/src/styles/base/_colors-dark.scss
new file mode 100644
index 00000000..c69ef476
--- /dev/null
+++ b/packages/design-system/src/styles/base/_colors-dark.scss
@@ -0,0 +1,39 @@
+@use "_palette.scss" as *;
+
+@layer base {
+  :root {
+    --accent: var(--zinc-800);
+    --accent-foreground: var(--General-white);
+    --background: var(--zinc-950);
+    --border: var(--zinc-800);
+    --card: var(--zinc-900);
+    --card-foreground: var(--General-white);
+    --destructive: var(--rose-500);
+    --destructive-foreground: var(--General-black);
+    --error: var(--rose-500);
+    --error-border: var(--red-900);
+    --error-foreground: var(--red-100);
+    --foreground: var(--zinc-50);
+    --information: var(--sky-500);
+    --information-border: var(--blue-900);
+    --information-foreground: var(--blue-100);
+    --input: var(--zinc-800);
+    --muted: var(--zinc-800);
+    --muted-foreground: var(--zinc-400);
+    --popover: var(--zinc-950);
+    --popover-foreground: var(--General-white);
+    --primary: var(--purple-500);
+    --primary-foreground: var(--General-white);
+    --primary-light: var(--purple-100);
+    --ring: var(--zinc-600);
+    --secondary: var(--zinc-800);
+    --secondary-foreground: var(--General-white);
+    --success: var(--emerald-500);
+    --success-border: var(--green-900);
+    --success-foreground: var(--green-50);
+    --table-header: rgba(39, 39, 42, 0.5000);
+    --warning: var(--amber-500);
+    --warning-border: var(--amber-900);
+    --warning-foreground: var(--amber-100);
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/styles/base/_colors-light.scss b/packages/design-system/src/styles/base/_colors-light.scss
new file mode 100644
index 00000000..4dd3c987
--- /dev/null
+++ b/packages/design-system/src/styles/base/_colors-light.scss
@@ -0,0 +1,39 @@
+@use "_palette.scss" as *;
+
+@layer base {
+  .light {
+    --accent: var(--zinc-100);
+    --accent-foreground: var(--zinc-900);
+    --background: var(--General-white);
+    --border: var(--zinc-200);
+    --card: var(--zinc-100);
+    --card-foreground: var(--slate-900);
+    --destructive: var(--red-600);
+    --destructive-foreground: var(--General-white);
+    --error: var(--red-500);
+    --error-border: var(--red-200);
+    --error-foreground: var(--red-600);
+    --foreground: var(--zinc-950);
+    --information: var(--blue-100);
+    --information-border: var(--blue-200);
+    --information-foreground: var(--blue-700);
+    --input: var(--zinc-200);
+    --muted: var(--zinc-100);
+    --muted-foreground: var(--zinc-500);
+    --popover: var(--General-white);
+    --popover-foreground: var(--slate-900);
+    --primary: var(--purple-500);
+    --primary-foreground: var(--General-white);
+    --primary-light: var(--purple-100);
+    --ring: var(--zinc-400);
+    --secondary: var(--zinc-100);
+    --secondary-foreground: var(--zinc-900);
+    --success: var(--green-100);
+    --success-border: var(--green-200);
+    --success-foreground: var(--green-700);
+    --table-header: rgba(244, 244, 245, 0.5000);
+    --warning: var(--amber-500);
+    --warning-border: var(--amber-200);
+    --warning-foreground: var(--General-white);
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/styles/base/_palette.scss b/packages/design-system/src/styles/base/_palette.scss
new file mode 100644
index 00000000..f605e617
--- /dev/null
+++ b/packages/design-system/src/styles/base/_palette.scss
@@ -0,0 +1,270 @@
+@layer base {
+  :root {
+  --General-black: 0 0% 0%;
+  --General-white: 0 0% 100%;
+
+  --amber-50: 48 100% 96%;
+  --amber-100: 48 96% 89%;
+  --amber-200: 48 97% 77%;
+  --amber-300: 46 97% 65%;
+  --amber-400: 43 96% 56%;
+  --amber-500: 38 92% 50%;
+  --amber-600: 32 95% 44%;
+  --amber-700: 26 90% 37%;
+  --amber-800: 23 83% 31%;
+  --amber-900: 22 78% 26%;
+  --amber-950: 21 92% 14%;
+
+  --blue-50: 214 100% 97%;
+  --blue-100: 214 95% 93%;
+  --blue-200: 213 97% 87%;
+  --blue-300: 212 96% 78%;
+  --blue-400: 213 94% 68%;
+  --blue-500: 217 91% 60%;
+  --blue-600: 221 83% 53%;
+  --blue-700: 224 76% 48%;
+  --blue-800: 226 71% 40%;
+  --blue-900: 224 64% 33%;
+  --blue-950: 226 57% 21%;
+
+  --cyan-50: 183 100% 96%;
+  --cyan-100: 185 96% 90%;
+  --cyan-200: 186 94% 82%;
+  --cyan-300: 187 92% 69%;
+  --cyan-400: 188 86% 53%;
+  --cyan-500: 189 94% 43%;
+  --cyan-600: 192 91% 36%;
+  --cyan-700: 193 82% 31%;
+  --cyan-800: 194 70% 27%;
+  --cyan-900: 196 64% 24%;
+  --cyan-950: 197 79% 15%;
+
+  --emerald-50: 152 81% 96%;
+  --emerald-100: 149 80% 90%;
+  --emerald-200: 152 76% 80%;
+  --emerald-300: 156 72% 67%;
+  --emerald-400: 158 64% 52%;
+  --emerald-500: 160 84% 39%;
+  --emerald-600: 161 94% 30%;
+  --emerald-700: 163 94% 24%;
+  --emerald-800: 163 88% 20%;
+  --emerald-900: 164 86% 16%;
+  --emerald-950: 166 91% 9%;
+
+  --fuchsia-50: 289 100% 98%;
+  --fuchsia-100: 287 100% 95%;
+  --fuchsia-200: 288 96% 91%;
+  --fuchsia-300: 291 93% 83%;
+  --fuchsia-400: 292 91% 73%;
+  --fuchsia-500: 292 84% 61%;
+  --fuchsia-600: 293 69% 49%;
+  --fuchsia-700: 295 72% 40%;
+  --fuchsia-800: 295 70% 33%;
+  --fuchsia-900: 297 64% 28%;
+  --fuchsia-950: 297 90% 16%;
+
+  --gray-100: 220 14% 96%;
+  --gray-200: 220 13% 91%;
+  --gray-300: 216 12% 84%;
+  --gray-400: 218 11% 65%;
+  --gray-500: 220 9% 46%;
+  --gray-600: 215 14% 34%;
+  --gray-700: 217 19% 27%;
+  --gray-800: 215 28% 17%;
+  --gray-900: 221 39% 11%;
+  --gray-950: 224 71% 4%;
+  --gray-ali: 210 20% 98%;
+
+  --green-50: 138 76% 97%;
+  --green-100: 141 84% 93%;
+  --green-200: 141 79% 85%;
+  --green-300: 142 77% 73%;
+  --green-400: 142 69% 58%;
+  --green-500: 142 71% 45%;
+  --green-600: 142 76% 36%;
+  --green-700: 142 72% 29%;
+  --green-800: 143 64% 24%;
+  --green-900: 144 61% 20%;
+  --green-950: 145 80% 10%;
+
+  --indigo-50: 226 100% 97%;
+  --indigo-100: 226 100% 94%;
+  --indigo-200: 228 96% 89%;
+  --indigo-300: 230 94% 82%;
+  --indigo-400: 234 89% 74%;
+  --indigo-500: 239 84% 67%;
+  --indigo-600: 243 75% 59%;
+  --indigo-700: 245 58% 51%;
+  --indigo-800: 244 55% 41%;
+  --indigo-900: 242 47% 34%;
+  --indigo-950: 244 47% 20%;
+
+  --lime-50: 78 92% 95%;
+  --lime-100: 80 89% 89%;
+  --lime-200: 81 88% 80%;
+  --lime-300: 82 85% 67%;
+  --lime-400: 83 78% 55%;
+  --lime-500: 84 81% 44%;
+  --lime-600: 85 85% 35%;
+  --lime-700: 86 78% 27%;
+  --lime-800: 86 69% 23%;
+  --lime-900: 88 61% 20%;
+  --lime-950: 89 80% 10%;
+
+  --neutral-50: 0 0% 98%;
+  --neutral-100: 0 0% 96%;
+  --neutral-200: 0 0% 90%;
+  --neutral-300: 0 0% 83%;
+  --neutral-400: 0 0% 64%;
+  --neutral-500: 0 0% 45%;
+  --neutral-600: 0 0% 32%;
+  --neutral-700: 0 0% 25%;
+  --neutral-800: 0 0% 15%;
+  --neutral-900: 0 0% 9%;
+  --neutral-950: 0 0% 4%;
+
+  --orange-50: 33 100% 96%;
+  --orange-100: 34 100% 92%;
+  --orange-200: 32 98% 83%;
+  --orange-300: 31 97% 72%;
+  --orange-400: 27 96% 61%;
+  --orange-500: 25 95% 53%;
+  --orange-600: 21 90% 48%;
+  --orange-700: 17 88% 40%;
+  --orange-800: 15 79% 34%;
+  --orange-900: 15 75% 28%;
+  --orange-950: 13 81% 15%;
+
+  --pink-50: 327 73% 97%;
+  --pink-100: 326 78% 95%;
+  --pink-200: 326 85% 90%;
+  --pink-300: 327 87% 82%;
+  --pink-400: 329 86% 70%;
+  --pink-500: 330 81% 60%;
+  --pink-600: 333 71% 51%;
+  --pink-700: 335 78% 42%;
+  --pink-800: 336 74% 35%;
+  --pink-900: 336 69% 30%;
+  --pink-950: 336 84% 17%;
+
+  --purple-50: 251 62% 95%;
+  --purple-100: 250 61% 90%;
+  --purple-200: 250 63% 80%;
+  --purple-300: 250 62% 70%;
+  --purple-400: 250 62% 60%;
+  --purple-500: 250 62% 58%;
+  --purple-600: 250 62% 40%;
+  --purple-700: 250 62% 30%;
+  --purple-800: 250 63% 20%;
+  --purple-900: 250 61% 10%;
+
+  --red-50: 0 86% 97%;
+  --red-100: 0 93% 94%;
+  --red-200: 0 96% 89%;
+  --red-300: 0 94% 82%;
+  --red-400: 0 91% 71%;
+  --red-500: 0 84% 60%;
+  --red-600: 0 72% 51%;
+  --red-700: 0 74% 42%;
+  --red-800: 0 70% 35%;
+  --red-900: 0 63% 31%;
+  --red-950: 0 75% 15%;
+
+  --rose-50: 356 100% 97%;
+  --rose-100: 356 100% 95%;
+  --rose-200: 353 96% 90%;
+  --rose-300: 353 96% 82%;
+  --rose-400: 351 95% 71%;
+  --rose-500: 350 89% 60%;
+  --rose-600: 347 77% 50%;
+  --rose-700: 345 83% 41%;
+  --rose-800: 343 80% 35%;
+  --rose-900: 342 75% 30%;
+  --rose-950: 343 88% 16%;
+
+  --sky-50: 204 100% 97%;
+  --sky-100: 204 94% 94%;
+  --sky-200: 201 94% 86%;
+  --sky-300: 199 95% 74%;
+  --sky-400: 198 93% 60%;
+  --sky-500: 199 89% 48%;
+  --sky-600: 200 98% 39%;
+  --sky-700: 201 96% 32%;
+  --sky-800: 201 90% 27%;
+  --sky-900: 202 80% 24%;
+  --sky-950: 204 80% 16%;
+
+  --slate-50: 210 40% 98%;
+  --slate-100: 210 40% 96%;
+  --slate-200: 214 32% 91%;
+  --slate-300: 213 27% 84%;
+  --slate-400: 215 20% 65%;
+  --slate-500: 215 16% 47%;
+  --slate-600: 215 19% 35%;
+  --slate-700: 215 25% 27%;
+  --slate-800: 217 33% 17%;
+  --slate-900: 222 47% 11%;
+  --slate-950: 229 84% 5%;
+
+  --stone-50: 60 9% 98%;
+  --stone-100: 60 5% 96%;
+  --stone-200: 20 6% 90%;
+  --stone-300: 24 6% 83%;
+  --stone-400: 24 5% 64%;
+  --stone-500: 25 5% 45%;
+  --stone-600: 33 5% 32%;
+  --stone-700: 30 6% 25%;
+  --stone-800: 12 6% 15%;
+  --stone-900: 24 10% 10%;
+  --stone-950: 20 14% 4%;
+
+  --teal-50: 166 76% 97%;
+  --teal-100: 167 85% 89%;
+  --teal-200: 168 84% 78%;
+  --teal-300: 171 77% 64%;
+  --teal-400: 172 66% 50%;
+  --teal-500: 173 80% 40%;
+  --teal-600: 175 84% 32%;
+  --teal-700: 175 77% 26%;
+  --teal-800: 176 69% 22%;
+  --teal-900: 176 61% 19%;
+  --teal-950: 179 84% 10%;
+
+  --violet-50: 250 100% 98%;
+  --violet-100: 251 91% 95%;
+  --violet-200: 251 95% 92%;
+  --violet-300: 252 95% 85%;
+  --violet-400: 255 92% 76%;
+  --violet-500: 258 90% 66%;
+  --violet-600: 262 83% 58%;
+  --violet-700: 263 70% 50%;
+  --violet-800: 263 69% 42%;
+  --violet-900: 264 67% 35%;
+  --violet-950: 261 73% 23%;
+
+  --yellow-50: 55 92% 95%;
+  --yellow-100: 55 97% 88%;
+  --yellow-200: 53 98% 77%;
+  --yellow-300: 50 98% 64%;
+  --yellow-400: 48 96% 53%;
+  --yellow-500: 45 93% 47%;
+  --yellow-600: 41 96% 40%;
+  --yellow-700: 35 92% 33%;
+  --yellow-800: 32 81% 29%;
+  --yellow-900: 28 73% 26%;
+  --yellow-950: 26 83% 14%;
+
+  --zinc-50: 0 0% 98%;
+  --zinc-100: 240 5% 96%;
+  --zinc-200: 240 6% 90%;
+  --zinc-300: 240 5% 84%;
+  --zinc-400: 240 5% 65%;
+  --zinc-500: 240 4% 46%;
+  --zinc-600: 240 5% 34%;
+  --zinc-700: 240 5% 26%;
+  --zinc-800: 240 4% 16%;
+  --zinc-900: 240 6% 10%;
+  --zinc-950: 240 10% 4%;
+
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/styles/main.scss b/packages/design-system/src/styles/main.scss
new file mode 100644
index 00000000..51866d63
--- /dev/null
+++ b/packages/design-system/src/styles/main.scss
@@ -0,0 +1,2 @@
+@use "./base/_colors-dark.scss" as *;
+@use "./base/_colors-light.scss" as *;
\ No newline at end of file
diff --git a/packages/design-system/src/tailwind/colors.ts b/packages/design-system/src/tailwind/colors.ts
new file mode 100644
index 00000000..35619011
--- /dev/null
+++ b/packages/design-system/src/tailwind/colors.ts
@@ -0,0 +1,35 @@
+export const colors = {
+  "accent": "hsl(var(--accent))",
+  "accent-foreground": "hsl(var(--accent-foreground))",
+  "background": "hsl(var(--background))",
+  "border": "hsl(var(--border))",
+  "card": "hsl(var(--card))",
+  "card-foreground": "hsl(var(--card-foreground))",
+  "destructive": "hsl(var(--destructive))",
+  "destructive-foreground": "hsl(var(--destructive-foreground))",
+  "error": "hsl(var(--error))",
+  "error-border": "hsl(var(--error-border))",
+  "error-foreground": "hsl(var(--error-foreground))",
+  "foreground": "hsl(var(--foreground))",
+  "information": "hsl(var(--information))",
+  "information-border": "hsl(var(--information-border))",
+  "information-foreground": "hsl(var(--information-foreground))",
+  "input": "hsl(var(--input))",
+  "muted": "hsl(var(--muted))",
+  "muted-foreground": "hsl(var(--muted-foreground))",
+  "popover": "hsl(var(--popover))",
+  "popover-foreground": "hsl(var(--popover-foreground))",
+  "primary": "hsl(var(--primary))",
+  "primary-foreground": "hsl(var(--primary-foreground))",
+  "primary-light": "hsl(var(--primary-light))",
+  "ring": "hsl(var(--ring))",
+  "secondary": "hsl(var(--secondary))",
+  "secondary-foreground": "hsl(var(--secondary-foreground))",
+  "success": "hsl(var(--success))",
+  "success-border": "hsl(var(--success-border))",
+  "success-foreground": "hsl(var(--success-foreground))",
+  "table-header": "hsl(var(--table-header))",
+  "warning": "hsl(var(--warning))",
+  "warning-border": "hsl(var(--warning-border))",
+  "warning-foreground": "hsl(var(--warning-foreground))",
+};
\ No newline at end of file
diff --git a/packages/design-system/src/tailwind/config.ts b/packages/design-system/src/tailwind/config.ts
new file mode 100644
index 00000000..21fd9148
--- /dev/null
+++ b/packages/design-system/src/tailwind/config.ts
@@ -0,0 +1,10 @@
+import { colors } from "./colors";
+import { palette } from "./palette";
+
+export const tailwindConfig = {
+  theme: {
+    extend: {
+      colors: { ...colors, ...palette },
+    },
+  },
+};
\ No newline at end of file
diff --git a/packages/design-system/src/tailwind/palette.ts b/packages/design-system/src/tailwind/palette.ts
new file mode 100644
index 00000000..f24a06ea
--- /dev/null
+++ b/packages/design-system/src/tailwind/palette.ts
@@ -0,0 +1,291 @@
+export const palette = {
+  "General": {
+    "black": "var(--General-black)",
+    "white": "var(--General-white)",
+  },
+  "amber": {
+    "50": "var(--amber-50)",
+    "100": "var(--amber-100)",
+    "200": "var(--amber-200)",
+    "300": "var(--amber-300)",
+    "400": "var(--amber-400)",
+    "500": "var(--amber-500)",
+    "600": "var(--amber-600)",
+    "700": "var(--amber-700)",
+    "800": "var(--amber-800)",
+    "900": "var(--amber-900)",
+    "950": "var(--amber-950)",
+  },
+  "blue": {
+    "50": "var(--blue-50)",
+    "100": "var(--blue-100)",
+    "200": "var(--blue-200)",
+    "300": "var(--blue-300)",
+    "400": "var(--blue-400)",
+    "500": "var(--blue-500)",
+    "600": "var(--blue-600)",
+    "700": "var(--blue-700)",
+    "800": "var(--blue-800)",
+    "900": "var(--blue-900)",
+    "950": "var(--blue-950)",
+  },
+  "cyan": {
+    "50": "var(--cyan-50)",
+    "100": "var(--cyan-100)",
+    "200": "var(--cyan-200)",
+    "300": "var(--cyan-300)",
+    "400": "var(--cyan-400)",
+    "500": "var(--cyan-500)",
+    "600": "var(--cyan-600)",
+    "700": "var(--cyan-700)",
+    "800": "var(--cyan-800)",
+    "900": "var(--cyan-900)",
+    "950": "var(--cyan-950)",
+  },
+  "emerald": {
+    "50": "var(--emerald-50)",
+    "100": "var(--emerald-100)",
+    "200": "var(--emerald-200)",
+    "300": "var(--emerald-300)",
+    "400": "var(--emerald-400)",
+    "500": "var(--emerald-500)",
+    "600": "var(--emerald-600)",
+    "700": "var(--emerald-700)",
+    "800": "var(--emerald-800)",
+    "900": "var(--emerald-900)",
+    "950": "var(--emerald-950)",
+  },
+  "fuchsia": {
+    "50": "var(--fuchsia-50)",
+    "100": "var(--fuchsia-100)",
+    "200": "var(--fuchsia-200)",
+    "300": "var(--fuchsia-300)",
+    "400": "var(--fuchsia-400)",
+    "500": "var(--fuchsia-500)",
+    "600": "var(--fuchsia-600)",
+    "700": "var(--fuchsia-700)",
+    "800": "var(--fuchsia-800)",
+    "900": "var(--fuchsia-900)",
+    "950": "var(--fuchsia-950)",
+  },
+  "gray": {
+    "100": "var(--gray-100)",
+    "200": "var(--gray-200)",
+    "300": "var(--gray-300)",
+    "400": "var(--gray-400)",
+    "500": "var(--gray-500)",
+    "600": "var(--gray-600)",
+    "700": "var(--gray-700)",
+    "800": "var(--gray-800)",
+    "900": "var(--gray-900)",
+    "950": "var(--gray-950)",
+    "ali": "var(--gray-ali)",
+  },
+  "green": {
+    "50": "var(--green-50)",
+    "100": "var(--green-100)",
+    "200": "var(--green-200)",
+    "300": "var(--green-300)",
+    "400": "var(--green-400)",
+    "500": "var(--green-500)",
+    "600": "var(--green-600)",
+    "700": "var(--green-700)",
+    "800": "var(--green-800)",
+    "900": "var(--green-900)",
+    "950": "var(--green-950)",
+  },
+  "indigo": {
+    "50": "var(--indigo-50)",
+    "100": "var(--indigo-100)",
+    "200": "var(--indigo-200)",
+    "300": "var(--indigo-300)",
+    "400": "var(--indigo-400)",
+    "500": "var(--indigo-500)",
+    "600": "var(--indigo-600)",
+    "700": "var(--indigo-700)",
+    "800": "var(--indigo-800)",
+    "900": "var(--indigo-900)",
+    "950": "var(--indigo-950)",
+  },
+  "lime": {
+    "50": "var(--lime-50)",
+    "100": "var(--lime-100)",
+    "200": "var(--lime-200)",
+    "300": "var(--lime-300)",
+    "400": "var(--lime-400)",
+    "500": "var(--lime-500)",
+    "600": "var(--lime-600)",
+    "700": "var(--lime-700)",
+    "800": "var(--lime-800)",
+    "900": "var(--lime-900)",
+    "950": "var(--lime-950)",
+  },
+  "neutral": {
+    "50": "var(--neutral-50)",
+    "100": "var(--neutral-100)",
+    "200": "var(--neutral-200)",
+    "300": "var(--neutral-300)",
+    "400": "var(--neutral-400)",
+    "500": "var(--neutral-500)",
+    "600": "var(--neutral-600)",
+    "700": "var(--neutral-700)",
+    "800": "var(--neutral-800)",
+    "900": "var(--neutral-900)",
+    "950": "var(--neutral-950)",
+  },
+  "orange": {
+    "50": "var(--orange-50)",
+    "100": "var(--orange-100)",
+    "200": "var(--orange-200)",
+    "300": "var(--orange-300)",
+    "400": "var(--orange-400)",
+    "500": "var(--orange-500)",
+    "600": "var(--orange-600)",
+    "700": "var(--orange-700)",
+    "800": "var(--orange-800)",
+    "900": "var(--orange-900)",
+    "950": "var(--orange-950)",
+  },
+  "pink": {
+    "50": "var(--pink-50)",
+    "100": "var(--pink-100)",
+    "200": "var(--pink-200)",
+    "300": "var(--pink-300)",
+    "400": "var(--pink-400)",
+    "500": "var(--pink-500)",
+    "600": "var(--pink-600)",
+    "700": "var(--pink-700)",
+    "800": "var(--pink-800)",
+    "900": "var(--pink-900)",
+    "950": "var(--pink-950)",
+  },
+  "purple": {
+    "50": "var(--purple-50)",
+    "100": "var(--purple-100)",
+    "200": "var(--purple-200)",
+    "300": "var(--purple-300)",
+    "400": "var(--purple-400)",
+    "500": "var(--purple-500)",
+    "600": "var(--purple-600)",
+    "700": "var(--purple-700)",
+    "800": "var(--purple-800)",
+    "900": "var(--purple-900)",
+  },
+  "red": {
+    "50": "var(--red-50)",
+    "100": "var(--red-100)",
+    "200": "var(--red-200)",
+    "300": "var(--red-300)",
+    "400": "var(--red-400)",
+    "500": "var(--red-500)",
+    "600": "var(--red-600)",
+    "700": "var(--red-700)",
+    "800": "var(--red-800)",
+    "900": "var(--red-900)",
+    "950": "var(--red-950)",
+  },
+  "rose": {
+    "50": "var(--rose-50)",
+    "100": "var(--rose-100)",
+    "200": "var(--rose-200)",
+    "300": "var(--rose-300)",
+    "400": "var(--rose-400)",
+    "500": "var(--rose-500)",
+    "600": "var(--rose-600)",
+    "700": "var(--rose-700)",
+    "800": "var(--rose-800)",
+    "900": "var(--rose-900)",
+    "950": "var(--rose-950)",
+  },
+  "sky": {
+    "50": "var(--sky-50)",
+    "100": "var(--sky-100)",
+    "200": "var(--sky-200)",
+    "300": "var(--sky-300)",
+    "400": "var(--sky-400)",
+    "500": "var(--sky-500)",
+    "600": "var(--sky-600)",
+    "700": "var(--sky-700)",
+    "800": "var(--sky-800)",
+    "900": "var(--sky-900)",
+    "950": "var(--sky-950)",
+  },
+  "slate": {
+    "50": "var(--slate-50)",
+    "100": "var(--slate-100)",
+    "200": "var(--slate-200)",
+    "300": "var(--slate-300)",
+    "400": "var(--slate-400)",
+    "500": "var(--slate-500)",
+    "600": "var(--slate-600)",
+    "700": "var(--slate-700)",
+    "800": "var(--slate-800)",
+    "900": "var(--slate-900)",
+    "950": "var(--slate-950)",
+  },
+  "stone": {
+    "50": "var(--stone-50)",
+    "100": "var(--stone-100)",
+    "200": "var(--stone-200)",
+    "300": "var(--stone-300)",
+    "400": "var(--stone-400)",
+    "500": "var(--stone-500)",
+    "600": "var(--stone-600)",
+    "700": "var(--stone-700)",
+    "800": "var(--stone-800)",
+    "900": "var(--stone-900)",
+    "950": "var(--stone-950)",
+  },
+  "teal": {
+    "50": "var(--teal-50)",
+    "100": "var(--teal-100)",
+    "200": "var(--teal-200)",
+    "300": "var(--teal-300)",
+    "400": "var(--teal-400)",
+    "500": "var(--teal-500)",
+    "600": "var(--teal-600)",
+    "700": "var(--teal-700)",
+    "800": "var(--teal-800)",
+    "900": "var(--teal-900)",
+    "950": "var(--teal-950)",
+  },
+  "violet": {
+    "50": "var(--violet-50)",
+    "100": "var(--violet-100)",
+    "200": "var(--violet-200)",
+    "300": "var(--violet-300)",
+    "400": "var(--violet-400)",
+    "500": "var(--violet-500)",
+    "600": "var(--violet-600)",
+    "700": "var(--violet-700)",
+    "800": "var(--violet-800)",
+    "900": "var(--violet-900)",
+    "950": "var(--violet-950)",
+  },
+  "yellow": {
+    "50": "var(--yellow-50)",
+    "100": "var(--yellow-100)",
+    "200": "var(--yellow-200)",
+    "300": "var(--yellow-300)",
+    "400": "var(--yellow-400)",
+    "500": "var(--yellow-500)",
+    "600": "var(--yellow-600)",
+    "700": "var(--yellow-700)",
+    "800": "var(--yellow-800)",
+    "900": "var(--yellow-900)",
+    "950": "var(--yellow-950)",
+  },
+  "zinc": {
+    "50": "var(--zinc-50)",
+    "100": "var(--zinc-100)",
+    "200": "var(--zinc-200)",
+    "300": "var(--zinc-300)",
+    "400": "var(--zinc-400)",
+    "500": "var(--zinc-500)",
+    "600": "var(--zinc-600)",
+    "700": "var(--zinc-700)",
+    "800": "var(--zinc-800)",
+    "900": "var(--zinc-900)",
+    "950": "var(--zinc-950)",
+  },
+};
\ No newline at end of file
diff --git a/packages/design-system/token_Color_Default.json b/packages/design-system/src/tokens/token_Color_Default.json
similarity index 100%
rename from packages/design-system/token_Color_Default.json
rename to packages/design-system/src/tokens/token_Color_Default.json
diff --git a/packages/design-system/token_Color_Light.json b/packages/design-system/src/tokens/token_Color_Light.json
similarity index 100%
rename from packages/design-system/token_Color_Light.json
rename to packages/design-system/src/tokens/token_Color_Light.json
diff --git a/packages/design-system/token_Icon size_Mode 1.json b/packages/design-system/src/tokens/token_Icon size_Mode 1.json
similarity index 100%
rename from packages/design-system/token_Icon size_Mode 1.json
rename to packages/design-system/src/tokens/token_Icon size_Mode 1.json
diff --git a/packages/design-system/token_Palette _primitive.json b/packages/design-system/src/tokens/token_Palette_primitive.json
similarity index 99%
rename from packages/design-system/token_Palette _primitive.json
rename to packages/design-system/src/tokens/token_Palette_primitive.json
index f616b933..3d5a6da0 100644
--- a/packages/design-system/token_Palette _primitive.json	
+++ b/packages/design-system/src/tokens/token_Palette_primitive.json
@@ -964,7 +964,7 @@
     },
     "900": {
       "$type": "color",
-      "$value": "#713f12"
+      "$value": "#713F12"
     },
     "950": {
       "$type": "color",
diff --git a/packages/design-system/token_Radius_size.json b/packages/design-system/src/tokens/token_Radius_size.json
similarity index 100%
rename from packages/design-system/token_Radius_size.json
rename to packages/design-system/src/tokens/token_Radius_size.json
diff --git a/packages/design-system/token_Spacing_Desktop.json b/packages/design-system/src/tokens/token_Spacing_Desktop.json
similarity index 100%
rename from packages/design-system/token_Spacing_Desktop.json
rename to packages/design-system/src/tokens/token_Spacing_Desktop.json
diff --git a/packages/design-system/token_Typography_Mode 1.json b/packages/design-system/src/tokens/token_Typography_Mode 1.json
similarity index 100%
rename from packages/design-system/token_Typography_Mode 1.json
rename to packages/design-system/src/tokens/token_Typography_Mode 1.json
diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
new file mode 100644
index 00000000..5e3db2b2
--- /dev/null
+++ b/packages/design-system/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/design-system/tsconfig.lint.json b/packages/design-system/tsconfig.lint.json
new file mode 100644
index 00000000..d3bb661a
--- /dev/null
+++ b/packages/design-system/tsconfig.lint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 487db0ca..abff54fa 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,6 +24,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@repo/design-system": "*",
+    "@repo/icons": "*",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
@@ -49,7 +51,7 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
-    "@repo/icons": "*",
+
     "@tabler/icons-react": "^3.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -61,11 +63,13 @@
     "lucide-react": "^0.395.0",
     "next": "14.2.4",
     "next-themes": "^0.3.0",
+    "postcss-scss": "^4.0.9",
     "react-countdown": "^2.3.6",
     "react-day-picker": "8.10.1",
     "react-hook-form": "^7.53.0",
     "react-resizable-panels": "^2.1.1",
     "recharts": "^2.12.7",
+    "sass": "^1.83.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwind-scrollbar-hide": "^2.0.0",
@@ -74,7 +78,7 @@
     "zod": "^3.23.8"
   },
   "exports": {
-    "./globals.css": "./src/globals.css",
+    "./globals.scss": "./src/styles/globals.scss",
     "./postcss.config": "./postcss.config.mjs",
     "./tailwind.config": "./tailwind.config.ts",
     "./lib/*": "./src/lib/*.ts",
diff --git a/packages/ui/postcss.config.mjs b/packages/ui/postcss.config.mjs
index 2ef30fcf..0e2dfbdc 100644
--- a/packages/ui/postcss.config.mjs
+++ b/packages/ui/postcss.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
+  syntax: 'postcss-scss',
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
deleted file mode 100644
index f35ea28f..00000000
--- a/packages/ui/src/globals.css
+++ /dev/null
@@ -1,232 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* primary */
-    --primary-50: #ecefff;
-    --primary-100: #dde2ff;
-    --primary-200: #c2caff;
-    --primary-300: #9ca5ff;
-    --primary-400: #7576ff;
-    --primary-500: #6155ff;
-    --primary-600: #553af5;
-    --primary-700: #4629d9;
-    --primary-800: #3925ae;
-    --primary-900: #322689;
-
-    /* Erorr */
-    --error-50: #fef2f2;
-    --error-100: #fee2e2;
-    --error-200: #fecaca;
-    --error-300: #fca5a5;
-    --error-400: #f87171;
-    --error-500: #ef4444;
-    --error-600: #dc2626;
-    --error-700: #b91c1c;
-    --error-800: #991b1b;
-    --error-900: #7f1d1d;
-
-    /* Warning */
-    --warning-50: #fff4ed;
-    --warning-100: #ffe6d5;
-    --warning-200: #feccaa;
-    --warning-300: #fdac74;
-    --warning-400: #fb8a3c;
-    --warning-500: #f97316;
-    --warning-600: #ea670c;
-    --warning-700: #c2570c;
-    --warning-800: #9a4a12;
-    --warning-900: #7c3d12;
-
-    /* gray */
-    --gray-50: #f9fafb;
-    --gray-100: #f3f4f6;
-    --gray-200: #e5e7eb;
-    --gray-300: #d1d5db;
-    --gray-400: #9ca3af;
-    --gray-500: #6b7280;
-    --gray-600: #4b5563;
-    --gray-700: #374151;
-    --gray-800: #1f2937;
-    --gray-900: #111827;
-
-    /* Success */
-    --success-50: #f0fdf4;
-    --success-100: #f0fdf5;
-    --success-200: #bbf7d1;
-    --success-300: #86efad;
-    --success-400: #4ade80;
-    --success-500: #22c55e;
-    --success-600: #16a34a;
-    --success-700: #15803c;
-    --success-800: #166533;
-    --success-900: #14532b;
-
-    /* Info */
-    --info-50: #f0f9ff;
-    --info-100: #e0f2fe;
-    --info-200: #bae5fd;
-    --info-300: #7dd1fc;
-    --info-400: #38bbf8;
-    --info-500: #0ea2e9;
-    --info-600: #0288d1;
-    --info-700: #0367a1;
-    --info-800: #075785;
-    --info-900: #10C496E;
-
-    --background: 0 0% 100%;
-    --foreground: 240 10% 4%;
-    --card: 240 5% 96%;
-    --card-foreground: 222 47% 11%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222 47% 11%;
-    --primary: 250 62% 58%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 240 5% 96%;
-    --secondary-foreground: 240 6% 10%;
-    --muted: 240 5% 96%;
-    --muted-foreground: 240 4% 46%;
-    --accent: 240 5% 96%;
-    --accent-foreground: 240 6% 10%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 6% 90%;
-    --input: 240 6% 90%;
-    --ring: 240 5% 65%;
-
-    --table-header: 240 5% 96% · 50%;
-    --warning-foreground: 26 90% 37%;
-    --warning: 48 97% 77%;
-    --warning-border: 48 97% 77%;
-    --success-foreground: 142 72% 29%;
-    --success: 145 80% 10%;
-    --success-border: 141 79% 85%;
-
-    --information-foreground: 224 76% 48%;
-    --information: 226 57% 21%;
-    --information-border: 213 97% 87%;
-
-    --error: 0 93% 94%;
-    --error-border: 0 96% 89%;
-    --error-foreground: 0 72% 51%;
-
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --table-header: 240 5% 96% · 50%;
-  }
-
-  .dark {
-    --background: 240 10% 4%;
-    --foreground: 0 0% 98%;
-    --card: 240 6% 10%;
-    --card-foreground: 0 0% 100%;
-    --popover: 240 10% 4%;
-    --popover-foreground: 0 0% 100%;
-    --primary: 250 62% 58%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 4% 16%;
-    --secondary-foreground: 0 0% 100%;
-    --muted: 240 5% 96%;
-    --muted-foreground: 240 5% 65%;
-    --accent: 240 4% 16%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 350 89% 60%;
-    --destructive-foreground: 0 0% 0%;
-    --border: 240 4% 16%;
-    --input: 240 4% 16%;
-    --ring: 240 5% 84%;
-
-    --table-header: 240 4% 16% · 50%;
-    --warning-foreground: 48 96% 89%;
-    --warning: 22 78% 26%;
-    --warning-border: 22 78% 26%;
-    --success-foreground: 138 76% 97%;
-    --success: 141 84% 93%;
-    --success-border: 144 61% 20%;
-
-    --information-foreground: 214 95% 93%;
-    --information: 214 95% 93%;
-    --information-border: 224 64% 33%;
-
-    --error: 350 89% 60%;
-    --error-border: 0 63% 31%;
-    --error-foreground: 0 93% 94%;
-
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --table-header: 240 4% 16% · 50%;
-  }
-
-  .light {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 4%;
-    --card: 240 5% 96%;
-    --card-foreground: 222 47% 11%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222 47% 11%;
-    --primary: 250 62% 58%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 240 5% 96%;
-    --secondary-foreground: 240 6% 10%;
-    --muted: 240 5% 96%;
-    --muted-foreground: 240 4% 46%;
-    --accent: 240 5% 96%;
-    --accent-foreground: 240 6% 10%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 6% 90%;
-    --input: 240 6% 90%;
-    --ring: 240 5% 65%;
-
-    --table-header: 240 5% 96% · 50%;
-    --warning-foreground: 26 90% 37%;
-    --warning: 48 97% 77%;
-    --warning-border: 48 97% 77%;
-    --success-foreground: 142 72% 29%;
-    --success: 145 80% 10%;
-    --success-border: 141 79% 85%;
-    --information-foreground: 224 76% 48%;
-    --information: 226 57% 21%;
-    --information-border: 213 97% 87%;
-    --error: 0 93% 94%;
-    --error-border: 0 96% 89%;
-    --error-foreground: 0 72% 51%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* add the code bellow */
-@layer utilities {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
diff --git a/packages/ui/src/styles/_tailinwd.scss b/packages/ui/src/styles/_tailinwd.scss
new file mode 100644
index 00000000..bd6213e1
--- /dev/null
+++ b/packages/ui/src/styles/_tailinwd.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/packages/ui/src/styles/globals.scss b/packages/ui/src/styles/globals.scss
new file mode 100644
index 00000000..eb4437cb
--- /dev/null
+++ b/packages/ui/src/styles/globals.scss
@@ -0,0 +1,232 @@
+@use "./_tailinwd.scss" as *;
+@use "@repo/design-system/styles" as *;
+
+// TODO: Delete
+// @layer base {
+//   :root {
+//     /* primary */
+//     --primary-50: #ecefff;
+//     --primary-100: #dde2ff;
+//     --primary-200: #c2caff;
+//     --primary-300: #9ca5ff;
+//     --primary-400: #7576ff;
+//     --primary-500: #6155ff;
+//     --primary-600: #553af5;
+//     --primary-700: #4629d9;
+//     --primary-800: #3925ae;
+//     --primary-900: #322689;
+
+//     /* Erorr */
+//     --error-50: #fef2f2;
+//     --error-100: #fee2e2;
+//     --error-200: #fecaca;
+//     --error-300: #fca5a5;
+//     --error-400: #f87171;
+//     --error-500: #ef4444;
+//     --error-600: #dc2626;
+//     --error-700: #b91c1c;
+//     --error-800: #991b1b;
+//     --error-900: #7f1d1d;
+
+//     /* Warning */
+//     --warning-50: #fff4ed;
+//     --warning-100: #ffe6d5;
+//     --warning-200: #feccaa;
+//     --warning-300: #fdac74;
+//     --warning-400: #fb8a3c;
+//     --warning-500: #f97316;
+//     --warning-600: #ea670c;
+//     --warning-700: #c2570c;
+//     --warning-800: #9a4a12;
+//     --warning-900: #7c3d12;
+
+//     /* gray */
+//     --gray-50: #f9fafb;
+//     --gray-100: #f3f4f6;
+//     --gray-200: #e5e7eb;
+//     --gray-300: #d1d5db;
+//     --gray-400: #9ca3af;
+//     --gray-500: #6b7280;
+//     --gray-600: #4b5563;
+//     --gray-700: #374151;
+//     --gray-800: #1f2937;
+//     --gray-900: #111827;
+
+//     /* Success */
+//     --success-50: #f0fdf4;
+//     --success-100: #f0fdf5;
+//     --success-200: #bbf7d1;
+//     --success-300: #86efad;
+//     --success-400: #4ade80;
+//     --success-500: #22c55e;
+//     --success-600: #16a34a;
+//     --success-700: #15803c;
+//     --success-800: #166533;
+//     --success-900: #14532b;
+
+//     /* Info */
+//     --info-50: #f0f9ff;
+//     --info-100: #e0f2fe;
+//     --info-200: #bae5fd;
+//     --info-300: #7dd1fc;
+//     --info-400: #38bbf8;
+//     --info-500: #0ea2e9;
+//     --info-600: #0288d1;
+//     --info-700: #0367a1;
+//     --info-800: #075785;
+//     --info-900: #10C496E;
+
+//     --background: 0 0% 100%;
+//     --foreground: 240 10% 4%;
+//     --card: 240 5% 96%;
+//     --card-foreground: 222 47% 11%;
+//     --popover: 0 0% 100%;
+//     --popover-foreground: 222 47% 11%;
+//     --primary: 250 62% 58%;
+//     --primary-foreground: 210 40% 98%;
+//     --secondary: 240 5% 96%;
+//     --secondary-foreground: 240 6% 10%;
+//     --muted: 240 5% 96%;
+//     --muted-foreground: 240 4% 46%;
+//     --accent: 240 5% 96%;
+//     --accent-foreground: 240 6% 10%;
+//     --destructive: 0 72% 51%;
+//     --destructive-foreground: 0 0% 100%;
+//     --border: 240 6% 90%;
+//     --input: 240 6% 90%;
+//     --ring: 240 5% 65%;
+
+//     --table-header: 240 5% 96% · 50%;
+//     --warning-foreground: 26 90% 37%;
+//     --warning: 48 97% 77%;
+//     --warning-border: 48 97% 77%;
+//     --success-foreground: 142 72% 29%;
+//     --success: 145 80% 10%;
+//     --success-border: 141 79% 85%;
+
+//     --information-foreground: 224 76% 48%;
+//     --information: 226 57% 21%;
+//     --information-border: 213 97% 87%;
+
+//     --error: 0 93% 94%;
+//     --error-border: 0 96% 89%;
+//     --error-foreground: 0 72% 51%;
+
+//     --radius: 0.5rem;
+//     --chart-1: 12 76% 61%;
+//     --chart-2: 173 58% 39%;
+//     --chart-3: 197 37% 24%;
+//     --chart-4: 43 74% 66%;
+//     --chart-5: 27 87% 67%;
+//     --table-header: 240 5% 96% · 50%;
+//   }
+
+//   .dark {
+//     --background: 240 10% 4%;
+//     --foreground: 0 0% 98%;
+//     --card: 240 6% 10%;
+//     --card-foreground: 0 0% 100%;
+//     --popover: 240 10% 4%;
+//     --popover-foreground: 0 0% 100%;
+//     --primary: 250 62% 58%;
+//     --primary-foreground: 0 0% 100%;
+//     --secondary: 240 4% 16%;
+//     --secondary-foreground: 0 0% 100%;
+//     --muted: 240 5% 96%;
+//     --muted-foreground: 240 5% 65%;
+//     --accent: 240 4% 16%;
+//     --accent-foreground: 0 0% 100%;
+//     --destructive: 350 89% 60%;
+//     --destructive-foreground: 0 0% 0%;
+//     --border: 240 4% 16%;
+//     --input: 240 4% 16%;
+//     --ring: 240 5% 84%;
+
+//     --table-header: 240 4% 16% · 50%;
+//     --warning-foreground: 48 96% 89%;
+//     --warning: 22 78% 26%;
+//     --warning-border: 22 78% 26%;
+//     --success-foreground: 138 76% 97%;
+//     --success: 141 84% 93%;
+//     --success-border: 144 61% 20%;
+
+//     --information-foreground: 214 95% 93%;
+//     --information: 214 95% 93%;
+//     --information-border: 224 64% 33%;
+
+//     --error: 350 89% 60%;
+//     --error-border: 0 63% 31%;
+//     --error-foreground: 0 93% 94%;
+
+//     --chart-1: 220 70% 50%;
+//     --chart-2: 160 60% 45%;
+//     --chart-3: 30 80% 55%;
+//     --chart-4: 280 65% 60%;
+//     --chart-5: 340 75% 55%;
+//     --table-header: 240 4% 16% · 50%;
+//   }
+
+//   .light {
+//     --background: 0 0% 100%;
+//     --foreground: 240 10% 4%;
+//     --card: 240 5% 96%;
+//     --card-foreground: 222 47% 11%;
+//     --popover: 0 0% 100%;
+//     --popover-foreground: 222 47% 11%;
+//     --primary: 250 62% 58%;
+//     --primary-foreground: 210 40% 98%;
+//     --secondary: 240 5% 96%;
+//     --secondary-foreground: 240 6% 10%;
+//     --muted: 240 5% 96%;
+//     --muted-foreground: 240 4% 46%;
+//     --accent: 240 5% 96%;
+//     --accent-foreground: 240 6% 10%;
+//     --destructive: 0 72% 51%;
+//     --destructive-foreground: 0 0% 100%;
+//     --border: 240 6% 90%;
+//     --input: 240 6% 90%;
+//     --ring: 240 5% 65%;
+
+//     --table-header: 240 5% 96% · 50%;
+//     --warning-foreground: 26 90% 37%;
+//     --warning: 48 97% 77%;
+//     --warning-border: 48 97% 77%;
+//     --success-foreground: 142 72% 29%;
+//     --success: 145 80% 10%;
+//     --success-border: 141 79% 85%;
+//     --information-foreground: 224 76% 48%;
+//     --information: 226 57% 21%;
+//     --information-border: 213 97% 87%;
+//     --error: 0 93% 94%;
+//     --error-border: 0 96% 89%;
+//     --error-foreground: 0 72% 51%;
+//     --radius: 0.5rem;
+//     --chart-1: 12 76% 61%;
+//     --chart-2: 173 58% 39%;
+//     --chart-3: 197 37% 24%;
+//     --chart-4: 43 74% 66%;
+//     --chart-5: 27 87% 67%;
+//   }
+// }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* add the code bellow */
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index dcda1216..ea036791 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -1,7 +1,9 @@
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
+import { tailwindConfig } from "@repo/design-system/tailwind";
 
 const config = {
+  presets: [tailwindConfig],
   darkMode: ["class"],
   content: [
     "./pages/**/*.{ts,tsx}",
@@ -21,142 +23,7 @@ const config = {
     },
     extend: {
       boxShadow: {
-        'box': '0px 0px 38px 0px rgba(103, 81, 214, 0.27)',
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        // primary: {
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          50: "var(--primary-50)",
-          100: "var(--primary-100)",
-          200: "var(--primary-200)",
-          300: "var(--primary-300)",
-          400: "var(--primary-400)",
-          500: "var(--primary-500)",
-          600: "var(--primary-600)",
-          700: "var(--primary-700)",
-          800: "var(--primary-800)",
-          900: "var(--primary-900)",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        // error:
-        error: {
-          DEFAULT: "hsl(var(--error))",
-          50: "var(--error-50)",
-          100: "var(--error-100)",
-          200: "var(--error-200)",
-          300: "var(--error-300)",
-          400: "var(--error-400)",
-          500: "var(--error-500)",
-          600: "var(--error-600)",
-          700: "var(--error-700)",
-          800: "var(--error-800)",
-          900: "var(--error-900)",
-          foreground: "hsl(var(--error-foreground))",
-          border : "hsl(var(--error-border))",
-        },
-        // warning
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          50: "var(--warning-50)",
-          100: "var(--warning-100)",
-          200: "var(--warning-200)",
-          300: "var(--warning-300)",
-          400: "var(--warning-400)",
-          500: "var(--warning-500)",
-          600: "var(--warning-600)",
-          700: "var(--warning-700)",
-          800: "var(--warning-800)",
-          900: "var(--warning-900)",
-          foreground: "hsl(var(--warning-foreground))",
-          border : "hsl(var(--warning-border))",
-        },
-        // gray
-        Gray: {
-          DEFAULT: "hsl(var(--gray))",
-          50: "var(--gray-50)",
-          100: "var(--gray-100)",
-          200: "var(--gray-200)",
-          300: "var(--gray-300)",
-          400: "var(--gray-400)",
-          500: "var(--gray-500)",
-          600: "var(--gray-600)",
-          700: "var(--gray-700)",
-          800: "var(--gray-800)",
-          900: "var(--gray-900)",
-          foreground: "hsl(var(--gray-foreground))",
-        },
-        black: {
-          DEFAULT: "hsl(var(--black))",
-          300: "var(--black-300)",
-          400: "var(--black-400)",
-        },
-        // success
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          50: "var(--success-50)",
-          100: "var(--success-100)",
-          200: "var(--success-200)",
-          300: "var(--success-300)",
-          400: "var(--success-400)",
-          500: "var(--success-500)",
-          600: "var(--success-600)",
-          700: "var(--success-700)",
-          800: "var(--success-800)",
-          900: "var(--success-900)",
-          foreground: "hsl(var(--success-foreground))",
-          border: "hsl(var(--success-border))",
-        },
-        // info
-        info: {
-          DEFAULT: "hsl(var(--info))",
-          50: "var(--info-50)",
-          100: "var(--info-100)",
-          200: "var(--info-200)",
-          300: "var(--info-300)",
-          400: "var(--info-400)",
-          500: "var(--info-500)",
-          600: "var(--info-600)",
-          700: "var(--info-700)",
-          800: "var(--info-800)",
-          900: "var(--info-900)",
-          foreground: "hsl(var(--info-foreground))",
-        },
-
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        information :{
-          DEFAULT: "hsl(var(--information))",
-          foreground: "hsl(var(--information-foreground))",
-          border: "hsl(var(--information-border))",
-        },
+        box: "0px 0px 38px 0px rgba(103, 81, 214, 0.27)",
       },
       borderRadius: {
         lg: "8px",
@@ -184,10 +51,10 @@ const config = {
       },
     },
   },
-  plugins: [tailwindcssAnimate,
-    require("tailwind-scrollbar"), 
-    require('tailwind-scrollbar-hide'),
-
+  plugins: [
+    tailwindcssAnimate,
+    require("tailwind-scrollbar"),
+    require("tailwind-scrollbar-hide"),
   ],
 } satisfies Config;