diff --git a/src/components/blocks.tsx b/src/components/blocks.tsx
index 829965e..41f054b 100644
--- a/src/components/blocks.tsx
+++ b/src/components/blocks.tsx
@@ -1,27 +1,34 @@
-import { useState } from "react";
-import { Image } from "react-konva";
-import useImage from "use-image";
+import { useEffect, useState } from "react";
+import { Image as KonvaImage } from "react-konva";
+
+import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
 
 function Blocks() {
-	const [image] = useImage("/blocks/programmer-art/stone.png");
+	const [blocks, setBlocks] = useState<Block[]>([]);
+	const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
 
-	const [blocks, setBlocks] = useState<Block[]>([
-		{
-			name: "stone",
-			x: 0,
-			y: 0
-		},
-    {
-			name: "stone",
-			x: 1,
-			y: 1
-		},
-	]);
+	useEffect(() => {
+		const loadedImages: { [key: string]: HTMLImageElement } = {};
+
+		for (const name of Object.keys(blocksData)) {
+			const image = new Image();
+			image.src = `/blocks/programmer-art/${name}.png`;
+			loadedImages[name] = image;
+		}
+
+		setImages(loadedImages);
+		setBlocks([
+			{ name: "stone", x: 0, y: 0 },
+			{ name: "birch_log", x: 1, y: 1 },
+			{ name: "redstone_lamp", x: 2, y: 0 },
+			{ name: "dirt", x: 3, y: 1 }
+		]);
+	}, []);
 
 	return (
 		<>
 			{blocks.map((block, index) => (
-				<Image key={index} image={image} x={block.x * 16} y={block.y * 16} />
+				<KonvaImage key={index} image={images[block.name]} x={block.x * 16} y={block.y * 16} />
 			))}
 		</>
 	);