diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 6b0da2a71cf6b6b87f27c8feaff2ef259c951520..4e3ded323b6c63c384dc464c019e580c30020c7b 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -10,11 +10,11 @@ const handleSubmit = () => {
 <template>
   <div class="container-fluid">
     <form id="loginForm" @submit.prevent="handleSubmit">
-      <BaseInput id="usernameInput"
-                 input-id="username"
+      <BaseInput id="emailInput"
+                 input-id="email"
                  type="text"
-                 label="Username"
-                 placeholder="Enter username"/>
+                 label="Email"
+                 placeholder="Enter your email"/>
       <BaseInput id="passwordInput"
                  input-id="password"
                  type="password"
@@ -27,24 +27,16 @@ const handleSubmit = () => {
 
 <style scoped>
 .container-fluid {
-  height: 91vh;
-  display: grid;
-  justify-items: center;
-  align-items: center;
-}
-
-#usernameInput, #passwordInput, #confirmButton {
-  margin: 15px 0;
-}
-
-#confirmButton {
-  justify-content: center;
+    max-width: 450px;
 }
 
 #loginForm {
   display: flex;
   flex-direction: column;
-  min-width: 280px;
-  width: 40%;
+  justify-items: center;
+}
+
+#emailInput, #passwordInput, #confirmButton {
+  margin: 1rem 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/SignUp/SignUp.vue b/src/components/SignUp/SignUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4dff39dcd4bbe2a47e1471473d7a1632eb540827
--- /dev/null
+++ b/src/components/SignUp/SignUp.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import SignUpForm from '@/components/SignUp/SignUpForm.vue'
+</script>
+
+<template>
+  <SignUpForm/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..005282a5b91de749408479cdba30973fad820872
--- /dev/null
+++ b/src/components/SignUp/SignUpForm.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const handleSubmit = () => {
+  alert("Expected to be transferred to initial configuration") // Todo remove this line
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <form id="signUpForm" @submit.prevent="handleSubmit">
+      <BaseInput id="firstNameInput"
+                 input-id="first-name"
+                 type="text"
+                 label="First name"
+                 placeholder="Enter your first name"/>
+      <BaseInput id="surnameInput"
+                 input-id="surname"
+                 type="text"
+                 label="Surname"
+                 placeholder="Enter your surname"/>
+      <BaseInput id="emailInput"
+                 input-id="email"
+                 type="text"
+                 label="Email"
+                 placeholder="Enter your email"/>
+      <BaseInput id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 label="Password"
+                 placeholder="Enter password"/>
+      <BaseInput id="confirmPasswordInput"
+                 input-id="confirmPassword"
+                 type="password"
+                 label="Confirm Password"
+                 placeholder="Confirm password"/>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
+    </form>
+  </div>
+
+</template>
+
+<style scoped>
+
+.container {
+  max-width: 450px;
+}
+
+#signUpForm {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
+
+#firstNameInput, #surnameInput, #emailInput, #passwordInput, #confirmButton, #confirmPasswordInput {
+  margin: 1rem 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 98101c6423782c3fa0ebfca00d156b93fac31f5a..88d0b9eecac52b1ce32442bf6c9ca9e59ca88a4a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 // Import necessary dependencies from Vue Router and your views
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/Authentication/LoginView.vue';
+import SignUp from '@/components/SignUp/SignUp.vue'
 
 const routes = [
   {
@@ -36,6 +37,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/sign-up',
+    name: 'sign up',
+    component: () => import('@/views/Authentication/SignUpView.vue'),
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },
diff --git a/src/views/Authentication/SignUpView.vue b/src/views/Authentication/SignUpView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce0bd3ada3a372fbae632554d2e28bf02f92e162
--- /dev/null
+++ b/src/views/Authentication/SignUpView.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Footer from '@/components/BaseComponents/Footer.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import SignUp from '@/components/SignUp/SignUp.vue'
+</script>
+
+<template>
+  <Menu/>
+  <SignUp/>
+  <Footer/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f30d4244a9ec682c7a3c4d1c8a9bc3575779e181..70c5e6456e7f882ebbea3fa1476b4cae2fb52aa2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,5 +3,7 @@
 </script>
 
 <template>
-    <RouterLink to="login">Login</RouterLink>
+  <RouterLink to="login">Login</RouterLink>
+  <br/>
+  <RouterLink to="sign-up">Sign up</RouterLink>
 </template>