diff --git a/frontend/src/Apps/Forums.vue b/frontend/src/Apps/Forums.vue
new file mode 100644
index 0000000..3e777e2
--- /dev/null
+++ b/frontend/src/Apps/Forums.vue
@@ -0,0 +1,138 @@
+<!----------------------------------------------------
+	File: Forums.vue 
+	Author: Anthony Debucquoy 
+	Scope: Extension messagerie
+	Description: Forum des étudiants
+----------------------------------------------------->
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { getCourses } from '@/rest/courses.js'
+import { ForumsOfCurrentCourse, getForumsOfCourse } from '@/rest/forum.js'
+import { PostsOfCurrentForum, getPostsOfForum } from '@/rest/forum.js'
+import { fetchedPost, fetchPost } from '@/rest/forum.js'
+
+const courses = await reactive(getCourses());
+const selectedCourse = ref();
+const selectedForum = ref();
+
+</script>
+
+<template>
+	<div id="app">
+		<div id="ForumSelector">
+			<select id="cours" value="" v-model="selectedCourse"  @change="getForumsOfCourse(selectedCourse)">
+				<option v-for="course in courses" :value="course.courseId">{{course.title}}</option>
+			</select>
+
+			<select id="forum" value="" v-model="selectedForum"  @change="getPostsOfForum(selectedForum)" v-if="ForumsOfCurrentCourse != null">
+				<option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option>
+			</select>
+		</div>
+		<div id="PostSelector" v-if="PostsOfCurrentForum != null">
+			<div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.name }}</div>
+			<!--button id="createPost" @click="createPost()">+</button-->
+		</div>
+		<div id="PostViewer" v-if="fetchedPost != null">
+			<div id="Post">
+				<h1>{{ fetchedPost.subject }}</h1>
+				{{fetchedPost.content}}
+			</div>
+			<div id="Messages">
+				<p v-for="msg in fetchedPost.messages">{{msg.author}} - {{msg.content}}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+#app{
+	display: grid;
+	width: 100%;
+	height: 100%;
+	grid-template: 5em auto / 25% 75%;
+}
+
+#ForumSelector{
+	background-color: #FFFFFF0E;
+	grid-column: 1 / 3;
+	border-radius: 100px;
+	margin: 10px;
+	display: flex;
+	justify-content: space-around;
+}
+
+#ForumSelector select{
+	background-color: #ffa000;
+	border: none;
+	margin: 10px;
+	border-radius: 10px;
+	width: 200px;
+	text-align: center;
+}
+
+#ForumSelector button{
+	background-color: green;
+	border: none;
+	border-radius: 25%;
+	margin: 10px;
+}
+
+#PostSelector{
+	background-color: #FFFFFF0E;
+	border-radius: 0 25px 25px 0;
+	margin: 10px 0 10px 10px;
+	overflow: hidden;
+	padding: 10px;
+
+	display: flex;
+	flex-direction: column;
+
+}
+
+.postItem{
+	color: darkorange;
+	display: flex;
+	font-family: sans-serif;
+	font-weight: bold;
+	height: 4vh;
+	margin: 5px;
+	border-radius: 0 30px 30px 0;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid darkorange;
+}
+
+.postItem:hover{
+	background-color: gray;
+}
+
+#PostViewer{
+	background-color: #FFFFFF0E;
+	border-radius: 25px;
+	margin: 10px;
+
+	max-height: 100%;
+
+	overflow: scroll;
+}
+
+#Post{
+	padding: 25px;
+
+}
+
+#Messages{
+	padding: 25px;
+	border-top: 3px dotted white;
+
+}
+
+#Messages > p {
+
+	background-color: orange;
+}
+
+</style>
+
diff --git a/frontend/src/rest/apps.js b/frontend/src/rest/apps.js
index 99cbc10..344e22a 100644
--- a/frontend/src/rest/apps.js
+++ b/frontend/src/rest/apps.js
@@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import Forums from '@/Apps/Forums.vue'
 
 const apps = {
 		'/login': LoginPage,
@@ -17,12 +18,13 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/forums': Forums,
 }
 
 const appsList = {
 		'Msg': { path: '#/msg', icon: 'fa-comment', text: i18n("app.messages") },
 		'Notification': { path: '#/notifs', icon: 'fa-bell', text: i18n("app.notifications") },
-		'Forum': { path: '#/forum', icon: 'fa-envelope', text: i18n("app.forum") },
+		'Forum': { path: '#/forums', icon: 'fa-envelope', text: i18n("app.forum") },
 		'Schedule': { path: '#/schedule', icon: 'fa-calendar-days', text: i18n("app.schedules") },
 		'Inscription': { path: '#/inscription', icon: 'fa-users', text: i18n("app.inscription.requests") },
 		'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
diff --git a/frontend/src/rest/forum.js b/frontend/src/rest/forum.js
new file mode 100644
index 0000000..7920a33
--- /dev/null
+++ b/frontend/src/rest/forum.js
@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import { restGet, restPost, restDelete, restPatch } from './restConsumer.js'
+
+/**
+ * List forums of a course
+ */
+export async function getForumsOfCourse(id){
+	ForumsOfCurrentCourse.value = [
+		{
+			id: 1,
+			name: "forum~1" 
+		},
+		{
+			id: 2,
+			name: "forum~2" 
+		},
+	]
+	// ForumsOfCurrentCourse = await restGet("/forums/" + id)
+}
+
+export const ForumsOfCurrentCourse = ref();
+
+/**
+ * List post of a specified forum
+ */
+export async function getPostsOfForum(id){
+	PostsOfCurrentForum.value = [
+		{
+			id: 1,
+			name: "Post~1" 
+		},
+		{
+			id: 2,
+			name: "Post~2" 
+		},
+	] 
+	// PostsCurrentForum.value = await restGet("/forum/" + id);
+}
+
+export const PostsOfCurrentForum = ref();
+
+/**
+ * Get a post and its responses
+ */
+export async function fetchPost(id){
+	fetchedPost.value = {
+		id: 1,
+		subject: "This is the subject of the post",
+		content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+		messages: [
+			{
+				id: 1,
+				author: "author~1",
+				content: "J'ai pas copris le message !"
+			},
+			{
+				id: 2,
+				author: "author~2",
+				content: "tu as fait une faute dans ton message..."
+			},
+			{
+				id: 3,
+				author: null,
+				content: "I'm anonymous noww..."
+			}
+		]
+	}
+	// fetchedPost.value = await restGet("/forum/post/" + id);
+}
+
+export const fetchedPost = ref();