diff --git a/app/templates/base.html b/app/templates/base.html
index 9c74e29..3ea90da 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -3,95 +3,179 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title if title else "ComparisonSoftware" }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ title if title else "Comparison Software" }}</title>
 
+    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> -->
+
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
 </head>
 
-<body style="background:#f5f7fa;">
+<body class="bg-light">
 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <!-- NAVBAR -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/">LCEPL</a>
 
+            <!-- Brand -->
+            <a class="navbar-brand fw-bold" href="/">
+                <i class="bi bi-buildings me-1"></i> LCEPL
+            </a>
+
+            <!-- Mobile toggle -->
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
                 <span class="navbar-toggler-icon"></span>
             </button>
 
+            <!-- Menu -->
             <div class="collapse navbar-collapse" id="navMenu">
-                <ul class="navbar-nav ms-auto">
+                <ul class="navbar-nav ms-auto align-items-lg-center">
 
-                    <li class="nav-item"><a class="nav-link" href="/dashboard">Dashboard</a></li>
+                    <!-- Dashboard -->
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard">
+                            <i class="bi bi-speedometer2 me-1"></i> Dashboard
+                        </a>
+                    </li>
 
-                    <!-- Sub-Contractor model  -->
+                    <!-- Subcontractor -->
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Subcontractor Model</a>
-
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
+                            <i class="bi bi-people-fill me-1"></i> Subcontractor
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-dark">
-                            <li><a class="dropdown-item" href="/subcontractor/add">Add of Subcontractor</a></li>
-                            <li><a class="dropdown-item" href="/subcontractor/list">List of Subcontractor </a></li>
+                            <li>
+                                <a class="dropdown-item" href="/subcontractor/add">
+                                    <i class="bi bi-plus-circle me-2"></i> Add Subcontractor
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/subcontractor/list">
+                                    <i class="bi bi-list-ul me-2"></i> Subcontractor List
+                                </a>
+                            </li>
                         </ul>
                     </li>
 
-                    <!-- Sub-contractor File import/report  -->
+                    <!-- File System -->
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Sub-contractor File
-                            System</a>
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
+                            <i class="bi bi-folder-fill me-1"></i> File System
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-dark">
-                            <li><a class="dropdown-item" href="/file/import">File Import</a></li>
-                            <li><a class="dropdown-item" href="/file/report">Reports Download</a></li>
+                            <li>
+                                <a class="dropdown-item" href="/file/import">
+                                    <i class="bi bi-upload me-2"></i> Import File
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/file/report">
+                                    <i class="bi bi-download me-2"></i> Download Reports
+                                </a>
+                            </li>
                         </ul>
                     </li>
 
-                    <!-- Client vs sub-cont. File import/report -->
+                    <!-- Client System -->
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Client File
-                            System</a>
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
+                            <i class="bi bi-building me-1"></i> Client System
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-dark">
-                            <li><a class="dropdown-item" href="/file/import_client">File Import</a></li>
-                            <li><a class="dropdown-item" href="/report/comparison_report">old Reports Generate </a></li>
-                            <li><a class="dropdown-item" href="/file/client_vs_subcont">new Reports Generate </a></li>
+                            <li>
+                                <a class="dropdown-item" href="/file/import_client">
+                                    <i class="bi bi-upload me-2"></i> Import Client File
+                                </a>
+                            </li>
+
+                            <li>
+                                <a class="dropdown-item" href="/report/comparison_report">
+                                    <i class="bi bi-arrow-left-right me-2"></i> client vs sub-cont. Comparison Report
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/file/client_vs_subcont">
+                                    <i class="bi bi-arrow-left-right me-2"></i> Comparison Report
+                                </a>
+                            </li>
                         </ul>
                     </li>
 
-                    <!-- File format download -->
-                    <li class="nav-item"><a class="nav-link" href="/file_format">Formats</a></li>
+                    <!-- Formats -->
+                    <li class="nav-item">
+                        <a class="nav-link" href="/file_format">
+                            <i class="bi bi-file-earmark-text me-1"></i> Formats
+                        </a>
+                    </li>
 
-                    <!-- user -->
+                    <!-- USER DROPDOWN -->
                     {% if session.get("user_id") %}
-                    <li class="nav-item">
-                        <span class="nav-link text-light">Hi, {{ session.get("user_name") }}</span>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link text-warning" href="/logout">Logout</a>
+                    <li class="nav-item dropdown ms-lg-3">
+
+                        <a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#"
+                            data-bs-toggle="dropdown">
+                            <i class="bi bi-person-circle fs-5"></i>
+                            <span class="d-none d-lg-inline">
+                                {{ session.get("user_name") }}
+                            </span>
+                        </a>
+
+                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark shadow">
+
+                            <!-- User card -->
+                            <li class="px-3 py-3 text-center border-bottom">
+                                <i class="bi bi-person-circle fs-1"></i>
+                                <div class="fw-semibold mt-1">
+                                    {{ session.get("user_name") }}
+                                </div>
+                                <small class="text-muted">Logged in user</small>
+                            </li>
+
+                            <li>
+                                <a class="dropdown-item" href="/dashboard">
+                                    <i class="bi bi-speedometer2 me-2"></i> Dashboard
+                                </a>
+                            </li>
+
+                            <li>
+                                <a class="dropdown-item text-warning" href="/logout">
+                                    <i class="bi bi-box-arrow-right me-2"></i> Logout
+                                </a>
+                            </li>
+
+                        </ul>
                     </li>
                     {% endif %}
 
-
                 </ul>
             </div>
         </div>
     </nav>
 
+    <!-- FLASH MESSAGES -->
     <div class="container mt-3">
         {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
         {% for category, message in messages %}
         <div class="alert alert-{{ category }} alert-dismissible fade show">
             {{ message }}
             <button class="btn-close" data-bs-dismiss="alert"></button>
         </div>
         {% endfor %}
+        {% endif %}
         {% endwith %}
     </div>
 
+    <!-- PAGE CONTENT -->
     <div class="container mt-4">
         {% block content %}{% endblock %}
     </div>
 
-
+    <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/templates/subcontractor/list.html b/app/templates/subcontractor/list.html
index aff7776..a26a70f 100644
--- a/app/templates/subcontractor/list.html
+++ b/app/templates/subcontractor/list.html
@@ -18,10 +18,9 @@
         </div>
     </div>
 
-    <!-- Responsive Table -->
+
     <div class="table-responsive">
         <table class="table table-bordered table-striped align-middle text-nowrap">
-
             <thead class="table-dark">
                 <tr>
                     <th>ID</th>
@@ -66,19 +65,21 @@
                             </a>
                         </div>
                     </td>
-                </tr>
-                {% endfor %}
+                    /tr>
+                    {% endfor %}
             </tbody>
 
             <!-- TOTAL ROW -->
             <tfoot>
                 <tr class="table-secondary fw-bold">
-                    <td colspan="5" class="text-end">
-                        Total Subcontractors
-                    </td>
-                    <td class="text-center">
-                        {{ subcontractors|length }}
-                    </td>
+                    <td colspan="2" class="text-end"> Total Subcontractors</td>
+
+                    <td class="d-none d-lg-table-cell">-</td>
+                    <td class="d-none d-lg-table-cell">-</td>
+                    <td class="d-none d-lg-table-cell">-</td>
+
+                    <td class="text-center">{{ subcontractors|length }}</td>
+
                 </tr>
             </tfoot>
 
