diff --git a/app/assets/javascripts/preference_sidebar.js b/app/assets/javascripts/preference_sidebar.js
new file mode 100644
index 000000000..b79cff5cf
--- /dev/null
+++ b/app/assets/javascripts/preference_sidebar.js
@@ -0,0 +1,135 @@
+$(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);		
+		}		
+	});
+	
+	$('.btn-remove-sidebar-item').click(function(e) {
+        e.preventDefault();        
+		var data = { func : 'remove', id : '0' };  
+		sidebar_update_values(data, this);                	   
+    });
+    
+	$('input[id*="course_course_navbar_preferences_attributes"][id*="name"]').change(function(e) {
+    	e.preventDefault();            
+        var data = { func : 'update_name', id : '0', name : $(this).val() };    
+        sidebar_update_values(data, this);        
+              
+    });
+
+	$('input[id*="course_course_navbar_preferences_attributes"][id*="pos"]').each(function(e) {
+            $(this).data("old_value", $(this).val());
+	});
+	
+    $('input[id*="course_course_navbar_preferences_attributes"][id*="pos"]').change(function(e) {
+    	e.preventDefault();
+    	if(isNaN($(this).val())){
+			$(this).val($(this).data("old_value"));
+    	}else{
+	        var data = { func : 'update_pos', id : '0', pos : $(this).val() };    
+	        sidebar_update_values(data, this);	        
+       }
+    });
+    
+    $('input[id*="course_course_navbar_preferences_attributes"][id*="is_displayed"]').change(function(e) {
+		e.preventDefault();         	
+        var data = { func : 'update_is_displayed', id : '0', checked : $(this).is(":checked") };          	
+        sidebar_update_values(data, $(this).parent());         
+    });    
+    
+    $('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") };         	
+        sidebar_update_values(data, this);         
+    });    
+});
+
+function update_layout_pos(handler, index, count){
+	var $tr_to_change = $(handler).parent().parent();
+	var item = $tr_to_change.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)); 
+}
+
+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_display_st_level_ach'){
+		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);
+			}			
+		}
+	}); 	
+}
diff --git a/app/assets/stylesheets/course_preferences.css.scss b/app/assets/stylesheets/course_preferences.css.scss
index 96571d251..4123929f3 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;
+}
+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..06f2ae4b0 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,67 @@ 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    
+    if params[:func] == 'update_display_st_level_ach'
+      curr_pref = @course.course_preferences.find(params[:id])
+      curr_pref.display = params[:checked]=='true' ? 1 : 0
+    else
+      cnp = CourseNavbarPreference.find(params[:id])
+      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'
+          cnp.pos = params[:pos]
+        when 'update_is_displayed'
+          cnp.is_displayed = params[:checked]=='true' ? 1 : 0         
+      end
+    end
+    
+    respond_to do |format|
+      if(params[:func] == 'update_display_st_level_ach')
+        if curr_pref.save
+          format.json { render json: { status: 'OK' }}
+        end      
+      else
+        if cnp.save         
+          if params[:func] == 'add' || params[:func] == 'update_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[: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
   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..e2f6bf1c7 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><%= 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..32c07c087 100644
--- a/app/views/course_preferences/_navbar_form.html.erb
+++ b/app/views/course_preferences/_navbar_form.html.erb
@@ -12,7 +12,7 @@
         Display?(Hide for students)
       </th>
       <th>
-        Enabled?
+        Action
       </th>
 
       </thead>
@@ -22,16 +22,20 @@
       <% 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..697fa7d74 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -180,6 +180,8 @@
     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
 
     resources :mass_enrollment_emails