diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index a742e5a2d..b4b8ec757 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
+    FormattedMessage: typeof import('./components/FormattedMessage.ts')['default']
     FragmentApikeyGenerateDialog: typeof import('./fragments/fragment/apikey/GenerateDialog.vue')['default']
     FragmentApikeyTable: typeof import('./fragments/fragment/apikey/Table.vue')['default']
     FragmentBuildCommit: typeof import('./fragments/fragment/BuildCommit.vue')['default']
diff --git a/next-ui/src/components/apikey/DeletionWarning.stories.ts b/next-ui/src/components/apikey/DeletionWarning.stories.ts
new file mode 100644
index 000000000..eed0095ef
--- /dev/null
+++ b/next-ui/src/components/apikey/DeletionWarning.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import DeletionWarning from './DeletionWarning.vue'
+
+const meta = {
+  component: DeletionWarning,
+  render: (args: object) => ({
+    components: { DeletionWarning },
+    setup() {
+      return { args }
+    },
+    template: '<DeletionWarning />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof DeletionWarning>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/next-ui/src/components/apikey/DeletionWarning.vue b/next-ui/src/components/apikey/DeletionWarning.vue
index f083e0dab..9e3a93d4d 100644
--- a/next-ui/src/components/apikey/DeletionWarning.vue
+++ b/next-ui/src/components/apikey/DeletionWarning.vue
@@ -4,16 +4,33 @@
     variant="tonal"
     class="mb-4"
   >
-    <div>The API key will be deleted from this server.</div>
-    <ul class="ps-8">
-      <li>
-        Any application or scripts using this API key will no longer be able to access the Komga
-        API.
-      </li>
-      <li>Authentication activity for this API key will be permanently deleted.</li>
-    </ul>
-    <div class="font-weight-bold mt-4">This action cannot be undone.</div>
+    <FormattedMessage :messageDescriptor="message">
+      <template #ul="Content">
+        <ul class="ps-8">
+          <component :is="Content" />
+        </ul>
+      </template>
+      <template #li="Content">
+        <li>
+          <component :is="Content" />
+        </li>
+      </template>
+      <template #b="Content">
+        <div class="font-weight-bold mt-4">
+          <component :is="Content" />
+        </div>
+      </template>
+    </FormattedMessage>
   </v-alert>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineMessage } from 'vue-intl'
+
+const message = defineMessage({
+  description: 'API Key deletion warning notice',
+  defaultMessage:
+    'The API key will be deleted from this server.<ul><li>Any application or scripts using this API key will no longer be able to access the Komga API.</li><li>Authentication activity for this API key will be permanently deleted.</li></ul><b>This action cannot be undone.</b>',
+  id: 'Y0cG3G',
+})
+</script>
diff --git a/next-ui/src/components/apikey/ForceSyncWarning.stories.ts b/next-ui/src/components/apikey/ForceSyncWarning.stories.ts
new file mode 100644
index 000000000..f8f45a227
--- /dev/null
+++ b/next-ui/src/components/apikey/ForceSyncWarning.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ForceSyncWarning from './ForceSyncWarning.vue'
+
+const meta = {
+  component: ForceSyncWarning,
+  render: (args: object) => ({
+    components: { ForceSyncWarning },
+    setup() {
+      return { args }
+    },
+    template: '<ForceSyncWarning />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof ForceSyncWarning>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/next-ui/src/components/apikey/ForceSyncWarning.vue b/next-ui/src/components/apikey/ForceSyncWarning.vue
index 53db33b7c..5b6c75913 100644
--- a/next-ui/src/components/apikey/ForceSyncWarning.vue
+++ b/next-ui/src/components/apikey/ForceSyncWarning.vue
@@ -4,11 +4,28 @@
     variant="tonal"
     class="mb-4"
   >
-    <ul class="ps-8">
-      <li>This will delete all sync history for this API key.</li>
-      <li>Your Kobo will sync everything on the next sync.</li>
-    </ul>
+    <FormattedMessage :messageDescriptor="message">
+      <template #ul="Content">
+        <ul class="ps-8">
+          <component :is="Content" />
+        </ul>
+      </template>
+      <template #li="Content">
+        <li>
+          <component :is="Content" />
+        </li>
+      </template>
+    </FormattedMessage>
   </v-alert>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineMessage } from 'vue-intl'
+
+const message = defineMessage({
+  description: 'API Key for sync warning notice',
+  defaultMessage:
+    '<ul><li>This will delete all sync history for this API key.</li><li>Your Kobo will sync everything on the next sync.</li></ul>',
+  id: 'D/yypj',
+})
+</script>
diff --git a/next-ui/src/components/user/DeletionWarning.stories.ts b/next-ui/src/components/user/DeletionWarning.stories.ts
new file mode 100644
index 000000000..eed0095ef
--- /dev/null
+++ b/next-ui/src/components/user/DeletionWarning.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import DeletionWarning from './DeletionWarning.vue'
+
+const meta = {
+  component: DeletionWarning,
+  render: (args: object) => ({
+    components: { DeletionWarning },
+    setup() {
+      return { args }
+    },
+    template: '<DeletionWarning />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof DeletionWarning>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/next-ui/src/components/user/DeletionWarning.vue b/next-ui/src/components/user/DeletionWarning.vue
index d35fce4b9..406ebbf37 100644
--- a/next-ui/src/components/user/DeletionWarning.vue
+++ b/next-ui/src/components/user/DeletionWarning.vue
@@ -4,13 +4,33 @@
     variant="tonal"
     class="mb-4"
   >
-    <div>The user account will be deleted from this server.</div>
-    <ul class="ps-8">
-      <li>The read progress for this user account will be permanently deleted.</li>
-      <li>Authentication activity for this user will be permanently deleted.</li>
-    </ul>
-    <div class="font-weight-bold mt-4">This action cannot be undone.</div>
+    <FormattedMessage :messageDescriptor="message">
+      <template #ul="Content">
+        <ul class="ps-8">
+          <component :is="Content" />
+        </ul>
+      </template>
+      <template #li="Content">
+        <li>
+          <component :is="Content" />
+        </li>
+      </template>
+      <template #b="Content">
+        <div class="font-weight-bold mt-4">
+          <component :is="Content" />
+        </div>
+      </template>
+    </FormattedMessage>
   </v-alert>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { defineMessage } from 'vue-intl'
+
+const message = defineMessage({
+  description: 'User deletion warning notice',
+  defaultMessage:
+    'The user account will be deleted from this server.<ul><li>The read progress for this user account will be permanently deleted.</li><li>Authentication activity for this user will be permanently deleted.</li></ul><b>This action cannot be undone.</b>',
+  id: 'q7gxLw',
+})
+</script>