diff --git a/luci-app-oaf/luasrc/view/admin_network/dev_status.htm b/luci-app-oaf/luasrc/view/admin_network/dev_status.htm
index 58cf16e..81210b2 100755
--- a/luci-app-oaf/luasrc/view/admin_network/dev_status.htm
+++ b/luci-app-oaf/luasrc/view/admin_network/dev_status.htm
@@ -4,7 +4,27 @@ local dsp = require "luci.dispatcher"
 -%>
 
 #display{
-    display: flex;
+    padding: 10px;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    display: -moz-box;
+    -moz-box-orient: horizontal;
+    -moz-box-pack: center;
+    -moz-box-align: center;
+    display: -o-box;
+    -o-box-orient: horizontal;
+    -o-box-pack: center;
+    -o-box-align: center;
+    display: -ms-box;
+    -ms-box-orient: horizontal;
+    -ms-box-pack: center;
+    -ms-box-align: center;
+    display: box;
+    box-orient: horizontal;
+    box-pack: center;
+    box-align: center;
 }
 
 table.imagetable {
@@ -14,6 +34,7 @@ table.imagetable {
     border-width: 1px;
     border-color: #999999;
     border-collapse: collapse;
+	padding-top:10px;
 }
 <!--
 table.imagetable th {
@@ -34,7 +55,7 @@ table.imagetable td {
 
 
 
-<script type="text/javascript" src="<%=resource%>/echarts.min.js"></script>
+<script type="text/javascript" src="<%=resource%>/echarts.min.js?v=5.0"></script>
 
 <script type="text/javascript">//<![CDATA[
     window.onload =function(){
@@ -297,7 +318,7 @@ table.imagetable td {
 						hostname=st[i].hostname;
 					}
 					var tr = tb.insertRow(-1);
-					//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
+					tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
 					tr.insertCell(-1).innerHTML = st[i].appname;
 					tr.insertCell(-1).innerHTML = hostname;
 					tr.insertCell(-1).innerHTML = st[i].mac;
@@ -320,6 +341,11 @@ table.imagetable td {
 
 					tr.insertCell(-1).innerHTML = total_time_str;
 					tr.insertCell(-1).innerHTML = action_status;
+					var childs = tr.childNodes;
+					Array.prototype.forEach.call(childs,function(child){
+						child.className = 'td';
+					
+					});
 
 				}
 			}
@@ -329,23 +355,23 @@ table.imagetable td {
 //]]></script>
 
 
-<fieldset class="cbi-section">
+<div class="cbi-section cbi-tblsection">
     <div id="display">
-	<div id="main" style="width: 500px;height:300px;"></div>
-    <div id="main2" style="width: 400px;height:300px;"></div>
+	<div id="main" style="min-width: 600px;height:300px;"></div>
+    <div id="main2" style="min-width: 600px;height:300px;"></div>
     </div>
-	<table class="imagetable" id="user_status_table">
-		<tr>
-			<th ><%:App Name%></th>
-			<th ><%:Hostname%></th>
-			<th ><%:Mac%></th>
-			<th><%:Start Time%></th>
-			<th><%:Visit Time%></th>
-			<th><%:Filter Status%></th>
+	<table class="table cbi-section-table" id="user_status_table">
+		<tr class="tr table-titles">
+			<th class="th"><%:App Name%></th>
+			<th class="th"><%:Hostname%></th>
+			<th class="th"><%:Mac%></th>
+			<th class="th"><%:Start Time%></th>
+			<th class="th"><%:Visit Time%></th>
+			<th class="th"><%:Filter Status%></th>
 		</tr>
-		<tr>
-			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
+		<tr class="tr table-titles">
+			<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
 		</tr>
 	</table>
 
-</fieldset>
\ No newline at end of file
+</div>
diff --git a/luci-app-oaf/luasrc/view/admin_network/user_status.htm b/luci-app-oaf/luasrc/view/admin_network/user_status.htm
index 1fb1ebd..7848b86 100755
--- a/luci-app-oaf/luasrc/view/admin_network/user_status.htm
+++ b/luci-app-oaf/luasrc/view/admin_network/user_status.htm
@@ -1,32 +1,6 @@
-<style type="text/css">
 <%
 local dsp = require "luci.dispatcher"
 -%>
-
-table.imagetable {
-    font-family: verdana,arial,sans-serif;
-    font-size:11px;
-    color:#333333;
-    border-width: 1px;
-    border-color: #999999;
-    border-collapse: collapse;
-}
-<!--
-table.imagetable th {
-    background:#f5f5f5
-    border-width: 0px;
-    padding: 5px;
-    border-style: solid;
-    border-color: #999999;
-}
-table.imagetable td {
-    background:#ffffffff
-    border-width: 0px;
-    padding: 5px;
-    border-style: solid;
-    border-color: #999999;
-}-->
-</style>
 <script type="text/javascript">//<![CDATA[
 	XHR.poll(5, '<%=url('admin/network/dev_app_status')%>', null,
 		function(x, st)
@@ -48,7 +22,7 @@ table.imagetable td {
 						hostname=devlist[i].hostname;
 					}
 					var tr = tb.insertRow(-1);
-					//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
+					tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
 					tr.insertCell(-1).innerHTML = i + 1;
 					tr.insertCell(-1).innerHTML = hostname;
 					tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/network/appfilter/')%>"+devlist[i].mac+"'>"+devlist[i].mac+"</a>";
@@ -64,10 +38,16 @@ table.imagetable td {
 						app_list_str="--"
 					}
 					tr.insertCell(-1).innerHTML = app_list_str;
-					if (devlist[i].online == 1)
+					if (devlist[i].online == 1){
 						tr.insertCell(-1).innerHTML = "<%:Online%>";
-					else
+					}else{
 						tr.insertCell(-1).innerHTML = "<%:Offline%>";
+					}
+					var childs = tr.childNodes;
+					Array.prototype.forEach.call(childs,function(child){
+						child.className = 'td';
+					
+					});
 				}
 			}
 		}
@@ -76,19 +56,19 @@ table.imagetable td {
 //]]></script>
 
 
-<fieldset class="cbi-section">
-	<legend><%:Client List%></legend>
-	<table class="imagetable" id="user_status_table">
-		<tr>
-			<th ><%:Id%></th>
-			<th ><%:Hostname%></th>
-			<th ><%:Mac%></th>
-			<th ><%:Ip%></th>
-			<th><%:Common App(TOP5)%></th>
-			<th><%:Online Status%></th>
+<div class="cbi-section cbi-tblsection">
+	<h3><%:Client List%></h3>
+	<table class="table cbi-section-table" id="user_status_table">
+		<tr class="tr table-titles">
+			<th class="th"><%:Id%></th>
+			<th class="th"><%:Hostname%></th>
+			<th class="th"><%:Mac%></th>
+			<th class="th"><%:Ip%></th>
+			<th class="th"><%:Common App(TOP5)%></th>
+			<th class="th"><%:Online Status%></th>
 		</tr>
-		<tr>
-			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
+		<tr class="tr">
+			<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
 		</tr>
 	</table>
-</fieldset>
+</div>