diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d0e5a3098c..a6ca548982 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -8,10 +8,13 @@ import { HelpComponent } from './main/help/help.component';
 import { MainComponent } from './main/main.component';
 import { StatusComponent } from './main/status/status.component';
 import { OntologyClassInstanceComponent } from './project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component';
+import { SettingsComponent } from './project/beta/settings/settings.component';
 // project
 import { BoardComponent } from './project/board/board.component';
 import { CollaborationComponent } from './project/collaboration/collaboration.component';
+import { ListInfoFormComponent } from './project/list/list-info-form/list-info-form.component';
 import { ListComponent } from './project/list/list.component';
+import { OntologyFormComponent } from './project/ontology/ontology-form/ontology-form.component';
 import { OntologyComponent } from './project/ontology/ontology.component';
 import { PermissionComponent } from './project/permission/permission.component';
 import { ProjectComponent } from './project/project.component';
@@ -111,6 +114,11 @@ const routes: Routes = [
                 path: 'info', // old path setup to avoid 404 when typing beta in front of project
                 redirectTo: ''
             },
+            {
+                path: 'add-ontology',
+                component: OntologyFormComponent,
+                canActivate: [AuthGuard]
+            },
             {
                 path: 'ontology',
                 component: HintComponent,
@@ -135,6 +143,11 @@ const routes: Routes = [
                 path: 'ontology/:onto/:class/:instance',
                 component: OntologyClassInstanceComponent,
             },
+            {
+                path: 'add-list',
+                component: ListInfoFormComponent,
+                canActivate: [AuthGuard]
+            },
             {
                 path: 'list',
                 component: HintComponent,
@@ -147,19 +160,23 @@ const routes: Routes = [
             },
             {
                 path: 'settings',
-                component: StatusComponent,
-                data: { status: 501, comment: 'Here you will be able to configure the project: e.g. setup collaboration and permissions.' },
-                canActivate: [AuthGuard]
-            },
-            {
-                path: 'settings/collaboration',
-                component: CollaborationComponent,
-                canActivate: [AuthGuard]
-            },
-            {
-                path: 'settings/permissions',
-                component: PermissionComponent,
-                canActivate: [AuthGuard]
+                component: SettingsComponent,
+                canActivate: [AuthGuard],
+                children: [
+                    {
+                        path: '',
+                        pathMatch: 'full',
+                        redirectTo: 'collaboration'
+                    },
+                    {
+                        path: 'collaboration',
+                        component: CollaborationComponent
+                    },
+                    {
+                        path: 'permissions',
+                        component: PermissionComponent
+                    },
+                ]
             },
             {
                 path: '**',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6d14d74683..e8f68883b9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -164,6 +164,7 @@ import { TextComponent } from './workspace/resource/representation/text/text.com
 import { OntologyClassesComponent } from './project/beta/ontology-classes/ontology-classes.component';
 import { OntologyClassItemComponent } from './project/beta/ontology-classes/ontology-class-item/ontology-class-item.component';
 import { OntologyClassInstanceComponent } from './project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component';
+import { SettingsComponent } from './project/beta/settings/settings.component';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -314,7 +315,8 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         TextComponent,
         OntologyClassesComponent,
         OntologyClassItemComponent,
-        OntologyClassInstanceComponent
+        OntologyClassInstanceComponent,
+        SettingsComponent
     ],
     imports: [
         AngularSplitModule.forRoot(),
diff --git a/src/app/main/action/hint/hint.component.html b/src/app/main/action/hint/hint.component.html
index 0c90c07091..a186641a09 100644
--- a/src/app/main/action/hint/hint.component.html
+++ b/src/app/main/action/hint/hint.component.html
@@ -1,5 +1,5 @@
 <div class="hint" [innerHtml]="content"></div>
 
-<a mat-button [href]="documentation" target="_blank" color="primary" class="external-url">
+<a *ngIf="documentation" mat-button [href]="documentation" target="_blank" color="primary" class="external-url">
     Read more in the user guide<mat-icon class="suffix">launch</mat-icon>
 </a>
diff --git a/src/app/main/dialog/dialog.component.html b/src/app/main/dialog/dialog.component.html
index d2682da841..01a77fc374 100644
--- a/src/app/main/dialog/dialog.component.html
+++ b/src/app/main/dialog/dialog.component.html
@@ -32,12 +32,12 @@
         <!-- TODO: create a mat dialog actions component with the following buttons: Cancel to reset and OK to confirm action -->
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Suspend
+                Yes, suspend
             </button>
         </mat-dialog-actions>
     </div>
@@ -179,12 +179,12 @@
         Do you want to delete this node?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -208,12 +208,12 @@
         Do you want to delete this list?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -237,12 +237,12 @@
         Do you want to delete this data model?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -268,12 +268,12 @@
         Do you want to delete this resource class?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -308,12 +308,12 @@
         Do you want to delete this property?
         <mat-dialog-actions>
             <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
-                Cancel
+                No, keep it
             </button>
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
                 [mat-dialog-close]="true">
-                Delete
+                Yes, delete
             </button>
         </mat-dialog-actions>
     </div>
@@ -347,7 +347,7 @@
             <span class="fill-remaining-space"></span>
             <button mat-button mat-raised-button [color]="'primary'" class="confirm-button center"
                 [mat-dialog-close]="{confirmed: true, comment: comment}" [disabled]="!comment">
-                Save
+                Update
             </button>
         </mat-dialog-actions>
     </div>
diff --git a/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.html b/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.html
index 88643b5630..1735a99a8c 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.html
+++ b/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.html
@@ -27,7 +27,7 @@
 
 <!-- add new resource instance if instance id is called "add" -->
 <div class="single-instance-form" *ngIf="instanceId && instanceId === 'add'">
-    <h3>Create new {{classId}} instance</h3>
+    <h3>Create new resource of type: {{resClass?.label}}</h3>
     <app-resource-instance-form
         [selectedResourceClassIri]="classId"
         [selectedProject]="projectId">
@@ -35,3 +35,6 @@ <h3>Create new {{classId}} instance</h3>
 </div>
 
 <!-- display single resource instance if instance id exists and is not called "add" -->
+<div class="single-instance" *ngIf="instanceId && instanceId !== 'add'">
+    <app-resource [resourceIri]="resourceIri"></app-resource>
+</div>
diff --git a/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.ts b/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.ts
index fe72f6059c..342e90d19f 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.ts
+++ b/src/app/project/beta/ontology-classes/ontology-class-instance/ontology-class-instance.component.ts
@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnChanges } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ReadOntology, ResourceClassDefinition } from '@dasch-swiss/dsp-js';
 import { AppInitService } from 'src/app/app-init.service';
+import { CacheService } from 'src/app/main/cache/cache.service';
 import { OntologyService } from 'src/app/project/ontology/ontology.service';
 import { FilteredResources, SearchParams } from 'src/app/workspace/results/list-view/list-view.component';
 import { SplitSize } from 'src/app/workspace/results/results.component';
@@ -10,13 +12,21 @@ import { SplitSize } from 'src/app/workspace/results/results.component';
     templateUrl: './ontology-class-instance.component.html',
     styleUrls: ['./ontology-class-instance.component.scss']
 })
-export class OntologyClassInstanceComponent {
+export class OntologyClassInstanceComponent implements OnChanges {
 
     projectId: string;
 
+    ontoId: string;
+
+    // id (iri) of resource class
     classId: string;
 
+    resClass: ResourceClassDefinition;
+
+    // uuid of resource instance
     instanceId: string;
+    // id (iri) or resource instance
+    resourceIri: string;
 
     searchParams: SearchParams;
 
@@ -30,6 +40,7 @@ export class OntologyClassInstanceComponent {
 
     constructor(
         private _ais: AppInitService,
+        private _cache: CacheService,
         private _route: ActivatedRoute,
         private _ontologyService: OntologyService
     ) {
@@ -46,16 +57,22 @@ export class OntologyClassInstanceComponent {
             const className = params['class'];
 
             // get the resource class id from route
-            this.classId = `${iriBase}/ontology/${projectCode}/${ontologyName}/v2#${className}`;
+            this.ontoId = `${iriBase}/ontology/${projectCode}/${ontologyName}/v2`;
+            this.classId = `${this.ontoId}#${className}`;
 
             this.instanceId = params['instance'];
             if (this.instanceId) {
-                // single instance
+                // single instance view
 
                 if (this.instanceId === 'add') {
                     // create new res class instance: display res instance form
+                    this.ngOnChanges();
+                } else {
+                    // get the single resource instance
+                    this.resourceIri = `${this._ais.dspAppConfig.iriBase}/${projectCode}/${this.instanceId}`;
                 }
             } else {
+                // display all resource instances of this resource class
                 this.searchParams = {
                     query: this._setGravsearch(this.classId),
                     mode: 'gravsearch'
@@ -64,6 +81,16 @@ export class OntologyClassInstanceComponent {
         });
     }
 
+    ngOnChanges() {
+        this._cache.get('currentProjectOntologies').subscribe(
+            (ontologies: ReadOntology[]) => {
+                // find ontology of current resource class to get the class label
+                const classes = ontologies[ontologies.findIndex(onto => onto.id === this.ontoId)].getAllClassDefinitions();
+                this.resClass = <ResourceClassDefinition>classes[classes.findIndex(res => res.id === this.classId)];
+            }
+        );
+    }
+
     openSelectedResources(res: FilteredResources) {
 
         this.selectedResources = res;
diff --git a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
index acb38ff276..bfbaf735ca 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
+++ b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.html
@@ -1,14 +1,15 @@
 <span class="link" [routerLink]="link">
     <h2 matLine class="label mat-subheading-1">{{resClass.label}}</h2>
     <span matLine class="instances">
-        {{results | i18nPlural: itemPluralMapping['instance']}}
+        {{results | i18nPlural: itemPluralMapping['resource']}}
     </span>
 </span>
 
-<span class="overlay-buttons hover-only">
+<span class="overlay-buttons hover-only" *ngIf="projectMember">
+    <!-- with the following button, it should be possible to edit the resource class in a quick way; but maybe we don't need it
     <button mat-icon-button class="conf" [routerLink]="link + '/conf'">
         <mat-icon>tune</mat-icon>
-    </button>
+    </button> -->
     <button mat-icon-button class="add" [routerLink]="link + '/add'">
         <mat-icon>add</mat-icon>
     </button>
diff --git a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
index ea1822c6fb..1f2a28a193 100644
--- a/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
+++ b/src/app/project/beta/ontology-classes/ontology-class-item/ontology-class-item.component.ts
@@ -14,6 +14,8 @@ export class OntologyClassItemComponent implements OnInit {
 
     @Input() resClass: ClassDefinition;
 
+    @Input() projectMember: boolean;
+
     gravsearch: string;
 
     results: number;
@@ -22,9 +24,9 @@ export class OntologyClassItemComponent implements OnInit {
 
     // i18n setup
     itemPluralMapping = {
-        instance: {
-            '=1': '1 instance',
-            other: '# instances'
+        resource: {
+            '=1': '1 resource',
+            other: '# resources'
         }
     };
 
diff --git a/src/app/project/beta/ontology-classes/ontology-classes.component.html b/src/app/project/beta/ontology-classes/ontology-classes.component.html
index 6adc248a8e..2a64e1fd60 100644
--- a/src/app/project/beta/ontology-classes/ontology-classes.component.html
+++ b/src/app/project/beta/ontology-classes/ontology-classes.component.html
@@ -1,5 +1,5 @@
 <mat-list-item *ngFor="let class of classesToDisplay">
-    <app-ontology-class-item [resClass]="class">
+    <app-ontology-class-item [resClass]="class" [projectMember]="projectMember">
 
     </app-ontology-class-item>
 </mat-list-item>
diff --git a/src/app/project/beta/ontology-classes/ontology-classes.component.ts b/src/app/project/beta/ontology-classes/ontology-classes.component.ts
index 5d2802d8c7..9d46c5499e 100644
--- a/src/app/project/beta/ontology-classes/ontology-classes.component.ts
+++ b/src/app/project/beta/ontology-classes/ontology-classes.component.ts
@@ -11,6 +11,8 @@ export class OntologyClassesComponent implements OnInit {
 
     @Input() resClasses: ClassDefinition[];
 
+    @Input() projectMember: boolean;
+
     classesToDisplay: ClassDefinition[] = [];
 
     constructor(
diff --git a/src/app/project/beta/settings/settings.component.html b/src/app/project/beta/settings/settings.component.html
new file mode 100644
index 0000000000..c8ec54672a
--- /dev/null
+++ b/src/app/project/beta/settings/settings.component.html
@@ -0,0 +1,8 @@
+<nav mat-tab-nav-bar mat-align-tabs="center" class="settings navigation" animationDuration="0ms">
+    <a mat-tab-link *ngFor="let link of navigation; let first = first" id="{{link.route}}" [routerLink]="link.route"
+        routerLinkActive="active-tab" #rla="routerLinkActive" [active]="rla.isActive">
+        <mat-icon class="tab-icon">{{link.icon}}</mat-icon>
+        {{link.label}}
+    </a>
+</nav>
+<router-outlet></router-outlet>
diff --git a/src/app/project/beta/settings/settings.component.scss b/src/app/project/beta/settings/settings.component.scss
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/app/project/beta/settings/settings.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/project/beta/settings/settings.component.spec.ts b/src/app/project/beta/settings/settings.component.spec.ts
new file mode 100644
index 0000000000..5ff1480f4c
--- /dev/null
+++ b/src/app/project/beta/settings/settings.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+    let component: SettingsComponent;
+    let fixture: ComponentFixture<SettingsComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ SettingsComponent ],
+            imports: [
+                RouterTestingModule
+            ]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SettingsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/project/beta/settings/settings.component.ts b/src/app/project/beta/settings/settings.component.ts
new file mode 100644
index 0000000000..9da9a128ca
--- /dev/null
+++ b/src/app/project/beta/settings/settings.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { AppGlobal } from 'src/app/app-global';
+import { MenuItem } from 'src/app/main/declarations/menu-item';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+    navigation: MenuItem[] = [];
+
+    loading = false;
+
+    constructor() { }
+
+    ngOnInit(): void {
+        // we need only two items from the old project navigation
+        // collaboration
+        this.navigation.push(AppGlobal.projectNav[1]);
+        // permissions
+        this.navigation.push(AppGlobal.projectNav[2]);
+    }
+
+}
diff --git a/src/app/project/board/board.component.html b/src/app/project/board/board.component.html
index 45050030c9..432c851a89 100644
--- a/src/app/project/board/board.component.html
+++ b/src/app/project/board/board.component.html
@@ -1,6 +1,13 @@
 <app-progress-indicator *ngIf="loading"></app-progress-indicator>
 
 <div *ngIf="!loading && project" class="content large middle">
+    <!-- beta hint with feature toggle to switch between the stable and the beta version  -->
+    <div class="note warning">
+        <span *ngIf="beta">This is a preview of a new project view concept!</span>
+        <span *ngIf="!beta">We are working on a new project view concept. Switch to the beta version.</span>
+        <span class="fill-remaining-space"></span>
+        <mat-slide-toggle [(ngModel)]="beta" [color]="'primary'" (change)="featureToggle()">Beta Preview</mat-slide-toggle>
+    </div>
     <!--  mobile version: status and edit icon displayed before the title -->
     <div class="app-toolbar-mobile">
         <span class="app-toolbar-action-status">
@@ -10,8 +17,8 @@
             </span>
         </span>
         <span class="fill-remaining-space-action"></span>
-        <span class="app-toolbar-action-edit">
-            <button mat-icon-button *ngIf="projectAdmin && project.status"
+        <span class="app-toolbar-action-edit" *ngIf="projectAdmin">
+            <button mat-icon-button *ngIf="project.status"
                 (click)="openDialog('editProject', project.shortname, project.shortcode)" class="right">
                 <mat-icon>edit</mat-icon>
             </button>
diff --git a/src/app/project/board/board.component.scss b/src/app/project/board/board.component.scss
index 9060f231a4..32251a2cc8 100644
--- a/src/app/project/board/board.component.scss
+++ b/src/app/project/board/board.component.scss
@@ -6,6 +6,13 @@ section {
   margin: 24px 16px;
 }
 
+.note {
+  border-radius: $border-radius;
+  width: 100%;
+  display: inline-flex;
+  margin-bottom: 16px;
+}
+
 // phone devices
 @media (max-width: map-get($grid-breakpoints, phone)) {
 
diff --git a/src/app/project/board/board.component.spec.ts b/src/app/project/board/board.component.spec.ts
index 2959757c42..2a9741403f 100644
--- a/src/app/project/board/board.component.spec.ts
+++ b/src/app/project/board/board.component.spec.ts
@@ -3,6 +3,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
@@ -37,6 +38,7 @@ describe('BoardComponent', () => {
                 MatDialogModule,
                 MatDividerModule,
                 MatIconModule,
+                MatSlideToggleModule,
                 MatSnackBarModule,
                 RouterTestingModule
             ],
@@ -51,7 +53,12 @@ describe('BoardComponent', () => {
                                         return TestConfig.ProjectCode;
                                     }
                                 }
-                            })
+                            }),
+                            snapshot: {
+                                url: [
+                                    { path: 'project' }
+                                ]
+                            }
                         }
                     }
                 },
diff --git a/src/app/project/board/board.component.ts b/src/app/project/board/board.component.ts
index 795db8451f..8876170e81 100644
--- a/src/app/project/board/board.component.ts
+++ b/src/app/project/board/board.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import {
     ApiResponseError,
     ReadProject
@@ -42,20 +42,25 @@ export class BoardComponent implements OnInit {
 
     color = 'primary';
 
+    beta = false;
+
     constructor(
         private _cache: CacheService,
         private _errorHandler: ErrorHandlerService,
         private _session: SessionService,
         private _dialog: MatDialog,
         private _route: ActivatedRoute,
-        private _titleService: Title,
-        private _snackBar: MatSnackBar
+        private _router: Router,
+        private _titleService: Title
     ) {
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
             this.projectCode = params.get('shortcode');
         });
 
+        // get feature toggle information if url contains beta
+        this.beta = (this._route.parent.snapshot.url[0].path === 'beta');
+
         // set the page title
         this._titleService.setTitle('Project ' + this.projectCode);
     }
@@ -95,17 +100,6 @@ export class BoardComponent implements OnInit {
         this.loading = false;
     }
 
-    // copy link to clipboard
-    copyToClipboard(msg: string) {
-        const message = 'Copied to clipboard!';
-        const action = msg;
-        this._snackBar.open(message, action, {
-            duration: 3000,
-            horizontalPosition: 'center',
-            verticalPosition: 'top'
-        });
-    }
-
     openDialog(mode: string, name: string, id?: string): void {
         const dialogConfig: MatDialogConfig = {
             width: '560px',
@@ -123,4 +117,8 @@ export class BoardComponent implements OnInit {
             this.getProject();
         });
     }
+
+    featureToggle() {
+        this._router.navigate([(this.beta ? 'beta' : ''), 'project', this.projectCode ]);
+    }
 }
diff --git a/src/app/project/collaboration/collaboration.component.spec.ts b/src/app/project/collaboration/collaboration.component.spec.ts
index ed00282e7e..e27a0020d9 100644
--- a/src/app/project/collaboration/collaboration.component.spec.ts
+++ b/src/app/project/collaboration/collaboration.component.spec.ts
@@ -69,7 +69,12 @@ describe('CollaborationComponent', () => {
                                         return TestConfig.ProjectCode;
                                     }
                                 }
-                            })
+                            }),
+                            parent: {
+                                snapshot: {
+                                    url: []
+                                }
+                            }
                         }
                     }
                 },
diff --git a/src/app/project/collaboration/collaboration.component.ts b/src/app/project/collaboration/collaboration.component.ts
index 4e0c448f93..62bf554ae6 100644
--- a/src/app/project/collaboration/collaboration.component.ts
+++ b/src/app/project/collaboration/collaboration.component.ts
@@ -60,6 +60,13 @@ export class CollaborationComponent implements OnInit {
             this.projectCode = params.get('shortcode');
         });
 
+        // in case of new beta view, we are in a grand-child route
+        if (this._route.parent.parent.snapshot.url.length) {
+            this._route.parent.parent.paramMap.subscribe((params: Params) => {
+                this.projectCode = params.get('shortcode');
+            });
+        }
+
         // set the page title
         this._titleService.setTitle('Project ' + this.projectCode + ' | Collaboration');
 
diff --git a/src/app/project/list/list-info-form/list-info-form.component.html b/src/app/project/list/list-info-form/list-info-form.component.html
index 58bcb4e812..3ad43656c3 100644
--- a/src/app/project/list/list-info-form/list-info-form.component.html
+++ b/src/app/project/list/list-info-form/list-info-form.component.html
@@ -2,7 +2,7 @@
     <app-progress-indicator *ngIf="loading"></app-progress-indicator>
 
     <div *ngIf="!loading" class="form-content list-info">
-
+        <h3 *ngIf="beta">Create new list</h3>
         <!-- list label -->
         <app-string-literal-input [placeholder]="'List label *'" [value]="labels"
             (dataChanged)="handleData($event, 'labels')">
@@ -18,11 +18,9 @@
         <mat-hint class="invalid-form string-literal-error" *ngIf="commentInvalidMessage">{{ commentInvalidMessage }}</mat-hint>
 
         <div class="form-panel form-action">
-            <span>
-                <button mat-button type="button" (click)="closeDialog.emit(list)">
-                    {{ 'appLabels.form.action.cancel' | translate }}
-                </button>
-            </span>
+            <button *ngIf="!beta" mat-button type="button" (click)="closeDialog.emit(list)">
+                {{ 'appLabels.form.action.cancel' | translate }}
+            </button>
             <span class="fill-remaining-space"></span>
             <span>
                 <button mat-raised-button type="submit" color="primary" [disabled]="saveButtonDisabled"
diff --git a/src/app/project/list/list-info-form/list-info-form.component.spec.ts b/src/app/project/list/list-info-form/list-info-form.component.spec.ts
index c4253e1566..743b942eec 100644
--- a/src/app/project/list/list-info-form/list-info-form.component.spec.ts
+++ b/src/app/project/list/list-info-form/list-info-form.component.spec.ts
@@ -2,7 +2,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HttpClientModule } from '@angular/common/http';
 import { Component, ViewChild } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -15,6 +15,7 @@ import { ApiResponseData, CreateListRequest, ListInfoResponse, ListResponse, Lis
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { AjaxResponse } from 'rxjs/ajax';
+import { AppInitService } from 'src/app/app-init.service';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogHeaderComponent } from 'src/app/main/dialog/dialog-header/dialog-header.component';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
@@ -72,6 +73,12 @@ describe('ListInfoFormComponent', () => {
         }
     };
 
+    const appInitSpy = {
+        dspAppConfig: {
+            iriBase: 'http://rdfh.ch'
+        }
+    };
+
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
@@ -94,6 +101,10 @@ describe('ListInfoFormComponent', () => {
                 TranslateModule.forRoot()
             ],
             providers: [
+                {
+                    provide: AppInitService,
+                    useValue: appInitSpy
+                },
                 {
                     provide: DspApiConnectionToken,
                     useValue: listsEndpointSpyObj
diff --git a/src/app/project/list/list-info-form/list-info-form.component.ts b/src/app/project/list/list-info-form/list-info-form.component.ts
index ad7c5339c0..6615734ce1 100644
--- a/src/app/project/list/list-info-form/list-info-form.component.ts
+++ b/src/app/project/list/list-info-form/list-info-form.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import {
     ApiResponseData,
     ApiResponseError,
@@ -13,6 +14,7 @@ import {
     StringLiteral,
     UpdateListInfoRequest
 } from '@dasch-swiss/dsp-js';
+import { AppInitService } from 'src/app/app-init.service';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
 
@@ -56,10 +58,41 @@ export class ListInfoFormComponent implements OnInit {
     labelInvalidMessage: string;
     commentInvalidMessage: string;
 
+    // feature toggle for new concept
+    beta = false;
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
-        private _errorHandler: ErrorHandlerService
-    ) { }
+        private _ais: AppInitService,
+        private _errorHandler: ErrorHandlerService,
+        private _route: ActivatedRoute,
+        private _router: Router
+    ) {
+        // get feature toggle information if url contains beta
+        // in case of creating new
+        if (this._route.parent) {
+            this.beta = (this._route.parent.snapshot.url[0].path === 'beta');
+            if (this.beta) {
+                // get the shortcode of the current project
+                this._route.parent.paramMap.subscribe((params: Params) => {
+                    this.projectCode = params.get('shortcode');
+                    this.projectIri = `${this._ais.dspAppConfig.iriBase}/projects/${this.projectCode}`;
+                });
+            }
+        }
+        // in case of edit
+        if (this._route.firstChild) {
+            this.beta = (this._route.firstChild.snapshot.url[0].path === 'beta');
+            if (this.beta) {
+                // get the shortcode of the current project
+                this._route.firstChild.paramMap.subscribe((params: Params) => {
+                    this.projectCode = params.get('shortcode');
+                    this.projectIri = `${this._ais.dspAppConfig.iriBase}/projects/${this.projectCode}`;
+                });
+            }
+        }
+
+    }
 
     ngOnInit() {
 
@@ -129,7 +162,16 @@ export class ListInfoFormComponent implements OnInit {
 
             this._dspApiConnection.admin.listsEndpoint.createList(listInfoData).subscribe(
                 (response: ApiResponseData<ListResponse>) => {
-                    this.closeDialog.emit(response.body.list);
+                    if (this.beta) {
+                        // go to the new list page
+                        const array = response.body.list.listinfo.id.split('/');
+                        const name = array[array.length - 1];
+                        this._router.navigate(['list', name], { relativeTo: this._route.parent }).then(() => {
+                            window.location.reload();
+                        });
+                    } else {
+                        this.closeDialog.emit(response.body.list);
+                    }
                     this.loading = false;
                 },
                 (error: ApiResponseError) => {
diff --git a/src/app/project/list/list.component.ts b/src/app/project/list/list.component.ts
index 6372791d9d..8819b3a0c5 100644
--- a/src/app/project/list/list.component.ts
+++ b/src/app/project/list/list.component.ts
@@ -254,7 +254,12 @@ export class ListComponent implements OnInit {
                     break;
                 }
                 case 'editListInfo': {
-                    this.initList();
+                    if (this.beta) {
+                        // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                        window.location.reload();
+                    } else {
+                        this.initList();
+                    }
                     break;
                 }
                 case 'deleteList': {
@@ -263,15 +268,22 @@ export class ListComponent implements OnInit {
                             (res: ApiResponseData<DeleteListResponse>) => {
                                 this.lists = this.lists.filter(list => list.id !== res.body.iri);
 
-                                // if there are still lists remaining after deleting a list, load the first list among lists
-                                if (this.lists.length) {
-                                    this.listIri = this.lists[0].id;
-                                    this.listForm.controls.list.setValue(this.listIri);
-                                    this.openList(this.listIri);
-                                    this.initList();
-                                } else { // else set the list to null to remove it from the UI
-                                    this.list = null;
-                                    this.listIri = undefined;
+                                if (this.beta) {
+                                    this._router.navigateByUrl(`/beta/project/${this.projectCode}`).then(() => {
+                                        // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                                        window.location.reload();
+                                    });
+                                } else {
+                                    // if there are still lists remaining after deleting a list, load the first list among lists
+                                    if (this.lists.length) {
+                                        this.listIri = this.lists[0].id;
+                                        this.listForm.controls.list.setValue(this.listIri);
+                                        this.openList(this.listIri);
+                                        this.initList();
+                                    } else { // else set the list to null to remove it from the UI
+                                        this.list = null;
+                                        this.listIri = undefined;
+                                    }
                                 }
                             },
                             (error: ApiResponseError) => {
diff --git a/src/app/project/ontology/ontology-form/ontology-form.component.html b/src/app/project/ontology/ontology-form/ontology-form.component.html
index 7c6964602f..737de3bb9d 100644
--- a/src/app/project/ontology/ontology-form/ontology-form.component.html
+++ b/src/app/project/ontology/ontology-form/ontology-form.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="ontologyForm" (ngSubmit)="submitData()" class="form">
-    <!-- auto complete list to select resource classes -->
     <div class="form-content">
+        <h3 *ngIf="beta && !iri">Create new ontology</h3>
         <mat-form-field class="large-field ontology-name">
             <input matInput class="ontology-name" autocomplete="off" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
                 [placeholder]="'Set a unique name'">
@@ -13,7 +13,9 @@
 
         <mat-form-field class="large-field ontology-label">
             <span *ngIf="!iri" matPrefix>{{project.shortname}}:&nbsp;</span>
-            <input matInput [formControl]="ontologyForm.controls['label']" placeholder="Label"
+            <input matInput
+                placeholder="Label"
+                [formControl]="ontologyForm.controls['label']"
                 [value]="ontologyLabel">
             <mat-hint *ngIf="formErrors.label">
                 {{ formErrors.label }}
@@ -21,18 +23,20 @@
         </mat-form-field>
 
         <mat-form-field class="large-field ontology-comment">
-            <textarea matInput [formControl]="ontologyForm.controls['comment']"
+            <textarea matInput
                 placeholder="Comment" [value]="ontologyComment"
-                [cdkTextareaAutosize]="true" [cdkAutosizeMinRows]="6" [cdkAutosizeMaxRows]="12">
+                [formControl]="ontologyForm.controls['comment']"
+                [cdkTextareaAutosize]="true"
+                [cdkAutosizeMinRows]="6"
+                [cdkAutosizeMaxRows]="12">
             </textarea>
         </mat-form-field>
 
         <div class="form-panel form-action">
-            <span>
-                <button mat-button type="button" (click)="closeDialog.emit()">
-                    {{ 'appLabels.form.action.cancel' | translate }}
-                </button>
-            </span>
+            <button mat-button type="button" (click)="closeDialog.emit()"
+                *ngIf="!beta || iri">
+                {{ 'appLabels.form.action.cancel' | translate }}
+            </button>
             <span class="fill-remaining-space"></span>
             <span>
                 <button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'" [disabled]="!ontologyForm.valid">
diff --git a/src/app/project/ontology/ontology-form/ontology-form.component.ts b/src/app/project/ontology/ontology-form/ontology-form.component.ts
index edd595dad2..07ef0e5a20 100644
--- a/src/app/project/ontology/ontology-form/ontology-form.component.ts
+++ b/src/app/project/ontology/ontology-form/ontology-form.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
     ApiResponseError,
     CreateOntology,
@@ -36,7 +37,7 @@ export class OntologyFormComponent implements OnInit {
     @Input() iri: string;
 
     // existing ontology names; name has to be unique
-    @Input() existingOntologyNames: string[];
+    @Input() existingOntologyNames: string[] = [];
 
     @Output() closeDialog: EventEmitter<any> = new EventEmitter<any>();
 
@@ -53,6 +54,9 @@ export class OntologyFormComponent implements OnInit {
 
     lastModificationDate: string;
 
+    // feature toggle for new concept
+    beta = false;
+
     // ontology name must not contain one of the following words
     forbiddenNames: string[] = [
         'knora',
@@ -104,18 +108,44 @@ export class OntologyFormComponent implements OnInit {
         private _cache: CacheService,
         private _errorHandler: ErrorHandlerService,
         private _fb: FormBuilder,
-        private _ontologyService: OntologyService
-    ) { }
+        private _ontologyService: OntologyService,
+        private _route: ActivatedRoute,
+        private _router: Router
+    ) {
+        // get feature toggle information if url contains beta
+        // in case of creating new
+        if (this._route.parent) {
+            this.beta = (this._route.parent.snapshot.url[0].path === 'beta');
+        }
+        // in case of edit
+        if (this._route.firstChild) {
+            this.beta = (this._route.firstChild.snapshot.url[0].path === 'beta');
+        }
+    }
 
     ngOnInit() {
 
         this.loading = true;
+        if (!this.projectCode) {
+            // if project shorcode is missing, get it from the url
+            this.projectCode = this._route.parent.snapshot.params.shortcode;
+        }
+
+        if (!this.existingOntologyNames.length) {
+            this._cache.get('currentProjectOntologies').subscribe(
+                (response: ReadOntology[]) => {
+                    response.forEach(onto => {
+                        const name = this._ontologyService.getOntologyName(onto.id);
+                        this.existingOntologyNames.push(name);
+                    });
+                }
+            );
+        }
 
         this._cache.get(this.projectCode).subscribe(
             (response: ReadProject) => {
                 this.project = response;
                 this.buildForm();
-
                 this.loading = false;
             },
             (error: ApiResponseError) => {
@@ -239,6 +269,13 @@ export class OntologyFormComponent implements OnInit {
                     this.updateParent.emit(response.id);
                     this.loading = false;
                     this.closeDialog.emit(response.id);
+                    if (this.beta) {
+                        // go to the new ontology page
+                        const name = this._ontologyService.getOntologyName(response.id);
+                        this._router.navigate(['ontology', name], { relativeTo: this._route.firstChild }).then(() => {
+                            window.location.reload();
+                        });
+                    }
                 },
                 (error: ApiResponseError) => {
                     // in case of an error
@@ -262,7 +299,15 @@ export class OntologyFormComponent implements OnInit {
                 (response: OntologyMetadata) => {
                     this.updateParent.emit(response.id);
                     this.loading = false;
-                    this.closeDialog.emit(response.id);
+                    if (this.beta) {
+                        // go to the new ontology page
+                        const name = this._ontologyService.getOntologyName(response.id);
+                        this._router.navigate(['ontology', name], { relativeTo: this._route.parent }).then(() => {
+                            window.location.reload();
+                        });
+                    } else {
+                        this.closeDialog.emit(response.id);
+                    }
                 },
                 (error: ApiResponseError) => {
                     // in case of an error... e.g. because the ontolog iri is not unique, rebuild the form including the error message
diff --git a/src/app/project/ontology/ontology.component.html b/src/app/project/ontology/ontology.component.html
index e01ad2e108..3667f7dae6 100644
--- a/src/app/project/ontology/ontology.component.html
+++ b/src/app/project/ontology/ontology.component.html
@@ -52,7 +52,7 @@ <h2 class="mat-title">
     </div>
 
     <!-- main content: overview shows resource classes of ontology -->
-    <div *ngIf="!loading && !loadOntology && ontology" class="ontology-editor">
+    <div *ngIf="!loading && !loadOntology && ontology" class="ontology-editor" [class.beta]="beta">
 
         <!-- TODO: add here the select ontology functionality -->
         <mat-toolbar class="ontology-editor-header" [class.beta]="beta">
diff --git a/src/app/project/ontology/ontology.component.scss b/src/app/project/ontology/ontology.component.scss
index 668a4e6d48..93a3b67153 100644
--- a/src/app/project/ontology/ontology.component.scss
+++ b/src/app/project/ontology/ontology.component.scss
@@ -30,6 +30,13 @@ $width: 340px;
   margin: 0 auto 60px auto;
   z-index: 0;
 
+  &.beta {
+    // resize the with in beta view because of sidenav container
+    width: auto;
+    margin: 0;
+    height: calc(100vh - #{$header-height} - 2px);
+  }
+
   .ontology-editor-header {
     z-index: 2;
     top: 121px;
@@ -81,12 +88,15 @@ $width: 340px;
 }
 
 .ontology-editor-container {
+  height: calc(100% - #{$header-height} - 8px);
+
   .ontology-editor-subheader {
     height: $sub-header-height;
   }
 
   .ontology-editor-sidenav {
     width: 200px;
+    border: none;
 
     button {
       width: 100%;
diff --git a/src/app/project/ontology/ontology.component.ts b/src/app/project/ontology/ontology.component.ts
index 01e0cb5552..63aedf8f9f 100644
--- a/src/app/project/ontology/ontology.component.ts
+++ b/src/app/project/ontology/ontology.component.ts
@@ -134,7 +134,6 @@ export class OntologyComponent implements OnInit {
         private _sortingService: SortingService,
         private _titleService: Title
     ) {
-
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
             this.projectCode = params.get('shortcode');
@@ -158,14 +157,11 @@ export class OntologyComponent implements OnInit {
             const projectCode = this._route.parent.snapshot.params.shortcode;
             this._route.params.subscribe(params => {
                 const iriBase = this._ontologyService.getIriBaseUrl();
-
                 const ontologyName = params['onto'];
                 this.ontologyIri = `${iriBase}/ontology/${projectCode}/${ontologyName}/v2`;
                 this.ngOnInit();
             });
-            console.warn('This is a pre-released (beta) project\'s ontology view');
         }
-
     }
 
     @HostListener('window:resize', ['$event']) onWindwoResize(e: Event) {
@@ -183,6 +179,7 @@ export class OntologyComponent implements OnInit {
 
         // get information about the logged-in user
         this.session = this._session.getSession();
+
         // is the logged-in user system admin?
         this.sysAdmin = this.session.user.sysAdmin;
 
@@ -469,6 +466,10 @@ export class OntologyComponent implements OnInit {
         dialogRef.afterClosed().subscribe(result => {
             // update the view
             this.initOntologiesList();
+            if (this.beta) {
+                // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                window.location.reload();
+            }
         });
     }
 
@@ -542,8 +543,14 @@ export class OntologyComponent implements OnInit {
                                 // get the ontologies for this project
                                 this.initOntologiesList();
                                 // go to project ontology page
-                                const goto = 'project/' + this.projectCode + '/ontologies/';
-                                this._router.navigateByUrl(goto, { skipLocationChange: false });
+                                let goto = `/project/${this.projectCode}/ontologies/`;
+                                if (this.beta) {
+                                    goto = `/beta/project/${this.projectCode}`;
+                                }
+                                this._router.navigateByUrl(goto, { skipLocationChange: false }).then(() => {
+                                    // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                                    window.location.reload();
+                                });
                             },
                             (error: ApiResponseError) => {
                                 this._errorHandler.showMessage(error);
@@ -563,6 +570,10 @@ export class OntologyComponent implements OnInit {
                             (response: OntologyMetadata) => {
                                 this.loading = false;
                                 this.resetOntology(this.ontologyIri);
+                                if (this.beta) {
+                                    // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                                    window.location.reload();
+                                }
                             },
                             (error: ApiResponseError) => {
                                 this._errorHandler.showMessage(error);
diff --git a/src/app/project/permission/permission.component.spec.ts b/src/app/project/permission/permission.component.spec.ts
index cf13fcf122..692fb02fe2 100644
--- a/src/app/project/permission/permission.component.spec.ts
+++ b/src/app/project/permission/permission.component.spec.ts
@@ -53,7 +53,12 @@ describe('PermissionComponent', () => {
                                         return TestConfig.ProjectCode;
                                     }
                                 }
-                            })
+                            }),
+                            parent: {
+                                snapshot: {
+                                    url: []
+                                }
+                            }
                         }
                     }
                 },
diff --git a/src/app/project/permission/permission.component.ts b/src/app/project/permission/permission.component.ts
index 4ce7686854..ac470f9a78 100644
--- a/src/app/project/permission/permission.component.ts
+++ b/src/app/project/permission/permission.component.ts
@@ -53,6 +53,13 @@ export class PermissionComponent implements OnInit {
             this.projectCode = params.get('shortcode');
         });
 
+        // in case of new beta view, we are in a grand-child route
+        if (this._route.parent.parent.snapshot.url.length) {
+            this._route.parent.parent.paramMap.subscribe((params: Params) => {
+                this.projectCode = params.get('shortcode');
+            });
+        }
+
         // set the page title
         this._titleService.setTitle('Project ' + this.projectCode + ' | Permission Groups');
 
diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html
index a453be4f04..9b708ce64f 100644
--- a/src/app/project/project.component.html
+++ b/src/app/project/project.component.html
@@ -1,5 +1,4 @@
 <div *ngIf="!error; else StatusMsg">
-
     <!-- normal version -->
     <div *ngIf="!beta">
         <nav *ngIf="projectAdmin && !loading" mat-tab-nav-bar mat-align-tabs="center"
@@ -11,16 +10,14 @@
                 {{link.label}}
             </a>
         </nav>
-
         <app-progress-indicator *ngIf="loading"></app-progress-indicator>
-
         <router-outlet *ngIf="!loading"></router-outlet>
     </div>
     <!-- new concept of project view: sidenav instead tabs -->
     <div *ngIf="beta">
         <mat-sidenav-container class="project-view">
             <mat-sidenav mode="side" opened class="project-nav">
-                <mat-list>
+                <mat-list class="main-list">
                     <!-- Project label -->
                     <mat-list-item class="link" [routerLink]="'/beta/project/' + project.shortcode">
                         <span matLine>
@@ -37,9 +34,12 @@ <h1 class="mat-headline">
 
                     <!-- Ontology Section -->
                     <mat-list-item class="section-title">
-                        <h2 class="mat-title link" (click)="open('ontology')">Data Models</h2>
+                        <span class="link section-label" (click)="open('ontology')">
+                            <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
+                            <h2 class="mat-title">Data Models</h2>
+                        </span>
                         <span class="fill-remaining-space"></span>
-                        <button mat-icon-button *ngIf="projectAdmin" class="hover-only" (click)="create('ontology')">
+                        <button mat-icon-button *ngIf="projectAdmin" class="hover-only" (click)="open('add-ontology')">
                             <mat-icon>add</mat-icon>
                         </button>
                     </mat-list-item>
@@ -50,7 +50,7 @@ <h2 class="mat-title link" (click)="open('ontology')">Data Models</h2>
                         <mat-expansion-panel [expanded]="true">
                             <mat-expansion-panel-header>
                                 <div class="sidenav-panel-header" (click)="$event.stopPropagation();">
-                                    <mat-panel-title class="mat-subheading-2" (click)="open('ontology', onto.id)">
+                                    <mat-panel-title class="mat-subheading-2" (click)="projectAdmin ? open('ontology', onto.id) : null">
                                         {{onto.label}}
                                     </mat-panel-title>
                                     <mat-panel-description>
@@ -64,12 +64,12 @@ <h2 class="mat-title link" (click)="open('ontology')">Data Models</h2>
                             <!-- <mat-list-item>
                                 Classes
                                 <span class="fill-remaining-space"></span>
-                                <button mat-icon-button (click)="create('class')">
+                                <button mat-icon-button (click)="open('class')">
                                     <mat-icon>add</mat-icon>
                                 </button>
                             </mat-list-item> -->
                             <mat-list>
-                                <app-ontology-classes [resClasses]="onto.getAllClassDefinitions()">
+                                <app-ontology-classes [resClasses]="onto.getAllClassDefinitions()" [projectMember]="projectMember">
                                 </app-ontology-classes>
                             </mat-list>
                         </mat-expansion-panel>
@@ -81,9 +81,12 @@ <h2 class="mat-title link" (click)="open('ontology')">Data Models</h2>
                     <!-- Lists Section -->
                     <span *ngIf="projectAdmin">
                         <mat-list-item class="section-title">
-                            <h2 class="mat-title link" (click)="open('list')">Lists</h2>
+                            <span class="link section-label" (click)="open('list')">
+                                <mat-icon class="sidenav-prefix-icon">list</mat-icon>
+                                <h2 class="mat-title">Lists</h2>
+                            </span>
                             <span class="fill-remaining-space"></span>
-                            <button mat-icon-button class="hover-only" (click)="create('list')">
+                            <button mat-icon-button class="hover-only"(click)="open('add-list')">
                                 <mat-icon>add</mat-icon>
                             </button>
                         </mat-list-item>
@@ -96,16 +99,18 @@ <h2 class="mat-title link" (click)="open('list')">Lists</h2>
                     <mat-divider></mat-divider>
 
                     <!-- Project members if project admin -->
-                    <mat-list-item *ngIf="projectAdmin" class="link section-title" routerLink="collaboration">
+                    <!-- <mat-list-item *ngIf="projectAdmin" class="link section-title" routerLink="settings/collaboration">
                         <h2 class="mat-title">Members</h2>
-                    </mat-list-item>
+                    </mat-list-item> -->
 
                     <!-- Project permissions ??? will it ever come? -->
 
-                    <div class="sidenav-footer">
-                        <mat-list-item *ngIf="projectAdmin" class="link section-title" routerLink="settings">
-                            <mat-icon>settings</mat-icon>
-                            <h2 class="mat-title">Settings</h2>
+                    <div class="sidenav-footer" *ngIf="projectAdmin" >
+                        <mat-list-item class="section-title">
+                            <span class="link section-label" (click)="open('settings')">
+                                <mat-icon class="sidenav-prefix-icon">settings</mat-icon>
+                                <h2 class="mat-title">Settings</h2>
+                            </span>
                         </mat-list-item>
                     </div>
                 </mat-list>
diff --git a/src/app/project/project.component.scss b/src/app/project/project.component.scss
index 58c8c7ecda..a89ecab14b 100644
--- a/src/app/project/project.component.scss
+++ b/src/app/project/project.component.scss
@@ -6,6 +6,10 @@
 }
 
 .section-title {
+
+  .section-label {
+    display: inline-flex;
+  }
   .hover-only {
     display: none;
   }
@@ -39,10 +43,12 @@
   bottom: 0;
   position: absolute;
   width: 100%;
+  background-color: #fff;
+}
 
-  .mat-icon {
-    margin-right: 16px;
-  }
+.sidenav-prefix-icon {
+  margin-right: 8px;
+  margin-top: 4px;
 }
 
 .sidenav-container {
diff --git a/src/app/project/project.component.ts b/src/app/project/project.component.ts
index b3001adb4a..135c802196 100644
--- a/src/app/project/project.component.ts
+++ b/src/app/project/project.component.ts
@@ -10,7 +10,7 @@ import {
     OntologiesMetadata,
     ProjectResponse,
     ReadOntology,
-    ReadProject
+    ReadProject, UserResponse
 } from '@dasch-swiss/dsp-js';
 import { AppGlobal } from '../app-global';
 import { CacheService } from '../main/cache/cache.service';
@@ -36,6 +36,7 @@ export class ProjectComponent implements OnInit {
     session: Session;
     sysAdmin = false;
     projectAdmin = false;
+    projectMember = false;
 
     // project shortcode; as identifier in project cache service
     projectCode: string;
@@ -50,6 +51,8 @@ export class ProjectComponent implements OnInit {
     // feature toggle for new concept
     beta = false;
 
+    ontologies: ReadOntology[] = [];
+
     // list of project ontologies
     projectOntologies: ReadOntology[] = [];
     projectLists: ListNodeInfo[] = [];
@@ -111,6 +114,28 @@ export class ProjectComponent implements OnInit {
 
                         // is the logged-in user project admin?
                         this.projectAdmin = this.sysAdmin ? this.sysAdmin : (this.session.user.projectAdmin.some(e => e === this.project.id));
+
+                        // or at least project member?
+                        if (!this.projectAdmin) {
+                            this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.session.user.name).subscribe(
+                                (res: ApiResponseData<UserResponse>) => {
+                                    const usersProjects = res.body.user.projects;
+                                    if (usersProjects.length === 0) {
+                                        // the user is not part of any project
+                                        this.projectMember = false;
+                                    } else {
+                                        // check if the user is member of the current project
+                                        this.projectMember = usersProjects.some(p => p.shortcode === this.projectCode);
+                                    }
+                                },
+                                (error: ApiResponseError) => {
+                                    this._errorHandler.showMessage(error);
+                                }
+                            );
+                        } else {
+                            this.projectMember = this.projectAdmin;
+                        }
+
                     }
 
                     // set the cache for project members and groups
@@ -121,21 +146,32 @@ export class ProjectComponent implements OnInit {
 
                     // in the new concept of project view, we have to make many requests to get all project relevant information
                     if(this.beta) {
+
                         // get all project ontologies
                         this._dspApiConnection.v2.onto.getOntologiesByProjectIri(this.project.id).subscribe(
                             (ontoMeta: OntologiesMetadata) => {
-                                ontoMeta.ontologies.forEach(onto => {
-                                    this._dspApiConnection.v2.onto.getOntology(onto.id).subscribe(
-                                        (ontology: ReadOntology) => {
-                                            this.projectOntologies.push(ontology);
-                                            this.loading = !this._cache.has(this.projectCode);
-                                        },
-                                        (error: ApiResponseError) => {
-                                            this.loading = false;
-                                            this._errorHandler.showMessage(error);
-                                        }
-                                    );
-                                });
+                                if (ontoMeta.ontologies.length) {
+                                    ontoMeta.ontologies.forEach(onto => {
+
+                                        // const name = this._ontologyService.getOntologyName(onto.id);
+                                        this._dspApiConnection.v2.onto.getOntology(onto.id).subscribe(
+                                            (ontology: ReadOntology) => {
+                                                this.projectOntologies.push(ontology);
+                                                this.ontologies.push(ontology);
+                                                if (ontoMeta.ontologies.length === this.ontologies.length) {
+                                                    this._cache.set('currentProjectOntologies', this.ontologies);
+                                                    this.loading = !this._cache.has(this.projectCode);
+                                                }
+                                            },
+                                            (error: ApiResponseError) => {
+                                                this.loading = false;
+                                                this._errorHandler.showMessage(error);
+                                            }
+                                        );
+                                    });
+                                } else {
+                                    this.loading = !this._cache.has(this.projectCode);
+                                }
                             },
                             (error: ApiResponseError) => {
                                 this._errorHandler.showMessage(error);
@@ -168,14 +204,6 @@ export class ProjectComponent implements OnInit {
         }
     }
 
-    /**
-     * open form to create new ontology, class, property or list
-     * @param type
-     */
-    create(type: 'ontology' | 'class' | 'property' | 'list' | 'user') {
-        console.log('this will create a new', type);
-    }
-
     open(route: string, id?: string) {
         if (route === 'ontology' && id) {
             // get name of ontology
@@ -187,9 +215,11 @@ export class ProjectComponent implements OnInit {
             const pos = array.length - 1;
             id = array[pos];
         }
-        const param = (id ? `/${encodeURIComponent(id)}` : '');
-        this._router.navigateByUrl(`/beta/project/${this.projectCode}/${route}${param}`);
-
+        if (id) {
+            this._router.navigate([route, encodeURIComponent(id)], { relativeTo: this._route });
+        } else {
+            this._router.navigate([route], { relativeTo: this._route });
+        }
     }
 
     /**
diff --git a/src/app/system/projects/projects-list/projects-list.component.html b/src/app/system/projects/projects-list/projects-list.component.html
index 06b720c003..d39db4ed3c 100644
--- a/src/app/system/projects/projects-list/projects-list.component.html
+++ b/src/app/system/projects/projects-list/projects-list.component.html
@@ -71,9 +71,6 @@ <h5 class="mat-subheading-2 link info-longname" (click)="openProjectPage(project
                         (click)="openDialog('editProject', project.shortname, project.shortcode)">
                         Edit project information
                     </button>
-                    <button mat-menu-item *ngIf="status" (click)="openProjectPage(project.shortcode, 'collaboration')">
-                        Manage project members
-                    </button>
                     <!-- disable the deactivate-button for the following two projects:
                     - http://www.knora.org/ontology/knora-admin#SystemProject
                     - http://www.knora.org/ontology/knora-admin#DefaultSharedOntologiesProject
diff --git a/src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts b/src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts
index 50d7f479b5..ee7048c272 100644
--- a/src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts
+++ b/src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts
@@ -142,6 +142,7 @@ export class ResourceInstanceFormComponent implements OnInit, OnChanges, OnDestr
             // boolean to show only the first step of the form (= selectResourceForm)
             this.showNextStepForm = true;
         }
+
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -245,12 +246,24 @@ export class ResourceInstanceFormComponent implements OnInit, OnChanges, OnDestr
                 (res: ReadResource) => {
                     this.resource = res;
 
-                    const path = this._resourceService.getResourcePath(this.resource.id);
-
-                    const goto = '/resource' + path;
-                    this._router.navigate([]).then(result => window.open(goto, '_blank'));
+                    let goto: string;
+
+                    if (this.beta) {
+                        const uuid = this._resourceService.getResourceUuid(this.resource.id);
+                        const params = this._route.snapshot.url;
+                        // go to ontology/[ontoname]/[classname]/[classuuid] relative to parent route beta/project/[projectcode]/
+                        this._router.navigate([params[0].path, params[1].path, params[2].path, uuid],
+                            { relativeTo: this._route.parent }).then(() => {
+                            // refresh whole page; todo: would be better to use an event emitter to the parent to update the list of resource classes
+                            window.location.reload();
+                        });
+                    } else {
+                        const path = this._resourceService.getResourcePath(this.resource.id);
+                        goto = '/resource' + path;
+                        this._router.navigate([]).then(result => window.open(goto, '_blank'));
+                        this.closeDialog.emit();
+                    }
 
-                    this.closeDialog.emit();
                 },
                 (error: ApiResponseError) => {
                     this.error = true;
diff --git a/src/app/workspace/resource/services/resource.service.ts b/src/app/workspace/resource/services/resource.service.ts
index 88a5261762..cf052eeb2b 100644
--- a/src/app/workspace/resource/services/resource.service.ts
+++ b/src/app/workspace/resource/services/resource.service.ts
@@ -23,6 +23,15 @@ export class ResourceService {
         return iri.replace(this.iriBase, '');
     }
 
+    /**
+     * gets resource uuid `[resource-uuid]`
+     * @param iri e.g. http://rdfh.ch/082B/SQkTPdHdTzq_gqbwj6QR-A
+     * @returns resource uuid --> SQkTPdHdTzq_gqbwj6QR-A
+     */
+    getResourceUuid(iri: string): string {
+        return this.getResourcePath(iri).split('/')[2];
+    }
+
     /**
      * gets resource iri
      * @param shortcode e.g. 082B
diff --git a/src/assets/style/_layout.scss b/src/assets/style/_layout.scss
index 2776106b4c..54f11f28e6 100644
--- a/src/assets/style/_layout.scss
+++ b/src/assets/style/_layout.scss
@@ -56,6 +56,10 @@
   .project-nav {
     width: 220px;
 
+    .mat-list.main-list {
+      margin-bottom: calc(#{$header-height} - 8px);
+    }
+
     .mat-title,
     .mat-subheading-2,
     .mat-subheading-1 {
@@ -119,6 +123,15 @@
 
   padding-top: 0 !important;
 
+  &.settings {
+    height: 72px;
+    padding-top: 8px !important;
+
+    .mat-tab-links {
+      margin-top: 24px;
+    }
+  }
+
   .nav-item {
     height: 48px;
     text-align: left;
diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss
index 79e9dae3af..47c71d4b9d 100644
--- a/src/assets/style/main.scss
+++ b/src/assets/style/main.scss
@@ -220,3 +220,10 @@ button.space-reducer {
     border-color: $accent !important;
   }
 }
+
+.ontology-editor.beta {
+  .mat-drawer-inner-container {
+    width: 200px;
+    position: fixed;
+  }
+}