diff --git a/src/app/task-form/task-form.component.css b/src/app/task-form/task-form.component.css
index e69de29..cc04e06 100644
--- a/src/app/task-form/task-form.component.css
+++ b/src/app/task-form/task-form.component.css
@@ -0,0 +1,12 @@
+.modal-footer {
+	border-top: 0px solid;
+	padding-top: 5%;
+}
+.modal-content {
+	width: 1040px;
+	right: 55%;
+}
+
+.modal {
+	margin: 0 auto;
+}
diff --git a/src/app/task-form/task-form.component.html b/src/app/task-form/task-form.component.html
index f61d287..e1abec3 100644
--- a/src/app/task-form/task-form.component.html
+++ b/src/app/task-form/task-form.component.html
@@ -1,30 +1,62 @@
-<div class="modal-content p-3">
-    <div>
-        <button (click) ="onClose()" type="button" class="close" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+<!-- <div class="modal-lg"> -->
+    <div class="modal-content p-3">
+        <div class="modal-header">
+            <h4 class="modal-title">Neuen Task anlegen</h4>
+            <h6 class="modal-caption">Userstory: </h6>
+            <button (click)="onClose()" type="button" class="close" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="modal-body">
+            <form (ngSubmit)="onSubmit()">
+
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="form-group">
+                            <label for="Title">Titel</label>
+                            <input type="text" class="form-control" id="Title" required name="title"
+                                [(ngModel)]="task.title">
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div class="form-group">
+                            <label for="Prio">Prio</label>
+                            <select class="form-control" id="prio" required name="prio"
+                                [(ngModel)]="task.priority">
+                                <option value="low">Low</option>
+                                <option value="medium">Medium</option>
+                                <option value="high">High</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="form-group">
+                            <label for="Inhalt">What to do?</label>
+                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
+                                [(ngModel)]="task.content"></textarea>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div class="form-group">
+                            <label for="Inhalt">Status</label>
+                            <input type="text" class="form-control" id="Status" required name="status"
+                                [(ngModel)]="task.status">
+                        </div>
+                        <div class="form-group">
+                            <label for="Inhalt">Assigned User</label>
+                            <input type="text" class="form-control" id="Author" required name="author"
+                                >
+                        </div>
+                    </div>
+                </div>
+            </form>
+            <div class="modal-footer">
+                <button (click)="onClose()" type="dismiss" class="btn btn-secondary"
+                    data-dismiss="modal">Abbrechen</button>
+                <button type="submit" class="btn btn-primary">Erstellen</button>
+            </div>
+        </div>
     </div>
-    <form (ngSubmit)="onSubmit()">
-        <div class="form-group">
-            <label for="Title">Titel</label>
-            <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="task.title">
-        </div>
-
-        <div class="form-group">
-            <label for="Inhalt">Inhalt</label>
-            <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="task.content">
-        </div>
-
-        <div class="form-group">
-            <label for="Prio">Prio</label>
-            <select class="form-control" id="prio" required name="prio" [(ngModel)]="task.priority">
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-            </select>
-        </div>
-
-        <button type="submit" class="btn btn-success">Submit</button>
-
-    </form>
-</div>
\ No newline at end of file
+<!-- </div> -->
\ No newline at end of file
diff --git a/src/app/task-form/task-form.component.ts b/src/app/task-form/task-form.component.ts
index 154e22f..60dd90b 100644
--- a/src/app/task-form/task-form.component.ts
+++ b/src/app/task-form/task-form.component.ts
@@ -1,50 +1,53 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumTask, Priority, ScrumStatus, ScrumCategory, ScrumUser, ScrumProject } from '../services/backend.service';
+import {
+	BackendService,
+	ScrumTask,
+	Priority,
+	ScrumStatus,
+	ScrumCategory,
+	ScrumUser,
+	ScrumProject
+} from '../services/backend.service';
 
 @Component({
-    selector: 'app-task-form',
-    templateUrl: './task-form.component.html',
-    styleUrls: ['./task-form.component.css']
+	selector: 'app-task-form',
+	templateUrl: './task-form.component.html',
+	styleUrls: [ './task-form.component.css' ]
 })
 export class TaskFormComponent implements OnInit {
+	@Input() public task: ScrumTask;
+	public editing: Boolean;
 
-    @Input()
-    public task: ScrumTask;
-    public editing: Boolean;
+	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {}
 
-    constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
+	ngOnInit(): void {
+		if (this.task === null || this.task === undefined) {
+			this.task = { title: '' };
+			this.editing = false;
+		} else {
+			this.editing = true;
+		}
+	}
 
-    ngOnInit(): void {
-        if (this.task === null || this.task === undefined) {
-            this.task = {title: ""};
-            this.editing = false;
-        }
-        else
-        {
-            this.editing = true;
-        }
-    }
+	onSubmit() {
+		if (this.editing) {
+			this.backendService.putTask(this.task).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		} else {
+			this.backendService.postTask(this.task).subscribe((response) => {
+				if (response.status > 399) {
+					alert('Fehler');
+				}
+			});
+		}
+		this.activeModalService.close(this.task);
+	}
 
-    onSubmit() {
-        if (this.editing) {
-            this.backendService.putTask(this.task).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        else {
-            this.backendService.postTask(this.task).subscribe(response => {
-                if (response.status > 399) {
-                  alert('Fehler');
-                }
-              });
-        }
-        this.activeModalService.close(this.task);
-    }
-
-    onClose(){
-        this.activeModalService.dismiss(this.task);
-    }
+	onClose() {
+		this.activeModalService.dismiss(this.task);
+	}
 }