diff --git a/src/app/components/OptionalDropdown/OptionalDropdown.jsx b/src/app/components/OptionalDropdown/OptionalDropdown.jsx
index f52b316e31..0c739c5d38 100644
--- a/src/app/components/OptionalDropdown/OptionalDropdown.jsx
+++ b/src/app/components/OptionalDropdown/OptionalDropdown.jsx
@@ -7,7 +7,7 @@ import styles from './styles.styl';
 
 // TODO: to be improved
 const OptionalDropdown = (props) => {
-    const { hidden, title, titleTip, onClick, children, ...rest } = props;
+    const { hidden, title, titleTip, onClick, disabled = false, children, ...rest } = props;
 
     return (
         <div>
@@ -16,6 +16,7 @@ const OptionalDropdown = (props) => {
                     <div className={styles['expandable-title']}>
                         <Anchor
                             onClick={onClick}
+                            disabled={disabled}
                         >
                             <i className={classNames(styles.icon, hidden ? styles['icon-unchecked'] : styles['icon-checked'])} />
                             <span>{title}</span>
@@ -45,6 +46,7 @@ OptionalDropdown.propTypes = {
     titleTip: PropTypes.string,
     children: PropTypes.node.isRequired,
     onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
     hidden: PropTypes.bool.isRequired
 };
 
diff --git a/src/app/constants/index.js b/src/app/constants/index.js
index dacfe5b438..b9e9bd4c50 100644
--- a/src/app/constants/index.js
+++ b/src/app/constants/index.js
@@ -44,6 +44,9 @@ export const STAGE_PREVIEWING = 2;
 export const STAGE_PREVIEWED = 3;
 export const STAGE_GENERATED = 4;
 
+export const PAGE_EDITOR = 'editor';
+export const PAGE_PROCESS = 'process';
+
 // Stages for 3d print
 export const STAGES_3DP = {
     noModel: 10,
diff --git a/src/app/containers/Cnc/Relief.jsx b/src/app/containers/Cnc/Relief.jsx
index 82bc14f5ee..6a8ab83e93 100644
--- a/src/app/containers/Cnc/Relief.jsx
+++ b/src/app/containers/Cnc/Relief.jsx
@@ -203,7 +203,7 @@ const Relief = (props) => {
                     <tr>
                         <td />
                         <td>
-                            <input type="checkbox" defaultChecked={state.isInvert} onChange={actions.onToggleInvert} /> <span>Invert</span>
+                            <input type="checkbox" defaultChecked={state.invert} onChange={actions.onToggleInvert} /> <span>Invert</span>
                         </td>
                     </tr>
                 </tbody>
diff --git a/src/app/containers/Header/Header.jsx b/src/app/containers/Header/Header.jsx
index 28d2d22178..d24761b096 100644
--- a/src/app/containers/Header/Header.jsx
+++ b/src/app/containers/Header/Header.jsx
@@ -12,6 +12,7 @@ import i18n from '../../lib/i18n';
 import QuickAccessToolbar from './QuickAccessToolbar';
 import MachineSelection from './MachineSelection';
 import styles from './styles.styl';
+import PageControl from './PageControl';
 
 const Logo = memo(() => (
     <Anchor
@@ -125,6 +126,7 @@ class Header extends PureComponent {
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="lu-header" />
                 <Navbar.Collapse id="lu-header" className={styles['lu-nav']}>
+                    <PageControl {...this.props} />
                     <Nav className="mr-auto">
                         <MachineSelection />
                     </Nav>
diff --git a/src/app/containers/Header/PageControl.jsx b/src/app/containers/Header/PageControl.jsx
new file mode 100644
index 0000000000..2e1cc421c9
--- /dev/null
+++ b/src/app/containers/Header/PageControl.jsx
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import classNames from 'classnames';
+import styles from './styles.styl';
+import { PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
+import { actions as cncLaserActions } from '../../flux/cncLaserShared';
+import i18n from '../../lib/i18n';
+
+
+class PageControl extends Component {
+    static propTypes = {
+        ...withRouter.propTypes,
+        page: PropTypes.string,
+        from: PropTypes.string,
+
+        togglePage: PropTypes.func.isRequired
+    };
+
+    actions= {
+
+    };
+
+    render() {
+        const { page, from } = this.props;
+        if (page === null) {
+            return null;
+        }
+        const isEditor = page === PAGE_EDITOR;
+        const isPreview = page === PAGE_PROCESS;
+
+        return (
+            <div className={classNames(styles['editor-and-preview'])}>
+                <div className={classNames(styles['btn-position'])}>
+                    <button
+                        type="button"
+                        className={classNames('btn', { [styles.selected]: isEditor })}
+                        onClick={() => {
+                            this.props.togglePage(from, PAGE_EDITOR);
+                        }}
+                    >{i18n._('Editor')}
+                    </button>
+                    <button
+                        type="button"
+                        className={classNames('btn', { [styles.selected]: isPreview })}
+                        onClick={() => {
+                            this.props.togglePage(from, PAGE_PROCESS);
+                        }}
+                    >{i18n._('Process')}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state, props) => {
+    const pathname = props.location.pathname;
+    let page = null;
+    let from = null;
+    if (pathname.indexOf('laser') !== -1) {
+        from = 'laser';
+        page = state.laser.page;
+    } else if (pathname.indexOf('cnc') !== -1) {
+        from = 'cnc';
+        page = state.cnc.page;
+    }
+    return {
+        page,
+        from
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        togglePage: (from, page) => dispatch(cncLaserActions.togglePage(from, page))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageControl);
diff --git a/src/app/containers/Header/styles.styl b/src/app/containers/Header/styles.styl
index 726c91f638..1b608599ea 100644
--- a/src/app/containers/Header/styles.styl
+++ b/src/app/containers/Header/styles.styl
@@ -15,3 +15,48 @@
         }
     }
 }
+
+.editor-and-preview {
+    position: absolute
+    width: 100%
+    height: 100%
+    pointer-events:none;
+
+    .btn-position {
+        position: relative
+        pointer-events: auto
+        padding: 6px 0
+        margin: 0 auto
+        width: 180px
+        height: 100%
+        left: -320px
+        background-color: #f8f8f8
+
+        button {
+            height: 100%
+            width: 90px
+            position: relative
+            font-size: $font-size-h5
+            background-color: #f8f8f8
+
+            &:focus {
+                outline: 0
+                box-shadow: none
+            }
+        }
+
+        .selected {
+            background-color: #000
+            color: #f8f8f8
+        }
+    }
+}
+
+.btn-icon {
+    color: #444;
+
+    &:hover,
+    &:focus {
+        color: #222;
+    }
+}
diff --git a/src/app/flux/cnc/index.js b/src/app/flux/cnc/index.js
index 1a077abaec..d97bb6a904 100644
--- a/src/app/flux/cnc/index.js
+++ b/src/app/flux/cnc/index.js
@@ -8,25 +8,34 @@ import {
 } from '../actionType';
 import { actions as sharedActions, CNC_LASER_STAGE } from '../cncLaserShared';
 import ToolPathModelGroup from '../models/ToolPathModelGroup';
+import { PAGE_EDITOR } from '../../constants';
 
 const ACTION_CHANGE_TOOL_PARAMS = 'cnc/ACTION_CHANGE_TOOL_PARAMS';
 
 const INITIAL_STATE = {
+
+    page: PAGE_EDITOR,
+
     stage: CNC_LASER_STAGE.EMPTY,
     progress: 0,
+
     modelGroup: new ModelGroup(),
     toolPathModelGroup: new ToolPathModelGroup(),
+
     isAllModelsPreviewed: false,
     isGcodeGenerating: false,
     gcodeFile: null,
-    // selected
+
     // model: null,
     selectedModelID: null,
     sourceType: '',
-    // selectedModelIDs: [],
     mode: '', // bw, greyscale, vector
+    showOrigin: null,
+
     printOrder: 1,
     transformation: {},
+    transformationUpdateTime: new Date().getTime(),
+
     gcodeConfig: {},
     config: {},
 
@@ -36,17 +45,6 @@ const INITIAL_STATE = {
         toolAngle: 30 // tool angle (in degree, defaults to 30° for V-Bit)
     },
 
-    // selected model transformation
-    positionX: 0,
-    positionY: 0,
-    positionZ: 0,
-    rotationX: 0,
-    rotationY: 0,
-    rotationZ: 0,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-
     // snapshot state
     undoSnapshots: [{ models: [], toolPathModels: [] }], // snapshot { models, toolPathModels }
     redoSnapshots: [], // snapshot { models, toolPathModels }
@@ -59,7 +57,6 @@ const INITIAL_STATE = {
 
     // boundingBox: new THREE.Box3(new THREE.Vector3(), new THREE.Vector3()), // bbox of selected model
 
-    previewUpdated: 0,
     previewFailed: false,
     autoPreviewEnabled: true,
 
@@ -109,8 +106,8 @@ export const actions = {
 };
 
 export default function reducer(state = INITIAL_STATE, action) {
-    const { from, type } = action;
-    if (from === 'cnc') {
+    const { headType, type } = action;
+    if (headType === 'cnc') {
         switch (type) {
             case ACTION_UPDATE_STATE: {
                 return Object.assign({}, state, { ...action.state });
@@ -122,7 +119,8 @@ export default function reducer(state = INITIAL_STATE, action) {
             }
             case ACTION_UPDATE_TRANSFORMATION: {
                 return Object.assign({}, state, {
-                    transformation: { ...state.transformation, ...action.transformation }
+                    transformation: { ...state.transformation, ...action.transformation },
+                    transformationUpdateTime: new Date().getTime()
                 });
             }
             case ACTION_UPDATE_GCODE_CONFIG: {
diff --git a/src/app/flux/cncLaserShared/index.js b/src/app/flux/cncLaserShared/index.js
index f2e98c5d08..c7d17473db 100644
--- a/src/app/flux/cncLaserShared/index.js
+++ b/src/app/flux/cncLaserShared/index.js
@@ -12,6 +12,7 @@ import {
     ACTION_UPDATE_GCODE_CONFIG,
     ACTION_UPDATE_CONFIG
 } from '../actionType';
+import { PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
 
 
 export const CNC_LASER_STAGE = {
@@ -22,64 +23,90 @@ export const CNC_LASER_STAGE = {
     PREVIEWING: 4,
     PREVIEW_SUCCESS: 5,
     PREVIEW_FAILED: 6,
-    GENERATING_GCODE: 7,
-    GENERATE_GCODE_SUCCESS: 8,
-    GENERATE_GCODE_FAILED: 9
+    RE_PREVIEW: 7,
+    GENERATING_GCODE: 8,
+    GENERATE_GCODE_SUCCESS: 9,
+    GENERATE_GCODE_FAILED: 10
 };
 
-// from: cnc/laser
+// headType: cnc/laser
 export const actions = {
-    updateState: (from, state) => {
+    updateState: (headType, state) => {
         return {
             type: ACTION_UPDATE_STATE,
-            from,
+            headType,
             state
         };
     },
 
-    updateTransformation: (from, transformation) => {
+    updateTransformation: (headType, transformation) => {
         return {
             type: ACTION_UPDATE_TRANSFORMATION,
-            from,
+            headType,
             transformation
         };
     },
 
-    updateGcodeConfig: (from, gcodeConfig) => {
+    updateGcodeConfig: (headType, gcodeConfig) => {
         return {
             type: ACTION_UPDATE_GCODE_CONFIG,
-            from,
+            headType,
             gcodeConfig
         };
     },
 
-    updateConfig: (from, config) => {
+    updateConfig: (headType, config) => {
         return {
             type: ACTION_UPDATE_CONFIG,
-            from,
+            headType,
             config
         };
     },
 
     // Model configurations
-    resetCalculatedState: (from) => {
+    resetCalculatedState: (headType) => {
         return {
             type: ACTION_RESET_CALCULATED_STATE,
-            from
+            headType
         };
     },
 
-    render: (from) => (dispatch) => {
-        dispatch(actions.updateState(from, {
+    render: (headType) => (dispatch) => {
+        dispatch(actions.updateState(headType, {
             renderingTimestamp: +new Date()
         }));
     },
 
-    uploadImage: (headerType, file, mode, onError) => (dispatch) => {
+    togglePage: (headType, page) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
+        dispatch(actions.updateState(headType, {
+            page: page
+        }));
+        if (page === PAGE_EDITOR) {
+            modelGroup.showAllModelsObj3D();
+            toolPathModelGroup.hideAllToolPathModelsObj3D();
+        } else {
+            toolPathModelGroup.showAllToolPathModelsObj3D();
+            for (const model of modelGroup.getModels()) {
+                const toolPath = toolPathModelGroup.getToolPathModel(model.modelID);
+                if (toolPath.needPreview) {
+                    toolPath.updateVisible(false);
+                    model.updateVisible(true);
+                } else {
+                    toolPath.updateVisible(true);
+                    model.updateVisible(false);
+                }
+            }
+            dispatch(actions.manualPreview(headType));
+        }
+        dispatch(actions.render(headType));
+    },
+
+    uploadImage: (headType, file, mode, onError) => (dispatch) => {
         // check params
 
-        if (!['cnc', 'laser'].includes(headerType)) {
-            onError(`Params error: func = ${headerType}`);
+        if (!['cnc', 'laser'].includes(headType)) {
+            onError(`Params error: func = ${headType}`);
             return;
         }
         if (!file) {
@@ -98,18 +125,18 @@ export const actions = {
         api.uploadImage(formData)
             .then((res) => {
                 const { width, height, originalName, uploadName } = res.body;
-                dispatch(actions.generateModel(headerType, originalName, uploadName, width, height, mode));
+                dispatch(actions.generateModel(headType, originalName, uploadName, width, height, mode));
             })
             .catch((err) => {
                 onError && onError(err);
             });
     },
 
-    uploadCaseImage: (headerType, file, mode, caseConfigs, caseTransformation, onError) => (dispatch) => {
+    uploadCaseImage: (headType, file, mode, caseConfigs, caseTransformation, onError) => (dispatch) => {
         // check params
 
-        if (!['cnc', 'laser'].includes(headerType)) {
-            onError(`Params error: func = ${headerType}`);
+        if (!['cnc', 'laser'].includes(headType)) {
+            onError(`Params error: func = ${headType}`);
 
             return;
         }
@@ -121,15 +148,15 @@ export const actions = {
         api.uploadLaserCaseImage(file)
             .then((res) => {
                 const { width, height, originalName, uploadName } = res.body;
-                dispatch(actions.generateModel(headerType, originalName, uploadName, width, height, mode, caseConfigs, caseTransformation));
+                dispatch(actions.generateModel(headType, originalName, uploadName, width, height, mode, caseConfigs, caseTransformation));
             })
             .catch((err) => {
                 onError && onError(err);
             });
     },
-    generateModel: (headerType, originalName, uploadName, sourceWidth, sourceHeight, mode, configs, caseTransformation) => (dispatch, getState) => {
+    generateModel: (headType, originalName, uploadName, sourceWidth, sourceHeight, mode, configs, caseTransformation) => async (dispatch, getState) => {
         const { size } = getState().machine;
-        const { modelGroup, toolPathModelGroup } = getState()[headerType];
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
 
         const extname = path.extname(uploadName).toLowerCase();
         let sourceType;
@@ -147,17 +174,16 @@ export const actions = {
         const geometry = new THREE.PlaneGeometry(width, height);
         const material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, visible: false });
 
-        if (!checkParams(headerType, sourceType, mode)) {
+        if (!checkParams(headType, sourceType, mode)) {
             return;
         }
 
 
-        const modelDefaultConfigs = generateModelDefaultConfigs(headerType, sourceType, mode);
+        const modelDefaultConfigs = generateModelDefaultConfigs(headType, sourceType, mode);
         let { config } = modelDefaultConfigs;
         const { gcodeConfig } = modelDefaultConfigs;
 
-
-        if (headerType === 'cnc') {
+        if (headType === 'cnc') {
             const { toolDiameter, toolAngle } = getState().cnc.toolParams;
             config = { ...config, toolDiameter, toolAngle };
         }
@@ -184,57 +210,56 @@ export const actions = {
 
         let transformation = caseTransformation || {};
 
-        if (`${headerType}-${sourceType}-${mode}` === 'cnc-raster-greyscale') {
+        if (`${headType}-${sourceType}-${mode}` === 'cnc-raster-greyscale') {
             // model.updateTransformation({ width: 40 });
             transformation = { ...transformation, width: 40 };
         }
 
-
-        const modelState = modelGroup.generateModel({
+        const modelState = await modelGroup.generateModel({
             limitSize: size,
-            headerType,
+            headType,
             sourceType,
+            mode,
             originalName,
             uploadName,
-            mode,
             sourceWidth,
             sourceHeight,
             geometry,
             material,
-            transformation
+            transformation,
+            config
         });
 
         const toolPathModelState = toolPathModelGroup.generateToolPathModel({
             modelID: modelState.selectedModelID,
-            config,
+            mode,
             gcodeConfig
         });
 
-        dispatch(actions.updateState(headerType, {
+        dispatch(actions.updateState(headType, {
             ...modelState,
             ...toolPathModelState
         }));
 
-        dispatch(actions.previewModel(headerType));
-        dispatch(actions.resetCalculatedState(headerType));
-        dispatch(actions.updateState(headerType, {
+        dispatch(actions.resetCalculatedState(headType));
+        dispatch(actions.updateState(headType, {
             hasModel: true
         }));
 
-        dispatch(actions.recordSnapshot(headerType));
-        dispatch(actions.render(headerType));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.render(headType));
     },
 
-    insertDefaultTextVector: (from, caseConfigs, caseTransformation) => (dispatch, getState) => {
+    insertDefaultTextVector: (headType, caseConfigs, caseTransformation) => (dispatch, getState) => {
         const { size } = getState().machine;
 
         api.convertTextToSvg({
             ...DEFAULT_TEXT_CONFIG
         })
-            .then((res) => {
+            .then(async (res) => {
                 // const { name, filename, width, height } = res.body;
                 const { originalName, uploadName, width, height } = res.body;
-                const { modelGroup, toolPathModelGroup } = getState()[from];
+                const { modelGroup, toolPathModelGroup } = getState()[headType];
                 const material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, visible: false });
                 const sourceType = 'text';
                 const mode = 'vector';
@@ -243,11 +268,11 @@ export const actions = {
                 );
                 const geometry = new THREE.PlaneGeometry(textSize.width, textSize.height);
 
-                if (!checkParams(from, sourceType, mode)) {
+                if (!checkParams(headType, sourceType, mode)) {
                     return;
                 }
 
-                const modelDefaultConfigs = generateModelDefaultConfigs(from, sourceType, mode);
+                const modelDefaultConfigs = generateModelDefaultConfigs(headType, sourceType, mode);
 
                 const config = { ...modelDefaultConfigs.config, ...DEFAULT_TEXT_CONFIG };
                 const { gcodeConfig } = modelDefaultConfigs;
@@ -273,9 +298,9 @@ export const actions = {
                     height: textSize.height
                 };
 
-                const modelState = modelGroup.generateModel({
+                const modelState = await modelGroup.generateModel({
                     limitSize: size,
-                    headerType: from,
+                    headType: headType,
                     mode,
                     sourceType,
                     originalName,
@@ -284,43 +309,72 @@ export const actions = {
                     sourceHeight: height,
                     geometry,
                     material,
-                    transformation
+                    transformation,
+                    config
                 });
                 const toolPathModelState = toolPathModelGroup.generateToolPathModel({
                     modelID: modelState.selectedModelID,
-                    config,
                     gcodeConfig
                 });
-                dispatch(actions.updateState(from, {
+                dispatch(actions.updateState(headType, {
                     ...modelState,
                     ...toolPathModelState
                 }));
 
-                dispatch(actions.previewModel(from));
-                dispatch(actions.resetCalculatedState(from));
-                dispatch(actions.updateState(from, {
+                dispatch(actions.resetCalculatedState(headType));
+                dispatch(actions.updateState(headType, {
                     hasModel: true
                 }));
-                dispatch(actions.recordSnapshot(from));
-                dispatch(actions.render(from));
+                dispatch(actions.recordSnapshot(headType));
+                dispatch(actions.render(headType));
             });
     },
 
+    changeSelectedModelMode: (headType, sourceType, mode) => async (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
+        const modelDefaultConfigs = generateModelDefaultConfigs(headType, sourceType, mode);
+        let { config } = modelDefaultConfigs;
+        const { gcodeConfig } = modelDefaultConfigs;
+        if (headType === 'cnc') {
+            const { toolDiameter, toolAngle } = getState().cnc.toolParams;
+            config = { ...config, toolDiameter, toolAngle };
+        }
+        const modelState = await modelGroup.updateSelectedMode(mode, config);
+        const toolPathModelState = toolPathModelGroup.updateSelectedMode(mode, gcodeConfig);
+
+        dispatch(actions.updateState(headType, {
+            ...modelState,
+            ...toolPathModelState
+        }));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.render(headType));
+    },
+
+
+    changeSelectedModelShowOrigin: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
+        const showOrigin = modelGroup.changeShowOrigin();
+        dispatch(actions.updateState(headType, {
+            showOrigin,
+            renderingTimestamp: +new Date()
+        }));
+    },
+
     // call once
-    initModelsPreviewChecker: (from) => (dispatch, getState) => {
-        const { modelGroup, isAllModelsPreviewed } = getState()[from];
+    initModelsPreviewChecker: (headType) => (dispatch, getState) => {
+        const { modelGroup, isAllModelsPreviewed } = getState()[headType];
         const check = () => {
             const isAllModelsPreviewedN = checkIsAllModelsPreviewed(modelGroup);
             if (isAllModelsPreviewedN !== isAllModelsPreviewed) {
-                dispatch(actions.updateState(from, { isAllModelsPreviewed: isAllModelsPreviewedN }));
+                dispatch(actions.updateState(headType, { isAllModelsPreviewed: isAllModelsPreviewedN }));
             }
             setTimeout(check, 100);
         };
         check();
     },
 
-    getEstimatedTime: (from, type) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    getEstimatedTime: (headType, type) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
         if (type === 'selected') {
             return modelGroup.estimatedTime;
         } else {
@@ -329,13 +383,13 @@ export const actions = {
         }
     },
 
-    getSelectedModel: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    getSelectedModel: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
         return modelGroup.getSelectedModel();
     },
 
-    selectModel: (from, modelMeshObject) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+    selectModel: (headType, modelMeshObject) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         const selectedModelState = modelGroup.selectModel(modelMeshObject);
         const toolPathModelState = toolPathModelGroup.selectToolPathModel(selectedModelState.selectedModelID);
 
@@ -343,32 +397,32 @@ export const actions = {
             ...selectedModelState,
             ...toolPathModelState
         };
-        dispatch(actions.updateState(from, state));
+        dispatch(actions.updateState(headType, state));
     },
 
-    removeSelectedModel: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+    removeSelectedModel: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         const modelState = modelGroup.removeSelectedModel();
         const toolPathModelState = toolPathModelGroup.removeSelectedToolPathModel();
-        dispatch(actions.updateState(from, {
+        dispatch(actions.updateState(headType, {
             ...modelState,
             ...toolPathModelState
         }));
         if (!modelState.hasModel) {
-            dispatch(actions.updateState(from, {
+            dispatch(actions.updateState(headType, {
                 stage: 0,
                 progress: 0
             }));
         }
-        dispatch(actions.recordSnapshot(from));
-        dispatch(actions.render(from));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.render(headType));
     },
 
-    unselectAllModels: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+    unselectAllModels: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         const modelState = modelGroup.unselectAllModels();
         const toolPathModelState = toolPathModelGroup.unselectAllModels();
-        dispatch(actions.updateState(from, {
+        dispatch(actions.updateState(headType, {
             ...modelState,
             ...toolPathModelState
         }));
@@ -377,13 +431,13 @@ export const actions = {
     /**
      * Generate G-code.
      *
-     * @param from
+     * @param headType
      * @param thumbnail G-code thumbnail should be included in G-code header.
      * @returns {Function}
      */
-    generateGcode: (from, thumbnail) => (dispatch, getState) => {
+    generateGcode: (headType, thumbnail) => (dispatch, getState) => {
         const modelInfos = [];
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         for (const model of modelGroup.getModels()) {
             const modelTaskInfo = model.getTaskInfo();
             const toolPathModelTaskInfo = toolPathModelGroup.getToolPathModelTaskInfo(modelTaskInfo.modelID);
@@ -408,13 +462,13 @@ export const actions = {
             }
         });
         dispatch(actions.updateState(
-            from, {
+            headType, {
                 isGcodeGenerating: true
             }
         ));
         orderModelInfos[0].thumbnail = thumbnail;
-        controller.commitGcodeTask({ taskId: uuid.v4(), headType: from, data: orderModelInfos });
-        dispatch(actions.updateState(from, {
+        controller.commitGcodeTask({ taskId: uuid.v4(), headType: headType, data: orderModelInfos });
+        dispatch(actions.updateState(headType, {
             stage: CNC_LASER_STAGE.GENERATING_GCODE,
             progress: 0
         }));
@@ -423,18 +477,18 @@ export const actions = {
     /**
      * Callback function trigger by event when G-code generated.
      *
-     * @param from
+     * @param headType
      * @param taskResult
      * @returns {Function}
      */
-    onReceiveGcodeTaskResult: (from, taskResult) => async (dispatch) => {
+    onReceiveGcodeTaskResult: (headType, taskResult) => async (dispatch) => {
         dispatch(actions.updateState(
-            from, {
+            headType, {
                 isGcodeGenerating: false
             }
         ));
         if (taskResult.taskStatus === 'failed') {
-            dispatch(actions.updateState(from, {
+            dispatch(actions.updateState(headType, {
                 stage: CNC_LASER_STAGE.GENERATE_GCODE_FAILED,
                 progress: 1
             }));
@@ -442,7 +496,7 @@ export const actions = {
         }
         const { gcodeFile } = taskResult;
 
-        dispatch(actions.updateState(from, {
+        dispatch(actions.updateState(headType, {
             gcodeFile: {
                 name: gcodeFile.name,
                 uploadName: gcodeFile.name,
@@ -455,55 +509,53 @@ export const actions = {
         }));
     },
 
-    updateSelectedModelPrintOrder: (from, printOrder) => (dispatch, getState) => {
-        const { toolPathModelGroup } = getState()[from];
+    updateSelectedModelPrintOrder: (headType, printOrder) => (dispatch, getState) => {
+        const { toolPathModelGroup } = getState()[headType];
         toolPathModelGroup.updateSelectedPrintOrder(printOrder);
 
-        dispatch(actions.updateState(from, { printOrder }));
-        dispatch(actions.resetCalculatedState(from));
+        dispatch(actions.updateState(headType, { printOrder }));
+        dispatch(actions.resetCalculatedState(headType));
     },
 
-    updateSelectedModelGcodeConfig: (from, gcodeConfig) => (dispatch, getState) => {
-        const { toolPathModelGroup } = getState()[from];
+    updateSelectedModelGcodeConfig: (headType, gcodeConfig) => (dispatch, getState) => {
+        const { toolPathModelGroup } = getState()[headType];
         toolPathModelGroup.updateSelectedGcodeConfig(gcodeConfig);
-        dispatch(actions.updateGcodeConfig(from, gcodeConfig));
-        dispatch(actions.previewModel(from));
-        dispatch(actions.recordSnapshot(from));
-        dispatch(actions.resetCalculatedState(from));
-    },
-
-    updateSelectedModelConfig: (from, config) => (dispatch, getState) => {
-        // const { model } = getState()[from];
-        // model.updateConfig(config);
-        const { toolPathModelGroup } = getState()[from];
-        toolPathModelGroup.updateSelectedConfig(config);
-        dispatch(actions.updateConfig(from, config));
-        dispatch(actions.previewModel(from));
-        dispatch(actions.recordSnapshot(from));
-        dispatch(actions.resetCalculatedState(from));
-    },
-
-    updateAllModelConfig: (from, config) => (dispatch, getState) => {
-        // const { modelGroup, model } = getState()[from];
-        const { toolPathModelGroup, selectedModelID } = getState()[from];
-        toolPathModelGroup.updateAllModelConfig(config);
-        dispatch(actions.manualPreview(from));
+        // toolPathModelGroup.updateSelectedNeedPreview(true);
+        dispatch(actions.updateGcodeConfig(headType, gcodeConfig));
+        dispatch(actions.previewModel(headType));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.resetCalculatedState(headType));
+    },
+
+    updateSelectedModelConfig: (headType, config) => async (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
+        await modelGroup.updateSelectedConfig(config);
+        toolPathModelGroup.updateSelectedNeedPreview(true);
+        dispatch(actions.updateConfig(headType, config));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.resetCalculatedState(headType));
+    },
+
+    updateAllModelGcodeConfig: (headType, gcodeConfig) => (dispatch, getState) => {
+        // const { modelGroup, model } = getState()[headType];
+        const { toolPathModelGroup, selectedModelID } = getState()[headType];
+        toolPathModelGroup.updateAllModelGcodeConfig(gcodeConfig);
+        dispatch(actions.manualPreview(headType));
         if (selectedModelID) {
-            dispatch(actions.updateConfig(from, config));
-            dispatch(actions.resetCalculatedState(from));
-            dispatch(actions.render(from));
+            dispatch(actions.updateGcodeConfig(headType, gcodeConfig));
+            dispatch(actions.resetCalculatedState(headType));
+            dispatch(actions.render(headType));
         }
     },
 
-    updateSelectedModelTextConfig: (from, config) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, transformation } = getState()[from];
-        const toolPathModelState = toolPathModelGroup.getSelectedToolPathModelState();
-        const newConfig = {
-            ...toolPathModelState.config,
-            ...config
+    updateSelectedModelTextConfig: (headType, newConfig) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup, config } = getState()[headType];
+        newConfig = {
+            ...config,
+            ...newConfig
         };
         api.convertTextToSvg(newConfig)
-            .then((res) => {
+            .then(async (res) => {
                 const { originalName, uploadName, width, height } = res.body;
 
                 const source = { originalName, uploadName, sourceHeight: height, sourceWidth: width };
@@ -512,30 +564,24 @@ export const actions = {
 
                 modelGroup.updateSelectedSource(source);
                 modelGroup.updateSelectedModelTransformation({ ...textSize });
-                toolPathModelGroup.updateSelectedConfig(newConfig);
-
-                dispatch(actions.updateState(from, {
-                    ...source,
-                    newConfig,
-                    transformation: {
-                        ...transformation,
-                        ...textSize
-                    }
-                }));
+                await modelGroup.updateSelectedConfig(newConfig);
+                toolPathModelGroup.updateSelectedNeedPreview(true);
 
-                dispatch(actions.showModelObj3D(from));
-                dispatch(actions.previewModel(from));
-                dispatch(actions.updateConfig(from, newConfig));
-                dispatch(actions.resetCalculatedState(from));
-                dispatch(actions.recordSnapshot(from));
-                dispatch(actions.render(from));
+                // dispatch(actions.showModelObj3D(headType));
+                dispatch(actions.updateConfig(headType, newConfig));
+                dispatch(actions.updateTransformation(headType, {
+                    ...textSize
+                }));
+                dispatch(actions.resetCalculatedState(headType));
+                dispatch(actions.recordSnapshot(headType));
+                dispatch(actions.render(headType));
             });
     },
 
-    onSetSelectedModelPosition: (from, position) => (dispatch, getState) => {
-        // const { model } = getState()[from];
+    onSetSelectedModelPosition: (headType, position) => (dispatch, getState) => {
+        // const { model } = getState()[headType];
         // const transformation = model.modelInfo.transformation;
-        const { transformation } = getState()[from];
+        const { transformation } = getState()[headType];
         let posX = 0;
         let posY = 0;
         const { width, height } = transformation;
@@ -583,13 +629,13 @@ export const actions = {
         transformation.positionX = posX;
         transformation.positionY = posY;
         transformation.rotationZ = 0;
-        dispatch(actions.updateSelectedModelTransformation(from, transformation));
-        dispatch(actions.onModelAfterTransform(from));
+        dispatch(actions.updateSelectedModelTransformation(headType, transformation));
+        dispatch(actions.onModelAfterTransform(headType));
     },
 
-    onFlipSelectedModel: (from, flipStr) => (dispatch, getState) => {
-        // const { model } = getState()[from];
-        const { transformation } = getState()[from];
+    onFlipSelectedModel: (headType, flipStr) => (dispatch, getState) => {
+        // const { model } = getState()[headType];
+        const { transformation } = getState()[headType];
         let flip = transformation.flip;
         switch (flipStr) {
             case 'Vertical':
@@ -604,157 +650,125 @@ export const actions = {
             default:
         }
         transformation.flip = flip;
-        dispatch(actions.updateSelectedModelTransformation(from, transformation));
-        dispatch(actions.onModelAfterTransform(from));
+        dispatch(actions.updateSelectedModelTransformation(headType, transformation));
+        dispatch(actions.onModelAfterTransform(headType));
     },
 
-    /*
-    bringSelectedModelToFront() {
-        const margin = 0.01;
-        const sorted = this.getSortedModelsByPositionZ();
-        for (let i = 0; i < sorted.length; i++) {
-            sorted[i].position.z = (i + 1) * margin;
-        }
-        const selected = this.getSelectedModel();
-        selected.position.z = (sorted.length + 2) * margin;
-    }
-
-    sendSelectedModelToBack() {
-        const margin = 0.01;
-        const sorted = this.getSortedModelsByPositionZ();
-        for (let i = 0; i < sorted.length; i++) {
-            sorted[i].position.z = (i + 1) * margin;
-        }
-        const selected = this.getSelectedModel();
-        selected.position.z = 0;
-    }
-    */
-
-    bringSelectedModelToFront: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    bringSelectedModelToFront: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
         modelGroup.bringSelectedModelToFront();
     },
 
-    sendSelectedModelToBack: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    sendSelectedModelToBack: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
         modelGroup.sendSelectedModelToBack();
     },
 
-    arrangeAllModels2D: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    arrangeAllModels2D: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         modelGroup.arrangeAllModels2D();
+        const modelState = modelGroup.onModelTransform();
+        toolPathModelGroup.updateAllNeedPreview(true);
+
+        dispatch(actions.showAllModelsObj3D(headType));
+        dispatch(actions.updateTransformation(headType, modelState.transformation));
+        dispatch(actions.manualPreview(headType));
+        dispatch(actions.recordSnapshot(headType));
+        dispatch(actions.render(headType));
     },
 
-    updateSelectedModelTransformation: (from, transformation) => (dispatch, getState) => {
-        // width and height are linked
-        // const { model } = getState()[from];
-        // model.updateTransformation(transformation);
-        const { modelGroup } = getState()[from];
+    updateSelectedModelTransformation: (headType, transformation) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         const modelState = modelGroup.updateSelectedModelTransformation(transformation);
 
-        dispatch(actions.updateTransformation(from, modelState.transformation));
-        dispatch(actions.showModelObj3D(from));
-        // preview on onModelAfterTransform
-        // dispatch(actions.previewModel(from));
-        dispatch(actions.resetCalculatedState(from));
-        dispatch(actions.render(from));
+        if (modelState) {
+            toolPathModelGroup.updateSelectedNeedPreview(true);
+            dispatch(actions.updateTransformation(headType, modelState.transformation));
+            dispatch(actions.resetCalculatedState(headType));
+            dispatch(actions.render(headType));
+        }
     },
 
     // callback
-    onModelTransform: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+    onModelTransform: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup, transformationUpdateTime } = getState()[headType];
+
         const modelState = modelGroup.onModelTransform();
-        toolPathModelGroup.cancelSelectedPreview();
-        dispatch(actions.updateTransformation(from, modelState.transformation));
-        dispatch(actions.showModelObj3D(from));
+        toolPathModelGroup.updateSelectedNeedPreview(true);
+        dispatch(actions.changeModelVisualizer(headType, modelState.modelID, false));
+        if (new Date().getTime() - transformationUpdateTime > 50) {
+            dispatch(actions.updateTransformation(headType, modelState.transformation));
+        }
     },
 
-    onModelAfterTransform: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
+    onModelAfterTransform: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
         if (modelGroup) {
             const modelState = modelGroup.onModelAfterTransform();
-            dispatch(actions.updateState(from, { modelState }));
-            dispatch(actions.previewModel(from));
-            dispatch(actions.recordSnapshot(from));
+
+            if (modelState) {
+                dispatch(actions.updateState(headType, { modelState }));
+                dispatch(actions.previewModel(headType));
+                dispatch(actions.updateTransformation(headType, modelState.transformation));
+                dispatch(actions.recordSnapshot(headType));
+            }
         }
     },
 
-    setAutoPreview: (from, value) => (dispatch) => {
-        dispatch(actions.updateState(from, {
+    setAutoPreview: (headType, value) => (dispatch) => {
+        dispatch(actions.updateState(headType, {
             autoPreviewEnabled: value
         }));
-        dispatch(actions.manualPreview(from));
+        dispatch(actions.manualPreview(headType));
     },
 
     // todo: listen config, gcodeConfig
-    initSelectedModelListener: (from) => (dispatch, getState) => {
-        const { modelGroup } = getState()[from];
-
-        modelGroup.onSelectedModelTransformChanged = () => {
-            // const { model } = getState()[from];
-            // model.onTransform();
-            // model.updateTransformationFromModel();
-            const modelState = modelGroup.onModelTransform();
-            dispatch(actions.showAllModelsObj3D(from));
-            dispatch(actions.manualPreview(from));
-            dispatch(actions.updateTransformation(from, modelState.transformation));
-            dispatch(actions.recordSnapshot(from));
-            dispatch(actions.render(from));
-        };
+    initSelectedModelListener: (headType) => (dispatch, getState) => {
+        const { modelGroup } = getState()[headType];
 
         // modelGroup.addEventListener('update', () => {
         modelGroup.object.addEventListener('update', () => {
-            dispatch(actions.render(from));
+            dispatch(actions.render(headType));
         });
     },
 
-    showAllModelsObj3D: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
+    showAllModelsObj3D: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup } = getState()[headType];
         modelGroup.showAllModelsObj3D();
-        toolPathModelGroup.hideAllModelsObj3D();
+        toolPathModelGroup.hideAllToolPathModelsObj3D();
     },
 
-    showModelObj3D: (from, modelID) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
-        if (!modelID) {
-            const modelState = modelGroup.getSelectedModelTaskInfo();
-            if (!modelState) {
-                return;
+    changeModelVisualizer: (headType, modelID, isPreview) => (dispatch, getState) => {
+        const { page, modelGroup, toolPathModelGroup } = getState()[headType];
+        if (page === PAGE_PROCESS) {
+            const model = modelGroup.getModel(modelID);
+            const toolPathModel = toolPathModelGroup.getToolPathModel(modelID);
+            if (isPreview) {
+                model.updateVisible(false);
+                toolPathModel.updateVisible(true);
+            } else {
+                model.updateVisible(true);
+                toolPathModel.updateVisible(false);
             }
-            modelID = modelState.modelID;
         }
-        modelGroup.showModelObj3D(modelID);
-        toolPathModelGroup.hideToolPathObj3D(modelID);
     },
 
-    showToolPathModelObj3D: (from, modelID) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup } = getState()[from];
-        if (!modelID) {
-            const modelState = modelGroup.getSelectedModelTaskInfo();
-            if (!modelState) {
-                return;
-            }
-            modelID = modelState.modelID;
-        }
-        if (modelID) {
-            modelGroup.hideModelObj3D(modelID);
-            toolPathModelGroup.showToolPathObj3D(modelID);
+    manualPreview: (headType, isPreview) => (dispatch, getState) => {
+        const { page, modelGroup, toolPathModelGroup, autoPreviewEnabled } = getState()[headType];
+        if (page === PAGE_EDITOR) {
+            return;
         }
-    },
-
-    manualPreview: (from, isPreview) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, autoPreviewEnabled } = getState()[from];
         if (isPreview || autoPreviewEnabled) {
             for (const model of modelGroup.getModels()) {
                 const modelTaskInfo = model.getTaskInfo();
                 const toolPathModelTaskInfo = toolPathModelGroup.getToolPathModelTaskInfo(modelTaskInfo.modelID);
-                if (toolPathModelTaskInfo) {
+                if (toolPathModelTaskInfo && toolPathModelTaskInfo.needPreview) {
                     const taskInfo = {
                         ...modelTaskInfo,
                         ...toolPathModelTaskInfo
                     };
-                    controller.commitToolPathTask({ taskId: taskInfo.modelID, headType: from, data: taskInfo });
-                    dispatch(actions.updateState(from, {
+                    controller.commitToolPathTask({ taskId: taskInfo.modelID, headType: headType, data: taskInfo });
+                    dispatch(actions.updateState(headType, {
                         stage: CNC_LASER_STAGE.GENERATING_TOOLPATH,
                         progress: 0
                     }));
@@ -763,19 +777,22 @@ export const actions = {
         }
     },
 
-    previewModel: (from, isPreview) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, autoPreviewEnabled } = getState()[from];
+    previewModel: (headType, isPreview) => (dispatch, getState) => {
+        const { page, modelGroup, toolPathModelGroup, autoPreviewEnabled } = getState()[headType];
+        if (page === PAGE_EDITOR) {
+            return;
+        }
         if (isPreview || autoPreviewEnabled) {
-            const modelTaskInfo = modelGroup.getSelectedModelTaskInfo();
-            if (modelTaskInfo) {
-                const toolPathModelTaskInfo = toolPathModelGroup.getToolPathModelTaskInfo(modelTaskInfo.modelID);
-                if (toolPathModelTaskInfo) {
+            const modelState = modelGroup.getSelectedModel().getTaskInfo();
+            if (modelState) {
+                const toolPathModelTaskInfo = toolPathModelGroup.getToolPathModelTaskInfo(modelState.modelID);
+                if (toolPathModelTaskInfo && toolPathModelTaskInfo.needPreview) {
                     const taskInfo = {
-                        ...modelTaskInfo,
+                        ...modelState,
                         ...toolPathModelTaskInfo
                     };
-                    controller.commitToolPathTask({ taskId: taskInfo.modelID, headType: from, data: taskInfo });
-                    dispatch(actions.updateState(from, {
+                    controller.commitToolPathTask({ taskId: taskInfo.modelID, headType: headType, data: taskInfo });
+                    dispatch(actions.updateState(headType, {
                         stage: CNC_LASER_STAGE.GENERATING_TOOLPATH,
                         progress: 0
                     }));
@@ -784,20 +801,19 @@ export const actions = {
         }
     },
 
-    onReceiveTaskResult: (from, taskResult) => async (dispatch, getState) => {
-        // const state = getState()[from];
-        const { toolPathModelGroup } = getState()[from];
+    onReceiveTaskResult: (headType, taskResult) => async (dispatch, getState) => {
+        // const state = getState()[headType];
+        const { toolPathModelGroup } = getState()[headType];
 
         const { data, filename } = taskResult;
 
         if (taskResult.taskStatus === 'failed' && toolPathModelGroup.getToolPathModelByID(data.id)) {
-            dispatch(actions.updateState(from, {
-                previewUpdated: +new Date(),
+            dispatch(actions.updateState(headType, {
                 previewFailed: true,
                 stage: CNC_LASER_STAGE.GENERATE_TOOLPATH_FAILED,
                 progress: 1
             }));
-            dispatch(actions.setAutoPreview(from, false));
+            dispatch(actions.setAutoPreview(headType, false));
             return;
         }
 
@@ -809,20 +825,26 @@ export const actions = {
         const toolPathModelState = await toolPathModelGroup.receiveTaskResult(data, filename);
 
         if (toolPathModelState) {
-            dispatch(actions.showToolPathModelObj3D(from, toolPathModelState.modelID));
+            dispatch(actions.changeModelVisualizer(headType, toolPathModelState.modelID, true));
+            // dispatch(actions.togglePage(headType, PAGE_PROCESS));
+            dispatch(actions.updateState(headType, {
+                previewFailed: false,
+                stage: CNC_LASER_STAGE.PREVIEW_SUCCESS,
+                progress: 1
+            }));
+            dispatch(actions.render(headType));
+        } else {
+            dispatch(actions.updateState(headType, {
+                previewFailed: false,
+                stage: CNC_LASER_STAGE.RE_PREVIEW,
+                progress: 1
+            }));
+            dispatch(actions.render(headType));
         }
-
-        dispatch(actions.updateState(from, {
-            previewUpdated: +new Date(),
-            previewFailed: false,
-            stage: CNC_LASER_STAGE.PREVIEW_SUCCESS,
-            progress: 1
-        }));
-        dispatch(actions.render(from));
     },
 
-    undo: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[from];
+    undo: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[headType];
         if (undoSnapshots.length <= 1) {
             return;
         }
@@ -832,7 +854,9 @@ export const actions = {
         const modelState = modelGroup.undoRedo(snapshots.models);
         const toolPathModelState = toolPathModelGroup.undoRedo(snapshots.toolPathModels);
 
-        dispatch(actions.updateState(from, {
+        toolPathModelGroup.updateAllNeedPreview(true);
+
+        dispatch(actions.updateState(headType, {
             ...modelState,
             ...toolPathModelState,
             undoSnapshots: undoSnapshots,
@@ -840,13 +864,12 @@ export const actions = {
             canUndo: undoSnapshots.length > 1,
             canRedo: redoSnapshots.length > 0
         }));
-        // dispatch(actions.showAllModelsObj3D(from));
-        dispatch(actions.manualPreview(from));
-        dispatch(actions.render(from));
+        dispatch(actions.manualPreview(headType));
+        dispatch(actions.render(headType));
     },
 
-    redo: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[from];
+    redo: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[headType];
         if (redoSnapshots.length === 0) {
             return;
         }
@@ -857,7 +880,9 @@ export const actions = {
         const modelState = modelGroup.undoRedo(snapshots.models);
         const toolPathModelState = toolPathModelGroup.undoRedo(snapshots.toolPathModels);
 
-        dispatch(actions.updateState(from, {
+        toolPathModelGroup.updateAllNeedPreview(true);
+
+        dispatch(actions.updateState(headType, {
             ...modelState,
             ...toolPathModelState,
             undoSnapshots: undoSnapshots,
@@ -865,14 +890,13 @@ export const actions = {
             canUndo: undoSnapshots.length > 1,
             canRedo: redoSnapshots.length > 0
         }));
-        // dispatch(actions.showAllModelsObj3D(from));
-        dispatch(actions.manualPreview(from));
-        dispatch(actions.render(from));
+        dispatch(actions.manualPreview(headType));
+        dispatch(actions.render(headType));
     },
 
 
-    recordSnapshot: (from) => (dispatch, getState) => {
-        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[from];
+    recordSnapshot: (headType) => (dispatch, getState) => {
+        const { modelGroup, toolPathModelGroup, undoSnapshots, redoSnapshots } = getState()[headType];
         const cloneModels = modelGroup.cloneModels();
         const cloneToolPathModels = toolPathModelGroup.cloneToolPathModels();
         undoSnapshots.push({
@@ -880,7 +904,7 @@ export const actions = {
             toolPathModels: cloneToolPathModels
         });
         redoSnapshots.splice(0);
-        dispatch(actions.updateState(from, {
+        dispatch(actions.updateState(headType, {
             undoSnapshots: undoSnapshots,
             redoSnapshots: redoSnapshots,
             canUndo: undoSnapshots.length > 1,
diff --git a/src/app/flux/laser/index.js b/src/app/flux/laser/index.js
index 75e6194275..1d5751fea3 100644
--- a/src/app/flux/laser/index.js
+++ b/src/app/flux/laser/index.js
@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 // import { DATA_PREFIX, EPSILON } from '../../constants';
-import { DATA_PREFIX } from '../../constants';
+import { DATA_PREFIX, PAGE_EDITOR } from '../../constants';
 import { controller } from '../../lib/controller';
 import ModelGroup from '../models/ModelGroup';
 import ToolPathModelGroup from '../models/ToolPathModelGroup';
@@ -13,6 +13,9 @@ import {
 import { actions as sharedActions, CNC_LASER_STAGE } from '../cncLaserShared';
 
 const INITIAL_STATE = {
+
+    page: PAGE_EDITOR,
+
     stage: CNC_LASER_STAGE.EMPTY,
     progress: 0,
 
@@ -22,12 +25,17 @@ const INITIAL_STATE = {
     isAllModelsPreviewed: false,
     isGcodeGenerating: false,
     gcodeFile: null,
+
     // model: null,
     selectedModelID: null,
     sourceType: '',
-    mode: '', // bw, greyscale, vector
+    mode: '',
+    showOrigin: null,
+
     printOrder: 1,
     transformation: {},
+    transformationUpdateTime: new Date().getTime(),
+
     gcodeConfig: {},
     config: {},
 
@@ -47,7 +55,6 @@ const INITIAL_STATE = {
         group: new THREE.Group()
     },
 
-    previewUpdated: 0,
     previewFailed: false,
     autoPreviewEnabled: true,
 
@@ -58,20 +65,6 @@ const INITIAL_STATE = {
 const ACTION_SET_BACKGROUND_ENABLED = 'laser/ACTION_SET_BACKGROUND_ENABLED';
 
 export const actions = {
-    /*
-    init: () => (dispatch) => {
-        const controllerEvents = {
-            'taskCompleted:generateToolPath': (taskResult) => {
-                dispatch(sharedActions.onReceiveTaskResult(taskResult));
-            }
-        };
-
-        Object.keys(controllerEvents).forEach(event => {
-            controller.on(event, controllerEvents[event]);
-        });
-    },
-    */
-
     init: () => (dispatch) => {
         const controllerEvents = {
             'taskCompleted:generateToolPath': (taskResult) => {
@@ -149,8 +142,8 @@ export const actions = {
 };
 
 export default function reducer(state = INITIAL_STATE, action) {
-    const { from, type } = action;
-    if (from === 'laser') {
+    const { headType, type } = action;
+    if (headType === 'laser') {
         switch (type) {
             case ACTION_UPDATE_STATE: {
                 return Object.assign({}, state, { ...action.state });
@@ -162,7 +155,8 @@ export default function reducer(state = INITIAL_STATE, action) {
             }
             case ACTION_UPDATE_TRANSFORMATION: {
                 return Object.assign({}, state, {
-                    transformation: { ...state.transformation, ...action.transformation }
+                    transformation: { ...state.transformation, ...action.transformation },
+                    transformationUpdateTime: new Date().getTime()
                 });
             }
             case ACTION_UPDATE_GCODE_CONFIG: {
diff --git a/src/app/flux/models/Model.js b/src/app/flux/models/Model.js
index 12e8b0548d..1782ca8e02 100644
--- a/src/app/flux/models/Model.js
+++ b/src/app/flux/models/Model.js
@@ -6,6 +6,7 @@ import { DATA_PREFIX } from '../../constants';
 import { sizeModelByMachineSize } from './ModelInfoUtils';
 
 import ThreeUtils from '../../components/three-extensions/ThreeUtils';
+import api from '../../api';
 
 const EVENTS = {
     UPDATE: { type: 'update' }
@@ -35,22 +36,28 @@ const DEFAULT_TRANSFORMATION = {
 
 // class Model extends THREE.Mesh {
 class Model {
+    modeConfigs = {}
+
     constructor(modelInfo) {
-        const { limitSize, headerType, sourceType, sourceHeight, sourceWidth, originalName, uploadName, mode, geometry, material,
-            transformation } = modelInfo;
+        const { limitSize, headType, sourceType, sourceHeight, sourceWidth, originalName, uploadName, config, mode, geometry, material,
+            transformation, processImageName } = modelInfo;
         this.limitSize = limitSize;
 
         this.meshObject = new THREE.Mesh(geometry, material);
 
+        console.log('this.meshObject', this.meshObject);
+
         this.modelID = uuid.v4();
 
-        this.headerType = headerType;
+        this.headType = headType;
         this.sourceType = sourceType; // 3d, raster, svg, text
         this.sourceHeight = sourceHeight;
         this.sourceWidth = sourceWidth;
         this.originalName = originalName;
         this.uploadName = uploadName;
+        this.config = config;
         this.mode = mode;
+        this.processImageName = processImageName;
 
         this.transformation = {
             ...DEFAULT_TRANSFORMATION,
@@ -63,25 +70,34 @@ class Model {
         }
 
         this.modelObject3D = null;
+        this.processObject3D = null;
 
         this.estimatedTime = 0;
 
         this.boundingBox = null;
         this.overstepped = false;
         this.convexGeometry = null;
+        this.showOrigin = this.sourceType !== 'raster';
     }
 
     getTaskInfo() {
         return {
-            headerType: this.headerType,
-            sourceType: this.sourceType,
             modelID: this.modelID,
+            headType: this.headType,
+            sourceType: this.sourceType,
+            mode: this.mode,
+
             sourceHeight: this.sourceHeight,
             sourceWidth: this.sourceWidth,
             originalName: this.originalName,
             uploadName: this.uploadName,
-            mode: this.mode,
-            transformation: this.transformation
+
+            transformation: {
+                ...this.transformation
+            },
+            config: {
+                ...this.config
+            }
         };
     }
 
@@ -121,11 +137,107 @@ class Model {
 
 
             this.meshObject.add(this.modelObject3D);
+            this.modelObject3D.visible = this.showOrigin;
         }
 
         this.updateTransformation(this.transformation);
     }
 
+    generateProcessObject3D() {
+        if (!this.processImageName) {
+            return;
+        }
+        if (this.sourceType === 'raster') {
+            const uploadPath = `${DATA_PREFIX}/${this.processImageName}`;
+            // const texture = new THREE.TextureLoader().load(uploadPath);
+            const texture = new THREE.TextureLoader().load(uploadPath, () => {
+                this.meshObject.dispatchEvent(EVENTS.UPDATE);
+            });
+            const material = new THREE.MeshBasicMaterial({
+                color: 0xffffff,
+                transparent: true,
+                opacity: 1,
+                map: texture,
+                side: THREE.DoubleSide
+            });
+            if (this.processObject3D) {
+                this.meshObject.remove(this.processObject3D);
+                this.processObject3D = null;
+            }
+            const { width, height } = sizeModelByMachineSize(this.limitSize, this.sourceWidth, this.sourceHeight);
+            this.meshObject.geometry = new THREE.PlaneGeometry(width, height);
+            this.processObject3D = new THREE.Mesh(this.meshObject.geometry, material);
+
+
+            this.meshObject.add(this.processObject3D);
+            this.processObject3D.visible = !this.showOrigin;
+        }
+
+        this.updateTransformation(this.transformation);
+    }
+
+    changeShowOrigin() {
+        this.showOrigin = !this.showOrigin;
+        this.modelObject3D.visible = this.showOrigin;
+        this.processObject3D.visible = !this.showOrigin;
+        return this.showOrigin;
+    }
+
+    updateVisible(param) {
+        if (param === false) {
+            this.modelObject3D && (this.modelObject3D.visible = param);
+            this.processObject3D && (this.processObject3D.visible = param);
+        } else {
+            this.modelObject3D && (this.modelObject3D.visible = this.showOrigin);
+            this.processObject3D && (this.processObject3D.visible = !this.showOrigin);
+        }
+    }
+
+    async processMode(mode, config) {
+        if (this.sourceType !== 'raster') {
+            return;
+        }
+        const { width, height } = sizeModelByMachineSize(this.limitSize, this.sourceWidth, this.sourceHeight);
+
+        if (this.mode !== mode) {
+            this.modeConfigs[this.mode] = {
+                config: {
+                    ...this.config
+                }
+            };
+            if (this.modeConfigs[mode]) {
+                this.config = {
+                    ...this.modeConfigs[mode].config
+                };
+            } else {
+                this.config = {
+                    ...config
+                };
+            }
+            this.mode = mode;
+        }
+
+
+        const res = await api.processImage({
+            headType: this.headType,
+            uploadName: this.uploadName,
+            config: {
+                ...this.config,
+                density: 4
+            },
+            sourceType: this.sourceType,
+            mode: mode,
+            transformation: {
+                width: width,
+                height: height,
+                rotationZ: 0
+            }
+        });
+
+        this.processImageName = res.body.filename;
+        this.generateProcessObject3D();
+    }
+
     onTransform() {
         const geometrySize = ThreeUtils.getGeometrySize(this.meshObject.geometry, true);
         const { position, rotation, scale } = this.meshObject;
@@ -191,6 +303,42 @@ class Model {
         }
         if (flip !== undefined) {
             this.transformation.flip = flip;
+            if (this.modelObject3D) {
+                if (flip === 0) {
+                    this.modelObject3D.rotation.x = 0;
+                    this.modelObject3D.rotation.y = 0;
+                }
+                if (flip === 1) {
+                    this.modelObject3D.rotation.x = Math.PI;
+                    this.modelObject3D.rotation.y = 0;
+                }
+                if (flip === 2) {
+                    this.modelObject3D.rotation.x = 0;
+                    this.modelObject3D.rotation.y = Math.PI;
+                }
+                if (flip === 3) {
+                    this.modelObject3D.rotation.x = Math.PI;
+                    this.modelObject3D.rotation.y = Math.PI;
+                }
+            }
+            if (this.processObject3D) {
+                if (flip === 0) {
+                    this.processObject3D.rotation.x = 0;
+                    this.processObject3D.rotation.y = 0;
+                }
+                if (flip === 1) {
+                    this.processObject3D.rotation.x = Math.PI;
+                    this.processObject3D.rotation.y = 0;
+                }
+                if (flip === 2) {
+                    this.processObject3D.rotation.x = 0;
+                    this.processObject3D.rotation.y = Math.PI;
+                }
+                if (flip === 3) {
+                    this.processObject3D.rotation.x = Math.PI;
+                    this.processObject3D.rotation.y = Math.PI;
+                }
+            }
         }
         if (width || height) {
             const geometrySize = ThreeUtils.getGeometrySize(this.meshObject.geometry, true);
@@ -217,18 +365,19 @@ class Model {
         this.originalName = originalName || this.originalName;
         this.uploadName = uploadName || this.uploadName;
 
-
         // this.displayModelObject3D(uploadName, sourceWidth, sourceHeight);
         // const width = this.transformation.width;
         // const height = sourceHeight / sourceWidth * width;
         this.generateModelObject3D();
+        this.generateProcessObject3D();
     }
 
-    updateConfig(config) {
+    async updateConfig(config) {
         this.config = {
             ...this.config,
             ...config
         };
+        await this.processMode(this.mode, this.config);
     }
 
     updateGcodeConfig(gcodeConfig) {
@@ -327,6 +476,7 @@ class Model {
         });
         clone.modelID = this.modelID;
         clone.generateModelObject3D();
+        clone.generateProcessObject3D();
         // this.updateMatrix();
         // clone.setMatrix(this.mesh.Object.matrix);
         this.meshObject.updateMatrix();
diff --git a/src/app/flux/models/ModelGroup.js b/src/app/flux/models/ModelGroup.js
index 676cf7bd89..ebe00b123a 100644
--- a/src/app/flux/models/ModelGroup.js
+++ b/src/app/flux/models/ModelGroup.js
@@ -19,7 +19,6 @@ class ModelGroup {
         this.estimatedTime = 0;
 
         this.candidatePoints = null;
-        this.onSelectedModelTransformChanged = null;
 
         this._bbox = null;
 
@@ -33,20 +32,22 @@ class ModelGroup {
     }
 
     onModelUpdate = () => {
+        console.log('onModelUpdate');
         this.object.dispatchEvent(EVENTS.UPDATE);
     };
 
-    _getState(model) {
-        const { headerType, sourceType, mode, modelID, transformation, boundingBox, originalName } = model;
+    getState(model) {
+        const { modelID, sourceType, mode, showOrigin, transformation, config, boundingBox } = model;
+        console.log('hasModel', this._hasModel());
         return {
-            headerType: headerType,
-            sourceType: sourceType,
-            originalName: originalName,
-            mode: mode,
+            modelID,
+            sourceType,
+            mode,
+            showOrigin,
+            transformation,
+            config,
+            boundingBox,
             selectedModelID: modelID,
-            modelID: modelID,
-            transformation: { ...transformation },
-            boundingBox, // only used in 3dp
             estimatedTime: this.estimatedTime,
             hasModel: this._hasModel(),
             isAnyModelOverstepped: this._checkAnyModelOverstepped()
@@ -76,6 +77,10 @@ class ModelGroup {
         return this.models.find(d => d.modelID === modelID);
     }
 
+    changeShowOrigin() {
+        return this.selectedModel && this.selectedModel.changeShowOrigin();
+    }
+
     removeSelectedModel() {
         const selected = this.getSelectedModel();
         if (selected) {
@@ -140,7 +145,6 @@ class ModelGroup {
                 } else {
                     const left = [];
                     const right = [];
-                    const newArray = [];
                     const pivot = origArray.pop();
                     const length = origArray.length;
                     for (let i = 0; i < length; i++) {
@@ -150,7 +154,7 @@ class ModelGroup {
                             right.push(origArray[i]);
                         }
                     }
-                    return newArray.concat(quickSort(left), pivot, quickSort(right));
+                    return [].concat(quickSort(left), pivot, quickSort(right));
                 }
             };
 
@@ -216,7 +220,6 @@ class ModelGroup {
             this.models.push(model);
             this.object.add(model.meshObject);
         }
-        this.onSelectedModelTransformChanged && this.onSelectedModelTransformChanged();
     }
 
     setConvexGeometry(uploadName, convexGeometry) {
@@ -277,14 +280,6 @@ class ModelGroup {
         return models;
     }
 
-    getModelState(modelID) {
-        const model = this.getModel(modelID);
-        if (model) {
-            return this._getState(model);
-        }
-        return null;
-    }
-
     selectModel(modelMeshObject) {
         if (modelMeshObject) {
             const model = this.models.find(d => d.meshObject === modelMeshObject);
@@ -293,7 +288,7 @@ class ModelGroup {
                 this.estimatedTime = model.estimatedTime;
             }
             model.computeBoundingBox();
-            return this._getState(model);
+            return this.getState(model);
         }
         return null;
     }
@@ -322,7 +317,7 @@ class ModelGroup {
             this.models.push(model);
             this.object.add(model.meshObject);
         }
-        return this.selectedModel ? this._getState(this.selectedModel) : this._emptyState;
+        return this.selectedModel ? this.getState(this.selectedModel) : this._emptyState;
     }
 
     multiplySelectedModel(count) {
@@ -357,26 +352,25 @@ class ModelGroup {
     }
 
     getSelectedModelState() {
-        return this._getState(this.selectedModel);
+        return this.getState(this.selectedModel);
     }
 
     getSelectedModel() {
         return this.selectedModel;
     }
 
-    getSelectedModelTaskInfo() {
-        if (this.selectedModel) {
-            return this.selectedModel.getTaskInfo();
-        }
-        return null;
+    async updateSelectedMode(mode, config) {
+        await this.selectedModel.processMode(mode, config);
+        return this.getState(this.selectedModel);
     }
 
-    generateModel(modelInfo) {
+    async generateModel(modelInfo) {
         const model = new Model(modelInfo);
         model.meshObject.addEventListener('update', this.onModelUpdate);
         model.generateModelObject3D();
+        await model.processMode(modelInfo.mode, modelInfo.config);
         this.addModel(model);
-        return this._getState(model);
+        return this.getState(model);
     }
 
     updateSelectedSource(source) {
@@ -394,7 +388,7 @@ class ModelGroup {
 
         selected.layFlat();
         selected.computeBoundingBox();
-        return this._getState(selected);
+        return this.getState(selected);
     }
 
     onModelTransform() {
@@ -415,7 +409,7 @@ class ModelGroup {
     updateSelectedModelTransformation(transformation) {
         if (this.selectedModel) {
             this.selectedModel.updateTransformation(transformation);
-            return this._getState(this.selectedModel);
+            return this.getState(this.selectedModel);
         }
         return null;
     }
@@ -431,23 +425,18 @@ class ModelGroup {
             selected.stickToPlate();
         }
         selected.computeBoundingBox();
-        return this._getState(selected);
-    }
-
-    showAllModelsObj3D() {
-        for (const model of this.models) {
-            model && model.modelObject3D && (model.modelObject3D.visible = true);
-        }
+        return this.getState(selected);
     }
 
-    showModelObj3D(modelID) {
-        const model = this.getModel(modelID);
-        model && model.modelObject3D && (model.modelObject3D.visible = true);
+    async updateSelectedConfig(config) {
+        await this.selectedModel.updateConfig(config);
     }
 
-    hideModelObj3D(modelID) {
-        const model = this.getModel(modelID);
-        model && model.modelObject3D && (model.modelObject3D.visible = false);
+    showAllModelsObj3D() {
+        this.object.visible = true;
+        for (const model of this.getModels()) {
+            model.updateVisible(true);
+        }
     }
 
     _computeAvailableXZ(model) {
@@ -519,7 +508,7 @@ class ModelGroup {
         const boundingBox = { max: { x: null, y: null, z: null }, min: { x: null, y: null, z: null } };
         for (const model of this.models) {
             let modelBoundingBox;
-            if (model.headerType === '3dp') {
+            if (model.headType === '3dp') {
                 modelBoundingBox = model.boundingBox;
             } else {
                 modelBoundingBox = {
diff --git a/src/app/flux/models/ModelInfoUtils.js b/src/app/flux/models/ModelInfoUtils.js
index 35d7f15471..19b641dc7d 100644
--- a/src/app/flux/models/ModelInfoUtils.js
+++ b/src/app/flux/models/ModelInfoUtils.js
@@ -4,9 +4,6 @@ const DEFAULT_FILL_ENABLED = false;
 const DEFAULT_FILL_DENSITY = 4;
 
 const DEFAULT_TEXT_CONFIG = {
-    optimizePath: false,
-    fillEnabled: DEFAULT_FILL_ENABLED,
-    fillDensity: DEFAULT_FILL_DENSITY,
     text: 'Snapmaker',
     name: 'text.svg',
     size: 24,
@@ -29,8 +26,8 @@ const sizeModelByMachineSize = (size, width, height) => {
     return { width: width_, height: height_ };
 };
 
-const checkParams = (headerType, sourceType, mode) => {
-    if (headerType !== 'laser' && headerType !== 'cnc' && headerType !== '3dp') {
+const checkParams = (headType, sourceType, mode) => {
+    if (headType !== 'laser' && headType !== 'cnc' && headType !== '3dp') {
         return false;
     }
     if (!['3d', 'raster', 'svg', 'dxf', 'text'].includes(sourceType)) {
@@ -48,23 +45,19 @@ const generateLaserDefaults = (mode, sourceType) => {
     switch (mode) {
         case 'bw': {
             config = {
-                invertGreyscale: false,
-                bwThreshold: 168,
-                density: DEFAULT_FILL_DENSITY,
-                direction: 'Horizontal'
+                invert: false,
+                bwThreshold: 168
             };
             break;
         }
         case 'greyscale': {
             config = {
-                invertGreyscale: false,
+                invert: false,
                 contrast: 50,
                 brightness: 50,
                 whiteClip: 255,
                 bwThreshold: 168,
-                algorithm: 'Atkinson',
-                movementMode: 'greyscale-dot', // greyscale-line, greyscale-dot
-                density: 7
+                algorithm: 'Atkinson'
             };
             break;
         }
@@ -72,28 +65,20 @@ const generateLaserDefaults = (mode, sourceType) => {
             switch (sourceType) {
                 case 'raster': {
                     config = {
-                        optimizePath: true,
-                        fillEnabled: DEFAULT_FILL_ENABLED,
-                        fillDensity: DEFAULT_FILL_DENSITY,
                         vectorThreshold: 128,
-                        isInvert: false,
+                        invert: false,
                         turdSize: 2
                     };
                     break;
                 }
                 case 'svg': {
                     config = {
-                        optimizePath: false,
-                        fillEnabled: DEFAULT_FILL_ENABLED,
-                        fillDensity: DEFAULT_FILL_DENSITY
                     };
                     break;
                 }
                 case 'dxf': {
                     config = {
-                        optimizePath: false,
-                        fillEnabled: DEFAULT_FILL_ENABLED,
-                        fillDensity: DEFAULT_FILL_DENSITY
+
                     };
                     break;
                 }
@@ -123,6 +108,8 @@ const generateLaserDefaults = (mode, sourceType) => {
             // Default movement mode is greyscale-line
             // greyscale-line: workSpeed: 500, dwellTime: null
             // greyscale-dot: workSpeed: null, dwellTime: 42
+            movementMode: 'greyscale-dot', // greyscale-line, greyscale-dot
+            density: 7,
             jogSpeed: 1500,
             workSpeed: 2500,
             plungeSpeed: ABSENT_VALUE,
@@ -135,6 +122,8 @@ const generateLaserDefaults = (mode, sourceType) => {
         };
     } else if (mode === 'bw') {
         gcodeConfig = {
+            direction: 'Horizontal',
+            density: DEFAULT_FILL_DENSITY,
             jogSpeed: 3000,
             workSpeed: 800,
             plungeSpeed: ABSENT_VALUE,
@@ -146,88 +135,136 @@ const generateLaserDefaults = (mode, sourceType) => {
             multiPassDepth: 1
         };
     } else {
-        gcodeConfig = {
-            jogSpeed: 3000,
-            workSpeed: 140,
-            plungeSpeed: ABSENT_VALUE,
-            dwellTime: ABSENT_VALUE,
-            fixedPowerEnabled: false,
-            fixedPower: 100,
-            multiPassEnabled: true,
-            multiPasses: 2,
-            multiPassDepth: 0.6
-        };
+        if (sourceType === 'raster') {
+            gcodeConfig = {
+                optimizePath: true,
+                fillEnabled: DEFAULT_FILL_ENABLED,
+                fillDensity: DEFAULT_FILL_DENSITY,
+                jogSpeed: 3000,
+                workSpeed: 140,
+                plungeSpeed: ABSENT_VALUE,
+                dwellTime: ABSENT_VALUE,
+                fixedPowerEnabled: false,
+                fixedPower: 100,
+                multiPassEnabled: true,
+                multiPasses: 2,
+                multiPassDepth: 0.6
+            };
+        } else {
+            gcodeConfig = {
+                optimizePath: false,
+                fillEnabled: DEFAULT_FILL_ENABLED,
+                fillDensity: DEFAULT_FILL_DENSITY,
+                jogSpeed: 3000,
+                workSpeed: 140,
+                plungeSpeed: ABSENT_VALUE,
+                dwellTime: ABSENT_VALUE,
+                fixedPowerEnabled: false,
+                fixedPower: 100,
+                multiPassEnabled: true,
+                multiPasses: 2,
+                multiPassDepth: 0.6
+            };
+        }
     }
     return { config, gcodeConfig };
 };
 
-const generateCNCDefaults = (mode) => {
+const generateCNCDefaults = (mode, sourceType) => {
     let config = null;
+    let gcodeConfig = null;
     switch (mode) {
         case 'greyscale':
             config = {
-                toolDiameter: 3.175, // tool diameter (in mm)
-                toolAngle: 30, // tool angle (in degree, defaults to 30° for V-Bit)
-                targetDepth: 1.0,
-                stepDown: 0.1,
-                safetyHeight: 5.0,
-                stopHeight: 10,
-                isInvert: true,
-                density: 5
+                invert: true
             };
             break;
         case 'vector':
-            config = {
-                toolDiameter: 3.175, // tool diameter (in mm)
-                toolAngle: 30, // tool angle (in degree, defaults to 30° for V-Bit)
-                pathType: 'path',
-                targetDepth: 1.0,
-                stepDown: 0.5,
-                safetyHeight: 5.0,
-                stopHeight: 10,
-                enableTab: false,
-                tabWidth: 2,
-                tabHeight: -0.5,
-                tabSpace: 24,
-                anchor: 'Center',
-                ...DEFAULT_TEXT_CONFIG
-            };
+            switch (sourceType) {
+                case 'raster': {
+                    config = {
+                    };
+                    break;
+                }
+                case 'svg': {
+                    config = {
+                    };
+                    break;
+                }
+                case 'dxf': {
+                    config = {
+
+                    };
+                    break;
+                }
+                case 'text': {
+                    config = {
+                        ...DEFAULT_TEXT_CONFIG
+                    };
+                    break;
+                }
+                default:
+                    break;
+            }
             break;
         case 'trace':
             config = {
-                toolDiameter: 3.175, // tool diameter (in mm)
-                toolAngle: 30, // tool angle (in degree, defaults to 30° for V-Bit)
-                pathType: 'path',
-                targetDepth: 1.0,
-                stepDown: 0.2,
-                safetyHeight: 0.2,
-                stopHeight: 10,
-                enableTab: false,
-                tabWidth: 2,
-                tabHeight: -0.5,
-                tabSpace: 24,
-                anchor: 'Center'
             };
             break;
         default:
             break;
     }
 
-    const gcodeConfig = {
-        jogSpeed: 3000,
-        workSpeed: 600,
-        plungeSpeed: 600,
-        dwellTime: ABSENT_VALUE
-    };
+    if (mode === 'greyscale') {
+        gcodeConfig = {
+            // Default movement mode is greyscale-line
+            // greyscale-line: workSpeed: 500, dwellTime: null
+            // greyscale-dot: workSpeed: null, dwellTime: 42
+            toolDiameter: 3.175, // tool diameter (in mm)
+            toolAngle: 30, // tool angle (in degree, defaults to 30° for V-Bit)
+            targetDepth: 1.0,
+            stepDown: 0.1,
+            safetyHeight: 5.0,
+            stopHeight: 10,
+            density: 5,
+            jogSpeed: 3000,
+            workSpeed: 600,
+            plungeSpeed: 600,
+            dwellTime: ABSENT_VALUE
+        };
+    } else {
+        gcodeConfig = {
+            toolDiameter: 3.175, // tool diameter (in mm)
+            toolAngle: 30, // tool angle (in degree, defaults to 30° for V-Bit)
+            optimizePath: false,
+            fillEnabled: DEFAULT_FILL_ENABLED,
+            fillDensity: DEFAULT_FILL_DENSITY,
+            pathType: 'path',
+            targetDepth: 1.0,
+            stepDown: 0.2,
+            safetyHeight: 0.2,
+            stopHeight: 10,
+            enableTab: false,
+            tabWidth: 2,
+            tabHeight: -0.5,
+            tabSpace: 24,
+            anchor: 'Center',
+            jogSpeed: 3000,
+            workSpeed: 600,
+            plungeSpeed: 600,
+            dwellTime: ABSENT_VALUE
+        };
+    }
+
     return { config, gcodeConfig };
 };
 
-const generateModelDefaultConfigs = (headerType, sourceType, mode) => {
+const generateModelDefaultConfigs = (headType, sourceType, mode) => {
     let defaultConfigs = {};
-    if (headerType === 'laser') {
+    if (headType === 'laser') {
         defaultConfigs = generateLaserDefaults(mode, sourceType);
-    } else if (headerType === 'cnc') {
-        defaultConfigs = generateCNCDefaults(mode);
+    } else if (headType === 'cnc') {
+        defaultConfigs = generateCNCDefaults(mode, sourceType);
     }
     return defaultConfigs;
 };
diff --git a/src/app/flux/models/ToolPathModel.js b/src/app/flux/models/ToolPathModel.js
index ea31648d70..8a4b57c44f 100644
--- a/src/app/flux/models/ToolPathModel.js
+++ b/src/app/flux/models/ToolPathModel.js
@@ -10,33 +10,62 @@ const GCODE_CONFIG_PLACEHOLDER = {
 };
 
 class ToolPathModel {
+    modeConfigs = {}
+
     constructor(toolPathModelInfo) {
-        const { modelID, config, gcodeConfig } = toolPathModelInfo;
+        const { mode, modelID, gcodeConfig, modeConfigs } = toolPathModelInfo;
 
         this.modelID = modelID;
+        this.mode = mode;
 
         this.id = null;
 
         this.printOrder = 1;
         this.gcodeConfigPlaceholder = GCODE_CONFIG_PLACEHOLDER;
 
-        this.config = {
-            ...config
-        };
         this.gcodeConfig = {
             ...gcodeConfig
         };
+        this.modeConfigs = {
+            ...modeConfigs
+        };
 
+        this.needPreview = true;
         this.toolPathFilename = null;
         this.toolPathObj3D = null;
     }
 
+    updateVisible(param) {
+        this.toolPathObj3D && (this.toolPathObj3D.visible = param);
+    }
 
-    updateConfig(config) {
-        this.config = {
-            ...this.config,
-            ...config
+    updateNeedPreview(param) {
+        this.needPreview = param;
+        if (param) {
+            this.id = '';
+        }
+    }
+
+    updateMode(mode, gcodeConfig) {
+        if (mode === this.mode) {
+            return;
+        }
+        this.updateNeedPreview(true);
+        this.modeConfigs[this.mode] = {
+            gcodeConfig: {
+                ...this.gcodeConfig
+            }
         };
+        if (this.modeConfigs[mode]) {
+            this.gcodeConfig = {
+                ...this.modeConfigs[mode].gcodeConfig
+            };
+        } else {
+            this.gcodeConfig = {
+                ...gcodeConfig
+            };
+        }
+        this.mode = mode;
     }
 
     updateGcodeConfig(gcodeConfig) {
@@ -44,14 +73,15 @@ class ToolPathModel {
             ...this.gcodeConfig,
             ...gcodeConfig
         };
+        this.updateNeedPreview(true);
     }
 
     getTaskInfo() {
         return {
             id: this.id,
-            config: this.config,
-            gcodeConfig: this.gcodeConfig,
             printOrder: this.printOrder,
+            needPreview: this.needPreview,
+            gcodeConfig: this.gcodeConfig,
             toolPathFilename: this.toolPathFilename,
             gcodeConfigPlaceholder: this.gcodeConfigPlaceholder
         };
@@ -81,13 +111,6 @@ class ToolPathModel {
         });
     }
 
-    // generateGcode() {
-    //     const gcodeGenerator = new GcodeGenerator();
-    //     const toolPath = this.toolPath;
-    //
-    //     return gcodeGenerator.parseToolPathObjToGcode(toolPath, this.gcodeConfig);
-    // }
-
     clone() {
         const toolPathModel = new ToolPathModel(this);
         toolPathModel.printOrder = this.printOrder;
diff --git a/src/app/flux/models/ToolPathModelGroup.js b/src/app/flux/models/ToolPathModelGroup.js
index 6aa91663ca..3d48ad0864 100644
--- a/src/app/flux/models/ToolPathModelGroup.js
+++ b/src/app/flux/models/ToolPathModelGroup.js
@@ -5,25 +5,23 @@ import ToolPathModel from './ToolPathModel';
 class ToolPathModelGroup {
     constructor() {
         this.object = new Group();
+        this.object.visible = false;
 
         this.toolPathModels = [];
         this.selectedToolPathModel = null;
 
         this._emptyState = {
             printOrder: 0,
-            gcodeConfig: {},
-            config: {}
+            gcodeConfig: {}
         };
     }
 
-    _getState(model) {
-        const { modelID, config, gcodeConfig, printOrder } = model;
-
+    getState(toolPathModel) {
+        const { modelID, printOrder, gcodeConfig } = toolPathModel;
         return {
-            modelID: modelID,
-            config,
-            gcodeConfig,
-            printOrder
+            modelID,
+            printOrder,
+            gcodeConfig
         };
     }
 
@@ -39,20 +37,21 @@ class ToolPathModelGroup {
         return null;
     }
 
-    getSelectedToolPathModelState() {
-        return this._getState(this.selectedToolPathModel);
-    }
-
     selectToolPathModel(modelID) {
         this.selectedToolPathModel = this.getToolPathModel(modelID);
-        return this._getState(this.selectedToolPathModel);
+        return this.getState(this.selectedToolPathModel);
+    }
+
+    updateSelectedMode(mode, gcodeConfig) {
+        this.selectedToolPathModel.updateMode(mode, gcodeConfig);
+        return this.getState(this.selectedToolPathModel);
     }
 
     generateToolPathModel(modelInfo) {
         const toolPathModel = new ToolPathModel(modelInfo);
         this.addToolPathModel(toolPathModel);
         this.selectedToolPathModel = toolPathModel;
-        return this._getState(toolPathModel);
+        return this.getState(toolPathModel);
     }
 
     addToolPathModel(toolPathModel) {
@@ -72,8 +71,12 @@ class ToolPathModelGroup {
         return this.toolPathModels.find(d => d.modelID === modelID);
     }
 
-    cancelSelectedPreview() {
-        this.selectedToolPathModel && (this.selectedToolPathModel.id = '');
+    getToolPathModels() {
+        const toolPathModels = [];
+        for (const toolPathModel of this.toolPathModels) {
+            toolPathModels.push(toolPathModel);
+        }
+        return toolPathModels;
     }
 
     getToolPathModelTaskInfo(modelID) {
@@ -91,33 +94,36 @@ class ToolPathModelGroup {
     }
 
     updateSelectedGcodeConfig(gcodeConfig) {
-        this.selectedToolPathModel && (this.selectedToolPathModel.updateGcodeConfig(gcodeConfig));
+        this.selectedToolPathModel.updateGcodeConfig(gcodeConfig);
     }
 
-    updateSelectedConfig(config) {
-        this.selectedToolPathModel && (this.selectedToolPathModel.updateConfig(config));
+    updateSelectedNeedPreview(param) {
+        this.selectedToolPathModel && this.selectedToolPathModel.updateNeedPreview(param);
     }
 
-    updateAllModelConfig(config) {
-        for (const toolPathModel of this.toolPathModels) {
-            toolPathModel.updateConfig(config);
+    updateAllNeedPreview(param) {
+        for (const toolPathModel of this.getToolPathModels()) {
+            toolPathModel.updateNeedPreview(param);
         }
     }
 
-    hideAllModelsObj3D() {
+    // updateSelectedConfig(config) {
+    //     this.selectedToolPathModel && (this.selectedToolPathModel.updateConfig(config));
+    //     this.selectedToolPathModel && (this.selectedToolPathModel.updateNeedPreview(true));
+    // }
+
+    updateAllModelGcodeConfig(config) {
         for (const toolPathModel of this.toolPathModels) {
-            toolPathModel && toolPathModel.toolPathObj3D && (toolPathModel.toolPathObj3D.visible = false);
+            toolPathModel.updateGcodeConfig(config);
         }
     }
 
-    showToolPathObj3D(modelID) {
-        const toolPathModel = this.getToolPathModel(modelID);
-        toolPathModel && toolPathModel.toolPathObj3D && (toolPathModel.toolPathObj3D.visible = true);
+    showAllToolPathModelsObj3D() {
+        this.object.visible = true;
     }
 
-    hideToolPathObj3D(modelID) {
-        const toolPathModel = this.getToolPathModel(modelID);
-        toolPathModel && toolPathModel.toolPathObj3D && (toolPathModel.toolPathObj3D.visible = false);
+    hideAllToolPathModelsObj3D() {
+        this.object.visible = false;
     }
 
     getToolPathModelByID(id) {
@@ -133,41 +139,19 @@ class ToolPathModelGroup {
                 return null;
             }
             if (toolPathModel.id === data.id) {
+                toolPathModel.updateNeedPreview(false);
                 this.object.add(toolPathModel.toolPathObj3D);
 
-                return this._getState(toolPathModel);
+                return this.getState(toolPathModel);
             }
         }
         return null;
     }
 
-    // generateGcode() {
-    //     const toolPathModels = this.toolPathModels.map(d => d).sort((d1, d2) => {
-    //         if (d1.printOrder > d2.printOrder) {
-    //             return 1;
-    //         } else if (d1.printOrder < d2.printOrder) {
-    //             return -1;
-    //         } else {
-    //             return 1;
-    //         }
-    //     });
-    //     return toolPathModels.map(model => {
-    //         return {
-    //             gcode: model.generateGcode(),
-    //             modelInfo: {
-    //                 modelID: model.modelID,
-    //                 estimatedTime: model.estimatedTime,
-    //                 config: model.config,
-    //                 gcodeConfig: model.gcodeConfig
-    //             }
-    //         };
-    //     });
-    // }
-
     undoRedo(toolPathModels) {
         for (const toolPathModel of this.toolPathModels) {
             this.object.remove(toolPathModel.toolPathObj3D);
-            toolPathModel.id = '';
+            toolPathModel.updateNeedPreview(true);
         }
         this.toolPathModels.splice(0);
         for (const toolPathModel of toolPathModels) {
diff --git a/src/app/flux/printing/index.js b/src/app/flux/printing/index.js
index 8048c8634e..b8e87fea2f 100644
--- a/src/app/flux/printing/index.js
+++ b/src/app/flux/printing/index.js
@@ -554,7 +554,7 @@ export const actions = {
         const uploadPath = `${DATA_PREFIX}/${uploadName}`;
 
         const { size } = getState().machine;
-        const headerType = '3dp';
+        const headType = '3dp';
         const sourceType = '3d';
         const mode = '3d';
         const width = 0;
@@ -565,7 +565,7 @@ export const actions = {
         // Tell worker to generate geometry for model
         const worker = new LoadModelWorker();
         worker.postMessage({ uploadPath });
-        worker.onmessage = (e) => {
+        worker.onmessage = async (e) => {
             const data = e.data;
 
             const { type } = data;
@@ -582,9 +582,9 @@ export const actions = {
                     // Create model
                     // modelGroup.generateModel(modelInfo);
 
-                    const modelState = modelGroup.generateModel({
+                    const modelState = await modelGroup.generateModel({
                         limitSize: size,
-                        headerType,
+                        headType,
                         sourceType,
                         originalName,
                         uploadName,
@@ -661,7 +661,7 @@ export const actions = {
         const { originalName, uploadName } = res.body;
         const uploadPath = `${DATA_PREFIX}/${uploadName}`;
 
-        const headerType = '3dp';
+        const headType = '3dp';
         const sourceType = '3d';
         const mode = '3d';
         const width = 0;
@@ -672,7 +672,7 @@ export const actions = {
         // Tell worker to generate geometry for model
         const worker = new LoadModelWorker();
         worker.postMessage({ uploadPath });
-        worker.onmessage = (e) => {
+        worker.onmessage = async (e) => {
             const data = e.data;
 
             const { type } = data;
@@ -689,9 +689,9 @@ export const actions = {
                     // Create model
                     // modelGroup.generateModel(modelInfo);
 
-                    const modelState = modelGroup.generateModel({
+                    const modelState = await modelGroup.generateModel({
                         limitSize: size,
-                        headerType,
+                        headType,
                         sourceType,
                         originalName,
                         uploadName,
@@ -903,6 +903,7 @@ export const actions = {
         dispatch(actions.updateState({
             displayedType: 'model'
         }));
+        console.log('displayModel');
         dispatch(actions.render());
     },
 
diff --git a/src/app/flux/widget/WidgetState.js b/src/app/flux/widget/WidgetState.js
index 9f9e466f5b..0eb1749cd9 100644
--- a/src/app/flux/widget/WidgetState.js
+++ b/src/app/flux/widget/WidgetState.js
@@ -41,7 +41,7 @@ const defaultState = {
     developerPanel: {
         primary: {
             widgets: [
-                /*'connectionPanel',*/
+                /* 'connectionPanel',*/
                 'axesPanel', 'macroPanel'
             ]
         },
diff --git a/src/app/widgets/LaserParams/images/laser-mode-bw-88x88.png b/src/app/images/cnc-laser/laser-mode-bw-88x88.png
similarity index 100%
rename from src/app/widgets/LaserParams/images/laser-mode-bw-88x88.png
rename to src/app/images/cnc-laser/laser-mode-bw-88x88.png
diff --git a/src/app/widgets/CNCPath/images/laser-mode-greyscale-88x88.png b/src/app/images/cnc-laser/laser-mode-greyscale-88x88.png
similarity index 100%
rename from src/app/widgets/CNCPath/images/laser-mode-greyscale-88x88.png
rename to src/app/images/cnc-laser/laser-mode-greyscale-88x88.png
diff --git a/src/app/widgets/CNCPath/images/laser-mode-text-88x88.png b/src/app/images/cnc-laser/laser-mode-text-88x88.png
similarity index 100%
rename from src/app/widgets/CNCPath/images/laser-mode-text-88x88.png
rename to src/app/images/cnc-laser/laser-mode-text-88x88.png
diff --git a/src/app/widgets/CNCPath/images/laser-mode-vector-88x88.png b/src/app/images/cnc-laser/laser-mode-vector-88x88.png
similarity index 100%
rename from src/app/widgets/CNCPath/images/laser-mode-vector-88x88.png
rename to src/app/images/cnc-laser/laser-mode-vector-88x88.png
diff --git a/src/app/images/cnc-laser/text-224x224.png b/src/app/images/cnc-laser/text-224x224.png
new file mode 100644
index 0000000000..fa3cc4b7e2
Binary files /dev/null and b/src/app/images/cnc-laser/text-224x224.png differ
diff --git a/src/app/images/cnc-laser/text-45x30.jpg b/src/app/images/cnc-laser/text-45x30.jpg
new file mode 100644
index 0000000000..3bd8b1bc9d
Binary files /dev/null and b/src/app/images/cnc-laser/text-45x30.jpg differ
diff --git a/src/app/widgets/CNCOutput/Output.jsx b/src/app/widgets/CNCOutput/Output.jsx
index bfb3183352..6fe5101c63 100644
--- a/src/app/widgets/CNCOutput/Output.jsx
+++ b/src/app/widgets/CNCOutput/Output.jsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import request from 'superagent';
 import { actions as workspaceActions } from '../../flux/workspace';
 import { actions as sharedActions } from '../../flux/cncLaserShared';
-import { DATA_PREFIX } from '../../constants';
+import { DATA_PREFIX, PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
 import modal from '../../lib/modal';
 import i18n from '../../lib/i18n';
 import Thumbnail from '../CncLaserShared/Thumbnail';
@@ -16,6 +16,7 @@ class Output extends PureComponent {
         setTitle: PropTypes.func.isRequired,
         minimized: PropTypes.bool.isRequired,
 
+        page: PropTypes.string.isRequired,
         modelGroup: PropTypes.object.isRequired,
         toolPathModelGroup: PropTypes.object.isRequired,
         previewFailed: PropTypes.bool.isRequired,
@@ -27,7 +28,8 @@ class Output extends PureComponent {
         generateGcode: PropTypes.func.isRequired,
         renderGcodeFile: PropTypes.func.isRequired,
         manualPreview: PropTypes.func.isRequired,
-        setAutoPreview: PropTypes.func.isRequired
+        setAutoPreview: PropTypes.func.isRequired,
+        togglePage: PropTypes.func.isRequired
     };
 
     thumbnail = React.createRef();
@@ -69,8 +71,15 @@ class Output extends PureComponent {
                 FileSaver.saveAs(blob, gcodeFile.name, true);
             });
         },
-        onToggleAutoPreview: (event) => {
-            this.props.setAutoPreview(event.target.checked);
+        onToggleAutoPreview: (value) => {
+            this.props.setAutoPreview(value);
+        },
+        onProcess: () => {
+            if (this.props.page === PAGE_EDITOR) {
+                this.props.togglePage(PAGE_PROCESS);
+            } else {
+                this.props.manualPreview();
+            }
         }
     };
 
@@ -90,7 +99,8 @@ class Output extends PureComponent {
 
     render() {
         const actions = this.actions;
-        const { workflowState, isGcodeGenerating, manualPreview, autoPreviewEnabled, gcodeFile } = this.props;
+        const { page, workflowState, isGcodeGenerating, autoPreviewEnabled, gcodeFile } = this.props;
+        const isProcess = page === PAGE_PROCESS;
 
         return (
             <div>
@@ -98,11 +108,11 @@ class Output extends PureComponent {
                     <button
                         type="button"
                         className="sm-btn-large sm-btn-default"
-                        disabled={autoPreviewEnabled}
-                        onClick={manualPreview}
+                        disabled={isProcess && autoPreviewEnabled}
+                        onClick={this.actions.onProcess}
                         style={{ display: 'block', width: '100%' }}
                     >
-                        {i18n._('Preview')}
+                        {isProcess ? i18n._('Preview') : i18n._('Process')}
                     </button>
                     <TipTrigger
                         title={i18n._('Auto Preview')}
@@ -113,8 +123,9 @@ class Output extends PureComponent {
                             <input
                                 type="checkbox"
                                 className="sm-parameter-row__checkbox"
+                                disabled={!isProcess}
                                 checked={autoPreviewEnabled}
-                                onChange={actions.onToggleAutoPreview}
+                                onChange={(event) => { actions.onToggleAutoPreview(event.target.checked); }}
                             />
                         </div>
                     </TipTrigger>
@@ -159,8 +170,9 @@ class Output extends PureComponent {
 
 const mapStateToProps = (state) => {
     const { workflowState } = state.machine;
-    const { isGcodeGenerating, gcodeFile, isAllModelsPreviewed, previewFailed, autoPreviewEnabled, modelGroup, toolPathModelGroup } = state.cnc;
+    const { page, isGcodeGenerating, gcodeFile, isAllModelsPreviewed, previewFailed, autoPreviewEnabled, modelGroup, toolPathModelGroup } = state.cnc;
     return {
+        page,
         modelGroup,
         toolPathModelGroup,
         isGcodeGenerating,
@@ -174,6 +186,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
+        togglePage: (page) => dispatch(sharedActions.togglePage('cnc', page)),
         generateGcode: (thumbnail) => dispatch(sharedActions.generateGcode('cnc', thumbnail)),
         renderGcodeFile: (file) => dispatch(workspaceActions.renderGcodeFile(file)),
         manualPreview: () => dispatch(sharedActions.manualPreview('cnc', true)),
diff --git a/src/app/widgets/CNCPath/CNCPath.jsx b/src/app/widgets/CNCPath/CNCPath.jsx
index 1bbe482520..ff9ee69ba9 100644
--- a/src/app/widgets/CNCPath/CNCPath.jsx
+++ b/src/app/widgets/CNCPath/CNCPath.jsx
@@ -1,22 +1,20 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { EXPERIMENTAL_IMAGE_TRACING_CNC } from '../../constants';
+import { PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
 import i18n from '../../lib/i18n';
 import { actions as sharedActions } from '../../flux/cncLaserShared';
 import SvgTrace from '../CncLaserShared/SvgTrace';
 import Transformation from '../CncLaserShared/Transformation';
 import GcodeParameters from '../CncLaserShared/GcodeParameters';
 import TextParameters from '../CncLaserShared/TextParameters';
-import ReliefParameters from './ReliefParameters';
 import VectorParameters from './VectorParameters';
-import Anchor from '../../components/Anchor';
 import Modal from '../../components/Modal';
 import modal from '../../lib/modal';
 import api from '../../api';
-import styles from './styles.styl';
+import ImageProcessMode from './ImageProcessMode';
+import ReliefGcodeParameters from './gcodeconfig/ReliefGcodeParameters';
 
 const getAccept = (uploadMode) => {
     let accept = '';
@@ -34,10 +32,13 @@ class CNCPath extends PureComponent {
     static propTypes = {
         setTitle: PropTypes.func.isRequired,
 
+        page: PropTypes.string.isRequired,
+
         // model: PropTypes.object,
         selectedModelID: PropTypes.string,
         sourceType: PropTypes.string,
         mode: PropTypes.string.isRequired,
+        showOrigin: PropTypes.bool,
         config: PropTypes.object.isRequired,
         transformation: PropTypes.object.isRequired,
         gcodeConfig: PropTypes.object.isRequired,
@@ -49,7 +50,9 @@ class CNCPath extends PureComponent {
         insertDefaultTextVector: PropTypes.func.isRequired,
         updateSelectedModelTextConfig: PropTypes.func.isRequired,
         onModelAfterTransform: PropTypes.func.isRequired,
-        setAutoPreview: PropTypes.func.isRequired
+        setAutoPreview: PropTypes.func.isRequired,
+        changeSelectedModelShowOrigin: PropTypes.func.isRequired,
+        changeSelectedModelMode: PropTypes.func.isRequired
     };
 
     fileInput = React.createRef();
@@ -167,17 +170,22 @@ class CNCPath extends PureComponent {
         const actions = this.actions;
         const { accept } = this.state;
         const {
+            page,
             selectedModelID, sourceType, mode,
+            showOrigin,
             transformation, updateSelectedModelTransformation,
             gcodeConfig, updateSelectedModelGcodeConfig,
             printOrder, updateSelectedModelPrintOrder, config, updateSelectedModelTextConfig,
-            onModelAfterTransform
+            onModelAfterTransform, changeSelectedModelShowOrigin, changeSelectedModelMode
         } = this.props;
         const { width, height } = this.state.modalSetting;
 
         const isRasterGreyscale = (sourceType === 'raster' && mode === 'greyscale');
         const isSvgVector = ((sourceType === 'svg' || sourceType === 'dxf') && mode === 'vector');
         const isTextVector = (sourceType === 'text' && mode === 'vector');
+        const isEditor = page === PAGE_EDITOR;
+        const isProcess = page === PAGE_PROCESS;
+        const isProcessMode = isEditor && sourceType === 'raster';
 
         return (
             <React.Fragment>
@@ -202,97 +210,66 @@ class CNCPath extends PureComponent {
                         </Modal.Body>
                     </Modal>
                 )}
-                <div className={styles['laser-modes']}>
-                    <div className={classNames(styles['laser-mode'])}>
-                        <Anchor
-                            className={styles['laser-mode__btn']}
-                            onClick={() => actions.onClickToUpload('greyscale')}
-                        >
-                            <i className={styles['laser-mode__icon-greyscale']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('RELIEF')}</span>
-                    </div>
-                    <div className={classNames(styles['laser-mode'])}>
-                        <Anchor
-                            className={styles['laser-mode__btn']}
-                            onClick={() => actions.onClickToUpload('vector')}
-                        >
-                            <i className={styles['laser-mode__icon-vector']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('VECTOR')}</span>
-                    </div>
-                    <div className={classNames(styles['laser-mode'])} style={{ marginRight: '0' }}>
-                        <Anchor
-                            className={classNames(styles['laser-mode__btn'])}
-                            onClick={() => actions.onClickInsertText()}
-                        >
-                            <i className={styles['laser-mode__icon-text']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('TEXT')}</span>
-                    </div>
-                    {EXPERIMENTAL_IMAGE_TRACING_CNC && (
-                        <div className={classNames(styles['laser-mode'])}>
-                            <Anchor
-                                className={styles['laser-mode__btn']}
-                                onClick={() => {
-                                    actions.onClickToUpload('trace');
-                                }}
-                            >
-                                <i className={styles['laser-mode__icon-vector']} />
-                            </Anchor>
-                            <span className={styles['laser-mode__text']}>{i18n._('TRACE')}</span>
-                        </div>
-                    )}
-                </div>
+                {isEditor && (
+                    <Transformation
+                        selectedModelID={selectedModelID}
+                        transformation={transformation}
+                        sourceType={sourceType}
+                        updateSelectedModelTransformation={updateSelectedModelTransformation}
+                        onModelAfterTransform={onModelAfterTransform}
+                    />
+                )}
                 {selectedModelID && (
                     <div className="sm-parameter-container">
-                        <div className={styles.separator} />
-                        <div style={{ marginTop: '15px' }} />
-                        <Transformation
-                            transformation={transformation}
-                            sourceType={sourceType}
-                            updateSelectedModelTransformation={updateSelectedModelTransformation}
-                            onModelAfterTransform={onModelAfterTransform}
-                        />
-                        {isRasterGreyscale && (
-                            <ReliefParameters />
+                        {isProcessMode && (
+                            <ImageProcessMode
+                                sourceType={sourceType}
+                                mode={mode}
+                                showOrigin={showOrigin}
+                                changeSelectedModelShowOrigin={changeSelectedModelShowOrigin}
+                                changeSelectedModelMode={changeSelectedModelMode}
+                            />
                         )}
-                        {isTextVector && (
+                        {isEditor && isTextVector && (
                             <TextParameters
                                 config={config}
                                 updateSelectedModelTextConfig={updateSelectedModelTextConfig}
                             />
                         )}
-                        {(isSvgVector || isTextVector) && (
+                        {isProcess && (isSvgVector || isTextVector) && (
                             <VectorParameters />
                         )}
-                        <GcodeParameters
-                            printOrder={printOrder}
-                            gcodeConfig={gcodeConfig}
-                            updateSelectedModelGcodeConfig={updateSelectedModelGcodeConfig}
-                            updateSelectedModelPrintOrder={updateSelectedModelPrintOrder}
-                            paramsDescs={
-                                {
-                                    jogSpeed: i18n._('Determines how fast the tool moves when it’s not carving.'),
-                                    workSpeed: i18n._('Determines how fast the tool feeds into the material.'),
-                                    plungeSpeed: i18n._('Determines how fast the tool moves on the material.')
-                                }
-                            }
-                        />
+                        {isProcess && isRasterGreyscale && (
+                            <ReliefGcodeParameters />
+                        )}
                     </div>
                 )}
+                {isProcess && (
+                    <GcodeParameters
+                        selectedModelID={selectedModelID}
+                        printOrder={printOrder}
+                        gcodeConfig={gcodeConfig}
+                        updateSelectedModelGcodeConfig={updateSelectedModelGcodeConfig}
+                        updateSelectedModelPrintOrder={updateSelectedModelPrintOrder}
+                        paramsDescs={
+                            {
+                                jogSpeed: i18n._('Determines how fast the tool moves when it’s not carving.'),
+                                workSpeed: i18n._('Determines how fast the tool feeds into the material.'),
+                                plungeSpeed: i18n._('Determines how fast the tool moves on the material.')
+                            }
+                        }
+                    />
+                )}
             </React.Fragment>
         );
     }
 }
 
 const mapStateToProps = (state) => {
-    // const { model, transformation, gcodeConfig, printOrder, config } = state.cnc;
-    // const sourceType = model ? model.modelInfo.source.type : '';
-    // const mode = model ? model.modelInfo.mode : '';
-    const { selectedModelID, sourceType, mode, transformation, gcodeConfig, printOrder, config } = state.cnc;
+    const { page, selectedModelID, sourceType, mode, showOrigin, transformation, gcodeConfig, printOrder, config } = state.cnc;
 
     return {
+        page,
         printOrder,
         transformation,
         gcodeConfig,
@@ -300,6 +277,7 @@ const mapStateToProps = (state) => {
         selectedModelID,
         sourceType,
         mode,
+        showOrigin,
         config
     };
 };
@@ -313,7 +291,9 @@ const mapDispatchToProps = (dispatch) => {
         setAutoPreview: (value) => dispatch(sharedActions.setAutoPreview('cnc', value)),
         insertDefaultTextVector: () => dispatch(sharedActions.insertDefaultTextVector('cnc')),
         updateSelectedModelTextConfig: (config) => dispatch(sharedActions.updateSelectedModelTextConfig('cnc', config)),
-        onModelAfterTransform: () => dispatch(sharedActions.onModelAfterTransform('cnc'))
+        onModelAfterTransform: () => dispatch(sharedActions.onModelAfterTransform('cnc')),
+        changeSelectedModelShowOrigin: () => dispatch(sharedActions.changeSelectedModelShowOrigin('cnc')),
+        changeSelectedModelMode: (sourceType, mode) => dispatch(sharedActions.changeSelectedModelMode('cnc', sourceType, mode))
     };
 };
 
diff --git a/src/app/widgets/CNCPath/ImageProcessMode.jsx b/src/app/widgets/CNCPath/ImageProcessMode.jsx
new file mode 100644
index 0000000000..60d5c1ec01
--- /dev/null
+++ b/src/app/widgets/CNCPath/ImageProcessMode.jsx
@@ -0,0 +1,89 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import i18n from '../../lib/i18n';
+import Anchor from '../../components/Anchor';
+import styles from '../CncLaserShared/styles.styl';
+import ReliefParameters from './config/ReliefParameters';
+
+class ImageProcessMode extends PureComponent {
+    static propTypes = {
+        sourceType: PropTypes.string.isRequired,
+        mode: PropTypes.string.isRequired,
+        showOrigin: PropTypes.bool,
+
+        changeSelectedModelMode: PropTypes.func.isRequired,
+        changeSelectedModelShowOrigin: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        changeSelectedModelMode: (mode) => {
+            const { sourceType } = this.props;
+            this.props.changeSelectedModelMode(sourceType, mode);
+        }
+    };
+
+    render() {
+        const { sourceType, mode, showOrigin } = this.props;
+        const actions = this.actions;
+        const isRasterGreyscale = (sourceType === 'raster' && mode === 'greyscale');
+
+        return (
+            <React.Fragment>
+                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
+                    <span className="fa fa-arrows-alt sm-parameter-header__indicator" />
+                    <span className="sm-parameter-header__title">{i18n._('Process Mode')}</span>
+                    <span className={classNames(
+                        'fa',
+                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
+                        'sm-parameter-header__indicator',
+                        'pull-right',
+                    )}
+                    />
+                </Anchor>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div style={{
+                            margin: '15px 0px'
+                        }}
+                        >
+                            <div className={styles['laser-modes']}>
+                                <div className={classNames(styles['laser-mode'], { [styles.selected]: this.props.mode === 'greyscale' })}>
+                                    <Anchor
+                                        className={styles['laser-mode__btn']}
+                                        onClick={() => actions.changeSelectedModelMode('greyscale')}
+                                    >
+                                        <i className={styles['laser-mode__icon-greyscale']} />
+                                    </Anchor>
+                                    <span className={styles['laser-mode__text']}>{i18n._('RELIEF')}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="sm-parameter-row">
+                            <span className="sm-parameter-row__label-lg">{i18n._('Show Original Image')}</span>
+                            <input
+                                type="checkbox"
+                                className="sm-parameter-row__checkbox"
+                                checked={showOrigin}
+                                onChange={this.props.changeSelectedModelShowOrigin}
+                            />
+                        </div>
+                        {isRasterGreyscale && (
+                            <ReliefParameters />
+                        )}
+                    </React.Fragment>
+                )}
+            </React.Fragment>
+        );
+    }
+}
+
+
+export default ImageProcessMode;
diff --git a/src/app/widgets/CNCPath/ReliefParameters.jsx b/src/app/widgets/CNCPath/ReliefParameters.jsx
deleted file mode 100644
index f2b6470595..0000000000
--- a/src/app/widgets/CNCPath/ReliefParameters.jsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { connect } from 'react-redux';
-
-import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
-import { NumberInput as Input } from '../../components/Input';
-import TipTrigger from '../../components/TipTrigger';
-import { actions } from '../../flux/cncLaserShared';
-
-
-class ReliefParameters extends PureComponent {
-    static propTypes = {
-        size: PropTypes.object.isRequired,
-        targetDepth: PropTypes.number,
-        stepDown: PropTypes.number,
-        safetyHeight: PropTypes.number,
-        stopHeight: PropTypes.number,
-        density: PropTypes.number,
-        isInvert: PropTypes.bool,
-        updateSelectedModelConfig: PropTypes.func.isRequired
-    };
-
-    state = {
-        expanded: true
-    };
-
-    actions = {
-        onChangeTargetDepth: (targetDepth) => {
-            if (targetDepth > this.props.size.z) {
-                return;
-            }
-            this.props.updateSelectedModelConfig({ targetDepth: targetDepth });
-            if (targetDepth < this.props.stepDown) {
-                this.props.updateSelectedModelConfig({ stepDown: targetDepth });
-            }
-        },
-        onChangeStepDown: (stepDown) => {
-            this.props.updateSelectedModelConfig({ stepDown });
-        },
-        onChangeSafetyHeight: (safetyHeight) => {
-            this.props.updateSelectedModelConfig({ safetyHeight });
-        },
-        onChangeStopHeight: (stopHeight) => {
-            this.props.updateSelectedModelConfig({ stopHeight });
-        },
-        onChangeDensity: (density) => {
-            this.props.updateSelectedModelConfig({ density });
-        },
-        onToggleInvert: () => {
-            const isInvert = !this.props.isInvert;
-            this.props.updateSelectedModelConfig({ isInvert });
-        }
-    };
-
-    render() {
-        const { size } = this.props;
-        const { targetDepth, stepDown, safetyHeight, stopHeight, isInvert, density } = this.props;
-
-        return (
-            <div>
-                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
-                    <span className="fa fa-image sm-parameter-header__indicator" />
-                    <span className="sm-parameter-header__title">{i18n._('Relief')}</span>
-                    <span className={classNames(
-                        'fa',
-                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
-                        'sm-parameter-header__indicator',
-                        'pull-right',
-                    )}
-                    />
-                </Anchor>
-
-                {this.state.expanded && (
-                    <React.Fragment>
-                        <TipTrigger
-                            title={i18n._('Target Depth')}
-                            content={i18n._('Enter the depth of the carved image. The depth cannot be deeper than the flute length.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Target Depth')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={targetDepth}
-                                    min={0.01}
-                                    max={size.z}
-                                    step={0.1}
-                                    onChange={this.actions.onChangeTargetDepth}
-                                />
-                                <span className="sm-parameter-row__input-unit">dot/mm</span>
-                            </div>
-                        </TipTrigger>
-
-                        <TipTrigger
-                            title={i18n._('Step Down')}
-                            content={i18n._('Enter the depth of each carving step.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Step Down')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={stepDown}
-                                    min={0.01}
-                                    max={targetDepth}
-                                    step={0.1}
-                                    onChange={this.actions.onChangeStepDown}
-                                />
-                                <span className="sm-parameter-row__input-unit">mm</span>
-                            </div>
-                        </TipTrigger>
-
-                        <TipTrigger
-                            title={i18n._('Jog Height')}
-                            content={i18n._('The distance between the tool and the material when it’s not carving.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Jog Height')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={safetyHeight}
-                                    min={0.1}
-                                    max={size.z}
-                                    step={1}
-                                    onChange={this.actions.onChangeSafetyHeight}
-                                />
-                                <span className="sm-parameter-row__input-unit">mm</span>
-                            </div>
-                        </TipTrigger>
-
-                        <TipTrigger
-                            title={i18n._('Stop Height')}
-                            content={i18n._('The distance between the tool and the material when the machine stops.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Stop Height')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={stopHeight}
-                                    min={0.1}
-                                    max={size.z}
-                                    step={1}
-                                    onChange={this.actions.onChangeStopHeight}
-                                />
-                                <span className="sm-parameter-row__input-unit">mm</span>
-                            </div>
-                        </TipTrigger>
-
-                        <TipTrigger
-                            title={i18n._('Density')}
-                            content={i18n._('Set the density of the tool head movements. The highest density is 10 dot/mm. When generating G-code, the density will be re-calculated to ensure the process work normally.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Density')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={density}
-                                    min={1}
-                                    max={10}
-                                    step={1}
-                                    onChange={this.actions.onChangeDensity}
-                                />
-                                <span className="sm-parameter-row__input-unit">dot/mm</span>
-                            </div>
-                        </TipTrigger>
-
-                        <div className="sm-parameter-row">
-                            <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
-                            <input
-                                className="sm-parameter-row__checkbox"
-                                type="checkbox"
-                                defaultChecked={isInvert}
-                                onChange={this.actions.onToggleInvert}
-                            />
-                        </div>
-                    </React.Fragment>
-                )}
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const machine = state.machine;
-    const { config } = state.cnc;
-    const { targetDepth, stepDown, safetyHeight, stopHeight, isInvert, density } = config;
-    return {
-        size: machine.size,
-        targetDepth,
-        stepDown,
-        safetyHeight,
-        stopHeight,
-        isInvert,
-        density
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        updateSelectedModelConfig: (params) => dispatch(actions.updateSelectedModelConfig('cnc', params))
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReliefParameters);
diff --git a/src/app/widgets/CNCPath/VectorParameters.jsx b/src/app/widgets/CNCPath/VectorParameters.jsx
index bf08f21633..ef879d7a62 100644
--- a/src/app/widgets/CNCPath/VectorParameters.jsx
+++ b/src/app/widgets/CNCPath/VectorParameters.jsx
@@ -28,7 +28,7 @@ class VectorParameters extends PureComponent {
         fillDensity: PropTypes.number.isRequired,
 
         // action
-        updateSelectedModelConfig: PropTypes.func.isRequired
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
     };
 
     state = {
@@ -41,7 +41,7 @@ class VectorParameters extends PureComponent {
         },
         // config
         onChangePathType: (options) => {
-            this.props.updateSelectedModelConfig({
+            this.props.updateSelectedModelGcodeConfig({
                 pathType: options.value,
                 fillEnabled: (options.value === 'pocket')
             });
@@ -50,40 +50,40 @@ class VectorParameters extends PureComponent {
             if (targetDepth > this.props.size.z) {
                 return;
             }
-            this.props.updateSelectedModelConfig({ targetDepth: targetDepth });
+            this.props.updateSelectedModelGcodeConfig({ targetDepth: targetDepth });
             if (targetDepth < this.props.stepDown) {
-                this.props.updateSelectedModelConfig({ stepDown: targetDepth });
+                this.props.updateSelectedModelGcodeConfig({ stepDown: targetDepth });
             }
             if (-targetDepth > this.props.tabHeight) {
-                this.props.updateSelectedModelConfig({ stepDown: -targetDepth });
+                this.props.updateSelectedModelGcodeConfig({ stepDown: -targetDepth });
             }
         },
         onChangeStepDown: (stepDown) => {
-            this.props.updateSelectedModelConfig({ stepDown: stepDown });
+            this.props.updateSelectedModelGcodeConfig({ stepDown: stepDown });
         },
         onChangeSafetyHeight: (safetyHeight) => {
-            this.props.updateSelectedModelConfig({ safetyHeight: safetyHeight });
+            this.props.updateSelectedModelGcodeConfig({ safetyHeight: safetyHeight });
         },
         onChangeStopHeight: (stopHeight) => {
-            this.props.updateSelectedModelConfig({ stopHeight: stopHeight });
+            this.props.updateSelectedModelGcodeConfig({ stopHeight: stopHeight });
         },
         // Fill
         onChangeFillDensity: (fillDensity) => {
-            this.props.updateSelectedModelConfig({ fillDensity });
+            this.props.updateSelectedModelGcodeConfig({ fillDensity });
         },
         // Tab
         onToggleEnableTab: () => {
             const enableTab = !this.props.enableTab;
-            this.props.updateSelectedModelConfig({ enableTab: enableTab });
+            this.props.updateSelectedModelGcodeConfig({ enableTab: enableTab });
         },
         onTabWidth: (tabWidth) => {
-            this.props.updateSelectedModelConfig({ tabWidth: tabWidth });
+            this.props.updateSelectedModelGcodeConfig({ tabWidth: tabWidth });
         },
         onTabHeight: (tabHeight) => {
-            this.props.updateSelectedModelConfig({ tabHeight: tabHeight });
+            this.props.updateSelectedModelGcodeConfig({ tabHeight: tabHeight });
         },
         onTabSpace: (tabSpace) => {
-            this.props.updateSelectedModelConfig({ tabSpace: tabSpace });
+            this.props.updateSelectedModelGcodeConfig({ tabSpace: tabSpace });
         }
     };
 
@@ -313,12 +313,12 @@ class VectorParameters extends PureComponent {
 
 const mapStateToProps = (state) => {
     const machine = state.machine;
-    const { config } = state.cnc;
+    const { gcodeConfig } = state.cnc;
     const {
         pathType, targetDepth, stepDown, safetyHeight, stopHeight,
         fillEnabled, fillDensity,
         enableTab, tabWidth, tabHeight, tabSpace
-    } = config;
+    } = gcodeConfig;
 
     return {
         size: machine.size,
@@ -340,7 +340,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        updateSelectedModelConfig: (params) => dispatch(actions.updateSelectedModelConfig('cnc', params))
+        updateSelectedModelGcodeConfig: (params) => dispatch(actions.updateSelectedModelGcodeConfig('cnc', params))
     };
 };
 
diff --git a/src/app/widgets/CNCPath/config/ReliefParameters.jsx b/src/app/widgets/CNCPath/config/ReliefParameters.jsx
new file mode 100644
index 0000000000..d9b67b9073
--- /dev/null
+++ b/src/app/widgets/CNCPath/config/ReliefParameters.jsx
@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import i18n from '../../../lib/i18n';
+import { actions } from '../../../flux/cncLaserShared';
+
+
+class ReliefParameters extends PureComponent {
+    static propTypes = {
+        invert: PropTypes.bool,
+        updateSelectedModelConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleInvert: () => {
+            const invert = !this.props.invert;
+            this.props.updateSelectedModelConfig({ invert });
+        }
+    };
+
+    render() {
+        const { invert } = this.props;
+
+        return (
+            <div>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div className="sm-parameter-row">
+                            <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
+                            <input
+                                className="sm-parameter-row__checkbox"
+                                type="checkbox"
+                                defaultChecked={invert}
+                                onChange={this.actions.onToggleInvert}
+                            />
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const { config } = state.cnc;
+    const { invert } = config;
+    return {
+        invert
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelConfig: (params) => dispatch(actions.updateSelectedModelConfig('cnc', params))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReliefParameters);
diff --git a/src/app/widgets/CNCPath/gcodeconfig/ReliefGcodeParameters.jsx b/src/app/widgets/CNCPath/gcodeconfig/ReliefGcodeParameters.jsx
new file mode 100644
index 0000000000..f26415926f
--- /dev/null
+++ b/src/app/widgets/CNCPath/gcodeconfig/ReliefGcodeParameters.jsx
@@ -0,0 +1,190 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+
+import i18n from '../../../lib/i18n';
+import { NumberInput as Input } from '../../../components/Input';
+import Anchor from '../../../components/Anchor';
+import TipTrigger from '../../../components/TipTrigger';
+import { actions } from '../../../flux/cncLaserShared';
+
+class ReliefGcodeParameters extends PureComponent {
+    static propTypes = {
+        size: PropTypes.object.isRequired,
+        targetDepth: PropTypes.number,
+        stepDown: PropTypes.number,
+        safetyHeight: PropTypes.number,
+        stopHeight: PropTypes.number,
+        density: PropTypes.number,
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onChangeTargetDepth: (targetDepth) => {
+            if (targetDepth > this.props.size.z) {
+                return;
+            }
+            this.props.updateSelectedModelGcodeConfig({ targetDepth: targetDepth });
+            if (targetDepth < this.props.stepDown) {
+                this.props.updateSelectedModelGcodeConfig({ stepDown: targetDepth });
+            }
+        },
+        onChangeStepDown: (stepDown) => {
+            this.props.updateSelectedModelGcodeConfig({ stepDown });
+        },
+        onChangeSafetyHeight: (safetyHeight) => {
+            this.props.updateSelectedModelGcodeConfig({ safetyHeight });
+        },
+        onChangeStopHeight: (stopHeight) => {
+            this.props.updateSelectedModelGcodeConfig({ stopHeight });
+        },
+        onChangeDensity: (density) => {
+            this.props.updateSelectedModelGcodeConfig({ density });
+        }
+    };
+
+    render() {
+        const { size } = this.props;
+        const { targetDepth, stepDown, safetyHeight, stopHeight, density } = this.props;
+
+        return (
+            <div>
+                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
+                    <span className="fa fa-image sm-parameter-header__indicator" />
+                    <span className="sm-parameter-header__title">{i18n._('Relief')}</span>
+                    <span className={classNames(
+                        'fa',
+                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
+                        'sm-parameter-header__indicator',
+                        'pull-right',
+                    )}
+                    />
+                </Anchor>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div>
+                            <TipTrigger
+                                title={i18n._('Target Depth')}
+                                content={i18n._('Enter the depth of the carved image. The depth cannot be deeper than the flute length.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Target Depth')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={targetDepth}
+                                        min={0.01}
+                                        max={size.z}
+                                        step={0.1}
+                                        onChange={this.actions.onChangeTargetDepth}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">dot/mm</span>
+                                </div>
+                            </TipTrigger>
+
+                            <TipTrigger
+                                title={i18n._('Step Down')}
+                                content={i18n._('Enter the depth of each carving step.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Step Down')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={stepDown}
+                                        min={0.01}
+                                        max={targetDepth}
+                                        step={0.1}
+                                        onChange={this.actions.onChangeStepDown}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">mm</span>
+                                </div>
+                            </TipTrigger>
+
+                            <TipTrigger
+                                title={i18n._('Jog Height')}
+                                content={i18n._('The distance between the tool and the material when it’s not carving.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Jog Height')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={safetyHeight}
+                                        min={0.1}
+                                        max={size.z}
+                                        step={1}
+                                        onChange={this.actions.onChangeSafetyHeight}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">mm</span>
+                                </div>
+                            </TipTrigger>
+
+                            <TipTrigger
+                                title={i18n._('Stop Height')}
+                                content={i18n._('The distance between the tool and the material when the machine stops.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Stop Height')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={stopHeight}
+                                        min={0.1}
+                                        max={size.z}
+                                        step={1}
+                                        onChange={this.actions.onChangeStopHeight}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">mm</span>
+                                </div>
+                            </TipTrigger>
+
+                            <TipTrigger
+                                title={i18n._('Density')}
+                                content={i18n._('Set the density of the tool head movements. The highest density is 10 dot/mm. When generating G-code, the density will be re-calculated to ensure the process work normally.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Density')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={density}
+                                        min={1}
+                                        max={10}
+                                        step={1}
+                                        onChange={this.actions.onChangeDensity}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">dot/mm</span>
+                                </div>
+                            </TipTrigger>
+                        </div>
+
+
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const machine = state.machine;
+    const { gcodeConfig } = state.cnc;
+    const { targetDepth, stepDown, safetyHeight, stopHeight, density } = gcodeConfig;
+    return {
+        size: machine.size,
+        targetDepth,
+        stepDown,
+        safetyHeight,
+        stopHeight,
+        density
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelGcodeConfig: (params) => dispatch(actions.updateSelectedModelGcodeConfig('cnc', params))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReliefGcodeParameters);
diff --git a/src/app/widgets/CNCPath/styles.styl b/src/app/widgets/CNCPath/styles.styl
index 10bfdacf0f..ec96348051 100644
--- a/src/app/widgets/CNCPath/styles.styl
+++ b/src/app/widgets/CNCPath/styles.styl
@@ -36,13 +36,13 @@
                 height: 68px
 
         &__icon-greyscale
-            background: url("./images/laser-mode-greyscale-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-greyscale-88x88.png") no-repeat 0 0
             background-size: 100%
         &__icon-vector
-            background: url("./images/laser-mode-vector-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-vector-88x88.png") no-repeat 0 0
             background-size: 100%
         &__icon-text
-            background: url("./images/laser-mode-text-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-text-88x88.png") no-repeat 0 0
             background-size: 100%
 
         &__text
diff --git a/src/app/widgets/CNCTool/ToolParameters.jsx b/src/app/widgets/CNCTool/ToolParameters.jsx
index 7b3c0ce237..c9ade6f62e 100644
--- a/src/app/widgets/CNCTool/ToolParameters.jsx
+++ b/src/app/widgets/CNCTool/ToolParameters.jsx
@@ -11,7 +11,7 @@ import {
     CNC_TOOL_SNAP_BALL_END_MILL,
     CNC_TOOL_SNAP_BALL_END_MILL_CONFIG,
     CNC_TOOL_CUSTOM,
-    CNC_TOOL_CUSTOM_CONFIG
+    CNC_TOOL_CUSTOM_CONFIG, PAGE_PROCESS
 } from '../../constants';
 import i18n from '../../lib/i18n';
 import { NumberInput as Input } from '../../components/Input';
@@ -25,6 +25,9 @@ import styles from './styles.styl';
 class ToolParameters extends PureComponent {
     static propTypes = {
         setTitle: PropTypes.func.isRequired,
+        // eslint-disable-next-line react/no-unused-prop-types
+        setDisplay: PropTypes.func.isRequired,
+        page: PropTypes.string.isRequired,
 
         toolSnap: PropTypes.string.isRequired,
         toolParams: PropTypes.object.isRequired,
@@ -63,12 +66,14 @@ class ToolParameters extends PureComponent {
     constructor(props) {
         super(props);
         this.props.setTitle(i18n._('Carving Tool'));
+        this.props.setDisplay(props.page === PAGE_PROCESS);
     }
 
     componentWillReceiveProps(nextProps) {
         if (this.props.toolSnap !== nextProps.toolSnap) {
             this.actions.onChangeTool(nextProps.toolSnap);
         }
+        this.props.setDisplay(nextProps.page === PAGE_PROCESS);
     }
 
     render() {
@@ -187,6 +192,7 @@ class ToolParameters extends PureComponent {
 
 const mapStateToProps = (state) => {
     return {
+        page: state.cnc.page,
         toolParams: state.cnc.toolParams,
         toolSnap: state.cnc.toolSnap
     };
@@ -196,7 +202,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         changeToolParams: (params) => {
             dispatch(cncActions.changeToolParams(params));
-            dispatch(sharedActions.updateAllModelConfig('cnc', params));
+            dispatch(sharedActions.updateAllModelGcodeConfig('cnc', params));
         },
         updateToolSnap: (toolSnap) => {
             dispatch(sharedActions.updateState('cnc', { toolSnap: toolSnap }));
diff --git a/src/app/widgets/CNCVisualizer/Visualizer.jsx b/src/app/widgets/CNCVisualizer/Visualizer.jsx
index 09643f539c..28375c19af 100644
--- a/src/app/widgets/CNCVisualizer/Visualizer.jsx
+++ b/src/app/widgets/CNCVisualizer/Visualizer.jsx
@@ -14,7 +14,9 @@ import Canvas from '../../components/SMCanvas';
 import PrintablePlate from '../CncLaserShared/PrintablePlate';
 import SecondaryToolbar from '../CanvasToolbar/SecondaryToolbar';
 import { actions, CNC_LASER_STAGE } from '../../flux/cncLaserShared';
-import styles from '../styles.styl';
+import styles from './styles.styl';
+import VisualizerTopLeft from './VisualizerTopLeft';
+import { PAGE_EDITOR } from '../../constants';
 
 
 function humanReadableTime(t) {
@@ -26,6 +28,7 @@ function humanReadableTime(t) {
 
 class Visualizer extends Component {
     static propTypes = {
+        page: PropTypes.string.isRequired,
         stage: PropTypes.number.isRequired,
         progress: PropTypes.number.isRequired,
 
@@ -200,6 +203,8 @@ class Visualizer extends Component {
                 return i18n._('Previewing tool path...');
             case CNC_LASER_STAGE.PREVIEW_SUCCESS:
                 return i18n._('Previewed tool path successfully');
+            case CNC_LASER_STAGE.RE_PREVIEW:
+                return i18n._('Please preview again');
             case CNC_LASER_STAGE.PREVIEW_FAILED:
                 return i18n._('Failed to preview tool path.');
             case CNC_LASER_STAGE.GENERATING_GCODE:
@@ -263,6 +268,7 @@ class Visualizer extends Component {
 
         const estimatedTime = isModelSelected ? this.props.getEstimatedTime('selected') : this.props.getEstimatedTime('total');
         const notice = this.getNotice();
+        const isEditor = this.props.page === PAGE_EDITOR;
 
 
         return (
@@ -270,6 +276,11 @@ class Visualizer extends Component {
                 ref={this.visualizerRef}
                 style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
             >
+                {isEditor && (
+                    <div className={styles['visualizer-top-left']}>
+                        <VisualizerTopLeft />
+                    </div>
+                )}
                 <div className={styles['canvas-content']}>
                     <Canvas
                         ref={this.canvas}
@@ -421,8 +432,9 @@ class Visualizer extends Component {
 const mapStateToProps = (state) => {
     const machine = state.machine;
     // call canvas.updateTransformControl2D() when transformation changed or model selected changed
-    const { selectedModelID, modelGroup, toolPathModelGroup, hasModel, renderingTimestamp, stage, progress } = state.cnc;
+    const { page, selectedModelID, modelGroup, toolPathModelGroup, hasModel, renderingTimestamp, stage, progress } = state.cnc;
     return {
+        page,
         size: machine.size,
         // model,
         modelGroup,
diff --git a/src/app/widgets/CNCVisualizer/VisualizerTopLeft.jsx b/src/app/widgets/CNCVisualizer/VisualizerTopLeft.jsx
new file mode 100644
index 0000000000..c0ab522fe8
--- /dev/null
+++ b/src/app/widgets/CNCVisualizer/VisualizerTopLeft.jsx
@@ -0,0 +1,96 @@
+import React, { PureComponent } from 'react';
+import path from 'path';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { actions as sharedActions } from '../../flux/cncLaserShared';
+import i18n from '../../lib/i18n';
+import { PAGE_EDITOR } from '../../constants';
+import modal from '../../lib/modal';
+import Anchor from '../../components/Anchor';
+import styles from './styles.styl';
+
+class VisualizerTopLeft extends PureComponent {
+    static propTypes = {
+        uploadImage: PropTypes.func.isRequired,
+        setAutoPreview: PropTypes.func.isRequired,
+        togglePage: PropTypes.func.isRequired,
+        insertDefaultTextVector: PropTypes.func.isRequired
+    };
+
+    fileInput = React.createRef();
+
+    actions = {
+        onChangeFile: (event) => {
+            const file = event.target.files[0];
+            const extname = path.extname(file.name).toLowerCase();
+            let uploadMode;
+            if (extname === '.svg') {
+                uploadMode = 'vector';
+            } else if (extname === '.dxf') {
+                uploadMode = 'vector';
+            } else {
+                uploadMode = 'greyscale';
+            }
+
+            this.props.togglePage(PAGE_EDITOR);
+            if (uploadMode === 'greyscale') {
+                this.props.setAutoPreview(false);
+            }
+            this.props.uploadImage(file, uploadMode, () => {
+                modal({
+                    title: i18n._('Parse Image Error'),
+                    body: i18n._('Failed to parse image file {{filename}}', { filename: file.name })
+                });
+            });
+        },
+        onClickToUpload: () => {
+            this.fileInput.current.value = null;
+            this.fileInput.current.click();
+        },
+        onClickInsertText: () => {
+            this.props.insertDefaultTextVector();
+        }
+    };
+
+    render() {
+        return (
+            <React.Fragment>
+                <input
+                    ref={this.fileInput}
+                    type="file"
+                    accept=".svg, .png, .jpg, .jpeg, .bmp, .dxf"
+                    style={{ display: 'none' }}
+                    multiple={false}
+                    onChange={this.actions.onChangeFile}
+                />
+                <button
+                    type="button"
+                    className="sm-btn-small sm-btn-primary"
+                    style={{ float: 'left' }}
+                    title={i18n._('Open File')}
+                    onClick={() => this.actions.onClickToUpload()}
+                >
+                    {i18n._('Open File')}
+                </button>
+                <Anchor
+                    componentClass="button"
+                    className={styles['btn-top-left']}
+                    onClick={this.actions.onClickInsertText}
+                >
+                    <div className={styles['btn-text']} />
+                </Anchor>
+            </React.Fragment>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+    setAutoPreview: (value) => dispatch(sharedActions.setAutoPreview('cnc', value)),
+    uploadImage: (file, mode, onFailure) => dispatch(sharedActions.uploadImage('cnc', file, mode, onFailure)),
+    togglePage: (page) => dispatch(sharedActions.togglePage('cnc', page)),
+    insertDefaultTextVector: () => dispatch(sharedActions.insertDefaultTextVector('cnc'))
+
+});
+
+
+export default connect(null, mapDispatchToProps)(VisualizerTopLeft);
diff --git a/src/app/widgets/CNCVisualizer/styles.styl b/src/app/widgets/CNCVisualizer/styles.styl
new file mode 100644
index 0000000000..d8e13931fd
--- /dev/null
+++ b/src/app/widgets/CNCVisualizer/styles.styl
@@ -0,0 +1,188 @@
+@import "../styles.styl"
+
+$z-index-float = 500
+$visualizer-padding = 10px
+
+button:focus
+    outline: 0
+
+// separator without margin on top and bottom
+.separator
+    display: block
+    margin: 10px 0
+    padding: 0
+    height: 1px
+    border: 0;
+    border-top: 1px solid $border-color
+
+    &.separator-underline
+        margin: 0 0 10px
+
+
+.fa-btn
+    width: 20px
+    height: 20px
+    line-height: 20px
+    text-align: center
+
+    &:hover
+        opacity(.5)
+
+    &:active
+        opacity(.3)
+
+.input
+    height: 34px
+    padding: 6px 12px
+    font-size: 13px
+    line-height: 1.42857143
+    color: $text-color
+    border-width: $border-width
+    border-style: solid
+    border-radius: $border-radius
+    border-color: $grey-color2
+
+    &.input-narrow
+        padding: 6px
+
+.description-text
+    color: $grey-color
+    font-size: 14px
+
+// widget
+// TODO: remove
+.widget-content
+    position: relative
+    padding: 18px 12px
+
+    &.hidden
+        display: none
+
+// parameter widgets
+.parameter-table
+    width: 100%
+
+    :global
+        tbody
+            & > tr
+                & > td
+                    position: relative
+                    padding: 0 4px 6px
+
+            & > tr:last-of-type
+                & > td
+                    padding: 0 4px
+
+        td:first-child
+            width: 100px
+
+    .unit
+        position: absolute
+        right: 10px
+        top: 8px
+        color: $grey-color
+
+
+.visualizer-content {
+    min-width: 320px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.canvas-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 32px;
+    left: 0;
+}
+
+.canvas-footer {
+    border-top: 1px solid #ccc;
+    background-color: #FFF;
+    height: 32px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.visualizer-info
+    z-index: $z-index-float
+    position: absolute
+    right: 12px
+    bottom: 38px
+
+    p
+        text-align: right
+        margin: 0 0 4px
+
+.visualizer-top-right {
+    position: absolute
+    top: $visualizer-padding
+    right: $visualizer-padding
+    z-index: 500
+    width: 10%
+}
+
+.visualizer-top-left
+    position: absolute
+    top: $visualizer-padding
+    left: $visualizer-padding
+    z-index: $z-index-float
+
+    .btn-top-left
+        display: inline-block
+        position: relative
+        float: left
+        width: 45px
+        height: 30px
+        background-color: #FFF
+        margin-left: .5rem
+        padding: 0
+        border: 1px solid $border-color
+        border-radius: $border-radius
+
+        .btn-text
+            height: 100%
+            background: url("../../images/cnc-laser/text-45x30.jpg") no-repeat 0 0
+            background-size: 100%
+
+        .btn-undo
+        .btn-redo
+        .btn-reset
+        .btn-remove
+            width: 100%
+            height: 100%
+            background-repeat: no-repeat
+            background-position: center
+        .btn-undo
+            background-image: url("/images/14x14/undo-normal-14x14.png")
+        .btn-redo
+            background-image: url("/images/14x14/redo-normal-14x14.png")
+        .btn-reset
+            background-image: url("/images/14x14/reset-normal-14x14.png")
+        .btn-remove
+            background-image: url("/images/14x14/delete-normal-14x14.png")
+        &:hover
+            background-color: $btn-default-background-color-hover
+            .btn-undo
+                background-image: url("/images/14x14/undo-hover-14x14.png")
+            .btn-redo
+                background-image: url("/images/14x14/redo-hover-14x14.png")
+            .btn-reset
+                background-image: url("/images/14x14/reset-hover-14x14.png")
+            .btn-remove
+                background-image: url("/images/14x14/delete-hover-14x14.png")
+        &:disabled
+            opacity(.5)
+            .btn-undo
+                background-image: url("/images/14x14/undo-disabled-14x14.png")
+            .btn-redo
+                background-image: url("/images/14x14/redo-disabled-14x14.png")
+            .btn-reset
+                background-image: url("/images/14x14/reset-disabled-14x14.png")
+            .btn-remove
+                background-image: url("/images/14x14/delete-disabled-14x14.png")
diff --git a/src/app/widgets/CaseLibrary/CaseConfig.js b/src/app/widgets/CaseLibrary/CaseConfig.js
index 0e2311a5c4..0d92bd17eb 100644
--- a/src/app/widgets/CaseLibrary/CaseConfig.js
+++ b/src/app/widgets/CaseLibrary/CaseConfig.js
@@ -46,12 +46,12 @@ export const CaseConfig150 = [
                 // bwThreshold: 168,
                 // contrast: 50,
                 // density: 4,
-                // invertGreyscale: false,
+                // invert: false,
                 // movementMode: 'greyscale-line',
                 // whiteClip: 100
 
                 // // bw: {
-                // invertGreyscale: 1,
+                // invert: 1,
                 // bwThreshold: 1,
                 // direction: 1,
                 // density: 1,
@@ -59,7 +59,7 @@ export const CaseConfig150 = [
                 // // RasterVector: {
                 // vectorThreshold: 1,
                 // turdSize: 1,
-                // isInvert: 1,
+                // invert: 1,
                 // fillEnabled: true, // bool
                 // fillDensity: 10, // 0~20
                 // isOptimizePath: false // bool
@@ -121,12 +121,12 @@ export const CaseConfig150 = [
                 // bwThreshold: 168,
                 // contrast: 50,
                 // density: 4,
-                // invertGreyscale: false,
+                // invert: false,
                 // movementMode: 'greyscale-line',
                 // whiteClip: 100
 
                 // // bw: {
-                // invertGreyscale: 1,
+                // invert: 1,
                 // bwThreshold: 1,
                 // direction: 1,
                 // density: 1,
@@ -134,7 +134,7 @@ export const CaseConfig150 = [
                 // // RasterVector: {
                 // vectorThreshold: 1,
                 // turdSize: 1,
-                // isInvert: 1,
+                // invert: 1,
                 // fillEnabled: true, // bool
                 // fillDensity: 10, // 0~20
                 // isOptimizePath: false // bool
diff --git a/src/app/widgets/CncLaserShared/GcodeParameters.jsx b/src/app/widgets/CncLaserShared/GcodeParameters.jsx
index cbb2a3e81a..ef9c941ae7 100644
--- a/src/app/widgets/CncLaserShared/GcodeParameters.jsx
+++ b/src/app/widgets/CncLaserShared/GcodeParameters.jsx
@@ -1,4 +1,3 @@
-import isEmpty from 'lodash/isEmpty';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,13 +13,14 @@ import { ABSENT_VALUE } from '../../constants';
 
 class GcodeParameters extends PureComponent {
     static propTypes = {
+        selectedModelID: PropTypes.string,
         printOrder: PropTypes.number.isRequired,
         gcodeConfig: PropTypes.shape({
             // jogSpeed: PropTypes.number.isRequired,
             jogSpeed: PropTypes.number,
-            workSpeed: PropTypes.number.isRequired,
-            plungeSpeed: PropTypes.number.isRequired,
-            dwellTime: PropTypes.number.isRequired,
+            workSpeed: PropTypes.number,
+            plungeSpeed: PropTypes.number,
+            dwellTime: PropTypes.number,
             multiPassEnabled: PropTypes.bool,
             multiPassDepth: PropTypes.number,
             multiPasses: PropTypes.number,
@@ -81,15 +81,12 @@ class GcodeParameters extends PureComponent {
     };
 
     render() {
-        if (isEmpty(this.props.gcodeConfig)) {
-            return null;
-        }
-        const { printOrder } = this.props;
+        const { printOrder, selectedModelID } = this.props;
         const actions = this.actions;
         const {
-            jogSpeed, workSpeed, dwellTime, plungeSpeed,
-            fixedPowerEnabled = null, fixedPower,
-            multiPassEnabled = null, multiPasses, multiPassDepth
+            jogSpeed = 0, workSpeed = 0, dwellTime = 0, plungeSpeed = 0,
+            fixedPowerEnabled = false, fixedPower = 0,
+            multiPassEnabled = false, multiPasses = 0, multiPassDepth = 0
         } = this.props.gcodeConfig;
 
         return (
@@ -116,6 +113,7 @@ class GcodeParameters extends PureComponent {
                                 <Input
                                     className="sm-parameter-row__slider-input"
                                     value={printOrder}
+                                    disabled={!selectedModelID}
                                     min={1}
                                     max={10}
                                     onChange={actions.onChangePrintOrder}
@@ -123,6 +121,7 @@ class GcodeParameters extends PureComponent {
                                 <Slider
                                     className="sm-parameter-row__slider"
                                     value={printOrder}
+                                    disabled={!selectedModelID}
                                     min={1}
                                     max={10}
                                     onChange={actions.onChangePrintOrder}
@@ -139,6 +138,7 @@ class GcodeParameters extends PureComponent {
                                     <Input
                                         className="sm-parameter-row__input"
                                         value={jogSpeed}
+                                        disabled={!selectedModelID}
                                         min={1}
                                         max={6000}
                                         step={1}
@@ -158,6 +158,7 @@ class GcodeParameters extends PureComponent {
                                     <Input
                                         className="sm-parameter-row__input"
                                         value={workSpeed}
+                                        disabled={!selectedModelID}
                                         min={1}
                                         step={1}
                                         max={6000}
@@ -177,6 +178,7 @@ class GcodeParameters extends PureComponent {
                                     <Input
                                         className="sm-parameter-row__input"
                                         value={dwellTime}
+                                        disabled={!selectedModelID}
                                         min={0.1}
                                         max={1000}
                                         step={0.1}
@@ -196,6 +198,7 @@ class GcodeParameters extends PureComponent {
                                     <Input
                                         className="sm-parameter-row__input"
                                         value={plungeSpeed}
+                                        disabled={!selectedModelID}
                                         min={0.1}
                                         max={1000}
                                         step={0.1}
@@ -210,6 +213,7 @@ class GcodeParameters extends PureComponent {
                                 style={{ marginTop: '10px', marginBottom: '10px' }}
                                 title={i18n._('Multi-pass')}
                                 titleTip={i18n._('When enabled, the printer will run the G-code multiple times automatically according to the below settings. This feature helps you cut materials that can\'t be cut with only one pass.')}
+                                disabled={!selectedModelID}
                                 onClick={actions.onToggleMultiPassEnabled}
                                 hidden={!multiPassEnabled}
                             >
@@ -224,6 +228,7 @@ class GcodeParameters extends PureComponent {
                                             className="sm-parameter-row__input"
                                             min={2}
                                             max={50}
+                                            disabled={!selectedModelID}
                                             value={multiPasses}
                                             onChange={actions.onChangeMultiPasses}
                                         />
@@ -241,6 +246,7 @@ class GcodeParameters extends PureComponent {
                                             min={0}
                                             max={10}
                                             value={multiPassDepth}
+                                            disabled={!selectedModelID}
                                             onChange={actions.onChangeMultiDepth}
                                         />
                                         <span className="sm-parameter-row__input-unit">mm</span>
@@ -253,6 +259,7 @@ class GcodeParameters extends PureComponent {
                                 style={{ marginTop: '10px' }}
                                 title={i18n._('Fixed Power')}
                                 titleTip={i18n._('When enabled, the power used to engrave this image will be set in the G-code, so it is not affected by the power you set in Workspace. When engraving multiple images, you can set the power for each image separately.')}
+                                disabled={!selectedModelID}
                                 onClick={actions.onToggleFixedPowerEnabled}
                                 hidden={!fixedPowerEnabled}
                             >
@@ -267,6 +274,7 @@ class GcodeParameters extends PureComponent {
                                             min={1}
                                             max={100}
                                             value={fixedPower}
+                                            disabled={!selectedModelID}
                                             onChange={actions.onChangeFixedPower}
                                         />
                                         <Slider
@@ -275,6 +283,7 @@ class GcodeParameters extends PureComponent {
                                             min={0}
                                             max={100}
                                             step={0.5}
+                                            disabled={!selectedModelID}
                                             onChange={actions.onChangeFixedPower}
                                         />
                                     </div>
diff --git a/src/app/widgets/CncLaserShared/Transformation.jsx b/src/app/widgets/CncLaserShared/Transformation.jsx
index 99bdc6f16c..54c339e517 100644
--- a/src/app/widgets/CncLaserShared/Transformation.jsx
+++ b/src/app/widgets/CncLaserShared/Transformation.jsx
@@ -14,6 +14,7 @@ import styles from './styles.styl';
 
 class Transformation extends PureComponent {
     static propTypes = {
+        selectedModelID: PropTypes.string,
         sourceType: PropTypes.string.isRequired,
         transformation: PropTypes.shape({
             rotationZ: PropTypes.number,
@@ -22,7 +23,8 @@ class Transformation extends PureComponent {
             positionX: PropTypes.number,
             positionY: PropTypes.number,
             flip: PropTypes.number
-        }).isRequired,
+        }),
+
         updateSelectedModelTransformation: PropTypes.func.isRequired,
         onModelAfterTransform: PropTypes.func.isRequired,
         // redux
@@ -66,9 +68,9 @@ class Transformation extends PureComponent {
     };
 
     render() {
-        const { size } = this.props;
-        const { rotationZ, width, height, positionX, positionY, flip } = this.props.transformation;
-        const canResize = this.props.sourceType !== 'text';
+        const { size, selectedModelID, sourceType } = this.props;
+        const { rotationZ = 0, width = 125, height = 125, positionX = 0, positionY = 0, flip = 0 } = this.props.transformation;
+        const canResize = sourceType !== 'text';
 
         const actions = this.actions;
 
@@ -95,7 +97,7 @@ class Transformation extends PureComponent {
                                 <span className="sm-parameter-row__label">{i18n._('Size (mm)')}</span>
                                 <Input
                                     style={{ width: '90px' }}
-                                    disabled={canResize === false}
+                                    disabled={!selectedModelID || canResize === false}
                                     value={toFixed(width, 1)}
                                     min={1}
                                     max={size.x}
@@ -112,7 +114,7 @@ class Transformation extends PureComponent {
                                 </span>
                                 <Input
                                     style={{ width: '90px' }}
-                                    disabled={canResize === false}
+                                    disabled={!selectedModelID || canResize === false}
                                     value={toFixed(height, 1)}
                                     min={1}
                                     max={size.y}
@@ -131,6 +133,7 @@ class Transformation extends PureComponent {
                                 <span className="sm-parameter-row__label">{i18n._('Rotate')}</span>
                                 <Input
                                     className="sm-parameter-row__slider-input"
+                                    disabled={!selectedModelID}
                                     value={toFixed(rotationZ * 180 / Math.PI, 1)}
                                     min={-180}
                                     max={180}
@@ -141,6 +144,7 @@ class Transformation extends PureComponent {
                                 />
                                 <Slider
                                     className="sm-parameter-row__slider"
+                                    disabled={!selectedModelID}
                                     value={rotationZ * 180 / Math.PI}
                                     min={-180}
                                     max={180}
@@ -157,6 +161,7 @@ class Transformation extends PureComponent {
                                 <span className="sm-parameter-row__label">{i18n._('Move X (mm)')}</span>
                                 <Input
                                     className="sm-parameter-row__slider-input"
+                                    disabled={!selectedModelID}
                                     value={toFixed(positionX, 1)}
                                     min={-size.x}
                                     max={size.x}
@@ -167,6 +172,7 @@ class Transformation extends PureComponent {
                                 />
                                 <Slider
                                     className="sm-parameter-row__slider"
+                                    disabled={!selectedModelID}
                                     value={positionX}
                                     min={-size.x}
                                     max={size.x}
@@ -183,6 +189,7 @@ class Transformation extends PureComponent {
                                 <span className="sm-parameter-row__label">{i18n._('Move Y (mm)')}</span>
                                 <Input
                                     className="sm-parameter-row__slider-input"
+                                    disabled={!selectedModelID}
                                     value={toFixed(positionY, 1)}
                                     min={-size.y}
                                     max={size.y}
@@ -193,6 +200,7 @@ class Transformation extends PureComponent {
                                 />
                                 <Slider
                                     className="sm-parameter-row__slider"
+                                    disabled={!selectedModelID}
                                     value={positionY}
                                     min={-size.y}
                                     max={size.y}
@@ -209,6 +217,7 @@ class Transformation extends PureComponent {
                                 <span className="sm-parameter-row__label">{i18n._('Flip Model')}</span>
                                 <Select
                                     className="sm-parameter-row__select"
+                                    disabled={!selectedModelID}
                                     clearable={false}
                                     options={[{
                                         value: 0,
@@ -247,11 +256,4 @@ const mapStateToProps = (state) => {
     };
 };
 
-// const mapDispatchToProps = (dispatch) => ({
-//     // updateSelectedModelTransformation: (transformation) => dispatch(sharedActions.updateSelectedModelTransformation(transformation)),
-//     // onModelAfterTransform: () => dispatch(sharedActions.onModelAfterTransform())
-// });
-
-
 export default connect(mapStateToProps)(Transformation);
-// export default connect(mapStateToProps, mapDispatchToProps)(Transformation);
diff --git a/src/app/widgets/CncLaserShared/styles.styl b/src/app/widgets/CncLaserShared/styles.styl
index 737a80da23..fd6d75b441 100644
--- a/src/app/widgets/CncLaserShared/styles.styl
+++ b/src/app/widgets/CncLaserShared/styles.styl
@@ -48,3 +48,55 @@
     margin: 0
     padding: 0
     float: left
+
+.laser-modes
+    // cancel out last laser-mode right padding
+    margin: 0 -10px 0 0
+
+    .laser-mode
+        display: inline-block
+        vertical-align: top
+        padding: 0 10px 0 0
+        width: 25%
+
+        &__btn
+            display: block
+            border-radius: $border-radius
+            border: 1px solid $grey-color2
+
+            > i
+                display: block
+                border-radius: $border-radius
+                width: 100%
+                height: 68px
+
+            > img
+                border-radius: $border-radius
+                width: 100%
+                height: 68px
+
+        &__icon-bw
+            background: url("../../images/cnc-laser/laser-mode-bw-88x88.png") no-repeat 0 0
+            background-size: 100%
+        &__icon-greyscale
+            background: url("../../images/cnc-laser/laser-mode-greyscale-88x88.png") no-repeat 0 0
+            background-size: 100%
+        &__icon-vector
+            background: url("../../images/cnc-laser/laser-mode-vector-88x88.png") no-repeat 0 0
+            background-size: 100%
+        &__icon-text
+            background: url("../../images/cnc-laser/laser-mode-text-88x88.png") no-repeat 0 0
+            background-size: 100%
+
+        &__text
+            margin-top: 8px
+            float: left
+            width: 100%
+            text-align: center
+            vertical-align: top
+
+        &.selected
+            .laser-mode__btn
+                border: 2px solid $dark-blue-color
+            .laser-mode__text
+                color: $dark-blue-color
diff --git a/src/app/widgets/GcodeGenerator.js b/src/app/widgets/GcodeGenerator.js
index 29f7daa393..81e8d5cf19 100644
--- a/src/app/widgets/GcodeGenerator.js
+++ b/src/app/widgets/GcodeGenerator.js
@@ -3,15 +3,15 @@ class GcodeGenerator {
         if (!toolPathObj || !gcodeConfig) {
             return null;
         }
-        const { headerType } = toolPathObj;
-        if (!['cnc', 'laser', '3dp'].includes(headerType)) {
+        const { headType } = toolPathObj;
+        if (!['cnc', 'laser', '3dp'].includes(headType)) {
             return null;
         }
 
         let gcodeStr = '';
-        if (headerType === 'cnc') {
+        if (headType === 'cnc') {
             gcodeStr = this.parseAsCNC(toolPathObj, gcodeConfig);
-        } else if (headerType === 'laser') {
+        } else if (headType === 'laser') {
             gcodeStr = this.parseAsLaser(toolPathObj, gcodeConfig);
         }
         return gcodeStr;
diff --git a/src/app/widgets/LaserOutput/Output.jsx b/src/app/widgets/LaserOutput/Output.jsx
index 960680dc65..b063ae551c 100644
--- a/src/app/widgets/LaserOutput/Output.jsx
+++ b/src/app/widgets/LaserOutput/Output.jsx
@@ -5,7 +5,7 @@ import request from 'superagent';
 import { connect } from 'react-redux';
 import { actions as workspaceActions } from '../../flux/workspace';
 import { actions as sharedActions } from '../../flux/cncLaserShared';
-import { DATA_PREFIX } from '../../constants';
+import { DATA_PREFIX, PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
 
 import modal from '../../lib/modal';
 import i18n from '../../lib/i18n';
@@ -18,6 +18,8 @@ class Output extends PureComponent {
         setTitle: PropTypes.func.isRequired,
         minimized: PropTypes.bool.isRequired,
 
+        page: PropTypes.string.isRequired,
+
         modelGroup: PropTypes.object.isRequired,
         toolPathModelGroup: PropTypes.object.isRequired,
         previewFailed: PropTypes.bool.isRequired,
@@ -29,7 +31,8 @@ class Output extends PureComponent {
         generateGcode: PropTypes.func.isRequired,
         renderGcodeFile: PropTypes.func.isRequired,
         manualPreview: PropTypes.func.isRequired,
-        setAutoPreview: PropTypes.func.isRequired
+        setAutoPreview: PropTypes.func.isRequired,
+        togglePage: PropTypes.func.isRequired
     };
 
     thumbnail = React.createRef();
@@ -69,8 +72,15 @@ class Output extends PureComponent {
                 FileSaver.saveAs(blob, gcodeFile.name, true);
             });
         },
-        onToggleAutoPreview: (event) => {
-            this.props.setAutoPreview(event.target.checked);
+        onToggleAutoPreview: (value) => {
+            this.props.setAutoPreview(value);
+        },
+        onProcess: () => {
+            if (this.props.page === PAGE_EDITOR) {
+                this.props.togglePage(PAGE_PROCESS);
+            } else {
+                this.props.manualPreview();
+            }
         }
     };
 
@@ -90,7 +100,9 @@ class Output extends PureComponent {
 
     render() {
         const actions = this.actions;
-        const { workflowState, isGcodeGenerating, manualPreview, autoPreviewEnabled, gcodeFile } = this.props;
+        const { workflowState, isGcodeGenerating, autoPreviewEnabled, gcodeFile } = this.props;
+        const isEditor = this.props.page === PAGE_EDITOR;
+        const isPreview = this.props.page === PAGE_PROCESS;
 
         return (
             <div>
@@ -98,11 +110,11 @@ class Output extends PureComponent {
                     <button
                         type="button"
                         className="sm-btn-large sm-btn-default"
-                        disabled={autoPreviewEnabled}
-                        onClick={manualPreview}
+                        disabled={isPreview && autoPreviewEnabled}
+                        onClick={this.actions.onProcess}
                         style={{ display: 'block', width: '100%' }}
                     >
-                        {i18n._('Preview')}
+                        {isPreview ? i18n._('Preview') : i18n._('Process')}
                     </button>
                     <TipTrigger
                         title={i18n._('Auto Preview')}
@@ -113,8 +125,9 @@ class Output extends PureComponent {
                             <input
                                 type="checkbox"
                                 className="sm-parameter-row__checkbox"
+                                disabled={isEditor}
                                 checked={autoPreviewEnabled}
-                                onChange={actions.onToggleAutoPreview}
+                                onChange={(event) => { actions.onToggleAutoPreview(event.target.checked); }}
                             />
                         </div>
                     </TipTrigger>
@@ -122,7 +135,7 @@ class Output extends PureComponent {
                         type="button"
                         className="sm-btn-large sm-btn-default"
                         onClick={actions.onGenerateGcode}
-                        disabled={isGcodeGenerating}
+                        disabled={isEditor && isGcodeGenerating}
                         style={{ display: 'block', width: '100%', marginTop: '10px' }}
                     >
                         {i18n._('Generate G-code')}
@@ -159,10 +172,11 @@ class Output extends PureComponent {
 
 const mapStateToProps = (state) => {
     const { workflowState } = state.machine;
-    const { isGcodeGenerating, isAllModelsPreviewed,
+    const { page, isGcodeGenerating, isAllModelsPreviewed,
         previewFailed, autoPreviewEnabled, modelGroup, toolPathModelGroup, gcodeFile } = state.laser;
 
     return {
+        page,
         modelGroup,
         toolPathModelGroup,
         isGcodeGenerating,
@@ -176,6 +190,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
+        togglePage: (page) => dispatch(sharedActions.togglePage('laser', page)),
         generateGcode: (thumbnail) => dispatch(sharedActions.generateGcode('laser', thumbnail)),
         renderGcodeFile: (fileName) => dispatch(workspaceActions.renderGcodeFile(fileName)),
         manualPreview: () => dispatch(sharedActions.manualPreview('laser', true)),
diff --git a/src/app/widgets/LaserParams/ConfigGreyscale.jsx b/src/app/widgets/LaserParams/ConfigGreyscale.jsx
deleted file mode 100644
index 71e37a4cc1..0000000000
--- a/src/app/widgets/LaserParams/ConfigGreyscale.jsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import Slider from 'rc-slider';
-import Select from 'react-select';
-import classNames from 'classnames';
-
-import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
-import { NumberInput as Input } from '../../components/Input';
-import TipTrigger from '../../components/TipTrigger';
-import { actions } from '../../flux/cncLaserShared';
-import { ABSENT_VALUE } from '../../constants';
-
-class ConfigGreyscale extends PureComponent {
-    static propTypes = {
-        invertGreyscale: PropTypes.bool,
-        contrast: PropTypes.number.isRequired,
-        brightness: PropTypes.number.isRequired,
-        whiteClip: PropTypes.number.isRequired,
-        density: PropTypes.number.isRequired,
-        algorithm: PropTypes.string.isRequired,
-        movementMode: PropTypes.string.isRequired,
-        updateSelectedModelConfig: PropTypes.func.isRequired,
-        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
-    };
-
-    state = {
-        expanded: true
-    };
-
-    actions = {
-        onToggleExpand: () => {
-            this.setState(state => ({ expanded: !state.expanded }));
-        },
-        onInverseBW: () => {
-            this.props.updateSelectedModelConfig({ invertGreyscale: !this.props.invertGreyscale });
-        },
-        onChangeContrast: (contrast) => {
-            this.props.updateSelectedModelConfig({ contrast });
-        },
-        onChangeBrightness: (brightness) => {
-            this.props.updateSelectedModelConfig({ brightness });
-        },
-        onChangeWhiteClip: (whiteClip) => {
-            this.props.updateSelectedModelConfig({ whiteClip });
-        },
-        onChangeAlgorithm: (options) => {
-            this.props.updateSelectedModelConfig({ algorithm: options.value });
-        },
-        onChangeMovementMode: (options) => {
-            if (options.value === 'greyscale-line') {
-                this.props.updateSelectedModelGcodeConfig({
-                    dwellTime: ABSENT_VALUE,
-                    jogSpeed: 1500,
-                    workSpeed: 500
-                });
-            } else if (options.value === 'greyscale-dot') {
-                this.props.updateSelectedModelGcodeConfig({
-                    dwellTime: 42,
-                    jogSpeed: ABSENT_VALUE,
-                    workSpeed: 1500
-                });
-            }
-            this.props.updateSelectedModelConfig({ movementMode: options.value });
-        },
-        onChangeDensity: (density) => {
-            this.props.updateSelectedModelConfig({ density });
-        }
-    };
-
-    render() {
-        const { invertGreyscale, contrast, brightness, whiteClip, density, algorithm, movementMode } = this.props;
-
-        return (
-            <div>
-                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
-                    <span className="fa fa-image sm-parameter-header__indicator" />
-                    <span className="sm-parameter-header__title">{i18n._('Greyscale')}</span>
-                    <span className={classNames(
-                        'fa',
-                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
-                        'sm-parameter-header__indicator',
-                        'pull-right',
-                    )}
-                    />
-                </Anchor>
-                {this.state.expanded && (
-                    <React.Fragment>
-                        <div className="sm-parameter-row">
-                            <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
-                            <input
-                                type="checkbox"
-                                className="sm-parameter-row__checkbox"
-                                value={invertGreyscale}
-                                onClick={this.actions.onInverseBW}
-                            />
-                        </div>
-                        <TipTrigger
-                            title={i18n._('Contrast')}
-                            content={i18n._('The difference between the lightest color and the darkest color.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Contrast')}</span>
-                                <Input
-                                    className="sm-parameter-row__slider-input"
-                                    value={contrast}
-                                    min={0}
-                                    max={100}
-                                    onChange={this.actions.onChangeContrast}
-                                />
-                                <Slider
-                                    className="sm-parameter-row__slider"
-                                    value={contrast}
-                                    min={0}
-                                    max={100}
-                                    onChange={this.actions.onChangeContrast}
-                                />
-                            </div>
-                        </TipTrigger>
-
-                        <TipTrigger
-                            title={i18n._('Brightness')}
-                            content={i18n._('The engraved picture is brighter when this value is bigger.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Brightness')}</span>
-                                <Input
-                                    className="sm-parameter-row__slider-input"
-                                    value={brightness}
-                                    min={0}
-                                    max={100}
-                                    onChange={this.actions.onChangeBrightness}
-                                />
-                                <Slider
-                                    className="sm-parameter-row__slider"
-                                    value={brightness}
-                                    min={0}
-                                    max={100}
-                                    onChange={this.actions.onChangeBrightness}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <TipTrigger
-                            title={i18n._('White Clip')}
-                            content={i18n._('Set the threshold to turn the color that is not pure white into pure white.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('White Clip')}</span>
-                                <Input
-                                    className="sm-parameter-row__slider-input"
-                                    value={whiteClip}
-                                    min={0}
-                                    max={255}
-                                    onChange={this.actions.onChangeWhiteClip}
-                                />
-                                <Slider
-                                    className="sm-parameter-row__slider"
-                                    value={whiteClip}
-                                    min={0}
-                                    max={255}
-                                    onChange={this.actions.onChangeWhiteClip}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <TipTrigger
-                            title={i18n._('Algorithm')}
-                            content={i18n._('Choose an algorithm for image processing.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Algorithm')}</span>
-                                <Select
-                                    backspaceRemoves={false}
-                                    className="sm-parameter-row__select-lg"
-                                    clearable={false}
-                                    menuContainerStyle={{ zIndex: 5 }}
-                                    name="algorithm"
-                                    options={[{
-                                        value: 'FloydSteinburg',
-                                        label: 'Floyd-Steinburg'
-                                    }, {
-                                        value: 'JarvisJudiceNinke',
-                                        label: 'Jarvis-Judice-Ninke'
-                                    }, {
-                                        value: 'Stucki',
-                                        label: 'Stucki'
-                                    }, {
-                                        value: 'Atkinson',
-                                        label: 'Atkinson'
-                                    }, {
-                                        value: 'Burkes',
-                                        label: 'Burkes'
-                                    }, {
-                                        value: 'Sierra2',
-                                        label: 'Sierra-2'
-                                    }, {
-                                        value: 'Sierra3',
-                                        label: 'Sierra-3'
-                                    }, {
-                                        value: 'SierraLite',
-                                        label: 'Sierra Lite'
-                                    }]}
-                                    placeholder={i18n._('Choose algorithms')}
-                                    searchable={false}
-                                    value={algorithm}
-                                    onChange={this.actions.onChangeAlgorithm}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <div className="sm-parameter-row">
-                            <span className="sm-parameter-row__label">{i18n._('Movement Mode')}</span>
-                            <Select
-                                backspaceRemoves={false}
-                                className="sm-parameter-row__select-lg"
-                                clearable={false}
-                                menuContainerStyle={{ zIndex: 5 }}
-                                name="Movement"
-                                options={[{
-                                    value: 'greyscale-line',
-                                    label: i18n._('Line (Normal Quality)')
-                                }, {
-                                    value: 'greyscale-dot',
-                                    label: i18n._('Dot (High Quality)')
-                                }]}
-                                placeholder={i18n._('Choose movement mode')}
-                                searchable={false}
-                                value={movementMode}
-                                onChange={this.actions.onChangeMovementMode}
-                            />
-                        </div>
-                        <TipTrigger
-                            title={i18n._('Density')}
-                            content={i18n._('Determines how fine and smooth the engraved picture will be.'
-                                + 'The bigger this value is, the better quality you will get. The range is 1-10 dot/mm and 10 is recommended.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Density')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={density}
-                                    min={1}
-                                    max={10}
-                                    step={1}
-                                    onChange={this.actions.onChangeDensity}
-                                />
-                                <span className="sm-parameter-row__input-unit">dot/mm</span>
-                            </div>
-                        </TipTrigger>
-                    </React.Fragment>
-                )}
-            </div>
-        );
-    }
-}
-
-
-const mapStateToProps = (state) => {
-    const { config } = state.laser;
-    const { invertGreyscale, contrast, brightness, whiteClip, density, algorithm, movementMode } = config;
-    return {
-        invertGreyscale,
-        contrast,
-        brightness,
-        whiteClip,
-        density,
-        algorithm,
-        movementMode
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config)),
-        updateSelectedModelGcodeConfig: (params) => dispatch(actions.updateSelectedModelGcodeConfig('laser', params))
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigGreyscale);
diff --git a/src/app/widgets/LaserParams/ConfigRasterVector.jsx b/src/app/widgets/LaserParams/ConfigRasterVector.jsx
deleted file mode 100644
index 00c6e87350..0000000000
--- a/src/app/widgets/LaserParams/ConfigRasterVector.jsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { connect } from 'react-redux';
-import Slider from 'rc-slider';
-
-import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
-import { NumberInput as Input } from '../../components/Input';
-import TipTrigger from '../../components/TipTrigger';
-import OptionalDropdown from '../../components/OptionalDropdown';
-import { actions } from '../../flux/cncLaserShared';
-
-
-class ConfigRasterVector extends PureComponent {
-    static propTypes = {
-        optimizePath: PropTypes.bool,
-        fillEnabled: PropTypes.bool,
-        fillDensity: PropTypes.number,
-        vectorThreshold: PropTypes.number,
-        isInvert: PropTypes.bool,
-        turdSize: PropTypes.number,
-        updateSelectedModelConfig: PropTypes.func.isRequired
-    };
-
-    state = {
-        expanded: true
-    };
-
-    actions = {
-        onToggleExpand: () => {
-            this.setState(state => ({ expanded: !state.expanded }));
-        },
-        changeVectorThreshold: (vectorThreshold) => {
-            this.props.updateSelectedModelConfig({ vectorThreshold });
-        },
-        onChangeTurdSize: (turdSize) => {
-            this.props.updateSelectedModelConfig({ turdSize });
-        },
-        onToggleInvert: (event) => {
-            this.props.updateSelectedModelConfig({ isInvert: event.target.checked });
-        },
-        onToggleFill: () => {
-            this.props.updateSelectedModelConfig({ fillEnabled: !this.props.fillEnabled });
-        },
-        onChangeFillDensity: (fillDensity) => {
-            this.props.updateSelectedModelConfig({ fillDensity });
-        },
-        onToggleOptimizePath: (event) => {
-            this.props.updateSelectedModelConfig({ optimizePath: event.target.checked });
-        }
-    };
-
-    render() {
-        const { optimizePath, fillEnabled, fillDensity, vectorThreshold, isInvert, turdSize } = this.props;
-
-        return (
-            <div>
-                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
-                    <span className="fa fa-image sm-parameter-header__indicator" />
-                    <span className="sm-parameter-header__title">{i18n._('Vector')}</span>
-                    <span className={classNames(
-                        'fa',
-                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
-                        'sm-parameter-header__indicator',
-                        'pull-right',
-                    )}
-                    />
-                </Anchor>
-                {this.state.expanded && (
-                    <React.Fragment>
-                        <TipTrigger
-                            title={i18n._('B&W')}
-                            content={i18n._('Set the proportion of the black color based on the original color of the image.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('B&W')}</span>
-                                <Input
-                                    className="sm-parameter-row__slider-input"
-                                    value={vectorThreshold}
-                                    min={0}
-                                    max={20}
-                                    onChange={this.actions.changeVectorThreshold}
-                                />
-                                <Slider
-                                    className="sm-parameter-row__slider"
-                                    defaultValue={vectorThreshold}
-                                    min={0}
-                                    max={255}
-                                    step={1}
-                                    onChange={this.actions.changeVectorThreshold}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <TipTrigger
-                            title={i18n._('Impurity Size')}
-                            content={i18n._('Determines the minimum size of impurity which allows to be showed.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Impurity Size')}</span>
-                                <Input
-                                    className="sm-parameter-row__input"
-                                    value={turdSize}
-                                    min={0}
-                                    max={10000}
-                                    onChange={this.actions.onChangeTurdSize}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <TipTrigger
-                            title={i18n._('Invert')}
-                            content={i18n._('Inverts black to white and vise versa.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
-                                <input
-                                    type="checkbox"
-                                    className="sm-parameter-row__checkbox"
-                                    checked={isInvert}
-                                    onChange={this.actions.onToggleInvert}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <TipTrigger
-                            title={i18n._('Optimize Path')}
-                            content={i18n._('Optimizes the path based on the proximity of the lines in the image.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('Optimize Path')}</span>
-                                <input
-                                    type="checkbox"
-                                    className="sm-parameter-row__checkbox"
-                                    checked={optimizePath}
-                                    onChange={this.actions.onToggleOptimizePath}
-                                />
-                            </div>
-                        </TipTrigger>
-                        <OptionalDropdown
-                            style={{ marginBottom: '10px' }}
-                            title={i18n._('Fill')}
-                            onClick={this.actions.onToggleFill}
-                            hidden={!fillEnabled}
-                        >
-                            <TipTrigger
-                                title={i18n._('Fill Density')}
-                                content={i18n._('Set the degree to which an area is filled with laser dots. The highest density is 20 dot/mm. When it is set to 0, the SVG image will be engraved without fill.')}
-                            >
-                                <div className="sm-parameter-row">
-                                    <span className="sm-parameter-row__label">{i18n._('Fill Density')}</span>
-                                    <Input
-                                        className="sm-parameter-row__slider-input"
-                                        value={fillDensity}
-                                        min={0}
-                                        max={20}
-                                        onChange={this.actions.onChangeFillDensity}
-                                    />
-                                    <Slider
-                                        className="sm-parameter-row__slider"
-                                        value={fillDensity}
-                                        min={0}
-                                        max={20}
-                                        onChange={this.actions.onChangeFillDensity}
-                                    />
-                                </div>
-                            </TipTrigger>
-                        </OptionalDropdown>
-                    </React.Fragment>
-                )}
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const { config } = state.laser;
-    const { optimizePath, fillEnabled, fillDensity, vectorThreshold, isInvert, turdSize } = config;
-    return {
-        optimizePath,
-        fillEnabled,
-        fillDensity,
-        vectorThreshold,
-        isInvert,
-        turdSize
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config))
-    };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigRasterVector);
diff --git a/src/app/widgets/LaserParams/ImageProcessMode.jsx b/src/app/widgets/LaserParams/ImageProcessMode.jsx
new file mode 100644
index 0000000000..37e147a5c4
--- /dev/null
+++ b/src/app/widgets/LaserParams/ImageProcessMode.jsx
@@ -0,0 +1,111 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import i18n from '../../lib/i18n';
+import Anchor from '../../components/Anchor';
+import styles from '../CncLaserShared/styles.styl';
+import ConfigRasterBW from './config/ConfigRasterBW';
+import ConfigGreyscale from './config/ConfigGreyscale';
+import ConfigRasterVector from './config/ConfigRasterVector';
+
+class ImageProcessMode extends PureComponent {
+    static propTypes = {
+        sourceType: PropTypes.string.isRequired,
+        mode: PropTypes.string.isRequired,
+        showOrigin: PropTypes.bool,
+
+        changeSelectedModelMode: PropTypes.func.isRequired,
+        changeSelectedModelShowOrigin: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        changeSelectedModelMode: (mode) => {
+            const { sourceType } = this.props;
+            this.props.changeSelectedModelMode(sourceType, mode);
+        }
+    };
+
+    render() {
+        const { sourceType, mode, showOrigin } = this.props;
+        const actions = this.actions;
+        const isBW = (sourceType === 'raster' && mode === 'bw');
+        const isGreyscale = (sourceType === 'raster' && mode === 'greyscale');
+        const isRasterVector = (sourceType === 'raster' && mode === 'vector');
+
+        return (
+            <React.Fragment>
+                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
+                    <span className="fa fa-arrows-alt sm-parameter-header__indicator" />
+                    <span className="sm-parameter-header__title">{i18n._('Process Mode')}</span>
+                    <span className={classNames(
+                        'fa',
+                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
+                        'sm-parameter-header__indicator',
+                        'pull-right',
+                    )}
+                    />
+                </Anchor>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div style={{
+                            margin: '15px 0px'
+                        }}
+                        >
+                            <div className={styles['laser-modes']}>
+                                <div className={classNames(styles['laser-mode'], { [styles.selected]: this.props.mode === 'bw' })}>
+                                    <Anchor
+                                        className={styles['laser-mode__btn']}
+                                        onClick={() => actions.changeSelectedModelMode('bw')}
+                                    >
+                                        <i className={styles['laser-mode__icon-bw']} />
+                                    </Anchor>
+                                    <span className={styles['laser-mode__text']}>{i18n._('B&W')}</span>
+                                </div>
+                                <div className={classNames(styles['laser-mode'], { [styles.selected]: this.props.mode === 'greyscale' })}>
+                                    <Anchor
+                                        className={styles['laser-mode__btn']}
+                                        onClick={() => actions.changeSelectedModelMode('greyscale')}
+                                    >
+                                        <i className={styles['laser-mode__icon-greyscale']} />
+                                    </Anchor>
+                                    <span className={styles['laser-mode__text']}>{i18n._('GREYSCALE')}</span>
+                                </div>
+                                <div className={classNames(styles['laser-mode'], { [styles.selected]: this.props.mode === 'vector' })}>
+                                    <Anchor
+                                        className={styles['laser-mode__btn']}
+                                        onClick={() => actions.changeSelectedModelMode('vector')}
+                                    >
+                                        <i className={styles['laser-mode__icon-vector']} />
+                                    </Anchor>
+                                    <span className={styles['laser-mode__text']}>{i18n._('VECTOR')}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="sm-parameter-row">
+                            <span className="sm-parameter-row__label-lg">{i18n._('Show Original Image')}</span>
+                            <input
+                                type="checkbox"
+                                className="sm-parameter-row__checkbox"
+                                checked={showOrigin}
+                                onChange={this.props.changeSelectedModelShowOrigin}
+                            />
+                        </div>
+                        {isBW && <ConfigRasterBW />}
+                        {isGreyscale && <ConfigGreyscale />}
+                        {isRasterVector && <ConfigRasterVector />}
+                    </React.Fragment>
+                )}
+            </React.Fragment>
+        );
+    }
+}
+
+
+export default ImageProcessMode;
diff --git a/src/app/widgets/LaserParams/LaserParameters.jsx b/src/app/widgets/LaserParams/LaserParameters.jsx
index 8b107e3cc4..0c5215b582 100644
--- a/src/app/widgets/LaserParams/LaserParameters.jsx
+++ b/src/app/widgets/LaserParams/LaserParameters.jsx
@@ -1,26 +1,24 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { connect } from 'react-redux';
 
 import modal from '../../lib/modal';
 import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
 import { actions as sharedActions } from '../../flux/cncLaserShared';
 import Modal from '../../components/Modal';
 import SvgTrace from '../CncLaserShared/SvgTrace';
-import ConfigRasterBW from './ConfigRasterBW';
-import ConfigGreyscale from './ConfigGreyscale';
-import ConfigRasterVector from './ConfigRasterVector';
-import ConfigSvgVector from './ConfigSvgVector';
 import TextParameters from '../CncLaserShared/TextParameters';
 // import ConfigSvgTrace from './ConfigSvgTrace';
 import Transformation from '../CncLaserShared/Transformation';
 import GcodeParameters from '../CncLaserShared/GcodeParameters';
 import api from '../../api';
-import { EXPERIMENTAL_IMAGE_TRACING } from '../../constants';
+import { PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
 
-import styles from './styles.styl';
+import ImageProcessMode from './ImageProcessMode';
+import GcodeConfigSvgVector from './gcodeconfig/GcodeConfigSvgVector';
+import GcodeConfigRasterBW from './gcodeconfig/GcodeConfigRasterBW';
+import GcodeConfigGreyscale from './gcodeconfig/GcodeConfigGreyscale';
+import GcodeConfigRasterVector from './gcodeconfig/GcodeConfigRasterVector';
 
 
 const getAccept = (mode) => {
@@ -37,10 +35,13 @@ class LaserParameters extends PureComponent {
     static propTypes = {
         setTitle: PropTypes.func.isRequired,
 
+        page: PropTypes.string.isRequired,
+
         // model: PropTypes.object,
         selectedModelID: PropTypes.string,
         sourceType: PropTypes.string,
         mode: PropTypes.string.isRequired,
+        showOrigin: PropTypes.bool,
         config: PropTypes.object.isRequired,
         transformation: PropTypes.object.isRequired,
         gcodeConfig: PropTypes.object.isRequired,
@@ -50,9 +51,12 @@ class LaserParameters extends PureComponent {
         updateSelectedModelTransformation: PropTypes.func.isRequired,
         updateSelectedModelGcodeConfig: PropTypes.func.isRequired,
         updateSelectedModelPrintOrder: PropTypes.func.isRequired,
+        changeSelectedModelMode: PropTypes.func.isRequired,
         updateSelectedModelTextConfig: PropTypes.func.isRequired,
         onModelAfterTransform: PropTypes.func.isRequired,
-        setAutoPreview: PropTypes.func.isRequired
+        togglePage: PropTypes.func.isRequired,
+        setAutoPreview: PropTypes.func.isRequired,
+        changeSelectedModelShowOrigin: PropTypes.func.isRequired
     };
 
     fileInput = React.createRef();
@@ -110,6 +114,7 @@ class LaserParameters extends PureComponent {
             const file = event.target.files[0];
 
             const uploadMode = this.state.uploadMode;
+            this.props.togglePage(PAGE_EDITOR);
             if (uploadMode === 'trace') {
                 this.setState({
                     mode: uploadMode
@@ -139,6 +144,7 @@ class LaserParameters extends PureComponent {
             }
         },
         onClickInsertText: () => {
+            this.props.togglePage(PAGE_EDITOR);
             this.props.insertDefaultTextVector();
         },
         updateOptions: (options) => {
@@ -166,7 +172,7 @@ class LaserParameters extends PureComponent {
 
     constructor(props) {
         super(props);
-        this.props.setTitle(i18n._('Preview Settings'));
+        this.props.setTitle(i18n._('Configurations'));
     }
 
     render() {
@@ -176,16 +182,20 @@ class LaserParameters extends PureComponent {
             transformation, updateSelectedModelTransformation,
             gcodeConfig, updateSelectedModelGcodeConfig,
             printOrder, updateSelectedModelPrintOrder, config, updateSelectedModelTextConfig,
+            changeSelectedModelMode, showOrigin, changeSelectedModelShowOrigin,
             onModelAfterTransform
         } = this.props;
         const actions = this.actions;
         const { width, height } = this.state.modalSetting;
 
+        const isEditor = this.props.page === PAGE_EDITOR;
+        const isPreview = this.props.page === PAGE_PROCESS;
         const isBW = (sourceType === 'raster' && mode === 'bw');
         const isGreyscale = (sourceType === 'raster' && mode === 'greyscale');
         const isRasterVector = (sourceType === 'raster' && mode === 'vector');
         const isSvgVector = ((sourceType === 'svg' || sourceType === 'dxf') && mode === 'vector');
         const isTextVector = (sourceType === 'text' && mode === 'vector');
+        const isProcessMode = isEditor && sourceType === 'raster';
 
         return (
             <React.Fragment>
@@ -214,93 +224,67 @@ class LaserParameters extends PureComponent {
                         </Modal.Body>
                     </Modal>
                 )}
-                <div className={styles['laser-modes']}>
-                    <div className={classNames(styles['laser-mode'])}>
-                        <Anchor
-                            className={styles['laser-mode__btn']}
-                            onClick={() => actions.onClickToUpload('bw')}
-                        >
-                            <i className={styles['laser-mode__icon-bw']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('B&W')}</span>
-                    </div>
-                    <div className={classNames(styles['laser-mode'])}>
-                        <Anchor
-                            className={styles['laser-mode__btn']}
-                            onClick={() => actions.onClickToUpload('greyscale')}
-                        >
-                            <i className={styles['laser-mode__icon-greyscale']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('GREYSCALE')}</span>
-                    </div>
-                    <div className={classNames(styles['laser-mode'])}>
-                        <Anchor
-                            className={styles['laser-mode__btn']}
-                            onClick={() => actions.onClickToUpload('vector')}
-                        >
-                            <i className={styles['laser-mode__icon-vector']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('VECTOR')}</span>
-                    </div>
-                    <div className={classNames(styles['laser-mode'])} style={{ marginRight: '0' }}>
-                        <Anchor
-                            className={classNames(styles['laser-mode__btn'])}
-                            onClick={() => actions.onClickInsertText()}
-                        >
-                            <i className={styles['laser-mode__icon-text']} />
-                        </Anchor>
-                        <span className={styles['laser-mode__text']}>{i18n._('TEXT')}</span>
-                    </div>
-                    {EXPERIMENTAL_IMAGE_TRACING && (
-                        <div className={classNames(styles['laser-mode'])}>
-                            <Anchor
-                                className={styles['laser-mode__btn']}
-                                onClick={() => actions.onClickToUpload('trace')}
-                            >
-                                <i className={styles['laser-mode__icon-vector']} />
-                            </Anchor>
-                            <span className={styles['laser-mode__text']}>{i18n._('TRACE')}</span>
-                        </div>
-                    )}
-                </div>
+                {isEditor && (
+                    <Transformation
+                        selectedModelID={selectedModelID}
+                        sourceType={sourceType}
+                        transformation={transformation}
+                        onModelAfterTransform={onModelAfterTransform}
+                        updateSelectedModelTransformation={updateSelectedModelTransformation}
+                    />
+                )}
                 {selectedModelID && (
                     <div>
-                        <div className={styles.separator} />
-                        <Transformation
-                            sourceType={sourceType}
-                            transformation={transformation}
-                            updateSelectedModelTransformation={updateSelectedModelTransformation}
-                            onModelAfterTransform={onModelAfterTransform}
-                        />
-                        <div style={{ marginTop: '15px' }}>
-                            {isBW && <ConfigRasterBW />}
-                            {isGreyscale && <ConfigGreyscale />}
-                            {isRasterVector && <ConfigRasterVector />}
-                            {isSvgVector && <ConfigSvgVector />}
-                            {isTextVector && (
+                        {isProcessMode && (
+                            <ImageProcessMode
+                                sourceType={sourceType}
+                                mode={mode}
+                                showOrigin={showOrigin}
+                                changeSelectedModelShowOrigin={changeSelectedModelShowOrigin}
+                                changeSelectedModelMode={changeSelectedModelMode}
+                            />
+                        )}
+                        <div>
+                            {isEditor && isTextVector && (
                                 <TextParameters
                                     config={config}
                                     updateSelectedModelTextConfig={updateSelectedModelTextConfig}
                                 />
                             )}
-                            {isTextVector && (
-                                <ConfigSvgVector />
+                            {isPreview && isBW && (
+                                <GcodeConfigRasterBW />
+                            )}
+                            {isPreview && isGreyscale && (
+                                <GcodeConfigGreyscale />
+                            )}
+                            {isPreview && isRasterVector && (
+                                <GcodeConfigRasterVector />
+                            )}
+                            {isPreview && isSvgVector && (
+                                <GcodeConfigSvgVector />
+                            )}
+                            {isPreview && isTextVector && (
+                                <GcodeConfigSvgVector />
                             )}
                         </div>
-                        <GcodeParameters
-                            printOrder={printOrder}
-                            gcodeConfig={gcodeConfig}
-                            updateSelectedModelPrintOrder={updateSelectedModelPrintOrder}
-                            updateSelectedModelGcodeConfig={updateSelectedModelGcodeConfig}
-                            paramsDescs={
-                                {
-                                    jogSpeed: i18n._('Determines how fast the machine moves when it’s not engraving.'),
-                                    workSpeed: i18n._('Determines how fast the machine moves when it’s engraving.'),
-                                    dwellTime: i18n._('Determines how long the laser keeps on when it’s engraving a dot.')
-                                }
-                            }
-                        />
                     </div>
+
+                )}
+                {isPreview && (
+                    <GcodeParameters
+                        selectedModelID={selectedModelID}
+                        printOrder={printOrder}
+                        gcodeConfig={gcodeConfig}
+                        updateSelectedModelPrintOrder={updateSelectedModelPrintOrder}
+                        updateSelectedModelGcodeConfig={updateSelectedModelGcodeConfig}
+                        paramsDescs={
+                            {
+                                jogSpeed: i18n._('Determines how fast the machine moves when it’s not engraving.'),
+                                workSpeed: i18n._('Determines how fast the machine moves when it’s engraving.'),
+                                dwellTime: i18n._('Determines how long the laser keeps on when it’s engraving a dot.')
+                            }
+                        }
+                    />
                 )}
             </React.Fragment>
         );
@@ -308,31 +292,32 @@ class LaserParameters extends PureComponent {
 }
 
 const mapStateToProps = (state) => {
-    // const { model, transformation, gcodeConfig, printOrder, config } = state.laser;
-    // const sourceType = model ? model.modelInfo.source.type : '';
-    // const mode = model ? model.modelInfo.mode : '';
-    const { selectedModelID, sourceType, mode, transformation, gcodeConfig, printOrder, config } = state.laser;
+    const { page, selectedModelID, sourceType, mode, showOrigin, transformation, gcodeConfig, printOrder, config } = state.laser;
 
     return {
+        page,
         printOrder,
         transformation,
         gcodeConfig,
-        // model,
         selectedModelID,
         sourceType,
         mode,
+        showOrigin,
         config
     };
 };
 
 const mapDispatchToProps = (dispatch) => {
     return {
+        togglePage: (page) => dispatch(sharedActions.togglePage('laser', page)),
         uploadImage: (file, mode, onFailure) => dispatch(sharedActions.uploadImage('laser', file, mode, onFailure)),
         insertDefaultTextVector: () => dispatch(sharedActions.insertDefaultTextVector('laser')),
         updateSelectedModelTransformation: (params) => dispatch(sharedActions.updateSelectedModelTransformation('laser', params)),
         updateSelectedModelGcodeConfig: (params) => dispatch(sharedActions.updateSelectedModelGcodeConfig('laser', params)),
         updateSelectedModelTextConfig: (config) => dispatch(sharedActions.updateSelectedModelTextConfig('laser', config)),
         updateSelectedModelPrintOrder: (printOrder) => dispatch(sharedActions.updateSelectedModelPrintOrder('laser', printOrder)),
+        changeSelectedModelShowOrigin: () => dispatch(sharedActions.changeSelectedModelShowOrigin('laser')),
+        changeSelectedModelMode: (sourceType, mode) => dispatch(sharedActions.changeSelectedModelMode('laser', sourceType, mode)),
         onModelAfterTransform: () => dispatch(sharedActions.onModelAfterTransform('laser')),
         setAutoPreview: (value) => dispatch(sharedActions.setAutoPreview('laser', value))
     };
diff --git a/src/app/widgets/LaserParams/config/ConfigGreyscale.jsx b/src/app/widgets/LaserParams/config/ConfigGreyscale.jsx
new file mode 100644
index 0000000000..38ec825cac
--- /dev/null
+++ b/src/app/widgets/LaserParams/config/ConfigGreyscale.jsx
@@ -0,0 +1,203 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Slider from 'rc-slider';
+import Select from 'react-select';
+
+import i18n from '../../../lib/i18n';
+import { NumberInput as Input } from '../../../components/Input';
+import TipTrigger from '../../../components/TipTrigger';
+import { actions } from '../../../flux/cncLaserShared';
+
+class ConfigGreyscale extends PureComponent {
+    static propTypes = {
+        invert: PropTypes.bool,
+        contrast: PropTypes.number.isRequired,
+        brightness: PropTypes.number.isRequired,
+        whiteClip: PropTypes.number.isRequired,
+        algorithm: PropTypes.string.isRequired,
+
+        updateSelectedModelConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        onInverseBW: () => {
+            this.props.updateSelectedModelConfig({ invert: !this.props.invert });
+        },
+        onChangeContrast: (contrast) => {
+            this.props.updateSelectedModelConfig({ contrast });
+        },
+        onChangeBrightness: (brightness) => {
+            this.props.updateSelectedModelConfig({ brightness });
+        },
+        onChangeWhiteClip: (whiteClip) => {
+            this.props.updateSelectedModelConfig({ whiteClip });
+        },
+        onChangeAlgorithm: (options) => {
+            this.props.updateSelectedModelConfig({ algorithm: options.value });
+        }
+    };
+
+    render() {
+        const { invert, contrast, brightness, whiteClip, algorithm } = this.props;
+
+        return (
+            <div>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div>
+                            <div className="sm-parameter-row">
+                                <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
+                                <input
+                                    type="checkbox"
+                                    className="sm-parameter-row__checkbox"
+                                    checked={invert}
+                                    onChange={this.actions.onInverseBW}
+                                />
+                            </div>
+                            <TipTrigger
+                                title={i18n._('Contrast')}
+                                content={i18n._('The difference between the lightest color and the darkest color.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Contrast')}</span>
+                                    <Input
+                                        className="sm-parameter-row__slider-input"
+                                        value={contrast}
+                                        min={0}
+                                        max={100}
+                                        onChange={this.actions.onChangeContrast}
+                                    />
+                                    <Slider
+                                        className="sm-parameter-row__slider"
+                                        value={contrast}
+                                        min={0}
+                                        max={100}
+                                        onChange={this.actions.onChangeContrast}
+                                    />
+                                </div>
+                            </TipTrigger>
+
+                            <TipTrigger
+                                title={i18n._('Brightness')}
+                                content={i18n._('The engraved picture is brighter when this value is bigger.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Brightness')}</span>
+                                    <Input
+                                        className="sm-parameter-row__slider-input"
+                                        value={brightness}
+                                        min={0}
+                                        max={100}
+                                        onChange={this.actions.onChangeBrightness}
+                                    />
+                                    <Slider
+                                        className="sm-parameter-row__slider"
+                                        value={brightness}
+                                        min={0}
+                                        max={100}
+                                        onChange={this.actions.onChangeBrightness}
+                                    />
+                                </div>
+                            </TipTrigger>
+                            <TipTrigger
+                                title={i18n._('White Clip')}
+                                content={i18n._('Set the threshold to turn the color that is not pure white into pure white.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('White Clip')}</span>
+                                    <Input
+                                        className="sm-parameter-row__slider-input"
+                                        value={whiteClip}
+                                        min={0}
+                                        max={255}
+                                        onChange={this.actions.onChangeWhiteClip}
+                                    />
+                                    <Slider
+                                        className="sm-parameter-row__slider"
+                                        value={whiteClip}
+                                        min={0}
+                                        max={255}
+                                        onChange={this.actions.onChangeWhiteClip}
+                                    />
+                                </div>
+                            </TipTrigger>
+                            <TipTrigger
+                                title={i18n._('Algorithm')}
+                                content={i18n._('Choose an algorithm for image processing.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Algorithm')}</span>
+                                    <Select
+                                        backspaceRemoves={false}
+                                        className="sm-parameter-row__select-lg"
+                                        clearable={false}
+                                        menuContainerStyle={{ zIndex: 5 }}
+                                        name="algorithm"
+                                        options={[{
+                                            value: 'FloydSteinburg',
+                                            label: 'Floyd-Steinburg'
+                                        }, {
+                                            value: 'JarvisJudiceNinke',
+                                            label: 'Jarvis-Judice-Ninke'
+                                        }, {
+                                            value: 'Stucki',
+                                            label: 'Stucki'
+                                        }, {
+                                            value: 'Atkinson',
+                                            label: 'Atkinson'
+                                        }, {
+                                            value: 'Burkes',
+                                            label: 'Burkes'
+                                        }, {
+                                            value: 'Sierra2',
+                                            label: 'Sierra-2'
+                                        }, {
+                                            value: 'Sierra3',
+                                            label: 'Sierra-3'
+                                        }, {
+                                            value: 'SierraLite',
+                                            label: 'Sierra Lite'
+                                        }]}
+                                        placeholder={i18n._('Choose algorithms')}
+                                        searchable={false}
+                                        value={algorithm}
+                                        onChange={this.actions.onChangeAlgorithm}
+                                    />
+                                </div>
+                            </TipTrigger>
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+
+const mapStateToProps = (state) => {
+    const { config } = state.laser;
+    const { invert, contrast, brightness, whiteClip, algorithm } = config;
+    return {
+        invert,
+        contrast,
+        brightness,
+        whiteClip,
+        algorithm
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigGreyscale);
diff --git a/src/app/widgets/LaserParams/config/ConfigRasterBW.jsx b/src/app/widgets/LaserParams/config/ConfigRasterBW.jsx
new file mode 100644
index 0000000000..c2536dda7d
--- /dev/null
+++ b/src/app/widgets/LaserParams/config/ConfigRasterBW.jsx
@@ -0,0 +1,97 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Slider from 'rc-slider';
+
+import i18n from '../../../lib/i18n';
+import TipTrigger from '../../../components/TipTrigger';
+import { NumberInput } from '../../../components/Input';
+import { actions } from '../../../flux/cncLaserShared';
+
+
+class ConfigRasterBW extends PureComponent {
+    static propTypes = {
+        invert: PropTypes.bool,
+        bwThreshold: PropTypes.number,
+
+        updateSelectedModelConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        onInverseBW: () => {
+            this.props.updateSelectedModelConfig({ invert: !this.props.invert });
+        },
+        onChangeBWThreshold: (bwThreshold) => {
+            this.props.updateSelectedModelConfig({ bwThreshold });
+        }
+    };
+
+    render() {
+        const { invert, bwThreshold } = this.props;
+
+        return (
+            <div>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div className="sm-parameter-row">
+                            <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
+                            <input
+                                type="checkbox"
+                                className="sm-parameter-row__checkbox"
+                                checked={invert}
+                                onChange={this.actions.onInverseBW}
+                            />
+                        </div>
+                        <TipTrigger
+                            title={i18n._('B&W')}
+                            content={i18n._('Set the proportion of the black color based on the original color of the image.')}
+                        >
+                            <div className="sm-parameter-row">
+                                <span className="sm-parameter-row__label">{i18n._('B&W')}</span>
+                                <NumberInput
+                                    className="sm-parameter-row__slider-input"
+                                    value={bwThreshold}
+                                    min={0}
+                                    max={255}
+                                    onChange={this.actions.onChangeBWThreshold}
+                                />
+                                <Slider
+                                    className="sm-parameter-row__slider"
+                                    value={bwThreshold}
+                                    min={0}
+                                    max={255}
+                                    onChange={this.actions.onChangeBWThreshold}
+                                />
+
+                            </div>
+                        </TipTrigger>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const { config } = state.laser;
+    const { invert, bwThreshold } = config;
+    return {
+        invert,
+        bwThreshold
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigRasterBW);
diff --git a/src/app/widgets/LaserParams/config/ConfigRasterVector.jsx b/src/app/widgets/LaserParams/config/ConfigRasterVector.jsx
new file mode 100644
index 0000000000..f3cd4c2656
--- /dev/null
+++ b/src/app/widgets/LaserParams/config/ConfigRasterVector.jsx
@@ -0,0 +1,123 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Slider from 'rc-slider';
+
+import i18n from '../../../lib/i18n';
+import { NumberInput as Input } from '../../../components/Input';
+import TipTrigger from '../../../components/TipTrigger';
+import { actions } from '../../../flux/cncLaserShared';
+
+class ConfigRasterVector extends PureComponent {
+    static propTypes = {
+        vectorThreshold: PropTypes.number,
+        invert: PropTypes.bool,
+        turdSize: PropTypes.number,
+
+        updateSelectedModelConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        changeVectorThreshold: (vectorThreshold) => {
+            this.props.updateSelectedModelConfig({ vectorThreshold });
+        },
+        onChangeTurdSize: (turdSize) => {
+            this.props.updateSelectedModelConfig({ turdSize });
+        },
+        onToggleInvert: (event) => {
+            this.props.updateSelectedModelConfig({ invert: event.target.checked });
+        }
+    };
+
+    render() {
+        const { vectorThreshold, invert, turdSize } = this.props;
+
+        return (
+            <div>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div>
+                            <TipTrigger
+                                title={i18n._('Invert')}
+                                content={i18n._('Inverts black to white and vise versa.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
+                                    <input
+                                        type="checkbox"
+                                        className="sm-parameter-row__checkbox"
+                                        checked={invert}
+                                        onChange={this.actions.onToggleInvert}
+                                    />
+                                </div>
+                            </TipTrigger>
+                            <TipTrigger
+                                title={i18n._('B&W')}
+                                content={i18n._('Set the proportion of the black color based on the original color of the image.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('B&W')}</span>
+                                    <Input
+                                        className="sm-parameter-row__slider-input"
+                                        value={vectorThreshold}
+                                        min={0}
+                                        max={20}
+                                        onChange={this.actions.changeVectorThreshold}
+                                    />
+                                    <Slider
+                                        className="sm-parameter-row__slider"
+                                        defaultValue={vectorThreshold}
+                                        min={0}
+                                        max={255}
+                                        step={1}
+                                        onChange={this.actions.changeVectorThreshold}
+                                    />
+                                </div>
+                            </TipTrigger>
+                            <TipTrigger
+                                title={i18n._('Impurity Size')}
+                                content={i18n._('Determines the minimum size of impurity which allows to be showed.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Impurity Size')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={turdSize}
+                                        min={0}
+                                        max={10000}
+                                        onChange={this.actions.onChangeTurdSize}
+                                    />
+                                </div>
+                            </TipTrigger>
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const { config } = state.laser;
+    const { vectorThreshold, invert, turdSize } = config;
+    return {
+        vectorThreshold,
+        invert,
+        turdSize
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigRasterVector);
diff --git a/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigGreyscale.jsx b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigGreyscale.jsx
new file mode 100644
index 0000000000..23fed8e7fd
--- /dev/null
+++ b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigGreyscale.jsx
@@ -0,0 +1,131 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Select from 'react-select';
+import classNames from 'classnames';
+import Anchor from '../../../components/Anchor';
+import i18n from '../../../lib/i18n';
+import { NumberInput as Input } from '../../../components/Input';
+import TipTrigger from '../../../components/TipTrigger';
+import { actions } from '../../../flux/cncLaserShared';
+import { ABSENT_VALUE } from '../../../constants';
+
+class GcodeConfigGreyscale extends PureComponent {
+    static propTypes = {
+        density: PropTypes.number.isRequired,
+        movementMode: PropTypes.string.isRequired,
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        onChangeMovementMode: (options) => {
+            if (options.value === 'greyscale-line') {
+                this.props.updateSelectedModelGcodeConfig({
+                    dwellTime: ABSENT_VALUE,
+                    jogSpeed: 1500,
+                    workSpeed: 500
+                });
+            } else if (options.value === 'greyscale-dot') {
+                this.props.updateSelectedModelGcodeConfig({
+                    dwellTime: 42,
+                    jogSpeed: ABSENT_VALUE,
+                    workSpeed: 1500
+                });
+            }
+            this.props.updateSelectedModelGcodeConfig({ movementMode: options.value });
+        },
+        onChangeDensity: (density) => {
+            this.props.updateSelectedModelGcodeConfig({ density });
+        }
+    };
+
+    render() {
+        const { density, movementMode } = this.props;
+
+        return (
+            <div>
+                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
+                    <span className="fa fa-image sm-parameter-header__indicator" />
+                    <span className="sm-parameter-header__title">{i18n._('Greyscale')}</span>
+                    <span className={classNames(
+                        'fa',
+                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
+                        'sm-parameter-header__indicator',
+                        'pull-right',
+                    )}
+                    />
+                </Anchor>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div>
+                            <div className="sm-parameter-row">
+                                <span className="sm-parameter-row__label">{i18n._('Movement Mode')}</span>
+                                <Select
+                                    backspaceRemoves={false}
+                                    className="sm-parameter-row__select-lg"
+                                    clearable={false}
+                                    menuContainerStyle={{ zIndex: 5 }}
+                                    name="Movement"
+                                    options={[{
+                                        value: 'greyscale-line',
+                                        label: i18n._('Line (Normal Quality)')
+                                    }, {
+                                        value: 'greyscale-dot',
+                                        label: i18n._('Dot (High Quality)')
+                                    }]}
+                                    placeholder={i18n._('Choose movement mode')}
+                                    searchable={false}
+                                    value={movementMode}
+                                    onChange={this.actions.onChangeMovementMode}
+                                />
+                            </div>
+                            <TipTrigger
+                                title={i18n._('Density')}
+                                content={i18n._('Determines how fine and smooth the engraved picture will be.'
+                                + 'The bigger this value is, the better quality you will get. The range is 1-10 dot/mm and 10 is recommended.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Density')}</span>
+                                    <Input
+                                        className="sm-parameter-row__input"
+                                        value={density}
+                                        min={1}
+                                        max={10}
+                                        step={1}
+                                        onChange={this.actions.onChangeDensity}
+                                    />
+                                    <span className="sm-parameter-row__input-unit">dot/mm</span>
+                                </div>
+                            </TipTrigger>
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+
+const mapStateToProps = (state) => {
+    const { gcodeConfig } = state.laser;
+    const { density, movementMode } = gcodeConfig;
+    return {
+        density,
+        movementMode
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelGcodeConfig: (params) => dispatch(actions.updateSelectedModelGcodeConfig('laser', params))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GcodeConfigGreyscale);
diff --git a/src/app/widgets/LaserParams/ConfigRasterBW.jsx b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterBW.jsx
similarity index 59%
rename from src/app/widgets/LaserParams/ConfigRasterBW.jsx
rename to src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterBW.jsx
index 65f446b03a..6e8ff11856 100644
--- a/src/app/widgets/LaserParams/ConfigRasterBW.jsx
+++ b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterBW.jsx
@@ -1,24 +1,21 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { connect } from 'react-redux';
 import Select from 'react-select';
-import Slider from 'rc-slider';
 
-import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
-import TipTrigger from '../../components/TipTrigger';
-import { NumberInput } from '../../components/Input';
-import { actions } from '../../flux/cncLaserShared';
+import classNames from 'classnames';
+import i18n from '../../../lib/i18n';
+import TipTrigger from '../../../components/TipTrigger';
+import { NumberInput } from '../../../components/Input';
+import { actions } from '../../../flux/cncLaserShared';
+import Anchor from '../../../components/Anchor';
 
 
-class ConfigRasterBW extends PureComponent {
+class GcodeConfigRasterBW extends PureComponent {
     static propTypes = {
-        invertGreyscale: PropTypes.bool,
-        bwThreshold: PropTypes.number,
         density: PropTypes.number,
         direction: PropTypes.string,
-        updateSelectedModelConfig: PropTypes.func.isRequired
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
     };
 
     state = {
@@ -29,22 +26,16 @@ class ConfigRasterBW extends PureComponent {
         onToggleExpand: () => {
             this.setState(state => ({ expanded: !state.expanded }));
         },
-        onInverseBW: () => {
-            this.props.updateSelectedModelConfig({ invertGreyscale: !this.props.invertGreyscale });
-        },
-        onChangeBWThreshold: (bwThreshold) => {
-            this.props.updateSelectedModelConfig({ bwThreshold });
-        },
         onChangeDirection: (option) => {
-            this.props.updateSelectedModelConfig({ direction: option.value });
+            this.props.updateSelectedModelGcodeConfig({ direction: option.value });
         },
         onChangeDensity: (density) => {
-            this.props.updateSelectedModelConfig({ density });
+            this.props.updateSelectedModelGcodeConfig({ density });
         }
     };
 
     render() {
-        const { invertGreyscale, bwThreshold, density, direction } = this.props;
+        const { density, direction } = this.props;
 
         return (
             <div>
@@ -61,38 +52,6 @@ class ConfigRasterBW extends PureComponent {
                 </Anchor>
                 {this.state.expanded && (
                     <React.Fragment>
-                        <div className="sm-parameter-row">
-                            <span className="sm-parameter-row__label">{i18n._('Invert')}</span>
-                            <input
-                                type="checkbox"
-                                className="sm-parameter-row__checkbox"
-                                value={invertGreyscale}
-                                onClick={this.actions.onInverseBW}
-                            />
-                        </div>
-                        <TipTrigger
-                            title={i18n._('B&W')}
-                            content={i18n._('Set the proportion of the black color based on the original color of the image.')}
-                        >
-                            <div className="sm-parameter-row">
-                                <span className="sm-parameter-row__label">{i18n._('B&W')}</span>
-                                <NumberInput
-                                    className="sm-parameter-row__slider-input"
-                                    value={bwThreshold}
-                                    min={0}
-                                    max={255}
-                                    onChange={this.actions.onChangeBWThreshold}
-                                />
-                                <Slider
-                                    className="sm-parameter-row__slider"
-                                    value={bwThreshold}
-                                    min={0}
-                                    max={255}
-                                    onChange={this.actions.onChangeBWThreshold}
-                                />
-
-                            </div>
-                        </TipTrigger>
                         <TipTrigger
                             title={i18n._('Line Direction')}
                             content={i18n._('Select the direction of the engraving path.')}
@@ -151,11 +110,9 @@ The bigger this value is, the better quality you will get. The range is 1-10 dot
 }
 
 const mapStateToProps = (state) => {
-    const { config } = state.laser;
-    const { invertGreyscale, bwThreshold, density, direction } = config;
+    const { gcodeConfig } = state.laser;
+    const { density, direction } = gcodeConfig;
     return {
-        invertGreyscale,
-        bwThreshold,
         density,
         direction
     };
@@ -163,8 +120,8 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        updateSelectedModelConfig: (config) => dispatch(actions.updateSelectedModelConfig('laser', config))
+        updateSelectedModelGcodeConfig: (gcodeConfig) => dispatch(actions.updateSelectedModelGcodeConfig('laser', gcodeConfig))
     };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigRasterBW);
+export default connect(mapStateToProps, mapDispatchToProps)(GcodeConfigRasterBW);
diff --git a/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterVector.jsx b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterVector.jsx
new file mode 100644
index 0000000000..54135da695
--- /dev/null
+++ b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigRasterVector.jsx
@@ -0,0 +1,128 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Slider from 'rc-slider';
+
+import classNames from 'classnames';
+import i18n from '../../../lib/i18n';
+import { NumberInput as Input } from '../../../components/Input';
+import TipTrigger from '../../../components/TipTrigger';
+import OptionalDropdown from '../../../components/OptionalDropdown';
+import { actions } from '../../../flux/cncLaserShared';
+import Anchor from '../../../components/Anchor';
+
+class GcodeConfigRasterVector extends PureComponent {
+    static propTypes = {
+        optimizePath: PropTypes.bool,
+        fillEnabled: PropTypes.bool,
+        fillDensity: PropTypes.number,
+
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
+    };
+
+    state = {
+        expanded: true
+    };
+
+    actions = {
+        onToggleExpand: () => {
+            this.setState(state => ({ expanded: !state.expanded }));
+        },
+        onToggleFill: () => {
+            this.props.updateSelectedModelGcodeConfig({ fillEnabled: !this.props.fillEnabled });
+        },
+        onChangeFillDensity: (fillDensity) => {
+            this.props.updateSelectedModelGcodeConfig({ fillDensity });
+        },
+        onToggleOptimizePath: (event) => {
+            this.props.updateSelectedModelGcodeConfig({ optimizePath: event.target.checked });
+        }
+    };
+
+    render() {
+        const { optimizePath, fillEnabled, fillDensity } = this.props;
+
+        return (
+            <div>
+                <Anchor className="sm-parameter-header" onClick={this.actions.onToggleExpand}>
+                    <span className="fa fa-image sm-parameter-header__indicator" />
+                    <span className="sm-parameter-header__title">{i18n._('Vector')}</span>
+                    <span className={classNames(
+                        'fa',
+                        this.state.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down',
+                        'sm-parameter-header__indicator',
+                        'pull-right',
+                    )}
+                    />
+                </Anchor>
+                {this.state.expanded && (
+                    <React.Fragment>
+                        <div>
+                            <TipTrigger
+                                title={i18n._('Optimize Path')}
+                                content={i18n._('Optimizes the path based on the proximity of the lines in the image.')}
+                            >
+                                <div className="sm-parameter-row">
+                                    <span className="sm-parameter-row__label">{i18n._('Optimize Path')}</span>
+                                    <input
+                                        type="checkbox"
+                                        className="sm-parameter-row__checkbox"
+                                        checked={optimizePath}
+                                        onChange={this.actions.onToggleOptimizePath}
+                                    />
+                                </div>
+                            </TipTrigger>
+                            <OptionalDropdown
+                                style={{ marginBottom: '10px' }}
+                                title={i18n._('Fill')}
+                                onClick={this.actions.onToggleFill}
+                                hidden={!fillEnabled}
+                            >
+                                <TipTrigger
+                                    title={i18n._('Fill Density')}
+                                    content={i18n._('Set the degree to which an area is filled with laser dots. The highest density is 20 dot/mm. When it is set to 0, the SVG image will be engraved without fill.')}
+                                >
+                                    <div className="sm-parameter-row">
+                                        <span className="sm-parameter-row__label">{i18n._('Fill Density')}</span>
+                                        <Input
+                                            className="sm-parameter-row__slider-input"
+                                            value={fillDensity}
+                                            min={0}
+                                            max={20}
+                                            onChange={this.actions.onChangeFillDensity}
+                                        />
+                                        <Slider
+                                            className="sm-parameter-row__slider"
+                                            value={fillDensity}
+                                            min={0}
+                                            max={20}
+                                            onChange={this.actions.onChangeFillDensity}
+                                        />
+                                    </div>
+                                </TipTrigger>
+                            </OptionalDropdown>
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    const { gcodeConfig } = state.laser;
+    const { optimizePath, fillEnabled, fillDensity } = gcodeConfig;
+    return {
+        optimizePath,
+        fillEnabled,
+        fillDensity
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateSelectedModelGcodeConfig: (config) => dispatch(actions.updateSelectedModelGcodeConfig('laser', config))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GcodeConfigRasterVector);
diff --git a/src/app/widgets/LaserParams/ConfigSvgVector.jsx b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigSvgVector.jsx
similarity index 81%
rename from src/app/widgets/LaserParams/ConfigSvgVector.jsx
rename to src/app/widgets/LaserParams/gcodeconfig/GcodeConfigSvgVector.jsx
index 9d83cbdeea..1aee94c104 100644
--- a/src/app/widgets/LaserParams/ConfigSvgVector.jsx
+++ b/src/app/widgets/LaserParams/gcodeconfig/GcodeConfigSvgVector.jsx
@@ -4,20 +4,20 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import Slider from 'rc-slider';
 
-import i18n from '../../lib/i18n';
-import Anchor from '../../components/Anchor';
-import { NumberInput as Input } from '../../components/Input';
-import TipTrigger from '../../components/TipTrigger';
-import OptionalDropdown from '../../components/OptionalDropdown';
-import { actions } from '../../flux/cncLaserShared';
+import i18n from '../../../lib/i18n';
+import Anchor from '../../../components/Anchor';
+import { NumberInput as Input } from '../../../components/Input';
+import TipTrigger from '../../../components/TipTrigger';
+import OptionalDropdown from '../../../components/OptionalDropdown';
+import { actions } from '../../../flux/cncLaserShared';
 
-
-class ConfigSvgVector extends PureComponent {
+class GcodeConfigSvgVector extends PureComponent {
     static propTypes = {
         optimizePath: PropTypes.bool,
         fillEnabled: PropTypes.bool.isRequired,
         fillDensity: PropTypes.number.isRequired,
-        updateSelectedModelConfig: PropTypes.func.isRequired
+
+        updateSelectedModelGcodeConfig: PropTypes.func.isRequired
     };
 
     state = {
@@ -29,13 +29,13 @@ class ConfigSvgVector extends PureComponent {
             this.setState(state => ({ expanded: !state.expanded }));
         },
         onToggleFill: () => {
-            this.props.updateSelectedModelConfig({ fillEnabled: !this.props.fillEnabled });
+            this.props.updateSelectedModelGcodeConfig({ fillEnabled: !this.props.fillEnabled });
         },
         onChangeFillDensity: (fillDensity) => {
-            this.props.updateSelectedModelConfig({ fillDensity });
+            this.props.updateSelectedModelGcodeConfig({ fillDensity });
         },
         onToggleOptimizePath: (event) => {
-            this.props.updateSelectedModelConfig({ optimizePath: event.target.checked });
+            this.props.updateSelectedModelGcodeConfig({ optimizePath: event.target.checked });
         }
     };
 
@@ -109,8 +109,8 @@ class ConfigSvgVector extends PureComponent {
 
 
 const mapStateToProps = (state) => {
-    const { config } = state.laser;
-    const { optimizePath, fillEnabled, fillDensity } = config;
+    const { gcodeConfig } = state.laser;
+    const { optimizePath, fillEnabled, fillDensity } = gcodeConfig;
     return {
         optimizePath,
         fillEnabled,
@@ -120,8 +120,8 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        updateSelectedModelConfig: (params) => dispatch(actions.updateSelectedModelConfig('laser', params))
+        updateSelectedModelGcodeConfig: (params) => dispatch(actions.updateSelectedModelGcodeConfig('laser', params))
     };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigSvgVector);
+export default connect(mapStateToProps, mapDispatchToProps)(GcodeConfigSvgVector);
diff --git a/src/app/widgets/LaserParams/images/laser-mode-greyscale-88x88.png b/src/app/widgets/LaserParams/images/laser-mode-greyscale-88x88.png
deleted file mode 100644
index df06d758f5..0000000000
Binary files a/src/app/widgets/LaserParams/images/laser-mode-greyscale-88x88.png and /dev/null differ
diff --git a/src/app/widgets/LaserParams/images/laser-mode-text-88x88.png b/src/app/widgets/LaserParams/images/laser-mode-text-88x88.png
deleted file mode 100644
index 318c1e443b..0000000000
Binary files a/src/app/widgets/LaserParams/images/laser-mode-text-88x88.png and /dev/null differ
diff --git a/src/app/widgets/LaserParams/images/laser-mode-vector-88x88.png b/src/app/widgets/LaserParams/images/laser-mode-vector-88x88.png
deleted file mode 100644
index fd2822dca9..0000000000
Binary files a/src/app/widgets/LaserParams/images/laser-mode-vector-88x88.png and /dev/null differ
diff --git a/src/app/widgets/LaserParams/styles.styl b/src/app/widgets/LaserParams/styles.styl
index c0e4588202..4cc4333f7a 100644
--- a/src/app/widgets/LaserParams/styles.styl
+++ b/src/app/widgets/LaserParams/styles.styl
@@ -28,16 +28,16 @@
                 height: 68px
 
         &__icon-bw
-            background: url("./images/laser-mode-bw-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-bw-88x88.png") no-repeat 0 0
             background-size: 100%
         &__icon-greyscale
-            background: url("./images/laser-mode-greyscale-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-greyscale-88x88.png") no-repeat 0 0
             background-size: 100%
         &__icon-vector
-            background: url("./images/laser-mode-vector-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-vector-88x88.png") no-repeat 0 0
             background-size: 100%
         &__icon-text
-            background: url("./images/laser-mode-text-88x88.png") no-repeat 0 0
+            background: url("../../images/cnc-laser/laser-mode-text-88x88.png") no-repeat 0 0
             background-size: 100%
 
         &__text
diff --git a/src/app/widgets/LaserVisualizer/Visualizer.jsx b/src/app/widgets/LaserVisualizer/Visualizer.jsx
index db520d070c..bbc565b272 100644
--- a/src/app/widgets/LaserVisualizer/Visualizer.jsx
+++ b/src/app/widgets/LaserVisualizer/Visualizer.jsx
@@ -16,6 +16,8 @@ import { actions, CNC_LASER_STAGE } from '../../flux/cncLaserShared';
 import VisualizerTopLeft from './VisualizerTopLeft';
 import VisualizerTopRight from '../LaserCameraAidBackground';
 import styles from './styles.styl';
+import { PAGE_EDITOR } from '../../constants';
+import VisualizerTool from './VisualizerTool';
 
 
 function humanReadableTime(t) {
@@ -27,6 +29,7 @@ function humanReadableTime(t) {
 
 class Visualizer extends Component {
     static propTypes = {
+        page: PropTypes.string.isRequired,
         stage: PropTypes.number.isRequired,
         progress: PropTypes.number.isRequired,
 
@@ -223,15 +226,23 @@ class Visualizer extends Component {
 
         const estimatedTime = isModelSelected ? this.props.getEstimatedTime('selected') : this.props.getEstimatedTime('total');
         const notice = this.getNotice();
+        const isEditor = this.props.page === PAGE_EDITOR;
 
         return (
             <div
                 ref={this.visualizerRef}
                 style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
             >
-                <div className={styles['visualizer-top-left']}>
-                    <VisualizerTopLeft />
-                </div>
+                {isEditor && (
+                    <div className={styles['visualizer-top-left']}>
+                        <VisualizerTopLeft />
+                    </div>
+                )}
+                {isEditor && (
+                    <div>
+                        <VisualizerTool />
+                    </div>
+                )}
                 <div className={styles['visualizer-top-right']}>
                     <VisualizerTopRight />
                 </div>
@@ -390,9 +401,9 @@ const mapStateToProps = (state) => {
 
     const { background } = state.laser;
     // call canvas.updateTransformControl2D() when transformation changed or model selected changed
-    // const { modelGroup, transformation, model, hasModel, previewUpdated, renderingTimestamp } = state.laser;
-    const { selectedModelID, modelGroup, toolPathModelGroup, hasModel, renderingTimestamp, stage, progress } = state.laser;
+    const { page, selectedModelID, modelGroup, toolPathModelGroup, hasModel, renderingTimestamp, stage, progress } = state.laser;
     return {
+        page,
         size: machine.size,
         hasModel,
         selectedModelID,
diff --git a/src/app/widgets/LaserVisualizer/VisualizerTool.jsx b/src/app/widgets/LaserVisualizer/VisualizerTool.jsx
new file mode 100755
index 0000000000..a2a6ce4368
--- /dev/null
+++ b/src/app/widgets/LaserVisualizer/VisualizerTool.jsx
@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Anchor from '../../components/Anchor';
+import styles from './styles.styl';
+import { actions as sharedActions } from '../../flux/cncLaserShared';
+
+
+class VisualizerTool extends PureComponent {
+    static propTypes = {
+        insertDefaultTextVector: PropTypes.func.isRequired
+    };
+
+    actions = {
+        onClickInsertText: () => {
+            this.props.insertDefaultTextVector();
+        }
+    };
+
+    render() {
+        return (
+            <React.Fragment>
+                <div className={classNames(styles['visualizer-center'])}>
+                    <Anchor
+                        componentClass="button"
+                        className={styles['btn-center']}
+                        onClick={this.actions.onClickInsertText}
+                    >
+                        <div className={styles['btn-text']} />
+                    </Anchor>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+
+// const mapStateToProps = (state) => {
+//     return {
+//
+//     };
+// };
+
+const mapDispatchToProps = (dispatch) => ({
+    insertDefaultTextVector: () => dispatch(sharedActions.insertDefaultTextVector('laser'))
+});
+
+
+export default connect(null, mapDispatchToProps)(VisualizerTool);
diff --git a/src/app/widgets/LaserVisualizer/VisualizerTopLeft.jsx b/src/app/widgets/LaserVisualizer/VisualizerTopLeft.jsx
index 928e9260de..a3e76a190d 100644
--- a/src/app/widgets/LaserVisualizer/VisualizerTopLeft.jsx
+++ b/src/app/widgets/LaserVisualizer/VisualizerTopLeft.jsx
@@ -1,33 +1,112 @@
 import React, { PureComponent } from 'react';
+import path from 'path';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Anchor from '../../components/Anchor';
 import styles from './styles.styl';
-import { actions } from '../../flux/cncLaserShared';
-
+import { actions as sharedActions, actions } from '../../flux/cncLaserShared';
+import i18n from '../../lib/i18n';
+import { PAGE_EDITOR } from '../../constants';
+import api from '../../api';
+import modal from '../../lib/modal';
 
 class VisualizerTopLeft extends PureComponent {
     static propTypes = {
         canUndo: PropTypes.bool.isRequired,
         canRedo: PropTypes.bool.isRequired,
         undo: PropTypes.func.isRequired,
-        redo: PropTypes.func.isRequired
+        redo: PropTypes.func.isRequired,
+        uploadImage: PropTypes.func.isRequired,
+        setAutoPreview: PropTypes.func.isRequired,
+        togglePage: PropTypes.func.isRequired,
+        insertDefaultTextVector: PropTypes.func.isRequired
     };
 
+    fileInput = React.createRef();
+
     actions = {
+        onChangeFile: (event) => {
+            const file = event.target.files[0];
+            const extname = path.extname(file.name).toLowerCase();
+            let uploadMode;
+            if (extname === '.svg') {
+                uploadMode = 'vector';
+            } else if (extname === '.dxf') {
+                uploadMode = 'vector';
+            } else {
+                uploadMode = 'bw';
+            }
+
+            this.props.togglePage(PAGE_EDITOR);
+            if (uploadMode === 'trace') {
+                const formData = new FormData();
+                formData.append('image', file);
+                api.uploadImage(formData)
+                    .then(async (res) => {
+                        this.actions.updateOptions({
+                            originalName: res.body.originalName,
+                            uploadName: res.body.uploadName,
+                            width: res.body.width,
+                            height: res.body.height
+                        });
+                    });
+            } else {
+                if (uploadMode === 'greyscale') {
+                    this.props.setAutoPreview(false);
+                }
+                this.props.uploadImage(file, uploadMode, () => {
+                    modal({
+                        title: i18n._('Parse Image Error'),
+                        body: i18n._('Failed to parse image file {{filename}}', { filename: file.name })
+                    });
+                });
+            }
+        },
+        onClickToUpload: () => {
+            this.fileInput.current.value = null;
+            this.fileInput.current.click();
+        },
         undo: () => {
             this.props.undo();
         },
         redo: () => {
             this.props.redo();
+        },
+        onClickInsertText: () => {
+            this.props.insertDefaultTextVector();
         }
     };
 
     render() {
         // const actions = this.actions;
         const { canUndo, canRedo } = this.props;
+
         return (
             <React.Fragment>
+                <input
+                    ref={this.fileInput}
+                    type="file"
+                    accept=".svg, .png, .jpg, .jpeg, .bmp, .dxf"
+                    style={{ display: 'none' }}
+                    multiple={false}
+                    onChange={this.actions.onChangeFile}
+                />
+                <button
+                    type="button"
+                    className="sm-btn-small sm-btn-primary"
+                    style={{ float: 'left' }}
+                    title={i18n._('Open File')}
+                    onClick={() => this.actions.onClickToUpload()}
+                >
+                    {i18n._('Open File')}
+                </button>
+                <Anchor
+                    componentClass="button"
+                    className={styles['btn-top-left']}
+                    onClick={this.actions.onClickInsertText}
+                >
+                    <div className={styles['btn-text']} />
+                </Anchor>
                 <Anchor
                     componentClass="button"
                     className={styles['btn-top-left']}
@@ -60,7 +139,12 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => ({
     undo: () => dispatch(actions.undo('laser')),
-    redo: () => dispatch(actions.redo('laser'))
+    redo: () => dispatch(actions.redo('laser')),
+    setAutoPreview: (value) => dispatch(sharedActions.setAutoPreview('laser', value)),
+    uploadImage: (file, mode, onFailure) => dispatch(sharedActions.uploadImage('laser', file, mode, onFailure)),
+    togglePage: (page) => dispatch(sharedActions.togglePage('laser', page)),
+    insertDefaultTextVector: () => dispatch(sharedActions.insertDefaultTextVector('laser'))
+
 });
 
 
diff --git a/src/app/widgets/LaserVisualizer/styles.styl b/src/app/widgets/LaserVisualizer/styles.styl
index b7f67108b7..6b5cf139b6 100644
--- a/src/app/widgets/LaserVisualizer/styles.styl
+++ b/src/app/widgets/LaserVisualizer/styles.styl
@@ -134,7 +134,7 @@ $visualizer-padding = 10px
         display: inline-block
         position: relative
         float: left
-        width: 60px
+        width: 45px
         height: 30px
         background-color: #FFF
         margin-left: .5rem
@@ -142,6 +142,10 @@ $visualizer-padding = 10px
         border: 1px solid $border-color
         border-radius: $border-radius
 
+        .btn-text
+            height: 100%
+            background: url("../../images/cnc-laser/text-45x30.jpg") no-repeat 0 0
+            background-size: 100%
         .btn-undo
         .btn-redo
         .btn-reset
@@ -178,3 +182,24 @@ $visualizer-padding = 10px
                 background-image: url("/images/14x14/reset-disabled-14x14.png")
             .btn-remove
                 background-image: url("/images/14x14/delete-disabled-14x14.png")
+
+.visualizer-center
+    z-index: $z-index-float
+    position: absolute
+    left: $visualizer-padding
+    top: 50%
+    transform: translate(0, -50%)
+
+    .btn-center
+        display: block
+        position: relative
+        top: -70px
+        width: 56px
+        height: 56px
+        padding: 0
+        border: none
+
+        .btn-text
+            height: 100%
+            background: url("../../images/cnc-laser/text-224x224.png") no-repeat 0 0
+            background-size: 100%
diff --git a/src/app/widgets/PrintingOutput/Output.jsx b/src/app/widgets/PrintingOutput/Output.jsx
index bedade0d65..dc83f8ba52 100644
--- a/src/app/widgets/PrintingOutput/Output.jsx
+++ b/src/app/widgets/PrintingOutput/Output.jsx
@@ -129,6 +129,7 @@ class Output extends PureComponent {
 
         const isSlicing = stage === PRINTING_STAGE.SLICING;
         const { isAnyModelOverstepped } = this.props;
+        console.log(hasModel, isSlicing, isAnyModelOverstepped);
 
         return (
             <div>
diff --git a/src/app/widgets/ToolPathRenderer.js b/src/app/widgets/ToolPathRenderer.js
index 583f30aa18..2b495e779a 100755
--- a/src/app/widgets/ToolPathRenderer.js
+++ b/src/app/widgets/ToolPathRenderer.js
@@ -33,13 +33,13 @@ const motionColor = {
 
 class ToolPathRenderer {
     render(toolPath) {
-        const { headerType, mode, movementMode, data } = toolPath;
+        const { headType, mode, movementMode, data } = toolPath;
 
         // now only support cnc&laser
-        if (!['cnc', 'laser'].includes(headerType)) {
+        if (!['cnc', 'laser'].includes(headType)) {
             return null;
         }
-        if (headerType === 'laser') {
+        if (headType === 'laser') {
             if (mode === 'greyscale' && movementMode === 'greyscale-dot') {
                 return this.parseToPoints(data);
             } else {
diff --git a/src/server/lib/GcodeGenerator/GcodeGenerator.js b/src/server/lib/GcodeGenerator/GcodeGenerator.js
index 155db44b06..0debda16bc 100644
--- a/src/server/lib/GcodeGenerator/GcodeGenerator.js
+++ b/src/server/lib/GcodeGenerator/GcodeGenerator.js
@@ -3,15 +3,15 @@ class GcodeGenerator {
         if (!toolPathObj || !gcodeConfig) {
             return null;
         }
-        const { headerType } = toolPathObj;
-        if (!['cnc', 'laser', '3dp'].includes(headerType)) {
+        const { headType } = toolPathObj;
+        if (!['cnc', 'laser', '3dp'].includes(headType)) {
             return null;
         }
 
         let gcodeStr = '';
-        if (headerType === 'cnc') {
+        if (headType === 'cnc') {
             gcodeStr = this.parseAsCNC(toolPathObj, gcodeConfig);
-        } else if (headerType === 'laser') {
+        } else if (headType === 'laser') {
             gcodeStr = this.parseAsLaser(toolPathObj, gcodeConfig);
         }
         return gcodeStr;
diff --git a/src/server/lib/ToolPathGenerator/CncReliefToolPathGenerator.js b/src/server/lib/ToolPathGenerator/CncReliefToolPathGenerator.js
index 13a07f24d1..f685515a78 100644
--- a/src/server/lib/ToolPathGenerator/CncReliefToolPathGenerator.js
+++ b/src/server/lib/ToolPathGenerator/CncReliefToolPathGenerator.js
@@ -8,9 +8,10 @@ export default class CncReliefToolPathGenerator extends EventEmitter {
         super();
         // const { config, transformation, gcodeConfigPlaceholder } = modelInfo;
         const { config, transformation, gcodeConfig } = modelInfo;
-        const { jogSpeed, workSpeed, plungeSpeed } = gcodeConfig;
+        const { jogSpeed, workSpeed, plungeSpeed, toolAngle, targetDepth,
+            stepDown, safetyHeight, stopHeight, density } = gcodeConfig;
         // todo: toolDiameter, toolAngle
-        const { toolAngle, targetDepth, stepDown, safetyHeight, stopHeight, isInvert, density } = config;
+        const { invert } = config;
 
         this.modelInfo = modelInfo;
         this.jogSpeed = jogSpeed;
@@ -29,7 +30,7 @@ export default class CncReliefToolPathGenerator extends EventEmitter {
         this.targetHeight = Math.round(transformation.height * this.density);
         this.rotationZ = transformation.rotationZ;
         this.flip = transformation.flip;
-        this.isInvert = isInvert;
+        this.invert = invert;
 
         this.modelPath = modelPath;
         this.toolSlope = Math.tan(toolAngle / 2 * Math.PI / 180);
@@ -42,7 +43,7 @@ export default class CncReliefToolPathGenerator extends EventEmitter {
         return Jimp
             .read(this.modelPath)
             .then(img => {
-                if (this.isInvert) {
+                if (this.invert) {
                     img.invert();
                 }
 
@@ -202,7 +203,7 @@ export default class CncReliefToolPathGenerator extends EventEmitter {
         let currentZ = 0;
         let progress = 0;
         let cutDownTimes = 0;
-        const { headerType, mode, transformation, config } = this.modelInfo;
+        const { headType, mode, transformation, gcodeConfig } = this.modelInfo;
         const { positionX, positionY, positionZ } = transformation;
         const normalizer = new Normalizer(
             'Center',
@@ -337,9 +338,9 @@ export default class CncReliefToolPathGenerator extends EventEmitter {
         boundingBox.min.y += positionY;
 
         return {
-            headerType: headerType,
+            headType: headType,
             mode: mode,
-            movementMode: (headerType === 'laser' && mode === 'greyscale') ? config.movementMode : '',
+            movementMode: (headType === 'laser' && mode === 'greyscale') ? gcodeConfig.movementMode : '',
             data: this.toolPath,
             estimatedTime: this.estimatedTime * 3,
             positionX: positionX,
diff --git a/src/server/lib/ToolPathGenerator/CncToolPathGenerator.js b/src/server/lib/ToolPathGenerator/CncToolPathGenerator.js
index 416e23548d..b9c6bdab7f 100644
--- a/src/server/lib/ToolPathGenerator/CncToolPathGenerator.js
+++ b/src/server/lib/ToolPathGenerator/CncToolPathGenerator.js
@@ -122,14 +122,14 @@ export default class CNCToolPathGenerator extends EventEmitter {
 
     // Static method to generate `ToolPath` from SVG
     generateToolPath(svg, modelInfo) {
-        const { config, gcodeConfigPlaceholder } = modelInfo;
+        const { gcodeConfig, gcodeConfigPlaceholder } = modelInfo;
         const {
             pathType = 'path',
             toolDiameter, toolAngle,
             targetDepth, stepDown, safetyHeight, stopHeight,
             enableTab = false, tabWidth, tabHeight, tabSpace,
             fillEnabled, fillDensity
-        } = config;
+        } = gcodeConfig;
         const { jogSpeed, workSpeed, plungeSpeed } = gcodeConfigPlaceholder;
 
         // Process path according to path type
diff --git a/src/server/lib/ToolPathGenerator/GcodeParser.js b/src/server/lib/ToolPathGenerator/GcodeParser.js
index e0d10687c3..9041a6d215 100755
--- a/src/server/lib/ToolPathGenerator/GcodeParser.js
+++ b/src/server/lib/ToolPathGenerator/GcodeParser.js
@@ -13,11 +13,11 @@ class GcodeParser {
         if (!fakeGcodes || !modelInfo) {
             return null;
         }
-        if (!['cnc', 'laser', '3dp'].includes(modelInfo.headerType)) {
+        if (!['cnc', 'laser', '3dp'].includes(modelInfo.headType)) {
             return null;
         }
 
-        const { headerType, mode, transformation, config, gcodeConfig } = modelInfo;
+        const { headType, mode, transformation, gcodeConfig } = modelInfo;
         const { positionX, positionY, positionZ } = transformation;
         const { jogSpeed, workSpeed, dwellTime } = gcodeConfig;
 
@@ -66,9 +66,9 @@ class GcodeParser {
         boundingBox.min.y += positionY;
 
         return {
-            headerType: headerType,
+            headType: headType,
             mode: mode,
-            movementMode: (headerType === 'laser' && mode === 'greyscale') ? config.movementMode : '',
+            movementMode: (headType === 'laser' && mode === 'greyscale') ? gcodeConfig.movementMode : '',
             data: this.data,
             estimatedTime: this.estimatedTime * 1.4,
             positionX: positionX,
diff --git a/src/server/lib/ToolPathGenerator/LaserToolPathGenerator.js b/src/server/lib/ToolPathGenerator/LaserToolPathGenerator.js
index 0e46a47f2e..f0bda0cc9c 100644
--- a/src/server/lib/ToolPathGenerator/LaserToolPathGenerator.js
+++ b/src/server/lib/ToolPathGenerator/LaserToolPathGenerator.js
@@ -25,8 +25,8 @@ class LaserToolPathGenerator extends EventEmitter {
     }
 
     async generateToolPathObj(modelInfo, modelPath) {
-        const { mode, config, sourceType } = modelInfo;
-        const { movementMode } = config;
+        const { mode, gcodeConfig, sourceType } = modelInfo;
+        const { movementMode } = gcodeConfig;
 
         let fakeGcodes = this.getGcodeHeader();
 
@@ -70,8 +70,8 @@ class LaserToolPathGenerator extends EventEmitter {
         const height = img.bitmap.height;
 
         const normalizer = new Normalizer('Center', 0, width, 0, height, {
-            x: 1 / config.density,
-            y: 1 / config.density
+            x: 1 / gcodeConfig.density,
+            y: 1 / gcodeConfig.density
         });
 
         let progress = 0;
@@ -169,8 +169,8 @@ class LaserToolPathGenerator extends EventEmitter {
         const height = img.bitmap.height;
 
         const normalizer = new Normalizer('Center', 0, width, 0, height, {
-            x: 1 / config.density,
-            y: 1 / config.density
+            x: 1 / gcodeConfig.density,
+            y: 1 / gcodeConfig.density
         });
 
         let progress = 0;
@@ -178,7 +178,7 @@ class LaserToolPathGenerator extends EventEmitter {
         content.push(`G0 F${jogSpeed}`);
         content.push(`G1 F${workSpeed}`);
 
-        if (!config.direction || config.direction === 'Horizontal') {
+        if (!gcodeConfig.direction || gcodeConfig.direction === 'Horizontal') {
             const direction = {
                 x: 1,
                 y: 0
@@ -210,7 +210,7 @@ class LaserToolPathGenerator extends EventEmitter {
                     this.emit('progress', progress);
                 }
             }
-        } else if (config.direction === 'Vertical') {
+        } else if (gcodeConfig.direction === 'Vertical') {
             const direction = {
                 x: 0,
                 y: 1
@@ -242,7 +242,7 @@ class LaserToolPathGenerator extends EventEmitter {
                     this.emit('progress', progress);
                 }
             }
-        } else if (config.direction === 'Diagonal') {
+        } else if (gcodeConfig.direction === 'Diagonal') {
             const direction = {
                 x: 1,
                 y: -1
@@ -279,7 +279,7 @@ class LaserToolPathGenerator extends EventEmitter {
                     this.emit('progress', progress);
                 }
             }
-        } else if (config.direction === 'Diagonal2') {
+        } else if (gcodeConfig.direction === 'Diagonal2') {
             const direction = {
                 x: 1,
                 y: 1
@@ -323,8 +323,8 @@ class LaserToolPathGenerator extends EventEmitter {
     }
 
     async generateGcodeDxf(modelInfo, modelPath) {
-        const { transformation, config, gcodeConfigPlaceholder, gcodeConfig } = modelInfo;
-        const { fillEnabled, fillDensity, optimizePath } = config;
+        const { transformation, gcodeConfigPlaceholder, gcodeConfig } = modelInfo;
+        const { fillEnabled, fillDensity, optimizePath } = gcodeConfig;
         const { fixedPowerEnabled, fixedPower } = gcodeConfig;
         const { workSpeed, jogSpeed } = gcodeConfigPlaceholder;
         const originWidth = modelInfo.sourceWidth;
@@ -425,8 +425,8 @@ class LaserToolPathGenerator extends EventEmitter {
     }
 
     async generateGcodeVector(modelInfo, modelPath) {
-        const { transformation, config, gcodeConfigPlaceholder, gcodeConfig } = modelInfo;
-        const { fillEnabled, fillDensity, optimizePath } = config;
+        const { transformation, gcodeConfigPlaceholder, gcodeConfig } = modelInfo;
+        const { fillEnabled, fillDensity, optimizePath } = gcodeConfig;
         const { fixedPowerEnabled, fixedPower } = gcodeConfig;
         const { workSpeed, jogSpeed } = gcodeConfigPlaceholder;
         const originWidth = modelInfo.sourceWidth;
diff --git a/src/server/lib/image-process.js b/src/server/lib/image-process.js
index ab1a3541e3..a8d3343327 100644
--- a/src/server/lib/image-process.js
+++ b/src/server/lib/image-process.js
@@ -61,11 +61,12 @@ const algorithms = {
     ]
 };
 
-async function processGreyscale(modelInfo) {
+async function processLaserGreyscale(modelInfo) {
     const { uploadName } = modelInfo;
     const { width, height, rotationZ, flip } = modelInfo.transformation;
 
-    const { invertGreyscale, contrast, brightness, whiteClip, algorithm, density } = modelInfo.config;
+    const { invert, contrast, brightness, whiteClip, algorithm } = modelInfo.config;
+    const { density = 4 } = modelInfo.gcodeConfig || {};
 
     const outputFilename = pathWithRandomSuffix(uploadName);
 
@@ -89,16 +90,16 @@ async function processGreyscale(modelInfo) {
         .quality(100)
         .contrast((contrast - 50.0) / 50)
         .greyscale()
+        .flip(!!(Math.floor(flip / 2)), !!(flip % 2))
         .resize(width * density, height * density)
         .rotate(-rotationZ * 180 / Math.PI)
-        .flip((flip & 2) > 0, (flip & 1) > 0)
         .scan(0, 0, img.bitmap.width, img.bitmap.height, (x, y, idx) => {
             const data = img.bitmap.data;
 
             if (data[idx + 3] === 0) {
                 data[idx] = 255;
             } else {
-                if (invertGreyscale) {
+                if (invert) {
                     data[idx] = 255 - data[idx];
                     if (data[idx] < 255 - whiteClip) {
                         data[idx] = 0;
@@ -146,12 +147,43 @@ async function processGreyscale(modelInfo) {
     });
 }
 
+async function processCNCGreyscale(modelInfo) {
+    const { uploadName } = modelInfo;
+    const { width, height, rotationZ, flip } = modelInfo.transformation;
+
+    const { invert } = modelInfo.config;
+    const { density = 4 } = modelInfo.gcodeConfig || {};
+
+    const outputFilename = pathWithRandomSuffix(uploadName);
+
+    const img = await Jimp.read(`${DataStorage.tmpDir}/${uploadName}`);
+    if (invert) {
+        img.invert();
+    }
+
+    img
+        .greyscale()
+        .flip(!!(Math.floor(flip / 2)), !!(flip % 2))
+        .resize(width * density, height * density)
+        .rotate(-rotationZ * 180 / Math.PI)
+        .background(0xffffffff);
+
+    return new Promise(resolve => {
+        img.write(`${DataStorage.tmpDir}/${outputFilename}`, () => {
+            resolve({
+                filename: outputFilename
+            });
+        });
+    });
+}
+
 function processBW(modelInfo) {
     const { uploadName } = modelInfo;
     // rotation: degree and counter-clockwise
     const { width, height, rotationZ, flip } = modelInfo.transformation;
 
-    const { invertGreyscale, bwThreshold, density } = modelInfo.config;
+    const { invert, bwThreshold } = modelInfo.config;
+    const { density = 4 } = modelInfo.gcodeConfig || {};
 
     const outputFilename = pathWithRandomSuffix(uploadName);
     return Jimp
@@ -170,7 +202,7 @@ function processBW(modelInfo) {
                         }
                     } else {
                         const value = img.bitmap.data[idx];
-                        if (invertGreyscale) {
+                        if (invert) {
                             if (value <= bwThreshold) {
                                 for (let k = 0; k < 3; ++k) {
                                     img.bitmap.data[idx + k] = 255;
@@ -203,22 +235,26 @@ function processBW(modelInfo) {
 }
 
 function processVector(modelInfo) {
-    // options: { filename, vectorThreshold, isInvert, turdSize }
-    const { vectorThreshold, isInvert, turdSize } = modelInfo.config;
+    // options: { filename, vectorThreshold, invert, turdSize }
+    const { vectorThreshold, invert, turdSize } = modelInfo.config;
     const options = {
         uploadName: modelInfo.uploadName,
         vectorThreshold: vectorThreshold,
-        isInvert: isInvert,
+        invert: invert,
         turdSize: turdSize
     };
     return convertRasterToSvg(options);
 }
 
 function process(modelInfo) {
-    const { sourceType, mode } = modelInfo;
+    const { headType, sourceType, mode } = modelInfo;
     if (sourceType === 'raster') {
         if (mode === 'greyscale') {
-            return processGreyscale(modelInfo);
+            if (headType === 'laser') {
+                return processLaserGreyscale(modelInfo);
+            } else {
+                return processCNCGreyscale(modelInfo);
+            }
         } else if (mode === 'bw') {
             return processBW(modelInfo);
         } else if (mode === 'vector') {
diff --git a/src/server/lib/svg-convert.js b/src/server/lib/svg-convert.js
index 7da5962ca0..63a2476f72 100644
--- a/src/server/lib/svg-convert.js
+++ b/src/server/lib/svg-convert.js
@@ -21,14 +21,14 @@ const TEMPLATE = `<?xml version="1.0" encoding="utf-8"?>
 
 
 const convertRasterToSvg = (options) => {
-    const { uploadName, vectorThreshold, isInvert, turdSize } = options;
+    const { uploadName, vectorThreshold, invert, turdSize } = options;
     const outputFilename = pathWithRandomSuffix(`${uploadName}.svg`);
     const modelPath = `${DataStorage.tmpDir}/${uploadName}`;
     const params = {
         threshold: vectorThreshold,
         color: 'black',
         background: 'transparent',
-        blackOnWhite: !isInvert,
+        blackOnWhite: !invert,
         turdSize: turdSize
     };
 
diff --git a/src/server/services/api/api-image.js b/src/server/services/api/api-image.js
index 0a0401ec1a..484770bb91 100644
--- a/src/server/services/api/api-image.js
+++ b/src/server/services/api/api-image.js
@@ -138,17 +138,7 @@ export const laserCaseImage = (req, res) => {
 export const process = (req, res) => {
     const options = req.body;
 
-    let imageOptions;
-    if (options.image) {
-        imageOptions = {
-            ...options,
-            image: `${DataStorage.tmpDir}/${path.parse(options.image).base}`
-        };
-    } else {
-        imageOptions = options;
-    }
-
-    imageProcess(imageOptions)
+    imageProcess(options)
         .then((result) => {
             res.send(result);
         })
diff --git a/src/server/services/api/api-svg.js b/src/server/services/api/api-svg.js
index e32f44533e..7e6106bd49 100644
--- a/src/server/services/api/api-svg.js
+++ b/src/server/services/api/api-svg.js
@@ -1,7 +1,7 @@
 import { convertRasterToSvg as convertRaster, convertTextToSvg as convertText } from '../../lib/svg-convert';
 
 export const convertRasterToSvg = async (req, res) => {
-    // options: { filename, vectorThreshold, isInvert, turdSize }
+    // options: { filename, vectorThreshold, invert, turdSize }
     const options = req.body;
     const result = await convertRaster(options);
     res.send(result);
diff --git a/src/server/services/api/api-tool-path.js b/src/server/services/api/api-tool-path.js
index 91bb0f30d3..65952c3aa7 100644
--- a/src/server/services/api/api-tool-path.js
+++ b/src/server/services/api/api-tool-path.js
@@ -15,13 +15,13 @@ export const generate = async (req, res) => {
     const modelInfo = req.body;
     const suffix = '.json';
     // const { type, mode, source } = modelInfo;
-    const { headerType, sourceType, uploadName, mode } = modelInfo;
+    const { headType, sourceType, uploadName, mode } = modelInfo;
 
     const outputFilename = pathWithRandomSuffix(`${uploadName}.${suffix}`);
     const outputFilePath = `${DataStorage.tmpDir}/${outputFilename}`;
 
     let modelPath = null;
-    if (headerType === 'laser') {
+    if (headType === 'laser') {
         // no need to process model
         if ((sourceType === 'svg' && mode === 'vector')
             || (sourceType === 'text' && mode === 'vector')) {
@@ -50,7 +50,7 @@ export const generate = async (req, res) => {
                 msg: 'Internal server error'
             });
         }
-    } else if (headerType === 'cnc') {
+    } else if (headType === 'cnc') {
         const inputFilePath = `${DataStorage.tmpDir}/${uploadName}`;
         if (sourceType === 'svg' && mode === 'vector') {
             const svgParser = new SVGParser();
@@ -78,7 +78,7 @@ export const generate = async (req, res) => {
         }
     } else {
         res.status(ERR_INTERNAL_SERVER_ERROR).send({
-            msg: `Unsupported type: ${headerType}`
+            msg: `Unsupported type: ${headType}`
         });
     }
 };
diff --git a/src/server/services/task-manager/generateGcode.js b/src/server/services/task-manager/generateGcode.js
index 83b60a3599..dc01bc4740 100644
--- a/src/server/services/task-manager/generateGcode.js
+++ b/src/server/services/task-manager/generateGcode.js
@@ -48,12 +48,12 @@ export const generateGcode = (modelInfos, onProgress) => {
         return Promise.reject(new Error('modelInfo is empty.'));
     }
 
-    const { headerType } = modelInfos[0];
-    if (!_.includes(['laser', 'cnc'], headerType)) {
-        return Promise.reject(new Error(`Unsupported type: ${headerType}`));
+    const { headType } = modelInfos[0];
+    if (!_.includes(['laser', 'cnc'], headType)) {
+        return Promise.reject(new Error(`Unsupported type: ${headType}`));
     }
 
-    const suffix = headerType === 'laser' ? '.nc' : '.cnc';
+    const suffix = headType === 'laser' ? '.nc' : '.cnc';
 
     let fileTotalLines = 0;
     let estimatedTime = 0;
@@ -69,20 +69,20 @@ export const generateGcode = (modelInfos, onProgress) => {
 
     for (let i = 0; i < modelInfos.length; i++) {
         const modelInfo = modelInfos[i];
-        const { toolPathFilename, gcodeConfig, config, mode } = modelInfo;
+        const { toolPathFilename, gcodeConfig, mode } = modelInfo;
         const toolPathFilePath = `${DataStorage.tmpDir}/${toolPathFilename}`;
         const data = fs.readFileSync(toolPathFilePath, 'utf8');
         const toolPathObj = JSON.parse(data);
 
         const gcodeGenerator = new GcodeGenerator();
         let gcodeLines;
-        if (headerType === 'laser') {
+        if (headType === 'laser') {
             gcodeLines = gcodeGenerator.parseAsLaser(toolPathObj, gcodeConfig);
         } else {
             gcodeLines = gcodeGenerator.parseAsCNC(toolPathObj, gcodeConfig);
         }
 
-        const renderMethod = mode === 'greyscale' && config.movementMode === 'greyscale-dot' ? 'point' : 'line';
+        const renderMethod = mode === 'greyscale' && gcodeConfig.movementMode === 'greyscale-dot' ? 'point' : 'line';
 
         if (i > 0) {
             const header = '\n'
@@ -114,13 +114,13 @@ export const generateGcode = (modelInfos, onProgress) => {
         onProgress((i + 1) / modelInfos.length);
     }
 
-    const { gcodeConfig, thumbnail, config, mode } = modelInfos[0];
-    const renderMethod = mode === 'greyscale' && config.movementMode === 'greyscale-dot' ? 'point' : 'line';
+    const { gcodeConfig, thumbnail, mode } = modelInfos[0];
+    const renderMethod = mode === 'greyscale' && gcodeConfig.movementMode === 'greyscale-dot' ? 'point' : 'line';
 
     const power = gcodeConfig.fixedPowerEnabled ? gcodeConfig.fixedPower : 0;
 
     let headerStart = ';Header Start\n'
-        + `;header_type: ${headerType}\n`
+        + `;header_type: ${headType}\n`
         + `;thumbnail: ${thumbnail}\n`
         + `;renderMethod: ${renderMethod}\n`
         + ';file_total_lines: fileTotalLines\n'
diff --git a/src/server/services/task-manager/generateToolPath.js b/src/server/services/task-manager/generateToolPath.js
index 67d9fa6d01..d42447d4fe 100644
--- a/src/server/services/task-manager/generateToolPath.js
+++ b/src/server/services/task-manager/generateToolPath.js
@@ -121,12 +121,12 @@ export const generateToolPath = (modelInfo, onProgress) => {
         return Promise.reject(new Error('modelInfo is empty.'));
     }
 
-    const { headerType } = modelInfo;
-    if (headerType === 'laser') {
+    const { headType } = modelInfo;
+    if (headType === 'laser') {
         return generateLaserToolPath(modelInfo, onProgress);
-    } else if (headerType === 'cnc') {
+    } else if (headType === 'cnc') {
         return generateCncToolPath(modelInfo, onProgress);
     } else {
-        return Promise.reject(new Error(`Unsupported type: ${headerType}`));
+        return Promise.reject(new Error(`Unsupported type: ${headType}`));
     }
 };