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/components/atoms/button/button.tsx b/src/components/atoms/button/button.tsx
index 7e28550..821b240 100644
--- a/src/components/atoms/button/button.tsx
+++ b/src/components/atoms/button/button.tsx
@@ -1,14 +1,37 @@
-import { Button as ChakraButtonComponent } from "@chakra-ui/react";
+import React from "react";
 
-interface ButtonProps
-  extends React.ComponentProps<typeof ChakraButtonComponent> {
-  //Add additional prop definitions here
+// Define a type for the possible "as" values
+type AsType = 'a' | 'button';
+
+// Create a union type for the allowed props based on "as" value
+type ElementProps = AsType extends 'a'
+  ? React.AnchorHTMLAttributes<HTMLAnchorElement>
+  : React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+interface ButtonProps extends ElementProps {
+  as?: AsType;
+  href?: string;
 }
 
-const DefaultButton = (props: ButtonProps) => {
-  return (
-    <ChakraButtonComponent {...props}>{props.children}</ChakraButtonComponent>
-  );
+const DefaultButton = ({as = "button", children, className = "", ...props}: ButtonProps) => {
+  if( as === "a"){
+    const {...anchorProps} = props as React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    return (
+      <a {...anchorProps} className={`${className} ` +
+      `inline-flex appearance-none items-center justify-center relative whitespace-nowrap align-middle outline outline-2 outline-transparent outline-offset-2 leading-tight font-semibold transition duration-200 h-10 min-w-[2.5rem] text-base px-4 py-3`}>
+        {children}
+      </a>
+    )
+  }
+  else{
+    const {...buttonProps} = props as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    return (
+      <button {...buttonProps} className={`${className} ` +
+      `inline-flex appearance-none items-center justify-center relative whitespace-nowrap align-middle outline outline-2 outline-transparent outline-offset-2 leading-tight font-semibold transition duration-200 h-10 min-w-[2.5rem] text-base px-4 py-3`}>
+        {children}
+      </button>
+    )
+  }
 };
 
 export default DefaultButton;
diff --git a/src/components/atoms/nav-link/nav-link.tsx b/src/components/atoms/nav-link/nav-link.tsx
index e6d6360..728d8c5 100644
--- a/src/components/atoms/nav-link/nav-link.tsx
+++ b/src/components/atoms/nav-link/nav-link.tsx
@@ -14,19 +14,15 @@ const NavLink = ({ url, text, activeLink, button, externalLink, footer = false }
     >
       {footer === false && button === true ?
         <DefaultButton
-          className=""
-          variant="solid"
-          size="md"
-          colorScheme="facebook"
+          className="text-white rounded-md bg-[#385898] hover:bg-[#314E89] active:bg-[#29487D] focus-visible:shadow-[0_0_0_3px_rgb(66,153,225,0.6)]"
         >
-          <DefaultText className="text-white" fontSize="lg" as="span">
+          <DefaultText className="text-white text-lg leading-[21.6px]" as="span">
             {text}
           </DefaultText>
         </DefaultButton>
       : 
         <DefaultText
-          className={`${activeLink ? "border-b-2 border-blue-500 text-blue-500" : ""}`}
-          fontSize="lg"
+          className={`${activeLink ? "border-b-2 border-blue-500 text-blue-500" : ""} text-lg`}
           as="span">
           {text}
         </DefaultText>
diff --git a/src/components/atoms/spinner/spinner.tsx b/src/components/atoms/spinner/spinner.tsx
index 2fb0a0b..017358e 100644
--- a/src/components/atoms/spinner/spinner.tsx
+++ b/src/components/atoms/spinner/spinner.tsx
@@ -1,20 +1,26 @@
-import { Spinner as ChakraSpinnerComponent } from "@chakra-ui/react";
 import React from "react";
 
-interface SpinnerProps extends React.ComponentProps<typeof ChakraSpinnerComponent> {
+interface SpinnerProps extends React.DetailedHTMLProps<React.SVGProps<SVGSVGElement>, SVGSVGElement> {
   //Add additional prop definitions here
+  spinnerColor?: RGB | RGBA | HEX,
+  bgColor?: RGB | RGBA | HEX,
+  bgOpacity?: number
 }
 
-const Spinner = (props: SpinnerProps) => {
+type RGB = `rgb(${number}, ${number}, ${number})`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HEX = `#${string}`;
+
+const Spinner = ({ className = "", spinnerColor = "#3182ce", bgColor = "#E2E8F0", bgOpacity = .6, ...props }: SpinnerProps) => {
   return (
-    <ChakraSpinnerComponent
-      {...props}
-      thickness='4px'
-      speed='0.65s'
-      emptyColor='gray.200'
-      color='blue.500'
-      size='xl'
-    />
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 38 38" stroke={spinnerColor} className={`${className} animate-spin`} {...props}>
+      <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+          <circle stroke-opacity={bgOpacity} cx="18" cy="18" r="18" stroke={bgColor} />
+          <path d="M36 18c0-9.94-8.06-18-18-18" />
+        </g>
+      </g>
+    </svg>
   );
 };
 
diff --git a/src/components/atoms/text-input/text-input.tsx b/src/components/atoms/text-input/text-input.tsx
index d8e2097..2a100e8 100644
--- a/src/components/atoms/text-input/text-input.tsx
+++ b/src/components/atoms/text-input/text-input.tsx
@@ -1,19 +1,15 @@
-import { Input as ChakraInputComponent } from "@chakra-ui/react";
 import React from "react";
+import { Input as ChakraInputComponent } from "@chakra-ui/react";
 
-interface InputProps extends React.ComponentProps<typeof ChakraInputComponent> {
+interface InputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   //Add additional prop definitions here
+  isInvalid: boolean;
 }
 
-const TextInput = (props: InputProps) => {
+const TextInput = ({className = "", isInvalid = false, ...props}: InputProps) => {
   return (
-    <ChakraInputComponent
-      {...props}
-      className={`${props.className ? props.className : ""}`}
-      borderColor="blackAlpha.500"
-      focusBorderColor="blue.400"
-      _hover={{}}
-    />
+    <input {...props} className={`${className} ` + (isInvalid ? `border-[#E53E3E] shadow-[0_0_0_1px_#E53E3E] ` : `border-black/[.36] `) +
+    `outline outline-2 outline-transparent outline-offset-2 relative appearance-none text-base px-4 h-10 rounded-md border bg-inherit transition duration-200 focus:border-[#4299e1] focus:z-[1] focus:shadow-[0_0_0_1px_#4299e1] mt-2`}  />    
   );
 };
 
diff --git a/src/components/atoms/textbox/textbox.tsx b/src/components/atoms/textbox/textbox.tsx
index 3bb674f..7ad2262 100644
--- a/src/components/atoms/textbox/textbox.tsx
+++ b/src/components/atoms/textbox/textbox.tsx
@@ -1,21 +1,14 @@
-import { Textarea as ChakraTextboxComponent } from "@chakra-ui/react";
 import React from "react";
 
-interface TextboxProps extends React.ComponentProps<typeof ChakraTextboxComponent> {
+interface TextboxProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
   //Add additional prop definitions here
+  isInvalid: boolean;
 }
 
-type Textbox = TextboxProps;
-
-const TextBox = (props: Textbox) => {
+const TextBox = ({className = "", isInvalid = false, ...props}: TextboxProps) => {
   return (
-    <ChakraTextboxComponent
-      {...props}
-      className={`${props.className ? props.className : ""}`}
-      borderColor="blackAlpha.500"
-      focusBorderColor="blue.400"
-      _hover={{ }}
-    />
+    <textarea {...props} className={`${className} ` + (isInvalid ? `border-[#E53E3E] shadow-[0_0_0_1px_#E53E3E] ` : `border-black/[.36] `) +
+    `outline outline-2 outline-transparent outline-offset-2 relative appearance-none min-h-[5rem] leading-snug align-top text-base py-2 px-4 rounded-md border bg-inherit transition duration-200 focus:border-[#4299e1] focus:z-[1] focus:shadow-[0_0_0_1px_#4299e1] mt-2`} />
   );
 };
 
diff --git a/src/components/atoms/typography/default-text.tsx b/src/components/atoms/typography/default-text.tsx
index 5ba591d..e990b6a 100644
--- a/src/components/atoms/typography/default-text.tsx
+++ b/src/components/atoms/typography/default-text.tsx
@@ -1,12 +1,25 @@
-import { Text as ChakraTextComponent } from "@chakra-ui/react";
+import React from "react";
 
-interface DefaultTextProps
-  extends React.ComponentProps<typeof ChakraTextComponent> {
-  //Add additional prop definitions here
+// Define a type for the possible "as" values
+type AsType = 'span' | 'p';
+
+// Create a union type for the allowed props based on "as" value
+type ElementProps = AsType extends 'span'
+  ? React.HTMLAttributes<HTMLSpanElement>
+  : React.HTMLAttributes<HTMLParagraphElement>;
+
+interface DefaultTextProps extends ElementProps {
+  as?: AsType;
 }
 
-const DefaultText = (props: DefaultTextProps) => {
-  return <ChakraTextComponent {...props}>{props.children}</ChakraTextComponent>;
+const DefaultText = ({as = "p", className = "", children, ...props}: DefaultTextProps) => {
+  if(as === "span"){
+    return <span {...props} className={className}>{children}</span>;
+  }
+  else{
+    return <p {...props} className={className}>{children}</p>;
+  }
+  
 };
 
 export default DefaultText;
diff --git a/src/components/atoms/typography/heading-text.tsx b/src/components/atoms/typography/heading-text.tsx
index 09e38b9..bd335ee 100644
--- a/src/components/atoms/typography/heading-text.tsx
+++ b/src/components/atoms/typography/heading-text.tsx
@@ -1,16 +1,16 @@
-import { Heading as ChakraHeaderTextComponent } from "@chakra-ui/react";
+import React from "react";
 
-interface HeaderTextProps
-  extends React.ComponentProps<typeof ChakraHeaderTextComponent> {
-  //Add additional prop definitions here
-  level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type Level = Extract<keyof JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+
+interface HeaderTextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
+  level: Level;
 }
 
-const HeaderText = (props: HeaderTextProps) => {
+const HeaderText = ({level: HeadingLevel, className = "", children, ...props}: HeaderTextProps) => {
   return (
-    <ChakraHeaderTextComponent {...props} as={props.level}>
-      {props.children}
-    </ChakraHeaderTextComponent>
+    <HeadingLevel {...props} className={className}>
+      {children}
+    </HeadingLevel>
   );
 };
 
diff --git a/src/components/molecules/about-banner/about-banner.tsx b/src/components/molecules/about-banner/about-banner.tsx
index a7c2e44..627275f 100644
--- a/src/components/molecules/about-banner/about-banner.tsx
+++ b/src/components/molecules/about-banner/about-banner.tsx
@@ -15,25 +15,16 @@ export default function AboutBanner() {
       <div className="relative bottom-32 lg:bottom-14 px-10 lg:px-40 flex lg:justify-center mx-auto sm:w-[80%] lg:w-full">
         <div className="bg-[#0B2F4F] flex flex-1 lg:flex-auto flex-col lg:flex-row w-full p-8 gap-9 rounded-l-lg " >
           <div>
-            <HeaderText level={"h4"} color={"white"} fontSize={"20px"}>Have a question?</HeaderText>
+            <HeaderText level={"h4"} className="text-white text-[20px]">Have a question?</HeaderText>
             <DefaultText className={"text-altWhite text-[16px]"}>If you have any questions, please contact us</DefaultText>
           </div>
           <div>
             <DefaultButton
               as={"a"}
               href={"/contact"}
-              w={"100%"}
-              py={3}
-              color={"white"}
-              borderRadius={"8px"}
-              background={"transparent"}
-              border={"2px"}
-              borderColor={"white"}
-              _hover={{
-                background: "transparent"
-              }}
+              className={"w-full text-white rounded-lg bg-transparent border-2 border-white active:bg-[#CBD5E0] hover:bg-transparent focus-visible:shadow-[0_0_0_3px_rgb(66,153,225,0.6)]"}
             >
-            Contact Us
+              Contact Us
             </DefaultButton>
 
           </div>
diff --git a/src/components/molecules/about-details/about-details.tsx b/src/components/molecules/about-details/about-details.tsx
index 38f24f6..7a6311f 100644
--- a/src/components/molecules/about-details/about-details.tsx
+++ b/src/components/molecules/about-details/about-details.tsx
@@ -11,12 +11,12 @@ import {
 export default function AboutDetails() {
   return (
     <article className={"flex justify-center text-center lg:text-left text-lg lg:text-xl leading-[41px] py-0 lg:py-20 items-center flex-col gap-8 font-700 text-altDark "}>
-        <DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
+        <DefaultText as={"p"} className={"w-4/5 lg:w-[70%]"}>
           <b>TechIsHiring</b> tries to assist tech professionals in finding employment 
           by encouraging meaningful interactions between people looking for employment 
           and those who can assist, rather than focusing primarily on advertising job openings.
         </DefaultText>
-        <DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
+        <DefaultText as={"p"} className={"w-4/5 lg:w-[70%]"}>
           During the pandemic,
           <Link href="https://www.linkedin.com/in/ChadRStewart/" className="text-primary">
             <b> Chad R. Stewart</b>
@@ -30,7 +30,7 @@ export default function AboutDetails() {
             <b className="text-primary font-800 cursor-pointer"> #TechIsHiring</b>
           </Link> and the TechIsHiring account were created.
         </DefaultText>
-        <DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
+        <DefaultText as={"p"} className={"w-4/5 lg:w-[70%]"}>
           Looking to work with the Founder directly?
           <Link href="/hire-chad">
             <b className="text-primary cursor-pointer"> Hire Chad R. Stewart</b>
diff --git a/src/components/molecules/about-header/about-header.tsx b/src/components/molecules/about-header/about-header.tsx
index d9d191a..266cfb7 100644
--- a/src/components/molecules/about-header/about-header.tsx
+++ b/src/components/molecules/about-header/about-header.tsx
@@ -11,7 +11,7 @@ export default function AboutHeader() {
     >
         <div className="w-full flex flex-col items-center justify-center px-[18px] lg:px-0 bg-gradient-to-r from-black/60  to-transparent gap-4">
             
-            <HeaderText level={"h1"} className={"text-white"} fontWeight={"extrabold"} fontSize={{base: "39px", md:"56px"}}>
+            <HeaderText level={"h1"} className={"text-white font-extrabold text-[39px] md:text-[56px]"}>
                 Transnational <span className="text-[#7AB8F1]">Job Listing</span> Channel
             </HeaderText>
 
diff --git a/src/components/molecules/contact-form/contact-form.tsx b/src/components/molecules/contact-form/contact-form.tsx
index 63437d8..7845546 100644
--- a/src/components/molecules/contact-form/contact-form.tsx
+++ b/src/components/molecules/contact-form/contact-form.tsx
@@ -89,7 +89,8 @@ const ContactForm = () => {
     return badInput;
   };
 
-  const handleClick = async () => {
+  const handleClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
     const badInput = verifyInput();
     if( badInput ) return;
 
@@ -105,12 +106,12 @@ const ContactForm = () => {
   };
 
   return ( 
-    <Box className="flex flex-col justify-center min-h-[580px]">
+    <div className="flex flex-col justify-center min-h-[580px]">
       {statuses.isIdle &&
         <>
           <ContactHeading />
           <form action="" >
-            <VStack mt={2} justifyContent={"flex-start"} alignItems={"flex-start"}>
+            <div className={"flex justify-start items-start flex-col mt-2"}>
               <Label>
                 Name
               </Label>
@@ -121,11 +122,12 @@ const ContactForm = () => {
                 value={name}
                 isInvalid={error.name}
                 onChange={(e) => setName(e.target.value)}
+                className={"w-full"}
               />
               {error.name && <span className="text-rose-500">Please add a name</span>}
-            </VStack>
+            </div>
           
-            <VStack mt={2} justifyContent={"flex-start"} alignItems={"flex-start"}>
+            <div className={"flex justify-start items-start flex-col mt-2"}>
               <Label>
                 Email
               </Label>
@@ -136,36 +138,30 @@ const ContactForm = () => {
                 value={email}
                 isInvalid={error.email}
                 onChange={(e) => setEmail(e.target.value)}
+                className={"w-full"}
               />
               {error.email && <span className="text-rose-500">Please add a proper email address</span>}
-            </VStack>
+            </div>
 
-            <VStack mt={2} justifyContent={"flex-start"} alignItems={"flex-start"}>
+            <div className={"flex justify-start items-start flex-col mt-2"}>
               <Label>
                 Leave us a note!
               </Label>
               <TextBox
                 maxLength={400}
-                h={20}
                 placeholder={"Tell us something..."}
                 value={message}
                 isInvalid={error.message}
                 onChange={(e) => setMessage(e.target.value)}
+                className={"h-20 w-full"}
               />
               {error.message && <span className="text-rose-500">Please add a message</span>}
-            </VStack>
+            </div>
 
             <div className="mt-8">
               <DefaultButton
-                w={"100%"}
-                py={3}
-                color={"white"}
-                borderRadius={"12px"}
-                backgroundColor={"blue.500"}
-                _hover={{
-                  background: "darkgray"
-                }}
                 onClick={handleClick}
+                className={"w-full text-white rounded-xl bg-[#3182ce] hover:bg-[#a9a9a9] active:bg-[#CBD5E0] focus-visible:shadow-[0_0_0_3px_rgb(66,153,225,0.6)]"}
               >
                 Send message
               </DefaultButton>
@@ -182,7 +178,7 @@ const ContactForm = () => {
       
       {statuses.isSuccess && 
         <span className="flex flex-col gap-4 text-center">
-          <HeaderText className="text-primary !text-lg" level="h2">
+          <HeaderText className="text-primary text-lg" level="h2">
             Thank you for your feedback! 
           </HeaderText>
           <DefaultText>
@@ -193,7 +189,7 @@ const ContactForm = () => {
 
       {statuses.isError &&
         <span className="flex flex-col gap-4 text-center">
-          <HeaderText color="red" level="h2" className="!text-lg">
+          <HeaderText level="h2" className="text-lg text-red">
             Sorry, we were not able to send your email! 
           </HeaderText>
           <DefaultText>
@@ -201,7 +197,7 @@ const ContactForm = () => {
           </DefaultText>
         </span>
       }
-    </Box>
+    </div>
   );
 };
  
diff --git a/src/components/molecules/contact-heading/contact-heading.tsx b/src/components/molecules/contact-heading/contact-heading.tsx
index 5d06024..7edb49d 100644
--- a/src/components/molecules/contact-heading/contact-heading.tsx
+++ b/src/components/molecules/contact-heading/contact-heading.tsx
@@ -1,4 +1,3 @@
-import { Box, VStack } from "@chakra-ui/react";
 import HeaderText from "components/atoms/typography/heading-text";
 import DefaultText from "components/atoms/typography/default-text";
 import Link from "components/atoms/link/link";
@@ -6,12 +5,11 @@ import React from "react";
 
 const ContactHeading = () => {
   return ( 
-    <Box as={"div"}>
-      <VStack justifyContent={"flex-start"} alignItems={"flex-start"}>
-        <HeaderText level={"h2"} className={"text-secondary py-2"}>
+      <div className={"flex justify-start items-start flex-col"}>
+        <HeaderText level={"h2"} className={"text-secondary py-2 font-bold text-3xl md:text-4xl leading-snug md:leading-tight"}>
                 Contact Us
         </HeaderText>
-        <DefaultText className={"text-gray"}>
+        <DefaultText className={"text-gray mt-2"}>
                 You can reach us anytime via 
           <br/>
           <Link
@@ -20,11 +18,8 @@ const ContactHeading = () => {
           >
               <>techishiring@gmail.com</>
           </Link>
-          
-                
         </DefaultText>
-      </VStack>
-    </Box>
+      </div>
   );
 };
  
diff --git a/src/components/molecules/hire-chad-details/hire-chad-details.tsx b/src/components/molecules/hire-chad-details/hire-chad-details.tsx
index 4e08857..fdbd12b 100644
--- a/src/components/molecules/hire-chad-details/hire-chad-details.tsx
+++ b/src/components/molecules/hire-chad-details/hire-chad-details.tsx
@@ -17,7 +17,7 @@ const HireChadDetails = () => {
         <HeaderText level={"h2"} className={"text-secondary py-2"}>
           Hire Chad R. Stewart
         </HeaderText>
-        <DefaultText as={"p"} w={{base:"80%", lg:"70%"}}>
+        <DefaultText as={"p"} className={"w-4/5 lg:w-[70%]"}>
           Chad R. Stewart is a Full Stack Software Engineer with a Front-End Engineering
           focused skill set. He has worked on several software projects and lead teams
           in the FinTech and Developer Tools space. He has also spoken on several podcasts
diff --git a/src/components/molecules/why-choose/why-choose-section.tsx b/src/components/molecules/why-choose/why-choose-section.tsx
index 2c2189e..1cddc8e 100644
--- a/src/components/molecules/why-choose/why-choose-section.tsx
+++ b/src/components/molecules/why-choose/why-choose-section.tsx
@@ -11,7 +11,7 @@ const WhyChooseSection = () => {
     <section className="mx-auto w-full max-w-screen-2xl bg-white">
       <figure className="m-10 pb-10">
         <header className="mb-10 lg:w-[30%] ">
-          <HeaderText level="h2" size="xl" className="text-left !font-inter !font-extrabold !leading-[2.8rem]">
+          <HeaderText level="h2" className="text-left font-inter font-extrabold text-3xl md:text-4xl !leading-[2.8rem]">
             Why Choose TechIsHiring ?
           </HeaderText>
         </header>
diff --git a/src/components/organisms/highlights-content/highlights-content.tsx b/src/components/organisms/highlights-content/highlights-content.tsx
index 7058e74..e4647ee 100644
--- a/src/components/organisms/highlights-content/highlights-content.tsx
+++ b/src/components/organisms/highlights-content/highlights-content.tsx
@@ -5,7 +5,7 @@ const HighlightsContent = () => {
   return (
     <section className="flex flex-col items-center bg-[#D6E9FB] px-4 py-8">
       <header>
-          <HeaderText level="h2" size="xl" className="text-left !font-inter !font-extrabold !leading-[2.8rem] py-8">
+          <HeaderText level="h2" className="text-left font-inter font-extrabold py-8 text-3xl md:text-4xl !leading-[2.8rem]">
           TechIsHiring Highlights
         </HeaderText>
       </header>
diff --git a/src/components/organisms/twitter-feed/twitter-feed.tsx b/src/components/organisms/twitter-feed/twitter-feed.tsx
index ae42442..9ecdc35 100644
--- a/src/components/organisms/twitter-feed/twitter-feed.tsx
+++ b/src/components/organisms/twitter-feed/twitter-feed.tsx
@@ -15,7 +15,7 @@ const TwitterFeed = () => {
     <Card section className="min-w-full md:px-[10%]">
       <>
         <header>
-          <HeaderText level="h2" className="text-left !font-inter !font-extrabold !leading-[2.8rem] py-8">
+          <HeaderText level="h2" className="font-inter font-extrabold leading-[2.8rem] py-8 text-3xl md:text-4xl">
             Latest tweets from #TechIsHiring:
           </HeaderText>
         </header>
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..f1efa9c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,31 +1,21 @@
 /** @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) { ... }
-      },
-      fontFamily: {
-        inter: ["Inter", "sans-serif"]
+        "2xl": "1400px",
       },
+    },
+    extend: {
       colors: {
         primary: "#165C9C",
         secondary: "#101828",
@@ -33,8 +23,22 @@ module.exports = {
         dark: "#000000",
         altDark: "#222222",
         altWhite: "#F0F0F0"
-      }
-    }
+      },
+      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 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
-  plugins: []
-};
+  plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file