diff --git a/app/templates/_helpers.html b/app/templates/_helpers.html
index efe2ae652c54d95be8b64caa4c6bd0d64e6391bf..006674ca94419e067c552db75d674855acc57636 100644
--- a/app/templates/_helpers.html
+++ b/app/templates/_helpers.html
@@ -1,3 +1,3 @@
-{% macro nav_li(active) -%}
-<li {% if active %}class="active"{% endif %}>
+{% macro nav_a(active) -%}
+<a class="nav-item nav-link{% if active %} active{% endif %}"
 {%- endmacro %}
diff --git a/app/templates/base.html b/app/templates/base.html
index 88e8c01d6cf9dde5eff5d3d9116396e41373aca1..fff361b584b37c9b7e4667cbc5e25981c2c7f485 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,6 +1,6 @@
 {%- extends "bootstrap/base.html" %}
 {% import "bootstrap/utils.html" as utils %}
-{% from "_helpers.html" import nav_li %}
+{% from "_helpers.html" import nav_a %}
 
 {% block styles %}
   {{super()}}
@@ -12,41 +12,38 @@
 
 {% block navbar %}
   <!-- Fixed navbar -->
-  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container">
-      <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>
-        <!--img class="navbar-brand" src="../../static/logo.png"-->
-        <a class="navbar-brand" href="{{ url_for('main.index') }}">Inventory</a>
-      </div>
-      <div class="navbar-collapse collapse">
-        <ul class="nav navbar-nav">
+  <div class="navbar fixed-top navbar-expand-lg navbar-light bg-light" role="navigation">
+      <a class="navbar-brand" href="{{ url_for('main.index') }}">Inventory</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse"
+              data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+              aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="navbar-nav mr-auto">
           {% set path = request.path %}
-          {{ nav_li(path in ("/", "/index", "/index/")) }}<a href="{{ url_for('main.index') }}">Index</a></li>
-	  {{ nav_li(path == "/qrcodes") }}<a href="{{ url_for('main.qrcodes') }}">QR Codes</a></li>
+          {{ nav_a(path in ("/", "/index", "/index/")) }} href="{{ url_for('main.index') }}">Index</a>
+	        {{ nav_a(path == "/qrcodes") }} href="{{ url_for('main.qrcodes') }}">QR Codes</a>
           {% if current_user.is_authenticated and current_user.is_admin %}
-            <li><a href="{{ url_for('admin.index') }}">Admin</a></li>
+            <a class="nav-item nav-link" href="{{ url_for('admin.index') }}">Admin</a>
           {% endif %}
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
+        </div>
+        <div class="navbar-nav">
           {% if current_user.is_authenticated %}
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{current_user}} <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="{{ url_for('users.profile') }}">Profile</a></li>
-                <li><a href="{{ url_for('users.logout') }}">Logout</a></li>
-              </ul>
-            </li>
+          <div class="dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              {{current_user}}
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+              <a class="dropdown-item" href="{{ url_for('users.profile') }}">Profile</a>
+              <a class="dropdown-item" href="{{ url_for('users.logout') }}">Logout</a>
+            </div>
+          </div>
           {% endif %}
           {% block navbar_right %}{% endblock %}
-        </ul>
-      </div><!--/.nav-collapse -->
-    </div>
+        </div>
+      </div>
   </div>
 {% endblock %}
 
diff --git a/app/templates/index.html b/app/templates/index.html
index f91e195d45466109a98613573ed535b124780e2e..62cff4dad2d5b6424b8541b33e6bfaa32c8c4da2 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,11 +1,10 @@
 {%- extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
 
 {% block main %}
   <div class="jumbotron">
-    <h1>Welcome to the ICS Inventory!</h1>
+    <h1 class="display-4">Welcome to the ICS Inventory!</h1>
   </div>
-  <table id="items_table" class="table table-bordered table-condensed">
+  <table id="items_table" class="table table-bordered table-hover table-sm">
     <thead>
       <tr>
         <th>Id</th>
diff --git a/app/templates/qrcodes.html b/app/templates/qrcodes.html
index de29285b9629929defa970f05d155e9701d640c4..be7bb9f74a722429cd3f2761f68574a7f028868b 100644
--- a/app/templates/qrcodes.html
+++ b/app/templates/qrcodes.html
@@ -1,5 +1,4 @@
 {%- extends "base.html" %}
-{% import "bootstrap/wtf.html" as wtf %}
 
 {% block title %}QR Codes{% endblock %}
 
@@ -7,12 +6,14 @@
   {% for name, images in codes.items() %}
   <div class="row">
     <h2>{{ name }} codes</h2>
+  </div>
+  <div class="row">
     {% for image in images %}
     <div class="col-md-3">
-      <div class="thumbnail">
-        <img src="data:image/png;base64,{{ image.data }}"/>
-        <div class="caption">
-          <h3>{{ image.name }}</h3>
+      <div class="card">
+        <img class="card-img-top" src="data:image/png;base64,{{ image.data }}">
+        <div class="card-body">
+          <h4 class="card-title">{{ image.name }}</h4>
         </div>
       </div>
     </div>