diff --git a/res/app/app.js b/res/app/app.js
index 2c0bc1ae..3291c66f 100644
--- a/res/app/app.js
+++ b/res/app/app.js
@@ -7,12 +7,20 @@ require('style!raw!se7en-bootstrap-3/build/stylesheets/style.css')
 require('style!raw!se7en-bootstrap-3/build/stylesheets/font-awesome.min.css')
 
 
+// Temporary here:
+require('fa-borderlayout')
+require('fa-borderlayout/build-0.3.1/borderLayout.css')
+require('fa-borderlayout/build-0.3.1/stf-style.css')
+
+
+
 
 
 angular.module('app', [
   'ngRoute',
   require('./device-list').name,
-  require('./device-control').name
+  require('./device-control').name,
+  'fa.directive.borderLayout'
 ])
   .config(['$routeProvider', '$locationProvider',
     function ($routeProvider, $locationProvider) {
diff --git a/res/app/device-list/device-list.css b/res/app/device-list/device-list.css
index 9316ae17..287e9e61 100644
--- a/res/app/device-list/device-list.css
+++ b/res/app/device-list/device-list.css
@@ -1,3 +1,80 @@
 .device-list {
     color: deepskyblue;
+}
+
+
+ul.devices-icon-view {
+  margin: 0;
+  display: inline-block;
+  list-style-type: none;
+  /*font-weight: 300;*/
+  font-family: 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
+}
+
+ul.devices-icon-view li {
+  width: 126px;
+  height: 170px;
+  background: white;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  border: 1px solid #e6e6e6;
+  float: left;
+  clear: none;
+  margin: 6px;
+  text-align: center;
+}
+
+ul.devices-icon-view li:hover {
+  background-color: #fbfbfb;
+
+}
+
+ul.devices-icon-view .device-photo-small {
+  margin-top: 8px;
+  margin-bottom: 10px;
+}
+
+ul.devices-icon-view .device-photo-small img {
+  width: auto;
+  height: 90px;
+  /*box-shadow: 0 10px 5px rgba(255, 255, 255, 1);*/
+}
+
+ul.devices-icon-view .device-name-bigtext {
+  display: inline-block;
+  width: 80%;
+}
+
+ul.devices-icon-view .device-name {
+  color: #3FA9F5;
+  font-size: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+ul.devices-icon-view .device-product {
+  font-size: 16px;
+  color: #555;
+}
+
+ul.devices-icon-view .device-status-text {
+
+}
+
+img.device-icon-smallest {
+  width: 12px;
+  margin-right: 6px;
+}
+
+ul.devices-icon-view .device-is-busy {
+  /*box-shadow: inset 0 0 10px #e6e6e6;*/
+  /*background: #e6e6e6 !important;*/
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+ul.devices-icon-view .device-is-busy .device-photo-small img {
+  opacity: 0.5;
 }
\ No newline at end of file
diff --git a/res/app/layout/cursor.css b/res/app/layout/cursor.css
new file mode 100644
index 00000000..9f7592b7
--- /dev/null
+++ b/res/app/layout/cursor.css
@@ -0,0 +1,41 @@
+/**
+    Hand pointer
+*/
+.pointer,
+.movement-area-image {
+    cursor: pointer;
+}
+
+/**
+    Default cursor
+*/
+.cursor,
+.console-message-text,
+tab-heading {
+    cursor: default;
+}
+
+/**
+    Text unselectable
+*/
+.unselectable,
+tab-heading {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/**
+    Text selectable
+*/
+.selectable {
+    -webkit-touch-callout: default;
+    -webkit-user-select: auto;
+    -khtml-user-select: auto;
+    -moz-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+}
\ No newline at end of file
diff --git a/res/app/layout/small.css b/res/app/layout/small.css
new file mode 100644
index 00000000..af8a0a95
--- /dev/null
+++ b/res/app/layout/small.css
@@ -0,0 +1,93 @@
+/*.row {*/
+/*margin: 0 !important;*/
+/*}*/
+
+/* Fix Bootstrap */
+
+/* Make tabs smaller */
+
+.row {
+    margin: 0 5px;
+}
+
+.row + .row {
+    margin-top: 5px;
+}
+
+.nav-tabs > li > a {
+    padding: 5px 10px;
+    margin-right: 0;
+}
+
+.nav-tabs {
+    margin-top: 0;
+}
+
+/*@media (max-width: 1200px) {*/
+[class*="col-sm"],
+[class*="col-md"],
+[class*="col-lg"],
+[class*="col-xs"] {
+    margin-bottom: 10px;
+}
+
+/*}*/
+
+.row [class^="col-"] {
+    padding: 0 5px;
+}
+
+.btn .btn-xs span {
+    font-size: 12px;
+}
+
+.btn .btn-sm span {
+    /*font-size: 12px;*/
+}
+
+.btn i+span,
+.btn span+span{
+    margin-left: 5px;
+}
+
+.heading > i + span {
+    font-size: 14px;
+}
+
+a tab-heading {
+    font-size: 13px;
+}
+
+a tab-heading i + span {
+    margin-left: 5px;
+}
+
+table.table .btn {
+    margin: 0;
+}
+
+/* Widget Container */
+/*.widget-container .heading-for-tabs {*/
+/*background: rgba(255, 255, 255, 0.94);*/
+/*height: 50px;*/
+/*padding: 15px 15px;*/
+/*color: #007aff;*/
+/*font-size: 15px;*/
+/*width: 100%;*/
+/*font-weight: 400;*/
+/*margin: 0;*/
+/*height: 44px;*/
+/*}*/
+
+/*.widget-container .heading-for-tabs [class^="fa"],*/
+/*.widget-container .heading-for-tabs [class*="fa"] {*/
+/*margin-right: 5px;*/
+/*}*/
+
+/*.widget-container .heading-for-tabs [class^="fa"].pull-right,*/
+/*.widget-container .heading-for-tabs [class*="fa"].pull-right {*/
+/*margin-right: 0;*/
+/*margin-left: 15px;*/
+/*opacity: 0.35;*/
+/*font-size: 1.1em;*/
+/*}*/
\ No newline at end of file
diff --git a/res/app/layout/stf-se7en.css b/res/app/layout/stf-se7en.css
new file mode 100644
index 00000000..f4dd5bfa
--- /dev/null
+++ b/res/app/layout/stf-se7en.css
@@ -0,0 +1,15 @@
+
+.ace_editor ::-webkit-scrollbar-thumb {
+    /*background: #bbbbbb;*/
+    /*background: red;*/
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.ace_editor ::-webkit-scrollbar-track {
+    /*background: red;*/
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.input-group-btn .btn {
+    margin-right: 0;
+}
diff --git a/res/app/layout/stf-styles.css b/res/app/layout/stf-styles.css
new file mode 100644
index 00000000..e7c3c087
--- /dev/null
+++ b/res/app/layout/stf-styles.css
@@ -0,0 +1,498 @@
+body {
+    /*font-size: 14px;*/
+    /*background: #eee;*/
+}
+
+.page-container {
+    padding: 0 30px;
+    margin: 0 auto;
+}
+
+.stf-container {
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.accordion-body.in:hover {
+    overflow: visible;
+}
+
+/* Overflow */
+
+.overflow-x {
+    overflow-x: auto;
+}
+
+.overflow-y {
+    overflow-y: auto;
+}
+
+/* Fix btn-group */
+.btn-group.pull-right {
+margin-right: 10px;
+}
+
+/**
+    Accelerate
+*/
+.force-gpu {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    -ms-perspective: 1000;
+    perspective: 1000;
+}
+
+/**
+Colors for awesome fonts
+*/
+.text-status-on {
+    color: green;
+    text-shadow: 0 0 4px rgba(8, 208, 0, 0.3);
+}
+
+.text-status-off {
+    color: lightgrey;
+}
+
+.text-status-error {
+    color: red;
+}
+
+.text-status-waiting {
+    color: #ffcc66;
+}
+
+.text-status-inuse {
+    color: blue;
+}
+
+/**
+   ACE editor
+*/
+
+.stf-ace-editor {
+    height: 150px;
+}
+
+.stf-mini-ace-viewer {
+    /*min-height: 10px;*/
+}
+
+.ace_editor_wrapper {
+    position: relative;
+    height: 180px;
+}
+
+.ace_editor {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+/* Nothing to show */
+
+.nothing-to-show {
+    color: #b7b7b7;
+    min-height: 130px;
+    text-align: center;
+}
+
+.nothing-to-show p {
+    font-size: 20px;
+}
+
+/**
+    General styles
+*/
+.vertical-center {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    display: -moz-box;
+    -moz-box-orient: vertical;
+    -moz-box-pack: center;
+    -moz-box-align: center;
+    display: box;
+    box-orient: vertical;
+    box-pack: center;
+    box-align: center;
+}
+
+/* Screenshots */
+
+ul.screenshots-icon-view {
+    list-style-type: none;
+    font-family: 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
+}
+
+ul.screenshots-icon-view li {
+    float: left;
+    clear: none;
+    margin: 8px;
+}
+
+/* Progress */
+.value-next-to-progress {
+    float: left;
+    margin-right: 10px;
+}
+
+.table-progress {
+    margin-bottom: 0;
+}
+
+/* Icons */
+
+.icon-fixed {
+    width: 150px !important;
+}
+
+/* Cookies */
+
+ul.cookies-list {
+    list-style-type: none;
+}
+
+/* Login */
+
+.login-bg {
+    background: #8a6073;
+    background: -moz-linear-gradient(top, #8a6073 0%, #c68779 24%, #637476 57%, #4c7b7d 79%, #658e7d 94%, #6c8c77 97%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a6073), color-stop(24%, #c68779), color-stop(57%, #637476), color-stop(79%, #4c7b7d), color-stop(94%, #658e7d), color-stop(97%, #6c8c77));
+    background: -webkit-linear-gradient(top, #8a6073 0%, #c68779 24%, #637476 57%, #4c7b7d 79%, #658e7d 94%, #6c8c77 97%);
+    background: -o-linear-gradient(top, #8a6073 0%, #c68779 24%, #637476 57%, #4c7b7d 79%, #658e7d 94%, #6c8c77 97%);
+    background: -ms-linear-gradient(top, #8a6073 0%, #c68779 24%, #637476 57%, #4c7b7d 79%, #658e7d 94%, #6c8c77 97%);
+    background: linear-gradient(to bottom, #8a6073 0%, #c68779 24%, #637476 57%, #4c7b7d 79%, #658e7d 94%, #6c8c77 97%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a6073', endColorstr='#6c8c77', GradientType=0);
+}
+
+/* d3 lines */
+svg {
+    font: 10px sans-serif;
+}
+
+.line {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+/* Interact Control */
+
+.interact-sidebar {
+    width: 280px;
+}
+
+/* Movement Area */
+.movement-area-container {
+    /*background: #555;*/
+    width: 100%;
+    height: 100%;
+}
+
+.movement-area-image {
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    background-color: #444;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    position: relative;
+}
+
+.interact-control .btn-toolbar .btn {
+    min-width: 41px;
+}
+
+/* Height */
+.as-table {
+    display: table;
+}
+
+.as-row {
+    display: table-row;
+}
+
+.as-cell {
+    display: table-cell;
+}
+
+.fill-height {
+    height: 100%;
+}
+
+.fill-auto {
+    height: auto;
+}
+
+.special-keys-buttons button {
+    width: 40px;
+}
+
+.special-keys-buttons .btn-xs button {
+    width: 36px;
+}
+
+.special-keys-dpad-buttons button {
+    width: 40px;
+}
+
+/*
+    Drawer
+*/
+.stf-drawer {
+    background: #ddd;
+
+}
+
+.stf-drawer-bar {
+    background: #aaa;
+}
+
+.stf-drawer-docked-down .stf-drawer-bar {
+    width: 100%;
+    height: 2px;
+    cursor: ns-resize;
+}
+
+.stf-drawer-docked-right .stf-drawer-bar {
+    width: 2px;
+    height: 100%;
+    cursor: ew-resize;
+}
+
+.stf-drawer-docked {
+    opacity: 0.9;
+    z-index: 5000;
+}
+
+.stf-drawer-floating {
+
+}
+
+.stf-drawer-docked-down {
+    width: 100%;
+    height: 300px;
+    bottom: 0;
+    position: absolute;
+}
+
+.stf-drawer-docked-right {
+    width: 300px;
+    height: 100%;
+    right: 0;
+    position: absolute;
+}
+
+.stf-drawer-buttons {
+    text-align: right;
+}
+
+/* For se7en bootstrap */
+
+.btn [class^="fa"], .btn[class*="fa"] {
+    margin-right: 0;
+}
+
+/*.btn [class^="fa"]+span i,*/
+/*.btn [class*="fa"]+span {*/
+    /*margin-right: 15px;*/
+/*}*/
+
+.interact-control .navbar {
+    height: auto !important;
+}
+
+.interact-control .navbar-brand {
+    padding: 8px 15px;
+}
+
+.interact-control .btn-group {
+    margin: 0;
+}
+
+/* Browser Icon */
+.browser-icon {
+    width: 16px;
+    height: auto;
+    margin-right: 5px;
+}
+
+/* Make text input on tables be 100% */
+.table td input[type="number"],
+.table td input[type="text"] {
+    width: 100%;
+}
+
+/* Re-reset the table alignment */
+.ng-table th {
+    text-align: left;
+}
+
+.stf-logo {
+    background: url("../img/favicon128.png") no-repeat 0 0;
+    width: 32px;
+    height: 32px;
+    float: left;
+    text-indent: -9999em;
+    margin: 7px 10px 0 0;
+    background-size: 100% auto;
+    -webkit-background-size: 100% auto;
+}
+
+.stf-top-bar {
+    height: 46px;
+    /*border-bottom: 1px solid #e6e6e6;*/
+    padding: 0 10px 0 20px;
+    width: 100%;
+    float: left;
+}
+
+.stf-nav {
+    padding-left: 15px;
+    text-align: left;
+    margin: 0;
+    float: left;
+}
+
+.stf-nav > li {
+    padding-right: 15px;
+    float: left;
+    display: inline-block;
+    text-align: left;
+    position: relative;
+    margin: 0;
+}
+
+.stf-nav > li > a {
+    display: inline-block;
+    text-align: left;
+    padding: 0 !important;
+    padding-right: 18px !important;
+    padding-left: 14px !important;
+    font-size: 16px;
+    line-height: 44px;
+    height: 46px;
+    color: #777777;
+    /*border-bottom: 1px solid #eee;*/
+    font-weight: 400;
+    height: 45px;
+    position: relative;
+}
+
+.stf-nav > li > a > span {
+    display: inline-block;
+    float: left;
+    margin: 8px 8px 0 0;
+    font-size: 28px;
+    /*width: 28px;*/
+    /*height: 28px;*/
+}
+
+.stf-nav > li > a.current {
+    color: #007aff;
+    /*border-bottom: 1px solid #eee;*/
+    /*border-bottom-color: #007aff;*/
+}
+
+.remote-control {
+    background: #888;
+    width: 100%;
+    height: 100%;
+}
+
+.stf-feedback > li > a {
+    font-size: 14px;
+}
+
+.stf-nav-web-native-button {
+    margin-top: 8px !important;
+}
+
+/* VNC buttons */
+.stf-vnc-bottom .btn-primary:hover {
+    background: rgba(255, 255, 255, 1.0);
+    /*border-color: rgba(255, 255, 255, 1.0);*/
+    border: none;
+}
+
+.stf-vnc-bottom .btn {
+    border-radius: 0;
+}
+
+/*.stf-vnc-bottom .btn-primary:active,*/
+.stf-vnc-bottom .btn-primary.active {
+    background: rgba(255, 255, 255, 0.7);
+    border: none;
+    /*border-color: rgba(255, 255, 255, 0.7);*/
+}
+
+.stf-vnc-navbar-buttons {
+    padding-top: 2px;
+    padding-bottom: 32px;
+}
+
+.stf-vnc-navbar-buttons .btn {
+    margin-bottom: 0;
+    min-width: 37px;
+}
+
+.stf-vnc-device-name {
+    padding: 6px 2px 6px 15px;
+    float: left;
+    font-size: 16px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    /*color: #E4E4E4;*/
+    color: #858585;
+}
+
+.stf-vnc-navbar {
+    background: #fff;
+    margin-bottom: 2px;
+}
+
+.stf-vnc-fps {
+    line-height: 28px;
+    color: #D1D1D1;
+    font-family: monospace;
+    display: inline-block;
+    width: 28px;
+    min-height: 10px;
+    text-align: center;
+}
+
+a.active {
+    color: #007aff !important;
+}
+
+.weinre-window {
+    z-index: 10;
+    position: absolute;
+    top: 31px;
+    bottom: 3px;
+    left: 0;
+    right: 0;
+}
\ No newline at end of file
diff --git a/res/app/logging/logging.css b/res/app/logging/logging.css
new file mode 100644
index 00000000..c5b7a2f1
--- /dev/null
+++ b/res/app/logging/logging.css
@@ -0,0 +1,104 @@
+#logcatSingle {
+    height: 600px;
+    overflow-y: auto;
+}
+
+#logcatParent {
+    background: #fff;
+    position: absolute;
+    top: 69px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    /*z-index: -10;*/
+}
+
+#logcatTable {
+    table-layout: fixed !important;
+}
+
+.logcat-filters-table {
+    margin-bottom: 0;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+}
+
+.logcat-filters-table .btn {
+    margin: 0;
+}
+
+.logcat-filters-table thead>tr>th,
+.logcat-filters-table tbody>tr>th,
+.logcat-filters-table tfoot>tr>th,
+.logcat-filters-table thead>tr>td,
+.logcat-filters-table tbody>tr>td,
+.logcat-filters-table tfoot>tr>td {
+    border-top: none;
+}
+
+#logcatBody tr {
+    border-bottom: 1px solid rgb(240, 240, 240);
+}
+
+#logcatBody td {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.console-message-text {
+    font-size: 11px !important;
+    font-family: Menlo, monospace;
+    white-space: pre-wrap;
+}
+
+.console-message-text td {
+    /*color: rgb(48, 57, 66);*/
+}
+
+/**
+  Logging colors
+*/
+
+.log-unknown {
+    color: bisque;
+}
+
+.log-default, .log-silent {
+    color: darkolivegreen;
+}
+
+.log-verbose {
+    color: blueviolet;
+}
+
+.log-debug {
+    color: rgb(48, 57, 66);
+}
+
+.log-info {
+    color: blue;
+}
+
+.log-warn {
+    color: coral;
+}
+
+.log-error {
+    color: red;
+}
+
+.log-fatal {
+    color: darkcyan;
+}
+
+/*#logcatMax {*/
+
+/*overflow-y: auto;*/
+/*position: absolute;*/
+/*top: 180px;*/
+/*left: 20px;*/
+/*bottom: 0;*/
+/*bottom: 0;*/
+/*background: hotpink;*/
+/*}*/
diff --git a/res/app/terminal/terminal.css b/res/app/terminal/terminal.css
new file mode 100644
index 00000000..514139e0
--- /dev/null
+++ b/res/app/terminal/terminal.css
@@ -0,0 +1,19 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    /*height: 100%;*/
+    cursor: text;
+    background: #000;
+}
+
+.terminal {
+    font-family: Monaco, FreeMono, monospace;
+    color: #fff;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 14px;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    cursor: text;
+    /*min-height: 100%;*/
+}