diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss
index ce3b6bc..50f6268 100644
--- a/bookmarks/styles/base.scss
+++ b/bookmarks/styles/base.scss
@@ -1,22 +1,29 @@
 body {
-  margin: 20px 0;
+  margin: 20px 10px;
 }
 
 header {
   margin-bottom: 40px;
 }
 
-.navbar-brand {
+.navbar {
 
-  .logo {
-    background-color: $primary-color;
-    color: $light-color;
-    padding: 14px;
+  .navbar-brand {
+
+    .logo {
+      background-color: $primary-color;
+      color: $light-color;
+      padding: 14px;
+    }
+
+    h1 {
+      text-transform: uppercase;
+      display: inline-block;
+    }
   }
 
-  h1 {
-    text-transform: uppercase;
-    display: inline-block;
+  .dropdown-toggle {
+    padding: 0;
   }
 }
 
diff --git a/bookmarks/templates/bookmarks/edit.html b/bookmarks/templates/bookmarks/edit.html
index fd15693..7d5c795 100644
--- a/bookmarks/templates/bookmarks/edit.html
+++ b/bookmarks/templates/bookmarks/edit.html
@@ -7,7 +7,7 @@
             <div class="content-area-header">
                 <h2>Edit bookmark</h2>
             </div>
-            <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6" novalidate>
+            <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6 col-md-12" novalidate>
                 {% bookmark_form form %}
             </form>
         </section>
diff --git a/bookmarks/templates/bookmarks/index.html b/bookmarks/templates/bookmarks/index.html
index 01ecf59..c24ac4b 100644
--- a/bookmarks/templates/bookmarks/index.html
+++ b/bookmarks/templates/bookmarks/index.html
@@ -6,7 +6,7 @@
     <div class="bookmarks-page columns">
 
         {# Bookmark list #}
-        <section class="content-area column col-8">
+        <section class="content-area column col-8 col-md-12">
             <div class="content-area-header">
                 <h2>Bookmarks</h2>
                 <div class="spacer"></div>
@@ -28,7 +28,7 @@
         </section>
 
         {# Tag list #}
-        <section class="content-area column col-4">
+        <section class="content-area column col-4 hide-md">
             <div class="content-area-header">
                 <h2>Tags</h2>
             </div>
diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html
index de7c99a..4a38e36 100644
--- a/bookmarks/templates/bookmarks/layout.html
+++ b/bookmarks/templates/bookmarks/layout.html
@@ -5,6 +5,10 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+    <meta name="description" content="Self-hosted bookmark service">
+    <meta name="robots" content="index,follow">
+    <meta name="author" content="Sascha Ißbrücker">
     <title>linkding</title>
     {# Include SASS styles, files are resolved from bookmarks/styles #}
     <link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css"/>
@@ -21,10 +25,36 @@
     {# Only nav items menu when logged in #}
     {% if request.user.is_authenticated %}
         <section class="navbar-section">
-            <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
-            <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
-            <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-            <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+            {# Basic menu list #}
+            <div class="hide-md">
+                <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+                <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+            </div>
+            {# Menu drop-down for smaller devices #}
+            <div class="show-md">
+                <div class="dropdown dropdown-right">
+                    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+                        <i class="icon icon-menu icon-2x"></i>
+                    </a>
+                    <!-- menu component -->
+                    <ul class="menu">
+                        <li>
+                            <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+                        </li>
+                        <li>
+                            <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </section>
     {% endif %}
 </header>
diff --git a/bookmarks/templates/bookmarks/new.html b/bookmarks/templates/bookmarks/new.html
index 5cbc9fa..1c9d08b 100644
--- a/bookmarks/templates/bookmarks/new.html
+++ b/bookmarks/templates/bookmarks/new.html
@@ -7,7 +7,7 @@
             <div class="content-area-header">
                 <h2>New bookmark</h2>
             </div>
-            <form action="{% url 'bookmarks:new' %}" method="post" class="col-6" novalidate>
+            <form action="{% url 'bookmarks:new' %}" method="post" class="col-6 col-md-12" novalidate>
                 {% bookmark_form form auto_close %}
             </form>
         </section>
diff --git a/bookmarks/templates/registration/login.html b/bookmarks/templates/registration/login.html
index 7c753ba..5ea46cd 100644
--- a/bookmarks/templates/registration/login.html
+++ b/bookmarks/templates/registration/login.html
@@ -7,7 +7,7 @@
 
     <div class="login-page">
         <div class="columns">
-            <section class="content-area column col-5 col-sm-12">
+            <section class="content-area column col-5 col-md-12">
                 <div class="content-area-header">
                     <h2>Login</h2>
                 </div>
@@ -27,7 +27,7 @@
                         {{ form.password|add_class:'form-input' }}
                     </div>
 
-                    <input type="submit" value="Login" class="btn btn-primary mt-2 col-sm-12">
+                    <input type="submit" value="Login" class="btn btn-primary mt-2 col-md-12">
                     <input type="hidden" name="next" value="{{ next }}">
                 </form>
             </section>
diff --git a/bookmarks/templates/settings/index.html b/bookmarks/templates/settings/index.html
index 6ff427c..150dbd1 100644
--- a/bookmarks/templates/settings/index.html
+++ b/bookmarks/templates/settings/index.html
@@ -13,7 +13,7 @@
             <form method="post" enctype="multipart/form-data" action="{% url 'bookmarks:settings.import' %}">
                 {% csrf_token %}
                 <div class="form-group">
-                    <div class="input-group col-8 col-sm-12">
+                    <div class="input-group col-8 col-md-12">
                         <input class="form-input" type="file" name="import_file">
                         <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
                     </div>
