diff --git a/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue b/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
index 2d0ce2d..d2869cb 100644
--- a/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
+++ b/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
@@ -29,18 +29,20 @@ function looksLikeHtml(value: string) {
 onMounted(async () => {
   if (!mountEl.value) return;
   const [{ default: Editor }] = await Promise.all([
-    import("@toast-ui/editor"),
+    // @ts-ignore Package exports for ESM entry do not expose typings correctly.
+    import("@toast-ui/editor/dist/esm/index.js"),
     import("@toast-ui/editor/dist/toastui-editor.css"),
   ]);
 
   const initialValue = String(props.modelValue ?? "");
   const instance = new Editor({
     el: mountEl.value,
-    initialEditType: "markdown",
-    previewStyle: "vertical",
+    initialEditType: "wysiwyg",
+    previewStyle: "tab",
     initialValue: looksLikeHtml(initialValue) ? "" : initialValue,
     placeholder: props.placeholder ?? "Write with Markdown...",
     height: "520px",
+    hideModeSwitch: true,
     usageStatistics: false,
     events: {
       change: () => {
@@ -99,10 +101,6 @@ onBeforeUnmount(() => {
   border: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent);
 }
 
-.markdown-rich-editor :deep(.toastui-editor-mode-switch) {
-  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
-}
-
 .markdown-rich-editor :deep(.toastui-editor-main-container) {
   min-height: 360px;
 }