diff --git a/public/images/types.png b/public/images/types.png
index 303a88752..8b644f104 100644
Binary files a/public/images/types.png and b/public/images/types.png differ
diff --git a/public/images/ui/legacy/pbinfo_enemy_type1.json b/public/images/ui/legacy/pbinfo_enemy_type1.json
new file mode 100644
index 000000000..1426aaabf
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_enemy_type1.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type1.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 14,
+				"h": 280
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 14,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 42,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 56,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 98,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 112,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 126,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 140,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 154,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 182,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 196,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 210,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 224,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 238,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 252,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 266,
+						"w": 14,
+						"h": 14
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:5eeed0fd47b10bea43eb042742951a2c:18ec72659806247c374198dbea2b508b:d9090a2a3d5b7d3d6bf6fbf4664ed894$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/legacy/pbinfo_enemy_type1.png b/public/images/ui/legacy/pbinfo_enemy_type1.png
new file mode 100644
index 000000000..f882e56ac
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_enemy_type1.png differ
diff --git a/public/images/ui/legacy/pbinfo_enemy_type2.json b/public/images/ui/legacy/pbinfo_enemy_type2.json
new file mode 100644
index 000000000..16d7f2901
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_enemy_type2.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type2.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 14,
+				"h": 280
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 14,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 42,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 56,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 98,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 112,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 126,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 140,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 154,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 182,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 196,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 210,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 224,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 238,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 252,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 7,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 266,
+						"w": 14,
+						"h": 14
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:f33a2f3d78318db95e578750f8418dcf:f9845349cbbd66051248f7bf2b97242b:326f8fcf48638c7ccdfd35a821074636$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/legacy/pbinfo_enemy_type2.png b/public/images/ui/legacy/pbinfo_enemy_type2.png
new file mode 100644
index 000000000..f882e56ac
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_enemy_type2.png differ
diff --git a/public/images/ui/legacy/pbinfo_player_type1.json b/public/images/ui/legacy/pbinfo_player_type1.json
new file mode 100644
index 000000000..8852dc592
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_player_type1.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type1.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 14,
+				"h": 280
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 14,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 42,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 56,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 98,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 112,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 126,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 140,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 154,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 182,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 196,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 210,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 224,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 238,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 252,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 1,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 266,
+						"w": 14,
+						"h": 14
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:abca84c1d2a5c6bab227a837d0b926c0:7895d17a99ec80c2dc4bbb911e7d5179:93f98ea5afd2a1f9e96b57887fcf0f12$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/legacy/pbinfo_player_type1.png b/public/images/ui/legacy/pbinfo_player_type1.png
new file mode 100644
index 000000000..f882e56ac
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_player_type1.png differ
diff --git a/public/images/ui/legacy/pbinfo_player_type2.json b/public/images/ui/legacy/pbinfo_player_type2.json
new file mode 100644
index 000000000..8ec8d2fee
--- /dev/null
+++ b/public/images/ui/legacy/pbinfo_player_type2.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type2.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 14,
+				"h": 280
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 14,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 42,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 56,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 98,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 112,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 126,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 140,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 154,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 182,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 196,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 210,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 224,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 238,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 252,
+						"w": 14,
+						"h": 14
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 4,
+						"y": 0,
+						"w": 14,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 266,
+						"w": 14,
+						"h": 14
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:bc6d813697bf9ca0613ae094c90cf731:77dbf38e64e4d7d7f8eb52378ea236ee:fdbd20cb93fcc905972c4b62203160f4$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/legacy/pbinfo_player_type2.png b/public/images/ui/legacy/pbinfo_player_type2.png
new file mode 100644
index 000000000..f882e56ac
Binary files /dev/null and b/public/images/ui/legacy/pbinfo_player_type2.png differ
diff --git a/public/images/ui/pbinfo_enemy_type1.json b/public/images/ui/pbinfo_enemy_type1.json
new file mode 100644
index 000000000..0c57b944f
--- /dev/null
+++ b/public/images/ui/pbinfo_enemy_type1.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type1.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 240
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 12,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 24,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 36,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 48,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 60,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 72,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 96,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 108,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 120,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 132,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 144,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 156,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 180,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 192,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 204,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 216,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 2,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 228,
+						"w": 20,
+						"h": 12
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:122a70d968766a2baf847be127f828a8:956c7b22b608e1c7ef09886b4598f77d:d9090a2a3d5b7d3d6bf6fbf4664ed894$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/pbinfo_enemy_type1.png b/public/images/ui/pbinfo_enemy_type1.png
new file mode 100644
index 000000000..89b84d7f6
Binary files /dev/null and b/public/images/ui/pbinfo_enemy_type1.png differ
diff --git a/public/images/ui/pbinfo_enemy_type2.json b/public/images/ui/pbinfo_enemy_type2.json
new file mode 100644
index 000000000..6082ac591
--- /dev/null
+++ b/public/images/ui/pbinfo_enemy_type2.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_enemy_type2.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 240
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 12,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 24,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 36,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 48,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 60,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 72,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 96,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 108,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 120,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 132,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 144,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 156,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 180,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 192,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 204,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 216,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 21,
+						"h": 15
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 228,
+						"w": 20,
+						"h": 12
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:28382967fafcd9c09fb17bc1e9e27b9e:b951030ce446d5b9ebe3d4cb4dd98160:326f8fcf48638c7ccdfd35a821074636$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/pbinfo_enemy_type2.png b/public/images/ui/pbinfo_enemy_type2.png
new file mode 100644
index 000000000..d1f9818d7
Binary files /dev/null and b/public/images/ui/pbinfo_enemy_type2.png differ
diff --git a/public/images/ui/pbinfo_player_type1.json b/public/images/ui/pbinfo_player_type1.json
new file mode 100644
index 000000000..0a1ec6f25
--- /dev/null
+++ b/public/images/ui/pbinfo_player_type1.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type1.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 240
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 12,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 24,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 36,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 48,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 60,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 72,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 96,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 108,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 120,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 132,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 144,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 156,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 180,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 192,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 204,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 216,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 6,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 228,
+						"w": 20,
+						"h": 12
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:bddba8ac93fb7024c72f0bc52d4d2ed6:90bc101068569694db1b94c2ffeb85fb:93f98ea5afd2a1f9e96b57887fcf0f12$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/pbinfo_player_type1.png b/public/images/ui/pbinfo_player_type1.png
new file mode 100644
index 000000000..d1f9818d7
Binary files /dev/null and b/public/images/ui/pbinfo_player_type1.png differ
diff --git a/public/images/ui/pbinfo_player_type2.json b/public/images/ui/pbinfo_player_type2.json
new file mode 100644
index 000000000..0680f0f85
--- /dev/null
+++ b/public/images/ui/pbinfo_player_type2.json
@@ -0,0 +1,440 @@
+{
+	"textures": [
+		{
+			"image": "pbinfo_player_type2.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 240
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "bug",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 12,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dark",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 24,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "dragon",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 36,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "electric",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 48,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 60,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fighting",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 72,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "fire",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "flying",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 96,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ghost",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 108,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "grass",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 120,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ground",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 132,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "ice",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 144,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "normal",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 156,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "poison",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 168,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "psychic",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 180,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "rock",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 192,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "steel",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 204,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "water",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 216,
+						"w": 20,
+						"h": 12
+					}
+				},
+				{
+					"filename": "stellar",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 23,
+						"h": 18
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 20,
+						"h": 12
+					},
+					"frame": {
+						"x": 0,
+						"y": 228,
+						"w": 20,
+						"h": 12
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:9c99a0c6419b5d2759bec99ca13bf016:280069e733959fb8ddc0fb57c308edab:fdbd20cb93fcc905972c4b62203160f4$"
+	}
+}
\ No newline at end of file
diff --git a/public/images/ui/pbinfo_player_type2.png b/public/images/ui/pbinfo_player_type2.png
new file mode 100644
index 000000000..89b84d7f6
Binary files /dev/null and b/public/images/ui/pbinfo_player_type2.png differ
diff --git a/public/images/ui/type_bgs.png b/public/images/ui/type_bgs.png
index 6e682d9c3..91d75d622 100644
Binary files a/public/images/ui/type_bgs.png and b/public/images/ui/type_bgs.png differ
diff --git a/src/loading-scene.ts b/src/loading-scene.ts
index 9bffdb044..f7535ed30 100644
--- a/src/loading-scene.ts
+++ b/src/loading-scene.ts
@@ -36,8 +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_type1', 'ui');
+    this.loadAtlas('pbinfo_player_type2', 'ui');
     this.loadImage('pbinfo_enemy_mini', 'ui');
     this.loadImage('pbinfo_enemy_boss', 'ui');
+    this.loadAtlas('pbinfo_enemy_type1', 'ui');
+    this.loadAtlas('pbinfo_enemy_type2', 'ui');
     this.loadImage('overlay_lv', 'ui');
     this.loadAtlas('numbers', 'ui');
     this.loadAtlas('numbers_red', 'ui');
diff --git a/src/ui/battle-info.ts b/src/ui/battle-info.ts
index e6c2c3b5c..1efa4d80e 100644
--- a/src/ui/battle-info.ts
+++ b/src/ui/battle-info.ts
@@ -37,6 +37,8 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
   private hpBarSegmentDividers: Phaser.GameObjects.Rectangle[];
   private levelNumbersContainer: Phaser.GameObjects.Container;
   private hpNumbersContainer: Phaser.GameObjects.Container;
+  private type1Icon: Phaser.GameObjects.Sprite;
+  private type2Icon: Phaser.GameObjects.Sprite;
   private expBar: Phaser.GameObjects.Image;
   private expMaskRect: Phaser.GameObjects.Graphics;
 
@@ -123,6 +125,14 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
     this.levelNumbersContainer = this.scene.add.container(9.5, (this.scene as BattleScene).uiTheme ? 0 : -0.5);
     this.levelContainer.add(this.levelNumbersContainer);
 
+    this.type1Icon = this.scene.add.sprite(player ? -139 : -15, player ? -17 : -15.5, `pbinfo_${player ? 'player' : 'enemy'}_type1`);
+    this.type1Icon.setOrigin(0, 0);
+    this.add(this.type1Icon);
+
+    this.type2Icon = this.scene.add.sprite(player ? -139 : -15, player ? -1 : -2.5, `pbinfo_${player ? 'player' : 'enemy'}_type2`);
+    this.type2Icon.setOrigin(0, 0);
+    this.add(this.type2Icon);
+
     if (this.player) {
       this.hpNumbersContainer = this.scene.add.container(-15, 10);
       this.add(this.hpNumbersContainer);
@@ -195,6 +205,12 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
 
     this.shinyIcon.setVisible(pokemon.isShiny());
 
+    const types = pokemon.getTypes(true);
+    this.type1Icon.setFrame(Type[types[0]].toLowerCase());
+    this.type2Icon.setVisible(types.length > 1);
+    if (types.length > 1)
+      this.type2Icon.setFrame(Type[types[1]].toLowerCase());
+
     if (this.player) {
       this.expMaskRect.x = (pokemon.levelExp / getLevelTotalExp(pokemon.level, pokemon.species.growthRate)) * 510;
       this.lastExp = pokemon.exp;
@@ -220,6 +236,11 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
     const offsetElements = [ this.nameText, this.genderText, this.teraIcon, this.splicedIcon, this.statusIndicator, this.levelContainer ];
     offsetElements.forEach(el => el.y += 1.5 * (mini ? -1 : 1));
 
+    [ this.type1Icon, this.type2Icon ].forEach(el => {
+      el.x += 4 * (mini ? 1 : -1);
+      el.y += -8 * (mini ? 1 : -1);
+    });
+
     this.shinyIcon.setPositionRelative(this.levelContainer, -12, -5);
 
     const toggledElements = [ this.hpNumbersContainer, this.expBar ];
@@ -310,6 +331,12 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
           this.ownedIcon.setAlpha(this.statusIndicator.visible ? 0 : 1);
       }
 
+      const types = pokemon.getTypes(true);
+      this.type1Icon.setFrame(Type[types[0]].toLowerCase());
+      this.type2Icon.setVisible(types.length > 1);
+      if (types.length > 1)
+        this.type2Icon.setFrame(Type[types[1]].toLowerCase());
+
       const updateHpFrame = () => {
         const hpFrame = this.hpBar.scaleX > 0.5 ? 'high' : this.hpBar.scaleX > 0.25 ? 'medium' : 'low';
         if (hpFrame !== this.lastHpFrame) {