diff --git a/soroban-client/__tests__/components/Header.test.tsx b/soroban-client/__tests__/components/Header.test.tsx
index c3c2a431..d5942aa2 100644
--- a/soroban-client/__tests__/components/Header.test.tsx
+++ b/soroban-client/__tests__/components/Header.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Header from '../../components/Header';
+import { ThemeProvider } from '@/contexts/ThemeContext';
 import { useWallet } from '@/contexts/WalletContext';
 
 // Mock Wallet Context Hook
@@ -13,6 +14,33 @@ jest.mock('next/navigation', () => ({
 }));
 
 describe('Header Component', () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query: string) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+
+        document.documentElement.classList.remove('dark');
+    });
+
+    const renderHeader = () =>
+        render(
+            <ThemeProvider>
+                <Header />
+            </ThemeProvider>
+        );
+
     it('renders navigation links properly', () => {
         (useWallet as jest.Mock).mockReturnValue({
             address: null,
@@ -27,7 +55,7 @@ describe('Header Component', () => {
             signTransaction: jest.fn(),
         });
 
-        render(<Header />);
+        renderHeader();
 
         expect(screen.getByText('CrowdPass')).toBeInTheDocument();
         // Home, Events, Analytics, and Create Events may appear multiple times (desktop + mobile)
@@ -36,6 +64,7 @@ describe('Header Component', () => {
         expect(screen.getAllByText('Analytics').length).toBeGreaterThan(0);
         expect(screen.getAllByText('Create Events').length).toBeGreaterThan(0);
         expect(screen.getAllByText('Connect Freighter').length).toBeGreaterThan(0);
+        expect(screen.getAllByLabelText('Switch to dark mode').length).toBeGreaterThan(0);
     });
 
     it('displays Install Freighter if wallet is not installed', () => {
@@ -52,7 +81,7 @@ describe('Header Component', () => {
             signTransaction: jest.fn(),
         });
 
-        render(<Header />);
+        renderHeader();
         // Select Wallet may appear multiple times (desktop + mobile)
         expect(screen.getAllByText('Select Wallet').length).toBeGreaterThan(0);
     });
@@ -74,15 +103,42 @@ describe('Header Component', () => {
             signTransaction: jest.fn(),
         });
 
-        render(<Header />);
+        renderHeader();
         const formattedAddress = 'GBJ2...V2Y2';
         // There are multiple address displays (desktop and mobile), so verify they exist
         expect(screen.getAllByText(formattedAddress).length).toBeGreaterThan(0);
-        
+
         // Disconnect buttons may appear multiple times (desktop + mobile)
         const disconnectBtns = screen.getAllByText('Disconnect');
         expect(disconnectBtns.length).toBeGreaterThan(0);
         fireEvent.click(disconnectBtns[0]);
         expect(disconnectMock).toHaveBeenCalledTimes(1);
     });
+
+    it('persists theme selection and toggles the root dark class', async () => {
+        (useWallet as jest.Mock).mockReturnValue({
+            address: null,
+            providerId: 'freighter',
+            providerName: 'Freighter',
+            availableProviders: [],
+            isConnected: false,
+            isInstalled: true,
+            connect: jest.fn(),
+            disconnect: jest.fn(),
+            setProviderId: jest.fn(),
+            signTransaction: jest.fn(),
+        });
+
+        renderHeader();
+
+        const toggleButtons = screen.getAllByLabelText('Switch to dark mode');
+        fireEvent.click(toggleButtons[0]);
+
+        await waitFor(() => {
+            expect(window.localStorage.getItem('crowdpass-theme')).toBe('dark');
+            expect(document.documentElement.classList.contains('dark')).toBe(true);
+        });
+
+        expect(screen.getAllByLabelText('Switch to light mode').length).toBeGreaterThan(0);
+    });
 });
diff --git a/soroban-client/app/[locale]/analytics/page.tsx b/soroban-client/app/[locale]/analytics/page.tsx
index c61cbc1a..b99c1914 100644
--- a/soroban-client/app/[locale]/analytics/page.tsx
+++ b/soroban-client/app/[locale]/analytics/page.tsx
@@ -4,19 +4,19 @@ import Header from "@/components/Header";
 
 export default function AnalyticsPage() {
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <AnalyticsPageView page="analytics" />
       <Header />
 
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(255,87,34,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-8">
-          <p className="text-sm uppercase tracking-[0.4em] text-orange-200/70">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(255,87,34,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] dark:shadow-none">
+          <p className="text-sm uppercase tracking-[0.4em] text-orange-700 dark:text-orange-200/70">
             Analytics
           </p>
-          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
+          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight text-zinc-950 dark:text-white sm:text-5xl">
             Organizer and platform insights in one dashboard
           </h1>
-          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-300">
+          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
             Track page views, wallet connections, batch ticket purchases, conversion
             trends, and revenue signals without leaving the CrowdPass interface.
           </p>
diff --git a/soroban-client/app/[locale]/create-event/page.tsx b/soroban-client/app/[locale]/create-event/page.tsx
index 00c17083..c6bf2758 100644
--- a/soroban-client/app/[locale]/create-event/page.tsx
+++ b/soroban-client/app/[locale]/create-event/page.tsx
@@ -1,61 +1,64 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import AnalyticsPageView from "@/components/AnalyticsPageView";
-import Header from "@/components/Header";
-import { useWallet } from "@/contexts/WalletContext";
-import { createEvent } from "@/lib/soroban";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
+import AnalyticsPageView from "@/components/AnalyticsPageView";
 import Header from "@/components/Header";
+import { useWallet } from "@/contexts/WalletContext";
+import { createEvent } from "@/lib/soroban";
 
-const eventSchema = z.object({
-  theme: z.string().min(1, "Event name required"),
-  description: z.string().optional(),
-  startDate: z.string().min(1, "Start date is required"),
-  endDate: z.string().min(1, "End date is required"),
-  price: z.coerce.number({ invalid_type_error: "Price must be a number" }).min(0, "Price cannot be negative").max(1000000, "Price is too high"),
-  tickets: z.coerce.number({ invalid_type_error: "Tickets must be a number" }).int("Must be a positive integer").positive("Must be a positive integer"),
-}).superRefine((data, ctx) => {
-  if (data.startDate) {
-    const start = new Date(data.startDate).getTime();
-    if (start <= Date.now()) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ["startDate"],
-        message: "Start date must be in the future",
-      });
+const eventSchema = z
+  .object({
+    theme: z.string().min(1, "Event name required"),
+    description: z.string().optional(),
+    startDate: z.string().min(1, "Start date is required"),
+    endDate: z.string().min(1, "End date is required"),
+    price: z
+      .string()
+      .min(1, "Price required")
+      .refine((s) => !Number.isNaN(parseFloat(s)), "Price must be a number")
+      .refine((s) => parseFloat(s) >= 0, "Price cannot be negative")
+      .refine((s) => parseFloat(s) <= 1_000_000, "Price is too high"),
+    tickets: z
+      .string()
+      .min(1, "Total tickets required")
+      .refine((s) => /^[0-9]+$/.test(s), "Tickets must be a whole number")
+      .refine((s) => parseInt(s, 10) > 0, "Must be a positive integer"),
+  })
+  .superRefine((data, ctx) => {
+    if (data.startDate) {
+      const start = new Date(data.startDate).getTime();
+      if (start <= Date.now()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["startDate"],
+          message: "Start date must be in the future",
+        });
+      }
     }
-  }
 
-  if (data.startDate && data.endDate) {
-    const start = new Date(data.startDate).getTime();
-    const end = new Date(data.endDate).getTime();
-    if (end <= start) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ["endDate"],
-        message: "End date must be after start date",
-      });
+    if (data.startDate && data.endDate) {
+      const start = new Date(data.startDate).getTime();
+      const end = new Date(data.endDate).getTime();
+      if (end <= start) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["endDate"],
+          message: "End date must be after start date",
+        });
+      }
     }
-  }
-});
+  });
 
 type EventFormData = z.infer<typeof eventSchema>;
 
 export default function CreateEventPage() {
   const router = useRouter();
-  const { address, isInstalled, connect, providerName, signTransaction } = useWallet();
-
-  const [theme, setTheme] = useState("");
-  const [description, setDescription] = useState("");
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [price, setPrice] = useState("");
-  const [tickets, setTickets] = useState("");
-  const [image, setImage] = useState<File | null>(null);
+  const { address, isInstalled, connect, providerName, signTransaction } =
+    useWallet();
 
   const {
     register,
@@ -70,37 +73,16 @@ export default function CreateEventPage() {
   const [errorMsg, setErrorMsg] = useState("");
 
   const onSubmit = async (data: EventFormData) => {
-  const validate = () => {
-    const errs: { [key: string]: string } = {};
-    const now = Date.now();
-
-    if (!theme.trim()) errs.theme = "Event name required";
-    if (!startDate) errs.startDate = "Start date is required";
-    if (!endDate) errs.endDate = "End date is required";
-    if (startDate && new Date(startDate).getTime() <= now)
-      errs.startDate = "Start date must be in the future";
-    if (startDate && endDate && new Date(endDate) <= new Date(startDate))
-      errs.endDate = "End date must be after start date";
-    if (!price) errs.price = "Price required";
-    if (price && isNaN(Number(price))) errs.price = "Price must be a number";
-    if (price && Number(price) < 0) errs.price = "Price cannot be negative";
-    if (!tickets) errs.tickets = "Total tickets required";
-    if (tickets && (!/^[0-9]+$/.test(tickets) || Number(tickets) <= 0))
-      errs.tickets = "Must be a positive integer";
-
-    return errs;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
     let organizerAddress = address;
 
-    if (!address) {
+    if (!organizerAddress) {
       if (isInstalled) {
         await connect();
         organizerAddress = localStorage.getItem("wallet_address");
       } else {
-        alert(`Please install ${providerName} (or another Stellar wallet) to create an event.`);
+        alert(
+          `Please install ${providerName} (or another Stellar wallet) to create an event.`
+        );
         return;
       }
     }
@@ -110,37 +92,25 @@ export default function CreateEventPage() {
       return;
     }
 
-    const errs = validate();
-    if (Object.keys(errs).length) {
-      setErrors(errs);
-      return;
-    }
-    setErrors({});
-    setSubmitting(true);
     setErrorMsg("");
     setSuccessMsg("");
 
     try {
-      const organizer = address!;
       const startUnix = Math.floor(new Date(data.startDate).getTime() / 1000);
       const endUnix = Math.floor(new Date(data.endDate).getTime() / 1000);
-      const ticketPrice = BigInt(Math.floor(data.price * 1_000_000));
-      const totalTickets = BigInt(data.tickets);
-      const organizer = organizerAddress;
-      const startUnix = Math.floor(new Date(startDate).getTime() / 1000);
-      const endUnix = Math.floor(new Date(endDate).getTime() / 1000);
-      const ticketPrice = BigInt(Math.floor(parseFloat(price) * 1_000_000));
-      const totalTickets = BigInt(tickets);
+      const ticketPrice = BigInt(
+        Math.floor(parseFloat(data.price) * 10_000_000)
+      );
+      const totalTickets = BigInt(parseInt(data.tickets, 10));
 
-      // for simplicity we use zero address as payment token; replace with real
-      // token contract address or allow user selection later.
-      const paymentToken = "0000000000000000000000000000000000000000000000000000000000000000";
+      const paymentToken =
+        "0000000000000000000000000000000000000000000000000000000000000000";
 
       const res = await createEvent(
         {
-          organizer,
-          theme,
-          eventType: description,
+          organizer: organizerAddress,
+          theme: data.theme,
+          eventType: data.description || "",
           startTimeUnix: startUnix,
           endTimeUnix: endUnix,
           ticketPrice,
@@ -149,313 +119,172 @@ export default function CreateEventPage() {
         },
         signTransaction
       );
-      const res = await createEvent({
-        organizer,
-        theme: data.theme,
-        eventType: data.description || "",
-        startTimeUnix: startUnix,
-        endTimeUnix: endUnix,
-        ticketPrice,
-        totalTickets,
-        paymentToken,
-      });
 
-      console.log("transaction result", res);
-      setSuccessMsg("Event created (tx " + res.hash + ")");
-      // Optionally redirect to dashboard or home after creation
+      setSuccessMsg(`Event created (ledger ${res.ledger}, tx ${res.hash})`);
       setTimeout(() => router.push("/"), 3000);
     } catch (err: unknown) {
       console.error(err);
-      if (err && typeof err === "object" && "message" in err) {
-        setErrorMsg((err as { message?: string }).message || "unknown error");
-      } else {
-        setErrorMsg("unknown error");
-      }
-    } finally {
-      setSubmitting(false);
-      setErrorMsg(err.message || "unknown error");
+      const message =
+        err && typeof err === "object" && "message" in err
+          ? String((err as { message?: string }).message)
+          : "Unknown error";
+      setErrorMsg(message);
     }
   };
 
   return (
-    <div className="bg-[#18181B] min-h-screen text-white font-sans selection:bg-[#FF5722] selection:text-white flex flex-col">
-      <Header />
-      <main className="grow flex flex-col items-center justify-center pt-32 pb-20 px-4">
-        <div className="w-full max-w-2xl bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-8 shadow-2xl">
-          <div className="mb-8 text-center">
-            <h1 className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
-              Create New Event
-            </h1>
-            <p className="text-gray-400 mt-2">
-              Launch your decentralized event with secure ticketing.
-            </p>
-          </div>
-
-          {successMsg && (
-            <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-xl mb-6 flex items-center gap-3">
-              <svg className="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground selection:bg-[#FF5722] selection:text-white">
       <AnalyticsPageView page="create-event" />
       <Header />
 
-      <div className="mx-auto max-w-3xl px-4 pb-20 pt-36 sm:px-6">
-        <div className="rounded-[32px] border border-white/10 bg-white/5 p-8 shadow-xl shadow-black/20">
-          <h1 className="mb-2 text-3xl font-bold">Create Event</h1>
-          <p className="mb-6 text-zinc-300">
-            Launch a new CrowdPass experience with on-chain pricing, inventory, and
-            organizer ownership.
+      <main className="mx-auto max-w-3xl px-4 pb-20 pt-36 sm:px-6">
+        <div className="rounded-[32px] border border-zinc-200 bg-white p-8 text-zinc-900 shadow-xl shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:text-white dark:shadow-black/20">
+          <h1 className="mb-2 text-3xl font-bold text-zinc-950 dark:text-white">Create Event</h1>
+          <p className="mb-6 text-zinc-600 dark:text-zinc-300">
+            Launch a new CrowdPass experience with on-chain pricing, inventory,
+            and organizer ownership.
           </p>
 
           {successMsg && (
-            <div className="mb-4 rounded-2xl bg-green-500/15 p-3 text-green-200">
+            <div className="mb-4 rounded-2xl bg-green-50 p-3 text-green-700 dark:bg-green-500/15 dark:text-green-200">
               {successMsg}
             </div>
           )}
           {errorMsg && (
-            <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-xl mb-6 flex items-center gap-3">
-              <svg className="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <div className="mb-4 rounded-2xl bg-red-50 p-3 text-red-700 dark:bg-red-500/15 dark:text-red-200">
               {errorMsg}
             </div>
-            <div className="mb-4 rounded-2xl bg-red-500/15 p-3 text-red-200">
-              {errorMsg}
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Event Name
-          </label>
-          <input
-            type="text"
-            value={theme}
-            onChange={(e) => setTheme(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-          />
-          {errors.theme && (
-            <p className="text-red-600 text-sm">{errors.theme}</p>
           )}
 
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div className="md:col-span-2">
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Event Name
                 </label>
                 <input
                   type="text"
                   placeholder="e.g., Stellar DevCon 2026"
                   {...register("theme")}
-                  className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
                 {errors.theme && (
-                  <p className="text-red-400 text-sm mt-1.5 flex items-center gap-1"><span className="text-xs">⚠️</span> {errors.theme.message}</p>
+                  <p className="mt-1.5 text-sm text-red-400">
+                    {errors.theme.message}
+                  </p>
                 )}
               </div>
 
               <div className="md:col-span-2">
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Description
                 </label>
                 <textarea
                   {...register("description")}
                   placeholder="Tell your audience about the event..."
-                  className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition"
                   rows={4}
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Start Date &amp; Time
                 </label>
                 <input
                   type="datetime-local"
                   {...register("startDate")}
-                  className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition [color-scheme:dark]"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 transition [color-scheme:light] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:[color-scheme:dark]"
                 />
                 {errors.startDate && (
-                  <p className="text-red-400 text-sm mt-1.5 flex items-center gap-1"><span className="text-xs">⚠️</span> {errors.startDate.message}</p>
+                  <p className="mt-1.5 text-sm text-red-400">
+                    {errors.startDate.message}
+                  </p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   End Date &amp; Time
                 </label>
                 <input
                   type="datetime-local"
                   {...register("endDate")}
-                  className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition [color-scheme:dark]"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 transition [color-scheme:light] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:[color-scheme:dark]"
                 />
                 {errors.endDate && (
-                  <p className="text-red-400 text-sm mt-1.5 flex items-center gap-1"><span className="text-xs">⚠️</span> {errors.endDate.message}</p>
+                  <p className="mt-1.5 text-sm text-red-400">
+                    {errors.endDate.message}
+                  </p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Ticket Price (XLM)
                 </label>
                 <div className="relative">
-                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">XLM</span>
-                    <input
+                  <span className="absolute left-4 top-1/2 -translate-y-1/2 font-medium text-zinc-500 dark:text-gray-400">
+                    XLM
+                  </span>
+                  <input
                     type="number"
-                    step="0.000001"
+                    step="0.0000001"
                     placeholder="0.00"
                     {...register("price")}
-                    className="w-full bg-black/20 border border-white/10 rounded-xl pl-12 pr-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition"
-                    />
+                    className="w-full rounded-xl border border-zinc-300 bg-white py-3 pl-12 pr-4 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
+                  />
                 </div>
                 {errors.price && (
-                  <p className="text-red-400 text-sm mt-1.5 flex items-center gap-1"><span className="text-xs">⚠️</span> {errors.price.message}</p>
+                  <p className="mt-1.5 text-sm text-red-400">
+                    {errors.price.message}
+                  </p>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Total Tickets
                 </label>
                 <input
                   type="number"
                   placeholder="e.g., 500"
                   {...register("tickets")}
-                  className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 focus:border-[#FF5722] transition"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
                 {errors.tickets && (
-                  <p className="text-red-400 text-sm mt-1.5 flex items-center gap-1"><span className="text-xs">⚠️</span> {errors.tickets.message}</p>
+                  <p className="mt-1.5 text-sm text-red-400">
+                    {errors.tickets.message}
+                  </p>
                 )}
               </div>
 
               <div className="md:col-span-2">
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Event Image (optional)
                 </label>
-                <div className="w-full border-2 border-dashed border-white/20 rounded-xl px-4 py-6 text-center hover:bg-white/5 transition focus-within:ring-2 focus-within:border-transparent focus-within:ring-[#FF5722]/50">
-                    <input
-                        type="file"
-                        accept="image/*"
-                        className="w-full text-sm text-gray-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[#FF5722]/10 file:text-[#FF5722] hover:file:bg-[#FF5722]/20 file:transition file:cursor-pointer cursor-pointer"
-                        onChange={(e) => setImage(e.target.files?.[0] || null)}
-                    />
+                <div className="w-full rounded-xl border-2 border-dashed border-zinc-300 px-4 py-6 text-center transition hover:bg-zinc-50 focus-within:border-transparent focus-within:ring-2 focus-within:ring-[#FF5722]/50 dark:border-white/20 dark:hover:bg-white/5">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="w-full cursor-pointer text-sm text-zinc-500 file:mr-4 file:cursor-pointer file:rounded-lg file:border-0 file:bg-[#FF5722]/10 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-[#FF5722] file:transition hover:file:bg-[#FF5722]/20 dark:text-gray-400"
+                  />
                 </div>
               </div>
             </div>
 
-            <div className="pt-4">
-                <button
-                type="submit"
-                disabled={isSubmitting || (!isValid && Object.keys(errors).length > 0)}
-                className="w-full bg-[#FF5722] hover:bg-[#F4511E] text-white font-bold text-lg py-4 px-6 rounded-xl shadow-[0_0_20px_rgba(255,87,34,0.3)] transition transform hover:-translate-y-1 disabled:opacity-50 disabled:hover:translate-y-0 disabled:shadow-none disabled:cursor-not-allowed flex justify-center items-center gap-3"
-                >
-                {isSubmitting ? (
-                    <>
-                        <svg className="animate-spin -ml-1 mr-2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        Creating Event...
-                    </>
-                ) : "Launch Event"}
-                </button>
-            </div>
+            <button
+              type="submit"
+              disabled={
+                isSubmitting || (!isValid && Object.keys(errors).length > 0)
+              }
+              className="w-full rounded-xl bg-[#FF5722] px-6 py-4 text-lg font-bold text-white shadow-[0_0_20px_rgba(255,87,34,0.3)] transition hover:-translate-y-0.5 hover:bg-[#F4511E] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0"
+            >
+              {isSubmitting ? "Creating..." : "Launch Event"}
+            </button>
           </form>
         </div>
       </main>
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Description
-          </label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-            rows={3}
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Start Date &amp; Time
-          </label>
-          <input
-            type="datetime-local"
-            value={startDate}
-            onChange={(e) => setStartDate(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-          />
-          {errors.startDate && (
-            <p className="text-red-600 text-sm">{errors.startDate}</p>
-          )}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            End Date &amp; Time
-          </label>
-          <input
-            type="datetime-local"
-            value={endDate}
-            onChange={(e) => setEndDate(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-          />
-          {errors.endDate && (
-            <p className="text-red-600 text-sm">{errors.endDate}</p>
-          )}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Ticket Price (XLM)
-          </label>
-          <input
-            type="number"
-            step="0.000001"
-            value={price}
-            onChange={(e) => setPrice(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-          />
-          {errors.price && (
-            <p className="text-red-600 text-sm">{errors.price}</p>
-          )}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Total Tickets
-          </label>
-          <input
-            type="number"
-            value={tickets}
-            onChange={(e) => setTickets(e.target.value)}
-            className="mt-1 block w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 shadow-sm"
-          />
-          {errors.tickets && (
-            <p className="text-red-600 text-sm">{errors.tickets}</p>
-          )}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-200">
-            Event Image (optional)
-          </label>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={(e) => setImage(e.target.files?.[0] || null)}
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={submitting}
-          className="w-full rounded-2xl bg-[#FF5722] px-4 py-3 text-white transition hover:bg-[#F4511E] disabled:opacity-50"
-        >
-          {submitting ? "Creating..." : "Create Event"}
-        </button>
-          </form>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/soroban-client/app/[locale]/dashboard/page.tsx b/soroban-client/app/[locale]/dashboard/page.tsx
index 0afc3299..cf5824f7 100644
--- a/soroban-client/app/[locale]/dashboard/page.tsx
+++ b/soroban-client/app/[locale]/dashboard/page.tsx
@@ -64,24 +64,24 @@ function AttendeesModal({
   }, [eventId]);
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#27272A] rounded-xl w-full max-w-md p-6 space-y-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border border-zinc-200 bg-white p-6 text-zinc-900 dark:border-white/10 dark:bg-[#27272A] dark:text-white">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-bold text-white">Attendees</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-white">
+          <h2 className="text-lg font-bold text-zinc-950 dark:text-white">Attendees</h2>
+          <button onClick={onClose} className="text-zinc-500 transition hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white">
             ✕
           </button>
         </div>
         {loading ? (
-          <p className="text-gray-400 text-sm">Loading…</p>
+          <p className="text-sm text-zinc-500 dark:text-gray-400">Loading…</p>
         ) : attendees.length === 0 ? (
-          <p className="text-gray-400 text-sm">No attendees yet.</p>
+          <p className="text-sm text-zinc-500 dark:text-gray-400">No attendees yet.</p>
         ) : (
           <ul className="space-y-2 max-h-72 overflow-y-auto">
             {attendees.map((addr) => (
               <li
                 key={addr}
-                className="font-mono text-xs text-gray-300 bg-white/5 px-3 py-2 rounded-lg break-all"
+                className="break-all rounded-lg bg-zinc-100 px-3 py-2 font-mono text-xs text-zinc-700 dark:bg-white/5 dark:text-gray-300"
               >
                 {addr}
               </li>
@@ -142,32 +142,32 @@ function UpdateEventModal({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#27272A] rounded-xl w-full max-w-md p-6 space-y-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border border-zinc-200 bg-white p-6 text-zinc-900 dark:border-white/10 dark:bg-[#27272A] dark:text-white">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-bold text-white">Update Event</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-white">
+          <h2 className="text-lg font-bold text-zinc-950 dark:text-white">Update Event</h2>
+          <button onClick={onClose} className="text-zinc-500 transition hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white">
             ✕
           </button>
         </div>
         {error && (
-          <p className="text-red-400 text-sm bg-red-500/10 px-3 py-2 rounded-lg">
+          <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-500/10 dark:text-red-400">
             {error}
           </p>
         )}
         <form onSubmit={handleSubmit} className="space-y-3">
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Event Name
             </label>
             <input
               value={theme}
               onChange={(e) => setTheme(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Ticket Price (XLM)
             </label>
             <input
@@ -176,11 +176,11 @@ function UpdateEventModal({
               min="0"
               value={price}
               onChange={(e) => setPrice(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Total Tickets
             </label>
             <input
@@ -188,7 +188,7 @@ function UpdateEventModal({
               min="1"
               value={totalTickets}
               onChange={(e) => setTotalTickets(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <button
@@ -222,36 +222,36 @@ function EventCard({
   const revenue = event.tickets_sold * event.ticket_price;
 
   return (
-    <div className="bg-[#27272A] rounded-xl p-5 space-y-4 border border-white/5">
+    <div className="space-y-4 rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 shadow-lg shadow-zinc-900/5 dark:border-white/5 dark:bg-[#27272A] dark:text-white dark:shadow-none">
       <div className="flex items-start justify-between gap-2">
         <div>
-          <h3 className="text-white font-semibold text-base">{event.theme}</h3>
-          <p className="text-gray-400 text-xs mt-0.5">{event.event_type}</p>
+          <h3 className="text-base font-semibold text-zinc-950 dark:text-white">{event.theme}</h3>
+          <p className="mt-0.5 text-xs text-zinc-500 dark:text-gray-400">{event.event_type}</p>
         </div>
         <EventStatusBadge event={event} />
       </div>
 
       {/* Stats */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">
             {event.tickets_sold.toString()}
           </p>
-          <p className="text-gray-400 text-xs">Sold</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Sold</p>
         </div>
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">
             {event.total_tickets.toString()}
           </p>
-          <p className="text-gray-400 text-xs">Total</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Total</p>
         </div>
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">{formatXLM(revenue)}</p>
-          <p className="text-gray-400 text-xs">Revenue</p>
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">{formatXLM(revenue)}</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Revenue</p>
         </div>
       </div>
 
-      <div className="text-xs text-gray-400 space-y-1">
+      <div className="space-y-1 text-xs text-zinc-500 dark:text-gray-400">
         <p>Start: {formatDate(event.start_date)}</p>
         <p>End: {formatDate(event.end_date)}</p>
         <p>Price: {formatXLM(event.ticket_price)}</p>
@@ -261,7 +261,7 @@ function EventCard({
       <div className="flex flex-wrap gap-2">
         <button
           onClick={() => onViewAttendees(event.id)}
-          className="text-xs px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition"
+          className="rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
         >
           Attendees
         </button>
@@ -269,7 +269,7 @@ function EventCard({
           <>
             <button
               onClick={() => onUpdate(event)}
-              className="text-xs px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition"
+              className="rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
             >
               Edit
             </button>
@@ -349,10 +349,10 @@ export default function DashboardPage() {
 
   if (!isConnected) {
     return (
-      <div className="min-h-screen bg-[#18181B] flex items-center justify-center text-white">
+      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
         <div className="text-center space-y-4">
-          <h1 className="text-2xl font-bold">Organizer Dashboard</h1>
-          <p className="text-gray-400">Connect your wallet to manage your events.</p>
+          <h1 className="text-2xl font-bold text-zinc-950 dark:text-white">Organizer Dashboard</h1>
+          <p className="text-zinc-500 dark:text-gray-400">Connect your wallet to manage your events.</p>
           <button
             onClick={() => {
               if (!isInstalled) {
@@ -371,7 +371,7 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       {modal.type === "attendees" && (
         <AttendeesModal
           eventId={modal.eventId}
@@ -386,12 +386,12 @@ export default function DashboardPage() {
         />
       )}
 
-      <div className="max-w-5xl mx-auto px-4 py-10 space-y-8">
+      <div className="mx-auto max-w-5xl space-y-8 px-4 py-10">
         {/* Header */}
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold">Organizer Dashboard</h1>
-            <p className="text-gray-400 text-sm mt-1 font-mono">
+            <h1 className="text-2xl font-bold text-zinc-950 dark:text-white">Organizer Dashboard</h1>
+            <p className="mt-1 text-sm font-mono text-zinc-500 dark:text-gray-400">
               {address?.substring(0, 6)}…{address?.slice(-4)}
             </p>
           </div>
@@ -430,10 +430,10 @@ export default function DashboardPage() {
             ].map(({ label, value }) => (
               <div
                 key={label}
-                className="bg-[#27272A] rounded-xl p-4 text-center border border-white/5"
+                className="rounded-xl border border-zinc-200 bg-white p-4 text-center shadow-lg shadow-zinc-900/5 dark:border-white/5 dark:bg-[#27272A] dark:shadow-none"
               >
-                <p className="text-white font-bold text-xl">{value}</p>
-                <p className="text-gray-400 text-xs mt-1">{label}</p>
+                <p className="text-xl font-bold text-zinc-950 dark:text-white">{value}</p>
+                <p className="mt-1 text-xs text-zinc-500 dark:text-gray-400">{label}</p>
               </div>
             ))}
           </div>
@@ -442,11 +442,10 @@ export default function DashboardPage() {
         {/* Feedback */}
         {actionMsg && (
           <div
-            className={`px-4 py-3 rounded-lg text-sm ${
-              actionMsg.startsWith("Error")
-                ? "bg-red-500/10 text-red-300"
-                : "bg-green-500/10 text-green-300"
-            }`}
+            className={`px-4 py-3 rounded-lg text-sm ${actionMsg.startsWith("Error")
+                ? "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-300"
+                : "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-300"
+              }`}
           >
             {actionMsg}
             <button
@@ -460,12 +459,12 @@ export default function DashboardPage() {
 
         {/* Events list */}
         {loading ? (
-          <p className="text-gray-400 text-center py-12">Loading events…</p>
+          <p className="py-12 text-center text-zinc-500 dark:text-gray-400">Loading events…</p>
         ) : error ? (
           <p className="text-red-400 text-center py-12">{error}</p>
         ) : myEvents.length === 0 ? (
           <div className="text-center py-16 space-y-3">
-            <p className="text-gray-400">You haven&apos;t created any events yet.</p>
+            <p className="text-zinc-500 dark:text-gray-400">You haven&apos;t created any events yet.</p>
             <Link
               href="/create-event"
               className="inline-block bg-[#FF5722] hover:bg-[#F4511E] text-white px-5 py-2 rounded-lg font-bold text-sm transition"
diff --git a/soroban-client/app/[locale]/events/page.tsx b/soroban-client/app/[locale]/events/page.tsx
index 76d50ab2..a98949c9 100644
--- a/soroban-client/app/[locale]/events/page.tsx
+++ b/soroban-client/app/[locale]/events/page.tsx
@@ -4,17 +4,17 @@ import Header from "@/components/Header";
 
 export default function EventsPage() {
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <AnalyticsPageView page="events" />
       <Header />
 
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-8">
-          <p className="text-sm uppercase tracking-[0.4em] text-sky-200/80">Events</p>
-          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] dark:shadow-none">
+          <p className="text-sm uppercase tracking-[0.4em] text-sky-700 dark:text-sky-200/80">Events</p>
+          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight text-zinc-950 dark:text-white sm:text-5xl">
             Buy multiple tickets in a single flow
           </h1>
-          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-300">
+          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
             Quantity selection now supports group purchases, discounted batch pricing,
             and wallet-connected checkout for on-chain ticket reservations.
           </p>
diff --git a/soroban-client/app/[locale]/layout.tsx b/soroban-client/app/[locale]/layout.tsx
index 967e2c3e..5216e43a 100644
--- a/soroban-client/app/[locale]/layout.tsx
+++ b/soroban-client/app/[locale]/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "../globals.css";
 import Footer from "@/components/Footer";
+import { ThemeProvider } from "@/contexts/ThemeContext";
 import { WalletProvider } from "@/contexts/WalletContext";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
@@ -48,6 +49,19 @@ export const metadata: Metadata = {
 
 const RTL_LOCALES = ["ar"];
 
+const THEME_INIT_SCRIPT = `
+(() => {
+  const storageKey = "crowdpass-theme";
+  const storedTheme = window.localStorage.getItem(storageKey);
+  const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  const theme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : systemTheme;
+  const root = document.documentElement;
+
+  root.classList.toggle("dark", theme === "dark");
+  root.style.colorScheme = theme;
+})();
+`;
+
 export default async function LocaleLayout({
   children,
   params,
@@ -65,14 +79,19 @@ export default async function LocaleLayout({
   const dir = RTL_LOCALES.includes(locale) ? "rtl" : "ltr";
 
   return (
-    <html lang={locale} dir={dir}>
+    <html lang={locale} dir={dir} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+      </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <NextIntlClientProvider messages={messages}>
-          <WalletProvider>
-            {children}
-            <Footer />
-          </WalletProvider>
-        </NextIntlClientProvider>
+        <ThemeProvider>
+          <NextIntlClientProvider messages={messages}>
+            <WalletProvider>
+              {children}
+              <Footer />
+            </WalletProvider>
+          </NextIntlClientProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/soroban-client/app/[locale]/page.tsx b/soroban-client/app/[locale]/page.tsx
index d4d38b2f..c21a4234 100644
--- a/soroban-client/app/[locale]/page.tsx
+++ b/soroban-client/app/[locale]/page.tsx
@@ -8,7 +8,7 @@ import AnalyticsPageView from "../components/AnalyticsPageView";
 
 export default function Home() {
   return (
-    <div className="bg-[#18181B] min-h-screen text-white font-sans selection:bg-[#FF5722] selection:text-white flex flex-col">
+    <div className="flex min-h-screen flex-col bg-background font-sans text-foreground selection:bg-[#FF5722] selection:text-white">
       <AnalyticsPageView page="home" />
       <Header />
       <main className="grow flex flex-col">
diff --git a/soroban-client/app/analytics/page.tsx b/soroban-client/app/analytics/page.tsx
index 7c2dc019..c64f5152 100644
--- a/soroban-client/app/analytics/page.tsx
+++ b/soroban-client/app/analytics/page.tsx
@@ -5,19 +5,19 @@ import Header from "@/components/Header";
 
 export default function AnalyticsPage() {
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <AnalyticsPageView page="analytics" />
       <Header />
 
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(255,87,34,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-8">
-          <p className="text-sm uppercase tracking-[0.4em] text-orange-200/70">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(255,87,34,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] dark:shadow-none">
+          <p className="text-sm uppercase tracking-[0.4em] text-orange-700 dark:text-orange-200/70">
             Analytics
           </p>
-          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
+          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight text-zinc-950 dark:text-white sm:text-5xl">
             Organizer and platform insights in one dashboard
           </h1>
-          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-300">
+          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
             Track page views, wallet connections, batch ticket purchases, conversion
             trends, and revenue signals without leaving the CrowdPass interface.
           </p>
diff --git a/soroban-client/app/create-event/page.tsx b/soroban-client/app/create-event/page.tsx
index 87035042..46135e21 100644
--- a/soroban-client/app/create-event/page.tsx
+++ b/soroban-client/app/create-event/page.tsx
@@ -133,25 +133,25 @@ export default function CreateEventPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#18181B] text-white selection:bg-[#FF5722] selection:text-white">
+    <div className="min-h-screen bg-background text-foreground selection:bg-[#FF5722] selection:text-white">
       <AnalyticsPageView page="create-event" />
       <Header />
 
       <main className="mx-auto max-w-3xl px-4 pb-20 pt-36 sm:px-6">
-        <div className="rounded-[32px] border border-white/10 bg-white/5 p-8 shadow-xl shadow-black/20">
-          <h1 className="mb-2 text-3xl font-bold">Create Event</h1>
-          <p className="mb-6 text-zinc-300">
+        <div className="rounded-[32px] border border-zinc-200 bg-white p-8 text-zinc-900 shadow-xl shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:text-white dark:shadow-black/20">
+          <h1 className="mb-2 text-3xl font-bold text-zinc-950 dark:text-white">Create Event</h1>
+          <p className="mb-6 text-zinc-600 dark:text-zinc-300">
             Launch a new CrowdPass experience with on-chain pricing, inventory,
             and organizer ownership.
           </p>
 
           {successMsg && (
-            <div className="mb-4 rounded-2xl bg-green-500/15 p-3 text-green-200">
+            <div className="mb-4 rounded-2xl bg-green-50 p-3 text-green-700 dark:bg-green-500/15 dark:text-green-200">
               {successMsg}
             </div>
           )}
           {errorMsg && (
-            <div className="mb-4 rounded-2xl bg-red-500/15 p-3 text-red-200">
+            <div className="mb-4 rounded-2xl bg-red-50 p-3 text-red-700 dark:bg-red-500/15 dark:text-red-200">
               {errorMsg}
             </div>
           )}
@@ -159,14 +159,14 @@ export default function CreateEventPage() {
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div className="md:col-span-2">
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Event Name
                 </label>
                 <input
                   type="text"
                   placeholder="e.g., Stellar DevCon 2026"
                   {...register("theme")}
-                  className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder-gray-500 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
                 {errors.theme && (
                   <p className="mt-1.5 text-sm text-red-400">
@@ -176,25 +176,25 @@ export default function CreateEventPage() {
               </div>
 
               <div className="md:col-span-2">
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Description
                 </label>
                 <textarea
                   {...register("description")}
                   placeholder="Tell your audience about the event..."
                   rows={4}
-                  className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder-gray-500 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
               </div>
 
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Start Date &amp; Time
                 </label>
                 <input
                   type="datetime-local"
                   {...register("startDate")}
-                  className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white transition [color-scheme:dark] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 transition [color-scheme:light] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:[color-scheme:dark]"
                 />
                 {errors.startDate && (
                   <p className="mt-1.5 text-sm text-red-400">
@@ -204,13 +204,13 @@ export default function CreateEventPage() {
               </div>
 
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   End Date &amp; Time
                 </label>
                 <input
                   type="datetime-local"
                   {...register("endDate")}
-                  className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white transition [color-scheme:dark] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 transition [color-scheme:light] focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:[color-scheme:dark]"
                 />
                 {errors.endDate && (
                   <p className="mt-1.5 text-sm text-red-400">
@@ -220,11 +220,11 @@ export default function CreateEventPage() {
               </div>
 
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Ticket Price (XLM)
                 </label>
                 <div className="relative">
-                  <span className="absolute left-4 top-1/2 -translate-y-1/2 font-medium text-gray-400">
+                  <span className="absolute left-4 top-1/2 -translate-y-1/2 font-medium text-zinc-500 dark:text-gray-400">
                     XLM
                   </span>
                   <input
@@ -232,7 +232,7 @@ export default function CreateEventPage() {
                     step="0.0000001"
                     placeholder="0.00"
                     {...register("price")}
-                    className="w-full rounded-xl border border-white/10 bg-black/20 py-3 pl-12 pr-4 text-white placeholder-gray-500 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                    className="w-full rounded-xl border border-zinc-300 bg-white py-3 pl-12 pr-4 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                   />
                 </div>
                 {errors.price && (
@@ -243,14 +243,14 @@ export default function CreateEventPage() {
               </div>
 
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-300">
+                <label className="mb-2 block text-sm font-medium text-zinc-700 dark:text-gray-300">
                   Total Tickets
                 </label>
                 <input
                   type="number"
                   placeholder="e.g., 500"
                   {...register("tickets")}
-                  className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder-gray-500 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50"
+                  className="w-full rounded-xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder-zinc-400 transition focus:border-[#FF5722] focus:outline-none focus:ring-2 focus:ring-[#FF5722]/50 dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder-gray-500"
                 />
                 {errors.tickets && (
                   <p className="mt-1.5 text-sm text-red-400">
diff --git a/soroban-client/app/dashboard/page.tsx b/soroban-client/app/dashboard/page.tsx
index daefa3e9..931b1fff 100644
--- a/soroban-client/app/dashboard/page.tsx
+++ b/soroban-client/app/dashboard/page.tsx
@@ -66,24 +66,24 @@ function AttendeesModal({
   }, [eventId, readerAccount]);
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#27272A] rounded-xl w-full max-w-md p-6 space-y-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border border-zinc-200 bg-white p-6 text-zinc-900 dark:border-white/10 dark:bg-[#27272A] dark:text-white">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-bold text-white">Attendees</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-white">
+          <h2 className="text-lg font-bold text-zinc-950 dark:text-white">Attendees</h2>
+          <button onClick={onClose} className="text-zinc-500 transition hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white">
             ✕
           </button>
         </div>
         {loading ? (
-          <p className="text-gray-400 text-sm">Loading…</p>
+          <p className="text-sm text-zinc-500 dark:text-gray-400">Loading…</p>
         ) : attendees.length === 0 ? (
-          <p className="text-gray-400 text-sm">No attendees yet.</p>
+          <p className="text-sm text-zinc-500 dark:text-gray-400">No attendees yet.</p>
         ) : (
           <ul className="space-y-2 max-h-72 overflow-y-auto">
             {attendees.map((addr) => (
               <li
                 key={addr}
-                className="font-mono text-xs text-gray-300 bg-white/5 px-3 py-2 rounded-lg break-all"
+                className="break-all rounded-lg bg-zinc-100 px-3 py-2 font-mono text-xs text-zinc-700 dark:bg-white/5 dark:text-gray-300"
               >
                 {addr}
               </li>
@@ -147,32 +147,32 @@ function UpdateEventModal({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#27272A] rounded-xl w-full max-w-md p-6 space-y-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border border-zinc-200 bg-white p-6 text-zinc-900 dark:border-white/10 dark:bg-[#27272A] dark:text-white">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-bold text-white">Update Event</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-white">
+          <h2 className="text-lg font-bold text-zinc-950 dark:text-white">Update Event</h2>
+          <button onClick={onClose} className="text-zinc-500 transition hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white">
             ✕
           </button>
         </div>
         {error && (
-          <p className="text-red-400 text-sm bg-red-500/10 px-3 py-2 rounded-lg">
+          <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-500/10 dark:text-red-400">
             {error}
           </p>
         )}
         <form onSubmit={handleSubmit} className="space-y-3">
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Event Name
             </label>
             <input
               value={theme}
               onChange={(e) => setTheme(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Ticket Price (XLM)
             </label>
             <input
@@ -181,11 +181,11 @@ function UpdateEventModal({
               min="0"
               value={price}
               onChange={(e) => setPrice(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <div>
-            <label className="block text-sm text-gray-400 mb-1">
+            <label className="mb-1 block text-sm text-zinc-500 dark:text-gray-400">
               Total Tickets
             </label>
             <input
@@ -193,7 +193,7 @@ function UpdateEventModal({
               min="1"
               value={totalTickets}
               onChange={(e) => setTotalTickets(e.target.value)}
-              className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-[#FF5722]"
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white"
             />
           </div>
           <button
@@ -227,36 +227,36 @@ function EventCard({
   const revenue = event.tickets_sold * event.ticket_price;
 
   return (
-    <div className="bg-[#27272A] rounded-xl p-5 space-y-4 border border-white/5">
+    <div className="space-y-4 rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 shadow-lg shadow-zinc-900/5 dark:border-white/5 dark:bg-[#27272A] dark:text-white dark:shadow-none">
       <div className="flex items-start justify-between gap-2">
         <div>
-          <h3 className="text-white font-semibold text-base">{event.theme}</h3>
-          <p className="text-gray-400 text-xs mt-0.5">{event.event_type}</p>
+          <h3 className="text-base font-semibold text-zinc-950 dark:text-white">{event.theme}</h3>
+          <p className="mt-0.5 text-xs text-zinc-500 dark:text-gray-400">{event.event_type}</p>
         </div>
         <EventStatusBadge event={event} />
       </div>
 
       {/* Stats */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">
             {event.tickets_sold.toString()}
           </p>
-          <p className="text-gray-400 text-xs">Sold</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Sold</p>
         </div>
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">
             {event.total_tickets.toString()}
           </p>
-          <p className="text-gray-400 text-xs">Total</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Total</p>
         </div>
-        <div className="bg-white/5 rounded-lg p-3 text-center">
-          <p className="text-white font-bold text-lg">{formatXLM(revenue)}</p>
-          <p className="text-gray-400 text-xs">Revenue</p>
+        <div className="rounded-lg bg-zinc-100 p-3 text-center dark:bg-white/5">
+          <p className="text-lg font-bold text-zinc-950 dark:text-white">{formatXLM(revenue)}</p>
+          <p className="text-xs text-zinc-500 dark:text-gray-400">Revenue</p>
         </div>
       </div>
 
-      <div className="text-xs text-gray-400 space-y-1">
+      <div className="space-y-1 text-xs text-zinc-500 dark:text-gray-400">
         <p>Start: {formatDate(event.start_date)}</p>
         <p>End: {formatDate(event.end_date)}</p>
         <p>Price: {formatXLM(event.ticket_price)}</p>
@@ -266,7 +266,7 @@ function EventCard({
       <div className="flex flex-wrap gap-2">
         <button
           onClick={() => onViewAttendees(event.id)}
-          className="text-xs px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition"
+          className="rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
         >
           Attendees
         </button>
@@ -274,7 +274,7 @@ function EventCard({
           <>
             <button
               onClick={() => onUpdate(event)}
-              className="text-xs px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition"
+              className="rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
             >
               Edit
             </button>
@@ -356,10 +356,10 @@ export default function DashboardPage() {
 
   if (!isConnected) {
     return (
-      <div className="min-h-screen bg-[#18181B] flex items-center justify-center text-white">
+      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
         <div className="text-center space-y-4">
-          <h1 className="text-2xl font-bold">Organizer Dashboard</h1>
-          <p className="text-gray-400">Connect your wallet to manage your events.</p>
+          <h1 className="text-2xl font-bold text-zinc-950 dark:text-white">Organizer Dashboard</h1>
+          <p className="text-zinc-500 dark:text-gray-400">Connect your wallet to manage your events.</p>
           <button
             onClick={() => {
               if (!isInstalled) {
@@ -378,7 +378,7 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       {modal.type === "attendees" && address && (
         <AttendeesModal
           eventId={modal.eventId}
@@ -394,12 +394,12 @@ export default function DashboardPage() {
         />
       )}
 
-      <div className="max-w-5xl mx-auto px-4 py-10 space-y-8">
+      <div className="mx-auto max-w-5xl space-y-8 px-4 py-10">
         {/* Header */}
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold">Organizer Dashboard</h1>
-            <p className="text-gray-400 text-sm mt-1 font-mono">
+            <h1 className="text-2xl font-bold text-zinc-950 dark:text-white">Organizer Dashboard</h1>
+            <p className="mt-1 text-sm font-mono text-zinc-500 dark:text-gray-400">
               {address?.substring(0, 6)}…{address?.slice(-4)}
             </p>
           </div>
@@ -438,10 +438,10 @@ export default function DashboardPage() {
             ].map(({ label, value }) => (
               <div
                 key={label}
-                className="bg-[#27272A] rounded-xl p-4 text-center border border-white/5"
+                className="rounded-xl border border-zinc-200 bg-white p-4 text-center shadow-lg shadow-zinc-900/5 dark:border-white/5 dark:bg-[#27272A] dark:shadow-none"
               >
-                <p className="text-white font-bold text-xl">{value}</p>
-                <p className="text-gray-400 text-xs mt-1">{label}</p>
+                <p className="text-xl font-bold text-zinc-950 dark:text-white">{value}</p>
+                <p className="mt-1 text-xs text-zinc-500 dark:text-gray-400">{label}</p>
               </div>
             ))}
           </div>
@@ -450,11 +450,10 @@ export default function DashboardPage() {
         {/* Feedback */}
         {actionMsg && (
           <div
-            className={`px-4 py-3 rounded-lg text-sm ${
-              actionMsg.startsWith("Error")
-                ? "bg-red-500/10 text-red-300"
-                : "bg-green-500/10 text-green-300"
-            }`}
+            className={`px-4 py-3 rounded-lg text-sm ${actionMsg.startsWith("Error")
+                ? "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-300"
+                : "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-300"
+              }`}
           >
             {actionMsg}
             <button
@@ -468,12 +467,12 @@ export default function DashboardPage() {
 
         {/* Events list */}
         {loading ? (
-          <p className="text-gray-400 text-center py-12">Loading events…</p>
+          <p className="py-12 text-center text-zinc-500 dark:text-gray-400">Loading events…</p>
         ) : error ? (
           <p className="text-red-400 text-center py-12">{error}</p>
         ) : myEvents.length === 0 ? (
           <div className="text-center py-16 space-y-3">
-            <p className="text-gray-400">You haven&apos;t created any events yet.</p>
+            <p className="text-zinc-500 dark:text-gray-400">You haven&apos;t created any events yet.</p>
             <Link
               href="/create-event"
               className="inline-block bg-[#FF5722] hover:bg-[#F4511E] text-white px-5 py-2 rounded-lg font-bold text-sm transition"
diff --git a/soroban-client/app/events/page.tsx b/soroban-client/app/events/page.tsx
index aae21049..f0ac131f 100644
--- a/soroban-client/app/events/page.tsx
+++ b/soroban-client/app/events/page.tsx
@@ -4,21 +4,21 @@ import Header from "@/components/Header";
 
 export default function EventsPage() {
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <AnalyticsPageView page="events" />
       <Header />
 
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-8">
-          <p className="text-sm uppercase tracking-[0.4em] text-sky-200/80">Browse</p>
-          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] dark:shadow-none">
+          <p className="text-sm uppercase tracking-[0.4em] text-sky-700 dark:text-sky-200/80">Browse</p>
+          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight text-zinc-950 dark:text-white sm:text-5xl">
             Discover events and buy tickets on-chain
           </h1>
-          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-300">
+          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
             Search and filter live listings from the EventManager contract, review dates
             and inventory, then confirm purchases with your wallet (Freighter by default).
             The same experience is available at{" "}
-            <span className="text-zinc-200">/browse</span>.
+            <span className="text-zinc-700 dark:text-zinc-200">/browse</span>.
           </p>
         </section>
 
diff --git a/soroban-client/app/globals.css b/soroban-client/app/globals.css
index 0dfdf20f..4f6b5f13 100644
--- a/soroban-client/app/globals.css
+++ b/soroban-client/app/globals.css
@@ -1,8 +1,14 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
-  --background: #18181B;
-  /* Dark Zinc */
+  --background: #f5f7fb;
+  --foreground: #18181b;
+}
+
+.dark {
+  --background: #18181b;
   --foreground: #ffffff;
 }
 
@@ -29,8 +35,13 @@
   min-width: 100%;
 }
 
+html {
+  background: var(--background);
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
\ No newline at end of file
diff --git a/soroban-client/app/marketplace/page.tsx b/soroban-client/app/marketplace/page.tsx
index 35713e05..e15801b4 100644
--- a/soroban-client/app/marketplace/page.tsx
+++ b/soroban-client/app/marketplace/page.tsx
@@ -4,17 +4,17 @@ import MarketplaceCatalog from "@/components/Marketplace/MarketplaceCatalog";
 
 export default function MarketplacePage() {
   return (
-    <div className="min-h-screen bg-[#18181B] text-white">
+    <div className="min-h-screen bg-background text-foreground">
       <AnalyticsPageView page="marketplace" />
       <Header />
 
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-8">
-          <p className="text-sm uppercase tracking-[0.4em] text-sky-200/80">Marketplace</p>
-          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] dark:shadow-none">
+          <p className="text-sm uppercase tracking-[0.4em] text-sky-700 dark:text-sky-200/80">Marketplace</p>
+          <h1 className="mt-3 max-w-3xl text-4xl font-semibold leading-tight text-zinc-950 dark:text-white sm:text-5xl">
             Buy and sell tickets peer-to-peer
           </h1>
-          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-300">
+          <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-600 dark:text-zinc-300">
             List your unused tickets for resale or discover great deals from other fans.
             All transfers are secured by smart contracts with built-in price caps to prevent scalping.
           </p>
diff --git a/soroban-client/app/my-tickets/page.tsx b/soroban-client/app/my-tickets/page.tsx
index 0e336847..e03a134e 100644
--- a/soroban-client/app/my-tickets/page.tsx
+++ b/soroban-client/app/my-tickets/page.tsx
@@ -36,21 +36,21 @@ export default function MyTicketsPage() {
 
   if (!isConnected) {
     return (
-      <div className="min-h-screen bg-[#18181B] text-zinc-100 selection:bg-sky-500/30">
+      <div className="min-h-screen bg-background text-foreground selection:bg-sky-500/30">
         <Header />
         <main className="mx-auto flex w-full max-w-7xl flex-col items-center justify-center h-screen px-4">
           <div className="flex flex-col items-center text-center space-y-6 max-w-lg">
-             <div className="p-4 bg-sky-500/10 rounded-3xl border border-sky-500/20 text-sky-400">
-               <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-             </div>
-             <h1 className="text-3xl font-bold tracking-tight sm:text-4xl text-white">Your Ticket Wallet is Private</h1>
-             <p className="text-zinc-400 text-lg">Connect your wallet to see all your event tickets and access your entry codes.</p>
-             <button
-                onClick={() => isInstalled ? connect() : alert("Please install Freighter.")}
-                className="rounded-2xl bg-sky-500 px-8 py-4 font-bold text-white shadow-lg transition hover:bg-sky-400 active:scale-95"
-              >
-                Connect Wallet
-              </button>
+            <div className="p-4 bg-sky-500/10 rounded-3xl border border-sky-500/20 text-sky-400">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
+            </div>
+            <h1 className="text-3xl font-bold tracking-tight text-zinc-950 dark:text-white sm:text-4xl">Your Ticket Wallet is Private</h1>
+            <p className="text-lg text-zinc-500 dark:text-zinc-400">Connect your wallet to see all your event tickets and access your entry codes.</p>
+            <button
+              onClick={() => isInstalled ? connect() : alert("Please install Freighter.")}
+              className="rounded-2xl bg-sky-500 px-8 py-4 font-bold text-white shadow-lg transition hover:bg-sky-400 active:scale-95"
+            >
+              Connect Wallet
+            </button>
           </div>
         </main>
       </div>
@@ -58,23 +58,23 @@ export default function MyTicketsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#18181B] text-zinc-100 selection:bg-sky-500/30">
+    <div className="min-h-screen bg-background text-foreground selection:bg-sky-500/30">
       <Header />
 
       <main className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 pb-20 pt-36 sm:px-6">
-        <section className="rounded-[32px] border border-white/10 bg-zinc-900/50 p-8 shadow-inner ring-1 ring-white/5">
+        <section className="rounded-[32px] border border-zinc-200 bg-white/90 p-8 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-zinc-900/50 dark:ring-1 dark:ring-white/5 dark:shadow-none">
           <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
-             <div className="space-y-3">
-                <p className="text-sm uppercase tracking-[0.4em] text-sky-400 font-bold">My Wallet</p>
-                <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl">Your Field Access</h1>
-                <p className="text-zinc-400 max-w-xl">
-                  Manage your on-chain event tickets, view details, and generate verification QR codes for entry.
-                </p>
-             </div>
-             <div className="flex flex-col items-end gap-2 bg-white/5 rounded-3xl p-6 border border-white/10">
-                <span className="text-xs text-zinc-500 uppercase font-mono tracking-widest">Connected As</span>
-                <span className="text-sky-300 font-mono text-sm tracking-tight">{address?.substring(0, 10)}...{address?.slice(-10)}</span>
-             </div>
+            <div className="space-y-3">
+              <p className="text-sm uppercase tracking-[0.4em] text-sky-400 font-bold">My Wallet</p>
+              <h1 className="text-4xl font-bold tracking-tight text-zinc-950 dark:text-white sm:text-5xl">Your Field Access</h1>
+              <p className="max-w-xl text-zinc-500 dark:text-zinc-400">
+                Manage your on-chain event tickets, view details, and generate verification QR codes for entry.
+              </p>
+            </div>
+            <div className="flex flex-col items-end gap-2 rounded-3xl border border-zinc-200 bg-zinc-50 p-6 dark:border-white/10 dark:bg-white/5">
+              <span className="text-xs text-zinc-500 uppercase font-mono tracking-widest">Connected As</span>
+              <span className="text-sky-300 font-mono text-sm tracking-tight">{address?.substring(0, 10)}...{address?.slice(-10)}</span>
+            </div>
           </div>
         </section>
 
@@ -84,54 +84,54 @@ export default function MyTicketsPage() {
           </div>
         ) : tickets.length === 0 ? (
           <div className="text-center py-24 space-y-6">
-             <div className="bg-white/5 w-20 h-20 rounded-full flex items-center justify-center mx-auto text-zinc-600">
-               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20"/><path d="m4.93 4.93 14.14 14.14"/><path d="m4.93 19.07 14.14-14.14"/></svg>
-             </div>
-             <p className="text-zinc-400 text-xl font-medium italic">Your ticket history is currently empty.</p>
-             <Link
-                href="/events"
-                className="inline-block rounded-2xl border border-zinc-700 font-bold px-8 py-3 text-zinc-300 hover:bg-zinc-800 transition"
-              >
-                Browse Events
-              </Link>
+            <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 dark:bg-white/5 dark:text-zinc-600">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20" /><path d="m4.93 4.93 14.14 14.14" /><path d="m4.93 19.07 14.14-14.14" /></svg>
+            </div>
+            <p className="text-xl font-medium italic text-zinc-500 dark:text-zinc-400">Your ticket history is currently empty.</p>
+            <Link
+              href="/events"
+              className="inline-block rounded-2xl border border-zinc-300 px-8 py-3 font-bold text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            >
+              Browse Events
+            </Link>
           </div>
         ) : (
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {tickets.map((ticket) => (
               <div
                 key={ticket.id}
-                className="group relative flex flex-col overflow-hidden rounded-[32px] border border-white/10 bg-zinc-900/40 p-1 shadow-md transition-all hover:border-sky-500/40 hover:bg-zinc-900/80"
+                className="group relative flex flex-col overflow-hidden rounded-[32px] border border-zinc-200 bg-white p-1 shadow-md shadow-zinc-900/5 transition-all hover:border-sky-500/40 hover:bg-zinc-50 dark:border-white/10 dark:bg-zinc-900/40 dark:shadow-black/20 dark:hover:bg-zinc-900/80"
               >
                 <div className="absolute inset-0 bg-gradient-to-b from-sky-500/5 via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />
-                
+
                 <div className="flex flex-col h-full space-y-4 p-7 z-10">
-                   <div className="flex items-start justify-between">
-                      <div className="p-3 bg-zinc-800 rounded-2xl group-hover:bg-sky-500/10 transition duration-500">
-                         <svg width="24" height="24" className="text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/></svg>
-                      </div>
-                      <span className="text-[10px] uppercase font-bold tracking-widest text-sky-300 bg-sky-500/10 px-2 py-1 rounded-full">ACTIVE</span>
-                   </div>
+                  <div className="flex items-start justify-between">
+                    <div className="rounded-2xl bg-zinc-100 p-3 transition duration-500 group-hover:bg-sky-500/10 dark:bg-zinc-800">
+                      <svg width="24" height="24" className="text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" /><path d="M13 5v2" /><path d="M13 17v2" /><path d="M13 11v2" /></svg>
+                    </div>
+                    <span className="text-[10px] uppercase font-bold tracking-widest text-sky-300 bg-sky-500/10 px-2 py-1 rounded-full">ACTIVE</span>
+                  </div>
 
-                   <div className="space-y-1">
-                      <h3 className="text-xl font-bold text-white tracking-tight">{ticket.theme}</h3>
-                      <p className="text-sm text-zinc-500 font-medium">#{ticket.id} • {ticket.event_type}</p>
-                   </div>
+                  <div className="space-y-1">
+                    <h3 className="text-xl font-bold tracking-tight text-zinc-950 dark:text-white">{ticket.theme}</h3>
+                    <p className="text-sm font-medium text-zinc-500">#{ticket.id} • {ticket.event_type}</p>
+                  </div>
 
-                   <div className="space-y-3 pt-2 text-sm text-zinc-400 border-t border-white/5">
-                      <div className="flex items-center gap-2">
-                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-                         {formatDate(ticket.start_date)}
-                      </div>
-                   </div>
+                  <div className="space-y-3 border-t border-zinc-200 pt-2 text-sm text-zinc-500 dark:border-white/5 dark:text-zinc-400">
+                    <div className="flex items-center gap-2">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>
+                      {formatDate(ticket.start_date)}
+                    </div>
+                  </div>
 
-                   <div className="pt-4 mt-auto">
-                      <button
-                        onClick={() => setSelectedTicket(ticket)}
-                        className="w-full rounded-2xl bg-zinc-800 py-4 font-bold text-white transition hover:bg-sky-500 hover:shadow-lg hover:shadow-sky-500/20"
-                      >
-                        View Ticket QR
-                      </button>
-                   </div>
+                  <div className="pt-4 mt-auto">
+                    <button
+                      onClick={() => setSelectedTicket(ticket)}
+                      className="w-full rounded-2xl bg-zinc-900 py-4 font-bold text-white transition hover:bg-sky-500 hover:shadow-lg hover:shadow-sky-500/20 dark:bg-zinc-800"
+                    >
+                      View Ticket QR
+                    </button>
+                  </div>
                 </div>
               </div>
             ))}
diff --git a/soroban-client/app/verifier/page.tsx b/soroban-client/app/verifier/page.tsx
index 1bf168bd..6a8a4ea4 100644
--- a/soroban-client/app/verifier/page.tsx
+++ b/soroban-client/app/verifier/page.tsx
@@ -111,110 +111,107 @@ export default function VerifierPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#09090B] text-zinc-100">
+    <div className="min-h-screen bg-background text-foreground">
       <Header />
 
       <main className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 pb-20 pt-36 sm:px-6">
         <div className="text-center space-y-4">
-           <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-900 border border-zinc-800 text-zinc-400 text-sm font-medium">
-             <Camera size={16} /> Organizer Mode
-           </div>
-           <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">Ticket Verifier</h1>
-           <p className="text-zinc-500 max-w-xl mx-auto">
-             Scan participant QR codes to verify ticket ownership and authenticity via cryptographic signatures and on-chain records.
-           </p>
+          <div className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-600 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+            <Camera size={16} /> Organizer Mode
+          </div>
+          <h1 className="text-4xl font-extrabold tracking-tight text-zinc-950 dark:text-white sm:text-5xl">Ticket Verifier</h1>
+          <p className="mx-auto max-w-xl text-zinc-500">
+            Scan participant QR codes to verify ticket ownership and authenticity via cryptographic signatures and on-chain records.
+          </p>
         </div>
 
         <div className="grid gap-8 lg:grid-cols-2">
-           {/* Scanner Section */}
-           <div className="relative overflow-hidden rounded-[40px] border border-white/10 bg-zinc-900/50 p-4 shadow-2xl shadow-sky-500/5 ring-1 ring-white/5">
-              <div id="reader" className="overflow-hidden rounded-[32px] bg-black"></div>
-              {verificationStatus !== "idle" && (
-                <div className="mt-6 flex justify-center">
-                   <button
-                    onClick={resetScanner}
-                    className="flex items-center gap-2 rounded-2xl bg-white/5 border border-white/10 px-6 py-3 font-bold text-white hover:bg-white/10 transition"
-                   >
-                     Scan Next Ticket
-                   </button>
+          {/* Scanner Section */}
+          <div className="relative overflow-hidden rounded-[40px] border border-zinc-200 bg-white p-4 shadow-2xl shadow-zinc-900/10 dark:border-white/10 dark:bg-zinc-900/50 dark:shadow-sky-500/5 dark:ring-1 dark:ring-white/5">
+            <div id="reader" className="overflow-hidden rounded-[32px] bg-black"></div>
+            {verificationStatus !== "idle" && (
+              <div className="mt-6 flex justify-center">
+                <button
+                  onClick={resetScanner}
+                  className="flex items-center gap-2 rounded-2xl border border-zinc-200 bg-white px-6 py-3 font-bold text-zinc-900 transition hover:bg-zinc-100 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
+                >
+                  Scan Next Ticket
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Results Section */}
+          <div className="flex flex-col gap-6">
+            {verificationStatus === "idle" ? (
+              <div className="flex h-full flex-col items-center justify-center space-y-4 rounded-[40px] border border-dashed border-zinc-300 p-12 text-center dark:border-zinc-800">
+                <div className="animate-pulse rounded-full bg-zinc-100 p-6 text-zinc-500 dark:bg-zinc-900 dark:text-zinc-700">
+                  <Camera size={48} />
                 </div>
-              )}
-           </div>
-
-           {/* Results Section */}
-           <div className="flex flex-col gap-6">
-              {verificationStatus === "idle" ? (
-                <div className="flex flex-col items-center justify-center h-full border border-dashed border-zinc-800 rounded-[40px] p-12 text-center space-y-4">
-                   <div className="p-6 bg-zinc-900 rounded-full text-zinc-700 animate-pulse">
-                     <Camera size={48} />
-                   </div>
-                   <p className="text-zinc-600 font-medium italic">Waiting for scan...</p>
-                </div>
-              ) : (
-                <div className={`flex flex-col rounded-[40px] border p-8 space-y-8 h-full transition-colors duration-500 ${
-                  verificationStatus === "valid" ? "bg-emerald-500/5 border-emerald-500/20" :
-                  verificationStatus === "invalid" ? "bg-rose-500/5 border-rose-500/20" :
-                  "bg-zinc-900/50 border-white/10"
+                <p className="font-medium italic text-zinc-500">Waiting for scan...</p>
+              </div>
+            ) : (
+              <div className={`flex flex-col rounded-[40px] border p-8 space-y-8 h-full transition-colors duration-500 ${verificationStatus === "valid" ? "bg-emerald-50 border-emerald-500/20 dark:bg-emerald-500/5" :
+                  verificationStatus === "invalid" ? "bg-rose-50 border-rose-500/20 dark:bg-rose-500/5" :
+                    "bg-white border-zinc-200 dark:bg-zinc-900/50 dark:border-white/10"
                 }`}>
-                   
-                   <div className="flex items-center gap-4">
-                      <div className={`p-4 rounded-3xl ${
-                         verificationStatus === "valid" ? "bg-emerald-500/20 text-emerald-400" :
-                         verificationStatus === "invalid" ? "bg-rose-500/20 text-rose-400" :
-                         "bg-white/10 text-white"
+
+                <div className="flex items-center gap-4">
+                  <div className={`p-4 rounded-3xl ${verificationStatus === "valid" ? "bg-emerald-500/20 text-emerald-400" :
+                      verificationStatus === "invalid" ? "bg-rose-500/20 text-rose-400" :
+                        "bg-zinc-100 text-zinc-900 dark:bg-white/10 dark:text-white"
+                    }`}>
+                    {verificationStatus === "verifying" ? <Loader2 className="animate-spin" size={32} /> :
+                      verificationStatus === "valid" ? <ShieldCheck size={32} /> : <ShieldAlert size={32} />}
+                  </div>
+                  <div>
+                    <p className="text-xs uppercase font-bold tracking-[0.2em] text-zinc-500">Verification Status</p>
+                    <h2 className={`text-2xl font-bold ${verificationStatus === "valid" ? "text-emerald-400" :
+                        verificationStatus === "invalid" ? "text-rose-400" :
+                          "text-zinc-950 dark:text-white"
                       }`}>
-                         {verificationStatus === "verifying" ? <Loader2 className="animate-spin" size={32} /> :
-                          verificationStatus === "valid" ? <ShieldCheck size={32} /> : <ShieldAlert size={32} />}
-                      </div>
-                      <div>
-                         <p className="text-xs uppercase font-bold tracking-[0.2em] text-zinc-500">Verification Status</p>
-                         <h2 className={`text-2xl font-bold ${
-                            verificationStatus === "valid" ? "text-emerald-400" :
-                            verificationStatus === "invalid" ? "text-rose-400" :
-                            "text-white"
-                         }`}>
-                            {verificationStatus === "verifying" ? "Analyzing..." :
-                             verificationStatus === "valid" ? "Access Granted" : "Access Denied"}
-                         </h2>
-                      </div>
-                   </div>
-
-                   {errorMsg && (
-                     <div className="p-4 bg-rose-500/10 border border-rose-500/20 rounded-2xl text-rose-400 text-sm font-medium">
-                        {errorMsg}
-                     </div>
-                   )}
-
-                   <div className="space-y-4 pt-4 border-t border-white/5">
-                      <div className="flex items-center gap-4">
-                         <div className="p-2 bg-white/5 rounded-xl text-zinc-500"><User size={20} /></div>
-                         <div className="flex flex-col">
-                            <span className="text-[10px] uppercase font-bold text-zinc-500 tracking-wider">TICKET OWNER</span>
-                            <span className="text-zinc-200 font-mono text-xs break-all">{scanResult?.o}</span>
-                         </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                         <div className="p-2 bg-white/5 rounded-xl text-zinc-500"><Ticket size={20} /></div>
-                         <div className="flex flex-col">
-                            <span className="text-[10px] uppercase font-bold text-zinc-500 tracking-wider">EVENT / TOKEN</span>
-                            <span className="text-zinc-200 font-medium">Event #{scanResult?.e} • Token #{scanResult?.t}</span>
-                         </div>
-                      </div>
-                   </div>
-
-                   <div className="grid grid-cols-2 gap-4 pt-4">
-                      <div className={`p-4 rounded-3xl border ${onChainValid === true ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-zinc-800/50 border-white/5 text-zinc-600"}`}>
-                         <p className="text-[10px] uppercase font-bold mb-1">On-Chain</p>
-                         <p className="font-bold">{onChainValid === true ? "Confirmed" : onChainValid === false ? "Failed" : "Checking..."}</p>
-                      </div>
-                      <div className={`p-4 rounded-3xl border ${scanResult?.sig ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-amber-500/10 border-amber-500/20 text-amber-500"}`}>
-                         <p className="text-[10px] uppercase font-bold mb-1">Signature</p>
-                         <p className="font-bold">{scanResult?.sig ? "Verified" : "Missing"}</p>
-                      </div>
-                   </div>
+                      {verificationStatus === "verifying" ? "Analyzing..." :
+                        verificationStatus === "valid" ? "Access Granted" : "Access Denied"}
+                    </h2>
+                  </div>
+                </div>
+
+                {errorMsg && (
+                  <div className="rounded-2xl border border-rose-500/20 bg-rose-50 p-4 text-sm font-medium text-rose-600 dark:bg-rose-500/10 dark:text-rose-400">
+                    {errorMsg}
+                  </div>
+                )}
+
+                <div className="space-y-4 border-t border-zinc-200 pt-4 dark:border-white/5">
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-xl bg-zinc-100 p-2 text-zinc-500 dark:bg-white/5"><User size={20} /></div>
+                    <div className="flex flex-col">
+                      <span className="text-[10px] uppercase font-bold text-zinc-500 tracking-wider">TICKET OWNER</span>
+                      <span className="font-mono text-xs break-all text-zinc-700 dark:text-zinc-200">{scanResult?.o}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <div className="rounded-xl bg-zinc-100 p-2 text-zinc-500 dark:bg-white/5"><Ticket size={20} /></div>
+                    <div className="flex flex-col">
+                      <span className="text-[10px] uppercase font-bold text-zinc-500 tracking-wider">EVENT / TOKEN</span>
+                      <span className="font-medium text-zinc-700 dark:text-zinc-200">Event #{scanResult?.e} • Token #{scanResult?.t}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4 pt-4">
+                  <div className={`rounded-3xl border p-4 ${onChainValid === true ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-zinc-100 border-zinc-200 text-zinc-600 dark:bg-zinc-800/50 dark:border-white/5"}`}>
+                    <p className="text-[10px] uppercase font-bold mb-1">On-Chain</p>
+                    <p className="font-bold">{onChainValid === true ? "Confirmed" : onChainValid === false ? "Failed" : "Checking..."}</p>
+                  </div>
+                  <div className={`p-4 rounded-3xl border ${scanResult?.sig ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-amber-500/10 border-amber-500/20 text-amber-500"}`}>
+                    <p className="text-[10px] uppercase font-bold mb-1">Signature</p>
+                    <p className="font-bold">{scanResult?.sig ? "Verified" : "Missing"}</p>
+                  </div>
                 </div>
-              )}
-           </div>
+              </div>
+            )}
+          </div>
         </div>
       </main>
     </div>
diff --git a/soroban-client/components/AboutSection.tsx b/soroban-client/components/AboutSection.tsx
index 384fe4a9..47b2c5a3 100644
--- a/soroban-client/components/AboutSection.tsx
+++ b/soroban-client/components/AboutSection.tsx
@@ -5,7 +5,7 @@ export default function AboutSection() {
   const t = useTranslations("about");
 
   return (
-    <section className="w-full py-24 bg-[#18181B] flex items-center justify-center">
+    <section className="flex w-full items-center justify-center bg-background py-24">
       <div className="relative w-full max-w-[1300px] h-[800px] mx-6">
         <div className="absolute inset-0 w-full h-full rounded-[3rem] overflow-hidden grid grid-cols-2 grid-rows-2">
           <div className="relative w-full h-full">
@@ -22,11 +22,11 @@ export default function AboutSection() {
           </div>
         </div>
 
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-[600px] bg-[#525252] rounded-[2rem] p-10 md:p-14 shadow-2xl z-10 flex flex-col justify-center">
-          <h2 className="text-4xl md:text-5xl font-bold text-white mb-8 text-left">
+        <div className="absolute left-1/2 top-1/2 z-10 flex w-[90%] max-w-[600px] -translate-x-1/2 -translate-y-1/2 flex-col justify-center rounded-[2rem] border border-zinc-200/80 bg-white/92 p-10 shadow-2xl shadow-zinc-900/10 md:p-14 dark:border-white/10 dark:bg-[#525252] dark:shadow-black/20">
+          <h2 className="mb-8 text-left text-4xl font-bold text-zinc-950 dark:text-white md:text-5xl">
             {t("title")}
           </h2>
-          <div className="space-y-6 text-gray-100 text-[15px] md:text-base leading-relaxed mb-10 text-left">
+          <div className="mb-10 space-y-6 text-left text-[15px] leading-relaxed text-zinc-600 dark:text-gray-100 md:text-base">
             <p>{t("p1")}</p>
             <p>{t("p2")}</p>
             <p>{t("p3")}</p>
diff --git a/soroban-client/components/AnalyticsDashboard.tsx b/soroban-client/components/AnalyticsDashboard.tsx
index 27f03f50..c9090fa1 100644
--- a/soroban-client/components/AnalyticsDashboard.tsx
+++ b/soroban-client/components/AnalyticsDashboard.tsx
@@ -21,19 +21,19 @@ export default function AnalyticsDashboard() {
     snapshot.pageViewSeries.length > 0
       ? snapshot.pageViewSeries
       : [
-          { name: "home", views: 12 },
-          { name: "events", views: 8 },
-          { name: "analytics", views: 4 },
-        ];
+        { name: "home", views: 12 },
+        { name: "events", views: 8 },
+        { name: "analytics", views: 4 },
+      ];
 
   const eventSeries =
     snapshot.eventSeries.length > 0
       ? snapshot.eventSeries
       : [
-          { name: "Lagos Builders", sold: 14 },
-          { name: "Soroban Summit", sold: 9 },
-          { name: "Campus Launch", sold: 6 },
-        ];
+        { name: "Lagos Builders", sold: 14 },
+        { name: "Soroban Summit", sold: 9 },
+        { name: "Campus Launch", sold: 6 },
+      ];
 
   const platformBreakdown = [
     { name: "Wallet Connects", value: snapshot.walletConnections },
@@ -74,25 +74,25 @@ export default function AnalyticsDashboard() {
       </div>
 
       <div className="grid gap-6 xl:grid-cols-[1.3fr_0.9fr]">
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-6">
+        <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
           <div className="mb-4 flex items-center justify-between">
             <div>
-              <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">
+              <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">
                 Usage Trends
               </p>
-              <h2 className="text-2xl font-semibold text-white">Page traffic</h2>
+              <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white">Page traffic</h2>
             </div>
-            <p className="text-sm text-zinc-400">Local analytics snapshot</p>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">Local analytics snapshot</p>
           </div>
 
           <div className="space-y-4">
             {pageViewSeries.map((item, index) => (
               <div key={item.name} className="space-y-2">
-                <div className="flex items-center justify-between text-sm text-zinc-300">
+                <div className="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-300">
                   <span>{item.name}</span>
                   <span>{item.views} views</span>
                 </div>
-                <div className="h-3 overflow-hidden rounded-full bg-white/10">
+                <div className="h-3 overflow-hidden rounded-full bg-zinc-200 dark:bg-white/10">
                   <div
                     className="h-full rounded-full"
                     style={{
@@ -106,12 +106,12 @@ export default function AnalyticsDashboard() {
           </div>
         </div>
 
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-6">
+        <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
           <div className="mb-4">
-            <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">
+            <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">
               Platform Mix
             </p>
-            <h2 className="text-2xl font-semibold text-white">What users do most</h2>
+            <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white">What users do most</h2>
           </div>
 
           <div className="space-y-4">
@@ -122,8 +122,8 @@ export default function AnalyticsDashboard() {
                   : (item.value / totalPlatformActions) * 100;
 
               return (
-                <div key={item.name} className="rounded-2xl border border-white/10 bg-black/20 p-4">
-                  <div className="flex items-center justify-between text-sm text-zinc-300">
+                <div key={item.name} className="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-white/10 dark:bg-black/20">
+                  <div className="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-300">
                     <span className="flex items-center gap-3">
                       <span
                         className="h-3 w-3 rounded-full"
@@ -133,7 +133,7 @@ export default function AnalyticsDashboard() {
                     </span>
                     <span>{item.value}</span>
                   </div>
-                  <div className="mt-3 h-3 overflow-hidden rounded-full bg-white/10">
+                  <div className="mt-3 h-3 overflow-hidden rounded-full bg-zinc-200 dark:bg-white/10">
                     <div
                       className="h-full rounded-full"
                       style={{
@@ -150,31 +150,31 @@ export default function AnalyticsDashboard() {
       </div>
 
       <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-6">
+        <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
           <div className="mb-5">
-            <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">
+            <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">
               Organizer Dashboard
             </p>
-            <h2 className="text-2xl font-semibold text-white">Event performance</h2>
+            <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white">Event performance</h2>
           </div>
 
           <div className="space-y-4">
             {EVENT_HEALTH.map((event) => (
               <div
                 key={event.name}
-                className="rounded-2xl border border-white/10 bg-black/20 p-4"
+                className="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-white/10 dark:bg-black/20"
               >
                 <div className="mb-2 flex items-center justify-between">
-                  <h3 className="text-lg font-medium text-white">{event.name}</h3>
-                  <span className="rounded-full bg-orange-500/15 px-3 py-1 text-sm text-orange-200">
+                  <h3 className="text-lg font-medium text-zinc-950 dark:text-white">{event.name}</h3>
+                  <span className="rounded-full bg-orange-500/15 px-3 py-1 text-sm text-orange-700 dark:text-orange-200">
                     {event.conversion}% conversion
                   </span>
                 </div>
-                <div className="flex items-center justify-between text-sm text-zinc-300">
+                <div className="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-300">
                   <span>Revenue</span>
                   <span>{event.revenue} XLM</span>
                 </div>
-                <div className="mt-3 h-2 overflow-hidden rounded-full bg-white/10">
+                <div className="mt-3 h-2 overflow-hidden rounded-full bg-zinc-200 dark:bg-white/10">
                   <div
                     className="h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-300"
                     style={{ width: `${Math.min(event.conversion * 4, 100)}%` }}
@@ -185,22 +185,22 @@ export default function AnalyticsDashboard() {
           </div>
         </div>
 
-        <div className="rounded-3xl border border-white/10 bg-white/5 p-6">
+        <div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
           <div className="mb-4">
-            <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">
+            <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">
               Tickets by Event
             </p>
-            <h2 className="text-2xl font-semibold text-white">Sales distribution</h2>
+            <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white">Sales distribution</h2>
           </div>
 
           <div className="space-y-4">
             {eventSeries.map((item, index) => (
               <div key={item.name} className="space-y-2">
-                <div className="flex items-center justify-between text-sm text-zinc-300">
+                <div className="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-300">
                   <span>{item.name}</span>
                   <span>{item.sold} sold</span>
                 </div>
-                <div className="h-3 overflow-hidden rounded-full bg-white/10">
+                <div className="h-3 overflow-hidden rounded-full bg-zinc-200 dark:bg-white/10">
                   <div
                     className="h-full rounded-full"
                     style={{
@@ -228,10 +228,10 @@ function MetricCard({
   detail: string;
 }) {
   return (
-    <article className="rounded-3xl border border-white/10 bg-white/5 p-5">
-      <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">{label}</p>
-      <p className="mt-3 text-3xl font-semibold text-white">{value}</p>
-      <p className="mt-2 text-sm leading-6 text-zinc-400">{detail}</p>
+    <article className="rounded-3xl border border-zinc-200 bg-white p-5 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
+      <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">{label}</p>
+      <p className="mt-3 text-3xl font-semibold text-zinc-950 dark:text-white">{value}</p>
+      <p className="mt-2 text-sm leading-6 text-zinc-500 dark:text-zinc-400">{detail}</p>
     </article>
   );
 }
diff --git a/soroban-client/components/ContractEventFeed.tsx b/soroban-client/components/ContractEventFeed.tsx
index 232bb0d8..5d49ef5f 100644
--- a/soroban-client/components/ContractEventFeed.tsx
+++ b/soroban-client/components/ContractEventFeed.tsx
@@ -13,17 +13,17 @@ const EVENT_TYPE_LABELS: Record<ContractEventType, string> = {
 };
 
 const STATUS_COLORS = {
-  active: "text-green-400",
-  canceled: "text-red-400",
-  completed: "text-blue-400",
+  active: "text-green-600 dark:text-green-400",
+  canceled: "text-red-600 dark:text-red-400",
+  completed: "text-blue-600 dark:text-blue-400",
 };
 
 const TYPE_COLORS: Record<ContractEventType, string> = {
-  EventCreated: "bg-green-500/20 text-green-300",
-  TicketPurchased: "bg-sky-500/20 text-sky-300",
-  EventCanceled: "bg-red-500/20 text-red-300",
-  FundsWithdrawn: "bg-yellow-500/20 text-yellow-300",
-  EventUpdated: "bg-purple-500/20 text-purple-300",
+  EventCreated: "bg-green-500/20 text-green-700 dark:text-green-300",
+  TicketPurchased: "bg-sky-500/20 text-sky-700 dark:text-sky-300",
+  EventCanceled: "bg-red-500/20 text-red-700 dark:text-red-300",
+  FundsWithdrawn: "bg-yellow-500/20 text-yellow-800 dark:text-yellow-300",
+  EventUpdated: "bg-purple-500/20 text-purple-700 dark:text-purple-300",
 };
 
 export default function ContractEventFeed() {
@@ -40,11 +40,11 @@ export default function ContractEventFeed() {
   });
 
   return (
-    <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+    <div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
       <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h2 className="text-lg font-semibold text-white">Contract Event Feed</h2>
-          <p className="text-xs text-zinc-400">
+          <h2 className="text-lg font-semibold text-zinc-950 dark:text-white">Contract Event Feed</h2>
+          <p className="text-xs text-zinc-500 dark:text-zinc-400">
             {total} events indexed
             {updatedAt > 0 && (
               <> · updated {new Date(updatedAt).toLocaleTimeString()}</>
@@ -59,7 +59,7 @@ export default function ContractEventFeed() {
             onChange={(e) =>
               setStatusFilter(e.target.value as typeof statusFilter)
             }
-            className="rounded-lg border border-white/10 bg-[#2a2a2a] px-3 py-1.5 text-sm text-white focus:outline-none"
+            className="rounded-lg border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-900 focus:outline-none dark:border-white/10 dark:bg-[#2a2a2a] dark:text-white"
           >
             <option value="">All statuses</option>
             <option value="active">Active</option>
@@ -73,7 +73,7 @@ export default function ContractEventFeed() {
             onChange={(e) =>
               setTypeFilter(e.target.value as typeof typeFilter)
             }
-            className="rounded-lg border border-white/10 bg-[#2a2a2a] px-3 py-1.5 text-sm text-white focus:outline-none"
+            className="rounded-lg border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-900 focus:outline-none dark:border-white/10 dark:bg-[#2a2a2a] dark:text-white"
           >
             <option value="">All types</option>
             {(Object.keys(EVENT_TYPE_LABELS) as ContractEventType[]).map((t) => (
@@ -85,7 +85,7 @@ export default function ContractEventFeed() {
 
           <button
             onClick={refetch}
-            className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition hover:bg-white/10"
+            className="rounded-lg border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-900 transition hover:bg-zinc-100 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
           >
             Refresh
           </button>
@@ -93,26 +93,26 @@ export default function ContractEventFeed() {
       </div>
 
       {error && (
-        <div className="mb-4 rounded-lg bg-red-500/10 px-4 py-3 text-sm text-red-300">
+        <div className="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-500/10 dark:text-red-300">
           {error}
         </div>
       )}
 
       {loading && events.length === 0 ? (
-        <div className="py-12 text-center text-sm text-zinc-500">
+        <div className="py-12 text-center text-sm text-zinc-500 dark:text-zinc-500">
           Loading contract events…
         </div>
       ) : events.length === 0 ? (
         <div className="py-12 text-center text-sm text-zinc-500">
           No events found. Make sure{" "}
-          <code className="text-zinc-300">NEXT_PUBLIC_EVENT_MANAGER_CONTRACT</code> is
+          <code className="text-zinc-700 dark:text-zinc-300">NEXT_PUBLIC_EVENT_MANAGER_CONTRACT</code> is
           configured.
         </div>
       ) : (
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-white/10 text-left text-xs uppercase tracking-wider text-zinc-500">
+              <tr className="border-b border-zinc-200 text-left text-xs uppercase tracking-wider text-zinc-500 dark:border-white/10">
                 <th className="pb-3 pr-4">Type</th>
                 <th className="pb-3 pr-4">Event ID</th>
                 <th className="pb-3 pr-4">Status</th>
@@ -121,9 +121,9 @@ export default function ContractEventFeed() {
                 <th className="pb-3">Tx</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-white/5">
+            <tbody className="divide-y divide-zinc-200 dark:divide-white/5">
               {events.map((ev) => (
-                <tr key={ev.id} className="text-zinc-300 hover:bg-white/5">
+                <tr key={ev.id} className="text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-white/5">
                   <td className="py-3 pr-4">
                     <span
                       className={`rounded-full px-2 py-0.5 text-xs font-medium ${TYPE_COLORS[ev.type]}`}
@@ -138,7 +138,7 @@ export default function ContractEventFeed() {
                     {ev.status}
                   </td>
                   <td className="py-3 pr-4 font-mono text-xs">{ev.ledger}</td>
-                  <td className="py-3 pr-4 text-xs text-zinc-400">
+                  <td className="py-3 pr-4 text-xs text-zinc-500 dark:text-zinc-400">
                     {new Date(ev.ledgerClosedAt).toLocaleString()}
                   </td>
                   <td className="py-3">
@@ -146,7 +146,7 @@ export default function ContractEventFeed() {
                       href={`https://stellar.expert/explorer/testnet/tx/${ev.txHash}`}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="font-mono text-xs text-sky-400 hover:underline"
+                      className="font-mono text-xs text-sky-600 hover:underline dark:text-sky-400"
                     >
                       {ev.txHash.slice(0, 8)}…
                     </a>
diff --git a/soroban-client/components/EventCatalog.tsx b/soroban-client/components/EventCatalog.tsx
index 3728ed53..7d152c49 100644
--- a/soroban-client/components/EventCatalog.tsx
+++ b/soroban-client/components/EventCatalog.tsx
@@ -206,9 +206,9 @@ export default function EventCatalog() {
   return (
     <div className="space-y-8">
       {!configured && (
-        <div className="rounded-2xl border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100">
+        <div className="rounded-2xl border border-amber-400/40 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:bg-amber-500/10 dark:text-amber-100">
           Set{" "}
-          <code className="rounded bg-black/30 px-1.5 py-0.5 text-xs">
+          <code className="rounded bg-zinc-900/10 px-1.5 py-0.5 text-xs dark:bg-black/30">
             NEXT_PUBLIC_EVENT_MANAGER_CONTRACT
           </code>{" "}
           to your deployed EventManager contract id to enable purchases.
@@ -216,9 +216,9 @@ export default function EventCatalog() {
       )}
 
       {simulationHint && (
-        <p className="text-sm text-zinc-400">
+        <p className="text-sm text-zinc-500 dark:text-zinc-400">
           Listing uses{" "}
-          <code className="rounded bg-white/10 px-1 text-xs">
+          <code className="rounded bg-zinc-900/10 px-1 text-xs dark:bg-white/10">
             NEXT_PUBLIC_SOROBAN_SIM_SOURCE
           </code>{" "}
           for read simulation. Connect a wallet to use your address instead.
@@ -227,7 +227,7 @@ export default function EventCatalog() {
 
       <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
         <div className="w-full max-w-md">
-          <label htmlFor="event-search" className="text-sm font-medium text-zinc-300">
+          <label htmlFor="event-search" className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
             Search
           </label>
           <input
@@ -236,7 +236,7 @@ export default function EventCatalog() {
             value={query}
             onChange={(ev) => setQuery(ev.target.value)}
             placeholder="Name, type, or event id…"
-            className="mt-2 w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 text-white placeholder:text-zinc-500"
+            className="mt-2 w-full rounded-2xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder:text-zinc-400 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500"
           />
         </div>
         <div className="flex flex-wrap gap-2">
@@ -251,11 +251,10 @@ export default function EventCatalog() {
               key={key}
               type="button"
               onClick={() => setStatusFilter(key)}
-              className={`rounded-full px-4 py-2 text-sm font-medium transition ${
-                statusFilter === key
+              className={`rounded-full px-4 py-2 text-sm font-medium transition ${statusFilter === key
                   ? "bg-[#FF5722] text-white"
-                  : "border border-white/15 bg-white/5 text-zinc-300 hover:bg-white/10"
-              }`}
+                  : "border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-100 dark:border-white/15 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10"
+                }`}
             >
               {label}
             </button>
@@ -264,13 +263,13 @@ export default function EventCatalog() {
       </div>
 
       {loading ? (
-        <p className="py-16 text-center text-zinc-400">Loading events…</p>
+        <p className="py-16 text-center text-zinc-500 dark:text-zinc-400">Loading events…</p>
       ) : loadError ? (
-        <div className="rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-4 text-red-200">
+        <div className="rounded-2xl border border-red-500/30 bg-red-50 px-4 py-4 text-red-700 dark:bg-red-500/10 dark:text-red-200">
           {loadError}
         </div>
       ) : filtered.length === 0 ? (
-        <div className="rounded-2xl border border-white/10 bg-white/5 px-6 py-12 text-center text-zinc-400">
+        <div className="rounded-2xl border border-zinc-200 bg-white/90 px-6 py-12 text-center text-zinc-500 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:shadow-none">
           {events.length === 0
             ? "No events returned. Create one from the dashboard or check your contract and simulation account."
             : "No events match your search or filters."}
@@ -288,37 +287,37 @@ export default function EventCatalog() {
                     setSelected(event);
                     setFeedback(null);
                   }}
-                  className="flex h-full w-full flex-col rounded-[28px] border border-white/10 bg-white/5 p-6 text-left shadow-xl shadow-black/20 transition hover:border-sky-400/30 hover:bg-white/[0.07]"
+                  className="flex h-full w-full flex-col rounded-[28px] border border-zinc-200 bg-white p-6 text-left shadow-xl shadow-zinc-900/5 transition hover:border-sky-400/40 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:shadow-black/20 dark:hover:border-sky-400/30 dark:hover:bg-white/[0.07]"
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
-                      <p className="text-xs uppercase tracking-[0.28em] text-orange-200/70">
+                      <p className="text-xs uppercase tracking-[0.28em] text-orange-700 dark:text-orange-200/70">
                         Event #{event.id}
                       </p>
-                      <h2 className="mt-2 text-xl font-semibold text-white">
+                      <h2 className="mt-2 text-xl font-semibold text-zinc-950 dark:text-white">
                         {event.theme}
                       </h2>
                     </div>
                     {event.is_canceled ? (
-                      <span className="shrink-0 rounded-full bg-red-500/15 px-3 py-1 text-xs text-red-200">
+                      <span className="shrink-0 rounded-full bg-red-500/15 px-3 py-1 text-xs text-red-700 dark:text-red-200">
                         Canceled
                       </span>
                     ) : soldOut ? (
-                      <span className="shrink-0 rounded-full bg-zinc-500/20 px-3 py-1 text-xs text-zinc-300">
+                      <span className="shrink-0 rounded-full bg-zinc-500/15 px-3 py-1 text-xs text-zinc-600 dark:text-zinc-300">
                         Sold out
                       </span>
                     ) : (
-                      <span className="shrink-0 rounded-full bg-emerald-500/10 px-3 py-1 text-sm text-emerald-200">
+                      <span className="shrink-0 rounded-full bg-emerald-500/10 px-3 py-1 text-sm text-emerald-700 dark:text-emerald-200">
                         {rem.toString()} left
                       </span>
                     )}
                   </div>
                   {event.event_type ? (
-                    <p className="mt-3 line-clamp-2 text-sm leading-6 text-zinc-400">
+                    <p className="mt-3 line-clamp-2 text-sm leading-6 text-zinc-500 dark:text-zinc-400">
                       {event.event_type}
                     </p>
                   ) : null}
-                  <dl className="mt-4 space-y-2 text-sm text-zinc-300">
+                  <dl className="mt-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
                     <div className="flex justify-between gap-2">
                       <dt>Starts</dt>
                       <dd>{formatDateTime(event.start_date)}</dd>
@@ -340,22 +339,21 @@ export default function EventCatalog() {
 
       {feedback && !selected && (
         <div
-          className={`rounded-2xl border px-4 py-4 text-sm ${
-            feedback.type === "success"
-              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-100"
-              : "border-red-500/30 bg-red-500/10 text-red-100"
-          }`}
+          className={`rounded-2xl border px-4 py-4 text-sm ${feedback.type === "success"
+              ? "border-emerald-500/30 bg-emerald-50 text-emerald-800 dark:bg-emerald-500/10 dark:text-emerald-100"
+              : "border-red-500/30 bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-100"
+            }`}
         >
           <p>{feedback.message}</p>
           {feedback.tx && (
-            <div className="mt-3 space-y-1 font-mono text-xs text-zinc-300">
+            <div className="mt-3 space-y-1 font-mono text-xs text-zinc-600 dark:text-zinc-300">
               <p>
                 Hash:{" "}
                 <a
                   href={getTxExplorerUrl(feedback.tx.hash)}
                   target="_blank"
                   rel="noreferrer"
-                  className="text-sky-300 underline hover:text-sky-200"
+                  className="text-sky-600 underline hover:text-sky-500 dark:text-sky-300 dark:hover:text-sky-200"
                 >
                   {feedback.tx.hash}
                 </a>
@@ -373,15 +371,15 @@ export default function EventCatalog() {
           aria-modal="true"
           aria-labelledby="event-detail-title"
         >
-          <div className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-[28px] border border-white/10 bg-[#1f1f23] p-6 shadow-2xl">
+          <div className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-[28px] border border-zinc-200 bg-white p-6 text-zinc-900 shadow-2xl shadow-zinc-900/10 dark:border-white/10 dark:bg-[#1f1f23] dark:text-white dark:shadow-black/30">
             <div className="flex items-start justify-between gap-4">
               <div>
-                <p className="text-xs uppercase tracking-[0.28em] text-orange-200/70">
+                <p className="text-xs uppercase tracking-[0.28em] text-orange-700 dark:text-orange-200/70">
                   Event #{selected.id}
                 </p>
                 <h2
                   id="event-detail-title"
-                  className="mt-2 text-2xl font-semibold text-white"
+                  className="mt-2 text-2xl font-semibold text-zinc-950 dark:text-white"
                 >
                   {selected.theme}
                 </h2>
@@ -392,7 +390,7 @@ export default function EventCatalog() {
                   setSelected(null);
                   setFeedback(null);
                 }}
-                className="rounded-xl p-2 text-zinc-400 hover:bg-white/10 hover:text-white"
+                className="rounded-xl p-2 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
                 aria-label="Close"
               >
                 <X size={22} />
@@ -400,45 +398,45 @@ export default function EventCatalog() {
             </div>
 
             {selected.event_type ? (
-              <p className="mt-4 text-sm leading-relaxed text-zinc-400">
+              <p className="mt-4 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
                 {selected.event_type}
               </p>
             ) : null}
 
-            <dl className="mt-6 space-y-3 text-sm text-zinc-300">
+            <dl className="mt-6 space-y-3 text-sm text-zinc-600 dark:text-zinc-300">
               <div className="flex justify-between gap-4">
-                <dt className="text-zinc-500">Start</dt>
+                <dt className="text-zinc-500 dark:text-zinc-500">Start</dt>
                 <dd>{formatDateTime(selected.start_date)}</dd>
               </div>
               <div className="flex justify-between gap-4">
-                <dt className="text-zinc-500">End</dt>
+                <dt className="text-zinc-500 dark:text-zinc-500">End</dt>
                 <dd>{formatDateTime(selected.end_date)}</dd>
               </div>
               <div className="flex justify-between gap-4">
-                <dt className="text-zinc-500">Ticket price</dt>
+                <dt className="text-zinc-500 dark:text-zinc-500">Ticket price</dt>
                 <dd>
                   {formatXlmFromStroops(selected.ticket_price)}{" "}
                   {isLikelyNativeAsset(selected.payment_token) ? "XLM" : "token base units"}
                 </dd>
               </div>
               <div className="flex justify-between gap-4">
-                <dt className="text-zinc-500">Tickets remaining</dt>
+                <dt className="text-zinc-500 dark:text-zinc-500">Tickets remaining</dt>
                 <dd>{remainingTickets(selected).toString()}</dd>
               </div>
               <div className="flex justify-between gap-4">
-                <dt className="text-zinc-500">Organizer</dt>
-                <dd className="max-w-[60%] truncate font-mono text-xs text-zinc-400">
+                <dt className="text-zinc-500 dark:text-zinc-500">Organizer</dt>
+                <dd className="max-w-[60%] truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
                   {selected.organizer}
                 </dd>
               </div>
             </dl>
 
             {selected.is_canceled ? (
-              <p className="mt-6 rounded-2xl bg-red-500/10 px-4 py-3 text-sm text-red-200">
+              <p className="mt-6 rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-500/10 dark:text-red-200">
                 This event was canceled. Purchases are disabled.
               </p>
             ) : remainingTickets(selected) <= BigInt(0) ? (
-              <p className="mt-6 rounded-2xl bg-zinc-500/10 px-4 py-3 text-sm text-zinc-300">
+              <p className="mt-6 rounded-2xl bg-zinc-100 px-4 py-3 text-sm text-zinc-600 dark:bg-zinc-500/10 dark:text-zinc-300">
                 Sold out.
               </p>
             ) : (
@@ -446,14 +444,14 @@ export default function EventCatalog() {
                 <div>
                   <label
                     htmlFor="purchase-qty"
-                    className="text-sm font-medium text-zinc-300"
+                    className="text-sm font-medium text-zinc-700 dark:text-zinc-300"
                   >
                     Quantity
                   </label>
                   <div className="mt-2 flex items-center gap-3">
                     <button
                       type="button"
-                      className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/15 bg-white/5 text-xl text-white hover:bg-white/10"
+                      className="flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-xl text-zinc-900 hover:bg-zinc-100 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                       onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                       aria-label="Decrease quantity"
                     >
@@ -476,11 +474,11 @@ export default function EventCatalog() {
                           )
                         )
                       }
-                      className="h-11 w-24 rounded-2xl border border-white/10 bg-zinc-950 text-center text-white"
+                      className="h-11 w-24 rounded-2xl border border-zinc-200 bg-white text-center text-zinc-900 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-zinc-950 dark:text-white"
                     />
                     <button
                       type="button"
-                      className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/15 bg-white/5 text-xl text-white hover:bg-white/10"
+                      className="flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-xl text-zinc-900 hover:bg-zinc-100 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                       onClick={() =>
                         setQuantity((q) =>
                           Math.min(
@@ -498,11 +496,10 @@ export default function EventCatalog() {
 
                 {feedback && (
                   <div
-                    className={`rounded-2xl px-4 py-3 text-sm ${
-                      feedback.type === "success"
-                        ? "bg-emerald-500/15 text-emerald-100"
-                        : "bg-red-500/15 text-red-100"
-                    }`}
+                    className={`rounded-2xl px-4 py-3 text-sm ${feedback.type === "success"
+                        ? "bg-emerald-50 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-100"
+                        : "bg-red-50 text-red-700 dark:bg-red-500/15 dark:text-red-100"
+                      }`}
                   >
                     <p>{feedback.message}</p>
                     {feedback.tx && (
@@ -512,7 +509,7 @@ export default function EventCatalog() {
                             href={getTxExplorerUrl(feedback.tx.hash)}
                             target="_blank"
                             rel="noreferrer"
-                            className="text-sky-300 underline"
+                            className="text-sky-600 underline dark:text-sky-300"
                           >
                             View transaction
                           </a>
diff --git a/soroban-client/components/FeaturesSection.tsx b/soroban-client/components/FeaturesSection.tsx
index 1db27310..89b37968 100644
--- a/soroban-client/components/FeaturesSection.tsx
+++ b/soroban-client/components/FeaturesSection.tsx
@@ -49,24 +49,24 @@ export default function FeaturesSection() {
   ] as const;
 
   return (
-    <section className="bg-[#18181B] py-24">
+    <section className="bg-background py-24">
       <div className="container mx-auto px-4">
-        <h2 className="text-center text-4xl md:text-5xl font-bold text-white mb-20">
+        <h2 className="mb-20 text-center text-4xl font-bold text-zinc-950 dark:text-white md:text-5xl">
           {t("title")}
         </h2>
-        <div className="flex flex-wrap justify-center gap-8 max-w-7xl mx-auto">
+        <div className="mx-auto flex max-w-7xl flex-wrap justify-center gap-8">
           {features.map((feature) => (
             <div
               key={feature.key}
-              className="relative bg-[#525252] w-full md:w-[350px] p-8 pt-16 rounded-2xl flex flex-col items-center mt-8 shadow-lg"
+              className="relative mt-8 flex w-full flex-col items-center rounded-2xl border border-zinc-200 bg-white p-8 pt-16 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-[#525252] dark:shadow-black/20 md:w-[350px]"
             >
-              <div className="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-[#18181B] rounded-full flex items-center justify-center border-[6px] border-[#18181B]">
+              <div className="absolute -top-10 left-1/2 flex h-20 w-20 -translate-x-1/2 items-center justify-center rounded-full border-[6px] border-background bg-background">
                 <div className="text-[#FF5722]">{feature.icon}</div>
               </div>
-              <h3 className="text-xl font-bold text-white text-center mb-4 mt-2">
+              <h3 className="mb-4 mt-2 text-center text-xl font-bold text-zinc-950 dark:text-white">
                 {t(`${feature.key}.title`)}
               </h3>
-              <p className="text-gray-300 text-center text-sm leading-relaxed">
+              <p className="text-center text-sm leading-relaxed text-zinc-600 dark:text-gray-300">
                 {t(`${feature.key}.description`)}
               </p>
             </div>
diff --git a/soroban-client/components/Footer.tsx b/soroban-client/components/Footer.tsx
index 44415993..f6914004 100644
--- a/soroban-client/components/Footer.tsx
+++ b/soroban-client/components/Footer.tsx
@@ -7,26 +7,26 @@ export default function Footer() {
   const t = useTranslations("footer");
 
   return (
-    <footer className="bg-[#52525b] text-white py-16">
+    <footer className="bg-zinc-100 py-16 text-zinc-900 dark:bg-[#52525b] dark:text-white">
       <div className="container mx-auto px-4 md:px-8">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+        <div className="mb-12 grid grid-cols-1 gap-8 md:grid-cols-4">
           {/* Brand & Newsletter */}
           <div className="space-y-6">
             <div className="flex items-center gap-2">
               <div className="grid grid-cols-2 gap-0.5">
-                <div className="w-3 h-3 bg-white" />
-                <div className="w-3 h-3 bg-white" />
-                <div className="w-3 h-3 bg-white" />
-                <div className="w-3 h-3 bg-white/50" />
+                <div className="h-3 w-3 bg-zinc-900 dark:bg-white" />
+                <div className="h-3 w-3 bg-zinc-900 dark:bg-white" />
+                <div className="h-3 w-3 bg-zinc-900 dark:bg-white" />
+                <div className="h-3 w-3 bg-zinc-500/40 dark:bg-white/50" />
               </div>
               <span className="text-2xl font-semibold tracking-tight">CrowdPass</span>
             </div>
-            <p className="text-gray-200 text-sm leading-relaxed max-w-xs">{t("tagline")}</p>
+            <p className="max-w-xs text-sm leading-relaxed text-zinc-600 dark:text-gray-200">{t("tagline")}</p>
             <div className="relative max-w-xs">
               <input
                 type="email"
                 placeholder={t("newsletter")}
-                className="w-full bg-[#65656e] text-white placeholder-gray-300 px-4 py-3 rounded border border-gray-500 focus:outline-none focus:border-white text-sm pr-12"
+                className="w-full rounded border border-zinc-300 bg-white px-4 py-3 pr-12 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-[#FF5722] focus:outline-none dark:border-gray-500 dark:bg-[#65656e] dark:text-white dark:placeholder-gray-300 dark:focus:border-white"
               />
               <button className="absolute right-1 top-1 bottom-1 bg-[#F97316] hover:bg-[#ea580c] text-white rounded px-3 flex items-center justify-center transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -39,38 +39,38 @@ export default function Footer() {
 
           {/* Quick Links 1 */}
           <div className="md:ml-auto">
-            <h3 className="font-semibold text-lg mb-6">{t("quickLinks")}</h3>
-            <ul className="space-y-4 text-gray-200 text-sm">
-              <li><Link href="/" className="hover:text-white transition-colors">{t("home")}</Link></li>
-              <li><Link href="/about" className="hover:text-white transition-colors">{t("about")}</Link></li>
-              <li><Link href="/contact" className="hover:text-white transition-colors">{t("contact")}</Link></li>
+            <h3 className="mb-6 text-lg font-semibold">{t("quickLinks")}</h3>
+            <ul className="space-y-4 text-sm text-zinc-600 dark:text-gray-200">
+              <li><Link href="/" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("home")}</Link></li>
+              <li><Link href="/about" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("about")}</Link></li>
+              <li><Link href="/contact" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("contact")}</Link></li>
             </ul>
           </div>
 
           {/* Quick Links 2 */}
           <div className="md:ml-auto">
-            <h3 className="font-semibold text-lg mb-6">{t("quickLinks")}</h3>
-            <ul className="space-y-4 text-gray-200 text-sm">
-              <li><Link href="/signup" className="hover:text-white transition-colors">{t("signUp")}</Link></li>
-              <li><Link href="/login" className="hover:text-white transition-colors">{t("logIn")}</Link></li>
-              <li><Link href="/terms" className="hover:text-white transition-colors">{t("terms")}</Link></li>
-              <li><Link href="/privacy" className="hover:text-white transition-colors">{t("privacy")}</Link></li>
+            <h3 className="mb-6 text-lg font-semibold">{t("quickLinks")}</h3>
+            <ul className="space-y-4 text-sm text-zinc-600 dark:text-gray-200">
+              <li><Link href="/signup" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("signUp")}</Link></li>
+              <li><Link href="/login" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("logIn")}</Link></li>
+              <li><Link href="/terms" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("terms")}</Link></li>
+              <li><Link href="/privacy" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("privacy")}</Link></li>
             </ul>
           </div>
 
           {/* Quick Links 3 */}
           <div className="md:ml-auto">
-            <h3 className="font-semibold text-lg mb-6">{t("quickLinks")}</h3>
-            <ul className="space-y-4 text-gray-200 text-sm">
-              <li><Link href="/create-event" className="hover:text-white transition-colors">{t("createEvent")}</Link></li>
-              <li><Link href="/get-spok" className="hover:text-white transition-colors">{t("getSpok")}</Link></li>
-              <li><Link href="/attend" className="hover:text-white transition-colors">{t("attendEvent")}</Link></li>
+            <h3 className="mb-6 text-lg font-semibold">{t("quickLinks")}</h3>
+            <ul className="space-y-4 text-sm text-zinc-600 dark:text-gray-200">
+              <li><Link href="/create-event" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("createEvent")}</Link></li>
+              <li><Link href="/get-spok" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("getSpok")}</Link></li>
+              <li><Link href="/attend" className="transition-colors hover:text-zinc-950 dark:hover:text-white">{t("attendEvent")}</Link></li>
             </ul>
           </div>
         </div>
 
-        <div className="border-t border-gray-600/50 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
-          <div className="flex items-center gap-2 text-sm text-gray-300">
+        <div className="flex flex-col items-center justify-between gap-4 border-t border-zinc-300/80 pt-8 dark:border-gray-600/50 md:flex-row">
+          <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-gray-300">
             <span>©</span>
             <span>{t("copyright", { year: new Date().getFullYear() })}</span>
           </div>
@@ -91,7 +91,7 @@ export default function Footer() {
                 <path key="x2" d="M4 20l6.768-6.768m2.46-2.46L20 4" />
               </>,
             ].map((icon, i) => (
-              <a key={i} href="#" className="bg-[#F97316] p-1.5 rounded text-white hover:bg-[#ea580c] transition-colors">
+              <a key={i} href="#" className="rounded bg-[#F97316] p-1.5 text-white transition-colors hover:bg-[#ea580c]">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   {icon}
                 </svg>
diff --git a/soroban-client/components/Header.tsx b/soroban-client/components/Header.tsx
index 9de29436..db402dea 100644
--- a/soroban-client/components/Header.tsx
+++ b/soroban-client/components/Header.tsx
@@ -5,8 +5,10 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Menu, X } from "lucide-react";
 
+import ThemeToggle from "@/components/ThemeToggle";
+import { useTheme } from "@/contexts/ThemeContext";
 import { useWallet } from "@/contexts/WalletContext";
-import type { WalletProviderId } from '@/contexts/walletAdapters';
+import type { WalletProviderId } from "@/contexts/walletAdapters";
 
 const NAV_LINKS = [
   { href: "/", label: "Home" },
@@ -18,6 +20,7 @@ const NAV_LINKS = [
 ];
 
 export default function Header() {
+  const { resolvedTheme } = useTheme();
   const {
     address,
     providerId,
@@ -83,10 +86,12 @@ export default function Header() {
     closeMenu();
   }, [pathname]);
 
+  const logoColor = resolvedTheme === "dark" ? "white" : "currentColor";
+
   return (
     <header className="absolute left-0 right-0 top-0 z-100 flex justify-center px-4 pt-8">
-      <div className="flex w-full max-w-6xl items-center justify-between rounded-2xl bg-[#525252] px-6 py-4 shadow-lg backdrop-blur-sm">
-        <Link href="/" className="flex items-center gap-2 text-white">
+      <div className="flex w-full max-w-6xl items-center justify-between rounded-2xl border border-zinc-200/80 bg-white/85 px-6 py-4 text-zinc-900 shadow-lg shadow-zinc-900/5 backdrop-blur-sm dark:border-white/10 dark:bg-[#525252]/85 dark:text-white dark:shadow-black/20">
+        <Link href="/" className="flex items-center gap-2 text-current">
           <div className="flex items-center gap-2 text-2xl font-bold">
             <svg
               width="32"
@@ -95,20 +100,20 @@ export default function Header() {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M4 10H14V14H8V22H14V26H4V10Z" fill="white" />
-              <path d="M18 10H28V14H22V26H18V10Z" fill="white" />
+              <path d="M4 10H14V14H8V22H14V26H4V10Z" fill={logoColor} />
+              <path d="M18 10H28V14H22V26H18V10Z" fill={logoColor} />
             </svg>
             CrowdPass
           </div>
         </Link>
 
         {/* Desktop Navigation */}
-        <nav className="hidden md:flex items-center gap-8">
+        <nav className="hidden items-center gap-8 md:flex">
           {NAV_LINKS.map((link) => (
             <Link
               key={link.href}
               href={link.href}
-              className="text-gray-200 hover:text-white font-medium transition"
+              className="font-medium text-zinc-600 transition hover:text-zinc-950 dark:text-zinc-200 dark:hover:text-white"
             >
               {link.label}
             </Link>
@@ -116,7 +121,7 @@ export default function Header() {
           {isConnected && (
             <Link
               href="/dashboard"
-              className="text-gray-200 hover:text-white font-medium transition"
+              className="font-medium text-zinc-600 transition hover:text-zinc-950 dark:text-zinc-200 dark:hover:text-white"
             >
               Dashboard
             </Link>
@@ -124,14 +129,16 @@ export default function Header() {
         </nav>
 
         <div className="hidden items-center gap-4 md:flex">
+          <ThemeToggle />
+
           {isConnected ? (
             <div className="flex items-center gap-4">
-              <span className="rounded-md bg-white/10 px-3 py-1 font-mono text-sm text-gray-300">
+              <span className="rounded-md bg-zinc-950/5 px-3 py-1 font-mono text-sm text-zinc-600 dark:bg-white/10 dark:text-zinc-300">
                 {formatAddress(address!)}
               </span>
               <button
                 onClick={disconnect}
-                className="rounded-lg border border-gray-400 px-6 py-2 font-medium text-white transition hover:bg-white/10"
+                className="rounded-lg border border-zinc-300 px-6 py-2 font-medium text-zinc-700 transition hover:bg-zinc-900/5 dark:border-gray-400 dark:text-white dark:hover:bg-white/10"
               >
                 Disconnect
               </button>
@@ -139,7 +146,7 @@ export default function Header() {
           ) : (
             <button
               onClick={handleConnect}
-              className="rounded-lg border border-gray-400 px-6 py-2 font-medium text-white transition hover:bg-white/10"
+              className="rounded-lg border border-zinc-300 px-6 py-2 font-medium text-zinc-700 transition hover:bg-zinc-900/5 dark:border-gray-400 dark:text-white dark:hover:bg-white/10"
             >
               {isInstalled ? `Connect ${providerName}` : "Select Wallet"}
             </button>
@@ -155,19 +162,22 @@ export default function Header() {
 
         <button
           onClick={() => setIsMenuOpen((current) => !current)}
-          className="flex items-center justify-center rounded-lg p-2 transition hover:bg-white/10 md:hidden"
+          className="flex items-center justify-center rounded-lg p-2 transition hover:bg-zinc-900/5 dark:hover:bg-white/10 md:hidden"
           aria-label="Toggle navigation menu"
           aria-expanded={isMenuOpen}
           aria-controls="mobile-menu"
         >
-          {isMenuOpen ? <X size={24} className="text-white" /> : <Menu size={24} className="text-white" />}
+          {isMenuOpen ? (
+            <X size={24} className="text-current" />
+          ) : (
+            <Menu size={24} className="text-current" />
+          )}
         </button>
       </div>
 
       <div
-        className={`fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 md:hidden ${
-          isMenuOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-        }`}
+        className={`fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 md:hidden ${isMenuOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+          }`}
         onClick={closeMenu}
         role="presentation"
       />
@@ -176,25 +186,27 @@ export default function Header() {
         id="mobile-menu"
         role="dialog"
         aria-label="Mobile navigation menu"
-        className={`fixed left-0 right-0 top-0 z-50 w-full max-w-full origin-top bg-[#525252] shadow-lg transition-all duration-300 md:hidden ${
-          isMenuOpen
+        className={`fixed left-0 right-0 top-0 z-50 w-full max-w-full origin-top border-b border-zinc-200/80 bg-white text-zinc-900 shadow-lg transition-all duration-300 dark:border-white/10 dark:bg-[#525252] dark:text-white md:hidden ${isMenuOpen
             ? "pointer-events-auto translate-y-0 opacity-100"
             : "pointer-events-none -translate-y-full opacity-0"
-        }`}
+          }`}
         style={{ paddingTop: "env(safe-area-inset-top)" }}
       >
         <div className="flex items-center justify-between px-4 py-4">
-          <div className="text-xl font-bold text-white">Menu</div>
-          <button
-            onClick={closeMenu}
-            className="rounded-lg p-2 transition hover:bg-white/10"
-            aria-label="Close menu"
-          >
-            <X size={24} className="text-white" />
-          </button>
+          <div className="text-xl font-bold text-current">Menu</div>
+          <div className="flex items-center gap-2">
+            <ThemeToggle className="px-3" />
+            <button
+              onClick={closeMenu}
+              className="rounded-lg p-2 transition hover:bg-zinc-900/5 dark:hover:bg-white/10"
+              aria-label="Close menu"
+            >
+              <X size={24} className="text-current" />
+            </button>
+          </div>
         </div>
 
-        <div className="border-t border-gray-600" />
+        <div className="border-t border-zinc-200 dark:border-gray-600" />
 
         <div className="space-y-4 px-4 py-6">
           <div className="space-y-3">
@@ -202,11 +214,10 @@ export default function Header() {
               <Link
                 key={link.href}
                 href={link.href}
-                className={`block rounded-2xl px-4 py-3 text-lg font-medium transition ${
-                  pathname === link.href
-                    ? "bg-white/10 text-white"
-                    : "text-gray-200 hover:bg-white/5 hover:text-white"
-                }`}
+                className={`block rounded-2xl px-4 py-3 text-lg font-medium transition ${pathname === link.href
+                    ? "bg-zinc-900/5 text-zinc-950 dark:bg-white/10 dark:text-white"
+                    : "text-zinc-600 hover:bg-zinc-900/5 hover:text-zinc-950 dark:text-zinc-200 dark:hover:bg-white/5 dark:hover:text-white"
+                  }`}
                 onClick={() => handleMenuItemClick()}
               >
                 {link.label}
@@ -214,17 +225,17 @@ export default function Header() {
             ))}
           </div>
 
-          <div className="border-t border-gray-600 py-4" />
+          <div className="border-t border-zinc-200 py-4 dark:border-gray-600" />
 
           <div className="space-y-3">
             {isConnected ? (
               <>
-                <div className="rounded-2xl bg-white/10 px-4 py-3 font-mono text-sm text-gray-300">
+                <div className="rounded-2xl bg-zinc-950/5 px-4 py-3 font-mono text-sm text-zinc-600 dark:bg-white/10 dark:text-zinc-300">
                   {formatAddress(address!)}
                 </div>
                 <button
                   onClick={() => handleMenuItemClick(disconnect)}
-                  className="w-full rounded-2xl border border-gray-400 px-4 py-4 font-medium text-white transition hover:bg-white/10"
+                  className="w-full rounded-2xl border border-zinc-300 px-4 py-4 font-medium text-zinc-700 transition hover:bg-zinc-900/5 dark:border-gray-400 dark:text-white dark:hover:bg-white/10"
                 >
                   Disconnect
                 </button>
@@ -232,7 +243,7 @@ export default function Header() {
             ) : (
               <button
                 onClick={() => handleMenuItemClick(handleConnect)}
-                className="w-full rounded-2xl border border-gray-400 px-4 py-4 font-medium text-white transition hover:bg-white/10"
+                className="w-full rounded-2xl border border-zinc-300 px-4 py-4 font-medium text-zinc-700 transition hover:bg-zinc-900/5 dark:border-gray-400 dark:text-white dark:hover:bg-white/10"
               >
                 {isInstalled ? `Connect ${providerName}` : "Select Wallet"}
               </button>
@@ -252,10 +263,10 @@ export default function Header() {
       {/* Wallet Selection Modal */}
       {isWalletModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-          <div className="w-full max-w-md rounded-xl bg-[#252525] p-4 text-white shadow-xl">
+          <div className="w-full max-w-md rounded-xl border border-zinc-200 bg-white p-4 text-zinc-900 shadow-xl dark:border-white/10 dark:bg-[#252525] dark:text-white">
             <div className="mb-3 flex items-center justify-between">
               <h3 className="text-lg font-bold">Choose Wallet Provider</h3>
-              <button onClick={closeWalletModal} className="text-white hover:text-gray-300">
+              <button onClick={closeWalletModal} className="text-current transition hover:text-zinc-500 dark:hover:text-gray-300">
                 <X size={20} />
               </button>
             </div>
@@ -268,14 +279,15 @@ export default function Header() {
                     if (provider.installed) handleProviderSelect(provider.id);
                     else window.open(provider.installUrl, "_blank");
                   }}
-                  className={`w-full rounded-lg border p-3 text-left transition ${
-                    provider.id === providerId ? "border-blue-400" : "border-gray-600"
-                  } ${provider.installed ? "hover:border-blue-300" : "cursor-pointer opacity-70"}`}
+                  className={`w-full rounded-lg border p-3 text-left transition ${provider.id === providerId
+                      ? "border-blue-400 dark:border-blue-400"
+                      : "border-zinc-200 dark:border-gray-600"
+                    } ${provider.installed ? "hover:border-blue-300" : "cursor-pointer opacity-70"}`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-semibold">{provider.name}</div>
-                      <div className="text-xs text-gray-300">{provider.description}</div>
+                      <div className="text-xs text-zinc-500 dark:text-gray-300">{provider.description}</div>
                     </div>
                     <div className="text-xs">{provider.installed ? "Available" : "Install"}</div>
                   </div>
@@ -283,7 +295,7 @@ export default function Header() {
               ))}
             </div>
 
-            <div className="mt-4 text-sm text-gray-300">
+            <div className="mt-4 text-sm text-zinc-500 dark:text-gray-300">
               Not installed? Click to open the official install page then refresh.
             </div>
           </div>
diff --git a/soroban-client/components/Hero.tsx b/soroban-client/components/Hero.tsx
index 5e916b41..0873b681 100644
--- a/soroban-client/components/Hero.tsx
+++ b/soroban-client/components/Hero.tsx
@@ -5,14 +5,14 @@ export default function Hero() {
   const t = useTranslations("hero");
 
   return (
-    <section className="relative min-h-screen flex items-center pt-32 pb-20 px-4 overflow-hidden bg-[#18181B]">
-      <div className="max-w-[1400px] mx-auto w-full grid lg:grid-cols-2 gap-8 items-center">
+    <section className="relative flex min-h-screen items-center overflow-hidden bg-background px-4 pb-20 pt-32">
+      <div className="mx-auto grid w-full max-w-[1400px] items-center gap-8 lg:grid-cols-2">
         {/* Text Content */}
         <div className="relative z-50 pl-4 lg:pl-12">
           <p className="text-[#FF5722] font-semibold tracking-wider mb-4 uppercase text-sm">
             {t("tagline")}
           </p>
-          <h1 className="text-5xl lg:text-[4.5rem] font-bold text-white leading-[1.1] mb-8 tracking-tight">
+          <h1 className="mb-8 text-5xl font-bold leading-[1.1] tracking-tight text-zinc-950 dark:text-white lg:text-[4.5rem]">
             {t("headline")}{" "}
             <span className="text-[#FF5722]">{t("brand")}</span>
           </h1>
@@ -22,30 +22,30 @@ export default function Hero() {
         </div>
 
         {/* Image Collage Area */}
-        <div className="relative h-[600px] w-full flex items-center justify-center scale-75 md:scale-90 lg:scale-100 origin-center lg:origin-right">
+        <div className="relative flex h-[600px] w-full origin-center scale-75 items-center justify-center md:scale-90 lg:origin-right lg:scale-100">
           <div className="relative w-[900px] h-[600px]">
-            <div className="absolute left-0 top-[100px] w-[180px] h-[280px] rounded-[1.5rem] overflow-hidden border-[3px] border-white/10 shadow-2xl z-20 hover:scale-105 transition duration-500">
+            <div className="absolute left-0 top-[100px] z-20 h-[280px] w-[180px] overflow-hidden rounded-[1.5rem] border-[3px] border-zinc-950/10 shadow-2xl shadow-zinc-900/10 transition duration-500 hover:scale-105 dark:border-white/10 dark:shadow-black/30">
               <Image src="/hero-balloons.png" alt="Balloons" fill className="object-cover" />
             </div>
-            <div className="absolute left-[40px] bottom-[60px] z-10">
+            <div className="absolute bottom-[60px] left-[40px] z-10 text-zinc-500 dark:text-white/80">
               <svg width="80" height="80" viewBox="0 0 100 100" fill="none">
                 <path d="M10 90 L80 20 M80 20 L50 20 M80 20 L80 50" stroke="#FF5722" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </div>
-            <div className="absolute left-[220px] top-[0px] w-[500px] h-[350px] rounded-[2rem] overflow-hidden border-[3px] border-white/10 shadow-2xl z-10">
+            <div className="absolute left-[220px] top-[0px] z-10 h-[350px] w-[500px] overflow-hidden rounded-[2rem] border-[3px] border-zinc-950/10 shadow-2xl shadow-zinc-900/10 dark:border-white/10 dark:shadow-black/30">
               <Image src="/hero-concert.png" alt="Concert" fill className="object-cover" />
             </div>
-            <div className="absolute left-[380px] top-[280px] w-[340px] h-[220px] rounded-[1.5rem] overflow-hidden border-[3px] border-white/10 shadow-2xl z-30 hover:scale-105 transition duration-500">
+            <div className="absolute left-[380px] top-[280px] z-30 h-[220px] w-[340px] overflow-hidden rounded-[1.5rem] border-[3px] border-zinc-950/10 shadow-2xl shadow-zinc-900/10 transition duration-500 hover:scale-105 dark:border-white/10 dark:shadow-black/30">
               <Image src="/hero-meeting.png" alt="Meeting" fill className="object-cover" />
             </div>
-            <div className="absolute right-[20px] top-[120px] w-[180px] h-[360px] rounded-[1.5rem] overflow-hidden border-[3px] border-white/10 shadow-2xl z-20 hover:scale-105 transition duration-500">
+            <div className="absolute right-[20px] top-[120px] z-20 h-[360px] w-[180px] overflow-hidden rounded-[1.5rem] border-[3px] border-zinc-950/10 shadow-2xl shadow-zinc-900/10 transition duration-500 hover:scale-105 dark:border-white/10 dark:shadow-black/30">
               <Image src="/hero-toast.png" alt="Toast" fill className="object-cover" />
             </div>
-            <div className="absolute right-[60px] top-[20px] z-10">
+            <div className="absolute right-[60px] top-[20px] z-10 text-zinc-500 dark:text-white/80">
               <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
-                <line x1="20" y1="80" x2="20" y2="40" stroke="white" strokeWidth="3" strokeLinecap="round" />
+                <line x1="20" y1="80" x2="20" y2="40" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
                 <line x1="90" y1="10" x2="40" y2="60" stroke="#FF5722" strokeWidth="4" strokeLinecap="round" />
-                <line x1="50" y1="90" x2="90" y2="88" stroke="white" strokeWidth="3" strokeLinecap="round" />
+                <line x1="50" y1="90" x2="90" y2="88" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
               </svg>
             </div>
           </div>
diff --git a/soroban-client/components/HowItWorksSection.tsx b/soroban-client/components/HowItWorksSection.tsx
index 63631245..14382680 100644
--- a/soroban-client/components/HowItWorksSection.tsx
+++ b/soroban-client/components/HowItWorksSection.tsx
@@ -49,13 +49,13 @@ export default function HowItWorksSection() {
   ] as const;
 
   return (
-    <section className="bg-[#18181B] py-24 overflow-hidden">
+    <section className="overflow-hidden bg-background py-24">
       <div className="container mx-auto px-4">
-        <h2 className="text-center text-4xl md:text-5xl font-bold text-white mb-20">
+        <h2 className="mb-20 text-center text-4xl font-bold text-zinc-950 dark:text-white md:text-5xl">
           {t("title")}
         </h2>
-        <div className="flex flex-col lg:flex-row items-center justify-center gap-16 lg:gap-24 relative">
-          <div className="relative w-[300px] h-[300px] md:w-[400px] md:h-[400px] flex-shrink-0">
+        <div className="relative flex flex-col items-center justify-center gap-16 lg:flex-row lg:gap-24">
+          <div className="relative h-[300px] w-[300px] flex-shrink-0 md:h-[400px] md:w-[400px]">
             <div className="absolute -inset-8 md:-inset-12 border-[2px] border-dashed border-[#FF5722] rounded-full opacity-70 animate-spin-slow" />
             <div className="relative w-full h-full rounded-full border-[8px] border-[#FF5722] overflow-hidden shadow-2xl">
               <Image src="/how_it_works_hero.png" alt="How it works" fill className="object-cover" />
@@ -66,23 +66,30 @@ export default function HowItWorksSection() {
             {steps.map((step) => (
               <div
                 key={step.id}
-                className={`flex items-start p-6 rounded-xl transition-all duration-300 ${
-                  step.active ? "bg-[#525252] border-l-4 border-[#FF5722] shadow-lg" : "bg-[#525252]/60 hover:bg-[#525252]"
-                }`}
+                className={`flex items-start p-6 rounded-xl transition-all duration-300 ${step.active
+                    ? "border-l-4 border-[#FF5722] bg-white shadow-lg shadow-zinc-900/5 dark:bg-[#525252] dark:shadow-black/20"
+                    : "bg-zinc-100/90 hover:bg-zinc-200 dark:bg-[#525252]/60 dark:hover:bg-[#525252]"
+                  }`}
               >
                 <div
-                  className={`flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center mr-5 ${
-                    step.active ? "bg-[#FF5722] text-white" : "bg-[#18181B] text-[#FF5722]"
-                  }`}
+                  className={`flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center mr-5 ${step.active
+                      ? "bg-[#FF5722] text-white"
+                      : "bg-white text-[#FF5722] dark:bg-[#18181B] dark:text-[#FF5722]"
+                    }`}
                 >
                   {step.icon}
                 </div>
                 <div className="flex-1">
-                  <h3 className={`text-lg font-bold mb-2 ${step.active ? "text-white" : "text-gray-200"}`}>
+                  <h3
+                    className={`mb-2 text-lg font-bold ${step.active
+                        ? "text-zinc-950 dark:text-white"
+                        : "text-zinc-700 dark:text-gray-200"
+                      }`}
+                  >
                     {t(`${step.key}.title`)}
                   </h3>
                   {step.active && (
-                    <p className="text-gray-300 text-sm leading-relaxed">
+                    <p className="text-sm leading-relaxed text-zinc-600 dark:text-gray-300">
                       {t(`${step.key}.description`)}
                     </p>
                   )}
diff --git a/soroban-client/components/LanguageSwitcher.tsx b/soroban-client/components/LanguageSwitcher.tsx
index 3b0cbc6e..a823d697 100644
--- a/soroban-client/components/LanguageSwitcher.tsx
+++ b/soroban-client/components/LanguageSwitcher.tsx
@@ -29,10 +29,10 @@ export default function LanguageSwitcher() {
       value={locale}
       onChange={handleChange}
       aria-label={t("label")}
-      className="bg-transparent border border-gray-400 text-white rounded-lg px-2 py-1 text-sm cursor-pointer focus:outline-none hover:bg-white/10 transition"
+      className="cursor-pointer rounded-lg border border-zinc-300 bg-white/80 px-2 py-1 text-sm text-zinc-700 transition hover:bg-white focus:outline-none dark:border-gray-400 dark:bg-transparent dark:text-white dark:hover:bg-white/10"
     >
       {routing.locales.map((loc) => (
-        <option key={loc} value={loc} className="bg-[#525252] text-white">
+        <option key={loc} value={loc} className="bg-white text-zinc-900 dark:bg-[#525252] dark:text-white">
           {LOCALE_LABELS[loc]}
         </option>
       ))}
diff --git a/soroban-client/components/Marketplace/CreateListingForm.tsx b/soroban-client/components/Marketplace/CreateListingForm.tsx
index 1a22bd0a..2efc44d0 100644
--- a/soroban-client/components/Marketplace/CreateListingForm.tsx
+++ b/soroban-client/components/Marketplace/CreateListingForm.tsx
@@ -17,7 +17,7 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!address) {
       setError("Please connect your wallet first");
       return;
@@ -44,7 +44,7 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
       });
 
       const data = await response.json();
-      
+
       if (data.success) {
         onSuccess();
         setTicketContract("");
@@ -63,13 +63,13 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      <h3 className="text-xl font-semibold text-white">List a Ticket for Resale</h3>
-      <p className="text-sm text-zinc-400">
+      <h3 className="text-xl font-semibold text-zinc-950 dark:text-white">List a Ticket for Resale</h3>
+      <p className="text-sm text-zinc-500 dark:text-zinc-400">
         List your ticket on the marketplace. All listings are subject to price caps to prevent scalping.
       </p>
 
       <div>
-        <label htmlFor="ticketContract" className="block text-sm font-medium text-zinc-300 mb-2">
+        <label htmlFor="ticketContract" className="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">
           Ticket Contract Address
         </label>
         <input
@@ -78,13 +78,13 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
           value={ticketContract}
           onChange={(e) => setTicketContract(e.target.value)}
           placeholder="C..."
-          className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder:text-zinc-500 focus:border-[#FF5722] focus:outline-none"
+          className="w-full rounded-2xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder:text-zinc-400 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder:text-zinc-500"
           required
         />
       </div>
 
       <div>
-        <label htmlFor="tokenId" className="block text-sm font-medium text-zinc-300 mb-2">
+        <label htmlFor="tokenId" className="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">
           Token ID
         </label>
         <input
@@ -93,13 +93,13 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
           value={tokenId}
           onChange={(e) => setTokenId(e.target.value)}
           placeholder="Enter token ID"
-          className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder:text-zinc-500 focus:border-[#FF5722] focus:outline-none"
+          className="w-full rounded-2xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder:text-zinc-400 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder:text-zinc-500"
           required
         />
       </div>
 
       <div>
-        <label htmlFor="price" className="block text-sm font-medium text-zinc-300 mb-2">
+        <label htmlFor="price" className="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">
           Asking Price (XLM)
         </label>
         <input
@@ -109,7 +109,7 @@ export default function CreateListingForm({ onSuccess }: CreateListingFormProps)
           value={price}
           onChange={(e) => setPrice(e.target.value)}
           placeholder="Enter price in XLM"
-          className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder:text-zinc-500 focus:border-[#FF5722] focus:outline-none"
+          className="w-full rounded-2xl border border-zinc-300 bg-white px-4 py-3 text-zinc-900 placeholder:text-zinc-400 focus:border-[#FF5722] focus:outline-none dark:border-white/10 dark:bg-black/20 dark:text-white dark:placeholder:text-zinc-500"
           required
         />
         <p className="mt-2 text-xs text-zinc-500">
diff --git a/soroban-client/components/Marketplace/ListingCard.tsx b/soroban-client/components/Marketplace/ListingCard.tsx
index cc84a89a..7a895104 100644
--- a/soroban-client/components/Marketplace/ListingCard.tsx
+++ b/soroban-client/components/Marketplace/ListingCard.tsx
@@ -46,26 +46,26 @@ export default function ListingCard({
   };
 
   return (
-    <article className="flex h-full flex-col rounded-[28px] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 transition hover:border-white/20">
+    <article className="flex h-full flex-col rounded-[28px] border border-zinc-200 bg-white p-6 shadow-xl shadow-zinc-900/5 transition hover:border-zinc-300 dark:border-white/10 dark:bg-white/5 dark:shadow-black/20 dark:hover:border-white/20">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <p className="text-sm uppercase tracking-[0.3em] text-orange-200/70">
+          <p className="text-sm uppercase tracking-[0.3em] text-orange-700 dark:text-orange-200/70">
             Ticket #{listing.tokenId}
           </p>
-          <h2 className="mt-2 text-2xl font-semibold text-white">
+          <h2 className="mt-2 text-2xl font-semibold text-zinc-950 dark:text-white">
             {listing.eventTitle || "Event Ticket"}
           </h2>
         </div>
-        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-sm text-emerald-200">
+        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-sm text-emerald-700 dark:text-emerald-200">
           {listing.price} XLM
         </span>
       </div>
 
       {listing.eventDate && (
-        <p className="mt-2 text-sm text-zinc-400">{listing.eventDate}</p>
+        <p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{listing.eventDate}</p>
       )}
 
-      <dl className="mt-6 space-y-3 text-sm text-zinc-300">
+      <dl className="mt-6 space-y-3 text-sm text-zinc-600 dark:text-zinc-300">
         <div className="flex items-center justify-between">
           <dt>Seller</dt>
           <dd className="font-mono">{formatAddress(listing.seller)}</dd>
@@ -82,13 +82,13 @@ export default function ListingCard({
         </div>
       </dl>
 
-      <div className="mt-6 rounded-2xl border border-white/10 bg-black/20 p-4">
+      <div className="mt-6 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-white/10 dark:bg-black/20">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-zinc-300">Price</span>
-          <span className="text-xl font-bold text-white">{listing.price} XLM</span>
+          <span className="text-zinc-600 dark:text-zinc-300">Price</span>
+          <span className="text-xl font-bold text-zinc-950 dark:text-white">{listing.price} XLM</span>
         </div>
         {listing.price > 0 && (
-          <p className="mt-2 text-xs uppercase tracking-[0.24em] text-orange-200/80">
+          <p className="mt-2 text-xs uppercase tracking-[0.24em] text-orange-700 dark:text-orange-200/80">
             Price cap enforced
           </p>
         )}
@@ -107,13 +107,13 @@ export default function ListingCard({
             </button>
           ) : (
             <div className="mt-6 space-y-3">
-              <p className="text-center text-sm text-zinc-400">
+              <p className="text-center text-sm text-zinc-500 dark:text-zinc-400">
                 Are you sure you want to cancel this listing?
               </p>
               <div className="flex gap-3">
                 <button
                   onClick={() => setShowCancelConfirm(false)}
-                  className="flex-1 rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-zinc-300 transition hover:bg-white/10"
+                  className="flex-1 rounded-2xl border border-zinc-200 bg-white px-5 py-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-100 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10"
                 >
                   Keep
                 </button>
diff --git a/soroban-client/components/Marketplace/MarketplaceCatalog.tsx b/soroban-client/components/Marketplace/MarketplaceCatalog.tsx
index 7bfdec3f..9c4a1f45 100644
--- a/soroban-client/components/Marketplace/MarketplaceCatalog.tsx
+++ b/soroban-client/components/Marketplace/MarketplaceCatalog.tsx
@@ -26,7 +26,7 @@ export default function MarketplaceCatalog() {
     setLoading(true);
     try {
       let data: Listing[];
-      
+
       switch (filter) {
         case "my-listings":
           if (!address) {
@@ -42,7 +42,7 @@ export default function MarketplaceCatalog() {
         default:
           data = await getActiveListings();
       }
-      
+
       setListings(data);
     } catch (error) {
       console.error("Failed to fetch listings:", error);
@@ -77,7 +77,7 @@ export default function MarketplaceCatalog() {
       });
 
       const result = await response.json();
-      
+
       if (result.success) {
         trackMarketplacePurchase(listing.ticketContract, listing.tokenId, listing.price);
         setStatus(`Successfully purchased ticket #${listing.tokenId}! NFT has been transferred.`);
@@ -95,7 +95,7 @@ export default function MarketplaceCatalog() {
 
   const handleCancelListing = async (listing: Listing) => {
     if (!isConnected || listing.seller !== address) return;
-    
+
     try {
       const response = await fetch("/api/marketplace/cancel", {
         method: "POST",
@@ -105,7 +105,7 @@ export default function MarketplaceCatalog() {
           sellerAddress: address,
         }),
       });
-      
+
       const result = await response.json();
       if (result.success) {
         setStatus(`Listing #${listing.id} cancelled successfully.`);
@@ -128,14 +128,13 @@ export default function MarketplaceCatalog() {
     <section className="space-y-6">
       {/* Filter and Create Bar */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex gap-2 rounded-2xl border border-white/10 bg-white/5 p-1">
+        <div className="flex gap-2 rounded-2xl border border-zinc-200 bg-white p-1 dark:border-white/10 dark:bg-white/5">
           <button
             onClick={() => setFilter("all")}
-            className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
-              filter === "all"
+            className={`rounded-xl px-4 py-2 text-sm font-medium transition ${filter === "all"
                 ? "bg-[#FF5722] text-white"
-                : "text-zinc-400 hover:text-white"
-            }`}
+                : "text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
+              }`}
           >
             All Listings
           </button>
@@ -143,21 +142,19 @@ export default function MarketplaceCatalog() {
             <>
               <button
                 onClick={() => setFilter("my-listings")}
-                className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
-                  filter === "my-listings"
+                className={`rounded-xl px-4 py-2 text-sm font-medium transition ${filter === "my-listings"
                     ? "bg-[#FF5722] text-white"
-                    : "text-zinc-400 hover:text-white"
-                }`}
+                    : "text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
+                  }`}
               >
                 My Listings
               </button>
               <button
                 onClick={() => setFilter("purchased")}
-                className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
-                  filter === "purchased"
+                className={`rounded-xl px-4 py-2 text-sm font-medium transition ${filter === "purchased"
                     ? "bg-[#FF5722] text-white"
-                    : "text-zinc-400 hover:text-white"
-                }`}
+                    : "text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
+                  }`}
               >
                 Purchased
               </button>
@@ -177,7 +174,7 @@ export default function MarketplaceCatalog() {
 
       {/* Create Listing Form */}
       {showCreateForm && (
-        <div className="rounded-[28px] border border-white/10 bg-white/5 p-6">
+        <div className="rounded-[28px] border border-zinc-200 bg-white p-6 shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
           <CreateListingForm onSuccess={handleCreateSuccess} />
         </div>
       )}
@@ -185,16 +182,16 @@ export default function MarketplaceCatalog() {
       {/* Listings Grid */}
       {loading ? (
         <div className="flex justify-center py-12">
-          <div className="text-zinc-400">Loading listings...</div>
+          <div className="text-zinc-500 dark:text-zinc-400">Loading listings...</div>
         </div>
       ) : listings.length === 0 ? (
-        <div className="rounded-[28px] border border-white/10 bg-white/5 p-12 text-center">
-          <p className="text-zinc-400">
+        <div className="rounded-[28px] border border-zinc-200 bg-white p-12 text-center shadow-lg shadow-zinc-900/5 dark:border-white/10 dark:bg-white/5 dark:shadow-none">
+          <p className="text-zinc-500 dark:text-zinc-400">
             {filter === "my-listings"
               ? "You haven't listed any tickets yet."
               : filter === "purchased"
-              ? "You haven't purchased any tickets from the marketplace yet."
-              : "No tickets available for resale at the moment."}
+                ? "You haven't purchased any tickets from the marketplace yet."
+                : "No tickets available for resale at the moment."}
           </p>
           {filter === "all" && isConnected && (
             <button
@@ -222,7 +219,7 @@ export default function MarketplaceCatalog() {
 
       {/* Status Message */}
       {status && (
-        <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-zinc-200">
+        <div className="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200">
           {status}
         </div>
       )}
diff --git a/soroban-client/components/Marketplace/MarketplaceListings.tsx b/soroban-client/components/Marketplace/MarketplaceListings.tsx
index 38c0e6f9..36b9a42e 100644
--- a/soroban-client/components/Marketplace/MarketplaceListings.tsx
+++ b/soroban-client/components/Marketplace/MarketplaceListings.tsx
@@ -19,10 +19,10 @@ export const MarketplaceListings = () => {
   const fetchListings = async () => {
     try {
       setLoading(true);
-      const url = filter === 'all' 
+      const url = filter === 'all'
         ? '/api/marketplace/listings'
         : `/api/marketplace/listings?seller=${address}`;
-      
+
       const response = await fetch(url);
       const data = await response.json();
       setListings(data);
@@ -36,45 +36,43 @@ export const MarketplaceListings = () => {
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <div className="text-white text-lg">Loading listings...</div>
+        <div className="text-lg text-zinc-700 dark:text-white">Loading listings...</div>
       </div>
     );
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8">
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+    <div className="mx-auto max-w-7xl px-4 py-8">
+      <div className="mb-8 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
         <div>
-          <h1 className="text-3xl font-bold text-white">Ticket Marketplace</h1>
-          <p className="text-gray-400 mt-2">Buy and sell tickets peer-to-peer</p>
+          <h1 className="text-3xl font-bold text-zinc-950 dark:text-white">Ticket Marketplace</h1>
+          <p className="mt-2 text-zinc-500 dark:text-gray-400">Buy and sell tickets peer-to-peer</p>
         </div>
-        
+
         <div className="flex gap-3">
-          <div className="flex bg-gray-800 rounded-lg p-1">
+          <div className="flex rounded-lg border border-zinc-200 bg-white p-1 dark:border-white/10 dark:bg-zinc-800">
             <button
               onClick={() => setFilter('all')}
-              className={`px-4 py-2 rounded-md transition ${
-                filter === 'all' 
-                  ? 'bg-blue-600 text-white' 
-                  : 'text-gray-400 hover:text-white'
-              }`}
+              className={`px-4 py-2 rounded-md transition ${filter === 'all'
+                  ? 'bg-blue-600 text-white'
+                  : 'text-zinc-500 hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white'
+                }`}
             >
               All Listings
             </button>
             {isConnected && (
               <button
                 onClick={() => setFilter('my')}
-                className={`px-4 py-2 rounded-md transition ${
-                  filter === 'my' 
-                    ? 'bg-blue-600 text-white' 
-                    : 'text-gray-400 hover:text-white'
-                }`}
+                className={`px-4 py-2 rounded-md transition ${filter === 'my'
+                    ? 'bg-blue-600 text-white'
+                    : 'text-zinc-500 hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white'
+                  }`}
               >
                 My Listings
               </button>
             )}
           </div>
-          
+
           {isConnected && (
             <button
               onClick={() => setShowCreateForm(!showCreateForm)}
@@ -96,8 +94,8 @@ export const MarketplaceListings = () => {
       )}
 
       {listings.length === 0 ? (
-        <div className="text-center text-gray-400 py-12">
-          <div className="text-6xl mb-4">🎫</div>
+        <div className="py-12 text-center text-zinc-500 dark:text-gray-400">
+          <div className="mb-4 text-6xl">🎫</div>
           <p className="text-lg">No tickets available for resale at the moment.</p>
           {isConnected && (
             <div className="mt-4">
diff --git a/soroban-client/components/PartnersSection.tsx b/soroban-client/components/PartnersSection.tsx
index da2a69ed..1b77af8d 100644
--- a/soroban-client/components/PartnersSection.tsx
+++ b/soroban-client/components/PartnersSection.tsx
@@ -22,11 +22,11 @@ export default function PartnersSection() {
   ];
 
   return (
-    <section className="bg-[#18181B] pb-24 border-t border-gray-800">
+    <section className="border-t border-zinc-200 bg-background pb-24 dark:border-gray-800">
       <div className="pt-16 pb-12 text-center">
-        <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">{t("title")}</h2>
+        <h2 className="mb-8 text-4xl font-bold text-zinc-950 dark:text-white md:text-5xl">{t("title")}</h2>
       </div>
-      <div className="w-full bg-[#0d0d10] py-12 overflow-hidden relative flex">
+      <div className="relative flex w-full overflow-hidden bg-zinc-950 py-12 dark:bg-[#0d0d10]">
         <style jsx>{`
           @keyframes scroll-marquee {
             0% { transform: translateX(0); }
@@ -36,9 +36,9 @@ export default function PartnersSection() {
             animation: scroll-marquee 20s linear infinite;
           }
         `}</style>
-        <div className="flex animate-marquee whitespace-nowrap gap-16 md:gap-32 items-center px-4 min-w-full">
+        <div className="flex min-w-full animate-marquee items-center gap-16 whitespace-nowrap px-4 md:gap-32">
           {partners.map((partner, index) => (
-            <div key={index} className="flex-shrink-0 flex items-center justify-center">
+            <div key={index} className="flex flex-shrink-0 items-center justify-center">
               {partner.type === "argent" && (
                 <Image src="/argent.svg" alt="Argent" width={160} height={50} className="h-10 w-auto" />
               )}
diff --git a/soroban-client/components/ThemeToggle.tsx b/soroban-client/components/ThemeToggle.tsx
new file mode 100644
index 00000000..33f01db3
--- /dev/null
+++ b/soroban-client/components/ThemeToggle.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { MoonStar, SunMedium } from "lucide-react";
+
+import { useTheme } from "@/contexts/ThemeContext";
+
+export default function ThemeToggle({ className = "" }: { className?: string }) {
+  const { isReady, resolvedTheme, toggleTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+  const label = isDarkMode ? "Switch to light mode" : "Switch to dark mode";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className={`inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-300/80 bg-white/70 px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-white md:px-4 dark:border-white/10 dark:bg-white/10 dark:text-zinc-100 dark:hover:bg-white/15 ${className}`.trim()}
+      aria-label={label}
+      title={label}
+    >
+      {isReady ? (
+        isDarkMode ? (
+          <SunMedium size={18} aria-hidden="true" />
+        ) : (
+          <MoonStar size={18} aria-hidden="true" />
+        )
+      ) : (
+        <span className="h-[18px] w-[18px]" aria-hidden="true" />
+      )}
+      <span className="hidden lg:inline">{isDarkMode ? "Light" : "Dark"}</span>
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/soroban-client/components/TicketQRModal.tsx b/soroban-client/components/TicketQRModal.tsx
index 0f7c225e..6f825daf 100644
--- a/soroban-client/components/TicketQRModal.tsx
+++ b/soroban-client/components/TicketQRModal.tsx
@@ -51,18 +51,18 @@ export default function TicketQRModal({ event, address, onClose }: TicketQRModal
 
   return (
     <div className="fixed inset-0 z-100 flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm">
-      <div className="relative w-full max-w-sm rounded-[32px] bg-[#27272A] p-8 shadow-2xl border border-white/10">
+      <div className="relative w-full max-w-sm rounded-[32px] border border-zinc-200 bg-white p-8 text-zinc-900 shadow-2xl shadow-zinc-900/10 dark:border-white/10 dark:bg-[#27272A] dark:text-white dark:shadow-black/30">
         <button
           onClick={onClose}
-          className="absolute right-6 top-6 text-gray-400 hover:text-white transition"
+          className="absolute right-6 top-6 text-zinc-500 transition hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white"
         >
           <X size={24} />
         </button>
 
         <div className="flex flex-col items-center text-center space-y-6">
           <div className="space-y-2">
-            <h2 className="text-2xl font-bold text-white tracking-tight">{event.theme}</h2>
-            <p className="text-gray-400 text-sm">Scan to verify your ticket at entry</p>
+            <h2 className="text-2xl font-bold tracking-tight text-zinc-950 dark:text-white">{event.theme}</h2>
+            <p className="text-sm text-zinc-500 dark:text-gray-400">Scan to verify your ticket at entry</p>
           </div>
 
           <div className="rounded-2xl bg-white p-6 shadow-inner ring-4 ring-white/5 relative">
@@ -96,32 +96,32 @@ export default function TicketQRModal({ event, address, onClose }: TicketQRModal
 
           {signature ? (
             <div className="flex items-center gap-2 text-emerald-400 text-xs font-bold uppercase tracking-wider bg-emerald-500/10 px-3 py-1.5 rounded-full border border-emerald-500/20">
-               <ShieldCheck size={14} /> Cryptographically Signed
+              <ShieldCheck size={14} /> Cryptographically Signed
             </div>
           ) : (
             <div className="flex items-center gap-2 text-amber-400 text-[10px] font-bold uppercase tracking-wider bg-amber-500/10 px-3 py-1.5 rounded-full border border-amber-500/20">
-               <ShieldAlert size={14} /> Unverified QR Code
+              <ShieldAlert size={14} /> Unverified QR Code
             </div>
           )}
 
           <div className="w-full space-y-3 pt-4">
-             <div className="flex justify-between text-xs font-mono text-gray-500 border-b border-white/5 pb-2">
-                <span>Token ID</span>
-                <span className="text-gray-300">#{tokenId?.toString() || "..."}</span>
-             </div>
-             <div className="flex justify-between text-xs font-mono text-gray-500 border-b border-white/5 pb-2">
-                <span>Event ID</span>
-                <span className="text-gray-300">{event.id}</span>
-             </div>
-             <div className="flex justify-between text-xs font-mono text-gray-500">
-                <span>Owner</span>
-                <span className="text-gray-300 truncate ml-4" title={address}>
-                  {address.substring(0, 8)}...{address.slice(-8)}
-                </span>
-             </div>
+            <div className="flex justify-between border-b border-zinc-200 pb-2 text-xs font-mono text-zinc-500 dark:border-white/5 dark:text-gray-500">
+              <span>Token ID</span>
+              <span className="text-zinc-700 dark:text-gray-300">#{tokenId?.toString() || "..."}</span>
+            </div>
+            <div className="flex justify-between border-b border-zinc-200 pb-2 text-xs font-mono text-zinc-500 dark:border-white/5 dark:text-gray-500">
+              <span>Event ID</span>
+              <span className="text-zinc-700 dark:text-gray-300">{event.id}</span>
+            </div>
+            <div className="flex justify-between text-xs font-mono text-zinc-500 dark:text-gray-500">
+              <span>Owner</span>
+              <span className="ml-4 truncate text-zinc-700 dark:text-gray-300" title={address}>
+                {address.substring(0, 8)}...{address.slice(-8)}
+              </span>
+            </div>
           </div>
-          
-          <p className="text-[10px] text-gray-500 uppercase tracking-widest pt-2">
+
+          <p className="pt-2 text-[10px] uppercase tracking-widest text-zinc-500 dark:text-gray-500">
             Valid Ticket Signature Included
           </p>
         </div>
diff --git a/soroban-client/contexts/ThemeContext.tsx b/soroban-client/contexts/ThemeContext.tsx
new file mode 100644
index 00000000..008ca0c7
--- /dev/null
+++ b/soroban-client/contexts/ThemeContext.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type ThemePreference = "light" | "dark" | "system";
+export type ResolvedTheme = Exclude<ThemePreference, "system">;
+
+const STORAGE_KEY = "crowdpass-theme";
+
+type ThemeContextValue = {
+  isReady: boolean;
+  theme: ThemePreference;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: ThemePreference) => void;
+  toggleTheme: () => void;
+};
+
+const defaultThemeContext: ThemeContextValue = {
+  isReady: false,
+  theme: "system",
+  resolvedTheme: "light",
+  setTheme: () => { },
+  toggleTheme: () => { },
+};
+
+const ThemeContext = createContext<ThemeContextValue>(defaultThemeContext);
+
+const getStoredTheme = (): ThemePreference => {
+  const storedTheme = window.localStorage.getItem(STORAGE_KEY);
+
+  if (storedTheme === "light" || storedTheme === "dark") {
+    return storedTheme;
+  }
+
+  return "system";
+};
+
+const getSystemTheme = (): ResolvedTheme =>
+  window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+const resolveTheme = (theme: ThemePreference): ResolvedTheme =>
+  theme === "system" ? getSystemTheme() : theme;
+
+const applyResolvedTheme = (theme: ResolvedTheme) => {
+  const root = document.documentElement;
+
+  root.classList.toggle("dark", theme === "dark");
+  root.style.colorScheme = theme;
+};
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<ThemePreference>("system");
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("light");
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setTheme(getStoredTheme());
+    setIsReady(true);
+  }, []);
+
+  useEffect(() => {
+    const nextResolvedTheme = resolveTheme(theme);
+
+    setResolvedTheme(nextResolvedTheme);
+    applyResolvedTheme(nextResolvedTheme);
+
+    if (theme === "system") {
+      window.localStorage.removeItem(STORAGE_KEY);
+      return;
+    }
+
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const handleMediaChange = () => {
+      if (theme !== "system") {
+        return;
+      }
+
+      const nextResolvedTheme = getSystemTheme();
+      setResolvedTheme(nextResolvedTheme);
+      applyResolvedTheme(nextResolvedTheme);
+    };
+
+    mediaQuery.addEventListener("change", handleMediaChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaChange);
+    };
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((currentTheme) =>
+      resolveTheme(currentTheme) === "dark" ? "light" : "dark"
+    );
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isReady,
+        theme,
+        resolvedTheme,
+        setTheme,
+        toggleTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
\ No newline at end of file
diff --git a/soroban-client/package-lock.json b/soroban-client/package-lock.json
index c8670d42..58b230f5 100644
--- a/soroban-client/package-lock.json
+++ b/soroban-client/package-lock.json
@@ -90,7 +90,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -3592,6 +3591,7 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3612,6 +3612,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -3725,7 +3726,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3914,7 +3916,6 @@
       "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3925,7 +3926,6 @@
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3936,7 +3936,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4017,7 +4016,6 @@
       "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.1",
         "@typescript-eslint/types": "8.53.1",
@@ -4525,7 +4523,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5120,7 +5117,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5693,6 +5689,7 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -5754,7 +5751,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -6072,7 +6070,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6258,7 +6255,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10161,6 +10157,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -11057,6 +11054,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -11072,6 +11070,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -11084,7 +11083,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prompts": {
       "version": "2.4.2",
@@ -11208,7 +11208,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11218,7 +11217,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -11231,7 +11229,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.72.0.tgz",
       "integrity": "sha512-V4v6jubaf6JAurEaVnT9aUPKFbNtDgohj5CIgVGyPHvT9wRx5OZHVjz31GsxnPNI278XMu+ruFz+wGOscHaLKw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -12228,7 +12225,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12324,7 +12320,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12514,7 +12509,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13056,7 +13050,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/soroban-client/yarn.lock b/soroban-client/yarn.lock
index bab9ed2b..0001aee2 100644
--- a/soroban-client/yarn.lock
+++ b/soroban-client/yarn.lock
@@ -436,17 +436,29 @@
   resolved "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz"
   integrity sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==
 
-"@img/sharp-darwin-arm64@0.34.5":
+"@img/sharp-libvips-linux-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz"
+  integrity sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==
+
+"@img/sharp-libvips-linuxmusl-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz"
+  integrity sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==
+
+"@img/sharp-linux-x64@0.34.5":
   version "0.34.5"
-  resolved "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz"
-  integrity sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==
+  resolved "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz"
+  integrity sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==
   optionalDependencies:
-    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+    "@img/sharp-libvips-linux-x64" "1.2.4"
 
-"@img/sharp-libvips-darwin-arm64@1.2.4":
-  version "1.2.4"
-  resolved "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz"
-  integrity sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==
+"@img/sharp-linuxmusl-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz"
+  integrity sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -755,10 +767,15 @@
   dependencies:
     fast-glob "3.3.1"
 
-"@next/swc-darwin-arm64@16.1.4":
+"@next/swc-linux-x64-gnu@16.1.4":
+  version "16.1.4"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.4.tgz"
+  integrity sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ==
+
+"@next/swc-linux-x64-musl@16.1.4":
   version "16.1.4"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.4.tgz"
-  integrity sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg==
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.4.tgz"
+  integrity sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw==
 
 "@noble/curves@^1.9.6":
   version "1.9.7"
@@ -798,10 +815,15 @@
   resolved "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz"
   integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
 
-"@parcel/watcher-darwin-arm64@2.5.6":
+"@parcel/watcher-linux-x64-glibc@2.5.6":
   version "2.5.6"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz"
-  integrity sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz"
+  integrity sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==
+
+"@parcel/watcher-linux-x64-musl@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz"
+  integrity sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==
 
 "@parcel/watcher@^2.4.1":
   version "2.5.6"
@@ -906,10 +928,15 @@
     toml "^3.0.0"
     urijs "^1.19.1"
 
-"@swc/core-darwin-arm64@1.15.21":
+"@swc/core-linux-x64-gnu@1.15.21":
+  version "1.15.21"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.21.tgz"
+  integrity sha512-D0RokxtM+cPvSqJIKR6uja4hbD+scI9ezo95mBhfSyLUs9wnPPl26sLp1ZPR/EXRdYm3F3S6RUtVi+8QXhT24Q==
+
+"@swc/core-linux-x64-musl@1.15.21":
   version "1.15.21"
-  resolved "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.21.tgz"
-  integrity sha512-SA8SFg9dp0qKRH8goWsax6bptFE2EdmPf2YRAQW9WoHGf3XKM1bX0nd5UdwxmC5hXsBUZAYf7xSciCler6/oyA==
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.21.tgz"
+  integrity sha512-nER8u7VeRfmU6fMDzl1NQAbbB/G7O2avmvCOwIul1uGkZ2/acbPH+DCL9h5+0yd/coNcxMBTL6NGepIew+7C2w==
 
 "@swc/core@^1.15.2":
   version "1.15.21"
@@ -964,10 +991,15 @@
     source-map-js "^1.2.1"
     tailwindcss "4.1.18"
 
-"@tailwindcss/oxide-darwin-arm64@4.1.18":
+"@tailwindcss/oxide-linux-x64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz"
+  integrity sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==
+
+"@tailwindcss/oxide-linux-x64-musl@4.1.18":
   version "4.1.18"
-  resolved "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz"
-  integrity sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==
+  resolved "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz"
+  integrity sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==
 
 "@tailwindcss/oxide@4.1.18":
   version "4.1.18"
@@ -1289,10 +1321,15 @@
     "@typescript-eslint/types" "8.53.1"
     eslint-visitor-keys "^4.2.1"
 
-"@unrs/resolver-binding-darwin-arm64@1.11.1":
+"@unrs/resolver-binding-linux-x64-gnu@1.11.1":
   version "1.11.1"
-  resolved "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz"
-  integrity sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==
+  resolved "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz"
+  integrity sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==
+
+"@unrs/resolver-binding-linux-x64-musl@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz"
+  integrity sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==
 
 abab@^2.0.6:
   version "2.0.6"
@@ -2613,11 +2650,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -3808,10 +3840,15 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lightningcss-darwin-arm64@1.30.2:
+lightningcss-linux-x64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz"
+  integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
+
+lightningcss-linux-x64-musl@1.30.2:
   version "1.30.2"
-  resolved "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz"
-  integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
+  resolved "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz"
+  integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
 
 lightningcss@1.30.2:
   version "1.30.2"