diff --git a/components/Loading/skeletonLoader.tsx b/components/Loading/skeletonLoader.tsx
new file mode 100644
index 0000000..ba49209
--- /dev/null
+++ b/components/Loading/skeletonLoader.tsx
@@ -0,0 +1,11 @@
+export default function SkeletonLoader() {
+  return (
+    <div className="w-full h-24 flex animate-pulse flex-row items-center justify-center space-x-5">
+      <div className="w-12 bg-gray-300 h-12 rounded-full "></div>
+      <div className="flex flex-col space-y-3">
+        <div className="w-60 bg-gray-300 h-6 rounded-md "></div>
+        <div className="w-40 bg-gray-300 h-6 rounded-md "></div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/RoomCard.tsx b/components/RoomCard.tsx
index 5bab219..1778da5 100644
--- a/components/RoomCard.tsx
+++ b/components/RoomCard.tsx
@@ -9,13 +9,21 @@ import { Avatar, Divider, Tooltip } from "antd";
 import { UserOutlined, AntDesignOutlined } from "@ant-design/icons";
 import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
 import { User } from "../models/user";
+import RoomService from "../services/roomService";
+import toast from "react-hot-toast";
+import { useState } from "react";
+import SkeletonLoader from "./Loading/skeletonLoader";
 
 interface IRoomCardProps {
   room: Room;
 }
+
+const roomService = new RoomService();
+
 export default function RoomCard(props: IRoomCardProps) {
   const { currUser } = useAuth();
   const { teamUsersMap, user } = useTeamDashboardContext();
+  const [loading, setLoading] = useState<boolean>(false);
 
   var isUserInRoom: boolean;
   if (props.room.membersInRoom?.includes(currUser.uid)) {
@@ -117,6 +125,51 @@ export default function RoomCard(props: IRoomCardProps) {
     );
   };
 
+  async function handleLeavingRoom() {
+    setLoading(true);
+
+    try {
+      // filter current membersInRoom and return new array
+      const newMembersInRoom = props.room.membersInRoom.filter(
+        (memberId) => memberId != currUser.uid
+      );
+
+      // update the room with room id to have a new array of userIds
+      await roomService.updateMembersInRoom(props.room.id, newMembersInRoom);
+    } catch (error) {
+      console.error(error);
+
+      toast.error("unable to leave room...something went wrong");
+    }
+
+    setLoading(false);
+  }
+
+  async function handleJoiningRoom() {
+    setLoading(true);
+
+    try {
+      // update members in room
+      const newMembersInRoom = [...props.room.membersInRoom, currUser.uid];
+
+      // update the room with room id to have a new array of userIds
+      await roomService.updateMembersInRoom(props.room.id, newMembersInRoom);
+
+      // then window.open to room's link
+      window.open(props.room.link, "_blank");
+    } catch (error) {
+      console.error(error);
+
+      toast.error("unable to leave room...something went wrong");
+    }
+
+    setLoading(false);
+  }
+
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
   return (
     <span
       className={`flex flex-col ${
@@ -136,8 +189,8 @@ export default function RoomCard(props: IRoomCardProps) {
           </span>
           <span
             className={`${
-              isUserInRoom ? " text-gray-400" : "text-gray-200"
-            }   text-xs  overflow-wrap  mb-4`}
+              isUserInRoom ? "text-gray-400" : "text-gray-200"
+            } text-xs overflow-wrap  mb-4`}
           >
             {props.room.description}
           </span>
@@ -154,8 +207,15 @@ export default function RoomCard(props: IRoomCardProps) {
         </span>
 
         {/* room status and link(s) */}
-        <span className="flex flex-col items-end space-y-1 justify-between h-full">
+        <span className="flex flex-col items-end justify-between h-full">
           <RoomTypeTag roomType={props.room.type} />
+          <span
+            className={`${
+              isUserInRoom ? "text-gray-400" : "text-gray-200"
+            } text-xs text-right mb-auto`}
+          >
+            on and off all day
+          </span>
 
           {/* room attachments */}
           <span className="flex flex-row space-x-2">
@@ -178,9 +238,21 @@ export default function RoomCard(props: IRoomCardProps) {
       {/* footer */}
       <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
         {membersInRoom()}
-        <button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
-          👋 Leave
-        </button>
+        {isUserInRoom ? (
+          <button
+            onClick={handleLeavingRoom}
+            className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded"
+          >
+            👋 Leave
+          </button>
+        ) : (
+          <button
+            onClick={handleJoiningRoom}
+            className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500"
+          >
+            Join
+          </button>
+        )}
         <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
       </span>
     </span>
diff --git a/models/room.ts b/models/room.ts
index 130046d..035e043 100644
--- a/models/room.ts
+++ b/models/room.ts
@@ -22,6 +22,8 @@ export default class Room {
   createdByUserId: string;
 
   teamId: string;
+
+  lastUpdatedDate: Timestamp;
 }
 
 export enum RoomType {
diff --git a/services/roomService.tsx b/services/roomService.tsx
index 658a791..f07e07a 100644
--- a/services/roomService.tsx
+++ b/services/roomService.tsx
@@ -5,6 +5,7 @@ import {
   Firestore,
   getFirestore,
   serverTimestamp,
+  setDoc,
 } from "firebase/firestore";
 import Room from "../models/room";
 import { Collections } from "./collections";
@@ -18,4 +19,13 @@ export default class RoomService {
       createdDate: serverTimestamp(),
     });
   }
+
+  async updateMembersInRoom(roomId: string, newMembersInRoom: string[]) {
+    const docRef = doc(this.db, Collections.rooms, roomId);
+    await setDoc(
+      docRef,
+      { membersInRoom: newMembersInRoom, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
 }