diff --git a/app/[locale]/members/page.tsx b/app/[locale]/members/page.tsx
index 8b418ca..bfce832 100644
--- a/app/[locale]/members/page.tsx
+++ b/app/[locale]/members/page.tsx
@@ -9,6 +9,7 @@ import { useTranslations } from 'next-intl';
 import useTextDirection from '@/hooks/useTextDirection';
 import Magnifier from '@/components/SvgCmps/Magnifier';
 import classNames from 'classnames';
+import MemberCardLoader from '@/components/Members/MemberCard/memberCardLoader/MemberCardLoader';
 
 const WelcomeMessage = () => {
   const t = useTranslations('Members');
@@ -79,7 +80,12 @@ const MembersPage: React.FC<{}> = ({}) => {
           />
         </div>
       </div>
-      <MembersList members={members} />
+
+      {members.length > 0 ? (
+        <MembersList members={members} />
+      ) : (
+        <MemberCardLoader memberCardNum={6} />
+      )}
     </div>
   );
 };
diff --git a/components/Members/MemberCard/memberCardLoader/MemberCardInfoLoader.tsx b/components/Members/MemberCard/memberCardLoader/MemberCardInfoLoader.tsx
new file mode 100644
index 0000000..05f9ac2
--- /dev/null
+++ b/components/Members/MemberCard/memberCardLoader/MemberCardInfoLoader.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+function MemberCardInfoLoader() {
+  return (
+    <div className="flex  w-full ">
+      <div className="flex flex-col rounded-md p-[10px] pr-6 w-full gap-2">
+        <div className="flex gap-4">
+          <div className="h-[40px] w-[40px] rounded-full bg-slate-300 animate-pulse"></div>
+          <div className="titles-container block pt-1   ">
+            <div className="flex  flex-col gap-2 ">
+              <div className="h-4 w-20 rounded-lg bg-slate-300 animate-pulse "></div>
+              <div className="h-4 w-32 rounded-lg bg-slate-300 animate-pulse "></div>
+            </div>
+          </div>
+        </div>
+        <div className="h-[6dvh] w-full rounded-md bg-slate-300 animate-pulse p-1 mt-2 ">
+          {' '}
+        </div>
+        <div className="h-4 w-32 rounded-lg bg-slate-300 animate-pulse "></div>
+      </div>
+      <div className="flex flex-col w-[67px] bg-purple-200 justify-evenly items-center dark:bg-gray-800 rounded-tl-2xl rounded-bl-2xl shadow-2xl">
+        <div className="h-[35px] w-[35px] rounded-full bg-slate-400 animate-pulse"></div>
+        <div className="h-[35px] w-[35px] rounded-full bg-slate-400 animate-pulse"></div>
+        <div className="h-[35px] w-[35px] rounded-full bg-slate-400 animate-pulse"></div>
+      </div>
+    </div>
+  );
+}
+
+export default MemberCardInfoLoader;
diff --git a/components/Members/MemberCard/memberCardLoader/MemberCardLoader.tsx b/components/Members/MemberCard/memberCardLoader/MemberCardLoader.tsx
new file mode 100644
index 0000000..7f5411c
--- /dev/null
+++ b/components/Members/MemberCard/memberCardLoader/MemberCardLoader.tsx
@@ -0,0 +1,21 @@
+import MemberCardInfoLoader from './MemberCardInfoLoader';
+
+const MemberCardLoader = ({ memberCardNum }: { memberCardNum: number }) => {
+  const duplicateLogic = Array.from({ length: memberCardNum }, (_, index) => {
+    return (
+      <div
+        key={index}
+        className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-md w-full xl:w-[400px] xl:h-[173px]"
+      >
+        <MemberCardInfoLoader />
+      </div>
+    );
+  });
+  return (
+    <div className="flex mx-auto w-[90%] flex-wrap gap-4 mt-6 justify-between">
+      {duplicateLogic}
+    </div>
+  );
+};
+
+export default MemberCardLoader;