diff --git a/client/src/components/apps/appstats.vue b/client/src/components/apps/appstats.vue
index 2bee4fdaa..116770c0e 100644
--- a/client/src/components/apps/appstats.vue
+++ b/client/src/components/apps/appstats.vue
@@ -14,7 +14,7 @@
                             <th>{{ $t('app.domains') }}</th>
                             <td>
                                 <ul style="list-style-type: none; padding: 0;">
-                                    <li v-for="host in appData.spec.ingress.hosts" :key="host.host">
+                                    <li v-for="host in appData.spec.ingress?.hosts" :key="host.host">
                                         <a :href="'https://' + host.host" target="_blank">{{ host.host }}</a> 
                                         <v-icon size="x-small" style="color: rgba(var(--v-theme-kubero), var(--v-high-emphasis-opacity));">mdi-open-in-new</v-icon>
                                     </li>
diff --git a/client/src/components/apps/detail.vue b/client/src/components/apps/detail.vue
index bbb3da7f6..535e3aa81 100644
--- a/client/src/components/apps/detail.vue
+++ b/client/src/components/apps/detail.vue
@@ -74,7 +74,7 @@
                 <Builds :pipeline="pipeline" :phase="phase" :app="app" :appData="appData" :pipelineData="pipelineData"/>
             </v-window-item>
             <v-window-item transition="false" reverse-transition="false" class="background">
-                <Metrics :pipeline="pipeline" :phase="phase" :app="app" :host="appData.spec.ingress.hosts[0].host"/>
+                <Metrics :pipeline="pipeline" :phase="phase" :app="app" :host="appData.spec.ingress?.hosts?.[0]?.host"/>
             </v-window-item>
             <v-window-item transition="false" reverse-transition="false" class="background">
                 <LogsTab :pipeline="pipeline" :phase="phase" :app="app" :deploymentstrategy="appData.spec.deploymentstrategy" :buildstrategy="appData.spec.buildstrategy"/>
@@ -177,7 +177,7 @@ export default defineComponent({
             });
         },
         ActionOpenApp() {
-            window.open(`https://${this.appData.spec.ingress.hosts[0].host}`, '_blank');
+            window.open(`https://${this.appData.spec.ingress?.hosts?.[0]?.host}`, '_blank');
         },
         ActionEditApp() {
             this.$router.push(`/pipeline/${this.pipeline}/${this.phase}/apps/${this.app}`);
diff --git a/client/src/components/pipelines/appcard.vue b/client/src/components/pipelines/appcard.vue
index 4c416947a..ba0e5ed4d 100644
--- a/client/src/components/pipelines/appcard.vue
+++ b/client/src/components/pipelines/appcard.vue
@@ -89,7 +89,7 @@
     </v-card-text>
     <v-divider></v-divider>
 
-    <span v-if="app.addons.length > 0">
+    <span v-if="app.addons?.length > 0">
     <v-card-text>
       <v-avatar
         rounded
@@ -134,7 +134,7 @@
         </v-btn>
         <v-btn
             title="Open App"
-            v-if="app.ingress.hosts.length > 0"
+            v-if="app.ingress?.hosts?.length > 0"
             color="deep-purple lighten-2"
             variant="text"
             :href="'//'+app.ingress?.hosts[0].host" target="_blank"
@@ -296,18 +296,24 @@ export default defineComponent({
         loadMetrics() {
             axios.get(`/api/metrics/resources/${this.pipeline}/${this.phase}/${this.app.name}`)
             .then(response => {
-                for (var i = 0; i < response.data.length; i++) {
-                    if (response.data[i].cpu.percentage != null && response.data[i].memory.percentage != null) {
-                        this.metricsDisplay = "bars";
-                    }
-                    if (
-                      (response.data[i].cpu.percentage == null && response.data[i].memory.percentage == null) &&
-                      (response.data[i].cpu.usage != null && response.data[i].memory.usage != null)
-                     ){
-                        this.metricsDisplay = "table";
-                    }
-                }
-                this.metrics = response.data;
+                const metrics = Array.isArray(response.data) ? response.data : [];
+                const allMetricsHavePercentages = metrics.length > 0 && metrics.every(
+                  (metric: Metric) =>
+                    metric.cpu.percentage != null &&
+                    metric.memory.percentage != null
+                );
+                const hasUsageMetrics = metrics.some(
+                  (metric: Metric) =>
+                    metric.cpu.usage != null &&
+                    metric.memory.usage != null
+                );
+
+                this.metricsDisplay = allMetricsHavePercentages
+                  ? "bars"
+                  : hasUsageMetrics
+                    ? "table"
+                    : "dots";
+                this.metrics = metrics;
             })
             .catch(error => {
                 console.log(error);