diff --git a/18-forkify/final/src/js/views/recipeView.js b/18-forkify/final/src/js/views/recipeView.js
index 0d6f637cb7..61aa9040ca 100644
--- a/18-forkify/final/src/js/views/recipeView.js
+++ b/18-forkify/final/src/js/views/recipeView.js
@@ -2,7 +2,12 @@ import View from './View.js';
 
 // import icons from '../img/icons.svg'; // Parcel 1
 import icons from 'url:../../img/icons.svg'; // Parcel 2
-import { Fraction } from 'fractional';
+
+// old (not working)
+// import { Fraction } from 'fractional';
+
+// new 
+import  Fraction from 'fraction.js';
 
 class RecipeView extends View {
   _parentElement = document.querySelector('.recipe');
@@ -127,8 +132,10 @@ class RecipeView extends View {
       <svg class="recipe__icon">
         <use href="${icons}#icon-check"></use>
       </svg>
-      <div class="recipe__quantity">${
-        ing.quantity ? new Fraction(ing.quantity).toString() : ''
+      <div class="recipe__quantity">
+      
+      ${
+        ing.quantity ? new Fraction(ing.quantity).toFraction(true) : ''
       }</div>
       <div class="recipe__description">
         <span class="recipe__unit">${ing.unit}</span>