diff --git a/client/src/app-components/toggle-list.js b/client/src/app-components/toggle-list.js
index 6df36dbe..f90a26ae 100644
--- a/client/src/app-components/toggle-list.js
+++ b/client/src/app-components/toggle-list.js
@@ -6,7 +6,8 @@ class ToggleList extends React.Component {
     static propTypes = {
         items: React.PropTypes.arrayOf(React.PropTypes.shape({
             content: React.PropTypes.node
-        }))
+        })),
+        onChange: React.PropTypes.func
     };
 
     state = {
@@ -42,10 +43,21 @@ class ToggleList extends React.Component {
 
     selectItem(index) {
         let actual = _.clone(this.state.selected);
-        (_.includes(this.state.selected, index)) ? (_.remove(actual, t => t == index)) : (actual.push(index));
+
+        _.includes(this.state.selected, index) ? _.remove(actual, t => t == index) : actual.push(index);
+
+        console.log(actual);
         this.setState({
             selected: actual
         });
+
+        if (this.props.onChange) {
+            this.props.onChange({
+                target: {
+                    value: actual
+                }
+            });
+        }
     }
 }
 
diff --git a/client/src/app-components/toggle-list.scss b/client/src/app-components/toggle-list.scss
index b9d73082..7bf244cb 100644
--- a/client/src/app-components/toggle-list.scss
+++ b/client/src/app-components/toggle-list.scss
@@ -5,9 +5,10 @@
     &__item {
         border: 1px $light-grey solid;
         border-left: none;
-        width: 120px;
+        width: 180px;
         height: 120px;
         display: inline-block;
+        transition: background-color 0.4s ease;
     }
 
     &__selected {
@@ -17,4 +18,4 @@
     &__first-item {
         border: 1px $light-grey solid;
     }
-}
\ No newline at end of file
+}