diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg
index 3d45e1ff..c91d8ac1 100644
--- a/editor/images/svg_edit_icons.svg
+++ b/editor/images/svg_edit_icons.svg
@@ -312,6 +312,37 @@
 	</svg>
 </g>
 
+<g id="fill">
+<svg width="32" height="33" xmlns="http://www.w3.org/2000/svg">
+  <g id="svg_5">
+   <path id="svg_4" d="m17.49167,10.97621c6.9875,-0.325 12.1875,2.70833 12.13333,7.36667l-0.325,10.075c-0.75833,4.0625 -2.275,3.0875 -3.03333,0.10833l0.21667,-9.64166c-0.43333,-0.975 -1.08333,-1.625 -1.95,-1.51667" stroke-linejoin="round" stroke="#606060" fill="#c0c0c0"/>
+   <path id="svg_1" d="m2.00055,17.1309l10.72445,-10.72445l12.67445,12.13279l-3.52056,0.05389l-9.15389,9.26223l-10.72445,-10.72445z" stroke-linejoin="round" stroke="#000000" fill="#c0c0c0"/>
+   <path id="svg_3" d="m14.35,13.57621c-0.1625,-3.95417 0.86667,-11.7 -1.84167,-11.59167c-2.70833,0.10833 -2.6,2.05833 -2.16667,6.93333" stroke-linejoin="round" stroke="#000000" fill="none"/>
+   <circle id="svg_2" r="1.60938" cy="15.20121" cx="14.45833" stroke-linejoin="round" stroke="#000000" fill="none"/>
+  </g>
+</svg>
+</g>
+
+<g id="stroke">
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="none" stroke="#707070" stroke-width="10" x="8.625" y="8.625" width="32.75" height="32.75" id="svg_1"/>
+</svg>
+</g>
+
+<g id="opacity">
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <linearGradient y2="0.1" x2="0.9" y1="0.9" x1="0.1" id="svg_7">
+   <stop stop-color="#000000" offset="0"/>
+   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
+  </linearGradient>
+ </defs>
+  <rect id="svg_4" height="50" width="50" y="0" x="0" fill="#ffffff"/>
+  <rect id="svg_1" height="25" width="25" y="0" x="0" fill="#a0a0a0"/>
+  <rect id="svg_2" height="25" width="25" y="25" x="25" fill="#a0a0a0"/>
+  <rect id="svg_3" height="50" width="50" y="0" x="0" stroke-width="2" stroke="url(#svg_7)" fill="url(#svg_7)"/>
+ </svg>
+</g>
 
 <g id="new_image">
 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -657,6 +688,32 @@
 </svg>
 </g>
 
+<g id="angle">
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-width="2" stroke-dasharray="1,3" id="svg_6" d="m32.78778,41.03469c-0.40379,-8.68145 -4.50873,-16.79003 -12.11365,-20.5932" stroke="#000000" fill="none"/>
+  <path id="svg_7" d="m29.20348,7.67055l-24.20348,34.47921l41.16472,0" stroke-width="3" stroke="#404040" fill="none"/>
+</svg>
+</g>
+
+<!-- Currently does not work with svg-icons... -->
+<!-- 
+<g id="blur">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <linearGradient id="svg_2" x1="0.36328" y1="0.10156" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff"/>
+   <stop offset="1" stop-color="#3b7e9b"/>
+  </linearGradient>
+  <filter id="svg_4_blur">
+   <feGaussianBlur stdDeviation="0.8" in="SourceGraphic"/>
+  </filter>
+ </defs>
+  <path id="svg_1" d="m11.625,18l-9.625,0l0,-12l9.625,0" stroke="#000000" fill="url(#svg_2)"/>
+  <path filter="url(#svg_4_blur)" id="svg_4" d="m11.75,6l10.25,0l0,12l-10.25,0" stroke="#000000" fill="url(#svg_2)"/>
+</svg>
+</g>
+ -->
+
 <g id="align">
 	<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
 	  <rect stroke="#606060" fill="#c0c0c0" id="svg_4" height="7" width="12" y="7.5" x="4.5"/>
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 463d482f..d842e9a0 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -78,6 +78,23 @@
 	margin-top: 0;
 }
 
+#svg_editor #color_tools .icon_label {
+	padding-right: 0;
+	height: 23px;
+	min-width: 18px;
+	cursor: pointer;
+}
+
+#group_opacityLabel, 
+#zoomLabel {
+	cursor: pointer;
+}
+
+#color_tools .icon_label > * {
+	position: relative;
+	top: 1px;
+}
+
 #svg_editor div#palette {
 	float: left;
 	width: 6848px;
@@ -475,8 +492,8 @@ span.zoom_tool {
 	padding: 3px;
 }
 
-#zoom_panel label {
-	margin-top: 2px;
+#zoom_panel {
+	margin-top: 5px;
 }
 
 .dropdown {
@@ -690,7 +707,7 @@ span.zoom_tool {
 }
 
 #svg_editor #tools_bottom_2 {
-	width: 215px;
+	width: 180px;
 	position: relative;
 	float: left;
 }
@@ -714,7 +731,7 @@ span.zoom_tool {
 	background: #f0f0f0;
 	padding: 0 5px;
 	vertical-align: middle;
-	height: 26px;
+	height: 25px;
 }
 
 #toggle_stroke_tools {
@@ -766,7 +783,7 @@ span.zoom_tool {
 }
 
 
-#tools_top .dropdown div {
+#tools_top .dropdown .icon_label {
 	border: 1px solid transparent;
 	margin-top: 3px;
 }
@@ -829,7 +846,7 @@ span.zoom_tool {
 	padding: 0 3px;
 }
 
-#tool_opacity .dropdown button {
+#tools_bottom .dropdown button {
 	margin-top: 2px;
 }
 
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 36f8c03e..1451f643 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -166,9 +166,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</label>
 		</div>
 
-		<label id="tool_angle">
-			<span id="angleLabel">angle:</span>
-			<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
+		<label id="tool_angle" title="Change rotation angle">
+			<span id="angleLabel" class="icon_label"></span>
+			<input id="angle" size="2" value="0" type="text"/>
 		</label>
 		
 		<div class="toolset" id="tool_blur">
@@ -404,10 +404,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 <div id="tools_bottom" class="tools_panel">
 
     <!-- Zoom buttons -->
-	<div id="zoom_panel" class="toolset">
+	<div id="zoom_panel" class="toolset" title="Change zoom level">
 		<label>
-		<span id="zoomLabel" class="zoom_tool">zoom:</span>
-		<input id="zoom" title="Change zoom level" size="3" value="100" type="text" />
+		<span id="zoomLabel" class="zoom_tool icon_label"></span>
+		<input id="zoom" size="3" value="100" type="text" />
 		</label>
 		<div id="zoom_dropdown" class="dropdown">
 			<button></button>
@@ -430,20 +430,16 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 	<div id="tools_bottom_2">
 		<div id="color_tools">
-			<div class="color_tool" id="tool_fill">
-				<label>
-					fill:
-				</label>
+			<div class="color_tool" id="tool_fill" title="Change fill color">
+				<label class="icon_label" for="fill_color"></label>
 				<div class="color_block">
 					<div id="fill_bg"></div>
-					<div id="fill_color" class="color_block"  title="Change fill color"></div>
+					<div id="fill_color" class="color_block"></div>
 				</div>
 			</div>
 		
 			<div class="color_tool" id="tool_stroke">
-				<label>
-					stroke:
-				</label>
+				<label class="icon_label" title="Change stroke color"></label>
 				<div class="color_block">
 					<div id="stroke_bg"></div>
 					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
@@ -485,10 +481,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</div>
 		</div>
 	
-		<div class="toolset" id="tool_opacity">
+		<div class="toolset" id="tool_opacity" title="Change selected item opacity">
 			<label>
-				<span id="group_opacityLabel">opac:</span>
-				<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
+				<span id="group_opacityLabel" class="icon_label"></span>
+				<input id="group_opacity" size="3" value="100" type="text"/>
 			</label>
 			<div id="opacity_dropdown" class="dropdown">
 				<button></button>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 21b645e5..80fee2fc 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -336,6 +336,11 @@
 					'#rwidthLabel, #iwidthLabel':'width',
 					'#rheightLabel, #iheightLabel':'height',
 					'#cornerRadiusLabel span':'c_radius',
+					'#angleLabel':'angle',
+					'#zoomLabel':'zoom',
+					'#tool_fill label': 'fill',
+					'#tool_stroke .icon_label': 'stroke',
+					'#group_opacityLabel': 'opacity',
 					
 					'.flyout_arrow_horiz':'arrow_right',
 					'.dropdown button, #main_button .dropdown':'arrow_down',
@@ -349,7 +354,8 @@
 					'#main_button .dropdown .svg_icon': 9,
 					'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
 					'.toolbar_button button .svg_icon':16,
-					'.stroke_tool div div .svg_icon': 20
+					'.stroke_tool div div .svg_icon': 20,
+					'#tools_bottom label .svg_icon': 18
 				},
 				callback: function(icons) {
 					$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
@@ -1811,7 +1817,23 @@
 		// 		holder.empty().append(icon)
 		// 			.attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
 		// 	}
-			
+		
+			// Unfocus text input when workarea is mousedowned.
+			(function() {
+				var inp;
+
+				var unfocus = function() {
+					$(inp).blur();
+				}
+
+				$('#svg_editor input:text').focus(function() {
+					inp = this;
+					workarea.mousedown(unfocus);
+				}).blur(function() {
+					workarea.unbind('mousedown', unfocus);
+				});
+			}());
+
 			var clickSelect = function() {
 				if (toolButtonClick('#tool_select')) {
 					svgCanvas.setMode('select');
@@ -2707,16 +2729,26 @@
 				});
 			},1000);
 				
-			$('#fill_color').click(function(){
-				colorPicker($(this));
+			$('#fill_color, #tool_fill .icon_label').click(function(){
+				colorPicker($('#fill_color'));
 				updateToolButtonState();
 			});
 		
-			$('#stroke_color').click(function(){
-				colorPicker($(this));
+			$('#stroke_color, #tool_stroke .icon_label').click(function(){
+				colorPicker($('#stroke_color'));
 				updateToolButtonState();
 			});
-		
+			
+			$('#group_opacityLabel').click(function() {
+				$('#opacity_dropdown button').mousedown();
+				$(window).mouseup();
+			});
+			
+			$('#zoomLabel').click(function() {
+				$('#zoom_dropdown button').mousedown();
+				$(window).mouseup();
+			});
+			
 			$('#tool_move_top').mousedown(function(evt){
 				$('#tools_stacking').show();
 				evt.preventDefault();