diff --git a/frontend/src/components/Recipe.vue b/frontend/src/components/Recipe.vue
index 68f18ff6102c..8e5f8a7ce98f 100644
--- a/frontend/src/components/Recipe.vue
+++ b/frontend/src/components/Recipe.vue
@@ -152,6 +152,6 @@ export default {
   margin-top: -10px;
 }
 .disabled-card {
-  opacity: 50%;
+  opacity: 0.5;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/RecipeEditor/DetailsView.vue b/frontend/src/components/RecipeEditor/DetailsView.vue
index 37205f87619e..123d9dced63c 100644
--- a/frontend/src/components/RecipeEditor/DetailsView.vue
+++ b/frontend/src/components/RecipeEditor/DetailsView.vue
@@ -123,6 +123,6 @@ export default {
 
 <style>
 .disabled-card {
-  opacity: 50%;
+  opacity: 0.5;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/RecipeEditor/EditRecipe.vue b/frontend/src/components/RecipeEditor/EditRecipe.vue
index 9a03bd05e263..83c7a00bf8be 100644
--- a/frontend/src/components/RecipeEditor/EditRecipe.vue
+++ b/frontend/src/components/RecipeEditor/EditRecipe.vue
@@ -276,7 +276,7 @@ export default {
 
 <style>
 .disabled-card {
-  opacity: 50%;
+  opacity: 0.5;
 }
 .my-divider {
   margin: 0 -1px;