diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
index 1d72ca837..3ec583c77 100644
--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -36,7 +36,7 @@
                 <td style="width: 1%; text-wrap: nowrap" class="pa-0">
                     <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
                 </td>
-                <td style="width: 1%; text-wrap: nowrap" class="pr-1">{{ i.amount * props.ingredientFactor }}</td>
+                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)"></td>
                 <td style="width: 1%; text-wrap: nowrap" class="pr-1">
                     <template v-if="i.unit"> {{ i.unit.name }}</template>
                 </td>
@@ -59,6 +59,8 @@
 <script lang="ts" setup>
 import {Ingredient} from "@/openapi";
 import {computed} from "vue";
+import {calculateFoodAmount} from "../../utils/number_utils";
+import {useUserPreferenceStore} from "../../stores/UserPreferenceStore";
 
 const ingredients = defineModel<Ingredient[]>({required: true})
 
diff --git a/vue3/src/components/display/ScalableNumber.vue b/vue3/src/components/display/ScalableNumber.vue
index 39d9398d9..f90737771 100644
--- a/vue3/src/components/display/ScalableNumber.vue
+++ b/vue3/src/components/display/ScalableNumber.vue
@@ -6,6 +6,8 @@
 
 <script lang="ts" setup>
 
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+
 const props = defineProps({
     number: Number,
     factor: {
@@ -22,6 +24,6 @@ import {calculateFoodAmount} from "@/utils/number_utils.ts";
  * @return {number | string}
  */
 function calculateAmount(x) {
-    return calculateFoodAmount(x, props.factor) // TODO reactive bind props
+    return calculateFoodAmount(x, props.factor, useUserPreferenceStore().userSettings.useFractions)
 }
 </script>
diff --git a/vue3/src/utils/number_utils.ts b/vue3/src/utils/number_utils.ts
index a7521a1d0..598e2a8c3 100644
--- a/vue3/src/utils/number_utils.ts
+++ b/vue3/src/utils/number_utils.ts
@@ -1,8 +1,3 @@
-function getUserPreference(pref: string) {
-    return false // TODO only placeholder, add real function
-}
-
-
 /**
  * round to the number of decimals specified in user preferences
  * @param num number to round
@@ -16,9 +11,10 @@ export function roundDecimals(num: number) {
  * calculates the amount of food, based on the factor and converts it to a fraction if that is the users preference
  * @param amount food amount to calculate based upon
  * @param factor factor to scale food amount by
+ * @param useFractions if the returned value should be a fraction or not
  */
-export function calculateFoodAmount(amount: number, factor: number) {
-    if (getUserPreference("use_fractions")) {
+export function calculateFoodAmount(amount: number, factor: number, useFractions: boolean = false) {
+    if (useFractions) {
         let return_string = ""
         let fraction = frac(amount * factor, 16, true)