diff --git a/.eslintrc b/.eslintrc
index 9177344c..a1646659 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,5 +12,10 @@
     "react/no-find-dom-node": "warn",
     "react/no-render-return-value": "warn",
     "react/no-deprecated": "warn"
+  },
+  "globals": {
+    "FileReader": true,
+    "localStorage": true,
+    "fetch": true
   }
 }
diff --git a/Backers.md b/Backers.md
index 582f06c2..18d221bf 100644
--- a/Backers.md
+++ b/Backers.md
@@ -1,43 +1,72 @@
-Dear all,
+<h1 align="center">Sponsors &amp; Backers</h1>
 
-Thanks for your using!
-Boostnote is used in about 200 countries and regions, it is a awesome developer community.
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome backers. If you'd like to join them, please consider:
 
-To continue supporting this growth, and to satisfy community expectations,
-we would like to invest more time in this project.
-
-If you like this project and see its potential, you can help!
-
-Thanks,
-Boostnote maintainers.
-
-### >> [Support via OpenCollective](https://opencollective.com/boostnoteio)
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
 
 ---
 
-## Backers
-[Kazz](https://twitter.com/kazup_bot) - $65
+## Backers via OpenCollective
 
-Intense Raiden - $45
+### [Gold Sponsors / $1,000 per month](https://opencollective.com/boostnoteio/order/2259)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
 
-ravy22 - $25
+### [Silver Sponsors / $250 per month](https://opencollective.com/boostnoteio/order/2257)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
 
-trentpolack	- $20
+### [Bronze Sponsors / $50 per month](https://opencollective.com/boostnoteio/order/2258)
+- Get your name and Url (or E-mail) on Readme.md on GitHub.
 
-hikariru - $10
+### [Backers3 / $10 per month](https://opencollective.com/boostnoteio/order/2176)
+- [Ralph03](https://opencollective.com/ralph03)
 
-kolchan11 - $10
+- [Nikolas Dan](https://opencollective.com/nikolas-dan)
 
-RonWalker22 - $10
+### [Backers2 / $5 per month](https://opencollective.com/boostnoteio/order/2175)
+- [Yeojong Kim](https://twitter.com/yeojoy)
 
-hocchuc	- $5
+- [Scotia Draven](https://opencollective.com/scotia-draven)
 
-Adam - $5
+- [A. J. Vargas](https://opencollective.com/aj-vargas)
 
-Steve	- $5
+### [Backers1](https://opencollective.com/boostnoteio/order/2563) and One-time sponsors
+- Ryosuke Tamura - $30
 
-evmin	- $5
+- tatoosh11 - $10
 
-[@yeojoy](https://twitter.com/yeojoy) - $5
+- Alexander Borovkov - $10
 
-Scotia Draven - $5
+- spoonhoop - $5
+
+- Drew Williams - $2
+
+- Andy Shaw - $2
+
+- mysafesky -$2
+
+---
+
+## Backers via Bountysource
+https://salt.bountysource.com/teams/boostnote
+
+- Kuzz - $65
+
+- Intense Raiden - $45
+
+- ravy22 - $25
+
+- trentpolack	- $20
+
+- hikariru - $10
+
+- kolchan11 - $10
+
+- RonWalker22 - $10
+
+- hocchuc	- $5
+
+- Adam - $5
+
+- Steve	- $5
+
+- evmin	- $5
diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 77aff3da..1323c514 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
@@ -67,7 +68,7 @@ export default class CodeEditor extends React.Component {
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
             const tabs = cm.getOption('indentWithTabs')
-            if (line.trimLeft() === '- ' || line.trimLeft() === '* ' || line.trimLeft() === '+ ') {
+            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)\] )?$/)) {
               cm.execCommand('goLineStart')
               if (tabs) {
                 cm.execCommand('insertTab')
@@ -103,13 +104,14 @@ export default class CodeEditor extends React.Component {
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
 
-    let editorTheme = document.getElementById('editorTheme')
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.addEventListener('load', this.loadStyleHandler)
 
     CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)
     CodeMirror.Vim.defineEx('q!', 'q!', this.quitEditor)
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
+    CodeMirror.Vim.map('ZZ', ':q', 'normal')
   }
 
   quitEditor () {
@@ -120,7 +122,7 @@ export default class CodeEditor extends React.Component {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
     this.editor.off('paste', this.pasteHandler)
-    let editorTheme = document.getElementById('editorTheme')
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
 
@@ -196,7 +198,7 @@ export default class CodeEditor extends React.Component {
   }
 
   setValue (value) {
-    let cursor = this.editor.getCursor()
+    const cursor = this.editor.getCursor()
     this.editor.setValue(value)
     this.editor.setCursor(cursor)
   }
@@ -213,9 +215,7 @@ export default class CodeEditor extends React.Component {
   }
 
   insertImageMd (imageMd) {
-    const textarea = this.editor.getInputField()
-    const cm = this.editor
-    cm.replaceSelection(`${textarea.value.substr(0, textarea.selectionStart)}${imageMd}${textarea.value.substr(textarea.selectionEnd)}`)
+    this.editor.replaceSelection(imageMd)
   }
 
   handlePaste (editor, e) {
@@ -223,7 +223,7 @@ export default class CodeEditor extends React.Component {
     if (!dataTransferItem.type.match('image')) return
 
     const blob = dataTransferItem.getAsFile()
-    let reader = new FileReader()
+    const reader = new FileReader()
     let base64data
 
     reader.readAsDataURL(blob)
@@ -243,7 +243,8 @@ export default class CodeEditor extends React.Component {
   }
 
   render () {
-    let { className, fontFamily, fontSize } = this.props
+    const { className, fontSize } = this.props
+    let fontFamily = this.props.className
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 65b52f86..d4fa6e89 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { findStorage } from 'browser/lib/findStorage'
-const _ = require('lodash')
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -70,9 +70,9 @@ class MarkdownEditor extends React.Component {
   }
 
   handleContextMenu (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      let newStatus = this.state.status === 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW'
         ? 'CODE'
         : 'PREVIEW'
       this.setState({
@@ -91,9 +91,9 @@ class MarkdownEditor extends React.Component {
   handleBlur (e) {
     if (this.state.isLocked) return
     this.setState({ keyPressed: new Set() })
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
-      let cursorPosition = this.refs.code.editor.getCursor()
+      const cursorPosition = this.refs.code.editor.getCursor()
       this.setState({
         status: 'PREVIEW'
       }, () => {
@@ -109,7 +109,7 @@ class MarkdownEditor extends React.Component {
   }
 
   handlePreviewMouseUp (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
       this.setState({
         status: 'CODE'
@@ -123,15 +123,15 @@ class MarkdownEditor extends React.Component {
   handleCheckboxClick (e) {
     e.preventDefault()
     e.stopPropagation()
-    let idMatch = /checkbox-([0-9]+)/
-    let checkedMatch = /\[x\]/i
-    let uncheckedMatch = /\[ \]/
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /\[x\]/i
+    const uncheckedMatch = /\[ \]/
     if (idMatch.test(e.target.getAttribute('id'))) {
-      let lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
-      let lines = this.refs.code.value
+      const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value
         .split('\n')
 
-      let targetLine = lines[lineIndex]
+      const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
         lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
@@ -163,12 +163,12 @@ class MarkdownEditor extends React.Component {
   }
 
   handleKeyDown (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (this.state.status !== 'CODE') return false
     const keyPressed = this.state.keyPressed
     keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    const isNoteHandlerKey = (el) => { return keyPressed.has(el) }
     // These conditions are for ctrl-e and ctrl-w
     if (keyPressed.size === this.escapeFromEditor.length &&
         !this.state.isLocked && this.state.status === 'CODE' &&
@@ -207,14 +207,14 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { className, value, config, storageKey } = this.props
+    const { className, value, config, storageKey } = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
-    let previewStyle = {}
+    const previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
     const storage = findStorage(storageKey)
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 6f0846a6..95839ad6 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
@@ -33,6 +34,15 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
   font-weight: normal;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
 ${markdownStyle}
 body {
   font-family: '${fontFamily.join("','")}';
@@ -117,10 +127,10 @@ export default class MarkdownPreview extends React.Component {
     e.preventDefault()
     e.stopPropagation()
 
-    let anchor = e.target.closest('a')
-    let href = anchor.getAttribute('href')
+    const anchor = e.target.closest('a')
+    const href = anchor.getAttribute('href')
     if (_.isString(href) && href.match(/^#/)) {
-      let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
+      const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
       if (targetElement != null) {
         this.getWindow().scrollTo(0, targetElement.offsetTop)
       }
@@ -242,7 +252,8 @@ export default class MarkdownPreview extends React.Component {
   }
 
   applyStyle () {
-    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+    const { fontSize, lineNumber, codeBlockTheme } = this.props
+    let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
       : defaultFontFamily
@@ -258,7 +269,9 @@ export default class MarkdownPreview extends React.Component {
     theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
       : 'elegant'
-    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme.split(' ')[0]}.css`
+    this.getWindow().document.getElementById('codeTheme').href = theme.startsWith('solarized')
+      ? `${appPath}/node_modules/codemirror/theme/solarized.css`
+      : `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
   rewriteIframe () {
@@ -273,7 +286,8 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.linkClickHandler)
     })
 
-    let { value, theme, indentSize, codeBlockTheme, showCopyNotification, storagePath } = this.props
+    const { theme, indentSize, showCopyNotification, storagePath } = this.props
+    let { value, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
 
@@ -316,7 +330,7 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const content = htmlTextHelper.decodeEntities(el.innerHTML)
         const copyIcon = document.createElement('i')
         copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
         copyIcon.onclick = (e) => {
@@ -341,7 +355,7 @@ export default class MarkdownPreview extends React.Component {
         })
       })
     })
-    let opts = {}
+    const opts = {}
     // if (this.props.theme === 'dark') {
     //   opts['font-color'] = '#DDD'
     //   opts['line-color'] = '#DDD'
@@ -351,7 +365,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        const diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -367,7 +381,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        const diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -390,11 +404,11 @@ export default class MarkdownPreview extends React.Component {
   }
 
   scrollTo (targetRow) {
-    let blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
+    const blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
 
     for (let index = 0; index < blocks.length; index++) {
       let block = blocks[index]
-      let row = parseInt(block.getAttribute('data-line'))
+      const row = parseInt(block.getAttribute('data-line'))
       if (row > targetRow || index === blocks.length - 1) {
         block = blocks[index - 1]
         block != null && this.getWindow().scrollTo(0, block.offsetTop)
@@ -424,7 +438,7 @@ export default class MarkdownPreview extends React.Component {
   }
 
   render () {
-    let { className, style, tabIndex } = this.props
+    const { className, style, tabIndex } = this.props
     return (
       <iframe className={className != null
           ? 'MarkdownPreview ' + className
diff --git a/browser/components/ModalEscButton.js b/browser/components/ModalEscButton.js
index 42fe9100..836c0052 100644
--- a/browser/components/ModalEscButton.js
+++ b/browser/components/ModalEscButton.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ModalEscButton.styl'
 
diff --git a/browser/components/NavToggleButton.js b/browser/components/NavToggleButton.js
index bf50fe90..ad0ff54c 100644
--- a/browser/components/NavToggleButton.js
+++ b/browser/components/NavToggleButton.js
@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for toggle SideNav
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './NavToggleButton.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl
index dba4f66f..83a9853d 100644
--- a/browser/components/NavToggleButton.styl
+++ b/browser/components/NavToggleButton.styl
@@ -10,6 +10,9 @@
   line-height 32px
   padding 0
 
+body[data-theme="white"]
+  navWhiteButtonColor()
+
 body[data-theme="dark"]
   .navToggle
     &:hover
diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index e85df791..3e703f18 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -1,7 +1,8 @@
 /**
  * @fileoverview Note item component.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { isArray } from 'lodash'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
@@ -70,7 +71,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
 
       <div styleName='item-bottom-time'>{dateDisplay}</div>
       {note.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
+        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
       }
       {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
         ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 542eb6e1..02c8b65c 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -11,9 +11,9 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.2s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-title
     .item-title-icon
     .item-bottom-time
@@ -25,7 +25,7 @@ $control-height = 30px
     .item-star
       color $ui-favorite-star-button-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-title
     .item-title-icon
@@ -43,7 +43,7 @@ $control-height = 30px
 
 .item--active
   @extend .item
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-title
   .item-title-empty
@@ -59,12 +59,12 @@ $control-height = 30px
   .item-star
     color $ui-favorite-star-button-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
@@ -73,14 +73,16 @@ $control-height = 30px
   position relative
   font-size 12px
   color $ui-inactive-text-color
+  top 2px
 
 .item-title
-  font-size 14px
+  font-size 15px
+  font-weight 700
   position relative
   top -12px
   left 20px
-  padding-right 15px
-  padding-bottom 4px
+  padding 0px 15px 0px 0px
+  margin-bottom 4px
   overflow ellipsis
   color $ui-inactive-text-color
 
@@ -91,7 +93,7 @@ $control-height = 30px
 .item-bottom
   position relative
   bottom 0px
-  margin-top 2px
+  margin-top 10px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -100,19 +102,17 @@ $control-height = 30px
 .item-bottom-tagList
   flex 1
   overflow ellipsis
-  line-height 20px
-  padding-top 7px
+  line-height 25px
   padding-left 2px
-  margin-right 27px
+  margin-right 40px
 
 .item-bottom-tagList-item
   font-size 11px
   margin-right 8px
   padding 0
-  height 20px
   box-sizing border-box
   border-radius 2px
-  padding 1px 2px
+  padding 4px
   vertical-align middle
   background-color white
   color $ui-inactive-text-color
@@ -125,10 +125,10 @@ $control-height = 30px
 
 .item-star
   position absolute
-  right -20px
-  bottom 2px
-  width 34px
-  height 34px
+  right -6px
+  bottom 23px
+  width 16px
+  height 16px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
@@ -136,8 +136,8 @@ $control-height = 30px
 
 .item-pin
   position absolute
-  right -21px
-  bottom 28px
+  right 0px
+  bottom 2px
   width 34px
   height 34px
   color #E54D42
@@ -145,6 +145,20 @@ $control-height = 30px
   padding 0
   border-radius 17px
 
+body[data-theme="white"]
+  .item
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item--active
+    @extend .item
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -196,7 +210,7 @@ body[data-theme="dark"]
       background-color alpha(white, 10%)
       color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color #c0392b
       .item-bottom-tagList-item
         background-color alpha(#fff, 20%)
diff --git a/browser/components/NoteItemSimple.js b/browser/components/NoteItemSimple.js
index bbd21919..04c6690e 100644
--- a/browser/components/NoteItemSimple.js
+++ b/browser/components/NoteItemSimple.js
@@ -1,7 +1,8 @@
 /**
  * @fileoverview Note item component with simple display mode.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteItemSimple.styl'
 
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index aa01d4ab..fdfed1ab 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -11,15 +11,15 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
       color $ui-text-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-simple-title
     .item-simple-title-empty
@@ -28,7 +28,7 @@ $control-height = 30px
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
@@ -37,12 +37,12 @@ $control-height = 30px
   .item-simple-title-icon
     color $ui-text-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
@@ -67,6 +67,20 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+body[data-theme="white"]
+  .item-simple
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item-simple--active
+    @extend .item-simple
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -115,7 +129,7 @@ body[data-theme="dark"]
       background-color alpha(white, 10%)
       color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color #c0392b
       .item-simple-bottom-tagList-item
         background-color alpha(#fff, 20%)
diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js
index 6904b362..39e134b4 100644
--- a/browser/components/RealtimeNotification.js
+++ b/browser/components/RealtimeNotification.js
@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RealtimeNotification.styl'
 
diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index d6bc7642..a3fc1ff9 100644
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -1,7 +1,8 @@
 /**
  * @fileoverview Filter for all notes.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNavFilter.styl'
 
@@ -15,27 +16,53 @@ import styles from './SideNavFilter.styl'
  */
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick
+  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
+  counterTotalNote, counterStarredNote
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-archive fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isHomeActive
+            ? '../resources/icon/icon-all-active.svg'
+            : '../resources/icon/icon-all.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='counters'>{counterTotalNote}</span>
     </button>
+
     <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
-      <i className='fa fa-star fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isStarredActive
+            ? '../resources/icon/icon-star-active.svg'
+            : '../resources/icon/icon-star.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>Starred</span>
+      <span styleName='counters'>{counterStarredNote}</span>
     </button>
-    <button styleName={isTrashedActive ? 'menu-button--active' : 'menu-button'}
+
+    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
       onClick={handleTrashedButtonClick}
     >
-      <i className='fa fa-trash fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isTrashedActive
+            ? '../resources/icon/icon-trash-active.svg'
+            : '../resources/icon/icon-trash.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>Trash</span>
+      <span styleName='counters'>{counterDelNote}</span>
     </button>
+
   </div>
 )
 
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 3c1e2185..6e70a154 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -3,49 +3,55 @@
 
 .menu-button
   navButtonColor()
-  height 32px
-  padding 0 15px
-  font-size 13px
+  height 36px
+  padding 0 15px 0 20px
+  font-size 14px
   width 100%
   text-align left
   overflow ellipsis
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+
+.iconWrap
+  width 20px
+  text-align center
+  
+.counters
+  float right
+  color $ui-inactive-text-color
 
 .menu-button--active
   @extend .menu-button
-  color #e74c3c
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
+    color #1EC38B
 
 .menu-button-star--active
   @extend .menu-button
-  color #F9BF3B
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-trash--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
 
 .menu-button-label
-  margin-left 5px
+  margin-left 10px
+  flex 1
 
 .menu--folded
   @extend .menu
@@ -54,6 +60,10 @@
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
+      color $ui-tooltip-text-color
+      background-color $ui-tooltip-backgroundColor
+
+
   .menu-button-label
     position fixed
     display inline-block
@@ -63,15 +73,73 @@
     margin-top -8px
     margin-left 0
     overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
     z-index 10
-    color white
     line-height 32px
     border-top-right-radius 2px
     border-bottom-right-radius 2px
     pointer-events none
     opacity 0
     font-size 13px
+  .counters
+    display none
+
+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
+
+  .menu-button--active
+    @extend .menu-button
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-star--active
+    @extend .menu-button
+    color #F9BF3B
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
 
 body[data-theme="dark"]
   .menu-button
@@ -103,3 +171,14 @@ body[data-theme="dark"]
       color $ui-favorite-star-button-color
       .menu-button-label
         color $ui-dark-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/components/SnippetTab.js b/browser/components/SnippetTab.js
index 5c0377bd..5423f3ed 100644
--- a/browser/components/SnippetTab.js
+++ b/browser/components/SnippetTab.js
@@ -86,7 +86,7 @@ class SnippetTab extends React.Component {
   }
 
   render () {
-    let { isActive, snippet, isDeletable } = this.props
+    const { isActive, snippet, isDeletable } = this.props
     return (
       <div styleName={isActive
           ? 'root--active'
diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js
index b01bb920..7e8858e4 100644
--- a/browser/components/StorageItem.js
+++ b/browser/components/StorageItem.js
@@ -1,7 +1,8 @@
 /**
  * @fileoverview Micro component for showing storage.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './StorageItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 import { isNumber } from 'lodash'
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index e5eb1e1f..4a1b2d6f 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -5,32 +5,31 @@
 .folderList-item
   display flex
   width 100%
-  height 26px
+  height 34px
   background-color transparent
   color $ui-inactive-text-color
   padding 0
-  margin-bottom 5px
   text-align left
   border none
   overflow ellipsis
-  font-size 13px
+  font-size 14px
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
-
+    color $$ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    
 .folderList-item--active
   @extend .folderList-item
-  color $ui-text-color
-  background-color $ui-button--active-backgroundColor
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
@@ -69,8 +68,28 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 12px
+  padding-left 17px
+  text
+    display none
 
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
 
 body[data-theme="dark"]
   .folderList-item
diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js
index f3620b49..33557eb3 100644
--- a/browser/components/StorageList.js
+++ b/browser/components/StorageList.js
@@ -1,8 +1,9 @@
 /**
 * @fileoverview Micro component for showing StorageList
 */
-import React, { PropTypes } from 'react'
-import styles from './StorgaeList.styl'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 /**
diff --git a/browser/components/StorgaeList.styl b/browser/components/StorageList.styl
similarity index 96%
rename from browser/components/StorgaeList.styl
rename to browser/components/StorageList.styl
index 622905b1..dfb06b45 100644
--- a/browser/components/StorgaeList.styl
+++ b/browser/components/StorageList.styl
@@ -1,7 +1,7 @@
 .storageList
   absolute left right
   bottom 37px
-  top 160px
+  top 180px
   overflow-y auto
 
 .storageList-empty
diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 206fcf24..2625412a 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for showing TagList.
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './TagListItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 006b879b..cd3a5387 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -13,15 +13,15 @@
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
-  &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .tagList-item-active
-  background-color $ui-button--active-backgroundColor
+  background-color $ui-button-default--active-backgroundColor
   display flex
   width 100%
   height 26px
@@ -31,8 +31,9 @@
   border none
   overflow ellipsis
   font-size 13px
+  color $ui-button-default-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 60%)
+    background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
 .tagList-item-name
@@ -47,6 +48,22 @@
   overflow hidden
   text-overflow ellipsis
 
+body[data-theme="white"]
+  .tagList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .tagList-item
     color $ui-dark-inactive-text-color
diff --git a/browser/components/TodoListPercentage.js b/browser/components/TodoListPercentage.js
index 16de7277..f152130c 100644
--- a/browser/components/TodoListPercentage.js
+++ b/browser/components/TodoListPercentage.js
@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoListPercentage.styl'
 
diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
index 4881fcd1..66fc62ee 100644
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -1,24 +1,25 @@
 .percentageBar
   position absolute
-  top 58px
-  right: 0px
+  top 50px
+  right 0px
   left 0px
   background-color #DADFE1
   width 100%
-  height: 15px
+  height: 17px
   font-size: 12px
   z-index 100
   border-radius 2px
 
 .progressBar
-  background-color: #6C7A89
-  height 15px
+  background-color: #1EC38B
+  height 17px
   border-radius 2px
-  transition 0.3s
+  transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
 .percentageText
   color #f4f4f4
   padding: 2px 43%
+  font-weight 600
 
 body[data-theme="dark"]
   .percentageBar
diff --git a/browser/components/TodoProcess.js b/browser/components/TodoProcess.js
index 64553fb6..251fd5b9 100644
--- a/browser/components/TodoProcess.js
+++ b/browser/components/TodoProcess.js
@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoProcess.styl'
 
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 7522a7b1..ab6c4bc7 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -118,7 +118,7 @@ hr
 h1, h2, h3, h4, h5, h6
   font-weight bold
 h1
-  font-size 2.25em
+  font-size 2.55em
   padding-bottom 0.3em
   line-height 1.2em
   border-bottom solid 1px borderColor
diff --git a/browser/finder/FinderMain.styl b/browser/finder/FinderMain.styl
index 1fa396b9..0cd47dea 100644
--- a/browser/finder/FinderMain.styl
+++ b/browser/finder/FinderMain.styl
@@ -64,7 +64,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 110px + 32px + 10px + 10px
+  top 110px + 32px + 10px + 10px + 20px
   overflow-y auto
 
 .result-list
diff --git a/browser/finder/NoteDetail.js b/browser/finder/NoteDetail.js
index 6fda851e..9d2f8da4 100644
--- a/browser/finder/NoteDetail.js
+++ b/browser/finder/NoteDetail.js
@@ -56,7 +56,7 @@ class NoteDetail extends React.Component {
   }
 
   selectPriorSnippet () {
-    let { note } = this.props
+    const { note } = this.props
     if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
       this.setState({
         snippetIndex: (this.state.snippetIndex + note.snippets.length - 1) % note.snippets.length
@@ -65,7 +65,7 @@ class NoteDetail extends React.Component {
   }
 
   selectNextSnippet () {
-    let { note } = this.props
+    const { note } = this.props
     if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
       this.setState({
         snippetIndex: (this.state.snippetIndex + 1) % note.snippets.length
@@ -74,7 +74,7 @@ class NoteDetail extends React.Component {
   }
 
   saveToClipboard () {
-    let { note } = this.props
+    const { note } = this.props
 
     if (note.type === 'MARKDOWN_NOTE') {
       clipboard.writeText(note.content)
@@ -95,7 +95,7 @@ class NoteDetail extends React.Component {
   }
 
   render () {
-    let { note, config } = this.props
+    const { note, config } = this.props
     if (note == null) {
       return (
         <div styleName='root' />
@@ -110,8 +110,8 @@ class NoteDetail extends React.Component {
     const storage = findStorage(note.storage)
 
     if (note.type === 'SNIPPET_NOTE') {
-      let tabList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === index
+      const tabList = note.snippets.map((snippet, index) => {
+        const isActive = this.state.snippetIndex === index
         return <div styleName={isActive
             ? 'tabList-item--active'
             : 'tabList-item'
@@ -131,8 +131,8 @@ class NoteDetail extends React.Component {
         </div>
       })
 
-      let viewList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === index
+      const viewList = note.snippets.map((snippet, index) => {
+        const isActive = this.state.snippetIndex === index
 
         let syntax = CodeMirror.findModeByName(pass(snippet.mode))
         if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
diff --git a/browser/finder/NoteList.js b/browser/finder/NoteList.js
index b82c3226..17af8cf8 100644
--- a/browser/finder/NoteList.js
+++ b/browser/finder/NoteList.js
@@ -18,18 +18,18 @@ class NoteList extends React.Component {
   }
 
   componentDidUpdate () {
-    let { index } = this.props
+    const { index } = this.props
 
     if (index > -1) {
-      let list = this.refs.root
-      let item = list.childNodes[index]
+      const list = this.refs.root
+      const item = list.childNodes[index]
       if (item == null) return null
 
-      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+      const overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
       if (overflowBelow) {
         list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
       }
-      let overflowAbove = list.scrollTop > item.offsetTop
+      const overflowAbove = list.scrollTop > item.offsetTop
       if (overflowAbove) {
         list.scrollTop = item.offsetTop
       }
@@ -44,7 +44,7 @@ class NoteList extends React.Component {
   }
 
   handleScroll (e) {
-    let { notes } = this.props
+    const { notes } = this.props
 
     if (e.target.offsetHeight + e.target.scrollTop > e.target.scrollHeight - 100 && notes.length > this.state.range * 10 + 10) {
       this.setState({
@@ -54,9 +54,9 @@ class NoteList extends React.Component {
   }
 
   render () {
-    let { notes, index } = this.props
+    const { notes, index } = this.props
 
-    let notesList = notes
+    const notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
         const isActive = (index === _index)
diff --git a/browser/finder/StorageSection.js b/browser/finder/StorageSection.js
index 1c3cc95f..e775743e 100644
--- a/browser/finder/StorageSection.js
+++ b/browser/finder/StorageSection.js
@@ -19,18 +19,18 @@ class StorageSection extends React.Component {
   }
 
   handleHeaderClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
     this.props.handleStorageButtonClick(e, storage.key)
   }
 
   handleFolderClick (e, folder) {
-    let { storage } = this.props
+    const { storage } = this.props
     this.props.handleFolderButtonClick(e, storage.key, folder.key)
   }
 
   render () {
-    let { storage, filter } = this.props
-    let folderList = storage.folders
+    const { storage, filter } = this.props
+    const folderList = storage.folders
       .map(folder => (
         <StorageItem
           key={folder.key}
diff --git a/browser/finder/index.js b/browser/finder/index.js
index 15344c3d..85a30ac7 100644
--- a/browser/finder/index.js
+++ b/browser/finder/index.js
@@ -1,8 +1,8 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { connect, Provider } from 'react-redux'
 import _ from 'lodash'
-import ipc from './ipcClient'
 import store from './store'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FinderMain.styl'
@@ -19,7 +19,7 @@ const { remote } = electron
 const { Menu } = remote
 
 function hideFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   if (global.process.platform === 'win32') {
     finderWindow.blur()
     finderWindow.hide()
@@ -136,7 +136,7 @@ class FinderMain extends React.Component {
   }
 
   handleOnlySnippetCheckboxChange (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.includeSnippet = e.target.checked
     this.setState({
       filter: filter,
@@ -147,7 +147,7 @@ class FinderMain extends React.Component {
   }
 
   handleOnlyMarkdownCheckboxChange (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.includeMarkdown = e.target.checked
     this.refs.list.resetScroll()
     this.setState({
@@ -159,7 +159,7 @@ class FinderMain extends React.Component {
   }
 
   handleAllNotesButtonClick (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'ALL'
     this.refs.list.resetScroll()
     this.setState({
@@ -171,7 +171,7 @@ class FinderMain extends React.Component {
   }
 
   handleStarredButtonClick (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'STARRED'
     this.refs.list.resetScroll()
     this.setState({
@@ -183,7 +183,7 @@ class FinderMain extends React.Component {
   }
 
   handleStorageButtonClick (e, storage) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'STORAGE'
     filter.storage = storage
     this.refs.list.resetScroll()
@@ -196,7 +196,7 @@ class FinderMain extends React.Component {
   }
 
   handleFolderButtonClick (e, storage, folder) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'FOLDER'
     filter.storage = storage
     filter.folder = folder
@@ -218,12 +218,12 @@ class FinderMain extends React.Component {
   }
 
   render () {
-    let { data, config } = this.props
-    let { filter, search } = this.state
-    let storageList = []
-    for (let key in data.storageMap) {
-      let storage = data.storageMap[key]
-      let item = (
+    const { data, config } = this.props
+    const { filter, search } = this.state
+    const storageList = []
+    for (const key in data.storageMap) {
+      const storage = data.storageMap[key]
+      const item = (
         <StorageSection
           filter={filter}
           storage={storage}
@@ -252,7 +252,7 @@ class FinderMain extends React.Component {
         notes.push(data.noteMap[id])
       })
     } else {
-      for (let key in data.noteMap) {
+      for (const key in data.noteMap) {
         notes.push(data.noteMap[key])
       }
     }
@@ -264,13 +264,13 @@ class FinderMain extends React.Component {
     }
 
     if (search.trim().length > 0) {
-      let needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
+      const needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
       notes = notes.filter((note) => note.title.match(needle))
     }
     notes = notes
       .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
 
-    let activeNote = notes[this.state.index]
+    const activeNote = notes[this.state.index]
     this.noteCount = notes.length
 
     return (
diff --git a/browser/finder/ipcClient.js b/browser/finder/ipcClient.js
index 6a5fb929..d87bc6a3 100644
--- a/browser/finder/ipcClient.js
+++ b/browser/finder/ipcClient.js
@@ -10,7 +10,7 @@ nodeIpc.config.retry = 1500
 nodeIpc.config.silent = true
 
 function killFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   finderWindow.removeAllListeners()
   if (global.process.platform === 'darwin') {
     // Only OSX has another app process.
@@ -21,7 +21,7 @@ function killFinder () {
 }
 
 function toggleFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   if (global.process.platform === 'darwin') {
     if (finderWindow.isVisible()) {
       finderWindow.hide()
@@ -84,6 +84,8 @@ nodeIpc.connectTo(
       const { config } = payload
       if (config.ui.theme === 'dark') {
         document.body.setAttribute('data-theme', 'dark')
+      } else if (config.ui.theme === 'white') {
+        document.body.setAttribute('data-theme', 'white')
       } else {
         document.body.setAttribute('data-theme', 'default')
       }
diff --git a/browser/finder/store.js b/browser/finder/store.js
index b1a70076..ca108e6b 100644
--- a/browser/finder/store.js
+++ b/browser/finder/store.js
@@ -2,7 +2,7 @@ import { combineReducers, createStore } from 'redux'
 import { routerReducer } from 'react-router-redux'
 import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
 
-let defaultData = {
+const defaultData = {
   storageMap: {},
   noteMap: {},
   starredSet: [],
@@ -40,12 +40,12 @@ function config (state = DEFAULT_CONFIG, action) {
   return state
 }
 
-let reducer = combineReducers({
+const reducer = combineReducers({
   data,
   config,
   routing: routerReducer
 })
 
-let store = createStore(reducer)
+const store = createStore(reducer)
 
 export default store
diff --git a/browser/lib/Mutable.js b/browser/lib/Mutable.js
index 1f514fb2..0ae2d9cf 100644
--- a/browser/lib/Mutable.js
+++ b/browser/lib/Mutable.js
@@ -38,15 +38,15 @@ class MutableMap {
   }
 
   map (cb) {
-    let result = []
-    for (let [key, value] of this._map) {
+    const result = []
+    for (const [key, value] of this._map) {
       result.push(cb(value, key))
     }
     return result
   }
 
   toJS () {
-    let result = {}
+    const result = {}
     for (let [key, value] of this._map) {
       if (value instanceof MutableSet || value instanceof MutableMap) {
         value = value.toJS()
@@ -85,7 +85,7 @@ class MutableSet {
   }
 
   map (cb) {
-    let result = []
+    const result = []
     this._set.forEach(function (value, key) {
       result.push(cb(value, key))
     })
diff --git a/browser/lib/findNoteTitle.js b/browser/lib/findNoteTitle.js
index 46238caf..81c9400f 100644
--- a/browser/lib/findNoteTitle.js
+++ b/browser/lib/findNoteTitle.js
@@ -1,11 +1,11 @@
 export function findNoteTitle (value) {
-  let splitted = value.split('\n')
+  const splitted = value.split('\n')
   let title = null
   let isInsideCodeBlock = false
 
   splitted.some((line, index) => {
-    let trimmedLine = line.trim()
-    let trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    const trimmedLine = line.trim()
+    const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
     if (trimmedLine.match('```')) {
       isInsideCodeBlock = !isInsideCodeBlock
     }
diff --git a/browser/lib/getTodoStatus.js b/browser/lib/getTodoStatus.js
index d65e4946..dc3deb8a 100644
--- a/browser/lib/getTodoStatus.js
+++ b/browser/lib/getTodoStatus.js
@@ -1,10 +1,10 @@
 export function getTodoStatus (content) {
-  let splitted = content.split('\n')
+  const splitted = content.split('\n')
   let numberOfTodo = 0
   let numberOfCompletedTodo = 0
 
   splitted.forEach((line) => {
-    let trimmedLine = line.trim()
+    const trimmedLine = line.trim()
     if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
       numberOfTodo++
     }
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 67a4b530..fca0259d 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -3,11 +3,12 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 
+// FIXME We should not depend on global variable.
 const katex = window.katex
 
 function createGutter (str) {
-  let lc = (str.match(/\n/g) || []).length
-  let lines = []
+  const lc = (str.match(/\n/g) || []).length
+  const lines = []
   for (let i = 1; i <= lc; i++) {
     lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
@@ -75,8 +76,8 @@ md.use(require('markdown-it-plantuml'))
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   let content, terminate, i, l, token
   let nextLine = startLine + 1
-  let terminatorRules = state.md.block.ruler.getRules('paragraph')
-  let endLine = state.lineMax
+  const terminatorRules = state.md.block.ruler.getRules('paragraph')
+  const endLine = state.lineMax
 
   // jump line-by-line until empty one or EOF
   for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
@@ -106,7 +107,7 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   token.map = [ startLine, state.line ]
 
   if (state.parentType === 'list') {
-    let match = content.match(/^\[( |x)\] ?(.+)/i)
+    const match = content.match(/^\[( |x)\] ?(.+)/i)
     if (match) {
       content = `<label class='taskListItem' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
     }
@@ -123,7 +124,7 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
 })
 
 // Add line number attribute for scrolling
-let originalRender = md.renderer.render
+const originalRender = md.renderer.render
 md.renderer.render = function render (tokens, options, env) {
   tokens.forEach((token) => {
     switch (token.type) {
@@ -134,40 +135,12 @@ md.renderer.render = function render (tokens, options, env) {
         token.attrPush(['data-line', token.map[0]])
     }
   })
-  let result = originalRender.call(md.renderer, tokens, options, env)
+  const result = originalRender.call(md.renderer, tokens, options, env)
   return result
 }
+// FIXME We should not depend on global variable.
 window.md = md
 
-function strip (input) {
-  var output = input
-  try {
-    output = output
-      .replace(/^([\s\t]*)([\*\-\+]|\d\.)\s+/gm, '$1')
-      .replace(/\n={2,}/g, '\n')
-      .replace(/~~/g, '')
-      .replace(/`{3}.*\n/g, '')
-      .replace(/<(.*?)>/g, '$1')
-      .replace(/^[=\-]{2,}\s*$/g, '')
-      .replace(/\[\^.+?\](: .*?$)?/g, '')
-      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
-      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
-      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
-      .replace(/>/g, '')
-      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
-      .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
-      .replace(/(`{3,})(.*?)\1/gm, '$2')
-      .replace(/^-{3,}\s*$/g, '')
-      .replace(/`(.+?)`/g, '$1')
-      .replace(/\n{2,}/g, '\n\n')
-  } catch (e) {
-    console.error(e)
-    return input
-  }
-  return output
-}
-
 function normalizeLinkText (linkText) {
   return md.normalizeLinkText(linkText)
 }
@@ -178,7 +151,7 @@ const markdown = {
     const renderedContent = md.render(content)
     return renderedContent
   },
-  strip,
   normalizeLinkText
 }
+
 export default markdown
diff --git a/browser/lib/markdownTextHelper.js b/browser/lib/markdownTextHelper.js
new file mode 100644
index 00000000..1501e2c7
--- /dev/null
+++ b/browser/lib/markdownTextHelper.js
@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Text trimmer for markdown note.
+ */
+
+/**
+ * @param {string} input
+ * @return {string}
+ */
+export function strip (input) {
+  let output = input
+  try {
+    output = output
+      .replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1')
+      .replace(/\n={2,}/g, '\n')
+      .replace(/~~/g, '')
+      .replace(/`{3}.*\n/g, '')
+      .replace(/<(.*?)>/g, '$1')
+      .replace(/^[=\-]{2,}\s*$/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
+      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+      .replace(/>/g, '')
+      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
+      .replace(/(`{3,})(.*?)\1/gm, '$2')
+      .replace(/^-{3,}\s*$/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\n{2,}/g, '\n\n')
+  } catch (e) {
+    console.error(e)
+    return input
+  }
+  return output
+}
+
+export default {
+  strip
+}
diff --git a/browser/lib/search.js b/browser/lib/search.js
index d102e381..dadc9a29 100644
--- a/browser/lib/search.js
+++ b/browser/lib/search.js
@@ -16,7 +16,7 @@ export default function searchFromNotes (notes, search) {
 
 function findByTag (notes, block) {
   const tag = block.match(/#(.+)/)[1]
-  let regExp = new RegExp(_.escapeRegExp(tag), 'i')
+  const regExp = new RegExp(_.escapeRegExp(tag), 'i')
   return notes.filter((note) => {
     if (!_.isArray(note.tags)) return false
     return note.tags.some((_tag) => {
@@ -26,7 +26,7 @@ function findByTag (notes, block) {
 }
 
 function findByWord (notes, block) {
-  let regExp = new RegExp(_.escapeRegExp(block), 'i')
+  const regExp = new RegExp(_.escapeRegExp(block), 'i')
   return notes.filter((note) => {
     if (_.isArray(note.tags) && note.tags.some((_tag) => {
       return _tag.match(regExp)
diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl
index 81b3e08c..4d0e3fe8 100644
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -1,5 +1,8 @@
 .root
   absolute top bottom right
+  display flex
+  align-items center
+  justify-content center
 
 .empty
   height 320px
@@ -8,8 +11,9 @@
 
 .empty-message
   width 100%
-  font-size 42px
-  line-height 72px
+  font-size 36px
+  font-weight 600
+  line-height 56px
   text-align center
   color $ui-inactive-text-color
 
diff --git a/browser/main/Detail/DetailVars.styl b/browser/main/Detail/DetailVars.styl
index ad492c54..80ee094d 100644
--- a/browser/main/Detail/DetailVars.styl
+++ b/browser/main/Detail/DetailVars.styl
@@ -3,7 +3,9 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 25px
-$note-detail-right-margin = 25px
+$note-detail-left-margin = 100px
+$note-detail-right-margin = 120px
+$snippet-note-detail-left-margin = 60px
+$snippet-note-detail-right-margin = 80px
 
 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset
diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
index bec02f3d..ed76c5dd 100644
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
@@ -73,8 +74,8 @@ class FolderSelect extends React.Component {
       case 9:
         if (e.shiftKey) {
           e.preventDefault()
-          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
-          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          const tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          const previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
           if (previousEl != null) previousEl.focus()
         }
     }
@@ -89,9 +90,9 @@ class FolderSelect extends React.Component {
   }
 
   handleSearchInputChange (e) {
-    let { folders } = this.props
-    let search = this.refs.search.value
-    let optionIndex = search.length > 0
+    const { folders } = this.props
+    const search = this.refs.search.value
+    const optionIndex = search.length > 0
       ? _.findIndex(folders, (folder) => {
         return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
       })
@@ -129,7 +130,7 @@ class FolderSelect extends React.Component {
 
   nextOption () {
     let { optionIndex } = this.state
-    let { folders } = this.props
+    const { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -140,7 +141,7 @@ class FolderSelect extends React.Component {
   }
 
   previousOption () {
-    let { folders } = this.props
+    const { folders } = this.props
     let { optionIndex } = this.state
 
     optionIndex--
@@ -152,10 +153,10 @@ class FolderSelect extends React.Component {
   }
 
   selectOption () {
-    let { folders } = this.props
-    let optionIndex = this.state.optionIndex
+    const { folders } = this.props
+    const optionIndex = this.state.optionIndex
 
-    let folder = folders[optionIndex]
+    const folder = folders[optionIndex]
     if (folder != null) {
       this.setState({
         status: 'FOCUS'
@@ -184,10 +185,10 @@ class FolderSelect extends React.Component {
   }
 
   render () {
-    let { className, data, value } = this.props
-    let splitted = value.split('-')
-    let storageKey = splitted.shift()
-    let folderKey = splitted.shift()
+    const { className, data, value } = this.props
+    const splitted = value.split('-')
+    const storageKey = splitted.shift()
+    const folderKey = splitted.shift()
     let options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
@@ -198,14 +199,14 @@ class FolderSelect extends React.Component {
       })
     })
 
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     if (this.state.search.trim().length > 0) {
-      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
       options = options.filter((option) => filter.test(option.folder.name))
     }
 
-    let optionList = options
+    const optionList = options
       .map((option, index) => {
         return (
           <div styleName={index === this.state.optionIndex
@@ -259,12 +260,11 @@ class FolderSelect extends React.Component {
               {optionList}
             </div>
           </div>
-          : <div styleName='idle'>
+          : <div styleName='idle' style={{color: currentOption.folder.color}}>
             <div styleName='idle-label'>
-              <span styleName='idle-label-name'
-                style={{color: currentOption.folder.color}}
-              >
-                {currentOption.folder.name} /
+              <i className='fa fa-folder' />
+              <span styleName='idle-label-name'>
+                {currentOption.folder.name}
               </span>
             </div>
           </div>
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 81c5c41a..22b7b9b7 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -1,21 +1,22 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 26px
   vertical-align middle
   border-radius 2px
   transition 0.15s
   user-select none
+  margin-right 10px
   &:hover
     background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
   &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -24,13 +25,16 @@
 .idle-label
   right 20px
   overflow ellipsis
+  display flex
+  align-items center
 
 .idle-label-name
-  font-size 14px
-  padding 2px
+  font-size 13px
+  font-weight 600
+  margin-left 4px
 
 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
   color $ui-inactive-text-color
   margin-left 5px
 .idle-caret
@@ -38,40 +42,42 @@
   height 34px
   width 20px
   line-height 34px
-
-.search
-  absolute top left right bottom
-  line-height 34px
-
+  
 .search-input
   vertical-align middle
   position relative
-  top -2px
+  top 0
+  font-size 14px
   outline none
   border none
-  height 20px
-  line-height 20px
+  width 100%
   background-color transparent
   padding 0 10px
 
 .search-optionList
-  position fixed
+  position absolute
+  top 30px
   max-height 450px
+  min-width 150px
   overflow auto
   z-index 200
   border $ui-border
   background-color white
   border-radius 2px
+  padding 10px 6px
 
 .search-optionList-item
+  width 140px
   height 34px
-  width 250px
+  display flex
+  align-items center
   box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color $ui-button--hover-backgroundColor 
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -81,13 +87,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
-  padding 2px 5px
+  border-left solid 3px transparent
+  padding 6px
 .search-optionList-item-name-surfix
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
 
+
+
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js
index e4a9dedc..02d8dfe4 100644
--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'
 
@@ -6,9 +7,9 @@ const InfoButton = ({
   onClick
 }) => (
   <button styleName='control-infoButton'
-    onClick={onClick}
+    onClick={(e) => onClick(e)}
   >
-    <i className='fa fa-info infoButton' styleName='info-button' />
+    <img className='infoButton' src='../resources/icon/icon-info.svg' />
   </button>
 )
 
diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl
index 45c378fe..67618fb3 100644
--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -1,20 +1,10 @@
 .control-infoButton
-  float right
+  top 10px
+  margin-bottom 10px
   topBarButtonLight()
 
-.control-infoPanel
-  position fixed
-  pointer-events none
-  top 50px
-  z-index 200
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-
 .infoButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-infoButton
diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js
index b271e306..e718fbf3 100644
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index 62ec529e..a115d108 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -10,12 +10,12 @@
 
 .control-infoButton-panel
   z-index 200
-  margin-top 38px
-  margin-left -140px
+  margin-top 0px
+  right 0
   position absolute
   padding 20px 25px 0 25px
   width 300px
-  height 500px
+  height 350px
   overflow auto
   background-color $ui-noteList-backgroundColor
   box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
@@ -32,8 +32,8 @@
 
 .control-infoButton-panel-trash
   z-index 200
-  margin-top 45px
-  margin-left -190px
+  margin-top 0px
+  right 0px
   position absolute
   padding 20px 25px 0 25px
   width 300px
diff --git a/browser/main/Detail/InfoPanelTrashed.js b/browser/main/Detail/InfoPanelTrashed.js
index 5e06e2ac..77ecea22 100644
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 767f17b3..f4c805c1 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
@@ -9,12 +10,13 @@ import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
-import markdown from 'browser/lib/markdown'
+import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -24,7 +26,7 @@ import striptags from 'striptags'
 
 const electron = require('electron')
 const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -73,7 +75,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.content = this.refs.content.value
     if (this.refs.tags) note.tags = this.refs.tags.value
@@ -95,7 +97,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -111,11 +113,11 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -124,7 +126,7 @@ class MarkdownNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -144,7 +146,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -169,22 +171,22 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Confirm note deletion',
         detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
       if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
         .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
             dispatch({
               type: 'DELETE_NOTE',
               storageKey: data.storageKey,
@@ -206,7 +208,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -231,7 +233,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -261,12 +263,12 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
-    let storageKey = note.storage
-    let folderKey = note.folder
+    const { data, config, location } = this.props
+    const { note } = this.state
+    const storageKey = note.storage
+    const folderKey = note.folder
 
-    let options = []
+    const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
         options.push({
@@ -275,7 +277,7 @@ class MarkdownNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
@@ -285,7 +287,7 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
@@ -302,10 +304,6 @@ class MarkdownNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -325,31 +323,38 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
         {(() => {
-          const faClassName = `fa ${this.getToggleLockButton()}`
+          const imgSrc = `${this.getToggleLockButton()}`
           const lockButtonComponent =
             <button styleName='control-lockButton'
               onFocus={(e) => this.handleFocus(e)}
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
-              <i className={faClassName} styleName='lock-button' />
-              <span styleName='control-lockButton-tooltip'>
-                {this.state.isLocked ? 'Unlock Editor' : 'Keep Editor Locked'}
-              </span>
+              <img styleName='iconInfo' src={imgSrc} />
             </button>
+
           return (
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
         </button>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 5ed487d8..597447eb 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -3,47 +3,47 @@
 
 .root
   absolute top right bottom
-  border-width 0
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
+  padding 20px 40px
 
 .lock-button
   padding-bottom 3px
 
 .control-lockButton
+  top 160px
+  margin-bottom 10px
   topBarButtonLight()
 
-.control-lockButton-tooltip
-  tooltip()
-  position fixed
-  pointer-events none
-  top 50px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
+.trashed-infopanel
+  top 40px
+  position relative
 
 .control-fullScreenButton
-  float right
-  padding 0 0 2px 0
+  top 80px
   topBarButtonLight()
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-
+  margin 0 45px
 .body-noteEditor
   absolute top bottom left right
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+    border none
 
   .control-lockButton
     topBarButtonDark()
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index fc71a2f7..a9261bd0 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -1,33 +1,31 @@
 @import('DetailVars')
 
-$info-height = 60px
-$info-margin-under-border = 27px
+$info-height = 50px
+$info-margin-under-border = 30px
 
 .info
   absolute top left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   height $info-height
-  border-bottom $ui-border
+  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center
 
 .info-left
-  float left
-  padding 0 5px
-  margin 0px 2px
-.info-left-top
-  display inline-block
-  height $info-height
-  line-height $info-height
+  padding 0 10px
+  width 100%
+  display flex
+  align-items center
+
 
 .info-left-top-folderSelect
-  padding 0 3px
-  height 34px
-  line-height 26px
   display flex
   align-items center
   justify-content center
-  border-radius 3px
+
 .info-left-button
   width 34px
   height 34px
@@ -48,18 +46,18 @@ $info-margin-under-border = 27px
 
 .info-right
   position absolute
-  right 0
-  top 0
-  background $ui-noteDetail-backgroundColor
+  right 40px
+  top 60px
   bottom 1px
   padding-left 30px
+  z-index 101
 
 .undo-button
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
+  margin 5px 0px
   border none
   color $ui-button-color
   display flex
@@ -72,6 +70,7 @@ $info-margin-under-border = 27px
     border-color $ui-button--active-backgroundColor
   &:hover
     background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
     .control-lockButton-tooltip
       opacity 1
 
diff --git a/browser/main/Detail/PermanentDeleteButton.js b/browser/main/Detail/PermanentDeleteButton.js
new file mode 100644
index 00000000..f0b10009
--- /dev/null
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const PermanentDeleteButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton--in-trash'
+    onClick={(e) => onClick(e)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+  </button>
+)
+
+PermanentDeleteButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PermanentDeleteButton, styles)
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index ad376e3a..51f14fae 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetNoteDetail.styl'
 import CodeEditor from 'browser/components/CodeEditor'
@@ -18,6 +19,7 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -60,7 +62,7 @@ class SnippetNoteDetail extends React.Component {
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
-      let nextNote = Object.assign({
+      const nextNote = Object.assign({
         description: ''
       }, nextProps.note, {
         snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
@@ -69,7 +71,7 @@ class SnippetNoteDetail extends React.Component {
         snippetIndex: 0,
         note: nextNote
       }, () => {
-        let { snippets } = this.state.note
+        const { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
           this.refs['code-' + index].reload()
         })
@@ -83,7 +85,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     if (this.refs.tags) note.tags = this.refs.tags.value
     note.description = this.refs.description.value
@@ -105,7 +107,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -121,11 +123,11 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -134,7 +136,7 @@ class SnippetNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -154,7 +156,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -171,22 +173,22 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Confirm note deletion',
         detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
       if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
         .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
             dispatch({
               type: 'DELETE_NOTE',
               storageKey: data.storageKey,
@@ -208,7 +210,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -237,7 +239,7 @@ class SnippetNoteDetail extends React.Component {
   handleTabDeleteButtonClick (e, index) {
     if (this.state.note.snippets.length > 1) {
       if (this.state.note.snippets[index].content.trim().length > 0) {
-        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
           type: 'warning',
           message: 'Delete a snippet',
           detail: 'This work cannot be undone.',
@@ -287,7 +289,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleModeOptionClick (index, name) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      const snippets = this.state.note.snippets.slice()
       snippets[index].mode = name
       this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
 
@@ -305,7 +307,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleCodeChange (index) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      const snippets = this.state.note.snippets.slice()
       snippets[index].content = this.refs['code-' + index].value
       this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
       this.setState({
@@ -332,7 +334,7 @@ class SnippetNoteDetail extends React.Component {
         break
       case 76:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
           if (isSuper) {
@@ -343,7 +345,7 @@ class SnippetNoteDetail extends React.Component {
         break
       case 84:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
           if (isSuper) {
@@ -356,7 +358,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleModeButtonClick (e, index) {
-    let menu = new Menu()
+    const menu = new Menu()
     CodeMirror.modeInfo.forEach((mode) => {
       menu.append(new MenuItem({
         label: mode.name,
@@ -397,8 +399,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentSizeItemClick (e, indentSize) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentSize
     })
     ConfigManager.set({
@@ -413,8 +415,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentTypeItemClick (e, indentType) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentType
     })
     ConfigManager.set({
@@ -433,14 +435,14 @@ class SnippetNoteDetail extends React.Component {
   }
 
   addSnippet () {
-    let { note } = this.state
+    const { note } = this.state
 
     note.snippets = note.snippets.concat([{
       name: '',
       mode: 'Plain Text',
       content: ''
     }])
-    let snippetIndex = note.snippets.length - 1
+    const snippetIndex = note.snippets.length - 1
 
     this.setState({
       note,
@@ -486,19 +488,19 @@ class SnippetNoteDetail extends React.Component {
   }
 
   render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
+    const { data, config, location } = this.props
+    const { note } = this.state
 
-    let storageKey = note.storage
-    let folderKey = note.folder
+    const storageKey = note.storage
+    const folderKey = note.folder
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
-    let tabList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const tabList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
 
       return <SnippetTab
         key={index}
@@ -512,8 +514,8 @@ class SnippetNoteDetail extends React.Component {
       />
     })
 
-    let viewList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const viewList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
 
       let syntax = CodeMirror.findModeByName(pass(snippet.mode))
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
@@ -547,7 +549,7 @@ class SnippetNoteDetail extends React.Component {
       </div>
     })
 
-    let options = []
+    const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
         options.push({
@@ -556,7 +558,7 @@ class SnippetNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
@@ -566,7 +568,7 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
@@ -583,10 +585,6 @@ class SnippetNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -603,15 +601,21 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
-        </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index e4a8f97d..e661d07c 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -3,14 +3,14 @@
 
 .root
   absolute top bottom right
-  border-width 0
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left $snippet-note-detail-left-margin
+  right $snippet-note-detail-right-margin
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
@@ -43,7 +43,7 @@
   overflow hidden
 
 .tabList .plusButton
-  navButtonColor()
+  navWhiteButtonColor()
   width 30px
 
 .tabView
@@ -55,24 +55,30 @@
 
 .override
   absolute bottom left
-  bottom 2px
+  bottom 1px
   left 60px
-  height 23px
   z-index 101
   button
     navButtonColor()
-    height 24px
+    padding 0 6px
+    &:hover
+      color $ui-active-color
     &:active .update-icon
-      color white
+      color $ui-active-color
 
 .control-fullScreenButton
-  float right
-  padding 0 0 2px 0
+  top 80px
+  margin-bottom 10px
   topBarButtonLight()
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
+    border none
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js
index 8610c950..0616a1e0 100644
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
@@ -31,7 +32,7 @@ class StarButton extends React.Component {
   }
 
   render () {
-    let { className } = this.props
+    const { className } = this.props
 
     return (
       <button className={_.isString(className)
@@ -47,10 +48,10 @@ class StarButton extends React.Component {
         onMouseLeave={(e) => this.handleMouseLeave(e)}
         onClick={this.props.onClick}
       >
-        <i styleName='icon'
-          className={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
-            : 'fa fa-star-o'
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
           }
         />
       </button>
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index 57627982..b1880a8e 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -1,47 +1,24 @@
 .root
-  left 7px
-  top 0
-  padding 0
-  color alpha($ui-favorite-star-button-color, 60%)
+  top 45px
+  topBarButtonLight()
   &:hover
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
-  &:active
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
 
 .root--active
   @extend .root
+  transition 0.15s
   color $ui-favorite-star-button-color
   &:hover
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
 
 .icon
   transition transform 0.15s
 
 body[data-theme="dark"]
   .root
+    topBarButtonDark()
     &:hover
-      transition 0.15s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-favorite-star-button-color
-    &:active
-      transition 0.15s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-favorite-star-button-color
-
-  .root--active
-    @extend .root
-    color $ui-favorite-star-button-color
-    &:hover
-      transition 0.15s
-      color $ui-favorite-star-button-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
\ No newline at end of file
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)
\ No newline at end of file
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index cb711f0e..49616d16 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -59,7 +60,7 @@ class TagSelect extends React.Component {
   submitTag () {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
     let { value } = this.props
-    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    const newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
 
     if (newTag.length <= 0) {
       this.setState({
@@ -101,9 +102,9 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    let { value, className } = this.props
+    const { value, className } = this.props
 
-    let tagList = _.isArray(value)
+    const tagList = _.isArray(value)
       ? value.map((tag) => {
         return (
           <span styleName='tag'
@@ -113,7 +114,7 @@ class TagSelect extends React.Component {
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
             </button>
           </span>
         )
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index b5b8bb74..4001f03e 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -1,9 +1,9 @@
 .root
-  display inline-block
+  display flex
+  align-items center
   user-select none
-  height 23px
   vertical-align middle
-  width 300px
+  width 100%
   overflow-x scroll
   white-space nowrap
 
@@ -11,51 +11,42 @@
   display none
 
 .tag
-  display inline-block
-  margin 1px 3px
-  padding 0
-  height 20px
-  background-color alpha($ui-tag-backgroundColor, 10%)
-  border-radius 3px
-  overflow hidden
+  display flex
+  align-items center
+  margin 0px 2px
+  padding 2px 4px
+  background-color alpha($ui-tag-backgroundColor, 3%)
+  border-radius 4px
+  position relative
   clearfix()
 
 .tag-removeButton
-  float right
-  height 20px
-  width 18px
   margin 0
   padding 0
   border-style solid
   border-width 0
   border-radius 20px
-  line-height 18px
   background-color transparent
   color $ui-button-color
+  position absolute
+  right 6px
 
 .tag-removeButton-icon
   width 5px
   padding-right 4px
 
 .tag-label
-  font-size 11px
-  font-weight 600
-  color: alpha($ui-text-color, 80%)
-  float left
-  height 20px
-  line-height 20px
-  padding 0 6px
+  font-size 13px
+  color: $ui-text-color
+  padding 4px 16px 4px 8px
 
 .newTag
-  display inline-block
-  margin 2px 0 15px 2px
-  vertical-align middle
-  height 18px
   box-sizing border-box
   border none
   background-color transparent
   outline none
   padding 0 4px
+  font-size 13px
 
 body[data-theme="dark"]
   .tag
diff --git a/browser/main/Detail/TrashButton.js b/browser/main/Detail/TrashButton.js
index 04dcaacd..bfaafe1e 100644
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
 
@@ -8,7 +9,7 @@ const TrashButton = ({
   <button styleName='control-trashButton'
     onClick={(e) => onClick(e)}
   >
-    <i className='fa fa-trash trashButton' styleName='info-button' />
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
   </button>
 )
 
diff --git a/browser/main/Detail/TrashButton.styl b/browser/main/Detail/TrashButton.styl
index 1d7d3add..b1edbb5f 100644
--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -1,10 +1,14 @@
 .control-trashButton
-  float right
+  top 120px
+  margin-bottom 10px
+  topBarButtonLight()
+
+.control-trashButton--in-trash
+  top 60px
   topBarButtonLight()
 
 .trashButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-trashButton
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index 884c6452..70f37a41 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Detail.styl'
 import _ from 'lodash'
@@ -32,12 +33,12 @@ class Detail extends React.Component {
   }
 
   render () {
-    let { location, data, config } = this.props
+    const { location, data, config } = this.props
     let note = null
     if (location.query.key != null) {
-      let splitted = location.query.key.split('-')
-      let storageKey = splitted.shift()
-      let noteKey = splitted.shift()
+      const splitted = location.query.key.split('-')
+      const storageKey = splitted.shift()
+      const noteKey = splitted.shift()
 
       note = data.noteMap.get(storageKey + '-' + noteKey)
     }
diff --git a/browser/main/Main.js b/browser/main/Main.js
index bfd1bd5f..39292e35 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Main.styl'
 import { connect } from 'react-redux'
@@ -11,14 +12,9 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
-import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 
-function focused () {
-  mixpanel.track('MAIN_FOCUSED')
-}
-
 class Main extends React.Component {
 
   constructor (props) {
@@ -28,7 +24,7 @@ class Main extends React.Component {
       mobileAnalytics.initAwsMobileAnalytics()
     }
 
-    let { config } = props
+    const { config } = props
 
     this.state = {
       isRightSliderFocused: false,
@@ -44,7 +40,7 @@ class Main extends React.Component {
   }
 
   getChildContext () {
-    let { status, config } = this.props
+    const { status, config } = this.props
 
     return {
       status,
@@ -53,10 +49,12 @@ class Main extends React.Component {
   }
 
   componentDidMount () {
-    let { dispatch, config } = this.props
+    const { dispatch, config } = this.props
 
     if (config.ui.theme === 'dark') {
       document.body.setAttribute('data-theme', 'dark')
+    } else if (config.ui.theme === 'white') {
+      document.body.setAttribute('data-theme', 'white')
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
@@ -76,11 +74,9 @@ class Main extends React.Component {
       })
 
     eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
-    window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
-    window.removeEventListener('focus', focused)
     eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
@@ -104,8 +100,8 @@ class Main extends React.Component {
       this.setState({
         isRightSliderFocused: false
       }, () => {
-        let { dispatch } = this.props
-        let newListWidth = this.state.listWidth
+        const { dispatch } = this.props
+        const newListWidth = this.state.listWidth
         // TODO: ConfigManager should dispatch itself.
         ConfigManager.set({listWidth: newListWidth})
         dispatch({
@@ -120,8 +116,8 @@ class Main extends React.Component {
       this.setState({
         isLeftSliderFocused: false
       }, () => {
-        let { dispatch } = this.props
-        let navWidth = this.state.navWidth
+        const { dispatch } = this.props
+        const navWidth = this.state.navWidth
         // TODO: ConfigManager should dispatch itself.
         ConfigManager.set({ navWidth })
         dispatch({
@@ -134,7 +130,7 @@ class Main extends React.Component {
 
   handleMouseMove (e) {
     if (this.state.isRightSliderFocused) {
-      let offset = this.refs.body.getBoundingClientRect().left
+      const offset = this.refs.body.getBoundingClientRect().left
       let newListWidth = e.pageX - offset
       if (newListWidth < 10) {
         newListWidth = 10
@@ -187,7 +183,7 @@ class Main extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    const { config } = this.props
 
     // the width of the navigation bar when it is folded/collapsed
     const foldedNavigationWidth = 44
diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl
index 44273319..cb49501c 100644
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -44,6 +44,13 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-newNoteButton
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor
diff --git a/browser/main/NewNoteButton/index.js b/browser/main/NewNoteButton/index.js
index 936bb146..3adf3369 100644
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -1,12 +1,11 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteButton.styl'
 import _ from 'lodash'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
-import { hashHistory } from 'react-router'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import dataApi from 'browser/main/lib/dataApi'
 
 const { remote } = require('electron')
 const { dialog } = remote
@@ -34,7 +33,7 @@ class NewNoteButton extends React.Component {
   }
 
   handleNewNoteButtonClick (e) {
-    const { config, location, dispatch } = this.props
+    const { location, dispatch } = this.props
     const { storage, folder } = this.resolveTargetFolder()
 
     modal.open(NewNoteModal, {
@@ -51,7 +50,7 @@ class NewNoteButton extends React.Component {
 
     // Find first storage
     if (storage == null) {
-      for (let kv of data.storageMap) {
+      for (const kv of data.storageMap) {
         storage = kv[1]
         break
       }
@@ -85,7 +84,7 @@ class NewNoteButton extends React.Component {
         <div styleName='control'>
           <button styleName='control-newNoteButton'
             onClick={(e) => this.handleNewNoteButtonClick(e)}>
-            <i className='fa fa-pencil-square-o' />
+            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
               Make a Note {OSX ? '⌘' : '^'} + n
             </span>
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 892ad3d8..8332eefb 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -21,14 +21,14 @@ $control-height = 30px
 
 .control-sortBy-select
   appearance: none;
-  margin-left 3px
+  margin-left 5px
   color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
   outline none
   cursor pointer
-  font-size 11px
+  font-size 12px
   &:hover
     transition 0.2s
     color $ui-text-color
@@ -59,6 +59,13 @@ $control-height = 30px
   top $control-height
   overflow auto
 
+body[data-theme="white"]
+  .root
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index a3f0ffae..191a7cce 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color #f9f9f9
+  background-color #2E3235
   user-select none
   color $ui-text-color
   height: 100vh
@@ -11,24 +11,25 @@
 .top
   padding-bottom 15px
 
-.top-menu
+.top-menu-preference
   navButtonColor()
   position absolute
   top 22px
-  right 5px
-  height 23px
+  right 10px
   width 2em
+  background-color transparent
   &:hover
-    color $ui-text-color
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
   &:active, &:active:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default--active-backgroundColor
 
 .switch-buttons
   background-color transparent
   border 0
-  height 25px
-  margin 20px auto 0px 8px
+  margin 24px auto 4px 14px
+  display flex
+  text-align center
 
 .non-active-button
   color $ui-inactive-text-color
@@ -36,13 +37,16 @@
   border 0
   background-color transparent
   transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
   &:hover
-    color alpha(#0B99F1, 60%)
+    color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
-  color #0B99F1
-
+  color $ui-button-default--active-backgroundColor
+  
 .top-menu-label
   margin-left 5px
   overflow ellipsis
@@ -57,7 +61,7 @@
   padding-left 15px
   padding-bottom 13px
   p
-    color $ui-text-color
+    color $ui-button-default-color
 
 .tagList
   overflow-y auto
@@ -66,6 +70,7 @@
 .root--folded
   height 100vh
   width $sideNav--folded-width
+  background-color #2E3235
   .switch-buttons
     display none
   .top
@@ -88,7 +93,6 @@
     opacity 0
     margin-left 0
     overflow hidden
-    background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 30px
@@ -96,6 +100,41 @@
     border-bottom-right-radius 2px
     pointer-events none
     font-size 13px
+  .top-menu-preference
+    position absolute
+    left 11px
+
+body[data-theme="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
 
 body[data-theme="dark"]
   .root, .root--folded
@@ -106,12 +145,15 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu
+  .top-menu-preference
     navDarkButtonColor()
+    background-color transparent
     &:active
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
 
   .non-active-button
     color alpha($ui-dark-text-color, 60%)
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index af3ff0ef..1f8f9ca7 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -5,27 +5,23 @@
 
 .header
   position relative
-  height 25px
+  height 36px
   width 100%
   margin-bottom 5px
   transition 0.15s
+  display flex
+  align-items center
 
 .header--active
   margin-bottom 5px
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   transition color background-color  0.15s
-
-.header--active
+  display flex
+  align-items center
   .header-toggleButton
-    color $ui-text-color
-
-.header--active
   .header-info
-    color $ui-text-color
-
-.header--active
   .header-addFolderButton
-    color $ui-text-color
+    color #1EC38B
 
 .header-toggleButton
   navButtonColor()
@@ -38,23 +34,31 @@
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
   navButtonColor()
   display block
   width 100%
-  height 25px
-  padding-left 23px
-  padding-right 10px
+  height 36px
+  padding-left 25px
+  padding-right 15px
   line-height 22px
   cursor pointer
-  font-size 13px
+  font-size 14px
   border none
   overflow ellipsis
   text-align left
-  background-color alpha($ui-button--active-backgroundColor, 20%)
+  font-weight 600;
+  background-color transparent
+  &:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -63,17 +67,14 @@
 .header-addFolderButton
   navButtonColor()
   position absolute
-  right 0
+  right 7px
   width 25px
   height 25px
   padding 0
   border none
-  margin-right 5px
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-text-color
 
 .root--folded
   @extend .root
@@ -102,6 +103,33 @@
     font-size 10px
     margin 0 5px
 
+body[data-theme="white"]
+  .header--active
+    background-color $ui-button--active-backgroundColor
+    transition color background-color  0.15s
+    .header-toggleButton
+      color $ui-text-color
+    .header-info
+      color $ui-text-color
+    .header-addFolderButton
+      color $ui-text-color
+
+  .header-toggleButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  .header-info
+    navWhiteButtonColor()
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+  .header-addFolderButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
 body[data-theme="dark"]
   .header--active
     background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 1e78c058..05361ea4 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
@@ -9,25 +10,35 @@ import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 import StorageList from 'browser/components/StorageList'
 import NavToggleButton from 'browser/components/NavToggleButton'
+import EventEmitter from 'browser/main/lib/eventEmitter'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
+
+  componentDidMount () {
+    EventEmitter.on('side:preferences', this.handleMenuButtonClick)
+  }
+
+  componentWillUnmount () {
+    EventEmitter.off('side:preferences', this.handleMenuButtonClick)
+  }
+
   handleMenuButtonClick (e) {
     openModal(PreferencesModal)
   }
 
   handleHomeButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/home')
   }
 
   handleStarredButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/starred')
   }
 
   handleToggleButtonClick (e) {
-    let { dispatch, config } = this.props
+    const { dispatch, config } = this.props
 
     ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
     dispatch({
@@ -37,7 +48,7 @@ class SideNav extends React.Component {
   }
 
   handleTrashedButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/trashed')
   }
 
@@ -52,7 +63,7 @@ class SideNav extends React.Component {
   }
 
   SideNavComponent (isFolded, storageList) {
-    let { location, data } = this.props
+    const { location, data } = this.props
 
     const isHomeActive = !!location.pathname.match(/^\/home$/)
     const isStarredActive = !!location.pathname.match(/^\/starred$/)
@@ -72,6 +83,9 @@ class SideNav extends React.Component {
             isTrashedActive={isTrashedActive}
             handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
+            counterTotalNote={data.noteMap._map.size}
+            counterStarredNote={data.starredSet._set.size}
+            counterDelNote={data.trashedSet._set.size}
           />
 
           <StorageList storageList={storageList} />
@@ -96,7 +110,7 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location } = this.props
-    let tagList = data.tagNoteMap.map((tag, key) => {
+    const tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })
     return (
@@ -123,11 +137,11 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { data, location, config, dispatch } = this.props
+    const { data, location, config, dispatch } = this.props
 
-    let isFolded = config.isSideNavFolded
+    const isFolded = config.isSideNavFolded
 
-    let storageList = data.storageMap.map((storage, key) => {
+    const storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
         key={storage.key}
         storage={storage}
@@ -137,7 +151,7 @@ class SideNav extends React.Component {
         dispatch={dispatch}
       />
     })
-    let style = {}
+    const style = {}
     if (!isFolded) style.width = this.props.width
     const isTagActive = location.pathname.match(/tag/)
     return (
@@ -148,15 +162,26 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-folder fa-fw' /></button>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
           </div>
           <div>
-            <button styleName='top-menu'
+            <button styleName='top-menu-preference'
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
-              <i className='fa fa-wrench fa-fw' />
-              <span styleName='top-menu-label'>Preferences</span>
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
             </button>
           </div>
         </div>
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 519950f8..9f189fec 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,9 +1,10 @@
 @import('../Detail/DetailVars')
 
 .root
-  absolute bottom left right
+  position absolute
+  bottom 10px
+  right 10px
   z-index 100
-  background-color $ui-noteDetail-backgroundColor
   display flex
 
 .blank
@@ -21,8 +22,19 @@
 
 .zoom
   navButtonColor()
-  height 24px
-
+  color rgba(0,0,0,.54)
+  height 20px
+  display flex
+  padding 0
+  align-items center
+  background-color transparent
+  &:hover
+    color $ui-active-color
+  &:active
+    color $ui-active-color
+  span
+    margin-left 5px
+  
 .update
   navButtonColor()
   height 24px
@@ -37,14 +49,14 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
     box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor
+    background-color transparent
+    color #f9f9f9
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       transition 0.15s
       color $ui-dark-text-color
 
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index c1ec0e71..2106a230 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
@@ -11,7 +12,7 @@ const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2
 
 class StatusBar extends React.Component {
   updateApp () {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Update Boostnote',
       detail: 'New Boostnote is ready to be installed.',
@@ -24,7 +25,7 @@ class StatusBar extends React.Component {
   }
 
   handleZoomButtonClick (e) {
-    let menu = new Menu()
+    const menu = new Menu()
 
     zoomOptions.forEach((zoom) => {
       menu.append(new MenuItem({
@@ -37,7 +38,7 @@ class StatusBar extends React.Component {
   }
 
   handleZoomMenuItemClick (zoomFactor) {
-    let { dispatch } = this.props
+    const { dispatch } = this.props
     ZoomManager.setZoom(zoomFactor)
     dispatch({
       type: 'SET_ZOOM',
@@ -46,7 +47,7 @@ class StatusBar extends React.Component {
   }
 
   render () {
-    let { config, status } = this.context
+    const { config, status } = this.context
 
     return (
       <div className='StatusBar'
@@ -55,8 +56,8 @@ class StatusBar extends React.Component {
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
-          <i className='fa fa-search-plus' />&nbsp;
-          {Math.floor(config.zoom * 100)}%
+          <img src='../resources/icon/icon-zoom.svg' />
+          <span>{Math.floor(config.zoom * 100)}%</span>
         </button>
 
         {status.updateReady
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 0a88d32e..3e5a7275 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -36,7 +36,7 @@ $control-height = 34px
     outline none
     border none
     color $ui-text-color
-    font-size 16px
+    font-size 18px
     padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
@@ -112,6 +112,21 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+
+  .control-search
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-white-noteList-backgroundColor
+    input
+      background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 2c34ebf2..11d31abd 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -1,16 +1,11 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import _ from 'lodash'
-import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 
-const { remote } = require('electron')
-const { dialog } = remote
-
-const OSX = window.process.platform === 'darwin'
-
 class TopBar extends React.Component {
   constructor (props) {
     super(props)
@@ -121,7 +116,7 @@ class TopBar extends React.Component {
   }
 
   render () {
-    let { config, style, data, location } = this.props
+    const { config, style, location } = this.props
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
diff --git a/browser/main/global.styl b/browser/main/global.styl
index 9da7a596..fe52a1c7 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -12,6 +12,7 @@ body
   color textColor
   font-size fontSize
   font-weight 200
+  -webkit-font-smoothing antialiased
 
 button, input, select, textarea
   font-family DEFAULT_FONTS
diff --git a/browser/main/index.js b/browser/main/index.js
index 35e81177..d7ed7bfd 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -36,7 +36,7 @@ document.addEventListener('click', function (e) {
   if (infoPanel) infoPanel.style.display = 'none'
 })
 
-let el = document.getElementById('content')
+const el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)
 
 function notify (...args) {
@@ -44,7 +44,7 @@ function notify (...args) {
 }
 
 function updateApp () {
-  let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+  const index = dialog.showMessageBox(remote.getCurrentWindow(), {
     type: 'warning',
     message: 'Update Boostnote',
     detail: 'New Boostnote is ready to be installed.',
@@ -81,7 +81,7 @@ ReactDOM.render((
     </Router>
   </Provider>
 ), el, function () {
-  let loadingCover = document.getElementById('loadingCover')
+  const loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
 
   ipcRenderer.on('update-ready', function () {
diff --git a/browser/main/lib/AwsMobileAnalyticsConfig.js b/browser/main/lib/AwsMobileAnalyticsConfig.js
index 4c0e15b5..f10d0b66 100644
--- a/browser/main/lib/AwsMobileAnalyticsConfig.js
+++ b/browser/main/lib/AwsMobileAnalyticsConfig.js
@@ -4,6 +4,7 @@ const ConfigManager = require('browser/main/lib/ConfigManager')
 
 const remote = require('electron').remote
 const os = require('os')
+let mobileAnalyticsClient
 
 AWS.config.region = 'us-east-1'
 if (process.env.NODE_ENV === 'production' && ConfigManager.default.get().amaEnabled) {
@@ -13,7 +14,7 @@ if (process.env.NODE_ENV === 'production' && ConfigManager.default.get().amaEnab
 
   const validPlatformName = convertPlatformName(os.platform())
 
-  const mobileAnalyticsClient = new AMA.Manager({
+  mobileAnalyticsClient = new AMA.Manager({
     appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
     appTitle: 'xxxxxxxxxx',
     appVersionName: remote.app.getVersion().toString(),
diff --git a/browser/main/lib/Commander.js b/browser/main/lib/Commander.js
index 959de5f0..6eef62ee 100644
--- a/browser/main/lib/Commander.js
+++ b/browser/main/lib/Commander.js
@@ -13,10 +13,10 @@ function release (el) {
 
 function fire (command) {
   console.info('COMMAND >>', command)
-  let splitted = command.split(':')
-  let target = splitted[0]
-  let targetCommand = splitted[1]
-  let targetCallees = callees
+  const splitted = command.split(':')
+  const target = splitted[0]
+  const targetCommand = splitted[1]
+  const targetCallees = callees
     .filter((callee) => callee.name === target)
 
   targetCallees.forEach((callee) => {
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index fd374cf1..e200c855 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -6,8 +6,6 @@ const win = global.process.platform === 'win32'
 const electron = require('electron')
 const { ipcRenderer } = electron
 const consts = require('browser/lib/consts')
-const path = require('path')
-const fs = require('fs')
 
 let isInitialized = false
 
@@ -91,7 +89,11 @@ function get () {
       : 'default'
 
     if (config.editor.theme !== 'default') {
-      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+      if (config.editor.theme.startsWith('solarized')) {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+      } else {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+      }
     }
   }
 
@@ -99,13 +101,15 @@ function get () {
 }
 
 function set (updates) {
-  let currentConfig = get()
-  let newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
+  const currentConfig = get()
+  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
   if (newConfig.ui.theme === 'dark') {
     document.body.setAttribute('data-theme', 'dark')
+  } else if (newConfig.ui.theme === 'white') {
+    document.body.setAttribute('data-theme', 'white')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
@@ -117,12 +121,16 @@ function set (updates) {
     editorTheme.setAttribute('rel', 'stylesheet')
     document.head.appendChild(editorTheme)
   }
-  let newTheme = consts.THEMES.some((theme) => theme === newConfig.editor.theme)
+  const newTheme = consts.THEMES.some((theme) => theme === newConfig.editor.theme)
     ? newConfig.editor.theme
     : 'default'
 
   if (newTheme !== 'default') {
-    editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newTheme + '.css')
+    if (newTheme.startsWith('solarized')) {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+    } else {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newTheme + '.css')
+    }
   }
 
   ipcRenderer.send('config-renew', {
@@ -131,7 +139,7 @@ function set (updates) {
 }
 
 function assignConfigValues (originalConfig, rcConfig) {
-  let config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
+  const config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
   config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
   config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
   config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)
diff --git a/browser/main/lib/ZoomManager.js b/browser/main/lib/ZoomManager.js
index 463df222..a8903ca3 100644
--- a/browser/main/lib/ZoomManager.js
+++ b/browser/main/lib/ZoomManager.js
@@ -19,7 +19,7 @@ function setZoom (zoomFactor, noSave = false) {
 }
 
 function getZoom () {
-  let config = ConfigManager.get()
+  const config = ConfigManager.get()
 
   return config.zoom
 }
diff --git a/browser/main/lib/dataApi/copyImage.js b/browser/main/lib/dataApi/copyImage.js
index 8f7fa656..ae79f8fb 100644
--- a/browser/main/lib/dataApi/copyImage.js
+++ b/browser/main/lib/dataApi/copyImage.js
@@ -1,7 +1,5 @@
 const fs = require('fs')
 const path = require('path')
-const _ = require('lodash')
-const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
 
 /**
diff --git a/browser/main/lib/dataApi/createFolder.js b/browser/main/lib/dataApi/createFolder.js
index 9357e17c..05fcea37 100644
--- a/browser/main/lib/dataApi/createFolder.js
+++ b/browser/main/lib/dataApi/createFolder.js
@@ -23,7 +23,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function createFolder (storageKey, input) {
-  let rawStorages
   let targetStorage
   try {
     if (input == null) throw new Error('No input found.')
@@ -41,7 +40,7 @@ function createFolder (storageKey, input) {
       while (storage.folders.some((folder) => folder.key === key)) {
         key = keygen()
       }
-      let newFolder = {
+      const newFolder = {
         key,
         color: input.color,
         name: input.name
diff --git a/browser/main/lib/dataApi/createNote.js b/browser/main/lib/dataApi/createNote.js
index 29544ea6..91abdb08 100644
--- a/browser/main/lib/dataApi/createNote.js
+++ b/browser/main/lib/dataApi/createNote.js
@@ -66,7 +66,7 @@ function createNote (storageKey, input) {
           }
         }
       }
-      let noteData = Object.assign({}, input, {
+      const noteData = Object.assign({}, input, {
         key,
         createdAt: new Date(),
         updatedAt: new Date(),
diff --git a/browser/main/lib/dataApi/deleteFolder.js b/browser/main/lib/dataApi/deleteFolder.js
index c687382d..908677e1 100644
--- a/browser/main/lib/dataApi/deleteFolder.js
+++ b/browser/main/lib/dataApi/deleteFolder.js
@@ -19,7 +19,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function deleteFolder (storageKey, folderKey) {
-  let rawStorages
   let targetStorage
   try {
     targetStorage = findStorage(storageKey)
@@ -38,17 +37,17 @@ function deleteFolder (storageKey, folderKey) {
         })
     })
     .then(function deleteFolderAndNotes (data) {
-      let { storage, notes } = data
+      const { storage, notes } = data
       storage.folders = storage.folders
         .filter(function excludeTargetFolder (folder) {
           return folder.key !== folderKey
         })
 
-      let targetNotes = notes.filter(function filterTargetNotes (note) {
+      const targetNotes = notes.filter(function filterTargetNotes (note) {
         return note.folder === folderKey
       })
 
-      let deleteAllNotes = targetNotes
+      const deleteAllNotes = targetNotes
         .map(function deleteNote (note) {
           const notePath = path.join(storage.path, 'notes', note.key + '.cson')
           return sander.unlink(notePath)
diff --git a/browser/main/lib/dataApi/deleteNote.js b/browser/main/lib/dataApi/deleteNote.js
index 52af55ab..49498a30 100644
--- a/browser/main/lib/dataApi/deleteNote.js
+++ b/browser/main/lib/dataApi/deleteNote.js
@@ -1,5 +1,4 @@
 const resolveStorageData = require('./resolveStorageData')
-const _ = require('lodash')
 const path = require('path')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
@@ -14,7 +13,7 @@ function deleteNote (storageKey, noteKey) {
 
   return resolveStorageData(targetStorage)
     .then(function deleteNoteFile (storage) {
-      let notePath = path.join(storage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(storage.path, 'notes', noteKey + '.cson')
 
       try {
         sander.unlinkSync(notePath)
diff --git a/browser/main/lib/dataApi/init.js b/browser/main/lib/dataApi/init.js
index 67d853e0..7f81e90b 100644
--- a/browser/main/lib/dataApi/init.js
+++ b/browser/main/lib/dataApi/init.js
@@ -20,7 +20,7 @@ const CSON = require('@rokt33r/season')
  * 3. empty directory
  */
 function init () {
-  let fetchStorages = function () {
+  const fetchStorages = function () {
     let rawStorages
     try {
       rawStorages = JSON.parse(window.localStorage.getItem('storages'))
@@ -34,8 +34,8 @@ function init () {
       .map(resolveStorageData))
   }
 
-  let fetchNotes = function (storages) {
-    let findNotesFromEachStorage = storages
+  const fetchNotes = function (storages) {
+    const findNotesFromEachStorage = storages
       .map((storage) => {
         return resolveStorageNotes(storage)
           .then((notes) => {
diff --git a/browser/main/lib/dataApi/migrateFromV5Storage.js b/browser/main/lib/dataApi/migrateFromV5Storage.js
index be922731..b11e66e9 100644
--- a/browser/main/lib/dataApi/migrateFromV5Storage.js
+++ b/browser/main/lib/dataApi/migrateFromV5Storage.js
@@ -9,7 +9,7 @@ const sander = require('sander')
 function migrateFromV5Storage (storageKey, data) {
   let targetStorage
   try {
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
     if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
 
     targetStorage = _.find(cachedStorageList, {key: storageKey})
@@ -24,15 +24,15 @@ function migrateFromV5Storage (storageKey, data) {
 }
 
 function importAll (storage, data) {
-  let oldArticles = data.articles
-  let notes = []
+  const oldArticles = data.articles
+  const notes = []
   data.folders
     .forEach(function (oldFolder) {
       let folderKey = keygen()
       while (storage.folders.some((folder) => folder.key === folderKey)) {
         folderKey = keygen()
       }
-      let newFolder = {
+      const newFolder = {
         key: folderKey,
         name: oldFolder.name,
         color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
@@ -40,7 +40,7 @@ function importAll (storage, data) {
 
       storage.folders.push(newFolder)
 
-      let articles = oldArticles.filter((article) => article.FolderKey === oldFolder.key)
+      const articles = oldArticles.filter((article) => article.FolderKey === oldFolder.key)
       articles.forEach((article) => {
         let noteKey = keygen()
         let isUnique = false
@@ -59,7 +59,7 @@ function importAll (storage, data) {
         }
 
         if (article.mode === 'markdown') {
-          let newNote = {
+          const newNote = {
             tags: article.tags,
             createdAt: article.createdAt,
             updatedAt: article.updatedAt,
@@ -73,7 +73,7 @@ function importAll (storage, data) {
           }
           notes.push(newNote)
         } else {
-          let newNote = {
+          const newNote = {
             tags: article.tags,
             createdAt: article.createdAt,
             updatedAt: article.updatedAt,
diff --git a/browser/main/lib/dataApi/moveNote.js b/browser/main/lib/dataApi/moveNote.js
index da44211d..4580062e 100644
--- a/browser/main/lib/dataApi/moveNote.js
+++ b/browser/main/lib/dataApi/moveNote.js
@@ -20,7 +20,7 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
     .then(function saveNote (_oldStorage) {
       oldStorage = _oldStorage
       let noteData
-      let notePath = path.join(oldStorage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(oldStorage.path, 'notes', noteKey + '.cson')
       try {
         noteData = CSON.readFileSync(notePath)
       } catch (err) {
diff --git a/browser/main/lib/dataApi/renameStorage.js b/browser/main/lib/dataApi/renameStorage.js
index 3c82130d..78242bed 100644
--- a/browser/main/lib/dataApi/renameStorage.js
+++ b/browser/main/lib/dataApi/renameStorage.js
@@ -1,6 +1,5 @@
 const _ = require('lodash')
 const resolveStorageData = require('./resolveStorageData')
-const { findStorage } = require('browser/lib/findStorage')
 
 /**
  * @param {String} key
@@ -19,7 +18,7 @@ function renameStorage (key, name) {
     console.error(err)
     return Promise.reject(err)
   }
-  let targetStorage = _.find(cachedStorageList, {key: key})
+  const targetStorage = _.find(cachedStorageList, {key: key})
   if (targetStorage == null) return Promise.reject('Storage')
 
   targetStorage.name = name
diff --git a/browser/main/lib/dataApi/reorderFolder.js b/browser/main/lib/dataApi/reorderFolder.js
index 3ee9229e..9102438e 100644
--- a/browser/main/lib/dataApi/reorderFolder.js
+++ b/browser/main/lib/dataApi/reorderFolder.js
@@ -18,7 +18,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function reorderFolder (storageKey, oldIndex, newIndex) {
-  let rawStorages
   let targetStorage
   try {
     if (!_.isNumber(oldIndex)) throw new Error('oldIndex must be a number.')
diff --git a/browser/main/lib/dataApi/resolveStorageData.js b/browser/main/lib/dataApi/resolveStorageData.js
index e25ab16d..af040c5d 100644
--- a/browser/main/lib/dataApi/resolveStorageData.js
+++ b/browser/main/lib/dataApi/resolveStorageData.js
@@ -4,7 +4,7 @@ const CSON = require('@rokt33r/season')
 const migrateFromV6Storage = require('./migrateFromV6Storage')
 
 function resolveStorageData (storageCache) {
-  let storage = {
+  const storage = {
     key: storageCache.key,
     name: storageCache.name,
     type: storageCache.type,
@@ -13,7 +13,7 @@ function resolveStorageData (storageCache) {
 
   const boostnoteJSONPath = path.join(storageCache.path, 'boostnote.json')
   try {
-    let jsonData = CSON.readFileSync(boostnoteJSONPath)
+    const jsonData = CSON.readFileSync(boostnoteJSONPath)
     if (!_.isArray(jsonData.folders)) throw new Error('folders should be an array.')
     storage.folders = jsonData.folders
     storage.version = jsonData.version
@@ -28,7 +28,7 @@ function resolveStorageData (storageCache) {
     storage.version = '1.0'
   }
 
-  let version = parseInt(storage.version, 10)
+  const version = parseInt(storage.version, 10)
   if (version >= 1) {
     if (version > 1) {
       console.log('The repository version is newer than one of current app.')
diff --git a/browser/main/lib/dataApi/resolveStorageNotes.js b/browser/main/lib/dataApi/resolveStorageNotes.js
index 104b0c00..5684f06e 100644
--- a/browser/main/lib/dataApi/resolveStorageNotes.js
+++ b/browser/main/lib/dataApi/resolveStorageNotes.js
@@ -16,13 +16,13 @@ function resolveStorageNotes (storage) {
     }
     notePathList = []
   }
-  let notes = notePathList
+  const notes = notePathList
     .filter(function filterOnlyCSONFile (notePath) {
       return /\.cson$/.test(notePath)
     })
     .map(function parseCSONFile (notePath) {
       try {
-        let data = CSON.readFileSync(path.join(notesDirPath, notePath))
+        const data = CSON.readFileSync(path.join(notesDirPath, notePath))
         data.key = path.basename(notePath, '.cson')
         data.storage = storage.key
         return data
diff --git a/browser/main/lib/dataApi/updateFolder.js b/browser/main/lib/dataApi/updateFolder.js
index 6c6e587b..2a325c60 100644
--- a/browser/main/lib/dataApi/updateFolder.js
+++ b/browser/main/lib/dataApi/updateFolder.js
@@ -23,7 +23,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function updateFolder (storageKey, folderKey, input) {
-  let rawStorages
   let targetStorage
   try {
     if (input == null) throw new Error('No input found.')
@@ -37,7 +36,7 @@ function updateFolder (storageKey, folderKey, input) {
 
   return resolveStorageData(targetStorage)
     .then(function updateFolder (storage) {
-      let targetFolder = _.find(storage.folders, {key: folderKey})
+      const targetFolder = _.find(storage.folders, {key: folderKey})
       if (targetFolder == null) throw new Error('Target folder doesn\'t exist.')
       targetFolder.name = input.name
       targetFolder.color = input.color
diff --git a/browser/main/lib/dataApi/updateNote.js b/browser/main/lib/dataApi/updateNote.js
index cf3fc047..2fbd52c2 100644
--- a/browser/main/lib/dataApi/updateNote.js
+++ b/browser/main/lib/dataApi/updateNote.js
@@ -5,7 +5,7 @@ const CSON = require('@rokt33r/season')
 const { findStorage } = require('browser/lib/findStorage')
 
 function validateInput (input) {
-  let validatedInput = {}
+  const validatedInput = {}
 
   if (input.tags != null) {
     if (!_.isArray(input.tags)) validatedInput.tags = []
@@ -81,7 +81,7 @@ function updateNote (storageKey, noteKey, input) {
   return resolveStorageData(targetStorage)
     .then(function saveNote (storage) {
       let noteData
-      let notePath = path.join(storage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(storage.path, 'notes', noteKey + '.cson')
       try {
         noteData = CSON.readFileSync(notePath)
       } catch (err) {
diff --git a/browser/main/lib/mixpanel.js b/browser/main/lib/mixpanel.js
deleted file mode 100644
index 5fd54b90..00000000
--- a/browser/main/lib/mixpanel.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import store from 'browser/main/store'
-
-const _ = require('lodash')
-const keygen = require('browser/lib/keygen')
-const Mixpanel = require('mixpanel')
-const mixpanel = Mixpanel.init('7a0aca437d72dfd07cbcbf58d3b61f27', {key: 'fde4fd23f4d550f1b646bcd7d4374b1f'})
-const moment = require('moment')
-const electron = require('electron')
-
-function _getClientKey () {
-  let clientKey = localStorage.getItem('clientKey')
-  if (!_.isString(clientKey) || clientKey.length !== 40) {
-    clientKey = keygen(20)
-    _setClientKey(clientKey)
-  }
-
-  return clientKey
-}
-
-function _setClientKey (newKey) {
-  localStorage.setItem('clientKey', newKey)
-}
-
-function _fetch () {
-  let events
-  try {
-    events = JSON.parse(localStorage.getItem('events'))
-    if (!_.isArray(events)) throw new Error('events is not an array.')
-  } catch (err) {
-    console.warn(err)
-    events = []
-    localStorage.setItem('events', JSON.stringify(events))
-    console.info('Events cache initialzed')
-  }
-  return events
-}
-
-function _keep (name, properties) {
-  let events = _fetch()
-  properties.time = new Date()
-  events.push({
-    name,
-    properties
-  })
-  localStorage.setItem('events', JSON.stringify(events))
-}
-
-function _keepUnique (name, properties) {
-  let events = _fetch()
-  properties.time = new Date()
-  events = events.filter((event) => event.name !== name)
-  events.push({
-    name,
-    properties
-  })
-  localStorage.setItem('events', JSON.stringify(events))
-}
-
-function _flush () {
-  let events = _fetch()
-  let spliced = events.splice(0, 50)
-  localStorage.setItem('events', JSON.stringify(events))
-
-  if (spliced.length > 0) {
-    let parsedEvents = spliced
-      .filter((event) => {
-        if (!_.isObject(event)) return false
-        if (!_.isString(event.name)) return false
-        if (!_.isObject(event.properties)) return false
-        if (!moment(event.properties.time).isValid()) return false
-        if (new Date() - moment(event.properties.time).toDate() > 1000 * 3600 * 24 * 3) return false
-        return true
-      })
-      .map((event) => {
-        return {
-          event: event.name,
-          properties: event.properties
-        }
-      })
-
-    mixpanel.import_batch(parsedEvents, {}, (errs) => {
-      if (errs.length > 0) {
-        let events = _fetch()
-        events = events.concat(spliced)
-        localStorage.setItem('events', JSON.stringify(events))
-      } else {
-        _flush()
-      }
-    })
-
-    let state = store.getState()
-    mixpanel.people.set(_getClientKey(), {
-      storage_count: state.data.storageMap.size,
-      note_count: state.data.noteMap.size,
-      version: electron.remote.app.getVersion()
-    })
-  }
-}
-
-setInterval(_flush, 1000 * 60 * 60)
-
-function track (name, properties) {
-  switch (name) {
-    case 'MAIN_FOCUSED':
-      properties = Object.assign({}, properties, {
-        distinct_id: _getClientKey()
-      })
-      _keepUnique(name, properties)
-      break
-    default:
-      properties = Object.assign({}, properties, {
-        distinct_id: _getClientKey()
-      })
-      _keep(name, properties)
-  }
-}
-
-module.exports = {
-  _mp: mixpanel,
-  track
-}
diff --git a/browser/main/lib/modal.js b/browser/main/lib/modal.js
index 1964d52e..7a7a9c8c 100644
--- a/browser/main/lib/modal.js
+++ b/browser/main/lib/modal.js
@@ -16,7 +16,7 @@ class ModalBase extends React.Component {
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
     // Toggle overflow style on NoteList
-    let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+    const list = document.querySelector('.NoteList__list___browser-main-NoteList-')
     list.style.overflow = 'auto'
   }
 
@@ -34,14 +34,14 @@ class ModalBase extends React.Component {
   }
 }
 
-let el = document.createElement('div')
+const el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = ReactDOM.render(<ModalBase />, el)
+const modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }
   // Hide scrollbar by removing overflow when modal opens
-  let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+  const list = document.querySelector('.NoteList__list___browser-main-NoteList-')
   list.style.overflow = 'hidden'
   document.body.setAttribute('data-modal', 'open')
   modalBase.setState({component: component, componentProps: props, isHidden: false})
diff --git a/browser/main/modals/CreateFolderModal.js b/browser/main/modals/CreateFolderModal.js
index 1ac0ee97..e623ad8d 100644
--- a/browser/main/modals/CreateFolderModal.js
+++ b/browser/main/modals/CreateFolderModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -51,8 +52,8 @@ class CreateFolderModal extends React.Component {
   confirm () {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
-      let { storage } = this.props
-      let input = {
+      const { storage } = this.props
+      const input = {
         name: this.state.name.trim(),
         color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
       }
diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
index c5a308e3..45a8746c 100644
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -13,9 +13,9 @@ const electron = require('electron')
 const { remote } = electron
 
 function browseFolder () {
-  let dialog = remote.dialog
+  const dialog = remote.dialog
 
-  let defaultPath = remote.app.getPath('home')
+  const defaultPath = remote.app.getPath('home')
   return new Promise((resolve, reject) => {
     dialog.showOpenDialog({
       title: 'Select Directory',
@@ -55,7 +55,7 @@ class InitModal extends React.Component {
     } catch (err) {
       console.error(err)
     }
-    let newState = {
+    const newState = {
       isLoading: false
     }
     if (data != null) {
@@ -122,7 +122,7 @@ class InitModal extends React.Component {
             notes: data.notes
           })
 
-          let defaultSnippetNote = dataApi
+          const defaultSnippetNote = dataApi
             .createNote(data.storage.key, {
               type: 'SNIPPET_NOTE',
               folder: data.storage.folders[0].key,
@@ -147,12 +147,12 @@ class InitModal extends React.Component {
                 note: note
               })
             })
-          let defaultMarkdownNote = dataApi
+          const defaultMarkdownNote = dataApi
             .createNote(data.storage.key, {
               type: 'MARKDOWN_NOTE',
               folder: data.storage.folders[0].key,
               title: 'Welcome to Boostnote!',
-              content: '# Welcome to Boostnote! \n### _Click to edit this note._\n\n---\n\nBoostnote is an *open source* note-taking app. \nRepository is published on [GitHub](https://github.com/BoostIO/Boostnote), and tweeting everyday on [@Boostnoteapp](https://twitter.com/boostnoteapp)!\n\n## Features \n- [x] No internet or registration required. \n- [ ] Quick search and copy the content of note. macOS: <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> / windows: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> \n- [ ] Markdown & Snippet note. \n- [ ] Available for `vim` and `emacs` mode. \n- [ ] Choose your favorite theme on UI, Editor and Code Block! \n--- \n\n- Copy Codeblock on Markdown Preview.\n```javascript\nvar boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)\n```'
+              content: '# Welcome to Boostnote!\n## Click here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
             })
             .then((note) => {
               store.dispatch({
@@ -184,6 +184,12 @@ class InitModal extends React.Component {
     })
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -194,7 +200,7 @@ class InitModal extends React.Component {
     return (
       <div styleName='root'
         tabIndex='-1'
-        onKeyDown={this.props.close}
+        onKeyDown={(e) => this.handleKeyDown(e)}
       >
 
         <div styleName='header'>
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
index 4e794832..346fe920 100644
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -26,7 +26,7 @@ class NewNoteModal extends React.Component {
   handleMarkdownNoteButtonClick (e) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
         type: 'MARKDOWN_NOTE',
@@ -58,7 +58,7 @@ class NewNoteModal extends React.Component {
   handleSnippetNoteButtonClick (e) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props
 
     dataApi
       .createNote(storage, {
diff --git a/browser/main/modals/PreferencesModal/FolderItem.js b/browser/main/modals/PreferencesModal/FolderItem.js
index 5bd9d9f1..9d1cd08f 100644
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import ReactDOM from 'react-dom'
 import styles from './FolderItem.styl'
@@ -23,7 +24,7 @@ class FolderItem extends React.Component {
   }
 
   handleEditChange (e) {
-    let { folder } = this.state
+    const { folder } = this.state
 
     folder.name = this.refs.nameInput.value
     this.setState({
@@ -36,7 +37,7 @@ class FolderItem extends React.Component {
   }
 
   confirm () {
-    let { storage, folder } = this.props
+    const { storage, folder } = this.props
     dataApi
       .updateFolder(storage.key, folder.key, {
         color: this.state.folder.color,
@@ -162,7 +163,7 @@ class FolderItem extends React.Component {
   }
 
   handleDeleteConfirmButtonClick (e) {
-    let { storage, folder } = this.props
+    const { storage, folder } = this.props
     dataApi
       .deleteFolder(storage.key, folder.key)
       .then((data) => {
@@ -197,8 +198,8 @@ class FolderItem extends React.Component {
   }
 
   handleEditButtonClick (e) {
-    let { folder: propsFolder } = this.props
-    let { folder: stateFolder } = this.state
+    const { folder: propsFolder } = this.props
+    const { folder: stateFolder } = this.state
     const folder = Object.assign({}, stateFolder, propsFolder)
     this.setState({
       status: 'EDIT',
@@ -215,7 +216,7 @@ class FolderItem extends React.Component {
   }
 
   renderIdle () {
-    let { folder } = this.props
+    const { folder } = this.props
     return (
       <div styleName='folderItem'
         onDoubleClick={(e) => this.handleEditButtonClick(e)}
diff --git a/browser/main/modals/PreferencesModal/FolderList.js b/browser/main/modals/PreferencesModal/FolderList.js
index 0172dc10..8585f641 100644
--- a/browser/main/modals/PreferencesModal/FolderList.js
+++ b/browser/main/modals/PreferencesModal/FolderList.js
@@ -1,16 +1,17 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import dataApi from 'browser/main/lib/dataApi'
 import styles from './FolderList.styl'
 import store from 'browser/main/store'
 import FolderItem from './FolderItem'
-import { SortableContainer, arrayMove } from 'react-sortable-hoc'
+import { SortableContainer } from 'react-sortable-hoc'
 
 class FolderList extends React.Component {
   render () {
-    let { storage, hostBoundingBox } = this.props
+    const { storage, hostBoundingBox } = this.props
 
-    let folderList = storage.folders.map((folder, index) => {
+    const folderList = storage.folders.map((folder, index) => {
       return <FolderItem key={folder.key}
         folder={folder}
         storage={storage}
@@ -53,7 +54,7 @@ class SortableFolderListComponent extends React.Component {
   constructor (props) {
     super(props)
     this.onSortEnd = ({oldIndex, newIndex}) => {
-      let { storage } = this.props
+      const { storage } = this.props
       dataApi
         .reorderFolder(storage.key, oldIndex, newIndex)
         .then((data) => {
diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js
index 18ac31ff..9a15e79f 100644
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -41,7 +42,7 @@ class HotkeyTab extends React.Component {
   }
 
   handleSaveButtonClick (e) {
-    let newConfig = {
+    const newConfig = {
       hotkey: this.state.config.hotkey
     }
 
@@ -61,7 +62,7 @@ class HotkeyTab extends React.Component {
   }
 
   handleHotkeyChange (e) {
-    let { config } = this.state
+    const { config } = this.state
     config.hotkey = {
       toggleFinder: this.refs.toggleFinder.value,
       toggleMain: this.refs.toggleMain.value
@@ -80,13 +81,13 @@ class HotkeyTab extends React.Component {
   }
 
   render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
+    const keymapAlert = this.state.keymapAlert
+    const keymapAlertElement = keymapAlert != null
       ? <p className={`alert ${keymapAlert.type}`}>
         {keymapAlert.message}
       </p>
       : null
-    let { config } = this.state
+    const { config } = this.state
 
     return (
       <div styleName='root'>
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index 8503cdae..a3c64b35 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -68,7 +68,41 @@ class InfoTab extends React.Component {
   render () {
     return (
       <div styleName='root'>
-        <div styleName='header'>Info</div>
+
+        <div styleName='header--sub'>Community</div>
+        <div styleName='top'>
+          <ul styleName='list'>
+            <li>
+              <a href='https://github.com/BoostIO/Boostnote/issues'
+                onClick={(e) => this.handleLinkClick(e)}
+              >GitHub</a>
+            </li>
+            <li>
+              <a href='https://medium.com/boostnote'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Blog</a>
+            </li>
+            <li>
+              <a href='https://www.reddit.com/r/Boostnote/'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Reddit</a>
+            </li>
+            <li>
+              <a href='https://www.facebook.com/groups/boostnote'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Facebook Group</a>
+            </li>
+            <li>
+              <a href='https://twitter.com/boostnoteapp'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Twitter</a>
+            </li>
+          </ul>
+        </div>
+
+        <hr />
+
+        <div styleName='header--sub'>Info</div>
 
         <div styleName='top'>
           <div styleName='icon-space'>
@@ -81,31 +115,17 @@ class InfoTab extends React.Component {
             </div>
           </div>
         </div>
+
         <ul styleName='list'>
           <li>
             <a href='https://boostnote.io'
               onClick={(e) => this.handleLinkClick(e)}
             >Website</a>
           </li>
-          <li>
-            <a href='https://boostnote.paintory.com/'
-              onClick={(e) => this.handleLinkClick(e)}
-            >Boostnote Shop</a> : Products are shipped to all over the world 🌏
-          </li>
-          <li>
-            <a href='https://opencollective.com/boostnoteio'
-              onClick={(e) => this.handleLinkClick(e)}
-            >Crowdfunding</a> : Thank you for your support 🎉
-          </li>
-          <li>
-            <a href='https://github.com/BoostIO/Boostnote/issues'
-              onClick={(e) => this.handleLinkClick(e)}
-            >GitHub Issues</a> : We&apos;d love to hear your feedback 🙌
-          </li>
           <li>
             <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
               onClick={(e) => this.handleLinkClick(e)}
-            >Development</a> : Development configurations for Boostnote 🚀
+            >Development</a> : Development configurations for Boostnote.
           </li>
           <li styleName='cc'>
             Copyright (C) 2017 Maisin&Co.
@@ -114,7 +134,9 @@ class InfoTab extends React.Component {
             License: GPL v3
           </li>
         </ul>
-        <hr />
+
+        <hr styleName='separate-line' />
+
         <div styleName='policy'>Data collection policy</div>
         <div>We collect only the number of DAU for Boostnote and **DO NOT collect** any detail information such as your note content.</div>
         <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index cefb3abc..4e632682 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -42,6 +42,9 @@
     color #4E8EC6
     text-decoration none
 
+.separate-line
+  margin 40px 0
+
 .policy
   width 100%
   font-size 20px
diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
index 478e4c44..f2092835 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageItem.styl'
 import consts from 'browser/lib/consts'
@@ -19,8 +20,8 @@ class StorageItem extends React.Component {
   }
 
   handleNewFolderButtonClick (e) {
-    let { storage } = this.props
-    let input = {
+    const { storage } = this.props
+    const input = {
       name: 'Untitled',
       color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
     }
@@ -38,12 +39,12 @@ class StorageItem extends React.Component {
   }
 
   handleExternalButtonClick () {
-    let { storage } = this.props
+    const { storage } = this.props
     shell.showItemInFolder(storage.path)
   }
 
   handleUnlinkButtonClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Unlink Storage',
       detail: 'Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.',
@@ -51,7 +52,7 @@ class StorageItem extends React.Component {
     })
 
     if (index === 0) {
-      let { storage } = this.props
+      const { storage } = this.props
       dataApi.removeStorage(storage.key)
         .then(() => {
           store.dispatch({
@@ -66,7 +67,7 @@ class StorageItem extends React.Component {
   }
 
   handleLabelClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
     this.setState({
       isLabelEditing: true,
       name: storage.name
@@ -81,7 +82,7 @@ class StorageItem extends React.Component {
   }
 
   handleLabelBlur (e) {
-    let { storage } = this.props
+    const { storage } = this.props
     dataApi
       .renameStorage(storage.key, this.state.name)
       .then((_storage) => {
@@ -96,7 +97,7 @@ class StorageItem extends React.Component {
   }
 
   render () {
-    let { storage, hostBoundingBox } = this.props
+    const { storage, hostBoundingBox } = this.props
 
     return (
       <div styleName='root' key={storage.key}>
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.js b/browser/main/modals/PreferencesModal/StoragesTab.js
index 641e5e8c..e33bb0fd 100644
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StoragesTab.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -8,9 +9,9 @@ const electron = require('electron')
 const { shell, remote } = electron
 
 function browseFolder () {
-  let dialog = remote.dialog
+  const dialog = remote.dialog
 
-  let defaultPath = remote.app.getPath('home')
+  const defaultPath = remote.app.getPath('home')
   return new Promise((resolve, reject) => {
     dialog.showOpenDialog({
       title: 'Select Directory',
@@ -56,10 +57,10 @@ class StoragesTab extends React.Component {
   }
 
   renderList () {
-    let { data, boundingBox } = this.props
+    const { data, boundingBox } = this.props
 
     if (!boundingBox) { return null }
-    let storageList = data.storageMap.map((storage) => {
+    const storageList = data.storageMap.map((storage) => {
       return <StorageItem
         key={storage.key}
         storage={storage}
@@ -88,7 +89,7 @@ class StoragesTab extends React.Component {
     browseFolder()
       .then((targetPath) => {
         if (targetPath.length > 0) {
-          let { newStorage } = this.state
+          const { newStorage } = this.state
           newStorage.path = targetPath
           this.setState({
             newStorage
@@ -102,7 +103,7 @@ class StoragesTab extends React.Component {
   }
 
   handleAddStorageChange (e) {
-    let { newStorage } = this.state
+    const { newStorage } = this.state
     newStorage.name = this.refs.addStorageName.value
     newStorage.path = this.refs.addStoragePath.value
     this.setState({
@@ -117,7 +118,7 @@ class StoragesTab extends React.Component {
         path: this.state.newStorage.path
       })
       .then((data) => {
-        let { dispatch } = this.props
+        const { dispatch } = this.props
         dispatch({
           type: 'ADD_STORAGE',
           storage: data.storage,
diff --git a/browser/main/modals/PreferencesModal/Tab.styl b/browser/main/modals/PreferencesModal/Tab.styl
index 3b722cbf..e5fc48da 100644
--- a/browser/main/modals/PreferencesModal/Tab.styl
+++ b/browser/main/modals/PreferencesModal/Tab.styl
@@ -13,6 +13,10 @@ $tab--dark-text-color = #E5E5E5
   font-size 36px
   margin-bottom 60px
 
+.header--sub
+  font-size 36px
+  margin-bottom 20px
+
 body[data-theme="dark"]
   .header
     color $tab--dark-text-color
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index af120b94..eebb2e0c 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -119,8 +120,8 @@ class UiTab extends React.Component {
   }
 
   render () {
-    let UiAlert = this.state.UiAlert
-    let UiAlertElement = UiAlert != null
+    const UiAlert = this.state.UiAlert
+    const UiAlertElement = UiAlert != null
       ? <p className={`alert ${UiAlert.type}`}>
         {UiAlert.message}
       </p>
@@ -141,7 +142,8 @@ class UiTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >
-                <option value='default'>Light</option>
+                <option value='default'>Default</option>
+                <option value='white'>White</option>
                 <option value='dark'>Dark</option>
               </select>
             </div>
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index c47b2754..2fff0364 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import HotkeyTab from './HotkeyTab'
@@ -42,7 +43,7 @@ class Preferences extends React.Component {
 
   renderContent () {
     const { boundingBox } = this.state
-    let { dispatch, config, data } = this.props
+    const { dispatch, config, data } = this.props
 
     switch (this.state.currentTab) {
       case 'INFO':
@@ -94,18 +95,18 @@ class Preferences extends React.Component {
   }
 
   render () {
-    let content = this.renderContent()
+    const content = this.renderContent()
 
-    let tabs = [
+    const tabs = [
       {target: 'STORAGES', label: 'Storages'},
       {target: 'HOTKEY', label: 'Hotkey'},
       {target: 'UI', label: 'UI'},
-      {target: 'INFO', label: 'Info'},
+      {target: 'INFO', label: 'Community / Info'},
       {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
-    let navButtons = tabs.map((tab) => {
-      let isActive = this.state.currentTab === tab.target
+    const navButtons = tabs.map((tab) => {
+      const isActive = this.state.currentTab === tab.target
       return (
         <button styleName={isActive
             ? 'nav-button--active'
diff --git a/browser/main/modals/RenameFolderModal.js b/browser/main/modals/RenameFolderModal.js
index 09e86632..bb08f36d 100644
--- a/browser/main/modals/RenameFolderModal.js
+++ b/browser/main/modals/RenameFolderModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -48,7 +49,7 @@ class RenameFolderModal extends React.Component {
 
   confirm () {
     if (this.state.name.trim().length > 0) {
-      let { storage, folder } = this.props
+      const { storage, folder } = this.props
       dataApi
         .updateFolder(storage.key, folder.key, {
           name: this.state.name,
diff --git a/browser/main/store.js b/browser/main/store.js
index ac41b1d0..647d0ac9 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -27,8 +27,8 @@ function data (state = defaultDataMap(), action) {
 
       action.notes.some((note) => {
         if (note === undefined) return true
-        let uniqueKey = note.storage + '-' + note.key
-        let folderKey = note.storage + '-' + note.folder
+        const uniqueKey = note.storage + '-' + note.key
+        const folderKey = note.storage + '-' + note.folder
         state.noteMap.set(uniqueKey, note)
 
         if (note.isStarred) {
@@ -65,10 +65,10 @@ function data (state = defaultDataMap(), action) {
       return state
     case 'UPDATE_NOTE':
       {
-        let note = action.note
-        let uniqueKey = note.storage + '-' + note.key
-        let folderKey = note.storage + '-' + note.folder
-        let oldNote = state.noteMap.get(uniqueKey)
+        const note = action.note
+        const uniqueKey = note.storage + '-' + note.key
+        const folderKey = note.storage + '-' + note.folder
+        const oldNote = state.noteMap.get(uniqueKey)
 
         state = Object.assign({}, state)
         state.noteMap = new Map(state.noteMap)
@@ -110,7 +110,7 @@ function data (state = defaultDataMap(), action) {
           state.folderNoteMap.set(folderKey, folderNoteSet)
 
           if (oldNote != null) {
-            let oldFolderKey = oldNote.storage + '-' + oldNote.folder
+            const oldFolderKey = oldNote.storage + '-' + oldNote.folder
             let oldFolderNoteList = state.folderNoteMap.get(oldFolderKey)
             oldFolderNoteList = new Set(oldFolderNoteList)
             oldFolderNoteList.delete(uniqueKey)
@@ -119,8 +119,8 @@ function data (state = defaultDataMap(), action) {
         }
 
         if (oldNote != null) {
-          let discardedTags = _.difference(oldNote.tags, note.tags)
-          let addedTags = _.difference(note.tags, oldNote.tags)
+          const discardedTags = _.difference(oldNote.tags, note.tags)
+          const addedTags = _.difference(note.tags, oldNote.tags)
           if (discardedTags.length + addedTags.length > 0) {
             state.tagNoteMap = new Map(state.tagNoteMap)
 
@@ -156,12 +156,12 @@ function data (state = defaultDataMap(), action) {
       }
     case 'MOVE_NOTE':
       {
-        let originNote = action.originNote
-        let originKey = originNote.storage + '-' + originNote.key
-        let note = action.note
-        let uniqueKey = note.storage + '-' + note.key
-        let folderKey = note.storage + '-' + note.folder
-        let oldNote = state.noteMap.get(uniqueKey)
+        const originNote = action.originNote
+        const originKey = originNote.storage + '-' + originNote.key
+        const note = action.note
+        const uniqueKey = note.storage + '-' + note.key
+        const folderKey = note.storage + '-' + note.folder
+        const oldNote = state.noteMap.get(uniqueKey)
 
         state = Object.assign({}, state)
         state.noteMap = new Map(state.noteMap)
@@ -191,7 +191,7 @@ function data (state = defaultDataMap(), action) {
 
           // From folderNoteMap
           state.folderNoteMap = new Map(state.folderNoteMap)
-          let originFolderKey = originNote.storage + '-' + originNote.folder
+          const originFolderKey = originNote.storage + '-' + originNote.folder
           let originFolderList = state.folderNoteMap.get(originFolderKey)
           originFolderList = new Set(originFolderList)
           originFolderList.delete(originKey)
@@ -245,7 +245,7 @@ function data (state = defaultDataMap(), action) {
           state.folderNoteMap.set(folderKey, folderNoteList)
 
           if (oldNote != null) {
-            let oldFolderKey = oldNote.storage + '-' + oldNote.folder
+            const oldFolderKey = oldNote.storage + '-' + oldNote.folder
             let oldFolderNoteList = state.folderNoteMap.get(oldFolderKey)
             oldFolderNoteList = new Set(oldFolderNoteList)
             oldFolderNoteList.delete(uniqueKey)
@@ -255,8 +255,8 @@ function data (state = defaultDataMap(), action) {
 
         // Remove from old folder map
         if (oldNote != null) {
-          let discardedTags = _.difference(oldNote.tags, note.tags)
-          let addedTags = _.difference(note.tags, oldNote.tags)
+          const discardedTags = _.difference(oldNote.tags, note.tags)
+          const addedTags = _.difference(note.tags, oldNote.tags)
           if (discardedTags.length + addedTags.length > 0) {
             state.tagNoteMap = new Map(state.tagNoteMap)
 
@@ -292,8 +292,8 @@ function data (state = defaultDataMap(), action) {
       }
     case 'DELETE_NOTE':
       {
-        let uniqueKey = action.storageKey + '-' + action.noteKey
-        let targetNote = state.noteMap.get(uniqueKey)
+        const uniqueKey = action.storageKey + '-' + action.noteKey
+        const targetNote = state.noteMap.get(uniqueKey)
 
         state = Object.assign({}, state)
 
@@ -317,7 +317,7 @@ function data (state = defaultDataMap(), action) {
           }
 
           // From folderNoteMap
-          let folderKey = targetNote.storage + '-' + targetNote.folder
+          const folderKey = targetNote.storage + '-' + targetNote.folder
           state.folderNoteMap = new Map(state.folderNoteMap)
           let folderSet = state.folderNoteMap.get(folderKey)
           folderSet = new Set(folderSet)
@@ -340,18 +340,14 @@ function data (state = defaultDataMap(), action) {
         return state
       }
     case 'UPDATE_FOLDER':
-      {
-        state = Object.assign({}, state)
-        state.storageMap = new Map(state.storageMap)
-        state.storageMap.set(action.storage.key, action.storage)
-      }
+      state = Object.assign({}, state)
+      state.storageMap = new Map(state.storageMap)
+      state.storageMap.set(action.storage.key, action.storage)
       return state
     case 'REORDER_FOLDER':
-      {
-        state = Object.assign({}, state)
-        state.storageMap = new Map(state.storageMap)
-        state.storageMap.set(action.storage.key, action.storage)
-      }
+      state = Object.assign({}, state)
+      state.storageMap = new Map(state.storageMap)
+      state.storageMap.set(action.storage.key, action.storage)
       return state
     case 'DELETE_FOLDER':
       {
@@ -361,8 +357,8 @@ function data (state = defaultDataMap(), action) {
 
         // Get note list from folder-note map
         // and delete note set from folder-note map
-        let folderKey = action.storage.key + '-' + action.folderKey
-        let noteSet = state.folderNoteMap.get(folderKey)
+        const folderKey = action.storage.key + '-' + action.folderKey
+        const noteSet = state.folderNoteMap.get(folderKey)
         state.folderNoteMap = new Map(state.folderNoteMap)
         state.folderNoteMap.delete(folderKey)
 
@@ -375,7 +371,7 @@ function data (state = defaultDataMap(), action) {
         if (noteSet != null) {
           noteSet.forEach(function handleNoteKey (noteKey) {
             // Get note from noteMap
-            let note = state.noteMap.get(noteKey)
+            const note = state.noteMap.get(noteKey)
             if (note != null) {
               state.noteMap.delete(noteKey)
 
@@ -417,8 +413,8 @@ function data (state = defaultDataMap(), action) {
       state.folderNoteMap = new Map(state.folderNoteMap)
       state.tagNoteMap = new Map(state.tagNoteMap)
       action.notes.forEach((note) => {
-        let uniqueKey = note.storage + '-' + note.key
-        let folderKey = note.storage + '-' + note.folder
+        const uniqueKey = note.storage + '-' + note.key
+        const folderKey = note.storage + '-' + note.folder
         state.noteMap.set(uniqueKey, note)
 
         if (note.isStarred) {
@@ -451,7 +447,7 @@ function data (state = defaultDataMap(), action) {
       return state
     case 'REMOVE_STORAGE':
       state = Object.assign({}, state)
-      let storage = state.storageMap.get(action.storageKey)
+      const storage = state.storageMap.get(action.storageKey)
       state.storageMap = new Map(state.storageMap)
       state.storageMap.delete(action.storageKey)
 
@@ -459,17 +455,17 @@ function data (state = defaultDataMap(), action) {
       if (storage != null) {
         state.folderMap = new Map(state.folderMap)
         storage.folders.forEach((folder) => {
-          let folderKey = storage.key + '-' + folder.key
+          const folderKey = storage.key + '-' + folder.key
           state.folderMap.delete(folderKey)
         })
       }
 
       // Remove notes from noteMap and tagNoteMap
-      let storageNoteSet = state.storageNoteMap.get(action.storageKey)
+      const storageNoteSet = state.storageNoteMap.get(action.storageKey)
       state.storageNoteMap = new Map(state.storageNoteMap)
       state.storageNoteMap.delete(action.storageKey)
       if (storageNoteSet != null) {
-        let notes = storageNoteSet
+        const notes = storageNoteSet
           .map((noteKey) => state.noteMap.get(noteKey))
           .filter((note) => note != null)
 
@@ -477,7 +473,7 @@ function data (state = defaultDataMap(), action) {
         state.tagNoteMap = new Map(state.tagNoteMap)
         state.starredSet = new Set(state.starredSet)
         notes.forEach((note) => {
-          let noteKey = storage.key + '-' + note.key
+          const noteKey = storage.key + '-' + note.key
           state.noteMap.delete(noteKey)
           state.starredSet.delete(noteKey)
           note.tags.forEach((tag) => {
@@ -535,13 +531,13 @@ function status (state = defaultStatus, action) {
   return state
 }
 
-let reducer = combineReducers({
+const reducer = combineReducers({
   data,
   config,
   status,
   routing: routerReducer
 })
 
-let store = createStore(reducer)
+const store = createStore(reducer)
 
 export default store
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index e2b4ff3d..35131ff3 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -15,18 +15,18 @@ $ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
-$ui-noteList-backgroundColor = #F3F3F3
-$ui-noteDetail-backgroundColor = #F4F4F4
+$ui-noteList-backgroundColor = #FBFBFB
+$ui-noteDetail-backgroundColor = #FFFFFF
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
 $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
-// UI Button
-$ui-button-color = #939395
-$ui-button--hover-backgroundColor = #D9D9D9
-$ui-button--active-color = white
-$ui-button--active-backgroundColor = #D9D9D9
-$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+// UI Default Button
+$ui-button-default-color = #FBFBFB
+$ui-button-default--hover-backgroundColor = #2B8976
+$ui-button-default--active-color = white
+$ui-button-default--active-backgroundColor = #2B8976
+$ui-button-default--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
 $ui-tooltip-text-color = white
@@ -119,6 +119,22 @@ colorDangerButton()
   &:active:hover
     background-color $danger-button-background--active
 
+/**
+* SideNav
+*/
+SideNavFilter()
+  background-color $ui-button-default--active-backgroundColor
+  .counters
+    color $ui-button-default-color
+  .menu-button-label
+    color $ui-button-default-color
+  &:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
+  &:active, &:active:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
+    .menu-button-label
+      color #1EC38B
+
 /**
 * Nav
 */
@@ -129,13 +145,12 @@ navButtonColor()
   background-color transparent
   transition 0.15s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 20%)
     transition  0.15s
-    color $ui-text-color
+    color $ui-button-default-color
   &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-text-color
+    color $ui-button-default-color
     transition 0.15s
+
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -159,23 +174,53 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonLight()
+  position absolute
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
   border none
-  color $ui-button-color
+  color alpha($ui-button-color, 0.4)
   fill $ui-button-color
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transform scale(1.1)
+    transition 0.4s
+    color $ui-button-color
     .control-lockButton-tooltip
       opacity 1
 
-// Dark theme
+// White theme
+$ui-white-noteList-backgroundColor = #F3F3F3
+$ui-white-noteDetail-backgroundColor = #F4F4F4
+
+/**
+* Nav
+*/
+navWhiteButtonColor()
+  border none
+  color $ui-button-color
+  background-color transparent
+  transition 0.15s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    transition 0.15s
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = #F6F6F6
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #D9D9D9
+$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+
+/******* Dark theme ********/
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1E2124
@@ -233,12 +278,10 @@ topBarButtonDark()
   border-color $ui-dark-borderColor
   color $ui-dark-topbar-button-color
   &:hover
-    background-color $dark-default-button-background--hover
     color $ui-dark-tooltip-text-color
   &:active
     border-color $ui-dark-button--focus-borderColor
   &:active:hover
-    background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-tooltip-text-color
   &:focus
     border-color $ui-button--focus-borderColor
diff --git a/docs/build.md b/docs/build.md
index 6daaca18..8dced1be 100644
--- a/docs/build.md
+++ b/docs/build.md
@@ -1,5 +1,5 @@
 # Build
-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), and [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md).
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), and [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md).
 
 ## Environments
 * npm: 4.x
@@ -53,3 +53,32 @@ grunt pre-build
 You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed.
 
 If you find it necessary, you can use codesign or authenticode with this executable.
+
+## Make own distribution packages (deb, rpm)
+
+Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora).
+
+> Note: You can create both `.deb` and `.rpm` in a single environment.
+
+After installing the supported version of `node` and `npm`, install build dependency packages.
+
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+Then execute `grunt build`.
+
+```
+$ grunt build
+```
+
+You will find `.deb` and `.rpm` in the `dist` directory.
diff --git a/docs/debug.md b/docs/debug.md
index 6502cb51..f45af58f 100644
--- a/docs/debug.md
+++ b/docs/debug.md
@@ -1,5 +1,5 @@
 # How to debug Boostnote (Electron app)
-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), and [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md)
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), and [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md).
 
 Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome.
 
diff --git a/docs/fr/build.md b/docs/fr/build.md
new file mode 100644
index 00000000..0d718742
--- /dev/null
+++ b/docs/fr/build.md
@@ -0,0 +1,83 @@
+# Build
+Cette page est également disponible en [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), et en [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md).
+
+## Environnements
+* npm: 4.x
+* node: 7.x
+
+Il est conseillé d'utiliser `npm v4.x` car `$ grunt pre-build` ne marche pas sur la `v5.x`.
+
+## Développement
+
+Webpack HMR est utilisé pour développer Boostnote.
+En utilisant les commandes suivantes à la racine du projet, cela va démarrer Boostnote avec les configurations par défaut.
+
+Installez les paquets requis à l'aide de `yarn`.
+
+```
+$ yarn
+```
+Build et start
+
+```
+$ yarn run dev-start
+```
+
+Cette commande lance `yarn run webpack` et `yarn run hot` en parallèle. Cela revient au même que si on utilisait ces deux commandes dans 2 terminaux.
+
+La commande `webpack` va surveiller les changements de code et les appliquer automatiquement.
+
+Si l'erreur suivante apparait : `Failed to load resource: net::ERR_CONNECTION_REFUSED`, relancez Boostnote.
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
+
+> ### Notice
+> Il y a certains cas où vous voudrez relancer l'application manuellement.
+> 1. Quand vous éditez la méthode constructeur dans un composant
+> 2. Quand vous ajoutez une nouvelle classe css. (Comme pour 1: la classe est réécrite pour chaque composant. Le process intervient dans la méthode constructeur)
+
+## Déploiement
+
+On utilise Grunt pour le déploiement automatique.
+Vous pouvez build le programme en utilisant `grunt`. Cependant, nous ne recommandons pas cette méthode car la task par défaut inclut codesign et authenticode.
+
+Nous avons donc préparé un script séparé qui va rendre un fichier exécutable.
+
+Le build ne fonctionne pas sur `npm v5.3.0`. Il faut donc utiliser `npm v5.2.0` quand vous faites le build.
+
+```
+grunt pre-build
+```
+Vous trouverez l'exécutable dans le dossier `dist`.
+Note : l'auto updater ne marchera pas car l'application n'est pas signée.
+
+Si vous trouvez ça nécessaire, vous pouvez utiliser codesign ou authenticode avec cet exécutable.
+
+## Faire un paquet (deb, rpm)
+
+Les paquets sont créés en exécutant `grunt build` sur une plateforme Linux (e.g. Ubuntu, Fedora).
+
+> Note: Vous pouvez créer à la fois un `.deb` et un `.rpm` dans un seul et même environnement.
+
+Après avoir installé la version supportée de `node` et de `npm`, installer les paquets de builds.
+
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+Puis exécutez `grunt build`.
+
+```
+$ grunt build
+```
+
+Vous trouverez le `.deb` et le `.rpm` dans le dossier `dist`.
diff --git a/docs/fr/debug.md b/docs/fr/debug.md
new file mode 100644
index 00000000..9395e4f9
--- /dev/null
+++ b/docs/fr/debug.md
@@ -0,0 +1,22 @@
+# Comment débugger Boostnote (Application Electron)
+Cette page est également disponible en [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), et en [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md)
+
+Boostnote est une application Electron donc basée sur Chromium. Il est possible d'utiliser les `Developer Tools` comme dans Google Chrome.
+
+Vous pouvez utiliser les `Developer Tools` de la façon suivante :
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+Les `Developer Tools` ressemblent à ça :
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+Quand une erreur arrive, les messages d'erreurs sont affichés dans la `console`.
+
+## Debugging
+Par exemple, vous pouvez utiliser le `debugger` pour placer un point d'arrêt dans le code de la façon suivante:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+C'est une façon comme une autre de faire, vous pouvez trouver une façon de débugger que vous trouverez plus adaptée.
+
+## Références
+* [Documentation officiel de Google Chrome sur le debugging](https://developer.chrome.com/devtools)
\ No newline at end of file
diff --git a/docs/jp/build.md b/docs/jp/build.md
index 0e7270f1..4d0fab33 100644
--- a/docs/jp/build.md
+++ b/docs/jp/build.md
@@ -46,3 +46,32 @@ grunt pre-build
 実行ファイルは`dist`から見つかります。この場合、認証されていないため、自動アップデーターは使えません。
 
 必要であれば、この実行ファイルからCodesignやAuthenticodeなどの署名ができます。
+
+## ディストリビューション用パッケージ (deb, rpm)
+
+ディストリビューション用パッケージはLinuxプラットフォーム(Ubuntu や Fedora)上で `grunt build` を実行する事で作成されます。
+
+> 一つの環境で `.deb` と `.rpm` の両方を作成する事が出来ます。
+
+
+対応するバージョンの `node` と `npm` をインストールした後、必要なパッケージをインストールします。
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+`grunt build` を実行します。
+
+```
+$ grunt build
+```
+
+`.deb` と `.rpm` は `dist` 配下に作成されます。
diff --git a/gruntfile.js b/gruntfile.js
index 1d6bc3ce..5683adda 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -50,6 +50,25 @@ module.exports = function (grunt) {
         src: path.join(__dirname, 'dist', 'Boostnote-linux-x64'),
         dest: path.join(__dirname, 'dist')
       }
+    },
+    'electron-installer-redhat': {
+      app: {
+        options: {
+          name: 'boostnote',
+          productName: 'Boostnote',
+          genericName: 'Boostnote',
+          productDescription: 'The opensource note app for developer.',
+          arch: 'x86_64',
+          categories: [
+            'Development',
+            'Utility'
+          ],
+          icon: path.join(__dirname, 'resources/app.png'),
+          bin: 'Boostnote'
+        },
+        src: path.join(__dirname, 'dist', 'Boostnote-linux-x64'),
+        dest: path.join(__dirname, 'dist')
+      }
     }
   }
 
@@ -57,6 +76,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-electron-installer')
   if (!WIN) {
     grunt.loadNpmTasks('grunt-electron-installer-debian')
+    grunt.loadNpmTasks('grunt-electron-installer-redhat')
   }
 
   grunt.registerTask('compile', function () {
@@ -244,7 +264,7 @@ module.exports = function (grunt) {
         grunt.task.run(['compile', 'pack:osx', 'codesign', 'create-osx-installer', 'zip:osx'])
         break
       case 'linux':
-        grunt.task.run(['compile', 'pack:linux', 'electron-installer-debian'])
+        grunt.task.run(['compile', 'pack:linux', 'electron-installer-debian', 'electron-installer-redhat'])
         break
     }
   })
diff --git a/lib/main-menu.js b/lib/main-menu.js
index 3125d097..3adc323e 100644
--- a/lib/main-menu.js
+++ b/lib/main-menu.js
@@ -18,6 +18,15 @@ const boost = macOS
       {
         type: 'separator'
       },
+      {
+        label: 'Preferences',
+        click () {
+          mainWindow.webContents.send('side:preferences')
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         label: 'Hide Boostnote',
         accelerator: 'Command+H',
@@ -45,6 +54,15 @@ const boost = macOS
   : {
     label: 'Boostnote',
     submenu: [
+      {
+        label: 'Preferences',
+        click () {
+          mainWindow.webContents.send('side:preferences')
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         role: 'quit',
         accelerator: 'Control+Q'
@@ -132,6 +150,13 @@ const file = {
 if (LINUX) {
   file.submenu.push({
     type: 'separator'
+  }, {
+    label: 'Preferences',
+    click () {
+      mainWindow.webContents.send('side:preferences')
+    }
+  }, {
+    type: 'separator'
   }, {
     role: 'quit',
     accelerator: 'Control+Q'
diff --git a/lib/main-window.js b/lib/main-window.js
index 9ea868d9..5c0090fc 100644
--- a/lib/main-window.js
+++ b/lib/main-window.js
@@ -61,8 +61,12 @@ if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon')
     mainWindow.removeAllListeners()
   })
 } else {
+  mainWindow.on('close', function () {
+    storeWindowSize()
+  })
+
   app.on('window-all-closed', function () {
-    quitApp()
+    app.quit()
   })
 }
 
diff --git a/lib/main.html b/lib/main.html
index 4c10fcac..735f8120 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -53,6 +53,10 @@
     font-weight: 100;
     color: #888;
   }
+  .CodeEditor {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
   </style>
 </head>
 <body>
@@ -67,6 +71,7 @@
   <script src="../node_modules/codemirror/mode/meta.js"></script>
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
+  <script src="../node_modules/codemirror/addon/mode/simple.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/keymap/emacs.js"></script>
diff --git a/package.json b/package.json
index 0f7456d2..29911641 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "boost",
   "productName": "Boostnote",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "main": "index.js",
   "description": "Boostnote",
   "license": "GPL-3.0",
@@ -16,7 +16,7 @@
     "dev-start": "concurrently --kill-others \"npm run webpack\" \"npm run hot\""
   },
   "config": {
-    "electron-version": "1.2.8"
+    "electron-version": "1.6.15"
   },
   "repository": {
     "type": "git",
@@ -67,17 +67,16 @@
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",
     "markdown-it-imsize": "^2.0.1",
-    "markdown-it-kbd": "^1.1.0",
+    "markdown-it-kbd": "^1.1.1",
     "markdown-it-multimd-table": "^2.0.1",
     "markdown-it-named-headers": "^0.0.4",
     "markdown-it-plantuml": "^0.3.0",
     "md5": "^2.0.0",
     "mdurl": "^1.0.1",
-    "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
     "node-ipc": "^8.1.0",
     "raphael": "^2.2.7",
-    "react": "^15.0.2",
+    "react": "^15.5.4",
     "react-codemirror": "^0.3.0",
     "react-dom": "^15.0.2",
     "react-redux": "^4.4.5",
@@ -104,7 +103,7 @@
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^1.2.8",
+    "electron": "^1.6.15",
     "eslint": "^3.13.1",
     "eslint-config-standard": "^6.2.1",
     "eslint-config-standard-jsx": "^3.2.0",
@@ -130,7 +129,8 @@
     "webpack-dev-server": "^1.12.0"
   },
   "optionalDependencies": {
-    "grunt-electron-installer-debian": "^0.2.0"
+    "grunt-electron-installer-debian": "^0.2.0",
+    "grunt-electron-installer-redhat": "^0.3.1"
   },
   "optional": false,
   "ava": {
diff --git a/readme.md b/readme.md
index 380a4416..165cb40b 100644
--- a/readme.md
+++ b/readme.md
@@ -1,12 +1,12 @@
 New:zap:
 
-[Android and iOS apps](https://github.com/BoostIO/Boostnote-mobile) are released!
+Open sourcing our [Android and iOS apps](https://github.com/BoostIO/Boostnote-mobile)!
 
 ![Boostnote app screenshot](./resources/repository/top.png)
 
 <h4 align="center">Note-taking app for programmers. </h4>
-<h5 align="center">Apps available for Mac, Windows, Linux, Android and iOS!</h5>
-<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
+<h5 align="center">Apps available for Mac, Windows, Linux, Android and iOS.</h5>
+<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules.</h5>
 
 [![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
@@ -14,21 +14,26 @@ New:zap:
 - [Rokt33r](https://github.com/rokt33r)
 - [sota1235](https://github.com/sota1235)
 - [Kohei TAKATA](https://github.com/kohei-takata)
-- [asmsuechan](https://github.com/asmsuechan)
-- [Kazu Yokomizo](https://github.com/kazup01)
+- [Sosuke](https://github.com/sosukesuzuki)
+- [Kazz](https://github.com/kazup01)
 
 ## Contributors
-[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
+Thank you to all the people who already contributed to Boostnote!
+
+<a href="https://github.com/BoostIO/Boostnote/graphs/contributors"><img src="https://opencollective.com/boostnoteio/contributors.svg?width=890" /></a>
+
+## Supporting Boostnote
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
 
 ## Slack Group
 Let's talk about Boostnote! <br>
-[Join us](https://join.slack.com/t/boostnote-group/shared_invite/enQtMjU5NTUwNjcwMjkyLWI3N2I1YWIzNWRlZDZmZjVlYzRiNDc1YTcxZWNmY2UyZjc3MTQwMDUxMzAxZjg0NjNmZmIwNDFhMDkwZDlmZDc)
+[Join us](https://join.slack.com/t/boostnote-group/shared_invite/enQtMjc2MDM0MDEyODk2LThlZDlhYmYwMjdkMmJjMGM5MGFiMGJmNzk5ZTdhNzFhMmNmMDFlY2M2YTE1MTZkOThiOGZmNTI3YzJiOTBhMTQ)
 
 ## More Information
 * [Website](https://boostnote.io)
-* [10hz](https://boostnote.io/team/) : Boostnote for the creative hacker teams. Share your markdown notes and snippets instantly with your team. **We will release it at October!** 🏃💨
-* [Support us via OpenCollective](https://opencollective.com/boostnoteio) : Thank you for your support 🎉
-* [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
+* [Subscribe to the Newsletter](https://boostnote.io/#community): Get updates on Boostnote progress. No spam, ever :)
+* [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md): Development configurations for Boostnote.
 * Copyright (C) 2017 Maisin&Co.
 
 ## License
diff --git a/resources/fonts/Lato-Black.ttf b/resources/fonts/Lato-Black.ttf
new file mode 100644
index 00000000..3f7819f6
Binary files /dev/null and b/resources/fonts/Lato-Black.ttf differ
diff --git a/resources/fonts/Lato-Black.woff b/resources/fonts/Lato-Black.woff
new file mode 100644
index 00000000..a0ab25e9
Binary files /dev/null and b/resources/fonts/Lato-Black.woff differ
diff --git a/resources/fonts/Lato-Black.woff2 b/resources/fonts/Lato-Black.woff2
new file mode 100644
index 00000000..3ee7cd44
Binary files /dev/null and b/resources/fonts/Lato-Black.woff2 differ
diff --git a/resources/icon/icon-all-active.svg b/resources/icon/icon-all-active.svg
new file mode 100644
index 00000000..3e3ade1c
--- /dev/null
+++ b/resources/icon/icon-all-active.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-all</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-112.000000, -289.000000)">
+            <g id="icon-all" transform="translate(109.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="book" transform="translate(4.000000, 2.500000)" stroke="#1EC38B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,13.125 C0,12.0894661 0.839466094,11.25 1.875,11.25 L12,11.25" id="Shape"></path>
+                    <path d="M1.875,0 L12,0 L12,15 L1.875,15 C0.839466094,15 0,14.1605339 0,13.125 L0,1.875 C0,0.839466094 0.839466094,3.33066907e-16 1.875,0 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-all.svg b/resources/icon/icon-all.svg
new file mode 100644
index 00000000..1db75a98
--- /dev/null
+++ b/resources/icon/icon-all.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-all</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-86.000000, -289.000000)">
+            <g id="icon-all" transform="translate(83.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="book" transform="translate(4.000000, 2.500000)" stroke="#8A8C8D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,13.125 C0,12.0894661 0.839466094,11.25 1.875,11.25 L12,11.25" id="Shape"></path>
+                    <path d="M1.875,0 L12,0 L12,15 L1.875,15 C0.839466094,15 0,14.1605339 0,13.125 L0,1.875 C0,0.839466094 0.839466094,3.33066907e-16 1.875,0 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-column-list.svg b/resources/icon/icon-column-list.svg
new file mode 100644
index 00000000..e8f04dad
--- /dev/null
+++ b/resources/icon/icon-column-list.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="10px" viewBox="0 0 14 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-column-list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-461.000000, -199.000000)">
+            <g id="icon-column-list" transform="translate(458.000000, 194.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-justify" transform="translate(4.000000, 6.000000)" stroke="#8A8C8D" stroke-width="1.33333333" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12,2.76923077 L0,2.76923077" id="Shape"></path>
+                    <path d="M12,0 L0,0" id="Shape"></path>
+                    <path d="M12,5.53846154 L0,5.53846154" id="Shape"></path>
+                    <path d="M12,8.30769231 L0,8.30769231" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-column.svg b/resources/icon/icon-column.svg
new file mode 100644
index 00000000..fa5f46a7
--- /dev/null
+++ b/resources/icon/icon-column.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-column</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-440.000000, -198.000000)">
+            <g id="icon-column" transform="translate(436.000000, 194.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="server" transform="translate(5.000000, 5.000000)" stroke="#8A8C8D" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="0" width="10" height="4" rx="1"></rect>
+                    <rect id="Rectangle-path" x="0" y="6" width="10" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-down.svg b/resources/icon/icon-down.svg
new file mode 100644
index 00000000..2914499c
--- /dev/null
+++ b/resources/icon/icon-down.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-191.000000, -325.000000)">
+            <g id="icon-down" transform="translate(186.000000, 318.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="chevron-right" transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) translate(8.000000, 6.000000)" stroke-linecap="round" stroke-width="1.33333333" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 8 4 4 0 0"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-info-24.svg b/resources/icon/icon-info-24.svg
new file mode 100644
index 00000000..28b2afb5
--- /dev/null
+++ b/resources/icon/icon-info-24.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-info-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1431.000000, -144.000000)">
+            <g id="icon-info-24" transform="translate(1429.000000, 142.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="info" transform="translate(3.000000, 3.000000)">
+                    <circle id="Oval" stroke="#8A8C8D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" cx="9" cy="9" r="9"></circle>
+                    <path d="M9,14.1428571 L9,9" id="Shape" stroke="#8A8C8D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#8A8C8D" cx="9" cy="5.14285714" r="1.28571429"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-info.svg b/resources/icon/icon-info.svg
new file mode 100644
index 00000000..b7ac5bb1
--- /dev/null
+++ b/resources/icon/icon-info.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1440.000000, -152.000000)">
+            <g id="icon-info" transform="translate(1439.000000, 151.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="info" transform="translate(2.000000, 2.000000)">
+                    <circle id="Oval" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" cx="8" cy="8" r="8"></circle>
+                    <path d="M8,12.5714286 L8,8" id="Shape" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#8A8C8D" cx="8" cy="4.57142857" r="1.14285714"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-list-active.svg b/resources/icon/icon-list-active.svg
new file mode 100644
index 00000000..5da16c7c
--- /dev/null
+++ b/resources/icon/icon-list-active.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-list-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -175.000000)">
+            <g id="icon-list-active" transform="translate(84.000000, 172.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-left" transform="translate(1.000000, 4.000000)" stroke="#1EC38B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14,4 L0,4" id="Shape"></path>
+                    <path d="M18,0 L0,0" id="Shape"></path>
+                    <path d="M18,8 L0,8" id="Shape"></path>
+                    <path d="M14,12 L0,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-list.svg b/resources/icon/icon-list.svg
new file mode 100644
index 00000000..41ca8a4d
--- /dev/null
+++ b/resources/icon/icon-list.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -155.000000)">
+            <g id="icon-list" transform="translate(84.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-left" transform="translate(1.000000, 4.000000)" stroke="#8A8C8D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14,4 L0,4" id="Shape"></path>
+                    <path d="M18,0 L0,0" id="Shape"></path>
+                    <path d="M18,8 L0,8" id="Shape"></path>
+                    <path d="M14,12 L0,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-lock.svg b/resources/icon/icon-lock.svg
new file mode 100644
index 00000000..e4ff775f
--- /dev/null
+++ b/resources/icon/icon-lock.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-lock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1463.000000, -309.000000)">
+            <g id="icon-lock" transform="translate(1461.000000, 308.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="lock" transform="translate(3.000000, 2.000000)" stroke="#1EC38B" stroke-width="1.55555556" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="7.2" width="14" height="8.8" rx="1.55555556"></rect>
+                    <path d="M3.11111111,7.2 L3.11111111,4 C3.11111111,1.790861 4.85222597,1.24344979e-15 7,8.8817842e-16 C9.14777403,1.77635684e-16 10.8888889,1.790861 10.8888889,4 L10.8888889,7.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-newnote.svg b/resources/icon/icon-newnote.svg
new file mode 100644
index 00000000..2daac352
--- /dev/null
+++ b/resources/icon/icon-newnote.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-newnote3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-448.000000, -153.000000)">
+            <g id="icon-newnote3" transform="translate(446.000000, 151.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="edit" transform="translate(3.000000, 3.000000)" stroke="#8A8C8D" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12.6,8.862 L12.6,12.6 C12.6,13.3731986 11.9731986,14 11.2,14 L1.4,14 C0.62680135,14 0,13.3731986 0,12.6 L0,2.8 C-1.55431223e-16,2.02680135 0.62680135,1.4 1.4,1.4 L5.138,1.4" id="Shape"></path>
+                    <polygon id="Shape" points="11.2 0 14 2.8 7 9.8 4.2 9.8 4.2 7"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-note-code.svg b/resources/icon/icon-note-code.svg
new file mode 100644
index 00000000..4dd832e7
--- /dev/null
+++ b/resources/icon/icon-note-code.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-note-code</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-344.000000, -267.000000)">
+            <g id="icon-note-code" transform="translate(340.000000, 265.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="file-code" transform="translate(5.000000, 3.500000)">
+                    <path d="M6.25,0 L1.25,0 C0.559644063,0 0,0.582029825 0,1.3 L0,11.7 C0,12.4179702 0.559644063,13 1.25,13 L8.75,13 C9.44035594,13 10,12.4179702 10,11.7 L10,3.9 L6.25,0 Z" id="Shape" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <polyline id="Shape" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" points="6.25 0 6.25 3.9 10 3.9"></polyline>
+                    <path d="M6.62135922,7.5 L5.34466019,8.60504202 L5.34466019,8.60504202 C5.17990298,8.747647 5.16194505,8.9968133 5.30455003,9.16157051 C5.31694041,9.17588561 5.3303451,9.1892903 5.34466019,9.20168067 L5.41240363,9.26031575 L5.41240363,9.26031575 C5.57137564,9.39791337 5.80726514,9.39791337 5.96623715,9.26031575 L7.63036872,7.81993296 L7.63036872,7.81993296 C7.80706281,7.66699605 7.82632182,7.39977733 7.67338492,7.22308324 C7.66009684,7.207731 7.64572097,7.19335512 7.63036872,7.18006704 L5.96623715,5.73968425 L5.96623715,5.73968425 C5.80726514,5.60208663 5.57137564,5.60208663 5.41240363,5.73968425 L5.34466019,5.79831933 L5.34466019,5.79831933 C5.17990298,5.94092431 5.16194505,6.19009061 5.30455003,6.35484782 C5.31694041,6.36916292 5.3303451,6.38256761 5.34466019,6.39495798 L6.62135922,7.5 Z" id="Shape" fill="#8A8C8D" fill-rule="nonzero"></path>
+                    <path d="M2.36963128,7.81993296 L4.03376285,9.26031575 L4.03376285,9.26031575 C4.19273486,9.39791337 4.42862436,9.39791337 4.58759637,9.26031575 L4.65533981,9.20168067 L4.65533981,9.20168067 C4.82009702,9.05907569 4.83805495,8.80990939 4.69544997,8.64515218 C4.68305959,8.63083708 4.6696549,8.61743239 4.65533981,8.60504202 L3.37864078,7.5 L4.65533981,6.39495798 L4.65533981,6.39495798 C4.82009702,6.252353 4.83805495,6.0031867 4.69544997,5.83842949 C4.68305959,5.82411439 4.6696549,5.8107097 4.65533981,5.79831933 L4.58759637,5.73968425 L4.58759637,5.73968425 C4.42862436,5.60208663 4.19273486,5.60208663 4.03376285,5.73968425 L2.36963128,7.18006704 L2.36963128,7.18006704 C2.19293719,7.33300395 2.17367818,7.60022267 2.32661508,7.77691676 C2.33990316,7.792269 2.35427903,7.80664488 2.36963128,7.81993296 Z" id="Shape" fill="#8A8C8D" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-note-text.svg b/resources/icon/icon-note-text.svg
new file mode 100644
index 00000000..3fb972b1
--- /dev/null
+++ b/resources/icon/icon-note-text.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-note-text</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-323.000000, -266.000000)">
+            <g id="icon-note-text" transform="translate(319.000000, 264.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="file-text" transform="translate(5.000000, 3.500000)" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M6.25,0 L1.25,0 C0.559644063,0 0,0.582029825 0,1.3 L0,11.7 C0,12.4179702 0.559644063,13 1.25,13 L8.75,13 C9.44035594,13 10,12.4179702 10,11.7 L10,3.9 L6.25,0 Z" id="Shape"></path>
+                    <polyline id="Shape" points="6.25 0 6.25 3.9 10 3.9"></polyline>
+                    <path d="M7.5,7.15 L2.5,7.15" id="Shape"></path>
+                    <path d="M7.5,9.75 L2.5,9.75" id="Shape"></path>
+                    <polyline id="Shape" points="3.75 4.55 3.125 4.55 2.5 4.55"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-plus.svg b/resources/icon/icon-plus.svg
new file mode 100644
index 00000000..062fac29
--- /dev/null
+++ b/resources/icon/icon-plus.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-plus</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-242.000000, -318.000000)">
+            <g id="icon-plus" transform="translate(239.000000, 315.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="plus" transform="translate(4.000000, 4.000000)" stroke="#8A8C8D" stroke-width="1.71428571" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M6,0 L6,12" id="Shape"></path>
+                    <path d="M0,6 L12,6" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-right.svg b/resources/icon/icon-right.svg
new file mode 100644
index 00000000..448ff6b4
--- /dev/null
+++ b/resources/icon/icon-right.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-169.000000, -323.000000)">
+            <g id="icon-right" transform="translate(162.000000, 318.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="chevron-right" transform="translate(8.000000, 6.000000)" stroke-linecap="round" stroke-width="1.33333333" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 8 4 4 0 0"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-setting.svg b/resources/icon/icon-setting.svg
new file mode 100644
index 00000000..75a842e5
--- /dev/null
+++ b/resources/icon/icon-setting.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="6px" viewBox="0 0 18 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-setting</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-234.000000, -159.000000)">
+            <g id="icon-setting" transform="translate(233.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="more-horizontal" transform="translate(2.000000, 8.500000)" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <ellipse id="Oval" cx="8" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                    <ellipse id="Oval" cx="14.4" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                    <ellipse id="Oval" cx="1.6" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-sidebar-24.svg b/resources/icon/icon-sidebar-24.svg
new file mode 100644
index 00000000..efdc3ebb
--- /dev/null
+++ b/resources/icon/icon-sidebar-24.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-sidebar-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1400.000000, -219.000000)">
+            <g id="icon-sidebar-24" transform="translate(1397.000000, 216.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="sidebar" transform="translate(4.000000, 4.000000)" stroke="#8A8C8D" stroke-width="1.77777778" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="0" width="16" height="16" rx="1.77777778"></rect>
+                    <path d="M5.33333333,0 L5.33333333,16" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-sidebar.svg b/resources/icon/icon-sidebar.svg
new file mode 100644
index 00000000..26f2be2a
--- /dev/null
+++ b/resources/icon/icon-sidebar.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-sidebar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1441.000000, -218.000000)">
+            <g id="icon-sidebar" transform="translate(1439.000000, 216.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#8A8C8D" stroke-width="1.55555556" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="0" width="14" height="14" rx="1.55555556"></rect>
+                    <path d="M4.66666667,0 L4.66666667,14" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-star-24.svg b/resources/icon/icon-star-24.svg
new file mode 100644
index 00000000..40b9bf45
--- /dev/null
+++ b/resources/icon/icon-star-24.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1313.000000, -147.000000)">
+            <g id="icon-star-24" transform="translate(1311.000000, 145.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="1" y="1" width="18" height="18"></rect>
+                <g id="star" transform="translate(3.000000, 3.000000)" stroke-linecap="round" stroke-width="1.8" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polygon id="Shape" points="9 0 11.781 5.634 18 6.543 13.5 10.926 14.562 17.118 9 14.193 3.438 17.118 4.5 10.926 0 6.543 6.219 5.634"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-star-active.svg b/resources/icon/icon-star-active.svg
new file mode 100644
index 00000000..c87b883d
--- /dev/null
+++ b/resources/icon/icon-star-active.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-150.000000, -290.000000)">
+            <g id="BG" transform="translate(64.000000, 132.000000)">
+                <g id="icon-star-active" transform="translate(85.000000, 157.000000)">
+                    <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g id="star" transform="translate(1.000000, 1.000000)">
+                        <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                        <g transform="translate(1.500000, 1.500000)" stroke-linecap="round" id="Shape" stroke-width="1.5" stroke="#1EC38B" stroke-linejoin="round">
+                            <polygon points="7.5 0 9.8175 4.695 15 5.4525 11.25 9.105 12.135 14.265 7.5 11.8275 2.865 14.265 3.75 9.105 0 5.4525 5.1825 4.695"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-star.svg b/resources/icon/icon-star.svg
new file mode 100644
index 00000000..c9a6d84b
--- /dev/null
+++ b/resources/icon/icon-star.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-150.000000, -267.000000)">
+            <g id="BG" transform="translate(64.000000, 132.000000)">
+                <g id="icon-star" transform="translate(85.000000, 134.000000)">
+                    <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g id="star" transform="translate(1.000000, 1.000000)">
+                        <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                        <g transform="translate(1.500000, 1.500000)" stroke-linecap="round" id="Shape" stroke-width="1.5" stroke="#8A8C8D" stroke-linejoin="round">
+                            <polygon points="7.5 0 9.8175 4.695 15 5.4525 11.25 9.105 12.135 14.265 7.5 11.8275 2.865 14.265 3.75 9.105 0 5.4525 5.1825 4.695"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-starred-24.svg b/resources/icon/icon-starred-24.svg
new file mode 100644
index 00000000..3e44a3e2
--- /dev/null
+++ b/resources/icon/icon-starred-24.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-starred-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1346.000000, -147.000000)">
+            <g id="icon-starred-24" transform="translate(1344.000000, 145.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="1" y="1" width="18" height="18"></rect>
+                <g id="star" transform="translate(3.000000, 3.000000)" stroke-linecap="round" stroke-width="1.8" stroke="#FDD835" fill="#FDD835" stroke-linejoin="round">
+                    <polygon id="Shape" points="9 0 11.781 5.634 18 6.543 13.5 10.926 14.562 17.118 9 14.193 3.438 17.118 4.5 10.926 0 6.543 6.219 5.634"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-starred.svg b/resources/icon/icon-starred.svg
new file mode 100644
index 00000000..68eb6f07
--- /dev/null
+++ b/resources/icon/icon-starred.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-starred</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1419.000000, -184.000000)">
+            <g id="icon-starred" transform="translate(1419.000000, 184.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="star">
+                    <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g transform="translate(1.666667, 1.666667)" stroke-linecap="round" id="Shape" stroke-width="1.66666667" stroke="#FDD835" fill="#FDD835" stroke-linejoin="round">
+                        <polygon points="8.33333333 0 10.9083333 5.21666667 16.6666667 6.05833333 12.5 10.1166667 13.4833333 15.85 8.33333333 13.1416667 3.18333333 15.85 4.16666667 10.1166667 0 6.05833333 5.75833333 5.21666667"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-tag-active.svg b/resources/icon/icon-tag-active.svg
new file mode 100644
index 00000000..887e7344
--- /dev/null
+++ b/resources/icon/icon-tag-active.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-tag-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-121.000000, -174.000000)">
+            <g id="icon-tag-active" transform="translate(119.000000, 172.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="tag" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14.872,9.128 L9.136,14.864 C8.83589079,15.1644433 8.4286548,15.3332587 8.004,15.3332587 C7.5793452,15.3332587 7.17210921,15.1644433 6.872,14.864 L0,8 L0,0 L8,0 L14.872,6.872 C15.4923578,7.49605993 15.4923578,8.50394007 14.872,9.128 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-tag.svg b/resources/icon/icon-tag.svg
new file mode 100644
index 00000000..ee23dcfc
--- /dev/null
+++ b/resources/icon/icon-tag.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-tag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-121.000000, -154.000000)">
+            <g id="icon-tag" transform="translate(119.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="tag" transform="translate(3.000000, 3.000000)" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14.872,9.128 L9.136,14.864 C8.83589079,15.1644433 8.4286548,15.3332587 8.004,15.3332587 C7.5793452,15.3332587 7.17210921,15.1644433 6.872,14.864 L0,8 L0,0 L8,0 L14.872,6.872 C15.4923578,7.49605993 15.4923578,8.50394007 14.872,9.128 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-trash-24.svg b/resources/icon/icon-trash-24.svg
new file mode 100644
index 00000000..a72ff7da
--- /dev/null
+++ b/resources/icon/icon-trash-24.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1404.000000, -250.000000)">
+            <g id="icon-trash-24" transform="translate(1401.000000, 248.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="trash" transform="translate(4.000000, 3.000000)" stroke-linecap="round" stroke-width="1.77777778" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.6 1.77777778 3.6 16 3.6"></polyline>
+                    <path d="M14.2222222,3.6 L14.2222222,16.2 C14.2222222,17.1941125 13.426284,18 12.4444444,18 L3.55555556,18 C2.573716,18 1.77777778,17.1941125 1.77777778,16.2 L1.77777778,3.6 M4.44444444,3.6 L4.44444444,1.8 C4.44444444,0.80588745 5.24038267,0 6.22222222,0 L9.77777778,0 C10.7596173,0 11.5555556,0.80588745 11.5555556,1.8 L11.5555556,3.6" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-trash-active.svg b/resources/icon/icon-trash-active.svg
new file mode 100644
index 00000000..593098fc
--- /dev/null
+++ b/resources/icon/icon-trash-active.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-188.000000, -289.000000)">
+            <g id="icon-trash-active" transform="translate(186.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="trash" transform="translate(3.000000, 2.000000)" stroke-linecap="round" stroke-width="1.55555556" stroke="#1EC38B" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.2 1.55555556 3.2 14 3.2"></polyline>
+                    <path d="M12.4444444,3.2 L12.4444444,14.4 C12.4444444,15.2836556 11.7479985,16 10.8888889,16 L3.11111111,16 C2.2520015,16 1.55555556,15.2836556 1.55555556,14.4 L1.55555556,3.2 M3.88888889,3.2 L3.88888889,1.6 C3.88888889,0.7163444 4.58533483,0 5.44444444,0 L8.55555556,0 C9.41466517,0 10.1111111,0.7163444 10.1111111,1.6 L10.1111111,3.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-trash.svg b/resources/icon/icon-trash.svg
new file mode 100644
index 00000000..431972bd
--- /dev/null
+++ b/resources/icon/icon-trash.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -263.000000)">
+            <g id="icon-trash" transform="translate(82.000000, 262.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="trash" transform="translate(3.000000, 2.000000)" stroke-linecap="round" stroke-width="1.55555556" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.2 1.55555556 3.2 14 3.2"></polyline>
+                    <path d="M12.4444444,3.2 L12.4444444,14.4 C12.4444444,15.2836556 11.7479985,16 10.8888889,16 L3.11111111,16 C2.2520015,16 1.55555556,15.2836556 1.55555556,14.4 L1.55555556,3.2 M3.88888889,3.2 L3.88888889,1.6 C3.88888889,0.7163444 4.58533483,0 5.44444444,0 L8.55555556,0 C9.41466517,0 10.1111111,0.7163444 10.1111111,1.6 L10.1111111,3.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-unlock.svg b/resources/icon/icon-unlock.svg
new file mode 100644
index 00000000..75503cfb
--- /dev/null
+++ b/resources/icon/icon-unlock.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-unlock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1463.000000, -284.000000)">
+            <g id="icon-unlock" transform="translate(1461.000000, 282.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="unlock" transform="translate(3.000000, 2.000000)" stroke="#8A8C8D" stroke-width="1.55555556" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="7.61904762" width="14" height="8.38095238" rx="1.55555556"></rect>
+                    <path d="M3.11111111,7.61904762 L3.11111111,4.57142857 C3.10910319,2.61427389 4.62135513,0.974054703 6.60916974,0.777363091 C8.59698434,0.580671479 10.4135331,1.89151027 10.8111111,3.80952381" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-x.svg b/resources/icon/icon-x.svg
new file mode 100644
index 00000000..6cfecc48
--- /dev/null
+++ b/resources/icon/icon-x.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Feather" transform="translate(-1910.000000, -644.000000)" stroke="#666666" stroke-width="2">
+            <g id="Group" transform="translate(175.000000, 332.000000)">
+                <g id="x" transform="translate(1736.000000, 313.000000)">
+                    <path d="M12,0 L0,12" id="Shape"></path>
+                    <path d="M0,0 L12,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-zoom.svg b/resources/icon/icon-zoom.svg
new file mode 100644
index 00000000..f45e7da0
--- /dev/null
+++ b/resources/icon/icon-zoom.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-zoom</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-553.000000, -952.000000)">
+            <g id="icon-zoom" transform="translate(548.000000, 947.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="zoom-in" transform="translate(6.000000, 6.000000)" stroke="#8A8C8D" stroke-width="1.33333333" stroke-linecap="round" stroke-linejoin="round">
+                    <circle id="Oval" cx="5.33333333" cy="5.33333333" r="5.33333333"></circle>
+                    <path d="M12,12 L9.1,9.1" id="Shape"></path>
+                    <path d="M5.33333333,3.33333333 L5.33333333,7.33333333" id="Shape"></path>
+                    <path d="M3.33333333,5.33333333 L7.33333333,5.33333333" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/info.svg b/resources/icon/info.svg
new file mode 100644
index 00000000..d724468b
--- /dev/null
+++ b/resources/icon/info.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Feather" transform="translate(-1075.000000, -776.000000)" stroke="#000000">
+            <g id="Group" transform="translate(175.000000, 332.000000)">
+                <g id="info" transform="translate(901.000000, 445.000000)">
+                    <circle id="Oval" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle>
+                    <path d="M10,14 L10,10" id="Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#000000" cx="10" cy="7" r="1"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/repository/top.png b/resources/repository/top.png
index f74994d9..ac8dc699 100644
Binary files a/resources/repository/top.png and b/resources/repository/top.png differ
diff --git a/tests/dataApi/addStorage.js b/tests/dataApi/addStorage.js
index d5bc2994..da39a993 100644
--- a/tests/dataApi/addStorage.js
+++ b/tests/dataApi/addStorage.js
@@ -36,7 +36,7 @@ test.serial('Add Storage', (t) => {
       return addStorage(input)
     })
     .then(function validateResult (data) {
-      let { storage, notes } = data
+      const { storage, notes } = data
 
       // Check data.storage
       t.true(_.isString(storage.key))
@@ -53,13 +53,13 @@ test.serial('Add Storage', (t) => {
       })
 
       // Check localStorage
-      let cacheData = _.find(JSON.parse(localStorage.getItem('storages')), {key: data.storage.key})
+      const cacheData = _.find(JSON.parse(localStorage.getItem('storages')), {key: data.storage.key})
       t.is(cacheData.name, input.name)
       t.is(cacheData.type, input.type)
       t.is(cacheData.path, input.path)
 
       // Check boostnote.json
-      let jsonData = CSON.readFileSync(path.join(storage.path, 'boostnote.json'))
+      const jsonData = CSON.readFileSync(path.join(storage.path, 'boostnote.json'))
       t.true(_.isArray(jsonData.folders))
       t.is(jsonData.version, '1.0')
       t.is(jsonData.folders.length, t.context.v1StorageData.json.folders.length)
diff --git a/tests/dataApi/createFolder-test.js b/tests/dataApi/createFolder-test.js
index 7d9a65a7..1b9a1c83 100644
--- a/tests/dataApi/createFolder-test.js
+++ b/tests/dataApi/createFolder-test.js
@@ -33,7 +33,7 @@ test.serial('Create a folder', (t) => {
     })
     .then(function assert (data) {
       t.true(_.find(data.storage.folders, input) != null)
-      let jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
+      const jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
       console.log(path.join(data.storage.path, 'boostnote.json'))
       t.true(_.find(jsonData.folders, input) != null)
     })
diff --git a/tests/dataApi/createNote-test.js b/tests/dataApi/createNote-test.js
index 5c31574e..47446aab 100644
--- a/tests/dataApi/createNote-test.js
+++ b/tests/dataApi/createNote-test.js
@@ -54,11 +54,11 @@ test.serial('Create a note', (t) => {
       ])
     })
     .then(function assert (data) {
-      let data1 = data[0]
-      let data2 = data[1]
+      const data1 = data[0]
+      const data2 = data[1]
 
       t.is(storageKey, data1.storage)
-      let jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
+      const jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
       t.is(input1.title, data1.title)
       t.is(input1.title, jsonData1.title)
       t.is(input1.description, data1.description)
@@ -73,7 +73,7 @@ test.serial('Create a note', (t) => {
       t.is(input1.snippets[0].name, jsonData1.snippets[0].name)
 
       t.is(storageKey, data2.storage)
-      let jsonData2 = CSON.readFileSync(path.join(storagePath, 'notes', data2.key + '.cson'))
+      const jsonData2 = CSON.readFileSync(path.join(storagePath, 'notes', data2.key + '.cson'))
       t.is(input2.title, data2.title)
       t.is(input2.title, jsonData2.title)
       t.is(input2.content, data2.content)
diff --git a/tests/dataApi/deleteFolder-test.js b/tests/dataApi/deleteFolder-test.js
index 4adf38e1..1d9c7646 100644
--- a/tests/dataApi/deleteFolder-test.js
+++ b/tests/dataApi/deleteFolder-test.js
@@ -31,10 +31,10 @@ test.serial('Delete a folder', (t) => {
     })
     .then(function assert (data) {
       t.true(_.find(data.storage.folders, {key: folderKey}) == null)
-      let jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
+      const jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
 
       t.true(_.find(jsonData.folders, {key: folderKey}) == null)
-      let notePaths = sander.readdirSync(data.storage.path, 'notes')
+      const notePaths = sander.readdirSync(data.storage.path, 'notes')
       t.is(notePaths.length, t.context.storage.notes.filter((note) => note.folder !== folderKey).length)
     })
 })
diff --git a/tests/dataApi/migrateFromV6Storage-test.js b/tests/dataApi/migrateFromV6Storage-test.js
index 220289c6..7cdcdb71 100644
--- a/tests/dataApi/migrateFromV6Storage-test.js
+++ b/tests/dataApi/migrateFromV6Storage-test.js
@@ -17,7 +17,7 @@ const os = require('os')
 const dummyStoragePath = path.join(os.tmpdir(), 'test/migrate-test-storage')
 
 test.beforeEach((t) => {
-  let dummyData = t.context.dummyData = TestDummy.dummyLegacyStorage(dummyStoragePath)
+  const dummyData = t.context.dummyData = TestDummy.dummyLegacyStorage(dummyStoragePath)
   console.log('init count', dummyData.notes.length)
   localStorage.setItem('storages', JSON.stringify([dummyData.cache]))
 })
@@ -32,11 +32,11 @@ test.serial('Migrate legacy storage into v1 storage', (t) => {
       t.true(data)
 
       // Check all notes migrated.
-      let dummyData = t.context.dummyData
-      let noteDirPath = path.join(dummyStoragePath, 'notes')
-      let fileList = sander.readdirSync(noteDirPath)
+      const dummyData = t.context.dummyData
+      const noteDirPath = path.join(dummyStoragePath, 'notes')
+      const fileList = sander.readdirSync(noteDirPath)
       t.is(dummyData.notes.length, fileList.length)
-      let noteMap = fileList
+      const noteMap = fileList
         .map((filePath) => {
           return CSON.readFileSync(path.join(noteDirPath, filePath))
         })
diff --git a/tests/dataApi/moveNote-test.js b/tests/dataApi/moveNote-test.js
index 4c31ddca..3fe31c58 100644
--- a/tests/dataApi/moveNote-test.js
+++ b/tests/dataApi/moveNote-test.js
@@ -38,15 +38,15 @@ test.serial('Move a note', (t) => {
       ])
     })
     .then(function assert (data) {
-      let data1 = data[0]
-      let data2 = data[1]
+      const data1 = data[0]
+      const data2 = data[1]
 
-      let jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
+      const jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
 
       t.is(jsonData1.folder, folderKey1)
       t.is(jsonData1.title, note1.title)
 
-      let jsonData2 = CSON.readFileSync(path.join(storagePath2, 'notes', data2.key + '.cson'))
+      const jsonData2 = CSON.readFileSync(path.join(storagePath2, 'notes', data2.key + '.cson'))
       t.is(jsonData2.folder, folderKey2)
       t.is(jsonData2.title, note2.title)
       try {
diff --git a/tests/dataApi/renameStorage-test.js b/tests/dataApi/renameStorage-test.js
index b898d6f1..f5c64cb6 100644
--- a/tests/dataApi/renameStorage-test.js
+++ b/tests/dataApi/renameStorage-test.js
@@ -27,7 +27,7 @@ test.serial('Rename a storage', (t) => {
       return renameStorage(storageKey, 'changed')
     })
     .then(function assert (data) {
-      let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+      const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
       t.true(_.find(cachedStorageList, {key: storageKey}).name === 'changed')
     })
 })
diff --git a/tests/dataApi/reorderFolder-test.js b/tests/dataApi/reorderFolder-test.js
index bb7f6b0c..55bff0eb 100644
--- a/tests/dataApi/reorderFolder-test.js
+++ b/tests/dataApi/reorderFolder-test.js
@@ -34,8 +34,7 @@ test.serial('Reorder a folder', (t) => {
       t.true(_.nth(data.storage.folders, 0).key === secondFolderKey)
       t.true(_.nth(data.storage.folders, 1).key === firstFolderKey)
 
-      let jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
-      console.log(path.join(data.storage.path, 'boostnote.json'))
+      const jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
 
       t.true(_.nth(jsonData.folders, 0).key === secondFolderKey)
       t.true(_.nth(jsonData.folders, 1).key === firstFolderKey)
diff --git a/tests/dataApi/updateFolder-test.js b/tests/dataApi/updateFolder-test.js
index ad486344..ca9fcf99 100644
--- a/tests/dataApi/updateFolder-test.js
+++ b/tests/dataApi/updateFolder-test.js
@@ -34,7 +34,7 @@ test.serial('Update a folder', (t) => {
     })
     .then(function assert (data) {
       t.true(_.find(data.storage.folders, input) != null)
-      let jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
+      const jsonData = CSON.readFileSync(path.join(data.storage.path, 'boostnote.json'))
       console.log(path.join(data.storage.path, 'boostnote.json'))
       t.true(_.find(jsonData.folders, input) != null)
     })
diff --git a/tests/dataApi/updateNote-test.js b/tests/dataApi/updateNote-test.js
index 2c6aad9c..6043ee1e 100644
--- a/tests/dataApi/updateNote-test.js
+++ b/tests/dataApi/updateNote-test.js
@@ -74,8 +74,8 @@ test.serial('Update a note', (t) => {
           createNote(storageKey, input2)
         ])
         .then(function updateNotes (data) {
-          let data1 = data[0]
-          let data2 = data[1]
+          const data1 = data[0]
+          const data2 = data[1]
           return Promise.all([
             updateNote(data1.storage, data1.key, input3),
             updateNote(data1.storage, data2.key, input4)
@@ -83,10 +83,10 @@ test.serial('Update a note', (t) => {
         })
     })
     .then(function assert (data) {
-      let data1 = data[0]
-      let data2 = data[1]
+      const data1 = data[0]
+      const data2 = data[1]
 
-      let jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
+      const jsonData1 = CSON.readFileSync(path.join(storagePath, 'notes', data1.key + '.cson'))
       t.is(input3.title, data1.title)
       t.is(input3.title, jsonData1.title)
       t.is(input3.description, data1.description)
@@ -100,7 +100,7 @@ test.serial('Update a note', (t) => {
       t.is(input3.snippets[0].name, data1.snippets[0].name)
       t.is(input3.snippets[0].name, jsonData1.snippets[0].name)
 
-      let jsonData2 = CSON.readFileSync(path.join(storagePath, 'notes', data2.key + '.cson'))
+      const jsonData2 = CSON.readFileSync(path.join(storagePath, 'notes', data2.key + '.cson'))
       t.is(input4.title, data2.title)
       t.is(input4.title, jsonData2.title)
       t.is(input4.content, data2.content)
diff --git a/tests/lib/markdown-text-helper-test.js b/tests/lib/markdown-text-helper-test.js
new file mode 100644
index 00000000..e4ad86bc
--- /dev/null
+++ b/tests/lib/markdown-text-helper-test.js
@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Unit test for browser/lib/markdown
+ */
+const test = require('ava')
+const markdown = require('browser/lib/markdownTextHelper')
+
+test(t => {
+  // [input, expected]
+  const testCases = [
+    // List
+    [' - ', ' '],
+    [' + ', ' '],
+    [' * ', ' '],
+    [' *   ', ' '],
+    [' 1. ', ' '],
+    [' 2.  ', ' '],
+    [' 10. ', ' '],
+    ['\t- ', '\t'],
+    ['- ', ''],
+    // Header with using line
+    ['\n==', '\n'],
+    ['\n===', '\n'],
+    ['test\n===', 'test\n'],
+    // Code block
+    ['```test\n', ''],
+    ['```test\nhoge', 'hoge'],
+    // HTML tag
+    ['<>', ''],
+    ['<test>', 'test'],
+    ['hoge<test>', 'hogetest'],
+    ['<test>moge', 'testmoge'],
+    // Emphasis
+    ['~~', ''],
+    ['~~text~~', 'text'],
+    // Don't remove underscore
+    ['`MY_TITLE`', 'MY_TITLE'],
+    ['MY_TITLE', 'MY_TITLE'],
+    // I have no idea for it...
+    ['```test', '`test']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(markdown.strip(input), expected, `Test for strip() input: ${input} expected: ${expected}`)
+  })
+})
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index c8cdd84c..87bbe744 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -40,8 +40,8 @@ var config = {
     '@rokt33r/markdown-it-math',
     'markdown-it-checkbox',
     'markdown-it-kbd',
+    'markdown-it-plantuml',
     'devtron',
-    'mixpanel',
     '@rokt33r/season',
     {
       react: 'var React',
diff --git a/yarn.lock b/yarn.lock
index fed3a4a1..6f186773 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14,6 +14,10 @@
     fs-plus "2.x"
     optimist "~0.4.0"
 
+"@types/node@^7.0.18":
+  version "7.0.46"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.46.tgz#c3dedd25558c676b3d6303e51799abb9c3f8f314"
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -1712,6 +1716,14 @@ create-react-class@^15.5.1, create-react-class@^15.5.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-class@^15.6.0:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2150,17 +2162,18 @@ electron-packager@^6.0.0:
     rimraf "^2.3.2"
     run-series "^1.1.1"
 
-electron-prebuilt@^1.2.8:
-  version "1.4.13"
-  resolved "https://registry.yarnpkg.com/electron-prebuilt/-/electron-prebuilt-1.4.13.tgz#0a0e4d7bf895a242061ccfab29394dcda1da33d2"
-  dependencies:
-    electron-download "^3.0.1"
-    extract-zip "^1.0.3"
-
 electron-to-chromium@^1.2.7:
   version "1.3.11"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.11.tgz#744761df1d67b492b322ce9aa0aba5393260eb61"
 
+electron@^1.6.15:
+  version "1.7.9"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-1.7.9.tgz#add54e9f8f83ed02f6519ec10135f698b19336cf"
+  dependencies:
+    "@types/node" "^7.0.18"
+    electron-download "^3.0.1"
+    extract-zip "^1.0.3"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2640,6 +2653,18 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fbjs@^0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
@@ -4244,10 +4269,6 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-mixpanel@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mixpanel/-/mixpanel-0.4.1.tgz#0e92ee336fb89a164f54830f093c9cae8517fb8f"
-
 mkdirp@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
@@ -5164,6 +5185,14 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.10:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
@@ -5373,14 +5402,15 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@^15.0.2:
-  version "15.5.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
+react@^15.5.4:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
   dependencies:
+    create-react-class "^15.6.0"
     fbjs "^0.8.9"
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
-    prop-types "^15.5.7"
+    prop-types "^15.5.10"
 
 reactcss@^1.2.0:
   version "1.2.2"