diff --git a/config.rb b/config.rb
index 63b43d67..fc55a7c7 100644
--- a/config.rb
+++ b/config.rb
@@ -8,7 +8,8 @@ require 'compass/import-once/activate'
 http_path = "/"
 css_dir = "css"
 sass_dir = "sass"
-images_dir = "images"
+images_dir = "img"
+generated_images_path = "img_cache"
 javascripts_dir = "javascripts"
 
 # You can select your preferred output style here (can be overridden via the command line):
diff --git a/img/icons/dotlan_logo.png b/img/icons/dotlan_logo.png
new file mode 100644
index 00000000..fa0e94b2
Binary files /dev/null and b/img/icons/dotlan_logo.png differ
diff --git a/img/overlay-pattern.png b/img/overlay-pattern.png
new file mode 100644
index 00000000..6ecc88d7
Binary files /dev/null and b/img/overlay-pattern.png differ
diff --git a/index.htm b/index.htm
index c91031bd..2bab4f80 100644
--- a/index.htm
+++ b/index.htm
@@ -22,7 +22,7 @@
 
         <div id="test-container"/>
 
-        <script data-main="js/app" src="build_js/lib/require.js"></script>
+        <script data-main="js/app" src="js/lib/require.js"></script>
     </body>
 
 </html>
diff --git a/js/app.js b/js/app.js
index ae60561e..2ce381d1 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2,39 +2,44 @@
 requirejs.config({
     "baseUrl": "js", // user build_js files, change to "js" for un-compressed source
     "paths": {
-        "layout": "layout",
-        "jquery": "lib/jquery-1.11.1.min",
-        //"jquery": "lib/jquery-2.1.1.min",
-        //"jqueryUI": "lib/jquery-ui.min",
-        "jqueryUI": "lib/jquery-ui-custom.min", // custom script (without tooltip -> conflict with bootstrap)
-        "bootstrap": "lib/bootstrap.min",
-        "text": "lib/requirejs/text",
-        "templates": "../templates",
-        "jsPlumb": "lib/jsPlumb-1.6.4-min",
-        "customScrollbar": "lib/jquery.mCustomScrollbar.concat.min",
-        "datatables": "lib/jquery.dataTables.min",
-        "datatablesBootstrap": "lib/dataTables.bootstrap", // not used (bootstrap style)
-        "xEditable": "lib/bootstrap-editable.min"
+        layout: "layout",
+        jquery: "lib/jquery-1.11.1.min",
+        //jquery: "lib/jquery-2.1.1.min",
+        //jqueryUI: "lib/jquery-ui.min",
+        jqueryUI: "lib/jquery-ui-custom.min",                         // custom script (without tooltip -> conflict with bootstrap)
+        bootstrap: "lib/bootstrap.min",
+        text: "lib/requirejs/text",
+        templates: "../templates",
+        jsPlumb: "lib/jsPlumb-1.6.4-min",                             // main map draw plugin
+        customScrollbar: "lib/jquery.mCustomScrollbar.concat.min",    // custom scroll bars
+        datatables: "lib/jquery.dataTables.min",                      // tables
+        datatablesBootstrap: "lib/dataTables.bootstrap",              // not used (bootstrap style)
+        xEditable: "lib/bootstrap-editable.min",                      // in placed editing
+        bootbox: "lib/bootbox.min"                                    // custom dialogs
     },
     shim: {
-        "jqueryUI": {
-            export:"$",
-            deps: ["jquery"]
+        jqueryUI: {
+            export: '$',
+            deps: ['jquery']
         },
-        "bootstrap": {
-            deps: ["jquery", "jqueryUI"]
+        bootstrap: {
+            deps: ['jquery', 'jqueryUI']
         },
-        "customScrollbar": {
-            deps: ["jquery"]
+        customScrollbar: {
+            deps: ['jquery']
         },
-        "datatables": {
-            deps: ["jquery"]
+        datatables: {
+            deps: ['jquery']
         },
-        "datatablesBootstrap": {
-            deps: ["datatables"]
+        datatablesBootstrap: {
+            deps: ['datatables']
         },
-        "xEditable": {
-            deps: ["bootstrap"]
+        xEditable: {
+            deps: ['bootstrap']
+        },
+        bootbox: {
+            deps: ['jquery', 'bootstrap'],
+            exports: 'bootbox'
         }
     }
 });
diff --git a/js/app/counter.js b/js/app/counter.js
index 9140238c..b2e8dc7a 100644
--- a/js/app/counter.js
+++ b/js/app/counter.js
@@ -58,8 +58,10 @@ define(["jquery"], function($) {
         element.html(value.join(' '));
     };
 
-
-
+    /**
+     * inits a live counter based on a unix timestamp
+     * @returns {*}
+     */
     $.fn.initSignatureCounter = function(){
 
         return this.each(function(){
diff --git a/js/app/init.js b/js/app/init.js
index 98d3e3e2..cc0d1fd5 100644
--- a/js/app/init.js
+++ b/js/app/init.js
@@ -7,7 +7,115 @@ define(["jquery"], function($) {
     "use strict";
 
     var Config = {
-        baseUrl: "http://localhost/exodus4d/pathfinder/" // TODO: change baseURL
+        //  baseUrl: "http://localhost/exodus4d/pathfinder/" // TODO: change baseURL
+
+        classes: {
+            // system effects
+            systemEffects: {
+
+                effect: {
+                    class: 'pf-system-effect',
+                    name: 'no effect'
+                },
+                magnetar: {
+                    class: 'pf-system-effect-magnetar',
+                    name: 'magnetar'
+                },
+                redGiant: {
+                    class: 'pf-system-effect-redgiant',
+                    name: 'red gaint'
+                },
+                pulsar: {
+                    class: 'pf-system-effect-pulsar',
+                    name: 'pulsar'
+                },
+                wolfRyet: {
+                    class: 'pf-system-effect-wolfryet',
+                    name: 'wolf ryet'
+                },
+                cataclysmic: {
+                    class: 'pf-system-effect-cataclysmic',
+                    name: 'cytaclysmic'
+                },
+                blackHole: {
+                    class: 'pf-system-effect-blackhole',
+                    name: 'black hole'
+                }
+           },
+           systemSecurity: {
+               security: {
+                   class: 'pf-system-sec'
+               },
+               'H': {
+                   class: 'pf-system-sec-highSec'
+               },
+               'L': {
+                   class: 'pf-system-sec-lowSec'
+               },
+               '0.0': {
+                   class: 'pf-system-sec-nullSec'
+               },
+               'C6': {
+                   class: 'pf-system-sec-high'
+               },
+               'C5': {
+                   class: 'pf-system-sec-high'
+               },
+               'C4': {
+                   class: 'pf-system-sec-mid'
+               },
+               'C3': {
+                   class: 'pf-system-sec-mid'
+               },
+               'C2': {
+                   class: 'pf-system-sec-low'
+               },
+               'C1': {
+                   class: 'pf-system-sec-low'
+               }
+           },
+           trueSec: {
+               '0.0': {
+                   class: 'pf-system-security-0-0'
+               },
+               '0.1': {
+                   class: 'pf-system-security-0-1'
+               },
+               '0.2': {
+                   class: 'pf-system-security-0-2'
+               },
+               '0.3': {
+                   class: 'pf-system-security-0-3'
+               },
+               '0.4': {
+                   class: 'pf-system-security-0-4'
+               },
+               '0.5': {
+                   class: 'pf-system-security-0-5'
+               },
+               '0.6': {
+                   class: 'pf-system-security-0-6'
+               },
+               '0.7': {
+                   class: 'pf-system-security-0-7'
+               },
+               '0.8': {
+                   class: 'pf-system-security-0-8'
+               },
+               '0.9': {
+                   class: 'pf-system-security-0-9'
+               },
+               '1.0': {
+                   class: 'pf-system-security-1-0'
+               }
+           }
+
+        }
+
+
+
+
+
     };
 
     return Config;
diff --git a/js/app/main.js b/js/app/main.js
index 56ec3463..d87611a6 100644
--- a/js/app/main.js
+++ b/js/app/main.js
@@ -10,7 +10,6 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
         CCP.requestTrust();
 
 
-
         // Map init options
         var mapData =[{
             map: {},
@@ -67,6 +66,27 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
                             x: 110,
                             y: 110
                         }
+                    },{
+                        id: 30002979,
+                        name: 'Tararan',
+                        alias: '',
+                        effect: '',
+                        security: 'L',
+                        trueSec: 0.3,
+                        region: {
+                            id: '10000036',
+                            name: 'Devoid'
+                        },
+                        constellation: {
+                            id: '20000436',
+                            name: 'Jayai'
+                        },
+                        type: 'k-space',
+                        status: '',
+                        position: {
+                            x: 300,
+                            y: 250
+                        }
                     }
                 ],
                 connections: [
@@ -74,6 +94,11 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
                         source: 3,
                         target: 4,
                         type: 'wh'
+                    },
+                    {
+                        source: 4,
+                        target: 30002979,
+                        type: 'wh'
                     }
                 ]
             }
@@ -196,7 +221,7 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
                 $('#' + config.mapModuleId).updateMapModule(userData);
 
                 console.log('update map done');
-            }, 1000);
+            }, 500);
 
 
 
diff --git a/js/app/map/map.js b/js/app/map/map.js
index 8e9b209b..ba62b1d4 100644
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -1,4 +1,4 @@
-define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, Render) {
+define(['jquery', 'app/init', 'app/util', 'app/render', 'jsPlumb', 'app/map/contextmenu'], function($, Init, Util, Render) {
 
     "use strict";
 
@@ -43,13 +43,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         errorConnectDialogId: 'pf-error-dialog-loopback',
 
         // system effect classes
-        systemEffect: 'pf-system-effect',
-        systemEffectMagnetar: 'pf-system-effect-magnetar',
-        systemEffectRedGiant: 'pf-system-effect-redgiant',
-        systenEffectPular: 'pf-system-effect-pulsar',
-        systemEffectWolfRyet: 'pf-system-effect-wolfryet',
-        systemEffectCataclysmic: 'pf-system-effect-cataclysmic',
-        systemEffectBlackHole: 'pf-system-effect-blackhole',
+
 
         // system security classes
         systemSec: 'pf-system-sec',
@@ -205,69 +199,6 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         }
     };
 
-
-
-
-
-    var getEffectClassForSystem = function(effect){
-
-        var effectClass = '';
-
-        switch(effect){
-            case 'magnetar':
-                effectClass = config.systemEffectMagnetar;
-                break;
-            case 'redGiant':
-                effectClass = config.systemEffectRedGiant;
-                break;
-            case 'pulsar':
-                effectClass = config.systenEffectPular;
-                break;
-            case 'wolfRyet':
-                effectClass = config.systemEffectWolfRyet;
-                break;
-            case 'cataclysmic':
-                effectClass = config.systemEffectCataclysmic;
-                break;
-            case 'blackHole':
-                effectClass = config.systemEffectBlackHole;
-                break;
-        }
-
-        return effectClass;
-    };
-
-    var getSecurityClassForSystem = function(sec){
-
-        var secClass = '';
-
-        switch(sec){
-            case 'H':
-                secClass = config.systemSecHigh;
-                break;
-            case 'L':
-                secClass = config.systemSecLow;
-                break;
-            case '0.0':
-                secClass = config.systemSecNull;
-                break;
-            case 'C6':
-            case 'C5':
-                secClass = config.systemSecWHHeigh;
-                break;
-            case 'C4':
-            case 'C3':
-                secClass = config.systemSecWHMid;
-                break;
-            case 'C2':
-            case 'C1':
-                secClass = config.systemSecWHLow;
-                break;
-        }
-
-        return secClass;
-    };
-
     /**
      * get status class for a system
      * @param status
@@ -409,13 +340,16 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
      * @param data
      * @returns {*|HTMLElement}
      */
-    var getSystem = function(data){
+    var getSystem = function(map, data){
 
         var system;
 
+        // get map container for mapId information
+        var mapContainer = $(map.getContainer());
+
         // get system info classes
-        var effectClass = getEffectClassForSystem(data.effect);
-        var secClass = getSecurityClassForSystem(data.security);
+        var effectClass = Util.getEffectInfoForSystem(data.effect, 'class');
+        var secClass = Util.getSecurityClassForSystem(data.security);
         var statusClass = getStatusClassForSystem(data.status);
 
         system = $('<div>', {
@@ -427,15 +361,15 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
             $('<div>', {
                 class: config.systemHeadClass
             }).append(
-                // System effect color
-                $('<span>', {
-                    class: config.systemHeadNameClass,
-                    text: data.name
-                })
+                // System name is editable
+                $('<a>', {
+                    href: '#',
+                    class: config.systemHeadNameClass
+                }).attr('data-value', data.name)
             ).append(
                 // System effect color
                 $('<i>', {
-                    class: ['fa fa-square ', config.systemEffect, effectClass].join(' ')
+                    class: ['fa fa-square ', Util.getEffectInfoForSystem('effect', 'class'), effectClass].join(' ')
                 })
             ).append(
                 // expand option
@@ -457,6 +391,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
             ).data('name', data.name).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' });
 
         system.attr('data-id', data.id);
+        system.attr('data-mapid', mapContainer.attr('data-mapid'));
 
         return $(system);
     };
@@ -548,12 +483,15 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         }
 
         // get System Element by data
-        var newSystem = getSystem(systemData);
+        var newSystem = getSystem(map, systemData);
 
         // add new system to map
         mapContainer.append(newSystem);
 
-        // make new System dragable
+        // make new system editable
+        makeEditable(newSystem);
+
+        // make new system draggable
         makeDraggable(map, newSystem);
 
         // make target
@@ -602,6 +540,20 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         });
     };
 
+    /**
+     * make a syste name editable by x-editable
+     * @param system
+     */
+    var makeEditable = function(system){
+
+        $(system).find('.' + config.systemHeadNameClass).editable({
+            mode: 'popup',
+            type: 'text',
+            title: 'system name',
+            placement: 'top'
+        });
+    };
+
     /**
      * make one or multiple systems draggable
      * @param map
@@ -621,13 +573,32 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                 toggleSystemTooltip([e.target], 'hide');
             },
             stop: function(e, ui){
+
+                var system = $(e.target);
+
                 // drag stop
+                var mapContainer = $( system.parent() );
 
                 // update z-index for dragged system + connections
                 updateZIndex(map, e.target);
 
                 // rerender tooltip
                 toggleSystemTooltip([e.target], 'show');
+
+                // set new position for popover edit field (system name)
+                var distanceTop = ui.position.top;
+                var distanceLeft = ui.position.left;
+
+                var placement = 'top';
+                if(distanceTop < 100){
+                    placement = 'bottom';
+                }
+                if(distanceLeft < 100){
+                    placement = 'right';
+                }
+
+                $(e.target).find('.' + config.systemHeadNameClass).editable('option', 'placement', placement);
+
             },
             drag: function(e){
                 // while drag
@@ -941,7 +912,11 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
             // get parent Tab Content and fire update event
             var tabContentElement = getTabContentElementByMapElement(currentSystem);
 
-            $(tabContentElement).trigger('pf:updateSystemData', [{system: currentSystem}]);
+            var data = {
+                system: currentSystem
+            };
+
+            $(tabContentElement).trigger('pf:updateSystemData', [data]);
         });
     };
 
diff --git a/js/app/module_map.js b/js/app/module_map.js
index f43d1273..6345e44b 100644
--- a/js/app/module_map.js
+++ b/js/app/module_map.js
@@ -1,4 +1,4 @@
-define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'customScrollbar', 'app/counter'], function($, Render) {
+define(['jquery', 'app/util', 'app/render', 'bootbox', 'datatables', 'xEditable', 'app/map/map', 'customScrollbar', 'app/counter'], function($, Util, Render, bootbox) {
 
     "use strict";
 
@@ -19,14 +19,24 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         mapTabContentCellFirst: 'pf-map-content-col-first',                     // first column
         mapTabContentCellSecond: 'pf-map-content-col-second',                   // second column
 
-        // system info
-        systemInfoElementWrapperClass: 'pf-system-info-wrapper',                // class for systeminfo Wrapper
+        // module info
+        moduleClass: 'pf-module',                                               // class for each module
+
+        // system info module
+        systemInfoModuleClass: 'pf-system-info-module',                         // module wrapper
+        systemInfoRoutesClass: 'pf-system-info-routes',                         // wrapper for trade hub routes
+        systemInfoRoutesTableClass: 'pf-system-route-table',                    // class for route tables
+        systemInfoRoutesTableRowPrefix: 'pf-system-info-routes-row-',           // prefix class for a row in the route table
+        systemSecurityClassPrefix: 'pf-system-security-',                       // prefix class for system security level (color)
+
         systemInfoProgressScannedClass: 'pf-system-progress-scanned',           // progress bar scanned signatures
 
-        // sig table
+        // sig table module
+        sigTableModuleClass: 'pf-sig-table-module',                             // module wrapper
         sigTableToolsClass: 'pf-sig-table-tools',                               // table toolbar
         sigTableToolsActionClass: 'pf-sig-table-tools-action',                  // table toolbar action
         sigTableClass: 'pf-sig-table',                                          // Table class for all Signature Tables
+        sigTableMainClass: 'pf-sig-table-main',                                 // Table class for main sig table
         sigTableEditText: 'pf-sig-table-edit-text',                             // class for editable fields (text)
         sigTableEditSigNameInput: 'pf-sig-table-edit-name-input',               // class for editable fields (input)
         sigTableEditSigTypeSelect: 'pf-sig-table-edit-type-select',             // class for editable fields (select)
@@ -271,18 +281,25 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
      * set Tab Observer, events are triggered within map.js
      * @param mapContentModule
      */
-    $.fn.setTabContenteObserver = function(){
+    $.fn.setTabContentObserver = function(){
 
         return this.each(function(){
             // update Tab Content with system data information
-            $(this).on('pf:updateSystemData', function(e, data){
-                updateSystemInfoElement($( e.target ));
+            $(this).on('pf:updateSystemData', function(e, mapData){
+
+                // collect all relevant data for SystemInfoElement
+                var systemInfoData = {
+                    systemId: parseInt( $( mapData.system).attr('data-id') ),
+                    mapId: parseInt( $( mapData.system).attr('data-mapid') )
+                };
+
+                updateSystemInfoElement($( e.target ), systemInfoData);
             });
 
             // highlite a mapTab
             $(this).on('pf:highlightTab', function(e, data){
                 // update Tab Content with system data information
-                highliteTab(e.target, data);
+                highlightTab(e.target, data);
 
             });
 
@@ -290,11 +307,11 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
     };
 
     /**
-     * highlite a Tab in this module e.g. when user has an active pilot in this map
+     * highlight a Tab in this module e.g. when user has an active pilot in this map
      * @param contentElement
      * @param data
      */
-    var highliteTab = function(contentElement, data){
+    var highlightTab = function(contentElement, data){
         var tabElements = getTabElements();
 
         contentElement = $(contentElement);
@@ -327,8 +344,14 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
     };
 
+    /**
+     * draw signature table toolbar (add signature button, scan progress bar
+     * @param emptySignatureData
+     */
     $.fn.drawSignatureTableToolbar = function(emptySignatureData){
 
+        var systemCell = $(this);
+
         // add toolbar buttons for table -------------------------------------
         var tableToolbar = $('<div>', {
             class: config.sigTableToolsClass
@@ -337,7 +360,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     class: ['btn', 'btn-primary', 'btn-sm'].join(' '),
                     text: ' add signature'
                 }).on('click', function(e){
-
+                    // show "add sig" div
+                    var toolsElement = $(e.target).parents('.' + config.moduleClass).find('.' + config.sigTableToolsActionClass);
+                    toolsElement.slideToggle( 100 );
                 }).prepend(
                         $('<i>', {
                             class: ['fa', 'fa-plus', 'fa-fw'].join(' ')
@@ -345,30 +370,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     )
             );
 
-        $(this).append(tableToolbar);
-
-        // scanned signatures progress bar --------------------------------------
-        var moduleConfig = {
-            name: 'form/progress',
-            position: tableToolbar,
-            link: 'before',
-            functions: {
-                after: function(){
-
-                }
-            }
-        };
-
-        var moduleData = {
-            label: true,
-            class: config.systemInfoProgressScannedClass,
-            barClass: 'progress-bar-success',
-            percent: '70',
-            headline: 'System scanned',
-            headlineRight: '70%' // will be updated by js
-        };
-
-        Render.showModule(moduleConfig, moduleData);
+        systemCell.prepend(tableToolbar);
 
         // add toolbar action for table -------------------------------------
         var tableToolbarAction = $('<div>', {
@@ -382,8 +384,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
         tableToolbarAction.append(table);
 
-        $(this).append(tableToolbarAction);
-
+        tableToolbar.after(tableToolbarAction);
 
         table.dataTable( {
             data: emptySignatureData,
@@ -394,36 +395,95 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         } );
 
         table.makeEditable();
+
+        // scanned signatures progress bar --------------------------------------
+        var moduleConfig = {
+            name: 'form/progress',
+            position: tableToolbar,
+            link: 'before',
+            functions: {
+                after: function(){
+                    systemCell.updateScannedSignaturesBar();
+                }
+            }
+        };
+
+        var moduleData = {
+            label: true,
+            wrapperClass: config.systemInfoProgressScannedClass,
+            class: ['progress-bar-success'].join(' '),
+            percent: 0,
+            headline: 'System scanned',
+            headlineRight: ' ' // will be updated by js
+        };
+
+        Render.showModule(moduleConfig, moduleData);
+
+
     };
 
 
-    // drawsignature table
-    $.fn.drawSignatureTable = function(signatureData){
+    // draw signature table
+    $.fn.drawSignatureTable = function(signatureData, systemInfoData){
 
+        var moduleElement = $(this);
 
         // create new signature table -------------------------------------------
 
         var table = $('<table>', {
-            class: ['display', 'compact', config.sigTableClass].join(' ')
+            class: ['display', 'compact', config.sigTableClass, config.sigTableMainClass].join(' ')
         });
 
-        $(this).append(table);
+        moduleElement.append(table);
 
+        // set event listener
+        table.on( 'draw.dt', function () {
+            // TODO maybe needet :D
+        });
 
         var signatureTable = table.dataTable( {
             data: signatureData
         } );
 
-        $(this).show();
-
         // make Table editable
-        signatureTable.makeEditable();
-
+        signatureTable.makeEditable(systemInfoData);
 
         return signatureTable;
     };
 
-    var updateSystemInfoElement = function(tabContentElement){
+    /**
+     * collect all data of all editable fields in a signature table
+     * @returns {Array}
+     */
+    $.fn.getSignatureTableData = function(){
+
+        var tableRows = $(this).find('.' + config.sigTableMainClass + ' tbody tr');
+
+        var tableData = [];
+
+        $.each(tableRows, function(i, tableRow){
+            // get all editable fields per row
+            var editableFields = $(tableRow).find('.editable');
+
+            if(editableFields.length > 0){
+                var values = $(editableFields).editable('getValue');
+
+                // add pk for this row
+                values.id = $(editableFields[0]).data('pk');
+
+                tableData.push( values );
+            }
+        });
+
+        return tableData;
+    };
+
+    /**
+     * clears and updates the system info element (signature table, system info,...)
+     * @param tabContentElement
+     * @param systemInfoData
+     */
+    var updateSystemInfoElement = function(tabContentElement, systemInfoData){
 
         // get Table cell for system Info
         var systemCell = $(tabContentElement).find('.' + config.mapTabContentCellFirst);
@@ -431,15 +491,24 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         // clear systemCell
         systemCell.empty();
 
+        // update signature table module
+        systemCell.updateSignatureTableModule(systemInfoData);
+
+        // update system info module
+        systemCell.updateSystemInfo(systemInfoData);
+    };
+
+    $.fn.updateSignatureTableModule = function(systemInfoData){
+
         // TODO replace with backend ajax request
-        var systemData = tempFunctionGetSystemData();
+        var systemData = tempFunctionGetSystemData(systemInfoData);
         var emptySystemData = $.extend({}, systemData); // copy object for manipulation
 
         // fake data for new signature table entry
         emptySystemData.signatures = [
             {
                 id: 0,
-                sig: '',
+                name: '',
                 typeId: null,
                 sigTypeId: null,
                 created: null,
@@ -461,10 +530,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         // check if signatures exist
         if(signatureData.length > 0){
 
+            // create new module container
+            var moduleElement = $('<div>', {
+                class: [config.moduleClass, config.sigTableModuleClass].join(' ')
+            });
+
+            $(this).append(moduleElement);
+
             // set default values for all signature "datatables"
             $.extend( $.fn.dataTable.defaults, {
-                pageLength: 100,
-                lengthMenu: [ 5, 10, 25, 50, 75, 100 ],
+                pageLength: -1,
+                lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']],
+                autoWidth: false,
                 language: {
                     zeroRecords: 'No signatures found',
                     lengthMenu:  'Show _MENU_ signatures',
@@ -500,53 +577,277 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                         targets: 5,
                         title: '',
                         orderable: false,
-                        width: '20px',
-                        class: 'center'
+                        width: '10px',
+                        class: 'text-center'
                     }
                 ]
             } );
 
-            // draw system info Element
-            systemCell.updateSystemInfo();
+            // draw signature table
+            moduleElement.drawSignatureTable(signatureData, systemInfoData);
 
             // draw toolbar for signature table
-            systemCell.drawSignatureTableToolbar(emptySignatureData);
+            moduleElement.drawSignatureTableToolbar(emptySignatureData);
 
-            // draw signature table
-            systemCell.drawSignatureTable(signatureData);
 
-        }else{
-            systemCell.hide();
         }
-
     };
 
     /**
      * update systeminfo
      */
-    $.fn.updateSystemInfo = function(){
-        var systemInfoWrapper = $(this).find('.' + config.systemInfoElementWrapperClass);
+    $.fn.updateSystemInfo = function(systemInfoData){
 
-        if(systemInfoWrapper.length === 0){
-            // create system Info Wrapper
-            systemInfoWrapper = $('<div>', {
-                class: config.systemInfoElementWrapperClass,
-                text: 'ddd'
-            });
 
-            $(this).prepend(systemInfoWrapper);
+        // TODO replace by AJAX
+        if(systemInfoData.systemId === 30002979){
+            var system =  {
+                id: 30002979,
+                //name: 'J150020',
+                name: 'Tararan',
+                alias: '',
+                effect: '',
+                security: 'L',
+                trueSec: 0.3,
+                region: {
+                    id: '10000036',
+                    name: 'Devoid'
+                },
+                constellation: {
+                    id: '20000436',
+                    name: 'Jayai'
+                },
+                type: 'k-space'
+            };
+        }else{
+            var system =  {
+                id: 2,
+                name: 'J150020',
+                alias: 'Polaris',
+                effect: 'magnetar',
+                security: 'C6',
+                trueSec: -1,
+                region: {
+                    id: '12345',
+                    name: 'F-R00030'
+                },
+                constellation: {
+                    id: '678990',
+                    name: 'F-C00298'
+                },
+                static: [{
+                    security: 'C6',
+                    name: ' W237',
+                    lifetime: 24
+                }],
+                //type: 'wh'
+                type: 'wh'
+            };
         }
 
+
+
+
+        // create new module container
+        var moduleElement = $('<div>', {
+            class: [config.moduleClass, config.systemInfoModuleClass].join(' ')
+        });
+
+        $(this).prepend(moduleElement);
+
+        // confirm dialog
+        var moduleConfig = {
+            name: 'modules/system_info',
+            position: moduleElement,
+            link: 'append',
+            functions: {
+                after: function(){
+                    // init tooltips
+                    var tooltipElements = $('.' + config.systemInfoModuleClass + ' [data-toggle="tooltip"]');
+                    tooltipElements.tooltip();
+
+                    // load trade routes
+                    if(system.type !== 'wh'){
+                        $(moduleElement).find('.' + config.systemInfoRoutesClass).updateSystemInfoRoutes(system.name, ['Jita', 'Amarr', 'Rens', 'Dodixie']);
+                    }
+
+
+                }
+            }
+        };
+
+
+        // add security class for statics
+        if(system.static){
+            $.each(system.static, function(i, staticWH){
+               system['static'][i]['class'] = Util.getSecurityClassForSystem( staticWH.security );
+            });
+        }
+
+
+        var moduleData = {
+            system:  system,
+            securityClass: Util.getSecurityClassForSystem( system.security ),
+            trueSecClass: Util.getTrueSecClassForSystem( system.trueSec ),
+            effectName: Util.getEffectInfoForSystem(system.effect, 'name'),
+            effectClass: Util.getEffectInfoForSystem(system.effect, 'class')
+        };
+
+        Render.showModule(moduleConfig, moduleData);
+
     };
 
+    $.fn.updateSystemInfoRoutes = function(systemFrom, systemsTo){
+
+        // TODO get cached routes from backend
+
+        var baseUrl = 'http://api.eve-central.com/api/route/from/';
+
+        var wrapperElement = $(this);
+
+        // crate new route table
+        var table = $('<table>', {
+            class: ['compact', 'stripe', 'order-column', 'row-border', config.systemInfoRoutesTableClass].join(' ')
+        });
+
+        wrapperElement.append( $(table) );
+
+        // init empty table
+        var routesTable = table.DataTable( {
+           paging: false,
+           ordering: true,
+           info: false,
+           searching: false,
+           hover: false,
+
+           //autoWidth: false,
+           columnDefs: [
+               {
+                   targets: 0,
+                   //"orderData": 0,
+                   orderable: true,
+                   title: 'system'
+               },{
+                   targets: 1,
+                   orderable: true,
+                   title: 'jumps &nbsp;&nbsp;&nbsp',
+                   width: '40px',
+                   class: 'text-right'
+               },{
+                   targets: 2,
+                   orderable: false,
+                   title: 'route'
+               }
+           ],
+           data: [] // will be added dynamic
+        } );
+
+
+        $.each(systemsTo, function(i, systemTo){
+
+            if(systemFrom !== systemTo){
+                var url = baseUrl + systemFrom + '/to/' + systemTo;
+                $.getJSON(url, function(routeData){
+
+                    // row class
+                    var rowClass = config.systemInfoRoutesTableRowPrefix + i;
+
+                    // add row Data
+                    var rowData = [systemTo, routeData.length];
+
+                    var jumpData = [];
+                    // loop all systems on a rout
+                    $.each(routeData, function(j, systemData){
+
+                        var systemSecClass = config.systemSecurityClassPrefix;
+                        var systemSec = systemData.to.security.toFixed(1).toString();
+                        systemSecClass += systemSec.replace('.', '-');
+                        var system = '<i class="fa fa-square ' + systemSecClass + '" ';
+                        system += 'data-toggle="tooltip" data-placement="bottom" ';
+                        system += 'title="' + systemData.to.name + ' - ' + systemSec + ' [' + systemData.to.region.name  + ']"></i>';
+                        jumpData.push( system );
+
+                    });
+
+
+                    rowData.push( jumpData.join(' ') );
+
+                    // add new row
+                    routesTable.row.add( rowData ).draw().nodes().to$().addClass( rowClass );
+
+                    // init tooltips for each jump system
+                    var tooltipElements = wrapperElement.find('.' + rowClass + ' [data-toggle="tooltip"]');
+
+                    $(tooltipElements).tooltip();
+
+                });
+            }
+
+
+
+        });
+
+
+
+    };
+
+
+    /**
+     * update Progressbar for all scanned signatures in a system
+     */
     $.fn.updateScannedSignaturesBar = function(){
 
+        var systemCell = $(this);
+
+        // get progress bar
+        var progressBarWrapper = $(this).find('.' + config.systemInfoProgressScannedClass);
+        var progressBar = $(progressBarWrapper).find('.progress-bar');
+        var progressBarLabel = $(progressBarWrapper).find('.progress-label-right');
+
+        var tableData = systemCell.getSignatureTableData();
+
+        var percent = 0;
+        var progressBarType = 'progress-bar-danger';
+
+        if(tableData){
+            var sigCount = tableData.length;
+            var sigIncompleteCount = 0;
+            // check for  signatures without "type" -> these are unscanned sigs
+            $.each(tableData, function(i, data){
+                var typeId = parseInt(data.typeId);
+                if(typeId === 0){
+                    sigIncompleteCount++;
+                }
+            });
+
+            percent = 100 - Math.round( 100 / sigCount * sigIncompleteCount );
+
+            if(percent < 30){
+                progressBarType = 'progress-bar-danger' ;
+            }else if(percent < 100){
+                progressBarType = 'progress-bar-warning';
+            }else{
+                progressBarType = 'progress-bar-success';
+            }
+        }
+
+        setTimeout(
+            function() {
+                progressBarLabel.text(percent + '%');
+                progressBar.removeClass().addClass('progress-bar').addClass(progressBarType);
+                progressBar.attr('aria-valuenow', percent);
+                progressBar.css({width: percent + '%'});
+        }, 100);
+
+
+
     };
 
     /**
      * make a table editable (in-line-editor)
+     * @param systemInfoData
      */
-    $.fn.makeEditable = function(options){
+    $.fn.makeEditable = function(systemInfoData){
 
         var table = $(this);
 
@@ -563,13 +864,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         var sigNameFields = table.find('.' + config.sigTableEditSigNameSelect);
 
         // jump to "next" editable field on save
-        var openNextEditDialogOnSave = function(fields){
-            fields.on('save', function(){
+        var openNextEditDialogOnSave = function(fields, updateProgressBar){
+            fields.on('save', {test: 1}, function(e, data){
                 var that = this;
                 setTimeout(function() {
                     var nextField = getNextEditableField(that);
 
                     $(nextField).editable('show');
+
+                    // update scanning progressbar if sig "type" has changed
+                    if($(e.target).hasClass(config.sigTableEditSigTypeSelect)){
+                        $(that).parents('.' + config.moduleClass).updateScannedSignaturesBar();
+                    }
                 }, 200);
             });
         };
@@ -579,17 +885,32 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
             return $(field).closest('td').next().find('.editable');
         };
 
+        /**
+         * add map/system specific data for each editable field in the sig-table
+         * @param params
+         * @returns {*}
+         */
+        var modifyFieldParamsOnSend = function(params){
+
+            params.systemId = systemInfoData.systemId;
+            params.mapId = systemInfoData.mapId;
+
+            return params;
+        };
+
         // sigTableEditSigNameInput
         sigIdFields.editable({
             mode: 'popup',
             type: 'text',
             title: 'signature id',
             name: 'name',
+            emptytext: '? ? ?',
             validate: function(value) {
                 if($.trim(value) === '') {
                     return 'Signature id cant be empty';
                 }
-            }
+            },
+            params: modifyFieldParamsOnSend
         });
 
 
@@ -602,6 +923,8 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
             type: 'select',
             title: 'signature type',
             name: 'typeId',
+            emptytext: 'unknown',
+            params: modifyFieldParamsOnSend,
             source: function(){
 
                 var systemType = $(this).attr('data-systemtype');
@@ -646,6 +969,8 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                         }
                     }
 
+                    // add empty option
+                    availableTypes[0] = '';
 
                     availableTypes = sigTypeCache[cacheKey] = availableTypes;
                 }
@@ -666,6 +991,12 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                 $(nameSelect).editable('option', 'source', newSelectOptions);
 
                 $(nameSelect).editable('setValue', null);
+
+                if(newValue > 0){
+                    $(nameSelect).editable('option', 'disabled', false);
+                }else{
+                    $(nameSelect).editable('option', 'disabled', true);
+                }
             }
         });
 
@@ -674,43 +1005,63 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
         // Select sig name (slave: depends on sig type)
         sigNameFields.editable({
-            mode: 'inline',
+            mode: 'popup',
             type: 'select',
+            title: 'signature name',
             name: 'sigTypeId',
+            emptytext: 'unknown',
+            params: modifyFieldParamsOnSend,
             source: function(){
 
                 var systemType = $(this).attr('data-systemtype');
                 var areaId = $(this).attr('data-areaid');
-                var sigType = $(this).attr('data-sigtypeid');
+                var typeId = $(this).attr('data-typeid');
 
-                var cacheKey = [systemType, areaId, sigType].join('_');
+                var cacheKey = [systemType, areaId, typeId].join('_');
 
                 // check for cached signature names
                 if(sigNameCache.hasOwnProperty( cacheKey )){
                     return sigNameCache[cacheKey];
                 }
 
+                var signatureNames = getSignatureNames(systemType, areaId, typeId);
+
+                // add empty option
+                signatureNames[0] = '';
+
                 // get all available Signature Names
-                var availableSigs = sigNameCache[cacheKey] = getSignatureNames(systemType, areaId, sigType);
+                var availableSigs = sigNameCache[cacheKey] = signatureNames;
 
                 return availableSigs;
             }
         });
 
         // open next field dialog
-        openNextEditDialogOnSave(sigIdFields);
-        openNextEditDialogOnSave(sigTypeFields);
+        openNextEditDialogOnSave(sigIdFields, true);
+        openNextEditDialogOnSave(sigTypeFields, false);
 
         // set button observer (delete sig)
         $(this).find('.btn-danger').on('click', function(e){
             e.preventDefault();
 
-            // get clicked dataTable object
-            var currentTable = $(e.target).parents('.' + config.sigTableClass);
+            bootbox.confirm('Delete signature?', function(result) {
+                if(result){
+                    // get module
+                    var moduleElement = $(e.target).parents('.' + config.moduleClass);
 
-            currentTable = $(currentTable).dataTable();
+                    // get clicked dataTable object
+                    var currentTable = moduleElement.find('.' + config.sigTableMainClass);
+
+                    currentTable = $(currentTable).dataTable();
+
+                    // delete signature row
+                    currentTable.fnDeleteRow($(e.target).parents('tr'));
+
+                    // update signature bar
+                    moduleElement.updateScannedSignaturesBar();
+                }
+            });
 
-            currentTable.fnDeleteRow($(e.target).parents('tr'));
 
         });
 
@@ -811,7 +1162,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     if(data.id > 0){
                         sigName += 'data-pk="' + data.id + '" ';
                     }
-                    sigName += '>' + data.sig + '</a>';
+                    sigName += '>' + data.name + '</a>';
 
                     tempData.push(sigName);
 
@@ -821,7 +1172,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     }
                     sigType += 'data-systemType="' + systemType + '" ';
                     sigType += 'data-areaId="' + areaId + '" ';
-                    sigType += 'data-value="' + data.sigTypeId + '" ';
+                    sigType += 'data-value="' + data.typeId + '" ';
                     sigType += '></a>';
 
                     // set Sig Id
@@ -831,10 +1182,16 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     if(data.id > 0){
                         sigElement += 'data-pk="' + data.id + '" ';
                     }
+
+                    // set disabled if sig type is not selected
+                    if(data.typeId < 1){
+                        sigElement += 'data-disabled="1" ';
+                    }
+
                     sigElement += 'data-systemType="' + systemType + '" ';
                     sigElement += 'data-areaId="' + areaId + '" ';
-                    sigElement += 'data-sigTypeId="' + data.sigTypeId + '" ';
-                    sigElement += 'data-value="' + data.typeId + '" ';
+                    sigElement += 'data-typeId="' + data.typeId + '" ';
+                    sigElement += 'data-value="' + data.sigTypeId + '" ';
                     sigElement += '></a>';
 
                     // set Sig Id
@@ -855,7 +1212,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     }
 
                     var deleteButton = '<a class="btn ' + actionButtonClass + ' btn-xs" href="#">';
-                    deleteButton += '<i class="fa ' + actionButtonIcon + '"></i>';
+                    deleteButton += '<i class="fa ' + actionButtonIcon + ' fa-fw"></i>';
                     deleteButton += '</a>';
 
                     tempData.push( deleteButton );
@@ -882,13 +1239,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
             config: {
                 id: 2,
                 name: 'J150020',
+                alias: 'Polaris',
+                effect: 'magnetar',
                 security: 'C6',
+                static: [{
+                    lifetime: 24
+                }],
                 type: 'wh'
             },
             signatures: [
                 {
                     id: 2,
-                    sig: 'GDF',
+                    name: 'GDF',
                     typeId: 1,
                     sigTypeId: 2,
                     created: 1325376000,
@@ -896,15 +1258,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 6,
-                    sig: 'HFS',
-                    typeId: 1,
-                    sigTypeId: 3,
+                    name: 'HFS',
+                    typeId: 0,
+                    sigTypeId: 1,
                     created: 1415989953,
                     updated: 1415215936
 
                 },{
                     id: 8,
-                    sig: 'HFG',
+                    name: 'HFG',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -912,7 +1274,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 12,
-                    sig: 'LLD',
+                    name: 'LLD',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -920,7 +1282,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 13,
-                    sig: 'DGE',
+                    name: 'DGE',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1394613252,
@@ -928,7 +1290,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 14,
-                    sig: 'EXS',
+                    name: 'EXS',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -936,7 +1298,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 15,
-                    sig: 'CVS',
+                    name: 'CVS',
                     typeId: 3,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -944,15 +1306,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 16,
-                    sig: 'GGD',
-                    typeId: 2,
-                    sigTypeId: 1,
+                    name: 'GGD',
+                    typeId: 0,
+                    sigTypeId: 0,
                     created: 1415215936,
                     updated: 1415215936
 
                 },{
                     id: 18,
-                    sig: 'OKD',
+                    name: 'OKD',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -960,7 +1322,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 8,
-                    sig: 'DBE',
+                    name: 'DBE',
                     typeId: 3,
                     sigTypeId: 1,
                     created: 1415215936,
@@ -968,15 +1330,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                 },{
                     id: 20,
-                    sig: 'ASW',
-                    typeId: 1,
-                    sigTypeId: 1,
+                    name: 'ASW',
+                    typeId: 0,
+                    sigTypeId: 3,
                     created: 1415215936,
                     updated: 1386934983
 
                 },{
                     id: 22,
-                    sig: 'NFG',
+                    name: 'NFG',
                     typeId: 2,
                     sigTypeId: 2,
                     created: 1415215936,
@@ -1041,11 +1403,11 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                 class: ['row', config.mapTabContentRow].join(' ')
             }).append(
                     $('<div>', {
-                        class: ['col-xs-12', 'col-sm-8', config.mapTabContentCellFirst, config.mapTabContentCell].join(' ')
+                        class: ['col-xs-12', 'col-md-8', config.mapTabContentCellFirst, config.mapTabContentCell].join(' ')
                     })
                 ).append(
                     $('<div>', {
-                        class: ['col-xs-6', 'col-sm-4', config.mapTabContentCellSecond, config.mapTabContentCell].join(' ')
+                        class: ['col-xs-6', 'col-md-4', config.mapTabContentCellSecond, config.mapTabContentCell].join(' ')
                     })
                 );
 
@@ -1076,7 +1438,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     var tabContentElements = getTabContentElements(mapContentModule);
 
                     // set observer for manually triggered map events
-                    tabContentElements.setTabContenteObserver();
+                    tabContentElements.setTabContentObserver();
 
                     // load all the structure elements for ALL Tab Content Body
                     tabContentElements.initContentStructure();
@@ -1193,7 +1555,6 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                 enable:true
             }
         });
-        console.log(scrollableElement)
     };
 
     /**
@@ -1201,10 +1562,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
      * @returns {*} // string or id
      */
     $.fn.scrollTo = function(position){
-        return this.each(function(i, mapElement){
-            console.log(this)
-
-            $(this).mCustomScrollbar('scrollTo', position);
+        return this.each(function(){
+            // todo re-comment
+            //$(this).mCustomScrollbar('scrollTo', position);
         });
     };
 
diff --git a/js/app/util.js b/js/app/util.js
new file mode 100644
index 00000000..704fd9f2
--- /dev/null
+++ b/js/app/util.js
@@ -0,0 +1,66 @@
+/**
+ *  Util
+ */
+define(['jquery', 'app/init'], function($, Init) {
+
+    "use strict";
+
+    /**
+     * get a info for a given effect string
+     * @param effect
+     * @param option
+     * @returns {string}
+     */
+    var getEffectInfoForSystem = function(effect, option){
+
+        var effectClass = '';
+
+        if( Init.classes.systemEffects.hasOwnProperty(effect) ){
+            effectClass = Init.classes.systemEffects[effect][option];
+        }
+
+        return effectClass;
+    };
+
+    /**
+     * get a css class for the security level of a system
+     * @param sec
+     * @returns {string}
+     */
+    var getSecurityClassForSystem = function(sec){
+        var secClass = '';
+
+        if( Init.classes.systemSecurity.hasOwnProperty(sec) ){
+            secClass = Init.classes.systemSecurity[sec]['class'];
+        }
+
+        return secClass;
+    };
+
+    /**
+     * get a css class for the trueSec level of a system
+     * @param sec
+     * @returns {string}
+     */
+    var getTrueSecClassForSystem = function(trueSec){
+        var trueSecClass = '';
+
+        if(trueSec < 0){
+            trueSec = 0;
+        }
+
+        trueSec = trueSec.toFixed(1).toString();
+
+        if( Init.classes.trueSec.hasOwnProperty(trueSec) ){
+            trueSecClass = Init.classes.trueSec[trueSec]['class'];
+        }
+
+        return trueSecClass;
+    };
+
+    return {
+        getEffectInfoForSystem: getEffectInfoForSystem,
+        getSecurityClassForSystem: getSecurityClassForSystem,
+        getTrueSecClassForSystem: getTrueSecClassForSystem
+    };
+});
\ No newline at end of file
diff --git a/js/lib/bootbox.min.js b/js/lib/bootbox.min.js
new file mode 100644
index 00000000..a7ea24fe
--- /dev/null
+++ b/js/lib/bootbox.min.js
@@ -0,0 +1,6 @@
+/**
+ * bootbox.js v4.3.0
+ *
+ * http://bootboxjs.com/license.txt
+ */
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.bootbox=b(a.jQuery)}(this,function a(b,c){"use strict";function d(a){var b=q[o.locale];return b?b[a]:q.en[a]}function e(a,c,d){a.stopPropagation(),a.preventDefault();var e=b.isFunction(d)&&d(a)===!1;e||c.modal("hide")}function f(a){var b,c=0;for(b in a)c++;return c}function g(a,c){var d=0;b.each(a,function(a,b){c(a,b,d++)})}function h(a){var c,d;if("object"!=typeof a)throw new Error("Please supply an object of options");if(!a.message)throw new Error("Please specify a message");return a=b.extend({},o,a),a.buttons||(a.buttons={}),a.backdrop=a.backdrop?"static":!1,c=a.buttons,d=f(c),g(c,function(a,e,f){if(b.isFunction(e)&&(e=c[a]={callback:e}),"object"!==b.type(e))throw new Error("button with key "+a+" must be an object");e.label||(e.label=a),e.className||(e.className=2>=d&&f===d-1?"btn-primary":"btn-default")}),a}function i(a,b){var c=a.length,d={};if(1>c||c>2)throw new Error("Invalid argument length");return 2===c||"string"==typeof a[0]?(d[b[0]]=a[0],d[b[1]]=a[1]):d=a[0],d}function j(a,c,d){return b.extend(!0,{},a,i(c,d))}function k(a,b,c,d){var e={className:"bootbox-"+a,buttons:l.apply(null,b)};return m(j(e,d,c),b)}function l(){for(var a={},b=0,c=arguments.length;c>b;b++){var e=arguments[b],f=e.toLowerCase(),g=e.toUpperCase();a[f]={label:d(g)}}return a}function m(a,b){var d={};return g(b,function(a,b){d[b]=!0}),g(a.buttons,function(a){if(d[a]===c)throw new Error("button key "+a+" is not allowed (options are "+b.join("\n")+")")}),a}var n={dialog:"<div class='bootbox modal' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-body'><div class='bootbox-body'></div></div></div></div></div>",header:"<div class='modal-header'><h4 class='modal-title'></h4></div>",footer:"<div class='modal-footer'></div>",closeButton:"<button type='button' class='bootbox-close-button close' data-dismiss='modal' aria-hidden='true'>&times;</button>",form:"<form class='bootbox-form'></form>",inputs:{text:"<input class='bootbox-input bootbox-input-text form-control' autocomplete=off type=text />",textarea:"<textarea class='bootbox-input bootbox-input-textarea form-control'></textarea>",email:"<input class='bootbox-input bootbox-input-email form-control' autocomplete='off' type='email' />",select:"<select class='bootbox-input bootbox-input-select form-control'></select>",checkbox:"<div class='checkbox'><label><input class='bootbox-input bootbox-input-checkbox' type='checkbox' /></label></div>",date:"<input class='bootbox-input bootbox-input-date form-control' autocomplete=off type='date' />",time:"<input class='bootbox-input bootbox-input-time form-control' autocomplete=off type='time' />",number:"<input class='bootbox-input bootbox-input-number form-control' autocomplete=off type='number' />",password:"<input class='bootbox-input bootbox-input-password form-control' autocomplete='off' type='password' />"}},o={locale:"en",backdrop:!0,animate:!0,className:null,closeButton:!0,show:!0,container:"body"},p={};p.alert=function(){var a;if(a=k("alert",["ok"],["message","callback"],arguments),a.callback&&!b.isFunction(a.callback))throw new Error("alert requires callback property to be a function when provided");return a.buttons.ok.callback=a.onEscape=function(){return b.isFunction(a.callback)?a.callback():!0},p.dialog(a)},p.confirm=function(){var a;if(a=k("confirm",["cancel","confirm"],["message","callback"],arguments),a.buttons.cancel.callback=a.onEscape=function(){return a.callback(!1)},a.buttons.confirm.callback=function(){return a.callback(!0)},!b.isFunction(a.callback))throw new Error("confirm requires a callback");return p.dialog(a)},p.prompt=function(){var a,d,e,f,h,i,k;if(f=b(n.form),d={className:"bootbox-prompt",buttons:l("cancel","confirm"),value:"",inputType:"text"},a=m(j(d,arguments,["title","callback"]),["cancel","confirm"]),i=a.show===c?!0:a.show,a.message=f,a.buttons.cancel.callback=a.onEscape=function(){return a.callback(null)},a.buttons.confirm.callback=function(){var c;switch(a.inputType){case"text":case"textarea":case"email":case"select":case"date":case"time":case"number":case"password":c=h.val();break;case"checkbox":var d=h.find("input:checked");c=[],g(d,function(a,d){c.push(b(d).val())})}return a.callback(c)},a.show=!1,!a.title)throw new Error("prompt requires a title");if(!b.isFunction(a.callback))throw new Error("prompt requires a callback");if(!n.inputs[a.inputType])throw new Error("invalid prompt type");switch(h=b(n.inputs[a.inputType]),a.inputType){case"text":case"textarea":case"email":case"date":case"time":case"number":case"password":h.val(a.value);break;case"select":var o={};if(k=a.inputOptions||[],!k.length)throw new Error("prompt with select requires options");g(k,function(a,d){var e=h;if(d.value===c||d.text===c)throw new Error("given options in wrong format");d.group&&(o[d.group]||(o[d.group]=b("<optgroup/>").attr("label",d.group)),e=o[d.group]),e.append("<option value='"+d.value+"'>"+d.text+"</option>")}),g(o,function(a,b){h.append(b)}),h.val(a.value);break;case"checkbox":var q=b.isArray(a.value)?a.value:[a.value];if(k=a.inputOptions||[],!k.length)throw new Error("prompt with checkbox requires options");if(!k[0].value||!k[0].text)throw new Error("given options in wrong format");h=b("<div/>"),g(k,function(c,d){var e=b(n.inputs[a.inputType]);e.find("input").attr("value",d.value),e.find("label").append(d.text),g(q,function(a,b){b===d.value&&e.find("input").prop("checked",!0)}),h.append(e)})}return a.placeholder&&h.attr("placeholder",a.placeholder),a.pattern&&h.attr("pattern",a.pattern),f.append(h),f.on("submit",function(a){a.preventDefault(),a.stopPropagation(),e.find(".btn-primary").click()}),e=p.dialog(a),e.off("shown.bs.modal"),e.on("shown.bs.modal",function(){h.focus()}),i===!0&&e.modal("show"),e},p.dialog=function(a){a=h(a);var c=b(n.dialog),d=c.find(".modal-dialog"),f=c.find(".modal-body"),i=a.buttons,j="",k={onEscape:a.onEscape};if(g(i,function(a,b){j+="<button data-bb-handler='"+a+"' type='button' class='btn "+b.className+"'>"+b.label+"</button>",k[a]=b.callback}),f.find(".bootbox-body").html(a.message),a.animate===!0&&c.addClass("fade"),a.className&&c.addClass(a.className),"large"===a.size&&d.addClass("modal-lg"),"small"===a.size&&d.addClass("modal-sm"),a.title&&f.before(n.header),a.closeButton){var l=b(n.closeButton);a.title?c.find(".modal-header").prepend(l):l.css("margin-top","-10px").prependTo(f)}return a.title&&c.find(".modal-title").html(a.title),j.length&&(f.after(n.footer),c.find(".modal-footer").html(j)),c.on("hidden.bs.modal",function(a){a.target===this&&c.remove()}),c.on("shown.bs.modal",function(){c.find(".btn-primary:first").focus()}),c.on("escape.close.bb",function(a){k.onEscape&&e(a,c,k.onEscape)}),c.on("click",".modal-footer button",function(a){var d=b(this).data("bb-handler");e(a,c,k[d])}),c.on("click",".bootbox-close-button",function(a){e(a,c,k.onEscape)}),c.on("keyup",function(a){27===a.which&&c.trigger("escape.close.bb")}),b(a.container).append(c),c.modal({backdrop:a.backdrop,keyboard:!1,show:!1}),a.show&&c.modal("show"),c},p.setDefaults=function(){var a={};2===arguments.length?a[arguments[0]]=arguments[1]:a=arguments[0],b.extend(o,a)},p.hideAll=function(){return b(".bootbox").modal("hide"),p};var q={br:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Sim"},cs:{OK:"OK",CANCEL:"Zrušit",CONFIRM:"Potvrdit"},da:{OK:"OK",CANCEL:"Annuller",CONFIRM:"Accepter"},de:{OK:"OK",CANCEL:"Abbrechen",CONFIRM:"Akzeptieren"},el:{OK:"Εντάξει",CANCEL:"Ακύρωση",CONFIRM:"Επιβεβαίωση"},en:{OK:"OK",CANCEL:"Cancel",CONFIRM:"OK"},es:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Aceptar"},et:{OK:"OK",CANCEL:"Katkesta",CONFIRM:"OK"},fi:{OK:"OK",CANCEL:"Peruuta",CONFIRM:"OK"},fr:{OK:"OK",CANCEL:"Annuler",CONFIRM:"D'accord"},he:{OK:"אישור",CANCEL:"ביטול",CONFIRM:"אישור"},id:{OK:"OK",CANCEL:"Batal",CONFIRM:"OK"},it:{OK:"OK",CANCEL:"Annulla",CONFIRM:"Conferma"},ja:{OK:"OK",CANCEL:"キャンセル",CONFIRM:"確認"},lt:{OK:"Gerai",CANCEL:"Atšaukti",CONFIRM:"Patvirtinti"},lv:{OK:"Labi",CANCEL:"Atcelt",CONFIRM:"Apstiprināt"},nl:{OK:"OK",CANCEL:"Annuleren",CONFIRM:"Accepteren"},no:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},pl:{OK:"OK",CANCEL:"Anuluj",CONFIRM:"Potwierdź"},pt:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Confirmar"},ru:{OK:"OK",CANCEL:"Отмена",CONFIRM:"Применить"},sv:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},tr:{OK:"Tamam",CANCEL:"İptal",CONFIRM:"Onayla"},zh_CN:{OK:"OK",CANCEL:"取消",CONFIRM:"确认"},zh_TW:{OK:"OK",CANCEL:"取消",CONFIRM:"確認"}};return p.init=function(c){return a(c||b)},p});
\ No newline at end of file
diff --git a/sass/_colors.scss b/sass/_colors.scss
index ffe4a227..dfc4d54f 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -55,8 +55,21 @@ $wh-color-wolfryet:     $orange;
 $wh-color-cataclysmic:  $yellow-lighter;
 $wh-color-blackhole:    $gray-darkest;
 
-$brand-primary:         $teal-dark !default;
+// system security status
+$system-color-sec-0-0:        #be0000;
+$system-color-sec-0-1:        #ab2600;
+$system-color-sec-0-2:        #be3900;
+$system-color-sec-0-3:        #c24e02;
+$system-color-sec-0-4:        #ab5f00;
+$system-color-sec-0-5:        #bebe00;
+$system-color-sec-0-6:        #73bf26;
+$system-color-sec-0-7:        #00bf00;
+$system-color-sec-0-8:        #00bf39;
+$system-color-sec-0-9:        #39bf99;
+$system-color-sec-1-0:        #28c0bf;
+
+$brand-primary:         $teal-darker !default;
 $brand-success:         $green-dark !default;
 $brand-info:            #5bc0de !default;
 $brand-warning:         $orange !default;
-$brand-danger:          #d9534f !default;
\ No newline at end of file
+$brand-danger:          $red-darker !default;
\ No newline at end of file
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 206c7b59..d1699968 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -31,8 +31,8 @@ $link-hover-color:      darken($link-color, 15%);
 
 $pf-font-path:            "../fonts" !default;
 
-$font-family-sans-serif:  "Open Sans", Arial, Helvetica, sans-serif;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+$font-family-sans-serif:  'Oxygen Light', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       'Oxygen Regular' Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 $font-family-base:        $font-family-sans-serif;
 
@@ -43,7 +43,7 @@ $font-size-small:         ceil(($font-size-base * 0.85)); // ~11px
 $font-size-h1:            floor(($font-size-base * 1.85)); // ~24px
 $font-size-h2:            floor(($font-size-base * 1.7)); // ~22px
 $font-size-h3:            ceil(($font-size-base * 1.385)); // ~18px
-$font-size-h4:            ceil(($font-size-base * 1.32)); // ~17px
+$font-size-h4:            $font-size-base; //ceil(($font-size-base * 1.32)); // ~17px
 $font-size-h5:            ceil(($font-size-base * 1.24)); // ~16px
 $font-size-h6:            ceil(($font-size-base * 1.08)); // ~14px
 
@@ -103,7 +103,7 @@ $padding-xs-horizontal:     5px;
 $line-height-large:         1.33;
 $line-height-small:         1.5;
 
-$border-radius-base:        4px;
+$border-radius-base:        0px;
 $border-radius-large:       6px;
 $border-radius-small:       3px;
 
@@ -123,7 +123,7 @@ $caret-width-large:         5px;
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 $table-cell-padding:            8px;
-$table-condensed-cell-padding:  5px;
+$table-condensed-cell-padding:  2px;
 
 $table-bg:                      transparent;
 $table-bg-accent:               #f9f9f9;
@@ -222,8 +222,8 @@ $dropdown-caret-color:           #000;
 
 $zindex-navbar:            1000;
 $zindex-dropdown:          1000;
-$zindex-popover:           1010;
-$zindex-tooltip:           1030;
+$zindex-tooltip:           1010;
+$zindex-popover:           1030;
 $zindex-navbar-fixed:      1030;
 $zindex-modal-background:  1040;
 $zindex-modal:             1050;
@@ -247,7 +247,7 @@ $screen-tablet:              $screen-sm-min;
 
 // Medium screen / desktop
 // Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
-$screen-md:                  992px;
+$screen-md:                  900px;
 $screen-md-min:              $screen-md;
 $screen-desktop:             $screen-md-min;
 
@@ -511,12 +511,12 @@ $label-link-hover-color:      #fff;
 //
 //##
 
-$modal-inner-padding:         20px;
+$modal-inner-padding:         14px;
 
-$modal-title-padding:         15px;
+$modal-title-padding:         14px;
 $modal-title-line-height:     $line-height-base;
 
-$modal-content-bg:                             #fff;
+$modal-content-bg:                             $gray;
 $modal-content-border-color:                   rgba(0,0,0,.2);
 $modal-content-fallback-border-color:          #999;
 
@@ -664,11 +664,11 @@ $badge-border-radius:         10px;
 //
 //##
 
-$breadcrumb-padding-vertical:   8px;
-$breadcrumb-padding-horizontal: 15px;
-$breadcrumb-bg:                 #f5f5f5;
-$breadcrumb-color:              #ccc;
-$breadcrumb-active-color:       $gray-light;
+$breadcrumb-padding-vertical:   0px;
+$breadcrumb-padding-horizontal: 0px;
+$breadcrumb-bg:                 none;
+$breadcrumb-color:              $gray-light;
+$breadcrumb-active-color:       $green;
 $breadcrumb-separator:          "/";
 
 
@@ -694,7 +694,7 @@ $carousel-caption-color:                      #fff;
 //##
 
 $close-font-weight:           bold;
-$close-color:                 #000;
+$close-color:                 $red-darker;
 $close-text-shadow:           0 1px 0 #fff;
 
 
diff --git a/sass/bootstrap/_close.scss b/sass/bootstrap/_close.scss
index 62ce30fa..7bff4ee2 100644
--- a/sass/bootstrap/_close.scss
+++ b/sass/bootstrap/_close.scss
@@ -9,8 +9,6 @@
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
-  text-shadow: $close-text-shadow;
-  @include opacity(.2);
 
   &:hover,
   &:focus {
diff --git a/sass/bootstrap/_mixins.scss b/sass/bootstrap/_mixins.scss
index 81d34a9c..e451865d 100644
--- a/sass/bootstrap/_mixins.scss
+++ b/sass/bootstrap/_mixins.scss
@@ -507,13 +507,13 @@
   &:active,
   &.active {
     color: $color;
-    background-color: darken($background, 8%);
-        border-color: darken($border, 12%);
+    background-color: lighten($background, 8%);
+        border-color: lighten($border, 12%);
   }
   .open & { &.dropdown-toggle {
     color: $color;
-    background-color: darken($background, 8%);
-        border-color: darken($border, 12%);
+    background-color: lighten($background, 8%);
+        border-color: lighten($border, 12%);
   } }
   &:active,
   &.active {
diff --git a/sass/bootstrap/_modals.scss b/sass/bootstrap/_modals.scss
index 931092cf..2329beef 100644
--- a/sass/bootstrap/_modals.scss
+++ b/sass/bootstrap/_modals.scss
@@ -42,6 +42,7 @@
   position: relative;
   width: auto;
   margin: 10px;
+  z-index: $zindex-modal;
 }
 
 // Actual modal
@@ -75,8 +76,10 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   padding: $modal-title-padding;
-  border-bottom: 1px solid $modal-header-border-color;
+  // border-bottom: 1px solid $modal-header-border-color;
+  border-bottom: 1px solid darken($modal-content-bg, 5%);
   min-height: ($modal-title-padding + $modal-title-line-height);
+  background-color: darken($modal-content-bg, 3%);
 }
 // Close icon
 .modal-header .close {
@@ -94,14 +97,15 @@
 .modal-body {
   position: relative;
   padding: $modal-inner-padding;
+  color: $gray-lighter;
 }
 
 // Footer (for actions)
 .modal-footer {
-  margin-top: 15px;
   padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
   text-align: right; // right align buttons
-  border-top: 1px solid $modal-footer-border-color;
+  border-top: 1px solid darken($modal-content-bg, 5%);
+  background-color: darken($modal-content-bg, 3%);
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
diff --git a/sass/bootstrap/_tables.scss b/sass/bootstrap/_tables.scss
index 1ddfb7ab..fe92cafc 100644
--- a/sass/bootstrap/_tables.scss
+++ b/sass/bootstrap/_tables.scss
@@ -16,7 +16,7 @@ th {
 
 .table {
   width: 100%;
-  margin-bottom: $line-height-computed;
+  margin-bottom: 0;
   // Cells
   > thead,
   > tbody,
diff --git a/sass/bootstrap/_variables.scss b/sass/bootstrap/_variables.scss
index 1c90a289..74b15cbb 100644
--- a/sass/bootstrap/_variables.scss
+++ b/sass/bootstrap/_variables.scss
@@ -29,8 +29,8 @@ $link-hover-color:      darken($link-color, 15%) !default;
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
+$font-family-sans-serif:  'Oxygen Light', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       'Oxygen Regular' Georgia, "Times New Roman", Times, serif !default;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
diff --git a/sass/layout/_all.scss b/sass/layout/_all.scss
index 99b7d44d..63e50be4 100644
--- a/sass/layout/_all.scss
+++ b/sass/layout/_all.scss
@@ -1,4 +1,5 @@
 @import "main";
 @import "map";
 @import "system-info";
-@import "_forms";
\ No newline at end of file
+@import "_forms";
+@import "_images";
\ No newline at end of file
diff --git a/sass/layout/_images.scss b/sass/layout/_images.scss
new file mode 100644
index 00000000..05af6f46
--- /dev/null
+++ b/sass/layout/_images.scss
@@ -0,0 +1,11 @@
+.pf-icon{
+  display: inline-block;
+}
+
+.pf-icon-dotlan{
+  background: url('../img/icons/dotlan_logo.png');
+  width: 17px;
+  height: 17px;
+  opacity: 0.8;
+  margin: -5px 10px 0 10px;
+}
diff --git a/sass/layout/_main.scss b/sass/layout/_main.scss
index 3b537f55..12d12c45 100644
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -13,6 +13,7 @@ a{
   }
 }
 
+
 // Maps module ===================================================
 #pf-map-module{
   margin: 30px 0 0 0;
@@ -40,9 +41,136 @@ a{
 
 }
 
+// Tab Content Body Grid ========================================
+.pf-map-content-row{
+  margin: 10px 0 0 0;
+
+  // Table cell style
+  > div{
+
+  }
+
+  // alle Module innerhalb einer row
+  .pf-module{
+    @include border-radius(5px);
+    background: rgba($gray, 0.3);
+    padding: 10px;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+}
+
+// WH effects ==================================================
+
+.pf-system-effect{
+  margin-left: 5px;
+  cursor: default;
+}
+
+.pf-system-effect-magnetar{
+  color: $wh-color-magnetar;
+}
+
+.pf-system-effect-redgiant{
+  color: $wh-color-redgiant;
+}
+
+.pf-system-effect-pulsar{
+  color: $wh-color-pulsar;
+}
+
+.pf-system-effect-wolfryet{
+  color: $wh-color-wolfryet;
+}
+
+.pf-system-effect-cataclysmic{
+  color: $wh-color-cataclysmic;
+}
+
+.pf-system-effect-blackhole{
+  color: $wh-color-blackhole;
+}
+
+// System security status ============================================
+.pf-system-security-0-0{
+  color: $system-color-sec-0-0;
+}
+
+.pf-system-security-0-1{
+  color: $system-color-sec-0-1;
+}
+
+.pf-system-security-0-2{
+  color: $system-color-sec-0-2;
+}
+
+.pf-system-security-0-3{
+  color: $system-color-sec-0-3;
+}
+
+.pf-system-security-0-4{
+  color: $system-color-sec-0-4;
+}
+
+.pf-system-security-0-5{
+  color: $system-color-sec-0-5;
+}
+
+.pf-system-security-0-6{
+  color: $system-color-sec-0-6;
+}
+
+.pf-system-security-0-7{
+  color: $system-color-sec-0-7;
+}
+
+.pf-system-security-0-8{
+  color: $system-color-sec-0-8;
+}
+
+.pf-system-security-0-9{
+  color: $system-color-sec-0-9;
+}
+
+.pf-system-security-1-0{
+  color: $system-color-sec-1-0;
+}
+
+// System security level =============================================
+
+.pf-system-sec{
+  margin-right: 5px;
+  cursor: move;
+}
+
+.pf-system-sec-highSec{
+  color: $green;
+}
+
+.pf-system-sec-lowSec{
+  color: $orange;
+}
+
+.pf-system-sec-nullSec{
+  color: $red;
+}
+
+.pf-system-sec-high{
+  color: $red;
+}
+
+.pf-system-sec-mid{
+  color: $orange;
+}
+
+.pf-system-sec-low{
+  color: $blue;
+}
+
 // Tooltip ======================================================
 .tooltip-inner{
-  opacity: 0.8;
+  opacity: 1;
   color: $teal;
   background-color: $gray;
   font-family: 'Oxygen Bold';
@@ -55,3 +183,7 @@ a{
   border-top-color: $gray-light;
 }
 
+.tooltip.bottom .tooltip-arrow{
+  border-bottom-color: $gray-light;
+}
+
diff --git a/sass/layout/_map.scss b/sass/layout/_map.scss
index 9c2acb7a..746125df 100644
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -72,7 +72,11 @@
     .pf-system-head{
       padding: 0px 3px 2px 3px;
       cursor: pointer;
-      color: $gray-lighter;
+
+      .pf-system-head-name{
+        border: none;
+        color: $gray-lighter;
+      }
 
       .pf-system-head-expand{
         margin-left: 5px;
@@ -80,75 +84,15 @@
       }
     }
 
-    // System security =============================================
-
-    .pf-system-sec{
-      margin-right: 5px;
-      cursor: move;
-    }
-
-    .pf-system-sec-highSec{
-      color: $green;
-    }
-
-    .pf-system-sec-lowSec{
-      color: $orange;
-    }
-
-    .pf-system-sec-nullSec{
-      color: $red;
-    }
-
-    .pf-system-sec-high{
-      color: $red;
-    }
-
-    .pf-system-sec-mid{
-      color: $orange;
-    }
-
-    .pf-system-sec-low{
-      color: $blue;
-    }
-
-    // WH effects ==================================================
-
-    .pf-system-effect{
-      margin-left: 5px;
-      cursor: default;
-    }
-
-    .pf-system-effect-magnetar{
-      color: $wh-color-magnetar;
-    }
-
-    .pf-system-effect-redgiant{
-      color: $wh-color-redgiant;
-    }
-
-    .pf-system-effect-pulsar{
-      color: $wh-color-pulsar;
-    }
-
-    .pf-system-effect-wolfryet{
-      color: $wh-color-wolfryet;
-    }
-
-    .pf-system-effect-cataclysmic{
-      color: $wh-color-cataclysmic;
-    }
-
-    .pf-system-effect-blackhole{
-      color: $wh-color-blackhole;
-    }
-
     // ===============================================================
 
     .pf-system-body{
       height: 16px;
       width: 100%;
       overflow: hidden;
-      cursor: move;
+      cursor: -moz-grab;
+      cursor: -webkit-grab;
+      cursor: grab;
       padding: 0 2px;
       white-space: nowrap;
       display: none;  // triggered by JS
diff --git a/sass/layout/_system-info.scss b/sass/layout/_system-info.scss
index ab585bde..19aa1a93 100644
--- a/sass/layout/_system-info.scss
+++ b/sass/layout/_system-info.scss
@@ -1,54 +1,50 @@
-
-// Tab Content Body Grid
-.pf-map-content-row{
-  margin: 10px 0 0 0;
-
-  // Table cell style
-  > div{
-    @include border-radius(5px);
-    background: rgba($gray, 0.3);
-    padding: 10px;
-    display: none; // triggered by JS
+// breadcrumb ============================================================
+.breadcrumb{
+  li{
+    text-transform: capitalize;
+  }
+}
+
+// routes table ==========================================================
+.pf-system-route-table{
+  font-size: 10px;
+}
+
+// signature table =======================================================
+
+// signature table
+.pf-sig-table{
+  font-size: 10px;
+}
+
+// table icon toolbar
+.pf-sig-table-tools{
+  height: 45px;
+}
+
+.pf-sig-table-tools-action{
+  height: 75px;
+  display: none; // triggered by js
+}
+
+// signature timer/date counter head
+th.pf-sig-table-counter{
+  padding-right: 20px !important;
+}
+
+// signature timer/date counter
+.pf-sig-table-counter{
+  text-align: right;
+
+  .pf-digit-counter-small{
+    width: 20px;
+    display: inline-block;
+    font-size: 10px;
+  }
+
+  .pf-digit-counter-large{
+    width: 26px;
+    display: inline-block;
+    font-size: 10px;
   }
-
-  .pf-map-content-col-first{
-
-  }
-
-  .pf-map-content-col-second{
-
-  }
-  
-  // table icon toolbar
-  .pf-sig-table-tools{
-    height: 45px;
-  }
-
-  .pf-sig-table-tools-action{
-    height: 75px;
-   // display: none; // triggered by js
-  }
-
-  // signature timer/date counter head
-  th.pf-sig-table-counter{
-    padding-right: 20px !important;
-  }
-
-  // signature timer/date counter
-  .pf-sig-table-counter{
-    text-align: right;
-
-    .pf-digit-counter-small{
-      width: 20px;
-      display: inline-block;
-      font-size: 10px;
-    }
-
-    .pf-digit-counter-large{
-      width: 26px;
-      display: inline-block;
-      font-size: 10px;
-    }
-  }
-  
 }
diff --git a/sass/library/data-tables/_dataTables.scss b/sass/library/data-tables/_dataTables.scss
index 8ffeab24..6768a313 100644
--- a/sass/library/data-tables/_dataTables.scss
+++ b/sass/library/data-tables/_dataTables.scss
@@ -100,7 +100,7 @@ table.dataTable.display tbody tr.even:hover {
 
   a {
     color: $gray-darker !important;
-    border-bottom: dashed 1px $gray-darker !important;
+    //border-bottom: dashed 1px $gray-darker !important;
   }
 }
 table.dataTable.hover tbody tr:hover.selected,
diff --git a/sass/smartadmin/_main.scss b/sass/smartadmin/_main.scss
index 7fb4464c..da28ec68 100644
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -29,7 +29,7 @@ a:hover, a:active, a:focus, button, button:active, button:focus, object, embed,
 	
 h1,h2,h3,h4 {
 	margin:0;
-	font-family:"Open Sans", Arial, Helvetica, Sans-Serif;
+	font-family: "Oxygen Bold", "Open Sans", Arial, Helvetica, Sans-Serif;
 	font-weight:300;
 }
 
@@ -102,7 +102,9 @@ input[type="color"]:focus,
 }	
 
 .btn-xs {
-	padding: 1px 5px;
+	padding: 0px 2px;
+    font-size: 10px;
+    line-height: 1.3;
 }
 
 .btn-sm {
@@ -1722,7 +1724,9 @@ input[type="text"]:focus + .input-group-addon {
           box-shadow: inset 0 -1px 0 rgba(red($black), green($black), blue($black), 0.15);
   font-weight:bold;
   text-shadow: 0 -1px 0 rgba(red($black), green($black), blue($black), 0.25);         
-  background-image:url("#{$base-url}/pattern/overlay-pattern.png");      
+  background-image:url("#{$base-url}/overlay-pattern.png");
+  -webkit-transition: width 1.5s ease-in-out;
+  transition: width 1.5s ease-in-out;
 }
 
 .progress-striped .progress-bar {
@@ -2215,7 +2219,14 @@ a:link, .btn, button {
 .table-condensed.table>tfoot>tr>th, 
 .table-condensed.table>thead>tr>td, 
 .table-condensed.table>thead>tr>th {
-	padding: 5px 10px !important;
+	padding: 2px 0px !important;
+    border: none;
+    line-height: 20px;
+    border-bottom: 1px solid $gray-darker;
+}
+
+.table-condensed.table tr td:first-child{
+    color: $gray;
 }
 
 
diff --git a/templates/form/progress.html b/templates/form/progress.html
index a95b4e99..37462cac 100644
--- a/templates/form/progress.html
+++ b/templates/form/progress.html
@@ -1,12 +1,14 @@
-{{#headlineRight}}
-    <small class="pull-right">{{headlineRight}}</small>
-{{/headlineRight}}
-{{#headline}}
-    <small>{{headline}}</small>
-{{/headline}}
+<div class="{{wrapperClass}}">
+    {{#headlineRight}}
+        <small class="pull-right progress-label-right">{{headlineRight}}</small>
+    {{/headlineRight}}
+    {{#headline}}
+        <small>{{headline}}</small>
+    {{/headline}}
 
-<div class="progress progress progress-micro">
-    <div class="progress-bar {{barClass}}"  role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
+    <div class="progress progress progress-micro">
+        <div class="progress-bar {{class}}"  role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
 
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/modules/system_info.html b/templates/modules/system_info.html
new file mode 100644
index 00000000..ee8cc100
--- /dev/null
+++ b/templates/modules/system_info.html
@@ -0,0 +1,61 @@
+
+
+<div class="row">
+    <div class="col-xs-12 col-sm-7">
+        <ol class="breadcrumb">
+            <li><span data-toggle="tooltip" data-placement="bottom" title="type">{{system.type}}</span></li>
+            <li><a href="{{system.region.id}}" data-toggle="tooltip" data-placement="bottom" title="region">{{system.region.name}}</a></li>
+            <li><a href="{{system.constellation.id}}" data-toggle="tooltip" data-placement="bottom" title="constellation">{{system.constellation.name}}</a></li>
+            <li>
+                <span data-toggle="tooltip" data-placement="bottom" title="system">{{system.name}}</span>
+                <a href="http://evemaps.dotlan.net/system/{{system.name}}" target="_blank">
+                    <div data-toggle="tooltip" data-placement="bottom" title="dotlan" class="pf-icon pf-icon-dotlan"></div>
+                </a>
+            </li>
+        </ol>
+
+
+        <div class="pf-system-info-routes"></div>
+
+
+
+    </div>
+    <div class="col-xs-12 col-sm-5">
+        <table class="table table-condensed">
+            <tbody>
+            <tr>
+                <td>Name</td>
+                <td class="text-right">
+                    {{#system.alias}}
+                        {{system.alias}}
+                    {{/system.alias}}
+                    {{^system.alias}}
+                        {{system.name}}
+                    {{/system.alias}}
+                    [ <span class="{{securityClass}}">{{system.security}}</span> ]
+                </td>
+            </tr>
+                {{#effectName}}
+                    <tr>
+                        <td>Effect</td>
+                        <td class="text-right">{{effectName}} <i class="fa fa-square pf-system-effect {{effectClass}}"></i></td>
+                    </tr>
+                {{/effectName}}
+                {{#system.static}}
+                    <tr>
+                        <td>Static</td>
+                        <td class="text-right">{{name}} [ <span class="{{class}}">{{security}}</span> ]</td>
+                    </tr>
+                {{/system.static}}
+                <tr>
+                    <td>Security</td>
+                    <td class="text-right {{trueSecClass}}">{{system.trueSec}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+
+