diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 305e410..db064b0 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -87,9 +87,6 @@ $sourcecard-selected-background-color: #ffffff;
 $sourcecard-selected-text-color: $background-primary-color;
 $sourcecard-selected-border: 3px solid #ffffff;
 $sourcecard-selected-box-shadow: 0 0 10px #ffffff;
-$sourcecard-disabled-background-color: $sourcecard-background-color;
-$sourcecard-disabled-text-color: darken($text-primary-color, 60%);
-$sourcecard-disabled-border: 3px solid #606060;
 
 // Source Card Badge
 $sourcecardbadge-background-color: #ffff88;
diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index e679572..8dbac07 100644
--- a/client/src/components/SourceCard.vue
+++ b/client/src/components/SourceCard.vue
@@ -48,6 +48,8 @@ const containerClasses = computed(() => {
     background-color: $sourcecard-background-color;
     color: $sourcecard-text-color;
     cursor: not-allowed;
+    animation: source-show 1s ease-out;
+    animation-fill-mode: forwards;
 
     &__selectable {
       cursor: pointer;
@@ -68,9 +70,8 @@ const containerClasses = computed(() => {
     }
 
     &__disabled {
-      background-color: $sourcecard-disabled-background-color;
-      color: $sourcecard-disabled-text-color;
-      border: $sourcecard-disabled-border;
+      animation: source-fade-out 0.7s linear;
+      animation-fill-mode: forwards;
     }
   }
 
@@ -96,4 +97,21 @@ const containerClasses = computed(() => {
     user-select: none;
   }
 }
+
+@keyframes source-fade-out {
+  to { opacity: 10%; }
+}
+
+@keyframes source-show {
+  from { 
+    position: relative;
+    left: -40px;
+    opacity: 0%;
+  }
+  to {
+    position: relative;
+    left: 0;
+    opacity: 100%;
+  }
+}
 </style>
\ No newline at end of file