diff --git a/src/Input/DownshiftSelect/Select.stories.tsx b/src/Input/DownshiftSelect/Select.stories.tsx
index 9f9525c7b..5a6fe4145 100644
--- a/src/Input/DownshiftSelect/Select.stories.tsx
+++ b/src/Input/DownshiftSelect/Select.stories.tsx
@@ -379,3 +379,29 @@ ConfigurableWidth.parameters = {
     },
   },
 };
+
+const SmallContainer = styled(Select.Components.Container)`
+  max-width: 200px;
+  font-size: 11px;
+`;
+
+export const Small = Template.bind({});
+Small.args = {
+  label: "I'm so small!",
+  placeholder: 'Try typing here :-P',
+  components: { Container: SmallContainer },
+  helperText: 'Why would you do this to me?',
+};
+Small.parameters = {
+  docs: {
+    description: {
+      story:
+        "<p>By default, the Select dictates a font-size of 16px that cascades through (almost) all sub-components. Appropriate spaces are defined using <code>em</code>, so if you want to resize the Select, just change the container's font-size.</p><p>The exception to the 16px default is the helper text, which also just uses an <code>em</code> relative value.</p>",
+    },
+  },
+};
+
+export const EmptyListText = Template.bind({});
+EmptyListText.args = {
+  emptyListText: '¯\\_(ツ)_/¯',
+};
diff --git a/src/Input/DownshiftSelect/Select.tsx b/src/Input/DownshiftSelect/Select.tsx
index 139642210..a72730ff8 100644
--- a/src/Input/DownshiftSelect/Select.tsx
+++ b/src/Input/DownshiftSelect/Select.tsx
@@ -13,6 +13,9 @@ export const defaultTransformFunction = (items: Item[], inputValue: string) =>
 
 export const defaultItemToString = (item: Item) => item.label;
 
+export const defaultEmptyListText =
+  'No results found. Try another keyword to search for.';
+
 export interface Components {
   Container: typeof internalComponents.Container;
   Label: typeof internalComponents.Label;
@@ -24,6 +27,7 @@ export interface Components {
   ToggleButton: typeof internalComponents.ToggleButton;
   Menu: typeof internalComponents.Menu;
   Item: typeof internalComponents.Item;
+  EmptyList: typeof internalComponents.EmptyList;
   HelperText: typeof internalComponents.HelperText;
 }
 
@@ -46,6 +50,7 @@ export type MenuProps = HTMLAttributes<HTMLElement>;
 export interface ItemProps extends HTMLAttributes<HTMLElement> {
   item: Item;
 }
+export type EmptyListProps = HTMLAttributes<HTMLElement>;
 export type HelperTextProps = HTMLAttributes<HTMLInputElement>;
 
 export interface Props extends ComboboxProps {
@@ -95,6 +100,8 @@ export interface Props extends ComboboxProps {
   // onInputValueChange?: (inputValue: string) => void;
 
   onClear?: () => void;
+
+  emptyListText?: string;
 }
 
 export const Select: React.FC<Props> & { Components: Components } = ({
@@ -117,6 +124,9 @@ export const Select: React.FC<Props> & { Components: Components } = ({
   // inputValue: inputValueExternal,
   // onInputValueChange: onInputValueChangeExternal,
   onClear,
+  onFocus: onFocusExternal,
+  onBlur: onBlurExternal,
+  emptyListText = defaultEmptyListText,
   ...props
 }) => {
   const mergedComponents = {
@@ -135,6 +145,7 @@ export const Select: React.FC<Props> & { Components: Components } = ({
     ToggleButton,
     Menu,
     Item,
+    EmptyList,
     HelperText,
   } = mergedComponents;
 
@@ -149,6 +160,7 @@ export const Select: React.FC<Props> & { Components: Components } = ({
     getMenuProps,
     getItemProps,
     reset,
+    openMenu,
   } = useCombobox<Item>({
     items: displayItems,
     onInputValueChange: ({ inputValue }) => {
@@ -191,12 +203,31 @@ export const Select: React.FC<Props> & { Components: Components } = ({
     reset();
   };
 
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const onFocusInternal = () => {
+    setIsFocused(true);
+    openMenu();
+  };
+  const onBlurInternal = () => setIsFocused(false);
+  const onFocus = () => {
+    if (isFunction(onFocusExternal)) {
+      onFocusExternal();
+    }
+    onFocusInternal();
+  };
+  const onBlur = () => {
+    if (isFunction(onBlurExternal)) {
+      onBlurExternal();
+    }
+    onBlurInternal();
+  };
+
   return (
     <Container>
       {label && (
         <Label
           {...getLabelProps()}
-          data-active={isOpen}
+          data-active={isFocused}
           data-disabled={disabled}
           data-invalid={invalid}
         >
@@ -206,11 +237,16 @@ export const Select: React.FC<Props> & { Components: Components } = ({
       <Combobox
         {...getComboboxProps()}
         data-disabled={disabled}
-        data-status={status}
         data-invalid={invalid}
+        data-active={isFocused}
       >
         <Input
-          {...getInputProps({ disabled: disabled || disableTyping, ...props })}
+          {...getInputProps({
+            disabled: disabled || disableTyping,
+            onFocus,
+            onBlur,
+            ...props,
+          })}
           placeholder={placeholder}
           aria-invalid={invalid}
           {...(helperText && { 'aria-describedBy': helperId })}
@@ -237,7 +273,7 @@ export const Select: React.FC<Props> & { Components: Components } = ({
         </IndicatorsContainer>
       </Combobox>
       <Menu {...getMenuProps()}>
-        {isOpen &&
+        {isOpen && displayItems.length > 0 ? (
           displayItems.map((item, index) => (
             <Item
               {...getItemProps({
@@ -251,7 +287,10 @@ export const Select: React.FC<Props> & { Components: Components } = ({
             >
               {defaultItemToString(item)}
             </Item>
-          ))}
+          ))
+        ) : (
+          <EmptyList>{emptyListText}</EmptyList>
+        )}
       </Menu>
       {helperText && (
         <HelperText id={helperId} data-invalid={invalid}>
diff --git a/src/Input/DownshiftSelect/SelectStyle.ts b/src/Input/DownshiftSelect/SelectStyle.ts
index 38ae19446..b17a1e2ee 100644
--- a/src/Input/DownshiftSelect/SelectStyle.ts
+++ b/src/Input/DownshiftSelect/SelectStyle.ts
@@ -9,6 +9,7 @@ import {
   IndicatorsContainerProps,
   InputProps,
   ItemProps,
+  EmptyListProps,
   LabelProps,
   LoadingIndicatorProps,
   MenuProps,
@@ -17,13 +18,13 @@ import {
 
 export const Container = styled.div<ContainerProps>`
   position: relative;
+  font-size: 16px;
 `;
 
 export const Label = styled.label<LabelProps>`
   display: block;
   margin-bottom: 8px;
   color: ${Greyscale.devilsgrey};
-  font-size: 16px;
   font-weight: 500;
 
   &[data-active='true'] {
@@ -42,17 +43,17 @@ export const Label = styled.label<LabelProps>`
 export const Combobox = styled.div<ComboboxProps>`
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-column-gap: 12px;
-  padding: 12px 16px 12px 16px;
-  border-radius: 8px;
+  grid-column-gap: 0.75em;
+  padding: 0.75em 1em 0.75em 1em;
+  border-radius: 0.5em;
   background-color: #ebf5fa;
-  font-size: 16px;
 
   :hover {
     background-color: #d6eaf2;
   }
 
-  &[aria-expanded='true'] {
+  &[aria-expanded='true'],
+  &[data-active='true'] {
     background-color: #c2e0ed;
   }
 
@@ -68,9 +69,9 @@ export const Combobox = styled.div<ComboboxProps>`
 export const Input = styled.input<InputProps>`
   border: none;
   background-color: transparent;
-  outline: none; // TODO
+  outline: none; // Okay, because the background-color changes on focus
   color: ${Greyscale.devilsgrey};
-  font-size: 16px;
+  font-size: inherit;
   text-overflow: ellipsis;
 
   &:not([value='']) {
@@ -86,9 +87,8 @@ export const IndicatorsContainer = styled.div<IndicatorsContainerProps>`
   display: flex;
   flex-direction: row;
   > :not(:last-child) {
-    margin-right: 12px;
+    margin-right: 0.75em;
   }
-  font-size: 16px;
 `;
 
 export const _IndicatorButton = styled.button`
@@ -96,7 +96,7 @@ export const _IndicatorButton = styled.button`
   border: none;
   background: none;
   color: ${Greyscale.devilsgrey};
-  font-size: 16px;
+  font-size: inherit;
 `;
 
 export const ClearButton = styled(_IndicatorButton)<LoadingIndicatorProps>``;
@@ -105,16 +105,16 @@ export const ToggleButton = styled(_IndicatorButton)<ToggleButtonProps>``;
 
 export const LoadingIndicator = styled(Loading)<LoadingIndicatorProps>`
   align-items: center;
-  font-size: 9px;
+  font-size: 0.5625em;
 `;
 
 export const Menu = styled.ul<MenuProps>`
   margin-top: 4px;
   position: absolute;
   width: 100%;
-  padding: 8px 0 8px 0;
+  padding: 0.5em 0 0.5em 0;
   border: 1px solid #eeeeee;
-  border-radius: 8px;
+  border-radius: 0.5em;
   box-shadow: ${Shadow.down3};
   background-color: white;
 
@@ -124,9 +124,8 @@ export const Menu = styled.ul<MenuProps>`
 `;
 
 export const Item = styled.li<ItemProps>`
-  padding: 8px 16px;
+  padding: 0.5em 1em;
   list-style-type: none;
-  font-size: 16px;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
@@ -144,10 +143,20 @@ export const Item = styled.li<ItemProps>`
   }
 `;
 
+export const EmptyList = styled.li<EmptyListProps>`
+  padding: 0.5em 1em;
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${Greyscale.lightgrey};
+  cursor: not-allowed;
+`;
+
 export const HelperText = styled.span<HelperTextProps>`
   margin-top: 4px;
   color: ${Greyscale.devilsgrey};
-  font-size: 14px;
+  font-size: 0.875em;
 
   &[data-invalid='true'] {
     color: ${PrimaryColor.glintsred};