diff --git a/public/images/inputs/dualshock.json b/public/images/inputs/dualshock.json
new file mode 100644
index 00000000000..484ead03674
--- /dev/null
+++ b/public/images/inputs/dualshock.json
@@ -0,0 +1,348 @@
+{"frames": {
+
+"T_P4_Circle_Color_Default.png":
+{
+	"frame": {"x":0,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Circle_Default.png":
+{
+	"frame": {"x":128,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Cross_Color_Default.png":
+{
+	"frame": {"x":256,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Cross_Default.png":
+{
+	"frame": {"x":384,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_Default.png":
+{
+	"frame": {"x":512,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_Down_Default.png":
+{
+	"frame": {"x":640,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_Left_Default.png":
+{
+	"frame": {"x":768,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_Right_Default.png":
+{
+	"frame": {"x":896,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_UP_Default.png":
+{
+	"frame": {"x":1024,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_X_Default.png":
+{
+	"frame": {"x":1152,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Dpad_Y_Default.png":
+{
+	"frame": {"x":1280,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L1_Default.png":
+{
+	"frame": {"x":1408,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L2_Default.png":
+{
+	"frame": {"x":1536,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_2D_Default.png":
+{
+	"frame": {"x":1664,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_Default.png":
+{
+	"frame": {"x":0,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_Down_Default.png":
+{
+	"frame": {"x":128,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_Left_Default.png":
+{
+	"frame": {"x":256,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_Right_Default.png":
+{
+	"frame": {"x":384,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_UP_Default.png":
+{
+	"frame": {"x":512,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_X_Default.png":
+{
+	"frame": {"x":640,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_L_Y_Default.png":
+{
+	"frame": {"x":768,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Left_Stick_Click_Alt_Default.png":
+{
+	"frame": {"x":896,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Left_Stick_Click_Default-1.png":
+{
+	"frame": {"x":1024,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Left_Stick_Click_Default.png":
+{
+	"frame": {"x":1152,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Options_Default.png":
+{
+	"frame": {"x":1280,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R1_Default.png":
+{
+	"frame": {"x":1408,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R2_Default.png":
+{
+	"frame": {"x":1536,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_2D_Default.png":
+{
+	"frame": {"x":1664,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_Default.png":
+{
+	"frame": {"x":0,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_Down_Default.png":
+{
+	"frame": {"x":128,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_Left_Default.png":
+{
+	"frame": {"x":256,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_Right_Default.png":
+{
+	"frame": {"x":384,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_UP_Default.png":
+{
+	"frame": {"x":512,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_X_Default.png":
+{
+	"frame": {"x":640,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_R_Y_Default.png":
+{
+	"frame": {"x":768,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Right_Stick_Click_Alt_Default.png":
+{
+	"frame": {"x":896,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Share_Default.png":
+{
+	"frame": {"x":1024,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Square_Color_Default.png":
+{
+	"frame": {"x":1152,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Square_Default.png":
+{
+	"frame": {"x":1280,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Touch_Pad_Default.png":
+{
+	"frame": {"x":1408,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Triangle_Color_Default.png":
+{
+	"frame": {"x":1536,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_P4_Triangle_Default.png":
+{
+	"frame": {"x":1664,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "dualshock.png",
+	"format": "RGBA8888",
+	"size": {"w":1792,"h":384},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:987743e379168b07fdf2bb169758063f:318efd1c2db07d7c85f4d230278c0da3:adc25708364be3d9e70074e95305c745$"
+}
+}
diff --git a/public/images/inputs/dualshock.png b/public/images/inputs/dualshock.png
new file mode 100644
index 00000000000..84bd1a022de
Binary files /dev/null and b/public/images/inputs/dualshock.png differ
diff --git a/public/images/inputs/nswitch.json b/public/images/inputs/nswitch.json
new file mode 100644
index 00000000000..441e70d47e8
--- /dev/null
+++ b/public/images/inputs/nswitch.json
@@ -0,0 +1,356 @@
+{"frames": {
+
+"T_S_A_Alt.png":
+{
+	"frame": {"x":0,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_B_Alt.png":
+{
+	"frame": {"x":128,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Con_Alt.png":
+{
+	"frame": {"x":256,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Con_Left_Alt.png":
+{
+	"frame": {"x":384,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Con_Right_Alt.png":
+{
+	"frame": {"x":512,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Con_Separate_Alt.png":
+{
+	"frame": {"x":640,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Down_Alt.png":
+{
+	"frame": {"x":768,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Alt.png":
+{
+	"frame": {"x":896,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Down_Alt.png":
+{
+	"frame": {"x":1024,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Left_Alt.png":
+{
+	"frame": {"x":1152,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Right_Alt.png":
+{
+	"frame": {"x":1280,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Up_Alt.png":
+{
+	"frame": {"x":0,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_X_Alt.png":
+{
+	"frame": {"x":128,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Dpad_Y_Alt.png":
+{
+	"frame": {"x":256,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Home_Alt.png":
+{
+	"frame": {"x":384,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_2D_Alt.png":
+{
+	"frame": {"x":512,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Alt.png":
+{
+	"frame": {"x":640,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Down_Alt.png":
+{
+	"frame": {"x":768,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Left_Alt.png":
+{
+	"frame": {"x":896,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Right_Alt.png":
+{
+	"frame": {"x":1024,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Up_Alt.png":
+{
+	"frame": {"x":1152,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_X_Alt.png":
+{
+	"frame": {"x":1280,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_L_Y_Alt.png":
+{
+	"frame": {"x":0,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_LB_Alt.png":
+{
+	"frame": {"x":128,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Left_Alt.png":
+{
+	"frame": {"x":256,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_LT_Alt.png":
+{
+	"frame": {"x":384,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Minus_Alt.png":
+{
+	"frame": {"x":512,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Plus_Alt.png":
+{
+	"frame": {"x":640,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_2D_Alt.png":
+{
+	"frame": {"x":768,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Alt.png":
+{
+	"frame": {"x":896,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Down_Alt.png":
+{
+	"frame": {"x":1024,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Left_Alt.png":
+{
+	"frame": {"x":1152,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Right_Alt.png":
+{
+	"frame": {"x":1280,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Up_Alt.png":
+{
+	"frame": {"x":0,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_X_Alt.png":
+{
+	"frame": {"x":128,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_R_Y_Alt.png":
+{
+	"frame": {"x":256,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_RB_Alt.png":
+{
+	"frame": {"x":384,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Right_Alt.png":
+{
+	"frame": {"x":512,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_RT_Alt.png":
+{
+	"frame": {"x":640,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Square_Alt.png":
+{
+	"frame": {"x":768,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Up_Alt.png":
+{
+	"frame": {"x":896,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_X_Alt.png":
+{
+	"frame": {"x":1024,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_S_Y_Alt.png":
+{
+	"frame": {"x":1152,"y":384,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "nswitch.png",
+	"format": "RGBA8888",
+	"size": {"w":1408,"h":512},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:9256c2fb9e9658d02a3c87f7803e4cf0:da5e7131e2452535087974b43fe1c89f:aeba0349fc8bd3742630ffd8f1f1df7a$"
+}
+}
diff --git a/public/images/inputs/nswitch.png b/public/images/inputs/nswitch.png
new file mode 100644
index 00000000000..49b54d46a76
Binary files /dev/null and b/public/images/inputs/nswitch.png differ
diff --git a/public/images/inputs/xbox.json b/public/images/inputs/xbox.json
new file mode 100644
index 00000000000..0422aac9e74
--- /dev/null
+++ b/public/images/inputs/xbox.json
@@ -0,0 +1,348 @@
+{"frames": {
+
+"T_X_A_Color_Alt.png":
+{
+	"frame": {"x":0,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_A_White_Alt.png":
+{
+	"frame": {"x":128,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_B_Color_Alt.png":
+{
+	"frame": {"x":256,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_B_White_Alt.png":
+{
+	"frame": {"x":384,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Alt.png":
+{
+	"frame": {"x":512,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Down_Alt.png":
+{
+	"frame": {"x":640,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Left_Alt.png":
+{
+	"frame": {"x":768,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Right_Alt.png":
+{
+	"frame": {"x":896,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Up_Alt.png":
+{
+	"frame": {"x":1024,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_X_Alt.png":
+{
+	"frame": {"x":1152,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Dpad_Y_Alt.png":
+{
+	"frame": {"x":1280,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_2D_Alt.png":
+{
+	"frame": {"x":1408,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_Alt.png":
+{
+	"frame": {"x":1536,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_Down_Alt.png":
+{
+	"frame": {"x":1664,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_Left_Alt.png":
+{
+	"frame": {"x":0,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_Right_Alt.png":
+{
+	"frame": {"x":128,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_UP_Alt.png":
+{
+	"frame": {"x":256,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_X_Alt.png":
+{
+	"frame": {"x":384,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_L_Y_Alt.png":
+{
+	"frame": {"x":512,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_LB_Alt.png":
+{
+	"frame": {"x":640,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Left_Stick_Click_Alt.png":
+{
+	"frame": {"x":768,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Left_Stick_Click_Alt_Alt.png":
+{
+	"frame": {"x":896,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_LT_Alt.png":
+{
+	"frame": {"x":1024,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_2D_Alt.png":
+{
+	"frame": {"x":1152,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_Alt.png":
+{
+	"frame": {"x":1280,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_Down_Alt.png":
+{
+	"frame": {"x":1408,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_Left_Alt.png":
+{
+	"frame": {"x":1536,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_Right_Alt.png":
+{
+	"frame": {"x":1664,"y":128,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_UP_Alt.png":
+{
+	"frame": {"x":0,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_X_Alt.png":
+{
+	"frame": {"x":128,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_R_Y_Alt.png":
+{
+	"frame": {"x":256,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_RB_Alt.png":
+{
+	"frame": {"x":384,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Right_Stick_Click_Alt.png":
+{
+	"frame": {"x":512,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Right_Stick_Click_Alt_Alt.png":
+{
+	"frame": {"x":640,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_RT_Alt.png":
+{
+	"frame": {"x":768,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Share_Alt-1.png":
+{
+	"frame": {"x":896,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Share_Alt.png":
+{
+	"frame": {"x":1024,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_X_Alt.png":
+{
+	"frame": {"x":1152,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_X_Color_Alt.png":
+{
+	"frame": {"x":1280,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_X_White_Alt.png":
+{
+	"frame": {"x":1408,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Y_Color_Alt.png":
+{
+	"frame": {"x":1536,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+},
+"T_X_Y_White_Alt.png":
+{
+	"frame": {"x":1664,"y":256,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "xbox.png",
+	"format": "RGBA8888",
+	"size": {"w":1792,"h":384},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:4e419a6ed1d6fe68e572af3e46338b9b:30674cf3e9fcf41b5fb5ab36fa87043f:7ad6008cd8fa3f9f4bfb17e0cfcbbb64$"
+}
+}
diff --git a/public/images/inputs/xbox.png b/public/images/inputs/xbox.png
new file mode 100644
index 00000000000..5b18161f863
Binary files /dev/null and b/public/images/inputs/xbox.png differ
diff --git a/src/configs/pad_dualshock.ts b/src/configs/pad_dualshock.ts
index 4f66ff8c00a..e9cb844ed13 100644
--- a/src/configs/pad_dualshock.ts
+++ b/src/configs/pad_dualshock.ts
@@ -3,7 +3,7 @@
  */
 const pad_dualshock = {
     padID: 'Dualshock',
-    padType: 'Sony',
+    padType: 'dualshock',
     gamepadMapping: {
         RC_S: 0,
         RC_E: 1,
@@ -24,6 +24,26 @@ const pad_dualshock = {
         MENU: 16,
         TOUCH: 17
     },
+    icons: {
+        RC_S: "T_P4_Cross_Color_Default.png",
+        RC_E: "T_P4_Circle_Color_Default.png",
+        RC_W: "T_P4_Square_Color_Default.png",
+        RC_N: "T_P4_Triangle_Color_Default.png",
+        START: "T_P4_Options_Default.png",
+        SELECT: "T_P4_Share_Default.png",
+        LB: "T_P4_L1_Default.png",
+        RB: "T_P4_R1_Default.png",
+        LT: "T_P4_L2_Default.png",
+        RT: "T_P4_R2_Default.png",
+        LS: "T_P4_Left_Stick_Click_Default.png",
+        RS: "T_P4_Left_Stick_Click_Default-1.png",
+        LC_N: "T_P4_Dpad_UP_Default.png",
+        LC_S: "T_P4_Dpad_Down_Default.png",
+        LC_W: "T_P4_Dpad_Left_Default.png",
+        LC_E: "T_P4_Dpad_Right_Default.png",
+        MENU: "",
+        TOUCH: "T_P4_Touch_Pad_Default.png"
+    }
 };
 
 export default pad_dualshock;
diff --git a/src/configs/pad_generic.ts b/src/configs/pad_generic.ts
index 19b5d3df16e..00346413de8 100644
--- a/src/configs/pad_generic.ts
+++ b/src/configs/pad_generic.ts
@@ -3,7 +3,7 @@
  */
 const pad_generic = {
     padID: 'Generic',
-    padType: 'generic',
+    padType: 'xbox',
     gamepadMapping: {
         RC_S: 0,
         RC_E: 1,
@@ -22,6 +22,25 @@ const pad_generic = {
         LC_W: 14,
         LC_E: 15
     },
+    icons: {
+        RC_S: "T_X_A_Color_Alt.png",
+        RC_E: "T_X_B_Color_Alt.png",
+        RC_W: "T_X_X_Color_Alt.png",
+        RC_N: "T_X_Y_Color_Alt.png",
+        START: "T_X_X_Alt.png",
+        SELECT: "T_X_Share_Alt.png",
+        LB: "T_X_LB_Alt.png",
+        RB: "T_X_RB_Alt.png",
+        LT: "T_X_LT_Alt.png",
+        RT: "T_X_RT_Alt.png",
+        LS: "T_X_Left_Stick_Click_Alt_Alt.png",
+        RS: "T_X_Right_Stick_Click_Alt_Alt.png",
+        LC_N: "T_X_Dpad_Up_Alt.png",
+        LC_S: "T_X_Dpad_Down_Alt.png",
+        LC_W: "T_X_Dpad_Left_Alt.png",
+        LC_E: "T_X_Dpad_Right_Alt.png",
+        MENU: ""
+    }
 };
 
 export default pad_generic;
diff --git a/src/configs/pad_unlicensedSNES.ts b/src/configs/pad_unlicensedSNES.ts
index ba8ee538d30..2da76b80409 100644
--- a/src/configs/pad_unlicensedSNES.ts
+++ b/src/configs/pad_unlicensedSNES.ts
@@ -3,7 +3,7 @@
  */
 const pad_unlicensedSNES = {
     padID: '081f-e401',
-    padType: 'snes',
+    padType: 'xbox',
     gamepadMapping : {
         RC_S: 2,
         RC_E: 1,
@@ -17,6 +17,20 @@ const pad_unlicensedSNES = {
         LC_S: 13,
         LC_W: 14,
         LC_E: 15
+    },
+    icons: {
+        RC_S: "T_X_B_Color_Alt.png",
+        RC_E: "T_X_A_Color_Alt.png",
+        RC_W: "T_X_Y_Color_Alt.png",
+        RC_N: "T_X_X_Color_Alt.png",
+        START: "T_X_X_Alt.png",
+        SELECT: "T_X_Share_Alt.png",
+        LB: "T_X_LB_Alt.png",
+        RB: "T_X_RB_Alt.png",
+        LC_N: "T_X_Dpad_Up_Alt.png",
+        LC_S: "T_X_Dpad_Down_Alt.png",
+        LC_W: "T_X_Dpad_Left_Alt.png",
+        LC_E: "T_X_Dpad_Right_Alt.png",
     }
 };
 
diff --git a/src/configs/pad_xbox360.ts b/src/configs/pad_xbox360.ts
index e44ebb54b64..4c52015ae96 100644
--- a/src/configs/pad_xbox360.ts
+++ b/src/configs/pad_xbox360.ts
@@ -23,6 +23,25 @@ const pad_xbox360 = {
         LC_E: 15,
         MENU: 16
     },
+    icons: {
+        RC_S: "T_X_A_Color_Alt.png",
+        RC_E: "T_X_B_Color_Alt.png",
+        RC_W: "T_X_X_Color_Alt.png",
+        RC_N: "T_X_Y_Color_Alt.png",
+        START: "T_X_X_Alt.png",
+        SELECT: "T_X_Share_Alt.png",
+        LB: "T_X_LB_Alt.png",
+        RB: "T_X_RB_Alt.png",
+        LT: "T_X_LT_Alt.png",
+        RT: "T_X_RT_Alt.png",
+        LS: "T_X_Left_Stick_Click_Alt_Alt.png",
+        RS: "T_X_Right_Stick_Click_Alt_Alt.png",
+        LC_N: "T_X_Dpad_Up_Alt.png",
+        LC_S: "T_X_Dpad_Down_Alt.png",
+        LC_W: "T_X_Dpad_Left_Alt.png",
+        LC_E: "T_X_Dpad_Right_Alt.png",
+        MENU: ""
+    }
 };
 
 export default pad_xbox360;
diff --git a/src/inputs-controller.ts b/src/inputs-controller.ts
index 3b82757a55b..863117a18a6 100644
--- a/src/inputs-controller.ts
+++ b/src/inputs-controller.ts
@@ -14,10 +14,15 @@ export interface GamepadMapping {
     [key: string]: number;
 }
 
+export interface IconsMapping {
+    [key: string]: string;
+}
+
 export interface GamepadConfig {
     padID: string;
     padType: string;
     gamepadMapping: GamepadMapping;
+    icons: IconsMapping;
 }
 
 export interface ActionGamepadMapping {
@@ -115,6 +120,7 @@ export class InputsController {
 
         if (typeof this.scene.input.gamepad !== 'undefined') {
             this.scene.input.gamepad.on('connected', function (thisGamepad) {
+                if (!thisGamepad) return;
                 this.refreshGamepads();
                 this.setupGamepad(thisGamepad);
                 this.onReconnect(thisGamepad);
@@ -281,6 +287,8 @@ export class InputsController {
             const mappedPad = this.mapGamepad(gamepadID);
             if (!this.player[gamepad]) this.player[gamepad] = {};
             this.player[gamepad]['mapping'] = mappedPad.gamepadMapping;
+            this.player[gamepad]['icons'] = mappedPad.icons;
+            this.player[gamepad]['type'] = mappedPad.padType;
         }
         if (this.chosenGamepad === thisGamepad.id) this.initChosenGamepad(this.chosenGamepad)
     }
@@ -340,9 +348,10 @@ export class InputsController {
     }
 
     getButtonLabel(button: Phaser.Input.Gamepad.Button) {
+        const icons = this.player[this.chosenGamepad]['icons'];
         const mapping = this.player[this.chosenGamepad]['mapping'];
-        console.log('mapping', mapping);
-        return Object.keys(mapping).find(key => mapping[key] === button.index);
+        const key = Object.keys(mapping).find(key => mapping[key] === button.index);
+        return [this.player[this.chosenGamepad]['type'], icons[key]];
     }
 
 
@@ -360,6 +369,7 @@ export class InputsController {
      * - If mapped, emits an 'input_down' event with the controller type and button action, and updates the interaction of this button.
      */
     gamepadButtonDown(pad: Phaser.Input.Gamepad.Gamepad, button: Phaser.Input.Gamepad.Button, value: number): void {
+        if (!pad) return;
         if (!this.chosenGamepad) // at the very first input, if we have not yet a chosen gamepad, we set it
             this.setChosenGamepad(pad.id);
         if (!this.gamepadSupport || pad.id.toLowerCase() !== this.chosenGamepad.toLowerCase()) return;
@@ -388,6 +398,7 @@ export class InputsController {
      * - If mapped, emits an 'input_up' event with the controller type and button action, and clears the interaction for this button.
      */
     gamepadButtonUp(pad: Phaser.Input.Gamepad.Gamepad, button: Phaser.Input.Gamepad.Button, value: number): void {
+        if (!pad) return;
         if (!this.gamepadSupport || pad.id !== this.chosenGamepad) return;
         const actionMapping = this.getActionGamepadMapping();
         const buttonUp = actionMapping.hasOwnProperty(button.index) && actionMapping[button.index];
diff --git a/src/loading-scene.ts b/src/loading-scene.ts
index a7d68ef98d4..8e69ad63b25 100644
--- a/src/loading-scene.ts
+++ b/src/loading-scene.ts
@@ -211,6 +211,12 @@ export class LoadingScene extends SceneBase {
         this.loadAtlas(`pokemon_icons_${i}v`, '');
     }
 
+    // Free icons from:
+    // https://juliocacko.itch.io/free-input-prompts
+    this.loadAtlas('dualshock', 'inputs');
+    this.loadAtlas('nswitch', 'inputs');
+    this.loadAtlas('xbox', 'inputs');
+
     this.loadSe('select');
     this.loadSe('menu_open');
     this.loadSe('hit');
diff --git a/src/ui/gamepad-binding-ui-handler.ts b/src/ui/gamepad-binding-ui-handler.ts
index 6f1422e67bd..e2dba78c727 100644
--- a/src/ui/gamepad-binding-ui-handler.ts
+++ b/src/ui/gamepad-binding-ui-handler.ts
@@ -12,8 +12,11 @@ export default class GamepadBindingUiHandler extends UiHandler {
     protected optionSelectBg: Phaser.GameObjects.NineSlice;
     private unlockText: Phaser.GameObjects.Text;
     private keyPressed: Phaser.GameObjects.Text;
+    private alreadyAssignedText: Phaser.GameObjects.Text;
     private listening: boolean = false;
     private buttonPressed = '';
+    private iconXbox: Phaser.GameObjects.Sprite;
+    private iconDualshock: Phaser.GameObjects.Sprite;
 
     constructor(scene: BattleScene, mode: Mode = Mode.GAMEPAD_BINDING) {
         super(scene, mode);
@@ -29,31 +32,58 @@ export default class GamepadBindingUiHandler extends UiHandler {
         this.optionSelectContainer.setVisible(false);
         ui.add(this.optionSelectContainer);
 
-        // this.optionSelectBg = addWindow(this.scene, this.scene.game.canvas.width / 12, -this.scene.game.canvas.height / 12, this.getWindowWidth(), -this.getWindowHeight());
+        this.titleBg = addWindow(this.scene, (this.scene.game.canvas.width / 6) - this.getWindowWidth(), -(this.scene.game.canvas.height / 6) + 28 + 22, this.getWindowWidth(), 24);
+        this.titleBg.setOrigin(0.5);
+        this.optionSelectContainer.add(this.titleBg);
+
+        this.unlockText = addTextObject(this.scene, 0, 0, 'Press a button...', TextStyle.WINDOW);
+        this.unlockText.setOrigin(0, 0);
+        this.unlockText.setPositionRelative(this.titleBg, 36, 4);
+        this.optionSelectContainer.add(this.unlockText);
+
         this.optionSelectBg = addWindow(this.scene, (this.scene.game.canvas.width / 6) - this.getWindowWidth(), -(this.scene.game.canvas.height / 6) + this.getWindowHeight() + 28, this.getWindowWidth(), this.getWindowHeight());
         this.optionSelectBg.setOrigin(0.5);
         this.optionSelectContainer.add(this.optionSelectBg);
 
-        this.unlockText = addTextObject(this.scene, 0, 0, 'Press a button...', TextStyle.WINDOW);
-        this.unlockText.setOrigin(0, 0);
-        this.unlockText.setPositionRelative(this.optionSelectBg, 36, 4);
+        this.iconXbox = this.scene.add.sprite(0, 0, 'xbox');
+        this.iconXbox.setScale(0.2);
+        this.iconXbox.setPositionRelative(this.optionSelectBg, 0, 0);
+        this.iconXbox.setOrigin(0, 0);
+        this.iconXbox.setVisible(false);
 
-        this.keyPressed = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
-        this.keyPressed.setOrigin(0, 0);
-        this.keyPressed.setPositionRelative(this.unlockText, 0, 12);
-        this.keyPressed.setVisible(false);
+        this.iconDualshock = this.scene.add.sprite(0, 0, 'dualshock');
+        this.iconDualshock.setScale(0.2);
+        this.iconDualshock.setPositionRelative(this.optionSelectBg, this.optionSelectBg.width / 2, 0);
+        this.iconDualshock.setOrigin(0, 0);
+        this.iconDualshock.setVisible(false);
+
+        this.alreadyAssignedText = addTextObject(this.scene, 0, 0, 'already assigned to', TextStyle.WINDOW);
+        this.alreadyAssignedText.setOrigin(0, 0);
+        this.alreadyAssignedText.setPositionRelative(this.optionSelectBg, this.optionSelectBg.width / 2, 24);
 
 
-        this.optionSelectContainer.add(this.unlockText);
-        this.optionSelectContainer.add(this.keyPressed);
+        this.optionSelectContainer.add(this.iconXbox);
+        this.optionSelectContainer.add(this.iconDualshock);
+        this.optionSelectContainer.add(this.alreadyAssignedText);
     }
 
     gamepadButtonDown(pad: Phaser.Input.Gamepad.Gamepad, button: Phaser.Input.Gamepad.Button, value: number): void {
-        if (!this.listening) return;
+        if (!this.listening || pad.id !== this.scene.inputController?.chosenGamepad) return;
         this.buttonPressed = button.index;
-        const buttonLabel = this.scene.inputController.getButtonLabel(button);
-        this.keyPressed.setText(buttonLabel);
-        this.keyPressed.setVisible(true);
+        const [type, buttonIcon] = this.scene.inputController.getButtonLabel(button);
+        switch (type) {
+            case 'dualshock':
+                this.iconXbox.setVisible(false);
+                this.iconDualshock.setFrame(buttonIcon);
+                this.iconDualshock.setVisible(true);
+                break
+            case 'xbox':
+            default:
+                this.iconDualshock.setVisible(false);
+                this.iconXbox.setFrame(buttonIcon);
+                this.iconXbox.setVisible(true);
+                break
+        }
     }
 
     show(args: any[]): boolean {