diff --git a/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.snippet.svelte
new file mode 100644
index 00000000..e9b61065
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.snippet.svelte
@@ -0,0 +1,14 @@
+<script module>
+	import { Shield02Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+
+	export { ButtonText, ButtonIcon };
+</script>
+
+{#snippet ButtonText()}
+	Settings Button
+{/snippet}
+
+{#snippet ButtonIcon()}
+	<HugeiconsIcon size="24px" icon={Shield02Icon} color="var(--color-brand-burnt-orange)" />
+{/snippet}
diff --git a/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts
new file mode 100644
index 00000000..60b2a473
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.stories.ts
@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'svelte';
+import { SettingsNavigationButton } from '..';
+import { ButtonIcon, ButtonText } from './SettingsNavigationButton.stories.snippet.svelte';
+
+export default {
+	title: 'UI/SettingsNavigationButton',
+	component: SettingsNavigationButton,
+	tags: ['autodocs'],
+	render: (args: {
+		Component: SettingsNavigationButton;
+		props: ComponentProps<typeof SettingsNavigationButton>;
+	}) => ({
+		Component: SettingsNavigationButton,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {
+		children: ButtonText,
+		leadingIcon: ButtonIcon,
+		onclick: () => alert('clicked'),
+		hasTrailingIcon: true
+	}
+};
+
+export const Secondary = {
+	args: {
+		children: ButtonText,
+		leadingIcon: ButtonIcon,
+		onclick: () => alert('clicked'),
+		hasTrailingIcon: false
+	}
+};
diff --git a/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
new file mode 100644
index 00000000..202b5754
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface ISettingsNaviationButtonProps extends HTMLButtonAttributes {
+		leadingIcon?: Snippet;
+		children: Snippet;
+		onclick: () => void;
+		hasTrailingIcon: boolean;
+	}
+
+	let {
+		leadingIcon,
+		children,
+		onclick,
+		hasTrailingIcon = true,
+		...restProps
+	}: ISettingsNaviationButtonProps = $props();
+
+	const cBase = 'flex w-full items-center justify-between';
+</script>
+
+<button {...restProps} class={cn([cBase, restProps.class].join(' '))} {onclick}>
+	<div class="flex items-center gap-2">
+		{#if leadingIcon}
+			<div
+				class="bg-brand-burnt-orange-100 flex h-10 w-10 items-center justify-center rounded-full"
+			>
+				{@render leadingIcon?.()}
+			</div>
+		{/if}
+		<h3 class="text-black-800 font-semibold">
+			{@render children?.()}
+		</h3>
+	</div>
+	{#if hasTrailingIcon}
+		<HugeiconsIcon icon={ArrowRight01Icon} color="var(--color-black-400)" />
+	{/if}
+</button>
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
new file mode 100644
index 00000000..8d8f89ef
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -0,0 +1 @@
+export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';