diff --git a/src/app/components/dashboard-extension.html b/src/app/components/dashboard-extension.html
new file mode 100644
index 0000000..cdc3408
--- /dev/null
+++ b/src/app/components/dashboard-extension.html
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-xs-12">
+    <h1>Xos Sample GUI Dashboard Extension</h1>
+  </div>
+  <div class="col-xs-12">
+    <p>From our sample GUI extension module we are able to extend the dashboard.</p>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-4">
+  To add a component to the dashboard you can invoke the <code>XosComponentInjector</code> service as in this example:
+  </div>
+  <div class="col-sm-8">
+    <pre>
+      XosComponentInjector.injectComponent(
+      '#dashboard-component-container',
+      'dashboardExtension',
+      {},
+      '',
+      false
+    );
+    </pre>
+  </div>
+</div>
diff --git a/src/app/components/dashboard-extension.ts b/src/app/components/dashboard-extension.ts
new file mode 100644
index 0000000..9f69e81
--- /dev/null
+++ b/src/app/components/dashboard-extension.ts
@@ -0,0 +1,14 @@
+class DashboardExtensionComponent {
+  static $inject = ['XosSidePanel'];
+
+  constructor(
+    private XosSidePanel: any
+  ) {
+  }
+}
+
+export const xosDashboardExtensionComponent: angular.IComponentOptions = {
+  template: require('./dashboard-extension.html'),
+  controllerAs: 'vm',
+  controller: DashboardExtensionComponent
+};
diff --git a/src/app/components/demo.html b/src/app/components/demo.html
new file mode 100644
index 0000000..378b112
--- /dev/null
+++ b/src/app/components/demo.html
@@ -0,0 +1,19 @@
+<section class="content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-xs-12">
+        <h1>Xos Sample GUI Extension</h1>
+      </div>
+      <div class="col-xs-12">
+        <p>This page is loaded from an external container!</p>
+      </div>
+      <div class="col-xs-12">
+        From this extension you can use all the feature provided by the core, <br/>
+        for example you can toggle the side panel injecting custom content.
+        <br/>
+        <br/>
+        <a ng-click="vm.togglePanel()" class="btn btn-success">Open Side Panel</a>
+      </div>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/src/app/components/demo.ts b/src/app/components/demo.ts
new file mode 100644
index 0000000..14fb3db
--- /dev/null
+++ b/src/app/components/demo.ts
@@ -0,0 +1,27 @@
+class DemoComponent {
+  static $inject = ['XosSidePanel', 'XosKeyboardShortcut'];
+
+  constructor(
+    private XosSidePanel: any,
+    private XosKeyboardShortcut: any
+  ) {
+    this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'v',
+      description: 'Alert popup',
+      cb: () => {
+        alert('This binding is provided by the "xos-sample-gui-extension"');
+      },
+    }, 'view');
+  }
+
+  togglePanel() {
+    this.XosSidePanel.injectComponent('xosAlert', {config: {type: 'info'}, show: true}, 'This content is injected by my sample UI extension');
+  }
+
+}
+
+export const xosDemoComponent: angular.IComponentOptions = {
+  template: require('./demo.html'),
+  controllerAs: 'vm',
+  controller: DemoComponent
+};
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..d8ac498
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="xos-sample-gui-extension">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <div ui-view></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..a8791d7
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,48 @@
+/// <reference path="../typings/index.d.ts" />
+import * as angular from 'angular';
+
+import 'angular-ui-router';
+import 'angular-resource';
+import 'angular-cookies';
+import routesConfig from './routes';
+import {xosDemoComponent} from './app/components/demo';
+import {xosDashboardExtensionComponent} from './app/components/dashboard-extension';
+
+
+
+angular.module('xos-sample-gui-extension', [
+    'ui.router',
+    'xosCore'
+  ])
+  .config(routesConfig)
+  .component('demo', xosDemoComponent)
+  .component('dashboardExtension', xosDashboardExtensionComponent)
+  .run(function(
+    $log: ng.ILogService,
+    $state: ng.ui.IStateService,
+    NavigationService: any,
+    XosComponentInjector: any,
+    XosKeyboardShortcut: any) {
+    $log.info('[xos-sample-gui-extension] App is running');
+
+    NavigationService.add({
+      label: 'Example Extension',
+      state: 'xos.xos-sample-gui-extension.example-route',
+    });
+
+    XosComponentInjector.injectComponent(
+      '#dashboard-component-container',
+      'dashboardExtension',
+      {},
+      '',
+      false
+    );
+
+    XosKeyboardShortcut.registerKeyBinding({
+        key: 'd',
+        description: 'Alert popup',
+        cb: () => {
+          alert('This binding is provided by the "xos-sample-gui-extension"');
+        },
+      }, 'global');
+  });
diff --git a/src/routes.ts b/src/routes.ts
new file mode 100644
index 0000000..fe96c99
--- /dev/null
+++ b/src/routes.ts
@@ -0,0 +1,17 @@
+export default routesConfig;
+
+function routesConfig($stateProvider: angular.ui.IStateProvider, $locationProvider: angular.ILocationProvider) {
+  $locationProvider.html5Mode(false).hashPrefix('');
+
+  $stateProvider
+    .state('xos.xos-sample-gui-extension', {
+      url: 'xos-sample-gui-extension',
+      abstract: true,
+      template: '<div ui-view></div>'
+    })
+    .state('xos.xos-sample-gui-extension.example-route', {
+      url: '/example-route',
+      parent: 'xos.xos-sample-gui-extension',
+      component: 'demo'
+    });
+}