diff --git a/DysonNetwork.Zone/Pages/Posts.cshtml b/DysonNetwork.Zone/Pages/Posts.cshtml
index 6cec415..f938c8d 100644
--- a/DysonNetwork.Zone/Pages/Posts.cshtml
+++ b/DysonNetwork.Zone/Pages/Posts.cshtml
@@ -73,7 +73,43 @@
             {
                 <div class="flex justify-center mt-8">
                     <div class="join">
-                        @for (var idx = 1; idx <= Model.TotalPages; idx++)
+                        @{
+                            var maxPagesToShow = 5; // e.g., 2 before, current, 2 after
+                            var startPage = Math.Max(1, Model.CurrentPage - (maxPagesToShow / 2));
+                            var endPage = Math.Min(Model.TotalPages, Model.CurrentPage + (maxPagesToShow / 2));
+
+                            // Adjust startPage and endPage to ensure exactly maxPagesToShow are shown if possible
+                            if (endPage - startPage + 1 < maxPagesToShow)
+                            {
+                                if (startPage == 1)
+                                {
+                                    endPage = Math.Min(Model.TotalPages, startPage + maxPagesToShow - 1);
+                                }
+                                else if (endPage == Model.TotalPages)
+                                {
+                                    startPage = Math.Max(1, endPage - maxPagesToShow + 1);
+                                }
+                            }
+                        }
+
+                        <a asp-page="/Posts"
+                           asp-route-currentPage="@(Model.CurrentPage > 1 ? Model.CurrentPage - 1 : 1)"
+                           class="join-item btn @(Model.CurrentPage == 1 ? "btn-disabled" : "")">«</a>
+
+                        @if (startPage > 1)
+                        {
+                            <a asp-page="/Posts"
+                               asp-route-currentPage="1"
+                               class="join-item btn @(1 == Model.CurrentPage ? "btn-active" : "")">
+                                1
+                            </a>
+                            @if (startPage > 2)
+                            {
+                                <span class="join-item btn btn-disabled">...</span>
+                            }
+                        }
+
+                        @for (var idx = startPage; idx <= endPage; idx++)
                         {
                             var pageIdx = idx;
                             <a asp-page="/Posts"
@@ -82,6 +118,23 @@
                                 @pageIdx
                             </a>
                         }
+
+                        @if (endPage < Model.TotalPages)
+                        {
+                            @if (endPage < Model.TotalPages - 1)
+                            {
+                                <span class="join-item btn btn-disabled">...</span>
+                            }
+                            <a asp-page="/Posts"
+                               asp-route-currentPage="@Model.TotalPages"
+                               class="join-item btn @(Model.TotalPages == Model.CurrentPage ? "btn-active" : "")">
+                                @Model.TotalPages
+                            </a>
+                        }
+
+                        <a asp-page="/Posts"
+                           asp-route-currentPage="@(Model.CurrentPage < Model.TotalPages ? Model.CurrentPage + 1 : Model.TotalPages)"
+                           class="join-item btn @(Model.CurrentPage == Model.TotalPages ? "btn-disabled" : "")">»</a>
                     </div>
                 </div>
             }