diff --git a/common/svg.js b/common/svg.js
index cca807d7..c3defb15 100644
--- a/common/svg.js
+++ b/common/svg.js
@@ -69,7 +69,7 @@ export const Search = (props) => {
       stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="1.5"
+      strokeWidth="2"
       height={props.height}
       style={props.style}
     >
@@ -285,8 +285,8 @@ export const NavigationArrow = (props) => (
       strokeLinejoin="round"
       strokeWidth="2"
     >
-      <path d="m.75 12h22.5" />
-      <path d="m12.75 22.5 10.5-10.5-10.5-10.5" fillRule="evenodd" />
+      <path d="M5 12H19" />
+      <path d="M12 5L19 12L12 19" />
     </g>
   </svg>
 );
@@ -1087,3 +1087,19 @@ export const LocationPin = (props) => {
     </svg>
   );
 };
+export const MoreHorizontal = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" />
+    <path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" />
+    <path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" />
+  </svg>
+);
diff --git a/components/core/ApplicationHeader.js b/components/core/ApplicationHeader.js
index 80e0befb..06bce3df 100644
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@@ -97,7 +97,7 @@ export default class ApplicationHeader extends React.Component {
             onClick={isBackDisabled ? () => {} : this.props.onBack}
           >
             <SVG.NavigationArrow
-              height="16px"
+              height="24px"
               style={{ transform: `rotate(180deg)` }}
             />
           </span>
@@ -110,7 +110,7 @@ export default class ApplicationHeader extends React.Component {
             }
             onClick={isForwardDisabled ? () => {} : this.props.onForward}
           >
-            <SVG.NavigationArrow height="16px" />
+            <SVG.NavigationArrow height="24px" />
           </span>
 
           <span
@@ -118,7 +118,7 @@ export default class ApplicationHeader extends React.Component {
             style={{ marginLeft: 24 }}
             onClick={this.props.onRehydrate}
           >
-            <SVG.Refresh height="16px" />
+            <SVG.Refresh height="20px" />
           </span>
 
           <span
@@ -126,7 +126,7 @@ export default class ApplicationHeader extends React.Component {
             style={{ marginLeft: 24 }}
             onClick={this._handleCreateSearch}
           >
-            <SVG.Search height="19px" />
+            <SVG.Search height="20px" />
           </span>
         </div>
         <div css={STYLES_MIDDLE} />
diff --git a/components/core/ApplicationNavigation.js b/components/core/ApplicationNavigation.js
index a3e5ccf1..9302fa51 100644
--- a/components/core/ApplicationNavigation.js
+++ b/components/core/ApplicationNavigation.js
@@ -37,6 +37,7 @@ const STYLES_NAVIGATION_ITEM = css`
   color: ${Constants.system.black};
   user-select: none;
   padding-right: 24px;
+  font-family: ${Constants.font.medium};
 
   :hover {
     padding-right: 0px;
@@ -64,7 +65,7 @@ const STYLES_CHILDREN = css`
   height: 100%;
   overflow-wrap: break-word;
   padding: 11px 0px 14px 8px;
-  font-family: ${Constants.font.text};
+  font-family: ${Constants.font.medium};
   font-weight: 400;
   font-size: 14px;
   line-height: 1.225;
diff --git a/components/core/ApplicationUserControls.js b/components/core/ApplicationUserControls.js
index c0e93c24..a324a02e 100644
--- a/components/core/ApplicationUserControls.js
+++ b/components/core/ApplicationUserControls.js
@@ -9,7 +9,7 @@ import {
 } from "~/components/system";
 import { css } from "@emotion/react";
 
-import Dismissible from "~/components/core/Dismissible";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 import CircleButtonLight from "~/components/core/CircleButtonLight";
 
 const APPLICATION_CONTROL_MENU_ID = "application-control-menu";
@@ -131,7 +131,7 @@ export default class ApplicationUserControls extends React.Component {
           horizontal="right"
           vertical="below"
           content={
-            <Dismissible
+            <Boundary
               captureResize={true}
               captureScroll={false}
               enabled
@@ -142,20 +142,20 @@ export default class ApplicationUserControls extends React.Component {
                 style={{
                   left: "0px",
                   top: "16px",
-                  cursor: "pointer",
                 }}
-                onNavigateTo={this._handleNavigateTo}
-                onAction={this._handleAction}
-                onSignOut={this._handleSignOut}
                 navigation={[
                   {
-                    text: "Profile & account settings",
-                    value: "V1_NAVIGATION_PROFILE_EDIT",
+                    text: "Account settings",
+                    onClick: () =>
+                      this.props.onAction({
+                        type: "NAVIGATE",
+                        value: "V1_NAVIGATION_PROFILE_EDIT",
+                      }),
                   },
-                  { text: "Sign Out", value: null, action: "SIGN_OUT" },
+                  { text: "Sign out", onClick: this._handleSignOut },
                 ]}
               />
-            </Dismissible>
+            </Boundary>
           }
         >
           <div css={STYLES_FLEX_ROW}>
diff --git a/components/core/Profile.js b/components/core/Profile.js
index 7ecb64c3..844e2cc5 100644
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@@ -94,7 +94,7 @@ export default class Profile extends React.Component {
               const url = `/${data.username}/${slate.slatename}`;
               return (
                 <a key={url} href={url} css={STYLES_LINK}>
-                  <SlatePreviewBlock slate={slate} />
+                  <SlatePreviewBlock external slate={slate} />
                 </a>
               );
             })}
diff --git a/components/core/SlatePreviewBlock.js b/components/core/SlatePreviewBlock.js
index c533fa78..bb518581 100644
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@@ -4,6 +4,10 @@ import * as SVG from "~/common/svg";
 
 import { css } from "@emotion/react";
 import { ProcessedText } from "~/components/system/components/Typography";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
+import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
+import { TooltipWrapper } from "~/components/system/components/fragments/GlobalTooltip";
+import { dispatchCustomEvent } from "~/common/custom-events";
 
 import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
 
@@ -74,7 +78,7 @@ export function SlatePreviewRow(props) {
     >
       {objects.map((each) => (
         <div
-          key={each.url}
+          key={each.id}
           css={props.small ? STYLES_ITEM_BOX_SMALL : STYLES_ITEM_BOX}
           style={props.style}
         >
@@ -154,28 +158,123 @@ const STYLES_CREATE_NEW = css`
   height: 160px;
 `;
 
+const STYLES_ICON_BOX = css`
+  height: 24px;
+  width: 24px;
+  display: block;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default class SlatePreviewBlock extends React.Component {
   _ref;
+  _test;
 
   state = {
-    copyable: "",
+    isMenuOpen: false,
+    copyValue: "",
+  };
+
+  _componentDidMount = () => {
+    console.log(this._test.getBoundingClientRect());
   };
 
   _handleCopy = (e, value) => {
     e.stopPropagation();
-    console.log("copy");
-    this.setState({ copyable: value }, () => {
+    this.setState({ copyValue: value }, () => {
       this._ref.select();
       document.execCommand("copy");
     });
   };
 
+  _handleClick = (e) => {
+    e.stopPropagation();
+    console.log("show tooltip");
+    dispatchCustomEvent({
+      name: "show-tooltip",
+      detail: {
+        id: `slate-tooltip-${this.props.slate.id}`,
+      },
+    });
+  };
+
+  _handleHide = (e) => {
+    console.log("hide tooltip");
+    dispatchCustomEvent({
+      name: "hide-tooltip",
+      detail: {
+        id: `slate-tooltip-${this.props.slate.id}`,
+      },
+    });
+  };
+
   render() {
     if (!this.props.editing && !this.props.slate.data.objects.length) {
       return null;
     }
+    let contextMenu = (
+      <React.Fragment>
+        <Boundary
+          captureResize={true}
+          captureScroll={false}
+          enabled
+          onOutsideRectEvent={this._handleHide}
+          style={this.props.style}
+        >
+          <PopoverNavigation
+            style={{
+              left: "0px",
+              top: "16px",
+            }}
+            navigation={
+              this.props.editing
+                ? [
+                    {
+                      text: "Copy URL",
+                      onClick: (e) =>
+                        this._handleCopy(
+                          e,
+                          `https://slate.host/${this.props.slate.owner.username}/${this.props.slate.slatename}`
+                        ),
+                    },
+                    {
+                      text: "Copy slate ID",
+                      onClick: (e) => this._handleCopy(e, this.props.slate.id),
+                    },
+                  ]
+                : [
+                    {
+                      text: "Copy URL",
+                      onClick: (e) =>
+                        this._handleCopy(
+                          e,
+                          `https://slate.host/${this.props.slate.owner.username}/${this.props.slate.slatename}`
+                        ),
+                    },
+                  ]
+            }
+          />
+        </Boundary>
+        <input
+          readOnly
+          ref={(c) => {
+            this._ref = c;
+          }}
+          value={this.state.copyValue}
+          css={STYLES_COPY_INPUT}
+        />
+      </React.Fragment>
+    );
+
     return (
-      <div css={STYLES_BLOCK}>
+      <div
+        css={STYLES_BLOCK}
+        style={
+          this.props.external
+            ? { backgroundColor: Constants.system.white, border: "none" }
+            : {}
+        }
+      >
         <div css={STYLES_TITLE_LINE}>
           <div
             style={{
@@ -208,16 +307,26 @@ export default class SlatePreviewBlock extends React.Component {
               </div>
             )
           ) : null}
-          {this.props.editing ? (
-            <div style={{ justifySelf: "end" }}>
-              <div
-                css={STYLES_BUTTON}
-                onClick={(e) => this._handleCopy(e, this.props.slate.id)}
+          {this.props.external ? null : (
+            <div
+              style={{ justifySelf: "flex-end" }}
+              ref={(c) => {
+                this._test = c;
+              }}
+            >
+              <TooltipWrapper
+                id={`slate-tooltip-${this.props.slate.id}`}
+                type="body"
+                content={contextMenu}
+                horizontal="left"
+                vertical="below"
               >
-                Copy ID
-              </div>
+                <div css={STYLES_ICON_BOX} onClick={this._handleClick}>
+                  <SVG.MoreHorizontal height="16px" />
+                </div>
+              </TooltipWrapper>
             </div>
-          ) : null}
+          )}
         </div>
         {this.props.slate.data.body ? (
           <div css={STYLES_BODY}>
@@ -237,14 +346,6 @@ export default class SlatePreviewBlock extends React.Component {
             <div>Add Files</div>
           </div>
         )}
-        <input
-          readOnly
-          ref={(c) => {
-            this._ref = c;
-          }}
-          value={this.state.copyable}
-          css={STYLES_COPY_INPUT}
-        />
       </div>
     );
   }
diff --git a/components/system/components/GlobalModal.js b/components/system/components/GlobalModal.js
index b9bc89b3..6275d0d6 100644
--- a/components/system/components/GlobalModal.js
+++ b/components/system/components/GlobalModal.js
@@ -39,12 +39,20 @@ export class GlobalModal extends React.Component {
     window.addEventListener("create-modal", this._handleCreate);
     window.addEventListener("delete-modal", this._handleDelete);
     window.addEventListener("keydown", this._handleDocumentKeydown);
+    window.addEventListener("scroll", this._handleScroll);
   };
 
   componentWillUnmount = () => {
     window.removeEventListener("create-modal", this._handleCreate);
     window.removeEventListener("delete-modal", this._handleDelete);
     window.removeEventListener("keydown", this._handleDocumentKeydown);
+    window.removeEventListener("scroll", this._handleScroll);
+  };
+
+  _handleScroll = (e) => {
+    if (this.state.modal) {
+      e.stopPropagation();
+    }
   };
 
   _handleCreate = (e) => {
diff --git a/components/system/components/PopoverNavigation.js b/components/system/components/PopoverNavigation.js
index 18f077d0..58013495 100644
--- a/components/system/components/PopoverNavigation.js
+++ b/components/system/components/PopoverNavigation.js
@@ -7,13 +7,13 @@ const STYLES_POPOVER = css`
   z-index: ${Constants.zindex.tooltip};
   box-sizing: border-box;
   font-family: ${Constants.font.text};
-  position: absolute;
   width: 204px;
   border-radius: 4px;
   user-select: none;
   background-color: ${Constants.system.white};
   color: ${Constants.system.pitchBlack};
-  box-shadow: inset 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07);
+  box-shadow: inset 0 0 0 1px ${Constants.system.border},
+    0 1px 4px rgba(0, 0, 0, 0.07);
 `;
 
 const STYLES_POPOVER_ITEM = css`
@@ -38,30 +38,14 @@ const STYLES_POPOVER_ITEM = css`
 `;
 
 export class PopoverNavigation extends React.Component {
-  static defaultProps = {
-    onNavigateTo: () => {
-      console.error("requires onNavigateTo");
-    },
-  };
-
   render() {
     return (
       <div css={STYLES_POPOVER} style={this.props.style}>
-        {this.props.navigation.map((each) => {
-          if (each.action === "SIGN_OUT") {
-            return (
-              <div key={each.value} css={STYLES_POPOVER_ITEM} onClick={this.props.onSignOut}>
-                {each.text}
-              </div>
-            );
-          }
-
-          return (
-            <div key={each.value} css={STYLES_POPOVER_ITEM} onClick={() => this.props.onNavigateTo({ id: each.value })}>
-              {each.text}
-            </div>
-          );
-        })}
+        {this.props.navigation.map((each) => (
+          <div key={each.text} css={STYLES_POPOVER_ITEM} onClick={each.onClick}>
+            {each.text}
+          </div>
+        ))}
       </div>
     );
   }
diff --git a/components/system/components/fragments/GlobalTooltip.js b/components/system/components/fragments/GlobalTooltip.js
index 9e9fca5f..512b45f7 100644
--- a/components/system/components/fragments/GlobalTooltip.js
+++ b/components/system/components/fragments/GlobalTooltip.js
@@ -135,6 +135,7 @@ export class GlobalTooltip extends React.Component {
       horizontal: e.detail.horizontal,
     };
     this.setState({ tooltips });
+    console.log(tooltips);
   };
 
   _handleRemove = (e) => {
@@ -152,11 +153,14 @@ export class GlobalTooltip extends React.Component {
     }
   };
 
-  _handleShow = (e) => {
+  _handleShow = async (e) => {
     if (this.state.tooltips[e.detail.id]) {
       let tooltips = this.state.tooltips;
       if (!tooltips[e.detail.id].style) {
         let rect = tooltips[e.detail.id].root.getBoundingClientRect();
+        console.log(tooltips[e.detail.id]);
+        console.log(tooltips[e.detail.id].root);
+        console.log(rect);
         let style = this.getOrientation(
           rect,
           tooltips[e.detail.id].bubbleRect,
@@ -211,6 +215,7 @@ export class TooltipWrapper extends React.Component {
 
   componentDidMount = async () => {
     let bubbleRect = this._bubble.getBoundingClientRect();
+    console.log(this._bubble);
 
     dispatchCustomEvent({
       name: "add-tooltip",