diff --git a/src/components/Merch/MerchPageContent.tsx b/src/components/Merch/MerchPageContent.tsx
index 3c1b2e9..bc7d887 100644
--- a/src/components/Merch/MerchPageContent.tsx
+++ b/src/components/Merch/MerchPageContent.tsx
@@ -10,11 +10,11 @@ const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 const MerchPageContent = () => {
   return (
     <div
-      className="flex flex-col items-center justify-center"
+      className="flex flex-col items-center justify-center bg-dark-background"
       id="merchPageTop"
     >
       {/* Header Section */}
-      <div className="mb-8 flex w-full flex-col items-center bg-black pb-32">
+      <div className="mb-8 flex w-full flex-col items-center bg-dark-background pb-32">
         <div className="flex w-full items-center justify-center">
           <div className="w-full max-w-xl">
             <Lottie {...merchPageLottieOptions} />
diff --git a/src/pageLayouts/TeamPage.tsx b/src/pageLayouts/TeamPage.tsx
index 948580c..ce2adf7 100644
--- a/src/pageLayouts/TeamPage.tsx
+++ b/src/pageLayouts/TeamPage.tsx
@@ -19,7 +19,7 @@ const TeamPage = () => {
 
   return (
     <div
-      className="relative box-border h-full overflow-hidden scroll-smooth whitespace-normal border-none bg-black p-0 font-sans leading-6"
+      className="relative box-border h-full overflow-hidden scroll-smooth whitespace-normal border-none bg-dark-background p-0 font-sans leading-6"
       id="teamPageTop"
     >
       <Blobbie