diff --git a/package.json b/package.json
index 29aeb45..b3b6ed3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.2.5",
+    "axios": "^1.7.9",
+    "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
     "swagger-ui": "^5.18.2",
     "vue": "^3.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 477396c..c72e91a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,12 @@ importers:
       '@primevue/themes':
         specifier: ^4.2.5
         version: 4.2.5
+      axios:
+        specifier: ^1.7.9
+        version: 1.7.9
+      primeicons:
+        specifier: ^7.0.0
+        version: 7.0.0
       primevue:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.5.13)
@@ -730,6 +736,9 @@ packages:
     resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
+  primeicons@7.0.0:
+    resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
+
   primevue@4.2.5:
     resolution: {integrity: sha512-7UMOIJvdFz4jQyhC76yhNdSlHtXvVpmE2JSo2ndUTBWjWJOkYyT562rQ4ayO+bMdJLtzBGqgY64I9ZfEvNd7vQ==}
     engines: {node: '>=12.11.0'}
@@ -1855,6 +1864,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  primeicons@7.0.0: {}
+
   primevue@4.2.5(vue@3.5.13):
     dependencies:
       '@primeuix/styled': 0.3.2
diff --git a/src/App.vue b/src/App.vue
index 512963e..51e375b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,34 @@
 <script setup>
-import { RouterLink,RouterView } from 'vue-router'
+  import { RouterView } from 'vue-router'
+  import Menubar from 'primevue/menubar';
+  import { useRouter } from 'vue-router';
+  import Toast from 'primevue/toast';
 
+  const router = useRouter();
+
+  const menuItems =[
+    {
+      label: 'Accueil',
+      command:() => router.push({name:'home'}),
+      icon: 'pi pi-home',
+    },
+    {
+      label:'Login',
+      command:() => router.push({name:'login'}),
+      icon:'pi pi-user',
+    },
+    {
+      label:'Swagger',
+      command:() => router.push({name:'swagger'}),
+      icon:'pi pi-cog',
+    }
+  ];
 </script>
 
 <template>
-    <h1>Hello App!</h1>
-    <p>
-      <strong>Current route path:</strong> {{ $route.fullPath }}
-    </p>
-    <nav>
-      <RouterLink to="/">Go to Home</RouterLink>
-      <RouterLink to="/login">Go to login</RouterLink>
-      <RouterLink to="/swagger">Go to swagger</RouterLink>
-    </nav>
-      <RouterView />
+  <h1>Hello App!</h1>
+  <Toast />
+  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
+  <Menubar :model="menuItems" />
+  <RouterView />
   </template>
\ No newline at end of file
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..314cac3
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'http://127.0.0.1:8000/api',
+  timeout: 2500,
+});
+
+export const createUser = async (userData) => {
+    const response = await api.post('/users', userData);
+    return response.data
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f228cab..9cb9bb0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,14 @@
 import { createApp } from 'vue'
 import './style.css'
-import App from './App.vue'
+import App from './app.vue'
 
 import PrimeVue from 'primevue/config';
-import Aura from '@primevue/themes/aura';
-
+import Aura from '@primevue/themes/material';
 import router from "./router"
+import 'primeicons/primeicons.css'
+import ToastService from 'primevue/toastservice';
+
+
 
 const app = createApp(App);
 app.use(PrimeVue,{
@@ -13,5 +16,6 @@ app.use(PrimeVue,{
         preset:Aura
     }
 });
+app.use(ToastService);
 app.use(router);
 app.mount("#app");
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index db627cf..faf8a7f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #ffffff;
+  background-color: #1d1d1d;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -25,6 +25,7 @@ a:hover {
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  color:rgb(255, 255, 255)
 }
 
 #app {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9263b9b..03afbbe 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,6 +3,6 @@
 </script>
 
 <template>
-<span style="color:crimson">Home</span>
+<span>Home</span>
 
 </template>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 84da69f..5ad2530 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,6 +1,60 @@
 <script setup>
+import { ref } from 'vue';
+import { createUser } from '../api.js';
+import { useToast } from 'primevue/usetoast';
+import PMessage from 'primevue/message';
+
+const username = ref('');
+const email = ref('');
+const password = ref('');
+const errors = ref({ username: '', email: '' });
+const toast = useToast();
+
+async function make_user() {
+  errors.value = { username: '', email: '' };
+  try {
+    await createUser({
+      username: username.value,
+      email: email.value,
+      password: password.value,
+    });
+    toast.add({ severity: 'success', summary: 'Succès', detail: 'Utilisateur créé !' });
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const data = error.response.data;
+      if (data.username) {
+        errors.value.username = data.username[0];
+      }
+      if (data.email) {
+        errors.value.email = data.email[0];
+      }
+    } else {
+      toast.add({ severity: 'error', summary: 'Erreur', detail: 'Une erreur est survenue.' });
+    }
+  }
+}
+
 </script>
 
 <template>
-  <span>StockSeeker Login</span>
+  <div class="container">  
+    <span>StockSeeker Login</span>
+    <div class="form-container">
+      <div class="form">
+        <label for="username">Username:</label>
+        <input type="text" class="p-inputtext" name="username" id="name" v-model="username" required>
+        <p-message v-if="errors.username" severity="error">{{ errors.username }}</p-message>
+      </div>
+      <div class="form">
+        <label for="email">email:</label>
+        <input type="text" name="email" id="email" v-model="email" class="p-inputtext" required>
+        <p-message v-if="errors.email" severity="error">{{ errors.email }}</p-message>
+      </div>
+      <div class="form">
+        <label for="password">password:</label>
+        <input type="password" name="password" id="password" v-model="password" class="p-inputtext" required>
+      </div>
+      <button @click="make_user" class="p-button p-component" type="button">S'inscrire</button>
+      </div>
+    </div>
 </template>