diff --git a/setup.py b/setup.py
index f4f823ce..65def474 100755
--- a/setup.py
+++ b/setup.py
@@ -43,7 +43,7 @@
         'xstatic',
         'XStatic-asciinema-player',
         'xstatic-bootbox',
-        'xstatic-bootstrap<4.0.0.0',
+        'xstatic-bootstrap>=4.0.0.0,<5.0.0.0',
         'xstatic-font-awesome',
         'xstatic-jquery',
         'xstatic-jquery-ui',
diff --git a/src/bepasty/static/app/css/style.css b/src/bepasty/static/app/css/style.css
index 434c0f45..5443ff42 100644
--- a/src/bepasty/static/app/css/style.css
+++ b/src/bepasty/static/app/css/style.css
@@ -96,6 +96,8 @@ body {
 /* override pygments table highlighting style */
 table.highlighttable {
     width: 100%;
+    border: 1px solid #ccc;
+    background-color: #f5f5f5;
 }
 
 .linenodiv pre, .highlight pre {
@@ -103,6 +105,7 @@ table.highlighttable {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
+    padding: 9.5px;
 }
 
 .highlight p {
@@ -121,6 +124,7 @@ table.highlighttable {
 .highlight pre {
     padding-left: 0;
     padding-right: 0;
+    border-left: 1px solid #ccc;
 }
 
 /* Set minimal width and let the contents push the block width */
diff --git a/src/bepasty/templates/_layout.html b/src/bepasty/templates/_layout.html
index b1781083..6bfdcef5 100644
--- a/src/bepasty/templates/_layout.html
+++ b/src/bepasty/templates/_layout.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta name="description" content="">
         <meta name="author" content="">
         <!-- Favicon -->
@@ -24,40 +24,48 @@
     <body>
         <div id="wrapper">
             <!-- Begin header -->
-            <div id="header">
+            <div id="header" class="pb-3">
                 <div class="container">
-                    <nav class="navbar navbar-default" role="navigation">
+                    <nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
                         <div class="container-fluid">
                             <!-- Brand and toggle get grouped for better mobile display -->
-                            <div class="navbar-header">
-                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
-                                    <span class="sr-only">Toggle navigation</span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                </button>
-                                <a class="navbar-brand" href="{{ url_for('bepasty.index') }}">
-                                    {{ config.SITENAME }} (Permissions: {% for permission, permission_icon in flaskg.icon_permissions %}<i class="fa fa-{{ permission_icon }}" title="{{ permission }}"></i>  {% endfor %})
-                                </a>
-                            </div>
+                            <a class="navbar-brand" href="{{ url_for('bepasty.index') }}">
+                                {{ config.SITENAME }} (Permissions: {% for permission, permission_icon in flaskg.icon_permissions %}<i class="fa fa-{{ permission_icon }}" title="{{ permission }}"></i>  {% endfor %})
+                            </a>
+                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+                                <span class="navbar-toggler-icon"></span>
+                            </button>
+
                             <!-- Collect the nav links, forms, and other content for toggling -->
-                            <div class="collapse navbar-collapse" id="navbar-collapse">
-                                <ul class="nav navbar-nav">
-                                    <li><a href="http://bepasty-server.readthedocs.org/en/latest/">Documentation</a></li>
+                            <div class="collapse navbar-collapse" id="navbarHeader">
+                                <ul class="navbar-nav mr-auto">
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="http://bepasty-server.readthedocs.org/en/latest/">Documentation</a>
+                                    </li>
                                     {% if may(LIST) %}
-                                    <li><a href="{{ url_for('bepasty.filelist') }}">List all Items</a></li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="{{ url_for('bepasty.filelist') }}">List all Items</a>
+                                    </li>
                                     {% endif %}
                                 </ul>
                                 {% if flaskg.logged_in %}
-                                <form class="navbar-form navbar-right" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
-                                    <input class="btn btn-default" type="submit" value="Logout">
+                                <form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
+                                    <div class="form-row">
+                                        <div class="col">
+                                            <input class="btn btn-outline-secondary" type="submit" value="Logout">
+                                        </div>
+                                    </div>
                                 </form>
                                 {% else %}
-                                <form class="navbar-form navbar-right form-inline" role="form" method="post" action="{{ url_for('bepasty.login') }}">
-                                    <div class="form-group">
-                                        <input class="form-control" type="password" name="token" autofocus>
+                                <form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.login') }}">
+                                    <div class="form-row">
+                                        <div class="col">
+                                            <input class="form-control" type="password" name="token" placeholder="Password" autofocus>
+                                        </div>
+                                        <div class="col">
+                                            <button type="submit" class="btn btn-outline-secondary">Login</button>
+                                        </div>
                                     </div>
-                                    <button type="submit" class="btn btn-default">Login</button>
                                 </form>
                                 {% endif %}
                             </div><!-- /.navbar-collapse -->
@@ -87,7 +95,7 @@
         <!-- jQuery UI -->
         <script src="{{ url_for('bepasty.xstatic', name='jquery_ui', filename='jquery-ui.min.js') }}" type="text/javascript"></script>
         <!-- Bootstrap -->
-        <script src="{{ url_for('bepasty.xstatic', name='bootstrap', filename='js/bootstrap.min.js') }}" type="text/javascript"></script>
+        <script src="{{ url_for('bepasty.xstatic', name='bootstrap', filename='js/bootstrap.bundle.min.js') }}" type="text/javascript"></script>
         {% block extra_script %}{% endblock %}
     </body>
 </html>
diff --git a/src/bepasty/templates/_utils.html b/src/bepasty/templates/_utils.html
index 7b5f42cb..0479090a 100644
--- a/src/bepasty/templates/_utils.html
+++ b/src/bepasty/templates/_utils.html
@@ -41,19 +41,19 @@
                     {% endif %}
                 </td>
                 <td>
-                    <div class="btn-group">
-                        <a href="{{ url_for('bepasty.display', name=file['id']) }}" class="btn btn-xs btn-info">
+                    <div class="btn-group flex-wrap flex-md-nowrap" role="group">
+                        <a href="{{ url_for('bepasty.display', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
                             display
                         </a>
-                        <a href="{{ url_for('bepasty.download', name=file['id']) }}" class="btn btn-xs btn-info">
+                        <a href="{{ url_for('bepasty.download', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
                             download
                         </a>
-                        <a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="btn btn-xs btn-info">
+                        <a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
                             inline
                         </a>
                         {% if may(DELETE) %}
                             <form action="{{ url_for('bepasty.delete', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-xs btn-danger">
+                                <button type="submit" class="btn btn-sm btn-danger">
                                     delete
                                 </button>
                             </form>
@@ -61,13 +61,13 @@
                         {% if may(ADMIN) %}
                         {% if not file['locked'] %}
                             <form action="{{ url_for('bepasty.lock', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-xs btn-danger">
+                                <button type="submit" class="btn btn-sm btn-danger">
                                     lock
                                 </button>
                             </form>
                         {% else %}
                             <form action="{{ url_for('bepasty.unlock', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-xs btn-info">
+                                <button type="submit" class="btn btn-sm btn-info">
                                     unlock
                                 </button>
                             </form>
diff --git a/src/bepasty/templates/display.html b/src/bepasty/templates/display.html
index ba6c7084..3aa67295 100644
--- a/src/bepasty/templates/display.html
+++ b/src/bepasty/templates/display.html
@@ -1,20 +1,20 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="card">
+    <div class="card-header">
         <h1>
             {{ item.meta['filename'] }}
         </h1>
-        <div class="btn-group">
+        <div class="btn-group flex-wrap flex-md-nowrap" role="group">
             {% if not item.meta['locked'] or may(ADMIN) %}
                 <a id="qr-btn" href="{{ url_for('bepasty.qr', name=name) }}" class="btn btn-info">
                     <span class="fa fa-qrcode"></span> QR
                 </a>
-                <a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info">
+                <a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info" role="button">
                     <span class="fa fa-download"></span> Download
                 </a>
-                <a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info">
+                <a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info" role="button">
                     <span class="fa fa-asterisk"></span> Inline
                 </a>
             {% endif %}
@@ -43,7 +43,7 @@ <h1>
             {% endif %}
         </div>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
         <p>
         Type: {{ item.meta['type'] }},
         Size: {{ item.meta['size'] }} bytes,
diff --git a/src/bepasty/templates/error.html b/src/bepasty/templates/error.html
index a7d876ff..e2ba1f65 100644
--- a/src/bepasty/templates/error.html
+++ b/src/bepasty/templates/error.html
@@ -1,13 +1,13 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="panel panel-default">
-    <div class="panel-heading">
+<div class="card">
+    <div class="card-header">
         <h1>
             {{ heading }}
         </h1>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
         <div class="alert alert-danger">
             {{ body }}
         </div>
diff --git a/src/bepasty/templates/filelist.html b/src/bepasty/templates/filelist.html
index a7b4fa4c..d893d22a 100644
--- a/src/bepasty/templates/filelist.html
+++ b/src/bepasty/templates/filelist.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-sm-12">
+    <div class="col-md-12">
         {{ utils.filelist(files) }}
     </div>
 </div>
diff --git a/src/bepasty/templates/index.html b/src/bepasty/templates/index.html
index 726b6c60..4d215466 100644
--- a/src/bepasty/templates/index.html
+++ b/src/bepasty/templates/index.html
@@ -2,10 +2,10 @@
 
 {% macro maximum_lifetime() -%}
 <div class="row">
-    <div class="col-md-3 form-group">
+    <div class="col-lg-3 form-group">
         <input class="form-control" name="maxlife-value" type="number" min="1" value="1" /><br>
     </div>
-    <div class="col-md-9 form-group">
+    <div class="col-lg-9 form-group">
         <select class="form-control" name="maxlife-unit" size="1">
             <option value="months">Months</option>
             <option value="weeks">Weeks</option>
@@ -22,35 +22,35 @@
 {% block content %}
 {% if may(CREATE) %}
 <div class="row">
-    <div class="col-sm-8">
+    <div class="col-md-8">
         <form action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <textarea class="form-control" id="formupload" name="text" placeholder="Paste text here..." autofocus></textarea>
             </div>
             <div class="row">
-                <div class="col-xs-3 form-group">
+                <div class="col-3 form-group">
                     <input class="form-control" type="text" id="contenttype" name="contenttype" size="30" placeholder="Content-Type">
                 </div>
-                <div class="col-xs-6 form-group">
+                <div class="col-6 form-group">
                     <input class="form-control" type="text" id="filename" name="filename" size="40" placeholder="optional download-filename">
                 </div>
-                <div class="col-xs-3">
-                    <button id="formupload-submit" class="btn btn-success btn-block">Submit</button>
+                <div class="col-3">
+                    <button id="formupload-submit" class="btn btn-primary btn-block">Submit</button>
                 </div>
             </div>
             <hr>
             <label>Maximum lifetime value (choose before dragging or submitting)</label>
             {{ maximum_lifetime() }}
-            <span class="btn btn-default fileinput-button dropzone">
+            <span class="btn btn-light fileinput-button dropzone">
                 <i class="fa fa-upload"></i>
                 <span>drag and drop files here - or click to select files</span>
                 <!-- Input for file upload widget -->
-                <input id="fileupload" type="file" name="file" multiple style="height: 100%; width: 100%;">
+                <input id="fileupload" type="file" class="form-control-file" name="file" multiple style="height: 100%; width: 100%;">
             </span>
             <noscript><br><button id="fileupload-submit" class="btn btn-success btn-block">Upload</button></noscript>
         </form>
     </div>
-    <div class="col-sm-4">
+    <div class="col-md-4">
         <!-- item name list assembled here and offered for submission -->
         <form id="filelist-form" style="display: none" action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
             <div class="form-group">
@@ -59,18 +59,24 @@
             {{ maximum_lifetime() }}
             <input type="hidden" name="contenttype" value="text/x-bepasty-list">
             <div class="row">
-                <div class="col-md-7 form-group">
+                <div class="col-lg-7 form-group">
                     <input class="form-control" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
                 </div>
-                <div class="col-md-5">
+                <div class="col-lg-5">
                     <button class="btn btn-success btn-block">Create List Item</button>
                 </div>
             </div>
         </form>
-        <button id="fileupload-abort" class="btn btn-danger pull-right" style="visibility: hidden">abort</button>
-        <!-- The progress bar -->
-        <div id="fileupload-progress" class="progress progress-striped active" style="visibility: hidden">
-            <div class="progress-bar"></div>
+        <div class="d-flex pt-3 pb-3 align-items-center">
+            <!-- The progress bar -->
+            <div class="col-lg-9 pl-0 pr-0">
+                <div id="fileupload-progress" class="progress" style="visibility: hidden">
+                    <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
+                </div>
+            </div>
+            <div class="col-lg-3">
+                <button id="fileupload-abort" class="btn btn-danger" style="visibility: hidden">abort</button>
+            </div>
         </div>
         <!-- Uploaded files -->
         <div id="files" class="files"></div>
@@ -78,12 +84,12 @@
 </div>
 
 {% else %}
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2 border-bottom">
     <h1>bepasty, the Binary File Upload Site</h1>
 </div>
 <div class="jumbotron">
     <div class="row">
-        <div class="col-sm-3">
+        <div class="col-md-3">
             <span class="fa fa-thumbs-o-up"></span>
             <h2>Free and Nice</h2>
             <p>
@@ -91,7 +97,7 @@ <h2>Free and Nice</h2>
                 not just for text.
             </p>
         </div>
-        <div class="col-sm-6">
+        <div class="col-md-6">
             <span class="fa fa-eye"></span>
             <h2>Free and Open Source</h2>
             <p>
@@ -99,7 +105,7 @@ <h2>Free and Open Source</h2>
                 <a href="https://github.com/bepasty/">bepasty project on github</a>
             </p>
         </div>
-        <div class="col-sm-3">
+        <div class="col-md-3">
             <span class="fa fa-heart-o"></span>
             <h2>Awesome Code</h2>
             <p>
diff --git a/src/bepasty/templates/qr.html b/src/bepasty/templates/qr.html
index beb5db47..72f3c4d9 100644
--- a/src/bepasty/templates/qr.html
+++ b/src/bepasty/templates/qr.html
@@ -71,19 +71,19 @@
 
 
 {% block content %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <form class="form-horizontal">
-                <div class="form-group">
-                    <label class="control-label col-sm-3" for="text">Content:</label>
-                    <div class="col-sm-9">
+    <div class="card">
+        <div class="card-header">
+            <form>
+                <div class="form-group row">
+                    <label class="col-md-3 col-form-label text-md-right text-nowrap" for="text">Content:</label>
+                    <div class="col-md-9">
                         <input class="form-control" id="text" placeholder="https://example.org/" size="80"
                                value="{{ text }}">
                     </div>
                 </div>
                 <div class="form-group row">
-                    <label class="control-label col-sm-3" for="errorCorrectionLevel">Error correction:</label>
-                    <div class="col-sm-2">
+                    <label class="col-md-3 col-form-label text-md-right text-nowrap" for="errorCorrectionLevel">Error correction:</label>
+                    <div class="col-md-2">
                         <select class="form-control" id="errorCorrectionLevel" name="e">
                             <option value="L">7% (L)</option>
                             <option value="M">15% (M)</option>
@@ -91,8 +91,8 @@
                             <option value="H" selected="selected">30% (H)</option>
                         </select>
                     </div>
-                    <label class="control-label col-sm-1" for="qrsize">Size:</label>
-                    <div class="col-sm-6">
+                    <label class="col-md-1 col-form-label text-md-right text-nowrap" for="qrsize">Size:</label>
+                    <div class="col-md-6">
                         <input type="range" class="form-control" id="qrsize" min="45" max="500" value="100">
                     </div>
                 </div>
@@ -103,7 +103,7 @@
             </div>
         </div>
 
-        <div class="panel-body">
+        <div class="card-body">
             <div class="text-center">
                 <div id="qr"></div>
             </div>
diff --git a/src/bepasty/tests/screenshots.py b/src/bepasty/tests/screenshots.py
new file mode 100644
index 00000000..39ef50d2
--- /dev/null
+++ b/src/bepasty/tests/screenshots.py
@@ -0,0 +1,203 @@
+from selenium.webdriver import Firefox
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support import expected_conditions
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.common.exceptions import NoSuchElementException
+from selenium.common.exceptions import ElementNotInteractableException
+
+import pytest
+import os
+import time
+import tempfile
+
+
+@pytest.mark.needs_server
+class TestScreenShots(object):
+    url_base = 'http://localhost:5000'
+    # bootstrap4 breakpoints
+    screenshot_dir = 'screenshots'
+    screen_sizes = [(450, 700), (576, 800), (768, 600), (992, 768), (1200, 1024)]
+
+    def setup_class(self):
+        """
+        Setup: Open a mozilla browser, login
+        """
+        self.browser = Firefox()
+        self.browser.get(self.url_base + '/invalid')
+
+    def teardown_class(self):
+        """
+        Tear down: Close the browser
+        """
+        self.browser.quit()
+
+    def wait_present(self, xpath, timeout=10):
+        cond = expected_conditions.presence_of_element_located((By.XPATH, xpath))
+        WebDriverWait(self.browser, timeout).until(cond)
+
+    def screen_shot(self, name, w, h):
+        if not os.path.isdir(self.screenshot_dir):
+            os.mkdir(self.screenshot_dir)
+        self.browser.save_screenshot(
+            '{}/{}-{}x{}.png'.format(self.screenshot_dir, name, w, h)
+        )
+
+    def screen_shots(self, name):
+        for w, h in self.screen_sizes:
+            self.browser.set_window_size(w, h)
+            time.sleep(.1)
+            self.screen_shot(name, w, h)
+
+    def scroll_to_bottom(self):
+        self.set_smallest_window_size()
+        self.browser.execute_script('window.scrollTo(0, document.body.scrollHeight);')
+
+    def set_smallest_window_size(self):
+        # change smallest screen size
+        w, h = self.screen_sizes[0]
+        self.browser.set_window_size(w, h)
+        time.sleep(.1)
+
+    def set_largest_window_size(self):
+        # change largest screen size
+        w, h = self.screen_sizes[-1]
+        self.browser.set_window_size(w, h)
+        time.sleep(.1)
+
+    def toggle_hamburger(self):
+        self.set_smallest_window_size()
+
+        # toggle hamburger menu
+        try:
+            self.browser.find_element_by_xpath('//button[@class="navbar-toggler"]').click()
+        except ElementNotInteractableException:
+            pass
+        time.sleep(.5)
+
+        self.set_largest_window_size()
+
+    def top_screen_shots(self, name):
+        self.screen_shots('{}1'.format(name))
+
+        # open hamburger
+        self.toggle_hamburger()
+
+        self.screen_shots('{}2'.format(name))
+
+        # close hamburger
+        self.toggle_hamburger()
+
+    def error_404(self):
+        # NOTE: 404 error
+        self.screen_shots("01-error404")
+
+    def login(self):
+        self.browser.get(self.url_base)
+
+        # NOTE: login screen, 1 - close hamburger, 2 - open hamburger
+        self.top_screen_shots("02-top")
+
+        token = self.browser.find_element_by_name("token")
+        password = "foo"
+        # login
+        token.send_keys(password)
+        token.submit()
+        self.wait_present("//input[@value='Logout']")
+
+        # NOTE: upload screen, 1 - close hamburger, 2 - open hamburger
+        self.top_screen_shots("03-upload")
+
+        try:
+            self.browser.find_element_by_xpath("//input[@value='Logout']")
+        except NoSuchElementException:
+            raise ValueError("Can't login! Please edit your config, go to PERMISSIONS setting "
+                             "and add a new secret 'foo' with all permissions.")
+
+    def upload_file(self, path):
+        # set file path
+        fileupload = self.browser.find_element_by_id('fileupload')
+        fileupload.send_keys(path)
+
+        form = self.browser.find_element_by_xpath('//form[@action="/+upload"]')
+        form.click()
+
+    def upload_view(self):
+        # small files
+        for i in (1, 2, 3):
+            with tempfile.NamedTemporaryFile(suffix=".sh") as fp:
+                fp.write("""\
+#!/bin/sh
+
+if [ $# -le 0 ]; then
+    echo "no argument" 2>&1
+    exit 1
+fi
+
+echo "hello, world!"
+""".encode())
+                fp.flush()
+                self.upload_file(fp.name)
+
+        self.scroll_to_bottom()
+
+        # NOTE: uploaded screen
+        self.screen_shots("04-uploading1")
+
+        # big file
+        with tempfile.NamedTemporaryFile(suffix=".bin") as fp:
+            os.truncate(fp.name, 1024 * 1024 * 1024)
+            self.upload_file(fp.name)
+
+            self.scroll_to_bottom()
+
+            # NOTE: in-progress uploading screen
+            self.screen_shots("05-uploading2")
+
+            # click abort
+            abort = self.browser.find_element_by_id('fileupload-abort')
+            abort.click()
+            time.sleep(.5)
+
+            # NOTE: abort bootbox
+            self.screen_shots("06-abort")
+
+            ok = self.browser.find_element_by_class_name('bootbox-accept')
+            ok.click()
+
+            self.scroll_to_bottom()
+
+            # NOTE: aborted upload screen
+            self.screen_shots("07-uploading3")
+
+    def list_view(self):
+        self.browser.get(self.url_base + '/+list')
+        # NOTE: list screen
+        self.screen_shots("08-list")
+
+    def display_view(self):
+        self.browser.get(self.url_base + '/+list')
+        list_link = self.browser.find_elements_by_xpath('//tr/td/a')
+        list_link[0].click()
+
+        # highlight line
+        self.browser.get(self.browser.current_url + '#L-4')
+
+        # NOTE: display screen
+        self.screen_shots("09-display")
+
+        lock = self.browser.find_element_by_id('lock-btn')
+        lock.click()
+        # NOTE: display with lock screen
+        self.screen_shots("10-lock")
+
+        qr = self.browser.find_element_by_id('qr-btn')
+        qr.click()
+        # NOTE: QR code screen
+        self.screen_shots("11-qr")
+
+    def test(self):
+        self.error_404()
+        self.login()
+        self.upload_view()
+        self.list_view()
+        self.display_view()
