diff --git a/components/CoflCoins/CoflCoinsPurchase.tsx b/components/CoflCoins/CoflCoinsPurchase.tsx
index dab7f63f4..18d332b63 100644
--- a/components/CoflCoins/CoflCoinsPurchase.tsx
+++ b/components/CoflCoins/CoflCoinsPurchase.tsx
@@ -7,9 +7,8 @@ import { postApiTopupPlaystore } from '../../api/_generated/skyApi'
 import { useCoflCoins } from '../../utils/Hooks'
 import CoflCoinPurchaseWizard from './CoflCoinPurchaseWizard'
 import PurchaseElement from './PurchaseElement'
-import { Country, getCountry, getCountryFromUserLanguage } from '../../utils/CountryUtils'
 import CountrySelect from '../CountrySelect/CountrySelect'
-import { USER_COUNTRY_CODE } from '../../utils/SettingsUtils'
+import { useCountryDetection } from '../../hooks/useCountryDetection'
 import styles from './CoflCoinsPurchase.module.css'
 
 interface Props {
@@ -21,8 +20,7 @@ function Payment(props: Props) {
     let [loadingId, setLoadingId] = useState('')
     let [currentRedirectLink, setCurrentRedirectLink] = useState('')
     let [showAll, setShowAll] = useState(false)
-    let [defaultCountry, setDefaultCountry] = useState<Country>()
-    let [selectedCountry, setSelectedCountry] = useState<Country>()
+    const { selectedCountry, handleCountryChange } = useCountryDetection()
     let [useWizard, setUseWizard] = useState(true)
     let [isGooglePlayAvailable, setIsGooglePlayAvailable] = useState(false)
     let coflCoins = useCoflCoins()
@@ -63,9 +61,6 @@ function Payment(props: Props) {
             }
         }
 
-        // Load country
-        loadDefaultCountry()
-
         // Check for Android Billing availability with a delay
         setTimeout(() => {
             checkGooglePlayAvailability()
@@ -161,39 +156,6 @@ function Payment(props: Props) {
         setIsGooglePlayAvailable(available)
     }
 
-    async function loadDefaultCountry() {
-        let cachedCountryCode = localStorage.getItem(USER_COUNTRY_CODE)
-        if (cachedCountryCode) {
-            setDefaultCountry(getCountry(cachedCountryCode))
-            setSelectedCountry(getCountry(cachedCountryCode))
-            return
-        }
-
-        let response: Response | null = null
-        try {
-            response = await fetch('https://api.country.is')
-        } catch (error) {
-            console.warn('Failed to fetch country from api.country.is:', error)
-            // Fallback to country from browser language
-            let country = getCountryFromUserLanguage()
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-            return
-        }
-
-        if (response && response.ok) {
-            let result = await response.json()
-            let country = getCountry(result.country) || getCountryFromUserLanguage()
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-            localStorage.setItem(USER_COUNTRY_CODE, result.country)
-        } else {
-            let country = getCountryFromUserLanguage()
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-        }
-    }
-
     function onPayPaypal(productId: string, coflCoins?: number) {
         setLoadingId(coflCoins ? `${productId}_${coflCoins}` : productId)
         setCurrentRedirectLink('')
@@ -294,11 +256,7 @@ function Payment(props: Props) {
     if (!props.cancellationRightLossConfirmed || !selectedCountry) {
         return (
             <div>
-                {defaultCountry ? (
-                    <CountrySelect key="country-select" isLoading={!defaultCountry} defaultCountry={defaultCountry} onCountryChange={setSelectedCountry} />
-                ) : (
-                    <CountrySelect key="loading-country-select" isLoading />
-                )}
+                <CountrySelect onCountryChange={handleCountryChange} />
 
                 {!props.cancellationRightLossConfirmed && (
                     <Alert variant="warning" style={{ marginTop: '20px' }}>
@@ -320,16 +278,7 @@ function Payment(props: Props) {
             <div>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                     <div>
-                        {defaultCountry ? (
-                            <CountrySelect
-                                key="country-select"
-                                isLoading={!defaultCountry}
-                                defaultCountry={defaultCountry}
-                                onCountryChange={setSelectedCountry}
-                            />
-                        ) : (
-                            <CountrySelect key="loading-country-select" isLoading />
-                        )}
+                        <CountrySelect onCountryChange={handleCountryChange} />
                     </div>
                     <Button variant="outline-secondary" size="sm" onClick={() => setUseWizard(false)}>
                         Switch to Classic View
@@ -354,11 +303,7 @@ function Payment(props: Props) {
         <div>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                 <div>
-                    {defaultCountry ? (
-                        <CountrySelect key="country-select" isLoading={!defaultCountry} defaultCountry={defaultCountry} onCountryChange={setSelectedCountry} />
-                    ) : (
-                        <CountrySelect key="loading-country-select" isLoading />
-                    )}
+                    <CountrySelect onCountryChange={handleCountryChange} />
                 </div>
                 <Button variant="outline-primary" size="sm" onClick={() => setUseWizard(true)}>
                     Switch to New Wizard
diff --git a/components/CountrySelect/CountrySelect.tsx b/components/CountrySelect/CountrySelect.tsx
index 57f22addb..756accd8e 100644
--- a/components/CountrySelect/CountrySelect.tsx
+++ b/components/CountrySelect/CountrySelect.tsx
@@ -1,19 +1,19 @@
 'use client'
-import { useRef, useState, type JSX } from 'react'
+import { useId, useRef, type JSX } from 'react'
 import { Menu, MenuItem, Typeahead } from 'react-bootstrap-typeahead'
 import { Form, InputGroup } from 'react-bootstrap'
 import { Country, getCountries } from '../../utils/CountryUtils'
 import { default as TypeaheadType } from 'react-bootstrap-typeahead/types/core/Typeahead'
+import { useCountryDetection } from '../../hooks/useCountryDetection'
 
 interface Props {
     onCountryChange?(country: Country)
-    defaultCountry?: Country
-    isLoading?: boolean
 }
 
 export default function CountrySelect(props: Props) {
+    const key = useId()
     const countryOptions = getCountries()
-    let [selectedCountry, setSelectedCountryCode] = useState<any>(props.defaultCountry)
+    let { selectedCountry, handleCountryChange } = useCountryDetection();
     let ref = useRef<TypeaheadType>(null)
 
     function getCountryImage(countryCode: string): JSX.Element {
@@ -28,20 +28,22 @@ export default function CountrySelect(props: Props) {
             />
         )
     }
+
     return (
         <div style={{ display: 'flex', alignItems: 'center', gap: 15, paddingBottom: 15 }}>
             <label htmlFor="countryTypeahead">Your Country: </label>
             <Typeahead
+                key={`${key}-${!selectedCountry ? 'disabled' : 'enabled'}`}
                 id="countryTypeahead"
                 style={{ width: 'auto' }}
-                disabled={props.isLoading}
-                placeholder={props.isLoading ? 'Loading...' : 'Select your country'}
+                disabled={!selectedCountry}
+                placeholder={!selectedCountry ? 'Loading...' : 'Select your country'}
                 ref={ref}
                 defaultSelected={selectedCountry ? [selectedCountry] : []}
-                isLoading={props.isLoading}
+                isLoading={!selectedCountry}
                 onChange={e => {
                     if (e[0]) {
-                        setSelectedCountryCode(e[0])
+                        handleCountryChange(e[0] as Country)
                         if (props.onCountryChange) {
                             props.onCountryChange(e[0] as Country)
                         }
diff --git a/components/Premium/BuyPremium/BuyPremium.tsx b/components/Premium/BuyPremium/BuyPremium.tsx
index d19e666ab..7aa87799e 100644
--- a/components/Premium/BuyPremium/BuyPremium.tsx
+++ b/components/Premium/BuyPremium/BuyPremium.tsx
@@ -169,26 +169,6 @@ function BuyPremium(props: Props) {
         return props.selectedTier ? getTierDisplayName(props.selectedTier) : purchasePremiumType.label
     }
 
-    const getDurationDisplayName = () => {
-        if (!props.selectedDuration) return getDurationString()
-        switch (props.selectedDuration) {
-            case Duration.HOUR:
-                return '1 Hour'
-            case Duration.WEEK:
-                return '1 Week'
-            case Duration.MONTHLY:
-                return '1 Month'
-            case Duration.QUARTER:
-                return '3 Months'
-            case Duration.QUARTER:
-                return 'Quarterly'
-            case Duration.YEARLY:
-                return 'Yearly'
-            default:
-                return getDurationString()
-        }
-    }
-
     // If coming from wizard, show only the selected option with summary
     if (props.selectedTier && props.selectedDuration !== undefined) {
         return (
diff --git a/components/Premium/BuySubscription/BuySubscription.tsx b/components/Premium/BuySubscription/BuySubscription.tsx
index a7fad8bad..00839e18d 100644
--- a/components/Premium/BuySubscription/BuySubscription.tsx
+++ b/components/Premium/BuySubscription/BuySubscription.tsx
@@ -18,6 +18,7 @@ import {
     getTierApiProductId,
     VAT_RATES
 } from '../../../utils/PricingUtils'
+import { useCountryDetection } from '../../../hooks/useCountryDetection'
 
 interface Props {
     activePremiumProduct: PremiumProduct
@@ -40,11 +41,8 @@ function BuySubscription(props: Props) {
     const [pendingYearlyDiscount, setPendingYearlyDiscount] = useState<ValidatedDiscount | null>(null)
     const [isValidatingDiscount, setIsValidatingDiscount] = useState(false)
     const [discountError, setDiscountError] = useState<string | null>(null)
-
-    // Get country code from prop or localStorage
-    const countryCode = (props.countryCode && props.countryCode.length > 0)
-        ? props.countryCode
-        : (typeof window !== 'undefined' ? localStorage.getItem('countryCode') || 'US' : 'US')
+    const { selectedCountry } = useCountryDetection()
+    const country = props.countryCode || selectedCountry?.value || 'US'
 
     useEffect(() => {
         fetchPricing(creatorCode)
@@ -85,7 +83,7 @@ function BuySubscription(props: Props) {
 
             const response = await postApiTopupRates({
                 productSlugs: productSlugs,
-                countryCode: countryCode,
+                countryCode: country,
                 creatorCode: code || null
             }, {
                 headers: headers
@@ -217,15 +215,13 @@ function BuySubscription(props: Props) {
 
     // Get VAT rate for current country
     const getVATRate = (): number => {
-        if (!countryCode) return 0
-        const upperCode = countryCode.toUpperCase()
+        const upperCode = country.toUpperCase()
         return VAT_RATES[upperCode] ?? 0
     }
 
     // Check if VAT should be included in the price (known country with VAT rate)
     const shouldIncludeVATInPrice = (): boolean => {
-        if (!countryCode) return false
-        const upperCode = countryCode.toUpperCase()
+        const upperCode = country.toUpperCase()
         return upperCode !== 'US' && VAT_RATES[upperCode] !== undefined
     }
 
@@ -285,9 +281,6 @@ function BuySubscription(props: Props) {
         })
         : undefined
 
-    const wizardIsYearOption = props.selectedDuration === Duration.YEARLY
-    const wizardIsQuarterOption = props.selectedDuration === Duration.QUARTER
-
     // Helper to get the current duration for product ID
     const getCurrentDuration = (): Duration => {
         return props.selectedDuration || Duration.MONTHLY
diff --git a/components/Premium/PremiumPurchaseWizard/PremiumPurchaseWizard.tsx b/components/Premium/PremiumPurchaseWizard/PremiumPurchaseWizard.tsx
index f9a6aa7ae..a7d3035aa 100644
--- a/components/Premium/PremiumPurchaseWizard/PremiumPurchaseWizard.tsx
+++ b/components/Premium/PremiumPurchaseWizard/PremiumPurchaseWizard.tsx
@@ -7,6 +7,7 @@ import { PremiumTier, PurchaseType, Duration } from './types'
 import { TierSelectionStep, PaymentMethodStep, DurationSelectionStep, PurchaseCompletionStep } from './Steps'
 import { PREMIUM_RANK } from '../../../utils/PremiumTypeUtils'
 import { parseTierFromUrl } from '../../../utils/PremiumUpgradeUtils'
+import { useCountryDetection } from '../../../hooks/useCountryDetection'
 
 interface Props {
     activePremiumProduct: PremiumProduct
@@ -21,17 +22,10 @@ function PremiumPurchaseWizard(props: Props) {
     const [selectedType, setSelectedType] = useState<PurchaseType | null>(null)
     const [selectedDuration, setSelectedDuration] = useState<Duration | null>(null)
     const [urlDiscountCode, setUrlDiscountCode] = useState<string | null>(null)
-    const [countryCode, setCountryCode] = useState<string>('US')
+    const { selectedCountry, handleCountryChange } = useCountryDetection()
 
     const totalSteps = 4
 
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const stored = localStorage.getItem('countryCode')
-            if (stored) setCountryCode(stored)
-        }
-    }, [])
-
     const getCurrentTier = (): PremiumTier | null => {
         if (!props.activePremiumProduct) return null
 
@@ -182,7 +176,8 @@ function PremiumPurchaseWizard(props: Props) {
                         isUpgrade={isUpgrade}
                         suggestedTier={suggestedTier}
                         activePremiumProduct={props.activePremiumProduct}
-                        onCountryCodeChange={setCountryCode}
+                        selectedCountry={selectedCountry}
+                        onCountryChange={handleCountryChange}
                     />
                 )
             case 2:
@@ -194,7 +189,7 @@ function PremiumPurchaseWizard(props: Props) {
                         selectedTier={selectedTier!}
                         selectedDuration={selectedDuration}
                         onDurationSelect={handleDurationSelect}
-                        countryCode={countryCode}
+                        countryCode={selectedCountry?.value}
                     />
                 )
             case 4:
@@ -207,7 +202,7 @@ function PremiumPurchaseWizard(props: Props) {
                         premiumSubscriptions={props.premiumSubscriptions}
                         onNewActivePremiumProduct={props.onNewActivePremiumProduct}
                         initialDiscountCode={urlDiscountCode}
-                        countryCode={countryCode}
+                        countryCode={selectedCountry?.value}
                     />
                 )
             default:
diff --git a/components/Premium/PremiumPurchaseWizard/Steps/PurchaseCompletionStep.tsx b/components/Premium/PremiumPurchaseWizard/Steps/PurchaseCompletionStep.tsx
index e5d590617..9df0bb795 100644
--- a/components/Premium/PremiumPurchaseWizard/Steps/PurchaseCompletionStep.tsx
+++ b/components/Premium/PremiumPurchaseWizard/Steps/PurchaseCompletionStep.tsx
@@ -44,8 +44,6 @@ export default function PurchaseCompletionStep({
                     selectedTier={selectedTier}
                     selectedDuration={selectedDuration}
                     initialDiscountCode={initialDiscountCode}
-                    // pass countryCode if BuyPremium ever needs VAT-aware logic
-                    // countryCode={countryCode}
                 />
             )}
         </div>
diff --git a/components/Premium/PremiumPurchaseWizard/Steps/TierCard.tsx b/components/Premium/PremiumPurchaseWizard/Steps/TierCard.tsx
new file mode 100644
index 000000000..fe78b945c
--- /dev/null
+++ b/components/Premium/PremiumPurchaseWizard/Steps/TierCard.tsx
@@ -0,0 +1,67 @@
+import { ReactNode } from 'react'
+import { Card } from 'react-bootstrap'
+import styles from './Steps.module.css'
+import { PremiumTier } from '../types'
+
+export interface TierConfig {
+    tier: PremiumTier
+    icon: string
+    title: string
+    titleClass?: string
+    features: string[]
+    description: string
+    upgradeDescription?: string
+}
+
+export type TierStatus = 'current' | 'downgrade' | 'upgrade' | 'higher-upgrade' | ''
+
+interface TierCardProps {
+    config: TierConfig
+    pricing: ReactNode
+    status: TierStatus
+    isSuggested: boolean
+    canSelect: boolean
+    onSelect: (tier: PremiumTier) => void
+    extraBadge?: string
+    suggestedFeature?: string
+}
+
+export default function TierCard({ config, pricing, status, isSuggested, canSelect, onSelect, extraBadge, suggestedFeature }: TierCardProps) {
+    const { tier, icon, title, titleClass, features, description, upgradeDescription } = config
+
+    const cardClassName = [
+        styles.optionCard,
+        !canSelect && styles.disabled,
+        status === 'current' && styles.currentTier,
+        isSuggested && styles.suggested
+    ]
+        .filter(Boolean)
+        .join(' ')
+
+    return (
+        <Card className={cardClassName} onClick={() => canSelect && onSelect(tier)}>
+            <Card.Body className={styles.optionBody}>
+                <div className={styles.optionIcon}>{icon}</div>
+                <h5 className={[styles.tierTitle, titleClass && styles[titleClass]].filter(Boolean).join(' ')}>
+                    {title}
+                    {status === 'current' && <span className={styles.currentBadge}>Current</span>}
+                    {isSuggested && <span className={styles.suggestedBadge}>Recommended Upgrade</span>}
+                </h5>
+                <div className={styles.tierPrice}>{pricing}</div>
+                <p className={styles.tierDescription}>{isSuggested && upgradeDescription ? upgradeDescription : description}</p>
+                {extraBadge && !isSuggested && <small className={styles.recommendation}>{extraBadge}</small>}
+                {!canSelect && (
+                    <div className={styles.disabledOverlay}>
+                        <small>Cannot downgrade</small>
+                    </div>
+                )}
+                <ul className={styles.featureList}>
+                    {features.map(feature => (
+                        <li key={feature}>{feature}</li>
+                    ))}
+                    {suggestedFeature && isSuggested && <li className={styles.newFeature}>{suggestedFeature}</li>}
+                </ul>
+            </Card.Body>
+        </Card>
+    )
+}
diff --git a/components/Premium/PremiumPurchaseWizard/Steps/TierSelectionStep.tsx b/components/Premium/PremiumPurchaseWizard/Steps/TierSelectionStep.tsx
index d5b95e13b..ccb0015c1 100644
--- a/components/Premium/PremiumPurchaseWizard/Steps/TierSelectionStep.tsx
+++ b/components/Premium/PremiumPurchaseWizard/Steps/TierSelectionStep.tsx
@@ -1,168 +1,139 @@
-'use client'
-import { useEffect, useState } from 'react'
-import { Card } from 'react-bootstrap'
 import styles from './Steps.module.css'
-import { PremiumTier } from '../types'
+import { PremiumTier, getTierDisplayName } from '../types'
 import { calculatePrice } from '../../../../utils/PricingUtils'
-import { Country, getCountry, getCountryFromUserLanguage } from '../../../../utils/CountryUtils'
 import CountrySelect from '../../../CountrySelect/CountrySelect'
-import { USER_COUNTRY_CODE } from '../../../../utils/SettingsUtils'
+import TierCard, { TierConfig, TierStatus } from './TierCard'
+import { Country } from '../../../../utils/CountryUtils'
 
-interface Props {
-    onTierSelect(tier: PremiumTier): void
-    currentTier?: PremiumTier | null
-    isUpgrade?: boolean
-    suggestedTier?: PremiumTier | null
-    activePremiumProduct?: PremiumProduct
-    onCountryCodeChange?: (countryCode: string) => void
-}
 interface ActiveDiscount {
     description: string
     percentage: number
     code: string
 }
 
-export default function TierSelectionStep({ onTierSelect, currentTier, isUpgrade, suggestedTier, activePremiumProduct, onCountryCodeChange }: Props) {
-    const [selectedCountry, setSelectedCountry] = useState<Country>()
-    const [defaultCountry, setDefaultCountry] = useState<Country>()
-
-    const handleCountryChange = (country: Country) => {
-        setSelectedCountry(country)
-        if (onCountryCodeChange && country.value) {
-            onCountryCodeChange(country.value)
-            localStorage.setItem('countryCode', country.value)
-            localStorage.setItem(USER_COUNTRY_CODE, country.value)
-        }
+const TIER_CONFIGS: TierConfig[] = [
+    {
+        tier: PremiumTier.STARTER,
+        icon: '⭐',
+        title: 'Starter',
+        features: ['Basic price alerts', 'Everything you need to start', 'Ad-free experience'],
+        description: 'Essential features for casual players'
+    },
+    {
+        tier: PremiumTier.PREMIUM,
+        icon: '🌟',
+        title: 'Premium',
+        titleClass: 'tierPremium',
+        features: ['Optimized bazaar flips', '1 year auction house searches', 'Lowball helper'],
+        description: 'All Starter features plus advanced tools',
+        upgradeDescription: 'Upgrade from Starter to unlock advanced features'
+    },
+    {
+        tier: PremiumTier.PREMIUM_PLUS,
+        icon: '🚀',
+        title: 'Premium Plus',
+        titleClass: 'tierPremiumPlus',
+        features: ['Fastest auction flips', '6 year data exports', 'Realtime market analysis', 'Access to BazaarPro'],
+        description: 'All Premium features plus exclusive access to',
+        upgradeDescription: 'Upgrade to Premium Plus for the fastest experience'
     }
+]
 
-    useEffect(() => {
-        loadDefaultCountry()
-    }, [])
+const TIER_RANKS: Record<PremiumTier, number> = {
+    [PremiumTier.STARTER]: 1,
+    [PremiumTier.PREMIUM]: 2,
+    [PremiumTier.PREMIUM_PLUS]: 3
+}
 
-    async function loadDefaultCountry() {
-        let cachedCountryCode = localStorage.getItem(USER_COUNTRY_CODE)
-        if (cachedCountryCode) {
-            const country = getCountry(cachedCountryCode)
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-            // ensure both keys exist for other components
-            try {
-                localStorage.setItem('countryCode', cachedCountryCode)
-            } catch { }
-            return
-        }
+function getTierRank(tier: PremiumTier): number {
+    return TIER_RANKS[tier] ?? 0
+}
 
-        let response: Response | null = null
-        try {
-            response = await fetch('https://api.country.is')
-        } catch {
-            console.error('Failed to fetch country from api.country.is')
-        }
+function canSelectTier(tier: PremiumTier, currentTier?: PremiumTier | null, isUpgrade?: boolean): boolean {
+    if (!isUpgrade || !currentTier) return true
+    return getTierRank(tier) > getTierRank(currentTier)
+}
 
-        if (response && response.ok) {
-            let result = await response.json()
-            let country = getCountry(result.country) || getCountryFromUserLanguage()
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-            if (onCountryCodeChange && country && country.value) {
-                onCountryCodeChange(country.value)
-                localStorage.setItem('countryCode', country.value)
-                localStorage.setItem(USER_COUNTRY_CODE, country.value)
-            } else {
-                // still persist detected country
-                try {
-                    if (country && country.value) {
-                        localStorage.setItem('countryCode', country.value)
-                        localStorage.setItem(USER_COUNTRY_CODE, country.value)
-                    } else {
-                        localStorage.setItem(USER_COUNTRY_CODE, result.country)
-                    }
-                } catch { }
-            }
-        } else {
-            let country = getCountryFromUserLanguage()
-            setDefaultCountry(country)
-            setSelectedCountry(country)
-            if (onCountryCodeChange && country && country.value) {
-                onCountryCodeChange(country.value)
-                localStorage.setItem('countryCode', country.value)
-                localStorage.setItem(USER_COUNTRY_CODE, country.value)
-            } else {
-                try {
-                    if (country && country.value) {
-                        localStorage.setItem('countryCode', country.value)
-                        localStorage.setItem(USER_COUNTRY_CODE, country.value)
-                    }
-                } catch { }
-            }
-        }
-    }
+function getTierStatus(tier: PremiumTier, currentTier?: PremiumTier | null, isUpgrade?: boolean): TierStatus {
+    if (!isUpgrade || !currentTier) return ''
+    const currentRank = getTierRank(currentTier)
+    const tierRank = getTierRank(tier)
 
-    const starterPricing = calculatePrice(PremiumTier.STARTER, selectedCountry?.value)
-    const premiumPricing = calculatePrice(PremiumTier.PREMIUM, selectedCountry?.value)
-    const premiumPlusPricing = calculatePrice(PremiumTier.PREMIUM_PLUS, selectedCountry?.value)
-    const discountInfo: ActiveDiscount = {
-        description: 'Summer End Discount',
-        percentage: 0,
-        code: 'NOMACRO'
-    }
-    const premiumPlusDiscounted = calculatePrice(PremiumTier.PREMIUM_PLUS, selectedCountry?.value, discountInfo.percentage) // 10% discount
+    if (tierRank === currentRank) return 'current'
+    if (tierRank < currentRank) return 'downgrade'
+    if (tierRank === currentRank + 1) return 'upgrade'
+    return 'higher-upgrade'
+}
 
-    const getTierRank = (tier: PremiumTier): number => {
-        switch (tier) {
-            case PremiumTier.STARTER:
-                return 1
-            case PremiumTier.PREMIUM:
-                return 2
-            case PremiumTier.PREMIUM_PLUS:
-                return 3
-            default:
-                return 0
-        }
-    }
+interface Props {
+    onTierSelect(tier: PremiumTier): void
+    currentTier?: PremiumTier | null
+    isUpgrade?: boolean
+    suggestedTier?: PremiumTier | null
+    activePremiumProduct?: PremiumProduct
+    selectedCountry?: Country
+    onCountryChange: (country: Country) => void
+}
 
-    const canSelectTier = (tier: PremiumTier): boolean => {
-        if (!isUpgrade || !currentTier) return true
-        return getTierRank(tier) > getTierRank(currentTier)
-    }
+const DISCOUNT: ActiveDiscount = {
+    description: 'Summer End Discount',
+    percentage: 0,
+    code: 'NOMACRO'
+}
 
-    const isSuggestedTier = (tier: PremiumTier): boolean => {
-        return suggestedTier === tier
-    }
+const SUGGESTED_FEATURES: Partial<Record<PremiumTier, string>> = {
+    [PremiumTier.PREMIUM]: '🆕 Enhanced flip detection',
+    [PremiumTier.PREMIUM_PLUS]: 'Advanced money making methods (soon™️)'
+}
 
-    const getTierStatus = (tier: PremiumTier): string => {
-        if (!isUpgrade || !currentTier) return ''
+const EXTRA_BADGES: Partial<Record<PremiumTier, string>> = {
+    [PremiumTier.PREMIUM]: 'Most Popular'
+}
 
-        const currentRank = getTierRank(currentTier)
-        const tierRank = getTierRank(tier)
+function formatExpiryDate(date: Date): string {
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    })
+}
 
-        if (tierRank === currentRank) return 'current'
-        if (tierRank < currentRank) return 'downgrade'
-        if (tierRank === currentRank + 1) return 'upgrade'
-        return 'higher-upgrade'
-    }
+function DiscountedPrice({ tier, countryCode, discount }: { tier: PremiumTier; countryCode?: string; discount: ActiveDiscount }) {
+    const basePrice = calculatePrice(tier, countryCode)
+    const discountedPrice = calculatePrice(tier, countryCode, discount.percentage)
 
-    const formatExpiryDate = (date: Date): string => {
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-        })
+    if (discount.percentage <= 0) {
+        return <>{basePrice.displayText}</>
     }
 
+    return (
+        <>
+            (yearly) starts at <br />
+            <span style={{ textDecoration: 'line-through', marginRight: 8, opacity: 0.7 }}>{basePrice.displayText}</span>
+            <br />
+            <span>{discountedPrice.displayText}</span>
+            <br />
+            <small style={{ cursor: 'help' }} className="text-success" title={`Apply code ${discount.code} at checkout to receive ${discount.percentage}% off`}>
+                -{discount.percentage}% with code <strong>{discount.code}</strong> *
+            </small>
+        </>
+    )
+}
+
+export default function TierSelectionStep({ onTierSelect, currentTier, isUpgrade, suggestedTier, activePremiumProduct, selectedCountry, onCountryChange }: Props) {
+
+    const tierDisplayName = currentTier ? getTierDisplayName(currentTier) : ''
+
     return (
         <div className={styles.stepContent}>
-            <h4 className={styles.stepQuestion}>{isUpgrade ? `Upgrade Your Premium` : 'Which premium tier would you like?'}</h4>
+            <h4 className={styles.stepQuestion}>{isUpgrade ? 'Upgrade Your Premium' : 'Which premium tier would you like?'}</h4>
             <p className={styles.stepDescription}>
                 {isUpgrade ? (
                     <>
-                        You currently have{' '}
-                        <strong>
-                            {currentTier === PremiumTier.STARTER ? 'Starter Premium' : currentTier === PremiumTier.PREMIUM ? 'Premium' : 'Premium Plus'}
-                        </strong>{' '}
-                        active until <strong>{activePremiumProduct ? formatExpiryDate(activePremiumProduct.expires) : 'Unknown'}</strong>.
+                        You currently have <strong>{tierDisplayName}</strong> active until{' '}
+                        <strong>{activePremiumProduct ? formatExpiryDate(activePremiumProduct.expires) : 'Unknown'}</strong>.
                         <br />
                         When you upgrade, your existing tier will be paused and you'll get the full benefits of the higher tier. Nothing will be lost - your
                         previous tier will resume when the upgrade expires.
@@ -172,151 +143,45 @@ export default function TierSelectionStep({ onTierSelect, currentTier, isUpgrade
                 )}
             </p>
 
-            {/* Upgrade Info Box */}
             {isUpgrade && (
                 <div className={styles.infoBox}>
                     <div className={styles.checkIcon}>ℹ️</div>
                     <div>
-                        <strong>Upgrade Protection:</strong> Your current{' '}
-                        {currentTier === PremiumTier.STARTER ? 'Starter Premium' : currentTier === PremiumTier.PREMIUM ? 'Premium' : 'Premium Plus'}{' '}
-                        subscription will be paused (not lost) while your upgrade is active. You'll automatically return to your previous tier when the upgrade
-                        expires.
+                        <strong>Upgrade Protection:</strong> Your current {tierDisplayName} subscription will be paused (not lost) while your upgrade is active.
+                        You'll automatically return to your previous tier when the upgrade expires.
                     </div>
                 </div>
             )}
 
-            {/* Country Selection */}
             <div className={styles.countrySelection}>
-                {defaultCountry ? (
-                    <CountrySelect key="country-select" isLoading={!defaultCountry} defaultCountry={defaultCountry} onCountryChange={handleCountryChange} />
-                ) : (
-                    <CountrySelect key="loading-country-select" isLoading />
-                )}
+                <CountrySelect onCountryChange={onCountryChange} />
             </div>
 
             <div className={styles.optionsGrid}>
-                {/* Starter Premium */}
-                <Card
-                    className={`${styles.optionCard} 
-                        ${!canSelectTier(PremiumTier.STARTER) ? styles.disabled : ''}
-                        ${getTierStatus(PremiumTier.STARTER) === 'current' ? styles.currentTier : ''}
-                    `}
-                    onClick={() => canSelectTier(PremiumTier.STARTER) && onTierSelect(PremiumTier.STARTER)}
-                >
-                    <Card.Body className={styles.optionBody}>
-                        <div className={styles.optionIcon}>⭐</div>
-                        <h5 className={styles.tierTitle}>
-                            Starter
-                            {getTierStatus(PremiumTier.STARTER) === 'current' && <span className={styles.currentBadge}>Current</span>}
-                        </h5>
-                        <div className={styles.tierPrice}>starts at {starterPricing.displayText}</div>
-                        <p className={styles.tierDescription}>Essential features for casual players</p>
-                        {!canSelectTier(PremiumTier.STARTER) && (
-                            <div className={styles.disabledOverlay}>
-                                <small>Cannot downgrade</small>
-                            </div>
-                        )}
-                        <ul className={styles.featureList}>
-                            <li>Basic price alerts</li>
-                            <li>Everything you need to start</li>
-                            <li>Ad-free experience</li>
-                        </ul>
-                    </Card.Body>
-                </Card>
-
-                {/* Premium */}
-                <Card
-                    className={`${styles.optionCard} 
-                        ${!canSelectTier(PremiumTier.PREMIUM) ? styles.disabled : ''}
-                        ${getTierStatus(PremiumTier.PREMIUM) === 'current' ? styles.currentTier : ''}
-                        ${isSuggestedTier(PremiumTier.PREMIUM) ? styles.suggested : ''}
-                    `}
-                    onClick={() => canSelectTier(PremiumTier.PREMIUM) && onTierSelect(PremiumTier.PREMIUM)}
-                >
-                    <Card.Body className={styles.optionBody}>
-                        <div className={styles.optionIcon}>🌟</div>
-                        <h5 className={`${styles.tierTitle} ${styles.tierPremium}`}>
-                            Premium
-                            {getTierStatus(PremiumTier.PREMIUM) === 'current' && <span className={styles.currentBadge}>Current</span>}
-                            {isSuggestedTier(PremiumTier.PREMIUM) && <span className={styles.suggestedBadge}>Recommended Upgrade</span>}
-                        </h5>
-                        <div className={styles.tierPrice}>starts at {premiumPricing.displayText}</div>
-                        <p className={styles.tierDescription}>
-                            {isSuggestedTier(PremiumTier.PREMIUM)
-                                ? 'Upgrade from Starter to unlock advanced features'
-                                : 'All Starter features plus advanced tools'}
-                        </p>
-                        {!isSuggestedTier(PremiumTier.PREMIUM) && <small className={styles.recommendation}>Most Popular</small>}
-                        {!canSelectTier(PremiumTier.PREMIUM) && (
-                            <div className={styles.disabledOverlay}>
-                                <small>Cannot downgrade</small>
-                            </div>
-                        )}
-                        <ul className={styles.featureList}>
-                            <li>Optimized bazaar flips</li>
-                            <li>1 year auction house searches</li>
-                            <li>Lowball helper</li>
-                            {isSuggestedTier(PremiumTier.PREMIUM) && <li className={styles.newFeature}>🆕 Enhanced flip detection</li>}
-                        </ul>
-                    </Card.Body>
-                </Card>
-
-                {/* Premium Plus */}
-                <Card
-                    className={`${styles.optionCard} 
-                        ${!canSelectTier(PremiumTier.PREMIUM_PLUS) ? styles.disabled : ''}
-                        ${getTierStatus(PremiumTier.PREMIUM_PLUS) === 'current' ? styles.currentTier : ''}
-                        ${isSuggestedTier(PremiumTier.PREMIUM_PLUS) ? styles.suggested : ''}
-                    `}
-                    onClick={() => canSelectTier(PremiumTier.PREMIUM_PLUS) && onTierSelect(PremiumTier.PREMIUM_PLUS)}
-                >
-                    <Card.Body className={styles.optionBody}>
-                        <div className={styles.optionIcon}>🚀</div>
-                        <h5 className={`${styles.tierTitle} ${styles.tierPremiumPlus}`}>
-                            Premium Plus
-                            {getTierStatus(PremiumTier.PREMIUM_PLUS) === 'current' && <span className={styles.currentBadge}>Current</span>}
-                            {isSuggestedTier(PremiumTier.PREMIUM_PLUS) && <span className={styles.suggestedBadge}>Recommended Upgrade</span>}
-                        </h5>
-                        <div className={styles.tierPrice}>
-                            {discountInfo && discountInfo.percentage > 0 ? (
-                                <>
-                                    (yearly) starts at <br />
-                                    <span style={{ textDecoration: 'line-through', marginRight: 8, opacity: 0.7 }}>{premiumPlusPricing.displayText}</span>
-                                    <br />
-                                    <span>{premiumPlusDiscounted.displayText}</span>
-                                    <br />
-                                    <small
-                                        style={{ cursor: 'help' }}
-                                        className="text-success"
-                                        title={`Apply code ${discountInfo.code} at checkout to receive ${discountInfo.percentage}% off`}
-                                    >
-                                        -{discountInfo.percentage}% with code <strong>{discountInfo.code}</strong> *
-                                    </small>
-                                </>
-                            ) : (
-                                <>{premiumPlusPricing.displayText}</>
-                            )}
-                        </div>
-
-                        <p className={styles.tierDescription}>
-                            {isSuggestedTier(PremiumTier.PREMIUM_PLUS)
-                                ? 'Upgrade to Premium Plus for the fastest experience'
-                                : 'All Premium features plus exclusive access to'}
-                        </p>
-                        {!canSelectTier(PremiumTier.PREMIUM_PLUS) && (
-                            <div className={styles.disabledOverlay}>
-                                <small>Cannot downgrade</small>
-                            </div>
-                        )}
-                        <ul className={styles.featureList}>
-                            <li>Fastest auction flips</li>
-                            <li>6 year data exports</li>
-                            <li>Realtime market analysis</li>
-                            <li>Access to BazaarPro</li>
-                            {isSuggestedTier(PremiumTier.PREMIUM_PLUS) && <li className={styles.newFeature}>Advanced money making methods (soon™️)</li>}
-                        </ul>
-                    </Card.Body>
-                </Card>
+                {TIER_CONFIGS.map(config => {
+                    const tier = config.tier
+                    const isSuggested = suggestedTier === tier
+                    const pricing =
+                        tier === PremiumTier.PREMIUM_PLUS ? (
+                            <DiscountedPrice tier={tier} countryCode={selectedCountry?.value} discount={DISCOUNT} />
+                        ) : (
+                            <>starts at {calculatePrice(tier, selectedCountry?.value).displayText}</>
+                        )
+
+                    return (
+                        <TierCard
+                            key={tier}
+                            config={config}
+                            pricing={pricing}
+                            status={getTierStatus(tier, currentTier, isUpgrade)}
+                            isSuggested={isSuggested}
+                            canSelect={canSelectTier(tier, currentTier, isUpgrade)}
+                            onSelect={onTierSelect}
+                            extraBadge={EXTRA_BADGES[tier]}
+                            suggestedFeature={SUGGESTED_FEATURES[tier]}
+                        />
+                    )
+                })}
             </div>
 
             <div className={styles.tierNote}>
diff --git a/hooks/useCountryDetection.ts b/hooks/useCountryDetection.ts
new file mode 100644
index 000000000..328139f1d
--- /dev/null
+++ b/hooks/useCountryDetection.ts
@@ -0,0 +1,77 @@
+'use client'
+import { useEffect, useRef, useState } from 'react'
+import { Country, getCountry, getCountryFromUserLanguage } from '../utils/CountryUtils'
+import { USER_COUNTRY_CODE } from '../utils/SettingsUtils'
+
+export function useCountryDetection(onCountryCodeChange?: (countryCode: string) => void) {
+    const [selectedCountry, setSelectedCountry] = useState<Country>()
+    const callbackRef = useRef(onCountryCodeChange)
+    const hasUserSelected = useRef(false)
+    callbackRef.current = onCountryCodeChange
+
+    function persistCountry(country: Country) {
+        try {
+            if (country.value) {
+                localStorage.setItem(USER_COUNTRY_CODE, country.value)
+            }
+        } catch {
+            console.error('Failed to persist country to storage')
+        }
+    }
+
+    const applyCountry = (country: Country | undefined) => {
+        if (!country) return
+        if (hasUserSelected.current) return
+        setSelectedCountry(country)
+        persistCountry(country)
+        if (callbackRef.current && country.value) {
+            callbackRef.current(country.value)
+        }
+    }
+
+    const handleCountryChange = (country: Country) => {
+        hasUserSelected.current = true
+        setSelectedCountry(country)
+        persistCountry(country)
+        if (callbackRef.current && country.value) {
+            callbackRef.current(country.value)
+        }
+    }
+
+    useEffect(() => {
+        async function detect() {
+            let cachedCode: string | null = null
+            try {
+                cachedCode = localStorage.getItem(USER_COUNTRY_CODE)
+            } catch {
+                cachedCode = null
+            }
+
+            if (cachedCode) {
+                const normalizedCode = cachedCode.toUpperCase()
+                const cachedCountry = getCountry(normalizedCode)
+                if (cachedCountry) {
+                    applyCountry(cachedCountry)
+                    return
+                }
+            }
+
+            let detectedCountry: Country | undefined
+            try {
+                const response = await fetch('https://api.country.is')
+                if (response.ok) {
+                    const result = await response.json()
+                    detectedCountry = getCountry(result.country)
+                }
+            } catch {
+                console.error('Failed to fetch country from api.country.is')
+            }
+
+            const fallbackCountry = detectedCountry || getCountryFromUserLanguage() || getCountry('US')
+            applyCountry(fallbackCountry)
+        }
+        detect()
+    }, [])
+
+    return { selectedCountry, handleCountryChange }
+}