diff --git a/front-end/src/components/RessourcesComponents/AddCourse.vue b/front-end/src/components/RessourcesComponents/AddCourse.vue
index 57b0f23b..a89d36a3 100644
--- a/front-end/src/components/RessourcesComponents/AddCourse.vue
+++ b/front-end/src/components/RessourcesComponents/AddCourse.vue
@@ -6,21 +6,34 @@
 				Ajouter un cours
 			</h3>
 			<div class="modal-body">
-				<form class="w-full max-w-sm">
-					<input type="text" name="title" v-model="tag" placeholder="Title :" /><br />
+				<form class="grid gap-6 my-6 md:grid-cols-2 justify-items-center">
+					<input
+						type="text"
+						name="title"
+						v-model="tag"
+						placeholder="Title :"
+						class="form-control w-full sm:w-[300px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+					/>
 					<VueDatePicker
 						placeholder="debut"
 						v-model="periodStart"
 						:format="dateFormat"
 						:language="datePickerLanguage"
+						class="form-control w-full sm:w-[300px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 					/>
 					<VueDatePicker
 						placeholder="fin"
 						v-model="periodEnd"
 						:format="dateFormat"
 						:language="datePickerLanguage"
+						class="form-control w-full sm:w-[300px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+					/>
+					<input
+						type="url"
+						placeholder="picture link"
+						v-model="picture"
+						class="form-control w-full sm:w-[300px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 					/>
-					<input type="url" placeholder="picture link" v-model="picture" /><br />
 					<input
 						type="text"
 						name="language"
@@ -28,13 +41,20 @@
 						placeholder="Language :"
 						@input="searchLanguage"
 						autocomplete="off"
+						class="form-control w-full sm:w-[300px] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 					/>
 					<ul v-if="showSuggest">
 						<li v-for="suggest in languageSuggest" :key="suggest" @click="selectSuggest(suggest)">
 							{{ suggest }}
 						</li>
 					</ul>
-					<input type="file" id="file" ref="fileInput" @change="onFileSelected" />
+					<input
+						type="file"
+						id="file"
+						ref="fileInput"
+						@change="onFileSelected"
+						class="block w-full sm:w-30 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+					/>
 					<div class="flex justify-center mt-6">
 						<button
 							class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
@@ -77,7 +97,7 @@ export default {
 			project: [],
 			site: '',
 			teacherId: '',
-            languages: [],
+			languages: [],
 			languageSuggest: [],
 			showSuggest: false,
 			dateFormat: 'yyyy-MM-dd HH:mm',
diff --git a/front-end/src/components/RessourcesComponents/CoursDetails.vue b/front-end/src/components/RessourcesComponents/CoursDetails.vue
index b2f1ee19..3e965d44 100644
--- a/front-end/src/components/RessourcesComponents/CoursDetails.vue
+++ b/front-end/src/components/RessourcesComponents/CoursDetails.vue
@@ -24,24 +24,24 @@
 			</h2>
 		</div>
 		<div class="contenu-cours">
-			<h4 class="text-2xl font-bold mb-2 border-b border-gray-300">Contenu du cours</h4>
-			<ul class="space-y-4">
+			<h4 class="ml-2 text-2xl font-bold mb-2 border-b border-gray-300">Contenu du cours</h4>
+			<ul class="space-y-4 ml-9">
 				<li v-for="course in courses" :key="course.id">
 					<div class="course-item" :class="{ open: course.open }" @click="toggleCourse(course)">
-						<h5 class="text-xl font-semibold">{{ course.title }}</h5>
+						<div class="flex items-center">
+							<a :href="course.files[0].url" target="_blank" class="flex items-center">
+								<Book class="mr-2" />
+								<h5 class="text-xl font-semibold">{{ course.title }}</h5>
+							</a>
+						</div>
 						<p class="text-gray-600">{{ course.description }}</p>
 					</div>
-					<div v-if="course.open" class="course-files bg-gray-100 p-4">
-						<ul class="space-y-2">
-							<li v-for="file in course.files" :key="file.id">
-								<a :href="file.url" target="_blank" class="text-blue-500">{{ file.name }}</a>
-							</li>
-						</ul>
-					</div>
 				</li>
 			</ul>
-			<h4 class="text-2xl font-bold mb-2 mt-3 border-b border-gray-300">Groupes</h4>
-			<ul class="space-y-4">
+			<h4 class="ml-2 text-2xl font-bold mb-2 mt-3 border-b border-gray-300">
+				Groupes (Dashboard)
+			</h4>
+			<ul class="space-y-4 ml-9">
 				<li v-for="(canva, index) in canvas" :key="canva.id">
 					<h2 class="text-xl font-semibold">Groupe {{ index + 1 }}</h2>
 					<button
@@ -53,22 +53,29 @@
 					</button>
 				</li>
 			</ul>
+			<h4 class="ml-2 text-2xl font-bold mb-2 mt-3 border-b border-gray-300">Rétro</h4>
+			<ul class="space-y-4 ml-9">
+				<div class="contenu-cours" v-if="retro">
+					<button
+						@click="goToRetro(retro)"
+						class="flex justify-center items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded"
+					>
+						<Clipboard class="mr-2" />
+						{{ retro.title }}
+					</button>
+				</div>
+			</ul>
 		</div>
 	</div>
 	<div class="flex w-full gap-4 justify-center mt-4">
-		<div class="contenu-cours" v-if="retro">
-			<h4 class="text-2xl font-bold mb-2 border-b border-gray-300 text-gray-900 dark:text-white">
-				Contenu du cours
-			</h4>
-			<div class="flex justify-center">
-				<button
-					@click="goToRetro(retro)"
-					class="flex justify-center items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded"
-				>
-					<Clipboard class="mr-2" />
-					{{ retro.title }}
-				</button>
-			</div>
+		<div class="flex justify-center">
+			<button
+				@click="returnToCourse"
+				class="flex justify-center items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 mb-3 rounded"
+			>
+				<ArrowLeft class="mr-2" />
+				Retour
+			</button>
 		</div>
 	</div>
 </template>
@@ -76,8 +83,11 @@
 import { computed, onMounted } from 'vue';
 import { useCoursStore } from '@/store/modules/course.store';
 import { useRouter } from 'vue-router';
+
 import Board from '@/components/common/svg/Board.vue';
 import Clipboard from '@/components/common/svg/Clipboard.vue';
+import ArrowLeft from '@/components/common/svg/ArrowLeft.vue';
+import Book from '@/components/common/svg/Book.vue';
 
 // get store
 const course = useCoursStore();
@@ -90,35 +100,28 @@ const router = useRouter();
 const courses = [
 	{
 		id: 1,
-		title: 'Cours 1',
-		description: 'Description du cours 1',
+		title: 'Backlog',
+		description: 'Backlog de la semaine',
 		open: false,
 		files: [
-			{ id: 1, name: 'Fichier 1', url: '#' },
-			{ id: 2, name: 'Fichier 2', url: '#' },
-			{ id: 3, name: 'Fichier 3', url: '#' },
+			{
+				id: 1,
+				name: 'Fichier 1',
+				url: 'https://cdn.discordapp.com/attachments/892146093872259113/1119231010777870388/BacklogPGP-1.pdf',
+			},
 		],
 	},
 	{
 		id: 2,
-		title: 'Cours 2',
-		description: 'Description du cours 2',
+		title: 'Image',
+		description: 'PHP',
 		open: false,
 		files: [
-			{ id: 4, name: 'Fichier 4', url: '#' },
-			{ id: 5, name: 'Fichier 5', url: '#' },
-			{ id: 6, name: 'Fichier 6', url: '#' },
-		],
-	},
-	{
-		id: 3,
-		title: 'Cours 3',
-		description: 'Description du cours 3',
-		open: false,
-		files: [
-			{ id: 7, name: 'Fichier 7', url: '#' },
-			{ id: 8, name: 'Fichier 8', url: '#' },
-			{ id: 9, name: 'Fichier 9', url: '#' },
+			{
+				id: 2,
+				name: 'Fichier 4',
+				url: 'https://cdn.discordapp.com/attachments/892146093872259113/1119231656885239930/K8DkEqSzlXEAAAAASUVORK5CYII.png',
+			},
 		],
 	},
 ];
@@ -149,6 +152,10 @@ onMounted(async () => {
 	await getCourseById(_id.value);
 });
 
+const toggleCourse = (course) => {
+	course.open = !course.open;
+};
+
 const goToProject = (canva) => {
 	router.push(`/app/agility/project/${canva._id}`);
 };
@@ -156,6 +163,10 @@ const goToProject = (canva) => {
 const goToRetro = (retro) => {
 	router.push(`/app/retrospective/${retro.slug}`);
 };
+
+const returnToCourse = () => {
+	router.push(`/app/ressource/cours/`);
+};
 </script>
 <style scoped>
 .display {
diff --git a/front-end/src/components/RessourcesComponents/OpenHousesDetails.vue b/front-end/src/components/RessourcesComponents/OpenHousesDetails.vue
index 3baa1114..2c281d4b 100644
--- a/front-end/src/components/RessourcesComponents/OpenHousesDetails.vue
+++ b/front-end/src/components/RessourcesComponents/OpenHousesDetails.vue
@@ -21,7 +21,7 @@
 							</div>
 						</div>
 						<label for="title" class="block mb-2 text-lg font-medium text-gray-900 dark:text-white"
-							>Commentaire</label
+							>Lien</label
 						>
 						<div class="mb-6">
 							<input
@@ -29,10 +29,10 @@
 								v-model="link"
 								rows="1"
 								class="p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-								placeholder="Écrire un commentaire..."
+								placeholder="Entrer un lien"
 							/>
 						</div>
-
+						<!--input type="file" id="file" ref="fileInput" @change="onFileSelected" /-->
 						<div>
 							<button
 								type="submit"
@@ -134,6 +134,9 @@ const closeDocumentModal = () => {
 	addDocumentModal.value = false;
 };
 
+let selectedFile = null;
+let base64String = '';
+
 // form data
 const name = ref('');
 const link = ref('');
@@ -141,7 +144,7 @@ const link = ref('');
 // Function to post the data to the API
 const addDocument = async (id) => {
 	// add verification if all the fields are filled
-	if (!name.value || !link.value) {
+	if (!name.value || !link.value || !base64String) {
 		Swal.fire({
 			title: 'You have to fill all the fields',
 			text: 'Please fill all the fields to add a new document',
@@ -156,11 +159,13 @@ const addDocument = async (id) => {
 	let data = {
 		name: name.value,
 		link: link.value,
+		file: base64String,
 	};
 
 	//reset the form
 	name.value = '';
 	link.value = '';
+	base64String = '';
 
 	Swal.fire({
 		title: 'Your document has been added',
@@ -176,6 +181,22 @@ const addDocument = async (id) => {
 	});
 };
 
+const onFileSelected = function (event) {
+	selectedFile = event.target.files[0];
+	convertToBase64();
+};
+
+const convertToBase64 = function () {
+	if (selectedFile) {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			let result = event.target.result;
+			base64String = result.toString();
+		};
+		reader.readAsDataURL(selectedFile);
+	}
+};
+
 const deleteDocument = async (id, document) => {
 	const documentRemoved = {
 		_id: document._id,
diff --git a/front-end/src/components/blog/AddArticles.vue b/front-end/src/components/blog/AddArticles.vue
index 4e6b06b3..e7677b88 100644
--- a/front-end/src/components/blog/AddArticles.vue
+++ b/front-end/src/components/blog/AddArticles.vue
@@ -292,7 +292,7 @@ const addArticle = async () => {
 		await articleStore.addArticle(data);
 	} else if (tags.value.toUpperCase() == 'JPO') {
 		let data = {
-			owner: authStore.user._id,
+			owner: owner,
 			title: title.value,
 			descriptions: description.value,
 			content: content.value,
diff --git a/front-end/src/components/common/svg/ArrowLeft.vue b/front-end/src/components/common/svg/ArrowLeft.vue
new file mode 100644
index 00000000..6c28d545
--- /dev/null
+++ b/front-end/src/components/common/svg/ArrowLeft.vue
@@ -0,0 +1,16 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="w-6 h-6"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
+		/>
+	</svg>
+</template>
diff --git a/front-end/src/components/common/svg/Book.vue b/front-end/src/components/common/svg/Book.vue
new file mode 100644
index 00000000..b919b47f
--- /dev/null
+++ b/front-end/src/components/common/svg/Book.vue
@@ -0,0 +1,16 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="w-6 h-6"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
+		/>
+	</svg>
+</template>
diff --git a/front-end/src/store/interfaces/article.interface.ts b/front-end/src/store/interfaces/article.interface.ts
index 73b232c1..72f703f0 100644
--- a/front-end/src/store/interfaces/article.interface.ts
+++ b/front-end/src/store/interfaces/article.interface.ts
@@ -58,4 +58,5 @@ export interface Documents {
 	_id: string;
 	name: string;
 	link: string;
+	//file: string;
 }
diff --git a/front-end/src/store/interfaces/cours.interface.ts b/front-end/src/store/interfaces/cours.interface.ts
index 78287a1a..62561aaf 100644
--- a/front-end/src/store/interfaces/cours.interface.ts
+++ b/front-end/src/store/interfaces/cours.interface.ts
@@ -25,6 +25,7 @@ export interface Course {
 	messages: Array<Message>;
 	projects: Array<string>;
 	retro: string;
+	files: string;
 }
 
 export interface Group {
diff --git a/front-end/src/store/modules/article.store.ts b/front-end/src/store/modules/article.store.ts
index a8e0b07e..a203c570 100644
--- a/front-end/src/store/modules/article.store.ts
+++ b/front-end/src/store/modules/article.store.ts
@@ -74,6 +74,7 @@ export const useArticleStore = defineStore('article', {
 						_id: '',
 						name: '',
 						link: '',
+						//file: '',
 					},
 				],
 			},
diff --git a/front-end/src/store/modules/course.store.ts b/front-end/src/store/modules/course.store.ts
index 67641f04..8d1cc933 100644
--- a/front-end/src/store/modules/course.store.ts
+++ b/front-end/src/store/modules/course.store.ts
@@ -12,16 +12,21 @@ export const useCoursStore = defineStore('course', {
 				{
 					_id: '',
 					tag: '',
-					classTag: '',
+					classId: '',
 					picture: '',
 					language: '',
 					createdAt: null,
 					periodStart: null,
 					periodEnd: null,
 					presence: [],
-					project: [],
+					projects: [],
 					site: '',
 					teacherId: '',
+					files: '',
+					groups: [],
+					isLocked: false,
+					messages: [],
+					retro: '',
 				},
 			],
 			oneItems: {},