diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5aedd5fd21..dfecfa5e77 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4,6 +4,9 @@ import Router from './Router'
 import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
 import { defaultTheme } from '../lib/styled/themes/default'
+import { darkTheme } from '../lib/styled/themes/dark'
+import { lightTheme } from '../lib/styled/themes/light'
+import { sepiaTheme } from '../lib/styled/themes/sepia'
 import { StyledAppContainer } from './styled'
 import ContextMenu from './ContextMenu'
 import Dialog from './Dialog/Dialog'
@@ -23,8 +26,7 @@ const App = () => {
   useEffect(() => {
     initialize()
   }, [initialize])
-  const { toggleClosed } = usePreferences()
-
+  const { toggleClosed, preferences } = usePreferences()
   const keyboardHandler = useMemo(() => {
     return (event: KeyboardEvent) => {
       switch (event.key) {
@@ -36,7 +38,6 @@ const App = () => {
     }
   }, [toggleClosed])
   useGlobalKeyDownHandler(keyboardHandler)
-
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
   const updateSideBarWidth = useCallback(
     (leftWidth: number) => {
@@ -46,9 +47,8 @@ const App = () => {
     },
     [setGeneralStatus]
   )
-
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={selectTheme(preferences['general.theme'])}>
       <StyledAppContainer
         onDrop={(event: React.DragEvent) => {
           event.preventDefault()
@@ -74,5 +74,16 @@ const App = () => {
     </ThemeProvider>
   )
 }
-
+function selectTheme(theme: string) {
+  switch (theme) {
+    case 'dark':
+      return darkTheme
+    case 'light':
+      return lightTheme
+    case 'sepia':
+      return sepiaTheme
+    default:
+      return defaultTheme
+  }
+}
 export default App
diff --git a/src/components/NotePage/NoteList/NoteList.tsx b/src/components/NotePage/NoteList/NoteList.tsx
index 7e2f560ae4..1aeaa835fd 100644
--- a/src/components/NotePage/NoteList/NoteList.tsx
+++ b/src/components/NotePage/NoteList/NoteList.tsx
@@ -12,7 +12,7 @@ import Icon from '../../atoms/Icon'
 import {
   borderBottom,
   inputStyle,
-  uiTextColor
+  iconColor
 } from '../../../lib/styled/styleFunctions'
 
 export const StyledNoteListContainer = styled.div`
@@ -48,6 +48,7 @@ export const StyledNoteListContainer = styled.div`
       font-size: 20px;
       z-index: 0;
       pointer-events: none;
+      ${iconColor}
     }
     .input {
       position: relative;
@@ -64,7 +65,7 @@ export const StyledNoteListContainer = styled.div`
     font-size: 24px;
     background: transparent;
     border: none;
-    ${uiTextColor}
+    ${iconColor}
   }
 `
 
diff --git a/src/components/PreferencesModal/EditorTab.tsx b/src/components/PreferencesModal/EditorTab.tsx
index f3bd930178..06be842b8d 100644
--- a/src/components/PreferencesModal/EditorTab.tsx
+++ b/src/components/PreferencesModal/EditorTab.tsx
@@ -152,7 +152,7 @@ const EditorTab = () => {
             value={fontSize}
             onChange={updateFontSize}
           />{' '}
-          px
+          &emsp;px
         </SectionControl>
       </Section>
       <Section>
diff --git a/src/components/PreferencesModal/GeneralTab.tsx b/src/components/PreferencesModal/GeneralTab.tsx
index a4d1855631..4851891548 100644
--- a/src/components/PreferencesModal/GeneralTab.tsx
+++ b/src/components/PreferencesModal/GeneralTab.tsx
@@ -117,9 +117,7 @@ const GeneralTab = () => {
             <option value='auto'>{t('preferences.auto')}</option>
             <option value='light'>{t('preferences.light')}</option>
             <option value='dark'>{t('preferences.dark')}</option>
-            <option value='solarized-dark'>
-              {t('preferences.solarizedDark')}
-            </option>
+            <option value='sepia'>{t('preferences.sepia')}</option>
           </SectionSelect>
         </SectionControl>
       </Section>
diff --git a/src/components/PreferencesModal/styled.tsx b/src/components/PreferencesModal/styled.tsx
index 32c9cbdf30..96977664b2 100644
--- a/src/components/PreferencesModal/styled.tsx
+++ b/src/components/PreferencesModal/styled.tsx
@@ -49,6 +49,7 @@ export const SectionControl = styled.div`
 export const SectionSelect = styled.select`
   ${selectStyle}
   padding: 0 16px;
+  width: 200px;
   height: 40px;
   border-radius: 2px;
 
@@ -79,6 +80,7 @@ export const SectionSecondaryButton = styled.button`
 export const SectionInput = styled.input`
   ${inputStyle}
   padding: 0 16px;
+  width: 200px;
   height: 40px;
   border-radius: 2px;
 `
diff --git a/src/components/SideNavigator/ControlButton.tsx b/src/components/SideNavigator/ControlButton.tsx
index 58d785bf73..698422360d 100644
--- a/src/components/SideNavigator/ControlButton.tsx
+++ b/src/components/SideNavigator/ControlButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '../../lib/styled'
 import Icon from '../atoms/Icon'
-import { uiTextColor } from '../../lib/styled/styleFunctions'
+import { sideBarTextColor, sideBarSecondaryTextColor } from '../../lib/styled/styleFunctions'
 
 const StyledButton = styled.button`
   width: 30px;
@@ -13,9 +13,13 @@ const StyledButton = styled.button`
   top: 2px;
   font-size: 20px;
   cursor: pointer;
-  ${uiTextColor}
-  &:focus {
+  ${sideBarSecondaryTextColor}
+  &:hover, &:active, &:focus {
     box-shadow: none;
+    ${sideBarTextColor}
+  }
+  svg {
+    vertical-align: middle;
   }
 `
 
diff --git a/src/components/SideNavigator/SideNavigator.tsx b/src/components/SideNavigator/SideNavigator.tsx
index 87a4fb0248..a96ffdadce 100644
--- a/src/components/SideNavigator/SideNavigator.tsx
+++ b/src/components/SideNavigator/SideNavigator.tsx
@@ -17,9 +17,9 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
 import {
-  backgroundColor,
-  iconColor,
-  textColor,
+  sideBarBackgroundColor,
+  sideBarTextColor,
+  sideBarSecondaryTextColor,
   uiTextColor
 } from '../../lib/styled/styleFunctions'
 import SideNavigatorItem from './SideNavigatorItem'
@@ -35,14 +35,14 @@ const Description = styled.nav`
   margin-left: 5px;
   margin-bottom: 10px;
   font-size: 18px;
-  color: ${textColor};
+  ${sideBarTextColor}
 `
 
 const StyledSideNavContainer = styled.nav`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${backgroundColor}
+  ${sideBarBackgroundColor}
   .topControl {
     height: 50px;
     display: flex;
@@ -54,7 +54,7 @@ const StyledSideNavContainer = styled.nav`
       height: 50px;
       background-color: transparent;
       border: none;
-      ${iconColor}
+      ${sideBarSecondaryTextColor}
       font-size: 24px;
     }
   }
diff --git a/src/components/SideNavigator/SideNavigatorItem.tsx b/src/components/SideNavigator/SideNavigatorItem.tsx
index 3678970ac2..cae80fc2fa 100644
--- a/src/components/SideNavigator/SideNavigatorItem.tsx
+++ b/src/components/SideNavigator/SideNavigatorItem.tsx
@@ -4,7 +4,8 @@ import styled from '../../lib/styled'
 import Icon from '../atoms/Icon'
 import { mdiChevronDown, mdiChevronRight } from '@mdi/js'
 import {
-  uiTextColor,
+  sideBarTextColor,
+  sideBarSecondaryTextColor,
   activeBackgroundColor
 } from '../../lib/styled/styleFunctions'
 import MdiIcon from '@mdi/react'
@@ -40,7 +41,7 @@ const FoldButton = styled.button`
   margin-right: 3px;
   border-radius: 2px;
   top: 2px;
-  ${uiTextColor}
+  ${sideBarSecondaryTextColor}
   &:focus {
     box-shadow: none;
   }
@@ -54,16 +55,17 @@ const ClickableContainer = styled.button`
   align-items: center;
   width: 100%;
 
-  color: ${({ theme }) => theme.uiTextColor};
+  ${sideBarTextColor}
   &:hover,
   &:focus,
   &:active,
   &.active {
-    color: ${({ theme }) => theme.activeUiTextColor};
+    ${sideBarTextColor}
   }
 
   .icon {
     margin-right: 4px;
+    ${sideBarSecondaryTextColor}
   }
 `
 
diff --git a/src/lib/i18n/enUS.ts b/src/lib/i18n/enUS.ts
index f4462b7021..e135328e8d 100644
--- a/src/lib/i18n/enUS.ts
+++ b/src/lib/i18n/enUS.ts
@@ -10,7 +10,7 @@ export default {
     'preferences.auto': 'Auto',
     'preferences.light': 'Light',
     'preferences.dark': 'Dark',
-    'preferences.solarizedDark': 'Solarized Dark',
+    'preferences.sepia': 'Sepia',
     'preferences.noteSorting': 'Note Sorting',
     'preferences.dateUpdated': 'Date Updated',
     'preferences.dateCreated': 'Date Created',
diff --git a/src/lib/i18n/ja.ts b/src/lib/i18n/ja.ts
index 951fb17c77..9288b77374 100644
--- a/src/lib/i18n/ja.ts
+++ b/src/lib/i18n/ja.ts
@@ -10,7 +10,7 @@ export default {
     'preferences.auto': '自動',
     'preferences.light': 'ライト',
     'preferences.dark': 'ダーク',
-    'preferences.solarizedDark': 'Solarized Dark',
+    'preferences.sepia': 'セピア',
     'preferences.noteSorting': 'ノート整列',
     'preferences.dateUpdated': 'アプデート順',
     'preferences.dateCreated': '生成順',
diff --git a/src/lib/preferences/types.ts b/src/lib/preferences/types.ts
index 156b2db66c..1bb8a0a0ce 100644
--- a/src/lib/preferences/types.ts
+++ b/src/lib/preferences/types.ts
@@ -1,6 +1,6 @@
 import { User } from '../accounts'
 
-export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'solarized-dark'
+export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'sepia'
 export type GeneralLanguageOptions = 'en-US' | 'ja'
 export type GeneralNoteSortingOptions =
   | 'date-updated'
diff --git a/src/lib/styled/styleFunctions.ts b/src/lib/styled/styleFunctions.ts
index 2e99930dfe..4f27a7cb0c 100644
--- a/src/lib/styled/styleFunctions.ts
+++ b/src/lib/styled/styleFunctions.ts
@@ -13,6 +13,9 @@ export const secondaryBackgroundColor = ({ theme }: StyledProps) =>
 export const activeBackgroundColor = ({ theme }: StyledProps) =>
   `background-color: ${theme.activeBackgroundColor};`
 
+export const sideBarBackgroundColor = ({ theme }: StyledProps) =>
+  `background-color: ${theme.sideBarBackgroundColor};`
+
 export const iconColor = ({ theme }: StyledProps) => `color: ${theme.iconColor};
 &:hover,
 &:focus {
@@ -46,6 +49,12 @@ transition: 200ms color;
   color: ${theme.disabledUiTextColor};
 }`
 
+export const sideBarTextColor = ({ theme }: StyledProps) =>
+  `color: ${theme.sideBarTextColor};`
+
+export const sideBarSecondaryTextColor = ({ theme }: StyledProps) =>
+  `color: ${theme.sideBarSecondaryTextColor};`
+
 export const borderColor = ({ theme }: StyledProps) =>
   `border-color: ${theme.borderColor};`
 
@@ -79,7 +88,7 @@ color: ${theme.textColor};
 
 export const primaryButtonStyle = ({ theme }: StyledProps) => `border: none;
 background-color: ${theme.primaryColor};
-color: ${theme.textColor};
+color: ${theme.primaryButtonLabelColor};
 font-size: 13px;
 &:focus {
   box-shadow: 0 0 0 2px ${theme.primaryColor};
@@ -88,7 +97,7 @@ font-size: 13px;
 
 export const secondaryButtonStyle = ({ theme }: StyledProps) => `border: none;
 background-color: ${theme.inputBackground};
-color: ${theme.textColor};
+color: ${theme.secondaryButtonLabelColor};
 font-size: 13px;
 &:focus {
   box-shadow: 0 0 0 2px ${theme.primaryColor};
diff --git a/src/lib/styled/themes/dark.ts b/src/lib/styled/themes/dark.ts
new file mode 100644
index 0000000000..0bf64f9392
--- /dev/null
+++ b/src/lib/styled/themes/dark.ts
@@ -0,0 +1,58 @@
+import { BaseTheme } from './types'
+
+const base1Color = '#2c2d30'
+const base2Color = '#1e2022'
+const primaryColor = '#03C588'
+
+const dark26Color = 'rgba(0,0,0,0.26)'
+const light70Color = 'rgba(255,255,255,0.7)'
+const light30Color = 'rgba(255,255,255,0.3)'
+const light12Color = 'rgba(255,255,255,0.12)'
+const light100Color = '#FFF'
+
+export const darkTheme: BaseTheme = {
+  colors: {
+    text: light70Color,
+    deemedText: light30Color,
+    inverseText: light100Color,
+    background: light100Color,
+    alternativeBackground: light12Color,
+    active: primaryColor,
+    border: dark26Color
+  },
+  fontSize: 15,
+  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+
+  // General
+  textColor: light100Color,
+  uiTextColor: light70Color,
+  activeUiTextColor: light100Color,
+  disabledUiTextColor: light30Color,
+
+  primaryColor: primaryColor,
+  borderColor: dark26Color,
+  iconColor: light30Color,
+  activeIconColor: light70Color,
+  backgroundColor: base1Color,
+  secondaryBackgroundColor: base2Color,
+  activeBackgroundColor: base2Color,
+  shadow: '0 3px 5px rgba(0,0,0,0.1)',
+
+  scrollBarTrackColor: base2Color,
+  scrollBarThumbColor: light12Color,
+
+  // SideBar
+  sideBarBackgroundColor: base1Color,
+  sideBarTextColor: light70Color,
+  sideBarSecondaryTextColor: light30Color,
+
+  // Button
+  primaryButtonLabelColor: light100Color,
+  primaryButtonBackgroundColor: primaryColor,
+  secondaryButtonLabelColor: light100Color,
+  secondaryButtonBackgroundColor: 'transparent',
+
+  // Input
+  inputBackground: light12Color
+}
diff --git a/src/lib/styled/themes/default.ts b/src/lib/styled/themes/default.ts
index 6759f74f73..7a21c18516 100644
--- a/src/lib/styled/themes/default.ts
+++ b/src/lib/styled/themes/default.ts
@@ -1,68 +1,64 @@
 import { BaseTheme } from './types'
 
-const textColor = '#333'
-const deemedTextColor = '#999'
-const inverseTextColor = '#FFF'
-const backgroundColor = '#FFF'
-const alternativeBackgroundColor = '#F8F8F8'
-const activeColor = '#63AEFC'
-const borderColor = '#E5E5E5'
-
-const base1Color = '#2c2d30'
-const base2Color = '#1e2022'
+const base1Color = '#ECECEC'
+const base2Color = '#F9F9F9'
+const base3Color = '#2c2d30'
 const primaryColor = '#03C588'
-// const dark87Color = 'rgba(0,0,0,0.87)'
-// const dark54Color = 'rgba(0,0,0,0.54)'
-// const dark26Color = 'rgba(0,0,0,0.26)'
-// const dark12Color = 'rgba(0,0,0,0.12'
+
+const dark87Color = 'rgba(0,0,0,0.87)'
+const dark54Color = 'rgba(0,0,0,0.54)'
+const dark26Color = 'rgba(0,0,0,0.26)'
+const dark12Color = 'rgba(0,0,0,0.12)'
+const dark100Color = '#000'
+
+const light100Color = '#FFF'
 const light70Color = 'rgba(255,255,255,0.7)'
 const light30Color = 'rgba(255,255,255,0.3)'
 const light12Color = 'rgba(255,255,255,0.12)'
-const light100Color = '#FFF'
 
 export const defaultTheme: BaseTheme = {
   colors: {
-    text: textColor,
-    deemedText: deemedTextColor,
-    inverseText: inverseTextColor,
-    background: backgroundColor,
-    alternativeBackground: alternativeBackgroundColor,
-    active: activeColor,
-    border: borderColor
+    text: dark87Color,
+    deemedText: dark26Color,
+    inverseText: light100Color,
+    background: base1Color,
+    alternativeBackground: base2Color,
+    active: primaryColor,
+    border: dark12Color
   },
   fontSize: 15,
   fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
 
   // General
-  textColor: light100Color,
-  uiTextColor: light70Color,
-  activeUiTextColor: light100Color,
-  disabledUiTextColor: light30Color,
+  textColor: dark87Color,
+  uiTextColor: dark54Color,
+  activeUiTextColor: dark100Color,
+  disabledUiTextColor: dark26Color,
 
   primaryColor: primaryColor,
-  borderColor: light12Color,
-  iconColor: light30Color,
-  activeIconColor: light70Color,
+  borderColor: dark12Color,
+  iconColor: dark26Color,
+  activeIconColor: dark54Color,
   backgroundColor: base1Color,
   secondaryBackgroundColor: base2Color,
-  activeBackgroundColor: base2Color,
-  shadow: '0 2px 24px rgba(0,0,0,0.5)',
+  activeBackgroundColor: light12Color,
+  shadow: '0 3px 5px rgba(0,0,0,0.1)',
 
   scrollBarTrackColor: base2Color,
-  scrollBarThumbColor: light12Color,
+  scrollBarThumbColor: dark12Color,
 
   // SideBar
-  sideBarBackgroundColor: base1Color,
+  sideBarBackgroundColor: base3Color,
   sideBarTextColor: light70Color,
   sideBarSecondaryTextColor: light30Color,
 
   // Button
   primaryButtonLabelColor: light100Color,
   primaryButtonBackgroundColor: primaryColor,
-  secondaryButtonLabelColor: light100Color,
+  secondaryButtonLabelColor: dark100Color,
   secondaryButtonBackgroundColor: 'transparent',
 
   // Input
-  inputBackground: light12Color
+  inputBackground: dark12Color
 }
diff --git a/src/lib/styled/themes/light.ts b/src/lib/styled/themes/light.ts
new file mode 100644
index 0000000000..5f9a53c610
--- /dev/null
+++ b/src/lib/styled/themes/light.ts
@@ -0,0 +1,59 @@
+import { BaseTheme } from './types'
+
+const base1Color = '#ECECEC'
+const base2Color = '#F9F9F9'
+const primaryColor = '#03C588'
+
+const dark87Color = 'rgba(0,0,0,0.87)'
+const dark54Color = 'rgba(0,0,0,0.54)'
+const dark26Color = 'rgba(0,0,0,0.26)'
+const dark12Color = 'rgba(0,0,0,0.12)'
+const dark100Color = '#000'
+const light100Color = '#FFF'
+
+export const lightTheme: BaseTheme = {
+  colors: {
+    text: dark87Color,
+    deemedText: dark26Color,
+    inverseText: light100Color,
+    background: base1Color,
+    alternativeBackground: base2Color,
+    active: primaryColor,
+    border: dark12Color
+  },
+  fontSize: 15,
+  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+
+  // General
+  textColor: dark87Color,
+  uiTextColor: dark54Color,
+  activeUiTextColor: dark100Color,
+  disabledUiTextColor: dark26Color,
+
+  primaryColor: primaryColor,
+  borderColor: dark12Color,
+  iconColor: dark26Color,
+  activeIconColor: dark54Color,
+  backgroundColor: base1Color,
+  secondaryBackgroundColor: base2Color,
+  activeBackgroundColor: base2Color,
+  shadow: '0 3px 5px rgba(0,0,0,0.1)',
+
+  scrollBarTrackColor: base2Color,
+  scrollBarThumbColor: dark12Color,
+
+  // SideBar
+  sideBarBackgroundColor: base1Color,
+  sideBarTextColor: dark54Color,
+  sideBarSecondaryTextColor: dark26Color,
+
+  // Button
+  primaryButtonLabelColor: light100Color,
+  primaryButtonBackgroundColor: primaryColor,
+  secondaryButtonLabelColor: dark100Color,
+  secondaryButtonBackgroundColor: 'transparent',
+
+  // Input
+  inputBackground: dark12Color
+}
diff --git a/src/lib/styled/themes/sepia.ts b/src/lib/styled/themes/sepia.ts
new file mode 100644
index 0000000000..b9a192d061
--- /dev/null
+++ b/src/lib/styled/themes/sepia.ts
@@ -0,0 +1,62 @@
+import { BaseTheme } from './types'
+
+const base1Color = '#fdf6e4'
+const base2Color = '#efe8d6'
+const base3Color = '#393733'
+const primaryColor = '#03C588'
+
+const dark54Color = 'rgba(0,0,0,0.54)'
+const dark26Color = 'rgba(0,0,0,0.26)'
+const dark12Color = 'rgba(0,0,0,0.12)'
+
+const light100Color = '#FFF'
+const light70Color = 'rgba(255,255,255,0.7)'
+const light30Color = 'rgba(255,255,255,0.3)'
+const light12Color = 'rgba(255,255,255,0.12)'
+
+export const sepiaTheme: BaseTheme = {
+  colors: {
+    text: base3Color,
+    deemedText: dark26Color,
+    inverseText: light100Color,
+    background: base1Color,
+    alternativeBackground: base2Color,
+    active: primaryColor,
+    border: dark12Color
+  },
+  fontSize: 15,
+  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+
+  // General
+  textColor: base3Color,
+  uiTextColor: base3Color,
+  activeUiTextColor: base3Color,
+  disabledUiTextColor: dark26Color,
+
+  primaryColor: primaryColor,
+  borderColor: dark12Color,
+  iconColor: dark26Color,
+  activeIconColor: dark54Color,
+  backgroundColor: base1Color,
+  secondaryBackgroundColor: base2Color,
+  activeBackgroundColor: light12Color,
+  shadow: '0 3px 5px rgba(0,0,0,0.1)',
+
+  scrollBarTrackColor: base2Color,
+  scrollBarThumbColor: dark12Color,
+
+  // SideBar
+  sideBarBackgroundColor: base3Color,
+  sideBarTextColor: light70Color,
+  sideBarSecondaryTextColor: light30Color,
+
+  // Button
+  primaryButtonLabelColor: light100Color,
+  primaryButtonBackgroundColor: primaryColor,
+  secondaryButtonLabelColor: base3Color,
+  secondaryButtonBackgroundColor: 'transparent',
+
+  // Input
+  inputBackground: dark12Color
+}