diff --git a/resources/public/index.html b/resources/public/index.html
index 7a8d232596..3a4ef9fb8c 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -3,10 +3,8 @@
   <head>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width,initial-scale=1">
-      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
       <link rel="shortcut icon" type="image/png" href="favicon.png" />
       <link href="./css/katex.min.css" rel="stylesheet" />
-      <link rel="stylesheet" href="./css/codemirror.css" type="text/css" />
       <style id="_stylefy-constant-styles_"></style>
       <style id="_stylefy-styles_"></style>
       <noscript>
diff --git a/src/cljs/athens/components.cljs b/src/cljs/athens/components.cljs
index e16f8854f9..72bf351cb2 100644
--- a/src/cljs/athens/components.cljs
+++ b/src/cljs/athens/components.cljs
@@ -39,7 +39,7 @@
   [span-click-stop
    [:> Checkbox {:isChecked false
                  :verticalAlign "middle"
-                 :transform "translateY(-2px)"
+                 :transform "translateY(-1px)"
                  :onChange #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
 
 
@@ -48,7 +48,7 @@
   [span-click-stop
    [:> Checkbox {:isChecked   true
                  :verticalAlign "middle"
-                 :transform "translateY(-2px)"
+                 :transform "translateY(-1px)"
                  :onChange #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
 
 
diff --git a/src/cljs/athens/electron/db_menu/core.cljs b/src/cljs/athens/electron/db_menu/core.cljs
index 0ea068a53d..cee04a6fbf 100644
--- a/src/cljs/athens/electron/db_menu/core.cljs
+++ b/src/cljs/athens/electron/db_menu/core.cljs
@@ -35,9 +35,10 @@
                            :synchronising)]
     [:<>
      [db-modal/merge-modal merge-open?]
-     [:> Popover {:placement "bottom-start"}
+     [:> Popover {:placement "bottom-start" :isLazy true}
       [:> PopoverTrigger
        [:> IconButton {:p 0
+                       "aria-label" "Database menu"
                        :bg "background.floor"}
         ;; DB Icon + Dropdown toggle
         [db-icon {:db     active-db
diff --git a/src/cljs/athens/views/athena.cljs b/src/cljs/athens/views/athena.cljs
index d3b60b2a68..4cd75fa88b 100644
--- a/src/cljs/athens/views/athena.cljs
+++ b/src/cljs/athens/views/athena.cljs
@@ -174,7 +174,8 @@
                    :pt 4
                    :mb 4
                    :px 4
-                   :overflowY "overlay"
+                   :overflowY "auto"
+                   :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
                    :_empty {:display "none"}}
         (doall
           (for [[i x] (map-indexed list recent-items)]
@@ -201,7 +202,8 @@
               :pt 4
               :mb 4
               :px 4
-              :overflowY "overlay"
+              :overflowY "auto"
+              :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
               :_empty {:display "none"}}
    (doall
      (for [[i x] (map-indexed list results)
diff --git a/src/cljs/athens/views/blocks/autocomplete_search.cljs b/src/cljs/athens/views/blocks/autocomplete_search.cljs
index 279d98c48d..83c9812e52 100644
--- a/src/cljs/athens/views/blocks/autocomplete_search.cljs
+++ b/src/cljs/athens/views/blocks/autocomplete_search.cljs
@@ -1,6 +1,7 @@
 (ns athens.views.blocks.autocomplete-search
   (:require
-    ["@chakra-ui/react" :refer [Portal Popover PopoverTrigger PopoverBody Button PopoverContent Text Box]]
+    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["@chakra-ui/react" :refer [Text]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [clojure.string :as string]))
 
@@ -19,48 +20,23 @@
 (defn inline-search-el
   [_block]
   (fn [block state]
-    (let [{:search/keys [index results type query] caret-position :caret-position} @state
-          can-open (some #(= % type) [:page :block :hashtag :template])
-          {:keys [left top]} caret-position]
-      [:> Popover {:isOpen can-open
-                   :placement "bottom-start"
-                   :isLazy true
-                   :returnFocusOnClose false
-                   :closeOnBlur true
-                   :closeOnEsc true
-                   :onClose #(swap! state assoc :search/type false)
-                   :autoFocus false
-                   :onMouseDown (fn [e] (.. e preventDefault))}
-       [:> PopoverTrigger
-        [:> Box {:position "fixed"
-                 :overflow "auto"
-                 :width "0"
-                 :height "0"
-                 :top (str (+ 24 top) "px")
-                 :left (str (+ 24 left) "px")}]]
-       [:> Portal
-        [:> PopoverContent
-         [:> PopoverBody {:p 0
-                          :overflow "hidden"
-                          :borderRadius "inherit"}
-          (when can-open
-            (if (or (string/blank? query)
-                    (empty? results))
-              [:> Text {:py "0.4rem"
-                        :px "0.8rem"
-                        :fontStyle "italics"}
-               (str "Search for a " (symbol type))]
-              (doall
-                (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list results)]
-                  [:> Button {:key (str "inline-search-item" uid)
-                              :id (str "dropdown-item-" i)
-                              :borderRadius "0"
-                              :justifyContent "flex-start"
-                              :width "100%"
-                              :_first {:borderTopRadius "inherit"}
-                              :_last {:borderBottomRadius "inherit"}
-                              :isActive (= index i)
-                              ;; if page link, expand to title. otherwise expand to uid for a block ref
-                              :onClick (fn [_] (inline-item-click state (:block/uid block) (or title uid)))}
-                   (or title string)]))))]]]])))
-
+    (let [{:keys [last-e]} @state
+          {:search/keys [index results type query]} @state
+          is-open (some #(= % type) [:page :block :hashtag :template])]
+      [:> Autocomplete {:event last-e
+                        :isOpen is-open
+                        :onClose #(swap! state assoc :search/type false)}
+       (when is-open
+         (if (or (string/blank? query)
+                 (empty? results))
+           [:> Text {:py "0.4rem"
+                     :px "0.8rem"
+                     :fontStyle "italics"}
+            (str "Search for a " (symbol type))]
+           (doall
+             (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list results)]
+               [:> AutocompleteButton {:key (str "inline-search-item" uid)
+                                       :isActive (= i index)
+                                       :onClick (fn [_] (inline-item-click state (:block/uid block) (or title uid)))
+                                       :id (str "inline-search-item" uid)}
+                (or title string)]))))])))
diff --git a/src/cljs/athens/views/blocks/autocomplete_slash.cljs b/src/cljs/athens/views/blocks/autocomplete_slash.cljs
index f89c470ea2..05910bb20b 100644
--- a/src/cljs/athens/views/blocks/autocomplete_slash.cljs
+++ b/src/cljs/athens/views/blocks/autocomplete_slash.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.autocomplete-slash
   (:require
-    ["@chakra-ui/react" :refer [Portal Menu MenuList MenuItem]]
+    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [reagent.core :as r]))
 
@@ -15,24 +15,18 @@
 (defn slash-menu-el
   [_block]
   (fn [block state]
-    (let [{:search/keys [index results type] caret-position :caret-position} @state
-          {:keys [left top]} caret-position]
-      [:> Menu {:isOpen (= type :slash)
-                :onClose #(swap! state assoc :search/type false)
-                :isLazy true}
-       [:> Portal
-        (when (= type :slash)
-          [:> MenuList {:position "absolute"
-                        :left (str left "px")
-                        :top (str (+ top 24) "px")}
-           (doall
-             (for [[i [text icon _expansion kbd _pos :as item]] (map-indexed list results)]
-               [:> MenuItem {:key     text
-                             :isFocusable false
-                             :id      (str "dropdown-item-" i)
-                             :command kbd
-                             :class (when (= i index) "isActive")
-                             :onClick (fn [_] (slash-item-click state block item))}
-                [:<>
-                 [(r/adapt-react-class icon)]
-                 text]]))])]])))
+    (let [{:keys [last-e]} @state
+          {:search/keys [index results type]} @state]
+      [:> Autocomplete {:event last-e
+                        :isOpen (= type :slash)
+                        :onClose #(swap! state assoc :search/type false)}
+       (when (= type :slash)
+         (for [[i [text icon _expansion kbd _pos :as item]] (map-indexed list results)]
+           [:> AutocompleteButton {:key     text
+                                   :id      (str "dropdown-item-" i)
+                                   :command kbd
+                                   :isActive (when (= i index) "isActive")
+                                   :onClick (fn [_] (slash-item-click state block item))}
+            [:<>
+             [(r/adapt-react-class icon) {:boxSize 6 :mr 3 :ml 0}]
+             text]]))])))
diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs
index 2b0a43a8d5..6cf3a656e7 100644
--- a/src/cljs/athens/views/blocks/content.cljs
+++ b/src/cljs/athens/views/blocks/content.cljs
@@ -242,8 +242,7 @@
                      :on-click  (fn [e] (.. e stopPropagation) (rf/dispatch [:editing/uid uid]))}
          ;; NOTE: komponentit forces reflow, likely a performance bottle neck
          ;; When block is in editing mode or the editing DOM elements are rendered
-         ;;  (when (or (:show-editable-dom @state) @editing?)
-         (when true
+         (when (or (:show-editable-dom @state) @editing?)
            [autosize/textarea {:value          (:string/local @state)
                                :class          ["block-input-textarea" (when (and (empty? @selected-items) @editing?) "is-editing")]
                                ;; :auto-focus  true
diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs
index d32b8df721..4380ad61b1 100644
--- a/src/cljs/athens/views/blocks/core.cljs
+++ b/src/cljs/athens/views/blocks/core.cljs
@@ -402,7 +402,6 @@
          [:> Container {:sx (merge block-container-inner-style
                                    {"--block-surface-color" "background.floor"})
                         :isDragging (and dragging (not is-selected))
-                        ;; :isEditing is-editing
                         :isSelected is-selected
                         :hasChildren (seq children)
                         :isOpen open
diff --git a/src/cljs/athens/views/blocks/textarea_keydown.cljs b/src/cljs/athens/views/blocks/textarea_keydown.cljs
index 8ef494790a..ffe21fd4ac 100644
--- a/src/cljs/athens/views/blocks/textarea_keydown.cljs
+++ b/src/cljs/athens/views/blocks/textarea_keydown.cljs
@@ -1,12 +1,6 @@
 (ns athens.views.blocks.textarea-keydown
   (:require
-    ["@material-ui/icons/DesktopWindows" :default DesktopWindows]
-    ["@material-ui/icons/Done" :default Done]
-    ["@material-ui/icons/FlipToFront" :default FlipToFront]
-    ["@material-ui/icons/Timer" :default Timer]
-    ["@material-ui/icons/Today" :default Today]
-    ["@material-ui/icons/ViewDayRounded" :default ViewDayRounded]
-    ["@material-ui/icons/YouTube" :default YouTube]
+    ["/components/Icons/Icons" :refer [TimeNow CheckboxIcon CalendarNowIcon CalendarTomorrowIcon CalendarYesterdayIcon BlockEmbedIcon TemplateIcon HTMLEmbedIcon YoutubeIcon]]
     [athens.common-db :as common-db]
     [athens.common.utils :as common.utils]
     [athens.dates :as dates]
@@ -14,14 +8,13 @@
     [athens.events.selection :as select-events]
     [athens.router :as router]
     [athens.subs.selection :as select-subs]
-    [athens.util :as util :refer [scroll-if-needed get-caret-position shortcut-key? escape-str]]
+    [athens.util :as util :refer [scroll-if-needed shortcut-key? escape-str]]
     [athens.views.blocks.internal-representation :as internal-representation]
     [clojure.string :refer [replace-first blank? includes? lower-case]]
     [goog.dom :refer [getElement]]
     [goog.dom.selection :refer [setStart setEnd getText setCursorPosition getEndPoints]]
     [goog.events.KeyCodes :refer [isCharacterKey]]
-    [goog.functions :refer [throttle #_debounce]]
-    [goog.style :refer [getClientPosition]]
+    [goog.functions :refer [throttle]]
     [re-frame.core :as rf :refer [dispatch dispatch-sync subscribe]])
   (:import
     (goog.events
@@ -96,18 +89,17 @@
 
 
 ;; Dropdown: inline-search and slash commands
-
 ;; TODO: some expansions require caret placement after
 (def slash-options
-  [["Add Todo"      Done "{{[[TODO]]}} " "cmd-enter" nil]
-   ["Current Time"  Timer (fn [] (.. (js/Date.) (toLocaleTimeString [] (clj->js {"timeStyle" "short"})))) nil nil]
-   ["Today"         Today (fn [] (str "[[" (:title (dates/get-day 0)) "]] ")) nil nil]
-   ["Tomorrow"      Today (fn [] (str "[[" (:title (dates/get-day -1)) "]]")) nil nil]
-   ["Yesterday"     Today (fn [] (str "[[" (:title (dates/get-day 1)) "]]")) nil nil]
-   ["YouTube Embed" YouTube "{{[[youtube]]: }}" nil 2]
-   ["iframe Embed"  DesktopWindows "{{iframe: }}" nil 2]
-   ["Block Embed"   ViewDayRounded "{{[[embed]]: (())}}" nil 4]
-   ["Template"      FlipToFront ";;" nil nil]])
+  [["Add Todo"      CheckboxIcon "{{[[TODO]]}} " "cmd-enter" nil]
+   ["Current Time"  TimeNow (fn [] (.. (js/Date.) (toLocaleTimeString [] (clj->js {"timeStyle" "short"})))) nil nil]
+   ["Today"         CalendarNowIcon (fn [] (str "[[" (:title (dates/get-day 0)) "]] ")) nil nil]
+   ["Tomorrow"      CalendarTomorrowIcon (fn [] (str "[[" (:title (dates/get-day -1)) "]]")) nil nil]
+   ["Yesterday"     CalendarYesterdayIcon (fn [] (str "[[" (:title (dates/get-day 1)) "]]")) nil nil]
+   ["YouTube Embed" YoutubeIcon "{{[[youtube]]: }}" nil 2]
+   ["iframe Embed"  HTMLEmbedIcon "{{iframe: }}" nil 2]
+   ["Block Embed"   BlockEmbedIcon "{{[[embed]]: (())}}" nil 4]
+   ["Template"      TemplateIcon ";;" nil nil]])
 
 
 ;; [ "Block Embed" #(str "[[" (:title (dates/get-day 1)) "]]")]
@@ -182,6 +174,7 @@
    (let [target (.. e -target)
          {:search/keys [index results]} @state
          item (nth results index)]
+     (println "ran auto-complete-slash")
      (auto-complete-slash state target item)))
   ;; here comes the autocompletion logic itself,
   ;; independent of the input method the user used.
@@ -197,6 +190,8 @@
          start-idx (dec (count (re-find #"(?s).*/" head)))]
      (swap! state assoc
             :search/type nil)
+
+     (println "ran auto-complete-slash")
      (set-selection target start-idx start)
      (replace-selection-with expand)
      (when pos
@@ -470,8 +465,9 @@
   "BUG: escape is fired 24 times for some reason."
   [e state]
   (.. e preventDefault)
-  (swap! state assoc :search/type nil)
-  (dispatch [:editing/uid nil]))
+  (if (:search/type @state)
+    (swap! state assoc :search/type nil)
+    (dispatch [:editing/uid nil])))
 
 
 (def throttled-dispatch-sync
@@ -815,15 +811,7 @@
 
       ;; used for paste, to determine if shift key was held down
       (swap! state assoc :last-keydown d-event)
-
-      ;; update caret position for search dropdowns and for up/down
-      (when (nil? (:search/type @state))
-
-        (let [caret-position (get-caret-position (.. e -target))
-              textarea-position (js->clj (getClientPosition (.. e -target)) :keywordize-keys true)
-              position {:left (+ (:left caret-position) (.. textarea-position -x))
-                        :top (+ (:top caret-position) (.. textarea-position -y))}]
-          (swap! state assoc :caret-position position)))
+      (swap! state assoc :last-e e)
 
       ;; dispatch center
       ;; only when nothing is selected or duplicate/events dispatched
diff --git a/src/cljs/athens/views/left_sidebar.cljs b/src/cljs/athens/views/left_sidebar.cljs
index 63e4014896..4e525abd6b 100644
--- a/src/cljs/athens/views/left_sidebar.cljs
+++ b/src/cljs/athens/views/left_sidebar.cljs
@@ -25,6 +25,7 @@
                 :borderBottomColor (when (:below @drag) "brand")}
        [:> Button {:variant "ghost"
                    :mx "1rem"
+                   :display "inline-block"
                    :textAlign "left"
                    :justifyContent "flex-start"
                    :overflow "hidden"
@@ -85,6 +86,7 @@
         {:style {:display "flex"
                  :flex-direction "column"
                  :height "100%"
+                 :zIndex 1
                  :alignItems "stretch"
                  :gridArea "left-sidebar"
                  :position "relative"
@@ -101,10 +103,13 @@
                     :align "stretch"
                     :width expanded-sidebar-width
                     :py "1rem"
-                    :paddingTop "7rem"
+                    :marginTop "7rem"
                     :spacing "0.25rem"
-                    :overflowY "overlay"
-                    :sx {:listStyle "none"
+                    :overflowY "auto"
+                    :backdropFilter "blur(1em)"
+                    :borderRadius "lg"
+                    :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}
+                         :listStyle "none"
                          :WebkitAppRegion "no-drag"}}
          [:> Heading {:as "h2"
                       :px "2rem"
diff --git a/src/cljs/athens/views/pages/all_pages.cljs b/src/cljs/athens/views/pages/all_pages.cljs
index a2fc62df0c..03aed2f98a 100644
--- a/src/cljs/athens/views/pages/all_pages.cljs
+++ b/src/cljs/athens/views/pages/all_pages.cljs
@@ -1,8 +1,7 @@
 (ns athens.views.pages.all-pages
   (:require
+    ["/components/Icons/Icons" :refer [ChevronUpIcon ChevronDownIcon]]
     ["@chakra-ui/react" :refer [Table Thead Tr Th Tbody Td Button Box]]
-    ["@material-ui/icons/ArrowDropDown" :default ArrowDropDown]
-    ["@material-ui/icons/ArrowDropUp" :default ArrowDropUp]
     [athens.common-db          :as common-db]
     [athens.dates              :as dates]
     [athens.db                 :as db]
@@ -68,13 +67,17 @@
          growing?  @(rf/subscribe [:all-pages/sort-order-ascending?])]
      [:> Th {:width width :isNumeric isNumeric}
       [:> Button {:onClick #(rf/dispatch [:all-pages/sort-by column-id])
-                  :size "sm"
-                  :variant "link"}
+                  :size "xs"
+                  :textTransform "uppercase"
+                  :gap "0.25em"
+                  :variant "link"
+                  :color "inherit"
+                  :_hover {:textDecoration "none"}}
        (when-not isNumeric label)
        (when (= sorted-by column-id)
          (if growing?
-           [:> ArrowDropUp]
-           [:> ArrowDropDown]))
+           [:> ChevronUpIcon]
+           [:> ChevronDownIcon]))
        (when isNumeric label)]])))
 
 
@@ -84,12 +87,13 @@
     (fn []
       (let [sorted-pages @(rf/subscribe [:all-pages/sorted all-pages])]
         [:> Box {:px 4
+                 :maxWidth "70rem"
                  :margin "calc(var(--app-header-height) + 2rem) auto 5rem"}
          [:> Table {:variant "striped"}
           [:> Thead
            [:> Tr
             [sortable-header :title "Title"]
-            [sortable-header :links-count "Links" "12rem" true]
+            [sortable-header :links-count "Links" "6rem" true]
             [sortable-header :modified "Modified" "16rem" false {:date? true}]
             [sortable-header :created "Created" "16rem" false {:date? true}]]]
           [:> Tbody
@@ -98,7 +102,7 @@
                     modified :edit/time
                     created  :create/time} sorted-pages]
                [:> Tr {:key uid}
-                [:> Td {:overflow "hidden"}
+                [:> Td
                  [:> Button {:variant "link"
                              :justifyContent "flex-start"
                              :textAlign "left"
@@ -106,7 +110,8 @@
                              :color "link"
                              :display "block"
                              :maxWidth "100%"
-                             :whiteSpace "nowrap"
+                             :whiteSpace "wrap"
+                             :wordBreak "break-all"
                              :onClick (fn [e]
                                         (let [shift? (.-shiftKey e)]
                                           (rf/dispatch [:reporting/navigation {:source :all-pages
@@ -116,6 +121,6 @@
                                                                                          :main-pane)}])
                                           (router/navigate-page title e)))}
                   title]]
-                [:> Td {:width "12rem" :whiteSpace "nowrap" :color "foreground.secondary" :isNumeric true} (count _refs)]
+                [:> Td {:width "6rem" :whiteSpace "nowrap" :color "foreground.secondary" :isNumeric true} (count _refs)]
                 [:> Td {:width "16rem" :whiteSpace "nowrap" :color "foreground.secondary"} (dates/date-string modified)]
                 [:> Td {:width "16rem" :whiteSpace "nowrap" :color "foreground.secondary"} (dates/date-string created)]]))]]]))))
diff --git a/src/cljs/athens/views/pages/block_page.cljs b/src/cljs/athens/views/pages/block_page.cljs
index 42db80a176..6eb81d2b45 100644
--- a/src/cljs/athens/views/pages/block_page.cljs
+++ b/src/cljs/athens/views/pages/block_page.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.pages.block-page
   (:require
-    ["/components/Page/Page" :refer [PageHeader PageBody PageFooter EditableTitleContainer]]
+    ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
     ["@chakra-ui/react" :refer [Breadcrumb BreadcrumbItem BreadcrumbLink VStack AccordionIcon Accordion AccordionItem AccordionButton AccordionPanel]]
     [athens.parse-renderer :as parse-renderer]
     [athens.reactive :as reactive]
@@ -105,21 +105,22 @@
         [:<>
 
          ;; Header
-         [:> PageHeader
+         [:> PageHeader {:onClickOpenInSidebar (when-not (contains? @(subscribe [:right-sidebar/items]) uid)
+                                                 #(dispatch [:right-sidebar/open-item uid]))}
 
           ;; Parent Context
           [parents-el uid id]
-          [:> EditableTitleContainer {:isEditing @(subscribe [:editing/is-editing uid])
-                                      :onClick (fn [e]
-                                                 (.. e preventDefault)
-                                                 (if (.. e -shiftKey)
-                                                   (do
-                                                     (dispatch [:reporting/navigation {:source :block-page
-                                                                                       :target :block
-                                                                                       :pane   :right-pane}])
-                                                     (router/navigate-uid uid e))
-
-                                                   (dispatch [:editing/uid uid])))}
+          [:> TitleContainer {:isEditing @(subscribe [:editing/is-editing uid])
+                              :onClick (fn [e]
+                                         (.. e preventDefault)
+                                         (if (.. e -shiftKey)
+                                           (do
+                                             (dispatch [:reporting/navigation {:source :block-page
+                                                                               :target :block
+                                                                               :pane   :right-pane}])
+                                             (router/navigate-uid uid e))
+
+                                           (dispatch [:editing/uid uid])))}
            [autosize/textarea
             {:value       (:string/local @state)
              :class       (when @(subscribe [:editing/is-editing uid]) "is-editing")
diff --git a/src/cljs/athens/views/pages/core.cljs b/src/cljs/athens/views/pages/core.cljs
index 9d0f5b1801..ae8cac2d61 100644
--- a/src/cljs/athens/views/pages/core.cljs
+++ b/src/cljs/athens/views/pages/core.cljs
@@ -26,8 +26,9 @@
              :alignItems "flex-start"
              :justifyContent "stretch"
              :display "flex"
-             :overflowY "overlay"
-             :sx {:maskImage "linear-gradient(to bottom,
+             :overflowY "auto"
+             :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}
+                  :maskImage "linear-gradient(to bottom,
                   transparent,
                   #000000cc 1rem, 
                   black 1.5rem, 
@@ -45,6 +46,7 @@
                               :position "fixed"
                               :zIndex "-1"
                               :inset 0
+                              :pointerEvents "none"
                               :top "3.25rem"
                               :WebkitAppRegion "no-drag"}
                   "::WebkitScrollbar" {:background "background.basement"
diff --git a/src/cljs/athens/views/pages/node_page.cljs b/src/cljs/athens/views/pages/node_page.cljs
index 973d6d460b..0139d40cd1 100644
--- a/src/cljs/athens/views/pages/node_page.cljs
+++ b/src/cljs/athens/views/pages/node_page.cljs
@@ -2,7 +2,7 @@
   (:require
     ["/components/Block/components/Anchor" :refer [Anchor]]
     ["/components/Confirmation/Confirmation" :refer [Confirmation]]
-    ["/components/Page/Page" :refer [PageHeader PageBody PageFooter EditableTitleContainer]]
+    ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
     ["@chakra-ui/react" :refer [Text Box Button Portal IconButton AccordionIcon AccordionItem AccordionPanel MenuDivider MenuButton Menu MenuList MenuItem Accordion AccordionButton Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
     ["@material-ui/icons/Bookmark" :default Bookmark]
     ["@material-ui/icons/BookmarkBorder" :default BookmarkBorder]
@@ -212,8 +212,9 @@
   (let [{:block/keys [uid] sidebar
          :page/sidebar title
          :node/title} node]
-    [:> Menu
+    [:> Menu {:isLazy true}
      [:> MenuButton {:as IconButton
+                     "aria-label" "Page menu"
                      :gridArea "menu"
                      :justifySelf "flex-end"
                      :alignSelf "center"
@@ -432,13 +433,13 @@
                            :onClose   cancel-fn}]
 
          ;; Header
-         [:> PageHeader
+         [:> PageHeader {:onClickOpenInSidebar (when-not (contains? @(subscribe [:right-sidebar/items]) uid)
+                                                 #(dispatch [:right-sidebar/open-item uid]))}
 
           ;; Dropdown
           [menu-dropdown node daily-note?]
 
-          [:> EditableTitleContainer
-           {:isEditing @(subscribe [:editing/is-editing uid])}
+          [:> TitleContainer {:isEditing @(subscribe [:editing/is-editing uid])}
            ;; Prevent editable textarea if a node/title is a date
            ;; Don't allow title editing from daily notes, right sidebar, or node-page itself.
 
diff --git a/src/cljs/athens/views/right_sidebar.cljs b/src/cljs/athens/views/right_sidebar.cljs
index 9a73961d12..aa2aa8ce63 100644
--- a/src/cljs/athens/views/right_sidebar.cljs
+++ b/src/cljs/athens/views/right_sidebar.cljs
@@ -91,14 +91,17 @@
                                     :flex 1;
                                     :maxHeight "calc(100vh - 3.25rem - 1px)"
                                     :width (str (:width @state) "vw")
-                                    :overflowY "overlay"}
+                                    :overflowY "auto"
+                                    :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}}
                                    (if (empty? items)
                                      [empty-message]
                                      (doall
-                                       (for [[uid {:keys [node/title block/string is-graph?]}] items]
-                                         ^{:key uid}
-                                         [:> SidebarItem {:defaultIsOpen true
+                                       (for [[uid {:keys [open node/title block/string is-graph?]}] items]
+                                         [:> SidebarItem {:isOpen open
+                                                          :key uid
+                                                          :type (cond is-graph? "graph" title "node" :else "block")
                                                           :onRemove #(dispatch [:right-sidebar/close-item uid])
+                                                          :onToggle #(dispatch [:right-sidebar/toggle-item uid])
                                                           ;; nth 1 to get just the title
                                                           :title (nth [parse-renderer/parse-and-render (or title string) uid] 1)}
                                           (cond
diff --git a/src/js/components/AppToolbar/AppToolbar.tsx b/src/js/components/AppToolbar/AppToolbar.tsx
index 0aad7baf1f..7541aa6fa9 100644
--- a/src/js/components/AppToolbar/AppToolbar.tsx
+++ b/src/js/components/AppToolbar/AppToolbar.tsx
@@ -279,7 +279,7 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
     ...rest
   } = props;
   const { colorMode, toggleColorMode } = useColorMode();
-  const [ canShowFullSecondaryMenu ] = useMediaQuery('(min-width: 900px)');
+  const [canShowFullSecondaryMenu] = useMediaQuery('(min-width: 900px)');
 
   // If the database color mode doesn't match
   // the chakra color mode, update the chakra color mode
@@ -289,7 +289,7 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
     } else if (!isThemeDark && colorMode !== 'light') {
       toggleColorMode()
     }
-  }, [ isThemeDark, toggleColorMode ])
+  }, [isThemeDark, toggleColorMode])
 
   const secondaryTools = [
     {
diff --git a/src/js/components/Block/components/Anchor.tsx b/src/js/components/Block/components/Anchor.tsx
index 1533ee0151..81bf59ebf5 100644
--- a/src/js/components/Block/components/Anchor.tsx
+++ b/src/js/components/Block/components/Anchor.tsx
@@ -48,7 +48,7 @@ const Item = ({ children }) => {
 }
 
 const propertiesList = (block) => {
-  return Object.entries(properties(block)).map(([ key, value ]) => {
+  return Object.entries(properties(block)).map(([key, value]) => {
     return <Item key={key}>
       <span>{key}</span>
       <span>{showValue(value)}</span>
@@ -81,7 +81,7 @@ const anchorButtonStyleProps = (isClosedWithChildren) => {
   return ({
     bg: "transparent",
     "aria-label": "Block anchor",
-    className: [ 'anchor', isClosedWithChildren && 'closed-with-children' ].filter(Boolean).join(' '),
+    className: ['anchor', isClosedWithChildren && 'closed-with-children'].filter(Boolean).join(' '),
     draggable: true,
     gridArea: "bullet",
     flexShrink: 0,
@@ -134,6 +134,8 @@ const anchorButtonStyleProps = (isClosedWithChildren) => {
  * A handle and indicator of a block's position in the document
 */
 export const Anchor = (props: AnchorProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
   const { isClosedWithChildren,
     anchorElement,
     shouldShowDebugDetails,
@@ -146,10 +148,31 @@ export const Anchor = (props: AnchorProps) => {
     uidSanitizedBlock,
   } = props;
 
-  const [ isOpen, setIsOpen ] = React.useState(false);
+  // Early return with just the button, to avoid rendering the menu
+  // with all its juicy portaling goodness.
+  if (!isOpen) {
+    return <IconButton
+      aria-label="Block anchor"
+      {...anchorButtonStyleProps(isClosedWithChildren)}
+      onDragStart={onDragStart}
+      onClick={onClick}
+      onDragEnd={onDragEnd}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsOpen(true);
+      }}
+    >
+      {ANCHORS[anchorElement] || ANCHORS.CIRCLE}
+    </IconButton>
+  }
 
   return (
-    <Menu isOpen={isOpen} isLazy={true} onClose={() => setIsOpen(false)}>
+    <Menu
+      isOpen={true}
+      isLazy={true}
+      onClose={() => setIsOpen(false)}
+    >
       <IconButton
         aria-label="Block anchor"
         {...anchorButtonStyleProps(isClosedWithChildren)}
@@ -163,9 +186,10 @@ export const Anchor = (props: AnchorProps) => {
         }}
         as={MenuButton}
       >
-        {ANCHORS[ anchorElement ] || ANCHORS.CIRCLE}
+        {ANCHORS[anchorElement] || ANCHORS.CIRCLE}
       </IconButton>
-      <Portal>
+      <Portal
+      >
         <MenuList>
           <MenuItem onClick={onCopyRef}>Copy block refs</MenuItem>
           <MenuItem onClick={onCopyUnformatted}>Copy unformatted</MenuItem>
diff --git a/src/js/components/Block/components/Autocomplete.tsx b/src/js/components/Block/components/Autocomplete.tsx
new file mode 100644
index 0000000000..40ce7be85f
--- /dev/null
+++ b/src/js/components/Block/components/Autocomplete.tsx
@@ -0,0 +1,140 @@
+
+import React from 'react';
+import {
+  Box, PopoverBody, Popover,
+  Button,
+  PopoverTrigger,
+  useOutsideClick,
+  PopoverContent,
+  Portal
+} from '@chakra-ui/react';
+import getCaretCoordinates from '@/../textarea'
+
+const getCaretPositionFromKeyDownEvent = (event) => {
+  if (event?.target) {
+    const localCaretCoordinates = getCaretCoordinates(event?.target);
+    const { x: targetLeft, y: targetTop } = event?.target.getBoundingClientRect();
+    const position = {
+      left: localCaretCoordinates.left + targetLeft,
+      top: localCaretCoordinates.top + targetTop,
+      height: localCaretCoordinates.height + targetLeft,
+    }
+    return position;
+  }
+}
+
+const scrollToEl = (el) => {
+  if (el) {
+    el.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center',
+    });
+  }
+}
+
+export const AutocompleteButton = ({ children, onClick, isActive, ...props }) => {
+  const buttonRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (isActive) {
+      scrollToEl(buttonRef.current);
+    }
+  }, [isActive]);
+
+  return (
+    <Button
+      ref={buttonRef}
+      variant="ghost"
+      borderRadius={0}
+      flexShrink={0}
+      maxWidth="100%"
+      justifySelf="stretch"
+      overflowX="hidden"
+      display="inline-block"
+      textAlign="left"
+      justifyContent="flex-start"
+      isActive={isActive}
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+      fontWeight="normal"
+      _first={{
+        borderTopRadius: "inherit",
+      }}
+      _last={{
+        borderBottomRadius: "inherit",
+      }}
+      {...props}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export const Autocomplete = ({ isOpen, onClose, event, children }) => {
+  // Early return with nothing, to avoid rendering all
+  // the juicy portaling goodness.
+  if (!isOpen) {
+    return null;
+  }
+
+  const menuRef = React.useRef(null);
+  const lastEventTargetValue = React.useRef(null);
+  const currentEventPosition = React.useRef({ left: null, top: null });
+  const newEventTargetValue = event?.target?.value;
+  const isNewEvent = newEventTargetValue !== lastEventTargetValue.current;
+
+  useOutsideClick({
+    ref: menuRef,
+    handler: () => onClose(),
+  })
+
+  if (isOpen && isNewEvent) {
+    currentEventPosition.current = getCaretPositionFromKeyDownEvent(event)
+  };
+
+  lastEventTargetValue.current = newEventTargetValue;
+
+  return (
+    <Popover
+      isOpen={isOpen}
+      placement="bottom-start"
+      isLazy={true}
+      returnFocusOnClose={false}
+      closeOnBlur={true}
+      closeOnEsc={true}
+      onClose={onClose}
+      autoFocus={false}
+    >
+      <PopoverTrigger>
+        <Box
+          visibility="hidden"
+          bg="red"
+          position="fixed"
+          width="1px"
+          height="1.5em"
+          zIndex="100"
+          left={currentEventPosition.current.left + 'px'}
+          top={currentEventPosition.current.top + "px"}
+        >
+        </Box>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent
+          borderRadius="md"
+          shadow="menu"
+          bg="background.vibrancy"
+          borderColor="separator.divider"
+          backdropFilter="blur(20px)"
+          maxWidth="max-content"
+          ref={menuRef}
+          p={0}
+          overflow="auto"
+          maxHeight={`calc(100vh - 2rem - 2rem - ${currentEventPosition.current.top}px)`}
+        >
+          {children}
+        </PopoverContent>
+      </Portal>
+    </Popover>)
+}
\ No newline at end of file
diff --git a/src/js/components/Block/components/Content.tsx b/src/js/components/Block/components/Content.tsx
index b22ed917fa..63c4984561 100644
--- a/src/js/components/Block/components/Content.tsx
+++ b/src/js/components/Block/components/Content.tsx
@@ -35,7 +35,6 @@ const _Content = ({ children, fontSize, ...props }) => {
         minHeight: "100%",
         margin: "0",
         fontSize: "inherit",
-        borderRadius: "0.25rem",
         border: 0,
         opacity: 0,
         fontFamily: "inherit"
diff --git a/src/js/components/Confirmation/Confirmation.tsx b/src/js/components/Confirmation/Confirmation.tsx
index 520187e7dc..f66e5f8298 100644
--- a/src/js/components/Confirmation/Confirmation.tsx
+++ b/src/js/components/Confirmation/Confirmation.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Portal, useDisclosure, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogBody, Button, ButtonGroup } from "@chakra-ui/react"
 
 export const Confirmation = ({
-  db,
   isOpen,
   title,
   message,
@@ -19,9 +18,6 @@ export const Confirmation = ({
       onClose: onClose
     })
 
-  console.log(db, isOpen, title, message);
-  console.log('alerting!');
-
   return (<AlertDialog
     isOpen={isConfirmOpen}
     leastDestructiveRef={cancelRef}
diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx
index 82d6e52146..ab80e4b8f5 100644
--- a/src/js/components/Icons/Icons.tsx
+++ b/src/js/components/Icons/Icons.tsx
@@ -1,124 +1,243 @@
 import { createIcon } from '@chakra-ui/react'
 
+export const AllPagesIcon = createIcon({
+  displayName: 'AllPagesIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><g opacity=".5"><rect width="17" height="17" x="3.5" y="3.5" opacity=".1" rx="1.5" /><rect width="13" height="19" x="5.5" y="2.5" opacity=".1" rx="1.5" /><rect width="19" height="13" x="2.5" y="5.5" opacity=".1" rx="1.5" /><circle cx="12" cy="12" r="9.5" opacity=".1" /></g><path fill="currentColor" fillRule="evenodd" d="M9 2a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V6.233a2 2 0 0 0-.592-1.42L17.156 2.58A2 2 0 0 0 15.748 2H9ZM4 7a2 2 0 0 1 1.5-1.937V20a.5.5 0 0 0 .5.5h9.937A2 2 0 0 1 14 22H6a2 2 0 0 1-2-2V7Z" clipRule="evenodd" /></>
+  ),
+});
 
-export const RightSidebarIcon = createIcon({
-  displayName: 'RightSidebarIcon',
+export const ArrowLeftIcon = createIcon({
+  displayName: 'ArrowLeftIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M13 4.5H18C18.8284 4.5 19.5 5.17157 19.5 6V18C19.5 18.8284 18.8284 19.5 18 19.5H13C12.4477 19.5 12 19.0523 12 18.5V5.5C12 4.94772 12.4477 4.5 13 4.5ZM3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M8.107 6.493a1 1 0 0 0-1.414 0l-4.8 4.8a1 1 0 0 0 0 1.414l4.8 4.8a1 1 0 0 0 1.414-1.414L5.014 13H20.5a1 1 0 1 0 0-2H5.014l3.093-3.093a1 1 0 0 0 0-1.414Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const AllPagesIcon = createIcon({
-  displayName: 'AllPagesIcon',
+export const ArrowRightIcon = createIcon({
+  displayName: 'ArrowRightIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M9 2C7.89543 2 7 2.89543 7 4V17C7 18.1046 7.89543 19 9 19H18C19.1046 19 20 18.1046 20 17V6.23333C20 5.7 19.787 5.18876 19.4083 4.81321L17.1562 2.57988C16.7816 2.20842 16.2754 2 15.7479 2H9ZM4 7C4 6.06808 4.63739 5.28503 5.5 5.06301V7V17V20C5.5 20.2761 5.72386 20.5 6 20.5H9H14H14.001H15.937C15.715 21.3626 14.9319 22 14 22H6C4.89543 22 4 21.1046 4 20V7Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M15.893 6.493a1 1 0 0 1 1.414 0l4.8 4.8a1 1 0 0 1 0 1.414l-4.8 4.8a1 1 0 0 1-1.414-1.414L18.986 13H3a1 1 0 1 1 0-2h15.986l-3.093-3.093a1 1 0 0 1 0-1.414Z" clipRule="evenodd" /></>
+  ),
+});
 
+export const BlockEmbedIcon = createIcon({
+  displayName: 'Block EmbedIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M18.985 4.476a1 1 0 0 1 1.373.343l.604 1.007a12 12 0 0 1 0 12.348l-.604 1.007a1 1 0 0 1-1.716-1.029l.605-1.007a10 10 0 0 0 0-10.29l-.605-1.007a1 1 0 0 1 .343-1.372Zm-5 0a1 1 0 0 1 1.373.343l.604 1.007a12 12 0 0 1 0 12.348l-.604 1.007a1 1 0 0 1-1.716-1.029l.605-1.007a10 10 0 0 0 0-10.29l-.604-1.007a1 1 0 0 1 .342-1.372Zm-10.343.343a1 1 0 1 1 1.715 1.029l-.604 1.007a10 10 0 0 0 0 10.29l.604 1.007a1 1 0 0 1-1.715 1.03l-.604-1.008a12 12 0 0 1 0-12.348l.604-1.007Zm6.373-.343a1 1 0 0 0-1.372.343l-.605 1.007a12 12 0 0 0 0 12.348l.605 1.007a1 1 0 0 0 1.714-1.029l-.604-1.007a10 10 0 0 1 0-10.29l.604-1.007a1 1 0 0 0-.342-1.372Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const XmarkIcon = createIcon({
-  displayName: 'XmarkIcon',
+export const CalendarNowIcon = createIcon({
+  displayName: 'CalendarNowIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M19.2071 4.79289C18.8166 4.40237 18.1834 4.40237 17.7929 4.79289L12 10.5858L6.20711 4.79289C5.81658 4.40237 5.18342 4.40237 4.79289 4.79289C4.40237 5.18342 4.40237 5.81658 4.79289 6.20711L10.5858 12L4.79289 17.7929C4.40237 18.1834 4.40237 18.8166 4.79289 19.2071C5.18342 19.5976 5.81658 19.5976 6.20711 19.2071L12 13.4142L17.7929 19.2071C18.1834 19.5976 18.8166 19.5976 19.2071 19.2071C19.5976 18.8166 19.5976 18.1834 19.2071 17.7929L13.4142 12L19.2071 6.20711C19.5976 5.81658 19.5976 5.18342 19.2071 4.79289Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M7 2a1 1 0 0 1 2 0v1h5.5V2a1 1 0 1 1 2 0v1H19a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2V2Zm11.5 5a1 1 0 0 1 1 1v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8a1 1 0 0 1 1-1h13Zm-8.445 2.995a.75.75 0 0 0-1.11 1.01l2.041 2.245-2.041 2.245a.75.75 0 0 0 1.11 1.01L12 14.364l1.945 2.14a.75.75 0 0 0 1.11-1.01l-2.041-2.245 2.041-2.245a.75.75 0 0 0-1.11-1.01L12 12.136l-1.945-2.14Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const CalendarTomorrowIcon = createIcon({
+  displayName: 'CalendarTomorrowIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M8 1a1 1 0 0 0-1 1v1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2.5V2a1 1 0 1 0-2 0v1H9V2a1 1 0 0 0-1-1Zm11.5 7a1 1 0 0 0-1-1h-13a1 1 0 0 0-1 1v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V8Z" clipRule="evenodd" /><path fill="currentColor" fillRule="evenodd" d="M13.77 10.07a.75.75 0 0 1 1.06 0l2.4 2.4a.75.75 0 0 1 0 1.06l-2.4 2.4a.75.75 0 1 1-1.06-1.06l1.12-1.12H7.5a.75.75 0 0 1 0-1.5h7.39l-1.12-1.12a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const CalendarYesterdayIcon = createIcon({
+  displayName: 'CalendarYesterdayIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M8 1a1 1 0 0 0-1 1v1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2.5V2a1 1 0 1 0-2 0v1H9V2a1 1 0 0 0-1-1Zm11.5 7a1 1 0 0 0-1-1h-13a1 1 0 0 0-1 1v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V8Z" clipRule="evenodd" /><path fill="currentColor" fillRule="evenodd" d="M10.23 10.07a.75.75 0 0 0-1.06 0l-2.4 2.4a.75.75 0 0 0 0 1.06l2.4 2.4a.75.75 0 1 0 1.06-1.06l-1.12-1.12h7.14a.75.75 0 0 0 0-1.5H9.11l1.12-1.12a.75.75 0 0 0 0-1.06Z" clipRule="evenodd" /></>
   ),
-})
+});
+
+export const CheckboxIcon = createIcon({
+  displayName: 'CheckboxIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M5 4.5h14a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm15.006 2.26a1 1 0 0 0-1.413.067l-5.926 6.52-2.594-2.853a1 1 0 1 0-1.48 1.345l3.334 3.667a1 1 0 0 0 1.48 0l6.666-7.333a1 1 0 0 0-.067-1.413Z" clipRule="evenodd" /></>
+  ),
+});
 
 export const CheckmarkIcon = createIcon({
   displayName: 'CheckmarkIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M18.2601 5.32733C18.6316 4.91867 19.264 4.88855 19.6727 5.26006C20.0813 5.63157 20.1114 6.26401 19.7399 6.67267L9.73994 17.6727C9.55042 17.8811 9.28174 18 9 18C8.71825 18 8.44958 17.8811 8.26006 17.6727L3.26006 12.1727C2.88855 11.764 2.91867 11.1316 3.32733 10.7601C3.73598 10.3886 4.36843 10.4187 4.73994 10.8273L9 15.5134L18.2601 5.32733Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M19.26 5.327a1 1 0 1 1 1.48 1.346l-10 11a1 1 0 0 1-1.48 0l-5-5.5a1 1 0 0 1 1.48-1.346L10 15.513l9.26-10.186Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const DailyNotesIcon = createIcon({
-  displayName: 'DailyNotesIcon',
+export const ChevronDownIcon = createIcon({
+  displayName: 'ChevronDownIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M7.75 1C7.33579 1 7 1.33579 7 1.75V3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H16.5V1.75C16.5 1.33579 16.1642 1 15.75 1C15.3358 1 15 1.33579 15 1.75V3H8.5V1.75C8.5 1.33579 8.16421 1 7.75 1ZM19.5 8C19.5 7.44772 19.0523 7 18.5 7H5.5C4.94772 7 4.5 7.44772 4.5 8V19C4.5 19.2761 4.72386 19.5 5 19.5H19C19.2761 19.5 19.5 19.2761 19.5 19V8ZM7 13.75C7 13.3358 7.33579 13 7.75 13H16.25C16.6642 13 17 13.3358 17 13.75C17 14.1642 16.6642 14.5 16.25 14.5H7.75C7.33579 14.5 7 14.1642 7 13.75ZM8 9.5C7.44772 9.5 7 9.94771 7 10.5C7 11.0523 7.44772 11.5 8 11.5H13C13.5523 11.5 14 11.0523 14 10.5C14 9.94771 13.5523 9.5 13 9.5H8ZM7 16.25C7 15.8358 7.33579 15.5 7.75 15.5H14.25C14.6642 15.5 15 15.8358 15 16.25C15 16.6642 14.6642 17 14.25 17H7.75C7.33579 17 7 16.6642 7 16.25Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M20.707 8.707a1 1 0 0 0-1.414-1.414L12 14.586 4.707 7.293a1 1 0 0 0-1.414 1.414l8 8a1 1 0 0 0 1.414 0l8-8Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const SearchIcon = createIcon({
-  displayName: 'SearchIcon',
+export const ChevronLeftIcon = createIcon({
+  displayName: 'ChevronLeftIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M17.5 11C17.5 14.5899 14.5899 17.5 11 17.5C7.41015 17.5 4.5 14.5899 4.5 11C4.5 7.41015 7.41015 4.5 11 4.5C14.5899 4.5 17.5 7.41015 17.5 11ZM16.1102 17.1555C14.7242 18.3073 12.943 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11C19 12.934 18.3137 14.7077 17.1714 16.0909L20.9939 19.4356C21.3056 19.7083 21.3372 20.1822 21.0644 20.4939C20.7917 20.8056 20.3178 20.8372 20.0061 20.5644L16.1102 17.1555Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M14.293 3.293a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414l-8-8a1 1 0 0 1 0-1.414l8-8Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const SettingsIcon = createIcon({
-  displayName: 'SettingsIcon',
+export const ChevronRightIcon = createIcon({
+  displayName: 'ChevronRightIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M9.87516 3.61256C8.48744 1.62214 7.82962 1.70606 6.5 2.47372C5.17038 3.24137 4.7688 3.7691 5.7987 5.96613C5.94191 6.27163 5.93447 6.62868 5.76577 6.92088L4.48431 9.14044C4.3156 9.43264 4.01011 9.6176 3.67392 9.64633C1.25618 9.85291 0.999939 10.4646 0.999939 11.9999C0.999939 13.5352 1.25617 14.1469 3.67381 14.3534C4.00999 14.3822 4.31548 14.5671 4.48419 14.8593L5.76577 17.0791C5.93447 17.3713 5.94191 17.7284 5.7987 18.0339C4.76879 20.2309 5.17038 20.7586 6.5 21.5263C7.82961 22.2939 8.48743 22.3779 9.87517 20.3874C10.0681 20.1106 10.3811 19.9386 10.7185 19.9386H13.2815C13.6189 19.9386 13.9319 20.1106 14.1248 20.3874C15.5126 22.3779 16.1704 22.2939 17.5 21.5263C18.8296 20.7586 19.2312 20.2309 18.2013 18.0339C18.0581 17.7284 18.0655 17.3713 18.2342 17.0791L19.5158 14.8593C19.6845 14.5671 19.99 14.3822 20.3262 14.3534C22.7437 14.1468 22.9999 13.5352 22.9999 11.9999C22.9999 10.4646 22.7437 9.85294 20.3261 9.64634C19.9899 9.61761 19.6844 9.43265 19.5157 9.14045L18.2342 6.92086C18.0655 6.62865 18.0581 6.27161 18.2013 5.9661C19.2312 3.7691 18.8296 3.24137 17.5 2.47372C16.1704 1.70607 15.5126 1.62214 14.1248 3.61256C13.9319 3.88934 13.6189 4.06142 13.2815 4.06142L10.7185 4.06142C10.3811 4.06142 10.0681 3.88934 9.87516 3.61256ZM15.1754 10.1667C16.188 11.9204 15.5871 14.1629 13.8333 15.1754C12.0796 16.1879 9.8371 15.5871 8.82458 13.8333C7.81206 12.0796 8.41294 9.83709 10.1667 8.82457C11.9204 7.81204 14.1629 8.41292 15.1754 10.1667Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M9.707 3.293a1 1 0 0 0-1.414 1.414L15.586 12l-7.293 7.293a1 1 0 1 0 1.414 1.414l8-8a1 1 0 0 0 0-1.414l-8-8Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const RightSidebarAddIcon = createIcon({
-  displayName: 'RightSidebarAddIcon',
+export const ChevronUpIcon = createIcon({
+  displayName: 'ChevronUpIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M20.707 15.293a1 1 0 0 1-1.414 1.414L12 9.414l-7.293 7.293a1 1 0 0 1-1.414-1.414l8-8a1 1 0 0 1 1.414 0l8 8Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const ContrastIcon = createIcon({
+  displayName: 'ContrastIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M20.5 12a8.5 8.5 0 0 0-17 0H7a5 5 0 0 0 10 0h3.5Zm1.5 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-5 0H7a5 5 0 0 1 10 0Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const DailyNotesIcon = createIcon({
+  displayName: 'DailyNotesIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M13 4.5H18C18.8284 4.5 19.5 5.17157 19.5 6V13C20.02 13 20.5232 13.0722 21 13.207V6C21 4.34315 19.6569 3 18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H14.5997C14.3617 20.5345 14.1881 20.0306 14.0907 19.5H13C12.4477 19.5 12 19.0523 12 18.5V5.5C12 4.94772 12.4477 4.5 13 4.5ZM24 18.5C24 20.9853 21.9853 23 19.5 23C17.0147 23 15 20.9853 15 18.5C15 16.0147 17.0147 14 19.5 14C21.9853 14 24 16.0147 24 18.5ZM19 16V18H17V19H19V21H20V19H22V18H20V16H19Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M8 1a1 1 0 0 0-1 1v1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2.5V2a1 1 0 1 0-2 0v1H9V2a1 1 0 0 0-1-1Zm11.5 7a1 1 0 0 0-1-1h-13a1 1 0 0 0-1 1v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V8ZM7 13.75a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1-.75-.75ZM8 9.5a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H8Zm-1 6.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" /></>
   ),
-})
+});
+
+export const GraphIcon = createIcon({
+  displayName: 'GraphIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><circle cx="15.5" cy="8.5" r="5.5" fill="currentColor" /><circle cx="5.5" cy="14.5" r="3.5" fill="currentColor" /><circle cx="13" cy="19" r="2" fill="currentColor" /></>
+  ),
+});
+
+export const HTMLEmbedIcon = createIcon({
+  displayName: 'HTML EmbedIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M13.986 6.164a1 1 0 1 0-1.972-.328l-2 12a1 1 0 1 0 1.972.328l2-12Zm-7.318-.719a1 1 0 0 1 1.664 1.11L4.702 12l3.63 5.445a1 1 0 1 1-1.664 1.11l-4-6a1 1 0 0 1 0-1.11l4-6Zm10.664 0a1 1 0 0 0-1.664 1.11L19.298 12l-3.63 5.445a1 1 0 0 0 1.664 1.11l4-6a1 1 0 0 0 0-1.11l-4-6Z" clipRule="evenodd" /></>
+  ),
+});
 
 export const HelpIcon = createIcon({
   displayName: 'HelpIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM10.9712 14.4318V14.5795H12.8632V14.4318C12.867 14.0303 12.9143 13.6932 13.0053 13.4205C13.1 13.1439 13.2439 12.9034 13.4371 12.6989C13.634 12.4943 13.8859 12.2973 14.1928 12.108C14.5412 11.8996 14.8424 11.6629 15.0962 11.3977C15.35 11.1326 15.545 10.8295 15.6814 10.4886C15.8215 10.1477 15.8916 9.76136 15.8916 9.32955C15.8916 8.68939 15.7363 8.13636 15.4257 7.67045C15.1189 7.20076 14.689 6.83902 14.1359 6.58523C13.5867 6.33144 12.9503 6.20455 12.2268 6.20455C11.564 6.20455 10.9579 6.32576 10.4087 6.56818C9.86321 6.81061 9.42382 7.17424 9.09048 7.65909C8.76094 8.14394 8.5867 8.74621 8.56776 9.46591H10.5905C10.6094 9.10985 10.6965 8.81629 10.8518 8.58523C11.0109 8.35038 11.2098 8.17614 11.4484 8.0625C11.6909 7.94508 11.9465 7.88636 12.2155 7.88636C12.5071 7.88636 12.7704 7.94697 13.0053 8.06818C13.2439 8.18939 13.4333 8.35985 13.5734 8.57955C13.7136 8.79924 13.7837 9.05871 13.7837 9.35795C13.7837 9.62311 13.7306 9.86364 13.6246 10.0795C13.5185 10.2917 13.3727 10.4848 13.1871 10.6591C13.0053 10.8295 12.7988 10.9867 12.5678 11.1307C12.2306 11.339 11.9446 11.5682 11.7098 11.8182C11.475 12.0644 11.2931 12.3902 11.1643 12.7955C11.0393 13.2008 10.975 13.7462 10.9712 14.4318ZM11.0791 17.7614C11.3253 18.0038 11.6189 18.125 11.9598 18.125C12.1871 18.125 12.3935 18.0701 12.5791 17.9602C12.7685 17.8466 12.92 17.6951 13.0337 17.5057C13.1511 17.3163 13.2098 17.1061 13.2098 16.875C13.2098 16.5341 13.0848 16.2424 12.8348 16C12.5886 15.7576 12.2969 15.6364 11.9598 15.6364C11.6189 15.6364 11.3253 15.7576 11.0791 16C10.8329 16.2424 10.7098 16.5341 10.7098 16.875C10.7098 17.2235 10.8329 17.5189 11.0791 17.7614Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-1.029-7.568v.147h1.892v-.147c.004-.402.051-.739.142-1.011.095-.277.239-.518.432-.722.197-.205.449-.402.756-.591.348-.208.65-.445.903-.71.254-.265.449-.569.585-.91.14-.34.21-.727.21-1.158 0-.64-.155-1.194-.465-1.66a2.985 2.985 0 0 0-1.29-1.085c-.55-.254-1.186-.38-1.91-.38a4.44 4.44 0 0 0-1.817.363A3.091 3.091 0 0 0 9.09 7.66c-.33.485-.503 1.087-.522 1.807h2.023c.018-.356.106-.65.26-.88.16-.236.359-.41.597-.524.243-.117.498-.176.768-.176.291 0 .554.061.79.182.238.121.427.292.567.512.14.22.21.479.21.778 0 .265-.052.506-.158.721a2.053 2.053 0 0 1-.438.58c-.182.17-.388.328-.62.472a4.185 4.185 0 0 0-.857.687c-.235.246-.417.572-.546.978-.125.405-.189.95-.193 1.636Zm.108 3.33c.246.242.54.363.88.363.228 0 .434-.055.62-.165.19-.113.341-.265.455-.454.117-.19.176-.4.176-.631 0-.34-.125-.633-.375-.875a1.205 1.205 0 0 0-.875-.364 1.21 1.21 0 0 0-.88.364 1.18 1.18 0 0 0-.37.875c0 .349.123.644.37.886Z" clipRule="evenodd" /></>
   ),
-})
+});
+
+export const LinkedIcon = createIcon({
+  displayName: 'LinkedIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="m11.947 13.717 4.155-4.154a3.501 3.501 0 0 0-4.263.535l-4.155 4.154a3.5 3.5 0 0 0 4.263-.535Zm-1.169-4.68a5.002 5.002 0 0 1 6.177-.71 3.5 3.5 0 0 0-5.715-3.802L6.997 8.768a3.501 3.501 0 0 0-.409 4.459l4.19-4.19Zm6.472-5.573a5.002 5.002 0 0 1 .883 5.88 5 5 0 0 1-.284 6.764l-4.242 4.243a5 5 0 0 1-7.953-5.88 5 5 0 0 1 .283-6.764l4.242-4.243a5 5 0 0 1 7.071 0Zm-4.242 11.314 4.19-4.19a3.501 3.501 0 0 1-.41 4.46l-4.242 4.242a3.5 3.5 0 0 1-5.715-3.8 5.002 5.002 0 0 0 6.177-.712Z" clipRule="evenodd" /></>
+  ),
+});
 
 export const MenuIcon = createIcon({
   displayName: 'MenuIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M3 6a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm1 5a1 1 0 1 0 0 2h16a1 1 0 1 0 0-2H4Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const ChevronUpIcon = createIcon({
-  displayName: 'ChevronUpIcon',
+export const ParenLeftIcon = createIcon({
+  displayName: 'ParenLeftIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M20.7071 15.2929C21.0976 15.6834 21.0976 16.3166 20.7071 16.7071C20.3166 17.0976 19.6834 17.0976 19.2929 16.7071L12 9.41421L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289L20.7071 15.2929Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M12.293 3.293a1 1 0 1 1 1.414 1.414l-.222.222c-3.905 3.905-3.905 10.237 0 14.142l.222.222a1 1 0 0 1-1.414 1.414l-.222-.222c-4.686-4.686-4.686-12.284 0-16.97l.222-.222Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const ChevronLeftIcon = createIcon({
-  displayName: 'ChevronLeftIcon',
+export const ParenRightIcon = createIcon({
+  displayName: 'ParenRightIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M15.0002 3C15.256 3.00004 15.5119 3.09768 15.7071 3.29289C16.0976 3.68342 16.0976 4.31658 15.7071 4.70711L8.41421 12L15.7071 19.2929C16.0976 19.6834 16.0976 20.3166 15.7071 20.7071C15.5121 20.9021 15.2566 20.9998 15.001 21C15.0003 21 14.9997 21 14.999 21C14.7434 20.9998 14.4879 20.9021 14.2929 20.7071L6.29289 12.7071C5.90237 12.3166 5.90237 11.6834 6.29289 11.2929L14.2929 3.29289C14.4881 3.09768 14.744 3.00004 14.9998 3C14.9999 3 15.0001 3 15.0002 3Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M11.707 3.293a1 1 0 1 0-1.414 1.414l.222.222c3.905 3.905 3.905 10.237 0 14.142l-.222.222a1 1 0 1 0 1.414 1.414l.222-.222c4.686-4.686 4.686-12.284 0-16.97l-.222-.222Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const ChevronRightIcon = createIcon({
-  displayName: 'ChevronRightIcon',
+export const RightSidebarIcon = createIcon({
+  displayName: 'RightSidebarIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289C7.90237 3.68342 7.90237 4.31658 8.29289 4.70711L15.5858 12L8.29289 19.2929C7.90237 19.6834 7.90237 20.3166 8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071L17.7071 12.7071C18.0976 12.3166 18.0976 11.6834 17.7071 11.2929L9.70711 3.29289Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M13 4.5h5A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5h-5a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clipRule="evenodd" /></>
   ),
-})
+});
 
-export const ChevronDownIcon = createIcon({
-  displayName: 'ChevronDownIcon',
+export const RightSidebarAddIcon = createIcon({
+  displayName: 'RightSidebarAddIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289C20.3166 6.90237 19.6834 6.90237 19.2929 7.29289L12 14.5858L4.70711 7.29289C4.31658 6.90237 3.68342 6.90237 3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L20.7071 8.70711Z" fill="currentColor" />
+    <path fill="currentColor" fillRule="evenodd" d="M13 4.5h5A1.5 1.5 0 0 1 19.5 6v7a5.5 5.5 0 0 1 1.5.207V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h8.6a5.457 5.457 0 0 1-.51-1.5H13a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1Zm11 14a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM19 16v2h-2v1h2v2h1v-2h2v-1h-2v-2h-1Z" clipRule="evenodd" />
   ),
-})
+});
 
-export const ContrastIcon = createIcon({
-  displayName: 'ContrastIcon',
+export const SearchIcon = createIcon({
+  displayName: 'SearchIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M17 11a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm-1.088 6.315a8 8 0 1 1 1.415-1.42l3.832 3.352a1 1 0 0 1-1.317 1.506l-3.93-3.438Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const SettingsIcon = createIcon({
+  displayName: 'SettingsIcon',
   viewBox: '0 0 24 24',
   path: (
-    <path fillRule="evenodd" clipRule="evenodd" d="M20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12H7C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12H20.5ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM17 12H7C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z" fill="currentColor" />
+    <><path fill="currentColor" fillRule="evenodd" d="M9.875 3.613C8.487 1.623 7.83 1.706 6.5 2.473c-1.33.768-1.731 1.296-.701 3.493.143.306.135.663-.033.955L4.484 9.14a1.033 1.033 0 0 1-.81.505C1.256 9.853 1 10.465 1 12c0 1.535.256 2.147 2.674 2.353.336.03.641.214.81.506l1.282 2.22c.168.292.176.65.033.955-1.03 2.197-.629 2.725.701 3.492 1.33.768 1.987.852 3.375-1.139.193-.276.506-.448.844-.448h2.563c.337 0 .65.172.843.448 1.388 1.99 2.045 1.907 3.375 1.14 1.33-.768 1.731-1.296.701-3.493a1.033 1.033 0 0 1 .033-.955l1.282-2.22c.169-.292.474-.477.81-.506C22.744 14.147 23 13.535 23 12c0-1.535-.256-2.147-2.674-2.354a1.033 1.033 0 0 1-.81-.506l-1.282-2.22a1.033 1.033 0 0 1-.033-.954c1.03-2.197.629-2.725-.701-3.492-1.33-.768-1.987-.852-3.375 1.139a1.033 1.033 0 0 1-.844.448h-2.563c-.337 0-.65-.172-.843-.448Zm5.3 6.554a3.666 3.666 0 1 1-6.35 3.666 3.666 3.666 0 0 1 6.35-3.666Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const TemplateIcon = createIcon({
+  displayName: 'TemplateIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <><path fill="currentColor" fillRule="evenodd" d="M6 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Zm3 2.5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Zm0 3.25a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1-.75-.75Zm.75 1.75a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5ZM3 7a2 2 0 0 1 1.5-1.937V19a.5.5 0 0 0 .5.5h13.937A2 2 0 0 1 17 21H5a2 2 0 0 1-2-2V7Z" clipRule="evenodd" /></>
+  ),
+});
+
+export const TimeNow = createIcon({
+  displayName: 'TimeNow',
+  viewBox: '0 0 24 24',
+  path: (
+    <path fill="currentColor" fillRule="evenodd" d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm2 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-9-5a1 1 0 1 0-2 0v5.414l.293.293 2.5 2.5a1 1 0 0 0 1.414-1.414L13 11.586V7Z" clipRule="evenodd" />
+  ),
+});
+
+export const YoutubeIcon = createIcon({
+  displayName: 'YoutubeIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <path d="M10 15L15.19 12L10 9V15ZM21.56 7.17C21.69 7.64 21.78 8.27 21.84 9.07C21.91 9.87 21.94 10.56 21.94 11.16L22 12C22 14.19 21.84 15.8 21.56 16.83C21.31 17.73 20.73 18.31 19.83 18.56C19.36 18.69 18.5 18.78 17.18 18.84C15.88 18.91 14.69 18.94 13.59 18.94L12 19C7.81 19 5.2 18.84 4.17 18.56C3.27 18.31 2.69 17.73 2.44 16.83C2.31 16.36 2.22 15.73 2.16 14.93C2.09 14.13 2.06 13.44 2.06 12.84L2 12C2 9.81 2.16 8.2 2.44 7.17C2.69 6.27 3.27 5.69 4.17 5.44C4.64 5.31 5.5 5.22 6.82 5.16C8.12 5.09 9.31 5.06 10.41 5.06L12 5C16.19 5 18.8 5.16 19.83 5.44C20.73 5.69 21.31 6.27 21.56 7.17Z" fill="currentColor" />
+  ),
+});
+
+
+export const XmarkIcon = createIcon({
+  displayName: 'XmarkIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <path fillRule="evenodd" clipRule="evenodd" d="M19.2071 4.79289C18.8166 4.40237 18.1834 4.40237 17.7929 4.79289L12 10.5858L6.20711 4.79289C5.81658 4.40237 5.18342 4.40237 4.79289 4.79289C4.40237 5.18342 4.40237 5.81658 4.79289 6.20711L10.5858 12L4.79289 17.7929C4.40237 18.1834 4.40237 18.8166 4.79289 19.2071C5.18342 19.5976 5.81658 19.5976 6.20711 19.2071L12 13.4142L17.7929 19.2071C18.1834 19.5976 18.8166 19.5976 19.2071 19.2071C19.5976 18.8166 19.5976 18.1834 19.2071 17.7929L13.4142 12L19.2071 6.20711C19.5976 5.81658 19.5976 5.18342 19.2071 4.79289Z" fill="currentColor" />
   ),
-})
+});
 
diff --git a/src/js/components/Layout/Layout.tsx b/src/js/components/Layout/Layout.tsx
index b12d3ef3a5..99fa570f01 100644
--- a/src/js/components/Layout/Layout.tsx
+++ b/src/js/components/Layout/Layout.tsx
@@ -1,6 +1,6 @@
-import { Button, IconButton, Box, useDisclosure, Collapse, VStack } from '@chakra-ui/react';
+import { Button, IconButton, Box, Collapse, VStack } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { XmarkIcon, ChevronUpIcon } from '@/Icons/Icons';
+import { XmarkIcon, ChevronRightIcon } from '@/Icons/Icons';
 
 const Container = motion(Box)
 
@@ -45,9 +45,7 @@ export const RightSidebarContainer = ({ isOpen, width, isDragging, children }) =
   </AnimatePresence>
 }
 
-export const SidebarItem = ({ title, defaultIsOpen, onRemove, onClose, children }) => {
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsOpen, onClose: onClose });
-
+export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, children }) => {
   return (
     <VStack
       align="stretch"
@@ -83,7 +81,8 @@ export const SidebarItem = ({ title, defaultIsOpen, onRemove, onClose, children
           whiteSpace="nowrap"
           sx={{ maskImage: "linear-gradient(to right, black, black calc(100% - 1rem), transparent calc(100%))" }}
         >
-          <ChevronUpIcon transform={isOpen ? "rotate(180deg)" : null}
+          <ChevronRightIcon
+            transform={isOpen ? "rotate(90deg)" : null}
             justifySelf="center"
           />
           <Box
@@ -111,6 +110,7 @@ export const SidebarItem = ({ title, defaultIsOpen, onRemove, onClose, children
       <Box
         as={Collapse}
         in={isOpen}
+        className={`${type}-page`}
         animateOpacity
         unmountOnExit
         zIndex={1}
@@ -118,5 +118,5 @@ export const SidebarItem = ({ title, defaultIsOpen, onRemove, onClose, children
       >
         {children}
       </Box>
-    </VStack >)
+    </VStack>)
 }
\ No newline at end of file
diff --git a/src/js/components/Page/Page.tsx b/src/js/components/Page/Page.tsx
index a09e008f7f..35b464434a 100644
--- a/src/js/components/Page/Page.tsx
+++ b/src/js/components/Page/Page.tsx
@@ -1,11 +1,15 @@
-import { Box } from '@chakra-ui/react';
+import { Box, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react';
+import { RightSidebarAddIcon } from '@/Icons/Icons';
 
 const PAGE_PROPS = {
   as: "article",
   display: "grid",
   flexBasis: "100%",
+  width: "100%",
+  maxWidth: "70em",
   gridTemplateAreas: "'header' 'content' 'footer'",
   gridTemplateRows: "auto 1fr auto",
+  marginInline: "auto",
   sx: {
     "--page-padding-v": "6rem",
     "--page-padding-h": "4rem"
@@ -26,12 +30,10 @@ const TITLE_PROPS = {
 
 export const PageContainer = ({ children, uid, type }) => <Box
   {...PAGE_PROPS}
-  maxWidth="70em"
   minHeight="100vh"
   data-ui={uid}
   className={type + '-page'}
   flexDirection="column"
-  marginInline="auto"
   pb="calc(var(--page-padding-v) / 2)"
 >{children}</Box>
 
@@ -53,9 +55,9 @@ export const HeaderImage = ({ src }) => <Box
   }}
 />
 
-export const PageHeader = ({ children, image }) => <Box
+export const PageHeader = ({ children, image, onClickOpenInSidebar }) => <Box
   as="header"
-  pr="var(--page-padding-h)"
+  pr="calc(var(--page-padding-h) / 2)"
   pt="var(--page-padding-v)"
   pb={4}
   gridArea="header"
@@ -68,19 +70,25 @@ export const PageHeader = ({ children, image }) => <Box
   className="page-header"
   borderBottom="1px solid transparent"
 
-  // Page headers without images get a nice border...
+  // Page headers without images get a nice border
   {...!image && ({
     borderBottomColor: "separator.divider"
   })}
-  // unless they're in the sidebar
-  sx={{
-    ".right-sidebar &": {
-      // borderBottomColor: "transparent"
-    }
-  }}
 >
   {image && <HeaderImage src={image} />}
   {children}
+
+  <ButtonGroup gridArea="extras" size="sm">
+    {onClickOpenInSidebar && <Tooltip label="Open in right sidebar">
+      <IconButton
+        aria-label='Open in right sidebar'
+        color="foreground.secondary"
+        variant="ghost"
+        onClick={onClickOpenInSidebar}
+      >
+        <RightSidebarAddIcon boxSize="1.5em" />
+      </IconButton></Tooltip>}
+  </ButtonGroup>
 </Box>
 
 export const PageBody = ({ children }) => <Box
@@ -98,17 +106,11 @@ export const PageFooter = ({ children }) => <Box
   p={4}
 >{children}</Box>
 
-export const TitleContainer = ({ children }) => <Box
-  {...TITLE_PROPS}
->{children}</Box>
-
 export const DailyNotesPage = ({ isReal, children }) => <Box
   {...PAGE_PROPS}
   className="node-page daily-notes"
   boxShadow="page"
   bg="background.floor"
-  alignSelf="stretch"
-  justifySelf="stretch"
   opacity={isReal ? 1 : 0.5}
   borderWidth="1px"
   borderStyle="solid"
@@ -122,7 +124,8 @@ export const DailyNotesPage = ({ isReal, children }) => <Box
   }}
 >{children}</Box>
 
-export const EditableTitleContainer = ({ children, isEditing, props }) => <Box
+
+export const TitleContainer = ({ children, isEditing, props }) => <Box
   {...TITLE_PROPS}
   as="h1"
   className={[
@@ -134,7 +137,7 @@ export const EditableTitleContainer = ({ children, isEditing, props }) => <Box
   display="grid"
   background="var(--block-surface-color)"
   color="foreground.primary"
-  gridTemplateAreas="'main'"
+  gridTemplateAreas="'main extras'"
   alignItems="stretch"
   justifyContent="stretch"
   position="relative"
diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js
index 627edff581..8b4c022324 100644
--- a/src/js/theme/theme.js
+++ b/src/js/theme/theme.js
@@ -15,9 +15,9 @@ const shadows = {
 }
 
 const fonts = {
-  body: '"IBM Plex Serif", BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",system-ui,ui-sans-serif,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
-  default: '"IBM Plex Sans", BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",system-ui,ui-sans-serif,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
-  code: '"IBM Plex Mono", BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, ui-sans-serif, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  body: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+  default: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+  code: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace;',
 }
 
 const radii = {
@@ -196,13 +196,13 @@ const components = {
   Alert: {
     variants: {
       // variant used by toasts
-      solid: ({ theme, status }) => {
+      solid: ({ theme, status = "info" }) => {
 
         // Toasts don't recieve the current color mode
         // as a prop, so we get both colors and use one or
         // the other based on the CSS context
-        const toastColorDefault = theme.semanticTokens.colors[ status ].default;
-        const toastColorDark = theme.semanticTokens.colors[ status ].dark;
+        const toastColorDefault = theme.semanticTokens.colors[status]?.default;
+        const toastColorDark = theme.semanticTokens.colors[status]?.dark;
 
         return ({
           container: {
@@ -446,12 +446,12 @@ const components = {
     }
   },
   Popover: {
-    parts: [ "arrow", "content" ],
+    parts: ["arrow", "content"],
     baseStyle: {
       content: {
         bg: "background.upper",
         shadow: "popover",
-        [ $arrowBg.variable ]: "colors.background.upper",
+        [$arrowBg.variable]: "colors.background.upper",
       }
     }
   },
