diff --git a/css/custom.css b/css/custom.css
index 6d9fe20..b9a045b 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -22,3 +22,8 @@ a {
 body {
 	background: url(/img/bright_squares.png) repeat 0 0;
 }
+iframe {
+	width: 100%;
+	height: 1080px;
+	border: none;
+}
diff --git a/templates/login.html b/templates/login.html
index 7568bd7..b75293f 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,22 +1,16 @@
 {{template "header.html" .S}}
 
 <script>
-$(document).ready(function () {
-	$("#passCheck").keyup(checkPasswordMatch);
-});
-
 function checkPasswordMatch() {
-	var password = $("#pass").val();
-	var confirmPassword = $("#confirmPass").val();
+	var password = document.forms["createAccount"]["pass"].value;
+	var confirmPassword =  document.forms["createAccount"]["confirmPass"].value;
 
 	if (password != confirmPassword) {
-		$("#passCheck").removeClass("success");
-		$("#passCheck").addClass("error");
-		$("#passCheckHelp").html("Passwords don't match!");
+		document.getElementById("confirmPass").classList.remove("is-valid");
+		document.getElementById("confirmPass").classList.add("is-invalid");
 	} else {
-		$("#passCheck").removeClass("error");
-		$("#passCheck").addClass("success");
-		$("#passCheckHelp").html("");
+		document.getElementById("confirmPass").classList.remove("is-invalid");
+		document.getElementById("confirmPass").classList.add("is-valid");
 	}
 }
 </script>
@@ -54,7 +48,7 @@ function checkPasswordMatch() {
 </div>
 <div class="col-sm-4">
   <h3>Create an Account</h3>
-  <form id="login" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
+  <form id="createAccount" method="POST" action="/create_user/" enctype="application/x-www-form-urlencoded">
     <div class="input-group mb-3">
       <span class="input-group-text" id="user">
     	<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
@@ -69,7 +63,7 @@ function checkPasswordMatch() {
     	  <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
     	</svg>
       </span>
-      <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass">
+      <input type="password" class="form-control" placeholder="Password" name="pass" aria-label="Password" aria-describedby="pass" id="pass" onchange="checkPasswordMatch()">
     </div>
     <div class="input-group mb-3">
       <span class="input-group-text" id="pass">
@@ -77,7 +71,8 @@ function checkPasswordMatch() {
     	  <use xlink:href="/img/bootstrap-icons.svg#key-fill"/>
     	</svg>
       </span>
-      <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass">
+      <input type="password" class="form-control" placeholder="Confirm password" name="confirmPass" aria-label="Password" aria-describedby="confirmPass" id="confirmPass" onchange="checkPasswordMatch()">
+      <div class="invalid-feedback">Passwords don't match!</div>
     </div>
     <input class="btn btn-primary" type="submit" name="submit" value="Create" />
   </form>
diff --git a/templates/read.html b/templates/read.html
index d2eaf62..ae6a5b6 100644
--- a/templates/read.html
+++ b/templates/read.html
@@ -34,13 +34,6 @@
   {{end}}
 
   <div class="col">
-    <script type="text/javascript">
-    function resizeIframe() {
-    	var contentHeight = $("#bookContent").contents().find("html").height();
-    	$("#bookContent").height(ContentHeight);
-    }
-    </script>
-    
     {{if not .Book.Active}}
       <div class="text-center">
     	<p class="badge bg-warning">waiting for moderation</p>
@@ -60,7 +53,7 @@
       </ul>
     </nav>
     
-    <iframe id="bookContent" onload="resizeIframe();" style="width: 100%; height: 1080px; border: 0;" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
+    <iframe id="bookContent" scrolling="auto" src="{{.Content}}" seamless="seamless" sandbox="allow-same-origin" frameborder=0></iframe>
     
     <nav class="d-flex justify-content-center" arial-label="Book navigation">
       <ul class="pagination">
@@ -80,5 +73,11 @@
 </div>
 
 
+<script>
+var bookContent = document.getElementById("bookContent");
+bookContent.onload = function() {
+	bookContent.style.height = bookContent.contentWindow.document.body.scrollHeight + "px";
+}
+</script>
 
 {{template "footer.html" .S}}