diff --git a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaTable.js b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaTable.js
index 299445ef..9f18e5d1 100644
--- a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaTable.js
+++ b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaTable.js
@@ -148,103 +148,100 @@ export default function QuotaTable({
         )}
       </div>
 
-      <div className="overflow-x-auto">
-        <table className="w-full table-fixed text-left">
-          <tbody>
-            {currentPageRows.map((quota) => {
-              const colors = getColorClasses(quota.remaining);
-              const countdown = formatResetTime(quota.resetAt);
-              const resetDisplay = formatResetTimeDisplay(quota.resetAt);
-              // recurring defaults true: a missing flag means the quota
-              // refreshes at resetAt. Bonus/one-shot packs set recurring:false
-              // and their resetAt is a hard expiry, so word it as "expires".
-              const recurring = quota.recurring !== false;
-              const countdownLabel = recurring ? `in ${countdown}` : `expires in ${countdown}`;
+      <div className="space-y-px">
+        {currentPageRows.map((quota) => {
+          const colors = getColorClasses(quota.remaining);
+          const countdown = formatResetTime(quota.resetAt);
+          const resetDisplay = formatResetTimeDisplay(quota.resetAt);
+          // recurring defaults true: a missing flag means the quota
+          // refreshes at resetAt. Bonus/one-shot packs set recurring:false
+          // and their resetAt is a hard expiry, so word it as "expires".
+          const recurring = quota.recurring !== false;
+          const countdownLabel = recurring ? `in ${countdown}` : `expires in ${countdown}`;
 
-              return (
-                <tr
-                  key={`${quota.name}-${quota.index}`}
-                  className="border-b border-black/5 dark:border-white/5 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors"
+          return (
+            <div
+              key={`${quota.name}-${quota.index}`}
+              className={`flex items-center gap-2 border-b border-black/5 dark:border-white/5 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors ${cellPad}`}
+            >
+              {/* Name */}
+              <div className="flex w-36 min-w-0 items-center gap-1.5">
+                <span className="text-[10px] shrink-0">{colors.emoji}</span>
+                <span className={`${nameText} font-medium text-text-primary truncate`}>
+                  {quota.name}
+                </span>
+              </div>
+
+              {/* Progress + used/total */}
+              <div className={`min-w-0 flex-1 ${compact ? "space-y-1" : "space-y-1.5"}`}>
+                <div className={`${compact ? "h-1" : "h-1.5"} rounded-full overflow-hidden border ${colors.bgLight} ${
+                  quota.remaining === 0 ? "border-black/10 dark:border-white/10" : "border-transparent"
+                }`}>
+                  <div
+                    className={`h-full transition-all duration-300 ${colors.bg}`}
+                    style={{ width: `${Math.min(quota.remaining, 100)}%` }}
+                  />
+                </div>
+
+                <div className={`flex items-center justify-between gap-1 min-w-0 ${compact ? "text-[10px]" : "text-xs"}`}>
+                  <span
+                    className="text-text-muted truncate"
+                    title={`${quota.used.toLocaleString()} / ${quota.total > 0 ? quota.total.toLocaleString() : "∞"}`}
+                  >
+                    {quota.used.toLocaleString()} / {quota.total > 0 ? quota.total.toLocaleString() : "∞"}
+                  </span>
+                  <span className={`font-medium ${colors.text} shrink-0`}>
+                    {quota.remaining}%
+                  </span>
+                </div>
+              </div>
+
+              {/* Reset time */}
+              <div className="min-w-0 shrink">
+                {countdown !== "-" || resetDisplay ? (
+                  compact ? (
+                    <div
+                      className={`${resetPrimary} text-text-primary font-medium truncate`}
+                      title={resetDisplay || ""}
+                    >
+                      {countdown !== "-" ? countdownLabel : resetDisplay}
+                    </div>
+                  ) : (
+                    <div className="min-w-0 space-y-0.5">
+                      {countdown !== "-" && (
+                        <div className={`${resetPrimary} text-text-primary font-medium truncate`}>
+                          {countdownLabel}
+                        </div>
+                      )}
+                      {resetDisplay && (
+                        <div className={`${resetSecondary} text-text-muted truncate`}>
+                          {resetDisplay}
+                        </div>
+                      )}
+                    </div>
+                  )
+                ) : (
+                  <div className={`${resetPrimary} text-text-muted italic`}>N/A</div>
+                )}
+              </div>
+
+              {/* Hide action */}
+              {hasHideAction && (
+                <button
+                  type="button"
+                  onClick={() => onHideQuota(quota)}
+                  className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/5"
+                  title="Hide this quota row"
+                  aria-label={`Hide quota ${quota.name}`}
                 >
-                  <td className={`${cellPad} w-[30%]`}>
-                    <div className="flex items-center gap-1.5 min-w-0">
-                      <span className="text-[10px] shrink-0">{colors.emoji}</span>
-                      <span className={`${nameText} font-medium text-text-primary truncate`}>
-                        {quota.name}
-                      </span>
-                    </div>
-                  </td>
-
-                  <td className={`${cellPad} w-[45%]`}>
-                    <div className={compact ? "space-y-1" : "space-y-1.5"}>
-                      <div className={`${compact ? "h-1" : "h-1.5"} rounded-full overflow-hidden border ${colors.bgLight} ${
-                        quota.remaining === 0 ? "border-black/10 dark:border-white/10" : "border-transparent"
-                      }`}>
-                        <div
-                          className={`h-full transition-all duration-300 ${colors.bg}`}
-                          style={{ width: `${Math.min(quota.remaining, 100)}%` }}
-                        />
-                      </div>
-
-                      <div className={`flex items-center justify-between ${compact ? "text-[10px]" : "text-xs"}`}>
-                        <span className="text-text-muted">
-                          {quota.used.toLocaleString()} / {quota.total > 0 ? quota.total.toLocaleString() : "∞"}
-                        </span>
-                        <span className={`font-medium ${colors.text}`}>
-                          {quota.remaining}%
-                        </span>
-                      </div>
-                    </div>
-                  </td>
-
-                  <td className={`${cellPad} ${hasHideAction ? "w-[20%]" : "w-[25%]"}`}>
-                    {countdown !== "-" || resetDisplay ? (
-                      compact ? (
-                        <div
-                          className={`${resetPrimary} text-text-primary font-medium truncate`}
-                          title={resetDisplay || ""}
-                        >
-                          {countdown !== "-" ? countdownLabel : resetDisplay}
-                        </div>
-                      ) : (
-                        <div className="space-y-0.5">
-                          {countdown !== "-" && (
-                            <div className={`${resetPrimary} text-text-primary font-medium`}>
-                              {countdownLabel}
-                            </div>
-                          )}
-                          {resetDisplay && (
-                            <div className={`${resetSecondary} text-text-muted`}>
-                              {resetDisplay}
-                            </div>
-                          )}
-                        </div>
-                      )
-                    ) : (
-                      <div className={`${resetPrimary} text-text-muted italic`}>N/A</div>
-                    )}
-                  </td>
-
-                  {hasHideAction && (
-                    <td className={`${cellPad} w-[5%] text-right`}>
-                      <button
-                        type="button"
-                        onClick={() => onHideQuota(quota)}
-                        className="inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/5"
-                        title="Hide this quota row"
-                        aria-label={`Hide quota ${quota.name}`}
-                      >
-                        <span className="material-symbols-outlined text-[15px]">
-                          visibility_off
-                        </span>
-                      </button>
-                    </td>
-                  )}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+                  <span className="material-symbols-outlined text-[15px]">
+                    visibility_off
+                  </span>
+                </button>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       {totalPages > 1 && (
diff --git a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.js b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.js
index b573272e..eb486cc0 100644
--- a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.js
+++ b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.js
@@ -1270,7 +1270,7 @@ export default function ProviderLimits() {
                       visibility_off
                     </span>
                     <span className="shrink-0">Hidden:</span>
-                    <div className="flex w-full items-center gap-1">
+                    <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto whitespace-nowrap pb-2">
                       {hiddenQuotaRows.map((quotaRow) => (
                         <button
                           key={getQuotaVisibilityKey(quotaRow)}
diff --git a/src/app/globals.css b/src/app/globals.css
index 5fd9d0b5..2a1434fe 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -256,6 +256,37 @@ input, textarea {
   background: rgba(229, 106, 74, 0.55);
 }
 
+/* Global thin mac-like scrollbars (overrides clunky Windows/Linux default) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(120, 120, 120, 0.35) transparent;
+}
+.dark * {
+  scrollbar-color: rgba(180, 180, 180, 0.3) transparent;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(120, 120, 120, 0.35);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(120, 120, 120, 0.55);
+}
+.dark *::-webkit-scrollbar-thumb {
+  background-color: rgba(180, 180, 180, 0.3);
+}
+.dark *::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(180, 180, 180, 0.5);
+}
+
 /* Reusable elevated card */
 .card-soft {
   background-color: var(--color-surface);