diff --git a/package-lock.json b/package-lock.json
index aef2fd5..16e56d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "8term-main-front",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.59.0",
+        "@tanstack/react-query-devtools": "^5.59.0",
         "axios": "^1.7.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1020,6 +1022,55 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
+      "integrity": "sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz",
+      "integrity": "sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.0.tgz",
+      "integrity": "sha512-YDXp3OORbYR+8HNQx+lf4F73NoiCmCcSvZvgxE29OifmQFk0sBlO26NWLHpcNERo92tVk3w+JQ53/vkcRUY1hA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.59.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.0.tgz",
+      "integrity": "sha512-Kz7577FQGU8qmJxROIT/aOwmkTcxfBqgTP6r1AIvuJxVMVHPkp8eQxWQ7BnfBsy/KTJHiV9vMtRVo1+R1tB3vg==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.58.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.59.0",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
diff --git a/package.json b/package.json
index eff04fd..29e0b23 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index cd6c598..0d9b698 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,14 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Main from './pages/main/Main';
-import Quest from './pages/Quest/Quest';
-import Ranking from './pages/Ranking/Ranking';
+import Router from './route/router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 function App() {
+  const queryClient = new QueryClient();
   return (
     <>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Main />}></Route>
-          <Route path="/quest" element={<Quest />}></Route>
-          <Route path="/Ranking" element={<Ranking />}></Route>
-        </Routes>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <Router />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
     </>
   );
 }
diff --git a/src/route/Router.tsx b/src/route/Router.tsx
new file mode 100644
index 0000000..966eed2
--- /dev/null
+++ b/src/route/Router.tsx
@@ -0,0 +1,17 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Main from '../pages/main/Main';
+import Quest from '../pages/Quest/Quest';
+import Ranking from '../pages/Ranking/Ranking';
+export default function Router() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Main />}></Route>
+          <Route path="/quest" element={<Quest />}></Route>
+          <Route path="/Ranking" element={<Ranking />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+}