diff --git a/src/assets/navbar/Gear.png b/src/assets/navbar/Gear.png
new file mode 100644
index 0000000..112e65c
Binary files /dev/null and b/src/assets/navbar/Gear.png differ
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
deleted file mode 100644
index 4e5d317..0000000
--- a/src/components/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Navbar = () => {
-  return <>Navbar</>;
-};
-
-export default Navbar;
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 56f7ddd..324e851 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,4 +1,4 @@
-import Navbar from '../../components/Navbar/Navbar';
+import Navbar from './components/Navbar/Navbar';
 import ListFilter from './components/Filter/ListFilter';
 import ListSite from './components/Site/ListSite';
 import Alert from './components/Alert/Alert';
diff --git a/src/pages/home/components/Filter/ItemFilter.tsx b/src/pages/home/components/Filter/ItemFilter.tsx
index bb518f1..407a67e 100644
--- a/src/pages/home/components/Filter/ItemFilter.tsx
+++ b/src/pages/home/components/Filter/ItemFilter.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { useShallow } from 'zustand/react/shallow';
 import type { FilterItem } from '../../../../types/filter.type';
 import { useFilterStore } from '../../../../stores/filterStore';
 
@@ -7,7 +8,13 @@ interface ItemFilterProps {
 }
 
 const ItemFilter = ({ item }: ItemFilterProps) => {
-  const { selectedFilter, setFilter } = useFilterStore();
+  const { selectedFilter, setFilter } = useFilterStore(
+    useShallow((state) => ({
+      selectedFilter: state.selectedFilter,
+      setFilter: state.setFilter,
+    })),
+  );
+
   const active = selectedFilter === item.value;
 
   return (
diff --git a/src/pages/home/components/Navbar/Navbar.tsx b/src/pages/home/components/Navbar/Navbar.tsx
new file mode 100644
index 0000000..c4c7512
--- /dev/null
+++ b/src/pages/home/components/Navbar/Navbar.tsx
@@ -0,0 +1,22 @@
+import settingBtn from '../../../../assets/navbar/Gear.png';
+import useNavigation from '../../../../hooks/useNavigation';
+
+const Navbar = () => {
+  const { goTo } = useNavigation();
+
+  const handleClick = () => {
+    goTo('/setting');
+  };
+  return (
+    <div className="w-full h-[4.8rem] flex justify-end items-center">
+      <img
+        src={settingBtn}
+        alt="setting-button"
+        className="object-contain w-10 h-10 cursor-pointer"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx
new file mode 100644
index 0000000..1da29e4
--- /dev/null
+++ b/src/pages/setting/Setting.tsx
@@ -0,0 +1,5 @@
+function Setting() {
+  return <div>세팅페이지</div>;
+}
+
+export default Setting;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 693c496..86f8c21 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -6,7 +6,9 @@ import Spinner from '../components/Spinner/Spinner';
 import Splash from '../components/Splash/Splash';
 
 import HomePage from '../pages/home/Home';
+
 const NotFoundPage = lazy(() => import('../pages/notFound/NotFound'));
+const SettingPage = lazy(() => import('../pages/setting/Setting'));
 
 const router = createBrowserRouter([
   {
@@ -25,6 +27,10 @@ const router = createBrowserRouter([
         path: 'home',
         element: <HomePage />,
       },
+      {
+        path: 'setting',
+        element: <SettingPage />,
+      },
       {
         path: '*',
         element: <NotFoundPage />,