diff --git a/scripts/FlashcardFactory.js b/scripts/FlashcardFactory.js
index 68d13d9..ad9e985 100644
--- a/scripts/FlashcardFactory.js
+++ b/scripts/FlashcardFactory.js
@@ -28,6 +28,10 @@ angular.module('flashy.FlashcardFactory', ['ui.router']).
         Flashcard.prototype.isInDeck = function () {
             return !(typeof Deck[this.id] === 'undefined');
         };
+        Flashcard.prototype.pullUnpull = function() {
+            if (Deck[this.id]) this.unpull();
+            else this.pull();
+        };
         Flashcard.prototype.pull = function () {
             if (Deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");
             return $http.post('/api/flashcards/' + this.id + '/pull/');
@@ -41,4 +45,4 @@ angular.module('flashy.FlashcardFactory', ['ui.router']).
         };
 
         return Flashcard;
-    });
\ No newline at end of file
+    });
diff --git a/styles/flashy.css b/styles/flashy.css
index 779a79d..7415786 100644
--- a/styles/flashy.css
+++ b/styles/flashy.css
@@ -58,15 +58,8 @@
     float: left;
     text-align: center;
     margin: 6px;
-    /*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/
 }
 
-/*.card.flashy.shrinky {*/
-/*height: 0;*/
-/*opacity: 0;*/
-/*overflow: hidden;*/
-/*}*/
-
 .card-overlay {
     cursor: pointer;
     left: 0;
@@ -74,7 +67,7 @@
     position: absolute;
     /*pointer-events: none;*/
     top: 0;
-    transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
+    transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s,
     opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
     /* animation effect to appear on off-hover */
     visibility: hidden;
@@ -407,20 +400,22 @@ md-content.md-default-theme {
     will-change: opacity;
 }
 
-.dropping.ng-enter {
-    max-height: 0vh;
+.fadey.ng-enter {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) rotate(90deg);
 }
 
-.dropping.ng-enter-active {
-    max-height: 100vh;
+.fadey.ng-enter-active {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(0deg);
 }
 
-.dropping.ng-leave {
-    max-height: 100vh;
+.fadey.ng-leave {
+    opacity: 1;
 }
 
-.dropping.ng-leave-active {
-    max-height: 0vh;
+.fadey.ng-leave-active {
+    opacity: 0;
 }
 
 /* REPLACEMENT FOR MATERIALIZE ACCORDION/COLLAPSIBLE
@@ -458,4 +453,4 @@ md-content.md-default-theme {
     border-bottom: 2px solid black;
     border-radius: 2px;
     opacity: 0.5;
-}
\ No newline at end of file
+}
diff --git a/templates/flashcard.html b/templates/flashcard.html
index 0b74f40..4a2fe18 100644
--- a/templates/flashcard.html
+++ b/templates/flashcard.html
@@ -1,16 +1,15 @@
-<div class="card flashy smallify black-text text-darken-2"
+<div class="card flashy black-text"
      ng-class="{'in-deck':flashcard.isInDeck()}">
   <div class="valign-wrapper">
     <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
   </div>
   <div class="card-overlay">
-    <div class="top-box no-user-select" ng-show="!flashcard.isInDeck()"
-         ng-click="flashcard.pull()">
-      <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
-    </div>
-    <div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
-         ng-click="flashcard.unpull()">
-      <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
+    <div class="top-box no-user-select"
+         ng-click="flashcard.pullUnpull()">
+      <div class="center-me">
+        <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
+        <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
+      </div>
     </div>
     <div class="bottom-box no-user-select">
       <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">