diff --git a/front/src/components/Button.vue b/front/src/components/Button.vue
new file mode 100644
index 0000000..f128b81
--- /dev/null
+++ b/front/src/components/Button.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+  const props = defineProps<{
+    description: string;
+  }>();
+
+</script>
+
+<template>
+  <div class="button">{{ description }}</div>
+</template>
+
+<style scoped>
+
+.button {
+  color: var(--primary-color);
+  text-align: center;
+  align-content: center;
+
+  border-radius: var(--radius);
+  background-color: var(--secondary-color);
+  word-break: break-word;
+  min-height: 7vh;
+}
+
+.button:hover
+{
+  transform: scale(1.1);
+  background-color: var(--header-color);
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+</style>
diff --git a/front/src/components/InputField.vue b/front/src/components/InputField.vue
new file mode 100644
index 0000000..1ae53ed
--- /dev/null
+++ b/front/src/components/InputField.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="input-field">
+    <input/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>