diff --git a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js
deleted file mode 100644
index e656733a..00000000
--- a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { PropTypes } from 'react'
-import CodeMirror from 'codemirror'
-import _ from 'lodash'
-const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-
-export default class CheckHighlightEditor extends React.Component {
-    constructor (props) {
-        super(props)
-    }
-
-    componentDidMount () {
-        this.value = this.props.value
-        this.editor = CodeMirror(this.refs.root, {
-            value: this.props.value,
-            lineNumbers: true,
-            lineWrapping: true,
-            theme: this.props.theme,
-            indentUnit: 4,
-            tabSize: 4,
-            inputStyle: 'textarea'
-        })
-
-        this.setMode(this.props.mode)
-
-        let editorTheme = document.getElementById('editorTheme')
-    }
-
-    setMode(mode) {
-        let syntax = CodeMirror.findModeByName('ejs')
-    }
-
-    render() {
-        let { className, fontFamily } = this.props
-        fontFamily = _.isString(fontFamily) && fontFamily.length > 0
-            ? [fontFamily].concat(defaultEditorFontFamily)
-            : defaultEditorFontFamily
-        return (
-            <div className="CheckHilghtEditor"
-                ref = 'root'
-            />
-        )
-    }
-}
-
-CheckHighlightEditor.propTypes = {
-    value: PropTypes.string.isRequired,
-    mode: PropTypes.string,
-    theme: PropTypes.string.isRequired,
-    className: PropTypes.string,
-}
-
-CheckHighlightEditor.defaultProps = {
-    readOnly: true,
-    theme: 'base16-dark',
-    fontSize: 14,
-    fontFamily: 'Monaco, Consolas',
-    indentSize: 4,
-    indentType: 'space'
-}
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 896b06ed..6bb12f86 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -98,10 +98,17 @@
   margin-left: 10px
   font-size: 12px
 
+.code-mirror
+  width 400px
+  height 140px
+  margin-top 10px
+  margin-bottom 10px
+
 colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index c06858f3..9b3a0b3e 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -4,7 +4,7 @@ import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
-import CheckHighlghtEditor from '../PreferencesModal/CheckHighlightEditor'
+import CodeMirror from 'react-codemirror'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -13,12 +13,28 @@ class UiTab extends React.Component {
     super(props)
 
     this.state = {
-      config: props.config
+      config: props.config,
+      options: {
+        lineNumbers: true,
+        theme: props.config.editor.theme,
+        readOnly: true,
+        mode: 'javascript'
+      },
+        code: ' function iamHappy(happy) {\n\tif(happy){\n\t  console.log("I am Happy!")\n\t}else{\n\t  console.log("I am not Happy!")\n\t}\n};'
     }
   }
 
   handleUIChange (e) {
-    let { config } = this.state
+    let { config, options } = this.state
+    let checkHighLight = document.getElementById('checkHighLight')
+
+    if (checkHighLight == null) {
+      checkHighLight = document.createElement('link')
+      checkHighLight.setAttribute('id', 'checkHighLight')
+      checkHighLight.setAttribute('rel', 'stylesheet')
+      document.head.appendChild(checkHighLight)
+    }
+
     config.ui = {
       theme: this.refs.uiTheme.value,
       disableDirectWrite: this.refs.uiD2w != null
@@ -41,7 +57,23 @@ class UiTab extends React.Component {
       lineNumber: this.refs.previewLineNumber.checked
     }
 
+
+
+    let newOptions = {
+      lineNumbers: true,
+      theme: config.editor.theme,
+      readOnly: true,
+      mode: 'javascript'
+    }
+
+    if (newOptions.theme !== options.theme) {
+      checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newOptions.theme + '.css')
+    }
+
+    this.setState({options: newOptions})
+
     this.setState({ config })
+
   }
 
   handleSaveUIClick (e) {
@@ -61,7 +93,7 @@ class UiTab extends React.Component {
 
   render () {
     const themes = consts.THEMES
-    const { config } = this.state
+    const { config, options } = this.state
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -112,11 +144,9 @@ class UiTab extends React.Component {
                   })
                 }
               </select>
-              <CheckHighlghtEditor
-                  value="var a = 3"
-                  ref='code'
-                  theme={this.state.config.editor.theme}
-              />
+              <div styleName='code-mirror'>
+                <CodeMirror value={this.state.code} options={options}/>
+              </div>
             </div>
           </div>
           <div styleName='group-section'>
diff --git a/package.json b/package.json
index 7a0df7c8..9cf16f8f 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "node-ipc": "^8.1.0",
     "raphael": "^2.2.7",
     "react": "^15.0.2",
+    "react-codemirror": "^0.3.0",
     "react-dom": "^15.0.2",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",