diff --git a/src/App.tsx b/src/App.tsx
index f0d1435..1ace027 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,4 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-// import './App.css' // Removed, now using TailwindCSS
 import React from 'react'; // Added for useEffect
 
 // --- Scratch Card Game Types and State ---
@@ -21,7 +18,8 @@ function App() {
   // --- Game State ---
   const [money, setMoney] = useState(20); // User starts with $20
   const [unlockedTiers, setUnlockedTiers] = useState<string[]>([]); // Unlocked tier names
-  const [selectedTier, setSelectedTier] = useState<string | null>(null); // Currently selected tier
+  // Remove selectedTier state
+  // const [selectedTier, setSelectedTier] = useState<string | null>(null); // Currently selected tier
   const [count, setCount] = useState(0)
 
   // --- Card State ---
@@ -48,17 +46,16 @@ function App() {
   };
 
   // --- Tier Select Logic ---
-  const handleSelectTier = (tier: Tier) => {
-    if (unlockedTiers.includes(tier.name)) {
-      setSelectedTier(tier.name);
-    }
-  };
+  // Remove handleSelectTier
+  // const handleSelectTier = (tier: Tier) => {
+  //   if (unlockedTiers.includes(tier.name)) {
+  //     setSelectedTier(tier.name);
+  //   }
+  // };
 
-  // --- Buy Card Logic ---
-  const handleBuyCard = () => {
-    if (!selectedTier) return;
-    const tier = TIERS.find((t) => t.name === selectedTier);
-    if (!tier || money < tier.buyPrice) return;
+  // Update handleBuyCard to accept tier as argument
+  const handleBuyCard = (tier: Tier) => {
+    if (!unlockedTiers.includes(tier.name) || money < tier.buyPrice) return;
     // Generate 3 unique winning numbers (1-9)
     const winningNumbers: number[] = [];
     while (winningNumbers.length < 3) {
@@ -115,10 +112,11 @@ function App() {
                 </button>
               ) : (
                 <button
-                  className={`bg-blue-500 hover:bg-blue-600 text-white font-bold px-4 py-1 rounded mb-1 ${selectedTier === tier.name ? 'ring-2 ring-blue-400' : ''}`}
-                  onClick={() => handleSelectTier(tier)}
+                  className="bg-green-500 hover:bg-green-600 text-white font-bold px-4 py-1 rounded mb-1 disabled:opacity-50"
+                  disabled={money < tier.buyPrice}
+                  onClick={() => handleBuyCard(tier)}
                 >
-                  {selectedTier === tier.name ? 'Selected' : 'Select'}
+                  Buy Card
                 </button>
               )}
             </div>
@@ -126,55 +124,13 @@ function App() {
         })}
       </div>
       {/* Tier Info and Card Summary */}
-      {selectedTier && (
-        <div className="mb-4 text-sm text-gray-700">
-          <span className="font-semibold">Selected Tier:</span> {selectedTier} | 
-          <span className="ml-2">Unlock: ${TIERS.find(t => t.name === selectedTier)?.unlockPrice}</span> | 
-          <span className="ml-2">Buy: ${TIERS.find(t => t.name === selectedTier)?.buyPrice}</span>
-        </div>
-      )}
+      {/* Remove all selectedTier-dependent UI (selected tier info, buy button outside tier cards, etc.) */}
       {card && (
         <div className="mb-2 text-sm text-gray-600">
           <span className="font-semibold">Winnings this card: </span>
           ${card.fields.reduce((sum, f) => sum + (f.won || 0), 0)}
         </div>
       )}
-      {/* Play History */}
-      {history.length > 0 && (
-        <div className="w-full max-w-md mb-8">
-          <div className="font-semibold text-gray-700 mb-2">Play History</div>
-          <ul className="divide-y divide-gray-200 bg-white rounded-lg shadow">
-            {history.map((h, i) => (
-              <li key={i} className="p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <span className="font-bold text-blue-600">{h.tier}</span>
-                  <span className="ml-2 text-gray-500">Win: ${h.winnings}</span>
-                </div>
-                <div className="flex gap-2 mt-2 sm:mt-0">
-                  {h.winningNumbers.map((n, j) => (
-                    <span key={j} className="w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-700 text-xs font-bold border border-blue-300">{n}</span>
-                  ))}
-                </div>
-                <div className="flex gap-1 mt-2 sm:mt-0">
-                  {h.fields.map((n, j) => (
-                    <span key={j} className="w-5 h-5 flex items-center justify-center rounded bg-gray-100 text-gray-700 text-xs border border-gray-300">{n}</span>
-                  ))}
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      {/* Card Buy Button */}
-      {selectedTier && (
-        <button
-          className="mb-6 bg-green-500 hover:bg-green-600 text-white font-bold px-6 py-2 rounded disabled:opacity-50"
-          disabled={money < (TIERS.find(t => t.name === selectedTier)?.buyPrice ?? 0)}
-          onClick={handleBuyCard}
-        >
-          Buy Scratch Card
-        </button>
-      )}
       {/* Card UI */}
       {card && (
         <div className="bg-white rounded-lg shadow p-6 flex flex-col items-center mb-6 w-full max-w-md">
@@ -221,6 +177,32 @@ function App() {
           <div className="text-xs text-gray-500">Scratch each field one at a time. Winnings: 1-2 = 50%, 3-4 = 80%, 5-6 = 120% of card price.</div>
         </div>
       )}
+      {/* Play History */}
+      {history.length > 0 && (
+        <div className="w-full max-w-md mb-8">
+          <div className="font-semibold text-gray-700 mb-2">Play History</div>
+          <ul className="divide-y divide-gray-200 bg-white rounded-lg shadow">
+            {history.map((h, i) => (
+              <li key={i} className="p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <span className="font-bold text-blue-600">{h.tier}</span>
+                  <span className="ml-2 text-gray-500">Win: ${h.winnings}</span>
+                </div>
+                <div className="flex gap-2 mt-2 sm:mt-0">
+                  {h.winningNumbers.map((n, j) => (
+                    <span key={j} className="w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-700 text-xs font-bold border border-blue-300">{n}</span>
+                  ))}
+                </div>
+                <div className="flex gap-1 mt-2 sm:mt-0">
+                  {h.fields.map((n, j) => (
+                    <span key={j} className="w-5 h-5 flex items-center justify-center rounded bg-gray-100 text-gray-700 text-xs border border-gray-300">{n}</span>
+                  ))}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   )
 }