From 5ea5fcbe15cca8ec1267a79746b50b8fe014789a Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Mon, 28 Oct 2024 12:41:54 +0100
Subject: [PATCH] Adjust studioContentMenu

---
 .../StudioButtonTab.module.css                | 14 -------
 .../StudioButtonTab/StudioButtonTab.tsx       | 29 --------------
 .../StudioButtonTab/index.ts                  |  1 -
 .../StudioContentMenuButtonTab.module.css     |  6 +++
 .../StudioContentMenuWrapper.module.css       |  2 +-
 .../StudioContentMenuWrapper.tsx              | 32 +++++++++++----
 .../StudioLinkTab/StudioLinkTab.module.css    | 10 -----
 .../StudioLinkTab/StudioLinkTab.tsx           | 30 --------------
 .../StudioContentMenu/StudioLinkTab/index.ts  |  1 -
 .../StudioMenuTabContainer.module.css         | 36 -----------------
 .../StudioMenuTabContainer.tsx                | 40 -------------------
 .../StudioMenuTabContainer/index.ts           |  1 -
 .../types/StudioMenuTabType.ts                | 15 -------
 .../ContentLibrary/ContentLibrary.test.tsx    | 11 +++--
 .../src/ContentLibrary/ContentLibrary.tsx     | 16 +-------
 .../InfoBox/InfoBox.module.css                |  0
 .../InfoBox/InfoBox.test.tsx                  |  2 +-
 .../{ => LibraryContent}/InfoBox/InfoBox.tsx  |  0
 .../{ => LibraryContent}/InfoBox/index.ts     |  0
 .../InfoBox/infoBoxConfigs.ts                 |  0
 .../LibraryContent/LibraryContent.tsx         | 39 ++++++++++++++++++
 .../PagesRouter/PagesRouter.test.tsx          | 32 ++++++++-------
 .../PagesRouter/PagesRouter.tsx               | 32 +++++++++++++++
 .../{ => LibraryContent}/PagesRouter/index.ts |  0
 .../pages/CodeList/CodeList.test.tsx          |  0
 .../pages/CodeList/CodeList.tsx               |  0
 .../pages/CodeList/index.ts                   |  0
 .../pages/Images/Images.test.tsx              |  0
 .../pages/Images/Images.tsx                   |  0
 .../pages/Images/index.ts                     |  0
 .../pages/LandingPage/LandingPage.module.css  |  0
 .../pages/LandingPage/LandingPage.test.tsx    |  0
 .../pages/LandingPage/LandingPage.tsx         |  0
 .../pages/LandingPage/index.ts                |  0
 .../LibraryHeader/LibraryHeader.module.css    |  8 +---
 .../LibraryHeader/LibraryHeader.test.tsx      | 23 +++--------
 .../LibraryHeader/LibraryHeader.tsx           |  6 +--
 .../PagesRouter/PagesRouter.tsx               | 26 ------------
 .../ContentResourceLibraryImpl.test.tsx       |  3 +-
 .../src/hooks/useLibraryMenuContentTabs.tsx   | 33 ++++++++-------
 .../src/utils/router/QueryParamsRouter.ts     |  2 +-
 .../utils/router/RouterRouteMapper.test.ts    |  4 +-
 .../src/utils/router/RouterRouteMapper.ts     |  6 +--
 43 files changed, 167 insertions(+), 293 deletions(-)
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.module.css
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.tsx
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/index.ts
 create mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.module.css
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.module.css
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.tsx
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/index.ts
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.module.css
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.tsx
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/index.ts
 delete mode 100644 frontend/libs/studio-components/src/components/StudioContentMenu/types/StudioMenuTabType.ts
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/InfoBox/InfoBox.module.css (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/InfoBox/InfoBox.test.tsx (95%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/InfoBox/InfoBox.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/InfoBox/index.ts (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/InfoBox/infoBoxConfigs.ts (100%)
 create mode 100644 frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/LibraryContent.tsx
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/PagesRouter/PagesRouter.test.tsx (52%)
 create mode 100644 frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.tsx
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/PagesRouter/index.ts (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/CodeList/CodeList.test.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/CodeList/CodeList.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/CodeList/index.ts (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/Images/Images.test.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/Images/Images.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/Images/index.ts (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/LandingPage/LandingPage.module.css (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/LandingPage/LandingPage.test.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/LandingPage/LandingPage.tsx (100%)
 rename frontend/libs/studio-content-library/src/ContentLibrary/{ => LibraryContent}/pages/LandingPage/index.ts (100%)
 delete mode 100644 frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.tsx

diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.module.css
deleted file mode 100644
index 1784221be59..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.buttonTab {
-  all: unset;
-  display: var(--tab-display);
-  align-items: var(--tab-align-items);
-  gap: var(--tab-icon-title-gap);
-  cursor: var(--tab-cursor);
-  width: var(--tab-width);
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  font-size: var(--fds-spacing-8);
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.tsx
deleted file mode 100644
index dbfa66e2764..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/StudioButtonTab.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import type { StudioButtonTabType } from '../types/StudioMenuTabType';
-import { StudioMenuTab } from '../StudioMenuTab';
-import { StudioMenuTabContainer } from '../StudioMenuTabContainer';
-import { useStudioContentMenuContext } from '../context/StudioContentMenuContext';
-import classes from './StudioButtonTab.module.css';
-
-type StudioButtonTabProps<TabId extends string> = {
-  contentTab: StudioButtonTabType<TabId>;
-};
-
-export function StudioButtonTab<TabId extends string>({
-  contentTab,
-}: StudioButtonTabProps<TabId>): React.ReactElement {
-  const { selectedTabId, onChangeTab } = useStudioContentMenuContext();
-
-  return (
-    <StudioMenuTabContainer
-      contentTab={contentTab}
-      isTabSelected={selectedTabId === contentTab.tabId}
-      onClick={() => onChangeTab(contentTab.tabId)}
-    >
-      <button className={classes.buttonTab} tabIndex={-1}>
-        <div className={classes.icon}>{contentTab.icon}</div>
-        <StudioMenuTab contentTab={contentTab} />
-      </button>
-    </StudioMenuTabContainer>
-  );
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/index.ts
deleted file mode 100644
index f8d49aa8d9f..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioButtonTab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StudioButtonTab } from './StudioButtonTab';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.module.css
new file mode 100644
index 00000000000..a0f7dbe287d
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.module.css
@@ -0,0 +1,6 @@
+.buttonTab {
+  all: unset;
+  display: var(--tab-display);
+  align-items: var(--tab-align-items);
+  width: var(--tab-width);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.module.css
index d6e23110149..ef296e30ece 100644
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.module.css
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.module.css
@@ -1,4 +1,4 @@
 .contentMenuWrapper {
   height: 300px;
-  width: 200px;
+  width: 20vw;
 }
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.tsx
index f20fc7725da..a5ff855a37c 100644
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.tsx
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuWrapper.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { StudioContentMenu } from './';
 import classes from './StudioContentMenuWrapper.module.css';
-import type { StudioButtonTabType, StudioLinkTabType } from './types/StudioMenuTabType';
+import type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
+import type { StudioContentMenuLinkTabProps } from './StudioContentMenuLinkTab';
 
 export type StudioContentMenuWrapperProps<TabId extends string> = {
-  buttonTabs: StudioButtonTabType<TabId>[];
-  linkTabs: StudioLinkTabType<TabId>[];
+  buttonTabs: StudioContentMenuButtonTabProps<TabId>[];
+  linkTabs: StudioContentMenuLinkTabProps<TabId>[];
   selectedTabId: TabId;
   onChangeTab: (tabId: TabId) => void;
 };
@@ -19,10 +20,27 @@ export function StudioContentMenuWrapper<TabId extends string>({
   return (
     <div className={classes.contentMenuWrapper}>
       <StudioContentMenu selectedTabId={selectedTabId} onChangeTab={onChangeTab}>
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[0]} />
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[1]} />
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[2]} />
-        <StudioContentMenu.LinkTab contentTab={linkTabs[0]} />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[0].icon}
+          tabId={buttonTabs[0].tabId}
+          tabName={buttonTabs[0].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[1].icon}
+          tabId={buttonTabs[1].tabId}
+          tabName={buttonTabs[1].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[2].icon}
+          tabId={buttonTabs[2].tabId}
+          tabName={buttonTabs[2].tabName}
+        />
+        <StudioContentMenu.LinkTab
+          icon={linkTabs[0].icon}
+          tabId={linkTabs[0].tabId}
+          tabName={linkTabs[0].tabName}
+          renderTab={linkTabs[0].renderTab}
+        />
       </StudioContentMenu>
     </div>
   );
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.module.css
deleted file mode 100644
index 75337cf4120..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.linkTab {
-  gap: var(--tab-icon-title-gap);
-}
-
-.linkIcon {
-  display: flex;
-  align-items: center;
-  font-size: var(--fds-spacing-8);
-  color: var(--fds-semantic-text-neutral-default);
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.tsx
deleted file mode 100644
index ca8d38aba73..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/StudioLinkTab.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import type { StudioLinkTabType } from '../types/StudioMenuTabType';
-import classes from './StudioLinkTab.module.css';
-import { StudioMenuTab } from '../StudioMenuTab';
-import { StudioLink } from '@studio/components';
-import { StudioMenuTabContainer } from '../StudioMenuTabContainer';
-import { useStudioContentMenuContext } from '../context/StudioContentMenuContext';
-
-type StudioLinkTabProps<TabId extends string> = {
-  contentTab: StudioLinkTabType<TabId>;
-};
-
-export function StudioLinkTab<TabId extends string>({
-  contentTab,
-}: StudioLinkTabProps<TabId>): React.ReactElement {
-  const { selectedTabId, onChangeTab } = useStudioContentMenuContext();
-
-  return (
-    <StudioMenuTabContainer
-      contentTab={contentTab}
-      isTabSelected={selectedTabId === contentTab.tabId}
-      onClick={() => onChangeTab(contentTab.tabId)}
-    >
-      <StudioLink className={classes.linkTab} href={contentTab.to} tabIndex={-1}>
-        <div className={classes.linkIcon}>{contentTab.icon}</div>
-        <StudioMenuTab contentTab={contentTab} />
-      </StudioLink>
-    </StudioMenuTabContainer>
-  );
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/index.ts
deleted file mode 100644
index 8a35bd72e73..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioLinkTab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StudioLinkTab } from './StudioLinkTab';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.module.css
deleted file mode 100644
index 0083c6937bb..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-:root {
-  --tab-icon-title-gap: var(--fds-spacing-2);
-  --tab-display: flex;
-  --tab-align-items: center;
-  --tab-cursor: pointer;
-  --tab-width: 100%;
-}
-
-.selectedTab,
-.tab {
-  display: var(--tab-display);
-  align-items: var(--tab-align-items);
-  gap: var(--tab-icon-title-gap);
-  box-sizing: border-box;
-  border: solid 1px var(--fds-semantic-border-action-second-subtle);
-  padding: var(--fds-spacing-3);
-  width: var(--tab-width);
-  background-color: var(--fds-semantic-surface-action-second-subtle);
-  cursor: var(--tab-cursor);
-}
-
-.selectedTab {
-  border-left: var(--fds-border_radius-interactive) solid var(--semantic-surface-action-default);
-  background-color: white;
-}
-
-.tab:hover,
-.selectedTab:hover {
-  background-color: var(--fds-semantic-surface-action-no_fill-hover);
-}
-
-.tab:focus,
-.selectedTab:focus {
-  outline: none; /* Remove default focus outline */
-  border-color: var(--fds-border_width-tab_focus) var(--fds-semantic-surface-focus-default);
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.tsx
deleted file mode 100644
index 04ca5492920..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/StudioMenuTabContainer.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import type { ReactElement, ReactNode } from 'react';
-import classes from './StudioMenuTabContainer.module.css';
-import { moveFocus } from '../utils/dom-utils';
-import type { StudioMenuTabType } from '../types/StudioMenuTabType';
-
-type StudioMenuTabProps<TabId extends string> = {
-  children: ReactNode;
-  contentTab: StudioMenuTabType<TabId>;
-  isTabSelected: boolean;
-  onClick: (tabId: TabId) => void;
-};
-
-export function StudioMenuTabContainer<TabId extends string>({
-  children,
-  contentTab,
-  isTabSelected,
-  onClick,
-}: StudioMenuTabProps<TabId>): ReactElement {
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    moveFocus(event);
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      onClick(contentTab.tabId);
-    }
-  };
-
-  return (
-    <div
-      className={isTabSelected ? classes.selectedTab : classes.tab}
-      onClick={() => onClick(contentTab.tabId)}
-      role='tab'
-      tabIndex={isTabSelected ? 0 : -1}
-      onKeyDown={handleKeyDown}
-      title={contentTab.tabName}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/index.ts
deleted file mode 100644
index b77e4d1fdaa..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTabContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StudioMenuTabContainer } from './StudioMenuTabContainer';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/types/StudioMenuTabType.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/types/StudioMenuTabType.ts
deleted file mode 100644
index 84b65d3ad24..00000000000
--- a/frontend/libs/studio-components/src/components/StudioContentMenu/types/StudioMenuTabType.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-
-export type StudioButtonTabType<TabId extends string> = {
-  icon: ReactNode;
-  tabName: string;
-  tabId: TabId;
-};
-
-export type StudioLinkTabType<TabId extends string> = StudioButtonTabType<TabId> & {
-  to: string;
-};
-
-export type StudioMenuTabType<TabId extends string> =
-  | StudioButtonTabType<TabId>
-  | StudioLinkTabType<TabId>;
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.test.tsx
index 76ed63ecd6c..e6323e92ae5 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.test.tsx
@@ -6,6 +6,7 @@ import { mockPagesConfig } from '../../mocks/mockPagesConfig';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { RouterContext } from '../contexts/RouterContext';
 import type { PageName } from '../types/PageName';
+import { BrowserRouter } from 'react-router-dom';
 
 const navigateMock = jest.fn();
 
@@ -13,7 +14,7 @@ describe('ContentLibrary', () => {
   it('renders the ContentLibrary with landingPage by default', () => {
     renderContentLibrary();
     const libraryHeader = screen.getByRole('heading', {
-      name: textMock('app_content_library.landing_page.page_name'),
+      name: textMock('app_content_library.library_heading'),
     });
     const landingPageTitle = screen.getByRole('heading', {
       name: textMock('app_content_library.landing_page.title'),
@@ -52,8 +53,10 @@ describe('ContentLibrary', () => {
 
 const renderContentLibrary = (currentPage: PageName = undefined) => {
   render(
-    <RouterContext.Provider value={{ currentPage, navigate: navigateMock }}>
-      <ContentLibrary pages={mockPagesConfig} />
-    </RouterContext.Provider>,
+    <BrowserRouter>
+      <RouterContext.Provider value={{ currentPage, navigate: navigateMock }}>
+        <ContentLibrary pages={mockPagesConfig} />
+      </RouterContext.Provider>
+    </BrowserRouter>,
   );
 };
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.tsx
index 9937587edc4..de6561398f2 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.tsx
@@ -4,11 +4,10 @@ import type { PageComponent } from '../utils/router/RouterRouteMapper';
 import { RouterRouteMapperImpl } from '../utils/router/RouterRouteMapper';
 import type { PagePropsMap, PagesConfig } from '../types/PagesProps';
 import classes from './ContentLibrary.module.css';
-import { InfoBox } from './InfoBox';
-import { PagesRouter } from './PagesRouter';
 import { LibraryHeader } from './LibraryHeader';
 import { StudioHeading } from '@studio/components';
 import type { PageName } from '../types/PageName';
+import { LibraryContent } from './LibraryContent/LibraryContent';
 
 type ContentLibraryProps = {
   pages: PagesConfig;
@@ -34,22 +33,11 @@ function ContentLibraryForPage<T extends PageName = 'landingPage'>({
     router.configuredRoutes.get(currentPage);
   if (!Component) return <StudioHeading>404 Page Not Found</StudioHeading>; // Show the NotFound page from app-dev instead
 
-  const componentPropsAreExternal = currentPage !== 'landingPage';
-
-  const componentProps: Required<PagePropsMap>[T] =
-    componentPropsAreExternal && (pages[currentPage].props as Required<PagePropsMap>[T]);
-
   return (
     <div className={classes.libraryBackground}>
       <div className={classes.libraryContainer}>
         <LibraryHeader />
-        <div className={classes.libraryContent}>
-          <PagesRouter currentPage={currentPage} />
-          <div className={classes.component}>
-            <Component {...componentProps} />
-          </div>
-          <InfoBox pageName={currentPage} />
-        </div>
+        <LibraryContent Component={Component} pages={pages} currentPage={currentPage} />
       </div>
     </div>
   );
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.module.css
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.module.css
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.module.css
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.test.tsx
similarity index 95%
rename from frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.test.tsx
index a597e5ea34a..2927a6de35f 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { InfoBox } from './InfoBox';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import type { PageName } from '../../types/PageName';
+import type { PageName } from '../../../types/PageName';
 import { infoBoxConfigs } from './infoBoxConfigs';
 
 const pageNameMock: PageName = 'codeList';
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/infoBoxConfigs.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/infoBoxConfigs.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/infoBoxConfigs.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/infoBoxConfigs.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/LibraryContent.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/LibraryContent.tsx
new file mode 100644
index 00000000000..dd0c4453648
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/LibraryContent.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from '../ContentLibrary.module.css';
+import { PagesRouter } from './PagesRouter';
+import { InfoBox } from './InfoBox';
+import type { PagePropsMap, PagesConfig } from '../../types/PagesProps';
+import type { PageName } from '../../types/PageName';
+import type { PageComponent } from '../../utils/router/RouterRouteMapper';
+
+type LibraryContentProps<T extends PageName = 'landingPage'> = {
+  Component: PageComponent<Required<PagePropsMap>[T]>;
+  pages: PagesConfig;
+  currentPage: PageName;
+};
+
+export function LibraryContent<T extends PageName = 'landingPage'>({
+  Component,
+  pages,
+  currentPage,
+}: LibraryContentProps) {
+  const componentPropsAreExternal = currentPage !== 'landingPage';
+
+  const componentProps: Required<PagePropsMap>[T] =
+    componentPropsAreExternal && (pages[currentPage].props as Required<PagePropsMap>[T]);
+
+  return (
+    <div className={classes.libraryContent}>
+      <PagesRouter pageNames={getAllPageNamesFromPagesConfig(pages)} />
+      <div className={classes.component}>
+        <Component {...componentProps} />
+      </div>
+      <InfoBox pageName={currentPage} />
+    </div>
+  );
+}
+
+const getAllPageNamesFromPagesConfig = (pages: PagesConfig): PageName[] => {
+  const customPages = Object.keys(pages) as PageName[];
+  return ['landingPage', ...customPages];
+};
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.test.tsx
similarity index 52%
rename from frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.test.tsx
index 711ac30d150..c2da32bea5d 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.test.tsx
@@ -3,16 +3,21 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PagesRouter } from './PagesRouter';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import { RouterContext } from '../../contexts/RouterContext';
-import type { PageName } from '../../types/PageName';
+import { RouterContext } from '../../../contexts/RouterContext';
+import type { PageName } from '../../../types/PageName';
+import { BrowserRouter } from 'react-router-dom';
 
 const navigateMock = jest.fn();
 
 describe('PagesRouter', () => {
   it('renders the pages as navigation titles', () => {
     renderPagesRouter();
-    const codeListNavTitle = screen.getByText(textMock('app_content_library.code_lists.page_name'));
-    const imagesNavTitle = screen.getByText(textMock('app_content_library.images.page_name'));
+    const codeListNavTitle = screen.getByRole('tab', {
+      name: textMock('app_content_library.code_lists.page_name'),
+    });
+    const imagesNavTitle = screen.getByRole('tab', {
+      name: textMock('app_content_library.images.page_name'),
+    });
     expect(codeListNavTitle).toBeInTheDocument();
     expect(imagesNavTitle).toBeInTheDocument();
   });
@@ -20,24 +25,21 @@ describe('PagesRouter', () => {
   it('calls navigate from RouterContext when clicking on a page that is not selected', async () => {
     const user = userEvent.setup();
     renderPagesRouter();
-    const imagesNavTitle = screen.getByText(textMock('app_content_library.images.page_name'));
+    const imagesNavTitle = screen.getByRole('tab', {
+      name: textMock('app_content_library.images.page_name'),
+    });
     await user.click(imagesNavTitle);
     expect(navigateMock).toHaveBeenCalledTimes(1);
     expect(navigateMock).toHaveBeenCalledWith('images');
   });
-
-  it('returns null if trying to render an unknown pageName', () => {
-    const pageName: string = 'unknownPageName';
-    renderPagesRouter([pageName as PageName]);
-    const navTitle = screen.queryByText(pageName);
-    expect(navTitle).not.toBeInTheDocument();
-  });
 });
 
 const renderPagesRouter = (pageNames: PageName[] = ['codeList', 'images']) => {
   render(
-    <RouterContext.Provider value={{ currentPage: 'codeList', navigate: navigateMock }}>
-      <PagesRouter pageNames={pageNames} />
-    </RouterContext.Provider>,
+    <BrowserRouter>
+      <RouterContext.Provider value={{ currentPage: 'codeList', navigate: navigateMock }}>
+        <PagesRouter pageNames={pageNames} />
+      </RouterContext.Provider>
+    </BrowserRouter>,
   );
 };
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.tsx
new file mode 100644
index 00000000000..ae0e5641d17
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/PagesRouter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useRouterContext } from '../../../contexts/RouterContext';
+import type { PageName } from '../../../types/PageName';
+import { useContentTabs } from '../../../hooks/useLibraryMenuContentTabs';
+import { StudioContentMenu } from '@studio/components';
+
+type PagesRouterProps = {
+  pageNames: PageName[];
+};
+
+export function PagesRouter({ pageNames }: PagesRouterProps): React.ReactElement {
+  const { navigate, currentPage } = useRouterContext();
+  const { getContentTabs } = useContentTabs();
+
+  const handleNavigation = (pageToNavigateTo: PageName) => {
+    navigate(pageToNavigateTo);
+  };
+
+  return (
+    <StudioContentMenu selectedTabId={currentPage} onChangeTab={handleNavigation}>
+      {pageNames.map((pageName) => (
+        <StudioContentMenu.LinkTab
+          key={getContentTabs()[pageName].tabId}
+          icon={getContentTabs()[pageName].icon}
+          tabId={getContentTabs()[pageName].tabId}
+          tabName={getContentTabs()[pageName].tabName}
+          renderTab={getContentTabs()[pageName].renderTab}
+        />
+      ))}
+    </StudioContentMenu>
+  );
+}
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/PagesRouter/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/CodeList.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/CodeList.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/CodeList.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/CodeList.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/CodeList/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/Images.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/Images.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/Images.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/Images.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/Images/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.module.css
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.module.css
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.module.css
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/LandingPage.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/pages/LandingPage/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
index e7fec6680ac..25d5304ea77 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
@@ -1,13 +1,9 @@
 .libraryHeading {
-  padding: var(--fds-spacing-4);
-  border-bottom: solid 1px var(--fds-semantic-border-neutral-subtle);
-}
-
-.libraryLandingPageNavigation {
   display: flex;
   align-items: center;
   gap: var(--fds-spacing-1);
-  width: fit-content;
+  padding: var(--fds-spacing-4);
+  border-bottom: solid 1px var(--fds-semantic-border-neutral-subtle);
 }
 
 .headingIcon {
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
index 85dbbfa2553..e21e190d908 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
@@ -8,25 +8,14 @@ import { RouterContext } from '../../contexts/RouterContext';
 const navigateMock = jest.fn();
 
 describe('LibraryHeader', () => {
-  it('renders the landingPage header', () => {
+  it('renders the contentLibrary header', () => {
     renderLibraryHeader();
-    const landingPageIcon = screen.getByRole('img');
-    const landingPageHeader = screen.getByRole('heading', {
-      name: textMock('app_content_library.landing_page.page_name'),
+    const libraryIcon = screen.getByRole('img');
+    const libraryHeader = screen.getByRole('heading', {
+      name: textMock('app_content_library.library_heading'),
     });
-    expect(landingPageIcon).toBeInTheDocument();
-    expect(landingPageHeader).toBeInTheDocument();
-  });
-
-  it('calls navigate from useRouterContext when clicking on the header', async () => {
-    const user = userEvent.setup();
-    renderLibraryHeader();
-    const landingPageHeader = screen.getByRole('heading', {
-      name: textMock('app_content_library.landing_page.page_name'),
-    });
-    await user.click(landingPageHeader);
-    expect(navigateMock).toHaveBeenCalledTimes(1);
-    expect(navigateMock).toHaveBeenCalledWith('landingPage');
+    expect(libraryIcon).toBeInTheDocument();
+    expect(libraryHeader).toBeInTheDocument();
   });
 });
 
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
index 787b7813936..299ac11b248 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
@@ -9,10 +9,8 @@ export function LibraryHeader(): React.ReactElement {
 
   return (
     <div className={classes.libraryHeading}>
-      <div className={classes.libraryLandingPageNavigation}>
-        <BookIcon className={classes.headingIcon} />
-        <StudioHeading size='small'>{t('app_content_library.library_heading')}</StudioHeading>
-      </div>
+      <BookIcon className={classes.headingIcon} />
+      <StudioHeading size='small'>{t('app_content_library.library_heading')}</StudioHeading>
     </div>
   );
 }
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.tsx
deleted file mode 100644
index 8bd5be23535..00000000000
--- a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { useRouterContext } from '../../contexts/RouterContext';
-import type { PageName } from '../../types/PageName';
-import { useContentTabs } from '../../hooks/useLibraryMenuContentTabs';
-import { StudioContentMenu } from '@studio/components';
-
-type PagesRouterProps = {
-  currentPage: PageName;
-};
-
-export function PagesRouter({ currentPage }: PagesRouterProps): React.ReactElement {
-  const { navigate } = useRouterContext();
-  const { getContentTabs } = useContentTabs();
-
-  const handleNavigation = (pageToNavigateTo: PageName) => {
-    navigate(pageToNavigateTo);
-  };
-
-  return (
-    <StudioContentMenu selectedTabId={currentPage} onChangeTab={handleNavigation}>
-      {getContentTabs().map((contentTab) => (
-        <StudioContentMenu.LinkTab key={contentTab.tabId} contentTab={contentTab} />
-      ))}
-    </StudioContentMenu>
-  );
-}
diff --git a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
index 131bd3bedb4..d5d1cd1143a 100644
--- a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
+++ b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import type { PagesConfig } from '../types/PagesProps';
 import { ResourceContentLibraryImpl } from './ContentResourceLibraryImpl';
 import { textMock } from '@studio/testing/mocks/i18nMock';
+import { BrowserRouter } from 'react-router-dom';
 
 describe('ContentResourceLibraryImpl', () => {
   it('renders ContentResourceLibraryImpl with given pages', () => {
@@ -51,5 +52,5 @@ describe('ContentResourceLibraryImpl', () => {
 const renderContentResourceLibraryImpl = (pages: PagesConfig) => {
   const contentResourceLibraryImpl = new ResourceContentLibraryImpl({ pages });
   const { getContentResourceLibrary } = contentResourceLibraryImpl;
-  render(<div>{getContentResourceLibrary()}</div>);
+  render(<BrowserRouter>{getContentResourceLibrary()}</BrowserRouter>);
 };
diff --git a/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx b/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx
index cbae1a3c2b3..5f1ad56766f 100644
--- a/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx
+++ b/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx
@@ -1,35 +1,40 @@
 import React from 'react';
 import type { PageName } from '../types/PageName';
 import { BookIcon, CodeListsIcon, ImageIcon } from '@studio/icons';
-import type { StudioMenuTabType } from '@studio/components';
+import type { StudioContentMenuLinkTabProps } from '@studio/components';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { pageRouterQueryParamKey } from '../utils/router/QueryParamsRouter';
+
+type TabDictionary<T extends string> = Record<T, StudioContentMenuLinkTabProps<T>>;
 
 type useContentTabsReturnType = {
-  getContentTabs: () => StudioMenuTabType<PageName>[];
+  getContentTabs: () => TabDictionary<PageName>;
 };
 
 export const useContentTabs = (): useContentTabsReturnType => {
   const { t } = useTranslation();
-  const getContentTabs = (): StudioMenuTabType<PageName>[] => [
-    {
+
+  const getContentTabs = (): TabDictionary<PageName> => ({
+    landingPage: {
       tabName: t('app_content_library.landing_page.page_name'),
       tabId: 'landingPage',
       icon: <BookIcon />,
-      to: '',
+      renderTab: (props) => <Link to={`?${pageRouterQueryParamKey}=landingPage`} {...props} />,
     },
-    {
-      icon: <CodeListsIcon />,
-      tabId: 'codeList',
+    codeList: {
       tabName: t('app_content_library.code_lists.page_name'),
-      to: '',
+      tabId: 'codeList',
+      icon: <CodeListsIcon />,
+      renderTab: (props) => <Link to={`?${pageRouterQueryParamKey}=codeList`} {...props} />,
     },
-    {
-      icon: <ImageIcon />,
-      tabId: 'images',
+    images: {
       tabName: t('app_content_library.images.page_name'),
-      to: '',
+      tabId: 'images',
+      icon: <ImageIcon />,
+      renderTab: (props) => <Link to={`?${pageRouterQueryParamKey}=images`} {...props} />,
     },
-  ];
+  });
 
   return { getContentTabs };
 };
diff --git a/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts b/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
index 23c21e495da..3ebdb611691 100644
--- a/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
@@ -1,6 +1,6 @@
 import type { PageName } from '../../types/PageName';
 
-const pageRouterQueryParamKey: string = 'currentLibraryRoute';
+export const pageRouterQueryParamKey: string = 'currentLibraryRoute';
 
 export interface QueryParamsRouter {
   currentRoute: PageName;
diff --git a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
index f5d0c9e9752..96d83a6d2c3 100644
--- a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
@@ -1,6 +1,6 @@
 import { RouterRouteMapperImpl } from './RouterRouteMapper';
-import { LandingPage } from '../../ContentLibrary/pages/LandingPage';
-import { CodeList } from '../../ContentLibrary/pages/CodeList';
+import { LandingPage } from '../../ContentLibrary/LibraryContent/pages/LandingPage';
+import { CodeList } from '../../ContentLibrary/LibraryContent/pages/CodeList';
 import { mockPagesConfig } from '../../../mocks/mockPagesConfig';
 
 describe('RouterRouteMapperImpl', () => {
diff --git a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
index e05fca14698..8f91aca1cce 100644
--- a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
@@ -1,9 +1,9 @@
 import { type ComponentProps, type ReactElement } from 'react';
-import { CodeList } from '../../ContentLibrary/pages/CodeList';
+import { CodeList } from '../../ContentLibrary/LibraryContent/pages/CodeList';
 import type { PageName } from '../../types/PageName';
-import { LandingPage } from '../../ContentLibrary/pages/LandingPage';
+import { LandingPage } from '../../ContentLibrary/LibraryContent/pages/LandingPage';
 import type { PagesConfig } from '../../types/PagesProps';
-import { Images } from '../../ContentLibrary/pages/Images';
+import { Images } from '../../ContentLibrary/LibraryContent/pages/Images';
 
 type PageProps =
   | ComponentProps<typeof LandingPage>