diff --git a/codepot/src/codepot/views/taskbar.php b/codepot/src/codepot/views/taskbar.php
index 42e0e6a4..ba815971 100644
--- a/codepot/src/codepot/views/taskbar.php
+++ b/codepot/src/codepot/views/taskbar.php
@@ -11,6 +11,9 @@ function show_taskbar ($con, $login)
 		$title = (isset($login['email']) && $login['email'] != '')?
 			('title=' . htmlspecialchars($login['email'])): '';
 
+		$hex = $con->converter->AsciiToHex (current_url());
+		print form_open("main/signout/{$hex}", array('id' => 'taskbar_signout_form'));
+
 		/*
 		// attempt to load the user icon regardless of its upload state.
 		// if it has not been uploaded, it won't be found. 
@@ -33,8 +36,14 @@ function show_taskbar ($con, $login)
 
 		print anchor ('user/home', htmlspecialchars($login['id']), $title);
 
-		$hex = $con->converter->AsciiToHex (current_url());
-		print anchor ("main/signout/{$hex}", $con->lang->line('Sign out'));
+
+		print ' ';
+		print form_submit (
+			'login', 
+			$con->lang->line('Sign out'), 
+			'class="button" id="taskbar_signout_button"'
+		);
+		print form_close();
 	}
 	else
 	{
@@ -54,34 +63,38 @@ function show_taskbar ($con, $login)
 			set_value ('user_url', current_url())
 		);
 
+		/*
 		print form_label(
 			$con->lang->line('Username'), 
 			'taskbar_user_name'
 		);
 		print ' ';
+		*/
 		print form_input (
 			'user_name', 
 			set_value ('user_name', $user_name), 
-			'size="12" id="taskbar_user_name"'
+			"size='20' id='taskbar_user_name' placeholder={$con->lang->line('Username')}"
 		);
 
 		print ' ';
+		/*
 		print form_label (
 			$con->lang->line('Password'),
 			'taskbar_user_pass'
 		);
 		print ' ';
+		*/
 		print form_password (
 			'user_pass',
 			set_value ('user_pass', $user_pass),
-			'size="12" id="taskbar_user_pass"'
+			"size='20' id='taskbar_user_pass' placeholder={$con->lang->line('Password')}"
 		);
 
 		print ' ';
 		print form_submit (
 			'login', 
 			$con->lang->line('Sign in'), 
-			'class="button" id="taskbar_signin_ok_button"'
+			'class="button" id="taskbar_signin_button"'
 		);
 //print '</div>';
 
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index 22ebb2ef..ad370ccd 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -101,27 +101,84 @@ body {
 }
 
 .content .taskbar form input[type="text"] {
-	font-weight: bold;
-	/*background-color: #FFFF99;
-	border: 1px solid #FFFF99;*/
-	border: 1px solid #FFFFFF;
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.content .taskbar form input[type="text"]:focus {
+	background-color: #E7E8E7;
+	outline: 0;
 }
 
 .content .taskbar form input[type="password"] {
-	font-weight: bold;
-	/*background-color: #FFFF99;
-	border: 1px solid #FFFF99;*/
-	border: 1px solid #FFFFFF;
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
 }
 
+.content .taskbar form input[type="password"]:focus {
+	background-color: #E7E8E7;
+	outline: 0;
+}
+
+/*
 .content .taskbar form input[type="submit"] {
 	cursor: pointer;
-	height: 1.6em; /* lower than line-height of taskbar */
+	height: 1.8em; // lower than line-height of taskbar 
 	vertical-align: middle;
 	padding-left: 5px;
 	padding-right: 5px;
 	text-transform: uppercase;
 }
+*/
+
+.content .taskbar .button {
+	cursor: pointer;
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+	padding-left: 5px;
+	padding-right: 5px;
+	text-transform: uppercase;
+
+	background: #3498db;
+	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+	background-image: -o-linear-gradient(top, #3498db, #2980b9);
+	background-image: linear-gradient(to bottom, #3498db, #2980b9);
+	-webkit-border-radius: 28;
+	-moz-border-radius: 28;
+	border-radius: 5px;
+	text-shadow: 1px 1px 3px #666666;
+	color: #ffffff;
+	text-decoration: none;
+}
+
+.content .taskbar .button:hover {
+	background: #3cb0fd;
+	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+	text-decoration: none;
+}
+
 .content .projectbar {
 	/*margin: 0.1em 0em 0em 0em;*/
 	padding: 0.5em 0.5em 0.5em 0.5em;
@@ -616,3 +673,5 @@ pre.prettyprint li.L9 { background: #eee }
 	border: 0;
 	white-space: nowrap;
 }
+
+