diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 0869719..71efac4 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -16,7 +16,6 @@ import { Center } from 'native-base';
 import LoadingComponent from './components/Loading';
 import ProfileView from './views/ProfileView';
 import useColorScheme from './hooks/colorScheme';
-import VirtualPiano from './components/VirtualPiano/VirtualPiano';
 
 const Stack = createNativeStackNavigator();
 
@@ -42,8 +41,6 @@ export const Router = () => {
 	});
 	const colorScheme = useColorScheme();
 
-	return <VirtualPiano />
-
 	return (
 		<NavigationContainer theme={colorScheme == 'light'
 			? DefaultTheme
diff --git a/front/components/VirtualPiano/PianoKeyComp.tsx b/front/components/VirtualPiano/PianoKeyComp.tsx
index b408c60..e473b68 100644
--- a/front/components/VirtualPiano/PianoKeyComp.tsx
+++ b/front/components/VirtualPiano/PianoKeyComp.tsx
@@ -1,5 +1,4 @@
 import { Box, Pressable, Text } from "native-base";
-import { Key } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import {
 	Note,
diff --git a/front/components/VirtualPiano/VirtualPiano.tsx b/front/components/VirtualPiano/VirtualPiano.tsx
index a169a9c..085c550 100644
--- a/front/components/VirtualPiano/VirtualPiano.tsx
+++ b/front/components/VirtualPiano/VirtualPiano.tsx
@@ -1,6 +1,7 @@
 import { Row, Box } from "native-base";
 import React, { useState, useEffect } from "react";
 import Octave from "./Octave";
+import { StyleProp, ViewStyle } from "react-native";
 import {
 	Note,
 	PianoKey,
@@ -21,6 +22,7 @@ type VirtualPianoProps = Parameters<typeof Row>[0] & {
 	showNoteNames: NoteNameBehavior; // default "onpress"
 	highlightedNotes: Array<HighlightedKey>;
 	showOctaveNumbers: boolean;
+	style: StyleProp<ViewStyle>;
 };
 
 const VirtualPiano = ({
@@ -33,6 +35,7 @@ const VirtualPiano = ({
 	showNoteNames,
 	highlightedNotes,
 	showOctaveNumbers,
+	style,
 }: VirtualPianoProps) => {
 	const notesList: Array<Note> = [
 		Note.C,
@@ -49,19 +52,20 @@ const VirtualPiano = ({
 		octaveList.push(octaveNum);
 	}
 
+    const octaveWidthExpr = `calc(100% / ${octaveList.length})`;
+
 	return (
-		<Row>
+		<Row style={style}>
 			{octaveList.map((octaveNum) => {
 				return (
 					<Octave
-						width={"350px"}
-						height={"200px"}
+						style={{ width: octaveWidthExpr, height: "100%" }}
 						key={octaveNum}
 						number={octaveNum}
 						showNoteNames={showNoteNames}
 						showOctaveNumber={showOctaveNumbers}
-						highlightedNotes={highlightedNotes.filter(
-							(n) => n.key.octave ? n.key.octave == octaveNum : true
+						highlightedNotes={highlightedNotes.filter((n) =>
+							n.key.octave ? n.key.octave == octaveNum : true
 						)}
 						startNote={octaveNum == startOctave ? startNote : notesList[0]}
 						endNote={
@@ -77,22 +81,16 @@ const VirtualPiano = ({
 };
 
 VirtualPiano.defaultProps = {
-	onNoteDown: (n) => {
-		console.log("Note down: " + keyToStr(n));
-	},
-	onNoteUp: (n) => {
-		console.log("Note up: " + keyToStr(n));
-	},
+	onNoteDown: (_n: PianoKey) => {},
+	onNoteUp: (_n: PianoKey) => {},
 	startOctave: 2,
 	startNote: Note.C,
 	endOctave: 6,
 	endNote: Note.C,
 	showNoteNames: NoteNameBehavior.onpress,
-	highlightedNotes: [
-		{ key: strToKey("D3") },
-		{ key: strToKey("A#"), bgColor: "#00FF00" },
-	],
+	highlightedNotes: [],
 	showOctaveNumbers: true,
+    style: {},
 };
 
 export default VirtualPiano;
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index ff531ab..28d1900 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -3,7 +3,7 @@ import { SafeAreaView, Platform } from 'react-native';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import {  Box, Center, Column, Progress, Text, Row, View, useToast, Icon } from 'native-base';
 import IconButton from '../components/IconButton';
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import { useQuery, useQueryClient } from 'react-query';
 import API from '../API';
@@ -13,6 +13,8 @@ import { useStopwatch } from 'react-timer-hook';
 import SlideView from '../components/PartitionVisualizer/SlideView';
 import MidiPlayer from 'midi-player-js';
 import SoundFont from 'soundfont-player';
+import VirtualPiano from '../components/VirtualPiano/VirtualPiano';
+import { strToKey, keyToStr, Note } from '../models/Piano';
 
 type PlayViewProps = {
 	songId: number
@@ -40,6 +42,7 @@ const PlayView = () => {
 	const timer = useStopwatch({ autoStart: false });
 	const [paused, setPause] = useState<boolean>(true);
 	const [midiPlayer, setMidiPlayer] = useState<MidiPlayer.Player>();
+	const [isVirtualPianoVisible, setVirtualPianoVisible] = useState<boolean>(false);
 	
 	const partitionRessources = useQuery(["partition", songId], () =>
 		API.getPartitionRessources(songId)
@@ -153,6 +156,41 @@ const PlayView = () => {
 			<View style={{ flexGrow: 1 }}>
 				<SlideView sources={partitionRessources.data} speed={200} startAt={0} />
 			</View>
+			
+			{isVirtualPianoVisible && <Column
+				style={{
+					display: 'flex',
+					justifyContent: "flex-end",
+					alignItems: "center",
+					height: '20%',
+					width: '100%',
+				}}
+			>
+				<VirtualPiano
+					onNoteDown={(note: any) => {
+						console.log("On note down", keyToStr(note));
+					}}
+					onNoteUp={(note: any) => {
+						console.log("On note up", keyToStr(note));
+					}}
+					showOctaveNumbers={true}
+					startNote={Note.C}
+					endNote={Note.B}
+					startOctave={2}
+					endOctave={5}
+					style={{
+						width: '80%',
+						height: '100%',
+					}}
+					highlightedNotes={
+						[
+							{ key: strToKey("D3") },
+							{ key: strToKey("A#"), bgColor: "#00FF00" },
+						]
+					}
+
+				/>
+			</Column>}
 			<Box shadow={4} style={{ height: '12%', width:'100%', borderWidth: 0.5, margin: 5 }}>
 				<Row justifyContent='space-between' style={{ flexGrow: 1, alignItems: 'center' }} >
 					<Column space={2} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -175,6 +213,12 @@ const PlayView = () => {
 								onPause();
 							}
 						}}/>
+						<IconButton size='sm' colorScheme='coolGray' variant='solid' _icon={{
+							as: MaterialCommunityIcons
+							, name: isVirtualPianoVisible ? "piano-off" : "piano"
+						}} onPress={() => {
+							setVirtualPianoVisible(!isVirtualPianoVisible);
+						}}/>
 						<Text>{timer.minutes}:{timer.seconds.toString().padStart(2, '0')}</Text>
 						<IconButton size='sm' colorScheme='coolGray' variant='solid' icon={
 							<Icon as={Ionicons} name="stop"/>