diff --git a/src/components/flashcards/FlashcardViewer.tsx b/src/components/flashcards/FlashcardViewer.tsx
index 6d642a7..1dc3199 100644
--- a/src/components/flashcards/FlashcardViewer.tsx
+++ b/src/components/flashcards/FlashcardViewer.tsx
@@ -309,9 +309,9 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
           </span>
         </div>
         {/* Progress bar */}
-        <div className="w-full bg-bg-surface-alt rounded-full h-1.5 mt-2">
+        <div className="w-full bg-bg-surface rounded-full h-2 mt-2 border border-border-light/50 overflow-hidden">
           <div
-            className="h-1.5 rounded-full bg-primary transition-all duration-300"
+            className="h-full bg-primary transition-all duration-300"
             style={{ width: `${((currentIndex + 1) / order.length) * 100}%` }}
           />
         </div>
diff --git a/src/components/quizzes/QuizViewer.tsx b/src/components/quizzes/QuizViewer.tsx
index 583f3f3..0b78178 100644
--- a/src/components/quizzes/QuizViewer.tsx
+++ b/src/components/quizzes/QuizViewer.tsx
@@ -278,9 +278,9 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
           <div className="text-sm font-mono text-text-secondary whitespace-nowrap tracking-wider">
             Q {currentIndex + 1} / {order.length}
           </div>
-          <div className="flex-1 h-2 bg-border-light rounded-full overflow-hidden">
+          <div className="flex-1 h-2 bg-bg-surface rounded-full overflow-hidden border border-border-light/50">
             <div 
-              className="h-full bg-border transition-all duration-300"
+              className="h-full bg-primary transition-all duration-300"
               style={{ width: `${(currentIndex / order.length) * 100}%` }}
             />
           </div>