diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
new file mode 100644
index 00000000000..af6907cb270
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
@@ -0,0 +1,57 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('error').bool().widget(),
+      setting('action1').widget(text()).preset('Edit'),
+      setting('action2').widget(text()).preset('Delete'),
+      slot(),
+      slot('header').help('Meant to receive UiButton or other information'),
+    ]"
+    :presets="{
+      Normal: {
+        props: {
+          error: false,
+        },
+      },
+      Error: {
+        props: {
+          error: true,
+        },
+      },
+    }"
+  >
+    <UiSidePanel v-bind="properties" :error="properties.error">
+      <template #header>
+        <UiButton variant="tertiary" size="medium" accent="info" @click="toggle()">Toggle</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
+          {{ settings.action2 }}
+        </UiButton>
+      </template>
+      <VtsLoadingHero type="card" :disabled="isReady">
+        <UiCard v-if="!properties.error">
+          <div>Content 1</div>
+          <div>Content 1</div>
+          <div>Content 1</div>
+        </UiCard>
+      </VtsLoadingHero>
+    </UiSidePanel>
+  </ComponentStory>
+</template>
+
+<script setup lang="ts">
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiSidePanel from '@core/components/ui/panel/UiPanel.vue'
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const [isToggled, toggle] = useToggle()
+const isReady = computed(() => isToggled.value)
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
new file mode 100644
index 00000000000..bbb0c10e60d
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -0,0 +1,57 @@
+<!-- wip -->
+<template>
+  <div class="ui-panel" :class="{ error }">
+    <div v-if="slots.header" class="header">
+      <slot name="header" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  error?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  header?(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
+
+  .header {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+    background-color: var(--color-neutral-background-primary);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1.6rem;
+    padding: 0.4rem 1.6rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem;
+    gap: 0.8rem;
+  }
+
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    .content {
+      padding-top: 15rem;
+    }
+  }
+}
+</style>