From 77f0c2f06f9c52e0520664c3134bdf54c4f7b998 Mon Sep 17 00:00:00 2001
From: mathysPaul <mathys.paul@epitech.eu>
Date: Fri, 27 Oct 2023 20:50:05 +0200
Subject: [PATCH] [add]: LinkBase && PopupCC, starting theme management (light
 and dark) and translation

---
 front/Theme.tsx                               |  29 +
 front/components/GtkUI/Element.tsx            |  15 +-
 front/components/GtkUI/ElementTypes.tsx       |   5 +-
 front/components/ScoreGraph.tsx               | 711 +-----------------
 front/components/UI/ButtonBase.tsx            |  13 +-
 front/components/UI/ButtonMenuBase.tsx        | 161 ++++
 front/components/UI/CheckboxBase.tsx          |  69 +-
 front/components/UI/Glassmorphism.tsx         |   2 +-
 front/components/UI/InteractiveBase.tsx       |   7 +-
 front/components/UI/LinkBase.tsx              |  99 ++-
 front/components/UI/PopupCC.tsx               |  20 +-
 front/components/UI/Scaffold.tsx              |  28 +-
 front/components/UI/ScaffoldAuth.tsx          |  44 +-
 front/components/UI/ScaffoldCC.tsx            |  58 +-
 front/components/UI/ScaffoldDesktopCC.tsx     | 288 ++++---
 front/components/UI/ScaffoldMobileCC.tsx      | 110 ++-
 front/components/UI/SeparatorBase.tsx         |  26 +-
 front/components/UI/SettingsBase.tsx          |  15 +-
 front/components/UI/TextFieldBase.tsx         |  17 +-
 front/i18n/Translations.ts                    |  36 +
 front/package.json                            |   2 +-
 front/views/ProfileView.tsx                   |   8 +-
 front/views/SigninView.tsx                    |  19 +-
 front/views/SignupView.tsx                    |   8 +-
 front/views/V2/DiscoveryView.tsx              |   1 -
 .../views/settings/NotificationsSettings.tsx  |  11 +-
 front/views/settings/PreferencesSettings.tsx  |  13 +-
 front/views/settings/PrivacySettings.tsx      |   9 +-
 front/views/settings/SettingsPremium.tsx      |   9 +-
 front/views/settings/SettingsProfile.tsx      |  14 +-
 front/views/settings/SettingsView.tsx         |  24 +-
 front/yarn.lock                               |  19 +-
 32 files changed, 739 insertions(+), 1151 deletions(-)
 create mode 100644 front/components/UI/ButtonMenuBase.tsx

diff --git a/front/Theme.tsx b/front/Theme.tsx
index 27cf7fe..fbfd9cf 100644
--- a/front/Theme.tsx
+++ b/front/Theme.tsx
@@ -4,6 +4,34 @@ import { useEffect } from 'react';
 
 const ThemeProvider = ({ children }: { children: JSX.Element }) => {
 	const colorScheme = useColorScheme();
+	const lightGlassmorphism = {
+		50: 'rgba(255,255,255,0.05)',
+		100: 'rgba(255,255,255,0.1)',
+		200: 'rgba(255,255,255,0.2)',
+		300: 'rgba(255,255,255,0.3)',
+		400: 'rgba(255,255,255,0.4)',
+		500: 'rgba(255,255,255,0.5)',
+		600: 'rgba(255,255,255,0.6)',
+		700: 'rgba(255,255,255,0.7)',
+		800: 'rgba(255,255,255,0.8)',
+		900: 'rgba(255,255,255,0.9)',
+	};
+	const darkGlassmorphism = {
+		50: 'rgba(16,16,20,0.05)',
+		100: 'rgba(16,16,20,0.1)',
+		200: 'rgba(16,16,20,0.2)',
+		300: 'rgba(16,16,20,0.3)',
+		400: 'rgba(16,16,20,0.4)',
+		500: 'rgba(16,16,20,0.5)',
+		600: 'rgba(16,16,20,0.6)',
+		700: 'rgba(16,16,20,0.7)',
+		800: 'rgba(16,16,20,0.8)',
+		900: 'rgba(16,16,20,0.9)',
+	};
+
+	const glassmorphism = colorScheme === 'light'
+		? lightGlassmorphism
+		: darkGlassmorphism
 
 	return (
 		<NativeBaseProvider
@@ -102,6 +130,7 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => {
 						800: '#6b2124',
 						900: '#531a1c',
 					},
+					coolGray: glassmorphism,
 				},
 				components: {
 					Button: {
diff --git a/front/components/GtkUI/Element.tsx b/front/components/GtkUI/Element.tsx
index 3931438..9ae5882 100644
--- a/front/components/GtkUI/Element.tsx
+++ b/front/components/GtkUI/Element.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { ElementProps } from './ElementTypes';
 import { RawElement } from './RawElement';
-import { View, Column } from 'native-base';
+import { View, Column, useTheme } from 'native-base';
 import { StyleSheet } from 'react-native';
 import InteractiveBase from '../UI/InteractiveBase';
 
 export const Element = <T extends ElementProps>(props: T) => {
 	let actionFunction: (() => void) | null | undefined = null;
 	const [dropdownValue, setDropdownValue] = useState(false);
+	const { colors } = useTheme();
 
 	switch (props.type) {
 		case 'text':
@@ -32,28 +33,28 @@ export const Element = <T extends ElementProps>(props: T) => {
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		onHover: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(32, 32, 40, 0.50)',
+			backgroundColor: colors.coolGray[700],
 		},
 		onPressed: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		Disabled: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 	});
 
@@ -70,7 +71,7 @@ export const Element = <T extends ElementProps>(props: T) => {
 					<RawElement element={props} />
 				</InteractiveBase>
 				{props.type === 'sectionDropdown' && dropdownValue && (
-					<View backgroundColor={'rgba(16,16,20,0.3)'}>
+					<View>
 						{props.data.section.map((value, index) => (
 							<View
 								key={value?.toString() + index.toString()}
@@ -89,7 +90,7 @@ export const Element = <T extends ElementProps>(props: T) => {
 		);
 	}
 	return (
-		<View style={{ backgroundColor: 'rgba(16, 16, 20, 0.50)' }}>
+		<View style={{ backgroundColor: colors.coolGray[500] }}>
 			<RawElement element={props} />
 		</View>
 	);
diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx
index 7ed5e74..b10e1d8 100644
--- a/front/components/GtkUI/ElementTypes.tsx
+++ b/front/components/GtkUI/ElementTypes.tsx
@@ -1,4 +1,4 @@
-import { Select, Switch, Text, Icon, Row, Slider } from 'native-base';
+import { Select, Switch, Text, Icon, Row, Slider, useTheme } from 'native-base';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useWindowDimensions } from 'react-native';
 
@@ -101,12 +101,13 @@ export const getElementDropdownNode = (
 	disabled: boolean
 ) => {
 	const layout = useWindowDimensions();
+	const { colors } = useTheme();
 	return (
 		<Select
 			selectedValue={value}
 			onValueChange={onSelect}
 			defaultValue={defaultValue}
-			bgColor={'rgba(16,16,20,0.5)'}
+			bgColor={colors.coolGray[500]}
 			variant="filled"
 			isDisabled={disabled}
 			width={layout.width > 650 ? '200' : '100'}
diff --git a/front/components/ScoreGraph.tsx b/front/components/ScoreGraph.tsx
index cb908d6..1dca4eb 100644
--- a/front/components/ScoreGraph.tsx
+++ b/front/components/ScoreGraph.tsx
@@ -22,709 +22,6 @@ const formatScoreDate = (playDate: Date): string => {
 	return `${playDate.getDate()}`;
 };
 
-const fakeData = [
-	{
-		score: 47,
-		songID: 34,
-		userID: 18,
-		playDate: new Date('2023-10-20 8:27:21'),
-		difficulties: 1,
-	},
-	{
-		score: 1,
-		songID: 603,
-		userID: 18,
-		playDate: new Date('2023-09-13 22:56:45'),
-		difficulties: 1,
-	},
-	{
-		score: 93,
-		songID: 601,
-		userID: 18,
-		playDate: new Date('2023-10-11 5:30:13'),
-		difficulties: 5,
-	},
-	{
-		score: 55,
-		songID: 456,
-		userID: 18,
-		playDate: new Date('2023-09-10 23:06:09'),
-		difficulties: 4,
-	},
-	{
-		score: 2,
-		songID: 345,
-		userID: 18,
-		playDate: new Date('2023-09-23 18:33:24'),
-		difficulties: 2,
-	},
-	{
-		score: 47,
-		songID: 625,
-		userID: 18,
-		playDate: new Date('2023-09-09 7:16:46'),
-		difficulties: 1,
-	},
-	{
-		score: 27,
-		songID: 234,
-		userID: 18,
-		playDate: new Date('2023-09-06 15:56:53'),
-		difficulties: 5,
-	},
-	{
-		score: 85,
-		songID: 866,
-		userID: 18,
-		playDate: new Date('2023-09-08 8:56:44'),
-		difficulties: 2,
-	},
-	{
-		score: 28,
-		songID: 484,
-		userID: 18,
-		playDate: new Date('2023-09-12 6:05:32'),
-		difficulties: 4,
-	},
-	{
-		score: 5,
-		songID: 443,
-		userID: 18,
-		playDate: new Date('2023-10-01 11:57:09'),
-		difficulties: 3,
-	},
-	{
-		score: 14,
-		songID: 109,
-		userID: 18,
-		playDate: new Date('2023-09-03 22:54:07'),
-		difficulties: 3,
-	},
-	{
-		score: 57,
-		songID: 892,
-		userID: 18,
-		playDate: new Date('2023-09-13 23:22:34'),
-		difficulties: 5,
-	},
-	{
-		score: 7,
-		songID: 164,
-		userID: 18,
-		playDate: new Date('2023-09-02 0:15:13'),
-		difficulties: 2,
-	},
-	{
-		score: 42,
-		songID: 761,
-		userID: 18,
-		playDate: new Date('2023-09-10 18:25:19'),
-		difficulties: 3,
-	},
-	{
-		score: 49,
-		songID: 82,
-		userID: 18,
-		playDate: new Date('2023-09-12 12:51:15'),
-		difficulties: 4,
-	},
-	{
-		score: 83,
-		songID: 488,
-		userID: 18,
-		playDate: new Date('2023-10-28 7:56:31'),
-		difficulties: 5,
-	},
-	{
-		score: 91,
-		songID: 648,
-		userID: 18,
-		playDate: new Date('2023-09-21 10:16:33'),
-		difficulties: 4,
-	},
-	{
-		score: 67,
-		songID: 210,
-		userID: 18,
-		playDate: new Date('2023-09-14 8:04:50'),
-		difficulties: 1,
-	},
-	{
-		score: 31,
-		songID: 274,
-		userID: 18,
-		playDate: new Date('2023-09-10 11:24:28'),
-		difficulties: 4,
-	},
-	{
-		score: 29,
-		songID: 930,
-		userID: 18,
-		playDate: new Date('2023-10-06 0:05:43'),
-		difficulties: 5,
-	},
-	{
-		score: 51,
-		songID: 496,
-		userID: 18,
-		playDate: new Date('2023-10-14 9:43:14'),
-		difficulties: 1,
-	},
-	{
-		score: 56,
-		songID: 370,
-		userID: 18,
-		playDate: new Date('2023-10-18 19:25:59'),
-		difficulties: 2,
-	},
-	{
-		score: 29,
-		songID: 333,
-		userID: 18,
-		playDate: new Date('2023-09-11 4:26:44'),
-		difficulties: 4,
-	},
-	{
-		score: 95,
-		songID: 921,
-		userID: 18,
-		playDate: new Date('2023-10-30 12:58:50'),
-		difficulties: 1,
-	},
-	{
-		score: 37,
-		songID: 80,
-		userID: 18,
-		playDate: new Date('2023-09-16 7:17:57'),
-		difficulties: 4,
-	},
-	{
-		score: 90,
-		songID: 134,
-		userID: 18,
-		playDate: new Date('2023-09-03 9:00:04'),
-		difficulties: 1,
-	},
-	{
-		score: 51,
-		songID: 497,
-		userID: 18,
-		playDate: new Date('2023-09-31 19:34:43'),
-		difficulties: 4,
-	},
-	{
-		score: 95,
-		songID: 368,
-		userID: 18,
-		playDate: new Date('2023-09-12 20:12:50'),
-		difficulties: 4,
-	},
-	{
-		score: 55,
-		songID: 247,
-		userID: 18,
-		playDate: new Date('2023-09-16 2:45:13'),
-		difficulties: 1,
-	},
-	{
-		score: 26,
-		songID: 725,
-		userID: 18,
-		playDate: new Date('2023-09-28 22:59:31'),
-		difficulties: 2,
-	},
-	{
-		score: 82,
-		songID: 952,
-		userID: 18,
-		playDate: new Date('2023-10-01 6:31:47'),
-		difficulties: 1,
-	},
-	{
-		score: 88,
-		songID: 85,
-		userID: 18,
-		playDate: new Date('2023-10-12 2:33:11'),
-		difficulties: 5,
-	},
-	{
-		score: 12,
-		songID: 96,
-		userID: 18,
-		playDate: new Date('2023-09-03 14:00:33'),
-		difficulties: 4,
-	},
-	{
-		score: 100,
-		songID: 807,
-		userID: 18,
-		playDate: new Date('2023-09-03 0:53:11'),
-		difficulties: 3,
-	},
-	{
-		score: 88,
-		songID: 456,
-		userID: 18,
-		playDate: new Date('2023-10-06 9:17:15'),
-		difficulties: 5,
-	},
-	{
-		score: 10,
-		songID: 889,
-		userID: 18,
-		playDate: new Date('2023-10-15 12:19:16'),
-		difficulties: 3,
-	},
-	{
-		score: 76,
-		songID: 144,
-		userID: 18,
-		playDate: new Date('2023-09-10 2:56:49'),
-		difficulties: 4,
-	},
-	{
-		score: 60,
-		songID: 808,
-		userID: 18,
-		playDate: new Date('2023-09-24 10:22:33'),
-		difficulties: 1,
-	},
-	{
-		score: 94,
-		songID: 537,
-		userID: 18,
-		playDate: new Date('2023-10-03 23:22:29'),
-		difficulties: 2,
-	},
-	{
-		score: 100,
-		songID: 465,
-		userID: 18,
-		playDate: new Date('2023-09-16 19:12:58'),
-		difficulties: 2,
-	},
-	{
-		score: 85,
-		songID: 31,
-		userID: 18,
-		playDate: new Date('2023-10-17 5:29:49'),
-		difficulties: 2,
-	},
-	{
-		score: 98,
-		songID: 345,
-		userID: 18,
-		playDate: new Date('2023-09-11 1:51:49'),
-		difficulties: 1,
-	},
-	{
-		score: 81,
-		songID: 204,
-		userID: 18,
-		playDate: new Date('2023-10-21 2:46:56'),
-		difficulties: 2,
-	},
-	{
-		score: 21,
-		songID: 40,
-		userID: 18,
-		playDate: new Date('2023-09-27 4:00:00'),
-		difficulties: 2,
-	},
-	{
-		score: 91,
-		songID: 274,
-		userID: 18,
-		playDate: new Date('2023-09-14 16:09:49'),
-		difficulties: 5,
-	},
-	{
-		score: 99,
-		songID: 416,
-		userID: 18,
-		playDate: new Date('2023-10-27 1:56:16'),
-		difficulties: 5,
-	},
-	{
-		score: 58,
-		songID: 87,
-		userID: 18,
-		playDate: new Date('2023-09-08 19:30:20'),
-		difficulties: 5,
-	},
-	{
-		score: 90,
-		songID: 744,
-		userID: 18,
-		playDate: new Date('2023-10-18 23:47:55'),
-		difficulties: 2,
-	},
-	{
-		score: 69,
-		songID: 954,
-		userID: 18,
-		playDate: new Date('2023-10-07 1:55:52'),
-		difficulties: 5,
-	},
-	{
-		score: 75,
-		songID: 467,
-		userID: 18,
-		playDate: new Date('2023-09-10 8:37:22'),
-		difficulties: 4,
-	},
-	{
-		score: 41,
-		songID: 693,
-		userID: 18,
-		playDate: new Date('2023-09-11 5:15:16'),
-		difficulties: 2,
-	},
-	{
-		score: 56,
-		songID: 140,
-		userID: 18,
-		playDate: new Date('2023-10-06 5:32:46'),
-		difficulties: 2,
-	},
-	{
-		score: 88,
-		songID: 64,
-		userID: 18,
-		playDate: new Date('2023-09-31 20:24:30'),
-		difficulties: 1,
-	},
-	{
-		score: 99,
-		songID: 284,
-		userID: 18,
-		playDate: new Date('2023-10-07 17:51:19'),
-		difficulties: 5,
-	},
-	{
-		score: 47,
-		songID: 746,
-		userID: 18,
-		playDate: new Date('2023-09-18 17:45:56'),
-		difficulties: 5,
-	},
-	{
-		score: 80,
-		songID: 791,
-		userID: 18,
-		playDate: new Date('2023-10-21 1:19:45'),
-		difficulties: 1,
-	},
-	{
-		score: 21,
-		songID: 748,
-		userID: 18,
-		playDate: new Date('2023-09-04 9:09:27'),
-		difficulties: 4,
-	},
-	{
-		score: 75,
-		songID: 541,
-		userID: 18,
-		playDate: new Date('2023-09-19 23:08:05'),
-		difficulties: 2,
-	},
-	{
-		score: 31,
-		songID: 724,
-		userID: 18,
-		playDate: new Date('2023-09-09 2:01:29'),
-		difficulties: 4,
-	},
-	{
-		score: 24,
-		songID: 654,
-		userID: 18,
-		playDate: new Date('2023-09-04 1:27:00'),
-		difficulties: 1,
-	},
-	{
-		score: 55,
-		songID: 154,
-		userID: 18,
-		playDate: new Date('2023-09-10 17:48:17'),
-		difficulties: 3,
-	},
-	{
-		score: 4,
-		songID: 645,
-		userID: 18,
-		playDate: new Date('2023-09-11 18:51:11'),
-		difficulties: 2,
-	},
-	{
-		score: 52,
-		songID: 457,
-		userID: 18,
-		playDate: new Date('2023-09-30 19:12:52'),
-		difficulties: 3,
-	},
-	{
-		score: 68,
-		songID: 236,
-		userID: 18,
-		playDate: new Date('2023-10-08 8:56:08'),
-		difficulties: 3,
-	},
-	{
-		score: 44,
-		songID: 16,
-		userID: 18,
-		playDate: new Date('2023-09-22 10:39:34'),
-		difficulties: 1,
-	},
-	{
-		score: 59,
-		songID: 863,
-		userID: 18,
-		playDate: new Date('2023-09-17 4:12:43'),
-		difficulties: 1,
-	},
-	{
-		score: 18,
-		songID: 276,
-		userID: 18,
-		playDate: new Date('2023-09-08 15:47:54'),
-		difficulties: 2,
-	},
-	{
-		score: 64,
-		songID: 557,
-		userID: 18,
-		playDate: new Date('2023-10-17 0:13:46'),
-		difficulties: 1,
-	},
-	{
-		score: 2,
-		songID: 452,
-		userID: 18,
-		playDate: new Date('2023-09-26 5:13:31'),
-		difficulties: 5,
-	},
-	{
-		score: 99,
-		songID: 546,
-		userID: 18,
-		playDate: new Date('2023-09-11 16:31:37'),
-		difficulties: 1,
-	},
-	{
-		score: 75,
-		songID: 598,
-		userID: 18,
-		playDate: new Date('2023-10-12 22:56:24'),
-		difficulties: 4,
-	},
-	{
-		score: 4,
-		songID: 258,
-		userID: 18,
-		playDate: new Date('2023-09-20 8:26:50'),
-		difficulties: 2,
-	},
-	{
-		score: 50,
-		songID: 190,
-		userID: 18,
-		playDate: new Date('2023-09-20 20:07:06'),
-		difficulties: 4,
-	},
-	{
-		score: 9,
-		songID: 914,
-		userID: 18,
-		playDate: new Date('2023-10-30 16:57:14'),
-		difficulties: 5,
-	},
-	{
-		score: 7,
-		songID: 92,
-		userID: 18,
-		playDate: new Date('2023-09-18 20:33:44'),
-		difficulties: 5,
-	},
-	{
-		score: 94,
-		songID: 98,
-		userID: 18,
-		playDate: new Date('2023-10-15 5:05:18'),
-		difficulties: 5,
-	},
-	{
-		score: 94,
-		songID: 424,
-		userID: 18,
-		playDate: new Date('2023-09-22 9:59:12'),
-		difficulties: 5,
-	},
-	{
-		score: 14,
-		songID: 635,
-		userID: 18,
-		playDate: new Date('2023-09-02 6:58:39'),
-		difficulties: 4,
-	},
-	{
-		score: 99,
-		songID: 893,
-		userID: 18,
-		playDate: new Date('2023-10-05 16:09:33'),
-		difficulties: 1,
-	},
-	{
-		score: 94,
-		songID: 67,
-		userID: 18,
-		playDate: new Date('2023-09-01 8:11:37'),
-		difficulties: 2,
-	},
-	{
-		score: 21,
-		songID: 335,
-		userID: 18,
-		playDate: new Date('2023-10-03 2:07:44'),
-		difficulties: 3,
-	},
-	{
-		score: 47,
-		songID: 294,
-		userID: 18,
-		playDate: new Date('2023-09-13 17:32:46'),
-		difficulties: 4,
-	},
-	{
-		score: 89,
-		songID: 184,
-		userID: 18,
-		playDate: new Date('2023-09-04 5:20:13'),
-		difficulties: 2,
-	},
-	{
-		score: 28,
-		songID: 345,
-		userID: 18,
-		playDate: new Date('2023-09-07 6:35:11'),
-		difficulties: 3,
-	},
-	{
-		score: 93,
-		songID: 697,
-		userID: 18,
-		playDate: new Date('2023-09-29 0:07:10'),
-		difficulties: 2,
-	},
-	{
-		score: 58,
-		songID: 666,
-		userID: 18,
-		playDate: new Date('2023-09-09 3:03:02'),
-		difficulties: 2,
-	},
-	{
-		score: 73,
-		songID: 459,
-		userID: 18,
-		playDate: new Date('2023-10-05 7:33:54'),
-		difficulties: 4,
-	},
-	{
-		score: 50,
-		songID: 695,
-		userID: 18,
-		playDate: new Date('2023-09-26 18:26:55'),
-		difficulties: 4,
-	},
-	{
-		score: 39,
-		songID: 995,
-		userID: 18,
-		playDate: new Date('2023-10-24 17:34:09'),
-		difficulties: 3,
-	},
-	{
-		score: 25,
-		songID: 122,
-		userID: 18,
-		playDate: new Date('2023-10-25 18:54:12'),
-		difficulties: 1,
-	},
-	{
-		score: 29,
-		songID: 439,
-		userID: 18,
-		playDate: new Date('2023-09-15 0:44:48'),
-		difficulties: 3,
-	},
-	{
-		score: 79,
-		songID: 234,
-		userID: 18,
-		playDate: new Date('2023-09-13 13:53:16'),
-		difficulties: 2,
-	},
-	{
-		score: 0,
-		songID: 369,
-		userID: 18,
-		playDate: new Date('2023-10-30 22:54:34'),
-		difficulties: 1,
-	},
-	{
-		score: 25,
-		songID: 223,
-		userID: 18,
-		playDate: new Date('2023-09-13 1:09:11'),
-		difficulties: 3,
-	},
-	{
-		score: 55,
-		songID: 716,
-		userID: 18,
-		playDate: new Date('2023-09-12 19:43:23'),
-		difficulties: 3,
-	},
-	{
-		score: 100,
-		songID: 62,
-		userID: 18,
-		playDate: new Date('2023-09-11 15:33:40'),
-		difficulties: 5,
-	},
-	{
-		score: 74,
-		songID: 271,
-		userID: 18,
-		playDate: new Date('2023-10-25 23:14:51'),
-		difficulties: 3,
-	},
-	{
-		score: 22,
-		songID: 265,
-		userID: 18,
-		playDate: new Date('2023-09-17 15:01:38'),
-		difficulties: 1,
-	},
-	{
-		score: 79,
-		songID: 552,
-		userID: 18,
-		playDate: new Date('2023-09-28 20:13:14'),
-		difficulties: 5,
-	},
-	{
-		score: 50,
-		songID: 603,
-		userID: 18,
-		playDate: new Date('2023-09-06 3:52:21'),
-		difficulties: 5,
-	},
-];
-
 type GraphProps = {
 	songId: number,
 	since: Date
@@ -765,8 +62,7 @@ const Graph = ({songId, since}: GraphProps) => {
 		return <LoadingView />;
 	}
 
-	const dailyScore = calculateDailyAverages(fakeData);
-	// const dailyScore = calculateDailyAverages(scoresQuery.data.history);
+	const dailyScore = calculateDailyAverages(scoresQuery.data.history);
 	const scoresToSort = dailyScore
 		.filter((item: { playDate: Date; }) => item.playDate >= since);
 
@@ -834,6 +130,7 @@ const ScoreGraph = () => {
 		{ label: 'Dernière semaine', value: 'week' },
 		{ label: 'Dernier mois', value: 'month' },
 	];
+	const { colors } = useTheme();
 
 	const threeDaysAgo = new Date();
 	threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
@@ -870,7 +167,7 @@ const ScoreGraph = () => {
 					<Select
 						onValueChange={(selectedValue) => setSelectedSong(songs.data.find(song => selectedValue === song.name)?.id)}
 						defaultValue={songs.data.at(0)?.name}
-						bgColor={'rgba(16,16,20,0.5)'}
+						bgColor={colors.coolGray[500]}
 						variant="filled"
 						width={layout.width > 650 ? '200' : '150'}
 					>
@@ -887,7 +184,7 @@ const ScoreGraph = () => {
 					<Select
 						onValueChange={(itemValue) => setSelectedRange(itemValue)}
 						defaultValue={'3days'}
-						bgColor={'rgba(16,16,20,0.5)'}
+						bgColor={colors.coolGray[500]}
 						variant="filled"
 						width={layout.width > 650 ? '200' : '150'}
 					>
diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx
index 753b4e7..7509dcb 100644
--- a/front/components/UI/ButtonBase.tsx
+++ b/front/components/UI/ButtonBase.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from
 import InteractiveBase from './InteractiveBase';
 import { Text, useTheme } from 'native-base';
 import { Icon } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
 
 export type ButtonType = 'filled' | 'outlined' | 'menu';
 
@@ -29,6 +30,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
 }) => {
 	const { colors } = useTheme();
 	const [loading, setLoading] = useState(false);
+	const colorScheme = useColorScheme();
 
 	const styleButton = StyleSheet.create({
 		Default: {
@@ -74,21 +76,21 @@ const ButtonBase: React.FC<ButtonProps> = ({
 			shadowOpacity: 0.37,
 			shadowRadius: 7.49,
 			elevation: 12,
-			backgroundColor: 'rgba(16,16,20,0.4)',
+			backgroundColor: colors.coolGray[400],
 		},
 		onPressed: {
 			scale: 0.99,
 			shadowOpacity: 0.23,
 			shadowRadius: 2.62,
 			elevation: 4,
-			backgroundColor: 'rgba(16,16,20,0.6)',
+			backgroundColor: colors.coolGray[600],
 		},
 		Disabled: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16,16,20,0.5)',
+			backgroundColor: colors.coolGray[500],
 		},
 	});
 
@@ -125,12 +127,12 @@ const ButtonBase: React.FC<ButtonProps> = ({
 					{icon && (
 						<MyIcon
 							size={'18'}
-							color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
+							color={type === 'outlined' ? '#6075F9' : colorScheme === 'dark' || type === 'filled' ? '#FFFFFF' : colors.black[500] }
 							variant={iconVariant}
 						/>
 					)}
 					{iconImage && <Image source={{ uri: iconImage }} style={styles.icon} />}
-					{title && <Text style={styles.text} selectable={false}>{title}</Text>}
+					{title && <Text style={[styles.text, type === 'filled' ? {color: '#fff'} : {}]} selectable={false}>{title}</Text>}
 				</View>
 			)}
 		</InteractiveBase>
@@ -152,7 +154,6 @@ const styles = StyleSheet.create({
 		height: 18,
 	},
 	text: {
-		color: '#fff',
 		marginHorizontal: 8,
 	},
 });
diff --git a/front/components/UI/ButtonMenuBase.tsx b/front/components/UI/ButtonMenuBase.tsx
new file mode 100644
index 0000000..335234a
--- /dev/null
+++ b/front/components/UI/ButtonMenuBase.tsx
@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
+import InteractiveBase from './InteractiveBase';
+import { Text, useTheme } from 'native-base';
+import { Icon } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
+
+export type ButtonType = 'filled' | 'outlined' | 'menu';
+
+interface ButtonProps {
+	title?: string;
+	style?: StyleProp<ViewStyle>;
+	onPress?: () => Promise<void>;
+	isDisabled?: boolean;
+	icon?: Icon;
+	iconVariant?: 'Bold' | 'Outline';
+	iconImage?: string;
+	type?: ButtonType;
+}
+
+const ButtonBase: React.FC<ButtonProps> = ({
+	title,
+	style,
+	onPress,
+	isDisabled,
+	icon,
+	iconImage,
+	type = 'filled',
+	iconVariant = 'Outline',
+}) => {
+	const { colors } = useTheme();
+	const [loading, setLoading] = useState(false);
+	const colorScheme = useColorScheme();
+
+	const styleButton = StyleSheet.create({
+		Default: {
+			scale: 1,
+			shadowOpacity: 0.3,
+			shadowRadius: 4.65,
+			elevation: 8,
+			backgroundColor: colors.primary[400],
+		},
+		onHover: {
+			scale: 1.02,
+			shadowOpacity: 0.37,
+			shadowRadius: 7.49,
+			elevation: 12,
+			backgroundColor: colors.primary[500],
+		},
+		onPressed: {
+			scale: 0.98,
+			shadowOpacity: 0.23,
+			shadowRadius: 2.62,
+			elevation: 4,
+			backgroundColor: colors.primary[600],
+		},
+		Disabled: {
+			scale: 1,
+			shadowOpacity: 0.3,
+			shadowRadius: 4.65,
+			elevation: 8,
+			backgroundColor: colors.primary[400],
+		},
+	});
+
+	const styleMenu = StyleSheet.create({
+		Default: {
+			scale: 1,
+			shadowOpacity: 0,
+			shadowRadius: 0,
+			elevation: 0,
+			backgroundColor: 'transparent',
+		},
+		onHover: {
+			scale: 1.01,
+			shadowOpacity: 0.37,
+			shadowRadius: 7.49,
+			elevation: 12,
+			backgroundColor: colors.coolGray[400],
+		},
+		onPressed: {
+			scale: 0.99,
+			shadowOpacity: 0.23,
+			shadowRadius: 2.62,
+			elevation: 4,
+			backgroundColor: colors.coolGray[600],
+		},
+		Disabled: {
+			scale: 1,
+			shadowOpacity: 0.3,
+			shadowRadius: 4.65,
+			elevation: 8,
+			backgroundColor: colors.coolGray[500],
+		},
+	});
+
+	const typeToStyleAnimator = { filled: styleButton, outlined: styleButton, menu: styleMenu };
+	const MyIcon: Icon = icon as Icon;
+
+	return (
+		<InteractiveBase
+			style={[styles.container, style]}
+			styleAnimate={typeToStyleAnimator[type]}
+			onPress={async () => {
+				if (onPress && !isDisabled) {
+					setLoading(true);
+					await onPress();
+					setLoading(false);
+				}
+			}}
+			isDisabled={isDisabled}
+			isOutlined={type === 'outlined'}
+		>
+			{loading ? (
+				<ActivityIndicator
+					style={styles.content}
+					size="small"
+					color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
+				/>
+			) : (
+				<View
+					style={[
+						styles.content,
+						type === 'menu' ? { justifyContent: 'flex-start' } : {},
+					]}
+				>
+					{icon && (
+						<MyIcon
+							size={'18'}
+							color={type === 'outlined' ? '#6075F9' : colorScheme === 'light' ? colors.black[500] : '#FFFFFF'}
+							variant={iconVariant}
+						/>
+					)}
+					{iconImage && <Image source={{ uri: iconImage }} style={styles.icon} />}
+					{title && <Text style={styles.text} selectable={false}>{title}</Text>}
+				</View>
+			)}
+		</InteractiveBase>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		borderRadius: 8,
+	},
+	content: {
+		padding: 10,
+		justifyContent: 'center',
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+	icon: {
+		width: 18,
+		height: 18,
+	},
+	text: {
+		marginHorizontal: 8,
+	},
+});
+
+export default ButtonBase;
diff --git a/front/components/UI/CheckboxBase.tsx b/front/components/UI/CheckboxBase.tsx
index 12a19ec..2c6b861 100644
--- a/front/components/UI/CheckboxBase.tsx
+++ b/front/components/UI/CheckboxBase.tsx
@@ -13,11 +13,41 @@ interface CheckboxProps {
 }
 
 const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, setCheck }) => {
-	const theme = useTheme();
+	const { colors } = useTheme();
+
 	return (
 		<InteractiveBase
 			style={[styles.container, style]}
-			styleAnimate={styleGlassmorphism}
+			styleAnimate={{
+				Default: {
+					scale: 1,
+					shadowOpacity: 0.3,
+					shadowRadius: 4.65,
+					elevation: 8,
+					backgroundColor: colors.coolGray[500],
+				},
+				onHover: {
+					scale: 1.01,
+					shadowOpacity: 0.37,
+					shadowRadius: 7.49,
+					elevation: 12,
+					backgroundColor: colors.coolGray[400],
+				},
+				onPressed: {
+					scale: 0.99,
+					shadowOpacity: 0.23,
+					shadowRadius: 2.62,
+					elevation: 4,
+					backgroundColor: colors.coolGray[600],
+				},
+				Disabled: {
+					scale: 1,
+					shadowOpacity: 0.3,
+					shadowRadius: 4.65,
+					elevation: 8,
+					backgroundColor: colors.coolGray[500],
+				},
+			}}
 			onPress={async () => {
 				setCheck(!check);
 			}}
@@ -26,13 +56,13 @@ const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, set
 				{check ? (
 					<TickSquare
 						size="24"
-						color={color ? color : theme.colors.primary[400]}
+						color={color ?? colors.primary[400]}
 						variant="Bold"
 					/>
 				) : (
 					<AddSquare
 						size="24"
-						color={color ? color : theme.colors.primary[400]}
+						color={color ?? colors.primary[400]}
 						variant="Outline"
 					/>
 				)}
@@ -44,37 +74,6 @@ const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, set
 	);
 };
 
-const styleGlassmorphism = StyleSheet.create({
-	Default: {
-		scale: 1,
-		shadowOpacity: 0.3,
-		shadowRadius: 4.65,
-		elevation: 8,
-		backgroundColor: 'rgba(16,16,20,0.5)',
-	},
-	onHover: {
-		scale: 1.01,
-		shadowOpacity: 0.37,
-		shadowRadius: 7.49,
-		elevation: 12,
-		backgroundColor: 'rgba(16,16,20,0.4)',
-	},
-	onPressed: {
-		scale: 0.99,
-		shadowOpacity: 0.23,
-		shadowRadius: 2.62,
-		elevation: 4,
-		backgroundColor: 'rgba(16,16,20,0.6)',
-	},
-	Disabled: {
-		scale: 1,
-		shadowOpacity: 0.3,
-		shadowRadius: 4.65,
-		elevation: 8,
-		backgroundColor: 'rgba(16,16,20,0.5)',
-	},
-});
-
 const styles = StyleSheet.create({
 	container: {
 		borderRadius: 8,
diff --git a/front/components/UI/Glassmorphism.tsx b/front/components/UI/Glassmorphism.tsx
index c1cf797..95afa46 100644
--- a/front/components/UI/Glassmorphism.tsx
+++ b/front/components/UI/Glassmorphism.tsx
@@ -16,7 +16,7 @@ const GlassmorphismCC = ({ children, style }: GlassmorphismCCProps) => {
     return (
         <BlurView
             style={[{borderRadius: 12}, style]}
-            intensity={80}
+            intensity={60}
             tint={colorScheme === 'light' ? 'light' : 'dark'}
         >
             {children}
diff --git a/front/components/UI/InteractiveBase.tsx b/front/components/UI/InteractiveBase.tsx
index df2030f..9d4eba9 100644
--- a/front/components/UI/InteractiveBase.tsx
+++ b/front/components/UI/InteractiveBase.tsx
@@ -1,4 +1,4 @@
-import { Pressable } from 'native-base';
+import { Pressable, useTheme } from 'native-base';
 import React, { useRef } from 'react';
 import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
@@ -50,6 +50,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
 	isOutlined = false,
 	focusable = true,
 }) => {
+	const { colors } = useTheme();
 	const scaleAnimator = useRef(new Animated.Value(1)).current;
 	const scaleValue = scaleAnimator.interpolate({
 		inputRange: [0, 1, 2],
@@ -218,7 +219,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
 	};
 
 	const animatedStyle = {
-		backgroundColor: isOutlined ? 'rgba(0,0,0,0.3)' : backgroundColorValue,
+		backgroundColor: isOutlined ? colors.coolGray[200] : backgroundColorValue,
 		borderColor: isOutlined ? backgroundColorValue : 'transparent',
 		borderWidth: 2,
 		transform: [{ scale: scaleValue }],
@@ -228,7 +229,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
 	};
 
 	const disableStyle = {
-		backgroundColor: isOutlined ? 'rgba(0,0,0,0.3)' : styleAnimate.Disabled.backgroundColor,
+		backgroundColor: isOutlined ? colors.coolGray[200] : styleAnimate.Disabled.backgroundColor,
 		borderColor: isOutlined ? styleAnimate.Disabled.backgroundColor : 'transparent',
 		borderWidth: 2,
 		scale: styleAnimate.Disabled.scale,
diff --git a/front/components/UI/LinkBase.tsx b/front/components/UI/LinkBase.tsx
index 69f7424..8d5c004 100644
--- a/front/components/UI/LinkBase.tsx
+++ b/front/components/UI/LinkBase.tsx
@@ -1,23 +1,88 @@
-import React, { ReactNode, FunctionComponent } from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-	linkText: {
-		textDecorationLine: 'underline',
-		color: '#A3AFFC',
-		fontWeight: '700',
-	},
-});
+import React, { useRef } from 'react';
+import { TouchableOpacity, Animated, StyleSheet, Platform } from 'react-native';
+import { Column, Text, useTheme } from 'native-base';
 
 interface LinkBaseProps {
-	children: ReactNode;
-	onPress: () => void;
+    text: string;
+    onPress: () => void;
 }
 
-const LinkBase: FunctionComponent<LinkBaseProps> = ({ children, onPress }) => (
-	<TouchableOpacity onPress={onPress}>
-		<Text style={styles.linkText}>{children}</Text>
-	</TouchableOpacity>
-);
+const LinkBase: React.FC<LinkBaseProps> = ({ text, onPress }) => {
+    const underlineHeight = useRef(new Animated.Value(4)).current;
+    const opacity = useRef(new Animated.Value(1)).current;
+    const color = useRef(new Animated.Value(1)).current;
+	const theme = useTheme();
+
+    const handleMouseEnter = () => {
+        if (Platform.OS === 'web') {
+            Animated.timing(underlineHeight, {
+                toValue: 20,
+                duration: 250,
+                useNativeDriver: false
+            }).start();
+        }
+    };
+
+    const handleMouseLeave = () => {
+        if (Platform.OS === 'web') {
+            Animated.timing(underlineHeight, {
+                toValue: 4,
+                duration: 250,
+                useNativeDriver: false
+            }).start();
+        }
+    };
+
+    const handlePressIn = () => {
+        Animated.timing(opacity, {
+            toValue: 0.8,
+            duration: 250,
+            useNativeDriver: false
+        }).start();
+    };
+
+    const handlePressOut = () => {
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 250,
+            useNativeDriver: false
+        }).start();
+    };
+
+    return (
+        <TouchableOpacity
+            style={styles.container}
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <Column>
+                <Text>{text}</Text>
+                <Animated.View style={[
+                    styles.underline,
+                    {
+                        backgroundColor: theme.colors.primary[400],
+                        height: underlineHeight,
+                        opacity: opacity
+                    }
+                ]}/>
+            </Column>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    underline: {
+        width: '100%',
+        position: 'absolute',
+        zIndex: -1,
+        bottom: 0,
+    },
+});
 
 export default LinkBase;
diff --git a/front/components/UI/PopupCC.tsx b/front/components/UI/PopupCC.tsx
index 3865beb..5dc04f4 100644
--- a/front/components/UI/PopupCC.tsx
+++ b/front/components/UI/PopupCC.tsx
@@ -12,7 +12,7 @@ type PopupCCProps = {
     description?: string,
     children?: ReactNode,
     isVisible: boolean,
-    setIsVisible: (isVisible: boolean) => void,
+    setIsVisible?: (isVisible: boolean) => void,
 };
 
 const PopupCC = ({ title, description, children, isVisible, setIsVisible }: PopupCCProps) => {
@@ -41,18 +41,20 @@ const PopupCC = ({ title, description, children, isVisible, setIsVisible }: Popu
                             <Text style={{flex: 1,width: '100%'}}>
                                 {title}
                             </Text>
-                            <ButtonBase
-                                type='menu'
-                                style={{width: 'fit-content'}}
-                                icon={CloseSquare}
-                                onPress={async () => setIsVisible(false)}
-                            />
+                            {setIsVisible !== undefined &&
+                                <ButtonBase
+                                    type='menu'
+                                    style={{width: 'fit-content'}}
+                                    icon={CloseSquare}
+                                    onPress={async () => setIsVisible(false)}
+                                />
+                            }
                         </Row>
                     </Heading>
-                    {description &&
+                    {description !== undefined &&
                         <Text>{description}</Text>
                     }
-                    {children}
+                    {children !== undefined && children}
                 </Column>
             </GlassmorphismCC>
         </Modal>
diff --git a/front/components/UI/Scaffold.tsx b/front/components/UI/Scaffold.tsx
index de01358..55fef12 100644
--- a/front/components/UI/Scaffold.tsx
+++ b/front/components/UI/Scaffold.tsx
@@ -49,8 +49,9 @@ const ScaffoldCC = (props: ScaffoldCCProps) => {
 		return <LoadingView />;
 	}
 	const user = userQuery.data;
+	const layout = useWindowDimensions();
 	const colorScheme = useColorScheme();
-	const icon =
+	const logo =
 		colorScheme == 'light'
 			? require('../../assets/icon_light.png')
 			: require('../../assets/icon_dark.png');
@@ -78,18 +79,18 @@ const ScaffoldCC = (props: ScaffoldCCProps) => {
 					<View style={{ width: '100%' }}>
 						<Row>
 							<Image
-								source={{ uri: icon }}
+								source={{ uri: logo }}
 								style={{
 									aspectRatio: 1,
-									width: '40px',
-									height: 'auto',
-									marginRight: '10px',
+									width: 32,
+									height: 32,
 								}}
 							/>
-							<Spacer width="xs" />
-							<Text fontSize={'2xl'} selectable={false}>
-								Chromacase
-							</Text>
+							{layout.width > 650 &&
+								<Text fontSize={'xl'} selectable={false}>
+									Chromacase
+								</Text>
+							}
 						</Row>
 						<Spacer height="xl" />
 						<View style={{ width: '100%' }}>
@@ -242,19 +243,10 @@ const ScaffoldCC = (props: ScaffoldCCProps) => {
 				</ScrollView>
 			</View>
 			<LinearGradient
-				start={{ x: 0, y: 0 }}
-				end={{ x: 1, y: 1 }}
 				colors={['#101014', '#6075F9']}
 				style={{
-					top: 0,
-					bottom: 0,
-					right: 0,
-					left: 0,
 					width: '100%',
 					height: '100%',
-					minHeight: 'fit-content',
-					minWidth: 'fit-content',
-					flex: 1,
 					position: 'absolute',
 					zIndex: -2,
 				}}
diff --git a/front/components/UI/ScaffoldAuth.tsx b/front/components/UI/ScaffoldAuth.tsx
index 64f9779..24ed830 100644
--- a/front/components/UI/ScaffoldAuth.tsx
+++ b/front/components/UI/ScaffoldAuth.tsx
@@ -23,7 +23,7 @@ interface ScaffoldAuthProps {
 	description: string;
 	form: React.ReactNode[];
 	submitButton: React.ReactNode;
-	link: { text: string; description: string; onPress: () => void };
+	link: { text: string; label: string; onPress: () => void };
 }
 
 const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
@@ -40,14 +40,13 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 	const logo = colorScheme == 'light'
 	? require('../../assets/icon_light.png')
 	: require('../../assets/icon_dark.png');
-	// eslint-disable-next-line @typescript-eslint/no-var-requires
 	const [banner] = useAssets(require('../../assets/banner.jpg'));
 
 	return (
 		<Flex
 			direction="row"
 			justifyContent="space-between"
-			style={{ flex: 1, backgroundColor: '#101014' }}
+			style={{ flex: 1, backgroundColor: '#cdd4fd' }}
 		>
 			<Column style={{ flex: 1 }}>
 				<Wrap space={4} direction='row' style={{padding: 16, paddingBottom: 0}}>
@@ -125,14 +124,17 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 							</Stack>
 							{submitButton}
 							<Wrap style={{ flexDirection: 'row', justifyContent: 'center' }}>
-								<Text>{link.description}</Text>
-								<LinkBase onPress={link.onPress}>{link.text}</LinkBase>
+								<Text>{link.label}</Text>
+								<LinkBase
+									text={link.text}
+									onPress={link.onPress}
+								/>
 							</Wrap>
 						</Stack>
 					</View>
 				</ScrollView>
 			</Column>
-			{layout.width > 650 ? (
+			{layout.width > 650 &&
 				<View style={{ width: '50%', height: '100%', padding: 16 }}>
 					<Image
 						source={{ uri: banner?.at(0)?.uri }}
@@ -140,24 +142,18 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 						style={{ width: '100%', height: '100%', borderRadius: 8 }}
 					/>
 				</View>
-			) : (
-				<></>
-			)}
-			<LinearGradient
-				start={{ x: 0, y: 0 }}
-				end={{ x: 1, y: 1 }}
-				colors={['#101014', '#6075F9']}
-				style={{
-					top: 0,
-					bottom: 0,
-					right: 0,
-					left: 0,
-					width: '100%',
-					height: '100%',
-					position: 'absolute',
-					zIndex: -2,
-				}}
-			/>
+			}
+			{colorScheme === 'dark' &&
+				<LinearGradient
+					colors={['#101014', '#6075F9']}
+					style={{
+						width: '100%',
+						height: '100%',
+						position: 'absolute',
+						zIndex: -2,
+					}}
+				/>
+			}
 		</Flex>
 	);
 };
diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx
index a82cc7e..123d061 100644
--- a/front/components/UI/ScaffoldCC.tsx
+++ b/front/components/UI/ScaffoldCC.tsx
@@ -45,9 +45,8 @@ type ScaffoldCCProps = {
 };
 
 const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps) => {
-	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
-
 	const userQuery = useQuery(API.getUserInfo);
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 
 	if (!userQuery.data || userQuery.isLoading) {
 		return <LoadingView />;
@@ -57,30 +56,39 @@ const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps)
 	? require('../../assets/icon_light.png')
 	: require('../../assets/icon_dark.png');
 
-
-	if (screenSize === 'small') {
-		return (
-			<ScaffoldMobileCC
-				user={userQuery.data}
-				logo={logo}
-				routeName={routeName}
-				menu={menu}
-			>
-				{children}
-			</ScaffoldMobileCC>
-		);
-	}
-
 	return (
-		<ScaffoldDesktopCC
-			user={userQuery.data}
-			logo={logo}
-			routeName={routeName}
-			menu={menu}
-			widthPadding={withPadding}
-		>
-			{children}
-		</ScaffoldDesktopCC>
+		<Flex style={{ flex: 1, backgroundColor: '#cdd4fd' }}>
+			{screenSize === 'small' ?
+				<ScaffoldMobileCC
+					user={userQuery.data}
+					logo={logo}
+					routeName={routeName}
+					menu={menu}
+				>
+					{children}
+				</ScaffoldMobileCC>
+				: <ScaffoldDesktopCC
+					user={userQuery.data}
+					logo={logo}
+					routeName={routeName}
+					menu={menu}
+					widthPadding={withPadding}
+				>
+					{children}
+				</ScaffoldDesktopCC>
+			}
+			{colorScheme === 'dark' &&
+				<LinearGradient
+					colors={['#101014', '#6075F9']}
+					style={{
+						width: '100%',
+						height: '100%',
+						position: 'absolute',
+						zIndex: -2,
+					}}
+				/>
+			}
+		</Flex>
 	);
 };
 
diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx
index f628eb3..1d00317 100644
--- a/front/components/UI/ScaffoldDesktopCC.tsx
+++ b/front/components/UI/ScaffoldDesktopCC.tsx
@@ -1,5 +1,5 @@
-import { View, Image } from 'react-native';
-import { Divider, Text, ScrollView, Flex, Row } from 'native-base';
+import { View, Image, useWindowDimensions } from 'react-native';
+import { Divider, Text, ScrollView, Flex, Row, useMediaQuery, useTheme } from 'native-base';
 import { useQuery, useQueries } from '../../Queries';
 import API from '../../API';
 import Song from '../../models/Song';
@@ -13,6 +13,8 @@ import Spacer from './Spacer';
 import User from '../../models/User';
 import LogoutButtonCC from './LogoutButtonCC';
 import GlassmorphismCC from './Glassmorphism';
+import { ColorSchemeProvider } from '../../Theme';
+import useColorScheme from '../../hooks/colorScheme';
 
 type ScaffoldDesktopCCProps = {
 	widthPadding: boolean,
@@ -31,6 +33,9 @@ type ScaffoldDesktopCCProps = {
 const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 	const navigation = useNavigation();
 	const userQuery = useQuery(API.getUserInfo);
+	const [isSmallScreen] = useMediaQuery({ maxWidth: 400 });
+	const layout = useWindowDimensions();
+	const colorScheme = useColorScheme();
 
 	if (!userQuery.data || userQuery.isLoading) {
 		return <LoadingView />;
@@ -39,168 +44,149 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 	const songHistory = useQueries(
 		playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? []
 	);
+	const { colors } = useTheme();
 
 	return (
-		<Flex style={{ flex: 1 }}>
-			<View style={{ height: '100%', flexDirection: 'row', overflow: 'hidden' }}>
-				<View
-					style={{
-						display: 'flex',
-						width: '300px',
-						height: '100vh',
-						maxHeight: '100vh',
-						padding: '32px',
-						flexDirection: 'column',
-						justifyContent: 'space-between',
-						alignItems: 'flex-start',
-						flexShrink: 0,
-					}}
-				>
-					<View style={{ width: '100%' }}>
-						<Row>
-							<Image
-								source={{ uri: props.logo }}
-								style={{
-									aspectRatio: 1,
-									width: '40px',
-									height: 'auto',
-									marginRight: '10px',
-								}}
-							/>
-							<Spacer width="xs" />
-							<Text fontSize={'2xl'} selectable={false}>
+		<View style={{ height: '100%', flexDirection: 'row', overflow: 'hidden' }}>
+			<View
+				style={{
+					display: 'flex',
+					width: 300,
+					padding: 20,
+					flexDirection: 'column',
+					justifyContent: 'space-between',
+					alignItems: 'flex-start',
+					flexShrink: 0,
+				}}
+			>
+				<View style={{ width: '100%' }}>
+					<Row space={2} flex={1}>
+						<Image
+							source={{ uri: props.logo }}
+							style={{
+								aspectRatio: 1,
+								width: 32,
+								height: 32,
+							}}
+						/>
+						{layout.width > 650 &&
+							<Text fontSize={'xl'} selectable={false}>
 								Chromacase
 							</Text>
-						</Row>
-						<Spacer height="xl" />
-						<View style={{ width: '100%' }}>
-							{props.menu.map((value) => (
-								value.type === "main" &&
-								<View key={'key-menu-link-' + value.title}>
-									<ButtonBase
-										style={{ width: '100%' }}
-										type="menu"
-										icon={value.icon}
-										title={value.title}
-										isDisabled={props.routeName === value.link}
-										iconVariant={
-											props.routeName === value.link ? 'Bold' : 'Outline'
-										}
-										onPress={async () =>
-											navigation.navigate(value.link as never)
-										}
-									/>
-									<Spacer />
-								</View>
-							))}
-						</View>
-					</View>
+						}
+					</Row>
+					<Spacer height="lg" />
 					<View style={{ width: '100%' }}>
-						<Divider />
-						<Spacer />
-						<Text
-							bold
-							style={{
-								paddingHorizontal: '16px',
-								paddingVertical: '10px',
-								fontSize: 20,
-							}}
-						>
-							Recently played
-						</Text>
-						{songHistory.length === 0 && (
-							<Text
-								style={{
-									paddingHorizontal: '16px',
-									paddingVertical: '10px',
-								}}
-							>
-								No songs played yet
-							</Text>
-						)}
-						{songHistory
-							.map((h) => h.data)
-							.filter((data): data is Song => data !== undefined)
-							.filter(
-								(song, i, array) =>
-									array.map((s) => s.id).findIndex((id) => id == song.id) == i
-							)
-							.slice(0, 4)
-							.map((histoItem, index) => (
-								<View
-									key={'tab-navigation-other-' + index}
-									style={{
-										paddingHorizontal: '16px',
-										paddingVertical: '10px',
-									}}
-								>
-									<Text numberOfLines={1}>{histoItem.name}</Text>
-								</View>
-							))}
-					</View>
-					<Spacer />
-					<View style={{ width: '100%' }}>
-						<Divider />
-						<Spacer />
 						{props.menu.map((value) => (
-							value.type === "sub" &&
-							<ButtonBase
-								key={'key-menu-link-' + value.title}
-								style={{ width: '100%' }}
-								type="menu"
-								icon={value.icon}
-								title={value.title}
-								isDisabled={props.routeName === value.link}
-								iconVariant={
-									props.routeName === value.link ? 'Bold' : 'Outline'
-								}
-								onPress={async () =>
-									navigation.navigate(value.link as never)
-								}
-							/>
+							value.type === "main" &&
+							<View key={'key-menu-link-' + value.title}>
+								<ButtonBase
+									style={{ width: '100%' }}
+									type="menu"
+									icon={value.icon}
+									title={value.title}
+									isDisabled={props.routeName === value.link}
+									iconVariant={
+										props.routeName === value.link ? 'Bold' : 'Outline'
+									}
+									onPress={async () =>
+										navigation.navigate(value.link as never)
+									}
+								/>
+								<Spacer height='xs'/>
+							</View>
 						))}
-						<Spacer />
-						<LogoutButtonCC isGuest={props.user.isGuest} style={{with: '100%'}} buttonType={'menu'}/>
 					</View>
 				</View>
-				<ScrollView
-					style={{ flex: 1, maxHeight: '100vh' }}
-					contentContainerStyle={{ flex: 1 }}
-				>
-					<GlassmorphismCC
+				<View style={{ width: '100%' }}>
+					<Divider my="2" _light={{bg: colors.black[500]}} _dark={{bg:'#FFF'}}/>
+					<Spacer height='xs'/>
+					<Text
+						bold
 						style={{
-							backgroundColor: 'rgba(16,16,20,0.5)',
-							flex: 1,
-							margin: 8,
-							padding: props.widthPadding ? 20 : 0,
-							borderRadius: 12,
-							minHeight: 'fit-content',
+							paddingHorizontal: 16,
+							paddingVertical: 10,
+							fontSize: 20,
 						}}
 					>
-						{props.children}
-					</GlassmorphismCC>
-					<Spacer/>
-				</ScrollView>
+						Recently played
+					</Text>
+					{songHistory.length === 0 && (
+						<Text
+							style={{
+								paddingHorizontal: 16,
+								paddingVertical: 10,
+							}}
+						>
+							No songs played yet
+						</Text>
+					)}
+					{songHistory
+						.map((h) => h.data)
+						.filter((data): data is Song => data !== undefined)
+						.filter(
+							(song, i, array) =>
+								array.map((s) => s.id).findIndex((id) => id == song.id) == i
+						)
+						.slice(0, 4)
+						.map((histoItem, index) => (
+							<View
+								key={'tab-navigation-other-' + index}
+								style={{
+									paddingHorizontal: 16,
+									paddingVertical: 10,
+								}}
+							>
+								<Text numberOfLines={1}>{histoItem.name}</Text>
+							</View>
+						))}
+				</View>
+				<Spacer height='xs'/>
+				<View style={{ 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={{ width: '100%' }}
+							type="menu"
+							icon={value.icon}
+							title={!isSmallScreen ? value.title : undefined}
+							isDisabled={props.routeName === value.link}
+							iconVariant={
+								props.routeName === value.link ? 'Bold' : 'Outline'
+							}
+							onPress={async () =>
+								navigation.navigate(value.link as never)
+							}
+						/>
+					))}
+					<Spacer height='xs'/>
+					<LogoutButtonCC isGuest={props.user.isGuest} style={{with: '100%'}} buttonType={'menu'}/>
+				</View>
 			</View>
-			<LinearGradient
-				start={{ x: 0, y: 0 }}
-				end={{ x: 1, y: 1 }}
-				colors={['#101014', '#6075F9']}
-				style={{
-					top: 0,
-					bottom: 0,
-					right: 0,
-					left: 0,
-					width: '100%',
-					height: '100%',
-					minHeight: 'fit-content',
-					minWidth: 'fit-content',
-					flex: 1,
-					position: 'absolute',
-					zIndex: -2,
-				}}
-			/>
-		</Flex>
+			<ScrollView
+				style={{ flex: 1, maxHeight: '100vh' }}
+				contentContainerStyle={{ flex: 1 }}
+			>
+				<GlassmorphismCC
+					style={{
+						backgroundColor: colors.coolGray[500],
+						flex: 1,
+						margin: 8,
+						marginBottom: 0,
+						padding: props.widthPadding ? 20 : 0,
+						borderRadius: 12,
+						minHeight: 'fit-content',
+					}}
+				>
+					{props.children}
+				</GlassmorphismCC>
+				<Spacer height='xs'/>
+			</ScrollView>
+		</View>
+
 	);
 };
 
diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx
index 618fe18..1b2f22e 100644
--- a/front/components/UI/ScaffoldMobileCC.tsx
+++ b/front/components/UI/ScaffoldMobileCC.tsx
@@ -1,5 +1,5 @@
 import { View, useWindowDimensions } from 'react-native';
-import {  ScrollView, Flex, useBreakpointValue, useMediaQuery } from 'native-base';
+import {  ScrollView, Flex, useBreakpointValue, useMediaQuery, useTheme } from 'native-base';
 import { LinearGradient } from 'expo-linear-gradient';
 import ButtonBase from './ButtonBase';
 import { Icon } from 'iconsax-react-native';
@@ -23,77 +23,57 @@ type ScaffoldMobileCCProps = {
 const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
 	const navigation = useNavigation();
 	const [isSmallScreen] = useMediaQuery({ maxWidth: 400 });
-
+	const { colors } = useTheme();
 
 	console.log(isSmallScreen);
 
 	return (
-		<Flex style={{ flex: 1 }}>
-			<View style={{ height: '100%', flexDirection: 'column', overflow: 'hidden' }}>
-				<ScrollView
-					style={{
-						flex: 1,
-						maxHeight: '100vh',
-						flexDirection: 'column',
-						flexShrink: 0,
-						padding: 16
-					}}
-					contentContainerStyle={{ flex: 1 }}
-				>
-					<View style={{ flex: 1, minHeight: 'fit-content' }}>
-						{props.children}
-					</View>
-					<Spacer/>
-				</ScrollView>
-				<View style={{padding: 8, paddingTop: 0}}>
-					<Flex
-						style={{
-							width: '100%',
-							height: 'fit-content',
-							flexDirection: 'row',
-							backgroundColor: 'rgba(16,16,20,0.5)',
-							padding: 8,
-							justifyContent: 'space-between',
-							borderRadius: 8,
-						}}
-					>
-						{props.menu.map((value) => (
-							<ButtonBase
-								key={'key-menu-link-' + value.title}
-								type="menu"
-								icon={value.icon}
-								title={props.routeName === value.link && !isSmallScreen ? value.title : undefined}
-								isDisabled={props.routeName === value.link}
-								iconVariant={
-									props.routeName === value.link ? 'Bold' : 'Outline'
-								}
-								onPress={async () =>
-									navigation.navigate(value.link as never)
-								}
-							/>
-						))}
-					</Flex>
-				</View>
-			</View>
-			<LinearGradient
-				start={{ x: 0, y: 0 }}
-				end={{ x: 1, y: 1 }}
-				colors={['#101014', '#6075F9']}
+		<View style={{ height: '100%', flexDirection: 'column', overflow: 'hidden' }}>
+			<ScrollView
 				style={{
-					top: 0,
-					bottom: 0,
-					right: 0,
-					left: 0,
-					width: '100%',
-					height: '100%',
-					minHeight: 'fit-content',
-					minWidth: 'fit-content',
 					flex: 1,
-					position: 'absolute',
-					zIndex: -2,
+					maxHeight: '100vh',
+					flexDirection: 'column',
+					flexShrink: 0,
+					padding: 16
 				}}
-			/>
-		</Flex>
+				contentContainerStyle={{ flex: 1 }}
+			>
+				<View style={{ flex: 1, minHeight: 'fit-content' }}>
+					{props.children}
+				</View>
+				<Spacer/>
+			</ScrollView>
+			<View style={{padding: 8, paddingTop: 0}}>
+				<Flex
+					style={{
+						width: '100%',
+						height: 'fit-content',
+						flexDirection: 'row',
+						backgroundColor: colors.coolGray[500],
+						padding: 8,
+						justifyContent: 'space-between',
+						borderRadius: 8,
+					}}
+				>
+					{props.menu.map((value) => (
+						<ButtonBase
+							key={'key-menu-link-' + value.title}
+							type="menu"
+							icon={value.icon}
+							title={props.routeName === value.link && !isSmallScreen ? value.title : undefined}
+							isDisabled={props.routeName === value.link}
+							iconVariant={
+								props.routeName === value.link ? 'Bold' : 'Outline'
+							}
+							onPress={async () =>
+								navigation.navigate(value.link as never)
+							}
+						/>
+					))}
+				</Flex>
+			</View>
+		</View>
 	);
 };
 
diff --git a/front/components/UI/SeparatorBase.tsx b/front/components/UI/SeparatorBase.tsx
index 2f94c79..e228c91 100644
--- a/front/components/UI/SeparatorBase.tsx
+++ b/front/components/UI/SeparatorBase.tsx
@@ -1,11 +1,12 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { Text, useTheme } from 'native-base';
+import useColorScheme from '../../hooks/colorScheme';
 
 const styles = StyleSheet.create({
 	line: {
 		flex: 1,
 		height: 2,
-		backgroundColor: 'white',
 	},
 	container: {
 		width: '100%',
@@ -14,7 +15,6 @@ const styles = StyleSheet.create({
 		marginVertical: 2,
 	},
 	text: {
-		color: 'white',
 		paddingHorizontal: 16,
 	},
 });
@@ -23,12 +23,18 @@ interface SeparatorBaseProps {
 	children: ReactNode;
 }
 
-const SeparatorBase: FunctionComponent<SeparatorBaseProps> = ({ children }) => (
-	<View style={styles.container}>
-		<View style={styles.line} />
-		<Text style={styles.text}>{children}</Text>
-		<View style={styles.line} />
-	</View>
-);
+const SeparatorBase: FunctionComponent<SeparatorBaseProps> = ({ children }) => {
+	const colorScheme = useColorScheme();
+	const { colors } = useTheme();
+	const color = colorScheme === 'light' ? colors.black[500] : '#FFFFFF';
+	
+	return (
+		<View style={styles.container}>
+			<View style={[styles.line, {backgroundColor: color}]} />
+			<Text style={styles.text}>{children}</Text>
+			<View style={[styles.line, {backgroundColor: color}]} />
+		</View>
+	);
+}
 
 export default SeparatorBase;
diff --git a/front/components/UI/SettingsBase.tsx b/front/components/UI/SettingsBase.tsx
index 54a4873..abdcf23 100644
--- a/front/components/UI/SettingsBase.tsx
+++ b/front/components/UI/SettingsBase.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import InteractiveBase from './InteractiveBase';
-import { Text } from 'native-base';
+import { Text, useTheme } from 'native-base';
 
 interface SettingProps {
 	icon: (size: number, color: string) => React.ReactNode;
@@ -12,40 +12,41 @@ interface SettingProps {
 }
 
 const SettingBase: React.FC<SettingProps> = ({ title, description, onPress, icon, children }) => {
+	const { colors } = useTheme();
 	const styleSetting = StyleSheet.create({
 		Default: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		onHover: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(32, 32, 40, 0.50)',
+			backgroundColor: colors.coolGray[700],
 		},
 		onPressed: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		Disabled: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 	});
 
 	return (
 		<InteractiveBase
-			style={[styles.container, { width: '100%' }]}
+			style={[styles.container, { backgroundColor: colors.coolGray[500] }]}
 			styleAnimate={styleSetting}
 			onPress={async () => {
 				if (onPress) {
@@ -67,8 +68,8 @@ const SettingBase: React.FC<SettingProps> = ({ title, description, onPress, icon
 
 const styles = StyleSheet.create({
 	container: {
+		width: '100%',
 		borderRadius: 8,
-		backgroundColor: 'rgba(16, 16, 20, 0.50)',
 	},
 	content: {
 		paddingVertical: 10,
diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx
index ed47e76..f1c0509 100644
--- a/front/components/UI/TextFieldBase.tsx
+++ b/front/components/UI/TextFieldBase.tsx
@@ -2,7 +2,9 @@ import { Eye, EyeSlash, Icon } from 'iconsax-react-native';
 import React, { useState } from 'react';
 import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import InteractiveBase from './InteractiveBase';
-import { Input } from 'native-base';
+import { Input, useTheme } from 'native-base';
+import { ColorSchemeProvider } from '../../Theme';
+import useColorScheme from '../../hooks/colorScheme';
 
 export interface TextFieldBaseProps {
 	style?: StyleProp<ViewStyle>;
@@ -67,6 +69,8 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 	const [isPasswordVisible, setPasswordVisible] = useState(!isSecret);
 	const [isFocused, setFocused] = useState(false);
 	const MyIcon: Icon = icon as Icon;
+	const { colors } = useTheme();
+	const colorScheme = useColorScheme();
 
 	const styleAnimate = StyleSheet.create({
 		Default: {
@@ -74,28 +78,28 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16,16,20,0.5)',
+			backgroundColor: colors.coolGray[500],
 		},
 		onHover: {
 			scale: 1,
 			shadowOpacity: 0.37,
 			shadowRadius: 7.49,
 			elevation: 12,
-			backgroundColor: 'rgba(16,16,20,0.45)',
+			backgroundColor: colors.coolGray[400],
 		},
 		onPressed: {
 			scale: 1,
 			shadowOpacity: 0.23,
 			shadowRadius: 2.62,
 			elevation: 4,
-			backgroundColor: 'rgba(16,16,20,0.55)',
+			backgroundColor: colors.coolGray[600],
 		},
 		Disabled: {
 			scale: 1,
 			shadowOpacity: 0.3,
 			shadowRadius: 4.65,
 			elevation: 8,
-			backgroundColor: 'rgba(16,16,20,0.5)',
+			backgroundColor: colors.coolGray[500],
 		},
 	});
 
@@ -117,7 +121,7 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
 					style={[styles.input, icon ? {} : { paddingLeft: 12 }]}
 					autoComplete={autoComplete}
 					placeholder={placeholder + (isRequired ? '*' : '')}
-					placeholderTextColor="rgba(255, 255, 255, 0.7)"
+					placeholderTextColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
 					secureTextEntry={isSecret ? !isPasswordVisible : false}
 					onFocus={() => setFocused(true)}
 					onBlur={() => setFocused(false)}
@@ -157,7 +161,6 @@ const styles = StyleSheet.create({
 	},
 	input: {
 		flex: 1,
-		color: '#ffffff',
 		paddingHorizontal: 12 + 20 + 12,
 		paddingVertical: 12,
 		outlineStyle: 'none',
diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index af7f00f..1d1d5bf 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -38,6 +38,18 @@ export const en = {
 	levelProgress: 'good notes',
 	score: 'Score',
 
+	//signup
+	signupPageTitle: "Create an account",
+	signupPageParagraph: "Learn to play the piano in an enjoyable and free way.",
+	signupLinkLabel: "Already have an account? ",
+	signupLinkText: "Sign in.",
+
+	//signin
+	signinPageTitle: "Welcome !",
+	signinPageParagraph: "Continue with Google or enter your details.",
+	signinLinkLabel: "You don't have an account? ",
+	signinLinkText: 'Sign up for free.',
+
 	//search
 	allFilter: 'All',
 	artistFilter: 'Artists',
@@ -228,6 +240,18 @@ export const fr: typeof en = {
 	longestCombo: 'Combo le plus long : ',
 	favoriteGenre: 'Genre favori : ',
 
+	//signup
+	signupPageTitle: "Créer un compte",
+	signupPageParagraph: "Apprendre le piano gratuitement et de manière ludique",
+	signupLinkLabel: "Vous avez déjà un compte ? ",
+	signupLinkText: "S'identifier",
+
+	//signup
+	signinPageTitle: "Bienvenue !",
+	signinPageParagraph: "Continuez avec Google ou entrez vos coordonnées.",
+	signinLinkLabel: "Vous n'avez pas de compte ? ",
+	signinLinkText: 'Inscrivez-vous gratuitement',
+
 	//search
 	allFilter: 'Tout',
 	artistFilter: 'Artistes',
@@ -427,6 +451,18 @@ export const sp: typeof en = {
 	longestCombo: 'combo más largo : ',
 	favoriteGenre: 'genero favorito : ',
 
+	//signup
+	signupPageTitle: "Crear una cuenta",
+	signupPageParagraph: "Aprende a tocar el piano de forma amena y gratuita.",
+	signupLinkLabel: "¿Ya tienes una cuenta? ",
+	signupLinkText: "Iniciar sesión.",
+
+	//signin
+	signinPageTitle: "Bienvenido !",
+	signinPageParagraph: "Continúa con Google o introduce tus datos.",
+	signinLinkLabel: "¿No tienes una cuenta? ",
+	signinLinkText: "Regístrate gratis.",
+
 	//search
 	allFilter: 'Todos',
 	artistFilter: 'Artistas',
diff --git a/front/package.json b/front/package.json
index 12148a7..1792c36 100644
--- a/front/package.json
+++ b/front/package.json
@@ -24,7 +24,7 @@
 		"@react-navigation/native": "^6.1.8",
 		"@react-navigation/native-stack": "^6.9.14",
 		"@reduxjs/toolkit": "^1.9.6",
-		"expo": "~49.0.13",
+		"expo": "^49.0.16",
 		"expo-blur": "~12.4.1",
 		"expo-image-picker": "~14.3.2",
 		"expo-linear-gradient": "~12.3.0",
diff --git a/front/views/ProfileView.tsx b/front/views/ProfileView.tsx
index d084c32..aec07d7 100644
--- a/front/views/ProfileView.tsx
+++ b/front/views/ProfileView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useWindowDimensions } from 'react-native';
-import { Column, Flex, Progress, Row, Text, Wrap } from 'native-base';
+import { Column, Flex, Progress, Row, Text, Wrap, useTheme } from 'native-base';
 import { RouteProps, useNavigation } from '../Navigation';
 import UserAvatar from '../components/UserAvatar';
 import { LoadingView } from '../components/Loading';
@@ -34,6 +34,7 @@ const ProfileView = (props: RouteProps<{}>) => {
 
 	const progessValue = xpToProgressBarValue(userQuery.data.data.xp);
 	const level = xpToLevel(userQuery.data.data.xp);
+	const { colors } = useTheme();
 
 	return (
 		<ScaffoldCC routeName={props.route.name}>
@@ -41,7 +42,7 @@ const ProfileView = (props: RouteProps<{}>) => {
 				<Wrap
 					style={{
 						flexDirection: layout.width > 650 ? 'row' : 'column',
-						alignItems: 'center',
+						alignItems: layout.width > 650 ? 'flex-start' : 'center',
 						paddingBottom: 20,
 						justifyContent: 'space-between',
 					}}
@@ -59,7 +60,6 @@ const ProfileView = (props: RouteProps<{}>) => {
 							style={{
 								flexDirection: 'row',
 								alignItems: 'center',
-								paddingBottom: 20,
 								justifyContent: 'space-between',
 							}}
 						>
@@ -87,7 +87,7 @@ const ProfileView = (props: RouteProps<{}>) => {
 				<Row style={{ alignItems: 'center', paddingBottom: 20 }}>
 					<Text style={{ paddingRight: 20 }}>{`${translate('level')} ${level}`}</Text>
 					<Progress
-						bgColor={'#rgba(16,16,20,0.5)'}
+						bgColor={colors.coolGray[500]}
 						value={progessValue}
 						maxW={'800'}
 						flex={1}
diff --git a/front/views/SigninView.tsx b/front/views/SigninView.tsx
index 6011cd6..401c7d0 100644
--- a/front/views/SigninView.tsx
+++ b/front/views/SigninView.tsx
@@ -61,10 +61,11 @@ const SigninView = () => {
 
 	return (
 		<ScaffoldAuth
-			title="Bienvenue !"
-			description="Continuez avec Google ou entrez vos coordonnées."
+			title={translate("signinPageTitle")}
+			description={translate("signinPageParagraph")}
 			form={[
 				<TextFormField
+					style={{width: '100%', flex: 1}}
 					key={'signin-form-1'}
 					error={formData.username.error}
 					icon={User}
@@ -101,14 +102,16 @@ const SigninView = () => {
 					isRequired
 					isSecret
 				/>,
-				<LinkBase key={'signin-link'} onPress={() => navigation.navigate('ForgotPassword')}>
-					{translate('forgottenPassword')}
-				</LinkBase>,
+				<LinkBase
+					key={'signin-link'}
+					text={translate('forgottenPassword')}
+					onPress={() => navigation.navigate('ForgotPassword')}
+				/>,
 			]}
 			submitButton={
 				<ButtonBase
 					style={{ width: '100%' }}
-					title="Signin"
+					title={translate('signInBtn')}
 					isDisabled={
 						formData.password.error !== null ||
 						formData.username.error !== null ||
@@ -133,8 +136,8 @@ const SigninView = () => {
 				/>
 			}
 			link={{
-				text: 'Inscrivez-vous gratuitement',
-				description: "Vous n'avez pas de compte ? ",
+				label: translate('signinLinkLabel'),
+				text: translate('signinLinkText'),
 				onPress: () => navigation.navigate('Signup'),
 			}}
 		/>
diff --git a/front/views/SignupView.tsx b/front/views/SignupView.tsx
index d1739a4..d4dc744 100644
--- a/front/views/SignupView.tsx
+++ b/front/views/SignupView.tsx
@@ -76,8 +76,8 @@ const SignupView = () => {
 
 	return (
 		<ScaffoldAuth
-			title="Créer un compte"
-			description="Apprendre le piano gratuitement et de manière ludique"
+			title={translate("signupPageTitle")}
+			description={translate("signupPageParagraph")}
 			form={[
 				<TextFormField
 					key={'signup-form-1'}
@@ -193,8 +193,8 @@ const SignupView = () => {
 				/>
 			}
 			link={{
-				text: "S'identifier",
-				description: 'Vous avez déjà un compte ? ',
+				label: translate('signupLinkLabel'),
+				text: translate('signupLinkText'),
 				onPress: () => navigation.navigate('Login'),
 			}}
 		/>
diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx
index c3ca840..7dce0b9 100644
--- a/front/views/V2/DiscoveryView.tsx
+++ b/front/views/V2/DiscoveryView.tsx
@@ -170,7 +170,6 @@ const HomeView = (props: RouteProps<{}>) => {
 				>
 					<Text
 						style={{
-							color: 'white',
 							fontSize: 24,
 							fontWeight: 'bold',
 							marginLeft: 16,
diff --git a/front/views/settings/NotificationsSettings.tsx b/front/views/settings/NotificationsSettings.tsx
index a8a8b00..fd99b86 100644
--- a/front/views/settings/NotificationsSettings.tsx
+++ b/front/views/settings/NotificationsSettings.tsx
@@ -5,9 +5,12 @@ import ElementList from '../../components/GtkUI/ElementList';
 import useUserSettings from '../../hooks/userSettings';
 import { LoadingView } from '../../components/Loading';
 import { Calendar1, MonitorMobbile, Send2, Warning2 } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
 
 const NotificationsSettings = () => {
 	const { settings, updateSettings } = useUserSettings();
+	const colorScheme = useColorScheme();
+	const color = colorScheme === 'light' ? '#000' : '#fff';
 
 	if (!settings.data) {
 		return <LoadingView />;
@@ -18,7 +21,7 @@ const NotificationsSettings = () => {
 			elements={[
 				{
 					type: 'toggle',
-					icon: <MonitorMobbile size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <MonitorMobbile size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('SettingsNotificationsPushNotifications'),
 					description: 'Cette notification apparaitra sur votre apparail en pop-up',
 					data: {
@@ -34,7 +37,7 @@ const NotificationsSettings = () => {
 				},
 				{
 					type: 'toggle',
-					icon: <Send2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Send2 size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('SettingsNotificationsEmailNotifications'),
 					description: 'Recevez des mails pour atteindre vos objectifs',
 					data: {
@@ -50,7 +53,7 @@ const NotificationsSettings = () => {
 				},
 				{
 					type: 'toggle',
-					icon: <Calendar1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Calendar1 size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('SettingsNotificationsTrainingReminder'),
 					description: 'Un apprentissage régulier est la clé',
 					data: {
@@ -66,7 +69,7 @@ const NotificationsSettings = () => {
 				},
 				{
 					type: 'toggle',
-					icon: <Warning2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Warning2 size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('SettingsNotificationsReleaseAlert'),
 					description: 'Restez informé de nos mises à jour',
 					data: {
diff --git a/front/views/settings/PreferencesSettings.tsx b/front/views/settings/PreferencesSettings.tsx
index c4ed9a4..d3d8c7a 100644
--- a/front/views/settings/PreferencesSettings.tsx
+++ b/front/views/settings/PreferencesSettings.tsx
@@ -8,17 +8,20 @@ import { updateSettings } from '../../state/SettingsSlice';
 import ElementList from '../../components/GtkUI/ElementList';
 import LocalSettings from '../../models/LocalSettings';
 import { Brush2, Colorfilter, LanguageSquare, Rank, Sound } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
 
 const PreferencesSettings = () => {
 	const dispatch = useDispatch();
 	const language = useSelector((state) => state.language.value);
 	const settings = useSelector((state) => state.settings.local);
+	const colorScheme = useColorScheme();
+	const color = colorScheme === 'light' ? '#000' : '#fff';
 	return (
 		<Column space={4} style={{width: '100%'}}>
 			<ElementList
 				elements={[
 					{
-						icon: <Brush2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Brush2 size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'dropdown',
 						title: translate('SettingsPreferencesTheme'),
 						description: 'Définissez le theme (Dark ou Light) de votre application',
@@ -40,7 +43,7 @@ const PreferencesSettings = () => {
 						},
 					},
 					{
-						icon: <LanguageSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <LanguageSquare size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'dropdown',
 						title: translate('SettingsPreferencesLanguage'),
 						description: 'Définissez la langue de votre application',
@@ -58,7 +61,7 @@ const PreferencesSettings = () => {
 						},
 					},
 					{
-						icon: <Rank size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Rank size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'dropdown',
 						title: translate('SettingsPreferencesDifficulty'),
 						description: 'La précision du tempo est de plus en plus élevée',
@@ -84,7 +87,7 @@ const PreferencesSettings = () => {
 			<ElementList
 				elements={[
 					{
-						icon: <Colorfilter size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Colorfilter size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'toggle',
 						title: translate('SettingsPreferencesColorblindMode'),
 						description: 'Augmente le contraste',
@@ -100,7 +103,7 @@ const PreferencesSettings = () => {
 			<ElementList
 				elements={[
 					{
-						icon: <Sound size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Sound size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'range',
 						title: translate('SettingsPreferencesMicVolume'),
 						description: 'Régler le volume de votre micro selon vos preference',
diff --git a/front/views/settings/PrivacySettings.tsx b/front/views/settings/PrivacySettings.tsx
index 1a576b8..dd0274b 100644
--- a/front/views/settings/PrivacySettings.tsx
+++ b/front/views/settings/PrivacySettings.tsx
@@ -8,11 +8,14 @@ import { updateSettings } from '../../state/SettingsSlice';
 import useUserSettings from '../../hooks/userSettings';
 import { LoadingView } from '../../components/Loading';
 import { Driver, Like1, Shop } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
 
 const PrivacySettings = () => {
 	const dispatch = useDispatch();
 	const settings = useSelector((state: RootState) => state.settings.local);
 	const { settings: userSettings, updateSettings: updateUserSettings } = useUserSettings();
+	const colorScheme = useColorScheme();
+	const color = colorScheme === 'light' ? '#000' : '#fff';
 
 	if (!userSettings.data) {
 		return <LoadingView />;
@@ -23,7 +26,7 @@ const PrivacySettings = () => {
 			elements={[
 				{
 					type: 'toggle',
-					icon: <Driver size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Driver size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('dataCollection'),
 					description:
 						"Acceptez-vous la récupération de vos données pour l'amélioration de Chromacase ?",
@@ -37,7 +40,7 @@ const PrivacySettings = () => {
 				},
 				{
 					type: 'toggle',
-					icon: <Shop size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Shop size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('customAds'),
 					description: 'Afficher les suggestions dans la section des recommandations',
 					data: {
@@ -48,7 +51,7 @@ const PrivacySettings = () => {
 				},
 				{
 					type: 'toggle',
-					icon: <Like1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Like1 size="24" color={color} style={{ minWidth: 24 }} />,
 					title: translate('recommendations'),
 					description: 'Souhaitez-vous recevoir nos conseils et recommandations ?',
 					data: {
diff --git a/front/views/settings/SettingsPremium.tsx b/front/views/settings/SettingsPremium.tsx
index 8d89e98..b12b2e5 100644
--- a/front/views/settings/SettingsPremium.tsx
+++ b/front/views/settings/SettingsPremium.tsx
@@ -6,6 +6,7 @@ import ElementList from '../../components/GtkUI/ElementList';
 import { translate } from '../../i18n/i18n';
 import { useQuery } from '../../Queries';
 import { Designtools, Magicpen, Star1 } from 'iconsax-react-native';
+import useColorScheme from '../../hooks/colorScheme';
 
 // Too painful to infer the settings-only, typed navigator. Gave up
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,12 +17,14 @@ const PremiumSettings = () => {
 		return <LoadingView />;
 	}
 	const user = userQuery.data;
+	const colorScheme = useColorScheme();
+	const color = colorScheme === 'light' ? '#000' : '#fff';
 	return (
 		<ElementList
 			style={{width: '100%'}}
 			elements={[
 				{
-					icon: <Star1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Star1 size="24" color={color} style={{ minWidth: 24 }} />,
 					type: 'text',
 					title: translate('premiumAccount'),
 					description:
@@ -31,7 +34,7 @@ const PremiumSettings = () => {
 					},
 				},
 				{
-					icon: <Magicpen size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Magicpen size="24" color={color} style={{ minWidth: 24 }} />,
 					type: 'toggle',
 					title: 'Piano Magique',
 					description:
@@ -45,7 +48,7 @@ const PremiumSettings = () => {
 					},
 				},
 				{
-					icon: <Designtools size="24" color="#FFF" style={{ minWidth: 24 }} />,
+					icon: <Designtools size="24" color={color} style={{ minWidth: 24 }} />,
 					type: 'dropdown',
 					title: 'Thème de piano',
 					description: 'Définissez le theme de votre piano',
diff --git a/front/views/settings/SettingsProfile.tsx b/front/views/settings/SettingsProfile.tsx
index 179c2a0..160739c 100644
--- a/front/views/settings/SettingsProfile.tsx
+++ b/front/views/settings/SettingsProfile.tsx
@@ -11,6 +11,8 @@ import ChangeEmailForm from '../../components/forms/changeEmailForm';
 import ChangePasswordForm from '../../components/forms/changePasswordForm';
 import LogoutButtonCC from '../../components/UI/LogoutButtonCC';
 import Spacer from '../../components/UI/Spacer';
+import { ColorSchemeProvider } from '../../Theme';
+import useColorScheme from '../../hooks/colorScheme';
 
 const handleChangeEmail = async (newEmail: string): Promise<string> => {
 	await API.updateUserEmail(newEmail);
@@ -31,12 +33,14 @@ const ProfileSettings = () => {
 		return <LoadingView />;
 	}
 	const user = userQuery.data;
+	const colorScheme = useColorScheme();
+	const color = colorScheme === 'light' ? '#000' : '#fff';
 	return (
 		<Column space={4} style={{width: '100%'}}>
 			<ElementList
 				elements={[
 					{
-						icon: <Google size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Google size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'text',
 						title: 'Google account', // TODO translate
 						description: 'Liez votre compte Google à ChromaCase', // TODO translate
@@ -45,7 +49,7 @@ const ProfileSettings = () => {
 						},
 					},
 					{
-						icon: <Verify size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <Verify size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'text',
 						description: 'Vérifiez votre adresse e-mail', // TODO translate
 						title: translate('verified'),
@@ -69,7 +73,7 @@ const ProfileSettings = () => {
 						},
 					},
 					{
-						icon: <UserSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <UserSquare size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'text',
 						title: translate('avatar'),
 						description: 'Changer votre photo de profile', // TODO translate
@@ -103,7 +107,7 @@ const ProfileSettings = () => {
 						},
 					},
 					{
-						icon: <SmsEdit size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <SmsEdit size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'sectionDropdown',
 						title: 'Change email', // TODO translate
 						description:
@@ -119,7 +123,7 @@ const ProfileSettings = () => {
 						},
 					},
 					{
-						icon: <PasswordCheck size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						icon: <PasswordCheck size="24" color={color} style={{ minWidth: 24 }} />,
 						type: 'sectionDropdown',
 						title: 'Change password', // TODO translate
 						description:
diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx
index 209f06e..5bba8bf 100644
--- a/front/views/settings/SettingsView.tsx
+++ b/front/views/settings/SettingsView.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Center, Flex, Text } from 'native-base';
+import { Center, Flex, Text, useTheme } from 'native-base';
 import ProfileSettings from './SettingsProfile';
 import NotificationsSettings from './NotificationsSettings';
 import PrivacySettings from './PrivacySettings';
@@ -26,6 +26,8 @@ import { Scene } from 'react-native-tab-view/lib/typescript/src/types';
 import PremiumSettings from './SettingsPremium';
 import { RouteProps } from '../../Navigation';
 import ScaffoldCC from '../../components/UI/ScaffoldCC';
+import { ColorSchemeProvider } from '../../Theme';
+import useColorScheme from '../../hooks/colorScheme';
 
 export const PianoSettings = () => {
 	return (
@@ -66,6 +68,8 @@ const getTabData = (key: string) => {
 const SetttingsNavigator = (props: RouteProps<{}>) => {
 	const layout = useWindowDimensions();
 	const [index, setIndex] = React.useState(0);
+	const colorScheme = useColorScheme();
+	const { colors } = useTheme();
 	const [routes] = React.useState<Route[]>([
 		{ key: 'profile', title: 'Profile' },
 		{ key: 'premium', title: 'Premium' },
@@ -80,11 +84,13 @@ const SetttingsNavigator = (props: RouteProps<{}>) => {
 		<TabBar
 			{...props}
 			style={{
-				backgroundColor: 'rgba(0, 0, 0, 0)',
-				borderBottomWidth: 2,
-				borderColor: 'rgba(255,255,255,0.5)',
+				backgroundColor: 'transparent',
+				borderBottomWidth: 1,
+				borderColor: colors.primary[500],
 			}}
-			indicatorStyle={{ backgroundColor: 'white' }}
+			activeColor={ colorScheme === 'light' ? '#000' : '#fff'}
+			inactiveColor={ colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
+			indicatorStyle={{ backgroundColor: colors.primary[500] }}
 			renderIcon={(
 				scene: Scene<Route> & {
 					focused: boolean;
@@ -92,15 +98,13 @@ const SetttingsNavigator = (props: RouteProps<{}>) => {
 				}
 			) => {
 				const tabHeader = getTabData(scene.route!.key);
-				return tabHeader.index == index ? (
-					<tabHeader.icon size="18" color="#6075F9" variant="Bold" />
-				) : (
-					<tabHeader.icon size="18" color="#6075F9" />
+				return (
+					<tabHeader.icon size="18" color="#6075F9" variant={scene.focused ? "Bold" : "Outline"} />
 				);
 			}}
 			renderLabel={({ route, color }) =>
 				layout.width > 1100 ? (
-					<Text style={{ color, paddingLeft: 10, overflow: 'hidden' }}>
+					<Text style={{ color: color, paddingLeft: 10, overflow: 'hidden' }}>
 						{route.title}
 					</Text>
 				) : null
diff --git a/front/yarn.lock b/front/yarn.lock
index 1ad886e..9b02922 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1248,10 +1248,10 @@
     mv "~2"
     safe-json-stringify "~1"
 
-"@expo/cli@0.10.13":
-  version "0.10.13"
-  resolved "https://registry.yarnpkg.com/@expo/cli/-/cli-0.10.13.tgz#6503e6c477a8407986cd645952b0ad6177e08fe7"
-  integrity sha512-8ciyz+yIDih6zCNMWK0IyEv411W7vej/TaWIFGarogPVbFokXrUKr0aKoQG1RU1SLlY4eUpHakbIzqog+rhJdQ==
+"@expo/cli@0.10.14":
+  version "0.10.14"
+  resolved "https://registry.yarnpkg.com/@expo/cli/-/cli-0.10.14.tgz#c2e94cbc62f1d724828b848d2aaf5c4906db1028"
+  integrity sha512-IIZ9mYYHpNkK9XJAWLPtwTwZmasDq/NJsHLPjLtw5la4ANjWWwKYUcl3XKBECKovSDn9WHEQHGsBz6cyKS88Mg==
   dependencies:
     "@babel/runtime" "^7.20.0"
     "@expo/code-signing-certificates" "0.0.5"
@@ -6213,13 +6213,13 @@ expo-updates-interface@~0.10.0:
   resolved "https://registry.yarnpkg.com/expo-updates-interface/-/expo-updates-interface-0.10.1.tgz#cab075641cd381718ccd9264bf133dc393430a44"
   integrity sha512-I6JMR7EgjXwckrydDmrkBEX/iw750dcqpzQVsjznYWfi0HTEOxajLHB90fBFqQkUV5i5s4Fd3hYQ1Cn0oMzUbA==
 
-expo@~49.0.13:
-  version "49.0.13"
-  resolved "https://registry.yarnpkg.com/expo/-/expo-49.0.13.tgz#9ee185d4eb1ac2859e67895bd919db5a04d1b8ec"
-  integrity sha512-k2QFmT5XN490ksjKJgogfS5SFj6ZKCu1GwWz4VUV4S9gkPjzr8zQAZoVPKaWxUYRb6xDpTJXdhLt7gSnV3bJvw==
+expo@^49.0.16:
+  version "49.0.16"
+  resolved "https://registry.yarnpkg.com/expo/-/expo-49.0.16.tgz#60399f25f141d649707cef928b90305057000923"
+  integrity sha512-1TcpWUEpzCQ7FjtwO1j+l/UvNgrEDZWfQm4kOo9eVZVDNKavYo+KL4XXHeljSAOOGhI/plmpD3bvhfYoywOAFQ==
   dependencies:
     "@babel/runtime" "^7.20.0"
-    "@expo/cli" "0.10.13"
+    "@expo/cli" "0.10.14"
     "@expo/config" "8.1.2"
     "@expo/config-plugins" "7.2.5"
     "@expo/vector-icons" "^13.0.0"
@@ -12679,6 +12679,7 @@ wonka@^6.3.2:
   integrity sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==