diff --git a/app/components/user-skills-input.js b/app/components/user-skills-input.js
index 2fe729665..c8cbf8147 100644
--- a/app/components/user-skills-input.js
+++ b/app/components/user-skills-input.js
@@ -4,10 +4,12 @@ const {
   Component,
   computed,
   computed: { alias, and, equal, not, notEmpty },
+  get,
   inject: { service },
   isEmpty,
+  observer,
   run: { once },
-  observer
+  set
 } = Ember;
 
 export default Component.extend({
@@ -33,30 +35,30 @@ export default Component.extend({
   }),
 
   keyDown(e) {
-    this.set('keyCode', e.keyCode);
+    set(this, 'keyCode', e.keyCode);
 
-    let cursorAt = this.get('cursorAt');
-    let isCommaKey = this.get('_isCommaKey');
-    let isDownKey = this.get('_isDownKey');
-    let isEnterKey = this.get('_isEnterKey');
-    let isEscKey = this.get('_isEscKey');
-    let isUpKey = this.get('_isUpKey');
+    let cursorAt = get(this, 'cursorAt');
+    let isCommaKey = get(this, '_isCommaKey');
+    let isDownKey = get(this, '_isDownKey');
+    let isEnterKey = get(this, '_isEnterKey');
+    let isEscKey = get(this, '_isEscKey');
+    let isUpKey = get(this, '_isUpKey');
 
     if (isDownKey) {
       e.preventDefault();
       this._setPosition(++cursorAt);
-      this.set('hidden', false);
+      set(this, 'hidden', false);
     } else if (isUpKey) {
       e.preventDefault();
       this._setPosition(--cursorAt);
-      this.set('hidden', false);
+      set(this, 'hidden', false);
     } else if (isCommaKey || isEnterKey) {
       e.preventDefault();
       this._selectSkill();
     } else if (isEscKey) {
-      this.set('hidden', true);
+      set(this, 'hidden', true);
     } else {
-      this.set('hidden', false);
+      set(this, 'hidden', false);
     }
   },
 
@@ -67,25 +69,25 @@ export default Component.extend({
   _isUpKey: equal('keyCode', 38),
   _isNewQuery: not('_sameQuery'),
   _sameQuery: computed('queryString', 'lastQuery', function() {
-    return this.get('queryString') === this.get('lastQuery');
+    return get(this, 'queryString') === get(this, 'lastQuery');
   }),
 
   actions: {
     blur() {
-      this.set('hidden', true);
+      set(this, 'hidden', true);
     },
 
     focus() {
-      this.set('hidden', false);
+      set(this, 'hidden', false);
     },
 
     hoverSkill(skill) {
-      this.get('results').forEach((item, index) => {
+      get(this, 'results').forEach((item, index) => {
         if (item === skill) {
-          this.set('cursorAt', index);
-          item.set('selected', true);
+          set(this, 'cursorAt', index);
+          set(item, 'selected', true);
         } else {
-          item.set('selected', false);
+          set(item, 'selected', false);
         }
       });
     },
@@ -96,34 +98,34 @@ export default Component.extend({
   },
 
   _reset() {
-    this.set('results', []);
-    this.set('queryString', '');
+    set(this, 'results', []);
+    set(this, 'queryString', '');
     this.$('input').focus();
   },
 
   _search() {
-    let limit = this.get('limit');
-    let queryString = this.get('queryString');
-    let store = this.get('store');
+    let limit = get(this, 'limit');
+    let queryString = get(this, 'queryString');
+    let store = get(this, 'store');
 
     if (isEmpty(queryString)) {
-      this.set('results', []);
-    } else if (this.get('_isNewQuery')) {
-      this.set('lastQuery', queryString);
+      set(this, 'results', []);
+    } else if (get(this, '_isNewQuery')) {
+      set(this, 'lastQuery', queryString);
       store.query('skill', { query: queryString, limit }).then((skills) => {
-        this.set('results', skills);
-        this.set('cursorAt', 0);
+        set(this, 'results', skills);
+        set(this, 'cursorAt', 0);
         this._updateSelected();
       });
     }
   },
 
   _selectSkill() {
-    if (this.get('hasResults')) {
-      let cursorAt = this.get('cursorAt');
-      let results = this.get('results');
+    if (get(this, 'hasResults')) {
+      let cursorAt = get(this, 'cursorAt');
+      let results = get(this, 'results');
       let skill = results.objectAt(cursorAt);
-      let userSkills = this.get('userSkills');
+      let userSkills = get(this, 'userSkills');
 
       let foundSkill = userSkills.findUserSkill(skill);
 
@@ -138,18 +140,18 @@ export default Component.extend({
   },
 
   _setPosition(position) {
-    let numberOfResults = this.get('numberOfResults');
+    let numberOfResults = get(this, 'numberOfResults');
     let numberOfResultsIndexed = numberOfResults - 1;
 
-    this.set('cursorWas', this.get('cursorAt'));
+    set(this, 'cursorWas', get(this, 'cursorAt'));
 
     if (numberOfResults > 0) {
       if (position < 0) {
-        this.set('cursorAt', numberOfResultsIndexed);
+        set(this, 'cursorAt', numberOfResultsIndexed);
       } else if (position > numberOfResultsIndexed) {
-        this.set('cursorAt', 0);
+        set(this, 'cursorAt', 0);
       } else {
-        this.set('cursorAt', position);
+        set(this, 'cursorAt', position);
       }
     }
 
@@ -157,13 +159,13 @@ export default Component.extend({
   },
 
   _updateSelected() {
-    let cursorAt = this.get('cursorAt');
+    let cursorAt = get(this, 'cursorAt');
 
-    this.get('results').forEach((item, index) => {
+    get(this, 'results').forEach((item, index) => {
       if (index === cursorAt) {
-        item.set('selected', true);
+        set(item, 'selected', true);
       } else {
-        item.set('selected', false);
+        set(item, 'selected', false);
       }
     });
   }
diff --git a/tests/acceptance/onboarding-test.js b/tests/acceptance/onboarding-test.js
index 3c6b1ddc4..3713f41be 100644
--- a/tests/acceptance/onboarding-test.js
+++ b/tests/acceptance/onboarding-test.js
@@ -101,8 +101,8 @@ test('A user can onboard as expected', function(assert) {
 
   andThen(() => {
     onboardingPage.userSkillsInput.focus();
-    assert.equal(onboardingPage.userSkillsInput.dropdown(0).text, 'Ruby');
-    onboardingPage.userSkillsInput.dropdown(0).click();
+    assert.equal(onboardingPage.userSkillsInput.inputItems(0).text, 'Ruby');
+    onboardingPage.userSkillsInput.inputItems(0).click();
   });
 
   andThen(() => {
@@ -117,8 +117,8 @@ test('A user can onboard as expected', function(assert) {
 
   andThen(() => {
     onboardingPage.userSkillsInput.focus();
-    assert.equal(onboardingPage.userSkillsInput.dropdown(0).text, 'Ruby');
-    onboardingPage.userSkillsInput.dropdown(0).click();
+    assert.equal(onboardingPage.userSkillsInput.inputItems(0).text, 'Ruby');
+    onboardingPage.userSkillsInput.inputItems(0).click();
   });
 
   andThen(() => {
diff --git a/tests/integration/components/user-skills-input-test.js b/tests/integration/components/user-skills-input-test.js
index 1655ae64f..e98834fe8 100644
--- a/tests/integration/components/user-skills-input-test.js
+++ b/tests/integration/components/user-skills-input-test.js
@@ -1,14 +1,19 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import Ember from 'ember';
-import jQuery from 'jquery';
 import stubService from 'code-corps-ember/tests/helpers/stub-service';
+import PageObject from 'ember-cli-page-object';
+import userSkillsInputComponent from '../../pages/components/user-skills-input';
+import wait from 'ember-test-helpers/wait';
 
 const {
   Object,
-  RSVP
+  RSVP,
+  set
 } = Ember;
 
+let page = PageObject.create(userSkillsInputComponent);
+
 let mockStore = {
   query() {
     return RSVP.resolve([
@@ -32,162 +37,164 @@ moduleForComponent('user-skills-input', 'Integration | Component | user skills i
   beforeEach() {
     stubService(this, 'store', mockStore);
     stubService(this, 'user-skills', mockUserSkillsService);
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
-let pressCommaKey = jQuery.Event('keydown', {
-  keyCode: 188,
-  which: 188
-});
-
-let pressDownKey = jQuery.Event('keydown', {
-  keyCode: 40,
-  which: 40
-});
-
-let pressEnterKey = jQuery.Event('keydown', {
-  keyCode: 13,
-  which: 13
-});
-
-let pressEscKey = jQuery.Event('keydown', {
-  keyCode: 27,
-  which: 27
-});
-
-let pressRKey = jQuery.Event('keydown', {
-  keyCode: 82,
-  which: 82
-});
-
-let pressUpKey = jQuery.Event('keydown', {
-  keyCode: 38,
-  which: 38
-});
-
 test('it does nothing when pressing a random key', function(assert) {
   assert.expect(1);
-  this.render(hbs`{{user-skills-input}}`);
+  page.render(hbs`{{user-skills-input}}`);
 
-  this.$('input').trigger(pressRKey);
+  page.pressRKey();
 
-  assert.equal(this.$('input').val().trim(), '');
+  assert.equal(page.inputValue, '');
 });
 
 test('it fetches results when changing the input', function(assert) {
   assert.expect(5);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
 
-  assert.equal(this.$('input').val().trim(), 'ruby ra');
-  this.$('input').keydown();
+    assert.equal(page.inputValue, 'ruby ra');
+    page.keydown();
 
-  let firstItemHtml = '<strong>Ruby</strong>';
-  assert.equal(this.$('.dropdown-menu li:eq(0) a').html().trim(), firstItemHtml);
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true);
+    assert.equal(page.inputItems(0).highlightedStrings(0).text, 'Ruby');
+    assert.equal(page.inputItems(0).listItemIsSelected, true);
 
-  let secondItemHtml = '<strong>Ruby</strong> on <strong>Ra</strong>ils';
-  assert.equal(this.$('.dropdown-menu li:eq(1) a').html().trim(), secondItemHtml);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false);
+    assert.equal(page.inputItems(1).highlightedStrings(1).text, 'Ra');
+    assert.equal(page.inputItems(1).listItemIsSelected, false);
+
+    done();
+  });
 });
 
 test('it changes the selection when arrowing up or down', function(assert) {
   assert.expect(10);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
+
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
+    assert.equal(page.inputItems(0).listItemIsSelected, true);
+    assert.equal(page.inputItems(1).listItemIsSelected, false);
 
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false);
+    page.pressDownKey();
+    assert.equal(page.inputItems(0).listItemIsSelected, false);
+    assert.equal(page.inputItems(1).listItemIsSelected, true);
 
-  this.$('input').trigger(pressDownKey);
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true);
+    page.pressDownKey();
+    assert.equal(page.inputItems(0).listItemIsSelected, true);
+    assert.equal(page.inputItems(1).listItemIsSelected, false);
 
-  this.$('input').trigger(pressDownKey);
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false);
+    page.pressUpKey();
+    assert.equal(page.inputItems(0).listItemIsSelected, false);
+    assert.equal(page.inputItems(1).listItemIsSelected, true);
 
-  this.$('input').trigger(pressUpKey);
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true);
+    page.pressUpKey();
+    assert.equal(page.inputItems(0).listItemIsSelected, true);
+    assert.equal(page.inputItems(1).listItemIsSelected, false);
 
-  this.$('input').trigger(pressUpKey);
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false);
+    done();
+  });
 });
 
 test('it hides when hitting esc key', function(assert) {
   assert.expect(2);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
 
-  assert.equal(this.$('.dropdown-menu').length, 1);
+    assert.ok(page.dropdownMenuVisible);
 
-  this.$('input').trigger(pressEscKey);
+    page.pressEscKey();
 
-  assert.equal(this.$('.dropdown-menu').length, 0);
+    assert.notOk(page.dropdownMenuVisible);
+    done();
+  });
 });
 
 test('it changes the selection when hovering', function(assert) {
   assert.expect(4);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
 
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false);
+    assert.equal(page.inputItems(0).listItemIsSelected, true);
+    assert.equal(page.inputItems(1).listItemIsSelected, false);
 
-  this.$('.dropdown-menu li:eq(1)').trigger('mouseenter');
-  assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false);
-  assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true);
+    page.mouseenterDropdownFirstItem();
+    assert.equal(page.inputItems(0).listItemIsSelected, false);
+    assert.equal(page.inputItems(1).listItemIsSelected, true);
+    done();
+  });
 });
 
 test('it selects the skill when hitting enter', function(assert) {
   assert.expect(2);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
-  this.$('input').trigger(pressEnterKey);
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
+    page.pressEnterKey();
 
-  assert.equal(this.$('input').val().trim(), '');
-  assert.equal(this.$('.dropdown-menu li').length, 0);
+    assert.equal(page.inputValue, '');
+    assert.ok(page.dropdownMenuItemsHidden);
+    done();
+  });
 });
 
 test('it selects the skill when hitting comma', function(assert) {
   assert.expect(2);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').trigger(pressCommaKey);
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.pressCommaKey();
 
-  assert.equal(this.$('input').val().trim(), '');
-  assert.equal(this.$('.dropdown-menu li').length, 0);
+    assert.equal(page.inputValue, '');
+    assert.ok(page.dropdownMenuItemsHidden);
+    done();
+  });
 });
 
 test('it selects the skill when clicking it', function(assert) {
   assert.expect(2);
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
-  this.$('.dropdown-menu li').trigger('mousedown');
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
+    page.mousedownDropdownItem();
 
-  assert.equal(this.$('input').val().trim(), '');
-  assert.equal(this.$('.dropdown-menu li').length, 0);
+    assert.equal(page.inputValue, '');
+    assert.ok(page.dropdownMenuItemsHidden);
+    done();
+  });
 });
 
 test('it does nothing when there are no results', function(assert) {
@@ -196,14 +203,18 @@ test('it does nothing when there are no results', function(assert) {
   let query = function() {
     return RSVP.resolve([]);
   };
-  this.set('store.query', query);
+  set(this, 'store.query', query);
 
-  this.render(hbs`{{user-skills-input query=query}}`);
+  let done = assert.async();
+  page.render(hbs`{{user-skills-input query=query}}`);
 
-  this.$('input').focus();
-  this.set('query', 'ruby ra');
-  this.$('input').keydown();
-  this.$('input').trigger(pressEnterKey);
+  wait().then(() => {
+    set(this, 'query', 'ruby ra');
+    page.focus();
+    page.keydown();
+    page.pressEnterKey();
 
-  assert.equal(this.$('input').val().trim(), 'ruby ra');
+    assert.equal(page.inputValue, 'ruby ra');
+    done();
+  });
 });
diff --git a/tests/pages/components/user-skills-input.js b/tests/pages/components/user-skills-input.js
index 2c4126d12..82169e14b 100644
--- a/tests/pages/components/user-skills-input.js
+++ b/tests/pages/components/user-skills-input.js
@@ -1,24 +1,66 @@
 import {
-  clickable,
-  collection,
-  fillable,
-  text,
-  triggerable
+  collection, fillable, isVisible, isHidden, triggerable, value
 } from 'ember-cli-page-object';
+import userSkillsInputItem from './user-skills-input-item';
 
 export default {
   scope: '.user-skills-input',
 
   fillIn: fillable('input'),
   focus: triggerable('focus', 'input'),
+  inputValue: value('input'),
+  dropdownMenuVisible: isVisible('.dropdown-menu'),
+  dropdownMenuItemsHidden: isHidden('.dropdown-menu li'),
 
-  dropdown: collection({
-    scope: '.dropdown-menu',
-    itemScope: 'li',
+  mousedownDropdownItem: triggerable('mousedown', '.dropdown-menu li'),
+  mouseenterDropdownFirstItem: triggerable('mouseenter', '.dropdown-menu li:eq(1)'),
 
-    item: {
-      text: text(),
-      click: clickable()
+  keydown: triggerable('keydown', 'input'),
+
+  pressCommaKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 188,
+      which   : 188
+    }
+  }),
+
+  pressDownKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 40,
+      which   : 40
+    }
+  }),
+
+  pressEnterKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 13,
+      which   : 13
+    }
+  }),
+
+  pressEscKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 27,
+      which   : 27
+    }
+  }),
+
+  pressRKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 82,
+      which   : 82
     }
+  }),
+
+  pressUpKey: triggerable('keydown', 'input', {
+    eventProperties: {
+      keyCode : 38,
+      which   : 38
+    }
+  }),
+
+  inputItems: collection({
+    item: userSkillsInputItem,
+    itemScope: userSkillsInputItem.scope
   })
 };