diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..921abdd
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.js b/index.js
index 84f82ae..23019f4 100644
--- a/index.js
+++ b/index.js
@@ -11,6 +11,7 @@ import thunkMiddleware from 'redux-thunk';
 import promiseMiddleware from 'redux-promise-middleware';
 import { createLogger } from 'redux-logger';
 import sketcherReducer from './src/reducer/index.js';
+
 const reducer = combineReducers({ sketcher: sketcherReducer });
 const enhancer = compose(applyMiddleware(thunkMiddleware, promiseMiddleware(), createLogger({ collapsed: true })));
 const store = createStore(reducer, enhancer);
@@ -23,6 +24,12 @@ import { saveAs as saveAsLib } from 'file-saver';
 
 // download file
 import { createFile } from './src/utils/exportUtils.js';
+import sketchDataToJSON from './src/shape/sketchDataToJSON.js';
+import { JSONToBlob } from './src/utils/binaryUtils.js';
+
+import keycode from 'keycode';
+import btnExportURL from './img/corner/btnExport.png';
+
 window.downloadStl = () => {
   store.dispatch(async (dispatch, getState) => {
     const state = getState();
@@ -31,6 +38,23 @@ window.downloadStl = () => {
   });
 };
 
+window.downloadSketch = () => {
+  store.dispatch( (dispatch, getState) => {
+    const state = getState();
+    const json = sketchDataToJSON(state.sketcher.present);
+    const blob = JSONToBlob(json);
+    saveAsLib(blob, 'doodle.d3sketch');
+  });
+};
+
+window.addEventListener('keydown',(event) => {
+  // downloadSketch
+  const key = keycode(event);
+  if (key=='s') downloadSketch();
+  console.log(event.shiftKey, key);
+});
+
+
 // add model to store
 import modelData from './models/circle_error.d3sketch';
 import JSONToSketchData from './src/shape/JSONToSketchData.js';
@@ -64,9 +88,14 @@ async function init() {
     await new Promise(resolve => document.addEventListener('deviceready', resolve, false));
   }
 
+  console.log(btnExportURL);
+
   render((
     <Provider store={store}>
-      <App />
+      <span>
+        <App />
+        <div onTouchTap={downloadSketch} style={{ position: 'absolute', right: 0, top: 0, backgroundImage: `url(${btnExportURL})`, width: "65px", height: "78px", backgroundSize: "65px 78px", cursor: "pointer" }}></div>
+        </span>
     </Provider>
   ), document.getElementById('app'));
 }
diff --git a/package-lock.json b/package-lock.json
index 9d2f26e..3db3187 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,16 @@
         "pepjs": "0.4.3"
       }
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1703,9 +1713,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1733,6 +1743,7 @@
       "integrity": "sha1-CJo0Y69Y0OSNjNQHCz90ZU1avKk=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1754,7 +1765,6 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.1.2",
@@ -5365,15 +5375,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
-          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -5385,6 +5386,15 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -6420,10 +6430,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -7035,16 +7045,6 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -8139,6 +8139,7 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8146,7 +8147,6 @@
         "detective": "4.7.0",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.3.3",
         "resolve": "1.5.0",
@@ -12912,14 +12912,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -12968,6 +12960,14 @@
       "integrity": "sha1-aybpvTr8qnvjtCabUm3huCAArHg=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..e217ba7
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="utf-8">
+  <meta content="ie=edge" http-equiv="x-ua-compatible">
+  <title>Doodle3D Transform</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
index 22b7fc5..051cd28 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -80,10 +80,9 @@ module.exports = {
     }),
     new HTMLWebpackPlugin({
       title: 'Doodle3D Core - Simple example',
-      template: require('html-webpack-template'),
-      inject: false,
-      scripts: appMode ? ['cordova.js'] : null,
-      appMountId: 'app'
+      template: 'src/index.html',
+      favicon: 'favicon.ico',
+      inject: true,
     }),
     new GoogleFontsPlugin({
       fonts: [