diff --git a/CalibreWebCompanion/db.sqlite3 b/CalibreWebCompanion/db.sqlite3
index aba3f01..a3e166e 100644
Binary files a/CalibreWebCompanion/db.sqlite3 and b/CalibreWebCompanion/db.sqlite3 differ
diff --git a/CalibreWebCompanion/library/templates/base.html b/CalibreWebCompanion/library/templates/base.html
index 6a69b5c..9a31027 100644
--- a/CalibreWebCompanion/library/templates/base.html
+++ b/CalibreWebCompanion/library/templates/base.html
@@ -3,6 +3,7 @@
 
 <head>
   {% block title %}<title>Local Library</title>{% endblock %}
+
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -13,28 +14,34 @@
   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
   <style>
-  table {
-    width:100%;
-    table-layout:fixed;
-  }
-  th {
-    text-align: center;
-  }
-  .title {
-    width: 40%;
-  }
-  .author {
-    width: 20%;
-  }
-  .rating {
-    width: 5%;
-  }
-  .tags {
-    width: 15%;
-  }
-  .added {
-    width: 20%;
-  }
+    table {
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    th {
+      text-align: center;
+    }
+
+    .title {
+      width: 40%;
+    }
+
+    .author {
+      width: 20%;
+    }
+
+    .rating {
+      width: 5%;
+    }
+
+    .tags {
+      width: 15%;
+    }
+
+    .added {
+      width: 20%;
+    }
   </style>
 </head>
 
@@ -42,10 +49,10 @@
 
   <div class="navbar-fixed">
     <nav>
-      <div class="nav-wrapper row green darken-4">
+      <div class="nav-wrapper row green darken-1">
 
         <ul class="right">
-        {% if user.is_authenticated %}
+          {% if user.is_authenticated %}
           <li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li>
           <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
         </ul>
@@ -53,9 +60,12 @@
         <ul class="left">
           <li><a href="{% url 'search' %}">Search</a></li>
           <li><a href="{% url 'books' %}">Books</a></li>
-          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-authors">Authors<i class="material-icons right">arrow_drop_down</i></a></li>
-          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-ratings">Ratings<i class="material-icons right">arrow_drop_down</i></a></li>
-          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-tags">Tags<i class="material-icons right">arrow_drop_down</i></a></li>
+          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-authors">Authors<i
+                class="material-icons right">arrow_drop_down</i></a></li>
+          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-ratings">Ratings<i
+                class="material-icons right">arrow_drop_down</i></a></li>
+          <li><a class="dropdown-trigger" href="#!" data-target="dropdown-tags">Tags<i
+                class="material-icons right">arrow_drop_down</i></a></li>
         </ul>
         <ul id="dropdown-authors" class="dropdown-content">
           {% for author in unique_authors %}
@@ -74,18 +84,44 @@
         </ul>
 
         {% else %}
-          <li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
-          <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
+        <li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
+        <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
         </ul>
         {% endif %}
       </div>
     </nav>
   </div>
   <script>
-  $(".dropdown-trigger").dropdown({hover: true, constrainWidth: false, coverTrigger: false});
+    $(".dropdown-trigger").dropdown({
+      hover: true,
+      constrainWidth: false,
+      coverTrigger: false
+    });
   </script>
 
-{% block content %} {% endblock %}
+
+  {% if user.is_authenticated %}
+  {% block content %} {% endblock %}
+  {% else %}
+  <div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
+    <div class="valign" style="width:100%;">
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m6 offset-m3">
+            <div class="card">
+              <div class="card-content center">
+                <p>You don't have permission to view this.</p> 
+              </div>
+              <div class="card-action center">
+                <a class="waves-effect waves-light btn-large green accent-4" href="{% url 'login'%}?next={{request.path}}">Login</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
 
   <script>
     function sortTable(n) {
diff --git a/CalibreWebCompanion/library/templates/ifelselogin.html b/CalibreWebCompanion/library/templates/ifelselogin.html
index 5188599..688e1eb 100644
--- a/CalibreWebCompanion/library/templates/ifelselogin.html
+++ b/CalibreWebCompanion/library/templates/ifelselogin.html
@@ -1,6 +1,22 @@
    {% if user.is_authenticated %}
    
    {% else %}
-   <h1>You don't have permission to view this.</h1>
-     <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>   
+    <div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
+      <div class="valign" style="width:100%;">
+        <div class="container">
+          <div class="row">
+            <div class="col s12 m6 offset-m3">
+              <div class="card">
+                <div class="card-content center">
+                  <p>You don't have permission to view this.</p> 
+                </div>
+                <div class="card-action center">
+                  <a class="waves-effect waves-light btn-large green accent-4" href="{% url 'login'%}?next={{request.path}}">Login</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
    {% endif %} 
\ No newline at end of file
diff --git a/CalibreWebCompanion/library/templates/library/book_detail.html b/CalibreWebCompanion/library/templates/library/book_detail.html
index 1d7d314..99750c7 100644
--- a/CalibreWebCompanion/library/templates/library/book_detail.html
+++ b/CalibreWebCompanion/library/templates/library/book_detail.html
@@ -1,47 +1,54 @@
 {% extends "base.html" %}
 
 {% block content %}
+{% load static %}
 
-<div class="row">
-  <div class="col s4"><a href="{{download}}"><img src="{{imgpath}}" alt="download" srcset=""></a></div>
-  <div class="col s8">
-  <h1> {{book.title}}</h1> 
-  <h4> by
-  {% if book.authors %}
-  {% for author in book.authors.all %}
-  <a href="{{author.get_absolute_url}}">{{author.name}}</a>
-  {%endfor%}
-  {% else %}
-  {{book.author_sort}}
-  {%endif%}
-  <br>
-  Published by 
-  {% if book.publishers %}
-  {% for pub in book.publishers.all %}
-  <a href="{{pub.get_absolute_url}}">{{pub.name}}</a>
-  {%endfor%}
-  {% else %}
-  Unknown
-  {%endif%}
-  <br>
-  Tags:   
-  {% if book.tags %}
-  {% for tag in book.tags.all %}
-  <a href="{{tag.get_absolute_url}}">{{tag.name}}</a>,
-  {%endfor%}
-  {% else %}
-  {%endif%}
-  <br>
-  Rating:   
-  {% if book.ratings %}
-  {% for rating in book.ratings.all %}
-  <a href="{{rating.get_absolute_url}}">{{rating}}</a>
-  {%endfor%}
-  {% else %}
-  {%endif%}
-  <br>
-  <a href="{{book.publisher.get_absolute_url}}">{{book.publisher}}</a>
-  </h4>
+<div class="col s12 m7">
+  <div class="card z-depth-0 horizontal">
+    <div class="card-image">
+      <a style="padding-top:15%" href="{{download}}"><img src=" {% static "" %}{{imgpath}}" alt="download" srcset=""></a>
+    </div>
+    <div class="card-stacked">
+      <div class="card-content">
+        <h1> {{book.title}}</h1> 
+        <h4> by
+        {% if book.authors %}
+        {% for author in book.authors.all %}
+        <a href="{{author.get_absolute_url}}">{{author.name}}</a>
+        {%endfor%}
+        {% else %}
+        {{book.author_sort}}
+        {%endif%}
+        <br>
+        Published by 
+        {% if book.publishers %}
+        {% for pub in book.publishers.all %}
+        <a href="{{pub.get_absolute_url}}">{{pub.name}}</a>
+        {%endfor%}
+        {% else %}
+        Unknown
+        {%endif%}
+        <br>
+        Tags:   
+        {% if book.tags %}
+        {% for tag in book.tags.all %}
+        <a href="{{tag.get_absolute_url}}">{{tag.name}}</a>,
+        {%endfor%}
+        {% else %}
+        {%endif%}
+        <br>
+        Rating:   
+        {% if book.ratings %}
+        {% for rating in book.ratings.all %}
+        <a href="{{rating.get_absolute_url}}">{{rating}}</a>
+        {%endfor%}
+        {% else %}
+        {%endif%}
+        <br>
+        <a href="{{book.publisher.get_absolute_url}}">{{book.publisher}}</a>
+        </h4>
+      </div>
+    </div>
   </div>
 </div>
 
diff --git a/CalibreWebCompanion/library/templates/registration/login.html b/CalibreWebCompanion/library/templates/registration/login.html
index 0b84699..fc06d08 100644
--- a/CalibreWebCompanion/library/templates/registration/login.html
+++ b/CalibreWebCompanion/library/templates/registration/login.html
@@ -30,7 +30,7 @@
     {% endif %}
     </div>
 
-    <input type="submit" value="login" />
+    <button class="waves-effect waves-light btn green accent-4" type="submit">login</button>
     <input type="hidden" name="next" value="{{ next }}" />
   </form>
   
diff --git a/CalibreWebCompanion/library/templates/registration/sign_up.html b/CalibreWebCompanion/library/templates/registration/sign_up.html
index d46cece..2b5b374 100644
--- a/CalibreWebCompanion/library/templates/registration/sign_up.html
+++ b/CalibreWebCompanion/library/templates/registration/sign_up.html
@@ -3,7 +3,7 @@
 {% block content %}
 
 <form method="post">
-    {% csrf_token %} {{form.as_p}} <input type="submit" value="Sign up"></form>
+    {% csrf_token %} {{form.as_p}} <button class="waves-effect waves-light btn green accent-4" type="submit">sign up</button></form>
   
 
 
diff --git a/CalibreWebCompanion/library/templates/search.html b/CalibreWebCompanion/library/templates/search.html
index fdf4d11..ba0aad0 100644
--- a/CalibreWebCompanion/library/templates/search.html
+++ b/CalibreWebCompanion/library/templates/search.html
@@ -8,7 +8,7 @@
     <input id="title" type="text" name="title" value="">
     <label for="author">Author: </label>
     <input id="author" type="text" name="author" value="">
-    <input type="submit" value="search">
+    <button class="waves-effect waves-light btn green accent-4" type="submit">search</button>
 </form>
 </div>
 
diff --git a/CalibreWebCompanion/library/templates/stripped_base.html b/CalibreWebCompanion/library/templates/stripped_base.html
index 7798114..4d1392a 100644
--- a/CalibreWebCompanion/library/templates/stripped_base.html
+++ b/CalibreWebCompanion/library/templates/stripped_base.html
@@ -18,7 +18,7 @@
 
 <div class="navbar-fixed">
   <nav>
-    <div class="nav-wrapper row green darken-4">
+    <div class="nav-wrapper row green darken-1">
 
       <ul class="right">
       {% if user.is_authenticated %}
