diff --git a/public/styles/bbs/melding.css b/public/styles/bbs/melding.css
index 3ab0956..6ed3551 100644
--- a/public/styles/bbs/melding.css
+++ b/public/styles/bbs/melding.css
@@ -16,15 +16,4 @@ table {
 			color: #ff7400;
 		}
 	}
-
-	tbody tr:hover {
-		background-color: #4f4f4f;
-	}
-
-	& tr,
-	th,
-	td {
-		border: 1px solid #fff;
-		padding: 7px;
-	}
 }
diff --git a/public/styles/common/base.css b/public/styles/common/base.css
index e4eb943..7f6bb17 100644
--- a/public/styles/common/base.css
+++ b/public/styles/common/base.css
@@ -32,6 +32,17 @@ table {
 	thead th {
 		background-color: var(--bg-dark-color);
 	}
+
+	tbody tr:hover {
+		background-color: #4f4f4f;
+	}
+
+	& tr,
+	th,
+	td {
+		border: 1px solid #515151;
+		padding: 7px;
+	}
 }
 
 ul {
@@ -118,3 +129,37 @@ input[type="checkbox"] {
 		color: var(--primary-light-color);
 	}
 }
+
+.help {
+	display: inline-block;
+	vertical-align: middle;
+	padding: 0px 8px;
+
+	&:after {
+		content: "?";
+		font-size: 24px;
+	}
+}
+
+.tooltip-wrapper {
+	position: relative;
+
+	.tooltip {
+		visibility: hidden;
+		background-color: var(--bg-light-color);
+		position: absolute;
+		top: -42px;
+		color: var(--text-color);
+		text-align: center;
+		border-radius: 6px;
+		padding: 8px;
+		opacity: 0;
+		transition: opacity 0.3s;
+		z-index: 1;
+	}
+
+	&:hover .tooltip {
+		visibility: visible;
+		opacity: 1;
+	}
+}
diff --git a/public/styles/kh3/ingredients.css b/public/styles/kh3/ingredients.css
new file mode 100644
index 0000000..619d45b
--- /dev/null
+++ b/public/styles/kh3/ingredients.css
@@ -0,0 +1,5 @@
+li {
+	max-height: 3rem;
+	min-height: 3rem;
+	align-content: center;
+}
diff --git a/src/kh3/ingredient.rs b/src/kh3/ingredient.rs
index 3516e72..75dd4a1 100644
--- a/src/kh3/ingredient.rs
+++ b/src/kh3/ingredient.rs
@@ -1,8 +1,8 @@
-use std::path::PathBuf;
+use std::{fmt::Display, path::PathBuf};
 
 use serde::Deserialize;
 
-#[derive(Debug, Deserialize, PartialEq, Eq)]
+#[derive(Debug, Deserialize, PartialEq, Eq, PartialOrd, Ord)]
 #[serde(rename_all = "lowercase")]
 pub enum IngredientGroup {
 	Meat,
@@ -15,6 +15,23 @@ pub enum IngredientGroup {
 	Special,
 }
 
+impl Display for IngredientGroup {
+	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+		let str = match self {
+			IngredientGroup::Meat => "Meat",
+			IngredientGroup::Seafood => "Seafood",
+			IngredientGroup::Vegetable => "Vegetable",
+			IngredientGroup::Mushroom => "Mushroom",
+			IngredientGroup::Herb => "Herb",
+			IngredientGroup::Fruit => "Fruit",
+			IngredientGroup::Other => "Other",
+			IngredientGroup::Special => "Special",
+		};
+
+		f.write_str(str)
+	}
+}
+
 #[derive(Debug, Deserialize, PartialEq, Eq)]
 pub struct Ingredient {
 	pub name: String,
@@ -23,13 +40,6 @@ pub struct Ingredient {
 	pub locations: Vec<Location>,
 }
 
-#[derive(Debug, Deserialize, PartialEq, Eq)]
-pub struct Location {
-	pub world: String,
-	pub room: String,
-	pub note: Option<String>,
-}
-
 impl Ingredient {
 	pub fn import(path: &str) -> Vec<Ingredient> {
 		let mut ingredients: Vec<Ingredient> = vec![];
@@ -53,6 +63,15 @@ impl Ingredient {
 			}
 		}
 
+		ingredients.sort_by(|a, b| a.group.cmp(&b.group));
+
 		ingredients
 	}
 }
+
+#[derive(Debug, Deserialize, PartialEq, Eq)]
+pub struct Location {
+	pub world: String,
+	pub room: String,
+	pub note: Option<String>,
+}
diff --git a/templates/pages/index.html b/templates/pages/index.html
index dfc9770..072f306 100644
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -24,6 +24,7 @@
 		<h1>Kingdom Hearts III</h1>
 		<ul>
 			<li><a href="./kh3/drops.html">Material Drops</a></li>
+			<li><a href="./kh3/ingredients.html">Ingredients</a></li>
 			<li><a href="./kh3/food-sim.html">Food Simulator</a></li>
 		</ul>
 	{% endif %}
diff --git a/templates/pages/kh3/ingredients.html b/templates/pages/kh3/ingredients.html
index 7771ff4..a28a2c0 100644
--- a/templates/pages/kh3/ingredients.html
+++ b/templates/pages/kh3/ingredients.html
@@ -3,12 +3,30 @@
 {% block title %}KH3 - Ingredients{% endblock %}
 
 {% block head %}
-	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/common/ingredients.css") }}"></link>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh3/ingredients.css") }}"></link>
 	<script
 		type="module"
-		src="{{ crate::find_hash("/public/scripts/common/ingredients.js") }}"
+		src="{{ crate::find_hash("/public/scripts/kh3/ingredients.js") }}"
 	></script>
 {% endblock %}
 
 {% block content %}
+	{% for ingredient in ingredients %}
+	<div>
+		<h1>{{ingredient.name}}</h1>
+		<ul>
+		{% for location in ingredient.locations %}
+			<li class="tooltip-wrapper" {% if location.note.is_some() %}style="cursor: help"{% endif %}>
+				{{location.world+}} - {{+location.room}}
+				{% match location.note %}
+					{% when Some with (val) %}
+						<div class="help"></div>
+						<div class="tooltip">{{ val }}</div>
+					{% when None %}
+				{% endmatch %}
+			</li>
+		{% endfor %}
+		</ul>
+	</div>
+	{% endfor %}
 {% endblock %}