diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5558323b9a95e53825a222ac444c8a5ee5f8f23a
--- /dev/null
+++ b/src/components/InputFields/BaseInput.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  inputId: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div>
+    <label :for="inputId">{{ label }}</label>
+    <input :type="props.type"
+           class="form-control"
+           :placeholder="props.placeholder"
+           :id="inputId" required />
+    <div class="invalid-feedback">Invalid {{ label }}</div>
+    <div class="valid-feedback">Correct {{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Login/Login.vue b/src/components/Login/Login.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25469a19d2cbd3c352545218fe480114ae8c6181
--- /dev/null
+++ b/src/components/Login/Login.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import LoginForm from '@/components/Login/LoginForm.vue'
+</script>
+
+<template>
+  <div class="container-fluid">
+    <LoginForm/>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b0da2a71cf6b6b87f27c8feaff2ef259c951520
--- /dev/null
+++ b/src/components/Login/LoginForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const handleSubmit = () => {
+  alert("Expected to be logged in when backend are finished") // Todo remove this line
+}
+</script>
+
+<template>
+  <div class="container-fluid">
+    <form id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput id="usernameInput"
+                 input-id="username"
+                 type="text"
+                 label="Username"
+                 placeholder="Enter username"/>
+      <BaseInput id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 label="Password"
+                 placeholder="Enter password"/>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Login"></button1>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.container-fluid {
+  height: 91vh;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+
+#usernameInput, #passwordInput, #confirmButton {
+  margin: 15px 0;
+}
+
+#confirmButton {
+  justify-content: center;
+}
+
+#loginForm {
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  width: 40%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
deleted file mode 100644
index 2533202008f7270910420c60a420efaf9b505c90..0000000000000000000000000000000000000000
--- a/src/components/__tests__/HelloWorld.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})
diff --git a/src/views/Authentication/LoginView.vue b/src/views/Authentication/LoginView.vue
index 9095328987e0c5479f039dd59d667f0533d4cb71..a2aa0f410c32b81ef253338a1b657b19d732e442 100644
--- a/src/views/Authentication/LoginView.vue
+++ b/src/views/Authentication/LoginView.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import Footer from '@/components/BaseComponents/Footer.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import Login from '@/components/Login/Login.vue'
+</script>
+
 <template>
-    Hallo
-</template>
\ No newline at end of file
+  <Menu/>
+  <Login/>
+  <Footer/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 58542e7572cfd117267c3f71e29c25dc9ea000f7..f30d4244a9ec682c7a3c4d1c8a9bc3575779e181 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+
 </script>
 
 <template>
-    Hallo
+    <RouterLink to="login">Login</RouterLink>
 </template>