diff --git a/Gemfile b/Gemfile
--- a/Gemfile
+++ b/Gemfile
@@ -2,6 +2,8 @@
 
 gem 'rails', '3.2.21'
 
+gem 'select2-rails'
+
 # Bundle edge Rails instead:
 # gem 'rails', :git => 'git://github.com/rails/rails.git'
 
diff --git a/Gemfile.lock b/Gemfile.lock
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -135,6 +135,8 @@
       railties (~> 3.2.0)
       sass (>= 3.1.10)
       tilt (~> 1.3)
+    select2-rails (4.0.1)
+      thor (~> 0.14)
     sprockets (2.2.3)
       hike (~> 1.2)
       multi_json (~> 1.0)
@@ -176,6 +178,7 @@
   rouge
   rspec-rails (~> 2.99.0)
   sass-rails (~> 3.2.6)
+  select2-rails
   test-unit
   uglifier
   verification!
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -10,9 +10,17 @@
 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 // GO AFTER THE REQUIRES BELOW.
 //
-//= require prototype
-//= require prototype_ujs
-//= require effects
-//= require dragdrop
-//= require controls
+//= require jquery
+//= require jquery_ujs
+//= require jquery.ui.all
 //= require bootstrap-sprockets
+//= require custom
+//= require select2
+
+
+// since this is after blank line, it is not downloaded
+//x= require prototype
+//x= require prototype_ujs
+//x= require effects
+//x= require dragdrop
+//x= require controls
diff --git a/app/assets/javascripts/custom.js.coffee b/app/assets/javascripts/custom.js.coffee
new file mode 100644
--- /dev/null
+++ b/app/assets/javascripts/custom.js.coffee
@@ -0,0 +1,2 @@
+$ ->
+  $(".select2").select2()
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -10,11 +10,13 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require_tree .
- *= require_self
+ // bootstrap says that we should not do this, but @import each file instead
+ #   *= require_tree .
+ #   *= require_self
  */
 
-
+@import jquery.ui.all
+@import jquery.ui.core
 @import jquery.ui.core
 @import jquery.ui.theme
 @import jquery.ui.datepicker
@@ -23,17 +25,18 @@
 @import jquery-tablesorter/theme.metro-dark
 @import tablesorter-theme.cafe
 
-
-@import "bootstrap-sprockets"
-@import "bootstrap"
+@import bootstrap-sprockets
+@import bootstrap
+@import select2
+@import select2-bootstrap
 
 .secondnavbar
   top: 50px
 
 body
   background: white image-url("topbg.jpg") repeat-x top center
-  font-size: 13px
-  font-family: Tahoma, "sans-serif"
+  //font-size: 13px
+  //font-family: Tahoma, "sans-serif"
   margin: 10px
   padding: 10px
   padding-top: 100px
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,9 +1,16 @@
 class ApplicationController < ActionController::Base
   protect_from_forgery
 
+  before_filter :current_user 
+
   SINGLE_USER_MODE_CONF_KEY = 'system.single_user_mode'
   MULTIPLE_IP_LOGIN_CONF_KEY = 'right.multiple_ip_login'
 
+  # Returns the current logged-in user (if any).
+  def current_user
+    @current_user ||= User.find(session[:user_id])
+  end
+
   def admin_authorization
     return false unless authenticate
     user = User.find(session[:user_id], :include => ['roles'])
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -15,14 +15,14 @@
     if GraderConfiguration['right.user_hall_of_fame']
       left_menu << add_menu("#{I18n.t 'menu.hall_of_fame'}", 'report', 'problem_hof')
     end
-    left_menu << add_menu("#{I18n.t 'menu.help'}", 'main', 'help')
-
 
-    right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-comment')} #{I18n.t 'menu.messages'}".html_safe, 'messages', 'list')
+    right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-question-sign')}".html_safe, 'main', 'help')
+    right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-comment')}".html_safe, 'messages', 'list', {title: I18n.t('menu.messages'), data: {toggle: 'tooltip'}})
     if GraderConfiguration['system.user_setting_enabled']
-      right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-cog')} #{I18n.t 'menu.settings'}".html_safe, 'users', 'index')
+      right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-cog')}".html_safe, 'users', 'index', {title: I18n.t('menu.settings'), data: {toggle: 'tooltip'}})
     end
-    right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-log-out')} #{I18n.t 'menu.log_out'}".html_safe, 'main', 'login',)
+    right_menu << add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-log-out')} #{user.full_name}".html_safe, 'main', 'login', {title: I18n.t('menu.log_out'), data: {toggle: 'tooltip'}})
+
 
     result = content_tag(:ul,left_menu.html_safe,class: 'nav navbar-nav') + content_tag(:ul,right_menu.html_safe,class: 'nav navbar-nav navbar-right')
   end
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
new file mode 100644
--- /dev/null
+++ b/app/views/layouts/_header.html.haml
@@ -0,0 +1,35 @@
+%header.navbar.navbar-default.navbar-fixed-top
+  %nav
+    .container-fluid
+      .navbar-header
+        %a.navbar-brand{href: main_list_path} หน้าหลัก
+      .collapse.navbar-collapse
+        %ul.nav.navbar-nav
+          - if (@current_user!=nil) and (GraderConfiguration.show_tasks_to?(@current_user))
+            = add_menu("#{I18n.t 'menu.tasks'}", 'tasks', 'list')
+            = add_menu("#{I18n.t 'menu.submissions'}", 'main', 'submission')
+            = add_menu("#{I18n.t 'menu.test'}", 'test', 'index')
+          - if GraderConfiguration['right.user_hall_of_fame']
+            = add_menu("#{I18n.t 'menu.hall_of_fame'}", 'report', 'problem_hof')
+        %ul.nav.navbar-nav.navbar-right
+          = add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-question-sign')}".html_safe, 'main', 'help')
+          = add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-comment')}".html_safe, 'messages', 'list', {title: I18n.t('menu.messages'), data: {toggle: 'tooltip'}})
+          - if GraderConfiguration['system.user_setting_enabled']
+            = add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-cog')}".html_safe, 'users', 'index', {title: I18n.t('menu.settings'), data: {toggle: 'tooltip'}})
+          = add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-log-out')} #{@current_user.full_name}".html_safe, 'main', 'login', {title: I18n.t('menu.log_out'), data: {toggle: 'tooltip'}})
+
+  - if (@current_user!=nil) and (session[:admin]) 
+    %nav.navbar.navbar-default.navbar-fixed-top.navbar-inverse.secondnavbar
+      .container-fluid
+        .collapse.navbar-collapse
+          %ul.nav.navbar-nav
+            = add_menu( '[Announcements]', 'announcements', 'index')
+            = add_menu( '[Msg console]', 'messages', 'console')
+            = add_menu( '[Problems]', 'problems', 'index')
+            = add_menu( '[Users]', 'user_admin', 'index')
+            = add_menu( '[Results]', 'user_admin', 'user_stat')
+            = add_menu( '[Report]', 'report', 'multiple_login')
+            = add_menu( '[Graders]', 'graders', 'list')
+            = add_menu( '[Contests]', 'contest_management', 'index')
+            = add_menu( '[Sites]', 'sites', 'index')
+            = add_menu( '[System config]', 'configurations', 'index')
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -9,22 +9,7 @@
   = yield :head
 
 %body
-  %nav.navbar.navbar-default.navbar-fixed-top
-    .container-fluid
-      .navbar-header
-        %a.navbar-brand{href: main_list_path} หน้าหลัก
-      .collapse.navbar-collapse
-        = navbar_user_header #call helper function
-  %nav.navbar.navbar-default.navbar-fixed-top.navbar-inverse.secondnavbar
-    .container-fluid
-      .collapse.navbar-collapse
-        %ul.nav.navbar-nav
-          %li
-            %a{href:'#'}hahaha
-
-  %div.userbar
-    = user_header
+  = render 'layouts/header'
 
   = content_tag(:p,flash[:notice],:style => "color:green") if flash[:notice]!=nil
   = yield
-
diff --git a/app/views/main/_submission_box.html.erb b/app/views/main/_submission_box.html.erb
deleted file mode 100644
--- a/app/views/main/_submission_box.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<%= form_tag({:action => 'submit'}, :multipart => true) do %>
-<b>Problem:</b> <%= select 'submission', 'problem_id', 
-             	[[(t 'main.specified_in_header'),'-1']] + 
-		@problems.collect {|p| [p.full_name, p.id]},
-		:selected => '-1' %>
-<b>File:</b> <%= file_field_tag 'file' %>
-<%= submit_tag 'Submit' %>
-<% end %>
diff --git a/app/views/main/_submission_box.html.haml b/app/views/main/_submission_box.html.haml
new file mode 100644
--- /dev/null
+++ b/app/views/main/_submission_box.html.haml
@@ -0,0 +1,6 @@
+= form_tag({:action => 'submit'}, :multipart => true) do
+  %b Problem:
+  = select 'submission', 'problem_id', [[(t 'main.specified_in_header'),'-1']] + @problems.collect {|p| [p.full_name, p.id]}, {:selected => '-1'}, { class: 'select2' }
+  %b File:
+  = file_field_tag 'file'
+  = submit_tag 'Submit'
diff --git a/app/views/main/list.html.haml b/app/views/main/list.html.haml
--- a/app/views/main/list.html.haml
+++ b/app/views/main/list.html.haml
@@ -22,14 +22,16 @@
 
 - if GraderConfiguration.show_tasks_to?(@user)
   - if not GraderConfiguration.multicontests?
-    %table.info
-      %tr.info-head
-        %th
-        %th Tasks name
-        %th Full name
-        %th # of sub(s)
-        %th Results
-      = render :partial => 'problem', :collection => @problems
+    %table.table.table-striped
+      %thead
+        %tr.info-head
+          %th #
+          %th Tasks name
+          %th Full name
+          %th # of sub(s)
+          %th Results
+      %tbody
+        = render :partial => 'problem', :collection => @problems
   - else
     - @contest_problems.each do |cp|
       - if cp[:problems].length > 0