diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx
new file mode 100644
index 0000000..abf0296
--- /dev/null
+++ b/front/components/V2/SearchBar.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { Text, Select } from 'native-base'
+import { TextInput, View } from "react-native";
+import ButtonBase from "../UI/ButtonBase";
+import Artist from "../../models/Artist";
+import Song from "../../models/Song";
+import { AddSquare } from 'iconsax-react-native';
+
+const artistsDummy = [
+	{
+		id: 0,
+		name: 'Momo'
+	},
+	{
+		id: 1,
+		name: 'Beethoven'
+	},
+	{
+		id: 2,
+		name: 'Chopin'
+	},
+	{
+		id: 3,
+		name: 'Wolfgang'
+	},
+];
+
+const genreDummy = [
+	{
+		id: 0,
+		name: 'Rock',
+	},
+	{
+		id: 1,
+		name: 'Classical',
+	},
+	{
+		id: 2,
+		name: 'Pop',
+	},
+	{
+		id: 3,
+		name: 'Jazz',
+	},
+];
+
+
+const SearchBarComponent = () => {
+	const [isTriggered, setIsTriggered] = React.useState(false);
+	const [genre, setGenre] = React.useState('')
+	const [query, setQuery] = React.useState('')
+	const [artistSearch, setArtistSearch] = React.useState([] as Artist[]);
+	const [songSearch, setSongSearch] = React.useState([] as Song[]);
+
+	return (
+		<View>
+			<View style={{ borderBottomWidth: 1, borderBottomColor: '#9E9E9E', display: "flex", flexDirection: "row", margin: 5, padding: 16 }}>
+				<TextInput value={query} placeholder="What are you looking for ?" style={{ width: '100%', height: 20}} />
+				<ButtonBase type="outlined" />
+			</View>
+			<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+				<View style={{ flexDirection: "row",}}>
+					{artistsDummy.map((data) => (
+						<View style={{ flexDirection: "row", alignItems: "center", padding: 10, margin: 10}}>
+							<AddSquare size="32" color="#6075F9"/>
+							<Text ml={2} >{data.name}</Text>
+						</View>
+					))}
+				</View>
+				<View>
+					<Select selectedValue={genre} placeholder="Genre" accessibilityLabel="Genre" onValueChange={itemValue => setGenre(itemValue)}>
+					{genreDummy.map((data) => (
+						<Select.Item label={data.name} value={data.name}/>
+					))}
+					</Select>
+				</View>
+			</View>
+		</View>
+	)
+}
+
+export default SearchBarComponent;
\ No newline at end of file
diff --git a/front/views/LeaderboardView.tsx b/front/views/LeaderboardView.tsx
index 0eafcc9..90b6996 100644
--- a/front/views/LeaderboardView.tsx
+++ b/front/views/LeaderboardView.tsx
@@ -1,16 +1,19 @@
 import { Box, Heading, useBreakpointValue, ScrollView, Text } from 'native-base';
 import { View, Image } from 'react-native';
-import { useQuery } from 'react-query';
-import User from '../models/User';
+import { useQuery } from '../Queries';
 import API from '../API';
 import { Ionicons } from '@expo/vector-icons';
+import User from '../models/User';
 
 type PodiumCardProps = {
 	offset: number;
 	medalColor: string;
+	userAvatarUrl: string;
+	userPseudo: string;
+	userXp: number;
 };
 
-const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
+const PodiumCardComponent = ({ offset, medalColor, userAvatarUrl, userPseudo, userXp }: PodiumCardProps) => {
 	return (
 		<View
 			style={{
@@ -30,7 +33,7 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
 			>
 				<Image
 					source={{
-						uri: 'https://picsum.photos/140/140',
+						uri: userAvatarUrl,
 					}}
 					style={{
 						aspectRatio: 1,
@@ -55,7 +58,7 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
 					fontWeight: '500',
 				}}
 			>
-				Momo
+				{userPseudo}
 			</Text>
 			<Text
 				mt={1}
@@ -65,12 +68,17 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
 					fontWeight: '500',
 				}}
 			>
-				2400 LVL
+				{userXp} LVL
 			</Text>
 		</View>
 	);
 };
 
+type BoardRowProps = {
+	userPseudo: string;
+	userXp: number;
+}
+
 const BoardRowComponent = () => {
 	return (
 		<View
@@ -127,7 +135,6 @@ const BoardRowComponent = () => {
 			<View
 				style={{
 					backgroundColor: 'rgba(255, 255, 255, 0.50)',
-					// borderRadius: 8,
 					borderTopRightRadius: 8,
 					borderBottomRightRadius: 8,
 					width: 50,
@@ -182,7 +189,8 @@ const dummyScores = [
 ];
 
 const Leaderboardiew = () => {
-	// const scoresQuery = useQuery(API.getTopTwentyPlayers())
+	const scoresQuery = useQuery(API.getTopTwentyPlayers);
+
 	return (
 		<ScrollView style={{ marginBottom: 5 }}>
 			<View
@@ -208,9 +216,27 @@ const Leaderboardiew = () => {
 						marginBottom: 20,
 					}}
 				>
-					<PodiumCardComponent medalColor="#AE84FB" offset={80} />
-					<PodiumCardComponent medalColor="#EAD93C" offset={0} />
-					<PodiumCardComponent medalColor="#5F74F7" offset={60} />
+					<PodiumCardComponent
+						medalColor="#AE84FB"
+						offset={80}
+						userAvatarUrl={scoresQuery.data?.at(2)?.data.avatar ?? "fake image"}
+						userPseudo={scoresQuery.data?.at(2)?.name ?? "Momo"}
+						userXp={scoresQuery.data?.at(2)?.data.xp ?? 0}
+					/>
+					<PodiumCardComponent
+						medalColor="#EAD93C"
+						offset={0}
+						userAvatarUrl={scoresQuery.data?.at(0)?.data.avatar ?? "fake image"}
+						userPseudo={scoresQuery.data?.at(0)?.name ?? "Momo"}
+						userXp={scoresQuery.data?.at(0)?.data.xp ?? 0}
+					/>
+					<PodiumCardComponent
+						medalColor="#5F74F7"
+						offset={60}
+						userAvatarUrl={scoresQuery.data?.at(1)?.data.avatar ?? "fake image"}
+						userPseudo={scoresQuery.data?.at(1)?.name ?? "Momo"}
+						userXp={scoresQuery.data?.at(1)?.data.xp ?? 0}
+					/>
 				</View>
 				{dummyScores.map((comp, index) => (
 					<BoardRowComponent />
diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx
index 4c5bd35..af83f25 100644
--- a/front/views/SearchView.tsx
+++ b/front/views/SearchView.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import SearchBar from '../components/SearchBar';
+import SearchBarComponent from '../components/V2/SearchBar'
 import Artist from '../models/Artist';
 import Song from '../models/Song';
 import Genre from '../models/Genre';
 import API from '../API';
 import { useQuery } from '../Queries';
 import { SearchResultComponent } from '../components/SearchResult';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
 import { Filter } from '../components/SearchBar';
 import { ScrollView } from 'native-base';
 import { RouteProps } from '../Navigation';
@@ -99,8 +100,10 @@ const SearchView = (props: RouteProps<SearchViewProps>) => {
 						updateStringQuery,
 					}}
 				>
-					<SearchBar />
-					<SearchResultComponent />
+					<View style={{ display: 'flex' }}>
+						<SearchBarComponent />
+						<SearchResultComponent />
+					</View>
 				</SearchContext.Provider>
 			</SafeAreaView>
 		</ScrollView>