diff --git a/sipa/templates/usersuite/_get_port_row.html b/sipa/templates/usersuite/_get_port_row.html
index dee6a53a..60e13828 100644
--- a/sipa/templates/usersuite/_get_port_row.html
+++ b/sipa/templates/usersuite/_get_port_row.html
@@ -2,12 +2,12 @@
 <tr>
 
     <td>
-        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="change" hx-target="next .error" hx-swap="innerHTML" value="{{ port_forwarding[0] }}">
-        <label id="error_sorc_port" class='error' for="source_port"></label>
+        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="change" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[0] }}">
+        <label class='error-label' for="source_port"></label>
     </td>
          <td>
-             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error" hx-swap="innerHTML" value="{{ port_forwarding[1] }}">
-             <label id="error_dest" class='error' for="dest_port"></label>
+             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML" value="{{ port_forwarding[1] }}">
+             <label class='error-label' for="dest_port"></label>
     </td>
      <td><input type="text" id="source ip" placeholder="source ip" hx-post="/control/ip" value="{{ port_forwarding[2] }}"></td>
     <td>
@@ -22,14 +22,17 @@
 <tr>
 
     <td>
-        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="change" hx-target="next .error" hx-swap="innerHTML">
-        <label id="error_sorc_port" class='error' for="source_port"></label>
+        <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
+        <label class='error-label' for="source_port"></label>
     </td>
          <td>
-             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error" hx-swap="innerHTML">
-             <label id="error_dest" class='error' for="dest_port"></label>
+             <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-trigger="keyup delay:500ms" hx-indicator="#ind" hx-target="next .error-label" hx-swap="innerHTML">
+             <label class='error-label' for="dest_port"></label>
     </td>
-     <td><input type="text" id="source ip" placeholder="source ip" hx-post="/control/ip"></td>
+     <td>
+         <input type="text" name="source_ip" placeholder="source ip" hx-post="/control/ip" hx-trigger="keyup delay:500ms" hx-target="next .error-label" hx-swap="innerHTML">
+        <label class='error-label'></label>
+     </td>
     <td>
         <fieldset>
          <label for="udp">UDP</label>
diff --git a/sipa/templates/usersuite/_port_forwardings.html b/sipa/templates/usersuite/_port_forwardings.html
index ecb3ea5b..ff4671a9 100644
--- a/sipa/templates/usersuite/_port_forwardings.html
+++ b/sipa/templates/usersuite/_port_forwardings.html
@@ -2,7 +2,7 @@
 <h2 id="port-forwardings">port forwardings</h2>
 {% if table %}
 <div class="panel panel-default">
-    <table class="panel-body table table-striped table-hover">
+    <table class="panel-body table table-striped">
         <thead>
             <tr>
             <th>{{ _("source port") }}</th>
@@ -12,34 +12,7 @@ <h2 id="port-forwardings">port forwardings</h2>
             <th>{{ _("option") }}</th>
             </tr>
         </thead>
-        {% if  port_forwadings is none %}
-        <from hx-post="">
-            <tr>
-
-            <td>
-                <input type="number" min="1" id="source_port" name="port" hx-post="/control/port" hx-trigger="change" hx-target="next .error" hx-swap="innerHTML">
-                <label id="error_sorc_port" class='error' for="source_port"></label>
-            </td>
-            <td>
-                <input type="number" min="1" id="dest_port" name="port" hx-post="/control/port" hx-indicator="#ind" hx-target="next .error" hx-swap="innerHTML">
-                <label id="error_dest" class='error' for="dest_port"></label>
-            </td>
-            <td><input type="text" id="source ip" placeholder="source ip" hx-post="/control/ip"></td>
-            <td>
-                <fieldset>
-                <label for="udp">UDP</label>
-                <input type="radio" name="prot" id="udp" checked>
-                <label for="tcp">TCP</label>
-                <input type="radio" name="prot" id="tcp">
-                </fieldset>
-            </td>
-            <td><button type="submit">apply</button></td>
-        </tr >
-        </from>
-            <tr>
-            <td><button hx-post="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="hide">hide</button></td>
-        </tr>
-        {% else %}
+        {% if  port_forwadings  is not none %}
             {% for port_forwad in port_forwardings %}
         <tr hx-get="/usersuite/get_row" hx-trigger="" hx-target="this" hx-swap="outerHTML">
             <td>
@@ -53,17 +26,18 @@ <h2 id="port-forwardings">port forwardings</h2>
                 <label>{{ port_forwad[3] }}</label>
             </td>
             <td>
-                <button aria-label="edit">
+                <button class="edit-button" aria-label="edit">
                 <span class="glyphicon glyphicon-pencil pull-right"></span>
                 </button>
             </td>
         </tr>
+
+            {% endfor %}
+        {% endif %}
         <tr hx-get="/usersuite/get_row" hx-swap="beforebegin">
             <td colspan="3"><button type="submit">add new port forwardings</button></td>
             <td colspan="2"><button hx-post="/usersuite/show-port-forwardings" hx-target="#port_forward" hx-swap="outerHTML" hx-params="hide">hide</button></td>
         </tr>
-            {% endfor %}
-        {% endif %}
     </table>
 </div>
 {% else %}