diff --git a/public/images/ui/legacy/pbinfo_enemy_type.json b/public/images/ui/legacy/pbinfo_enemy_type.json
new file mode 100644
index 000000000..aab927f14
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_enemy_type.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 21,
+				"h": 460
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 23,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 46,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 69,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 92,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 115,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 138,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 161,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 184,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 207,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 230,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 253,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 276,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 299,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 322,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 345,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 368,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 391,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 414,
+						"w": 21,
+						"h": 23
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 21,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 437,
+						"w": 21,
+						"h": 23
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:d7423e5fc58b914373ec2dccdd15a444:c260e815ef717a8a7523b6509cc187e1:bacf33678e11ee465e1d949fffc5dec2$"
+	}
+}
diff --git a/public/images/ui/legacy/pbinfo_enemy_type.png b/public/images/ui/legacy/pbinfo_enemy_type.png
new file mode 100644
index 000000000..d89e360af
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_enemy_type.png differ
diff --git a/public/images/ui/legacy/pbinfo_player_type.json b/public/images/ui/legacy/pbinfo_player_type.json
new file mode 100644
index 000000000..b6be4dd4e
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_player_type.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 460
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 23,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 46,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 69,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "eletric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 92,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 115,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 138,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 161,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 184,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 207,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 230,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 253,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 276,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 299,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 322,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 345,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 368,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 391,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 414,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 437,
+						"w": 20,
+						"h": 23
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:b139d32bbbcec621e078626c2e13480b:86845e2a793b2bfffdcc07a60b09fb76:d43f9ea8795e21ec0026609410dfb7c5$"
+	}
+}
diff --git a/public/images/ui/legacy/pbinfo_player_type.png b/public/images/ui/legacy/pbinfo_player_type.png
new file mode 100644
index 000000000..1a8b82855
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_player_type.png differ
diff --git a/public/images/ui/pbinfo_enemy_type.json b/public/images/ui/pbinfo_enemy_type.json
new file mode 100644
index 000000000..ba1e3b1cb
--- /dev/null
+++ b/public/images/ui/pbinfo_enemy_type.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 460
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 23,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 46,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 69,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 92,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 115,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 138,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 161,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 184,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 207,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 230,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 253,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 276,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 299,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 322,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 345,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 368,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 391,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 414,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 25
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 437,
+						"w": 20,
+						"h": 23
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:d7423e5fc58b914373ec2dccdd15a444:c260e815ef717a8a7523b6509cc187e1:bacf33678e11ee465e1d949fffc5dec2$"
+	}
+}
diff --git a/public/images/ui/pbinfo_enemy_type.png b/public/images/ui/pbinfo_enemy_type.png
new file mode 100644
index 000000000..021a12007
Binary files /dev/null and b/public/images/ui/pbinfo_enemy_type.png differ
diff --git a/public/images/ui/pbinfo_player_type.json b/public/images/ui/pbinfo_player_type.json
new file mode 100644
index 000000000..b6be4dd4e
--- /dev/null
+++ b/public/images/ui/pbinfo_player_type.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 460
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 23,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 46,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 69,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "eletric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 92,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 115,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 138,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 161,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 184,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 207,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 230,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 253,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 276,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 299,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 322,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 345,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 368,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 391,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 414,
+						"w": 20,
+						"h": 23
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 29
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 23
+					},
+					"frame": {
+						"x": 0,
+						"y": 437,
+						"w": 20,
+						"h": 23
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:b139d32bbbcec621e078626c2e13480b:86845e2a793b2bfffdcc07a60b09fb76:d43f9ea8795e21ec0026609410dfb7c5$"
+	}
+}
diff --git a/public/images/ui/pbinfo_player_type.png b/public/images/ui/pbinfo_player_type.png
new file mode 100644
index 000000000..ad8895039
Binary files /dev/null and b/public/images/ui/pbinfo_player_type.png differ
diff --git a/src/loading-scene.ts b/src/loading-scene.ts
index e23b1d724..c59a0224d 100644
--- a/src/loading-scene.ts
+++ b/src/loading-scene.ts
@@ -36,10 +36,12 @@ export class LoadingScene extends SceneBase {
     this.loadAtlas('namebox', 'ui');
     this.loadImage('pbinfo_player', 'ui');
     this.loadImage('pbinfo_player_mini', 'ui');
+    this.loadAtlas('pbinfo_player_type', 'ui');
     this.loadAtlas('pbinfo_player_type1', 'ui');
     this.loadAtlas('pbinfo_player_type2', 'ui');
     this.loadImage('pbinfo_enemy_mini', 'ui');
     this.loadImage('pbinfo_enemy_boss', 'ui');
+    this.loadAtlas('pbinfo_enemy_type', 'ui');
     this.loadAtlas('pbinfo_enemy_type1', 'ui');
     this.loadAtlas('pbinfo_enemy_type2', 'ui');
     this.loadImage('overlay_lv', 'ui');
diff --git a/src/ui/battle-info.ts b/src/ui/battle-info.ts
index 1efa4d80e..d521a81a2 100644
--- a/src/ui/battle-info.ts
+++ b/src/ui/battle-info.ts
@@ -206,6 +206,7 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
     this.shinyIcon.setVisible(pokemon.isShiny());
 
     const types = pokemon.getTypes(true);
+    this.type1Icon.setTexture(`pbinfo_${this.player ? 'player' : 'enemy'}_type${types.length > 1 ? '1' : ''}`);
     this.type1Icon.setFrame(Type[types[0]].toLowerCase());
     this.type2Icon.setVisible(types.length > 1);
     if (types.length > 1)