diff --git a/static/assets/404.webp b/static/assets/404.webp
new file mode 100644
index 0000000..d5b3942
Binary files /dev/null and b/static/assets/404.webp differ
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..92b868c
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block title %} Not Found {% endblock title %}
+
+{% block content %}
+<div class="flex flex-col items-center justify-center text-center min-h-[60vh] space-y-10">
+    <h1 class="text-5xl md:text-7xl font-extrabold text-white drop-shadow-lg">
+        404 Not Found
+    </h1>
+    <img src="{{ get_url(path='assets/404.webp') | safe }}?v={{ get_hash(path='assets/404.webp') }}" class="w-80 md:w-[36rem] rounded-2xl" alt="404 Image" />
+    <a href="/" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition">
+        Go Back Home
+    </a>
+</div>
+{% endblock content %}
diff --git a/templates/base.html b/templates/base.html
index 05a3651..ffb412f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,7 +6,7 @@
         <title>{% block title %}{% endblock title %} - Coolans</title>
         <link
             rel="stylesheet"
-            href="{{ get_url(path='main.css') | safe }}"
+            href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}"
         />
         <script>
             // Mobile menu toggle
@@ -27,7 +27,7 @@
         <div class="fixed inset-0 bg-black/70 -z-5"></div>
 
         <!-- Top Navigation -->
-        <nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4">
+        <nav class="sticky top-0 z-50 bg-transparent backdrop-blur py-4">
             <div
                 class="container mx-auto px-4 flex justify-between items-center"
             >
@@ -100,8 +100,7 @@
                 <div
                     class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
                 >
-                    &copy; {{ now() | date(format="%Y") }} Coolans. All rights
-                    reserved.
+                    &copy; {{ now() | date(format="%Y") }} Coolans. Exhausted Presevance. No Rights Reserved.
                 </div>
             </div>
         </footer>
diff --git a/templates/index.html b/templates/index.html
index 9a130cb..58a799c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,8 @@
-{% extends "base.html" %} {% block title %}Welcome{% endblock title %} {% block
-content %}
+{% extends "base.html" %}
+
+{% block title %}Welcome{% endblock title %}
+
+{% block content %}
 <h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
     Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin.
 </h1>
@@ -86,41 +89,28 @@ content %}
 </div>
 
 <script>
-    function decodeAndFillLinks() {
-        const links = document.querySelectorAll(".obfuscated-link");
-        links.forEach((link) => {
-            const encoded = link.getAttribute("data-encoded");
-            if (!encoded) return;
+    const links = document.querySelectorAll(".obfuscated-link");
+    links.forEach((link) => {
+        const encoded = link.getAttribute("data-encoded");
+        if (!encoded) return;
 
-            const decoded = atob(encoded);
+        const decoded = atob(encoded);
 
-            // Determine if email, phone, or URL by simple checks:
-            if (decoded.includes("@") && !decoded.startsWith('http')) {
-                // Email
-                link.href = `mailto:${decoded}`;
-                link.textContent = decoded;
-                return;
-            }
-            if (decoded.startsWith('http')) {
-                // URL - set href to full URL,
-                // but visible text to last segment after last '/'
-                link.href = decoded;
+        // Determine if email, phone, or URL by simple checks:
+        if (decoded.includes("@") && !decoded.startsWith('http')) {
+            // Email
+            link.href = `mailto:${decoded}`;
+            link.textContent = decoded;
+            return;
+        }
 
-                // Remove trailing slash if any
-                const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded;
+        link.href = decoded;
 
-                // Extract last segment after '/'
-                const parts = trimmed.split('/');
-                const lastSegment = parts[parts.length - 1] || decoded;
-                link.textContent = lastSegment;
-            } else {
-                // Default fallback — just text
-                link.textContent = decoded;
-            }
-        });
-    }
-
-    document.addEventListener("DOMContentLoaded", decodeAndFillLinks);
+        const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded;
+        const parts = trimmed.split('/');
+        const lastSegment = parts[parts.length - 1] || decoded;
+        link.textContent = lastSegment;
+    });
 </script>
 
 {% endblock content %}