diff --git a/plinth/modules/firewall/templates/firewall.html b/plinth/modules/firewall/templates/firewall.html
index e9a08949e..faa92a759 100644
--- a/plinth/modules/firewall/templates/firewall.html
+++ b/plinth/modules/firewall/templates/firewall.html
@@ -40,7 +40,7 @@
 
     <div class="row">
       <div class="col-lg-8">
-        <table class='table table-autowidth table-striped'>
+        <table class='table table-autowidth'>
           <thead>
             <th>{% trans "Service/Port" %}</th>
             <th>{% trans "Status" %}</th>
@@ -48,40 +48,46 @@
 
           <tbody>
             {% for service in services|dictsort:"name" %}
-              {% if service.ports %}
-                <tr>
-                  <td><strong>{{ service.name }}</strong></td>
-                  <td>
-                    {% if service.is_enabled %}
-                      <span class='label label-success'>
-                        {% trans "Enabled" %}</span>
-                    {% else %}
-                      <span class='label label-warning'>
-                        {% trans "Disabled" %}</span>
-                    {% endif %}
-                  </td>
-                </tr>
-
-                {% for port in service.ports %}
+              {% if service.is_enabled %}
+                {% if service.ports %}
                   <tr>
-                    <td class='cell-indented'><em>{{ port }}</em></td>
-                    <td>
-                      {% if port in internal_enabled_services and port in external_enabled_services %}
+                    <td><strong>{{ service.name }}</strong></td>
+                    <td >
+                      {% if service.is_enabled %}
                         <span class='label label-success'>
-                          {% trans "Permitted" %}</span>
-                      {% elif port in internal_enabled_services %}
-                        <span class='label label-warning'>
-                          {% trans "Permitted (internal only)" %}</span>
-                      {% elif port in external_enabled_services %}
-                        <span class='label label-warning'>
-                          {% trans "Permitted (external only)" %}</span>
+                          {% trans "Enabled" %}</span>
                       {% else %}
-                        <span class='label label-danger'>
-                          {% trans "Blocked" %}</span>
+                        <span class='label label-warning'>
+                          {% trans "Disabled" %}</span>
                       {% endif %}
                     </td>
+                    <td>
+                      <button data-toggle="collapse" data-target=".{{service.service_id}}" class="btn btn-primary pull-right">View Ports</button>
+                    </td>
                   </tr>
-                {% endfor %}
+                    {% for port in service.ports %}
+                        <tr  class="collapse out {{service.service_id}}" style="background-color: #f9f9f9" >
+                          <td class='cell-indented'><em>{{ port }}</em></td>
+                          <td>
+                            {% if port in internal_enabled_services and port in external_enabled_services %}
+                              <span class='label label-success'>
+                                {% trans "Permitted" %}</span>
+                            {% elif port in internal_enabled_services %}
+                              <span class='label label-warning'>
+                                {% trans "Permitted (internal only)" %}</span>
+                            {% elif port in external_enabled_services %}
+                              <span class='label label-warning'>
+                                {% trans "Permitted (external only)" %}</span>
+                            {% else %}
+                              <span class='label label-danger'>
+                                {% trans "Blocked" %}</span>
+                            {% endif %}
+                          </td>
+                          <td></td>
+                        </tr>
+                    {% endfor %}
+                  </div>
+                {% endif %}
               {% endif %}
             {% endfor %}
           </tbody>