diff --git a/views/index.ejs b/views/index.ejs
index e99408b..d837585 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,23 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>2537 Assignment 1</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <link rel="stylesheet" href="/static/css/index.css">
-  </head>
-  <body>
-    <div class="center">
-      <% if (authenticated) { %>
-        <h1>Welcome <%= username %></h1>
-        <a href="/members">Go to members page</a>
-        <a style="background-color: grey; margin-top: 12pt;" href="/logout">Logout</a>
-      <% } else { %>
-        <a href="/login">Login</a>
-        <p>or</p>
-        <a href="/signup">Signup</a>
-      <% } %>
-    </div>
-  </body>
-</html>
+<%- include("./partials/header") %>
+
+<div class="center">
+  <% if (authenticated) { %>
+    <h1>Welcome <%= username %></h1>
+    <a href="/members">Go to members page</a>
+    <a style="background-color: grey; margin-top: 12pt;" href="/logout">Logout</a>
+  <% } else { %>
+    <a href="/login">Login</a>
+    <p>or</p>
+    <a href="/signup">Signup</a>
+  <% } %>
+</div>
+
+<%- include("./partials/footer") %>
diff --git a/views/login.ejs b/views/login.ejs
index 7f7cc33..6befa5b 100755
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,31 +1,29 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>2537 Assignment 1</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">  
-    <meta charset="utf-8">
+<%- include("./partials/header") %>
 
-    <link rel="stylesheet" href="/static/css/index.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
-  </head>
-  <body>
-    <div class="center">
-      <form action="/login" method="POST">
+<div class="flex h-screen">
+  <div class="m-auto w-sm px-6 py-12 bg-white-200 rounded-lg space-y-6">
+    <div class="flex flex-row justify-center">
+      <h1 class="font-semibold text-xl mb-4 text-white">Login</h1>
+    </div>
+    <form action="/login" method="POST">
+      <div class="flex flex-col justify-center">
         <label for="username">
           <i class="fas fa-envelope"></i>
         </label>
-        <input type="email" name="email" placeholder="Email" id="email" required>
-
+        <input type="email" name="email" placeholder="Email" id="email" required class="block w-full rounded-md bg-grey-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 mb-4 text-white">
+  
         <label for="password">
           <i class="fas fa-lock"></i>
         </label>
-        <input type="password" name="password" placeholder="Password" id="password" required>
+        <input type="password" name="password" placeholder="Password" id="password" required class="block w-full rounded-md bg-grey-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 mb-4 text-white">
+      </div>
+  
+      <div class="flex flex-row justify-center">
+        <button type="submit" class="block w-3xs bg-blue-600 rounded-md mx-8 text-white p-2">Login</button>
+        <h3 class="text-red-500 text-center"><%= message %></h3>
+      </div>
+    </form>
+  </div>
+</div>
 
-        <input id="login" type="submit" value="Login">
-        <h3 id="flash-msg" class="flash-msg"><%= message %></h3>
-      </form>
-    </div>
-
-    <script src="/static/scripts/loadFlash.js"></script>
-  </body>
-</html>
+<%- include("./partials/footer") %>
diff --git a/views/members.ejs b/views/members.ejs
index 2a2e7e0..2be4b64 100644
--- a/views/members.ejs
+++ b/views/members.ejs
@@ -1,18 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>2537 Assignment 1</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  </head>
-  <body style="padding: 12pt;">
-    <h3>Hello <%= username %></h3>
-    <figure>
-      <img style="width: 400pt;" src="/static/images/<%= name %>.png">
-      <figcaption><%= name %></figcaption>
-    </figure>
-    <br>
-    <a style="background-color: grey; padding: 6px; margin-top: 12pt;" href="/logout">Logout</a>
-  </body>
-</html>
+<%- include("./partials/header") %>
+
+<h3>Hello <%= username %></h3>
+<figure>
+  <img style="width: 400pt;" src="/static/images/<%= name %>.png">
+  <figcaption><%= name %></figcaption>
+</figure>
+<br>
+<a style="background-color: grey; padding: 6px; margin-top: 12pt;" href="/logout">Logout</a>
+
+<%- include("./partials/footer") %>
diff --git a/views/notFound.ejs b/views/notFound.ejs
index 8bfd493..79027cf 100755
--- a/views/notFound.ejs
+++ b/views/notFound.ejs
@@ -1,13 +1,6 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>2537 Assignment 1</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  </head>
-  <body>
-    <h1>404 - Not found</h1>
-    <a href="/">Home</a>
-  </body>
-</html>
+<%- include("./partials/header") %>
+
+<h1>404 - Not found</h1>
+<a href="/">Home</a>
+
+<%- include("./partials/footer") %>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
new file mode 100644
index 0000000..b605728
--- /dev/null
+++ b/views/partials/footer.ejs
@@ -0,0 +1,2 @@
+  </body>
+</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
new file mode 100644
index 0000000..2948d7e
--- /dev/null
+++ b/views/partials/header.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>2537 Assignment 1</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  </head>
+  <body class="bg-gray-700">
diff --git a/views/signup.ejs b/views/signup.ejs
index 601fa41..dd5c898 100755
--- a/views/signup.ejs
+++ b/views/signup.ejs
@@ -1,40 +1,57 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>2537 Assignment 1</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">  
-    <meta charset="utf-8">
+<%- include("./partials/header") %>
 
-    <link rel="stylesheet" href="/static/css/index.css">
-    <link rel="stylesheet" href="/static/css/login.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
-  </head>
- 
-  <body>
-    <div class="background"></div>
 
-    <div class="center">
-      <form action="/signup" method="POST">
+<div class="flex h-screen">
+  <div class="m-auto w-sm px-6 py-12 bg-white-200 rounded-lg space-y-6">
+    <div class="flex flex-row justify-center">
+      <h1 class="font-semibold text-xl mb-4 text-white">Signup</h1>
+    </div>
+    <form action="/signup" method="POST">
+      <div class="flex flex-col justify-center">
         <label for="name">
           <i class="fas fa-user"></i>
         </label>
-        <input type="text" name="name" placeholder="Peter Venkman" id="name" required>
+        <input type="text" name="name" placeholder="Name" id="name" required class="block w-full rounded-md bg-grey-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 mb-4 text-white">
 
-        <label for="email">
+        <label for="username">
           <i class="fas fa-envelope"></i>
         </label>
-        <input type="email" name="email" placeholder="peter_v@ghostbusters.com" id="email" required>
-
+        <input type="email" name="email" placeholder="Email" id="email" required class="block w-full rounded-md bg-grey-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 mb-4 text-white">
+  
         <label for="password">
           <i class="fas fa-lock"></i>
         </label>
-        <input type="password" name="password" placeholder="Password" id="password" required>
+        <input type="password" name="password" placeholder="Password" id="password" required class="block w-full rounded-md bg-grey-100 px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 mb-4 text-white">
+      </div>
+  
+      <div class="flex flex-row justify-center">
+        <button type="submit" class="block w-3xs bg-blue-600 rounded-md mx-8 text-white p-2">Signup</button>
+        <h3 class="text-red"><%= message %></h3>
+      </div>
+    </form>
+  </div>
+</div>
 
-        <input id="login" type="submit" value="Sign Up">
-        <h3 id="flash-msg" class="flash-msg"><%= message %></h3>
-      </form>
-    </div>
+<div class="center">
+  <form action="/signup" method="POST">
+    <label for="name">
+      <i class="fas fa-user"></i>
+    </label>
+    <input type="text" name="name" placeholder="Peter Venkman" id="name" required>
 
-    <script src="/static/scripts/loadFlash.js"></script>
-  </body>
-</html>
\ No newline at end of file
+    <label for="email">
+      <i class="fas fa-envelope"></i>
+    </label>
+    <input type="email" name="email" placeholder="peter_v@ghostbusters.com" id="email" required>
+
+    <label for="password">
+      <i class="fas fa-lock"></i>
+    </label>
+    <input type="password" name="password" placeholder="Password" id="password" required>
+
+    <input id="login" type="submit" value="Sign Up">
+    <h3 id="flash-msg" class="flash-msg"><%= message %></h3>
+  </form>
+</div>
+
+<%- include("./partials/footer") %>
