diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index f5e398916..1cf2b7125 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -122,10 +122,16 @@ const MemoEditorImpl: React.FC<Props> = ({
     <MemoEditorContext.Provider value={legacyContextValue}>
       <FocusModeOverlay isActive={state.ui.isFocusMode} onToggle={actions.toggleFocusMode} />
 
-      <div className={cn("memo-editor-wrapper", state.ui.isFocusMode && "focus-mode", className)}>
-        <EditorToolbar onSave={handleSave} onCancel={onCancel} />
+      <div
+        className={cn(
+          "group relative w-full flex flex-col justify-start items-start bg-card px-4 pt-3 pb-2 rounded-lg border border-border",
+          state.ui.isFocusMode && "focus-mode",
+          className,
+        )}
+      >
         <EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} />
         <EditorMetadata />
+        <EditorToolbar onSave={handleSave} onCancel={onCancel} />
       </div>
     </MemoEditorContext.Provider>
   );