diff --git a/client/app.css b/client/app.css
index 63eab6b..016c256 100644
--- a/client/app.css
+++ b/client/app.css
@@ -4,8 +4,9 @@
 
 @tailwind utilities;
 
+/* Legend CSS from https://codesandbox.io/s/how-to-add-a-legend-to-the-map-using-react-leaflet-6yqs5 */
 .leaflet-container {
-  height: 100%; 
+  height: 90vh; 
   width: 100%;
 }
 
@@ -36,3 +37,83 @@
   margin-right: 8px;
   opacity: 0.7;
 }
+
+/* CSS from https://github.com/USUFSLC/sochat ( I made it :) ) */
+body {
+  font-family: Consolas, monaco, monospace;
+  color: #fbf1c7;
+  margin: 0;
+  background-color: #3c3836;
+}
+
+.container {
+  max-width: 900px;
+  width: 80%;
+
+  border: 1px solid #b16286;
+  border-radius: 8px;
+  margin: 0;
+  padding: 24px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  background-color: #282828;
+
+  box-shadow: rgb( 0, 0, 0, 0.6) 6px 45px 45px -12px;
+}
+
+.chat {
+  border-bottom: 1px solid #d65d0e;
+  height: 200px;
+  overflow-y: scroll;
+  padding-bottom: 12px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d5c4a1 rgba(0,0,0,0);
+}
+
+*::-webkit-scrollbar {
+  width: 4px;
+}
+
+*::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #d5c4a1;
+  border-radius: 12px;
+}
+
+.input {
+  font-size: 16px;
+  font-size: max(16px, 1em);
+  font-family: inherit;
+  padding: 0.25em 0.5em;
+  background-color: rgba(0,0,0,0);
+  border: none;
+  border-bottom: 1px solid #83a598;
+  color: #d5c4a1;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.button {
+  padding: 12px;
+  cursor: pointer;
+  border: 1px solid #8ec07c;
+  color: #8ec07c;
+  border-radius: 8px;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/client/components/chatroom/_chat_room.jsx b/client/components/chatroom/_chat_room.jsx
new file mode 100644
index 0000000..e70715c
--- /dev/null
+++ b/client/components/chatroom/_chat_room.jsx
@@ -0,0 +1,86 @@
+import { useEffect, useState, useContext } from 'react';
+import { ApiContext } from '../../utils/api_context';
+import { useMessages } from '../../utils/use_messages';
+import { Link, useParams } from 'react-router-dom';
+import { generateGruvboxFromString } from '../../utils/generate_gruvbox';
+
+/*
+  A lot of this is stolen from my Docker presentation :).
+  https://github.com/USUFSLC/sochat
+*/
+export const ChatRoom = () => {
+  const { id } = useParams();
+  const [chatRoom, setChatRoom] = useState('');
+  const [messages, sendMessage] = useMessages(chatRoom);
+  const [message, setMessage] = useState('');
+  const [color, setColor] = useState(generateGruvboxFromString('placeholder'));
+  const [user, setUser] = useState({});
+  const api = useContext(ApiContext);
+
+  const fetchUser = async () => {
+    const res = await api.get('/users/me');
+    if (res.user) {
+      setUser(res.user);
+      setColor(generateGruvboxFromString(`${res.user.firstName} ${res.user.lastName}`));
+    }
+  };
+
+  const fetchChatRoom = async (id) => {
+    const room = await api.get(`/chat_rooms/${id}`);
+    if (room) {
+      setChatRoom(room);
+    }
+  };
+
+  const scrollToBottomOfChat = () => {
+    const objDiv = document.getElementById('chat');
+    objDiv.scrollTop = objDiv.scrollHeight;
+  };
+
+  const sendThisMessage = () => {
+    sendMessage(message);
+    setMessage('');
+  };
+
+  useEffect(() => {
+    fetchUser();
+    fetchChatRoom(id);
+  }, [id]);
+
+  useEffect(() => {
+    scrollToBottomOfChat();
+  }, [messages]);
+
+  return (
+    <div className="container" style={{ border: `1px solid ${color}` }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2>{chatRoom?.name || `Chat Room ${chatRoom?.id}`}</h2>
+      </div>
+      <div id="chat" className="chat">
+        <p>Welcome!</p>
+        {messages.map((message) => (
+          <div key={message.id} style={{ lineBreak: 'normal' }}>
+            <span style={{ color: generateGruvboxFromString(message.userName) }}>{message.userName}: </span>
+            <span>{message.content}</span>
+          </div>
+        ))}
+      </div>
+      <div>
+        <textarea
+          placeholder={'Message'}
+          className="input"
+          onChange={(e) => setMessage(e.target.value)}
+          value={message}
+          rows={1}
+          cols={30}
+        ></textarea>
+        <div className="button" onClick={sendThisMessage}>
+          Send
+        </div>
+        <div className="button">
+          <Link to="/">Back to map</Link>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/client/components/common/input.jsx b/client/components/common/input.jsx
index aa38216..2c237e8 100644
--- a/client/components/common/input.jsx
+++ b/client/components/common/input.jsx
@@ -1,3 +1,3 @@
 export const Input = (props) => {
-  return <input className="border-2 rounded-lg p-1" {...props} />;
+  return <input className="border-2 rounded-lg p-1 input" {...props} />;
 };
diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 7ef051c..213d43e 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -5,13 +5,11 @@ import { AuthContext } from '../../utils/auth_context';
 import { RolesContext } from '../../utils/roles_context';
 import { Button } from '../common/button';
 import { Map } from '../map/_map';
-import { Ping } from './ping';
 
 export const Home = () => {
   const [, setAuthToken] = useContext(AuthContext);
   const api = useContext(ApiContext);
   const roles = useContext(RolesContext);
-
   const navigate = useNavigate();
 
   const [loading, setLoading] = useState(true);
@@ -29,6 +27,13 @@ export const Home = () => {
     }
   };
 
+  const joinRoom = async (id, userPosition) => {
+    const res = await api.get(`/chat_rooms/${id}/joinable?lat=${userPosition.lat}&lng=${userPosition.lng}`);
+    if (res) {
+      navigate(`/rooms/${id}`);
+    }
+  };
+
   if (loading) {
     return <div>Loading...</div>;
   }
@@ -46,7 +51,7 @@ export const Home = () => {
           </Button>
         )}
       </div>
-      <Map user={user} />
+      <Map user={user} joinRoom={joinRoom} />
     </>
   );
 };
diff --git a/client/components/home/ping.jsx b/client/components/home/ping.jsx
deleted file mode 100644
index 6166921..0000000
--- a/client/components/home/ping.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useState, useEffect, useRef, useContext } from 'react';
-import { Button } from '../common/button';
-import { io } from 'socket.io-client';
-import { AuthContext } from '../../utils/auth_context';
-
-export const Ping = () => {
-  const [pings, setPings] = useState([]);
-  const [key, setKey] = useState('defaultkey');
-  const [currentRoom, setCurrentRoom] = useState(null);
-  const [authToken] = useContext(AuthContext);
-  const [socket, setSocket] = useState(null);
-
-  useEffect(() => {
-    // instantiates a socket object and initiates the connection...
-    // you probably want to make sure you are only doing this in one component at a time.
-    const socket = io({
-      auth: { token: authToken },
-      query: { message: 'I am the query ' },
-    });
-
-    // adds an event listener to the connection event
-    socket.on('connect', () => {
-      setSocket(socket);
-    });
-
-    // adds event listener to the disconnection event
-    socket.on('disconnect', () => {
-      console.log('Disconnected');
-    });
-
-    // recieved a pong event from the server
-    socket.on('pong', (data) => {
-      console.log('Recieved pong', data);
-    });
-
-    // IMPORTANT! Unregister from all events when the component unmounts and disconnect.
-    return () => {
-      socket.off('connect');
-      socket.off('disconnect');
-      socket.off('pong');
-      socket.disconnect();
-    };
-  }, []);
-
-  useEffect(() => {
-    // if our token changes we need to tell the socket also
-    if (socket) {
-      // this is a little weird because we are modifying this object in memory
-      // i dunno a better way to do this though...
-      socket.auth.token = authToken;
-    }
-  }, [authToken]);
-
-  if (!socket) return 'Loading...';
-
-  const sendPing = () => {
-    // sends a ping to the server to be broadcast to everybody in the room
-    currentRoom && socket.emit('ping', { currentRoom });
-  };
-
-  const joinRoom = () => {
-    // tells the server to remove the current client from the current room and add them to the new room
-    socket.emit('join-room', { currentRoom, newRoom: key }, (response) => {
-      console.log(response);
-      setCurrentRoom(response.room);
-    });
-  };
-
-  return (
-    <>
-      <header>Ping: {currentRoom || '(No room joined)'}</header>
-      <section>
-        <input
-          type="text"
-          className="border-2 border-gray-700 p-2 rounded"
-          value={key}
-          onChange={(e) => setKey(e.target.value)}
-        />
-        <Button onClick={joinRoom}>Connect To Room</Button>
-        <Button onClick={sendPing}>Send Ping</Button>
-      </section>
-    </>
-  );
-};
diff --git a/client/components/map/_map.jsx b/client/components/map/_map.jsx
index 9f6684c..6134d44 100644
--- a/client/components/map/_map.jsx
+++ b/client/components/map/_map.jsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { Legend } from './legend';
 
-export const Map = ({ user, zoom }) => {
+export const Map = ({ user, zoom, joinRoom }) => {
   const [loading, setLoading] = useState(true);
   const [position, setPosition] = useState({});
   const [positionWatcher, setPositionWatcher] = useState();
@@ -39,7 +39,7 @@ export const Map = ({ user, zoom }) => {
           maxZoom={19}
         />
         <Legend />
-        <Geoman joinRoom={console.log} userPos={position} user={user} />
+        <Geoman joinRoom={joinRoom} userPos={position} user={user} />
       </MapContainer>
     );
   }
diff --git a/client/components/map/chat_room_geoman.jsx b/client/components/map/chat_room_geoman.jsx
index f59fec8..9f7ab6a 100644
--- a/client/components/map/chat_room_geoman.jsx
+++ b/client/components/map/chat_room_geoman.jsx
@@ -1,16 +1,15 @@
 import { useLeafletContext } from '@react-leaflet/core';
 import L from 'leaflet';
 import markerIconPng from 'leaflet/dist/images/marker-icon.png';
-import { useEffect, useContext } from 'react';
+import { useEffect, useContext, useState } from 'react';
 import { ApiContext } from '../../utils/api_context';
 
 const userPositionBubble = {
   color: 'black',
   fillColor: 'black',
-  fillOpacity: 0.6,
-  weight: 5,
+  fillOpacity: 0.4,
+  weight: 1,
   pmIgnore: true,
-  radius: 5,
 };
 
 const joinable = {
@@ -31,7 +30,7 @@ const editable = {
   pmIgnore: false,
 };
 
-const icon = new L.Icon({ iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41] });
+const icon = new L.Icon({ iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [0, -30] });
 
 const haversine = (p1, p2) => {
   const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
@@ -51,6 +50,7 @@ const haversine = (p1, p2) => {
 export const Geoman = ({ user, userPos, joinRoom }) => {
   const context = useLeafletContext();
   const api = useContext(ApiContext);
+  let dontRedirect = true;
   const circleAndMarkerFromChatroom = (chatRoom) => {
     const circle = new L.Circle(chatRoom.center, chatRoom.radius);
     const marker = new L.Marker(chatRoom.center, { pmIgnore: !chatRoom.isEditable, icon });
@@ -62,10 +62,15 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
         : unjoinable,
     );
     marker.addEventListener('click', () => {
-      console.log(chatRoom.id);
-      console.log(haversine(userPos, { lat: chatRoom.latitude, lng: chatRoom.longitude }), chatRoom.radius, userPos);
+      setTimeout(() => {
+        if (dontRedirect) {
+          joinRoom(chatRoom.id, userPos);
+          return;
+        }
+        dontRedirect = false;
+      }, 500);
     });
-    if (!!chatRoom.isEditable) {
+    if (chatRoom.isEditable) {
       [circle, marker].map((x) => {
         x.on('pm:edit', (e) => {
           const coords = e.target.getLatLng();
@@ -78,6 +83,7 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
           });
         });
         x.on('pm:remove', (e) => {
+          dontRedirect = true;
           context.map.removeLayer(marker);
           context.map.removeLayer(circle);
 
@@ -87,9 +93,17 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
       circle.on('pm:drag', (e) => {
         marker.setLatLng(e.target.getLatLng());
       });
+      marker.bindPopup(chatRoom.name || `Chat Room ${chatRoom.id}`);
+      marker.on('mouseover', (e) => {
+        console.log(chatRoom);
+        e.target.openPopup();
+      });
       marker.on('pm:drag', (e) => {
         circle.setLatLng(e.target.getLatLng());
       });
+      marker.on('pm:dragstart', (e) => {
+        dontRedirect = true;
+      });
     }
     [circle, marker].map((x) => x.addTo(context.map));
     return [circle, marker];
@@ -149,19 +163,16 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
 
         const { lat: latitude, lng: longitude } = shape.layer.getLatLng();
         const chatRoom = await api.post('/chat_rooms', {
+          name: prompt("What's the name of the chat room?"),
           latitude,
           longitude,
           radius: shape.layer.getRadius(),
         });
+        console.log(chatRoom);
         reRender();
       }
     });
 
-    leafletContainer.on('pm:remove', (e) => {
-      console.log('object removed');
-      // console.log(leafletContainer.pm.getGeomanLayers(true).toGeoJSON());
-    });
-
     return () => {
       leafletContainer.pm.removeControls();
       leafletContainer.pm.setGlobalOptions({ pmIgnore: true });
diff --git a/client/components/map/legend.jsx b/client/components/map/legend.jsx
index ebd199d..14f6536 100644
--- a/client/components/map/legend.jsx
+++ b/client/components/map/legend.jsx
@@ -2,6 +2,7 @@ import L from 'leaflet';
 import { useEffect } from 'react';
 import { useLeafletContext } from '@react-leaflet/core';
 
+/* Legend adapted from https://codesandbox.io/s/how-to-add-a-legend-to-the-map-using-react-leaflet-6yqs5 */
 export const Legend = () => {
   const context = useLeafletContext();
   useEffect(() => {
@@ -14,7 +15,7 @@ export const Legend = () => {
       labels.push('<i style="background:black"></i><span>Current position</span>');
       labels.push('<i style="background:red"></i><span>Unjoinable</span>');
       labels.push('<i style="background:green"></i><span>Joinable</span>');
-      labels.push('<i style="background:blue"></i><span>Editable</span>');
+      labels.push('<i style="background:blue"></i><span>Editable & Joinable</span>');
 
       div.innerHTML = labels.join('<br>');
       return div;
diff --git a/client/components/router.jsx b/client/components/router.jsx
index 08bb41f..71aabc2 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -5,6 +5,7 @@ import { AuthContext } from '../utils/auth_context';
 import { SignIn } from './sign_in/_sign_in';
 import { SignUp } from './sign_up/_sign_up';
 import { Admin } from './admin/_admin';
+import { ChatRoom } from './chatroom/_chat_room';
 
 export const Router = () => {
   const [authToken] = useContext(AuthContext);
@@ -18,6 +19,7 @@ export const Router = () => {
       <Route path="admin" element={<Admin />} />
       <Route path="signin" element={<SignIn />} />
       <Route path="signup" element={<SignUp />} />
+      <Route path="rooms/:id" element={<ChatRoom />} />
     </Routes>
   );
 };
diff --git a/client/utils/generate_gruvbox.js b/client/utils/generate_gruvbox.js
new file mode 100644
index 0000000..033d893
--- /dev/null
+++ b/client/utils/generate_gruvbox.js
@@ -0,0 +1,19 @@
+// This is also from https://github.com/USUFSLC/sochat
+const gruvboxColors = [
+  '#b8bb26',
+  '#fabd2f',
+  '#83a598',
+  '#d3869b',
+  '#8ec07c',
+  '#458588',
+  '#cc241d',
+  '#d65d0e',
+  '#bdae93',
+];
+
+export const generateGruvboxFromString = (string) =>
+  gruvboxColors[
+    Array.from(string)
+      .map((x) => x.charCodeAt(0))
+      .reduce((a, x) => a + x, 0) % gruvboxColors.length
+  ];
diff --git a/client/utils/use_messages.js b/client/utils/use_messages.js
new file mode 100644
index 0000000..e3a501e
--- /dev/null
+++ b/client/utils/use_messages.js
@@ -0,0 +1,42 @@
+import { useState, useContext, useEffect, useRef } from 'react';
+import { AuthContext } from './auth_context';
+import { io } from 'socket.io-client';
+
+export const useMessages = (chatRoom) => {
+  const [messages, setMessages] = useState([]);
+  const messageRef = useRef([]);
+  const [socket, setSocket] = useState({});
+  const [authToken] = useContext(AuthContext);
+
+  useEffect(() => {
+    if (chatRoom?.id) {
+      const socket = io({
+        query: {
+          chatRoomId: chatRoom.id,
+        },
+        auth: {
+          token: authToken,
+        },
+      });
+      socket.on('connect', () => {
+        setSocket(socket);
+      });
+      socket.on('new-message', (message) => {
+        messageRef.current.push(message);
+        setMessages([...messageRef.current]);
+      });
+      return () => {
+        socket.off('new-message');
+        socket.close();
+      };
+    }
+  }, [chatRoom]);
+
+  const sendMessage = (message) => {
+    if (socket?.emit) {
+      socket.emit('message', message);
+    }
+  };
+
+  return [messages, sendMessage];
+};
diff --git a/server/app.module.ts b/server/app.module.ts
index 5fc4654..60cf865 100644
--- a/server/app.module.ts
+++ b/server/app.module.ts
@@ -5,7 +5,7 @@ import { AppController } from './app.controller';
 import { config } from './database/config';
 import { ChatRoomModule } from './modules/chat_room.module';
 import { UsersModule } from './modules/users.module';
-import { PingGateway } from './providers/gateways/ping.gateway';
+import { ChatRoomGateway } from './providers/gateways/chat_room.gateway';
 import { AuthGuard } from './providers/guards/auth.guard';
 import { RolesGuard } from './providers/guards/roles.guard';
 import { ChatRoomService } from './providers/services/chat_room.service';
@@ -18,7 +18,7 @@ import { GuardUtil } from './providers/util/guard.util';
   imports: [TypeOrmModule.forRoot(config), UsersModule, ChatRoomModule],
   controllers: [AppController],
   providers: [
-    PingGateway,
+    ChatRoomGateway,
     UsersService,
     RolesService,
     JwtService,
diff --git a/server/controllers/chat_room.controller.ts b/server/controllers/chat_room.controller.ts
index bd9ba4a..668a686 100644
--- a/server/controllers/chat_room.controller.ts
+++ b/server/controllers/chat_room.controller.ts
@@ -4,20 +4,43 @@ import { JwtBodyDto } from 'server/dto/jwt_body.dto';
 import { ChatRoomService } from 'server/providers/services/chat_room.service';
 import { UsersService } from 'server/providers/services/users.service';
 
+const haversine = (p1, p2) => {
+  const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
+  const delta = { lat: degreesToRadians(p2.lat - p1.lat), lng: degreesToRadians(p2.lng - p1.lng) };
+  const a =
+    Math.sin(delta.lat / 2) * Math.sin(delta.lat / 2) +
+    Math.cos(degreesToRadians(p1.lat)) *
+      Math.cos(degreesToRadians(p2.lat)) *
+      Math.sin(delta.lng / 2) *
+      Math.sin(delta.lng / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  const r = 6371 * 1000;
+  return r * c;
+};
 @Controller()
 export class ChatRoomController {
   constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) {}
 
   @Get('/chat_rooms')
-  async get(@Query() query: any) {
-    console.log(query);
-    return await this.chatRoomService.near(query);
+  async get(@JwtBody() jwtBody: JwtBodyDto, @Query() query: any) {
+    return await this.chatRoomService.nearOrUserOwns({ ...query, userId: jwtBody.userId });
+  }
+
+  @Get('/chat_rooms/:id')
+  async getId(@Param('id') id: number) {
+    return await this.chatRoomService.findById(id);
+  }
+
+  @Get('/chat_rooms/:id/joinable')
+  async joinable(@JwtBody() jwtBody, @Param('id') id: number, @Query() query: any) {
+    return !!(await this.chatRoomService.nearOrUserOwns({ ...query, userId: jwtBody.userId })).find(
+      (cr) => cr.id == id && haversine({ lat: cr.latitude, lng: cr.longitude }, query) < cr.radius,
+    );
   }
 
   @Post('/chat_rooms')
   async create(@JwtBody() jwtBody: JwtBodyDto, @Body() chatRoom: any) {
     chatRoom.user = await this.usersService.find(jwtBody.userId);
-    console.log(jwtBody);
     return await this.chatRoomService.create(chatRoom);
   }
 
diff --git a/server/database/migrations/1648605030863-AddChatRoom.ts b/server/database/migrations/1648605030863-AddChatRoom.ts
index e4b5ca9..4a6c156 100644
--- a/server/database/migrations/1648605030863-AddChatRoom.ts
+++ b/server/database/migrations/1648605030863-AddChatRoom.ts
@@ -32,6 +32,11 @@ export class AddChatRoom1648605030863 implements MigrationInterface {
             type: 'float',
             isNullable: false,
           },
+          {
+            name: 'name',
+            type: 'varchar',
+            isNullable: true,
+          },
         ],
       }),
     );
diff --git a/server/entities/chat_room.entity.ts b/server/entities/chat_room.entity.ts
index 6f46c97..29619be 100644
--- a/server/entities/chat_room.entity.ts
+++ b/server/entities/chat_room.entity.ts
@@ -15,6 +15,9 @@ export class ChatRoom {
   @Column()
   radius: number;
 
+  @Column()
+  name: string;
+
   @ManyToOne(() => User, (user) => user.chatRooms)
   user: User;
 }
diff --git a/server/providers/gateways/ping.gateway.ts b/server/providers/gateways/chat_room.gateway.ts
similarity index 54%
rename from server/providers/gateways/ping.gateway.ts
rename to server/providers/gateways/chat_room.gateway.ts
index 27fe785..b565d40 100644
--- a/server/providers/gateways/ping.gateway.ts
+++ b/server/providers/gateways/chat_room.gateway.ts
@@ -1,27 +1,29 @@
 import { UseGuards } from '@nestjs/common';
-import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WebSocketServer, WsException } from '@nestjs/websockets';
+import {
+  ConnectedSocket,
+  MessageBody,
+  OnGatewayConnection,
+  OnGatewayDisconnect,
+  OnGatewayInit,
+  SubscribeMessage,
+  WebSocketGateway,
+  WebSocketServer,
+  WsException,
+} from '@nestjs/websockets';
 import { GatewayJwtBody } from 'server/decorators/gateway_jwt_body.decorator';
 import { JwtBodyDto } from 'server/dto/jwt_body.dto';
 import { Server, Socket } from 'socket.io';
 import { GatewayAuthGuard } from '../guards/gatewayauth.guard';
 import { JwtService } from '../services/jwt.service';
-
-class JoinPayload {
-  currentRoom?: string;
-  newRoom: string;
-}
-
-class PingPayload {
-  currentRoom: string;
-}
+import { UsersService } from '../services/users.service';
 
 @WebSocketGateway()
 @UseGuards(GatewayAuthGuard)
-export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
+export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
   @WebSocketServer()
   server: Server;
 
-  constructor(private jwtService: JwtService) {}
+  constructor(private jwtService: JwtService, private userService: UsersService) {}
 
   afterInit(server: Server) {
     console.log('Sockets initialized');
@@ -36,8 +38,9 @@ export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     try {
       const jwt = client.handshake.auth.token;
       const jwtBody = this.jwtService.parseToken(jwt);
-      console.log(client.handshake.query);
+      const chatRoomId = client.handshake.query.chatRoomId;
       console.log('Client Connected: ', jwtBody.userId);
+      client.join(chatRoomId);
     } catch (e) {
       throw new WsException('Invalid token');
     }
@@ -47,21 +50,18 @@ export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     console.log('Client Disconnected');
   }
 
-  @SubscribeMessage('ping')
-  public handlePing(
+  @SubscribeMessage('message')
+  public async handleMessage(
     @ConnectedSocket() client: Socket,
-    @MessageBody() payload: PingPayload,
+    @MessageBody() data: string,
     @GatewayJwtBody() jwtBody: JwtBodyDto,
   ) {
-    this.server.to(payload.currentRoom).emit('pong', { message: { userId: jwtBody.userId } });
-    console.log(client.rooms);
-  }
-
-  @SubscribeMessage('join-room')
-  public async joinRoom(client: Socket, payload: JoinPayload) {
-    console.log(payload);
-    payload.currentRoom && (await client.leave(payload.currentRoom));
-    await client.join(payload.newRoom);
-    return { msg: 'Joined room', room: payload.newRoom };
+    const user = await this.userService.find(jwtBody.userId);
+    this.server.to(client.handshake.query.chatRoomId).emit('new-message', {
+      id: user.id * Math.random() * 2048 * Date.now(),
+      content: data,
+      userName: `${user.firstName} ${user.lastName}`,
+      userId: user.id,
+    });
   }
 }
diff --git a/server/providers/services/chat_room.service.ts b/server/providers/services/chat_room.service.ts
index a6af023..ed75ba4 100644
--- a/server/providers/services/chat_room.service.ts
+++ b/server/providers/services/chat_room.service.ts
@@ -18,9 +18,10 @@ export class ChatRoomService {
     return this.chatRoomRepository.find();
   }
 
-  near({ lat, lng }: { lat: number; lng: number }) {
+  nearOrUserOwns({ lat, lng, userId }: { lat: number; lng: number; userId: number }) {
+    // SQL injection maybe?
     return this.chatRoomRepository.query(
-      `SELECT * FROM chat_room WHERE calculate_distance(latitude, longitude, ${lat}, ${lng}, 'M') < 5`,
+      `SELECT * FROM chat_room WHERE calculate_distance(latitude, longitude, ${lat}, ${lng}, 'M') < 5 OR "userId" = ${userId}`,
     );
   }