diff --git a/client/angular.json b/client/angular.json
index 18de609eb..d869ce144 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -7,7 +7,7 @@
             "root": "",
             "sourceRoot": "src",
             "projectType": "application",
-            "prefix": "app",
+            "prefix": "os",
             "schematics": {
                 "@schematics/angular:component": {
                     "styleext": "scss"
@@ -78,7 +78,8 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "format": "stylish",
                         "exclude": ["**/node_modules/**"]
                     }
                 }
diff --git a/client/e2e/src/app.po.ts b/client/e2e/src/app.po.ts
index 82ea75ba5..a9f1cfbac 100644
--- a/client/e2e/src/app.po.ts
+++ b/client/e2e/src/app.po.ts
@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getParagraphText() {
+        return element(by.css('os-root h1')).getText();
+    }
 }
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 1fc46e179..ae541185f 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -10,7 +10,7 @@ import { OpenSlidesService } from './core/services/openslides.service';
  * Angular's global App Component
  */
 @Component({
-    selector: 'app-root',
+    selector: 'os-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
diff --git a/client/src/app/projector-container/projector-container.component.ts b/client/src/app/projector-container/projector-container.component.ts
index 35a61a153..8ccfe12bc 100644
--- a/client/src/app/projector-container/projector-container.component.ts
+++ b/client/src/app/projector-container/projector-container.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'app-projector-container',
+    selector: 'os-projector-container',
     templateUrl: './projector-container.component.html',
     styleUrls: ['./projector-container.component.css']
 })
diff --git a/client/src/app/projector-container/projector/projector.component.ts b/client/src/app/projector-container/projector/projector.component.ts
index e77de88f8..4a034ed64 100644
--- a/client/src/app/projector-container/projector/projector.component.ts
+++ b/client/src/app/projector-container/projector/projector.component.ts
@@ -3,7 +3,7 @@ import { BaseComponent } from 'app/base.component';
 import { Title } from '@angular/platform-browser';
 
 @Component({
-    selector: 'app-projector',
+    selector: 'os-projector',
     templateUrl: './projector.component.html',
     styleUrls: ['./projector.component.css']
 })
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.ts b/client/src/app/shared/components/head-bar/head-bar.component.ts
index 379b9102b..8237d8b58 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.ts
+++ b/client/src/app/shared/components/head-bar/head-bar.component.ts
@@ -14,13 +14,13 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  * ### Usage of the selector:
  *
  * ```html
- * <app-head-bar
+ * <os-head-bar
  *   appName="Files"
  *   PlusButton=true
  *   [menuList]=myMenu
  *   (plusButtonClicked)=onPlusButton()
  *   (ellipsisMenuItem)=onEllipsisItem($event)>
- * </app-head-bar>
+ * </os-head-bar>
  * ```
  *
  * ### Declaration of a menu provided as `[menuList]=myMenu`:
@@ -46,7 +46,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  * ```
  */
 @Component({
-    selector: 'app-head-bar',
+    selector: 'os-head-bar',
     templateUrl: './head-bar.component.html',
     styleUrls: ['./head-bar.component.scss']
 })
diff --git a/client/src/app/shared/directives/dom-change.directive.ts b/client/src/app/shared/directives/dom-change.directive.ts
index d6f742736..60938ff74 100644
--- a/client/src/app/shared/directives/dom-change.directive.ts
+++ b/client/src/app/shared/directives/dom-change.directive.ts
@@ -6,7 +6,7 @@ import { Directive, Output, EventEmitter, ElementRef, OnDestroy } from '@angular
  * @example (appDomChange)="onChange($event)"
  */
 @Directive({
-    selector: '[appDomChange]'
+    selector: '[osDomChange]'
 })
 export class DomChangeDirective implements OnDestroy {
     private changes: MutationObserver;
diff --git a/client/src/app/shared/directives/os-perms.directive.spec.ts b/client/src/app/shared/directives/perms.directive.spec.ts
similarity index 80%
rename from client/src/app/shared/directives/os-perms.directive.spec.ts
rename to client/src/app/shared/directives/perms.directive.spec.ts
index 4d153e626..80363f8ed 100644
--- a/client/src/app/shared/directives/os-perms.directive.spec.ts
+++ b/client/src/app/shared/directives/perms.directive.spec.ts
@@ -1,4 +1,4 @@
-describe('OsPermsDirective', () => {
+describe('PermsDirective', () => {
     it('should create an instance', () => {
         // const directive = new OsPermsDirective();
         // expect(directive).toBeTruthy();
diff --git a/client/src/app/shared/directives/os-perms.directive.ts b/client/src/app/shared/directives/perms.directive.ts
similarity index 91%
rename from client/src/app/shared/directives/os-perms.directive.ts
rename to client/src/app/shared/directives/perms.directive.ts
index 548386200..738e281fd 100644
--- a/client/src/app/shared/directives/os-perms.directive.ts
+++ b/client/src/app/shared/directives/perms.directive.ts
@@ -7,13 +7,13 @@ import { OpenSlidesComponent } from 'app/openslides.component';
  * Directive to check if the {@link OperatorService} has the correct permissions to access certain functions
  *
  * Successor of os-perms in OpenSlides 2.2
- * @example <div *appOsPerms="'perm'" ..> ... < /div>
- * @example <div *appOsPerms="['perm1', 'perm2']" ..> ... < /div>
+ * @example <div *osPerms="'perm'" ..> ... < /div>
+ * @example <div *osPerms="['perm1', 'perm2']" ..> ... < /div>
  */
 @Directive({
-    selector: '[appOsPerms]'
+    selector: '[osPerms]'
 })
-export class OsPermsDirective extends OpenSlidesComponent {
+export class PermsDirective extends OpenSlidesComponent {
     /**
      * Holds the required permissions the access a feature
      */
@@ -51,7 +51,7 @@ export class OsPermsDirective extends OpenSlidesComponent {
      * The value defines the requires permissions as an array or a single permission.
      */
     @Input()
-    public set appOsPerms(value) {
+    public set osPerms(value) {
         if (!value) {
             value = [];
         } else if (typeof value === 'string') {
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 21df10880..6d734cbf4 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -32,7 +32,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { TranslateModule } from '@ngx-translate/core';
 
 // directives
-import { OsPermsDirective } from './directives/os-perms.directive';
+import { PermsDirective } from './directives/perms.directive';
 import { DomChangeDirective } from './directives/dom-change.directive';
 import { HeadBarComponent } from './components/head-bar/head-bar.component';
 
@@ -94,10 +94,10 @@ library.add(fas);
         MatSnackBarModule,
         FontAwesomeModule,
         TranslateModule,
-        OsPermsDirective,
+        PermsDirective,
         DomChangeDirective,
         HeadBarComponent
     ],
-    declarations: [OsPermsDirective, DomChangeDirective, HeadBarComponent]
+    declarations: [PermsDirective, DomChangeDirective, HeadBarComponent]
 })
 export class SharedModule {}
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/agenda-list/agenda-list.component.html
index eb24b6838..d96e3aa28 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.html
+++ b/client/src/app/site/agenda/agenda-list/agenda-list.component.html
@@ -1,4 +1,5 @@
-<app-head-bar appName="Agenda" plusButton=true (plusButtonClicked)=onPlusButton()></app-head-bar>
+<os-head-bar appName="Agenda" plusButton=true (plusButtonClicked)=onPlusButton()>
+</os-head-bar>
 
 <mat-card class="os-card card-plus-distance">
     <div class="app-content">
@@ -8,7 +9,7 @@
             everyone should see this
         </div>
         <br/>
-        <div *appOsPerms="'agenda.can_see'">
+        <div *osPerms="'agenda.can_see'">
             Only permitted users should see this
         </div>
     </div>
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts b/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
index 41481e223..3678a9257 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
+++ b/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
@@ -9,7 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
  * TODO: Not yet implemented
  */
 @Component({
-    selector: 'app-agenda-list',
+    selector: 'os-agenda-list',
     templateUrl: './agenda-list.component.html',
     styleUrls: ['./agenda-list.component.css']
 })
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
index a6359530a..76cea8273 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
@@ -13,7 +13,8 @@
 
 </mat-toolbar> -->
 
-<app-head-bar appName="Assignments" plusButton=true [menuList]=assignmentMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)></app-head-bar>
+<os-head-bar appName="Assignments" plusButton=true [menuList]=assignmentMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
+</os-head-bar>
 
 <mat-card class="os-card card-plus-distance">
     assignment-list works!
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
index befb41b4a..1bfa974b5 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
@@ -9,7 +9,7 @@ import { Title } from '@angular/platform-browser';
  * TODO: not yet implemented
  */
 @Component({
-    selector: 'app-assignment-list',
+    selector: 'os-assignment-list',
     templateUrl: './assignment-list.component.html',
     styleUrls: ['./assignment-list.component.css']
 })
diff --git a/client/src/app/site/legal-notice/legal-notice.component.ts b/client/src/app/site/legal-notice/legal-notice.component.ts
index 92a71894b..b866f1f45 100644
--- a/client/src/app/site/legal-notice/legal-notice.component.ts
+++ b/client/src/app/site/legal-notice/legal-notice.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'app-legal-notice',
+    selector: 'os-legal-notice',
     templateUrl: './legal-notice.component.html',
     styleUrls: ['./legal-notice.component.scss']
 })
diff --git a/client/src/app/site/login/login.component.ts b/client/src/app/site/login/login.component.ts
index 1b6a43f9a..48937f332 100644
--- a/client/src/app/site/login/login.component.ts
+++ b/client/src/app/site/login/login.component.ts
@@ -37,7 +37,7 @@ export class ParentErrorStateMatcher implements ErrorStateMatcher {
  * Handles user (and potentially guest) login
  */
 @Component({
-    selector: 'app-login',
+    selector: 'os-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.scss']
 })
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
index db619f039..677d6cf2e 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
@@ -1,5 +1,5 @@
-<app-head-bar appName="Files" plusButton=true [menuList]=extraMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
-</app-head-bar>
+<os-head-bar appName="Files" plusButton=true [menuList]=extraMenu (plusButtonClicked)=onPlusButton() (ellipsisMenuItem)=onEllipsisItem($event)>
+</os-head-bar>
 
 
 <mat-card class="os-card card-plus-distance">
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
index 8a7a8a494..94f7f1acf 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
@@ -11,7 +11,7 @@ import { BaseComponent } from '../../../base.component';
  * Not yet implemented
  */
 @Component({
-    selector: 'app-mediafile-list',
+    selector: 'os-mediafile-list',
     templateUrl: './mediafile-list.component.html',
     styleUrls: ['./mediafile-list.component.css']
 })
diff --git a/client/src/app/site/motions/category-list/category-list.component.html b/client/src/app/site/motions/category-list/category-list.component.html
index 8fa62310c..1194f89bf 100644
--- a/client/src/app/site/motions/category-list/category-list.component.html
+++ b/client/src/app/site/motions/category-list/category-list.component.html
@@ -1,4 +1,5 @@
-<app-head-bar appName="Category" plusButton=true (plusButtonClicked)=onPlusButton()></app-head-bar>
+<os-head-bar appName="Category" plusButton=true (plusButtonClicked)=onPlusButton()>
+</os-head-bar>
 
 <mat-table class='on-transition-fade' [dataSource]="dataSource" matSort>
     <!-- name column -->
diff --git a/client/src/app/site/motions/category-list/category-list.component.ts b/client/src/app/site/motions/category-list/category-list.component.ts
index 3aa25f2f1..70263c0db 100644
--- a/client/src/app/site/motions/category-list/category-list.component.ts
+++ b/client/src/app/site/motions/category-list/category-list.component.ts
@@ -12,7 +12,7 @@ import { Category } from '../../../shared/models/motions/category';
  * TODO: Creation of new Categories
  */
 @Component({
-    selector: 'app-category-list',
+    selector: 'os-category-list',
     templateUrl: './category-list.component.html',
     styleUrls: ['./category-list.component.scss']
 })
diff --git a/client/src/app/site/motions/motion-detail/motion-detail.component.ts b/client/src/app/site/motions/motion-detail/motion-detail.component.ts
index e83d837e9..9ab561d1a 100644
--- a/client/src/app/site/motions/motion-detail/motion-detail.component.ts
+++ b/client/src/app/site/motions/motion-detail/motion-detail.component.ts
@@ -11,7 +11,7 @@ import { DataSendService } from '../../../core/services/data-send.service';
  * Component for the motion detail view
  */
 @Component({
-    selector: 'app-motion-detail',
+    selector: 'os-motion-detail',
     templateUrl: './motion-detail.component.html',
     styleUrls: ['./motion-detail.component.scss']
 })
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.html b/client/src/app/site/motions/motion-list/motion-list.component.html
index 69ab25169..6e7cea8dd 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/motion-list/motion-list.component.html
@@ -19,7 +19,8 @@
 
 </mat-toolbar> -->
 
-<app-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)></app-head-bar>
+<os-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)>
+</os-head-bar>
 
 <div class='custom-table-header on-transition-fade'>
     <button mat-button>
@@ -70,4 +71,4 @@
     <mat-row (click)='selectMotion(row)' *matRowDef="let row; columns: columnsToDisplayMinWidth"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
\ No newline at end of file
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.ts b/client/src/app/site/motions/motion-list/motion-list.component.ts
index f08add134..01c22e458 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.ts
+++ b/client/src/app/site/motions/motion-list/motion-list.component.ts
@@ -11,7 +11,7 @@ import { Workflow } from '../../../shared/models/motions/workflow';
  * Component that displays all the motions in a Table using DataSource.
  */
 @Component({
-    selector: 'app-motion-list',
+    selector: 'os-motion-list',
     templateUrl: './motion-list.component.html',
     styleUrls: ['./motion-list.component.scss']
 })
diff --git a/client/src/app/site/privacy-policy/privacy-policy.component.ts b/client/src/app/site/privacy-policy/privacy-policy.component.ts
index aa92d2776..f6993c9b0 100644
--- a/client/src/app/site/privacy-policy/privacy-policy.component.ts
+++ b/client/src/app/site/privacy-policy/privacy-policy.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'app-privacy-policy',
+    selector: 'os-privacy-policy',
     templateUrl: './privacy-policy.component.html',
     styleUrls: ['./privacy-policy.component.scss']
 })
diff --git a/client/src/app/site/settings/settings-list/settings-list.component.html b/client/src/app/site/settings/settings-list/settings-list.component.html
index b477ea4a2..e98db3b23 100644
--- a/client/src/app/site/settings/settings-list/settings-list.component.html
+++ b/client/src/app/site/settings/settings-list/settings-list.component.html
@@ -1,7 +1,8 @@
-<app-head-bar appName="Settings"></app-head-bar>
+<os-head-bar appName="Settings">
+</os-head-bar>
 
 <mat-card class="os-card">
-    <div *appOsPerms="'core.can_manage_config'" class="app-content">
+    <div *osPerms="'core.can_manage_config'" class="app-content">
 
         <mat-accordion>
             <mat-expansion-panel>
diff --git a/client/src/app/site/settings/settings-list/settings-list.component.ts b/client/src/app/site/settings/settings-list/settings-list.component.ts
index e3f49dfa9..a8c0b5feb 100644
--- a/client/src/app/site/settings/settings-list/settings-list.component.ts
+++ b/client/src/app/site/settings/settings-list/settings-list.component.ts
@@ -9,7 +9,7 @@ import { BaseComponent } from '../../../base.component';
  * TODO: Not yet implemented
  */
 @Component({
-    selector: 'app-settings-list',
+    selector: 'os-settings-list',
     templateUrl: './settings-list.component.html',
     styleUrls: ['./settings-list.component.css']
 })
diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 370885c09..c72ca2700 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -45,40 +45,37 @@
 
         <!-- navigation -->
         <mat-nav-list class='main-nav'>
-            <a [@navItemAnim] *appOsPerms="'core.can_see_frontpage'" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
+            <a [@navItemAnim] *osPerms="'core.can_see_frontpage'" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
                 (click)='toggleSideNav()'>
                 <fa-icon icon='home'></fa-icon>
                 <span translate>Home</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'agenda.can_see'" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'agenda.can_see'" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='calendar'></fa-icon>
                 <span translate>Agenda</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'motions.can_see'" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'motions.can_see'" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='file-alt'></fa-icon>
                 <span translate>Motions</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active'
-                (click)='vp.isMobile ? sideNav.toggle() : null'>
+            <a [@navItemAnim] *osPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='vp.isMobile ? sideNav.toggle() : null'>
                 <fa-icon icon='chart-pie'></fa-icon>
                 <span translate>Assignments</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'users.can_see_name'" mat-list-item routerLink='/users' routerLinkActive='active' (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'users.can_see_name'" mat-list-item routerLink='/users' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='user'></fa-icon>
                 <span translate>Participants</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'mediafiles.can_see'" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'mediafiles.can_see'" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='paperclip'></fa-icon>
                 <span translate>Files</span>
             </a>
-            <a [@navItemAnim] *appOsPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active'
-                (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='cog'></fa-icon>
                 <span translate>Settings</span>
             </a>
             <mat-divider></mat-divider>
-            <a [@navItemAnim] *appOsPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active'
-                (click)='toggleSideNav()'>
+            <a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
                 <fa-icon icon='video'></fa-icon>
                 <span translate>Projector</span>
             </a>
diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss
index a3d01c235..008556e1c 100644
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/client/src/app/site/site.component.scss-theme.scss
@@ -1,7 +1,7 @@
 @import '~@angular/material/theming';
 
 /** Custom component theme. Only lives in a specific scope */
-@mixin app-site-theme($theme) {
+@mixin os-site-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, accent);
@@ -9,7 +9,7 @@
     $background: map-get($theme, background);
 
     /** the name of the selector */
-    app-site {
+    os-site {
         mat-sidenav-container {
             /** nav panel on the left */
             mat-sidenav {
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index 9a9d8bca6..67b780f79 100644
--- a/client/src/app/site/site.component.ts
+++ b/client/src/app/site/site.component.ts
@@ -10,7 +10,7 @@ import { MatDialog, MatSidenav } from '@angular/material';
 import { ViewportService } from '../core/services/viewport.service';
 
 @Component({
-    selector: 'app-site',
+    selector: 'os-site',
     animations: [pageTransition, navItemAnim],
     templateUrl: './site.component.html',
     styleUrls: ['./site.component.scss']
diff --git a/client/src/app/site/start/start.component.html b/client/src/app/site/start/start.component.html
index 83fc3afa0..96ddaa45c 100644
--- a/client/src/app/site/start/start.component.html
+++ b/client/src/app/site/start/start.component.html
@@ -1,4 +1,5 @@
-<app-head-bar appName="Home"></app-head-bar>
+<os-head-bar appName="Home">
+</os-head-bar>
 
 <mat-card class="os-card">
     <div class="app-content" translate>
diff --git a/client/src/app/site/start/start.component.ts b/client/src/app/site/start/start.component.ts
index 837948acf..4ba4c93ec 100644
--- a/client/src/app/site/start/start.component.ts
+++ b/client/src/app/site/start/start.component.ts
@@ -12,7 +12,7 @@ import { MotionVersion } from '../../shared/models/motions/motion-version';
 import { MotionSubmitter } from '../../shared/models/motions/motion-submitter';
 
 @Component({
-    selector: 'app-start',
+    selector: 'os-start',
     templateUrl: './start.component.html',
     styleUrls: ['./start.component.css']
 })
diff --git a/client/src/app/site/users/user-list/user-list.component.html b/client/src/app/site/users/user-list/user-list.component.html
index 851e01203..de6d3ed0a 100644
--- a/client/src/app/site/users/user-list/user-list.component.html
+++ b/client/src/app/site/users/user-list/user-list.component.html
@@ -1,4 +1,5 @@
-<app-head-bar appName="Users"></app-head-bar>
+<os-head-bar appName="Users">
+</os-head-bar>
 
 <mat-card class="os-card">
     UserList Works!
diff --git a/client/src/app/site/users/user-list/user-list.component.ts b/client/src/app/site/users/user-list/user-list.component.ts
index 31790f936..b07389915 100644
--- a/client/src/app/site/users/user-list/user-list.component.ts
+++ b/client/src/app/site/users/user-list/user-list.component.ts
@@ -9,7 +9,7 @@ import { BaseComponent } from '../../../base.component';
  * TODO: Not yet implemented
  */
 @Component({
-    selector: 'app-user-list',
+    selector: 'os-user-list',
     templateUrl: './user-list.component.html',
     styleUrls: ['./user-list.component.css']
 })
diff --git a/client/src/index.html b/client/src/index.html
index c19a147cb..2677afdef 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>OpenSlides 3</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>OpenSlides 3</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
 </head>
 
 <body>
-  <app-root></app-root>
+    <os-root></os-root>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/client/src/styles.scss b/client/src/styles.scss
index c64effc96..ed1cfc45a 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -7,7 +7,7 @@
 @import './app/site/site.component.scss-theme';
 
 @mixin openslides-components-theme($theme) {
-    @include app-site-theme($theme);
+    @include os-site-theme($theme);
     /** More components are added here */
 }
 
diff --git a/client/src/tslint.json b/client/src/tslint.json
index e955328ca..654f99902 100644
--- a/client/src/tslint.json
+++ b/client/src/tslint.json
@@ -1,8 +1,8 @@
 {
     "extends": "../tslint.json",
     "rules": {
-        "directive-selector": [true, "attribute", "app", "camelCase"],
-        "component-selector": [true, "element", "app", "kebab-case"],
+        "directive-selector": [true, "attribute", "os", "camelCase"],
+        "component-selector": [true, "element", "os", "kebab-case"],
         "member-access": [true, "check-accessor", "check-constructor", "check-parameter-property"],
         "comment-format": [true, "check-space"],
         "curly": true,