diff --git a/components/Common/ProgressionSidebar/index.tsx b/components/Common/ProgressionSidebar/index.tsx
index 6f897e3dfc4f4..fde4076f4fcb9 100644
--- a/components/Common/ProgressionSidebar/index.tsx
+++ b/components/Common/ProgressionSidebar/index.tsx
@@ -1,9 +1,10 @@
 import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
+import { useRef } from 'react';
 
 import ProgressionSidebarGroup from '@/components/Common/ProgressionSidebar/ProgressionSidebarGroup';
 import WithRouterSelect from '@/components/withRouterSelect';
-import { useClientContext } from '@/hooks/react-server';
+import { useClientContext, useNavigationState } from '@/hooks';
 
 import styles from './index.module.css';
 
@@ -14,6 +15,9 @@ type ProgressionSidebarProps = {
 const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
   const t = useTranslations();
   const { pathname } = useClientContext();
+  const ref = useRef<HTMLElement>(null);
+
+  useNavigationState('progressionSidebar', ref);
 
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -26,7 +30,7 @@ const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
     .find(item => pathname === item.value);
 
   return (
-    <nav className={styles.wrapper}>
+    <nav className={styles.wrapper} ref={ref}>
       <WithRouterSelect
         label={t('components.common.sidebar.title')}
         values={selectItems}
diff --git a/components/withProgressionSidebar.tsx b/components/withProgressionSidebar.tsx
index 251aca152d06c..0a5e0565ca7e7 100644
--- a/components/withProgressionSidebar.tsx
+++ b/components/withProgressionSidebar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
diff --git a/hooks/react-client/index.ts b/hooks/react-client/index.ts
index a4423177fef31..c78f8d3cfbc38 100644
--- a/hooks/react-client/index.ts
+++ b/hooks/react-client/index.ts
@@ -6,3 +6,4 @@ export { default as useClientContext } from './useClientContext';
 export { default as useKeyboardCommands } from './useKeyboardCommands';
 export { default as useClickOutside } from './useClickOutside';
 export { default as useBottomScrollListener } from './useBottomScrollListener';
+export { default as useNavigationState } from './useNavigationState';
diff --git a/hooks/react-client/useNavigationState.ts b/hooks/react-client/useNavigationState.ts
new file mode 100644
index 0000000000000..5baad058ed04b
--- /dev/null
+++ b/hooks/react-client/useNavigationState.ts
@@ -0,0 +1,40 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useContext, useEffect } from 'react';
+
+import { NavigationStateContext } from '@/providers/navigationStateProvider';
+import { debounce } from '@/util/debounce';
+
+const useNavigationState = <T extends HTMLElement>(
+  id: string,
+  ref: RefObject<T>,
+  debounceTime = 300
+) => {
+  const navigationState = useContext(NavigationStateContext);
+
+  const handleScroll = debounce(() => {
+    if (ref.current) {
+      navigationState[id] = {
+        x: ref.current.scrollLeft,
+        y: ref.current.scrollTop,
+      };
+    }
+  }, debounceTime);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (navigationState[id] && navigationState[id].y !== element?.scrollTop) {
+      element?.scroll({ top: navigationState[id].y, behavior: 'instant' });
+    }
+
+    element?.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      element?.removeEventListener('scroll', handleScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+export default useNavigationState;
diff --git a/layouts/Base.tsx b/layouts/Base.tsx
index 1d93321cb23dc..6431e4d001456 100644
--- a/layouts/Base.tsx
+++ b/layouts/Base.tsx
@@ -2,13 +2,16 @@
 
 import type { FC, PropsWithChildren } from 'react';
 
+import { NavigationStateProvider } from '@/providers/navigationStateProvider';
 import { NotificationProvider } from '@/providers/notificationProvider';
 
 import styles from './layouts.module.css';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
   <NotificationProvider viewportClassName="absolute bottom-0 right-0 list-none">
-    <div className={styles.baseLayout}>{children}</div>
+    <NavigationStateProvider>
+      <div className={styles.baseLayout}>{children}</div>
+    </NavigationStateProvider>
   </NotificationProvider>
 );
 
diff --git a/providers/navigationStateProvider.tsx b/providers/navigationStateProvider.tsx
new file mode 100644
index 0000000000000..d37c26ecc18da
--- /dev/null
+++ b/providers/navigationStateProvider.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, useRef } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+type NavigationStateContextType = Record<string, { x: number; y: number }>;
+
+export const NavigationStateContext = createContext<NavigationStateContextType>(
+  {}
+);
+
+export const NavigationStateProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const navigationState = useRef<NavigationStateContextType>({});
+
+  return (
+    <NavigationStateContext.Provider value={navigationState.current}>
+      {children}
+    </NavigationStateContext.Provider>
+  );
+};