diff --git a/src/public/scripts/footer.js b/src/public/scripts/footer.js
index 7bdc130..2680273 100644
--- a/src/public/scripts/footer.js
+++ b/src/public/scripts/footer.js
@@ -3,6 +3,13 @@ const factMenu = document.getElementById("factMenu");
 const factInput = document.getElementById("factInput");
 const factSubmitButton = document.getElementById("factSubmitButton");
 
+var path = window.location.pathname;
+var page = path.split("/").pop();
+
+if(page !== "login" && page !== "signup" && page !== "forgotPassword" && page !== "") {
+    factButton.classList.remove("hidden");
+}
+
 factButton.addEventListener("click", () => {
     factMenu.classList.toggle("hidden");
 });
diff --git a/src/views/forgotPass.ejs b/src/views/forgotPass.ejs
index d2d749f..a7a656c 100644
--- a/src/views/forgotPass.ejs
+++ b/src/views/forgotPass.ejs
@@ -1,38 +1,42 @@
 <%- include("./partials/fileHeader") %>
+<%- include("./partials/headerStart") %>
 
-    <main>
-        <div class="flex justify-center items-center h-screen">
-            <form action="/auth/resetPass" method="POST">
-                <div class="w-96 p-6 shadow-1g bg-white rounded-md">
-                    <h1 class="text-3xl block text-center font-semibold">Reset Password</h1>
-                    <hr class="mt-3">
-                    <% if (!reset ) { %>
-                        <div class="mt-3">
-                            <label for="email" class="block text-base mb-2">Email</label>
-                            <input type="text" id="email" name="email"
-                                class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
-                                placeholder="Enter Email" />
-                        </div>
-                        <% } else { %>
-                            <div class="mt-3">
-                                <h1 class="text-2xl block text-center font-bold text-red-600"> Reset link sent. </h1>
-                            </div>
-                            <% } %>
-                                <!---->
+<main class="pt-12 bg-slate-100 min-h-screen">
+    <div class="flex justify-center items-center py-10">
+        <form action="/auth/resetPass" method="POST">
+            <div class="w-96 p-8 bg-white rounded-lg shadow-xl border border-slate-200">
+                <h1 class="text-3xl block text-center font-semibold text-slate-700">Reset Password</h1>
+                <hr class="mt-4 mb-6 border-slate-300">
 
-                                <div class="text-red-800 font-bold" id="forgor">
-                                    <%= error%>
-                                </div>
-                                <% if (!reset) { %>
-                                    <div class="mt-5">
-                                        <button type="submit"
-                                            class="cursor-pointer border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Send
-                                            reset Link</button>
-                                    </div>
-                                    <% } %>
-                </div>
-            </form>
-        </div>
-    </main>
+                <% if (!reset ) { %>
+                    <div class="mt-4">
+                        <label for="email" class="block text-base mb-2 text-slate-600">Email</label>
+                        <input type="text" id="email" name="email"
+                            class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
+                            placeholder="Enter Email" />
+                    </div>
+                <% } else { %>
+                    <div class="mt-4 text-center">
+                        <h2 class="text-xl font-semibold text-green-600">Reset link sent.</h2>
+                        <p class="text-sm text-slate-600 mt-2">Please check your email inbox (and spam folder).</p>
+                    </div>
+                <% } %>
+                
+                <% if (typeof error !== 'undefined' && error && error.length > 0) { %>
+                    <div class="mt-3 text-red-600 font-semibold text-sm" id="forgor"><%= error %></div>
+                <% } else if (!reset) { %>
+                    <div class="mt-3 h-5" id="forgor"></div> <% /* Placeholder for layout consistency */ %>
+                <% } %>
 
-    <%- include("./partials/footer") %> <%- include("./partials/footer") %>
+                <% if (!reset) { %>
+                    <div class="mt-6">
+                        <button type="submit"
+                            class="border-2 border-indigo-600 bg-indigo-600 text-white py-2 w-full rounded-md hover:bg-indigo-700 hover:border-indigo-700 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Send Reset Link</button>
+                    </div>
+                <% } %>
+            </div>
+        </form>
+    </div>
+</main>
+
+<%- include("./partials/footer") %>
\ No newline at end of file
diff --git a/src/views/login.ejs b/src/views/login.ejs
index c2e5f2b..f9db474 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -1,41 +1,45 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/headerStart") %>
 
-<main class="pt-24">
-    <div class="flex justify-center items-center">
+<main class="pt-12 bg-slate-100 min-h-screen">
+    <div class="flex justify-center items-center py-10">
         <form action="/login" method="POST">
-            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
-                <h1 class="text-3xl block text-center font-semibold">Login</h1>
-                <hr class="mt-3">
-                <div class="mt-3">
-                    <label for="email" class="block text-base mb-2">Email</label>
+            <div class="w-96 p-8 bg-white rounded-lg shadow-xl border border-slate-200">
+                <h1 class="text-3xl block text-center font-semibold text-slate-700">Login</h1>
+                <hr class="mt-4 mb-6 border-slate-300">
+                <div class="mt-4">
+                    <label for="email" class="block text-base mb-2 text-slate-600">Email</label>
                     <input type="text" id="email" name="email"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Email" />
                 </div>
-                <div class="mt-3">
-                    <label for="password" class="block text-base mb-2">Password</label>
+                <div class="mt-4">
+                    <label for="password" class="block text-base mb-2 text-slate-600">Password</label>
                     <input type="password" id="password" name="password"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />
                 </div>
-                <div class="text-red-800 font-bold" id="forgor"> <%= errMessage %></div>
-                <div class="mt-3 flex justify-between items-center">
-                    <div>
-                        <input type="checkbox">
-                        <label>Remember me</label>
+                <% if (errMessage && errMessage.length > 0) { %>
+                    <div class="mt-3 text-red-600 font-semibold text-sm" id="forgor"> <%= errMessage %></div>
+                <% } else { %>
+                    <div class="mt-3 h-5" id="forgor"></div> <% /* Placeholder to maintain layout when no error */ %>
+                <% } %>
+                <div class="mt-4 flex justify-between items-center">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="rememberMe" class="h-4 w-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
+                        <label for="rememberMe" class="ml-2 text-sm text-slate-600">Remember me</label>
                     </div>
                     <div>
-                        <a href="/forgotPassword" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                        <a href="/forgotPassword" class="text-sm text-indigo-600 hover:text-indigo-500 font-semibold transition-colors duration-200">Forgot Password? </a>
                     </div>
                 </div>
-                <div class="mt-5">
+                <div class="mt-6">
                     <button type="submit"
-                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
+                        class="border-2 border-indigo-600 bg-indigo-600 text-white py-2 w-full rounded-md hover:bg-indigo-700 hover:border-indigo-700 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Login</button>
                 </div>
-                <div class="mt-5 block justify-between items-center">
-                    <label>Don't have an account?</label>
-                    <a href="/signup" class="text-indigo-600 font-semibold">Register</a>
+                <div class="mt-6 text-center">
+                    <span class="text-sm text-slate-600">Don't have an account?</span>
+                    <a href="/signup" class="text-sm text-indigo-600 hover:text-indigo-500 font-semibold ml-1 transition-colors duration-200">Register</a>
                 </div>
             </div>
         </form>
diff --git a/src/views/partials/footer.ejs b/src/views/partials/footer.ejs
index 3c6c988..6341dec 100644
--- a/src/views/partials/footer.ejs
+++ b/src/views/partials/footer.ejs
@@ -6,7 +6,7 @@
                 <button type="button" id="factSubmitButton" class="mt-3 w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Submit</button>
             </div>
         </div>
-        <button type="button" id="factButton" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
+        <button type="button" id="factButton" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800 hidden">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
             <span class="sr-only">Get a Fact</span>
         </button>
@@ -20,8 +20,6 @@
         </div>
     </footer>
     
-    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="/static/scripts/footer.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
diff --git a/src/views/signup.ejs b/src/views/signup.ejs
index 8f9c2bd..9c108ca 100644
--- a/src/views/signup.ejs
+++ b/src/views/signup.ejs
@@ -1,44 +1,46 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/headerStart") %>
 
-<main class="pt-24">
-    <div class="flex justify-center items-center">
+<main class="pt-12 bg-slate-100 min-h-screen">
+    <div class="flex justify-center items-center py-10">
         <form action="/signup" method="POST">
-            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
-                <h1 class="text-3xl block text-center font-semibold">Signup</h1>
-                <hr class="mt-3">
-                <div class="mt-3">
-                    <label for="name" class="block text-base mb-2">Name</label>
+            <div class="w-96 p-8 bg-white rounded-lg shadow-xl border border-slate-200">
+                <h1 class="text-3xl block text-center font-semibold text-slate-700">Signup</h1>
+                <hr class="mt-4 mb-6 border-slate-300">
+                <div class="mt-4">
+                    <label for="name" class="block text-base mb-2 text-slate-600">Name</label>
                     <input type="text" id="name" name="name"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Name" />
                 </div>
-                <div class="mt-3">
-                    <label for="email" class="block text-base mb-2">Email</label>
+                <div class="mt-4">
+                    <label for="email" class="block text-base mb-2 text-slate-600">Email</label>
                     <input type="email" id="email" name="email"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Email" />
                 </div>
-                <div class="mt-3">
-                    <label for="password" class="block text-base mb-2">Password</label>
+                <div class="mt-4">
+                    <label for="password" class="block text-base mb-2 text-slate-600">Password</label>
                     <input type="password" id="password" name="password"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />
-                    <label for="password" class="block text-base mb-2 mt-3">Re-type Password</label>
+                    <label for="repassword" class="block text-base mb-2 mt-3 text-slate-600">Re-type Password</label>
                     <input type="password" id="repassword" name="repassword"
-                        class="border focus:border-gray-600 w-full rounded-md text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        class="border border-slate-300 focus:border-indigo-500 w-full rounded-md text-base px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors duration-200"
                         placeholder="Enter Password" />
                 </div>
-                <div class="text-red-800 font-bold " id="forgor">
-                    <%= errMessage %>
-                </div>
-                <div class="mt-5">
+                <% if (errMessage && errMessage.length > 0) { %>
+                    <div class="mt-3 text-red-600 font-semibold text-sm" id="forgor"> <%= errMessage %></div>
+                <% } else { %>
+                    <div class="mt-3 h-5" id="forgor"></div> <% /* Placeholder to maintain layout when no error */ %>
+                <% } %>
+                <div class="mt-6">
                     <button type="submit"
-                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Signup</button>
+                        class="border-2 border-indigo-600 bg-indigo-600 text-white py-2 w-full rounded-md hover:bg-indigo-700 hover:border-indigo-700 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Signup</button>
                 </div>
-                <div class="mt-5 block justify-between items-center">
-                    <label>Already have an account?</label>
-                    <a href="/login" class="text-indigo-600 font-semibold">Login</a>
+                <div class="mt-6 text-center">
+                    <span class="text-sm text-slate-600">Already have an account?</span>
+                    <a href="/login" class="text-sm text-indigo-600 hover:text-indigo-500 font-semibold ml-1 transition-colors duration-200">Login</a>
                 </div>
             </div>
         </form>