diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
deleted file mode 100644
index eb0bf87..0000000
--- a/src/components/Filter/Filter.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import styles from "./Filter.module.css";
-import Button from "../ui/button/button.tsx"
-
-function Filter({isFilterVisible, filters, setFilters}){
-    const setAlphabeticalOrder = (order) => {
-        setFilters(prev => ({
-            ...prev,
-            alphabetical : prev.alphabetical === order ? null : order
-        }));
-    };
-
-    const setYearOrder = (order) => {
-        setFilters(prev => ({
-            ...prev,
-            yearOrder: prev.yearOrder === order ? null : order
-        }));
-    };
-
-    return (
-        <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
-            <abbr title="Tri alphabétique croissant (A à Z)">
-                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
-                        variant={"default"}
-                        onClick={() => setAlphabeticalOrder("asc")}>
-                    <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
-                </Button>
-            </abbr>
-
-            <abbr title="Tri alphabétique décroissant (Z à A)">
-                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
-                        variant={"default"}
-                        onClick={() => setAlphabeticalOrder("desc")}>
-                    <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
-                </Button>
-            </abbr>
-
-            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
-                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
-                        variant={"default"}
-                        onClick={() => setYearOrder("desc")}>
-                    <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
-                </Button>
-            </abbr>
-
-            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
-                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
-                        variant={"default"}
-                        onClick={() => setYearOrder("asc")}>
-                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
-                </Button>
-            </abbr>
-        </div>
-    )
-}
-
-export default Filter;
\ No newline at end of file
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
new file mode 100644
index 0000000..d917928
--- /dev/null
+++ b/src/components/Filter/Filter.tsx
@@ -0,0 +1,78 @@
+import styles from "./Filter.module.css";
+import Button from "../ui/button/button";
+import React from "react";
+
+type FiltersType = {
+    alphabetical: "asc" | "desc" | null;
+    yearOrder: "asc" | "desc" | null;
+    [key: string]: any;
+};
+
+type FilterProps = {
+    isFilterVisible: boolean;
+    filters: FiltersType;
+    setFilters: React.Dispatch<React.SetStateAction<FiltersType>>;
+};
+
+function Filter({ isFilterVisible, filters, setFilters }: FilterProps): any {
+
+    const setAlphabeticalOrder = (order: "asc" | "desc"): void => {
+        setFilters((prev) => ({
+            ...prev,
+            alphabetical: prev.alphabetical === order ? null : order
+        }));
+    };
+
+    const setYearOrder = (order: "asc" | "desc"): void => {
+        setFilters((prev) => ({
+            ...prev,
+            yearOrder: prev.yearOrder === order ? null : order
+        }));
+    };
+
+    return (
+        <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
+            <abbr title="Tri alphabétique croissant (A à Z)">
+                <Button
+                    className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
+                    variant={"default"}
+                    onClick={() => setAlphabeticalOrder("asc")}
+                >
+                    <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)" />
+                </Button>
+            </abbr>
+
+            <abbr title="Tri alphabétique décroissant (Z à A)">
+                <Button
+                    className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                    variant={"default"}
+                    onClick={() => setAlphabeticalOrder("desc")}
+                >
+                    <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)" />
+                </Button>
+            </abbr>
+
+            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
+                <Button
+                    className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                    variant={"default"}
+                    onClick={() => setYearOrder("desc")}
+                >
+                    <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)" />
+                </Button>
+            </abbr>
+
+            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
+                <Button
+                    className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                    variant={"default"}
+                    onClick={() => setYearOrder("asc")}
+                >
+                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)" />
+                </Button>
+            </abbr>
+        </div>
+    );
+}
+
+export default Filter;
diff --git a/src/components/ToolBar/tools/FilterBtn.tsx b/src/components/ToolBar/tools/FilterBtn.tsx
index 672a3f3..0f87ae9 100644
--- a/src/components/ToolBar/tools/FilterBtn.tsx
+++ b/src/components/ToolBar/tools/FilterBtn.tsx
@@ -1,12 +1,16 @@
 import styles from "../ToolBar.module.css"
 import Button from "../../ui/button/button";
 import { useState } from "react";
-import Filter from "../../Filter/Filter.jsx";
+import Filter from "../../Filter/Filter";
 
+interface Filters {
+    alphabetical: "asc" | "desc";
+    yearOrder: "asc" | "desc";
+}
 
 interface FilterBtnProps {
-    setFilters: (filter: string) => void;
-    filters: string;
+    setFilters: any
+    filters: Filters
 }
 
 export default function FilterBtn({ setFilters, filters }: FilterBtnProps) {