diff --git a/Middleware/src/main/resources/static/home.html b/Middleware/src/main/resources/static/home.html
index b7e0e686..f0bbda49 100644
--- a/Middleware/src/main/resources/static/home.html
+++ b/Middleware/src/main/resources/static/home.html
@@ -1,131 +1,467 @@
-<!-- This is the landing page for the CITYdata which provides a brief overview of the application
-along with some API routes and Examples showing how to test them.
+<!-- This is the landing page for the CITYdata which provides a brief overview of the application along with some API routes and Examples showing how to test them.
      Author: Rushin D. Makwana
-     Date: 2025-09-05 -->
+     Date: 2025-09-05 
+	 
+	 Update: Updated landing page
+	 Author: Sikandar Ejaz
+	 Since: 2006-06-04 -->
 
-
-<!DOCTYPE html>
+	 <!DOCTYPE html>
 	 <html lang="en">
 	 <head>
 	     <meta charset="UTF-8">
-	     <title>CITYdata Landing Page</title>
-	     <!-- Use absolute path from web root -->
-	     <link rel="stylesheet" href="./assets/styles.css">
+	     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	     <title>CITYdata Middleware</title>
+
+	     <style>
+	         * {
+	             margin: 0;
+	             padding: 0;
+	             box-sizing: border-box;
+	         }
+
+	         body {
+	             font-family: "Segoe UI", Arial, sans-serif;
+	             background: linear-gradient(135deg, #f5f7fa 0%, #e4ecfb 100%);
+	             color: #2c3e50;
+	             min-height: 100vh;
+	         }
+
+	         .container {
+	             max-width: 1200px;
+	             margin: auto;
+	             padding: 40px 20px;
+	         }
+
+	         .hero {
+	             text-align: center;
+	             padding: 40px 20px;
+	         }
+
+	         .logo {
+	             max-width: 220px;
+	             margin-bottom: 25px;
+	         }
+
+	         .hero h1 {
+	             font-size: 3rem;
+	             color: #1f3c88;
+	             margin-bottom: 20px;
+	         }
+
+	         .hero p {
+	             max-width: 900px;
+	             margin: auto;
+	             line-height: 1.8;
+	             font-size: 1.1rem;
+	             color: #555;
+	         }
+
+	         .hero a {
+	             color: #1f3c88;
+	             font-weight: 600;
+	             text-decoration: none;
+	         }
+
+	         .hero a:hover {
+	             text-decoration: underline;
+	         }
+
+	         .button-group {
+	             display: flex;
+	             justify-content: center;
+	             gap: 20px;
+	             margin-top: 40px;
+	             flex-wrap: wrap;
+	         }
+
+	         .btn {
+	             text-decoration: none;
+	             padding: 14px 28px;
+	             border-radius: 10px;
+	             font-weight: 600;
+	             transition: 0.3s;
+	         }
+
+	         .btn-primary {
+	             background: #1f3c88;
+	             color: white;
+	         }
+
+	         .btn-primary:hover {
+	             background: #17306e;
+	             transform: translateY(-2px);
+	         }
+
+	         .btn-secondary {
+	             background: white;
+	             color: #1f3c88;
+	             border: 2px solid #1f3c88;
+	         }
+
+	         .btn-secondary:hover {
+	             background: #1f3c88;
+	             color: white;
+	             transform: translateY(-2px);
+	         }
+
+	         .section {
+	             margin-top: 70px;
+	         }
+
+	         .section-title {
+	             text-align: center;
+	             font-size: 2rem;
+	             color: #1f3c88;
+	             margin-bottom: 35px;
+	         }
+
+	         .routes-grid {
+	             display: grid;
+	             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	             gap: 20px;
+	         }
+
+	         .route-card {
+	             background: white;
+	             border-radius: 15px;
+	             padding: 25px;
+	             box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+	             transition: all 0.3s ease;
+	             cursor: pointer;
+	         }
+
+	         .route-card:hover {
+	             transform: translateY(-5px);
+	             box-shadow: 0 15px 35px rgba(0,0,0,0.12);
+	         }
+
+	         .route-method {
+	             display: inline-block;
+	             background: #1f3c88;
+	             color: white;
+	             padding: 6px 12px;
+	             border-radius: 6px;
+	             font-size: 0.85rem;
+	             font-weight: bold;
+	             margin-bottom: 12px;
+	         }
+
+	         .route-path {
+	             font-family: Consolas, monospace;
+	             font-size: 1rem;
+	             margin-bottom: 10px;
+	             color: #222;
+	         }
+
+	         .route-desc {
+	             color: #666;
+	             line-height: 1.5;
+	         }
+
+	         .footer {
+	             text-align: center;
+	             margin-top: 80px;
+	             padding: 30px;
+	             color: #666;
+	         }
+
+	         .footer a {
+	             color: #1f3c88;
+	             text-decoration: none;
+	             font-weight: 600;
+	         }
+
+	         .footer a:hover {
+	             text-decoration: underline;
+	         }
+
+	         /* Modal */
+
+	         .modal {
+	             display: none;
+	             position: fixed;
+	             z-index: 9999;
+	             left: 0;
+	             top: 0;
+	             width: 100%;
+	             height: 100%;
+	             background: rgba(0,0,0,0.65);
+	         }
+
+	         .modal-content {
+	             background: white;
+	             width: 85%;
+	             max-width: 1000px;
+	             margin: 4% auto;
+	             padding: 25px;
+	             border-radius: 15px;
+	             box-shadow: 0 15px 40px rgba(0,0,0,0.25);
+	         }
+
+	         .modal-header {
+	             display: flex;
+	             justify-content: space-between;
+	             align-items: center;
+	             margin-bottom: 15px;
+	         }
+
+	         .close {
+	             font-size: 32px;
+	             cursor: pointer;
+	             color: #777;
+	         }
+
+	         .close:hover {
+	             color: black;
+	         }
+
+	         #statusBadge {
+	             background: #1f3c88;
+	             color: white;
+	             padding: 6px 12px;
+	             border-radius: 8px;
+	             font-size: 0.9rem;
+	         }
+
+	         #responseBox {
+	             margin-top: 15px;
+	             background: #f7f8fa;
+	             border: 1px solid #ddd;
+	             border-radius: 10px;
+	             padding: 20px;
+	             max-height: 600px;
+	             overflow: auto;
+	             white-space: pre-wrap;
+	             font-family: Consolas, Monaco, monospace;
+	             font-size: 14px;
+	         }
+
+	         @media (max-width: 768px) {
+
+	             .hero h1 {
+	                 font-size: 2.2rem;
+	             }
+
+	             .button-group {
+	                 flex-direction: column;
+	                 align-items: center;
+	             }
+
+	             .btn {
+	                 width: 250px;
+	                 text-align: center;
+	             }
+
+	             .modal-content {
+	                 width: 95%;
+	             }
+	         }
+	     </style>
 	 </head>
+
 	 <body>
+
 	 <div class="container">
-	     <!-- Use absolute path from web root -->
-	     <img src="./assets/logo.png" alt="CITYdata Logo" class="logo">
-    <h1>Welcome to CITYdata</h1>
-    <p class="intro">
-        CITYdata, as a part of the <a href="https://www.concordia.ca/research/cities-institute/initiatives/tools4cities.html" target="_blank">TOOLS4CITIES</a> tool suite, is a powerful middleware application for accessing and analyzing city-related data from different sources. <br> CITYData enables users to perform operations on data via the abstractions of Runner and Producer.
-    </p>
-
-    <div class="examples">
-        <h2>API Examples</h2>
-        <ul>
-            <li>
-                <b>List all operations:</b>
-                <code>GET /operations/list</code>
-            </li>
-            <li>
-                <b>List all producers:</b>
-                <code>GET /producers/list</code>
-            </li>
-            <li>
-                <b>Apply (sync):</b>
-                <code>POST /apply/sync</code>
-            </li>
-            <li>
-                <b>Apply (async):</b>
-                <code>POST /apply/async</code>
-            </li>
-        </ul>
-    </div>
-    <h3>Python Examples</h3>
-
-    <!-- HttpGetAsync.py -->
-    <div class="code-block">
-        <div class="code-header">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
-            <span class="filename">HttpGetAsync.py</span>
-            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
-        </div>
-        <pre><code>
-import json
-import requests
-
-if __name__ == "__main__":
-    base_url = "https://ngci.encs.concordia.ca/citydata"
-    route = "/apply/async/"
-    runnerId = "1da07690-e42d-4944-b3fb-030bd2aef7be"
-
-    res = requests.get(url=base_url + route + runnerId)
-    print(res.text)
-            </code></pre>
-    </div>
-
-    <!-- HttpPostAsync.py -->
-    <div class="code-block">
-        <div class="code-header">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
-            <span class="filename">HttpPostAsync.py</span>
-            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
-        </div>
-        <pre><code>
-import json
-import requests
-
-if __name__ == "__main__":
-    base_url = "https://ngci.encs.concordia.ca/citydata"
-    route = "/apply/async"
-    data = json.dumps({
-        "use": "ca.concordia.encs.citydata.producers.EnergyConsumptionProducer",
-        "withParams": [
-            {
-                "name": "city",
-                "value": "montreal"
-            }
-        ],
-        "apply": [
-            {
-                "name": "ca.concordia.encs.citydata.operations.StringFilterOperation",
-                "withParams": [
-                    {
-                        "name": "filterBy",
-                        "value": "09:45:00"
-                    }
-                ]
-            }
-        ]
-    })
-    res = requests.post(url=base_url + route, data=data)
-    print(res.text)
-            </code></pre>
-    </div>
-</div>
-
-    <div style="text-align: center;">
-    For more info, visit our
-    <a href="https://github.com/ptidejteam/citydata/blob/master/Middleware/README.md" target="_blank">
-        GitHub page
-    </a>
-</div>
-</div>
-
-<script>
-    function copyCode(button) {
-        const codeBlock = button.closest('.code-block').querySelector('pre code');
-        const text = codeBlock.innerText;
-        navigator.clipboard.writeText(text).then(() => {
-            button.innerText = "Copied!";
-            setTimeout(() => button.innerText = "Copy", 2000);
-        });
-    }
-</script>
-</body>
-</html>
+
+	     <section class="hero">
+
+	         <img src="./assets/logo.png"
+	              alt="CITYdata Logo"
+	              class="logo">
+
+	         <h1>Welcome to CITYdata</h1>
+
+	         <p>
+	             CITYdata, part of the
+	             <a href="https://www.concordia.ca/research/cities-institute/initiatives/tools4cities.html"
+	                target="_blank">
+	                 TOOLS4CITIES
+	             </a>
+	             tool suite, is a middleware platform for accessing, integrating, and analyzing city-related data from diverse sources.
+	             Through the abstractions of <strong>Producers</strong> and <strong>Runners</strong>, CITYdata enables users to retrieve,
+	             transform, and process urban datasets in a scalable and extensible manner.
+	         </p>
+
+	         <div class="button-group">
+
+	             <a href="https://github.com/ptidejteam/tools4cities-CITYdata/tree/master/Middleware/docs/examples/queries"
+	                target="_blank"
+	                class="btn btn-secondary">
+	                 Query Examples
+	             </a>
+
+	             <a href="https://github.com/ptidejteam/tools4cities-CITYdata/tree/master/Middleware/docs/examples/code"
+	                target="_blank"
+	                class="btn btn-secondary">
+	                 Code Examples
+	             </a>
+
+	         </div>
+
+	     </section>
+
+	     <section class="section">
+
+	         <h2 class="section-title">
+	             Public API Routes
+	         </h2>
+
+	         <div class="routes-grid">
+
+	             <div class="route-card"
+	                  onclick="callApi('/operations/list')">
+
+	                 <div class="route-method">GET</div>
+
+	                 <div class="route-path">
+	                     🔗 /operations/list
+	                 </div>
+
+	                 <div class="route-desc">
+	                     Click to list all available operations.
+	                 </div>
+
+	             </div>
+
+	             <div class="route-card"
+	                  onclick="callApi('/producers/list')">
+
+	                 <div class="route-method">GET</div>
+
+	                 <div class="route-path">
+	                     🔗 /producers/list
+	                 </div>
+
+	                 <div class="route-desc">
+	                     Click to list all available producers.
+	                 </div>
+
+	             </div>
+
+	             <div class="route-card"
+	                  onclick="callApi('/api/datasets/list')">
+
+	                 <div class="route-method">GET</div>
+
+	                 <div class="route-path">
+	                     🔗 /api/datasets/list
+	                 </div>
+
+	                 <div class="route-desc">
+	                     Click to list all available datasets.
+	                 </div>
+
+	             </div>
+
+	         </div>
+
+	     </section>
+
+	     <div class="footer">
+
+	         Learn more about CITYdata on our
+
+	         <a href="https://github.com/ptidejteam/citydata/blob/master/Middleware/README.md"
+	            target="_blank">
+	             GitHub Repository
+	         </a>
+
+	     </div>
+
+	 </div>
+
+	 <!-- Modal -->
+
+	 <div id="apiModal" class="modal">
+
+	     <div class="modal-content">
+
+	         <div class="modal-header">
+
+	             <h2>API Response</h2>
+
+	             <div>
+	                 <span id="statusBadge">Loading...</span>
+	                 <span class="close"
+	                       onclick="closeModal()">
+	                     &times;
+	                 </span>
+	             </div>
+
+	         </div>
+
+	         <pre id="responseBox">Loading...</pre>
+
+	     </div>
+
+	 </div>
+
+	 <script>
+
+	 async function callApi(route) {
+
+	     const modal = document.getElementById("apiModal");
+	     const responseBox = document.getElementById("responseBox");
+	     const statusBadge = document.getElementById("statusBadge");
+
+	     modal.style.display = "block";
+
+	     responseBox.textContent = "Loading response...";
+	     statusBadge.textContent = "Loading...";
+
+	     try {
+
+	         const response = await fetch(route);
+
+	         statusBadge.textContent =
+	             response.status + " " + response.statusText;
+
+	         const text = await response.text();
+
+	         try {
+
+	             const json = JSON.parse(text);
+
+	             responseBox.textContent =
+	                 JSON.stringify(json, null, 4);
+
+	         } catch {
+
+	             responseBox.textContent = text;
+	         }
+
+	     } catch (error) {
+
+	         statusBadge.textContent = "ERROR";
+
+	         responseBox.textContent =
+	             "Request failed:\n\n" + error.message;
+	     }
+	 }
+
+	 function closeModal() {
+
+	     document.getElementById("apiModal").style.display = "none";
+	 }
+
+	 window.onclick = function(event) {
+
+	     const modal = document.getElementById("apiModal");
+
+	     if (event.target === modal) {
+	         closeModal();
+	     }
+	 };
+
+	 document.addEventListener("keydown", function(event) {
+
+	     if (event.key === "Escape") {
+	         closeModal();
+	     }
+	 });
+
+	 </script>
+
+	 </body>
+	 </html>
\ No newline at end of file
