diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
index d419d1e14..361f1e7d3 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
@@ -1,21 +1,11 @@
 <template>
   <div class="d-flex justify-space-between align-center pt-2 pb-3">
-    <v-tooltip
+    <RecipeScaleEditButton
       v-if="!isEditMode"
-      size="small"
-      top
-      color="secondary-darken-1"
-    >
-      <template #activator="{ props }">
-        <RecipeScaleEditButton
-          v-model.number="scaleValue"
-          v-bind="props"
-          :recipe-servings="recipeServings"
-          :edit-scale="!recipe.settings.disableAmount && !isEditMode"
-        />
-      </template>
-      <span> {{ $t("recipe.edit-scale") }} </span>
-    </v-tooltip>
+      v-model.number="scaleValue"
+      :recipe-servings="recipeServings"
+      :edit-scale="!recipe.settings.disableAmount && !isEditMode"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue b/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
index 89bacf1fa..6f84517eb 100644
--- a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
+++ b/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
@@ -11,7 +11,36 @@
           :close-on-content-click="false"
         >
           <template #activator="{ props }">
+            <v-tooltip
+              v-if="canEditScale"
+              size="small"
+              top
+              color="secondary-darken-1"
+            >
+              <template #activator="{ props: tooltipProps }">
+                <v-card
+                  class="pa-1 px-2"
+                  dark
+                  color="secondary-darken-1"
+                  size="small"
+                  v-bind="{ ...props, ...tooltipProps }"
+                  :style="{ cursor: canEditScale ? '' : 'default' }"
+                >
+                  <v-icon
+                    v-if="canEditScale"
+                    size="small"
+                    class="mr-2"
+                  >
+                    {{ $globals.icons.edit }}
+                  </v-icon>
+                  <!-- eslint-disable-next-line vue/no-v-html -->
+                  <span v-html="yieldDisplay" />
+                </v-card>
+              </template>
+              <span> {{ $t("recipe.edit-scale") }} </span>
+            </v-tooltip>
             <v-card
+              v-else
               class="pa-1 px-2"
               dark
               color="secondary-darken-1"