diff --git a/frontend/src/components/PicoBadge.tsx b/frontend/src/components/PicoBadge.tsx
index f5d173d..a43f392 100644
--- a/frontend/src/components/PicoBadge.tsx
+++ b/frontend/src/components/PicoBadge.tsx
@@ -1,4 +1,4 @@
-import PricingDialog from "./payments/PricingDialog";
+import PricingDialog from "./hosted/payments/PricingDialog";
 
 export function PicoBadge() {
   return (
diff --git a/frontend/src/components/hosted/PricingPage.tsx b/frontend/src/components/hosted/PricingPage.tsx
new file mode 100644
index 0000000..d1411ab
--- /dev/null
+++ b/frontend/src/components/hosted/PricingPage.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import Footer from "./LandingPage/Footer";
+
+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>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default PricingPage;
diff --git a/frontend/src/components/payments/PricingDialog.tsx b/frontend/src/components/hosted/payments/PricingDialog.tsx
similarity index 98%
rename from frontend/src/components/payments/PricingDialog.tsx
rename to frontend/src/components/hosted/payments/PricingDialog.tsx
index c03034a..126df86 100644
--- a/frontend/src/components/payments/PricingDialog.tsx
+++ b/frontend/src/components/hosted/payments/PricingDialog.tsx
@@ -6,12 +6,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "../ui/dialog";
+} from "../../ui/dialog";
 import { FaCheckCircle } from "react-icons/fa";
-import Spinner from "../custom-ui/Spinner";
+import Spinner from "../../custom-ui/Spinner";
 import useStripeCheckout from "./useStripeCheckout";
-import { Button } from "../ui/button";
-import { useStore } from "../../store/store";
+import { Button } from "../../ui/button";
+import { useStore } from "../../../store/store";
 
 const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
 
diff --git a/frontend/src/components/payments/useStripeCheckout.ts b/frontend/src/components/hosted/payments/useStripeCheckout.ts
similarity index 93%
rename from frontend/src/components/payments/useStripeCheckout.ts
rename to frontend/src/components/hosted/payments/useStripeCheckout.ts
index 52b72eb..277058d 100644
--- a/frontend/src/components/payments/useStripeCheckout.ts
+++ b/frontend/src/components/hosted/payments/useStripeCheckout.ts
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { SAAS_BACKEND_URL, STRIPE_PUBLISHABLE_KEY } from "../../config";
-import { addEvent } from "../../lib/analytics";
+import { SAAS_BACKEND_URL, STRIPE_PUBLISHABLE_KEY } from "../../../config";
+import { addEvent } from "../../../lib/analytics";
 import { Stripe, loadStripe } from "@stripe/stripe-js";
-import { useAuthenticatedFetch } from "../hosted/useAuthenticatedFetch";
+import { useAuthenticatedFetch } from "../useAuthenticatedFetch";
 
 interface CreateCheckoutSessionResponse {
   sessionId: string;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index b9946d3..3e51f97 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -7,6 +7,7 @@ import EvalsPage from "./components/evals/EvalsPage.tsx";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { CLERK_PUBLISHABLE_KEY } from "./config.ts";
 import "./index.css";
+import PricingPage from "./components/hosted/PricingPage.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
@@ -21,6 +22,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <Routes>
           <Route path="/" element={<AppContainer />} />
           <Route path="/evals" element={<EvalsPage />} />
+          <Route path="/pricing" element={<PricingPage />} />
         </Routes>
       </Router>
       <Toaster