diff --git a/src/coffee/controllers/step_controller.coffee b/src/coffee/controllers/step_controller.coffee
index cd85cf995..709f2836f 100644
--- a/src/coffee/controllers/step_controller.coffee
+++ b/src/coffee/controllers/step_controller.coffee
@@ -28,7 +28,7 @@ module.exports = class StepController extends BaseController
 
     # Event Methods ################################################################################
 
-    onCompleteButtonClicked: (event)->
+    onCompleteClicked: (event)->
         event.preventDefault()
         @trigger Event.button.complete, this
 
@@ -46,8 +46,9 @@ module.exports = class StepController extends BaseController
             model:       @model.recipe
             modPack:     @modPack
 
-        @$header         = @$('h3')
-        @$completeButton = @$('button.complete')
+        @$header        = @$('h3')
+        @$completePanel = @$('.complete')
+        @$completeImage = @$('.complete img')
         super
 
     onWillChangeModel: (oldModel, newModel)->
@@ -63,9 +64,9 @@ module.exports = class StepController extends BaseController
         @recipeController.multiplier = @model.multiplier
 
         if @canComplete(this)
-            @$completeButton.removeProp 'disabled'
+            @$completePanel.addClass 'disabled'
         else
-            @$completeButton.prop 'disabled', true
+            @$completePanel.removeClass 'disabled'
 
         super
 
@@ -73,4 +74,4 @@ module.exports = class StepController extends BaseController
 
     events: ->
         return _.extend super,
-            'click button.complete': 'onCompleteButtonClicked'
+            'click .complete a': 'onCompleteClicked'
diff --git a/src/jade/templates/step.jade b/src/jade/templates/step.jade
index 00e9cb3a7..680cb8cd6 100644
--- a/src/jade/templates/step.jade
+++ b/src/jade/templates/step.jade
@@ -9,4 +9,5 @@
     h3
     .view__inventory
     .view__minimal_recipe
-    button.complete
+    .complete
+        a: div: p I already have this
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 45854bd2d..066497a16 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -62,6 +62,11 @@ $color-brick-light:        #D9D9D9;
 $color-dirt:               #906647;
 $color-ice:                #8AA7E6;
 
+// Opacity Values //////////////////////////////////////////////////////////////////////////////////
+
+$opacity-hidden: 0.000001;
+$opacity-shown:  1.0;
+
 // Style Colors ////////////////////////////////////////////////////////////////////////////////////
 
 $color-active:             #5C8AE6;
@@ -69,6 +74,7 @@ $color-active-hover:       #2E6BE6;
 $color-background:         #AAC9FF;
 $color-background-panel:   #FFFFFF;
 $color-background-toolbar: rgba(255, 255, 255, 0.75);
+$color-checkmark:          #7EDD7B;
 $color-content:            rgba(230, 230, 230, 0.90);
 $color-error:              #F3C2C2;
 $color-error-new:          #CD0000;
diff --git a/src/scss/templates/step.scss b/src/scss/templates/step.scss
index d617d2279..b198bdac7 100644
--- a/src/scss/templates/step.scss
+++ b/src/scss/templates/step.scss
@@ -13,6 +13,17 @@ All rights reserved.
 
     &:first-child {
         border-top: 0;
+        padding-top: 0;
+
+        .complete {
+            top: 0;
+        }
+    }
+
+    &:hover {
+        .complete {
+            opacity: $opacity-shown;
+        }
     }
 
     .view__inventory {
@@ -23,25 +34,50 @@ All rights reserved.
         position: absolute; top: 2em; right: 4.8em;
     }
 
-    button.complete {
-        position: absolute; top: 1em; right: 0; height: 3em; width: 3em;
+    .complete {
+        position: absolute; top: 1em; right: 0;
+        cursor: pointer;
+        opacity: $opacity-hidden;
 
-        background: url("/images/check.png") no-repeat center;
-        border: 0;
-        font-size: $font-size-small;
-        outline: none;
+        transition: opacity $animate-fast;
 
-        &:active {
-            background: url('/images/check_active.png') no-repeat center;
+        a {
+            div {
+                height: 3em;
+
+                background: url('/images/check.png') no-repeat right;
+                background-size: 3em 3em;
+                padding-right: 4em;
+                text-align: right;
+
+                &:hover {
+                    background-image: url('/images/check_hover.png');
+
+                    p {
+                        font-weight: bold;
+                    }
+                }
+
+                p {
+                    position: relative; top: 50%;
+                    @include transform(translateY(-50%));
+                    color: $color-checkmark;
+                    font-size: $font-size-small;
+                }
+            }
         }
 
-        &:disabled {
-            background: url('/images/check_disabled.png') no-repeat center !important;
-            cursor: inherit;
+        &.active {
+            a {
+                background-image: url('/images/check_active.png');
+            }
         }
 
-        &:hover {
-            background: url('/images/check_hover.png') no-repeat center;
+        &.disabled {
+            a {
+                background-image: url('/images/check_disabled.png') !important;
+                cursor: inherit;
+            }
         }
     }
-}
\ No newline at end of file
+}