diff --git a/app/imports/ui/properties/components/actions/ActionCard.vue b/app/imports/ui/properties/components/actions/ActionCard.vue
index 251d42df..c119f6b3 100644
--- a/app/imports/ui/properties/components/actions/ActionCard.vue
+++ b/app/imports/ui/properties/components/actions/ActionCard.vue
@@ -2,7 +2,6 @@
   <v-card
     class="action-card"
     :class="cardClasses"
-    :elevation="hovering ? 8 : undefined"
   >
     <div class="layout align-center px-3">
       <div class="avatar">
@@ -157,6 +156,7 @@ export default {
         'theme--light': !this.theme.isDark,
         'muted-text': this.model.insufficientResources,
         'shrink': this.activated,
+        'elevation-8': this.hovering,
       }
     },
     actionTypeIcon() {
@@ -199,6 +199,9 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.action-card {
+  transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
 .action-title {
   font-size: 16px;
   font-weight: 400;
diff --git a/app/imports/ui/properties/components/attributes/ResourceCard.vue b/app/imports/ui/properties/components/attributes/ResourceCard.vue
index ea75d40d..c63f77f4 100644
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCard.vue
@@ -78,6 +78,9 @@
 </script>
 
 <style lang="css" scoped>
+  .resource-card {
+    transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
 	.resource-card > div {
 		padding-top: 16px;
 		padding-bottom: 16px;
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index a938270d..5dc40baf 100644
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -47,7 +47,7 @@ Meteor.startup(() => {
       theme: {
         dark: false,
         themes,
-        options: { customProperties: true },
+        //options: { customProperties: true },
       },
       icons: {
         iconfont: 'md',