diff --git a/resources/js/game/components/actions/actions.tsx b/resources/js/game/components/actions/actions.tsx
deleted file mode 100644
index 4fa46b075..000000000
--- a/resources/js/game/components/actions/actions.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { ReactNode, useState, useEffect } from 'react';
-
-import { IconSection } from './partials/icon-section/icon-section';
-import MonsterSection from './partials/monster-section/monster-section';
-import { useManageMonsterStatSectionVisibility } from './partials/monster-stat-section/hooks/use-manage-monster-stat-section-visibility';
-import { MonsterStatSection } from './partials/monster-stat-section/monster-stat-section';
-import Card from '../../../ui/cards/card';
-
-const Actions = (): ReactNode => {
-  const { showMonsterStatsSection, showMonsterStats } =
-    useManageMonsterStatSectionVisibility();
-  const [scrollY, setScrollY] = useState(0);
-  const [isMobile, setIsMobile] = useState(false);
-
-  const handleScroll = () => setScrollY(window.scrollY);
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
-
-    checkMobile(); // Check on mount
-    window.addEventListener('resize', checkMobile); // Check on resize
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      window.removeEventListener('resize', checkMobile);
-    };
-  }, []);
-
-  return (
-    <Card>
-      <div className="w-full flex flex-col lg:flex-row">
-        <div className="relative">
-          {isMobile ? (
-            <div>
-              <IconSection />
-            </div>
-          ) : (
-            <div
-              style={{
-                position: 'absolute',
-                top: `${scrollY + 10}px`,
-                left: '10px',
-                transition: 'top 0.2s',
-              }}
-            >
-              <IconSection />
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-center lg:items-start w-full">
-          {showMonsterStatsSection ? (
-            <MonsterStatSection />
-          ) : (
-            <MonsterSection show_monster_stats={showMonsterStats} />
-          )}
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-export default Actions;
diff --git a/resources/js/game/components/actions/partials/actions/actions.tsx b/resources/js/game/components/actions/partials/actions/actions.tsx
new file mode 100644
index 000000000..667b906d3
--- /dev/null
+++ b/resources/js/game/components/actions/partials/actions/actions.tsx
@@ -0,0 +1,50 @@
+import React, { ReactNode } from 'react';
+
+import { IconSection } from '../icon-section/icon-section';
+import MonsterSection from '../monster-section/monster-section';
+import { useManageMonsterStatSectionVisibility } from '../monster-stat-section/hooks/use-manage-monster-stat-section-visibility';
+import { MonsterStatSection } from '../monster-stat-section/monster-stat-section';
+import { useScrollIconMenu } from './hooks/use-scroll-icon-menu';
+
+import Card from 'ui/cards/card';
+
+const Actions = (): ReactNode => {
+  const { showMonsterStatsSection, showMonsterStats } =
+    useManageMonsterStatSectionVisibility();
+
+  const { scrollY, isMobile } = useScrollIconMenu();
+
+  return (
+    <Card>
+      <div className="w-full flex flex-col lg:flex-row">
+        <div className="relative">
+          {isMobile ? (
+            <div>
+              <IconSection />
+            </div>
+          ) : (
+            <div
+              style={{
+                position: 'absolute',
+                top: `${scrollY + 10}px`,
+                left: '10px',
+                transition: 'top 0.2s',
+              }}
+            >
+              <IconSection />
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-center lg:items-start w-full">
+          {showMonsterStatsSection ? (
+            <MonsterStatSection />
+          ) : (
+            <MonsterSection show_monster_stats={showMonsterStats} />
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default Actions;
diff --git a/resources/js/game/components/actions/partials/actions/hooks/definitions/use-scroll-icon-menu-definition.ts b/resources/js/game/components/actions/partials/actions/hooks/definitions/use-scroll-icon-menu-definition.ts
new file mode 100644
index 000000000..ae8e8d878
--- /dev/null
+++ b/resources/js/game/components/actions/partials/actions/hooks/definitions/use-scroll-icon-menu-definition.ts
@@ -0,0 +1,4 @@
+export default interface UseScrollIconMenuDefinition {
+  scrollY: number;
+  isMobile: boolean;
+}
diff --git a/resources/js/game/components/actions/partials/actions/hooks/types/use-scroll-icon-menu-state.ts b/resources/js/game/components/actions/partials/actions/hooks/types/use-scroll-icon-menu-state.ts
new file mode 100644
index 000000000..2a51a1688
--- /dev/null
+++ b/resources/js/game/components/actions/partials/actions/hooks/types/use-scroll-icon-menu-state.ts
@@ -0,0 +1,4 @@
+export default interface UseScrollIconMenuState {
+  scrollY: number;
+  isMobile: boolean;
+}
diff --git a/resources/js/game/components/actions/partials/actions/hooks/use-scroll-icon-menu.ts b/resources/js/game/components/actions/partials/actions/hooks/use-scroll-icon-menu.ts
new file mode 100644
index 000000000..092328247
--- /dev/null
+++ b/resources/js/game/components/actions/partials/actions/hooks/use-scroll-icon-menu.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import UseScrollIconMenuDefinition from './definitions/use-scroll-icon-menu-definition';
+import UseScrollIconMenuState from './types/use-scroll-icon-menu-state';
+
+export const useScrollIconMenu = (): UseScrollIconMenuDefinition => {
+  const [scrollY, setScrollY] = useState<UseScrollIconMenuState['scrollY']>(0);
+  const [isMobile, setIsMobile] =
+    useState<UseScrollIconMenuState['isMobile']>(false);
+
+  const handleScroll = () => setScrollY(window.scrollY);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  return {
+    scrollY,
+    isMobile,
+  };
+};
diff --git a/resources/js/game/components/actions/partials/icon-section/components/motion-div.tsx b/resources/js/game/components/actions/partials/icon-section/components/motion-div.tsx
index 69ad41b84..3c2b1e392 100644
--- a/resources/js/game/components/actions/partials/icon-section/components/motion-div.tsx
+++ b/resources/js/game/components/actions/partials/icon-section/components/motion-div.tsx
@@ -25,7 +25,7 @@ export const MotionDiv = (props: MotionDevProps): ReactNode => {
       transition={{ duration: 0.5 }}
       style={{
         position: 'absolute',
-        top: window.innerWidth <= 900 ? '0' : '-25px',
+        top: window.innerWidth <= 900 ? '4rem' : '-25px',
         left: motionLeftPositionHelper(),
         zIndex: 10,
       }}
diff --git a/resources/js/game/components/game-card.tsx b/resources/js/game/components/game-card.tsx
index b08787bc9..7b53008c0 100644
--- a/resources/js/game/components/game-card.tsx
+++ b/resources/js/game/components/game-card.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import Actions from './actions/actions';
+import Actions from './actions/partials/actions/actions';
 
 export const GameCard = (): ReactNode => {
   return <Actions />;