diff --git a/boostnote.json b/boostnote.json
new file mode 100644
index 00000000..25d01e35
--- /dev/null
+++ b/boostnote.json
@@ -0,0 +1,10 @@
+{
+  "folders": [
+    {
+      "key": "3115e37e3d7131add9c6",
+      "color": "#E10051",
+      "name": "Notes"
+    }
+  ],
+  "version": "1.0"
+}
diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index e85df791..5df2d646 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -70,7 +70,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 d410a7cf..7a511801 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -125,10 +125,10 @@ $control-height = 30px
 
 .item-star
   position absolute
-  right -20px
-  bottom 2px
-  width 34px
-  height 34px
+  right -10px
+  bottom 12px
+  width 16px
+  height 16px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index 1fc59d7e..8e92fd01 100644
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -19,27 +19,51 @@ const SideNavFilter = ({
   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-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 332f3a38..bd914cdb 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -3,41 +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
-  &:hover
-    color $ui-button-default-color
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
-    transition background-color 0.15s
-  &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
 
+.iconWrap
+  width 20px
+  text-align center
+  
 .counters
   float right
   color $ui-inactive-text-color
 
 .menu-button--active
   @extend .menu-button
-  color #e74c3c
   SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+  &:hover
+    color #1EC38B
 
 .menu-button-star--active
   @extend .menu-button
-  color #F9BF3B
   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
-  color #5D9E36
   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
@@ -46,6 +60,7 @@
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
+
   .menu-button-label
     position fixed
     display inline-block
@@ -55,9 +70,7 @@
     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
@@ -67,6 +80,9 @@
   .counters
     display none
 
+
+
+
 body[data-theme="white"]
   .menu-button
     navWhiteButtonColor()
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 373e94aa..4a1b2d6f 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -5,31 +5,30 @@
 .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-button-default-color
+    color #1EC38B;
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
     color $$ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
-
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button-default-color
-  background-color $ui-button-default--active-backgroundColor
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   &:hover
-    color $ui-button-default-color
+    color #1EC38B;
     background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
diff --git a/browser/components/StorageList.styl b/browser/components/StorageList.styl
index 622905b1..dfb06b45 100644
--- a/browser/components/StorageList.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/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js
index ce9f35de..478259c1 100644
--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -8,7 +8,7 @@ const InfoButton = ({
   <button styleName='control-infoButton'
     onClick={onClick}
   >
-    <i className='fa fa-info-circle infoButton' styleName='info-button' />
+  	<img styleName='iconInfo' src='../resources/icon/icon-info.svg'/>
   </button>
 )
 
diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl
index f5ed4c6a..570a09eb 100644
--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -14,7 +14,7 @@
 
 .infoButton
   padding 0px
-  margin 15px 0
+  margin 45px 0
 
 body[data-theme="dark"]
   .control-infoButton
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index 980df6d4..42041f5d 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -11,7 +11,7 @@
 .control-infoButton-panel
   z-index 200
   margin-top 38px
-  right 0px
+  right 0
   position absolute
   padding 20px 25px 0 25px
   width 300px
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index a427198b..9e376d0c 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -232,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -332,23 +332,25 @@ class MarkdownNoteDetail extends React.Component {
         />
 
         {(() => {
-          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' />
+              <img styleName='iconInfo' src={imgSrc}/>
             </button>
+
           return (
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
 
+
         <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>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index a4ed7762..c8b02bc9 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -12,6 +12,7 @@
 
 .control-lockButton
   top 160px
+  margin-bottom 10px
   topBarButtonLight()
 
 .trashed-infopanel
@@ -28,7 +29,6 @@
   right $note-detail-right-margin
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-
 .body-noteEditor
   absolute top bottom left right
 
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 8d03d4c7..fa0f8a65 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -52,7 +52,7 @@ $info-margin-under-border = 15px
 .info-right
   position absolute
   right -20px
-  top 0
+  top 10px
   background $ui-noteDetail-backgroundColor
   bottom 1px
   padding-left 30px
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 3ef08340..38c5d1b4 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -610,7 +610,7 @@ class SnippetNoteDetail extends React.Component {
 
         <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>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index bfd8e6b2..7b73896c 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -67,6 +67,7 @@
 
 .control-fullScreenButton
   top 80px
+  margin-bottom 10px
   topBarButtonLight()
 
 body[data-theme="white"]
diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js
index 8610c950..7350bc98 100644
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -47,10 +47,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/TrashButton.js b/browser/main/Detail/TrashButton.js
index 04dcaacd..f15cac6d 100644
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -8,7 +8,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 91bc24c7..b1edbb5f 100644
--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -1,5 +1,6 @@
 .control-trashButton
   top 120px
+  margin-bottom 10px
   topBarButtonLight()
 
 .control-trashButton--in-trash
@@ -8,7 +9,6 @@
 
 .trashButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-trashButton
diff --git a/browser/main/NewNoteButton/index.js b/browser/main/NewNoteButton/index.js
index 936bb146..b27bb3ab 100644
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -85,7 +85,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 2a8d4543..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
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index d005ff4c..b66c4803 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -599,7 +599,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
             >
-              <i className='fa fa-th-large' />
+              <img styleName='iconTag' src='../resources/icon/icon-column.svg'/>
             </button>
             <button styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
@@ -607,7 +607,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
             >
-              <i className='fa fa-list-ul' />
+              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg'/>
             </button>
           </div>
         </div>
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index c7b4ae40..191a7cce 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -23,13 +23,13 @@
     background-color transparent
   &:active, &:active:hover
     color $ui-button-default--active-backgroundColor
-    background-color transparent
 
 .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
@@ -37,13 +37,16 @@
   border 0
   background-color transparent
   transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
   &:hover
     color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
   color $ui-button-default--active-backgroundColor
-
+  
 .top-menu-label
   margin-left 5px
   overflow ellipsis
diff --git a/browser/main/SideNav/StorageItem.js b/browser/main/SideNav/StorageItem.js
index c7985f75..24f08108 100644
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -226,9 +226,9 @@ class StorageItem extends React.Component {
           <button styleName='header-toggleButton'
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
+            <img src={this.state.isOpen
+                ? '../resources/icon/icon-down.svg'
+                : '../resources/icon/icon-right.svg'
               }
             />
           </button>
@@ -237,7 +237,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus' />
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg'/>
             </button>
           }
 
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index a0690120..95d58198 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -5,19 +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-default--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   transition color background-color  0.15s
+  display flex
+  align-items center
   .header-toggleButton
   .header-info
   .header-addFolderButton
-    color $ui-button-default-color
+    color #1EC38B
 
 .header-toggleButton
   navButtonColor()
@@ -37,23 +41,24 @@
   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
+  font-weight 600;
   background-color transparent
   &:hover
-    color $ui-button-default-color
+    color #1EC38B
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -62,12 +67,11 @@
 .header-addFolderButton
   navButtonColor()
   position absolute
-  right 0
+  right 10px
   width 25px
   height 25px
   padding 0
   border none
-  margin-right 5px
   border-radius 50%
   &:hover
     transition 0.2s
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index b1dad96c..3680fa87 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -161,15 +161,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-bars fa-fw' style={{transform: 'rotate(90deg)'}} /></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-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..77b3f1c2 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -21,8 +21,12 @@
 
 .zoom
   navButtonColor()
-  height 24px
-
+  height 30px
+  display flex
+  align-items center
+  span
+    margin-left 5px
+  
 .update
   navButtonColor()
   height 24px
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index c1ec0e71..2b625c0e 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -55,8 +55,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 5ef7e363..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
 
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/styles/index.styl b/browser/styles/index.styl
index dd572191..fd98a3b8 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -129,15 +129,11 @@ SideNavFilter()
   .menu-button-label
     color $ui-button-default-color
   &:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
-    color $ui-button-default-color
-    .menu-button-label
-      color $ui-button-default-color
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
   &:active, &:active:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
-    color $ui-button-default-color
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
     .menu-button-label
-      color $ui-button-default-color
+      color #1EC38B
 
 /**
 * Nav
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-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