diff --git a/docker-compose.yml b/docker-compose.yml
index 062441c6996..509302e193d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -84,6 +84,7 @@ services:
       - SHELLHUB_ENTERPRISE=${SHELLHUB_ENTERPRISE}
       - SHELLHUB_CLOUD=${SHELLHUB_CLOUD}
       - SHELLHUB_ANNOUNCEMENTS=${SHELLHUB_ANNOUNCEMENTS}
+      - SHELLHUB_TINYMCE_API_KEY=${TINYMCE_API_KEY}
       - SHELLHUB_VERSION=${SHELLHUB_VERSION}
       - SHELLHUB_SENTRY_DSN=${SHELLHUB_SENTRY_DSN}
       - SHELLHUB_PAYWALL=${SHELLHUB_PAYWALL}
diff --git a/ui/admin/src/components/Announcement/AnnouncementEdit.vue b/ui/admin/src/components/Announcement/AnnouncementEdit.vue
index 1c00b8efc4e..9a4369d394c 100644
--- a/ui/admin/src/components/Announcement/AnnouncementEdit.vue
+++ b/ui/admin/src/components/Announcement/AnnouncementEdit.vue
@@ -86,9 +86,7 @@ const snackbar = useSnackbar();
 const showDialog = ref(false);
 const md = new MarkdownIt();
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-const { turndown } = new TurndownService() as {
-  turndown: (input: string) => string;
-};
+const turndownService = new TurndownService() as { turndown: (input: string) => string };
 const tinyMceKey = computed(() => envVariables.tinyMceKey);
 const isTinyMceKeyEmpty = computed(() => tinyMceKey.value === "");
 const announcement = computed(() => announcementStore.announcement);
@@ -127,7 +125,7 @@ const onSubmit = async () => {
   }
 
   try {
-    const contentInMarkdown = turndown(contentInHtml.value);
+    const contentInMarkdown = turndownService.turndown(contentInHtml.value);
     await announcementStore.updateAnnouncement(announcement.value.uuid, {
       title: title.value ?? "",
       content: contentInMarkdown,
diff --git a/ui/admin/src/store/modules/announcement.ts b/ui/admin/src/store/modules/announcement.ts
index 4c18bd4b189..e89cdc62159 100644
--- a/ui/admin/src/store/modules/announcement.ts
+++ b/ui/admin/src/store/modules/announcement.ts
@@ -25,7 +25,7 @@ const useAnnouncementStore = defineStore("adminAnnouncement", () => {
 
   const fetchAnnouncementList = async (data: { page: number; perPage: number; orderBy: "asc" | "desc"; }) => {
     const res = await announcementApi.fetchAnnouncementList(data.page, data.perPage, data.orderBy);
-    announcements.value = res.data as IAdminAnnouncementShort[];
+    announcements.value = res.data as IAdminAnnouncementShort[] ?? [];
     announcementCount.value = parseInt(res.headers["x-total-count"] as string, 10);
   };
 
diff --git a/ui/admin/src/views/NewAnnouncement.vue b/ui/admin/src/views/NewAnnouncement.vue
index 2cfc44b413e..996054f4b9c 100644
--- a/ui/admin/src/views/NewAnnouncement.vue
+++ b/ui/admin/src/views/NewAnnouncement.vue
@@ -88,7 +88,7 @@ const tinyMceKeyIsEmpty = computed(() => tinyMceKey.value === "");
 const announcement = ref("");
 const announcementError = ref(false);
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-const { turndown } = new TurndownService() as { turndown: (input: string) => string };
+const turndownService = new TurndownService() as { turndown: (input: string) => string };
 
 watch(announcement, (val) => {
   if (val) announcementError.value = false;
@@ -107,7 +107,7 @@ const postAnnouncement = async () => {
   }
 
   try {
-    const contentInHtml = turndown(announcement.value);
+    const contentInHtml = turndownService.turndown(announcement.value);
     await announcementStore.createAnnouncement({
       title: title.value,
       content: contentInHtml,