diff --git a/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx b/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx
index 1b04960..fb6ab43 100644
--- a/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx
+++ b/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx
@@ -7,8 +7,8 @@ const BtnPrevSong = ({ loadPrevSong } : { loadPrevSong: () => void }) => {
         <Tooltip showArrow content="Hear the prev. song" openDelay={300} closeDelay={0} 
             contentProps={{ css: { "--tooltip-bg": "colors.blue.500", color: "white" } }}>
             <IconButton bg="transparent" rounded="full" size={{ base: "xs", sm: "sm", md: "md", lg: "md"}}
-                _hover={{ transform: "scale(1.1)", "& .icon-color": { color: "white" } }} onClick={loadPrevSong}
-                data-testid="PrevSongBtn">
+                _hover={{ transform: "scale(1.1)", "& .icon-color": { color: "white" } }} 
+                onClick={loadPrevSong} data-testid="PrevSongBtn">
                 <Icon className="icon-color" as={PiSkipBackBold} color="gray.300" />
             </IconButton>
         </Tooltip>
diff --git a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx
index ceeaaa7..756302c 100644
--- a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx
+++ b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx
@@ -1,13 +1,14 @@
 import { ButtonGroup } from "@chakra-ui/react";
-import useLoadBtnLogic from "@/components/Utils/hooks/useLoadBtnLogic";
 import BtnPrevSong from "./BtnPrevSong";
 import BtnNextSong from "./BtnNextSong";
 import BtnPlaySong from "./BtnPlaySong";
 import { SongResponse } from "@/types/songTypes";
+import useLoadNextSong from "@/components/Utils/hooks/useLoadNextSong";
+import useLoadPriorSong from "@/components/Utils/hooks/useLoadPriorSong";
 
 const PlayControls = ({ activeSong, isPlaying }: { activeSong: SongResponse | null, isPlaying: boolean }) => {
-    const { loadPrevSong, loadNextSong } = useLoadBtnLogic(activeSong);
-
+    const loadNextSong = useLoadNextSong(activeSong);
+    const loadPrevSong = useLoadPriorSong(activeSong);
     return(
         <ButtonGroup gap={0} pr={{ base: 1, sm: 2, md: 3, lg: 4 }}>
             <BtnPrevSong loadPrevSong={loadPrevSong} />
diff --git a/front/src/components/Utils/hooks/useLoadBtnLogic.ts b/front/src/components/Utils/hooks/useLoadBtnLogic.ts
deleted file mode 100644
index 18464ee..0000000
--- a/front/src/components/Utils/hooks/useLoadBtnLogic.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useLazyQuery } from "@apollo/client";
-import { useAppDispatch } from "../redux-hooks";
-import { setActiveAudio } from "@/reducers/songReducer";
-import { SongResponse } from "@/types/songTypes";
-import { getNextSong, getPreviousSong } from "@/queries/MusicPlayerQueries";
-
-const useLoadBtnLogic = (activeSong: SongResponse | null) => {
-    const dispatch = useAppDispatch();
-    const [getPriorSong] = useLazyQuery(getPreviousSong, {
-            onCompleted: (data) => {
-                if (data.getPreviousSong) {
-                    dispatch(setActiveAudio(data.getPreviousSong));
-                };
-            }
-        });
-        
-    const [getFollowingSong] = useLazyQuery(getNextSong, {
-        onCompleted: (data) => {
-            if (data.getNextSong) {
-                dispatch(setActiveAudio(data.getNextSong));
-            };
-        }
-    });
-
-    const loadNextSong = () => {
-        if (!activeSong?.id) return;
-        getFollowingSong({ variables: { songID: activeSong.id } });
-    };
-
-    const loadPrevSong = () => {
-        if (!activeSong?.id) return;
-        getPriorSong({ variables: { songID: activeSong.id } });
-    };
-
-    return { loadPrevSong, loadNextSong }
-};
-
-export default useLoadBtnLogic;
\ No newline at end of file
diff --git a/front/src/components/Utils/hooks/useLoadNextSong.ts b/front/src/components/Utils/hooks/useLoadNextSong.ts
new file mode 100644
index 0000000..e87450a
--- /dev/null
+++ b/front/src/components/Utils/hooks/useLoadNextSong.ts
@@ -0,0 +1,27 @@
+import { useLazyQuery } from "@apollo/client";
+import { useAppDispatch } from "../redux-hooks";
+import { setActiveAudio } from "@/reducers/songReducer";
+import { SongResponse } from "@/types/songTypes";
+import { getNextSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
+
+const useLoadNextSong = (activeSong: SongResponse | null) => {
+    const dispatch = useAppDispatch();
+        
+    const [getFollowingSong, { data }] = useLazyQuery(getNextSong);
+
+    useEffect(() => {
+        if (data?.getNextSong) {
+            dispatch(setActiveAudio(data.getNextSong));
+        };
+    }, [data, dispatch])
+
+    const loadNextSong = () => {
+        if (!activeSong?.id) return;
+        getFollowingSong({ variables: { songID: activeSong.id } });
+    };
+
+    return loadNextSong
+};
+
+export default useLoadNextSong;
\ No newline at end of file
diff --git a/front/src/components/Utils/hooks/useLoadPriorSong.ts b/front/src/components/Utils/hooks/useLoadPriorSong.ts
new file mode 100644
index 0000000..beecf86
--- /dev/null
+++ b/front/src/components/Utils/hooks/useLoadPriorSong.ts
@@ -0,0 +1,26 @@
+import { SongResponse } from "@/types/songTypes";
+import { useAppDispatch } from "../redux-hooks";
+import { useLazyQuery } from "@apollo/client";
+import { getPreviousSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
+import { setActiveAudio } from "@/reducers/songReducer";
+
+const useLoadPriorSong = (activeSong: SongResponse | null) => {
+    const dispatch = useAppDispatch();
+    const [getPriorSong, { data }] = useLazyQuery(getPreviousSong);
+        
+    useEffect(() => {
+        if (data?.getPreviousSong) {
+            dispatch(setActiveAudio(data.getPreviousSong));
+        };
+    }, [data, dispatch])
+
+    const loadPrevSong = () => {
+        if (!activeSong?.id) return;
+        getPriorSong({ variables: { songID: activeSong.id } })
+    };
+
+    return loadPrevSong;
+};
+
+export default useLoadPriorSong;
\ No newline at end of file
diff --git a/front/src/components/Utils/hooks/useStraySong.ts b/front/src/components/Utils/hooks/useStraySong.ts
index c9e1d49..66e1991 100644
--- a/front/src/components/Utils/hooks/useStraySong.ts
+++ b/front/src/components/Utils/hooks/useStraySong.ts
@@ -2,18 +2,20 @@ import { useLazyQuery } from "@apollo/client";
 import { useAppDispatch } from "../redux-hooks";
 import { setActiveAudio } from "@/reducers/songReducer";
 import { getRandomSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
 
 const useStraySong = () => {
     const dispatch = useAppDispatch();
-    const [getStraySong] = useLazyQuery(getRandomSong, {
+    const [getStraySong, { data }] = useLazyQuery(getRandomSong, {
         fetchPolicy: "network-only",
-        onCompleted: (data) => {
-            if (data.getRandomSong) {
-                dispatch(setActiveAudio(data.getRandomSong));
-            };
-        }
     });
 
+    useEffect(() => {
+        if (data?.getRandomSong) {
+            dispatch(setActiveAudio(data.getRandomSong))
+        }
+    }, [data, dispatch])
+
     return getStraySong;
 };