diff --git a/src/Pages/CampusChapters/CampusChapters.jsx b/src/Pages/CampusChapters/CampusChapters.jsx
index 03757cb6a..cb12db74d 100644
--- a/src/Pages/CampusChapters/CampusChapters.jsx
+++ b/src/Pages/CampusChapters/CampusChapters.jsx
@@ -11,6 +11,7 @@ import Typography from "@mui/material/Typography";
 import { Button, CardActionArea, CardActions } from "@mui/material";
 import Levels from "./Levels/Levels";
 import axios from "axios";
+import { CampusCard } from "./campus-card/CampusCard";
 
 const CampusChapters = () => {
   const [selectedZone, setSelectedZone] = useState("all");
@@ -197,25 +198,7 @@ const CampusChapters = () => {
                     (selectedZone === "all" &&
                       campus.district === selectedDistrict)
                   ) {
-                    return (
-                      <div className={styles.college}>
-                        <div className={styles.college_name}>{campus.name}</div>
-                        <div className={styles.college_district}>
-                          {campus.district}
-                        </div>
-                        <div className={styles.college_zone}>
-                          Zone: {campus.zone}
-                        </div>
-                        <div className={styles.college_lead}>
-                          Campus Lead: {campus.lead}
-                        </div>
-                        {campus.email && (
-                          <div className={styles.college_email}>
-                            Email Address: {campus.email}
-                          </div>
-                        )}
-                      </div>
-                    );
+                    return <CampusCard data={campus} />;
                   }
                   //return the campuses that match the selected zone and district
                   // else if (
diff --git a/src/Pages/CampusChapters/CampusChapters.module.css b/src/Pages/CampusChapters/CampusChapters.module.css
index 61a9422b3..1424169d4 100644
--- a/src/Pages/CampusChapters/CampusChapters.module.css
+++ b/src/Pages/CampusChapters/CampusChapters.module.css
@@ -562,6 +562,8 @@ p {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  gap: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 .college {
@@ -642,4 +644,4 @@ p {
   font-family: "Noto Sans", sans-serif;
   font-size: 4.55rem;
   font-weight: 600;
-}
+}
\ No newline at end of file
diff --git a/src/Pages/CampusChapters/campus-card/CampusCard.jsx b/src/Pages/CampusChapters/campus-card/CampusCard.jsx
new file mode 100644
index 000000000..7f9fd4b1e
--- /dev/null
+++ b/src/Pages/CampusChapters/campus-card/CampusCard.jsx
@@ -0,0 +1,61 @@
+import React from 'react'
+export const Content = ({ title, children, className }) => {
+    return (
+        <div className={`flex flex-col gap-1 justify-center items-start ${className}`}>
+            <h3 className="text-xs font-bold ">{title}</h3>
+            <p className="text-sm font-light">{children}</p>
+        </div>
+    )
+}
+export const CampusName = ({ children }) => {
+    return (
+        <div className="relative mb-4 group">
+            <p className='truncate text-sm md:text-lg font-bold leading-tight text-muorange text-ellipsis'>{children}</p>
+            <p className='hidden  bg-white p-5 shadow-sm rounded-xl group-hover:block absolute top-0 left-0 right-0 w-full text-sm md:text-lg font-bold leading-tight text-muorange'>
+                {children}
+            </p>
+        </div>
+    )
+}
+export const CampusCard = ({ data }) => {
+
+    return (
+        <div className="w-full sm:max-w-[47.2%] lg:max-w-[31.66796%] p-5   rounded-xl shadow-[0_0_5px_2px_rgba(0,0,0,0.05)]">
+            <CampusName>{data.name}</CampusName>
+            <div className="flex flex-col gap-4 ">
+                <div className="grid grid-cols-4">
+                    <Content title={'Zone'} >{data.zone}</Content>
+                    <Content title={'District'}  >{data.district}</Content>
+                </div>
+                <Content title={'Campus Lead'} >{data.lead}</Content>
+                <Content title={'Email Address'}  >
+                    <a href={`mailto:${data.email}`} className='flex gap-[1px] font-thin justify-center items-center'>
+                        <MailSvg />
+                        {data.email}
+                    </a>
+                </Content>
+            </div>
+        </div>
+    )
+}
+export const MailSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24"
+            viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" strokeWidth="2"
+            strokeLinecap="round" strokeLinejoin="round"
+            class="lucide lucide-mail h-4 w-4 text-muted-foreground"
+            data-id="18"
+        >
+            <rect width="20" height="16" x="2" y="4" rx="2" />
+            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+        </svg>
+    )
+}
+
+export const PopUp = () => {
+    return (
+        <div>PopUp</div>
+    )
+}
\ No newline at end of file