diff --git a/ShadowEditor.UI/index.html b/ShadowEditor.UI/index.html
index c32ef424..8d32bd19 100644
--- a/ShadowEditor.UI/index.html
+++ b/ShadowEditor.UI/index.html
@@ -9,35 +9,13 @@
 </head>
 
 <body>
-    <div id="container">
-
-    </div>
+    <div id="container"></div>
     <script src="js/react.js"></script>
     <script src="js/react-dom.js"></script>
     <script src="build/ShadowEditor.UI.js"></script>
     <script>
-        var icon1 = React.createElement(Shadow.Icon, {
-            icon: 'translate',
-            key: 1,
-        });
-
-        var icon2 = React.createElement(Shadow.Icon, {
-            icon: 'rotate',
-            key: 2,
-        });
-
-        var icon3 = React.createElement(Shadow.Icon, {
-            icon: 'scale',
-            key: 3,
-        });
-
-        var toolbar = React.createElement(Shadow.Toolbar, undefined, [
-            icon1,
-            icon2,
-            icon3,
-        ]);
-
-        ReactDOM.render(toolbar, document.querySelector('#container'));
+        var app = new Shadow.Application();
+        app.render();
     </script>
 </body>
 
diff --git a/ShadowEditor.UI/src/Application.jsx b/ShadowEditor.UI/src/Application.jsx
new file mode 100644
index 00000000..ce838528
--- /dev/null
+++ b/ShadowEditor.UI/src/Application.jsx
@@ -0,0 +1,14 @@
+import Panel from './panel/Panel.jsx';
+
+/**
+ * 应用程序
+ */
+class Application {
+    render() {
+        const component = <Panel></Panel>;
+
+        ReactDOM.render(component, document.querySelector('#container'));
+    }
+}
+
+export default Application;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/index.js b/ShadowEditor.UI/src/index.js
index 944c6464..44bde883 100644
--- a/ShadowEditor.UI/src/index.js
+++ b/ShadowEditor.UI/src/index.js
@@ -9,10 +9,16 @@ export { default as HBoxLayout } from './layout/HBoxLayout.jsx';
 export { default as VBoxLayout } from './layout/VBoxLayout.jsx';
 
 // menu
-export { default as Toolbar } from './menu/Toolbar.jsx';
+export { default as MenuBar } from './menu/MenuBar.jsx';
 
 // panel
 export { default as Panel } from './panel/Panel.jsx';
 
+// toolbar
+export { default as Toolbar } from './toolbar/Toolbar.jsx';
+
 // window
 export { default as Alert } from './window/Alert.jsx';
+
+// application
+export { default as Application } from './Application.jsx';
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/menu/MenuBar.jsx b/ShadowEditor.UI/src/menu/MenuBar.jsx
new file mode 100644
index 00000000..cd94aa3c
--- /dev/null
+++ b/ShadowEditor.UI/src/menu/MenuBar.jsx
@@ -0,0 +1,17 @@
+import classNames from 'classnames/bind';
+
+/**
+ * 菜单栏
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {String} children 内容
+ */
+class MenuBar extends React.Component {
+    render() {
+        const { className, children } = this.props;
+
+        return <div className={classNames('MenuBar', className)}>{children}</div>;
+    }
+}
+
+export default MenuBar;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/menu/Toolbar.jsx b/ShadowEditor.UI/src/toolbar/Toolbar.jsx
similarity index 100%
rename from ShadowEditor.UI/src/menu/Toolbar.jsx
rename to ShadowEditor.UI/src/toolbar/Toolbar.jsx
