diff --git a/package.json b/package.json
index 32d8e86e..bee9d55c 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.3",
     "react-icons": "^4.10.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "^5.0.1",
diff --git a/src/components/shared/index.js b/src/components/shared/index.js
index 668310a6..18dab934 100644
--- a/src/components/shared/index.js
+++ b/src/components/shared/index.js
@@ -9,3 +9,4 @@ export { default as Loading } from "./loading/Loading";
 export { default as Modal } from "./modal/Modal";
 export { default as Navbar } from "./navbar/Navbar";
 export { default as ProfileCompletion } from "./profileCompletion/ProfileCompletion";
+export { default as SkeletonCard } from "./skeleton/Skeleton";
diff --git a/src/components/shared/skeleton/Skeleton.css b/src/components/shared/skeleton/Skeleton.css
new file mode 100644
index 00000000..34227f56
--- /dev/null
+++ b/src/components/shared/skeleton/Skeleton.css
@@ -0,0 +1,15 @@
+
+.skeleton-container{
+    margin:1em;
+    padding: 1em;
+    border-radius: 15px;
+    background-color: #f5f6fa;
+}
+.skeleton-footer{
+    display: flex;
+    justify-content: space-between;
+    /* padding-right: 1em; */
+    margin-top: 2em;
+    position: relative;
+    bottom: 0;
+}
\ No newline at end of file
diff --git a/src/components/shared/skeleton/Skeleton.jsx b/src/components/shared/skeleton/Skeleton.jsx
new file mode 100644
index 00000000..46afa7a9
--- /dev/null
+++ b/src/components/shared/skeleton/Skeleton.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import "./Skeleton.css";
+import "react-loading-skeleton/dist/skeleton.css";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+
+const SkeletonCard = () => {
+  return (
+    <SkeletonTheme baseColor="#bdc3c7" highlightColor="#f1f2f6">
+      <p style={{ height: "100%" }}>
+        <div className="skeleton-container">
+          <div className="grid-1">
+            {/* Image */}
+            <Skeleton width={290} count={1} height={150} />
+            <br />
+            {/* Tags */}
+            <Skeleton width={180} count={3} height={15} />
+          </div>
+          <div className="grid-2">
+            {/* Button */}
+            <div className="skeleton-footer">
+              <Skeleton width={210} count={1} height={35} />
+              <Skeleton width={50} count={1} height={35} />
+            </div>
+          </div>
+        </div>
+      </p>
+    </SkeletonTheme>
+  );
+};
+
+export default SkeletonCard;
diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx
index 1739ee5c..219ff1d2 100644
--- a/src/pages/clubs/Clubs.jsx
+++ b/src/pages/clubs/Clubs.jsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import useSWR from "swr";
-import { Footer, Navbar } from "../../components/shared";
+import { Footer, Navbar, SkeletonCard } from "../../components/shared";
 import ClubCard from "../../components/shared/cards/club/ClubCard";
 import { clubEndpoints } from "../../static/ApiEndpoints";
 import ComponentHelmet from "../../utils/ComponentHelmet";
@@ -8,7 +8,7 @@ import fetcher from "../../utils/Fetcher";
 import "./Clubs.css";
 
 const Clubs = () => {
-  const { data: clubs } = useSWR(clubEndpoints.all, fetcher);
+  const { data: clubs, isLoading:loading } = useSWR(clubEndpoints.all, fetcher);
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -22,9 +22,21 @@ const Clubs = () => {
       <main className="container">
         <div className="clubspage_main_parent">
           <div className="clubspage_cardsdiv">
-            {clubs?.map((club, id) => (
-              <ClubCard club={club} key={id} />
-            ))}
+            {loading ? (
+              <div
+                style={{
+                  display: "flex",
+                  width: "100%",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                {" "}
+                <SkeletonCard /> <SkeletonCard /> <SkeletonCard />{" "}
+                <SkeletonCard />{" "}
+              </div>
+            ) : (
+              clubs?.map((club, id) => <ClubCard club={club} key={id} />)
+            )}
           </div>
         </div>
       </main>
diff --git a/src/pages/events/all/Events.jsx b/src/pages/events/all/Events.jsx
index d3be7285..44a773bb 100644
--- a/src/pages/events/all/Events.jsx
+++ b/src/pages/events/all/Events.jsx
@@ -4,14 +4,22 @@ import { useSelector } from "react-redux";
 import useSWR from "swr";
 import { EventsCard } from "../../../components/private";
 import CreateEvents from "../../../components/private/events/create/CreateEvents";
-import { Button, Footer, Navbar } from "../../../components/shared";
+import {
+  Button,
+  Footer,
+  Navbar,
+  SkeletonCard,
+} from "../../../components/shared";
 import { eventEndpoints } from "../../../static/ApiEndpoints";
 import ComponentHelmet from "../../../utils/ComponentHelmet";
 import fetcher from "../../../utils/Fetcher";
 import "./Events.scss";
 
 const Events = () => {
-  const { data: events } = useSWR(eventEndpoints.all, fetcher);
+  const { data: events, isLoading: loading } = useSWR(
+    eventEndpoints.all,
+    fetcher,
+  );
   const [showCreateModal, setshowCreateModal] = useState(false);
   const userType = useSelector((state) => state.user.userType);
 
@@ -49,9 +57,22 @@ const Events = () => {
             )}
           </div>
           <div className="events_div">
-            {events?.map((event, id) => (
-              <EventsCard event={event} key={id} />
-            ))}
+            {/* <SkeletonCard/> */}
+            {loading ? (
+              <div
+                style={{
+                  display: "flex",
+                  width: "100%",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                {" "}
+                <SkeletonCard /> <SkeletonCard /> <SkeletonCard />{" "}
+                <SkeletonCard />{" "}
+              </div>
+            ) : (
+              events?.map((event, id) => <EventsCard event={event} key={id} />)
+            )}
           </div>
         </div>
       </main>