diff --git a/TODO.md b/TODO.md
index d69f5d5..a5d61c1 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,3 +1,9 @@
 * check if ffmpeg is faster with less input files
 * close filehandle after sending?
   * or clean up when handling subsequent requests
+
+bootstrap 4
+-----------
+* fix design...
+* fix calendar icon
+* add "Minuten" to Länge
diff --git a/prolefeeder.py b/prolefeeder.py
index 828b8ac..7b701ac 100644
--- a/prolefeeder.py
+++ b/prolefeeder.py
@@ -19,7 +19,7 @@ from config import Config
 app = Flask(__name__)
 app.config.from_object(Config)
 app.config['WTF_I18N_ENABLED'] = False  # enables WTForms built-in translations
-Bootstrap(app)
+bootstrap = Bootstrap(app)
 
 attachment_filenames = {}
 
diff --git a/requirements.txt b/requirements.txt
index ac5d4f2..b365542 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,5 @@
 werkzeug==0.16.1
 flask
-flask-bootstrap
+bootstrap-flask
 python-dotenv
-
-# flask-wtf 0.14.2 is broken (enabling WTForms built-in translations does not work):
-git+https://github.com/lepture/flask-wtf.git@534e1734b86c2f0907af131c11b981e6146ca57c
+flask-wtf >= 1.0.0
diff --git a/templates/base.html b/templates/base.html
index 2ed9de5..6a6d8c1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,7 +17,7 @@
     </div>
 </div>
 
-{{ utils.flashed_messages() }}
+{{ utils.render_messages() }}
 
 <div class="container">
     {% block app_content %}{% endblock %}
diff --git a/templates/download.html b/templates/download.html
index e26ab93..0ee9542 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
+{% import "bootstrap/form.html" as wtf %}
 
 
 {% block head %}
@@ -7,7 +7,10 @@
     {% if filename is defined %}
     <meta http-equiv="refresh" content="0;URL='{{ url_for('download_file', filename=filename) }}'" />
     {% endif %}
-    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
+          integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
+          crossorigin="anonymous" />
 {% endblock %}
 
 {% block page_header %}
@@ -27,16 +30,17 @@
 
         <div class="form-group required {% if form.start_time.errors %}has-error{% endif -%}">
             {{ form.start_time.label(class_="control-label") }}
-            <div class='input-group' id='start_time_group'>
-                <input name='start_time' id='start_time_' class="form-control"
+            <div class='input-group' id='start_time_group' data-target-input="nearest">
+                <input name='start_time' id='start_time_' class="form-control datetimepicker-input"
+                    type="text" data-target="#start_time_group"
                     placeholder="{{ form.start_time.format }}"
                     {% if form.start_time.data %}
                     value="{{ form.start_time.data.strftime(form.start_time.format) }}"
                     {% endif %}
                 />
-                <span class="input-group-addon">
-                    <span class="glyphicon glyphicon-calendar"></span>
-                </span>
+                <div class="input-group-append" data-target="#start_time_group" data-toggle="datetimepicker">
+                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                </div>
             </div>
             {% for error in form.start_time.errors %}
             <p class="help-block">{{ error }}</p>
@@ -65,8 +69,11 @@
 {% block scripts %}
 {{ super() }}
 
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
+        integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
+        crossorigin="anonymous"></script>
 
 <script type="text/javascript">
     $(document).ready(function() {