diff --git a/img/loading.gif b/img/loading.gif
new file mode 100644
index 00000000..06db7843
Binary files /dev/null and b/img/loading.gif differ
diff --git a/js/app/counter.js b/js/app/counter.js
new file mode 100644
index 00000000..9140238c
--- /dev/null
+++ b/js/app/counter.js
@@ -0,0 +1,84 @@
+define(["jquery"], function($) {
+
+    "use strict";
+
+    var config = {
+      counterDigitSmallClass: 'pf-digit-counter-small',
+      counterDigitLargeClass: 'pf-digit-counter-large'
+    };
+
+    var updateDateDiff = function(element, tempDate){
+
+        var date1 = new Date();
+        var date2 = tempDate;
+        //Customise date2 for your required future time
+
+        var diff = (date1 - date2)/1000;
+        diff = Math.abs(Math.floor(diff));
+
+        var days = Math.floor(diff/(24*60*60));
+        var leftSec = diff - days * 24*60*60;
+
+        var hrs = Math.floor(leftSec/(60*60));
+        leftSec = leftSec - hrs * 60*60;
+
+        var min = Math.floor(leftSec/(60));
+        leftSec = leftSec - min * 60;
+
+
+        var value = [];
+
+        if(
+            days > 0 ||
+            value.length > 0
+        ){
+            value.push('<span class="' + config.counterDigitLargeClass + '">' + days + 'd' + '</span>');
+        }
+        if(
+            hrs > 0 ||
+            value.length > 0
+        ){
+            value.push('<span class="' + config.counterDigitSmallClass + '">' + hrs + 'h' + '</span>');
+        }
+        if(
+            min > 0 ||
+            value.length > 0
+        ){
+            value.push('<span class="' + config.counterDigitSmallClass + '">' + min + 'm' + '</span>');
+        }
+        if(
+            leftSec > 0 ||
+            value.length > 0
+        ){
+            value.push('<span class="' + config.counterDigitSmallClass + '">' + leftSec + 's' + '</span>');
+        }
+
+
+        //console.log(timediff.getSeconds())
+        element.html(value.join(' '));
+    };
+
+
+
+    $.fn.initSignatureCounter = function(){
+
+        return this.each(function(){
+
+            var element = $(this);
+
+            var timestamp = parseInt( $(this).text() );
+
+            if(timestamp > 0){
+                var date = new Date( timestamp * 1000);
+                updateDateDiff(element, date);
+
+                window.setInterval(function(){ updateDateDiff(element, date); }, 1000);
+
+            }
+
+
+        });
+
+
+    };
+});
diff --git a/js/app/main.js b/js/app/main.js
index 8332d717..56ec3463 100644
--- a/js/app/main.js
+++ b/js/app/main.js
@@ -79,7 +79,8 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
             }
 
 
-        },{
+        },
+            {
             map: {},
             config: {
                 name: 'Providence',
@@ -99,7 +100,7 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
                         status: 'friendly',
                         position: {
                             x: 5,
-                            y: 5
+                            y: 7
                         }
                     },{
                         id: 51,
@@ -110,7 +111,7 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
                         status: 'empty',
                         position: {
                             x: 60,
-                            y: 60
+                            y: 65
                         }
                     }
                 ],
@@ -138,45 +139,53 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render
 
 
         // current user Data for a map
-        var userData = [
-            {
-                config: {   // map config
-                    id: 1   // map id
-                },
-                data: {
-                    systems:[   // systems in map
-                        {
-                            id: 4,  // system id
-                            user: [
-                                {
-                                    name: 'Exodus 4D',
-                                    ship: 'Legion',
-                                    status: 'corp'
-                                }
-                            ]
-                        },
-                        {
-                            id: 5,  // system id
-                            user: [
-                                {
-                                    name: 'Faye Fantastic',
-                                    ship: 'Armageddon',
-                                    status: 'ally'
-                                },{
-                                    name: 'Sibasomos',
-                                    ship: 'Proteus',
-                                    status: 'corp'
-                                },{
-                                    name: 'Xtrah gfdfgdfgfd',
-                                    ship: 'Pod',
-                                    status: 'ally'
-                                }
-                            ]
-                        }
-                    ]
+        var userData ={
+            currentUserData: {
+                ship: 'Legion',
+                system: {
+                    name: 'J115844',
+                    id: 4
                 }
-            }
-        ];
+            },
+            mapUserData: [ // user Data for all maps
+                {
+                    config: {   // map config
+                        id: 1   // map id
+                    },
+                    data: {
+                        systems:[   // systems in map
+                            {
+                                id: 4,  // system id
+                                user: [
+                                    {
+                                        name: 'Exodus 4D',
+                                        ship: 'Legion',
+                                        status: 'corp'
+                                    }
+                                ]
+                            },
+                            {
+                                id: 5,  // system id
+                                user: [
+                                    {
+                                        name: 'Faye Fantastic',
+                                        ship: 'Armageddon',
+                                        status: 'ally'
+                                    },{
+                                        name: 'Sibasomos',
+                                        ship: 'Proteus',
+                                        status: 'corp'
+                                    },{
+                                        name: 'Xtrah gfdfgdfgfd',
+                                        ship: 'Pod',
+                                        status: 'ally'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                }
+            ]};
 
         // load map module ==========================================
         $('#' + config.mapModuleId).loadMapModule(mapData);
diff --git a/js/app/map/map.js b/js/app/map/map.js
index 025d3e6a..8e9b209b 100644
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -302,10 +302,12 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
 
     /**
      * updates a system with current information
+     * @param map
      * @param system
      * @param data
+     * @param currentUserData // data of the user that is currently viewing this map
      */
-    var updateSystem = function(map, system, data){
+    var updateSystem = function(map, system, data, currentUserData){
 
         // find system body
         var systemBody = $( $(system).find('.' + config.systemBodyClass) );
@@ -322,8 +324,18 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
 
         var userCounter = 0;
 
+        // if current user is in THIS system trigger event
+        if(currentUserData){
+            var tabContentElement = getTabContentElementByMapElement(system);
+
+            $(tabContentElement).trigger('pf:highlightTab', [{system: system}]);
+        }
+
         // add user information
-        if(data.user){
+        if(
+            data &&
+            data.user
+        ){
 
             $.each(data.user, function(i, userData){
 
@@ -442,7 +454,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                 $('<div>', {
                     class: config.systemBodyClass
                 })
-        ).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' });
+            ).data('name', data.name).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' });
 
         system.attr('data-id', data.id);
 
@@ -795,7 +807,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         // init system body expand
         systemHeadExpand.hover(function(e){
             // hover in
-            var hoverSystem = this;
+            var hoverSystem = $(this).parents('.' + config.systemClass);
 
             // get ship counter and calculate expand height
             var shipCounter = parseInt( $(system).attr('data-original-title') );
@@ -816,13 +828,14 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                         map.repaint( hoverSystem );
                     },
                     complete: function(){
+                        map.repaint( hoverSystem );
                         $(this).find('.' + config.systemBodyRightClass).show();
                     }
                 }
             );
         }, function(e){
             // hover out
-            var hoverSystem = this;
+            var hoverSystem = $(this).parents('.' + config.systemClass);
             systemBody.animate(
                 {
                     height: '16px',
@@ -839,6 +852,9 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                     },
                     start: function(){
                         $(this).find('.' + config.systemBodyRightClass).hide();
+                    },
+                    complete: function(){
+                        map.repaint( hoverSystem );
                     }
                 }
             );
@@ -914,23 +930,43 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         });
 
         // load system data =================================================================================
-
+        // trigger event for this system
         $(system).on('click', function(e){
 
             // get current map
             var currentSystem = $(e.target).parents('.' + config.systemClass);
 
-            // get parent Tab Content and fire update event
-            var tabContentElement = currentSystem.parents('.' + config.mapTabContentClass);
-
             markSystemActive(map, currentSystem);
 
+            // get parent Tab Content and fire update event
+            var tabContentElement = getTabContentElementByMapElement(currentSystem);
+
             $(tabContentElement).trigger('pf:updateSystemData', [{system: currentSystem}]);
         });
-
-
     };
 
+    /**
+     * get all TabContentElements
+     * @returns {*|HTMLElement}
+     */
+    var getTabContentElements = function(){
+        return $('.' + config.mapTabContentClass);
+    };
+
+    /**
+     * get TabContentElement by any element on a map e.g. system
+     * @param element
+     * @returns {*}
+     */
+    var getTabContentElementByMapElement = function(element){
+        var tabContentElement = $(element).parents('.' + config.mapTabContentClass);
+        return tabContentElement;
+    };
+
+    /**
+     * set observer for a map container
+     * @param map
+     */
     var setMapObserver = function(map){
 
         // get map container
@@ -939,6 +975,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         $(container).on('contextmenu', function(e){
             $(e.target).trigger('pf:openContextMenu', [e, this]);
             e.preventDefault();
+            e.stopPropagation();
             return false;
         });
 
@@ -976,17 +1013,17 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
     };
 
     /**
-     * set Observer for a given connection
+     * set observer for a given connection
      * @param map
      * @param connection
      */
     var setConnectionObserver = function(map, connection){
 
-
         connection.bind('contextmenu', function(component, e) {
             // trigger menu "open
             $(e.target).trigger('pf:openContextMenu', [e, component]);
             e.preventDefault();
+            e.stopPropagation();
             return false;
         });
 
@@ -1067,11 +1104,6 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                         break;
                 }
 
-                // wh type:
-                console.log('is eol: ', connection.hasType('wh_eol'));
-                console.log('is reduced: ', connection.hasType('wh_reduced'));
-                console.log('is crit: ', connection.hasType('wh_critical'));
-
             }
         });
     };
@@ -1159,7 +1191,6 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
                                         y: options.position.y
                                     };
 
-                                    console.log(e)
                                 }
 
 
@@ -1219,10 +1250,12 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
     };
 
     /**
-     * updates all systems on map with current user Data
+     * updates all systems on map with current user Data (all users on this map)
+     * update the Data of the user that is currently viewing the map (if available) -> In - game info
      * @param userData
+     * @param currentUserData
      */
-    $.fn.updateUserData = function(userData){
+    $.fn.updateUserData = function(userData, currentUserData){
 
         // get all systems
         var systems = $(this).find('.' + config.systemClass);
@@ -1230,20 +1263,34 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R
         // get new map instance or load existing
         var map = getMapInstance(userData.config.id);
 
+        // trigger reset event for all Tabs
+        var tabContentElements = getTabContentElements();
+        $(tabContentElements).trigger('pf:highlightTab', [{}]);
+
         // container must exist! otherwise systems cant be updated
         if(map.getContainer() !== undefined){
             $.each(systems, function(i, system){
                 // get user Data for System
                 var systemId = parseInt( $(system).attr('data-id') );
 
-                var data = {};
+                var tempUserData = null;
                 $.each(userData.data.systems, function(j, systemData){
+                    // check if any user is in this system
                     if(systemId === systemData.id){
-                        data = systemData;
+                        tempUserData = systemData;
                     }
                 });
 
-                updateSystem(map, system, data);
+                // check if user is currently in this system
+                var tempCurrentUserData = null;
+                if(
+                    currentUserData &&
+                    currentUserData.system.id === systemId
+                ){
+                    tempCurrentUserData = currentUserData;
+                }
+
+                updateSystem(map, system, tempUserData, tempCurrentUserData);
 
             });
         }
diff --git a/js/app/module_map.js b/js/app/module_map.js
index dcc72e84..f43d1273 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'], function($, Render) {
+define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'customScrollbar', 'app/counter'], function($, Render) {
 
     "use strict";
 
@@ -15,14 +15,23 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
         // TabContentStructure
         mapTabContentRow: 'pf-map-content-row',                                 // main row for Tab content (grid)
+        mapTabContentCell: 'pf-map-content-col',                                // column
         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
+        systemInfoProgressScannedClass: 'pf-system-progress-scanned',           // progress bar scanned signatures
+
         // sig table
+        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
         sigTableEditText: 'pf-sig-table-edit-text',                             // class for editable fields (text)
-        sigTableEditSigTypeSelect: 'pf-sig-table-edit-sig-type-select',         // class for editable fields (select)
-        sigTableEditSigNameSelect: 'pf-sig-table-edit-sig-name-select',         // class for editable fields (select)
+        sigTableEditSigNameInput: 'pf-sig-table-edit-name-input',               // class for editable fields (input)
+        sigTableEditSigTypeSelect: 'pf-sig-table-edit-type-select',             // class for editable fields (select)
+        sigTableEditSigNameSelect: 'pf-sig-table-edit-name-select',             // class for editable fields (select)
+        sigTableCounterClass: 'pf-sig-table-counter',                           // class for signature table counter
 
         // map types
         mapTypes: [
@@ -237,6 +246,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         return maps;
     };
 
+
+    /**
+     * get all TabElements in this map module
+     * @returns {*}
+     */
+    var getTabElements = function(){
+        return $('#' + config.mapTabBarId).find('a[data-toggle="tab"]');
+    };
+
     /**
      * get all Tabs for a maps module
      * @param mapModule
@@ -256,14 +274,156 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
     $.fn.setTabContenteObserver = function(){
 
         return this.each(function(){
+            // update Tab Content with system data information
             $(this).on('pf:updateSystemData', function(e, data){
-                // update Tab Content with system data information
-                updateSystemInfo($( e.target ));
+                updateSystemInfoElement($( e.target ));
             });
+
+            // highlite a mapTab
+            $(this).on('pf:highlightTab', function(e, data){
+                // update Tab Content with system data information
+                highliteTab(e.target, data);
+
+            });
+
         });
     };
 
-    var updateSystemInfo = function(tabContentElement){
+    /**
+     * highlite 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 tabElements = getTabElements();
+
+        contentElement = $(contentElement);
+
+        // look for related tab element
+        $.each(tabElements, function(i, tabElement){
+
+            tabElement = $(tabElement);
+
+            if(tabElement.attr('data-map-index') === contentElement.attr('data-map-index')){
+
+                tabElement.tooltip({placement: 'top', trigger: 'manual'});
+
+                tabElement.attr('title', '');
+                tabElement.tooltip('hide');
+
+                // check if this tab needs to be highlighted
+                if(data.system){
+                    // destroy empty tooltip end create new
+                    tabElement.tooltip('destroy');
+                    tabElement.attr('title', $(data.system).data('name'));
+                    tabElement.tooltip('show');
+
+                    // scroll to system
+                    contentElement.find('.' + config.mapWrapperClass).scrollTo( '#' + data.system.id );
+                }
+               return false;
+           }
+        });
+
+    };
+
+    $.fn.drawSignatureTableToolbar = function(emptySignatureData){
+
+        // add toolbar buttons for table -------------------------------------
+        var tableToolbar = $('<div>', {
+            class: config.sigTableToolsClass
+        }).append(
+                $('<a>', {
+                    class: ['btn', 'btn-primary', 'btn-sm'].join(' '),
+                    text: ' add signature'
+                }).on('click', function(e){
+
+                }).prepend(
+                        $('<i>', {
+                            class: ['fa', 'fa-plus', 'fa-fw'].join(' ')
+                        })
+                    )
+            );
+
+        $(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);
+
+        // add toolbar action for table -------------------------------------
+        var tableToolbarAction = $('<div>', {
+            class: config.sigTableToolsActionClass
+        });
+
+        // create "empty table for new signature
+        var table = $('<table>', {
+            class: ['display', 'compact', config.sigTableClass].join(' ')
+        });
+
+        tableToolbarAction.append(table);
+
+        $(this).append(tableToolbarAction);
+
+
+        table.dataTable( {
+            data: emptySignatureData,
+            paging: false,
+            ordering: false,
+            info: false,
+            searching: false
+        } );
+
+        table.makeEditable();
+    };
+
+
+    // drawsignature table
+    $.fn.drawSignatureTable = function(signatureData){
+
+
+        // create new signature table -------------------------------------------
+
+        var table = $('<table>', {
+            class: ['display', 'compact', config.sigTableClass].join(' ')
+        });
+
+        $(this).append(table);
+
+
+        var signatureTable = table.dataTable( {
+            data: signatureData
+        } );
+
+        $(this).show();
+
+        // make Table editable
+        signatureTable.makeEditable();
+
+
+        return signatureTable;
+    };
+
+    var updateSystemInfoElement = function(tabContentElement){
 
         // get Table cell for system Info
         var systemCell = $(tabContentElement).find('.' + config.mapTabContentCellFirst);
@@ -273,55 +433,87 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
         // TODO replace with backend ajax request
         var systemData = tempFunctionGetSystemData();
+        var emptySystemData = $.extend({}, systemData); // copy object for manipulation
 
-        var signatureData = formatSignatureData(systemData);
+        // fake data for new signature table entry
+        emptySystemData.signatures = [
+            {
+                id: 0,
+                sig: '',
+                typeId: null,
+                sigTypeId: null,
+                created: null,
+                updated: null
+
+            }];
+
+        var signatureData = formatSignatureData(systemData, {});
+
+        var options = {
+            action: {
+                buttonClass: 'btn-default',
+                buttonIcon: 'fa-plus'
+            }
+        };
+
+        var emptySignatureData = formatSignatureData(emptySystemData, options);
 
         // check if signatures exist
         if(signatureData.length > 0){
-            var table = $('<table>', {
-                class: ['display', 'compact', config.sigTableClass].join(' '),
-                id: 'test_table'
-            });
 
-            systemCell.append(table);
-
-
-            table.dataTable( {
-                "data": signatureData,
-                "pageLength": 100,
-                "lengthMenu": [ 5, 10, 25, 50, 75, 100 ],
-                "columnDefs": [
+            // set default values for all signature "datatables"
+            $.extend( $.fn.dataTable.defaults, {
+                pageLength: 100,
+                lengthMenu: [ 5, 10, 25, 50, 75, 100 ],
+                language: {
+                    zeroRecords: 'No signatures found',
+                    lengthMenu:  'Show _MENU_ signatures',
+                    info:        'Showing _START_ to _END_ of _TOTAL_ signatures'
+                },
+                columnDefs: [
                     {
-                        "targets": 0,
+                        targets: 0,
                         //"orderData": 0,
-                        "orderable": true,
-                        "title": "sig",
-                        "width": '20px'
+                        orderable: true,
+                        title: 'sig',
+                        width: '30px'
                     },{
-                        "targets": 1,
-                        "orderable": true,
-                        "title": "type",
-                        "width": '50px'
+                        targets: 1,
+                        orderable: false,
+                        title: 'type',
+                        width: '50px'
                     },{
-                        "targets": 2,
-                        "title": "name/description"
+                        targets: 2,
+                        orderable: false,
+                        title: "name/description"
                     },{
-                        "targets": 3,
-                        "title": "created",
-                        "width": '70px'
+                        targets: 3,
+                        title: 'created',
+                        width: '90px',
+                        className: config.sigTableCounterClass
                     },{
-                        "targets": 4,
-                        "title": "updated",
-                        "width": '70px'
+                        targets: 4,
+                        title: "updated",
+                        width: '90px',
+                        className: config.sigTableCounterClass
+                    },{
+                        targets: 5,
+                        title: '',
+                        orderable: false,
+                        width: '20px',
+                        class: 'center'
                     }
                 ]
             } );
 
-            systemCell.show();
+            // draw system info Element
+            systemCell.updateSystemInfo();
 
-            // make Table editable
-            table.makeEditable();
+            // draw toolbar for signature table
+            systemCell.drawSignatureTableToolbar(emptySignatureData);
 
+            // draw signature table
+            systemCell.drawSignatureTable(signatureData);
 
         }else{
             systemCell.hide();
@@ -329,19 +521,87 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
     };
 
+    /**
+     * update systeminfo
+     */
+    $.fn.updateSystemInfo = function(){
+        var systemInfoWrapper = $(this).find('.' + config.systemInfoElementWrapperClass);
+
+        if(systemInfoWrapper.length === 0){
+            // create system Info Wrapper
+            systemInfoWrapper = $('<div>', {
+                class: config.systemInfoElementWrapperClass,
+                text: 'ddd'
+            });
+
+            $(this).prepend(systemInfoWrapper);
+        }
+
+    };
+
+    $.fn.updateScannedSignaturesBar = function(){
+
+    };
+
     /**
      * make a table editable (in-line-editor)
      */
-    $.fn.makeEditable = function(){
-        // set editor mode
-       // $.fn.editable.defaults.mode = 'inline';
+    $.fn.makeEditable = function(options){
 
-        // cach sige types
+        var table = $(this);
+
+        // default x-editable options for each field
+        //$.fn.editable.defaults.url = '/post';
+        $.fn.editable.defaults.ajaxOptions = {
+            type: 'post',
+            dataType: 'json'
+        };
+
+        // find editable fields
+        var sigIdFields = table.find('.' + config.sigTableEditSigNameInput);
+        var sigTypeFields = table.find('.' + config.sigTableEditSigTypeSelect);
+        var sigNameFields = table.find('.' + config.sigTableEditSigNameSelect);
+
+        // jump to "next" editable field on save
+        var openNextEditDialogOnSave = function(fields){
+            fields.on('save', function(){
+                var that = this;
+                setTimeout(function() {
+                    var nextField = getNextEditableField(that);
+
+                    $(nextField).editable('show');
+                }, 200);
+            });
+        };
+
+        // get the next editable field
+        var getNextEditableField = function(field){
+            return $(field).closest('td').next().find('.editable');
+        };
+
+        // sigTableEditSigNameInput
+        sigIdFields.editable({
+            mode: 'popup',
+            type: 'text',
+            title: 'signature id',
+            name: 'name',
+            validate: function(value) {
+                if($.trim(value) === '') {
+                    return 'Signature id cant be empty';
+                }
+            }
+        });
+
+
+        // cache sige types -----------------------------------------------------
         var sigTypeCache = {};
 
         // Select sig type (master)
-        $(this).find('.' + config.sigTableEditSigTypeSelect).editable({
+        sigTypeFields.editable({
             mode: 'popup',
+            type: 'select',
+            title: 'signature type',
+            name: 'typeId',
             source: function(){
 
                 var systemType = $(this).attr('data-systemtype');
@@ -391,15 +651,32 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                 }
 
                 return availableTypes;
+            },
+            success: function(response, newValue){
+
+                // find related "name" select (same row) and change options
+                var nameSelect = getNextEditableField(this);
+
+                var systemType = $(this).attr('data-systemtype');
+                var areaId = $(this).attr('data-areaid');
+
+                // set new Options
+                var newSelectOptions = getSignatureNames(systemType, areaId, newValue);
+
+                $(nameSelect).editable('option', 'source', newSelectOptions);
+
+                $(nameSelect).editable('setValue', null);
             }
         });
 
-        // cache sig names
+        // cache sig names -----------------------------------------------------------
         var sigNameCache = {};
 
         // Select sig name (slave: depends on sig type)
-        $(this).find('.' + config.sigTableEditSigNameSelect).editable({
+        sigNameFields.editable({
             mode: 'inline',
+            type: 'select',
+            name: 'sigTypeId',
             source: function(){
 
                 var systemType = $(this).attr('data-systemtype');
@@ -413,25 +690,57 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     return sigNameCache[cacheKey];
                 }
 
-                var availableSigs = {};
-
                 // get all available Signature Names
-                if(
-                    config.signatureTypes[systemType] &&
-                    config.signatureTypes[systemType][areaId] &&
-                    config.signatureTypes[systemType][areaId][sigType]
-                ){
-                    availableSigs = sigNameCache[cacheKey] = config.signatureTypes[systemType][areaId][sigType];
-                }
+                var availableSigs = sigNameCache[cacheKey] = getSignatureNames(systemType, areaId, sigType);
 
                 return availableSigs;
             }
         });
 
-        // Textfields
-        $('.' + config.sigTableEditText).editable({
-            anim: "1000"
+        // open next field dialog
+        openNextEditDialogOnSave(sigIdFields);
+        openNextEditDialogOnSave(sigTypeFields);
+
+        // 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);
+
+            currentTable = $(currentTable).dataTable();
+
+            currentTable.fnDeleteRow($(e.target).parents('tr'));
+
         });
+
+        // init signature counter
+        $(this).find('.' + config.sigTableCounterClass).initSignatureCounter();
+
+
+
+    };
+
+    /**
+     * get Signature names out of global
+     * @param systemType
+     * @param areaId
+     * @param sigType
+     * @returns {{}}
+     */
+    var getSignatureNames = function(systemType, areaId, sigType){
+
+        var signatureNames = {};
+
+        if(
+            config.signatureTypes[systemType] &&
+            config.signatureTypes[systemType][areaId] &&
+            config.signatureTypes[systemType][areaId][sigType]
+        ){
+            signatureNames =  config.signatureTypes[systemType][areaId][sigType];
+        }
+
+        return signatureNames;
     };
 
     /**
@@ -473,7 +782,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
      * @param systemData
      * @returns {Array}
      */
-    var formatSignatureData = function(systemData){
+    var formatSignatureData = function(systemData, options){
 
         var formattedData = [];
 
@@ -497,11 +806,19 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
 
                     var tempData = [];
 
-                    // set signature
-                    tempData.push(data.sig);
+                    // set signature name
+                    var sigName = '<a href="#" class="' + config.sigTableEditSigNameInput + '" ';
+                    if(data.id > 0){
+                        sigName += 'data-pk="' + data.id + '" ';
+                    }
+                    sigName += '>' + data.sig + '</a>';
+
+                    tempData.push(sigName);
 
                     var sigType = '<a href="#" class="' + config.sigTableEditSigTypeSelect + '" ';
-                    sigType += 'data-type="select" ';
+                    if(data.id > 0){
+                        sigType += 'data-pk="' + data.id + '" ';
+                    }
                     sigType += 'data-systemType="' + systemType + '" ';
                     sigType += 'data-areaId="' + areaId + '" ';
                     sigType += 'data-value="' + data.sigTypeId + '" ';
@@ -511,7 +828,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     tempData.push( sigType );
 
                     var sigElement = '<a href="#" class="' + config.sigTableEditSigNameSelect + '" ';
-                    sigElement += 'data-type="select" ';
+                    if(data.id > 0){
+                        sigElement += 'data-pk="' + data.id + '" ';
+                    }
                     sigElement += 'data-systemType="' + systemType + '" ';
                     sigElement += 'data-areaId="' + areaId + '" ';
                     sigElement += 'data-sigTypeId="' + data.sigTypeId + '" ';
@@ -527,6 +846,21 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     // set Sig updated
                     tempData.push( data.updated );
 
+                    // action icon
+                    var actionButtonClass = 'btn-danger';
+                    var actionButtonIcon = 'fa-minus';
+                    if(options.action){
+                        actionButtonClass = options.action.buttonClass;
+                        actionButtonIcon = options.action.buttonIcon;
+                    }
+
+                    var deleteButton = '<a class="btn ' + actionButtonClass + ' btn-xs" href="#">';
+                    deleteButton += '<i class="fa ' + actionButtonIcon + '"></i>';
+                    deleteButton += '</a>';
+
+                    tempData.push( deleteButton );
+
+
                     formattedData.push(tempData);
                 });
             }
@@ -557,7 +891,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     sig: 'GDF',
                     typeId: 1,
                     sigTypeId: 2,
-                    created: 1415215936,
+                    created: 1325376000,
                     updated: 1415215936
 
                 },{
@@ -565,7 +899,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     sig: 'HFS',
                     typeId: 1,
                     sigTypeId: 3,
-                    created: 1415215936,
+                    created: 1415989953,
                     updated: 1415215936
 
                 },{
@@ -577,7 +911,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 12,
                     sig: 'LLD',
                     typeId: 1,
                     sigTypeId: 1,
@@ -585,15 +919,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 13,
                     sig: 'DGE',
                     typeId: 1,
                     sigTypeId: 1,
-                    created: 1415215936,
+                    created: 1394613252,
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 14,
                     sig: 'EXS',
                     typeId: 1,
                     sigTypeId: 1,
@@ -601,15 +935,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 15,
                     sig: 'CVS',
                     typeId: 3,
                     sigTypeId: 1,
                     created: 1415215936,
-                    updated: 1415215936
+                    updated: 1386934983
 
                 },{
-                    id: 8,
+                    id: 16,
                     sig: 'GGD',
                     typeId: 2,
                     sigTypeId: 1,
@@ -617,12 +951,12 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 18,
                     sig: 'OKD',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
-                    updated: 1415215936
+                    updated: 1394613252
 
                 },{
                     id: 8,
@@ -633,15 +967,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     updated: 1415215936
 
                 },{
-                    id: 8,
+                    id: 20,
                     sig: 'ASW',
                     typeId: 1,
                     sigTypeId: 1,
                     created: 1415215936,
-                    updated: 1415215936
+                    updated: 1386934983
 
                 },{
-                    id: 8,
+                    id: 22,
                     sig: 'NFG',
                     typeId: 2,
                     sigTypeId: 2,
@@ -667,14 +1001,21 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         // get all active map elements for module
         var mapElements = getMaps(this);
 
+        var currentUserData = null;
+
+        // current user data
+        if(userData.currentUserData){
+            currentUserData = userData.currentUserData;
+        }
+
         // get map Data
         $.each(mapElements, function(i, mapElement){
 
             var mapId = parseInt( $(mapElement).attr('data-mapid') );
 
-            var mapUserData = {};
+            var mapUserData = null;
             // get user data for each active map
-            $.each(userData, function(j, tempMapData){
+            $.each(userData.mapUserData, function(j, tempMapData){
 
                 if(tempMapData.config.id === mapId){
                     // map userdata found
@@ -683,7 +1024,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
             });
 
             // update map
-            $(mapElement).updateUserData(mapUserData);
+            if(mapUserData){
+                $(mapElement).updateUserData(mapUserData, currentUserData);
+            }
         });
     };
 
@@ -698,11 +1041,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].join(' ')
+                        class: ['col-xs-12', 'col-sm-8', config.mapTabContentCellFirst, config.mapTabContentCell].join(' ')
                     })
                 ).append(
                     $('<div>', {
-                        class: ['col-xs-6', 'col-sm-4', config.mapTabContentCellSecond].join(' ')
+                        class: ['col-xs-6', 'col-sm-4', config.mapTabContentCellSecond, config.mapTabContentCell].join(' ')
                     })
                 );
 
@@ -742,7 +1085,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     $( tabContentElements[0] ).initMap(mapData[0]);
 
                     // check for "new map" action before tap-change
-                    $('#' + config.mapTabBarId).find('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
+                    getTabElements().on('show.bs.tab', function (e) {
 
                         var mapIndex = parseInt( $(e.target).attr('data-map-index') );
 
@@ -756,16 +1099,14 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
                     });
 
                     // load new map right after tab-change
-                    $('#' + config.mapTabBarId).find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+                    getTabElements().on('shown.bs.tab', function (e) {
 
                         var mapIndex = parseInt( $(e.target).attr('data-map-index') );
 
-                        if(mapIndex > 0){
-                            var mapId = mapData[mapIndex].config.id;
-                            var currentTabContentElement = $('#' + config.mapTabIdPrefix + mapId);
+                        var mapId = mapData[mapIndex].config.id;
+                        var currentTabContentElement = $('#' + config.mapTabIdPrefix + mapId);
 
-                            $( currentTabContentElement).initMap( mapData[mapIndex]);
-                        }
+                        $( currentTabContentElement).initMap( mapData[mapIndex]);
 
                     });
 
@@ -824,11 +1165,20 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
             $(this).loadMap(mapData);
 
             // init custom scrollbars
-            var scrollableElement = $(this).find('.' + config.mapWrapperClass);
-            initCutomScrollbar( scrollableElement );
+            $(this).initMapScrollbar();
+
         });
     };
 
+    /**
+     * init scrollbar for Map element
+     */
+    $.fn.initMapScrollbar = function(){
+        // get Map Scrollbar
+        var scrollableElement = $(this).find('.' + config.mapWrapperClass);
+        initCutomScrollbar( scrollableElement );
+    };
+
     /**
      * init a custom scrollbar
      * @param scrollableElement
@@ -838,9 +1188,24 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo
         // init custom scrollbars
         $(scrollableElement).mCustomScrollbar({
             axis:"x",
-            theme:"light-thick"
+            theme:"light-thick",
+            scrollButtons:{
+                enable:true
+            }
         });
+        console.log(scrollableElement)
+    };
 
+    /**
+     * scroll to a specific position in the map
+     * @returns {*} // string or id
+     */
+    $.fn.scrollTo = function(position){
+        return this.each(function(i, mapElement){
+            console.log(this)
+
+            $(this).mCustomScrollbar('scrollTo', position);
+        });
     };
 
 });
\ No newline at end of file
diff --git a/js/app/render.js b/js/app/render.js
index baddd6c4..1c6f40fb 100644
--- a/js/app/render.js
+++ b/js/app/render.js
@@ -44,6 +44,9 @@ define(["jquery", "lib/mustache", "jqueryUI"], function($, Mustache) {
                     case 'prepend':
                         config.position.prepend(content);
                         break;
+                    case 'before':
+                        config.position.before(content);
+                        break;
                     case 'after':
                         config.position.after(content);
                         break;
diff --git a/node_modules/.bin/build.js b/node_modules/.bin/build.js
index 89e11675..6b4538c7 100644
--- a/node_modules/.bin/build.js
+++ b/node_modules/.bin/build.js
@@ -33,32 +33,39 @@
         }
     ],
     "paths": {
-        //"lib": "lib",
-        // "app": "app",
         "layout": "layout",
         "jquery": "lib/jquery-1.11.1.min",
         //"jquery": "lib/jquery-2.1.1.min",
-        "jqueryUI": "lib/jquery-ui.min",
-        "bootstrap": "lib/bootstrap",
+        //"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"
+        "datatables": "lib/jquery.dataTables.min",
+        "datatablesBootstrap": "lib/dataTables.bootstrap", // not used (bootstrap style)
+        "xEditable": "lib/bootstrap-editable.min"
     },
     shim: {
-        bootstrap: {
-            deps: [ "jquery" ]
-        },
-        jqueryUI: {
-            "export": "$",
-            deps: [ "jquery" ]
-        },
-        customScrollbar: {
-            deps: [ "jquery" ]
-        },
-        "dataTables": {
+        "jqueryUI": {
+            export:"$",
             deps: ["jquery"]
+        },
+        "bootstrap": {
+            deps: ["jquery", "jqueryUI"]
+        },
+        "customScrollbar": {
+            deps: ["jquery"]
+        },
+        "datatables": {
+            deps: ["jquery"]
+        },
+        "datatablesBootstrap": {
+            deps: ["datatables"]
+        },
+        "xEditable": {
+            deps: ["bootstrap"]
         }
     },
 
diff --git a/sass/_colors.scss b/sass/_colors.scss
index 46ad21dd..ffe4a227 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -22,9 +22,12 @@ $blue:                  #428bca;
 $teal:                  #568a89;
 $teal-dark:             #477372;
 $teal-darker:           #375959;
+$teal-darkest:          #212C30;
+
 
 // green
 $green:                 #5cb85c;
+$green-dark:            #4f9e4f;
 
 // red
 $red:                   #d9534f;
@@ -52,8 +55,8 @@ $wh-color-wolfryet:     $orange;
 $wh-color-cataclysmic:  $yellow-lighter;
 $wh-color-blackhole:    $gray-darkest;
 
-$brand-primary:         $teal-darker !default;
-$brand-success:         #5cb85c !default;
+$brand-primary:         $teal-dark !default;
+$brand-success:         $green-dark !default;
 $brand-info:            #5bc0de !default;
-$brand-warning:         #f0ad4e !default;
+$brand-warning:         $orange !default;
 $brand-danger:          #d9534f !default;
\ No newline at end of file
diff --git a/sass/bootstrap/_popovers.scss b/sass/bootstrap/_popovers.scss
index 6d6bed5d..fde5e7c0 100644
--- a/sass/bootstrap/_popovers.scss
+++ b/sass/bootstrap/_popovers.scss
@@ -38,6 +38,7 @@
   background-color: $popover-title-bg;
   border-bottom: 1px solid darken($popover-title-bg, 5%);
   border-radius: 5px 5px 0 0;
+  color: $gray-light
 }
 
 .popover-content {
diff --git a/sass/layout/_main.scss b/sass/layout/_main.scss
index 2c804f72..3b537f55 100644
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -6,15 +6,16 @@ body{
 }
 
 a{
-  color: #568a89;
+  color: $teal-dark;
 
   &:hover{
-    color: $teal-darker;
+    color: $teal;
   }
 }
 
+// Maps module ===================================================
 #pf-map-module{
-  margin: 0px;
+  margin: 30px 0 0 0;
   padding: 10px;
   // background: rgba($gray, 0.3); // semi transparent
 
@@ -39,3 +40,18 @@ a{
 
 }
 
+// Tooltip ======================================================
+.tooltip-inner{
+  opacity: 0.8;
+  color: $teal;
+  background-color: $gray;
+  font-family: 'Oxygen Bold';
+  padding: 5px 5px;
+  @include border-radius(5px);
+
+}
+
+.tooltip.top .tooltip-arrow{
+  border-top-color: $gray-light;
+}
+
diff --git a/sass/layout/_map.scss b/sass/layout/_map.scss
index ee971b7d..9c2acb7a 100644
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -192,7 +192,6 @@
 
   .pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
     @include box-shadow($yellow-lighter 0px 0px 8px 0px);
-    @include transition-duration(0.2s);
   }
 
   // system status ======================================================
@@ -312,21 +311,6 @@
     }
   }
 
-  // Tooltip ======================================================
-  .tooltip-inner{
-    opacity: 0.8;
-    color: $teal;
-    background-color: $gray;
-    font-family: 'Oxygen Bold';
-    padding: 5px 5px;
-    @include border-radius(5px);
-
-  }
-
-  .tooltip.top .tooltip-arrow{
-    border-top-color: $gray-light;
-  }
-
 }
 
 // dialoges =======================================================
diff --git a/sass/layout/_system-info.scss b/sass/layout/_system-info.scss
index 97b30e6b..ab585bde 100644
--- a/sass/layout/_system-info.scss
+++ b/sass/layout/_system-info.scss
@@ -18,4 +18,37 @@
   .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/custom-scrollbar/_mCustomScrollbar.scss b/sass/library/custom-scrollbar/_mCustomScrollbar.scss
index bb146ef5..7ad8d72a 100644
--- a/sass/library/custom-scrollbar/_mCustomScrollbar.scss
+++ b/sass/library/custom-scrollbar/_mCustomScrollbar.scss
@@ -301,7 +301,7 @@
 }
 
 .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight {
-  background-image: url(mCSB_buttons.png);
+  background-image: url(../img/custom-scrollbar/mCSB_buttons.png);
   background-repeat: no-repeat;
   opacity: 0.4;
   filter: "alpha(opacity=40)";
diff --git a/sass/library/data-tables/_dataTables-fontAwesome.scss b/sass/library/data-tables/_dataTables-fontAwesome.scss
index bcefb5aa..f44f13bb 100644
--- a/sass/library/data-tables/_dataTables-fontAwesome.scss
+++ b/sass/library/data-tables/_dataTables-fontAwesome.scss
@@ -19,6 +19,7 @@ table.dataTable thead th.sorting_desc:after {
   right: 8px;
   display: block;
   font-family: FontAwesome;
+  margin-top: -5px;
 }
 
 table.dataTable thead th:after {
@@ -29,7 +30,7 @@ table.dataTable thead th.sorting:after {
   content: "\f0dc";
   color: $green;
   font-size: 0.8em;
-  padding-top: 0.12em;
+  margin-top: -5px;
 }
 table.dataTable thead th.sorting_asc:after {
   content: "\f0de";
diff --git a/sass/library/data-tables/_dataTables.scss b/sass/library/data-tables/_dataTables.scss
index 451a8856..8ffeab24 100644
--- a/sass/library/data-tables/_dataTables.scss
+++ b/sass/library/data-tables/_dataTables.scss
@@ -96,6 +96,12 @@ table.dataTable.display tbody tr.odd:hover,
 table.dataTable.display tbody tr.even:hover {
   background-color: $orange;
   color: $gray-darker;
+
+
+  a {
+    color: $gray-darker !important;
+    border-bottom: dashed 1px $gray-darker !important;
+  }
 }
 table.dataTable.hover tbody tr:hover.selected,
 table.dataTable.hover tbody tr.odd:hover.selected,
@@ -119,7 +125,7 @@ table.dataTable.display tbody tr.selected > .sorting_3 {
   background-color: #acbad4;
 }
 table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
-  background-color: darken($gray-darker, 4%);
+  background-color: $teal-darkest;
 }
 table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
   background-color: #f3f3f3;
@@ -137,7 +143,7 @@ table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.orde
   background-color: #a9b6d0;
 }
 table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
-  background-color: darken($gray-darker, 4%);
+  background-color: $teal-darkest;
 }
 table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
   background-color: #fbfbfb;
diff --git a/sass/library/x-editable/_bootstrap-editable.scss b/sass/library/x-editable/_bootstrap-editable.scss
index 54265df6..004e150c 100644
--- a/sass/library/x-editable/_bootstrap-editable.scss
+++ b/sass/library/x-editable/_bootstrap-editable.scss
@@ -116,7 +116,7 @@
 
 /* IOS-style clear button for text inputs */
 .editable-clear-x {
-  background: url('../img/clear.png') center center no-repeat;
+  //background: url('../img/clear.png') center center no-repeat;
   display: block;
   width: 13px;
   height: 13px;
@@ -162,7 +162,7 @@
 a.editable-click,
 a.editable-click:hover {
   text-decoration: none;
-  border-bottom: dashed 1px $teal-darker;
+  border-bottom: dashed 1px $teal;
 }
 
 .editable-click.editable-disabled,
@@ -175,7 +175,7 @@ a.editable-click.editable-disabled:hover {
 
 .editable-empty, .editable-empty:hover, .editable-empty:focus{
   font-style: italic;
-  color: #DD1144;
+  color: $red;
   /* border-bottom: none; */
   text-decoration: none;
 }
diff --git a/sass/smartadmin/_main.scss b/sass/smartadmin/_main.scss
index 02072c99..7fb4464c 100644
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -1596,7 +1596,7 @@ input[type="text"]:focus + .input-group-addon {
 .progress .progress-bar {
   position: absolute;
   overflow: hidden;
-  line-height: 20px;
+  line-height: 18px;
 }
 
 .progress .progressbar-back-text {
@@ -1699,7 +1699,7 @@ input[type="text"]:focus + .input-group-addon {
 	position: relative;
 	margin-bottom: 20px;
 	overflow: hidden;
-	height: 22px;
+	height: 18px;
 	background: $gray-lighter;
 	box-shadow: 0 1px 0 transparent, 0 0 0 1px lighten( $gray-light, 29%) inset; 
 	-webkit-box-shadow: 0 1px 0 transparent, 0 0 0 1px lighten( $gray-light, 29%) inset;
diff --git a/templates/form/progress.html b/templates/form/progress.html
new file mode 100644
index 00000000..a95b4e99
--- /dev/null
+++ b/templates/form/progress.html
@@ -0,0 +1,12 @@
+{{#headlineRight}}
+    <small class="pull-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>
+</div>
\ No newline at end of file
diff --git a/templates/modules/tabs.html b/templates/modules/tabs.html
index c2127ead..0164e3ae 100644
--- a/templates/modules/tabs.html
+++ b/templates/modules/tabs.html
@@ -9,8 +9,8 @@
     {{/tabs}}
 </ul>
 
-<div class="tab-content" data-map-tabs="{{id}}">
+<div class="tab-content" data-map-tabs="{{id}}" >
     {{#tabs}}
-        <div role="tabpanel" class="tab-pane {{contentClass}} {{#active}}active{{/active}}" id="pf-map-tab-{{id}}"></div>
+        <div role="tabpanel" class="tab-pane {{contentClass}} {{#active}}active{{/active}}" data-map-index="{{index}}" id="pf-map-tab-{{id}}"></div>
     {{/tabs}}
 </div>
\ No newline at end of file