diff --git a/frontend/components/shared/PaginationControls.tsx b/frontend/components/shared/PaginationControls.tsx
index 5c7c3cb..51ee745 100644
--- a/frontend/components/shared/PaginationControls.tsx
+++ b/frontend/components/shared/PaginationControls.tsx
@@ -45,87 +45,125 @@ export const PaginationControls: React.FC<PaginationControlsProps> = ({
   }
 
   return (
-    <div className="flex items-center justify-between p-4 bg-white border-t border-gray-200">
-      {/* 左側：顯示資訊 */}
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-gray-700">
-          顯示 {startItem} 到 {endItem} 筆，共 {totalCount} 筆
-        </span>
+    <div className="bg-white border-t border-gray-200">
+      {/* 手機版 - 簡潔美觀設計 */}
+      <div className="block md:hidden p-4">
+        <div className="flex flex-col items-center gap-4">
+          {/* 分頁控制 - 圓形大按鈕 */}
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handlePrevPage}
+              disabled={!hasPrev}
+              className={`flex items-center justify-center w-12 h-12 rounded-full transition-all ${
+                hasPrev
+                  ? 'bg-blue-100 text-blue-700 hover:bg-blue-200 shadow-md hover:shadow-lg active:scale-95'
+                  : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
 
-        {/* 每頁筆數選擇 */}
-        <div className="flex items-center gap-2">
-          <label className="text-sm text-gray-600">每頁：</label>
-          <select
-            value={pageSize}
-            onChange={handlePageSizeChange}
-            className="border border-gray-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
-          >
-            <option value={10}>10</option>
-            <option value={20}>20</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
+            <div className="px-4 py-2 bg-gray-100 rounded-full min-w-[60px] text-center">
+              <span className="text-lg font-bold text-gray-800">{currentPage}</span>
+            </div>
+
+            <button
+              onClick={handleNextPage}
+              disabled={!hasNext}
+              className={`flex items-center justify-center w-12 h-12 rounded-full transition-all ${
+                hasNext
+                  ? 'bg-blue-100 text-blue-700 hover:bg-blue-200 shadow-md hover:shadow-lg active:scale-95'
+                  : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
 
-      {/* 右側：分頁控制 */}
-      <div className="flex items-center gap-2">
-        {/* 上一頁按鈕 */}
-        <button
-          onClick={handlePrevPage}
-          disabled={!hasPrev}
-          className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
-            hasPrev
-              ? 'border-gray-300 text-gray-700 hover:bg-gray-50'
-              : 'border-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          上一頁
-        </button>
-
-        {/* 頁碼顯示 */}
-        <div className="flex items-center gap-1">
-          {/* 顯示當前頁附近的頁碼 */}
-          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-            let pageNumber
-            if (totalPages <= 5) {
-              pageNumber = i + 1
-            } else if (currentPage <= 3) {
-              pageNumber = i + 1
-            } else if (currentPage >= totalPages - 2) {
-              pageNumber = totalPages - 4 + i
-            } else {
-              pageNumber = currentPage - 2 + i
-            }
-
-            return (
-              <button
-                key={pageNumber}
-                onClick={() => onPageChange(pageNumber)}
-                className={`px-3 py-2 text-sm rounded-lg transition-colors ${
-                  pageNumber === currentPage
-                    ? 'bg-blue-600 text-white'
-                    : 'text-gray-700 hover:bg-gray-100'
-                }`}
-              >
-                {pageNumber}
-              </button>
-            )
-          })}
+      {/* 桌面版 - 保持完整功能 */}
+      <div className="hidden md:flex items-center justify-between p-4">
+        {/* 左側：顯示資訊 */}
+        <div className="flex items-center gap-4">
+          {/* 每頁筆數選擇 */}
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-gray-600">每頁：</label>
+            <select
+              value={pageSize}
+              onChange={handlePageSizeChange}
+              className="border border-gray-300 rounded px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500 min-w-[80px]"
+            >
+              <option value={10}>10</option>
+              <option value={20}>20</option>
+              <option value={50}>50</option>
+              <option value={100}>100</option>
+            </select>
+          </div>
         </div>
 
-        {/* 下一頁按鈕 */}
-        <button
-          onClick={handleNextPage}
-          disabled={!hasNext}
-          className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
-            hasNext
-              ? 'border-gray-300 text-gray-700 hover:bg-gray-50'
-              : 'border-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          下一頁
-        </button>
+        {/* 右側：分頁控制 */}
+        <div className="flex items-center gap-2">
+          {/* 上一頁按鈕 */}
+          <button
+            onClick={handlePrevPage}
+            disabled={!hasPrev}
+            className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
+              hasPrev
+                ? 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                : 'border-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+          >
+            上一頁
+          </button>
+
+          {/* 頁碼顯示 */}
+          <div className="flex items-center gap-1">
+            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+              let pageNumber
+              if (totalPages <= 5) {
+                pageNumber = i + 1
+              } else if (currentPage <= 3) {
+                pageNumber = i + 1
+              } else if (currentPage >= totalPages - 2) {
+                pageNumber = totalPages - 4 + i
+              } else {
+                pageNumber = currentPage - 2 + i
+              }
+
+              return (
+                <button
+                  key={pageNumber}
+                  onClick={() => onPageChange(pageNumber)}
+                  className={`px-3 py-2 text-sm rounded-lg transition-colors ${
+                    pageNumber === currentPage
+                      ? 'bg-blue-600 text-white'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {pageNumber}
+                </button>
+              )
+            })}
+          </div>
+
+          {/* 下一頁按鈕 */}
+          <button
+            onClick={handleNextPage}
+            disabled={!hasNext}
+            className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
+              hasNext
+                ? 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                : 'border-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+          >
+            下一頁
+          </button>
+        </div>
       </div>
     </div>
   )