diff --git a/client/src/components/content-forms/ExerciseForm.vue b/client/src/components/content-forms/ExerciseForm.vue
index c1f4dc25..3413212d 100644
--- a/client/src/components/content-forms/ExerciseForm.vue
+++ b/client/src/components/content-forms/ExerciseForm.vue
@@ -1,15 +1,49 @@
 <template>
   <div class="exercise-form">
-    <h1>Exercise Form</h1>
+    <input class="exercise-form__title skillbox-input" placeholder="Aufgabentitel">
+    <textarea class="exercise-form__exercise-text skillbox-textarea" placeholder="Aufgabe erfassen..."></textarea>
+    <info-icon class="exercise-form__help-icon help-text__icon"></info-icon>
+    <p class="exercise-form__help-description help-text__description">
+      Ein Eingabefeld für die Antwort wird automatisch hinzugefügt.
+    </p>
   </div>
 </template>
 
 <script>
-</script>
+  import InfoIcon from '@/components/icons/InfoIcon';
 
+  export default {
+    components: {
+      InfoIcon
+    }
+  }
+</script>
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
   .exercise-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 13px;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    align-items: center;
+
+    &__title {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__exercise-text {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    &__help-description {}
   }
 </style>