diff --git a/src/App.tsx b/src/App.tsx
index 311a8e5..0fe6cb1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,16 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import HomePage from "@/pages/HomePage";
 import PricingFeaturesPage from "@/pages/PricingFeaturesPage";
 
 import SimpleAboutPage from "@/pages/SimpleAboutPage";
+import PlansPage from "@/pages/PlansPage";
 export default function App() {
   return (
-    <BrowserRouter>
-      <Routes>
+    <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/pricing-features" element={<PricingFeaturesPage />} />
         <Route path="/simple-about" element={<SimpleAboutPage />} />
+      <Route path="/plans" element={<PlansPage />} />
       </Routes>
-    </BrowserRouter>
   );
 }
diff --git a/src/pages/PlansPage.tsx b/src/pages/PlansPage.tsx
new file mode 100644
index 0000000..2fdbb40
--- /dev/null
+++ b/src/pages/PlansPage.tsx
@@ -0,0 +1,251 @@
+import { motion } from "motion/react";
+import { Check, HelpCircle, Zap, Shield, Globe, BarChart } from "lucide-react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Button from "@/components/ui/Button";
+
+export default function PlansPage() {
+  const navItems = routes.map((r) => ({ name: r.label, href: r.path }));
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSync"
+        navItems={navItems}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+      
+      <main className="flex-grow pt-20">
+        {/* Hero Section */}
+        <section className="relative py-24 lg:py-32 overflow-hidden flex flex-col items-center text-center px-4">
+          <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/20 via-background to-background"></div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="max-w-4xl mx-auto"
+          >
+            <span className="inline-block py-1 px-3 rounded-full bg-accent/10 text-accent text-sm font-semibold mb-6 border border-accent/20">
+              Pricing Plans
+            </span>
+            <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">
+              Simple pricing for <br className="hidden md:block" />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary-cta">limitless growth</span>
+            </h1>
+            <p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
+              Whether you're a solo creator or a fast-growing enterprise, we have a plan designed to help you scale without friction.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Start Free Trial" href="#pricing" variant="primary" />
+              <Button text="Compare Features" href="#features" variant="secondary" />
+            </div>
+          </motion.div>
+        </section>
+
+        {/* Pricing Section */}
+        <section id="pricing" className="py-20 px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
+              {/* Starter */}
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.1 }}
+                className="card p-8 rounded-2xl border border-border flex flex-col h-full"
+              >
+                <h3 className="text-2xl font-semibold mb-2">Starter</h3>
+                <p className="text-muted-foreground mb-6">Perfect for individuals and small projects.</p>
+                <div className="mb-6">
+                  <span className="text-5xl font-bold">$19</span>
+                  <span className="text-muted-foreground">/mo</span>
+                </div>
+                <Button text="Get Started" variant="secondary" className="w-full mb-8" />
+                <div className="space-y-4 flex-grow">
+                  <p className="font-medium text-sm">What's included:</p>
+                  <ul className="space-y-3">
+                    {["Up to 5 projects", "Basic analytics", "24-hour support response time", "1GB storage"].map((feature, i) => (
+                      <li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
+                        <Check className="w-5 h-5 text-accent shrink-0" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </motion.div>
+
+              {/* Pro */}
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+                className="card p-8 rounded-2xl border-2 border-accent relative flex flex-col h-full transform md:-translate-y-4 shadow-2xl shadow-accent/10"
+              >
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
+                  Most Popular
+                </div>
+                <h3 className="text-2xl font-semibold mb-2">Pro</h3>
+                <p className="text-muted-foreground mb-6">Ideal for growing teams and businesses.</p>
+                <div className="mb-6">
+                  <span className="text-5xl font-bold">$49</span>
+                  <span className="text-muted-foreground">/mo</span>
+                </div>
+                <Button text="Start 14-Day Trial" variant="primary" className="w-full mb-8" />
+                <div className="space-y-4 flex-grow">
+                  <p className="font-medium text-sm">Everything in Starter, plus:</p>
+                  <ul className="space-y-3">
+                    {["Unlimited projects", "Advanced analytics dashboard", "1-hour support response time", "50GB storage", "Custom domain integration", "Team collaboration tools"].map((feature, i) => (
+                      <li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
+                        <Check className="w-5 h-5 text-accent shrink-0" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </motion.div>
+
+              {/* Enterprise */}
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.3 }}
+                className="card p-8 rounded-2xl border border-border flex flex-col h-full"
+              >
+                <h3 className="text-2xl font-semibold mb-2">Enterprise</h3>
+                <p className="text-muted-foreground mb-6">Custom solutions for large organizations.</p>
+                <div className="mb-6">
+                  <span className="text-5xl font-bold">Custom</span>
+                </div>
+                <Button text="Contact Sales" variant="secondary" className="w-full mb-8" />
+                <div className="space-y-4 flex-grow">
+                  <p className="font-medium text-sm">Everything in Pro, plus:</p>
+                  <ul className="space-y-3">
+                    {["Unlimited storage", "Dedicated account manager", "24/7 phone support", "Custom contract & SLA", "On-premise deployment options", "Advanced security & SSO"].map((feature, i) => (
+                      <li key={i} className="flex items-start gap-3 text-muted-foreground text-sm">
+                        <Check className="w-5 h-5 text-accent shrink-0" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section id="features" className="py-24 bg-card/50 border-y border-border px-4">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl md:text-5xl font-bold mb-6">Everything you need to succeed</h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                All our plans come packed with powerful features designed to help you work smarter, not harder.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {[
+                { icon: Zap, title: "Lightning Fast", desc: "Optimized for speed and performance across all devices." },
+                { icon: Shield, title: "Bank-grade Security", desc: "Your data is encrypted and protected at all times." },
+                { icon: Globe, title: "Global CDN", desc: "Deliver content quickly to users anywhere in the world." },
+                { icon: BarChart, title: "Deep Analytics", desc: "Understand your users with comprehensive data insights." }
+              ].map((feature, i) => (
+                <motion.div 
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: i * 0.1 }}
+                  className="p-6 rounded-xl bg-background border border-border hover:border-accent/50 transition-colors"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4 text-accent">
+                    <feature.icon className="w-6 h-6" />
+                  </div>
+                  <h4 className="text-xl font-semibold mb-2">{feature.title}</h4>
+                  <p className="text-muted-foreground text-sm">{feature.desc}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="py-24 px-4">
+          <div className="max-w-3xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl md:text-5xl font-bold mb-6">Frequently Asked Questions</h2>
+              <p className="text-lg text-muted-foreground">
+                Got questions? We've got answers. If you can't find what you're looking for, reach out to our team.
+              </p>
+            </div>
+            <div className="space-y-6">
+              {[
+                { q: "Can I change my plan later?", a: "Absolutely. You can upgrade or downgrade your plan at any time. Prorated charges will be applied automatically." },
+                { q: "What payment methods do you accept?", a: "We accept all major credit cards, PayPal, and wire transfers for annual Enterprise plans." },
+                { q: "Is there a long-term contract?", a: "No, all our standard plans are month-to-month. You can cancel anytime without penalty. We do offer discounts for annual commitments." },
+                { q: "Do you offer discounts for non-profits?", a: "Yes! We offer a 50% discount for registered non-profit organizations. Contact our support team to apply." }
+              ].map((faq, i) => (
+                <motion.div 
+                  key={i}
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: i * 0.1 }}
+                  className="p-6 rounded-xl border border-border bg-card"
+                >
+                  <h4 className="text-lg font-semibold mb-2 flex items-center gap-2">
+                    <HelpCircle className="w-5 h-5 text-accent" />
+                    {faq.q}
+                  </h4>
+                  <p className="text-muted-foreground pl-7">{faq.a}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-24 px-4">
+          <div className="max-w-5xl mx-auto">
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              className="relative rounded-3xl overflow-hidden bg-primary-cta px-8 py-16 md:py-24 text-center"
+            >
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white/10 to-transparent opacity-50"></div>
+              <div className="relative z-10 max-w-2xl mx-auto">
+                <h2 className="text-3xl md:text-5xl font-bold mb-6 text-primary-cta-text">Ready to transform your workflow?</h2>
+                <p className="text-lg text-primary-cta-text/80 mb-10">
+                  Join thousands of teams who are already using FlowSync to do their best work. Start your 14-day free trial today.
+                </p>
+                <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                  <Button text="Get Started for Free" href="/signup" variant="secondary" />
+                  <Button text="Talk to Sales" href="/contact" variant="primary" className="border border-primary-cta-text/20" />
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer Section */}
+      <footer className="bg-card py-12 px-4 border-t border-border">
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-bold text-foreground">FlowSync</span>
+          </div>
+          <div className="flex gap-6 text-sm text-muted-foreground">
+            <a href="#" className="hover:text-foreground transition-colors">Terms</a>
+            <a href="#" className="hover:text-foreground transition-colors">Privacy</a>
+            <a href="#" className="hover:text-foreground transition-colors">Contact</a>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} FlowSync Inc. All rights reserved.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/routes.ts b/src/routes.ts
index 197d3a4..a7f6344 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -8,4 +8,5 @@ export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/pricing-features', label: 'Pricing Features', pageFile: 'PricingFeaturesPage' },
   { path: '/simple-about', label: 'Simple About', pageFile: 'SimpleAboutPage' },
+  { path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
 ];