diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 7f51284179..c04f961d75 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { remSize, prop } from '../theme';
 import IconButton from '../common/IconButton';
 
-const DropdownWrapper = styled.ul`
+export const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};
   border: 1px solid ${prop('Modal.border')};
   box-shadow: 0 0 18px 0 ${prop('shadowColor')};
@@ -52,6 +52,7 @@ const DropdownWrapper = styled.ul`
     & button span,
     & a {
       padding: ${remSize(8)} ${remSize(16)};
+      font-size: ${remSize(12)};
     }
 
     * {
diff --git a/client/components/Dropdown/DropdownMenu.jsx b/client/components/Dropdown/DropdownMenu.jsx
new file mode 100644
index 0000000000..da41b30101
--- /dev/null
+++ b/client/components/Dropdown/DropdownMenu.jsx
@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import useModalClose from '../../common/useModalClose';
+import DownArrowIcon from '../../images/down-filled-triangle.svg';
+import { DropdownWrapper } from '../Dropdown';
+
+// TODO: enable arrow keys to navigate options from list
+
+const DropdownMenu = forwardRef(
+  (
+    { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+    ref
+  ) => {
+    // Note: need to use a ref instead of a state to avoid stale closures.
+    const focusedRef = useRef(false);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+    const anchorRef = useModalClose(close, ref);
+
+    const toggle = useCallback(() => {
+      setIsOpen((prevState) => !prevState);
+    }, [setIsOpen]);
+
+    const handleFocus = () => {
+      focusedRef.current = true;
+    };
+
+    const handleBlur = () => {
+      focusedRef.current = false;
+      setTimeout(() => {
+        if (!focusedRef.current) {
+          close();
+        }
+      }, 200);
+    };
+
+    return (
+      <div ref={anchorRef} className={className}>
+        <button
+          className={classes.button}
+          aria-label={ariaLabel}
+          tabIndex="0"
+          onClick={toggle}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        >
+          {anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
+        </button>
+        {isOpen && (
+          <DropdownWrapper
+            className={classes.list}
+            align={align}
+            onMouseUp={() => {
+              setTimeout(close, 0);
+            }}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          >
+            {children}
+          </DropdownWrapper>
+        )}
+      </div>
+    );
+  }
+);
+
+DropdownMenu.propTypes = {
+  /**
+   * Provide <MenuItem> elements as children to control the contents of the menu.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Can optionally override the contents of the button which opens the menu.
+   * Defaults to <DownArrowIcon>
+   */
+  anchor: PropTypes.node,
+  'aria-label': PropTypes.string.isRequired,
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    button: PropTypes.string,
+    list: PropTypes.string
+  })
+};
+
+DropdownMenu.defaultProps = {
+  anchor: null,
+  align: 'right',
+  className: '',
+  classes: {}
+};
+
+export default DropdownMenu;
diff --git a/client/components/Dropdown/MenuItem.jsx b/client/components/Dropdown/MenuItem.jsx
new file mode 100644
index 0000000000..8b6f6d7247
--- /dev/null
+++ b/client/components/Dropdown/MenuItem.jsx
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ButtonOrLink from '../../common/ButtonOrLink';
+
+// TODO: combine with NavMenuItem
+
+function MenuItem({ hideIf, ...rest }) {
+  if (hideIf) {
+    return null;
+  }
+
+  return (
+    <li>
+      <ButtonOrLink {...rest} />
+    </li>
+  );
+}
+
+MenuItem.propTypes = {
+  ...ButtonOrLink.propTypes,
+  onClick: PropTypes.func,
+  value: PropTypes.string,
+  /**
+   * Provides a way to deal with optional items.
+   */
+  hideIf: PropTypes.bool
+};
+
+MenuItem.defaultProps = {
+  onClick: null,
+  value: null,
+  hideIf: false
+};
+
+export default MenuItem;
diff --git a/client/components/Dropdown/TableDropdown.jsx b/client/components/Dropdown/TableDropdown.jsx
new file mode 100644
index 0000000000..d4db78f963
--- /dev/null
+++ b/client/components/Dropdown/TableDropdown.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { useMediaQuery } from 'react-responsive';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+import DropdownMenu from './DropdownMenu';
+
+import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../images/more.svg';
+
+const DotsHorizontal = styled(MoreIconSvg)`
+  transform: rotate(90deg);
+`;
+
+const TableDropdownIcon = () => {
+  // TODO: centralize breakpoints
+  const isMobile = useMediaQuery({ maxWidth: 770 });
+
+  return isMobile ? (
+    <DotsHorizontal focusable="false" aria-hidden="true" />
+  ) : (
+    <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+  );
+};
+
+const TableDropdown = styled(DropdownMenu).attrs({
+  align: 'right',
+  anchor: <TableDropdownIcon />
+})`
+  & > button {
+    width: ${remSize(25)};
+    height: ${remSize(25)};
+    padding: 0;
+    & svg {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    & polygon,
+    & path {
+      fill: ${prop('inactiveTextColor')};
+    }
+  }
+  & ul {
+    top: 63%;
+    right: calc(100% - 26px);
+  }
+`;
+
+export default TableDropdown;
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index 5b3c600688..720f21734b 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -1,130 +1,68 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
-import { withTranslation } from 'react-i18next';
+import { useTranslation, withTranslation } from 'react-i18next';
+import MenuItem from '../../../components/Dropdown/MenuItem';
+import TableDropdown from '../../../components/Dropdown/TableDropdown';
 
 import Loader from '../../App/components/loader';
+import { deleteAssetRequest } from '../actions/assets';
 import * as AssetActions from '../actions/assets';
-import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
-class AssetListRowBase extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isFocused: false,
-      optionsOpen: false
-    };
-  }
-
-  onFocusComponent = () => {
-    this.setState({ isFocused: true });
-  };
-
-  onBlurComponent = () => {
-    this.setState({ isFocused: false });
-    setTimeout(() => {
-      if (!this.state.isFocused) {
-        this.closeOptions();
-      }
-    }, 200);
-  };
-
-  openOptions = () => {
-    this.setState({
-      optionsOpen: true
-    });
-  };
+const AssetMenu = ({ item: asset }) => {
+  const { t } = useTranslation();
 
-  closeOptions = () => {
-    this.setState({
-      optionsOpen: false
-    });
-  };
+  const dispatch = useDispatch();
 
-  toggleOptions = () => {
-    if (this.state.optionsOpen) {
-      this.closeOptions();
-    } else {
-      this.openOptions();
+  const handleAssetDelete = () => {
+    const { key, name } = asset;
+    if (window.confirm(t('Common.DeleteConfirmation', { name }))) {
+      dispatch(deleteAssetRequest(key));
     }
   };
 
-  handleDropdownOpen = () => {
-    this.closeOptions();
-    this.openOptions();
-  };
+  return (
+    <TableDropdown aria-label={t('AssetList.ToggleOpenCloseARIA')}>
+      <MenuItem onClick={handleAssetDelete}>{t('AssetList.Delete')}</MenuItem>
+      <MenuItem href={asset.url} target="_blank">
+        {t('AssetList.OpenNewTab')}
+      </MenuItem>
+    </TableDropdown>
+  );
+};
 
-  handleAssetDelete = () => {
-    const { key, name } = this.props.asset;
-    this.closeOptions();
-    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name }))) {
-      this.props.deleteAssetRequest(key);
-    }
-  };
+AssetMenu.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired
+};
 
-  render() {
-    const { asset, username, t } = this.props;
-    const { optionsOpen } = this.state;
-    return (
-      <tr className="asset-table__row" key={asset.key}>
-        <th scope="row">
-          <Link to={asset.url} target="_blank">
-            {asset.name}
-          </Link>
-        </th>
-        <td>{prettyBytes(asset.size)}</td>
-        <td>
-          {asset.sketchId && (
-            <Link to={`/${username}/sketches/${asset.sketchId}`}>
-              {asset.sketchName}
-            </Link>
-          )}
-        </td>
-        <td className="asset-table__dropdown-column">
-          <button
-            className="asset-table__dropdown-button"
-            onClick={this.toggleOptions}
-            onBlur={this.onBlurComponent}
-            onFocus={this.onFocusComponent}
-            aria-label={t('AssetList.ToggleOpenCloseARIA')}
-          >
-            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
-          </button>
-          {optionsOpen && (
-            <ul className="asset-table__action-dialogue">
-              <li>
-                <button
-                  className="asset-table__action-option"
-                  onClick={this.handleAssetDelete}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {t('AssetList.Delete')}
-                </button>
-              </li>
-              <li>
-                <a
-                  href={asset.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                  className="asset-table__action-option"
-                >
-                  {t('AssetList.OpenNewTab')}
-                </a>
-              </li>
-            </ul>
-          )}
-        </td>
-      </tr>
-    );
-  }
-}
+const AssetListRowBase = ({ asset, username }) => (
+  <tr className="asset-table__row" key={asset.key}>
+    <th scope="row">
+      <a href={asset.url} target="_blank" rel="noopener noreferrer">
+        {asset.name}
+      </a>
+    </th>
+    <td>{prettyBytes(asset.size)}</td>
+    <td>
+      {asset.sketchId && (
+        <Link to={`/${username}/sketches/${asset.sketchId}`}>
+          {asset.sketchName}
+        </Link>
+      )}
+    </td>
+    <td className="asset-table__dropdown-column">
+      <AssetMenu item={asset} />
+    </td>
+  </tr>
+);
 
 AssetListRowBase.propTypes = {
   asset: PropTypes.shape({
@@ -135,9 +73,7 @@ AssetListRowBase.propTypes = {
     name: PropTypes.string.isRequired,
     size: PropTypes.number.isRequired
   }).isRequired,
-  deleteAssetRequest: PropTypes.func.isRequired,
-  username: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired
+  username: PropTypes.string.isRequired
 };
 
 function mapStateToPropsAssetListRow(state) {
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 16421f7a6b..1d52163230 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -4,88 +4,38 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import MenuItem from '../../../../components/Dropdown/MenuItem';
+import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
 
-import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
-import MoreIconSvg from '../../../../images/more.svg';
-
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
 class CollectionListRowBase extends React.Component {
-  static projectInCollection(project, collection) {
-    return (
-      collection.items.find((item) => item.project.id === project.id) != null
-    );
-  }
-
   constructor(props) {
     super(props);
     this.state = {
-      optionsOpen: false,
-      isFocused: false,
       renameOpen: false,
       renameValue: ''
     };
     this.renameInput = React.createRef();
   }
 
-  onFocusComponent = () => {
-    this.setState({ isFocused: true });
-  };
-
-  onBlurComponent = () => {
-    this.setState({ isFocused: false });
-    setTimeout(() => {
-      if (!this.state.isFocused) {
-        this.closeAll();
-      }
-    }, 200);
-  };
-
-  openOptions = () => {
-    this.setState({
-      optionsOpen: true
-    });
-  };
-
-  closeOptions = () => {
-    this.setState({
-      optionsOpen: false
-    });
-  };
-
-  toggleOptions = () => {
-    if (this.state.optionsOpen) {
-      this.closeOptions();
-    } else {
-      this.openOptions();
-    }
-  };
-
   closeAll = () => {
     this.setState({
-      optionsOpen: false,
       renameOpen: false
     });
   };
 
   handleAddSketches = () => {
-    this.closeAll();
     this.props.onAddSketches();
   };
 
-  handleDropdownOpen = () => {
-    this.closeAll();
-    this.openOptions();
-  };
-
   handleCollectionDelete = () => {
-    this.closeAll();
     if (
       window.confirm(
         this.props.t('Common.DeleteConfirmation', {
@@ -98,7 +48,6 @@ class CollectionListRowBase extends React.Component {
   };
 
   handleRenameOpen = () => {
-    this.closeAll();
     this.setState(
       {
         renameOpen: true,
@@ -136,65 +85,24 @@ class CollectionListRowBase extends React.Component {
   };
 
   renderActions = () => {
-    const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
 
     return (
-      <React.Fragment>
-        <button
-          className="sketch-list__dropdown-button"
-          onClick={this.toggleOptions}
-          onBlur={this.onBlurComponent}
-          onFocus={this.onFocusComponent}
-          aria-label={this.props.t(
-            'CollectionListRow.ToggleCollectionOptionsARIA'
-          )}
-        >
-          {this.props.mobile ? (
-            <MoreIconSvg focusable="false" aria-hidden="true" />
-          ) : (
-            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
-          )}
-        </button>
-        {optionsOpen && (
-          <ul className="sketch-list__action-dialogue">
-            <li>
-              <button
-                className="sketch-list__action-option"
-                onClick={this.handleAddSketches}
-                onBlur={this.onBlurComponent}
-                onFocus={this.onFocusComponent}
-              >
-                {this.props.t('CollectionListRow.AddSketch')}
-              </button>
-            </li>
-            {userIsOwner && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleCollectionDelete}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('CollectionListRow.Delete')}
-                </button>
-              </li>
-            )}
-            {userIsOwner && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleRenameOpen}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('CollectionListRow.Rename')}
-                </button>
-              </li>
-            )}
-          </ul>
+      <TableDropdown
+        aria-label={this.props.t(
+          'CollectionListRow.ToggleCollectionOptionsARIA'
         )}
-      </React.Fragment>
+      >
+        <MenuItem onClick={this.handleAddSketches}>
+          {this.props.t('CollectionListRow.AddSketch')}
+        </MenuItem>
+        <MenuItem hideIf={!userIsOwner} onClick={this.handleCollectionDelete}>
+          {this.props.t('CollectionListRow.Delete')}
+        </MenuItem>
+        <MenuItem hideIf={!userIsOwner} onClick={this.handleRenameOpen}>
+          {this.props.t('CollectionListRow.Rename')}
+        </MenuItem>
+      </TableDropdown>
     );
   };
 
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index bce30da1dc..85d3030d61 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 import slugify from 'slugify';
+import MenuItem from '../../../components/Dropdown/MenuItem';
+import TableDropdown from '../../../components/Dropdown/TableDropdown';
 import dates from '../../../utils/formatDate';
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
@@ -22,8 +24,6 @@ import getConfig from '../../../utils/getConfig';
 
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
-import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
-import MoreIconSvg from '../../../images/more.svg';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -34,47 +34,12 @@ class SketchListRowBase extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      optionsOpen: false,
       renameOpen: false,
-      renameValue: props.sketch.name,
-      isFocused: false
+      renameValue: props.sketch.name
     };
     this.renameInput = React.createRef();
   }
 
-  onFocusComponent = () => {
-    this.setState({ isFocused: true });
-  };
-
-  onBlurComponent = () => {
-    this.setState({ isFocused: false });
-    setTimeout(() => {
-      if (!this.state.isFocused) {
-        this.closeAll();
-      }
-    }, 200);
-  };
-
-  openOptions = () => {
-    this.setState({
-      optionsOpen: true
-    });
-  };
-
-  closeOptions = () => {
-    this.setState({
-      optionsOpen: false
-    });
-  };
-
-  toggleOptions = () => {
-    if (this.state.optionsOpen) {
-      this.closeOptions();
-    } else {
-      this.openOptions();
-    }
-  };
-
   openRename = () => {
     this.setState(
       {
@@ -91,13 +56,6 @@ class SketchListRowBase extends React.Component {
     });
   };
 
-  closeAll = () => {
-    this.setState({
-      renameOpen: false,
-      optionsOpen: false
-    });
-  };
-
   handleRenameChange = (e) => {
     this.setState({
       renameValue: e.target.value
@@ -107,13 +65,13 @@ class SketchListRowBase extends React.Component {
   handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
       this.updateName();
-      this.closeAll();
+      this.closeRename();
     }
   };
 
   handleRenameBlur = () => {
     this.updateName();
-    this.closeAll();
+    this.closeRename();
   };
 
   updateName = () => {
@@ -126,23 +84,6 @@ class SketchListRowBase extends React.Component {
     }
   };
 
-  resetSketchName = () => {
-    this.setState({
-      renameValue: this.props.sketch.name,
-      renameOpen: false
-    });
-  };
-
-  handleDropdownOpen = () => {
-    this.closeAll();
-    this.openOptions();
-  };
-
-  handleRenameOpen = () => {
-    this.closeAll();
-    this.openRename();
-  };
-
   handleSketchDownload = () => {
     const { sketch } = this.props;
     const downloadLink = document.createElement('a');
@@ -154,12 +95,10 @@ class SketchListRowBase extends React.Component {
   };
 
   handleSketchDuplicate = () => {
-    this.closeAll();
     this.props.cloneProject(this.props.sketch);
   };
 
   handleSketchShare = () => {
-    this.closeAll();
     this.props.showShareModal(
       this.props.sketch.id,
       this.props.sketch.name,
@@ -168,7 +107,6 @@ class SketchListRowBase extends React.Component {
   };
 
   handleSketchDelete = () => {
-    this.closeAll();
     if (
       window.confirm(
         this.props.t('Common.DeleteConfirmation', {
@@ -180,106 +118,42 @@ class SketchListRowBase extends React.Component {
     }
   };
 
-  renderViewButton = (sketchURL) => (
-    <td className="sketch-list__dropdown-column">
-      <Link to={sketchURL}>{this.props.t('SketchList.View')}</Link>
-    </td>
-  );
-
   renderDropdown = () => {
-    const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
 
     return (
       <td className="sketch-list__dropdown-column">
-        <button
-          className="sketch-list__dropdown-button"
-          onClick={this.toggleOptions}
-          onBlur={this.onBlurComponent}
-          onFocus={this.onFocusComponent}
-          aria-label={this.props.t('SketchList.ToggleLabelARIA')}
-        >
-          {this.props.mobile ? (
-            <MoreIconSvg focusable="false" aria-hidden="true" />
-          ) : (
-            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
-          )}
-        </button>
-        {optionsOpen && (
-          <ul className="sketch-list__action-dialogue">
-            {userIsOwner && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleRenameOpen}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('SketchList.DropdownRename')}
-                </button>
-              </li>
-            )}
-            <li>
-              <button
-                className="sketch-list__action-option"
-                onClick={this.handleSketchDownload}
-                onBlur={this.onBlurComponent}
-                onFocus={this.onFocusComponent}
-              >
-                {this.props.t('SketchList.DropdownDownload')}
-              </button>
-            </li>
-            {this.props.user.authenticated && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchDuplicate}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('SketchList.DropdownDuplicate')}
-                </button>
-              </li>
-            )}
-            {this.props.user.authenticated && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={() => {
-                    this.props.onAddToCollection();
-                    this.closeAll();
-                  }}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('SketchList.DropdownAddToCollection')}
-                </button>
-              </li>
-            )}
-            {/* <li>
-              <button
-                className="sketch-list__action-option"
-                onClick={this.handleSketchShare}
-                onBlur={this.onBlurComponent}
-                onFocus={this.onFocusComponent}
-              >
-                Share
-              </button>
-            </li> */}
-            {userIsOwner && (
-              <li>
-                <button
-                  className="sketch-list__action-option"
-                  onClick={this.handleSketchDelete}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('SketchList.DropdownDelete')}
-                </button>
-              </li>
-            )}
-          </ul>
-        )}
+        <TableDropdown aria-label={this.props.t('SketchList.ToggleLabelARIA')}>
+          <MenuItem hideIf={!userIsOwner} onClick={this.openRename}>
+            {this.props.t('SketchList.DropdownRename')}
+          </MenuItem>
+          <MenuItem onClick={this.handleSketchDownload}>
+            {this.props.t('SketchList.DropdownDownload')}
+          </MenuItem>
+          <MenuItem
+            hideIf={!this.props.user.authenticated}
+            onClick={this.handleSketchDuplicate}
+          >
+            {this.props.t('SketchList.DropdownDuplicate')}
+          </MenuItem>
+          <MenuItem
+            hideIf={!this.props.user.authenticated}
+            onClick={() => {
+              this.props.onAddToCollection();
+            }}
+          >
+            {this.props.t('SketchList.DropdownAddToCollection')}
+          </MenuItem>
+
+          {/*
+          <MenuItem onClick={this.handleSketchShare}>
+            Share
+          </MenuItem>
+            */}
+          <MenuItem hideIf={!userIsOwner} onClick={this.handleSketchDelete}>
+            {this.props.t('SketchList.DropdownDelete')}
+          </MenuItem>
+        </TableDropdown>
       </td>
     );
   };
diff --git a/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap b/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
index bd7475ebf9..051c95be19 100644
--- a/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
+++ b/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
@@ -2,7 +2,28 @@
 
 exports[`<Sketchlist /> snapshot testing 1`] = `
 <DocumentFragment>
-  <article
+  .c0 > button {
+  width: 2.0833333333333335rem;
+  height: 2.0833333333333335rem;
+  padding: 0;
+}
+
+.c0 > button svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.c0 > button polygon,
+.c0 > button path {
+  fill: #666;
+}
+
+.c0 ul {
+  top: 63%;
+  right: calc(100% - 26px);
+}
+
+<article
     class="sketches-table-container"
   >
     <table
@@ -85,15 +106,19 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
           <td
             class="sketch-list__dropdown-column"
           >
-            <button
-              aria-label="Toggle Open/Close Sketch Options"
-              class="sketch-list__dropdown-button"
+            <div
+              class="c0"
             >
-              <test-file-stub
-                aria-hidden="true"
-                focusable="false"
-              />
-            </button>
+              <button
+                aria-label="Toggle Open/Close Sketch Options"
+                tabindex="0"
+              >
+                <test-file-stub
+                  aria-hidden="true"
+                  focusable="false"
+                />
+              </button>
+            </div>
           </td>
         </tr>
         <tr
@@ -117,15 +142,19 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
           <td
             class="sketch-list__dropdown-column"
           >
-            <button
-              aria-label="Toggle Open/Close Sketch Options"
-              class="sketch-list__dropdown-button"
+            <div
+              class="c0"
             >
-              <test-file-stub
-                aria-hidden="true"
-                focusable="false"
-              />
-            </button>
+              <button
+                aria-label="Toggle Open/Close Sketch Options"
+                tabindex="0"
+              >
+                <test-file-stub
+                  aria-hidden="true"
+                  focusable="false"
+                />
+              </button>
+            </div>
           </td>
         </tr>
       </tbody>
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 6f7c035993..7d8f6065e8 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -76,24 +76,3 @@
     background-color: getThemifyVariable('background-color');
   }
 }
-
-.asset-table__dropdown-button {
-  width:#{25 / $base-font-size}rem;
-  height:#{25 / $base-font-size}rem;
-
-  @include themify() {
-    & polygon, & path {
-      fill: getThemifyVariable('inactive-text-color');
-    }
-  }
-}
-
-.asset-table__action-dialogue {
-  @extend %dropdown-open-right;
-  top: 63%;
-  right: calc(100% - 26px);
-}
-
-.asset-table__action-option {
-  font-size: #{12 / $base-font-size}rem;
-}
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 69d41bdca4..c577552aea 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -58,14 +58,9 @@
           .sketch-list__dropdown-column {
             position: absolute;
             top: 0;
-            right: 0;
+            right: #{4 / $base-font-size}rem;
             width: auto;
             margin: #{8 / $base-font-size}rem;
-
-            .sketch-list__dropdown-button {
-              transform: rotateZ(90deg) translateX(-30%);
-              transform-origin: center;
-            }
           }
         }
       }
@@ -169,17 +164,6 @@
   font-weight: normal;
 }
 
-.sketch-list__dropdown-button {
-  width: #{25 / $base-font-size}rem;
-  height: #{25 / $base-font-size}rem;
-  @include themify() {
-    & polygon,
-    & path {
-      fill: getThemifyVariable("inactive-text-color");
-    }
-  }
-}
-
 .sketches-table__name {
   display: flex;
   align-items: center;
@@ -189,12 +173,6 @@
   width: #{35 / $base-font-size}rem;
 }
 
-.sketch-list__action-dialogue {
-  @extend %dropdown-open-right;
-  top: 63%;
-  right: calc(100% - 26px);
-}
-
 .sketches-table__empty {
   text-align: center;
   font-size: #{16 / $base-font-size}rem;