diff --git a/lib/presentation/pages/account/payment/payment_page.dart b/lib/presentation/pages/account/payment/payment_page.dart
index b6bd020..8a42d5d 100644
--- a/lib/presentation/pages/account/payment/payment_page.dart
+++ b/lib/presentation/pages/account/payment/payment_page.dart
@@ -2,8 +2,6 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 
 import '../../../../common/theme/theme.dart';
-// Import your theme files here
-// import 'theme.dart';
 
 @RoutePage()
 class PaymentPage extends StatefulWidget {
@@ -14,125 +12,292 @@ class PaymentPage extends StatefulWidget {
 }
 
 class _PaymentPageState extends State<PaymentPage> {
-  // Sample saved payment methods data
-  final List<Map<String, dynamic>> savedPaymentMethods = [
+  // Featured payment methods
+  final List<Map<String, dynamic>> featuredMethods = [
     {
-      'id': '1',
-      'type': 'credit_card',
-      'name': 'Kartu Kredit',
-      'details': '**** **** **** 1234',
-      'cardType': 'Visa',
-      'expiryDate': '12/26',
-      'isDefault': true,
-      'icon': Icons.credit_card,
-    },
-    {
-      'id': '2',
-      'type': 'credit_card',
-      'name': 'Kartu Debit',
-      'details': '**** **** **** 5678',
-      'cardType': 'Mastercard',
-      'expiryDate': '08/27',
-      'isDefault': false,
-      'icon': Icons.credit_card,
-    },
-    {
-      'id': '3',
-      'type': 'ewallet',
-      'name': 'DANA',
-      'details': '081234567890',
-      'cardType': 'E-Wallet',
-      'expiryDate': null,
-      'isDefault': false,
-      'icon': Icons.account_balance_wallet,
-    },
-    {
-      'id': '4',
-      'type': 'ewallet',
-      'name': 'GoPay',
-      'details': '081234567890',
-      'cardType': 'E-Wallet',
-      'expiryDate': null,
-      'isDefault': false,
-      'icon': Icons.account_balance_wallet,
-    },
-    {
-      'id': '5',
-      'type': 'bank_account',
-      'name': 'BCA',
-      'details': '**** **** 9012',
-      'cardType': 'Bank Account',
-      'expiryDate': null,
-      'isDefault': false,
-      'icon': Icons.account_balance,
+      'id': 'qris',
+      'name': 'QRIS',
+      'subtitle': null,
+      'icon': 'assets/images/qris.png',
+      'iconColor': AppColor.black,
+      'badge': 'Baru',
+      'badgeColor': const Color(0xFFE57373),
     },
   ];
 
-  Widget _buildPaymentCard(Map<String, dynamic> payment) {
+  // Main payment categories
+  final List<Map<String, dynamic>> paymentCategories = [
+    {
+      'id': 'credit_card',
+      'name': 'Kartu Kredit',
+      'subtitle':
+          'Minimal pembayaran Rp 10.000 dan mendukung Kartu Berlogo Visa, Mastercard dan JCB',
+      'icon': Icons.credit_card,
+      'iconColor': const Color(0xFF2E7D32),
+      'hasArrow': false,
+    },
+  ];
+
+  // Other payment methods
+  final List<Map<String, dynamic>> otherMethods = [
+    {
+      'id': 'gopay',
+      'name': 'Gopay',
+      'subtitle': 'Aktifkan Sekarang',
+      'logo': 'assets/images/gopay.png',
+      'iconColor': const Color(0xFF00AA5B),
+      'hasArrow': true,
+    },
+    {
+      'id': 'dana',
+      'name': 'Dana',
+      'subtitle': 'Aktifkan Sekarang',
+      'logo': 'assets/images/dana.png',
+      'iconColor': const Color(0xFF118EEA),
+      'hasArrow': true,
+    },
+    {
+      'id': 'blu',
+      'name': 'blu',
+      'subtitle': 'Aktifkan Sekarang',
+      'logo': 'assets/images/blu.png',
+      'iconColor': const Color(0xFF00D4FF),
+      'hasArrow': true,
+    },
+    {
+      'id': 'shopeepay',
+      'name': 'ShopeePay',
+      'subtitle': 'Aktifkan Sekarang',
+      'logo': 'assets/images/shopeepay.png',
+      'iconColor': const Color(0xFFEE4D2D),
+      'hasArrow': true,
+    },
+    {
+      'id': 'ovo',
+      'name': 'OVO',
+      'subtitle': 'Aktifkan Sekarang',
+      'logo': 'assets/images/ovo.png',
+      'iconColor': const Color(0xFF4C3EC9),
+      'hasArrow': true,
+    },
+  ];
+
+  Widget _buildFeaturedCard(Map<String, dynamic> method) {
     return Container(
-      decoration: const BoxDecoration(
+      margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(
         color: AppColor.white,
-        border: Border(bottom: BorderSide(color: AppColor.border)),
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: AppColor.border.withOpacity(0.3)),
       ),
-      child: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Row(
-          children: [
-            Container(
-              width: 48,
-              height: 48,
-              decoration: BoxDecoration(
-                color: AppColor.background,
-                borderRadius: BorderRadius.circular(8),
-                border: Border.all(color: AppColor.border),
-              ),
-              child: Icon(payment['icon'], color: AppColor.primary, size: 24),
+      child: Row(
+        children: [
+          // Logo placeholder
+          Container(
+            width: 40,
+            height: 24,
+            decoration: BoxDecoration(
+              color: AppColor.black,
+              borderRadius: BorderRadius.circular(4),
             ),
-            const SizedBox(width: 16),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      Text(
-                        payment['name'],
-                        style: AppStyle.md.copyWith(
-                          fontWeight: FontWeight.w600,
-                          color: AppColor.textPrimary,
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 4),
-                  Row(
-                    children: [
-                      Text(
-                        payment['cardType'],
-                        style: AppStyle.sm.copyWith(
-                          color: AppColor.textSecondary,
-                        ),
-                      ),
-                      if (payment['expiryDate'] != null) ...[
-                        Text(
-                          ' • ',
-                          style: AppStyle.sm.copyWith(
-                            color: AppColor.textSecondary,
-                          ),
-                        ),
-                        Text(
-                          'Exp: ${payment['expiryDate']}',
-                          style: AppStyle.sm.copyWith(
-                            color: AppColor.textSecondary,
-                          ),
-                        ),
-                      ],
-                    ],
-                  ),
-                ],
+            child: Center(
+              child: Text(
+                method['name'],
+                style: AppStyle.sm.copyWith(
+                  color: AppColor.white,
+                  fontWeight: FontWeight.w700,
+                  fontSize: 10,
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(width: 16),
+          Text(
+            method['name'],
+            style: AppStyle.lg.copyWith(
+              fontWeight: FontWeight.w600,
+              color: AppColor.textPrimary,
+            ),
+          ),
+          const Spacer(),
+          if (method['badge'] != null)
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+              decoration: BoxDecoration(
+                color: method['badgeColor'],
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Text(
+                method['badge'],
+                style: AppStyle.sm.copyWith(
+                  color: AppColor.white,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCategoryCard(Map<String, dynamic> category) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: AppColor.white,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: AppColor.border.withOpacity(0.3)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Container(
+                width: 40,
+                height: 40,
+                decoration: BoxDecoration(
+                  color: category['iconColor'].withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Icon(
+                  category['icon'],
+                  color: category['iconColor'],
+                  size: 20,
+                ),
+              ),
+              const SizedBox(width: 16),
+              Text(
+                category['name'],
+                style: AppStyle.lg.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: AppColor.textPrimary,
+                ),
+              ),
+            ],
+          ),
+          if (category['subtitle'] != null) ...[
+            const SizedBox(height: 12),
+            Text(
+              category['subtitle'],
+              style: AppStyle.md.copyWith(
+                color: const Color(0xFF4CAF50),
+                height: 1.4,
               ),
             ),
           ],
+        ],
+      ),
+    );
+  }
+
+  Widget _buildPaymentMethodCard(Map<String, dynamic> method) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: () {
+          // Handle method selection
+        },
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
+          decoration: const BoxDecoration(
+            color: AppColor.white,
+            border: Border(
+              bottom: BorderSide(color: Color(0xFFF5F5F5), width: 1),
+            ),
+          ),
+          child: Row(
+            children: [
+              // Method logo/icon
+              Container(
+                width: 40,
+                height: 40,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: method['logo'] != null
+                    ? ClipRRect(
+                        borderRadius: BorderRadius.circular(8),
+                        child: Image.asset(
+                          method['logo'],
+                          fit: BoxFit.cover,
+                          errorBuilder: (context, error, stackTrace) {
+                            return _buildFallbackIcon(method);
+                          },
+                        ),
+                      )
+                    : _buildFallbackIcon(method),
+              ),
+              const SizedBox(width: 16),
+              // Method info
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      method['name'],
+                      style: AppStyle.lg.copyWith(
+                        fontWeight: FontWeight.w600,
+                        color: AppColor.textPrimary,
+                      ),
+                    ),
+                    if (method['subtitle'] != null) ...[
+                      const SizedBox(height: 2),
+                      Text(
+                        method['subtitle'],
+                        style: AppStyle.md.copyWith(color: AppColor.textLight),
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+              // Arrow icon
+              if (method['hasArrow'] == true)
+                const Icon(
+                  Icons.chevron_right,
+                  color: AppColor.textLight,
+                  size: 20,
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFallbackIcon(Map<String, dynamic> method) {
+    String initial = method['name'][0].toUpperCase();
+    Color backgroundColor = method['iconColor'] ?? AppColor.primary;
+
+    return Container(
+      width: 40,
+      height: 40,
+      decoration: BoxDecoration(
+        color: backgroundColor.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Center(
+        child: Text(
+          initial,
+          style: AppStyle.md.copyWith(
+            color: backgroundColor,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildSectionHeader(String title) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 8),
+      child: Text(
+        title,
+        style: AppStyle.lg.copyWith(
+          fontWeight: FontWeight.w700,
+          color: AppColor.textPrimary,
         ),
       ),
     );
@@ -141,77 +306,39 @@ class _PaymentPageState extends State<PaymentPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: AppColor.background,
+      backgroundColor: const Color(0xFFFAFAFA),
       appBar: AppBar(title: Text('Metode Pembayaran')),
-      body: savedPaymentMethods.isEmpty
-          ? _buildEmptyState()
-          : Column(
-              children: [
-                Expanded(
-                  child: ListView.builder(
-                    itemCount: savedPaymentMethods.length,
-                    itemBuilder: (context, index) {
-                      return _buildPaymentCard(savedPaymentMethods[index]);
-                    },
-                  ),
-                ),
-              ],
-            ),
-    );
-  }
+      body: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 16),
+            // Featured methods
+            ...featuredMethods.map((method) => _buildFeaturedCard(method)),
 
-  Widget _buildEmptyState() {
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(Icons.payment_outlined, size: 80, color: AppColor.textLight),
-          const SizedBox(height: 16),
-          Text(
-            'Belum Ada Metode Pembayaran',
-            style: AppStyle.lg.copyWith(
-              fontWeight: FontWeight.w600,
-              color: AppColor.textSecondary,
+            const SizedBox(height: 16),
+
+            // Payment categories
+            ...paymentCategories.map(
+              (category) => _buildCategoryCard(category),
             ),
-          ),
-          const SizedBox(height: 8),
-          Text(
-            'Tambahkan kartu atau e-wallet untuk\nmemudahkan proses pembayaran',
-            textAlign: TextAlign.center,
-            style: AppStyle.md.copyWith(color: AppColor.textLight, height: 1.4),
-          ),
-          const SizedBox(height: 32),
-          SizedBox(
-            width: 220,
-            height: 48,
-            child: ElevatedButton(
-              onPressed: () {
-                // Navigate to add payment method form
-              },
-              style: ElevatedButton.styleFrom(
-                backgroundColor: AppColor.primary,
-                elevation: 0,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(8),
-                ),
-              ),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  const Icon(Icons.add, color: AppColor.white, size: 20),
-                  const SizedBox(width: 8),
-                  Text(
-                    'Tambah Pembayaran',
-                    style: AppStyle.md.copyWith(
-                      color: AppColor.white,
-                      fontWeight: FontWeight.w600,
-                    ),
-                  ),
-                ],
+
+            // Section header for other methods
+            _buildSectionHeader('Metode Pembayaran Lainnya'),
+
+            // Other payment methods
+            Container(
+              decoration: const BoxDecoration(color: AppColor.white),
+              child: Column(
+                children: otherMethods
+                    .map((method) => _buildPaymentMethodCard(method))
+                    .toList(),
               ),
             ),
-          ),
-        ],
+
+            const SizedBox(height: 32),
+          ],
+        ),
       ),
     );
   }