diff --git a/app/js/components/item-info.js b/app/js/components/item-info.js
index 22e2cdd..4908824 100644
--- a/app/js/components/item-info.js
+++ b/app/js/components/item-info.js
@@ -10,22 +10,48 @@ Vue.component("item-info", {
 		}
 	},
   template: /*html*/`
-    <div>
-      <div class="row">
-        <div class="col-md-3">
-					<item-preview :item="item"/>
-        </div>
-        <div class="col-md-9">
-					<item-detail :item="item"/>
-        </div>
-      </div>
+		<div>
 			<div class="row">
-				<div v-for="recipe in recipes" class="col-md-2">
-					<recipe-info :recipe="recipe"/>
+				<div class="col-md-3">
+					<div class="card">
+						<div class="card-header">
+							Preview
+						</div>
+						<div class="card-body">
+							<item-preview :item="item"/>
+						</div>
+					</div>
+				</div>
+				<div class="col-md-9">
+					<div class="card">
+						<div class="card-header">
+							Details
+						</div>
+						<div class="card-body">
+							<item-detail :item="item"/>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-12">
+					<div class="card">
+						<div class="card-header">
+							Recipes
+						</div>
+						<div class="card-body">
+							<div class="row">
+								<div v-for="recipe in recipes" class="col-md-2">
+									<recipe-info :recipe="recipe"/>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="row">
 				<pre class="col-md-12">
+Debug
 {{ JSON.stringify(item, null, '\t') }}
 {{ JSON.stringify(recipes, null, '\t') }}
 				</pre>
diff --git a/app/js/components/item-preview.js b/app/js/components/item-preview.js
index 8e82914..9c52ab9 100644
--- a/app/js/components/item-preview.js
+++ b/app/js/components/item-preview.js
@@ -43,7 +43,7 @@ Vue.component("item-preview-inventoryimage", {
 	computed: {
 		imgsrc: function(){
 			if (this.item.inventory_image)
-				return `textures/${this.item.inventory_image}`;
+				return `textures/${mtinfo.stripimagetransforms(this.item.inventory_image)}`;
 			else
 				return "pics/unknown_node.png";
 		}
diff --git a/app/js/components/recipe-info.js b/app/js/components/recipe-info.js
index dec088a..b7886c8 100644
--- a/app/js/components/recipe-info.js
+++ b/app/js/components/recipe-info.js
@@ -3,12 +3,33 @@
 Vue.component("recipe-info", {
   props: ["recipe"],
   template: /*html*/`
-		<div>
-			<recipe-info-normal v-if="recipe.type == 'normal'" :recipe="recipe"/>
+		<div class="card">
+			<div class="card-header">
+				{{ recipe.type }}
+			</div>
+			<div class="card-body">
+				<recipe-info-normal v-if="recipe.type == 'normal'" :recipe="recipe"/>
+				<recipe-info-cooking v-if="recipe.type == 'cooking'" :recipe="recipe"/>
+				Output: <b>{{ recipe.output }}</b>
+			</div>
 		</div>
   `
 });
 
+Vue.component("recipe-info-cooking", {
+	props: ["recipe"],
+	computed: {
+		item: function(){
+			return mtinfo.items[this.recipe.items[0]];
+		}
+	},
+	template: /*html*/`
+		<div>
+			<item-preview :item="item" size="64"/>
+			Cook-time: <b>{{ recipe.width }}</b>
+		</div>
+	`
+});
 
 Vue.component("recipe-info-normal", {
   props: ["recipe"],