diff --git a/zerobin/static/css/style.css b/zerobin/static/css/style.css
index 83773ad..35d7946 100644
--- a/zerobin/static/css/style.css
+++ b/zerobin/static/css/style.css
@@ -244,14 +244,6 @@ pre {
   overflow: visible;
 }
 
-.reader-wrapper {
-  color: #f2f2f2;
-  max-width: 800px;
-  width: 90%;
-  text-align: justify;
-  margin: auto;
-  margin-top: 20px;
-}
 
 /* Common css */
 
@@ -490,7 +482,7 @@ nav ul li a:hover {
 }
 
 /* Responsive */
-@media screen and (max-width: 840px) {
+@media screen and (max-width: 1060px) {
   .topnav a:not(:first-child) {
     display: none;
   }
@@ -512,10 +504,60 @@ nav ul li a:hover {
     font-size: 70%;
   }
 
+  .reader-tools {
+    bottom: 30px;
+  }
+
 }
 
+@media screen and (max-width: 660px) {
+  .submenu {
+    display: none;
+  }
+}
+
+
 /* reader mode */
 
 #readable-paste-content {
-  white-space: pre;
+  color: #f2f2f2;
+  max-width: 800px;
+  width: 90%;
+  text-align: justify;
+  margin: auto;
+  margin-top: 20px;
+  white-space: pre-wrap;
+  overflow: visible;
+}
+
+.reader-mode-bg {
+  background-color: #333;
+}
+
+.reader-book svg {
+  font-size: 26px;
+}
+
+.reader-tools {
+  color: #eee;
+}
+
+.reader-tools.min a{
+  font-size: 14px;
+}
+
+.reader-tools.max a{
+  font-size: 18px;
+}
+
+/* Admin */
+
+.login-form {
+  width: 80%;
+  max-width: 500px;
+  margin: auto;
+}
+
+#password-field {
+  width: 80%;
 }
diff --git a/zerobin/views/admin.tpl b/zerobin/views/admin.tpl
index 03c3656..b74c501 100644
--- a/zerobin/views/admin.tpl
+++ b/zerobin/views/admin.tpl
@@ -1,9 +1,10 @@
 <form action="." method="post">
-    %if status == "error":
+    <!-- %if status == "error": -->
     <div class="alert alert-danger" role="alert alert-danger">
         {{message}}
+        dededede
     </div>
-    %end
+    <!-- %end -->
     %if status == "ok" and message:
     <div class="alert alert-success" role="alert">
         {{message}}
@@ -15,7 +16,6 @@
             <input name="paste" type="text" class="form-control" placeholder="Paste URL or ID">
         </div>
         <button type="submit" class="btn btn-black">Delete</button>
-
     </div>
 
 </form>
diff --git a/zerobin/views/base.tpl b/zerobin/views/base.tpl
index 69894cb..d65e783 100644
--- a/zerobin/views/base.tpl
+++ b/zerobin/views/base.tpl
@@ -23,9 +23,9 @@
 
 </head>
 
-<body>
+<body >
 
-  <div id="app">
+  <div id="app" :class="{ 'reader-mode-bg': readerMode}">
 
     <div :class="{'topnav': true, 'reader-mode': readerMode}" @mouseleave="openPreviousPastesMenu =false">
       <a class="brand" href="/"><span>ø</span>bin<em>.net</em></a>
@@ -35,13 +35,27 @@
 
       <nav>
         <ul>
+          <li class="reader-tools min" v-if="readerMode">
+            <a href="#" @click.prevent="decreaseFontSize()">
+              <svg height="30" width="30">
+                <text x="10" y="20" fill="#eee">A</text>
+              </svg>
+            </a>
+          </li>
+          <li class="reader-tools max" v-if="readerMode">
+            <a href="#" @click.prevent="increaseFontSize()">
+              <svg height="30" width="30">
+                <text x="10" y="20" fill="#eee">A</text>
+              </svg>
+            </a>
+          </li>
           <li>
-            <a href="#" v-if="currentPaste.type === 'text'" @click.prevent="toggleReaderMode()">📖</a>
-            <span v-if="readerMode">
-              <a href="#" @click.prevent="increaseFontSize()">+</a>
-              <a href="#" @click.prevent="decreaseFontSize()">-</a>
-              🔍
-            </span>
+            <a class="reader-book" href="#" v-if="currentPaste.type === 'text'" @click.prevent="toggleReaderMode()">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M3.214 1.072C4.813.752 6.916.71 8.354 2.146A.5.5 0 0 1 8.5 2.5v11a.5.5 0 0 1-.854.354c-.843-.844-2.115-1.059-3.47-.92-1.344.14-2.66.617-3.452 1.013A.5.5 0 0 1 0 13.5v-11a.5.5 0 0 1 .276-.447L.5 2.5l-.224-.447.002-.001.004-.002.013-.006a5.017 5.017 0 0 1 .22-.103 12.958 12.958 0 0 1 2.7-.869zM1 2.82v9.908c.846-.343 1.944-.672 3.074-.788 1.143-.118 2.387-.023 3.426.56V2.718c-1.063-.929-2.631-.956-4.09-.664A11.958 11.958 0 0 0 1 2.82z"/>
+                <path fill-rule="evenodd" d="M12.786 1.072C11.188.752 9.084.71 7.646 2.146A.5.5 0 0 0 7.5 2.5v11a.5.5 0 0 0 .854.354c.843-.844 2.115-1.059 3.47-.92 1.344.14 2.66.617 3.452 1.013A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.276-.447L15.5 2.5l.224-.447-.002-.001-.004-.002-.013-.006-.047-.023a12.582 12.582 0 0 0-.799-.34 12.96 12.96 0 0 0-2.073-.609zM15 2.82v9.908c-.846-.343-1.944-.672-3.074-.788-1.143-.118-2.387-.023-3.426.56V2.718c1.063-.929 2.631-.956 4.09-.664A11.956 11.956 0 0 1 15 2.82z"/>
+              </svg>
+            </a>
           </li>
           <li class="submenu"><a href="#" @click.prevent="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
               pastes v</a>
@@ -65,7 +79,7 @@
       <p>Please enable JavaScript for this website or use a JavaScript-capable web browser.</p>
     </noscript>
 
-    <div class="container-md reader-mode" id="wrap-content">
+    <div class="container-md" id="wrap-content">
 
       %if defined('paste') and paste.title:
       <h1>{{ paste.title }}</h1>
diff --git a/zerobin/views/login.tpl b/zerobin/views/login.tpl
index dfedc3f..0424a01 100644
--- a/zerobin/views/login.tpl
+++ b/zerobin/views/login.tpl
@@ -1,18 +1,20 @@
-<form action="." method="post">
-    <div class="login-form">
-        <form>
-            <label>Password</label>
-            %if status == "error":
-            <div class="alert alert-danger" role="alert alert-danger">
-                {{message}}
-            </div>
-            %end
-            <input type="password" class="form-control" placeholder="Password" name="password">
-            <button type="submit" class="btn btn-black">Login</button>
-        </form>
-    </div>
-
+<form class="form-group" action="." method="post">
+	<div class="login-form">
+		<form>
+			<label>Password:</label>
+			%if status == "error":
+			<div class="alert alert-danger" role="alert alert-danger">
+					{{message}}
+			</div>
+      %end
+      <div class="input-group">
+        <input type="password" id="password-field" placeholder="Enter your admin password here" name="password">
+        <div class="input-group-append">
+          <button type="submit" class="btn btn-secondary">Login</button>
+        </div>
+      </div>
+		</form>
+	</div>
 </form>
 
-
 % rebase('base', settings=settings, pastes_count=pastes_count)
diff --git a/zerobin/views/paste.tpl b/zerobin/views/paste.tpl
index df0029e..ed45106 100644
--- a/zerobin/views/paste.tpl
+++ b/zerobin/views/paste.tpl
@@ -58,8 +58,10 @@
         </code>
     </pre>
 
-    <div id="readable-paste-content" v-if="readerMode">
-      {% currentPaste.content %}
+    <div>
+      <div id="readable-paste-content" v-if="readerMode">
+        {% currentPaste.content %}
+      </div>
     </div>
 
     <div class="d-flex justify-content-between down">
