diff --git a/app/assets/javascripts/preference_sidebar.js b/app/assets/javascripts/preference_sidebar.js
new file mode 100644
index 000000000..0bcf7d130
--- /dev/null
+++ b/app/assets/javascripts/preference_sidebar.js
@@ -0,0 +1,210 @@
+$(document).ready(function() {
+	$('#btn_add_sidebar_item').click(function(e) {			
+		e.preventDefault(); 
+		var $select_option = $('#course_navbar_preference_course_id').find(':selected');
+		if($select_option.val()){			       
+			var data = {add : true, id : $select_option.val(), arg : {is_enabled : true}, success_func : function(result){
+					if(result != null){
+						update_layout_add(result);
+					}					
+				}
+			};  
+			sidebar_update_values(data);		
+		}		
+	});
+	
+	$('input[id*="ip_display_st_level_ach"]').change(function(e) {    	
+    	e.preventDefault();
+    	var id = $(this).attr('id').split('_')[$(this).attr('id').split('_').length - 1];	
+        var data = { func : 'update_display_st_level_ach',id : id, checked : $(this).is(":checked") };         	
+        update_display_student_level_achievement(data);         
+    });
+    
+	$('.btn-remove-sidebar-item').click(function(e) {
+        set_event_remove(e,this);                	   
+    });
+    
+	$('input[id*="course_course_navbar_preferences_attributes"][id*="name"]').change(function(e) {
+		set_event_update_name(e,this);
+	});
+
+	$('input[id*="course_course_navbar_preferences_attributes"][id*="name"]').each(function(e) {
+            $(this).data("old_value", $(this).val());
+	});	
+	    
+    $('input[id*="course_course_navbar_preferences_attributes"][id*="is_displayed"]').change(function(e) {
+		set_event_update_displayed(e,this);		         
+    });       
+    
+	$("#tb_course_navbar_preferences tbody").sortable({
+    	cursor: 'move',
+		helper: function(e, tr){
+		    var $originals = tr.children();
+		    var $helper = tr.clone();
+		    $helper.children().each(function(index){		      
+		      $(this).width($originals.eq(index).width());
+		    });
+		    return $helper;
+		},
+		start: function(event, ui) {		
+			$hd_input = ui.item.next('tr').next('input').clone();
+			ui.item.next('tr').next('input').remove();			
+	        ui.item.data('hd_input',$hd_input);
+	        ui.item.data('old_pos',$('#tb_course_navbar_preferences tr').index(ui.item));	        
+	    },
+		stop: function(event, ui) {
+			var $temp_tr = ui.item;
+			var old_pos = ui.item.data('old_pos');
+			//arrange if getting wrong position
+			if(ui.item.next('input').length){
+				$next_hd_input = ui.item.next('input');
+				$temp_tr = ui.item.clone();				
+				$next_hd_input.after($temp_tr);
+				$temp_tr.after(ui.item.data('hd_input'));
+				ui.item.remove();
+			}else{
+				ui.item.after(ui.item.data('hd_input'));
+			}
+			//set event again			
+			$temp_tr.find('.btn-remove-sidebar-item').click(function(e) {
+		        set_event_remove(e,this);                	   
+		    });		    
+			$temp_tr.find('input[id*="course_course_navbar_preferences_attributes"][id*="name"]').change(function(e) {
+				set_event_update_name(e,this);
+			});		
+			$temp_tr.find('input[id*="course_course_navbar_preferences_attributes"][id*="name"]').each(function(e) {
+		            $(this).data("old_value", $(this).val());
+			});				    
+		    $temp_tr.find('input[id*="course_course_navbar_preferences_attributes"][id*="is_displayed"]').change(function(e) {
+				set_event_update_displayed(e,this);		         
+		    });	    
+		    
+		    //update database
+		    var index = $('#tb_course_navbar_preferences tr').index($temp_tr);			
+			var data = { arg : {pos : index}, id : $temp_tr.next('input').val(), pos : index, old_pos : old_pos, success_func : function(result){
+				if(result != null && !isNaN(result.index)){
+						update_layout_pos($temp_tr,result.index, result.count);
+					}
+				}
+			};    			
+	        sidebar_update_values(data);	    
+	    }	
+	});    
+	$("#tb_course_navbar_preferences tbody").mousedown(function(){
+	  document.activeElement.blur();
+	});
+
+});
+
+function set_event_remove(e, handler){
+	e.preventDefault();
+	var id = $(handler).parent().parent().next().val();	
+	var data = { arg : {is_enabled : false}, id : id, success_func : function(result){
+			if(result != null && result.status == 'OK'){
+				update_layout_remove(handler);
+			}
+		}
+	};  
+	sidebar_update_values(data);		
+}
+
+function set_event_update_name(e, handler){
+	e.preventDefault();
+	   if($(handler).val() === ''){
+		$(handler).val($(handler).data("old_value"));
+    }else{            
+    	var id = $(handler).parent().parent().next().val();
+	    var data = { arg : {name : $(handler).val()}, id : id, success_func : function(result){
+				if(result != null && result.status == 'OK'){
+					update_layout_name(handler);
+				}
+			}
+		};    
+	    sidebar_update_values(data);	       
+	}
+}
+
+function set_event_update_displayed(e, handler){
+	e.preventDefault();
+	var id = $(handler).parent().parent().parent().next().val();       	
+	var data = { arg : {is_displayed : $(handler).is(":checked")}, id : id, success_func : function(result){} };          	
+    sidebar_update_values(data);
+}
+function update_layout_pos(handler, index, count){	
+	var item_name = handler.find('input.sidebar-item-name').val();       
+	var $litag = $('li#li_' + item_name).clone();	
+	$('li#li_' + item_name).remove();
+	if(parseInt(index) <= parseInt(count - 2)){
+		$('ul#navbar_tabs li:eq(' + index + ')').before($litag);
+	}else {
+		$('ul#navbar_tabs li:eq(' + (parseInt(index)-1) + ')').after($litag);
+	}
+	$(handler).data("old_value", $(handler).val());
+}
+
+function update_layout_name(handler){
+	var item_name = $(handler).parent().parent().find('input.sidebar-item-name').val();
+	$('span#sp_text_' + item_name).text($(handler).val());
+	$(handler).data("old_value", $(handler).val());
+}
+
+function update_layout_remove(handler){
+	var $tr_to_hide = $(handler).parent().parent();
+	$tr_to_hide.find('input[id*="is_enabled"]').prop('checked', false);        
+	$tr_to_hide.addClass('hidden_navbar_tr');
+	$('#course_navbar_preference_course_id').append($('<option>', {
+		value : $tr_to_hide.next().val(),
+		text : $tr_to_hide.children(':first').children(':first').val()
+	}));
+	var item_name = $tr_to_hide.find('input.sidebar-item-name').val();
+	$('li#li_' + item_name).hide(); 
+
+}
+
+function update_layout_add(result){
+	var $tr_to_show = $('input:hidden[value="'+ result.id +'"]').prev();		
+	$tr_to_show.find('input[id*="is_enabled"]').prop('checked', true);
+	$tr_to_show.removeClass('hidden_navbar_tr');
+	$('#course_navbar_preference_course_id').find(':selected').remove();
+			
+	var litag = '<li id="li_' + result.item + '">';
+	litag += 		'<a href="' + result.url + '">';
+	litag += 			'<span class="nav-icon">';
+	litag += 				'<i class="' + result.icon + '"></i>';
+	litag += 			'</span>';
+	litag += 			'<span id="sp_text_' + result.item + '">' + result.name + '</span>';
+	litag += 			'<span id="badge_' + result.item + '" class="sidenav-count" style="display: none"></span>';
+	litag +=		'</a>';
+	litag +=	'</li>';
+	
+	if(parseInt(result.index) <= parseInt(result.count) - 1){
+		$('ul#navbar_tabs li:eq(' + result.index + ')').before(litag);
+	}else {
+		$('ul#navbar_tabs li:eq(' + (parseInt(result.index)-1) + ')').after(litag);
+	}
+}
+
+function sidebar_update_values(data){	
+	var url = $('input.hdf-ajax-update-navbar-url').val();		
+	$.ajax({
+		url : url,
+		type : 'POST',
+		dataType : 'json',
+		data : data,
+		success : function(result) {
+			data.success_func(result);					
+		}
+	}); 	
+}
+
+function update_display_student_level_achievement(data){
+	var url = $('input.hdf-ajax-update-level-ach-url').val();	
+	$.ajax({
+		url : url,
+		type : 'POST',
+		dataType : 'json',
+		data : data,
+		success : function(result) {					
+		}
+	}); 	
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/course_preferences.css.scss b/app/assets/stylesheets/course_preferences.css.scss
index 96571d251..864fd11f6 100644
--- a/app/assets/stylesheets/course_preferences.css.scss
+++ b/app/assets/stylesheets/course_preferences.css.scss
@@ -12,3 +12,10 @@
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
+
+tr.hidden_navbar_tr, td.hidden_navbar_td {
+  display: none !important;
+}
+div.div-add-item-sidebar input{
+  margin-bottom: 9px;
+}
diff --git a/app/controllers/course_preferences_controller.rb b/app/controllers/course_preferences_controller.rb
index b971b91f3..a6586efd0 100644
--- a/app/controllers/course_preferences_controller.rb
+++ b/app/controllers/course_preferences_controller.rb
@@ -74,6 +74,75 @@ def update
     end
     redirect_to params[:origin], :notice => "Updated successfully"
   end
+  
+  def sidebar_update_values
+    #dalli don't support regualr expression
+    Role.all.each do |role|
+      expire_fragment("sidebar/#{@course.id}/role/#{role.id}")
+    end    
+    
+    cnp = CourseNavbarPreference.find(params[:id])
+    cnp_arr = []
+    if params.has_key? :pos        
+      if params[:pos].to_i > params[:old_pos].to_i
+        CourseNavbarPreference.where(:course_id => @course.id).where('pos > ? and pos <= ?',params[:old_pos],params[:pos]).each do |c|
+          c.pos = c.pos - 1
+          cnp_arr << c     
+        end
+      elsif params[:pos].to_i < params[:old_pos].to_i
+        CourseNavbarPreference.where(:course_id => @course.id).where(' pos >= ? and pos < ?',params[:pos],params[:old_pos]).each do |c|
+          c.pos = c.pos + 1
+           cnp_arr << c           
+        end
+      end         
+    end
+    
+    respond_to do |format|      
+      if cnp.update_attributes(params[:arg])
+        if cnp_arr.count > 0
+          cnp_arr.each do |c|
+            c.save
+          end
+        end   
+        if (params.has_key? :add) || (params.has_key? :pos)          
+          tags = @course.course_navbar_preferences.where(is_enabled: true).order(:pos)
+          new_index = tags.find_index{ |item| item.id.to_s == params[:id] }
+          if params.has_key? :add
+            url_and_icon = get_url_and_icon(cnp.item);
+            format.json { render json: { index: new_index,
+                                         count: tags.count,
+                                         name: cnp.name,
+                                         id: cnp.id,
+                                         item: cnp.item,
+                                         url: url_and_icon.first,
+                                         icon: url_and_icon.last
+                                       }
+            } 
+          else
+            format.json { render json: { index: new_index, count: tags.count }}
+          end           
+        else          
+          format.json { render json: { status: 'OK' }}    
+        end    
+      else
+        format.json { render json: {errors: 'Fail'}}
+        flash[:error] ='Update failed. You may entered invalid name or email.'        
+      end
+      
+    end
+  end
+  
+  def update_display_student_level_achievement
+    curr_pref = @course.course_preferences.find(params[:id])
+    curr_pref.display = params[:checked]=='true' ? 1 : 0
+    
+    respond_to do |format|
+      if curr_pref.save
+        format.json { render json: { status: 'OK' }}
+      end
+    end
+  end
+  
   private
   def authorize_preference_setting
     authorize! :manage, :course_preference
diff --git a/app/views/course_preferences/_course_navbar_preference_fields.html.erb b/app/views/course_preferences/_course_navbar_preference_fields.html.erb
index eddb084d5..a47ed9d93 100644
--- a/app/views/course_preferences/_course_navbar_preference_fields.html.erb
+++ b/app/views/course_preferences/_course_navbar_preference_fields.html.erb
@@ -1,6 +1,11 @@
-<tr>
+<tr class='<%= "hidden_navbar_tr" if !f.object.is_enabled? %>'>
   <td><%= f.input_field :name %></td>
-  <td><%= f.input_field :pos %></td>
+  <td class="hidden_navbar_td"><%= f.input_field :pos %></td>
   <td><%= f.input_field :is_displayed, as: :boolean %></td>
-  <td><%= f.input_field :is_enabled, as: :boolean %></td>
+  <td class="hidden_navbar_td"><%= f.input_field :is_enabled, as: :boolean %></td>
+  <td>
+  	<%= submit_tag 'Remove', :type => 'button', :class => "btn btn-remove-sidebar-item" %>
+  	<input type="hidden" class="sidebar-item-name" value="<%= f.object.item %>"/>
+  </td>
+  
 </tr>
\ No newline at end of file
diff --git a/app/views/course_preferences/_navbar_form.html.erb b/app/views/course_preferences/_navbar_form.html.erb
index 6b409a045..e26cd36ce 100644
--- a/app/views/course_preferences/_navbar_form.html.erb
+++ b/app/views/course_preferences/_navbar_form.html.erb
@@ -1,37 +1,40 @@
 <%= simple_form_for @course,url: course_preferences_path(@course),method: "POST", :html => { :multipart => true } do |f| %>
     <input type="hidden" name="origin" class="origin_url">
-    <table class="table table-bordered table-center">
+    <table class="table table-bordered table-center" id="tb_course_navbar_preferences">
       <thead>
       <th>
         Name
-      </th>
-      <th>
-        Order
-      </th>
+      </th>     
       <th>
         Display?(Hide for students)
       </th>
       <th>
-        Enabled?
+        Action
       </th>
 
       </thead>
       <tbody>
-      <%= f.simple_fields_for :course_navbar_preferences do |pref| %>
+      <%= f.simple_fields_for :course_navbar_preferences, @course.course_navbar_preferences.order(:pos)  do |pref| %>
         <%= render 'course_navbar_preference_fields', f: pref %>
       <% end %>
       </tbody>
     </table>
+    <div class="div-add-item-sidebar">
+	    <%= collection_select(:course_navbar_preference,:course_id,@course.course_navbar_preferences.where(is_enabled: false),:id,:name,:include_blank => 'Browse more sidebar features')%>
+	    <input type="button" value="Add" class=" btn btn-primary" id="btn_add_sidebar_item"/>
+	    <input type="hidden" class="sidebar-course-id" value="<%= @course.id %>"/>   
+    </div>
+    <input type="hidden" class="hdf-ajax-update-navbar-url" value="/courses/<%= @course.id %>/preferences/sidebar_update_values"/>
+    <input type="hidden" class="hdf-ajax-update-level-ach-url" value="/courses/<%= @course.id %>/preferences/update_display_student_level_achievement"/>
+    
     <h3>Levels and Achievement:</h3>
     <p><%= @ranking.preferable_item.description %></p>
-    <div class="info-block checkbox-text">
+    <div class="info-block checkbox-text">    	
       <input type="checkbox"
-             name="preferences[<%= @ranking.id %>][display]"
-             <%= "checked" if @ranking.display %>>
+      		id="ip_display_st_level_ach_<%= @ranking.id %>"
+      		name="preferences[<%= @ranking.id %>][display]"
+      		<%= "checked" if @ranking.display %>>
       </input>Display
       <input type="hidden" name="preferences[<%= @ranking.id %>][prefer_value]" value="<%= @ranking.prefer_value %>" >
     </div>
-    <div class="center">
-        <%= f.button :submit, "Update", class: " btn-large btn-primary"%>
-    </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/layouts/_course_side_bar.html.erb b/app/views/layouts/_course_side_bar.html.erb
index 7c9f0d99e..4ec5f492a 100644
--- a/app/views/layouts/_course_side_bar.html.erb
+++ b/app/views/layouts/_course_side_bar.html.erb
@@ -64,16 +64,16 @@
       <ul class="nav nav-list sidenav" id="navbar_tabs" url="<%= course_notifications_path(@course)%>">
         <% if @nav_items %>
             <% @nav_items.each do |item| %>
-                <li>
+                <li id="li_<%=item[:item]%>">
                   <a href="<%= item[:url] %>">
-          <span class="nav-icon">
-            <% if item.has_key?(:img) && item[:img] && !item[:img].empty? %>
-              <img src="<%= item[:img] %>" />
-            <% else %>
-              <i class="<%= item[:icon] %>"></i>
-            <% end %>
-          </span>
-                    <%= item[:text] %>
+		          <span class="nav-icon">
+		            <% if item.has_key?(:img) && item[:img] && !item[:img].empty? %>
+		              <img src="<%= item[:img] %>" />
+		            <% else %>
+		              <i class="<%= item[:icon] %>"></i>
+		            <% end %>
+		          </span>
+                    <span id="sp_text_<%= item[:item] %>"><%= item[:text] %></span>
                     <span class="sidenav-count" style="display: none"
                           id="badge_<%= item[:item] %>"></span>
                   </a>
diff --git a/config/routes.rb b/config/routes.rb
index ede8709e1..81e6cbb57 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -218,6 +218,9 @@
     get "preferences" => "course_preferences#edit", as: :preferences
 
     post "preferences" => "course_preferences#update", as: :preferences
+    
+    post "preferences/sidebar_update_values" => "course_preferences#sidebar_update_values", as: :sidebar_update_values
+    post "preferences/update_display_student_level_achievement" => "course_preferences#update_display_student_level_achievement", as: :update_display_student_level_achievement
 
     resources :mass_enrollment_emails