diff --git a/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte b/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte
new file mode 100644
index 00000000..af6094c2
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pages/SpectatorMatchList.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import MatchListElem from "../pieces/MatchListElem.svelte";
+
+	let arr = [
+		{
+			id: "match-01",
+			playerOneUsername: "toto",
+			playerTwoUsername: "bruno",
+		},
+		{
+			id: "match-02",
+			playerOneUsername: "bertand",
+			playerTwoUsername: "cassandre",
+		},
+		{
+			id: "match-03",
+			playerOneUsername: "madeleine",
+			playerTwoUsername: "jack",
+		},
+	];
+</script>
+<!--  -->
+
+<menu>
+	{#each arr as match}
+		<MatchListElem match={match}/>
+	{/each}
+</menu>
+
+
+<!--  -->
+<style>
+</style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/MatchListElem.svelte b/srcs/requirements/svelte/api_front/src/pieces/MatchListElem.svelte
new file mode 100644
index 00000000..22a65dc3
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pieces/MatchListElem.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let match: {
+		id: string,
+		playerOneUsername: string,
+		playerTwoUsername: string
+	};
+
+</script>
+<!--  -->
+
+<li>
+	{match.id} "{match.playerOneUsername}" VS "{match.playerTwoUsername}"
+</li>
+
+
+<!--  -->
+<style>
+</style>
diff --git a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
index f21ac83a..55ff9f47 100644
--- a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
+++ b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
@@ -5,7 +5,8 @@ import TwoFactorAuthentication from '../pages/TwoFactorAuthentication.svelte';
 import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
 import { wrap } from 'svelte-spa-router/wrap'
 import TestPage from '../pages/TmpTestPage.svelte';
-import Game from '../pages/game/Game.svelte'
+import Game from '../pages/game/Game.svelte';
+import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
 
 
 
@@ -13,6 +14,7 @@ export const primaryRoutes = {
   '/': SplashPage,
   '/2fa': TwoFactorAuthentication,
   '/game': Game,
+  '/matchlist': SpectatorMatchList,
   '/test': wrap({
     component: TestPage,
     conditions: [