diff --git a/packages/renderer/src/lib/compose/ComposeDetails.spec.ts b/packages/renderer/src/lib/compose/ComposeDetails.spec.ts
index f637073f823bf..f9a085c501bae 100644
--- a/packages/renderer/src/lib/compose/ComposeDetails.spec.ts
+++ b/packages/renderer/src/lib/compose/ComposeDetails.spec.ts
@@ -46,6 +46,17 @@ test('Simple test that compose name is displayed', async () => {
   expect(screen.getByText('foobar')).toBeInTheDocument();
 });
 
+// Test that compose summary is clickable and loadable
+test('Simple test that compose summary is clickable and loadable', async () => {
+  render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
+  // Click on the summary href
+  const summaryHref = screen.getByRole('link', { name: 'Summary' });
+  await fireEvent.click(summaryHref);
+
+  // Check that 'Name:' is displayed meaning it has loaded correctly.
+  expect(screen.getByText('Name:')).toBeInTheDocument();
+});
+
 test('Test that compose kube tab is clickable and loadable', async () => {
   render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
   const kubeHref = screen.getByRole('link', { name: 'Kube' });
diff --git a/packages/renderer/src/lib/compose/ComposeDetails.svelte b/packages/renderer/src/lib/compose/ComposeDetails.svelte
index 899e31c28668c..cc30b0be72128 100644
--- a/packages/renderer/src/lib/compose/ComposeDetails.svelte
+++ b/packages/renderer/src/lib/compose/ComposeDetails.svelte
@@ -13,6 +13,7 @@ import ComposeDetailsKube from './ComposeDetailsKube.svelte';
 import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import Tab from '../ui/Tab.svelte';
+import ComposeDetailsSummary from './ComposeDetailsSummary.svelte';
 
 export let composeName: string;
 export let engineId: string;
@@ -83,10 +84,14 @@ onDestroy(() => {
       <ComposeActions compose="{compose}" detailed="{true}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
+      <Tab title="Summary" url="summary" />
       <Tab title="Logs" url="logs" />
       <Tab title="Kube" url="kube" />
     </svelte:fragment>
     <svelte:fragment slot="content">
+      <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
+        <ComposeDetailsSummary compose="{compose}" />
+      </Route>
       <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
         <ComposeDetailsLogs compose="{compose}" />
       </Route>
diff --git a/packages/renderer/src/lib/compose/ComposeDetailsSummary.svelte b/packages/renderer/src/lib/compose/ComposeDetailsSummary.svelte
new file mode 100644
index 0000000000000..a8e65f4c26b7e
--- /dev/null
+++ b/packages/renderer/src/lib/compose/ComposeDetailsSummary.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+import { router } from 'tinro';
+
+import type { ComposeInfoUI } from './ComposeInfoUI';
+
+export let compose: ComposeInfoUI;
+
+function openContainer(containerID: string) {
+  router.goto(`/containers/${containerID}/logs`);
+}
+</script>
+
+<div class="flex px-5 py-4 flex-col">
+  <div class="w-full">
+    <table>
+      <tr>
+        <td class="pt-2 pr-2">Name:</td>
+        <td class="pt-2 pr-2">{compose.name}</td>
+      </tr>
+    </table>
+  </div>
+  {#if compose.containers.length > 0}
+    <div class="w-full my-12">
+      <span>Containers using this Compose group:</span>
+      <table>
+        {#each compose.containers as container}
+          <tr class="cursor-pointer" on:click="{() => openContainer(container.id)}">
+            <td class="pt-2 pr-2">{container.name}</td>
+            <td class="pt-2 pr-2">{container.id}</td>
+          </tr>
+        {/each}
+      </table>
+    </div>
+  {/if}
+</div>