diff --git a/app/Http/Controllers/TermsAndPrivacyController.php b/app/Http/Controllers/TermsAndPrivacyController.php
new file mode 100644
index 0000000..0b9f17a
--- /dev/null
+++ b/app/Http/Controllers/TermsAndPrivacyController.php
@@ -0,0 +1,329 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Session;
+
+class TermsAndPrivacyController extends Controller
+{
+    protected $apiBaseUrl = 'http://192.168.100.6:8081/api/cms';
+
+    public function index(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from terms-and-privacy');
+                return redirect()->route('login')->with('error', 'Please log in to view terms and privacy.');
+            }
+
+            $page = $request->input('page', 1);
+            $pageSize = 5;
+            $search = $request->input('_search', null);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/TermsAndPrivacy", [
+                'page' => $page,
+                'page_size' => $pageSize,
+                '_search' => $search,
+            ]);
+
+            if ($response->status() === 401 || $response->status() === 403) {
+                Log::warning('Unauthorized or Forbidden API response: ', $response->json());
+                return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
+            }
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
+                $termsAndPrivacy = array_map(function ($item) {
+                    return [
+                        'id' => $item['tp_uuid'] ?? null,
+                        'title' => $item['title'] ?? '',
+                        'details' => $item['details'] ?? '',
+                        'type' => $item['type'] == 1 ? 'Terms' : ($item['type'] == 2 ? 'Privacy' : 'Unknown'),
+                    ];
+                }, $json['data']);
+
+                $total = $json['meta']['total'] ?? count($termsAndPrivacy);
+                $lastPage = $json['meta']['last_page'] ?? ceil($total / $pageSize);
+            } else {
+                Log::warning('No terms and privacy data found or invalid API response: ', $json);
+                $termsAndPrivacy = [];
+                $total = 0;
+                $lastPage = 1;
+            }
+
+            return view('pages.about us.terms-and-privacy', [
+                'termsAndPrivacy' => $termsAndPrivacy,
+                'currentPage' => $page,
+                'lastPage' => $lastPage,
+                'total' => $total,
+                'search' => $search,
+            ]);
+        } catch (\Exception $e) {
+            Log::error('Error fetching terms and privacy: ' . $e->getMessage());
+            return view('pages.about us.terms-and-privacy', [
+                'termsAndPrivacy' => [],
+                'currentPage' => 1,
+                'lastPage' => 1,
+                'total' => 0,
+                'search' => $search,
+            ]);
+        }
+    }
+
+    public function create()
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to add terms or privacy.');
+            }
+
+            return view('pages.terms-and-privacy.create', ['types' => ['1' => 'Terms', '2' => 'Privacy']]);
+        } catch (\Exception $e) {
+            Log::error('Error loading create terms and privacy page: ' . $e->getMessage());
+            return view('pages.terms-and-privacy.create', ['types' => ['1' => 'Terms', '2' => 'Privacy']]);
+        }
+    }
+
+    public function store(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to add terms or privacy.');
+            }
+
+            $request->validate([
+                'title' => 'required|string|max:255',
+                'details' => 'required|string',
+                'type' => 'required|in:1,2',
+            ]);
+
+            $payload = [
+                'title' => $request->input('title'),
+                'details' => $request->input('details'),
+                'type' => (int) $request->input('type'),
+            ];
+
+            Log::info('Data being sent to API for creating terms or privacy: ', $payload);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->post("{$this->apiBaseUrl}/TermsAndPrivacy", $payload);
+
+            $json = $response->json();
+            Log::info('API response for creating terms or privacy: ', $json);
+
+            if ($response->successful()) {
+                Log::info('Terms or privacy created successfully: ', $json);
+                return redirect()->route('terms-and-privacy')->with('success', $json['message'] ?? 'Terms or privacy added successfully.');
+            } else {
+                $errorMessage = $json['message'] ?? 'Failed to add terms or privacy. Please try again.';
+                if (isset($json['errors'])) {
+                    $errorMessage .= ' Errors: ' . json_encode($json['errors']);
+                }
+                throw new \Exception($errorMessage);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error creating terms or privacy: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while adding the terms or privacy: ' . $e->getMessage());
+        }
+    }
+
+    public function show($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to view terms or privacy.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/TermsAndPrivacy/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $item = [
+                    'id' => $json['data']['tp_uuid'] ?? null,
+                    'title' => $json['data']['title'] ?? '',
+                    'details' => $json['data']['details'] ?? '',
+                    'type' => $json['data']['type'] == 1 ? 'Terms' : ($json['data']['type'] == 2 ? 'Privacy' : 'Unknown'),
+                ];
+                return view('pages.terms-and-privacy.show', ['item' => $item]);
+            } else {
+                Log::warning('No terms or privacy found or invalid API response: ', $json);
+                return redirect()->back()->with('error', 'Terms or privacy not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching terms or privacy for view: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while loading the terms or privacy.');
+        }
+    }
+
+    public function edit($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to edit terms or privacy.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/TermsAndPrivacy/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $item = [
+                    'id' => $json['data']['tp_uuid'] ?? null,
+                    'title' => $json['data']['title'] ?? '',
+                    'details' => $json['data']['details'] ?? '',
+                    'type' => $json['data']['type'] ?? '',
+                ];
+                return view('pages.terms-and-privacy.edit', ['item' => $item, 'types' => ['1' => 'Terms', '2' => 'Privacy']]);
+            } else {
+                Log::warning('No terms or privacy found or invalid API response: ', $json);
+                return redirect()->back()->with('error', 'Terms or privacy not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching terms or privacy for edit: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while loading the terms or privacy.');
+        }
+    }
+
+    public function update(Request $request, $uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to update terms or privacy.');
+            }
+
+            $request->validate([
+                'title' => 'required|string|max:255',
+                'details' => 'required|string',
+                'type' => 'required|in:1,2',
+            ]);
+
+            $payload = [
+                'title' => $request->input('title'),
+                'details' => $request->input('details'),
+                'type' => (int) $request->input('type'),
+            ];
+
+            Log::info('Data being sent to API for updating terms or privacy: ', $payload);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->put("{$this->apiBaseUrl}/TermsAndPrivacy/{$uuid}", $payload);
+
+            $json = $response->json();
+            Log::info('API response for updating terms or privacy: ', $json);
+
+            if ($response->successful()) {
+                Log::info('Terms or privacy updated successfully: ', $json);
+                return redirect()->route('terms-and-privacy')->with('success', $json['message'] ?? 'Terms or privacy updated successfully.');
+            } else {
+                $errorMessage = $json['message'] ?? 'Failed to update terms or privacy. Please try again.';
+                if (isset($json['errors'])) {
+                    $errorMessage .= ' Errors: ' . json_encode($json['errors']);
+                }
+                return redirect()->back()->with('error', $errorMessage);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error updating terms or privacy: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while updating the terms or privacy: ' . $e->getMessage());
+        }
+    }
+
+    public function destroy($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete terms or privacy.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/TermsAndPrivacy/{$uuid}");
+
+            if ($response->successful()) {
+                Log::info('Terms or privacy deleted successfully: ' . $uuid);
+                return redirect()->route('terms-and-privacy')->with('success', 'Terms or privacy deleted successfully.');
+            } else {
+                Log::warning('Failed to delete terms or privacy: ', $response->json());
+                return redirect()->back()->with('error', $response->json()['message'] ?? 'Failed to delete terms or privacy. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error deleting terms or privacy: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting the terms or privacy.');
+        }
+    }
+
+    public function batchDelete(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete terms or privacy.');
+            }
+
+            $uuids = $request->input('tp_uuid', []);
+
+            if (empty($uuids)) {
+                return redirect()->back()->with('error', 'No terms or privacy selected for deletion.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/TermsAndPrivacyBatchDelete", [
+                'tp_uuid' => $uuids,
+            ]);
+
+            if ($response->successful()) {
+                Log::info('Terms or privacy batch deleted successfully: ', $uuids);
+                return redirect()->route('terms-and-privacy')->with('success', 'Selected terms or privacy deleted successfully.');
+            } else {
+                Log::warning('Failed to batch delete terms or privacy: ', $response->json());
+                return redirect()->back()->with('error', $response->json()['message'] ?? 'Failed to delete terms or privacy. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error batch deleting terms or privacy: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting the terms or privacy.');
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/views/components/terms-component.blade.php b/resources/views/components/terms-component.blade.php
new file mode 100644
index 0000000..62bb3a7
--- /dev/null
+++ b/resources/views/components/terms-component.blade.php
@@ -0,0 +1,373 @@
+@props([
+    'pageTitle' => '',
+    'data' => [],
+    'columns' => [],
+    'actions' => [],
+    'showAddButton' => false,
+    'addButtonUrl' => '#',
+    'showCheckboxes' => false,
+    'showBatchDelete' => false,
+    'showEditModal' => false,
+    'showViewModal' => false,
+    'currentPage' => 1,
+    'lastPage' => 1,
+    'total' => 0,
+])
+
+<div class="card-header border-0 bg-transparent">
+    <div class="d-flex justify-content-between align-items-center">
+        <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
+        @if ($showAddButton)
+            <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
+                <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
+            </a>
+        @endif
+    </div>
+</div>
+<div class="card-body">
+    <!-- Search and Filters -->
+    <div class="row mb-3 align-items-center">
+        <div class="col-12 col-md-6 mb-2 mb-md-0">
+            <div class="input-group input-group-sm">
+                <span class="input-group-text bg-light border-end-0">
+                    <i class="fa-solid fa-magnifying-glass text-muted"></i>
+                </span>
+                <input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput" value="{{ request()->input('_search', '') }}">
+            </div>
+        </div>
+        <div class="col-12 col-md-6 d-flex justify-content-end">
+            <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
+                <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
+            </button>
+        </div>
+    </div>
+
+    <!-- Table -->
+    <div class="table-container">
+        <table class="table table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    @if ($showCheckboxes)
+                        <th class="text-center" style="width: 40px;">
+                            <input type="checkbox" id="selectAll">
+                        </th>
+                    @endif
+                    @foreach ($columns as $index => $column)
+                        <th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + ($showCheckboxes ? 1 : 0) }}" data-key="{{ $column['key'] }}">
+                            {{ $column['name'] }}
+                            @if ($column['sortable'])
+                                <i class="fa-solid fa-sort"></i>
+                            @endif
+                        </th>
+                    @endforeach
+                    @if (!empty($actions))
+                        <th class="text-center" style="width: 120px;">Action</th>
+                    @endif
+                </tr>
+            </thead>
+            <tbody id="tableBody">
+                @foreach ($data as $row)
+                    <tr class="clickable-row" data-id="{{ $row['id'] }}">
+                        @if ($showCheckboxes)
+                            <td class="text-center">
+                                <input type="checkbox" class="rowCheckbox" value="{{ $row['id'] }}">
+                            </td>
+                        @endif
+                        @foreach ($columns as $column)
+                            <td>{{ $row[$column['key']] ?? '' }}</td>
+                        @endforeach
+                        @if (!empty($actions))
+                            <td class="text-center">
+                                @if (in_array('view', $actions))
+                                    <a href="{{ route('terms-and-privacy.show', $row['id']) }}" class="btn btn-sm view-btn me-1" title="View">
+                                        <i class="fa-solid fa-eye"></i>
+                                    </a>
+                                @endif
+                                @if (in_array('edit', $actions))
+                                    <a href="{{ route('terms-and-privacy.edit', $row['id']) }}" class="btn btn-sm edit-btn me-1" title="Edit">
+                                        <i class="fa-solid fa-pen"></i>
+                                    </a>
+                                @endif
+                                @if (in_array('delete', $actions))
+                                    <form id="delete-form-{{ $row['id'] }}" action="{{ route('terms-and-privacy.destroy', $row['id']) }}" method="POST" style="display: inline;">
+                                        @csrf
+                                        @method('DELETE')
+                                        <a href="#" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this item?')) { document.getElementById('delete-form-{{ $row['id'] }}').submit(); }">
+                                            <i class="fa-solid fa-trash"></i>
+                                        </a>
+                                    </form>
+                                @endif
+                            </td>
+                        @endif
+                    </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Batch Delete and Pagination -->
+    <div class="d-flex justify-content-between align-items-center mt-4">
+        @if ($showBatchDelete)
+            <div>
+                <form id="batch-delete-form" action="{{ route('terms-and-privacy.batchDelete') }}" method="POST">
+                    @csrf
+                    <input type="hidden" name="tp_uuid" id="batchDeleteUuids">
+                    <button type="submit" class="btn btn-danger btn-sm" id="deleteSelected" disabled>
+                        <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
+                    </button>
+                </form>
+            </div>
+        @endif
+        <nav aria-label="Page navigation">
+            <ul class="pagination pagination-sm" id="pagination">
+                <li class="page-item {{ $currentPage == 1 ? 'disabled' : '' }}">
+                    <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $currentPage - 1, '_search' => request()->input('_search')]) }}" aria-label="Previous">
+                        <span aria-hidden="true">«</span>
+                    </a>
+                </li>
+                @for ($i = 1; $i <= $lastPage; $i++)
+                    <li class="page-item {{ $currentPage == $i ? 'active' : '' }}">
+                        <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $i, '_search' => request()->input('_search')]) }}">{{ $i }}</a>
+                    </li>
+                @endfor
+                <li class="page-item {{ $currentPage == $lastPage ? 'disabled' : '' }}">
+                    <a class="page-link" href="{{ route('terms-and-privacy', ['page' => $currentPage + 1, '_search' => request()->input('_search')]) }}" aria-label="Next">
+                        <span aria-hidden="true">»</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+
+<style>
+    .card, .table, .btn, .form-control, .input-group-text {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        font-weight: 400;
+        line-height: 1.5;
+    }
+    .table-container {
+        overflow-x: auto;
+    }
+    .table th, .table td {
+        white-space: nowrap;
+    }
+    .sortable {
+        cursor: pointer;
+        position: relative;
+    }
+    .sortable:hover {
+        background-color: #f8f9fa;
+    }
+    .sortable i {
+        margin-left: 5px;
+        color: #6c757d;
+    }
+    .clickable-row:hover {
+        background-color: #f1f1f1;
+        cursor: pointer;
+    }
+    .view-btn { border-color: #0d6efd; color: #0d6efd; }
+    .view-btn:hover { background-color: #0d6efd; color: #fff; }
+    .edit-btn { border-color: #ffc107; color: #ffc107; }
+    .edit-btn:hover { background-color: #ffc107; color: #fff; }
+    .delete-btn { border-color: #dc3545; color: #dc3545; }
+    .delete-btn:hover { background-color: #dc3545; color: #fff; }
+</style>
+
+<script>
+    const tableConfig = {
+        data: @json($data),
+        columns: @json($columns),
+        actions: @json($actions),
+        showCheckboxes: {{ json_encode($showCheckboxes) }},
+        showBatchDelete: {{ json_encode($showBatchDelete) }},
+        showEditModal: {{ json_encode($showEditModal) }},
+        showViewModal: {{ json_encode($showViewModal) }},
+        pageTitle: @json($pageTitle),
+        currentPage: {{ $currentPage }},
+        lastPage: {{ $lastPage }},
+        total: {{ $total }},
+    };
+
+    const rowsPerPage = 5;
+    let currentPage = tableConfig.currentPage;
+    let filteredRows = [...tableConfig.data];
+    let sortDirection = {};
+
+    function renderTable() {
+        const tableBody = document.getElementById('tableBody');
+        if (!tableBody) return;
+        tableBody.innerHTML = '';
+
+        const startIndex = (currentPage - 1) * rowsPerPage;
+        const endIndex = startIndex + rowsPerPage;
+        const paginatedRows = filteredRows.slice(startIndex, endIndex);
+
+        paginatedRows.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.setAttribute('data-id', row.id);
+            tr.classList.add('clickable-row');
+            let rowHtml = '';
+
+            if (tableConfig.showCheckboxes) {
+                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox" value="${row.id}"></td>`;
+            }
+
+            tableConfig.columns.forEach(col => {
+                let value = row[col.key] || '';
+                rowHtml += `<td>${value}</td>`;
+            });
+
+            if (tableConfig.actions.length > 0) {
+                rowHtml += `<td class="text-center">`;
+                tableConfig.actions.forEach(action => {
+                    if (action === 'view') {
+                        rowHtml += `<a href="{{ route('terms-and-privacy.show', '') }}/${row.id}" class="btn btn-sm view-btn me-1" title="View"><i class="fa-solid fa-eye"></i></a>`;
+                    } else if (action === 'edit') {
+                        rowHtml += `<a href="{{ route('terms-and-privacy.edit', '') }}/${row.id}" class="btn btn-sm edit-btn me-1" title="Edit"><i class="fa-solid fa-pen"></i></a>`;
+                    } else if (action === 'delete') {
+                        rowHtml += `<form id="delete-form-${row.id}" action="{{ route('terms-and-privacy.destroy', '') }}/${row.id}" method="POST" style="display: inline;">
+                                        @csrf
+                                        @method('DELETE')
+                                        <a href="#" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this item?')) { document.getElementById('delete-form-${row.id}').submit(); }">
+                                            <i class="fa-solid fa-trash"></i>
+                                        </a>
+                                    </form>`;
+                    }
+                });
+                rowHtml += `</td>`;
+            }
+
+            tr.innerHTML = rowHtml;
+            tableBody.appendChild(tr);
+        });
+
+        attachEventListeners();
+        updateNoDataMessage();
+    }
+
+    function updateNoDataMessage() {
+        const noDataMessage = document.getElementById('no-data-message');
+        if (noDataMessage) {
+            noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
+        }
+    }
+
+    function attachEventListeners() {
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                filteredRows = tableConfig.data.filter(row => {
+                    return Object.values(row).some(value =>
+                        value && value.toString().toLowerCase().includes(searchTerm)
+                    );
+                });
+                currentPage = 1;
+                renderTable();
+                const url = new URL(window.location);
+                if (searchTerm) {
+                    url.searchParams.set('_search', searchTerm);
+                    window.location.href = url;
+                } else {
+                    url.searchParams.delete('_search');
+                    window.history.pushState({}, '', url);
+                }
+            });
+        }
+
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
+                const key = tableConfig.columns[columnIndex].key;
+
+                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
+
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                const icon = this.querySelector('i');
+                if (icon) {
+                    icon.classList.remove('fa-sort');
+                    icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
+                }
+
+                filteredRows.sort((a, b) => {
+                    let aValue = (a[key] || '').toString().toLowerCase();
+                    let bValue = (b[key] || '').toString().toLowerCase();
+                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+                });
+
+                currentPage = 1;
+                renderTable();
+            });
+        });
+
+        const clearFilters = document.getElementById('clearFilters');
+        if (clearFilters) {
+            clearFilters.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                sortDirection = {};
+                filteredRows = [...tableConfig.data];
+                currentPage = 1;
+                renderTable();
+                const url = new URL(window.location);
+                url.searchParams.delete('_search');
+                window.history.pushState({}, '', url);
+            });
+        }
+
+        const checkboxes = document.querySelectorAll('.rowCheckbox');
+        const selectAll = document.getElementById('selectAll');
+        const deleteSelected = document.getElementById('deleteSelected');
+        const batchDeleteUuids = document.getElementById('batchDeleteUuids');
+
+        if (selectAll) {
+            selectAll.addEventListener('change', function() {
+                checkboxes.forEach(checkbox => checkbox.checked = this.checked);
+                updateDeleteButton();
+            });
+        }
+
+        if (checkboxes.length > 0) {
+            checkboxes.forEach(checkbox => {
+                checkbox.addEventListener('change', updateDeleteButton);
+            });
+        }
+
+        if (deleteSelected && batchDeleteUuids) {
+            deleteSelected.addEventListener('click', function(e) {
+                e.preventDefault();
+                const selectedUuids = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(cb => cb.value);
+                if (selectedUuids.length > 0 && confirm('Are you sure you want to delete the selected items?')) {
+                    batchDeleteUuids.value = JSON.stringify(selectedUuids);
+                    document.getElementById('batch-delete-form').submit();
+                }
+            });
+        }
+
+        document.querySelectorAll('.clickable-row').forEach(row => {
+            row.addEventListener('click', function(e) {
+                if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
+                    return;
+                }
+                const id = this.getAttribute('data-id');
+                window.location.href = `{{ route('terms-and-privacy.show', '') }}/${id}`;
+            });
+        });
+    }
+
+    function updateDeleteButton() {
+        const deleteSelected = document.getElementById('deleteSelected');
+        const checkedBoxes = document.querySelectorAll('.rowCheckbox:checked');
+        deleteSelected.disabled = checkedBoxes.length === 0;
+    }
+
+    renderTable();
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/about us/terms-and-privacy.blade.php b/resources/views/pages/about us/terms-and-privacy.blade.php
index a4cb93e..417527f 100644
--- a/resources/views/pages/about us/terms-and-privacy.blade.php	
+++ b/resources/views/pages/about us/terms-and-privacy.blade.php	
@@ -3,74 +3,40 @@
 @section('page_title', 'Terms and Privacy')
 
 @section('content')
-    @php
-        $termsAndPrivacy = [
-            [
-                'id' => 1,
-                'title' => 'User Agreement',
-                'details' => 'Users must agree to use the platform responsibly and comply with all applicable laws.',
-                'type' => 'Terms'
+    <div id="terms-and-privacy-table">
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @include('components.terms-component', [
+            'pageTitle' => 'Terms and Privacy',
+            'data' => $termsAndPrivacy ?? [],
+            'columns' => [
+                ['name' => 'Title', 'key' => 'title', 'sortable' => true],
+                ['name' => 'Details', 'key' => 'details', 'sortable' => true],
+                ['name' => 'Type', 'key' => 'type', 'sortable' => true],
             ],
-            [
-                'id' => 2,
-                'title' => 'Privacy Policy',
-                'details' => 'We collect personal data to improve services, with consent, and protect user information.',
-                'type' => 'Privacy'
-            ],
-            [
-                'id' => 3,
-                'title' => 'Service Terms',
-                'details' => 'Details on how services are provided, including limitations and user obligations.',
-                'type' => 'Terms'
-            ],
-            [
-                'id' => 4,
-                'title' => 'Data Protection',
-                'details' => 'Our commitment to GDPR compliance and secure data handling practices.',
-                'type' => 'Privacy'
-            ],
-            [
-                'id' => 5,
-                'title' => 'Refund Policy',
-                'details' => 'Conditions under which refunds are issued for services or subscriptions.',
-                'type' => 'Terms'
-            ],
-            [
-                'id' => 6,
-                'title' => 'Cookie Policy',
-                'details' => 'How we use cookies to enhance user experience and track site usage.',
-                'type' => 'Privacy'
-            ]
-        ];
-    @endphp
-
-    @include('components.table-component', [
-        'pageTitle' => 'Terms and Privacy',
-        'data' => $termsAndPrivacy,
-        'columns' => [
-            ['name' => 'Title', 'key' => 'title', 'sortable' => true],
-            ['name' => 'Details', 'key' => 'details', 'sortable' => true],
-            ['name' => 'Type', 'key' => 'type', 'sortable' => true]
-        ],
-        'allFields' => [
-            ['name' => 'Title', 'key' => 'title', 'type' => 'text', 'required' => true],
-            ['name' => 'Details', 'key' => 'details', 'type' => 'textarea', 'required' => true]
-        ],
-        'actions' => ['edit', 'view', 'delete'],
-        'showAddButton' => true,
-        'addButtonUrl' => '/add-terms-and-privacy',
-        'showCheckboxes' => true,
-        'showBatchDelete' => true,
-        'showEditModal' => true,
-        'showViewModal' => true
-    ])
-
-    <script>
-        const storedTerms = JSON.parse(sessionStorage.getItem('termsAndPrivacy') || '[]');
-        if (storedTerms.length > 0) {
-            tableConfig.data = [...tableConfig.data, ...storedTerms];
-            renderTable();
-            renderPagination();
-        }
-    </script>
+            'actions' => ['edit', 'view', 'delete'],
+            'showAddButton' => true,
+            'addButtonUrl' => route('terms-and-privacy.create'),
+            'showCheckboxes' => true,
+            'showBatchDelete' => true,
+            'showEditModal' => false,
+            'showViewModal' => false,
+            'currentPage' => $currentPage ?? 1,
+            'lastPage' => $lastPage ?? 1,
+            'total' => $total ?? 0,
+        ])
+        <div id="no-data-message" style="display: {{ empty($termsAndPrivacy ?? []) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
+            <p>No terms or privacy records found.</p>
+        </div>
+    </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/terms-and-privacy/create.blade.php b/resources/views/pages/terms-and-privacy/create.blade.php
new file mode 100644
index 0000000..8c69c58
--- /dev/null
+++ b/resources/views/pages/terms-and-privacy/create.blade.php
@@ -0,0 +1,63 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Terms or Privacy')
+
+@section('content')
+    <div class="container">
+        <h2>Add Terms or Privacy</h2>
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if ($errors->any())
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <ul>
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+
+        <form method="POST" action="{{ route('terms-and-privacy.store') }}">
+            @csrf
+            <div class="mb-3">
+                <label for="title" class="form-label">Title</label>
+                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required minlength="3">
+                @error('title')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <div class="mb-3">
+                <label for="details" class="form-label">Details</label>
+                <textarea class="form-control @error('details') is-invalid @enderror" id="details" name="details" rows="5" required minlength="10">{{ old('details') }}</textarea>
+                @error('details')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <div class="mb-3">
+                <label for="type" class="form-label">Type</label>
+                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
+                    <option value="" disabled {{ old('type') ? '' : 'selected' }}>Select type</option>
+                    @foreach ($types as $value => $label)
+                        <option value="{{ $value }}" {{ old('type') == $value ? 'selected' : '' }}>{{ $label }}</option>
+                    @endforeach
+                </select>
+                @error('type')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <button type="submit" class="btn btn-primary">Save</button>
+            <a href="{{ route('terms-and-privacy') }}" class="btn btn-secondary">Cancel</a>
+        </form>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/terms-and-privacy/edit.blade.php b/resources/views/pages/terms-and-privacy/edit.blade.php
new file mode 100644
index 0000000..0a62c12
--- /dev/null
+++ b/resources/views/pages/terms-and-privacy/edit.blade.php
@@ -0,0 +1,64 @@
+@extends('layouts.app')
+
+@section('page_title', 'Edit Terms or Privacy')
+
+@section('content')
+    <div class="container">
+        <h2>Edit Terms or Privacy</h2>
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if ($errors->any())
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <ul>
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+
+        <form method="POST" action="{{ route('terms-and-privacy.update', $item['id']) }}">
+            @csrf
+            @method('PUT')
+            <div class="mb-3">
+                <label for="title" class="form-label">Title</label>
+                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title', $item['title']) }}" required minlength="3">
+                @error('title')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <div class="mb-3">
+                <label for="details" class="form-label">Details</label>
+                <textarea class="form-control @error('details') is-invalid @enderror" id="details" name="details" rows="5" required minlength="10">{{ old('details', $item['details']) }}</textarea>
+                @error('details')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <div class="mb-3">
+                <label for="type" class="form-label">Type</label>
+                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
+                    <option value="" disabled {{ old('type', $item['type']) ? '' : 'selected' }}>Select type</option>
+                    @foreach ($types as $value => $label)
+                        <option value="{{ $value }}" {{ old('type', $item['type']) == $value ? 'selected' : '' }}>{{ $label }}</option>
+                    @endforeach
+                </select>
+                @error('type')
+                    <div class="invalid-feedback">{{ $message }}</div>
+                @enderror
+            </div>
+            <button type="submit" class="btn btn-primary">Update</button>
+            <a href="{{ route('terms-and-privacy') }}" class="btn btn-secondary">Cancel</a>
+        </form>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/terms-and-privacy/show.blade.php b/resources/views/pages/terms-and-privacy/show.blade.php
new file mode 100644
index 0000000..d3c1761
--- /dev/null
+++ b/resources/views/pages/terms-and-privacy/show.blade.php
@@ -0,0 +1,31 @@
+@extends('layouts.app')
+
+@section('page_title', 'View Terms or Privacy')
+
+@section('content')
+    <div class="container">
+        <h2>View Terms or Privacy</h2>
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">{{ $item['title'] }}</h5>
+                <p class="card-text"><strong>Details:</strong> {{ $item['details'] }}</p>
+                <p class="card-text"><strong>Type:</strong> {{ $item['type'] }}</p>
+                <a href="{{ route('terms-and-privacy') }}" class="btn btn-secondary">Back</a>
+                <a href="{{ route('terms-and-privacy.edit', $item['id']) }}" class="btn btn-primary">Edit</a>
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f020678..8ef1c0c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,7 +9,7 @@ use App\Http\Controllers\TopUpController;
 use App\Http\Controllers\NotificationController;
 use App\Http\Controllers\CardMemberController;
 use App\Http\Controllers\PromotionController;
-
+use App\Http\Controllers\TermsAndPrivacyController;
 
 
 Route::get('/', function () {
@@ -45,9 +45,7 @@ Route::get('/card-types', function () {
     return view('pages.about us.card-types');
 })->name('card-types');
 
-Route::get('/terms-and-privacy', function () {
-    return view('pages.about us.terms-and-privacy');
-})->name('terms-and-privacy');
+
 
 Route::get('/registration-report', function () {
     return view('pages.reports.registration-report');
@@ -195,4 +193,14 @@ Route::get('/promotions/{uuid}', [PromotionController::class, 'show'])->name('pr
 Route::get('/promotions/{uuid}/edit', [PromotionController::class, 'edit'])->name('promotions.edit');
 Route::put('/promotions/{uuid}', [PromotionController::class, 'update'])->name('promotions.update');
 Route::delete('/promotions/{uuid}', [PromotionController::class, 'destroy'])->name('promotions.destroy');
-Route::post('/promotions/batch-delete', [PromotionController::class, 'batchDelete'])->name('promotions.batch-delete');
\ No newline at end of file
+Route::post('/promotions/batch-delete', [PromotionController::class, 'batchDelete'])->name('promotions.batch-delete');
+
+//Terms-and-Privacy
+Route::get('/terms-and-privacy', [TermsAndPrivacyController::class, 'index'])->name('terms-and-privacy');
+Route::get('/terms-and-privacy/create', [TermsAndPrivacyController::class, 'create'])->name('terms-and-privacy.create');
+Route::post('/terms-and-privacy', [TermsAndPrivacyController::class, 'store'])->name('terms-and-privacy.store');
+Route::get('/terms-and-privacy/{uuid}', [TermsAndPrivacyController::class, 'show'])->name('terms-and-privacy.show');
+Route::get('/terms-and-privacy/{uuid}/edit', [TermsAndPrivacyController::class, 'edit'])->name('terms-and-privacy.edit');
+Route::put('/terms-and-privacy/{uuid}', [TermsAndPrivacyController::class, 'update'])->name('terms-and-privacy.update');
+Route::delete('/terms-and-privacy/{uuid}', [TermsAndPrivacyController::class, 'destroy'])->name('terms-and-privacy.destroy');
+Route::delete('/terms-and-privacy/batch-delete', [TermsAndPrivacyController::class, 'batchDelete'])->name('terms-and-privacy.batchDelete');
\ No newline at end of file