diff --git a/web/.env.example b/web/.env.example
index 008df45..2e8e47a 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -20,3 +20,14 @@ PLAUSIBLE_DOMAIN=
 
 NEXT_PUBLIC_POSTHOG_KEY="your-api-key"
 NEXT_PUBLIC_POSTHOG_HOST="your-ph-address"
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/auth/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/auth/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
+
+STRIPE_API_KEY="sk_test_"
+STRIPE_PR_PRO="price_"
+STRIPE_PR_ENTERPRISE="price_"
+STRIPE_PR_API="price_"
+STRIPE_WEBHOOK_SECRET="whsec_"
diff --git a/web/src/app/(app)/api/stripe/checkout/route.tsx b/web/src/app/(app)/api/stripe/checkout/route.tsx
index 9ccd287..34c5572 100644
--- a/web/src/app/(app)/api/stripe/checkout/route.tsx
+++ b/web/src/app/(app)/api/stripe/checkout/route.tsx
@@ -1,5 +1,4 @@
 import { stripe } from "@/server/stripe";
-import { createCheckout } from "@/server/linkToPricing";
 import { auth, clerkClient } from "@clerk/nextjs";
 import { redirect } from "next/navigation";
 import { getUrlServerSide } from "@/server/getUrlServerSide";
diff --git a/web/src/app/(app)/api/stripe/dashboard/route.tsx b/web/src/app/(app)/api/stripe/dashboard/route.tsx
index 95fe442..89c075c 100644
--- a/web/src/app/(app)/api/stripe/dashboard/route.tsx
+++ b/web/src/app/(app)/api/stripe/dashboard/route.tsx
@@ -1,11 +1,7 @@
 import { stripe } from "@/server/stripe";
-import { createCheckout } from "@/server/linkToPricing";
-import { auth, clerkClient } from "@clerk/nextjs";
+import { auth } from "@clerk/nextjs";
 import { redirect } from "next/navigation";
 import { getUrlServerSide } from "@/server/getUrlServerSide";
-import { db } from "@/db/db";
-import { and, eq, isNull } from "drizzle-orm";
-import { subscriptionStatusTable } from "@/db/schema";
 import { getCurrentPlan } from "@/server/getCurrentPlan";
 
 export async function GET(req: Request) {
diff --git a/web/src/app/(app)/auth/sign-in/[[...sign-in]]/page.tsx b/web/src/app/(app)/auth/sign-in/[[...sign-in]]/page.tsx
new file mode 100644
index 0000000..635f96d
--- /dev/null
+++ b/web/src/app/(app)/auth/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="w-full h-full items-center flex justify-center">
+      <SignIn />
+    </div>
+  );
+}
diff --git a/web/src/app/(app)/auth/sign-up/[[...sign-up]]/page.tsx b/web/src/app/(app)/auth/sign-up/[[...sign-up]]/page.tsx
new file mode 100644
index 0000000..6118593
--- /dev/null
+++ b/web/src/app/(app)/auth/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return (
+    <div className="w-full h-full items-center flex justify-center">
+      <SignUp />
+    </div>
+  );
+}
diff --git a/web/src/components/PricingPlan.tsx b/web/src/components/PricingPlan.tsx
index 2845de4..6f38569 100644
--- a/web/src/components/PricingPlan.tsx
+++ b/web/src/components/PricingPlan.tsx
@@ -8,7 +8,6 @@ import { Check, Info, Minus } from "lucide-react";
 
 import { Fragment } from "react";
 import { auth } from "@clerk/nextjs";
-import { subscriptionPlanStatus } from "@/db/schema";
 import { getCurrentPlan } from "../server/getCurrentPlan";
 
 const tiers = [
@@ -38,7 +37,22 @@ const tiers = [
     mostPopular: true,
   },
 ];
-const sections = [
+type TierFeature = {
+  Basic?: string | JSX.Element | boolean;
+  Pro?: string | JSX.Element | boolean;
+  Enterprise?: string | JSX.Element | boolean;
+};
+
+type Feature = {
+  name: string;
+  tiers: TierFeature;
+};
+
+type Section = {
+  name: string;
+  features: Feature[];
+};
+const sections: Section[] = [
   {
     name: "Features",
     features: [
@@ -212,7 +226,7 @@ export default async function PricingList() {
                   <li key={section.name}>
                     <ul role="list" className="space-y-4">
                       {section.features.map((feature) =>
-                        feature.tiers[tier.name] ? (
+                        feature.tiers[tier.name as keyof TierFeature] ? (
                           <li key={feature.name} className="flex gap-x-3">
                             <Check
                               className="h-6 w-5 flex-none text-indigo-600"
@@ -220,9 +234,17 @@ export default async function PricingList() {
                             />
                             <span>
                               {feature.name}{" "}
-                              {typeof feature.tiers[tier.name] === "string" ? (
+                              {typeof feature.tiers[
+                                tier.name as keyof TierFeature
+                              ] === "string" ? (
                                 <span className="text-sm leading-6 text-gray-500">
-                                  ({feature.tiers[tier.name]})
+                                  (
+                                  {
+                                    feature.tiers[
+                                      tier.name as keyof TierFeature
+                                    ]
+                                  }
+                                  )
                                 </span>
                               ) : null}
                             </span>
@@ -338,14 +360,20 @@ export default async function PricingList() {
                         </th>
                         {tiers.map((tier) => (
                           <td key={tier.id} className="px-6 py-4 xl:px-8">
-                            {typeof feature.tiers[tier.name] === "string" ||
-                            typeof feature.tiers[tier.name] === "object" ? (
+                            {typeof feature.tiers[
+                              tier.name as keyof TierFeature
+                            ] === "string" ||
+                            typeof feature.tiers[
+                              tier.name as keyof TierFeature
+                            ] === "object" ? (
                               <div className="flex items-center justify-center text-center text-sm leading-6 text-gray-500">
-                                {feature.tiers[tier.name]}
+                                {feature.tiers[tier.name as keyof TierFeature]}
                               </div>
                             ) : (
                               <>
-                                {feature.tiers[tier.name] === true ? (
+                                {feature.tiers[
+                                  tier.name as keyof TierFeature
+                                ] === true ? (
                                   <Check
                                     className="mx-auto h-5 w-5 text-indigo-600"
                                     aria-hidden="true"
@@ -358,7 +386,9 @@ export default async function PricingList() {
                                 )}
 
                                 <span className="sr-only">
-                                  {feature.tiers[tier.name] === true
+                                  {feature.tiers[
+                                    tier.name as keyof TierFeature
+                                  ] === true
                                     ? "Included"
                                     : "Not included"}{" "}
                                   in {tier.name}