diff --git a/package-lock.json b/package-lock.json
index 731efe1..f5d4221 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@tanstack/react-query": "^5.90.12",
         "@tanstack/react-query-devtools": "^5.91.1",
         "axios": "^1.13.2",
+        "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
diff --git a/package.json b/package.json
index 8bfc223..819030e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
     "axios": "^1.13.2",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.23.26",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
diff --git a/src/mocks/filterData.ts b/src/mocks/filterData.ts
new file mode 100644
index 0000000..2e8a112
--- /dev/null
+++ b/src/mocks/filterData.ts
@@ -0,0 +1,22 @@
+export const filterData = [
+  {
+    id: 1,
+    label: 'ALL',
+    value: 'ALL',
+  },
+  {
+    id: 2,
+    label: 'Subject1',
+    value: 'Subject1',
+  },
+  {
+    id: 3,
+    label: 'Subject2',
+    value: 'Subject2',
+  },
+  {
+    id: 4,
+    label: 'Subject3',
+    value: 'Subject3',
+  },
+];
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 32f943b..6ecf0a4 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,4 +1,5 @@
 import Navbar from '../../components/Navbar/Navbar';
+import ListFilter from './components/Filter/ListFilter';
 import Alert from './components/Alert/Alert';
 import Banner from './components/Banner/Banner';
 import Chart from './components/Chart/Chart';
@@ -8,6 +9,7 @@ const Home = () => {
     <>
       <Banner />
       <Navbar />
+      <ListFilter />
       <Chart />
       <Alert />
     </>
diff --git a/src/pages/home/components/Filter/ItemFilter.tsx b/src/pages/home/components/Filter/ItemFilter.tsx
new file mode 100644
index 0000000..bb518f1
--- /dev/null
+++ b/src/pages/home/components/Filter/ItemFilter.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import type { FilterItem } from '../../../../types/filter.type';
+import { useFilterStore } from '../../../../stores/filterStore';
+
+interface ItemFilterProps {
+  item: FilterItem;
+}
+
+const ItemFilter = ({ item }: ItemFilterProps) => {
+  const { selectedFilter, setFilter } = useFilterStore();
+  const active = selectedFilter === item.value;
+
+  return (
+    <button
+      onClick={() => setFilter(item.value)}
+      className={clsx(
+        'px-[1.6rem] py-[0.6rem] rounded-[11.7rem] cursor-pointer text-[1.4rem] transition-colors',
+        active ? 'bg-main text-white' : 'bg-white text-font',
+      )}
+    >
+      {item.label}
+    </button>
+  );
+};
+
+export default ItemFilter;
diff --git a/src/pages/home/components/Filter/ListFilter.tsx b/src/pages/home/components/Filter/ListFilter.tsx
new file mode 100644
index 0000000..afa13ee
--- /dev/null
+++ b/src/pages/home/components/Filter/ListFilter.tsx
@@ -0,0 +1,14 @@
+import { filterData } from '../../../../mocks/filterData';
+import ItemFilter from './ItemFilter';
+
+const ListFilter = () => {
+  return (
+    <div className="w-full flex items-center gap-[0.6rem] px-4 mt-8 mb-[0.4rem]">
+      {filterData.map((item) => (
+        <ItemFilter key={item.id} item={item} />
+      ))}
+    </div>
+  );
+};
+
+export default ListFilter;
diff --git a/src/stores/filterStore.ts b/src/stores/filterStore.ts
new file mode 100644
index 0000000..0b71a9e
--- /dev/null
+++ b/src/stores/filterStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+export type FilterValue = string;
+
+interface FilterState {
+  selectedFilter: FilterValue;
+  setFilter: (filter: FilterValue) => void;
+}
+
+export const useFilterStore = create<FilterState>((set) => ({
+  selectedFilter: 'ALL',
+  setFilter: (filter) => set({ selectedFilter: filter }),
+}));
diff --git a/src/types/filter.type.ts b/src/types/filter.type.ts
new file mode 100644
index 0000000..0baa9ba
--- /dev/null
+++ b/src/types/filter.type.ts
@@ -0,0 +1,5 @@
+export interface FilterItem {
+  id: number;
+  label: string;
+  value: string;
+}