diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..cf604f0
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import { Users, BarChart3, Settings, AlertCircle } from "lucide-react";
+
+export default function AdminDashboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="mediumLarge"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Dashboard", id: "/admin" }
+            ]}
+            brandName="Bosaso Police Admin"
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics" className="pt-32 pb-16">
+          <MetricCardOne
+            title="System Overview"
+            description="Administrative control panel for managing user accounts, reports, and system settings."
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            metrics={[
+              { id: "u1", value: "1,248", title: "Active Users", description: "Registered account holders", icon: Users },
+              { id: "u2", value: "85%", title: "Report Efficiency", description: "Resolved incident volume", icon: BarChart3 },
+              { id: "u3", value: "12", title: "Pending Alerts", description: "High priority investigations", icon: AlertCircle },
+              { id: "u4", value: "Enabled", title: "System Status", description: "Global configuration settings", icon: Settings }
+            ]}
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..3d1d994
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login attempted:", { email, password });
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Login", id: "/login" },
+          { name: "Register", id: "/register" },
+        ]}
+        brandName="Bosaso Police"
+      />
+      <main className="min-h-screen flex items-center justify-center pt-20">
+        <form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
+          <h1 className="text-2xl font-bold mb-6">Police Login</h1>
+          <input
+            type="email"
+            placeholder="Email"
+            className="w-full p-3 mb-4 border rounded"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            className="w-full p-3 mb-6 border rounded"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
+            Login
+          </button>
+        </form>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fc40700..97a3adf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,22 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "features" },
+        { name: "Contact", id: "contact" },
+        { name: "Admin", id: "/admin" },
       ]}
       brandName="Bosaso Police"
     />
@@ -55,107 +44,52 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Bosaso Police Crime Report & Tracking System"
       description="Secure, efficient, and community-focused reporting platform for a safer Bosaso. Empowering local police with real-time incident tracking to protect our citizens."
       testimonials={[
         {
-          name: "Ali Hassan",
-          handle: "@alihassan",
-          testimonial: "This platform has significantly improved how we report incidents in Bosaso.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1",
-          imageAlt: "police patrol car city station",
-        },
+          name: "Ali Hassan",          handle: "@alihassan",          testimonial: "This platform has significantly improved how we report incidents in Bosaso.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=1",          imageAlt: "police patrol car city station"},
         {
-          name: "Fatima Noor",
-          handle: "@fatimanoor",
-          testimonial: "Very user-friendly and keeps our community safe.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1",
-          imageAlt: "police patrol car city station",
-        },
+          name: "Fatima Noor",          handle: "@fatimanoor",          testimonial: "Very user-friendly and keeps our community safe.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=1",          imageAlt: "police patrol car city station"},
         {
-          name: "Mohamed Abdi",
-          handle: "@mohabdi",
-          testimonial: "Quick response times thanks to the tracking system.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1",
-          imageAlt: "police patrol car city station",
-        },
+          name: "Mohamed Abdi",          handle: "@mohabdi",          testimonial: "Quick response times thanks to the tracking system.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=1",          imageAlt: "police patrol car city station"},
         {
-          name: "Zahra Ahmed",
-          handle: "@zahraahmed",
-          testimonial: "Essential tool for every citizen in Bosaso.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1",
-          imageAlt: "police patrol car city station",
-        },
+          name: "Zahra Ahmed",          handle: "@zahraahmed",          testimonial: "Essential tool for every citizen in Bosaso.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=1",          imageAlt: "police patrol car city station"},
         {
-          name: "Yusuf Omar",
-          handle: "@yusufomar",
-          testimonial: "A massive step forward for police accountability.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1",
-          imageAlt: "police patrol car city station",
-        },
+          name: "Yusuf Omar",          handle: "@yusufomar",          testimonial: "A massive step forward for police accountability.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=1",          imageAlt: "police patrol car city station"},
       ]}
       buttons={[
         {
-          text: "Report Incident",
-          href: "#contact",
-        },
+          text: "Report Incident",          href: "#contact"},
         {
-          text: "Learn More",
-          href: "#about",
-        },
+          text: "Learn More",          href: "#about"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092128.jpg?_wi=2"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg",
-          alt: "Local resident",
-        },
+          src: "http://img.b2bpic.net/free-photo/car-entering-parking_1160-352.jpg",          alt: "Local resident"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg",
-          alt: "Community member",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-stylish-woman-exploring-city_23-2149186680.jpg",          alt: "Community member"},
         {
-          src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg",
-          alt: "Local business owner",
-        },
+          src: "http://img.b2bpic.net/free-photo/policemen-street-japan_23-2149297293.jpg",          alt: "Local business owner"},
         {
-          src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg",
-          alt: "Youth representative",
-        },
+          src: "http://img.b2bpic.net/free-photo/fire-truck-motion-emergency-vehicle-street-dynamic-city-scene_169016-68604.jpg",          alt: "Youth representative"},
         {
-          src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg",
-          alt: "Neighborhood elder",
-        },
+          src: "http://img.b2bpic.net/free-photo/person-sitting-house-with-automation-light-system_482257-9704.jpg",          alt: "Neighborhood elder"},
       ]}
       marqueeItems={[
-        {
-          type: "text",
-          text: "Safety First",
-        },
-        {
-          type: "text",
-          text: "Rapid Response",
-        },
-        {
-          type: "text",
-          text: "Data Driven",
-        },
-        {
-          type: "text",
-          text: "Community Trust",
-        },
-        {
-          type: "text",
-          text: "24/7 Monitoring",
-        },
+        { type: "text", text: "Safety First" },
+        { type: "text", text: "Rapid Response" },
+        { type: "text", text: "Data Driven" },
+        { type: "text", text: "Community Trust" },
+        { type: "text", text: "24/7 Monitoring" },
       ]}
     />
   </div>
@@ -166,19 +100,13 @@ export default function LandingPage() {
       title="Our Mission for Bosaso"
       metrics={[
         {
-          label: "Incidents Resolved",
-          value: "1200+",
-          icon: CheckCircle,
+          label: "Incidents Resolved",          value: "1200+",          icon: CheckCircle,
         },
         {
-          label: "Active Reports",
-          value: "45",
-          icon: AlertCircle,
+          label: "Active Reports",          value: "45",          icon: AlertCircle,
         },
         {
-          label: "Community Participation",
-          value: "98%",
-          icon: Users,
+          label: "Community Participation",          value: "98%",          icon: Users,
         },
       ]}
       metricsAnimation="slide-up"
@@ -192,38 +120,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Secure Mobile Reporting",
-          author: "Police Dept",
-          description: "Instant crime reporting from any smartphone with real-time location tagging.",
-          tags: [
-            "Security",
-            "Mobile",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2",
-        },
+          id: "f1",          title: "Secure Mobile Reporting",          author: "Police Dept",          description: "Instant crime reporting from any smartphone with real-time location tagging.",          tags: ["Security", "Mobile"],
+          imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg?_wi=2"},
         {
-          id: "f2",
-          title: "Real-time Tracking",
-          author: "Police Dept",
-          description: "Dispatch teams can track reported incidents via live GPS data updates.",
-          tags: [
-            "Tracking",
-            "GPS",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2",
-        },
+          id: "f2",          title: "Real-time Tracking",          author: "Police Dept",          description: "Dispatch teams can track reported incidents via live GPS data updates.",          tags: ["Tracking", "GPS"],
+          imageSrc: "http://img.b2bpic.net/free-photo/platoon-captain-handling-surveillance-safety-operations-with-crew_482257-91019.jpg?_wi=2"},
         {
-          id: "f3",
-          title: "Community Engagement",
-          author: "Police Dept",
-          description: "Interactive platform connecting local authorities with citizens for proactive safety.",
-          tags: [
-            "Safety",
-            "Community",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2",
-        },
+          id: "f3",          title: "Community Engagement",          author: "Police Dept",          description: "Interactive platform connecting local authorities with citizens for proactive safety.",          tags: ["Safety", "Community"],
+          imageSrc: "http://img.b2bpic.net/free-photo/taxi-driver-getting-ready-customer_23-2149273220.jpg?_wi=2"},
       ]}
       title="Core Capabilities"
       description="State-of-the-art tools designed for rapid reporting and effective police response."
@@ -237,21 +141,9 @@ export default function LandingPage() {
       gridVariant="bento-grid"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "15 min",
-          description: "Avg Response Time",
-        },
-        {
-          id: "m2",
-          value: "24/7",
-          description: "Operational Status",
-        },
-        {
-          id: "m3",
-          value: "95%",
-          description: "Incident Completion",
-        },
+        { id: "m1", value: "15 min", description: "Avg Response Time" },
+        { id: "m2", value: "24/7", description: "Operational Status" },
+        { id: "m3", value: "95%", description: "Incident Completion" },
       ]}
       title="Data-Driven Safety"
       description="Metrics that track our performance and demonstrate our commitment to transparency."
@@ -265,45 +157,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          name: "Sarah Johnson",
-          handle: "@sarahj",
-          testimonial: "Fast and helpful.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2",
-        },
+          id: "t1",          name: "Sarah Johnson",          handle: "@sarahj",          testimonial: "Fast and helpful.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2"},
         {
-          id: "t2",
-          name: "Michael Chen",
-          handle: "@mchen",
-          testimonial: "Excellent service.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg",
-        },
+          id: "t2",          name: "Michael Chen",          handle: "@mchen",          testimonial: "Excellent service.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/nature-lover-working-greenhouse_23-2149037251.jpg"},
         {
-          id: "t3",
-          name: "Emily Rodriguez",
-          handle: "@erod",
-          testimonial: "Professional reporting.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg",
-        },
+          id: "t3",          name: "Emily Rodriguez",          handle: "@erod",          testimonial: "Professional reporting.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148729653.jpg"},
         {
-          id: "t4",
-          name: "David Kim",
-          handle: "@dkim",
-          testimonial: "Very effective tool.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg",
-        },
+          id: "t4",          name: "David Kim",          handle: "@dkim",          testimonial: "Very effective tool.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2148680199.jpg"},
         {
-          id: "t5",
-          name: "Alice Wong",
-          handle: "@awong",
-          testimonial: "Safety is improved.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg",
-        },
+          id: "t5",          name: "Alice Wong",          handle: "@awong",          testimonial: "Safety is improved.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149196105.jpg"},
       ]}
       showRating={true}
       title="Community Voices"
@@ -316,21 +183,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Is my data anonymous?",
-          content: "Yes, you can choose to remain anonymous when submitting reports.",
-        },
-        {
-          id: "q2",
-          title: "How do I track reports?",
-          content: "Use your generated report ID on the tracking page.",
-        },
-        {
-          id: "q3",
-          title: "Is it available 24/7?",
-          content: "Yes, the system is fully operational around the clock.",
-        },
+        { id: "q1", title: "Is my data anonymous?", content: "Yes, you can choose to remain anonymous when submitting reports." },
+        { id: "q2", title: "How do I track reports?", content: "Use your generated report ID on the tracking page." },
+        { id: "q3", title: "Is it available 24/7?", content: "Yes, the system is fully operational around the clock." },
       ]}
       title="Common Inquiries"
       description="Answers to frequently asked questions about our system."
@@ -341,16 +196,9 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       text="Report an incident safely and securely. Our team is ready to assist you."
-      buttons={[
-        {
-          text: "Submit Report",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Submit Report", href: "#contact" }]}
     />
   </div>
 
@@ -358,33 +206,16 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Quick Links",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Report",
-              href: "#contact",
-            },
+          title: "Quick Links",          items: [
+            { label: "Home", href: "#hero" },
+            { label: "About", href: "#about" },
+            { label: "Report", href: "#contact" },
           ],
         },
         {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
+          title: "Legal",          items: [
+            { label: "Privacy Policy", href: "#" },
+            { label: "Terms of Service", href: "#" },
           ],
         },
       ]}
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..7dfbeb9
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState("officer");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Registration attempted:", { email, password, role });
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Login", id: "/login" },
+          { name: "Register", id: "/register" },
+        ]}
+        brandName="Bosaso Police"
+      />
+      <main className="min-h-screen flex items-center justify-center pt-20">
+        <form onSubmit={handleSubmit} className="p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-200">
+          <h1 className="text-2xl font-bold mb-6">Create Account</h1>
+          <input
+            type="email"
+            placeholder="Email"
+            className="w-full p-3 mb-4 border rounded"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            className="w-full p-3 mb-4 border rounded"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <select
+            className="w-full p-3 mb-6 border rounded"
+            value={role}
+            onChange={(e) => setRole(e.target.value)}
+          >
+            <option value="officer">Police Officer</option>
+            <option value="admin">Administrator</option>
+          </select>
+          <button type="submit" className="w-full p-3 bg-blue-600 text-white rounded font-bold">
+            Register
+          </button>
+        </form>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/submit-report/page.tsx b/src/app/submit-report/page.tsx
new file mode 100644
index 0000000..0f4b2a1
--- /dev/null
+++ b/src/app/submit-report/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+
+export default function SubmitReportPage() {
+  const [status, setStatus] = useState<string>("");
+
+  const handleSubmit = async (email: string) => {
+    // Simulation of backend save
+    console.log("Saving report with email:", email);
+    setStatus("Report submitted successfully!");
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="mediumLarge"
+        background="none"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Report", id: "#form" }
+            ]}
+            brandName="Bosaso Police"
+        />
+      </div>
+      <div id="form" data-section="form" className="pt-24">
+        <ContactCenter
+            tag="Report Incident"
+            title="Incident Submission Form"
+            description="Please provide accurate details regarding the incident. Our team will review your report shortly."
+            background={{ variant: "gradient-bars" }}
+            onSubmit={handleSubmit}
+            buttonText="Save Report"
+        />
+        {status && (
+            <div className="text-center p-4 mt-4 bg-green-500/10 text-green-600 font-semibold rounded-full">
+                {status}
+            </div>
+        )}
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file