diff --git a/HtmlUtil.ts b/HtmlUtil.ts
index 74f1ab1..ab95799 100644
--- a/HtmlUtil.ts
+++ b/HtmlUtil.ts
@@ -31,8 +31,5 @@ export const getButtonListByClassName = (name: string): Array<HTMLButtonElement>
 }
 
 export const showFoodPreview = (show: boolean) => {
-  if (!show) {
-    getDivById('food-preview').innerHTML = '';
-  }
   getDivById('food-preview').classList = `add-food-form-item ${show ? 'display-block' : 'display-none'}`;
 }
diff --git a/index.html b/index.html
index 9238570..c716f02 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,29 @@
                 </div>
                 <button class="add-btn" id="add-food-btn">Add Food</button>
             </div>
-            <div class="add-food-form-item display-none" id="food-preview">
+            <div class="display-none" id="food-preview">
+                <div class="nutrition-summary">
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="calorieValuePreview">0</div>
+                        <div class="nutrition-label">Calories</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="proteinValuePreview">0</div>
+                        <div class="nutrition-label">Protein (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="fatValuePreview">0</div>
+                        <div class="nutrition-label">Fat (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="carboValuePreview">0</div>
+                        <div class="nutrition-label">Carbs (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="fiberValuePreview">0</div>
+                        <div class="nutrition-label">Fiber (g)</div>
+                    </div>
+                </div>
             </div>
         </div>
 
diff --git a/index.ts b/index.ts
index 94aca95..9aa4b0b 100644
--- a/index.ts
+++ b/index.ts
@@ -54,14 +54,12 @@ const previewCalories = () => {
   const foodData: FoodItem = getFoodItemByName(foodSelect.value);
   const proportion = getFoodProportion(grams, foodData);
 
-  const textArray: string[] = [];
-  textArray.push(`Calories in ${grams}g: ${proportion.info.calories}; `);
-  textArray.push(`Protein: ${proportion.info.protein}g; `);
-  textArray.push(`Fat: ${proportion.info.fat}g; `);
-  textArray.push(`Carbohydrates: ${proportion.info.carbs}g; `);
-  textArray.push(`Fiber: ${proportion.info.fiber}g;`);
+  getDivById('calorieValuePreview').textContent = proportion.info.calories.toString();
+  getDivById('proteinValuePreview').textContent = (Math.round(proportion.info.protein * 10) / 10).toString ();
+  getDivById('fatValuePreview').textContent = (Math.round(proportion.info.fat * 10) / 10).toString ();
+  getDivById('carboValuePreview').textContent = (Math.round(proportion.info.carbs * 10) / 10).toString ();
+  getDivById('fiberValuePreview').textContent = (Math.round(proportion.info.fiber * 10) / 10).toString ();
 
-  getDivById('food-preview').innerHTML = textArray.join('');
   showFoodPreview(true);
 }
 
@@ -70,7 +68,7 @@ const addEvents = () => {
     previewCalories();
   });
 
-  getInputById('gramAmount')?.addEventListener('change', () => {
+  getInputById('gramAmount').addEventListener('change', () => {
     previewCalories();
   });
 
diff --git a/style.css b/style.css
index f10af86..c1f3d8f 100644
--- a/style.css
+++ b/style.css
@@ -88,11 +88,6 @@ h1 {
     overflow: hidden;
 }
 
-.add-food-form-item {
-  margin-top: 15px;
-  margin-left: 3px;
-}
-
 .display-none {
   display: none;
 }