diff --git a/frontend/public/i18n/EN.txt b/frontend/public/i18n/EN.txt
index 8ffb03d..870abdb 100644
--- a/frontend/public/i18n/EN.txt
+++ b/frontend/public/i18n/EN.txt
@@ -4,5 +4,5 @@ login.guest.login=log in
 login.guest.register=register
 login.guest.welcome=Please Register here
 login.success=You are now registered as $name 
-
+login.guest.firstname= Firstname
 #=====================================================
diff --git a/frontend/public/i18n/FR.txt b/frontend/public/i18n/FR.txt
index caf4165..4f651ae 100644
--- a/frontend/public/i18n/FR.txt
+++ b/frontend/public/i18n/FR.txt
@@ -4,5 +4,5 @@ login.guest.login=s'identifier
 login.guest.register=s'enregistrer
 login.guest.welcome=Veuillez vous enregistrer ici
 login.success=Vous êtes maintenant identifié comme $name 
-
+login.guest.firstrname= Prénom
 #=====================================================
diff --git a/frontend/src/Login.vue b/frontend/src/Login.vue
index 52e7e19..4c9250a 100644
--- a/frontend/src/Login.vue
+++ b/frontend/src/Login.vue
@@ -1,22 +1,85 @@
+<script setup>
+  import { ref } from 'vue'
+  import i18n from './i18n.js'
+  
+  const formname = i18n(login.guest.forname)
+  const login= ref(true)
+  const page = ref(0)
+
+  const message = ref("")
+</script>
+
+
 <template>
   <body>
     <div class="logBoxCenterer">
       <div class='loginBox'>
-        <div class="form">
-          <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
-          <div class="inputBox">
-            <p>USERNAME</p>
-            <input type="text" required>
+      
+        <div v-if="login">
+          <div class="form">
+            <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
+              <div class="inputBox">
+                <p>USERNAME</p>
+                
+                <input type="text" required>
+              </div>
+              <div class="inputBox">
+                <p>PASSWORD</p>
+                <input type="password" required>
+              </div>
+              <div class="register">
+                <a @click="login=!login">Register</a>
+              </div>
+              <div class="inputBox">
+                <input type="submit" value="Login">
+              </div>
+            </div>
           </div>
-          <div class="inputBox">
-            <p>PASSWORD</p>
-            <input type="password" required>
-          </div>
-          <div class="register">
-            <a>Register</a>
-          </div>
-          <div class="inputBox">
-            <input type="submit" value="Login">
+
+          <div v-else>
+            <div class="form">
+            <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">WELCOME TO THE UNIVERSITY</h1>
+
+            <div v-if="page=== 0">
+              <div class="inputBox">
+                <p>LASTNAME</p>
+                <input type="text" required>
+              </div>
+              <div class="inputBox">
+                <p>{{ forname }}</p>
+                <input type="text" required>
+              </div>
+              <div class="inputBox">
+                <p>PASSWORD</p>
+                <input type="password" required>
+              </div>
+              <div class="inputBox">
+                <button @click="page++">Next page</button>
+              </div>
+              <div @click="(login=!login) && (page=0)" class="register">
+                <a>Already Registered</a>
+              </div>
+            </div>
+            <div v-else>
+              <div class="inputBox">
+                <p>E-MAIL</p>
+                <input type="mail" required>
+              </div>
+              <div class="inputBox">
+                <p>ADDRESS</p>
+                <input type="text" required>
+              </div>
+              <div class="inputBox">
+                <p>COUNTRY</p>
+                <input type="text" required>
+              </div>
+              <div class="inputBox">
+                <button @click="page--">Last page</button>
+              </div>
+              <div @click="(login=!login) && (page=0)" class="register">
+                <a>Already Registered</a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -83,20 +146,24 @@
 .register{
   color:rgb(239,60,168);
   width: 100%;
-  align-items:center;
   display:flex;
-  justify-content: center;
   cursor: pointer;
 }
 
-input[type = "submit"] {
+
+button , input[type = "submit"] {
+  margin-top:40px;
+  margin-bottom:20px;
   background-color: rgb(239,60,168);
   cursor: pointer;
   padding:10px;
   font-size:1.35em;
+  border:none;
+  border-radius:20px;
+
 }
 
-input[type = "submit"]:active{
+button:active , input[type = "submit"]:active{
   opacity:0.8;
 
 }
