diff --git a/vue-project/assets/css/global.css b/vue-project/assets/css/global.css
new file mode 100644
index 0000000..dff8f97
--- /dev/null
+++ b/vue-project/assets/css/global.css
@@ -0,0 +1,4 @@
+body{
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/vue-project/index.html b/vue-project/index.html
index b19040a..1b0d2f0 100644
--- a/vue-project/index.html
+++ b/vue-project/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
+    <link rel="stylesheet" href="assets/css/global.css">
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/vue-project/src/App.vue b/vue-project/src/App.vue
index 644ff7f..2575515 100644
--- a/vue-project/src/App.vue
+++ b/vue-project/src/App.vue
@@ -1,5 +1,6 @@
 <script setup>
 import {ref} from "vue";
+import InputMask from "@/components/InputMask.vue";
 
 const name = 'your-name'
 const textClass = 'text'
@@ -15,6 +16,7 @@ function incrementCounter() {
   <h1 :class="textClass">Hello {{ name }}</h1>
   <button @click="incrementCounter">click me for cookies</button>
   You have {{ counter }} cookies
+  <InputMask/>
 </template>
 
 <style scoped>
diff --git a/vue-project/src/components/InputMask.vue b/vue-project/src/components/InputMask.vue
new file mode 100644
index 0000000..5892c3e
--- /dev/null
+++ b/vue-project/src/components/InputMask.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="input-mask">
+    <span>Ich bin InputMask.vue</span>
+    <form>
+      <label>
+        Modulkürzel
+        <input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
+      </label>
+      <label>
+        Note
+        <input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
+      </label>
+      <label>
+        Credits
+        <input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
+      </label>
+      <button type="submit">Note Eintragen</button>
+    </form>
+    <!-- @deleteEntry="deleteGrade"-->
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const grade_form_input = ref({
+  kuerzel: "",
+  note: 1.0,
+  credits: 5
+})
+
+</script>
+
+<style scoped>
+.input-mask {
+  background-color: aquamarine;
+  padding: 1em;
+  text-align: center;
+}
+</style>
