diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 0a7318dce..24ac24378 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
  */
 const TagElement = ({ tagName }) => (
   <span styleName='item-bottom-tagList-item' key={tagName}>
-    {tagName}
+    #{tagName}
   </span>
 )
 
@@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
   >
     <div styleName='item-wrapper'>
-      <div styleName='item-bottom-time'>{dateDisplay}</div>
-
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
       <div styleName='item-title'>
         {note.title.trim().length > 0
           ? note.title
@@ -61,23 +63,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
         }
       </div>
 
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+      {note.isStarred
+        ? <i styleName='item-star' className='fa fa-star' /> : ''
+      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
             ? TagElementList(note.tags)
-            : ''
+            : <span styleName='item-bottom-tagList-empty' />
           }
         </div>
       </div>
-
-      {note.type === 'SNIPPET_NOTE'
-        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
-        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
-      }
-
-      {note.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
-      }
     </div>
   </div>
 )
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index ad3ec91f8..36245606a 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -7,63 +7,64 @@ $control-height = 30px
 
 .item
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition background-color 0.2s
   &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     .item-title
-    .item-title-empty
-    .item-bottom-tagList-empty
+    .item-title-icon
     .item-bottom-time
+    .item-bottom-tagList-item
+      transition 0.15s
+      color $ui-text-color
+  &:active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    .item-title
     .item-title-icon
-      color white
+    .item-bottom-time
     .item-bottom-tagList-item
-      background-color transparent
-      color white
+      transition 0.15s
+      color $ui-text-color
 
 .item-wrapper
-  padding 20px 0
+  padding 15px 0
   border-bottom $ui-border
 
 .item--active
   @extend .item
-  background-color $ui-active-color
-  color white
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
   .item-title
   .item-title-empty
   .item-bottom-tagList-empty
   .item-bottom-time
   .item-title-icon
-    color white
+    color $ui-text-color
   .item-bottom-tagList-item
     background-color transparent
-    color white
+    color $ui-text-color
   .item-wrapper
     border-color transparent
   &:hover
-    background-color $ui-active-color
+    background-color $ui-button--active-backgroundColor
+
+.item-title-icon
+  position relative
+  font-size 12px
+  color $ui-inactive-text-color
 
 .item-title
-  font-size 14px
-  height 40px
-  box-sizing border-box
-  line-height 24px
-  padding-top 5px
-  padding-bottom 20px
+  font-size 13px
+  position relative
+  top -12px
+  left 20px
+  padding-right 15px
+  padding-bottom 4px
   overflow ellipsis
-  color $ui-text-color
-
-.item-title-icon
-  position absolute
-  top 20px
-  right 25px
-  font-size 14px
   color $ui-inactive-text-color
 
 .item-title-empty
@@ -84,37 +85,33 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
-  color #FFFFFF
+  padding-left 2px
 
 .item-bottom-tagList-item
-  font-size 12px
+  font-size 10px
   margin-right 8px
-  padding 0 10px
+  padding 0
   height 20px
   box-sizing border-box
   border-radius 20px
   vertical-align middle
-  background-color $ui-tag-backgroundColor
-  color #FFFFFF
-
-.item-bottom-tagList-empty
+  background-color transparent
   color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 12px
+  font-size 10px
+  padding-left 2px
+  padding-bottom 2px
 
 .item-star
   position absolute
-  top 20px
-  right 29px
+  top 19px
+  left 5px
   width 34px
   height 34px
   color $ui-favorite-star-button-color
-  font-size 14px
+  font-size 12px
   padding 0
   border-radius 17px
 
@@ -127,41 +124,50 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
     &:active
-      background-color $ui-active-color
+      background-color $ui-dark-button--active-backgroundColor
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+      .item-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
-
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+      .item-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
+  
   .item-wrapper
     border-color $ui-dark-borderColor
 
   .item--active
-    @extend .item
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
+    background-color $ui-dark-button--active-backgroundColor
     .item-wrapper
       border-color transparent
     .item-title
-      color white
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dark-text-color
     .item-bottom-tagList-item
       background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-color
+      color $ui-dark-text-color
 
   .item-title
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
 
   .item-title-icon
-    color $ui-darkinactive-text-color
+    color $ui-inactive-text-color
 
   .item-title-empty
-    color $ui-dark-inactive-text-color
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-item
-    background-color $ui-dark-tag-backgroundColor
-    color $ui-dark-text-color
+    background-color transparent
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index 29a2e76fc..dbd09a373 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -13,36 +13,40 @@ $control-height = 30px
   background-color $ui-noteList-backgroundColor
   transition background-color 0.15s
   &:hover
-    background-color alpha($ui-active-color, 20%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
   &:active
-    background-color $ui-active-color
-    color white
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
-      color white
+      color $ui-text-color
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-active-color
-  color white
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
     border-color transparent
-    color white
+    color $ui-text-color
   .item-simple-title-icon
-    color white
+    color $ui-text-color
   &:hover
-    background-color $ui-active-color
+    background-color $ui-button--active-backgroundColor
 
 .item-simple-title
-  font-size 14px
+  font-size 12px
   height 40px
   box-sizing border-box
   line-height 24px
   padding-top 8px
   overflow ellipsis
-  color $ui-text-color
+  color $ui-inactive-text-color
   border-bottom $ui-border
 
 .item-simple-title-icon
@@ -63,23 +67,35 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
     &:active
-      background-color $ui-active-color
+      background-color $ui-dark-button--active-backgroundColor
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
 
   .item-simple--active
-    @extend .item-simple
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
+    background-color $ui-dark-button--active-backgroundColor
     .item-simple-title
-    .item-simple-title-empty
-      color white
-      border-color transparent
-    &:hover
-      background-color $ui-active-color
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color transparent
+      color $ui-dark-text-color
 
   .item-simple-title
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
     border-color $ui-dark-borderColor
 
   .item-simple-title-icon
diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index a10d2d989..01af53e2b 100644
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -21,7 +21,7 @@ const SideNavFilter = ({
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-book fa-fw' />
+      <i className='fa fa-archive fa-fw' />
       <span styleName='menu-button-label'>All Notes</span>
     </button>
     <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 10567f0b9..b857308f4 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -5,17 +5,18 @@
   navButtonColor()
   height 32px
   padding 0 15px
-  font-size 14px
+  font-size 12px
   width 100%
   text-align left
   overflow ellipsis
 
 .menu-button--active
   @extend .menu-button
+  color $ui-text-color
   background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
   &:hover
     background-color $ui-button--active-backgroundColor
+    color $ui-text-color
 
 .menu-button-label
   margin-left 5px
@@ -48,11 +49,15 @@
 
 body[data-theme="dark"]
   .menu-button
-    navDarkButtonColor()
-
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
   .menu-button--active
-    @extend .menu-button
+    color $ui-dark-text-color
     background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
+    &:active
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index 2bec7eadf..8d4d1b04d 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -60,7 +60,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
     transition color background-color 0.15s
     border-left 4px solid transparent
     &:hover
-      color white
+      color $ui-dark-text-color
       background-color $ui-dark-button--hover-backgroundColor
 
   .input
     background-color $ui-dark-button--hover-backgroundColor
-    color white
+    color $ui-dark-text-color
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 6bb0ca8ae..bbaf16db0 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -13,30 +13,32 @@
   text-align left
   border none
   overflow ellipsis
-  font-size 14px
+  font-size 12px
   &:first-child
     margin-top 0
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition background-color 0.15s
   &:active
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button--active-color
+  color $ui-text-color
   background-color $ui-button--active-backgroundColor
   &:hover
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item-name
   display block
   flex 1
-  padding 0 30px
+  padding 0 15px
   height 26px
   line-height 26px
-  border-width 0 0 0 3px
+  border-width 0 0 0 1px
   border-style solid
   border-color transparent
   overflow hidden
@@ -67,4 +69,24 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 14px
+  padding-left 12px
+
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index b1e3a6c28..f2d8d7dd4 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -26,7 +26,7 @@
   overflow ellipsis
 
 .idle-label-name
-  font-size 16px
+  font-size 14px
   padding 2px
 
 .idle-label-name-surfix
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index f9e7ef7ab..bf374d91f 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -22,6 +22,7 @@
   height 80px
 
 .body .description textarea
+  outline none
   display block
   height 100%
   width 100%
@@ -62,9 +63,6 @@
   button
     navButtonColor()
     height 24px
-    border-width 0 1px 0 0
-    border-style solid
-    border-color $ui-borderColor
     &:active .update-icon
       color white
 
@@ -83,7 +81,7 @@ body[data-theme="dark"]
 
   .body .description textarea
     background-color $ui-dark-noteDetail-backgroundColor
-    color white
+    color $ui-dark-text-color
 
   .tabList
     background-color $ui-button--active-backgroundColor
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index 4b479c54d..f8236ccbb 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -3,6 +3,7 @@
   top 0
   padding 0
   &:hover
+    background-color #DCDCDC
     .icon
       transform rotate(-72deg)
     .tooltip
@@ -18,3 +19,8 @@
 
 .icon
   transition transform 0.15s
+
+body[data-theme="dark"]
+  .root
+    &:hover
+      background-color #272B32
\ No newline at end of file
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index 4fce3c685..bebf39de7 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -107,7 +107,7 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>{tag}</span>
+            <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index ea3edbfb5..9802f20df 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -16,7 +16,7 @@
   padding-left 10px
   vertical-align middle
   height 20px
-  background-color $ui-tag-backgroundColor
+  background-color alpha($ui-tag-backgroundColor, 10%)
   border-radius 20px
   overflow hidden
   clearfix()
@@ -39,9 +39,9 @@
   padding-right 4px
 
 .tag-label
-  font-size 12px
-  font-weight bold
-  color: #FFFFFF
+  font-size 11px
+  font-weight 600
+  color: alpha($ui-text-color, 80%)
   float left
   height 20px
   line-height 20px
@@ -83,7 +83,7 @@ body[data-theme="dark"]
     color $ui-dark-button-color
 
   .tag
-    background-color $ui-dark-tag-backgroundColor
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 0adb36781..d4e685740 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -26,6 +26,8 @@ $control-height = 30px
   padding 0
   border none
   background-color transparent
+  outline none
+  cursor pointer
   font-size 10px
 
 .control-button
@@ -33,18 +35,18 @@ $control-height = 30px
   padding 0
   background-color transparent
   border none
-  color $ui-inactive-text-color
+  color alpha($ui-inactive-text-color, 60%)
   transition 0.15s
   &:active, &:active:hover
-    color $ui-active-color
+    color $ui-inactive-text-color
   &:hover
-    color $ui-text-color
+    color $ui-inactive-text-color
 
 .control-button--active
   @extend .control-button
-  color $ui-active-color
+  color $ui-inactive-text-color
   &:hover
-    color $ui-active-color
+    color $ui-inactive-text-color
 
 .list
   absolute left right bottom
@@ -67,4 +69,8 @@ body[data-theme="dark"]
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
-
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 8a239daf4..353e5d70d 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -12,9 +12,14 @@
   navButtonColor()
   height $topBar-height
   padding 0 15px
-  font-size 14px
+  font-size 12px
   width 100%
   text-align left
+  &:hover
+    color $ui-text-color
+  &:active, &:active:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .top-menu-label
   margin-left 5px
@@ -110,10 +115,10 @@ body[data-theme="dark"]
 
   .top-menu
     navDarkButtonColor()
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
   .storageList-empty
     color $ui-dark-inactive-text-color
-
-  .navToggle
-    navDarkButtonColor()
-
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index eeef3bf44..6cc36e689 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -8,43 +8,37 @@
   width 100%
   margin-bottom 5px
   transition 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    .header-toggleButton
-    .header-addFolderButton
-      color white
-      &:active
-        color $ui-active-color
 
 .header--active
-  @extend .header
-  .header-info
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  background-color $ui-button--active-backgroundColor
+  transition color background-color  0.15s
+
+.header--active
   .header-toggleButton
+    color $ui-text-color
+
+.header--active
+  .header-info
+    color $ui-text-color
+
+.header--active
   .header-addFolderButton
-    color white
-    &:active
-    &:hover
-    &:hover:active
-      color white
+    color $ui-text-color
 
 .header-toggleButton
+  navButtonColor()
   position absolute
   left 0
   width 25px
   height 26px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
   &:hover
+    background-color transparent
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .header-info
+  navButtonColor()
   display block
   width 100%
   height 30px
@@ -52,33 +46,26 @@
   padding-right 10px
   line-height 26px
   cursor pointer
-  font-size 14px
+  font-size 13px
   border none
   overflow ellipsis
   text-align left
-  background-color transparent
-  color $ui-inactive-text-color
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
 
 .header-info-path
   font-size 10px
   margin 0 5px
 
 .header-addFolderButton
+  navButtonColor()
   position absolute
   right 0
   width 25px
   height 26px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
   &:hover
+    background-color transparent
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .root--folded
   @extend .root
@@ -108,16 +95,38 @@
     margin 0 5px
 
 body[data-theme="dark"]
-  .header-toggleButton
-  .header-addFolderButton
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-    &:active
-      color $ui-dark-active-color
+  .header--active
+    background-color $ui-dark-button--active-backgroundColor
+    transition color background-color  0.15s
+
   .header--active
     .header-toggleButton
-    .header-addFolderButton
-      color white
+      color $ui-dark-text-color
+
+  .header--active
+    .header-info
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
       &:active
-        color white
+        color $ui-dark-text-color
+        background-color $ui-dark-button--active-backgroundColor  
+
+  .header--active
+    .header-addFolderButton
+      color $ui-dark-text-color
+
+  .header-toggleButton
+    &:hover
+      color $ui-dark-text-color
+
+  .header-info
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-addFolderButton
+    &:hover
+      color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 6c14b86b8..027f6d1d0 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -4,7 +4,6 @@
   absolute bottom left right
   height $statusBar-height
   background-color $ui-noteDetail-backgroundColor
-  border-top $ui-border
   display flex
   box-shadow $note-detail-box-shadow
 
@@ -24,9 +23,6 @@
 .zoom
   navButtonColor()
   height 24px
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
 
 .update
   navButtonColor()
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 9eccccb48..cb1aae31d 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -44,12 +44,13 @@ $control-height = 34px
 .control-search-optionList
   position fixed
   z-index 200
-  width 275px
-  height 175px
+  width 500px
+  height 250px
   overflow-y auto
   background-color $modal-background
   border-radius 2px
-  box-shadow 2px 2px 10px gray
+  border-none
+  box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
 
 .control-search-optionList-item
   height 50px
@@ -59,10 +60,10 @@ $control-height = 34px
   cursor pointer
   overflow ellipsis
   &:hover
-    background-color alpha($ui-active-color, 10%)
+    background-color alpha(#D4D4D4, 30%)
 
 .control-search-optionList-item-folder
-  border-left 4px solid transparent
+  border-left 2px solid transparent
   padding 2px 5px
   color $ui-text-color
   overflow ellipsis
diff --git a/browser/main/global.styl b/browser/main/global.styl
index b0b643b66..552e0d6cb 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -1,6 +1,6 @@
 global-reset()
 
-DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
+DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
 
 html, body
   width 100%
@@ -11,7 +11,7 @@ body
   font-family DEFAULT_FONTS
   color textColor
   font-size fontSize
-  font-weight 400
+  font-weight 200
 
 button, input, select, textarea
   font-family DEFAULT_FONTS
diff --git a/browser/main/modals/CreateFolderModal.js b/browser/main/modals/CreateFolderModal.js
index 2dc612710..9ece3d86d 100644
--- a/browser/main/modals/CreateFolderModal.js
+++ b/browser/main/modals/CreateFolderModal.js
@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
           <div styleName='title'>Create new folder</div>
         </div>
         <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>X</div>
+          <div styleName='close-mark'>×</div>
           <div styleName='close-text'>esc</div>
         </button>
 
@@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component {
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Create Folder
+            Create
           </button>
         </div>
       </div>
diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl
index 6b1d208b3..740f9cad0 100644
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -1,15 +1,15 @@
 .root
   modal()
-  width 700px
-  height 200px
+  width 500px
+  height 270px
   overflow hidden
   position relative
   padding 0 40px
 
 .header
-  height 50px
+  height 70px
   margin-bottom 10px
-  margin-top 10px
+  margin-top 20px
   font-size 18px
   line-height 50px
   background-color $ui-backgroundColor
@@ -19,34 +19,34 @@
   font-size 15px
 
 .close
-  height 50px
+  height 70px
   position absolute
   background-color transparent
   color $ui-inactive-text-color
   border none
   top 7px
-  right 10px
+  right 30px
   text-align center
   width top-bar--height
   height top-bar--height
 
 .control-folder-label
   text-align left
-  font-size 14px
+  font-size 12px
   color $ui-text-color
 
 .control-folder-input
   display block
   height 30px
-  width 620px
+  width 420px
   padding 0 5px
   margin 10px auto 15px
   border 1px solid #C9C9C9 // TODO: use variable.
-  border-radius 5px
+  border-radius 2px
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -54,20 +54,21 @@
 
 .control-confirmButton
   display block
+  float right
   height 30px
-  width 620px
+  width 100px
   border none
-  border-radius 5px
+  border-radius 2px
   padding 0 25px
   margin 20px auto
-  font-size 14px
+  font-size 12px
   colorPrimaryButton()
 
 body[data-theme="dark"]
   .root
     modalDark()
-    width 700px
-    height 200px
+    width 500px
+    height 270px
     overflow hidden
     position relative
     padding 0 40px
@@ -91,3 +92,6 @@ body[data-theme="dark"]
 
   .description
     color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()
\ No newline at end of file
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
index 356af05f0..d1d258b6b 100644
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -103,7 +103,7 @@ class NewNoteModal extends React.Component {
           <div styleName='title'>Make a Note</div>
         </div>
         <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>X</div>
+          <div styleName='close-mark'>×</div>
           <div styleName='close-text'>esc</div>
         </button>
 
diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl
index 105d2833f..ed1540901 100644
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -73,7 +73,7 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     background-color transparent
     &:focus
-      colorPrimaryButton()
+      colorDarkPrimaryButton()
 
   .description
     color $ui-inactive-text-color
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 896b06ed3..9bf0c606e 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -32,14 +32,20 @@
 .group-section-control
   flex 1
 
+.group-section-control select
+  outline none
+  border 1px solid $ui-borderColor
+  background-color transparent
+
 .group-section-control-input
   height 30px
   vertical-align middle
   width 400px
   font-size $tab--button-font-size
   border solid 1px $border-color
-  border-radius $tab--input-border-radius
+  border-radius 2px
   padding 0 5px
+  outline none
   &:disabled
     background-color $ui-input--disabled-backgroundColor
 
@@ -64,7 +70,7 @@
 .group-control-leftButton
   colorDefaultButton()
   border none
-  border-radius 5px
+  border-radius 2px
   font-size $tab--button-font-size
   height $tab--button-height
   padding 0 15px
@@ -74,17 +80,17 @@
   float right
   colorPrimaryButton()
   border none
-  border-radius $tab--button-border-radius
+  border-radius 2px
   font-size $tab--button-font-size
-  height $tab--button-height
-  padding 0 15px
+  height 35px
+  width 100px
   margin-right 10px
 
 .group-hint
   border $ui-border
   padding 10px 15px
   margin 15px 0
-  border-radius 5px
+  border-radius 2px
   background-color $ui-backgroundColor
   color $ui-inactive-text-color
   ul
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index d0441df23..7cd08150c 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -30,28 +30,37 @@ class InfoTab extends React.Component {
             <div styleName='icon-right'>
               <div styleName='appId'>Boostnote {appVersion}</div>
               <div styleName='description'>
-                A simple markdown/snippet note app for developer.
+                An open source note-taking app made for programmers just like you.
               </div>
             </div>
           </div>
-          <div styleName='clear' />
-          <div styleName='madeBy'>Made by&nbsp;
-            <a href='http://maisin.co/'
-              onClick={(e) => this.handleLinkClick(e)}
-            >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
         </div>
         <ul styleName='list'>
           <li>
-            The codes of this app is published under GPLv3 license.
+            <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>
-            Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
+            <a href='https://www.patreon.com/boostnote'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Donation via Patreon</a>: Thank you for your support 🎉
           </li>
           <li>
-            Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+            <a href='https://github.com/BoostIO/Boostnote/issues'
               onClick={(e) => this.handleLinkClick(e)}
-            >https://github.com/BoostIO/Boostnote/issues</a>
+            >GitHub Issue</a>: Let us hear your feedback 🙌
+          </li>
+          <li styleName='cc'>
+            Copyright (C) 2017 Maisin&Co.
+          </li>
+          <li styleName='cc'>
+            License: GPL v3
           </li>
         </ul>
       </div>
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index 2c17ae172..4947c3bcd 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -4,11 +4,9 @@
   padding 15px
   white-space pre
   line-height 1.4
-  color $ui-text-color
+  color alpha($ui-text-color, 90%)
   width 100%
-
-.clear
-  clear both
+  font-size 14px
 
 .top
   text-align left
@@ -34,26 +32,16 @@
 .description
   font-size 14px
 
-.madeBy
-  font-size 14px
-  $ui-inactive-text-color
-
-.copyright
-  font-size 14px
-  $ui-inactive-text-color
-
 .list
   list-style square
   padding-left 2em
   li
     white-space normal
-
+    padding-bottom 10px
+  a
+    color #4E8EC6
+    text-decoration none
+  
 body[data-theme="dark"]
   .root
-    color $tab--dark-text-color
-
-  .madeBy
-    color $ui-dark-inactive-text-color
-
-  .copyright
-    color $ui-dark-inactive-text-color
+    color alpha($tab--dark-text-color, 80%)
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index ec16a2bef..03dfb47e8 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -45,22 +45,20 @@ top-bar--height = 50px
   text-align left
   width 100px
   margin 4px 0
-  padding 7px 0
-  padding-left 7px
+  padding 5px 0
+  padding-left 10px
   border none
-  border-radius 3px
+  border-radius 2px
   background-color transparent
   color $ui-text-color
   font-size 14px
-  &:hover
-    color $ui-active-color
 
 .nav-button--active
   @extend .nav-button
-  color white
-  background-color $ui-active-color
+  color $ui-text-color
+  background-color $ui-button--active-backgroundColor
   &:hover
-    color white
+    color $ui-text-color
 
 .nav-button-icon
   display block
@@ -91,3 +89,10 @@ body[data-theme="dark"]
     color $tab--dark-text-color
     &:hover
       color $ui-dark-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color white
+    background-color $dark-primary-button-background--active
+    &:hover
+      color white
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
index 34ed9c917..d7fb54bc3 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -35,7 +35,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
-
+  outline none
 
 .header-control
   float right
@@ -71,7 +71,7 @@
     background-color darken(white, 3%)
 .folderList-item-left
   height 30px
-  border-left solid 4px transparent
+  border-left solid 1px transparent
   padding 0 10px
   line-height 30px
   float left
@@ -105,6 +105,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
+  outline none
 
 .folderList-item-right
   float right
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl
index 7bd98f0df..966a8eab6 100644
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -28,12 +28,15 @@
 .list-control
   height 30px
 .list-control-addStorageButton
+  position absolute
+  top 7px
+  right 20px
   height $tab--button-height
   padding 0 15px
   border $ui-border
   colorDefaultButton()
   font-size $tab--button-font-size
-  border-radius $tab--button-border-radius
+  border-radius 2px
 
 .addStorage
   margin-bottom 15px
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 47903f87d..f49912d33 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -253,7 +253,7 @@ class UiTab extends React.Component {
             <button styleName='group-control-rightButton'
               onClick={(e) => this.handleSaveUIClick(e)}
             >
-              Save UI Config
+              Save
             </button>
           </div>
         </div>
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index 0f5a0c2d2..44275aed0 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -118,7 +118,7 @@ class Preferences extends React.Component {
           <p>Your menu for Boostnote</p>
         </div>
         <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>X</div>
+          <div styleName='top-bar-close-mark'>×</div>
           <div styleName='top-bar-close-text'>esc</div>
         </button>
         <div styleName='nav'>
diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl
index 611954904..41420e749 100644
--- a/browser/main/modals/RenameFolderModal.styl
+++ b/browser/main/modals/RenameFolderModal.styl
@@ -6,7 +6,7 @@
 
 .header
   height 50px
-  font-size 18px
+  font-size 16px
   line-height 50px
   padding 0 15px
   background-color $ui-backgroundColor
@@ -40,7 +40,7 @@
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -76,3 +76,6 @@ body[data-theme="dark"]
   .control-input
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()
\ No newline at end of file
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 26a00f1b0..84deb0be4 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -11,7 +11,7 @@ $sideNav--folded-width = 44px
 $topBar-height = 60px
 
 // UI default
-$ui-text-color = #515151
+$ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
@@ -23,9 +23,9 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
 // UI Button
 $ui-button-color = #939395
-$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
+$ui-button--hover-backgroundColor = #D9D9D9
 $ui-button--active-color = white
-$ui-button--active-backgroundColor = #6AA5E9
+$ui-button--active-backgroundColor = #D9D9D9
 $ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
@@ -67,29 +67,43 @@ $active-border = solid 1px $active-border-color
 // Default button
 $default-button-background = white
 $default-button-background--hover = #e6e6e6
-$default-button-background--active = #d4d4d4
+$default-button-background--active = #D9D9D9
 
 colorDefaultButton()
   background-color $default-button-background
   &:hover
-    background-color $default-button-background--hover
+    background-color transparent
   &:active
   &:active:hover
     background-color $default-button-background--active
 
 // Primary button(Brand color)
-$primary-button-background = $brand-color
+$primary-button-background = alpha($brand-color, 60%)
 $primary-button-background--hover = darken($brand-color, 5%)
 $primary-button-background--active = darken($brand-color, 10%)
 
 colorPrimaryButton()
+  color $ui-text-color
+  background-color $default-button-background--hover
+  &:hover
+    background-color $default-button-background--active
+  &:active
+  &:active:hover
+    background-color $default-button-background--active
+
+// Dark Primary button(Brand color)
+$dark-primary-button-background = alpha(#3A404C, 80%)
+$dark-primary-button-background--hover = #3A404C
+$dark-primary-button-background--active = #3A404C
+
+colorDarkPrimaryButton()
   color white
-  background-color $primary-button-background
+  background-color $dark-primary-button-background
   &:hover
-    background-color $primary-button-background--hover
+    background-color $dark-primary-button-background--hover
   &:active
   &:active:hover
-    background-color $primary-button-background--active
+    background-color $dark-primary-button-background--active
 
 // Danger button(Brand color)
 $danger-button-background = #c9302c
@@ -115,11 +129,13 @@ navButtonColor()
   background-color transparent
   transition color background-color  0.15s
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition color background-color  0.15s
+    color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-
+    color $ui-text-color
+    transition color background-color  0.15s
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -137,7 +153,7 @@ modal()
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
-  box-shadow 2px 2px 10px gray
+  box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
 
 topBarButtonLight()
   width 34px
@@ -158,15 +174,16 @@ topBarButtonLight()
       opacity 1
 
 // Dark theme
+$ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1D1D1D
 $ui-dark-noteList-backgroundColor = #181818
 $ui-dark-noteDetail-backgroundColor = #0D0D0D
-$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
+$ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = white
-$ui-dark-button--active-backgroundColor = #6AA5E9
+$ui-dark-button--active-backgroundColor = #3A404C
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
 $ui-dark-topbar-button-color = #939395
@@ -202,12 +219,11 @@ navDarkButtonColor()
   background-color transparent
   transition color background-color 0.15s
   &:hover
-    color white
+    color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
   &:active
   &:active:hover
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
+    color $ui-dark-text-color
 
 topBarButtonDark()
   border-color $ui-dark-borderColor