diff --git a/src/app/page.js b/src/app/page.js
index 2534242..af32e3b 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,8 +1,13 @@
 import DataTableTest from "@/components/DataTableTest";
+import FilterColumn from "@/components/FilterColumn";
 
 function page() {
     return (
-        <DataTableTest/>
+        <>
+            <FilterColumn />
+            <DataTableTest/>
+        </>
+
     );
 }
 
diff --git a/src/components/FilterColumn.jsx b/src/components/FilterColumn.jsx
new file mode 100644
index 0000000..08ab968
--- /dev/null
+++ b/src/components/FilterColumn.jsx
@@ -0,0 +1,123 @@
+"use client"
+import {
+    Button,
+    Dialog, DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControl
+} from '@mui/material';
+import {useFormik} from 'formik';
+import TextFieldWithFnBox from "@/components/TextFieldWithFnBox";
+import {useEffect, useState} from "react";
+
+function FilterColumn({ onSubmit , column  }) {
+    const [selectedFilters, setSelectedFilters] = useState([]);
+
+    useEffect(() => {
+        const initialFilters = column
+            .filter(col => col.ColumnFiterStatus)
+            .map(col => ({ id: col.field, fn: col.filterFn }));
+        setSelectedFilters(initialFilters);
+    }, [column]);
+
+    const handleSelectFilter = (fieldName, filterFn) => {
+        const updatedFilters = [...selectedFilters];
+        const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName);
+        if (filterIndex !== -1) {
+            updatedFilters[filterIndex].fn = filterFn;
+        } else {
+            updatedFilters.push({ id: fieldName, fn: filterFn });
+        }
+        setSelectedFilters(updatedFilters);
+    };
+
+    const formik = useFormik({
+        initialValues: column.reduce((acc, column) => {
+            if (column.ColumnFiterStatus) {
+                acc[column.field] = '';
+            }
+            return acc;
+        }, {}),
+        onSubmit: (values) => {
+            // const selectedFilters = [
+            //     { "id": "name", "value": values.name1, "fn": values.cityFn, "datatype": values.nameDatatype },
+            //     { "id": "navgan_id", "value": values.name2, "fn": values.nameFn, "datatype": values.nameDatatype }
+            // ];
+
+            const user_id = 456;
+            const page_name = 'loan';
+            const table_name = "amir_table";
+
+            let prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+
+            const existingFilters = prevLocalStorage[user_id]?.[page_name]?.[table_name]?.filters || [];
+
+            const updatedFilters = selectedFilters.reduce((acc, filter) => {
+                const currentValue = values[filter.id];
+                const prevValue = formik.initialValues[filter.id];
+                console.log(acc, filter)
+                // Check if the current value is empty and the previous value was not empty
+                if ((currentValue === '' || currentValue === undefined || currentValue === null) && prevValue !== '' && prevValue !== undefined && prevValue !== null) {
+                    // Remove filter data from localStorage
+                    const filterIndex = existingFilters.findIndex(f => f.id === filter.id);
+                    console.log({filterIndex})
+                    if (filterIndex !== -1) {
+                        existingFilters.splice(filterIndex, 1);
+                    }
+                } else {
+                    acc.push({
+                        ...filter,
+                        value: currentValue,
+                        datatype: column.find(col => col.field === filter.id).datatype
+                    });
+                }
+
+                return acc;
+            }, []);
+
+
+            updatedFilters.forEach(newFilter => {
+                const existingFilterIndex = existingFilters.findIndex(filter => filter.id === newFilter.id);
+                existingFilterIndex !== -1 ? existingFilters[existingFilterIndex] = newFilter : existingFilters.push(newFilter);
+            });
+
+            prevLocalStorage[user_id] = prevLocalStorage[user_id] || {};
+            prevLocalStorage[user_id][page_name] = prevLocalStorage[user_id][page_name] || {};
+            prevLocalStorage[user_id][page_name][table_name] = { hides: {}, filters: existingFilters };
+
+            localStorage.setItem('_setting-app', JSON.stringify(prevLocalStorage));
+
+            onSubmit(updatedFilters);
+        }
+    });
+
+
+    return (
+        <Dialog open={true}>
+            <DialogTitle>Select Filters</DialogTitle>
+            <DialogContent>
+                <FormControl fullWidth>
+                    {column.map((column, index) => (
+                        column.ColumnFiterStatus &&
+                        <TextFieldWithFnBox
+                            key={index}
+                            formik={formik}
+                            fieldName={column.field}
+                            label={column.label}
+                            defaultFilter={column.defaultFilter}
+                            columnFilterModeOptions={column.columnFilterModeOptions}
+                            onSelectFilter={(filterFn) => handleSelectFilter(column.field, filterFn)}
+                        />
+                    ))}
+                </FormControl>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={formik.handleSubmit}>Submit</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default FilterColumn;
+
+