diff --git a/web/src/app/workplace/components/task-status-details/task-status-details.component.html b/web/src/app/workplace/components/task-status-details/task-status-details.component.html
new file mode 100644
index 000000000..531cefa68
--- /dev/null
+++ b/web/src/app/workplace/components/task-status-details/task-status-details.component.html
@@ -0,0 +1,76 @@
+<div class="task-status-details" *ngIf="task && task.taskId">
+
+  <!-- LEFT COLUMN -->
+  <div class="task-status-details__column--left">
+
+    <!-- MODIFICATION DATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>Modification Date</mat-label>
+      <label for="task-modified"></label>
+      <input matInput type="text" disabled id="task-modified" placeholder="Modified Date" [value]="task.modified | dateTimeZone"
+             name="task.modified">
+    </mat-form-field>
+
+
+    <!-- COMPLETION DATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>Completion Date</mat-label>
+      <label for="task-completed"></label>
+      <input matInput type="text" disabled id="task-completed" placeholder="Complete Date" [value]="task.completed | dateTimeZone"
+             name="task.completed">
+    </mat-form-field>
+
+    <!-- STATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>State</mat-label>
+      <label for="task-state"></label>
+      <input matInput type="text" disabled id="task-state" placeholder="State" [(ngModel)]="task.state"
+             name="task.state">
+    </mat-form-field>
+
+    <!-- TASK READ -->
+    <mat-form-field appearance="outline">
+      <mat-label>Task read</mat-label>
+      <label for="task-read"></label>
+      <input matInput type="text" disabled id="task-read" placeholder="Read" [(ngModel)]="task.read" name="task.read">
+    </mat-form-field>
+
+  </div>
+
+  <!-- RIGHT COLUMN -->
+  <div class="task-status-details__column--right">
+
+    <!-- CLAIM DATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>Claim Date</mat-label>
+      <label for="task-claimed"></label>
+      <input matInput type="text" disabled id="task-claimed" placeholder="Claimed Date" [value]="task.claimed | dateTimeZone"
+             name="task.claimed">
+    </mat-form-field>
+
+    <!-- PLANNED DATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>Planned Date</mat-label>
+      <label for="task-planned"></label>
+      <input matInput type="text" disabled id="task-planned" placeholder="Planned Date" [value]="task.planned | dateTimeZone"
+             name="task.planned">
+    </mat-form-field>
+
+    <!-- CREATION DATE -->
+    <mat-form-field appearance="outline">
+      <mat-label>Creation Date</mat-label>
+      <label for="task-created"></label>
+      <input matInput type="text" disabled id="task-created" placeholder="Creation Date" [value]="task.created | dateTimeZone"
+             name="task.created">
+    </mat-form-field>
+
+    <!-- TRANSFERRED -->
+    <mat-form-field appearance="outline">
+      <mat-label>Transferred</mat-label>
+      <label for="task-transferred"></label>
+      <input matInput type="text" disabled id="task-transferred" placeholder="Transferred" [(ngModel)]="task.transferred"
+             name="task.transferred">
+    </mat-form-field>
+
+  </div>
+</div>
diff --git a/web/src/app/workplace/components/task-status-details/task-status-details.component.scss b/web/src/app/workplace/components/task-status-details/task-status-details.component.scss
new file mode 100644
index 000000000..c5326e566
--- /dev/null
+++ b/web/src/app/workplace/components/task-status-details/task-status-details.component.scss
@@ -0,0 +1,26 @@
+.task-status-details {
+  display: flex;
+  flex-direction: row;
+
+  &__column--left {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    margin-right: 16px;
+  }
+
+  &__column--right {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+  }
+}
+
+
+.mat-input-element:disabled {
+  color: gray;
+}
+
+::ng-deep .mat-form-field-outline {
+  color: lightgray !important;
+}
diff --git a/web/src/app/workplace/components/task-status-details/task-status-details.component.spec.ts b/web/src/app/workplace/components/task-status-details/task-status-details.component.spec.ts
new file mode 100644
index 000000000..5b88fc13b
--- /dev/null
+++ b/web/src/app/workplace/components/task-status-details/task-status-details.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskStatusDetailsComponent } from './task-status-details.component';
+
+xdescribe('TaskStatusDetailsComponent', () => {
+  let component: TaskStatusDetailsComponent;
+  let fixture: ComponentFixture<TaskStatusDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskStatusDetailsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskStatusDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.ts b/web/src/app/workplace/components/task-status-details/task-status-details.component.ts
similarity index 51%
rename from web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.ts
rename to web/src/app/workplace/components/task-status-details/task-status-details.component.ts
index e651f6d7e..2133660d4 100644
--- a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.ts
+++ b/web/src/app/workplace/components/task-status-details/task-status-details.component.ts
@@ -2,11 +2,11 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Task } from 'app/workplace/models/task';
 
 @Component({
-  selector: 'taskana-task-details-general-fields-extension',
-  templateUrl: './general-fields-extension.component.html',
-  styleUrls: ['./general-fields-extension.component.scss']
+  selector: 'taskana-task-status-details',
+  templateUrl: './task-status-details.component.html',
+  styleUrls: ['./task-status-details.component.scss']
 })
-export class GeneralFieldsExtensionComponent implements OnInit {
+export class TaskStatusDetailsComponent implements OnInit {
   @Input() task: Task;
   @Output() taskChange: EventEmitter<Task> = new EventEmitter<Task>();
 
diff --git a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.html b/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.html
deleted file mode 100644
index d1d64c047..000000000
--- a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<ng-container *ngIf="task">
-  <div class="col-md-6">
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-modified" class="control-label">Modification date</label>
-      <input type="text" disabled class="form-control" id="task-modified" placeholder="Modified" [value]="task.modified | dateTimeZone"
-        name="task.modified">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-completed" class="control-label">Completion date</label>
-      <input type="text" disabled class="form-control" id="task-completed" placeholder="Complete date" [value]="task.completed | dateTimeZone"
-        name="task.completed">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-state" class="control-label">State</label>
-      <input type="text" disabled class="form-control" id="task-state" placeholder="State" [(ngModel)]="task.state"
-        name="task.state">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-read" class="control-label">Task read</label>
-      <input type="text" disabled class="form-control" id="task-read" placeholder="Read" [(ngModel)]="task.read" name="task.read">
-    </div>
-  </div>
-  <div class="col-md-6">
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-claimed" class="control-label">Claim date</label>
-      <input type="text" disabled class="form-control" id="task-claimed" placeholder="Claimed date" [value]="task.claimed | dateTimeZone"
-        name="task.claimed">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-planned" class="control-label">Planned date</label>
-      <input type="text" disabled class="form-control" id="task-planned" placeholder="Planned date" [value]="task.planned | dateTimeZone"
-        name="task.planned">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-created" class="control-label">Creation date</label>
-      <input type="text" disabled class="form-control" id="task-created" placeholder="Created" [value]="task.created | dateTimeZone"
-        name="task.created">
-    </div>
-    <div *ngIf="task.taskId" class="form-group">
-      <label for="task-transferred" class="control-label">Transferred</label>
-      <input type="text" disabled class="form-control" id="task-transferred" placeholder="Transferred" [(ngModel)]="task.transferred"
-        name="task.transferred">
-    </div>
-  </div>
-</ng-container>
diff --git a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.scss b/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.spec.ts b/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.spec.ts
deleted file mode 100644
index 7e1ff3f2f..000000000
--- a/web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GeneralFieldsExtensionComponent } from './general-fields-extension.component';
-
-xdescribe('GeneralFieldsExtensionComponent', () => {
-  let component: GeneralFieldsExtensionComponent;
-  let fixture: ComponentFixture<GeneralFieldsExtensionComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [GeneralFieldsExtensionComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GeneralFieldsExtensionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/web/src/app/workplace/components/taskdetails/taskdetails.component.html b/web/src/app/workplace/components/taskdetails/taskdetails.component.html
index dff1b1835..e0e88c110 100644
--- a/web/src/app/workplace/components/taskdetails/taskdetails.component.html
+++ b/web/src/app/workplace/components/taskdetails/taskdetails.component.html
@@ -48,7 +48,7 @@
           <span class="float-right pull-right material-icons md-20 blue">{{accordion2State ?
             'expand_more' : 'expand_less'}}</span>
         </button>
-        <taskana-task-details-general-fields-extension [task]="task"></taskana-task-details-general-fields-extension>
+        <taskana-task-status-details [task]="task"></taskana-task-status-details>
       </accordion-group>
       <!--Custom Fields-->
       <accordion-group panelClass="customClass" (isOpenChange)="accordion3State = $event">
diff --git a/web/src/app/workplace/workplace.module.ts b/web/src/app/workplace/workplace.module.ts
index 9cb051255..a0ff59e2a 100644
--- a/web/src/app/workplace/workplace.module.ts
+++ b/web/src/app/workplace/workplace.module.ts
@@ -17,7 +17,7 @@ import { TaskdetailsGeneralFieldsComponent } from './components/taskdetails-gene
 import { TaskdetailsCustomFieldsComponent } from './components/taskdetails-custom-fields/custom-fields.component';
 import { TaskdetailsAttributeComponent } from './components/taskdetails-attribute/attribute.component';
 import { TaskComponent } from './components/task/task.component';
-import { GeneralFieldsExtensionComponent } from './components/taskdetails-general-fields-extension/general-fields-extension.component';
+import { TaskStatusDetailsComponent } from './components/task-status-details/task-status-details.component';
 import { TaskListComponent } from './components/task-list/task-list.component';
 
 import { TaskService } from './services/task.service';
@@ -58,7 +58,7 @@ const DECLARATIONS = [
   TaskdetailsCustomFieldsComponent,
   TaskdetailsAttributeComponent,
   TaskComponent,
-  GeneralFieldsExtensionComponent,
+  TaskStatusDetailsComponent,
   TaskListComponent
 ];