diff --git a/.gitignore b/.gitignore
index 5b531e0e..68c8fbd4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ node_modules
 /.cache
 /build
 .env
+
+*.DS_Store
diff --git a/ROUTING.md b/ROUTING.md
new file mode 100644
index 00000000..e95360e5
--- /dev/null
+++ b/ROUTING.md
@@ -0,0 +1,52 @@
+- /
+- pricing
+- about
+- help
+- legal
+  - privacy-policy
+  - terms-and-condition
+- career
+  - :id (individual jobs page)
+- trial (squeeze page)
+- blog
+  - latest (latest articles page)
+  - :id (Individual blog page)
+- contact
+- faq
+- waitlist
+- auth
+  - register
+    - ?otp
+    - organisation
+  - login
+    - email-link
+      - success
+  - forgot-password
+    - verify-otp
+    - success
+  - reset-password
+- dashboard
+  - products
+    - add
+    - :id
+  - settings
+    - profile
+    - account-security
+      - password
+    - payment-information
+      - checkout
+      - cancel-subscription
+    - notification
+    - payment-information
+    - data-and-privacy
+    - language-and-region
+- admin
+  - dashboard
+  - products
+    - add
+    - :id
+  - users
+  - email-templates
+  - squeeze
+  - waitlist
+  - settings
diff --git a/app/components/ui/accordion.tsx b/app/components/ui/accordion.tsx
index 6f1b87c3..f2ab1670 100644
--- a/app/components/ui/accordion.tsx
+++ b/app/components/ui/accordion.tsx
@@ -3,13 +3,17 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "app/lib/utils/cn";
 import { ChevronDown } from "lucide-react";
-import * as React from "react";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from "react";
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+const AccordionItem = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...properties }, reference) => (
   <AccordionPrimitive.Item
     ref={reference}
@@ -19,9 +23,9 @@ const AccordionItem = React.forwardRef<
 ));
 AccordionItem.displayName = "AccordionItem";
 
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+const AccordionTrigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...properties }, reference) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
@@ -39,9 +43,9 @@ const AccordionTrigger = React.forwardRef<
 ));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+const AccordionContent = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...properties }, reference) => (
   <AccordionPrimitive.Content
     ref={reference}
diff --git a/app/styles/global.css b/app/styles/global.css
index 6554f244..1170b1bf 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,34 +1,50 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
-
 body {
   font-family: "Inter", sans-serif;
 }
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
+    --background: 0 0% 98%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 224 71.4% 4.1%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --default: 222 47% 11%;
+    --default-foreground: 0 0% 100%;
+    --primary: 25 95% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84% 60%;
+    --destructive-hover: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    --subtle: 210 40% 96%;
+    --subtle-hover: 214 32% 91%;
+    --subtle-foreground: 222 47% 11%;
+    --loading: 222 47% 11%;
+    --loading-hover: 215 25% 27%;
+    --loading-foreground: 0 0% 100%;
+    --outline: 0 0% 100%;
+    --outline-hover: 210 40% 96%;
+    --outline-foreground: 222 47% 11%;
+    --link: 222 47% 11%;
+    --error: 0 72% 51%;
+    --success: 102 51% 52%;
+    --warning: 45 93% 47%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -38,25 +54,25 @@ body {
   }
 
   .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 216 12.2% 83.9%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
diff --git a/package.json b/package.json
index ecaf3c8e..dbc96f7a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-email/components": "^0.0.21",
     "@remix-run/css-bundle": "^2.10.3",
+    "@remix-run/node": "^2.10.3",
     "@remix-run/react": "^2.10.3",
     "@remix-run/serve": "^2.10.3",
     "class-variance-authority": "^0.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d9185aa..11348feb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@remix-run/css-bundle':
         specifier: ^2.10.3
         version: 2.10.3
+      '@remix-run/node':
+        specifier: ^2.10.3
+        version: 2.10.3(typescript@5.5.3)
       '@remix-run/react':
         specifier: ^2.10.3
         version: 2.10.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.3)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index abbdb2f5..053a1c8e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -22,8 +22,18 @@ const config = {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
+        toastBg: "hsl(var(--toast-bg))",
+        toastBorder: "hsl(var(--toast-border))",
+        defaultBadgeBg: "hsl(var(--default-badge-bg))",
+        primaryBadgeBg: "hsl(var(--primary-badge-bg))",
+        successBadgeBg: "hsl(var(--success-badge-bg))",
+        errorBadgeBg: "hsl(var(--red-badge-bg))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        default: {
+          DEFAULT: "hsl(var(--default))",
+          foreground: "hsl(var(--default-foreground))",
+        },
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
@@ -34,8 +44,27 @@ const config = {
         },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
+          hover: "hsl(var(--destructive-hover))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        subtle: {
+          DEFAULT: "hsl(var(--subtle))",
+          hover: "hsl(var(--subtle-hover))",
+          foreground: "hsl(var(--subtle-foreground))",
+        },
+        loading: {
+          DEFAULT: "hsl(var(--loading))",
+          hover: "hsl(var(--loading-hover))",
+          foreground: "hsl(var(--loading-foreground))",
+        },
+        outline: {
+          DEFAULT: "hsl(var(--outline))",
+          hover: "hsl(var(--outline-hover))",
+          foreground: "hsl(var(--outline-foreground))",
+        },
+        link: {
+          DEFAULT: "hsl(var(--link))",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",
@@ -52,6 +81,24 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        error: "hsl(var(--error))",
+        success: "hsl(var(--success))",
+        warning: "hsl(var(--warning))",
+        neutral: {
+          dark: {
+            1: "hsl(var(--neutralColor-dark-1))",
+            2: "hsl(var(--neutralColor-dark-2))",
+          },
+        },
+        stroke: {
+          "colors-stroke": "hsl(var(--stroke-colors-stroke))",
+        },
+        breadcrumb: {
+          page: "hsl(var(--breadcrumb-page))",
+          foreground: "hsl(var(--breadcrumb-foreground))",
+        },
+        desaturatedBlue: "hsl(var(--desaturated-blue))",
+        grey50: "hsl(var(--grey50))",
       },
       borderRadius: {
         lg: "var(--radius)",
diff --git a/tsconfig.json b/tsconfig.json
index 0c14b0ae..f4c137c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,10 @@
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/types/**/*.d.ts"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
@@ -25,7 +28,6 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-    "include": ["app/**/*.ts", "app/**/*.tsx", "app/types/**/*.d.ts"],
     // Vite takes care of building everything, not tsc.
     "noEmit": true
   }