diff --git a/.gitignore b/.gitignore
index b3162e00..81272d63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ Vagrantfile
 .ruby-gemset
 passenger.*
 .byebug_history
+.sass-cache
diff --git a/Gemfile b/Gemfile
index 00373c53..783ec29f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -30,7 +30,7 @@ gem 'validate_url'
 gem 'whitelabel'
 
 # assets
-gem 'bootstrap', '~> 4.5'
+gem 'bootstrap', '~> 5.3'
 gem 'font-awesome-rails'
 gem 'sass-rails'
 gem 'uglifier'
diff --git a/Gemfile.lock b/Gemfile.lock
index ba0ba4f3..114f4408 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -79,14 +79,11 @@ GEM
       logger
       rack
     ast (2.4.2)
-    autoprefixer-rails (10.4.19.0)
-      execjs (~> 2)
     base64 (0.2.0)
     bigdecimal (3.1.9)
     bindex (0.8.1)
-    bootstrap (4.6.2.1)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
+    bootstrap (5.3.5)
+      popper_js (>= 2.11.8, < 3)
     builder (3.3.0)
     byebug (11.1.3)
     childprocess (5.1.0)
@@ -267,7 +264,7 @@ GEM
     partially_useful (6.0.0)
       railties (>= 4.1)
     pg (1.4.6)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -442,7 +439,7 @@ DEPENDENCIES
   addressable
   administrate
   appsignal
-  bootstrap (~> 4.5)
+  bootstrap (~> 5.3)
   byebug
   dalli
   decent_exposure
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 101e8f29..f9b65205 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -5,13 +5,12 @@
  */
 //= require jquery
 //= require jquery_ujs
-//= require bootstrap
+//= require popper
+//= require bootstrap-sprockets
 //= require vendor/jquery.collapser
-//= require navi
 //= require utility
 //= require custom
 //= require map
-//= require dropdown
 
 $(function() {
   Utility.disable();
diff --git a/app/assets/javascripts/navi.js b/app/assets/javascripts/navi.js
deleted file mode 100644
index 3bbde971..00000000
--- a/app/assets/javascripts/navi.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS206: Consider reworking classes to avoid initClass
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
-var Scroll = (function() {
-  let instance = undefined;
-  Scroll = class Scroll {
-    static initClass() {
-      instance = null;
-      this.historyCounter = 0;
-      this.duration = 1000;
-    }
-
-    static possibleTouchDevice() {
-     return (/android|ipod|iphone|ipad/gi).test(navigator.appVersion);
-   }
-
-    static animatePage() {
-      return $('a[href*="#"]').click(event => {
-        const { hash } = event.currentTarget;
-        const $target = $(hash);
-        const topOffset = $('#nav').height() + 50;
-        if ($target.length) {
-          const top = $target.offset().top - topOffset;
-          event.preventDefault();
-          // Die position:fixed navbar flackert im Mobile Webkit beim
-          // animierten Scrollen total fies!
-          // quickfix: keine Animation unter iOS/Android:
-          if (Scroll.possibleTouchDevice()) {
-            window.scrollTo(0, top);
-          } else {
-            $('html,body,document').animate({scrollTop: top}, this.duration);
-          }
-        }
-        if (window.history && window.history.pushState) {
-          const url = /\#/.test(location.href) ? location.href.replace(/\#.+/, hash) : `${location.href}${hash}`;
-          window.history.pushState({count: this.historyCounter}, `page-${this.historyCounter}`, url);
-        }
-      });
-    }
-  };
-  Scroll.initClass();
-  return Scroll;
-})();
-
-$(function() {
-  Scroll.animatePage();
-  $(window).scroll(Scroll.animateLabel);
-});
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 9bbe70ba..74bfc76c 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -8,7 +8,7 @@ $link-decoration: underline
 
 $background: white
 $container-background: image-url('whitey.png') left top repeat
-$title-color: black
+$title-color: #555
 $font: Raleway, sans-serif
 $base-font-size: 0.8em
 $nav-font-size: 1.2em
@@ -19,6 +19,9 @@ $border: 1px solid $border-color
 $border-radius: calc(0.25rem - 1px)
 $ruby-red: #C81B47
 
+.fa
+  color: $title-color
+
 @mixin userimage($size)
   width: $size
   height: $size
@@ -50,18 +53,13 @@ $ruby-red: #C81B47
     repeat: no-repeat
     position: $x $y
 
-.btn-primary
-  background-color: #666
-
-a.btn
-  text-decoration: none
-
 body
   background: image-url('whitey.png') left top repeat
 
 .badge-card-header
   background-color: $white
   border: 1px solid $border-color
+  color: $title-color
 .badge-organizer
   position: absolute
   margin-top: -30px
diff --git a/app/views/application/_nav.slim b/app/views/application/_nav.slim
index 4276d24f..335facbd 100644
--- a/app/views/application/_nav.slim
+++ b/app/views/application/_nav.slim
@@ -1,44 +1,45 @@
-nav.navbar.sticky-top.navbar-expand-lg#nav
-  .label
-    = link_to(root_path(anchor: :on_ruby), class: 'navbar-brand pl-4') do
+nav.navbar.sticky-top.navbar-expand-lg.navbar-light.bg-light#nav
+  .label.navbar-brand
+    = link_to(root_path(anchor: :on_ruby), class: 'navbar-brand ps-4') do
       = image_tag("labels/#{Whitelabel[:label_id]}.png", title: title, class: "d-inline-block align-bottom label")
       .d-none.d-sm-inline.d-md-inline.d-lg-none= I18n.tw('name')
 
-  button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation")
+  button.navbar-toggler.border-0(type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation")
     = fa_icon('bars', class: 'fa-fw')
 
   #navbarSupportedContent.collapse.navbar-collapse
-    ul.navbar-nav.mr-auto.justify-content-center.flex-fill
+    ul.navbar-nav.me-auto.justify-content-center.flex-fill
       - [:events, :topics, :people, :locations].each do |section|
-        li.nav-item.ml-4
+        li.nav-item.ms-4
           = link_to(root_path(anchor: section), class: 'nav-link') do
             = fa_icon(section, class: 'fa-fw', text: t("main.#{section}"))
 
-    ul.navbar-nav.ml-auto
-      li.nav-item.dropdown.pr-4
+    ul.navbar-nav.ms-auto
+      li.nav-item.dropdown.pe-4
         - if signed_in?
-          a(class="nav-link btn btn-light dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
-            = user_image(current_user)
-            = t('login.profile')
-          .dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
-            = link_to(user_path(current_user), class: 'dropdown-item') do
-              = fa_icon('eye', class: 'fa-fw', text: t("login.show_profile"))
-
-            = link_to(edit_user_path(current_user), class: 'dropdown-item') do
-              = fa_icon('edit', class: 'fa-fw', text: t("login.edit_profile"))
-
-            = link_to(destroy_session_path(current_user), class: 'dropdown-item') do
-              = fa_icon('times', class: 'fa-fw', text: t("login.logout"))
-
-            - if current_user.admin?
-              = link_to('/admin', class: 'dropdown-item') do
-                = fa_icon('lock', class: 'fa-fw', text: 'Community-Admin')
-            - if current_user.super_admin?
-              = link_to('/super_admin', class: 'dropdown-item') do
-                = fa_icon('lock', class: 'fa-fw', text: 'Super-Admin')
+          .dropdown
+            a.btn.btn-light.dropdown-toggle(href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false")
+              = user_image(current_user)
+              = t('login.profile')
+            ul.dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
+              li= link_to(user_path(current_user), class: 'dropdown-item') do
+                = fa_icon('eye', class: 'fa-fw', text: t("login.show_profile"))
+
+              li= link_to(edit_user_path(current_user), class: 'dropdown-item') do
+                = fa_icon('edit', class: 'fa-fw', text: t("login.edit_profile"))
+
+              li= link_to(destroy_session_path(current_user), class: 'dropdown-item') do
+                = fa_icon('times', class: 'fa-fw', text: t("login.logout"))
+
+              - if current_user.admin?
+                li= link_to('/admin', class: 'dropdown-item') do
+                  = fa_icon('lock', class: 'fa-fw', text: 'Community-Admin')
+              - if current_user.super_admin?
+                li= link_to('/super_admin', class: 'dropdown-item') do
+                  = fa_icon('lock', class: 'fa-fw', text: 'Super-Admin')
 
         - else
-          a(class="nav-link btn btn-primary dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
+          a(class="btn btn-primary dropdown-toggle" href="#" id="loginDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
             =  t('login.login')
           .dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
             - login_providers.each do |provider|
@@ -46,8 +47,8 @@ nav.navbar.sticky-top.navbar-expand-lg#nav
                 = fa_icon(icon_for_provider(provider), class: 'fa-fw', text: t("login.#{provider}_login"))
 
 
-      li.nav-item.dropdown.pr-4
-        a(class="nav-link btn btn-light dropdown-toggle" href="#" id="localeDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
+      li.nav-item.dropdown.pe-4
+        a(class="nav-link btn btn-light dropdown-toggle" href="#" id="localeDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
           = t("languages.#{I18n.locale}")
         .dropdown-menu.dropdown-menu-right(aria-labelledby="localeDropdown")
           - I18n.available_locales.each do |locale|
diff --git a/app/views/events/_badges.slim b/app/views/events/_badges.slim
index 19299ca0..de1ae39f 100644
--- a/app/views/events/_badges.slim
+++ b/app/views/events/_badges.slim
@@ -1,13 +1,13 @@
-span.badge.badge-card-header.mr-2
+span.badge.badge-card-header.me-2
   = fa_icon('calendar', text: link_to(l(event.date, format: :long), event_path(event, format: :ics)))
 - if event.location.present? && !event.location.virtual?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('map-marker', text: link_to(event.location.address, '#route', title: event.location.address))
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('external-link', text: link_to_external_route(event.location))
 - if Whitelabel[:coc].present?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('file-text-o', text: link_to('Code of Conduct', Whitelabel[:coc], target: '_blank'))
 - if event.github_issue?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('github', text: link_to('Github Planning Issue', github_issue_url(event.github_issue), target: '_blank'))
diff --git a/app/views/events/_info.slim b/app/views/events/_info.slim
index 8d6f423a..c42dce6b 100644
--- a/app/views/events/_info.slim
+++ b/app/views/events/_info.slim
@@ -1,5 +1,5 @@
-.row.card-title
-  .col-lg-9
+.d-flex.card-title
+  .flex-fill
     h2= link_to_event(event)
     small.text-muted
       = t("show.hosted_by")
@@ -9,7 +9,7 @@
         =< link_to_location(event.location)
       = ", #{l(event.date, format: :long)}"
 
-  .col-lg-3
+  div
     = participation_link(event, link_class: 'btn btn-primary btn-block')
     = remote_url_link(event, link_class: 'btn btn-primary btn-block')
 
diff --git a/app/views/events/_topics.slim b/app/views/events/_topics.slim
index 6f3d58f6..f3193b9c 100644
--- a/app/views/events/_topics.slim
+++ b/app/views/events/_topics.slim
@@ -1,21 +1,22 @@
 - if event.topics.present?
   h3.card-title= t("main.topics")
 
-  .card-deck
+  .row.row-cols-1.row-cols-md-2.g-4
     - event.topics.each do |topic|
-      .card
-        .card-header
-          .pull-left
-            = link_to(topic.user) do
-              = user_image(topic.user, image_class: 'card-img-topic-header')
-          = link_to_user(topic.user)
-        .card-body
-          h5.card-title= link_to_topic(topic)
-          .card-text.collapser== markdown(topic.description)
-        - if topic.materials.present?
-          ul.list-group.list-group-flush
-            - topic.materials.each do |material|
-              li.list-group-item= link_to_material(material)
-        .card-footer
-          small.text-muted
-            = link_to t('topic.likes', count: topic.likes.count), topic
+      .col
+        .card.h-100
+          .card-header
+            .pull-left
+              = link_to(topic.user) do
+                = user_image(topic.user, image_class: 'card-img-topic-header')
+            = link_to_user(topic.user)
+          .card-body
+            h5.card-title= link_to_topic(topic)
+            .card-text.collapser== markdown(topic.description)
+          - if topic.materials.present?
+            ul.list-group.list-group-flush
+              - topic.materials.each do |material|
+                li.list-group-item= link_to_material(material)
+          .card-footer
+            small.text-muted
+              = link_to t('topic.likes', count: topic.likes.count), topic
diff --git a/app/views/users/_list.slim b/app/views/users/_list.slim
index 32f5ae37..912f7423 100644
--- a/app/views/users/_list.slim
+++ b/app/views/users/_list.slim
@@ -1,3 +1,4 @@
-.card-columns
-  - users.each do |user|
-    = render(user)
+.my-4
+  .row.row-cols-1.row-cols-md-3
+    - users.each do |user|
+      .col= render(user)
diff --git a/app/views/users/_user.slim b/app/views/users/_user.slim
index 90855d4d..465bccce 100644
--- a/app/views/users/_user.slim
+++ b/app/views/users/_user.slim
@@ -1,9 +1,9 @@
-.card
-  .card-body
+.card.my-2
+  .card-body.position-relative
     .pull-left
       - if user.organizer?
-        span.badge.badge-card-header.badge-organizer
-          = fa_icon('star', text: 'Organizer')
+        span.position-absolute.ms-5.top-0.translate-middle.badge.p-2.text-bg-light.border.border-light.rounded-border
+          = fa_icon "star", text: "Organizer"
       = link_to(user) do
         = user_image(user, image_class: 'card-img-topic')
 
diff --git a/app/views/users/index.slim b/app/views/users/index.slim
index a1dd7d2e..52140442 100644
--- a/app/views/users/index.slim
+++ b/app/views/users/index.slim
@@ -1,6 +1,6 @@
-= section_box :people do
-  .card-columns
+.container= section_box :people do
+  .row.row-cols-1.row-cols-md-3
     - users.each do |user|
-      = render(user)
+      .col= render(user)
 
   = paginate(users)
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index a7ce1e6c..064eb74e 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -13,3 +13,5 @@
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
 Rails.application.config.assets.precompile += %w[labels/*]
+
+Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)