diff --git a/Gemfile b/Gemfile
index b141677f..965db10d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,16 +12,14 @@ gem 'slim-rails' # Awesome template language that replaces ERB
 
 gem 'uglifier', '>= 1.3.0' # Use Uglifier as compressor for JavaScript assets
 
-gem 'coffee-rails', '~> 4.2' # Use CoffeeScript for .js.coffee assets and views
+gem 'coffee-rails', '~> 4.2' # CoffeeScript adapter for the Rails asset pipeline
 
-gem 'sass-rails', '~> 5.0' # Use Sass for stylesheets
-
-gem 'compass-rails' # Compass framework
+gem 'sass-rails' # Use Sass for stylesheets
 
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby
 
-gem 'bootstrap-sass' # Sleek, intuitive, and powerful front-end framework
+gem 'bootstrap', '~> 4.0.0' # Bootstrap 4 Ruby Gem for Rails / Sprockets and Compass
 
 gem 'font-awesome-rails' # The iconic font and CSS toolkit
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 85d4e22e..3e2525a0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -7,64 +7,64 @@ GIT
 
 GIT
   remote: git://github.com/teampoltergeist/poltergeist.git
-  revision: 733b084a32d5c424dd9b4f4a9c2225cf6e1b5d76
+  revision: 13df4b67b05bcc878ee3def2eedcd1d54b352699
   specs:
-    poltergeist (1.16.0)
-      capybara (~> 2.1)
+    poltergeist (1.17.0)
+      capybara (>= 2.1, < 4)
       cliver (~> 0.3.1)
       websocket-driver (>= 0.2.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.1.4)
-      actionpack (= 5.1.4)
+    actioncable (5.1.5)
+      actionpack (= 5.1.5)
       nio4r (~> 2.0)
       websocket-driver (~> 0.6.1)
-    actionmailer (5.1.4)
-      actionpack (= 5.1.4)
-      actionview (= 5.1.4)
-      activejob (= 5.1.4)
+    actionmailer (5.1.5)
+      actionpack (= 5.1.5)
+      actionview (= 5.1.5)
+      activejob (= 5.1.5)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.1.4)
-      actionview (= 5.1.4)
-      activesupport (= 5.1.4)
+    actionpack (5.1.5)
+      actionview (= 5.1.5)
+      activesupport (= 5.1.5)
       rack (~> 2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.1.4)
-      activesupport (= 5.1.4)
+    actionview (5.1.5)
+      activesupport (= 5.1.5)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
     actionview-encoded_mail_to (1.0.9)
       rails
-    activejob (5.1.4)
-      activesupport (= 5.1.4)
+    activejob (5.1.5)
+      activesupport (= 5.1.5)
       globalid (>= 0.3.6)
-    activemodel (5.1.4)
-      activesupport (= 5.1.4)
-    activerecord (5.1.4)
-      activemodel (= 5.1.4)
-      activesupport (= 5.1.4)
+    activemodel (5.1.5)
+      activesupport (= 5.1.5)
+    activerecord (5.1.5)
+      activemodel (= 5.1.5)
+      activesupport (= 5.1.5)
       arel (~> 8.0)
-    activesupport (5.1.4)
+    activesupport (5.1.5)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     acts_as_list (0.9.10)
       activerecord (>= 3.0)
-    acts_as_tree (2.7.0)
+    acts_as_tree (2.7.1)
       activerecord (>= 3.0.0)
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
     arel (8.0.0)
-    ast (2.3.0)
-    autoprefixer-rails (7.2.2)
+    ast (2.4.0)
+    autoprefixer-rails (8.0.0)
       execjs
     awesome_print (1.8.0)
     bcrypt (3.1.11)
@@ -73,23 +73,24 @@ GEM
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
     bindex (0.5.0)
-    bootstrap-sass (3.3.7)
-      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.4)
+    bootstrap (4.0.0)
+      autoprefixer-rails (>= 6.0.3)
+      popper_js (>= 1.12.9, < 2)
+      sass (>= 3.5.2)
     builder (3.2.3)
-    byebug (9.1.0)
-    cancancan (2.1.2)
-    capybara (2.16.1)
+    byebug (10.0.0)
+    cancancan (2.1.3)
+    capybara (2.18.0)
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
-      xpath (~> 2.0)
+      xpath (>= 2.0, < 4.0)
     capybara-screenshot (1.0.18)
       capybara (>= 1.0, < 3)
       launchy
-    carrierwave (1.2.1)
+    carrierwave (1.2.2)
       activemodel (>= 4.0.0)
       activesupport (>= 4.0.0)
       mime-types (>= 1.16)
@@ -98,7 +99,6 @@ GEM
       mime-types (~> 3.0)
     childprocess (0.8.0)
       ffi (~> 1.0, >= 1.0.11)
-    chunky_png (1.3.8)
     cliver (0.3.2)
     cocoon (1.2.11)
     codeclimate-test-reporter (1.0.8)
@@ -111,39 +111,22 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    compass-rails (3.0.2)
-      compass (~> 1.0.0)
-      sass-rails (< 5.1)
-      sprockets (< 4.0)
     concurrent-ruby (1.0.5)
     crass (1.0.3)
     css_parser (1.6.0)
       addressable
     database_cleaner (1.6.2)
-    devise (4.3.0)
+    devise (4.4.1)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0, < 5.2)
       responders
       warden (~> 1.2.3)
-    devise-i18n (1.5.0)
+    devise-i18n (1.5.1)
       devise (>= 3.4)
     diff-lcs (1.3)
     docile (1.1.5)
-    easy_translate (0.5.0)
-      json
+    easy_translate (0.5.1)
       thread
       thread_safe
     em-websocket (0.5.1)
@@ -153,7 +136,7 @@ GEM
       htmlentities (~> 4.3.3)
       launchy (~> 2.1)
       mail (~> 2.6)
-    enumerize (2.1.2)
+    enumerize (2.2.0)
       activesupport (>= 3.2)
     erubi (1.7.0)
     eventmachine (1.2.5)
@@ -165,22 +148,22 @@ GEM
       railties (>= 3.0.0)
     fancybox2-rails (0.2.7)
       railties (>= 3.1.0)
-    ffaker (2.7.0)
-    ffi (1.9.18)
-    font-awesome-rails (4.7.0.2)
+    ffaker (2.8.1)
+    ffi (1.9.21)
+    font-awesome-rails (4.7.0.3)
       railties (>= 3.2, < 5.2)
     formatador (0.2.5)
-    fuubar (2.2.0)
+    fuubar (2.3.1)
       rspec-core (~> 3.0)
       ruby-progressbar (~> 1.4)
     gaffe (1.2.0)
       rails (>= 4.0.0)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
-    guard (2.14.1)
+    guard (2.14.2)
       formatador (>= 0.2.4)
       listen (>= 2.7, < 4.0)
-      lumberjack (~> 1.0)
+      lumberjack (>= 1.0.12, < 2.0)
       nenv (~> 0.1)
       notiffany (~> 0.0)
       pry (>= 0.9.12)
@@ -211,12 +194,12 @@ GEM
     htmlentities (4.3.4)
     http_parser.rb (0.6.0)
     humanizer (2.6.4)
-    i18n (0.9.1)
+    i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    i18n-tasks (0.9.19)
+    i18n-tasks (0.9.20)
       activesupport (>= 4.0.2)
       ast (>= 2.1.0)
-      easy_translate (>= 0.5.0)
+      easy_translate (>= 0.5.1)
       erubi
       highline (>= 1.7.3)
       i18n
@@ -231,13 +214,13 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (1.8.6)
+    json (2.1.0)
     launchy (2.4.3)
       addressable (~> 2.3)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    loofah (2.1.1)
+    loofah (2.2.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     lumberjack (1.0.12)
@@ -253,15 +236,15 @@ GEM
     mini_magick (4.8.0)
     mini_mime (1.0.0)
     mini_portile2 (2.3.0)
-    minitest (5.10.3)
-    mobility (0.3.4)
+    minitest (5.11.3)
+    mobility (0.4.2)
       i18n (>= 0.6.10, < 0.10)
       request_store (~> 1.0)
-    multi_json (1.12.2)
+    multi_json (1.13.1)
     mysql2 (0.4.10)
     nenv (0.3.0)
-    nio4r (2.1.0)
-    nokogiri (1.8.1)
+    nio4r (2.2.0)
+    nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
     notiffany (0.1.1)
       nenv (~> 0.1)
@@ -269,14 +252,15 @@ GEM
     open4 (1.3.4)
     orm_adapter (0.5.0)
     pandoc-ruby (2.0.2)
-    paper_trail (8.1.1)
+    paper_trail (8.1.2)
       activerecord (>= 4.2, < 5.2)
       request_store (~> 1.1)
-    parallel (1.12.0)
+    parallel (1.12.1)
     parser (2.4.0.2)
       ast (~> 2.3)
-    polyamorous (1.3.1)
+    polyamorous (1.3.3)
       activerecord (>= 3.0)
+    popper_js (1.12.9)
     powerpack (0.1.1)
     premailer (1.11.1)
       addressable
@@ -288,29 +272,29 @@ GEM
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    pry-byebug (3.5.1)
-      byebug (~> 9.1)
+    pry-byebug (3.6.0)
+      byebug (~> 10.0)
       pry (~> 0.10)
     pry-rails (0.3.6)
       pry (>= 0.10.4)
-    public_suffix (3.0.1)
-    puma (3.11.0)
-    rack (2.0.3)
+    public_suffix (3.0.2)
+    puma (3.11.2)
+    rack (2.0.4)
     rack-livereload (0.3.16)
       rack
     rack-test (0.8.2)
       rack (>= 1.0, < 3)
-    rails (5.1.4)
-      actioncable (= 5.1.4)
-      actionmailer (= 5.1.4)
-      actionpack (= 5.1.4)
-      actionview (= 5.1.4)
-      activejob (= 5.1.4)
-      activemodel (= 5.1.4)
-      activerecord (= 5.1.4)
-      activesupport (= 5.1.4)
+    rails (5.1.5)
+      actioncable (= 5.1.5)
+      actionmailer (= 5.1.5)
+      actionpack (= 5.1.5)
+      actionview (= 5.1.5)
+      activejob (= 5.1.5)
+      activemodel (= 5.1.5)
+      activerecord (= 5.1.5)
+      activesupport (= 5.1.5)
       bundler (>= 1.3.0)
-      railties (= 5.1.4)
+      railties (= 5.1.5)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
@@ -319,30 +303,31 @@ GEM
       rails (>= 3.2)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
-    rails-i18n (5.0.4)
-      i18n (~> 0.7)
-      railties (~> 5.0)
-    railties (5.1.4)
-      actionpack (= 5.1.4)
-      activesupport (= 5.1.4)
+    rails-i18n (5.1.0)
+      i18n (>= 0.7, < 2)
+      railties (>= 5.0, < 6)
+    railties (5.1.5)
+      actionpack (= 5.1.5)
+      activesupport (= 5.1.5)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rainbow (2.2.2)
       rake
     rake (12.3.0)
-    ransack (1.8.4)
+    ransack (1.8.7)
       actionpack (>= 3.0)
       activerecord (>= 3.0)
       activesupport (>= 3.0)
       i18n
-      polyamorous (~> 1.3)
+      polyamorous (~> 1.3.2)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    rdoc (4.3.0)
-    request_store (1.3.2)
-    rerun (0.11.0)
+    rdoc (6.0.1)
+    request_store (1.4.0)
+      rack (>= 1.4)
+    rerun (0.13.0)
       listen (~> 3.0)
     respec (0.9.1)
       rspec (>= 2.11)
@@ -355,7 +340,7 @@ GEM
       rspec-mocks (~> 3.7.0)
     rspec-collection_matchers (1.1.3)
       rspec-expectations (>= 2.99.0.beta1)
-    rspec-core (3.7.0)
+    rspec-core (3.7.1)
       rspec-support (~> 3.7.0)
     rspec-expectations (3.7.0)
       diff-lcs (>= 1.2.0, < 2.0)
@@ -371,29 +356,32 @@ GEM
       rspec-expectations (~> 3.7.0)
       rspec-mocks (~> 3.7.0)
       rspec-support (~> 3.7.0)
-    rspec-support (3.7.0)
-    rubocop (0.51.0)
+    rspec-support (3.7.1)
+    rubocop (0.52.1)
       parallel (~> 1.10)
-      parser (>= 2.3.3.1, < 3.0)
+      parser (>= 2.4.0.2, < 3.0)
       powerpack (~> 0.1)
-      rainbow (>= 2.2.2, < 3.0)
+      rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.0, >= 1.0.1)
     ruby-progressbar (1.9.0)
     rubyzip (1.2.1)
-    sass (3.4.25)
+    sass (3.5.5)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
     sass-rails (5.0.7)
       railties (>= 4.0.0, < 6)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sdoc (0.4.2)
-      json (~> 1.7, >= 1.7.7)
-      rdoc (~> 4.0)
-    selenium-webdriver (3.8.0)
+    sdoc (1.0.0)
+      rdoc (>= 5.0)
+    selenium-webdriver (3.9.0)
       childprocess (~> 0.5)
-      rubyzip (~> 1.0)
+      rubyzip (~> 1.2)
     shellany (0.0.1)
     shoulda-matchers (3.1.2)
       activesupport (>= 4.0.0)
@@ -437,9 +425,9 @@ GEM
     thread_safe (0.3.6)
     tilt (2.0.8)
     timeliness (0.3.8)
-    tzinfo (1.2.4)
+    tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.0.2)
+    uglifier (4.1.6)
       execjs (>= 0.3.0, < 3)
     unicode-display_width (1.3.0)
     validate_url (1.0.2)
@@ -460,8 +448,8 @@ GEM
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
-    xpath (2.1.0)
-      nokogiri (~> 1.3)
+    xpath (3.0.0)
+      nokogiri (~> 1.8)
     xray-rails (0.3.1)
       rails (>= 3.1.0)
 
@@ -474,7 +462,7 @@ DEPENDENCIES
   acts_as_tree
   awesome_print
   better_errors
-  bootstrap-sass
+  bootstrap (~> 4.0.0)
   cancancan
   capybara (>= 2.2.0.beta)
   capybara-screenshot
@@ -483,7 +471,6 @@ DEPENDENCIES
   cocoon
   codeclimate-test-reporter (~> 1.0.0)
   coffee-rails (~> 4.2)
-  compass-rails
   database_cleaner
   devise
   devise-i18n
@@ -532,7 +519,7 @@ DEPENDENCIES
   rspec-collection_matchers
   rspec-rails
   rubocop
-  sass-rails (~> 5.0)
+  sass-rails
   sdoc
   selenium-webdriver
   shoulda-matchers
diff --git a/README.rdoc b/README.rdoc
index 8c180bfc..5e8850d0 100644
--- a/README.rdoc
+++ b/README.rdoc
@@ -1,3 +1,80 @@
+bootstrap 4 accessibility:
+
+- accordions nun keine tabs mehr
+
+accordion und panel helpers: konsolidieren? umbenennen? cards? fieldset?
+
+unify template:
+
+- schlechte fokus styles
+- tastatur bedienbarkeit der dropdown menüs unmöglich?!
+
+the project template:
+
+- Focus styles often nearly invisible, which makes keyboard-only interaction very hard. At least there are often nice hover styles for mouse interaction, so could they easily be bound to focus events?
+
+- The multi level dropdowns aren't keyboard operable: it's impossible to reach an item on the 3rd navigation level! Whenever I hit enter to open a sub-sub-menu (or hit an arrow key), the whole menu simply collapses.
+
+- A lot of interactive widgets like sliders or lightboxes are not usable using keyboard.
+
+icons:
+
+- https://getbootstrap.com/docs/4.0/extend/icons/
+
+generell:
+
+- aria-current="page"
+- .sr-only-focusable
+- .dl-horizontal entfernt!
+- renamed .img-rounded to .rounded
+  - .img-fluid für responsive bilder?
+- .table-responsive => wie funktioniert das? ist es zugänglich?
+- .table-condensed => wie funktioniert das? ist es zugänglich?
+- .help-block renamed to .form-text
+- Dropped .radio-inline and .checkbox-inline
+- Replaced .has-error, .has-warning, and .has-success classes with :invalid and :valid pseudo-classes
+- Renamed .btn-default to .btn-secondary
+- Dropdowns can be built with <div>s or <ul>s now
+- Rebuilt dropdown styles and markup to provide easy, built-in support for <a> and <button> based dropdown items
+- Renamed .divider to .dropdown-divider
+- Dropdown items now require .dropdown-item
+- Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.
+- Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes
+- Dropped push and pull modifier classes for the new flexbox-powered order classes
+- .navbar-default is now .navbar-light
+- Navbars now require a background declaration of some kind
+- .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s)
+- An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumb s
+- Renamed .label to .badge
+- Dropped the .badge component as it was nearly identical to labels. Use the .badge-pill modifier together with the label component instead for that rounded look
+- Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
+- .badge-default has been dropped and .badge-secondary added to match component modifier classes used elsewhere
+- Panels, thumbnails, and wells Dropped entirely for the new card component
+- .panel to .card
+- .panel-default removed and no replacement
+- .panel-group removed and no replacement. .card-group is not a replacement, it is different.
+- .panel-heading to .card-header
+- .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
+- .panel-body to .card-body
+- .panel-footer to .card-footer
+- .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.
+- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons
+  - Wird das noch benutzt in Base??
+- Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none)
+- Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none.
+- Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
+- All @screen- variables have been removed in v4.0.0
+- The .hidden and .show classes have been removed. Instead, try toggling the [hidden] attribute.
+- All .hidden- classes have been removed
+- Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size.
+  - (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices)
+
+bootstrap:
+
+https://github.com/printercu/rails_sf_bs4/blob/master/config/initializers/simple_form_bootstrap.rb
+https://rails-sf-bs4.herokuapp.com/
+https://github.com/plataformatec/simple_form/pull/1337
+
 == Base Project
 
 {<img src="https://codeclimate.com/github/jmuheim/base/badges/gpa.svg" alt="Code Climate Status" />}[https://codeclimate.com/github/jmuheim/base]
diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee
index f18b2440..d2dd80c5 100644
--- a/app/assets/javascripts/application.coffee
+++ b/app/assets/javascripts/application.coffee
@@ -2,9 +2,10 @@
 #
 # Add more scripts to the block between `require_self` and `require init`!
 #
-#= require jquery
+#= require jquery3
 #
-#= require bootstrap
+#= require popper
+#= require bootstrap-sprockets
 #= require cocoon
 #= require diff_match_patch
 #= require jasny-bootstrap
diff --git a/app/assets/stylesheets/_env.sass b/app/assets/stylesheets/_env.sass
index 4c3d77f3..18de0c9a 100644
--- a/app/assets/stylesheets/_env.sass
+++ b/app/assets/stylesheets/_env.sass
@@ -1,12 +1,12 @@
-@import "env/variables/*"
+/*@import "env/variables/*"*/
 
 // Gem imports
-@import "bootstrap-sprockets"
+/*@import "bootstrap-sprockets"*/
 @import "bootstrap"
-@import "yamm"
-@import "font-awesome"
-@import "jasny-bootstrap"
-@import "fancybox"
+/*@import "yamm"*/
+/*@import "font-awesome"*/
+/*@import "jasny-bootstrap"*/
+/*@import "fancybox"*/
 
-@import "env/imports/*"
+/*@import "env/imports/*"*/
 @import "env/mixins/*"
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 67e20f89..ee34f957 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -2,15 +2,15 @@
 @import "env"
 
 // General layout
-@import "layout/main"
-@import "layout/navigation"
-@import "layout/footer"
+/*@import "layout/main"*/
+/*@import "layout/navigation"*/
+/*@import "layout/footer"*/
 
 // Layout components
-@import "layout/components/*"
+/*@import "layout/components/*"*/
 
 // Static pages
-@import "homepage/show"
+/*@import "homepage/show"*/
 
 // Resources
-@import "pages"
+/*@import "pages"*/
diff --git a/app/assets/stylesheets/homepage/_show.sass b/app/assets/stylesheets/homepage/_show.sass
index 0af78c09..ae8ac18f 100644
--- a/app/assets/stylesheets/homepage/_show.sass
+++ b/app/assets/stylesheets/homepage/_show.sass
@@ -15,5 +15,5 @@ body.homepage.show
       time
         position: absolute
         right: 0
-        font-size: $font-size-small
+        /*font-size: $font-size-small*/
         font-weight: normal
diff --git a/app/assets/stylesheets/layout/_footer.sass b/app/assets/stylesheets/layout/_footer.sass
index edc56591..f0261a4d 100644
--- a/app/assets/stylesheets/layout/_footer.sass
+++ b/app/assets/stylesheets/layout/_footer.sass
@@ -1,16 +1,17 @@
 #footer
   position: fixed
-  padding-top: $line-height-computed / 2
+  /*padding-top: $line-height-computed / 2*/
   bottom: 0
   width: 100%
-  background-color: $navbar-inverse-bg
-  color: $navbar-inverse-color
+  /*background-color: $navbar-inverse-bg*/
+  /*color: $navbar-inverse-color*/
 
+  // BT4: We moved this outside header, main, and footer!
   .container
-    background-color: $navbar-inverse-bg
+    /*background-color: $navbar-inverse-bg*/
 
   a
-    color: $navbar-inverse-link-active-color
+    /*color: $navbar-inverse-link-active-color*/
 
   .copyright
     text-align: right
diff --git a/app/assets/stylesheets/layout/_main.sass b/app/assets/stylesheets/layout/_main.sass
index a2345d64..11370911 100644
--- a/app/assets/stylesheets/layout/_main.sass
+++ b/app/assets/stylesheets/layout/_main.sass
@@ -7,7 +7,7 @@ main
     bottom: 60px // Accommodate the footer
 
   #headline_title:focus
-    outline: 1px dotted $input-border-focus
+    /*outline: 1px dotted $input-border-focus*/
 
   a:not(.btn):not(.panel-title a)
     text-decoration: underline
@@ -25,7 +25,7 @@ main
     margin-top: -10px
 
   div.actions
-    margin-bottom: $line-height-computed / 2
+    /*margin-bottom: $line-height-computed / 2*/
 
   td.actions
     .btn-group
diff --git a/app/assets/stylesheets/layout/_navigation.sass b/app/assets/stylesheets/layout/_navigation.sass
index de62a974..d3c35896 100644
--- a/app/assets/stylesheets/layout/_navigation.sass
+++ b/app/assets/stylesheets/layout/_navigation.sass
@@ -12,8 +12,8 @@
 
     &.active,
     &.active:hover
-      background-color: $navbar-inverse-link-active-bg
-      color: $navbar-inverse-link-active-color
+      /*background-color: $navbar-inverse-link-active-bg*/
+      /*color: $navbar-inverse-link-active-color*/
 
 .navbar
   .caret
@@ -35,13 +35,13 @@
   margin: 0 /* Otherwise, Bootstrap adds a -15px margin */
 
   a
-    +transform(translate(-50%, 0))
-    +box-shadow(#000 0 0 20px)
+    /*+transform(translate(-50%, 0))*/
+    /*+box-shadow(#000 0 0 20px)*/
     position: fixed
     z-index: 1040
     left: 50%
     top: 0
-    background-color: $navbar-inverse-link-active-bg
+    /*background-color: $navbar-inverse-link-active-bg*/
 
     // In collapsed mode, the links are too narrow otherwise
     padding:
diff --git a/app/assets/stylesheets/layout/components/_alerts.sass b/app/assets/stylesheets/layout/components/_alerts.sass
index d23119aa..52440177 100644
--- a/app/assets/stylesheets/layout/components/_alerts.sass
+++ b/app/assets/stylesheets/layout/components/_alerts.sass
@@ -14,5 +14,5 @@
 
   .close
     position: absolute
-    top: $alert-padding
-    right: $alert-padding
+    /*top: $alert-padding*/
+    /*right: $alert-padding*/
diff --git a/app/assets/stylesheets/layout/components/_debug.sass b/app/assets/stylesheets/layout/components/_debug.sass
index 99474a17..796da082 100644
--- a/app/assets/stylesheets/layout/components/_debug.sass
+++ b/app/assets/stylesheets/layout/components/_debug.sass
@@ -1,6 +1,6 @@
 // Adds "translation missing" to untranslated text nodes
 .translation_missing::after
-  +single-text-shadow
+  /*+single-text-shadow*/
   display: block
   content: 'translation missing'
   color: red
@@ -8,4 +8,4 @@
   z-index: 1000
   font-size: 11px
   line-height: 1
-  white-space: nowrap
\ No newline at end of file
+  white-space: nowrap
diff --git a/app/assets/stylesheets/layout/components/_fancybox.sass b/app/assets/stylesheets/layout/components/_fancybox.sass
index c2bd2d3f..a18e4788 100644
--- a/app/assets/stylesheets/layout/components/_fancybox.sass
+++ b/app/assets/stylesheets/layout/components/_fancybox.sass
@@ -10,4 +10,4 @@ a.fancybox
     border: 1px solid
 
     &:hover
-      +single-box-shadow
+      /*+single-box-shadow*/
diff --git a/app/assets/stylesheets/layout/components/_fileinput.sass b/app/assets/stylesheets/layout/components/_fileinput.sass
index 6c7cd9a8..6161e698 100644
--- a/app/assets/stylesheets/layout/components/_fileinput.sass
+++ b/app/assets/stylesheets/layout/components/_fileinput.sass
@@ -24,7 +24,7 @@
     cursor: pointer
     margin-bottom: 0
     line-height: 34px !important
-    border-color: $input-border
+    /*border-color: $input-border*/
 
     &:hover
       background-color: #ebebeb
@@ -43,7 +43,7 @@
     margin-top: 6px
 
     label
-      color: $text-color
+      /*color: $text-color*/
 
 .form-group.upload,
 .form-group.paste
diff --git a/app/assets/stylesheets/layout/components/_forms.sass b/app/assets/stylesheets/layout/components/_forms.sass
index 29a62d5c..03f82a7d 100644
--- a/app/assets/stylesheets/layout/components/_forms.sass
+++ b/app/assets/stylesheets/layout/components/_forms.sass
@@ -31,7 +31,7 @@ select.datetime
 
 .btn:focus,
   outline: 0
-  border-color: $input-border-focus
+  /*border-color: $input-border-focus*/
 
 // Make horizontal checkboxes don't have too much vertical padding
 .form-horizontal
@@ -46,14 +46,14 @@ select.datetime
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus
-  +box-shadow($input-border-focus 0 0 10px)
+  /*+box-shadow($input-border-focus 0 0 10px)*/
 
 textarea
   font-family: monospace
 
 .textarea-fullscreenizer
   .textarea-fullscreenizer-toggler
-    @extend .label
+    /*@extend .label*/
 
 .help-block-small
   margin-bottom: 0
diff --git a/app/assets/stylesheets/layout/components/_links.sass b/app/assets/stylesheets/layout/components/_links.sass
index 646e7a34..61fce7ea 100644
--- a/app/assets/stylesheets/layout/components/_links.sass
+++ b/app/assets/stylesheets/layout/components/_links.sass
@@ -1,8 +1,8 @@
 a,
 a.dropdown-toggle
   &:focus
-    +box-shadow($input-border-focus 0 0 5px)
-    outline: 1px solid $input-border-focus
+    /*+box-shadow($input-border-focus 0 0 5px)*/
+    /*outline: 1px solid $input-border-focus*/
     outline-offset: 0
 
 a.navbar-brand:focus
diff --git a/app/assets/stylesheets/layout/components/_markdown.sass b/app/assets/stylesheets/layout/components/_markdown.sass
index ba16074b..5219854d 100644
--- a/app/assets/stylesheets/layout/components/_markdown.sass
+++ b/app/assets/stylesheets/layout/components/_markdown.sass
@@ -20,8 +20,8 @@
 
 
   a
-    @include word-break(break-all)
-    @include hyphens(auto)
+    /*@include word-break(break-all)*/
+    /*@include hyphens(auto)*/
 
   .figure
     @extend .img-thumbnail
@@ -39,4 +39,4 @@
     +clearfix
 
   .clear
-    clear: both
\ No newline at end of file
+    clear: both
diff --git a/app/assets/stylesheets/pages.sass b/app/assets/stylesheets/pages.sass
index e09659e8..90598821 100644
--- a/app/assets/stylesheets/pages.sass
+++ b/app/assets/stylesheets/pages.sass
@@ -46,7 +46,7 @@ body.pages
         width: 100%
 
         .btn
-          +ellipsis
+          /*+ellipsis*/
           width: 50%
           white-space: nowrap
           text-align: center
@@ -65,4 +65,4 @@ body.pages
             .fa
               position: absolute
               top: 9px
-              right: 12px
\ No newline at end of file
+              right: 12px
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 79b5f844..8c2b0a9b 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -13,8 +13,6 @@ class ApplicationController < ActionController::Base
   before_action :authenticate_user!, if: :authenticate_user?
   check_authorization if: :check_authorization?
 
-  helper :image_gallery
-
   helper_method :body_css_classes
 
   self.responder = ApplicationResponder
diff --git a/app/helpers/accordion_helper.rb b/app/helpers/accordion_helper.rb
index c6d2a951..362c8031 100644
--- a/app/helpers/accordion_helper.rb
+++ b/app/helpers/accordion_helper.rb
@@ -5,7 +5,7 @@ def accordion(id, options = {}, &block)
 
   class Accordion < Struct.new(:id, :options, :view, :callback)
     delegate :link_to, to: :view
-    attr_accessor :accordion_options, :panel_counter, :options
+    attr_accessor :accordion_options, :card_counter, :options
 
     def initialize(id, options, view, callback)
       self.options = options
@@ -15,7 +15,7 @@ def initialize(id, options, view, callback)
       }
 
       self.id            = "#{id}_accordion"
-      self.panel_counter = 0
+      self.card_counter = 0
 
       super
     end
@@ -26,9 +26,9 @@ def render
                                          container_tag: accordion_options[:container_tag]
     end
 
-    def panel(&block)
-      self.panel_counter += 1
-      Item.new("#{id}_panel_#{panel_counter}", id, options[:item_options] || {}, view, block).render
+    def card(&block) # TODO: Card or item?!
+      self.card_counter += 1
+      Item.new("#{id}_card_#{card_counter}", id, options[:item_options] || {}, view, block).render
     end
 
     class Item < Struct.new(:id, :parent_id, :options, :view, :callback)
@@ -37,7 +37,7 @@ class Item < Struct.new(:id, :parent_id, :options, :view, :callback)
       def initialize(id, parent_id, options, view, block)
         self.item_options = {
           title_tag:   options[:title_tag]   || 'h3',
-          panel_class: options[:panel_class] || 'panel-default'
+          card_class: options[:card_class] || nil # e.g. bg-light
         }
 
         self.id        = id
@@ -55,12 +55,12 @@ def body(&block)
 
       def render
         view.capture(self, &callback)
-        view.render 'bootstrap/accordion/panel', id:          id,
+        view.render 'bootstrap/accordion/card', id:          id,
                                                  parent_id:   parent_id,
                                                  title:       title_content,
                                                  body:        body_content,
                                                  title_tag:   item_options[:title_tag],
-                                                 panel_class: item_options[:panel_class]
+                                                 card_class: item_options[:card_class]
       end
     end
   end
diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb
index c1298be1..003b3e05 100644
--- a/app/helpers/breadcrumbs_helper.rb
+++ b/app/helpers/breadcrumbs_helper.rb
@@ -3,11 +3,11 @@
 module BreadcrumbsHelper
   def render_breadcrumbs
     @breadcrumbs.map do |breadcrumb|
-      content_tag :li do
+      content_tag :li, class: 'breadcrumb-item' do
         link_to breadcrumb[:target] do
           truncate breadcrumb[:title], length: 30, separator: ' '
         end
       end
     end.join.html_safe
   end
-end
\ No newline at end of file
+end
diff --git a/app/helpers/carousel_helper.rb b/app/helpers/carousel_helper.rb
deleted file mode 100644
index 070985c3..00000000
--- a/app/helpers/carousel_helper.rb
+++ /dev/null
@@ -1,40 +0,0 @@
-module CarouselHelper
-  def carousel(id, images)
-    content_tag :div, id: id, class: ['carousel', 'slide'], data: {ride: 'carousel', interval: 7500} do
-      carousel_indicators(id, images) +
-      carousel_inner(images) +
-      carousel_control_left(id) +
-      carousel_control_right(id)
-    end
-  end
-
-  def carousel_indicators(id, images)
-    content_tag :ol, class: 'carousel-indicators' do
-      images.each_with_index.map do |image, i|
-        content_tag :li, nil, class: (i == 0 ? 'active' : nil), data: {slide_to: i, target: "##{id}"}
-      end.join.html_safe
-    end
-  end
-
-  def carousel_inner(images)
-    content_tag :div, class: 'carousel-inner' do
-      images.each_with_index.map do |image, i|
-        content_tag :div, class: "item #{i == 0 ? 'active' : nil}", style: "background-image: url(#{image_path(image.first)})" do
-          image_tag(image.first, alt: image.last) + content_tag(:p, image.last)
-        end
-      end.join.html_safe
-    end
-  end
-
-  def carousel_control_left(id)
-    content_tag :a, class: ['left', 'carousel-control'], data: {slide: 'prev'}, href: "##{id}", role: 'button' do
-      content_tag :span, nil, class: ['glyphicon', 'glyphicon-chevron-left']
-    end
-  end
-
-  def carousel_control_right(id)
-    content_tag :a, class: ['right', 'carousel-control'], data: {slide: 'next'}, href: "##{id}", role: 'button' do
-      content_tag :span, nil, class: ['glyphicon', 'glyphicon-chevron-right']
-    end
-  end
-end
diff --git a/app/helpers/image_gallery_helper.rb b/app/helpers/image_gallery_helper.rb
deleted file mode 100644
index d22b79b6..00000000
--- a/app/helpers/image_gallery_helper.rb
+++ /dev/null
@@ -1,17 +0,0 @@
-module ImageGalleryHelper
-  def image_gallery(name = nil, &block)
-    name ||= 'gallery_' + SecureRandom.hex(6)
-
-    content_tag :div, class: name do
-      with_options gallery_name: name do |gallery|
-        yield gallery
-      end
-    end
-  end
-
-  def zoomable_image(image, options = {})
-    content_tag :a, href: image.url, class: 'fancybox', rel: options.delete(:gallery_name) do
-      image_tag image.url(:thumb), options
-    end
-  end
-end
diff --git a/app/helpers/navbar_helper.rb b/app/helpers/navbar_helper.rb
new file mode 100644
index 00000000..54feaeed
--- /dev/null
+++ b/app/helpers/navbar_helper.rb
@@ -0,0 +1,120 @@
+module NavbarHelper
+  def navbar(id, options = {}, &block)
+    options[:id] = id
+    Navbar.new(self, options, block).render
+  end
+end
+
+class Lego < Struct.new(:view, :options, :block)
+  def initialize(view, options, block)
+    self.view = view
+    self.options = options
+
+    self.options[:id] ||= name.gsub '/', '_'
+    options.reverse_merge! defaults
+
+    super
+  end
+
+  def name
+    self.class.name.underscore
+  end
+
+  def path
+    "bootstrap/#{name}"
+  end
+
+  def render
+    view.render path, { content: view.capture(self, &block) # TODO: Would be nicer to use yield in view!
+                      }.merge(options)
+  end
+
+  def defaults
+    {}
+  end
+
+  def self.provides(*args)
+    options = args.extract_options!
+    legos = options
+
+    args.each do |lego|
+      legos[lego] = nil
+    end
+
+    legos.each_pair do |lego, params|
+      params = [params].flatten.compact
+
+      namespace = name.classify.constantize
+      klass = namespace.const_set(lego.to_s.classify, Class.new(self))
+
+      define_method lego do |*args, &block|
+        options   = args.extract_options!
+
+        raise "Param mismatch! Expected param names: #{params.join ', '}; given params: #{args.join ', '}." if args.size != params.size
+        params.each_with_index do |param, i|
+          options[param] = args[i]
+        end
+
+        klass.new(view, options, block).render
+      end
+    end
+  end
+end
+
+class Navbar < Lego
+  provides nav: :id
+
+  def defaults
+    { home: nil,
+      klass: ['navbar-dark', 'bg-dark', 'navbar-expand-md'],
+      collapse_target: "#{options[:id]}_collapse",
+      active_class: view.current_page?(view.root_path) ? 'active' : nil,
+    }
+  end
+
+  def home(&block)
+    options[:home] = view.capture(self, &block)
+  end
+
+  class Nav
+    provides mega: [:title, :target],
+             item: :target,
+             dropdown: [:title, :target]
+
+    def defaults
+      { klass: 'nil'
+      }
+    end
+
+    class Item
+      def defaults
+        { active_class: view.has_breadcrumb?(options[:target]) ? 'active' : nil
+        }
+      end
+    end
+
+    class Mega
+      def defaults
+        { active_class: view.has_breadcrumb?(options[:target]) ? 'active' : nil
+        }
+      end
+    end
+
+    class Dropdown
+      provides item: :target
+
+      def defaults
+        { active_class: view.has_breadcrumb?(options[:target]) ? 'active' : nil,
+          klass: nil
+        }
+      end
+
+      class Item
+        def defaults
+          { active_class: view.current_page?(options[:target]) ? 'active' : nil
+          }
+        end
+      end
+    end
+  end
+end
diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb
index d7186514..011ee767 100644
--- a/app/helpers/navigation_helper.rb
+++ b/app/helpers/navigation_helper.rb
@@ -27,10 +27,10 @@ def navigation_group(group_title, target, item_title = nil, &block)
     end
 
     has_breadcrumb = has_breadcrumb?(target)
-    content_tag :li, class: "dropdown #{:active if has_breadcrumb}" do
-      link = link_to '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown', 'aria-expanded': false do
-               group_title += content_tag(:span, " (#{t('layouts.navigation.current_group')})", class: 'sr-only') if has_breadcrumb
-               group_title + content_tag(:b, nil, class: :caret)
+    content_tag :li, class: "nav-item dropdown #{:active if has_breadcrumb}" do
+      link = link_to '#', class: 'nav-link dropdown-toggle', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false do
+               group_title += content_tag(:span, " (#{t('layouts.navigation.current_parent')})", class: 'sr-only') if has_breadcrumb
+               group_title
              end
 
       dropdown = content_tag :ul, class: 'dropdown-menu' do
@@ -51,7 +51,7 @@ def navigation_group(group_title, target, item_title = nil, &block)
   #
   # The options hash accepts the following keys:
   #
-  # - `:active` sets the forces active state (used internally by `navigation_group`)
+  # - `:active` forces active state (used internally by `navigation_group`)
   #
   # The item's state is automatically set to active, if ther helper method `has_breadcrumb?` returns `true` for the given `target` URL.
   def navigation_item(*args, &block)
@@ -69,10 +69,11 @@ def navigation_item(*args, &block)
 
     title = title.html_safe
     options[:active] = has_breadcrumb?(target) if options[:active].nil?
-    title += content_tag(:span, " (#{t('layouts.navigation.current_item')})", class: 'sr-only') if options[:active]
+    title += content_tag(:span, " (#{t('layouts.navigation.current_page')})", class: 'sr-only') if options[:active]
 
-    content_tag :li, class: "#{:active if options[:active]}" do
-      link_to title, target
+    # BT4: Needs .dropdown-item if nested!
+    content_tag :li, class: "nav-item #{:active if options[:active]}" do
+      link_to title, target, class: 'nav-link'
     end
   end
 
@@ -90,7 +91,7 @@ def navigation_mega(group_title, target, &block)
       active = current_page?(target)
 
       link = link_to '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown', 'aria-expanded': false do
-               group_title += content_tag(:span, " (#{t('layouts.navigation.current_group')})", class: 'sr-only') if active
+               group_title += content_tag(:span, " (#{t('layouts.navigation.current_parent')})", class: 'sr-only') if active
                group_title + content_tag(:b, nil, class: :caret)
              end
 
@@ -101,4 +102,4 @@ def navigation_mega(group_title, target, &block)
       link + dropdown
     end
   end
-end
\ No newline at end of file
+end
diff --git a/app/views/bootstrap/_accordion.html.slim b/app/views/bootstrap/_accordion.html.slim
index 6514b3ee..7fdaee3f 100644
--- a/app/views/bootstrap/_accordion.html.slim
+++ b/app/views/bootstrap/_accordion.html.slim
@@ -1,2 +1,2 @@
-*{tag: container_tag} id=id role="tablist" class="accordion panel-group" aria-multiselectable="true"
-  = body
\ No newline at end of file
+*{tag: container_tag} id=id
+  = body
diff --git a/app/views/bootstrap/_navbar.html.slim b/app/views/bootstrap/_navbar.html.slim
new file mode 100644
index 00000000..06a40841
--- /dev/null
+++ b/app/views/bootstrap/_navbar.html.slim
@@ -0,0 +1,16 @@
+// BT4: Hier drunter hatte es noch ein .yamm!
+.navbar id=id class=klass
+  .container
+    h2#navigation_title.sr-only = title
+
+    - if home
+      a.navbar-brand href=root_path class=active_class
+        = home
+        =< sr_only t "layouts.navigation.#{active_class ? :current_page : :go_to_home_page}"
+
+    button.navbar-toggler.collapsed type="button" data-toggle="collapse" data-target="##{collapse_target}" aria-controls=collapse_target aria-expanded="false"
+      span.navbar-toggler-icon
+      = toggle
+
+    .navbar-collapse.collapse id=collapse_target
+      = content
diff --git a/app/views/bootstrap/_panel.html.slim b/app/views/bootstrap/_panel.html.slim
index 025ccc76..dcec7eb9 100644
--- a/app/views/bootstrap/_panel.html.slim
+++ b/app/views/bootstrap/_panel.html.slim
@@ -1,7 +1,7 @@
-fieldset.panel class="panel-#{type}"
-  legend.panel-heading
+fieldset.card class="bg-#{type}"
+  legend.card-header
     / In HTML 5.2, headings are allowed within legend elements, see https://w3c.github.io/html/sec-forms.html#the-legend-element. This is very good news, as in complex forms, legends serve the same purpose as headings do, and e.g. screenreaders only announce legends when focusing a form element, but having headings describing the page is always a good idea.
     *heading_options = heading_content
 
-  .panel-body
-    *body_options = body_content
\ No newline at end of file
+  .card-body
+    *body_options = body_content
diff --git a/app/views/bootstrap/accordion/_card.html.slim b/app/views/bootstrap/accordion/_card.html.slim
new file mode 100644
index 00000000..b6383f00
--- /dev/null
+++ b/app/views/bootstrap/accordion/_card.html.slim
@@ -0,0 +1,9 @@
+.card class=card_class
+  .card-header id=id
+    *{tag: title_tag} class="mb-0 h5"
+      button.btn.btn-link data-toggle="collapse" data-target="##{id}_collapse" aria-expanded="false" aria-controls="#{id}_collapse" type="button"
+        = title
+
+  .collapse id="#{id}_collapse" aria-labelledby=id data-parent="##{parent_id}"
+    .card-body
+      = body
diff --git a/app/views/bootstrap/accordion/_panel.html.slim b/app/views/bootstrap/accordion/_panel.html.slim
deleted file mode 100644
index 171be75b..00000000
--- a/app/views/bootstrap/accordion/_panel.html.slim
+++ /dev/null
@@ -1,8 +0,0 @@
-.panel class=panel_class
-  .panel-heading id=id role="tab"
-    *{tag: title_tag} class="panel-title"
-      a.collapsed href="##{id}_collapse" data-toggle="collapse" data-parent="##{parent_id}" aria-expanded="false" aria-controls="#{id}_collapse" = title
-
-  .panel-collapse.collapse id="#{id}_collapse" role="tabpanel" aria-labelledby=id
-    .panel-body
-      = body
diff --git a/app/views/bootstrap/navbar/_item.html.slim b/app/views/bootstrap/navbar/_item.html.slim
new file mode 100644
index 00000000..34668792
--- /dev/null
+++ b/app/views/bootstrap/navbar/_item.html.slim
@@ -0,0 +1,3 @@
+li.nav-item
+  a.nav-link href=target
+    = content
diff --git a/app/views/bootstrap/navbar/_nav.html.slim b/app/views/bootstrap/navbar/_nav.html.slim
new file mode 100644
index 00000000..7931e753
--- /dev/null
+++ b/app/views/bootstrap/navbar/_nav.html.slim
@@ -0,0 +1,4 @@
+h3.sr-only = title
+
+ul.navbar-nav id=id class=klass
+  = content
diff --git a/app/views/bootstrap/navbar/nav/_dropdown.html.slim b/app/views/bootstrap/navbar/nav/_dropdown.html.slim
new file mode 100644
index 00000000..d9f2f661
--- /dev/null
+++ b/app/views/bootstrap/navbar/nav/_dropdown.html.slim
@@ -0,0 +1,7 @@
+li.nav-item.dropdown
+  a.nav-item.nav-link.dropdown-toggle href=target data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class=active_class
+    = title
+    =< sr_only t 'layouts.navigation.current_parent' if active_class
+
+  ul.dropdown-menu class=klass
+    = content
diff --git a/app/views/bootstrap/navbar/nav/_item.html.slim b/app/views/bootstrap/navbar/nav/_item.html.slim
new file mode 100644
index 00000000..573d3d21
--- /dev/null
+++ b/app/views/bootstrap/navbar/nav/_item.html.slim
@@ -0,0 +1,4 @@
+li.nav-item
+  a.nav-link href=target class=active_class
+    = content
+    =< sr_only t 'layouts.navigation.current_page' if active_class
diff --git a/app/views/bootstrap/navbar/nav/_mega.html.slim b/app/views/bootstrap/navbar/nav/_mega.html.slim
new file mode 100644
index 00000000..a06f51a4
--- /dev/null
+++ b/app/views/bootstrap/navbar/nav/_mega.html.slim
@@ -0,0 +1,6 @@
+li.nav-item.dropdown
+  a.nav-item.nav-link.dropdown-toggle href=target class=active_class data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+    = title
+
+  .dropdown-menu
+    = content
diff --git a/app/views/bootstrap/navbar/nav/dropdown/_item.html.slim b/app/views/bootstrap/navbar/nav/dropdown/_item.html.slim
new file mode 100644
index 00000000..2c1385e1
--- /dev/null
+++ b/app/views/bootstrap/navbar/nav/dropdown/_item.html.slim
@@ -0,0 +1,4 @@
+li
+  a.dropdown-item href=target class=active_class
+    = content
+    =< sr_only t 'layouts.navigation.current_page' if active_class
diff --git a/app/views/codes/_codes.html.slim b/app/views/codes/_codes.html.slim
index 3353eb9e..a1692e98 100644
--- a/app/views/codes/_codes.html.slim
+++ b/app/views/codes/_codes.html.slim
@@ -1,11 +1,11 @@
 .codes
   = accordion :codes, item_options: {title_tag: "h#{heading_level ||= 2}", panel_class: 'panel-success'} do |accordion|
-    = accordion.panel do |panel|
-      = panel.title do
+    = accordion.card do |card|
+      = card.title do
         = Code.model_name.human count: :other
         =< "(#{codes.size})"
 
-      = panel.body do
+      = card.body do
         table.table.table-striped.table-hover.diff
           thead
             tr
diff --git a/app/views/homepage/_news.html.slim b/app/views/homepage/_news.html.slim
index 127db3dc..2bc202b1 100644
--- a/app/views/homepage/_news.html.slim
+++ b/app/views/homepage/_news.html.slim
@@ -1,11 +1,20 @@
 h2.sr-only = t '.title'
 
 = accordion :news do |accordion|
-  = accordion.panel do |panel|
-    = panel.title do
+  = accordion.card do |card|
+    = card.title do
       time datetime="2015-4-26" 26th April 2015
       => icon 'newspaper-o', type: :fa
       | Some great tagline
 
-    = panel.body do
+    = card.body do
       | And some great news here...
+
+  = accordion.card do |card|
+    = card.title do
+      time datetime="2018-6-8" 8th June 2018
+      => icon 'newspaper-o', type: :fa
+      | Bootstrap 4! Yay!
+
+    = card.body do
+      | Woah, how cool is that?!
diff --git a/app/views/images/_images.html.slim b/app/views/images/_images.html.slim
index b32f28fc..a4652ec1 100644
--- a/app/views/images/_images.html.slim
+++ b/app/views/images/_images.html.slim
@@ -1,11 +1,11 @@
 .images
   = accordion :images, item_options: {title_tag: "h#{heading_level ||= 2}", panel_class: 'panel-warning'} do |accordion|
-    = accordion.panel do |panel|
-      = panel.title do
+    = accordion.card do |card|
+      = card.title do
         = Image.model_name.human count: :other
         =< "(#{images.size})"
 
-      = panel.body do
+      = card.body do
         table.table.table-striped.table-hover.diff
           thead
             tr
@@ -17,4 +17,4 @@
 
           tbody
             - images.each do |image|
-              == render 'images/image', image: image
\ No newline at end of file
+              == render 'images/image', image: image
diff --git a/app/views/layouts/_jump_links.html.slim b/app/views/layouts/_jump_links.html.slim
index b1dc0b27..116a2be8 100644
--- a/app/views/layouts/_jump_links.html.slim
+++ b/app/views/layouts/_jump_links.html.slim
@@ -1,5 +1,7 @@
-.navbar-inverse
+// BT4: Optimise?!
+nav.navbar-inverse
   ul#jump_links.nav.navbar-nav
+    li = link_to t('.content'), '#headline_title', accesskey: 1, class: 'sr-only', id: 'jump_to_content'
+
     - unless current_page?(root_path)
       li = link_to t('.home_page'), root_path, accesskey: 0, class: 'sr-only', id: 'jump_to_home_page'
-    li = link_to t('.content'), '#headline_title', accesskey: 1, class: 'sr-only', id: 'jump_to_content'
diff --git a/app/views/layouts/_navigation.html.slim b/app/views/layouts/_navigation.html.slim
index da83a942..a4d9a932 100644
--- a/app/views/layouts/_navigation.html.slim
+++ b/app/views/layouts/_navigation.html.slim
@@ -1,77 +1,67 @@
-nav#navigation.container
-  .navbar.yamm.navbar-inverse.navbar-fixed-top
-    h2#navigation_title.sr-only = t '.navigation'
+nav
+  = navbar :navigation, title: t('.navigation'), toggle: t('.toggle_navigation') do |navbar|
+    - navbar.home do
+      = t '.home'
 
-    .container
-      .navbar-header
-        // Place brand before the "Toggle navigation" button to have an intuitive focus order (on the Bootstrap examples page it's after the button which seems unintuitive)
-        = link_to root_path, class: home_link_class, id: 'logo' do
-          = t('.home')
-          span.sr-only =< t('.go_to_home_page')
+    = navbar.nav :content_navigation, title: t('.content_navigation') do |nav|
+      - @root_pages.each do |page|
+        - if (children = page.children).any?
+          = nav.dropdown page.navigation_title_or_title, page_path(page) do |dropdown|
+            = dropdown.item page_path(page) do
+              | Overview
+            li.dropdown-divider role="presentation"
+            - page.children.each do |child|
+              = dropdown.item page_path(child) do
+                = child.navigation_title_or_title
+        - else
+          = nav.item page_path(page) do
+            = page.navigation_title_or_title
 
-        button#toggle_navigation.navbar-toggle.collapsed aria-controls="bs-navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button"
-          span.menu-text = t '.toggle_navigation'
-          span.menu-icon
-            span.icon-bar
-            span.icon-bar
-            span.icon-bar
+    = navbar.nav :meta_navigation, title: t('.meta_navigation'), klass: 'ml-md-auto' do |nav|
+      == render 'layouts/resource_navigation_group', nav: nav, resource_class: Page if can? :index, Page
+      == render 'layouts/resource_navigation_group', nav: nav, resource_class: User if can? :index, User
 
-      #navbar.navbar-collapse.collapse aria-expanded="false"
-        h3.sr-only = t '.content_navigation'
+      - if user_signed_in?
+        = nav.dropdown user_avatar(t('.user_menu')), user_registration_path, klass: 'dropdown-menu-right' do |dropdown|
+          = dropdown.item user_registration_path do
+            = icon :user, type: :fa
+            =< t '.show_account'
 
-        ul#content_navigation.nav.navbar-nav
-          - @root_pages.each do |page|
-            - if (children = page.children).any?
-              = navigation_group page.navigation_title_or_title, page_path(page) do
-                - page.children.each do |child|
-                  = navigation_item child.navigation_title_or_title, page_path(child)
-            - else
-              = navigation_item page.navigation_title_or_title, page_path(page)
+          = dropdown.item edit_user_registration_path do
+            = icon :edit, type: :fa
+            =< t '.edit_account'
 
-        h3.sr-only = t '.meta_navigation'
+          li
+            = link_to destroy_user_session_path, method: :delete, class: 'dropdown-item' do
+              = icon 'sign-out', type: :fa
+              = t '.log_out'
 
-        ul#meta_navigation.nav.navbar-nav.navbar-right
-          == render 'layouts/resource_navigation_group', resource_class: Page if can? :index, Page
-          == render 'layouts/resource_navigation_group', resource_class: User if can? :index, User
+      - else
+        = nav.item new_user_registration_path do
+          span.visible-sm-inline-block = icon 'user-plus', type: :fa
+          span.hidden-sm = t '.sign_up'
 
-          - if user_signed_in?
-            = navigation_group user_avatar(t('.user_menu')), user_registration_path, "#{icon :user, type: :fa} #{t '.show_account'}" do
-              = navigation_item edit_user_registration_path do
-                = icon :edit, type: :fa
-                =< t '.edit_account'
+        = nav.mega t('.sign_in'), new_user_session_path do
+          = render 'devise/sessions/form', resource: User.new, display: :small
 
-              li
-                = link_to destroy_user_session_path, method: :delete do
-                  = icon('sign-out', type: :fa)
-                  =< t('.log_out')
+        li#locale_chooser.nav-item.dropdown
+          = link_to '#', class: 'nav-link dropdown-toggle', 'data-toggle': 'dropdown', 'aria-expanded': false do
+            = flag(current_locale_flag, t('.choose_locale'))
 
-          - else
-            = navigation_item new_user_registration_path do
-              span.visible-sm-inline-block = icon 'user-plus', type: :fa
-              span.hidden-sm = t '.sign_up'
+          ul.dropdown-menu.dropdown-menu-right
+            li
+              = link_to url_for(locale: 'en'), class: 'dropdown-item' do
+                => flag(:gb)
+                | Show page in english
 
-            = navigation_mega t('.sign_in'), new_user_session_path do
-              .row = render 'devise/sessions/form', resource: User.new, display: :small
+            li
+              = link_to url_for(locale: 'de'), class: 'dropdown-item' do
+                => flag(:de)
+                | Seite auf Deutsch anzeigen
 
-          li#locale_chooser.dropdown
-            = link_to '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown', 'aria-expanded': false do
-              = flag(current_locale_flag, t('.choose_locale'))
-              b.caret
-
-            ul.dropdown-menu
-              li lang="en"
-                = link_to locale: 'en' do
-                  => flag(:gb)
-                  | Show page in english
-
-              li lang="de"
-                = link_to locale: 'de' do
-                  => flag(:de)
-                  | Seite auf Deutsch anzeigen
-
-  #breadcrumbs.breadcrumb
+  #breadcrumbs.container
     h3 #{t '.you_are_here'}:
 
     ol.breadcrumb
-      li = link_to t('app.acronym'), root_path
+      li.breadcrumb-item = link_to t('app.acronym'), root_path
       = render_breadcrumbs
diff --git a/app/views/layouts/_resource_navigation_group.html.slim b/app/views/layouts/_resource_navigation_group.html.slim
index 75d15fd4..5ff4f3f4 100644
--- a/app/views/layouts/_resource_navigation_group.html.slim
+++ b/app/views/layouts/_resource_navigation_group.html.slim
@@ -1,5 +1,9 @@
-= navigation_group resource_class.model_name.human(count: :other), send("#{resource_class.to_s.underscore.pluralize}_path"), "#{icon :bars, type: :fa} #{t 'actions.resources_list', resources: resource_class.model_name.human(count: :other)}" do
+= nav.dropdown resource_class.model_name.human(count: :other), index_path = send("#{resource_class.to_s.underscore.pluralize}_path") do |dropdown|
+  = dropdown.item index_path do
+    = icon :bars, type: :fa
+    =< t 'actions.resources_list', resources: resource_class.model_name.human(count: :other)
+
   - if can? :create, resource_class
-    = navigation_item send("new_#{resource_class.to_s.underscore}_path") do
+    = dropdown.item send("new_#{resource_class.to_s.underscore}_path") do
       = icon :plus, type: :fa
-      =< t 'actions.new_resource', resource: resource_class.model_name.human
\ No newline at end of file
+      =< t 'actions.new_resource', resource: resource_class.model_name.human
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index ef46b74f..cf958201 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -12,9 +12,9 @@ html lang=I18n.locale
     = auto_discovery_link_tag(:atom, pages_path(format: :atom), title: Page.model_name.human(count: :other))
 
   body class=body_css_classes
-    header
-      == render 'layouts/jump_links'
+    == render 'layouts/jump_links'
 
+    header
       h1.sr-only = t '.header'
       == render 'layouts/navigation'
 
@@ -23,17 +23,18 @@ html lang=I18n.locale
         .col-md-12
           == yield
 
-    footer#footer
-      h1.sr-only = t '.footer'
+    footer#footer.pt-4.my-md-5.pt-md-5.border-top
       .container
+        h1.sr-only = t '.footer'
+
         .row
-          .col-xs-8.slogan.atom
+          .col-sm-8.slogan.atom
             p
               => link_to(t('app.name'), 'https://github.com/jmuheim/base/') + ':'
-              span.hidden-xs = t 'app.slogan'
+              = t 'app.slogan'
 
               =< link_to pages_path(format: :atom) do
                 = icon :rss, 'Atom Feed', type: :fa
 
-          .col-xs-4.copyright
+          .col-sm-4.copyright
             p &copy; 2015 #{link_to t('org.name'), 'http://www.muheimwebdesign.ch/'}
diff --git a/app/views/pages/_form.html.slim b/app/views/pages/_form.html.slim
index cbdbbf34..f05a7016 100644
--- a/app/views/pages/_form.html.slim
+++ b/app/views/pages/_form.html.slim
@@ -4,11 +4,11 @@
   == render 'shared/form/stale_info', f: f
 
   = accordion :info, item_options: {title_tag: 'h2', panel_class: 'panel-info'} do |accordion|
-    = accordion.panel do |panel|
-      = panel.title do
+    = accordion.card do |card|
+      = card.title do
         = t '.info'
 
-      = panel.body do
+      = card.body do
         == render 'page_hierarchy_info'
         == render 'referencing_pages_info'
 
@@ -37,4 +37,4 @@
   .row
     .col-md-12
       == render 'shared/pastables/form', f: f
-      == render 'shared/form/actions', form: f, resource: @page
\ No newline at end of file
+      == render 'shared/form/actions', form: f, resource: @page
diff --git a/app/views/pages/show.html.slim b/app/views/pages/show.html.slim
index dff65a67..d572b500 100644
--- a/app/views/pages/show.html.slim
+++ b/app/views/pages/show.html.slim
@@ -17,11 +17,11 @@
         - unless @page.notes.blank?
           .notes
             = accordion :notes, item_options: {title_tag: 'h2', panel_class: 'panel-warning'} do |accordion|
-              = accordion.panel do |panel|
-                = panel.title do
+              = accordion.card do |card|
+                = card.title do
                   = Page.human_attribute_name :notes
 
-                = panel.body do
+                = card.body do
                   = markdown indent_heading_level complete_internal_references(@page, :notes), 2, 2
 
         .additional_information
diff --git a/app/views/shared/form/_stale_info.html.slim b/app/views/shared/form/_stale_info.html.slim
index 188a7b62..8db199e3 100644
--- a/app/views/shared/form/_stale_info.html.slim
+++ b/app/views/shared/form/_stale_info.html.slim
@@ -2,7 +2,7 @@
 
 - if f.object.stale_info.any?
   .stale_info
-    = panel :warning do |panel|
+    = panel :warning do |card|
       = panel.heading do
         = t '.stale_attributes'
 
diff --git a/app/views/shared/pastables/_info.html.slim b/app/views/shared/pastables/_info.html.slim
index 0dc74ef2..57e89001 100644
--- a/app/views/shared/pastables/_info.html.slim
+++ b/app/views/shared/pastables/_info.html.slim
@@ -1,6 +1,6 @@
-= accordion.panel do |panel|
-  = panel.title do
+= accordion.card do |card|
+  = card.title do
     = t '.info'
 
-  = panel.body do
+  = card.body do
     == render 'shared/pastables/pasting_resources_info'
\ No newline at end of file
diff --git a/app/views/shared/show/_versions.html.slim b/app/views/shared/show/_versions.html.slim
index 565cd8fb..f29d836d 100644
--- a/app/views/shared/show/_versions.html.slim
+++ b/app/views/shared/show/_versions.html.slim
@@ -1,11 +1,11 @@
 .versions
   = accordion :versions, item_options: {title_tag: "h#{heading_level ||= 2}", panel_class: 'panel-danger'} do |accordion|
-    = accordion.panel do |panel|
-      = panel.title do
+    = accordion.card do |card|
+      = card.title do
         = PaperTrail::Version.model_name.human count: :other
         =< "(#{versions.size})"
 
-      = panel.body do
+      = card.body do
         table.table.table-striped.table-hover.diff
           thead
             tr
diff --git a/app/views/users/_created_pages.html.slim b/app/views/users/_created_pages.html.slim
index e44a4b51..136dbf90 100644
--- a/app/views/users/_created_pages.html.slim
+++ b/app/views/users/_created_pages.html.slim
@@ -1,11 +1,11 @@
 .created_pages
   = accordion :created_pages, item_options: {title_tag: "h#{heading_level ||= 2}", panel_class: 'panel-success'} do |accordion|
-    = accordion.panel do |panel|
-      = panel.title do
+    = accordion.card do |card|
+      = card.title do
         = User.human_attribute_name :created_pages
         =< "(#{pages.size})"
 
-      = panel.body do
+      = card.body do
         table.table.table-striped.table-hover
           thead
             tr
diff --git a/app/views/users/_users.html.slim b/app/views/users/_users.html.slim
index 38072da4..a5e43887 100644
--- a/app/views/users/_users.html.slim
+++ b/app/views/users/_users.html.slim
@@ -1,10 +1,10 @@
 = accordion :filter, item_options: {title_tag: 'h2', panel_class: 'panel-warning'} do |accordion|
-  = accordion.panel do |panel|
-    = panel.title do
+  = accordion.card do |card|
+    = card.title do
       => icon :filter, type: :fa
       = t 'actions.filter'
 
-    = panel.body do
+    = card.body do
       - if params[:q]
         = link_to request.path
           => icon :close, type: :fa
@@ -16,7 +16,7 @@
         / TODO: Fields aren't translated automatically, see https://github.com/activerecord-hackery/ransack/issues/631
         / TODO: Why is this required by default?
         = f.input :name_cont, required: false, label: "#{User.human_attribute_name :name} #{t('ransack.predicates.cont')}"
-        = f.button :submit, t('actions.filter'), class: 'btn-warning'
+        = f.button :submit, t('actions.apply_filter'), class: 'btn-warning'
 
 h2.sr-only = t 'actions.results'
 
diff --git a/config/initializers/better_errors_with_atom.rb b/config/initializers/better_errors_with_atom.rb
deleted file mode 100644
index 2c2805bc..00000000
--- a/config/initializers/better_errors_with_atom.rb
+++ /dev/null
@@ -1,4 +0,0 @@
-# https://github.com/WizardOfOgz/atom-handler#integrating-with-bettererrors
-if defined? BetterErrors
-  BetterErrors.editor = "atm://open?url=file://%{file}&line=%{line}"
-end
diff --git a/config/locales/actions/de.yml b/config/locales/actions/de.yml
index 471b8da8..de5d1655 100644
--- a/config/locales/actions/de.yml
+++ b/config/locales/actions/de.yml
@@ -2,6 +2,7 @@
 de:
   actions:
     actions: Aktionen
+    apply_filter: Filter anwenden
     destroy: Löschen
     destroy_resource: "%{resource} löschen"
     destroy_resource_confirmation_question: "%{resource} #%{id} wirklich löschen?"
diff --git a/config/locales/actions/en.yml b/config/locales/actions/en.yml
index f8695300..e3f7e2ad 100644
--- a/config/locales/actions/en.yml
+++ b/config/locales/actions/en.yml
@@ -2,6 +2,7 @@
 en:
   actions:
     actions: Actions
+    apply_filter: Apply filter
     destroy: Delete
     destroy_resource: Delete %{resource}
     destroy_resource_confirmation_question: 'Really destroy %{resource} #%{id}?'
diff --git a/config/locales/layouts/de.yml b/config/locales/layouts/de.yml
index 446c8b50..1bbddfb9 100644
--- a/config/locales/layouts/de.yml
+++ b/config/locales/layouts/de.yml
@@ -10,8 +10,8 @@ de:
     navigation:
       choose_locale: Sprache wählen
       content_navigation: Inhaltsnavigation
-      current_group: aktuelle Menügruppe
-      current_item: aktueller Menüpunkt
+      current_parent: aktuelle Menügruppe
+      current_page: aktueller Menüpunkt
       edit_account: Konto bearbeiten
       go_to_home_page: "(zur Startseite)"
       home: Base
diff --git a/config/locales/layouts/en.yml b/config/locales/layouts/en.yml
index 1ce26d0e..97836d52 100644
--- a/config/locales/layouts/en.yml
+++ b/config/locales/layouts/en.yml
@@ -10,8 +10,8 @@ en:
     navigation:
       choose_locale: Choose locale
       content_navigation: Content navigation
-      current_group: current menu group
-      current_item: current menu item
+      current_parent: "(current parent)"
+      current_page: "(current page)"
       edit_account: Edit account
       go_to_home_page: "(go to home page)"
       home: Base
diff --git a/spec/features/navigation_spec.rb b/spec/features/navigation_spec.rb
index 4942c264..2df780ea 100644
--- a/spec/features/navigation_spec.rb
+++ b/spec/features/navigation_spec.rb
@@ -10,7 +10,7 @@
       it 'offers the expected links' do
         visit root_path
 
-        within 'nav' do
+        within 'header nav' do
           expect(page).to have_link 'Base'
 
           within '#content_navigation' do
@@ -37,7 +37,7 @@
 
         visit root_path
 
-        within 'nav' do
+        within 'header nav' do
           expect(page).to have_link 'Base'
 
           within '#content_navigation' do
@@ -64,7 +64,7 @@
 
         visit root_path
 
-        within 'nav' do
+        within 'header nav' do
           expect(page).to have_link 'Base'
 
           within '#content_navigation' do
@@ -91,7 +91,7 @@
 
         visit root_path
 
-        within 'nav' do
+        within 'header nav' do
           expect(page).to have_link 'Base'
 
           within '#content_navigation' do
@@ -127,7 +127,7 @@
   it 'shows the "Menu" button on small, medium, and large screens (and collapses it on extra small ones)', js: true do
     visit root_path
 
-    within 'nav' do
+    within 'header nav' do
       screen_width :xs do
         expect(page).to have_button 'Menu'
       end
@@ -146,7 +146,7 @@
     end
   end
 
-  it 'reports the status of dropdowns (expanded/collapsed) to non-visual agents', js: true do
+  it 'reports the status of dropdowns (expanded/collapsed) to non-visual agents', focus: true, js: true do
     visit root_path
 
     within '#locale_chooser' do
@@ -159,7 +159,7 @@
   it 'reports the responsiveness status (expanded/collapsed) to non-visual agents', js: true do
     visit root_path
 
-    within 'nav' do
+    within 'header nav' do
       screen_width :xs do
         expect {
           click_button 'Menu'
@@ -172,12 +172,12 @@
     sign_in_as create :user, :admin
     visit root_path
 
-    active_menu_group_css  = '.dropdown.active > a.dropdown-toggle'
-    active_menu_group_text = 'Users (current menu group)'
-    active_menu_item_css   = '.dropdown.active > ul.dropdown-menu > li.active > a'
-    active_menu_item_text  = 'List of Users (current menu item)'
+    active_menu_group_css  = '.dropdown > a.dropdown-toggle.active'
+    active_menu_group_text = 'Users (current parent)'
+    active_menu_item_css   = '.dropdown > a.active + ul.dropdown-menu > li > a.active'
+    active_menu_item_text  = 'List of Users (current page)'
 
-    within 'nav' do
+    within 'header nav' do
       expect(page).not_to have_css  active_menu_group_css
       expect(page).not_to have_text active_menu_group_text
 
@@ -187,7 +187,7 @@
 
     click_link 'List of Users'
 
-    within 'nav' do
+    within 'header nav' do
       expect(page).to have_css active_menu_group_css, text: active_menu_group_text
       expect(page).to have_css active_menu_item_css,  text: active_menu_item_text
     end
@@ -211,16 +211,16 @@
     visit root_path
 
     active_menu_group_css  = '.dropdown.active > a.dropdown-toggle'
-    active_menu_group_text = 'Users (current menu group)'
+    active_menu_group_text = 'Users (current parent)'
 
-    within 'nav' do
+    within 'header nav' do
       expect(page).not_to have_css  active_menu_group_css
       expect(page).not_to have_text active_menu_group_text
     end
 
     visit edit_user_path(user)
 
-    within 'nav' do
+    within 'header nav' do
       expect(page).to have_css active_menu_group_css, text: active_menu_group_text
     end
   end
@@ -232,34 +232,34 @@
     # First, none of the pages should be reported as active
     visit root_path
 
-    expect(page).to     have_css '.dropdown:not(.active) > a', text: 'Parent page'
-    expect(page).not_to have_link 'Parent page (current menu group)'
+    expect(page).to     have_css '.dropdown > a:not(.active)', text: 'Parent page'
+    expect(page).not_to have_link 'Parent page (current parent)'
 
-    expect(page).to     have_css '.dropdown:not(.active) > ul > li a:not(.active)', text: 'Overview'
-    expect(page).not_to have_link 'Overview (current menu item)'
+    expect(page).to     have_css '.dropdown > a:not(.active) + ul > li a:not(.active)', text: 'Overview'
+    expect(page).not_to have_link 'Overview (current page)'
 
-    expect(page).to     have_css '.dropdown:not(.active) > ul > li a:not(.active)', text: 'Cool page'
-    expect(page).not_to have_link 'Cool page (current menu item)'
+    expect(page).to     have_css '.dropdown > a:not(.active) + ul > li a:not(.active)', text: 'Cool page'
+    expect(page).not_to have_link 'Cool page (current page)'
 
     # Now, when visiting the menu group, it should be reported as active, and the overview menu item, too.
     visit page_path(parent_page)
 
-    expect(page).to     have_css '.dropdown.active > a', text: 'Parent page (current menu group)'
+    expect(page).to     have_css '.dropdown > a.active', text: 'Parent page (current parent)'
 
-    expect(page).to     have_css '.dropdown.active > ul > li.active a', text: 'Overview (current menu item)'
+    expect(page).to     have_css '.dropdown > a.active + ul > li > a.active', text: 'Overview (current page)'
 
-    expect(page).to     have_css '.dropdown.active > ul > li:not(.active)', text: 'Cool page'
-    expect(page).not_to have_link 'Cool page (current menu item)'
+    expect(page).to     have_css '.dropdown > a.active + ul > li > a:not(.active)', text: 'Cool page'
+    expect(page).not_to have_link 'Cool page (current page)'
 
     # Now, when visiting the menu item, the menu group should be reported as active, and the menu item (but not the overview menu item anymore)
     visit page_path(@page)
 
-    expect(page).to     have_css '.dropdown.active > a', text: 'Parent page (current menu group)'
+    expect(page).to     have_css '.dropdown > a.active', text: 'Parent page (current parent)'
 
-    expect(page).to     have_css '.dropdown.active > ul > li:not(.active)', text: 'Overview'
-    expect(page).not_to have_link 'Overview (current menu item)'
+    expect(page).to     have_css '.dropdown > a.active + ul > li > a:not(.active)', text: 'Overview'
+    expect(page).not_to have_link 'Overview (current page)'
 
-    expect(page).to     have_css '.dropdown.active > ul > li.active a', text: 'Cool page (current menu item)'
+    expect(page).to     have_css '.dropdown > a.active + ul > li > a.active', text: 'Cool page (current page)'
   end
 
   context 'jump links' do
diff --git a/spec/features/users/index_spec.rb b/spec/features/users/index_spec.rb
index cb0ef548..e17c868b 100644
--- a/spec/features/users/index_spec.rb
+++ b/spec/features/users/index_spec.rb
@@ -45,7 +45,7 @@
     expect(page).to have_css dom_id_selector(@user_3)
 
     fill_in 'q_name_cont', with: 'anne'
-    click_button 'Filter'
+    click_button 'Apply filter'
 
     expect(page).to     have_css dom_id_selector(@user_1)
     expect(page).to     have_css dom_id_selector(@user_2)
diff --git a/spec/helpers/image_gallery_helper_spec.rb b/spec/helpers/image_gallery_helper_spec.rb
deleted file mode 100644
index f5ed15af..00000000
--- a/spec/helpers/image_gallery_helper_spec.rb
+++ /dev/null
@@ -1,44 +0,0 @@
-require 'rails_helper'
-
-describe ImageGalleryHelper do
-  describe '#image_gallery' do
-    it 'uses the name parameter (if available)' do
-      expect(image_gallery('my_gallery') { |gallery| }).to have_css 'div.my_gallery'
-    end
-
-    it 'generates a name (if none passed as parameter)' do
-      expect(image_gallery { |gallery| }).to have_css 'div[class^="gallery_"]'
-    end
-  end
-
-  describe '#zoomable_image' do
-    let(:image) do
-      image = double
-      expect(image).to receive(:url) { 'original-url' }
-      expect(image).to receive(:url).with(:thumb) { 'thumb-url' }
-      image
-    end
-
-    context 'called on its own' do
-      subject { zoomable_image image, class: 'some_class', alt: 'This is a great image' }
-
-      it { should     have_css 'a.fancybox img' }
-      it { should     have_css 'a[href="original-url"]' }
-      it { should_not have_css 'a[rel]' }
-      it { should     have_css 'img.some_class' }
-      it { should     have_css 'img[alt="This is a great image"]' }
-      it { should     have_css 'img[src="/images/thumb-url"]' }
-    end
-
-    context 'called inside image_gallery' do
-      subject do
-        image_gallery 'my_gallery' do |gallery|
-          gallery.zoomable_image image, class: 'some_class', alt: 'This is a great image'
-        end
-      end
-
-      it { should have_css 'div.my_gallery a.fancybox img' }
-      it { should have_css 'a[rel="my_gallery"]' }
-    end
-  end
-end
diff --git a/spec/support/matchers/have_active_navigation_items.rb b/spec/support/matchers/have_active_navigation_items.rb
index 0c2e9b3b..e72da398 100644
--- a/spec/support/matchers/have_active_navigation_items.rb
+++ b/spec/support/matchers/have_active_navigation_items.rb
@@ -8,7 +8,7 @@ def initialize(*items)
 
       def matches?(controller)
         @items.each_with_index do |item, index|
-          unless controller.has_css? "#navigation li.active a", text: item, visible: false
+          unless controller.has_css? "#navigation li a.active", text: item, visible: false
             @failure_item = item
             return false
           end
@@ -24,4 +24,4 @@ def have_active_navigation_items(*args)
       HaveActiveNavigationItems.new(*args)
     end
   end
-end
\ No newline at end of file
+end