diff --git a/web/__test__/components/ExecCard.test.tsx b/web/__test__/components/ExecCard.test.tsx
index 60ef42bb..d32d4ecb 100644
--- a/web/__test__/components/ExecCard.test.tsx
+++ b/web/__test__/components/ExecCard.test.tsx
@@ -2,8 +2,9 @@ import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import ExecCard from "../../src/components/ExecCard";
 import React from "react";
+import { Exec } from "../../src/types/types";
 
-const mockExec = {
+const mockExec: Exec = {
   id: 1,
   image: "/uploads/john_doe.jpg",
   position: "President",
diff --git a/web/__test__/components/PartnerCard.test.tsx b/web/__test__/components/PartnerCard.test.tsx
new file mode 100644
index 00000000..3aa2a774
--- /dev/null
+++ b/web/__test__/components/PartnerCard.test.tsx
@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import PartnerCard from "../../src/components/PartnerCard";
+import React from "react";
+import { Partner } from "../../src/types/types";
+
+const mockPartner: Partner = {
+  id: 1,
+  type: "Gold",
+  name: "The Kebab and Chicken House",
+  location: "17 Mount Street",
+  description: "20% off Everything",
+  image: "/uploads/kebab.jpg",
+};
+
+describe("PartnerCard", () => {
+  it("renders PartnerCard with correct data", () => {
+    render(<PartnerCard partner={mockPartner} colour="#F3CF0B" />);
+
+    // Check if the elements are rendered correctly
+    expect(screen.getByAltText("Partner Image")).toBeInTheDocument();
+    const partnerImage = screen.getByAltText("Partner Image");
+    expect(partnerImage).toHaveAttribute("src", mockPartner.image);
+    expect(screen.getByText("The Kebab and Chicken House")).toBeInTheDocument();
+    expect(screen.getByText("17 Mount Street")).toBeInTheDocument();
+    expect(screen.getByText("20% off Everything")).toBeInTheDocument();
+  });
+
+  it("opens Google Maps with the correct query when 'View' button is clicked", () => {
+    render(<PartnerCard partner={mockPartner} colour="#F3CF0B" />);
+
+    const originalOpen = window.open;
+    window.open = vi.fn();
+
+    const viewButton = screen.getByText("View On Map");
+    fireEvent.click(viewButton);
+
+    expect(window.open).toHaveBeenCalledWith(
+      "https://www.google.com/maps/search/?api=1&query=17%20Mount%20Street",
+      "_blank"
+    );
+
+    window.open = originalOpen; // Restore original window.open
+  });
+});
diff --git a/web/__test__/screens/PartnerScreen.test.tsx b/web/__test__/screens/PartnerScreen.test.tsx
new file mode 100644
index 00000000..25d5a225
--- /dev/null
+++ b/web/__test__/screens/PartnerScreen.test.tsx
@@ -0,0 +1,222 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { GET_PARTNERS } from "../../src/graphql/queries";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import PartnersScreen from "../../src/screens/PartnersScreen";
+import React from "react";
+import { GraphQLError } from "graphql";
+import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router";
+
+const partnersMock = {
+  request: {
+    query: GET_PARTNERS,
+  },
+  result: {
+    data: {
+      partners: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Type: "Gold",
+              Name: "The Kebab and Chicken House",
+              Location: "17 Mount Street",
+              Description: "20% off Everything",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/kebab.jpg",
+                  },
+                },
+              },
+            },
+          },
+          {
+            id: 2,
+            attributes: {
+              Type: "Silver",
+              Name: "Subi's Desserts",
+              Location: "128 White Swan Road, Mount Roskil",
+              Description: "15% off Everything",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/subi.jpg",
+                  },
+                },
+              },
+            },
+          },
+          {
+            id: 3,
+            attributes: {
+              Type: "Bronze",
+              Name: "Beso Cafe and Kitchen",
+              Location: "256 Manukau Road, Epsom, Auckland",
+              Description: "10% off Everything",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/beso.jpg",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const noPartnersMock = {
+  request: {
+    query: GET_PARTNERS,
+  },
+  result: {
+    data: {
+      partners: {
+        data: [],
+      },
+    },
+  },
+};
+
+const mocks = [partnersMock];
+const noDataMocks = [noPartnersMock];
+
+describe("PartnersScreen", () => {
+  it("renders loading spinner initially", () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+  });
+
+  it("renders error message when query fails", async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_PARTNERS,
+        },
+        error: new GraphQLError("Error!"),
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={errorMocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
+  });
+
+  it("renders current gold partners correctly", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("The Kebab and Chicken House")
+    ).toBeInTheDocument();
+    expect(await screen.findByText("17 Mount Street")).toBeInTheDocument();
+    expect(await screen.findByText("20% off Everything")).toBeInTheDocument();
+
+    // Find the image element with alt text "Partner Image" and specific src
+    const goldPartnerImages = screen.getAllByAltText(
+      "Partner Image"
+    ) as HTMLImageElement[];
+    const goldPartnerImage = goldPartnerImages.find((img) =>
+      img.src.includes("/uploads/kebab.jpg")
+    );
+
+    expect(goldPartnerImage).toBeInTheDocument();
+  });
+
+  it("renders current silver partners correctly", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(await screen.findByText("Subi's Desserts")).toBeInTheDocument();
+    expect(
+      await screen.findByText("128 White Swan Road, Mount Roskil")
+    ).toBeInTheDocument();
+    expect(await screen.findByText("15% off Everything")).toBeInTheDocument();
+
+    // Find the image element with alt text "Partner Image" and specific src
+    const silverPartnerImages = screen.getAllByAltText(
+      "Partner Image"
+    ) as HTMLImageElement[];
+    const silverPartnerImage = silverPartnerImages.find((img) =>
+      img.src.includes("/uploads/subi.jpg")
+    );
+
+    expect(silverPartnerImage).toBeInTheDocument();
+  });
+
+  it("renders current bronze partners correctly", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("Beso Cafe and Kitchen")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("256 Manukau Road, Epsom, Auckland")
+    ).toBeInTheDocument();
+    expect(await screen.findByText("10% off Everything")).toBeInTheDocument();
+
+    // Find the image element with alt text "Partner Image" and specific src
+    const bronzePartnerImages = screen.getAllByAltText(
+      "Partner Image"
+    ) as HTMLImageElement[];
+    const bronzePartnerImage = bronzePartnerImages.find((img) =>
+      img.src.includes("/uploads/beso.jpg")
+    );
+
+    expect(bronzePartnerImage).toBeInTheDocument();
+  });
+
+  it("renders no data from cms", async () => {
+    render(
+      <MockedProvider mocks={noDataMocks} addTypename={false}>
+        <MemoryRouter>
+          <PartnersScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("No gold partners to display")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("No silver partners to display")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("No bronze partners to display")
+    ).toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/PartnerCard.tsx b/web/src/components/PartnerCard.tsx
new file mode 100644
index 00000000..8e325bdb
--- /dev/null
+++ b/web/src/components/PartnerCard.tsx
@@ -0,0 +1,58 @@
+import { PartnerCardProps } from "../types/types";
+
+export default function PartnerCard({ partner, colour }: PartnerCardProps) {
+  // Function to convert hex to RGBA
+  const hexToRgba = (hex: string, alpha: number) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  const bgColorWithOpacity = hexToRgba(colour, 0.2); // 0.2 for 20% opacity
+
+  // Function to handle the button click
+  const handleViewOnMapClick = () => {
+    const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(partner.location)}`;
+    window.open(googleMapsUrl, "_blank");
+  };
+
+  return (
+    <>
+      <div
+        className="flex h-auto w-72 flex-col items-center overflow-hidden rounded-2xl border-4 p-5"
+        style={{ borderColor: colour, backgroundColor: bgColorWithOpacity }}
+      >
+        <div className="h-auto w-full">
+          <img
+            src={partner.image}
+            alt="Partner Image"
+            className="rounded-2xl"
+          />
+        </div>
+
+        <h1 className="text-md my-2 text-center font-bold text-black">
+          {partner.name}
+        </h1>
+
+        <div className="mb-2 h-auto w-full text-black">
+          <h2 className="font-bold">Benefits Provided</h2>
+          <p>{partner.description}</p>
+        </div>
+
+        <div className="mb-2 h-auto w-full text-black">
+          <h2 className="font-bold">Location</h2>
+          <p>{partner.location}</p>
+        </div>
+
+        <button
+          className="bg-primary-orange rounded-full px-5 py-2 font-bold text-white"
+          onClick={handleViewOnMapClick}
+        >
+          View On Map
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 0b43d717..a6c8a213 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -22,6 +22,7 @@ import { graphqlClient } from "./graphql/client.ts";
 import CreditsScreen from "./screens/CreditsScreen.tsx";
 import SignInScreen from "./screens/SignInScreen.tsx";
 import EventScreen from "./screens/EventScreen.tsx";
+import PartnersScreen from "./screens/PartnersScreen.tsx";
 
 //Add any routes for screens below
 const router = createBrowserRouter(
@@ -31,6 +32,7 @@ const router = createBrowserRouter(
       <Route path="/test" element={<TestScreen />} />
       <Route path="/credits" element={<CreditsScreen />} />
       <Route path="/exec" element={<ExecScreen />} />
+      <Route path="/sponsors" element={<PartnersScreen />} />
       <Route path="/login" element={<SignInScreen />} />
       <Route path="/signup" element={<SignUpScreen />} />
       <Route path="/about-us" element={<AboutUsScreen />} />
diff --git a/web/src/screens/PartnersScreen.tsx b/web/src/screens/PartnersScreen.tsx
new file mode 100644
index 00000000..3234a753
--- /dev/null
+++ b/web/src/screens/PartnersScreen.tsx
@@ -0,0 +1,146 @@
+import { useState, useEffect } from "react";
+import type { Partner } from "../types/types";
+import { useQuery } from "@apollo/client";
+import { GET_PARTNERS } from "../graphql/queries";
+import { Mapper } from "../utils/Mapper";
+import LoadingSpinner from "../components/LoadingSpinner";
+import Header from "../components/Header";
+import PartnerCard from "../components/PartnerCard";
+
+export default function PartnersScreen() {
+  const {
+    loading: partnersLoading,
+    data: partnersData,
+    error: partnersError,
+  } = useQuery(GET_PARTNERS);
+
+  const [partners, setPartners] = useState<Partner[]>([]);
+  const [noPartners, setNoPartners] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (partnersData) {
+      try {
+        const sponsors = Mapper.mapToPartner(partnersData);
+        setPartners(sponsors);
+      } catch (error) {
+        setNoPartners(true);
+      }
+    }
+  }, [partnersData]);
+
+  useEffect(() => {
+    if (!partnersLoading) {
+      setLoading(false);
+    }
+  });
+
+  if (partnersError) {
+    return <div>CMS Offline</div>;
+  }
+
+  // Filtering the partners based on their type
+  const goldPartners = partners.filter((partner) => partner.type === "Gold");
+  const silverPartners = partners.filter(
+    (partner) => partner.type === "Silver"
+  );
+  const bronzePartners = partners.filter(
+    (partner) => partner.type === "Bronze"
+  );
+
+  return (
+    <>
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <>
+          <div className="max-w-screen h-auto bg-white">
+            <div className="max-w-screen from-AUIS-dark-teal to-AUIS-teal h-72 bg-gradient-to-b">
+              <Header />
+              <div className="flex flex-col items-center text-center text-white">
+                <h1 className="text-4xl font-bold md:text-6xl">Our Partners</h1>
+                <h3 className="my-5 text-2xl">
+                  Collaborating with amazing partners to enhance your AUIS
+                  experience
+                </h3>
+              </div>
+            </div>
+            <div className="max-w-screen flex h-auto flex-col items-center bg-white py-5">
+              {/* Gold Partners */}
+              {noPartners ? (
+                <div className="my-5 text-center">
+                  No gold partners to display
+                </div>
+              ) : (
+                <>
+                  <h1 className="text-3xl font-bold text-[#F3CF0B]">
+                    Gold Partners
+                  </h1>
+                  <div className="flex flex-wrap items-center justify-center">
+                    {goldPartners.map((e) => (
+                      <div className="my-5 px-10" key={e.id}>
+                        <PartnerCard key={e.id} partner={e} colour="#F3CF0B" />
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* Silver Partners */}
+              {noPartners ? (
+                <div className="my-5 text-center">
+                  No silver partners to display
+                </div>
+              ) : (
+                <>
+                  <h1 className="my-2 text-3xl font-bold text-[#C0C0C0]">
+                    Silver Partners
+                  </h1>
+                  <div className="flex flex-wrap items-center justify-center">
+                    {silverPartners.map((e) => (
+                      <div className="my-5 px-10" key={e.id}>
+                        <PartnerCard key={e.id} partner={e} colour="#C0C0C0" />
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* Bronze Partners */}
+              {noPartners ? (
+                <div className="my-5 text-center">
+                  No bronze partners to display
+                </div>
+              ) : (
+                <>
+                  <h1 className="my-2 text-3xl font-bold text-[#C88039]">
+                    Bronze Partners
+                  </h1>
+                  <div className="flex flex-wrap items-center justify-center">
+                    {bronzePartners.map((e) => (
+                      <div className="my-5 px-10" key={e.id}>
+                        <PartnerCard key={e.id} partner={e} colour="#C88039" />
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+
+            <div className="max-w-screen flex flex-col items-center bg-white py-5 text-center">
+              <h1 className="text-5xl font-bold text-black">
+                Want To Partner With Us?
+              </h1>
+              <a
+                href="mailto:au.indiansociety@gmail.com"
+                className="bg-primary-orange my-5 rounded-full px-5 py-3 text-2xl font-bold text-white"
+              >
+                Contact Us Now!
+              </a>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/web/src/types/types.ts b/web/src/types/types.ts
index 7dfaa4e0..bc808a46 100644
--- a/web/src/types/types.ts
+++ b/web/src/types/types.ts
@@ -24,6 +24,11 @@ export interface Partner {
   location: string;
 }
 
+export interface PartnerCardProps {
+  colour: string;
+  partner: Partner;
+}
+
 export interface Social {
   id: number;
   type: string;