diff --git a/src/app/[locale]/acmm-leaderboard/page.tsx b/src/app/[locale]/acmm-leaderboard/page.tsx
index a5d46e484..b668ce58a 100644
--- a/src/app/[locale]/acmm-leaderboard/page.tsx
+++ b/src/app/[locale]/acmm-leaderboard/page.tsx
@@ -1,12 +1,7 @@
 "use client";
 
 import { useState, useMemo, useCallback, useEffect } from "react";
-import {
-  GridLines,
-  StarField,
-  Navbar,
-  Footer,
-} from "../../../components/index";
+import PageShell from "../../../components/master-page/PageShell";
 import { gtagEvent } from "../../../components/GoogleAnalytics";
 import { ACMM_PROJECTS, BADGE_PARTICIPANTS, SNAPSHOT_DATE } from "./data";
 import {
@@ -175,15 +170,16 @@ export default function AcmmLeaderboardPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0f] text-white flex flex-col">
-      <Navbar />
-
-      {/* Background effects */}
-      <div className="fixed inset-0 pointer-events-none">
-        <GridLines horizontalLines={20} verticalLines={20} strokeColor="rgba(255,255,255,0.03)" />
-        <StarField density="medium" />
-      </div>
-
+    <PageShell
+      className="min-h-screen bg-[#0a0a0f] text-white flex flex-col"
+      contentClassName={null}
+      background={{
+        wrapperClassName: "fixed inset-0 pointer-events-none",
+        baseLayerClassName: false,
+        grid: { horizontalLines: 20, verticalLines: 20, strokeColor: "rgba(255,255,255,0.03)" },
+        stars: { density: "medium" },
+      }}
+    >
       {/* Hero section */}
       <section className="relative pt-32 pb-12 px-4 sm:px-6">
         <div className="max-w-6xl mx-auto text-center">
@@ -478,8 +474,6 @@ export default function AcmmLeaderboardPage() {
 
         </div>
       </section>
-
-      <Footer />
-    </div>
+    </PageShell>
   );
 }
diff --git a/src/app/[locale]/programs/[slug]/ProgramPageClient.tsx b/src/app/[locale]/programs/[slug]/ProgramPageClient.tsx
index b6901837a..3c799ddb7 100644
--- a/src/app/[locale]/programs/[slug]/ProgramPageClient.tsx
+++ b/src/app/[locale]/programs/[slug]/ProgramPageClient.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { Program } from "../programs";
-import { Navbar, Footer, StarField, GridLines } from "@/components";
+import PageShell from "@/components/master-page/PageShell";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 
@@ -107,19 +107,12 @@ export default function ProgramPageClient({ program }: ProgramPageClientProps) {
   };
 
   return (
-    <div className="bg-[#0a0a0a] text-white min-h-screen">
-      {/* Navigation */}
-      <Navbar />
-
-      {/* Main Content with full background */}
+    <PageShell
+      className="bg-[#0a0a0a] text-white min-h-screen"
+      contentClassName={null}
+    >
+      {/* Main Content */}
       <main className="relative min-h-screen">
-        {/* Background layers */}
-        <div className="fixed inset-0 z-0">
-          <div className="absolute inset-0 bg-[#0a0a0a]"></div>
-          <StarField density="medium" showComets={true} cometCount={3} />
-          <GridLines horizontalLines={21} verticalLines={18} />
-        </div>
-
         {/* Hero Section */}
         <section className="relative z-20 pt-24 pb-8 border-b border-gray-800/50">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -476,9 +469,6 @@ export default function ProgramPageClient({ program }: ProgramPageClientProps) {
           </div>
         </div>
       </main>
-
-      {/* Footer */}
-      <Footer />
-    </div>
+    </PageShell>
   );
 }