diff --git a/src/common/table/components/input-text/input-text.component.tsx b/src/common/table/components/input-text/input-text.component.tsx
index a07c93e..0bb9ed1 100644
--- a/src/common/table/components/input-text/input-text.component.tsx
+++ b/src/common/table/components/input-text/input-text.component.tsx
@@ -22,6 +22,7 @@ export const CustomInputText: React.FC<PropsInput> = ({
     <div className={`table_x02_rootCustomInputText ${Styles}`}>
       <div className="table_x02_containerInput">
         <input
+          autoFocus
           type={type}
           id={name}
           className="table_x02_inputText"
diff --git a/src/common/table/table.component.tsx b/src/common/table/table.component.tsx
index 72b9074..cebddf8 100644
--- a/src/common/table/table.component.tsx
+++ b/src/common/table/table.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
@@ -16,7 +16,6 @@ interface TableProps {
   page?: number;
   pageSize?: number;
   setFlag?: React.Dispatch<React.SetStateAction<boolean>>;
-  flag?: boolean;
   setPage?: React.Dispatch<React.SetStateAction<number>>;
   setPageSize?: React.Dispatch<React.SetStateAction<number>>;
   rowPerPages?: number[];
@@ -29,7 +28,6 @@ export const TableComponet: React.FC<TableProps> = ({
   uniqueKey,
   page = 1,
   pageSize = 10,
-  flag = false,
   setFlag,
   setPage,
   setPageSize,
@@ -38,6 +36,8 @@ export const TableComponet: React.FC<TableProps> = ({
   // const keysToFilter = row.map((r, index) => r?.key || index);
   const keysToFilter = row.map((r) => r.key);
 
+  const popupRefs = useRef<any[]>([]);
+
   const [filtersTable, setFiltersTable] = useState<any>(
     row.map((r, index) => {
       return {
@@ -83,11 +83,11 @@ export const TableComponet: React.FC<TableProps> = ({
     console.log("here3", filtersTable);
     // Update the filters in the parent component
     filtersTable.forEach((filter: any) => {
-      if (filter.setFilter) {
-        filter.setFilter(filter.filter);
+      if (filter?.setFilter) {
+        filter?.setFilter(filter.filter);
       }
     });
-    setFlag && setFlag(!flag);
+    setFlag && setFlag((prev) => !prev);
   };
 
   const handleChange = (
@@ -103,9 +103,39 @@ export const TableComponet: React.FC<TableProps> = ({
     console.log("handleChange");
   };
 
+  const handleReset = (index: number) => {
+    setFiltersTable((prevFilters: any[]) =>
+      prevFilters.map((filter: any, i: number) =>
+        i === index ? { ...filter, filter: "" } : filter
+      )
+    );
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      popupRefs.current.forEach((ref, index) => {
+        if (ref && !ref.contains(event.target as Node)) {
+          setFiltersTable((prevFilters: any[]) => {
+            return prevFilters.map((filter: any, i: number) =>
+              i === index ? { ...filter, open: false } : filter
+            );
+          });
+        }
+      });
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="table_x02_rootTableComponet">
       <div className="table_x02_containerTable">
+        <span className="table_x02_totalResults">
+          Total results: {totalData || "No data"}
+        </span>
         <table className="table">
           <thead>
             <tr>
@@ -115,13 +145,16 @@ export const TableComponet: React.FC<TableProps> = ({
                   <th
                     key={uniqueKey && r[uniqueKey] ? r[uniqueKey] : index}
                     scope="col"
-                    className={`table_x02_${r?.title}_${
+                    className={`table_x02_thHeader  table_x02_${r?.title}_${
                       uniqueKey && r[uniqueKey] ? r[uniqueKey] : index
                     }`}
                   >
                     {/* start Filter Pop up */}
                     {r?.typeFilter && filtersTable[index]?.open && (
-                      <div className="table_x02_containerFormFilter">
+                      <div
+                        className="table_x02_containerFormFilter"
+                        ref={(el) => (popupRefs.current[index] = el)}
+                      >
                         <form onSubmit={handleSubmit} id="table_x02_formFilter">
                           <span onClick={() => toggleFilterOpen(index)}>
                             <CancelIcon
@@ -133,38 +166,47 @@ export const TableComponet: React.FC<TableProps> = ({
 
                           <CustomInputText
                             handleChange={(event) => handleChange(event, index)}
-                            // handleChange={(event) =>
-                            //   setFiltersTable({
-                            //     ...filtersTable,
-                            //     [event?.target?.name]:
-                            //       filtersTable[index]?.filter,
-                            //   })
-                            // }
                             lbl={r?.typeFilter == "date" ? null : r?.title}
                             Styles="table_x02_inputFilter"
                             type={r?.typeFilter || "text"}
                             inputValue={filtersTable[index]?.filter}
                             name={r?.title}
                           />
-                          <button
-                            type="submit"
-                            className="btn btn-primary table_x02_btnFilter"
-                          >
-                            Confirm
-                          </button>
+                          <div className="table_x02_btnsContainer">
+                            <button
+                              type="submit"
+                              className="btn btn-primary table_x02_btnFilter"
+                            >
+                              Confirm
+                            </button>
+                            <button
+                              type="reset"
+                              onClick={() => handleReset(index)}
+                              className="btn btn-secondary table_x02_btnFilter"
+                            >
+                              Cancel
+                            </button>
+                          </div>
                         </form>
                       </div>
                     )}
                     {/* end Filter Pop up */}
-                    {r?.title}
+                    <span className="table_x02_spanTitleIcon">
+                      {r?.title}
 
-                    {r?.typeFilter && (
-                      <SearchIcon
-                        className="table_x02_iconSearchIcon"
-                        onClick={() => toggleFilterOpen(index)}
-                        style={{ cursor: "pointer" }}
-                      />
-                    )}
+                      {r?.typeFilter && (
+                        <SearchIcon
+                          className="table_x02_iconSearchIcon"
+                          onClick={() => toggleFilterOpen(index)}
+                          style={{
+                            cursor: "pointer",
+                            color: filtersTable[index]?.filter
+                              ? "var(--color-one)"
+                              : "",
+                          }}
+                        />
+                      )}
+                    </span>
                   </th>
                 ))}
             </tr>
@@ -270,7 +312,7 @@ export const TableComponet: React.FC<TableProps> = ({
                 className="table_x02_iconPagination"
               />
               <div className="table_x02_infoPagination">
-                {startRow} - {endRow} of {totalData || "No data"}
+                {startRow} - {endRow}
               </div>
               <KeyboardArrowRightIcon
                 style={{
diff --git a/src/common/table/table.styles.scss b/src/common/table/table.styles.scss
index 01e04aa..da50141 100644
--- a/src/common/table/table.styles.scss
+++ b/src/common/table/table.styles.scss
@@ -11,6 +11,15 @@
     justify-content: center;
     align-items: stretch;
 
+    .table_x02_totalResults {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      font-weight: bold;
+      font-size: 20px;
+      min-width: max-content;
+    }
+
     .table {
       thead th:first-child {
         border-radius: 12px 0 0 0 !important;
@@ -41,45 +50,61 @@
       thead th {
         position: relative;
       }
-      .table_x02_iconSearchIcon {
-        position: absolute;
-        left: 50px;
-      }
-      thead {
-        position: relative;
-        //* Form
-        .table_x02_containerFormFilter {
-          z-index: 999999;
-          min-height: 110px;
-          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
-            rgba(0, 0, 0, 0.22) 0px 15px 12px;
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          background-color: var(--color-three);
-          padding: 0 0.25rem 0.5rem;
-          border-radius: 1rem;
 
-          #table_x02_formFilter {
+      thead {
+        .table_x02_thHeader {
+          //* Form
+          .table_x02_containerFormFilter {
+            z-index: 999999;
+            min-height: 110px;
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
+              rgba(0, 0, 0, 0.22) 0px 15px 12px;
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
-            justify-content: center;
-            align-items: stretch;
-            span {
-              align-self: end;
-              cursor: pointer;
-            }
-            .table_x02_inputFilter {
-            }
-            .table_x02_btnFilter {
+            position: absolute;
+            background-color: var(--color-three);
+            padding: 0 0.25rem 0.5rem;
+            border-radius: 1rem;
+
+            #table_x02_formFilter {
               display: flex;
               flex-direction: column;
+              gap: 0.5rem;
               justify-content: center;
-              align-items: center;
-              height: 2.2rem;
-              font-size: 1.2rem;
-              letter-spacing: 2px;
+              align-items: stretch;
+              span {
+                align-self: end;
+                cursor: pointer;
+              }
+              .table_x02_inputFilter {
+              }
+              .table_x02_btnsContainer {
+                display: flex;
+                flex-direction: row;
+                gap: 1rem;
+                justify-content: space-between;
+                align-items: center;
+
+                .table_x02_btnFilter {
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  height: 2.2rem;
+                  font-size: 1.2rem;
+                  letter-spacing: 1px;
+                  width: 5.5rem;
+                }
+              }
+            }
+          }
+
+          .table_x02_spanTitleIcon {
+            display: flex;
+            flex-direction: row;
+            gap: 0.5rem;
+            width: fit-content;
+            .table_x02_iconSearchIcon {
             }
           }
         }
@@ -125,7 +150,6 @@
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
-        border: solid 1px;
         border-radius: 1rem;
         padding: 0.1rem 0.5rem;
         width: fit-content;
diff --git a/src/core/mock-data.tsx b/src/core/mock-data.tsx
index 37d748a..0bc3e48 100644
--- a/src/core/mock-data.tsx
+++ b/src/core/mock-data.tsx
@@ -47,7 +47,7 @@ export const mockPaginationData: Pagination = {
       id: 1,
       name: "Arianna",
       city: "Berlin",
-      email: "arianna@gmail.com",
+      email: "arianna@gmail.es",
       age: 32,
       gender: Gender.Female,
       employee: true,
diff --git a/src/hooks/use-app-functions.tsx b/src/hooks/use-app-functions.tsx
index 1bc1104..49ea436 100644
--- a/src/hooks/use-app-functions.tsx
+++ b/src/hooks/use-app-functions.tsx
@@ -11,6 +11,42 @@ export const useAppFunctions = () => {
     }
   };
 
+  // const fetchPaginatedData = (
+  //   page: number,
+  //   pageSize: number,
+  //   body: any
+  // ): Promise<Pagination> => {
+  //   return new Promise((resolve) => {
+  //     setTimeout(() => {
+  //       const filters = Object.keys(body).reduce((acc, key) => {
+  //         acc[key] = body[key]?.toLowerCase();
+  //         return acc;
+  //       }, {} as Record<string, any | undefined>);
+  //       console.log("body1", body);
+  //       let filteredData = mockPaginationData?.products?.filter((item: any) => {
+  //         return Object.keys(filters).every((key) => {
+  //           const filterValue = filters[key];
+  //           return (
+  //             !filterValue || item[key]?.toLowerCase().includes(filterValue)
+  //           );
+  //         });
+  //       });
+  //       if (!filteredData || !filteredData.length) {
+  //         filteredData = mockPaginationData?.products;
+  //       }
+
+  //       const start = (page - 1) * pageSize;
+  //       const end = start + pageSize;
+  //       const paginatedData = filteredData && filteredData.slice(start, end);
+
+  //       resolve({
+  //         products: paginatedData || [],
+  //         totalProducts: (filteredData && filteredData?.length) || 0,
+  //       });
+  //     }, 100);
+  //   });
+  // };
+
   const fetchPaginatedData = (
     page: number,
     pageSize: number,
@@ -19,25 +55,34 @@ export const useAppFunctions = () => {
     return new Promise((resolve) => {
       setTimeout(() => {
         const filters = Object.keys(body).reduce((acc, key) => {
-          acc[key] = body[key]?.toLowerCase();
+          acc[key] =
+            typeof body[key] === "number"
+              ? body[key]
+              : body[key]?.toLowerCase();
           return acc;
-        }, {} as Record<string, any | undefined>);
-        console.log("body1", body);
+        }, {} as Record<string, string | number | undefined>);
+
+        console.log("Filters:", filters);
+
         let filteredData = mockPaginationData?.products?.filter((item: any) => {
           return Object.keys(filters).every((key) => {
             const filterValue = filters[key];
-            return (
-              !filterValue || item[key]?.toLowerCase().includes(filterValue)
-            );
+            const itemValue = item[key]?.toString().toLowerCase();
+            if (typeof filterValue === "number") {
+              return itemValue.includes(filterValue.toString());
+            } else {
+              return !filterValue || itemValue.includes(filterValue);
+            }
           });
         });
+
         if (!filteredData || !filteredData.length) {
-          filteredData = mockPaginationData?.products;
+          filteredData = [];
         }
 
         const start = (page - 1) * pageSize;
         const end = start + pageSize;
-        const paginatedData = filteredData && filteredData.slice(start, end);
+        const paginatedData = filteredData.slice(start, end);
 
         resolve({
           products: paginatedData || [],
diff --git a/src/pods/second-page/components/workers-table/workers-table.component.tsx b/src/pods/second-page/components/workers-table/workers-table.component.tsx
index c6d6f5f..e3b4374 100644
--- a/src/pods/second-page/components/workers-table/workers-table.component.tsx
+++ b/src/pods/second-page/components/workers-table/workers-table.component.tsx
@@ -17,7 +17,7 @@ interface Row {
 export const WorkersTable: React.FC = () => {
   const { getEmailPrefix, fetchPaginatedData } = useAppFunctions();
   const [tableData, setTableData] = useState<Pagination | undefined>();
-  // const [filterId, setFilterId] = useState<number | null>(null);
+  const [filterId, setFilterId] = useState<number | null>(null);
   const [filterName, setFilterName] = useState<string>("");
   const [filterCity, setFilterCity] = useState<string>("");
   const [filterEmail, setFilterEmail] = useState<string>("");
@@ -29,6 +29,9 @@ export const WorkersTable: React.FC = () => {
     {
       key: "id",
       title: "Id",
+      typeFilter: "number",
+      setFilter: setFilterId,
+      filter: filterId,
     },
     {
       key: "name",
@@ -87,7 +90,7 @@ export const WorkersTable: React.FC = () => {
 
   useEffect(() => {
     const body = {
-      // id: filterId,
+      id: filterId,
       name: filterName,
       city: filterCity,
       email: filterEmail,
@@ -116,7 +119,6 @@ export const WorkersTable: React.FC = () => {
           page={page}
           pageSize={pageSize}
           setFlag={setFlag}
-          flag={flag}
           rowPerPages={[5, 10, 25]}
           totalData={tableData?.totalProducts || 0}
           columns={tableData?.products || []}