diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx
index ee0f9a4..351ceab 100644
--- a/src/components/ToolBar/ToolBar.jsx
+++ b/src/components/ToolBar/ToolBar.jsx
@@ -1,17 +1,12 @@
 import styles from "./ToolBar.module.css"
-import Filter from "../Filter/Filter.jsx";
-import {useContext, useState} from "react";
+import { useContext } from "react";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
-import Button from "../ui/button/button.tsx";
-import {AuthContext} from "../../contexts/auth/AuthContext.js";
-import SearchBtn from "./components/searchBtn/SearchBtn.tsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import SearchBtn from "./tools/SearchBtn.tsx";
+import FilterBtn from "./tools/FilterBtn.tsx";
 
 function ToolBar({setFilters, filters, showCreate = true}) {
     const { user } = useContext(AuthContext);
-    const [isFilterVisible, setIsFilterVisible] = useState(false);
-    const toggleFilters = () => {
-        setIsFilterVisible(prev => !prev);
-    };
 
     return (
         <div>
@@ -21,15 +16,7 @@ function ToolBar({setFilters, filters, showCreate = true}) {
                 ) : null}
 
                 <SearchBtn />
-
-                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
-                        <img src="filter.svg" alt="Filtrer"/>
-                    </Button>
-                    <div className={styles.filterMenu}>
-                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
-                    </div>
-                </div>
+                <FilterBtn setFilters={setFilters} filters={filters} />
             </div>
         </div>
     );
diff --git a/src/components/ToolBar/tools/FilterBtn.tsx b/src/components/ToolBar/tools/FilterBtn.tsx
new file mode 100644
index 0000000..1a5d89b
--- /dev/null
+++ b/src/components/ToolBar/tools/FilterBtn.tsx
@@ -0,0 +1,29 @@
+import styles from "../ToolBar.module.css"
+import Button from "../../ui/button/button";
+import { useEffect, useState } from "react";
+import SearchBar from "../../SearchBar/SearchBar";
+import Filter from "../../Filter/Filter.jsx";
+
+
+interface FilterBtnProps {
+    setFilters: (filter: string) => void;
+    filters: string;
+}
+
+export default function FilterBtn({ setFilters, filters }: FilterBtnProps) {
+
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+
+    const toggleFilters = () => {
+        setIsFilterVisible(prev => !prev);
+    };
+
+    return <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
+        <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
+            <img src="filter.svg" alt="Filtrer"/>
+        </Button>
+        <div className={styles.filterMenu}>
+            <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
+        </div>
+    </div>
+}
\ No newline at end of file