diff --git a/app/(lobby)/components/clients.tsx b/app/(lobby)/components/clients.tsx
index 3338442..1908a5a 100644
--- a/app/(lobby)/components/clients.tsx
+++ b/app/(lobby)/components/clients.tsx
@@ -36,6 +36,7 @@ export function Clients() {
                 <Image
                   src={logo}
                   alt={alt}
+                  height={200}
                   width={200}
                   className="max-w-none object-contain grayscale"
                 />
diff --git a/app/(lobby)/components/lobby-navbar.tsx b/app/(lobby)/components/lobby-navbar.tsx
index f364c70..e989e97 100644
--- a/app/(lobby)/components/lobby-navbar.tsx
+++ b/app/(lobby)/components/lobby-navbar.tsx
@@ -10,14 +10,14 @@ export function LobbyNavbar() {
       <nav className="container flex h-full items-center justify-between">
         <Link
           href="/"
-          className="px-4 font-handwriting text-xl font-bold lowercase"
+          className="px-4 font-handwriting text-xl font-bold lowercase [text-shadow:_0_2px_0_#e1e1e1] dark:[text-shadow:none]"
         >
           {siteConfig.name}
         </Link>
 
         <div className="hidden space-x-4 px-10 text-sm font-medium text-muted-foreground md:inline-block">
           <Link
-            href="#features"
+            href="/#features"
             className="transition-colors hover:text-foreground"
           >
             Features
diff --git a/app/(lobby)/pricing/page.tsx b/app/(lobby)/pricing/page.tsx
index 4b08ffe..532ded6 100644
--- a/app/(lobby)/pricing/page.tsx
+++ b/app/(lobby)/pricing/page.tsx
@@ -1,3 +1,94 @@
+import { CheckIcon } from "lucide-react";
+
+import { siteConfig } from "@/config/site";
+import { PRICING_CARDS, PRICING_PLANS } from "@/lib/constants";
+import { cn, formatCurrency } from "@/lib/utils";
+import { Diamond } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const metadata = {
+  title: "Pricing",
+};
+
 export default function PricingPage() {
-  return <div>Enter</div>;
+  return (
+    <section className="container flex flex-col gap-6 py-8 md:max-w-[64rem] md:gap-10 md:py-12 lg:py-24">
+      <div className="mx-auto flex flex-col gap-4 md:max-w-[58rem]">
+        <h2 className="font-heading text-3xl drop-shadow-xl dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-6xl">
+          Simple, transparent pricing
+        </h2>
+        <p className="text-center leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+          Unlock all features including unlimited posts for your blog.
+        </p>
+      </div>
+
+      <div className="mx-auto flex flex-col gap-4 md:flex-row md:gap-10">
+        {PRICING_CARDS.map(
+          ({ planType, price, description, highlightFeature, features }) => {
+            const isProPlan = planType === PRICING_PLANS.proplan;
+
+            return (
+              <Card
+                key={planType}
+                className={cn(
+                  "w-80 rounded-2xl py-6 transition-shadow ease-in-out hover:shadow-xl",
+                  isProPlan &&
+                    "ring-4 ring-ring ring-offset-4 ring-offset-background hover:shadow-2xl"
+                )}
+              >
+                <CardHeader>
+                  <CardTitle className="flex justify-between">
+                    {planType}
+
+                    {isProPlan && <Diamond size={32} />}
+                  </CardTitle>
+                </CardHeader>
+
+                <CardContent className="space-y-3">
+                  <span className="text-3xl font-semibold">
+                    {formatCurrency(+price, "INR")}
+                  </span>
+
+                  {+price > 0 && (
+                    <span className="ml-1 dark:text-muted-foreground">/mo</span>
+                  )}
+
+                  <p className="text-muted-foreground">{description}</p>
+
+                  <Button
+                    variant={isProPlan ? "default" : "secondary"}
+                    className="w-full whitespace-nowrap font-semibold"
+                  >
+                    {isProPlan ? "Go Pro" : "Get Started"}
+                  </Button>
+
+                  <ul className="flex flex-col gap-2">
+                    <small className="mb-4 text-center text-muted-foreground">
+                      {highlightFeature}
+                    </small>
+
+                    {features.map((feature) => (
+                      <li key={feature} className="flex items-center gap-2">
+                        <CheckIcon className="h-4 w-4" />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            );
+          }
+        )}
+      </div>
+
+      <div className="mx-auto max-w-[58rem] text-muted-foreground">
+        <span className="font-handwriting font-semibold lowercase text-foreground">
+          {siteConfig.name}
+        </span>{" "}
+        is a demo app.{" "}
+        <strong>You can test the upgrade and won&apos;t be charged.</strong>
+      </div>
+    </section>
+  );
 }
diff --git a/components/icons.tsx b/components/icons.tsx
index a045388..37a9bae 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -111,3 +111,24 @@ export const X = ({ size = 24, width, height, ...props }: IconProps) => (
     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
   </svg>
 );
+
+export const Diamond = ({ size = 24, width, height, ...props }: IconProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width={size || width}
+    height={size || height}
+    {...props}
+  >
+    <path
+      d="M1.84023 7.1842L4.76734 3.21844C5.3329 2.45219 6.22869 2 7.18106 2H16.8189C17.7713 2 18.6671 2.45219 19.2327 3.21844L22.1598 7.1842C22.9535 8.25957 22.9401 9.73033 22.1269 10.791L14.3808 20.8946C13.18 22.4609 10.82 22.4609 9.61918 20.8946L1.87314 10.791C1.05992 9.73033 1.0465 8.25957 1.84023 7.1842Z"
+      fill="#6889FF"
+    />
+    <path
+      d="M22.7458 9H1.2541C1.24684 8.36315 1.44181 7.72409 1.83994 7.18453L4.76729 3.21844C5.33285 2.45219 6.22864 2 7.18101 2H16.8189C17.7713 2 18.667 2.45219 19.2326 3.21844L22.1597 7.1842L22.1607 7.18557C22.5583 7.72491 22.7531 8.36356 22.7458 9Z"
+      fill="#B6B2FF"
+    />
+  </svg>
+);
diff --git a/lib/constants.ts b/lib/constants.ts
index 2c81ddc..79414cd 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -1,15 +1,9 @@
-import client1 from "@/public/placeholders/client-1.png";
-import client2 from "@/public/placeholders/client-2.png";
-import client3 from "@/public/placeholders/client-3.png";
-import client4 from "@/public/placeholders/client-4.png";
-import client5 from "@/public/placeholders/client-5.png";
-
 export const CLIENTS = [
-  { alt: "client1", logo: client1 },
-  { alt: "client2", logo: client2 },
-  { alt: "client3", logo: client3 },
-  { alt: "client4", logo: client4 },
-  { alt: "client5", logo: client5 },
+  { alt: "client1", logo: "/placeholders/client-1.png" },
+  { alt: "client2", logo: "/placeholders/client-2.png" },
+  { alt: "client3", logo: "/placeholders/client-3.png" },
+  { alt: "client4", logo: "/placeholders/client-4.png" },
+  { alt: "client5", logo: "/placeholders/client-5.png" },
 ];
 
 export const USERS = [
@@ -109,3 +103,34 @@ export const USERS = [
       "Cypress is a fantastic tool that has revolutionized our workflow. Our productivity and collaboration have reached new heights.",
   },
 ];
+
+export const PRICING_CARDS = [
+  {
+    planType: "Free Plan",
+    price: "0",
+    description: "Limited block trials for teams",
+    highlightFeature: "",
+    features: [
+      "Unlimited blocks for teams",
+      "Unlimited file uploads",
+      "30 day page history",
+      "Invite 2 guests",
+    ],
+  },
+  {
+    planType: "Pro Plan",
+    price: "499",
+    description: "Billed annually. $17 billed monthly",
+    highlightFeature: "Everything in free +",
+    features: [
+      "Unlimited blocks for teams",
+      "Unlimited file uploads",
+      "1 year day page history",
+      "Invite 10 guests",
+    ],
+  },
+];
+
+export const PRICING_PLANS = { proplan: "Pro Plan", freeplan: "Free Plan" };
+
+export const MAX_FOLDERS_FREE_PLAN = 3;
diff --git a/lib/utils.ts b/lib/utils.ts
index 2d2ae7f..f547ba3 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -81,3 +81,18 @@ export async function getGitHubStars(): Promise<string | null> {
     return null;
   }
 }
+
+/**
+ * Formats the given amount to the given currency
+ * @param amount The amount to format
+ * @param currency The currency to format the amount to
+ * @returns The formatted amount
+ */
+export const formatCurrency = (amount: number, currency: string | null) => {
+  return amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: currency ?? "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  });
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fd84739..0bc8372 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,64 +52,6 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
-        "washed-blue-50": "#f0f3ff",
-        "washed-blue-100": "#d0daff",
-        "washed-blue-200": "#bac9ff",
-        "washed-blue-300": "#9ab0ff",
-        "washed-blue-400": "#86a1ff",
-        "washed-blue-500": "#6889ff",
-        "washed-blue-600": "#5f7de8",
-        "washed-blue-700": "#4a61b5",
-        "washed-blue-800": "#394b8c",
-        "washed-blue-900": "#2c3a6b",
-        "washed-purple-50": "#f8f7ff",
-        "washed-purple-100": "#e8e7ff",
-        "washed-purple-200": "#dddcff",
-        "washed-purple-300": "#cecbff",
-        "washed-purple-400": "#c5c1ff",
-        "washed-purple-500": "#b6b2ff",
-        "washed-purple-600": "#a6a2e8",
-        "washed-purple-700": "#817eb5",
-        "washed-purple-800": "#64628c",
-        "washed-purple-900": "#4c4b6b",
-        "primary-blue-50": "#e6f0ff",
-        "primary-blue-100": "#b2d1ff",
-        "primary-blue-200": "#8cbaff",
-        "primary-blue-300": "#589bff",
-        "primary-blue-400": "#3787ff",
-        "primary-blue-500": "#0569ff",
-        "primary-blue-600": "#0560e8",
-        "primary-blue-700": "#044bb5",
-        "primary-blue-800": "#033a8c",
-        "primary-blue-900": "#022c6b",
-        "primary-purple-50": "#f1e6ff",
-        "primary-purple-100": "#d3b0ff",
-        "primary-purple-200": "#bd8aff",
-        "primary-purple-300": "#9f54ff",
-        "primary-purple-400": "#8d33ff",
-        "primary-purple-500": "#7000ff",
-        "primary-purple-600": "#6600e8",
-        "primary-purple-700": "#5000b5",
-        "primary-purple-800": "#3e008c",
-        "primary-purple-900": "#2f006b",
-        "Neutrals/neutrals-1": "#ffffff",
-        "Neutrals/neutrals-2": "#fcfcfd",
-        "Neutrals/neutrals-3": "#f5f5f6",
-        "Neutrals/neutrals-4": "#f0f0f1",
-        "Neutrals/neutrals-5": "#d9d9dc",
-        "Neutrals/neutrals-6": "#c0bfc4",
-        "Neutrals/neutrals-7": "#8d8c95",
-        "Neutrals/neutrals-8": "#5b5966",
-        "Neutrals/neutrals-9": "#464553",
-        "Neutrals/neutrals-10": "#282637",
-        "Neutrals/neutrals-11": "#201f30",
-        "Neutrals/neutrals-12": "#161427",
-        "Neutrals/neutrals-13": "#020014",
-        "brand-washedPurple": "#b5b2ff",
-        "brand-washedBlue": "#6889ff",
-        "brand-primaryBlue": "#0469ff",
-        "brand-primaryPurple": "#7000ff",
-        "brand-dark": "#030014",
       },
       borderRadius: {
         lg: `var(--radius)`,