diff --git a/src/components/dashboard/shard/Error.jsx b/src/components/dashboard/shard/Error.jsx
new file mode 100644
index 0000000..df94d50
--- /dev/null
+++ b/src/components/dashboard/shard/Error.jsx
@@ -0,0 +1,11 @@
+const Error = ({ errorMessage }) => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        {errorMessage}
+      </td>
+    </tr>
+  );
+};
+
+export default Error;
diff --git a/src/components/dashboard/shard/LoadingWhile.jsx b/src/components/dashboard/shard/LoadingWhile.jsx
new file mode 100644
index 0000000..f72cc3f
--- /dev/null
+++ b/src/components/dashboard/shard/LoadingWhile.jsx
@@ -0,0 +1,12 @@
+import LoadingSpinner from "../../userProfile/shard/LoadingSpinner";
+const LoadingWhile = () => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        <LoadingSpinner />
+      </td>
+    </tr>
+  );
+};
+
+export default LoadingWhile;
diff --git a/src/components/dashboard/shard/NotFoundData.jsx b/src/components/dashboard/shard/NotFoundData.jsx
new file mode 100644
index 0000000..338d39d
--- /dev/null
+++ b/src/components/dashboard/shard/NotFoundData.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const NotFoundData = ({message}) => {
+  return (
+    <tr>
+      <td colSpan="10" className="text-center p-5 text-3xl">
+        {message}
+      </td>
+    </tr>
+  );
+};
+
+export default NotFoundData;
diff --git a/src/components/index.js b/src/components/index.js
index 2116a2e..21e4e06 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -91,6 +91,9 @@ export { default as StatsContainer } from "./dashboard/StatsContainer";
 
 export { default as NavigationLink } from "./dashboard/shard/NavigationLink";
 export { default as NavBarLink } from "./dashboard/shard/NavBarLink";
+export { default as LoadingWhile } from "./dashboard/shard/LoadingWhile";
+export { default as Error } from "./dashboard/shard/Error";
+export { default as NotFoundData } from "./dashboard/shard/NotFoundData";
 
 //Payment
 export { default as OrderDetails } from "./payment/OrderDetails";
diff --git a/src/hooks/usePostData.js b/src/hooks/usePostData.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx
index 60d6508..34922e1 100644
--- a/src/pages/dashboard/Dashboard.jsx
+++ b/src/pages/dashboard/Dashboard.jsx
@@ -3,98 +3,85 @@ import { useState, useEffect } from "react";
 import { customFetch } from "../../utils/customFetch";
 import { PageIntro, StatsBox, StatsContainer } from "../../components";
 import SyncLoader from "react-spinners/SyncLoader";
+import { LoadingSpinner } from "../../components";
+
+import useFetchData from "../../hooks/useFetchData";
 function Dashboard() {
   const { token } = useSelector((state) => state.userReducers);
-  const [siteStates, setSiteStates] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
 
-        const res = await customFetch.get("/admin/siteStatics", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
+  const { data, loading, error, fetchData } = useFetchData(
+    "admin/siteStatics",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
 
-        setSiteStates(res.data.data);
-        setLoading(false);
-      } catch (error) {
-        setLoading(false);
-        setError(error);
-      }
-    };
+      requestedData: "statics",
+    }
+  );
 
+  useEffect(() => {
     fetchData();
   }, [token]);
+  console.log(data);
   return (
     <>
       <div className="p-5">
         <PageIntro pageName="Stats" />
 
-        {loading && (
-          <div className="flex justify-center content-center">
-            <SyncLoader color="#36d7b7" />
-          </div>
-        )}
+        {loading && !error && <LoadingSpinner />}
 
         {!loading && error && <p>Error: {error.message}</p>}
 
-        {siteStates && !loading && (
+        {data && !loading && (
           <StatsContainer>
-            <StatsBox
-              statsText="Total Users"
-              statsValue={siteStates && siteStates.users}
-            />
+            <StatsBox statsText="Total Users" statsValue={data && data.users} />
             <StatsBox
               statsText="Total Instructors"
-              statsValue={siteStates && siteStates.instructors}
+              statsValue={data && data.instructors}
             />
             <StatsBox
               statsText="Total Enrollments"
-              statsValue={siteStates && siteStates.enrollments}
+              statsValue={data && data.enrollments}
             />
             <StatsBox
               statsText="Total Courses"
-              statsValue={siteStates && siteStates.courses}
+              statsValue={data && data.courses}
             />
             <StatsBox
               statsText="Free Courses"
-              statsValue={siteStates && siteStates.freeCourses}
+              statsValue={data && data.freeCourses}
             />
             <StatsBox
               statsText="Paid Courses"
-              statsValue={siteStates && siteStates.paidCourses}
+              statsValue={data && data.paidCourses}
             />
             <StatsBox
               statsText="Admins accounts"
-              statsValue={siteStates && siteStates.admins}
+              statsValue={data && data.admins}
             />
             <StatsBox
               statsText="Students Accounts"
-              statsValue={siteStates && siteStates.students}
+              statsValue={data && data.students}
             />
             <StatsBox
               statsText="Verified Accounts"
-              statsValue={siteStates && siteStates.verifiedAccounts}
+              statsValue={data && data.verifiedAccounts}
             />
 
             <StatsBox
               statsText="Un Verified Accounts"
-              statsValue={siteStates && siteStates.unverifiedAccounts}
+              statsValue={data && data.unverifiedAccounts}
             />
 
             <StatsBox
               statsText="Active Accounts"
-              statsValue={siteStates && siteStates.activeAccounts}
+              statsValue={data && data.activeAccounts}
             />
 
             <StatsBox
               statsText="Un Active Accounts"
-              statsValue={siteStates && siteStates.inactiveAccounts}
+              statsValue={data && data.inactiveAccounts}
             />
 
             <StatsBox statsText="Total Categories" statsValue={5} />
diff --git a/src/pages/dashboard/FreeCourses.jsx b/src/pages/dashboard/FreeCourses.jsx
index 8f69f6f..d93ad07 100644
--- a/src/pages/dashboard/FreeCourses.jsx
+++ b/src/pages/dashboard/FreeCourses.jsx
@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { customFetch } from "../../utils/customFetch";
 
 import {
   PageIntro,
@@ -8,59 +7,34 @@ import {
   CourseElement,
   CoursesHeader,
   Pagination,
+  LoadingWhile,
+  Error,
+  NotFoundData,
 } from "../../components";
+import useFetchData from "../../hooks/useFetchData";
 
 function FreeCourses() {
   const { token } = useSelector((state) => state.userReducers);
-  const [courses, setCourses] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const [isMorePages, setIsMorePages] = useState(false);
-  const [itemsPerPage, setItemsPerPage] = useState(15);
+  const [itemsPerPage, setItemsPerPage] = useState(6);
   const [currentPage, setCurrentPage] = useState(1);
-
+  const [isChanged, setIsChanged] = useState(false);
+  const { data, loading, error, isMorePages, fetchData } = useFetchData(
+    "/admin/freeCourses",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        page: currentPage,
+        limit: itemsPerPage,
+        sort: "-createdAt",
+      },
+      requestedData: "courses",
+    }
+  );
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await customFetch.get("/admin/freeCourses", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          params: {
-            page: currentPage,
-            limit: itemsPerPage,
-          },
-        });
-
-        if (res.data.data.courses) {
-          setCourses(res.data.data.courses);
-          setIsMorePages(res.data.data.courses.length === itemsPerPage);
-        } else {
-          setCourses([]);
-          setIsMorePages(false);
-        }
-
-        setLoading(false);
-      } catch (error) {
-        console.log(error);
-        setLoading(false);
-      }
-    };
-
     fetchData();
-  }, [token, currentPage, itemsPerPage]);
-
-  const prevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  };
-
-  const nextPage = () => {
-    if (isMorePages) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
+  }, [token, currentPage, itemsPerPage, isChanged]);
 
   return (
     <div className="p-5">
@@ -70,37 +44,30 @@ function FreeCourses() {
       {/* table manage table courses table  */}
       <PageContainer tableHeader={"Free Courses"}>
         <CoursesHeader />
-        {loading && (
-          <tr>
-            <td colSpan="10" className="text-center p-5 text-3xl">
-              Loading........
-            </td>
-          </tr>
-        )}
+        {loading && <LoadingWhile />}
+
         {!loading &&
-          courses.length > 0 &&
-          courses.map((course, index) => (
+          data.length > 0 &&
+          data.map((course, index) => (
             <CourseElement
               key={course._id}
               course={course}
               index={index + 1 + (currentPage - 1) * itemsPerPage}
               token={token}
+              setIsChanged={setIsChanged}
             />
           ))}
-        {!loading && courses.length === 0 && (
-          <tr>
-            <td colSpan="10" className="text-center p-5 text-3xl">
-              No Courses Found
-            </td>
-          </tr>
+        {!loading && data.length === 0 && (
+          <NotFoundData message={"No Courses Found "} />
         )}
+        {error && !loading && <Error errorMessage={error} />}
       </PageContainer>
 
       <Pagination
         currentPage={currentPage}
         isMorePages={isMorePages}
-        onPrevPage={prevPage}
-        onNextPage={nextPage}
+        onPrevPage={() => setCurrentPage((prev) => prev - 1)}
+        onNextPage={() => setCurrentPage((prev) => prev + 1)}
       />
     </div>
   );
diff --git a/src/pages/dashboard/PaiedCourses.jsx b/src/pages/dashboard/PaiedCourses.jsx
index a3c8b36..2fab3f3 100644
--- a/src/pages/dashboard/PaiedCourses.jsx
+++ b/src/pages/dashboard/PaiedCourses.jsx
@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { customFetch } from "../../utils/customFetch";
 
 import {
   PageIntro,
@@ -8,55 +7,35 @@ import {
   CourseElement,
   CoursesHeader,
   Pagination,
+  LoadingWhile,
+  Error,
+  NotFoundData,
 } from "../../components";
+import useFetchData from "../../hooks/useFetchData";
 
 function PaiedCourses() {
   const { token } = useSelector((state) => state.userReducers);
-  const [courses, setCourses] = useState(null);
-  const [isChanged, setIsChanged] = useState(false);
-
-  const [isMorePages, setIsMorePages] = useState(false);
-  const [itemsPerPage, setItemsPerPage] = useState(15);
+  const [itemsPerPage, setItemsPerPage] = useState(6);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isChanged, setIsChanged] = useState(false);
 
+  const { data, loading, error, isMorePages, fetchData } = useFetchData(
+    "/admin/paidCourses",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        page: currentPage,
+        limit: itemsPerPage,
+        sort: "-createdAt",
+      },
+      requestedData: "courses",
+    }
+  );
   useEffect(() => {
-    const fetchData = async () => {
-      setIsChanged(false);
-      try {
-        const response = await customFetch.get("/admin/paidCourses", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          params: {
-            page: currentPage,
-            limit: itemsPerPage,
-          },
-        });
-
-        if (response.data.data.courses) {
-          setCourses(response.data.data.courses);
-          setIsMorePages(true);
-        }
-        if (response.data.data.courses.length === 0) setIsMorePages(false);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-
     fetchData();
-  }, [token, isChanged, currentPage, itemsPerPage]);
-
-  const prevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  };
-
-  const nextPage = () => {
-    if (currentPage) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  };
+  }, [token, currentPage, itemsPerPage, isChanged]);
 
   return (
     <div className="p-5">
@@ -64,8 +43,8 @@ function PaiedCourses() {
       {/* table manage table courses table  */}
       <PageContainer tableHeader={"Paid Courses"}>
         <CoursesHeader />
-        {courses &&
-          courses.map((course, index) => (
+        {data &&
+          data.map((course, index) => (
             <CourseElement
               key={course._id}
               course={course}
@@ -74,21 +53,20 @@ function PaiedCourses() {
               setIsChanged={setIsChanged}
             />
           ))}
-        {/* handel no courses case */}
-        {courses && courses.length === 0 && (
-          <tr>
-            <td colSpan="10" className="text-center p-5 text-3xl">
-              No Courses Found
-            </td>
-          </tr>
+        {loading && <LoadingWhile />}
+
+        {!loading && data.length === 0 && (
+          <NotFoundData message={"No Courses Found "} />
         )}
+
+        {error && !loading && <Error errorMessage={error} />}
       </PageContainer>
-      {courses && (
+      {data && (
         <Pagination
           currentPage={currentPage}
           isMorePages={isMorePages}
-          onPrevPage={prevPage}
-          onNextPage={nextPage}
+          onPrevPage={() => setCurrentPage((prev) => prev - 1)}
+          onNextPage={() => setCurrentPage((prev) => prev + 1)}
         />
       )}
     </div>
diff --git a/src/pages/userProfile/Wishlist.jsx b/src/pages/userProfile/Wishlist.jsx
index 54d1258..2c1f39a 100644
--- a/src/pages/userProfile/Wishlist.jsx
+++ b/src/pages/userProfile/Wishlist.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { customFetch } from "../../utils/customFetch";
-import { Link } from "react-router-dom";
+
 import {
   Pagination,
   WishlistCard,
@@ -10,58 +9,38 @@ import {
   LoadingSpinner,
   ProfilePageContainer,
 } from "../../components";
-
+import useFetchData from "../../hooks/useFetchData";
 const Wishlist = () => {
-  const [wishlistItems, setWishlistItems] = useState([]);
-  const [isChanged, setIsChanged] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
   const { token } = useSelector((state) => state.userReducers);
-
-  const [isMorePages, setIsMorePages] = useState(false);
-  const [itemsPerPage, setItemsPerPage] = useState(3);
+  const [itemsPerPage, setItemsPerPage] = useState(6);
   const [currentPage, setCurrentPage] = useState(1);
+  const [isChanged, setIsChanged] = useState(false);
 
+  const { data, loading, error, isMorePages, fetchData } = useFetchData(
+    "wishlist",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        page: currentPage,
+        limit: itemsPerPage,
+        sort: "-createdAt",
+      },
+      requestedData: "wishlistItems",
+    }
+  );
   useEffect(() => {
     setIsChanged(false);
-    const fetchWishlistItems = async () => {
-      try {
-        setLoading(true);
-        const response = await customFetch.get("wishlist", {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          params: {
-            page: currentPage,
-            limit: itemsPerPage,
-            sort: "-createdAt",
-          },
-        });
-        if (response.data.data.wishlistItems) {
-          setWishlistItems(response.data.data.wishlistItems);
-          setIsMorePages(
-            response.data.data.wishlistItems.length === itemsPerPage
-          );
-        } else {
-          setWishlistItems([]);
-          setIsMorePages(false);
-          setLoading(false);
-        }
-      } catch (error) {
-        setLoading(false);
-        setError(error.response.data.message);
-      }
-    };
-    fetchWishlistItems();
-    setLoading(false);
+    fetchData();
   }, [token, itemsPerPage, currentPage, isChanged]);
   return (
     <>
       <ProfilePageContainer>
-        {wishlistItems.length > 0 && (
+        {data.length > 0 && !loading && (
           <div className="grid w-full sm:grid-cols-3  sm:gap-4 md:grid-cols-3  ">
-            {wishlistItems &&
-              wishlistItems.map((item) => (
+            {data &&
+              data.map((item) => (
                 <WishlistCard
                   wishlistItem={item}
                   key={item._id}
@@ -70,7 +49,7 @@ const Wishlist = () => {
               ))}
           </div>
         )}
-        {wishlistItems.length === 0 && (
+        {data.length === 0 && !loading && (
           <EmptyItems
             headerText={"No items added yet"}
             linkText={"Start Navigate to Courses"}
@@ -78,13 +57,9 @@ const Wishlist = () => {
           />
         )}
 
-        {loading && (
-          <div className="w-full flex justify-center items-center">
-            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
-          </div>
-        )}
+        {loading && <LoadingSpinner />}
 
-        {error && <ErrorMessage errorMessage={error} />}
+        {error && !loading && <ErrorMessage errorMessage={error} />}
       </ProfilePageContainer>
       <div className="flex items-center justify-center w-full">
         <div className="flex justify-end w-[50%]">