diff --git a/hera/audio/Music.tsx b/hera/audio/Music.tsx
index a78b5e4b..1bdd6066 100644
--- a/hera/audio/Music.tsx
+++ b/hera/audio/Music.tsx
@@ -22,7 +22,7 @@ const context: MusicContext = {
 const Context = createContext<MusicContext>(context);
 
 export const MusicContext = ({ children }: { children: ReactNode }) => (
-  <Context.Provider value={context}>{children}</Context.Provider>
+  <Context value={context}>{children}</Context>
 );
 
 export default function useMusic(song: SongName) {
diff --git a/hera/hooks/useHide.tsx b/hera/hooks/useHide.tsx
index aa940ed5..e12ecfaf 100644
--- a/hera/hooks/useHide.tsx
+++ b/hera/hooks/useHide.tsx
@@ -1,14 +1,7 @@
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import createContextHook from '@deities/ui/hooks/createContextHook.tsx';
+import { useEffect, useState } from 'react';
 
-export const Context = createContext(false);
-
-export const HideContext = ({ children }: { children: ReactNode }) => {
+const [HideContext, useHide] = createContextHook(() => {
   const [hidden, setHidden] = useState(false);
   useEffect(() => {
     const listener = (event: KeyboardEvent) => {
@@ -26,9 +19,8 @@ export const HideContext = ({ children }: { children: ReactNode }) => {
     return () => document.removeEventListener('keydown', listener);
   }, []);
 
-  return <Context.Provider value={hidden}>{children}</Context.Provider>;
-};
+  return hidden;
+}, false);
 
-export default function useHide() {
-  return useContext(Context);
-}
+export { HideContext };
+export default useHide;
diff --git a/ui/Menu.tsx b/ui/Menu.tsx
index e23bad6d..b473d0b5 100644
--- a/ui/Menu.tsx
+++ b/ui/Menu.tsx
@@ -36,9 +36,7 @@ export type MenuContext = RefObject<boolean>;
 const Context = createContext<MenuContext>({ current: false });
 
 export const MenuContext = ({ children }: { children: ReactNode }) => {
-  return (
-    <Context.Provider value={{ current: false }}>{children}</Context.Provider>
-  );
+  return <Context value={{ current: false }}>{children}</Context>;
 };
 
 export const useDisableOpenMenuOnCancel = () => {
diff --git a/ui/hooks/createContextHook.tsx b/ui/hooks/createContextHook.tsx
new file mode 100644
index 00000000..fea1f03c
--- /dev/null
+++ b/ui/hooks/createContextHook.tsx
@@ -0,0 +1,15 @@
+import { createContext, FunctionComponent, ReactNode, useContext } from 'react';
+
+export default function createContextHook<T>(
+  contextInitializer: () => T,
+  defaultValue?: T,
+): [Context: FunctionComponent<{ children: ReactNode }>, useHook: () => T] {
+  const Context = createContext<T | undefined>(defaultValue);
+
+  return [
+    ({ children }: { children: ReactNode }) => {
+      return <Context value={contextInitializer()}>{children}</Context>;
+    },
+    () => useContext(Context) as T,
+  ];
+}
diff --git a/ui/hooks/useAlert.tsx b/ui/hooks/useAlert.tsx
index 6a996adc..1d481d02 100644
--- a/ui/hooks/useAlert.tsx
+++ b/ui/hooks/useAlert.tsx
@@ -37,7 +37,7 @@ const Context = createContext<AlertContext>({
 export const AlertContext = ({ children }: { children: ReactNode }) => {
   const [state, setState] = useState<Props | null>(null);
   return (
-    <Context.Provider
+    <Context
       value={useMemo(
         () => ({
           alert: setState,
@@ -48,7 +48,7 @@ export const AlertContext = ({ children }: { children: ReactNode }) => {
     >
       {children}
       {state && <Alert {...state} />}
-    </Context.Provider>
+    </Context>
   );
 };
 
diff --git a/ui/hooks/useScale.tsx b/ui/hooks/useScale.tsx
index 6ff87daf..aed97b66 100644
--- a/ui/hooks/useScale.tsx
+++ b/ui/hooks/useScale.tsx
@@ -1,13 +1,8 @@
 import { TileSize } from '@deities/athena/map/Configuration.tsx';
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import { useEffect, useState } from 'react';
 import { isIOS } from '../Browser.tsx';
 import cssVar, { applyVar } from '../cssVar.tsx';
+import createContextHook from './createContextHook.tsx';
 
 let div: HTMLDivElement | null = null;
 const CACHE = new Map<string, number>();
@@ -49,9 +44,7 @@ export const getScale = (tileSize: number) => {
   return maxScale;
 };
 
-const Context = createContext<number>(1);
-
-export const ScaleContext = ({ children }: { children: ReactNode }) => {
+const [ScaleContext, useScale] = createContextHook(() => {
   const [scale, setScale] = useState(() => getScale(TileSize));
 
   useEffect(() => {
@@ -66,9 +59,8 @@ export const ScaleContext = ({ children }: { children: ReactNode }) => {
     };
   }, [scale]);
 
-  return <Context.Provider value={scale}>{children}</Context.Provider>;
-};
+  return scale;
+});
 
-export default function useScale() {
-  return useContext(Context);
-}
+export default useScale;
+export { ScaleContext };
diff --git a/ui/hooks/useScrollRestore.tsx b/ui/hooks/useScrollRestore.tsx
index 92502ff7..3f21c413 100644
--- a/ui/hooks/useScrollRestore.tsx
+++ b/ui/hooks/useScrollRestore.tsx
@@ -16,7 +16,7 @@ const Context = createContext<RefObject<boolean | null>>({
 export const ScrollRestore = Context;
 
 export const ScrollRestoreContext = ({ children }: { children: ReactNode }) => (
-  <Context.Provider value={useRef(false)}>{children}</Context.Provider>
+  <Context value={useRef(false)}>{children}</Context>
 );
 
 export default function useScrollRestore() {