diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 708dd4e..5987c8e 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     About: typeof import('./src/components/settings/About.vue')['default']
+    AgentStackList: typeof import('./src/components/AgentStackList.vue')['default']
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
diff --git a/frontend/src/components/AgentStackList.vue b/frontend/src/components/AgentStackList.vue
new file mode 100644
index 0000000..f70d43f
--- /dev/null
+++ b/frontend/src/components/AgentStackList.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="wrapper">
+        <div class="group-header">
+            {{ agentName ?? this.$t("currentEndpoint") }}
+        </div>
+
+        <slot />
+    </div>
+
+    <hr>
+</template>
+
+<script setup lang="ts">
+interface AgentStackListProps {
+    agentName?: string;
+}
+
+defineProps<AgentStackListProps>();
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+
+.group-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    padding: 10px;
+
+    .dark & {
+        background-color: darken($color: $dark-header-bg, $amount: 1.90);
+        border-bottom: 0;
+    }
+}
+
+@media (max-width: 770px) {
+    .group-header {
+        margin: -20px;
+        margin-bottom: 10px;
+        padding: 5px;
+    }
+}
+
+</style>
\ No newline at end of file