diff --git a/src/components/App.tsx b/src/components/App.tsx
index f0dff79aef..5b0a0bd5eb 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3,28 +3,28 @@ import SideNavigator from './SideNavigator'
 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 { solarizedDarkTheme } from '../lib/styled/themes/solarizedDark'
+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 { solarizedDarkTheme } from 'Lib/styled/themes/solarizedDark'
 import { StyledAppContainer } from './styled'
 import ContextMenu from './ContextMenu'
 import Dialog from './Dialog/Dialog'
-import { useDb } from '../lib/db'
+import { useDb } from 'Lib/db'
 import TwoPaneLayout from './atoms/TwoPaneLayout'
 import PreferencesModal from './PreferencesModal/PreferencesModal'
-import { useGlobalKeyDownHandler, isWithGeneralCtrlKey } from '../lib/keyboard'
-import { usePreferences } from '../lib/preferences'
-import '../lib/i18n'
-import '../lib/analytics'
+import { useGlobalKeyDownHandler, isWithGeneralCtrlKey } from 'Lib/keyboard'
+import { usePreferences } from 'Lib/preferences'
+import 'Lib/i18n'
+import 'Lib/analytics'
 import CodeMirrorStyle from './CodeMirrorStyle'
-import { useGeneralStatus } from '../lib/generalStatus'
+import { useGeneralStatus } from 'Lib/generalStatus'
 import Modal from './Modal'
 import ToastList from './Toast'
-import { useToast } from '../lib/toast'
-import { useUsers } from '../lib/accounts'
-import styled from '../lib/styled'
+import { useToast } from 'Lib/toast'
+import { useUsers } from 'Lib/accounts'
+import styled from 'Lib/styled'
 
 export const LoadingText = styled.div`
   margin: 30px;
diff --git a/src/components/AttachmentsPage/AttachmentList.tsx b/src/components/AttachmentsPage/AttachmentList.tsx
index e2c3c23555..12796db636 100644
--- a/src/components/AttachmentsPage/AttachmentList.tsx
+++ b/src/components/AttachmentsPage/AttachmentList.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react'
-import styled from '../../lib/styled'
-import { NoteStorage, Attachment } from '../../lib/db/types'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
-import { downloadBlob } from '../../lib/download'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { useDb } from '../../lib/db'
+import styled from 'Lib/styled'
+import { NoteStorage, Attachment } from 'Lib/db/types'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
+import { downloadBlob } from 'Lib/download'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { useDb } from 'Lib/db'
 
 const ListContainer = styled.div`
   display: flex;
diff --git a/src/components/AttachmentsPage/AttachmentsPage.tsx b/src/components/AttachmentsPage/AttachmentsPage.tsx
index 990d82b7ea..05f380b374 100644
--- a/src/components/AttachmentsPage/AttachmentsPage.tsx
+++ b/src/components/AttachmentsPage/AttachmentsPage.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { StorageAttachmentsRouteParams, useRouteParams } from '../../lib/router'
-import { useDb } from '../../lib/db'
-import styled from '../../lib/styled'
-import { getFileList } from '../../lib/dnd'
-import { borderBottom } from '../../lib/styled/styleFunctions'
+import { StorageAttachmentsRouteParams, useRouteParams } from 'Lib/router'
+import { useDb } from 'Lib/db'
+import styled from 'Lib/styled'
+import { getFileList } from 'Lib/dnd'
+import { borderBottom } from 'Lib/styled/styleFunctions'
 import AttachmentList from './AttachmentList'
 
 const Container = styled.div`
diff --git a/src/components/CodeMirrorStyle.tsx b/src/components/CodeMirrorStyle.tsx
index ebc49b664f..742924771e 100644
--- a/src/components/CodeMirrorStyle.tsx
+++ b/src/components/CodeMirrorStyle.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { usePreferences } from '../lib/preferences'
+import { usePreferences } from 'Lib/preferences'
 import isElectron from 'is-electron'
 
 interface ThemeLinkProps {
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index aff928c93b..766a6c5292 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -4,7 +4,7 @@ import {
   useContextMenu,
   MenuTypes,
   ContextMenuContext
-} from '../../lib/contextMenu'
+} from 'Lib/contextMenu'
 
 interface ContextMenuProps {
   contextMenu: ContextMenuContext
diff --git a/src/components/ContextMenu/styled.ts b/src/components/ContextMenu/styled.ts
index 98dec151fa..131a444674 100644
--- a/src/components/ContextMenu/styled.ts
+++ b/src/components/ContextMenu/styled.ts
@@ -1,16 +1,16 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   menuHeight,
   menuVerticalPadding,
   menuZIndex
-} from '../../lib/contextMenu'
+} from 'Lib/contextMenu'
 import {
   uiTextColor,
   contextMenuShadow,
   borderColor,
   backgroundColor,
   activeBackgroundColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 export const StyledContextMenu = styled.div`
   min-width: 130px;
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 263ee98e03..d3959083b3 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { useDialog } from '../../lib/dialog'
+import { useDialog } from 'Lib/dialog'
 import DialogIcon from './DialogIcon'
 import PromptDialogBody from './PromptDialogBody'
-import { DialogTypes, DialogData } from '../../lib/dialog/types'
+import { DialogTypes, DialogData } from 'Lib/dialog/types'
 import { StyledDialog, StyledDialogBackground } from './styled'
 import MessageBoxDialogBody from './MessageBoxDialogBody'
 
diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx
index 902c0214f1..64af06a809 100644
--- a/src/components/Dialog/DialogIcon.tsx
+++ b/src/components/Dialog/DialogIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DialogIconTypes } from '../../lib/dialog/types'
+import { DialogIconTypes } from 'Lib/dialog/types'
 import { StyledIcon } from './styled'
 
 type DialogIconProps = {
diff --git a/src/components/Dialog/MessageBoxDialogBody.tsx b/src/components/Dialog/MessageBoxDialogBody.tsx
index 233a76ce49..cbb573a7ff 100644
--- a/src/components/Dialog/MessageBoxDialogBody.tsx
+++ b/src/components/Dialog/MessageBoxDialogBody.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEventHandler, KeyboardEventHandler } from 'react'
-import { MessageBoxDialogData } from '../../lib/dialog/types'
+import { MessageBoxDialogData } from 'Lib/dialog/types'
 import {
   StyledDialogBody,
   StyledDialogTitle,
diff --git a/src/components/Dialog/PromptDialogBody.tsx b/src/components/Dialog/PromptDialogBody.tsx
index debd6b628c..55b4122c46 100644
--- a/src/components/Dialog/PromptDialogBody.tsx
+++ b/src/components/Dialog/PromptDialogBody.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEventHandler, KeyboardEventHandler } from 'react'
-import { PromptDialogOptions } from '../../lib/dialog/types'
+import { PromptDialogOptions } from 'Lib/dialog/types'
 import {
   StyledDialogBody,
   StyledDialogTitle,
diff --git a/src/components/Dialog/styled.ts b/src/components/Dialog/styled.ts
index c28946c077..66c5dd3181 100644
--- a/src/components/Dialog/styled.ts
+++ b/src/components/Dialog/styled.ts
@@ -1,10 +1,10 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   border,
   backgroundColor,
   inputStyle,
   secondaryButtonStyle
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 const dialogZIndex = 8000
 
diff --git a/src/components/GlobalStyle.tsx b/src/components/GlobalStyle.tsx
index 9114d9bdd3..0200628f23 100644
--- a/src/components/GlobalStyle.tsx
+++ b/src/components/GlobalStyle.tsx
@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components'
-import { backgroundColor, textColor } from '../lib/styled/styleFunctions'
-import { BaseTheme } from '../lib/styled/themes/types'
+import { backgroundColor, textColor } from 'Lib/styled/styleFunctions'
+import { BaseTheme } from 'Lib/styled/themes/types'
 
 export default createGlobalStyle<BaseTheme>`
   body {
@@ -30,7 +30,7 @@ export default createGlobalStyle<BaseTheme>`
   a {
     color: inherit;
   }
-  
+
   /* total width */
   ::-webkit-scrollbar {
     background-color: transparent;
diff --git a/src/components/Modal/contents/styled.ts b/src/components/Modal/contents/styled.ts
index fa516345c4..bea5b1a88a 100644
--- a/src/components/Modal/contents/styled.ts
+++ b/src/components/Modal/contents/styled.ts
@@ -1,5 +1,5 @@
-import styled from '../../../lib/styled'
-import { textColor } from '../../../lib/styled/styleFunctions'
+import styled from 'Lib/styled'
+import { textColor } from 'Lib/styled/styleFunctions'
 
 export const ModalContainer = styled.div`
   width: 100%;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 0dae9ab921..89a060c41b 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo, useCallback } from 'react'
-import { useGlobalKeyDownHandler } from '../../lib/keyboard'
-import { useModal } from '../../lib/modal/store'
+import { useGlobalKeyDownHandler } from 'Lib/keyboard'
+import { useModal } from 'Lib/modal/store'
 import {
   StyledModalsBackground,
   StyledModalsContainer,
   StyledModalsSkipButton
 } from './styled'
-import { usePreferences } from '../../lib/preferences'
+import { usePreferences } from 'Lib/preferences'
 import DownloadOurAppModal from './contents/DownloadOurAppModal'
 import { IconArrowSingleRight } from '../icons'
 
diff --git a/src/components/Modal/styled.ts b/src/components/Modal/styled.ts
index 20c7fe1715..316ca666e2 100644
--- a/src/components/Modal/styled.ts
+++ b/src/components/Modal/styled.ts
@@ -1,10 +1,10 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   border,
   backgroundColor,
   contextMenuShadow,
   iconColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 const zIndexModalsBackground = 8001
 
diff --git a/src/components/NotePage/NoteDetail/NoteDetail.tsx b/src/components/NotePage/NoteDetail/NoteDetail.tsx
index 55763147db..7f8fde95eb 100644
--- a/src/components/NotePage/NoteDetail/NoteDetail.tsx
+++ b/src/components/NotePage/NoteDetail/NoteDetail.tsx
@@ -5,10 +5,10 @@ import {
   NoteDocEditibleProps,
   Attachment,
   PopulatedNoteDoc
-} from '../../../lib/db/types'
-import { isTagNameValid } from '../../../lib/db/utils'
+} from 'Lib/db/types'
+import { isTagNameValid } from 'Lib/db/utils'
 import TagList from './TagList'
-import styled from '../../../lib/styled'
+import styled from 'Lib/styled'
 import CustomizedCodeEditor from '../../atoms/CustomizedCodeEditor'
 import CustomizedMarkdownPreviewer from '../../atoms/CustomizedMarkdownPreviewer'
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
@@ -21,10 +21,10 @@ import {
   borderRight,
   uiTextColor,
   PrimaryTextColor
-} from '../../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 import ToolbarExportButton from '../../atoms/ToolbarExportButton'
-import { getFileList } from '../../../lib/dnd'
-import { ViewModeType } from '../../../lib/generalStatus'
+import { getFileList } from 'Lib/dnd'
+import { ViewModeType } from 'Lib/generalStatus'
 import { BreadCrumbs } from '../NotePage'
 import cc from 'classcat'
 import {
@@ -37,7 +37,7 @@ import {
 import {
   listenNoteDetailFocusTitleInputEvent,
   unlistenNoteDetailFocusTitleInputEvent
-} from '../../../lib/events'
+} from 'Lib/events'
 
 export const StyledNoteDetailContainer = styled.div`
   ${secondaryBackgroundColor}
diff --git a/src/components/NotePage/NoteDetail/TagList.tsx b/src/components/NotePage/NoteDetail/TagList.tsx
index 202908995a..ef32d58e74 100644
--- a/src/components/NotePage/NoteDetail/TagList.tsx
+++ b/src/components/NotePage/NoteDetail/TagList.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import ButtonIcon from '../../atoms/ButtonIcon'
-import styled from '../../../lib/styled'
-import { iconColor, noteListIconColor, inputStyle } from '../../../lib/styled/styleFunctions'
+import styled from 'Lib/styled'
+import { iconColor, noteListIconColor, inputStyle } from 'Lib/styled/styleFunctions'
 import { IconTag, IconClose } from '../../icons'
 
 interface TagListItemProps {
diff --git a/src/components/NotePage/NoteList/NoteItem.tsx b/src/components/NotePage/NoteList/NoteItem.tsx
index 7ea2d33127..28543bb27f 100644
--- a/src/components/NotePage/NoteList/NoteItem.tsx
+++ b/src/components/NotePage/NoteList/NoteItem.tsx
@@ -1,21 +1,21 @@
 import React, { useMemo, useCallback } from 'react'
-import { Link } from '../../../lib/router'
-import styled from '../../../lib/styled/styled'
+import { Link } from 'Lib/router'
+import styled from 'Lib/styled/styled'
 import {
   borderBottom,
   uiTextColor,
   secondaryBackgroundColor,
   inputStyle
-} from '../../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 import cc from 'classcat'
-import { setTransferrableNoteData } from '../../../lib/dnd'
+import { setTransferrableNoteData } from 'Lib/dnd'
 import HighlightText from '../../atoms/HighlightText'
 import { formatDistanceToNow } from 'date-fns'
-import { scaleAndTransformFromLeft } from '../../../lib/styled'
-import { PopulatedNoteDoc } from '../../../lib/db/types'
-import { useContextMenu, MenuTypes, MenuItem } from '../../../lib/contextMenu'
-import { useDb } from '../../../lib/db'
-import { useDialog, DialogIconTypes } from '../../../lib/dialog'
+import { scaleAndTransformFromLeft } from 'Lib/styled'
+import { PopulatedNoteDoc } from 'Lib/db/types'
+import { useContextMenu, MenuTypes, MenuItem } from 'Lib/contextMenu'
+import { useDb } from 'Lib/db'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
 import { useTranslation } from 'react-i18next'
 
 export const StyledNoteListItem = styled.div`
diff --git a/src/components/NotePage/NoteList/NoteList.tsx b/src/components/NotePage/NoteList/NoteList.tsx
index 26df51af9a..1ffc9d6bbb 100644
--- a/src/components/NotePage/NoteList/NoteList.tsx
+++ b/src/components/NotePage/NoteList/NoteList.tsx
@@ -1,22 +1,22 @@
 import React, { useCallback, useRef, ChangeEventHandler } from 'react'
 import NoteItem from './NoteItem'
-import { PopulatedNoteDoc } from '../../../lib/db/types'
-import styled from '../../../lib/styled'
+import { PopulatedNoteDoc } from 'Lib/db/types'
+import styled from 'Lib/styled'
 import {
   borderBottom,
   inputStyle,
   iconColor,
   noteListIconColor,
   selectTabStyle
-} from '../../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 import { IconEdit, IconLoupe, IconArrowSingleDown } from '../../icons'
 import { useTranslation } from 'react-i18next'
 import {
   useGlobalKeyDownHandler,
   isWithGeneralCtrlKey
-} from '../../../lib/keyboard'
+} from 'Lib/keyboard'
 import { NoteListSortOptions } from '../NotePage'
-import { osName } from '../../../lib/utils'
+import { osName } from 'Lib/utils'
 
 export const StyledNoteListContainer = styled.div`
   display: flex;
diff --git a/src/components/NotePage/NotePage.tsx b/src/components/NotePage/NotePage.tsx
index eb6664ab7a..efd1a209d9 100644
--- a/src/components/NotePage/NotePage.tsx
+++ b/src/components/NotePage/NotePage.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react'
 import NoteList from './NoteList'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import NoteDetail from './NoteDetail'
 import {
   useRouteParams,
@@ -11,19 +11,19 @@ import {
   usePathnameWithoutNoteId,
   useRouter,
   StorageBookmarkNotes
-} from '../../lib/router'
-import { useDb } from '../../lib/db'
+} from 'Lib/router'
+import { useDb } from 'Lib/db'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
-import { PopulatedNoteDoc, NoteStorage, ObjectMap } from '../../lib/db/types'
-import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { escapeRegExp } from '../../lib/regex'
+import { PopulatedNoteDoc, NoteStorage, ObjectMap } from 'Lib/db/types'
+import { useGeneralStatus, ViewModeType } from 'Lib/generalStatus'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { escapeRegExp } from 'Lib/regex'
 import { useTranslation } from 'react-i18next'
 import {
   useGlobalKeyDownHandler,
   isWithGeneralCtrlKey
-} from '../../lib/keyboard'
-import { dispatchNoteDetailFocusTitleInputEvent } from '../../lib/events'
+} from 'Lib/keyboard'
+import { dispatchNoteDetailFocusTitleInputEvent } from 'Lib/events'
 
 export const StyledNoteDetailNoNote = styled.div`
   text-align: center;
diff --git a/src/components/PreferencesModal/AboutTab.tsx b/src/components/PreferencesModal/AboutTab.tsx
index 5feb7b5930..5844b0aa39 100644
--- a/src/components/PreferencesModal/AboutTab.tsx
+++ b/src/components/PreferencesModal/AboutTab.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   Section,
   SectionHeader,
   SectionSubtleText,
   PrimaryAnchor
 } from './styled'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from 'Lib/utils/platform'
 import Image from '../atoms/Image'
 import AppLink from '../atoms/AppLink'
 import { useTranslation } from 'react-i18next'
diff --git a/src/components/PreferencesModal/BillingTab.tsx b/src/components/PreferencesModal/BillingTab.tsx
index 475ca031e0..985dfd7431 100644
--- a/src/components/PreferencesModal/BillingTab.tsx
+++ b/src/components/PreferencesModal/BillingTab.tsx
@@ -6,11 +6,11 @@ import {
   SectionSecondaryButton,
   SectionTable
 } from './styled'
-import styled from '../../lib/styled'
-import { usePreferences } from '../../lib/preferences'
-import { getSubscription, Subscription } from '../../lib/accounts'
+import styled from 'Lib/styled'
+import { usePreferences } from 'Lib/preferences'
+import { getSubscription, Subscription } from 'Lib/accounts'
 import LoginButton from '../atoms/LoginButton'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from 'Lib/utils/platform'
 import { useTranslation } from 'react-i18next'
 
 const BillingContent = styled.div`
diff --git a/src/components/PreferencesModal/EditorTab.tsx b/src/components/PreferencesModal/EditorTab.tsx
index aaf05b43ac..ae2041cfa3 100644
--- a/src/components/PreferencesModal/EditorTab.tsx
+++ b/src/components/PreferencesModal/EditorTab.tsx
@@ -18,13 +18,13 @@ import {
   EditorIndentTypeOptions,
   EditorIndentSizeOptions,
   EditorKeyMapOptions
-} from '../../lib/preferences'
-import { SelectChangeEventHandler } from '../../lib/events'
-import { themes } from '../../lib/CodeMirror'
-import { capitalize } from '../../lib/string'
+} from 'Lib/preferences'
+import { SelectChangeEventHandler } from 'Lib/events'
+import { themes } from 'Lib/CodeMirror'
+import { capitalize } from 'Lib/string'
 import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
 import { useDebounce } from 'react-use'
-import { useAnalytics, analyticsEvents } from '../../lib/analytics'
+import { useAnalytics, analyticsEvents } from 'Lib/analytics'
 
 const defaultPreviewContent = `# hello-world.js
 
diff --git a/src/components/PreferencesModal/GeneralTab.tsx b/src/components/PreferencesModal/GeneralTab.tsx
index 4294715cb5..b482543397 100644
--- a/src/components/PreferencesModal/GeneralTab.tsx
+++ b/src/components/PreferencesModal/GeneralTab.tsx
@@ -12,13 +12,13 @@ import {
   GeneralLanguageOptions,
   GeneralNoteSortingOptions,
   GeneralTutorialsOptions
-} from '../../lib/preferences'
+} from 'Lib/preferences'
 import { useTranslation } from 'react-i18next'
-import { SelectChangeEventHandler } from '../../lib/events'
-import { useUsers } from '../../lib/accounts'
+import { SelectChangeEventHandler } from 'Lib/events'
+import { useUsers } from 'Lib/accounts'
 import UserInfo from './UserInfo'
 import LoginButton from '../atoms/LoginButton'
-import { useAnalytics, analyticsEvents } from '../../lib/analytics'
+import { useAnalytics, analyticsEvents } from 'Lib/analytics'
 import { IconArrowRotate } from '../icons'
 
 const GeneralTab = () => {
diff --git a/src/components/PreferencesModal/ImportTab.tsx b/src/components/PreferencesModal/ImportTab.tsx
index 9d212b326a..e79ad8bd34 100644
--- a/src/components/PreferencesModal/ImportTab.tsx
+++ b/src/components/PreferencesModal/ImportTab.tsx
@@ -7,21 +7,21 @@ import {
   SectionPrimaryButton,
   SectionHeader2
 } from './styled'
-import { useDb } from '../../lib/db'
-import { entries } from '../../lib/db/utils'
+import { useDb } from 'Lib/db'
+import { entries } from 'Lib/db/utils'
 import FileDropZone from '../atoms/FileDropZone'
 import {
   convertCSONFileToNote,
   ParsedNote,
   ParseErrors
-} from '../../lib/legacy-import'
-import styled from '../../lib/styled'
+} from 'Lib/legacy-import'
+import styled from 'Lib/styled'
 import {
   secondaryBackgroundColor,
   border,
   textColor
-} from '../../lib/styled/styleFunctions'
-import { useToast } from '../../lib/toast'
+} from 'Lib/styled/styleFunctions'
+import { useToast } from 'Lib/toast'
 import { useTranslation } from 'react-i18next'
 
 interface Success {
diff --git a/src/components/PreferencesModal/MarkdownTab.tsx b/src/components/PreferencesModal/MarkdownTab.tsx
index 922a5cae42..04fa1bf0b9 100644
--- a/src/components/PreferencesModal/MarkdownTab.tsx
+++ b/src/components/PreferencesModal/MarkdownTab.tsx
@@ -9,14 +9,14 @@ import {
 } from './styled'
 import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
 import CustomizedMarkdownPreviewer from '../atoms/CustomizedMarkdownPreviewer'
-import { usePreferences } from '../../lib/preferences'
-import styled from '../../lib/styled'
-import { SelectChangeEventHandler } from '../../lib/events'
-import { themes } from '../../lib/CodeMirror'
-import { capitalize } from '../../lib/string'
+import { usePreferences } from 'Lib/preferences'
+import styled from 'Lib/styled'
+import { SelectChangeEventHandler } from 'Lib/events'
+import { themes } from 'Lib/CodeMirror'
+import { capitalize } from 'Lib/string'
 import { useTranslation } from 'react-i18next'
-import { usePreviewStyle, defaultPreviewStyle } from '../../lib/preview'
-import { borderRight, border } from '../../lib/styled/styleFunctions'
+import { usePreviewStyle, defaultPreviewStyle } from 'Lib/preview'
+import { borderRight, border } from 'Lib/styled/styleFunctions'
 
 const EditorContainer = styled.div`
   ${border}
diff --git a/src/components/PreferencesModal/PreferencesModal.tsx b/src/components/PreferencesModal/PreferencesModal.tsx
index 70365a8e9d..675bb95e3b 100644
--- a/src/components/PreferencesModal/PreferencesModal.tsx
+++ b/src/components/PreferencesModal/PreferencesModal.tsx
@@ -1,15 +1,15 @@
 import React, { useState, useMemo } from 'react'
-import styled from '../../lib/styled'
-import { usePreferences } from '../../lib/preferences'
+import styled from 'Lib/styled'
+import { usePreferences } from 'Lib/preferences'
 import TabButton from './TabButton'
-import { useGlobalKeyDownHandler } from '../../lib/keyboard'
+import { useGlobalKeyDownHandler } from 'Lib/keyboard'
 import GeneralTab from './GeneralTab'
 import EditorTab from './EditorTab'
 import MarkdownTab from './MarkdownTab'
 import AboutTab from './AboutTab'
 import BillingTab from './BillingTab'
 import ImportTab from './ImportTab'
-import { backgroundColor, closeIconColor } from '../../lib/styled/styleFunctions'
+import { backgroundColor, closeIconColor } from 'Lib/styled/styleFunctions'
 import { IconClose } from '../icons'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/components/PreferencesModal/TabButton.tsx b/src/components/PreferencesModal/TabButton.tsx
index 8b3165fd5f..51e0cc289f 100644
--- a/src/components/PreferencesModal/TabButton.tsx
+++ b/src/components/PreferencesModal/TabButton.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 
 interface TabButtonProps {
   label: string
diff --git a/src/components/PreferencesModal/UserInfo.tsx b/src/components/PreferencesModal/UserInfo.tsx
index c40326527c..f1749ab044 100644
--- a/src/components/PreferencesModal/UserInfo.tsx
+++ b/src/components/PreferencesModal/UserInfo.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { User } from '../../lib/accounts/users'
-import styled from '../../lib/styled'
+import { User } from 'Lib/accounts/users'
+import styled from 'Lib/styled'
 import MdiIcon from '@mdi/react'
 import { mdiAccount } from '@mdi/js'
 import { SectionPrimaryButton } from './styled'
diff --git a/src/components/PreferencesModal/styled.tsx b/src/components/PreferencesModal/styled.tsx
index 734ea1aceb..aa1ca42bbf 100644
--- a/src/components/PreferencesModal/styled.tsx
+++ b/src/components/PreferencesModal/styled.tsx
@@ -1,4 +1,4 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   selectStyle,
   primaryButtonStyle,
@@ -7,7 +7,7 @@ import {
   tableStyle,
   disabledUiTextColor,
   PrimaryTextColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 export const Section = styled.section`
   margin-bottom: 2em;
diff --git a/src/components/Router.tsx b/src/components/Router.tsx
index 1731ee561c..fe6edc664d 100644
--- a/src/components/Router.tsx
+++ b/src/components/Router.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import NotePage from './NotePage'
-import { useRouteParams } from '../lib/router'
+import { useRouteParams } from 'Lib/router'
 import { StyledNotFoundPage } from './styled'
 import { StorageEdit, StorageCreate } from './Storage'
-import { useDb } from '../lib/db'
+import { useDb } from 'Lib/db'
 import AttachmentsPage from './AttachmentsPage/AttachmentsPage'
 import TutorialsPage from './Tutorials/TutorialsPage'
-import useRedirectHandler from '../lib/router/redirect'
+import useRedirectHandler from 'Lib/router/redirect'
 
 export default () => {
   const routeParams = useRouteParams()
diff --git a/src/components/SideNavigator/ControlButton.tsx b/src/components/SideNavigator/ControlButton.tsx
index 3bb496dc02..38bb65e7a8 100644
--- a/src/components/SideNavigator/ControlButton.tsx
+++ b/src/components/SideNavigator/ControlButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   sideBarTextColor,
   sideBarSecondaryTextColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 const StyledButton = styled.button`
   position: relative;
diff --git a/src/components/SideNavigator/FolderListFragment.tsx b/src/components/SideNavigator/FolderListFragment.tsx
index e5716aae33..9bfa8a2ba8 100644
--- a/src/components/SideNavigator/FolderListFragment.tsx
+++ b/src/components/SideNavigator/FolderListFragment.tsx
@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react'
-import { useDb } from '../../lib/db'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
+import { useDb } from 'Lib/db'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
 import SideNavigatorItem from './SideNavigatorItem'
-import { NoteStorage } from '../../lib/db/types'
-import { usePathnameWithoutNoteId, useRouter } from '../../lib/router'
-import { useGeneralStatus } from '../../lib/generalStatus'
+import { NoteStorage } from 'Lib/db/types'
+import { usePathnameWithoutNoteId, useRouter } from 'Lib/router'
+import { useGeneralStatus } from 'Lib/generalStatus'
 import ControlButton from './ControlButton'
-import { getFolderItemId } from '../../lib/nav'
-import { getTransferrableNoteData } from '../../lib/dnd'
+import { getFolderItemId } from 'Lib/nav'
+import { getTransferrableNoteData } from 'Lib/dnd'
 import { IconAddRound, IconFile, IconFileOpen } from '../icons'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/components/SideNavigator/SideNavigator.tsx b/src/components/SideNavigator/SideNavigator.tsx
index 9539409ba4..95b3b05077 100644
--- a/src/components/SideNavigator/SideNavigator.tsx
+++ b/src/components/SideNavigator/SideNavigator.tsx
@@ -1,25 +1,25 @@
 import React, { useMemo, useCallback } from 'react'
-import { useRouter, usePathnameWithoutNoteId } from '../../lib/router'
-import { useDb } from '../../lib/db'
-import { entries } from '../../lib/db/utils'
-import styled from '../../lib/styled'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
-import { usePreferences } from '../../lib/preferences'
+import { useRouter, usePathnameWithoutNoteId } from 'Lib/router'
+import { useDb } from 'Lib/db'
+import { entries } from 'Lib/db/utils'
+import styled from 'Lib/styled'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
+import { usePreferences } from 'Lib/preferences'
 import {
   sideBarBackgroundColor,
   sideBarDefaultTextColor,
   iconColor,
   sideBarTextColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 import SideNavigatorItem from './SideNavigatorItem'
-import { useGeneralStatus } from '../../lib/generalStatus'
+import { useGeneralStatus } from 'Lib/generalStatus'
 import ControlButton from './ControlButton'
 import FolderListFragment from './FolderListFragment'
 import TagListFragment from './TagListFragment'
 import TutorialsNavigator from '../Tutorials/TutorialsNavigator'
-import { useUsers } from '../../lib/accounts'
-import { useToast } from '../../lib/toast'
+import { useUsers } from 'Lib/accounts'
+import { useToast } from 'Lib/toast'
 import { useTranslation } from 'react-i18next'
 import {
   IconAddRound,
diff --git a/src/components/SideNavigator/SideNavigatorItem.tsx b/src/components/SideNavigator/SideNavigatorItem.tsx
index a29f544a41..e10e8acf9d 100644
--- a/src/components/SideNavigator/SideNavigatorItem.tsx
+++ b/src/components/SideNavigator/SideNavigatorItem.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import cc from 'classcat'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   sideBarTextColor,
   sideBarSecondaryTextColor,
   activeBackgroundColor,
   iconColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 import { IconArrowSingleRight, IconArrowSingleDown } from '../icons'
 
 const Container = styled.div`
diff --git a/src/components/SideNavigator/TagListFragment.tsx b/src/components/SideNavigator/TagListFragment.tsx
index db25f473ae..d55694fed9 100644
--- a/src/components/SideNavigator/TagListFragment.tsx
+++ b/src/components/SideNavigator/TagListFragment.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react'
 import SideNavigatorItem from './SideNavigatorItem'
-import { NoteStorage } from '../../lib/db/types'
-import { useGeneralStatus } from '../../lib/generalStatus'
-import { getTagListItemId } from '../../lib/nav'
-import { useRouter, usePathnameWithoutNoteId } from '../../lib/router'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { useDb } from '../../lib/db'
+import { NoteStorage } from 'Lib/db/types'
+import { useGeneralStatus } from 'Lib/generalStatus'
+import { getTagListItemId } from 'Lib/nav'
+import { useRouter, usePathnameWithoutNoteId } from 'Lib/router'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { useDb } from 'Lib/db'
 import { IconTag, IconTags, IconTagFill } from '../icons'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/components/Storage/StorageCreate.tsx b/src/components/Storage/StorageCreate.tsx
index d2745728a5..965f71a784 100644
--- a/src/components/Storage/StorageCreate.tsx
+++ b/src/components/Storage/StorageCreate.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { usePreferences } from '../../lib/preferences'
+import { usePreferences } from 'Lib/preferences'
 import {
   SectionMargin,
   SectionHeader1,
@@ -8,10 +8,10 @@ import {
   SectionPrimaryButton
 } from '../PreferencesModal/styled'
 import { useTranslation } from 'react-i18next'
-import { useDb } from '../../lib/db'
+import { useDb } from 'Lib/db'
 import LoginButton from '../atoms/LoginButton'
-import { useToast } from '../../lib/toast'
-import { useRouter } from '../../lib/router'
+import { useToast } from 'Lib/toast'
+import { useRouter } from 'Lib/router'
 
 export default () => {
   const db = useDb()
diff --git a/src/components/Storage/StorageEdit.tsx b/src/components/Storage/StorageEdit.tsx
index d31febebb2..6c3cdbde1e 100644
--- a/src/components/Storage/StorageEdit.tsx
+++ b/src/components/Storage/StorageEdit.tsx
@@ -5,13 +5,13 @@ import {
   RightMargin,
   DeleteStorageButton
 } from '../PreferencesModal/styled'
-import { useDb } from '../../lib/db'
-import { NoteStorage } from '../../lib/db/types'
-import { useRouter } from '../../lib/router'
+import { useDb } from 'Lib/db'
+import { NoteStorage } from 'Lib/db/types'
+import { useRouter } from 'Lib/router'
 import { useDebounce } from 'react-use'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { isCloudStorageData } from '../../lib/db/utils'
-import { useToast } from '../../lib/toast'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { isCloudStorageData } from 'Lib/db/utils'
+import { useToast } from 'Lib/toast'
 import { useTranslation } from 'react-i18next'
 
 interface StorageEditProps {
diff --git a/src/components/Toast/ToastItem.tsx b/src/components/Toast/ToastItem.tsx
index 18ac4f0b0a..62c624218f 100644
--- a/src/components/Toast/ToastItem.tsx
+++ b/src/components/Toast/ToastItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ToastMessage } from '../../lib/toast'
+import { ToastMessage } from 'Lib/toast'
 import {
   StyledToastContainer,
   StyledToastTop,
diff --git a/src/components/Toast/ToastList.tsx b/src/components/Toast/ToastList.tsx
index ef7a671b75..8155774af7 100644
--- a/src/components/Toast/ToastList.tsx
+++ b/src/components/Toast/ToastList.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { useToast } from '../../lib/toast'
+import { useToast } from 'Lib/toast'
 import ToastItem from './ToastItem'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 
 const StyledToastList = styled.ul`
   position: fixed;
diff --git a/src/components/Toast/styled.tsx b/src/components/Toast/styled.tsx
index 97ef9079e2..0f292078a7 100644
--- a/src/components/Toast/styled.tsx
+++ b/src/components/Toast/styled.tsx
@@ -1,8 +1,8 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import {
   secondaryBackgroundColor,
   iconColor
-} from '../../lib/styled/styleFunctions'
+} from 'Lib/styled/styleFunctions'
 
 export const StyledToastContainer = styled.div`
   width: 350px;
diff --git a/src/components/Tutorials/TutorialsNavigator.tsx b/src/components/Tutorials/TutorialsNavigator.tsx
index c9ae69610d..c40f260e8b 100644
--- a/src/components/Tutorials/TutorialsNavigator.tsx
+++ b/src/components/Tutorials/TutorialsNavigator.tsx
@@ -1,11 +1,11 @@
 import React, { useMemo, useCallback } from 'react'
-import { tutorialsTree, TutorialsNavigatorTreeItem } from '../../lib/tutorials'
+import { tutorialsTree, TutorialsNavigatorTreeItem } from 'Lib/tutorials'
 import SideNavigatorItem from '../SideNavigator/SideNavigatorItem'
-import { useRouter, useCurrentTutorialPathname } from '../../lib/router'
-import { useGeneralStatus } from '../../lib/generalStatus'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
-import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { usePreferences } from '../../lib/preferences'
+import { useRouter, useCurrentTutorialPathname } from 'Lib/router'
+import { useGeneralStatus } from 'Lib/generalStatus'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
+import { useDialog, DialogIconTypes } from 'Lib/dialog'
+import { usePreferences } from 'Lib/preferences'
 import { IconFile, IconFileOpen, IconHelpOutline } from '../icons'
 
 interface NavigatorNode {
diff --git a/src/components/Tutorials/TutorialsNoteDetail.tsx b/src/components/Tutorials/TutorialsNoteDetail.tsx
index 4847a556da..c6ab2ad2d6 100644
--- a/src/components/Tutorials/TutorialsNoteDetail.tsx
+++ b/src/components/Tutorials/TutorialsNoteDetail.tsx
@@ -4,9 +4,9 @@ import CustomizedMarkdownPreviewer from '../atoms/CustomizedMarkdownPreviewer'
 import ToolbarIconButton from '../atoms/ToolbarIconButton'
 import Toolbar from '../atoms/Toolbar'
 import ToolbarSeparator from '../atoms/ToolbarSeparator'
-import { TutorialsNavigatorTreeItem } from '../../lib/tutorials'
+import { TutorialsNavigatorTreeItem } from 'Lib/tutorials'
 import { StyledNoteDetailContainer } from '../NotePage/NoteDetail/NoteDetail'
-import { ViewModeType } from '../../lib/generalStatus'
+import { ViewModeType } from 'Lib/generalStatus'
 import { IconEye, IconSplit, IconEdit } from '../icons'
 
 type TutorialsNoteDetailProps = {
@@ -35,7 +35,7 @@ export default class TutorialsNoteDetail extends React.Component<
   async fetchNoteContentFromTreeItem() {
     try {
       const doc = await import(
-        `../../lib/tutorials/files${this.props.note.absolutePath}`
+        `Lib/tutorials/files${this.props.note.absolutePath}`
       )
       return doc.default
     } catch (error) {
diff --git a/src/components/Tutorials/TutorialsNoteItem.tsx b/src/components/Tutorials/TutorialsNoteItem.tsx
index bb88e107bb..a5ee30147e 100644
--- a/src/components/Tutorials/TutorialsNoteItem.tsx
+++ b/src/components/Tutorials/TutorialsNoteItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { Link } from '../../lib/router'
+import { Link } from 'Lib/router'
 import cc from 'classcat'
-import { TutorialsNavigatorTreeItem } from '../../lib/tutorials'
+import { TutorialsNavigatorTreeItem } from 'Lib/tutorials'
 import { StyledNoteListItem } from '../NotePage/NoteList/NoteItem'
 
 type TutorialsNoteItemProps = {
diff --git a/src/components/Tutorials/TutorialsNoteList.tsx b/src/components/Tutorials/TutorialsNoteList.tsx
index a3c1ef653c..7a9f149a27 100644
--- a/src/components/Tutorials/TutorialsNoteList.tsx
+++ b/src/components/Tutorials/TutorialsNoteList.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useRef } from 'react'
-import { TutorialsNavigatorTreeItem } from '../../lib/tutorials'
+import { TutorialsNavigatorTreeItem } from 'Lib/tutorials'
 import TutorialsNoteItem from './TutorialsNoteItem'
 import { StyledNoteListContainer } from '../NotePage/NoteList/NoteList'
 import { useTranslation } from 'react-i18next'
 import {
   isWithGeneralCtrlKey,
   useGlobalKeyDownHandler
-} from '../../lib/keyboard'
+} from 'Lib/keyboard'
 
 type TutorialsNoteListProps = {
   currentTree: TutorialsNavigatorTreeItem
diff --git a/src/components/Tutorials/TutorialsPage.tsx b/src/components/Tutorials/TutorialsPage.tsx
index d30ce87997..ee1cd60e77 100644
--- a/src/components/Tutorials/TutorialsPage.tsx
+++ b/src/components/Tutorials/TutorialsPage.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react'
-import { tutorialsTree, TutorialsNavigatorTreeItem } from '../../lib/tutorials'
+import { tutorialsTree, TutorialsNavigatorTreeItem } from 'Lib/tutorials'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
-import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
-import { useRouter } from '../../lib/router'
+import { useGeneralStatus, ViewModeType } from 'Lib/generalStatus'
+import { useRouter } from 'Lib/router'
 import TutorialsNoteList from './TutorialsNoteList'
 import TutorialsNoteDetail from './TutorialsNoteDetail'
 import { useTranslation } from 'react-i18next'
diff --git a/src/components/atoms/AppLink.tsx b/src/components/atoms/AppLink.tsx
index 739a7ac75d..e697afff7a 100644
--- a/src/components/atoms/AppLink.tsx
+++ b/src/components/atoms/AppLink.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import isElectron from 'is-electron'
-import { getAppLinkFromUserAgent } from '../../lib/download'
-import { openNew } from '../../lib/utils/platform'
-import styled from '../../lib/styled'
+import { getAppLinkFromUserAgent } from 'Lib/download'
+import { openNew } from 'Lib/utils/platform'
+import styled from 'Lib/styled'
 import cc from 'classcat'
-import { primaryButtonStyle } from '../../lib/styled/styleFunctions'
+import { primaryButtonStyle } from 'Lib/styled/styleFunctions'
 
 const AppLinkContainer = styled.button`
   ${primaryButtonStyle}
diff --git a/src/components/atoms/ButtonIcon.tsx b/src/components/atoms/ButtonIcon.tsx
index 74dfc2f1b5..c614a879d6 100644
--- a/src/components/atoms/ButtonIcon.tsx
+++ b/src/components/atoms/ButtonIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 
 const StyledButtonIcon = styled.button<{ active: boolean }>`
   color: currentColor;
diff --git a/src/components/atoms/CodeEditor.tsx b/src/components/atoms/CodeEditor.tsx
index 856836fcbf..52bc255263 100644
--- a/src/components/atoms/CodeEditor.tsx
+++ b/src/components/atoms/CodeEditor.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import CodeMirror, { getCodeMirrorTheme } from '../../lib/CodeMirror'
-import styled from '../../lib/styled'
+import CodeMirror, { getCodeMirrorTheme } from 'Lib/CodeMirror'
+import styled from 'Lib/styled'
 import {
   EditorIndentTypeOptions,
   EditorIndentSizeOptions,
   EditorKeyMapOptions
-} from '../../lib/preferences'
+} from 'Lib/preferences'
 
 const StyledContainer = styled.div`
   .CodeMirror {
diff --git a/src/components/atoms/CustomizedCodeEditor.tsx b/src/components/atoms/CustomizedCodeEditor.tsx
index 143ae3848e..645a776752 100644
--- a/src/components/atoms/CustomizedCodeEditor.tsx
+++ b/src/components/atoms/CustomizedCodeEditor.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import CodeEditor from './CodeEditor'
-import { usePreferences } from '../../lib/preferences'
+import { usePreferences } from 'Lib/preferences'
 
 interface CustomizedCodeEditor {
   value: string
diff --git a/src/components/atoms/CustomizedMarkdownPreviewer.tsx b/src/components/atoms/CustomizedMarkdownPreviewer.tsx
index b1ac17e2b9..2a6518d5b7 100644
--- a/src/components/atoms/CustomizedMarkdownPreviewer.tsx
+++ b/src/components/atoms/CustomizedMarkdownPreviewer.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { usePreferences } from '../../lib/preferences'
+import { usePreferences } from 'Lib/preferences'
 import MarkdownPreviewer from './MarkdownPreviewer'
-import { usePreviewStyle } from '../../lib/preview'
+import { usePreviewStyle } from 'Lib/preview'
 
 interface CustomizedMarkdownPreviewer {
   content: string
diff --git a/src/components/atoms/HighlightText.tsx b/src/components/atoms/HighlightText.tsx
index a79d4ae208..bb9f829746 100644
--- a/src/components/atoms/HighlightText.tsx
+++ b/src/components/atoms/HighlightText.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
-import styled from '../../lib/styled'
-import { escapeRegExp } from '../../lib/regex'
+import styled from 'Lib/styled'
+import { escapeRegExp } from 'Lib/regex'
 
 const HighlightContainer = styled.span`
   .highlighted {
diff --git a/src/components/atoms/LoginButton.tsx b/src/components/atoms/LoginButton.tsx
index f2521efcf3..e6c4437f48 100644
--- a/src/components/atoms/LoginButton.tsx
+++ b/src/components/atoms/LoginButton.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { useLogin, User, useUsers } from '../../lib/accounts'
+import { useLogin, User, useUsers } from 'Lib/accounts'
 import { StyledComponent } from 'styled-components'
 
 type RenderFunction<T> = (state: T) => React.ReactNode
diff --git a/src/components/atoms/MarkdownPreviewer.tsx b/src/components/atoms/MarkdownPreviewer.tsx
index 1ae569c06c..282ef62cd9 100644
--- a/src/components/atoms/MarkdownPreviewer.tsx
+++ b/src/components/atoms/MarkdownPreviewer.tsx
@@ -9,13 +9,13 @@ import gh from 'hast-util-sanitize/lib/github.json'
 import { mergeDeepRight } from 'ramda'
 import visit from 'unist-util-visit'
 import { Node, Parent } from 'unist'
-import CodeMirror from '../../lib/CodeMirror'
+import CodeMirror from 'Lib/CodeMirror'
 import h from 'hastscript'
 import useForceUpdate from 'use-force-update'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import cc from 'classcat'
-import { useDb } from '../../lib/db'
-import { openNew } from '../../lib/utils/platform'
+import { useDb } from 'Lib/db'
+import { openNew } from 'Lib/utils/platform'
 
 const schema = mergeDeepRight(gh, {
   attributes: {
diff --git a/src/components/atoms/Toolbar.tsx b/src/components/atoms/Toolbar.tsx
index a78a12bd43..de9d92c3f2 100644
--- a/src/components/atoms/Toolbar.tsx
+++ b/src/components/atoms/Toolbar.tsx
@@ -1,5 +1,5 @@
-import styled from '../../lib/styled'
-import { borderTop } from '../../lib/styled/styleFunctions'
+import styled from 'Lib/styled'
+import { borderTop } from 'Lib/styled/styleFunctions'
 
 const Toolbar = styled.div`
   min-height: 32px;
diff --git a/src/components/atoms/ToolbarButtonGroup.tsx b/src/components/atoms/ToolbarButtonGroup.tsx
index 0b02747e4a..59dff48a51 100644
--- a/src/components/atoms/ToolbarButtonGroup.tsx
+++ b/src/components/atoms/ToolbarButtonGroup.tsx
@@ -1,4 +1,4 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 
 export default styled.div`
   border-radius: 2px;
diff --git a/src/components/atoms/ToolbarExportButton.tsx b/src/components/atoms/ToolbarExportButton.tsx
index a3953ccf83..be171095bf 100644
--- a/src/components/atoms/ToolbarExportButton.tsx
+++ b/src/components/atoms/ToolbarExportButton.tsx
@@ -1,14 +1,14 @@
 import React, { useCallback } from 'react'
-import styled from '../../lib/styled'
-import { noteListIconColor } from '../../lib/styled/styleFunctions'
-import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
-import { NoteDoc } from '../../lib/db/types'
+import styled from 'Lib/styled'
+import { noteListIconColor } from 'Lib/styled/styleFunctions'
+import { useContextMenu, MenuTypes } from 'Lib/contextMenu'
+import { NoteDoc } from 'Lib/db/types'
 import {
   exportNoteAsHtmlFile,
   exportNoteAsMarkdownFile
-} from '../../lib/exports'
-import { usePreferences } from '../../lib/preferences'
-import { usePreviewStyle } from '../../lib/preview'
+} from 'Lib/exports'
+import { usePreferences } from 'Lib/preferences'
+import { usePreviewStyle } from 'Lib/preview'
 import { IconInfo } from '../icons'
 
 const StyledButton = styled.button<{ active: boolean }>`
diff --git a/src/components/atoms/ToolbarIconButton.tsx b/src/components/atoms/ToolbarIconButton.tsx
index 6779628b3f..62f21992f5 100644
--- a/src/components/atoms/ToolbarIconButton.tsx
+++ b/src/components/atoms/ToolbarIconButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import styled from '../../lib/styled'
-import { noteListIconColor } from '../../lib/styled/styleFunctions'
+import styled from 'Lib/styled'
+import { noteListIconColor } from 'Lib/styled/styleFunctions'
 
 const StyledButton = styled.button<{ active: boolean }>`
   background: transparent;
diff --git a/src/components/atoms/ToolbarIconInput.tsx b/src/components/atoms/ToolbarIconInput.tsx
index 925830afc4..84fdb8c164 100644
--- a/src/components/atoms/ToolbarIconInput.tsx
+++ b/src/components/atoms/ToolbarIconInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import ButtonIcon from './ButtonIcon'
 const StyledContainer = styled.div`
   position: relative;
diff --git a/src/components/atoms/ToolbarSeparator.tsx b/src/components/atoms/ToolbarSeparator.tsx
index fb870a444a..ed3edeb311 100644
--- a/src/components/atoms/ToolbarSeparator.tsx
+++ b/src/components/atoms/ToolbarSeparator.tsx
@@ -1,4 +1,4 @@
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 
 export default styled.div`
   flex: 1;
diff --git a/src/components/atoms/TwoPaneLayout.tsx b/src/components/atoms/TwoPaneLayout.tsx
index 1b4250cf1f..60ce4c1f9b 100644
--- a/src/components/atoms/TwoPaneLayout.tsx
+++ b/src/components/atoms/TwoPaneLayout.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   CSSProperties
 } from 'react'
-import styled from '../../lib/styled'
+import styled from 'Lib/styled'
 import throttle from 'lodash/throttle'
 import { clamp } from 'ramda'
 
diff --git a/src/components/icons/AddRound.tsx b/src/components/icons/AddRound.tsx
index f28de514a0..f82ecd82f8 100644
--- a/src/components/icons/AddRound.tsx
+++ b/src/components/icons/AddRound.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconAddRound = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/AdjustVertical.tsx b/src/components/icons/AdjustVertical.tsx
index 40944e4acd..367b52b15b 100644
--- a/src/components/icons/AdjustVertical.tsx
+++ b/src/components/icons/AdjustVertical.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconAdjustVertical = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Alert.tsx b/src/components/icons/Alert.tsx
index feef8cfad8..803edfb31b 100644
--- a/src/components/icons/Alert.tsx
+++ b/src/components/icons/Alert.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconAlert = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Alphabet.tsx b/src/components/icons/Alphabet.tsx
index 4bd2645c39..d9d66f91a0 100644
--- a/src/components/icons/Alphabet.tsx
+++ b/src/components/icons/Alphabet.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconAlphabet = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/ArrowAgain.tsx b/src/components/icons/ArrowAgain.tsx
index 0f46b4d9ec..2456a6fa30 100644
--- a/src/components/icons/ArrowAgain.tsx
+++ b/src/components/icons/ArrowAgain.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconArrowAgain = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/ArrowOutput.tsx b/src/components/icons/ArrowOutput.tsx
index 94523d8ef1..6f8e938af9 100644
--- a/src/components/icons/ArrowOutput.tsx
+++ b/src/components/icons/ArrowOutput.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconArrowOutput = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/ArrowRotate.tsx b/src/components/icons/ArrowRotate.tsx
index 15230c95a5..c22afc25b8 100644
--- a/src/components/icons/ArrowRotate.tsx
+++ b/src/components/icons/ArrowRotate.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconArrowRotate = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/ArrowSingleDown.tsx b/src/components/icons/ArrowSingleDown.tsx
index 090c11a3ef..c33153422e 100644
--- a/src/components/icons/ArrowSingleDown.tsx
+++ b/src/components/icons/ArrowSingleDown.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconArrowSingleDown = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/ArrowSingleRight.tsx b/src/components/icons/ArrowSingleRight.tsx
index d55c578ea4..e69228886c 100644
--- a/src/components/icons/ArrowSingleRight.tsx
+++ b/src/components/icons/ArrowSingleRight.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconArrowSingleRight = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Bold.tsx b/src/components/icons/Bold.tsx
index 7b9e0a3c7a..36e6ed41d8 100644
--- a/src/components/icons/Bold.tsx
+++ b/src/components/icons/Bold.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconBold = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Book.tsx b/src/components/icons/Book.tsx
index 9f13a59d73..a010ebea0e 100644
--- a/src/components/icons/Book.tsx
+++ b/src/components/icons/Book.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconBook = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Check.tsx b/src/components/icons/Check.tsx
index c7a4d33527..00fc12ea86 100644
--- a/src/components/icons/Check.tsx
+++ b/src/components/icons/Check.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconCheck = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/CheckActive.tsx b/src/components/icons/CheckActive.tsx
index 166bece214..363a52062e 100644
--- a/src/components/icons/CheckActive.tsx
+++ b/src/components/icons/CheckActive.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconCheckActive = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Close.tsx b/src/components/icons/Close.tsx
index 126a7d4ad4..e9b0dfadc5 100644
--- a/src/components/icons/Close.tsx
+++ b/src/components/icons/Close.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconClose = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Edit.tsx b/src/components/icons/Edit.tsx
index 72a60e0c37..d01ee9f5fe 100644
--- a/src/components/icons/Edit.tsx
+++ b/src/components/icons/Edit.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconEdit = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/EditView.tsx b/src/components/icons/EditView.tsx
index 3eb2a17859..97588a7826 100644
--- a/src/components/icons/EditView.tsx
+++ b/src/components/icons/EditView.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconEditView = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Eye.tsx b/src/components/icons/Eye.tsx
index 346713e612..e6f191a62b 100644
--- a/src/components/icons/Eye.tsx
+++ b/src/components/icons/Eye.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconEye = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/File.tsx b/src/components/icons/File.tsx
index 97ea9e7f03..cbddaf5cbb 100644
--- a/src/components/icons/File.tsx
+++ b/src/components/icons/File.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconFile = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/FileOpen.tsx b/src/components/icons/FileOpen.tsx
index 74b8ce9b72..647f8e695d 100644
--- a/src/components/icons/FileOpen.tsx
+++ b/src/components/icons/FileOpen.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconFileOpen = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Hash.tsx b/src/components/icons/Hash.tsx
index d2a39585a6..a4feefa879 100644
--- a/src/components/icons/Hash.tsx
+++ b/src/components/icons/Hash.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconHash = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/HelpOutline.tsx b/src/components/icons/HelpOutline.tsx
index b5164bf283..119a665bf4 100644
--- a/src/components/icons/HelpOutline.tsx
+++ b/src/components/icons/HelpOutline.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconHelpOutline = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Image.tsx b/src/components/icons/Image.tsx
index 38565509e8..af2e8d55ac 100644
--- a/src/components/icons/Image.tsx
+++ b/src/components/icons/Image.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconImage = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Info.tsx b/src/components/icons/Info.tsx
index 5a29435b6b..12cc8ce825 100644
--- a/src/components/icons/Info.tsx
+++ b/src/components/icons/Info.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconInfo = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Italic.tsx b/src/components/icons/Italic.tsx
index 402ec310cf..4c4ae2fb7b 100644
--- a/src/components/icons/Italic.tsx
+++ b/src/components/icons/Italic.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconItalic = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/LineThrough.tsx b/src/components/icons/LineThrough.tsx
index ce63743e50..ac72022431 100644
--- a/src/components/icons/LineThrough.tsx
+++ b/src/components/icons/LineThrough.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconLineThrough = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Link.tsx b/src/components/icons/Link.tsx
index c0fce603c4..baa40bbf22 100644
--- a/src/components/icons/Link.tsx
+++ b/src/components/icons/Link.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconLink = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/List.tsx b/src/components/icons/List.tsx
index bc825b1034..46d850f9f8 100644
--- a/src/components/icons/List.tsx
+++ b/src/components/icons/List.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconList = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Loupe.tsx b/src/components/icons/Loupe.tsx
index 5e7bd6a30a..c04c60146c 100644
--- a/src/components/icons/Loupe.tsx
+++ b/src/components/icons/Loupe.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconLoupe = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Preview.tsx b/src/components/icons/Preview.tsx
index c3d3e28cc4..6a110f84ee 100644
--- a/src/components/icons/Preview.tsx
+++ b/src/components/icons/Preview.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconPreview = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Quote.tsx b/src/components/icons/Quote.tsx
index 9d69f16a58..cc58479f20 100644
--- a/src/components/icons/Quote.tsx
+++ b/src/components/icons/Quote.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconQuote = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Radio.tsx b/src/components/icons/Radio.tsx
index 064c66a3ae..b41a5750f9 100644
--- a/src/components/icons/Radio.tsx
+++ b/src/components/icons/Radio.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconRadio = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/RadioActive.tsx b/src/components/icons/RadioActive.tsx
index 1fd421ee90..314fe6aaa1 100644
--- a/src/components/icons/RadioActive.tsx
+++ b/src/components/icons/RadioActive.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconRadioActive = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Setting.tsx b/src/components/icons/Setting.tsx
index 3da701834f..963da6b522 100644
--- a/src/components/icons/Setting.tsx
+++ b/src/components/icons/Setting.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconSetting = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Split.tsx b/src/components/icons/Split.tsx
index b2816f8889..fa10640f61 100644
--- a/src/components/icons/Split.tsx
+++ b/src/components/icons/Split.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconSplit = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/SplitView.tsx b/src/components/icons/SplitView.tsx
index a2aa8605c3..a26c6479f1 100644
--- a/src/components/icons/SplitView.tsx
+++ b/src/components/icons/SplitView.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconSplitView = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Star.tsx b/src/components/icons/Star.tsx
index c68313bd33..861ae9b927 100644
--- a/src/components/icons/Star.tsx
+++ b/src/components/icons/Star.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconStar = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/StarActive.tsx b/src/components/icons/StarActive.tsx
index 767e0d80e8..fc78c02467 100644
--- a/src/components/icons/StarActive.tsx
+++ b/src/components/icons/StarActive.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconStarActive = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/T1.tsx b/src/components/icons/T1.tsx
index d03542f2b4..d2858b79ed 100644
--- a/src/components/icons/T1.tsx
+++ b/src/components/icons/T1.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconT1 = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/T2.tsx b/src/components/icons/T2.tsx
index ce09966160..f7d83dc2dd 100644
--- a/src/components/icons/T2.tsx
+++ b/src/components/icons/T2.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconT2 = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/T3.tsx b/src/components/icons/T3.tsx
index ef883bf45e..e8d77ccdf8 100644
--- a/src/components/icons/T3.tsx
+++ b/src/components/icons/T3.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconT3 = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Tag.tsx b/src/components/icons/Tag.tsx
index d0771e6343..6aee7c55e2 100644
--- a/src/components/icons/Tag.tsx
+++ b/src/components/icons/Tag.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconTag = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/TagFill.tsx b/src/components/icons/TagFill.tsx
index cb7449faad..f6a5f231a7 100644
--- a/src/components/icons/TagFill.tsx
+++ b/src/components/icons/TagFill.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconTagFill = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Tags.tsx b/src/components/icons/Tags.tsx
index a67b380854..3566eddd10 100644
--- a/src/components/icons/Tags.tsx
+++ b/src/components/icons/Tags.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconTags = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Trash.tsx b/src/components/icons/Trash.tsx
index 119b28d754..7a79d4753b 100644
--- a/src/components/icons/Trash.tsx
+++ b/src/components/icons/Trash.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconTrash = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/TrashFill.tsx b/src/components/icons/TrashFill.tsx
index 17bda35363..1e7aeddd14 100644
--- a/src/components/icons/TrashFill.tsx
+++ b/src/components/icons/TrashFill.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconTrashFill = (props: BoostnoteIconProps) => (
diff --git a/src/components/icons/Underline.tsx b/src/components/icons/Underline.tsx
index aa576e08a4..48a1441cf0 100644
--- a/src/components/icons/Underline.tsx
+++ b/src/components/icons/Underline.tsx
@@ -1,7 +1,7 @@
 import {
   BoostnoteIconProps,
   BoostnoteIconStyledContainer
-} from '../../lib/icons'
+} from 'Lib/icons'
 import React from 'react'
 
 export const IconUnderline = (props: BoostnoteIconProps) => (
diff --git a/src/components/styled.ts b/src/components/styled.ts
index d0c3d529ea..bc72e5109e 100644
--- a/src/components/styled.ts
+++ b/src/components/styled.ts
@@ -1,4 +1,4 @@
-import styled from '../lib/styled'
+import styled from 'Lib/styled'
 
 export const StyledAppContainer = styled.div`
   position: absolute;
diff --git a/tsconfig.json b/tsconfig.json
index 07ffb9e5c8..91035bb2a0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,12 @@
     "suppressImplicitAnyIndexErrors": true,
     "strict": true,
     "esModuleInterop": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "Lib/*": [
+        "src/lib/*"
+      ]
+    }
   }
 }
diff --git a/webpack.config.ts b/webpack.config.ts
index 13415a6df1..3a56b4c2e9 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -115,7 +115,11 @@ module.exports = (env, argv) => {
     },
 
     resolve: {
-      extensions: ['.tsx', '.ts', '.js']
+      extensions: ['.tsx', '.ts', '.js'],
+
+      alias: {
+        'Lib': path.resolve(__dirname, 'src/lib/'),
+      }
     },
     node: {
       fs: 'empty'