diff --git a/src/static/rss.js b/src/static/rss.js
new file mode 100644
index 0000000..ed11dd8
--- /dev/null
+++ b/src/static/rss.js
@@ -0,0 +1,60 @@
+async function loadRSS() {
+    try {
+        const response = await fetch("/rss");
+        const items = await response.json();
+
+        const container = document.getElementById("rss-feed");
+        const showLegacyContainer = document.getElementById("show-legacy-container");
+        const showLegacyBtn = document.getElementById("show-legacy-btn");
+
+        if (!items.length) {
+            container.innerHTML = "<p>No releases found.</p>";
+            return;
+        }
+
+        let html = "<ul class='release-list'>";
+        
+        // Show only the first 2 releases initially
+        let visibleItems = 2;
+        let hasMoreItems = items.length > visibleItems;
+        
+        items.forEach((item, index) => {
+            const isHidden = index >= visibleItems;
+            html += `
+                <li class="release-item ${isHidden ? 'legacy-release' : ''}" 
+                    style="${isHidden ? 'display: none;' : ''}">
+                    <a href="${item.link}" target="_blank">${item.title}</a>
+                    <div class="pub-date">${item.pubDate ? new Date(item.pubDate).toLocaleString() : ""}</div>
+                    <div class="author">by ${item.author || "Unknown"}</div>
+                </li>
+            `;
+        });
+        html += "</ul>";
+
+        container.innerHTML = html;
+
+        // Show the "Show Legacy Releases" button if there are more than 2 items
+        if (hasMoreItems) {
+            showLegacyContainer.style.display = 'block';
+            
+            let showingLegacy = false;
+            showLegacyBtn.addEventListener('click', function() {
+                showingLegacy = !showingLegacy;
+                
+                const legacyItems = container.querySelectorAll('.legacy-release');
+                legacyItems.forEach(item => {
+                    item.style.display = showingLegacy ? 'block' : 'none';
+                });
+                
+                showLegacyBtn.textContent = showingLegacy ? 
+                    'Hide Legacy Releases' : 'Show Legacy Releases';
+            });
+        }
+
+    } catch (err) {
+        console.error("Failed to load RSS:", err);
+        document.getElementById("rss-feed").innerHTML = "<p>Failed to load feed.</p>";
+    }
+    }
+
+    document.addEventListener("DOMContentLoaded", loadRSS);
\ No newline at end of file
diff --git a/src/static/stylesheet.css b/src/static/stylesheet.css
index af65442..a515a5f 100644
--- a/src/static/stylesheet.css
+++ b/src/static/stylesheet.css
@@ -546,3 +546,74 @@ body {
     outline: 2px solid #00ff88;
     outline-offset: 2px;
 }
+
+/* moved from html */
+ul.release-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+ul.release-list li {
+    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+    padding: 1rem 1.5rem;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+ul.release-list li:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.7);
+}
+
+ul.release-list a {
+    font-weight: 600;
+    font-size: 1.1rem;
+    font-style: italic;
+    color: #00f683;
+    text-decoration: none;
+}
+
+ul.release-list a:hover {
+    text-decoration: underline;
+}
+
+.pub-date {
+    font-size: 0.85rem;
+    color: #a0a0a0;
+    margin-top: 0.25rem;
+}
+
+.author {
+    font-size: 0.75rem;
+    color: #7a7a7a;
+    margin-top: 0.25rem;
+    margin-bottom: 0.5rem;
+}
+
+.release-content {
+    font-size: 0.9rem;
+    color: #c0c0c0;
+    line-height: 1.4;
+}
+.laptopimg:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 480px) {
+    .laptopimg {
+        margin-bottom: 1rem !important;
+    }
+}
+
+/* Ensure images are responsive and maintain aspect ratio */
+.laptopimg {
+    max-width: 100%;
+    object-fit: contain;
+}
\ No newline at end of file
diff --git a/src/templates/chat.html b/src/templates/chat.html
index cc8e32b..df1bc31 100644
--- a/src/templates/chat.html
+++ b/src/templates/chat.html
@@ -10,8 +10,10 @@
     <link rel="stylesheet" href="../static/stylesheet.css">
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
     <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
+    <!-- Everything Locally Hosted ( javascript files for frontend / client encryption )-->
     <script src="{{ url_for('static', filename='script.js') }}"></script>
-    <scrpt src="{{ url_for('static', filename='frontend.js') }}"></script>
+    <script src="{{ url_for('static', filename='frontend.js') }}"></script>
+    <script src="{{ url_for("static", filename="rss.js") }}" async></script>
 </head>
 <body style="overflow-y: auto;">
     <div class="chat-container">
@@ -107,116 +109,15 @@
                             <div id="rss-feed" style="padding: 1rem; color: #ccc;">
                                 <p>Loading release notes...</p>
                             </div>
+                            <div id="show-legacy-container" style="display: none; text-align: center; margin-top: 1rem;">
+                                <button id="show-legacy-btn" class="btn" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
+                                    Show Legacy Releases
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <script async>
-                async function loadRSS() {
-                    try {
-                        const response = await fetch("/rss");
-                        const items = await response.json();
-
-                        const container = document.getElementById("rss-feed");
-
-                        if (!items.length) {
-                            container.innerHTML = "<p>No releases found.</p>";
-                            return;
-                        }
-
-                        let html = "<ul class='release-list'>";
-                        items.forEach(item => {
-                            html += `
-                                <li>
-                                    <a href="${item.link}" target="_blank">${item.title}</a>
-                                    <div class="pub-date">${item.pubDate ? new Date(item.pubDate).toLocaleString() : ""}</div>
-                                    <div class="author">by ${item.author || "Unknown"}</div>
-                                </li>
-                            `;
-                        });
-                        html += "</ul>";
-
-                        container.innerHTML = html;
-
-                    } catch (err) {
-                        console.error("Failed to load RSS:", err);
-                        document.getElementById("rss-feed").innerHTML = "<p>Failed to load feed.</p>";
-                    }
-                }
-
-                document.addEventListener("DOMContentLoaded", loadRSS);
-            </script>
-            <style>
-                  ul.release-list {
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 1rem;
-                }
-
-                ul.release-list li {
-                    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
-                    border-radius: 12px;
-                    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
-                    padding: 1rem 1.5rem;
-                    transition: transform 0.2s, box-shadow 0.2s;
-                }
-
-                ul.release-list li:hover {
-                    transform: translateY(-4px);
-                    box-shadow: 0 8px 20px rgba(0,0,0,0.7);
-                }
-
-                ul.release-list a {
-                    font-weight: 600;
-                    font-size: 1.1rem;
-                    font-style: italic;
-                    color: #00f683;
-                    text-decoration: none;
-                }
-
-                ul.release-list a:hover {
-                    text-decoration: underline;
-                }
-
-                .pub-date {
-                    font-size: 0.85rem;
-                    color: #a0a0a0;
-                    margin-top: 0.25rem;
-                }
-
-                .author {
-                    font-size: 0.75rem;
-                    color: #7a7a7a;
-                    margin-top: 0.25rem;
-                    margin-bottom: 0.5rem;
-                }
-
-                .release-content {
-                    font-size: 0.9rem;
-                    color: #c0c0c0;
-                    line-height: 1.4;
-                }
-                .laptopimg:hover {
-                    transform: translateY(-5px);
-                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-                }
-                
-                /* Responsive adjustments for smaller screens */
-                @media (max-width: 480px) {
-                    .laptopimg {
-                        margin-bottom: 1rem !important;
-                    }
-                }
-                
-                /* Ensure images are responsive and maintain aspect ratio */
-                .laptopimg {
-                    max-width: 100%;
-                    object-fit: contain;
-                }
-            </style>
         </div>
 
         <!-- Chat Screen -->