diff --git a/web/components/dropdown.css b/web/components/dropdown.css
--- a/web/components/dropdown.css
+++ b/web/components/dropdown.css
@@ -2,7 +2,6 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding: 20px;
 }
 
 .dropdownMenu {
@@ -41,10 +40,14 @@
   max-width: 370px;
   max-height: 200px;
   overflow-y: auto;
-  padding: 0 10px;
+  margin: 0 10px;
   list-style: none;
-  margin-top: -15px;
   width: 100%;
+  position: absolute;
+  margin-top: 48px;
+  z-index: 1;
+  background-color: var(--dropdown-option-bg);
+  box-shadow: 0px 1px 3px 0px var(--shadow-dark-35);
 }
 
 .dropdownListItem {
diff --git a/web/components/dropdown.react.js b/web/components/dropdown.react.js
--- a/web/components/dropdown.react.js
+++ b/web/components/dropdown.react.js
@@ -1,28 +1,38 @@
 // @flow
 
 import classNames from 'classnames';
-import invariant from 'invariant';
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
 
 import css from './dropdown.css';
 
-type DropdownOption = {
+export type DropdownOption = {
   +id: string,
   +name: string,
 };
 
 type DropdownProps = {
   +options: $ReadOnlyArray<DropdownOption>,
-  +activeSelection: string,
+  +activeSelection: ?string,
   +setActiveSelection: string => mixed,
+  +defaultLabel?: string,
   +disabled?: boolean,
 };
 
 function Dropdown(props: DropdownProps): React.Node {
-  const { options, activeSelection, setActiveSelection, disabled } = props;
+  const {
+    options,
+    activeSelection,
+    setActiveSelection,
+    defaultLabel,
+    disabled,
+  } = props;
+
   const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(() =>
+    options.findIndex(option => option.id === activeSelection),
+  );
 
   const dropdownMenuClassNames = classNames({
     [css.dropdownMenu]: true,
@@ -48,25 +58,20 @@
   }, [disabled, isOpen]);
 
   const handleSelection = React.useCallback(
-    (selection: DropdownOption) => {
+    (selection: DropdownOption, index: number) => {
       setActiveSelection(selection.id);
+      setSelectedIndex(index);
       setIsOpen(false);
     },
     [setActiveSelection],
   );
 
-  const activeDisplayedOption = React.useMemo(() => {
-    const activeOption = options.find(option => option.id === activeSelection);
-    invariant(activeOption, 'Active option must be in options list');
-    return activeOption.name;
-  }, [activeSelection, options]);
-
   const dropdownList = React.useMemo(() => {
     if (!isOpen) {
       return null;
     }
 
-    const dropdownOptions = options.map(option => {
+    const dropdownOptions = options.map((option, index) => {
       const checkIcon =
         option.id === activeSelection ? (
           <SWMansionIcon icon="check" size={18} />
@@ -76,7 +81,7 @@
         <li
           className={css.dropdownListItem}
           key={option.id}
-          onClick={() => handleSelection(option)}
+          onClick={() => handleSelection(option, index)}
         >
           <button className={css.dropdownListItemButton}>
             <p className={css.dropdownListDisplayText}>{option.name}</p>
@@ -89,11 +94,16 @@
     return <ul className={css.dropdownList}>{dropdownOptions}</ul>;
   }, [activeSelection, handleSelection, isOpen, options]);
 
+  const selectedOptionText =
+    selectedIndex > -1
+      ? options[selectedIndex].name
+      : defaultLabel ?? 'Select an option';
+
   return (
     <>
       <div className={css.dropdownContainer} onClick={toggleMenu}>
         <div className={dropdownMenuClassNames}>
-          <p className={dropdownTextClassNames}>{activeDisplayedOption}</p>
+          <p className={dropdownTextClassNames}>{selectedOptionText}</p>
           <div className={dropdownIconClassNames}>
             <SWMansionIcon
               icon={isOpen ? 'chevron-up' : 'chevron-down'}