diff --git a/src/templates/index.html b/src/templates/index.html
index 58f617e..b850101 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -4,6 +4,7 @@
 <head>
     <title>Anime Search and Request Page</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='magic.css') }}">
 
 </head>
 
@@ -35,7 +36,7 @@
         <div style="margin-bottom: 1em;">
             <label>
                 <input type="checkbox" id="toggleNSFW" />
-                Show NSFW content
+                Unblur NSFW images
             </label>
             <label style="margin-left: 1em;">
                 <input type="checkbox" id="toggleNovels" checked />
@@ -44,6 +45,7 @@
 
         </div>
 
+        <button onclick="window.location.href='/requests'">View Requests</button>
     </div>
 
     {% if results %}
@@ -52,7 +54,7 @@
         {% for result in results %}
 
         <div
-            class="card {{ result.type | lower }} {% if result.in_komga %}komga{% endif %} {% if result.requested %}requested{% endif %}">
+            class="card {{ result.type | lower }}  {% if result.in_komga %}komga{% endif %} {% if result.requested %}requested{% endif %}">
 
             <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
 
@@ -64,10 +66,10 @@
 
             <p>{{ result.title }}</p>
             <div class="actions">
-                <button onclick="showInfo({{ result | tojson | safe }})" class="info">Info</button>
+                <button class="info" onclick="showInfo({{ result | tojson | safe }})">Info</button>
                 <!-- if entry has in_komga == true, do not show the request button, else show it -->
                 {% if not result.in_komga %}
-                <button onclick="sendRequest('{{ result.id }}')" class="request">Request</button>
+                <button class="request" onclick="sendRequest('{{ result.id }}')">Request</button>
                 {% endif %}
             </div>
         </div>
@@ -75,9 +77,35 @@
     </div>
     {% endif %}
 
+
+     {% if results %}
+
     <div class="results">
-        <!-- Results will be dynamically populated here -->
+        {% for result in results %}
+
+        <div
+            class="card {{ result.type | lower }}  {% if result.in_komga %}komga{% endif %} {% if result.requested %}requested{% endif %}">
+
+            <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
+
+                <img src="{{ result.image }}" alt="Cover">
+                {% if result.isAdult %}
+                <div class="adult-badge">18+</div>
+                {% endif %}
+            </div>
+
+            <p>{{ result.title }}</p>
+            <div class="actions">
+                <button class="info" onclick="showInfo({{ result | tojson | safe }})">Info</button>
+                <!-- if entry has in_komga == true, do not show the request button, else show it -->
+                {% if not result.in_komga %}
+                <button class="request" onclick="sendRequest('{{ result.id }}')">Request</button>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %}
     </div>
+    {% endif %}
 
     <!-- Info Modal -->
     <div id="infoModal" class="modal" style="display:none;">
@@ -98,6 +126,7 @@
         <p>Loading...</p>
     </div>
 
+
     <script>
         function sendRequest(item) {
             fetch("/request", {
@@ -123,6 +152,13 @@
         function closeModal() {
             document.getElementById("infoModal").style.display = "none";
         }
+        // Close when clicking outside modal content
+        window.onclick = function (event) {
+            const modal = document.getElementById("infoModal");
+            if (event.target === modal) {
+                closeModal();
+            }
+        }
 
         document.addEventListener("DOMContentLoaded", () => {
             const nsfwCheckbox = document.getElementById("toggleNSFW");
@@ -151,6 +187,15 @@
 
             fetchOptions("/api/genres", "genre");
             fetchOptions("/api/tags", "tag");
+
+            // Add classes to buttons dynamically
+            document.querySelectorAll(".actions button").forEach(button => {
+                if (button.textContent.trim() === "Info") {
+                    button.classList.add("info");
+                } else if (button.textContent.trim() === "Request") {
+                    button.classList.add("request");
+                }
+            });
         });
 
 
diff --git a/src/templates/requests.html b/src/templates/requests.html
new file mode 100644
index 0000000..46abfa7
--- /dev/null
+++ b/src/templates/requests.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Requested Manga</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='magic.css') }}">
+
+</head>
+
+<body>
+    <h1>Requested Manga</h1>
+
+    <div style="margin-bottom: 1em; text-align: center;">
+        <button onclick="window.location.reload()">Refresh</button>
+        <button onclick="window.location.href='/'">Back to Index</button>
+    </div>
+
+    {% if results %}
+
+    <div class="results">
+        {% for result in results %}
+
+        <div class="card {{ result.type | lower }} {% if result.in_komga %}komga{% else %}requested{% endif %}">
+
+            <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
+
+                <img src="{{ result.image }}" alt="Cover">
+                {% if result.isAdult %}
+                <div class="adult-badge">18+</div>
+                {% endif %}
+            </div>
+
+            <p>{{ result.title }}</p>
+            <div class="actions">
+                <button onclick="showInfo({{ result | tojson | safe }})" class="info">Info</button>
+                <!-- if entry has in_komga == true, do not show the request button, else show it -->
+
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if requests %}
+
+    <div class="results">
+        {% for request in requests %}
+
+        <div class="card {{ request.type | lower }} {% if request.in_komga %}komga{% else %}requested{% endif %}">
+            <div class="image-container {{ 'nsfw' if request.isAdult else '' }}">
+
+                <img src="{{ request.image }}" alt="Cover">
+                {% if request.isAdult %}
+                <div class="adult-badge">18+</div>
+                {% endif %}
+            </div>
+
+            <p>{{ request.title }}</p>
+            <div class="actions">
+                <button onclick="showInfo({{ request | tojson | safe }})" class="info">Info</button>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <p>No requests found.</p>
+    {% endif %}
+
+
+    <div id="infoModal" class="modal" style="display:none;">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2 id="modalTitle"></h2>
+            <p><strong>Status:</strong> <span id="modalStatus"></span></p>
+            <p><strong>Type:</strong> <span id="modalType"></span></p>
+            <p><strong>Genres:</strong> <span id="modalGenres"></span></p>
+            <p><strong>Tags:</strong> <span id="modalTags"></span></p>
+            <p><strong>Adult Content:</strong> <span id="modalAdult"></span></p>
+            <p><strong>Description:</strong></p>
+            <p id="modalDescription"></p>
+        </div>
+    </div>
+
+    <script>
+        function showInfo(data) {
+            const modal = document.getElementById("infoModal");
+            document.getElementById("modalTitle").textContent = data.title;
+            document.getElementById("modalStatus").textContent = data.status || "Unknown";
+            document.getElementById("modalType").textContent = data.type || "Unknown";
+            document.getElementById("modalGenres").textContent = (data.genres || []).join(", ");
+            document.getElementById("modalTags").textContent = (data.tags || []).join(", ");
+            document.getElementById("modalAdult").textContent = data.isAdult ? "Yes" : "No";
+            document.getElementById("modalDescription").innerHTML = data.description || "No description available.";
+            modal.style.display = "block";
+        }
+
+        function closeModal() {
+            document.getElementById("infoModal").style.display = "none";
+        }
+
+        // Close when clicking outside modal content
+        window.onclick = function (event) {
+            const modal = document.getElementById("infoModal");
+            if (event.target === modal) {
+                closeModal();
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
