diff --git a/assets/css/select2-spinner.gif b/assets/css/select2-spinner.gif
deleted file mode 100644
index 5b33f7e54f..0000000000
Binary files a/assets/css/select2-spinner.gif and /dev/null differ
diff --git a/assets/css/select2.png b/assets/css/select2.png
deleted file mode 100644
index 1d804ffb99..0000000000
Binary files a/assets/css/select2.png and /dev/null differ
diff --git a/assets/css/select2x2.png b/assets/css/select2x2.png
deleted file mode 100644
index 4bdd5c961d..0000000000
Binary files a/assets/css/select2x2.png and /dev/null differ
diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl
index 2d74db8439..171e052710 100644
--- a/assets/css/src/admin.styl
+++ b/assets/css/src/admin.styl
@@ -1,6 +1,6 @@
 @import 'nib'
 
-@require 'select2/select2.css'
+@require 'select2/dist/css/select2.css'
 
 @require 'common'
 @require 'modal'
diff --git a/assets/css/src/newsletter_editor/newsletter_editor.styl b/assets/css/src/newsletter_editor/newsletter_editor.styl
index 4c814dbb5a..f1cb87c479 100644
--- a/assets/css/src/newsletter_editor/newsletter_editor.styl
+++ b/assets/css/src/newsletter_editor/newsletter_editor.styl
@@ -1,5 +1,5 @@
 // Vendor CSS
-@require 'select2/select2.css'
+@require 'select2/dist/css/select2.css'
 @require 'spectrum-colorpicker/spectrum.css'
 
 // Bootstrapping
diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 162ca84d1a..12f4f92d41 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -10,32 +10,34 @@ function(
   var Selection = React.createClass({
     getInitialState: function() {
       return {
-        items: []
+        items: [],
+        initialized: false
       }
-    },
-    componentWillMount: function() {
-
     },
     componentDidMount: function() {
       this.loadCachedItems();
     },
+    componentDidUpdate: function() {
+      this.setupSelect2();
+    },
     setupSelect2: function() {
+      if(this.state.initialized === true) {
+        return;
+      }
+
       if(this.props.field.select2 && Object.keys(this.props.item).length > 0) {
-        console.log('do it!');
-        jQuery('#'+this.props.field.id).select2({
-          width: this.props.field.width
-        }).select2(
+        var select2 = jQuery('#'+this.props.field.id).select2({
+          width: (this.props.width || '')
+        });
+
+        select2.on('change', this.handleChange)
+
+        select2.select2(
           'val',
           this.props.item[this.props.field.name]
-        ).on('change', this.handleChange);
+        );
 
-        // set values
-        /*jQuery('#'+this.props.field.id).select2(
-          'val',
-          this.props.item[this.props.field.name]
-        );*/
-
-        console.log(this.props.item[this.props.field.name]);
+        this.setState({ initialized: true });
       }
     },
     loadCachedItems: function() {
@@ -78,8 +80,6 @@ function(
           : null
         );
 
-        this.setupSelect2();
-
         return (
           <select
             id={ this.props.field.id }
diff --git a/package.json b/package.json
index 5a47dcc6eb..5d56fa002f 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react-prefixr": "0.1.0",
     "react-router": "^1.0.0-rc3",
     "react-waypoint": "1.0.4",
-    "select2": "3.5.1",
+    "select2": "^4.0.0",
     "spectrum-colorpicker": "^1.6.2",
     "tinymce": "4.1.10",
     "underscore": "1.8.3"