diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index dce6eb29..cbda034e 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -998,7 +998,9 @@ export const Header: React.FC = () => {
                                 : window.usedPercent;
                               const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
                               const expectedMarker = paceInfo?.dailyAllocationPercent != null
-                                ? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                ? (quotaDisplayMode === 'remaining' 
+                                    ? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                    : calculateExpectedUsagePercent(paceInfo.elapsedRatio))
                                 : null;
                               return (
                               <DropdownMenuItem
@@ -1065,7 +1067,9 @@ export const Header: React.FC = () => {
                                               : window.usedPercent;
                                             const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds);
                                             const expectedMarker = paceInfo?.dailyAllocationPercent != null
-                                              ? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                              ? (quotaDisplayMode === 'remaining'
+                                                  ? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                                  : calculateExpectedUsagePercent(paceInfo.elapsedRatio))
                                               : null;
                                             return (
                                             <div
@@ -1450,7 +1454,9 @@ export const Header: React.FC = () => {
                             : window.usedPercent;
                           const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
                           const expectedMarker = paceInfo?.dailyAllocationPercent != null
-                            ? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                            ? (quotaDisplayMode === 'remaining'
+                                ? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                : calculateExpectedUsagePercent(paceInfo.elapsedRatio))
                             : null;
                           return (
                             <div key={`${group.providerId}-${label}`} className="px-3 py-2">
@@ -1510,7 +1516,9 @@ export const Header: React.FC = () => {
                                           : window.usedPercent;
                                         const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds);
                                         const expectedMarker = paceInfo?.dailyAllocationPercent != null
-                                          ? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                          ? (quotaDisplayMode === 'remaining'
+                                              ? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                                              : calculateExpectedUsagePercent(paceInfo.elapsedRatio))
                                           : null;
                                         return (
                                           <div key={`${group.providerId}-${modelName}`} className="py-1.5">
diff --git a/packages/ui/src/components/layout/VSCodeLayout.tsx b/packages/ui/src/components/layout/VSCodeLayout.tsx
index d4dbca35..ad431bb7 100644
--- a/packages/ui/src/components/layout/VSCodeLayout.tsx
+++ b/packages/ui/src/components/layout/VSCodeLayout.tsx
@@ -615,7 +615,9 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
                       : window.usedPercent;
                     const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
                     const expectedMarker = paceInfo?.dailyAllocationPercent != null
-                      ? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                      ? (quotaDisplayMode === 'remaining'
+                          ? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
+                          : calculateExpectedUsagePercent(paceInfo.elapsedRatio))
                       : null;
                     return (
                     <DropdownMenuItem
diff --git a/packages/ui/src/components/sections/usage/UsageCard.tsx b/packages/ui/src/components/sections/usage/UsageCard.tsx
index a1f916a3..95eaeec5 100644
--- a/packages/ui/src/components/sections/usage/UsageCard.tsx
+++ b/packages/ui/src/components/sections/usage/UsageCard.tsx
@@ -42,8 +42,10 @@ export const UsageCard: React.FC<UsageCardProps> = ({
       return null;
     }
     // Show marker based on elapsed time ratio
-    return calculateExpectedUsagePercent(paceInfo.elapsedRatio);
-  }, [paceInfo]);
+    const expectedUsed = calculateExpectedUsagePercent(paceInfo.elapsedRatio);
+    // If displaying remaining, invert the marker position
+    return displayMode === 'remaining' ? 100 - expectedUsed : expectedUsed;
+  }, [paceInfo, displayMode]);
 
   return (
     <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/60 p-4 shadow-sm">