diff --git a/frontend/src/components/pages/LadderDetails/LadderDetails.tsx b/frontend/src/components/pages/LadderDetails/LadderDetails.tsx
index 594f0d2d..90adb2e2 100644
--- a/frontend/src/components/pages/LadderDetails/LadderDetails.tsx
+++ b/frontend/src/components/pages/LadderDetails/LadderDetails.tsx
@@ -9,7 +9,7 @@ import { LadderDetails } from './modules/LadderDetails';
 import NextAdapterApp from 'next-query-params/app';
 import { QueryParamProvider } from 'use-query-params';
 
-export const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSlug }) => {
+const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSlug }) => {
   const { currentBand, handleLadderChange, tabsProps } = useLadderDetails(data?.bands);
 
   if (!currentBand || !data || !data.bands[currentBand]) {
@@ -17,30 +17,34 @@ export const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSl
   }
 
   return (
-    <QueryParamProvider adapter={NextAdapterApp}>
-      <div>
-        <Breadcrumbs
-          breadcrumbs={[
-            { label: 'CPF Library', href: routes.library.index, current: false },
-            { label: data.ladderName, href: `${routes.library.index}/${ladderSlug}`, current: true },
-          ]}
-        />
-        {data && (
-          <section className="grid grid-cols-10 py-16">
-            <div className="col-span-2 mx-auto">
-              <LadderTabs {...tabsProps} ladderOnClick={handleLadderChange} />
-            </div>
-            <div className="col-span-7">
-              <LadderDetails
-                band={currentBand}
-                ladder={data.bands[currentBand]}
-                ladderName={data.ladderName}
-                ladderSlug={ladderSlug}
-              />
-            </div>
-          </section>
-        )}
-      </div>
-    </QueryParamProvider>
+    <div>
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'CPF Library', href: routes.library.index, current: false },
+          { label: data.ladderName, href: `${routes.library.index}/${ladderSlug}`, current: true },
+        ]}
+      />
+      {data && (
+        <section className="grid grid-cols-10 py-16">
+          <div className="col-span-2 mx-auto">
+            <LadderTabs {...tabsProps} ladderOnClick={handleLadderChange} />
+          </div>
+          <div className="col-span-7">
+            <LadderDetails
+              band={currentBand}
+              ladder={data.bands[currentBand]}
+              ladderName={data.ladderName}
+              ladderSlug={ladderSlug}
+            />
+          </div>
+        </section>
+      )}
+    </div>
   );
 };
+
+export const LadderDetailsWrapper: React.FC<LadderDetailsProps> = (props) => (
+  <QueryParamProvider adapter={NextAdapterApp}>
+    <LadderDetailsPage {...props} />
+  </QueryParamProvider>
+);
diff --git a/frontend/src/components/pages/LadderDetails/index.ts b/frontend/src/components/pages/LadderDetails/index.ts
index 3a1b622d..57957f5e 100644
--- a/frontend/src/components/pages/LadderDetails/index.ts
+++ b/frontend/src/components/pages/LadderDetails/index.ts
@@ -1 +1 @@
-export { LadderDetailsPage as LadderDetails } from './LadderDetails';
+export { LadderDetailsWrapper as LadderDetails } from './LadderDetails';
diff --git a/frontend/src/components/pages/MySpace/MySpace.tsx b/frontend/src/components/pages/MySpace/MySpace.tsx
index 3174c99d..60736915 100644
--- a/frontend/src/components/pages/MySpace/MySpace.tsx
+++ b/frontend/src/components/pages/MySpace/MySpace.tsx
@@ -9,20 +9,24 @@ import { LadderTab } from './modules/LadderTab';
 import NextAdapterApp from 'next-query-params/app';
 import { QueryParamProvider } from 'use-query-params';
 
-export const MySpace: React.FC<MySpaceProps> = ({ data }) => {
+const MySpace: React.FC<MySpaceProps> = ({ data }) => {
   const { user, currentLevel, nextLevel, ladder } = data;
   const { currentTab, setCurrentTab } = useMySpace();
 
   return (
-    <QueryParamProvider adapter={NextAdapterApp}>
-      <div className="flex flex-col gap-8">
-        <Typography variant="body-l/semibold" as="h1">
-          My Space
-        </Typography>
-        <Header user={user} currentLevel={currentLevel} nextLevel={nextLevel} />
-        <Tabs tabs={mySpaceTabs} currentTab={currentTab} onTabChange={setCurrentTab} />
-        <div>{currentTab === 'ladder' && <LadderTab bands={ladder.bands} currentLevel={currentLevel.band} />}</div>
-      </div>
-    </QueryParamProvider>
+    <div className="flex flex-col gap-8">
+      <Typography variant="body-l/semibold" as="h1">
+        My Space
+      </Typography>
+      <Header user={user} currentLevel={currentLevel} nextLevel={nextLevel} />
+      <Tabs tabs={mySpaceTabs} currentTab={currentTab} onTabChange={setCurrentTab} />
+      <div>{currentTab === 'ladder' && <LadderTab bands={ladder.bands} currentLevel={currentLevel.band} />}</div>
+    </div>
   );
 };
+
+export const MySpaceWrapper: React.FC<MySpaceProps> = (props) => (
+  <QueryParamProvider adapter={NextAdapterApp}>
+    <MySpace {...props} />
+  </QueryParamProvider>
+);
diff --git a/frontend/src/components/pages/MySpace/index.ts b/frontend/src/components/pages/MySpace/index.ts
index ed1483fd..9415568a 100644
--- a/frontend/src/components/pages/MySpace/index.ts
+++ b/frontend/src/components/pages/MySpace/index.ts
@@ -1 +1 @@
-export { MySpace } from './MySpace';
+export { MySpaceWrapper as MySpace } from './MySpace';