diff --git a/front/MyINPulse-front/src/App.vue b/front/MyINPulse-front/src/App.vue
index fd3e06e..52055c6 100644
--- a/front/MyINPulse-front/src/App.vue
+++ b/front/MyINPulse-front/src/App.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 import ErrorWrapper from "@/views/errorWrapper.vue";
+import ProjectComponent from "@/components/ProjectComponent.vue";
 </script>
 
 <template>
-  <Header />
+  <HeaderComponent />
   <error-wrapper></error-wrapper>
   <div id="main">
-      <ProjectComp 
+      <ProjectComponent
         v-for="(project, index) in projects" 
         :key="index"
         :project-name="project.name"
@@ -17,14 +18,12 @@ import ErrorWrapper from "@/views/errorWrapper.vue";
 </template>
 
 <script lang="ts">
-import Header from "@/components/Header.vue";
-import ProjectComp from "@/components/Project-comp.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
 
 export default {
   name: 'App',
   components: {
-    Header,
-    ProjectComp,
+    HeaderComponent,
   },
   data() {
     return {
diff --git a/front/MyINPulse-front/src/components/Header.vue b/front/MyINPulse-front/src/components/HeaderComponent.vue
similarity index 93%
rename from front/MyINPulse-front/src/components/Header.vue
rename to front/MyINPulse-front/src/components/HeaderComponent.vue
index cac4595..0aab002 100644
--- a/front/MyINPulse-front/src/components/Header.vue
+++ b/front/MyINPulse-front/src/components/HeaderComponent.vue
@@ -6,7 +6,7 @@
   
   <script lang="ts">
   export default {
-    name: 'Header',
+    name: 'HeaderComponent',
   };
   </script>
   
diff --git a/front/MyINPulse-front/src/components/Project-comp.vue b/front/MyINPulse-front/src/components/ProjectComponent.vue
similarity index 56%
rename from front/MyINPulse-front/src/components/Project-comp.vue
rename to front/MyINPulse-front/src/components/ProjectComponent.vue
index 3e060bb..a2d74d3 100644
--- a/front/MyINPulse-front/src/components/Project-comp.vue
+++ b/front/MyINPulse-front/src/components/ProjectComponent.vue
@@ -9,10 +9,15 @@
 
 
 <script lang="ts">
+import type {PropType} from "vue";
+
 export default {
-    name: 'Project',
+    name: 'ProjectComponent',
     props: {
-        projectName: String,
+        projectName: {
+          type: Object as PropType<string>,
+          required: true
+        },
     }
 }
 </script>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/errorModal.vue b/front/MyINPulse-front/src/components/errorModal.vue
index 0d7dd57..64b9ed8 100644
--- a/front/MyINPulse-front/src/components/errorModal.vue
+++ b/front/MyINPulse-front/src/components/errorModal.vue
@@ -1,12 +1,24 @@
 <script setup lang="ts">
-const props = defineProps(['data']);
+import {color} from "@/services/popupDisplayer.ts";
+import type {PropType} from "vue";
+
+defineProps({
+  errorMessage: {
+    type: Object as PropType<string>,
+    required: true
+  },
+  errorColor: {
+    type: Object as PropType<color>,
+    default: color.Red
+  }
+});
 </script>
 
 <template>
-  <div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
-    <p>{{data.errorMessage}}</p>
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
+  <div :class='["red", "yellow", "blue", "green"][errorColor]' class="error-modal">
+    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]}}</p>
+    <p>{{errorMessage}}</p>
+    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][errorColor]'></div>
   </div>
 </template>
 
diff --git a/front/MyINPulse-front/src/main.ts b/front/MyINPulse-front/src/main.ts
index 60f3509..af3fa73 100644
--- a/front/MyINPulse-front/src/main.ts
+++ b/front/MyINPulse-front/src/main.ts
@@ -3,10 +3,11 @@ import App from './App.vue'
 import router from './router/router.ts'
 import {createPinia} from "pinia";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import AuthStorePlugin from './plugins/authStore';
 import keycloakService from './services/keycloak';
-import {useAuthStore} from "@/stores/authStore.ts";
-let store: any;
+import {type AuthStore, useAuthStore} from "@/stores/authStore.ts";
+
+
+let store: AuthStore;
 
 keycloakService.CallInit(() => {
     try {
@@ -16,8 +17,8 @@ keycloakService.CallInit(() => {
         const pinia = createPinia();
         pinia.use(piniaPluginPersistedstate);
         app.use(pinia);
-        app.use(AuthStorePlugin, { pinia });
         store = useAuthStore();
+        keycloakService.CallInitStore(store);
         app.use(router)
 
         app.mount('#app');
diff --git a/front/MyINPulse-front/src/plugins/authStore.ts b/front/MyINPulse-front/src/plugins/authStore.ts
deleted file mode 100644
index 1a5c06e..0000000
--- a/front/MyINPulse-front/src/plugins/authStore.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// file: src/plugins/authStore.js
-
-import { useAuthStore } from "@/stores/authStore.ts";
-import keycloakService from '@/services/keycloak';
-// Setup auth store as a plugin so it can be accessed globally in our FE
-const authStorePlugin = {
-    install(app: any, option: any) {
-        const store = useAuthStore(option.pinia);
-        app.config.globalProperties.$store = store;
-        keycloakService.CallInitStore(store);
-    }
-}
-
-export default authStorePlugin;
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/router/router.ts b/front/MyINPulse-front/src/router/router.ts
index 70bb58a..1e8a246 100644
--- a/front/MyINPulse-front/src/router/router.ts
+++ b/front/MyINPulse-front/src/router/router.ts
@@ -9,7 +9,7 @@ const router = createRouter({
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/test.vue'),
+      component: () => import('../views/testComponent.vue'),
     },
   ],
 })
diff --git a/front/MyINPulse-front/src/services/api.ts b/front/MyINPulse-front/src/services/api.ts
index cea6a9e..8a68ad2 100644
--- a/front/MyINPulse-front/src/services/api.ts
+++ b/front/MyINPulse-front/src/services/api.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, {type AxiosError, type AxiosResponse} from "axios";
 import {store} from "@/main.ts";
 import {addNewMessage, color} from "@/services/popupDisplayer.ts";
 
@@ -34,21 +34,18 @@ axiosInstance.interceptors.response.use(
 );
 
 // TODO: spawn a error modal
-function defaultApiErrorHandler(err: string){
-    addNewMessage(err, color.Red);
+function defaultApiErrorHandler(err: AxiosError){
+    addNewMessage(err.message, color.Red);
 }
 
-function defaultApiSuccessHandler(response: any){
-    addNewMessage(response.data, color.green)
+function defaultApiSuccessHandler(response: AxiosResponse){
+    addNewMessage(response.data, color.Green)
 }
-function callApi(endpoint: string, onSuccessHandler?: any, onErrorHandler?: any): void {
+function callApi(endpoint: string, onSuccessHandler?: (response: AxiosResponse) => void, onErrorHandler?: (error: AxiosError) => void): void {
     axiosInstance.get(endpoint).then(
         onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
     ).catch(
-        (err) => {
-            onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
-            throw err;
-        }
+            onErrorHandler == null ? defaultApiErrorHandler: onErrorHandler
     )
 }
 
diff --git a/front/MyINPulse-front/src/services/keycloak.ts b/front/MyINPulse-front/src/services/keycloak.ts
index 6ca32df..9a8cb09 100644
--- a/front/MyINPulse-front/src/services/keycloak.ts
+++ b/front/MyINPulse-front/src/services/keycloak.ts
@@ -1,4 +1,5 @@
 import Keycloak from 'keycloak-js';
+import type {AuthStore} from "@/stores/authStore.ts";
 
 const options = {
     url: import.meta.env.VITE_KEYCLOAK_URL,
@@ -54,7 +55,7 @@ async function init(onInitCallback: () => void) {
  * Initializes store with Keycloak user data
  *
  */
-async function initStore(storeInstance: any) {
+async function initStore(storeInstance: AuthStore) {
     try {
         store = storeInstance
         console.log(keycloak)
diff --git a/front/MyINPulse-front/src/services/popupDisplayer.ts b/front/MyINPulse-front/src/services/popupDisplayer.ts
index 3b222a2..b5fddda 100644
--- a/front/MyINPulse-front/src/services/popupDisplayer.ts
+++ b/front/MyINPulse-front/src/services/popupDisplayer.ts
@@ -1,5 +1,19 @@
 import {ref} from "vue";
-enum color {Red, Yellow, Blue, green}
+import {type Ref} from "vue";
+enum color {Red, Yellow, Blue, Green}
+
+type ErrorMessageContent = {
+    message: string;
+    color: color;
+    id: number;
+    timeout: number;
+};
+
+let id: number = 0;
+const getId = () => {
+    id = id+1;
+    return id;
+}
 
 function addNewMessage(errorMessage: string, type?: color, timeout?: number){
     if (timeout == null){
@@ -9,11 +23,11 @@ function addNewMessage(errorMessage: string, type?: color, timeout?: number){
         type = color.Red;
     }
 
-    const data = {errorMessage: errorMessage, timeout: timeout, type: type, uid: Math.random()*100000};
+    const data: ErrorMessageContent = {message: errorMessage, timeout: timeout, color: type, id: getId()};
     errorList.value.push(data)
     setTimeout(() => errorList.value.slice(0, 1), timeout)
 }
 
-const errorList: any= ref([])
+const errorList: Ref<ErrorMessageContent[]>= ref([])
 
-export {addNewMessage, errorList, color}
\ No newline at end of file
+export {addNewMessage, errorList, color, type ErrorMessageContent}
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/stores/authStore.ts b/front/MyINPulse-front/src/stores/authStore.ts
index 9b0f345..e8304b1 100644
--- a/front/MyINPulse-front/src/stores/authStore.ts
+++ b/front/MyINPulse-front/src/stores/authStore.ts
@@ -1,10 +1,10 @@
 import { defineStore } from "pinia";
 import keycloakService from '@/services/keycloak';
 import type Keycloak from "keycloak-js";
-export const useAuthStore = defineStore("storeAuth", {
+
+const useAuthStore = defineStore("storeAuth", {
     state: () => {
         return {
-            testv: true,
             authenticated: false,
             user: {
                 token: "",
@@ -64,9 +64,6 @@ export const useAuthStore = defineStore("storeAuth", {
                 console.error(error);
             }
         },
-        test() {
-            this.testv = !this.testv;
-        },
         // Clear user's store data
         clearUserData() {
             this.authenticated = false;
@@ -77,4 +74,8 @@ export const useAuthStore = defineStore("storeAuth", {
             };
         }
     }
-});
\ No newline at end of file
+});
+
+type AuthStore = ReturnType<typeof useAuthStore>
+
+export {useAuthStore, type AuthStore}
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/views/errorWrapper.vue b/front/MyINPulse-front/src/views/errorWrapper.vue
index 1d56a2a..6c7a6ea 100644
--- a/front/MyINPulse-front/src/views/errorWrapper.vue
+++ b/front/MyINPulse-front/src/views/errorWrapper.vue
@@ -6,7 +6,7 @@ import ErrorModal from "@/components/errorModal.vue";
 
 <template>
 <div class="error-wrapper">
-  <error-modal v-for="elm in errorList" :data=elm></error-modal>
+  <error-modal v-for="elm in errorList" :key="elm.id" :error-message=elm.message :error-color="elm.color"></error-modal>
 </div>
 </template>
 
diff --git a/front/MyINPulse-front/src/views/test.vue b/front/MyINPulse-front/src/views/testComponent.vue
similarity index 86%
rename from front/MyINPulse-front/src/views/test.vue
rename to front/MyINPulse-front/src/views/testComponent.vue
index 90db6d1..a5324b8 100644
--- a/front/MyINPulse-front/src/views/test.vue
+++ b/front/MyINPulse-front/src/views/testComponent.vue
@@ -1,16 +1,7 @@
 <script setup lang="ts">
 import {store} from "../main.ts";
 import {callApi} from "@/services/api.ts";
-import ErrorModal from "@/components/errorModal.vue";
-import {errorList} from "@/services/popupDisplayer.ts";
 import TempModal from "@/components/temp-modal.vue";
-import ErrorWrapper from "@/App.vue";
-function addResToTable(id: any){
-  return (req: any) => {
-    console.log(req)
-  }
-}
-
 
 </script>