diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 43df6744..f522ef73 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -6,23 +6,30 @@ const _ = require('lodash');
 class DemoPage extends React.Component {
    
     state = {
-        selectedList: []
+        selectedList: [
+            {id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
+            {id: 48, name: '123123123', content: '123123123.', color: 'blue'},
+            {id: 49, name: 'hola', content: 'hola', color: 'green'},
+        ]
     }
     
 	render() {
         let itemsList = [
-            {id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'red'},
-            {id: 46, name: 'dsafa', content: 'dsafa', color: 'red'},
+            {id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'gray'},
+            {id: 46, name: 'dsafa', content: 'dsafa', color: 'black'},
             {id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
             {id: 48, name: '123123123', content: '123123123.', color: 'blue'},
             {id: 49, name: 'hola', content: 'hola', color: 'green'},
         ];
         
         return (
-            <AutocompleteDropDown
+            <div>
+                <AutocompleteDropDown
                 items={itemsList}
                 value={this.state.selectedList}
-                onChange={selectedList => this.setState({selectedList})}/>
+                onChange={selectedList => this.setState({selectedList: selectedList})}/>
+                <button onClick={() => this.setState({selectedList: []})}>clear</button>
+            </div>
 		);
 	}
 }
diff --git a/client/src/core-components/autocomplete-dropdown.js b/client/src/core-components/autocomplete-dropdown.js
index f434011c..3a0a320e 100644
--- a/client/src/core-components/autocomplete-dropdown.js
+++ b/client/src/core-components/autocomplete-dropdown.js
@@ -10,6 +10,9 @@ class AutocompleteDropDown extends React.Component {
 
     static propTypes = {
         items: Menu.propTypes.items,
+        onChange: React.PropTypes.func,
+        value: React.PropTypes.arrayOf(React.PropTypes.shape({
+        }))
     };
 
     state = {
@@ -59,7 +62,7 @@ class AutocompleteDropDown extends React.Component {
     }
 
     renderSelectedItems() {
-        return this.state.itemsSelected.map(item => this.renderSelectedItem(item));
+        return this.getValue().map(item => this.renderSelectedItem(item));
     }
 
     renderSelectedItem(item) {
@@ -67,8 +70,8 @@ class AutocompleteDropDown extends React.Component {
     }
 
     getDropdownList() {
-        const {items} = this.props;
-        const list = this.getUnselectedList(items, this.state.itemsSelected);
+        const { items, } = this.props;
+        const list = this.getUnselectedList(items, this.getValue());
         
         return list.filter(s => _.includes(s.name, this.state.inputValue));
     }
@@ -78,23 +81,34 @@ class AutocompleteDropDown extends React.Component {
     }
 
     onRemoveClick(itemId, event) {
+        const { onChange, } = this.props;
+
         event.preventDefault();
 
         this.setState({
-            itemsSelected: this.state.itemsSelected.filter(item => item.id != itemId),
+            itemsSelected: this.getValue().filter(item => item.id != itemId),
             opened: false,
             highlightedIndex: 0,
         });
+
+        onChange && onChange(this.getValue().filter(item => item.id != itemId));
+
     }
 
     onChangeDropDown(e){
+        const { onChange, } = this.props;
+
         if (this.getDropdownList().length) {
             this.setState({
-                itemsSelected: [...this.state.itemsSelected, this.getDropdownList()[e.index]],
+                itemsSelected: [...this.getValue(), this.getDropdownList()[e.index]],
                 inputValue: "",
                 highlightedIndex: 0,
             });
+
+            onChange && onChange([...this.getValue(), this.getDropdownList()[e.index]]);
+    
         }
+
     }
 
     onChangeInput(str){        
@@ -118,17 +132,26 @@ class AutocompleteDropDown extends React.Component {
     }
 
     onKeyDown(event){
+        const { onChange, } = this.props;
+
         if (keyCode(event) === "space"){
             event.stopPropagation();
         }
 
         if (keyCode(event) === "backspace" && this.state.inputValue === ""){
             this.setState({
-                itemsSelected: this.state.itemsSelected.slice(0,this.state.itemsSelected.length-1),
+                itemsSelected: this.getValue().slice(0,this.getValue().length-1),
+                highlightedIndex: 0,
             });
 
+            onChange && onChange(this.getValue().slice(0,this.getValue().length-1));
         }
     }
+
+    getValue() {
+        return (this.props.value !== undefined) ? this.props.value : this.state.itemsSelected;
+    }
+
 }
 
 export default AutocompleteDropDown;
diff --git a/client/src/core-components/autocomplete-dropdown.scss b/client/src/core-components/autocomplete-dropdown.scss
index f7940b11..4e43c395 100644
--- a/client/src/core-components/autocomplete-dropdown.scss
+++ b/client/src/core-components/autocomplete-dropdown.scss
@@ -7,7 +7,8 @@
         background: transparent;
         outline: none;
         padding-left: 5px;
-        width: auto;
+//        width: auto;
+        width: 20px;
         max-width: 100%;
         min-width: 20px;
     }
diff --git a/client/src/core-components/drop-down.js b/client/src/core-components/drop-down.js
index e7247758..7ff010d7 100644
--- a/client/src/core-components/drop-down.js
+++ b/client/src/core-components/drop-down.js
@@ -69,7 +69,10 @@ class DropDown extends React.Component {
     }
 
     renderList({opacity, translateY}) {
-        let style = { opacity: opacity, transform: `translateY(${translateY}px)`};
+        let style = {
+            opacity: opacity,
+            transform: `translateY(${translateY}px)`
+        };
 
         return (
             <div className="drop-down__list-container" style={style}>
@@ -164,9 +167,8 @@ class DropDown extends React.Component {
                         highlightedIndex: this.modulo(highlightedIndex - 1, itemsQuantity)
                     });
 
-                    if (onHighlightedIndexChange){
-                        onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
-                    }
+                    onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
+                    
                 }
             },
             'down': () => {
@@ -177,9 +179,8 @@ class DropDown extends React.Component {
                         highlightedIndex: this.modulo(highlightedIndex + 1, itemsQuantity)
                     });
 
-                    if (onHighlightedIndexChange){
-                        onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
-                    }
+                    onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
+                    
                 }
             },
             'enter': () => {
@@ -190,9 +191,8 @@ class DropDown extends React.Component {
                         opened: true
                     });
 
-                    if (onMenuToggle) {
-                        onMenuToggle(true);
-                    }
+                    onMenuToggle && onMenuToggle(true);
+                    
                 }
             },
             'space': () => {
@@ -202,53 +202,48 @@ class DropDown extends React.Component {
                     opened: true
                 });
 
-                if (onMenuToggle) {
-                    onMenuToggle(true);
-                }
+                onMenuToggle && onMenuToggle(true);
+                
             },
             'esc': () => {
                 this.setState({
                     opened: false
                 });
 
-                if (onMenuToggle) {
-                    onMenuToggle(false);
-                }
+                onMenuToggle && onMenuToggle(false);
+                
             },
             'tab': () => {
                 if (this.getOpen()) {
                     event.preventDefault();
 
-                    if (onHighlightedIndexChange){
-                        this.onIndexSelected(highlightedIndex)
-                    }
+                    onHighlightedIndexChange && this.onIndexSelected(highlightedIndex);
+                    
                 }
             }
         };
     }
 
     handleBlur() {
-        const {onMenuToggle} = this.props;
+        const { onMenuToggle, } = this.props;
 
         this.setState({
             opened: false
         });
 
-        if (onMenuToggle) {
-            onMenuToggle(false);
-        }
+        onMenuToggle && onMenuToggle(false);
+
     }
 
     handleClick() {
-        const {onMenuToggle} = this.props;
+        const { onMenuToggle, } = this.props;
 
         this.setState({
             opened: !this.getOpen()
         });
 
-        if (onMenuToggle) {
-            onMenuToggle(!this.getOpen());
-        }
+        onMenuToggle && onMenuToggle(!this.getOpen());
+        
     }
 
     handleItemClick(index) {
@@ -268,19 +263,12 @@ class DropDown extends React.Component {
             highlightedIndex: index
         });
         
-        if (onHighlightedIndexChange){
-            onHighlightedIndexChange(index);
-        }
+        onHighlightedIndexChange && onHighlightedIndexChange(index);
+        
+        onMenuToggle && onMenuToggle(false);
 
-        if (onMenuToggle) {
-            onMenuToggle(false);
-        }
-
-        if (onChange) {
-            onChange({
-                index
-            });
-        }
+        onChange && onChange({ index });
+        
     }
 
     handleListMouseDown(event) {
@@ -288,7 +276,7 @@ class DropDown extends React.Component {
     }
 
     onAnimationFinished() {
-        const {onHighlightedIndexChange} = this.props;
+        const { onHighlightedIndexChange, } = this.props;
 
 
         if (!this.getOpen() && this.getHighlightedIndex() !== this.getSelectedIndex()) {
@@ -296,9 +284,8 @@ class DropDown extends React.Component {
                 highlightedIndex: this.getSelectedIndex(),
             });
 
-            if (onHighlightedIndexChange){
-                onHighlightedIndexChange(this.getSelectedIndex());
-            }
+            onHighlightedIndexChange && onHighlightedIndexChange(this.getSelectedIndex());
+
         }
     }
 
diff --git a/client/src/core-components/tag-selector.js b/client/src/core-components/tag-selector.js
index 9576d5cf..e432333e 100644
--- a/client/src/core-components/tag-selector.js
+++ b/client/src/core-components/tag-selector.js
@@ -13,6 +13,7 @@ class TagSelector extends React.Component {
         })),
         values: React.PropTypes.arrayOf(React.PropTypes.string),
         onRemoveClick: React.PropTypes.func,
+        onTagSelected: React.PropTypes.func,
     };
 
     render() {