diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx
index c0b97683b13..6d6051d1d24 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx
@@ -66,7 +66,7 @@ export const Actions = () => {
 
   let primaryAction;
   if (!hasLogIn) primaryAction = 'Sign in';
-  else primaryAction = owned ? 'Embed' : 'Fork';
+  else primaryAction = owned ? 'Share' : 'Fork';
 
   return (
     <Stack
@@ -120,8 +120,6 @@ export const Actions = () => {
         </Stack>
       )}
 
-      {author && featureFlags.ACCESS_SHEET && <Collaborators />}
-
       {user?.curatorAt && (
         <Button
           variant="secondary"
@@ -131,12 +129,37 @@ export const Actions = () => {
           Pick
         </Button>
       )}
-      <Button
-        variant={primaryAction === 'Embed' ? 'primary' : 'secondary'}
-        onClick={() => modalOpened({ modal: 'share' })}
-      >
-        <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
-      </Button>
+
+      {featureFlags.ACCESS_SHEET && (
+        <>
+          {author ? (
+            <Collaborators
+              renderButton={props => (
+                <Button variant="primary" {...props}>
+                  <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Share
+                </Button>
+              )}
+            />
+          ) : (
+            <Button
+              variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
+              onClick={() => modalOpened({ modal: 'share' })}
+            >
+              <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
+            </Button>
+          )}
+        </>
+      )}
+
+      {!featureFlags.ACCESS_SHEET && (
+        <Button
+          variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
+          onClick={() => modalOpened({ modal: 'share' })}
+        >
+          <EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
+        </Button>
+      )}
+
       <Button
         variant={primaryAction === 'Fork' ? 'primary' : 'secondary'}
         onClick={forkSandboxClicked}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx
index 34b0f79f3d2..a57863e0af4 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx
@@ -6,7 +6,7 @@ import css from '@styled-system/css';
 import { Authorization } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
 import { UserSearchInput } from './UserSearchInput';
-import { PermissionSelect, SELECT_WIDTH } from './PermissionSelect';
+import { PermissionSelect, MENU_WIDTH } from './PermissionSelect';
 
 export const AddCollaboratorForm = () => {
   const { actions, state } = useOvermind();
@@ -67,17 +67,17 @@ export const AddCollaboratorForm = () => {
           onInputValueChange={val => {
             setInputValue(val);
           }}
-          css={css({ paddingRight: SELECT_WIDTH })}
+          css={css({ paddingRight: MENU_WIDTH })}
         />
 
         <PermissionSelect
-          css={css({
+          value={authorization}
+          onChange={setAuthorization}
+          css={{
             position: 'absolute',
-            right: 0,
             top: 0,
-          })}
-          value={authorization}
-          onChange={e => setAuthorization(e.target.value as Authorization)}
+            right: 0,
+          }}
         />
       </motion.div>
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx
index 050cce3ccea..339ef45983d 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx
@@ -2,7 +2,7 @@ import { GlobeIcon } from '@codesandbox/common/lib/components/icons/Globe';
 import { LinkIcon } from '@codesandbox/common/lib/components/icons/Link';
 import { LockIcon } from '@codesandbox/common/lib/components/icons/Lock';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Select, Stack, Text } from '@codesandbox/components';
+import { Stack, Text, Menu, Icon } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { Authorization } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
@@ -208,6 +208,12 @@ export const Invitation = ({ id, email, authorization }: IInvitationProps) => {
   );
 };
 
+const privacyToName = {
+  0: 'Public',
+  1: 'Unlisted',
+  2: 'Private',
+};
+
 const privacyToIcon = {
   0: GlobeIcon,
   1: LinkIcon,
@@ -229,31 +235,35 @@ export const LinkPermissions = ({ readOnly }: ILinkPermissionProps) => {
   const { privacy } = state.editor.currentSandbox;
   const isPatron = state.isPatron;
 
-  const Icon = privacyToIcon[privacy];
+  const PrivacyIcon = privacyToIcon[privacy];
 
   const isReadOnly = readOnly || !isPatron;
 
+  const onChange = value => {
+    actions.workspace.sandboxPrivacyChanged({
+      privacy: Number(value) as 0 | 1 | 2,
+      source: 'collaboratorss',
+    });
+  };
+
   return (
     <Stack gap={4} align="center" direction="vertical">
       <CollaboratorItem
-        avatarComponent={<Icon />}
+        avatarComponent={<PrivacyIcon />}
         name={
-          <Select
-            variant="link"
-            onChange={e => {
-              actions.workspace.sandboxPrivacyChanged({
-                privacy: Number(e.target.value) as 0 | 1 | 2,
-                source: 'collaboratorss',
-              });
-            }}
-            value={privacy}
-            css={css({ paddingLeft: 0 })}
-            disabled={isReadOnly}
-          >
-            <option value="0">Public</option>
-            <option value="1">Unlisted</option>
-            <option value="2">Private</option>
-          </Select>
+          <Menu>
+            <Menu.Button disabled={isReadOnly}>
+              {privacyToName[privacy]}{' '}
+              <Icon name="caret" size={2} marginLeft={1} />
+            </Menu.Button>
+            <Menu.List>
+              {Object.keys(privacyToName).map(p => (
+                <Menu.Item key={p} onSelect={() => onChange(p)}>
+                  {privacyToName[p]}
+                </Menu.Item>
+              ))}
+            </Menu.List>
+          </Menu>
         }
         authorization={Authorization.Read}
         permissions={[]}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx
index 7894543f3c7..fa9748d7854 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx
@@ -1,10 +1,9 @@
 import React, { FunctionComponent } from 'react';
-import { Button, Element } from '@codesandbox/components';
+import { Element } from '@codesandbox/components';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { Overlay } from 'app/components/Overlay';
 import { useOvermind } from 'app/overmind';
 
-import { AddPeople } from './icons';
 import { Container, HorizontalSeparator } from './elements';
 import { AddCollaboratorForm } from './AddCollaboratorForm';
 import { LinkPermissions } from './Collaborator';
@@ -43,18 +42,16 @@ const CollaboratorContent = () => {
   );
 };
 
-export const Collaborators: FunctionComponent = () => (
+export const Collaborators: FunctionComponent<{
+  renderButton: (any) => JSX.Element;
+}> = ({ renderButton }) => (
   <>
     <Overlay
       noHeightAnimation={false}
       event="Collaborators"
       content={CollaboratorContent}
     >
-      {open => (
-        <Button onClick={() => open()} variant="link">
-          <AddPeople width={24} height={24} />
-        </Button>
-      )}
+      {open => renderButton({ onClick: () => open() })}
     </Overlay>
   </>
 );
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx
index 4036ac69e77..aa746d63369 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx
@@ -1,14 +1,7 @@
 import React from 'react';
-import css from '@styled-system/css';
-import { Select, Stack } from '@codesandbox/components';
+import { Menu, Icon } from '@codesandbox/components';
 import { Authorization } from 'app/graphql/types';
 
-interface IPermissionSelectProps extends React.ComponentProps<typeof Select> {
-  additionalOptions?: { value: string; label: string }[];
-  permissions?: Authorization[];
-  pretext?: string;
-}
-
 const authToName = {
   [Authorization.WriteCode]: 'Can Edit',
   [Authorization.Comment]: 'Can Comment',
@@ -17,25 +10,43 @@ const authToName = {
   [Authorization.WriteProject]: 'Edit Sandbox Info',
 };
 
-export const SELECT_WIDTH = 85;
+// Based on the longest option in the mnu
+// which is "Can Comment"
+export const MENU_WIDTH = 110;
+
+interface IPermissionSelectProps {
+  additionalOptions?: { value: string; label: string }[];
+  permissions?: Authorization[];
+  pretext?: string;
+  value: Authorization;
+  onChange: (Authorization) => void;
+  disabled?: boolean;
+}
+
 export const PermissionSelect = ({
   additionalOptions = [],
   permissions = [Authorization.WriteCode, Authorization.Read],
+  value: selectedValue,
+  onChange,
+  disabled,
   ...props
 }: IPermissionSelectProps) => (
-  <Stack align="center">
-    <Select variant="link" css={css({ width: SELECT_WIDTH })} {...props}>
+  <Menu>
+    <Menu.Button disabled={disabled} {...props}>
+      {authToName[selectedValue]} <Icon name="caret" size={2} marginLeft={1} />
+    </Menu.Button>
+    <Menu.List>
       {permissions.map(auth => (
-        <option key={auth} value={auth}>
+        <Menu.Item key={auth} onSelect={() => onChange(auth)}>
           {authToName[auth]}
-        </option>
+        </Menu.Item>
       ))}
 
       {additionalOptions.map(({ label, value }) => (
-        <option key={value} value={value}>
+        <Menu.Item key={label} onSelect={() => onChange(value)}>
           {label}
-        </option>
+        </Menu.Item>
       ))}
-    </Select>
-  </Stack>
+    </Menu.List>
+  </Menu>
 );
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx
index a759b87cdfb..91e60f191d1 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx
@@ -1,26 +1,6 @@
 import React from 'react';
 import IconBase from 'react-icons/IconBase';
 
-export const AddPeople = props => (
-  <IconBase
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M6.57143 6H5.42857V9.42857H2V10.5714H5.42857V14H6.57143V10.5714H10V9.42857H6.57143V6Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M18.6493 8.50025C18.6493 9.26669 18.3765 10.0235 18.054 10.6C17.9808 10.7309 18.1127 10.952 18.2448 11.1736C18.3898 11.4168 18.5351 11.6606 18.4098 11.7859C18.0667 12.129 17.2557 12.088 16.5991 12.0391C16.168 12.4163 15.6485 12.6365 15.0892 12.6365C14.4603 12.6365 13.8815 12.358 13.4225 11.8909C13.2965 11.9492 13.171 12.0075 13.047 12.0668C12.0716 11.9375 11.4694 10.3319 11.7019 8.48083C11.9344 6.62971 12.9135 5.23396 13.8888 5.36334C14.1122 5.4114 14.3145 5.4734 14.4977 5.54697C14.9167 5.20067 15.4143 5 15.9482 5C17.4399 5 18.6493 6.56711 18.6493 8.50025ZM10.042 18.8142L19.7895 18.8142C19.7895 18.8142 20.4942 14.1095 14.857 13.9862C9.21991 13.863 10.042 18.8142 10.042 18.8142Z"
-      fill="currentColor"
-    />
-  </IconBase>
-);
-
 export const Mail = props => (
   <IconBase
     fill="none"
diff --git a/packages/components/src/components/Menu/index.tsx b/packages/components/src/components/Menu/index.tsx
index a9bea6a4144..047f41da928 100644
--- a/packages/components/src/components/Menu/index.tsx
+++ b/packages/components/src/components/Menu/index.tsx
@@ -29,7 +29,7 @@ const MenuContext = React.createContext({ trigger: null });
 const PortalStyles = createGlobalStyle(
   css({
     '[data-reach-menu]': {
-      zIndex: 2,
+      zIndex: 11, // TODO: we need to sort out our z indexes!
     },
     '[data-reach-menu-list][data-component=MenuList]': {
       minWidth: 100,
diff --git a/packages/homepage/content/docs/2-importing.md b/packages/homepage/content/docs/2-importing.md
index 2f85f7d002f..d910290cf4a 100644
--- a/packages/homepage/content/docs/2-importing.md
+++ b/packages/homepage/content/docs/2-importing.md
@@ -12,15 +12,18 @@ The most popular way of creating a new sandbox is the Create Sandbox screen.
 
 ![Create Sandbox screen](./images/create-wizard.png)
 
-The Create Sandbox screen shows you all of the public templates that are currently available, including official templates and those created by the community. These are automatically forked when you select them, so you can edit and begin creating your own sandbox.
+The Create Sandbox screen shows you all of the public templates that are
+currently available, including official templates and those created by the
+community. These are automatically forked when you select them, so you can edit
+and begin creating your own sandbox.
 
 ## Import from GitHub
 
 You can import a GitHub repository in to CodeSandbox from the
 [import wizard](https://codesandbox.io/s/github) and pasting the URL to your
 GitHub repository. Note that we just take the last part of the url (everything
-after github.com) and append it after codesandbox.io/s/github/. We support custom
-branches and subdirectories. Here is an example URL:
+after github.com) and append it after codesandbox.io/s/github/. We support
+custom branches and subdirectories. Here is an example URL:
 [https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).
 
 The imported repository will always stay up to date with your latest commits.
@@ -57,7 +60,8 @@ You can find the source of our git extractor
 You can import a local project in to CodeSandbox by using our
 [CLI](https://github.com/codesandbox-app/codesandbox-importers/tree/master/packages/cli).
 
-You can install our CLI by running `npm install -g codesandbox`. Then import a project by running `codesandbox {directory}`.
+You can install our CLI by running `npm install -g codesandbox`. Then import a
+project by running `codesandbox {directory}`.
 
 ### Example usage
 
@@ -69,9 +73,10 @@ $ codesandbox ./
 ## Define API
 
 We offer an API that allows you to programmatically create a sandbox. This is
-useful for documentation, enabling you to generate a sandbox on the
-fly from code examples. You can call the endpoint `https://codesandbox.io/api/v1/sandboxes/define`
-both with a `GET` and with a `POST` request.
+useful for documentation, enabling you to generate a sandbox on the fly from
+code examples. You can call the endpoint
+`https://codesandbox.io/api/v1/sandboxes/define` both with a `GET` and with a
+`POST` request.
 
 ### Supported Parameters
 
@@ -157,8 +162,8 @@ the result will be json data providing you with the `sandbox_id` of the new
 sandbox.
 
 This is useful, for instance, if you need to create a new sandbox
-programmatically, so you can then embed it on your site (See [Embed
-documentation](/docs/embedding)).
+programmatically, so you can then embed it on your site (See
+[Embed documentation](/docs/embedding)).
 
 Both `get` and `post` requests are supported.
 
@@ -188,8 +193,13 @@ other local files used by the component to ensure render.
 
 ## Import Using Codesandboxer
 
-[Codesandboxer](https://github.com/codesandbox/codesandboxer) imports a single file from a git repository, along with supplemental files and dependencies. Using this creates an easy way to upload an example instead of
-an entire git repository. This enables you to easily share examples with others, or to link to editable versions of examples from a documentation website. React-codesandboxer is the main version, but there are also versions for VS Code, Atom, and Bitbucket.
+[Codesandboxer](https://github.com/codesandbox/codesandboxer) imports a single
+file from a git repository, along with supplemental files and dependencies.
+Using this creates an easy way to upload an example instead of an entire git
+repository. This enables you to easily share examples with others, or to link to
+editable versions of examples from a documentation website. React-codesandboxer
+is the main version, but there are also versions for VS Code, Atom, and
+Bitbucket.
 
 ### How it works
 
@@ -198,9 +208,8 @@ bitbucket, using a single file that will be rendered as the 'example' as an
 entry point, then uses the Define API to upload the necessary files into a new
 `create-react-app` sandbox.
 
-Check out the
-[codesandboxer docs](https://github.com/codesandbox/codesandboxer) for
-information on how to implement it.
+Check out the [codesandboxer docs](https://github.com/codesandbox/codesandboxer)
+for information on how to implement it.
 
 ```jsx harmony
 import React, { Component } from 'react';
@@ -222,4 +231,8 @@ export default () => (
 
 ## Import Using Remark-Codesandbox
 
-[Remark-Codesandbox](https://github.com/kevin940726/remark-codesandbox) is a remark plugin for creating sandboxes directly from code blocks in documentation. Developed by CodeSandbox community member Kai Hao, it supports popular platforms including MDX, Gatsby, Storybook Docs, docz etc. Learn more about it in their [documentation](https://github.com/kevin940726/remark-codesandbox#remark-codesandbox).
+[Remark-Codesandbox](https://github.com/kevin940726/remark-codesandbox) is a
+remark plugin for creating sandboxes directly from code blocks in documentation.
+Developed by CodeSandbox community member Kai Hao, it supports popular platforms
+including MDX, Gatsby, Storybook Docs, docz etc. Learn more about it in their
+[documentation](https://github.com/kevin940726/remark-codesandbox#remark-codesandbox).