diff --git a/app/apply/page.tsx b/app/apply/page.tsx
index 1ac0232..725f9cf 100644
--- a/app/apply/page.tsx
+++ b/app/apply/page.tsx
@@ -1,30 +1,45 @@
-import Link from "next/link";
-import PublicLayout from "@/components/layout/PublicLayout";
+import { useState } from "react";
 
-export default function ApplyPage() {
+const cards = [
+  { id: "startup", label: "STARTUP\nAPPLICATION", href: "/apply/startup" },
+  { id: "org", label: "ORG/COMPANY\nPROJECT FORM", href: "/apply/org" },
+  { id: "student", label: "STUDENT/PRODUCT\nTEAM SKILLS FORM [Mock for now]", href: "#" },
+];
+
+export default function StrategicLeadersPage() {
   return (
-    <PublicLayout>
-      <div className="mx-auto max-w-4xl px-6 py-12">
-        <h1 className="text-4xl font-semibold tracking-tight">Apply</h1>
-        <p className="text-gray-700 leading-relaxed mt-3">
-          Choose the application you want to start.
+    <div className="relative min-h-screen bg-white overflow-hidden flex flex-col items-center px-6 py-16">
+
+      <div className="absolute top-0 left-0 w-64 h-64 bg-rose-100 rounded-full -translate-x-1/3 -translate-y-1/4 opacity-70" />
+      <div className="absolute bottom-0 right-0 w-56 h-56 bg-rose-100 rounded-full translate-x-1/4 translate-y-1/4 opacity-70" />
+
+      <div className="relative z-10 text-center max-w-2xl mb-4">
+        <h1 className="text-4xl font-black text-black leading-tight mb-3">
+          Apply to Join a Private<br />
+          <span className="relative inline-block">
+            Network of Strategic Leaders
+            <span className="absolute left-0 -bottom-1 w-full h-0.5 bg-cyan-400" />
+          </span>
+        </h1>
+        <p className="text-gray-500 text-lg mt-4 leading-relaxed">
+          Learn from our executive strategy playbook<br />
+          and get access to our network of strategic leaders.
         </p>
+      </div>
 
-        <section className="mt-10">
-          <h2 className="text-2xl font-semibold mb-3">Application Types</h2>
-          <div className="flex flex-col gap-4">
-            <Link href="/apply/startup" className="underline text-gray-700 hover:text-black">
-              Startup Application
-            </Link>
-            <Link href="/apply/org" className="underline text-gray-700 hover:text-black">
-              Org Application
-            </Link>
-            <Link href="/apply/team" className="underline text-gray-700 hover:text-black">
-              Team Application
-            </Link>
-          </div>
-        </section>
+      <div className="relative z-10 flex flex-col sm:flex-row gap-6 mt-10 w-full max-w-4xl justify-center">
+        {cards.map((card) => (
+          <a
+            key={card.id}
+            href={card.href}
+            className="flex-1 min-h-96 bg-sky-100 rounded-3xl flex items-start justify-start p-6 hover:bg-sky-200 hover:shadow-md transition-all duration-200 group"
+          >
+            <span className="text-black font-bold text-lg uppercase tracking-wide leading-snug whitespace-pre-line group-hover:text-cyan-700 transition-colors">
+              {card.label}
+            </span>
+          </a>
+        ))}
       </div>
-    </PublicLayout>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/app/apply/startup/page.tsx b/app/apply/startup/page.tsx
index 53ea0ad..77b9f3e 100644
--- a/app/apply/startup/page.tsx
+++ b/app/apply/startup/page.tsx
@@ -25,14 +25,45 @@ export default function StartupApplyPage() {
     fundingSiteUrl: "",
     contact: "",
   });
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
 
   function updateField<K extends keyof StartupFormState>(key: K, value: StartupFormState[K]) {
     setForm((prev) => ({ ...prev, [key]: value }));
   }
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    console.log("Startup application form:", form);
+    setLoading(true);
+    setStatus("idle");
+
+    try {
+      const res = await fetch("/api/applications/startup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          StartupName : form.name,
+          StartupDescription : form.description,
+          StartupFundingGoal : form.fundingGoal,
+          StartupContact : form.contact,
+        }),
+      });
+      if (!res.ok) {
+        throw new Error("Failed to submit application");
+      }
+      setStatus("success");
+      setForm({
+        name: "",
+        description: "",
+        fundingGoal: "",
+        contact: "",
+       });
+    } catch (err) {
+      console.error(err);
+      setStatus("error");
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
diff --git a/app/leaders/page.tsx b/app/leaders/page.tsx
index 4e7fa36..92eabe9 100644
--- a/app/leaders/page.tsx
+++ b/app/leaders/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import LeaderCard2 from '@/components/ui/LeaderCard2';
 import PublicLayout from '@/components/layout/PublicLayout';
@@ -55,7 +57,6 @@ const team = [
 
 export default function Leaders() {
   return (
-    <PublicLayout>
     <div style={{
       minHeight: '100vh',
       backgroundColor: '#ffffff',
diff --git a/components/ui/LeaderCard2.tsx b/components/ui/LeaderCard2.tsx
index 16473e7..10707be 100644
--- a/components/ui/LeaderCard2.tsx
+++ b/components/ui/LeaderCard2.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Image from 'next/image';
 
 interface LeaderCardProps {
   name: string;
@@ -37,13 +36,15 @@ export default function LeaderCard2({ name, title, bio, image, reverse = false }
           marginRight: reverse ? '-10px' : '20px',
         }}
       >
-        <Image
+        <img
           src={image}
           alt={name}
-          fill
           style={{
+            width: '100%',
+            height: '100%',
             objectFit: 'cover',
             borderRadius: '14px',
+            display: 'block',
           }}
         />
       </div>