diff --git a/.gitignore b/.gitignore
index f6fd20f..de04b9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,7 +30,6 @@ coverage
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
index eef4040..fafc223 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,14 +1,5 @@
 {
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.enable": true,
-  "eslint.rules.customizations": [
-    {
-      "rule": "*",
-      "severity": "warn"
-    }
-  ],
-  "eslint.useESLintClass": true
 }
diff --git a/package.json b/package.json
index 2d01683..5632c62 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "krum-rancher-extensions-demo",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "engines": {
     "node": "16.19.1"
diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
index fb05f5d..a908565 100644
--- a/pkg/app-launcher/components/AppLauncherCard.vue
+++ b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -8,45 +8,15 @@ export default {
     Card,
     ButtonDropDown,
   },
-  computed: {
-    endpoints() {
-      return (
-        this.service?.spec.ports?.map((port) => {
-          const endpoint = `${
-            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${this.service.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`,
-          };
-        }) ?? []
-      );
-    },
-    computedServiceName() {
-      return (
-        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
-        this.service?.metadata.name
-      );
-    },
-    helmChart() {
-      return this.service?.metadata.labels?.['helm.sh/chart'];
-    },
-    kubernetesVersion() {
-      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
-    },
-    name() {
-      return this.service?.metadata.name;
-    },
-    namespace() {
-      return this.service?.metadata.namespace;
-    },
-  },
   props: {
     clusterId: {
       type: String,
       required: true,
     },
+    favoritedServices: {
+      type: Array,
+      required: true,
+    },
     service: {
       type: Object,
       required: true,
@@ -95,6 +65,50 @@ export default {
     openLink(link) {
       window.open(link);
     },
+    toggleFavorite() {
+      this.$emit('toggle-favorite', this.service);
+    },
+  },
+  computed: {
+    endpoints() {
+      return (
+        this.service?.spec.ports?.map((port) => {
+          const endpoint = `${
+            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
+          }:${this.service.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`,
+          };
+        }) ?? []
+      );
+    },
+    computedServiceName() {
+      return (
+        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
+        this.service?.metadata.name
+      );
+    },
+    helmChart() {
+      return this.service?.metadata.labels?.['helm.sh/chart'];
+    },
+    kubernetesVersion() {
+      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
+    },
+    name() {
+      return this.service?.metadata.name;
+    },
+    namespace() {
+      return this.service?.metadata.namespace;
+    },
+    isFavorited() {
+      return this.favoritedServices.some(
+        (favoritedService) =>
+          favoritedService.clusterId === this.clusterId &&
+          favoritedService.service.id === this.service.id
+      );
+    },
   },
   name: 'AppLauncherCard',
   layout: 'plain',
@@ -129,6 +143,9 @@ export default {
       <p>{{ namespace }}/{{ name }}</p>
     </template>
     <template #actions>
+      <button class="icon-button" @click="toggleFavorite">
+        <i :class="['icon', isFavorited ? 'icon-star' : 'icon-star-open']" />
+      </button>
       <a
         v-if="(endpoints?.length ?? 0) <= 1"
         :disabled="!endpoints?.length"
@@ -156,3 +173,17 @@ export default {
     </template>
   </Card>
 </template>
+
+<style lang="scss" scoped>
+@import "@shell/assets/styles/fonts/_icons.scss";
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--primary);
+  font-size: 1.8rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/pkg/app-launcher/l10n/en-us.yaml b/pkg/app-launcher/l10n/en-us.yaml
index c19c827..6eb00e4 100644
--- a/pkg/app-launcher/l10n/en-us.yaml
+++ b/pkg/app-launcher/l10n/en-us.yaml
@@ -6,3 +6,8 @@ appLauncher:
   launchEndpoint: Launch {endpoint}
   launchAnEndpointFromSelection: Select an endpoint to launch
   noEndpointFoundForApp: No endpoint found for app
+  noServicesFound: No services found
+  loading: Loading...
+  loadingServices: Loading services...
+  selectCluster: Select a cluster
+  globalApps: Global Apps
diff --git a/pkg/app-launcher/pages/index.vue b/pkg/app-launcher/pages/index.vue
index 46eaa21..9c86d0f 100644
--- a/pkg/app-launcher/pages/index.vue
+++ b/pkg/app-launcher/pages/index.vue
@@ -1,27 +1,74 @@
 <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 AppLauncherCard from '../components/AppLauncherCard.vue';
 
 export default {
   components: {
     Loading,
     AppLauncherCard,
+    SortableTable,
+    ButtonDropDown
   },
   data() {
     return {
       servicesByCluster: [],
+      mockServicesByCluster: [],
+      clusterLoading: {},
       loading: true,
+      selectedCluster: null,
+      clusterOptions: [],
+      selectedView: 'grid',
+      favoritedServices: [],
+      tableHeaders: [
+        {
+          name: 'name',
+          label: 'Name',
+          value: 'metadata.name',
+          sort: 'metadata.name',
+          sortOrder: 'asc',
+        },
+        {
+          name: 'namespace',
+          label: 'Namespace',
+          value: 'metadata.namespace',
+        },
+        {
+          name: 'version',
+          label: 'Version',
+          value: 'metadata.labels["app.kubernetes.io/version"]',
+        },
+        {
+          name: 'helmChart',
+          label: 'Helm Chart',
+          value: 'metadata.labels["helm.sh/chart"]',
+        },
+        {
+          name: 'actions',
+          label: 'Actions',
+          value: 'actions',
+          align: 'right',
+        },
+      ],
     };
   },
   async mounted() {
-    console.log('mounted');
     try {
       const allClusters = await this.getClusters();
       this.servicesByCluster = await this.getServicesByCluster(allClusters);
+
+      // Set the first cluster as the selected cluster
+      if (this.servicesByCluster.length > 0) {
+        this.selectedCluster = this.servicesByCluster[0].id;
+      }
+      this.generateClusterOptions();
     } catch (error) {
       console.error('Error fetching clusters', error);
-    } finally{
+    } finally {
       this.loading = false;
     };
   },
@@ -31,70 +78,265 @@ export default {
         type: MANAGEMENT.CLUSTER,
       });
     },
+    async getMockServicesByCluster() {
+      return await Promise.resolve(mockServicesByCluster);
+    },
+    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);
+    },
     async getServicesByCluster(allClusters) {
       return await Promise.all(
         allClusters
           .filter((cluster) => cluster.isReady)
-          .map(async (cluster) => ({
-            name: `${this.$store.getters['i18n/t']('nav.group.cluster')} ${
-              cluster.spec.displayName
-            }`,
-            id: cluster.id,
-            services: (
-              await this.$store.dispatch('cluster/request', {
-                url: `/k8s/clusters/${cluster.id}/v1/services`,
-              })
-            ).data,
-          }))
+          .map(async (cluster) => {
+            const clusterData = {
+              name: `${this.$store.getters['i18n/t']('nav.group.cluster')} ${cluster.spec.displayName}`,
+              id: cluster.id,
+              services: [],
+              loading: true,
+              error: false,
+            };
+            try {
+              const services = (
+                await this.$store.dispatch('cluster/request', {
+                  url: `/k8s/clusters/${cluster.id}/v1/services`,
+                })
+              ).data;
+              clusterData.services = services;
+            } catch (error) {
+              console.error(`Error fetching services for cluster ${cluster.id}:`, error);
+              clusterData.error = true;
+            } finally {
+              clusterData.loading = false;
+            }
+            return clusterData;
+          })
+      );
+    },
+    generateClusterOptions() {
+      this.clusterOptions = this.servicesByCluster.map((cluster) => ({
+        label: cluster.name,
+        value: cluster.id,
+      }));
+    },
+    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
+      );
+      if (index !== -1) {
+        this.favoritedServices.splice(index, 1);
+      } else {
+        this.favoritedServices.push({
+          clusterId: this.selectedCluster,
+          service,
+        });
+      }
+    },
+    isFavorited(service, favoritedServices) {
+      return favoritedServices.some(
+        (favoritedService) =>
+          favoritedService.clusterId === this.selectedCluster &&
+          favoritedService.service.id === service.id
       );
     },
   },
+  computed: {
+    selectedClusterData() {
+      return this.getCluster(this.selectedCluster);
+    },
+    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',
 };
 </script>
 
 <template>
-  <Loading v-if="loading" />
+  <Loading v-if="loading" :label="$store.getters['i18n/t']('appLauncher.loading')" />
   <div v-else>
-    <div v-for="cluster in servicesByCluster" :key="cluster.id" style="margin-bottom: 2rem">
-      <h1 class="cluster-header hack-to-keep-header-above-app-launcher-card-dropdown-button">
-        {{ cluster.name }}
-      </h1>
+    <div v-if="favoritedServices.length > 0">
+      <h2>{{ t('appLauncher.globalApps') }}</h2>
       <div class="services-by-cluster-grid">
         <AppLauncherCard
-          v-for="service in cluster.services"
+          v-for="favoritedService in favoritedServices"
+          :key="`${favoritedService.clusterId}-${favoritedService.service.id}`"
+          :cluster-id="favoritedService.clusterId"
+          :service="favoritedService.service"
+          :favorited-services="favoritedServices"
+          @toggle-favorite="toggleFavorite"
+        />
+      </div>
+    </div>
+    <div class="cluster-header">
+      <h1>{{ selectedCluster ? getClusterName(selectedCluster) : $store.getters['i18n/t']('appLauncher.selectCluster') }}</h1>
+      <div class="cluster-actions">
+        <button class="icon-button" @click="toggleSortOrder" v-if="selectedView === 'grid'">
+          <i class="icon icon-sort" />
+        </button>
+        <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>
+    <div v-if="selectedCluster">
+      <div v-if="selectedView === 'grid'" class="services-by-cluster-grid">
+        <template v-if="sortedServices.length === 0">
+          <p>{{ $store.getters['i18n/t']('appLauncher.noServicesFound') }}</p>
+        </template>
+        <AppLauncherCard
+          v-else
+          v-for="service in sortedServices"
           :key="service.id"
-          :cluster-id="cluster.id"
+          :cluster-id="selectedCluster"
           :service="service"
+          :favorited-services="favoritedServices"
+          @toggle-favorite="toggleFavorite"
         />
       </div>
+      <div v-else-if="selectedView === 'list'">
+        <SortableTable
+          :rows="sortedServices"
+          :headers="tableHeaders"
+          :row-key="'id'"
+          :search="true"
+          :table-actions="false"
+          :row-actions="false"
+          :no-rows-text="$store.getters['i18n/t']('appLauncher.noServicesFound')"
+        >
+          <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>
+      </div>
+    </div>
+    <div v-else>
+      <p>{{ $store.getters['i18n/t']('appLauncher.noClusterSelected') }}</p>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+@import "@shell/assets/styles/fonts/_icons.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-bottom: 1rem;
   background: var(--header-bg);
   border-bottom: var(--header-border-size) solid var(--header-border);
-  display: flex;
   height: var(--header-height);
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-// HACK(cjshearer): this shouldn't be necessary, since the position:sticky in
-// the app-launcher page's header should make the header appear above its
-// siblings, but the AppLauncherCard's ButtonDropDown element seems to have the
-// wrong z-index by default, so we just force it to be below the header. See the
-// following slack conversation for previous discussion on this:
-// https://krumware.slack.com/archives/C053W936JAZ/p1691418985551309?thread_ts=1691099848.592889&cid=C053W936JAZ
-.hack-to-keep-header-above-app-launcher-card-dropdown-button {
-  z-index: 1;
+.cluster-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--primary);
+  font-size: 1.8rem;
+}
+
+.favorite-icon {
+  margin-right: 1rem;
+}
+
+.icon-button:hover {
+  color: var(--primary-hover);
 }
 </style>