diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
index 6b0ddba..6ca6792 100644
--- a/webui/src/components/Appliance/Appliances.vue
+++ b/webui/src/components/Appliance/Appliances.vue
@@ -97,7 +97,8 @@
                   blade.ipAddress,
                   blade.port,
                   Number(blade.totalMemoryAvailableMiB),
-                  Number(blade.totalMemoryAllocatedMiB)
+                  Number(blade.totalMemoryAllocatedMiB),
+                  blade.status
                 )
               "
             >
@@ -168,6 +169,20 @@
                       service running on OpenBMC.
                     </v-card-text>
                     <v-list lines="one">
+                      <v-list-item>
+                        <v-list-item-title>Status</v-list-item-title>
+                        <v-list-item-subtitle
+                          :style="{ fontWeight: 'bold', color: statusColor }"
+                          >{{ selectedBladeStatus }}</v-list-item-subtitle
+                        >
+                        <template v-slot:prepend>
+                          <v-avatar>
+                            <v-icon :color="statusColor">{{
+                              statusIcon
+                            }}</v-icon>
+                          </v-avatar>
+                        </template>
+                      </v-list-item>
                       <v-list-item>
                         <v-list-item-title prepend-icon="mdi-account-circle"
                           >Appliance Id</v-list-item-title
@@ -175,18 +190,33 @@
                         <v-list-item-subtitle>
                           {{ selectedApplianceId }}
                         </v-list-item-subtitle>
+                        <template v-slot:prepend>
+                          <v-avatar>
+                            <v-icon color="#6ebe4a">mdi-account-circle</v-icon>
+                          </v-avatar>
+                        </template>
                       </v-list-item>
                       <v-list-item>
                         <v-list-item-title>Blade Id</v-list-item-title>
                         <v-list-item-subtitle>
                           {{ selectedBladeId }}
                         </v-list-item-subtitle>
+                        <template v-slot:prepend>
+                          <v-avatar>
+                            <v-icon color="#6ebe4a">mdi-shield-account</v-icon>
+                          </v-avatar>
+                        </template>
                       </v-list-item>
                       <v-list-item>
                         <v-list-item-title>Ip Address</v-list-item-title>
                         <v-list-item-subtitle>
                           {{ selectedBladeIp + ":" + selectedBladePort }}
                         </v-list-item-subtitle>
+                        <template v-slot:prepend>
+                          <v-avatar>
+                            <v-icon color="#6ebe4a">mdi-ip</v-icon>
+                          </v-avatar>
+                        </template>
                       </v-list-item>
                     </v-list>
                   </v-card>
@@ -1224,7 +1254,8 @@ export default {
             defaultBlade!.ipAddress,
             defaultBlade!.port,
             Number(defaultBlade!.totalMemoryAvailableMiB),
-            Number(defaultBlade!.totalMemoryAllocatedMiB)
+            Number(defaultBlade!.totalMemoryAllocatedMiB),
+            defaultBlade!.status
           );
         }
         this.dialogAddBladeWait = false;
@@ -1281,7 +1312,8 @@ export default {
             defaultBlade.ipAddress,
             defaultBlade.port,
             Number(defaultBlade.totalMemoryAvailableMiB),
-            Number(defaultBlade.totalMemoryAllocatedMiB)
+            Number(defaultBlade.totalMemoryAllocatedMiB),
+            defaultBlade.status
           );
         }
         this.dialogDeleteBladeWait = false;
@@ -1444,7 +1476,8 @@ export default {
               selectedBlade.ipAddress,
               selectedBlade.port,
               Number(selectedBlade.totalMemoryAvailableMiB),
-              Number(selectedBlade.totalMemoryAllocatedMiB)
+              Number(selectedBlade.totalMemoryAllocatedMiB),
+              selectedBlade.status
             );
             // Update the URL with the first blade's ID
             updateUrlWithBladeId(newVal, selectedBlade.id);
@@ -1496,6 +1529,17 @@ export default {
     const selectedBladeId = computed(() => bladeStore.selectedBladeId);
     const selectedBladeIp = computed(() => bladeStore.selectedBladeIp);
     const selectedBladePort = computed(() => bladeStore.selectedBladePortNum);
+    const selectedBladeStatus = computed(() => bladeStore.selectedBladeStatus);
+
+    const statusColor = computed(() => {
+      return selectedBladeStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
+    });
+
+    const statusIcon = computed(() => {
+      return selectedBladeStatus.value === "online"
+        ? "mdi-check-circle"
+        : "mdi-close-circle";
+    });
 
     // Methods to update state
     const selectAppliance = (applianceId: string) => {
@@ -1506,14 +1550,16 @@ export default {
       bladeIp: string,
       bladePort: number,
       bladeMemoryAvailable: number,
-      bladeMemoryAllocated: number
+      bladeMemoryAllocated: number,
+      bladeStatus: string | undefined
     ) => {
       bladeStore.selectBlade(
         bladeId,
         bladeIp,
         bladePort,
         bladeMemoryAvailable,
-        bladeMemoryAllocated
+        bladeMemoryAllocated,
+        bladeStatus
       );
     };
 
@@ -1524,6 +1570,9 @@ export default {
       selectedBladeId,
       selectedBladePort,
       selectedBladeIp,
+      selectedBladeStatus,
+      statusColor,
+      statusIcon,
       selectAppliance,
       selectBlade,
       loading,
diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
index 59608a1..2dc64a8 100644
--- a/webui/src/components/CXL-Hosts/CXL-Hosts.vue
+++ b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
@@ -31,7 +31,13 @@
           :key="host.id"
           :id="host.id"
           @click="
-            selectHost(host.id, host.ipAddress, host.port, host.localMemoryMiB)
+            selectHost(
+              host.id,
+              host.ipAddress,
+              host.port,
+              host.localMemoryMiB,
+              host.status
+            )
           "
         >
           <v-row justify="space-between" align="center">
@@ -69,13 +75,9 @@
           <!---First Row -->
           <!-- ---------------------------------------------- -->
           <v-row class="flex-0" dense>
-            <v-col cols="12" sm="12" md="12" lg="4">
+            <v-col cols="12" sm="6" md="6" lg="4">
               <!-- Basic Information -->
-              <v-card
-                class="card-shadow"
-                height="350"
-                color="rgba(110, 190, 74, 0.1)"
-              >
+              <v-card class="h-100" color="rgba(110, 190, 74, 0.1)">
                 <v-toolbar height="45">
                   <v-toolbar-title style="cursor: pointer"
                     >Basic Information</v-toolbar-title
@@ -100,17 +102,42 @@
                   memory composition.
                 </v-card-text>
                 <v-list lines="one">
+                  <v-list-item>
+                    <v-list-item-title>Status</v-list-item-title>
+                    <v-list-item-subtitle
+                      :style="{
+                        fontWeight: 'bold',
+                        color: statusColor + ' !important',
+                      }"
+                      >{{ selectedHostStatus }}</v-list-item-subtitle
+                    >
+                    <template v-slot:prepend>
+                      <v-avatar>
+                        <v-icon :color="statusColor">{{ statusIcon }}</v-icon>
+                      </v-avatar>
+                    </template>
+                  </v-list-item>
                   <v-list-item>
                     <v-list-item-title>CXL-Host Id</v-list-item-title>
                     <v-list-item-subtitle>
                       {{ host.id }}
                     </v-list-item-subtitle>
+                    <template v-slot:prepend>
+                      <v-avatar>
+                        <v-icon color="#6ebe4a">mdi-account-circle</v-icon>
+                      </v-avatar>
+                    </template>
                   </v-list-item>
                   <v-list-item>
                     <v-list-item-title>IpAddress</v-list-item-title>
                     <v-list-item-subtitle>
                       {{ host.ipAddress + ":" + host.port }}
                     </v-list-item-subtitle>
+                    <template v-slot:prepend>
+                      <v-avatar>
+                        <v-icon color="#6ebe4a">mdi-ip</v-icon>
+                      </v-avatar>
+                    </template>
                   </v-list-item>
                   <v-list-item>
                     <v-list-item-title>LocalMemoryGiB</v-list-item-title>
@@ -121,13 +148,18 @@
                           : "N/A"
                       }}
                     </v-list-item-subtitle>
+                    <template v-slot:prepend>
+                      <v-avatar>
+                        <v-icon color="#6ebe4a">mdi-memory</v-icon>
+                      </v-avatar>
+                    </template>
                   </v-list-item>
                 </v-list>
               </v-card>
             </v-col>
-            <v-col cols="12" sm="12" md="12" lg="8">
+            <v-col cols="12" sm="6" md="6" lg="8">
               <!-- Ports-->
-              <v-card class="card-shadow h-full" height="350">
+              <v-card class="h-100">
                 <v-toolbar height="45">
                   <v-toolbar-title style="cursor: pointer"
                     >Ports Information</v-toolbar-title
@@ -144,10 +176,10 @@
           <!-- ---------------------------------------------- -->
           <!---Second Row -->
           <!-- ---------------------------------------------- -->
-          <v-row class="card-shadow flex-grow-0" dense>
-            <v-col cols="12" sm="12" md="12" lg="6">
+          <v-row class="flex-0" dense>
+            <v-col cols="12" sm="6" md="6" lg="6">
               <!-- Memory Devices -->
-              <v-card class="card-shadow h-full" height="350">
+              <v-card class="h-100">
                 <v-toolbar height="45">
                   <v-toolbar-title style="cursor: pointer"
                     >Memory Devices</v-toolbar-title
@@ -160,9 +192,9 @@
                 </v-card-text>
               </v-card>
             </v-col>
-            <v-col cols="12" sm="12" md="12" lg="6">
+            <v-col cols="12" sm="12" md="6" lg="6">
               <!-- Memory -->
-              <v-card class="card-shadow h-full" height="350">
+              <v-card class="h-100">
                 <v-toolbar height="45">
                   <v-toolbar-title style="cursor: pointer"
                     >Memory</v-toolbar-title
@@ -687,7 +719,8 @@ export default {
             newHost?.id + "",
             newHost?.ipAddress + "",
             Number(newHost?.port),
-            newHost?.localMemoryMiB
+            newHost?.localMemoryMiB,
+            newHost?.status
           );
         }
         this.dialogAddHostWait = false;
@@ -730,7 +763,8 @@ export default {
             selectedHost.id,
             selectedHost.ipAddress,
             selectedHost.port,
-            selectedHost.localMemoryMiB
+            selectedHost.localMemoryMiB,
+            selectedHost.status
           );
         }
 
@@ -847,7 +881,8 @@ export default {
           selectedHost?.id + "",
           selectedHost?.ipAddress + "",
           Number(selectedHost?.port),
-          selectedHost?.localMemoryMiB
+          selectedHost?.localMemoryMiB,
+          selectedHost?.status
         );
       }
 
@@ -881,15 +916,33 @@ export default {
     const selectedHostId = computed(() => hostStore.selectedHostId);
     const selectedHostIp = computed(() => hostStore.selectedHostIp);
     const selectedHostPort = computed(() => hostStore.selectedHostPortNum);
+    const selectedHostStatus = computed(() => hostStore.selectedHostStatus);
+
+    const statusColor = computed(() => {
+      return selectedHostStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
+    });
+
+    const statusIcon = computed(() => {
+      return selectedHostStatus.value === "online"
+        ? "mdi-check-circle"
+        : "mdi-close-circle";
+    });
 
     // Methods to update state
     const selectHost = (
       hostId: string,
       hostIp: string,
       hostPort: number,
-      hostLocalMemory: number | undefined
+      hostLocalMemory: number | undefined,
+      hostStatus: string | undefined
     ) => {
-      hostStore.selectHost(hostId, hostIp, hostPort, hostLocalMemory);
+      hostStore.selectHost(
+        hostId,
+        hostIp,
+        hostPort,
+        hostLocalMemory,
+        hostStatus
+      );
     };
 
     return {
@@ -897,6 +950,9 @@ export default {
       selectedHostId,
       selectedHostPort,
       selectedHostIp,
+      selectedHostStatus,
+      statusColor,
+      statusIcon,
       selectHost,
       loading,
     };
diff --git a/webui/src/components/CXL-Hosts/HostMemory.vue b/webui/src/components/CXL-Hosts/HostMemory.vue
index 5611a84..1764378 100644
--- a/webui/src/components/CXL-Hosts/HostMemory.vue
+++ b/webui/src/components/CXL-Hosts/HostMemory.vue
@@ -4,7 +4,7 @@
     <v-data-table
       :headers="headers"
       fixed-header
-      height="240"
+      height="300"
       :items="hostMemory"
     >
     </v-data-table>
diff --git a/webui/src/components/CXL-Hosts/HostMemoryDevice.vue b/webui/src/components/CXL-Hosts/HostMemoryDevice.vue
index 55f9a7f..5f25ce6 100644
--- a/webui/src/components/CXL-Hosts/HostMemoryDevice.vue
+++ b/webui/src/components/CXL-Hosts/HostMemoryDevice.vue
@@ -4,7 +4,7 @@
     <v-data-table
       :headers="headers"
       fixed-header
-      height="240"
+      height="300"
       :items="hostMemoryDevices"
     >
     </v-data-table>
diff --git a/webui/src/components/CXL-Hosts/HostPorts.vue b/webui/src/components/CXL-Hosts/HostPorts.vue
index 28d6afc..2b9602c 100644
--- a/webui/src/components/CXL-Hosts/HostPorts.vue
+++ b/webui/src/components/CXL-Hosts/HostPorts.vue
@@ -4,7 +4,7 @@
     <v-data-table
       :headers="headers"
       fixed-header
-      height="240"
+      height="300"
       :items="hostPorts"
     >
     </v-data-table>
diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts
index b93761c..bddaee2 100644
--- a/webui/src/components/Stores/BladeStore.ts
+++ b/webui/src/components/Stores/BladeStore.ts
@@ -14,6 +14,7 @@ export const useBladeStore = defineStore('blade', {
         selectedBladePortNum: null as unknown as number,
         selectedBladeTotalMemoryAvailableMiB: null as unknown as number | undefined,
         selectedBladeTotalMemoryAllocatedMiB: null as unknown as number | undefined,
+        selectedBladeStatus: null as unknown as string | undefined,
         addBladeError: null as unknown,
         deleteBladeError: null as unknown,
         resyncBladeError: null as unknown,
@@ -145,12 +146,13 @@ export const useBladeStore = defineStore('blade', {
         },
 
 
-        selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number) {
+        selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number, status: string | undefined) {
             this.selectedBladeId = bladeId;
             this.selectedBladeIp = selectedBladeIp;
             this.selectedBladePortNum = selectBladePortNum;
             this.selectedBladeTotalMemoryAvailableMiB = selectedBladeTotalMemoryAvailableMiB;
             this.selectedBladeTotalMemoryAllocatedMiB = selectedBladeTotalMemoryAllocatedMiB;
+            this.selectedBladeStatus = status;
         },
 
         updateSelectedBladeMemory(availableMemory: number | undefined, allocatedMemory: number | undefined) {
diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts
index 3c04cae..b90e8f4 100644
--- a/webui/src/components/Stores/HostStore.ts
+++ b/webui/src/components/Stores/HostStore.ts
@@ -14,6 +14,7 @@ export const useHostStore = defineStore('host', {
         selectedHostIp: null as unknown as string,
         selectedHostPortNum: null as unknown as number,
         selectedHostLocalMemory: null as unknown as number | undefined,
+        selectedHostStatus: null as unknown as string | undefined,
         addHostError: null as unknown,
         deleteHostError: null as unknown,
         resyncHostError: null as unknown,
@@ -123,11 +124,12 @@ export const useHostStore = defineStore('host', {
             }
         },
 
-        selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined) {
+        selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined, status: string | undefined) {
             this.selectedHostId = selectedHostId;
             this.selectedHostIp = selectedHostIp;
             this.selectedHostPortNum = selectedHostPortNum;
             this.selectedHostLocalMemory = selectedHostLocalMemory;
+            this.selectedHostStatus = status
         },
     }
 })
\ No newline at end of file