diff --git a/@overflow/commons/ui/component/menu/app-menu-bar.component.html b/@overflow/commons/ui/component/menu/app-menu-bar.component.html
index 6d633e2..e69de29 100644
--- a/@overflow/commons/ui/component/menu/app-menu-bar.component.html
+++ b/@overflow/commons/ui/component/menu/app-menu-bar.component.html
@@ -1,3 +0,0 @@
-<div id="app-menu-bar" role="menubar" aria-label="Application menu">
-
-</div>
\ No newline at end of file
diff --git a/@overflow/commons/ui/component/menu/app-menu-bar.component.ts b/@overflow/commons/ui/component/menu/app-menu-bar.component.ts
index 5da573f..a446ee7 100644
--- a/@overflow/commons/ui/component/menu/app-menu-bar.component.ts
+++ b/@overflow/commons/ui/component/menu/app-menu-bar.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'of-app-menu-bar',
+  selector: 'app-menu-bar',
   templateUrl: './app-menu-bar.component.html',
 })
 export class AppMenuBarComponent implements OnInit {
diff --git a/@overflow/commons/ui/component/window/title-bar.component.html b/@overflow/commons/ui/component/window/title-bar.component.html
index c6083a3..263c58b 100644
--- a/@overflow/commons/ui/component/window/title-bar.component.html
+++ b/@overflow/commons/ui/component/window/title-bar.component.html
@@ -9,6 +9,10 @@
     />
   </svg>
 
-  <of-app-menu-bar></of-app-menu-bar>
-  <of-window-controls></of-window-controls>
+  <app-menu-bar></app-menu-bar>
+
+  <div class="window-controls">
+    <app-window-controls></app-window-controls>
+  </div>
+
 </div>
\ No newline at end of file
diff --git a/@overflow/commons/ui/component/window/title-bar.component.ts b/@overflow/commons/ui/component/window/title-bar.component.ts
index 3d6d0a7..9bd0025 100644
--- a/@overflow/commons/ui/component/window/title-bar.component.ts
+++ b/@overflow/commons/ui/component/window/title-bar.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'of-title-bar',
+  selector: 'app-title-bar',
   templateUrl: './title-bar.component.html',
 })
 export class TitleBarComponent implements OnInit {
diff --git a/@overflow/commons/ui/component/window/window-controls.component.ts b/@overflow/commons/ui/component/window/window-controls.component.ts
index aa8517b..66297f0 100644
--- a/@overflow/commons/ui/component/window/window-controls.component.ts
+++ b/@overflow/commons/ui/component/window/window-controls.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ipcRenderer, remote } from 'electron';
 
 @Component({
-  selector: 'of-window-controls',
+  selector: 'app-window-controls',
   templateUrl: './window-controls.component.html',
 })
 export class WindowControlsComponent implements OnInit {
diff --git a/angular.json b/angular.json
index 804fad3..943f1f9 100644
--- a/angular.json
+++ b/angular.json
@@ -7,7 +7,7 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
-      "prefix": "of",
+      "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
           "styleext": "scss"
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
index bf3011e..82ea75b 100644
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -6,6 +6,6 @@ export class AppPage {
   }
 
   getParagraphText() {
-    return element(by.css('of-root h1')).getText();
+    return element(by.css('app-root h1')).getText();
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2101fd3..b40ef95 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <div id="app-container">
   <div id="app-chrome" class="focused">
-    <of-title-bar></of-title-bar>
+    <app-title-bar></app-title-bar>
     <div id="app-contents">
       <router-outlet></router-outlet>
     </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 64a5243..05c4561 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'of-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 682870b..1c9a09f 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 
 
 @Component({
-  selector: 'of-pages-home',
+  selector: 'app-pages-home',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
 })
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 11fc594..2a3d86a 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -11,7 +11,7 @@ enum MenuOrientation {
 }
 
 @Component({
-  selector: 'of-pages',
+  selector: 'app-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss'],
 })
diff --git a/src/assets/scss/styles/component/_app.scss b/src/assets/scss/styles/component/_app.scss
index d3b0747..5bf55ac 100644
--- a/src/assets/scss/styles/component/_app.scss
+++ b/src/assets/scss/styles/component/_app.scss
@@ -1,16 +1,16 @@
 @import '../mixins';
 
-#app {
+app-root {
   // This is just a dummy wrapper needed because react doesn't like
   // being installed into <body>, see https://github.com/facebook/react/issues/3207
-  &-container {
+  #app-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
 
   // The main react component div
-  &-chrome {
+  #app-chrome {
     display: flex;
     flex-direction: column;
 
@@ -19,7 +19,7 @@
   }
 
   // main non-window chrome wrapper
-  &-contents {
+  #app-contents {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
diff --git a/src/assets/scss/styles/component/window/_title-bar.scss b/src/assets/scss/styles/component/window/_title-bar.scss
index d78e451..a354d65 100644
--- a/src/assets/scss/styles/component/window/_title-bar.scss
+++ b/src/assets/scss/styles/component/window/_title-bar.scss
@@ -48,7 +48,7 @@
   // maximize/restore and close. On macOS the controls are added
   // automatically even for borderless window so we only render
   // controls on Windows.
-  of-window-controls {
+  .window-controls {
     flex-grow: 0;
     flex-shrink: 0;
     margin-left: auto;
diff --git a/src/index.html b/src/index.html
index 34616e9..c2baa9f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body class="platform-win32 theme-light">
-  <of-root></of-root>
+  <app-root></app-root>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/tslint.json b/src/tslint.json
index 22ceb59..59923ba 100644
--- a/src/tslint.json
+++ b/src/tslint.json
@@ -1,17 +1,17 @@
 {
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "of",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "of",
-            "kebab-case"
-        ]
-    }
-}
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
+  }
+}
\ No newline at end of file