diff --git a/src/frontend/src/lib/components/assets/Asset.svelte b/src/frontend/src/lib/components/assets/Asset.svelte
index 5a0c99bb0..31cc940e9 100644
--- a/src/frontend/src/lib/components/assets/Asset.svelte
+++ b/src/frontend/src/lib/components/assets/Asset.svelte
@@ -10,12 +10,13 @@
 	import { formatToDate } from '$lib/utils/date.utils';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import DataToolbar from '$lib/components/data/DataToolbar.svelte';
 	import { toasts } from '$lib/stores/toasts.store';
 	import { deleteAsset } from '$lib/api/satellites.api';
 	import { satelliteUrl } from '$lib/utils/satellite.utils';
 	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
 	import ExternalLink from '$lib/components/ui/ExternalLink.svelte';
+	import DataHeader from '$lib/components/data/DataHeader.svelte';
+	import DataDelete from '$lib/components/data/DataDelete.svelte';
 
 	const { store, resetData }: DataContext<AssetNoContent> =
 		getContext<DataContext<AssetNoContent>>(DATA_CONTEXT_KEY);
@@ -68,7 +69,18 @@
 	};
 </script>
 
-<p class="title doc">{key ?? ''}</p>
+<div class="title doc">
+	<DataHeader>
+		{key ?? ''}
+
+		<svelte:fragment slot="actions">
+			<DataDelete {deleteData}>
+				<svelte:fragment slot="title">{$i18n.asset.delete}</svelte:fragment>
+				{key}
+			</DataDelete>
+		</svelte:fragment>
+	</DataHeader>
+</div>
 
 {#if nonNullish(asset)}
 	<article class="doc">
@@ -126,11 +138,6 @@
 				{formatToDate(asset.updated_at)}
 			</Value>
 		</div>
-
-		<DataToolbar {deleteData}>
-			<svelte:fragment slot="del-title">{$i18n.asset.delete}</svelte:fragment>
-			<svelte:fragment slot="del-content">{key}</svelte:fragment>
-		</DataToolbar>
 	</article>
 {/if}
 
diff --git a/src/frontend/src/lib/components/assets/Assets.svelte b/src/frontend/src/lib/components/assets/Assets.svelte
index f735be580..412624c3f 100644
--- a/src/frontend/src/lib/components/assets/Assets.svelte
+++ b/src/frontend/src/lib/components/assets/Assets.svelte
@@ -13,7 +13,7 @@
 	import { DATA_CONTEXT_KEY } from '$lib/types/data.context';
 	import DataPaginator from '$lib/components/data/DataPaginator.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import DataList from '$lib/components/data/DataList.svelte';
+	import DataCollectionHeader from '$lib/components/data/DataCollectionHeader.svelte';
 	import { listParamsStore } from '$lib/stores/data.store';
 	import CollectionEmpty from '$lib/components/collections/CollectionEmpty.svelte';
 	import type { ListParams } from '$lib/types/list';
@@ -97,9 +97,9 @@
 </script>
 
 <div class="title">
-	<DataList>
+	<DataCollectionHeader>
 		{$i18n.storage.assets}
-	</DataList>
+	</DataCollectionHeader>
 </div>
 
 {#if !emptyCollection}
diff --git a/src/frontend/src/lib/components/core/Actions.svelte b/src/frontend/src/lib/components/core/Actions.svelte
index dec45e3af..4dc468513 100644
--- a/src/frontend/src/lib/components/core/Actions.svelte
+++ b/src/frontend/src/lib/components/core/Actions.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	import Popover from '$lib/components/ui/Popover.svelte';
 	import IconMore from '$lib/components/icons/IconMore.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
 
-	export let visible: boolean | undefined;
+	export let visible: boolean | undefined = undefined;
 
 	let button: HTMLButtonElement | undefined;
 </script>
 
-<button class="square" bind:this={button} on:click={() => (visible = true)}><IconMore /></button>
+<button
+	class="square"
+	bind:this={button}
+	on:click={() => (visible = true)}
+	aria-label={$i18n.core.more}><IconMore /></button
+>
 
 <Popover bind:visible anchor={button} direction="rtl">
 	<div class="container">
diff --git a/src/frontend/src/lib/components/core/Confirmation.svelte b/src/frontend/src/lib/components/core/Confirmation.svelte
index e801ff498..50ca6527e 100644
--- a/src/frontend/src/lib/components/core/Confirmation.svelte
+++ b/src/frontend/src/lib/components/core/Confirmation.svelte
@@ -30,6 +30,7 @@
 <style lang="scss">
 	.content {
 		padding: var(--padding-2x);
+		max-width: 100%;
 	}
 
 	h3 {
diff --git a/src/frontend/src/lib/components/data/DataActions.svelte b/src/frontend/src/lib/components/data/DataActions.svelte
new file mode 100644
index 000000000..216681683
--- /dev/null
+++ b/src/frontend/src/lib/components/data/DataActions.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Popover from '$lib/components/ui/Popover.svelte';
+	import IconMore from '$lib/components/icons/IconMore.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let visible: boolean | undefined = undefined;
+
+	let button: HTMLButtonElement | undefined;
+</script>
+
+<button
+	class="icon"
+	aria-label={$i18n.core.more}
+	type="button"
+	on:click={() => (visible = true)}
+	bind:this={button}><IconMore size="20px" /></button
+>
+
+<Popover bind:visible anchor={button} direction="rtl">
+	<div class="container">
+		<slot />
+	</div>
+</Popover>
+
+<style lang="scss">
+	@use '../../styles/mixins/overlay';
+
+	@include overlay.popover-container;
+
+	button.icon {
+		padding: 0;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataCollectionHeader.svelte b/src/frontend/src/lib/components/data/DataCollectionHeader.svelte
new file mode 100644
index 000000000..1d57c9214
--- /dev/null
+++ b/src/frontend/src/lib/components/data/DataCollectionHeader.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import DataOrder from '$lib/components/data/DataOrder.svelte';
+	import DataFilter from '$lib/components/data/DataFilter.svelte';
+	import DataActions from '$lib/components/data/DataActions.svelte';
+	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
+	import { getContext } from 'svelte';
+	import { nonNullish } from '@dfinity/utils';
+	import { fade } from 'svelte/transition';
+
+	const { store }: RulesContext = getContext<RulesContext>(RULES_CONTEXT_KEY);
+
+	let collectionSelected = false;
+	$: collectionSelected = nonNullish($store.rule);
+</script>
+
+<div class="actions">
+	<span><slot /></span>
+
+	{#if collectionSelected}
+		<div transition:fade>
+			<DataFilter />
+			<DataOrder />
+			<!--			<DataActions>TODO</DataActions>-->
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.actions {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	div {
+		display: flex;
+		gap: var(--padding-1_5x);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataDelete.svelte b/src/frontend/src/lib/components/data/DataDelete.svelte
index 7e4d5bcf7..22b2b0ef7 100644
--- a/src/frontend/src/lib/components/data/DataDelete.svelte
+++ b/src/frontend/src/lib/components/data/DataDelete.svelte
@@ -15,7 +15,6 @@
 
 	export let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
 
-	let button: HTMLButtonElement | undefined;
 	let visible: boolean | undefined;
 
 	const close = () => (visible = false);
@@ -56,12 +55,8 @@
 	};
 </script>
 
-<button
-	class="square"
-	aria-label={$i18n.core.delete}
-	type="button"
-	on:click={() => (visible = true)}
-	bind:this={button}><IconDelete size="20px" /></button
+<button class="menu" type="button" on:click={() => (visible = true)}
+	><IconDelete size="20px" /> {$i18n.core.delete}</button
 >
 
 <Confirmation bind:visible on:junoYes={deleteSelectedData} on:junoNo={close}>
@@ -72,3 +67,11 @@
 		<p><slot /></p>
 	</Value>
 </Confirmation>
+
+<style lang="scss">
+	@use '../../styles/mixins/text';
+
+	p {
+		@include text.truncate;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataHeader.svelte b/src/frontend/src/lib/components/data/DataHeader.svelte
new file mode 100644
index 000000000..bbb620b40
--- /dev/null
+++ b/src/frontend/src/lib/components/data/DataHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" generics="T">
+	import DataActions from '$lib/components/data/DataActions.svelte';
+	import {
+		DATA_CONTEXT_KEY,
+		type DataContext,
+		type DataStoreAction
+	} from '$lib/types/data.context';
+	import { getContext } from 'svelte';
+	import { nonNullish } from '@dfinity/utils';
+	import { fade } from 'svelte/transition';
+
+	const { store }: DataContext<T> = getContext<DataContext<T>>(DATA_CONTEXT_KEY);
+
+	let action: DataStoreAction | undefined;
+	$: action = $store?.action;
+</script>
+
+{#if nonNullish(action)}
+	<div class="actions" transition:fade>
+		<span><slot /></span>
+
+		<DataActions>
+			<slot name="actions" />
+		</DataActions>
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../styles/mixins/text';
+
+	.actions {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--padding-2x);
+	}
+
+	span {
+		@include text.truncate;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataList.svelte b/src/frontend/src/lib/components/data/DataList.svelte
deleted file mode 100644
index c467b3b48..000000000
--- a/src/frontend/src/lib/components/data/DataList.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import DataOrder from '$lib/components/data/DataOrder.svelte';
-	import DataFilter from '$lib/components/data/DataFilter.svelte';
-</script>
-
-<div class="sort">
-	<span><slot /></span>
-
-	<div>
-		<DataFilter />
-		<DataOrder />
-	</div>
-</div>
-
-<style lang="scss">
-	.sort {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	div {
-		display: flex;
-		gap: var(--padding-1_5x);
-	}
-</style>
diff --git a/src/frontend/src/lib/components/data/DataToolbar.svelte b/src/frontend/src/lib/components/data/DataToolbar.svelte
deleted file mode 100644
index fb9783d5b..000000000
--- a/src/frontend/src/lib/components/data/DataToolbar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import DataDelete from '$lib/components/data/DataDelete.svelte';
-	import type { Principal } from '@dfinity/principal';
-
-	export let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
-</script>
-
-<div class="toolbar">
-	<DataDelete {deleteData}>
-		<slot name="del-title" slot="title" />
-		<slot name="del-content" />
-	</DataDelete>
-</div>
-
-<style lang="scss">
-	@use '../../styles/mixins/collections';
-
-	.toolbar {
-		@include collections.toolbar;
-
-		flex: 2;
-		align-items: flex-end;
-	}
-</style>
diff --git a/src/frontend/src/lib/components/docs/Doc.svelte b/src/frontend/src/lib/components/docs/Doc.svelte
index 6ba69d450..4fb8b16cb 100644
--- a/src/frontend/src/lib/components/docs/Doc.svelte
+++ b/src/frontend/src/lib/components/docs/Doc.svelte
@@ -7,18 +7,15 @@
 	import type { Doc } from '$declarations/satellite/satellite.did';
 	import { getContext } from 'svelte';
 	import type { Principal } from '@dfinity/principal';
-	import { fromNullable, isNullish, nonNullish } from '@dfinity/utils';
+	import { fromNullable, nonNullish } from '@dfinity/utils';
 	import { fromArray } from '$lib/utils/did.utils';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import { formatToDate } from '$lib/utils/date.utils';
 	import Json from '$lib/components/ui/Json.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import { deleteDoc } from '$lib/api/satellites.api';
-	import { toasts } from '$lib/stores/toasts.store';
-	import DataToolbar from '$lib/components/data/DataToolbar.svelte';
 
-	const { store, resetData }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
+	const { store }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
 
 	let key: string | undefined;
 	$: key = $store?.key;
@@ -36,24 +33,6 @@
 	let obj: unknown | undefined = undefined;
 	$: (async () =>
 		(obj = nonNullish(doc) && nonNullish(doc?.data) ? await fromArray(doc.data) : undefined))();
-
-	let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
-	$: deleteData = async (params: { collection: string; satelliteId: Principal }) => {
-		if (isNullish(key) || key === '') {
-			toasts.error({
-				text: $i18n.errors.key_invalid
-			});
-			return;
-		}
-
-		await deleteDoc({
-			...params,
-			key,
-			doc
-		});
-
-		resetData();
-	};
 </script>
 
 {#if nonNullish(doc) && action === 'view'}
@@ -96,11 +75,6 @@
 				<div class="json"><Json json={obj} /></div>
 			</Value>
 		</div>
-
-		<DataToolbar {deleteData}>
-			<svelte:fragment slot="del-title">{$i18n.document.delete}</svelte:fragment>
-			<svelte:fragment slot="del-content">{key}</svelte:fragment>
-		</DataToolbar>
 	</article>
 {/if}
 
diff --git a/src/frontend/src/lib/components/docs/DocForm.svelte b/src/frontend/src/lib/components/docs/DocForm.svelte
index d4cb2241b..783cf68f1 100644
--- a/src/frontend/src/lib/components/docs/DocForm.svelte
+++ b/src/frontend/src/lib/components/docs/DocForm.svelte
@@ -14,13 +14,18 @@
 		type DataStoreAction,
 		type DataContext
 	} from '$lib/types/data.context';
-	import type Doc from './Doc.svelte';
 	import IconAutoRenew from '$lib/components/icons/IconAutoRenew.svelte';
 	import { fade } from 'svelte/transition';
 	import Value from '$lib/components/ui/Value.svelte';
+	import DataHeader from '$lib/components/data/DataHeader.svelte';
+	import type { Doc } from '$declarations/satellite/satellite.did';
+	import type { Principal } from '@dfinity/principal';
+	import { deleteDoc } from '$lib/api/satellites.api';
+	import DataDelete from '$lib/components/data/DataDelete.svelte';
 
 	const { store, reload }: RulesContext = getContext<RulesContext>(RULES_CONTEXT_KEY);
-	const { store: docsStore }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
+	const { store: docsStore, resetData }: DataContext<Doc> =
+		getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
 
 	let action: DataStoreAction | undefined;
 	$: action = $docsStore?.action;
@@ -91,15 +96,49 @@
 	$: isActive = action === 'create' || action === 'edit';
 
 	const generateKey = () => (key = nanoid());
+
+	/**
+	 * Delete data
+	 */
+
+	let doc: Doc | undefined;
+	$: doc = $docsStore?.data;
+
+	let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
+	$: deleteData = async (params: { collection: string; satelliteId: Principal }) => {
+		if (isNullish(key) || key === '') {
+			toasts.error({
+				text: $i18n.errors.key_invalid
+			});
+			return;
+		}
+
+		await deleteDoc({
+			...params,
+			key,
+			doc
+		});
+
+		resetData();
+	};
 </script>
 
-<p class="title doc-form">
+<div class="title doc-form">
 	{#if isActive}
 		{$i18n.document_form.title_add_new_document}
 	{:else}
-		&ZeroWidthSpace;
+		<DataHeader>
+			{key ?? ''}
+
+			<svelte:fragment slot="actions">
+				<DataDelete {deleteData}>
+					<svelte:fragment slot="title">{$i18n.document.delete}</svelte:fragment>
+					{key}
+				</DataDelete>
+			</svelte:fragment>
+		</DataHeader>
 	{/if}
-</p>
+</div>
 
 {#if isActive}
 	<article class="doc-form" in:fade>
diff --git a/src/frontend/src/lib/components/docs/Docs.svelte b/src/frontend/src/lib/components/docs/Docs.svelte
index 006ded36c..7ce200cfc 100644
--- a/src/frontend/src/lib/components/docs/Docs.svelte
+++ b/src/frontend/src/lib/components/docs/Docs.svelte
@@ -11,7 +11,7 @@
 	import { DATA_CONTEXT_KEY, type DataContext } from '$lib/types/data.context';
 	import DataPaginator from '$lib/components/data/DataPaginator.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import DataList from '$lib/components/data/DataList.svelte';
+	import DataCollectionHeader from '$lib/components/data/DataCollectionHeader.svelte';
 	import { listParamsStore } from '$lib/stores/data.store';
 	import CollectionEmpty from '$lib/components/collections/CollectionEmpty.svelte';
 	import type { ListParams } from '$lib/types/list';
@@ -85,9 +85,9 @@
 </script>
 
 <div class="title">
-	<DataList>
+	<DataCollectionHeader>
 		{$i18n.datastore.documents}
-	</DataList>
+	</DataCollectionHeader>
 </div>
 
 {#if !emptyCollection}
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index bf7579457..888121ccb 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -35,7 +35,8 @@
 		"export": "Export",
 		"start": "Start",
 		"stop": "Stop",
-		"save": "Save"
+		"save": "Save",
+		"more": "More options"
 	},
 	"canisters": {
 		"top_up": "Top-up",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
index c959bf448..3e2e0fc25 100644
--- a/src/frontend/src/lib/i18n/zh-cn.json
+++ b/src/frontend/src/lib/i18n/zh-cn.json
@@ -35,7 +35,8 @@
 		"export": "导出",
 		"start": "启动",
 		"stop": "停止",
-		"save": "Save"
+		"save": "Save",
+		"more": "More options"
 	},
 	"canisters": {
 		"top_up": "充值",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 795b1a061..25734f1b4 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -39,6 +39,7 @@ interface I18nCore {
 	start: string;
 	stop: string;
 	save: string;
+	more: string;
 }
 
 interface I18nCanisters {