diff --git a/template/Interfaccia.html b/template/Interfaccia.html
index c0e47bf..4306350 100644
--- a/template/Interfaccia.html
+++ b/template/Interfaccia.html
@@ -3,11 +3,15 @@
 		<title>GoBug</title>
 		<meta charset="UTF-8">
 		<style type="text/css">
-				h1,h2,h3,h4,p {
+				h1,h2,h3,h4 {
 				   color: white;
 				   text-align: center;
 					 font-size:2.4em;
 				}
+				p {
+				   color: white;
+					 font-size:2em;
+				}
 			body{
 				background: #009999;
 			}
@@ -17,7 +21,13 @@
 				background: white;
 				padding: 0px;
 				width:100%;
+				height: 100%;
+			}
+			div{
+				width:20%;
 				height: 89%;
+				background-color:#006666;
+
 			}
 			td,tr{
 				background: white;
@@ -40,6 +50,7 @@
 	</head>
 	<body>
 			<h1> Go bug</h1>
+			<div style="float:left; display:block; width:70%; height:89%; ">
 			<table>
 	  <tr>
 	    <td class="cibo"></th>
@@ -52,5 +63,20 @@
 	    <td></td>
 	  </tr>
 	</table>
+</div>
+<div style="float:left; display:block; width:1%; height:89%; "></div>
+	<div style="float:left; display:block; width:29%; height:89%; ">
+		<h1>legenda</h1>
+		<div style="float:left; display:block; width:30%; height:20%; background-color:#FFFF33;"></div>
+		<div style="float:right; display:block; width:65%; height:20%; "><p>Food</p></div>
+		<div style="float:right; display:block; width:100%; height:2%; "></div>
+		<div style="float:left; display:block; width:30%; height:20%; background-color:#00ff00;"></div>
+		<div style="float:right; display:block; width:65%; height:20%; "><p>Razza1</p></div>
+		<div style="float:right; display:block; width:100%; height:2%;"></div>
+		<div style="float:left; display:block; width:30%; height:20%; background-color:#F00;"></div>
+		<div style="float:right; display:block; width:65%; height:20%; "><p>Razza2</p></div>
+	</div>
   </body>
+	</div>
+
 </html>
