diff --git a/src/app/[lang]/(blank-layout-pages)/draw/page.tsx b/src/app/[lang]/(blank-layout-pages)/draw/page.tsx
index 4de2ee0..1217f13 100644
--- a/src/app/[lang]/(blank-layout-pages)/draw/page.tsx
+++ b/src/app/[lang]/(blank-layout-pages)/draw/page.tsx
@@ -1,34 +1,41 @@
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Users, RotateCw, Trophy, Trash2, RefreshCw, Database } from 'lucide-react';
+import { RotateCw, Trophy, Trash2, RefreshCw, Shuffle, Sparkles, Gift } from 'lucide-react';
+import { useVoucherRows } from '@/services/queries/vouchers';
+import { Voucher, VoucherRow } from '@/types/services/voucher';
+import { toast } from 'react-toastify';
 
-interface Order {
-  orderId: string;
-  customerName: string;
-  email: string;
-  amount: number;
-  status: string;
+interface SpinRow {
+  id: string;
+  rowNumber: number;
+  vouchers: Voucher[];
+  displayVouchers: Voucher[];
+  isSpinning: boolean;
+  isShuffling: boolean;
+  winner: Voucher | null;
+  wheelRef: React.RefObject<HTMLDivElement>;
+  selectedWinner: Voucher | null;
 }
 
-interface WinnerResult {
-  order: Order;
+interface WinnerHistory {
+  rowNumber: number;
+  winner: Voucher;
   timestamp: Date;
-  position: number;
 }
 
 const RandomDrawApp: React.FC = () => {
-  const [orders, setOrders] = useState<Order[]>([]);
-  const [isSpinning, setIsSpinning] = useState<boolean>(false);
-  const [winners, setWinners] = useState<WinnerResult[]>([]);
-  const [numberOfWinners, setNumberOfWinners] = useState<number>(1);
-  const [currentWheelItems, setCurrentWheelItems] = useState<Order[]>([]);
-  const [selectedWinner, setSelectedWinner] = useState<Order | null>(null);
-  const [activeTab, setActiveTab] = useState<'acak' | 'hadiah' | 'winner'>('acak');
-  const [shuffledDisplayOrder, setShuffledDisplayOrder] = useState<Order[]>([]);
-  const wheelRef = useRef<HTMLDivElement>(null);
+  const [spinRows, setSpinRows] = useState<SpinRow[]>([]);
+  const [numberOfRows, setNumberOfRows] = useState<number>(4);
+  const [winnersHistory, setWinnersHistory] = useState<WinnerHistory[]>([]);
+  const [isRevealingWinners, setIsRevealingWinners] = useState<boolean>(false);
+  const [revealedWinners, setRevealedWinners] = useState<Set<number>>(new Set());
   const audioContextRef = useRef<AudioContext | null>(null);
-  const tickIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const tickIntervalRefs = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const shuffleIntervalRefs = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  // Use React Query hook for fetching voucher data
+  const { data: voucherData, isLoading: isLoadingData, refetch: refetchVouchers, error: fetchError } = useVoucherRows({ rows: numberOfRows });
 
   // Initialize Audio Context
   useEffect(() => {
@@ -42,9 +49,8 @@ const RandomDrawApp: React.FC = () => {
     
     return () => {
       document.removeEventListener('click', initAudio);
-      if (tickIntervalRef.current) {
-        clearTimeout(tickIntervalRef.current);
-      }
+      tickIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
+      shuffleIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
     };
   }, []);
 
@@ -70,10 +76,67 @@ const RandomDrawApp: React.FC = () => {
     oscillator.stop(ctx.currentTime + 0.05);
   };
 
+  // Create drum roll sound
+  const playDrumRoll = () => {
+    if (!audioContextRef.current) return;
+    
+    const ctx = audioContextRef.current;
+    const oscillator = ctx.createOscillator();
+    const gainNode = ctx.createGain();
+    const noiseNode = ctx.createBufferSource();
+    
+    // Create noise buffer for snare-like sound
+    const bufferSize = ctx.sampleRate * 0.05;
+    const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+    const data = buffer.getChannelData(0);
+    for (let i = 0; i < bufferSize; i++) {
+      data[i] = Math.random() * 2 - 1;
+    }
+    noiseNode.buffer = buffer;
+    
+    oscillator.connect(gainNode);
+    noiseNode.connect(gainNode);
+    gainNode.connect(ctx.destination);
+    
+    oscillator.frequency.setValueAtTime(200, ctx.currentTime);
+    gainNode.gain.setValueAtTime(0.05, ctx.currentTime);
+    gainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
+    
+    oscillator.start(ctx.currentTime);
+    oscillator.stop(ctx.currentTime + 0.1);
+    noiseNode.start(ctx.currentTime);
+  };
+
+  // Create winner sound
+  const playWinnerSound = () => {
+    if (!audioContextRef.current) return;
+    
+    const ctx = audioContextRef.current;
+    const notes = [523.25, 659.25, 783.99, 1046.5]; // C, E, G, C (higher octave)
+    
+    notes.forEach((freq, index) => {
+      const oscillator = ctx.createOscillator();
+      const gainNode = ctx.createGain();
+      
+      oscillator.connect(gainNode);
+      gainNode.connect(ctx.destination);
+      
+      oscillator.frequency.setValueAtTime(freq, ctx.currentTime + index * 0.1);
+      
+      gainNode.gain.setValueAtTime(0, ctx.currentTime + index * 0.1);
+      gainNode.gain.linearRampToValueAtTime(0.2, ctx.currentTime + index * 0.1 + 0.05);
+      gainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + index * 0.1 + 0.5);
+      
+      oscillator.start(ctx.currentTime + index * 0.1);
+      oscillator.stop(ctx.currentTime + index * 0.1 + 0.5);
+    });
+  };
+
   // Start tick sound during spinning
-  const startTickSound = (duration: number) => {
-    if (tickIntervalRef.current) {
-      clearTimeout(tickIntervalRef.current);
+  const startTickSound = (rowId: string, duration: number) => {
+    const existingInterval = tickIntervalRefs.current.get(rowId);
+    if (existingInterval) {
+      clearTimeout(existingInterval);
     }
     
     let tickInterval = 50;
@@ -85,39 +148,23 @@ const RandomDrawApp: React.FC = () => {
       tickInterval += intervalIncrement;
       
       if (tickInterval < maxInterval) {
-        tickIntervalRef.current = setTimeout(tick, Math.min(tickInterval, maxInterval));
+        const timeoutId = setTimeout(tick, Math.min(tickInterval, maxInterval));
+        tickIntervalRefs.current.set(rowId, timeoutId);
       }
     };
     
     tick();
     
     setTimeout(() => {
-      if (tickIntervalRef.current) {
-        clearTimeout(tickIntervalRef.current);
-        tickIntervalRef.current = null;
+      const interval = tickIntervalRefs.current.get(rowId);
+      if (interval) {
+        clearTimeout(interval);
+        tickIntervalRefs.current.delete(rowId);
       }
     }, duration + 100);
   };
 
-  // Generate random order ID
-  const generateRandomOrderId = () => {
-    return Math.floor(100000000 + Math.random() * 900000000).toString();
-  };
-
-  // Mock data
-  useEffect(() => {
-    const mockOrders: Order[] = Array.from({ length: 28 }, (_, i) => ({
-      orderId: generateRandomOrderId(),
-      customerName: `Customer ${i + 1}`,
-      email: `customer${i + 1}@email.com`,
-      amount: 150000 + (i * 10000),
-      status: 'completed'
-    }));
-    setOrders(mockOrders);
-    setCurrentWheelItems(mockOrders);
-    setShuffledDisplayOrder(shuffleArray(mockOrders));
-  }, []);
-
+  // Shuffle array
   const shuffleArray = <T,>(array: T[]): T[] => {
     const shuffled = [...array];
     for (let i = shuffled.length - 1; i > 0; i--) {
@@ -127,82 +174,268 @@ const RandomDrawApp: React.FC = () => {
     return shuffled;
   };
 
-  const performSpin = (finalWinners: Order[], mainWinner: Order) => {
-    const wheelElement = wheelRef.current;
+  // Process voucher data when it changes
+  useEffect(() => {
+    if (voucherData && voucherData.rows) {
+      const newSpinRows: SpinRow[] = voucherData.rows.map(row => ({
+        id: `row-${row.row_number}-${Date.now()}`,
+        rowNumber: row.row_number,
+        vouchers: row.vouchers,
+        displayVouchers: [...row.vouchers],
+        isSpinning: false,
+        isShuffling: false,
+        winner: null,
+        wheelRef: React.createRef<HTMLDivElement>(),
+        selectedWinner: null,
+      }));
+      setSpinRows(newSpinRows);
+      setRevealedWinners(new Set());
+    }
+  }, [voucherData]);
+
+  // Show error if fetch failed
+  useEffect(() => {
+    if (fetchError) {
+      toast.error('Failed to load voucher data. Please check your connection and try again.');
+    }
+  }, [fetchError]);
+
+  // Refetch when numberOfRows changes
+  useEffect(() => {
+    refetchVouchers();
+  }, [numberOfRows]);
+
+  // Shuffle all rows (Acak functionality)
+  const shuffleAllRows = () => {
+    setSpinRows(prev => prev.map(row => ({
+      ...row,
+      isShuffling: true
+    })));
+
+    // Animate shuffling for each row
+    spinRows.forEach((row, index) => {
+      let shuffleCount = 0;
+      const maxShuffles = 20;
+      
+      const shuffleInterval = setInterval(() => {
+        shuffleCount++;
+        
+        setSpinRows(prev => prev.map(r => {
+          if (r.id === row.id) {
+            return {
+              ...r,
+              displayVouchers: shuffleArray(r.vouchers)
+            };
+          }
+          return r;
+        }));
+        
+        playTickSound();
+        
+        if (shuffleCount >= maxShuffles) {
+          clearInterval(shuffleInterval);
+          setTimeout(() => {
+            setSpinRows(prev => prev.map(r => {
+              if (r.id === row.id) {
+                return {
+                  ...r,
+                  isShuffling: false
+                };
+              }
+              return r;
+            }));
+          }, index * 100);
+        }
+      }, 100);
+      
+      shuffleIntervalRefs.current.set(row.id, shuffleInterval as any);
+    });
+  };
+
+  // Reveal winners dramatically
+  const revealWinnersDramatically = async () => {
+    setIsRevealingWinners(true);
+    setRevealedWinners(new Set());
+    
+    // First, arrange winners to be in the winner zone for each row
+    const arrangedRows = spinRows.map(row => {
+      const winner = row.vouchers.find(v => v.is_winner);
+      if (!winner) return row;
+      
+      // Create a new display order with winner at position 3 or 4 (will be in winner zone)
+      const otherVouchers = row.vouchers.filter(v => v.voucher_code !== winner.voucher_code);
+      const shuffledOthers = shuffleArray(otherVouchers);
+      
+      // Place winner at index 3 (4th position) which will be in the winner zone
+      const newDisplayVouchers = [
+        ...shuffledOthers.slice(0, 3),
+        winner,
+        ...shuffledOthers.slice(3)
+      ];
+      
+      return {
+        ...row,
+        displayVouchers: newDisplayVouchers
+      };
+    });
+    
+    // Update display to show arranged vouchers
+    setSpinRows(arrangedRows);
+    
+    // Start drum roll effect
+    const drumRollInterval = setInterval(() => {
+      playDrumRoll();
+    }, 100);
+    
+    // Create a scrolling/spinning effect for all wheels simultaneously
+    let scrollSpeed = 50;
+    let currentScroll = 0;
+    const maxScroll = 2000;
+    const deceleration = 0.95;
+    
+    const spinInterval = setInterval(() => {
+      currentScroll += scrollSpeed;
+      scrollSpeed *= deceleration;
+      
+      // Apply scrolling to all wheels
+      arrangedRows.forEach(row => {
+        const wheelElement = row.wheelRef.current;
+        if (wheelElement) {
+          wheelElement.style.transition = 'none';
+          wheelElement.style.transform = `translateY(${-currentScroll}px)`;
+        }
+      });
+      
+      // Stop when speed is very slow
+      if (scrollSpeed < 0.5 || currentScroll >= maxScroll) {
+        clearInterval(spinInterval);
+        clearInterval(drumRollInterval);
+        
+        // Final positioning - snap to winner position
+        arrangedRows.forEach(row => {
+          const wheelElement = row.wheelRef.current;
+          if (wheelElement) {
+            const CARD_HEIGHT = 80;
+            const WINNER_ZONE_TOP = 260; // Top position of winner zone
+            // Position 4th card (index 3) exactly at the winner zone
+            const finalPosition = -(3 * CARD_HEIGHT - WINNER_ZONE_TOP);
+            
+            wheelElement.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+            wheelElement.style.transform = `translateY(${finalPosition}px)`;
+          }
+        });
+      }
+    }, 20);
+    
+    // Wait for scrolling to complete
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    
+    // Play winner sound
+    playWinnerSound();
+    
+    // Collect all winners
+    const winnersToReveal: { row: SpinRow, winner: Voucher }[] = [];
+    arrangedRows.forEach(row => {
+      const winner = row.vouchers.find(v => v.is_winner);
+      if (winner) {
+        winnersToReveal.push({ row, winner });
+      }
+    });
+    
+    // Update all winners at once with highlighting
+    const allWinnerNumbers = new Set<number>();
+    const historyEntries: WinnerHistory[] = [];
+    
+    winnersToReveal.forEach(({ row, winner }) => {
+      allWinnerNumbers.add(row.rowNumber);
+      historyEntries.push({
+        rowNumber: row.rowNumber,
+        winner: winner,
+        timestamp: new Date()
+      });
+    });
+    
+    // Update state to highlight winners
+    setRevealedWinners(allWinnerNumbers);
+    
+    setSpinRows(prev => prev.map(r => {
+      const winnerInfo = winnersToReveal.find(w => w.row.id === r.id);
+      if (winnerInfo) {
+        return {
+          ...r,
+          winner: winnerInfo.winner,
+          selectedWinner: winnerInfo.winner
+        };
+      }
+      return r;
+    }));
+    
+    setWinnersHistory(prev => [...prev, ...historyEntries]);
+    
+    setIsRevealingWinners(false);
+  };
+
+  const performSpin = (row: SpinRow) => {
+    const wheelElement = row.wheelRef.current;
     if (!wheelElement) return;
 
-    const CARD_HEIGHT = 100;
-    const WINNER_ZONE_CENTER = 250;
-    
-    // Find where the winner already exists in current wheel items (no manipulation)
-    let winnerIndex = currentWheelItems.findIndex(item => item.orderId === mainWinner.orderId);
-    
-    // If winner not found in wheel, find a suitable position
-    if (winnerIndex === -1) {
-      winnerIndex = Math.floor(Math.random() * currentWheelItems.length);
+    const winner = row.vouchers.find(v => v.is_winner);
+    if (!winner) {
+      console.error('No winner found in vouchers');
+      return;
     }
+
+    const CARD_HEIGHT = 80;
+    const WINNER_ZONE_TOP = 260; // Top position of winner zone
+    
+    const winnerIndex = row.displayVouchers.findIndex(v => v.voucher_code === winner.voucher_code);
     
-    // Reset wheel position
     wheelElement.style.transition = 'none';
     wheelElement.style.transform = 'translateY(0px)';
     wheelElement.offsetHeight;
     
     setTimeout(() => {
-      // Calculate spin parameters
-      const minSpins = 15;
-      const maxSpins = 25;
+      const minSpins = 10;
+      const maxSpins = 20;
       const spins = minSpins + Math.random() * (maxSpins - minSpins);
-      const totalItems = currentWheelItems.length;
+      const totalItems = row.displayVouchers.length;
       
-      // Calculate final position to land on winner
       const totalRotations = Math.floor(spins);
       const baseScrollDistance = totalRotations * totalItems * CARD_HEIGHT;
       const winnerScrollPosition = winnerIndex * CARD_HEIGHT;
-      const finalPosition = -(baseScrollDistance + winnerScrollPosition) + WINNER_ZONE_CENTER - (CARD_HEIGHT / 2);
+      const finalPosition = -(baseScrollDistance + winnerScrollPosition) + WINNER_ZONE_TOP;
       
-      // Dynamic duration
       const distance = Math.abs(finalPosition);
       const baseDuration = 3000;
       const maxDuration = 5000;
       const duration = Math.min(baseDuration + (distance / 10000) * 1000, maxDuration);
       
-      console.log('🎲 NATURAL SPIN:');
-      console.log('Selected Winner:', mainWinner.orderId, '-', mainWinner.customerName);
-      console.log('Found at Index:', winnerIndex);
-      console.log('Will show in result:', mainWinner.orderId);
-      
-      // Animate wheel
       wheelElement.style.transform = `translateY(${finalPosition}px)`;
       wheelElement.style.transition = `transform ${duration}ms cubic-bezier(0.17, 0.67, 0.12, 0.99)`;
       
-      // Start sound effect
-      startTickSound(duration);
+      startTickSound(row.id, duration);
       
-      // Complete spinning after animation
       setTimeout(() => {
-        // Stop sound
-        if (tickIntervalRef.current) {
-          clearTimeout(tickIntervalRef.current);
-          tickIntervalRef.current = null;
+        const interval = tickIntervalRefs.current.get(row.id);
+        if (interval) {
+          clearTimeout(interval);
+          tickIntervalRefs.current.delete(row.id);
         }
         
-        // Set the ACTUAL pre-selected winner (not what's visually in wheel)
-        setSelectedWinner(mainWinner);
+        playWinnerSound();
         
-        // Add PRE-SELECTED winners to results (guaranteed match)
-        const newWinners = finalWinners.map((order, index) => ({
-          order,
-          timestamp: new Date(),
-          position: winners.length + index + 1
-        }));
+        setSpinRows(prev => prev.map(r => 
+          r.id === row.id 
+            ? { ...r, isSpinning: false, winner: winner, selectedWinner: winner }
+            : r
+        ));
         
-        setWinners(prev => [...prev, ...newWinners]);
-        setIsSpinning(false);
+        setWinnersHistory(prev => [...prev, {
+          rowNumber: row.rowNumber,
+          winner: winner,
+          timestamp: new Date()
+        }]);
         
-        console.log('🏆 RESULT WINNER:', newWinners[0].order.orderId);
-        console.log('🎯 Visual winner may differ from result (result is guaranteed correct)');
-        
-        // Reset wheel for next spin
         setTimeout(() => {
           wheelElement.style.transition = 'none';
           wheelElement.style.transform = 'translateY(0px)';
@@ -213,414 +446,346 @@ const RandomDrawApp: React.FC = () => {
     }, 100);
   };
 
-  const spinWheel = async () => {
-    // Filter orders yang belum menang
-    const availableOrders = orders.filter(order => 
-      !winners.some(winner => winner.order.orderId === order.orderId)
-    );
+  const spinWheel = (rowId: string) => {
+    const row = spinRows.find(r => r.id === rowId);
+    if (!row || row.isSpinning || row.winner) return;
     
-    if (availableOrders.length === 0 || isSpinning) return;
+    setSpinRows(prev => prev.map(r => 
+      r.id === rowId ? { ...r, isSpinning: true, selectedWinner: null } : r
+    ));
     
-    setIsSpinning(true);
-    setSelectedWinner(null);
-    
-    // Reset wheel position before every spin
-    const wheelElement = wheelRef.current;
+    const wheelElement = row.wheelRef.current;
     if (wheelElement) {
       wheelElement.style.transition = 'none';
       wheelElement.style.transform = 'translateY(0px)';
-      wheelElement.offsetHeight; // Force reflow
+      wheelElement.offsetHeight;
     }
     
-    // Pilih winner yang akan ditampilkan di result
-    const shuffledAvailable = shuffleArray(availableOrders);
-    const finalWinners = shuffledAvailable.slice(0, Math.min(numberOfWinners, availableOrders.length));
-    const mainWinner = finalWinners[0];
-    
-    console.log('🎯 PRE-SELECTED WINNER:', mainWinner.orderId, '-', mainWinner.customerName);
-    console.log('🎯 THIS WINNER WILL BE GUARANTEED IN RESULT');
-    
-    // Always call performSpin with the guaranteed winner
-    if (wheelElement) {
-      performSpin(finalWinners, mainWinner);
-    }
+    performSpin(row);
   };
 
   const clearResults = () => {
-    // Stop any ongoing sound effects
-    if (tickIntervalRef.current) {
-      clearTimeout(tickIntervalRef.current);
-      tickIntervalRef.current = null;
-    }
+    tickIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
+    shuffleIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
+    tickIntervalRefs.current.clear();
+    shuffleIntervalRefs.current.clear();
     
-    setWinners([]);
-    setSelectedWinner(null);
-    setIsSpinning(false); // Force reset spinning state
+    setWinnersHistory([]);
+    setRevealedWinners(new Set());
+    setSpinRows(prev => prev.map(row => ({
+      ...row,
+      isSpinning: false,
+      isShuffling: false,
+      winner: null,
+      selectedWinner: null,
+      displayVouchers: [...row.vouchers]
+    })));
     
-    // Reset wheel position when clearing
-    const wheelElement = wheelRef.current;
-    if (wheelElement) {
-      wheelElement.style.transition = 'none';
-      wheelElement.style.transform = 'translateY(0px)';
+    spinRows.forEach(row => {
+      const wheelElement = row.wheelRef.current;
+      if (wheelElement) {
+        wheelElement.style.transition = 'none';
+        wheelElement.style.transform = 'translateY(0px)';
+      }
+    });
+  };
+
+  const refreshData = async () => {
+    tickIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
+    shuffleIntervalRefs.current.forEach(timeout => clearTimeout(timeout));
+    tickIntervalRefs.current.clear();
+    shuffleIntervalRefs.current.clear();
+    
+    try {
+      await refetchVouchers();
+      toast.success('Data refreshed successfully');
+    } catch (error) {
+      toast.error('Failed to refresh data');
     }
   };
 
-  const refreshOrders = () => {
-    // Stop any ongoing sound effects
-    if (tickIntervalRef.current) {
-      clearTimeout(tickIntervalRef.current);
-      tickIntervalRef.current = null;
-    }
-    
-    const shuffled = shuffleArray(orders);
-    setCurrentWheelItems(shuffled);
-    setShuffledDisplayOrder(shuffleArray(orders)); // Shuffle display order too
-    setSelectedWinner(null);
-    setIsSpinning(false); // Force reset spinning state
-    
-    // Reset wheel position
-    const wheelElement = wheelRef.current;
-    if (wheelElement) {
-      wheelElement.style.transition = 'none';
-      wheelElement.style.transform = 'translateY(0px)';
-    }
+  const formatPhoneNumber = (phone: string) => {
+    return phone.substring(0, 5) + '****' + phone.substring(phone.length - 2);
   };
 
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0
-    }).format(amount);
-  };
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 text-gray-900 p-6">
+      <style jsx>{`
+        @keyframes bounce-in {
+          0% {
+            transform: scale(0.3);
+            opacity: 0;
+          }
+          50% {
+            transform: scale(1.05);
+          }
+          70% {
+            transform: scale(0.9);
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+        
+        .animate-bounce-in {
+          animation: bounce-in 0.6s ease-out;
+        }
+      `}</style>
+      
+      <div className="max-w-full px-4 mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-5xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent mb-2">
+            Voucher Lucky Draw
+          </h1>
+          <p className="text-gray-600 text-lg">Select random winners from voucher database</p>
+        </div>
 
-  // Get available orders for spinning
-  const availableOrdersCount = orders.filter(order => 
-    !winners.some(winner => winner.order.orderId === order.orderId)
-  ).length;
-
-  const GridTable = ({ data, columns = 4 }: { data: Order[], columns?: number }) => {
-    const rows = Math.ceil(data.length / columns);
-    
-    return (
-      <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-        {Array.from({ length: columns }, (_, colIndex) => (
-          <div key={colIndex} className="space-y-2">
-            {Array.from({ length: rows }, (_, rowIndex) => {
-              const itemIndex = rowIndex * columns + colIndex;
-              const item = shuffledDisplayOrder[itemIndex];
-              
-              if (!item) return <div key={rowIndex} className="h-16"></div>;
-              
-              const isWinner = winners.some(winner => winner.order.orderId === item.orderId);
-              
-              return (
-                <div
-                  key={item.orderId + rowIndex}
-                  className={`border-2 rounded-lg p-3 text-center min-h-16 flex items-center justify-center ${
-                    isWinner 
-                      ? 'border-yellow-500 bg-yellow-50 text-yellow-700 font-bold' 
-                      : 'border-primary bg-white text-primary'
-                  }`}
-                >
-                  <div className="text-lg font-semibold">
-                    {item.orderId}
-                    {isWinner && (
-                      <Trophy className="inline ml-2 text-yellow-500" size={16} />
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'acak':
-        return (
-          <div className="space-y-6">
-            {/* Controls */}
+        <div className="space-y-6">
+          {/* Controls Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            {/* Configuration Card */}
             <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold flex items-center gap-2 text-gray-900">
-                  <Database size={20} className="text-primary" />
-                  Order Database ({orders.length} total, {availableOrdersCount} available)
-                </h2>
+              <h2 className="text-xl font-semibold mb-4 text-gray-900">
+                Configuration
+              </h2>
+              
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Number of Rows
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="10"
+                    value={numberOfRows}
+                    onChange={(e) => setNumberOfRows(parseInt(e.target.value) || 1)}
+                    className="w-full bg-white border border-gray-300 rounded-lg p-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                    disabled={isLoadingData}
+                  />
+                </div>
+                
                 <button
-                  onClick={refreshOrders}
-                  className="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors border border-gray-300"
-                  title="Shuffle Orders Position"
-                  disabled={isSpinning}
+                  onClick={refreshData}
+                  disabled={isLoadingData}
+                  className="w-full px-4 py-2 bg-primary hover:bg-primary/90 disabled:bg-gray-400 text-white font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors"
                 >
-                  <RefreshCw size={16} className="text-gray-700" />
+                  <RefreshCw size={16} className={isLoadingData ? 'animate-spin' : ''} />
+                  {isLoadingData ? 'Loading...' : 'Load Data'}
                 </button>
               </div>
-
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Number of winners
-                </label>
-                <input
-                  type="number"
-                  min="1"
-                  max={availableOrdersCount}
-                  value={numberOfWinners}
-                  onChange={(e) => setNumberOfWinners(Math.min(parseInt(e.target.value) || 1, availableOrdersCount))}
-                  className="w-32 bg-white border border-gray-300 rounded-lg p-2 text-gray-900 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-                  disabled={isSpinning}
-                />
-              </div>
-
-              <button
-                onClick={spinWheel}
-                disabled={availableOrdersCount === 0 || isSpinning}
-                className="w-full bg-primary hover:bg-primary/90 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-4 px-6 rounded-lg flex items-center justify-center gap-3 transition-colors text-lg shadow-lg"
-              >
-                <RotateCw size={24} className={isSpinning ? 'animate-spin' : ''} />
-                {isSpinning ? `Spinning...` : availableOrdersCount === 0 ? 'No Available Orders' : 'Spin the Wheel'}
-              </button>
+              
+              {spinRows.length > 0 && (
+                <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+                  <div className="text-sm text-gray-600">
+                    <div>Rows: {spinRows.length}</div>
+                    <div>Total Vouchers: {spinRows.reduce((acc, row) => acc + row.vouchers.length, 0)}</div>
+                  </div>
+                </div>
+              )}
             </div>
 
-            {/* Grid Table */}
+            {/* Actions Card */}
             <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-              <div className="mb-4">
-                <h3 className="text-lg font-semibold text-gray-900">Eligible Orders</h3>
-              </div>
-              <GridTable data={orders} columns={4} />
-            </div>
-          </div>
-        );
-      
-      case 'hadiah':
-        return (
-          <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Prize Management</h3>
-            <p className="text-gray-600">Prize configuration will be available here.</p>
-          </div>
-        );
-      
-      case 'winner':
-        return (
-          <div className="space-y-6">
-            {winners.length > 0 ? (
-              <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-                <div className="flex items-center justify-between mb-6">
-                  <h3 className="text-2xl font-semibold flex items-center gap-2 text-gray-900">
-                    <Trophy className="text-yellow-500" size={28} />
-                    Draw Results ({winners.length} Winners)
-                  </h3>
+              <h2 className="text-xl font-semibold mb-4 text-gray-900">
+                Actions
+              </h2>
+              
+              <div className="space-y-3">
+                <button
+                  onClick={shuffleAllRows}
+                  disabled={isLoadingData || spinRows.some(r => r.isShuffling) || spinRows.length === 0}
+                  className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors"
+                >
+                  <Shuffle size={16} className={spinRows.some(r => r.isShuffling) ? 'animate-pulse' : ''} />
+                  Shuffle All Rows
+                </button>
+                
+                <button
+                  onClick={revealWinnersDramatically}
+                  disabled={isRevealingWinners || spinRows.length === 0}
+                  className="w-full px-4 py-2 bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 disabled:from-gray-400 disabled:to-gray-500 text-white font-bold rounded-lg flex items-center justify-center gap-2 transition-all transform hover:scale-105"
+                >
+                  <Trophy size={16} className={isRevealingWinners ? 'animate-bounce' : ''} />
+                  {isRevealingWinners ? 'Revealing...' : 'Reveal All Winners'}
+                </button>
+                
+                {winnersHistory.length > 0 && (
                   <button
                     onClick={clearResults}
-                    className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
-                    disabled={isSpinning}
+                    className="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors"
                   >
                     <Trash2 size={16} />
                     Clear Results
                   </button>
-                </div>
-                
-                {/* Simple Winner List */}
-                <div className="space-y-3">
-                  {winners.map((winner) => (
+                )}
+              </div>
+            </div>
+
+            {/* Winners Summary Card */}
+            <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+              <h2 className="text-xl font-semibold mb-4 text-gray-900 flex items-center gap-2">
+                <Trophy className="text-yellow-500" size={24} />
+                Winners
+              </h2>
+              
+              {winnersHistory.length > 0 ? (
+                <div className="space-y-2 max-h-48 overflow-y-auto">
+                  {winnersHistory.map((history) => (
                     <div 
-                      key={`result-${winner.order.orderId}-${winner.timestamp.getTime()}`}
-                      className="flex items-center justify-between bg-gray-50 p-4 rounded-lg border border-gray-200"
+                      key={`${history.rowNumber}-${history.timestamp.getTime()}`}
+                      className="p-2 bg-yellow-50 border border-yellow-200 rounded text-sm"
                     >
-                      <div className="flex items-center gap-4">
-                        <div className="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">
-                          #{winner.position}
-                        </div>
-                        <div>
-                          <div className="font-bold text-lg text-gray-900">{winner.order.customerName}</div>
-                          <div className="text-gray-600 text-sm">{winner.order.orderId} • {winner.order.email}</div>
-                        </div>
+                      <div className="font-semibold text-yellow-700">
+                        Row {history.rowNumber}: {history.winner.name}
                       </div>
-                      
-                      <div className="text-right">
-                        <div className="text-primary font-bold text-lg">{formatCurrency(winner.order.amount)}</div>
-                        <div className="text-gray-500 text-xs">Won at: {winner.timestamp.toLocaleTimeString()}</div>
+                      <div className="text-xs text-yellow-600">
+                        {history.winner.voucher_code}
                       </div>
                     </div>
                   ))}
                 </div>
-              </div>
-            ) : (
-              <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-                <div className="text-center py-8">
-                  <Trophy className="mx-auto text-gray-400 mb-4" size={48} />
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">No Winners Yet</h3>
-                  <p className="text-gray-600">Start spinning to see the winners here!</p>
+              ) : (
+                <div className="text-center py-4">
+                  <Trophy className="mx-auto text-gray-300 mb-2" size={32} />
+                  <p className="text-gray-500 text-sm">No winners yet</p>
                 </div>
-              </div>
-            )}
-          </div>
-        );
-      
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-white text-gray-900 p-6">
-      <div className="max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-primary mb-2">Random Order Draw</h1>
-          <p className="text-gray-600">Select random winners from order database</p>
-        </div>
-
-        {/* Tabs */}
-        <div className="mb-6">
-          <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg w-fit mx-auto">
-            {[
-              { id: 'acak', label: 'acak' },
-              { id: 'hadiah', label: 'hadiah' },
-              { id: 'winner', label: 'winner' }
-            ].map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id as any)}
-                className={`px-6 py-2 rounded-md font-medium transition-colors ${
-                  activeTab === tab.id
-                    ? 'bg-white text-primary shadow-sm border-2 border-primary'
-                    : 'text-gray-600 hover:text-gray-900'
-                }`}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Main Layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-          
-          {/* Left Panel - Tab Content */}
-          <div className="space-y-6">
-            {renderTabContent()}
-          </div>
-
-          {/* Right Panel - Spin Wheel */}
-          <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
-            <h3 className="text-xl font-semibold mb-4 text-center text-gray-900">Spin Wheel</h3>
-            
-            {/* Wheel Container */}
-            <div 
-              className="relative w-full bg-gray-100 rounded-lg overflow-hidden border-2 border-primary" 
-              style={{ height: '500px' }}
-            >
-              {/* Winner Selection Zone */}
-              <div 
-                className="absolute left-0 right-0 z-50 border-2 border-red-500 bg-red-500/15"
-                style={{ 
-                  top: '200px',
-                  height: '100px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }}
-              >
-                {/* Left Arrow */}
-                <div 
-                  className="absolute w-0 h-0 border-t-transparent border-b-transparent border-r-red-500" 
-                  style={{ 
-                    left: '-20px',
-                    borderTopWidth: '20px', 
-                    borderBottomWidth: '20px', 
-                    borderRightWidth: '25px' 
-                  }}
-                ></div>
-                
-                {/* Winner Badge */}
-                <div className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold text-lg tracking-wider shadow-lg">
-                  🎯 WINNER 🎯
-                </div>
-                
-                {/* Right Arrow */}
-                <div 
-                  className="absolute w-0 h-0 border-t-transparent border-b-transparent border-l-red-500"
-                  style={{ 
-                    right: '-20px',
-                    borderTopWidth: '20px', 
-                    borderBottomWidth: '20px', 
-                    borderLeftWidth: '25px' 
-                  }}
-                ></div>
-              </div>
-
-              {/* Scrolling Cards */}
-              <div 
-                ref={wheelRef}
-                className="absolute inset-0"
-                style={{ transform: 'translateY(0px)' }}
-              >
-                {/* Generate enough cards for smooth scrolling */}
-                {Array.from({ length: 40 }, (_, repeatIndex) => 
-                  currentWheelItems.map((order, orderIndex) => {
-                    const isCurrentWinner = winners.some(winner => winner.order.orderId === order.orderId);
-                    const isSelectedWinner = selectedWinner?.orderId === order.orderId;
-                    
-                    return (
-                      <div
-                        key={`repeat-${repeatIndex}-order-${orderIndex}`}
-                        className={`flex items-center px-4 border-b border-gray-300 ${
-                          isCurrentWinner ? 'bg-primary/10' : 
-                          isSelectedWinner ? 'bg-yellow-100' :
-                          orderIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'
-                        }`}
-                        style={{ 
-                          height: '100px',
-                          minHeight: '100px',
-                          maxHeight: '100px'
-                        }}
-                      >
-                        {/* Order Info */}
-                        <div className="flex-1">
-                          <div className={`font-bold text-xl mb-1 ${
-                            isCurrentWinner ? 'text-primary' : 
-                            isSelectedWinner ? 'text-yellow-600' :
-                            'text-gray-900'
-                          }`}>
-                            {order.orderId}
-                          </div>
-                          <div className={`text-base ${
-                            isCurrentWinner ? 'text-primary/80' : 
-                            isSelectedWinner ? 'text-yellow-700' :
-                            'text-gray-600'
-                          }`}>
-                            {order.customerName}
-                          </div>
-                        </div>
-                        
-                        {/* Amount */}
-                        <div className="text-right">
-                          <div className="text-primary font-bold text-lg">
-                            {formatCurrency(order.amount)}
-                          </div>
-                          {(isCurrentWinner || isSelectedWinner) && (
-                            <Trophy className="inline ml-2 text-yellow-500" size={16} />
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })
-                )}
-              </div>
-              
-              {/* Gradient Overlays */}
-              <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-gray-100 via-gray-100/70 to-transparent pointer-events-none z-40"></div>
-              <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-gray-100 via-gray-100/70 to-transparent pointer-events-none z-40"></div>
+              )}
             </div>
           </div>
+
+          {/* Spin Rows - Display in grid */}
+          <div className={`grid gap-4 ${
+            spinRows.length === 1 ? 'grid-cols-1' :
+            spinRows.length === 2 ? 'grid-cols-1 lg:grid-cols-2' :
+            spinRows.length === 3 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' :
+            spinRows.length === 4 ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4' :
+            spinRows.length === 5 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5' :
+            'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+          }`}>
+            {spinRows.map((row) => (
+              <div key={row.id} className={`bg-white rounded-lg border-2 shadow-sm transition-all ${
+                row.isShuffling ? 'border-purple-400 animate-pulse' : 'border-gray-200'
+              }`}>
+                <div className="p-4 border-b border-gray-200">
+                  <div className="flex flex-col gap-2">
+                    <h3 className="text-base font-semibold text-gray-900">
+                      Row {row.rowNumber}
+                      <span className="text-sm text-gray-600 ml-1">({row.vouchers.length})</span>
+                    </h3>
+                    
+                    <button
+                      onClick={() => spinWheel(row.id)}
+                      disabled={row.isSpinning || row.winner !== null || row.isShuffling}
+                      className="w-full px-3 py-2 bg-primary hover:bg-primary/90 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors text-sm"
+                    >
+                      <RotateCw size={14} className={row.isSpinning ? 'animate-spin' : ''} />
+                      {row.isSpinning ? 'Spinning...' : row.winner ? 'Winner' : 'Spin'}
+                    </button>
+                  </div>
+                  
+                  {row.winner && (
+                    <div className="mt-2 p-2 bg-yellow-50 border border-yellow-200 rounded-lg animate-bounce-in">
+                      <div className="flex items-center gap-1 text-sm">
+                        <Trophy className="text-yellow-500" size={16} />
+                        <span className="font-semibold text-yellow-700 truncate">
+                          {row.winner.name}
+                        </span>
+                      </div>
+                      <div className="text-xs text-yellow-600 mt-1">
+                        {row.winner.voucher_code}
+                      </div>
+                    </div>
+                  )}
+                </div>
+                
+                {/* Wheel Container */}
+                <div 
+                  className="relative bg-gray-50 overflow-hidden" 
+                  style={{ height: '600px' }}
+                >
+                  {/* Winner Selection Zone - Exactly 80px matching card height */}
+                  <div 
+                    className="absolute left-0 right-0 z-50"
+                    style={{ 
+                      top: '260px',
+                      height: '80px',
+                      border: '3px solid #ef4444',
+                      backgroundColor: 'rgba(239, 68, 68, 0.15)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'flex-end',
+                      paddingRight: '10px'
+                    }}
+                  >
+                    <div className="bg-red-600 text-white px-3 py-1 rounded font-bold text-xs tracking-wider shadow-lg">
+                      WINNER
+                    </div>
+                  </div>
+
+                  {/* Scrolling Cards */}
+                  <div 
+                    ref={row.wheelRef}
+                    className="absolute inset-0"
+                    style={{ transform: 'translateY(0px)' }}
+                  >
+                    {Array.from({ length: 50 }, (_, repeatIndex) => 
+                      row.displayVouchers.map((voucher, voucherIndex) => {
+                        const isSelectedWinner = row.selectedWinner?.voucher_code === voucher.voucher_code;
+                        
+                        return (
+                          <div
+                            key={`${repeatIndex}-${voucherIndex}`}
+                            className={`flex items-center px-4 border-b border-gray-300 transition-colors ${
+                              isSelectedWinner ? 'bg-yellow-100' :
+                              voucherIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+                            }`}
+                            style={{ 
+                              height: '80px',
+                              minHeight: '80px',
+                              maxHeight: '80px'
+                            }}
+                          >
+                            <div className="flex-1">
+                              <div className={`font-bold text-lg mb-1 ${
+                                isSelectedWinner ? 'text-yellow-600' : 'text-gray-900'
+                              }`}>
+                                {voucher.voucher_code}
+                              </div>
+                              <div className={`text-sm ${
+                                isSelectedWinner ? 'text-yellow-700' : 'text-gray-600'
+                              }`}>
+                                {voucher.name}
+                              </div>
+                            </div>
+                            
+                            <div className="text-right">
+                              <div className="text-gray-500 text-xs">
+                                {formatPhoneNumber(voucher.phone_number)}
+                              </div>
+                              {isSelectedWinner && (
+                                <Trophy className="inline ml-2 text-yellow-500" size={16} />
+                              )}
+                            </div>
+                          </div>
+                        );
+                      })
+                    )}
+                  </div>
+                  
+                  {/* Gradient Overlays */}
+                  <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-gray-50 via-gray-50/70 to-transparent pointer-events-none z-40"></div>
+                  <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-50 via-gray-50/70 to-transparent pointer-events-none z-40"></div>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default RandomDrawApp;
+export default RandomDrawApp;
\ No newline at end of file
diff --git a/src/services/queries/vouchers.ts b/src/services/queries/vouchers.ts
new file mode 100644
index 0000000..1d4cdf4
--- /dev/null
+++ b/src/services/queries/vouchers.ts
@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query'
+import { VoucherRowsResponse } from '../../types/services/voucher'
+import { api } from '../api'
+
+export interface VouchersQueryParams {
+  rows?: number
+}
+
+export function useVoucherRows(params: VouchersQueryParams = {}) {
+  const { rows = 4 } = params
+
+  return useQuery<VoucherRowsResponse>({
+    queryKey: ['voucher-rows', { rows }],
+    queryFn: async () => {
+      const res = await api.get(`/vouchers/rows`, {
+        params: { rows }
+      })
+      return res.data.data
+    },
+    staleTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false
+  })
+}
+
+// Manual fetch function for cases where you need to fetch without using the hook
+export async function fetchVoucherRows(rows: number = 4): Promise<VoucherRowsResponse> {
+  const res = await api.get(`/vouchers/rows`, {
+    params: { rows }
+  })
+  return res.data.data
+}
\ No newline at end of file
diff --git a/src/types/services/voucher.ts b/src/types/services/voucher.ts
new file mode 100644
index 0000000..03eb4b9
--- /dev/null
+++ b/src/types/services/voucher.ts
@@ -0,0 +1,23 @@
+export interface Voucher {
+  voucher_code: string
+  name: string
+  phone_number: string
+  is_winner: boolean
+}
+
+export interface VoucherRow {
+  row_number: number
+  vouchers: Voucher[]
+}
+
+export interface VoucherRowsResponse {
+  rows: VoucherRow[]
+  total_rows: number
+  total_vouchers: number
+}
+
+export interface VoucherApiResponse {
+  success: boolean
+  data: VoucherRowsResponse
+  errors: any
+}
\ No newline at end of file