diff --git a/UI/Content/base.less b/UI/Content/base.less
index cbf257618..36d9a26d6 100644
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@@ -114,3 +114,9 @@ th {
   margin   : 50px auto 0px auto;
   display  : block;
 }
+
+a {
+  i {
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/UI/Controller.js b/UI/Controller.js
index 4302dc339..a457e420a 100644
--- a/UI/Controller.js
+++ b/UI/Controller.js
@@ -13,16 +13,18 @@ define(
         'Calendar/CalendarLayout',
         'Logs/Layout',
         'Release/Layout',
+        'System/Layout',
         'Shared/NotFoundView',
         'Shared/Modal/Region'
     ], function (App, Marionette, HistoryLayout, SettingsLayout, AddSeriesLayout, SeriesIndexLayout, SeriesDetailsLayout, MissingLayout, SeriesModel, CalendarLayout,
-        LogsLayout, ReleaseLayout, NotFoundView) {
+        LogsLayout, ReleaseLayout, SystemLayout, NotFoundView) {
         return Marionette.Controller.extend({
 
             series       : function () {
                 this._setTitle('NzbDrone');
                 App.mainRegion.show(new SeriesIndexLayout());
             },
+
             seriesDetails: function (query) {
 
                 var self = this;
@@ -74,12 +76,16 @@ define(
                 App.mainRegion.show(new LogsLayout());
             },
 
+            system: function () {
+                this._setTitle('system');
+                App.mainRegion.show(new SystemLayout());
+            },
+
             notFound: function () {
                 this._setTitle('Not Found');
                 App.mainRegion.show(new NotFoundView(this));
             },
 
-
             _setTitle: function (title) {
                 //$('#title-region').html(title);
 
diff --git a/UI/Router.js b/UI/Router.js
index 8ca2af07a..87e51b16d 100644
--- a/UI/Router.js
+++ b/UI/Router.js
@@ -23,6 +23,7 @@ require(
                 'history'                   : 'history',
                 'logs'                      : 'logs',
                 'rss'                       : 'rss',
+                'system'                    : 'system',
                 ':whatever'                 : 'notFound'
             }
         });
diff --git a/UI/System/About/View.js b/UI/System/About/View.js
new file mode 100644
index 000000000..d737002f2
--- /dev/null
+++ b/UI/System/About/View.js
@@ -0,0 +1,9 @@
+'use strict';
+define(
+    [
+        'marionette'
+    ], function (Marionette) {
+        return Marionette.ItemView.extend({
+            template: 'System/About/ViewTemplate'
+        });
+    });
diff --git a/UI/System/About/ViewTemplate.html b/UI/System/About/ViewTemplate.html
new file mode 100644
index 000000000..efe394569
--- /dev/null
+++ b/UI/System/About/ViewTemplate.html
@@ -0,0 +1,8 @@
+<dl class="dl-horizontal">
+    <dt>Version</dt>
+        <dd>{{version}}</dd>
+    <dt>AppData directory</dt>
+        <dd>{{appData}}</dd>
+    <dt>Startup directory</dt>
+        <dd>{{startupPath}}</dd>
+</dl>
diff --git a/UI/System/Layout.js b/UI/System/Layout.js
new file mode 100644
index 000000000..1f392a6b8
--- /dev/null
+++ b/UI/System/Layout.js
@@ -0,0 +1,74 @@
+'use strict';
+define(
+    [
+        'app',
+        'marionette',
+        'System/StatusModel',
+        'System/About/View',
+        'Logs/Layout',
+        'Shared/Toolbar/ToolbarLayout',
+        'Shared/LoadingView'
+    ], function (App,
+                 Marionette,
+                 StatusModel,
+                 AboutView,
+                 LogsLayout,
+                 ToolbarLayout,
+                 LoadingView) {
+        return Marionette.Layout.extend({
+            template: 'System/LayoutTemplate',
+
+            regions: {
+                toolbar : '#toolbar',
+                about   : '#about',
+                loading : '#loading'
+            },
+
+            leftSideButtons: {
+                type      : 'default',
+                storeState: false,
+                items     :
+                    [
+                        {
+                            title: 'Logs',
+                            icon : 'icon-book',
+                            route: 'logs'
+                        },
+//                        {
+//                            title         : 'Restart',
+//                            icon          : 'icon-repeat',
+//                            command       : 'restart',
+//                            successMessage: 'NzbDrone restart has been triggered',
+//                            errorMessage  : 'Failed to restart NzbDrone'
+//                        },
+//                        {
+//                            title         : 'Shutdown',
+//                            icon          : 'icon-power-off',
+//                            command       : 'shutdown',
+//                            successMessage: 'NzbDrone shutdown has started',
+//                            errorMessage  : 'Failed to shutdown NzbDrone'
+//                        }
+                    ]
+            },
+
+            initialize: function () {
+                this.statusModel = StatusModel;
+            },
+
+            onRender: function () {
+                this._showToolbar();
+                this.about.show(new AboutView({ model: this.statusModel }));
+            },
+
+            _showToolbar: function () {
+                this.toolbar.show(new ToolbarLayout({
+                    left   :
+                        [
+                            this.leftSideButtons
+                        ],
+                    context: this
+                }));
+            }
+        });
+    });
+
diff --git a/UI/System/LayoutTemplate.html b/UI/System/LayoutTemplate.html
new file mode 100644
index 000000000..3760f7c46
--- /dev/null
+++ b/UI/System/LayoutTemplate.html
@@ -0,0 +1,17 @@
+<div class="row">
+    <div class="span12">
+        <div id="toolbar"></div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="span12">
+        <div id="about"></div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="span12">
+        <div id="loading"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/UI/System/StatusModel.js b/UI/System/StatusModel.js
index d8859d601..8fabd1e55 100644
--- a/UI/System/StatusModel.js
+++ b/UI/System/StatusModel.js
@@ -1,12 +1,11 @@
 'use strict';
 define(
     [
-        'backbone',
-        'constants'
+        'backbone'
     ], function (Backbone) {
 
         var model = Backbone.Model.extend({
-            url: Constants.ApiRoot + '/system/status'
+            url: window.ApiRoot + '/system/status'
         });
 
 
diff --git a/UI/Index.html b/UI/index.html
similarity index 94%
rename from UI/Index.html
rename to UI/index.html
index 983b806ea..b689f4518 100644
--- a/UI/Index.html
+++ b/UI/index.html
@@ -66,6 +66,13 @@
                             Settings
                         </a>
                     </li>
+                    <li>
+                        <a href="system">
+                            <i class="icon-laptop"></i>
+                            <br>
+                            System
+                        </a>
+                    </li>
                     <li>
                         <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRTE52U3XJDSQ" target="_blank">
                             <i class="icon-heart"></i>