diff --git a/Frontend/public/media/creeper.png b/Frontend/public/media/creeper.png
new file mode 100644
index 0000000..697a2f2
Binary files /dev/null and b/Frontend/public/media/creeper.png differ
diff --git a/Frontend/src/app/components/creeper.tsx b/Frontend/src/app/components/creeper.tsx
new file mode 100644
index 0000000..f89033c
--- /dev/null
+++ b/Frontend/src/app/components/creeper.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+/**
+ * A creeper image.
+ *
+ * @returns the creeper jsx
+ */
+const Creeper = (): JSX.Element => (
+	<Image
+		src="/media/creeper.png"
+		alt="A Minecraft Creeper"
+		width={216}
+		height={216}
+	/>
+);
+export default Creeper;