diff --git a/frontend/src/components/top-navigation/top-navigation.tsx b/frontend/src/components/top-navigation/top-navigation.tsx
index f8189294..d9d808fa 100644
--- a/frontend/src/components/top-navigation/top-navigation.tsx
+++ b/frontend/src/components/top-navigation/top-navigation.tsx
@@ -21,10 +21,11 @@ export type ActiveDropdown = "rules" | "menu" | "sound" | undefined;
 export const TopNavigation: FC<Props> = ({ location }) => {
   const [activeDropdown, setActiveDropdown] = useState<ActiveDropdown>();
   const [isComponentVisible, setIsComponentVisible] = useState(false);
-  const masterVolume = useStore((state) => state.masterVolume);
-  const setVolume = useChangeVolume();
-  const ref = useRef(null);
+
+  const { setVolume, masterVolume } = useChangeVolume();
+
   const isMobile = useIsMobile();
+  const ref = useRef(null);
 
   const handleDropdownClick = (dropdown: ActiveDropdown) => {
     if (activeDropdown === dropdown) {
diff --git a/frontend/src/hooks/use-sound.ts b/frontend/src/hooks/use-sound.ts
index d688383f..e115b1ad 100644
--- a/frontend/src/hooks/use-sound.ts
+++ b/frontend/src/hooks/use-sound.ts
@@ -5,7 +5,8 @@ const audioContext = new AudioContext();
 const masterGainNode = audioContext.createGain();
 
 export const useChangeVolume = () => {
-  const { masterVolume, setMasterVolume } = useStore();
+  const masterVolume = useStore((state) => state.masterVolume);
+  const setMasterVolume = useStore((state) => state.setMasterVolume);
 
   useEffect(() => {
     masterGainNode.gain.setValueAtTime(masterVolume, 0);