diff --git a/tiny0/forms.py b/tiny0/forms.py
index 9bbfe7f..2714c7b 100644
--- a/tiny0/forms.py
+++ b/tiny0/forms.py
@@ -48,7 +48,7 @@ def validate_token(form, field):
 		return
 
 	# If the token is the same as a pages route
-	if field.data == "donate" or field.data == "tracker" or field.data == "lookup":
+	if field.data == "tracker" or field.data == "lookup" or field.data == "report" or field.data == "donate":
 		# Raise a ValidationError
 		raise ValidationError("Token already exists")
 
diff --git a/tiny0/static/favicon.ico b/tiny0/static/favicon.ico
index 0a5393b..4060eb2 100644
Binary files a/tiny0/static/favicon.ico and b/tiny0/static/favicon.ico differ
diff --git a/tiny0/static/style.css b/tiny0/static/style.css
index 457e7df..e278184 100644
--- a/tiny0/static/style.css
+++ b/tiny0/static/style.css
@@ -1,237 +1,280 @@
 * {
-    margin: 0;
-    padding: 0;
-    font-family: 'Roboto Mono', monospace;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Robot Mono', monospace;
+}
+
+nav {
+  background: #0c2431;
+  padding: 5px 40px;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+nav ul li {
+  padding: 15px 0;
+  cursor: pointer;
+}
+
+nav ul li.items {
+  position: relative;
+  width: auto;
+  margin: 0 16px;
+  text-align: center;
+  order: 3;
+  font-weight: bold;
+}
+
+nav ul li.items:after {
+  position: absolute;
+  content: '';
+  left: 0;
+  bottom: 5px;
+  height: 2px;
+  width: 100%;
+  background: #f68741;
+  opacity: 0;
+  transition: all 0.2s linear;
+}
+
+nav ul li.items:hover:after {
+  opacity: 1;
+  bottom: 8px;
+}
+
+nav ul li.logo {
+  flex: 1;
+  color: white;
+  font-size: 23px;
+  font-weight: 600;
+  cursor: default;
+  user-select: none;
+}
+
+nav ul li a {
+  color: white;
+  font-size: 18px;
+  text-decoration: none;
+  transition: .4s;
+}
+
+nav ul li:hover a {
+  color: #f68741;
+}
+
+nav ul li i {
+  font-size: 23px;
+}
+
+nav ul li.btn {
+  display: none;
+}
+
+nav ul li.btn.hide i:before {
+  content: '\f00d';
+}
+
+@media all and (max-width: 900px) {
+  nav {
+    padding: 5px 30px;
+  }
+  nav ul li.items {
+    width: 100%;
+    display: none;
+  }
+  nav ul li.items.show {
+    display: block;
+  }
+  nav ul li.btn {
+    display: block;
+  }
+  nav ul li.items:hover {
+    border-radius: 5px;
+    box-shadow: 0px 5px 5px #f68741, 0px -5px 5px #f68741;
+  }
+  nav ul li.items:hover:after {
+    opacity: 0;
+  }
 }
 
 body {
-    background: #121212;
-
-}
-
-.headers {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 3vh;
-    text-align: center;
-}
-
-.title:link {
-    color: #bb86fc;
-    text-decoration: none;
-    font-size: 50px;
-    font-weight: bold;
-}
-
-.title:visited {
-    color: #bb86fc;
-}
-
-.title:hover {
-    color: #7b59a5;
-}
-
-.desc {
-    font-size: 25px;
-    font-weight: bold;
-    color: #ffffff;
+  background: #0c2431;
 }
 
 .url-form {
-    position: relative;
-    z-index: 100;
-    background-color: #2c2c2c;
-    border-radius: 8px;
-    padding: 30px;
-    box-shadow: 0px 10px 20px #000000;
-    margin: 35vh 10vw 0 10vw;
+  max-width: 700px;
+  text-align: center;
+  margin: 220px auto 0 auto;
 }
 
-.input-list {
-    width: 100%;
-    list-style: none;
-    text-align: center;
+.url-form h1 {
+  color: #ffffff;
+  text-align: center;
+  margin-bottom: 30px;
 }
 
-.url {
-    width: 80%;
-    padding: 10px;
-    background: #121212;
-    border: 2px solid #bb86fc;
-    color: #ffffff;
-    margin-bottom: 2vh;
+.feedback-input {
+  color: white;
+  font-weight: 500;
+  font-size: 18px;
+  border-radius: 5px;
+  line-height: 22px;
+  background-color: transparent;
+  border: 2px solid #fc913a;
+  transition: all 0.3s;
+  padding: 13px;
+  margin-bottom: 15px;
+  width: 100%;
+  box-sizing: border-box;
+  outline: 0;
 }
 
-.url:focus {
-    border-color: #7b59a5;
-}
-
-.token {
-    width: 80%;
-    padding: 10px;
-    background: #121212;
-    border: 2px solid #bb86fc;
-    color: #ffffff;
-    margin-bottom: 2vh;
-}
-
-.token:focus {
-    border-color: #7b59a5;
+.feedback-input:focus {
+  border: 2px solid #c95c03;
 }
 
 .button {
-    width: 100px;
-    background: #bb86fc;
-    border: 2px solid #bb86fc;
-    border-radius: 3px;
-    padding: 10px;
-    color: #000000;
-    font-weight: bold;
+  width: 100%;
+  background: #fc913a;
+  border-radius: 5px;
+  border: 0;
+  cursor: pointer;
+  color: white;
+  font-size: 24px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  transition: all 0.3s;
+  margin-top: -4px;
+  font-weight: 700;
 }
 
 .button:hover {
-    background: #7b59a5;
-    border-color: #7b59a5;
+  background: #e26803;
 }
 
-.form-error-message {
-    color: #ffffff;
-    list-style: none;
-    text-align: center;
-    margin: -1vh 0 2vh 0;
+@media all and (max-width: 800px) {
+  .url-form {
+    max-width: 420px;
+  }
 }
 
-.token-explanation {
-    color: #ffffff;
-    font-size: 13px;
-    list-style: none;
-    text-align: center;
-    margin-bottom: 2vh;
+.tooltip {
+  color: #ffffff;
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+  margin-bottom: 15px;
 }
 
-.click-tracker {
-    text-align: center;
-    margin-top: 5vh;
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 400px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 10px;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -200px;
 }
 
-.click-tracker a:link {
-    color: #bb86fc;
-    text-decoration: none;
-    font-size: 25px;
-    font-weight: bold;
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
 }
 
-.click-tracker a:visited {
-    color: #bb86fc;
+.tooltip:hover .tooltiptext {
+  visibility: visible;
 }
 
-.click-tracker a:hover {
-    color: #7b59a5;
+.form-errors {
+  color: #ffffff;
+  text-align: center;
+  margin-top: 15px;
 }
 
-.clicks-list {
-    text-align: center;
-    margin: 30vh 0 0 0;
+.form-errors h4 {
+  margin-bottom: 5px;
 }
 
-.clicks-number {
-    color: #bb86fc;
-    font-size: 125px;
-    font-weight: bold;
+.clicks {
+  color: #f68741;
+  text-align: center;
+  margin-top: 230px;
 }
 
-.clicks-text {
-    color: #bb86fc;
-    font-size: 25px;
-    font-weight: bold;
+.clicks h1 {
+  font-size: 125px;
 }
 
-.error-message {
-    text-align: center;
-    color: #ffffff;
-    font-size: 50px;
-    font-weight: bold;
-    margin: 35vh auto 0 auto;
+.clicks h2 {
+  font-size: 25px;
 }
 
 .donation {
-    color: #ffffff;
-    list-style: none;
-    text-align: center;
-    margin: 30vh auto 0 auto;
+  color: #ffffff;
+  text-align: center;
+  margin-top: 200px;
 }
 
-.donation-title {
-    font-size: 40px;
-    font-weight: bold;
-    margin-bottom: 2vh;
+.donation h1 {
+  font-size: 50px;
+  margin-bottom: 30px;
 }
 
-.donation-patreon {
-    font-size: 30px;
-    font-weight: bold;
-    margin-bottom: 5vh;
+.donation h2 {
+  font-size: 30px;
+  margin-bottom: 60px;
 }
 
-.donation-bitcoin {
-    font-size: 16px;
-    font-weight: bold;
+.donation h2 a:link {
+  color: #f68741;
+  text-decoration: none;
 }
 
-.donation a:link {
-    color: #bb86fc;
-    text-decoration: none;
+.donation h2 a:visited {
+  color: #f68741;
 }
 
-.donation a:visited {
-    color: #bb86fc;
+.donation h2 a:hover {
+  color: #e26803;
 }
 
-.donation a:hover {
-    color: #7b59a5;
+.error {
+  color: #ffffff;
+  text-align: center;
+  margin-top: 250px;
 }
 
-.page-container {
-    position: relative;
-    min-height: 100vh;
+.error h1 {
+  font-size: 100px;
 }
 
-.content-wrap {
-    padding-bottom: 2.5rem;
+.error h2 {
+  font-size: 50px;
 }
 
 footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 2.5rem;
-    margin-bottom: 5vh;
-}
-
-.footer-list {
-    list-style: none;
-    text-align: center;
-}
-
-.footer-list li {
-    color: #ffffff;
-    display: inline;
-}
-
-.footer-list a:link {
-    color: #bb86fc;
-    text-decoration: none;
-}
-
-.footer-list a:visited {
-    color: #bb86fc;
-}
-
-.footer-list a:hover {
-    color: #7b59a5;
-}
-
-.copyright {
-    font-family: serif;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 2.5rem;
+  color: #ffffff;
+  text-align: center;
 }
diff --git a/tiny0/templates/clicks.html b/tiny0/templates/clicks.html
index 6cda8a2..bf5836c 100644
--- a/tiny0/templates/clicks.html
+++ b/tiny0/templates/clicks.html
@@ -1,11 +1,8 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<ul class="clicks-list">
-		<li><p class="clicks-number">{{ clicks }}</p></li>
-		<li><p class="clicks-text">Click(s)</p></li>
-	</ul>
-	<div class="click-tracker">
-		<a href="{{ url_for('tracker') }}">Track Another</a>
-	</div>
+<div class="clicks">
+	<h1>{{ clicks }}</h1>
+	<h2>Click(s)</h2>
+</div>
 {% endblock %}
diff --git a/tiny0/templates/donate.html b/tiny0/templates/donate.html
index a12fa2f..7d6f396 100644
--- a/tiny0/templates/donate.html
+++ b/tiny0/templates/donate.html
@@ -1,10 +1,10 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<ul class="donation">
-		<li><p class="donation-title">Patreon</p></li>
-		<li><a href="https://www.patreon.com/xemeds" target="_blank"><p class="donation-patreon">patreon.com/xemeds</p></a></li>
-		<li><p class="donation-title">Bitcoin</p></li>
-		<li><p class="donation-bitcoin">1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</p></li>
-	</ul>
+<div class="donation">
+	<h1>Patreon</h1>
+	<h2><a href="https://www.patreon.com/xemeds" target="_blank">patreon.com/xemeds</a></h2>
+	<h1>Bitcoin</h1>
+	<p>1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</p>
+</div>
 {% endblock %}
diff --git a/tiny0/templates/error.html b/tiny0/templates/error.html
index 5046227..e298955 100644
--- a/tiny0/templates/error.html
+++ b/tiny0/templates/error.html
@@ -1,8 +1,8 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<ul class="error-message">
-		<li><p>{{ error_code }}</p></li>
-		<li><p>{{ error_message }}</p></li>
-	</ul>
+<div class="error">
+	<h1>{{ error_code }}</h1>
+	<h2>{{ error_message }}</h2>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/tiny0/templates/index.html b/tiny0/templates/index.html
index cae8ce7..43b7802 100644
--- a/tiny0/templates/index.html
+++ b/tiny0/templates/index.html
@@ -1,30 +1,25 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<form method="POST" action="" class="url-form">
-		{% if form.errors %}
-			<ul class="form-error-message">
-				{% for error in form.url.errors %}
-					<li>{{ error }}</li>
-				{% endfor %}
-				{% for error in form.token.errors %}
-					<li>{{ error }}</li>
-				{% endfor %}
-			</ul>
-		{% endif %}
-		{{ form.hidden_tag() }}
-		<ul class='input-list'>
-			<li>{{ form.url(placeholder="Enter the URL here", autofocus=true, class="url") }}</li>
-			<li>{{ form.token(placeholder="Enter the token (optional)", autofocus=true, class="token") }}</li>
-			<ul class="token-explanation">
-				<li>tiny0.cc/token</li>
-				<li>Token must be between 6 and 16 characters long</li>
-				<li>It can only contain letters, numbers, underscores(_) and dashes(-)</li>
-			</ul>
-			<li>{{ form.submit(class="button") }}</li>
-		</ul>
-	</form>
-	<div class="click-tracker">
-		<a href="{{ url_for('tracker') }}">Click Tracker</a>
+<form method="POST" action="" class="url-form">
+	<h1>&#60 URL Shortener &#62</h1>
+	{{ form.hidden_tag() }}
+	{{ form.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }} 
+	{{ form.token(placeholder="Enter the token (optional)", autofocus=true, class="feedback-input") }}
+	<div class="tooltip">
+		What's a token?
+	  <span class="tooltiptext"><p>tiny0.cc/token</p><p>Token must be between 6 and 16 characters long</p><p>It can only contain letters, numbers, underscores(_) and dashes(-)</p></span>
 	</div>
+	{{ form.submit(class="button") }}
+	{% if form.errors %}
+		<div class="form-errors">
+			{% for error in form.url.errors %}
+				<h4>{{ error }}</h4>
+			{% endfor %}
+			{% for error in form.token.errors %}
+				<h4>{{ error }}</h4>
+			{% endfor %}
+		</div>
+	{% endif %}
+</form>
 {% endblock %}
diff --git a/tiny0/templates/layout.html b/tiny0/templates/layout.html
index f3c4bc1..8400c83 100644
--- a/tiny0/templates/layout.html
+++ b/tiny0/templates/layout.html
@@ -7,87 +7,39 @@
 		<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
 		<link href="{{ url_for('static', filename='font.css') }}" rel="stylesheet">
 		<link href="/static/style.css" rel="stylesheet" type="text/css"/>
-		
+
+		<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
+		<script src="https://kit.fontawesome.com/a076d05399.js"></script>
+
 		<title>tiny0 - Custom URL Shortener</title>
 	</head>
+	<body>
+		<nav>
+			<ul>
+				<li class="logo">tiny0 - URL Shortener</li>
+				<li class="items"><a href="{{ url_for('index') }}">Shortener</a></li>
+				<li class="items"><a href="{{ url_for('tracker') }}">Tracker</a></li>
+				<li class="items"><a href="#">Lookup</a></li>
+				<li class="items"><a href="#">Report</a></li>
+				<li class="items"><a href="{{ url_for('donate') }}">Donate</a></li>
+				<li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
+			</ul>
+		</nav>
 
-	<div id="page-container">
-		<div id="content-wrap">
-			{% if form %}
-				{% if not form.errors %}
-				<body onload="typeTitle()">
-					<div class="headers">
-						<a class="title" id="title" href="{{ url_for('index') }}"></a>
-						<p id="desc" class="desc"></p>
-					</div>
-				{% else %}
-				<body>
-					<div class="headers">
-						<a class="title" href="{{ url_for('index') }}">tiny0</a>
-						<h1 class="desc">Custom URL Shortener</h1>
-					</div>
-				{% endif %}
-			{% else %}
-			<body>
-				<div class="headers">
-					<a class="title" href="{{ url_for('index') }}">tiny0</a>
-					<h1 class="desc">Custom URL Shortener</h1>
-				</div>
-			{% endif %}
+		{% block body %}{% endblock %}
 
-			{% block body %}{% endblock %}
-
-			{% if form %}
-				{% if not form.errors %}
-				<script>
-					var i = 0;
-					var title_text = "tiny0";
-					var desc_text = "Custom URL Shortener";
-					var speed = 120;
-
-					function typeTitle() {
-						if (i < title_text.length) {
-							document.getElementById("title").innerHTML += title_text.charAt(i);
-							i++;
-							setTimeout(typeTitle, speed);
-						}
-						else {
-							i = 0;
-							setTimeout(typeDesc, 200)
-						}
-					}
-
-					function typeDesc() {
-						if (i < desc_text.length) {
-							document.getElementById("desc").innerHTML += desc_text.charAt(i);
-							i++;
-							setTimeout(typeDesc, speed);
-						}
-					}
-				</script>
-				{% endif %}
-			{% elif url %}
-				<script>
-					function copyURL() {
-							var url = document.getElementById("url");
-						url.select();
-						url.setSelectionRange(0, 99999)
-						document.execCommand("copy");
-					}
-				</script>
-			{% endif %}
-			</body>
-		</div>
-	</div>
+		<script>
+			$(document).ready(function(){
+				$('.btn').click(function(){
+					$('.items').toggleClass("show");
+					$('ul li').toggleClass("hide");
+				});
+			});
+			{% block script %}{% endblock %}
+		</script>
+	</body>
 
 	<footer>
-		<ul class="footer-list">
-			<li class="copyright">&#169; </li>
-			<li>2020 Muhammed Ali Dilek</li>
-			<ul>
-				<li><a href="{{ url_for('donate') }}">Donate</a></li>
-				<li><a href="https://github.com/xemeds" target="_blank">GitHub</a></li>
-			</ul>
-		</ul>
+		&#169; 2020 Muhammed Ali Dilek
 	</footer>
 </html>
diff --git a/tiny0/templates/tracker.html b/tiny0/templates/tracker.html
index 7aa75c7..b2ff637 100644
--- a/tiny0/templates/tracker.html
+++ b/tiny0/templates/tracker.html
@@ -1,18 +1,17 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<form method="POST" action="" class="url-form">
-		{% if form.errors %}
-			<ul class="form-error-message">
-				{% for error in form.url.errors %}
-					<li>{{ error }}</li>
-				{% endfor %}
-			</ul>
-		{% endif %}
-		{{ form.hidden_tag() }}
-		<ul class='input-list'>
-			<li>{{ form.url(placeholder="Enter the short URL here", autofocus=true, class="url") }}</li>
-			<li>{{ form.submit(class="button") }}</li>
-		</ul>
-	</form>
+<form method="POST" action="" class="url-form">
+	<h1>&#60 Click Tracker &#62</h1>
+	{{ form.hidden_tag() }}
+	{{ form.url(placeholder="Enter the short URL here", autofocus=true, class="feedback-input") }}
+	{{ form.submit(class="button") }}
+	{% if form.errors %}
+		<div class="form-errors">
+			{% for error in form.url.errors %}
+				<h4>{{ error }}</h4>
+			{% endfor %}
+		</div>
+	{% endif %}
+</form>
 {% endblock %}
diff --git a/tiny0/templates/url.html b/tiny0/templates/url.html
index 2a07533..4d26770 100644
--- a/tiny0/templates/url.html
+++ b/tiny0/templates/url.html
@@ -1,13 +1,18 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<div class="url-form">
-		<ul class='input-list'>
-			<li><input type="text" value="{{ url }}" id="url" class="url" readonly></li>
-			<li><button onclick="copyURL()" class="button">Copy</button></li>
-		</ul>
-	</div>
-	<div class="click-tracker">
-		<a href="{{ url_for('tracker') }}">Click Tracker</a>
-	</div>
+<div class="url-form">
+	<h1>&#60 Short URL &#62</h1>
+	<input type="text" value="{{ url }}" id="url" class="feedback-input" readonly>
+	<button onclick="copyURL()" class="button">Copy</button>
+</div>
+{% endblock %}
+
+{% block script %}
+function copyURL() {
+	var url = document.getElementById("url");
+	url.select();
+	url.setSelectionRange(0, 99999)
+	document.execCommand("copy");
+}
 {% endblock %}