diff --git a/.stylelintrc.json b/.stylelintrc.json
index 85ca2dd3..f01755d7 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -26,7 +26,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
diff --git a/index.html b/index.html
index d214699a..51dc5a41 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,9 @@
         <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
         <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
 
-        <link href="css/app.css" rel="stylesheet">
-        <link href="css/macro.css" rel="stylesheet">
-        <link href="css/style.css" rel="stylesheet">
-
         <script src="node_modules/jquery/dist/jquery.min.js"></script>
     </head>
     <body>
-        <div class="github-fork-ribbon">
-            <a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
-        </div>
         <!-- Google Tag Manager -->
         <noscript>
             <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB" height="0" width="0" style="display:none;visibility:hidden"></iframe>
@@ -29,13 +22,6 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         </script>
         <!-- End Google Tag Manager -->
 
-        <!-- TODO move to component -->
-        <div class="notification" style="display: none">
-            <span class="notificatin__text">Keymap removed</span>
-            <a href="#" class="notification__action notification__action--undo">Undo</a>
-            <span class="notification__dismiss">&times;</span>
-        </div>
-
         <main-app></main-app>
 
         <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- TODO remove in near future -->
diff --git a/src/app.module.ts b/src/app.module.ts
index 9b207c2d..6f8dca7a 100644
--- a/src/app.module.ts
+++ b/src/app.module.ts
@@ -11,9 +11,10 @@ import { MainAppComponent }  from './main-app.component';
 import { KeymapComponent } from './components/keymap/keymap.component';
 import { MacroComponent } from './components/macro/macro.component';
 import { LegacyLoaderComponent } from './components/legacy/legacy-loader.component';
+import { NotificationComponent } from './components/notification/notification.component';
 
 @NgModule({
-    declarations: [MainAppComponent, KeymapComponent, MacroComponent, LegacyLoaderComponent],
+    declarations: [MainAppComponent, KeymapComponent, MacroComponent, LegacyLoaderComponent, NotificationComponent],
     imports: [BrowserModule],
     providers: [
         DataProviderService,
diff --git a/src/components/keymap/keymap.component.scss b/src/components/keymap/keymap.component.scss
index 849aff79..c5308be1 100644
--- a/src/components/keymap/keymap.component.scss
+++ b/src/components/keymap/keymap.component.scss
@@ -4,10 +4,6 @@
     display: block;
 }
 
-.uhk--wrapper {
-    height: calc(100% - 95px);
-}
-
 button {
     margin: 2px;
 }
@@ -24,10 +20,79 @@ svg-keyboard-popover {
 
 .keyboard-slider {
     height: calc(100% - 45px);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
 }
 
-.uhk__layer-switcher--wrapper {
-    margin-bottom: 2rem;
+.keymap {
+    &__is-default {
+        &.fa-star {
+            color: #333;
+        }
+
+        &.fa-star-o {
+            color: #333;
+        }
+
+        &:hover {
+            color: #555;
+            cursor: pointer;
+        }
+    }
+
+    &__remove {
+        font-size: 0.75em;
+        top: 0.3em;
+
+        &:hover {
+            cursor: pointer;
+            color: #900;
+        }
+    }
+}
+
+.pane-title {
+    margin-bottom: 1em;
+
+    &__name,
+    &__abbrev {
+        &[contenteditable=true] {
+            border: none;
+            border-bottom: 2px dotted #999;
+            padding: 0 0.5rem;
+            margin: 0 0.25rem;
+
+            &.active {
+                box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
+                border-color: transparent;
+            }
+        }
+    }
+}
+
+.uhk {
+    &--wrapper {
+        height: calc(100% - 95px);
+    }
+
+    &__layer-switcher {
+        &--wrapper {
+            position: relative;
+            margin-bottom: 2rem;
+
+            &:before {
+                content: attr(data-title);
+                display: inline-block;
+                position: absolute;
+                bottom: -0.3em;
+                right: 100%;
+                font-size: 2.4rem;
+                padding-right: 0.25em;
+                margin: 0;
+            }
+        }
+    }
 }
 
 @keyframes animate-center-left {
diff --git a/src/components/macro/macro.component.html b/src/components/macro/macro.component.html
index a3e5bc07..a7c4ea8b 100644
--- a/src/components/macro/macro.component.html
+++ b/src/components/macro/macro.component.html
@@ -1 +1,77 @@
-Macro
\ No newline at end of file
+<div class="macro--edit main-content__inner">
+    <div class="row">
+        <h1 class="col-xs-12 pane-title">
+            <i class="fa fa-play"></i>
+            <span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
+        </h1>
+    </div>
+    <div class="row">
+        <div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item macro-settings" style="display: none;">
+                <div class="helper"></div>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+                    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                    sit amet.</p>
+                <div class="row">
+                    <div class="col-sm-12 flex-button-wrapper">
+                        <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
+                        <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
+                    </div>
+                </div>
+            </div>
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-square"></i> Press letter A
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-square"></i> Press Alt+Tab
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-clock-o"></i> Delay of 235ms
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-mouse-pointer"></i> Press button 1
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item action--item">
+                <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
+                <i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
+                <i class="glyphicon glyphicon-pencil action--edit"></i>
+                <i class="glyphicon glyphicon-trash action--trash"></i>
+            </div>
+            <div class="list-group-item action--item add-new__action-item no-reorder">
+                <a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
+            </div>
+            <div class="list-group-item new-macro-settings">
+                <div class="helper"></div>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+                    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                    sit amet.</p>
+                <div class="row">
+                    <div class="col-sm-12 flex-button-wrapper">
+                        <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
+                        <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/macro/macro.component.scss b/src/components/macro/macro.component.scss
index e69de29b..ab3f7d22 100644
--- a/src/components/macro/macro.component.scss
+++ b/src/components/macro/macro.component.scss
@@ -0,0 +1,93 @@
+.main-wrapper {
+    width: 500px;
+}
+
+h1 {
+    margin-bottom: 3rem;
+}
+
+.action--item {
+    padding-left: 8px;
+}
+
+.action--item.active,
+.action--item.active:hover {
+    background-color: white;
+    font-weight: bold;
+    color: black;
+    border-color: black;
+    z-index: 10;
+}
+
+.macro-settings {
+    border: 1px solid black;
+    border-top-color: #999;
+    z-index: 100;
+}
+
+.macro-settings .helper {
+    position: absolute;
+    display: block;
+    height: 13px;
+    background: #fff;
+    width: 100%;
+    left: 0;
+    top: -14px;
+}
+
+.action--item.active.callout,
+.macro-settings.callout {
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
+}
+
+.list-group-item .move-handle:hover {
+    cursor: move;
+}
+
+.action--edit {
+    float: right;
+}
+
+.action--edit:hover {
+    color: #337ab7;
+    cursor: pointer;
+}
+
+.action--trash {
+    float: right;
+    margin-right: 1rem;
+}
+
+.action--trash:hover {
+    color: #d9534f;
+    cursor: pointer;
+}
+
+.action--edit__form {
+    background-color: #fff;
+    margin-left: -0.5rem;
+    margin-right: -15px;
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #ddd;
+}
+
+.flex-button-wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.flex-button {
+    align-self: flex-end;
+}
+
+.add-new__action-item:hover {
+    cursor: pointer;
+}
+
+.add-new__action-item--link,
+.add-new__action-item--link:active,
+.add-new__action-item--link:hover {
+    text-decoration: none;
+    color: #337ab7;
+}
diff --git a/src/components/notification/notification.component.html b/src/components/notification/notification.component.html
new file mode 100644
index 00000000..d63066ff
--- /dev/null
+++ b/src/components/notification/notification.component.html
@@ -0,0 +1,3 @@
+<span class="text">Keymap removed</span>
+<a href="#" class="action action--undo">Undo</a>
+<span class="dismiss">&times;</span>
\ No newline at end of file
diff --git a/src/components/notification/notification.component.scss b/src/components/notification/notification.component.scss
new file mode 100644
index 00000000..c73c66fa
--- /dev/null
+++ b/src/components/notification/notification.component.scss
@@ -0,0 +1,38 @@
+:host {
+    padding: 1rem 1.5rem;
+    box-shadow: 0 0 0 1px #000;
+    border-radius: 0.5rem;
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    z-index: 10000;
+    background-color: #333;
+    color: #eee;
+    display: none;
+}
+
+.action {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    color: #5bc0de;
+    text-transform: uppercase;
+    font-weight: bold;
+
+    &:focus,
+    &:active,
+    &:hover {
+        text-decoration: none;
+        color: #5bc0de;
+    }
+}
+
+.dismiss {
+    position: relative;
+    bottom: 1px;
+    color: #ccc;
+
+    &:hover {
+        cursor: pointer;
+        color: #fff;
+    }
+}
diff --git a/src/components/notification/notification.component.ts b/src/components/notification/notification.component.ts
new file mode 100644
index 00000000..754d0a3b
--- /dev/null
+++ b/src/components/notification/notification.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'notification',
+    template: require('./notification.component.html'),
+    styles: [require('./notification.component.scss')]
+})
+export class NotificationComponent {
+
+    constructor() {
+    }
+}
diff --git a/src/components/popover/popover.component.scss b/src/components/popover/popover.component.scss
index 0c855af4..5e7c9ca6 100644
--- a/src/components/popover/popover.component.scss
+++ b/src/components/popover/popover.component.scss
@@ -28,6 +28,7 @@
             .menu-tabs--item {
                 display: flex;
                 align-items: center;
+                cursor: pointer;
 
                 i {
                     margin-right: 0.25em;
@@ -41,10 +42,19 @@
     padding: 10px 24px;
 }
 
-mouse-tab {
-    &.popover-content {
-        padding: 10px;
-        display: flex;
-        align-items: center;
+.select2-item {
+    position: relative;
+    font-size: 1.5rem;
+
+    &.keymap-name--wrapper {
+        padding-left: 50px;
+    }
+
+    .layout-segment-code {
+        height: 2rem;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -1rem;
     }
 }
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.html b/src/components/popover/tab/keypress/keypress-tab.component.html
index e858d9cc..b4492276 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.html
+++ b/src/components/popover/tab/keypress/keypress-tab.component.html
@@ -26,4 +26,10 @@
     <select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
         [width]="140"></select2>
     <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
+</div>
+
+<div class="disabled-state--text">
+    <i class="fa fa-info-circle"></i>
+    When a key is configured as layer switcher key, you can't assign other functions to it.
+    To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
 </div>
\ No newline at end of file
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.scss b/src/components/popover/tab/keypress/keypress-tab.component.scss
index be1249e0..74813846 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.scss
+++ b/src/components/popover/tab/keypress/keypress-tab.component.scss
@@ -1,6 +1,7 @@
 :host {
     display: flex;
     flex-direction: column;
+    position: relative;
 
     .scancode-options {
         margin-bottom: 10px;
@@ -41,4 +42,37 @@
             margin-left: 0.6em;
         }
     }
+
+    .setting-label {
+        &.disabled {
+            color: #999;
+        }
+    }
+
+    .disabled-state--text {
+        display: none;
+        position: absolute;
+        top: 50%;
+        margin-top: -4rem;
+        color: #31708f;
+        padding-right: 40px;
+
+        .fa {
+            font-size: 2.6rem;
+            float: left;
+            padding: 1rem 1.5rem 2rem;
+        }
+    }
+
+    &.disabled {
+        .scancode-options,
+        .modifier-options,
+        .long-press-container {
+            visibility: hidden;
+        }
+
+        .disabled-state--text {
+            display: block;
+        }
+    }
 }
diff --git a/src/components/popover/tab/mouse/mouse-tab.component.scss b/src/components/popover/tab/mouse/mouse-tab.component.scss
index 1aa9fd13..d403358e 100644
--- a/src/components/popover/tab/mouse/mouse-tab.component.scss
+++ b/src/components/popover/tab/mouse/mouse-tab.component.scss
@@ -1,27 +1,44 @@
 :host {
     display: flex;
 
+    &.popover-content {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+
     .mouse-action {
-        ul {
+        .nav {
             border-right: 1px solid #ccc;
+
             li {
                 a {
                     border-top-right-radius: 0;
                     border-bottom-right-radius: 0;
+
+                    &.selected {
+                        font-style: italic;
+                    }
                 }
 
                 &.active {
-                    a:after {
-                        content: '';
-                        display: block;
-                        position: absolute;
-                        width: 0;
-                        height: 0;
-                        top: 0;
-                        right: -4rem;
-                        border-color: transparent transparent transparent #337ab7;
-                        border-style: solid;
-                        border-width: 2rem;
+                    a {
+                        &.selected {
+                            font-style: normal;
+                        }
+
+                        &:after {
+                            content: '';
+                            display: block;
+                            position: absolute;
+                            width: 0;
+                            height: 0;
+                            top: 0;
+                            right: -4rem;
+                            border-color: transparent transparent transparent #337ab7;
+                            border-style: solid;
+                            border-width: 2rem;
+                        }
                     }
                 }
             }
diff --git a/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss
index 7873664f..16896b59 100644
--- a/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss
+++ b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss
@@ -1,8 +1,8 @@
 button {
     display: inline-block;
-    margin: 0 0 0 .25rem;
+    margin: 0 0 0 0.25rem;
 }
 
 .fa-circle {
-    color:#c00;
+    color: #c00;
 }
diff --git a/src/components/sidemenu/side-menu.component.html b/src/components/sidemenu/side-menu.component.html
index 2d3b8d50..c79f7d6a 100644
--- a/src/components/sidemenu/side-menu.component.html
+++ b/src/components/sidemenu/side-menu.component.html
@@ -11,7 +11,7 @@
             <li *ngFor="let keymap of keymaps" class="sidebar__level-2--item">
                 <div class="sidebar__level-2">
                     <a [routerLink]="['/keymap', keymap.id]">{{keymap.name}}</a>
-                    <i class="fa fa-star pull-right"></i>
+                    <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
                 </div>
             </li>
         </ul>
@@ -28,7 +28,6 @@
             <li *ngFor="let macro of macros" class="sidebar__level-2--item">
                 <div class="sidebar__level-2">
                     <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
-                    <i class="fa fa-star pull-right"></i>
                 </div>
             </li>
         </ul>
@@ -41,22 +40,22 @@
         <ul #addonElement>
             <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                 <div class="sidebar__level-2">
-                    Key cluster
+                    <a href="#">Key cluster</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
                 <div class="sidebar__level-2">
-                    Trackball
+                    <a href="#">Trackball</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
                 <div class="sidebar__level-2">
-                    Toucpad
+                    <a href="#">Touchpad</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
                 <div class="sidebar__level-2">
-                    Trackpoint
+                    <a href="#">Trackpoint</a>
                 </div>
             </li>
         </ul>
diff --git a/src/components/sidemenu/side-menu.component.scss b/src/components/sidemenu/side-menu.component.scss
index 52b9d0e9..b5ab1065 100644
--- a/src/components/sidemenu/side-menu.component.scss
+++ b/src/components/sidemenu/side-menu.component.scss
@@ -13,11 +13,130 @@ a {
 
 ul ul {
     max-height: 200px;
-    transition: max-height 0.5s ease-in;
+    transition: max-height 500ms ease-in;
     overflow: hidden;
 }
 
 ul ul.slide-up {
     max-height: 0;
-    transition: max-height 0.5s ease-out;
+    transition: max-height 500ms ease-out;
+}
+
+// General list styles for the sidebar-menu.
+ul {
+    padding: 0;
+    margin: 0;
+
+    li {
+        list-style: none;
+        padding: 0;
+    }
+}
+
+.sidebar {
+    &__level-1 {
+        padding: 0.5rem 1rem;
+        font-size: 2rem;
+        line-height: 3rem;
+
+        &:hover {
+            .fa-chevron-up,
+            .fa-chevron-down {
+                display: inline-block;
+            }
+        }
+
+        &--item {
+            margin-top: 0;
+
+            &:nth-child(1) {
+                margin: 0;
+            }
+        }
+
+        .sidebar__name {
+            width: 100%;
+            display: block;
+        }
+
+        .fa-chevron-up,
+        .fa-chevron-down {
+            margin-right: 1rem;
+            font-size: 1.5rem;
+            position: relative;
+            top: 0.5rem;
+            display: none;
+        }
+    }
+
+    &__level-2 {
+
+        &--item {
+            padding: 0 20px 0 0;
+            position: relative;
+
+            &.active {
+                background-color: #555;
+                color: #fff;
+
+                .fa-star {
+                    color: #fff;
+                }
+
+                &:hover {
+                    background-color: #555;
+                }
+            }
+
+            // General "right side" icon theming.
+            .fa.pull-right {
+                position: relative;
+                top: 2px;
+            }
+
+            .fa-star {
+                color: #666;
+            }
+
+            a {
+                display: block;
+                width: 100%;
+                padding: 0 15px 0 30px;
+
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    // General hover over menu items.
+    &__level-1,
+    &__level-2--item {
+        &:hover {
+            cursor: pointer;
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    &__fav {
+        position: absolute;
+        right: 19px;
+        top: 3px;
+    }
+}
+
+.menu--bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    .sidebar {
+        &__level-1 {
+            background-color: transparent;
+            padding: 1rem;
+        }
+    }
 }
diff --git a/src/main-app.component.html b/src/main-app.component.html
index 64a6662a..a1cec2ec 100644
--- a/src/main-app.component.html
+++ b/src/main-app.component.html
@@ -1,4 +1,8 @@
+<notification></notification>
 <side-menu></side-menu>
 <div id="main-content" class="split split-horizontal container-fluid main-content">
     <router-outlet></router-outlet>
+</div>
+<div class="github-fork-ribbon">
+    <a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
 </div>
\ No newline at end of file
diff --git a/src/main-app.component.scss b/src/main-app.component.scss
index 273c774f..635de6ad 100644
--- a/src/main-app.component.scss
+++ b/src/main-app.component.scss
@@ -1,10 +1,59 @@
-:host {
+main-app {
     display: block;
     height: 100vh;
     width: 100%;
     overflow: hidden;
+    position: relative;
+
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 26px;
+    }
 }
 
 .main-content {
     height: 100%;
+    margin-left: 250px;
+}
+
+.select2 {
+    &-container {
+        z-index: 100000;
+    }
+
+    &-results {
+        text-align: center;
+    }
+}
+
+/* GitHub ribbon */
+.github-fork-ribbon {
+    background-color: #a00;
+    overflow: hidden;
+    white-space: nowrap;
+    position: fixed;
+    right: -50px;
+    bottom: 40px;
+    z-index: 999999;
+    /* stylelint-disable indentation */
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    -webkit-box-shadow: 0 0 10px #888;
+    -moz-box-shadow: 0 0 10px #888;
+    box-shadow: 0 0 10px #888;
+    /* stylelint-enable indentation */
+
+    a {
+        border: 1px solid #faa;
+        color: #fff;
+        display: block;
+        font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        margin: 1px 0;
+        padding: 10px 50px;
+        text-align: center;
+        text-decoration: none;
+        text-shadow: 0 0 5px #444;
+    }
 }
diff --git a/src/main-app.component.ts b/src/main-app.component.ts
index b172f9ec..806e7904 100644
--- a/src/main-app.component.ts
+++ b/src/main-app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import { ROUTER_DIRECTIVES } from '@angular/router';
 
 import { SideMenuComponent } from './components/sidemenu/side-menu.component';
@@ -8,7 +8,8 @@ import { SideMenuComponent } from './components/sidemenu/side-menu.component';
     selector: 'main-app',
     template: require('./main-app.component.html'),
     styles: [require('./main-app.component.scss')],
-    directives: [SideMenuComponent, ROUTER_DIRECTIVES]
+    directives: [SideMenuComponent, ROUTER_DIRECTIVES],
+    encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent  {
     constructor() {
