diff --git a/apps/frontend/src/pages/catalog.astro b/apps/frontend/src/pages/catalog.astro
index cd266a3..8e1e54a 100644
--- a/apps/frontend/src/pages/catalog.astro
+++ b/apps/frontend/src/pages/catalog.astro
@@ -14,9 +14,9 @@ const softwares = json.softwares;
     <p class="text-xl max-w-xl mx-auto">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
   </header>
 
-  <main class="max-w-6xl mx-auto py-12 px-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-    {softwares.map(({ software, webPlayableRelease }) => (
-      <div class="bg-white shadow-lg rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
+  <main class="max-w-6xl mx-auto py-12 px-4 grid grid-cols-1 gap-8">
+    {softwares.map(({ software, releases, latestRelease }) => (
+      <div class="bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
         <div class="p-6">
           <h2 class="text-2xl font-semibold mb-2">{software.title}</h2>
           <p class="text-gray-600 mb-4">{software.desc}</p>
@@ -24,12 +24,82 @@ const softwares = json.softwares;
             <div>Author: {software.author}</div>
             <div>Platform: {software.platform}</div>
           </div>
-          {webPlayableRelease?.htmlFolderPath && (
-            <a href={BASE + webPlayableRelease.htmlFolderPath} target="_blank"
-               class="inline-block bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
-              ▶ Play in Browser
-            </a>
+
+          {/* New section for latest release buttons */}
+          {latestRelease && (
+            <div class="absolute top-4 right-4 flex gap-1 z-10">
+                {latestRelease.htmlFolderPath ? (
+                  <a href={BASE + latestRelease.htmlFolderPath} target="_blank" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-1 px-2 rounded-lg text-sm transition-colors">▶ Play</a>
+                ) : (
+                  <span class="inline-block bg-gray-200 text-gray-400 font-bold py-1 px-2 rounded-lg text-sm cursor-not-allowed">▶ Play</span>
+                )}
+                {latestRelease.cartridgePath ? (
+                  <a href={BASE + latestRelease.cartridgePath} target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded-lg text-sm transition-colors">Download</a>
+                ) : (
+                  <span class="inline-block bg-gray-200 text-gray-400 font-bold py-1 px-2 rounded-lg text-sm cursor-not-allowed">Download</span>
+                )}
+                {latestRelease.sourcePath ? (
+                  <a href={BASE + latestRelease.sourcePath} target="_blank" class="inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-1 px-2 rounded-lg text-sm transition-colors">Source</a>
+                ) : (
+                  <span class="inline-block bg-gray-200 text-gray-400 font-bold py-1 px-2 rounded-lg text-sm cursor-not-allowed">Source</span>
+                )}
+                {latestRelease.docsFolderPath ? (
+                  <a href={BASE + latestRelease.docsFolderPath} target="_blank" class="inline-block bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded-lg text-sm transition-colors">Docs</a>
+                ) : (
+                  <span class="inline-block bg-gray-200 text-gray-400 font-bold py-1 px-2 rounded-lg text-sm cursor-not-allowed">Docs</span>
+                )}
+            </div>
           )}
+          {/* End new section */}
+
+          <details class="mt-4">
+            <summary class="cursor-pointer font-semibold text-purple-600 hover:text-purple-800">
+              Releases ({releases.length})
+            </summary>
+            <div class="overflow-x-auto mt-2">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
+                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  {releases.map((release) => (
+                    <tr>
+                      <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900">{release.version}</td>
+                      <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-500">
+                        {new Date(release.CreatedAt).toLocaleDateString('en-US')}
+                      </td>
+                      <td class="px-3 py-2 whitespace-nowrap text-right text-sm font-medium">
+                        {release.htmlFolderPath ? (
+                          <a href={BASE + release.htmlFolderPath} target="_blank" class="text-purple-600 hover:text-purple-900 mr-2">▶ Play</a>
+                        ) : (
+                          <span class="text-gray-400 cursor-not-allowed mr-2">▶ Play</span>
+                        )}
+                        {release.cartridgePath ? (
+                          <a href={BASE + release.cartridgePath} target="_blank" class="text-blue-600 hover:text-blue-900 mr-2">Download</a>
+                        ) : (
+                          <span class="text-gray-400 cursor-not-allowed mr-2">Download</span>
+                        )}
+                        {release.sourcePath ? (
+                          <a href={BASE + release.sourcePath} target="_blank" class="text-green-600 hover:text-green-900 mr-2">Source</a>
+                        ) : (
+                          <span class="text-gray-400 cursor-not-allowed mr-2">Source</span>
+                        )}
+                        {release.docsFolderPath ? (
+                          <a href={BASE + release.docsFolderPath} target="_blank" class="text-yellow-600 hover:text-yellow-900">Docs</a>
+                        ) : (
+                          <span class="text-gray-400 cursor-not-allowed">Docs</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </details>
         </div>
       </div>
     ))}