diff --git a/src/App.svelte b/src/App.svelte
index e8ef384..61e987c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,6 +2,7 @@
 	import Navbar from './components/NavBar.svelte';
 	import Profile from './components/Profile.svelte';
 	import MatchHistory from './components/MatchHistory.svelte';
+	import Friends from './components/Friends.svelte';
 	let isProfileOpen = false; 
 	function clickProfile() {
 	  isProfileOpen = true;
@@ -11,12 +12,34 @@
 	  isHistoryOpen = true;
 	}
 	let matches = [
-		{winner : "Alice", loser : "Bob"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+	]
+	let isFriendOpen = false;
+	function clickFriends() {
+	  isFriendOpen = true;
+	}
+	let friends = [
+		{username : "Alice", status : "online"},
+		{username : "Bob", status : "online"},
+		{username : "Charlie", status : "offline"},
+		{username : "Dave", status : "offline"},
+		{username : "Eve", status : "online"},
+		{username : "Frank", status : "online"},
 	]
 </script>
 
 <main>
-	<Navbar clickProfile={clickProfile} clickHistory={clickHistory} />
+	<Navbar clickProfile={clickProfile} clickHistory={clickHistory} clickFriends={clickFriends} />
+	{#if isFriendOpen}
+	  <div on:click={() => isFriendOpen = false} on:keydown={() => isFriendOpen = false}>
+		<Friends friends={friends} />
+	  </div>
+	{/if}
 	{#if isHistoryOpen}
 	  <div on:click={() => isHistoryOpen = false} on:keydown={() => isHistoryOpen = false}>
 		<MatchHistory matches={matches} />
diff --git a/src/components/Friends.svelte b/src/components/Friends.svelte
new file mode 100644
index 0000000..857836f
--- /dev/null
+++ b/src/components/Friends.svelte
@@ -0,0 +1,42 @@
+<script>
+    export let friends = [];
+</script>
+
+<div class="overlay">
+    <div class="history">
+        <div>
+            {#if friends.length > 0}
+                {#each friends.slice(0, 10) as friends}
+                    <li>
+                        <span>{friends.username} is {friends.status}</span>
+                    </li>
+                {/each}
+            {:else}
+                <p>No friends to display</p>
+            {/if}
+        </div>
+    </div>
+</div>
+  
+<style>
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 9998;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .history {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 1rem;
+        width: 300px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/MatchHistory.svelte b/src/components/MatchHistory.svelte
index 030bf94..2fb1aef 100644
--- a/src/components/MatchHistory.svelte
+++ b/src/components/MatchHistory.svelte
@@ -6,12 +6,14 @@
     <div class="history">
         <div>
             {#if matches.length > 0}
-            {#each matches as match}
-                <li>
-                    <span>{match.winner} vs {match.loser}</span>
-                    <span>{match.winner} won 1-0</span>
-                </li>
-            {/each}
+                {#each matches.slice(0, 10) as match}
+                    <li>
+                        <span>{match.winner} vs {match.loser}</span>
+                        <span>{match.winner} won 1-0</span>
+                        <span>points won : {match.points}</span>
+                        <span>rank #{match.rank}</span>
+                    </li>
+                {/each}
             {:else}
                 <p>No matches to display</p>
             {/if}
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 075ec15..9564b86 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -5,16 +5,25 @@
     { text: "Spectate", url: "/Spectate"},
     { text: "Chat", url: "/Chat"},
     { text: "History", url: "/History"},
+    { text: "Friends", url: "/Friends"},
     { text: "Profile", url: "/Profile" }
   ];
-  export let clickProfile;
-  export let clickHistory;
+  export let clickProfile = () => {};
+  export let clickHistory = () => {};
+  export let clickFriends = () => {};
 </script>
 
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
-      {#if link.text === "Profile" || link.text === "History"}
+      {#if link.text === "Profile" || link.text === "History" || link.text === "Friends"}
+        {#if link.text === "Friends"}
+          <li>
+            <button on:click={clickFriends}>
+              <p>Friends</p>
+            </button>
+          </li>
+        {/if}
         {#if link.text === "Profile"}
           <li>
             <button on:click={clickProfile}>