diff --git a/frontend/src/utils/loader.tsx b/frontend/src/utils/loader.tsx
index 29e7c34e..0d579f85 100644
--- a/frontend/src/utils/loader.tsx
+++ b/frontend/src/utils/loader.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
 
-const Loader: React.FC = () => {
+const SkeletonLoader = ({ count = 1 }) => {
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-900">
-      <div className="relative w-20 h-20">
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-blue-500 rounded-full animate-spin"></div>
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-pink-500 rounded-full animate-spin delay-150"></div>
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-green-500 rounded-full animate-spin delay-300"></div>
-      </div>
+    <div className="flex space-x-4">
+      {[...Array(count)].map((_, idx) => (
+        <div key={idx} className="p-6 w-60 h-32 bg-gray-800 rounded-3xl animate-pulse">
+          <div className="space-y-4">
+            <div className="w-3/4 h-4 bg-gray-500 rounded"></div>
+            <div className="w-full h-4 bg-gray-500 rounded"></div>
+            <div className="w-5/6 h-4 bg-gray-500 rounded"></div>
+          </div>
+        </div>
+      ))}
     </div>
   );
 };
 
-export default Loader;
+export default SkeletonLoader;
+
+// calling function should be pass --- no. of sketeton cards 
+// eg .   ----------->>>    <SkeletonLoader count={4}   />