diff --git a/static/base.css b/static/base.css
new file mode 100644
index 0000000..e69de29
diff --git a/templates/base.html b/templates/base.html
index 8ae3039..b8e98bd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,8 +8,11 @@
   <title>{% block title %} {% endblock %} - trim.lol</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="stylesheet" href="../static/base.css">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOM4MzPT4nVnI8qz1iRjPv2L5/8Gbt5c+G5dT1" crossorigin="anonymous">
+
   <style>
     @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
 
@@ -20,6 +23,24 @@
     .errorTrue {
       display: block !important;
     }
+ 
+    /* Optional: Slide-in effect for mobile menu */
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease forwards;
+}
+
+
   </style>
 </head>
 
@@ -31,4 +52,53 @@
   </div>
   {% block script %} {% endblock %}
 </body>
+
+<script>
+    // JavaScript for hamburger menu functionality
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburger = document.getElementById("hamburger");
+  const mobileMenu = document.getElementById("mobileMenu");
+
+  // Toggle the 'hidden' class on the mobile menu
+  hamburger.addEventListener("click", function () {
+    mobileMenu.classList.toggle("hidden");
+
+    // Optional: Add an open/close animation
+    mobileMenu.classList.toggle("slide-in");
+  });
+});
+  // Change header style on scroll
+  document.addEventListener("DOMContentLoaded", function () {
+  const themeToggle = document.getElementById("theme-toggle");
+  const body = document.body;
+
+  // Check for saved user preference
+  const currentTheme = localStorage.getItem("theme");
+  if (currentTheme) {
+    body.classList.add(currentTheme);
+  } else {
+    // Default to light mode
+    body.classList.add("light-mode");
+  }
+
+  themeToggle.addEventListener("click", () => {
+    // Toggle between light and dark modes
+    if (body.classList.contains("light-mode")) {
+      body.classList.remove("light-mode");
+      body.classList.add("dark-mode");
+      themeToggle.innerHTML = '<i class="fas fa-moon text-2xl"></i>'; // Change icon to moon
+      localStorage.setItem("theme", "dark-mode");
+    } else {
+      body.classList.remove("dark-mode");
+      body.classList.add("light-mode");
+      themeToggle.innerHTML = '<i class="fas fa-sun text-2xl"></i>'; // Change icon to sun
+      localStorage.setItem("theme", "light-mode");
+    }
+  });
+});
+
+
+</script>
+
+
 </html>
diff --git a/templates/generateurl.html b/templates/generateurl.html
index a84e78d..5e636d1 100644
--- a/templates/generateurl.html
+++ b/templates/generateurl.html
@@ -1,189 +1,416 @@
-{% extends 'base.html' %} {%block content %}
-<div
-  class="p-8 px-10 md:p-10 2xl:p-16 m-3 rounded-xl w-11/12 md:3/4 lg:w-1/2 2xl:w-2/5 flex items-center flex-col gap-3 bg-zinc-900"
->
-  <div class="flex gap-3 justify-between items-center w-full">
-    <h1 class="text-2xl font-bold">{%block title%}Generate URL{%endblock%}</h1>
-    <a
-      href="/stats"
-      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-      >Check Statistics</a
-    >
-  </div>
-  <hr class="w-full border-t-2 opacity-25 mb-3 border-zinc-400" />
-  <form
-    method="post"
-    action
-    class="flex items-center flex-col w-full"
-    id="generateURLForm"
-  >
-    <div class="mb-3 w-full">
-      <label>Original URL</label><br />
-      <input
-        type="text"
-        name="long_url"
-        id="url"
-        placeholder="Enter URL to be shortened"
-        class="rounded-lg p-2 w-full bg-zinc-800"
-        value="{{old_url}}"
-      />
-      <p class="text-sm text-red-500 hidden {{error_url}}">
-        {{error_url_statement}}
-      </p>
-    </div>
-    <div class="mb-3 xl:w-4/5 w-11/12">
-      <label>Custom URL</label>
-      <input
-        name="custom_url"
-        type="text"
-        id="custom_url"
-        class="rounded-lg p-2 bg-zinc-800 w-full"
-        placeholder="Enter Custom URL (optional)"
-        value="{{custom_url}}"
-      />
-      <p class="text-sm text-red-500 hidden {{error_custom_url}}">
-        {{error_custom_url_statement}}
-      </p>
-    </div>
-    <button
-      type="submit"
-      value="submit"
-      id="shorten"
-      class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-3/4 xl:w-1/2 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-    >
-      Shorten URL 🔗
-    </button>
-    <hr class="border-top border-zinc-700 w-full p-2" />
-    <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
-    <div
-      class="mb-3 rounded-lg w-11/12 xl:w-3/4 p-2 pl-4 bg-zinc-800 flex justify-between"
-    >
-      <input
-        type="url"
-        id="output"
-        disabled
-        placeholder="Returns your new shortened URL"
-        class="bg-transparent cursor-not-allowed w-3/4"
-        value="{{new_url}}"
-      />
-      <button
-        type="button"
-        onclick="return copyContent()"
-        id="copyButton"
-        class="hover:bg-zinc-700 p-2 transition ease-in-out duration-200 rounded-lg"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          class="fill-white"
-          viewBox="0 0 256 256"
-        >
-          <path
-            d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"
-          ></path>
-        </svg>
-      </button>
-    </div>
-  </form>
-</div>
-<div class="flex flex-col justify-center items-center">
-  <a
-    href="/logout"
-    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="#000"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"
-      ></path></svg
-    >Logout</a
-  >
-  <p class="text-blue-200 text-center px-2">
-    <a
-      href="https://github.com/averageblank/urlshortener"
-      class="underline"
-      target="_blank"
-      >Github</a
-    >. Developed By
-    <a href="https://github.com/AvgBlank" target="_blank" class="underline"
-      >AvgBlank</a
-    >
-    and
-    <a href="https://github.com/AalokeCode" target="_blank" class="underline"
-      >AalokeCode</a
-    >
-  </p>
-</div>
-{%endblock%} {%block script %}
-<script>
-  // sleep function
-  function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-    event.preventDefault();
-  }
-  let text = document.getElementById("output");
-  let button = document.getElementById("copyButton").innerHTML;
-
-  // copy button
-  const copyContent = async () => {
-    event.preventDefault();
-    try {
-      await navigator.clipboard.writeText(text.value);
-      copyButton.innerHTML =
-        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
-      await sleep(2500);
-      copyButton.innerHTML =
-        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
-      console.log("Content copied to clipboard");
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
-
-  // clear forms when refreshed
-  window.onload = function () {
-    document.getElementById("generateURLForm").reset();
-  };
-  if ("{{clearForms}}" == "True") {
-    document.getElementById("generateURLForm").reset();
-  }
-
-  // disable url shortening after you fill in the form
-  document.addEventListener("DOMContentLoaded", function (event) {
-    if ("{{completed}}" == "True") {
-      const button = document.getElementById("shorten");
-      const custom_url = document.getElementById("custom_url");
-      const long_url = document.getElementById("url");
-      button.disabled = true;
-      custom_url.disabled = true;
-      long_url.disabled = true;
-      button.classList.remove("bg-blue-700");
-      button.classList.remove("cursor-pointer");
-      button.classList.remove("hover:bg-blue-800");
-      button.classList.add("bg-gray-500");
-      button.classList.add("cursor-not-allowed");
-      custom_url.classList.add("cursor-not-allowed");
-      long_url.classList.add("cursor-not-allowed");
-    } else {
-      const button = document.getElementById("shorten");
-      const custom_url = document.getElementById("custom_url");
-      const long_url = document.getElementById("url");
-      button.disabled = false;
-      custom_url.disabled = false;
-      long_url.disabled = false;
-      button.classList.remove("bg-gray-500");
-      button.classlist.remove("cursor-not-allowed");
-      button.classList.add("bg-blue-700");
-      button.classList.add("cursor-pointer");
-      button.classList.add("hover:bg-blue-800");
-      custom_url.classList.remove("cursor-not-allowed");
-      long_url.classList.remove("cursor-not-allowed");
-    }
-  });
-</script>
-{%endblock%}
+
+<header class="header-glass shadow-md mb-24 sticky top-0 z-50 transition-all duration-300 ease-in-out">
+  <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+    <div class="flex items-center space-x-2">
+      <img src="/static/images/favicon.svg" alt="Logo" class="h-8 w-auto">
+      <h1 class="text-gray-100 text-lg font-semibold">A URL Shortener</h1>
+    </div>
+
+    <!-- Hamburger Menu for Mobile -->
+    <button id="hamburger" class="text-gray-200 md:hidden focus:outline-none">
+      <i class="fas fa-bars text-2xl"></i>
+    </button>
+
+    <!-- Navigation Links -->
+    <nav id="navMenu" class="hidden md:flex space-x-4">
+      <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        Generate URL
+      </a>
+      <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        View Stats
+      </a>
+      <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+        <i class="fas fa-arrow-right-from-bracket"></i>
+        <span>Log Out</span>
+      </a>
+    </nav>
+  </div>
+
+  <!-- Mobile Menu -->
+  <nav id="mobileMenu" class="md:hidden flex flex-col space-y-2 mt-4 px-4 hidden mb-16">
+    <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      Generate URL
+    </a>
+    <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      View Stats
+    </a>
+    <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+      <i class="fas fa-arrow-right-from-bracket"></i>
+      <span>Log Out</span>
+    </a>
+  </nav>
+</header>
+
+
+
+{% extends 'base.html' %} {%block content %}
+<div class="p-6 md:p-10 lg:p-12 mx-3 rounded-xl w-full max-w-lg flex items-center flex-col gap-4 bg-zinc-900">
+  <div class="flex flex-col md:flex-row justify-between items-center w-full">
+    <h1 class="text-2xl font-bold text-center md:text-left mb-3 md:mb-0">{% block title %}Generate URL{% endblock %}</h1>
+    <a href="/stats"
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-4 md:px-6">Check Statistics</a>
+  </div>
+  <hr class="w-full border-t-2 opacity-25 mb-3 border-zinc-400" />
+  <form method="post" action="" class="flex items-center flex-col w-full" id="generateURLForm">
+    <div class="mb-3 w-full">
+      <label class="block text-sm font-medium mb-1">Original URL</label>
+      <input type="text" name="long_url" id="url" placeholder="Enter URL to be shortened"
+        class="rounded-lg p-2 w-full bg-zinc-800" value="{{old_url}}" />
+      <p class="text-sm text-red-500 hidden {{error_url}}">{{error_url_statement}}</p>
+    </div>
+    <div class="mb-3 w-full">
+      <label class="block text-sm font-medium mb-1">Custom URL</label>
+      <input name="custom_url" type="text" id="custom_url" class="rounded-lg p-2 bg-zinc-800 w-full"
+        placeholder="Enter Custom URL (optional)" value="{{custom_url}}" />
+      <p class="text-sm text-red-500 hidden {{error_custom_url}}">{{error_custom_url_statement}}</p>
+    </div>
+    <button type="submit" value="submit" id="shorten"
+      class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-full transition ease-in-out duration-200 text-white rounded-lg p-2">
+      Shorten URL 🔗
+    </button>
+    <hr class="border-t border-zinc-700 w-full p-2" />
+    <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
+    <div class="mb-3 rounded-lg w-full p-2 pl-4 bg-zinc-800 flex justify-between">
+      <input type="url" id="output" disabled placeholder="Returns your new shortened URL"
+        class="bg-transparent cursor-not-allowed w-3/4" value="{{new_url}}" />
+      <button type="button" onclick="return copyContent()" id="copyButton"
+        class="hover:bg-zinc-700 p-2 transition ease-in-out duration-200 rounded-lg">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-white" viewBox="0 0 256 256">
+          <path
+            d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z">
+          </path>
+        </svg>
+      </button>
+    </div>
+  </form>
+</div>
+
+<div class="flex flex-col justify-center items-center mt-6">
+  <a href="/logout"
+    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
+      <path
+        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z">
+      </path>
+    </svg>
+    Logout
+  </a>
+  <p class="text-blue-200 text-center px-2">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By
+    <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
+      href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
+  </p>
+</div>
+
+
+
+{%endblock%} {%block script %}
+<footer class="bg-gray-900 text-white py-6">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex flex-col md:flex-row justify-between items-center my-8">
+      <!-- Logo Section -->
+      <div class="flex items-center mb-4 md:mb-0 md:mt-0 mt-24 md:mt-0">
+        <img src="/static/images/favicon.svg" alt="Logo" class="h-10 w-auto mr-3" />
+        <span class="text-lg font-semibold">A URL Shortener</span>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 mb-4 md:mb-0">
+        <a href="/about" class="hover:text-blue-400 transition duration-200">About Us</a>
+        <a href="/privacy" class="hover:text-blue-400 transition duration-200">Privacy Policy</a>
+        <a href="/terms" class="hover:text-blue-400 transition duration-200">Terms of Service</a>
+      </nav>
+    </div>
+
+    <div class="border-t border-gray-700 mt-4 pt-4 text-center">
+      <p class="text-sm">&copy; 2024 Trim.lol. All rights reserved.</p>
+      <div class="flex justify-center space-x-4 mt-2">
+        <a href="#" class="text-blue-400 hover:underline">Twitter</a>
+        <a href="#" class="text-blue-400 hover:underline">Facebook</a>
+        <a href="#" class="text-blue-400 hover:underline">Instagram</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+
+
+
+
+<script>
+
+  // JavaScript for hamburger menu functionality
+document.addEventListener("DOMContentLoaded", function () {
+  const hamburger = document.getElementById("hamburger");
+  const mobileMenu = document.getElementById("mobileMenu");
+
+  // Toggle the 'hidden' class on the mobile menu
+  hamburger.addEventListener("click", function () {
+    mobileMenu.classList.toggle("hidden");
+
+    // Optional: Add an open/close animation
+    mobileMenu.classList.toggle("slide-in");
+  });
+});
+
+
+  // sleep function
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+    event.preventDefault();
+  }
+  let text = document.getElementById("output");
+  let button = document.getElementById("copyButton").innerHTML;
+
+  // copy button
+  const copyContent = async () => {
+    event.preventDefault();
+    try {
+      await navigator.clipboard.writeText(text.value);
+      copyButton.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
+      await sleep(2500);
+      copyButton.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
+      console.log("Content copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  // clear forms when refreshed
+  window.onload = function () {
+    document.getElementById("generateURLForm").reset();
+  };
+  if ("{{clearForms}}" == "True") {
+    document.getElementById("generateURLForm").reset();
+  }
+
+  // disable url shortening after you fill in the form
+  document.addEventListener("DOMContentLoaded", function (event) {
+    if ("{{completed}}" == "True") {
+      const button = document.getElementById("shorten");
+      const custom_url = document.getElementById("custom_url");
+      const long_url = document.getElementById("url");
+      button.disabled = true;
+      custom_url.disabled = true;
+      long_url.disabled = true;
+      button.classList.remove("bg-blue-700");
+      button.classList.remove("cursor-pointer");
+      button.classList.remove("hover:bg-blue-800");
+      button.classList.add("bg-gray-500");
+      button.classList.add("cursor-not-allowed");
+      custom_url.classList.add("cursor-not-allowed");
+      long_url.classList.add("cursor-not-allowed");
+    } else {
+      const button = document.getElementById("shorten");
+      const custom_url = document.getElementById("custom_url");
+      const long_url = document.getElementById("url");
+      button.disabled = false;
+      custom_url.disabled = false;
+      long_url.disabled = false;
+      button.classList.remove("bg-gray-500");
+      button.classlist.remove("cursor-not-allowed");
+      button.classList.add("bg-blue-700");
+      button.classList.add("cursor-pointer");
+      button.classList.add("hover:bg-blue-800");
+      custom_url.classList.remove("cursor-not-allowed");
+      long_url.classList.remove("cursor-not-allowed");
+    }
+  });
+</script>
+{%endblock%}
+=======
+{% extends 'base.html' %} {%block content %}
+<div
+  class="p-8 px-10 md:p-10 2xl:p-16 m-3 rounded-xl w-11/12 md:3/4 lg:w-1/2 2xl:w-2/5 flex items-center flex-col gap-3 bg-zinc-900"
+>
+  <div class="flex gap-3 justify-between items-center w-full">
+    <h1 class="text-2xl font-bold">{%block title%}Generate URL{%endblock%}</h1>
+    <a
+      href="/stats"
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+      >Check Statistics</a
+    >
+  </div>
+  <hr class="w-full border-t-2 opacity-25 mb-3 border-zinc-400" />
+  <form
+    method="post"
+    action
+    class="flex items-center flex-col w-full"
+    id="generateURLForm"
+  >
+    <div class="mb-3 w-full">
+      <label>Original URL</label><br />
+      <input
+        type="text"
+        name="long_url"
+        id="url"
+        placeholder="Enter URL to be shortened"
+        class="rounded-lg p-2 w-full bg-zinc-800"
+        value="{{old_url}}"
+      />
+      <p class="text-sm text-red-500 hidden {{error_url}}">
+        {{error_url_statement}}
+      </p>
+    </div>
+    <div class="mb-3 xl:w-4/5 w-11/12">
+      <label>Custom URL</label>
+      <input
+        name="custom_url"
+        type="text"
+        id="custom_url"
+        class="rounded-lg p-2 bg-zinc-800 w-full"
+        placeholder="Enter Custom URL (optional)"
+        value="{{custom_url}}"
+      />
+      <p class="text-sm text-red-500 hidden {{error_custom_url}}">
+        {{error_custom_url_statement}}
+      </p>
+    </div>
+    <button
+      type="submit"
+      value="submit"
+      id="shorten"
+      class="text-center bg-blue-700 hover:bg-blue-800 cursor-pointer mb-5 w-3/4 xl:w-1/2 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+    >
+      Shorten URL 🔗
+    </button>
+    <hr class="border-top border-zinc-700 w-full p-2" />
+    <h1 class="text-xl mb-3 font-bold">Copy your custom URL</h1>
+    <div
+      class="mb-3 rounded-lg w-11/12 xl:w-3/4 p-2 pl-4 bg-zinc-800 flex justify-between"
+    >
+      <input
+        type="url"
+        id="output"
+        disabled
+        placeholder="Returns your new shortened URL"
+        class="bg-transparent cursor-not-allowed w-3/4"
+        value="{{new_url}}"
+      />
+      <button
+        type="button"
+        onclick="return copyContent()"
+        id="copyButton"
+        class="hover:bg-zinc-700 p-2 transition ease-in-out duration-200 rounded-lg"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          class="fill-white"
+          viewBox="0 0 256 256"
+        >
+          <path
+            d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </form>
+</div>
+<div class="flex flex-col justify-center items-center">
+  <a
+    href="/logout"
+    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"
+    ><svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="#000"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"
+      ></path></svg
+    >Logout</a
+  >
+  <p class="text-blue-200 text-center px-2">
+    <a
+      href="https://github.com/averageblank/urlshortener"
+      class="underline"
+      target="_blank"
+      >Github</a
+    >. Developed By
+    <a href="https://github.com/AvgBlank" target="_blank" class="underline"
+      >AvgBlank</a
+    >
+    and
+    <a href="https://github.com/AalokeCode" target="_blank" class="underline"
+      >AalokeCode</a
+    >
+  </p>
+</div>
+{%endblock%} {%block script %}
+<script>
+  // sleep function
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+    event.preventDefault();
+  }
+  let text = document.getElementById("output");
+  let button = document.getElementById("copyButton").innerHTML;
+
+  // copy button
+  const copyContent = async () => {
+    event.preventDefault();
+    try {
+      await navigator.clipboard.writeText(text.value);
+      copyButton.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
+      await sleep(2500);
+      copyButton.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
+      console.log("Content copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  // clear forms when refreshed
+  window.onload = function () {
+    document.getElementById("generateURLForm").reset();
+  };
+  if ("{{clearForms}}" == "True") {
+    document.getElementById("generateURLForm").reset();
+  }
+
+  // disable url shortening after you fill in the form
+  document.addEventListener("DOMContentLoaded", function (event) {
+    if ("{{completed}}" == "True") {
+      const button = document.getElementById("shorten");
+      const custom_url = document.getElementById("custom_url");
+      const long_url = document.getElementById("url");
+      button.disabled = true;
+      custom_url.disabled = true;
+      long_url.disabled = true;
+      button.classList.remove("bg-blue-700");
+      button.classList.remove("cursor-pointer");
+      button.classList.remove("hover:bg-blue-800");
+      button.classList.add("bg-gray-500");
+      button.classList.add("cursor-not-allowed");
+      custom_url.classList.add("cursor-not-allowed");
+      long_url.classList.add("cursor-not-allowed");
+    } else {
+      const button = document.getElementById("shorten");
+      const custom_url = document.getElementById("custom_url");
+      const long_url = document.getElementById("url");
+      button.disabled = false;
+      custom_url.disabled = false;
+      long_url.disabled = false;
+      button.classList.remove("bg-gray-500");
+      button.classlist.remove("cursor-not-allowed");
+      button.classList.add("bg-blue-700");
+      button.classList.add("cursor-pointer");
+      button.classList.add("hover:bg-blue-800");
+      custom_url.classList.remove("cursor-not-allowed");
+      long_url.classList.remove("cursor-not-allowed");
+    }
+  });
+</script>
+{%endblock%}
+
diff --git a/templates/index.html b/templates/index.html
index c14fc28..b27409d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,43 +1,69 @@
-{%extends 'base.html'%} {%block content %}
-<div class="p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
-  <div class="text-center">
-    <span class="hidden">{%block title%}trim.lol{%endblock%}</span>
-    <h1 class="text-3xl font-bold text-center">
-      A URL Shortener programmed in python
-    </h1>
-    <p class="text-sm mb-3 text-zinc-300">Built using Flask & MongoDB</p>
-  </div>
-  <div class="flex gap-1 items-center flex-col md:flex-row">
-    <a
-      href="/signup"
-      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-      >Sign Up</a
-    >
-    <a
-      href="/login"
-      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-      >Login</a
-    >
-    <a
-      href="/login/google"
-      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-      >Login with Google
-    </a>
-  </div>
-</div>
-<p class="text-blue-200 text-center px-2">
-  <a
-    href="https://github.com/averageblank/urlshortener"
-    class="underline"
-    target="_blank"
-    >Github</a
-  >. Developed By
-  <a href="https://github.com/AvgBlank" target="_blank" class="underline"
-    >AvgBlank</a
-  >
-  and
-  <a href="https://github.com/AalokeCode" target="_blank" class="underline"
-    >AalokeCode</a
-  >
-</p>
-{%endblock%}
+
+{% extends 'base.html' %}
+{% block content %}
+
+<div class="p-6 sm:p-10 md:p-14 lg:p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
+    <div class="text-center">
+        <span class="hidden">{% block title %}trim.lol{% endblock %}</span>
+        <h1 class="text-2xl sm:text-3xl font-bold text-center">A URL Shortener Programmed in Python</h1>
+        <p class="text-sm mb-3 text-zinc-300">Built using Flask & MongoDB</p>
+    </div>
+    <div class="flex gap-2 items-center flex-col md:flex-row">
+        <a href="/login"
+            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-6 sm:px-8">Log
+            in</a>
+        <a href="/signup"
+            class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-6 sm:px-8">Sign
+            Up</a>
+    </div>
+</div>
+<p class="text-blue-200 text-center px-2 mt-4">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By
+    <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and <a
+        href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
+</p>
+{% endblock %}
+=======
+{%extends 'base.html'%} {%block content %}
+<div class="p-20 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900">
+  <div class="text-center">
+    <span class="hidden">{%block title%}trim.lol{%endblock%}</span>
+    <h1 class="text-3xl font-bold text-center">
+      A URL Shortener programmed in python
+    </h1>
+    <p class="text-sm mb-3 text-zinc-300">Built using Flask & MongoDB</p>
+  </div>
+  <div class="flex gap-1 items-center flex-col md:flex-row">
+    <a
+      href="/signup"
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+      >Sign Up</a
+    >
+    <a
+      href="/login"
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+      >Login</a
+    >
+    <a
+      href="/login/google"
+      class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+      >Login with Google
+    </a>
+  </div>
+</div>
+<p class="text-blue-200 text-center px-2">
+  <a
+    href="https://github.com/averageblank/urlshortener"
+    class="underline"
+    target="_blank"
+    >Github</a
+  >. Developed By
+  <a href="https://github.com/AvgBlank" target="_blank" class="underline"
+    >AvgBlank</a
+  >
+  and
+  <a href="https://github.com/AalokeCode" target="_blank" class="underline"
+    >AalokeCode</a
+  >
+</p>
+{%endblock%}
diff --git a/templates/stats.html b/templates/stats.html
index 6e01f4e..51f78f5 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -1,185 +1,354 @@
-{%extends 'base.html' %} {%block content %}
-<div
-  class="p-5 md:p-10 2xl:p-20 w-full md:w-5/6 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900"
->
-  <!-- Greeting with user email -->
-  <p class="text-xl font-semibold text-white">Hello, {{ userID }}</p>
-  <div
-    class="flex flex-col justify-center items-center w-full md:flex-row md:justify-between"
-  >
-    <h1 class="text-2xl font-bold">{%block title%}Statistics{%endblock%}</h1>
-    <div class="flex gap-3 items-center">
-      <form method="post" action class="flex items-center justify-center">
-        <button
-          type="submit"
-          value="submit"
-          class="flex items-center h-full justify-center"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            fill="#fff"
-            viewBox="0 0 256 256"
-          >
-            <path
-              d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"
-            ></path>
-          </svg>
-        </button>
-      </form>
-      <a
-        href="/generateurl"
-        class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
-        >Generate a new URL</a
-      >
-    </div>
-  </div>
-  <hr class="w-full border-t-2 opacity-25 border-zinc-400" />
-  <div class="w-full h-80 overflow-x-auto overflow-y-auto">
-    <table class="w-full text-sm text-left rtl:text-right text-zinc-400">
-      <thead
-        class="text-xs uppercase border-b border-b-zinc-700 dark:text-zinc-400"
-      >
-        <tr>
-          <th scope="col" class="px-6 py-3">Original URL</th>
-          <th scope="col" class="px-6 py-3">Shortened URL</th>
-          <th scope="col" class="px-6 py-3">Date & Time Created</th>
-          <th scope="col" class="px-6 py-3">Clicks</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for url in urls %}
-        <tr class="odd:bg-zinc-900 even:bg-zinc-800 border-zinc-700">
-          <td class="px-6 py-4 truncate max-w-96">{{url['OriginalURL']}}</td>
-          <td class="px-6 py-4 flex items-center gap-2">
-            <span class="shortened-url block max-w-80 truncate"
-              >https://trim.lol/{{url['ShortenedURL']}}</span
-            >
-            <button
-              class="copy-button text-white bg-blue-700 flex items-center gap-2 hover:bg-blue-800 p-2 rounded-lg"
-              onclick="copyContent(this)"
-              data-url="https://trim.lol/{{url['ShortenedURL']}}"
-            >
-              Copy
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                class="fill-white"
-                viewBox="0 0 256 256"
-              >
-                <path
-                  d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"
-                ></path>
-              </svg>
-            </button>
-
-            <button class="text-white bg-red-600 flex items-center gap-2 hover:bg-red-700 p-2 rounded-lg delete-button" 
-              onclick="deletecontent(this)" 
-              data-msg="{{url['ShortenedURL']}}"
-              >Delete
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-white" viewBox="0 0 256 256">
-                <path
-                  d="M216,72H184V56a16,16,0,0,0-16-16H88A16,16,0,0,0,72,56V72H40a8,8,0,0,0,0,16H56v136a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V88h16a8,8,0,0,0,0-16ZM88,56h80V72H88ZM184,224H72V88H184Z">
-                </path>
-                </svg>
-            </button>
-
-
-          </td>
-          <td class="px-6 py-4">{{url['Timestamp']}}</td>
-          <td class="px-6 py-4">{{url['Clicks']}}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</div>
-<div class="flex flex-col justify-center items-center">
-  <a
-    href="/logout"
-    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="#000"
-      viewBox="0 0 256 256"
-    >
-      <path
-        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"
-      ></path></svg
-    >Logout</a
-  >
-  <p class="text-blue-200 text-center px-2">
-    <a
-      href="https://github.com/averageblank/urlshortener"
-      class="underline"
-      target="_blank"
-      >Github</a
-    >. Developed By
-    <a href="https://github.com/AvgBlank" target="_blank" class="underline"
-      >AvgBlank</a
-    >
-    and
-    <a href="https://github.com/AalokeCode" target="_blank" class="underline"
-      >AalokeCode</a
-    >
-  </p>
-</div>
-{%endblock%} {%block script %}
-<script>
-  function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  const copyContent = async (button) => {
-    try {
-      const text = button.getAttribute("data-url");
-
-      await navigator.clipboard.writeText(text);
-      console.log("Content copied to clipboard");
-
-      button.innerHTML =
-        'Copied <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
-      await sleep(2500);
-      button.innerHTML =
-        'Copy <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
-
-  
-  async function deletecontent(button) {
-    const shortenedUrl = button.dataset.msg;
-    if(confirm(`Are you sure you want to delete https://trim.lol/ ${shortenedUrl}`)){
-    try {
-      const response = await fetch('/delete', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ shortened_url: shortenedUrl })
-      });
-
-      if (!response.ok) {
-        const message = await response.text();
-        throw new Error(message || 'An error occurred while deleting the URL.');
-      }
-
-      // Redirect to stats page on success
-      window.location.href = "{{ url_for('stats') }}";
-    } catch (error) {
-      console.error(error);
-      alert(error.message);
-    }
-  }
-  }
-
-
-
-
-</script>
-{%endblock%}
+
+<header class="header-glass shadow-md mb-24 sticky top-0 z-50 transition-all duration-300 ease-in-out">
+  <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+    <div class="flex items-center space-x-2">
+      <img src="/static/images/favicon.svg" alt="Logo" class="h-8 w-auto">
+      <h1 class="text-gray-100 text-lg font-semibold">A URL Shortener</h1>
+    </div>
+
+    <!-- Hamburger Menu for Mobile -->
+    <button id="hamburger" class="text-gray-200 md:hidden focus:outline-none">
+      <i class="fas fa-bars text-2xl"></i>
+    </button>
+
+    <!-- Navigation Links -->
+    <nav id="navMenu" class="hidden md:flex space-x-4">
+      <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        Generate URL
+      </a>
+      <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+        View Stats
+      </a>
+      <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+        <i class="fas fa-arrow-right-from-bracket"></i>
+        <span>Log Out</span>
+      </a>
+    </nav>
+  </div>
+
+  <!-- Mobile Menu -->
+  <nav id="mobileMenu" class="md:hidden flex flex-col space-y-2 mt-4 px-4 hidden mb-16">
+    <a href="/generateurl" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      Generate URL
+    </a>
+    <a href="/stats" class="text-white bg-blue-600 hover:bg-blue-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold">
+      View Stats
+    </a>
+    <a href="/logout" class="flex items-center text-white bg-red-600 hover:bg-red-500 transition ease-in-out duration-200 px-4 py-2 rounded-lg font-semibold space-x-2">
+      <i class="fas fa-arrow-right-from-bracket"></i>
+      <span>Log Out</span>
+    </a>
+  </nav>
+</header>
+{%extends 'base.html' %}
+
+{%block content %}
+<div class="p-5 md:p-10 2xl:p-20 w-full md:w-5/6 mx-3 rounded-xl flex flex-col gap-3 bg-zinc-900">
+  <div class="flex flex-col justify-center items-center w-full md:flex-row md:justify-between">
+    <h1 class="text-2xl font-bold text-center md:text-left">{% block title %}Statistics{% endblock %}</h1>
+    <div class="flex gap-3 items-center mt-3 md:mt-0">
+      <form method="post" action class="flex items-center">
+        <button type="submit" value="submit" class="flex items-center h-full justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256">
+            <path d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"></path>
+          </svg>
+        </button>
+      </form>
+      <a href="/generateurl" class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8">Generate a new URL</a>
+    </div>
+  </div>
+  <hr class="w-full border-t-2 opacity-25 border-zinc-400" />
+
+  <!-- Scrollable Section -->
+  <div class="w-full h-80 overflow-x-auto overflow-y-auto">
+    <div class="flex flex-col gap-4"> <!-- Flex container to hold all tables -->
+      <table class="w-full text-sm text-left rtl:text-right text-zinc-400">
+        <thead class="text-xs uppercase border-b border-b-zinc-700">
+          <tr>
+            <th scope="col" class="px-4 py-3">Original URL</th>
+            <th scope="col" class="px-4 py-3">Shortened URL</th>
+            <th scope="col" class="px-4 py-3">Date & Time Created</th>
+            <th scope="col" class="px-4 py-3">Clicks</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for url in urls %}
+          <tr class="odd:bg-zinc-900 even:bg-zinc-800 border-b border-b-zinc-700">
+            <td class="px-4 py-4 truncate max-w-[200px] md:max-w-[300px]">{{ url['OriginalURL'] }}</td>
+            <td class="px-4 py-4 flex items-center gap-2">
+              <span class="shortened-url block max-w-[200px] md:max-w-[300px] truncate">https://trim.lol/{{ url['ShortenedURL'] }}</span>
+              <button class="copy-button text-white bg-blue-700 flex items-center gap-2 hover:bg-blue-800 p-2 rounded-lg" onclick="copyContent(this)" data-url="https://trim.lol/{{ url['ShortenedURL'] }}">Copy
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-white" viewBox="0 0 256 256">
+                  <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path>
+                </svg>
+              </button>
+            </td>
+            <td class="px-4 py-4">{{ url['Timestamp'] }}</td>
+            <td class="px-4 py-4">{{ url['Clicks'] }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+
+      <!-- You can add more tables here if needed -->
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-col justify-center items-center mt-4">
+  <a href="/logout" class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 256 256">
+      <path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"></path>
+    </svg>
+    Logout
+  </a>
+  <p class="text-blue-200 text-center px-2">
+    <a href="https://github.com/averageblank/urlshortener" class="underline" target="_blank">Github</a>. Developed By 
+    <a href="https://github.com/AverageBlank" target="_blank" class="underline">AverageBlank</a> and 
+    <a href="https://github.com/AalokeCode" target="_blank" class="underline">AalokeCode</a>
+  </p>
+</div>
+
+
+
+
+{%endblock%}
+{%block script %}
+<footer class="bg-gray-900 text-white py-6">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex flex-col md:flex-row justify-between items-center my-8">
+      <!-- Logo Section -->
+      <div class="flex items-center mb-4 md:mb-0 md:mt-0 mt-24 md:mt-0">
+        <img src="/static/images/favicon.svg" alt="Logo" class="h-10 w-auto mr-3" />
+        <span class="text-lg font-semibold">A URL Shortener</span>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 mb-4 md:mb-0">
+        <a href="/about" class="hover:text-blue-400 transition duration-200">About Us</a>
+        <a href="/privacy" class="hover:text-blue-400 transition duration-200">Privacy Policy</a>
+        <a href="/terms" class="hover:text-blue-400 transition duration-200">Terms of Service</a>
+      </nav>
+    </div>
+
+    <div class="border-t border-gray-700 mt-4 pt-4 text-center">
+      <p class="text-sm">&copy; 2024 Trim.lol. All rights reserved.</p>
+      <div class="flex justify-center space-x-4 mt-2">
+        <a href="#" class="text-blue-400 hover:underline">Twitter</a>
+        <a href="#" class="text-blue-400 hover:underline">Facebook</a>
+        <a href="#" class="text-blue-400 hover:underline">Instagram</a>
+      </div>
+    </div>
+  </div>
+</footer>
+<script>
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  const copyContent = async (button) => {
+    try {
+      const text = button.getAttribute('data-url');
+
+      await navigator.clipboard.writeText(text);
+      console.log("Content copied to clipboard");
+
+      button.innerHTML =
+        'Copied <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
+      await sleep(2500);
+      button.innerHTML =
+        'Copy <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+
+</script>
+{%endblock%}
+=======
+{%extends 'base.html' %} {%block content %}
+<div
+  class="p-5 md:p-10 2xl:p-20 w-full md:w-5/6 m-3 rounded-xl flex items-center flex-col gap-3 bg-zinc-900"
+>
+  <!-- Greeting with user email -->
+  <p class="text-xl font-semibold text-white">Hello, {{ userID }}</p>
+  <div
+    class="flex flex-col justify-center items-center w-full md:flex-row md:justify-between"
+  >
+    <h1 class="text-2xl font-bold">{%block title%}Statistics{%endblock%}</h1>
+    <div class="flex gap-3 items-center">
+      <form method="post" action class="flex items-center justify-center">
+        <button
+          type="submit"
+          value="submit"
+          class="flex items-center h-full justify-center"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            fill="#fff"
+            viewBox="0 0 256 256"
+          >
+            <path
+              d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"
+            ></path>
+          </svg>
+        </button>
+      </form>
+      <a
+        href="/generateurl"
+        class="text-center bg-blue-700 hover:bg-blue-800 transition ease-in-out duration-200 text-white rounded-lg p-2 px-8"
+        >Generate a new URL</a
+      >
+    </div>
+  </div>
+  <hr class="w-full border-t-2 opacity-25 border-zinc-400" />
+  <div class="w-full h-80 overflow-x-auto overflow-y-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-zinc-400">
+      <thead
+        class="text-xs uppercase border-b border-b-zinc-700 dark:text-zinc-400"
+      >
+        <tr>
+          <th scope="col" class="px-6 py-3">Original URL</th>
+          <th scope="col" class="px-6 py-3">Shortened URL</th>
+          <th scope="col" class="px-6 py-3">Date & Time Created</th>
+          <th scope="col" class="px-6 py-3">Clicks</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for url in urls %}
+        <tr class="odd:bg-zinc-900 even:bg-zinc-800 border-zinc-700">
+          <td class="px-6 py-4 truncate max-w-96">{{url['OriginalURL']}}</td>
+          <td class="px-6 py-4 flex items-center gap-2">
+            <span class="shortened-url block max-w-80 truncate"
+              >https://trim.lol/{{url['ShortenedURL']}}</span
+            >
+            <button
+              class="copy-button text-white bg-blue-700 flex items-center gap-2 hover:bg-blue-800 p-2 rounded-lg"
+              onclick="copyContent(this)"
+              data-url="https://trim.lol/{{url['ShortenedURL']}}"
+            >
+              Copy
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                class="fill-white"
+                viewBox="0 0 256 256"
+              >
+                <path
+                  d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"
+                ></path>
+              </svg>
+            </button>
+
+            <button class="text-white bg-red-600 flex items-center gap-2 hover:bg-red-700 p-2 rounded-lg delete-button" 
+              onclick="deletecontent(this)" 
+              data-msg="{{url['ShortenedURL']}}"
+              >Delete
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-white" viewBox="0 0 256 256">
+                <path
+                  d="M216,72H184V56a16,16,0,0,0-16-16H88A16,16,0,0,0,72,56V72H40a8,8,0,0,0,0,16H56v136a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V88h16a8,8,0,0,0,0-16ZM88,56h80V72H88ZM184,224H72V88H184Z">
+                </path>
+                </svg>
+            </button>
+
+
+          </td>
+          <td class="px-6 py-4">{{url['Timestamp']}}</td>
+          <td class="px-6 py-4">{{url['Clicks']}}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+<div class="flex flex-col justify-center items-center">
+  <a
+    href="/logout"
+    class="mb-3 text-black flex gap-2 p-3 rounded-lg items-center duration-300 transition ease-in-out bg-blue-200 hover:bg-blue-300"
+    ><svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="#000"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40A8,8,0,0,0,176,88v32H112a8,8,0,0,0,0,16h64v32a8,8,0,0,0,13.66,5.66l40-40A8,8,0,0,0,229.66,122.34Z"
+      ></path></svg
+    >Logout</a
+  >
+  <p class="text-blue-200 text-center px-2">
+    <a
+      href="https://github.com/averageblank/urlshortener"
+      class="underline"
+      target="_blank"
+      >Github</a
+    >. Developed By
+    <a href="https://github.com/AvgBlank" target="_blank" class="underline"
+      >AvgBlank</a
+    >
+    and
+    <a href="https://github.com/AalokeCode" target="_blank" class="underline"
+      >AalokeCode</a
+    >
+  </p>
+</div>
+{%endblock%} {%block script %}
+<script>
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  const copyContent = async (button) => {
+    try {
+      const text = button.getAttribute("data-url");
+
+      await navigator.clipboard.writeText(text);
+      console.log("Content copied to clipboard");
+
+      button.innerHTML =
+        'Copied <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
+      await sleep(2500);
+      button.innerHTML =
+        'Copy <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" viewBox="0 0 256 256"> <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z"></path></svg>';
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  
+  async function deletecontent(button) {
+    const shortenedUrl = button.dataset.msg;
+    if(confirm(`Are you sure you want to delete https://trim.lol/ ${shortenedUrl}`)){
+    try {
+      const response = await fetch('/delete', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ shortened_url: shortenedUrl })
+      });
+
+      if (!response.ok) {
+        const message = await response.text();
+        throw new Error(message || 'An error occurred while deleting the URL.');
+      }
+
+      // Redirect to stats page on success
+      window.location.href = "{{ url_for('stats') }}";
+    } catch (error) {
+      console.error(error);
+      alert(error.message);
+    }
+  }
+  }
+
+
+
+
+</script>
+{%endblock%}