diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
new file mode 100644
index 0000000..54eff94
--- /dev/null
+++ b/src/app/events/page.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Calendar, Users, Zap } from "lucide-react";
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+
+export default function EventsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Work", id: "/#portfolio" },
+              { name: "Events", id: "/events" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#services" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Seadrop Studio"
+            button={{ text: "Get Started", href: "/#contact" }}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroOverlay
+            title="Event Management Excellence"
+            description="Crafting bespoke event experiences with precision and cinematic flair. We handle the logistics, you take the spotlight."
+            imageSrc="http://img.b2bpic.net/free-photo/event-management-professional-setup-lighting_1150-17482.jpg"
+            showDimOverlay={true}
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics">
+            <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            metrics={[
+              { id: "e1", icon: Calendar, title: "Years Experience", value: "10+" },
+              { id: "e2", icon: Users, title: "Audience Reach", value: "50k+" },
+              { id: "e3", icon: Zap, title: "Events Managed", value: "200+" },
+            ]}
+            title="Proven Expertise"
+            description="Delivering flawless execution for events of all scales."
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="Seadrop Studio"
+            columns={[
+              {
+                title: "Navigation",                items: [
+                  { label: "Work", href: "/#portfolio" },
+                  { label: "Events", href: "/events" },
+                  { label: "About", href: "/#about" },
+                  { label: "Contact", href: "/#contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [{ label: "Privacy", href: "#" }],
+              },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c8377b2..e30c1c9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,6 +33,7 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         { name: "Work", id: "#portfolio" },
+        { name: "Events", id: "/events" },
         { name: "About", id: "#about" },
         { name: "Services", id: "#services" },
         { name: "Contact", id: "#contact" },
@@ -188,6 +189,7 @@ export default function LandingPage() {
         {
           title: "Navigation",          items: [
             { label: "Work", href: "#portfolio" },
+            { label: "Events", href: "/events" },
             { label: "About", href: "#about" },
             { label: "Contact", href: "#contact" },
           ],
diff --git a/src/app/production/page.tsx b/src/app/production/page.tsx
new file mode 100644
index 0000000..6b1a55d
--- /dev/null
+++ b/src/app/production/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import { Shield } from "lucide-react";
+
+export default function ProductionPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Work", id: "/" },
+              { name: "About", id: "/" },
+              { name: "Production", id: "/production" },
+              { name: "Contact", id: "/" },
+            ]}
+            brandName="Seadrop Studio"
+            button={{ text: "Get Started", href: "/" }}
+          />
+        </div>
+
+        <div id="feature" data-section="feature">
+          <FeatureCardTwentyOne
+            title="Precision Production Systems"
+            description="High-end technical direction and asset management for modern brand storytellers."
+            tag="Production"
+            accordionItems={[
+              { id: "1", title: "Cinematic Workflow", content: "Optimized pipeline from pre-production to final delivery." },
+              { id: "2", title: "Asset Management", content: "Scalable cloud-based archival for high-fidelity assets." },
+              { id: "3", title: "Technical Direction", content: "On-set and event production support with modern infrastructure." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/film-production-set_23-2148565537.jpg"
+            mediaAnimation="blur-reveal"
+            useInvertedBackground={false}
+            mediaPosition="right"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            title="Ready to execute?"
+            description="Let's define your production workflow."
+            tag="Contact"
+            buttons={[{ text: "Discuss Project", href: "/" }]}
+            background={{ variant: "plain" }}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Seadrop Studio"
+            columns={[
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Production", href: "/production" }] },
+              { title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file