diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html
index 67f3877..3fd06bf 100644
--- a/src/app/employee/table/table.component.html
+++ b/src/app/employee/table/table.component.html
@@ -40,7 +40,34 @@
           </button>
         </div>
 
-        @if (employees) {
+        @if (!employees || employees.length === 0) {
+          <div class="!bg-gray-50 !rounded-lg !p-8">
+            <div class="!text-center !max-w-sm !mx-auto">
+              <div
+                class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
+              >
+                <mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
+                  >people</mat-icon
+                >
+              </div>
+              <h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
+                No employees found
+              </h3>
+              <p class="!text-gray-600 !mb-6">
+                Get started by adding your first employee to the directory.
+              </p>
+              <button
+                mat-flat-button
+                color="primary"
+                class="!bg-blue-600 !text-white"
+                (click)="showCreateEmployeeModal()"
+              >
+                <mat-icon class="!mr-2">add</mat-icon>
+                Add Employee
+              </button>
+            </div>
+          </div>
+        } @else {
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table mat-table [dataSource]="employees" matSort class="!w-full">
               <ng-container matColumnDef="name">
@@ -112,13 +139,6 @@
               <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </div>
-        } @else {
-          <mat-card class="!text-center !py-8">
-            <mat-card-content>
-              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
-              <p class="!text-gray-600">No employees found</p>
-            </mat-card-content>
-          </mat-card>
         }
       </div>
     }
diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html
index fb56cb9..182fbb1 100644
--- a/src/app/qualification/table/table.component.html
+++ b/src/app/qualification/table/table.component.html
@@ -40,7 +40,34 @@
           </button>
         </div>
 
-        @if (qualifications) {
+        @if (!qualifications || qualifications.length === 0) {
+          <div class="!bg-gray-50 !rounded-lg !p-8">
+            <div class="!text-center !max-w-sm !mx-auto">
+              <div
+                class="!bg-blue-100 !rounded-full !w-16 !h-16 !flex !items-center !justify-center !mx-auto !mb-4"
+              >
+                <mat-icon class="!text-blue-600 !w-8 !h-8 !text-3xl"
+                  >school</mat-icon
+                >
+              </div>
+              <h3 class="!text-gray-900 !font-medium !text-lg !mb-2">
+                No qualifications found
+              </h3>
+              <p class="!text-gray-600 !mb-6">
+                Get started by adding your first qualification to the directory.
+              </p>
+              <button
+                mat-flat-button
+                color="primary"
+                class="!bg-blue-600 !text-white"
+                (click)="openCreateModal()"
+              >
+                <mat-icon class="!mr-2">add</mat-icon>
+                Add Qualification
+              </button>
+            </div>
+          </div>
+        } @else {
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table
               mat-table
@@ -119,13 +146,6 @@
               <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </div>
-        } @else {
-          <mat-card class="!text-center !py-8">
-            <mat-card-content>
-              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">school</mat-icon>
-              <p class="!text-gray-600">No qualifications found</p>
-            </mat-card-content>
-          </mat-card>
         }
       </div>
     }