diff --git a/Gemfile b/Gemfile
--- a/Gemfile
+++ b/Gemfile
@@ -87,10 +87,7 @@
 #gem 'will_paginate', '~> 3.0.7'
 
 gem 'mail'
-gem 'rdiscount'
-gem 'dynamic_form'
-gem 'in_place_editing'
-#gem 'verification', :git => 'https://github.com/sikachu/verification.git'
+gem 'rdiscount'  #markdown
 
 
 #---------------- testiing -----------------------
diff --git a/Gemfile.lock b/Gemfile.lock
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -118,7 +118,6 @@
     concurrent-ruby (1.1.10)
     crass (1.0.6)
     digest (3.1.0)
-    dynamic_form (1.1.4)
     erubi (1.11.0)
     erubis (2.7.0)
     execjs (2.8.1)
@@ -307,7 +306,6 @@
   byebug
   capybara
   coffee-rails
-  dynamic_form
   fuzzy-string-match
   haml
   haml-rails
diff --git a/app/assets/stylesheets/my_custom.css.scss b/app/assets/stylesheets/my_custom.css.scss
--- a/app/assets/stylesheets/my_custom.css.scss
+++ b/app/assets/stylesheets/my_custom.css.scss
@@ -3,6 +3,14 @@
   top: 50px;
 }
 
+
+//for google material design
+.mi-bs {
+  vertical-align: middle;
+  position: relative;
+  top: -3px;
+}
+
 // --------------- bootstrap file upload ----------------------
 .btn-file {
   position: relative;
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
@@ -2,8 +2,6 @@
 
   before_action :admin_authorization
 
-  in_place_edit_for :announcement, :published
-
   # GET /announcements
   # GET /announcements.xml
   def index
@@ -89,7 +87,7 @@
 
   def toggle_front
     @announcement = Announcement.find(params[:id])
-    @announcement.update_attributes( frontpage:  !@announcement.frontpage? )
+    @announcement.update( frontpage:  !@announcement.frontpage? )
     respond_to do |format|
       format.js { render partial: 'toggle_button',
                   locals: {button_id: "#announcement_toggle_front_#{@announcement.id}",button_on: @announcement.frontpage? } }
diff --git a/app/controllers/problems_controller.rb b/app/controllers/problems_controller.rb
--- a/app/controllers/problems_controller.rb
+++ b/app/controllers/problems_controller.rb
@@ -5,10 +5,6 @@
     authorization_by_roles(['admin','ta'])
   end
 
-  in_place_edit_for :problem, :name
-  in_place_edit_for :problem, :full_name
-  in_place_edit_for :problem, :full_score
-
   def index
     @problems = Problem.order(date_added: :desc)
   end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -112,10 +112,10 @@
   end
 
   def toggle_button(on,toggle_url,id, option={})
-    btn_size = option[:size] || 'btn-xs'
+    btn_size = option[:size] || 'btn-sm'
     btn_block = option[:block] || 'btn-block'
     link_to (on ? "Yes" : "No"), toggle_url,
-      {class: "btn #{btn_block} #{btn_size} btn-#{on ? 'success' : 'default'} ajax-toggle",
+      {class: "btn #{btn_block} #{btn_size} btn-#{on ? 'success' : 'outline-secondary'} ajax-toggle",
         id: id,
         data: {remote: true, method: 'get'}}
   end
diff --git a/app/views/announcements/edit.html.haml b/app/views/announcements/edit.html.haml
--- a/app/views/announcements/edit.html.haml
+++ b/app/views/announcements/edit.html.haml
@@ -4,42 +4,3 @@
   = link_to t(:back), announcements_path, class: 'card-link btn btn-secondary'
 
 = render 'form'
--# old style
-  .container-fluid
-    %h1 Editing announcement
-    = error_messages_for :announcement
-    .row
-      .col-md-6
-        = form_for(@announcement) do |f|
-          .form-group
-            %label Title
-            = f.text_field :title, class: 'form-control'
-          .form-group
-            %label Notes
-            (shown internally, used to organize announcements)
-            = f.text_field :notes, class: 'form-control'
-          .form-group
-            %label Body
-            = f.text_area  :body, class: 'form-control', style: 'height: 200px;'
-          .form-group
-            %label Author
-            = f.text_field :author, class: 'form-control'
-          .checkbox
-            %label 
-              = f.check_box :published
-              Published
-          .checkbox
-            %label 
-              = f.check_box :frontpage
-              Show on front page?
-          .checkbox
-            %label 
-              = f.check_box :on_nav_bar
-              Show on top menu bar?
-          .checkbox
-            %label 
-              = f.check_box :contest_only
-              Show only in contest?
-          = f.submit "Update", class: 'btn btn-primary'
-          = link_to 'Show', @announcement, class: 'btn btn-default'
-          = link_to 'Back', announcements_path, class: 'btn btn-default'
diff --git a/app/views/application/_toggle_button.js.haml b/app/views/application/_toggle_button.js.haml
--- a/app/views/application/_toggle_button.js.haml
+++ b/app/views/application/_toggle_button.js.haml
@@ -1,7 +1,7 @@
 :plain
   var t = $("#{button_id}");
-  t.removeClass('btn-default');
+  t.removeClass('btn-outline-secondary');
   t.removeClass('btn-success');
   t.removeClass('btn-warning');
-  t.addClass("btn-#{button_on ? 'success' : 'default'}");
+  t.addClass("btn-#{button_on ? 'success' : 'outline-secondary'}");
   t.text("#{button_on ? 'Yes' : 'No'}");
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
@@ -2,7 +2,7 @@
   %nav.navbar.fixed-top.navbar-dark.bg-primary.navbar-expand-lg
     .container-fluid
       %a.navbar-brand{href: list_main_path} 
-        %span.glyphicon.glyphicon-home
+        %span.mi.mi-bs home
         MAIN
       %button.navbar-toggler.collapsed{ type: :button, 'data-bs': {toggle: 'collapse', target: '#navbar-collapse'} }
         %span.navbar-toggler-icon
@@ -73,15 +73,15 @@
       %ul.navbar-nav
         %li.nav-item
           %a.nav-link{href: help_main_path}
-            %span.mi.md-18 help
+            %span.mi.mi-bs.md-18 help
         %li.nav-item
           %a.nav-link{href: messages_path}
-            %span.mi.md-18 chat
+            %span.mi.mi-bs.md-18 chat
         - if GraderConfiguration['system.user_setting_enabled']
           %li.nav-item
             %a.nav-link{href: profile_users_path}
-              %span.mi.md-18 settings
+              %span.mi.mi-bs.md-18 settings
         %li.nav-item
           %a.nav-link{href: login_main_path}
-            %span.mi.md-18 exit_to_app
+            %span.mi.mi-bs.md-18 exit_to_app
             = @current_user.full_name
diff --git a/app/views/main/_submission_box.html.haml b/app/views/main/_submission_box.html.haml
--- a/app/views/main/_submission_box.html.haml
+++ b/app/views/main/_submission_box.html.haml
@@ -8,12 +8,12 @@
             %li= msg
   .row.mb-2
     .col-sm-2
-      = form.label :submission, 'Problem:', class: 'form-label'
+      = form.label :submission, 'Problem:', class: 'col-form-label'
     .col-sm-10
       = select 'submission', 'problem_id', [[(t 'main.specified_in_header'),'-1']] + @problems.collect {|p| ["[#{p.name}] #{p.full_name}", p.id]}, {:selected => '-1'}, { class: 'select2 form-control', style: "width: 100%" }
   .row.mb-2
     .col-sm-2
-      = form.label :file, 'File:', class: 'form-label'
+      = form.label :file, 'File:', class: 'col-form-label'
     .col-sm-10
       = form.file_field :file, class: 'form-control'
   = form.submit 'Submit', class: 'btn btn-primary'
diff --git a/app/views/problems/index.html.haml b/app/views/problems/index.html.haml
--- a/app/views/problems/index.html.haml
+++ b/app/views/problems/index.html.haml
@@ -38,7 +38,7 @@
     - if GraderConfiguration.multicontests?
       %th Contests
   - for problem in @problems
-    %tr{:class => "#{(problem.available) ? "success" : "danger"}", :id => "prob-#{problem.id}", :name => "prob-#{problem.id}"}
+    %tr{:class => "#{(problem.available) ? "bg-success bg-opacity-25" : "bg-opacity-25"}", :id => "prob-#{problem.id}", :name => "prob-#{problem.id}"}
       - @problem=problem
       %td= problem.name #in_place_editor_field :problem, :name, {}, :rows=>1
       %td
@@ -47,9 +47,9 @@
       %td.text-right= problem.full_score #in_place_editor_field :problem, :full_score, {}, :rows=>1
       %td
         - problem.tags.each do |t|
-          - #%button.btn.btn-default.btn-xs= t.name
+          - #%button.btn.btn-default.btn-sm= t.name
           %span.label.label-default= t.name
-      %td= link_to "Submit", direct_edit_problem_submissions_path(problem,@current_user.id), class: 'btn btn-xs btn-primary'
+      %td= link_to "Submit", direct_edit_problem_submissions_path(problem,@current_user.id), class: 'btn btn-sm btn-primary'
       %td= problem.date_added
       %td= toggle_button(@problem.available?, toggle_problem_path(@problem), "problem-avail-#{@problem.id}")
       %td= toggle_button(@problem.view_testcase?, toggle_view_testcase_problem_path(@problem), "problem-view-testcase-#{@problem.id}")
@@ -57,9 +57,9 @@
       - if GraderConfiguration.multicontests?
         %td
           = problem.contests.collect { |c| c.name }.join(', ')
-      %td= link_to 'Stat', {:action => 'stat', :id => problem.id}, class: 'btn btn-info btn-xs btn-block'
-      %td= link_to 'Show', {:action => 'show', :id => problem}, class: 'btn btn-info btn-xs btn-block'
-      %td= link_to 'Edit', {:action => 'edit', :id => problem}, class: 'btn btn-info btn-xs btn-block'
-      %td= link_to 'Destroy', { :action => 'destroy', :id => problem }, :confirm => 'Are you sure?', :method => :delete, class: 'btn btn-danger btn-xs btn-block'
+      %td= link_to 'Stat', {:action => 'stat', :id => problem.id}, class: 'btn btn-info btn-sm btn-block'
+      %td= link_to 'Show', {:action => 'show', :id => problem}, class: 'btn btn-info btn-sm btn-block'
+      %td= link_to 'Edit', {:action => 'edit', :id => problem}, class: 'btn btn-info btn-sm btn-block'
+      %td= link_to 'Destroy', { :action => 'destroy', :id => problem }, :confirm => 'Are you sure?', :method => :delete, class: 'btn btn-danger btn-sm btn-block'
 %br/
 = link_to '[New problem]', :action => 'new'
diff --git a/app/views/problems/toggle.js.haml b/app/views/problems/toggle.js.haml
--- a/app/views/problems/toggle.js.haml
+++ b/app/views/problems/toggle.js.haml
@@ -2,7 +2,7 @@
                   locals: {button_id: "#problem-avail-#{@problem.id}",button_on: @problem.available }
 :plain
   r = $("#prob-#{@problem.id}");
-  r.removeClass('success');
-  r.removeClass('danger');
-  r.addClass("#{@problem.available? ? 'success' : 'danger'}");
+  r.removeClass('bg-success');
+  r.removeClass('bg-danger');
+  r.addClass("#{@problem.available? ? 'bg-success' : 'bg-danger-'}");
 
diff --git a/app/views/testcases/show_problem.html.haml b/app/views/testcases/show_problem.html.haml
--- a/app/views/testcases/show_problem.html.haml
+++ b/app/views/testcases/show_problem.html.haml
@@ -4,8 +4,8 @@
 /navbar
 %ul.nav.nav-pills{role: :tablist}
   - @problem.testcases.each.with_index do |tc,id|
-    %li{role: :presentation, class: ('active' if id == 0)}
-      %a{href:"#tc#{tc.id}", role: 'tab', data: {toggle: 'tab'}}= tc.num
+    %li.nav-item{role: :presentation, class: ('active' if id == 0)}
+      %a.nav-link{href:"#tc#{tc.id}", role: 'tab', 'data-bs': {toggle: 'tab', target: "#tc#{tc.id}"}}= tc.num
 
 /actual data
 .tab-content