diff --git a/app/components/hook-switch.coffee b/app/components/hook-switch.coffee
new file mode 100644
index 00000000..196e35ec
--- /dev/null
+++ b/app/components/hook-switch.coffee
@@ -0,0 +1,17 @@
+`import Ember from 'ember'`
+
+HookSwitchComponent = Ember.Component.extend
+  tagName: 'a'
+  classNames: ['travis-switch', 'switch']
+  classNameBindings: ['active']
+  activeBinding: "hook.active"
+
+  click: ->
+    hook = @get('hook')
+    hook.toggle().then( (->), =>
+      @toggleProperty('hook.active')
+      @sendAction('onToggleError', hook)
+    )
+
+
+`export default HookSwitchComponent`
diff --git a/app/components/hooks-list-item.coffee b/app/components/hooks-list-item.coffee
new file mode 100644
index 00000000..7cf32639
--- /dev/null
+++ b/app/components/hooks-list-item.coffee
@@ -0,0 +1,11 @@
+`import Ember from 'ember'`
+
+HooksListItemComponent = Ember.Component.extend
+  tagName: 'li'
+  classNames: ['row']
+  classNameBindings: ['hook.active:active']
+  actions:
+    handleToggleError: ->
+      @set("errorMessage", "There was an error")
+
+`export default HooksListItemComponent`
diff --git a/app/templates/account.hbs b/app/templates/account.hbs
index a7ef4634..76a79f94 100644
--- a/app/templates/account.hbs
+++ b/app/templates/account.hbs
@@ -73,20 +73,7 @@
   <div>
     <ul class="profile-hooklist">
       {{#each hook in hooks}}
-        <li {{bind-attr class="hook.active:active :row"}}>
-          <div class="columns">
-            {{travis-switch action="toggle" target=hook toggleAutomatically="false"}}
-            {{!-- <button class="switch is-on"></button> --}}
-            {{#if hook.isSaving}}
-              <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
-            {{else}}
-              {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
-            {{/if}}
-          </div>
-          <a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo columns">
-            {{hook.slug}}
-            <span>{{hook.description}}</span></a>
-        </li>
+        {{hooks-list-item hook=hook}}
       {{else}}
         <li>
           {{#if hooksWithoutAdmin.length}}
diff --git a/app/templates/components/hook-switch.hbs b/app/templates/components/hook-switch.hbs
new file mode 100644
index 00000000..dbed063c
--- /dev/null
+++ b/app/templates/components/hook-switch.hbs
@@ -0,0 +1,6 @@
+<span class="on">
+  ON
+</span>
+<span class="off">
+  OFF
+</span>
diff --git a/app/templates/components/hooks-list-item.hbs b/app/templates/components/hooks-list-item.hbs
new file mode 100644
index 00000000..98480303
--- /dev/null
+++ b/app/templates/components/hooks-list-item.hbs
@@ -0,0 +1,18 @@
+<div class="columns">
+  {{hook-switch hook=hook onToggleError="handleToggleError"}}
+  {{!-- <button class="switch is-on"></button> --}}
+  {{#if hook.isSaving}}
+    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  {{else}}
+    {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
+  {{/if}}
+</div>
+<a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo columns">
+  {{hook.slug}}
+  <span>{{hook.description}}</span></a>
+
+{{#if errorMessage}}
+  <div class="error">
+    {{errorMessage}}
+  </div>
+{{/if}}
diff --git a/tests/unit/components/hook-switch-test.coffee b/tests/unit/components/hook-switch-test.coffee
new file mode 100644
index 00000000..c59d5281
--- /dev/null
+++ b/tests/unit/components/hook-switch-test.coffee
@@ -0,0 +1,17 @@
+`import { test, moduleForComponent } from 'ember-qunit'`
+
+moduleForComponent 'hook-switch', 'HookSwitchComponent', {
+  # specify the other units that are required for this test
+  # needs: ['component:foo', 'helper:bar']
+}
+
+test 'it renders', ->
+  expect 2
+
+  # creates the component instance
+  component = @subject()
+  equal component._state, 'preRender'
+
+  # appends the component to the page
+  @append()
+  equal component._state, 'inDOM'
diff --git a/tests/unit/components/hooks-list-item-test.coffee b/tests/unit/components/hooks-list-item-test.coffee
new file mode 100644
index 00000000..848f84ba
--- /dev/null
+++ b/tests/unit/components/hooks-list-item-test.coffee
@@ -0,0 +1,17 @@
+`import { test, moduleForComponent } from 'ember-qunit'`
+
+moduleForComponent 'hooks-list-item', 'HooksListItemComponent', {
+  # specify the other units that are required for this test
+  # needs: ['component:foo', 'helper:bar']
+}
+
+test 'it renders', ->
+  expect 2
+
+  # creates the component instance
+  component = @subject()
+  equal component._state, 'preRender'
+
+  # appends the component to the page
+  @append()
+  equal component._state, 'inDOM'