diff --git a/app/pods/components/x-select/component.js b/app/pods/components/x-select/component.js
index c5ce421..681597b 100644
--- a/app/pods/components/x-select/component.js
+++ b/app/pods/components/x-select/component.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-const { Component } = Ember;
+const { Component, get, run: { schedule } } = Ember;
 
 export default Component.extend({
   tagName: 'select',
@@ -11,24 +11,43 @@ export default Component.extend({
   options: null,
   selected: null,
   nameAttr: null,
+  placeholder: null,
 
   change: function() {
-    this.attrs.update(this.$().select2('val'));
-  },
+    let selectedInComponent = this.get('selected');
+    let selectedInWidget = this.$().val();
 
-  didInsertElement: function() {
-    if (this.get('placeholder')) {
-      this.$().select2({
-        placeholder: this.get('placeholder'),
-      });
-    } else {
-      this.$().select2();
+    if (this.get('multiple')) {
+      if (selectedInWidget === null) {
+        selectedInWidget = [];
+      }
+      selectedInComponent = selectedInComponent.toString();
+      selectedInWidget = selectedInWidget.toString();
+    }
+
+    // We need this to prevent an infinite loop of afterRender -> change.
+    if (selectedInComponent !== selectedInWidget) {
+      this.attrs.update(this.$().val());
     }
   },
 
+  didInsertElement: function() {
+    let options = {};
+    options.placeholder = this.get('placeholder');
+    options.templateResult = function(item) {
+      if (!item.disabled) {
+        const text = get(item, 'element.innerHTML');
+        const $item = Ember.$(`<span>${text}</span>`);
+        return $item;
+      }
+    };
+    this.$().select2(options);
+  },
+
   didRender: function() {
-    Ember.run.schedule('afterRender', this, function() {
-      this.$().select2('val', this.get('selected'));
+    const selected = this.get('selected');
+    schedule('afterRender', this, function() {
+      this.$().val(selected).trigger('change');
     });
   },
 
diff --git a/bower.json b/bower.json
index ff11baa..98f5857 100644
--- a/bower.json
+++ b/bower.json
@@ -14,7 +14,7 @@
     "qunit": "~1.20.0",
     "flakes": "~1.0.0",
     "moment": "~2.10.6",
-    "select2": "3.5.2",
+    "select2": "4.0.1-rc.1",
     "antiscroll": "git://github.com/azirbel/antiscroll.git#90391fb371c7be769bc32e7287c5271981428356",
     "jquery-mousewheel": "~3.1.4",
     "jquery-ui": "~1.11.4",
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 15b7ef2..b595f9e 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -15,7 +15,7 @@ module.exports = function(defaults) {
   app.import('bower_components/quill/dist/quill.base.css');
   app.import('bower_components/quill/dist/quill.snow.css');
   // select2
-  app.import('bower_components/select2/select2.css');
+  app.import('bower_components/select2/dist/css/select2.min.css');
 
   // LIBS ////////////////////////////////////////////////////////////////////////
   // flakes (and deps)
@@ -28,13 +28,7 @@ module.exports = function(defaults) {
   // quill
   app.import('bower_components/quill/dist/quill.min.js');
   // select2
-  app.import('bower_components/select2/select2.min.js');
-
-  // MISC ////////////////////////////////////////////////////////////////////////
-  // select2
-  app.import('bower_components/select2/select2.png', { destDir: 'assets' });
-  app.import('bower_components/select2/select2x2.png', { destDir: 'assets' });
-  app.import('bower_components/select2/select2-spinner.gif', { destDir: 'assets' });
+  app.import('bower_components/select2/dist/js/select2.full.min.js');
 
   return app.toTree();
 };