diff --git a/frontend/index.html b/frontend/index.html
index b8252be..304ee3e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -45,20 +45,20 @@
 
 <div id="accordion">
 	<div id="controls">
-		<button value="move_back"><img src="images/control_rewind_blue.png" title="move back" /></button>
-		<button value="zoom_in"><img src="images/zoom_in.png" title="zoom in" /></button>
-		<button value="zoom_out"><img src="images/zoom_out.png" title="zoom out" /></button>
-		<button value="zoom_hour">Stunde</button>
-		<button value="zoom_day">Tag</button>
-		<button value="zoom_week">Woche</button>
-		<button value="zoom_month">Monat</button>
-		<button value="zoom_year">Jahr</button>
-		<button value="move_last"><img src="images/control_end_blue.png" title="move to present" /></button>
-		<button value="move_forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
+		<button value="move-back"><img src="images/control_rewind_blue.png" title="move back" /></button>
+		<button value="zoom-in"><img src="images/zoom_in.png" title="zoom in" /></button>
+		<button value="zoom-out"><img src="images/zoom_out.png" title="zoom out" /></button>
+		<button value="zoom-hour">Stunde</button>
+		<button value="zoom-day">Tag</button>
+		<button value="zoom-week">Woche</button>
+		<button value="zoom-month">Monat</button>
+		<button value="zoom-year">Jahr</button>
+		<button value="move-last"><img src="images/control_end_blue.png" title="move to present" /></button>
+		<button value="move-forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
 	</div>
 	
 		<h3><img src="images/table.png" alt="" /> Kanäle</h3>
-		<div id="entities">
+		<div id="entity-list">
 		<table>
 			<thead>
 				<tr>
@@ -74,7 +74,7 @@
 			</thead>
 			<tbody></tbody>
 		</table>
-		<div><button name="addUUID"><img src="images/add.png" alt="add" /> UUID abonnieren</button> <button name="newEntity"><img src="images/star.png" alt="new" /> Entity erstellen</button></div>
+		<div><button name="entity-add"><img src="images/add.png" alt="add" /> Kanal hinzuf&uuml;gen</button></div>
 		</div>
 		<h3><img src="images/wrench.png" alt="" /> Optionen</h3>
 		<div id="options">
@@ -82,29 +82,25 @@
 				<thead>
 					<tr>
 						<th>Option</th>
-						<th colspan="2">Wert</th>
+						<th>Wert</th>
 					</tr>
 				</thead>
 				<tbody>
 					<tr>
 						<td><label for="refresh"><img src="images/arrow_refresh.png" alt="" /> Automatisch aktualisieren</label></td>
 						<td><input type="checkbox" id="refresh" /></td>
-						<td></td>
-					</tr>
-					<tr id="rendering">
-						<td><img src="images/eye.png" alt="" /> Darstellung</td>
-						<td><label for="rendering_points"><input type="radio" id="rendering_points" name="rendering" value="points" /> Punkte</label></td>
-						<td><label for="rendering_lines"><input type="radio" id="rendering_lines" name="rendering" value="lines" /> Linien</label></td>
 					</tr>
 					<tr>
-						<td><label for="backendUrl"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
-						<td><input type="text" id="backendUrl" /></td>
-						<td></td>
+						<td><img src="images/eye.png" alt="" /> Darstellung</td>
+						<td><label for="render-points"><input type="radio" id="render-points" name="render" value="points" /> Punkte</label> <label for="render-lines"><input type="radio" id="render-lines" name="render" value="lines" /> Linien</label></td>
+					</tr>
+					<tr>
+						<td><label for="backend-url"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
+						<td><input type="text" id="backend-url" /></td>
 					</tr>
 					<tr>
 						<td><label for="tuples"><img src="images/shading.png" alt="" /> Tuples (Auflösung)</label></td>
 						<td><input type="text" id="tuples" size="5" /></td>
-						<td></td>
 					</tr>
 				</tbody>
 			</table>
@@ -116,27 +112,27 @@
 </div>
 
 <!-- dialogs -->
-<div id="addUUID" class="dialog">
-	<p>Hier können Sie einen existierenden Kanal über seine UUID hinzufügen</p>
-	<p><label for="uuid">UUID: </label><input id="uuid" type="text" size="36" maxlength="36" /></p>
-	<input type="button" value="hinzufügen" />
-</div>
+<div id="entity-add" class="dialog">
+	<div class="tabs">
+		<ul>
+			<li><a href="#entity-subscribe">Kanal abonnieren</a></li>
+			<li><a href="#entity-create">Kanal erstellen</a></li>
+			<li><a href="#public-entities">&ouml;ffentliche Kan&auml;le</a></li>
+		</ul>
+		<div id="entity-subscribe">
+			<p>Hier k&ouml;nnen Sie einen existierenden Kanal über seine UUID hinzuf&uuml;gen</p>
+			<p><label for="uuid">UUID: </label><input id="uuid" type="text" size="36" maxlength="36" /></p>
+			<input type="button" value="hinzufügen" />
+		</div>
+		<div id="entity-create">
+			<p>Hier können Sie einen neuen Kanal erstellen</p>
 
-<div id="newEntity" class="dialog">
-	<p>Hier können sie einen neuen Kanal hinzufügen:</p>
-	<fieldset><legend>Allgemeine Eigenschaften</legend>
-		<table>
-			<tr><td><label for="type">Typ:</label></td><td><select name="type"></select></td></tr>
-			<tr><td><label for="port">Port:</label></td><td><input type="text" name="port" /></td></tr>
-		</table>
-	</fieldset>
-			
-	<fieldset>
-		<legend>Spezifische Eigenschaften</legend>
-		<table id="properties"></table>
-		<p>(*) required</p>
-	</fieldset>
-	<input type="button" value="hinzufügen" />
+			<input type="button" value="erstellen" />
+		</div>
+		<div id="public-entities">
+			<p>Hier k&ouml;nnen Sie demn&auml;chst &ouml;ffentliche Kan&auml;le abonnieren.</p>
+		</div>
+	</div>
 </div>
 </body>
 </html>
diff --git a/frontend/javascripts/entity.js b/frontend/javascripts/entity.js
index 7a9e194..0825a29 100644
--- a/frontend/javascripts/entity.js
+++ b/frontend/javascripts/entity.js
@@ -58,8 +58,9 @@ Entity.prototype.showDetails = function() {
 	.addClass('details')
 	.append(this.getDOM())
 	.dialog({
-		title: 'Entity Details',
-		width: 450
+		title: 'Details f&uuml;r ' + this.title,
+		width: 450,
+		resizable: false
 	});
 };
 
diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js
index fbba40e..08edcaa 100644
--- a/frontend/javascripts/frontend.js
+++ b/frontend/javascripts/frontend.js
@@ -55,7 +55,7 @@ vz.wui.init = function() {
 		vz.entities.loadData();
 	});
 
-	$('#backendUrl')
+	$('#backend-url')
 		.val(vz.options.backendUrl)
 		.change(function() {
 			vz.options.backendUrl = $(this).val();
@@ -68,7 +68,7 @@ vz.wui.init = function() {
 		});
 	
 	// plot rendering
-	$('#rendering_lines')
+	$('#render-lines')
 		.attr('checked', vz.options.plot.series.lines.show)
 		.change(function() {
 			vz.options.plot.series.lines.show = $(this).attr('checked');
@@ -76,7 +76,7 @@ vz.wui.init = function() {
 			vz.drawPlot();
 		});
 	
-	$('#rendering_points')
+	$('#render-points')
 		.attr('checked', vz.options.plot.series.points.show)
 		.change(function() {
 			vz.options.plot.series.lines.show = !$(this).attr('checked');
@@ -90,35 +90,25 @@ vz.wui.init = function() {
  */
 vz.wui.dialogs.init = function() {
 	// initialize dialogs
-	$('#addUUID').dialog({
+	$('#entity-add.dialog').dialog({
 		autoOpen: false,
-		title: 'UUID hinzufügen',
-		width: 450,
+		title: 'Kanal hinzuf&uuml;gen',
+		width: 600,
 		resizable: false
 	});
+	$('#entity-add.dialog > div').tabs();
 	
-	$('#newEntity').dialog({
-		autoOpen: false,
-		title: 'Entity erstellen',
-		width: 400
+	// open entity dialogs
+	$('button[name=entity-add]').click(function() {
+		$('#entity-add').dialog('open');
 	});
 	
-	// open uuid dialog
-	$('button[name=addUUID]').click(function() {
-		$('#addUUID').dialog('open');
-	});
-	
-	// open entity dialog
-	$('button[name=newEntity]').click(function() {
-		$('#newEntity').dialog('open');
-	});
-	
-	// add UUID
-	$('#addUUID input[type=button]').click(function() {
+	// subscribe UUID
+	$('#entity-subscribe input[type=button]').click(function() {
 		try {
-			vz.uuids.add($('#addUUID input[type=text]').val());
-			$('#addUUID input[type=text]').val('');
-			$('#addUUID').dialog('close');
+			vz.uuids.add($('#entity-subscribe input[type=text]').val());
+			$('#entity-subscribe input[type=text]').val('');
+			$('#entity-add').dialog('close');
 			vz.entities.loadDetails();
 		}
 		catch (exception) {
@@ -179,60 +169,60 @@ vz.wui.handleControls = function () {
 	var middle = vz.options.plot.xaxis.min + delta/2;
 
 	switch($(this).val()) {
-		case 'move_last':
+		case 'move-last':
 			vz.options.plot.xaxis.max = new Date().getTime();
 			vz.options.plot.xaxis.min = new Date().getTime() - delta;
 			break;
 			
-		case 'move_back':
+		case 'move-back':
 			vz.options.plot.xaxis.min -= delta;
 			vz.options.plot.xaxis.max -= delta;
 			break;
-		case 'move_forward':
+		case 'move-forward':
 			vz.options.plot.xaxis.min += delta;
 			vz.options.plot.xaxis.max += delta;
 			break;
 		
-		case 'zoom_reset':
+		case 'zoom-reset':
 			vz.options.plot.xaxis.min = middle - vz.options.defaultInterval/2;
 			vz.options.plot.xaxis.max =  middle + vz.options.defaultInterval/2;
 			break;
 			
-		case 'zoom_in':
+		case 'zoom-in':
 			vz.options.plot.xaxis.min += delta/4;
 			vz.options.plot.xaxis.max -= delta/4;
 			break;
 			
-		case 'zoom_out':
+		case 'zoom-out':
 			vz.options.plot.xaxis.min -= delta;
 			vz.options.plot.xaxis.max += delta;
 			break;
 
-		case 'zoom_hour':
+		case 'zoom-hour':
 			hour = 60*60*1000;
 			vz.options.plot.xaxis.min = middle - hour/2;
 			vz.options.plot.xaxis.max =  middle + hour/2;
 			break;
 
-		case 'zoom_day':
+		case 'zoom-day':
 			var day = 24*60*60*1000;
 			vz.options.plot.xaxis.min = middle - day/2;
 			vz.options.plot.xaxis.max =  middle + day/2;
 			break;
 
-		case 'zoom_week':
+		case 'zoom-week':
 			var week = 7*24*60*60*1000;
 			vz.options.plot.xaxis.min = middle - week/2;
 			vz.options.plot.xaxis.max =  middle + week/2;
 			break;
 
-		case 'zoom_month':
+		case 'zoom-month':
 			var month = 30*24*60*60*1000;
 			vz.options.plot.xaxis.min = middle - month/2;
 			vz.options.plot.xaxis.max =  middle + month/2;
 			break;
 
-		case 'zoom_year':
+		case 'zoom-year':
 			var year = 365*24*60*60*1000;
 			vz.options.plot.xaxis.min = middle - year/2;
 			vz.options.plot.xaxis.max =  middle + year/2;
@@ -259,6 +249,8 @@ vz.wui.handleControls = function () {
  */
 vz.entities.loadDetails = function() {
 	this.clear();
+	$('#entity-list tbody').empty();
+
 	vz.uuids.each(function(index, value) {
 		vz.load('entity', value, {}, waitAsync(function(json) {
 			vz.entities.push(new Entity(json.entity));
@@ -271,7 +263,6 @@ vz.entities.loadDetails = function() {
  * @param data
  */
 vz.entities.show = function() {
-	$('#entities tbody').empty();
 	var i = 0;
 
 	vz.entities.each(function(entity, parent) {
@@ -336,11 +327,11 @@ vz.entities.show = function() {
 			);
 		}
 			
-		$('#entities tbody').append(row);
+		$('#entity-list tbody').append(row);
 	});
 	
 	// http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html
-	$('#entities table').treeTable({
+	$('#entity-list table').treeTable({
 		treeColumn: 2,
 		clickableNodeNames: true
 	});
@@ -362,7 +353,7 @@ vz.entities.each = function(cb) {
  * Load json data from the backend
  */
 vz.entities.loadData = function() {
-	$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>Loading...</p>');
+	$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>loading...</p>');
 	this.each(function(entity, parent) {
 		if (entity.active && entity.type != 'group') { // TODO add group data aggregation
 			vz.load('data', entity.uuid,
@@ -406,7 +397,7 @@ vz.drawPlot = function () {
 	});
 	
 	if (data.length == 0) {
-		$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p>');
+		$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>nothing to plot...</p>');
 		data.push({});  // add empty dataset to show axes
 	}
 	else {
diff --git a/frontend/javascripts/init.js b/frontend/javascripts/init.js
index ee26c38..1424058 100644
--- a/frontend/javascripts/init.js
+++ b/frontend/javascripts/init.js
@@ -71,7 +71,7 @@ $(document).ready(function() {
 
 	// parse uuids & options from cookie
 	vz.uuids.load();
-	//vz.options.load();
+	vz.options.load();
 
 	// initialize user interface
 	vz.wui.init();
diff --git a/frontend/javascripts/options.js b/frontend/javascripts/options.js
index 4d17bc6..062088f 100644
--- a/frontend/javascripts/options.js
+++ b/frontend/javascripts/options.js
@@ -30,7 +30,7 @@ vz.options = {
 	tuples: 300,
 	refresh: false,
 	defaultInterval: 1*24*60*60*1000, // 1 day
-	timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000)
+	timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000) // TODO add option with timezone dropdown
 };
 
 vz.options.plot = {
@@ -57,27 +57,13 @@ vz.options.plot = {
 		monthNames: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
 		tickFormatter: function(val, axis) {
 			var date = new Date(val + vz.options.timezoneOffset); /* add timezone offset */
-			
-			/* TODO add period dependend timeformat 
-			var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min;
-
-			if (delta > 3*365*24*60*60*1000)	// > 3 years
-				vz.options.plot.xaxis.timeformat = '%b %y';
-			else if (delta > 31*24*60*60*1000)	// > 1 month
-				vz.options.plot.xaxis.timeformat = '%d. %b';
-			else if (delta > 14*24*60*60*1000)	// > 2 weeks
-				vz.options.plot.xaxis.timeformat = '%d.%m';
-			else if (delta > 24*60*60*1000)		// > 1 day
-				vz.options.plot.xaxis.timeformat = '%d.%m %h:%M';
-			else if (delta > 60*60*1000)		// > 1 hour
-				vz.options.plot.xaxis.timeformat = '%h:%M';
-			else 					// < 1 hour
-				format = '%h:%M:%S';*/
-
-			return $.plot.formatDate(date, vz.options.plot.xaxis.timeformat, vz.options.plot.xaxis.monthNames);			
+			return $.plot.formatDate(date, this.timeformat, this.monthNames);			
 		}
 	},
-	yaxis: { },
+	yaxis: {
+		min: 0,
+		max: null
+	},
 	selection: { mode: 'x' },
 	crosshair: { mode: 'x' },
 	grid: {
@@ -105,8 +91,10 @@ vz.options.save = function() {
 vz.options.load = function() {
 	for (var key in this) {
 		if (typeof this[key] == 'string' || typeof this[key] == 'number') {
-			this[key] = $.getCookie('vz_' + key);
-			//console.log('loaded option', key, this[key]);
+			var value = $.getCookie('vz_' + key);
+			if (typeof value != undefined) {
+				this[key] = (typeof this[key] == 'number') ? parseFloat(value) : value;
+			}
 		}
 	}
 };
diff --git a/frontend/javascripts/uuid.js b/frontend/javascripts/uuid.js
index fee96ca..eb56737 100644
--- a/frontend/javascripts/uuid.js
+++ b/frontend/javascripts/uuid.js
@@ -28,9 +28,9 @@
  * Add given UUID and update cookie
  */
 vz.uuids.add = function(uuid) {
-	if (vz.uuids.validate(uuid)) {
-		if (!vz.uuids.contains(uuid)) {
-			vz.uuids.push(uuid);
+	if (this.validate(uuid)) {
+		if (!this.contains(uuid)) {
+			this.push(uuid);
 		}
 		else {
 			throw new Exception('UUIDException', 'UUID already added');
@@ -45,8 +45,8 @@ vz.uuids.add = function(uuid) {
  * Remove UUID and update cookie
  */
 vz.uuids.remove = function(uuid) {
-	if (vz.uuids.contains(uuid)) {
-		vz.uuids.remove(uuid);	// remove uuid from array
+	if (this.contains(uuid)) {
+		this.splice(this.indexOf(uuid), 1);	// remove uuid from array
 	}
 	else {
 		throw new Exception('UUIDException', 'UUID unkown: ' + uuid);
@@ -64,7 +64,7 @@ vz.uuids.validate = function(uuid) {
  * Save uuids as cookie
  */
 vz.uuids.save = function() {
-	$.setCookie('vz_uuids', vz.uuids.join(';'));
+	$.setCookie('vz_uuids', this.join(';'));
 };
 
 /**
diff --git a/frontend/stylesheets/style.css b/frontend/stylesheets/style.css
index f08de82..a911338 100644
--- a/frontend/stylesheets/style.css
+++ b/frontend/stylesheets/style.css
@@ -95,25 +95,21 @@ tbody tr td {
 }
 
 /* treeTable for entities */
-#entities tbody span {
+#entity-list tbody span {
 	background-position: left center;
 	background-repeat: no-repeat;
 	padding: 0.2em 0 0.2em 1.7em;
 	margin: 0;
 }
 
-#entities tbody span.channel {
+#entity-list tbody span.channel {
 	background-image: url("../images/chart_curve.png");
 }
 
-#entities tbody span.group {
+#entity-list tbody span.group {
 	background-image: url("../images/folder.png");
 }
 
-#addEntity {
-	margin-top: 10px;
-}
-
 .indicator {
 	height: 12px;
 }
@@ -125,11 +121,6 @@ tbody tr td {
 	opacity: 0.3;
 }
 
-.slider {
-	width: 170px;
-	height: 4px;
-}
-
 .dialog {
 	display: none;
 }