diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -40,6 +40,7 @@
 
 //new import
 @import 'datatables/datatables.min';
+@import 'material_icons';
 
 //bootstrap navbar color (from)
 $bgDefault: #19197b;
diff --git a/app/controllers/announcements_controller.rb b/app/controllers/announcements_controller.rb
--- a/app/controllers/announcements_controller.rb
+++ b/app/controllers/announcements_controller.rb
@@ -65,7 +65,7 @@
     @announcement = Announcement.find(params[:id])
 
     respond_to do |format|
-      if @announcement.update_attributes(announcement_params)
+      if @announcement.update(announcement_params)
         flash[:notice] = 'Announcement was successfully updated.'
         format.html { redirect_to(@announcement) }
         format.js   {}
@@ -80,7 +80,7 @@
 
   def toggle
     @announcement = Announcement.find(params[:id])
-    @announcement.update_attributes( published:  !@announcement.published? )
+    @announcement.update( published:  !@announcement.published? )
     respond_to do |format|
       format.js { render partial: 'toggle_button',
                   locals: {button_id: "#announcement_toggle_#{@announcement.id}",button_on: @announcement.published? } }
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -70,13 +70,18 @@
           - @nav_announcement.each do |ann|
             %p.navbar-text
               = ann.body.html_safe
-
-            
-
-        %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', 'index', {title: I18n.t('menu.messages'), data: {toggle: 'tooltip'}})
-          - if GraderConfiguration['system.user_setting_enabled']
-            = add_menu("#{content_tag(:span,'',class: 'glyphicon glyphicon-cog', id: 'user_profile')}".html_safe, 'users', 'profile', {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'}})
-
+      %ul.navbar-nav
+        %li.nav-item
+          %a.nav-link{href: help_main_path}
+            %span.mi.md-18 help
+        %li.nav-item
+          %a.nav-link{href: messages_path}
+            %span.mi.md-18 chat
+        - if GraderConfiguration['system.user_setting_enabled']
+          %li.nav-item
+            %a.nav-link{href: profile_users_path}
+              %span.mi.md-18 settings
+        %li.nav-item
+          %a.nav-link{href: login_main_path}
+            %span.mi.md-18 exit_to_app
+            = @current_user.full_name
diff --git a/app/views/main/_announcement.html.haml b/app/views/main/_announcement.html.haml
--- a/app/views/main/_announcement.html.haml
+++ b/app/views/main/_announcement.html.haml
@@ -1,15 +1,26 @@
-%li.list-group-item
-  %strong
+.card-body
+  .card-title
     = announcement.title
-  - if @current_user and @current_user.admin?
-    = link_to 'Edit', edit_announcement_path(announcement), class: 'btn btn-xs btn-default'
-  %small= "(updated #{time_ago_in_words(announcement.updated_at)} ago on #{announcement.updated_at})"
+    - if @current_user and @current_user.admin?
+      = link_to 'Edit', edit_announcement_path(announcement), class: 'btn btn-xs btn-default'
+  .card-subtitle
+    = "(updated #{time_ago_in_words(announcement.updated_at)} ago on #{announcement.updated_at})"
+  .card-text
+    = markdown(announcement.body)
+
 
-  %br
-    = markdown(announcement.body)
-  :javascript
-    Announcement.updateRecentId(#{announcement.id});
-  - if (defined? announcement_effect) and announcement_effect
+-#
+  %li.list-group-item
+    %strong
+    - if @current_user and @current_user.admin?
+      = link_to 'Edit', edit_announcement_path(announcement), class: 'btn btn-xs btn-default'
+    %small= "(updated #{time_ago_in_words(announcement.updated_at)} ago on #{announcement.updated_at})"
+
+    %br
+      = markdown(announcement.body)
     :javascript
-      $("announcement-#{announcement.id}").blindDown({duration: 0.2});
-      $("announcement-#{announcement.id}").appear({duration: 0.5, queue: 'end'});
+      Announcement.updateRecentId(#{announcement.id});
+    - if (defined? announcement_effect) and announcement_effect
+      :javascript
+        $("announcement-#{announcement.id}").blindDown({duration: 0.2});
+        $("announcement-#{announcement.id}").appear({duration: 0.5, queue: 'end'});
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
@@ -44,11 +44,11 @@
                 %th
               = render :partial => 'problem', :collection => cp[:problems]
   .col-md-5
-    .panel.panel-info
-      .panel-heading
+    .card
+      .card-header
         Announcement
-        = link_to 'Manage', announcements_path, class: 'btn btn-xs btn-default'
-      %ul.list-group
+        = link_to 'Manage', announcements_path, class: 'btn btn-small'
+      .card-body
         = render :partial => 'announcement', :collection => @announcements
 
 %script{:type => 'text/javascript'}