diff --git a/connect-chat-app/package-lock.json b/connect-chat-app/package-lock.json
index 495de4f..d1a7035 100644
--- a/connect-chat-app/package-lock.json
+++ b/connect-chat-app/package-lock.json
@@ -26,6 +26,7 @@
         "react-scripts": "5.0.0",
         "redux": "^4.1.2",
         "redux-thunk": "^2.4.1",
+        "socket.io-client": "^4.4.1",
         "typescript": "^4.6.3",
         "web-vitals": "^2.1.4",
         "yup": "^0.32.11"
@@ -3360,6 +3361,19 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
     "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",
@@ -4990,6 +5004,11 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6464,6 +6483,53 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "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.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "dependencies": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
@@ -8156,6 +8222,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -11729,6 +11800,16 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
     },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -14333,6 +14414,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.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",
@@ -16231,6 +16340,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -16285,6 +16402,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -18537,6 +18659,16 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ=="
+    },
+    "@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
     "@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",
@@ -19773,6 +19905,11 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -20847,6 +20984,38 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "requires": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      }
+    },
     "enhanced-resolve": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
@@ -22069,6 +22238,11 @@
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
       "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
     },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -24642,6 +24816,16 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
     },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -26401,6 +26585,28 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
+    "socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -27858,6 +28064,11 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -27897,6 +28108,11 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/connect-chat-app/package.json b/connect-chat-app/package.json
index 7d0cff5..bcd316f 100644
--- a/connect-chat-app/package.json
+++ b/connect-chat-app/package.json
@@ -21,6 +21,7 @@
     "react-scripts": "5.0.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
+    "socket.io-client": "^4.4.1",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx
index ccfede5..79d2d09 100644
--- a/connect-chat-app/src/App.tsx
+++ b/connect-chat-app/src/App.tsx
@@ -1,16 +1,51 @@
-import React from 'react';
-import Header from './Components/Header';
+import { Route, Routes } from 'react-router-dom';
 import HomePage from './Pages/HomePage';
-
+import LoginPage from './Pages/LoginPage';
+import SignUpPage from './Pages/SignUpPage';
+import { useSelector, useDispatch } from 'react-redux'
+import { RootState } from './reducer/store';
+import { meAPI } from './api';
+import { setToken, setUser } from './reducer/app';
+import { useEffect } from 'react';
+import Header from './Components/Header'
+import PrivateRoute from './Components/PrivareRoute';
 
 function App() {
+  const authedUser = useSelector((state: RootState)=>state.app.user)
+  const dispatch = useDispatch();
+
+  const token = useSelector((state: RootState) => state.app.token);
+  async function saveUser(token: string) {
+    const user = await meAPI(token);
+
+    dispatch(setUser(user));
+    console.log({ user });
+  }
+
+  useEffect(() => {
+    const tokenLocalStorage = localStorage.getItem("auth-token");
+    console.log({ tokenLocalStorage });
+    if (tokenLocalStorage) {
+      dispatch(setToken(tokenLocalStorage));
+      saveUser(tokenLocalStorage);
+    }
+  }, []);
+
+  
+
   return (
     <div className="App">
       <header className="App-header">
-        <Header/>
+        <Header />
       </header>
       <main>
-        <HomePage/>
+        <Routes> 
+          <Route element={<PrivateRoute authedUser={authedUser} />}>
+            <Route path="/" element={<HomePage />} />
+          </Route>
+          <Route path="/auth/signIn" element={<LoginPage />} />
+          <Route path="/auth/signUp" element={<SignUpPage />} />
+        </Routes>
       </main>
       <footer className='App-footer'>
         footer bla bla bla
@@ -20,3 +55,4 @@ function App() {
 }
 
 export default App;
+
diff --git a/connect-chat-app/src/Components/Chat.tsx b/connect-chat-app/src/Components/Chat.tsx
index 779c7ae..bbe03f0 100644
--- a/connect-chat-app/src/Components/Chat.tsx
+++ b/connect-chat-app/src/Components/Chat.tsx
@@ -1,46 +1,83 @@
 import { Avatar } from '@mui/material'
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useFormik } from 'formik'
 import SendIcon from '@mui/icons-material/Send';
 import ChatHeader from './ChatHeader';
-function Chat() {
+import { io } from "socket.io-client";
+import { send } from 'process';
+import { sendMessage } from '../api';
+interface Provider {
+  message: string
+}
+function Chat({ back }: { back: () => void }) {
+  const [yourID, setYourID] = useState<string>('');
+  const [messages, setMessages] = useState<Provider[]>([]);
+  // const [message, setMessage] = useState("");
+  const [socket, setSocket] = useState(null)
+  const goBack = back
+
+  useEffect(() => {
+    
+    const socket = io('http://localhost:7070')
+    socket.on("your id", (id: string) => {
+      setYourID(id)
+    })
+    socket.on("message", (message: Provider) => {
+      receivedMessage(message);
 
-  const initialValues = {reply:''}
+    })
+  }, [])
+  function receivedMessage(message: Provider) {
+    setMessages([...messages, message]);
+  }
+
+  const initialValues = {
+    reply: ''
+  }
   const formik = useFormik({
 
-    initialValues,onSubmit: values => {
+    initialValues,
+    onSubmit: async values => {
+      await sendMessage(values.reply)
+      // setMessages()
       console.log(values)
+      if(socket) {
+        socket.emit("send message", values)
+      }
+
     }
 
   })
 
   return (
     <div className='chatBox-container'>
-        <ChatHeader/>
-        <div className='chat-header'>
-            <Avatar/>
-            <p>Contact's Name</p>
-        </div>
-        <div className='chat-box'>
-          <ul className='box-conversation'>
-            <li >
-              hello there , how are you hope all is well , bla bla bla
-            </li>
-          </ul>
-        </div>
-        <form className='chat-input' onSubmit={formik.handleSubmit}>
-          <input
-            id='reply'
-            onInput={formik.handleChange}
-            value={formik.values.reply}
-            placeholder="type your message here."
-          />
-          <button type='submit' className='chat-send'>
-            <span>
-              <SendIcon/>
-            </span>
-          </button>
-        </form>
+      <ChatHeader 
+        goBack={goBack}
+      />
+      <div className='chat-header'>
+        <Avatar />
+        <p>Contact's Name</p>
+      </div>
+      <div className='chat-box'>
+        <ul className='box-conversation'>
+          <li >
+            hello there , how are you hope all is well , bla bla bla
+          </li>
+        </ul>
+      </div>
+      <form className='chat-input' onSubmit={formik.handleSubmit}>
+        <input
+          id='reply'
+          onInput={formik.handleChange}
+          value={formik.values.reply}
+          placeholder="type your message here."
+        />
+        <button type='submit' className='chat-send'>
+          <span>
+            <SendIcon />
+          </span>
+        </button>
+      </form>
     </div>
   )
 }
diff --git a/connect-chat-app/src/Components/ChatHeader.tsx b/connect-chat-app/src/Components/ChatHeader.tsx
index 24ddb46..12351b6 100644
--- a/connect-chat-app/src/Components/ChatHeader.tsx
+++ b/connect-chat-app/src/Components/ChatHeader.tsx
@@ -1,11 +1,15 @@
 import React from 'react'
 import { Avatar } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-function ChatHeader() {
+function ChatHeader({ goBack }: { goBack: () => void }) {
   return (
     <div className='contacts-header'>
         <div className='header-contact-id'>
-          <ArrowBackIosIcon/>
+          <span
+            onClick={goBack}
+          >
+            <ArrowBackIosIcon/>
+          </span>
           <Avatar/>
           <h1>Contact's Name</h1>
         </div>
diff --git a/connect-chat-app/src/Components/Contacts.tsx b/connect-chat-app/src/Components/Contacts.tsx
index 45cef66..65d54ec 100644
--- a/connect-chat-app/src/Components/Contacts.tsx
+++ b/connect-chat-app/src/Components/Contacts.tsx
@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ContactCard from './ContactCard'
 import ContactsHeader from './ContactsHeader'
-function Contacts() {
-
+function Contacts({conversations}:{conversations: string[]}) {
+// useEffect(()=>{
+  
+// })
   //assign contact to chat with + set chatMode true
   //recieve users via useSelector
   return (
@@ -11,33 +13,11 @@ function Contacts() {
         <h2 className='contacts-title'>Messages</h2>
         <div className='contacts-scroll'>
           <ul className='contacts-list'>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
-            <li>
-              <ContactCard/>
-            </li>
+            {
+              <li>
+                <ContactCard/>
+              </li>
+            }
           </ul>
         </div>
     </div>
diff --git a/connect-chat-app/src/Components/Login.tsx b/connect-chat-app/src/Components/Login.tsx
new file mode 100644
index 0000000..7aa35f3
--- /dev/null
+++ b/connect-chat-app/src/Components/Login.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+// import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import logo from '../logo.svg'
+import { useFormik } from 'formik';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import * as api from '../api'
+
+function Copyright(props: any) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="/login">
+        Team Name
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const theme = createTheme();
+const Login = () => {
+  
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+  const formik = useFormik({
+      initialValues: {
+          email: '',
+          password: '',
+      },
+      onSubmit: async values => {
+         const {token} =  await api.login(values.email,values.password) //get token by login in -- sending request to server with email and password and server response returns  the token token
+         console.log({token});
+         localStorage.setItem('token', JSON.parse(token)) // save the token returned from the server into the localStorage
+         navigate('/') 
+      }
+  })
+    
+      return (
+        <ThemeProvider theme={theme}>
+          <Grid container component="main" sx={{ height: '100vh' }}>
+            <CssBaseline />
+            <Grid
+              item
+              xs={false}
+              sm={4}
+              md={7}
+              sx={{
+                display:"flex",
+                justifyContent:"center",
+                alignItems:"center"
+              }}
+            >
+                <Grid>
+                <Avatar sx={{m: 1, bgcolor: 'white', width:"250px",height:"250px"}}>
+                <img src={logo} alt="" />
+                </Avatar>
+                </Grid>
+                
+            </Grid>
+            
+            <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+              <Box
+                sx={{
+                  my: 8,
+                  mx: 4,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
+              >
+                <Avatar sx={{ m: 1, bgcolor: 'white', width:"250px",height:"250px"}}>
+                <img src={logo} alt="" />
+                </Avatar>
+                
+                <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
+                  <TextField
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="email"
+                    label="Email Address"
+                    name="email"
+                    autoComplete="email"
+                    autoFocus
+                    variant='standard'
+                    onChange={formik.handleChange}
+
+                  />
+                  <TextField
+                    margin="normal"
+                    required
+                    fullWidth
+                    name="password"
+                    label="Password"
+                    type="password"
+                    id="password"
+                    autoComplete="current-password"
+                    variant='standard'
+                    onChange={formik.handleChange}
+
+
+                  />
+                  {/* <FormControlLabel
+                    control={<Checkbox value="remember" color="primary" />}
+                    label="Remember me"
+                  /> */}
+                  <Button
+                    type="submit"
+                    fullWidth
+                    variant="contained"
+                    sx={{ mt: 3, mb: 2 }}
+                    style={{backgroundColor:"#03CCBB"}}
+                  >
+                    Sign In
+                  </Button>
+                  <Grid container>
+                    {/* <Grid item xs>
+                      <Link href="#" variant="body2">
+                        Forgot password?
+                      </Link>
+                    </Grid> */}
+                    <Grid item xs={12}>
+                      <Link href="#" variant="body2">
+                        {"Don't have an account? Sign Up"}
+                      </Link>
+                    </Grid>
+                  </Grid>
+                  <Copyright sx={{ mt: 5 }} />
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </ThemeProvider>
+      );
+    }
+
+export default Login
\ No newline at end of file
diff --git a/connect-chat-app/src/Components/PrivareRoute.tsx b/connect-chat-app/src/Components/PrivareRoute.tsx
new file mode 100644
index 0000000..39bc673
--- /dev/null
+++ b/connect-chat-app/src/Components/PrivareRoute.tsx
@@ -0,0 +1,14 @@
+import { Navigate, Outlet } from "react-router";
+import {User} from '../types/User'
+
+function PrivateRoute({authedUser}:{authedUser:User | null}) {
+    console.log(authedUser)
+    // If authorized, return an outlet that will render child elements
+    // If not, return element that will navigate to login page
+    if (authedUser) {
+        return <Outlet/>;
+    }
+    return <Navigate replace to="/" />;
+}
+
+export default PrivateRoute;
\ No newline at end of file
diff --git a/connect-chat-app/src/Components/SignUp.tsx b/connect-chat-app/src/Components/SignUp.tsx
new file mode 100644
index 0000000..75dceb2
--- /dev/null
+++ b/connect-chat-app/src/Components/SignUp.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+// import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+import * as api from '../api'
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { useDispatch } from 'react-redux';
+import { useFormik } from 'formik';
+import { setUser } from '../reducer/app';
+
+function Copyright(props: any) {
+    return (
+      <Typography variant="body2" color="text.secondary" align="center" {...props}>
+        {'Copyright © '}
+        <Link color="inherit" href="https://mui.com/">
+          Your Website
+        </Link>{' '}
+        {new Date().getFullYear()}
+        {'.'}
+      </Typography>
+    );
+  }
+  
+  const theme = createTheme();
+const SignUp = () => {
+    const dispatch = useDispatch()
+    const formik = useFormik({
+        initialValues: {
+            firstName: '',
+            lastName: '',
+            userName: '',
+            email: '',
+            password: '',
+        },
+        onSubmit: async values => {
+            const user = await api.setUser(values)
+            console.log(user)
+            dispatch(setUser(values))
+            localStorage.setItem("user",JSON.stringify(values))
+        }
+    })
+    return (  
+      <ThemeProvider theme={theme}>
+            <Grid container component="main" sx={{ height: '100vh' }}>
+              <CssBaseline />
+              <Grid
+                item
+                xs={false}
+                sm={4}
+                md={7}
+                sx={{
+                  backgroundImage: 'url(https://source.unsplash.com/random)',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundColor: (t) =>
+                    t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              />
+              <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+                <Box
+                  sx={{
+                    my: 8,
+                    mx: 4,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+                    {/* <LockOutlinedIcon /> */}
+                  </Avatar>
+                  <Typography component="h1" variant="h5">
+                    Sign in
+                  </Typography>
+                  <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
+                  <TextField
+                      margin="normal"
+                      required
+                      fullWidth
+                      id="name"
+                      label="Name"
+                      name="name"
+                      autoComplete="name"
+                      autoFocus
+                    />
+                    <TextField
+                      margin="normal"
+                      required
+                      fullWidth
+                      id="email"
+                      label="Email Address"
+                      name="email"
+                      autoComplete="email"
+                      autoFocus
+                    />
+                    <TextField
+                      margin="normal"
+                      required
+                      fullWidth
+                      name="password"
+                      label="Password"
+                      type="password"
+                      id="password"
+                      autoComplete="current-password"
+                    />
+                    <FormControlLabel
+                      control={<Checkbox value="remember" color="primary" />}
+                      label="Remember me"
+                    />
+                    <Button
+                      type="submit"
+                      fullWidth
+                      variant="contained"
+                      sx={{ mt: 3, mb: 2 }}
+                    >
+                      Sign In
+                    </Button>
+                    <Grid container>
+                      <Grid item xs>
+                        <Link href="#" variant="body2">
+                          Forgot password?
+                        </Link>
+                      </Grid>
+                      <Grid item>
+                        <Link href="#" variant="body2">
+                          {"Don't have an account? Sign Up"}
+                        </Link>
+                      </Grid>
+                    </Grid>
+                    <Copyright sx={{ mt: 5 }} />
+                  </Box>
+                </Box>
+              </Grid>
+            </Grid>
+          </ThemeProvider>
+    )
+  }
+  
+
+export default SignUp
\ No newline at end of file
diff --git a/connect-chat-app/src/Pages/HomePage.tsx b/connect-chat-app/src/Pages/HomePage.tsx
index 584bd3a..7244202 100644
--- a/connect-chat-app/src/Pages/HomePage.tsx
+++ b/connect-chat-app/src/Pages/HomePage.tsx
@@ -1,40 +1,68 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import Contacts from '../Components/Contacts'
 import Chat from '../Components/Chat'
-import { boolean } from 'yup/lib/locale'
-import {Toggler} from '../types/functions'
-function HomePage() {
+import { RootState } from '../reducer/store'
+import app, { setConversations } from '../reducer/app'
+import { getConversation } from '../api'
+import { useDispatch, useSelector } from 'react-redux'
+// import { useAppDispatch, useAppSelector } from '../reducer/hooks'
 
-    //mobile view - chat/contacts toggle
+function HomePage():JSX.Element {
+    const data = useSelector((state: RootState)=>state)
+    const authUser = data.app.user
+    const conversations = data.app.conversation
     const [chatMode, setChatMode] = useState(true)
+    const dispatch = useDispatch()
+
     const viewChat = () =>{
         setChatMode(true)
     }
     const back = () => {
         setChatMode(false)
     }
-  return (
-    <div className='homePage-wrapper'>
-        <div className='homePage-mobile'>
-            <div className={chatMode? 'hide' : 'mobile-contacts'}>
-                <Contacts
-                //   viewChat={viewChat}
-                />
-            </div>
-            <div className={chatMode? 'mobile-chat' : 'hide'}>
-                <Chat/>
-            </div>
-        </div>
-        <div className='homePage-pc'>
-            <div className='pc-contacts'>
-                <Contacts/>
+     const listConversations = async (userId:string) => {
+        const res = await getConversation(userId)
+        return res
+        
+    }
+    
+    useEffect(() => {
+        if (authUser){
+            const response = listConversations(authUser.id) //authedUuser
+        
+        dispatch(setConversations(response))
+        }
+        
+    }, [])
+
+    return (
+        <div className='homePage-wrapper'>
+            <div className='homePage-mobile'>
+                <div className={chatMode ? 'hide' : 'mobile-contacts'}>
+                    <Contacts
+                        conversations={conversations}
+                    />
+                </div>
+                <div className={chatMode ? 'mobile-chat' : 'hide'}>
+                    <Chat
+                        back={back}
+                    />
+                </div>
             </div>
-            <div className='pc-chatBox'>
-                <Chat/>
+            <div className='homePage-pc'>
+                <div className='pc-contacts'>
+                    <Contacts 
+                        conversations={conversations}
+                    />
+                </div>
+                <div className='pc-chatBox'>
+                    <Chat 
+                        back={back}
+                    />
+                </div>
             </div>
         </div>
-    </div>
-  )
+    )
 }
 
 export default HomePage
\ No newline at end of file
diff --git a/connect-chat-app/src/Pages/LoginPage.tsx b/connect-chat-app/src/Pages/LoginPage.tsx
new file mode 100644
index 0000000..0e526c1
--- /dev/null
+++ b/connect-chat-app/src/Pages/LoginPage.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import Login from '../Components/Login';
+
+
+
+  
+    
+const LoginPage = () :JSX.Element => {
+  
+      return (
+        <div>
+          <Login/>
+        </div>
+      );
+    }
+
+export default LoginPage
+
+
diff --git a/connect-chat-app/src/Pages/SignUpPage.tsx b/connect-chat-app/src/Pages/SignUpPage.tsx
new file mode 100644
index 0000000..506a681
--- /dev/null
+++ b/connect-chat-app/src/Pages/SignUpPage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import SignUp from '../Components/SignUp'
+
+
+  
+    
+const SignUpPage = () => {
+  
+  return (
+    <div>
+      <SignUp/>
+    </div>
+  )
+}
+
+export default SignUpPage
\ No newline at end of file
diff --git a/connect-chat-app/src/api/api.ts b/connect-chat-app/src/api/index.ts
similarity index 88%
rename from connect-chat-app/src/api/api.ts
rename to connect-chat-app/src/api/index.ts
index f1ce3ce..65f955e 100644
--- a/connect-chat-app/src/api/api.ts
+++ b/connect-chat-app/src/api/index.ts
@@ -1,28 +1,30 @@
-import axios from "axios";
-import { User } from "../types/User"
-
-const URL = "http://localhost:7000/"
-
-const api = axios.create({baseURL: URL}); 
-
-export const signUpAPI = async (user: User) => {
-    const response = await api.post("/auth/signup", user);
-    return response.data;
-
-}
-
-export const signInAPI = async (email:string, password:string) => {
-    const response = await api.post("/auth/login", { email, password });
-   
-    return response.data;
-    
-} 
-
-export const meAPI = async (token: string): Promise<User> => {
-    const response = await api.get("/auth/me", {
-        headers: {
-            Authorization: token
-        },
-    });
-    return response.data.user;
-}
\ No newline at end of file
+import axios from "axios";
+import { User } from "../types/User"
+
+const URL = "http://localhost:7000/"
+
+const api = axios.create({baseURL: URL}); 
+
+export const signUpAPI = async (user: User) => {
+    const response = await api.post("/auth/signup", user);
+    return response.data;
+
+}
+
+export const signInAPI = async (email:string, password:string) => {
+    const response = await api.post("/auth/login", { email, password });
+   
+    return response.data;
+    
+} 
+
+export const meAPI = async (token: string): Promise<User> => {
+    const response = await api.get("/auth/me", {
+        headers: {
+            Authorization: token
+        },
+    });
+    return response.data.user;
+}
+
+export const getConversation = (userId:string) => api.post('/conversations/', (userId))
diff --git a/connect-chat-app/src/reducer/app.ts b/connect-chat-app/src/reducer/app.ts
index fef5337..e2664fc 100644
--- a/connect-chat-app/src/reducer/app.ts
+++ b/connect-chat-app/src/reducer/app.ts
@@ -17,12 +17,12 @@ export const appSlice = createSlice({
         setToken: (state, { payload }) => {
             state.token = payload;
         },
-        getConversations: (state, { payload }) => {
+        setConversations: (state, { payload }) => {
             state.conversation = [...state.conversation,payload]
-        }  
+        },
     },
 });
 
 
 export default appSlice.reducer;
-export const { setUser , setToken, getConversations } = appSlice.actions;
\ No newline at end of file
+export const { setUser , setToken, setConversations } = appSlice.actions;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8968562
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,261 @@
+{
+  "name": "ConnectChatApp",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "socket.io-client": "^4.4.1"
+      }
+    },
+    "node_modules/@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "dependencies": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "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/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    }
+  },
+  "dependencies": {
+    "@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ=="
+    },
+    "@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "requires": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      }
+    },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
+    "socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1"
+      }
+    },
+    "ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "requires": {}
+    },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..18bdd95
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "socket.io-client": "^4.4.1"
+  }
+}