diff --git a/src/components/tableWrapper/TableWrapper.jsx b/src/components/tableWrapper/TableWrapper.jsx
index d666394..95d3ded 100644
--- a/src/components/tableWrapper/TableWrapper.jsx
+++ b/src/components/tableWrapper/TableWrapper.jsx
@@ -53,7 +53,7 @@ export default function TableWrapper({
   },[itemsPerPage])
 
   return (
-    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+    <div className="relative w-full">
       {data.length > 0 && filterItem && (
         <div className="mb-10 flex justify-end items-center gap-2">
           {filterItem.map((item, index) => (
@@ -83,7 +83,7 @@ export default function TableWrapper({
         
         {/* PAGINATION BUTTON */}
         {newData.length > 0 &&
-          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+          <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
             <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
               {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
             </div>
@@ -118,7 +118,7 @@ export default function TableWrapper({
 
 const TableIsLoading = () => {
   return (
-    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+    <div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
       <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
     </div>
   )
diff --git a/src/components/tableWrapper/_TableWrapper.jsx b/src/components/tableWrapper/_TableWrapper.jsx
new file mode 100644
index 0000000..d666394
--- /dev/null
+++ b/src/components/tableWrapper/_TableWrapper.jsx
@@ -0,0 +1,125 @@
+import { ReactNode, useEffect, useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TableWrapper({
+  data = [],
+  itemsPerPage = 5,
+  filterItem,
+  children,
+}) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    if (currentPage != 0) {
+      setCurrentPage((prev) => prev - numberOfSelection);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < data.length) {
+      setCurrentPage((prev) => prev + numberOfSelection);
+    }
+  };
+
+  const handleSearch = ({ target: { value } }, name) => {
+    setSearchTerm(value);
+    let newFilteredData = data.filter((item) =>
+      item[name].toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredData(newFilteredData);
+    setCurrentPage(0);
+  };
+
+  useEffect(() => {
+    setIsLoading(true)
+    setTimeout(()=>{
+      setNewData(
+        filteredData?.slice(currentPage, numberOfSelection + currentPage)
+      );
+      setIsLoading(false)
+    },1000)
+  }, [currentPage, filteredData]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data: newData })}
+        </div>
+        
+        {/* PAGINATION BUTTON */}
+        {newData.length > 0 &&
+          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
+            </div>
+            {(newData.length >= itemsPerPage) &&
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+            }
+          </div>
+        }
+      </div>
+      
+    {isLoading && <TableIsLoading />}
+    </div>
+  );
+}
+
+const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index f5530f3..94bb17d 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -2,6 +2,8 @@ import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
 import CustomCounter from '../components/CustomCounter'
 import Icons from '../components/Icons'
+import TableWrapper from '../components/tableWrapper/TableWrapper'
+import Avatar from '../assets/user_avatar.jpg'
 
 export default function HomePage() {
   return (
@@ -69,14 +71,77 @@ export default function HomePage() {
           </div> */}
         </div>
         <div className='w-full'>
-          <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>
-            <div className='flex justify-between items-center'>
-              <div className='flex flex-col gap-1'>
+          <div className='flex flex-col gap-8 w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>
+            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-1 order-2 xs:order-1'>
                 <p className='font-bold text-base'>Members Statistics</p>
                 <p className='text-12'>Over 500 members</p>
               </div>
-              <button className='font-bold text-primary text-12 px-4 py-2 bg-sky-100 rounded-md'>+ New Member</button>
+              <div className='order-1 xs:order-2 text-left xs:text-right'>
+                <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
+              </div>
             </div>
+
+            <TableWrapper data={[1,2,3,4,5,6,7]} itemsPerPage={15}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm">
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Authors
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Company
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Progress
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                              {data.map(item => (
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-2 py-2">
+                                      <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                        <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">John Dummy</div>
+                                            <div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
+                                        </div>  
+                                      </div>
+                                    </td>
+                                    <td className="px-2 ">
+                                        Dummy text
+                                    </td>
+                                    <td className="px-2 ">
+                                        <div className="flex items-center">
+                                        Dummy
+                                        </div>
+                                    </td>
+                                    <td className="px-2 text-right">
+                                      <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='edit' />
+                                        </div>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='eye' />
+                                        </div>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='trash' />
+                                        </div>
+                                      </div>
+                                    </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+                </TableWrapper>
           </div>
         </div>
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index df5167a..2051793 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,8 @@ module.exports = {
         }
       },
       screens: {
+        xxs: '300px',
+        xs: '400px',
         large: '1535px',
         max_width: '1700px'
       },