diff --git a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
index d3acde33..8c582f63 100644
--- a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
+++ b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
@@ -1,7 +1,8 @@
 import { Tab, Tabs } from "@mui/material";
 import { useCallback, useMemo } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import Text from "../Text";
+import { useNavigate } from "../../services/hooks/useNavigate";
 import s from "./index.module.css";
 
 export interface ButtonsHeaderItem {
diff --git a/apps/client/src/components/Layout/Sider/Sider.tsx b/apps/client/src/components/Layout/Sider/Sider.tsx
index 6d3f2b36..44c8fff5 100644
--- a/apps/client/src/components/Layout/Sider/Sider.tsx
+++ b/apps/client/src/components/Layout/Sider/Sider.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useContext } from "react";
 import clsx from "clsx";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { SystemUpdateAlt as UpdateIcon } from "@mui/icons-material";
 
@@ -17,6 +17,7 @@ import {
   selectVersion,
 } from "../../../services/redux/modules/settings/selector";
 import Text from "../../Text";
+import { useNavigate } from "../../../services/hooks/useNavigate";
 import SiderCategory from "./SiderCategory/SiderCategory";
 import { links } from "./types";
 import SiderTitle from "./SiderTitle";
diff --git a/apps/client/src/components/PrivateRoute/PrivateRoute.tsx b/apps/client/src/components/PrivateRoute/PrivateRoute.tsx
index 4aaf877a..51acbdf8 100644
--- a/apps/client/src/components/PrivateRoute/PrivateRoute.tsx
+++ b/apps/client/src/components/PrivateRoute/PrivateRoute.tsx
@@ -1,12 +1,12 @@
 import { CircularProgress } from "@mui/material";
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
 import { useSelector } from "react-redux";
 import {
   selectLoaded,
   selectUser,
 } from "../../services/redux/modules/user/selector";
 import { selectAccounts } from "../../services/redux/modules/admin/selector";
+import { useNavigate } from "../../services/hooks/useNavigate";
 
 interface PrivateRouteProps {
   children: JSX.Element;
diff --git a/apps/client/src/scenes/Account/Login/Login.tsx b/apps/client/src/scenes/Account/Login/Login.tsx
index da72fa24..5c32294b 100644
--- a/apps/client/src/scenes/Account/Login/Login.tsx
+++ b/apps/client/src/scenes/Account/Login/Login.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
 import { Checkbox } from "@mui/material";
 import clsx from "clsx";
 import Text from "../../../components/Text";
@@ -8,6 +7,7 @@ import { selectUser } from "../../../services/redux/modules/user/selector";
 import { getSpotifyLogUrl } from "../../../services/tools";
 import s from "../index.module.css";
 import { LocalStorage, REMEMBER_ME_KEY } from "../../../services/storage";
+import { useNavigate } from "../../../services/hooks/useNavigate";
 
 export default function Login() {
   const navigate = useNavigate();
diff --git a/apps/client/src/scenes/Logout/Logout.tsx b/apps/client/src/scenes/Logout/Logout.tsx
index 3df0cdc9..480064b0 100644
--- a/apps/client/src/scenes/Logout/Logout.tsx
+++ b/apps/client/src/scenes/Logout/Logout.tsx
@@ -1,11 +1,11 @@
 import { CircularProgress } from "@mui/material";
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
 import Text from "../../components/Text";
 import { api } from "../../services/apis/api";
 import { logout } from "../../services/redux/modules/user/reducer";
 import { useAppDispatch } from "../../services/redux/tools";
 import { LocalStorage, REMEMBER_ME_KEY } from "../../services/storage";
+import { useNavigate } from "../../services/hooks/useNavigate";
 
 export default function Logout() {
   const navigate = useNavigate();
diff --git a/apps/client/src/services/hooks/hooks.ts b/apps/client/src/services/hooks/hooks.ts
index 5d66019e..3ad41deb 100644
--- a/apps/client/src/services/hooks/hooks.ts
+++ b/apps/client/src/services/hooks/hooks.ts
@@ -8,13 +8,14 @@ import {
   useState,
 } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { detailIntervalToQuery } from "../intervals";
 import {
   selectIntervalDetail,
   selectUser,
 } from "../redux/modules/user/selector";
 import { UnboxPromise } from "../types";
+import { useNavigate } from "./useNavigate";
 
 export function useAPI<Fn extends (...ags: any[]) => Promise<{ data: D }>, D>(
   call: Fn,
diff --git a/apps/client/src/services/hooks/useNavigate.ts b/apps/client/src/services/hooks/useNavigate.ts
new file mode 100644
index 00000000..7dd7032a
--- /dev/null
+++ b/apps/client/src/services/hooks/useNavigate.ts
@@ -0,0 +1,5 @@
+import { useNavigate as RRDuseNavigate } from "react-router-dom";
+
+export function useNavigate() {
+  return RRDuseNavigate() as (to: string) => void;
+}