diff --git a/client/assets/community-forums.png b/client/assets/community-forums.png
new file mode 100644
index 0000000..6d0017f
Binary files /dev/null and b/client/assets/community-forums.png differ
diff --git a/client/assets/events.png b/client/assets/events.png
new file mode 100644
index 0000000..657c4d8
Binary files /dev/null and b/client/assets/events.png differ
diff --git a/client/assets/home-bill-contest.png b/client/assets/home-bill-contest.png
new file mode 100644
index 0000000..e979ab5
Binary files /dev/null and b/client/assets/home-bill-contest.png differ
diff --git a/client/assets/karang-guni.png b/client/assets/karang-guni.png
new file mode 100644
index 0000000..9a68bd4
Binary files /dev/null and b/client/assets/karang-guni.png differ
diff --git a/client/src/components/SpringboardButton.tsx b/client/src/components/SpringboardButton.tsx
index 0e514d5..ef7cad4 100644
--- a/client/src/components/SpringboardButton.tsx
+++ b/client/src/components/SpringboardButton.tsx
@@ -4,10 +4,12 @@ import { useNavigate } from "react-router-dom";
 export default function SpringboardButton({
   title,
   subtitle,
+  imageSrc,
   linkToPage,
 }: {
   title: string;
   subtitle: string;
+  imageSrc: string;
   linkToPage: string;
 }) {
   const navigate = useNavigate();
@@ -16,9 +18,14 @@ export default function SpringboardButton({
       onPress={() => {
         navigate(linkToPage);
       }}
-      className="border-4 border-primary-500 bg-neutral-700 hover:bg-primary-500 text-white"
+      className="relative border-4 border-primary-500 text-white p-0"
     >
-      <div className="flex flex-col justify-between w-full h-full py-4 px-2 text-left *:text-wrap mr-16">
+      <img
+        src={imageSrc}
+        alt={title}
+        className="absolute w-full h-full inset-0 object-cover brightness-50"
+      />
+      <div className="relative flex flex-col justify-between w-full h-full py-4 px-6 text-left *:text-wrap transition-colors hover:bg-primary-500">
         <p className="text-2xl font-semibold">{title}</p>
         <p>{subtitle}</p>
       </div>
diff --git a/client/src/pages/SpringboardPage.tsx b/client/src/pages/SpringboardPage.tsx
index 75ef28f..71ab05e 100644
--- a/client/src/pages/SpringboardPage.tsx
+++ b/client/src/pages/SpringboardPage.tsx
@@ -85,21 +85,25 @@ export default function SpringboardPage() {
               <SpringboardButton
                 title="Community Forums"
                 subtitle="Be involved in discussions among your neighbourhood"
+                imageSrc="../assets/community-forums.png"
                 linkToPage="/community-posts"
               ></SpringboardButton>
               <SpringboardButton
                 title="Events"
                 subtitle="Participate in exciting upcoming events around Singapore"
+                imageSrc="../assets/events.png"
                 linkToPage="/events"
               ></SpringboardButton>
               <SpringboardButton
                 title="Home Bill Contest"
                 subtitle="Save resources, win vouchers!"
+                imageSrc="../assets/home-bill-contest.png"
                 linkToPage="/home-bill-contest"
               ></SpringboardButton>
               <SpringboardButton
                 title="Karang Guni Scheduling"
                 subtitle="Arrange doorstep sales for your old gears with Karang Guni"
+                imageSrc="../assets/karang-guni.png"
                 linkToPage="/karang-guni-schedules"
               ></SpringboardButton>
             </div>