diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index 28656688c..4cb5991d9 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -8,6 +8,7 @@ import {
   Platform,
   PlatformSwitch,
   defaultHostsMapper,
+  useMobileView,
   usePlatformNavigation,
 } from '@graasp/ui';
 
@@ -48,6 +49,7 @@ type Props = { children: JSX.Element | (JSX.Element & string) };
 const Main = ({ children }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const theme = useTheme();
+  const { isMobile } = useMobileView();
 
   const itemId = useParams()[ITEM_ID_PARAMS];
 
@@ -90,8 +92,12 @@ const Main = ({ children }: Props): JSX.Element => {
           id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
           selected={Platform.Builder}
           platformsProps={platformProps}
-          color={theme.palette.primary.main}
-          accentColor={theme.palette.secondary.main}
+          color={
+            isMobile ? theme.palette.primary.main : theme.palette.secondary.main
+          }
+          accentColor={
+            isMobile ? theme.palette.secondary.main : theme.palette.primary.main
+          }
         />
       }
     >