diff --git a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx
index 492e4f9..616ccb5 100644
--- a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx
+++ b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx
@@ -5,28 +5,26 @@ import { FaCircleExclamation } from "react-icons/fa6";
 import styles from "./CommunityPartnersCard.module.scss";
 import Image from "next/image";
 
-export default function CommunityPartnersCard({
-  index,
-  partner,
-  containerClass,
-}) {
+export default function CommunityPartnersCard({ index, partner }) {
+  // Set class based on index and reverse if it is the first or third image
+
   return (
-    <div key={index} className={containerClass}>
+    <div
+      className={`${styles.cardContainer} ${index % 2 == 0 ? styles.reverse : ""}`}
+    >
       <div className={styles.imageWrapper}>
-        <div className={styles.imageWrapper}>
-          <Image
-            src={partner.image_src}
-            style={{ objectFit: "cover" }}
-            fill={true}
-            alt={partner.images_src}
-          />
-        </div>
+        <Image
+          src={partner.imageSrc}
+          style={{ objectFit: "cover", objectPosition: "50% 20%" }}
+          fill={true}
+          alt={partner.imageAlt}
+        />
       </div>
 
       <div className={styles.partnersCard}>
-        <div>
-          <h4 className={styles.partnersName}>{partner.name}</h4>
-          <p className={styles.partnersDescription}>{partner.description}</p>
+        <div className={styles.header}>
+          <h4>{partner.name}</h4>
+          <p>{partner.description}</p>
         </div>
         <div className={styles.contactInfo}>
           <p className={styles.locationText}>
@@ -38,11 +36,13 @@ export default function CommunityPartnersCard({
             {partner.date}
           </p>
           <p className={styles.appointmentText}>
-            {index === 1 && <FaCircleExclamation className={styles.icon} />}
+            {partner.appointment && (
+              <FaCircleExclamation className={styles.icon} />
+            )}
             {partner.appointment}
           </p>
         </div>
-        <a className="btn" href={partner.website}>
+        <a className={`${styles.button} btn`} href={partner.website}>
           {partner.buttonText}
         </a>
       </div>
diff --git a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss
index bc47a31..56f9e5c 100644
--- a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss
+++ b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss
@@ -1,7 +1,4 @@
-.partnerContainer {
-  display: flex;
-  align-items: center;
-}
+@use "@/app/(pages)/_globals/mixins.scss";
 
 .partnersCard {
   background-color: var(--white);
@@ -14,6 +11,30 @@
   display: flex;
   flex-direction: column;
   gap: 36px;
+
+  @include mixins.tablet {
+    width: 60%;
+    height: 400px;
+    gap: 20px;
+  }
+
+  @include mixins.phone {
+    width: 100%;
+    height: auto;
+    padding: 20px;
+    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
+    gap: 24px;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  h4 {
+    line-height: 150%;
+  }
 }
 
 .imageWrapper {
@@ -22,42 +43,86 @@
   width: 434px;
   height: 452px;
   border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
+
+  @include mixins.tablet {
+    width: 40%;
+    height: 400px;
+  }
+
+  @include mixins.phone {
+    width: 100%;
+    height: 250px;
+    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
+  }
 }
 
 .cardContainer {
   display: flex;
   align-items: center;
+
+  @include mixins.tablet {
+    width: 90%;
+  }
+
+  @include mixins.phone {
+    flex-direction: column;
+  }
 }
 
 .reverse {
   flex-direction: row-reverse; /* Image on the left */
+
+  @include mixins.phone {
+    flex-direction: column;
+  }
 }
 
 .reverse .imageWrapper {
   border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
+
+  @include mixins.phone {
+    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
+  }
 }
 
 .reverse .partnersCard {
   border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
+
+  @include mixins.phone {
+    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
+  }
 }
 
 .contactInfo {
   display: flex;
   flex-direction: column;
   gap: 12px;
+
+  @include mixins.phone {
+    gap: 8px;
+  }
 }
 
-.locationText {
+.locationText,
+.dateText,
+.appointmentText {
   display: flex;
   align-items: center;
+  gap: 12px;
 }
 
-.dateText {
-  display: flex;
-  align-items: center;
+.button {
+  width: 12rem;
+  height: 3rem;
 }
 
-.appointmentText {
-  display: flex;
-  align-items: center;
+.icon {
+  width: 20px;
+  height: 20px;
+  color: var(--emerald);
+
+  @include mixins.phone {
+    width: 16px;
+    height: 16px;
+  }
 }
diff --git a/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss b/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss
index bf4a5f8..7acc518 100644
--- a/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss
+++ b/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss
@@ -3,12 +3,19 @@
 $image-dim: 400px;
 $image-gap: 50px;
 
+$mobile-image-dim: 216px;
+$mobile-image-gap: 24px;
+
 .carousel {
   display: flex;
   position: relative;
   height: $image-dim;
   align-items: center;
   align-self: flex-start;
+
+  @include mixins.phone {
+    height: $mobile-image-dim;
+  }
 }
 
 .column {
@@ -24,17 +31,27 @@ $image-gap: 50px;
   background: lightgray 50% / cover no-repeat;
   /* mint-drop-shadow, not same as globals var */
   box-shadow: 0px 0px 48px 0px rgba(171, 220, 207, 0.35);
+
+  @include mixins.phone {
+    height: $mobile-image-dim;
+    width: $mobile-image-dim;
+  }
 }
 
 .carousel .row {
   display: flex;
   position: absolute;
   width: fit-content;
-  animation: slide 20s linear infinite; /*take 10s to perform this animation once*/
+  animation: slide-desktop 20s linear infinite; /*take 10s to perform this animation once*/
   gap: $image-gap;
   &:hover {
     animation-play-state: paused;
   }
+
+  @include mixins.phone {
+    animation: slide-mobile 20s linear infinite; /*take 10s to perform this animation once*/
+    gap: $mobile-image-gap;
+  }
 }
 
 .carousel .row .column {
@@ -42,7 +59,7 @@ $image-gap: 50px;
   display: flex;
 }
 
-@keyframes slide {
+@keyframes slide-desktop {
   0% {
     left: 0;
   }
@@ -51,3 +68,14 @@ $image-gap: 50px;
     left: calc(-1 * var(--num-images) * ($image-dim + $image-gap));
   }
 }
+
+@keyframes slide-mobile {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: calc(
+      -1 * var(--num-images) * ($mobile-image-dim + $mobile-image-gap)
+    );
+  }
+}
diff --git a/app/(pages)/_data/community-partners-carousel.json b/app/(pages)/_data/community-partners-carousel.json
new file mode 100644
index 0000000..a69468a
--- /dev/null
+++ b/app/(pages)/_data/community-partners-carousel.json
@@ -0,0 +1,18 @@
+[
+    {
+      "src": "/cm_carousel1.png",
+      "alt": "picture of the jvmc"
+    },
+    {
+      "src": "/cm_carousel2.png",
+      "alt": "jvmc volunteers"
+    },
+    {
+      "src": "/cm_carousel3.png",
+      "alt": "jvmc volunteers"
+    },
+    {
+      "src": "/cm_carousel4.png",
+      "alt": "jvmc volunteers"
+    }
+  ]
\ No newline at end of file
diff --git a/app/(pages)/_data/community-partners.json b/app/(pages)/_data/community-partners.json
index 56d2659..a0475bb 100644
--- a/app/(pages)/_data/community-partners.json
+++ b/app/(pages)/_data/community-partners.json
@@ -1,7 +1,4 @@
-{
-  "title": "Community Partners",
-  "subtitle": "Our trusted allies supporting our mission beyond the our clinics.",
-  "partners": [
+[
     {
       "name": "Harm Reduction Services",
       "description": "HRS offers free, confidential harm reduction services to improve the health and well-being of drug users, in addition to empowering local communities.",
@@ -9,7 +6,9 @@
       "date": "Monday - Friday, 12:00 PM - 6:00 PM",
       "appointment": "",
       "website": "https://hrssac.org/",
-      "buttonText": "Visit HRS Website"
+      "buttonText": "Visit HRS Website",
+      "imageSrc": "/HRS.png",
+      "imageAlt": "Volunteers at an event table for Harm Reduction Services"
     },
     {
       "name": "Gender Health Center",
@@ -18,7 +17,9 @@
       "date": "1st & 3rd Friday of each month, 6:00 PM - 9:00 PM",
       "appointment": "By appointment only",
       "website": "https://www.genderhealthcenter.org/",
-      "buttonText": "Visit GHC Website"
+      "buttonText": "Visit GHC Website",
+      "imageSrc": "/GHC.png",
+      "imageAlt": "Three volunteers holding service items"
     },
     {
       "name": "Stockton Harm Reduction Program",
@@ -27,57 +28,8 @@
       "date": "Saturdays, 9:00 AM - 1 :00 PM",
       "appointment": "",
       "website": "https://theshrp.org/",
-      "buttonText": "Visit SHRP Website"
+      "buttonText": "Visit SHRP Website",
+      "imageSrc": "/SHRC.jpg",
+      "imageAlt": "Stockton Harm Reduction Program volunteers at a community event"
     }
-  ],
-
-  "images": ["/HRS.png", "/GHC.png", "/SHRC.png"],
-
-  "imagesAlt": [
-    "Volunteers at an event table for Harm Reduction Services",
-    "Three volunteers holding service items",
-    "Stockton Harm Reduction Program volunteers at a community event"
-  ],
-
-  "carousel": {
-    "bottom_title": "Where We’ve Gone",
-    "bottom_subtitle": "See our community in action!",
-    "carousel_images": [
-      {
-        "src": "/cm_carousel1.png",
-        "alt": "picture of the jvmc"
-      },
-      {
-        "src": "/cm_carousel2.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel3.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel4.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel1.png",
-        "alt": "picture of the jvmc"
-      },
-      {
-        "src": "/cm_carousel2.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel3.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel4.png",
-        "alt": "jvmc volunteers"
-      }
-    ]
-  },
-
-  "bottom_gradient": "/images/communityPartnersGradient.png",
-  "bottom_gradient_alt": "Bottom Gradient"
-}
+  ]
\ No newline at end of file
diff --git a/app/(pages)/community-partners/page.jsx b/app/(pages)/community-partners/page.jsx
index 6b8401e..b60bb72 100644
--- a/app/(pages)/community-partners/page.jsx
+++ b/app/(pages)/community-partners/page.jsx
@@ -1,71 +1,41 @@
-"use client";
 import styles from "./page.module.scss";
 import Image from "next/image";
-import data from "@/app/(pages)/_data/community-partners.json";
-
-import { ImLocation } from "react-icons/im";
-import { IoMdCalendar } from "react-icons/io";
-import { FaCircleExclamation } from "react-icons/fa6";
+import CommunityPartnersFallbackData from "@/app/(pages)/_data/community-partners.json";
+import CommunityPartnersCard from "../_components/CommunityPartnersCard/CommunityPartnersCard";
 import CommunityPartnersCarousel from "../_components/CommunityPartnersCarousel/CommunityPartnersCarousel";
+import CarouselFallbackData from "@/app/(pages)/_data/community-partners-carousel.json";
+
+// revalidateTag("cms")
+async function getCards() {
+  return CommunityPartnersFallbackData;
+}
+
+async function getCarouselImages() {
+  return CarouselFallbackData;
+}
+
+export default async function CommunityPartners() {
+  const partners = await getCards();
+  const carouselImages = await getCarouselImages();
 
-export default function CommunityPartners() {
   return (
     <main className={styles.page}>
       <div className={styles.partnersSection}>
         <div className={styles.header}>
-          <h1>{data.title}</h1>
-          <h4>{data.subtitle}</h4>
+          <h1>Community Partners</h1>
+          <h4>
+            Our trusted allies supporting our mission beyond the our clinics.
+          </h4>
         </div>
 
         <div className={styles.partnersGrid}>
-          {data.partners.map((partner, index) => {
-            // Set class based on index and reverse if it is the first or third image
-            let containerClass = styles.cardContainer;
-            if (index === 0 || index === 2) {
-              containerClass += " " + styles.reverse;
-            }
-
+          {partners.map((partner, index) => {
             return (
-              <div key={index} className={containerClass}>
-                <div className={styles.imageWrapper}>
-                  <div className={styles.imageWrapper}>
-                    <Image
-                      src={data.images[index]}
-                      style={{ objectFit: "cover" }}
-                      fill={true}
-                      alt={data.imagesAlt[index]}
-                    />
-                  </div>
-                </div>
-
-                <div className={styles.partnersCard}>
-                  <div>
-                    <h4 className={styles.partnersName}>{partner.name}</h4>
-                    <p className={styles.partnersDescription}>
-                      {partner.description}
-                    </p>
-                  </div>
-                  <div className={styles.contactInfo}>
-                    <p className={styles.locationText}>
-                      <ImLocation className={styles.icon} />
-                      {partner.location}
-                    </p>
-                    <p className={styles.dateText}>
-                      <IoMdCalendar className={styles.icon} />
-                      {partner.date}
-                    </p>
-                    <p className={styles.appointmentText}>
-                      {index === 1 && (
-                        <FaCircleExclamation className={styles.icon} />
-                      )}
-                      {partner.appointment}
-                    </p>
-                  </div>
-                  <a className="btn" href={partner.website}>
-                    {partner.buttonText}
-                  </a>
-                </div>
-              </div>
+              <CommunityPartnersCard
+                key={index}
+                index={index}
+                partner={partner}
+              />
             );
           })}
         </div>
@@ -73,21 +43,17 @@ export default function CommunityPartners() {
 
       <div className={styles.carouselSection}>
         <div>
-          <h2 className={styles.community_partners_title}>
-            {data.carousel.bottom_title}
-          </h2>
-          <h4 className={styles.community_partners_subtitle}>
-            {data.carousel.bottom_subtitle}
-          </h4>
+          <h2>Where We’ve Gone</h2>
+          <h4>See our community in action!</h4>
         </div>
-        <CommunityPartnersCarousel images={data.carousel.carousel_images} />
+        <CommunityPartnersCarousel images={carouselImages} />
       </div>
 
       <div className={styles.bottomGradientContainer}>
         <div className={styles.bottomGradient}>
           <Image
-            src={data.bottom_gradient}
-            alt={data.bottom_gradient_alt}
+            src={"/images/communityPartnersGradient.png"}
+            alt={"Bottom gradient"}
             fill={true}
           />
         </div>
diff --git a/app/(pages)/community-partners/page.module.scss b/app/(pages)/community-partners/page.module.scss
index 4d1f8c2..1eb43f2 100644
--- a/app/(pages)/community-partners/page.module.scss
+++ b/app/(pages)/community-partners/page.module.scss
@@ -1,5 +1,13 @@
 @use "@/app/(pages)/_globals/mixins.scss";
 
+// Define the phone mixin for responsive design
+@mixin phone {
+  @media (max-width: 450px) {
+    @content;
+  }
+}
+
+// Modified page styles with responsive adjustments
 .page {
   display: flex;
   flex-direction: column;
@@ -7,7 +15,6 @@
   gap: var(--element-spacing);
   padding: var(--nav-to-element-spacing) 0;
   position: relative;
-  // width: 1040px;
   overflow: hidden;
 }
 
@@ -20,95 +27,37 @@
 
 .header {
   text-align: center;
-}
 
-.partnersGrid {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--vertical-card-gap);
-}
+  @include mixins.phone {
+    width: 90%;
 
-.partnerContainer {
-  display: flex;
-  align-items: center;
+    h4 {
+      line-height: 150%;
+      font-size: 16px;
+      padding-top: 12px;
+    }
+  }
 }
 
-.partnersCard {
-  background-color: var(--white);
-  border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
-  width: 606px;
-  height: 452px;
-  padding: var(--card-padding);
-  text-align: left;
-  box-shadow: var(--drop-shadow);
+.partnersGrid {
   display: flex;
   flex-direction: column;
-  gap: 36px;
-}
-
-.cardContainer {
-  display: flex;
   align-items: center;
-}
-
-.imageWrapper {
-  position: relative;
-  overflow: hidden;
-  width: 434px;
-  height: 452px;
-  border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
-}
-
-.reverse {
-  flex-direction: row-reverse; /* Image on the left */
-}
-
-.reverse .imageWrapper {
-  border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
-}
-
-.reverse .partnersCard {
-  border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
-}
-
-.locationText {
-  display: flex;
-  align-items: center;
-}
-
-.dateText {
-  display: flex;
-  align-items: center;
-}
-
-.appointmentText {
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 13px;
-  color: var(--emerald);
-}
-
-.contactInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  gap: var(--vertical-card-gap);
 }
 
 .carouselSection {
   align-self: flex-start;
   text-align: center;
-
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 60px;
   width: 100%;
+
+  @include mixins.phone {
+    gap: 30px;
+  }
 }
 
 .bottomGradientContainer {
@@ -118,10 +67,14 @@
   height: 1524px;
   z-index: -1;
   overflow: hidden;
+
+  @include mixins.phone {
+    height: 760px;
+  }
 }
 
 .bottomGradient {
-  pointer-events: none; /* Prevents interaction issues */
+  pointer-events: none;
   position: relative;
   width: 100%;
   height: 100%;
diff --git a/public/SHRC.jpg b/public/SHRC.jpg
new file mode 100644
index 0000000..6d0253e
Binary files /dev/null and b/public/SHRC.jpg differ
diff --git a/public/SHRC.png b/public/SHRC.png
deleted file mode 100644
index de30a73..0000000
Binary files a/public/SHRC.png and /dev/null differ