diff --git a/html/buttonbar.html b/html/buttonbar.html
index 67debbb..4a7f436 100644
--- a/html/buttonbar.html
+++ b/html/buttonbar.html
@@ -1,5 +1,6 @@
 {{define "buttonbar"}}
 <div class="w3-bar w3-blue">
+<div class="w3-content w3-blue">
     <button class="w3-bar-item w3-button w3-blue" onclick="document.getElementById('NewNetwork').style.display='block'">Create Network</button>
     <button class="w3-bar-item w3-button"></button>
     <button class="w3-bar-item w3-button tablink w3-teal" onclick="openTab(event, 'Networks')">Network Details</button>
@@ -9,6 +10,23 @@
     <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'ExtClient')">External Clients</button>
 
 </div>
+<div class="w3-dropdown-hover w3-right">
+	    <button class="w3-button w3-blue w3-xlarge ">&#9776 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp </button>
+	    <div class="w3-dropdown-content w3-bar-block w3-border">
+		{{ if .Admin }}
+		<button class="w3-bar-item w3-button" onclick="document.getElementById('AddUser').style.display='block';">Add User</button>
+		<button class="w3-bar-item w3-button" onclick="document.getElementById('DeleteUser').style.display='block';">Delete User</button>
+		{{end}}
+		<button class="w3-bar-item w3-button" onclick="document.location='edit_user';">Update User</button>
+
+		<button class="w3-bar-item w3-button" onclick="document.location='https://docs.netmaker.org';">Docs</a>
+		<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</a>
+
+		<button class="w3-bar-item w3-button" onclick="document.getElementById('About').style.display='block'">About</button>
+	    </div>
+	</div>
+
+</div>
 
 
 {{/*NewNetwork*/}}
diff --git a/html/extclient.html b/html/extclient.html
index 4c3e4d1..f46054d 100644
--- a/html/extclient.html
+++ b/html/extclient.html
@@ -1,50 +1,66 @@
 {{ define "ExtClient" }}
 <div id="ExtClient" class="w3-row tab" style="display=none">
   <div class="w3-third">
+			<p> Available Ingress Gateways
 		<div class="net All">
-			<p> Available Ingress Gateways</p>
-	{{range .Nodes}}
-	<p><button id="node{{.MacAddress}}" class="w3-lightgrey"  onclick="expand('ext{{.MacAddress}}');">{{.Name}} @ {{.Network}}</button></p>
-		</div>
-
-		<div class="net {{.Network}}" id='ext{{.MacAddress}}'>
+			{{range .Nodes}}
 			<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
-				<label> Add External Client </label>
-	  		<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle w3-blue"><span class="material-icons"> add_circle_outline</span></button><br>
+				<p><label>{{.Name}}</label>@<label>{{.Network}}</label>
+				<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle"><span class="material-icons">add_circle_outline</span></button></p>
 			</form>
-  	</div>
-	{{end}}
+			{{end}}
+    </div>
+		{{range .Nodes}}
+		<div class="net {{.Network}}">
+			<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
+	    	<label>{{.Name}}</label>
+	    	<label>{{.Network}}</label>
+	    	<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle"><span class="material-icons">add_circle_outline</span></button>
+			</form>
+		</div>
+			{{end}}
+	</div>
+
+
+	<div class="w3-twothird">
+		<p>External Clients</p>
+		<div class="net All">
+			{{range .ExtClients}}
+			{{template "ExtClientDetails" .}}
+			{{end}}
+		</div>
+		{{range .ExtClients}}
+		<div class="net {{.Network}}">
+			{{template "ExtClientDetails" .}}
+		</div>
+		{{end}}
 	</div>
+</div>
+{{end}}
 
+{{define "ExtClientDetails"}}
+<button class="w3-block w3-white w3-left-align" onclick="openClient('{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>
 
-   <div class="w3-twothird">
-	<p>External Clients</p>
-	{{range .ExtClients}}
-	<button class="w3-block w3-white w3-left-align" onclick="expand('client{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>
 	<div id="client{{.ClientID}}" class="w3-container w3-hide">
-	    <p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
-	    <p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
-	    <div class=btn-group>
-		<form class="form-inline" action="get_qr/{{.Network}}/{{.ClientID}}" method=POST>
+		<p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
+	   <p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
+	  <div class=btn-group>
+			<form class="form-inline" action="get_qr/{{.Network}}/{{.ClientID}}" method=POST>
 
 		    <button class="w3-bar-item", type=submit>Show QR Code <span class="material-icons">qr_code</span></Button>
-		</form>
-		<form class="form-inline" action="get_client_config/{{.Network}}/{{.ClientID}}" method=POST>
+			</form>
+			<form class="form-inline" action="get_client_config/{{.Network}}/{{.ClientID}}" method=POST>
 		    <button class="w3-bar-item">DownLoad Config <span class="material-icons">cloud_download</span></button>
-		</form>
-		<form class="form-inline" action="/edit_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
+			</form>
+			<form class="form-inline" action="/edit_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
 		    <button class="w3-bar-item w3-circle w3-white" onclick="document.getElementById('EditExtClient');"><span class="material-icons">edit</span></button>
-		</form>
-		<form class="form-inline" action="/delete_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
+			</form>
+			<form class="form-inline" action="/delete_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
 		    <button class="w3-bar-item w3-circle w3-red"><span class="material-icons">delete</span></button>
-		</form>
-
-	    </div>
+			</form>
+	  </div>
 	</div>
 	{{end}}
-    </div>
-</div>
-{{end}}
 
 {{ define "EditExtClient" }}
 <html>
diff --git a/html/header.html b/html/header.html
index a5bb8b7..1932109 100644
--- a/html/header.html
+++ b/html/header.html
@@ -1,34 +1,14 @@
 {{define "Header"}}
 <div class="w3-cell-row w3-blue">
-    <div class="w3-cell ">&nbsp&nbsp&nbsp&nbsp</div>
-    <div class="w3-cell w3-cell-middle w3-blue w3-hide-small w3-hide-medium">
-	<img src="/images/netmaker2.png" alt="Netmaker Makes Networks">
-    </div>
-    <div class="w3-cell w3-cell-middle w3-blue w3-hide-large">
+	<div class="w3-hide-small w3-hide-medium">
+		<center><img src="/images/netmaker2.png" alt="Netmaker Makes Networks"></center>
+	</div>
+	<div class="w3-hide-large">
 	<center><img src="/images/netmaker-small.png" alt="Netmaker Makes Networks"></center>
-    </div>
-    <div class="w3-cell w3-blue" >
-	<div class="w3-dropdown-hover w3-right">
-	    <button class="w3-button w3-blue w3-xlarge ">&#9776 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp </button>
-	    <div class="w3-dropdown-content w3-bar-block w3-border">
-		{{ if .Admin }}
-		<button class="w3-bar-item w3-button" onclick="document.getElementById('AddUser').style.display='block';">Add User</button>
-		<button class="w3-bar-item w3-button" onclick="document.getElementById('DeleteUser').style.display='block';">Delete User</button>
-		{{end}}
-		<button class="w3-bar-item w3-button" onclick="document.location='edit_user';">Update User</button>
-
-		<button class="w3-bar-item w3-button" onclick="document.location='https://docs.netmaker.org';">Docs</a>
-		<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</a>
-
-		<button class="w3-bar-item w3-button" onclick="document.getElementById('About').style.display='block'">About</button>
-	    </div>
 	</div>
-    </div>
 </div>
 
 
-</div>
-
 <div id="About" class=w3-modal>
     <div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="width:50%">
 	<div class="w3-container w3-center">
diff --git a/html/layout.html b/html/layout.html
index 2fc86f8..95d51db 100644
--- a/html/layout.html
+++ b/html/layout.html
@@ -3,14 +3,6 @@
 <html>
     <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<style>
-.tab{
-    max-width:1024px;
-    margin: auto;
-    padding: 10px;
-}
-	</style>
-	<!--    <link rel="stylesheet" href="stylesheet/bar.css" type="text/css">--> 
 	<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css" type="text/css">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
@@ -21,7 +13,7 @@
     </head>
     <body onLoad="setUp('{{.Page}}', '{{.Message}}')"> 
 	{{template "Header" . }} 
-	{{template "buttonbar"}}
+	{{template "buttonbar" . }}
 	{{template "Sidebar" .}}
 	<div class="w3-main" style="margin-left:200px">
 	    <button class="w3-button w3-grey w3-small w3-hide-large" onclick="document.getElementById('sidebar').style.display='block';">&#9776;</button>
diff --git a/html/script.html b/html/script.html
index a05b9c5..c73ac24 100644
--- a/html/script.html
+++ b/html/script.html
@@ -20,7 +20,7 @@
 	x[i].style.display="none";
     }
     document.getElementById(tabName).style.display = "block";
-
+    {{/*
     var x = document.getElementsByClassName("net");
     for (i=0; i<x.length; i++) {
 
@@ -30,6 +30,7 @@
 	    x[i].style.display="none"
 	}
     }
+       */}}
 
 }
 
@@ -76,6 +77,7 @@
     }
 }
 
+
 function grantAdmin(id, div) {
     var checked = document.getElementById(id).checked;
     if (checked) {
@@ -187,9 +189,10 @@
 function expand(div) {
     var x = document.getElementById(div);
     if (x.className.indexOf("w3-show") == -1) {
-	x.className += " w3-show";
+	x.className = x.className.replace(" w3-hide", " w3-show");
+	{{/*x.className += " w3-show";*/}}
     } else {
-	x.className = x.className.replace(" w3-show", "");
+	x.className = x.className.replace(" w3-show", " w3-hide");
     }
 }