diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 7e0eb37a..45a012eb 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import type { PlacesType } from 'react-tooltip';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
-import { BodyVisibleContext } from '@/core/router';
 import useAutoFocusRef from '@/hooks/useAutoFocusRef';
+import useBodyVisibleContext from '@/hooks/useBodyVisibleContext';
 
 type EndIcon = {
   icon: string;
@@ -64,7 +64,7 @@ const Input = React.memo((props: Props) => {
     value,
   } = props;
 
-  const bodyVisible = useContext(BodyVisibleContext);
+  const bodyVisible = useBodyVisibleContext();
   const inputRef = useAutoFocusRef(autoFocus, bodyVisible);
   const [isShow, setIsShow] = React.useState(false);
 
diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
index eca1a33b..0cc0a0c5 100644
--- a/src/core/router/index.tsx
+++ b/src/core/router/index.tsx
@@ -1,5 +1,5 @@
 /* global globalThis */
-import React, { createContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route } from 'react-router';
 import { RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
@@ -7,6 +7,7 @@ import * as Sentry from '@sentry/react';
 
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import { BodyVisibleContext } from '@/hooks/useBodyVisibleContext';
 import SentryErrorBoundaryWrapper from '@/pages/SentryErrorBoundaryWrapper';
 import Collection from '@/pages/collection/Collection';
 import Series from '@/pages/collection/Series';
@@ -130,8 +131,6 @@ const router = sentryCreateBrowserRouter(
   ),
 );
 
-export const BodyVisibleContext = createContext(false);
-
 const Router = () => {
   const apikey = useSelector((state: RootState) => state.apiSession.apikey);
   const webuiPreviewTheme = useSelector((state: RootState) => state.misc.webuiPreviewTheme);
diff --git a/src/hooks/useBodyVisibleContext.ts b/src/hooks/useBodyVisibleContext.ts
new file mode 100644
index 00000000..0a972c23
--- /dev/null
+++ b/src/hooks/useBodyVisibleContext.ts
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const BodyVisibleContext = createContext(false);
+
+const useBodyVisibleContext = () => useContext(BodyVisibleContext);
+
+export default useBodyVisibleContext;