diff --git a/src/components/shared/buttons/backtotopbutton/BackToTop.scss b/src/components/shared/buttons/backtotopbutton/BackToTop.scss
index a4d9fefd..f1ee9377 100644
--- a/src/components/shared/buttons/backtotopbutton/BackToTop.scss
+++ b/src/components/shared/buttons/backtotopbutton/BackToTop.scss
@@ -10,8 +10,8 @@
     background-color: #ff5b31;
     border-radius: 10px;
     position: fixed;
-    bottom: 5rem;
-    right: 5rem;
+    bottom: 30px;
+    right: 30px;
     z-index: 999;
     display: flex;
     justify-content: center;
diff --git a/src/components/shared/cards/club/ClubCard.jsx b/src/components/shared/cards/club/ClubCard.jsx
index 07b5f132..77ab6302 100644
--- a/src/components/shared/cards/club/ClubCard.jsx
+++ b/src/components/shared/cards/club/ClubCard.jsx
@@ -5,34 +5,39 @@ import "./ClubCard.scss";
 const ClubCard = ({ club }) => {
   return (
     <div className="clubcard_parent">
+      {/* Top Section */}
       <div className="clubcard_top">
-        <img src={clubBanner} alt="" />
+        <img
+          src={clubBanner}
+          alt={`${club?.name || "Club"} banner`}
+          className="clubcard_banner"
+        />
         <div className="clubcard_text">
-          <h1>{club?.name}</h1>
-          <p>{club?.tagLine}</p>
+          <h1>{club?.name || "The Monk community"}</h1>
+          <p title={club?.description}>
+            {club?.description ||
+              "Organizing @Hack4Bengal, Engineering @Edilitics • Worked w/ 5+ startups • Building OSS product with 200+ users • Open to Frontend Roles"}
+          </p>
         </div>
       </div>
 
+      {/* Call to Action Section */}
       <div className="clubcard_ctadiv">
-        <div className="cta_membersdiv">
-          <div className="cta_members">
-            <img
-              src="https://avatars.githubusercontent.com/u/72851613?v=4"
-              alt=""
-            />
-            <img
-              src="https://avatars.githubusercontent.com/u/72851613?v=4"
-              alt=""
-            />
-            <img
-              src="https://avatars.githubusercontent.com/u/72851613?v=4"
-              alt=""
-            />
-          </div>
-          <p>200+ Members</p>
+        <div className="profile_numbers">
+          <p className="counts followersCount">
+            <span>1.25k</span> Followers
+          </p>
+
+          <p className="counts EventsCount">
+            <span>231</span> Events
+          </p>
         </div>
 
-        <Link to={`/club/${club?.userName}`}>
+        <Link
+          to={`/club/${club?.userName}`}
+          aria-label={`Visit ${club?.name || "club"} page`}
+          className="clubcard_cta_link"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="21"
@@ -40,6 +45,7 @@ const ClubCard = ({ club }) => {
             viewBox="0 0 29 29"
             fill="none"
             className="clubcard_cta_arrow"
+            role="img"
           >
             <path
               d="M22.6379 1.68188C23.2552 1.68226 23.8472 1.92766 24.2837 2.36418C24.7202 2.80069 24.9656 3.39262 24.966 4.00994L24.966 22.6784C24.9656 23.2957 24.7202 23.8877 24.2837 24.3242C23.8472 24.7607 23.2552 25.0061 22.6379 25.0065L3.96944 25.0065C3.36618 24.9848 2.7948 24.7302 2.3754 24.296C1.956 23.8619 1.72123 23.2821 1.72043 22.6784C1.72123 22.0748 1.956 21.4949 2.3754 21.0608C2.79481 20.6266 3.36618 20.372 3.96943 20.3503L17.0154 20.3503L0.675002 4.00994C0.238132 3.57307 -0.00729571 2.98055 -0.00729703 2.36273C-0.00729566 1.7449 0.238133 1.15238 0.675002 0.715508C1.11187 0.278639 1.7044 0.0332108 2.32222 0.0332088C2.94005 0.0332095 3.53257 0.278639 3.96944 0.715508L20.3098 17.0559L20.3098 4.00994C20.3102 3.39262 20.5556 2.80069 20.9921 2.36418C21.4286 1.92766 22.0206 1.68226 22.6379 1.68188Z"
diff --git a/src/components/shared/cards/club/ClubCard.scss b/src/components/shared/cards/club/ClubCard.scss
index d5158de4..eaf19b63 100644
--- a/src/components/shared/cards/club/ClubCard.scss
+++ b/src/components/shared/cards/club/ClubCard.scss
@@ -1,6 +1,6 @@
 .clubcard_parent {
   display: inline-flex;
-  padding: 25px;
+  padding: 12px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
@@ -9,15 +9,9 @@
   border: 1px solid var(--Neutral-G30, #f0efef);
   background: #fff;
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
-  width: 380px;
   transition: all 0.3s ease-in-out;
   position: relative;
 
-  @media screen and (max-width: 500px) {
-    padding: 12px;
-    max-width: 100vw;
-  }
-
   &:hover {
     border: 1px solid #ff5a318a;
     -webkit-box-shadow: 0px 0px 20px 7px rgba(226, 105, 89, 0.32);
@@ -40,7 +34,8 @@
 
     img {
       align-self: stretch;
-      border-radius: 16px;
+      border-radius: 10px;
+      height: 150px;
       object-fit: cover;
       max-width: 100%;
       @media screen and (max-width: 500px) {
@@ -54,52 +49,27 @@
       flex-direction: column;
       gap: 10px;
 
-      @media screen and (max-width: 500px) {
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        align-self: stretch;
-        justify-content: space-between;
-      }
-
       h1 {
-        align-self: stretch;
-        color: var(--secondary);
-        text-align: center;
-        font-family: var(--poppins);
-        font-size: 20.5px;
+        font-family: var(--outfit);
+        font-size: 20px;
         font-style: normal;
         font-weight: 600;
-        line-height: normal;
-        letter-spacing: 0.4px;
-
-        @media screen and (max-width: 500px) {
-          text-align: left;
-
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
+        line-height: 1;
       }
 
       p {
-        align-self: stretch;
-        color: var(--secondary);
-        text-align: center;
         font-family: var(--outfit);
-        font-size: 17px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: 0.32px;
-        min-height: 45px;
+        font-size: 14px;
+
+        /* Truncate to 2 lines */
+        display: -webkit-box; /* Required for truncation */
+        -webkit-line-clamp: 2; /* Limit text to 2 lines */
+        -webkit-box-orient: vertical; /* Define the box orientation */
+        overflow: hidden; /* Hide overflowing text */
 
         @media screen and (max-width: 500px) {
-          text-align: left;
-          // truncate to 2 lines
           display: -webkit-box;
-          -webkit-line-clamp: 2;
+          -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
           overflow: hidden;
           min-height: auto;
@@ -110,56 +80,26 @@
 
   .clubcard_ctadiv {
     display: flex;
-    align-items: flex-start;
-    gap: 16px;
+    align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 0 10px;
 
-    .cta_membersdiv {
+    .profile_numbers {
+      font-family: var(--outfit);
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 1rem;
 
-      img {
-        width: 34px;
-        height: 34px;
-        max-width: 34px;
-        max-height: 34px;
-        outline: none;
-        background: none;
-        width: 34px;
-        height: 34px;
-        border-radius: 50%;
-        overflow: hidden;
-        border: 3px solid rgb(255, 255, 255);
-        margin-left: -16px;
-      }
-      p {
+      .counts {
+        font-size: 14px;
+        line-height: 1;
         margin: 0;
-        font-family: var(--outfit);
-        font-size: 15px;
-        font-weight: 500;
+        span {
+          font-weight: 600;
+        }
       }
     }
 
-    .clubcard_readmore {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 8px;
-      color: var(--primary);
-      border-radius: 6px;
-      background-color: transparent;
-      border: 1px solid var(--primary);
-      white-space: nowrap;
-      font-family: var(--outfit) !important;
-      font-weight: 400;
-      font-size: 15px;
-      line-height: normal;
-      letter-spacing: 0.32px;
-    }
-
     .clubcard_cta_arrow {
       display: flex;
       justify-content: center;
diff --git a/src/pages/clubs/Clubs.css b/src/pages/clubs/Clubs.css
deleted file mode 100644
index 170d6a30..00000000
--- a/src/pages/clubs/Clubs.css
+++ /dev/null
@@ -1,32 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap");
-
-.clubspage_main_parent {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-  min-height: 100vh;
-}
-
-.clubspage_cardsdiv {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2.5rem;
-  justify-content: center;
-  margin-bottom: 0;
-}
-
-@media screen and (max-width: 500px) {
-  .clubspage_main_parent {
-    margin-top: 2rem;
-    margin-bottom: 3rem;
-    padding: 0px 10px;
-  }
-
-  .clubspage_cardsdiv {
-    margin-top: 5rem;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    column-gap: 1.5rem;
-    row-gap: 1.5rem;
-  }
-}
diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx
index 29307900..6384d572 100644
--- a/src/pages/clubs/Clubs.jsx
+++ b/src/pages/clubs/Clubs.jsx
@@ -3,10 +3,10 @@ import React from "react";
 import { ClubCard, Footer, Loading, Navbar } from "../../components/shared";
 import { getClubs } from "../../integrations/Clubs";
 import ComponentHelmet from "../../utils/ComponentHelmet";
-import "./Clubs.css";
+import "./Clubs.scss";
 
 const Clubs = () => {
-  const { data: clubs, isLoading } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ["clubsData"],
     queryFn: getClubs,
     refetchOnMount: true,
@@ -14,22 +14,30 @@ const Clubs = () => {
     retry: 2,
   });
 
+  // demo 20 array of clubs
+  const clubs = Array.from({ length: 20 }, (_, i) => ({
+    _id: "673ac2814c6e89e58af8ca11",
+    userType: "club",
+    userName: "tamalcodes",
+    name: "God Father Org",
+    email: "tamalcodes@gmail.com",
+    password: "$2a$10$90vC9McfHXpXpLlzUOFeuulorPR9dIQ2ns37uIP5sX5ehyO5C.Mmm",
+    cart: [],
+    __v: 0,
+  }));
+
   return (
     <>
       <ComponentHelmet type="Clubs" />
       <Navbar />
 
-      <main className="container">
-        <div className="clubspage_main_parent">
-          <div className="clubspage_cardsdiv">
-            {isLoading || !clubs || clubs?.length === 0 ? (
-              <Loading />
-            ) : (
-              clubs?.map((club, id) => <ClubCard club={club} key={id} />)
-            )}
-          </div>
-        </div>
-      </main>
+      <div className="clubs_parent">
+        {isLoading || !clubs || clubs?.length === 0 ? (
+          <Loading />
+        ) : (
+          clubs?.map((club, id) => <ClubCard club={club} key={id} />)
+        )}
+      </div>
 
       <Footer />
     </>
diff --git a/src/pages/clubs/Clubs.scss b/src/pages/clubs/Clubs.scss
new file mode 100644
index 00000000..a01554c7
--- /dev/null
+++ b/src/pages/clubs/Clubs.scss
@@ -0,0 +1,22 @@
+.clubs_parent {
+  padding: 2rem 7rem;
+  min-height: 100vh;
+  margin: 0 3rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
+  grid-template-rows: 1fr 1fr 1fr; /* Three equal rows */
+  gap: 2rem; /* Optional: Add space between grid items */
+
+  @media screen and (max-width: 1200px) {
+    grid-template-columns: 1fr 1fr; /* Two equal columns */
+    grid-template-rows: 1fr 1fr 1fr; /* Three equal rows */
+    padding: 2rem 3rem;
+  }
+
+  @media screen and (max-width: 800px) {
+    grid-template-columns: 1fr; /* One column */
+    grid-template-rows: 1fr 1fr 1fr 1fr; /* Four equal rows */
+    padding: 3rem 2rem;
+    margin: 0;
+  }
+}