diff --git a/apps/front/package.json b/apps/front/package.json
index 58f4fa3..c3df376 100644
--- a/apps/front/package.json
+++ b/apps/front/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "@roomruler/messages": "workspace:^0.0.0",
     "immer": "^9.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/apps/front/src/components/Canvas.tsx b/apps/front/src/components/Canvas.tsx
index d28be05..877020b 100644
--- a/apps/front/src/components/Canvas.tsx
+++ b/apps/front/src/components/Canvas.tsx
@@ -41,7 +41,7 @@ export const useCanvas = (
 
       clickCb(x, y);
     },
-    [canvasRef.current]
+    [canvasRef.current, clickCb]
   );
 
   return { canvasRef, onClick };
diff --git a/apps/front/src/config.ts b/apps/front/src/config.ts
new file mode 100644
index 0000000..7982799
--- /dev/null
+++ b/apps/front/src/config.ts
@@ -0,0 +1 @@
+export const WS_URL = "ws://localhost:8081";
diff --git a/apps/front/src/constants.ts b/apps/front/src/constants.ts
index 0f4b950..d7847ce 100644
--- a/apps/front/src/constants.ts
+++ b/apps/front/src/constants.ts
@@ -20,21 +20,8 @@ export const WeekDays = [
   "Sunday",
 ] as const;
 
-// It will look like Windows 11 logo, lol
 export const defaultState: ContextData = {
-  map: [
-    { x: 5, y: 5 },
-    { x: 110, y: 5 },
-    { x: 5, y: 110 },
-    { x: 110, y: 110 },
-  ].map((coordinates, index) => ({
-    coordinates,
-    size: { w: 100, h: 100 },
-    title: index + 1,
-  })),
-  char: Array(4)
-    .fill(0)
-    .map(() => ({
-      free: true,
-    })),
+  map: [],
+  char: [],
+  ids: {},
 };
diff --git a/apps/front/src/context.tsx b/apps/front/src/context.tsx
index 0cda76b..1ff3d89 100644
--- a/apps/front/src/context.tsx
+++ b/apps/front/src/context.tsx
@@ -1,20 +1,47 @@
 import produce from "immer";
-import { createContext, FC, useContext, useState } from "react";
+import { createContext, FC, useContext, useEffect, useState } from "react";
 
 import { defaultState } from "./constants";
 import { ContextData, ContextValue } from "./types/context";
+import { isArrayOf, isMessage, isRoom } from "@roomruler/messages";
+import { WS_URL } from "./config";
+import { RoomDisplay, RoomState } from "./types/room";
 
 const Context = createContext<ContextValue | undefined>(undefined);
 
+const ws = new WebSocket(WS_URL);
+
 export const RoomContextProvider: FC = ({ children }) => {
   const [state, setState] = useState<ContextData>(defaultState);
 
-  const toggleFree = (index: number) =>
-    setState(
-      produce((draft) => {
-        draft.char[index].free = !draft.char[index].free;
-      })
-    );
+  const toggleFree = (index: number) => {};
+
+  useEffect(() => {
+    ws.onmessage = ({ data }) => {
+      const message: unknown = JSON.parse(data);
+      if (isMessage(message) && isArrayOf(message.args, isRoom)) {
+        const map: RoomDisplay[] = [],
+          char: RoomState[] = [],
+          ids: Record<number, number> = {};
+
+        for (const {
+          x,
+          y,
+          height: h,
+          width: w,
+          title,
+          free,
+          id,
+        } of message.args) {
+          map.push({ coordinates: { x, y }, size: { w, h }, title: title });
+          char.push({ free });
+          ids[id] = map.length - 1;
+        }
+
+        setState({ map, char, ids });
+      }
+    };
+  }, []);
 
   return (
     <Context.Provider value={{ state, toggleFree }}>
diff --git a/apps/front/src/types/context.ts b/apps/front/src/types/context.ts
index 6902337..8064308 100644
--- a/apps/front/src/types/context.ts
+++ b/apps/front/src/types/context.ts
@@ -3,6 +3,7 @@ import { RoomDisplay, RoomState } from "./room";
 export interface ContextData {
   map: RoomDisplay[];
   char: RoomState[];
+  ids: Record<number, number>;
 }
 
 export type ContextValue = {
diff --git a/apps/front/tsconfig.json b/apps/front/tsconfig.json
index bd30185..c7517b2 100644
--- a/apps/front/tsconfig.json
+++ b/apps/front/tsconfig.json
@@ -4,5 +4,7 @@
     "target": "es6",
     "module": "ESNext",
     "jsx": "react-jsx"
-  }
+  },
+  "include": ["src"],
+  "references": [{ "path": "../../packages/messages/tsconfig.json" }]
 }
diff --git a/apps/front/vite.config.js b/apps/front/vite.config.js
index d65b232..bf5811b 100644
--- a/apps/front/vite.config.js
+++ b/apps/front/vite.config.js
@@ -4,4 +4,6 @@ export default defineConfig({
   esbuild: {
     jsxInject: `import React from "react"`,
   },
+  optimizeDeps: { include: ["@roomruler/messages"] },
+  
 });