diff --git a/packages/stage-pages/src/pages/settings/memory/index.vue b/packages/stage-pages/src/pages/settings/memory/index.vue
index 50dd48c78..fef970984 100644
--- a/packages/stage-pages/src/pages/settings/memory/index.vue
+++ b/packages/stage-pages/src/pages/settings/memory/index.vue
@@ -1,31 +1,9 @@
 <script setup lang="ts">
-import { Callout } from '@proj-airi/stage-ui/components'
+import { WIP } from '@proj-airi/stage-ui/components'
 </script>
 
 <template>
-  <div>
-    <Callout
-      label="In development, needs your help!"
-      theme="orange"
-    >
-      <div>
-        This functionality is still under development. If you have any suggestions or would like to contribute, please reach out to us on our <a underline decoration-dotted href="https://github.com/moeru-ai/airi/issues">GitHub issues page</a>.
-        The source code of this page is located at <a underline decoration-dotted href="https://github.com/moeru-ai/airi/tree/main/apps/stage-web/src/pages/settings/memory/index.vue">here</a>.
-      </div>
-    </Callout>
-  </div>
-  <div
-    v-motion
-    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
-    :initial="{ scale: 0.9, opacity: 0, y: 15 }"
-    :enter="{ scale: 1, opacity: 1, y: 0 }"
-    :duration="500"
-    size-60
-    flex items-center justify-center
-  >
-    <div text="60" i-solar:leaf-bold-duotone />
-  </div>
+  <WIP />
 </template>
 
 <route lang="yaml">
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue b/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
index e40ede6e7..fef970984 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-// import { useServerStore } from '@proj-airi/stage-ui/stores/server'
-
-// const serverStore = useServerStore()
+import { WIP } from '@proj-airi/stage-ui/components'
 </script>
 
 <template>
-  <div />
+  <WIP />
 </template>
 
 <route lang="yaml">
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue b/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
index 41e878ce0..fef970984 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-// import { useServerStore } from '@proj-airi/stage-ui/stores/servers'
-
-// const serverStore = useServerStore()
+import { WIP } from '@proj-airi/stage-ui/components'
 </script>
 
 <template>
-  <div />
+  <WIP />
 </template>
 
 <route lang="yaml">
diff --git a/packages/stage-ui/src/components/misc/WIP.vue b/packages/stage-ui/src/components/misc/WIP.vue
index e6412a2f4..a821a5f79 100644
--- a/packages/stage-ui/src/components/misc/WIP.vue
+++ b/packages/stage-ui/src/components/misc/WIP.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
+import Callout from '../layouts/Callout.vue'
+
 const { t } = useI18n()
 </script>
 
 <template>
-  <div
-    flex="~ col" gap-3
-    rounded-lg border="2 orange-200 dark:orange-800"
-    bg="orange-50 dark:orange-950/30"
-    p-6
-  >
-    <div flex items-center gap-2 text="orange-600 dark:orange-400">
-      <div i-solar:usb-circle-bold-duotone text-xl />
-      <h2 text-lg font-semibold>
-        {{ t('settings.wip.title') }}
-      </h2>
-    </div>
+  <Callout theme="orange">
+    <template #label>
+      <div flex items-center gap-2 text="orange-600 dark:orange-400">
+        <div i-solar:usb-circle-bold-duotone text-xl />
+        <span font-semibold>
+          {{ t('settings.wip.title') }}
+        </span>
+      </div>
+    </template>
     <p text="sm neutral-700 dark:neutral-300">
       {{ t('settings.wip.description') }}
     </p>
-  </div>
+  </Callout>
 </template>