diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb26e80..c7d02e9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "react-fast-marquee": "^1.6.4",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.2.1",
+        "react-loading-skeleton": "^3.4.0",
         "react-parallax-tilt": "^1.7.231",
         "react-responsive-modal": "^6.4.2",
         "react-router-dom": "^6.24.0",
@@ -4842,6 +4843,14 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz",
+      "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-parallax-tilt": {
       "version": "1.7.232",
       "resolved": "https://registry.npmjs.org/react-parallax-tilt/-/react-parallax-tilt-1.7.232.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 254593c..dc06007 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "react-fast-marquee": "^1.6.4",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-parallax-tilt": "^1.7.231",
     "react-responsive-modal": "^6.4.2",
     "react-router-dom": "^6.24.0",
diff --git a/frontend/src/components/PostsSkeleton.tsx b/frontend/src/components/PostsSkeleton.tsx
new file mode 100644
index 0000000..3763a9a
--- /dev/null
+++ b/frontend/src/components/PostsSkeleton.tsx
@@ -0,0 +1,44 @@
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const PostsPageSkeleton = () => {
+  const skeletonArray = Array(9).fill(0); // Create an array with 9 elements for the skeleton placeholders
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full p-24">
+      {skeletonArray.map((_, index) => (
+        <div
+          key={index}
+          className="text-[#000435] bg-white  dark:text-white dark:bg-blue-950 border border-gray-600 p-6 rounded-lg shadow-lg hover:shadow-2xl transition-transform duration-300 ease-in-out"
+        //   style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
+        >
+          <div className="flex justify-between items-center mb-0">
+            <Skeleton height={30} width="60%" />
+            <Skeleton circle={true} height={30} width={30} />
+          </div>
+          <Skeleton height={20} width="80%" className="mb-2 dark:bg-white" />
+          <Skeleton height={12} width="100%" className="mb-2  dark:bg-white" />
+          <Skeleton height={16} width="40%" className="mb-2  dark:bg-white" />
+          <div className="flex flex-wrap gap-2 mb-2">
+            {Array(3).fill(0).map((_, idx) => (
+              <Skeleton key={idx} height={24} width={50} className="rounded-md  dark:bg-white" />
+            ))}
+          </div>
+          <div className="flex justify-between">
+            <div className="flex rtl:space-x-reverse">
+              {Array(3).fill(0).map((_, idx) => (
+                <Skeleton key={idx} circle={true} height={32} width={32} />
+              ))}
+            </div>
+            <div className="flex space-x-2">
+              <Skeleton height={24} width={24} />
+              <Skeleton height={24} width={24} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PostsPageSkeleton;
diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx
index d55de4a..c2f4192 100644
--- a/frontend/src/pages/Posts.tsx
+++ b/frontend/src/pages/Posts.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState, useRef } from "react";
-import Loader from "../components/Loader";
 import PostCard from "../components/PostCard";
 import { userState } from "../store/atoms/auth";
 import { useRecoilValue } from "recoil";
 import usePosts from "../hooks/usePosts";
 import bgHero from "../assets/bgHero.png";
 import { IoIosArrowDown } from "react-icons/io";
+import PostsPageSkeleton from "../components/PostsSkeleton";
 
 const Posts = () => {
   const currentUser = useRecoilValue(userState);
@@ -80,7 +80,7 @@ const Posts = () => {
   };
 
   if (loading) {
-    return <Loader />;
+    return <PostsPageSkeleton />;
   }
 
   if (error) {