diff --git a/src/components/atoms/PageContainer.tsx b/src/components/atoms/PageContainer.tsx
index cd852f4727..3c5f756b49 100644
--- a/src/components/atoms/PageContainer.tsx
+++ b/src/components/atoms/PageContainer.tsx
@@ -1,9 +1,9 @@
 import styled from '../../lib/styled'
 
 const PageContainer = styled.div`
-  padding: 1em;
-  height: 100%;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 `
 
 export default PageContainer
diff --git a/src/components/atoms/PageDraggableHeader.tsx b/src/components/atoms/PageDraggableHeader.tsx
new file mode 100644
index 0000000000..b7a5eec5eb
--- /dev/null
+++ b/src/components/atoms/PageDraggableHeader.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from '../../lib/styled'
+import Icon from './Icon'
+import { borderBottom, flexCenter } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  -webkit-app-region: drag;
+  ${borderBottom}
+  height: 40px;
+
+  color: ${({ theme }) => theme.uiTextColor};
+`
+
+const IconContainer = styled.div`
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  ${flexCenter}
+`
+
+const Label = styled.div`
+  font-weight: bold;
+`
+
+interface PageDraggableHeaderProps {
+  iconPath?: string
+  label: string
+}
+
+const PageDraggableHeader = ({ iconPath, label }: PageDraggableHeaderProps) => {
+  return (
+    <Container>
+      {iconPath != null && (
+        <IconContainer>
+          <Icon path={iconPath} />
+        </IconContainer>
+      )}
+      <Label>{label}</Label>
+    </Container>
+  )
+}
+
+export default PageDraggableHeader
diff --git a/src/components/atoms/PageScrollableContent.tsx b/src/components/atoms/PageScrollableContent.tsx
new file mode 100644
index 0000000000..fd806a6649
--- /dev/null
+++ b/src/components/atoms/PageScrollableContent.tsx
@@ -0,0 +1,9 @@
+import styled from '../../lib/styled'
+
+const PageScrollableContent = styled.div`
+  flex: 1;
+  overflow: auto;
+  padding: 1em;
+`
+
+export default PageScrollableContent
diff --git a/src/components/molecules/NoteDetailToolbar.tsx b/src/components/molecules/NoteDetailToolbar.tsx
index 2a498c36e7..bd7e3f5c17 100644
--- a/src/components/molecules/NoteDetailToolbar.tsx
+++ b/src/components/molecules/NoteDetailToolbar.tsx
@@ -27,6 +27,7 @@ import { usePreviewStyle } from '../../lib/preview'
 const NoteDetailToolbarContainer = styled.div`
   display: flex;
   height: 40px;
+  -webkit-app-region: drag;
   padding: 0 8px;
   ${borderBottom}
   align-items: center;
diff --git a/src/components/organisms/IdleNoteDetail.tsx b/src/components/organisms/IdleNoteDetail.tsx
new file mode 100644
index 0000000000..1e378f83b0
--- /dev/null
+++ b/src/components/organisms/IdleNoteDetail.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import Image from '../atoms/Image'
+import styled from '../../lib/styled'
+import { useTranslation } from 'react-i18next'
+import { borderBottom } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  user-select: none;
+  position: relative;
+`
+
+const DraggableArea = styled.div`
+  height: 40px;
+  ${borderBottom}
+  -webkit-app-region: drag;
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  img {
+    width: 310px;
+    max-width: 100%;
+    padding: 10px 40px;
+  }
+
+  section {
+    margin: auto;
+    display: flex;
+    width: 70%;
+    text-align: center;
+
+    div {
+      text-align: center;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  h2 {
+    font-weight: normal;
+
+    span {
+      margin: 5px auto;
+      padding: 5px 10px;
+      width: max-content;
+      background: #333;
+      border-radius: 8px;
+      box-shadow: 0 4px #404040;
+    }
+  }
+  h3 {
+    margin: 20px auto;
+    font-weight: normal;
+  }
+  h4 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  @media only screen and (max-width: 970px) {
+    section {
+      width: 100%;
+      display: block;
+    }
+  }
+`
+
+const IdleNoteDetail = () => {
+  const { t } = useTranslation()
+  return (
+    <Container>
+      <DraggableArea />
+      <Content>
+        <Image src={'/app/static/logo_index.svg'} />
+        <h3>{t('note.createkeymessage1')}</h3>
+        <section>
+          <div>
+            <h2>
+              <span>Ctrl</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyWinLin')}</h4>
+          </div>
+          <h3>{t('note.createKeyOr')}</h3>
+          <div>
+            <h2>
+              <span>⌘</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyMac')}</h4>
+          </div>
+        </section>
+      </Content>
+    </Container>
+  )
+}
+
+export default IdleNoteDetail
diff --git a/src/components/organisms/Navigator.tsx b/src/components/organisms/Navigator.tsx
index 68c058c334..b4b3b88c73 100644
--- a/src/components/organisms/Navigator.tsx
+++ b/src/components/organisms/Navigator.tsx
@@ -7,7 +7,7 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
 import StorageNavigatorFragment from '../molecules/StorageNavigatorFragment'
-import { mdiPlus, mdiHammerWrench } from '@mdi/js'
+import { mdiPlus, mdiHammerWrench, mdiBookPlusMultiple } from '@mdi/js'
 import NavigatorButton from '../atoms/NavigatorButton'
 import Spacer from '../atoms/Spacer'
 import { usePathnameWithoutNoteId } from '../../lib/router'
@@ -25,6 +25,7 @@ const TopControl = styled.div`
   align-items: center;
   height: 40px;
   ${borderBottom}
+  -webkit-app-region: drag;
 `
 
 const Empty = styled.button`
@@ -96,7 +97,7 @@ const Navigator = () => {
       <TopControl onContextMenu={openSideNavContextMenu}>
         <Spacer />
         <NavigatorButton
-          iconPath={mdiPlus}
+          iconPath={mdiBookPlusMultiple}
           title='New Storage'
           active={pathname === '/app/storages'}
           onClick={() => push('/app/storages')}
diff --git a/src/components/pages/AttachmentsPage.tsx b/src/components/pages/AttachmentsPage.tsx
index fda6f6b4ab..2f244c738e 100644
--- a/src/components/pages/AttachmentsPage.tsx
+++ b/src/components/pages/AttachmentsPage.tsx
@@ -3,20 +3,14 @@ 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 '../organisms/AttachmentList'
+import { mdiPaperclip } from '@mdi/js'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
 
 const Container = styled.div`
   height: 100%;
 `
 
-const Header = styled.div`
-  height: 40px;
-  padding: 10px;
-  width: 100%;
-  ${borderBottom}
-`
-
 const AttachmentsPage = () => {
   const routeParams = useRouteParams() as StorageAttachmentsRouteParams
   const { storageId } = routeParams
@@ -39,7 +33,11 @@ const AttachmentsPage = () => {
         addAttachments(storageId, files)
       }}
     >
-      <Header>Attachments in {storage.name}</Header>
+      <PageDraggableHeader
+        iconPath={mdiPaperclip}
+        label={`Attachments in ${storage.name}`}
+      />
+
       <AttachmentList storage={storage} />
     </Container>
   )
diff --git a/src/components/pages/NotePage.tsx b/src/components/pages/NotePage.tsx
index f3d7186958..e41e8b3657 100644
--- a/src/components/pages/NotePage.tsx
+++ b/src/components/pages/NotePage.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react'
 import NoteNavigator from '../organisms/NoteNavigator'
-import styled from '../../lib/styled'
 import NoteDetail from '../organisms/NoteDetail'
 import {
   useRouteParams,
@@ -13,7 +12,6 @@ import {
 } from '../../lib/router'
 import { useDb } from '../../lib/db'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
-import Image from '../atoms/Image'
 import { NoteDoc, NoteStorage } from '../../lib/db/types'
 import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
@@ -30,59 +28,7 @@ import {
   NoteSortingOptions,
 } from '../../lib/sort'
 import { values } from '../../lib/db/utils'
-
-export const StyledNoteDetailNoNote = styled.div`
-  text-align: center;
-  margin-top: 13%;
-  color: #a9a9a9;
-
-  img {
-    width: 310px;
-    max-width: 100%;
-    padding: 10px 40px;
-  }
-
-  section {
-    margin: auto;
-    display: flex;
-    width: 70%;
-    text-align: center;
-
-    div {
-      text-align: center;
-      margin: 0 auto;
-      display: block;
-    }
-  }
-
-  h2 {
-    font-weight: normal;
-
-    span {
-      margin: 5px auto;
-      padding: 5px 10px;
-      width: max-content;
-      background: #333;
-      border-radius: 8px;
-      box-shadow: 0 4px #404040;
-    }
-  }
-  h3 {
-    margin: 20px auto;
-    font-weight: normal;
-  }
-  h4 {
-    margin: 0;
-    font-weight: normal;
-  }
-
-  @media only screen and (max-width: 970px) {
-    section {
-      width: 100%;
-      display: block;
-    }
-  }
-`
+import IdleNoteDetail from '../organisms/IdleNoteDetail'
 
 interface NotePageProps {
   storage: NoteStorage
@@ -343,27 +289,7 @@ const NotePage = ({ storage }: NotePageProps) => {
       }
       right={
         currentNote == null ? (
-          <StyledNoteDetailNoNote>
-            <Image src={'/app/static/logo_index.svg'} />
-            <h3>{t('note.createkeymessage1')}</h3>
-            {/* Might need to be changed if custom keybinds is implemented */}
-            <section>
-              <div>
-                {/* 'note.createKey' differs in locales: N/Enter */}
-                <h2>
-                  <span>Ctrl</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyWinLin')}</h4>
-              </div>
-              <h3>{t('note.createKeyOr')}</h3>
-              <div>
-                <h2>
-                  <span>⌘</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyMac')}</h4>
-              </div>
-            </section>
-          </StyledNoteDetailNoNote>
+          <IdleNoteDetail />
         ) : (
           <NoteDetail
             storage={storage}
diff --git a/src/components/pages/StorageCreatePage.tsx b/src/components/pages/StorageCreatePage.tsx
index 62fe87d0f2..7b1f311e65 100644
--- a/src/components/pages/StorageCreatePage.tsx
+++ b/src/components/pages/StorageCreatePage.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PageContainer from '../atoms/PageContainer'
 import {
-  FormHeading,
   FormGroup,
   FormCheckInlineItem,
   FormCheckList,
@@ -10,43 +9,53 @@ import {
 } from '../atoms/form'
 import LocalStorageCreateForm from '../organisms/LocalStorageCreateForm'
 import CloudStorageCreateForm from '../organisms/CloudStorageCreateForm'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
+import { mdiBookPlusMultiple } from '@mdi/js'
+import PageScrollableContent from '../atoms/PageScrollableContent'
 
-export default () => {
+const StorageCreatePage = () => {
   const { t } = useTranslation()
   const [storageType, setStorageType] = useState<'cloud' | 'local'>('cloud')
 
   return (
     <PageContainer>
-      <FormHeading depth={1}>{t('Create new storage')}</FormHeading>
-      <FormGroup>
-        <FormLabel>Storage Type</FormLabel>
-        <FormCheckList>
-          <FormCheckInlineItem
-            id='radio-cloudStorageType'
-            type='radio'
-            checked={storageType === 'cloud'}
-            onChange={() => {
-              setStorageType('cloud')
-            }}
-          >
-            {t('storage.typeCloud')}
-          </FormCheckInlineItem>
-          <FormCheckInlineItem
-            id='radio-localStorageType'
-            type='radio'
-            checked={storageType === 'local'}
-            onChange={() => setStorageType('local')}
-          >
-            {t('storage.typeLocal')}
-          </FormCheckInlineItem>
-        </FormCheckList>
-      </FormGroup>
+      <PageDraggableHeader
+        iconPath={mdiBookPlusMultiple}
+        label={t('Create new storage')}
+      />
+      <PageScrollableContent>
+        <FormGroup>
+          <FormLabel>Storage Type</FormLabel>
+          <FormCheckList>
+            <FormCheckInlineItem
+              id='radio-cloudStorageType'
+              type='radio'
+              checked={storageType === 'cloud'}
+              onChange={() => {
+                setStorageType('cloud')
+              }}
+            >
+              {t('storage.typeCloud')}
+            </FormCheckInlineItem>
+            <FormCheckInlineItem
+              id='radio-localStorageType'
+              type='radio'
+              checked={storageType === 'local'}
+              onChange={() => setStorageType('local')}
+            >
+              {t('storage.typeLocal')}
+            </FormCheckInlineItem>
+          </FormCheckList>
+        </FormGroup>
 
-      {storageType === 'local' ? (
-        <LocalStorageCreateForm />
-      ) : (
-        <CloudStorageCreateForm />
-      )}
+        {storageType === 'local' ? (
+          <LocalStorageCreateForm />
+        ) : (
+          <CloudStorageCreateForm />
+        )}
+      </PageScrollableContent>
     </PageContainer>
   )
 }
+
+export default StorageCreatePage
diff --git a/src/components/pages/StorageEditPage.tsx b/src/components/pages/StorageEditPage.tsx
index 97f5ae4c92..438bdf45db 100644
--- a/src/components/pages/StorageEditPage.tsx
+++ b/src/components/pages/StorageEditPage.tsx
@@ -17,12 +17,15 @@ import {
 } from '../atoms/form'
 import LinkCloudStorageForm from '../organisms/LinkCloudStorageForm'
 import ManageCloudStorageForm from '../organisms/ManageCloudStorageForm'
+import { mdiBook } from '@mdi/js'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
+import PageScrollableContent from '../atoms/PageScrollableContent'
 
-interface StorageEditProps {
+interface StorageEditPageProps {
   storage: NoteStorage
 }
 
-export default ({ storage }: StorageEditProps) => {
+const StorageEditPage = ({ storage }: StorageEditPageProps) => {
   const db = useDb()
   const router = useRouter()
   const { t } = useTranslation()
@@ -60,43 +63,47 @@ export default ({ storage }: StorageEditProps) => {
 
   return (
     <PageContainer>
-      <FormHeading depth={1}>Storage Settings</FormHeading>
-      <FormGroup>
-        <FormLabel>{t('storage.name')}</FormLabel>
-        <FormTextInput
-          type='text'
-          value={name}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setName(e.target.value)
-          }
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormPrimaryButton onClick={updateStorageName}>
-          Update storage name
-        </FormPrimaryButton>
-      </FormGroup>
-      <hr />
-      <FormHeading depth={2}>Remove Storage</FormHeading>
-      {storage.cloudStorage != null && (
-        <FormBlockquote>
-          Your cloud storage will not be deleted by clicking this button. To
-          delete cloud storage too, check cloud storage info section.
-        </FormBlockquote>
-      )}
-      <FormGroup>
-        <FormSecondaryButton onClick={removeCallback}>
-          Remove Storage
-        </FormSecondaryButton>
-      </FormGroup>
-      <hr />
+      <PageDraggableHeader iconPath={mdiBook} label='Storage Settings' />
+      <PageScrollableContent>
+        <FormGroup>
+          <FormLabel>{t('storage.name')}</FormLabel>
+          <FormTextInput
+            type='text'
+            value={name}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setName(e.target.value)
+            }
+          />
+        </FormGroup>
+        <FormGroup>
+          <FormPrimaryButton onClick={updateStorageName}>
+            Update storage name
+          </FormPrimaryButton>
+        </FormGroup>
+        <hr />
+        <FormHeading depth={2}>Remove Storage</FormHeading>
+        {storage.cloudStorage != null && (
+          <FormBlockquote>
+            Your cloud storage will not be deleted by clicking this button. To
+            delete cloud storage too, check cloud storage info section.
+          </FormBlockquote>
+        )}
+        <FormGroup>
+          <FormSecondaryButton onClick={removeCallback}>
+            Remove Storage
+          </FormSecondaryButton>
+        </FormGroup>
+        <hr />
 
-      <FormHeading depth={2}>Cloud Storage info</FormHeading>
-      {storage.cloudStorage == null ? (
-        <LinkCloudStorageForm storage={storage} />
-      ) : (
-        <ManageCloudStorageForm storage={storage} />
-      )}
+        <FormHeading depth={2}>Cloud Storage info</FormHeading>
+        {storage.cloudStorage == null ? (
+          <LinkCloudStorageForm storage={storage} />
+        ) : (
+          <ManageCloudStorageForm storage={storage} />
+        )}
+      </PageScrollableContent>
     </PageContainer>
   )
 }
+
+export default StorageEditPage