diff --git a/index.php b/index.php
index 024c21e..4dbcd43 100644
--- a/index.php
+++ b/index.php
@@ -17,8 +17,8 @@
     <header class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between text-sm">
         <div class="font-bold text-xl">FinMox</div>
         <nav class="hidden md:flex gap-8">
-            <a href="#problem" class="text-gray-600 hover:text-black">Problem</a>
-            <a href="#why" class="text-gray-600 hover:text-black">Why FinMox</a>
+            <a href="problem.php" class="text-gray-600 hover:text-black">Problem</a>
+            <a href="product.php" class="text-gray-600 hover:text-black">Why FinMox</a>
             <a href="#how" class="text-gray-600 hover:text-black">How It Works</a>
             <a href="#roi" class="text-gray-600 hover:text-black">ROI</a>
             <a href="#pricing" class="text-gray-600 hover:text-black">Pricing</a>
diff --git a/problem.php b/problem.php
new file mode 100644
index 0000000..d913c5a
--- /dev/null
+++ b/problem.php
@@ -0,0 +1,91 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The Problem - FinMox</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .bullet-point { display: flex; align-items: start; }
+        .bullet-point::before { content: "•"; margin-right: 0.75rem; font-size: 1.5em; line-height: 1; }
+    </style>
+</head>
+<body class="bg-white text-gray-900">
+
+    <!-- HEADER -->
+    <header class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between text-sm">
+        <div class="font-bold text-xl">FinMox</div>
+        <nav class="hidden md:flex gap-8">
+            <a href="problem.php" class="text-black font-semibold">Problem</a>
+            <a href="product.php" class="text-gray-600 hover:text-black">Why FinMox</a>
+            <a href="#how" class="text-gray-600 hover:text-black">How It Works</a>
+            <a href="#roi" class="text-gray-600 hover:text-black">ROI</a>
+            <a href="pricing.php" class="text-gray-600 hover:text-black">Pricing</a>
+        </nav>
+        <div class="flex items-center gap-4">
+            <a href="login.php" class="text-gray-600 hover:text-black">Sign In</a>
+            <a href="apply.php" class="bg-black text-white px-5 py-2.5 rounded-lg">Apply for Access</a>
+        </div>
+    </header>
+
+    <!-- MAIN CONTENT -->
+    <main class="max-w-4xl mx-auto px-6 py-20">
+        <div class="text-center">
+            <h1 class="text-5xl font-extrabold leading-tight">Hiring is still broken.</h1>
+            <p class="mt-4 text-xl text-gray-700">HR teams waste dozens of hours per role on manual tasks.</p>
+        </div>
+
+        <div class="mt-16 grid md:grid-cols-2 gap-16">
+            <div>
+                <h2 class="text-2xl font-bold">Where time gets burned</h2>
+                <ul class="mt-6 space-y-4 text-lg text-gray-600">
+                    <li class="bullet-point">Manually reviewing resumes</li>
+                    <li class="bullet-point">Copy-pasting notes</li>
+                    <li class="bullet-point">Coordinating interviews</li>
+                    <li class="bullet-point">Rewriting job descriptions</li>
+                    <li class="bullet-point">Drafting offer letters</li>
+                </ul>
+            </div>
+            <div>
+                <h2 class="text-2xl font-bold">What ATS doesn’t solve</h2>
+                <p class="mt-6 text-lg text-gray-600">Most ATS platforms store data. They don’t run the workflow.</p>
+                <p class="mt-4 text-lg text-gray-800 font-semibold">Your team still does the work.</p>
+            </div>
+        </div>
+
+        <div class="mt-24 text-center">
+            <h2 class="text-4xl font-bold text-blue-600">FinMox does the work.</h2>
+            <div class="mt-8">
+                <a href="product.php" class="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold text-lg inline-flex items-center">
+                    See the FinMox Difference
+                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
+                </a>
+            </div>
+        </div>
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="bg-gray-50">
+        <div class="max-w-7xl mx-auto px-6 py-12">
+            <div class="flex justify-between items-center">
+                <div class="font-bold text-lg">FinMox</div>
+                <div class="text-sm text-gray-500">
+                    <p>&copy; 2025</p>
+                    <p class="mt-1">Human-reviewed outputs. No automated hiring decisions. Built for intentional hiring.</p>
+                </div>
+            </div>
+            <div class="mt-8 border-t pt-8 flex justify-between text-sm text-gray-600">
+                <a href="#" class="hover:underline">Security & Privacy</a>
+                <div class="flex gap-6">
+                    <a href="apply.php" class="hover:underline">Apply</a>
+                    <a href="login.php" class="hover:underline">Sign In</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+</body>
+</html>
diff --git a/product.php b/product.php
index 8c099fb..a962217 100644
--- a/product.php
+++ b/product.php
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Product - FinMox</title>
+    <title>Why FinMox - FinMox</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
@@ -17,7 +17,8 @@
         <div class="font-bold text-xl">FinMox</div>
         <nav class="hidden md:flex gap-8 text-sm">
             <a href="index.php">Home</a>
-            <a href="product.php">Product</a>
+            <a href="problem.php">Problem</a>
+            <a href="product.php">Why FinMox</a>
             <a href="services.php">Services</a>
             <a href="features.php">Features</a>
             <a href="pricing.php">Pricing</a>
