diff --git a/frontend/src/components/hosted/PricingPage.tsx b/frontend/src/components/hosted/PricingPage.tsx
index d1411ab..9d07d0b 100644
--- a/frontend/src/components/hosted/PricingPage.tsx
+++ b/frontend/src/components/hosted/PricingPage.tsx
@@ -1,51 +1,13 @@
 import React from "react";
 import Footer from "./LandingPage/Footer";
+import PricingPlans from "./payments/PricingPlans";
 
 const PricingPage: React.FC = () => {
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Pricing</h1>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {/* Basic Plan */}
-        <div className="border rounded-lg p-6">
-          <h2 className="text-2xl font-semibold mb-4">Basic</h2>
-          <p className="text-3xl font-bold mb-4">$9.99/mo</p>
-          <ul className="list-disc list-inside mb-6">
-            <li>Feature 1</li>
-            <li>Feature 2</li>
-            <li>Feature 3</li>
-          </ul>
-          <button className="bg-blue-500 text-white px-4 py-2 rounded">
-            Choose Plan
-          </button>
-        </div>
-        {/* Pro Plan */}
-        <div className="border rounded-lg p-6 bg-gray-100">
-          <h2 className="text-2xl font-semibold mb-4">Pro</h2>
-          <p className="text-3xl font-bold mb-4">$19.99/mo</p>
-          <ul className="list-disc list-inside mb-6">
-            <li>All Basic features</li>
-            <li>Feature 4</li>
-            <li>Feature 5</li>
-          </ul>
-          <button className="bg-blue-600 text-white px-4 py-2 rounded">
-            Choose Plan
-          </button>
-        </div>
-        {/* Enterprise Plan */}
-        <div className="border rounded-lg p-6">
-          <h2 className="text-2xl font-semibold mb-4">Enterprise</h2>
-          <p className="text-3xl font-bold mb-4">Custom</p>
-          <ul className="list-disc list-inside mb-6">
-            <li>All Pro features</li>
-            <li>Custom integrations</li>
-            <li>Dedicated support</li>
-          </ul>
-          <button className="bg-blue-500 text-white px-4 py-2 rounded">
-            Contact Sales
-          </button>
-        </div>
-      </div>
+      <h1 className="text-3xl font-bold mb-6">Screenshot to Code Pricing</h1>
+
+      <PricingPlans />
 
       <Footer />
     </div>
diff --git a/frontend/src/components/hosted/payments/PricingDialog.tsx b/frontend/src/components/hosted/payments/PricingDialog.tsx
index 3ff0d59..289faf6 100644
--- a/frontend/src/components/hosted/payments/PricingDialog.tsx
+++ b/frontend/src/components/hosted/payments/PricingDialog.tsx
@@ -7,19 +7,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../ui/dialog";
-import { FaCheckCircle } from "react-icons/fa";
-import Spinner from "../../custom-ui/Spinner";
-import useStripeCheckout from "./useStripeCheckout";
-import { Button } from "../../ui/button";
 import { useStore } from "../../../store/store";
+import PricingPlans from "./PricingPlans";
 
 const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
 
 const PricingDialog: React.FC = () => {
-  const { checkout, isLoadingCheckout } = useStripeCheckout();
-  const [paymentInterval, setPaymentInterval] = React.useState<
-    "monthly" | "yearly"
-  >("monthly");
   const subscriberTier = useStore((state) => state.subscriberTier);
   const [showDialog, setShowDialog] = useStore((state) => [
     state.isPricingDialogOpen,
@@ -43,114 +36,8 @@ const PricingDialog: React.FC = () => {
           </DialogTitle>
         </DialogHeader>
 
-        <div className="flex justify-center gap-x-2 mt-2">
-          <Button
-            variant={paymentInterval === "monthly" ? "default" : "secondary"}
-            onClick={() => setPaymentInterval("monthly")}
-          >
-            Monthly
-          </Button>
-          <Button
-            variant={paymentInterval === "yearly" ? "default" : "secondary"}
-            onClick={() => setPaymentInterval("yearly")}
-          >
-            Yearly (2 months free)
-          </Button>
-        </div>
+        <PricingPlans />
 
-        <div className="flex justify-center items-center">
-          <div className="grid grid-cols-2 gap-8 p-2">
-            <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="font-semibold">Hobby</h2>
-              <p className="text-gray-500">Great to start</p>
-              <div className="my-4">
-                <span className="text-4xl font-bold">
-                  {paymentInterval === "monthly" ? "$15" : "$150"}
-                </span>
-                <span className="text-gray-500">
-                  {paymentInterval === "monthly" ? "/ month" : "/ year"}
-                </span>
-              </div>
-
-              <button
-                className="bg-black text-white rounded py-2 px-4 w-full text-sm
-                    flex justify-center items-center gap-x-2"
-                onClick={() =>
-                  checkout(
-                    paymentInterval === "monthly"
-                      ? "hobby_monthly"
-                      : "hobby_yearly"
-                  )
-                }
-              >
-                Subscribe {isLoadingCheckout && <Spinner />}
-              </button>
-
-              <ul className="mt-4 space-y-2">
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  100 credits / mo
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  OpenAI models
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  Claude models
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  Chat support
-                </li>
-              </ul>
-            </div>
-
-            <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="font-semibold">Pro</h2>
-              <p className="text-gray-500">Higher limits</p>
-              <div className="my-4">
-                <span className="text-4xl font-bold">
-                  {paymentInterval === "monthly" ? "$40" : "$400"}
-                </span>
-                <span className="text-gray-500">
-                  {paymentInterval === "monthly" ? "/ month" : "/ year"}
-                </span>
-              </div>
-
-              <button
-                className="bg-black text-white rounded py-2 px-4 w-full text-sm 
-                      flex justify-center items-center gap-x-2"
-                onClick={() =>
-                  checkout(
-                    paymentInterval === "monthly" ? "pro_monthly" : "pro_yearly"
-                  )
-                }
-              >
-                Subscribe {isLoadingCheckout && <Spinner />}
-              </button>
-
-              <ul className="mt-4 space-y-2">
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  300 credits / mo
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  OpenAI models
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  Claude models
-                </li>
-                <li className="flex items-center">
-                  <FaCheckCircle className="text-black mr-2" />
-                  Chat support
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
         <p className="text-center text-xs text-gray-600 mt-1">
           1 credit = 1 code generation. <br />
           Cancel subscription at any time.
diff --git a/frontend/src/components/hosted/payments/PricingPlans.tsx b/frontend/src/components/hosted/payments/PricingPlans.tsx
new file mode 100644
index 0000000..e51d03c
--- /dev/null
+++ b/frontend/src/components/hosted/payments/PricingPlans.tsx
@@ -0,0 +1,126 @@
+import { FaCheckCircle } from "react-icons/fa";
+import Spinner from "../../custom-ui/Spinner";
+import React from "react";
+import { Button } from "../../ui/button";
+import useStripeCheckout from "./useStripeCheckout";
+
+function PricingPlans() {
+  const { checkout, isLoadingCheckout } = useStripeCheckout();
+  const [paymentInterval, setPaymentInterval] = React.useState<
+    "monthly" | "yearly"
+  >("monthly");
+
+  return (
+    <>
+      <div className="flex justify-center gap-x-2 mt-2">
+        <Button
+          variant={paymentInterval === "monthly" ? "default" : "secondary"}
+          onClick={() => setPaymentInterval("monthly")}
+        >
+          Monthly
+        </Button>
+        <Button
+          variant={paymentInterval === "yearly" ? "default" : "secondary"}
+          onClick={() => setPaymentInterval("yearly")}
+        >
+          Yearly (2 months free)
+        </Button>
+      </div>
+      <div className="flex justify-center items-center">
+        <div className="grid grid-cols-2 gap-8 p-2">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="font-semibold">Hobby</h2>
+            <p className="text-gray-500">Great to start</p>
+            <div className="my-4">
+              <span className="text-4xl font-bold">
+                {paymentInterval === "monthly" ? "$15" : "$150"}
+              </span>
+              <span className="text-gray-500">
+                {paymentInterval === "monthly" ? "/ month" : "/ year"}
+              </span>
+            </div>
+
+            <button
+              className="bg-black text-white rounded py-2 px-4 w-full text-sm
+                flex justify-center items-center gap-x-2"
+              onClick={() =>
+                checkout(
+                  paymentInterval === "monthly"
+                    ? "hobby_monthly"
+                    : "hobby_yearly"
+                )
+              }
+            >
+              Subscribe {isLoadingCheckout && <Spinner />}
+            </button>
+
+            <ul className="mt-4 space-y-2">
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                100 credits / mo
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                OpenAI models
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                Claude models
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                Chat support
+              </li>
+            </ul>
+          </div>
+
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="font-semibold">Pro</h2>
+            <p className="text-gray-500">Higher limits</p>
+            <div className="my-4">
+              <span className="text-4xl font-bold">
+                {paymentInterval === "monthly" ? "$40" : "$400"}
+              </span>
+              <span className="text-gray-500">
+                {paymentInterval === "monthly" ? "/ month" : "/ year"}
+              </span>
+            </div>
+
+            <button
+              className="bg-black text-white rounded py-2 px-4 w-full text-sm 
+                  flex justify-center items-center gap-x-2"
+              onClick={() =>
+                checkout(
+                  paymentInterval === "monthly" ? "pro_monthly" : "pro_yearly"
+                )
+              }
+            >
+              Subscribe {isLoadingCheckout && <Spinner />}
+            </button>
+
+            <ul className="mt-4 space-y-2">
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                300 credits / mo
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                OpenAI models
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                Claude models
+              </li>
+              <li className="flex items-center">
+                <FaCheckCircle className="text-black mr-2" />
+                Chat support
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default PricingPlans;