@@ -5,9 +5,9 @@
             data-backdrop="static"
             data-keyboard="false"
             data-target="#myModal">
-        <i class="fa fa-refresh fa-fw"></i> {$ tenants.length <= 0 ? "Discover" : "Re-Discover" $} Tenants
+        <i class="fa fa-refresh fa-fw"></i> {$ tenants.length <= 0 ? "Discover" : "Re-Discover" $} Tenants & Networks
     </button>
-    <h1>Tenants</h1>
+    <h1>Tenants & Networks</h1>
 </div>
 
 <div class="tenants-list">
@@ -20,8 +20,8 @@ <h1>Tenants</h1>
         </div>
         <table class="table table-bordered table-condensed" ng-show="tenant.networks.length > 0">
             <tr>
-                <th class="col-md-7">Network</th>
-                <th class="col-md-4">Subnet Associated</th>
+                <th class="col-md-6">Network</th>
+                <th class="col-md-5">Subnet Associated</th>
                 <th class="col-md-1">Status</th>
             </tr>
             <tr ng-repeat="network in tenant.networks">
 
@@ -5,36 +5,35 @@
     <h1>Traffic</h1>
 </div>
 
-<table class="table table-bordered bg-white" ng-show="trafficList.length > 0">
-    <tr>
-        <th>Name</th>
-        <th>Allowed Delta Percentage</th>
-        <th>Test Result Path</th>
-        <th># Workers</th>
-        <th>Remote User</th>
-        <th>Test Method</th>
-        <th>IPERF Duration</th>
-        <th>Type</th>
-        <th>Actions</th>
-    </tr>
-    <tr ng-repeat="cloudTraffic in trafficList">
-        <td><a href="#/cloud/traffic/view/{$ cloudTraffic.id $}/">{$ cloudTraffic.name $}</td>
-        <td>{$ cloudTraffic.allowed_delta_percentage $}% </td>
-        <td>{$ cloudTraffic.test_result_path $}</td>
-        <td>{$ cloudTraffic.number_of_workers $}</td>
-        <td>{$ cloudTraffic.remote_user $}</td>
-        <td>{$ cloudTraffic.test_method $}</td>
-        <td>{$ cloudTraffic.iperf_duration $}sec</td>
-        <td>{$ cloudTraffic.tenant_type $}</td>
-        <td>
-            <a href="#/cloud/traffic/edit/{$ cloud.id $}/{$ cloudTraffic.id $}/" class="text-info"><i class="fa fa-edit fa-fw"></i></a>
-            <a href class="text-danger" ng-click="delete($index)"><i class="fa fa-trash-o fa-fw"></i></a></span>
-            <a href="#/cloud/traffic/test/{$ cloud.id $}/{$ cloudTraffic.id $}/" class="text-success"><i class="fa fa-play fa-fw"></i></a></span>
-        </td>
-    </tr>
-</table>
-
-
-
+<div class="list-group" ng-show="trafficList.length > 0">
+    <div class="list-group-item" ng-repeat="cloudTraffic in trafficList">
+        <div class="row">
+            <div class="col-md-5">
+                <div>Allowed delta percentage : {$ cloudTraffic.allowed_delta_percentage $} %</div>
+                <div># Workers : {$ cloudTraffic.number_of_workers $}</div>
+                <div>IPERF duration : {$ cloudTraffic.iperf_duration $} sec</div>
+            </div>
+            <div class="col-md-5">
+                <div>Test result path : {$ cloudTraffic.test_result_path $}</div>
+                <div>Test Methods :
+                <span class="label label-info">{$ cloudTraffic.test_method $}</span>
+                </div>
+                <div>Test Type : {$ cloudTraffic.tenant_type $}</div>
+            </div>
+            <div class="col-md-2">
+                <b><a href="#/cloud/traffic/view/{$ cloudTraffic.id $}/">{$ cloudTraffic.name | limitTo: 20 $}</a></b>
+                <div>&nbsp;</div>
+                <div class="pull-right">
+                    <a href="#/cloud/traffic/edit/{$ cloud.id $}/{$ cloudTraffic.id $}/" class="text-info"><i class="fa fa-edit fa-fw"></i></a>
+                    <a href class="text-danger" ng-click="delete($index)"><i class="fa fa-trash-o fa-fw"></i></a></span>
+                    <a href="#/cloud/traffic/test/{$ cloud.id $}/{$ cloudTraffic.id $}/" class="text-success"><i class="fa fa-play fa-fw"></i></a></span>
+                </div>
+            </div>
+        </div>
+        <!-- ./row -->
+    </div>
+    <!-- ./list-group-item -->
+</div>
+<!-- ./list-group -->
 
 <p ng-hide="trafficList.length > 0">No traffic(s).</p>