diff --git a/public/bg-watermelon-v1.webp b/public/bg-watermelon-v1.webp
new file mode 100644
index 0000000..f8c1db0
Binary files /dev/null and b/public/bg-watermelon-v1.webp differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 09a9a3b..f677200 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,38 +1,58 @@
-'use client'
-import { SocialPlatform } from '@/types';
-import download from 'downloadjs';
-import { toPng } from 'html-to-image';
-import Image from 'next/image';
+"use client";
+import { SocialPlatform } from "@/types";
+import download from "downloadjs";
+import { toPng } from "html-to-image";
+import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
-import { FaArrowRotateLeft, FaDownload, FaGithub, FaGitlab, FaShare, FaXTwitter } from "react-icons/fa6";
+import {
+  FaArrowRotateLeft,
+  FaDownload,
+  FaGithub,
+  FaGitlab,
+  FaShare,
+  FaXTwitter,
+} from "react-icons/fa6";
 
 export default function Home() {
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLDivElement>(null);
   const [userImageUrl, setUserImageUrl] = useState<string>();
+  const [backgroundImageUrl, setBackgroundImageUrl] =
+    useState<string>("/bg.webp");
   const [unsuportedBrowser, setUnsupportedBrowser] = useState(false);
-  const [loader, setLoader] = useState(false)
-  const [gazaStatusSummary, setGazaStatusSummary] = useState()
-  const [filePostfix, setFilePostfix] = useState<SocialPlatform | 'user-upload'>()
+  const [loader, setLoader] = useState(false);
+  const [gazaStatusSummary, setGazaStatusSummary] = useState();
+  const [filePostfix, setFilePostfix] = useState<
+    SocialPlatform | "user-upload"
+  >();
 
   useEffect(() => {
     const isInstagramBrowser = /Instagram/i.test(navigator.userAgent);
     const isFacebookBrowser = /FBAN|FBAV/i.test(navigator.userAgent);
 
     if (isInstagramBrowser || isFacebookBrowser) {
-      setUnsupportedBrowser(true)
+      setUnsupportedBrowser(true);
     }
-  }, [unsuportedBrowser])
+  }, [unsuportedBrowser]);
 
   useEffect(() => {
-    fetch('/api/gaza-status').then(res => res.json()).then(data => setGazaStatusSummary(data.summary));
-  }, [gazaStatusSummary])
+    fetch("/api/gaza-status")
+      .then((res) => res.json())
+      .then((data) => setGazaStatusSummary(data.summary));
+  }, [gazaStatusSummary]);
 
+  const handleBgImageSwitch = () => {
+    if (backgroundImageUrl === "/bg.webp") {
+      setBackgroundImageUrl("/bg-watermelon-v1.webp");
+    } else {
+      setBackgroundImageUrl("/bg.webp");
+    }
+  };
   const handleImageUpload = (e: any) => {
     const file = e.target.files[0];
     const reader = new FileReader();
 
     reader.onload = async (event: any) => {
-      setFilePostfix('user-upload')
+      setFilePostfix("user-upload");
       setUserImageUrl(event.target.result);
     };
 
@@ -40,45 +60,49 @@ export default function Home() {
   };
 
   const handleUploadButtonClick = () => {
-    document.getElementById('fileInput')?.click();
+    document.getElementById("fileInput")?.click();
   };
 
   const handleRetrieveProfilePicture = async (platform: SocialPlatform) => {
     const userProvidedUsername = prompt(`Enter your ${platform} username:`);
 
     if (userProvidedUsername) {
-      setFilePostfix(platform)
+      setFilePostfix(platform);
       try {
         setLoader(true);
-        const response = await fetch(`/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}`).then(res => res.ok ? res.json() : null);
+        const response = await fetch(
+          `/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}`
+        ).then((res) => (res.ok ? res.json() : null));
         setLoader(false);
         if (response === null) {
-          alert('Error fetching your profile picture. Please make sure that you entered a correct username.');
+          alert(
+            "Error fetching your profile picture. Please make sure that you entered a correct username."
+          );
           return;
         }
         setUserImageUrl(response.profilePicUrl);
       } catch (error) {
-        console.error('Error fetching profile picture:', error);
+        console.error("Error fetching profile picture:", error);
       }
     }
   };
 
   const generateImage = async () => {
     try {
-      return await toPng(ref.current as HTMLElement)
+      return await toPng(ref.current as HTMLElement);
     } catch (error) {
-      console.log("Error generating image", error)
+      console.log("Error generating image", error);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    // TODO: Fix if possible. This is a hack to ensure that image generated is as expected. Without repeating generateImage(), at times, the image wont be generated correctly. 
-    await generateImage()
-    await generateImage()
-    await generateImage()
-    const generatedImageUrl = await generateImage()
+    // TODO: Fix if possible. This is a hack to ensure that image generated is as expected. Without repeating generateImage(), at times, the image wont be generated correctly.
+    await generateImage();
+    await generateImage();
+    await generateImage();
+    const generatedImageUrl = await generateImage();
     if (generatedImageUrl) {
-      download(generatedImageUrl, `profile-pic-${filePostfix}.png`)
+      download(generatedImageUrl, `profile-pic-${filePostfix}.png`);
     }
   };
 
@@ -87,26 +111,43 @@ export default function Home() {
   };
 
   return (
-    <main className='text-center px-8 py-12 max-w-xl mx-auto flex justify-center align-center items-center min-h-screen'>
+    <main className="text-center px-8 py-12 max-w-xl mx-auto flex justify-center align-center items-center min-h-screen">
       <div>
         {unsuportedBrowser && (
-          <div className='border p-2 rounded-lg bg-yellow-200 my-2  text-sm mb-8'>
-            <p className='font-semibold'>⚠️ Unsupported Browser Detected</p>
+          <div className="border p-2 rounded-lg bg-yellow-200 my-2  text-sm mb-8">
+            <p className="font-semibold">⚠️ Unsupported Browser Detected</p>
             <p>Please open on regular browsers like Chrome or Safari.</p>
           </div>
         )}
         {gazaStatusSummary && (
-          <a className="rounded-lg bg-gray-200 py-1.5 text-xs px-4 text-sm text-gray-800 cursor-pointer" target="_blank" href="https://data.techforpalestine.org/">
+          <a
+            className="rounded-lg bg-gray-200 py-1.5 text-xs px-4 text-sm text-gray-800 cursor-pointer"
+            target="_blank"
+            href="https://data.techforpalestine.org/"
+          >
             😥 {gazaStatusSummary} →
           </a>
         )}
-        <h1 className='font-semibold text-3xl mt-6'>Show Solidarity 🇵🇸</h1>
-        <p className="text-lg py-2">Let&apos;s unite in our profile pictures  to spotlight the cause. ✊</p>
-        <p className="text-gray-600">Watch the <a href='https://www.instagram.com/p/C2B1DP0LqBl/' target='_blank' className='underline cursor-pointer hover:text-gray-900'>step-by-step guide</a> 👀</p>
+        <h1 className="font-semibold text-3xl mt-6">Show Solidarity 🇵🇸</h1>
+
+        <p className="text-lg py-2">
+          Let&apos;s unite in our profile pictures to spotlight the cause. ✊
+        </p>
+        <p className="text-gray-600">
+          Watch the{" "}
+          <a
+            href="https://www.instagram.com/p/C2B1DP0LqBl/"
+            target="_blank"
+            className="underline cursor-pointer hover:text-gray-900"
+          >
+            step-by-step guide
+          </a>{" "}
+          👀
+        </p>
         <div className="my-12">
-          <div className='flex justify-center'>
+          <div className="flex justify-center">
             <div
-              style={{ width: '300px', height: '300px' }}
+              style={{ width: "300px", height: "300px" }}
               className="relative"
               ref={ref}
             >
@@ -114,23 +155,25 @@ export default function Home() {
               <img
                 alt="border"
                 id="borderImage"
-                src={'/bg.webp'}
-                style={{ position: 'absolute', width: '100%', height: '100%' }}
+                // src={"/bg.webp"}
+                src={backgroundImageUrl}
+                // src={"/bg-watermelon-v1.webp"}
+                style={{ position: "absolute", width: "100%", height: "100%" }}
                 className="rounded-full"
               />
               {loader ? (
                 <Image
                   id="spinner"
                   alt="spinner-animation"
-                  src={'/spinner.svg'}
+                  src={"/spinner.svg"}
                   width={100}
                   height={100}
                   style={{
-                    position: 'absolute',
-                    width: '85%',
-                    height: '85%',
-                    left: '7.5%',
-                    top: '7.5%',
+                    position: "absolute",
+                    width: "85%",
+                    height: "85%",
+                    left: "7.5%",
+                    top: "7.5%",
                   }}
                   className="object-cover rounded-full cursor-wait"
                 />
@@ -138,15 +181,15 @@ export default function Home() {
                 <img
                   id="userImage"
                   alt="profile-image"
-                  src={userImageUrl ?? '/user.jpg'}
+                  src={userImageUrl ?? "/user.jpg"}
                   width={100}
                   height={100}
                   style={{
-                    position: 'absolute',
-                    width: '85%',
-                    height: '85%',
-                    left: '7.5%',
-                    top: '7.5%',
+                    position: "absolute",
+                    width: "85%",
+                    height: "85%",
+                    left: "7.5%",
+                    top: "7.5%",
                   }}
                   className="object-cover rounded-full cursor-pointer"
                 />
@@ -154,40 +197,106 @@ export default function Home() {
             </div>
           </div>
         </div>
-        <div>{userImageUrl ? (
-          <>
-            <p className="p-2 my-6 text-sm border rounded-lg">Download the image, then use it as your new profile picture.</p>
-            <button onClick={handleDownload} className="rounded-full mb-2 py-3 px-2 w-full border border-gray-900 bg-gray-900 text-white text-xl">
-              Download Image <FaDownload className='inline mb-1 ml-2 text-md' />
-            </button>
-            <button onClick={startOver} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
-              Start Over <FaArrowRotateLeft className='inline mb-1 ml-2 text-md' />
-            </button>
-          </>
-        ) :
-          <>
-            <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" id="fileInput" />
-            <button onClick={handleUploadButtonClick} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
-              Upload Image
-            </button>
-            <button onClick={async () => await handleRetrieveProfilePicture(SocialPlatform.Twitter)} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
-              Use <FaXTwitter className="inline mb-1" /> Profile Pic
-            </button>
-            <button onClick={async () => await handleRetrieveProfilePicture(SocialPlatform.Github)} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
-              Use <FaGithub className="inline mb-1" /> Profile Pic
-            </button>
-            <button onClick={async () => await handleRetrieveProfilePicture(SocialPlatform.Gitlab)} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
-              Use <FaGitlab className="inline mb-1" /> Profile Pic
-            </button>
-          </>
-        }
+        <div>
+          {userImageUrl ? (
+            <>
+              <p className="p-2 my-6 text-sm border rounded-lg">
+                Download the image, then use it as your new profile picture.
+              </p>
+              <button
+                onClick={handleDownload}
+                className="rounded-full mb-2 py-3 px-2 w-full border border-gray-900 bg-gray-900 text-white text-xl"
+              >
+                Download Image{" "}
+                <FaDownload className="inline mb-1 ml-2 text-md" />
+              </button>
+              <button
+                onClick={startOver}
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Start Over{" "}
+                <FaArrowRotateLeft className="inline mb-1 ml-2 text-md" />
+              </button>
+            </>
+          ) : (
+            <>
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleImageUpload}
+                className="hidden"
+                id="fileInput"
+              />
+              <button
+                onClick={handleUploadButtonClick}
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Upload Image
+              </button>
+
+              <button
+                onClick={handleBgImageSwitch}
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Use {backgroundImageUrl === "/bg.webp" ? `🍉` : `🇵🇸`} As
+                BackGround Instead!
+              </button>
+
+              <button
+                onClick={async () =>
+                  await handleRetrieveProfilePicture(SocialPlatform.Twitter)
+                }
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Use <FaXTwitter className="inline mb-1" /> Profile Pic
+              </button>
+              <button
+                onClick={async () =>
+                  await handleRetrieveProfilePicture(SocialPlatform.Github)
+                }
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Use <FaGithub className="inline mb-1" /> Profile Pic
+              </button>
+              <button
+                onClick={async () =>
+                  await handleRetrieveProfilePicture(SocialPlatform.Gitlab)
+                }
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Use <FaGitlab className="inline mb-1" /> Profile Pic
+              </button>
+            </>
+          )}
         </div>
-        <div className='pt-8'>
-          <p className="p-2 my-6 text-sm border rounded-lg">Note: This app runs purely on your browser end. No images nor data will be saved by the app.</p>
-          <p className='text-gray-600'>Have any feedback? <a href='https://www.x.com/sohafidz' target='_blank' className='underline cursor-pointer'>Let me know!</a></p>
-          <p className='text-gray-600'>For any bugs, please report them to our <a href='https://github.com/TechForPalestine/palestine-pfp-maker/issues' target='_blank' className='underline cursor-pointer'> GitHub repository.</a></p>
+        <div className="pt-8">
+          <p className="p-2 my-6 text-sm border rounded-lg">
+            Note: This app runs purely on your browser end. No images nor data
+            will be saved by the app.
+          </p>
+          <p className="text-gray-600">
+            Have any feedback?{" "}
+            <a
+              href="https://www.x.com/sohafidz"
+              target="_blank"
+              className="underline cursor-pointer"
+            >
+              Let me know!
+            </a>
+          </p>
+          <p className="text-gray-600">
+            For any bugs, please report them to our{" "}
+            <a
+              href="https://github.com/TechForPalestine/palestine-pfp-maker/issues"
+              target="_blank"
+              className="underline cursor-pointer"
+            >
+              {" "}
+              GitHub repository.
+            </a>
+          </p>
         </div>
       </div>
     </main>
-  )
+  );
 }