diff --git a/src/components/PhotoWallCropModal.tsx b/src/components/PhotoWallCropModal.tsx
index c6f181f..d6f3d73 100644
--- a/src/components/PhotoWallCropModal.tsx
+++ b/src/components/PhotoWallCropModal.tsx
@@ -49,7 +49,7 @@ export function PhotoWallCropModal({
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 p-4 sm:items-center">
       <div className="flex w-full max-w-[420px] flex-col overflow-hidden rounded-2xl card-bg shadow-xl">
-        <div className="border-b border-[var(--theme-card-border-color)]/5 px-4 py-3">
+        <div className="border-b border-[var(--theme-card-text-color)]/10 px-4 py-3">
           <p className="font-inter text-base font-semibold text-[var(--theme-card-text-color)]">Crop your photo</p>
           <p className="mt-0.5 font-inter text-xs text-[var(--theme-card-text-color)]/80">
             Adjust to match the wall photo ratio before uploading.
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 9160ff6..fbfad60 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -260,7 +260,6 @@ export function LoginPage() {
                 <div className="min-w-0 space-y-1">
                   <p className="text-xl font-bold leading-tight text-[var(--theme-card-text-color)] sm:text-2xl">
                     {headline}
-                    {/* Novel Lung Health Summit 2026 Kochi 22nd & 23rd August 2026 */}
                   </p>
                   {preview?.subtitle ? (
                     <p className="text-sm font-medium text-[var(--theme-card-text-color)]/80">{preview.subtitle}</p>
diff --git a/src/pages/PhotoSearchPage.tsx b/src/pages/PhotoSearchPage.tsx
index 8072a22..42ad2a3 100644
--- a/src/pages/PhotoSearchPage.tsx
+++ b/src/pages/PhotoSearchPage.tsx
@@ -191,7 +191,7 @@ function MatchCard({
             <button
               type="button"
               onClick={() => void onNativeShare()}
-              className="inline-flex h-[34px] w-[34px] items-center justify-center rounded-lg border-0 border-[var(--theme-card-text-color)]/45 bg-[var(--theme-card-color)]/80 text-xs font-semibold text-[var(--theme-card-text-color)]"
+              className="inline-flex h-[34px] w-[34px] items-center justify-center rounded-lg border-0 border-[var(--theme-card-text-color)]/45 bg-[var(--theme-card-text-color)]/50 text-xs font-semibold text-[var(--theme-card-text-color)]"
             >
               <Share2 className="size-5" />
             </button>
@@ -202,7 +202,7 @@ function MatchCard({
                   key={item.key}
                   type="button"
                   onClick={() => void onShare(item.key)}
-                  className="inline-flex h-[34px] w-[34px] items-center justify-center rounded-lg border-0 border-[var(--theme-card-text-color)]/45 bg-[var(--theme-card-color)]/80 text-xs font-semibold text-[var(--theme-card-text-color)]"
+                  className="inline-flex h-[34px] w-[34px] items-center justify-center rounded-lg border-0 border-[var(--theme-card-text-color)]/45 bg-[var(--theme-card-text-color)]/50 text-xs font-semibold text-[var(--theme-card-text-color)]"
                 >
                   <SharePlatformIcon platform={item.key} />
                   {/* {item.label} */}
diff --git a/src/pages/PhotoWallPresentPage.tsx b/src/pages/PhotoWallPresentPage.tsx
index e32427e..7654777 100644
--- a/src/pages/PhotoWallPresentPage.tsx
+++ b/src/pages/PhotoWallPresentPage.tsx
@@ -101,13 +101,13 @@ export function PhotoWallPresentPage() {
           {data.photos.map((p) => (
             <div
               key={p._id}
-              className="flex w-full flex-col items-center"
+              className="flex w-full flex-col items-center rounded-xl bg-[var(--theme-card-color)]/50"
               style={{ maxWidth: maxW }}
             >
               <img
                 src={p.url}
-                alt=""
-                className="w-full rounded-md object-cover shadow-lg"
+                alt={p.displayName || "Photo Wall"}
+                className="relative z-1 w-full object-cover shadow-lg"
                 style={{
                   maxWidth: maxW,
                   maxHeight: maxH,
@@ -117,7 +117,7 @@ export function PhotoWallPresentPage() {
               />
               {showNames && p.displayName ? (
                 <p
-                  className="mt- w-full truncate rounded-md bg-[var(--theme-card-color)] p-1 text-center text-xs font-medium text-[var(--theme-card-text-color)]/90 sm:text-sm"
+                  className="mt-1 w-full truncate rounded-md p-2 text-center text-sm font-bold text-[var(--theme-card-text-color)]/90"
                   title={p.displayName}
                 >
                   {p.displayName}
diff --git a/src/pages/PhotoWallUploadPage.tsx b/src/pages/PhotoWallUploadPage.tsx
index bc21f95..21a5bb7 100644
--- a/src/pages/PhotoWallUploadPage.tsx
+++ b/src/pages/PhotoWallUploadPage.tsx
@@ -10,12 +10,14 @@ import {
 import {
   Download,
   ImagePlus,
+  Loader2,
   Share2,
 } from "lucide-react";
 import { useParams } from "react-router-dom";
-import { AuthShell } from "../components/auth/AuthShell";
+import { HeaderMobile } from "../components/HeaderMobile";
+import { MobileShell } from "../components/MobileShell";
 import { PhotoWallCropModal } from "../components/PhotoWallCropModal";
-import { PhotoWallEventHeader } from "../components/PhotoWallEventHeader";
+import { PublicEventChrome } from "../components/PublicEventChrome";
 import { SharePlatformIcon } from "../components/SharePlatformIcon";
 import {
   getPhotoWallUploadMeta,
@@ -45,13 +47,29 @@ function fieldKey(f: PhotoWallPublicFormField): string {
   return String(f.name || f.label || "").trim();
 }
 
-function WhiteCard({ children }: { children: ReactNode }) {
+function PhotoWallLayout({
+  children,
+  meta,
+}: {
+  children: ReactNode;
+  meta?: PhotoWallUploadMeta | null;
+}) {
   return (
-    <div className="flex w-full max-w-[354px] flex-col items-center">
-      <div className="w-full rounded-xl shadow-[0_8px_12px_6px_rgba(0,0,0,0.15),0_4px_4px_rgba(0,0,0,0.3)]">
-        <div className="rounded-xl card-bg text-[var(--theme-card-text-color)] shadow-md px-6 py-6">{children}</div>
-      </div>
-    </div>
+    <MobileShell className="relative bg-transparent">
+      {meta ? (
+        <PublicEventChrome
+          event={meta.event}
+          eventHeader={meta.eventHeader}
+          eventNameFallback={meta.eventName}
+          eventId={meta.eventId}
+        />
+      ) : (
+        <HeaderMobile showRewardsAndLogout={false} showBack={false} />
+      )}
+      <main className="relative z-0 flex w-full max-w-none flex-1 flex-col pb-8 pt-6">
+        <div className="flex w-full max-w-none flex-col px-4">{children}</div>
+      </main>
+    </MobileShell>
   );
 }
 
@@ -91,6 +109,7 @@ export function PhotoWallUploadPage() {
   const [submitting, setSubmitting] = useState(false);
   const [picking, setPicking] = useState(false);
   const [done, setDone] = useState<UploadDoneState | null>(null);
+  const [resultImageReady, setResultImageReady] = useState(false);
   const [actionMsg, setActionMsg] = useState<string | null>(null);
   const [cropSession, setCropSession] = useState<CropSession | null>(null);
   /** Cached bytes for share/download — avoids CORS/network fail when opening the OS sheet. */
@@ -148,6 +167,15 @@ export function PhotoWallUploadPage() {
     if (fileRef.current) fileRef.current.value = "";
   }, []);
 
+  useEffect(() => {
+    const src = done?.previewUrl || done?.fileUrl;
+    if (!done || !src) return;
+    const img = resultImgRef.current;
+    if (img?.complete && img.naturalWidth > 0) {
+      setResultImageReady(true);
+    }
+  }, [done]);
+
   useEffect(() => {
     if (!done?.fileUrl) return;
     let cancelled = false;
@@ -165,6 +193,7 @@ export function PhotoWallUploadPage() {
 
   const resetForNewUpload = useCallback(() => {
     setDone(null);
+    setResultImageReady(false);
     setShareFile(null);
     setActionMsg(null);
     setErr(null);
@@ -221,6 +250,7 @@ export function PhotoWallUploadPage() {
       return;
     }
     setSubmitting(true);
+    setResultImageReady(false);
     setErr(null);
     setActionMsg(null);
     try {
@@ -350,31 +380,46 @@ export function PhotoWallUploadPage() {
 
   if (!uploadToken) {
     return (
-      <AuthShell showLogo={false}>
-        <WhiteCard>
-          <p className="text-center text-sm text-red-600">Missing upload link</p>
-        </WhiteCard>
-      </AuthShell>
+      <PhotoWallLayout>
+        <p className="text-center text-sm text-red-600">Missing upload link</p>
+      </PhotoWallLayout>
     );
   }
 
   if (loading) {
     return (
-      <AuthShell showLogo={false}>
-        <WhiteCard>
-          <p className="text-center text-sm text-[var(--theme-card-text-color)]/70">Loading…</p>
-        </WhiteCard>
-      </AuthShell>
+      <PhotoWallLayout>
+        <p className="text-center text-sm text-[var(--theme-card-text-color)]/80">Loading…</p>
+      </PhotoWallLayout>
     );
   }
 
   if (err && !meta) {
     return (
-      <AuthShell showLogo={false}>
-        <WhiteCard>
-          <p className="text-center text-sm text-red-600">{err}</p>
-        </WhiteCard>
-      </AuthShell>
+      <PhotoWallLayout>
+        <p className="text-center text-sm text-red-600">{err}</p>
+      </PhotoWallLayout>
+    );
+  }
+
+  if (submitting) {
+    const framing = Boolean(meta?.frameEnabled);
+    return (
+      <PhotoWallLayout meta={meta}>
+        <section className="w-full card-bg rounded-lg shadow-md p-6">
+          <div className="flex flex-col items-center py-8 text-center">
+            <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--theme-button-color)]/10">
+              <Loader2 className="h-8 w-8 animate-spin text-[var(--theme-button-color)]" aria-hidden />
+            </div>
+            <h2 className="mb-2 text-[22px] font-semibold text-[var(--theme-card-text-color)]">
+              {framing ? "Creating your photo" : "Uploading your photo"}
+            </h2>
+            <p className="text-sm text-[var(--theme-card-text-color)]/80" aria-live="polite">
+              {framing ? "Hang tight — we're adding your frame." : "This may take a moment."}
+            </p>
+          </div>
+        </section>
+      </PhotoWallLayout>
     );
   }
 
@@ -382,13 +427,8 @@ export function PhotoWallUploadPage() {
     const canDownload = Boolean(meta?.allowFramedDownload && (done.fileUrl || done.previewUrl));
     const showShare = Boolean((done.fileUrl || done.previewUrl) && enabledSharePlatforms.length > 0);
     return (
-      <AuthShell showLogo={false}>
-        <WhiteCard>
-          {meta?.event ? (
-            <div className="mb-4">
-              <PhotoWallEventHeader event={meta.event} display={meta.eventHeader || null} />
-            </div>
-          ) : null}
+      <PhotoWallLayout meta={meta}>
+        <section className="w-full card-bg rounded-lg shadow-md p-6">
           <h1 className="mb-2 text-center text-[22px] font-semibold text-[var(--theme-card-text-color)]">
             {done.framed ? "Your framed photo" : "Photo uploaded"}
           </h1>
@@ -396,17 +436,34 @@ export function PhotoWallUploadPage() {
             {done.awaitingApproval
               ? "Thanks! Your photo is waiting for approval."
               : done.framed
-                ? "Here’s your generated photo. You can edit, download, or share it."
+                ? "Here's your generated photo. You can edit, download, or share it."
                 : "Thanks! Your photo was added to the wall."}
           </p>
           {(done.fileUrl || done.previewUrl) ? (
-            <div className="mb-4 overflow-hidden rounded-lg border border-[#e5e5e5] bg-[#f8f8f8]">
+            <div className="relative mb-4 min-h-[220px] overflow-hidden rounded-lg bg-[var(--theme-card-text-color)]/5">
+              {!resultImageReady ? (
+                <div
+                  className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3"
+                  role="status"
+                  aria-live="polite"
+                  aria-label="Loading photo"
+                >
+                  <div
+                    className="size-10 animate-spin rounded-full border-[3px] border-[var(--theme-button-color)]/25 border-t-[var(--theme-button-color)]"
+                    aria-hidden
+                  />
+                  <p className="text-xs font-medium text-[var(--theme-card-text-color)]/70">Preparing your photo…</p>
+                </div>
+              ) : null}
               <img
                 ref={resultImgRef}
                 crossOrigin="anonymous"
                 src={done.previewUrl || done.fileUrl || undefined}
                 alt={done.framed ? "Your framed photo" : "Uploaded photo"}
-                className="mx-auto max-h-[360px] w-full object-contain"
+                className={`mx-auto max-h-[360px] w-full object-contain transition-opacity duration-300 ${
+                  resultImageReady ? "opacity-100" : "opacity-0"
+                }`}
+                onLoad={() => setResultImageReady(true)}
                 onError={(e) => {
                   const img = e.currentTarget;
                   // Retry without CORS mode if CDN blocks anonymous reads.
@@ -417,7 +474,9 @@ export function PhotoWallUploadPage() {
                   }
                   if (done.fileUrl && img.src !== done.fileUrl) {
                     img.src = done.fileUrl;
+                    return;
                   }
+                  setResultImageReady(true);
                 }}
               />
             </div>
@@ -426,18 +485,18 @@ export function PhotoWallUploadPage() {
             <button
               type="button"
               onClick={resetForNewUpload}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-[#D32F2F theme-btn-bg px-4 text-sm font-semibold text-white hover:bg-[#b71c1c]"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg theme-btn-bg px-4 text-sm font-semibold"
             >
-              <ImagePlus className="h-4 w-4" />
+              <ImagePlus className="size-5" />
               Edit / Upload new photo
             </button>
             {canDownload ? (
               <button
                 type="button"
                 onClick={() => void onDownload()}
-                className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+                className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-zinc-100 text-gray-600 px-4 text-sm font-semibold"
               >
-                <Download className="h-4 w-4" />
+                <Download className="size-5" />
                 Download photo
               </button>
             ) : null}
@@ -451,42 +510,37 @@ export function PhotoWallUploadPage() {
                 <button
                   type="button"
                   onClick={() => void onNativeShare()}
-                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-4 text-sm font-semibold text-[#333] hover:bg-[#fafafa]"
+                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg  border border-zinc-300 bg-zinc-100 text-gray-600 px-4 text-sm font-semibold"
                 >
-                  <Share2 className="h-4 w-4" />
+                  <Share2 className="size-5" />
                   Share
                 </button>
               ) : (
-                <div className="grid grid-cols-2 gap-2">
+                <div className="flex flex-wrap justify-center gap-2">
                   {enabledSharePlatforms.map((item) => (
                     <button
                       key={item.key}
                       type="button"
                       onClick={() => void onShare(item.key)}
-                      className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-[#ddd] bg-white px-3 text-xs font-semibold text-[#333] hover:bg-[#fafafa]"
+                      className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-zinc-100 text-gray-600 px-3 text-xs font-semibold"
                     >
                       <SharePlatformIcon platform={item.key} />
-                      {item.label}
+                      {/* {item.label} */}
                     </button>
                   ))}
                 </div>
               )}
             </div>
           ) : null}
-          {actionMsg ? <p className="mt-3 text-center text-xs text-[#666]">{actionMsg}</p> : null}
-        </WhiteCard>
-      </AuthShell>
+          {actionMsg ? <p className="mt-3 text-center text-xs text-[var(--theme-card-text-color)]/80">{actionMsg}</p> : null}
+        </section>
+      </PhotoWallLayout>
     );
   }
 
   return (
-    <AuthShell showLogo={false}>
-      <WhiteCard>
-        {meta?.event ? (
-          <div className="mb-4">
-            <PhotoWallEventHeader event={meta.event} display={meta.eventHeader || null} />
-          </div>
-        ) : null}
+    <PhotoWallLayout meta={meta}>
+      <section className="w-full card-bg rounded-lg shadow-md p-6">
         <h1 className="mb-1 text-center text-[22px] font-semibold text-[var(--theme-card-text-color)]">Upload your photo</h1>
         <p className="mb-5 text-center text-sm text-[var(--theme-card-text-color)]/80">
           {meta?.form?.description || "Add a selfie to the event photo wall."}
@@ -518,13 +572,13 @@ export function PhotoWallUploadPage() {
                 type="button"
                 disabled={picking}
                 onClick={() => fileRef.current?.click()}
-                className="flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[#ccc] bg-[#fafafa] px-4 py-8 text-sm text-[#666] hover:border-[#D32F2F] hover:bg-[#fff5f5]"
+                className="flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--theme-card-text-color)]/30 bg-[var(--theme-card-color)]/80 px-4 py-4 text-sm text-[var(--theme-card-text-color)] hover:border-[var(--theme-button-color)]/70"
               >
                 {previewUrl ? (
                   <img src={previewUrl} alt="Preview" className="max-h-48 rounded-md object-contain" />
                 ) : (
                   <>
-                    <ImagePlus className="h-8 w-8 text-[#D32F2F]" />
+                    <ImagePlus className="size-8 text-[var(--theme-button-color)]" />
                     <span>{picking ? "Preparing…" : "Tap to take or choose a photo"}</span>
                   </>
                 )}
@@ -566,7 +620,7 @@ export function PhotoWallUploadPage() {
                       onChange={(e) => setValues((v) => ({ ...v, [key]: e.target.value }))}
                       required={required}
                       rows={3}
-                      className="w-full rounded-lg border border-[rgba(116,112,112,0.3)] px-3 py-2 text-sm transition-colors duration-300 ease-in-out focus:border-[var(--theme-button-color)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-button-color)]/30"
+                      className="w-full rounded-lg border border-[var(--theme-card-text-color)]/10 bg-[var(--theme-card-color)]/40 px-3 py-2 text-sm transition-colors duration-300 ease-in-out focus:border-[var(--theme-button-color)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-button-color)]/30"
                     />
                   </label>
                 );
@@ -582,7 +636,7 @@ export function PhotoWallUploadPage() {
                     value={String(values[key] ?? "")}
                     onChange={(e) => setValues((v) => ({ ...v, [key]: e.target.value }))}
                     required={required}
-                    className="h-10 w-full rounded-lg border border-[rgba(116,112,112,0.3)] px-3 text-sm transition-colors duration-300 ease-in-out focus:border-[var(--theme-button-color)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-button-color)]/30"
+                    className="h-10 w-full rounded-lg border border-[var(--theme-card-text-color)]/10 bg-[var(--theme-card-color)]/40 px-3 text-sm transition-colors duration-300 ease-in-out focus:border-[var(--theme-button-color)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-button-color)]/30"
                   />
                 </label>
               );
@@ -593,13 +647,13 @@ export function PhotoWallUploadPage() {
             <button
               type="submit"
               disabled={!file || submitting || picking}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-[#D32F2F theme-btn-bg px-4 text-sm font-semibold text-white hover:bg-[#b71c1c] disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center rounded-lg theme-btn-bg px-4 text-sm font-semibold text-white disabled:opacity-50"
             >
               {submitting ? "Uploading…" : "Upload"}
             </button>
           </form>
         )}
-      </WhiteCard>
+      </section>
 
       {cropSession && meta ? (
         <PhotoWallCropModal
@@ -620,6 +674,6 @@ export function PhotoWallUploadPage() {
           }}
         />
       ) : null}
-    </AuthShell>
+    </PhotoWallLayout>
   );
 }
diff --git a/src/pages/SocialSharePage.tsx b/src/pages/SocialSharePage.tsx
index 45f0a9e..92c775c 100644
--- a/src/pages/SocialSharePage.tsx
+++ b/src/pages/SocialSharePage.tsx
@@ -397,7 +397,7 @@ export function SocialSharePage() {
             Here's your framed photo. You can download or share it.
           </p>
           {(done.fileUrl || done.previewUrl) ? (
-            <div className="relative mb-4 min-h-[220px] overflow-hidden rounded-lg bg-[var(--theme-card-text-color)]/5">
+            <div className="relative mb-4 min-h-[220px] overflow-hidden rounded-lg">
               {!resultImageReady ? (
                 <div
                   className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3"
@@ -489,7 +489,7 @@ export function SocialSharePage() {
               )}
             </div>
           ) : null}
-          {actionMsg ? <p className="mt-3 text-center text-xs text-[#666]">{actionMsg}</p> : null}
+          {actionMsg ? <p className="mt-3 text-center text-xs text-[var(--theme-card-text-color)]/80">{actionMsg}</p> : null}
         </section>
       </SocialShareLayout>
     );