diff --git a/.clj-kondo/rewrite-clj/rewrite-clj/config.edn b/.clj-kondo/rewrite-clj/rewrite-clj/config.edn
new file mode 100644
index 0000000000..19ecae96a0
--- /dev/null
+++ b/.clj-kondo/rewrite-clj/rewrite-clj/config.edn
@@ -0,0 +1,5 @@
+{:lint-as
+ {rewrite-clj.zip/subedit-> clojure.core/->
+  rewrite-clj.zip/subedit->> clojure.core/->>
+  rewrite-clj.zip/edit-> clojure.core/->
+  rewrite-clj.zip/edit->> clojure.core/->>}}
diff --git a/resources/public/favicon.png b/resources/public/favicon.png
index 97d3422b00..94946cac9c 100644
Binary files a/resources/public/favicon.png and b/resources/public/favicon.png differ
diff --git a/resources/public/favicon.svg b/resources/public/favicon.svg
new file mode 100644
index 0000000000..fbdb8245a3
--- /dev/null
+++ b/resources/public/favicon.svg
@@ -0,0 +1,8 @@
+<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="124" height="124" rx="32" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.5026 66.3331H67.7171L59.8311 42.5445H59.4625L51.5026 66.3331ZM36.7625 82.8596H40.595L57.2514 35.2818H66.1694L82.8252 82.8596H86.6578V87.0092H66.8322V82.8596H73.1712L68.97 70.6318H50.1764L46.1229 82.8596H52.4607V87.0092H36.7625V82.8596Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0727 28.6769H12.0002V32.7619V91.2381V95.3231H16.0727H20.7212V91.2381H16.0727V32.7619H20.7212V28.6769H16.0727Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2095 24V28.117V95.8836V100H38.163V95.8836H28.2871V28.117H38.163V24H24.2095Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.6279 24V28.117V95.8836V100H84.6744V95.8836H94.5503V28.117H84.6744V24H98.6279Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.765 28.6769H110.837V32.7619V91.2381V95.3231H106.765H102.116V91.2381H106.765V32.7619H102.116V28.6769H106.765Z" fill="black"/>
+</svg>
diff --git a/resources/public/index.html b/resources/public/index.html
index edf0a8f736..01d34543c8 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width,initial-scale=1">
+      <link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" />
       <link rel="shortcut icon" type="image/png" href="favicon.png" />
       <link href="./css/katex.min.css" rel="stylesheet" />
       <noscript>
diff --git a/src/cljs/athens/views/blocks/autocomplete_search.cljs b/src/cljs/athens/views/blocks/autocomplete_search.cljs
index 83c9812e52..ee2a445ba9 100644
--- a/src/cljs/athens/views/blocks/autocomplete_search.cljs
+++ b/src/cljs/athens/views/blocks/autocomplete_search.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.autocomplete-search
   (:require
-    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["/components/Block/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     ["@chakra-ui/react" :refer [Text]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [clojure.string :as string]))
diff --git a/src/cljs/athens/views/blocks/autocomplete_slash.cljs b/src/cljs/athens/views/blocks/autocomplete_slash.cljs
index 05910bb20b..a630374286 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
-    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["/components/Block/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [reagent.core :as r]))
 
diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs
index 6cf3a656e7..b49f8d1848 100644
--- a/src/cljs/athens/views/blocks/content.cljs
+++ b/src/cljs/athens/views/blocks/content.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.content
   (:require
-    ["/components/Block/components/Content" :refer [Content]]
+    ["/components/Block/Content" :refer [Content]]
     [athens.config :as config]
     [athens.db :as db]
     [athens.events.selection :as select-events]
diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs
index cb56363d2a..b81a82137f 100644
--- a/src/cljs/athens/views/blocks/core.cljs
+++ b/src/cljs/athens/views/blocks/core.cljs
@@ -1,9 +1,9 @@
 (ns athens.views.blocks.core
   (:require
-    ["/components/Block/components/Anchor"   :refer [Anchor]]
-    ["/components/Block/components/Container" :refer [Container]]
-    ["/components/Block/components/Toggle"   :refer [Toggle]]
-    ["/components/Layout/Layout"   :refer [ReferenceGroup ReferenceBlock]]
+    ["/components/Block/Anchor"              :refer [Anchor]]
+    ["/components/Block/Container"           :refer [Container]]
+    ["/components/Block/Toggle"              :refer [Toggle]]
+    ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]]
     ["@chakra-ui/react" :refer [VStack Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]]
     [athens.common.logging                   :as log]
     [athens.db                               :as db]
diff --git a/src/cljs/athens/views/pages/block_page.cljs b/src/cljs/athens/views/pages/block_page.cljs
index 3b402a3911..6cb7467a59 100644
--- a/src/cljs/athens/views/pages/block_page.cljs
+++ b/src/cljs/athens/views/pages/block_page.cljs
@@ -1,7 +1,7 @@
 (ns athens.views.pages.block-page
   (:require
-    ["/components/Layout/Layout" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
+    ["/components/References/References" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["@chakra-ui/react" :refer [Breadcrumb BreadcrumbItem BreadcrumbLink]]
     [athens.parse-renderer :as parse-renderer]
     [athens.reactive :as reactive]
diff --git a/src/cljs/athens/views/pages/core.cljs b/src/cljs/athens/views/pages/core.cljs
index 636c435827..b876dedae2 100644
--- a/src/cljs/athens/views/pages/core.cljs
+++ b/src/cljs/athens/views/pages/core.cljs
@@ -26,6 +26,7 @@
       (toast (clj->js {:status "info"
                        :title "Reconnecting to server..."})))
     [:> Box {:flex "1 1 100%"
+             :class "main-content"
              :position "relative"
              :gridArea "main-content"
              :alignItems "flex-start"
@@ -59,7 +60,9 @@
                                        :height "0.5rem"}
                   "::WebkitScrollbar-corner" {:bg "background.basement"}
                   "::WebkitScrollbar-thumb" {:bg "background.upper"
-                                             :borderRadius "full"}}
+                                             :borderRadius "full"}
+                  "> .node-page:first-child, .block-page:first-child" {:mt 0
+                                                                       :pt "var(--app-header-height)"}}
              :on-scroll (when (= @route-name :home)
                           throttled-scroll)}
      (case @route-name
diff --git a/src/cljs/athens/views/pages/node_page.cljs b/src/cljs/athens/views/pages/node_page.cljs
index 3a0d83cf12..70cfe55761 100644
--- a/src/cljs/athens/views/pages/node_page.cljs
+++ b/src/cljs/athens/views/pages/node_page.cljs
@@ -1,10 +1,10 @@
 (ns athens.views.pages.node-page
   (:require
-    ["/components/Block/components/Anchor" :refer [Anchor]]
+    ["/components/Block/Anchor" :refer [Anchor]]
     ["/components/Confirmation/Confirmation" :refer [Confirmation]]
     ["/components/Icons/Icons" :refer [EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon ArrowRightOnBoxIcon]]
-    ["/components/Layout/Layout" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
+    ["/components/References/References" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["@chakra-ui/react" :refer [Box HStack Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
     [athens.common-db :as common-db]
     [athens.common.sentry :refer-macros [wrap-span-no-new-tx]]
@@ -213,11 +213,11 @@
                      "aria-label" "Page menu"
                      :gridArea "menu"
                      :justifySelf "flex-end"
-                     :size "md"
+                     :size "sm"
                      :alignSelf "center"
+                     :fontSize "70%"
+                     :color "foreground.secondary"
                      :bg "transparent"
-                     :width "2.25em"
-                     :mr "0.5em"
                      :borderRadius "full"
                      :sx {"span" {:display "contents"}
                           "button svg:first-of-type" {:marginRight "0.25rem"}}}
@@ -271,8 +271,11 @@
     (fn [_]
       (let [{:keys [block parents embed-id]} @state
             block (reactive/get-reactive-block-document (:db/id block))]
-        [:> VStack {:spacing 0 :align "stretch"}
-         [:> Breadcrumb {:fontSize "sm" :pl 4 :variant "strict" :color "foreground.secondary"}
+        [:> VStack {:spacing 0
+                    :align "stretch"}
+         [:> Breadcrumb {:fontSize "sm"
+                         :variant "strict"
+                         :color "foreground.secondary"}
           (doall
             (for [{:keys [node/title block/string block/uid]} parents]
               [:> BreadcrumbItem {:key (str "breadcrumb-" uid)}
diff --git a/src/cljs/athens/views/pages/page.cljs b/src/cljs/athens/views/pages/page.cljs
index 72e2b484a1..0302629b91 100644
--- a/src/cljs/athens/views/pages/page.cljs
+++ b/src/cljs/athens/views/pages/page.cljs
@@ -14,11 +14,11 @@
   []
   (let [title    (rf/subscribe [:current-route/page-title])
         page-eid (common-db/e-by-av @db/dsdb :node/title @title)]
-    (if (int? page-eid)
-      [:> PageContainer {:uid page-eid :type "node"}
-       [node-page/page page-eid]]
-      [:> PageNotFound {:title @title
-                        :onClickHome #(router/navigate :pages)}])))
+    [:> PageContainer {:uid page-eid :type "node"}
+     (if (int? page-eid)
+       [node-page/page page-eid]
+       [:> PageNotFound {:title @title
+                         :onClickHome #(router/navigate :pages)}])]))
 
 
 (defn page
diff --git a/src/cljs/athens/views/right_sidebar.cljs b/src/cljs/athens/views/right_sidebar.cljs
index aa2aa8ce63..f3a38e647b 100644
--- a/src/cljs/athens/views/right_sidebar.cljs
+++ b/src/cljs/athens/views/right_sidebar.cljs
@@ -1,7 +1,7 @@
 (ns athens.views.right-sidebar
   (:require
     ["/components/Icons/Icons" :refer [RightSidebarAddIcon]]
-    ["/components/Layout/Layout" :refer [RightSidebarContainer SidebarItem]]
+    ["/components/Layout/RightSidebar" :refer [RightSidebarContainer SidebarItem]]
     ["@chakra-ui/react" :refer [Flex Text Box]]
     [athens.parse-renderer :as parse-renderer]
     [athens.views.pages.block-page :as block-page]
@@ -87,7 +87,8 @@
                                     :on-mouse-down #(swap! state assoc :dragging true)
                                     :class (when (:dragging @state) "is-dragging")}]
                                   [:> Flex
-                                   {:flexDirection "column"
+                                   {:class "right-sidebar-content"
+                                    :flexDirection "column"
                                     :flex 1;
                                     :maxHeight "calc(100vh - 3.25rem - 1px)"
                                     :width (str (:width @state) "vw")
diff --git a/src/js/components/AppToolbar/AppToolbar.tsx b/src/js/components/AppToolbar/AppToolbar.tsx
index b24b182d19..41b9106cfd 100644
--- a/src/js/components/AppToolbar/AppToolbar.tsx
+++ b/src/js/components/AppToolbar/AppToolbar.tsx
@@ -12,7 +12,7 @@ import {
   ContrastIcon,
   DailyNotesIcon,
   GraphIcon,
-  EllipsisHorizontalIcon
+  EllipsisHorizontalCircleIcon
 } from '@/Icons/Icons';
 
 import {
@@ -72,6 +72,7 @@ const ToolbarIconButton = React.forwardRef((props: ToolbarIconButtonProps, ref)
 });
 
 const AppToolbarWrapper = ({ children, ...props }) => <Flex
+  className="app-toolbar"
   gridArea="app-header"
   borderBottom="1px solid transparent"
   justifyContent="space-between"
@@ -227,7 +228,7 @@ const SecondaryToolbarItems = (items) => {
 const SecondaryToolbarOverflowMenu = (items) => {
   return <Menu>
     {({ isOpen }) => <>
-      <ToolbarIconButton size="sm" as={MenuButton} isActive={isOpen}><EllipsisHorizontalIcon /></ToolbarIconButton>
+      <ToolbarIconButton size="sm" as={MenuButton} isActive={isOpen}><EllipsisHorizontalCircleIcon /></ToolbarIconButton>
       <Portal>
         <MenuList>
           {items.map((item) => (<MenuItem
@@ -316,7 +317,13 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
   ];
 
   return (
-    <AppToolbarWrapper className={isRightSidebarOpen ? 'is-right-sidebar-open' : ''} {...rest}>
+    <AppToolbarWrapper
+      className={[
+        "app-toolbar",
+        isRightSidebarOpen && 'is-right-sidebar-open',
+      ].filter(Boolean).join(' ')}
+      {...rest}
+    >
       <HStack flex="1">
         <ButtonGroup size="sm" mr="auto">
           {databaseMenu}
diff --git a/src/js/components/Block/components/Anchor.tsx b/src/js/components/Block/Anchor.tsx
similarity index 100%
rename from src/js/components/Block/components/Anchor.tsx
rename to src/js/components/Block/Anchor.tsx
diff --git a/src/js/components/Block/components/Autocomplete.tsx b/src/js/components/Block/Autocomplete.tsx
similarity index 100%
rename from src/js/components/Block/components/Autocomplete.tsx
rename to src/js/components/Block/Autocomplete.tsx
diff --git a/src/js/components/Block/components/Container.tsx b/src/js/components/Block/Container.tsx
similarity index 93%
rename from src/js/components/Block/components/Container.tsx
rename to src/js/components/Block/Container.tsx
index 6854e3b52e..483723ea0e 100644
--- a/src/js/components/Block/components/Container.tsx
+++ b/src/js/components/Block/Container.tsx
@@ -84,7 +84,10 @@ const _Container = ({ children, isDragging, isSelected, isOpen, hasChildren, has
         borderRadius: "sm",
         "--block-surface-color": "background.basement",
         bg: "background.basement",
-        ".block-container": { marginLeft: 0.5 },
+        // Blocks nested in an embed get normal indentation...
+        ".block-container": { marginLeft: 8 },
+        // ...except for the first one, where that would be excessive
+        "& > .block-container": { marginLeft: 0.5 },
       },
       ".block-content": {
         gridArea: "content",
diff --git a/src/js/components/Block/components/Content.tsx b/src/js/components/Block/Content.tsx
similarity index 100%
rename from src/js/components/Block/components/Content.tsx
rename to src/js/components/Block/Content.tsx
diff --git a/src/js/components/Block/components/Toggle.tsx b/src/js/components/Block/Toggle.tsx
similarity index 100%
rename from src/js/components/Block/components/Toggle.tsx
rename to src/js/components/Block/Toggle.tsx
diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx
index 7cd251ce43..35cc6077f9 100644
--- a/src/js/components/Icons/Icons.tsx
+++ b/src/js/components/Icons/Icons.tsx
@@ -224,6 +224,14 @@ export const EllipsisHorizontalIcon = createIcon({
   ),
 });
 
+export const EllipsisHorizontalCircleIcon = createIcon({
+  displayName: 'EllipsisHorizontalCircleIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 20.48C16.6834 20.48 20.48 16.6834 20.48 12C20.48 7.31663 16.6834 3.52 12 3.52C7.31663 3.52 3.52 7.31663 3.52 12C3.52 16.6834 7.31663 20.48 12 20.48ZM12 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 22ZM7.33333 10.5833C6.55093 10.5833 5.91667 11.2176 5.91667 12C5.91667 12.7824 6.55093 13.4167 7.33333 13.4167C8.11574 13.4167 8.75 12.7824 8.75 12C8.75 11.2176 8.11574 10.5833 7.33333 10.5833ZM12 10.5833C11.2176 10.5833 10.5833 11.2176 10.5833 12C10.5833 12.7824 11.2176 13.4167 12 13.4167C12.7824 13.4167 13.4167 12.7824 13.4167 12C13.4167 11.2176 12.7824 10.5833 12 10.5833ZM16.6667 10.5833C15.8843 10.5833 15.25 11.2176 15.25 12C15.25 12.7824 15.8843 13.4167 16.6667 13.4167C17.4491 13.4167 18.0833 12.7824 18.0833 12C18.0833 11.2176 17.4491 10.5833 16.6667 10.5833Z" fill="currentColor" />
+  ),
+});
+
 export const ExclamationCircleFillIcon = createIcon({
   displayName: 'ExclamationCircleFillIcon',
   viewBox: '0 0 24 24',
diff --git a/src/js/components/Layout/Layout.tsx b/src/js/components/Layout/Layout.tsx
deleted file mode 100644
index 8b56e12330..0000000000
--- a/src/js/components/Layout/Layout.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion';
-import { XmarkIcon, ChevronRightIcon, PageFillIcon, BlockFillIcon, GraphIcon } from '@/Icons/Icons';
-import { Button, IconButton, Box, useDisclosure, Collapse, Text, VStack, HStack } from '@chakra-ui/react';
-import { withErrorBoundary } from 'react-error-boundary';
-
-const Container = motion(Box);
-
-export const RightSidebarContainer = ({ isOpen, width, isDragging, children }) => {
-  return <AnimatePresence initial={false}>
-    {isOpen &&
-      <Container
-        className="right-sidebar"
-        display="flex"
-        WebkitAppRegion="no-drag"
-        flexDirection="column"
-        height="calc(100% - 3.25rem)"
-        marginTop="3.25rem"
-        alignItems="stretch"
-        justifySelf="stretch"
-        transformOrigin="right"
-        justifyContent="space-between"
-        overflowX="visible"
-        position="relative"
-        gridArea="secondary-content"
-        sx={{
-          "--page-padding-v": "1rem",
-          "--page-padding-h": "0rem",
-          "--page-title-font-size": "1.25rem",
-        }}
-        initial={{
-          width: 0,
-          opacity: 0
-        }}
-        transition={isDragging ? { duration: 0 } : undefined}
-        animate={{
-          width: isOpen ? `${width}vw` : 0,
-          opacity: 1
-        }}
-        exit={{
-          width: 0,
-          opacity: 0
-        }}
-      >
-        {children}
-      </Container>}
-  </AnimatePresence>
-}
-
-const typeIcon = (type) => { return { "node": <PageFillIcon />, "graph": <GraphIcon />, "block": <BlockFillIcon /> }[type] };
-
-export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, children }) => {
-
-  const canToggle = type !== 'graph';
-
-  return (
-    <VStack
-      align="stretch"
-      position="relative"
-      spacing={0}
-      ml="1px" // Account for the floating separator
-      _notFirst={{
-        borderTop: "1px solid",
-        borderColor: "separator.divider"
-      }}>
-      <Box
-        top="-1px"
-        zIndex={2}
-        position="sticky"
-        background="background.floor"
-        display="grid"
-        gridTemplateColumns="1fr 3rem"
-        pr={2}
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Button
-          onClick={canToggle ? onToggle : undefined}
-          as={canToggle ? undefined : 'div'}
-          {...(!canToggle && {
-            _hover: {},
-            _focus: {},
-            _active: {},
-          })}
-          display="flex"
-          bg="transparent"
-          borderRadius="0"
-          gap={2}
-          py={3}
-          pl={5}
-          pr={0}
-          height="auto"
-          textAlign="left"
-          overflow="hidden"
-          whiteSpace="nowrap"
-          sx={{ maskImage: "linear-gradient(to right, black, black calc(100% - 1rem), transparent calc(100%))" }}
-        >
-          {canToggle && (
-            <ChevronRightIcon
-              transform={isOpen ? "rotate(90deg)" : null}
-              justifySelf="center"
-            />
-          )}
-          {typeIcon(type)}
-          <Box
-            flex="1 1 100%"
-            tabIndex={-1}
-            pointerEvents="none"
-            position="relative"
-            bottom="1px"
-            overflow="hidden"
-            color="foreground.secondary"
-          >{title}</Box>
-        </Button>
-        <IconButton
-          onClick={onRemove}
-          size="sm"
-          color="foreground.secondary"
-          alignSelf="center"
-          justifySelf="center"
-          bg="transparent"
-          aria-label="Close"
-        >
-          <XmarkIcon />
-        </IconButton>
-      </Box>
-      <Box
-        as={Collapse}
-        in={isOpen}
-        className={`${type}-page`}
-        animateOpacity
-        unmountOnExit
-        zIndex={1}
-        px={4}
-      >
-        {children}
-      </Box>
-    </VStack>)
-}
-
-export const PageReference = ({ children }) => {
-  return (
-    <Box>
-      {children}
-    </Box>
-  )
-}
-
-interface PageReferences {
-  children: React.ReactNode,
-  extras: React.ReactNode,
-  showIfEmpty: boolean,
-  count: number,
-  title: string,
-  defaultIsOpen: boolean,
-  onOpen: () => void,
-  onClose: () => void,
-}
-
-export const ReferenceHeader = ({ onClick, title }) => {
-  return <Button
-    variant="link"
-    aria-role="heading"
-    aria-level={4}
-    onClick={onClick}
-    textAlign="left"
-    justifyContent="flex-start"
-    textTransform="uppercase"
-    fontWeight="bold"
-    fontSize="xs"
-    color="foreground.secondary"
-    display="flex"
-  >{title}</Button>
-}
-
-export const ReferenceGroup = ({ title, onClickTitle, children }) => {
-  return (
-    <VStack
-      className="reference-group"
-      align="stretch"
-      spacing={2}
-      py={2}
-    >
-      {title && <ReferenceHeader onClick={onClickTitle} title={title} />}
-      {children}
-    </VStack>
-  )
-}
-
-export const ReferenceBlock = ({ children, actions }) => {
-  if (actions) {
-    return (<HStack pr={2}><Box flex="1 1 100%">{children}</Box> {actions}</HStack>)
-  } else {
-    return <Box>{children}</Box>
-  }
-}
-
-const EmptyReferencesNotice = ({ title }: { title: string }) => {
-  return (<Text
-    background="background.floor"
-    color="foreground.secondary"
-    borderRadius="md"
-    p={4}>
-    No {title.toLowerCase()}
-  </Text>)
-}
-
-export const PageReferences = withErrorBoundary(({ children, count, title, defaultIsOpen, onOpen, onClose, extras }: PageReferences) => {
-
-  const { isOpen, onToggle } = useDisclosure({
-    defaultIsOpen: defaultIsOpen,
-    onClose: onClose,
-    onOpen: onOpen
-  });
-
-  const isShowingContent = isOpen && !!children;
-
-  return (
-    <VStack
-      align="stretch"
-      position="relative"
-      spacing={0}
-    >
-      <HStack>
-        <Button onClick={onToggle}
-          flex="1 1 100%"
-          borderRadius="sm"
-          isActive={isShowingContent}
-          color="foreground.secondary"
-          textAlign="left"
-          justifyContent="flex-start"
-          overflow="hidden"
-          whiteSpace="nowrap"
-          leftIcon={
-            <ChevronRightIcon
-              transform={isOpen ? "rotate(90deg)" : null}
-              transitionProperty="common"
-              transitionDuration="0.15s"
-              transitionTimingFunction="ease-in-out"
-              fontSize="xs"
-              justifySelf="center"
-            />
-          }
-        >
-          {title}
-          {!!count && <Text
-            marginInlineStart={2}
-            minWidth="1.75em"
-            textAlign="center"
-            background="background.basement"
-            borderRadius="full"
-            p={1}
-            fontSize="sm"
-          >{count}</Text>}
-        </Button>
-        {isShowingContent && extras}
-      </HStack>
-      <Collapse in={isShowingContent} unmountOnExit>
-        <VStack spacing={0} pl={4} py={0} align="stretch">
-          {children}
-        </VStack>
-      </Collapse>
-    </VStack>)
-},
-  { fallback: <Text>Error displaying references</Text> })
diff --git a/src/js/components/Layout/RightSidebar.tsx b/src/js/components/Layout/RightSidebar.tsx
new file mode 100644
index 0000000000..e0098c3185
--- /dev/null
+++ b/src/js/components/Layout/RightSidebar.tsx
@@ -0,0 +1,148 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { XmarkIcon, ChevronRightIcon, PageIcon, PageFillIcon, BlockIcon, BlockFillIcon, GraphIcon } from '@/Icons/Icons';
+import { Button, IconButton, Box, Collapse, VStack } from '@chakra-ui/react';
+
+const Container = motion(Box);
+
+export const RightSidebarContainer = ({ isOpen, width, isDragging, children }) => {
+  return <AnimatePresence initial={false}>
+    {isOpen &&
+      <Container
+        className="right-sidebar"
+        display="flex"
+        WebkitAppRegion="no-drag"
+        flexDirection="column"
+        height="calc(100% - 3.25rem)"
+        marginTop="3.25rem"
+        alignItems="stretch"
+        justifySelf="stretch"
+        transformOrigin="right"
+        justifyContent="space-between"
+        overflowX="visible"
+        position="relative"
+        gridArea="secondary-content"
+        sx={{
+          "--page-title-font-size": "1.25rem",
+          ".node-page, .block-page": {
+            "--page-padding": "1rem",
+          },
+          ".page-header": {
+            pb: 1
+          },
+          ".page-body": {},
+          ".page-footer": {
+            px: 0,
+            py: 4
+          }
+        }}
+        initial={{
+          width: 0,
+          opacity: 0
+        }}
+        transition={isDragging ? { duration: 0 } : undefined}
+        animate={{
+          width: isOpen ? `${width}vw` : 0,
+          opacity: 1
+        }}
+        exit={{
+          width: 0,
+          opacity: 0
+        }}
+      >
+        {children}
+      </Container>}
+  </AnimatePresence>;
+};
+const typeIcon = (type, isOpen) => {
+  return isOpen ? { "node": <PageFillIcon />, "graph": <GraphIcon />, "block": <BlockFillIcon /> }[type]
+    : { "node": <PageIcon />, "graph": <GraphIcon />, "block": <BlockIcon /> }[type];
+};
+
+export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, children }) => {
+  const canToggle = type !== 'graph';
+  return (
+    <VStack
+      align="stretch"
+      position="relative"
+      spacing={0}
+      ml="1px" // Account for the floating separator
+      _notFirst={{
+        borderTop: "1px solid",
+        borderColor: "separator.divider"
+      }}>
+      <Box
+        top="-1px"
+        zIndex={2}
+        position="sticky"
+        background="background.floor"
+        display="grid"
+        gridTemplateColumns="1fr 3rem"
+        pr={2}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Button
+          onClick={canToggle ? onToggle : undefined}
+          as={canToggle ? undefined : 'div'}
+          {...(!canToggle && {
+            _hover: {},
+            _focus: {},
+            _active: {},
+          })}
+          display="flex"
+          bg="transparent"
+          borderRadius="0"
+          gap={2}
+          py={3}
+          pl={5}
+          pr={0}
+          height="auto"
+          textAlign="left"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          sx={{ maskImage: "linear-gradient(to right, black, black calc(100% - 1rem), transparent calc(100%))" }}
+        >
+          {canToggle && (
+            <ChevronRightIcon
+              transform={isOpen ? "rotate(90deg)" : null}
+              transitionProperty="common"
+              transitionDuration="0.15s"
+              transitionTimingFunction="ease-in-out"
+              justifySelf="center" />
+          )}
+          {typeIcon(type, isOpen)}
+          <Box
+            flex="1 1 100%"
+            tabIndex={-1}
+            pointerEvents="none"
+            position="relative"
+            bottom="1px"
+            overflow="hidden"
+            color="foreground.secondary"
+          >{title}</Box>
+        </Button>
+        <IconButton
+          onClick={onRemove}
+          size="sm"
+          color="foreground.secondary"
+          alignSelf="center"
+          justifySelf="center"
+          bg="transparent"
+          aria-label="Close"
+        >
+          <XmarkIcon />
+        </IconButton>
+      </Box>
+      <Box
+        as={Collapse}
+        in={isOpen}
+        className={`${type}-page`}
+        animateOpacity
+        unmountOnExit
+        zIndex={1}
+        px={4}
+      >
+        {children}
+      </Box>
+    </VStack>);
+};
diff --git a/src/js/components/Page/Page.tsx b/src/js/components/Page/Page.tsx
index 3961c69663..3155e8767e 100644
--- a/src/js/components/Page/Page.tsx
+++ b/src/js/components/Page/Page.tsx
@@ -11,8 +11,10 @@ const PAGE_PROPS = {
   gridTemplateRows: "auto 1fr auto",
   marginInline: "auto",
   sx: {
-    "--page-padding-v": "6rem",
-    "--page-padding-h": "2rem"
+    "--page-padding": "3rem",
+    "&:not(.right-sidebar &)": {
+      mt: 2,
+    }
   }
 }
 
@@ -41,7 +43,7 @@ export const PageNotFound = ({ title, onClickHome, children }) => {
 
 export const PageContainer = ({ children, uid, type }) => <Box
   {...PAGE_PROPS}
-  minHeight="100vh"
+  flexGrow={1}
   data-ui={uid}
   className={type + '-page'}
   flexDirection="column"
@@ -68,8 +70,9 @@ export const HeaderImage = ({ src }) => <Box
 
 export const PageHeader = ({ children, image, onClickOpenInSidebar, onClickOpenInMainView }) => <Box
   as="header"
-  px="var(--page-padding-h)"
-  pt="var(--page-padding-v)"
+  className="page-header"
+  pt="var(--page-padding)"
+  px="var(--page-padding)"
   pb={4}
   gridArea="header"
   display="grid"
@@ -78,13 +81,6 @@ export const PageHeader = ({ children, image, onClickOpenInSidebar, onClickOpenI
   alignItems="center"
   gridTemplateAreas="'breadcrumb breadcrumb' 
   'title extras'"
-  className="page-header"
-  borderBottom="1px solid transparent"
-
-  // Page headers without images get a nice border
-  {...!image && ({
-    borderBottomColor: "separator.divider"
-  })}
 >
   {image && <HeaderImage src={image} />}
   {children}
@@ -113,20 +109,22 @@ export const PageHeader = ({ children, image, onClickOpenInSidebar, onClickOpenI
 
 export const PageBody = ({ children }) => <Box
   as="main"
-  pt={4}
-  // inset the left margin to account for block toggles
-  px="calc(var(--page-padding-h) - 1em)"
-  pr="var(--page-padding-h)"
+  className="page-body"
+  // outset slightly for block toggles
+  pl="calc(var(--page-padding) - 1em)"
+  pr="var(--page-padding)"
   gridArea="content"
 >{children}</Box>
 
 export const PageFooter = ({ children }) => <Box
   as="footer"
-  pt={4}
+  className="page-footer"
+  p="var(--page-padding)"
+  pb="var(--page-padding)"
   gridArea="footer"
-  px="var(--page-padding-h)"
 >{children}</Box>
 
+
 export const DailyNotesPage = ({ isReal, children }) => <Box
   {...PAGE_PROPS}
   className="node-page daily-notes"
@@ -139,10 +137,6 @@ export const DailyNotesPage = ({ isReal, children }) => <Box
   transitionDuration="0s"
   borderRadius="0.5rem"
   minHeight="calc(100vh - 10rem)"
-  sx={{
-    "--page-padding-v": "1rem",
-    "--page-padding-h": "2.5rem"
-  }}
 >{children}</Box>
 
 
diff --git a/src/js/components/References/InlineReferences.tsx b/src/js/components/References/InlineReferences.tsx
new file mode 100644
index 0000000000..5d76a2e8b9
--- /dev/null
+++ b/src/js/components/References/InlineReferences.tsx
@@ -0,0 +1,129 @@
+import { ChevronRightIcon } from '@/Icons/Icons';
+import { Button, Box, useDisclosure, Collapse, Text, VStack, HStack } from '@chakra-ui/react';
+import { withErrorBoundary } from 'react-error-boundary';
+
+export const PageReference = ({ children }) => {
+  return (
+    <Box>
+      {children}
+    </Box>
+  )
+}
+
+interface PageReferences {
+  children: React.ReactNode,
+  extras: React.ReactNode,
+  showIfEmpty: boolean,
+  count: number,
+  title: string,
+  defaultIsOpen: boolean,
+  onOpen: () => void,
+  onClose: () => void,
+}
+
+export const ReferenceHeader = ({ onClick, title }) => {
+  return <Button
+    variant="link"
+    aria-role="heading"
+    aria-level={4}
+    onClick={onClick}
+    textAlign="left"
+    justifyContent="flex-start"
+    textTransform="uppercase"
+    fontWeight="bold"
+    fontSize="xs"
+    color="foreground.secondary"
+    display="flex"
+  >{title}</Button>
+}
+
+export const ReferenceGroup = ({ title, onClickTitle, children }) => {
+  return (
+    <VStack
+      className="reference-group"
+      align="stretch"
+      spacing={2}
+      py={2}
+    >
+      {title && <ReferenceHeader onClick={onClickTitle} title={title} />}
+      {children}
+    </VStack>
+  )
+}
+
+export const ReferenceBlock = ({ children, actions }) => {
+  if (actions) {
+    return (<HStack pr={2}><Box flex="1 1 100%">{children}</Box> {actions}</HStack>)
+  } else {
+    return <Box>{children}</Box>
+  }
+}
+
+const EmptyReferencesNotice = ({ title }: { title: string }) => {
+  return (<Text
+    background="background.floor"
+    color="foreground.secondary"
+    borderRadius="md"
+    p={4}>
+    No {title.toLowerCase()}
+  </Text>)
+}
+
+export const PageReferences = withErrorBoundary(({ children, count, title, defaultIsOpen, onOpen, onClose, extras }: PageReferences) => {
+
+  const { isOpen, onToggle } = useDisclosure({
+    defaultIsOpen: defaultIsOpen,
+    onClose: onClose,
+    onOpen: onOpen
+  });
+
+  const isShowingContent = isOpen && !!children;
+
+  return (
+    <VStack
+      align="stretch"
+      position="relative"
+      spacing={0}
+    >
+      <HStack>
+        <Button onClick={onToggle}
+          flex="1 1 100%"
+          borderRadius="sm"
+          isActive={isShowingContent}
+          color="foreground.secondary"
+          textAlign="left"
+          justifyContent="flex-start"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          leftIcon={
+            <ChevronRightIcon
+              transform={isOpen ? "rotate(90deg)" : null}
+              transitionProperty="common"
+              transitionDuration="0.15s"
+              transitionTimingFunction="ease-in-out"
+              fontSize="xs"
+              justifySelf="center"
+            />
+          }
+        >
+          {title}
+          {!!count && <Text
+            marginInlineStart={2}
+            minWidth="1.75em"
+            textAlign="center"
+            background="background.basement"
+            borderRadius="full"
+            p={1}
+            fontSize="sm"
+          >{count}</Text>}
+        </Button>
+        {isShowingContent && extras}
+      </HStack>
+      <Collapse in={isShowingContent} unmountOnExit>
+        <VStack spacing={0} pl={4} py={0} align="stretch">
+          {children}
+        </VStack>
+      </Collapse>
+    </VStack>)
+},
+  { fallback: <Text>Error displaying references</Text> })
diff --git a/src/js/components/References/References.tsx b/src/js/components/References/References.tsx
new file mode 100644
index 0000000000..417484f92e
--- /dev/null
+++ b/src/js/components/References/References.tsx
@@ -0,0 +1,135 @@
+import { ChevronRightIcon } from '@/Icons/Icons';
+import { Button, Box, useDisclosure, Collapse, Text, VStack, HStack } from '@chakra-ui/react';
+import { withErrorBoundary } from 'react-error-boundary';
+
+export const PageReference = ({ children }) => {
+  return (
+    <Box>
+      {children}
+    </Box>
+  )
+}
+
+interface PageReferences {
+  children: React.ReactNode,
+  extras: React.ReactNode,
+  showIfEmpty: boolean,
+  count: number,
+  title: string,
+  defaultIsOpen: boolean,
+  onOpen: () => void,
+  onClose: () => void,
+}
+
+export const ReferenceHeader = ({ onClick, title }) => {
+  return <Button
+    variant="link"
+    aria-role="heading"
+    aria-level={4}
+    onClick={onClick}
+    textAlign="left"
+    justifyContent="flex-start"
+    color="foreground.secondary"
+    display="flex"
+  >{title}</Button>
+}
+
+export const ReferenceGroup = ({ title, onClickTitle, children }) => {
+  return (
+    <VStack
+      borderTop="1px solid"
+      borderColor="separator.divider"
+      className="reference-group"
+      align="stretch"
+      spacing={4}
+      py={6}
+    >
+      {title && <ReferenceHeader onClick={onClickTitle} title={title} />}
+      {children}
+    </VStack>
+  )
+}
+
+export const ReferenceBlock = ({ children, actions }) => {
+  if (actions) {
+    return (<HStack pr={2}><Box flex="1 1 100%">{children}</Box> {actions}</HStack>)
+  } else {
+    return <Box>{children}</Box>
+  }
+}
+
+const EmptyReferencesNotice = ({ title }: { title: string }) => {
+  return (<Text
+    background="background.floor"
+    color="foreground.secondary"
+    borderRadius="md"
+    p={4}>
+    No {title.toLowerCase()}
+  </Text>)
+}
+
+export const PageReferences = withErrorBoundary(({ children, count, title, defaultIsOpen, onOpen, onClose, extras }: PageReferences) => {
+
+  const { isOpen, onToggle } = useDisclosure({
+    defaultIsOpen: defaultIsOpen,
+    onClose: onClose,
+    onOpen: onOpen
+  });
+
+  const isShowingContent = isOpen && !!children;
+
+  return (
+    <VStack
+      align="stretch"
+      position="relative"
+      spacing={0}
+    >
+      <HStack>
+        <Button
+          variant="ghost"
+          onClick={onToggle}
+          flex="1 1 100%"
+          borderRadius="sm"
+          isActive={isShowingContent}
+          color="foreground.secondary"
+          textAlign="left"
+          justifyContent="flex-start"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          leftIcon={
+            <ChevronRightIcon
+              transform={isOpen ? "rotate(90deg)" : null}
+              transitionProperty="common"
+              transitionDuration="0.15s"
+              transitionTimingFunction="ease-in-out"
+              fontSize="sm"
+              justifySelf="center"
+            />
+          }
+        >
+          {title}
+          {!!count && <Text
+            marginInlineStart={2}
+            minWidth="1.75em"
+            textAlign="center"
+            background="background.basement"
+            borderRadius="full"
+            p={1}
+            fontSize="sm"
+          >{count}</Text>}
+        </Button>
+        {isShowingContent && extras}
+      </HStack>
+      <Collapse in={isShowingContent} unmountOnExit>
+        <VStack
+          spacing={0}
+          pl={4}
+          py={0}
+          align="stretch"
+        >
+          {children}
+        </VStack>
+      </Collapse>
+    </VStack>)
+},
+  { fallback: <Text>Error displaying references</Text> })
