diff --git a/package.json b/package.json
index 7f79b122..6b6b2703 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@graasp/query-client": "2.7.1",
     "@graasp/sdk": "4.1.0",
     "@graasp/translations": "1.25.2",
-    "@graasp/ui": "4.9.0",
+    "@graasp/ui": "4.9.1",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.15.11",
diff --git a/src/modules/header/HeaderNavigation.tsx b/src/modules/header/HeaderNavigation.tsx
deleted file mode 100644
index 8cff840d..00000000
--- a/src/modules/header/HeaderNavigation.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { Stack, Typography, styled } from '@mui/material';
-
-import {
-  GraaspLogo,
-  Platform,
-  PlatformSwitch,
-  defaultHostsMapper,
-  useMobileView,
-  usePlatformNavigation,
-} from '@graasp/ui';
-
-import { APP_NAME, GRAASP_LOGO_HEADER_HEIGHT } from '@/config/constants';
-import {
-  GRAASP_ANALYTICS_HOST,
-  GRAASP_BUILDER_HOST,
-  GRAASP_LIBRARY_HOST,
-} from '@/config/env';
-import {
-  APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
-  APP_NAVIGATION_PLATFORM_SWITCH_ID,
-} from '@/config/selectors';
-
-// small converter for HOST_MAP into a usePlatformNavigation mapper
-export const platformsHostsMap = defaultHostsMapper({
-  [Platform.Builder]: GRAASP_BUILDER_HOST,
-  [Platform.Library]: GRAASP_LIBRARY_HOST,
-  [Platform.Analytics]: GRAASP_ANALYTICS_HOST,
-});
-
-const StyledLink = styled(Link)(() => ({
-  textDecoration: 'none',
-  color: 'inherit',
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-interface HeaderNavigationProps {
-  rootId?: string;
-  topItemName?: string;
-}
-
-export const HeaderNavigation = ({
-  rootId = undefined, // this makes eslint happy with react/require-default-props
-  topItemName = '',
-}: HeaderNavigationProps): JSX.Element => {
-  const getNavigationEvents = usePlatformNavigation(platformsHostsMap, rootId);
-  const { isMobile } = useMobileView();
-
-  const platformProps = {
-    [Platform.Builder]: {
-      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Builder],
-      ...getNavigationEvents(Platform.Builder),
-    },
-    [Platform.Player]: {
-      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Player],
-      href: '/',
-    },
-    [Platform.Library]: {
-      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Library],
-      ...getNavigationEvents(Platform.Library),
-    },
-    [Platform.Analytics]: {
-      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Analytics],
-      ...getNavigationEvents(Platform.Analytics),
-    },
-  };
-  return (
-    <Stack direction="row" alignItems="center" spacing={2}>
-      <StyledLink to="/">
-        <GraaspLogo height={GRAASP_LOGO_HEADER_HEIGHT} sx={{ fill: 'white' }} />
-        {!isMobile && (
-          <Typography variant="h6" color="inherit" ml={1}>
-            {APP_NAME}
-          </Typography>
-        )}
-      </StyledLink>
-      <PlatformSwitch
-        id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
-        selected={Platform.Player}
-        platformsProps={platformProps}
-        disabledColor="#999"
-      />
-      {!isMobile && <Typography>{topItemName}</Typography>}
-    </Stack>
-  );
-};
-
-export default HeaderNavigation;
diff --git a/src/modules/header/HeaderRightContent.tsx b/src/modules/header/HeaderRightContent.tsx
deleted file mode 100644
index 0e86d197..00000000
--- a/src/modules/header/HeaderRightContent.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import UserSwitchWrapper from '@/modules/userSwitch/UserSwitchWrapper';
-
-const HeaderRightContent = (): JSX.Element => <UserSwitchWrapper />;
-
-export default HeaderRightContent;
diff --git a/src/modules/layout/PageWrapper.tsx b/src/modules/layout/PageWrapper.tsx
index b91cbb17..297f9e48 100644
--- a/src/modules/layout/PageWrapper.tsx
+++ b/src/modules/layout/PageWrapper.tsx
@@ -1,6 +1,6 @@
 import { Link, Outlet, useParams } from 'react-router-dom';
 
-import { Typography, styled } from '@mui/material';
+import { Typography, styled, useTheme } from '@mui/material';
 
 import { Context } from '@graasp/sdk';
 import {
@@ -8,6 +8,7 @@ import {
   Platform,
   PlatformSwitch,
   defaultHostsMapper,
+  useMobileView,
   usePlatformNavigation,
 } from '@graasp/ui';
 
@@ -52,7 +53,8 @@ const LinkComponent = ({
 
 const PageWrapper = (): JSX.Element => {
   const { t } = usePlayerTranslation();
-
+  const theme = useTheme();
+  const { isMobile } = useMobileView();
   const { rootId } = useParams();
   const { data: item } = hooks.useItem();
   const getNavigationEvents = usePlatformNavigation(platformsHostsMap, rootId);
@@ -90,6 +92,16 @@ const PageWrapper = (): JSX.Element => {
             selected={Platform.Player}
             platformsProps={platformProps}
             disabledColor="#999"
+            color={
+              isMobile
+                ? theme.palette.primary.main
+                : theme.palette.secondary.main
+            }
+            accentColor={
+              isMobile
+                ? theme.palette.secondary.main
+                : theme.palette.primary.main
+            }
           />
         }
         headerLeftContent={<Typography noWrap>{item?.name}</Typography>}
diff --git a/yarn.lock b/yarn.lock
index 3c37ecc7..3c8c3fdf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1279,9 +1279,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.9.0":
-  version: 4.9.0
-  resolution: "@graasp/ui@npm:4.9.0"
+"@graasp/ui@npm:4.9.1":
+  version: 4.9.1
+  resolution: "@graasp/ui@npm:4.9.1"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.1.1"
     "@ag-grid-community/react": "npm:^31.1.1"
@@ -1313,7 +1313,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/e4c3fc8497e35ad28e91098d475029479174cf9e7090bf9061700e5b7f04ce2a9fc584fa9d1ce29e13b03184bf513a54ee4bed7b682a070f76ba378deb056c57
+  checksum: 10/a101ff9b7a6365d9959c331f07a77f1f96bb0293bd354763a1633b719162f3e57c709990c014f42639184f78a30fb5077837a820cb6d7abde13267f126510731
   languageName: node
   linkType: hard
 
@@ -6409,7 +6409,7 @@ __metadata:
     "@graasp/query-client": "npm:2.7.1"
     "@graasp/sdk": "npm:4.1.0"
     "@graasp/translations": "npm:1.25.2"
-    "@graasp/ui": "npm:4.9.0"
+    "@graasp/ui": "npm:4.9.1"
     "@mui/icons-material": "npm:5.15.11"
     "@mui/lab": "npm:5.0.0-alpha.151"
     "@mui/material": "npm:5.15.11"