diff --git a/public/audio/se/egg_crack.wav b/public/audio/se/egg_crack.wav
new file mode 100644
index 000000000..33d587199
Binary files /dev/null and b/public/audio/se/egg_crack.wav differ
diff --git a/public/audio/se/egg_hatch.wav b/public/audio/se/egg_hatch.wav
new file mode 100644
index 000000000..74ddf340a
Binary files /dev/null and b/public/audio/se/egg_hatch.wav differ
diff --git a/public/images/arenas/end_a.json b/public/images/arenas/end_a.json
new file mode 100644
index 000000000..84841f938
--- /dev/null
+++ b/public/images/arenas/end_a.json
@@ -0,0 +1,356 @@
+{
+	"textures": [
+		{
+			"image": "end_a.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 155,
+				"h": 155
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "0001.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0002.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0003.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 31,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0004.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 31,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0015.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 31,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0016.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 31,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0005.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 62,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0006.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 62,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0013.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 62,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0014.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 62,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0007.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 93,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0008.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 93,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0011.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 93,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0012.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 93,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0009.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 124,
+						"w": 147,
+						"h": 31
+					}
+				},
+				{
+					"filename": "0010.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 43,
+						"y": 101,
+						"w": 147,
+						"h": 31
+					},
+					"frame": {
+						"x": 0,
+						"y": 124,
+						"w": 147,
+						"h": 31
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:9ddda91648b3a6f5c83264a9a262c3fb:b181efebba9037b1ad36bfc07644d00c:c996185eda07f9aa7275cf97f1e12600$"
+	}
+}
diff --git a/public/images/arenas/end_a.png b/public/images/arenas/end_a.png
new file mode 100644
index 000000000..eeaef65eb
Binary files /dev/null and b/public/images/arenas/end_a.png differ
diff --git a/public/images/arenas/end_b.json b/public/images/arenas/end_b.json
new file mode 100644
index 000000000..ee143f547
--- /dev/null
+++ b/public/images/arenas/end_b.json
@@ -0,0 +1,356 @@
+{
+	"textures": [
+		{
+			"image": "end_b.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 170,
+				"h": 170
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "0001.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0002.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0003.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 34,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0004.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 34,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0015.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 34,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0016.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 34,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0005.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 68,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0006.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 68,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0013.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 68,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0014.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 68,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0007.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 102,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0008.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 102,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0011.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 102,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0012.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 102,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0009.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 136,
+						"w": 130,
+						"h": 34
+					}
+				},
+				{
+					"filename": "0010.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 151,
+						"y": 57,
+						"w": 130,
+						"h": 34
+					},
+					"frame": {
+						"x": 0,
+						"y": 136,
+						"w": 130,
+						"h": 34
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:dbc0ac20ee630374767e48652fa46ecc:bcfb7cc73e857d281ae25dcd682b0ab9:d7a55f5b7e3d4fb12a18cf5e183237c5$"
+	}
+}
diff --git a/public/images/arenas/end_b.png b/public/images/arenas/end_b.png
new file mode 100644
index 000000000..37a59201d
Binary files /dev/null and b/public/images/arenas/end_b.png differ
diff --git a/public/images/arenas/end_b_1.png b/public/images/arenas/end_b_1.png
new file mode 100644
index 000000000..a79e8d0e0
Binary files /dev/null and b/public/images/arenas/end_b_1.png differ
diff --git a/public/images/arenas/end_b_2.png b/public/images/arenas/end_b_2.png
new file mode 100644
index 000000000..8753543b8
Binary files /dev/null and b/public/images/arenas/end_b_2.png differ
diff --git a/public/images/arenas/end_b_3.json b/public/images/arenas/end_b_3.json
new file mode 100644
index 000000000..561b97907
--- /dev/null
+++ b/public/images/arenas/end_b_3.json
@@ -0,0 +1,356 @@
+{
+	"textures": [
+		{
+			"image": "end_b_3.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 148,
+				"h": 148
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "0001.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0002.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0003.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0004.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0015.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0016.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 0,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0005.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0006.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0013.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0014.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0007.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0008.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0011.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0012.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 74,
+						"y": 41,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0009.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 82,
+						"w": 74,
+						"h": 41
+					}
+				},
+				{
+					"filename": "0010.png",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 132
+					},
+					"spriteSourceSize": {
+						"x": 220,
+						"y": 29,
+						"w": 74,
+						"h": 41
+					},
+					"frame": {
+						"x": 0,
+						"y": 82,
+						"w": 74,
+						"h": 41
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:9227f80ed186a6506e8a56a2e7a08bf0:169638de1ac1e895a28dd709487f801c:2fb8e8a548a4fb954c308072c5058b25$"
+	}
+}
diff --git a/public/images/arenas/end_b_3.png b/public/images/arenas/end_b_3.png
new file mode 100644
index 000000000..2ce6e3724
Binary files /dev/null and b/public/images/arenas/end_b_3.png differ
diff --git a/public/images/arenas/end_bg.png b/public/images/arenas/end_bg.png
new file mode 100644
index 000000000..171c199b0
Binary files /dev/null and b/public/images/arenas/end_bg.png differ
diff --git a/public/images/egg.json b/public/images/egg.json
new file mode 100644
index 000000000..19658c637
--- /dev/null
+++ b/public/images/egg.json
@@ -0,0 +1,104 @@
+{
+	"textures": [
+		{
+			"image": "egg.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 112,
+				"h": 30
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "egg_0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 32,
+						"h": 32
+					},
+					"spriteSourceSize": {
+						"x": 2,
+						"y": 1,
+						"w": 28,
+						"h": 30
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 28,
+						"h": 30
+					}
+				},
+				{
+					"filename": "egg_1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 32,
+						"h": 32
+					},
+					"spriteSourceSize": {
+						"x": 2,
+						"y": 1,
+						"w": 28,
+						"h": 30
+					},
+					"frame": {
+						"x": 28,
+						"y": 0,
+						"w": 28,
+						"h": 30
+					}
+				},
+				{
+					"filename": "egg_2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 32,
+						"h": 32
+					},
+					"spriteSourceSize": {
+						"x": 2,
+						"y": 1,
+						"w": 28,
+						"h": 30
+					},
+					"frame": {
+						"x": 56,
+						"y": 0,
+						"w": 28,
+						"h": 30
+					}
+				},
+				{
+					"filename": "egg_3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 32,
+						"h": 32
+					},
+					"spriteSourceSize": {
+						"x": 2,
+						"y": 1,
+						"w": 28,
+						"h": 30
+					},
+					"frame": {
+						"x": 84,
+						"y": 0,
+						"w": 28,
+						"h": 30
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:a2a114a3e275355f11c124f7ddc3a158:87e6ddecd2221fa223d5a07b1b3bb040:f2ac48b1c7b5b0a41ac50c4888a029cf$"
+	}
+}
diff --git a/public/images/egg.png b/public/images/egg.png
new file mode 100644
index 000000000..f2bdfa1e1
Binary files /dev/null and b/public/images/egg.png differ
diff --git a/public/images/egg_crack.json b/public/images/egg_crack.json
new file mode 100644
index 000000000..f5d54b40b
--- /dev/null
+++ b/public/images/egg_crack.json
@@ -0,0 +1,125 @@
+{
+	"textures": [
+		{
+			"image": "egg_crack.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 25,
+				"h": 53
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "4",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 80,
+						"h": 80
+					},
+					"spriteSourceSize": {
+						"x": 27,
+						"y": 26,
+						"w": 25,
+						"h": 28
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 25,
+						"h": 28
+					}
+				},
+				{
+					"filename": "3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 80,
+						"h": 80
+					},
+					"spriteSourceSize": {
+						"x": 28,
+						"y": 26,
+						"w": 19,
+						"h": 15
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 19,
+						"h": 15
+					}
+				},
+				{
+					"filename": "2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 80,
+						"h": 80
+					},
+					"spriteSourceSize": {
+						"x": 32,
+						"y": 26,
+						"w": 13,
+						"h": 10
+					},
+					"frame": {
+						"x": 0,
+						"y": 43,
+						"w": 13,
+						"h": 10
+					}
+				},
+				{
+					"filename": "1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 80,
+						"h": 80
+					},
+					"spriteSourceSize": {
+						"x": 35,
+						"y": 26,
+						"w": 9,
+						"h": 8
+					},
+					"frame": {
+						"x": 13,
+						"y": 43,
+						"w": 9,
+						"h": 8
+					}
+				},
+				{
+					"filename": "0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 80,
+						"h": 80
+					},
+					"spriteSourceSize": {
+						"x": 37,
+						"y": 26,
+						"w": 3,
+						"h": 4
+					},
+					"frame": {
+						"x": 19,
+						"y": 28,
+						"w": 3,
+						"h": 4
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:d44ba9fc282691ce0b591fcffbbcb31a:be457a5f52a68525b1335295cf251f05:0549bf0ee2c8479f7b2db190c1b10a51$"
+	}
+}
diff --git a/public/images/egg_crack.png b/public/images/egg_crack.png
new file mode 100644
index 000000000..b23b77033
Binary files /dev/null and b/public/images/egg_crack.png differ
diff --git a/public/images/egg_lightrays.json b/public/images/egg_lightrays.json
new file mode 100644
index 000000000..c90b0bb81
--- /dev/null
+++ b/public/images/egg_lightrays.json
@@ -0,0 +1,104 @@
+{
+	"textures": [
+		{
+			"image": "egg_lightrays.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 638,
+				"h": 360
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 180
+					},
+					"spriteSourceSize": {
+						"x": 1,
+						"y": 0,
+						"w": 319,
+						"h": 180
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 319,
+						"h": 180
+					}
+				},
+				{
+					"filename": "2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 180
+					},
+					"spriteSourceSize": {
+						"x": 1,
+						"y": 0,
+						"w": 319,
+						"h": 180
+					},
+					"frame": {
+						"x": 0,
+						"y": 180,
+						"w": 319,
+						"h": 180
+					}
+				},
+				{
+					"filename": "3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 180
+					},
+					"spriteSourceSize": {
+						"x": 1,
+						"y": 0,
+						"w": 319,
+						"h": 180
+					},
+					"frame": {
+						"x": 319,
+						"y": 0,
+						"w": 319,
+						"h": 180
+					}
+				},
+				{
+					"filename": "0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 320,
+						"h": 180
+					},
+					"spriteSourceSize": {
+						"x": 1,
+						"y": 4,
+						"w": 318,
+						"h": 176
+					},
+					"frame": {
+						"x": 319,
+						"y": 180,
+						"w": 318,
+						"h": 176
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:73e98c4464919c41f98c36a73ca3f86b:0bbddf0b8ffb3bd3f2e72bc070b8a270:8313aa9b7eb706289284a612680e361b$"
+	}
+}
diff --git a/public/images/egg_lightrays.png b/public/images/egg_lightrays.png
new file mode 100644
index 000000000..a45762545
Binary files /dev/null and b/public/images/egg_lightrays.png differ
diff --git a/public/images/egg_shard.json b/public/images/egg_shard.json
new file mode 100644
index 000000000..84d5722f1
--- /dev/null
+++ b/public/images/egg_shard.json
@@ -0,0 +1,356 @@
+{
+	"textures": [
+		{
+			"image": "egg_shard.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 8,
+				"h": 112
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "0_0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "0_1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 7,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "0_2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 14,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "0_3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 21,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "1_0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 28,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "1_1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 35,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "1_2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 42,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "1_3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 49,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "2_0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 56,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "2_1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 63,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "2_2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "2_3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 77,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "3_0",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 84,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "3_1",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 91,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "3_2",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 98,
+						"w": 8,
+						"h": 7
+					}
+				},
+				{
+					"filename": "3_3",
+					"rotated": false,
+					"trimmed": true,
+					"sourceSize": {
+						"w": 8,
+						"h": 8
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 1,
+						"w": 8,
+						"h": 7
+					},
+					"frame": {
+						"x": 0,
+						"y": 105,
+						"w": 8,
+						"h": 7
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:d28ddfa7ea43d83f7c415fe743ad8fb3:92f90380cf71cf70b7a59587ffa0c331:6484c4b1ce9f71db2dbde6884c7029e5$"
+	}
+}
diff --git a/public/images/egg_shard.png b/public/images/egg_shard.png
new file mode 100644
index 000000000..a4084af17
Binary files /dev/null and b/public/images/egg_shard.png differ
diff --git a/src/arena.ts b/src/arena.ts
index 406fd2bd4..57cb389d0 100644
--- a/src/arena.ts
+++ b/src/arena.ts
@@ -449,8 +449,6 @@ export function getBiomeKey(biome: Biome): string {
       return 'tall_grass';
     case Biome.ISLAND:
       return 'beach';
-    case Biome.END:
-      return 'wasteland';
   }
   return Biome[biome].toLowerCase();
 }
@@ -475,6 +473,7 @@ export function getBiomeHasProps(biomeType: Biome): boolean {
     case Biome.FAIRY_CAVE:
     case Biome.TEMPLE:
     case Biome.LABORATORY:
+    case Biome.END:
       return true;
   }
 
@@ -511,8 +510,21 @@ export class ArenaBase extends Phaser.GameObjects.Container {
 
     const hasProps = getBiomeHasProps(biome);
     const biomeKey = getBiomeKey(biome);
+    const baseKey = `${biomeKey}_${this.player ? 'a' : 'b'}`;
+
+    this.base.setTexture(baseKey);
+
+    if (this.base.texture.frameTotal > 1) {
+      const baseFrameNames = this.scene.anims.generateFrameNames(baseKey, { zeroPad: 4, suffix: ".png", start: 1, end: this.base.texture.frameTotal - 1 });
+      this.scene.anims.create({
+        key: baseKey,
+        frames: baseFrameNames,
+        frameRate: 12,
+        repeat: -1
+      });
+      this.base.play(baseKey);
+    }
 
-    this.base.setTexture(`${biomeKey}_${this.player ? 'a' : 'b'}`);
     this.add(this.base);
 
     if (!this.player) {
@@ -521,7 +533,20 @@ export class ArenaBase extends Phaser.GameObjects.Container {
           ? hasProps ? Utils.randSeedInt(8) : 0
           : propValue;
         this.props.forEach((prop, p) => {
-          prop.setTexture(`${biomeKey}_b${hasProps ? `_${p + 1}` : ''}`);
+          const propKey = `${biomeKey}_b${hasProps ? `_${p + 1}` : ''}`;
+          prop.setTexture(propKey);
+
+          if (hasProps && prop.texture.frameTotal > 1) {
+            const propFrameNames = this.scene.anims.generateFrameNames(propKey, { zeroPad: 4, suffix: ".png", start: 1, end: prop.texture.frameTotal - 1 });
+            this.scene.anims.create({
+              key: propKey,
+              frames: propFrameNames,
+              frameRate: 12,
+              repeat: -1
+            });
+            prop.play(propKey);
+          }
+
           prop.setVisible(hasProps && !!(this.propValue & (1 << p)));
           this.add(prop);
         });
diff --git a/src/battle-scene.ts b/src/battle-scene.ts
index bf885a020..87657ff30 100644
--- a/src/battle-scene.ts
+++ b/src/battle-scene.ts
@@ -253,12 +253,27 @@ export default class BattleScene extends Phaser.Scene {
 		// Load arena images
 		Utils.getEnumValues(Biome).map(bt => {
 			const btKey = Biome[bt].toLowerCase();
+			const isBaseAnimated = btKey === 'end';
+			const baseAKey = `${btKey}_a`;
+			const baseBKey = `${btKey}_b`;
 			this.loadImage(`${btKey}_bg`, 'arenas');
-			this.loadImage(`${btKey}_a`, 'arenas');
-			this.loadImage(`${btKey}_b`, 'arenas');
+			if (!isBaseAnimated)
+				this.loadImage(baseAKey, 'arenas');
+			else
+				this.loadAtlas(baseAKey, 'arenas');
+			if (!isBaseAnimated)
+				this.loadImage(baseBKey, 'arenas');
+			else
+				this.loadAtlas(baseBKey, 'arenas');
 			if (getBiomeHasProps(bt)) {
-				for (let p = 1; p <= 3; p++)
-					this.loadImage(`${btKey}_b_${p}`, 'arenas')
+				for (let p = 1; p <= 3; p++) {
+					const isPropAnimated = p === 3 && btKey === 'end';
+					const propKey = `${btKey}_b_${p}`;
+					if (!isPropAnimated)
+						this.loadImage(propKey, 'arenas');
+					else
+						this.loadAtlas(propKey, 'arenas');
+				}
 			}
 		});
 
@@ -286,6 +301,10 @@ export default class BattleScene extends Phaser.Scene {
 		this.loadAtlas('types', '');
 		this.loadAtlas('statuses', '');
 		this.loadAtlas('categories', '');
+		this.loadAtlas('egg', '');
+		this.loadAtlas('egg_crack', '');
+		this.loadAtlas('egg_shard', '');
+		this.loadAtlas('egg_lightrays', '');
 
 		for (let i = 0; i < 10; i++)
 			this.loadAtlas(`pokemon_icons_${i}`, 'ui');
@@ -324,6 +343,9 @@ export default class BattleScene extends Phaser.Scene {
 		this.loadSe('pb_tray_ball');
 		this.loadSe('pb_tray_empty');
 
+		this.loadSe('egg_crack');
+		this.loadSe('egg_hatch');
+
 		this.loadSe('PRSFX- Transform', 'battle_anims');
 
 		this.loadBgm('menu');
@@ -692,6 +714,9 @@ export default class BattleScene extends Phaser.Scene {
 
 		//this.pushPhase(new TrainerMessageTestPhase(this));
 
+		//for (let t = 0; t < 4; t++)
+			//this.pushPhase(new EggHatchPhase(this, new Egg(2423432 + EGG_SEED * t, GachaType.LEGENDARY, new Date().getTime())));
+
 		if (!waveIndex) {
 			const isNewBiome = !lastBattle || !(lastBattle.waveIndex % 10);
 			const resetArenaState = isNewBiome || this.currentBattle.battleType === BattleType.TRAINER;
diff --git a/src/data/ability.ts b/src/data/ability.ts
index 121981dd4..fcb0cbcca 100644
--- a/src/data/ability.ts
+++ b/src/data/ability.ts
@@ -1561,7 +1561,7 @@ export function initAbilities() {
     new Ability(Abilities.SAND_STREAM, "Sand Stream", "The Pokémon summons a sandstorm when it enters a battle.", 3)
       .attr(PostSummonWeatherChangeAbAttr, WeatherType.SANDSTORM),
     new Ability(Abilities.PRESSURE, "Pressure", "By putting pressure on the opposing Pokémon, it raises their PP usage.", 3)
-      .attr(PostSummonMessageAbAttr, (pokemon: Pokemon) => getPokemonMessage(pokemon, 'is exerting its Pressure!')),
+      .attr(PostSummonMessageAbAttr, (pokemon: Pokemon) => getPokemonMessage(pokemon, ' is exerting its Pressure!')),
     new Ability(Abilities.THICK_FAT, "Thick Fat", "The Pokémon is protected by a layer of thick fat, which halves the damage taken from Fire- and Ice-type moves.", 3)
       .attr(ReceivedTypeDamageMultiplierAbAttr, Type.FIRE, 0.5)
       .attr(ReceivedTypeDamageMultiplierAbAttr, Type.ICE, 0.5),
diff --git a/src/data/egg.ts b/src/data/egg.ts
new file mode 100644
index 000000000..53fae3840
--- /dev/null
+++ b/src/data/egg.ts
@@ -0,0 +1,23 @@
+import { ModifierTier } from "../modifier/modifier-type";
+
+export const EGG_SEED = 1073741824;
+
+export enum GachaType {
+  LEGENDARY,
+  TYPE,
+  SHINY
+}
+
+export class Egg {
+  public id: integer;
+  public tier: ModifierTier;
+  public gachaType: GachaType;
+  public timestamp: integer;
+
+  constructor(id: integer, gachaType: GachaType, timestamp: integer) {
+    this.id = id;
+    this.tier = Math.floor(id / EGG_SEED);
+    this.gachaType = gachaType;
+    this.timestamp = timestamp;
+  }
+}
\ No newline at end of file
diff --git a/src/data/pokemon-species.ts b/src/data/pokemon-species.ts
index 2443aeb15..658b91c10 100644
--- a/src/data/pokemon-species.ts
+++ b/src/data/pokemon-species.ts
@@ -2534,7 +2534,7 @@ export const speciesStarters = {
   [Species.WIMPOD]: 3,
   [Species.SANDYGAST]: 3,
   [Species.PYUKUMUKU]: 3,
-  [Species.TYPE_NULL]: 5,
+  [Species.TYPE_NULL]: 6,
   [Species.MINIOR]: 5,
   [Species.KOMALA]: 5,
   [Species.TURTONATOR]: 5,
diff --git a/src/egg-hatch-phase.ts b/src/egg-hatch-phase.ts
new file mode 100644
index 000000000..486f79338
--- /dev/null
+++ b/src/egg-hatch-phase.ts
@@ -0,0 +1,285 @@
+import SoundFade from "phaser3-rex-plugins/plugins/soundfade";
+import { BattlePhase } from "./battle-phase";
+import BattleScene, { AnySound } from "./battle-scene";
+import * as Utils from "./utils";
+import { Mode } from "./ui/ui";
+import { Egg } from "./data/egg";
+import EggHatchSceneHandler from "./ui/egg-hatch-scene-handler";
+import { ModifierTier } from "./modifier/modifier-type";
+import { Species } from "./data/species";
+import Pokemon, { PlayerPokemon } from "./pokemon";
+import { getPokemonSpecies, speciesStarters } from "./data/pokemon-species";
+
+export class EggHatchPhase extends BattlePhase {
+  private egg: Egg;
+
+  private eggHatchContainer: Phaser.GameObjects.Container;
+  private eggHatchBg: Phaser.GameObjects.Image;
+  private eggHatchOverlay: Phaser.GameObjects.Rectangle;
+  private eggContainer: Phaser.GameObjects.Container;
+  private eggSprite: Phaser.GameObjects.Sprite;
+  private eggCrackSprite: Phaser.GameObjects.Sprite;
+  private eggLightraysOverlay: Phaser.GameObjects.Sprite;
+  private pokemonSprite: Phaser.GameObjects.Sprite;
+
+  constructor(scene: BattleScene, egg: Egg) {
+    super(scene);
+
+    this.egg = egg;
+  }
+
+  start() {
+    super.start();
+
+    this.scene.ui.setModeForceTransition(Mode.EGG_HATCH_SCENE).then(() => {
+
+      if (!this.egg)
+        return this.end();
+
+      this.scene.fadeOutBgm(null, false);
+
+      const eggHatchHandler = this.scene.ui.getHandler() as EggHatchSceneHandler;
+
+      this.eggHatchContainer = eggHatchHandler.eggHatchContainer;
+
+      this.eggHatchBg = this.scene.add.image(0, 0, 'default_bg');
+      this.eggHatchBg.setOrigin(0, 0);
+      this.eggHatchContainer.add(this.eggHatchBg);
+
+      this.eggContainer = this.scene.add.container(this.eggHatchBg.displayWidth / 2, this.eggHatchBg.displayHeight / 2);
+
+      this.eggSprite = this.scene.add.sprite(0, 0, 'egg', `egg_${this.egg.tier}`);
+      this.eggCrackSprite = this.scene.add.sprite(0, 0, 'egg_crack', '0');
+      this.eggCrackSprite.setVisible(false);
+
+      this.eggLightraysOverlay = this.scene.add.sprite((-this.eggHatchBg.displayWidth / 2) + 4, -this.eggHatchBg.displayHeight / 2, 'egg_lightrays', '3');
+      this.eggLightraysOverlay.setOrigin(0, 0);
+      this.eggLightraysOverlay.setVisible(false);
+
+      this.eggContainer.add(this.eggSprite);
+      this.eggContainer.add(this.eggCrackSprite);
+      this.eggContainer.add(this.eggLightraysOverlay);
+      this.eggHatchContainer.add(this.eggContainer);
+
+      const getPokemonSprite = () => this.scene.add.sprite(this.eggHatchBg.displayWidth / 2, this.eggHatchBg.displayHeight / 2, `pkmn__sub`);
+
+      this.eggHatchContainer.add((this.pokemonSprite = getPokemonSprite()));
+
+      this.eggHatchOverlay = this.scene.add.rectangle(0, -this.scene.game.canvas.height / 6, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6, 0xFFFFFF);
+      this.eggHatchOverlay.setOrigin(0, 0);
+      this.eggHatchOverlay.setAlpha(0);
+      this.scene.fieldUI.add(this.eggHatchOverlay);
+
+      const pokemon = this.generatePokemon();
+      const preName = pokemon.name;
+
+      console.log(preName, pokemon);
+
+      this.pokemonSprite.setVisible(false);
+
+      let evolutionBgm: AnySound;
+
+      pokemon.loadAssets().then(() => {
+        this.scene.time.delayedCall(1000, () => evolutionBgm = this.scene.playSoundWithoutBgm('evolution'));
+
+        this.scene.time.delayedCall(2000, () => {
+          this.eggCrackSprite.setVisible(true);
+          this.doSpray(1, this.eggSprite.displayHeight / -2);
+          this.doEggShake(2).then(() => {
+            this.scene.time.delayedCall(1000, () => {
+              this.doSpray(2, this.eggSprite.displayHeight / -4);
+              this.eggCrackSprite.setFrame('1');
+              this.scene.time.delayedCall(125, () => this.eggCrackSprite.setFrame('2'));
+              this.doEggShake(4).then(() => {
+                this.scene.time.delayedCall(1000, () => {
+                  this.scene.playSound('egg_crack');
+                  this.doSpray(4);
+                  this.eggCrackSprite.setFrame('3');
+                  this.scene.time.delayedCall(125, () => this.eggCrackSprite.setFrame('4'));
+                  this.doEggShake(8, 2).then(() => {
+                    SoundFade.fadeOut(this.scene, evolutionBgm, 100);
+                    for (let e = 0; e < 5; e++)
+                      this.scene.time.delayedCall(375 * e, () => this.scene.playSound('egg_hatch', { volume: 1 - (e * 0.2) }));
+                    this.eggLightraysOverlay.setVisible(true);
+                    this.eggLightraysOverlay.play('egg_lightrays');
+                    this.scene.tweens.add({
+                      duration: 125,
+                      targets: this.eggHatchOverlay,
+                      alpha: 1,
+                      ease: 'Cubic.easeIn'
+                    });
+                    this.scene.time.delayedCall(1500, () => {
+                      this.eggContainer.setVisible(false);
+                      this.pokemonSprite.play(pokemon.getSpriteKey(true));
+                      this.pokemonSprite.setVisible(true);
+                      this.scene.time.delayedCall(1000, () => pokemon.cry());
+                      this.scene.tweens.add({
+                        duration: 3000,
+                        targets: this.eggHatchOverlay,
+                        alpha: 0,
+                        ease: 'Cubic.easeOut',
+                        onComplete: () => {
+                          this.scene.time.delayedCall(1000, () => this.end());
+                        }
+                      });
+                    });
+                  });
+                });
+              });
+            })
+          });
+        });
+      });
+    });
+  }
+
+  doEggShake(intensity: number, repeatCount?: integer, count?: integer): Promise<void> {
+    return new Promise(resolve => {
+      if (repeatCount === undefined)
+        repeatCount = 0;
+      if (count === undefined)
+        count = 0;
+      this.scene.playSound('pb_move');
+      this.scene.tweens.add({
+        targets: this.eggContainer,
+        x: `-=${intensity / (count ? 1 : 2)}`,
+        ease: 'Sine.easeInOut',
+        duration: 125,
+        onComplete: () => {
+          this.scene.tweens.add({
+            targets: this.eggContainer,
+            x: `+=${intensity}`,
+            ease: 'Sine.easeInOut',
+            duration: 250,
+            onComplete: () => {
+              count++;
+              if (count < repeatCount)
+                return this.doEggShake(intensity, repeatCount, count).then(() => resolve());
+              this.scene.tweens.add({
+                targets: this.eggContainer,
+                x: `-=${intensity / 2}`,
+                ease: 'Sine.easeInOut',
+                duration: 125,
+                onComplete: () => resolve()
+              });
+            }
+          })
+        }
+      });
+    });
+  }
+
+  sin(index: integer, amplitude: integer): number {
+    return amplitude * Math.sin(index * (Math.PI / 128));
+  }
+
+  doSpray(intensity: integer, offsetY?: number) {
+    this.scene.tweens.addCounter({
+      repeat: intensity,
+      duration: Utils.getFrameMs(1),
+      onRepeat: () => {
+        this.doSprayParticle(Utils.randInt(8), offsetY || 0);
+      }
+    });
+  }
+
+  doSprayParticle(trigIndex: integer, offsetY: number) {
+    const initialX = this.eggHatchBg.displayWidth / 2;
+    const initialY = this.eggHatchBg.displayHeight / 2 + offsetY;
+    const particle = this.scene.add.image(initialX, initialY, 'egg_shard', `${this.egg.tier}_${Math.floor(trigIndex / 2)}`);
+    this.eggHatchContainer.add(particle);
+
+    let f = 0;
+    let yOffset = 0;
+    let speed = 3 - Utils.randInt(8);
+    let amp = 24 + Utils.randInt(32);
+
+    const particleTimer = this.scene.tweens.addCounter({
+      repeat: -1,
+      duration: Utils.getFrameMs(1),
+      onRepeat: () => {
+        updateParticle();
+      }
+    });
+
+    const updateParticle = () => {
+      yOffset++;
+      if (trigIndex < 160) {
+        particle.setPosition(initialX + (speed * f) / 3, initialY + yOffset);
+        particle.y += -this.sin(trigIndex, amp);
+        if (f > 108)
+          particle.setScale((1 - (f - 108) / 20));
+        trigIndex += 2;
+        f++;
+      } else {
+        particle.destroy();
+        particleTimer.remove();
+      }
+    };
+
+    updateParticle();
+  }
+
+  generatePokemon(): Pokemon {
+    let minStarterValue: integer;
+    let maxStarterValue: integer;
+
+    switch (this.egg.tier) {
+      case ModifierTier.GREAT:
+        minStarterValue = 3;
+        maxStarterValue = 5;
+        break;
+      case ModifierTier.ULTRA:
+        minStarterValue = 6;
+        maxStarterValue = 7;
+        break;
+      case ModifierTier.MASTER:
+        minStarterValue = 8;
+        maxStarterValue = 9;
+        break;
+      default:
+        minStarterValue = 1;
+        maxStarterValue = 2;
+        break;
+    }
+
+    const speciesPool = Object.keys(speciesStarters)
+      .filter(s => speciesStarters[s] >= minStarterValue && speciesStarters[s] <= maxStarterValue)
+      .map(s => parseInt(s) as Species)
+      .filter(s => getPokemonSpecies(s).isObtainable());
+
+    let totalWeight = 0;
+    const speciesWeights = [];
+    for (let speciesId of speciesPool) {
+      const weight = Math.floor((((maxStarterValue - speciesStarters[speciesId]) / ((maxStarterValue - minStarterValue) + 1)) * 1.5 + 1) * 100);
+      speciesWeights.push(totalWeight + weight);
+      totalWeight += weight;
+    }
+
+    let species: Species;
+
+    this.scene.executeWithSeedOffset(() => {
+      const rand = Utils.randSeedInt(totalWeight);
+      for (let s = 0; s < speciesWeights.length; s++) {
+        if (rand < speciesWeights[s]) {
+          species = speciesPool[s];
+          break;
+        }
+      }
+    }, this.egg.id);
+
+    console.log(species, totalWeight);
+
+    const pokemon = new PlayerPokemon(this.scene, getPokemonSpecies(species), 5, null, null);
+
+    return pokemon;
+  }
+}
+
+export class EndEvolutionPhase extends BattlePhase {
+  start() {
+    super.start();
+
+    this.scene.ui.setModeForceTransition(Mode.MESSAGE).then(() => this.end());
+  }
+}
\ No newline at end of file
diff --git a/src/pokemon.ts b/src/pokemon.ts
index f2ca00116..ca9f0785d 100644
--- a/src/pokemon.ts
+++ b/src/pokemon.ts
@@ -105,7 +105,9 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
       : new EnemyBattleInfo(scene);
     this.pokeball = dataSource?.pokeball || PokeballType.POKEBALL;
     this.level = level;
-    this.abilityIndex = abilityIndex || (species.abilityHidden && hasHiddenAbility ? species.ability2 ? 2 : 1 : species.ability2 ? randAbilityIndex : 0);
+    this.abilityIndex = abilityIndex !== undefined
+      ? abilityIndex
+      : (species.abilityHidden && hasHiddenAbility ? species.ability2 ? 2 : 1 : species.ability2 ? randAbilityIndex : 0);
     this.formIndex = formIndex || 0;
     if (gender !== undefined)
       this.gender = gender;
diff --git a/src/system/egg-data.ts b/src/system/egg-data.ts
new file mode 100644
index 000000000..3c6f20363
--- /dev/null
+++ b/src/system/egg-data.ts
@@ -0,0 +1,18 @@
+import { Egg, GachaType } from "../data/egg";
+
+export default class EggData {
+  public id: integer;
+  public gachaType: GachaType;
+  public timestamp: integer;
+
+  constructor(source: Egg | any) {
+    const sourceEgg = source instanceof Egg ? source as Egg : null;
+    this.id = sourceEgg ? sourceEgg.id : source.id;
+    this.gachaType = sourceEgg ? sourceEgg.gachaType : source.gachaType;
+    this.timestamp = sourceEgg ? sourceEgg.timestamp : source.timestamp;
+  }
+
+  toEgg(): Egg {
+    return new Egg(this.id, this.gachaType, this.timestamp);
+  }
+}
\ No newline at end of file
diff --git a/src/system/game-data.ts b/src/system/game-data.ts
index 9f463d005..43b771921 100644
--- a/src/system/game-data.ts
+++ b/src/system/game-data.ts
@@ -14,6 +14,8 @@ import TrainerData from "./trainer-data";
 import { trainerConfigs } from "../data/trainer-type";
 import { Setting, setSetting, settingDefaults } from "./settings";
 import { achvs } from "./achv";
+import EggData from "./egg-data";
+import { Egg } from "../data/egg";
 
 interface SystemSaveData {
   trainerId: integer;
@@ -21,6 +23,7 @@ interface SystemSaveData {
   dexData: DexData;
   unlocks: Unlocks;
   achvUnlocks: AchvUnlocks;
+  eggs: EggData[];
   gameVersion: string;
   timestamp: integer;
 }
@@ -93,6 +96,8 @@ export class GameData {
 
   public achvUnlocks: AchvUnlocks;
 
+  public eggs: Egg[];
+
   constructor(scene: BattleScene) {
     this.scene = scene;
     this.loadSettings();
@@ -104,6 +109,7 @@ export class GameData {
       [Unlockables.SPLICED_ENDLESS_MODE]: false
     };
     this.achvUnlocks = {};
+    this.eggs = [];
     this.initDexData();
     this.loadSystem();
   }
@@ -118,6 +124,7 @@ export class GameData {
       dexData: this.dexData,
       unlocks: this.unlocks,
       achvUnlocks: this.achvUnlocks,
+      eggs: this.eggs.map(e => new EggData(e)),
       gameVersion: this.scene.game.config.gameVersion,
       timestamp: new Date().getTime()
     };
@@ -158,9 +165,13 @@ export class GameData {
       for (let a of Object.keys(data.achvUnlocks)) {
         if (achvs.hasOwnProperty(a))
           this.achvUnlocks[a] = data.achvUnlocks[a];
-      }
+      } 
     }
 
+    this.eggs = data.eggs
+      ? data.eggs.map(e => e.toEgg())
+      : [];
+
     if (data.dexData[1].hasOwnProperty(0))
       this.migrateLegacyDexData(this.dexData, data.dexData);
     else
diff --git a/src/ui/egg-hatch-scene-handler.ts b/src/ui/egg-hatch-scene-handler.ts
new file mode 100644
index 000000000..7105e13ea
--- /dev/null
+++ b/src/ui/egg-hatch-scene-handler.ts
@@ -0,0 +1,41 @@
+import BattleScene, { Button } from "../battle-scene";
+import { Mode } from "./ui";
+import UiHandler from "./uiHandler";
+
+export default class EggHatchSceneHandler extends UiHandler {
+    public eggHatchContainer: Phaser.GameObjects.Container;
+
+    constructor(scene: BattleScene) {
+      super(scene, Mode.EGG_HATCH_SCENE);
+    }
+  
+    setup() {
+      this.eggHatchContainer = this.scene.add.container(0, -this.scene.game.canvas.height / 6);
+      this.scene.fieldUI.add(this.eggHatchContainer);
+
+      const eggLightraysAnimFrames = this.scene.anims.generateFrameNames('egg_lightrays', { start: 0, end: 3 });
+      this.scene.anims.create({
+        key: 'egg_lightrays',
+        frames: eggLightraysAnimFrames,
+        frameRate: 32
+      });
+    }
+
+    show(_args: any[]): void {
+      super.show(_args);
+      
+      this.scene.fieldUI.bringToTop(this.eggHatchContainer);
+    }
+  
+    processInput(button: Button): boolean {
+      return this.scene.ui.getMessageHandler().processInput(button);
+    }
+  
+    setCursor(_cursor: integer): boolean {
+      return false;
+    }
+
+    clear() {
+      this.eggHatchContainer.removeAll(true);
+    }
+  }
\ No newline at end of file
diff --git a/src/ui/evolution-scene-handler.ts b/src/ui/evolution-scene-handler.ts
index 4e6c8cb3c..f1f976e49 100644
--- a/src/ui/evolution-scene-handler.ts
+++ b/src/ui/evolution-scene-handler.ts
@@ -7,8 +7,6 @@ export default class EvolutionSceneHandler extends UiHandler {
     public canCancel: boolean;
     public cancelled: boolean;
 
-    private cleanupFunc: Function;
-
     constructor(scene: BattleScene) {
       super(scene, Mode.EVOLUTION_SCENE);
     }
diff --git a/src/ui/ui.ts b/src/ui/ui.ts
index 5480972c1..24b816d03 100644
--- a/src/ui/ui.ts
+++ b/src/ui/ui.ts
@@ -20,6 +20,7 @@ import AchvBar from './achv-bar';
 import MenuUiHandler from './menu-ui-handler';
 import AchvsUiHandler from './achvs-ui-handler';
 import OptionSelectUiHandler from './option-select-ui-handler';
+import EggHatchSceneHandler from './egg-hatch-scene-handler';
 
 export enum Mode {
   MESSAGE,
@@ -33,6 +34,7 @@ export enum Mode {
   BIOME_SELECT,
   STARTER_SELECT,
   EVOLUTION_SCENE,
+  EGG_HATCH_SCENE,
   CONFIRM,
   OPTION_SELECT,
   GAME_MODE_SELECT,
@@ -45,7 +47,8 @@ const transitionModes = [
   Mode.PARTY,
   Mode.SUMMARY,
   Mode.STARTER_SELECT,
-  Mode.EVOLUTION_SCENE
+  Mode.EVOLUTION_SCENE,
+  Mode.EGG_HATCH_SCENE
 ];
 
 const noTransitionModes = [
@@ -87,6 +90,7 @@ export default class UI extends Phaser.GameObjects.Container {
       new BiomeSelectUiHandler(scene),
       new StarterSelectUiHandler(scene),
       new EvolutionSceneHandler(scene),
+      new EggHatchSceneHandler(scene),
       new ConfirmUiHandler(scene),
       new OptionSelectUiHandler(scene),
       new GameModeSelectUiHandler(scene),