diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
index 9e19477..60245a9 100644
--- a/pkg/app-launcher/components/AppLauncherCard.vue
+++ b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -10,21 +10,17 @@ export default {
     ButtonDropDown,
   },
   props: {
-    clusterId: {
-      type: String,
-      required: true,
-    },
-    favoritedServices: {
+    favoritedApps: {
       type: Array,
       required: true,
     },
-    service: {
+    app: {
       type: Object,
       default: null,
     },
-    ingress: {
-      type: Object,
-      default: null,
+    isInGlobalView: {
+      type: Boolean,
+      default: false,
     },
   },
   methods: {
@@ -32,57 +28,54 @@ export default {
       window.open(link);
     },
     toggleFavorite() {
-      this.$emit('toggle-favorite', this.service);
+      this.$emit('toggle-favorite', this.app)
     },
   },
   computed: {
-    app() {
-      return this.service || this.ingress;
-    },
     endpoints() {
       return (
-        this.service?.spec?.ports?.map((port) => {
+        this.app?.spec?.ports?.map((port) => {
           const endpoint = `${
             isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${this.service?.metadata?.name}:${port.port}`;
+          }:${this.app.metadata?.name}:${port.port}`;
 
           return {
             label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.metadata.namespace}/services/${endpoint}/proxy`,
+            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.app.namespace}/services/${endpoint}/proxy`,
           };
         }) ?? []
       );
     },
     computedServiceName() {
       return (
-        this.service?.metadata?.labels?.['app.kubernetes.io/component'] ??
-        this.service?.metadata?.name
+        this.app?.metadata?.labels?.['app.kubernetes.io/component'] ??
+        this.app?.metadata?.name
       );
     },
     helmChart() {
-      return this.service?.metadata?.labels?.['helm.sh/chart'];
+      return this.app?.metadata?.labels?.['helm.sh/chart'];
     },
     kubernetesVersion() {
-      return this.service?.metadata?.labels?.['app.kubernetes.io/version'];
+      return this.app?.metadata?.labels?.['app.kubernetes.io/version'];
     },
     name() {
-      return this.service?.metadata?.name;
+      return this.app?.metadata?.name;
     },
     namespace() {
-      return this.service?.metadata?.namespace;
+      return this.app?.metadata?.namespace;
     },
     isFavorited() {
-      return this.favoritedServices.some(
-        (favoritedService) =>
-          favoritedService?.clusterId === this.clusterId &&
-          favoritedService?.service?.id === this.service?.id
+      return this.favoritedApps.some(
+        (favoritedApp) =>
+          favoritedApp?.id === this.app.id &&
+          favoritedApp?.kind === this.app.kind
       );
     },
     isGlobalApp() {
-      return this.service?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
+      return this.app?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
     },
     ingressPath() {
-      return ingressFullPath(this.ingress, this.ingress?.spec?.rules?.[0]);
+      return ingressFullPath(this.app, this.app?.spec?.rules?.[0]);
     }
   },
   name: 'AppLauncherCard',
@@ -95,24 +88,28 @@ export default {
     <template #title>
       <div style="width: 100%">
         <p style="font-size: 1.2rem">
-          {{ service ? service?.metadata?.name : ingress?.metadata?.name }}
+          {{ app.metadata?.name }}
         </p>
         <div style="color: var(--input-label); display: flex; justify-content: space-between; margin-top: 4px;">
-          <p v-if="app.type === 'service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
+          <p v-if="app.kind === 'Service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
             {{ kubernetesVersion }}
           </p>
-          <p v-if="app.type === 'service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
+          <p v-if="app.kind === 'Service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
             {{ helmChart }}
           </p>
-          <p v-if="app.type === 'ingress'">
+          <p v-if="app.kind === 'Ingress'">
             Ingress
           </p>
         </div>
       </div>
     </template>
     <template #body>
-      <p v-if="app.type === 'service'">{{ namespace }}/{{ name }}</p>
-      <p v-if="app.type === 'ingress'">{{ ingressPath }}</p>
+      <p v-if="app.kind === 'Service'">
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}/` : '' }}{{ namespace }}/{{ name }}
+      </p>
+      <p v-if="app.kind === 'Ingress'">
+        {{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}: ` : '' }}{{ ingressPath }}
+      </p>
     </template>
     <template #actions>
       <button v-if="!isGlobalApp" class="icon-button" @click="toggleFavorite">
@@ -120,7 +117,7 @@ export default {
       </button>
       <i v-else class="icon icon-globe icon-only" />
       <a
-        v-if="(endpoints?.length ?? 0) <= 1 && app.type === 'service'"
+        v-if="(endpoints?.length ?? 0) <= 1 && app.kind === 'Service'"
         :disabled="!endpoints?.length"
         :href="endpoints[0]?.value"
         target="_blank"
@@ -133,7 +130,7 @@ export default {
         {{ t('appLauncher.launch') }}
       </a>
       <a
-        v-else-if="app.type === 'ingress'"
+        v-else-if="app.kind === 'Ingress'"
         :href="ingressPath"
         target="_blank"
         rel="noopener noreferrer nofollow"
diff --git a/pkg/app-launcher/components/ClusterActions.vue b/pkg/app-launcher/components/ClusterActions.vue
new file mode 100644
index 0000000..94cd5f9
--- /dev/null
+++ b/pkg/app-launcher/components/ClusterActions.vue
@@ -0,0 +1,143 @@
+<script>
+export default {
+    name: 'ClusterActions',
+    props: {
+        searchQuery: {
+            type: String,
+            required: true,
+        },
+        isGridView: {
+            type: Boolean,
+            required: true,
+        },
+        sortOrder: {
+            type: String,
+            required: true,
+        },
+        selectedCluster: {
+            type: String,
+            required: true,
+        },
+        clusterOptions: {
+            type: Array,
+            required: true,
+        },
+    },
+    computed: {
+        aToZorZtoA() {
+            console.log(this.$store.getters['i18n/t']('appLauncher.aToZ'));
+            return this.sortOrder === 'asc' ? this.$store.getters['i18n/t']('appLauncher.aToZ') : this.$store.getters['i18n/t']('appLauncher.zToA');
+        },
+    },
+    emits: ['update:search-query', 'toggle-sort', 'update:selected-cluster', 'set-view'],
+};
+</script>
+
+<template>
+    <div class="cluster-actions">
+        <div class="search-input">
+            <input :value="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', $event.target.value)" />
+        </div>
+        <div class="sort-buttons" v-if="isGridView" @click="$emit('toggle-sort')">
+            <div class="sort-button" :class="{ active: sortOrder === 'asc' }" :disabled="sortOrder === 'asc'">
+                <i class="icon-chevron-up"></i>
+            </div>
+            <div class="sort-label">
+                <p>{{ aToZorZtoA }}</p>
+            </div>
+            <div class="sort-button" :class="{ active: sortOrder === 'desc' }" :disabled="sortOrder === 'desc'">
+                <i class="icon-chevron-down"></i>
+            </div>
+        </div>
+        <div class="select-wrapper">
+            <select :value="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', $event.target.value)">
+                <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                </option>
+            </select>
+        </div>
+        <button class="icon-button" @click="$emit('set-view', 'grid')">
+            <i class="icon icon-apps" />
+        </button>
+        <button class="icon-button" @click="$emit('set-view', 'list')">
+            <i class="icon icon-list-flat" />
+        </button>
+    </div>
+</template>
+
+
+<style scoped>
+.cluster-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    position: fixed;
+    right: 5.8%;
+    top: 4.3rem;
+    z-index: 2;
+    padding-bottom: 0.425rem;
+    padding-right: 4.4rem;
+    background: inherit;
+    border-bottom: var(--header-border-size) solid var(--header-border);
+}
+
+.icon-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--primary);
+    font-size: 1.8rem;
+}
+
+.sort-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: none;
+    color: #555555;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+}
+
+.sort-label {
+    color: var(--primary);
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.sort-buttons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.sort-button:hover {
+    color: var(--primary-hover);
+}
+
+.sort-button.active {
+    color: var(--primary);
+}
+
+.search-input {
+    text-align: right;
+    justify-content: flex-end;
+    display: flex;
+
+    input {
+        width: 190px;
+        padding: 11px;
+        font-size: 1rem;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+    }
+}
+
+.select-wrapper select {
+    padding: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/pkg/app-launcher/components/ClusterGridView.vue b/pkg/app-launcher/components/ClusterGridView.vue
new file mode 100644
index 0000000..d347d86
--- /dev/null
+++ b/pkg/app-launcher/components/ClusterGridView.vue
@@ -0,0 +1,64 @@
+<script>
+import AppLauncherCard from './AppLauncherCard.vue';
+
+export default {
+    name: 'ClusterGridView',
+    components: {
+        AppLauncherCard,
+    },
+    props: {
+        clusterData: {
+            type: Object,
+            required: true,
+        },
+        favoritedApps: {
+            type: Array,
+            required: true,
+        },
+    },
+    emits: ['toggle-favorite'],
+};
+</script>
+
+<template>
+    <div class="cluster-grid-view">
+        <div class="cluster-header">
+            <h1>
+                {{ clusterData.name }}
+            </h1>
+        </div>
+        <div class="services-by-cluster-grid">
+            <AppLauncherCard
+                v-for="app in clusterData.filteredApps"
+                :key="`${app.clusterId}-${app.id}-${app.kind}`"
+                :app="app" :isInGlobalView="false" :favorited-apps="favoritedApps"
+                @toggle-favorite="$emit('toggle-favorite', $event)"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.services-by-cluster-grid {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.cluster-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1rem 0;
+    background: var(--header-bg);
+    border-bottom: var(--header-border-size) solid var(--header-border);
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.favorite-icon {
+    margin-right: 1rem;
+}
+</style>
diff --git a/pkg/app-launcher/components/ClusterListView.vue b/pkg/app-launcher/components/ClusterListView.vue
new file mode 100644
index 0000000..4d6a2b0
--- /dev/null
+++ b/pkg/app-launcher/components/ClusterListView.vue
@@ -0,0 +1,114 @@
+<script>
+import SortableTable from '@shell/components/SortableTable';
+import ButtonDropDown from '@shell/components/ButtonDropdown';
+import { isMaybeSecure } from '@shell/utils/url';
+
+export default {
+    name: 'ClusterListView',
+    components: {
+        SortableTable,
+        ButtonDropDown,
+    },
+    props: {
+        clusterData: {
+            type: Object,
+            required: true,
+        },
+        favoritedApps: {
+            type: Array,
+            required: true,
+        },
+        tableHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    methods: {
+        isFavorited(row, favoritedApps) {
+            return favoritedApps.some(
+                (favoritedService) =>
+                    favoritedService.id === row.id &&
+                    favoritedService.kind === row.kind
+            );
+        },
+        getEndpoints(row) {
+            return (
+                row?.spec.ports?.map((port) => {
+                    const endpoint = `${isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
+                        }:${row.metadata.name}:${port.port}`;
+
+                    return {
+                        label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
+                        value: `/k8s/clusters/${row.clusterId}/api/v1/namespaces/${row.metadata.namespace}/services/${endpoint}/proxy`,
+                    };
+                }) ?? []
+            );
+        },
+        openLink(option) {
+            window.open(option.value, '_blank');
+        },
+    },
+    emits: ['toggle-favorite'],
+};
+</script>
+
+<template>
+    <div class="cluster-list-view">
+        <div class="cluster-header">
+            <h1>
+                {{ clusterData.name }}
+            </h1>
+        </div>
+        <SortableTable
+            :rows="clusterData.filteredApps"
+            :headers="tableHeaders"
+            :row-key="'uniqueId'"
+            :search="false"
+            :table-actions="false"
+            :row-actions="false"
+            :no-rows-text="$store.getters['i18n/t']('appLauncher.noAppsFound')"
+        >
+            <template #cell:name="{ row }">
+                {{ row.metadata.name }}
+            </template>
+            <template #cell:namespace="{ row }">
+                {{ row.metadata.namespace }}
+            </template>
+            <template #cell:version="{ row }">
+                {{ row.metadata.labels?.['app.kubernetes.io/version'] }}
+            </template>
+            <template #cell:helmChart="{ row }">
+                {{ row.metadata.labels?.['helm.sh/chart'] }}
+            </template>
+            <template #cell:actions="{ row }">
+                <div style="display: flex; justify-content: flex-end;">
+                    <button class="icon-button favorite-icon" @click="$emit('toggle-favorite', row)">
+                        <i :class="['icon', isFavorited(row, favoritedApps) ? 'icon-star' : 'icon-star-open']" />
+                    </button>
+                    <a
+                        v-if="getEndpoints(row)?.length <= 1"
+                        :href="getEndpoints(row)[0]?.value" target="_blank"
+                        rel="noopener noreferrer nofollow" class="btn role-primary">
+                        {{ t('appLauncher.launch') }}
+                    </a>
+                    <ButtonDropDown
+                        v-else
+                        :button-label="t('appLauncher.launch')"
+                        :dropdown-options="getEndpoints(row)"
+                        :title="t('appLauncher.launchAnEndpointFromSelection')" @click-action="openLink"
+                    />
+                </div>
+            </template>
+        </SortableTable>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.cluster-list-view {
+    margin-bottom: 2rem;
+    .favorite-icon {
+        margin-right: 1rem;
+        background: none;
+    }
+}
+</style>
diff --git a/pkg/app-launcher/l10n/en-us.yaml b/pkg/app-launcher/l10n/en-us.yaml
index 6882d8a..e80cd24 100644
--- a/pkg/app-launcher/l10n/en-us.yaml
+++ b/pkg/app-launcher/l10n/en-us.yaml
@@ -12,3 +12,5 @@ appLauncher:
   selectCluster: Select a cluster
   globalApps: Global Apps
   filter: Filter
+  aToZ: A-Z
+  zToA: Z-A
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 63b71f1..1ca420a 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -1,30 +1,29 @@
 <script>
 import { MANAGEMENT } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
-import SortableTable from '@shell/components/SortableTable';
-import ButtonDropDown from '@shell/components/ButtonDropdown';
-import { isMaybeSecure } from '@shell/utils/url';
-import { ingressFullPath } from '@shell/models/networking.k8s.io.ingress';
 
 import AppLauncherCard from '../components/AppLauncherCard.vue';
+import ClusterActions from '../components/ClusterActions.vue';
+import ClusterGridView from '../components/ClusterGridView.vue';
+import ClusterListView from '../components/ClusterListView.vue';
 
 export default {
   components: {
     Loading,
     AppLauncherCard,
-    SortableTable,
-    ButtonDropDown
+    ClusterActions,
+    ClusterGridView,
+    ClusterListView,
   },
   data() {
     return {
       servicesByCluster: [],
       ingressesByCluster: [],
-      clusterLoading: {},
       loading: true,
       selectedCluster: null,
       clusterOptions: [],
       selectedView: 'grid',
-      favoritedServices: [],
+      favoritedApps: [],
       searchQuery: '',
       tableHeaders: [
         {
@@ -63,35 +62,45 @@ export default {
       const allClusters = await this.getClusters();
       this.servicesByCluster = await this.getServicesByCluster(allClusters);
       this.ingressesByCluster = await this.getIngressesByCluster(allClusters);
-
-      // Set the first cluster as the selected cluster
-      if (this.servicesByCluster.length > 0) {
-        this.selectedCluster = "ALL_CLUSTERS";
-      }
+      this.selectedCluster = "ALL_CLUSTERS";
       this.generateClusterOptions();
 
-      // Retrieve global apps based on annotations
+      // Retrieve global services based on annotations
       this.servicesByCluster.forEach((cluster) => {
         cluster.services.forEach((service) => {
           if (service.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
-            this.favoritedServices.push({
+            this.favoritedApps.push({
+              ...service,
+              clusterId: cluster.id,
+              clusterName: cluster.name,
+            });
+          }
+        });
+      });
+
+      // Retrieve global ingresses based on annotations
+      this.ingressesByCluster.forEach((cluster) => {
+        cluster.ingresses.forEach((ingress) => {
+          if (ingress.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
+            this.favoritedApps.push({
+              ...ingress,
               clusterId: cluster.id,
-              service,
+              clusterName: cluster.name,
             });
           }
         });
       });
 
       // Retrieve favorites from localStorage
-      const storedFavorites = localStorage.getItem('favoritedServices');
+      const storedFavorites = localStorage.getItem('favoritedApps');
       if (storedFavorites) {
-        this.favoritedServices.push(...JSON.parse(storedFavorites));
+        this.favoritedApps.push(...JSON.parse(storedFavorites));
       }
     } catch (error) {
       console.error('Error fetching clusters', error);
     } finally {
       this.loading = false;
-    };
+    }
   },
   methods: {
     async getClusters() {
@@ -99,12 +108,8 @@ export default {
         type: MANAGEMENT.CLUSTER,
       });
     },
-    getClusterName(clusterId) {
-      const cluster = this.servicesByCluster.find(c => c.id === clusterId);
-      return cluster ? cluster.name : '';
-    },
     getCluster(clusterId) {
-      return this.servicesByCluster.find(c => c.id === clusterId);
+      return this.servicesByCluster.find(c => c.id === clusterId) || null;
     },
     async getServicesByCluster(allClusters) {
       return await Promise.all(
@@ -124,7 +129,11 @@ export default {
                   url: `/k8s/clusters/${cluster.id}/v1/services`,
                 })
               ).data;
-              clusterData.services = services;
+              clusterData.services = services.map((service) => ({
+                ...service,
+                clusterId: cluster.id,
+                clusterName: cluster.spec.displayName,
+              }));
             } catch (error) {
               console.error(`Error fetching services for cluster ${cluster.id}:`, error);
               clusterData.error = true;
@@ -153,7 +162,11 @@ export default {
                   url: `/k8s/clusters/${cluster.id}/v1/networking.k8s.io.ingresses`,
                 })
               ).data;
-              clusterData.ingresses = ingresses;
+              clusterData.ingresses = ingresses.map((ingress) => ({
+                ...ingress,
+                clusterId: cluster.id,
+                clusterName: cluster.spec.displayName,
+              }));
             } catch (error) {
               console.error(`Error fetching ingresses for cluster ${cluster.id}:`, error);
               clusterData.error = true;
@@ -173,124 +186,66 @@ export default {
     toggleSortOrder() {
       this.tableHeaders[0].sortOrder = this.tableHeaders[0].sortOrder === 'asc' ? 'desc' : 'asc';
     },
-    getEndpoints(service) {
-      return (
-        service?.spec.ports?.map((port) => {
-          const endpoint = `${
-            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${service.metadata.name}:${port.port}`;
-
-          return {
-            label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.selectedCluster}/api/v1/namespaces/${service.metadata.namespace}/services/${endpoint}/proxy`,
-          };
-        }) ?? []
-      );
-    },
-    openLink(link) {
-      window.open(link, '_blank');
-    },
-    toggleFavorite(service) {
-      const index = this.favoritedServices.findIndex(
-        (favoritedService) =>
-          favoritedService.clusterId === this.selectedCluster &&
-          favoritedService.service.id === service.id
+    toggleFavorite(item) {
+      const index = this.favoritedApps.findIndex(
+        (favoritedApp) =>
+          favoritedApp.id === item.id &&
+          favoritedApp.kind === item.kind
       );
+      
       if (index !== -1) {
-        this.favoritedServices.splice(index, 1);
+        this.favoritedApps.splice(index, 1);
       } else {
-        this.favoritedServices.push({
-          clusterId: this.selectedCluster,
-          service,
+        this.favoritedApps.push({
+          ...item
         });
       }
+
       // Store updated favorites in localStorage
-      localStorage.setItem('favoritedServices', JSON.stringify(this.favoritedServices.filter((s) => (s.service.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true'))));
+      const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
+      localStorage.setItem('favoritedApps', favsToStore);
     },
-    isFavorited(service, favoritedServices) {
-      return favoritedServices.some(
-        (favoritedService) =>
-          favoritedService.clusterId === this.selectedCluster &&
-          favoritedService.service.id === service.id
-      );
+    updateSearchQuery(value) {
+      this.searchQuery = value;
     },
   },
   computed: {
     aToZorZtoA() {
       return this.tableHeaders[0].sortOrder === 'asc' ? 'A-Z' : 'Z-A';
     },
-    selectedClusterData() {
-      const cluster = this.getCluster(this.selectedCluster);
-      if (cluster) {
-        const ingresses = this.ingressesByCluster.find(
-          (ingressCluster) => ingressCluster.id === cluster.id
-        )?.ingresses || [];
-
-        const services = cluster.services.map((service) => {
-          const relatedIngress = ingresses.find((ingress) =>
-            ingress.spec.rules.some((rule) =>
-              rule.http.paths.some((path) =>
-                path.backend.service?.name === service.metadata.name
-              )
-            )
-          );
-          return {
-            ...service,
-            relatedIngress,
-          };
-        });
-        
-        const filteredApps = this.filteredApps(services, ingresses);
-
-        return {
-          ...cluster,
-          services,
-          ingresses,
-          filteredApps,
-        };
-      }
-      return null;
-    },
     displayedClusterData() {
       if (this.selectedCluster === 'ALL_CLUSTERS') {
-        return this.servicesByCluster.map(cluster => ({
+        const allClustersData = this.servicesByCluster.map(cluster => ({
           ...cluster,
           ingresses: this.ingressesByCluster.find(ingressCluster => ingressCluster.id === cluster.id)?.ingresses || [],
           filteredApps: this.filteredApps(cluster.services, this.ingressesByCluster.find(ingressCluster => ingressCluster.id === cluster.id)?.ingresses || []),
         }));
+        return allClustersData;
       } else {
-        return [this.selectedClusterData]; // This just remakes use of selectedClusterData for single cluster view
-      }
-    },
-    sortedApps() {
-      if (this.selectedClusterData) {
-        const services = this.selectedClusterData.services.map((service) => ({
-          ...service,
-          type: 'service',
-          uniqueId: `service-${service.id}`,
-        }));
+        const cluster = this.getCluster(this.selectedCluster);
+        if (cluster) {
+          const ingresses = this.ingressesByCluster.find(
+            (ingressCluster) => ingressCluster.id === cluster.id
+          )?.ingresses || [];
 
-        const ingresses = this.selectedClusterData.ingresses.map((ingress) => ({
-          ...ingress,
-          type: 'ingress',
-          uniqueId: `ingress-${ingress.id}`,
-        }));
+          const services = cluster.services;
+          
+          const filteredApps = this.filteredApps(services, ingresses);
 
-        return [...services, ...ingresses].sort((a, b) => {
-          const nameA = a.metadata.name.toLowerCase();
-          const nameB = b.metadata.name.toLowerCase();
-          if (this.tableHeaders[0].sortOrder === 'asc') {
-            return nameA.localeCompare(nameB);
-          } else {
-            return nameB.localeCompare(nameA);
-          }
-        });
+          return [{
+            ...cluster,
+            ingresses,
+            filteredApps,
+          }];
+        } else {
+          console.error('Cluster not found:', this.selectedCluster);
+        }
       }
       return [];
     },
     filteredApps() {
       return (services, ingresses) => {
-        const sortedApps = [...(services || []), ...(ingresses || {})].sort((a, b) => {
+        const sortedApps = [...(services || []), ...(ingresses || [])].sort((a, b) => {
           const nameA = a.metadata.name.toLowerCase();
           const nameB = b.metadata.name.toLowerCase();
           if (this.tableHeaders[0].sortOrder === 'asc') {
@@ -314,20 +269,6 @@ export default {
         }
       };
     },
-    sortedServices() {
-      if (this.selectedClusterData) {
-        return [...this.selectedClusterData.services].sort((a, b) => {
-          const nameA = a.metadata.name.toLowerCase();
-          const nameB = b.metadata.name.toLowerCase();
-          if (this.tableHeaders[0].sortOrder === 'asc') {
-            return nameA.localeCompare(nameB);
-          } else {
-            return nameB.localeCompare(nameA);
-          }
-        });
-      }
-      return [];
-    },
   },
   layout: 'plain',
 };
@@ -336,109 +277,49 @@ export default {
 <template>
   <Loading v-if="loading" :label="$store.getters['i18n/t']('appLauncher.loading')" />
   <div v-else class="main-container">
-    <div class="cluster-actions">
-      <div class="search-input">
-        <input v-model="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" />
-      </div>
-      <div class="sort-buttons" v-if="selectedView === 'grid'" @click="toggleSortOrder()">
-        <div class="sort-button" :class="{ active: this.tableHeaders[0].sortOrder === 'asc' }" :disabled="this.tableHeaders[0].sortOrder === 'asc'">
-          <i class="icon-chevron-up"></i>
-        </div>
-        <div class="sort-label">
-          <p>{{ aToZorZtoA }}</p>
-        </div>
-        <div class="sort-button" :class="{ active: this.tableHeaders[0].sortOrder === 'desc' }" :disabled="this.tableHeaders[0].sortOrder === 'desc'">
-          <i class="icon-chevron-down"></i>
-        </div>
-      </div>
-      <div class="select-wrapper">
-        <select v-model="selectedCluster" class="cluster-select">
-          <option v-for="option in clusterOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </div>
-      <button class="icon-button" @click="selectedView = 'grid'">
-        <i class="icon icon-apps" />
-      </button>
-      <button class="icon-button" @click="selectedView = 'list'">
-        <i class="icon icon-list-flat" />
-      </button>
-    </div>
-    <div v-if="favoritedServices.length > 0">
+    <ClusterActions
+      :search-query="searchQuery"
+      :is-grid-view="selectedView === 'grid'"
+      :selected-cluster="selectedCluster"
+      :cluster-options="clusterOptions"
+      :sort-order="tableHeaders[0].sortOrder"
+      @update:search-query="updateSearchQuery"
+      @toggle-sort="toggleSortOrder"
+      @update:selected-cluster="selectedCluster = $event"
+      @set-view="selectedView = $event"
+    />
+    <div v-if="favoritedApps.length > 0">
       <div class="cluster-header">
         <h2>{{ t('appLauncher.globalApps') }}</h2>
       </div>
       <div class="services-by-cluster-grid">
-        <AppLauncherCard v-for="favoritedService in favoritedServices"
-          :key="`${favoritedService.clusterId}-${favoritedService.service.id}`" :cluster-id="favoritedService.clusterId"
-          :service="favoritedService.service" :favorited-services="favoritedServices"
-          @toggle-favorite="toggleFavorite" />
+        <AppLauncherCard v-for="favoritedApp in favoritedApps"
+          :key="`${favoritedApp.clusterId}-${favoritedApp.id}-${favoritedApp.kind}-fav`"
+          :app="favoritedApp"
+          :isInGlobalView="true"
+          :favorited-apps="favoritedApps"
+          @toggle-favorite="toggleFavorite"
+        />
       </div>
     </div>
     <div v-if="selectedCluster">
       <div v-if="selectedView === 'grid'">
         <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
-          <div class="cluster-header">
-            <h1>
-              {{ clusterData.name }}
-            </h1>
-          </div>
-          <div class="services-by-cluster-grid">
-            <AppLauncherCard
-              v-for="app in clusterData.filteredApps"
-              :key="app.uniqueId"
-              :cluster-id="clusterData.id"
-              :service="app.type === 'service' ? app : null"
-              :ingress="app.type === 'ingress' ? app : null"
-              :favorited-services="favoritedServices"
-              @toggle-favorite="toggleFavorite"
-            />
-          </div>
+          <ClusterGridView
+            :cluster-data="clusterData"
+            :favorited-apps="favoritedApps"
+            @toggle-favorite="toggleFavorite"
+          />
         </div>
       </div>
       <div v-else-if="selectedView === 'list'">
         <div v-for="clusterData in displayedClusterData" :key="clusterData.id">
-          <div class="cluster-header">
-            <h1>
-              {{ clusterData.name }}
-            </h1>
-          </div>
-          <SortableTable
-            :rows="clusterData.filteredApps"
-            :headers="tableHeaders"
-            :row-key="'uniqueId'"
-            :search="false"
-            :table-actions="false"
-            :row-actions="false"
-            :no-rows-text="$store.getters['i18n/t']('appLauncher.noAppsFound')"
-          >
-            <template #cell:name="{row}">
-              {{ row.metadata.name }}
-            </template>
-            <template #cell:namespace="{row}">
-              {{ row.metadata.namespace }}
-            </template>
-            <template #cell:version="{row}">
-              {{ row.metadata.labels?.['app.kubernetes.io/version'] }}
-            </template>
-            <template #cell:helmChart="{row}">
-              {{ row.metadata.labels?.['helm.sh/chart'] }}
-            </template>
-            <template #cell:actions="{row}">
-              <div style="display: flex; justify-content: flex-end;">
-                <button class="icon-button favorite-icon" @click="toggleFavorite(row)">
-                  <i :class="['icon', isFavorited(row, favoritedServices) ? 'icon-star' : 'icon-star-open']" />
-                </button>
-                <a v-if="getEndpoints(row)?.length <= 1" :href="getEndpoints(row)[0]?.value" target="_blank"
-                  rel="noopener noreferrer nofollow" class="btn role-primary">
-                  {{ t('appLauncher.launch') }}
-                </a>
-                <ButtonDropDown v-else :button-label="t('appLauncher.launch')" :dropdown-options="getEndpoints(row)"
-                  :title="t('appLauncher.launchAnEndpointFromSelection')" @click-action="(o) => openLink(o.value)" />
-              </div>
-            </template>
-          </SortableTable>
+          <ClusterListView
+            :cluster-data="clusterData"
+            :favorited-apps="favoritedApps"
+            :table-headers="tableHeaders"
+            @toggle-favorite="toggleFavorite"
+          />
         </div>
       </div>
     </div>
@@ -474,60 +355,6 @@ export default {
   z-index: 1;
 }
 
-.cluster-actions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  position: fixed;
-  right: 6rem;
-  top: 4.4rem;
-  z-index: 2;
-  padding-bottom: 0.425rem;
-  padding-right: 4.4rem;
-  background: inherit;
-  border-bottom: var(--header-border-size) solid var(--header-border);
-}
-
-.icon-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--primary);
-  font-size: 1.8rem;
-}
-
-.sort-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: none;
-  color:#555555;
-  font-size: 1.3rem;
-  display: flex;
-  align-items: center;
-}
-
-.sort-label {
-  color: var(--primary);
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.sort-buttons {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-}
-
-.sort-button:hover {
-  color: var(--primary-hover);
-}
-
-.sort-button.active {
-  color: var(--primary);
-}
-
 .favorite-icon {
   margin-right: 1rem;
 }
@@ -535,18 +362,4 @@ export default {
 .icon-button:hover {
   color: var(--primary-hover);
 }
-
-.search-input {
-  text-align: right;
-  justify-content: flex-end;
-  display: flex;
-
-  input {
-    width: 190px;
-    padding: 11px;
-    font-size: 1rem;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-  }
-}
 </style>