diff --git a/front/MyINPulse-front/eslint.config.js b/front/MyINPulse-front/eslint.config.js
new file mode 100644
index 0000000..0fe1e5b
--- /dev/null
+++ b/front/MyINPulse-front/eslint.config.js
@@ -0,0 +1,29 @@
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default typescriptEslint.config(
+    { ignores: ["*.d.ts", "**/coverage", "**/dist"] },
+    {
+        extends: [
+            eslint.configs.recommended,
+            ...typescriptEslint.configs.recommended,
+            ...eslintPluginVue.configs["flat/recommended"],
+        ],
+        files: ["**/*.{ts,vue}"],
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            globals: globals.browser,
+            parserOptions: {
+                parser: typescriptEslint.parser,
+            },
+        },
+        rules: {
+            // your rules
+        },
+    },
+    eslintConfigPrettier
+);
diff --git a/front/MyINPulse-front/src/components/HeaderComponent.vue b/front/MyINPulse-front/src/components/HeaderComponent.vue
new file mode 100644
index 0000000..b285ca1
--- /dev/null
+++ b/front/MyINPulse-front/src/components/HeaderComponent.vue
@@ -0,0 +1,26 @@
+<template>
+    <header>
+        <img src="./icons/logo inpulse.png" alt="INPulse" />
+    </header>
+</template>
+
+<script lang="ts">
+export default {
+    name: "HeaderComponent",
+};
+</script>
+
+<style scoped>
+header img {
+    width: 100px;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+}
+</style>
diff --git a/front/MyINPulse-front/src/components/ProjectComponent.vue b/front/MyINPulse-front/src/components/ProjectComponent.vue
new file mode 100644
index 0000000..c3d9f29
--- /dev/null
+++ b/front/MyINPulse-front/src/components/ProjectComponent.vue
@@ -0,0 +1,130 @@
+<template>
+    <div @click="goToLink" class="project">
+        <div class="project-header">
+            <h2 >{{ projectName }}</h2>
+            <div class="project-buttons">
+                <button class="contact-btn">Contact</button>
+            </div>
+        </div>
+        <div class="project-body">   
+            <ul>
+                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
+
+
+const props = defineProps<{
+    projectName: string;
+    listName: string[];
+    projectLink: string;
+}>();
+
+const router = useRouter();
+
+const goToLink = () => {
+  if (props.projectLink) {
+    router.push(props.projectLink);
+  }
+ 
+};
+</script>
+
+
+<style scoped>
+.project {
+    background: linear-gradient(to right, #f4f4f4, #ffffff);
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+  }
+  
+  /* Header Styling */
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .project-header h2 {
+    font-size: 20px;
+    color: #333;
+    margin: 0;
+  }
+  
+  /* Button Container */
+  .project-buttons {
+    display: flex;
+    gap: 10px;
+  }
+
+
+  .info-btn {
+    background-color: #4CAF50;
+    color: #fff;
+  }
+  
+  .info-btn:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+  }
+  
+  .contact-btn {
+    background-color: #007BFF;
+    color: #fff;
+  }
+  
+  .contact-btn:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+  }
+  
+
+
+
+  .project-body {
+    margin-top: 15px;
+  }
+  
+  .project-body p {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 10px;
+  }
+  
+  .project-body ul {
+    list-style-type: disc;
+    margin: 0;
+    padding-left: 20px;
+  }
+  
+  .project-body ul li {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+  }
+
+
+  button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+  button:hover {
+    background-color: #0056b3;
+  }
+
+</style>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/views/testComponent.vue b/front/MyINPulse-front/src/views/testComponent.vue
new file mode 100644
index 0000000..9ba1d5a
--- /dev/null
+++ b/front/MyINPulse-front/src/views/testComponent.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { store } from "../main.ts";
+import { callApi } from "@/services/api.ts";
+</script>
+
+<template>
+    <h1>Test page</h1>
+    <table class="test" style="width: 100%">
+        <tbody>
+            <tr>
+                <td>Is Currently Authenticated ?</td>
+                <td>{{ store.authenticated }}</td>
+                <td>
+                    <button @click="store.login">Login</button>
+                </td>
+                <td>
+                    <button @click="store.logout">Logout</button>
+                </td>
+                <td>
+                    <button @click="store.signup">Signup</button>
+                </td>
+            </tr>
+            <tr>
+                <td>current token</td>
+                <td>{{ store.user.token }}</td>
+                <td>
+                    <button @click="store.refreshUserToken">Refresh</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Current refresh token</td>
+                <td>{{ store.user.refreshToken }}</td>
+            </tr>
+            <tr>
+                <td>Entrepreneur API call</td>
+                <td>
+                    <button @click="callApi('random')">call</button>
+                </td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Admin API call</td>
+                <td>
+                    <button @click="callApi('random2')">call</button>
+                </td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Unauth API call</td>
+                <td>
+                    <button @click="callApi('random3')">call</button>
+                </td>
+                <td>res</td>
+                <td id="3"></td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+table {
+    width: 100px;
+    table-layout: fixed;
+}
+
+tr {
+    width: 100%;
+    height: 100%;
+}
+
+td {
+    border: solid 1px black;
+    width: 20%;
+    height: 100%;
+    overflow: hidden;
+}
+</style>