diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9365ac1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,19 @@
+# nmap-webui
+A simple web interface for Nmap for network discovery and monitoring
+
+## Dependencies
+
+As most of the `nmap` features requires to be `root`, you will have to run this command to avoid the need to specify the password when the interface will invocate `nmap`.
+
+```bash
+# Authorize nmap to run as root without password
+echo "$USER ALL = NOPASSWD: $(which nmap)" | sudo tee -a /etc/sudoers.d/nmap
+```
+
+Allow web server to save scans:
+
+```bash
+mkdir scans
+chown www-data scans
+chmod 750 scans
+```
\ No newline at end of file
diff --git a/config.php b/config.php
index 9c4ffd0..f0ec42f 100644
--- a/config.php
+++ b/config.php
@@ -1,5 +1,5 @@
 <?php
-
+$port         = (($_SERVER['REQUEST_SCHEME'] == "http" && $_SERVER['SERVER_PORT'] == 80) || ($_SERVER['REQUEST_SCHEME'] == "https" && $_SERVER['SERVER_PORT'] == 443)) ? "" : ":{$_SERVER['SERVER_PORT']}";
 $BASEDIR = "{$_SERVER['REQUEST_SCHEME']}://{$_SERVER['SERVER_NAME']}$port" . dirname($_SERVER['SCRIPT_NAME']);
 $SCANSDIR = "scans";
 $STYLESHEETSDIR = "stylesheets";
diff --git a/style.css b/style.css
index 8498be7..f59529b 100644
--- a/style.css
+++ b/style.css
@@ -15,3 +15,58 @@ body {
   fill: currentColor;
   margin: -0.4em !important;
 }
+
+.tagify {
+  width: 100%;
+  border-radius: 0.28571429rem;
+  --tags-focus-border-color: #85b7d9;
+  --placeholder-color: rgba(191, 191, 191, 0.87);
+  --placeholder-color-focus: rgba(115, 115, 115, 0.87);
+}
+
+.ui.table {
+  caption-side: bottom;
+}
+
+.ui.label {
+  margin: 0.14285714em;
+}
+
+.ui.label > .detail {
+  margin-left: 0.3em;
+  text-transform: capitalize;
+}
+
+.ui.form .fields > .field {
+  width: 100%;
+}
+
+.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
+  margin-top: 0;
+}
+
+.ui.dropdown.label {
+  min-width: auto;
+}
+
+.ui.dropdown.label > .remove.icon {
+  right: 2.3em;
+}
+
+.toast-container .ui.header {
+  text-transform: capitalize;
+}
+
+.share-size {
+  --free-ratio: calc(var(--free) / var(--total));
+  --used-percent: calc(100% - 100% * var(--free-ratio));
+  --color: hsl(calc(120 * var(--free-ratio)) 100% 50%);
+  background-image: linear-gradient(
+    to right,
+    var(--color) var(--used-percent),
+    transparent var(--used-percent),
+    transparent
+  ) !important;
+  text-align: center !important;
+  font-size: .64285714rem !important;
+}
\ No newline at end of file
diff --git a/stylesheets/lanScan.xsl b/stylesheets/lanScan.xsl
index db939e2..4db20a3 100644
--- a/stylesheets/lanScan.xsl
+++ b/stylesheets/lanScan.xsl
@@ -5,6 +5,7 @@
   version="1.1">
 
   <xsl:import href="services.xsl" />
+  <xsl:import href="toast.xsl" />
 
   <xsl:output method="html" encoding="UTF-8" />
   <xsl:output indent="yes" />
@@ -19,7 +20,7 @@
     <xsl:variable
       name="current" select="." />
     <xsl:variable name="init"
-      select="document(concat($base, 'scans/', $targets, '.xml'))/nmaprun" />
+      select="document(concat($base, 'scans/', translate($targets,'/', '!'), '.xml'))/nmaprun" />
 
     <html lang="fr">
       <head>
@@ -44,25 +45,25 @@
         <script
           src="https://cdn.datatables.net/v/se/jszip-3.10.1/dt-2.1.8/b-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/fc-5.0.3/fh-4.0.1/r-3.0.3/datatables.min.js"></script>
         <script>
-          DataTable.ext.type.detect.unshift(function (d) {
-          return /[\d]+\.[\d]+\.[\d]+\.[\d]+/.test(d)
-          ? 'ipv4-address'
-          : null;
-          });
-
-          DataTable.ext.type.order['ipv4-address-pre'] = function (ipAddress) {
-          [a, b, c, d] = ipAddress.split(".").map(Number)
-          return 16777216*a + 65536*b + 256*c + d;
-          };
+DataTable.ext.type.detect.unshift(function (d) {
+    return /[\d]+\.[\d]+\.[\d]+\.[\d]+/.test(d)
+        ? 'ipv4-address'
+        : null;
+});
+    
+DataTable.ext.type.order['ipv4-address-pre'] = function (ipAddress) {
+    [a, b, c, d] = ipAddress.split(".").map(Number)
+    return 16777216*a + 65536*b + 256*c + d;
+};
         </script>
       </head>
 
       <body>
         <nav class="ui inverted secondary menu">
-          <a href="." class="button item logo">lan<svg class="logo" version="1.1" id="Layer_1"
+          <h3><a href="." class="button item logo">lan<svg class="logo" version="1.1" id="Layer_1"
               x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" width="40" height="40"
               xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs206"></defs><g id="g998" transform="matrix(0,0.04687491,-0.04687491,0,24,2.2682373e-5)"><g id="g147"><g id="g145"><path d="m 322.065,92.046 c -46.24,0 -83.851,37.619 -83.851,83.857 v 168.712 c 0,25.224 -21.148,45.745 -46.372,45.745 -25.224,0 -46.372,-20.521 -46.372,-45.745 V 199.464 h -38.114 v 145.151 c 0,46.24 38.246,83.859 84.486,83.859 46.24,0 84.486,-37.619 84.486,-83.859 V 175.903 c 0,-25.223 20.514,-45.743 45.737,-45.743 25.223,0 45.737,20.521 45.737,45.743 v 134.092 h 38.114 V 175.903 c 0,-46.239 -37.611,-83.857 -83.851,-83.857 z" id="path143"></path></g></g><g id="g153"><g id="g151"><path d="M 144.198,0 H 108.625 C 98.101,0 89.568,8.746 89.568,19.271 c 0,1.157 0.121,2.328 0.318,3.598 h 73.052 c 0.197,-1.27 0.318,-2.441 0.318,-3.598 C 163.256,8.746 154.723,0 144.198,0 Z" id="path149"></path></g></g><g id="g159"><g id="g157"><path d="m 420.183,486.591 h -71.731 c -0.626,2.541 -0.978,4.077 -0.978,6.176 0,10.525 8.532,19.234 19.057,19.234 h 35.573 c 10.525,0 19.057,-8.709 19.057,-19.234 0,-2.098 -0.352,-3.635 -0.978,-6.176 z" id="path155"></path></g></g><g id="g165"><g id="g163"><rect x="87.027" y="41.925999" width="80.040001" height="138.481" id="rect161"></rect></g></g><g id="g171"><g id="g169"><rect x="344.93301" y="329.052" width="80.040001" height="138.481" id="rect167"></rect></g></g><g id="g173"></g><g id="g175"></g><g id="g177"></g><g id="g179"></g><g id="g181"></g><g id="g183"></g><g id="g185"></g><g id="g187"></g><g id="g189"></g><g id="g191"></g><g id="g193"></g><g id="g195"></g><g id="g197"></g><g id="g199"></g><g id="g201"></g></g></svg>
-    can</a>
+    can</a></h3>
         </nav>
 
         <main class="ui main container inverted segment">
@@ -71,13 +72,13 @@
           </h1>
 
           <table id="scanResultsTable" style="width:100%" role="grid"
-            class="ui sortable small table">
+            class="ui sortable small striped table">
             <thead>
               <tr>
                 <th style="width: min-width">Etat</th>
                 <th>Adresse IP</th>
                 <th>Nom</th>
-                <th>Fabricant</th>
+                <th>Constructeur</th>
                 <th class="six wide">Services</th>
                 <th style="width: min-width"></th>
               </tr>
@@ -107,20 +108,10 @@ var table = $('#scanResultsTable').DataTable({
 table.order([1, 'asc']).draw()
 
 $('.ui.dropdown').dropdown()
-
-function hostScanning(link) {
-    link.getElementsByTagName('i')[0].className = 'loading spinner icon'
-    $.toast({
-        title      : 'Scan en cours...',
-        message    : 'Merci de patienter',
-        class      : 'info',
-        showIcon   : 'satellite dish',
-        displayTime: 0,
-        closeIcon  : true,
-        position   : 'bottom right',
-    })
-}
         </script>
+        <xsl:apply-templates select="runstats">
+            <xsl:with-param name="init" select="$init"/>
+        </xsl:apply-templates>
 
       </body>
 
@@ -184,7 +175,15 @@ function hostScanning(link) {
       <td>
         <xsl:value-of select="address[@addrtype='mac']/@vendor" />
       </td>
-      <td></td>
+        <td>
+            <xsl:apply-templates select="$initHost/ports/port[not(@portid=$currentHost/ports/port/@portid)][not(state/@state='closed')] | $currentHost/ports/port" mode="service">
+                <xsl:with-param name="initHost" select="$initHost"/>
+                <xsl:with-param name="currentHost" select="$currentHost"/>
+                <xsl:with-param name="hostAddress" select="$hostAddress"/>
+                <xsl:with-param name="class" select="'ui mini label'"/>
+                <xsl:sort select="number(@portid)" order="ascending"/>
+            </xsl:apply-templates>
+        </td>
       <td>
         <a class="ui mini icon teal icon button">
           <xsl:attribute name="href">scan.php?host=<xsl:value-of select="address/@addr" /></xsl:attribute>
diff --git a/stylesheets/services.xsl b/stylesheets/services.xsl
index a4cec9f..e94e3d4 100644
--- a/stylesheets/services.xsl
+++ b/stylesheets/services.xsl
@@ -17,6 +17,7 @@
             <xsl:attribute name="class">
                 <xsl:value-of select="$class"/>
                 <xsl:text> </xsl:text>
+                <xsl:if test="$currentPort/script[@id='smb-shares-size']/table">dropdown button share-size</xsl:if>
                 <xsl:choose>
                     <xsl:when test="$currentPort/script[@id='http-info']/elem[@key='status']>=500">red</xsl:when>
                     <xsl:when test="$currentPort/script[@id='http-info']/elem[@key='status']>=400">orange</xsl:when>
@@ -25,10 +26,6 @@
                     <xsl:when test="$currentPort/state/@state='filtered'">orange</xsl:when>
                     <xsl:otherwise>red</xsl:otherwise>
                 </xsl:choose>
-                <xsl:choose>
-                    <xsl:when test="$currentPort/script[@id='smb-shares-size']/table"> mini dropdown button share-size</xsl:when>
-                    <xsl:otherwise> small</xsl:otherwise>
-                </xsl:choose>
             </xsl:attribute>
             <xsl:if test="$currentPort/script[@id='smb-shares-size']/table">
                 <xsl:attribute name="style">
diff --git a/stylesheets/toast.xsl b/stylesheets/toast.xsl
new file mode 100644
index 0000000..5753551
--- /dev/null
+++ b/stylesheets/toast.xsl
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet
+    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns:xs="http://www.w3.org/2001/XMLSchema"
+    version="1.1">
+
+    <xsl:template match="runstats">
+        <xsl:param name="init"/>
+        <script>
+            <xsl:if test="finished/@summary">
+$.toast({
+    title      : '<xsl:value-of select="finished/@exit"/>',
+    message    : `<xsl:value-of select="finished/@summary"/>`,
+    showIcon   : 'satellite dish',
+    displayTime: 0,
+    closeIcon  : true,
+    position   : 'bottom right',
+})
+            </xsl:if>
+            <xsl:if test="finished/@errormsg">
+$.toast({
+    title      : '<xsl:value-of select="finished/@exit"/>',
+    message    : `<xsl:value-of select="finished/@errormsg"/>`,
+    showIcon   : 'exclamation triangle',
+    class      : 'error',
+    displayTime: 0,
+    closeIcon  : true,
+    position   : 'bottom right',
+})
+            </xsl:if>
+            <xsl:if test="$init/runstats/finished">
+$.toast({
+    message    : 'Comparaison avec les résultats du ' + new Date("<xsl:value-of select="$init/runstats/finished/@timestr"/>").toLocaleString(),
+    class      : 'info',
+    showIcon   : 'calendar',
+    displayTime: 0,
+    closeIcon  : true,
+    position   : 'bottom right',
+})
+            </xsl:if>
+        </script>
+    </xsl:template>
+
+</xsl:stylesheet>
\ No newline at end of file
