diff --git a/app/controllers/api.js b/app/controllers/api.js
index 6cbea1f..a02485b 100644
--- a/app/controllers/api.js
+++ b/app/controllers/api.js
@@ -143,13 +143,20 @@ module.exports = Advanced.Controller.extend({
     async _initTemplateById(id) {
         const _id = id;
 
-        if (!id) id = shortId();
+        const isMaterial = id === 'material';
+        const shouldCopy = !id || isMaterial; 
+        if (shouldCopy) id = shortId();
         const path = Utils.c('theme') + '/' + id;
 
-        if (_id && !await fsExtra.pathExists(path)) {
+        if (shouldCopy) {
+            await fsExtra.copy(
+                isMaterial ? 
+                   Utils.c('theme') + '/material' : 
+                   Utils.c('stylusTemplate'),
+                path
+            );
+        } else if (!await fsExtra.pathExists(path)) {
             throw `ID: ${id} does not exist.`;
-        } else if (!_id) {
-            await fsExtra.copy(Utils.c('stylusTemplate'), path);
         }
 
         return {path, id};
diff --git a/data/themes/material/index.styl b/data/themes/material/index.styl
index 5934da8..732867f 100644
--- a/data/themes/material/index.styl
+++ b/data/themes/material/index.styl
@@ -35,4 +35,5 @@ else
 @require('./tip.variables.styl')
 @require('./tooltip.variables.styl')
 @require('./upload.variables.styl')
-@require('./tree.variables.styl')
\ No newline at end of file
+@require('./tree.variables.styl')
+@require('./layout.variables.styl')
\ No newline at end of file
diff --git a/src/pages/opera/index.js b/src/pages/opera/index.js
index 1d0fdcb..d1f75e1 100644
--- a/src/pages/opera/index.js
+++ b/src/pages/opera/index.js
@@ -33,11 +33,14 @@ export default class Index extends Intact {
         req.keys().forEach(key => {
             if (key.startsWith(`./components/${componentName}/`)) {
                 const Demo = req(key);
-                Demos.push({
-                    Demo: Demo.default,
-                    data: Demo.data.setting,
-                    index: Demo.data.index,
-                });
+                // ignore iframe demo
+                if (Demo.data) {
+                    Demos.push({
+                        Demo: Demo.default,
+                        data: Demo.data.setting,
+                        index: Demo.data.index,
+                    });
+                }
             }
         });
         this.set({Demos: Demos.sort((a, b) => {