diff --git a/.gitignore b/.gitignore
index eec7aae..82b9c02 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,4 @@ dist
 cli/node_modules
 cli/.env
 cli/src
+cli/tailwind.config.ts
diff --git a/cli/commands/init.ts b/cli/commands/init.ts
index 71153f3..b6304c0 100644
--- a/cli/commands/init.ts
+++ b/cli/commands/init.ts
@@ -34,7 +34,6 @@ export const init = new Command()
         // Print ASCII
         console.log(chalk.dim(ChalkASCII))
 
-        logger.warn("Make sure your project meets all prerequisites.")
         logger.warn("Make sure you have committed your changes before proceeding.")
         logger.warn("")
 
@@ -62,8 +61,8 @@ export const init = new Command()
             {
                 type: "text",
                 name: "tailwindConfig",
-                message: `Where is ${chalk.cyanBright("tailwind.config.js")} located?`,
-                initial: "./tailwind.config.js",
+                message: `Where is ${chalk.cyanBright("tailwind.config.ts")} located?`,
+                initial: "./tailwind.config.ts",
             },
             {
                 type: "text",
@@ -100,7 +99,7 @@ export const init = new Command()
 
         // Update tailwind config
         const tailwindDestination = config.tailwindConfig
-        const tailwindSpinner = ora(`Updating ${chalk.italic(`tailwind.config.js`)}...`).start()
+        const tailwindSpinner = ora(`Updating ${chalk.italic(`tailwind.config.ts`)}...`).start()
         await fs.writeFile(tailwindDestination, TAILWIND_CONFIG(projectInfo?.srcDir), "utf8")
         tailwindSpinner.succeed()
 
diff --git a/cli/helpers/components.ts b/cli/helpers/components.ts
index a19e0e0..35d8cbf 100644
--- a/cli/helpers/components.ts
+++ b/cli/helpers/components.ts
@@ -33,7 +33,6 @@ export type Component = z.infer<typeof componentSchema>
 export async function getAvailableComponents(): Promise<Component[]> {
     try {
         const res = await fetch(`${URL}/api/bank`, { agent })
-        console.log(URL)
         return await res.json() as Component[]
     }
     catch (error) {
diff --git a/cli/package.json b/cli/package.json
index 1c90785..4d9c1c5 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rahimstack/chalk-ui",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "A collection of React and Tailwind components for modern SaaS applications.",
   "publishConfig": {
     "access": "public"
@@ -25,6 +25,7 @@
   "type": "module",
   "exports": "./dist/index.js",
   "bin": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
diff --git a/cli/templates/files.ts b/cli/templates/files.ts
index 884e1d2..0e83aec 100644
--- a/cli/templates/files.ts
+++ b/cli/templates/files.ts
@@ -6,8 +6,8 @@ export const STYLES = `@tailwind base;
     :root {
         --radius: 0.375rem;
 
-        --text-color: theme('colors.gray.800');
-        --background-color: white;
+        --foreground: theme('colors.gray.800');
+        --background: white;
 
         --brand: theme('colors.brand.500');
         --slate: theme('colors.slate.500');
@@ -33,9 +33,6 @@ export const STYLES = `@tailwind base;
         --pink: theme('colors.pink.500');
         --rose: theme('colors.rose.500');
 
-        --control: theme('colors.gray.300');
-        --control-highlight: theme('colors.gray.400');
-
         --border: theme('colors.gray.200');
         --ring: theme('colors.brand.500');
 
@@ -43,56 +40,59 @@ export const STYLES = `@tailwind base;
         --muted-highlight: theme('colors.gray.700');
 
         --paper: theme('colors.white');
-        --highlight: rgba(0, 0, 0, 0.04);
+        --subtle: rgba(0, 0, 0, 0.04);
+        --subtle-highlight: rgba(0, 0, 0, 0.06);
 
     }
 
-    .dark {
-        --text-color: theme('colors.gray.200');
-        --background-color: #121212;
-
-        --brand: theme('colors.brand.300');
-        --slate: theme('colors.slate.300');
-        --gray: theme('colors.gray.300');
-        --zinc: theme('colors.zinc.300');
-        --neutral: theme('colors.neutral.300');
-        --stone: theme('colors.stone.300');
-        --red: theme('colors.red.300');
-        --orange: theme('colors.orange.300');
-        --amber: theme('colors.amber.300');
-        --yellow: theme('colors.yellow.300');
-        --lime: theme('colors.lime.300');
-        --green: theme('colors.green.300');
-        --emerald: theme('colors.emerald.300');
-        --teal: theme('colors.teal.300');
-        --cyan: theme('colors.cyan.300');
-        --sky: theme('colors.sky.300');
-        --blue: theme('colors.blue.300');
-        --indigo: theme('colors.indigo.300');
-        --violet: theme('colors.violet.300');
-        --purple: theme('colors.purple.300');
-        --fuchsia: theme('colors.fuchsia.300');
-        --pink: theme('colors.pink.300');
-        --rose: theme('colors.rose.300');
-
-        --control: theme('colors.gray.700');
-        --control-highlight: theme('colors.gray.600');
-
-        --border: theme('colors.gray.700');
+    .dark, [data-mode="dark"] {
+        --foreground: theme('colors.gray.200');
+        --background: #0c0c0c;
+
+        --brand: theme('colors.brand.400');
+        --slate: theme('colors.slate.400');
+        --gray: theme('colors.gray.400');
+        --zinc: theme('colors.zinc.400');
+        --neutral: theme('colors.neutral.400');
+        --stone: theme('colors.stone.400');
+        --red: theme('colors.red.400');
+        --orange: theme('colors.orange.400');
+        --amber: theme('colors.amber.400');
+        --yellow: theme('colors.yellow.400');
+        --lime: theme('colors.lime.400');
+        --green: theme('colors.green.400');
+        --emerald: theme('colors.emerald.400');
+        --teal: theme('colors.teal.400');
+        --cyan: theme('colors.cyan.400');
+        --sky: theme('colors.sky.400');
+        --blue: theme('colors.blue.400');
+        --indigo: theme('colors.indigo.400');
+        --violet: theme('colors.violet.400');
+        --purple: theme('colors.purple.400');
+        --fuchsia: theme('colors.fuchsia.400');
+        --pink: theme('colors.pink.400');
+        --rose: theme('colors.rose.400');
+
+        --border: #313131;
         --ring: theme('colors.brand.200');
 
         --muted: theme('colors.gray.400');
         --muted-highlight: theme('colors.gray.300');
 
         --paper: theme('colors.gray.900');
-        --highlight: rgba(255, 255, 255, 0.06);
+        --subtle: rgba(255, 255, 255, 0.06);
+        --subtle-highlight: rgba(255, 255, 255, 0.08);
 
     }
 }
 
 html {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+html * {
+    border-color: var(--border);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -108,86 +108,141 @@ h2 {
 }
 
 h3 {
-    @apply scroll-m-20 text-2xl font-bold tracking-tight
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight
 }
 
 h4 {
-    @apply scroll-m-20 text-xl font-bold tracking-tight
+    @apply scroll-m-20 text-xl font-semibold tracking-tight
 }
 
 h5 {
-    @apply scroll-m-20 text-lg font-bold tracking-tight
+    @apply scroll-m-20 text-lg font-semibold tracking-tight
+}
+
+h6 {
+    @apply scroll-m-20 text-base font-semibold tracking-tight
 }`
 
 // ------------------------------------------------------------------------------------------------- //
 // ------------------------------------------------------------------------------------------------- //
 // ------------------------------------------------------------------------------------------------- //
 
-export const TAILWIND_CONFIG = (srcDir: boolean) => `const {colors} = require("tailwindcss/colors")
-const {fontFamily} = require("tailwindcss/defaultTheme")
+export const TAILWIND_CONFIG = (srcDir: boolean) => `import type { Config } from "tailwindcss"
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: ['class'],
+const config: Config = {
+    darkMode: "class",
     content: [
-        '${srcDir ? "./src/" : "./"}pages/**/*.{ts,tsx}',
-        '${srcDir ? "./src/" : "./"}components/**/*.{ts,tsx}',
-        '${srcDir ? "./src/" : "./"}app/**/*.{ts,tsx}',
+        "./index.html",
+        "${srcDir ? "./src/" : "./"}app/**/*.{ts,tsx,mdx}",
+        "${srcDir ? "./src/" : "./"}pages/**/*.{ts,tsx,mdx}",
+        "${srcDir ? "./src/" : "./"}components/**/*.{ts,tsx,mdx}",
     ],
     theme: {
         container: {
             center: true,
             padding: {
-                DEFAULT: '1rem',
-                sm: '2rem',
-                lg: '4rem',
-                xl: '5rem',
-                '2xl': '6rem',
+                DEFAULT: "1rem",
+                sm: "2rem",
+                lg: "4rem",
+                xl: "5rem",
+                "2xl": "6rem",
+            },
+            screens: {
+                "2xl": "1400px",
             },
         },
         data: {
-            checked: 'checked',
-            selected: 'selected',
-            disabled: 'disabled',
-            highlighted: 'highlighted',
+            checked: "checked",
+            selected: "selected",
+            disabled: "disabled",
+            highlighted: "highlighted",
         },
         extend: {
-            boxShadow: {
-                'md': '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+            animationDuration: {
+                DEFAULT: "0.25s",
             },
-            fontFamily: {
-                sans: ["var(--font-inter)", ...fontFamily.sans],
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+                "slide-down": {
+                    from: { transform: "translateY(-1rem)", opacity: "0" },
+                    to: { transform: "translateY(0)", opacity: "1" },
+                },
+                "slide-up": {
+                    from: { transform: "translateY(0)", opacity: "1" },
+                    to: { transform: "translateY(-1rem)", opacity: "0" },
+                },
+                "indeterminate-progress": {
+                    "0%": { transform: " translateX(0) scaleX(0)" },
+                    "40%": { transform: "translateX(0) scaleX(0.4)" },
+                    "100%": { transform: "translateX(100%) scaleX(0.5)" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.15s linear",
+                "accordion-up": "accordion-up 0.15s linear",
+                "slide-down": "slide-down 0.15s ease-in-out",
+                "slide-up": "slide-up 0.15s ease-in-out",
+                "indeterminate-progress": "indeterminate-progress 1s infinite ease-out",
+            },
+            transformOrigin: {
+                "left-right": "0% 100%",
+            },
+            boxShadow: {
+                "md": "0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)",
             },
             colors: {
-                ...colors,
                 brand: {
-                    50: '#f2f0ff',
-                    100: '#eeebff',
-                    200: '#d4d0ff',
-                    300: '#c7c2ff',
-                    400: '#9f92ff',
-                    500: '#6152df',
-                    600: '#5243cb',
-                    700: '#3f2eb2',
-                    800: '#312887',
-                    900: "#231c6b",
-                    DEFAULT: "#6152df",
+                    50: "#fff5ec",
+                    100: "#ffe9d4",
+                    200: "#ffcea8",
+                    300: "#ffac70",
+                    400: "#ff7d36",
+                    500: "#ff5a0f",
+                    600: "#f03e06",
+                    700: "#c72c07",
+                    800: "#a9260f",
+                    900: "#7f200f",
+                    950: "#450d05",
+                    DEFAULT: "#ff5a0f",
                 },
                 gray: {
-                    50: '#FAFAFA',
-                    100: '#F5F5F5',
-                    200: '#E5E5E5',
-                    300: '#D4D4D4',
-                    400: '#A3A3A3',
-                    500: '#737373',
-                    600: '#525252',
-                    700: '#404040',
-                    800: '#262626',
+                    50: "#FAFAFA",
+                    100: "#F5F5F5",
+                    200: "#E5E5E5",
+                    300: "#D4D4D4",
+                    400: "#A3A3A3",
+                    500: "#737373",
+                    600: "#525252",
+                    700: "#404040",
+                    800: "#262626",
                     900: "#171717",
+                    950: "#101010",
                     DEFAULT: "#737373",
                 },
+                green: {
+                    50: "#e6f7ea",
+                    100: "#cfead6",
+                    200: "#7bd0a7",
+                    300: "#68b695",
+                    400: "#57a181",
+                    500: "#258c60",
+                    600: "#1a6444",
+                    700: "#154f37",
+                    800: "#103b29",
+                    900: "#0a2318",
+                    950: "#05130d",
+                    DEFAULT: "#258c60",
+                },
             },
         },
     },
-    plugins: [require("@tailwindcss/typography"), require('@tailwindcss/forms'), require('@headlessui/tailwindcss')],
-}`
+    plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms"), require("tailwind-scrollbar-hide"), require("tailwindcss-animate")],
+}
+export default config`
diff --git a/package-lock.json b/package-lock.json
index 1af508f..0539dca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,10 @@
 {
-  "name": "chalk-ui",
+  "name": "chalkui",
   "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "chalk-ui",
-      "version": "0.7.0",
       "dependencies": {
         "@codesandbox/sandpack-react": "^2.11.2",
         "@faker-js/faker": "^8.2.0",
diff --git a/package.json b/package.json
index a6e640c..1a3f4c1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,4 @@
 {
-  "name": "chalk-ui",
-  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 79601e2..0beb806 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -47,7 +47,6 @@
 
     .dark, [data-mode="dark"] {
         --foreground: theme('colors.gray.200');
-        /*--background: #121212;*/
         --background: #0c0c0c;
 
         --brand: theme('colors.brand.400');
@@ -74,7 +73,6 @@
         --pink: theme('colors.pink.400');
         --rose: theme('colors.rose.400');
 
-        /*--border: theme('colors.gray.700');*/
         --border: #313131;
         --ring: theme('colors.brand.200');
 
@@ -110,15 +108,15 @@ h2 {
 }
 
 h3 {
-    @apply scroll-m-20 text-2xl font-bold tracking-tight
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight
 }
 
 h4 {
-    @apply scroll-m-20 text-xl font-bold tracking-tight
+    @apply scroll-m-20 text-xl font-semibold tracking-tight
 }
 
 h5 {
-    @apply scroll-m-20 text-lg font-bold tracking-tight
+    @apply scroll-m-20 text-lg font-semibold tracking-tight
 }
 
 h6 {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 65243f3..c82f8b6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -71,20 +71,6 @@ const config: Config = {
                 "md": "0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)",
             },
             colors: {
-                // brand: {
-                //     50: "#f2f0ff",
-                //     100: "#eeebff",
-                //     200: "#d4d0ff",
-                //     300: "#c7c2ff",
-                //     400: "#9f92ff",
-                //     500: "#6152df",
-                //     600: "#5243cb",
-                //     700: "#3f2eb2",
-                //     800: "#312887",
-                //     900: "#231c6b",
-                //     950: "#1c155e",
-                //     DEFAULT: "#6152df",
-                // },
                 brand: {
                     50: "#fff5ec",
                     100: "#ffe9d4",
diff --git a/vercel.json b/vercel.json
index ade7b7f..a4812e0 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,7 +2,7 @@
   "git": {
     "deploymentEnabled": {
       "update": false,
-      "main": true
+      "main": false
     }
   }
 }