diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index f516a99c2..7883f192e 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -108,7 +108,7 @@
 
               <b-collapse id="id_nutrition_collapse" class="mt-2">
                 <div class="card-body " v-if="recipe.nutrition">
-                  <label for="id_name"> {{ $t('Calories') }}</label>
+                  <label for="id_name"> {{ energy() }}</label>
                   <input class="form-control" id="id_calories" v-model="recipe.nutrition.calories">
 
                   <label for="id_name"> {{ $t('Carbohydrates') }}</label>
@@ -481,7 +481,7 @@ import {BootstrapVue} from 'bootstrap-vue'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import draggable from 'vuedraggable'
-import {ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, convertEnergyToCalories} from "@/utils/utils";
+import {ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, convertEnergyToCalories, energyHeading} from "@/utils/utils";
 import Multiselect from "vue-multiselect";
 import {ApiApiFactory} from "@/utils/openapi/api";
 import LoadingSpinner from "@/components/LoadingSpinner";
@@ -819,6 +819,9 @@ export default {
       if (this.recipe.nutrition && this.recipe.nutrition.calories) {
         this.recipe.nutrition.calories = convertEnergyToCalories(this.recipe.nutrition.calories)
       }
+    },
+    energy: function () {
+      return energyHeading()
     }
 
   }
diff --git a/vue/src/components/Nutrition.vue b/vue/src/components/Nutrition.vue
index ec1c1da52..09e4da5c8 100644
--- a/vue/src/components/Nutrition.vue
+++ b/vue/src/components/Nutrition.vue
@@ -12,7 +12,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-fire fa-fw text-primary"></i> {{ $t('Calories') }}
+            <i class="fas fa-fire fa-fw text-primary"></i> {{ energy() }}
           </div>
           <div class="col-6">
             <span v-html="calculateEnergy(recipe.nutrition.calories)"></span>
@@ -54,7 +54,7 @@
 
 <script>
 
-import {calculateAmount, calculateEnergy} from "@/utils/utils";
+import {calculateAmount, calculateEnergy, energyHeading} from "@/utils/utils";
 
 export default {
   name: 'Nutrition',
@@ -68,6 +68,9 @@ export default {
     },
     calculateEnergy: function (x) {
       return calculateEnergy(x, this.ingredient_factor)
+    },
+    energy: function (x) {
+      return energyHeading()
     }
   }
 }
diff --git a/vue/src/utils/utils.js b/vue/src/utils/utils.js
index 3ad19b733..4afdf002d 100644
--- a/vue/src/utils/utils.js
+++ b/vue/src/utils/utils.js
@@ -175,6 +175,14 @@ export function convertEnergyToCalories(amount) {
     }
 }
 
+export function energyHeading() {
+    if (getUserPreference('use_kj')) {
+        return 'Energy'
+    } else {
+        return 'Calories'
+    }
+}
+
 /*
 * Utility functions to use OpenAPIs generically
 * */