diff --git a/app/assets/stylesheets/basic/orbit_bar.css.erb b/app/assets/stylesheets/basic/orbit_bar.css.erb
index 290f61f..8f59e5b 100644
--- a/app/assets/stylesheets/basic/orbit_bar.css.erb
+++ b/app/assets/stylesheets/basic/orbit_bar.css.erb
@@ -8,10 +8,11 @@
 	margin-bottom: 0;
 }
 #orbit-bar .orbitlogo {
-	width: 20px;
-	height: 20px;
+	width: 50px;
+	height: 40px;
+	padding: 0!important;
 	background-size: 70%;
-	display: inline-block;
+	display: block;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-image: url(<%= asset_path 'orbit-logo.svg' %>);
@@ -19,8 +20,23 @@
 	/* For Suck IE */
 	background-image: url(<%= asset_path 'orbit-logo.png' %>)\9;
 }
+#orbit-bar .dropdown-menu li > a {
+	padding: 0 20px;
+	display: block;
+	height: 30px;
+	line-height: 30px;
+}
+#orbit-bar .dropdown-menu li i {
+	float: left;
+	display: inline-block;
+	margin-right: 5px;
+	line-height: 30px;
+	height: 100%;
+}
 #orbit-bar.navbar .nav > li > a {
 	color: #EEE;
+	padding: 0 15px;
+	display: block;
 	text-shadow: 0 -1px 0 #000;
 	border-right: 1px solid #363636;
 	box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
@@ -34,6 +50,11 @@
 	background-color: #0095CF;
 	text-shadow: 0 -1px 0 #014380;
 }
+#orbit-bar.navbar .nav > li > a > [class^="icon"],
+#orbit-bar.navbar .nav > li > a > [class*=" icon"] {
+	line-height: 40px;
+	display: block;
+}
 #orbit-bar.navbar .nav li.dropdown.open > .dropdown-toggle,
 #orbit-bar.navbar .nav li.dropdown.active > .dropdown-toggle,
 #orbit-bar.navbar .nav li.dropdown.open.active > .dropdown-toggle {
@@ -66,6 +87,10 @@
 	right: auto;
 	bottom: auto;
 }
+#orbit-bar .nav > li {
+	display: block;
+	line-height: 40px;
+}
 #orbit-bar .nav [class^="icon"],
 #orbit-bar .nav [class*=" icon"] {
 	font-size: 1.5em;
@@ -92,24 +117,53 @@
 #orbit-bar .modal .input-prepend {
 	margin-bottom: 15px;
 }
+#orbit-bar .modal .other-sign-in {
+	position: relative;
+	text-align: center;
+	margin-top: 20px;
+	margin-bottom: 30px;
+	padding-bottom: 20px;
+	border-bottom: 1px solid #EDEDED;
+}
+#orbit-bar .modal .other-sign-in .btn {
+	padding: 4px 0;
+	display: block;
+	margin-bottom: 5px;
+	width: 100%;
+}
+#orbit-bar .modal .other-sign-in p {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	background-color: #FFF;
+	padding: 0 10px;
+	margin-bottom: 0;
+	margin-left: -25px;
+	line-height: 30px;
+	left: 50%;
+	bottom: -15px;
+	font-size: 1.3em;
+	color: #B1B1B1;
+}
 
 /*Search*/
 #orbit-bar #search {
 	margin-bottom: 0;
 	position: relative;
-	padding: 8px 10px 0;
+	padding: 0 10px;
 	border-right: 1px solid #363636;
 	box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
 }
 #orbit-bar #search form {
-	margin-bottom: 8px;
+	margin: 8px 0;
 }
 #orbit-bar #search input[type="text"] {
-	height: 14px;
+	height: 23px;
 	line-height: 15px;
 	font-size: 13px;
 	padding-left: 25px;
 	padding-right: 25px;
+	display: block;
 	-webkit-border-radius: 12px;
 	   -moz-border-radius: 12px;
 	     -o-border-radius: 12px;
@@ -122,15 +176,17 @@
 #orbit-bar #search .search-clear {
 	position: absolute;
 	color: #A3A3A3;
-	top: 14px;
+	top: 16px;
 }
 #orbit-bar #search .icon-search {
-	left: 20px;
+	left: 15px;
 	top: 12px;
 	font-size: 1.2em;
+	width: 1.25em;
+	margin-top: 0;
 }
 #orbit-bar #search .search-clear {
-	right: 14px;
+	right: 13px;
 	font-size: 1.3em;
 }
 #orbit-bar #search .search-clear:hover {
@@ -245,7 +301,7 @@
 #orbit-bar #orbit-user .user-pic {
 	width: 40px;
 	height: 40px;
-	margin: -13px 10px -10px -15px;
+	margin: -12px 10px -10px -15px;
 }
 
 /*Language & flag*/
@@ -327,4 +383,4 @@
 		width: 350px;
 		margin-left: -175px;
 	}
-}
\ No newline at end of file
+}
diff --git a/app/views/front/show_banner.html.erb b/app/views/front/show_banner.html.erb
index c425d17..aaaf1fd 100644
--- a/app/views/front/show_banner.html.erb
+++ b/app/views/front/show_banner.html.erb
@@ -1,32 +1,58 @@
-<div style='position:relative'>
-  <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class="orbit-cycle-slideshow"  data-cycle-timeout="<%= @ad_banner.timeout_millisecond %>" data-cycle-fx="<%= @ad_banner.ad_fx %>" data-cycle-pager=".banner_nav_<%= @ad_banner.title.dehumanize %>" data-cycle-pager-template="<li class='needed'><a href='#'></a></li>" data-cycle-pager-active-class="activeSlide" data-cycle-random='true' style="z-index: 0">
+<div>
+  <div
+    id='slideshow-<%= @ad_banner.title.dehumanize %>'
+    class="orbit-cycle-slideshow"
+    data-cycle-timeout="<%= @ad_banner.timeout_millisecond %>"
+    data-cycle-fx="<%= @ad_banner.ad_fx %>"
+
+    data-cycle-pager-active-class="activeSlide"
+    data-cycle-random='true'
+
+    data-cycle-slides=".slide-img"
+    data-overlay=".adBanner-overlay .caption"
+    data-pager=".<%= @ad_banner.title.dehumanize %> .navigation"
+    data-cycle-pager-template="<li class='dot'></li>"
+    style="z-index: 0">
+
     <% @ad_banner.ad_images.can_display.each do |ad_image| %>
-      <% link = ad_image_link(ad_image) %>
-      <%= image_tag ad_image.file, alt: ad_image.title, title: ad_image.title, width: @ad_banner.width, height: @ad_banner.height, link_open: ad_image.link_open, link_url: link, style: "display:none; #{'cursor:pointer;' if link.present?}" %>
+      <div
+        class="slide-img"
+        data-cycle-title="<%= ad_image.title %>"
+        data-cycle-desc="<%= ad_image.context %>"
+        data-overlay-template="<h2><%= ad_image.title %></h2><%= ad_image.context %>">
+        <% link = ad_image_link(ad_image) %>
+        <%= image_tag ad_image.file, alt: ad_image.title, title: ad_image.title, width: @ad_banner.width, height: @ad_banner.height, link_open: ad_image.link_open, link_url: link, style: "#{'cursor:pointer;' if link.present?}" %>
+        <%= %>
+      </div>
     <% end %>
   </div>
-  <ul class='clear banner_nav banner_nav_<%= @ad_banner.title.dehumanize %>'></ul>
+  <div class="<%= @ad_banner.title.dehumanize %> adBanner-overlay">
+    <div class="caption"></div>
+    <ul class="navigation"></ul>
+  </div>
+  <!-- <ul class='clear banner_nav banner_nav_<%#= @ad_banner.title.dehumanize %>'></ul> -->
 </div>
 
 <script>
   $(function(){
-    if($("#slideshow-<%= @ad_banner.title.dehumanize %> img").length > 1){    
-      var a = [];
-      <% @ad_banner.ad_images.can_display.each do |image| %>
-        a.push("<%= image.file.url %>");
-      <% end %>
-      $.preload(a, 2, function(){
-        $('.orbit-cycle-slideshow').cycle();
-        var lis = $("ul.banner_nav_<%= @ad_banner.title.dehumanize %> li");
-        if( lis.length > a.length ){
-          for( i = lis.length - 1; i > a.length - 1; i-- ){
-            lis[i].remove();
-          }
-        }
-      });
-    }
-    else{
-      $("#slideshow-<%= @ad_banner.title.dehumanize %> img").show()
-    }
+    // if($("#slideshow-<%= @ad_banner.title.dehumanize %> img").length > 1){
+    //   var a = [];
+    //   <% @ad_banner.ad_images.can_display.each do |image| %>
+    //     a.push("<%= image.file.url %>");
+    //   <% end %>
+    //   $.preload(a, 2, function(){
+    //     $('.orbit-cycle-slideshow').cycle();
+    //     var lis = $("ul.banner_nav_<%= @ad_banner.title.dehumanize %> li");
+    //     if( lis.length > a.length ){
+    //       for( i = lis.length - 1; i > a.length - 1; i-- ){
+    //         lis[i].remove();
+    //       }
+    //     }
+    //   });
+    // }
+    // else{
+    //   $("#slideshow-<%= @ad_banner.title.dehumanize %> img").show()
+    // }
+    $('.orbit-cycle-slideshow').cycle();
   });
 </script>
\ No newline at end of file
diff --git a/config/mongoid.yml b/config/mongoid.yml
index 0b1b1cf..ec19e8c 100644
--- a/config/mongoid.yml
+++ b/config/mongoid.yml
@@ -8,7 +8,7 @@ defaults: &defaults
 
 development:
   <<: *defaults
-  database: orbit_site_new
+  database: thu_new
 
 
 
@@ -24,4 +24,4 @@ production:
   # password: <%= ENV['MONGOID_PASSWORD'] %>
   # database: <%= ENV['MONGOID_DATABASE'] %>
   <<: *defaults
-  database: orbit_site_new
+  database: thu_new