diff --git a/WebContent/OSRM.GUI.js b/WebContent/OSRM.GUI.js
index 566f439e6..e2096f664 100644
--- a/WebContent/OSRM.GUI.js
+++ b/WebContent/OSRM.GUI.js
@@ -20,31 +20,26 @@ or see http://www.gnu.org/licenses/agpl.txt.
 
 
 OSRM.GUI = {
+
+// default state
+visible: true,
+width: 410,
 		
 // show/hide main-gui
 toggleMain: function() {
 	// show main-gui
-	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+	if( OSRM.GUI.visible == false ) {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";;
 		
-		document.getElementById('blob-wrapper').style.visibility="hidden";			
+		document.getElementById('blob-wrapper').style.visibility="hidden";
 		document.getElementById('main-wrapper').style.left="5px";
-		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 ) {
-			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
-		}
 	// hide main-gui
 	} else {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 			
-		document.getElementById('main-wrapper').style.left="-410px";
- 		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 ) {
- 			document.getElementById('blob-wrapper').style.visibility="visible";
-			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";		
- 		}
+		document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
 	}
 
 	// execute after animation
@@ -53,18 +48,22 @@ toggleMain: function() {
 		document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
 		document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
 		document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
+	} else {
+		OSRM.GUI.onMainTransitionEnd();		
 	}
 },
 
 // do stuff after main-gui animation finished
 onMainTransitionEnd: function() {
 	// after hiding main-gui
-	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		document.getElementById('blob-wrapper').style.visibility="visible";
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+		OSRM.GUI.visible = false;		
 	// after showing main-gui
 	} else {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+ 		OSRM.GUI.visible = true;		
 	}
 },
 
diff --git a/WebContent/OSRM.Markers.js b/WebContent/OSRM.Markers.js
index 19baf24c0..801b2359e 100644
--- a/WebContent/OSRM.Markers.js
+++ b/WebContent/OSRM.Markers.js
@@ -61,9 +61,9 @@ centerView: function(zoom) {
 		zoom = OSRM.DEFAULTS.ZOOM_LEVEL;
 	
 	var position;
-	if( document.getElementById('main-wrapper').style.left != "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		var point = OSRM.G.map.project( this.position, zoom);
-		point.x-=200;
+		point.x-=OSRM.GUI.width/2;
 		position = OSRM.G.map.unproject(point,zoom);		
 	} else {
 		position = this.position;
@@ -204,10 +204,14 @@ removeMarker: function(id) {
 	if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) {
 		this.removeVias();
 		document.getElementById('input-source-name').value = "";
+		document.getElementById('information-box').innerHTML = "";
+		document.getElementById('information-box-headline').innerHTML = "";		
 	} else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) {
 		this.removeVias();
 		id = this.route.length-1;
 		document.getElementById('input-target-name').value = "";
+		document.getElementById('information-box').innerHTML = "";
+		document.getElementById('information-box-headline').innerHTML = "";		
 	}
 	
 	this.route[id].hide();
diff --git a/WebContent/OSRM.Route.js b/WebContent/OSRM.Route.js
index d76af161e..277a953c0 100644
--- a/WebContent/OSRM.Route.js
+++ b/WebContent/OSRM.Route.js
@@ -54,12 +54,12 @@ setStyle: function(style) {
 centerView: function() {
 	var bounds = new L.LatLngBounds( this.getPositions() );
 	
-	if( document.getElementById('main-wrapper').style.left != "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		var southwest = bounds.getSouthWest();
 		var northeast = bounds.getNorthEast();
 		var zoom = OSRM.G.map.getBoundsZoom(bounds);
 		var sw_point = OSRM.G.map.project( southwest, zoom);
-		sw_point.x-=410;
+		sw_point.x-=OSRM.GUI.width/2;
 		sw_point.y+=10;
 		var ne_point = OSRM.G.map.project( northeast, zoom);
 		ne_point.y-=10;
diff --git a/WebContent/images/osrm-logo.png b/WebContent/images/osrm-logo.png
index c3519dade..30d249425 100644
Binary files a/WebContent/images/osrm-logo.png and b/WebContent/images/osrm-logo.png differ
diff --git a/WebContent/main.css b/WebContent/main.css
index dfb7a8d72..062bb3f9d 100644
--- a/WebContent/main.css
+++ b/WebContent/main.css
@@ -169,7 +169,7 @@ html, body, #map {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 200px;
+    width: 192px;
     height: 50px;
 	text-align:center;
 	vertical-align: middle;    
diff --git a/WebContent/main.js b/WebContent/main.js
index 55b19f71e..9be9ce245 100644
--- a/WebContent/main.js
+++ b/WebContent/main.js
@@ -28,6 +28,7 @@ function init() {
 	prefetchIcons();
 	
 	initLocale();
+	initGUI();
 	initMap();
 	initRouting();
 
@@ -72,6 +73,13 @@ function prefetchIcons() {
 }
 
 
+// init GUI
+function initGUI() {
+	OSRM.GUI.visible = true;
+	OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
+}
+
+
 // init localization
 function initLocale() {
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
@@ -147,15 +155,21 @@ function initMap() {
 	OSRM.G.map.addControl(layersControl);
 
     // move zoom markers
-	getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
+	getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";
 	getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 
 	// initial map position and zoom
-	OSRM.G.map.setView( new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE), OSRM.DEFAULTS.ZOOM_LEVEL);
+	var position = new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE);
+	if( OSRM.GUI.visible == true ) {
+		var point = OSRM.G.map.project( position, OSRM.DEFAULTS.ZOOM_LEVEL);
+		point.x-=OSRM.GUI.width/2;
+		position = OSRM.G.map.unproject(point,OSRM.DEFAULTS.ZOOM_LEVEL);
+	}	
+	OSRM.G.map.setView( position, OSRM.DEFAULTS.ZOOM_LEVEL);
+	
+	// map events
 	OSRM.G.map.on('zoomend', function(e) { getRoute(OSRM.C.FULL_DESCRIPTION); });
 	OSRM.G.map.on('contextmenu', function(e) {});
-
-	// click on map to set source and target nodes
 	OSRM.G.map.on('click', function(e) {
 		if( !OSRM.G.markers.hasSource() ) {
 			var index = OSRM.G.markers.setSource( e.latlng );