diff --git a/src/components/BitcoinWallet.vue b/src/components/BitcoinWallet.vue
index 64a8663..476311b 100644
--- a/src/components/BitcoinWallet.vue
+++ b/src/components/BitcoinWallet.vue
@@ -39,7 +39,7 @@
 
         <!-- No transactions -->
         <div
-          class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
+          class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-wallet-transactions-container"
           v-if="transactions.length === 0"
         >
           <svg
@@ -67,8 +67,8 @@
           <small class="align-self-center mt-3 text-muted">No transactions</small>
         </div>
 
-        <div class="transactions-container" v-else>
-          <transition-group name="list" class="list-group pb-2 transactions" appear>
+        <div class="wallet-transactions-container" v-else>
+          <transition-group name="slide-up" class="list-group pb-2 transactions">
             <!-- Transaction -->
             <b-list-group-item
               v-for="(tx, index) in transactions"
@@ -570,73 +570,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-//Transactions
-.transactions-container {
-  position: relative;
-
-  //bottom fade
-  &:before {
-    //nice faded white so the discarded blocks don't abruptly cut off
-    content: "";
-    position: absolute;
-    height: 2rem;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-  }
-
-  //top fade
-  &:after {
-    //nice faded white so the discarded blocks don't abruptly cut off
-    content: "";
-    position: absolute;
-    height: 2rem;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    background-image: linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-  }
-}
-.transactions {
-  height: 20rem;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch; //momentum scroll on iOS
-}
-
-.zero-transactions-container {
-  height: 20rem;
-}
-
-//transactions list transitions
-
-.list-enter-active,
-.list-leave-active {
-  transition: transform 0.8s, opacity 0.8s ease;
+// Transitions between mode/screen changes
+.lightning-mode-change-enter-active,
+.lightning-mode-change-leave-active {
+  transition: transform 0.3s, opacity 0.3s linear;
 }
-.list-enter {
-  transform: translate3d(0, 10px, 0);
+.lightning-mode-change-enter {
+  transform: translate3d(20px, 0, 0);
   opacity: 0;
 }
-.list-enter-to {
+.lightning-mode-change-enter-to {
   transform: translate3d(0, 0, 0);
   opacity: 1;
 }
-.list-leave {
+.lightning-mode-change-leave {
   transform: translate3d(0, 0, 0);
   opacity: 1;
 }
-.list-leave-to {
+.lightning-mode-change-leave-to {
+  transform: translate3d(-20px, 0, 0);
+  opacity: 0;
+}
+
+//slide up transition with fade
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.8s, opacity 0.8s ease;
+}
+.slide-up-enter,
+.slide-up-leave-to {
   transform: translate3d(0, 10px, 0);
   opacity: 0;
 }
diff --git a/src/components/LightningWallet.vue b/src/components/LightningWallet.vue
index 3b2e155..0d3b856 100644
--- a/src/components/LightningWallet.vue
+++ b/src/components/LightningWallet.vue
@@ -39,7 +39,7 @@
 
         <!-- No transactions -->
         <div
-          class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
+          class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-wallet-transactions-container"
           v-if="transactions.length === 0"
         >
           <!-- Piggy bank icon -->
@@ -68,8 +68,8 @@
         </div>
 
         <!-- Actual Transactions -->
-        <div class="transactions-container" v-else>
-          <transition-group name="list" class="list-group pb-2 transactions" appear>
+        <div class="wallet-transactions-container" v-else>
+          <transition-group name="slide-up" class="list-group pb-2 transactions">
             <b-list-group-item
               v-for="(tx, index) in transactions"
               :key="index"
@@ -817,8 +817,6 @@ export default {
   transition: transform 0.3s, opacity 0.3s linear;
 }
 
-// reverse delay in check mark when leaving (first tick contracts, then the circle)
-
 .lightning-mode-change-enter {
   transform: translate3d(20px, 0, 0);
   opacity: 0;
@@ -854,106 +852,24 @@ export default {
   }
 }
 
-//Transactions
-.transactions-container {
-  position: relative;
-
-  //bottom fade
-  &:before {
-    //nice faded white so the discarded blocks don't abruptly cut off
-    content: "";
-    position: absolute;
-    height: 2rem;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-  }
-
-  //top fade
-  &:after {
-    //nice faded white so the discarded blocks don't abruptly cut off
-    content: "";
-    position: absolute;
-    height: 2rem;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    background-image: linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-  }
-}
-.transactions {
-  height: 20rem;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch; //momentum scroll on iOS
-}
-
-.zero-transactions-container {
-  height: 20rem;
-}
-
-//slide up copy invoice field transition
-
+//slide up transition with fade
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: transform 0.8s, opacity 0.8s ease;
 }
-.slide-up-enter {
-  transform: translate3d(0, 10px, 0);
-  opacity: 0;
-}
-.slide-up-enter-to {
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
-}
-.slide-up-leave {
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
-}
+.slide-up-enter,
 .slide-up-leave-to {
   transform: translate3d(0, 10px, 0);
   opacity: 0;
 }
 
-//transactions list transitions
-
-.list-enter-active,
-.list-leave-active {
-  transition: transform 0.8s, opacity 0.8s ease;
-}
-.list-enter {
-  transform: translate3d(0, 10px, 0);
-  opacity: 0;
-}
-.list-enter-to {
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
-}
-.list-leave {
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
-}
-.list-leave-to {
-  transform: translate3d(0, 10px, 0);
-  opacity: 0;
-}
-
 //fade transition
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Utility/CircularCheckmark.vue b/src/components/Utility/CircularCheckmark.vue
index 779fc8a..b82f694 100644
--- a/src/components/Utility/CircularCheckmark.vue
+++ b/src/components/Utility/CircularCheckmark.vue
@@ -86,33 +86,9 @@ export default {
     left: 50%;
     transform: translate3d(-50%, -50%, 0) scale(1); //animated
     transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    // transition-delay: 0.3s;
   }
 }
 
-//reverse delay in check mark when leaving (first tick contracts, then the circle)
-// .checkmark-animation-leave-active {
-//   &.checkmark {
-//     &:before {
-//       transition-delay: 0.2s;
-//     }
-//     .checkmark-icon {
-//       transition-delay: 0s;
-//     }
-//   }
-// }
-// .checkmark-animation-enter-active,
-// .checkmark-animation-leave-active {
-//   transition: all 5s ease;
-//   &.checkmark {
-//     &:before {
-//       transition: all 5s ease;
-//     }
-//     .checkmark-icon {
-//       transition: all 5s ease;
-//     }
-//   }
-// }
 .checkmark-animation-enter-active {
   &.checkmark {
     .checkmark-icon {
diff --git a/src/global-styles/custom.scss b/src/global-styles/custom.scss
index 40b52ca..d945fe1 100644
--- a/src/global-styles/custom.scss
+++ b/src/global-styles/custom.scss
@@ -338,4 +338,56 @@ svg.icon-clock {
       transform: translate(20px, 20px)
         rotate(calc(var(--start-hours) * 30deg + 360deg));
     }
+  }
+
+
+  //wallet transactions container
+  //Transactions
+.wallet-transactions-container {
+    position: relative;
+
+    .transactions {
+        height: 20rem;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch; //momentum scroll on iOS
+      }
+  
+    //bottom fade
+    &:before {
+      //nice faded white so the discarded blocks don't abruptly cut off
+      content: "";
+      position: absolute;
+      height: 2rem;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      z-index: 2;
+      background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 1)
+      );
+    }
+  
+    //top fade
+    &:after {
+      //nice faded white so the discarded blocks don't abruptly cut off
+      content: "";
+      position: absolute;
+      height: 2rem;
+      width: 100%;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      background-image: linear-gradient(
+        to top,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 1)
+      );
+    }
+  }
+  
+  
+  .zero-wallet-transactions-container {
+    height: 20rem;
   }
\ No newline at end of file