diff --git a/front/components/CompetenciesTable.tsx b/front/components/CompetenciesTable.tsx
index 6dc772c..628d346 100644
--- a/front/components/CompetenciesTable.tsx
+++ b/front/components/CompetenciesTable.tsx
@@ -2,6 +2,7 @@ import { useNavigation } from "@react-navigation/core";
 import { HStack, VStack, Text, Progress, Pressable } from "native-base";
 import { translate } from "../i18n/i18n";
 import Card from './Card';
+
 type CompetenciesTableProps = {
 	pedalsCompetency: number;
 	rightHandCompetency: number;
diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index 6acc31d..3093038 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -17,6 +17,7 @@ export const en = {
 	recentlyPlayed: 'Recently played',
 	search: 'Search',
 	lastSearched: "Last searched",
+	levelProgress: 'good notes',
 
 	// competencies
 	pedalsCompetency: 'Pedals',
@@ -47,7 +48,7 @@ export const fr: typeof en = {
 	recentlyPlayed: "Récemment joués",
 	lastSearched: "Dernières recherches",
 	search: 'Rechercher',
-	
+	levelProgress: 'bonnes notes',
 
 	// competencies
 	pedalsCompetency: 'Pédales',
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index bf0b686..951e135 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useQuery } from "react-query";
 import API from "../API";
 import LoadingComponent from "../components/Loading";
-import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } from 'native-base';
+import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading, Divider } from 'native-base';
 import { useNavigation } from "@react-navigation/native";
 import SongCardGrid from '../components/SongCardGrid';
 import CompetenciesTable from '../components/CompetenciesTable'
@@ -13,13 +13,16 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 	const nextLevel = level + 1;
 	const nextLevelThreshold = nextLevel * 1000;
 	const progessValue = 100 * xp / nextLevelThreshold;
-	return <VStack alignItems={'center'}>
-		<Text>{`${translate('level')} ${level}`}</Text>
-		<Box w="90%" maxW="400">
-			<Progress value={progessValue} mx="4" />
-		</Box>
-		<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
-	</VStack>
+
+	return (
+		<VStack alignItems={'center'}>
+			<Text>{`${translate('level')} ${level}`}</Text>
+			<Box w="90%" maxW="400">
+				<Progress value={progessValue} mx="4" />
+			</Box>
+			<Text>{xp} / {nextLevelThreshold} {translate('levelProgress')}</Text>
+		</VStack>
+	);
 }
 
 const HomeView = () => {
@@ -28,6 +31,7 @@ const HomeView = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
+
 	if (!userQuery.data) {
 		return <Box style={{ flexGrow: 1, justifyContent: 'center' }}>
 			<LoadingComponent/>
@@ -35,12 +39,14 @@ const HomeView = () => {
 	}
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
+
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
 				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
 				<Box flex={1}>
 					<ProgressBar xp={userQuery.data.xp}/>
 				</Box>
 			</Box>
+
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
 					<SongCardGrid
@@ -52,23 +58,28 @@ const HomeView = () => {
 							songId: 1
 						}))}
 					/>
+
 					<Flex style={{ flexDirection }}>
 						<Box flex={1} paddingY={5}>
 							<Heading>{translate('mySkillsToImprove')}</Heading>
 							<Box padding={5}>
 								<CompetenciesTable
-									pedalsCompetency={Math.random() * 100}
+									pedalsCompetency=	{Math.random() * 100}
 									rightHandCompetency={Math.random() * 100}
-									leftHandCompetency={Math.random() * 100}
-									accuracyCompetency={Math.random() * 100}
-									arpegeCompetency={Math.random() * 100}
-									chordsCompetency={Math.random() * 100}
+									leftHandCompetency=	{Math.random() * 100}
+									accuracyCompetency=	{Math.random() * 100}
+									arpegeCompetency=	{Math.random() * 100}
+									chordsCompetency=	{Math.random() * 100}
 								/>
 							</Box>
 						</Box>
-						<Box flex={1}>
+
+						<Divider orientation="vertical" w="1"/>
+
+						<Box flex={1} padding={5}>
 							<SongCardGrid
 								heading={translate('recentlyPlayed')}
+								maxItemPerRow={2}
 								songs={[ ...Array(4).keys() ].map(() => ({
 									albumCover: "",
 									songTitle: "Song",
@@ -76,22 +87,33 @@ const HomeView = () => {
 									songId: 1
 								}))}
 							/>
-						</Box>
+						</Box>						
 					</Flex>
 				</Box>
+
 				<VStack padding={5} flex={1} space={10}>
-					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
-					</Box>
-					<SongCardGrid
-						heading={translate('lastSearched')}
-						songs={[ ...Array(4).keys() ].map(() => ({
-							albumCover: "",
-							songTitle: "Song",
-							artistName: "Artist",
-							songId: 1
-						}))}
-					/>
+
+						<Box style={{flexDirection: 'row'}}>
+
+							<Divider orientation="vertical" w="1"/>
+
+							<Box flex="2" padding={5}>
+								<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
+									<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
+								</Box>
+								
+								<SongCardGrid
+									maxItemPerRow={2}
+									heading={translate('lastSearched')}
+									songs={[ ...Array(4).keys() ].map(() => ({
+										albumCover: "",
+										songTitle: "Song",
+										artistName: "Artist",
+										songId: 1
+									}))}
+								/>
+							</Box>
+						</Box>
 				</VStack>
 			</Box>
 		</Box>