diff --git a/admin-panel/package.json b/admin-panel/package.json
index d7a82c4..71ea438 100644
--- a/admin-panel/package.json
+++ b/admin-panel/package.json
@@ -18,6 +18,7 @@
     "cmdk": "^1.0.4",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.16.4",
+    "jodit-react": "^4.1.2",
     "lucide-react": "^0.468.0",
     "moment": "^2.30.1",
     "nepali-date-converter": "^3.3.2",
diff --git a/admin-panel/src/App.tsx b/admin-panel/src/App.tsx
index aaefe45..cb75b58 100644
--- a/admin-panel/src/App.tsx
+++ b/admin-panel/src/App.tsx
@@ -15,6 +15,7 @@ import UsersPage from "@/pages/UsersPage";
 import PostsPage from "@/pages/PostsPage";
 import LogoutPage from "@/pages/LogoutPage";
 import CategoriesPage from "@/pages/CategoriesPage";
+import CreatePost from "@/pages/createPostPage";
 
 function App() {
   const { isCheckingAuth, checkAuth, isAuthenticated } = useAuthStore();
@@ -66,18 +67,21 @@ function App() {
           path="/categories"
           element={
             <PrivateRoute>
-              <CategoriesPage/>
+              <CategoriesPage />
             </PrivateRoute>
           }
         />
-         <Route path="/logout" element={<LogoutPage />} />
-
-        
+        <Route
+          path="/create-post"
+          element={
+            <PrivateRoute>
+              <CreatePost />
+            </PrivateRoute>
+          }
+        />
+        <Route path="/logout" element={<LogoutPage />} />
       </Routes>
-      <Toaster
-        richColors={true}
-        position="top-right"
-      />
+      <Toaster richColors={true} position="top-right" />
     </>
   );
 }
diff --git a/admin-panel/src/components/Sidebar/Routes.tsx b/admin-panel/src/components/Sidebar/Routes.tsx
index d593871..746a4bb 100644
--- a/admin-panel/src/components/Sidebar/Routes.tsx
+++ b/admin-panel/src/components/Sidebar/Routes.tsx
@@ -1,4 +1,4 @@
-import { Paperclip, Users, Home, LogOut, List } from "lucide-react";
+import { Paperclip, Users, Home, LogOut, List, CirclePlus } from "lucide-react";
 import { Link, useLocation } from "react-router-dom"; // Import useLocation hook
 
 const Routes = () => {
@@ -18,9 +18,9 @@ const Routes = () => {
         title="Users"
         to="/users"
       />
-       <Route
+      <Route
         Icon={List}
-        selected={location.pathname === "/categories"} 
+        selected={location.pathname === "/categories"}
         title="Categories"
         to="/categories"
       />
@@ -30,7 +30,13 @@ const Routes = () => {
         title="Posts"
         to="/posts"
       />
-     
+      <Route
+        Icon={CirclePlus}
+        selected={location.pathname === "/create-post"}
+        title="Add Post"
+        to="/create-post"
+      />
+
       <Route
         Icon={LogOut}
         selected={location.pathname === "/logout"}
@@ -55,10 +61,11 @@ const Route = ({
   return (
     <Link to={to} className="w-full">
       <button
-        className={`flex items-center justify-start gap-3 w-full rounded px-2 py-1.5 text-sm transition-[box-shadow,_background-color,_color] ${selected
+        className={`flex items-center justify-start gap-3 w-full rounded px-2 py-1.5 text-sm transition-[box-shadow,_background-color,_color] ${
+          selected
             ? "bg-white text-stone-950 shadow"
             : "hover:bg-stone-200 bg-transparent text-stone-500 shadow-none"
-          }`}
+        }`}
       >
         <Icon className={selected ? "text-violet-500" : ""} />
         <span>{title}</span>
diff --git a/admin-panel/src/hooks/useCreatePost.ts b/admin-panel/src/hooks/useCreatePost.ts
new file mode 100644
index 0000000..acc76cd
--- /dev/null
+++ b/admin-panel/src/hooks/useCreatePost.ts
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { createPost } from "@/services/postsService";
+
+export const useCreatePost = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleCreatePost = async (postData: any) => {
+        
+        try {
+            setIsLoading(true);
+        setError(null);
+            const data = await createPost(postData);
+            return data;
+        } catch (err: any) {
+            setError(err.response?.data?.message || "Failed to create post.");
+            throw err;
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return { handleCreatePost, isLoading, error };
+};
diff --git a/admin-panel/src/hooks/usePosts.tsx b/admin-panel/src/hooks/usePosts.tsx
index 1059b60..6c219bc 100644
--- a/admin-panel/src/hooks/usePosts.tsx
+++ b/admin-panel/src/hooks/usePosts.tsx
@@ -10,6 +10,7 @@ import { fetchPosts } from "@/services/postsService";
  */
 export const usePosts = (page: number, limit: number) => {
     const [posts, setPosts] = useState([]);
+    const [totalPosts, setTotalPosts] = useState(0)
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -18,8 +19,9 @@ export const usePosts = (page: number, limit: number) => {
             try {
                 setLoading(true);
                 setError(null);
-                const data = await fetchPosts(page, limit);
-                setPosts(data.posts);
+                const { posts, total } = await fetchPosts(page, limit);
+                setPosts(posts);
+                setTotalPosts(total);
             } catch (err: any) {
                 setError(err.message || "An error occurred while fetching users");
             } finally {
@@ -30,6 +32,6 @@ export const usePosts = (page: number, limit: number) => {
         fetchData();
     }, [page, limit]);
 
-    return { posts, loading, error };
+    return { posts, totalPosts, loading, error };
 };
 
diff --git a/admin-panel/src/pages/CategoriesPage.tsx b/admin-panel/src/pages/CategoriesPage.tsx
index 6fac33d..1dc4824 100644
--- a/admin-panel/src/pages/CategoriesPage.tsx
+++ b/admin-panel/src/pages/CategoriesPage.tsx
@@ -31,7 +31,7 @@ export const CategoryPage: React.FC = () => {
                     <input
                         type="text"
                         placeholder="Search categories..."
-                        className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        className="w-1/2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                     />
diff --git a/admin-panel/src/pages/CreatePostPage.tsx b/admin-panel/src/pages/CreatePostPage.tsx
new file mode 100644
index 0000000..04eab69
--- /dev/null
+++ b/admin-panel/src/pages/CreatePostPage.tsx
@@ -0,0 +1,151 @@
+import { useState, useRef } from "react";
+import { Link } from "react-router-dom";
+import { MdCloudUpload } from "react-icons/md";
+import JoditEditor from "jodit-react";
+import { toast } from "sonner";
+import { MainLayout } from "@/layout/MainLayout";
+import { useAuthStore } from "@/store/authStore";
+import { useCreatePost } from "@/hooks/useCreatePost";
+
+const CreatePost: React.FC = () => {
+  const { store } = useAuthStore();
+  const editor = useRef<JoditEditor | null>(null);
+
+  // State variables
+  const [title, setTitle] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [image, setImage] = useState<File | null>(null);
+  const [imgPreview, setImgPreview] = useState<string>("");
+
+  const { handleCreatePost, isLoading } = useCreatePost();
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = e.target;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith("image/")) {
+        setImage(file);
+        setImgPreview(URL.createObjectURL(file));
+      } else {
+        toast.error("Please select a valid image file.");
+      }
+    }
+  };
+
+  const addPost = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!image) {
+      toast.error("Please select an image.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("title", title);
+    formData.append("description", description);
+    formData.append("image", image);
+
+    try {
+      const response = await handleCreatePost(formData);
+      toast.success(response.message);
+    } catch (error) {
+      // Error handling is already managed in the hook, so no additional logic is needed here.
+    }
+  };
+
+  return (
+    <MainLayout>
+      <div className="bg-white rounded-md">
+        <div className="flex justify-between p-4">
+          <h2 className="text-xl font-medium">Add Post</h2>
+          <Link
+            className="px-3 py-[6px] bg-purple-500 rounded-sm text-white hover:bg-purple-600"
+            to="/dashboard/posts"
+          >
+            Posts
+          </Link>
+        </div>
+
+        <div className="p-4">
+          <form onSubmit={addPost}>
+            {/* Title Input */}
+            <div className="flex flex-col gap-y-2 mb-6">
+              <label
+                className="text-md font-medium text-gray-600"
+                htmlFor="title"
+              >
+                Title
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Enter title"
+                required
+                className="px-3 py-2 rounded-md border border-gray-300 focus:border-green-500"
+              />
+            </div>
+
+            {/* Image Upload */}
+            <div className="mb-6">
+              <label
+                htmlFor="image"
+                className="w-full h-[240px] flex items-center justify-center border-2 border-dashed rounded cursor-pointer text-gray-600"
+              >
+                {imgPreview ? (
+                  <img
+                    src={imgPreview}
+                    alt="Preview"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="flex flex-col items-center">
+                    <MdCloudUpload className="text-2xl" />
+                    <p>Select Image</p>
+                  </div>
+                )}
+              </label>
+              <input
+                type="file"
+                id="image"
+                onChange={handleImageChange}
+                className="hidden"
+                required
+              />
+            </div>
+
+            {/* Description */}
+            <div className="flex flex-col gap-y-2 mb-6">
+              <label
+                className="text-md font-medium text-gray-600"
+                htmlFor="description"
+              >
+                Description
+              </label>
+              <JoditEditor
+                ref={editor}
+                value={description}
+                onBlur={(value) => setDescription(value)}
+                onChange={() => {}}
+              />
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className={`px-3 py-[6px] rounded-sm text-white ${
+                isLoading ? "bg-gray-500" : "bg-purple-500 hover:bg-purple-600"
+              }`}
+            >
+              {isLoading ? "Loading..." : "Add Post"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </MainLayout>
+  );
+};
+
+export default CreatePost;
diff --git a/admin-panel/src/pages/PostsPage.tsx b/admin-panel/src/pages/PostsPage.tsx
index ffde58c..430023d 100644
--- a/admin-panel/src/pages/PostsPage.tsx
+++ b/admin-panel/src/pages/PostsPage.tsx
@@ -7,127 +7,164 @@ import { useCategories } from "@/hooks/useCategories";
 import { useState } from "react";
 
 const PostsPage: React.FC = () => {
-    const { post } = useAuthStore(); // Access the token
-    const page = 1;
-    const limit = 10;
+  const { post } = useAuthStore(); // Access the token
+  const [page, setPage] = useState(1);
+  const limit = 10;
 
-    const { posts, error: postsError } = usePosts(page, limit);
-    const { categories, error: categoriesError, isLoading } = useCategories(); // Fetch categories from API
+  const { posts, totalPosts, error: postsError } = usePosts(page, limit);
+  const { categories, error: categoriesError, isLoading } = useCategories(); // Fetch categories from API
+  const totalPages = Math.ceil(totalPosts / limit);
 
-    // Search and Category Filter states
-    const [searchQuery, setSearchQuery] = useState("");
-    const [selectedCategory, setSelectedCategory] = useState("");
+  // Search and Category Filter states
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("");
+  const handleNextPage = () => {
+    if (page < totalPages) {
+      setPage(page + 1);
+    }
+  };
+  const handlePreviousPage = () => {
+    if (page > 1) {
+      setPage(page - 1);
+    }
+  };
 
-    // Filtered posts based on search query and selected category
-    const filteredPosts = posts.filter((post) => {
-        const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesCategory = selectedCategory === "" || post.category.name === selectedCategory;
-        return matchesSearch && matchesCategory;
-    });
+  // Filtered posts based on search query and selected category
+  const filteredPosts = posts.filter((post) => {
+    const matchesSearch = post.title
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesCategory =
+      selectedCategory === "" || post.category.name === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
 
-    return (
-        <MainLayout>
-            <div className="bg-white rounded-md">
-                <div className="flex justify-between p-4">
-                    <h2 className="text-xl font-medium">Posts</h2>
-                    <Link
-                        className="px-3 py-[6px] bg-purple-500 rounded-sm text-white hover:bg-purple-600"
-                        to="/posts/admin"
-                    >
-                        Create Post
-                    </Link>
-                </div>
+  return (
+    <MainLayout>
+      <div className="bg-white rounded-md">
+        <div className="flex justify-between p-4">
+          <h2 className="text-xl font-medium">Posts</h2>
+          <Link
+            className="px-3 py-[6px] bg-purple-500 rounded-sm text-white hover:bg-purple-600"
+            to="/create-post"
+          >
+            Create Post
+          </Link>
+        </div>
 
-                {/* Search and Category Filter */}
-                <div className="flex items-center gap-4 p-4">
-                    <input
-                        type="text"
-                        placeholder="Search posts..."
-                        className="w-1/2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                    <select
-                        className="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
-                        value={selectedCategory}
-                        onChange={(e) => setSelectedCategory(e.target.value)}
-                        disabled={isLoading || categoriesError} 
-                    >
-                        <option value="">All Categories</option>
-                        {categories &&
-                            categories.map((category) => (
-                                <option key={category.id} value={category.name}>
-                                    {category.name}
-                                </option>
-                            ))}
-                    </select>
-                </div>
+        {/* Search and Category Filter */}
+        <div className="flex items-center gap-4 p-4">
+          <input
+            type="text"
+            placeholder="Search posts..."
+            className="w-1/2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          <select
+            className="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+            disabled={isLoading || categoriesError}
+          >
+            <option value="">All Categories</option>
+            {categories &&
+              categories.map((category) => (
+                <option key={category.id} value={category.name}>
+                  {category.name}
+                </option>
+              ))}
+          </select>
+        </div>
 
-                {categoriesError && <div className="text-red-500 p-4">Failed to load categories.</div>}
+        {categoriesError && (
+          <div className="text-red-500 p-4">Failed to load categories.</div>
+        )}
 
-                <div className="relative overflow-x-auto p-4">
-                    {postsError && <div className="text-red-500">{postsError}</div>}
+        <div className="relative overflow-x-auto p-4">
+          {postsError && <div className="text-red-500">{postsError}</div>}
 
-                    <table className="w-full text-sm text-left text-slate-600">
-                        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
-                            <tr>
-                                <th className="px-7 py-3">No</th>
-                                <th className="px-7 py-3">Title</th>
-                                <th className="px-7 py-3">Status</th>
-                                <th className="px-7 py-3">Category</th>
-                                <th className="px-7 py-3">Nepali Name</th>
-                                <th className="px-7 py-3">Date</th>
-                                <th className="px-7 py-3">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {filteredPosts.map((post, index) => (
-                                <tr key={post.id} className="bg-white border-b">
-                                    <td className="px-6 py-4">{index + 1}</td>
-                                    <td className="px-6 py-4">{post.title}</td>
-                                    <td className="px-6 py-4">{post.status}</td>
-                                    <td className="px-6 py-4">{post.category.name}</td>
-                                    <td className="px-6 py-4">{post.category.nepaliName}</td>
-                                    <td className="px-6 py-4">
-                                        {new Date(post.createdAt).toLocaleString("en-US", {
-                                            year: "numeric",
-                                            month: "short",
-                                            day: "numeric",
-                                            hour: "numeric",
-                                            minute: "numeric",
-                                        })}
-                                    </td>
-                                    <td className="px-6 py-4">
-                                        <div className="flex justify-start items-center gap-x-4 text-white">
-                                            <Link
-                                                to={`/posts/admin/${post.id}`}
-                                                className="p-[6px] bg-green-500 rounded hover:shadow-lg hover:shadow-green-500/50"
-                                            >
-                                                <FaEye />
-                                            </Link>
-                                            <Link
-                                                to={`/posts/admin/${post.id}`}
-                                                className="p-[6px] bg-red-500 rounded hover:shadow-lg hover:shadow-red-500/50"
-                                            >
-                                                <FaTrash />
-                                            </Link>
-                                        </div>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+          <table className="w-full text-sm text-left text-slate-600">
+            <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+              <tr>
+                <th className="px-7 py-3">No</th>
+                <th className="px-7 py-3">Title</th>
+                <th className="px-7 py-3">Status</th>
+                <th className="px-7 py-3">Category</th>
+                <th className="px-7 py-3">Nepali Name</th>
+                <th className="px-7 py-3">Date</th>
+                <th className="px-7 py-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredPosts.map((post, index) => (
+                <tr key={post.id} className="bg-white border-b">
+                  <td className="px-6 py-4">{index + 1}</td>
+                  <td className="px-6 py-4">{post.title}</td>
+                  <td className="px-6 py-4">{post.status}</td>
+                  <td className="px-6 py-4">{post.category.name}</td>
+                  <td className="px-6 py-4">{post.category.nepaliName}</td>
+                  <td className="px-6 py-4">
+                    {new Date(post.createdAt).toLocaleString("en-US", {
+                      year: "numeric",
+                      month: "short",
+                      day: "numeric",
+                      hour: "numeric",
+                      minute: "numeric",
+                    })}
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex justify-start items-center gap-x-4 text-white">
+                      <Link
+                        to={`/posts/admin/${post.id}`}
+                        className="p-[6px] bg-green-500 rounded hover:shadow-lg hover:shadow-green-500/50"
+                      >
+                        <FaEye />
+                      </Link>
+                      <Link
+                        to={`/posts/admin/${post.id}`}
+                        className="p-[6px] bg-red-500 rounded hover:shadow-lg hover:shadow-red-500/50"
+                      >
+                        <FaTrash />
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
 
-                    {/* Empty state for no results */}
-                    {filteredPosts.length === 0 && (
-                        <div className="text-center text-gray-500 mt-4">
-                            No posts found for the given search or category.
-                        </div>
-                    )}
-                </div>
+          {/* Pagination Controls */}
+          <div className="flex justify-between p-4">
+            <button
+              className="px-3 py-2 bg-gray-300 rounded disabled:bg-gray-200"
+              onClick={handlePreviousPage}
+              disabled={page === 1}
+            >
+              Previous
+            </button>
+            <span>
+              Page {page} of {totalPages}
+            </span>
+            <button
+              className="px-3 py-2 bg-gray-300 rounded disabled:bg-gray-200"
+              onClick={handleNextPage}
+              disabled={page === totalPages}
+            >
+              Next
+            </button>
+          </div>
+
+          {/* Empty state for no results */}
+          {filteredPosts.length === 0 && (
+            <div className="text-center text-gray-500 mt-4">
+              No posts found for the given search or category.
             </div>
-        </MainLayout>
-    );
+          )}
+        </div>
+      </div>
+    </MainLayout>
+  );
 };
 
 export default PostsPage;
diff --git a/admin-panel/src/services/postsService.ts b/admin-panel/src/services/postsService.ts
index d66eab9..62cdfef 100644
--- a/admin-panel/src/services/postsService.ts
+++ b/admin-panel/src/services/postsService.ts
@@ -12,11 +12,19 @@ import { api } from "@/config/index";
             params: { page, limit }
         });
         console.log("Full response:", response.data.data);
-        return response.data.data; 
+        return {
+            posts: response.data.data.posts || [], // Array of posts
+            total: response.data.data.pagination?.total || 0, // Total number of posts
+        };
     } catch (error: any) {
         console.error("Error fetching posts:", error); // Log error details
         throw new Error("Failed to fetch posts: " + error.response?.data?.message || error.message);
     }
 };
 
+export const createPost = async (postData: any) => {
+    const response = await api.post("/posts/admin", postData);
+    return response.data.data;
+};
+
 export { fetchPosts };
\ No newline at end of file