diff --git a/resources/views/pages/about us/card-types.blade.php b/resources/views/pages/about us/card-types.blade.php
index 7b4dda5..5fd8ac7 100644
--- a/resources/views/pages/about us/card-types.blade.php	
+++ b/resources/views/pages/about us/card-types.blade.php	
@@ -1,14 +1,125 @@
 @extends('layouts.app')
 
-@section('page_title', 'About Us')
+@section('page_title', 'Card Types')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-circle-info" style="color:gray;"> Card Types</i>
-    </div>
-    <div class="card-body">
-        <p>This is the Card Types page content.</p>
-    </div>
-</div>
-@endsection
+    @php
+        $cardTypes = [
+            [
+                'id' => 1,
+                'cardCode' => 'VISA01',
+                'cardTypeDescription' => 'Visa Platinum Card',
+                'cardTypeShortDescription' => 'Premium Visa card',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'White',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'Yes',
+                'idNumberDescription' => 'Government-issued ID required',
+                'termsAndConditions' => 'Valid for 5 years. Annual fee applies.',
+                'faqs' => 'Q: What is the credit limit? A: Up to $10,000.'
+            ],
+            [
+                'id' => 2,
+                'cardCode' => 'MC02',
+                'cardTypeDescription' => 'MasterCard Gold',
+                'cardTypeShortDescription' => 'Gold MasterCard',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'Black',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'No',
+                'idNumberDescription' => '',
+                'termsAndConditions' => 'No annual fee for first year.',
+                'faqs' => 'Q: Can I use it abroad? A: Yes, globally accepted.'
+            ],
+            [
+                'id' => 3,
+                'cardCode' => 'AMEX03',
+                'cardTypeDescription' => 'Amex Rewards Card',
+                'cardTypeShortDescription' => 'Amex Rewards',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'White',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'Yes',
+                'idNumberDescription' => 'Passport or driver’s license',
+                'termsAndConditions' => 'Earn 2x points on travel.',
+                'faqs' => 'Q: How to redeem points? A: Via app.'
+            ],
+            [
+                'id' => 4,
+                'cardCode' => 'VISA04',
+                'cardTypeDescription' => 'Visa Classic Card',
+                'cardTypeShortDescription' => 'Basic Visa card',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'Black',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'No',
+                'idNumberDescription' => '',
+                'termsAndConditions' => 'Standard rates apply.',
+                'faqs' => 'Q: Is there a fee? A: No hidden fees.'
+            ],
+            [
+                'id' => 5,
+                'cardCode' => 'MC05',
+                'cardTypeDescription' => 'MasterCard Premium',
+                'cardTypeShortDescription' => 'Premium MasterCard',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'White',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'Yes',
+                'idNumberDescription' => 'ID for verification',
+                'termsAndConditions' => 'Free lounge access.',
+                'faqs' => 'Q: Lounge access? A: At major airports.'
+            ],
+            [
+                'id' => 6,
+                'cardCode' => 'AMEX06',
+                'cardTypeDescription' => 'Amex Business Card',
+                'cardTypeShortDescription' => 'Business Amex',
+                'cardTypeImage' => '',
+                'virtualCardFontColor' => 'Black',
+                'cardTypeCoverImage' => '',
+                'idNumberRequired' => 'No',
+                'idNumberDescription' => '',
+                'termsAndConditions' => 'For business expenses.',
+                'faqs' => 'Q: Tax benefits? A: Consult accountant.'
+            ]
+        ];
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Card Types',
+        'data' => $cardTypes,
+        'columns' => [
+            ['name' => 'Card Type Code', 'key' => 'cardCode', 'sortable' => true],
+            ['name' => 'Card Type Description', 'key' => 'cardTypeDescription', 'sortable' => true]
+        ],
+        'allFields' => [
+            ['name' => 'Card Code', 'key' => 'cardCode', 'type' => 'text', 'required' => true],
+            ['name' => 'Card Type Description', 'key' => 'cardTypeDescription', 'type' => 'text', 'required' => true],
+            ['name' => 'Card Type Short Description', 'key' => 'cardTypeShortDescription', 'type' => 'text', 'required' => true],
+            ['name' => 'Card Type Image', 'key' => 'cardTypeImage', 'type' => 'file'],
+            ['name' => 'Virtual Card Font Color', 'key' => 'virtualCardFontColor', 'type' => 'select', 'options' => ['White', 'Black'], 'required' => true],
+            ['name' => 'Card Type Cover Image', 'key' => 'cardTypeCoverImage', 'type' => 'file'],
+            ['name' => 'ID Number Required?', 'key' => 'idNumberRequired', 'type' => 'select', 'options' => ['Yes', 'No'], 'required' => true],
+            ['name' => 'ID Number Description', 'key' => 'idNumberDescription', 'type' => 'text'],
+            ['name' => 'Terms and Conditions', 'key' => 'termsAndConditions', 'type' => 'textarea', 'required' => true],
+            ['name' => 'FAQs', 'key' => 'faqs', 'type' => 'textarea', 'required' => true]
+        ],
+        'actions' => ['edit', 'view', 'delete'],
+        'showAddButton' => true,
+        'addButtonUrl' => '/add-card-types',
+        'showCheckboxes' => true,
+        'showBatchDelete' => true,
+        'showEditModal' => true,
+        'showViewModal' => true
+    ])
+
+    <script>
+        const storedCardTypes = JSON.parse(sessionStorage.getItem('cardTypes') || '[]');
+        if (storedCardTypes.length > 0) {
+            tableConfig.data = [...tableConfig.data, ...storedCardTypes];
+            renderTable();
+            renderPagination();
+        }
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/add-card-types.blade.php b/resources/views/pages/add-card-types.blade.php
new file mode 100644
index 0000000..8292833
--- /dev/null
+++ b/resources/views/pages/add-card-types.blade.php
@@ -0,0 +1,131 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Card Type')
+
+@section('content')
+    <div class="card-header border-0 bg-transparent py-2">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Card Type</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <form id="addCardTypeForm">
+                <div class="mb-3">
+                    <label for="cardCode" class="form-label">Card Code</label>
+                    <input type="text" class="form-control" id="cardCode" placeholder="Enter card code" required>
+                </div>
+                <div class="mb-3">
+                    <label for="cardTypeDescription" class="form-label">Card Type Description</label>
+                    <input type="text" class="form-control" id="cardTypeDescription" placeholder="Enter description" required>
+                </div>
+                <div class="mb-3">
+                    <label for="cardTypeShortDescription" class="form-label">Card Type Short Description</label>
+                    <input type="text" class="form-control" id="cardTypeShortDescription" placeholder="Enter short description" required>
+                </div>
+                <div class="mb-3">
+                    <label for="cardTypeImage" class="form-label">Upload Card Type Image</label>
+                    <input type="file" class="form-control" id="cardTypeImage" accept=".jpg,.jpeg,.png">
+                </div>
+                <div class="mb-3">
+                    <label for="virtualCardFontColor" class="form-label">Virtual Card Font Color</label>
+                    <select class="form-select" id="virtualCardFontColor" required>
+                        <option value="" disabled selected>Select font color</option>
+                        <option value="White">White</option>
+                        <option value="Black">Black</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label for="cardTypeCoverImage" class="form-label">Upload Card Type Cover Image</label>
+                    <input type="file" class="form-control" id="cardTypeCoverImage" accept=".jpg,.jpeg,.png">
+                </div>
+                <div class="mb-3">
+                    <label for="idNumberRequired" class="form-label">ID Number Required?</label>
+                    <select class="form-select" id="idNumberRequired" required>
+                        <option value="" disabled selected>Select option</option>
+                        <option value="Yes">Yes</option>
+                        <option value="No">No</option>
+                    </select>
+                </div>
+                <div class="mb-3">
+                    <label for="idNumberDescription" class="form-label">ID Number Description</label>
+                    <input type="text" class="form-control" id="idNumberDescription" placeholder="Enter ID description">
+                </div>
+                <div class="mb-3">
+                    <label for="termsAndConditions" class="form-label">Terms and Conditions</label>
+                    <textarea class="form-control" id="termsAndConditions" rows="4" placeholder="Enter terms and conditions" required></textarea>
+                </div>
+                <div class="mb-3">
+                    <label for="faqs" class="form-label">FAQs</label>
+                    <textarea class="form-control" id="faqs" rows="4" placeholder="Enter FAQs" required></textarea>
+                </div>
+                <div class="d-flex justify-content-end mt-3">
+                    <button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Add Card Type</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control,
+        .form-select,
+        textarea.form-control {
+            font-size: 0.9rem;
+            width: 100%;
+        }
+    </style>
+
+    <script>
+        document.getElementById('addCardTypeForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const cardCode = document.getElementById('cardCode').value;
+            const cardTypeDescription = document.getElementById('cardTypeDescription').value;
+            const cardTypeShortDescription = document.getElementById('cardTypeShortDescription').value;
+            const cardTypeImage = document.getElementById('cardTypeImage').files[0]?.name || '';
+            const virtualCardFontColor = document.getElementById('virtualCardFontColor').value;
+            const cardTypeCoverImage = document.getElementById('cardTypeCoverImage').files[0]?.name || '';
+            const idNumberRequired = document.getElementById('idNumberRequired').value;
+            const idNumberDescription = document.getElementById('idNumberDescription').value;
+            const termsAndConditions = document.getElementById('termsAndConditions').value;
+            const faqs = document.getElementById('faqs').value;
+
+            if (!cardCode || !cardTypeDescription || !cardTypeShortDescription || 
+                !virtualCardFontColor || !idNumberRequired || !termsAndConditions || !faqs) {
+                alert('Please fill out all required fields.');
+                return;
+            }
+
+            const newCardType = {
+                id: Date.now(),
+                cardCode,
+                cardTypeDescription,
+                cardTypeShortDescription,
+                cardTypeImage,
+                virtualCardFontColor,
+                cardTypeCoverImage,
+                idNumberRequired,
+                idNumberDescription,
+                termsAndConditions,
+                faqs
+            };
+
+            let cardTypes = JSON.parse(sessionStorage.getItem('cardTypes') || '[]');
+            cardTypes.push(newCardType);
+            sessionStorage.setItem('cardTypes', JSON.stringify(cardTypes));
+
+            alert('Card Type added successfully!');
+            window.location.href = '/card-types';
+        });
+
+        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
+            window.location.href = '/card-types';
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 8c235f0..42b68ed 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -110,4 +110,8 @@ Route::get('/add-promotions', function () {
 
 Route::get('/add-top-up', function () {
     return view('pages.add-top-up');
-})->name('add-top-up');
\ No newline at end of file
+})->name('add-top-up');
+
+Route::get('/add-card-types', function () {
+    return view('pages.add-card-types');
+})->name('add-card-types');
\ No newline at end of file