diff --git a/src/app/text-view-component/text-view-component.component.html b/src/app/text-view-component/text-view-component.component.html
new file mode 100644
index 0000000..5dfe226
--- /dev/null
+++ b/src/app/text-view-component/text-view-component.component.html
@@ -0,0 +1,7 @@
+<mat-card>
+  <app-generic-control-elements-component [initialSettingsJson]="options"></app-generic-control-elements-component>
+  <text-field [image]="image" [text_field]="text_field"></text-field>
+  <text-field [text_field]="text_field"></text-field>
+  <app-info-box [manuscript]="manuscript"></app-info-box>
+</mat-card>
+
diff --git a/src/app/text-view-component/text-view-component.component.scss b/src/app/text-view-component/text-view-component.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/text-view-component/text-view-component.component.spec.ts b/src/app/text-view-component/text-view-component.component.spec.ts
new file mode 100644
index 0000000..65e7121
--- /dev/null
+++ b/src/app/text-view-component/text-view-component.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManuscriptViewComponentComponent } from './text-view-component.component';
+
+describe('ManuscriptViewComponentComponent', () => {
+  let component: ManuscriptViewComponentComponent;
+  let fixture: ComponentFixture<ManuscriptViewComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManuscriptViewComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManuscriptViewComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/text-view-component/text-view-component.component.ts b/src/app/text-view-component/text-view-component.component.ts
new file mode 100644
index 0000000..c998e9c
--- /dev/null
+++ b/src/app/text-view-component/text-view-component.component.ts
@@ -0,0 +1,45 @@
+import {Component, OnChanges, OnInit} from '@angular/core';
+import textViewSettings from './text-view-settings.json';
+import { GenericControlElementsService, SelectionBundle
+} from '../generic-control-elements-component/generic-control-elements-service.service';
+
+@Component({
+  selector: 'app-text-view-component',
+  templateUrl: './text-view-component.component.html',
+  styleUrls: ['./text-view-component.component.scss'],
+})
+export class TextViewComponentComponent implements OnInit {
+  routeImage: any = {};
+  routes = '';
+  options = JSON.parse(JSON.stringify(textViewSettings));
+  // the actual settings
+  actualSettings?: SelectionBundle;
+  // in case there is no settings input
+
+  constructor( private optionService: GenericControlElementsService ) { }
+  image = { height: 973.91998, width: 2038.5601, file_name: "../assets/W-II-1,131et132.jpg" };
+  text_field = { left: 358.805, top: 78.051, width: 662.761, height: 831.879 };
+  manuscript = { title: 'W II 1',
+    pages: [
+      { number: '131',
+        metadata: [
+          { head: { description: 'Stellenkommentar'}, content: [ { reference: '2', quote: 'Leben Thomas Carlyle’s', text: 'vgl. Froude, Das Leben Thomas Carlyles'} ]},
+          { head: { description: 'Druckorte' }, content: [ { reference: '24-34', text: 'KGW VIII 9[11]'}, { reference: '34-40', text:'KGW VIII 9[12]'} ]}
+        ]
+      }
+    ]
+  };
+
+  ngOnInit() {
+    this.routeImage = this.getImage(this.routes);
+    this.optionService.selectionEvent.subscribe(newSettings => {
+      this.actualSettings = newSettings;
+      console.log('neue textviewsettings', this.actualSettings);
+    });
+  }
+
+  getImage(routes) {
+    return { height: 973.91998, width: 2038.5601, file_name: "../assets/W-II-1,131et132.jpg" };
+  }
+
+}