diff --git a/src/client/components/dropdown/style.css b/src/client/components/dropdown/style.css
index 5922b40f..5096e2ef 100644
--- a/src/client/components/dropdown/style.css
+++ b/src/client/components/dropdown/style.css
@@ -4,7 +4,6 @@
 
 .dropdownMenu {
   position: absolute;
-  top: 100%;
   z-index: 1;
 }
 
@@ -15,3 +14,11 @@
 .dropdownMenuRight {
   right: 0;
 }
+
+.dropdownMenuUp {
+  bottom: 100%;
+}
+
+.dropdownMenuDown {
+  top: 100%;
+}
diff --git a/src/client/components/dropdown/view.tsx b/src/client/components/dropdown/view.tsx
index 38278053..bc9d5f58 100644
--- a/src/client/components/dropdown/view.tsx
+++ b/src/client/components/dropdown/view.tsx
@@ -13,6 +13,7 @@ export interface DropdownProps {
   isOpen: boolean
   isFullwidth?: boolean
   dropdownPosition?: 'left' | 'right'
+  dropDirection?: 'up' | 'down'
   onRef?(dropdown: HTMLDivElement): void
   onToggleClick?(event: MouseEvent<HTMLSpanElement>): void
 }
@@ -20,7 +21,8 @@ export interface DropdownProps {
 export const Dropdown: StatelessComponent<DropdownProps> = (props: DropdownProps) => {
   const fullwidth = props.isFullwidth ? style.dropdownMenuFullwidth : ''
   const position = props.dropdownPosition === 'right' ? style.dropdownMenuRight : ''
-  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position)
+  const direction = props.dropDirection === 'up' ? style.dropdownMenuUp : style.dropdownMenuDown
+  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position, direction)
 
   return (
     <div className={classNames([style.dropdown, props.className])} ref={props.onRef}>
diff --git a/src/client/components/robot_selector_single/plug.svg b/src/client/components/robot_selector_single/plug.svg
new file mode 100644
index 00000000..418620c1
--- /dev/null
+++ b/src/client/components/robot_selector_single/plug.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M308.6 11.7c-6.8 0-12.3 5.5-12.3 12.3v87.3h-80.6V23.9c0-6.8-5.5-12.3-12.3-12.3-6.8 0-12.3 5.5-12.3 12.3v87.3h-52.5c-6.8 0-12.3 5.5-12.3 12.3s5.5 12.2 12.3 12.2h12.2v71.7c0 40.7 23.4 76.1 57.3 93.5v40.9c0 15.6 12.7 28.3 28.3 28.3h7.2v4c0 27.7 22.5 50.2 50.2 50.2h41.4c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7H138.7c-6.8 0-12.3 5.5-12.3 12.3s5.5 12.3 12.3 12.3h196.6c27.7 0 50.2-22.5 50.2-50.2 0-27.7-22.5-50.2-50.2-50.2H294c-14.2 0-25.7-11.5-25.7-25.7v-4h7.2c15.6 0 28.3-12.7 28.3-28.3V301c34-17.4 57.3-52.7 57.3-93.5v-71.7h12.2c6.8 0 12.3-5.5 12.3-12.2s-5.5-12.3-12.3-12.3h-52.5V23.9c0-6.7-5.5-12.2-12.2-12.2zm-29.4 330.2c0 2.1-1.7 3.8-3.8 3.8h-38.8c-2.1 0-3.8-1.7-3.8-3.8v-32c7.5 1.7 15.2 2.7 23.2 2.7s15.7-1 23.2-2.7v32zm57.4-134.4c0 44.4-36.1 80.6-80.6 80.6s-80.6-36.1-80.6-80.6v-71.7h161.1v71.7z"/>
+</svg>
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/robot.svg b/src/client/components/robot_selector_single/robot.svg
new file mode 100644
index 00000000..c9f93dd6
--- /dev/null
+++ b/src/client/components/robot_selector_single/robot.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="430.117" height="430.118" viewBox="0 0 430.117 430.118">
+  <path d="M251.808 171.704c0-8.623 6.926-15.609 15.485-15.609 8.536 0 15.467 6.986 15.467 15.609 0 8.62-6.931 15.611-15.467 15.611-8.56-.004-15.485-6.995-15.485-15.611zm-48.167-132.97h-.128V60.13h19.639V39.36c6.758-3.426 11.443-10.398 11.443-18.547C234.595 9.315 225.363 0 213.96 0c-11.399 0-20.641 9.315-20.641 20.813-.004 7.693 4.173 14.323 10.322 17.921zm-42.973 148.577c8.539 0 15.469-6.991 15.469-15.614 0-8.62-6.931-15.607-15.469-15.607-8.559 0-15.485 6.987-15.485 15.607 0 8.623 6.926 15.614 15.485 15.614zm53.292 242.807c23.296 0 43.098-14.943 50.616-35.843H163.34c7.521 20.899 27.317 35.843 50.62 35.843zM52.57 366.702c0-8.261 4.807-15.336 11.724-18.696v-88.497c0-17.455 13.476-31.708 30.513-32.838v-42.825s4.145-78.05 68.534-102.328c19.126-7.208 36.588-10.123 51.718-10.671 15.141.548 32.604 3.463 51.711 10.667 64.401 24.278 68.551 102.328 68.551 102.328v42.821c17.025 1.134 30.504 15.392 30.504 32.842v88.502c6.916 3.36 11.724 10.44 11.724 18.696 0 11.49-9.241 20.806-20.638 20.806-11.397 0-20.638-9.315-20.638-20.806 0-8.261 4.812-15.336 11.714-18.696v-59.16c-3.836 1.979-8.14 3.174-12.662 3.482v20.562c.117 1.662.252 3.31.252 5.013 0 1.802-.116 3.584-.252 5.367v.476h-.022c-2.749 34.257-29.328 61.699-63.016 65.442l.028.467H157.796l.038-.467c-33.687-3.743-60.259-31.186-63.008-65.442h-.019v-.476c-.128-1.783-.252-3.565-.252-5.367 0-1.699.128-3.351.252-5.013v-20.559c-4.539-.312-8.842-1.498-12.678-3.486v59.17c6.914 3.36 11.724 10.436 11.724 18.687 0 11.5-9.239 20.811-20.643 20.811-11.393-.002-20.64-9.312-20.64-20.812zm196.932-108.846c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.941 4.485-9.941 10.016 0 5.535 4.443 10.025 9.941 10.025 5.489 0 9.932-4.49 9.932-10.025zm24.455 0c0-5.525-4.443-10.016-9.932-10.016s-9.94 4.485-9.94 10.016c0 5.535 4.452 10.025 9.94 10.025s9.932-4.49 9.932-10.025zm24.465 0c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.94 4.485-9.94 10.016 0 5.535 4.442 10.025 9.94 10.025 5.489 0 9.932-4.49 9.932-10.025zm-166.997-83.261c0 26.591 20.64 28.33 20.64 28.33 7.183 2.289 22.362 1.153 29.23 0 6.321-1.076 29.515-3.097 33.208-3.426.141.014.364.038.551.046.196-.009.416-.032.546-.046 3.697.324 26.883 2.35 33.211 3.426 6.88 1.153 22.048 2.289 29.235 0 0 0 20.633-1.734 20.633-28.33 0 0 0-29.486-20.633-47.408-20.013-17.382-50.092-21.153-61.896-21.377v-.019c-.168 0-.373.014-.551.014-.172 0-.387-.014-.546-.014-.168 0-.378.014-.551.014-.175 0-.385-.014-.548-.014v.019c-11.792.224-41.88 3.995-61.89 21.377-20.639 17.922-20.639 47.408-20.639 47.408z"/>
+</svg>
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx b/src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx
new file mode 100644
index 00000000..5d08cb6c
--- /dev/null
+++ b/src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx
@@ -0,0 +1,80 @@
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+import { action as mobxAction, observable } from 'mobx'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import { RobotModel } from '../../robot/model'
+import { RobotSelectorSingle } from '../view'
+
+const actions = {
+  onSelect: action('onSelect'),
+}
+
+storiesOf('components.robot_selector_single', module)
+  .addDecorator(story => <div style={{ maxWidth: '320px' }}>{story()}</div>)
+  .add('renders empty', () => {
+    return <RobotSelectorSingle
+      robots={[]}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('renders with robots', () => {
+    const robots = getRobots()
+    return <RobotSelectorSingle
+      robots={robots}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('renders with selection', () => {
+    const robots = getRobots()
+    const selected = robots[0]
+    return <RobotSelectorSingle
+      robots={robots}
+      selected={selected}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('interactive', () => {
+    const robots = getRobots()
+    const model = observable({
+      robots,
+      selected: robots[1],
+    })
+    const onSelect = mobxAction((robot: RobotModel) => model.selected = robot)
+    const Component = observer(() => <RobotSelectorSingle
+      robots={model.robots}
+      selected={model.selected}
+      onSelect={onSelect}
+    />)
+    return <Component/>
+  })
+
+function getRobots(): RobotModel[] {
+  return [
+    {
+      id: '1',
+      name: 'Virtual Robot 1',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+    {
+      id: '2',
+      name: 'Virtual Robot 2',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+    {
+      id: '3',
+      name: 'Virtual Robot 3',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+  ]
+}
diff --git a/src/client/components/robot_selector_single/style.css b/src/client/components/robot_selector_single/style.css
new file mode 100644
index 00000000..335b5f9c
--- /dev/null
+++ b/src/client/components/robot_selector_single/style.css
@@ -0,0 +1,30 @@
+.empty {
+  color: #888;
+  padding: 1em;
+  text-align: center;
+}
+
+.emptyIcon {
+  background-color: #888;
+  border-radius: 100%;
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.2),
+    1px 1px 4px 0 rgba(0,0,0,0.2);
+  fill: #fff;
+  height: 3em;
+  margin: 0 auto 1em auto;
+  opacity: 0.8;
+  padding: 1em;
+  width: 3em;
+}
+
+.emptyTitle {
+  font-size: 1.54em;
+  padding: 0.25em 0;
+  white-space: nowrap;
+}
+
+.emptyDescription {
+  font-size: 0.93em;
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/view.tsx b/src/client/components/robot_selector_single/view.tsx
new file mode 100644
index 00000000..173be3f1
--- /dev/null
+++ b/src/client/components/robot_selector_single/view.tsx
@@ -0,0 +1,67 @@
+import { computed } from 'mobx'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import { RobotModel } from '../robot/model'
+import { Option, Select } from '../select/view'
+
+import PlugIcon from './plug.svg'
+import RobotIcon from './robot.svg'
+import * as style from './style.css'
+
+export type RobotSelectorSingleProps = {
+  robots: RobotModel[]
+  selected?: RobotModel
+  dropDirection?: 'up' | 'down'
+  onSelect(robot: RobotModel): void
+}
+
+@observer
+export class RobotSelectorSingle extends React.Component<RobotSelectorSingleProps> {
+  render() {
+    const { dropDirection } = this.props
+    return <div className={style.robotSelector}>
+      <Select
+        options={this.options}
+        selectedOption={this.selectedOption}
+        onChange={this.onChange}
+        placeholder='Select a robot...'
+        empty={this.renderEmpty}
+        icon={<RobotIcon/>}
+        dropDirection={dropDirection}
+      />
+    </div>
+  }
+
+  @computed
+  private get renderEmpty() {
+    return <div className={style.empty}>
+      <div className={style.emptyIcon}><PlugIcon/></div>
+      <div className={style.emptyTitle}>No connected robots</div>
+      <span className={style.emptyDescription}>Run yarn start:sim to simulate robots</span>
+    </div>
+  }
+
+  @computed
+  private get options() {
+    return this.props.robots.map(robot => ({
+      id: robot.id,
+      label: robot.name,
+      robot,
+    }))
+  }
+
+  @computed
+  private get selectedOption() {
+    if (this.props.selected) {
+      return {
+        id: this.props.selected.id,
+        label: this.props.selected.name,
+      }
+    }
+  }
+
+  private onChange = (option: Option) => {
+    this.props.onSelect(this.props.robots.find(robot => robot.id === option.id)!)
+  }
+}
diff --git a/src/client/components/select/view.tsx b/src/client/components/select/view.tsx
index a3a8b346..e1b3a74a 100644
--- a/src/client/components/select/view.tsx
+++ b/src/client/components/select/view.tsx
@@ -24,6 +24,7 @@ export type SelectProps = {
   selectedOption?: Option
   icon?: ReactNode
   empty?: ReactNode
+  dropDirection?: 'up' | 'down'
   onChange(option: Option): void
 }
 
@@ -48,7 +49,7 @@ export class Select extends React.Component<SelectProps> {
   }
 
   render(): JSX.Element {
-    const { className, icon, placeholder, empty, options, selectedOption } = this.props
+    const { className, icon, placeholder, dropDirection, empty, options, selectedOption } = this.props
 
     const button = (
       <Button
@@ -64,6 +65,7 @@ export class Select extends React.Component<SelectProps> {
       <Dropdown
         className={className}
         dropdownToggle={button}
+        dropDirection={dropDirection}
         isOpen={this.isOpen}
         isFullwidth={true}
         onToggleClick={this.onToggleClick}