diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx
index 3b451ad..ab12820 100644
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -84,11 +84,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
     };
 
     return (
-        <Drawer
-            open={drawerState}
-            onClose={() => setDrawerState(false)}
-            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
-        >
+        <>
             <FilterHeader setDrawerState={setDrawerState} />
             {Object.keys(filterData).length > 0 && (
                 <ScrollBox>
@@ -144,7 +140,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
                     </form>
                 </ScrollBox>
             )}
-        </Drawer>
+        </>
     );
 }
 
diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx
index 32a09a8..b922bc4 100644
--- a/src/core/components/DataTable/filter/index.jsx
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -2,6 +2,7 @@
 import { useState } from "react";
 import FilterButton from "@/core/components/DataTable/filter/FilterButton";
 import FilterBody from "@/core/components/DataTable/filter/FilterBody";
+import { Drawer } from "@mui/material";
 
 function FilterColumn({ columns, user_id, page_name, table_name }) {
     const [open, setOpen] = useState(false);
@@ -9,14 +10,20 @@ function FilterColumn({ columns, user_id, page_name, table_name }) {
     return (
         <>
             <FilterButton drawerState={open} setDrawerState={setOpen} />
-            <FilterBody
-                columns={columns}
-                drawerState={open}
-                setDrawerState={setOpen}
-                user_id={user_id}
-                page_name={page_name}
-                table_name={table_name}
-            />
+            <Drawer
+                open={open}
+                onClose={() => setOpen(false)}
+                sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
+            >
+                <FilterBody
+                    columns={columns}
+                    drawerState={open}
+                    setDrawerState={setOpen}
+                    user_id={user_id}
+                    page_name={page_name}
+                    table_name={table_name}
+                />
+            </Drawer>
         </>
     );
 }