diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ef68173..114cacc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,11 +8,13 @@
   import LoginPage from './Apps/Login.vue'
   import Inscription from "./Apps/Inscription.vue"
   import Profil from "./Apps/Profil.vue"
+  import Courses from "./Apps/ManageCourses.vue" 
 
   const apps = {
   	'/login': LoginPage,
 	'/inscription': Inscription,
-  '/profil': Profil
+  '/profil': Profil,
+  '/manage-courses' : Courses,
   }
   const currentPath = ref(window.location.hash)
 
@@ -97,8 +99,12 @@
             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
             <div class="text">{{i18n("app.forum")}}</div></a></li>
         <li><a href="#/inscription">
-            <div class="fa-solid fa-users" style="font-size: 40px;"></div>
-            <div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
+            <div class="fa-solid fa-users" style="align-self:center;font-size: 40px;"></div>
+            <div class="text" style="top:0;">{{i18n("app.inscription.requests")}}</div></a></li>
+
+        <li><a href="#/manage-courses">
+            <div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div>
+            <div class="text">Manage courses</div></a></li>
     </ul>
 
     </div>
@@ -246,7 +252,6 @@
 	  }
 
 	  .text {
-		position: absolute;
 		right: 0%;
 		width: 0%;
 		opacity: 0;
@@ -258,9 +263,9 @@
 
 	  ul.vertical:hover .text {
 		opacity: 1;
-		width: 70%;
+		width: 60%;
 		transition-duration: .3s;
-		padding-left: 5px;
+		padding-left: 15px;
 	  }
     
 </style>
diff --git a/frontend/src/Apps/ManageCourses.vue b/frontend/src/Apps/ManageCourses.vue
new file mode 100644
index 0000000..d006f32
--- /dev/null
+++ b/frontend/src/Apps/ManageCourses.vue
@@ -0,0 +1,78 @@
+<script setup>
+const cursus=[
+  {
+  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Operating Systems",
+  "credits": 8,
+  "faculty": "science",
+  "teacher": 14,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+
+  ]
+</script>
+<template>
+  <div class="body">
+    <div  class="listElement " v-for="item in cursus">
+      <div class=" containerElement">
+        <div class="name"> {{item.name}} </div>
+        <div class="teacher">{{item.teacher}}</div> 
+        <div class="credits">Credits:{{item.credits}}</div>  
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+ .containerElement{ 
+   justify-content:center;
+    display:grid;
+    grid-template-columns:350px 350px 200px;
+    grid-template-areas:
+    "name teacher credits"; 
+    column-gap:10px;
+    
+  }
+  
+  .name {
+    grid-area:name;
+    align-self:center;
+  }
+
+  .teacher{
+    grid-area:teacher;
+    align-self:center;
+  }
+
+  .credits{
+    grid-area:credits;
+    align-self:center;
+  }
+
+.listElement{
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  margin-bottom:10px;
+}
+</style>