diff --git a/packages/core/src/editor/structure.ts b/packages/core/src/editor/structure.ts
index c196621ea..8cbea2e9d 100644
--- a/packages/core/src/editor/structure.ts
+++ b/packages/core/src/editor/structure.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_FRAME_FILL } from '#core/constants'
 import type { NodeType, SceneNode } from '#core/scene-graph'
 
 import { wrapInAutoLayout as wrapInAutoLayoutImpl } from './structure/auto-layout-wrap'
@@ -50,7 +51,9 @@ export function createStructureActions(ctx: EditorContext) {
   }
 
   function frameSelection(selectedNodes: SceneNode[]) {
-    return wrapSelectionInContainer('FRAME', selectedNodes)
+    return wrapSelectionInContainer('FRAME', selectedNodes, {
+      fills: [structuredClone(DEFAULT_FRAME_FILL)]
+    })
   }
 
   function ungroupSelected(selectedNode: SceneNode | undefined) {
diff --git a/tests/engine/editor/structure/frame-selection.test.ts b/tests/engine/editor/structure/frame-selection.test.ts
index 6117905d2..e681be7cd 100644
--- a/tests/engine/editor/structure/frame-selection.test.ts
+++ b/tests/engine/editor/structure/frame-selection.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'bun:test'
 
+import { DEFAULT_FRAME_FILL } from '@open-pencil/core'
 import { createEditor } from '@open-pencil/core/editor'
 
 describe('frameSelection', () => {
@@ -34,13 +35,14 @@ describe('frameSelection', () => {
     expect(frame?.y).toBe(30)
     expect(frame?.width).toBe(110)
     expect(frame?.height).toBe(110)
+    expect(frame?.fills).toEqual([DEFAULT_FRAME_FILL])
     expect(first.parentId).toBe(frameId)
     expect(second.parentId).toBe(frameId)
     expect(editor.graph.getAbsolutePosition(first.id)).toEqual(beforeFirst)
     expect(editor.graph.getAbsolutePosition(second.id)).toEqual(beforeSecond)
   })
 
-  test('undo restores the original selection and parents', () => {
+  test('undo and redo restore frame selection state', () => {
     const editor = createEditor()
     const pageId = editor.state.currentPageId
     const first = editor.graph.createNode('RECTANGLE', pageId, { x: 20, y: 30, width: 40, height: 50 })
@@ -48,10 +50,21 @@ describe('frameSelection', () => {
 
     editor.select([first.id, second.id])
     editor.frameSelection()
+    const [frameId] = [...editor.state.selectedIds]
+
     editor.undo.undo()
 
     expect(editor.graph.getNode(first.id)?.parentId).toBe(pageId)
     expect(editor.graph.getNode(second.id)?.parentId).toBe(pageId)
     expect(editor.state.selectedIds).toEqual(new Set([first.id, second.id]))
+
+    editor.undo.redo()
+
+    const frame = editor.graph.getNode(frameId)
+    expect(frame?.type).toBe('FRAME')
+    expect(frame?.fills).toEqual([DEFAULT_FRAME_FILL])
+    expect(editor.graph.getNode(first.id)?.parentId).toBe(frameId)
+    expect(editor.graph.getNode(second.id)?.parentId).toBe(frameId)
+    expect(editor.state.selectedIds).toEqual(new Set([frameId]))
   })
 })