diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index 0a162218f..114fc589c 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -40,6 +40,10 @@ import {
   Props,
   Events,
   Styles,
+  Layout,
+  Canvas,
+  CanvasContainer,
+  CanvasFooter
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -50,7 +54,7 @@ export default {
     scripts: [],
     styles: []
   },
-  layout: { id: 'engine.layout' },
+  layout: Layout,
   themes: [
     {
       id: 'engine.theme.light'
@@ -90,10 +94,12 @@ export default {
     Robot
   ],
   dsls: [{ id: 'engine.dsls.dslvue' }],
-  settings: [
-    Props,
-    Styles,
-    Events
-  ],
-  canvas: {}
+  settings: [Props, Styles, Events],
+  canvas: {
+    ...Canvas,
+    component: {
+      CanvasContainer,
+      CanvasFooter
+    }
+  }
 }
diff --git a/packages/controller/src/hooks/mountHooks.js b/packages/controller/src/hooks/mountHooks.js
index b9e18f24c..d38a6c9c8 100644
--- a/packages/controller/src/hooks/mountHooks.js
+++ b/packages/controller/src/hooks/mountHooks.js
@@ -1,4 +1,3 @@
-import './useLayout'
 import './useCanvas'
 import './useApp'
 import './useResource'
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 95d71dec2..92340346d 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -30,7 +30,8 @@ export { default as Robot } from '@opentiny/tiny-engine-plugin-robot'
 export { default as Props } from '@opentiny/tiny-engine-setting-props'
 export { default as Events } from '@opentiny/tiny-engine-setting-events'
 export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
-
+export { default as Layout } from '@opentiny/tiny-engine-layout'
+export { metaData as Canvas, CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
 
 export { default as defaultRegistry } from './registry'
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
new file mode 100644
index 000000000..9d955897a
--- /dev/null
+++ b/packages/design-core/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <component :is="registry.layout.component" :registry="registry"></component>
+</template>
+
+<script>
+import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
+
+export default {
+  setup() {
+    const registry = getMergeRegistry()
+    return {
+      registry
+    }
+  }
+}
+</script>
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index 516e87ef5..6120a6d0a 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -19,7 +19,7 @@ import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题
 import { defineEntry, mergeRegistry } from '@opentiny/tiny-engine-entry'
-import App from './layout/App.vue'
+import App from './App.vue'
 import defaultRegistry from '../registry.js'
 import { registerConfigurators } from './registerConfigurators'
 
diff --git a/packages/layout/assets/AI.png b/packages/layout/assets/AI.png
new file mode 100644
index 000000000..05ea37406
Binary files /dev/null and b/packages/layout/assets/AI.png differ
diff --git a/packages/layout/index.js b/packages/layout/index.js
index 1dd58d618..88a794c9c 100644
--- a/packages/layout/index.js
+++ b/packages/layout/index.js
@@ -1,5 +1,6 @@
-import component from './src/index.vue'
+import component from './src/Main.vue'
 import metaData from './meta'
+import './src/hooks/useLayout'
 
 export default {
   ...metaData,
diff --git a/packages/layout/package.json b/packages/layout/package.json
index da1c4fadf..3c7b2c04e 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -12,7 +12,12 @@
   ],
   "dependencies": {
     "@opentiny/tiny-engine-entry": "workspace:*",
-    "vue": "3.2.45"
+    "vue": "3.2.45",
+    "@opentiny/vue": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-design-smb": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
diff --git a/packages/design-core/src/layout/DesignCanvas.vue b/packages/layout/src/DesignCanvas.vue
similarity index 90%
rename from packages/design-core/src/layout/DesignCanvas.vue
rename to packages/layout/src/DesignCanvas.vue
index 7deb14638..82a3e6abb 100644
--- a/packages/design-core/src/layout/DesignCanvas.vue
+++ b/packages/layout/src/DesignCanvas.vue
@@ -1,21 +1,30 @@
 <template>
   <div id="canvas-wrap" ref="canvasRef">
     <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
-      <canvas-container
+      <component
+        :is="canvas.component.CanvasContainer"
         :controller="controller"
         :materials-panel="materialsPanel"
         :canvas-src="canvasUrl"
         @remove="removeNode"
         @selected="nodeSelected"
-      ></canvas-container>
+      ></component>
+      <!-- <canvas-container
+        :controller="controller"
+        :materials-panel="materialsPanel"
+        :canvas-src="canvasUrl"
+        @remove="removeNode"
+        @selected="nodeSelected"
+      ></canvas-container> -->
     </div>
-    <footer-bar :data="footData" @click="selectFooterNode"></footer-bar>
+    <component :is="canvas.component.CanvasFooter" :data="footData" @click="selectFooterNode"></component>
+    <!-- <footer-bar :data="footData" @click="selectFooterNode"></footer-bar> -->
   </div>
 </template>
 
 <script>
 import { ref, watch, computed, onUnmounted } from 'vue'
-import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
+// import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
 import {
   useProperties,
   useCanvas,
@@ -44,8 +53,13 @@ const componentType = {
 
 export default {
   components: {
-    CanvasContainer,
-    FooterBar: CanvasFooter
+    // CanvasContainer,
+    // FooterBar: CanvasFooter////
+  },
+  props: {
+    canvas: {
+      type: Object
+    }
   },
   setup() {
     const footData = ref([])
diff --git a/packages/design-core/src/layout/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
similarity index 93%
rename from packages/design-core/src/layout/DesignPlugins.vue
rename to packages/layout/src/DesignPlugins.vue
index 8cb47dd87..b51f040f9 100644
--- a/packages/design-core/src/layout/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -58,7 +58,7 @@
       >
         <div>
           <span class="item-icon">
-            <img class="chatgpt-icon" src="../../assets/AI.png" />
+            <img class="chatgpt-icon" src="../assets/AI.png" />
           </span>
         </div>
       </li>
@@ -96,7 +96,7 @@
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { useLayout, usePage } from '@opentiny/tiny-engine-controller'
-import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
+// import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -108,11 +108,15 @@ export default {
   props: {
     renderPanel: {
       type: String
+    },
+    plugins: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'node-click'],
   setup(props, { emit }) {
-    const plugins = getMergeRegistry('plugins')
+    // const plugins = getMergeRegistry('plugins')
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
@@ -127,7 +131,7 @@ export default {
       layoutState: { plugins: pluginsState }
     } = useLayout()
 
-    plugins.forEach(({ id, component, api, icon }) => {
+    props.plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
       iconComponents[id] = icon
       if (api) {
@@ -141,9 +145,9 @@ export default {
 
     const state = reactive({
       prevIdex: -2,
-      topNavLists: plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: plugins.filter((item) => item.align === 'bottom'),
-      independence: plugins.find((item) => item.align === 'independence')
+      topNavLists: props.plugins.filter((item) => item.align === 'top'),
+      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom'),
+      independence: props.plugins.find((item) => item.align === 'independence')
     })
 
     const doCompleted = () => {
@@ -158,7 +162,7 @@ export default {
       state.prevIdex = index
 
       // 切换插件与关闭插件时确认
-      const lastPlugin = plugins.find((item) => item.id === props.renderPanel)
+      const lastPlugin = props.plugins.find((item) => item.id === props.renderPanel)
       if (props.renderPanel && lastPlugin?.confirm) {
         const confirmCallback = (result) =>
           result &&
diff --git a/packages/design-core/src/layout/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
similarity index 100%
rename from packages/design-core/src/layout/DesignSettings.vue
rename to packages/layout/src/DesignSettings.vue
diff --git a/packages/design-core/src/layout/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue
similarity index 100%
rename from packages/design-core/src/layout/DesignToolbars.vue
rename to packages/layout/src/DesignToolbars.vue
diff --git a/packages/design-core/src/layout/App.vue b/packages/layout/src/Main.vue
similarity index 87%
rename from packages/design-core/src/layout/App.vue
rename to packages/layout/src/Main.vue
index a0ce17a56..edf026b9a 100644
--- a/packages/design-core/src/layout/App.vue
+++ b/packages/layout/src/Main.vue
@@ -1,16 +1,24 @@
 <template>
   <tiny-config-provider :design="designSmbConfig">
     <div id="tiny-engine">
-      <design-toolbars></design-toolbars>
+      <design-toolbars :toolbars="registry.toolbars"></design-toolbars>
       <div class="tiny-engine-main">
         <div class="tiny-engine-left-wrap">
           <div class="tiny-engine-content-wrap">
-            <design-plugins :render-panel="plugins.render" @click="toggleNav"></design-plugins>
-            <design-canvas></design-canvas>
+            <design-plugins
+              :plugins="registry.plugins"
+              :render-panel="plugins.render"
+              @click="toggleNav"
+            ></design-plugins>
+            <design-canvas :canvas="registry.canvas"></design-canvas>
           </div>
         </div>
         <div class="tiny-engine-right-wrap">
-          <design-settings v-show="layoutState.settings.showDesignSettings" ref="right"></design-settings>
+          <design-settings
+            :settings="registry.settings"
+            v-show="layoutState.settings.showDesignSettings"
+            ref="right"
+          ></design-settings>
         </div>
       </div>
     </div>
@@ -60,7 +68,11 @@ export default {
       editor: this
     }
   },
-
+  props: {
+    registry: {
+      type: Object
+    }
+  },
   setup() {
     const state = reactive({
       globalClass: '',
diff --git a/packages/controller/src/hooks/useLayout.js b/packages/layout/src/hooks/useLayout.js
similarity index 100%
rename from packages/controller/src/hooks/useLayout.js
rename to packages/layout/src/hooks/useLayout.js
diff --git a/packages/layout/src/index.less b/packages/layout/src/index.less
deleted file mode 100644
index 1c3a67f0c..000000000
--- a/packages/layout/src/index.less
+++ /dev/null
@@ -1,95 +0,0 @@
-.tiny-engine-layout {
-  height: 100vh;
-  display: flex;
-  flex-flow: column;
-}
-.tiny-engine-layout-header {
-  height: 48px;
-  border-bottom: 1px solid #dfe1e6;
-  text-align: center;
-  line-height: 48px;
-  background: #ecf8ff;
-  display: flex;
-  justify-content: center;
-  & > div {
-    margin: 0 10px;
-  }
-}
-.tiny-engine-layout-content {
-  display: flex;
-  max-width: 100vw;
-  flex: 1;
-  position: relative;
-  .main-content {
-    flex-grow: 1;
-    background: #fffdec;
-  }
-}
-
-.left-panel {
-  width: 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background: #fff;
-  box-sizing: border-box;
-  z-index: 1000;
-  border-right: 1px solid #dfe1e6;
-}
-.tiny-engine-drawer {
-  position: absolute;
-  width: 500px;
-  height: 100%;
-  left: 40px;
-  border-right: 1px solid #dfe1e6;
-  background: #fff;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-}
-.left-panel-top {
-  padding-top: 20px;
-  .panel-item {
-    text-align: center;
-    margin-top: 16px;
-    cursor: pointer;
-    .icon-container {
-      display: inline-flex;
-      padding: 6px;
-      border-radius: 6px;
-      &:hover {
-        background: #f2f2f2;
-      }
-    }
-    &.active {
-      .icon-container {
-        background: #f2f2f2;
-      }
-      svg {
-        fill: #1476ff;
-      }
-    }
-  }
-  svg {
-    font-size: 20px;
-  }
-}
-.main-content {
-  flex-grow: 1;
-  background: #fffdec;
-  font-size: 30px;
-  text-align: center;
-}
-.right-panel {
-  width: 272px;
-  height: 100%;
-  transition: 0.3s linear;
-  position: relative;
-  border-left: 1px solid #dfe1e6;
-  background: #fff;
-  text-align: center;
-  font-size: 20px;
-  padding-top: 10px;
-  box-sizing: border-box;
-}
-.toolbar-item {
-  cursor: pointer;
-}
diff --git a/packages/layout/src/index.vue b/packages/layout/src/index.vue
deleted file mode 100644
index 2eabd0a3a..000000000
--- a/packages/layout/src/index.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="tiny-engine-layout">
-    <div class="tiny-engine-layout-header">
-      <div v-for="(item, index) in state.toolbars" :key="index" class="toolbar-item">
-        <component :is="item.component"></component>
-      </div>
-    </div>
-  </div>
-  <div class="tiny-engine-layout-content">
-    <div class="left-panel">
-      <div class="left-panel-top">
-        <div
-          v-for="(item, index) in state.plugins"
-          :key="index"
-          class="panel-item"
-          :class="{ active: state.active === index }"
-          @click="clickPanelItem(item, index)"
-        >
-          <div class="icon-container">
-            <component :is="item.icon"></component>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="tiny-engine-drawer" v-if="state.showDrawer">
-    <component :is="state.showComponent"></component>
-  </div>
-  <div class="main-content">
-    <div>canvas</div>
-  </div>
-  <div class="right-panel">
-    <div>settings</div>
-  </div>
-</template>
-
-<script>
-import { shallowRef, ref, reactive } from 'vue'
-import './index.less'
-
-export default {
-  props: {
-    plugins: {
-      type: Array,
-      default: () => []
-    },
-    toolbars: {
-      type: Array,
-      default: () => []
-    },
-    settings: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup(props) {
-    const showDrawer = ref(false)
-    const showComponent = shallowRef(null)
-    const active = ref(null)
-
-    const state = reactive({
-      plugins: props.plugins,
-      toolbars: props.toolbars,
-      settings: props.settings,
-      showComponent,
-      active,
-      showDrawer,
-      drawerWidth: null
-    })
-
-    const clickPanelItem = (item, index) => {
-      if (active.value === index) {
-        showDrawer.value = false
-        active.value = null
-      } else {
-        showDrawer.value = true
-        showComponent.value = item.component
-        state.drawerWidth = item.span ? (item.span * 100) / 24 + '%' : null
-        active.value = index
-        if (item.click) {
-          item.click()
-        }
-      }
-    }
-
-    return {
-      state,
-      clickPanelItem
-    }
-  }
-}
-</script>