diff --git a/sdCard_content/WWW/index.htm b/sdCard_content/WWW/index.htm
index 3b25720..0e783d3 100644
--- a/sdCard_content/WWW/index.htm
+++ b/sdCard_content/WWW/index.htm
@@ -10,7 +10,6 @@
   <body onload="init();">
 	<header>
 		<h1 class ="title">ESP8266 Embedded System Dashboard</h1>
-		<div id="conIcon"><img id="imgConn" src="rsrc/conn.png" alt="connected" style="display:none;"><img id="imgDisco" src="rsrc/disco.png" alt="disconnected"></div>
 	</header>
 	<nav>
 		<div class="menuContainer">
@@ -20,9 +19,12 @@
 			<div class="item">
 				<p><span id="sigStrengthPercent"></span> %</p>
 			</div>
-			<div  class="item">
+			<div  class="item" style="margin-left: auto;">
 				<p><span id="battLevel"></span> %</p>
 			</div>
+			<div class="item-start" id="conIcon">
+				<img id="imgConn" src="rsrc/conn.png" alt="connected" style="display:none;"><img id="imgDisco" src="rsrc/disco.png" alt="disconnected">
+			</div>
 		</div>	
 	</nav>
 	<section>
@@ -108,28 +110,36 @@
 						<h2>MODE</h2>
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P0_MODE','OUTPUT');" id="P0_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P0_MODE','INPUT');" id="P0_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P1_MODE','OUTPUT');" id="P1_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P1_MODE','INPUT');"  id="P1_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P2_MODE','OUTPUT');" id="P2_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P2_MODE','INPUT');"  id="P2_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P3_MODE','OUTPUT');" id="P3_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P3_MODE','INPUT');"  id="P3_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P4_MODE','OUTPUT');" id="P4_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P4_MODE','INPUT');"  id="P4_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P5_MODE','OUTPUT');" id="P5_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P5_MODE','INPUT');"  id="P5_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P6_MODE','OUTPUT');" id="P6_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P6_MODE','INPUT');"  id="P6_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 					<td>
-						<h2>OUT</h2>
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P7_MODE','OUTPUT');" id="P7_MODE" src="rsrc/in.png" alt="input" >
+						<img class="mode-img" style="display:none;" onclick="setIoMode('P7_MODE','INPUT');"  id="P7_MODE" src="rsrc/out.png" alt="output" >
 					</td>
 				</tr>
 				<tr>
@@ -137,28 +147,36 @@
 						<h2>LEVEL</h2>
 					</td>
 					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
-					</td>
-					<td>
-						<h2>1</h2>
+						<img class="mode-img" style="display:none;" id="P0_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P0_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P1_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P1_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P2_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P2_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P3_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P3_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P4_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P4_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P5_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P5_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P6_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P6_LEVEL" src="rsrc/off.png" alt="off" >
+					</td>                     
+					<td>                      
+						<img class="mode-img" style="display:none;" id="P7_LEVEL" src="rsrc/on.png" alt="on" >
+						<img class="mode-img" style="display:none;" id="P7_LEVEL" src="rsrc/off.png" alt="off" >
 					</td>
 				</tr>
 			</table>
diff --git a/sdCard_content/WWW/rsrc/script.js b/sdCard_content/WWW/rsrc/script.js
index 156a5af..1d72340 100644
--- a/sdCard_content/WWW/rsrc/script.js
+++ b/sdCard_content/WWW/rsrc/script.js
@@ -35,7 +35,7 @@ function onTimeOut(e)
 	document.getElementById('imgDisco').style.display = 'block';
 }
 
-function connectedUpdate()
+function onConnected()
 {
 	document.getElementById('imgDisco').style.display = 'none';
 	document.getElementById('imgConn').style.display = 'block';
@@ -63,7 +63,7 @@ function refreshRtc()
 				break;
 			case 4:
 				console.log("Response is ready");
-				if(this.status != 0){connectedUpdate();}
+				if(this.status != 0){onConnected();}
 				if(this.status == 200)
 				{
 					console.log("Response : " + this.responseText);
diff --git a/sdCard_content/WWW/rsrc/style.css b/sdCard_content/WWW/rsrc/style.css
index 0be3486..91d27bd 100644
--- a/sdCard_content/WWW/rsrc/style.css
+++ b/sdCard_content/WWW/rsrc/style.css
@@ -17,19 +17,9 @@ header > h1
 	margin:0;
 	padding:0;
 }
-header > #conIcon
+#conIcon > img
 {
-	margin-top:-105px;
-	background-color:white;
-	display:inline-block;
-	position:absolute;
-	top:20vh;
-	left:0px;
-	
-}
-header > #conIcon > img
-{
-	width:100px;
+	width:70px;
 	padding:0;
 	margin:0;
 }
@@ -78,7 +68,8 @@ input[type='number']
 {
 	display:flex;
 	align-items: stretch;
-	flex-direction: row-reverse
+	flex-direction: row-reverse;
+	justify-content:flex-end;
 	
 }
 .item
@@ -88,8 +79,20 @@ input[type='number']
 	background-color:white;
 	min-width:60px;
 }
+
+.item-start
+{
+	border:1px black solid;
+	margin:0 10px 0 10px;
+	background-color:white;
+	min-width:60px;
+}
 .inline
 {
 	display:inline-block;
 	border:1px black solid;
+}
+.mode-img
+{
+	width:40px;
 }
\ No newline at end of file
