diff --git a/app/assets/javascripts/preference_sidebar.js b/app/assets/javascripts/preference_sidebar.js
new file mode 100644
index 000000000..f0ac98a44
--- /dev/null
+++ b/app/assets/javascripts/preference_sidebar.js
@@ -0,0 +1,206 @@
+$(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 = { func : 'add', id : $select_option.val() };  
+			sidebar_update_values(data, this);		
+		}		
+	});
+	
+	$('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, this);         
+    });
+    
+	$('.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 = { func : 'update_pos', id : $temp_tr.next('input').val(), pos : index, old_pos : old_pos };    			
+	        sidebar_update_values(data, $temp_tr);	    
+	    }	
+	});    
+	$("#tb_course_navbar_preferences tbody").mousedown(function(){
+	  document.activeElement.blur();
+	});
+
+});
+
+function set_event_remove(e, handler){
+	e.preventDefault();        
+	var data = { func : 'remove', id : '0' };  
+	sidebar_update_values(data, handler);		
+}
+
+function set_event_update_name(e, handler){
+	e.preventDefault();
+	   if($(handler).val() === ''){
+		$(handler).val($(handler).data("old_value"));
+    }else{            
+	    var data = { func : 'update_name', id : '0', name : $(handler).val() };    
+	    sidebar_update_values(data, handler);	       
+	}
+}
+
+function set_event_update_displayed(e, handler){
+	e.preventDefault();         	
+	var data = { func : 'update_is_displayed', id : '0', checked : $(handler).is(":checked") };          	
+    sidebar_update_values(data, $(handler).parent());
+}
+function update_layout_pos(handler, index, count){	
+	var item = handler.find('input.sidebar-item-name').val();       
+	var $litag = $('ul#navbar_tabs span#badge_' + item).parent().parent().clone();	
+	$('ul#navbar_tabs span#badge_' + item).parent().parent().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 $tr_to_change = $(handler).parent().parent();
+	var item = $tr_to_change.find('input.sidebar-item-name').val();        
+	var $atag = $('ul#navbar_tabs span#badge_' + item).parent();
+	var $children = $atag.children();	
+	$atag.empty();	
+	$atag.append($children.eq(0));	
+	$atag.append($(handler).val());
+	$atag.append($children.eq(1));
+	$(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 = $tr_to_hide.find('input.sidebar-item-name').val();
+	$('ul#navbar_tabs span#badge_' + item).parent().parent().hide(); 
+
+}
+
+function update_layout_add(handler ,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>';
+	litag += 		'<a href="' + result.url + '">';
+	litag += 			'<span class="nav-icon">';
+	litag += 				'<i class="' + result.icon + '"></i>';
+	litag += 			'</span>';
+	litag += 			result.name;
+	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, handler){		
+	var course_id = $('div.div-add-item-sidebar input.sidebar-course-id').val();        
+	var url = '/courses/' + course_id + '/preferences/sidebar_update_values';		
+	if(data.func != 'add' && data.func != 'update_pos'){
+		data.id = $(handler).parent().parent().next().val();	
+	}		
+	$.ajax({
+		url : url,
+		type : 'POST',
+		dataType : 'json',
+		data : data,
+		success : function(result) {
+			if (data.func == 'add' && result != null){
+				update_layout_add(handler ,result);
+			}else if (data.func == 'remove' && result.status == 'OK'){
+				update_layout_remove(handler);
+			}else if (data.func == 'update_name' && result.status == 'OK'){
+				update_layout_name(handler);
+			}else if (data.func == 'update_pos' && !isNaN(result.index)){				
+				update_layout_pos(handler,result.index, result.count);
+			}			
+		}
+	}); 	
+}
+
+function update_display_student_level_achievement(data, handler){		
+	var course_id = $('div.div-add-item-sidebar input.sidebar-course-id').val();        
+	var url = '/courses/' + course_id + '/preferences/update_display_student_level_achievement';	
+	$.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 259f65ac5..1476268ba 100644
--- a/app/controllers/course_preferences_controller.rb
+++ b/app/controllers/course_preferences_controller.rb
@@ -34,6 +34,7 @@ def edit
       else
         @tab = 'Sidebar'
         @ranking = @course.student_sidebar_ranking
+        
     end
   end
 
@@ -56,7 +57,86 @@ def update
       end
     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 = []
+    case params[:func]
+      when 'add'
+        cnp.is_enabled = true    
+      when 'remove'
+        cnp.is_enabled = false
+      when 'update_name'
+        cnp.name = params[:name]
+      when 'update_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
+        cnp.pos = params[:pos]
+      when 'update_is_displayed'
+        cnp.is_displayed = params[:checked]=='true' ? 1 : 0         
+    end    
+    
+    respond_to do |format|      
+      if cnp.save         
+        if params[:func] == 'add' || params[:func] == 'update_pos'
+          if cnp_arr.count > 0
+            cnp_arr.each do |c|
+              c.save
+            end
+          end
+          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[:func] == '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..2114fdc95 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,15 @@
-<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>
-</tr>
\ No newline at end of file
+  <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>
+
+
+	
+
diff --git a/app/views/course_preferences/_navbar_form.html.erb b/app/views/course_preferences/_navbar_form.html.erb
index 6b409a045..a3c84fac8 100644
--- a/app/views/course_preferences/_navbar_form.html.erb
+++ b/app/views/course_preferences/_navbar_form.html.erb
@@ -1,37 +1,38 @@
 <%= 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>
     <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
+    </div>            
+<% end %>
+
diff --git a/config/routes.rb b/config/routes.rb
index 02c54618d..857259406 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -180,6 +180,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