diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
new file mode 100644
index 0000000000..1200609d46
--- /dev/null
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-row>
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
+      <router-link :to="card.route">
+        <v-hover>
+          <template v-slot:default="{ isHovering, props }">
+            <v-card :height="200" class="pa-3 pt-6" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
+              <v-img
+                class="d-inline-block ml-3 mb-2"
+                width="35"
+                :src="baseURL + 'images/icons/' + card.icon"
+                :alt="card.title"
+                :style="{
+                  filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
+                  lineHeight: 1,
+                }"
+              />
+              <v-card-title class="d-inline-block">
+                {{ card.title }}
+                <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
+                  {{ tag }}
+                </v-chip>
+              </v-card-title>
+              <v-card-text class="mt-2" v-bind="props"> {{ card.excerpt }} </v-card-text>
+            </v-card>
+          </template></v-hover
+        >
+      </router-link>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import type { ApplicationCard } from "@/utils/types";
+
+export default defineComponent({
+  name: "ApplicationCards",
+  props: {
+    cards: {
+      type: Object as PropType<ApplicationCard[]>,
+      required: true,
+    },
+  },
+  setup() {
+    const baseURL = import.meta.env.BASE_URL;
+    return {
+      baseURL,
+    };
+  },
+});
+</script>
+
+<style scoped>
+a {
+  text-decoration: none !important;
+}
+
+.card-opacity {
+  background-color: rgba(125, 227, 200, 0.12);
+}
+</style>
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 881c7398fa..da82544b2c 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -14,3 +14,11 @@ export interface IPublicConfig {
   gw6?: string;
   domain?: string;
 }
+
+export interface ApplicationCard {
+  title: string;
+  excerpt: string;
+  icon: string;
+  route: string;
+  tags?: string[];
+}
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index 525bda1f88..c1ce6aea26 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -4,50 +4,21 @@
       <v-icon size="30" class="pr-3">mdi-group</v-icon>
       <v-card-title class="pa-0">Orchestrators</v-card-title>
     </v-card>
-    <v-row>
-      <v-col v-for="card in cards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="200" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-    </v-row>
+    <ApplicationCards :cards="cards" />
   </view-layout>
 </template>
 <script lang="ts">
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  flare?: string;
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "Orchestrators View",
+  components: {
+    ApplicationCards,
+  },
   setup() {
-    const cards: Card[] = [
+    const cards: ApplicationCard[] = [
       {
         title: "Kubernetes",
         excerpt:
@@ -63,22 +34,10 @@ export default {
         route: DashboardRoutes.Orchestrators.CapRover,
       },
     ];
-    const baseURL = import.meta.env.BASE_URL;
 
     return {
       cards,
-      baseURL,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 0bab5d14d8..0a9d47f941 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -5,56 +5,25 @@
       <v-card-title class="pa-0">Applications</v-card-title>
     </v-card>
     <v-text-field label="Search Applications" v-model="searchItem" class="mb-5" clearable></v-text-field>
-    <v-row>
-      <v-col sm="12" md="6" lg="4" v-for="card in filteredCards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="100%" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
-                    {{ tag }}
-                  </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-      <p v-if="filteredCards.length === 0" class="mx-3 mb-3">No solution was found with the provided search query.</p>
-    </v-row>
+    <ApplicationCards :cards="filteredCards" />
+    <p v-if="filteredCards.length === 0" class="mx-3 mb-3">No solution was found with the provided search query.</p>
   </view-layout>
 </template>
 
 <script lang="ts">
 import { computed, ref } from "vue";
 
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  tags?: string[];
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "SolutionsView",
+  components: {
+    ApplicationCards,
+  },
   setup() {
-    let cards: Card[] = [
+    let cards: ApplicationCard[] = [
       {
         title: "Nostr",
         excerpt:
@@ -171,7 +140,6 @@ export default {
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
 
-    const baseURL = import.meta.env.BASE_URL;
     const searchItem = ref("");
     const filteredCards = computed(() =>
       cards.filter(n => n.title.toLocaleLowerCase().includes(searchItem.value.toLocaleLowerCase())),
@@ -179,20 +147,9 @@ export default {
 
     return {
       cards,
-      baseURL,
       searchItem,
       filteredCards,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index 916a448ce0..bbb348944d 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -4,50 +4,22 @@
       <v-icon size="30" class="pr-3">mdi-television</v-icon>
       <v-card-title class="pa-0">Virtual Machines</v-card-title>
     </v-card>
-    <v-row>
-      <v-col v-for="card in cards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="200" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-    </v-row>
+    <ApplicationCards :cards="cards" />
   </view-layout>
 </template>
 <script lang="ts">
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  flare?: string;
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "VmsView",
+  components: {
+    ApplicationCards,
+  },
+
   setup() {
-    const cards: Card[] = [
+    const cards: ApplicationCard[] = [
       {
         title: "Full Virtual Machine",
         excerpt:
@@ -63,22 +35,10 @@ export default {
         route: DashboardRoutes.VirtualMachines.MicroVirtualMachine,
       },
     ];
-    const baseURL = import.meta.env.BASE_URL;
 
     return {
       cards,
-      baseURL,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>