diff --git a/library/static/css/feather.css b/library/static/css/feather.css
new file mode 100644
index 0000000..8224b6b
--- /dev/null
+++ b/library/static/css/feather.css
@@ -0,0 +1,9 @@
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
diff --git a/library/static/css/style.css b/library/static/css/style.css
index a5b6d78..aa63b84 100644
--- a/library/static/css/style.css
+++ b/library/static/css/style.css
@@ -13,15 +13,6 @@ body:after {
   text-align: center;
 }
 
-#cloud {
-  overflow: hidden;
-  width: 1px; height: 1px;
-  transform: translate(-100%, -100%);
-  border-radius: 50%;
-	z-index: -1;
-	position: fixed;
-}
-
 
 @font-face {
 	font-family: "libreBaskerville";
@@ -33,7 +24,7 @@ body:after {
   position: relative;
   color: #FFFFFF;
   text-shadow: 2px 2px #004225;
-  font-size: 52px;
+  font-size: 3em;
   text-align: center;
   font-family: libreBaskerville;
   mix-blend-mode: difference;
@@ -164,11 +155,23 @@ td {
 .error{
   color: #ff1111;
 }
+
 a:link { text-decoration: none; }
 a:visited { text-decoration: none; }
 a:hover { text-decoration: none; }
 a:active { text-decoration: none; }
 
+div#auth_buttons{
+  position: fixed;
+  top: 0.7em;
+  right: 0.7em;
+  display:flex;
+  gap: 1em;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {
   #library {
     text-align: left;
@@ -179,12 +182,3 @@ a:active { text-decoration: none; }
     margin: 3em 1em 1em 1em;
   }
 }
-div#auth_buttons{
-  position: fixed;
-  top: 0.5em;
-  right: 0.5em;
-  display:flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/library/static/icons/users-feather-sprite.svg b/library/static/icons/users-feather-sprite.svg
new file mode 100644
index 0000000..77c1757
--- /dev/null
+++ b/library/static/icons/users-feather-sprite.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"><defs>
+<symbol id="log-in">
+  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+  <polyline points="10 17 15 12 10 7"></polyline>
+  <line x1="15" y1="12" x2="3" y2="12"></line>
+</symbol>
+<symbol id="log-out">
+  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+  <polyline points="16 17 21 12 16 7"></polyline>
+  <line x1="21" y1="12" x2="9" y2="12"></line>
+</symbol>
+<symbol id="user-plus">
+  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+  <circle cx="8.5" cy="7" r="4"></circle>
+  <line x1="20" y1="8" x2="20" y2="14"></line>
+  <line x1="23" y1="11" x2="17" y2="11"></line>
+</symbol>
+</defs></svg>
diff --git a/library/templates/base.html b/library/templates/base.html
index e45d3d4..ede3d56 100644
--- a/library/templates/base.html
+++ b/library/templates/base.html
@@ -8,6 +8,7 @@
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dropdown.css')}}">
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bookmark.css')}}">
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/upload.css')}}">
+	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/feather.css')}}">
 	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
 	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png')}}">
 	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png')}}">
@@ -15,7 +16,6 @@
 	<link rel="manifest" href="{{ url_for('static', filename='icons/site.webmanifest')}}">
 </head>
 <body>
-	<div id="cloud"></div>
 	<a href="/"><h1 id="library">{{title}}</h1></a>
 	{% block main %}
 	{% endblock main %}
diff --git a/library/templates/index.html b/library/templates/index.html
index db76139..42f41dc 100644
--- a/library/templates/index.html
+++ b/library/templates/index.html
@@ -8,18 +8,27 @@
 	{% if not current_user.is_authenticated %}
 	<div class="signin">
 		<a href="/login">
-			<input type="button" name="button" value="Sign in"></input>
+			<svg class="feather">
+				<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg')+ '#log-in'}}" />
+			</svg>
+			Sign in
 		</a>
 	</div>
 	<div class="signin">
 		<a href="/register">
-			<input type="button" name="button" value="Register"></input>
+			<svg class="feather">
+				<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#user-plus'}}" />
+			</svg>
+			Register
 		</a>
 	</div>
 	{% else %}
 	<div class="logout">
 		<a href="/logout">
-			<input type="button" name="button" value="Logout"></input>
+			<svg class="feather">
+				<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#log-out'}}" />
+			</svg>
+			Sign out
 		</a>
 	</div>
 	{% endif %}
@@ -27,7 +36,6 @@
 <div id="bookshelf">
 {% for id, pubinfo in publications.items() %}
 	<div id="{{ id }}" class='book filter {{ pubinfo["Type"] }} {{ pubinfo["Year"] }} {{ pubinfo["License"] }}'>
-		<a href='{{ id }}'>
 		<table>
 			<tbody>
 				{%if pubinfo["Image"]%}
@@ -43,11 +51,10 @@
 		    </tr>
 				<tr>
 					<td class="title">Title:</td>
-					<td>{{ pubinfo["Title"] }}</td>
+					<td><a href='{{ id }}'>{{ pubinfo["Title"] }}</a></td>
 				</tr>
 			</tbody>
 		</table>
-		</a>
 	</div>
 {% endfor%}
 </div>
