diff --git a/apps/dashboard/src/components/App/index.tsx b/apps/dashboard/src/components/App/index.tsx
index 7d41907b3661a066e35430595b6dfdc70b2ddc4f..02362e7ede3502acdf551ce63a1b45606d62a44b 100644
--- a/apps/dashboard/src/components/App/index.tsx
+++ b/apps/dashboard/src/components/App/index.tsx
@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from "react";
-import {Button, Spin} from "antd";
-import {toast, ToastContainer} from "react-toastify";
+import { Button, Spin } from "antd";
+import { toast, ToastContainer } from "react-toastify";
 import PageRoutes from "@dashboard/routes";
 import Sidebar from "../Sidebar";
 import modalStore from "@dashboard/store/modalStore";
-import {observer} from "mobx-react";
+import { observer } from "mobx-react";
 import api from "@dashboard/api";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import config from "@dashboard/routes/config";
 import s from "./styles.module.scss";
 
-
 const App = observer(() => {
   const navigate = useNavigate();
   const [isAppLoading, setIsAppLoading] = useState(true);
@@ -18,18 +17,24 @@ const App = observer(() => {
   useEffect(() => {
     (async () => {
       api.subscribeToBasicMessages((message) => {
-        toast.info((
+        toast.info(
           <div>
-            You received a new message from {message.from || message.connectionId}.
+            You received a new message from{" "}
+            {message.from || message.connectionId}.
             <div>
-              <Button type="primary" onClick={() => {
-                navigate(config.connection_view.getLink(message.connectionId))
-              }}>
+              <Button
+                type="primary"
+                onClick={() => {
+                  navigate(
+                    config.connection_view.getLink(message.connectionId),
+                  );
+                }}
+              >
                 View message
               </Button>
             </div>
-          </div>
-        ));
+          </div>,
+        );
       });
       setIsAppLoading(false);
     })();
diff --git a/apps/dashboard/src/main.tsx b/apps/dashboard/src/main.tsx
index f870f8ec056f80b5fe01a956c06344e3f79b716c..d544d334f7bc7029c420c624b900b68ee4fd3387 100644
--- a/apps/dashboard/src/main.tsx
+++ b/apps/dashboard/src/main.tsx
@@ -1,10 +1,10 @@
-import * as ReactDOM from 'react-dom/client';
+import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import getConfig from "./utils/getConfig";
-import App from './components/App';
+import App from "./components/App";
 
-import api, {setConfig} from "./api";
+import api, { setConfig } from "./api";
 import "react-toastify/dist/ReactToastify.css";
 
 const config = getConfig();
@@ -12,7 +12,7 @@ const config = getConfig();
 setConfig({
   websocketUrl: config.WS_GATEWAY,
   gatewayUrl: config.HTTP_GATEWAY,
-  getToken: async () => ''
+  getToken: async () => "",
 });
 
 api.initialize();
@@ -22,7 +22,7 @@ window.api = api;
 
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <BrowserRouter>
diff --git a/package.json b/package.json
index d67822de1547d66358a3914c99c123b4f85bda3d..584acbf57a91ddd098602b9e9cd6565ac5a7ad49 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "passport-local": "^1.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-qr-code": "^2.0.12",
     "react-router-dom": "6.11.2",
     "react-toastify": "^9.1.3",
     "reflect-metadata": "^0.1.13",
@@ -109,6 +110,7 @@
     "@types/passport-local": "^1.0.35",
     "@types/react": "18.2.24",
     "@types/react-dom": "18.2.9",
+    "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
     "babel-jest": "^29.4.1",
diff --git a/yarn.lock b/yarn.lock
index d68eab83de0ca24e801bbed8ba72b52362327929..5a7b660e56336fda3715529401428bcec2c85bf2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3650,6 +3650,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.4.tgz#cf2f0c7c51b985b6afecea73eb2cd65421ecb717"
   integrity sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==
 
+"@types/uuid@^9.0.6":
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.6.tgz#c91ae743d8344a54b2b0c691195f5ff5265f6dfb"
+  integrity sha512-BT2Krtx4xaO6iwzwMFUYvWBWkV2pr37zD68Vmp1CDV196MzczBRxuEpD6Pr395HAgebC/co7hOphs53r8V7jew==
+
 "@types/validator@^13.7.10":
   version "13.11.5"
   resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.11.5.tgz#1911964fd5556b08d3479d1ded977c06f89a44a7"
@@ -11530,6 +11535,11 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+
 qrcode-terminal@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
@@ -12005,6 +12015,14 @@ react-native-securerandom@^0.1.1:
   dependencies:
     base64-js "*"
 
+react-qr-code@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.12.tgz#98f99e9ad5ede46d73ab819e2dd9925c5f5d7a2d"
+  integrity sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==
+  dependencies:
+    prop-types "^15.8.1"
+    qr.js "0.0.0"
+
 react-refresh@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"