diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
index 050ccda06..be4f82e17 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
@@ -1,16 +1,13 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { vOnClickOutside } from '@vueuse/components';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import MessageFormatter from 'shared/helpers/MessageFormatter';
 import {
   renderInlineDiff,
   buildDiffBlocks,
 } from 'dashboard/helper/articleDiffHelper';
 
-import Button from 'dashboard/components-next/button/Button.vue';
-import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+import SidePanel from 'dashboard/components-next/side-panel/SidePanel.vue';
 
 const props = defineProps({
   article: {
@@ -19,10 +16,15 @@ const props = defineProps({
   },
 });
 
-const isOpen = defineModel({ type: Boolean, default: false });
-
 const { t } = useI18n();
 
+const panelRef = ref(null);
+
+defineExpose({
+  open: () => panelRef.value?.open(),
+  close: () => panelRef.value?.close(),
+});
+
 const liveTitle = computed(() => props.article?.title ?? '');
 const liveContent = computed(() => props.article?.content ?? '');
 const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
@@ -85,89 +87,56 @@ const blockClass = type => {
   }
   return 'border-transparent';
 };
-
-const close = () => {
-  isOpen.value = false;
-};
-
-const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
-
-useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
 </script>
 
 <template>
-  <TeleportWithDirection to="body">
-    <Transition
-      enter-active-class="transition-transform duration-200 ease-in-out"
-      leave-active-class="transition-transform duration-200 ease-in-out"
-      enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
-      enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
-      leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
-      leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
-    >
-      <aside
-        v-if="isOpen"
-        v-on-click-outside="dismissOnClickOutside"
-        class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
-      >
-        <header
-          class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
-        >
-          <div class="flex flex-col gap-1 min-w-0">
-            <div class="flex items-center gap-2">
-              <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
-              <h3 class="text-base font-medium leading-6 text-n-slate-12">
-                {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
-              </h3>
-            </div>
-            <p class="text-sm text-n-slate-11">
-              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
-            </p>
-          </div>
-          <Button
-            icon="i-lucide-x"
-            variant="ghost"
-            color="slate"
-            size="sm"
-            class="shrink-0 hover:text-n-slate-11"
-            @click="close"
-          />
-        </header>
-
-        <div
-          class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-if="titleChanged"
-            class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
-          >
-            <span
-              class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
-            >
-              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
-            </span>
-            <h1
-              class="text-lg font-semibold leading-snug text-n-slate-12"
-              v-html="titleDiff"
-            />
-          </div>
-
-          <div
-            v-if="contentChanged"
-            class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
-          >
-            <div
-              v-for="(block, index) in contentBlocks"
-              :key="index"
-              class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
-              :class="blockClass(block.type)"
-              v-html="renderMarkdown(block.md)"
-            />
-          </div>
-          <!-- eslint-enable vue/no-v-html -->
+  <SidePanel
+    ref="panelRef"
+    width="lg"
+    :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE')"
+  >
+    <template #header>
+      <div class="flex flex-col gap-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
+          </h3>
         </div>
-      </aside>
-    </Transition>
-  </TeleportWithDirection>
+        <p class="text-sm text-n-slate-11">
+          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <div
+        v-if="titleChanged"
+        class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
+      >
+        <span
+          class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
+        >
+          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
+        </span>
+        <h1
+          class="text-lg font-semibold leading-snug text-n-slate-12"
+          v-html="titleDiff"
+        />
+      </div>
+
+      <div
+        v-if="contentChanged"
+        class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
+      >
+        <div
+          v-for="(block, index) in contentBlocks"
+          :key="index"
+          class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
+          :class="blockClass(block.type)"
+          v-html="renderMarkdown(block.md)"
+        />
+      </div>
+    </div>
+  </SidePanel>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 6540b6460..cea89857b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -53,7 +53,7 @@ const hasPendingChanges = computed(
 const localTitle = ref(effectiveTitle());
 const localContent = ref(effectiveContent());
 
-const isDiffPanelOpen = ref(false);
+const diffPanelRef = ref(null);
 
 // Autosave 500ms after the last edit. It sends both title and content so an
 // edit to one never drops a recent edit to the other. `stop` cancels a queued
@@ -84,7 +84,7 @@ watch(
   [() => props.article?.id, hasPendingChanges],
   ([id, pending], [prevId, prevPending]) => {
     if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
-    if (prevPending && !pending) isDiffPanelOpen.value = false;
+    if (prevPending && !pending) diffPanelRef.value?.close();
   }
 );
 
@@ -156,9 +156,9 @@ const handleCreateArticle = event => {
         :is-saving="isSaving"
         @go-back="onClickGoBack"
         @preview-article="previewArticle"
-        @show-diff="isDiffPanelOpen = !isDiffPanelOpen"
+        @show-diff="diffPanelRef?.open()"
       />
-      <ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
+      <ArticleDiffPanel ref="diffPanelRef" :article="article" />
     </template>
     <template #content>
       <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
index d24ecadd4..67598fa41 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -260,7 +260,6 @@ const onDraftFailed = error => {
       <button
         v-if="hasPendingChanges"
         type="button"
-        data-diff-toggle
         :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
         class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
         @click="emit('showDiff')"