diff --git a/package-lock.json b/package-lock.json
index b56fd65..01203b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,16 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "primereact": "^10.8.3",
+        "leaflet": "^1.9.4",
+        "leaflet-defaulticon-compatibility": "^0.1.2",
+        "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-leaflet": "^4.2.1",
+        "react-router-dom": "^6.26.2",
         "react-scripts": "5.0.1",
+        "socket.io": "^4.8.0",
+        "socket.io-client": "^4.8.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3541,6 +3547,26 @@
         }
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3656,6 +3682,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -4310,6 +4342,21 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -4752,15 +4799,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
-      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6140,6 +6178,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6836,6 +6883,19 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -7615,16 +7675,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7802,6 +7852,100 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.1.tgz",
+      "integrity": "sha512-NEpDCw9hrvBW+hVEOK4T7v0jFJ++KgtPl4jKFwsZVfG1XhS0dCrSb3VMb9gPAd7VAdW52VT1EnaNiU2vM8C0og==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.1.tgz",
+      "integrity": "sha512-aYuoak7I+R83M/BBPIOs2to51BmFIpC1wZe6zZzMrT2llVsHy5cvcmdsJgP2Qz6smHu+sD9oexiSUAVd8OfBPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -13342,6 +13486,18 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz",
+      "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -15782,29 +15938,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/primereact": {
-      "version": "10.8.3",
-      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.3.tgz",
-      "integrity": "sha512-LYa7DL1TDmWWrPCeh3CMsx89LXgcf4+rYhJ6YiA7z164WsdzJK388Bp1Qdv5cfpyL/Nm0eIWxIApxwWBv8kwuA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react-transition-group": "^4.4.1",
-        "react-transition-group": "^4.4.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -15898,6 +16031,15 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.0.1.tgz",
+      "integrity": "sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -16249,6 +16391,20 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16258,6 +16414,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16331,22 +16519,6 @@
         }
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -17287,6 +17459,83 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.0.tgz",
+      "integrity": "sha512-8U6BEgGjQOfGz3HHTYaC/L1GaxDCJ/KM0XTkJly0EhZ5U/du9uNEZy4ZgYzEzIqlx2CMm25CrCqr1ck899eLNA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.0.tgz",
+      "integrity": "sha512-C0jdhD5yQahMws9alf/yvtsMGTaIDBnZ8Rb5HU56svyq0l5LIrGzIDZZD5pHQlmzxLuU91Gz+VpQMKgCTNYtkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -19782,6 +20031,14 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.1.tgz",
+      "integrity": "sha512-ptjR8YSJIXoA3Mbv5po7RtSYHO6mZr8s7i5VGmEk7QY2pQWyT1o0N+W1gKbOyJPUCGXGnuw0wqe8f0L6Y0ny7g==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 3522925..4350e13 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "primereact": "^10.8.3",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
+    "qrcode.react": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "socket.io": "^4.8.0",
+    "socket.io-client": "^4.8.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index aa069f2..23d1da4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/logo192.png b/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/public/logo512.png differ
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..6f0a335
--- /dev/null
+++ b/server.js
@@ -0,0 +1,21 @@
+const io = require("socket.io")(4000, {
+  cors: {
+    origin: "*", // Разрешить все источники
+  },
+});
+
+const devices = [
+  { id: 1, name: "Устройство 1", lat: 59.9343, lng: 30.3351, timestamp: Date.now() }, // Санкт-Петербург
+  { id: 2, name: "Устройство 2", lat: 59.9400, lng: 30.3000, timestamp: Date.now() }, // Санкт-Петербург
+];
+
+setInterval(() => {
+  // Имитируем обновление местоположения
+  devices.forEach(device => {
+    device.lat += (Math.random() - 0.5) * 0.01;
+    device.lng += (Math.random() - 0.5) * 0.01;
+    device.timestamp = Date.now();
+  });
+
+  io.emit("deviceLocationUpdate", devices); // Отправляем обновленные данные клиенту
+}, 5000); // Обновляем данные каждые 5 секунд
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 538e2b0..804bd00 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import DeviceGroups from "./components/DeviceGroups"
-import Devices from "./components/Devices"
-import Sidebar from "./components/Sidebar"
+import DeviceGroups from "./pages/DeviceGroups";
+import Devices from "./pages/Devices";
+import Sidebar from "./Sidebar";
+import Dashboard from './pages/Dashboard';
 
 const App = () => {
   const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
@@ -10,7 +11,7 @@ const App = () => {
     <div style={{ display: 'flex' }}>
       <Sidebar onSelectTab={setActiveTab} activeTab={activeTab} /> {/* Передаем активную вкладку */}
       <div style={{ padding: '20px', flex: 1 }}>
-        {activeTab === 'map' && <div>Карта в реальном времени</div>}
+        {activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
         {activeTab === 'connection' && <div>Подключение</div>}
         {activeTab === 'account' && <div>Аккаунт пользователя</div>}
         {activeTab === 'groups' && <DeviceGroups />}  {/* Группы устройств */}
diff --git a/src/DeviceGroups.css b/src/DeviceGroups.css
index a421135..607c540 100644
--- a/src/DeviceGroups.css
+++ b/src/DeviceGroups.css
@@ -1,49 +1,48 @@
 .device-groups {
-    padding: 20px;
-  }
-  
-  .device-groups h2 {
-    margin-bottom: 20px;
-  }
-  
-  .group-creation {
-    margin-bottom: 20px;
-  }
-  
-  .group-creation input {
-    padding: 5px;
-    margin-right: 10px;
-  }
-  
-  .group-creation button {
-    padding: 5px 10px;
-  }
-  
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  li {
-    margin-bottom: 20px;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-  }
-  
-  .active {
-    background-color: #e8f5e9;
-  }
-  
-  .inactive {
-    background-color: #ffebee;
-  }
-  
-  li div {
-    margin-bottom: 10px;
-  }
-  
-  li button {
-    margin-right: 10px;
-  }
-  
\ No newline at end of file
+  padding: 20px;
+}
+
+.device-groups h2 {
+  margin-bottom: 20px;
+}
+
+.group-creation {
+  margin-bottom: 20px;
+}
+
+.group-creation input {
+  padding: 5px;
+  margin-right: 10px;
+}
+
+.group-creation button {
+  padding: 5px 10px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.active {
+  background-color: #e8f5e9;
+}
+
+.inactive {
+  background-color: #ffebee;
+}
+
+li div {
+  margin-bottom: 10px;
+}
+
+li button {
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/Devices.css b/src/Devices.css
index ca645f5..d63e831 100644
--- a/src/Devices.css
+++ b/src/Devices.css
@@ -1,39 +1,38 @@
 .devices {
-    padding: 20px;
-  }
-  
-  .devices h2 {
-    margin-bottom: 20px;
-  }
-  
-  .devices table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  
-  .devices table, .devices th, .devices td {
-    border: 1px solid #ddd;
-  }
-  
-  .devices th, .devices td {
-    padding: 8px;
-    text-align: left;
-  }
-  
-  .devices th {
-    background-color: #34495e;
-    color: white;
-  }
-  
-  .devices tr:hover {
-    background-color: #f1f1f1;
-  }
-  
-  .buttons {
-    margin-top: 20px;
-  }
-  
-  .buttons button {
-    margin-right: 10px;
-  }
-  
\ No newline at end of file
+  padding: 20px;
+}
+
+.devices h2 {
+  margin-bottom: 20px;
+}
+
+.devices table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.devices table, .devices th, .devices td {
+  border: 1px solid #ddd;
+}
+
+.devices th, .devices td {
+  padding: 8px;
+  text-align: left;
+}
+
+.devices th {
+  background-color: #34495e;
+  color: white;
+}
+
+.devices tr:hover {
+  background-color: #f1f1f1;
+}
+
+.buttons {
+  margin-top: 20px;
+}
+
+.buttons button {
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/Sidebar.css b/src/Sidebar.css
index 28d059c..60f8b09 100644
--- a/src/Sidebar.css
+++ b/src/Sidebar.css
@@ -1,52 +1,50 @@
 .sidebar {
-    width: 250px;
-    height: 100vh;
-    background-color: #2c3e50;
-    color: white;
-    padding: 20px;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
-  }
-  
-  .sidebar h2 {
-    font-size: 24px;
-    margin-bottom: 20px;
-  }
-  
-  .sidebar ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  .sidebar li {
-    margin: 15px 0;
-    cursor: pointer;
-  }
-  
-  .sidebar li:hover {
-    background-color: #34495e;
-    padding: 10px;
-    border-radius: 5px;
-  }
-  .sidebar ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  
-  .sidebar li {
-    margin: 15px 0;
-    cursor: pointer;
-    padding: 10px;
-    border-radius: 5px;
-    transition: background-color 0.3s;
-  }
-  
-  .sidebar li:hover {
-    background-color: #34495e;
-  }
-  
-  .sidebar li.active {
-    background-color: #2980b9;
-    color: white;
-  }
-  
-  
\ No newline at end of file
+  width: 250px;
+  height: 100vh;
+  background-color: #2c3e50;
+  color: white;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.sidebar h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar li {
+  margin: 15px 0;
+  cursor: pointer;
+}
+
+.sidebar li:hover {
+  background-color: #34495e;
+  padding: 10px;
+  border-radius: 5px;
+}
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar li {
+  margin: 15px 0;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.sidebar li:hover {
+  background-color: #34495e;
+}
+
+.sidebar li.active {
+  background-color: #2980b9;
+  color: white;
+}
\ No newline at end of file
diff --git a/src/components/Sidebar.js b/src/Sidebar.js
similarity index 95%
rename from src/components/Sidebar.js
rename to src/Sidebar.js
index 4559352..1a288f0 100644
--- a/src/components/Sidebar.js
+++ b/src/Sidebar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../Sidebar.css';
+import './Sidebar.css';
 
 const Sidebar = ({ onSelectTab, activeTab }) => {
   return (
@@ -26,4 +26,4 @@ const Sidebar = ({ onSelectTab, activeTab }) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/Devices.js b/src/components/Devices.js
deleted file mode 100644
index 0bf6977..0000000
--- a/src/components/Devices.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import '../Devices.css';
-
-const Devices = () => {
-  const [devices, setDevices] = useState([]);
-  const [selectedDevice, setSelectedDevice] = useState(null);
-
-  const addDevice = () => {
-    // Логика добавления устройства
-  };
-
-  const removeDevice = () => {
-    // Логика удаления выбранного устройства
-  };
-
-  const editDevice = () => {
-    // Логика редактирования устройства
-  };
-
-  const generateQR = () => {
-    // Логика генерации QR-кода
-  };
-
-  return (
-    <div className="devices">
-      <h2>Устройства</h2>
-      <table>
-        <thead>
-          <tr>
-            <th>Название</th>
-            <th>Статус</th>
-            <th>Действия</th>
-          </tr>
-        </thead>
-        <tbody>
-          {devices.map((device, index) => (
-            <tr key={index} onClick={() => setSelectedDevice(device)}>
-              <td>{device.name}</td>
-              <td>{device.status}</td>
-              <td>
-                <button onClick={editDevice}>Редактировать</button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="buttons">
-        <button onClick={addDevice}>Добавить</button>
-        <button onClick={removeDevice} disabled={!selectedDevice}>Удалить выбранное</button>
-        <button onClick={generateQR}>Генерация QR</button>
-      </div>
-    </div>
-  );
-};
-
-export default Devices;
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
new file mode 100644
index 0000000..cc0305a
--- /dev/null
+++ b/src/pages/Dashboard.js
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-defaulticon-compatibility";
+import io from "socket.io-client";
+
+// Инициализация WebSocket соединения
+const socket = io("ws://localhost:4000");
+
+const Dashboard = () => {
+  const [devices, setDevices] = useState([]);
+  const [userLocation, setUserLocation] = useState([59.9343, 30.3351]); // Центр по умолчанию на Санкт-Петербург
+  const [locationLoaded, setLocationLoaded] = useState(false); // Флаг загрузки местоположения
+
+  useEffect(() => {
+    // Получаем местоположение пользователя
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          setUserLocation([latitude, longitude]); // Устанавливаем координаты пользователя
+          setLocationLoaded(true); // Флаг, что местоположение загружено
+        },
+        (error) => {
+          console.error("Ошибка при получении геолокации:", error);
+          setLocationLoaded(true); // Продолжаем даже при ошибке
+        }
+      );
+    } else {
+      console.error("Геолокация не поддерживается вашим браузером");
+      setLocationLoaded(true); // Продолжаем даже если геолокация недоступна
+    }
+
+    // Получаем данные устройств в реальном времени
+    socket.on("deviceLocationUpdate", (data) => {
+      setDevices(data);
+    });
+
+    return () => {
+      socket.off("deviceLocationUpdate");
+    };
+  }, []);
+
+  return (
+    <div style={{ flex: 1 }}>
+      <h1>Панель мониторинга - Карта устройств</h1>
+      {locationLoaded ? (
+        <MapContainer
+          center={userLocation} // Центрируем карту на координатах пользователя
+          zoom={12} // Начальный зум
+          style={{ height: "90vh" }}
+        >
+          <TileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          />
+          {devices.map((device, index) => (
+            <Marker key={index} position={[device.lat, device.lng]}>
+              <Popup>
+                <b>{device.name}</b>
+                <br />
+                Последнее обновление: {new Date(device.timestamp).toLocaleString("ru-RU")}
+              </Popup>
+            </Marker>
+          ))}
+          {/* Маркер текущего местоположения пользователя */}
+          <Marker position={userLocation}>
+            <Popup>Вы здесь</Popup>
+          </Marker>
+        </MapContainer>
+      ) : (
+        <p>Загрузка карты...</p>
+      )}
+    </div>
+  );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/DeviceGroups.js b/src/pages/DeviceGroups.js
similarity index 96%
rename from src/components/DeviceGroups.js
rename to src/pages/DeviceGroups.js
index 1390cd3..2bc3609 100644
--- a/src/components/DeviceGroups.js
+++ b/src/pages/DeviceGroups.js
@@ -3,7 +3,6 @@ import '../DeviceGroups.css';
 
 const DeviceGroups = () => {
   const [groups, setGroups] = useState([]);
-  const [selectedGroup, setSelectedGroup] = useState(null);
   const [newGroupName, setNewGroupName] = useState('');
 
   const createGroup = () => {
@@ -85,4 +84,4 @@ const DeviceGroups = () => {
   );
 };
 
-export default DeviceGroups;
+export default DeviceGroups;
\ No newline at end of file
diff --git a/src/pages/Devices.js b/src/pages/Devices.js
new file mode 100644
index 0000000..adb5992
--- /dev/null
+++ b/src/pages/Devices.js
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { QRCodeCanvas } from "qrcode.react";
+import '../Devices.css';
+
+const Devices = () => {
+  const [devices, setDevices] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState(null);
+  const [deviceName, setDeviceName] = useState('');
+  const [deviceStatus, setDeviceStatus] = useState('');
+
+  const addDevice = () => {
+    if (deviceName) {
+      const newDevice = { name: deviceName, status: deviceStatus || 'Неактивен', id: Date.now() };
+      setDevices([...devices, newDevice]);
+      setDeviceName('');
+      setDeviceStatus('');
+    }
+  };
+
+  const removeDevice = () => {
+    if (selectedDevice) {
+      setDevices(devices.filter(device => device.id !== selectedDevice.id));
+      setSelectedDevice(null);
+    }
+  };
+
+  const editDevice = () => {
+    if (selectedDevice) {
+      const updatedDevices = devices.map(device =>
+        device.id === selectedDevice.id
+          ? { ...device, name: deviceName, status: deviceStatus }
+          : device
+      );
+      setDevices(updatedDevices);
+      setSelectedDevice(null);
+      setDeviceName('');
+      setDeviceStatus('');
+    }
+  };
+
+  const generateQR = (device) => {
+    return (
+      <QRCodeCanvas value={JSON.stringify(device)} size={128} />
+    );
+  };
+
+  return (
+    <div className="devices">
+      <h2>Устройства</h2>
+      <input
+        type="text"
+        placeholder="Название устройства"
+        value={deviceName}
+        onChange={(e) => setDeviceName(e.target.value)}
+      />
+      <input
+        type="text"
+        placeholder="Статус устройства"
+        value={deviceStatus}
+        onChange={(e) => setDeviceStatus(e.target.value)}
+      />
+      <table>
+        <thead>
+          <tr>
+            <th>Название</th>
+            <th>Статус</th>
+            <th>QR Код</th>
+            <th>Действия</th>
+          </tr>
+        </thead>
+        <tbody>
+          {devices.map((device) => (
+            <tr key={device.id} onClick={() => setSelectedDevice(device)}>
+              <td>{device.name}</td>
+              <td>{device.status}</td>
+              <td>{generateQR(device)}</td>
+              <td>
+                <button onClick={editDevice}>Редактировать</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="buttons">
+        <button onClick={addDevice}>Добавить</button>
+        <button onClick={removeDevice} disabled={!selectedDevice}>Удалить выбранное</button>
+        <button onClick={editDevice} disabled={!selectedDevice}>Сохранить изменения</button>
+      </div>
+    </div>
+  );
+};
+
+export default Devices;
\ No newline at end of file