diff --git a/webroot/css/widget.css b/webroot/css/widget.css
index 9ae3cee8d6e2256686d46e21c8978324b471c3b9..4ec17e02f3a13411cc8f10b686c89b6e257ee1e5 100644
--- a/webroot/css/widget.css
+++ b/webroot/css/widget.css
@@ -1,63 +1,44 @@
+body { background-color:#261C13; }
+a { color:#0071BB; }
+a:hover { color:#777878; }
+td, div
+{
+	font-family:Lucida Grande, Lucida Sans Unicode, Calibri, Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
+	font-size:16pt;
+	color:#000000;
+}
 
-.widget_wide {
+.widget_wide, .widget_narrow, .widget_square, .widget_smallwide, .widget_smallnarrow {
+	position:absolute;
 	border: 1px solid #F2EFE5;
 	background-color:#75695E;
-	font-family:Verdana;
+	font-family:Lucida Grande, Lucida Sans Unicode, Calibri, Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
+	font-size:1.5em;
 	color:#000000;
-	position:absolute;
+}
+
+.widget_wide {
 	width:800px;
 	height:380px;
 }
 
 .widget_narrow {
-	border: 1px solid #F2EFE5;
-	background-color:#75695E;
-	font-family:Verdana;
-	color:#000000;
-	position:absolute;
 	width:380px;
 	height:800px;
 }
 
 .widget_square {
-	border: 1px solid #F2EFE5;
-	background-color:#75695E;
-	font-family:Verdana;
-	color:#000000;
-	position:absolute;
 	width:380px;
 	height:380px;
 }
 
 .widget_smallwide {
-	border: 1px solid #F2EFE5;
-	background-color:#75695E;
-	font-family:Verdana;
-	color:#000000;
-	position:absolute;
 	width:380px;
 	height:170px;
 }
 
 .widget_smallnarrow {
-	border: 1px solid #F2EFE5;
-	background-color:#75695E;
-	font-family:Verdana;
-	color:#000000;
-	position:absolute;
 	width:170px;
 	height:170px;
 }
 
-body {
-	font-family:Verdana;
-	background-color:#261C13;
-	color:#ffffff;
-}
-
-a {
-	color:#0071BB;
-}
-a:hover {
-	color:#777878;
-}
diff --git a/webroot/index.php b/webroot/index.php
index 95c8be6c64585b1cb83cc9fd014aa9cc25d8f496..7f41fc7f5d6d694bdbc3f037930f8beae4b49a84 100644
--- a/webroot/index.php
+++ b/webroot/index.php
@@ -10,7 +10,7 @@
 			array(
 				"ZoneOffen",		// widget name
 				16,200,				// position
-				"widget_square"		// css-class
+				"widget_smallwide"		// css-class
 			)
 		);
 
diff --git a/webroot/widgets/ZoneOffen/ZoneOffen.js b/webroot/widgets/ZoneOffen/ZoneOffen.js
index 39803dc1421e856d905fb3dd34567ec572fafdb9..3a9c511dae9046dfd8d7be1441f669c7d0b64339 100644
--- a/webroot/widgets/ZoneOffen/ZoneOffen.js
+++ b/webroot/widgets/ZoneOffen/ZoneOffen.js
@@ -1,11 +1,13 @@
 function fillContent(response) {
+  var content = "";
   if (response["tuerOffen"] == false){
-    $("#ZoneOffen_open").html(" <font color='red'>geschlossen!</font>");
+    content = "<p><font color='cc0000'>Geschlossen</font></p>";
   } else {
-    $("#ZoneOffen_open").html(" <font color='green'>ge&ouml;ffnet!</font>");
+    content = "<p><font color='00cc00'>Offen</font></p>";
   }  
-  $("#ZoneOffen_templounge").html(response["tempLounge"]);
-  $("#ZoneOffen_tempwerkstatt").html(response["tempWerkstatt"]);
+  content += "<p>" + response["tempLounge"] + "&deg;C</p>";
+  content += "<p>" + response["tempWerkstatt"] + "&deg;C</p>";
+  $("#ZoneOffen_values").html(content);
 }
 
 function updateZoneOffen () {
diff --git a/webroot/widgets/ZoneOffen/ZoneOffen.php b/webroot/widgets/ZoneOffen/ZoneOffen.php
index 2778ee63e3c6510f2bf529e09e8cb57ff8efdde8..6afc3d06eb66a2274fedd7f4f2de4627824c479d 100644
--- a/webroot/widgets/ZoneOffen/ZoneOffen.php
+++ b/webroot/widgets/ZoneOffen/ZoneOffen.php
@@ -13,9 +13,12 @@ class ZoneOffen implements iWidget
   public function giveOutput() 
   {
     $widgetOutput = '<script src="widgets/ZoneOffen/ZoneOffen.js" type="text/javascript"></script>'."\n";
-    $widgetOutput .= '<div>Die Zone ist <span id="ZoneOffen_open"></span></div>'."\n";
-    $widgetOutput .= '<div>Lounge <span id="ZoneOffen_templounge"></span></div>'."\n";
-    $widgetOutput .= '<div>Werkstatt <span id="ZoneOffen_tempwerkstatt"></span></div>'."\n";
+    $widgetOutput .= '<table width="66%" align="center" valign="center" border="0" cellpadding="0" cellspacing="4">'."\n";
+    $widgetOutput .= ' <tr>'."\n";
+    $widgetOutput .= '  <td width="50%" align="right"><b><p>Status: </p><p>Lounge: </p><p>Werkstatt: </p></b></td>'."\n";
+    $widgetOutput .= '  <td width="50%" align="right"><span id="ZoneOffen_values"><font color="#cc3300"><p>Unbekannt</p><p>Unbekannt</p><p>Unbekannt</p></font></span></td>'."\n";
+    $widgetOutput .= ' </tr>'."\n";
+    $widgetOutput .= '</table>'."\n";
 
     return $widgetOutput;
   }