diff --git a/web/src/components/OurCommunity.tsx b/web/src/components/OurCommunity.tsx
index 0d8d258..7e0c81c 100644
--- a/web/src/components/OurCommunity.tsx
+++ b/web/src/components/OurCommunity.tsx
@@ -1,31 +1,60 @@
-import "../styles/componentStyles/OurCommunity.css";
+import MainPageButtonHeadings from "./MainPageButtonHeadings";
 
 const OurCommunity = () => {
-
     return (
-        <div className="community-section">
-            {/*<img className="img1" src="../src/assets/gallery/events/sample1.png"/>*/}
-            <div className="community-pics">
-                <div className="community-pics-top">
-                    <img className="community-img1" src="/assets/gallery/events/sample1.png" title="img1" alt="img1"/>
-                    <img className="community-img2" src="/assets/gallery/events/sample3.png" title="img2" alt="img2"/>
+        <div className="flex flex-col items-center h-screen bg-white text-black font-medium">
+            
+            <div className="relative w-full h-screen">
+                <MainPageButtonHeadings heading="Our Community"/>
+                <div className="flex flex-col items-center">
+                    <div className="text-center font-medium w-[36rem] leading-[1.2rem] mt-[4rem]">
+                        Join our community to start tracking your efforts!
+                        <br />
+                        Create an account to log your hours, connect with others, and stay updated on our events.
+                        With over:
+                    </div>
+                    <div className="text-center text-[5rem] leading-[150%] font-semibold mt-[3.5rem]">1,200</div>
+                    <div className="text-center text-[1.4rem]">volunteers in our club</div>
+                    <button className="text-white text-[0.7rem] py-[1rem] mt-[2.2rem] rounded-[30px] px-8 leading-[0.5rem] bg-[#3B87DD]">
+                        Sign me up!
+                    </button>
                 </div>
-                <div className="community-pics-bottom">
-                    <img className="community-img3" src="/assets/gallery/events/sample3.png" title="img3" alt="img3"/>
-                    <img className="community-img4" src="/assets/gallery/events/sample4.png" title="img4" alt="img4"/>
+
+                <div className="absolute top-0 left-0 right-0 flex flex-col items-center">
+                    <div className="flex w-full h-1/2">
+                        <img
+                            className="object-cover rounded-[20px] ml-[10vw] mt-[5vh] h-[25vh] w-[19vh] transform rotate-[-15deg]"
+                            src="/assets/gallery/events/sample1.png"
+                            title="img1"
+                            alt="img1"
+                        />
+                        <img
+                            className="object-cover rounded-[20px] ml-[53vw] mt-[12vh] h-[35vh] w-[27vh] transform rotate-[17deg]"
+                            src="/assets/gallery/events/sample3.png"
+                            title="img2"
+                            alt="img2"
+                        />
+                    </div>
+                    <div className="flex w-full h-1/2">
+                        <img
+                            className="object-cover rounded-[20px] ml-[23vw] mt-[5vh] h-[35vh] w-[30vh] transform rotate-[7deg]"
+                            src="/assets/gallery/events/sample3.png"
+                            title="img3"
+                            alt="img3"
+                        />
+                        <img
+                            className="object-cover rounded-[20px] ml-[25vw] mt-[8vh] h-[25vh] w-[17vh] transform rotate-[-7deg]"
+                            src="/assets/gallery/events/sample4.png"
+                            title="img4"
+                            alt="img4"
+                        />
+                    </div>
                 </div>
             </div>
-            <div className="community-title">Our Community</div>
-            <div className="community-description">
-                Join our community to start tracking your efforts! 
-                <br></br> 
-                Create an account to log your hours, connect with others, and stay updated on our events. 
-                With over:
-            </div>
-            <div className="community-number">1,200</div>
-            <div className="community-description2">volunteers in our club</div>
-            <button className="community-signup">Sign me up</button>
+            
         </div>
     );
-}
-export default OurCommunity;
+ };
+ 
+ export default OurCommunity;
+ 
\ No newline at end of file
diff --git a/web/src/styles/componentStyles/OurCommunity.css b/web/src/styles/componentStyles/OurCommunity.css
deleted file mode 100644
index 01bf9ae..0000000
--- a/web/src/styles/componentStyles/OurCommunity.css
+++ /dev/null
@@ -1,104 +0,0 @@
-
-.community-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100vh;
-    background-color: white;
-    color: black;
-    font-weight: 500;
-}
-
-.community-title {
-    border-color: black;
-    margin-top: -80vh;
-    margin-bottom: 3rem;
-    border-width: 1px;
-    padding: 0.5rem;
-    padding-left: 4.5rem;
-    padding-right: 4.5rem;
-    border-radius: 30px;
-    
-}
-
-.community-description {
-    text-align: center;
-    font-weight: 300;
-    width: 36rem;
-    line-height: 1.2rem;
-}
-
-.community-number {
-    font-size: 5rem;
-    line-height: 150%;
-    font-weight: 600;
-}
-
-.community-description2 {
-    text-align: center;
-    font-weight: 300;
-    font-size: 0.8rem;
-}
-
-.community-signup {
-    color: black;
-    font-size: 0.7rem;
-    border-style: solid;
-    border-width: 0.6px;
-    border-color: black;
-    margin-top: 2.2rem;
-    border-radius: 30px;
-    padding-left: 2rem;
-    padding-right: 2rem;
-    line-height: 0.5rem;
-    background-color: white;
-}
-
-.community-img1,
-.community-img2,
-.community-img3,
-.community-img4{
-    object-fit: cover;
-    border-radius: 20px;
-}
-
-.community-signup:hover {
-    background-color: rgb(236, 235, 235);
-}
-
-.community-pics {
-    height: 100vh;
-    width: 100%;
-}
-.community-pics-top, .community-pics-bottom {
-    display: flex;
-    height:  50%;
-}
-.community-img1 {
-    margin-left: 10vw;
-    margin-top: 5vh;
-    transform: rotate(-15deg);
-    height: 25vh;
-    width: 19vh;
-}
-.community-img2 {
-    margin-left: 53vw;
-    margin-top: 12vh;
-    height: 35vh;
-    width: 27vh;
-    transform: rotate(17deg);
-}
-.community-img3 {
-    margin-left: 23vw;
-    margin-top: 5vh;
-    height: 35vh;
-    width: 30vh;
-    transform: rotate(7deg);
-}
-.community-img4 {
-    margin-left: 25vw;
-    margin-top: 8vh;
-    height: 25vh;
-    width: 17vh;
-    transform: rotate(-7deg);
-}
\ No newline at end of file