diff --git a/main.js b/main.js
index 3c05123..4f4f1aa 100644
--- a/main.js
+++ b/main.js
@@ -90,10 +90,23 @@ async function addMenuItem(food) {
 	const nodeRoot = node.querySelector(".menu-item");
 	const itemAmount = node.querySelector(".menu-item-amount");
 	const kcalAmount = node.querySelector(".menu-item-kcal-for-amount");
+	const score = node.querySelector(".menu-item-score");
 	nodeRoot.setAttribute("data-food-name", food.name);
 	node.querySelector(".menu-item-name").textContent = food.name;
 	node.querySelector(".menu-item-kcal").textContent = `${food.kcal} kcal/100${food.unit}`;
 	node.querySelector(".menu-item-unit").textContent = food.unit;
+
+	score.textContent = food.density.toFixed(1);
+	score.classList.add(getScoreColor(food.density, food.unit));
+
+	node.querySelector(".menu-item-info-unit").textContent = `Nährwerte pro 100${food.unit}`;
+	node.querySelector(".menu-item-info-energy-value").textContent = `${food.kcal}kcal`;
+	node.querySelector(".menu-item-info-fat-value").textContent = `${food.fat}g`;
+	node.querySelector(".menu-item-info-carbs-value").textContent = `${food.carbs}g`;
+	node.querySelector(".menu-item-info-sugar-value").textContent = `${food.sugar}g`;
+	node.querySelector(".menu-item-info-proteins-value").textContent = `${food.proteins}g`;
+	node.querySelector(".menu-item-info-alc-value").textContent = `${food.alc}%`;
+
 	node.querySelector(".delete-menu-item").addEventListener("click", () => {
 		foodMenu.removeChild(nodeRoot);
 		updateSummary();
@@ -126,4 +139,26 @@ function updateSummary() {
 
 	summaryKcal.textContent = sum;
 	summary.style.display = sum > 0 ? "block" : "none";
+}
+
+function getScoreColor(density, unit) {
+	switch (unit) {
+		case "g": {
+			if (density >= 2.4) {
+				return "red"
+			} else if (density >= 1.7) {
+				return "orange"
+			} else {
+				return "green";
+			}
+		}
+		
+		case "ml": {
+			if (density >= 0.3) {
+				return "red"
+			} else {
+				return "green";
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 4f2f048..1354087 100644
--- a/style.css
+++ b/style.css
@@ -127,7 +127,7 @@ header {
 }
 
 .menu-item-kcal {
-	color: darkgray;
+	color: #333;
 	font-size: 0.65em;
 	transform: translateY(-0.15em);
 	display: inline-block;
@@ -220,4 +220,89 @@ input[type=number] {
 .summary-name {
 	display: inline;
 	font-weight: bold;
+}
+
+.menu-item-info-container {
+	margin-right: 1em;
+	position: relative;
+	float: right;
+}
+
+.menu-item-info-hover-button {
+	color: #333;
+	font-size: 0.75em;
+	text-decoration: underline;
+}
+
+.menu-item-info {
+	z-index: 1;
+	left: 0;
+	display: none;
+	width: 12em;
+	position: absolute;
+	background-color: #eee;
+	border: 1px solid darkgray;
+	box-sizing: border-box;
+	border-radius: 0.15em;
+	padding: 0.25em 0;
+}
+
+.menu-item-info > div {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	padding: 0 0.25em;
+}
+
+.menu-item-info-energy {
+	padding-top: 0.35em !important;
+}
+
+.menu-item-info-hover-button {
+	cursor: pointer;
+	user-select: none;
+}
+
+.menu-item-info-hover-button:hover + .menu-item-info {
+	display: block;
+}
+
+.menu-item-kcal-for-amount {
+	text-align: right;
+	display: inline-block;
+	min-width: 3em;
+}
+
+.menu-item-info-unit {
+	display: block !important;
+	padding-bottom: 0.35em !important;
+	text-align: center;
+	font-weight: bold;
+	border-bottom: 1px solid darkgray;
+}
+
+.menu-item-info-sugar {
+	padding-left: 0.25em;
+}
+
+.menu-item-score {
+	float: right;
+	margin-right: 1em;
+	font-size: 0.9rem;
+	padding: 0em 0.5em;
+	border-radius: 0.25em;
+	color: white;
+	user-select: none;
+}
+
+.menu-item-score.green {
+	background-color: darkgreen;
+}
+
+.menu-item-score.orange {
+	background-color: #e57e00;
+}
+
+.menu-item-score.red {
+	background-color: darkred;
 }
\ No newline at end of file
diff --git a/templates/menu-item.html b/templates/menu-item.html
index 9086a27..d2ea993 100644
--- a/templates/menu-item.html
+++ b/templates/menu-item.html
@@ -6,8 +6,41 @@
 		<a class="delete-menu-item"><span class="material-icons">delete</span></a>
 
 		<div class="menu-item-amount-container">
-			<span class="menu-item-kcal-for-amount">123</span>
+			<span class="menu-item-kcal-for-amount"></span>
 			<span class="menu-item-kcal-unit">kcal</span>/<input class="menu-item-amount" type="number" pattern="[0-9]+"><span class="menu-item-unit"></span>
 		</div>
+
+		<span class="menu-item-info-container">
+			<span class="menu-item-info-hover-button">Nährwerte</span>
+			<div class="menu-item-info">
+				<div class="menu-item-info-unit"></div>
+				<div class="menu-item-info-energy">
+					<span class="name">Energie</span>
+					<span class="menu-item-info-energy-value"></span>
+				</div>
+				<div class="menu-item-info-fat">
+					<span class="name">Fett</span>
+					<span class="menu-item-info-fat-value"></span>
+				</div>
+				<div class="menu-item-info-carbs">
+					<span class="name">Kohlenhydrate</span>
+					<span class="menu-item-info-carbs-value"></span>
+				</div>
+				<div class="menu-item-info-sugar">
+					<span class="name">- davon Zucker</span>
+					<span class="menu-item-info-sugar-value"></span>
+				</div>
+				<div class="menu-item-info-proteins">
+					<span class="name">Eiweiß</span>
+					<span class="menu-item-info-proteins-value"></span>
+				</div>
+				<div class="menu-item-info-alc">
+					<span class="name">Alkohol</span>
+					<span class="menu-item-info-alc-value"></span>
+				</div>
+			</div>
+		</span>
+
+		<span class="menu-item-score" title="Bewertung"></span>
 	</div>
 </template>
\ No newline at end of file