diff --git a/web/app/src/components/TabItem.vue b/web/app/src/components/TabItem.vue
new file mode 100644
index 00000000..1cddade0
--- /dev/null
+++ b/web/app/src/components/TabItem.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { inject } from "vue";
+const props = defineProps({
+  title: String,
+});
+const selectedTitle = inject("selectedTitle");
+</script>
+
+<template>
+  <div v-show="selectedTitle === title">
+    <slot />
+  </div>
+</template>
diff --git a/web/app/src/components/TabsWrapper.vue b/web/app/src/components/TabsWrapper.vue
new file mode 100644
index 00000000..bf6f8aa8
--- /dev/null
+++ b/web/app/src/components/TabsWrapper.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { useSlots, ref, provide } from "vue";
+const slots = useSlots();
+
+const tabTitles = ref(slots.default().map((tab) => tab.props.title));
+const selectedTitle = ref(tabTitles.value[0]);
+provide("selectedTitle", selectedTitle);
+</script>
+
+<template>
+  <div>
+    <ul class="tabs-header">
+      <li
+        v-for="title in tabTitles"
+        :key="title"
+        class="tab-item"
+        :class="{ selected: selectedTitle === title }"
+        @click="selectedTitle = title"
+      >
+        {{ title }}
+      </li>
+    </ul>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.tabs-header {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 5px;
+}
+.tab-item {
+  flex: 1;
+  padding: 5px 0;
+  cursor: pointer;
+  user-select: none;
+}
+.tab-item.selected {
+  border-bottom: 1px solid white;
+}
+</style>