diff --git a/docs/swagger.json b/docs/swagger.json
index 1fb82f4d18..25f9be0306 100644
--- a/docs/swagger.json
+++ b/docs/swagger.json
@@ -11987,7 +11987,105 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"total": {
+											"type": "number",
+											"format": "double"
+										},
+										"tax": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"subtotal": {
+											"type": "number",
+											"format": "double"
+										},
+										"discount": {
+											"properties": {
+												"coupon": {
+													"properties": {
+														"percent_off": {
+															"type": "number",
+															"format": "double",
+															"nullable": true
+														},
+														"name": {
+															"type": "string",
+															"nullable": true
+														}
+													},
+													"required": [
+														"percent_off",
+														"name"
+													],
+													"type": "object"
+												}
+											},
+											"required": [
+												"coupon"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"lines": {
+											"properties": {
+												"data": {
+													"items": {
+														"properties": {
+															"description": {
+																"type": "string",
+																"nullable": true
+															},
+															"amount": {
+																"type": "number",
+																"format": "double",
+																"nullable": true
+															},
+															"id": {
+																"type": "string",
+																"nullable": true
+															}
+														},
+														"required": [
+															"description",
+															"amount",
+															"id"
+														],
+														"type": "object"
+													},
+													"type": "array"
+												}
+											},
+											"required": [
+												"data"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"next_payment_attempt": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"currency": {
+											"type": "string",
+											"nullable": true
+										}
+									},
+									"required": [
+										"total",
+										"tax",
+										"subtotal",
+										"discount",
+										"lines",
+										"next_payment_attempt",
+										"currency"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
@@ -12060,7 +12158,79 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"items": {
+											"items": {
+												"properties": {
+													"price": {
+														"properties": {
+															"product": {
+																"properties": {
+																	"name": {
+																		"type": "string",
+																		"nullable": true
+																	}
+																},
+																"required": [
+																	"name"
+																],
+																"type": "object",
+																"nullable": true
+															}
+														},
+														"required": [
+															"product"
+														],
+														"type": "object"
+													},
+													"quantity": {
+														"type": "number",
+														"format": "double"
+													}
+												},
+												"required": [
+													"price"
+												],
+												"type": "object"
+											},
+											"type": "array"
+										},
+										"trial_end": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"id": {
+											"type": "string"
+										},
+										"current_period_start": {
+											"type": "number",
+											"format": "double"
+										},
+										"current_period_end": {
+											"type": "number",
+											"format": "double"
+										},
+										"cancel_at_period_end": {
+											"type": "boolean"
+										},
+										"status": {
+											"type": "string"
+										}
+									},
+									"required": [
+										"items",
+										"trial_end",
+										"id",
+										"current_period_start",
+										"current_period_end",
+										"cancel_at_period_end",
+										"status"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
diff --git a/helicone-node/api/generatedTypes/public.ts b/helicone-node/api/generatedTypes/public.ts
index f9ace06250..62460ba01e 100644
--- a/helicone-node/api/generatedTypes/public.ts
+++ b/helicone-node/api/generatedTypes/public.ts
@@ -4322,7 +4322,32 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            /** Format: double */
+            total: number;
+            /** Format: double */
+            tax: number | null;
+            /** Format: double */
+            subtotal: number;
+            discount: ({
+              coupon: {
+                /** Format: double */
+                percent_off: number | null;
+                name: string | null;
+              };
+            }) | null;
+            lines: ({
+              data: ({
+                  description: string | null;
+                  /** Format: double */
+                  amount: number | null;
+                  id: string | null;
+                })[];
+            }) | null;
+            /** Format: double */
+            next_payment_attempt: number | null;
+            currency: string | null;
+          }) | null;
         };
       };
     };
@@ -4350,7 +4375,26 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            items: ({
+                price: {
+                  product: ({
+                    name: string | null;
+                  }) | null;
+                };
+                /** Format: double */
+                quantity?: number;
+              })[];
+            /** Format: double */
+            trial_end: number | null;
+            id: string;
+            /** Format: double */
+            current_period_start: number;
+            /** Format: double */
+            current_period_end: number;
+            cancel_at_period_end: boolean;
+            status: string;
+          }) | null;
         };
       };
     };
diff --git a/valhalla/jawn/src/controllers/private/organizationController.ts b/valhalla/jawn/src/controllers/private/organizationController.ts
index 7eeb93395d..fc8500ce08 100644
--- a/valhalla/jawn/src/controllers/private/organizationController.ts
+++ b/valhalla/jawn/src/controllers/private/organizationController.ts
@@ -93,7 +93,7 @@ export class OrganizationController extends Controller {
     @Request() request: JawnAuthenticatedRequest
   ): Promise<Result<null, string>> {
     const organizationManager = new OrganizationManager(request.authParams);
-    const memberCount = await organizationManager.getMemberCount();
+    const memberCount = await organizationManager.getMemberCount(true);
     if (memberCount.error || !memberCount.data) {
       return err(memberCount.error ?? "Error getting member count");
     }
@@ -281,7 +281,7 @@ export class OrganizationController extends Controller {
     const stripeManager = new StripeManager(request.authParams);
     const organizationManager = new OrganizationManager(request.authParams);
 
-    const memberCount = await organizationManager.getMemberCount();
+    const memberCount = await organizationManager.getMemberCount(true);
     if (memberCount.error || !memberCount.data) {
       return err(memberCount.error ?? "Error getting member count");
     }
diff --git a/valhalla/jawn/src/controllers/public/stripeController.ts b/valhalla/jawn/src/controllers/public/stripeController.ts
index 4606ae8710..0a6b7a869d 100644
--- a/valhalla/jawn/src/controllers/public/stripeController.ts
+++ b/valhalla/jawn/src/controllers/public/stripeController.ts
@@ -13,6 +13,7 @@ import {
 import Stripe from "stripe";
 import { JawnAuthenticatedRequest } from "../../types/request";
 import { StripeManager } from "../../managers/stripe/StripeManager";
+import { Result } from "../../lib/shared/result";
 
 export interface UpgradeToProRequest {
   addons?: {
@@ -148,7 +149,26 @@ export class StripeController extends Controller {
   @Get("/subscription/preview-invoice")
   public async previewInvoice(
     @Request() request: JawnAuthenticatedRequest
-  ): Promise<any> {
+  ): Promise<{
+    currency: string | null;
+    next_payment_attempt: number | null;
+    lines: {
+      data: {
+        id: string | null;
+        amount: number | null;
+        description: string | null;
+      }[];
+    } | null;
+    discount: {
+      coupon: {
+        name: string | null;
+        percent_off: number | null;
+      };
+    } | null;
+    subtotal: number;
+    tax: number | null;
+    total: number;
+  } | null> {
     const stripeManager = new StripeManager(request.authParams);
     const result = await stripeManager.getUpcomingInvoice();
 
@@ -157,7 +177,15 @@ export class StripeController extends Controller {
       throw new Error(result.error);
     }
 
-    return result.data;
+    return {
+      currency: result.data?.currency ?? null,
+      next_payment_attempt: result.data?.next_payment_attempt ?? null,
+      lines: result.data?.lines ?? null,
+      discount: result.data?.discount ?? null,
+      subtotal: result.data?.subtotal ?? 0,
+      tax: result.data?.tax ?? null,
+      total: result.data?.total ?? 0,
+    };
   }
 
   @Post("/subscription/cancel-subscription")
@@ -184,7 +212,22 @@ export class StripeController extends Controller {
   @Get("/subscription")
   public async getSubscription(
     @Request() request: JawnAuthenticatedRequest
-  ): Promise<any> {
+  ): Promise<{
+    status: string;
+    cancel_at_period_end: boolean;
+    current_period_end: number;
+    current_period_start: number;
+    id: string;
+    trial_end: number | null;
+    items: {
+      quantity?: number;
+      price: {
+        product: {
+          name: string | null;
+        } | null;
+      };
+    }[];
+  } | null> {
     const stripeManager = new StripeManager(request.authParams);
     const result = await stripeManager.getSubscription();
 
@@ -193,7 +236,24 @@ export class StripeController extends Controller {
       throw new Error(result.error);
     }
 
-    return result.data;
+    if (!result.data) return null;
+
+    return {
+      status: result.data.status,
+      cancel_at_period_end: result.data.cancel_at_period_end,
+      current_period_end: result.data.current_period_end,
+      current_period_start: result.data.current_period_start,
+      id: result.data.id,
+      trial_end: result.data.trial_end,
+      items: result.data.items.data.map((item) => ({
+        quantity: item.quantity,
+        price: {
+          product: {
+            name: ((item.price.product as any)?.name ?? null) as string | null,
+          },
+        },
+      })),
+    };
   }
 
   @Post("/webhook")
diff --git a/valhalla/jawn/src/managers/organization/OrganizationManager.ts b/valhalla/jawn/src/managers/organization/OrganizationManager.ts
index 625e43d724..93333fd3d0 100644
--- a/valhalla/jawn/src/managers/organization/OrganizationManager.ts
+++ b/valhalla/jawn/src/managers/organization/OrganizationManager.ts
@@ -358,7 +358,9 @@ export class OrganizationManager extends BaseManager {
     return ok(layout);
   }
 
-  async getMemberCount(): Promise<Result<number, string>> {
+  async getMemberCount(
+    filterHeliconeEmails: boolean = false
+  ): Promise<Result<number, string>> {
     const { data: members, error: membersError } =
       await this.organizationStore.getOrganizationMembers(
         this.authParams.organizationId
@@ -367,7 +369,12 @@ export class OrganizationManager extends BaseManager {
     if (membersError !== null) {
       return err(membersError);
     }
-    return ok(members.length);
+    return ok(
+      members.filter(
+        (member) =>
+          !filterHeliconeEmails || !member.email.endsWith("@helicone.ai")
+      ).length
+    );
   }
 
   async getOrganizationMembers(
diff --git a/valhalla/jawn/src/managers/stripe/StripeManager.ts b/valhalla/jawn/src/managers/stripe/StripeManager.ts
index 2cf7396a11..7655541b54 100644
--- a/valhalla/jawn/src/managers/stripe/StripeManager.ts
+++ b/valhalla/jawn/src/managers/stripe/StripeManager.ts
@@ -8,24 +8,16 @@ import { dbExecute } from "../../lib/shared/db/dbExecute";
 import { clickhouseDb } from "../../lib/db/ClickhouseWrapper";
 import { buildFilterWithAuthClickHouse } from "../../lib/shared/filters/filters";
 import { UpgradeToProRequest } from "../../controllers/public/stripeController";
+import { OrganizationManager } from "../organization/OrganizationManager";
 
-const proProductPrices =
-  ENVIRONMENT === "production"
-    ? {
-        "request-volume": process.env.PRICE_PROD_REQUEST_VOLUME_ID!,
-        "pro-users": process.env.PRICE_PROD_PRO_USERS_ID!,
-        prompts: process.env.PRICE_PROD_PROMPTS_ID!,
-        alerts: process.env.PRICE_PROD_ALERTS_ID!,
-      }
-    : {
-        // TEST PRODUCTS
-        "request-volume": "price_1P0zwNFeVmeixR9wkrT3DYdi",
-        "pro-users": "price_1PxwrxFeVmeixR9wUhWdnEu6",
-        prompts: "price_1PyozaFeVmeixR9wqQoIV2Ur",
-        alerts: "price_1PySmZFeVmeixR9wKEemD7jP",
-      };
+const proProductPrices = {
+  "request-volume": process.env.PRICE_PROD_REQUEST_VOLUME_ID!, //(This is just growth)
+  "pro-users": process.env.PRICE_PROD_PRO_USERS_ID!,
+  prompts: process.env.PRICE_PROD_PROMPTS_ID!,
+  alerts: process.env.PRICE_PROD_ALERTS_ID!,
+};
 
-const EARLY_ADOPTER_COUPON = "0IPsIob0";
+const EARLY_ADOPTER_COUPON = "9ca5IeEs"; // WlDg28Kf | prod: 9ca5IeEs
 
 export class StripeManager extends BaseManager {
   private stripe: Stripe;
@@ -54,10 +46,6 @@ export class StripeManager extends BaseManager {
         return err("User does not have an email");
       }
 
-      const getStripeCustomer = await this.stripe.customers.list({
-        email: user.data?.user?.email ?? "",
-      });
-      console.log(getStripeCustomer);
       const customer = await this.stripe.customers.create({
         email: user.data.user.email,
       });
@@ -210,22 +198,13 @@ WHERE (${builtFilter.filter})`,
     }
   }
   private async getOrgMemberCount(): Promise<Result<number, string>> {
-    const members = await supabaseServer.client
-      .from("organization_member")
-      .select("*", { count: "exact" })
-      .eq("organization", this.authParams.organizationId);
-
-    if (members.error) {
-      console.log(members.error);
-      return err("Error getting organization members");
-    }
-
-    return ok(members.count!);
+    const organizationManager = new OrganizationManager(this.authParams);
+    return await organizationManager.getMemberCount(true);
   }
 
   private shouldApplyCoupon(): boolean {
     const currentDate = new Date();
-    const cutoffDate = new Date("2023-10-10");
+    const cutoffDate = new Date("2024-10-15");
     return currentDate < cutoffDate;
   }
 
@@ -279,11 +258,12 @@ WHERE (${builtFilter.filter})`,
           tier: "pro-20240913",
         },
       },
-      allow_promotion_codes: true,
     };
 
     if (this.shouldApplyCoupon()) {
       sessionParams.discounts = [{ coupon: EARLY_ADOPTER_COUPON }];
+    } else {
+      sessionParams.allow_promotion_codes = true;
     }
 
     const session = await this.stripe.checkout.sessions.create(sessionParams);
diff --git a/valhalla/jawn/src/tsoa-build/private/swagger.json b/valhalla/jawn/src/tsoa-build/private/swagger.json
index 36c27c2b24..96affae78b 100644
--- a/valhalla/jawn/src/tsoa-build/private/swagger.json
+++ b/valhalla/jawn/src/tsoa-build/private/swagger.json
@@ -11449,7 +11449,105 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"total": {
+											"type": "number",
+											"format": "double"
+										},
+										"tax": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"subtotal": {
+											"type": "number",
+											"format": "double"
+										},
+										"discount": {
+											"properties": {
+												"coupon": {
+													"properties": {
+														"percent_off": {
+															"type": "number",
+															"format": "double",
+															"nullable": true
+														},
+														"name": {
+															"type": "string",
+															"nullable": true
+														}
+													},
+													"required": [
+														"percent_off",
+														"name"
+													],
+													"type": "object"
+												}
+											},
+											"required": [
+												"coupon"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"lines": {
+											"properties": {
+												"data": {
+													"items": {
+														"properties": {
+															"description": {
+																"type": "string",
+																"nullable": true
+															},
+															"amount": {
+																"type": "number",
+																"format": "double",
+																"nullable": true
+															},
+															"id": {
+																"type": "string",
+																"nullable": true
+															}
+														},
+														"required": [
+															"description",
+															"amount",
+															"id"
+														],
+														"type": "object"
+													},
+													"type": "array"
+												}
+											},
+											"required": [
+												"data"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"next_payment_attempt": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"currency": {
+											"type": "string",
+											"nullable": true
+										}
+									},
+									"required": [
+										"total",
+										"tax",
+										"subtotal",
+										"discount",
+										"lines",
+										"next_payment_attempt",
+										"currency"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
@@ -11522,7 +11620,79 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"items": {
+											"items": {
+												"properties": {
+													"price": {
+														"properties": {
+															"product": {
+																"properties": {
+																	"name": {
+																		"type": "string",
+																		"nullable": true
+																	}
+																},
+																"required": [
+																	"name"
+																],
+																"type": "object",
+																"nullable": true
+															}
+														},
+														"required": [
+															"product"
+														],
+														"type": "object"
+													},
+													"quantity": {
+														"type": "number",
+														"format": "double"
+													}
+												},
+												"required": [
+													"price"
+												],
+												"type": "object"
+											},
+											"type": "array"
+										},
+										"trial_end": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"id": {
+											"type": "string"
+										},
+										"current_period_start": {
+											"type": "number",
+											"format": "double"
+										},
+										"current_period_end": {
+											"type": "number",
+											"format": "double"
+										},
+										"cancel_at_period_end": {
+											"type": "boolean"
+										},
+										"status": {
+											"type": "string"
+										}
+									},
+									"required": [
+										"items",
+										"trial_end",
+										"id",
+										"current_period_start",
+										"current_period_end",
+										"cancel_at_period_end",
+										"status"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
diff --git a/valhalla/jawn/src/tsoa-build/public/swagger.json b/valhalla/jawn/src/tsoa-build/public/swagger.json
index 1fb82f4d18..25f9be0306 100644
--- a/valhalla/jawn/src/tsoa-build/public/swagger.json
+++ b/valhalla/jawn/src/tsoa-build/public/swagger.json
@@ -11987,7 +11987,105 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"total": {
+											"type": "number",
+											"format": "double"
+										},
+										"tax": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"subtotal": {
+											"type": "number",
+											"format": "double"
+										},
+										"discount": {
+											"properties": {
+												"coupon": {
+													"properties": {
+														"percent_off": {
+															"type": "number",
+															"format": "double",
+															"nullable": true
+														},
+														"name": {
+															"type": "string",
+															"nullable": true
+														}
+													},
+													"required": [
+														"percent_off",
+														"name"
+													],
+													"type": "object"
+												}
+											},
+											"required": [
+												"coupon"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"lines": {
+											"properties": {
+												"data": {
+													"items": {
+														"properties": {
+															"description": {
+																"type": "string",
+																"nullable": true
+															},
+															"amount": {
+																"type": "number",
+																"format": "double",
+																"nullable": true
+															},
+															"id": {
+																"type": "string",
+																"nullable": true
+															}
+														},
+														"required": [
+															"description",
+															"amount",
+															"id"
+														],
+														"type": "object"
+													},
+													"type": "array"
+												}
+											},
+											"required": [
+												"data"
+											],
+											"type": "object",
+											"nullable": true
+										},
+										"next_payment_attempt": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"currency": {
+											"type": "string",
+											"nullable": true
+										}
+									},
+									"required": [
+										"total",
+										"tax",
+										"subtotal",
+										"discount",
+										"lines",
+										"next_payment_attempt",
+										"currency"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
@@ -12060,7 +12158,79 @@
 						"description": "Ok",
 						"content": {
 							"application/json": {
-								"schema": {}
+								"schema": {
+									"properties": {
+										"items": {
+											"items": {
+												"properties": {
+													"price": {
+														"properties": {
+															"product": {
+																"properties": {
+																	"name": {
+																		"type": "string",
+																		"nullable": true
+																	}
+																},
+																"required": [
+																	"name"
+																],
+																"type": "object",
+																"nullable": true
+															}
+														},
+														"required": [
+															"product"
+														],
+														"type": "object"
+													},
+													"quantity": {
+														"type": "number",
+														"format": "double"
+													}
+												},
+												"required": [
+													"price"
+												],
+												"type": "object"
+											},
+											"type": "array"
+										},
+										"trial_end": {
+											"type": "number",
+											"format": "double",
+											"nullable": true
+										},
+										"id": {
+											"type": "string"
+										},
+										"current_period_start": {
+											"type": "number",
+											"format": "double"
+										},
+										"current_period_end": {
+											"type": "number",
+											"format": "double"
+										},
+										"cancel_at_period_end": {
+											"type": "boolean"
+										},
+										"status": {
+											"type": "string"
+										}
+									},
+									"required": [
+										"items",
+										"trial_end",
+										"id",
+										"current_period_start",
+										"current_period_end",
+										"cancel_at_period_end",
+										"status"
+									],
+									"type": "object",
+									"nullable": true
+								}
 							}
 						}
 					}
diff --git a/web/components/layout/auth/DesktopSidebar.tsx b/web/components/layout/auth/DesktopSidebar.tsx
index 2ce107ec93..8454967f77 100644
--- a/web/components/layout/auth/DesktopSidebar.tsx
+++ b/web/components/layout/auth/DesktopSidebar.tsx
@@ -1,4 +1,4 @@
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
@@ -11,17 +11,21 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   CloudArrowUpIcon,
+  Cog6ToothIcon,
   QuestionMarkCircleIcon,
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useOrg } from "../organizationContext";
 import OrgDropdown from "../orgDropdown";
+import NavItem from "./NavItem";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { useMemo } from "react";
 
-interface NavigationItem {
+export interface NavigationItem {
   name: string;
   href: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>> | null;
   current: boolean;
   featured?: boolean;
   subItems?: NavigationItem[];
@@ -29,15 +33,11 @@ interface NavigationItem {
 
 interface SidebarProps {
   NAVIGATION: NavigationItem[];
-  setReferOpen: (open: boolean) => void;
+
   setOpen: (open: boolean) => void;
 }
 
-const DesktopSidebar = ({
-  NAVIGATION,
-  setReferOpen,
-  setOpen,
-}: SidebarProps) => {
+const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
   const org = useOrg();
   const tier = org?.currentOrg?.tier;
   const router = useRouter();
@@ -59,111 +59,60 @@ const DesktopSidebar = ({
         : [...prev, name]
     );
   };
+  const largeWith = useMemo(
+    () => cn(isCollapsed ? "w-16" : "w-52"),
+    [isCollapsed]
+  );
 
-  const renderNavItem = (link: NavigationItem, isSubItem = false) => {
-    const hasSubItems = link.subItems && link.subItems.length > 0;
+  const NAVIGATION_ITEMS = useMemo(() => {
+    if (isCollapsed) {
+      return NAVIGATION.flatMap((item) => {
+        if (item.subItems && expandedItems.includes(item.name)) {
+          return [
+            item,
+            ...item.subItems.filter((subItem) => subItem.icon !== null),
+          ];
+        }
+        return [item];
+      }).filter((item) => item.icon !== null);
+    }
 
-    return (
-      <div key={link.name}>
-        {isCollapsed ? (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <Link
-                href={hasSubItems ? "#" : link.href}
-                onClick={
-                  hasSubItems ? () => toggleExpand(link.name) : undefined
-                }
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                    size: "icon",
-                  }),
-                  "h-9 w-9",
-                  link.current && "bg-accent hover:bg-accent"
-                )}
-              >
-                <link.icon
-                  className={cn(
-                    "h-4 w-4",
-                    link.current && "text-accent-foreground"
-                  )}
-                />
-                <span className="sr-only">{link.name}</span>
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent
-              side="right"
-              className="flex items-center gap-4 dark:bg-gray-800 dark:text-gray-200"
-            >
-              {link.name}
-              {link.featured && (
-                <span className="ml-auto text-muted-foreground">New</span>
-              )}
-            </TooltipContent>
-          </Tooltip>
-        ) : (
-          <div className={cn(isSubItem && "ml-4")}>
-            <Link
-              href={hasSubItems ? "#" : link.href}
-              onClick={hasSubItems ? () => toggleExpand(link.name) : undefined}
-              className={cn(
-                buttonVariants({
-                  variant: link.current ? "secondary" : "ghost",
-                  size: "sm",
-                }),
-                "justify-start w-full",
-                hasSubItems && "flex items-center justify-between"
-              )}
-            >
-              <div className="flex items-center">
-                <link.icon
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    link.current && "text-accent-foreground"
-                  )}
-                />
-                {link.name}
-              </div>
-              {hasSubItems && (
-                <ChevronRightIcon
-                  className={cn(
-                    "h-4 w-4 transition-transform",
-                    expandedItems.includes(link.name) && "rotate-90"
-                  )}
-                />
-              )}
-            </Link>
-          </div>
-        )}
-        {hasSubItems && expandedItems.includes(link.name) && !isCollapsed && (
-          <div className="ml-4 mt-1">
-            {link.subItems!.map((subItem) => renderNavItem(subItem, true))}
-          </div>
-        )}
-      </div>
-    );
-  };
+    return NAVIGATION.map((item) => {
+      if (item.subItems) {
+        return {
+          ...item,
+          subItems: item.subItems.map((subItem) => ({
+            ...subItem,
+            href: subItem.href,
+          })),
+        };
+      }
+      return item;
+    });
+  }, [NAVIGATION, isCollapsed, expandedItems]);
 
   return (
     <>
       <div
         className={cn(
           "hidden md:block",
-          isCollapsed ? "w-16" : "w-56",
+          largeWith,
           "transition-all duration-300"
         )}
       />
       <div
         className={cn(
           "hidden md:flex md:flex-col z-30 bg-background dark:bg-gray-900 transition-all duration-300 h-screen bg-white pb-4",
-          isCollapsed ? "md:w-16" : "md:w-56",
+          largeWith,
           "fixed top-0 left-0" // Changed from "sticky top-0" to "fixed top-0 left-0"
         )}
       >
         <div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-gray-700 justify-between">
           <div className="flex items-center gap-2 h-14 border-b dark:border-gray-700">
-            {!isCollapsed && <OrgDropdown setReferOpen={setReferOpen} />}
-            <div className={cn("mx-auto", !isCollapsed && "mr-2")}>
+            <div className="flex items-center gap-2 w-full">
+              {!isCollapsed && <OrgDropdown />}
+            </div>
+            <div className={cn("mx-auto", isCollapsed ? "w-fit" : "mr-2")}>
               <Button
                 variant="ghost"
                 size="icon"
@@ -178,7 +127,6 @@ const DesktopSidebar = ({
               </Button>
             </div>
           </div>
-
           <div className="flex flex-grow flex-col">
             {((!isCollapsed &&
               org?.currentOrg?.organization_type === "reseller") ||
@@ -209,11 +157,36 @@ const DesktopSidebar = ({
               className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 "
             >
               <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
-                {NAVIGATION.map((link) => renderNavItem(link))}
+                {NAVIGATION_ITEMS.map((link) => (
+                  <NavItem
+                    key={link.name}
+                    link={link}
+                    isCollapsed={isCollapsed}
+                    expandedItems={expandedItems}
+                    toggleExpand={toggleExpand}
+                  />
+                ))}
               </nav>
             </div>
           </div>
-
+          {!isCollapsed && (
+            <div className="p-2">
+              <InfoBox icon={() => <></>} className="flex flex-col">
+                <div>
+                  <span className="text-[#1c4ed8] text-xs font-semibold font-['Inter'] leading-tight">
+                    Early Adopter Exclusive: $120 Credit for the year. <br />
+                  </span>
+                  <span className="text-[#1c4ed8] text-xs font-light font-['Inter'] leading-tight">
+                    Switch to Pro and get $10/mo credit for 1 year, as a thank
+                    you for your early support!
+                  </span>
+                </div>
+                <Button className="bg-blue-700 mt-[10px] text-xs" size="xs">
+                  <Link href="/settings/billing">Upgrade to Pro</Link>
+                </Button>
+              </InfoBox>
+            </div>
+          )}
           <div className="mt-auto">
             {isCollapsed ? (
               <>
@@ -271,7 +244,7 @@ const DesktopSidebar = ({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="w-full justify-start dark:hover:bg-gray-800"
+                  className="w-full justify-start dark:hover:bg-gray-800 text-[12px]"
                   asChild
                 >
                   <Link
@@ -281,47 +254,47 @@ const DesktopSidebar = ({
                     className="px-2"
                   >
                     <BookOpenIcon className="h-4 w-4 mr-2" />
-                    View Documentation
+                    Documentation
                   </Link>
                 </Button>
+
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="w-full justify-start dark:hover:bg-gray-800"
+                  className="w-full justify-start dark:hover:bg-gray-800 text-[12px]"
                   asChild
                 >
                   <Link
-                    href="https://discord.gg/zsSTcH2qhG"
-                    target="_blank"
+                    href="/settings"
                     rel="noopener noreferrer"
                     className="px-2"
                   >
-                    <QuestionMarkCircleIcon className="h-4 w-4 mr-2" />
-                    Help And Support
+                    <Cog6ToothIcon className="h-4 w-4 mr-2" />
+                    Settings
                   </Link>
                 </Button>
               </>
             )}
           </div>
-
-          {tier === "free" &&
+          {/* {tier === "free" &&
             org?.currentOrg?.organization_type !== "customer" && (
-              <div className={cn("p-4", isCollapsed && "hidden")}>
-                <Button
-                  variant="outline"
-                  className="w-full justify-between dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
-                  onClick={() => setOpen(true)}
-                >
-                  <div className="flex items-center">
-                    <CloudArrowUpIcon className="h-5 w-5 mr-1.5" />
-                    <span>Free Plan</span>
-                  </div>
-                  <span className="text-xs font-normal text-primary dark:text-gray-300">
-                    Learn More
-                  </span>
-                </Button>
+              <div className={cn("p-2", isCollapsed && "hidden")}>
+                <Link href="/settings/billing">
+                  <Button
+                    variant="outline"
+                    className="w-full justify-between dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                  >
+                    <div className="flex items-center">
+                      <CloudArrowUpIcon className="h-5 w-5 mr-1.5" />
+                      <span>Free Plan</span>
+                    </div>
+                    <span className="text-xs font-normal text-primary dark:text-gray-300">
+                      Upgrade
+                    </span>
+                  </Button>
+                </Link>
               </div>
-            )}
+            )} */}
         </div>
       </div>
     </>
diff --git a/web/components/layout/auth/MobileNavigation.tsx b/web/components/layout/auth/MobileNavigation.tsx
index 07908b1b0b..787487f274 100644
--- a/web/components/layout/auth/MobileNavigation.tsx
+++ b/web/components/layout/auth/MobileNavigation.tsx
@@ -18,24 +18,14 @@ import {
 } from "@heroicons/react/24/outline";
 import { clsx } from "../../shared/clsx";
 import ThemedDropdown from "../../shared/themed/themedDropdown";
+import { NavigationItem } from "./DesktopSidebar";
 
 interface MobileNavigationProps {
-  NAVIGATION: {
-    name: string;
-    href: string;
-    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-    current: boolean;
-    featured?: boolean;
-  }[];
-  setReferOpen: (open: boolean) => void;
+  NAVIGATION: NavigationItem[];
   setOpen: (open: boolean) => void;
 }
 
-const MobileNavigation = ({
-  NAVIGATION,
-  setReferOpen,
-  setOpen,
-}: MobileNavigationProps) => {
+const MobileNavigation = ({ NAVIGATION, setOpen }: MobileNavigationProps) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const router = useRouter();
   const supabaseClient = useSupabaseClient<Database>();
@@ -198,12 +188,14 @@ const MobileNavigation = ({
                         )}
                         onClick={() => setSidebarOpen(false)}
                       >
-                        <link.icon
-                          className={clsx(
-                            "mr-3 h-6 w-6",
-                            link.current ? "text-gray-500" : "text-gray-400"
-                          )}
-                        />
+                        {link.icon && (
+                          <link.icon
+                            className={clsx(
+                              "mr-3 h-6 w-6",
+                              link.current ? "text-gray-500" : "text-gray-400"
+                            )}
+                          />
+                        )}
                         {link.name}
                         {link.featured && (
                           <span className="ml-auto text-xs font-normal text-gray-400">
diff --git a/web/components/layout/auth/NavItem.tsx b/web/components/layout/auth/NavItem.tsx
new file mode 100644
index 0000000000..cc9463073e
--- /dev/null
+++ b/web/components/layout/auth/NavItem.tsx
@@ -0,0 +1,142 @@
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+interface NavigationItem {
+  name: string;
+  href: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>> | null;
+  current: boolean;
+  featured?: boolean;
+  subItems?: NavigationItem[];
+}
+
+interface NavItemProps {
+  link: NavigationItem;
+  isCollapsed: boolean;
+  isSubItem?: boolean;
+  expandedItems: string[];
+  toggleExpand: (name: string) => void;
+}
+
+const NavItem: React.FC<NavItemProps> = ({
+  link,
+  isCollapsed,
+  isSubItem = false,
+  expandedItems,
+  toggleExpand,
+}) => {
+  const router = useRouter();
+  const hasSubItems = link.subItems && link.subItems.length > 0;
+
+  if (isCollapsed) {
+    return (
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <Link
+            href={hasSubItems ? link.subItems![0].href : link.href}
+            onClick={(e) => {
+              if (hasSubItems) {
+                e.preventDefault();
+                router.push(link.subItems![0].href);
+              }
+            }}
+            className={cn(
+              buttonVariants({
+                variant: "ghost",
+                size: "icon",
+              }),
+              "h-9 w-9",
+              link.current && "bg-accent hover:bg-accent"
+            )}
+          >
+            {link.icon && (
+              <link.icon
+                className={cn(
+                  "h-4 w-4",
+                  link.current && "text-accent-foreground"
+                )}
+              />
+            )}
+            <span className="sr-only">{link.name}</span>
+          </Link>
+        </TooltipTrigger>
+        <TooltipContent
+          side="right"
+          className="flex items-center gap-4 dark:bg-gray-800 dark:text-gray-200"
+        >
+          {link.name}
+          {link.featured && (
+            <span className="ml-auto text-muted-foreground">New</span>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div className={cn(isSubItem)}>
+      <Link
+        href={hasSubItems ? "#" : link.href}
+        onClick={hasSubItems ? () => toggleExpand(link.name) : undefined}
+        className={cn(
+          hasSubItems
+            ? "flex items-center gap-1 font-medium text-gray-400 text-xs mt-[10px] text-[11px]"
+            : cn(
+                buttonVariants({
+                  variant: link.current ? "secondary" : "ghost",
+                  size: "xs",
+                }),
+                "h-6",
+                "justify-start w-full",
+                "text-sm font-medium my-[2px] text-[12px]"
+              ),
+          ""
+        )}
+      >
+        <div className="flex items-center">
+          {link.icon && (
+            <link.icon
+              className={cn(
+                "mr-2 h-4 w-4",
+                link.current && "text-accent-foreground"
+              )}
+            />
+          )}
+          {link.name}
+        </div>
+        {hasSubItems && (
+          <ChevronRightIcon
+            className={cn(
+              "h-3 w-3 transition-transform fill-gray-400",
+              expandedItems.includes(link.name) && "rotate-90"
+            )}
+          />
+        )}
+      </Link>
+      {hasSubItems && expandedItems.includes(link.name) && (
+        <div className="mt-1">
+          {link.subItems!.map((subItem) => (
+            <NavItem
+              key={subItem.name}
+              link={subItem}
+              isCollapsed={isCollapsed}
+              isSubItem={true}
+              expandedItems={expandedItems}
+              toggleExpand={toggleExpand}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NavItem;
diff --git a/web/components/layout/auth/Sidebar.tsx b/web/components/layout/auth/Sidebar.tsx
index 4b0738cbe1..b7fe9d7a49 100644
--- a/web/components/layout/auth/Sidebar.tsx
+++ b/web/components/layout/auth/Sidebar.tsx
@@ -2,14 +2,11 @@
 
 import {
   ArchiveBoxIcon,
-  BeakerIcon,
   BellIcon,
-  ChartBarIcon,
+  BuildingLibraryIcon,
   CircleStackIcon,
-  CodeBracketIcon,
-  Cog6ToothIcon,
-  DocumentTextIcon,
   HomeIcon,
+  LockClosedIcon,
   ShieldCheckIcon,
   SparklesIcon,
   TableCellsIcon,
@@ -19,24 +16,23 @@ import {
 import { useUser } from "@supabase/auth-helpers-react";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
-import { GoRepoForked } from "react-icons/go";
-import DesktopSidebar from "./DesktopSidebar";
+import DesktopSidebar, { NavigationItem } from "./DesktopSidebar";
 
 import { PiGraphLight } from "react-icons/pi";
 import MobileNavigation from "./MobileNavigation";
+import { useOrg } from "../organizationContext";
+import { NotepadText, TestTube2, Webhook } from "lucide-react";
 
 interface SidebarProps {
-  tier: string;
-  setReferOpen: (open: boolean) => void;
   setOpen: (open: boolean) => void;
 }
 
-const Sidebar = ({ tier, setReferOpen, setOpen }: SidebarProps) => {
+const Sidebar = ({ setOpen }: SidebarProps) => {
   const router = useRouter();
   const { pathname } = router;
   const user = useUser();
-
-  const NAVIGATION = useMemo(
+  const org = useOrg();
+  const NAVIGATION: NavigationItem[] = useMemo(
     () => [
       {
         name: "Dashboard",
@@ -50,111 +46,185 @@ const Sidebar = ({ tier, setReferOpen, setOpen }: SidebarProps) => {
         icon: TableCellsIcon,
         current: pathname.includes("/requests"),
       },
+
       {
-        name: "Datasets",
-        href: "/datasets",
-        icon: CircleStackIcon,
-        current: pathname.includes("/datasets"),
-      },
-      ...(!user?.email?.includes("@helicone.ai")
-        ? []
-        : [
-            {
-              name: "Evals",
-              href: "/evals",
-              icon: ChartBarIcon,
-              current: pathname.includes("/evals"),
-            },
-            {
-              name: "Connections",
-              href: "/connections",
-              icon: GoRepoForked,
-              current: pathname.includes("/connections"),
-            },
-          ]),
-      {
-        name: "Sessions",
-        href: "/sessions",
-        icon: PiGraphLight,
-        current: pathname.includes("/sessions"),
-      },
-      {
-        name: "Prompts",
-        href: "/prompts",
-        icon: DocumentTextIcon,
-        current: pathname.includes("/prompts"),
-      },
-      {
-        name: "Users",
-        href: "/users",
-        icon: UsersIcon,
-        current: pathname.includes("/users"),
-      },
-      {
-        name: "Alerts",
-        href: "/alerts",
-        icon: BellIcon,
-        current: pathname.includes("/alerts"),
-      },
-      {
-        name: "Fine-Tune",
-        href: "/fine-tune",
-        icon: SparklesIcon,
-        current: pathname.includes("/fine-tune"),
-      },
-      {
-        name: "Properties",
-        href: "/properties",
-        icon: TagIcon,
-        current: pathname.includes("/properties"),
-      },
-      {
-        name: "Cache",
-        href: "/cache",
-        icon: ArchiveBoxIcon,
-        current: pathname.includes("/cache"),
-      },
-      {
-        name: "Rate Limits",
-        href: "/rate-limit",
-        icon: ShieldCheckIcon,
-        current: pathname.includes("/rate-limit"),
+        name: "Segments",
+        href: "/segments",
+        icon: null,
+        current: false,
+        subItems: [
+          {
+            name: "Sessions",
+            href: "/sessions",
+            icon: PiGraphLight,
+            current: pathname.includes("/sessions"),
+          },
+          {
+            name: "Properties",
+            href: "/properties",
+            icon: TagIcon,
+            current: pathname.includes("/properties"),
+          },
+
+          {
+            name: "Users",
+            href: "/users",
+            icon: UsersIcon,
+            current: pathname.includes("/users"),
+          },
+        ],
       },
       {
-        name: "Playground",
-        href: "/playground",
-        icon: BeakerIcon,
-        current: pathname.includes("/playground"),
+        name: "Improve",
+        href: "/improve",
+        icon: null,
+        current: false,
+        subItems: [
+          {
+            name: "Prompts",
+            href: "/prompts",
+            icon: NotepadText,
+            current: pathname.includes("/prompts"),
+          },
+          {
+            name: "Playground",
+            href: "/playground",
+            icon: TestTube2,
+            current: pathname.includes("/playground"),
+          },
+
+          ...(!user?.email?.includes("@helicone.ai")
+            ? []
+            : [
+                {
+                  name: "Evals",
+                  href: "/evals",
+                  icon: SparklesIcon,
+                  current: pathname.includes("/evals"),
+                },
+              ]),
+          {
+            name: "Datasets",
+            href: "/datasets",
+            icon: CircleStackIcon,
+            current: pathname.includes("/datasets"),
+          },
+        ],
       },
+
       {
         name: "Developer",
         href: "/developer",
-        icon: CodeBracketIcon,
+        icon: null,
         current: pathname.includes("/developer"),
+        subItems: [
+          {
+            name: "Cache",
+            href: "/cache",
+            icon: ArchiveBoxIcon,
+            current: pathname.includes("/cache"),
+          },
+          {
+            name: "Rate Limits",
+            href: "/rate-limit",
+            icon: ShieldCheckIcon,
+            current: pathname === "/rate-limit",
+          },
+          {
+            name: "Alerts",
+            href: "/alerts",
+            icon: BellIcon,
+            current: pathname.includes("/alerts"),
+          },
+          {
+            name: "Webhooks",
+            href: "/webhooks",
+            icon: Webhook,
+            current: pathname.includes("/webhooks"),
+          },
+          {
+            name: "Vault",
+            href: "/vault",
+            icon: LockClosedIcon,
+            current: pathname.includes("/vault"),
+          },
+        ],
       },
-      {
-        name: "Settings",
-        href: "/settings",
-        icon: Cog6ToothIcon,
-        current: pathname.includes("/settings"),
-      },
+      ...(org?.currentOrg?.tier === "enterprise"
+        ? [
+            {
+              name: "Enterprise",
+              href: "/enterprise",
+              icon: BuildingLibraryIcon,
+              current: pathname.includes("/enterprise"),
+              subItems: [
+                {
+                  name: "Webhooks",
+                  href: "/enterprise/webhooks",
+                  icon: null,
+                  current: false,
+                },
+                {
+                  name: "Vault",
+                  href: "/enterprise/vault",
+                  icon: null,
+                  current: false,
+                },
+              ],
+            },
+          ]
+        : []),
+      // {
+      //   name: "Settings",
+      //   href: "/settings",
+      //   icon: Cog6ToothIcon,
+      //   current: false,
+      //   subItems: [
+      //     {
+      //       name: "Organization",
+      //       href: "/settings/organization",
+      //       icon: null,
+      //       current: false,
+      //     },
+      //     {
+      //       name: "API Keys",
+      //       href: "/settings/api-keys",
+      //       icon: null,
+      //       current: false,
+      //     },
+      //     ...(!user?.email?.includes("@helicone.ai")
+      //       ? []
+      //       : [
+      //           {
+      //             name: "Connections",
+      //             href: "/settings/connections",
+      //             icon: null,
+      //             current: pathname.includes("/settings/connections"),
+      //           },
+      //         ]),
+      //     {
+      //       name: "Members",
+      //       href: "/settings/members",
+      //       icon: null,
+      //       current: false,
+      //     },
+      //     {
+      //       name: "Billing",
+      //       href: "/settings/billing",
+      //       icon: null,
+      //       current: pathname.includes("/settings/billing"),
+      //     },
+      //   ],
+      // },
     ],
     [pathname, user?.email]
   );
 
   return (
     <>
-      <MobileNavigation
-        NAVIGATION={NAVIGATION}
-        setReferOpen={setReferOpen}
-        setOpen={setOpen}
-      />
+      <MobileNavigation NAVIGATION={NAVIGATION} setOpen={setOpen} />
 
-      <DesktopSidebar
-        NAVIGATION={NAVIGATION}
-        setReferOpen={setReferOpen}
-        setOpen={setOpen}
-      />
+      <DesktopSidebar NAVIGATION={NAVIGATION} setOpen={setOpen} />
     </>
   );
 };
diff --git a/web/components/layout/auth/authLayout.tsx b/web/components/layout/auth/authLayout.tsx
index 249acbb487..c975608b7c 100644
--- a/web/components/layout/auth/authLayout.tsx
+++ b/web/components/layout/auth/authLayout.tsx
@@ -7,7 +7,6 @@ import { useOrg } from "../organizationContext";
 import UpgradeProModal from "../../shared/upgradeProModal";
 
 import { useAlertBanners } from "../../../services/hooks/admin";
-import ReferralModal from "../../shared/referralModal";
 import MetaData from "../public/authMetaData";
 import DemoModal from "./DemoModal";
 
@@ -24,8 +23,7 @@ const AuthLayout = (props: AuthLayoutProps) => {
   const router = useRouter();
   const { pathname } = router;
   const org = useOrg();
-  const tier = org?.currentOrg?.tier;
-  const [referOpen, setReferOpen] = useState(false);
+
   const [open, setOpen] = useState(false);
 
   const currentPage = useMemo(() => {
@@ -50,11 +48,7 @@ const AuthLayout = (props: AuthLayoutProps) => {
         <DemoModal />
         <Row className="flex-col md:flex-row">
           <div className=" w-full md:w-min ">
-            <Sidebar
-              tier={tier ?? ""}
-              setReferOpen={setReferOpen}
-              setOpen={setOpen}
-            />
+            <Sidebar setOpen={setOpen} />
           </div>
           <div className="flex-grow max-w-full overflow-hidden">
             <MainContent banner={banner} pathname={pathname}>
@@ -63,7 +57,7 @@ const AuthLayout = (props: AuthLayoutProps) => {
           </div>
         </Row>
       </div>
-      <ReferralModal open={referOpen} setOpen={setReferOpen} />
+
       <UpgradeProModal open={open} setOpen={setOpen} />
     </MetaData>
   );
diff --git a/web/components/layout/common/button.tsx b/web/components/layout/common/button.tsx
index 993e0335d4..4521e18502 100644
--- a/web/components/layout/common/button.tsx
+++ b/web/components/layout/common/button.tsx
@@ -1,20 +1,23 @@
 import React from "react";
 
 interface GenericButtonProps {
-  onClick: () => void;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: React.ReactNode;
   text: string;
   count?: number;
+  disabled?: boolean;
+  className?: string;
 }
 
 export const GenericButton = React.forwardRef<
   HTMLButtonElement,
   GenericButtonProps
->(({ onClick, icon, text, count }, ref) => (
+>(({ onClick, icon, text, count, disabled, className }, ref) => (
   <button
     ref={ref}
-    className="bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg px-2.5 py-1.5 hover:bg-sky-50 dark:hover:bg-sky-900 flex flex-row items-center gap-2"
+    className={`bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg px-2.5 py-1.5 hover:bg-sky-50 dark:hover:bg-sky-900 flex flex-row items-center gap-2 ${className}`}
     onClick={onClick}
+    disabled={disabled}
   >
     {icon && icon}
     <div className="text-sm font-medium items-center text-gray-900 dark:text-gray-100 hidden sm:flex gap-1">
diff --git a/web/components/layout/orgDropdown.tsx b/web/components/layout/orgDropdown.tsx
index b9b373a139..3112e0edde 100644
--- a/web/components/layout/orgDropdown.tsx
+++ b/web/components/layout/orgDropdown.tsx
@@ -26,11 +26,9 @@ import CreateOrgForm, {
 } from "../templates/organization/createOrgForm";
 import { useOrg } from "./organizationContext";
 
-interface OrgDropdownProps {
-  setReferOpen: (open: boolean) => void;
-}
+interface OrgDropdownProps {}
 
-export default function OrgDropdown({ setReferOpen }: OrgDropdownProps) {
+export default function OrgDropdown({}: OrgDropdownProps) {
   const orgContext = useOrg();
   const user = useUser();
   const [createOpen, setCreateOpen] = useState(false);
@@ -89,21 +87,22 @@ export default function OrgDropdown({ setReferOpen }: OrgDropdownProps) {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="justify-between ml-2 w-full">
-            <div className="flex items-center w-full">
-              {currentIcon && (
-                <currentIcon.icon
-                  className={clsx(
-                    `text-${currentColor?.name}-500`,
-                    "mr-3 flex-shrink-0 h-4 w-4"
-                  )}
-                  aria-hidden="true"
-                />
-              )}
-              <p className="text-sm font-semibold truncate w-fit max-w-[7.25rem] text-left">
-                {orgContext?.currentOrg?.name}
-              </p>
-            </div>
+          <Button
+            variant="ghost"
+            className="flex  items-center justify-start w-full ml-1 p-2"
+          >
+            {currentIcon && (
+              <currentIcon.icon
+                className={clsx(
+                  `text-${currentColor?.name}-500`,
+                  "mr-2 flex-shrink-0 h-4 w-4"
+                )}
+                aria-hidden="true"
+              />
+            )}
+            <p className="text-xs font-semibold truncate w-fit text-left">
+              {orgContext?.currentOrg?.name}
+            </p>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-[15rem] ml-2 mt-1 max-h-[90vh] flex flex-col">
@@ -219,9 +218,6 @@ export default function OrgDropdown({ setReferOpen }: OrgDropdownProps) {
           <DropdownMenuItem onSelect={() => createNewOrgHandler()}>
             Create New Org
           </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => setAddOpen(true)}>
-            Invite Members
-          </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuLabel>User Settings</DropdownMenuLabel>
           <DropdownMenuItem
diff --git a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
new file mode 100644
index 0000000000..1f8a3ede01
--- /dev/null
+++ b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
@@ -0,0 +1,156 @@
+import React, { useState, forwardRef, useMemo, useCallback } from "react";
+import { useOrg } from "@/components/layout/organizationContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useRouter } from "next/router";
+import { CheckIcon } from "lucide-react";
+import { UpgradeToProCTA } from "@/components/templates/pricing/upgradeToProCTA";
+
+interface ProFeatureWrapperProps {
+  children: React.ReactElement;
+  featureName: string;
+  enabled?: boolean;
+}
+
+const descriptions = {
+  Datasets:
+    "The Free plan does not include the Datasets feature, but getting access is easy.",
+  Alerts:
+    "Stay on top of critical issues by receiving real-time alerts directly to your Slack workspace or email. ",
+  time_filter:
+    "Free plan users can only access data up to 30 days old. Upgrade to Pro for unlimited access to 3m+ data.",
+  invite:
+    "The Free plan does not allow you to invite members to your organization. Upgrade to Pro to invite your team members.",
+};
+
+export const ProFeatureWrapper = forwardRef<
+  HTMLElement,
+  ProFeatureWrapperProps
+>(({ children, featureName, enabled = true }, ref) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const org = useOrg();
+
+  const customDescription = useMemo(
+    () => descriptions?.[featureName as keyof typeof descriptions],
+    [featureName]
+  );
+
+  const hasAccess = React.useMemo(() => {
+    return (
+      enabled &&
+      (org?.currentOrg?.tier === "pro-20240913" ||
+        org?.currentOrg?.tier === "growth" ||
+        (org?.currentOrg?.stripe_metadata as { addons?: { prompts?: boolean } })
+          ?.addons?.prompts)
+    );
+  }, [org?.currentOrg?.tier, org?.currentOrg?.stripe_metadata, enabled]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!hasAccess) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDialogOpen(true);
+      } else if (children.props.onClick) {
+        children.props.onClick(e);
+      }
+    },
+    [hasAccess, children.props, setIsDialogOpen]
+  );
+
+  const isPro = useMemo(() => {
+    return org?.currentOrg?.tier === "pro-20240913";
+  }, [org?.currentOrg?.tier]);
+  return (
+    <>
+      {React.cloneElement(children, {
+        ref,
+        onClick: handleClick,
+        className: !hasAccess
+          ? `${children.props.className || ""} `
+          : children.props.className,
+      })}
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Need more requests?</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-gray-500 mb-4">
+            {customDescription ||
+              "The Free plan only comes with 10,000 requests per month, but getting more is easy."}
+          </p>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="border rounded-lg p-4">
+              <h3 className="font-semibold mb-2">Free</h3>
+              {!isPro && (
+                <span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
+                  Current plan
+                </span>
+              )}
+              <ul className="mt-4 space-y-2">
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  10k free requests/month
+                </li>
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  Access to Dashboard
+                </li>
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  Free, truly
+                </li>
+              </ul>
+            </div>
+            <div className="border rounded-lg p-4">
+              <h3 className="font-semibold mb-2">Pro</h3>
+              {isPro && (
+                <span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
+                  Current plan
+                </span>
+              )}
+              <span className="text-sm">$20/user</span>
+              <p className="text-sm mt-2">Everything in Free, plus:</p>
+              <ul className="mt-4 space-y-2">
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  Limitless requests (first 100k free)
+                </li>
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  Access to all features
+                </li>
+                <li className="flex items-center text-sm">
+                  <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                  Standard support
+                </li>
+              </ul>
+              <a href="#" className="text-sm text-blue-600 mt-2 block">
+                See all features →
+              </a>
+
+              <UpgradeToProCTA
+                defaultPrompts={featureName === "Prompts"}
+                defaultAlerts={featureName === "Alerts"}
+                showAddons={
+                  featureName === "Prompts" || featureName === "Alerts"
+                }
+              />
+            </div>
+          </div>
+          <p className="text-sm text-gray-500 mt-4">
+            Don&apos;t worry, we are still processing all your incoming
+            requests. You will be able to see them when you upgrade to Pro.
+          </p>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+});
+
+ProFeatureWrapper.displayName = "ProFeatureWrapper";
diff --git a/web/components/shared/helicone/FeatureUpgradeCard.tsx b/web/components/shared/helicone/FeatureUpgradeCard.tsx
new file mode 100644
index 0000000000..bbbafbfc9e
--- /dev/null
+++ b/web/components/shared/helicone/FeatureUpgradeCard.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { ChevronDownIcon, ChevronUpIcon, CheckIcon } from "lucide-react";
+
+interface FeatureUpgradeCardProps {
+  title: string;
+  description: string;
+  infoBoxText: string;
+  videoSrc?: string;
+  youtubeVideo?: string;
+  documentationLink: string;
+}
+
+export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
+  title,
+  description,
+  infoBoxText,
+  videoSrc,
+  youtubeVideo,
+  documentationLink,
+}) => {
+  const [isPlanComparisonVisible, setIsPlanComparisonVisible] = useState(false);
+
+  return (
+    <Card className="max-w-2xl">
+      <CardHeader>
+        <CardTitle className="text-lg font-medium">{title}</CardTitle>
+        <p className="text-sm text-muted-foreground text-slate-400">
+          {description}
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <InfoBox>
+          <p className="text-sm font-medium">{infoBoxText}</p>
+        </InfoBox>
+        {videoSrc && (
+          <div className="flex justify-center items-center h-[500px]">
+            <video width="100%" className="h-[500px]" autoPlay muted loop>
+              <source src={videoSrc} type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        )}
+        {youtubeVideo && (
+          <iframe
+            width="100%"
+            height="420"
+            src={youtubeVideo}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        )}
+      </CardContent>
+      <CardFooter className="flex flex-col justify-between">
+        <Button
+          variant="link"
+          className="px-0 w-full text-left flex justify-start"
+          onClick={() => setIsPlanComparisonVisible(!isPlanComparisonVisible)}
+        >
+          Compare my plan with Pro{" "}
+          {isPlanComparisonVisible ? (
+            <ChevronUpIcon className="ml-1 h-4 w-4" />
+          ) : (
+            <ChevronDownIcon className="ml-1 h-4 w-4" />
+          )}
+        </Button>
+        {isPlanComparisonVisible && (
+          <div className="mt-4 p-4 border rounded-md">
+            <h3 className="text-lg font-semibold mb-4">Plan Comparison</h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="border rounded-lg p-4">
+                <h3 className="font-semibold mb-2">Free</h3>
+                <span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
+                  Current plan
+                </span>
+                <ul className="mt-4 space-y-2">
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    10k free requests/month
+                  </li>
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    Access to Dashboard
+                  </li>
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    Free, truly
+                  </li>
+                </ul>
+              </div>
+              <div className="border rounded-lg p-4">
+                <h3 className="font-semibold mb-2">Pro</h3>
+                <span className="text-sm">$20/user</span>
+                <p className="text-sm mt-2">Everything in Free, plus:</p>
+                <ul className="mt-4 space-y-2">
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    Limitless requests (first 100k free)
+                  </li>
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    Access to all features
+                  </li>
+                  <li className="flex items-center text-sm">
+                    <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+                    Standard support
+                  </li>
+                </ul>
+                <a href="#" className="text-sm text-blue-600 mt-2 block">
+                  See all features →
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="space-x-2 mt-4">
+          <Button variant="outline" asChild>
+            <Link href={documentationLink}>View documentation</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/settings/billing">Start 14-day free trial</Link>
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
diff --git a/web/components/shared/themed/themedTimeFilter.tsx b/web/components/shared/themed/themedTimeFilter.tsx
index f328119a7e..d8294be07f 100644
--- a/web/components/shared/themed/themedTimeFilter.tsx
+++ b/web/components/shared/themed/themedTimeFilter.tsx
@@ -6,6 +6,7 @@ import useNotification from "../notification/useNotification";
 import useSearchParams from "../utils/useSearchParams";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { TimeFilter } from "../../templates/dashboard/dashboardPage";
+import { ProFeatureWrapper } from "../ProBlockerComponents/ProFeatureWrapper";
 
 interface ThemedTimeFilterProps {
   timeFilterOptions: { key: string; value: string }[];
@@ -257,30 +258,57 @@ const ThemedTimeFilter = (props: ThemedTimeFilterProps) => {
         </>
       )}
 
-      {timeFilterOptions.map((option, idx) => (
-        <button
-          key={option.key}
-          type="button"
-          disabled={isFetching}
-          onClick={() => {
-            searchParams.set("t", option.key);
-            setActive(option.key);
-            onSelect(option.key, option.value);
-          }}
-          className={clsx(
-            "text-gray-900 dark:text-gray-100",
-            isActive(option.key)
-              ? "bg-sky-200 border-sky-300 border dark:bg-sky-800 dark:border-sky-700"
-              : "bg-white hover:bg-sky-50 border-gray-300 dark:bg-black dark:hover:bg-sky-900 dark:border-gray-700",
-            idx === timeFilterOptions.length - 1 ? "rounded-r-lg" : "",
-            !custom && idx === 0
-              ? "relative inline-flex items-center rounded-l-lg border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
-              : "relative -ml-px inline-flex items-center border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
-          )}
-        >
-          {option.value}
-        </button>
-      ))}
+      {timeFilterOptions.map((option, idx) =>
+        ["3M", "All"].includes(option.value) ? (
+          <ProFeatureWrapper featureName="time_filter" key={option.key}>
+            <button
+              key={option.key}
+              type="button"
+              disabled={isFetching}
+              onClick={() => {
+                searchParams.set("t", option.key);
+                setActive(option.key);
+                onSelect(option.key, option.value);
+              }}
+              className={clsx(
+                "text-gray-900 dark:text-gray-100",
+                isActive(option.key)
+                  ? "bg-sky-200 border-sky-300 border dark:bg-sky-800 dark:border-sky-700"
+                  : "bg-white hover:bg-sky-50 border-gray-300 dark:bg-black dark:hover:bg-sky-900 dark:border-gray-700",
+                idx === timeFilterOptions.length - 1 ? "rounded-r-lg" : "",
+                !custom && idx === 0
+                  ? "relative inline-flex items-center rounded-l-lg border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
+                  : "relative -ml-px inline-flex items-center border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
+              )}
+            >
+              {option.value}
+            </button>
+          </ProFeatureWrapper>
+        ) : (
+          <button
+            key={option.key}
+            type="button"
+            disabled={isFetching}
+            onClick={() => {
+              searchParams.set("t", option.key);
+              setActive(option.key);
+              onSelect(option.key, option.value);
+            }}
+            className={clsx(
+              "text-gray-900 dark:text-gray-100",
+              isActive(option.key)
+                ? "bg-sky-200 border-sky-300 border dark:bg-sky-800 dark:border-sky-700"
+                : "bg-white hover:bg-sky-50 border-gray-300 dark:bg-black dark:hover:bg-sky-900 dark:border-gray-700",
+              idx === timeFilterOptions.length - 1 ? "rounded-r-lg" : "",
+              !custom && idx === 0
+                ? "relative inline-flex items-center rounded-l-lg border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
+                : "relative -ml-px inline-flex items-center border px-3 py-1.5 text-sm font-medium focus:z-10 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400"
+            )}
+          >
+            {option.value}
+          </button>
+        )
+      )}
     </Menu>
   );
 };
diff --git a/web/components/templates/alerts/alertsPage.tsx b/web/components/templates/alerts/alertsPage.tsx
index 2dc9bd27d8..63f276328d 100644
--- a/web/components/templates/alerts/alertsPage.tsx
+++ b/web/components/templates/alerts/alertsPage.tsx
@@ -12,6 +12,8 @@ import { getUSDate } from "../../shared/utils/utils";
 import { Tooltip } from "@mui/material";
 import EditAlertModal from "./editAlertModal";
 import { useGetOrgSlackChannels } from "@/services/hooks/organizations";
+import { ProFeatureWrapper } from "@/components/shared/ProBlockerComponents/ProFeatureWrapper";
+import { Col } from "@/components/layout/common";
 
 interface AlertsPageProps {
   user: User;
@@ -70,26 +72,51 @@ const AlertsPage = (props: AlertsPageProps) => {
               organization
             </p>
           </div>
-          <button
-            onClick={() => setCreateNewAlertModal(true)}
-            className="bg-gray-900 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-300 whitespace-nowrap rounded-md px-4 py-2 text-sm font-semibold text-white dark:text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500"
-          >
-            Create a new alert
-          </button>
+
+          <Col className="items-end">
+            <ProFeatureWrapper
+              featureName="Alerts"
+              enabled={
+                (
+                  orgContext?.currentOrg?.stripe_metadata as {
+                    addons?: { alerts?: boolean };
+                  }
+                )?.addons?.alerts ?? false
+              }
+            >
+              <button
+                onClick={() => setCreateNewAlertModal(true)}
+                className="w-min bg-gray-900 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-300 whitespace-nowrap rounded-md px-4 py-2 text-sm font-semibold text-white dark:text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500"
+              >
+                Create a new alert
+              </button>
+            </ProFeatureWrapper>
+          </Col>
         </div>
         <ul className="">
           {alerts.length === 0 ? (
-            <button
-              onClick={() => setCreateNewAlertModal(true)}
-              className="relative block w-full rounded-lg border-2 border-dashed bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 hover:cursor-pointer border-gray-500 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            <ProFeatureWrapper
+              featureName="Alerts"
+              enabled={
+                (
+                  orgContext?.currentOrg?.stripe_metadata as {
+                    addons?: { alerts?: boolean };
+                  }
+                )?.addons?.alerts ?? false
+              }
             >
-              <div className="w-full justify-center align-middle items-center">
-                <BellIcon className="h-10 w-10 mx-auto text-gray-900 dark:text-gray-100" />
-              </div>
-              <span className="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                Click here to generate a new alert
-              </span>
-            </button>
+              <button
+                onClick={() => setCreateNewAlertModal(true)}
+                className="relative block w-full rounded-lg border-2 border-dashed bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 hover:cursor-pointer border-gray-500 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                <div className="w-full justify-center align-middle items-center">
+                  <BellIcon className="h-10 w-10 mx-auto text-gray-900 dark:text-gray-100" />
+                </div>
+                <span className="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  Click here to generate a new alert
+                </span>
+              </button>
+            </ProFeatureWrapper>
           ) : (
             <ThemedTable
               columns={[
diff --git a/web/components/templates/cache/cachePage.tsx b/web/components/templates/cache/cachePage.tsx
index 3b056d2571..07f105e28a 100644
--- a/web/components/templates/cache/cachePage.tsx
+++ b/web/components/templates/cache/cachePage.tsx
@@ -5,7 +5,7 @@ import {
   ClockIcon,
   TableCellsIcon,
 } from "@heroicons/react/24/outline";
-import { ElementType, useState } from "react";
+import { ElementType, useMemo, useState } from "react";
 import {
   BarChart,
   Tab,
@@ -13,6 +13,8 @@ import {
   TabList,
   TabPanel,
   TabPanels,
+  Divider,
+  Badge,
 } from "@tremor/react";
 import ThemedDrawer from "../../shared/themed/themedDrawer";
 import ThemedListItem from "../../shared/themed/themedListItem";
@@ -27,6 +29,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import AuthHeader from "../../shared/authHeader";
 import { formatNumber } from "../users/initialColumns";
+import { useOrg } from "@/components/layout/organizationContext";
+import { DiffHighlight } from "../welcome/diffHighlight";
+import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 
 interface CachePageProps {
   currentPage: number;
@@ -86,9 +91,12 @@ const CachePage = (props: CachePageProps) => {
   const [open, setOpen] = useState<boolean>(false);
   const [openUpgradeModal, setOpenUpgradeModal] = useState<boolean>(false);
 
-  const hasCache = chMetrics.totalCacheHits.data?.data
-    ? +chMetrics.totalCacheHits.data?.data > 0
-    : true;
+  const hasCache = useMemo(() => {
+    return chMetrics.totalCacheHits.data?.data !== undefined &&
+      chMetrics.totalCacheHits.data?.data !== null
+      ? +chMetrics.totalCacheHits.data?.data > 0
+      : true;
+  }, [chMetrics.totalCacheHits.data?.data]);
 
   const metrics = [
     {
@@ -129,10 +137,17 @@ const CachePage = (props: CachePageProps) => {
 
   cacheDist.sort((a: any, b: any) => a.name.localeCompare(b.name));
 
+  const org = useOrg();
+  const isPro = org?.currentOrg?.tier !== "free";
+
   return (
     <>
       <AuthHeader
-        title={"Cache"}
+        title={
+          <div className="flex items-center gap-2">
+            Cache <Badge size="sm">Beta</Badge>
+          </div>
+        }
         actions={
           <Link
             href="https://docs.helicone.ai/features/advanced-usage/caching"
@@ -145,28 +160,83 @@ const CachePage = (props: CachePageProps) => {
         }
       />
 
-      {!hasCache ? (
-        <div className="flex flex-col w-full h-96 justify-center items-center">
-          <div className="flex flex-col w-2/5">
-            <CircleStackIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
+      {!isPro ? (
+        <div className="flex justify-center items-center min-h-[calc(100vh-200px)]">
+          <FeatureUpgradeCard
+            title="Unlock Cache"
+            description="The Free plan does not include the Cache feature, but getting access is easy."
+            infoBoxText="Optimize your LLM usage by caching responses and reducing redundant API calls."
+            youtubeVideo="https://www.youtube.com/embed/qIOq_NbeQ28?autoplay=1&mute=1"
+            documentationLink="https://docs.helicone.ai/features/advanced-usage/caching"
+          />
+        </div>
+      ) : !hasCache ? (
+        <div className="flex flex-col w-full mt-16 justify-center items-center">
+          <div className="flex flex-col">
+            <div className="w-fit pt-2 pl-0.5 bg-white border border-gray-300 rounded-md">
+              <CircleStackIcon className="h-10 w-10 flex items-center justify-center ml-2 text-gray-500" />
+            </div>
+
             <p className="text-xl text-black dark:text-white font-semibold mt-8">
-              No cache data available
+              {!isPro
+                ? "Upgrade to Pro to start using Cache"
+                : "No Cache Data Found"}
             </p>
             <p className="text-sm text-gray-500 max-w-sm mt-2">
-              Please view our documentation to learn how to enable cache for
-              your requests.
+              View our documentation to learn how to use caching.
             </p>
-            <div className="mt-4">
+            <div className="mt-4 flex gap-2">
               <Link
                 href="https://docs.helicone.ai/features/advanced-usage/caching"
-                target="_blank"
-                rel="noreferrer noopener"
                 className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
               >
                 <BookOpenIcon className="h-4 w-4" />
                 View Docs
               </Link>
             </div>
+
+            {isPro && (
+              <div>
+                <Divider>Or</Divider>
+
+                <div className="mt-4">
+                  <h3 className="text-xl text-black dark:text-white font-semibold">
+                    TS/JS Quick Start
+                  </h3>
+                  <DiffHighlight
+                    code={`
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  baseURL: "https://oai.helicone.ai/v1",
+  defaultHeaders: {
+    "Helicone-Auth": \`Bearer ${process.env.HELICONE_API_KEY}\`,
+  },
+});
+
+openai.chat.completions.create(
+  {
+    messages: [
+      {
+        role: "user",
+        content: "Generate an abstract for a course on space.",
+      },
+    ],
+    model: "gpt-4",
+  },
+  {
+    headers: {
+      "Helicone-Cache-Enabled": "true",
+    },
+  }
+);
+`}
+                    language="typescript"
+                    newLines={[]}
+                    oldLines={[]}
+                  />
+                </div>
+              </div>
+            )}
           </div>
         </div>
       ) : (
diff --git a/web/components/templates/connections/connectionsPage.tsx b/web/components/templates/connections/connectionsPage.tsx
index 0a63a9d0bf..8fc9578f5c 100644
--- a/web/components/templates/connections/connectionsPage.tsx
+++ b/web/components/templates/connections/connectionsPage.tsx
@@ -27,19 +27,19 @@ const ConnectionsPage: React.FC = () => {
 
   const allItems: Integration[] = useMemo(
     () => [
-      { title: "OpenAI", type: "provider" },
-      { title: "Anthropic", type: "provider" },
-      { title: "Together AI", type: "provider" },
-      { title: "OpenRouter", type: "provider" },
-      { title: "Fireworks", type: "provider" },
-      { title: "Azure", type: "provider" },
-      { title: "Groq", type: "provider" },
-      { title: "Deepinfra", type: "provider" },
-      { title: "Anyscale", type: "provider" },
-      { title: "Cloudflare", type: "provider" },
-      { title: "LemonFox", type: "provider" },
-      { title: "Perplexity", type: "provider" },
-      { title: "Mistral", type: "provider" },
+      // { title: "OpenAI", type: "provider" },
+      // { title: "Anthropic", type: "provider" },
+      // { title: "Together AI", type: "provider" },
+      // { title: "OpenRouter", type: "provider" },
+      // { title: "Fireworks", type: "provider" },
+      // { title: "Azure", type: "provider" },
+      // { title: "Groq", type: "provider" },
+      // { title: "Deepinfra", type: "provider" },
+      // { title: "Anyscale", type: "provider" },
+      // { title: "Cloudflare", type: "provider" },
+      // { title: "LemonFox", type: "provider" },
+      // { title: "Perplexity", type: "provider" },
+      // { title: "Mistral", type: "provider" },
       {
         title: "OpenPipe",
         type: "fine-tuning",
@@ -48,12 +48,12 @@ const ConnectionsPage: React.FC = () => {
             (integration) => integration.integration_name === "open_pipe"
           )?.active ?? false,
       },
-      { title: "PostHog", type: "destination", enabled: false },
-      { title: "Datadog", type: "destination", enabled: false },
-      { title: "Pillar", type: "gateway", enabled: true },
-      { title: "NotDiamond", type: "gateway", enabled: false },
-      { title: "Diffy", type: "other-provider", enabled: false },
-      { title: "Lytix", type: "destination", enabled: false },
+      // { title: "PostHog", type: "destination", enabled: false },
+      // { title: "Datadog", type: "destination", enabled: false },
+      // { title: "Pillar", type: "gateway", enabled: true },
+      // { title: "NotDiamond", type: "gateway", enabled: false },
+      // { title: "Diffy", type: "other-provider", enabled: false },
+      // { title: "Lytix", type: "destination", enabled: false },
     ],
     [integrations]
   );
@@ -80,7 +80,7 @@ const ConnectionsPage: React.FC = () => {
   return (
     <div className="flex flex-col space-y-8 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div className="flex flex-col space-y-2">
-        <h1 className="text-3xl font-bold">Integrations</h1>
+        <h1 className="text-3xl font-bold">Connections</h1>
         <p className="text-gray-500">
           Explore and connect with various integrations to enhance your Helicone
           experience.
diff --git a/web/components/templates/datasets/datasetsPage.tsx b/web/components/templates/datasets/datasetsPage.tsx
index 07d22b5453..0a8501dc3c 100644
--- a/web/components/templates/datasets/datasetsPage.tsx
+++ b/web/components/templates/datasets/datasetsPage.tsx
@@ -1,13 +1,9 @@
-import {
-  BookOpenIcon,
-  CircleStackIcon as DatabaseIcon,
-} from "@heroicons/react/24/outline";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useGetHeliconeDatasets } from "../../../services/hooks/dataset/heliconeDataset";
 import { SortDirection } from "../../../services/lib/sorts/users/sorts";
 import AuthHeader from "../../shared/authHeader";
 import ThemedTable from "../../shared/themed/table/themedTable";
+import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 
 interface DatasetsPageProps {
   currentPage: number;
@@ -31,50 +27,14 @@ const DatasetsPage = (props: DatasetsPageProps) => {
     <>
       <AuthHeader title={"Datasets"} />
       {!isLoading && datasets.length === 0 ? (
-        <div className="flex flex-col w-full mt-12 justify-center items-center">
-          <div className="flex flex-col items-center max-w-3xl">
-            <DatabaseIcon className="h-12 w-12 text-black dark:text-white" />
-            <p className="text-xl text-black dark:text-white font-semibold mt-6">
-              No Datasets
-            </p>
-
-            <p className="text-sm text-gray-500 max-w-sm mt-2 text-center">
-              Create your first dataset to get started. Here&apos;s a quick
-              tutorial:
-            </p>
-            <div className="mt-4 w-full">
-              <video
-                width="100%"
-                height="100%"
-                autoPlay
-                muted
-                loop
-                className="rounded-lg shadow-lg"
-              >
-                <source
-                  src="https://marketing-assets-helicone.s3.us-west-2.amazonaws.com/creating-dataset.mp4"
-                  type="video/mp4"
-                />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-            <div className="mt-6 flex gap-3">
-              <Link
-                href="https://docs.helicone.ai/features/datasets"
-                className="w-fit items-center rounded-md bg-black px-3 py-2 gap-2 text-sm flex font-medium text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
-              >
-                <BookOpenIcon className="h-4 w-4" />
-                View Docs
-              </Link>
-              <Link
-                href="/requests"
-                className="w-fit items-center rounded-md bg-blue-600 px-3 py-2 gap-2 text-sm flex font-medium text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-              >
-                <DatabaseIcon className="h-4 w-4" />
-                Create Dataset
-              </Link>
-            </div>
-          </div>
+        <div className="flex flex-col space-y-2 w-full items-center">
+          <FeatureUpgradeCard
+            title="Unlock Datasets"
+            description="The Free plan does not include the Datasets feature, but getting access is easy."
+            infoBoxText="Organize your requests into datasets for evals or fine-tuning."
+            videoSrc="https://marketing-assets-helicone.s3.us-west-2.amazonaws.com/creating-dataset.mp4"
+            documentationLink="https://docs.helicone.ai/features/sessions"
+          />
         </div>
       ) : (
         <ThemedTable
diff --git a/web/components/templates/developer/developerPage.tsx b/web/components/templates/developer/developerPage.tsx
index b525e11369..3d7a7426cb 100644
--- a/web/components/templates/developer/developerPage.tsx
+++ b/web/components/templates/developer/developerPage.tsx
@@ -1,150 +1,15 @@
-import {
-  GlobeAltIcon,
-  KeyIcon,
-  LockClosedIcon,
-} from "@heroicons/react/24/outline";
-import { useUser } from "@supabase/auth-helpers-react";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { ElementType } from "react";
-import { useFeatureFlags } from "../../../services/hooks/featureFlags";
-import { useOrg } from "../../layout/organizationContext";
 import AuthHeader from "../../shared/authHeader";
-import KeyPage from "../keys/keyPage";
-import VaultPage from "../vault/vaultPage";
-import WebhooksPage from "../webhooks/webhooksPage";
 
 interface DeveloperPageProps {
-  defaultIndex?: number;
-}
-
-const tabs: {
-  id: number;
   title: string;
-  icon: ElementType<any>;
-}[] = [
-  {
-    id: 0,
-    title: "Keys",
-    icon: KeyIcon,
-  },
-  {
-    id: 1,
-    title: "Webhooks",
-    icon: GlobeAltIcon,
-  },
-  {
-    id: 2,
-    title: "Vault",
-    icon: LockClosedIcon,
-  },
-];
-
-const DeveloperPage = (props: DeveloperPageProps) => {
-  const { defaultIndex = 0 } = props;
-
-  const orgContext = useOrg();
-
-  const user = useUser();
-
-  const router = useRouter();
-
-  const { hasFlag } = useFeatureFlags(
-    "webhook_beta",
-    orgContext?.currentOrg?.id || ""
-  );
-
-  const tier = orgContext?.currentOrg?.tier;
-
-  const isPaidPlan = tier !== "free";
+  children: React.ReactNode;
+}
 
+const DeveloperPage: React.FC<DeveloperPageProps> = ({ title, children }) => {
   return (
     <>
-      <AuthHeader title={"Developer"} />
-      <TabGroup defaultIndex={defaultIndex}>
-        <TabList className="font-semibold" variant="line">
-          {tabs.map((tab) => (
-            <Tab
-              key={tab.id}
-              icon={tab.icon}
-              onClick={() => {
-                router.push(
-                  {
-                    query: { tab: tab.id },
-                  },
-                  undefined,
-                  { shallow: true }
-                );
-              }}
-            >
-              {tab.title}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <KeyPage />
-          </TabPanel>
-          <TabPanel>
-            <div className="p-4">
-              {hasFlag ? (
-                <WebhooksPage user={user!} />
-              ) : (
-                <div className="flex flex-col w-full h-96 justify-center items-center">
-                  <div className="flex flex-col w-full">
-                    <GlobeAltIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
-                    <p className="text-xl text-black dark:text-white font-semibold mt-8">
-                      We&apos;d love to learn more about your use case
-                    </p>
-                    <p className="text-sm text-gray-500 max-w-sm mt-2">
-                      Please get in touch with us to discuss our webhook
-                      feature.
-                    </p>
-                    <div className="mt-4">
-                      <Link
-                        href="https://cal.com/team/helicone/helicone-discovery"
-                        target="_blank"
-                        rel="noreferrer"
-                        className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                      >
-                        Contact Us
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </TabPanel>
-          <TabPanel>
-            {isPaidPlan ? (
-              <VaultPage />
-            ) : (
-              <div className="flex flex-col w-full h-96 justify-center items-center">
-                <div className="flex flex-col w-full">
-                  <GlobeAltIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
-                  <p className="text-xl text-black dark:text-white font-semibold mt-8">
-                    We&apos;d love to learn more about your use case
-                  </p>
-                  <p className="text-sm text-gray-500 max-w-sm mt-2">
-                    Please get in touch with us to discuss our vault feature.
-                  </p>
-                  <div className="mt-4">
-                    <Link
-                      href="https://cal.com/team/helicone/helicone-discovery"
-                      target="_blank"
-                      rel="noreferrer"
-                      className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                    >
-                      Contact Us
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            )}
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
+      <AuthHeader title={title} />
+      {children}
     </>
   );
 };
diff --git a/web/components/templates/home/components/platform.tsx b/web/components/templates/home/components/platform.tsx
index b1113a13b4..cb6a769e9b 100644
--- a/web/components/templates/home/components/platform.tsx
+++ b/web/components/templates/home/components/platform.tsx
@@ -119,6 +119,7 @@ export default function Platform() {
       </div>
       <div className="relative overflow-hidden pt-2">
         <div className="mx-auto max-w-8xl px-6 lg:px-8">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={
               tabs.find((tab) => tab.key === activeTab)?.src ||
diff --git a/web/components/templates/organization/deleteOrgModal.tsx b/web/components/templates/organization/deleteOrgModal.tsx
index 32b3120aab..50b1563d98 100644
--- a/web/components/templates/organization/deleteOrgModal.tsx
+++ b/web/components/templates/organization/deleteOrgModal.tsx
@@ -1,9 +1,7 @@
-import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { clsx } from "../../shared/clsx";
 import { useOrg } from "../../layout/organizationContext";
 import useNotification from "../../shared/notification/useNotification";
 import ThemedModal from "../../shared/themed/themedModal";
-import { Database } from "../../../supabase/database.types";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { getJawnClient } from "../../../lib/clients/jawn";
@@ -22,7 +20,6 @@ export const DeleteOrgModal = (props: DeleteOrgModalProps) => {
   const orgContext = useOrg();
   const router = useRouter();
   const jawn = getJawnClient(orgId);
-  const supabaseClient = useSupabaseClient<Database>();
   const [confirmOrgName, setConfirmOrgName] = useState("");
 
   return (
@@ -65,6 +62,17 @@ export const DeleteOrgModal = (props: DeleteOrgModalProps) => {
           </button>
           <button
             onClick={async () => {
+              if (
+                orgContext?.currentOrg?.tier === "pro-20240913" ||
+                orgContext?.currentOrg?.tier === "growth"
+              ) {
+                setNotification(
+                  "You cannot delete your organization while on the Pro plan",
+                  "error"
+                );
+                return;
+              }
+
               if (confirmOrgName !== orgName) {
                 setNotification("Organization name does not match", "error");
                 return;
diff --git a/web/components/templates/organization/members/orgMembersPage.tsx b/web/components/templates/organization/members/orgMembersPage.tsx
index 5a47b14d61..b6a53c8450 100644
--- a/web/components/templates/organization/members/orgMembersPage.tsx
+++ b/web/components/templates/organization/members/orgMembersPage.tsx
@@ -9,6 +9,7 @@ import OrgMemberItem from "../orgMemberItem";
 import { useOrg } from "../../../layout/organizationContext";
 import AddMemberModal from "../addMemberModal";
 import { clsx } from "../../../shared/clsx";
+import { ProFeatureWrapper } from "@/components/shared/ProBlockerComponents/ProFeatureWrapper";
 
 interface OrgMembersPageProps {
   org: Database["public"]["Tables"]["organization"]["Row"];
@@ -77,14 +78,16 @@ const OrgMembersPage = (props: OrgMembersPageProps) => {
             <h3 className="text-lg font-semibold">Members</h3>
 
             <div className="flex flex-row space-x-4">
-              <button
-                onClick={() => {
-                  setAddOpen(true);
-                }}
-                className="items-center rounded-md bg-black dark:bg-white px-4 py-2 text-sm flex font-semibold text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-              >
-                Invite Members
-              </button>
+              <ProFeatureWrapper featureName="invite">
+                <button
+                  onClick={() => {
+                    setAddOpen(true);
+                  }}
+                  className="items-center rounded-md bg-black dark:bg-white px-4 py-2 text-sm flex font-semibold text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                >
+                  Invite Members
+                </button>
+              </ProFeatureWrapper>
             </div>
           </div>
           {isLoading || isOrgOwnerLoading ? (
diff --git a/web/components/templates/organization/plan/EnterprisePlanCard.tsx b/web/components/templates/organization/plan/EnterprisePlanCard.tsx
new file mode 100644
index 0000000000..6233565ca6
--- /dev/null
+++ b/web/components/templates/organization/plan/EnterprisePlanCard.tsx
@@ -0,0 +1,70 @@
+import { Col } from "@/components/layout/common";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+import { PlanFeatureCard } from "./PlanFeatureCard";
+
+export const EnterprisePlanCard = () => {
+  return (
+    <div className="flex gap-6 lg:flex-row flex-col">
+      <Card className="max-w-3xl w-full h-fit">
+        <CardHeader>
+          <CardTitle className="text-lg font-medium flex items-end">
+            Enterprise{" "}
+            <span className="text-sm bg-purple-100 text-purple-700 px-2 py-1 rounded-md ml-2 font-medium">
+              Current plan
+            </span>
+          </CardTitle>
+          <CardDescription>
+            Your custom Enterprise plan tailored for your organization{"'"}s
+            needs.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Col className="gap-4">
+            <p className="text-sm text-gray-500">
+              For detailed information about your Enterprise plan, including
+              custom features, limits, and support options, please contact your
+              account manager.
+            </p>
+            <Link href="mailto:enterprise-support@helicone.ai">
+              <Button variant="outline">Contact Enterprise Support</Button>
+            </Link>
+          </Col>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-6 w-full lg:w-[450px]">
+        <PlanFeatureCard
+          title="Need to adjust your plan?"
+          description="We're here to help you optimize your Enterprise plan for your evolving needs."
+          buttonText="Schedule a Call"
+          onClick={() =>
+            window.open(
+              "https://cal.com/team/helicone/helicone-discovery",
+              "_blank"
+            )
+          }
+        />
+
+        <PlanFeatureCard
+          title="Looking for documentation?"
+          description="Access our comprehensive Enterprise documentation and guides."
+          buttonText="View Enterprise Docs"
+          onClick={() =>
+            window.open(
+              "https://docs.helicone.ai/advanced-usage/enterprise-features",
+              "_blank"
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/templates/organization/plan/InvoiceSheet.tsx b/web/components/templates/organization/plan/InvoiceSheet.tsx
new file mode 100644
index 0000000000..ef19eb06e0
--- /dev/null
+++ b/web/components/templates/organization/plan/InvoiceSheet.tsx
@@ -0,0 +1,118 @@
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { useState } from "react";
+import { useOrg } from "@/components/layout/organizationContext";
+import { useQuery } from "@tanstack/react-query";
+import { getJawnClient } from "@/lib/clients/jawn";
+
+export const InvoiceSheet: React.FC = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const org = useOrg();
+
+  const upcomingInvoice = useQuery({
+    queryKey: ["upcoming-invoice", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const invoice = await jawn.GET("/v1/stripe/subscription/preview-invoice");
+      return invoice;
+    },
+  });
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: upcomingInvoice.data?.data?.currency || "USD",
+    }).format(amount / 100);
+  };
+
+  return (
+    <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline">View Upcoming Invoice</Button>
+      </SheetTrigger>
+      <SheetContent className="sm:max-w-[425px]">
+        <SheetHeader>
+          <SheetTitle>Upcoming Invoice</SheetTitle>
+          <SheetDescription>
+            Details of your next billing cycle
+          </SheetDescription>
+        </SheetHeader>
+        <div className="mt-6 space-y-6">
+          {upcomingInvoice.isLoading ? (
+            <p>Loading invoice details...</p>
+          ) : upcomingInvoice.error ? (
+            <p>Error loading invoice. Please try again.</p>
+          ) : upcomingInvoice.data?.data ? (
+            <>
+              <div className="flex justify-between items-center">
+                <span className="font-semibold">Total Due:</span>
+                <span className="text-xl font-bold">
+                  {formatCurrency(upcomingInvoice.data.data.total)}
+                </span>
+              </div>
+              <div className="text-sm text-gray-500">
+                Due Date:{" "}
+                {new Date(
+                  upcomingInvoice.data.data.next_payment_attempt! * 1000
+                ).toLocaleDateString()}
+              </div>
+              <div className="border-t pt-4">
+                <h3 className="font-semibold mb-2">Line Items:</h3>
+                <div className="space-y-3">
+                  {upcomingInvoice.data.data.lines?.data.map(
+                    (item: any, index: number) => (
+                      <div
+                        key={index}
+                        className="flex justify-between items-center text-sm"
+                      >
+                        <span>{item.description}</span>
+                        <span>{formatCurrency(item.amount)}</span>
+                      </div>
+                    )
+                  )}
+                </div>
+              </div>
+              {upcomingInvoice.data.data.discount && (
+                <div className="border-t pt-4">
+                  <h3 className="font-semibold mb-2">Discount:</h3>
+                  <div className="text-sm">
+                    {upcomingInvoice.data.data.discount.coupon.name} -
+                    {upcomingInvoice.data.data.discount.coupon.percent_off}% off
+                  </div>
+                </div>
+              )}
+              <div className="border-t pt-4 space-y-2">
+                <div className="flex justify-between items-center text-sm">
+                  <span>Subtotal:</span>
+                  <span>
+                    {formatCurrency(upcomingInvoice.data.data.subtotal)}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center text-sm">
+                  <span>Tax:</span>
+                  <span>
+                    {formatCurrency(upcomingInvoice.data.data.tax ?? 0)}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center font-semibold">
+                  <span>Total:</span>
+                  <span>{formatCurrency(upcomingInvoice.data.data.total)}</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <p>No invoice data available.</p>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
diff --git a/web/components/templates/organization/plan/MigrateGrowthToPro.tsx b/web/components/templates/organization/plan/MigrateGrowthToPro.tsx
new file mode 100644
index 0000000000..2104086e6b
--- /dev/null
+++ b/web/components/templates/organization/plan/MigrateGrowthToPro.tsx
@@ -0,0 +1,216 @@
+import { Col } from "@/components/layout/common";
+import { useOrg } from "@/components/layout/organizationContext";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getJawnClient } from "@/lib/clients/jawn";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { PlanFeatureCard } from "./PlanFeatureCard";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+
+export const MigrateGrowthToPro = () => {
+  const org = useOrg();
+  const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false);
+  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
+
+  const subscription = useQuery({
+    queryKey: ["subscription", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const subscription = await jawn.GET("/v1/stripe/subscription");
+      return subscription;
+    },
+  });
+
+  const upgradeExistingCustomerToPro = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.POST("/v1/stripe/subscription/migrate-to-pro");
+      return result;
+    },
+  });
+
+  const cancelSubscription = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.POST(
+        "/v1/stripe/subscription/cancel-subscription"
+      );
+      return result;
+    },
+  });
+
+  const handleUpgrade = async () => {
+    const result = await upgradeExistingCustomerToPro.mutateAsync();
+    setIsUpgradeDialogOpen(false);
+    subscription.refetch();
+    window.location.reload();
+  };
+
+  const handleCancel = async () => {
+    await cancelSubscription.mutateAsync();
+    setIsCancelDialogOpen(false);
+    subscription.refetch();
+  };
+
+  const isSubscriptionEnding = subscription.data?.data?.cancel_at_period_end;
+
+  const getBillingCycleDates = () => {
+    if (
+      subscription.data?.data?.current_period_start &&
+      subscription.data?.data?.current_period_end
+    ) {
+      const startDate = new Date(
+        subscription.data.data.current_period_start * 1000
+      );
+      const endDate = new Date(
+        subscription.data.data.current_period_end * 1000
+      );
+      return `Next billing period: ${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
+    }
+    return "N/A";
+  };
+
+  return (
+    <div className="flex gap-6 lg:flex-row flex-col">
+      <Card className="max-w-3xl w-full h-fit">
+        <CardHeader>
+          <CardTitle className="text-lg font-medium flex items-end">
+            Growth{" "}
+            <span className="text-sm px-2 py-1 rounded-md ml-2 font-light border border-slate-200">
+              Deprecating soon
+            </span>
+          </CardTitle>
+          <CardDescription>
+            We are discontinuing the Growth plan soon. Please{" "}
+            <b>upgrade to Pro</b> to keep 100k requests every month and access
+            all features or downgrade to Free plan.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <InfoBox icon={() => <></>} variant="warning">
+            <p>Growth plan will be discontinued on October 15th, 2024</p>
+          </InfoBox>
+          <div className="text-xs text-muted-foreground flex items-center text-slate-500">
+            <CalendarIcon className="w-4 h-4 mr-1" />
+            {getBillingCycleDates()}
+          </div>
+          <Col className="gap-2">
+            <Button
+              onClick={() => setIsUpgradeDialogOpen(true)}
+              disabled={upgradeExistingCustomerToPro.isLoading}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              {upgradeExistingCustomerToPro.isLoading
+                ? "Upgrading..."
+                : "Upgrade to Pro"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => setIsCancelDialogOpen(true)}
+              disabled={cancelSubscription.isLoading || isSubscriptionEnding}
+            >
+              {cancelSubscription.isLoading
+                ? "Cancelling..."
+                : "Cancel Subscription"}
+            </Button>
+            {isSubscriptionEnding && (
+              <p className="text-sm text-gray-500 mt-1">
+                Your subscription is already set to cancel at the end of the
+                current billing period.
+              </p>
+            )}
+            <Link
+              href="/settings/billing-old"
+              className="text-sm text-gray-500 underline"
+            >
+              View old billing page
+            </Link>
+            <Link
+              href="https://helicone.ai/pricing"
+              className="text-sm text-gray-500 underline"
+            >
+              View pricing page
+            </Link>
+          </Col>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-6 w-full lg:w-[450px]">
+        <PlanFeatureCard
+          title="Learn about our Enterprise plan"
+          description="Built for companies looking to scale. Includes everything in Pro, plus unlimited requests, prompts, experiments and more."
+          buttonText="Contact sales"
+        />
+
+        <PlanFeatureCard
+          title="Looking for something else?"
+          description="Need support, have a unique use case or want to say hi?"
+          buttonText="Contact us"
+        />
+      </div>
+
+      <Dialog open={isUpgradeDialogOpen} onOpenChange={setIsUpgradeDialogOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Upgrade to Pro Plan</DialogTitle>
+            <DialogDescription>
+              You are about to upgrade to the Pro plan. This will give you
+              access to all Pro features.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsUpgradeDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleUpgrade}>Confirm Upgrade</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Cancel Subscription</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to cancel your subscription? You will lose
+              access to all Growth plan features at the end of your current
+              billing period.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsCancelDialogOpen(false)}
+            >
+              Go Back
+            </Button>
+            <Button variant="destructive" onClick={handleCancel}>
+              Confirm Cancellation
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/web/components/templates/organization/plan/PlanFeatureCard.tsx b/web/components/templates/organization/plan/PlanFeatureCard.tsx
new file mode 100644
index 0000000000..ee9504ca8a
--- /dev/null
+++ b/web/components/templates/organization/plan/PlanFeatureCard.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+interface PlanFeatureCardProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}
+
+export const PlanFeatureCard: React.FC<PlanFeatureCardProps> = ({
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+}) => (
+  <Card>
+    <CardHeader>
+      <CardTitle className="whitespace-nowrap">{title}</CardTitle>
+      <CardDescription>{description}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <Button variant="outline" onClick={onButtonClick}>
+        {buttonText}
+      </Button>
+    </CardContent>
+  </Card>
+);
diff --git a/web/components/templates/organization/plan/UnknownTierCard.tsx b/web/components/templates/organization/plan/UnknownTierCard.tsx
new file mode 100644
index 0000000000..8268738017
--- /dev/null
+++ b/web/components/templates/organization/plan/UnknownTierCard.tsx
@@ -0,0 +1,46 @@
+import { Col } from "@/components/layout/common";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
+
+interface UnknownTierCardProps {
+  tier: string;
+}
+
+export const UnknownTierCard: React.FC<UnknownTierCardProps> = ({ tier }) => {
+  return (
+    <div className="max-w-lg">
+      <Card>
+        <CardHeader>
+          <CardTitle>Unknown Plan</CardTitle>
+          <CardDescription>
+            We couldn&apos;t recognize your current plan. We&apos;ve sent
+            migration instructions to your email.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Col className="gap-6">
+            <div className="text-sm text-gray-500">
+              Your current plan: <span className="font-semibold">{tier}</span>
+            </div>
+            <Col className="gap-2">
+              <Link href="mailto:support@helicone.ai">
+                <Button>Email Support</Button>
+              </Link>
+              <p className="text-xs text-gray-500 text-center">
+                If you&apos;re still having trouble, please email our support
+                team at {"support@helicone.ai"} for assistance.
+              </p>
+            </Col>
+          </Col>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
diff --git a/web/components/templates/organization/plan/billingPage.tsx b/web/components/templates/organization/plan/billingPage.tsx
new file mode 100644
index 0000000000..3a34070f72
--- /dev/null
+++ b/web/components/templates/organization/plan/billingPage.tsx
@@ -0,0 +1,46 @@
+import { useOrg } from "@/components/layout/organizationContext";
+import AuthHeader from "@/components/shared/authHeader";
+import { Col } from "@/components/layout/common";
+import { FreePlanCard } from "./freeBillingPage";
+import { ProPlanCard } from "./proBillingPage";
+import { MigrateGrowthToPro } from "./MigrateGrowthToPro";
+import { UnknownTierCard } from "./UnknownTierCard";
+import { EnterprisePlanCard } from "./EnterprisePlanCard";
+
+interface OrgPlanPageProps {}
+
+const BillingPlanPage = (props: OrgPlanPageProps) => {
+  const org = useOrg();
+
+  const knownTiers = ["free", "pro-20240913", "growth", "enterprise"];
+
+  return (
+    <>
+      <AuthHeader
+        title={<div className="flex items-center gap-2">Billing</div>}
+      />
+      <Col className="gap-4">
+        {org?.currentOrg?.tier === "growth" && <MigrateGrowthToPro />}
+        {org?.currentOrg?.tier === "free" && <FreePlanCard />}
+        {org?.currentOrg?.tier === "pro-20240913" && <ProPlanCard />}
+        {org?.currentOrg?.tier &&
+          !knownTiers.includes(org?.currentOrg?.tier) && (
+            <UnknownTierCard tier={org?.currentOrg?.tier} />
+          )}
+        {org?.currentOrg?.tier === "enterprise" && <EnterprisePlanCard />}
+        {/* <Card className="bg-[#F9F9F9] p-4 max-w-lg">
+          <div className="text-[#334155] font-medium">
+            Looking for something else?
+          </div>
+          <h1 className="text-[#000000] font-bold text-3xl mt-4">Contact us</h1>
+          <h2 className="text-[#334155] font-light text-md">
+            Observability needs, support, or just want to say hi?
+          </h2>
+          <Button className="mt-4">Contact us</Button>
+        </Card> */}
+      </Col>
+    </>
+  );
+};
+
+export default BillingPlanPage;
diff --git a/web/components/templates/organization/plan/freeBillingPage.tsx b/web/components/templates/organization/plan/freeBillingPage.tsx
new file mode 100644
index 0000000000..5e2c7f8f2a
--- /dev/null
+++ b/web/components/templates/organization/plan/freeBillingPage.tsx
@@ -0,0 +1,250 @@
+import { Col } from "@/components/layout/common";
+import { useOrg } from "@/components/layout/organizationContext";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { getJawnClient } from "@/lib/clients/jawn";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CalendarIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+
+export const FreePlanCard = () => {
+  const org = useOrg();
+  const freeUsage = useQuery({
+    queryKey: ["free-usage", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const invoice = await jawn.GET("/v1/stripe/subscription/free/usage");
+      return invoice;
+    },
+  });
+
+  const subscription = useQuery({
+    queryKey: ["subscription", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const subscription = await jawn.GET("/v1/stripe/subscription");
+      return subscription;
+    },
+  });
+
+  const upgradeToPro = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const endpoint =
+        subscription.data?.data?.status === "canceled"
+          ? "/v1/stripe/subscription/existing-customer/upgrade-to-pro"
+          : "/v1/stripe/subscription/new-customer/upgrade-to-pro";
+      const result = await jawn.POST(endpoint, {
+        body: {},
+      });
+      return result;
+    },
+  });
+
+  const isOverUsage = freeUsage.data?.data && freeUsage.data?.data >= 100_000;
+
+  const getBillingCycleDates = () => {
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    const currentMonth = now.getMonth();
+    const startDate = new Date(currentYear, currentMonth, 1);
+    const endDate = new Date(currentYear, currentMonth + 1, 0);
+
+    const formatDate = (date: Date) =>
+      date.toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+
+    return `${formatDate(startDate)} → ${formatDate(endDate)}`;
+  };
+
+  const [isComparisonOpen, setIsComparisonOpen] = useState(false);
+
+  return (
+    <div className="flex gap-6 lg:flex-row flex-col">
+      <Card className="max-w-3xl w-full h-fit">
+        <CardHeader>
+          <CardTitle className="text-lg font-medium flex items-end">
+            Free{" "}
+            <span className="text-sm bg-[#DBE9FE] text-blue-700 px-2 py-1 rounded-md ml-2 font-medium">
+              Current plan
+            </span>
+          </CardTitle>
+          <CardDescription>
+            Here&apos;s a summary of your request usage this month.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4 justify-between">
+            <div className="text-sm text-muted-foreground font-medium">
+              Requests used
+            </div>
+            <div className="text-slate-500">
+              {freeUsage.data?.data?.toLocaleString()} / 10,000
+            </div>
+          </div>
+          <Progress
+            value={((freeUsage.data?.data ?? 0) / 10_000) * 100}
+            className="w-full h-2"
+          />
+          <div className="text-xs text-muted-foreground flex items-center text-slate-500">
+            <CalendarIcon className="w-4 h-4 mr-1" />
+            {getBillingCycleDates()}
+          </div>
+          <Col className="">
+            <Button
+              className="w-40 bg-blue-600 hover:bg-blue-700"
+              onClick={async () => {
+                const result = await upgradeToPro.mutateAsync();
+                if (result.data) {
+                  window.open(result.data, "_blank");
+                } else {
+                  console.error("No URL returned from upgrade mutation");
+                }
+              }}
+              disabled={upgradeToPro.isLoading}
+            >
+              Upgrade to Pro
+            </Button>
+            <span className="text-slate-500 text-[12px]">
+              14 days free trial
+            </span>
+          </Col>
+          <div>
+            <button
+              onClick={() => setIsComparisonOpen(!isComparisonOpen)}
+              className="flex items-center justify-between w-full text-left font-medium mb-2"
+            >
+              <span>Compare to the Pro plan</span>
+              {isComparisonOpen ? (
+                <ChevronUpIcon className="h-5 w-5" />
+              ) : (
+                <ChevronDownIcon className="h-5 w-5" />
+              )}
+            </button>
+            <span className="text-sm text-muted-foreground text-slate-500">
+              The Pro plan covers everything in Free, and:
+            </span>
+            {isComparisonOpen && (
+              <div className="grid grid-cols-2 gap-4 mt-2">
+                {proFeatures.map((feature, index) => (
+                  <ComparisonItem key={index} {...feature} />
+                ))}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-6 w-full lg:w-[450px]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="whitespace-nowrap">
+              Learn about our Enterprise plan
+            </CardTitle>
+            <CardDescription>
+              Built for companies looking to scale. Includes everything in Pro,
+              plus unlimited requests, prompts, experiments and more.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="outline">Contact sales</Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="whitespace-nowrap">
+              Looking for something else?
+            </CardTitle>
+            <CardDescription>
+              Need support, have a unique use case or want to say hi?
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="outline">Contact us</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+const ComparisonItem = ({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) => (
+  <div className="flex items-start space-x-2">
+    <div>
+      <h4 className="font-medium">{title}</h4>
+      <p className="text-sm text-muted-foreground font-normal text-slate-500">
+        {description}
+      </p>
+    </div>
+  </div>
+);
+
+const proFeatures = [
+  {
+    title: "100k requests",
+    description: "Higher limit compared to 10k.",
+  },
+  {
+    title: "3 month log retention",
+    description: "Longer log retention compared to 1 month.",
+  },
+  {
+    title: "Access to Playground",
+    description: "Test your prompts with different models.",
+  },
+  {
+    title: "Access to Caching",
+    description: "Cache frequent responses to save costs and time.",
+  },
+  {
+    title: "Access to Rate Limits",
+    description: "Limit your user's usage.",
+  },
+  {
+    title: "Access to Sessions",
+    description: "Trace agent workflow and conversations.",
+  },
+  {
+    title: "Access to User Tracking",
+    description: "Keep track of your users.",
+  },
+  {
+    title: "Access to Datasets",
+    description: "Collect historical requests for training and finetuning.",
+  },
+  {
+    title: "API Access",
+    description: "Access to 60 calls/min using our expansive API.",
+  },
+  {
+    title: "SOC-2 Type II Compliance",
+    description: "Safety and privacy.",
+  },
+  {
+    title: "Prompts & Experiments",
+    description: "Collect historical requests for training and finetuning.",
+  },
+  {
+    title: "Alerts (Slack + Email)",
+    description: "Access to 60 calls/min using our expansive API.",
+  },
+];
diff --git a/web/components/templates/organization/plan/proBillingPage.tsx b/web/components/templates/organization/plan/proBillingPage.tsx
new file mode 100644
index 0000000000..24960735d5
--- /dev/null
+++ b/web/components/templates/organization/plan/proBillingPage.tsx
@@ -0,0 +1,371 @@
+import { Col } from "@/components/layout/common";
+import { useOrg } from "@/components/layout/organizationContext";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getJawnClient } from "@/lib/clients/jawn";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { InvoiceSheet } from "./InvoiceSheet";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { PlanFeatureCard } from "./PlanFeatureCard";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { useCallback } from "react";
+
+export const ProPlanCard = () => {
+  const org = useOrg();
+  const [isAlertsDialogOpen, setIsAlertsDialogOpen] = useState(false);
+  const [isPromptsDialogOpen, setIsPromptsDialogOpen] = useState(false);
+  const [isEnablingAlerts, setIsEnablingAlerts] = useState(false);
+  const [isEnablingPrompts, setIsEnablingPrompts] = useState(false);
+
+  const subscription = useQuery({
+    queryKey: ["subscription", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const subscription = await jawn.GET("/v1/stripe/subscription");
+      return subscription;
+    },
+  });
+
+  const manageSubscriptionPaymentLink = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.POST(
+        "/v1/stripe/subscription/manage-subscription"
+      );
+      return result;
+    },
+  });
+
+  const reactivateSubscription = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.POST(
+        "/v1/stripe/subscription/undo-cancel-subscription"
+      );
+      return result;
+    },
+  });
+
+  const addProductToSubscription = useMutation({
+    mutationFn: async (productType: "alerts" | "prompts") => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.POST(
+        "/v1/stripe/subscription/add-ons/{productType}",
+        {
+          params: {
+            path: {
+              productType,
+            },
+          },
+        }
+      );
+      return result;
+    },
+  });
+
+  const deleteProductFromSubscription = useMutation({
+    mutationFn: async (productType: "alerts" | "prompts") => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const result = await jawn.DELETE(
+        "/v1/stripe/subscription/add-ons/{productType}",
+        {
+          params: {
+            path: {
+              productType,
+            },
+          },
+        }
+      );
+      return result;
+    },
+  });
+
+  const isTrialActive =
+    subscription.data?.data?.trial_end &&
+    new Date(subscription.data.data.trial_end * 1000) > new Date() &&
+    (!subscription.data?.data?.current_period_start ||
+      new Date(subscription.data.data.trial_end * 1000) >
+        new Date(subscription.data.data.current_period_start * 1000));
+
+  const isSubscriptionEnding = subscription.data?.data?.cancel_at_period_end;
+
+  const hasAlerts = subscription.data?.data?.items?.some(
+    (item: any) => item.price.product?.name === "Alerts" && item.quantity > 0
+  );
+  const hasPrompts = subscription.data?.data?.items?.some(
+    (item: any) => item.price.product?.name === "Prompts" && item.quantity > 0
+  );
+
+  const handleAlertsToggle = () => {
+    setIsEnablingAlerts(!hasAlerts);
+    setIsAlertsDialogOpen(true);
+  };
+
+  const handlePromptsToggle = () => {
+    setIsEnablingPrompts(!hasPrompts);
+    setIsPromptsDialogOpen(true);
+  };
+
+  const confirmAlertsChange = async () => {
+    if (isEnablingAlerts) {
+      await addProductToSubscription.mutateAsync("alerts");
+    } else {
+      await deleteProductFromSubscription.mutateAsync("alerts");
+    }
+    setIsAlertsDialogOpen(false);
+    subscription.refetch();
+  };
+
+  const confirmPromptsChange = async () => {
+    if (isEnablingPrompts) {
+      await addProductToSubscription.mutateAsync("prompts");
+    } else {
+      await deleteProductFromSubscription.mutateAsync("prompts");
+    }
+    setIsPromptsDialogOpen(false);
+    subscription.refetch();
+  };
+
+  const getBillingCycleDates = () => {
+    if (
+      subscription.data?.data?.current_period_start &&
+      subscription.data?.data?.current_period_end
+    ) {
+      const startDate = new Date(
+        subscription.data.data.current_period_start * 1000
+      );
+      const endDate = new Date(
+        subscription.data.data.current_period_end * 1000
+      );
+      return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
+    }
+    return "N/A";
+  };
+
+  const getDialogDescription = useCallback(
+    (isEnabling: boolean, feature: string, price: string) => {
+      let description = isEnabling
+        ? `You are about to enable ${feature}. This will add ${price}/mo to your subscription.`
+        : `You are about to disable ${feature}. This will remove ${price}/mo from your subscription.`;
+
+      if (isTrialActive && isEnabling) {
+        description +=
+          " You will not be charged for this feature while on your trial.";
+      }
+
+      return description;
+    },
+    [isTrialActive]
+  );
+
+  return (
+    <div className="flex gap-6 lg:flex-row flex-col">
+      <Card className="max-w-3xl w-full h-fit">
+        <CardHeader>
+          <CardTitle className="text-lg font-medium flex items-end">
+            Pro{" "}
+            <span className="text-sm bg-[#DBE9FE] text-blue-700 px-2 py-1 rounded-md ml-2 font-medium">
+              Current plan
+            </span>
+          </CardTitle>
+          <CardDescription>
+            Here&apos;s a summary of your subscription.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {isTrialActive && (
+            <InfoBox icon={() => <></>}>
+              <p>
+                Your trial ends on:{" "}
+                {new Date(
+                  subscription.data!.data!.trial_end! * 1000
+                ).toLocaleDateString()}
+              </p>
+            </InfoBox>
+          )}
+          {subscription.data?.data?.current_period_start &&
+            subscription.data?.data?.current_period_end && (
+              <div className="text-sm text-gray-500">
+                <p>
+                  Current billing period:{" "}
+                  {new Date(
+                    subscription.data.data.current_period_start * 1000
+                  ).toLocaleDateString()}{" "}
+                  -{" "}
+                  {new Date(
+                    subscription.data.data.current_period_end * 1000
+                  ).toLocaleDateString()}
+                </p>
+                {isSubscriptionEnding && (
+                  <p className="text-red-500 font-semibold mt-1">
+                    Your subscription will end on:{" "}
+                    {new Date(
+                      subscription.data.data.current_period_end * 1000
+                    ).toLocaleDateString()}
+                  </p>
+                )}
+              </div>
+            )}
+          <div className="text-xs text-muted-foreground flex items-center text-slate-500">
+            <CalendarIcon className="w-4 h-4 mr-1" />
+            {getBillingCycleDates()}
+          </div>
+          <Col className="gap-4">
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="alerts-toggle">Alerts ($15/mo)</Label>
+                <Switch
+                  id="alerts-toggle"
+                  checked={hasAlerts}
+                  onCheckedChange={handleAlertsToggle}
+                />
+              </div>
+              {isTrialActive && (
+                <span className="text-xs text-muted-foreground mt-1 text-slate-500">
+                  Included in trial (enable to start using)
+                </span>
+              )}
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="prompts-toggle">Prompts ($30/mo)</Label>
+                <Switch
+                  id="prompts-toggle"
+                  checked={hasPrompts}
+                  onCheckedChange={handlePromptsToggle}
+                />
+              </div>
+              {isTrialActive && (
+                <span className="text-xs text-muted-foreground mt-1 text-slate-500">
+                  Included in trial (enable to start using)
+                </span>
+              )}
+            </div>
+          </Col>
+          <Col className="gap-2">
+            {isSubscriptionEnding ? (
+              <Button
+                onClick={async () => {
+                  const result = await reactivateSubscription.mutateAsync();
+                  if (result.data) {
+                    subscription.refetch();
+                  } else {
+                    console.error("Failed to reactivate subscription");
+                  }
+                }}
+                disabled={reactivateSubscription.isLoading}
+              >
+                {reactivateSubscription.isLoading
+                  ? "Reactivating..."
+                  : "Reactivate Subscription"}
+              </Button>
+            ) : (
+              <Button
+                onClick={async () => {
+                  const result =
+                    await manageSubscriptionPaymentLink.mutateAsync();
+                  if (result.data) {
+                    window.open(result.data, "_blank");
+                  } else {
+                    console.error(
+                      "No URL returned from manage subscription mutation"
+                    );
+                  }
+                }}
+                disabled={manageSubscriptionPaymentLink.isLoading}
+              >
+                {manageSubscriptionPaymentLink.isLoading
+                  ? "Loading..."
+                  : "Manage Subscription"}
+              </Button>
+            )}
+            <InvoiceSheet />
+            <Link
+              href="https://helicone.ai/pricing"
+              className="text-sm text-gray-500 underline"
+            >
+              View pricing page
+            </Link>
+          </Col>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-6 w-full lg:w-[450px]">
+        <PlanFeatureCard
+          title="Learn about our Enterprise plan"
+          description="Built for companies looking to scale. Includes everything in Pro, plus unlimited requests, prompts, experiments and more."
+          buttonText="Contact sales"
+        />
+
+        <PlanFeatureCard
+          title="Looking for something else?"
+          description="Need support, have a unique use case or want to say hi?"
+          buttonText="Contact us"
+        />
+      </div>
+
+      <Dialog open={isAlertsDialogOpen} onOpenChange={setIsAlertsDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {isEnablingAlerts ? "Enable Alerts" : "Disable Alerts"}
+            </DialogTitle>
+            <DialogDescription>
+              {getDialogDescription(isEnablingAlerts, "Alerts", "$15")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsAlertsDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={confirmAlertsChange}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isPromptsDialogOpen} onOpenChange={setIsPromptsDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {isEnablingPrompts ? "Enable Prompts" : "Disable Prompts"}
+            </DialogTitle>
+            <DialogDescription>
+              {getDialogDescription(isEnablingPrompts, "Prompts", "$30")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsPromptsDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={confirmPromptsChange}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/web/components/templates/pricing/pricingCompare.tsx b/web/components/templates/pricing/pricingCompare.tsx
new file mode 100644
index 0000000000..cf9edd7a82
--- /dev/null
+++ b/web/components/templates/pricing/pricingCompare.tsx
@@ -0,0 +1,65 @@
+import { CheckIcon } from "lucide-react";
+import { UpgradeToProCTA } from "./upgradeToProCTA";
+
+export const PricingCompare = ({
+  featureName = "",
+}: {
+  featureName: string;
+}) => {
+  return (
+    <>
+      <p className="text-sm text-gray-500 mb-4">
+        The Free plan only comes with 10,000 requests per month, but getting
+        more is easy.
+      </p>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="border rounded-lg p-4">
+          <h3 className="font-semibold mb-2">Free</h3>
+          <span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
+            Current plan
+          </span>
+          <ul className="mt-4 space-y-2">
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              10k free requests/month
+            </li>
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              Access to Dashboard
+            </li>
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              Free, truly
+            </li>
+          </ul>
+        </div>
+        <div className="border rounded-lg p-4">
+          <h3 className="font-semibold mb-2">Pro</h3>
+          <span className="text-sm">$20/user</span>
+          <p className="text-sm mt-2">Everything in Free, plus:</p>
+          <ul className="mt-4 space-y-2">
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              Limitless requests (first 100k free)
+            </li>
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              Access to all features
+            </li>
+            <li className="flex items-center text-sm">
+              <CheckIcon className="mr-2 h-4 w-4 text-green-500" />
+              Standard support
+            </li>
+          </ul>
+          <a href="#" className="text-sm text-blue-600 mt-2 block">
+            See all features →
+          </a>
+          <UpgradeToProCTA
+            defaultPrompts={featureName === "Prompts"}
+            showAddons={featureName === "Prompts"}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/templates/pricing/upgradeToProCTA.tsx b/web/components/templates/pricing/upgradeToProCTA.tsx
new file mode 100644
index 0000000000..62a4872a67
--- /dev/null
+++ b/web/components/templates/pricing/upgradeToProCTA.tsx
@@ -0,0 +1,117 @@
+import { useOrg } from "@/components/layout/organizationContext";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { getJawnClient } from "@/lib/clients/jawn";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+
+export const UpgradeToProCTA = ({
+  defaultPrompts = false,
+  defaultAlerts = false,
+  showAddons = false,
+}) => {
+  const org = useOrg();
+  const subscription = useQuery({
+    queryKey: ["subscription", org?.currentOrg?.id],
+    queryFn: async (query) => {
+      const orgId = query.queryKey[1] as string;
+      const jawn = getJawnClient(orgId);
+      const subscription = await jawn.GET("/v1/stripe/subscription");
+      return subscription;
+    },
+  });
+  const [prompts, setPrompts] = useState(defaultPrompts);
+  const [alerts, setAlerts] = useState(defaultAlerts);
+
+  const upgradeToPro = useMutation({
+    mutationFn: async () => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      const endpoint =
+        subscription.data?.data?.status === "canceled"
+          ? "/v1/stripe/subscription/existing-customer/upgrade-to-pro"
+          : "/v1/stripe/subscription/new-customer/upgrade-to-pro";
+      const result = await jawn.POST(endpoint, {
+        body: {
+          addons: {
+            prompts,
+            alerts,
+          },
+        },
+      });
+      return result;
+    },
+  });
+
+  const isPro = useMemo(() => {
+    return org?.currentOrg?.tier === "pro-20240913";
+  }, [org?.currentOrg?.tier]);
+
+  return (
+    <div>
+      {showAddons && (
+        <div className="mt-4 border rounded-lg p-4">
+          <h3 className="font-semibold mb-2">Add-ons</h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Switch
+                id="unlimited-prompts"
+                checked={prompts}
+                onCheckedChange={(checked) => setPrompts(checked)}
+              />
+              <div className="flex items-center space-x-2">
+                <Label
+                  htmlFor="unlimited-prompts"
+                  className="whitespace-nowrap"
+                >
+                  Unlimited Prompts
+                </Label>
+                <p className="text-sm text-muted-foreground whitespace-nowrap text-slate-500">
+                  + $30/mo
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <Switch
+                id="unlimited-alerts"
+                checked={alerts}
+                onCheckedChange={(checked) => setAlerts(checked)}
+              />
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="unlimited-alerts" className="whitespace-nowrap">
+                  Unlimited Alerts
+                </Label>
+                <p className="text-sm text-muted-foreground whitespace-nowrap text-slate-500">
+                  + $15/mo
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Button
+        onClick={async () => {
+          if (isPro) {
+            window.open("/settings/billing", "_blank");
+          } else {
+            const result = await upgradeToPro.mutateAsync();
+            if (result.data) {
+              window.open(result.data, "_blank");
+            } else {
+              console.error("No URL returned from upgrade mutation");
+            }
+          }
+        }}
+        className="w-full mt-4"
+        disabled={upgradeToPro.isLoading}
+      >
+        {upgradeToPro.isLoading
+          ? "Loading..."
+          : isPro
+          ? "Upgrade"
+          : "Start 14-day free trial"}
+      </Button>
+    </div>
+  );
+};
diff --git a/web/components/templates/prompts/CreatePromptDialog.tsx b/web/components/templates/prompts/CreatePromptDialog.tsx
new file mode 100644
index 0000000000..3c8e051582
--- /dev/null
+++ b/web/components/templates/prompts/CreatePromptDialog.tsx
@@ -0,0 +1,106 @@
+import { ProFeatureWrapper } from "@/components/shared/ProBlockerComponents/ProFeatureWrapper";
+import { DocumentPlusIcon } from "@heroicons/react/24/outline";
+import React, { useCallback, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../ui/dialog";
+import HcButton from "../../ui/hcButton";
+import { Label } from "../../ui/label";
+import { Switch } from "../../ui/switch";
+import { MODEL_LIST } from "../playground/new/modelList";
+import { DiffHighlight } from "../welcome/diffHighlight";
+
+interface CreatePromptDialogProps {
+  hasAccess: boolean;
+  onCreatePrompt: (name: string, model: string, content: string) => void;
+}
+
+const CreatePromptDialog: React.FC<CreatePromptDialogProps> = ({
+  hasAccess,
+  onCreatePrompt,
+}) => {
+  const [imNotTechnical, setImNotTechnical] = useState<boolean>(false);
+  const [newPromptName, setNewPromptName] = useState<string>("");
+  const [newPromptModel, setNewPromptModel] = useState(MODEL_LIST[0].value);
+  const [newPromptContent, setNewPromptContent] = useState("");
+  const [promptVariables, setPromptVariables] = useState<string[]>([]);
+  const newPromptInputRef = useRef<HTMLInputElement>(null);
+
+  const extractVariables = useCallback((content: string) => {
+    const regex = /\{\{([^}]+)\}\}/g;
+    const matches = content.match(regex);
+    return matches ? matches.map((match) => match.slice(2, -2).trim()) : [];
+  }, []);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild className="w-min">
+        <ProFeatureWrapper featureName="Prompts" enabled={hasAccess}>
+          <HcButton
+            variant={"primary"}
+            size={"sm"}
+            title={"Create new prompt"}
+            icon={DocumentPlusIcon}
+          />
+        </ProFeatureWrapper>
+      </DialogTrigger>
+      <DialogContent className="w-[900px] ">
+        <DialogHeader className="flex flex-row justify-between items-center">
+          <DialogTitle>Create a new prompt</DialogTitle>
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="im-not-technical"
+              checked={imNotTechnical}
+              onCheckedChange={setImNotTechnical}
+            />
+            <Label htmlFor="im-not-technical">I&apos;m not technical</Label>
+          </div>
+        </DialogHeader>
+        <div className="flex flex-col space-y-4 h-[570px] justify-between">
+          {imNotTechnical ? (
+            <>{/* ... (rest of the non-technical UI) ... */}</>
+          ) : (
+            <>
+              <p className="text-gray-500 mb-2">TS/JS Quick Start</p>
+              <DiffHighlight
+                code={`
+// 1. Add this line
+import { hprompt } from "@helicone/helicone";
+
+const chatCompletion = await openai.chat.completions.create(
+  {
+    messages: [
+      {
+        role: "user",
+        // 2: Add hprompt to any string, and nest any variable in additional brackets \`{}\`
+        content: hprompt\`Write a story about \${{ scene }}\`,
+      },
+    ],
+    model: "gpt-3.5-turbo",
+  },
+  {
+    // 3. Add Prompt Id Header
+    headers: {
+      "Helicone-Prompt-Id": "prompt_story",
+    },
+  }
+);
+                `}
+                language="typescript"
+                newLines={[]}
+                oldLines={[]}
+                minHeight={false}
+              />
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CreatePromptDialog;
diff --git a/web/components/templates/prompts/promptsPage.tsx b/web/components/templates/prompts/promptsPage.tsx
index 48f6f8577b..f4d15ea267 100644
--- a/web/components/templates/prompts/promptsPage.tsx
+++ b/web/components/templates/prompts/promptsPage.tsx
@@ -1,5 +1,9 @@
+import { useOrg } from "@/components/layout/organizationContext";
+import { ProFeatureWrapper } from "@/components/shared/ProBlockerComponents/ProFeatureWrapper";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import {
-  BookOpenIcon,
+  ChevronDownIcon,
   DocumentPlusIcon,
   DocumentTextIcon,
   EyeIcon,
@@ -7,16 +11,27 @@ import {
   Square2StackIcon,
   TableCellsIcon,
 } from "@heroicons/react/24/outline";
-import { Divider, TextInput } from "@tremor/react";
+import { TextInput } from "@tremor/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Fragment, useRef, useState, useCallback } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useJawnClient } from "../../../lib/clients/jawnHook";
 import { usePrompts } from "../../../services/hooks/prompts/prompts";
-import { DiffHighlight } from "../welcome/diffHighlight";
-import PromptCard from "./promptCard";
+import AuthHeader from "../../shared/authHeader";
+import LoadingAnimation from "../../shared/loadingAnimation";
+import useNotification from "../../shared/notification/useNotification";
 import { SimpleTable } from "../../shared/table/simpleTable";
-import HcButton from "../../ui/hcButton";
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import ThemedTabs from "../../shared/themed/themedTabs";
+import useSearchParams from "../../shared/utils/useSearchParams";
+import { Badge } from "../../ui/badge";
+import { Button } from "../../ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../ui/card";
 import {
   Dialog,
   DialogContent,
@@ -24,20 +39,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../ui/dialog";
-import PromptDelete from "./promptDelete";
-import LoadingAnimation from "../../shared/loadingAnimation";
-import PromptUsageChart from "./promptUsageChart";
-import ThemedTabs from "../../shared/themed/themedTabs";
-import useSearchParams from "../../shared/utils/useSearchParams";
-import AuthHeader from "../../shared/authHeader";
 import HcBadge from "../../ui/hcBadge";
-import { Switch } from "../../ui/switch";
+import HcButton from "../../ui/hcButton";
 import { Label } from "../../ui/label";
-import { Button } from "../../ui/button";
-import { useJawnClient } from "../../../lib/clients/jawnHook";
-import useNotification from "../../shared/notification/useNotification";
-import { Textarea } from "../../ui/textarea";
-import { Badge } from "../../ui/badge";
 import {
   Select,
   SelectContent,
@@ -45,8 +49,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { MODEL_LIST } from "../playground/new/modelList";
+import { Switch } from "../../ui/switch";
+import { Textarea } from "../../ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
+import { MODEL_LIST } from "../playground/new/modelList";
+import { PricingCompare } from "../pricing/pricingCompare";
+import { DiffHighlight } from "../welcome/diffHighlight";
+import PromptCard from "./promptCard";
+import PromptDelete from "./promptDelete";
+import PromptUsageChart from "./promptUsageChart";
 
 interface PromptsPageProps {
   defaultIndex: number;
@@ -129,6 +140,22 @@ const PromptsPage = (props: PromptsPageProps) => {
       router.push(`/prompts/${res.data.data?.id}`);
     }
   };
+  const org = useOrg();
+
+  const hasAccess = useMemo(() => {
+    return (
+      org?.currentOrg?.tier === "growth" ||
+      (org?.currentOrg?.tier === "pro-20240913" &&
+        (org?.currentOrg?.stripe_metadata as { addons?: { prompts?: boolean } })
+          ?.addons?.prompts)
+    );
+  }, [org?.currentOrg?.tier, org?.currentOrg?.stripe_metadata]);
+
+  const hasLimitedAccess = useMemo(() => {
+    return !hasAccess && (prompts?.length ?? 0) > 0;
+  }, [hasAccess, prompts?.length]);
+
+  const [showPricingCompare, setShowPricingCompare] = useState(false);
 
   return (
     <>
@@ -137,6 +164,18 @@ const PromptsPage = (props: PromptsPageProps) => {
           title={
             <div className="flex items-center gap-2">
               Prompts <HcBadge title="Beta" size="sm" />
+              {hasLimitedAccess && (
+                <InfoBox className="ml-4">
+                  <p className="text-sm font-medium flex gap-2">
+                    <b>Need to create new prompts?</b>
+                    <ProFeatureWrapper featureName="Prompts">
+                      <button className="underline">
+                        Get unlimited prompts & more.
+                      </button>
+                    </ProFeatureWrapper>
+                  </p>
+                </InfoBox>
+              )}
             </div>
           }
         />
@@ -148,148 +187,167 @@ const PromptsPage = (props: PromptsPageProps) => {
             </div>
           ) : (
             <>
-              <div
-                id="util"
-                className="flex flex-row justify-between items-center"
-              >
-                <div className="flex flex-row items-center space-x-2 w-full">
-                  <div className="max-w-xs w-full">
-                    <TextInput
-                      icon={MagnifyingGlassIcon}
-                      value={searchName}
-                      onValueChange={(value) => setSearchName(value)}
-                      placeholder="Search prompts..."
-                    />
-                  </div>
-                  <Dialog>
-                    <DialogTrigger asChild>
-                      <HcButton
-                        variant={"primary"}
-                        size={"sm"}
-                        title={"Create new prompt"}
-                        icon={DocumentPlusIcon}
+              {(hasAccess || hasLimitedAccess) && (
+                <div
+                  id="util"
+                  className="flex flex-row justify-between items-center"
+                >
+                  <div className="flex flex-row items-center space-x-2 w-full">
+                    <div className="max-w-xs w-full">
+                      <TextInput
+                        icon={MagnifyingGlassIcon}
+                        value={searchName}
+                        onValueChange={(value) => setSearchName(value)}
+                        placeholder="Search prompts..."
                       />
-                    </DialogTrigger>
-                    <DialogContent className="w-[900px] ">
-                      <DialogHeader className="flex flex-row justify-between items-center">
-                        <DialogTitle>Create a new prompt</DialogTitle>
-                        <div className="flex items-center space-x-2">
-                          <Switch
-                            id="im-not-technical"
-                            checked={imNotTechnical}
-                            onCheckedChange={setImNotTechnical}
+                    </div>
+
+                    <Dialog>
+                      <DialogTrigger asChild className="w-min">
+                        {hasAccess ? (
+                          <HcButton
+                            variant={"primary"}
+                            size={"sm"}
+                            title={"Create new prompt"}
+                            icon={DocumentPlusIcon}
                           />
-                          <Label htmlFor="im-not-technical">
-                            I&apos;m not technical
-                          </Label>
-                        </div>
-                      </DialogHeader>
-                      <div className="flex flex-col space-y-4 h-[570px] justify-between">
-                        {imNotTechnical ? (
-                          <>
-                            <div className="flex flex-col space-y-6">
-                              <div className="flex flex-col space-y-2">
-                                <Label
-                                  className="text-lg"
-                                  htmlFor="new-prompt-name"
-                                >
-                                  Name
-                                </Label>
-                                <TextInput
-                                  id="new-prompt-name"
-                                  value={newPromptName}
-                                  onChange={(e) =>
-                                    setNewPromptName(e.target.value)
-                                  }
-                                  ref={newPromptInputRef}
-                                />
-                              </div>
-                              <div className="flex flex-col space-y-2">
-                                <Label
-                                  className="text-lg"
-                                  htmlFor="new-prompt-model"
-                                >
-                                  Model
-                                </Label>
-                                <Select
-                                  value={newPromptModel}
-                                  onValueChange={setNewPromptModel}
-                                >
-                                  <SelectTrigger className="w-[200px]">
-                                    <SelectValue placeholder="Select a model" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {MODEL_LIST.map((model) => (
-                                      <SelectItem
-                                        key={model.value}
-                                        value={model.value}
-                                      >
-                                        {model.label}
-                                      </SelectItem>
-                                    ))}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <div className="flex flex-col space-y-2">
-                                <Label
-                                  className="text-lg"
-                                  htmlFor="new-prompt-content"
-                                >
-                                  Prompt
-                                </Label>
-                                <Textarea
-                                  id="new-prompt-content"
-                                  value={newPromptContent}
-                                  onChange={(e) => {
-                                    const newContent = e.target.value;
-                                    setNewPromptContent(newContent);
-                                    setPromptVariables(
-                                      extractVariables(newContent)
-                                    );
-                                  }}
-                                  placeholder="Type your prompt here"
-                                  rows={4}
-                                />
-                                <p className="text-sm text-gray-500">
-                                  Use &#123;&#123; sample_variable &#125;&#125;
-                                  to insert variables into your prompt.
-                                </p>
-                              </div>
-                              {promptVariables.length > 0 && (
+                        ) : (
+                          <ProFeatureWrapper
+                            featureName="Prompts"
+                            enabled={false}
+                          >
+                            <HcButton
+                              variant={"primary"}
+                              size={"sm"}
+                              title={"Create new prompt"}
+                              icon={DocumentPlusIcon}
+                            />
+                          </ProFeatureWrapper>
+                        )}
+                      </DialogTrigger>
+                      <DialogContent className="w-[900px] ">
+                        <DialogHeader className="flex flex-row justify-between items-center">
+                          <DialogTitle>Create a new prompt</DialogTitle>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              id="im-not-technical"
+                              checked={imNotTechnical}
+                              onCheckedChange={setImNotTechnical}
+                            />
+                            <Label htmlFor="im-not-technical">
+                              I&apos;m not technical
+                            </Label>
+                          </div>
+                        </DialogHeader>
+                        <div className="flex flex-col space-y-4 h-[570px] justify-between">
+                          {imNotTechnical ? (
+                            <>
+                              <div className="flex flex-col space-y-6">
                                 <div className="flex flex-col space-y-2">
-                                  <Label className="text-lg">
-                                    Your variables
+                                  <Label
+                                    className="text-lg"
+                                    htmlFor="new-prompt-name"
+                                  >
+                                    Name
                                   </Label>
-                                  <div className="flex flex-wrap gap-2">
-                                    {promptVariables.map((variable, index) => (
-                                      <Badge
-                                        key={index}
-                                        variant="secondary"
-                                        className="text-sm px-4 py-2 rounded-md"
-                                      >
-                                        {variable}
-                                      </Badge>
-                                    ))}
-                                  </div>
+                                  <TextInput
+                                    id="new-prompt-name"
+                                    value={newPromptName}
+                                    onChange={(e) =>
+                                      setNewPromptName(e.target.value)
+                                    }
+                                    ref={newPromptInputRef}
+                                  />
                                 </div>
-                              )}
-                            </div>
-                            <div className="flex justify-end items-center mt-4">
-                              <Button
-                                className="w-auto"
-                                onClick={() => createPrompt(newPromptName)}
-                              >
-                                Create prompt
-                              </Button>
-                            </div>
-                          </>
-                        ) : (
-                          <>
-                            <p className="text-gray-500 mb-2">
-                              TS/JS Quick Start
-                            </p>
-                            <DiffHighlight
-                              code={`
+                                <div className="flex flex-col space-y-2">
+                                  <Label
+                                    className="text-lg"
+                                    htmlFor="new-prompt-model"
+                                  >
+                                    Model
+                                  </Label>
+                                  <Select
+                                    value={newPromptModel}
+                                    onValueChange={setNewPromptModel}
+                                  >
+                                    <SelectTrigger className="w-[200px]">
+                                      <SelectValue placeholder="Select a model" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {MODEL_LIST.map((model) => (
+                                        <SelectItem
+                                          key={model.value}
+                                          value={model.value}
+                                        >
+                                          {model.label}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                                <div className="flex flex-col space-y-2">
+                                  <Label
+                                    className="text-lg"
+                                    htmlFor="new-prompt-content"
+                                  >
+                                    Prompt
+                                  </Label>
+                                  <Textarea
+                                    id="new-prompt-content"
+                                    value={newPromptContent}
+                                    onChange={(e) => {
+                                      const newContent = e.target.value;
+                                      setNewPromptContent(newContent);
+                                      setPromptVariables(
+                                        extractVariables(newContent)
+                                      );
+                                    }}
+                                    placeholder="Type your prompt here"
+                                    rows={4}
+                                  />
+                                  <p className="text-sm text-gray-500">
+                                    Use &#123;&#123; sample_variable
+                                    &#125;&#125; to insert variables into your
+                                    prompt.
+                                  </p>
+                                </div>
+                                {promptVariables.length > 0 && (
+                                  <div className="flex flex-col space-y-2">
+                                    <Label className="text-lg">
+                                      Your variables
+                                    </Label>
+                                    <div className="flex flex-wrap gap-2">
+                                      {promptVariables.map(
+                                        (variable, index) => (
+                                          <Badge
+                                            key={index}
+                                            variant="secondary"
+                                            className="text-sm px-4 py-2 rounded-md"
+                                          >
+                                            {variable}
+                                          </Badge>
+                                        )
+                                      )}
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                              <div className="flex justify-end items-center mt-4">
+                                <Button
+                                  className="w-auto"
+                                  onClick={() => createPrompt(newPromptName)}
+                                >
+                                  Create prompt
+                                </Button>
+                              </div>
+                            </>
+                          ) : (
+                            <>
+                              <p className="text-gray-500 mb-2">
+                                TS/JS Quick Start
+                              </p>
+                              <DiffHighlight
+                                code={`
 // 1. Add this line
 import { hprompt } from "@helicone/helicone";
 
@@ -312,39 +370,42 @@ const chatCompletion = await openai.chat.completions.create(
   }
 );
                               `}
-                              language="typescript"
-                              newLines={[]}
-                              oldLines={[]}
-                              minHeight={false}
-                            />
-                          </>
-                        )}
-                      </div>
-                    </DialogContent>
-                  </Dialog>
+                                language="typescript"
+                                newLines={[]}
+                                oldLines={[]}
+                                minHeight={false}
+                              />
+                            </>
+                          )}
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
+
+                  <ThemedTabs
+                    options={[
+                      {
+                        label: "table",
+                        icon: TableCellsIcon,
+                      },
+                      {
+                        label: "card",
+                        icon: Square2StackIcon,
+                      },
+                    ]}
+                    onOptionSelect={function (option: string): void {
+                      if (option === "table") {
+                        searchParams.set("view", "table");
+                      } else {
+                        searchParams.set("view", "card");
+                      }
+                    }}
+                    initialIndex={searchParams.get("view") === "card" ? 1 : 0}
+                  />
                 </div>
-                <ThemedTabs
-                  options={[
-                    {
-                      label: "table",
-                      icon: TableCellsIcon,
-                    },
-                    {
-                      label: "card",
-                      icon: Square2StackIcon,
-                    },
-                  ]}
-                  onOptionSelect={function (option: string): void {
-                    if (option === "table") {
-                      searchParams.set("view", "table");
-                    } else {
-                      searchParams.set("view", "card");
-                    }
-                  }}
-                  initialIndex={searchParams.get("view") === "card" ? 1 : 0}
-                />
-              </div>
-              {filteredPrompts && filteredPrompts.length > 0 ? (
+              )}
+
+              {filteredPrompts && hasLimitedAccess ? (
                 searchParams.get("view") === "card" ? (
                   <ul className="w-full h-full grid grid-cols-2 xl:grid-cols-4 gap-4">
                     {filteredPrompts.map((prompt, i) => (
@@ -459,32 +520,31 @@ const chatCompletion = await openai.chat.completions.create(
                   />
                 )
               ) : (
-                <div className="flex flex-col w-full mt-16 justify-center items-center">
-                  <div className="flex flex-col">
-                    <DocumentTextIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
-                    <p className="text-xl text-black dark:text-white font-semibold mt-8">
-                      No Prompts
-                    </p>
-                    <p className="text-sm text-gray-500 max-w-sm mt-2">
-                      View our documentation to learn how to create a prompt.
-                    </p>
-                    <div className="mt-4">
-                      <Link
-                        href="https://docs.helicone.ai/features/prompts"
-                        className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                      >
-                        <BookOpenIcon className="h-4 w-4" />
-                        View Docs
-                      </Link>
-                    </div>
-                    <Divider>Or</Divider>
+                <div className="flex justify-center items-center min-h-[calc(100vh-200px)]">
+                  <Card className="max-w-4xl">
+                    <CardHeader>
+                      <CardTitle>Need Prompts?</CardTitle>
+                      <p className="text-sm text-muted-foreground">
+                        The Free plan does not include the Prompts feature,
+                        upgrade to Pro to enable Prompts.
+                      </p>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <InfoBox>
+                        <p className="text-sm font-medium">
+                          Version prompts, create prompt templates, and run
+                          experiments to improve prompt outputs.
+                        </p>
+                      </InfoBox>
+                      <div className="bg-muted p-4 rounded-lg">
+                        <div className="flex space-x-2 mb-2">
+                          <Button variant="outline" size="sm">
+                            Code
+                          </Button>
+                        </div>
 
-                    <div className="mt-4">
-                      <h3 className="text-xl text-black dark:text-white font-semibold">
-                        TS/JS Quick Start
-                      </h3>
-                      <DiffHighlight
-                        code={`
+                        <DiffHighlight
+                          code={`
 // 1. Add this line
 import { hprompt } from "@helicone/helicone";
  
@@ -507,12 +567,48 @@ const chatCompletion = await openai.chat.completions.create(
   }
 );
  `}
-                        language="typescript"
-                        newLines={[]}
-                        oldLines={[]}
-                      />
-                    </div>
-                  </div>
+                          language="typescript"
+                          newLines={[]}
+                          oldLines={[]}
+                        />
+                      </div>
+                    </CardContent>
+                    <CardFooter className="flex flex-col items-start">
+                      <Button
+                        variant="link"
+                        className="px-0 mb-4"
+                        onClick={() =>
+                          setShowPricingCompare(!showPricingCompare)
+                        }
+                      >
+                        Compare my plan with Pro + Prompts{" "}
+                        <ChevronDownIcon
+                          className={`ml-1 h-4 w-4 transition-transform ${
+                            showPricingCompare ? "rotate-180" : ""
+                          }`}
+                        />
+                      </Button>
+                      <div className="w-full">
+                        {showPricingCompare && (
+                          <PricingCompare featureName="Prompts" />
+                        )}
+                      </div>
+                      <div className="space-x-2 mt-5">
+                        <Button variant="outline" asChild>
+                          <Link href="https://docs.helicone.ai/features/prompts">
+                            View documentation
+                          </Link>
+                        </Button>
+                        {showPricingCompare || (
+                          <Button asChild>
+                            <Link href="/settings/billing">
+                              Start 14-day free trial
+                            </Link>
+                          </Button>
+                        )}
+                      </div>
+                    </CardFooter>
+                  </Card>
                 </div>
               )}
             </>
diff --git a/web/components/templates/rateLimit/rateLimitPage.tsx b/web/components/templates/rateLimit/rateLimitPage.tsx
index 69dacb4854..3799605738 100644
--- a/web/components/templates/rateLimit/rateLimitPage.tsx
+++ b/web/components/templates/rateLimit/rateLimitPage.tsx
@@ -1,5 +1,5 @@
-import { BookOpenIcon, CircleStackIcon } from "@heroicons/react/24/outline";
-import { AreaChart } from "@tremor/react";
+import { BookOpenIcon, ShieldCheckIcon } from "@heroicons/react/24/outline";
+import { AreaChart, Badge, Divider } from "@tremor/react";
 import Link from "next/link";
 import { useState } from "react";
 import { TimeFilter } from "../../../lib/api/handlerWrappers";
@@ -18,6 +18,9 @@ import useSearchParams from "../../shared/utils/useSearchParams";
 import RequestsPageV2 from "../requestsV2/requestsPageV2";
 import { useGetPropertiesV2 } from "../../../services/hooks/propertiesV2";
 import { getPropertyFiltersV2 } from "../../../services/lib/filters/frontendFilterDefs";
+import { useOrg } from "@/components/layout/organizationContext";
+import { Button } from "@/components/ui/button";
+import { DiffHighlight } from "../welcome/diffHighlight";
 
 const RateLimitPage = (props: {}) => {
   const [timeFilter, setTimeFilter] = useState<TimeFilter>({
@@ -36,6 +39,11 @@ const RateLimitPage = (props: {}) => {
   };
   const { properties } = useGetPropertiesV2(getPropertyFiltersV2);
 
+  const org = useOrg();
+  const isPro =
+    org?.currentOrg?.tier === "pro-20240913" ||
+    org?.currentOrg?.tier === "growth";
+
   const rateLimitFilterLeaf = {
     request_response_rmt: {
       properties: {
@@ -85,7 +93,11 @@ const RateLimitPage = (props: {}) => {
   return (
     <>
       <AuthHeader
-        title={"Rate limits"}
+        title={
+          <div className="flex items-center gap-2">
+            Rate limits <Badge size="sm">Beta</Badge>
+          </div>
+        }
         actions={
           <Link
             href="https://docs.helicone.ai/features/advanced-usage/custom-rate-limits"
@@ -97,32 +109,72 @@ const RateLimitPage = (props: {}) => {
           </Link>
         }
       />
-      {!properties.find((x) => x === "Helicone-Rate-Limit-Status") ? (
-        <>
-          <div className="flex flex-col w-full h-96 justify-center items-center">
-            <div className="flex flex-col w-2/5">
-              <CircleStackIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
-              <p className="text-xl text-black dark:text-white font-semibold mt-8">
-                No Rate Limit data available
-              </p>
-              <p className="text-sm text-gray-500 max-w-sm mt-2">
-                Please view our documentation to learn how to enable rate limits
-                for your requests.
-              </p>
-              <div className="mt-4">
-                <Link
-                  href="https://docs.helicone.ai/features/advanced-usage/custom-rate-limits"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                >
-                  <BookOpenIcon className="h-4 w-4" />
-                  View Docs
+      {!isPro || !properties.find((x) => x === "Helicone-Rate-Limit-Status") ? (
+        <div className="flex flex-col w-full mt-16 justify-center items-center">
+          <div className="flex flex-col">
+            <div className="w-fit pt-2 pl-0.5 bg-white border border-gray-300 rounded-md">
+              <ShieldCheckIcon className="h-10 w-10 flex items-center justify-center ml-2 text-gray-500" />
+            </div>
+
+            <p className="text-xl text-black dark:text-white font-semibold mt-8">
+              {!isPro
+                ? "Upgrade to Pro to start using Rate Limits"
+                : "No Rate Limit Data Found"}
+            </p>
+            <p className="text-sm text-gray-500 max-w-sm mt-2">
+              View our documentation to learn how to use rate limiting.
+            </p>
+            <div className="mt-4 flex gap-2">
+              <Link
+                href="https://docs.helicone.ai/features/advanced-usage/custom-rate-limits"
+                className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              >
+                <BookOpenIcon className="h-4 w-4" />
+                View Docs
+              </Link>
+              {!isPro && (
+                <Link href="/settings/billing">
+                  <Button className="bg-sky-500 hover:bg-sky-600">
+                    Start free trial
+                  </Button>
                 </Link>
-              </div>
+              )}
             </div>
+            {isPro && (
+              <div>
+                <Divider>Or</Divider>
+
+                <div className="mt-4">
+                  <h3 className="text-xl text-black dark:text-white font-semibold">
+                    TS/JS Quick Start
+                  </h3>
+                  <DiffHighlight
+                    code={`
+import { Configuration, OpenAIApi } from "openai";
+const configuration = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+  basePath: "https://oai.helicone.ai/v1",
+  defaultHeaders: {
+    "Helicone-Property-IP": "111.1.1.1",
+    "Helicone-RateLimit-Policy": "10;w=1000;u=cents;s=user", // add this header and set the header value
+  },
+});
+const openai = new OpenAIApi(configuration);
+
+const response = await openai.createCompletion({
+  model: "text-davinci-003",
+  prompt: "How do I set custom rate limits?",
+});
+`}
+                    language="typescript"
+                    newLines={[]}
+                    oldLines={[]}
+                  />
+                </div>
+              </div>
+            )}
           </div>
-        </>
+        </div>
       ) : (
         <Col className="gap-8">
           <ThemedTimeFilter
diff --git a/web/components/templates/requestsV2/requestsPageV2.tsx b/web/components/templates/requestsV2/requestsPageV2.tsx
index 08e62aaa7e..0081b3cbca 100644
--- a/web/components/templates/requestsV2/requestsPageV2.tsx
+++ b/web/components/templates/requestsV2/requestsPageV2.tsx
@@ -54,6 +54,7 @@ import { useRouter } from "next/router";
 import ThemedModal from "../../shared/themed/themedModal";
 import NewDataset from "../datasets/NewDataset";
 import { useSelectMode } from "../../../services/hooks/dataset/selectMode";
+import { ProFeatureWrapper } from "@/components/shared/ProBlockerComponents/ProFeatureWrapper";
 
 interface RequestsPageV2Props {
   currentPage: number;
@@ -698,14 +699,12 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
               you upgrade.
             </p>
             <div className="mt-4">
-              <button
-                onClick={() => {
-                  setOpen(true);
-                }}
-                className="items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              <Link
+                href="/settings/billing"
+                className="w-min  whitespace-nowrap items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
               >
-                Upgrade
-              </button>
+                Upgrade - Start Free Trial
+              </Link>
             </div>
           </div>
         </div>
@@ -912,15 +911,17 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
                   </span>
                 </div>
                 {selectedIds.length > 0 && (
-                  <GenericButton
-                    onClick={() => {
-                      setModalOpen(true);
-                    }}
-                    icon={
-                      <PlusIcon className="h-5 w-5 text-gray-900 dark:text-gray-100" />
-                    }
-                    text="Add to dataset"
-                  />
+                  <ProFeatureWrapper featureName="Datasets">
+                    <GenericButton
+                      onClick={() => {
+                        setModalOpen(true);
+                      }}
+                      icon={
+                        <PlusIcon className="h-5 w-5 text-gray-900 dark:text-gray-100" />
+                      }
+                      text="Add to dataset"
+                    />
+                  </ProFeatureWrapper>
                 )}
               </Row>
             )}
diff --git a/web/components/templates/sessions/sessionsPage.tsx b/web/components/templates/sessions/sessionsPage.tsx
index 18501c58e5..81de92e9e2 100644
--- a/web/components/templates/sessions/sessionsPage.tsx
+++ b/web/components/templates/sessions/sessionsPage.tsx
@@ -1,7 +1,6 @@
-import { BookOpenIcon } from "@heroicons/react/24/outline";
-import { Divider, Badge } from "@tremor/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import { useOrg } from "@/components/layout/organizationContext";
+
+import { Badge } from "@tremor/react";
 import { useEffect, useState } from "react";
 import {
   getTimeIntervalAgo,
@@ -12,10 +11,9 @@ import { useSessionNames, useSessions } from "../../../services/hooks/sessions";
 import { SortDirection } from "../../../services/lib/sorts/users/sorts";
 import { Row } from "../../layout/common/row";
 import AuthHeader from "../../shared/authHeader";
-import { UIFilterRow } from "../../shared/themed/themedAdvancedFilters";
-import { DiffHighlight } from "../welcome/diffHighlight";
 import SessionNameSelection from "./nameSelection";
 import SessionDetails from "./sessionDetails";
+import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 
 interface SessionsPageProps {
   currentPage: number;
@@ -30,10 +28,6 @@ interface SessionsPageProps {
 const SessionsPage = (props: SessionsPageProps) => {
   const { currentPage, pageSize, sort, defaultIndex } = props;
 
-  const [advancedFilters, setAdvancedFilters] = useState<UIFilterRow[]>([]);
-
-  const router = useRouter();
-
   const [interval, setInterval] = useState<TimeInterval>("24h");
 
   const [timeFilter, setTimeFilter] = useState<{
@@ -58,6 +52,10 @@ const SessionsPage = (props: SessionsPageProps) => {
 
   const [hasSomeSessions, setHasSomeSessions] = useState<boolean | null>(null);
 
+  const org = useOrg();
+
+  const [isPlanComparisonVisible, setIsPlanComparisonVisible] = useState(false);
+
   useEffect(() => {
     if (hasSomeSessions === null && !names.isLoading) {
       setHasSomeSessions(names.sessions.length > 0);
@@ -69,12 +67,14 @@ const SessionsPage = (props: SessionsPageProps) => {
       <AuthHeader
         title={
           <div className="flex items-center gap-2">
-            Sessions <Badge size="sm">Beta</Badge>
+            Sessions <Badge color="gray">Beta</Badge>
           </div>
         }
       />
       <div>
-        {hasSomeSessions || hasSomeSessions === null ? (
+        {!isLoading &&
+        org?.currentOrg?.tier !== "free" &&
+        (hasSomeSessions || hasSomeSessions === null) ? (
           <Row className="gap-5 ">
             <SessionNameSelection
               sessionIdSearch={sessionIdSearch}
@@ -100,78 +100,14 @@ const SessionsPage = (props: SessionsPageProps) => {
             />
           </Row>
         ) : (
-          <div className="flex flex-col w-full mt-16 justify-center items-center">
-            <div className="flex flex-col">
-              <div className="w-fit pt-2 pl-0.5 bg-white border border-gray-300 rounded-md">
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="w-10 h-10 flex items-center justify-center ml-2"
-                >
-                  <path
-                    d="M16.0313 9.70305H12.9095V6.89055C12.9095 5.90618 12.122 5.11868 11.1376 5.11868H8.3251V2.30618C8.3251 1.3218 7.5376 0.534302 6.55322 0.534302H2.27822C1.29385 0.534302 0.506348 1.3218 0.506348 2.30618V6.55305C0.506348 7.53743 1.29385 8.32493 2.27822 8.32493H5.09072V11.1374C5.09072 12.1218 5.87822 12.9093 6.8626 12.9093H9.6751V16.0312C9.6751 16.8468 10.3501 17.4937 11.1376 17.4937H16.0313C16.847 17.4937 17.4938 16.8187 17.4938 16.0312V11.1656C17.4938 10.3781 16.847 9.70305 16.0313 9.70305ZM2.27822 7.03118C1.99697 7.03118 1.77197 6.80618 1.77197 6.52493V2.27805C1.77197 1.9968 1.99697 1.7718 2.27822 1.7718H6.5251C6.80635 1.7718 7.03135 1.9968 7.03135 2.27805V5.09055H6.8626C5.87822 5.09055 5.09072 5.87805 5.09072 6.86243V7.03118H2.27822ZM6.8626 11.6437C6.58135 11.6437 6.35635 11.4187 6.35635 11.1374V6.86243C6.35635 6.58118 6.58135 6.35618 6.8626 6.35618H11.1095C11.3907 6.35618 11.6157 6.58118 11.6157 6.86243V9.67493H11.1657C10.3501 9.67493 9.70322 10.3499 9.70322 11.1374V11.5874H6.8626V11.6437ZM16.2563 16.0312C16.2563 16.1437 16.172 16.2562 16.0313 16.2562H11.1657C11.0532 16.2562 10.9407 16.1718 10.9407 16.0312V11.1656C10.9407 11.0531 11.0251 10.9406 11.1657 10.9406H16.0313C16.1438 10.9406 16.2563 11.0249 16.2563 11.1656V16.0312Z"
-                    fill="#111928"
-                  />
-                </svg>
-              </div>
-              <p className="text-xl text-black dark:text-white font-semibold mt-8">
-                No Sessions Created
-              </p>
-              <p className="text-sm text-gray-500 max-w-sm mt-2">
-                View our documentation to learn how to log sessions.
-              </p>
-              <div className="mt-4">
-                <Link
-                  href="https://docs.helicone.ai/features/sessions"
-                  className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                >
-                  <BookOpenIcon className="h-4 w-4" />
-                  View Docs
-                </Link>
-              </div>
-              <Divider>Or</Divider>
-
-              <div className="mt-4">
-                <h3 className="text-xl text-black dark:text-white font-semibold">
-                  TS/JS Quick Start
-                </h3>
-                <DiffHighlight
-                  code={`
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-  baseURL: "https://oai.helicone.ai/v1",
-  defaultHeaders: {
-    "Helicone-Auth": \`Bearer ${process.env.HELICONE_API_KEY}\`,
-  },
-});
-
-const session = randomUUID();
-
-openai.chat.completions.create(
-  {
-    messages: [
-      {
-        role: "user",
-        content: "Generate an abstract for a course on space.",
-      },
-    ],
-    model: "gpt-4",
-  },
-  {
-    headers: {
-      "Helicone-Session-Id": session,
-      "Helicone-Session-Path": "/abstract",
-    },
-  }
-);
-`}
-                  language="typescript"
-                  newLines={[]}
-                  oldLines={[]}
-                />
-              </div>
-            </div>
+          <div className="flex justify-center items-center min-h-[calc(100vh-200px)]">
+            <FeatureUpgradeCard
+              title="Unlock Sessions"
+              description="The Free plan does not include the Sessions feature, but getting access is easy."
+              infoBoxText="Group and visualize multi-step LLM interactions by adding 2 simple headers."
+              videoSrc="https://marketing-assets-helicone.s3.us-west-2.amazonaws.com/sessions.mp4"
+              documentationLink="https://docs.helicone.ai/features/sessions"
+            />
           </div>
         )}
       </div>
diff --git a/web/components/templates/settings/rateLimitPage.tsx b/web/components/templates/settings/rateLimitPage.tsx
index 5c122a7c7a..36831b5298 100644
--- a/web/components/templates/settings/rateLimitPage.tsx
+++ b/web/components/templates/settings/rateLimitPage.tsx
@@ -8,17 +8,22 @@ import {
   startOfMonth,
   subMonths,
 } from "date-fns";
-import StyledAreaChart from "../dashboard/styledAreaChart";
 import { BarChart } from "@tremor/react";
 import { getTimeMap } from "../../../lib/timeCalculations/constants";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import useNotification from "../../shared/notification/useNotification";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
-interface RateLimitPageProps {}
-
-const RateLimitPage = (props: RateLimitPageProps) => {
-  const {} = props;
-
+const RateLimitPage = () => {
   const [currentMonth, setCurrentMonth] = useState(startOfMonth(new Date()));
   const timeIncrement = "day";
 
@@ -60,59 +65,57 @@ const RateLimitPage = (props: RateLimitPageProps) => {
   const { setNotification } = useNotification();
 
   return (
-    <div className="mt-8 flex flex-col text-gray-900 max-w-2xl space-y-8">
-      <div className="flex flex-col space-y-6">
-        <div className="flex flex-row space-x-4 items-center">
-          <button
-            onClick={prevMonth}
-            className="p-1 hover:bg-gray-200 rounded-md text-gray-500 hover:text-gray-700"
-          >
-            <ChevronLeftIcon className="h-5 w-5" />
-          </button>
-
-          <h1 className="text-4xl font-semibold tracking-wide text-black dark:text-white">
-            {getMonthName(startOfMonthFormatted + 1)}
-          </h1>
-          {!isNextMonthDisabled && (
-            <button
-              onClick={nextMonth}
-              className="p-1 hover:bg-gray-200 rounded-md text-gray-500 hover:text-gray-700"
+    <div className="container mx-auto py-10 space-y-8">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center space-x-4">
+            <Button variant="outline" size="icon" onClick={prevMonth}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <CardTitle className="text-3xl font-bold">
+              {getMonthName(startOfMonthFormatted)}
+            </CardTitle>
+            {!isNextMonthDisabled && (
+              <Button variant="outline" size="icon" onClick={nextMonth}>
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="font-semibold">
+            Your requests are never dropped and will always be returned to the
+            client. Helicone will always do its best effort to make sure the
+            user gets their request.
+          </p>
+          <p className="text-muted-foreground">
+            Below is a summary of the rate-limiting{" "}
+            <span className="font-semibold">logged</span> occurrences for your
+            organization last month. This simply indicates that some of your
+            requests were processed but not logged in your dashboard due to
+            reaching a rate limit - If you&apos;d like to increase your rate
+            limit, please feel free to reach out to us at{" "}
+            <Button
+              variant="link"
+              className="p-0 h-auto"
+              onClick={() => {
+                navigator.clipboard.writeText("sales@helicone.ai");
+                setNotification("Email copied to clipboard", "success");
+              }}
             >
-              <ChevronRightIcon className="h-5 w-5" />
-            </button>
-          )}
-        </div>
-        <b>
-          Your requests are never dropped and will always be returned to the
-          client. Helicone will always do it{"'"}s best effort to make sure the
-          user gets their request.
-        </b>
-        <p className="text-md text-gray-900 dark:text-gray-100">
-          Below is a summary of the rate-limiting <b>logged</b> occurrences for
-          your organization last month. This simply indicates that some of your
-          requests were processed but not logged in your dashboard due to
-          reaching a rate limit - If you’d like to increase your rate limit,
-          please feel free to reach out to us at{" "}
-          <button
-            onClick={() => {
-              // copy the email to the clipboard
-              navigator.clipboard.writeText("sales@helicone.ai");
-              setNotification("Email copied to clipboard", "success");
-            }}
-            className="text-blue-500 underline"
-          >
-            sales@helicone.ai
-          </button>
-          .
-        </p>
-      </div>
+              sales@helicone.ai
+            </Button>
+            .
+          </p>
+        </CardContent>
+      </Card>
+
       {!isLoading && metrics.totalRateLimits.data && (
-        <div key="rate-limit">
-          <StyledAreaChart
-            title={"Rate-Limits this month"}
-            value={metrics.totalRateLimits.data.data?.toString() ?? ""}
-            isDataOverTimeLoading={false}
-          >
+        <Card>
+          <CardHeader>
+            <CardTitle>Rate-Limits this month</CardTitle>
+          </CardHeader>
+          <CardContent>
             <BarChart
               className="h-[14rem]"
               data={
@@ -126,40 +129,39 @@ const RateLimitPage = (props: RateLimitPageProps) => {
               colors={["cyan"]}
               showYAxis={false}
             />
-          </StyledAreaChart>
-        </div>
+          </CardContent>
+        </Card>
       )}
 
-      <table
-        className="w-full border-collapse border border-gray-200 dark:border-gray-800"
-        style={{ tableLayout: "fixed" }}
-      >
-        <thead>
-          <tr>
-            <th>Tier</th>
-            <th>Rate limits</th>
-          </tr>
-        </thead>
-        <tbody className="text-sm">
-          <tr className="border-t border-gray-200 dark:border-gray-800">
-            <td>Free</td>
-            <td>834 logs / 5 seconds</td>
-          </tr>
-          <tr className="border-t border-gray-200 dark:border-gray-800">
-            <td>Pro</td>
-            <td>8334 logs / 5 second</td>
-          </tr>
-          <tr className="border-t border-gray-200 dark:border-gray-800">
-            <td
-              className="border-b border-gray-200 dark:border-gray-800"
-              rowSpan={2}
-            >
-              Enterprise
-            </td>
-            <td>Custom</td>
-          </tr>
-        </tbody>
-      </table>
+      <Card>
+        <CardHeader>
+          <CardTitle>Rate Limit Tiers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Tier</TableHead>
+                <TableHead>Rate limits</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>Free</TableCell>
+                <TableCell>834 logs / 5 seconds</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Pro</TableCell>
+                <TableCell>8334 logs / 5 seconds</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Enterprise</TableCell>
+                <TableCell>Custom</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     </div>
   );
 };
diff --git a/web/components/templates/settings/settingsLayout.tsx b/web/components/templates/settings/settingsLayout.tsx
new file mode 100644
index 0000000000..88e4efe1cb
--- /dev/null
+++ b/web/components/templates/settings/settingsLayout.tsx
@@ -0,0 +1,93 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  BuildingOfficeIcon,
+  CreditCardIcon,
+  NoSymbolIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
+import { Divider } from "@tremor/react";
+import { LinkIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { ReactNode } from "react";
+
+const tabs = [
+  {
+    id: "organization",
+    title: "Organization",
+    icon: BuildingOfficeIcon,
+    href: "/settings",
+  },
+  {
+    id: "connections",
+    title: "Connections",
+    icon: LinkIcon,
+    href: "/settings/connections",
+  },
+  {
+    id: "billing",
+    title: "Billing",
+    icon: CreditCardIcon,
+    href: "/settings/billing",
+  },
+  {
+    id: "members",
+    title: "Members",
+    icon: UserGroupIcon,
+    href: "/settings/members",
+  },
+  {
+    id: "rate-limits",
+    title: "Rate Limits",
+    icon: NoSymbolIcon,
+    href: "/settings/rate-limits",
+  },
+];
+
+interface SettingsLayoutProps {
+  children: ReactNode;
+}
+
+const SettingsLayout = ({ children }: SettingsLayoutProps) => {
+  const router = useRouter();
+  const currentPath = router.pathname;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col space-y-8 items-start">
+        <div className="flex flex-col space-y-2 items-start">
+          <Tabs
+            defaultValue={
+              tabs.find((tab) => tab.href === currentPath)?.id || "general"
+            }
+            className=""
+            orientation="vertical"
+          >
+            <TabsList className="flex flex-row h-full space-y-1">
+              {tabs.map((tab) => (
+                <Link key={tab.id} href={tab.href} passHref>
+                  <TabsTrigger
+                    value={tab.id}
+                    className="w-full justify-start"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      router.push(tab.href);
+                    }}
+                  >
+                    <tab.icon className="h-5 w-5 mr-2" />
+                    {tab.title}
+                  </TabsTrigger>
+                </Link>
+              ))}
+            </TabsList>
+          </Tabs>
+          <Divider />
+        </div>
+
+        <div className="flex-1 w-full">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;
diff --git a/web/components/templates/settings/settingsPage.tsx b/web/components/templates/settings/settingsPage.tsx
index 61d4dec27c..4f423f5630 100644
--- a/web/components/templates/settings/settingsPage.tsx
+++ b/web/components/templates/settings/settingsPage.tsx
@@ -4,95 +4,67 @@ import {
   CreditCardIcon,
   NoSymbolIcon,
 } from "@heroicons/react/24/outline";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
-import { useOrg } from "../../layout/organizationContext";
-import OrgSettingsPage from "../organization/settings/orgSettingsPage";
-import OrgPlanPage from "../organization/plan/orgPlanPage";
-import OrgMembersPage from "../organization/members/orgMembersPage";
-import { ElementType } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import AuthHeader from "../../shared/authHeader";
-import RateLimitPage from "./rateLimitPage";
 
-interface SettingsPageProps {
-  defaultIndex?: number;
-}
-
-const tabs: {
-  id: number;
-  title: string;
-  icon: ElementType<any>;
-}[] = [
+const tabs = [
   {
-    id: 0,
+    id: "organization",
     title: "Organization",
     icon: BuildingOfficeIcon,
+    href: "/settings/organization",
   },
   {
-    id: 1,
+    id: "plan",
     title: "Plan",
     icon: CreditCardIcon,
+    href: "/settings/plan",
   },
   {
-    id: 2,
+    id: "members",
     title: "Members",
     icon: UserGroupIcon,
+    href: "/settings/members",
   },
   {
-    id: 3,
+    id: "rate-limits",
     title: "Rate-Limits",
     icon: NoSymbolIcon,
+    href: "/settings/rate-limits",
   },
 ];
 
-const SettingsPage = (props: SettingsPageProps) => {
-  const { defaultIndex = 0 } = props;
-
-  const orgContext = useOrg();
+const SettingsPage = () => {
   const router = useRouter();
+  const currentPath = router.pathname;
 
   return (
     <>
       <AuthHeader title="Settings" />
-      <TabGroup>
-        <TabList className="font-semibold" variant="line">
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
           {tabs.map((tab) => (
-            <Tab
+            <Link
               key={tab.id}
-              icon={tab.icon}
-              onClick={() => {
-                router.push(
-                  {
-                    query: { tab: tab.id },
-                  },
-                  undefined,
-                  { shallow: true }
-                );
-              }}
+              href={tab.href}
+              className={`${
+                currentPath === tab.href
+                  ? "border-indigo-500 text-indigo-600"
+                  : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+              } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm`}
             >
-              <span>{tab.title}</span>
-            </Tab>
+              <tab.icon
+                className={`${
+                  currentPath === tab.href ? "text-indigo-500" : "text-gray-400"
+                } -ml-0.5 mr-2 h-5 w-5 inline-block`}
+                aria-hidden="true"
+              />
+              {tab.title}
+            </Link>
           ))}
-        </TabList>
-        {orgContext?.currentOrg ? (
-          <TabPanels>
-            <TabPanel>
-              <OrgSettingsPage org={orgContext?.currentOrg} />
-            </TabPanel>
-            <TabPanel>
-              <OrgPlanPage org={orgContext?.currentOrg} />
-            </TabPanel>
-            <TabPanel>
-              <OrgMembersPage org={orgContext?.currentOrg} />
-            </TabPanel>
-            <TabPanel>
-              <RateLimitPage />
-            </TabPanel>
-          </TabPanels>
-        ) : (
-          <></>
-        )}
-      </TabGroup>
+        </nav>
+      </div>
     </>
   );
 };
diff --git a/web/components/templates/vault/vaultPage.tsx b/web/components/templates/vault/vaultPage.tsx
index e29b73f713..9821778d1f 100644
--- a/web/components/templates/vault/vaultPage.tsx
+++ b/web/components/templates/vault/vaultPage.tsx
@@ -14,6 +14,9 @@ import CreateProxyKeyModal from "./createProxyKeyModal";
 import { LimitCell } from "./limitsCell";
 import { useFeatureFlags } from "../../../services/hooks/featureFlags";
 import { useOrg } from "../../layout/organizationContext";
+import AuthHeader from "@/components/shared/authHeader";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 
 const VaultPage = ({
   variant = "basic",
@@ -101,9 +104,33 @@ const VaultPage = ({
       },
     });
   }
-
+  if (
+    org?.currentOrg?.tier !== "enterprise" &&
+    org?.currentOrg?.tier !== "pro-20240913"
+  ) {
+    return (
+      <div className="flex flex-col space-y-8 items-center min-h-[calc(100vh-200px)]">
+        <InfoBox variant="warning" className="mb-4 max-w-xl">
+          Vault is currently in beta and is only available for Pro and
+          Enterprise plans. If you have any issues, please contact us at
+          support@helicone.ai.
+        </InfoBox>
+        <FeatureUpgradeCard
+          title="Unlock Vault"
+          description="The Free plan does not include the BETA Vault feature, but getting access is easy."
+          infoBoxText="Use Vault to securely store and manage your API keys within Helicone."
+          documentationLink="https://docs.helicone.ai/features/vault"
+        />
+      </div>
+    );
+  }
   return (
     <>
+      <InfoBox variant="warning" className="mb-4 max-w-xl">
+        Vault is currently in beta. If you have any issues, please contact us at
+        support@helicone.ai.
+      </InfoBox>
+      <AuthHeader title={"Vault"} />
       <div className="flex flex-col space-y-12 divide-y divide-gray-300 dark:divide-gray-700 py-4 max-w-3xl">
         <div className="flex flex-col space-y-4">
           <div className="flex flex-row justify-between w-full items-center">
diff --git a/web/components/templates/webhooks/webhooksPage.tsx b/web/components/templates/webhooks/webhooksPage.tsx
index ed29c39817..931e36cc82 100644
--- a/web/components/templates/webhooks/webhooksPage.tsx
+++ b/web/components/templates/webhooks/webhooksPage.tsx
@@ -12,6 +12,8 @@ import AddWebhookForm from "./addWebhookForm";
 import LoadingAnimation from "../../shared/loadingAnimation";
 import ThemedDrawer from "../../shared/themed/themedDrawer";
 import { ClipboardIcon } from "@heroicons/react/24/outline";
+import { InfoBox } from "@/components/ui/helicone/infoBox";
+import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 
 interface WebhooksPageProps {
   user: User;
@@ -40,8 +42,32 @@ const WebhooksPage = (props: WebhooksPageProps) => {
     refetchOnWindowFocus: false,
   });
 
+  if (
+    org?.currentOrg?.tier !== "enterprise" &&
+    org?.currentOrg?.tier !== "pro-20240913"
+  ) {
+    return (
+      <div className="flex flex-col space-y-8 items-center min-h-[calc(100vh-200px)]">
+        <InfoBox variant="warning" className="mb-4 max-w-xl">
+          Webhooks are currently in beta. And are only available for Pro plans.
+          If you have any issues, please contact us at support@helicone.ai.
+        </InfoBox>
+        <FeatureUpgradeCard
+          title="Unlock Webhooks"
+          description="The Free plan does not include the BETA webhooks feature, but getting access is easy."
+          infoBoxText="Add webhooks to easily subscribe to API requests that come into Helicone."
+          documentationLink="https://docs.helicone.ai/features/sessions"
+        />
+      </div>
+    );
+  }
+
   return (
     <>
+      <InfoBox variant="warning" className="mb-4 max-w-xl">
+        Vault is currently in beta. If you have any issues, please contact us at
+        support@helicone.ai.
+      </InfoBox>
       <div className="flex flex-col space-y-8">
         <div className="flex flex-row w-full justify-between items-center">
           <h1 className="text-2xl font-semibold text-gray-900">
diff --git a/web/components/ui/button.tsx b/web/components/ui/button.tsx
index 6e4941b81d..8c00007250 100644
--- a/web/components/ui/button.tsx
+++ b/web/components/ui/button.tsx
@@ -22,6 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        xs: "h-8 px-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
diff --git a/web/components/ui/helicone/infoBox.tsx b/web/components/ui/helicone/infoBox.tsx
new file mode 100644
index 0000000000..e8a908f6fa
--- /dev/null
+++ b/web/components/ui/helicone/infoBox.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { LightbulbIcon } from "lucide-react";
+
+export interface InfoBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ElementType;
+  variant?: "info" | "warning" | "success" | "error";
+}
+
+const variantStyles = {
+  info: "bg-blue-50 border-l-blue-700 text-blue-700",
+  warning: "bg-yellow-50 border-l-yellow-700 text-yellow-700",
+  success: "bg-green-50 border-l-green-700 text-green-700",
+  error: "bg-red-50 border-l-red-700 text-red-700",
+};
+
+const InfoBox = React.forwardRef<HTMLDivElement, InfoBoxProps>(
+  (
+    {
+      className,
+      icon: Icon = LightbulbIcon,
+      variant = "info",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        className={cn(
+          "flex items-center space-x-2 rounded-md border px-4 py-2 border-l-4",
+          variantStyles[variant],
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <Icon
+          className={`h-5 w-5 ${variant === "info" ? "text-blue-500" : ""}`}
+        />
+        <div className="text-sm font-medium">{children}</div>
+      </div>
+    );
+  }
+);
+
+InfoBox.displayName = "InfoBox";
+
+export { InfoBox };
diff --git a/web/components/ui/progress.tsx b/web/components/ui/progress.tsx
new file mode 100644
index 0000000000..8857bc2946
--- /dev/null
+++ b/web/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-slate-900 transition-all dark:bg-slate-50"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/web/components/ui/table.tsx b/web/components/ui/table.tsx
new file mode 100644
index 0000000000..ddbd9605b9
--- /dev/null
+++ b/web/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-slate-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50",
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/web/components/ui/tabs.tsx b/web/components/ui/tabs.tsx
new file mode 100644
index 0000000000..10e0c7e1c5
--- /dev/null
+++ b/web/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-sm dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/web/lib/clients/jawnTypes/private.ts b/web/lib/clients/jawnTypes/private.ts
index 69324b191e..940ed08e21 100644
--- a/web/lib/clients/jawnTypes/private.ts
+++ b/web/lib/clients/jawnTypes/private.ts
@@ -4103,7 +4103,32 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            /** Format: double */
+            total: number;
+            /** Format: double */
+            tax: number | null;
+            /** Format: double */
+            subtotal: number;
+            discount: ({
+              coupon: {
+                /** Format: double */
+                percent_off: number | null;
+                name: string | null;
+              };
+            }) | null;
+            lines: ({
+              data: ({
+                  description: string | null;
+                  /** Format: double */
+                  amount: number | null;
+                  id: string | null;
+                })[];
+            }) | null;
+            /** Format: double */
+            next_payment_attempt: number | null;
+            currency: string | null;
+          }) | null;
         };
       };
     };
@@ -4131,7 +4156,26 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            items: ({
+                price: {
+                  product: ({
+                    name: string | null;
+                  }) | null;
+                };
+                /** Format: double */
+                quantity?: number;
+              })[];
+            /** Format: double */
+            trial_end: number | null;
+            id: string;
+            /** Format: double */
+            current_period_start: number;
+            /** Format: double */
+            current_period_end: number;
+            cancel_at_period_end: boolean;
+            status: string;
+          }) | null;
         };
       };
     };
diff --git a/web/lib/clients/jawnTypes/public.ts b/web/lib/clients/jawnTypes/public.ts
index f9ace06250..62460ba01e 100644
--- a/web/lib/clients/jawnTypes/public.ts
+++ b/web/lib/clients/jawnTypes/public.ts
@@ -4322,7 +4322,32 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            /** Format: double */
+            total: number;
+            /** Format: double */
+            tax: number | null;
+            /** Format: double */
+            subtotal: number;
+            discount: ({
+              coupon: {
+                /** Format: double */
+                percent_off: number | null;
+                name: string | null;
+              };
+            }) | null;
+            lines: ({
+              data: ({
+                  description: string | null;
+                  /** Format: double */
+                  amount: number | null;
+                  id: string | null;
+                })[];
+            }) | null;
+            /** Format: double */
+            next_payment_attempt: number | null;
+            currency: string | null;
+          }) | null;
         };
       };
     };
@@ -4350,7 +4375,26 @@ export interface operations {
       /** @description Ok */
       200: {
         content: {
-          "application/json": unknown;
+          "application/json": ({
+            items: ({
+                price: {
+                  product: ({
+                    name: string | null;
+                  }) | null;
+                };
+                /** Format: double */
+                quantity?: number;
+              })[];
+            /** Format: double */
+            trial_end: number | null;
+            id: string;
+            /** Format: double */
+            current_period_start: number;
+            /** Format: double */
+            current_period_end: number;
+            cancel_at_period_end: boolean;
+            status: string;
+          }) | null;
         };
       };
     };
diff --git a/web/pages/developer.tsx b/web/pages/developer.tsx
deleted file mode 100644
index 75541270e5..0000000000
--- a/web/pages/developer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ReactElement } from "react";
-import { NextPageWithLayout } from "./_app";
-import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
-import { SupabaseServerWrapper } from "../lib/wrappers/supabase";
-import DeveloperPage from "../components/templates/developer/developerPage";
-import AuthLayout from "../components/layout/auth/authLayout";
-
-const Developer: NextPageWithLayout<
-  InferGetServerSidePropsType<typeof getServerSideProps>
-> = (props) => {
-  return <DeveloperPage defaultIndex={props.defaultIndex} />;
-};
-
-Developer.getLayout = function getLayout(page: ReactElement) {
-  return <AuthLayout>{page}</AuthLayout>;
-};
-
-export default Developer;
-
-export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
-  // Create authenticated Supabase Client
-  const supabase = new SupabaseServerWrapper(ctx).getClient();
-  // Check if we have a session
-  const {
-    data: { session },
-  } = await supabase.auth.getSession();
-
-  if (!session)
-    return {
-      redirect: {
-        destination: "/",
-        permanent: false,
-      },
-    };
-
-  const { tab } = ctx.query;
-
-  return {
-    props: {
-      initialSession: session,
-      user: session.user,
-      defaultIndex: tab ? parseInt(tab as string) : 0,
-    },
-  };
-};
diff --git a/web/pages/developer/index.tsx b/web/pages/developer/index.tsx
new file mode 100644
index 0000000000..ef1a2a6dba
--- /dev/null
+++ b/web/pages/developer/index.tsx
@@ -0,0 +1,93 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import DeveloperPage from "../../components/templates/developer/developerPage";
+import Link from "next/link";
+import {
+  GlobeAltIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from "@heroicons/react/24/outline";
+
+const Developer: NextPageWithLayout = () => {
+  return (
+    <DeveloperPage title="Developer">
+      <div className="p-4">
+        <h2 className="text-2xl font-bold mb-4">Developer Tools</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <DeveloperCard
+            title="Keys"
+            description="Manage your API keys"
+            icon={KeyIcon}
+            href="/developer/keys"
+          />
+          <DeveloperCard
+            title="Webhooks"
+            description="Set up and manage webhooks"
+            icon={GlobeAltIcon}
+            href="/developer/webhooks"
+          />
+          <DeveloperCard
+            title="Vault"
+            description="Securely store and manage sensitive data"
+            icon={LockClosedIcon}
+            href="/developer/vault"
+          />
+        </div>
+      </div>
+    </DeveloperPage>
+  );
+};
+
+Developer.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
+};
+
+export default Developer;
+
+const DeveloperCard = ({
+  title,
+  description,
+  icon: Icon,
+  href,
+}: {
+  title: string;
+  description: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  href: string;
+}) => (
+  <Link
+    href={href}
+    className="block p-6 bg-white rounded-lg shadow-md hover:bg-gray-50"
+  >
+    <div className="flex items-center mb-2">
+      <Icon className="h-6 w-6 text-indigo-600 mr-2" />
+      <h3 className="text-lg font-semibold">{title}</h3>
+    </div>
+    <p className="text-gray-600">{description}</p>
+  </Link>
+);
+
+export const ContactUsSection = ({ feature }: { feature: string }) => (
+  <div className="flex flex-col w-full h-96 justify-center items-center">
+    <div className="flex flex-col w-full">
+      <GlobeAltIcon className="h-12 w-12 text-black dark:text-white border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-2 rounded-lg" />
+      <p className="text-xl text-black dark:text-white font-semibold mt-8">
+        We&apos;d love to learn more about your use case
+      </p>
+      <p className="text-sm text-gray-500 max-w-sm mt-2">
+        Please get in touch with us to discuss our {feature} feature.
+      </p>
+      <div className="mt-4">
+        <Link
+          href="https://cal.com/team/helicone/helicone-discovery"
+          target="_blank"
+          rel="noreferrer"
+          className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
+          Contact Us
+        </Link>
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/pages/developer/keys.tsx b/web/pages/developer/keys.tsx
new file mode 100644
index 0000000000..9dd8989b14
--- /dev/null
+++ b/web/pages/developer/keys.tsx
@@ -0,0 +1,19 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import DeveloperPage from "../../components/templates/developer/developerPage";
+import KeyPage from "../../components/templates/keys/keyPage";
+
+const DeveloperKeys: NextPageWithLayout = () => {
+  return (
+    <DeveloperPage title="Developer Keys">
+      <KeyPage />
+    </DeveloperPage>
+  );
+};
+
+DeveloperKeys.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
+};
+
+export default DeveloperKeys;
diff --git a/web/pages/enterprise/vault.tsx b/web/pages/enterprise/vault.tsx
new file mode 100644
index 0000000000..2f0c938989
--- /dev/null
+++ b/web/pages/enterprise/vault.tsx
@@ -0,0 +1,25 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import DeveloperPage from "../../components/templates/developer/developerPage";
+import VaultPage from "../../components/templates/vault/vaultPage";
+import { useOrg } from "../../components/layout/organizationContext";
+import { ContactUsSection } from "../developer/index";
+
+const DeveloperVault: NextPageWithLayout = () => {
+  const orgContext = useOrg();
+  const tier = orgContext?.currentOrg?.tier;
+  const isPaidPlan = tier !== "free";
+
+  return (
+    <DeveloperPage title="Developer Vault">
+      {isPaidPlan ? <VaultPage /> : <ContactUsSection feature="vault" />}
+    </DeveloperPage>
+  );
+};
+
+DeveloperVault.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
+};
+
+export default DeveloperVault;
diff --git a/web/pages/enterprise/webhooks.tsx b/web/pages/enterprise/webhooks.tsx
new file mode 100644
index 0000000000..36ce08ed03
--- /dev/null
+++ b/web/pages/enterprise/webhooks.tsx
@@ -0,0 +1,34 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import DeveloperPage from "../../components/templates/developer/developerPage";
+import WebhooksPage from "../../components/templates/webhooks/webhooksPage";
+import { useUser } from "@supabase/auth-helpers-react";
+import { useFeatureFlags } from "../../services/hooks/featureFlags";
+import { useOrg } from "../../components/layout/organizationContext";
+import { ContactUsSection } from "../developer/index";
+
+const DeveloperWebhooks: NextPageWithLayout = () => {
+  const user = useUser();
+  const orgContext = useOrg();
+  const { hasFlag } = useFeatureFlags(
+    "webhook_beta",
+    orgContext?.currentOrg?.id || ""
+  );
+
+  return (
+    <DeveloperPage title="Developer Webhooks">
+      {hasFlag ? (
+        <WebhooksPage user={user!} />
+      ) : (
+        <ContactUsSection feature="webhook" />
+      )}
+    </DeveloperPage>
+  );
+};
+
+DeveloperWebhooks.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
+};
+
+export default DeveloperWebhooks;
diff --git a/web/pages/settings/billing-old.tsx b/web/pages/settings/billing-old.tsx
new file mode 100644
index 0000000000..4abca5df00
--- /dev/null
+++ b/web/pages/settings/billing-old.tsx
@@ -0,0 +1,23 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import OrgPlanPage from "../../components/templates/organization/plan/orgPlanPage";
+import { useOrg } from "../../components/layout/organizationContext";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+
+const PlanSettings: NextPageWithLayout = () => {
+  const orgContext = useOrg();
+  return orgContext?.currentOrg ? (
+    <OrgPlanPage org={orgContext.currentOrg} />
+  ) : null;
+};
+
+PlanSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default PlanSettings;
diff --git a/web/pages/settings/billing.tsx b/web/pages/settings/billing.tsx
new file mode 100644
index 0000000000..6f073b6a7a
--- /dev/null
+++ b/web/pages/settings/billing.tsx
@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import BillingPlanPage from "@/components/templates/organization/plan/billingPage";
+import { withAuthSSR } from "../../lib/api/handlerWrappers";
+import { NextPageWithLayout } from "../_app";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+
+const PlanSettings: NextPageWithLayout = () => {
+  return <BillingPlanPage />;
+};
+
+PlanSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default PlanSettings;
+
+export const getServerSideProps = withAuthSSR(async (options) => {
+  return {
+    props: {
+      user: options.userData.user,
+    },
+  };
+});
diff --git a/web/pages/connections/index.tsx b/web/pages/settings/connections.tsx
similarity index 86%
rename from web/pages/connections/index.tsx
rename to web/pages/settings/connections.tsx
index d7b86a345c..4c8b600d4b 100644
--- a/web/pages/connections/index.tsx
+++ b/web/pages/settings/connections.tsx
@@ -3,13 +3,18 @@ import AuthLayout from "../../components/layout/auth/authLayout";
 import ConnectionsPage from "../../components/templates/connections/connectionsPage";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
 import { SortDirection } from "../../services/lib/sorts/requests/sorts";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
 
 const Connections = () => {
   return <ConnectionsPage />;
 };
 
 Connections.getLayout = function getLayout(page: ReactElement) {
-  return <AuthLayout>{page}</AuthLayout>;
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
 };
 
 export default Connections;
diff --git a/web/pages/settings/index.tsx b/web/pages/settings/index.tsx
index 02579ec011..780b81328f 100644
--- a/web/pages/settings/index.tsx
+++ b/web/pages/settings/index.tsx
@@ -1,18 +1,28 @@
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { NextPageWithLayout } from "../_app";
-import SettingsPage from "../../components/templates/settings/settingsPage";
+
 import AuthLayout from "../../components/layout/auth/authLayout";
 import { SupabaseServerWrapper } from "../../lib/wrappers/supabase";
 import { ReactElement } from "react";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+import OrgSettingsPage from "@/components/templates/organization/settings/orgSettingsPage";
+import { useOrg } from "@/components/layout/organizationContext";
 
 const Settings: NextPageWithLayout<
   InferGetServerSidePropsType<typeof getServerSideProps>
-> = (props) => {
-  return <SettingsPage defaultIndex={props.defaultIndex} />;
+> = () => {
+  const orgContext = useOrg();
+  return orgContext?.currentOrg ? (
+    <OrgSettingsPage org={orgContext.currentOrg} />
+  ) : null;
 };
 
 Settings.getLayout = function getLayout(page: ReactElement) {
-  return <AuthLayout>{page}</AuthLayout>;
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
 };
 
 export default Settings;
@@ -33,13 +43,10 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
       },
     };
 
-  const { tab } = ctx.query;
-
   return {
     props: {
       initialSession: session,
       user: session.user,
-      defaultIndex: tab ? parseInt(tab as string) : 0,
     },
   };
 };
diff --git a/web/pages/settings/members.tsx b/web/pages/settings/members.tsx
new file mode 100644
index 0000000000..009084183f
--- /dev/null
+++ b/web/pages/settings/members.tsx
@@ -0,0 +1,23 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import OrgMembersPage from "../../components/templates/organization/members/orgMembersPage";
+import { useOrg } from "../../components/layout/organizationContext";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+
+const MembersSettings: NextPageWithLayout = () => {
+  const orgContext = useOrg();
+  return orgContext?.currentOrg ? (
+    <OrgMembersPage org={orgContext.currentOrg} />
+  ) : null;
+};
+
+MembersSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default MembersSettings;
diff --git a/web/pages/settings/organization.tsx b/web/pages/settings/organization.tsx
new file mode 100644
index 0000000000..b8c97058f0
--- /dev/null
+++ b/web/pages/settings/organization.tsx
@@ -0,0 +1,23 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import OrgSettingsPage from "../../components/templates/organization/settings/orgSettingsPage";
+import { useOrg } from "../../components/layout/organizationContext";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+
+const OrganizationSettings: NextPageWithLayout = () => {
+  const orgContext = useOrg();
+  return orgContext?.currentOrg ? (
+    <OrgSettingsPage org={orgContext.currentOrg} />
+  ) : null;
+};
+
+OrganizationSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default OrganizationSettings;
diff --git a/web/pages/settings/rate-limits.tsx b/web/pages/settings/rate-limits.tsx
new file mode 100644
index 0000000000..ffb0b6ca7c
--- /dev/null
+++ b/web/pages/settings/rate-limits.tsx
@@ -0,0 +1,19 @@
+import { NextPageWithLayout } from "../_app";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { ReactElement } from "react";
+import RateLimitPage from "../../components/templates/settings/rateLimitPage";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+
+const RateLimitSettings: NextPageWithLayout = () => {
+  return <RateLimitPage />;
+};
+
+RateLimitSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default RateLimitSettings;
diff --git a/web/pages/vault.tsx b/web/pages/vault.tsx
index 04feeef4a5..816ca8533d 100644
--- a/web/pages/vault.tsx
+++ b/web/pages/vault.tsx
@@ -1,9 +1,9 @@
 import { User } from "@supabase/auth-helpers-nextjs";
 import { GetServerSidePropsContext } from "next";
-import AuthHeader from "../components/shared/authHeader";
-import MetaData from "../components/layout/public/authMetaData";
 import VaultPage from "../components/templates/vault/vaultPage";
 import { SupabaseServerWrapper } from "../lib/wrappers/supabase";
+import AuthLayout from "../components/layout/auth/authLayout";
+import { ReactElement } from "react";
 
 interface VaultProps {
   user: User;
@@ -12,14 +12,11 @@ interface VaultProps {
 const Vault = (props: VaultProps) => {
   const { user } = props;
 
-  return (
-    <MetaData title="Vault">
-      {/* <AuthLayout user={user}> */}
-      <AuthHeader title={"Vault"} />
-      <VaultPage />
-      {/* </AuthLayout> */}
-    </MetaData>
-  );
+  return <VaultPage />;
+};
+
+Vault.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
 };
 
 export default Vault;
diff --git a/web/pages/webhooks.tsx b/web/pages/webhooks.tsx
index 69d84590e5..9141de4967 100644
--- a/web/pages/webhooks.tsx
+++ b/web/pages/webhooks.tsx
@@ -1,10 +1,9 @@
 import { User } from "@supabase/auth-helpers-nextjs";
-
 import { GetServerSidePropsContext } from "next";
-import AuthHeader from "../components/shared/authHeader";
-import MetaData from "../components/layout/public/authMetaData";
-import { SupabaseServerWrapper } from "../lib/wrappers/supabase";
+import { ReactElement } from "react";
+import AuthLayout from "../components/layout/auth/authLayout";
 import WebhooksPage from "../components/templates/webhooks/webhooksPage";
+import { SupabaseServerWrapper } from "../lib/wrappers/supabase";
 
 interface WebhooksProps {
   user: User;
@@ -13,14 +12,10 @@ interface WebhooksProps {
 const Webhooks = (props: WebhooksProps) => {
   const { user } = props;
 
-  return (
-    <MetaData title="Webhook">
-      {/* <AuthLayout user={user}> */}
-      <AuthHeader title={"Webhooks"} />
-      <WebhooksPage user={user} />
-      {/* </AuthLayout> */}
-    </MetaData>
-  );
+  return <WebhooksPage user={user} />;
+};
+Webhooks.getLayout = function getLayout(page: ReactElement) {
+  return <AuthLayout>{page}</AuthLayout>;
 };
 
 export default Webhooks;
diff --git a/web/public/sitemap-0.xml b/web/public/sitemap-0.xml
index af9cc1e799..0b7337d0d5 100644
--- a/web/public/sitemap-0.xml
+++ b/web/public/sitemap-0.xml
@@ -1,22 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://us.helicone.ai</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/aui</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/connections</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/datasets</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/evals</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/experiment/fine-tuning</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/features/customer-portal</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/features/fine-tuning</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/integration/openpipe</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/open-stats</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/pricing</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/privacy</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/rate-limit</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/reset</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/roadmap</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/signin</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/signup</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/slack/redirect</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://us.helicone.ai/terms</loc><lastmod>2024-09-15T05:16:01.541Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/aui</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/datasets</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/developer/keys</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/evals</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/experiment/fine-tuning</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/features/customer-portal</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/features/fine-tuning</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/integration/openpipe</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/open-stats</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/pricing</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/privacy</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/rate-limit</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/reset</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/roadmap</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/billing</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/billing-old</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/connections</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/members</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/organization</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/settings/rate-limits</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/signin</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/signup</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/slack/redirect</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://us.helicone.ai/terms</loc><lastmod>2024-09-18T02:27:31.084Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/web/utlis/stripeServer.ts b/web/utlis/stripeServer.ts
index 7db1a88e73..4ce8d3f126 100644
--- a/web/utlis/stripeServer.ts
+++ b/web/utlis/stripeServer.ts
@@ -1,5 +1,5 @@
 import Stripe from "stripe";
 
 export const stripeServer = new Stripe(process.env.STRIPE_SECRET_KEY!, {
-  apiVersion: "2022-11-15",
+  apiVersion: "2024-06-20",
 });
diff --git a/web/yarn.lock b/web/yarn.lock
index 99bd0800df..810bd569db 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2790,6 +2790,14 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-progress@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2"
+  integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==
+  dependencies:
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-roving-focus@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
@@ -2884,6 +2892,20 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
+"@radix-ui/react-tabs@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz#0a6db1caed56776a1176aae68532060e301cc1c0"
+  integrity sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-tooltip@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz#c42db2ffd7dcc6ff3d65407c8cb70490288f518d"
@@ -10456,10 +10478,10 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-stripe@^11.8.0:
-  version "11.18.0"
-  resolved "https://registry.yarnpkg.com/stripe/-/stripe-11.18.0.tgz#2b99ac712e81a5232f88568327d001960b454465"
-  integrity sha512-OUA32uhNoSoM6wOodyFbV+3IBCoO140uzdXmBArQ0S88D4EbH91xl2v+Ml1sKalcFKUBadHLeHfU/p9AbsOfGw==
+stripe@^16.11.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/stripe/-/stripe-16.11.0.tgz#dc2579122aadff4ab98ff5de993f990e6dc1fc88"
+  integrity sha512-Rl4S2UAU/uWr3diETk3wkpXSe7LBPJ4BdXRzto5XVGGUhvLi8Q0MShwI5yhPH6Cdv2kmLu/Yl14QMlHgeRp7Qw==
   dependencies:
     "@types/node" ">=8.1.0"
     qs "^6.11.0"