diff --git a/package-lock.json b/package-lock.json
index c9c4035..3faed0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,9 @@
         "react-qr-scanner": "^1.0.0-alpha.11",
         "react-router-dom": "^6.24.1",
         "react-type-animation": "^3.2.0",
-        "recoil": "^0.7.7"
+        "recoil": "^0.7.7",
+        "sockjs-client": "^1.6.1",
+        "stompjs": "^2.3.3"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -2102,6 +2104,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -2277,6 +2292,19 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "optional": true,
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -2611,6 +2639,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "optional": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "optional": true,
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2911,6 +2979,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "optional": true,
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -2983,11 +3066,38 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "optional": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/exenv": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
       "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "optional": true,
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3015,6 +3125,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3376,6 +3497,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3423,8 +3549,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
@@ -3744,6 +3869,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "optional": true
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -4051,6 +4182,23 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "optional": true
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.2.tgz",
+      "integrity": "sha512-IRUxE4BVsHWXkV/SFOut4qTlagw2aM8T5/vnTsmrHJvVoKueJHRc/JaFND7QDDc61kLYUJ6qlZM3sqTSyx2dTw==",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -4391,6 +4539,11 @@
       "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
       "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4637,6 +4790,11 @@
         "node": "*"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -4776,6 +4934,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -4886,6 +5063,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -4903,6 +5106,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha512-5l/Ogz0DTFW7TrpHF0LAETGqM/so8UxNJvYZjJKqcX31EVprSQgnGkO80tZctPC/lFBDUrSFiTG3xd0R27XAIA==",
+      "optionalDependencies": {
+        "websocket": "latest"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -5051,6 +5262,12 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/type": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
+      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
+      "optional": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5148,6 +5365,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
@@ -5214,6 +5440,28 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/vite": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
@@ -5312,6 +5560,59 @@
         "npm": ">=3.10.0"
       }
     },
+    "node_modules/websocket": {
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.35.tgz",
+      "integrity": "sha512-/REy6amwPZl44DDzvRCkaI1q1bIiQB0mEFQLUrhz3z2EK91cp3n72rAjUlrTP0zV22HJIUOVHQGPxhFRjxjt+Q==",
+      "optional": true,
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.63",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "optional": true
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5421,6 +5722,15 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 11fb7f7..02e8a4a 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,9 @@
     "react-qr-scanner": "^1.0.0-alpha.11",
     "react-router-dom": "^6.24.1",
     "react-type-animation": "^3.2.0",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "sockjs-client": "^1.6.1",
+    "stompjs": "^2.3.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/components/AdminRequestList.jsx b/src/components/AdminRequestList.jsx
index 59a158a..5f622fe 100644
--- a/src/components/AdminRequestList.jsx
+++ b/src/components/AdminRequestList.jsx
@@ -1,21 +1,33 @@
 import { useEffect } from "react";
 import "../css/components/AdminRequestList.css.ts"; // 확인: 경로와 확장자
 import AdminRequestListContainer from "./AdminRequestListContainer";
-import { adminRequestList, adminRequestListTitle, adminRequestListText, adminRequestListBox } from '../css/components/AdminRequestList.css.ts';
+import * as styles from "../css/components/AdminRequestList.css.ts";
+
 import axios from "axios";
 import { useRecoilState } from "recoil";
 import { adminRequests } from "../Atoms";
 
 function AdminRequestList() {
   const [requests, setRequests] = useRecoilState(adminRequests);
-  const exampleRequest = {
-    contact_id: "user123",
-    point: 1000,
-  };
-  
+  const exampleRequests = [
+    {
+      contact_id: "user123",
+      point: 2000,
+    },
+    {
+      contact_id: "user456",
+      point: 2000,
+    },
+  ];
   useEffect(() => {
     // 초기 요청 목록 초기화
-    setRequests([exampleRequest]);
+    setRequests(exampleRequests);
+    
+    
+  }, [setRequests]); // useEffect의 의존성 배열에 setRequests 추가
+ /* useEffect(() => {
+    // 초기 요청 목록 초기화
+    setRequests(exampleRequests);
     const fetchData = async () => {
       try {
         const response = await axios.get("/admin/manage/main");
@@ -36,15 +48,33 @@ function AdminRequestList() {
 
     fetchData();
   }, [setRequests]); // useEffect의 의존성 배열에 setRequests 추가
-
+*/
   return (
-    <div className={adminRequestList}>
-      <div className="content">
-        <div className={adminRequestListTitle}>충전 요청 목록</div>
-        <div className={adminRequestListText}>
-          유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
+    <div >
+      <div className={styles.requestSummaryBox}>
+        <div className={styles.requestSummaryItem}>
+          <span>현재 요청건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
         </div>
-        <div className={adminRequestListBox}>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 요청건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 승인건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+        <div className={styles.requestSummaryItem}>
+          <span>누적 취소건수</span>
+          <span className={styles.requestSummaryNumber}>0</span>
+        </div>
+      </div>
+      <div className="content">
+        <div className={styles.adminRequestListTitle}>충전 요청 목록</div>
+          <div className={styles.adminRequestListText}>
+            유저로부터 이름, 아이디, 입금 내역 확인해서 그만큼 충전
+          </div>
+        <div className={styles.adminRequestListBox}>
           {requests.map(
             (request, index) =>
               !request.isChecked && (
@@ -60,4 +90,4 @@ function AdminRequestList() {
     </div>
   );
 }
-export default AdminRequestList; // default로 export
\ No newline at end of file
+export default AdminRequestList;
diff --git a/src/components/AdminRequestListContainer.jsx b/src/components/AdminRequestListContainer.jsx
index d790271..a640bc3 100644
--- a/src/components/AdminRequestListContainer.jsx
+++ b/src/components/AdminRequestListContainer.jsx
@@ -11,7 +11,10 @@ import {
   adminRequestListItemPickmeButton,
   adminRequestListItemPickmeValue,
   adminRequestListItemSubmitButton,
-  adminRequestListElementResultPoint
+  adminRequestListElementResultPoint,
+  adminRequestListElementContainer,
+  buttonMarginRight,
+  chargeDeleteButton
 } from "../css/components/AdminRequestListContainer.css.ts"; // 스타일 파일 import
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
@@ -127,10 +130,13 @@ function AdminRequestListContainer({ request, setRequests }) {
             {request.contact_id}
           </div>
         </div>
-        <div className={adminRequestListElementResultPoint}>
-          총 잔액 : {value.result_point}
+        <div className={adminRequestListElementContainer}>
+          <span className={adminRequestListElementResultPoint}>
+            총 잔액 : {value.result_point}
+          </span>
+          <button className={chargeDeleteButton} onClick={handleChargeDelete}>요청 삭제</button>
         </div>
-        <button onClick={handleChargeDelete}>X</button>
+        
       </div>
 
       <div className={adminRequestListItem}>
@@ -148,15 +154,16 @@ function AdminRequestListContainer({ request, setRequests }) {
           className={adminRequestListItemInput}
         />
         {value.chargeCheck ? (
-          <button onClick={handleChargeDecrease}>취소</button>
+          <button onClick={handleChargeDecrease} className={buttonMarginRight}>취소</button>
         ) : (
-          <button onClick={handleChargeIncrease}>적용</button>
+          <button onClick={handleChargeIncrease} className={buttonMarginRight}>적용</button>
         )}
         <img
           src={heartIcon}
           alt="heart"
           className={adminRequestListItemImg}
         />
+        <p className={adminRequestListElementUserIDID}>기회 추가:</p>
         <button
           type="button"
           onClick={handleDecrease}
diff --git a/src/css/components/AdminRequestList.css.ts b/src/css/components/AdminRequestList.css.ts
index 189a8bb..8dc8875 100644
--- a/src/css/components/AdminRequestList.css.ts
+++ b/src/css/components/AdminRequestList.css.ts
@@ -1,6 +1,31 @@
 // AdminRequestList.css.ts
 import { style } from '@vanilla-extract/css';
 
+
+export const requestSummaryBox = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  backgroundColor: '#fff',
+  width: '80%',
+  margin: '0 auto',
+  padding: '24px 56px',
+  borderRadius: '12px', // Adds rounded corners
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // Adds a subtle shadow
+});
+
+export const requestSummaryItem = style({
+  textAlign: 'center',
+  color: '#383838',
+  fontSize: '16px',
+});
+
+export const requestSummaryNumber = style({
+  display: 'block',
+  fontSize: '48px',
+  fontWeight: 'bold',
+  marginTop: '8px',
+});
 export const adminRequestList = style({
   width: '100%',
 });
diff --git a/src/css/components/AdminRequestListContainer.css.ts b/src/css/components/AdminRequestListContainer.css.ts
index efd0012..ff0c9b2 100644
--- a/src/css/components/AdminRequestListContainer.css.ts
+++ b/src/css/components/AdminRequestListContainer.css.ts
@@ -8,9 +8,11 @@ export const adminRequestListElement = style({
 
 export const adminRequestListContainer = style({
   width: '90%',
-  border: '1px solid #000000',
+  border: 'none', /* 기존 border 제거 */
+  borderBottom: '1px solid #000000', /* 아래쪽에만 border 추가 */
   backgroundColor: '#ffffff',
   margin: '10px auto',
+  
 });
 
 export const adminRequestListItem = style({
@@ -35,9 +37,13 @@ export const adminRequestListItemInput = style({
   justifyContent: 'center',
   padding: '0',
   marginLeft: '15px',
-  marginRight: '73px',
+  marginRight: '3px',
 });
+export const buttonMarginRight =style({
+  marginLeft:'10px',
+  marginRight: '50px',
 
+});
 export const adminRequestListElementUserID = style({
   display: 'flex',
   alignItems: 'center',
@@ -51,6 +57,7 @@ export const adminRequestListElementUserIDID = style({
   fontSize: '24px',
   fontWeight: 'bold',
   color: '#000000',
+  marginRight:"10px",
 });
 
 export const adminRequestListItemPickmeButton = style({
@@ -79,7 +86,31 @@ export const adminRequestListItemSubmitButton = style({
 });
 
 export const adminRequestListElementResultPoint = style({
-  color: 'red',
+  color: '#d3d3d3',  /* grayscale 색상으로 변경 */
   fontSize: '24px',
-  fontWeight: '900',
+  fontWeight: '400',
+
+});
+export const adminRequestListElementContainer = style({
+  display: 'flex', /* Use flexbox for alignment */
+  alignItems: 'center', /* Align items vertically center */
+  gap: '10px', /* Space between the text and button */
+});
+
+export const chargeDeleteButton = style({
+  color: '#000000', /* 검정색 텍스트 */
+  backgroundColor: '#d3d3d3', /* 배경색 */
+  padding: '1px 6px', /* 패딩 */
+  width: '74px', /* 너비 */
+  height: '24px', /* 높이 */
+  border: 'none', /* 기본 테두리 제거 */
+  borderRadius: '4px', /* 둥근 모서리 */
+  cursor: 'pointer', /* 마우스 커서 변경 */
+
+  marginLeft: '10px',
+  fontSize: '12px', /* 텍스트 크기 */
+  transition: 'background-color 0.3s', /* 배경색 변화에 대한 트랜지션 */
+  ':hover': {
+    backgroundColor: '#6d6d6d', /* 호버 시 배경색 변화 */
+  },
 });
diff --git a/src/css/pages/ChargeRequests.css b/src/css/pages/ChargeRequests.css
index 515d752..efc3dcb 100644
--- a/src/css/pages/ChargeRequests.css
+++ b/src/css/pages/ChargeRequests.css
@@ -1,4 +1,5 @@
-.container{
-  margin-top: 100px;
-  
+.admin-container{
+  margin-top: 76px;
+  padding: 50px;
+  background-color: rgb(240, 240, 240);
 }
\ No newline at end of file
diff --git a/src/pages/ChargeRequestsPage.jsx b/src/pages/ChargeRequestsPage.jsx
index b40d1c6..4e9174a 100644
--- a/src/pages/ChargeRequestsPage.jsx
+++ b/src/pages/ChargeRequestsPage.jsx
@@ -3,7 +3,7 @@ import '../css/pages/ChargeRequests.css'
 import AdminRequestList from '../components/AdminRequestList';
 function ChargeRequestsPage() {
     return (
-        <div className='container'>
+        <div className='admin-container'>
             
             {/* 충전 요청 관련 기능 구현 */}
             <AdminRequestList />
diff --git a/src/pages/MainpageUnLogin.jsx b/src/pages/MainpageUnLogin.jsx
index d9c81ef..f2a82fc 100644
--- a/src/pages/MainpageUnLogin.jsx
+++ b/src/pages/MainpageUnLogin.jsx
@@ -16,7 +16,7 @@ function MainpageUnLogin() {
   // Redirection페이지로 옮겨서 role을 확인하는 과정을 거쳤습니다.
   const handleLogin = () => {
     window.location.href =
-      "https://catholic-mibal.site/oauth2/authorization/kakao";
+      "http://backend.comatching.site:8080/login";
   };
 
   // 서비스 이용법 안내 페이지로 이동하는 핸들러