diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 90bb9ae..db136c6 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -36,13 +36,16 @@ import MusicView from './views/MusicView';
 import Leaderboardiew from './views/LeaderboardView';
 import { LinearGradient } from 'expo-linear-gradient';
 import ScaffoldMobileCC from './components/UI/ScaffoldMobileCC';
+import ScaffoldDesktopCC from './components/UI/ScaffoldDesktopCC';
+import { createCustomNavigator } from './utils/navigator';
+import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
 
 const Stack = createNativeStackNavigator<AppRouteParams & { Loading: never; Oops: never }>();
-const Tab = createBottomTabNavigator<AppRouteParams & { Loading: never; Oops: never }>();
+const Tab = createCustomNavigator<AppRouteParams & { Loading: never; Oops: never }>();
 
 const Tabs = () => {
 	return (
-		<Tab.Navigator tabBar={ScaffoldMobileCC}>
+		<Tab.Navigator>
 			{Object.entries(tabRoutes).map(([name, route], routeIndex) => (
 				<Tab.Screen
 					key={'route-' + routeIndex}
@@ -61,33 +64,37 @@ const removeMe = () => '';
 const tabRoutes = {
 	Home: {
 		component: DiscoveryView,
-		options: { headerShown: false },
+		options: { headerShown: false, tabBarIcon: Discover },
 		link: '/',
 	},
-	Settings: {
-		component: SettingsTab,
-		options: { headerShown: false },
-		link: '/settings/:screen?',
-		stringify: {
-			screen: removeMe,
-		},
+	User: {
+		component: ProfileView,
+		options: { headerShown: false, tabBarIcon: User },
+		link: '/user',
 	},
-	User: { component: ProfileView, options: { headerShown: false }, link: '/user' },
 	Music: {
 		component: MusicView,
-		options: { headerShown: false },
+		options: { headerShown: false, tabBarIcon: Music },
 		link: '/music',
 	},
 	Search: {
 		component: SearchView,
-		options: { headerShown: false },
+		options: { headerShown: false, tabBarIcon: SearchNormal1 },
 		link: '/search/:query?',
 	},
 	Leaderboard: {
 		component: Leaderboardiew,
-		options: { title: translate('leaderboardTitle'), headerShown: false },
+		options: { title: translate('leaderboardTitle'), headerShown: false, tabBarIcon: Cup },
 		link: '/leaderboard',
 	},
+	Settings: {
+		component: SettingsTab,
+		options: { headerShown: false, tabBarIcon: Setting2, subMenu: true },
+		link: '/settings/:screen?',
+		stringify: {
+			screen: removeMe,
+		},
+	},
 };
 
 const protectedRoutes = {
@@ -178,7 +185,7 @@ const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
 
 		return (
 			<LinearGradient
-				colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', "#cdd4fd"]}
+				colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', '#cdd4fd']}
 				style={{
 					width: '100%',
 					height: '100%',
diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx
deleted file mode 100644
index 71f77c1..0000000
--- a/front/components/UI/ScaffoldCC.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Flex, useBreakpointValue } from 'native-base';
-import useColorScheme from '../../hooks/colorScheme';
-import { useQuery } from '../../Queries';
-import API from '../../API';
-import { LinearGradient } from 'expo-linear-gradient';
-import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
-import { LoadingView } from '../Loading';
-import ScaffoldDesktopCC from './ScaffoldDesktopCC';
-import ScaffoldMobileCC from './ScaffoldMobileCC';
-import { useAssets } from 'expo-asset';
-
-const menu = [
-	{ type: 'main', title: 'menuDiscovery', icon: Discover, link: 'Home' },
-	{ type: 'main', title: 'menuProfile', icon: User, link: 'User' },
-	{ type: 'main', title: 'menuMusic', icon: Music, link: 'Music' },
-	{ type: 'main', title: 'menuSearch', icon: SearchNormal1, link: 'Search' },
-	{ type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Leaderboard' },
-	{ type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' },
-] as const;
-
-type ScaffoldCCProps = {
-	children?: React.ReactNode;
-	routeName: string;
-	withPadding?: boolean;
-	enableScroll?: boolean;
-};
-
-const ScaffoldCC = ({
-	children,
-	routeName,
-}: ScaffoldCCProps) => {
-	const userQuery = useQuery(API.getUserInfo);
-	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
-
-	if (!userQuery.data || userQuery.isLoading) {
-		return <LoadingView />;
-	}
-	const colorScheme = useColorScheme();
-	const [logo] = useAssets(
-		colorScheme == 'light'
-			? require('../../assets/icon_light.png')
-			: require('../../assets/icon_dark.png')
-	);
-
-	return (
-		<Flex style={{ flex: 1, backgroundColor: '#cdd4fd' }}>
-			{screenSize === 'small' ? (
-				<ScaffoldMobileCC
-					routeName={routeName}
-					menu={menu}
-				>
-					{children}
-				</ScaffoldMobileCC>
-			) : (
-				<ScaffoldDesktopCC
-					user={userQuery.data}
-					logo={logo?.at(0)?.uri ?? ''}
-					routeName={routeName}
-					menu={menu}
-					widthPadding={true}
-				>
-					{children}
-				</ScaffoldDesktopCC>
-			)}
-		</Flex>
-	);
-};
-
-export default ScaffoldCC;
diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx
index 0ec7dbb..c2b62af 100644
--- a/front/components/UI/ScaffoldDesktopCC.tsx
+++ b/front/components/UI/ScaffoldDesktopCC.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { View, Image, Pressable } from 'react-native';
+import { View, Image, Pressable, useColorScheme } from 'react-native';
 import { Divider, Text, ScrollView, Row, useMediaQuery, useTheme } from 'native-base';
+import { useAssets } from 'expo-asset';
 import { useQuery } from '../../Queries';
 import API from '../../API';
 import ButtonBase from './ButtonBase';
@@ -12,20 +13,9 @@ import Spacer from './Spacer';
 import User from '../../models/User';
 import LogoutButtonCC from './LogoutButtonCC';
 import GlassmorphismCC from './Glassmorphism';
-
-type ScaffoldDesktopCCProps = {
-	widthPadding: boolean;
-	children?: React.ReactNode;
-	user: User;
-	logo: string;
-	routeName: string;
-	menu: readonly {
-		type: 'main' | 'sub';
-		title: TranslationKey;
-		icon: Icon;
-		link: string;
-	}[];
-};
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { ReactElement } from 'react';
+import { NavigationState, ParamListBase } from '@react-navigation/native';
 
 // TODO a tester avec un historique de plus de 3 musics différente mdr !!
 const SongHistory = (props: { quantity: number }) => {
@@ -81,15 +71,68 @@ const SongHistory = (props: { quantity: number }) => {
 	);
 };
 
-const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
-	const navigation = useNavigation();
-	const userQuery = useQuery(API.getUserInfo);
+const NavigationButton = ({
+	isSmallScreen,
+	label,
+	icon,
+	isFocused,
+	navigation,
+	route,
+}: {
+	isSmallScreen: boolean;
+	label: string;
+	icon?: Icon;
+	isFocused: boolean;
+	navigation: BottomTabBarProps['navigation'];
+	route: NavigationState['routes'][0];
+}) => {
+	return (
+		<View key={'key-menu-link-' + label}>
+			<ButtonBase
+				style={!isSmallScreen ? { width: '100%' } : {}}
+				type="menu"
+				icon={icon}
+				title={!isSmallScreen ? translate(label as any) : undefined}
+				isDisabled={isFocused}
+				iconVariant={isFocused ? 'Bold' : 'Outline'}
+				onPress={() => {
+					const event = navigation.emit({
+						type: 'tabPress',
+						target: route.key,
+						canPreventDefault: true,
+					});
+
+					if (!isFocused && !event.defaultPrevented) {
+						navigation.navigate(route.name, route.params);
+					}
+				}}
+				onLongPress={() => {
+					navigation.emit({
+						type: 'tabLongPress',
+						target: route.key,
+					});
+				}}
+			/>
+			<Spacer height="xs" />
+		</View>
+	);
+};
+
+const ScaffoldDesktopCC = ({
+	state,
+	descriptors,
+	navigation,
+	children,
+}: Omit<BottomTabBarProps, 'insets'> & { children: ReactElement }) => {
+	const user = useQuery(API.getUserInfo);
 	const [isSmallScreen] = useMediaQuery({ maxWidth: 1100 });
 	const { colors } = useTheme();
-
-	if (!userQuery.data || userQuery.isLoading) {
-		return <LoadingView />;
-	}
+	const colorScheme = useColorScheme();
+	const [logo] = useAssets(
+		colorScheme == 'light'
+			? require('../../assets/icon_light.png')
+			: require('../../assets/icon_dark.png')
+	);
 
 	return (
 		<View style={{ height: '100%', flexDirection: 'row', overflow: 'hidden' }}>
@@ -111,7 +154,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 						style={{ justifyContent: isSmallScreen ? 'center' : 'flex-start' }}
 					>
 						<Image
-							source={{ uri: props.logo }}
+							source={{ uri: logo?.at(0)?.uri ?? '' }}
 							style={{
 								aspectRatio: 1,
 								width: 32,
@@ -126,39 +169,21 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 					</Row>
 					<Spacer height="lg" />
 					<View>
-						{props.menu.map(
-							(value) =>
-								value.type === 'main' && (
-									<View key={'key-menu-link-' + value.title}>
-										<ButtonBase
-											style={!isSmallScreen ? { width: '100%' } : {}}
-											type="menu"
-											icon={value.icon}
-											title={
-												!isSmallScreen
-													? translate(
-															value.title as
-																| 'menuDiscovery'
-																| 'menuProfile'
-																| 'menuMusic'
-																| 'menuSearch'
-																| 'menuLeaderBoard'
-																| 'menuSettings'
-													  )
-													: undefined
-											}
-											isDisabled={props.routeName === value.link}
-											iconVariant={
-												props.routeName === value.link ? 'Bold' : 'Outline'
-											}
-											onPress={async () =>
-												navigation.navigate(value.link as never)
-											}
-										/>
-										<Spacer height="xs" />
-									</View>
-								)
-						)}
+						{state.routes.map((route, index) => {
+							const { options } = descriptors[route.key]!;
+
+							if ((options as any).subMenu) return null;
+							return (
+								<NavigationButton
+									isSmallScreen={!!isSmallScreen}
+									label={options.title !== undefined ? options.title : route.name}
+									icon={options.tabBarIcon as Icon}
+									isFocused={state.index === index}
+									navigation={navigation}
+									route={route}
+								/>
+							);
+						})}
 					</View>
 				</View>
 				{!isSmallScreen && (
@@ -182,59 +207,45 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 				<View style={!isSmallScreen ? { width: '100%' } : {}}>
 					<Divider my="2" _light={{ bg: colors.black[500] }} _dark={{ bg: '#FFF' }} />
 					<Spacer height="xs" />
-					{props.menu.map(
-						(value) =>
-							value.type === 'sub' && (
-								<ButtonBase
-									key={'key-menu-link-' + value.title}
-									style={!isSmallScreen ? { width: '100%' } : {}}
-									type="menu"
-									icon={value.icon}
-									title={
-										!isSmallScreen
-											? translate(
-													value.title as
-														| 'menuDiscovery'
-														| 'menuProfile'
-														| 'menuMusic'
-														| 'menuSearch'
-														| 'menuLeaderBoard'
-														| 'menuSettings'
-											  )
-											: undefined
-									}
-									isDisabled={props.routeName === value.link}
-									iconVariant={
-										props.routeName === value.link ? 'Bold' : 'Outline'
-									}
-									onPress={async () => navigation.navigate(value.link as never)}
-								/>
-							)
-					)}
+					{state.routes.map((route, index) => {
+						const { options } = descriptors[route.key]!;
+
+						if (!(options as any).subMenu) return null;
+						return (
+							<NavigationButton
+								isSmallScreen={!!isSmallScreen}
+								label={options.title !== undefined ? options.title : route.name}
+								icon={options.tabBarIcon as Icon}
+								isFocused={state.index === index}
+								navigation={navigation}
+								route={route}
+							/>
+						);
+					})}
 					<Spacer height="xs" />
 					<LogoutButtonCC
 						collapse={isSmallScreen}
-						isGuest={props.user.isGuest}
+						isGuest={user.data?.isGuest}
 						style={!isSmallScreen ? { width: '100%' } : {}}
 						buttonType={'menu'}
 					/>
 				</View>
 			</View>
 			<ScrollView style={{ flex: 1, maxHeight: '100%' }} contentContainerStyle={{ flex: 1 }}>
-				<GlassmorphismCC
+				<View
 					style={{
 						backgroundColor: colors.coolGray[500],
 						flex: 1,
 						margin: 8,
 						marginBottom: 0,
 						marginLeft: 0,
-						padding: props.widthPadding ? 20 : 0,
+						padding: 20,
 						borderRadius: 12,
 						minHeight: 'auto',
 					}}
 				>
-					{props.children}
-				</GlassmorphismCC>
+					{children}
+				</View>
 				<Spacer height="xs" />
 			</ScrollView>
 		</View>
diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx
index d286b61..766482d 100644
--- a/front/components/UI/ScaffoldMobileCC.tsx
+++ b/front/components/UI/ScaffoldMobileCC.tsx
@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import { Flex, useMediaQuery, useTheme } from 'native-base';
 import ButtonBase from './ButtonBase';
-import { Discover } from 'iconsax-react-native';
+import { Discover, Icon } from 'iconsax-react-native';
 import { translate } from '../../i18n/i18n';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { ComponentProps } from 'react';
@@ -25,13 +25,14 @@ const ScaffoldMobileCC = ({ state, descriptors, navigation }: BottomTabBarProps)
 				{state.routes.map((route, index) => {
 					const { options } = descriptors[route.key]!;
 					const label = options.title !== undefined ? options.title : route.name;
+					const icon = options.tabBarIcon as Icon;
 					const isFocused = state.index === index;
 
 					return (
 						<ButtonBase
 							key={'key-menu-link-' + label}
 							type="menu"
-							icon={Discover}
+							icon={icon}
 							title={
 								isFocused && !isSmallScreen ? translate(label as any) : undefined
 							}
diff --git a/front/utils/navigator.tsx b/front/utils/navigator.tsx
index 2508182..5b3124a 100644
--- a/front/utils/navigator.tsx
+++ b/front/utils/navigator.tsx
@@ -18,6 +18,8 @@ import type {
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 
 import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
+import { useBreakpointValue } from 'native-base';
+import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
 
 type Props = DefaultNavigatorOptions<
 	ParamListBase,
@@ -56,15 +58,26 @@ function BottomTabNavigator({
 		screenOptions,
 	});
 
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	return (
 		<NavigationContent>
-			<BottomTabView
-				{...rest}
-				state={state}
-				navigation={navigation}
-				descriptors={descriptors}
-				sceneContainerStyle={sceneContainerStyle}
-			/>
+			{screenSize === 'small' ? (
+				<BottomTabView
+					tabBar={ScaffoldMobileCC}
+					{...rest}
+					state={state}
+					navigation={navigation}
+					descriptors={descriptors}
+					sceneContainerStyle={sceneContainerStyle}
+				/>
+			) : (
+				<ScaffoldDesktopCC
+					state={state}
+					navigation={navigation}
+					descriptors={descriptors}>
+					{descriptors[state.routes[state.index]!.key]!.render()}
+				</ScaffoldDesktopCC>
+			)}
 		</NavigationContent>
 	);
 }