diff --git a/apps/frontend/src/pages/blog.astro b/apps/frontend/src/pages/blog.astro
index 2ca21d5..3c14df5 100644
--- a/apps/frontend/src/pages/blog.astro
+++ b/apps/frontend/src/pages/blog.astro
@@ -209,9 +209,6 @@ function timeAgo(dateStr: string): string {
                         <span>{timeAgo(page.updatedAt)}</span>
                       </div>
                     </div>
-                    <a href={pageUrl} target="_blank" class="text-indigo-600 hover:text-indigo-800 font-bold flex items-center gap-2 transition-colors">
-                      View on Wiki <span>→</span>
-                    </a>
                   </div>
 
                   <h2 class="text-3xl md:text-4xl font-black text-gray-900 mb-8 leading-tight">
@@ -222,7 +219,7 @@ function timeAgo(dateStr: string): string {
                     <div class="wiki-content prose prose-lg max-w-none text-gray-700 leading-relaxed" set:html={page.render} />
                   ) : (
                     <div class="text-gray-600 text-lg leading-relaxed whitespace-pre-wrap">
-                      {page.description || "No preview available. Click 'View on Wiki' to read the full post."}
+                      {page.description || "No preview available for this post."}
                     </div>
                   )}
                 </div>
diff --git a/apps/frontend/src/pages/catalog.astro b/apps/frontend/src/pages/catalog.astro
index 97cb72b..9038c6a 100644
--- a/apps/frontend/src/pages/catalog.astro
+++ b/apps/frontend/src/pages/catalog.astro
@@ -58,48 +58,86 @@ const softwares = json.softwares;
             <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) => (
+            
+            <div class="mt-4">
+              {/* Desktop Table View */}
+              <div class="hidden sm:block overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
                     <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>
+                      <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>
-                  ))}
-                </tbody>
-              </table>
+                  </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>
+
+              {/* Mobile Stacked View */}
+              <div class="sm:hidden space-y-4">
+                {releases.map((release) => (
+                  <div class="border border-gray-100 rounded-lg p-4 bg-gray-50 shadow-sm">
+                    <div class="flex flex-col mb-3 border-b border-gray-200 pb-2">
+                      <span class="font-bold text-gray-900 text-lg break-words">v{release.version}</span>
+                      <span class="text-xs text-gray-500 mt-1">{new Date(release.CreatedAt).toLocaleDateString('en-US')}</span>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                      {release.htmlFolderPath ? (
+                        <a href={BASE + release.htmlFolderPath} target="_blank" class="flex items-center justify-center bg-purple-600 text-white py-2 px-3 rounded text-sm font-bold shadow-sm">▶ Play</a>
+                      ) : (
+                        <span class="flex items-center justify-center bg-gray-200 text-gray-400 py-2 px-3 rounded text-sm font-bold cursor-not-allowed">▶ Play</span>
+                      )}
+                      {release.cartridgePath ? (
+                        <a href={BASE + release.cartridgePath} target="_blank" class="flex items-center justify-center bg-blue-600 text-white py-2 px-3 rounded text-sm font-bold shadow-sm">Download</a>
+                      ) : (
+                        <span class="flex items-center justify-center bg-gray-200 text-gray-400 py-2 px-3 rounded text-sm font-bold cursor-not-allowed">Download</span>
+                      )}
+                      {release.sourcePath ? (
+                        <a href={BASE + release.sourcePath} target="_blank" class="flex items-center justify-center bg-green-600 text-white py-2 px-3 rounded text-sm font-bold shadow-sm">Source</a>
+                      ) : (
+                        <span class="flex items-center justify-center bg-gray-200 text-gray-400 py-2 px-3 rounded text-sm font-bold cursor-not-allowed">Source</span>
+                      )}
+                      {release.docsFolderPath ? (
+                        <a href={BASE + release.docsFolderPath} target="_blank" class="flex items-center justify-center bg-yellow-600 text-white py-2 px-3 rounded text-sm font-bold shadow-sm">Docs</a>
+                      ) : (
+                        <span class="flex items-center justify-center bg-gray-200 text-gray-400 py-2 px-3 rounded text-sm font-bold cursor-not-allowed">Docs</span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
           </details>
         </div>