diff --git a/client/src/app-components/toggle-list.js b/client/src/app-components/toggle-list.js
new file mode 100644
index 00000000..6df36dbe
--- /dev/null
+++ b/client/src/app-components/toggle-list.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import _ from 'lodash';
+import classNames from 'classnames';
+
+class ToggleList extends React.Component {
+ static propTypes = {
+ items: React.PropTypes.arrayOf(React.PropTypes.shape({
+ content: React.PropTypes.node
+ }))
+ };
+
+ state = {
+ selected: [1, 3]
+ };
+
+ render() {
+ return (
+
+ {this.props.items.map(this.renderItem.bind(this))}
+
+ );
+ }
+
+ renderItem(obj, index) {
+
+ return (
+
+ {obj.content}
+
+ );
+ }
+
+ getItemClass(index) {
+ let classes = {
+ 'toggle-list__item': true,
+ 'toggle-list__first-item': (index === 0),
+ 'toggle-list__selected': (_.includes(this.state.selected, index))
+ };
+
+ return classNames(classes);
+ }
+
+ selectItem(index) {
+ let actual = _.clone(this.state.selected);
+ (_.includes(this.state.selected, index)) ? (_.remove(actual, t => t == index)) : (actual.push(index));
+ this.setState({
+ selected: actual
+ });
+ }
+}
+
+export default ToggleList;
diff --git a/client/src/app-components/toggle-list.scss b/client/src/app-components/toggle-list.scss
new file mode 100644
index 00000000..b9d73082
--- /dev/null
+++ b/client/src/app-components/toggle-list.scss
@@ -0,0 +1,20 @@
+@import "../scss/vars";
+
+.toggle-list {
+
+ &__item {
+ border: 1px $light-grey solid;
+ border-left: none;
+ width: 120px;
+ height: 120px;
+ display: inline-block;
+ }
+
+ &__selected {
+ background-color: $light-grey;
+ }
+
+ &__first-item {
+ border: 1px $light-grey solid;
+ }
+}
\ No newline at end of file