diff --git a/front-end/src/components/agility/UI/TextAreaEditor.vue b/front-end/src/components/agility/UI/TextAreaEditor.vue
index b32185cf7..cab4664c5 100644
--- a/front-end/src/components/agility/UI/TextAreaEditor.vue
+++ b/front-end/src/components/agility/UI/TextAreaEditor.vue
@@ -1,5 +1,73 @@
+<template>
+  <div class="relative">
+    <IconButton class="h-fit" :class="btnStyle" type="button" @click="toggleTextAreaEditor">
+      <div class="w-[22px] h-[22px] rounded-full border border-[#9ca3af]"></div>
+    </IconButton>
+    <div class="absolute z-10  flex justify-between mt-4" :class="position" v-if="isTextAreaEdited">
+      <div class="modal-body">
+        <div class="flex mb-2">
+          <button
+            :class="{ 'bg-blue-500 text-white': isBold }"
+            @click="toggleBold"
+            class="bg-gray-300 hover:bg-gray-400 text-black-800 font-semibold py-2 px-4 rounded mr-2"
+          >
+            Bold
+          </button>
+          <button
+            :class="{ 'bg-blue-500 text-white': isItalic }"
+            @click="toggleItalic"
+            class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded mr-2"
+          >
+            Italic
+          </button>
+		   <button
+            :class="{ 'bg-blue-500 text-white': isOblique }"
+            @click="toggleOblique"
+            class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded mr-2"
+          >
+            Oblique
+          </button>
+        </div>
+        <div class="flex mb-2">
+          <label class="mr-2">Police :</label>
+          <select v-model="fontFamily" class="bg-white border border-gray-300 rounded px-2 py-1">
+            <option value="Arial">Arial</option>
+            <option value="Times New Roman">Times New Roman</option>
+            <option value="Verdana">Verdana</option>
+          </select>
+        </div>
+          <div class="flex mb-2">
+          <label class="mr-2">Alignment :</label>
+          <select v-model="fontAlignment" class="bg-white border border-gray-300 rounded px-2 py-1">
+            <option value="left">Left</option>
+            <option value="center">Center</option>
+            <option value="right">Right</option>
+          </select>
+        </div>
+        <div class="flex mb-2">
+          <label class="mr-2">Taille :</label>
+          <select v-model="fontSize" class="bg-white border border-gray-300 rounded px-2 py-1">
+            <option value="12">Petit</option>
+            <option value="16">Moyen</option>
+            <option value="20">Grand</option>
+          </select>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
 <script lang="ts" setup>
+
+defineProps<{
+	position: string;
+	btnStyle?: string;
+}>()
 import { ref, computed, watch } from 'vue';
+
+
+import IconButton from '@/components/common/buttons/Icon.vue';
 import { useProjectStore } from '@/store/modules/project.store';
 import { GenericContainer } from '@/lib/pixi-tools-v2/class/genericContainer';
 import { LineContainer } from '@/lib/pixi-tools-v2/class/lineContainer';
@@ -7,96 +75,78 @@ import { FramedContainer } from '@/lib/pixi-tools-v2/class/framedContainer';
 import { useThemeStore } from '@/store/modules/theme.store';
 import { TextContainer } from '@/lib/pixi-tools-v2/class/textContainer';
 
-interface TextAreaEditor {
-	font_size: number;
-}
 
-defineProps<{
-	position: string;
-}>();
+const isTextAreaEdited = ref(false);
+const isBold = ref(false);
+const isItalic = ref(false);
+const isOblique = ref(false);
 
-const projectStore = useProjectStore();
-const themeStore = useThemeStore();
-const isDark = computed(() => themeStore.theme);
 
-//! It's hard to watch an array of object without using deep, but deep is too exaustive there.
+const projectStore = useProjectStore();
 const selectedContainers = computed(() => projectStore.getSelected);
-//! This is used to trigger the watch, that's its sole purpose.
-const selectedUUID = computed(() => selectedContainers.value.map((ctn) => ctn.uuid));
-
-const colorPickerOpen = ref(false);
-const color = ref();
-
-const changeColor = (col: ColorPickerUpdate) => {
-	if (col.hex === '' || col.hex === '#') return;
-	color.value = col.hex;
-
-	const len = selectedContainers.value.length;
-	for (let n = 0; n < len; n++) {
-		const graphic = selectedContainers.value[n].getGraphicChildren()[0];
-		graphic.color = hexToDecim(col.hex);
-		graphic.alpha = col?.rgba?.a ?? 1;
-		graphic.draw({
-			x: graphic.x,
-			y: graphic.y,
-			width: graphic.width,
-			height: graphic.height,
-			//@ts-ignore
-			radius: graphic.radius,
-		});
-
-		if (projectStore.scene.viewport.socketPlugin) {
-			const parent = graphic.parent;
-			// TODO: Thomas, remove this when readuy for the live editing
-			if (parent instanceof TextContainer) continue;
-			if (parent instanceof GenericContainer || parent instanceof LineContainer) {
-				projectStore.scene.viewport.socketPlugin.emit(
-					'ws-element-colorized',
-					parent.uuid,
-					parent.serializedColorimetry(),
-				);
-			} else {
-				const frame = parent.parent as FramedContainer;
-				projectStore.scene.viewport.socketPlugin.emit(
-					'ws-element-colorized',
-					frame.uuid,
-					frame.serializedColorimetry(),
-				);
-			}
-		}
-	}
-};
-
-const toggleColorPicker = () => {
-	colorPickerOpen.value = !colorPickerOpen.value;
-};
-
-watch(colorPickerOpen, (val) => {
+const fontFamily = ref('Arial');
+const fontAlignment = ref('left');
+const fontSize = ref('12');
+
+
+const toggleTextAreaEditor = () => {
+	isTextAreaEdited.value = !isTextAreaEdited.value;
+	console.log(isTextAreaEdited.value );
+}
+
+watch(isTextAreaEdited, (val) => {
 	projectStore.scene.viewport.manager.isEditingContainerProperties = val;
-});
-
-watch(selectedUUID, () => {
-	colorPickerOpen.value = false;
-	const len = selectedContainers.value.length;
-	if (len === 0 || len > 1) {
-		color.value = undefined;
-	} else {
-		const graphic = selectedContainers.value[0].getGraphicChildren()[0];
-
-		// TODO: The librarby doesn't seem to convert hex with opacity, it's a bit.. unfortunate.
-		color.value = addOpacityToHex(decimToHex(graphic.color), graphic.alpha);
-	}
-});
-</script>
+})
 
-<style lang="scss">
-.hu-color-picker {
-	width: fit-content !important;
+const toggleItalic = () => {
+  isItalic.value = !isItalic.value;
+  const ctn = selectedContainers.value[0]
+  if (ctn instanceof TextContainer && isItalic) {
+    ctn.textGraphic.textSprite.fontStyle = "italic";
+  }
+  else  ctn.textGraphic.textSprite.fontStyle = "normal";
 }
+const toggleBold = () => {
+  isBold.value = !isBold.value;
+  const ctn = selectedContainers.value[0]
+  if (ctn instanceof TextContainer && isBold) {
+      ctn.textGraphic.textSprite.fontWeight = "bold";
+  }
+  else if (ctn instanceof TextContainer) ctn.textGraphic.textSprite.fontWeight = "bold";
+  else return;
+    projectStore.scene.viewport.socketPlugin.emit(
+      'ws-text-updated',
+      ctn.uuid,
+      ctn.serializeData()
+    )
+}
+const toggleOblique= () => {
+  isOblique.value = !isOblique.value;
+  const ctn = selectedContainers.value[0]
+  if (ctn instanceof TextContainer && isOblique) {
+    ctn.textGraphic.textSprite.fontStyle = "oblique";
+
 
-.multicolor {
-	background: linear-gradient(217deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70.71%),
-		linear-gradient(127deg, rgba(0, 255, 0, 1), rgba(0, 255, 0, 0) 70.71%),
-		linear-gradient(336deg, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0) 70.71%);
+  }
+  else if (ctn instanceof TextContainer) ctn.textGraphic.textSprite.fontStyle = "normal";
+  else return;
+    projectStore.scene.viewport.socketPlugin.emit(
+      'ws-text-updated',
+      ctn.uuid,
+      ctn.serializeData()
+    )
 }
-</style>
+
+
+
+
+
+const GetTextArea = ()=> {
+  const ctn = selectedContainers.value[0]
+  if (ctn instanceof TextContainer) {    
+  }
+			if(parent instanceof TextContainer){
+       
+			} 
+}
+</script>
diff --git a/front-end/src/components/agility/UI/ToolsEditor.vue b/front-end/src/components/agility/UI/ToolsEditor.vue
index aebe5befd..a02a36be6 100644
--- a/front-end/src/components/agility/UI/ToolsEditor.vue
+++ b/front-end/src/components/agility/UI/ToolsEditor.vue
@@ -10,7 +10,7 @@
 				background="gradiant"
 				class="h-9"
 			>
-				<SvgArrows class="fill-white-icon dark:fill-white-icon" />
+			<SvgArrows class="fill-white-icon dark:fill-white-icon" />
 			</DefaultButton>
 		</div>
 		<div class="grow flex h-full gap-1 items-center">
@@ -171,6 +171,7 @@
 		<ShareProject v-if="isShareModalOpen" @close="closeShareModal" />
 		<ManageUser v-if="isOwner && isManagerModalOpen" @close="closeManagerModal" />
 		<BlueprintModal v-if="isBlueprintModalOpen" @close="closeBlueprintModal" />
+		<TextAreaEditor v-if="isTextAreaEdited" @close="openTextAreaEdited"></TextAreaEditor>
 		<div class="flex h-full gap-1 items-center">
 			<IconButton class="h-fit" type="button" @click="openManagerModal" v-if="isOwner">
 				<SvgGear width="22" height="22" class="!fill-gray-400" />
@@ -195,6 +196,7 @@ import { useProjectStore } from '@/store/modules/project.store';
 import { type MenuOptions, ContextMenu, ContextMenuItem } from '@imengyu/vue3-context-menu';
 import { DownloadType, LiteralGeometryTypes } from '@/lib/pixi-tools-v2/types/pixi-enums';
 
+import TextAreaEditor from '@/components/agility/UI/TextAreaEditor.vue';
 import BlueprintModal from '@/components/agility/modals/Blueprint.vue';
 import ColorPickerOption from '@/components/agility/UI/ColorPickerOption.vue';
 import ShareProject from '@/components/agility/UI/ShareProject.vue';
diff --git a/front-end/src/components/retrospective/CreateRetro.vue b/front-end/src/components/retrospective/CreateRetro.vue
index eb19a5820..c5b5d3292 100644
--- a/front-end/src/components/retrospective/CreateRetro.vue
+++ b/front-end/src/components/retrospective/CreateRetro.vue
@@ -28,13 +28,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, onMounted } from 'vue';
 import Overlay from '@/components/retrospective/utils/Overlay.vue';
 import ChooseTemplate from './ChooseTemplate.vue';
 import DefaultButton from '@/components/common/buttons/Default.vue';
 import { useCourseStore } from '@/store/course.store';
 import { useAuthStore } from '@/store/modules/auth.store';
 import { Roles } from '@/store/interfaces/auth.interfaces';
+import { http } from '@/api/network/axios';
 
 export default defineComponent({
 	components: {
@@ -50,7 +51,6 @@ export default defineComponent({
 		const isPO = computed(() => authStore.user.role === Roles.USER ? false : true);
 		const allCourses = computed(() => courseStore.allCourses);
 
-
 		const chooseTemplate = () => {
 			active.value = true;
 			if (displayTemplate.value === false) {
@@ -60,6 +60,24 @@ export default defineComponent({
 			}
 		};
 
+		onMounted(async() => {
+			await isProductOwner();
+		})
+
+		const isProductOwner = async () => {
+			// Je vois avec Louis ce qu'il veut faire parce que pas compris, bref
+			// Utiliser une fonction fléchée
+			try {
+				const response = await http.get(`/calls/is_product_owner/`);
+				// TODO: Kevin - Ici, il faut définir la valeur de isPO (Kevin met en anglais ton commentaire sinon baston)
+				// this.isPO = response.data.isPO;
+				isPO.value = true;
+			} catch (error) {
+				console.error(error);
+				// this.isPO = false;
+				isPO.value = true;
+			}
+		};
 
 		return {
 			chooseTemplate,
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
index 23c449f6a..06b940df6 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
@@ -13,7 +13,6 @@ import {
 } from '../model/template';
 
 export const GeometryTypes = {
-	//TODO Mettre les objet à la place via constructeur - Thomas
 
 	rectangle: Rectangle,
 	circle: Circle,