diff --git a/components.json b/components.json
new file mode 100644
index 0000000..e07b708
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib/utils/utils"
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3677dd1..acaef7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,10 @@
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@sendgrid/mail": "^7.7.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
         "framer-motion": "^6.5.1",
+        "lucide-react": "^0.279.0",
         "next": "^13.2.4",
         "next-sitemap": "^3.1.29",
         "posthog-js": "^1.33.0",
@@ -19,6 +22,8 @@
         "react-twitter-embed": "^4.0.4",
         "sharp": "^0.32.0",
         "storybook-addon-next": "^1.8.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7",
         "zod": "^3.21.4"
       },
       "devDependencies": {
@@ -3231,6 +3236,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@design-systems/utils/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@devtools-ds/object-inspector": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@devtools-ds/object-inspector/-/object-inspector-1.2.0.tgz",
@@ -3247,6 +3261,15 @@
         "react": ">= 16.8.6"
       }
     },
+    "node_modules/@devtools-ds/object-inspector/node_modules/clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@devtools-ds/object-parser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@devtools-ds/object-parser/-/object-parser-1.2.0.tgz",
@@ -3288,6 +3311,15 @@
         "regenerator-runtime": "^0.13.2"
       }
     },
+    "node_modules/@devtools-ds/themes/node_modules/clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@devtools-ds/tree": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@devtools-ds/tree/-/tree-1.2.0.tgz",
@@ -3302,6 +3334,15 @@
         "react": ">= 16.8.6"
       }
     },
+    "node_modules/@devtools-ds/tree/node_modules/clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -14335,6 +14376,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -14492,10 +14544,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
-      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
-      "dev": true,
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
       "engines": {
         "node": ">=6"
       }
@@ -21674,6 +21725,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.279.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.279.0.tgz",
+      "integrity": "sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -27460,6 +27519,15 @@
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
       "dev": true
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -27500,6 +27568,14 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -32177,6 +32253,12 @@
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
+        },
+        "clsx": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+          "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+          "dev": true
         }
       }
     },
@@ -32191,6 +32273,14 @@
         "@devtools-ds/themes": "^1.2.0",
         "@devtools-ds/tree": "^1.2.0",
         "clsx": "1.1.0"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+          "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+          "dev": true
+        }
       }
     },
     "@devtools-ds/object-parser": {
@@ -32232,6 +32322,12 @@
           "requires": {
             "regenerator-runtime": "^0.13.2"
           }
+        },
+        "clsx": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+          "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+          "dev": true
         }
       }
     },
@@ -32244,6 +32340,14 @@
         "@babel/runtime": "7.7.2",
         "@devtools-ds/themes": "^1.2.0",
         "clsx": "1.1.0"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+          "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
+          "dev": true
+        }
       }
     },
     "@discoveryjs/json-ext": {
@@ -40638,6 +40742,14 @@
         }
       }
     },
+    "class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "requires": {
+        "clsx": "2.0.0"
+      }
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -40750,10 +40862,9 @@
       }
     },
     "clsx": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
-      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
     },
     "collapse-white-space": {
       "version": "1.0.6",
@@ -46272,6 +46383,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "lucide-react": {
+      "version": "0.279.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.279.0.tgz",
+      "integrity": "sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw=="
+    },
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -50653,6 +50769,11 @@
         }
       }
     },
+    "tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ=="
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -50683,6 +50804,11 @@
         "resolve": "^1.22.1"
       }
     },
+    "tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
diff --git a/package.json b/package.json
index c238043..24144b7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,10 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@sendgrid/mail": "^7.7.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "framer-motion": "^6.5.1",
+    "lucide-react": "^0.279.0",
     "next": "^13.2.4",
     "next-sitemap": "^3.1.29",
     "posthog-js": "^1.33.0",
@@ -32,6 +35,8 @@
     "react-twitter-embed": "^4.0.4",
     "sharp": "^0.32.0",
     "storybook-addon-next": "^1.8.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.21.4"
   },
   "devDependencies": {
diff --git a/src/lib/utils/utils.ts b/src/lib/utils/utils.ts
new file mode 100644
index 0000000..ec79801
--- /dev/null
+++ b/src/lib/utils/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 59ce007..ae2ae4e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,40 +1,36 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class"],
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx}",
-    "./src/components/**/*.{js,ts,jsx,tsx}"
-  ],
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
   theme: {
-    extend: {
-      spacing: {
-        "max-screen-size": "1920px"
-      },
-      gridTemplateColumns: {
-        autodesktop: "repeat(auto-fit, minmax(410px, 1fr))",
-        automobile: "repeat(auto-fit, minmax(300px, 1fr))"
-      },
+    container: {
+      center: true,
+      padding: "2rem",
       screens: {
-        xs: "425px",
-        // => @media (min-width: 425px) { ... }
-        "2xl": "1440px",
-        // => @media (min-width: 1440px) { ... }
-        "3xl": "1920px",
-        // => @media (min-width: 1920px) { ... }
-        "pass-max-screen": "1921px"
-        // => @media (min-width: 1921px) { ... }
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      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 },
+        },
       },
-      fontFamily: {
-        inter: ["Inter", "sans-serif"]
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
-      colors: {
-        primary: "#165C9C",
-        secondary: "#101828",
-        gray: "#667085",
-        dark: "#000000",
-        altDark: "#222222",
-        altWhite: "#F0F0F0"
-      }
-    }
+    },
   },
-  plugins: []
-};
+  plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file