diff --git a/src/components/flashcards/FlashcardViewer.tsx b/src/components/flashcards/FlashcardViewer.tsx
index db1c05b..7fc9ccc 100644
--- a/src/components/flashcards/FlashcardViewer.tsx
+++ b/src/components/flashcards/FlashcardViewer.tsx
@@ -452,32 +452,7 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
               ) : <div className="w-9 h-9" />}
 
               <button
-                onClick={() => {
-                  if (isShuffled) {
-                    const sortedOrder = [...order].sort((a, b) => {
-                      const idxA = cards.findIndex(c => c.id === a);
-                      const idxB = cards.findIndex(c => c.id === b);
-                      return idxA - idxB;
-                    });
-                    setOrder(sortedOrder);
-                    setCurrentIndex(0);
-                    setIsFlipped(false);
-                    setHasFlippedOnce(false);
-                    setResults({});
-                    setIsShuffled(false);
-                    setToastMessage("Card shuffle off");
-                    saveProgress(sortedOrder, 0, {}, "SEQUENTIAL");
-                  } else {
-                    const remainingCards = order.slice(currentIndex);
-                    const shuffledRemaining = [...remainingCards].sort(() => Math.random() - 0.5);
-                    const newOrder = [...order.slice(0, currentIndex), ...shuffledRemaining];
-                    
-                    setOrder(newOrder);
-                    setIsShuffled(true);
-                    setToastMessage("Card shuffle on");
-                    saveProgress(newOrder, currentIndex, results, "SHUFFLED");
-                  }
-                }}
+                onClick={toggleShuffle}
                 className={`p-2 rounded-full transition-all duration-200 cursor-pointer bg-bg-base/50 ${
                   isShuffled 
                     ? "text-primary hover:bg-primary/10" 
@@ -485,9 +460,8 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
                 }`}
                 title={isShuffled ? "Turn off shuffle" : "Shuffle remaining"}
               >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 7.5L15 3m4.5 4.5l-4.5 4.5M19.5 7.5h-5.25a6 6 0 00-5.454 3.486m0 0L5.25 21m0 0h-1.5m1.5 0l-3-3m3 3l3-3m11.25-6l-4.5-4.5M19.5 16.5l-4.5 4.5M19.5 16.5h-5.25a6 6 0 01-5.454-3.486m0 0L5.25 3m0 0h-1.5m1.5 0l-3 3m3-3l3 3" />
+                <svg className={`w-5 h-5 ${isShuffled ? "stroke-[2.5]" : "stroke-2"}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
                 </svg>
               </button>
             </div>