diff --git a/backend/cmd/app/main.go b/backend/cmd/app/main.go
index 7ad3c08..966cb38 100644
--- a/backend/cmd/app/main.go
+++ b/backend/cmd/app/main.go
@@ -7,6 +7,7 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"strings"
 	"unicard-go/backend/internal/admin"
 	authentication "unicard-go/backend/internal/auth"
 	"unicard-go/backend/internal/user"
@@ -89,12 +90,7 @@ func main() {
 	mux.HandleFunc("POST /v1/reset-password", authHandler.ResetPassword)
 	mux.HandleFunc("GET /{username}", userHandler.DashboardView)
 	mux.HandleFunc("GET /v1/user/{username}", userHandler.DashboardHandler)
-	//mux.HandleFunc("GET /transaction", userHandler.TransactionView)
-	//mux.HandleFunc("GET /topup", userHandler.TopupView)
-	//mux.HandleFunc("GET /profile", userHandler.ProfileView)
-	//mux.HandleFunc("GET /settings", userHandler.SettingsView)
-	//mux.HandleFunc("GET /card", userHandler.CardView)
-	//mux.HandleFunc("GET /v1/user/transactions", userHandler.TransactionsJSONHandler)
+	mux.HandleFunc("GET /v1/user/{username}/transactions", userHandler.TransactionsJSONHandler)
 	//mux.HandleFunc("GET /logout",)
 
 	// super admin endpoints
@@ -123,14 +119,28 @@ func main() {
 	mux.HandleFunc("POST /v1/admin/{username}/deactivatecardauth", adminHanlder.DeactivateCardHanlder)
 	mux.HandleFunc("POST /v1/admin/{username}/deletecardauth", adminHanlder.DeleteCardHandler)
 	mux.HandleFunc("GET /admin/{username}/delete-cards", adminHanlder.DeleteCardView)
-	
-	
+
+	// terminal simulation endpoints
+	mux.HandleFunc("GET /terminal-sim", adminHanlder.TerminalSimView)
+	mux.HandleFunc("POST /v1/terminal-sim/transact", adminHanlder.TerminalSimTransactionHandler)
+
 	// Wrap mux with custom handler for root redirect
 	customHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		if r.URL.Path == "/" {
 			http.Redirect(w, r, "/login", http.StatusSeeOther)
 			return
 		}
+
+		// Handle GET /{username}/transaction(s) manually to avoid ServeMux conflict with /assets/
+		parts := strings.Split(r.URL.Path, "/")
+		if len(parts) == 3 && (parts[2] == "transaction" || parts[2] == "transactions") && r.Method == http.MethodGet {
+			if parts[1] != "assets" && parts[1] != "storage" && parts[1] != "v1" && parts[1] != "admin" {
+				r.SetPathValue("username", parts[1])
+				userHandler.TransactionView(w, r)
+				return
+			}
+		}
+
 		mux.ServeHTTP(w, r)
 	})
 
diff --git a/backend/internal/admin/terminal_sim.go b/backend/internal/admin/terminal_sim.go
new file mode 100644
index 0000000..18cfc5f
--- /dev/null
+++ b/backend/internal/admin/terminal_sim.go
@@ -0,0 +1,210 @@
+package admin
+
+import (
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"time"
+
+	jsonwrite "unicard-go/backend/internal/pkg/handler"
+)
+
+// TerminalSimView renders the terminal simulation page
+func (h *Handler) TerminalSimView(w http.ResponseWriter, r *http.Request) {
+	fmt.Println("Terminal Simulation view is running...")
+
+	type Merchant struct {
+		ID   string
+		Name string
+	}
+	var merchants []Merchant
+
+	rows, err := h.DB.Query("SELECT user_id, business_name FROM merchants")
+	if err == nil {
+		defer rows.Close()
+		for rows.Next() {
+			var m Merchant
+			if err := rows.Scan(&m.ID, &m.Name); err == nil {
+				merchants = append(merchants, m)
+			}
+		}
+	}
+
+	data := struct {
+		Merchants []Merchant
+	}{
+		Merchants: merchants,
+	}
+
+	h.Tpl.ExecuteTemplate(w, "terminal_sim.html", data)
+}
+
+// TerminalSimTransactionHandler handles simulated terminal transactions
+func (h *Handler) TerminalSimTransactionHandler(w http.ResponseWriter, r *http.Request) {
+	fmt.Println("TerminalSimTransactionHandler is running...")
+
+	type SimRequest struct {
+		CardNumber string  `json:"card_number"`
+		Type       string  `json:"type"`
+		Amount     float64 `json:"amount"`
+		MerchantID string  `json:"merchant_id"`
+	}
+
+	var req SimRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Invalid request payload",
+		})
+		return
+	}
+
+	if req.CardNumber == "" || req.Amount <= 0 || req.Type == "" {
+		jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Missing required fields",
+		})
+		return
+	}
+
+	// 1. Check if card exists, is active, and linked to a user
+	var balance float64
+	var status string
+	var userID sql.NullString
+
+	err := h.DB.QueryRow(`
+		SELECT balance, status, user_id 
+		FROM cards 
+		WHERE card_number = ?
+	`, req.CardNumber).Scan(&balance, &status, &userID)
+
+	if err != nil {
+		if err == sql.ErrNoRows {
+			jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+				Success: false,
+				Message: "Card not found",
+			})
+			return
+		}
+		jsonwrite.WriteJSON(w, http.StatusInternalServerError, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Database error",
+		})
+		return
+	}
+
+	if status != "active" {
+		jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Card is not active",
+		})
+		return
+	}
+
+	if !userID.Valid || userID.String == "" {
+		jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Card is not linked to any user",
+		})
+		return
+	}
+
+	// 2. Check balance
+	if req.Type != "Refund" && balance < req.Amount {
+		jsonwrite.WriteJSON(w, http.StatusOK, jsonwrite.APIResponse{
+			Success: false,
+			Message: fmt.Sprintf("Insufficient balance. Current balance: %.2f", balance),
+		})
+		return
+	}
+
+	// 2.5 Get merchant commission rate
+	var commissionRate float64
+	err = h.DB.QueryRow("SELECT commission_rate FROM merchants WHERE user_id = ?", req.MerchantID).Scan(&commissionRate)
+	if err != nil {
+		commissionRate = 2.00 // default fallback
+	}
+
+	serviceFee := req.Amount * (commissionRate / 100.0)
+	loyaltyPoints := req.Amount * 0.002 // 0.2% reward points
+
+	// 3. Process Transaction (Start TX)
+	tx, err := h.DB.Begin()
+	if err != nil {
+		jsonwrite.WriteJSON(w, http.StatusInternalServerError, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Failed to start transaction",
+		})
+		return
+	}
+
+	// Deduct or add balance and adjust loyalty points based on type
+	if req.Type == "Refund" {
+		_, err = tx.Exec(`UPDATE cards SET balance = balance + ?, loyalty_points = loyalty_points - ? WHERE card_number = ?`, req.Amount, loyaltyPoints, req.CardNumber)
+	} else {
+		_, err = tx.Exec(`UPDATE cards SET balance = balance - ?, loyalty_points = loyalty_points + ? WHERE card_number = ?`, req.Amount, loyaltyPoints, req.CardNumber)
+	}
+	if err != nil {
+		tx.Rollback()
+		jsonwrite.WriteJSON(w, http.StatusInternalServerError, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Failed to deduct balance",
+		})
+		return
+	}
+
+	// Insert transaction record
+	transactionID := fmt.Sprintf("TXN-SIM-%d", time.Now().UnixNano())
+
+	// Get a dummy terminal ID
+	var terminalID string
+	err = h.DB.QueryRow("SELECT terminal_id FROM terminals LIMIT 1").Scan(&terminalID)
+	if err != nil {
+		terminalID = "TRM-SIM-001" // Fallback if no terminals exist
+	}
+
+	// Get a dummy processed_by user ID
+	var processedBy string
+	err = h.DB.QueryRow("SELECT user_id FROM users LIMIT 1").Scan(&processedBy)
+	if err != nil {
+		processedBy = "USR-SIM-001" // Fallback if no users exist
+	}
+
+	// Determine transaction type
+	dbTransactionType := "payment"
+	if req.Type == "Refund" {
+		dbTransactionType = "refund"
+	}
+
+	_, err = tx.Exec(`
+		INSERT INTO transactions (transaction_id, card_number, merchant_id, terminal_id, transaction_type, amount, service_fee, processed_by) 
+		VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+	`, transactionID, req.CardNumber, req.MerchantID, terminalID, dbTransactionType, req.Amount, serviceFee, processedBy)
+
+	if err != nil {
+		// If `merchant_id` is not nullable and causes error or id doesn't auto-increment
+		// let's try with dummy data if needed, but we rollback first
+		tx.Rollback()
+		fmt.Printf("Error inserting transaction: %v\n", err)
+		jsonwrite.WriteJSON(w, http.StatusInternalServerError, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Failed to record transaction",
+		})
+		return
+	}
+
+	if err = tx.Commit(); err != nil {
+		jsonwrite.WriteJSON(w, http.StatusInternalServerError, jsonwrite.APIResponse{
+			Success: false,
+			Message: "Failed to commit transaction",
+		})
+		return
+	}
+
+	jsonwrite.WriteJSON(w, http.StatusOK, map[string]interface{}{
+		"success": true,
+		"message": "Transaction successful",
+		"service_fee": serviceFee,
+	})
+}
diff --git a/backend/internal/user/dashboard.go b/backend/internal/user/dashboard.go
index 1d605f8..04913e7 100644
--- a/backend/internal/user/dashboard.go
+++ b/backend/internal/user/dashboard.go
@@ -9,12 +9,14 @@ import (
 	jsonwrite "unicard-go/backend/internal/pkg/handler"
 )
 
-// Transaction struct represents a user's transaction for the dashboard view
 type Transaction struct {
-	Date        string  `json:"date" db:"date"`
-	Description string  `json:"description" db:"description"`
-	Type        string  `json:"type" db:"transaction_type"`
-	Amount      float64 `json:"amount" db:"transaction_amount"`
+	TransactionID string  `json:"transaction_id"`
+	TerminalID    string  `json:"terminal_id"`
+	Date          string  `json:"date" db:"date"`
+	Time          string  `json:"time"`
+	Description   string  `json:"description" db:"description"`
+	Type          string  `json:"type" db:"transaction_type"`
+	Amount        float64 `json:"amount" db:"transaction_amount"`
 }
 
 // DashboardUser info struct for the user dashboard view
@@ -38,9 +40,14 @@ type DashboardUser struct {
 func (h *Handler) DashboardView(w http.ResponseWriter, r *http.Request) {
 	fmt.Println("Dashboard view is running...")
 
-	// Check if session cookie is present (Removed)
+	username := r.PathValue("username")
+	data := struct {
+		Username string
+	}{
+		Username: username,
+	}
 
-	h.Tpl.ExecuteTemplate(w, "dashboard.html", nil)
+	h.Tpl.ExecuteTemplate(w, "dashboard.html", data)
 }
 
 func (h *Handler) DashboardHandler(w http.ResponseWriter, r *http.Request) {
@@ -128,11 +135,12 @@ func (h *Handler) DashboardHandler(w http.ResponseWriter, r *http.Request) {
 
 	// Fetch recent transactions
 	txnQuery := `
-		SELECT t.created_at, m.business_name, t.transaction_type, t.amount 
+		SELECT t.transaction_id, t.created_at, m.business_name, t.transaction_type, t.amount, t.terminal_id
 		FROM transactions t 
 		JOIN cards c ON t.card_number = c.card_number 
-		JOIN merchants m ON t.merchant_id = m.id 
-		WHERE c.user_id = ? 
+		JOIN users u ON c.user_id = u.user_id
+		LEFT JOIN merchants m ON t.merchant_id = m.user_id 
+		WHERE u.username = ? 
 		ORDER BY t.created_at DESC LIMIT 5
 	`
 	rows, err := h.DB.Query(txnQuery, userID)
@@ -142,8 +150,15 @@ func (h *Handler) DashboardHandler(w http.ResponseWriter, r *http.Request) {
 		for rows.Next() {
 			var t Transaction
 			var createdAt string
-			if err := rows.Scan(&createdAt, &t.Description, &t.Type, &t.Amount); err == nil {
+			var businessName sql.NullString
+			if err := rows.Scan(&t.TransactionID, &createdAt, &businessName, &t.Type, &t.Amount, &t.TerminalID); err == nil {
 				t.Date = formatDate(createdAt)
+				t.Time = formatTime(createdAt)
+				if businessName.Valid {
+					t.Description = businessName.String
+				} else {
+					t.Description = "Terminal Simulation"
+				}
 				transactions = append(transactions, t)
 			}
 		}
@@ -185,3 +200,18 @@ func formatDate(dbTime string) string {
 	}
 	return dbTime
 }
+
+func formatTime(dbTime string) string {
+	t, err := time.Parse("2006-01-02 15:04:05", dbTime)
+	if err == nil {
+		return t.Format("03:04 PM")
+	}
+	t2, err := time.Parse(time.RFC3339, dbTime)
+	if err == nil {
+		return t2.Format("03:04 PM")
+	}
+	if len(dbTime) > 10 {
+		return dbTime[11:16]
+	}
+	return ""
+}
diff --git a/backend/internal/user/transaction.go b/backend/internal/user/transaction.go
new file mode 100644
index 0000000..090d44f
--- /dev/null
+++ b/backend/internal/user/transaction.go
@@ -0,0 +1,92 @@
+package user
+
+import (
+	"database/sql"
+	"fmt"
+	"net/http"
+	jsonwrite "unicard-go/backend/internal/pkg/handler"
+)
+
+// TransactionView renders the transaction.html template
+func (h *Handler) TransactionView(w http.ResponseWriter, r *http.Request) {
+	fmt.Println("Transaction view is running...")
+
+	username := r.PathValue("username")
+	data := struct {
+		Username string
+	}{
+		Username: username,
+	}
+
+	h.Tpl.ExecuteTemplate(w, "transaction.html", data)
+}
+
+// TransactionsJSONHandler returns the user's transactions as JSON
+func (h *Handler) TransactionsJSONHandler(w http.ResponseWriter, r *http.Request) {
+	fmt.Println("TransactionsJSONHandler is running...")
+
+	username := r.PathValue("username")
+	if username == "" {
+		jsonwrite.WriteJSON(w, http.StatusBadRequest, jsonwrite.APIResponse{
+			Success: false,
+			Message: "user is required",
+		})
+		return
+	}
+
+	// Fetch transactions
+	txnQuery := `
+		SELECT t.transaction_id, t.created_at, m.business_name, t.transaction_type, t.amount, t.terminal_id
+		FROM transactions t 
+		JOIN cards c ON t.card_number = c.card_number 
+		JOIN users u ON c.user_id = u.user_id
+		LEFT JOIN merchants m ON t.merchant_id = m.user_id 
+		WHERE u.username = ? 
+		ORDER BY t.created_at DESC
+	`
+	rows, err := h.DB.Query(txnQuery, username)
+
+	type TxnResponse struct {
+		TransactionID string  `json:"transaction_id"`
+		TerminalID    string  `json:"terminal_id"`
+		Date          string  `json:"date"`
+		Time          string  `json:"time"`
+		Description   string  `json:"description"`
+		Type          string  `json:"type"`
+		Amount        float64 `json:"amount"`
+		Status        string  `json:"status"`
+	}
+
+	var transactions []TxnResponse
+	if err == nil {
+		defer rows.Close()
+		for rows.Next() {
+			var t TxnResponse
+			var createdAt string
+			var businessName sql.NullString
+			if err := rows.Scan(&t.TransactionID, &createdAt, &businessName, &t.Type, &t.Amount, &t.TerminalID); err == nil {
+				t.Status = "Completed"
+				t.Date = formatDate(createdAt) // Uses formatDate from dashboard.go
+				t.Time = formatTime(createdAt) // Uses formatTime from dashboard.go
+				if businessName.Valid {
+					t.Description = businessName.String
+				} else {
+					t.Description = "Transaction"
+				}
+				transactions = append(transactions, t)
+			}
+		}
+	} else {
+		fmt.Printf("Error fetching transactions: %v\n", err)
+	}
+
+	response := struct {
+		Success      bool          `json:"success"`
+		Transactions []TxnResponse `json:"transactions"`
+	}{
+		Success:      true,
+		Transactions: transactions,
+	}
+
+	jsonwrite.WriteJSON(w, http.StatusOK, response)
+}
diff --git a/frontend/assets/js/card.js b/frontend/assets/js/card.js
index 2780459..acb2358 100644
--- a/frontend/assets/js/card.js
+++ b/frontend/assets/js/card.js
@@ -95,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
         // --- Logic Update ---
         // Disable the "Report" button, but leave "Request Replacement" active.
         reportButton.disabled = true;
-        reportButton.innerHTML = '<i class="fas fa-check mr-2"></i> Card Blocked';
+        reportButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg> Card Blocked';
         reportButton.classList.add('opacity-50', 'cursor-not-allowed');
         
         // Update the status badge
@@ -130,7 +130,7 @@ document.addEventListener("DOMContentLoaded", function () {
         // --- Logic Update ---
         // Disable BOTH buttons since a replacement has been requested.
         reportButton.disabled = true;
-        reportButton.innerHTML = '<i class="fas fa-check mr-2"></i> Card Blocked';
+        reportButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg> Card Blocked';
         reportButton.classList.add('opacity-50', 'cursor-not-allowed');
         
         replacementButton.disabled = true;
@@ -185,7 +185,7 @@ document.addEventListener("DOMContentLoaded", function () {
         // Also, update the button states based on the fetched status
         if (currentDemoStatus === "Blocked" || currentDemoStatus === "Replaced" || currentDemoStatus === "Inactive") {
              reportButton.disabled = true;
-             reportButton.innerHTML = '<i class="fas fa-check mr-2"></i> Card Blocked';
+             reportButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg> Card Blocked';
              reportButton.classList.add('opacity-50', 'cursor-not-allowed');
         }
         if (currentDemoStatus === "Replaced") {
diff --git a/frontend/assets/js/dashboard.js b/frontend/assets/js/dashboard.js
index 4521b28..ce382c2 100644
--- a/frontend/assets/js/dashboard.js
+++ b/frontend/assets/js/dashboard.js
@@ -22,10 +22,10 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // --- Sidebar Logic ---
     if (sidebar && sidebarOverlay && toggleButton && openIcon && closeIcon && mainContent) {
-        
+
         function toggleSidebar() {
             sidebar.classList.toggle('-translate-x-full');
-            mainContent.classList.toggle('md:pl-64');
+            mainContent.classList.toggle('md:pl-72');
             openIcon.classList.toggle('hidden');
             closeIcon.classList.toggle('hidden');
             if (window.innerWidth < 768) {
@@ -33,12 +33,12 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
 
-        toggleButton.addEventListener('click', function(e) {
+        toggleButton.addEventListener('click', function (e) {
             e.stopPropagation();
             toggleSidebar();
         });
 
-        sidebarOverlay.addEventListener('click', function() {
+        sidebarOverlay.addEventListener('click', function () {
             toggleSidebar();
         });
 
@@ -47,28 +47,27 @@ document.addEventListener("DOMContentLoaded", function () {
         navLinks.forEach(link => {
             link.addEventListener('click', () => {
                 if (window.innerWidth < 768 && !closeIcon.classList.contains('hidden')) {
-                    toggleSidebar(); 
+                    toggleSidebar();
                 }
             });
         });
-        
+
     } else {
         console.error("Sidebar elements not found. Make sure all IDs are correct.");
     }
 
     // --- Profile Dropdown Logic ---
     if (profileButton && profileMenu) {
-        
-        profileButton.addEventListener('click', function(event) {
+
+        profileButton.addEventListener('click', function (event) {
             event.stopPropagation();
             profileMenu.classList.toggle('hidden');
         });
 
-        document.addEventListener('click', function(event) {
-            if (!profileMenu.classList.contains('hidden') && 
-                !profileButton.contains(event.target) && 
-                !profileMenu.contains(event.target)) 
-            {
+        document.addEventListener('click', function (event) {
+            if (!profileMenu.classList.contains('hidden') &&
+                !profileButton.contains(event.target) &&
+                !profileMenu.contains(event.target)) {
                 profileMenu.classList.add('hidden');
             }
         });
@@ -80,7 +79,7 @@ document.addEventListener("DOMContentLoaded", function () {
     // --- Logout Modal Logic ---
     // Check for all required modal elements
     const modalElementsExist = logoutModal && logoutModalContent && closeModalButton && cancelModalButton && confirmLogoutButton;
-    
+
     if (modalElementsExist) {
 
         // Function to open the modal
@@ -98,14 +97,14 @@ document.addEventListener("DOMContentLoaded", function () {
             logoutModalContent.classList.add('scale-95', 'opacity-0');
             logoutModalContent.classList.remove('scale-100', 'opacity-100');
             logoutModal.classList.remove('opacity-100');
-            
+
             setTimeout(() => {
                 logoutModal.classList.add('hidden');
             }, 300);
         }
 
         // --- UPDATED: Attach to all logout buttons ---
-        
+
         // 1. Sidebar Logout Button
         if (logoutButton) {
             logoutButton.addEventListener('click', (e) => {
@@ -113,7 +112,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 openLogoutModal();
             });
         }
-        
+
         // 2. Profile Dropdown Logout Button
         if (profileLogoutButton) {
             profileLogoutButton.addEventListener('click', (e) => {
@@ -127,7 +126,7 @@ document.addEventListener("DOMContentLoaded", function () {
         // Close modal buttons
         closeModalButton.addEventListener('click', closeLogoutModal);
         cancelModalButton.addEventListener('click', closeLogoutModal);
-        
+
         // Also close if clicking on the background overlay
         logoutModal.addEventListener('click', (e) => {
             if (e.target === logoutModal) {
@@ -208,7 +207,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (profileViewEmail) profileViewEmail.innerText = data.email || "";
                 if (profileViewPhone) profileViewPhone.innerText = data.phone || "";
                 if (profileViewUsername) profileViewUsername.innerText = data.username || "";
-                
+
                 if (profileEditName) profileEditName.value = data.name || "";
                 if (profileEditEmail) profileEditEmail.value = data.email || "";
                 if (profileEditPhone) profileEditPhone.value = data.phone || "";
@@ -244,23 +243,31 @@ document.addEventListener("DOMContentLoaded", function () {
                     if (data.recent_transactions && data.recent_transactions.length > 0) {
                         data.recent_transactions.forEach(tx => {
                             const tr = document.createElement("tr");
-                            const isPayment = tx.type === "Payment";
+                            const isPayment = tx.type && tx.type.toLowerCase() === "payment";
                             const colorClass = isPayment ? "text-red-600" : "text-green-600";
                             const sign = isPayment ? "-" : "+";
                             const amount = Number(tx.amount).toFixed(2);
+                            const displayType = tx.type ? tx.type.charAt(0).toUpperCase() + tx.type.slice(1) : "";
+
+                            tr.className = "hover:bg-slate-50 transition-colors cursor-pointer border-b border-slate-100";
+                            tr.onclick = function() {
+                                openTxnModal(tx);
+                            };
 
                             tr.innerHTML = `
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                    \${tx.date}
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="font-medium text-gray-900">${tx.date}</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">${tx.time}</div>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                                    \${tx.description}
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <div class="font-medium text-gray-900">${tx.description}</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">ID: ${tx.transaction_id || 'N/A'}</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                    \${tx.type}
+                                    ${displayType}
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm \${colorClass} text-right font-medium">
-                                    \${sign}₱\${amount}
+                                <td class="px-6 py-4 whitespace-nowrap text-sm ${colorClass} text-right font-medium">
+                                    ${sign}₱${amount}
                                 </td>
                             `;
                             transactionsBody.appendChild(tr);
@@ -294,4 +301,50 @@ document.addEventListener("DOMContentLoaded", function () {
     // Call fetch on load
     fetchDashboardData();
 
+    // --- Modal Logic ---
+    const txnModal = document.getElementById("txnModal");
+    const txnModalContent = document.getElementById("txnModalContent");
+    const closeTxnModalBtn = document.getElementById("closeTxnModalBtn");
+    const closeTxnModalBottomBtn = document.getElementById("closeTxnModalBottomBtn");
+
+    if (txnModal && closeTxnModalBtn) {
+        closeTxnModalBtn.onclick = closeTxnModal;
+        closeTxnModalBottomBtn.onclick = closeTxnModal;
+        txnModal.onclick = function(e) {
+            if (e.target === txnModal) closeTxnModal();
+        };
+    }
+
+    function openTxnModal(tx) {
+        if (!txnModal) return;
+        
+        document.getElementById("modalTxnId").textContent = tx.transaction_id || 'N/A';
+        document.getElementById("modalTxnMerchant").textContent = tx.description || 'N/A';
+        document.getElementById("modalTxnTerminal").textContent = tx.terminal_id || 'N/A';
+        document.getElementById("modalTxnDate").textContent = `${tx.date} at ${tx.time}`;
+        document.getElementById("modalTxnType").textContent = tx.type ? tx.type.charAt(0).toUpperCase() + tx.type.slice(1) : "N/A";
+        
+        const isPayment = tx.type && tx.type.toLowerCase() === "payment";
+        const sign = isPayment ? "-" : "+";
+        const colorClass = isPayment ? "text-red-600" : "text-green-600";
+        const amtEl = document.getElementById("modalTxnAmount");
+        amtEl.textContent = `${sign}₱${Number(tx.amount).toFixed(2)}`;
+        amtEl.className = `font-bold text-lg ${colorClass}`;
+
+        txnModal.classList.remove('hidden');
+        setTimeout(() => {
+            txnModal.classList.add('opacity-100');
+            txnModalContent.classList.add('scale-100', 'opacity-100');
+            txnModalContent.classList.remove('scale-95', 'opacity-0');
+        }, 10);
+    }
+
+    function closeTxnModal() {
+        txnModalContent.classList.add('scale-95', 'opacity-0');
+        txnModalContent.classList.remove('scale-100', 'opacity-100');
+        txnModal.classList.remove('opacity-100');
+        setTimeout(() => {
+            txnModal.classList.add('hidden');
+        }, 300);
+    }
 });
\ No newline at end of file
diff --git a/frontend/assets/js/signup.js b/frontend/assets/js/signup.js
index c19573e..5ef2f72 100644
--- a/frontend/assets/js/signup.js
+++ b/frontend/assets/js/signup.js
@@ -204,7 +204,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
         try {
             createAccountBtn.disabled = true;
-            createAccountBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Creating Account...';
+            createAccountBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="mr-2 w-5 h-5 animate-spin"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Creating Account...';
             
             const response = await fetch('/v1/signupauth', {
                 method: 'POST',
diff --git a/frontend/assets/js/terminal_sim.js b/frontend/assets/js/terminal_sim.js
new file mode 100644
index 0000000..70c152f
--- /dev/null
+++ b/frontend/assets/js/terminal_sim.js
@@ -0,0 +1,103 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const simForm = document.getElementById('simForm');
+    const submitBtn = document.getElementById('submitBtn');
+    const simMessage = document.getElementById('simMessage');
+    const activityTable = document.getElementById('activityTable');
+    const emptyState = document.getElementById('emptyState');
+    const activityCount = document.getElementById('activityCount');
+    
+    let txCount = 0;
+
+    simForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const cardNumber = document.getElementById('cardNumber').value.trim();
+        const type = document.querySelector('input[name="type"]:checked').value;
+        const amount = parseFloat(document.getElementById('amount').value);
+        const merchantId = document.getElementById('merchantId').value;
+
+        if(!cardNumber || !amount || !merchantId) return;
+
+        // Loading state
+        const originalBtnText = submitBtn.innerHTML;
+        submitBtn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Processing...`;
+        submitBtn.disabled = true;
+        simMessage.classList.add('hidden');
+
+        try {
+            const res = await fetch('/v1/terminal-sim/transact', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ card_number: cardNumber, type, amount, merchant_id: merchantId })
+            });
+
+            const data = await res.json();
+            
+            simMessage.classList.remove('hidden');
+            if(data.success) {
+                if(type === 'Refund') {
+                    simMessage.className = 'text-sm rounded-lg p-3 text-center bg-amber-50 text-amber-700 border border-amber-200 mt-4';
+                    simMessage.textContent = `Success: Refunded ₱${amount.toFixed(2)} (Reversed Fee: ₱${(data.service_fee || 0).toFixed(2)})`;
+                } else {
+                    simMessage.className = 'text-sm rounded-lg p-3 text-center bg-green-50 text-green-700 border border-green-200 mt-4';
+                    simMessage.textContent = `Success: Deducted ₱${amount.toFixed(2)} (Fee: ₱${(data.service_fee || 0).toFixed(2)})`;
+                }
+                
+                // Add to table
+                addTxToTable(type, amount, data.service_fee || 0, 'Success');
+                simForm.reset();
+                document.querySelector('input[name="type"][value="Fare"]').checked = true; // reset radio
+            } else {
+                simMessage.className = 'text-sm rounded-lg p-3 text-center bg-red-50 text-red-700 border border-red-200 mt-4';
+                simMessage.textContent = data.message || 'Transaction failed';
+                addTxToTable(type, amount, 0, 'Failed');
+            }
+        } catch(err) {
+            console.error(err);
+            simMessage.classList.remove('hidden');
+            simMessage.className = 'text-sm rounded-lg p-3 text-center bg-red-50 text-red-700 border border-red-200 mt-4';
+            simMessage.textContent = 'Network error occurred.';
+            addTxToTable(type, amount, 0, 'Error');
+        } finally {
+            submitBtn.innerHTML = originalBtnText;
+            submitBtn.disabled = false;
+        }
+    });
+
+    function addTxToTable(type, amount, fee, status) {
+        emptyState.style.display = 'none';
+        txCount++;
+        activityCount.textContent = `${txCount} transaction${txCount > 1 ? 's' : ''}`;
+
+        const row = document.createElement('tr');
+        row.className = "hover:bg-slate-50 transition";
+        
+        const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second:'2-digit' });
+        
+        let statusBadge = '';
+        if(status === 'Success') {
+            statusBadge = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Success</span>`;
+        } else {
+            statusBadge = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">${status}</span>`;
+        }
+
+        let typeIcon = '';
+        if (type === 'Fare') {
+            typeIcon = `<span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>`;
+        } else if (type === 'Refund') {
+            typeIcon = `<span class="w-2 h-2 rounded-full bg-amber-500 mr-2"></span>`;
+        } else {
+            typeIcon = `<span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>`;
+        }
+
+        row.innerHTML = `
+            <td class="px-6 py-4 text-slate-500">${timeStr}</td>
+            <td class="px-6 py-4 text-slate-900 font-medium flex items-center">${typeIcon} ${type}</td>
+            <td class="px-6 py-4 text-slate-900 font-semibold text-right">₱${amount.toFixed(2)}</td>
+            <td class="px-6 py-4 text-slate-500 text-right">₱${fee.toFixed(2)}</td>
+            <td class="px-6 py-4 text-center">${statusBadge}</td>
+        `;
+
+        activityTable.prepend(row); // Add to top
+    }
+});
diff --git a/frontend/assets/js/transaction.js b/frontend/assets/js/transaction.js
index 051918d..8b4e88e 100644
--- a/frontend/assets/js/transaction.js
+++ b/frontend/assets/js/transaction.js
@@ -1,8 +1,42 @@
 document.addEventListener("DOMContentLoaded", function () {
     const transactionsBody = document.getElementById("transactions-table-body");
 
+    let allTransactions = [];
+    let currentPage = 1;
+    const itemsPerPage = 10;
+
+    // DOM Elements
+    const searchTxn = document.getElementById("searchTxn");
+    const filterType = document.getElementById("filterType");
+    const filterStatus = document.getElementById("filterStatus");
+    const sortOrder = document.getElementById("sortOrder");
+    const pageStart = document.getElementById("pageStart");
+    const pageEnd = document.getElementById("pageEnd");
+    const totalItems = document.getElementById("totalItems");
+    const prevPageBtn = document.getElementById("prevPageBtn");
+    const nextPageBtn = document.getElementById("nextPageBtn");
+
+    // Event Listeners for Filters
+    if (searchTxn) searchTxn.addEventListener("input", () => { currentPage = 1; renderTransactions(); });
+    if (filterType) filterType.addEventListener("change", () => { currentPage = 1; renderTransactions(); });
+    if (filterStatus) filterStatus.addEventListener("change", () => { currentPage = 1; renderTransactions(); });
+    if (sortOrder) sortOrder.addEventListener("change", () => { currentPage = 1; renderTransactions(); });
+    if (prevPageBtn) prevPageBtn.addEventListener("click", () => { if (currentPage > 1) { currentPage--; renderTransactions(); } });
+    if (nextPageBtn) nextPageBtn.addEventListener("click", () => { currentPage++; renderTransactions(); });
+
     function loadTransactions() {
-        fetch("/v1/user/transactions")
+        const pathSegments = window.location.pathname.split('/');
+        let userId = null;
+        if (pathSegments.length >= 2 && pathSegments[1] !== '') {
+            userId = pathSegments[1];
+        }
+
+        let endpoint = "/v1/user/transactions";
+        if (userId) {
+            endpoint = "/v1/user/" + encodeURIComponent(userId) + "/transactions";
+        }
+
+        fetch(endpoint)
             .then(response => {
                 if (response.status === 401) {
                     window.location.href = "/login";
@@ -15,48 +49,8 @@ document.addEventListener("DOMContentLoaded", function () {
                     showError();
                     return;
                 }
-
-                transactionsBody.innerHTML = "";
-                const txs = data.transactions;
-
-                if (txs && txs.length > 0) {
-                    txs.forEach(tx => {
-                        const tr = document.createElement("tr");
-                        const isPayment = tx.type === "Payment";
-                        const colorClass = isPayment ? "text-red-600" : "text-green-600";
-                        const sign = isPayment ? "-" : "+";
-                        const amount = Number(tx.amount).toFixed(2);
-                        
-                        // We do not have a running balance per transaction from the DB currently, 
-                        // so we will just show a dash or N/A in the balance column for now.
-                        tr.innerHTML = `
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                ${tx.date}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                                ${tx.description}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                ${tx.type}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm ${colorClass} text-right font-medium">
-                                ${sign}₱${amount}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
-                                -
-                            </td>
-                        `;
-                        transactionsBody.appendChild(tr);
-                    });
-                } else {
-                    transactionsBody.innerHTML = `
-                        <tr>
-                            <td colspan="5" class="px-6 py-10 text-center text-sm text-gray-500">
-                                No transactions found.
-                            </td>
-                        </tr>
-                    `;
-                }
+                allTransactions = data.transactions || [];
+                renderTransactions();
             })
             .catch(error => {
                 console.error("Error loading transactions:", error);
@@ -64,6 +58,128 @@ document.addEventListener("DOMContentLoaded", function () {
             });
     }
 
+    function renderTransactions() {
+        if (!transactionsBody) return;
+
+        let filtered = [...allTransactions];
+
+        // Apply Search
+        const searchVal = searchTxn ? searchTxn.value.toLowerCase() : "";
+        if (searchVal) {
+            filtered = filtered.filter(tx => 
+                (tx.description && tx.description.toLowerCase().includes(searchVal)) ||
+                (tx.transaction_id && tx.transaction_id.toLowerCase().includes(searchVal)) ||
+                (tx.terminal_id && tx.terminal_id.toLowerCase().includes(searchVal))
+            );
+        }
+
+        // Apply Type Filter
+        const typeVal = filterType ? filterType.value.toLowerCase() : "";
+        if (typeVal) {
+            filtered = filtered.filter(tx => tx.type && tx.type.toLowerCase() === typeVal);
+        }
+
+        // Apply Status Filter
+        const statusVal = filterStatus ? filterStatus.value.toLowerCase() : "";
+        if (statusVal) {
+            filtered = filtered.filter(tx => tx.status && tx.status.toLowerCase() === statusVal);
+        }
+
+        // Apply Sort
+        const sortVal = sortOrder ? sortOrder.value : "desc";
+        filtered.sort((a, b) => {
+            const dateA = new Date(a.date + " " + a.time).getTime() || 0;
+            const dateB = new Date(b.date + " " + b.time).getTime() || 0;
+            return sortVal === "asc" ? dateA - dateB : dateB - dateA;
+        });
+
+        // Pagination setup
+        const total = filtered.length;
+        const totalPages = Math.ceil(total / itemsPerPage) || 1;
+        if (currentPage > totalPages) currentPage = totalPages;
+        
+        const startIdx = (currentPage - 1) * itemsPerPage;
+        const endIdx = Math.min(startIdx + itemsPerPage, total);
+        const paginated = filtered.slice(startIdx, endIdx);
+
+        // Update Pagination UI
+        if (pageStart) pageStart.textContent = total === 0 ? 0 : startIdx + 1;
+        if (pageEnd) pageEnd.textContent = endIdx;
+        if (totalItems) totalItems.textContent = total;
+        if (prevPageBtn) prevPageBtn.disabled = currentPage <= 1;
+        if (nextPageBtn) nextPageBtn.disabled = currentPage >= totalPages;
+
+        transactionsBody.innerHTML = "";
+
+        if (paginated.length > 0) {
+            paginated.forEach(tx => {
+                const tr = document.createElement("tr");
+                const isPayment = tx.type && tx.type.toLowerCase() === "payment";
+                const colorClass = isPayment ? "text-red-600" : "text-green-600";
+                const sign = isPayment ? "-" : "+";
+                const amount = Number(tx.amount).toFixed(2);
+                const displayType = tx.type ? tx.type.charAt(0).toUpperCase() + tx.type.slice(1) : "";
+                
+                let txDate = "N/A";
+                let txTime = "";
+                if (tx.date) {
+                    const d = new Date(tx.date);
+                    if (!isNaN(d.getTime())) {
+                        txDate = d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+                        txTime = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+                    } else {
+                        txDate = tx.date;
+                        txTime = tx.time || "";
+                    }
+                }
+                const status = tx.status || "Completed";
+
+                let statusColor = "bg-green-100 text-green-800";
+                if (status.toLowerCase() === "pending") {
+                    statusColor = "bg-yellow-100 text-yellow-800";
+                } else if (status.toLowerCase() === "failed") {
+                    statusColor = "bg-red-100 text-red-800";
+                }
+
+                tr.className = "hover:bg-slate-50 transition-colors cursor-pointer border-b border-slate-100";
+                tr.onclick = function() {
+                    openTxnModal(tx, txDate, txTime);
+                };
+
+                tr.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="font-medium text-gray-900">${txDate}</div>
+                        <div class="text-xs text-gray-500 mt-0.5">${txTime}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="font-medium text-gray-900">${tx.description}</div>
+                        <div class="text-xs text-gray-500 mt-0.5">ID: ${tx.transaction_id || 'N/A'}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        ${displayType}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm ${colorClass} text-right font-medium">
+                        ${sign}₱${amount}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor}">
+                            ${status}
+                        </span>
+                    </td>
+                `;
+                transactionsBody.appendChild(tr);
+            });
+        } else {
+            transactionsBody.innerHTML = `
+                <tr>
+                    <td colspan="5" class="px-6 py-10 text-center text-sm text-gray-500">
+                        No transactions found.
+                    </td>
+                </tr>
+            `;
+        }
+    }
+
     function showError() {
         if (transactionsBody) {
             transactionsBody.innerHTML = `
@@ -77,4 +193,51 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     loadTransactions();
+
+    // --- Modal Logic ---
+    const txnModal = document.getElementById("txnModal");
+    const txnModalContent = document.getElementById("txnModalContent");
+    const closeTxnModalBtn = document.getElementById("closeTxnModalBtn");
+    const closeTxnModalBottomBtn = document.getElementById("closeTxnModalBottomBtn");
+
+    if (txnModal && closeTxnModalBtn) {
+        closeTxnModalBtn.onclick = closeTxnModal;
+        closeTxnModalBottomBtn.onclick = closeTxnModal;
+        txnModal.onclick = function(e) {
+            if (e.target === txnModal) closeTxnModal();
+        };
+    }
+
+    function openTxnModal(tx, txDate, txTime) {
+        if (!txnModal) return;
+        
+        document.getElementById("modalTxnId").textContent = tx.transaction_id || 'N/A';
+        document.getElementById("modalTxnMerchant").textContent = tx.description || 'N/A';
+        document.getElementById("modalTxnTerminal").textContent = tx.terminal_id || 'N/A';
+        document.getElementById("modalTxnDate").textContent = `${txDate} at ${txTime}`;
+        document.getElementById("modalTxnType").textContent = tx.type ? tx.type.charAt(0).toUpperCase() + tx.type.slice(1) : "N/A";
+        
+        const isPayment = tx.type && tx.type.toLowerCase() === "payment";
+        const sign = isPayment ? "-" : "+";
+        const colorClass = isPayment ? "text-red-600" : "text-green-600";
+        const amtEl = document.getElementById("modalTxnAmount");
+        amtEl.textContent = `${sign}₱${Number(tx.amount).toFixed(2)}`;
+        amtEl.className = `font-bold text-lg ${colorClass}`;
+
+        txnModal.classList.remove('hidden');
+        setTimeout(() => {
+            txnModal.classList.add('opacity-100');
+            txnModalContent.classList.add('scale-100', 'opacity-100');
+            txnModalContent.classList.remove('scale-95', 'opacity-0');
+        }, 10);
+    }
+
+    function closeTxnModal() {
+        txnModalContent.classList.add('scale-95', 'opacity-0');
+        txnModalContent.classList.remove('scale-100', 'opacity-100');
+        txnModal.classList.remove('opacity-100');
+        setTimeout(() => {
+            txnModal.classList.add('hidden');
+        }, 300);
+    }
 });
diff --git a/frontend/templates/admin/terminal_sim.html b/frontend/templates/admin/terminal_sim.html
new file mode 100644
index 0000000..498340f
--- /dev/null
+++ b/frontend/templates/admin/terminal_sim.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terminal Simulation - UniCard</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Load Inter Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen">
+    <div class="max-w-4xl mx-auto p-6">
+        <header class="mb-8">
+            <h1 class="text-3xl font-bold text-slate-900 tracking-tight">Terminal Simulator</h1>
+            <p class="text-slate-500 mt-2">Test card taps, fare deductions, and retail payments without physical hardware.</p>
+        </header>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Simulation Form -->
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 h-fit">
+                <h2 class="text-xl font-semibold mb-6 flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H7a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                    </svg>
+                    Simulate Tap
+                </h2>
+                <form id="simForm" class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">Card Number (RFID/NFC ID)</label>
+                        <input type="text" id="cardNumber" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="e.g. 1234567890">
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">Select Merchant</label>
+                        <select id="merchantId" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition bg-white">
+                            <option value="" disabled>Select a merchant</option>
+                            {{range .Merchants}}
+                            <option value="{{.ID}}" {{if eq .Name "mhissy transport"}}selected{{end}}>{{.Name}}</option>
+                            {{end}}
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">Transaction Type</label>
+                        <div class="flex space-x-4">
+                            <label class="flex-1 cursor-pointer">
+                                <input type="radio" name="type" value="Fare" checked class="peer sr-only">
+                                <div class="p-3 text-center border border-slate-300 rounded-lg peer-checked:bg-indigo-50 peer-checked:border-indigo-500 peer-checked:text-indigo-700 hover:bg-slate-50 transition">
+                                    <span class="font-medium text-sm">Fare (Transport)</span>
+                                </div>
+                            </label>
+                            <label class="flex-1 cursor-pointer">
+                                <input type="radio" name="type" value="Payment Store" class="peer sr-only">
+                                <div class="p-3 text-center border border-slate-300 rounded-lg peer-checked:bg-indigo-50 peer-checked:border-indigo-500 peer-checked:text-indigo-700 hover:bg-slate-50 transition">
+                                    <span class="font-medium text-sm">Retail Payment</span>
+                                </div>
+                            </label>
+                            <label class="flex-1 cursor-pointer">
+                                <input type="radio" name="type" value="Refund" class="peer sr-only">
+                                <div class="p-3 text-center border border-slate-300 rounded-lg peer-checked:bg-amber-50 peer-checked:border-amber-500 peer-checked:text-amber-700 hover:bg-slate-50 transition">
+                                    <span class="font-medium text-sm">Refund</span>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">Amount</label>
+                        <div class="relative">
+                            <span class="absolute left-3 top-2.5 text-slate-500">₱</span>
+                            <input type="number" id="amount" step="0.01" min="0.01" required class="w-full pl-8 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="0.00">
+                        </div>
+                    </div>
+
+                    <button type="submit" id="submitBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg shadow transition flex justify-center items-center">
+                        <span>Process Scan</span>
+                    </button>
+                    
+                    <div id="simMessage" class="hidden text-sm rounded-lg p-3 text-center"></div>
+                </form>
+            </div>
+
+            <!-- Recent Activity Table -->
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
+                <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
+                    <h2 class="text-xl font-semibold text-slate-800">Session Activity</h2>
+                    <span class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full font-medium" id="activityCount">0 transactions</span>
+                </div>
+                <div class="p-0 flex-1 overflow-auto bg-white" style="max-height: 400px;">
+                    <table class="w-full text-left text-sm whitespace-nowrap">
+                        <thead class="bg-slate-50 sticky top-0 border-b border-slate-200 text-slate-500">
+                            <tr>
+                                <th class="px-6 py-3 font-medium">Time</th>
+                                <th class="px-6 py-3 font-medium">Type</th>
+                                <th class="px-6 py-3 font-medium text-right">Amount</th>
+                                <th class="px-6 py-3 font-medium text-right">Fee</th>
+                                <th class="px-6 py-3 font-medium text-center">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="activityTable" class="divide-y divide-slate-100">
+                            <!-- Rows go here -->
+                        </tbody>
+                    </table>
+                    <div id="emptyState" class="p-8 text-center text-slate-400 flex flex-col items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-3 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <p>No transactions yet</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/assets/js/terminal_sim.js"></script>
+</body>
+</html>
diff --git a/frontend/templates/customer/card.html b/frontend/templates/customer/card.html
index 7ae7e90..8531824 100644
--- a/frontend/templates/customer/card.html
+++ b/frontend/templates/customer/card.html
@@ -9,7 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <script src="../static/javascript/tailwind-config.js"></script>
     <link rel="stylesheet" href="../static/css/card.css" />
     <script>
@@ -77,17 +76,17 @@
                     class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                     <div class="py-1">
                         <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span class="ml-3">Profile</span>
                         </a>
                         <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3">Settings</span>
                         </a>
                         <div class="border-t border-gray-100"></div>
                         <button id="profile-logout-button"
                             class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                            <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                             <span class="ml-3">Sign Out</span>
                         </button>
                     </div>
@@ -108,8 +107,7 @@
                     <li>
                         <a href="/dashboard"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Dashboard</span>
                         </a>
@@ -118,8 +116,7 @@
                     <li>
                         <a href="/transactions"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Transactions</span>
                         </a>
@@ -128,7 +125,7 @@
                     <li>
                         <a href="/card"
                             class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i class="fas fa-credit-card w-6 h-6 text-center"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                             <span class="ml-3">My Card</span>
                         </a>
                     </li>
@@ -136,8 +133,7 @@
                     <li>
                         <a href="/profile"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-user w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Profile</span>
                         </a>
@@ -146,7 +142,7 @@
                     <li>
                         <a href="/topup"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1 0-6h3.75m-9 0H4.5A2.25 2.25 0 0 0 2.25 4.5v15A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V12Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25h.008v.008H15v-.008Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Top Up</span>
                         </a>
                     </li>
@@ -155,7 +151,7 @@
                     <li>
                         <a href="/settings"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Settings</span>
                         </a>
                     </li>
@@ -166,8 +162,7 @@
             <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
                 <button id="logout-button"
                     class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                     <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
                 </button>
             </footer>
@@ -204,7 +199,7 @@ <h2 class="text-2xl font-bold text-gray-900">Card Preview</h2>
                                     <span class="ml-3 text-2xl font-bold card-text">PayCard</span>
                                 </div>
                                 <!-- Contactless Icon -->
-                                <i class="fas fa-wifi text-3xl card-text -rotate-45"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-3xl card-text -rotate-45"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" /></svg>
                             </div>
                             <!-- Row 2: Chip and Card Number -->
                             <div class="my-auto">
@@ -279,7 +274,7 @@ <h2 class="text-2xl font-bold text-gray-900">Card Actions</h2>
                             <div class="space-y-4 mt-4">
                                 <button id="report-card-button"
                                     class="w-full px-4 py-3 bg-red-600 text-white font-medium rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
-                                    <i class="fas fa-ban mr-2"></i> Report Card as Lost or Stolen
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" /></svg> Report Card as Lost or Stolen
                                 </button>
                                 <button id="request-replacement-button"
                                     class="w-full px-4 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg shadow-sm border border-gray-300 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
diff --git a/frontend/templates/customer/customer_sidebar.html b/frontend/templates/customer/customer_sidebar.html
new file mode 100644
index 0000000..23dd71b
--- /dev/null
+++ b/frontend/templates/customer/customer_sidebar.html
@@ -0,0 +1,101 @@
+{{define "customer_sidebar"}}
+<aside id="sidebar" class="fixed inset-y-0 left-0 z-40 w-72 bg-white border-r border-slate-200/60 flex flex-col transition-transform duration-300 ease-in-out">
+    
+    <!-- Logo -->
+    <div class="flex items-center h-16 px-6 border-b border-gray-200">
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-600 to-violet-600 flex items-center justify-center shadow-md shadow-violet-500/30">
+            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+        </div>
+        <span class="ml-3 text-xl font-bold tracking-tight text-slate-900">Uni<span class="text-violet-600">Card</span></span>
+    </div>
+
+    <!-- Navigation Links -->
+    <nav class="flex-1 px-4 py-6 space-y-1 overflow-y-auto" style="max-height: calc(100vh - 160px);">
+        <div class="pb-2">
+            <p class="px-4 text-xs font-semibold tracking-wider text-slate-400 uppercase">Core System</p>
+        </div>
+
+        <a href="/{{.Username}}" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" /></svg>
+            <span class="ml-3">Dashboard</span>
+        </a>
+        <a href="/{{.Username}}/transaction" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>
+            <span class="ml-3">Transactions</span>
+        </a>
+        <a href="/{{.Username}}/card" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
+            <span class="ml-3">My Card</span>
+        </a>
+        <a href="/{{.Username}}/topup" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /></svg>
+            <span class="ml-3">Top Up</span>
+        </a>
+        
+        <div class="pt-6 pb-2">
+            <hr class="border-slate-100 mb-6">
+            <p class="px-4 text-xs font-semibold tracking-wider text-slate-400 uppercase">Account</p>
+        </div>
+        
+        <a href="/{{.Username}}/profile" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
+            <span class="ml-3">Profile</span>
+        </a>
+        <a href="/{{.Username}}/settings" class="sidebar-link group flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-slate-400 group-hover:text-slate-600 transition-colors"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" /></svg>
+            <span class="ml-3">Settings</span>
+        </a>
+    </nav>
+
+    <!-- Logout -->
+    <div class="p-4 border-t border-slate-100">
+        <button id="logout-button" class="group w-full flex items-center px-4 py-2.5 text-sm font-medium text-red-600 hover:text-red-700 transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-red-600"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
+            <span class="ml-3">Logout</span>
+        </button>
+    </div>
+</aside>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const currentPath = window.location.pathname;
+        const links = document.querySelectorAll('#sidebar .sidebar-link');
+        
+        let activeLink = null;
+        let maxLength = 0;
+
+        // Find the most specific matching link
+        links.forEach(link => {
+            const linkPath = link.getAttribute('href');
+            if (currentPath.startsWith(linkPath) && linkPath.length > maxLength) {
+                // To prevent '/faith' matching '/faith/transaction' and thinking they are both valid matches,
+                // we ensure exact match or match with trailing slash logic.
+                if (currentPath === linkPath || currentPath.startsWith(linkPath + '/')) {
+                    activeLink = link;
+                    maxLength = linkPath.length;
+                }
+            }
+        });
+
+        if (activeLink) {
+            // Remove inactive classes
+            activeLink.className = activeLink.className.replace('text-slate-600', 'text-white')
+                                     .replace('hover:text-slate-900', '')
+                                     .replace('hover:bg-slate-50', '')
+                                     .replace('transition-colors', '');
+            
+            // Add active classes
+            activeLink.classList.add('bg-blue-600', 'active-link');
+            
+            const svg = activeLink.querySelector('svg');
+            if (svg) {
+                svg.className = svg.className.replace('text-slate-400', 'text-white')
+                                             .replace('group-hover:text-slate-600', '')
+                                             .replace('transition-colors', '');
+            }
+        }
+    });
+</script>
+{{end}}
diff --git a/frontend/templates/customer/dashboard.html b/frontend/templates/customer/dashboard.html
index b994874..74287a5 100644
--- a/frontend/templates/customer/dashboard.html
+++ b/frontend/templates/customer/dashboard.html
@@ -9,126 +9,19 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-    <script src="../assets/js/tailwind-config.js"></script>
+    <script src="/frontend/assets/style/tailwind.js"></script>
 </head>
 
 <body class="font-sans antialiased text-gray-900 bg-gray-100">
 
     <div class="flex h-screen bg-gray-100">
-        <!-- Sidebar Navigation -->
-        <!-- Sidebar Toggle Button -->
-        <button id="menu-toggle-button" class="p-4 text-gray-600 hover:text-gray-900 fixed top-4 left-4 z-40 transition-all duration-200 ease-in-out">
-            <!-- Hamburger Icon (Open) -->
-            <svg id="icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
-            </svg>
-            <!-- Close Icon (X) -->
-            <svg id="icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-        </button>
-
-        <!-- Fixed logo -->
-        <a href="/dashboard" class="flex items-center fixed top-4 left-20 z-40"> <!-- Adjusted top-4 -->
-            <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H7a3 3 0 00-3 3v8a3 3 0 003 3z">
-                </path>
-            </svg>
-            <span class="ml-2 text-lg font-bold text-gray-900 hidden sm:block">PayCard</span>
-        </a>
-
         <!-- Sidebar -->
-        <aside id="sidebar"
-            class="fixed inset-y-0 left-0 z-30 flex-shrink-0 w-64 px-8 py-4 bg-white border-r border-gray-200 transform -translate-x-full transition-transform duration-200 ease-in-out">
-            <header class="flex items-center h-16">
-                 <!-- This is now a spacer for the fixed logo above -->
-            </header>
-
-            <!-- Navigation Links -->
-            <nav class="mt-8">
-                <ul class="space-y-2">
-                    <!-- Dashboard -->
-                    <li>
-                        <a href="/dashboard"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center"></i>
-                            <span
-                                class="ml-3">Dashboard</span>
-                        </a>
-                    </li>
-                    <!-- Transactions -->
-                    <li>
-                        <a href="/transaction"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Transactions</span>
-                        </a>
-                    </li>
-                    <!-- My Card -->
-                    <li>
-                        <a href="/card"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-credit-card w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">My
-                                Card</span>
-                        </a>
-                    </li>
-                    <!-- Profile -->
-                    <li>
-                        <a href="/profile"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-user w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span
-                                class="ml-3 group-hove r:text-blue-500 transition duration-300 cursor-pointer">Profile</span>
-                        </a>
-                    </li>
-                    <!-- Top Up -->
-                    <li>
-                        <a href="/topup"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Top Up</span>
-                        </a>
-                    </li>
-                    <div class="w-full  border-t border-gray-200"></div>
-                    <!-- Settings -->
-                    <li>
-                        <a href="/settings"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Settings</span>
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-
-            <!-- Logout -->
-            <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
-                <button id="logout-button"
-                    class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
-                    <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
-                </button>
-            </footer>
-        </aside>
+        {{template "customer_sidebar" .}}
 
         <!-- Main Content Area -->
-        <div id="main-content" class="flex-1 flex flex-col overflow-hidden transition-all duration-200 ease-in-out">
+        <div id="main-content" class="flex-1 flex flex-col overflow-hidden">
             <!-- Header -->
-            <header
-                class="flex items-center justify-between h-16 px-6 py-4 bg-white border-b border-gray-200">
-                <!-- Spacer div to account for new fixed logo -->
-                <div class="w-16 sm:w-40 h-10"></div> <!-- Adjusted sm:w-40 -->
+            <header class="flex items-center justify-end h-16 px-6 py-4 bg-white border-b border-gray-200">
                 
                 <div class="flex items-center">
                     <span class="mr-3 font-medium hidden md:block">Welcome, <span id="user-full-name">...</span></span>
@@ -145,17 +38,17 @@
                             class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                             <div class="py-1">
                                 <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                    <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                                     <span class="ml-3">Profile</span>
                                 </a>
                                 <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                    <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                                     <span class="ml-3">Settings</span>
                                 </a>
                                 <div class="border-t border-gray-100"></div>
                                 <button id="profile-logout-button"
                                     class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                                    <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                                     <span class="ml-3">Sign Out</span>
                                 </button>
                             </div>
@@ -176,7 +69,7 @@ <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
                         <!-- Card 2: Current Balance -->
                         <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center h-full">
                             <div class="bg-blue-100 text-blue-600 w-14 h-14 rounded-2xl flex flex-shrink-0 items-center justify-center">
-                                <i class="fas fa-wallet text-2xl"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-2xl"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1 0-6h3.75m-9 0H4.5A2.25 2.25 0 0 0 2.25 4.5v15A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V12Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25h.008v.008H15v-.008Z" /></svg>
                             </div>
                             <div class="ml-5">
                                 <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Available Balance</p>
@@ -187,7 +80,7 @@ <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
                         <!-- Card 3: Loyalty Points -->
                         <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center h-full">
                             <div class="bg-green-100 text-green-600 w-14 h-14 rounded-2xl flex flex-shrink-0 items-center justify-center">
-                                <i class="fas fa-coins text-2xl"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-2xl"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
                             </div>
                             <div class="ml-5">
                                 <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-wider leading-tight mb-0.5">Loyalty Points<br><span class="font-medium text-[10px]">(Cashback)</span></p>
@@ -198,7 +91,7 @@ <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
                         <!-- Card 4: Account Type -->
                         <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center h-full">
                             <div class="bg-purple-100 text-purple-600 w-14 h-14 rounded-2xl flex flex-shrink-0 items-center justify-center">
-                                <i class="fas fa-id-card text-2xl"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-2xl"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" /></svg>
                             </div>
                             <div class="ml-5">
                                 <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Account Type</p>
@@ -214,23 +107,23 @@ <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
                                 <h2 class="text-xl font-bold text-gray-900">Recent Transactions</h2>
                                 <a href="/transaction" class="text-sm font-semibold text-blue-600 hover:text-blue-500 transition duration-150 flex items-center">
                                     See all
-                                    <i class="fas fa-arrow-right ml-1.5 text-xs"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-1.5 text-xs"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
                                 </a>
                             </div>
                             <div class="overflow-x-auto border border-gray-100 rounded-xl">
-                                <table class="min-w-full divide-y divide-gray-100">
+                                <table class="min-w-full table-fixed divide-y divide-gray-100">
                                     <thead class="bg-gray-50">
                                         <tr>
-                                            <th scope="col" class="px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                                            <th scope="col" class="w-1/4 px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                                                 Date
                                             </th>
-                                            <th scope="col" class="px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                                            <th scope="col" class="w-1/3 px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                                                 Description
                                             </th>
-                                            <th scope="col" class="px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                                            <th scope="col" class="w-1/6 px-6 py-3.5 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
                                                 Type
                                             </th>
-                                            <th scope="col" class="px-6 py-3.5 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">
+                                            <th scope="col" class="w-1/4 px-6 py-3.5 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">
                                                 Amount
                                             </th>
                                         </tr>
@@ -238,7 +131,7 @@ <h2 class="text-xl font-bold text-gray-900">Recent Transactions</h2>
                                     <tbody id="transactions-table-body" class="divide-y divide-gray-150 bg-white">
                                         <tr>
                                             <td colspan="4" class="px-6 py-12 text-center text-sm text-gray-500">
-                                                <i class="fas fa-spinner fa-spin mr-2 text-blue-500"></i> Loading transactions...
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="mr-2 text-blue-500 animate-spin"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Loading transactions...
                                             </td>
                                         </tr>
                                     </tbody>
@@ -256,9 +149,9 @@ <h2 class="text-xl font-bold text-gray-900">Recent Transactions</h2>
 
     <!-- Logout Confirmation Modal -->
     <div id="logout-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50 transition-opacity duration-300 ease-out opacity-0">
-        <div id="logout-modal-content" class="relative bg-white rounded-lg max-w-md w-full p-6 shadow-2xl transition-all duration-300 ease-out transform scale-95 opacity-0">
+        <div id="../..logout-modal-content" class="relative bg-white rounded-lg max-w-md w-full p-6 shadow-2xl transition-all duration-300 ease-out transform scale-95 opacity-0">
             <div class="flex items-center space-x-3 text-red-600">
-                <i class="fas fa-sign-out-alt text-2xl"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-2xl"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                 <h3 class="text-lg font-bold text-gray-900">Confirm Logout</h3>
             </div>
             <p class="mt-4 text-sm text-gray-600">
@@ -274,13 +167,56 @@ <h3 class="text-lg font-bold text-gray-900">Confirm Logout</h3>
             </div>
             <!-- X Close Button -->
             <button id="modal-close-button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 focus:outline-none">
-                <i class="fas fa-times"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
             </button>
         </div>
     </div>
 
+    <!-- Transaction Details Modal -->
+    <div id="txnModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ease-out opacity-0">
+        <div id="txnModalContent" class="relative bg-white rounded-lg max-w-md w-full p-6 shadow-2xl transition-all duration-300 ease-out transform scale-95 opacity-0">
+            <div class="flex items-center justify-between border-b pb-4 mb-4">
+                <h3 class="text-xl font-bold text-gray-900">Transaction Details</h3>
+                <button id="closeTxnModalBtn" class="text-gray-400 hover:text-gray-600 focus:outline-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-xl"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            <div class="space-y-4 text-sm text-gray-700">
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Transaction ID</span>
+                    <span id="modalTxnId" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Merchant Name</span>
+                    <span id="modalTxnMerchant" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Terminal ID</span>
+                    <span id="modalTxnTerminal" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Date & Time</span>
+                    <span id="modalTxnDate" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Transaction Type</span>
+                    <span id="modalTxnType" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Amount</span>
+                    <span id="modalTxnAmount" class="font-bold text-gray-900 text-lg"></span>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end">
+                <button id="closeTxnModalBottomBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Script Import -->
-    <script src="/assets/js/dashboard.js"></script>
+    <script src="../../assets/js/dashboard.js"></script>
 
 </body>
 
diff --git a/frontend/templates/customer/forgot-password.html b/frontend/templates/customer/forgot-password.html
index 526afad..3ade62d 100644
--- a/frontend/templates/customer/forgot-password.html
+++ b/frontend/templates/customer/forgot-password.html
@@ -14,7 +14,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
     <!-- 3. Load Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <link rel="stylesheet" href="/frontend/static/style.css" />
 
     <!-- 4. Configure Tailwind to use Inter font -->
@@ -67,7 +66,7 @@ <h1 id="form-title" class="text-3xl font-bold text-gray-900 mt-4">Forgot Passwor
                         <div class="mt-1 relative">
                             <!-- Icon -->
                             <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                <i class="fas fa-envelope text-gray-400"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                             </span>
                             <!-- Input -->
                             <input id="email" name="email" type="email" autocomplete="email"
@@ -135,7 +134,7 @@ <h1 id="form-title" class="text-3xl font-bold text-gray-900 mt-4">Forgot Passwor
                         <div class="mt-1 relative">
                             <!-- Icon -->
                             <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                <i class="fas fa-lock text-gray-400"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                             </span>
                             <input id="new_password" name="new_password" type="password" autocomplete="new-password"
                                 class="w-full px-4 py-3 pl-10 pr-10 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out" />
@@ -160,7 +159,7 @@ <h1 id="form-title" class="text-3xl font-bold text-gray-900 mt-4">Forgot Passwor
                         <div class="mt-1 relative">
                             <!-- Icon -->
                             <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                <i class="fas fa-lock text-gray-400"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                             </span>
                             <input id="confirm_password" name="confirm_password" type="password" autocomplete="new-password"
                                 class="w-full px-4 py-3 pl-10 pr-10 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out" />
@@ -180,23 +179,23 @@ <h1 id="form-title" class="text-3xl font-bold text-gray-900 mt-4">Forgot Passwor
                     <!-- Validation Checklist -->
                     <div id="validation-checklist" class="pt-4 flex flex-wrap gap-2 text-xs font-medium">
                         <div id="length-check" class="flex items-center text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full transition-all duration-300">
-                            <i class="icon fas fa-circle text-[6px] mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="text-[6px] mr-2"><circle cx="12" cy="12" r="8"/></svg>
                             <span>8+ characters</span>
                         </div>
                         <div id="case-check" class="flex items-center text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full transition-all duration-300">
-                            <i class="icon fas fa-circle text-[6px] mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="text-[6px] mr-2"><circle cx="12" cy="12" r="8"/></svg>
                             <span>Upper & lowercase</span>
                         </div>
                         <div id="num-check" class="flex items-center text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full transition-all duration-300">
-                            <i class="icon fas fa-circle text-[6px] mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="text-[6px] mr-2"><circle cx="12" cy="12" r="8"/></svg>
                             <span>Number</span>
                         </div>
                         <div id="special-check" class="flex items-center text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full transition-all duration-300">
-                            <i class="icon fas fa-circle text-[6px] mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="text-[6px] mr-2"><circle cx="12" cy="12" r="8"/></svg>
                             <span>Special char</span>
                         </div>
                         <div id="match-check" class="flex items-center text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full transition-all duration-300">
-                            <i class="icon fas fa-circle text-[6px] mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="text-[6px] mr-2"><circle cx="12" cy="12" r="8"/></svg>
                             <span>Passwords match</span>
                         </div>
                     </div>
diff --git a/frontend/templates/customer/profile.html b/frontend/templates/customer/profile.html
index b9d3050..a8f079a 100644
--- a/frontend/templates/customer/profile.html
+++ b/frontend/templates/customer/profile.html
@@ -9,7 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <link rel="stylesheet" href="../static/css/profile.css" />
     
     <script>
@@ -73,17 +72,17 @@
                     class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                     <div class="py-1">
                         <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span class="ml-3">Profile</span>
                         </a>
                         <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3">Settings</span>
                         </a>
                         <div class="border-t border-gray-100"></div>
                         <button id="profile-logout-button"
                             class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                            <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                             <span class="ml-3">Sign Out</span>
                         </button>
                     </div>
@@ -108,8 +107,7 @@
                     <li>
                         <a href="/dashboard"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Dashboard</span>
                         </a>
@@ -118,8 +116,7 @@
                     <li>
                         <a href="/transactions"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Transactions</span>
                         </a>
@@ -128,8 +125,7 @@
                     <li>
                         <a href="/card"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-credit-card w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">My
                                 Card</span>
                         </a>
@@ -138,7 +134,7 @@
                     <li>
                         <a href="/profile"
                             class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i class="fas fa-user w-6 h-6 text-center"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span class="ml-3">Profile</span>
                         </a>
                     </li>
@@ -146,7 +142,7 @@
                     <li>
                         <a href="/topup"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1 0-6h3.75m-9 0H4.5A2.25 2.25 0 0 0 2.25 4.5v15A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V12Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25h.008v.008H15v-.008Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Top Up</span>
                         </a>
                     </li>
@@ -155,7 +151,7 @@
                     <li>
                         <a href="/settings"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Settings</span>
                         </a>
                     </li>
@@ -166,8 +162,7 @@
             <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
                 <button id="logout-button"
                     class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                     <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
                 </button>
             </footer>
@@ -192,7 +187,7 @@ <h1 class="text-3xl font-bold text-gray-900">My Profile</h1>
                                     <h2 class="text-2xl font-bold text-gray-900">Personal Information</h2>
                                     <!-- This button is visible by default -->
                                     <button id="edit-profile-btn" class="text-sm font-medium text-blue-600 hover:text-blue-500">
-                                        <i class="fas fa-pencil-alt mr-1"></i>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>
                                         <span>Edit</span>
                                     </button>
                                     <!-- This button group is hidden by default -->
@@ -201,7 +196,7 @@ <h2 class="text-2xl font-bold text-gray-900">Personal Information</h2>
                                             Cancel
                                         </button>
                                         <button id="save-profile-btn" type="submit" class="text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-md shadow-sm">
-                                            <i class="fas fa-save mr-1"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                                             <span>Save</span>
                                         </button>
                                     </div>
@@ -274,19 +269,19 @@ <h2 class="text-2xl font-bold text-gray-900">Security</h2>
                                     <!-- Validation Checklist -->
                                     <div id="password-checklist" class="pt-2 space-y-1.5 hidden">
                                         <div id="length-check" class="validation-item">
-                                            <i class="icon fas fa-times-circle text-red-500"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                             <span>At least 8 characters</span>
                                         </div>
                                         <div id="case-check" class="validation-item">
-                                            <i class="icon fas fa-times-circle text-red-500"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                             <span>One uppercase & lowercase</span>
                                         </div>
                                         <div id="num-check" class="validation-item">
-                                            <i class="icon fas fa-times-circle text-red-500"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                             <span>One number (0-9)</span>
                                         </div>
                                         <div id="match-check" class="validation-item">
-                                            <i class="icon fas fa-times-circle text-red-500"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                             <span>Passwords match</span>
                                         </div>
                                     </div>
diff --git a/frontend/templates/customer/settings.html b/frontend/templates/customer/settings.html
index 58fe9a1..0267ef0 100644
--- a/frontend/templates/customer/settings.html
+++ b/frontend/templates/customer/settings.html
@@ -9,7 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <script src="../static/javascript/tailwind-config.js"></script>
 </head>
 
@@ -57,17 +56,17 @@
                     class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                     <div class="py-1">
                         <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span class="ml-3">Profile</span>
                         </a>
                         <a href="/settings" class="block px-4 py-2 text-sm text-blue-700 hover:bg-gray-100">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-blue-700"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-blue-700"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3">Settings</span>
                         </a>
                         <div class="border-t border-gray-100"></div>
                         <button id="profile-logout-button"
                             class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                            <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                             <span class="ml-3">Sign Out</span>
                         </button>
                     </div>
@@ -92,8 +91,7 @@
                     <li>
                         <a href="/dashboard"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Dashboard</span>
                         </a>
@@ -102,8 +100,7 @@
                     <li>
                         <a href="/transaction"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Transactions</span>
                         </a>
@@ -112,8 +109,7 @@
                     <li>
                         <a href="/card"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-credit-card w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">My
                                 Card</span>
                         </a>
@@ -122,8 +118,7 @@
                     <li>
                         <a href="/profile"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-user w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Profile</span>
                         </a>
@@ -132,7 +127,7 @@
                     <li>
                         <a href="/topup"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1 0-6h3.75m-9 0H4.5A2.25 2.25 0 0 0 2.25 4.5v15A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V12Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25h.008v.008H15v-.008Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Top Up</span>
                         </a>
                     </li>
@@ -141,8 +136,7 @@
                     <li>
                         <a href="/settings"
                             class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i
-                                class="fas fa-gear -alt w-6 h-6 text-center "></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span
                                 class="ml-3">Settings</span>
                         </a>
@@ -154,8 +148,7 @@
             <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
                 <button id="logout-button"
                     class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                     <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
                 </button>
             </footer>
@@ -173,7 +166,7 @@ <h1 class="text-3xl font-bold text-gray-900">Settings</h1>
                     <!-- Under Maintenance Section -->
                     <section class="mt-8 flex flex-col items-center justify-center bg-white p-12 rounded-xl shadow-lg border border-gray-200 text-center">
                         <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
-                            <i class="fas fa-tools text-5xl text-green-600"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-5xl text-green-600"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" /></svg>
                         </div>
                         
                         <h2 class="text-3xl font-bold text-gray-900 mt-6">Page Under Maintenance</h2>
@@ -183,7 +176,7 @@ <h2 class="text-3xl font-bold text-gray-900 mt-6">Page Under Maintenance</h2>
                         
                         <a href="/dashboard" 
                            class="mt-8 inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                            <i class="fas fa-arrow-left mr-2"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
                             Go Back to Dashboard
                         </a>
                     </section>
diff --git a/frontend/templates/customer/signup.html b/frontend/templates/customer/signup.html
index c53fb6d..648a58c 100644
--- a/frontend/templates/customer/signup.html
+++ b/frontend/templates/customer/signup.html
@@ -9,7 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <link rel="stylesheet" href="/assets/style/index.css" />
     <link rel="stylesheet" href="/assets/style/password-valid.css" />
     <script src="/assets/style/tailwind.js"></script>
@@ -38,7 +37,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                                 </label>
                                 <div class="mt-1 relative">
                                     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                        <i class="fas fa-user text-gray-400"></i>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                                     </span>
                                     <input id="first_name" name="first_name" type="text" autocomplete="name" required
                                         placeholder="Enter your first name" onkeypress="return isAlpha(event)"
@@ -53,7 +52,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                                 </label>
                                 <div class="mt-1 relative">
                                     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                        <i class="fas fa-user text-gray-400"></i>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                                     </span>
                                     <input id="last_name" name="last_name" type="text" autocomplete="name" required
                                         placeholder="Enter your last name" onkeypress="return isAlpha(event)"
@@ -69,7 +68,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                             </label>
                             <div class="mt-1 relative">
                                 <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                    <i class="fas fa-envelope text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                                 </span>
                                 <input id="email" name="email" type="email" autocomplete="email" required
                                     placeholder="you@example.com"
@@ -85,7 +84,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                             </label>
                             <div class="mt-1 relative">
                                 <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                    <i class="fas fa-phone text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.864-1.068l-4.214-.842a2.25 2.25 0 0 0-2.378.85l-1.493 1.86a11.144 11.144 0 0 1-5.46-5.46l1.86-1.492a2.25 2.25 0 0 0 .85-2.378L8.82 2.114c-.102-.513-.552-.864-1.068-.864H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" /></svg>
                                 </span>
                                 <input id="contact_number" name="contact_number" type="tel" autocomplete="tel"
                                     pattern="[0-9]{11}" minlength="11" maxlength="11"
@@ -112,7 +111,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                             </label>
                             <div class="mt-1 relative">
                                 <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                    <i class="fas fa-credit-card text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                                 </span>
                                 <input id="card_number" name="card_number" type="text" autocomplete="off" required
                                     placeholder="1234567890123456" pattern="[0-9]{16}"
@@ -141,7 +140,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                                 </label>
                                 <div class="mt-1 relative">
                                     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                        <i class="fas fa-lock text-gray-400"></i>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                                     </span>
                                     <input id="password" name="password" type="password" autocomplete="new-password"
                                         required placeholder="Create a password"
@@ -165,7 +164,7 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                                 </label>
                                 <div class="mt-1 relative">
                                     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                                        <i class="fas fa-lock text-gray-400"></i>
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                                     </span>
                                     <input id="confirm_password" name="confirm_password" type="password"
                                         autocomplete="new-password" required placeholder="Confirm your password"
@@ -186,11 +185,11 @@ <h1 class="text-3xl font-bold text-gray-900 mt-4">Create your account</h1>
                         </div>
                         <div id="validation-checklist" class="pt-2 space-y-1.5">
                             <div id="length-check" class="validation-item">
-                                <i class="icon fas fa-times-circle text-red-500"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                 <span>At least 8 characters</span>
                             </div>
                             <div id="match-check" class="validation-item">
-                                <i class="icon fas fa-times-circle text-red-500"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                 <span>Passwords match</span>
                             </div>
                         </div>
@@ -247,7 +246,7 @@ <h2 class="text-4xl font-bold mb-4 tracking-tight">Welcome to Unicard</h2>
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50 hidden">
         <div class="w-full max-w-sm bg-white p-8 rounded-xl shadow-xl text-center">
             <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center">
-                <i class="fas fa-check text-4xl text-green-600"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-4xl text-green-600"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
             </div>
             <h2 class="text-2xl font-bold text-gray-900 mt-5">Account Created!</h2>
             <p class="text-gray-600 mt-2">
diff --git a/frontend/templates/customer/topup.html b/frontend/templates/customer/topup.html
index 09c8601..e4048fb 100644
--- a/frontend/templates/customer/topup.html
+++ b/frontend/templates/customer/topup.html
@@ -9,7 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <script src="../assets/js/tailwind-config.js"></script>
 </head>
 
@@ -57,17 +56,17 @@
                     class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                     <div class="py-1">
                         <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span class="ml-3">Profile</span>
                         </a>
                         <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span class="ml-3">Settings</span>
                         </a>
                         <div class="border-t border-gray-100"></div>
                         <button id="profile-logout-button"
                             class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                            <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                             <span class="ml-3">Sign Out</span>
                         </button>
                     </div>
@@ -91,8 +90,7 @@
                     <li>
                         <a href="/dashboard"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Dashboard</span>
                         </a>
@@ -101,8 +99,7 @@
                     <li>
                         <a href="/transaction"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Transactions</span>
                         </a>
@@ -111,8 +108,7 @@
                     <li>
                         <a href="/card"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-credit-card w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                             <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">My
                                 Card</span>
                         </a>
@@ -121,8 +117,7 @@
                     <li>
                         <a href="/profile"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-user w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Profile</span>
                         </a>
@@ -131,7 +126,7 @@
                     <li>
                         <a href="/topup"
                             class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1 0-6h3.75m-9 0H4.5A2.25 2.25 0 0 0 2.25 4.5v15A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V12Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25h.008v.008H15v-.008Z" /></svg>
                             <span class="ml-3">Top Up</span>
                         </a>
                     </li>
@@ -140,8 +135,7 @@
                     <li>
                         <a href="/settings"
                             class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-gear -alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                             <span
                                 class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Settings</span>
                         </a>
@@ -153,8 +147,7 @@
             <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
                 <button id="logout-button"
                     class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                     <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
                 </button>
             </footer>
@@ -272,7 +265,7 @@ <h3 class="text-lg font-medium text-black">Select Payment Method</h3>
                                             <div class="ml-3 flex justify-between items-center w-full">
                                                 <span class="text-sm font-medium text-gray-900">Online Bank
                                                     Transfer</span>
-                                                <i class="fas fa-university text-xl text-gray-500"></i>
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-xl text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z" /></svg>
                                             </div>
                                         </label> -->
                                     </div>
diff --git a/frontend/templates/customer/transaction.html b/frontend/templates/customer/transaction.html
index f4c494d..3494f97 100644
--- a/frontend/templates/customer/transaction.html
+++ b/frontend/templates/customer/transaction.html
@@ -9,125 +9,19 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-    <script src="../static/javascript/tailwind-config.js"></script>
+    <script src="/frontend/assets/style/tailwind.js"></script>
 </head>
 
 <body class="font-sans antialiased text-gray-900 bg-gray-100">
 
     <div class="flex h-screen bg-gray-100">
-        <!-- Sidebar Navigation -->
-        <!-- Sidebar Toggle Button -->
-        <button id="menu-toggle-button"
-            class="p-4 text-gray-600 hover:text-gray-900 fixed top-4 left-4 z-40 transition-all duration-200 ease-in-out">
-            <!-- Hamburger Icon (Open) -->
-            <svg id="icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
-            </svg>
-            <!-- Close Icon (X) -->
-            <svg id="icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-        </button>
-
-         <!-- Fixed logo -->
-        <a href="/paycard_dashboard" class="flex items-center fixed top-4 left-20 z-40">
-            <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H7a3 3 0 00-3 3v8a3 3 0 003 3z">
-                </path>
-            </svg>
-            <span class="ml-2 text-lg font-bold text-gray-900 hidden sm:block">PayCard</span>
-        </a>
-
         <!-- Sidebar -->
-        <aside id="sidebar"
-            class="fixed inset-y-0 left-0 z-30 flex-shrink-0 w-64 px-8 py-4 bg-white border-r border-gray-200 transform -translate-x-full transition-transform duration-200 ease-in-out">
-            <header class="flex items-center h-16"></header>
-
-            <!-- Navigation Links -->
-            <nav class="mt-8">
-                <ul class="space-y-2">
-                    <!-- Dashboard -->
-                    <li>
-                        <a href="/dashboard"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-home w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span
-                                class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Dashboard</span>
-                        </a>
-                    </li>
-                    <!-- Transactions -->
-                    <li>
-                        <a href="/transaction"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-white bg-blue-600 rounded-lg">
-                            <i
-                                class="fas fa-exchange-alt w-6 h-6 text-center"></i>
-                            <span class="ml-3">Transactions</span>
-                        </a>
-                    </li>
-                    <!-- My Card -->
-                    <li>
-                        <a href="/card"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-credit-card w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">My
-                                Card</span>
-                        </a>
-                    </li>
-                    <!-- Profile -->
-                    <li>
-                        <a href="/profile"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i
-                                class="fas fa-user w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span
-                                class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Profile</span>
-                        </a>
-                    </li>
-                    <!-- Top Up -->
-                    <li>
-                        <a href="/topup"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-wallet w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Top Up</span>
-                        </a>
-                    </li>
-                    <div class="w-full  border-t border-gray-200"></div>
-                    <!-- Settings -->
-                    <li>
-                        <a href="/settings"
-                            class="group flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400 group-hover:text-blue-500 transition duration-300 cursor-pointer"></i>
-                            <span class="ml-3 group-hover:text-blue-500 transition duration-300 cursor-pointer">Settings</span>
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-
-            <!-- Logout -->
-            <footer class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200">
-                <button id="logout-button"
-                    class="group w-full flex items-center px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-100 rounded-lg">
-                    <i
-                        class="fas fa-sign-out-alt w-6 h-6 text-center text-gray-400 group-hover:text-red-500 transition duration-300 cursor-pointer"></i>
-                    <span class="ml-3 group-hover:text-red-500 transition duration-300 cursor-pointer">Logout</span>
-                </button>
-            </footer>
-        </aside>
+        {{template "customer_sidebar" .}}
 
         <!-- Main Content Area -->
-        <div id="main-content" class="flex-1 flex flex-col overflow-hidden transition-all duration-200 ease-in-out">
+        <div id="main-content" class="flex-1 flex flex-col overflow-hidden transition-all duration-200 ease-in-out ml-72">
             <!-- Header -->
-            <header
-                class="flex items-center justify-between h-16 px-6 py-4 bg-white border-b border-gray-200 md:justify-end">
-                <div class="w-10 h-10"></div>
-
+            <header class="flex items-center justify-end h-16 px-6 py-4 bg-white border-b border-gray-200">
                 <div class="flex items-center">
                     <span class="mr-3 font-medium hidden md:block">Welcome, <span id="user-full-name">User</span></span>
 
@@ -144,17 +38,17 @@
                             class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-50">
                             <div class="py-1">
                                 <a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                    <i class="fas fa-user -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                                     <span class="ml-3">Profile</span>
                                 </a>
                                 <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                                    <i class="fas fa-gear -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                                     <span class="ml-3">Settings</span>
                                 </a>
                                 <div class="border-t border-gray-100"></div>
                                 <button id="profile-logout-button"
                                     class="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
-                                    <i class="fas fa-sign-out -alt w-6 h-6 text-center text-gray-400"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-center text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
                                     <span class="ml-3">Sign Out</span>
                                 </button>
                             </div>
@@ -171,32 +65,34 @@ <h1 class="text-3xl font-bold text-gray-900">Transaction History</h1>
 
                     <!-- Filters Section -->
                     <section aria-label="Transaction Filters" class="mt-6">
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            <!-- Date Range Filter -->
-                            <div>
-                                <label for="date-range" class="block text-sm font-medium text-gray-700">Date
-                                    Range</label>
-                                <input type="date" name="date-range" id="date-range"
-                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                            <div class="relative w-full md:w-80">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                    </svg>
+                                </span>
+                                <input type="text" id="searchTxn" placeholder="Search transactions..."
+                                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150" />
                             </div>
-                            <!-- Transaction Type Filter -->
-                            <div>
-                                <label for="transaction-type"
-                                    class="block text-sm font-medium text-gray-700">Type</label>
-                                <select id="transaction-type" name="transaction-type"
-                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                                    <option>All Types</option>
-                                    <option>Payment</option>
-                                    <option>Top-up</option>
-                                    <option>Refund</option>
+                            <div class="flex items-center space-x-2 flex-wrap md:flex-nowrap gap-y-2 md:gap-y-0">
+                                <select id="filterType" class="border border-gray-300 rounded-lg text-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500 w-full md:w-auto">
+                                    <option value="">All Types</option>
+                                    <option value="payment">Payment</option>
+                                    <option value="refund">Refund</option>
+                                </select>
+                                
+                                <select id="filterStatus" class="border border-gray-300 rounded-lg text-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500 w-full md:w-auto">
+                                    <option value="">All Statuses</option>
+                                    <option value="completed">Completed</option>
+                                    <option value="pending">Pending</option>
+                                    <option value="failed">Failed</option>
+                                </select>
+
+                                <select id="sortOrder" class="border border-gray-300 rounded-lg text-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500 w-full md:w-auto">
+                                    <option value="desc">Newest to Oldest</option>
+                                    <option value="asc">Oldest to Newest</option>
                                 </select>
-                            </div>
-                            <!-- Search Button -->
-                            <div class="self-end">
-                                <button
-                                    class="w-full md:w-auto flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700">
-                                    Apply Filters
-                                </button>
                             </div>
                         </div>
                     </section>
@@ -209,7 +105,7 @@ <h1 class="text-3xl font-bold text-gray-900">Transaction History</h1>
                                     <tr>
                                         <th scope="col"
                                             class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Date & Time
+                                            Date
                                         </th>
                                         <th scope="col"
                                             class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -225,7 +121,7 @@ <h1 class="text-3xl font-bold text-gray-900">Transaction History</h1>
                                         </th>
                                         <th scope="col"
                                             class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Balance
+                                            Status
                                         </th>
                                     </tr>
                                 </thead>
@@ -261,23 +157,23 @@ <h1 class="text-3xl font-bold text-gray-900">Transaction History</h1>
                                 <div class="hidden sm:block">
                                     <p class="text-sm text-gray-700">
                                         Showing
-                                        <span class="font-medium">1</span>
+                                        <span id="pageStart" class="font-medium">0</span>
                                         to
-                                        <span class="font-medium">3</span>
+                                        <span id="pageEnd" class="font-medium">0</span>
                                         of
-                                        <span class="font-medium">3</span>
+                                        <span id="totalItems" class="font-medium">0</span>
                                         results
                                     </p>
                                 </div>
                                 <div class="flex-1 flex justify-between sm:justify-end">
-                                    <a href="#"
-                                        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                    <button id="prevPageBtn" disabled
+                                        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                         Previous
-                                    </a>
-                                    <a href="#"
-                                        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                    </button>
+                                    <button id="nextPageBtn" disabled
+                                        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                         Next
-                                    </a>
+                                    </button>
                                 </div>
                             </nav>
                         </div>
@@ -327,6 +223,50 @@ <h3 class="text-2xl font-bold text-gray-900">Confirm Logout</h3>
         </div>
     </div>
 
+    <!-- Transaction Details Modal -->
+    <div id="txnModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ease-out opacity-0">
+        <div id="txnModalContent" class="relative bg-white rounded-lg max-w-md w-full p-6 shadow-2xl transition-all duration-300 ease-out transform scale-95 opacity-0">
+            <div class="flex items-center justify-between border-b pb-4 mb-4">
+                <h3 class="text-xl font-bold text-gray-900">Transaction Details</h3>
+                <button id="closeTxnModalBtn" class="text-gray-400 hover:text-gray-600 focus:outline-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-xl"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            <div class="space-y-4 text-sm text-gray-700">
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Transaction ID</span>
+                    <span id="modalTxnId" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Merchant Name</span>
+                    <span id="modalTxnMerchant" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Terminal ID</span>
+                    <span id="modalTxnTerminal" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Date & Time</span>
+                    <span id="modalTxnDate" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Transaction Type</span>
+                    <span id="modalTxnType" class="font-semibold text-gray-900"></span>
+                </div>
+                <div class="flex justify-between border-b border-gray-100 pb-2">
+                    <span class="font-medium text-gray-500">Amount</span>
+                    <span id="modalTxnAmount" class="font-bold text-gray-900 text-lg"></span>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end">
+                <button id="closeTxnModalBottomBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Script Import -->
     <script src="/assets/js/dashboard.js" defer></script>
     <script src="/assets/js/transaction.js" defer></script>
 </body>
diff --git a/tmp_app.exe b/tmp_app.exe
new file mode 100644
index 0000000..e8b9053
Binary files /dev/null and b/tmp_app.exe differ