diff --git a/resources/views/templates/corporate/bank-accounts.blade.php b/resources/views/templates/corporate/bank-accounts.blade.php
index cb57bb6..7afcf22 100644
--- a/resources/views/templates/corporate/bank-accounts.blade.php
+++ b/resources/views/templates/corporate/bank-accounts.blade.php
@@ -2,10 +2,222 @@
 
 @section('content')
 
-<section class="wrapper bg-light">
+@php
+    $accounts = $page->data['bank_accounts'] ?? [];
+    $currencySymbols = [
+        'TRY' => '₺',
+        'USD' => '$',
+        'EUR' => '€',
+        'GBP' => '£',
+    ];
+@endphp
+
+<style>
+    .bank-accounts-section {
+        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
+    }
+    .bank-account-card {
+        background: #ffffff;
+        border-radius: 1.25rem;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
+        overflow: hidden;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+    }
+    .bank-account-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
+        border-color: #cbd5e1;
+    }
+    .bank-account-card__header {
+        position: relative;
+        padding: 2rem 1.5rem 1.75rem;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        border-bottom: 1px solid #e2e8f0;
+        text-align: center;
+        min-height: 180px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .bank-account-card__logo-wrap {
+        width: 100%;
+        max-width: 220px;
+        height: 88px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem 1rem;
+        background: #ffffff;
+        border-radius: 1rem;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+        margin: 0 auto;
+    }
+    .bank-account-card__logo-wrap img {
+        max-width: 100%;
+        max-height: 72px;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+    }
+    .bank-account-card__logo-placeholder {
+        width: 72px;
+        height: 72px;
+        border-radius: 1rem;
+        background: rgba(var(--bs-primary-rgb), 0.1);
+        color: var(--bs-primary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+    }
+    .bank-account-card__currency {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        padding: 0.35rem 0.75rem;
+        border-radius: 9999px;
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        color: var(--bs-primary);
+        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    }
+    .bank-account-card__body {
+        padding: 1.5rem;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    .bank-account-card__title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: #0f172a;
+        margin-bottom: 0.25rem;
+        line-height: 1.3;
+    }
+    .bank-account-card__branch {
+        font-size: 0.875rem;
+        color: #64748b;
+        margin-bottom: 1.25rem;
+    }
+    .bank-account-card__field {
+        margin-bottom: 1rem;
+    }
+    .bank-account-card__field:last-of-type {
+        margin-bottom: 0;
+    }
+    .bank-account-card__label {
+        display: block;
+        font-size: 0.6875rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #94a3b8;
+        margin-bottom: 0.35rem;
+    }
+    .bank-account-card__value {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: #1e293b;
+        line-height: 1.4;
+    }
+    .bank-account-card__iban-box {
+        margin-top: auto;
+        padding-top: 1rem;
+        border-top: 1px dashed #e2e8f0;
+    }
+    .bank-account-card__iban {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 0.9375rem;
+        font-weight: 700;
+        color: var(--bs-primary);
+        letter-spacing: 0.02em;
+        word-break: break-all;
+        line-height: 1.5;
+        padding: 0.75rem 1rem;
+        background: #f8fafc;
+        border-radius: 0.75rem;
+        border: 1px solid #e2e8f0;
+        user-select: all;
+    }
+    .bank-account-card__copy-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        margin-top: 0.5rem;
+        padding: 0;
+        border: none;
+        background: none;
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: var(--bs-primary);
+        cursor: pointer;
+        transition: opacity 0.2s;
+    }
+    .bank-account-card__copy-btn:hover {
+        opacity: 0.8;
+        text-decoration: underline;
+    }
+    .bank-account-card__copy-btn.is-copied {
+        color: #16a34a;
+    }
+    .bank-account-card__footer-bar {
+        height: 4px;
+        background: linear-gradient(90deg, var(--bs-primary), #3b82f6);
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.4s ease;
+    }
+    .bank-account-card:hover .bank-account-card__footer-bar {
+        transform: scaleX(1);
+    }
+    .bank-accounts-empty {
+        padding: 3rem 2rem;
+        background: #ffffff;
+        border-radius: 1.25rem;
+        border: 1px dashed #cbd5e1;
+        text-align: center;
+        max-width: 420px;
+        margin: 0 auto;
+    }
+    .bank-accounts-tabs {
+        display: inline-flex;
+        gap: 0;
+        border-bottom: 2px solid #e2e8f0;
+        margin-bottom: 2.5rem;
+    }
+    .bank-accounts-tabs a,
+    .bank-accounts-tabs span {
+        padding: 0.75rem 1.25rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        text-decoration: none;
+        color: #64748b;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -2px;
+        transition: color 0.2s, border-color 0.2s;
+    }
+    .bank-accounts-tabs a:hover {
+        color: #334155;
+    }
+    .bank-accounts-tabs .is-active {
+        color: var(--bs-primary);
+        border-bottom-color: var(--bs-primary);
+    }
+</style>
+
+<section class="wrapper bank-accounts-section">
     <div class="container pt-14 pb-14 xl:pt-20 xl:pb-20 lg:pt-20 lg:pb-20 md:pt-20 md:pb-20">
-        
-        <div class="row text-center mb-10">
+
+        <div class="row text-center mb-8">
             <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                 <h1 class="display-1 mb-3">{!! $page->title !!}</h1>
                 @if($page->excerpt)
@@ -14,80 +226,139 @@
             </div>
         </div>
 
-        <div class="row gy-6">
-            @php
-                $accounts = $page->data['bank_accounts'] ?? [];
-            @endphp
+        <div class="text-center">
+            <nav class="bank-accounts-tabs" aria-label="{!! t('Ödeme yöntemi') !!}">
+                <a href="{{ route('page.show', ['slug' => 'online-odeme']) }}">{!! t('Kart ile Ödeme') !!}</a>
+                <span class="is-active">{!! t('Havale / EFT (IBAN)') !!}</span>
+            </nav>
+        </div>
+
+        <div class="row gy-6 justify-content-center">
+            @forelse($accounts as $index => $account)
+                @php
+                    $currency = $account['currency'] ?? 'TRY';
+                    $currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
+                @endphp
+                <div class="col-md-6 col-xl-4">
+                    <article class="bank-account-card">
+                        <div class="bank-account-card__header">
+                            <span class="bank-account-card__currency">{{ $currencyLabel }}</span>
 
-            @forelse($accounts as $account)
-            <div class="col-md-6 col-lg-4">
-                <div class="card shadow-lg lift h-100 border-0 rounded-xl overflow-hidden group hover:shadow-2xl transition-all duration-300">
-                    <div class="card-body p-8">
-                        <div class="flex items-center justify-between mb-6">
                             @if(!empty($account['logo']))
-                                <div class="bg-gray-50 flex items-center justify-center p-2 rounded-lg" style="width: 120px; height: 60px;">
-                                    <img src="{{ asset('storage/' . $account['logo']) }}" class="img-fluid" style="max-height: 100%; max-width: 100%;" alt="{{ $account['bank_name'] }}" loading="lazy">
+                                <div class="bank-account-card__logo-wrap">
+                                    <img
+                                        src="{{ asset('storage/' . $account['logo']) }}"
+                                        alt="{{ $account['bank_name'] }}"
+                                        loading="lazy"
+                                    >
                                 </div>
                             @else
-                                <div class="bg-primary/10 text-primary w-16 h-16 rounded-lg flex items-center justify-center text-2xl">
+                                <div class="bank-account-card__logo-placeholder" aria-hidden="true">
                                     <i class="uil uil-university"></i>
                                 </div>
                             @endif
-                            
-                            <span class="badge bg-pale-primary text-primary rounded-pill px-3 py-1 text-sm font-semibold">
-                                {{ $account['currency'] ?? 'TRY' }}
-                            </span>
                         </div>
 
-                        <h3 class="h4 mb-1 text-dark group-hover:text-primary transition-colors">{{ $account['bank_name'] }}</h3>
-                        @if(!empty($account['branch_name']))
-                            <p class="text-muted text-sm mb-4">{{ $account['branch_name'] }}</p>
-                        @else
-                            <div class="mb-4"></div>
-                        @endif
+                        <div class="bank-account-card__body">
+                            <h2 class="bank-account-card__title">{{ $account['bank_name'] }}</h2>
+                            @if(!empty($account['branch_name']))
+                                <p class="bank-account-card__branch">{{ $account['branch_name'] }}</p>
+                            @endif
 
-                        <div class="space-y-3">
-                            <div>
-                                <label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">HESAP SAHİBİ</label>
-                                <div class="text-dark font-medium">{{ $account['account_holder'] }}</div>
+                            <div class="bank-account-card__field">
+                                <span class="bank-account-card__label">{!! t('Hesap Sahibi') !!}</span>
+                                <div class="bank-account-card__value">{{ $account['account_holder'] }}</div>
                             </div>
-                            
-                            <div class="pt-2 border-t border-gray-100">
-                                <label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">IBAN</label>
-                                <div class="font-mono text-lg text-primary font-bold tracking-tight break-all select-all selection:bg-primary/20 cursor-text">
-                                    {{ $account['iban'] }}
-                                </div>
-                                <button onclick="navigator.clipboard.writeText('{{ $account['iban'] }}'); alert('IBAN kopyalandı!');" class="text-xs text-primary mt-1 hover:underline flex items-center gap-1 cursor-pointer">
-                                    <i class="uil uil-copy"></i> Kopyala
+
+                            <div class="bank-account-card__iban-box">
+                                <span class="bank-account-card__label">IBAN</span>
+                                <div class="bank-account-card__iban" id="iban-{{ $index }}">{{ $account['iban'] }}</div>
+                                <button
+                                    type="button"
+                                    class="bank-account-card__copy-btn"
+                                    data-iban="{{ $account['iban'] }}"
+                                    data-copy-label="{!! t('Kopyala') !!}"
+                                    data-copied-label="{!! t('Kopyalandı') !!}"
+                                    aria-label="{!! t('IBAN kopyala') !!}"
+                                >
+                                    <i class="uil uil-copy"></i>
+                                    <span>{!! t('Kopyala') !!}</span>
                                 </button>
                             </div>
                         </div>
-                    </div>
-                    <div class="h-1 w-full bg-gradient-to-r from-primary to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
+
+                        <div class="bank-account-card__footer-bar" aria-hidden="true"></div>
+                    </article>
                 </div>
-            </div>
             @empty
-                <div class="col-12 text-center py-10">
-                    <div class="bg-white p-10 rounded-xl shadow-sm border border-gray-100 inline-block">
-                        <i class="uil uil-wallet text-6xl text-gray-300 mb-4 block"></i>
-                        <h3 class="h4 text-gray-400">Henüz banka hesabı eklenmemiş.</h3>
-                        <p class="text-gray-400">Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.</p>
+                <div class="col-12">
+                    <div class="bank-accounts-empty">
+                        <i class="uil uil-wallet text-6xl text-slate-300 mb-4 d-block"></i>
+                        <h3 class="h4 text-slate-500 mb-2">{!! t('Henüz banka hesabı eklenmemiş.') !!}</h3>
+                        <p class="text-slate-400 mb-0">{!! t('Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.') !!}</p>
                     </div>
                 </div>
             @endforelse
         </div>
 
         @if($page->content)
-        <div class="row mt-14">
-            <div class="col-lg-10 mx-auto">
-                <div class="prose max-w-none text-center text-gray-600">
-                    {!! $page->content !!}
+            <div class="row mt-14">
+                <div class="col-lg-10 mx-auto">
+                    <div class="prose max-w-none text-center text-gray-600">
+                        {!! $page->content !!}
+                    </div>
                 </div>
             </div>
-        </div>
         @endif
 
     </div>
 </section>
 
+@push('scripts')
+<script>
+document.querySelectorAll('.bank-account-card__copy-btn').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+        var iban = this.getAttribute('data-iban');
+        var copyLabel = this.getAttribute('data-copy-label');
+        var copiedLabel = this.getAttribute('data-copied-label');
+        var span = this.querySelector('span');
+        var icon = this.querySelector('i');
+
+        function showCopied() {
+            btn.classList.add('is-copied');
+            if (span) span.textContent = copiedLabel;
+            if (icon) icon.className = 'uil uil-check';
+            setTimeout(function () {
+                btn.classList.remove('is-copied');
+                if (span) span.textContent = copyLabel;
+                if (icon) icon.className = 'uil uil-copy';
+            }, 2000);
+        }
+
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(iban).then(showCopied).catch(function () {
+                fallbackCopy(iban);
+                showCopied();
+            });
+        } else {
+            fallbackCopy(iban);
+            showCopied();
+        }
+    });
+});
+
+function fallbackCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.position = 'absolute';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+}
+</script>
+@endpush
+
 @endsection