diff --git a/client/index.html b/client/index.html
index c9a36c95b8..d07169798d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -695,6 +695,7 @@ <h3 translation="settings"></h3>
       <div class="tab-bar" id="settings-tab-bar">
         <button class="tab active" id="tab-volume"><i class="fa-solid fa-volume-high"></i><span translation="settings_volume"></span></button>
         <button class="tab" id="tab-keybinds"><i class="fa-solid fa-keyboard"></i><span translation="settings_keybinds"></span></button>
+        <button class="tab" id="tab-controller" style="display: none"><i class="fa-solid fa-gamepad" ></i><span>Controller</span ></button>
         <button class="tab" id="tab-graphics"><i class="fa-solid fa-display"></i><span translation="settings_graphics"></span></button>
         <button class="tab" id="tab-interface"><i class="fa-solid fa-list"></i><span translation="settings_interface" use-html></span></button>
         <button class="tab" id="tab-import-export"><i class="fa-solid fa-file-export"></i><span translation="settings_save_load"></span></button>
@@ -740,6 +741,57 @@ <h3 translation="settings"></h3>
         </div>
         <div class="tab-content" id="tab-keybinds-content" style="display: none">
         </div>
+        <div class="tab-content" id="tab-controller-content" style="display: none">
+          <div class="controller-select-container" id="controller-select-container">
+            <div class="controller-select selected" id="controller-select-0" style="display: block; align-items: center;">
+              <center class="setting-title">Controller 1</center>
+              <span class="controller-select-text" id="controller-id-0"></span>
+              <img class="controller-select-img" src="./img/misc/other_controller.svg" width="60" id="controller-img-0">
+            </div>
+            <div class="controller-select" id="controller-select-1">
+              <center class="setting-title">Controller 2</center>
+              <span class="controller-select-text" style="margin-left: 5px" id="controller-id-1"></span>
+              <img class="controller-select-img" src="./img/misc/other_controller.svg" width="60" id="controller-img-1">
+            </div>
+            <div class="controller-select" id="controller-select-2">
+              <center class="setting-title">Controller 3</center>
+              <span class="controller-select-text" id="controller-id-2"></span>
+              <img class="controller-select-img" src="./img/misc/other_controller.svg" width="60" id="controller-img-2">
+            </div>
+            <div class="controller-select" id="controller-select-3">
+              <center class="setting-title">Controller 4</center>
+              <span class="controller-select-text" style="margin-left: 5px" id="controller-id-3"></span>
+              <img class="controller-select-img" src="./img/misc/other_controller.svg" width="60" id="controller-img-3">
+            </div>
+          </div>
+          <div class="modal-item">
+            <label>
+              <span class="setting-title">Left joystick sensitivity</span>
+              <span class="range-input-value"></span>
+              <input type="range" max="0.9" min="0" id="slider-left-joystick-sensitivity" step="0.01" value="0">
+            </label>
+          </div>
+          <div class="modal-item">
+            <label>
+              <span class="setting-title">Right joystick sensitivity</span>
+              <span class="range-input-value"></span>
+              <input type="range" max="0.9" min="0" id="slider-right-joystick-sensitivity" step="0.01" value="0">
+            </label>
+          </div>
+          <div class="modal-item checkbox-setting">
+            <label>
+              <span class="setting-title"><span>Switch controller joysticks</span></span>
+              <input type="checkbox" id="switch-controller-joysticks">
+            </label>
+          </div>
+          <p style="color: red;" id="controller-joystick-info"><i>Left joystick moves, Right joystick aims</i></p>
+          <div class="modal-item checkbox-setting">
+            <label>
+              <span class="setting-title"><span>Vibration</span><i></i></span>
+              <input type="checkbox" id="controller-vibration">
+            </label>
+          </div>
+        </div>
         <div class="tab-content" id="tab-graphics-content" style="display: none">
           <div class="modal-item select-setting">
             <label>
diff --git a/client/public/img/misc/joycon_controller.svg b/client/public/img/misc/joycon_controller.svg
new file mode 100644
index 0000000000..e47ed557a1
--- /dev/null
+++ b/client/public/img/misc/joycon_controller.svg
@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="170.05481"
+   height="351.64371"
+   viewBox="0 0 44.993667 93.039067"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="joycon_controller.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.8554482"
+     inkscape:cx="8.0843001"
+     inkscape:cy="232.28889"
+     inkscape:window-width="1536"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath910"><rect
+         style="fill:#000000;fill-opacity:0.307562;stroke:#bfbfbf;stroke-width:0;stroke-dasharray:none"
+         id="rect912"
+         width="117.50023"
+         height="242.539"
+         x="131.39139"
+         y="10.041987"
+         ry="2.0143032" /></clipPath></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.31749934,-109.02845)"><path
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:2.11666;stroke-dasharray:none;stroke-opacity:1"
+       d="m 14.307597,113.15865 h 11.256112 c 10.738351,0 17.565744,10.31918 17.565744,16.51959 v 54.9674 c 0,15.69819 -18.857221,16.36354 -28.974367,16.36354 v -88.59141"
+       id="path3169"
+       sodipodi:nodetypes="cccccc" /><path
+       id="rect4727"
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 18.426263,118.71401 v 1.62522 h -1.625224 v 1.84537 h 1.625224 v 1.62522 h 1.845365 v -1.62522 h 1.625224 v -1.84537 h -1.625224 v -1.62522 z" /><path
+       id="rect4727-7"
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 8.239805,118.71401 v 1.62522 H 6.614581 v 1.84537 h 1.625224 v 1.62522 h 1.845365 v -1.62522 h 1.625219 v -1.84537 H 10.08517 v -1.62522 z" /><path
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+       d="m 19.434835,113.61942 v -3.53264 h 8.064728 c 5.211203,0 12.267704,4.08428 16.474536,13.83501 l -2.072132,1.25504"
+       id="path4872"
+       sodipodi:nodetypes="ccccc" /><circle
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       id="path5672"
+       cx="27.619839"
+       cy="128.40834"
+       r="3.2120407" /><circle
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       id="path5672-1"
+       cx="27.619839"
+       cy="141.76979"
+       r="3.2120407" /><circle
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       id="path5672-1-4"
+       cx="22.761999"
+       cy="176.56084"
+       r="3.2120407" /><g
+       id="g5860-2"
+       transform="rotate(90,27.586776,135.12214)"
+       style="stroke:#ffffff;stroke-opacity:1"><circle
+         style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path5672-7"
+         cx="27.553705"
+         cy="128.40834"
+         r="3.2120407" /><circle
+         style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path5672-1-0"
+         cx="27.553705"
+         cy="141.76979"
+         r="3.2120407" /></g><circle
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       id="path5923"
+       cx="27.718378"
+       cy="159.73904"
+       r="6.8217573" /><circle
+       style="fill:none;fill-opacity:0.307562;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       id="path5923-9"
+       cx="27.71838"
+       cy="159.73904"
+       r="4.5881143" /><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.39242px;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       x="29.16876"
+       y="152.92775"
+       id="text6016"
+       transform="scale(1.1193036,0.89341264)"><tspan
+         sodipodi:role="line"
+         id="tspan6014"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         x="29.16876"
+         y="152.92775">A</tspan></text><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.39242px;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       x="23.200108"
+       y="160.61343"
+       id="text6016-1"
+       transform="scale(1.1193036,0.89341265)"><tspan
+         sodipodi:role="line"
+         id="tspan6014-2"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         x="23.200108"
+         y="160.61343">B</tspan></text><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.39242px;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       x="23.15403"
+       y="145.65791"
+       id="text6016-1-9"
+       transform="scale(1.1193036,0.89341265)"><tspan
+         sodipodi:role="line"
+         id="tspan6014-2-3"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         x="23.15403"
+         y="145.65791">X</tspan></text><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.39242px;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       x="17.235422"
+       y="153.13568"
+       id="text6016-1-9-1"
+       transform="scale(1.1193036,0.89341265)"><tspan
+         sodipodi:role="line"
+         id="tspan6014-2-3-9"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Arial Narrow';-inkscape-font-specification:'Arial Narrow';fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         x="17.235422"
+         y="153.13568">Y</tspan></text><path
+       style="fill:#bfbfbf;fill-opacity:1;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 20.89662,159.73904 h 2.233645"
+       id="path7214" /><path
+       style="fill:#bfbfbf;fill-opacity:1;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 32.30649,159.73904 h 2.233645"
+       id="path7214-3" /><path
+       style="fill:#bfbfbf;fill-opacity:1;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 27.718378,155.15093 v -2.23364"
+       id="path7214-3-6" /><path
+       style="fill:#bfbfbf;fill-opacity:1;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+       d="m 27.718378,166.5608 v -2.23364"
+       id="path7214-3-6-0" /><path
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+       d="m 14.307597,113.15865 c -6.9230662,0 -10.9675443,3.88391 -10.9675443,8.46666 v 66.13135 c 0,8.85572 4.3709254,11.65526 6.7510133,11.65526 0,-2.41129 1.417342,-4.23333 4.06402,-4.23333"
+       id="path7744"
+       sodipodi:nodetypes="ccccc" /><rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.05834;stroke-dasharray:none;stroke-opacity:1"
+       id="rect7815"
+       width="2.9398296"
+       height="12.170827"
+       x="0.84666932"
+       y="129.82651"
+       ry="1.1012235" /><rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.05834;stroke-dasharray:none;stroke-opacity:1"
+       id="rect7815-8"
+       width="2.9398296"
+       height="12.170827"
+       x="0.84666932"
+       y="165.41296"
+       ry="1.1012235" /></g></svg>
diff --git a/client/public/img/misc/other_controller.svg b/client/public/img/misc/other_controller.svg
new file mode 100644
index 0000000000..61ed86e1d8
--- /dev/null
+++ b/client/public/img/misc/other_controller.svg
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="495.80447"
+   height="342.05161"
+   viewBox="0 0 131.18159 90.501153"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="other_controller.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.70710678"
+     inkscape:cx="384.66609"
+     inkscape:cy="162.63456"
+     inkscape:window-width="1536"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath910"><rect
+         style="fill:#ffffff;fill-opacity:0.510342;stroke:#ffffff;stroke-width:0.79375"
+         id="rect912"
+         width="252.4953"
+         height="168.39163"
+         x="-15.566881"
+         y="75.166702"
+         ry="2.1279743" /></clipPath></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(15.011849,-72.678695)"><g
+       id="g6040"
+       style="stroke:#ffffff;stroke-opacity:1"><path
+         id="rect2717"
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 12.320305,87.157184 c -1.789965,0 -3.2313274,1.441363 -3.2313274,3.231327 V 95.10967 H 4.3678189 c -1.7899645,0 -3.2313272,1.441363 -3.2313272,3.231327 0,1.789963 1.4413627,3.230813 3.2313272,3.230813 h 4.7211587 v 4.72167 c 0,1.78997 1.4413624,3.23081 3.2313274,3.23081 1.789964,0 3.23081,-1.44084 3.23081,-3.23081 v -4.72167 h 4.721676 c 1.789964,0 3.23081,-1.44085 3.23081,-3.230813 0,-1.789964 -1.440846,-3.231327 -3.23081,-3.231327 h -4.721676 v -4.721159 c 0,-1.789964 -1.440846,-3.231327 -3.23081,-3.231327 z" /><circle
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path3649-6-7"
+         cx="50.578949"
+         cy="116.90125"
+         r="4.5829086" /><g
+         id="g5993"
+         transform="translate(38.100002,-21.11396)"
+         style="stroke:#ffffff;stroke-opacity:1"><g
+           id="g5932"
+           transform="translate(-37.816023,21.378543)"
+           style="stroke:#ffffff;stroke-opacity:1"><circle
+             style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+             id="path3649-6-7-1"
+             cx="88.394974"
+             cy="88.90564"
+             r="3.9493556" /><circle
+             style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+             id="path3649-6-7-1-2"
+             cx="88.394974"
+             cy="106.89731"
+             r="3.9493556" /></g><g
+           id="g5932-7"
+           transform="rotate(90,58.797691,89.682733)"
+           style="stroke:#ffffff;stroke-opacity:1"><circle
+             style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+             id="path3649-6-7-1-0"
+             cx="88.394974"
+             cy="88.90564"
+             r="3.9493556" /><circle
+             style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+             id="path3649-6-7-1-2-9"
+             cx="88.394974"
+             cy="106.89731"
+             r="3.9493556" /></g></g><path
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 55.496094,131.46838 c -39.66459,0 -33.988272,-3.10817 -42.376735,18.28445 -6.768283,17.26076 -27.072873,15.84242 -27.072873,-0.4369 2.798995,-54.268368 8.9323424,-70.732272 37.059863,-71.858718 h 41.961339"
+         id="path2443"
+         sodipodi:nodetypes="csccc" /><circle
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path3649"
+         cx="28.423283"
+         cy="116.57399"
+         r="9.290843" /><circle
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path3649-6"
+         cx="28.423283"
+         cy="116.57399"
+         r="5.7774258" /><rect
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3736"
+         width="7.4811759"
+         height="4.1286736"
+         x="30.762117"
+         y="86.628014"
+         ry="2.0643368" /><path
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="M -3.2941081,90.48736 C 2.7390161,77.995344 8.5121402,73.426552 21.82007,73.753043 l 1.262426,3.271242"
+         id="path3738"
+         sodipodi:nodetypes="ccc" /><path
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 45.661806,131.46838 c 39.66459,0 33.988272,-3.10817 42.376735,18.28445 6.768283,17.26076 27.072869,15.84242 27.072869,-0.4369 C 112.31242,95.047562 106.17907,78.583658 78.051551,77.457212 H 36.090212"
+         id="path2443-3"
+         sodipodi:nodetypes="csccc" /><circle
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path3649-5"
+         cx="-72.734619"
+         cy="116.57399"
+         r="9.290843"
+         transform="scale(-1,1)" /><circle
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path3649-6-6"
+         cx="-72.734619"
+         cy="116.57399"
+         r="5.7774258"
+         transform="scale(-1,1)" /><rect
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect3736-2"
+         width="7.4811759"
+         height="4.1286736"
+         x="-70.395782"
+         y="86.628014"
+         ry="2.0643368"
+         transform="scale(-1,1)" /><path
+         style="fill:none;fill-opacity:0.510342;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="M 104.45201,90.48736 C 98.418884,77.995344 92.64576,73.426552 79.33783,73.753043 l -1.262426,3.271242"
+         id="path3738-9"
+         sodipodi:nodetypes="ccc" /></g></g></svg>
diff --git a/client/public/img/misc/ps4_controller.svg b/client/public/img/misc/ps4_controller.svg
new file mode 100644
index 0000000000..6fd878de83
--- /dev/null
+++ b/client/public/img/misc/ps4_controller.svg
@@ -0,0 +1,209 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="498.77945"
+   height="319.62997"
+   viewBox="0 0 131.96872 84.568764"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   sodipodi:docname="ps4_controller.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.4204826"
+     inkscape:cx="322.24877"
+     inkscape:cy="192.6358"
+     inkscape:window-width="1536"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true" /><defs
+     id="defs2" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(142.19799,98.177386)"><g
+       id="g2138"><path
+         id="rect15787"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -120.45123,-83.695126 h 3.64966 c 1.04456,0 1.88549,0.86301 1.88549,1.934999 l -8e-5,3.790545 -3.71029,4.121563 -3.71026,-4.121563 v -3.790545 c 0,-1.071989 0.84093,-1.934999 1.88548,-1.934999 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-7"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -120.45123,-60.375261 h 3.64966 c 1.04456,0 1.88549,-0.86301 1.88549,-1.934999 l -8e-5,-3.790545 -3.71029,-4.121563 -3.71026,4.121563 v 3.790545 c 0,1.071989 0.84093,1.934999 1.88548,1.934999 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-3"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -106.96645,-73.86002 v 3.649652 c 0,1.044565 -0.86302,1.885491 -1.93501,1.885491 l -3.79054,-7.5e-5 -4.12156,-3.710295 4.12156,-3.710263 h 3.79054 c 1.07199,0 1.93501,0.840936 1.93501,1.88549 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-7-5"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -130.28631,-73.86002 v 3.649652 c 0,1.044565 0.863,1.885491 1.93501,1.885491 l 3.79053,-7.5e-5 4.12157,-3.710295 -4.12157,-3.710263 h -3.79053 c -1.07201,0 -1.93501,0.840936 -1.93501,1.88549 z"
+         sodipodi:nodetypes="ssscccss" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="rect21039"
+         width="44.16748"
+         height="24.946941"
+         x="-98.297371"
+         y="-93.662498"
+         ry="2.9793508" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -98.116806,-88.323435 h 43.806345"
+         id="path21041" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m -97.155237,-91.218786 -8.464653,-0.0042 c -1.06411,0 -2.28498,-0.784286 -3.06278,-2.197864 -6.96933,0 -9.78262,-0.114956 -17.01955,1.609122 -11.03161,10.245627 -15.43744,42.987668 -15.43744,61.245659 0,22.7533708 19.55327,17.133769 24.14461,7.44949 8.81539,-18.593831 6.54587,-19.697553 11.71689,-21.674059"
+         id="path302"
+         sodipodi:nodetypes="cccccsc" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014"
+         cx="-97.332809"
+         cy="-53.663017"
+         r="12.170832" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3"
+         cx="-97.332802"
+         cy="-53.663013"
+         r="7.953187" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-62"
+         cx="-76.213631"
+         cy="-53.186653"
+         r="3.6926019" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m -125.354,-92.475922 v -2.462095 c 7.39905,-2.337098 11.63378,-2.856261 16.77244,-1.315805 v 2.844797"
+         id="path20296"
+         sodipodi:nodetypes="cccc" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect21039-6"
+         width="3.9845552"
+         height="6.5175238"
+         x="-104.74115"
+         y="-88.720306"
+         ry="1.9922776" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -140.63932,-30.059184 c 0.47262,5.052248 13.31874,9.645703 24.06727,6.923479"
+         id="path21043"
+         sodipodi:nodetypes="cc" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m -55.272027,-91.218786 8.464657,-0.0042 c 1.06411,0 2.28498,-0.784286 3.06278,-2.197864 6.96933,0 9.78262,-0.114956 17.01955,1.609122 11.03161,10.245627 15.43744,42.987668 15.43744,61.245659 0,22.7533709 -19.55327,17.133769 -24.14461,7.44949 -8.81539,-18.593831 -6.54587,-19.697553 -11.71689,-21.674059"
+         id="path302-1"
+         sodipodi:nodetypes="cccccsc" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-2"
+         cx="55.094456"
+         cy="-53.663017"
+         r="12.170832"
+         transform="scale(-1,1)" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-7"
+         cx="55.094463"
+         cy="-53.663013"
+         r="7.953187"
+         transform="scale(-1,1)" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m -27.07326,-92.475922 v -2.462095 c -7.39905,-2.337098 -11.63378,-2.856261 -16.77244,-1.315805 v 2.844797"
+         id="path20296-9"
+         sodipodi:nodetypes="cccc" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect21039-6-3"
+         width="3.9845552"
+         height="6.5175238"
+         x="47.686115"
+         y="-88.720306"
+         ry="1.9922776"
+         transform="scale(-1,1)" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -11.78794,-30.059184 c -0.47262,5.052248 -13.31874,9.645703 -24.06727,6.923479"
+         id="path21043-6"
+         sodipodi:nodetypes="cc" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m -89.744385,-44.466969 h 27.061503"
+         id="path22549" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-6"
+         cx="-118.57891"
+         cy="-72.035187"
+         r="15.759082" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-6-0"
+         cx="33.848354"
+         cy="-72.035255"
+         r="15.759082"
+         transform="scale(-1,1)" /><path
+         id="path9463-7-1-2-0-9"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -29.434887,-63.852628 a 4.3922679,4.3922679 0 0 1 -4.392256,4.392266 4.3922679,4.3922679 0 0 1 -4.392282,-4.392266 4.3922679,4.3922679 0 0 1 4.392281,-4.392268 4.3922679,4.3922679 0 0 1 4.392257,4.392268 z" /><path
+         id="path9463-7-1-2-0-9-3"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -29.434887,-80.217888 a 4.3922679,4.3922679 0 0 1 -4.392256,4.392268 4.3922679,4.3922679 0 0 1 -4.39228,-4.392268 4.3922679,4.3922679 0 0 1 4.39228,-4.392267 4.3922679,4.3922679 0 0 1 4.392256,4.392267 z" /><path
+         id="path9463-7-1-2-0-9-0"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -42.030988,-67.510484 a 4.3922679,4.3922679 0 0 1 -4.392267,-4.392263 4.3922679,4.3922679 0 0 1 4.392267,-4.392277 4.3922679,4.3922679 0 0 1 4.392267,4.392277 4.3922679,4.3922679 0 0 1 -4.392267,4.392263 z" /><path
+         id="path9463-7-1-2-0-9-3-6"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m -25.665724,-67.510484 a 4.3922679,4.3922679 0 0 1 -4.392277,-4.392263 4.3922679,4.3922679 0 0 1 4.392277,-4.392275 4.3922679,4.3922679 0 0 1 4.392266,4.392275 4.3922679,4.3922679 0 0 1 -4.392266,4.392263 z" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2133"
+         width="3.9102664"
+         height="3.9102664"
+         x="-43.986061"
+         y="-73.857941" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2133-3"
+         width="4.5790343"
+         height="4.5790343"
+         x="-27.955246"
+         y="-74.192268"
+         ry="2.2895172" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.793753;stroke-dasharray:none;stroke-opacity:1"
+         d="m -36.032697,-66.058169 4.411082,4.41108"
+         id="path2189" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.793753;stroke-dasharray:none;stroke-opacity:1"
+         d="m -31.621615,-66.058169 -4.411082,4.41108"
+         id="path2189-7" /><path
+         sodipodi:type="star"
+         style="fill:none;stroke:#ffffff;stroke-width:5.22128;stroke-dasharray:none;stroke-opacity:1"
+         id="path2456"
+         inkscape:flatsided="true"
+         sodipodi:sides="3"
+         sodipodi:cx="431.12198"
+         sodipodi:cy="45.837631"
+         sodipodi:r1="18.680346"
+         sodipodi:r2="9.3401728"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 447.29963,55.177804 -32.35531,0 16.17766,-28.020518 z"
+         transform="matrix(0.15332937,0,0,0.15072597,-99.930816,-86.931629)"
+         inkscape:transform-center-y="-0.70390311"
+         inkscape:transform-center-x="1.3753913e-06" /><g
+         id="g2101"><path
+           style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+           d="m -76.085767,-51.365808 -0.757031,-0.202846 v -3.33724 c 2.152361,0 2.885369,2.131378 1.105318,2.131378 v -1.296829 c 0,0.05313 0.0073,-0.173633 -0.16977,-0.173633 -0.170396,0 -0.170399,0.223812 -0.170399,0.173633 z"
+           id="path2570"
+           sodipodi:nodetypes="cccccccc" /><path
+           style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+           d="m -77.000998,-52.828155 4.8e-5,0.420959 c -1.059631,0 -1.740572,0.654814 0,0.346058 v 0.424134 c -2.092166,0.0115 -2.227824,-0.763519 0,-1.191151 z"
+           id="path3628"
+           sodipodi:nodetypes="cccccc" /><path
+           style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+           d="m -75.939589,-51.374219 -4.8e-5,-0.420959 c 1.126007,-0.214021 2.597308,-0.807306 0,-0.397233 v -0.372959 c 2.966204,-0.333956 2.713528,0.58834 0,1.191151 z"
+           id="path3628-2"
+           sodipodi:nodetypes="cccccc" /></g></g></g></svg>
diff --git a/client/public/img/misc/ps5_controller.svg b/client/public/img/misc/ps5_controller.svg
new file mode 100644
index 0000000000..8f6a51a21b
--- /dev/null
+++ b/client/public/img/misc/ps5_controller.svg
@@ -0,0 +1,246 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="501.02237"
+   height="341.01205"
+   viewBox="0 0 132.56216 90.226105"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="ps5_controller.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.3367782"
+     inkscape:cx="136.52227"
+     inkscape:cy="101.73714"
+     inkscape:window-width="1536"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="false" /><defs
+     id="defs2"><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483" /><rect
+       x="352"
+       y="175.377"
+       width="53.838261"
+       height="53.294788"
+       id="rect380" /><rect
+       x="410.70782"
+       y="131.15192"
+       width="45.888973"
+       height="51.446365"
+       id="rect374" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4396"><path
+         id="path4398"
+         style="fill:#ff1111;fill-opacity:0.409873;stroke:#37383b;stroke-width:0"
+         d="M 26.787774,24.433611 H 424.61259 V 304.31639 H 26.787774 Z" /></clipPath><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3" /><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3-7" /><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3-7-3" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-233.78917,-135.64446)"><g
+       id="g21668"><path
+         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.33115,182.73177 -1.52814,-0.40947 v -6.73652 c 4.34474,0 5.82438,4.30238 2.23119,4.30238 v -2.61776 c 0,0.10724 0.0147,-0.3505 -0.3427,-0.3505 -0.34396,0 -0.34396,0.45179 -0.34396,0.3505 z"
+         id="path2570-2"
+         sodipodi:nodetypes="cccccccc" /><path
+         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         d="m 298.48367,179.77989 10e-5,0.84974 c -2.13896,0 -3.5135,1.3218 0,0.69855 v 0.85615 c -4.22323,0.0232 -4.49706,-1.54123 0,-2.40444 z"
+         id="path3628-9"
+         sodipodi:nodetypes="cccccc" /><path
+         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+         d="m 300.62622,182.71479 -9e-5,-0.84974 c 2.27294,-0.43203 5.2429,-1.62963 0,-0.80186 v -0.75285 c 5.98755,-0.67412 5.4775,1.18762 0,2.40445 z"
+         id="path3628-2-1"
+         sodipodi:nodetypes="cccccc" /><path
+         id="rect15787-9"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 255.99675,151.02122 h 3.64966 c 1.04456,0 1.88549,0.86301 1.88549,1.935 l -8e-5,3.79055 -3.71029,4.12156 -3.71026,-4.12156 v -3.79055 c 0,-1.07199 0.84093,-1.935 1.88548,-1.935 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-7-3"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 255.99675,174.34109 h 3.64966 c 1.04456,0 1.88549,-0.86301 1.88549,-1.935 l -8e-5,-3.79055 -3.71029,-4.12156 -3.71026,4.12156 v 3.79055 c 0,1.07199 0.84093,1.935 1.88548,1.935 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-3-6"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 269.48153,160.85633 v 3.64965 c 0,1.04457 -0.86302,1.88549 -1.93501,1.88549 l -3.79054,-7e-5 -4.12156,-3.7103 4.12156,-3.71026 h 3.79054 c 1.07199,0 1.93501,0.84094 1.93501,1.88549 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="rect15787-7-5-0"
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 246.16167,160.85633 v 3.64965 c 0,1.04457 0.863,1.88549 1.93501,1.88549 l 3.79053,-7e-5 4.12157,-3.7103 -4.12157,-3.71026 h -3.79053 c -1.07201,0 -1.93501,0.84094 -1.93501,1.88549 z"
+         sodipodi:nodetypes="ssscccss" /><path
+         id="path9463-7-1-2-0-9-0-4"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 332.56515,166.91891 a 4.1844834,4.1844834 0 0 1 -4.18448,-4.18449 4.1844834,4.1844834 0 0 1 4.18448,-4.18448 4.1844834,4.1844834 0 0 1 4.18449,4.18448 4.1844834,4.1844834 0 0 1 -4.18449,4.18449 z" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2133-1"
+         width="3.7252839"
+         height="3.7252839"
+         x="330.70258"
+         y="160.87173" /><path
+         id="path9463-7-1-2-0-9-3-6-3"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 351.18105,166.91891 a 4.1844834,4.1844834 0 0 1 -4.18449,-4.18449 4.1844834,4.1844834 0 0 1 4.18449,-4.18448 4.1844834,4.1844834 0 0 1 4.18448,4.18448 4.1844834,4.1844834 0 0 1 -4.18448,4.18449 z" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+         id="rect2133-3-4"
+         width="4.3624144"
+         height="4.3624144"
+         x="348.99985"
+         y="160.55321"
+         ry="2.1812072" /><path
+         id="path9463-7-1-2-0-9-8"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 346.07778,171.91613 a 4.1844834,4.1844834 0 0 1 -4.18447,4.18448 4.1844834,4.1844834 0 0 1 -4.1845,-4.18448 4.1844834,4.1844834 0 0 1 4.1845,-4.18449 4.1844834,4.1844834 0 0 1 4.18447,4.18449 z" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.793753;stroke-dasharray:none;stroke-opacity:1"
+         d="m 339.79209,169.81491 4.20241,4.20241"
+         id="path2189-9" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:0.793753;stroke-dasharray:none;stroke-opacity:1"
+         d="m 343.9945,169.81491 -4.20241,4.20241"
+         id="path2189-7-2" /><path
+         id="path9463-7-1-2-0-9-3-8"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 346.07778,153.30023 a 4.1844834,4.1844834 0 0 1 -4.18447,4.18449 4.1844834,4.1844834 0 0 1 -4.18449,-4.18449 4.1844834,4.1844834 0 0 1 4.18449,-4.18448 4.1844834,4.1844834 0 0 1 4.18447,4.18448 z" /><path
+         sodipodi:type="star"
+         style="fill:none;stroke:#ffffff;stroke-width:5.48055;stroke-dasharray:none;stroke-opacity:1"
+         id="path2456-0"
+         inkscape:flatsided="true"
+         sodipodi:sides="3"
+         sodipodi:cx="431.12198"
+         sodipodi:cy="45.837631"
+         sodipodi:r1="18.680346"
+         sodipodi:r2="9.3401728"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 447.29963,55.177804 -32.35531,0 16.17766,-28.020518 z"
+         transform="matrix(0.14607584,0,0,0.14359559,278.91679,146.9041)"
+         inkscape:transform-center-y="-0.70390311"
+         inkscape:transform-center-x="1.3753913e-06" /><path
+         id="path17357"
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 297.90979,138.55487 -0.004,0.03 c -8.92577,0.12282 -15.35736,0.61996 -19.79035,1.21543 -3.21524,0.35358 -3.755,2.31864 -3.36046,5.03897 l 3.87273,16.40416 c 0.65595,2.98652 1.96664,4.22145 4.90954,4.22145 h 11.07724 10.91022 11.07775 c 2.94291,0 4.25309,-1.23493 4.90904,-4.22145 l 3.87324,-16.40416 c 0.39454,-2.72033 -0.14575,-4.68539 -3.36097,-5.03897 -4.433,-0.59548 -10.86455,-1.09261 -19.79036,-1.21543 l -0.004,-0.03 c -0.73541,0 -1.45414,0.003 -2.16022,0.007 -0.70607,-0.005 -1.4248,-0.007 -2.16022,-0.007 z" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 268.65169,141.71946 7.12265,-1.13563"
+         id="path17533"
+         sodipodi:nodetypes="cc" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-27"
+         cx="278.89935"
+         cy="180.64456"
+         r="12.170832" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-0"
+         cx="278.89938"
+         cy="180.64456"
+         r="7.953187" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 306.68626,193.57497 h -35.38342 c -8.75963,0 -12.70639,19.98843 -18.76075,31.23726 -20.29417,0 -17.5636,-22.38197 -17.5636,-29.4783 0.62774,-19.52179 7.64717,-39.4662 12.71766,-50.99222 25.62641,-6.62699 22.01434,-5.85057 27.47017,17.27783 0.67342,2.85477 -1.42567,6.97759 -4.2144,9.75944 -14.1449,14.10996 -24.908,52.23065 -24.908,52.23065"
+         id="path3040"
+         sodipodi:nodetypes="cscccssc" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 250.28407,143.65409 v -3.58057 c 5.04673,-2.38144 12.03314,-3.91915 16.91818,-3.175 l 1.05833,4.69187"
+         id="path13672"
+         sodipodi:nodetypes="cccc" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 349.85644,143.65409 v -3.58057 c -5.04673,-2.38144 -12.03314,-3.91915 -16.91818,-3.175 l -1.05833,4.69187"
+         id="path13672-6"
+         sodipodi:nodetypes="cccc" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect17642"
+         width="3.3391411"
+         height="6.2634096"
+         x="222.04875"
+         y="205.9404"
+         ry="1.6695706"
+         transform="rotate(-14.016026)" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 331.48882,141.71946 -7.12265,-1.13563"
+         id="path17533-3"
+         sodipodi:nodetypes="cc" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-27-7"
+         cx="-321.24118"
+         cy="180.64456"
+         r="12.170832"
+         transform="scale(-1,1)" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-0-4"
+         cx="-321.24115"
+         cy="180.64456"
+         r="7.953187"
+         transform="scale(-1,1)" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 293.45425,193.57497 h 35.38342 c 8.75963,0 12.70639,19.98843 18.76075,31.23726 20.29417,0 17.5636,-22.38197 17.5636,-29.4783 -0.62774,-19.52179 -7.64717,-39.4662 -12.71766,-50.99222 -25.62641,-6.62699 -22.01434,-5.85057 -27.47017,17.27783 -0.67342,2.85477 1.42567,6.97759 4.2144,9.75944 14.1449,14.10996 24.908,52.23065 24.908,52.23065"
+         id="path3040-5"
+         sodipodi:nodetypes="cscccssc" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect17642-5"
+         width="3.3391411"
+         height="6.2634096"
+         x="-360.2244"
+         y="60.590405"
+         ry="1.6695706"
+         transform="matrix(-0.97022802,-0.24219328,-0.24219328,0.97022802,0,0)" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-27-4"
+         cx="-321.23975"
+         cy="180.64456"
+         r="12.170832"
+         transform="scale(-1,1)" /><circle
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="path12014-3-0-7"
+         cx="-321.23972"
+         cy="180.64456"
+         r="7.953187"
+         transform="scale(-1,1)" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect17642-6"
+         width="3.3391411"
+         height="6.2634096"
+         x="-360.22302"
+         y="60.590755"
+         ry="1.6695706"
+         transform="matrix(-0.97022802,-0.24219328,-0.24219328,0.97022802,0,0)" /><rect
+         style="fill:none;stroke:#ffffff;stroke-width:0.793966;stroke-dasharray:none;stroke-opacity:1"
+         id="rect17642-1"
+         width="1.42284"
+         height="6.2626534"
+         x="-186.28957"
+         y="304.42618"
+         ry="0.71142"
+         transform="matrix(0.04030124,-0.99918758,0.99997326,0.00731348,0,0)" /></g></g></svg>
diff --git a/client/public/img/misc/xbox_controller.svg b/client/public/img/misc/xbox_controller.svg
new file mode 100644
index 0000000000..a53e80dd5f
--- /dev/null
+++ b/client/public/img/misc/xbox_controller.svg
@@ -0,0 +1,203 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="496.18201"
+   height="351.85193"
+   viewBox="0 0 131.28149 93.094154"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="xbox_controller.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.6602162"
+     inkscape:cx="255.21943"
+     inkscape:cy="95.423287"
+     inkscape:window-width="1536"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="false" /><defs
+     id="defs2"><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483" /><rect
+       x="352"
+       y="175.377"
+       width="53.838261"
+       height="53.294788"
+       id="rect380" /><rect
+       x="410.70782"
+       y="131.15192"
+       width="45.888973"
+       height="51.446365"
+       id="rect374" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4396"><path
+         id="path4398"
+         style="fill:#ff1111;fill-opacity:0.409873;stroke:#37383b;stroke-width:0"
+         d="M 26.787774,24.433611 H 424.61259 V 304.31639 H 26.787774 Z" /></clipPath><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3" /><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3-7" /><rect
+       x="370.55954"
+       y="169.78192"
+       width="56.231579"
+       height="57.808357"
+       id="rect483-3-7-3" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.30243699,11.922756)"><g
+       id="g427"><g
+         id="g11586"
+         style="stroke:#ffffff;stroke-opacity:1"><g
+           id="g11581"
+           transform="translate(0.19086716)"
+           style="stroke:#ffffff;stroke-opacity:1"><path
+             style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+             d="m 69.186489,54.134405 c -30.37567,0 -28.418758,-1.917325 -36.965666,6.481673 L 12.380485,80.113064 c -6.6932667,0 -12.72263499,-8.832332 -10.8696382,-24.861298 C 3.6077475,37.11296 11.379713,15.624389 18.623106,1.6288445 25.32522,-4.3953104 33.814573,-7.0751524 44.808205,-7.3336491 h 24.621944"
+             id="path6655"
+             sodipodi:nodetypes="cscsccc" /><path
+             style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+             d="m 62.318138,54.134405 c 30.37567,0 28.418758,-1.917325 36.965666,6.481673 l 19.840336,19.496986 c 6.69327,0 12.72263,-8.832332 10.86964,-24.861298 C 127.89688,37.11296 120.12491,15.624389 112.88152,1.628845 106.1794,-4.39531 97.690054,-7.075152 86.696422,-7.333649 H 62.074478"
+             id="path6655-3"
+             sodipodi:nodetypes="cscsccc" /></g></g><g
+         id="g11577"
+         transform="translate(0.08847723)"
+         style="stroke:#ffffff;stroke-opacity:1"><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+           d="M 18.614715,1.6450618 C 25.199859,-8.974228 32.484062,-10.864421 41.747125,-10.864421 l 3.401445,3.5631005"
+           id="path9283"
+           sodipodi:nodetypes="ccc" /><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+           d="M 113.09469,1.645062 C 106.50954,-8.9742281 99.225331,-10.864421 89.96228,-10.864421 l -3.401445,3.5631009"
+           id="path9283-2"
+           sodipodi:nodetypes="ccc" /></g><path
+         id="path9463"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 41.450882,14.052094 a 9.5249977,9.5249977 0 0 1 -9.524997,9.524997 9.5249977,9.5249977 0 0 1 -9.524998,-9.524997 9.5249977,9.5249977 0 0 1 9.524998,-9.5249977 9.5249977,9.5249977 0 0 1 9.524997,9.5249977 z" /><path
+         id="path9463-5"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="M 58.797123,35.270503 A 10.316455,10.316455 0 0 1 48.48067,45.586957 10.316455,10.316455 0 0 1 38.164215,35.270503 10.316455,10.316455 0 0 1 48.48067,24.954049 10.316455,10.316455 0 0 1 58.797123,35.270503 Z" /><path
+         id="path9463-7"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 37.990509,14.052094 a 6.0646246,6.0646246 0 0 1 -6.064624,6.064624 6.0646246,6.0646246 0 0 1 -6.064625,-6.064624 6.0646246,6.0646246 0 0 1 6.064625,-6.0646246 6.0646246,6.0646246 0 0 1 6.064624,6.0646246 z" /><path
+         id="path9463-9"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:2.11667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 93.176922,34.479074 a 9.5249977,9.5249977 0 0 1 -9.524997,9.524997 9.5249977,9.5249977 0 0 1 -9.524998,-9.524997 9.5249977,9.5249977 0 0 1 9.524998,-9.524998 9.5249977,9.5249977 0 0 1 9.524997,9.524998 z" /><path
+         id="path9463-7-1"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 89.716549,34.479074 a 6.0646246,6.0646246 0 0 1 -6.064624,6.064624 6.0646246,6.0646246 0 0 1 -6.064625,-6.064624 6.0646246,6.0646246 0 0 1 6.064625,-6.064625 6.0646246,6.0646246 0 0 1 6.064624,6.064625 z" /><path
+         id="path9463-7-1-2"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 59.394744,13.741826 a 3.1750014,3.1750014 0 0 1 -3.175002,3.175001 3.1750014,3.1750014 0 0 1 -3.175001,-3.175001 3.1750014,3.1750014 0 0 1 3.175001,-3.175001 3.1750014,3.1750014 0 0 1 3.175002,3.175001 z" /><path
+         id="path9463-7-1-2-0"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 78.841618,13.741826 a 3.1750014,3.1750014 0 0 1 -3.175002,3.175001 3.1750014,3.1750014 0 0 1 -3.175001,-3.175001 3.1750014,3.1750014 0 0 1 3.175001,-3.175001 3.1750014,3.1750014 0 0 1 3.175002,3.175001 z" /><path
+         id="path9463-7-1-2-0-9"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 104.78127,22.777857 a 4.5782611,4.5782611 0 0 1 -4.57825,4.57826 4.5782611,4.5782611 0 0 1 -4.578275,-4.57826 4.5782611,4.5782611 0 0 1 4.578275,-4.578261 4.5782611,4.5782611 0 0 1 4.57825,4.578261 z" /><path
+         id="path9463-7-1-2-0-9-3"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 104.78127,5.719601 a 4.5782611,4.5782611 0 0 1 -4.57825,4.578261 4.5782611,4.5782611 0 0 1 -4.578273,-4.578261 4.5782611,4.5782611 0 0 1 4.578273,-4.5782607 4.5782611,4.5782611 0 0 1 4.57825,4.5782607 z" /><path
+         id="path9463-7-1-2-0-9-3-61"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="M 71.433287,0.71109883 A 5.4901069,5.4901069 0 0 1 65.943195,6.2012054 5.4901069,5.4901069 0 0 1 60.453073,0.71109883 5.4901069,5.4901069 0 0 1 65.943195,-4.7790078 5.4901069,5.4901069 0 0 1 71.433287,0.71109883 Z" /><path
+         id="path9463-7-1-2-0-9-0"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 91.651779,18.965107 a 4.5782611,4.5782611 0 0 1 -4.57826,-4.578256 4.5782611,4.5782611 0 0 1 4.57826,-4.5782699 4.5782611,4.5782611 0 0 1 4.578261,4.5782699 4.5782611,4.5782611 0 0 1 -4.578261,4.578256 z" /><path
+         id="path9463-7-1-2-0-9-3-6"
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         d="m 108.71004,18.965107 a 4.5782611,4.5782611 0 0 1 -4.57827,-4.578256 4.5782611,4.5782611 0 0 1 4.57827,-4.578268 4.5782611,4.5782611 0 0 1 4.57826,4.578268 4.5782611,4.5782611 0 0 1 -4.57826,4.578256 z" /><g
+         id="g9635"
+         transform="translate(-0.13207985,-1.1299176)"
+         style="stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+           d="M 45.257873,26.441826 V 46.359014"
+           id="path9594" /><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+           d="M 51.967637,26.441826 V 46.359014"
+           id="path9594-3" /></g><g
+         id="g9635-5"
+         transform="rotate(90,49.111687,35.769434)"
+         style="stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+           d="M 45.257873,26.441826 V 46.359014"
+           id="path9594-6" /><path
+           style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+           d="M 51.967637,26.441826 V 46.359014"
+           id="path9594-3-2" /></g><rect
+         style="fill:none;fill-opacity:0.409873;stroke:#ffffff;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+         id="rect9859"
+         width="6.8791699"
+         height="4.2333364"
+         x="62.503593"
+         y="18.969458"
+         ry="2.1166682" /><text
+         xml:space="preserve"
+         style="font-size:3.175px;fill:none;fill-opacity:0.409873;stroke:#b2b2b2;stroke-width:1.05833"
+         x="100.20301"
+         y="21.816008"
+         id="text370"><tspan
+           sodipodi:role="line"
+           id="tspan368"
+           style="stroke-width:1.05833"
+           x="100.20301"
+           y="21.816008" /></text><text
+         xml:space="preserve"
+         transform="matrix(0.22125836,0,0,0.22125836,15.577796,-19.582019)"
+         id="text481"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:36px;font-family:System-ui;-inkscape-font-specification:'System-ui Bold';white-space:pre;shape-inside:url(#rect483);display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"><tspan
+           x="370.55859"
+           y="202.53676"
+           id="tspan479">A</tspan></text><text
+         xml:space="preserve"
+         transform="matrix(0.22125836,0,0,0.22125836,7.0061649,-27.609045)"
+         id="text481-6"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:36px;font-family:System-ui;-inkscape-font-specification:'System-ui Bold';white-space:pre;shape-inside:url(#rect483-3);display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"><tspan
+           x="370.55859"
+           y="202.53676"
+           id="tspan481">X</tspan></text><text
+         xml:space="preserve"
+         transform="matrix(0.22125836,0,0,0.22125836,15.728648,-35.967232)"
+         id="text481-6-5"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:36px;font-family:System-ui;-inkscape-font-specification:'System-ui Bold';white-space:pre;shape-inside:url(#rect483-3-7);display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"><tspan
+           x="370.55859"
+           y="202.53676"
+           id="tspan483">Y</tspan></text><text
+         xml:space="preserve"
+         transform="matrix(0.22125836,0,0,0.22125836,24.096903,-27.609045)"
+         id="text481-6-5-5"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:36px;font-family:System-ui;-inkscape-font-specification:'System-ui Bold';white-space:pre;shape-inside:url(#rect483-3-7-3);display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"><tspan
+           x="370.55859"
+           y="202.53676"
+           id="tspan485">B</tspan></text><path
+         id="path9776"
+         style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0.79375;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 62.195355,-3.5883812 c 0.875468,0.4565481 1.716114,0.9635053 2.56005,1.6412434 -1.232094,1.25579028 -2.110448,3.3728349 -2.885612,6.8114704 1.488064,-2.6759112 2.804203,-4.45723865 4.073653,-5.73866765 1.269371,1.28140993 2.585173,3.06293795 4.073136,5.73866765 -0.775164,-3.4386355 -1.653518,-5.55568012 -2.885612,-6.8114704 0.843937,-0.6777381 1.684582,-1.1846953 2.560051,-1.6412434 -1.511452,0 -2.732329,0.197301 -3.747575,0.7441406 -1.015325,-0.5470035 -2.236441,-0.7441406 -3.748091,-0.7441406 z" /></g></g></svg>
diff --git a/client/src/scripts/managers/inputManager.ts b/client/src/scripts/managers/inputManager.ts
index fa0b1e7420..ea8253a2f5 100644
--- a/client/src/scripts/managers/inputManager.ts
+++ b/client/src/scripts/managers/inputManager.ts
@@ -8,6 +8,7 @@ import { ItemType, type ItemDefinition } from "@common/utils/objectDefinitions";
 import { Vec } from "@common/utils/vector";
 import $ from "jquery";
 import nipplejs, { type JoystickOutputData } from "nipplejs";
+import { Ticker } from "pixi.js";
 import { isMobile } from "pixi.js";
 import { getTranslatedString } from "../../translations";
 import { type TranslationKeys } from "../../typings/translations";
@@ -33,7 +34,9 @@ export class InputManager {
     // had to put it here because it's not a boolean
     // and inputManager assumes all keys of `movement` are booleans
     movementAngle = 0;
-
+    controllerConnected = false;
+    leftJoystickSensitivity = 0;
+    rightJoystickSensitivity = 0;
     mouseX = 0;
     mouseY = 0;
 
@@ -342,6 +345,159 @@ export class InputManager {
                 shootOnRelease = false;
             });
         }
+        const ticker = new Ticker();
+        window.addEventListener("gamepadconnected", () => {
+            let x = 0;
+            let LBpressed = false;
+            let RBpressed = false;
+            ticker.add(async() => {
+                const controller = navigator.getGamepads()[x];
+                if (!controller) return;
+                $("#tab-controller").show();
+                document.querySelectorAll(".controller-select").forEach(element => {
+                    const selectedController = parseInt(element.id.split("-")[2]);
+                    if (navigator.getGamepads()[selectedController]) {
+                        $(`#controller-select-${selectedController}`).css("display", "flex");
+                    } else $(`#controller-select-${selectedController}`).hide();
+                    element.addEventListener("click", () => {
+                        document.querySelectorAll(".controller-select").forEach(el => el.classList.remove("selected"));
+                        element.classList.add("selected");
+                        if (x === selectedController) return;
+                        x = selectedController;
+                        const newController = navigator.getGamepads()[x];
+                        if (!newController) return;
+                        void newController.vibrationActuator.playEffect("dual-rumble", {
+                            startDelay: 0,
+                            duration: 500,
+                            weakMagnitude: 1.0,
+                            strongMagnitude: 1.0
+                        });
+                    });
+                });
+                document.querySelectorAll(".controller-select").forEach((controllerSelect, index) => {
+                    const controller = navigator.getGamepads()[index];
+                    if (controller) {
+                        let imgSrc = "./img/misc/other_controller.svg";
+                        if (controller.id.includes("045e")) {
+                            imgSrc = "./img/misc/xbox_controller.svg";
+                        } else if (controller.id.includes("0ce")) {
+                            imgSrc = "./img/misc/ps5_controller.svg";
+                        } else if (controller.id.includes("054c") && !controller.id.includes("0ce")) {
+                            imgSrc = "./img/misc/ps4_controller.svg";
+                        } else if (controller.id.includes("057e")) {
+                            imgSrc = "./img/misc/joycon_controller.svg";
+                        }
+                        (document.getElementById(`controller-img-${index}`) as HTMLImageElement).src = imgSrc;
+                        (document.getElementById(`controller-id-${index}`) as HTMLDivElement).textContent = controller.id.split("(")[0].trim();
+                    }
+                });
+                this.leftJoystickSensitivity = game.console.getBuiltInCVar("cv_left_joystick_sensitivity");
+                this.rightJoystickSensitivity = game.console.getBuiltInCVar("cv_right_joystick_sensitivity");
+                const leftJoystickX = controller.axes[0];
+                const leftJoystickY = controller.axes[1];
+                const rightJoystickX = controller.axes[2];
+                const rightJoystickY = controller.axes[3];
+                const leftJoystickMoving = Math.abs(leftJoystickX) > this.leftJoystickSensitivity || Math.abs(leftJoystickY) > this.leftJoystickSensitivity;
+                const rightJoystickMoving = Math.abs(rightJoystickX) > this.rightJoystickSensitivity || Math.abs(rightJoystickY) > this.rightJoystickSensitivity;
+                // const rightJoystickDistance = Math.sqrt(gamepads[0].axes[2] * gamepads[0].axes[2] + gamepads[0].axes[3] * gamepads[0].axes[3]);
+                // distance formula for stuff like throwables, USAS-12, and M590M
+                let movementJoystickMoving = leftJoystickMoving;
+                let aimJoystickMoving = rightJoystickMoving;
+                let movementJoystickX = leftJoystickX;
+                let movementJoystickY = leftJoystickY;
+                let aimJoystickX = rightJoystickX;
+                let aimJoystickY = rightJoystickY;
+                const joystickInfo = document.getElementById("controller-joystick-info");
+                if (game.console.getBuiltInCVar("cv_switch_controller_joysticks")) {
+                    movementJoystickMoving = rightJoystickMoving;
+                    aimJoystickMoving = leftJoystickMoving;
+                    movementJoystickX = rightJoystickX;
+                    movementJoystickY = rightJoystickY;
+                    aimJoystickX = leftJoystickX;
+                    aimJoystickY = leftJoystickY;
+                    if (joystickInfo) joystickInfo.textContent = "Right joystick moves, Left joystick aims";
+                } else if (joystickInfo) joystickInfo.textContent = "Left joystick moves, Right joystick aims";
+
+                const inventory = this.game.uiManager.inventory;
+                const cycle = (offset: number): void => {
+                    let index = Numeric.absMod(
+                        inventory.activeWeaponIndex + offset,
+                        GameConstants.player.maxWeapons
+                    );
+                    let iterationCount = 0;
+                    while (!inventory.weapons[index]) {
+                        index = Numeric.absMod(index + offset, GameConstants.player.maxWeapons);
+                        if (++iterationCount > 100) {
+                            index = inventory.activeWeaponIndex;
+                            break;
+                        }
+                    }
+
+                    this.addAction({
+                        type: InputActions.EquipItem,
+                        slot: index
+                    });
+                };
+
+                if (controller.buttons[0].pressed) this.addAction(InputActions.Interact);
+                if (controller.buttons[2].pressed) this.addAction(InputActions.Cancel);
+                if (controller.buttons[4].pressed && !LBpressed) {
+                    cycle(-1); LBpressed = true;
+                } else if (!controller.buttons[4].pressed) LBpressed = false;
+
+                if (controller.buttons[5].pressed && !RBpressed) {
+                    cycle(1); RBpressed = true;
+                } else if (!controller.buttons[5].pressed) RBpressed = false;
+
+                if (controller.buttons[6].pressed) this.addAction(InputActions.Reload);
+                if (controller.buttons[7].pressed) {
+                    this.attacking = true;
+                    if (game.console.getBuiltInCVar("cv_controller_vibration")) {
+                        if (game.activePlayer?.activeItem.itemType === ItemType.Gun && !game.activePlayer.dead && !game.activePlayer.downed) {
+                            await controller.vibrationActuator.playEffect("dual-rumble", {
+                                startDelay: 0,
+                                duration: 10,
+                                weakMagnitude: 1.0,
+                                strongMagnitude: 1.0
+                            });
+                        }
+                    }
+                } else this.attacking = false;
+                if (movementJoystickMoving) {
+                    const movementAngle = Math.atan2(movementJoystickY, movementJoystickX);
+                    this.movementAngle = movementAngle;
+                    this.movement.moving = true;
+                    // note: movement.moving only works on mobile
+                    if (!aimJoystickMoving) {
+                        this.rotation = movementAngle;
+                        this.turning = true;
+                        if (game.console.getBuiltInCVar("cv_responsive_rotation") && !game.gameOver && game.activePlayer) {
+                            game.activePlayer.container.rotation = this.rotation;
+                            this.turning = true;
+                        }
+                        if (!game.activePlayer) return;
+                        game.activePlayer.images.aimTrail.alpha = 0;
+                    }
+                } else {
+                    this.movement.moving = false;
+                }
+
+                if (aimJoystickMoving) {
+                    this.rotation = Math.atan2(aimJoystickY, aimJoystickX);
+                    this.turning = true;
+
+                    if (game.console.getBuiltInCVar("cv_responsive_rotation") && !game.gameOver && game.activePlayer) {
+                        game.activePlayer.container.rotation = this.rotation;
+                        game.activePlayer.images.aimTrail.alpha = 1;
+                    }
+                }
+            });
+            ticker.start();
+        });
+        window.addEventListener("gamepaddisconnected", () => {
+            $("#tab-controller").hide();
+            if (ticker) ticker.stop();
+        });
     }
 
     private handleInputEvent(down: boolean, event: KeyboardEvent | MouseEvent | WheelEvent): void {
diff --git a/client/src/scripts/ui.ts b/client/src/scripts/ui.ts
index 455e7d9a4a..f00b4db7f9 100644
--- a/client/src/scripts/ui.ts
+++ b/client/src/scripts/ui.ts
@@ -1507,6 +1507,24 @@ export async function setUpUI(game: Game): Promise<void> {
     // Old menu music
     addCheckboxListener("#toggle-old-music", "cv_use_old_menu_music");
 
+    // Controller settings
+    addSliderListener(
+        "#slider-left-joystick-sensitivity",
+        "cv_left_joystick_sensitivity",
+        value => {
+        inputManager.leftJoystickSensitivity = value;
+        }
+    );
+    addSliderListener(
+        "#slider-right-joystick-sensitivity",
+        "cv_right_joystick_sensitivity",
+        value => {
+        inputManager.rightJoystickSensitivity = value;
+        }
+    );
+    addCheckboxListener("#switch-controller-joysticks", "cv_switch_controller_joysticks");
+    addCheckboxListener("#controller-vibration", "cv_controller_vibration");
+
     // Camera shake
     addCheckboxListener("#toggle-camera-shake", "cv_camera_shake_fx");
 
diff --git a/client/src/scripts/utils/console/defaultClientCVars.ts b/client/src/scripts/utils/console/defaultClientCVars.ts
index 29c10c5ae0..71bd755cf0 100644
--- a/client/src/scripts/utils/console/defaultClientCVars.ts
+++ b/client/src/scripts/utils/console/defaultClientCVars.ts
@@ -35,7 +35,11 @@ export const CVarCasters = Object.freeze({
     cv_sfx_volume: Casters.toNumber,
     cv_ambience_volume: Casters.toNumber,
     cv_music_volume: Casters.toNumber,
+    cv_left_joystick_sensitivity: Casters.toNumber,
+    cv_right_joystick_sensitivity: Casters.toNumber,
 
+    cv_controller_vibration: Casters.toBoolean,
+    cv_switch_controller_joysticks: Casters.toBoolean,
     cv_loop_scope_selection: Casters.toBoolean,
     cv_anonymize_player_names: Casters.toBoolean,
     cv_hide_emotes: Casters.toBoolean,
@@ -145,7 +149,11 @@ export const defaultClientCVars: SimpleCVarMapping = Object.freeze({
     cv_sfx_volume: 1,
     cv_ambience_volume: 1,
     cv_music_volume: 1,
+    cv_left_joystick_sensitivity: 0,
+    cv_right_joystick_sensitivity: 0,
 
+    cv_controller_vibration: false,
+    cv_switch_controller_joysticks: false,
     cv_loop_scope_selection: false,
     cv_anonymize_player_names: false,
     cv_hide_emotes: false,
diff --git a/client/src/scss/pages/dialog.scss b/client/src/scss/pages/dialog.scss
index 77adcd506a..f0c2fe584b 100644
--- a/client/src/scss/pages/dialog.scss
+++ b/client/src/scss/pages/dialog.scss
@@ -791,6 +791,40 @@
             color: red;
         }
     }
+    .controller-select-container {
+        display: flex; 
+        gap: 15px; 
+        flex-wrap: wrap; 
+        width: 335px;
+    }
+    
+    .controller-select {
+        display: none;
+        flex-direction: column;
+        width: 160px;
+        height: 100px;
+        background-color: hsl(230, 7%, 25%);
+        border-radius: 10px;
+        border: 3px solid transparent;
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+        text-align: center;
+        &.selected {
+            border-color: palette.$orange;
+        }
+    }
+
+    .controller-select-text {
+        width: 75px;
+        margin-left: -60px;
+        color: red;
+        font-size: 13px;
+        text-align: left;
+    }
+
+    .controller-select-img {
+        margin-top: -50px;
+         margin-left: 90px;
+    }
 
     .modal-item {