diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx
index c6ce8db..88c13cf 100644
--- a/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGallery.tsx
@@ -44,7 +44,7 @@ const CommunityGallery = () => {
     const appUrl = import.meta.env.VITE_APP_URL;
     const port = import.meta.env.VITE_APP_PORT;
     axios
-      .get(`${appUrl}:${port}/api/homepage/gallery`)
+      .get(`${appUrl}:${port}/api/users`)
       .then((res) => {
         setData(res.data);
       })
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
index 52882e3..e9545eb 100644
--- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryCard.tsx
@@ -36,31 +36,31 @@ const CommunityGalleryCard = ({user}: CommunityGalleryCardProps) => {
     }
 
     return (  
-        <div className="w-full h-[540px] rounded-2xl relative max-[1536px]:h-[520px]">
-            <div className="bg-primary h-[23%] rounded-t-2xl"> </div>
-
+        <div className="w-[300px] h-[540px] rounded-2xl relative max-[1887px]:w-[270px] max-[1887px]:h-[510px] max-[1755px]:w-[300px]">
+            <div className="bg-primary h-[23%] rounded-t-2xl">
+            </div>
 
-            <div className="bg-lightGrey absolute w-[150px] top-[7%] left-1/2 transform -translate-x-1/2 rounded-full max-[1536px]:w-[130px] max-[1536px]:top-[9%] max-[1280px]:w-[150px] max-[1280px]:top-[7%]"> 
-                <img src={user.profile_picture} alt="" className="w-[100%] object-cover aspect-square rounded-full"/>
+            <div className="bg-lightGrey absolute w-[150px] top-[7%] right-[25%] rounded-full max-[1887px]:w-[125px] max-[1887px]:right-[26%] max-[1755px]:right-[28%]"> 
+                <img src={user.profile_picture} alt="profile" className="w-[100%] object-cover aspect-square rounded-full"/>
             </div>
 
             <div className="border-b-[1px] border-x-[1px] rounded-b-2xl border-lightGrey2 h-[70%] flex flex-col items-center">
-                <p className="text-[25px] mt-[5.8rem] mb-0 text-black max-[1536px]:mt-[4.8rem] max-[1536px]:text-[22px]">{user.firstName + " " + user.lastName}</p>
-                <p className="text-[40px] my-1 text-black max-[1536px]:text-[37px]">{user.hours}</p>
-                <p className="text-body text-md text-lightGrey2 mb-6 max-[1536px]:text-[1.3rem]">hours</p>
+                <p className="text-[25px] mt-[5.8rem] mb-0 text-black max-[1887px]:mt-[4rem]">{user.firstName + " " + user.lastName}</p>
+                <p className="text-[40px] my-1 text-black">{user.hours}</p>
+                <p className="text-body text-m text-lightGrey2 mb-6">hours</p>
 
                 <div className="flex items-center w-[70%] justify-between">
                     <div className="bg-lightGrey w-[40px] rounded-full flex-shrink-0">
                         <img src={user.profile_picture} alt="" className="aspect-square rounded-full object-cover"/> {/* this should be the profile picture of the mutual, but for now just uses the user's img */}
                     </div>
                     {/* THIS DOES NOT HANDLE MUTUALS, IDK HOW WE ARE GONNA DO THAT SO I HAVENT MADE PROPS FOR THE BELOW STUFF */}
-                    <p className="text-body text-sm text-lightGrey2 ml-4 mb-0 mr-0 max-[1536px]:text-[0.81rem] max-[1280px]:text-sm">jaquallelina and 12 other mutual friends</p>
+                    <p className="text-body text-sm text-lightGrey2 ml-4 mb-0 mr-0">jaquallelina and 12 other mutual friends</p>
                 </div>
 
-                <button className="absolute bottom-[13%] bg-primary text-body text-xl rounded-full py-2 px-9 hover:bg-primary-dark hover:text-[#f7f7fb] active:bg-[#264268] active:translate-y-0.5 transition-all ease-in-out duration-100 max-[1440px]:text-lg max-[1440px]:py-1 max-[1440px]:px-7 max-[1280px]:py-2 max-[1280px]:px-9 max-[1280px]:text-xl">
+                <button className="bg-primary text-body text-xl rounded-full py-2 px-9 mt-5 hover:bg-primary-dark hover:text-[#f7f7fb] active:bg-[#264268] active:translate-y-0.5 transition-all ease-in-out duration-100">
                     <div className="flex items-center gap-2">
                         <BsFillPersonPlusFill className="inline"/>
-                        <p className="m-0 max-[1440px]:text-[14px] max-[1280px]:text-[1rem]" onClick={ handleAddFriend }>Add Friend</p>
+                        <p className="m-0" onClick={ handleAddFriend }>Add Friend</p>
                     </div>
                 </button>
             </div>
diff --git a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
index 01d2076..93176ad 100644
--- a/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
+++ b/web/src/components/Dashboard/DashboardCommunity/CommunityGalleryWhole.tsx
@@ -11,48 +11,44 @@ interface EventData {
 
 const CommunityGalleryWhole = () => {
   // TEMPORARY DATA passing down events into community gallery vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
-  const [data, setData] = useState<EventData[]>([
-    {
-      title: "Quiz Night",
-      location: "Uni",
-    },
-    {
-      title: "Launch Night",
-      location: "Somewhere",
-    },
-    {
-      title: "C",
-      location: "Somewhere",
-    },
-    {
-      title: "Beach Cleanup",
-      location: "Beach",
-    },
-  ]);
+  // const [data, setData] = useState<EventData[]>([
+  //   {
+  //     title: "Quiz Night",
+  //     location: "Uni",
+  //   },
+  //   {
+  //     title: "Launch Night",
+  //     location: "Somewhere",
+  //   },
+  //   {
+  //     title: "C",
+  //     location: "Somewhere",
+  //   },
+  //   {
+  //     title: "Beach Cleanup",
+  //     location: "Beach",
+  //   },
+  // ]);
 
-  useEffect(() => {
-    // Fetch gallery data
-    const appUrl = import.meta.env.VITE_APP_URL;
-    const port = import.meta.env.VITE_APP_PORT;
-    axios
-      .get(`${appUrl}:${port}/api/homepage/highlights`)
-      .then((res) => {
-        setData(res.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  }, []);
+  // useEffect(() => {
+  //   // Fetch gallery data
+  //   const appUrl = import.meta.env.VITE_APP_URL;
+  //   const port = import.meta.env.VITE_APP_PORT;
+  //   axios
+  //     .get(`${appUrl}:${port}/api/homepage/highlights`)
+  //     .then((res) => {
+  //       setData(res.data);
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // }, []);
   // TEMPORARY ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
   return (
     <div>
       {/* passing event data into community gallery*/}
-      {data.map((event) => (
-        <div className="mb-5">
-          <CommunityGallery event={event.title} location={event.location} />
-        </div>
-      ))}
+        <CommunityGallery />
     </div>
   );
 };