diff --git a/components/RoomCard.tsx b/components/RoomCard.tsx
index 2ba056c..1810072 100644
--- a/components/RoomCard.tsx
+++ b/components/RoomCard.tsx
@@ -1,11 +1,11 @@
 import { BsThreeDots } from "react-icons/bs";
 import { FaBell, FaClock, FaLink } from "react-icons/fa";
 import { IoTimer } from "react-icons/io5";
-import Room from "../models/room";
+import Room, { RoomStatus } from "../models/room";
 import RoomTypeTag from "./RoomTypeTag";
 import Image from "next/image";
 import { useAuth } from "../contexts/authContext";
-import { Avatar, Divider, Tooltip } from "antd";
+import { Avatar, Divider, Dropdown, Menu, Tooltip } from "antd";
 import { UserOutlined, AntDesignOutlined } from "@ant-design/icons";
 import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
 import { User } from "../models/user";
@@ -166,10 +166,45 @@ export default function RoomCard(props: IRoomCardProps) {
     setLoading(false);
   }
 
+  async function handleArchivingRoom() {
+    if (
+      confirm(
+        "Are you sure you want to archive room? It will be added to the archived tab."
+      )
+    ) {
+      console.log("archiving room");
+
+      try {
+        const newRoom: Room = { ...props.room };
+
+        newRoom.status = RoomStatus.archived;
+        newRoom.membersInRoom = [];
+        await roomService.updateRoom(newRoom);
+      } catch (error) {}
+    }
+  }
+
   if (loading) {
     return <SkeletonLoader />;
   }
 
+  const RoomOptionsMenu = (
+    <Menu>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.antgroup.com"
+        >
+          1st menu item
+        </a>
+      </Menu.Item>
+      <Menu.Item danger onClick={handleArchivingRoom}>
+        Archive Room
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <span
       className={`flex flex-col ${
@@ -256,7 +291,10 @@ export default function RoomCard(props: IRoomCardProps) {
             Join
           </button>
         )}
-        <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
+
+        <Dropdown overlay={RoomOptionsMenu} trigger={["click"]}>
+          <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+        </Dropdown>
       </span>
     </span>
   );
diff --git a/pages/teams/dashboard.tsx b/pages/teams/dashboard.tsx
index d909960..b6176d4 100644
--- a/pages/teams/dashboard.tsx
+++ b/pages/teams/dashboard.tsx
@@ -1,847 +1,1062 @@
-import Image from 'next/image';
-import React, { useState } from 'react';
-import { FaMicrophoneAlt, 
-    FaHeadphonesAlt, 
-    FaTh, 
-    FaAngleDown, 
-    FaPlusSquare, 
-    FaBroom, 
-    FaBell, 
-    FaFilePdf,
-    FaCopy, 
-    FaClock,
-    FaPlay,
-    FaPlus,
-    FaCheck,
-    FaCode,
-    FaLink,
-    FaExternalLinkAlt,
-    FaArchive,
-    FaAtlassian,
-    FaSearch
-
+import Image from "next/image";
+import React, { useState } from "react";
+import {
+  FaMicrophoneAlt,
+  FaHeadphonesAlt,
+  FaTh,
+  FaAngleDown,
+  FaPlusSquare,
+  FaBroom,
+  FaBell,
+  FaFilePdf,
+  FaCopy,
+  FaClock,
+  FaPlay,
+  FaPlus,
+  FaCheck,
+  FaCode,
+  FaLink,
+  FaExternalLinkAlt,
+  FaArchive,
+  FaAtlassian,
+  FaSearch,
 } from "react-icons/fa";
 import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5";
 import { BsThreeDots } from "react-icons/bs";
 
-import { UserStatus, User } from '../../models/user'
-import { KeyCode } from '../../globals/keycode'
+import { UserStatus, User } from "../../models/user";
+import { KeyCode } from "../../globals/keycode";
 
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
-import { useAuth } from '../../contexts/authContext'
+import { useAuth } from "../../contexts/authContext";
 
-let testFriends = [ 
+let testFriends = [
   {
-      name: "Liam",
-      role: "engineer",
-      systemAvatar: "29",
-      status: UserStatus.online
+    name: "Liam",
+    role: "engineer",
+    systemAvatar: "29",
+    status: UserStatus.online,
   },
   {
-      name: "Emily",
-      role: "engineer",
-      systemAvatar: "02",
-      status: UserStatus.online
+    name: "Emily",
+    role: "engineer",
+    systemAvatar: "02",
+    status: UserStatus.online,
   },
   {
-      name: "Paul",
-      role: "architect",
-      systemAvatar: "43",
-      status: UserStatus.online
+    name: "Paul",
+    role: "architect",
+    systemAvatar: "43",
+    status: UserStatus.online,
   },
   {
-      name: "Mark",
-      role: "engineer",
-      systemAvatar: "04",
-      status: UserStatus.busy
+    name: "Mark",
+    role: "engineer",
+    systemAvatar: "04",
+    status: UserStatus.busy,
   },
   {
-      name: "Adriana",
-      role: "design",
-      systemAvatar: "06",
-      status: UserStatus.busy
+    name: "Adriana",
+    role: "design",
+    systemAvatar: "06",
+    status: UserStatus.busy,
   },
   {
-      name: "Josh",
-      role: "design",
-      systemAvatar: "05",
-      status: UserStatus.offline
-  }
-]
+    name: "Josh",
+    role: "design",
+    systemAvatar: "05",
+    status: UserStatus.offline,
+  },
+];
 
 export default function Dashboard() {
-  const { currUser, logOut } = useAuth()
-  const router = useRouter()
+  const { currUser, logOut } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     // if not authenticated, take user to the login
     if (!currUser) {
-      console.log('not authenticated...routing from dashboard to teams home')
-      router.push('/teams/login')
+      console.log("not authenticated...routing from dashboard to teams home");
+      router.push("/teams/login");
     }
-  }, [currUser])
+  }, [currUser]);
 
-  const [selectedChannel, setSelectedChannel] = useState(null)
+  const [selectedChannel, setSelectedChannel] = useState(null);
 
-  console.log("in dashboard " + currUser)
+  console.log("in dashboard " + currUser);
 
   async function handleSignOut() {
-    console.log("clicked log out button")
+    console.log("clicked log out button");
 
     try {
-      await logOut()
+      await logOut();
 
-      router.push('/teams')
-    } catch(error) {
-      console.log(error)
+      router.push("/teams");
+    } catch (error) {
+      console.log(error);
     }
   }
 
   function statusBubble(status: UserStatus) {
-    console.log(status)
+    console.log(status);
 
-    switch(status) {
-        case UserStatus.online:
-            return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
-        case UserStatus.busy:
-            return <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
-        case UserStatus.offline:
-            return <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
-        default:
-            return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+    switch (status) {
+      case UserStatus.online:
+        return (
+          <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+        );
+      case UserStatus.busy:
+        return (
+          <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
+        );
+      case UserStatus.offline:
+        return (
+          <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+        );
+      default:
+        return (
+          <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+        );
     }
-}
-
-  function renderPulse(status: UserStatus) {
-      switch(status) {
-          case UserStatus.online:
-              return <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
-          case UserStatus.busy:
-              return <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
-          case UserStatus.offline:
-              return <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
-          default:
-              return <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
-      }
   }
 
-  function handleKeyboardShortcut (event) {    
-      console.log(event.keyCode)
+  function renderPulse(status: UserStatus) {
+    switch (status) {
+      case UserStatus.online:
+        return (
+          <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
+        );
+      case UserStatus.busy:
+        return (
+          <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
+        );
+      case UserStatus.offline:
+        return (
+          <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
+        );
+      default:
+        return (
+          <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
+        );
+    }
+  }
 
-      switch(event.keyCode) {
-          case KeyCode.Escape:
-              setSelectedChannel(null)
-              break
-          case KeyCode.Zero:
-              setSelectedChannel(0)
-              break 
-          case KeyCode.One:
-              setSelectedChannel(1)
-              break 
-          case KeyCode.Two:
-              setSelectedChannel(2)
-              break 
-          case KeyCode.Three:
-              setSelectedChannel(3)
-              break 
-          case KeyCode.Four:
-              setSelectedChannel(4)
-              break
-          case KeyCode.Five:
-              setSelectedChannel(5)
-              break
-          default:
-              return
-      }
+  function handleKeyboardShortcut(event) {
+    console.log(event.keyCode);
+
+    switch (event.keyCode) {
+      case KeyCode.Escape:
+        setSelectedChannel(null);
+        break;
+      case KeyCode.Zero:
+        setSelectedChannel(0);
+        break;
+      case KeyCode.One:
+        setSelectedChannel(1);
+        break;
+      case KeyCode.Two:
+        setSelectedChannel(2);
+        break;
+      case KeyCode.Three:
+        setSelectedChannel(3);
+        break;
+      case KeyCode.Four:
+        setSelectedChannel(4);
+        break;
+      case KeyCode.Five:
+        setSelectedChannel(5);
+        break;
+      default:
+        return;
+    }
   }
 
   return (
     <>
-        <div className="container mx-auto max-w-screen-xl py-10 flex flex-col space-y-5">
-            {/* header content */}
-            <section className="flex-1 flex flex-row items-center justify-between py-5">
-                {/* welcome message */}
-                <span className='flex flex-col items-baseline'>
-                    <span className="font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>                            
-
-                    {/* Date and time */}
-                    <span className='flex flex-row space-x-2'>
-                        <span className='text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2'>Tues, Jan 11th</span>
-                        <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold mt-2'>1:34am</span>
-                    </span>                            
-                </span>
-                
-                {/* header control section */}
-                <span className="flex flex-row items-center space-x-5">
-                  <button onClick={handleSignOut} className='mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded'>👋 Logout</button>
-                    {/* search bar */}
-                    <div className="pt-2 flex flex-row relative items-center">
-                        <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
-                            <FaSearch className='text-white' />
-                        </button>
-
-                        <input className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
-                        type="search" name="search" placeholder="Search" />
-
-                        <button className="absolute right-1 rounded-lg py-1 px-2 ml-1 
-                                    shadow-md text-center text-white text-sm font-bold">
-                            CTRL + K
-                        </button>
-                    </div>
-
-                    <FaBell className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                    <FaHeadphonesAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                    <FaMicrophoneAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                    <FaTh className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                    
-                    {/* avatar */}
-                    <span className='relative flex'>
-                        <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
-                        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
-                        <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg" alt="profile" width={50} height={50} />
-                    </span>
-                </span>
-            </section>
-            
-            <div className='flex flex-row items-baseline space-x-5 space-y-5 flex-wrap'>
-                {/* personal line */}
-                <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                    <span className='flex flex-row justify-start items-center pb-5'>
-                        <span className='flex flex-col'>
-                            <span className="text-white">TEAM</span>
-                        </span>
-
-                        <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
-                            <FaPlus className='text-lg text-white' />
-                        </button>
-                    </span>
-                    
-                    {/* list of team members */}
-                    {
-                        testFriends.map((friend, i) => {
-                            return (
-                                <span key={i} className={"flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 " + (selectedChannel == i ? "bg-white bg-opacity-80 scale-105 shadow-2xl" : " ")}>
-                                    <span className='relative flex mr-2'>
-                                        <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
-                                        
-                                        {statusBubble(friend.status)}
-
-                                        <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (friend.systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
-                                    </span>
-                
-                                    <span className='flex flex-col mr-10'>
-                                        <span className='flex flex-row items-center space-x-2'>
-                                            <span className="text-sm text-white font-bold">{friend.name} </span>
-                                            {
-                                                selectedChannel == i ? 
-                                                <>
-                                                    <button className="rounded-lg bg-gray-400 shadow-lg text-center 
-                                                    text-white text-sm py-1 px-2 font-bold">
-                                                        {i}
-                                                    </button>
-                                                </>
-                                                
-                                                :
-                                                <button className="rounded-lg border py-1 px-2 border-gray-100 shadow-md 
-                                                text-center text-gray-200 text-smf font-bold">
-                                                    {i}
-                                                </button>
-                                            }
-                                        </span>
-
-
-                                        <span className={"text-xs span-sans text-gray-300" + (selectedChannel == i ? "text-black" : " ")}>{friend.role}</span>
-                                    </span>
-
-                                    {renderPulse(friend.status)}
-                                </span>
-                            )
-                        })
-                    }	
-                </section>
-                
-                <div className='flex-1 flex flex-col space-y-5 items-baseline'>
-                    {/* pinned */}
-                    <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                        <span className='flex flex-row justify-start items-center pb-5'>
-                            <span className='flex flex-col mr-20'>
-                                <span className="text-white mr-auto">ANNOUNCEMENTS  
-                                <button className="right-1 rounded-lg py-1 px-2 ml-1 
-                                    shadow-md text-center text-white text-sm font-bold">
-                                    CTRL + A
-                                </button>
-                                </span>
-                                <span className='text-gray-300 text-xs'>updates, pep talks, blockers, reminders</span>
-                            </span>
-                            
-                            {/* tab pane */}
-                            <span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
-                                <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Active</span>
-
-                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Resolved</span>
-                            </span>
-
-                            <span className='text-sm text-gray-300 flex flex-row items-center'>
-                                TODAY <FaAngleDown />
-                            </span>
-
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaMicrophoneAlt className='text-lg text-white' />
-                            </button>
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaPlay className='text-lg text-white' />
-                            </button>
-                        </span>
-        
-                        <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
-                            {/* adriana's announcement */}
-                            <span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
-                                <span className='relative mr-2 grid items-center justify-items-center'>
-                                    <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
-                                    
-                                    {statusBubble(UserStatus.busy)}
-
-                                    <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={50} height={50} />
-                                </span>
-
-                                <span className='flex flex-col items-baseline'>
-                                    <span className='text-md font-bold text-white'>Adriana</span>
-                                    <span className='text-xs text-gray-200'>5 minutes ago</span>
-                                    <span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
-                                        <span>blockers</span>
-                                    </span>
-                                </span>
-                            </span>
-
-                            {/* arjun's announcement */}
-                            <span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
-                                <span className='relative mr-2 grid items-center justify-items-center'>
-                                    <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
-                                    
-                                    {statusBubble(UserStatus.busy)}
-
-                                    <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={50} height={50} />
-                                </span>
-
-                                <span className='flex flex-col items-baseline mr-5'>
-                                    <span className='text-md font-bold text-white'>Arjun</span>
-                                    <span className='text-xs text-gray-200'>30 minutes ago</span>
-                                    <span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
-                                        <span>engineering</span>
-                                    </span>
-                                </span>
-
-                                <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                    <FaCheck className='text-lg text-white' />
-                                </button>
-                            </span>
-                        </div>
-                    </section>
-
-                    {/* rooms */}
-                    <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                        <span className='flex flex-row justify-end space-x-3 pb-5 items-center'>
-                            <span className="text-white mr-auto">ROOMS  
-                                <button className="right-1 rounded-lg py-1 px-2 ml-1 
-                                    shadow-md text-center text-white text-sm font-bold">
-                                    CTRL + R
-                                </button>
-                            </span>
-                            
-                            {/* tab pane */}
-                            <span className='flex flex-row space-x-5 uppercase mr-5'>
-                                <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>All</span>
-
-                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Live</span>
-
-                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Scheduled</span>
-
-                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Recurring</span>
-                            </span>
-
-                            <span className='text-sm text-gray-300 flex flex-row items-center uppercase'>
-                                Week <FaAngleDown />
-                            </span>
-
-                            <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
-                                <FaPlus className='text-lg text-white' />
-                            </button>
-
-                            <BsThreeDots className='text-xl text-white' />
-                        </span>
-        
-                        {/* all rooms */}
-                        <span className='flex flex-row flex-wrap'>
-                            {/* spontaneous bugs room */}
-                            <span className='flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-1 flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-10'>
-                                        <span className='text-gray-500 font-semibold mr-auto'>bug fixing</span>
-                                        <span className='text-xs text-gray-400 overflow-wrap'>were just fixing that jsx bug thats a paiiinnnn</span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap'>                                                    
-                                            <span className='text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center'>                                                       
-                                                <span>blockers</span>
-                                            </span>
-
-                                            <span className='text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center'>                                                       
-                                                <span>engineering</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-end space-y-1 justify-between h-full'>
-                                        <span className='text-xs bg-red-500
-                                        text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
-                                            <FaClock /> 
-                                            <span>live</span>
-                                        </span>                    
-
-                                        {/* room attachments */}
-                                        <span className='flex flex-row space-x-2'>
-                                            <button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
-                                                <FaLink className='text-sm text-gray-400' />
-                                            </button>
-
-                                            <button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
-                                                <FaLink className='text-sm text-gray-400' />
-                                            </button>
-                                        </span>
-                                    </span>
-                                        
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-                                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
-                                        <span className='relative flex'>
-                                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                            <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"} alt="profile" width={30} height={30} />
-                                        </span>
-                                        <span className='-mr-4 relative flex'>
-                                        <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                            <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={30} height={30} />
-                                        </span>
-                                    </span>
-
-                                    <span className='text-xs text-gray-400'>Arjun and Liam</span>                                            
-
-                                    <button className='ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded'>👋 Leave</button>
-
-                                    <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
-                                </span>
-
-                            {/* live room - design meeting */}
-                            <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-20'>
-                                        <span className='text-white font-semibold mr-auto'>Shopping Cart Experience</span>
-                                        <span className='text-xs text-gray-200 overflow-wrap'>lets finish the mockups @josh, @mark, and @arjun please step in for feedback</span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap space-x-2'>
-                                            <span className='text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>design</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-end justify-between h-full'>
-                                        <span className='text-xs bg-red-500
-                                        text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
-                                            <FaClock /> 
-                                            <span>live</span>
-                                        </span>
-                                        <span className='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'>
-                                            <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
-                                                <FaLink className='text-sm text-white' />
-                                            </button>
-
-                                            <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
-                                                <FaLink className='text-sm text-white' />
-                                            </button>
-                                        </span>
-                                    </span>
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-                                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
-                                        <span className='relative flex'>
-                                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                            <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
-                                        </span>
-                                    </span>
-
-                                    <span className='text-xs text-white'>Adriana</span>
-
-                                    <button 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>
-                            
-                            {/* scheduled room - one on one */}
-                            <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-20'>
-                                        <span className='text-white font-semibold mr-auto'>Arjun and Paul - One on one</span>
-                                        <span className='text-xs text-gray-200 overflow-wrap'>performance review</span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap space-x-2'>
-                                            <span className='text-xs my-3 text-white bg-gray-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>private</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-end'>
-                                        <span className='text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
-                                            <FaClock />
-                                            <span>scheduled</span>
-                                        </span>
-
-                                        <span className='text-gray-200 text-xs text-center'>3ish? Ill ping you Arjun</span>
-                                    </span>
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-                                    <button 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>
-
-                            {/* recurring room - dsu */}
-                            <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-20'>
-                                        <span className='text-white font-semibold mr-auto'>
-                                            Daily Standup
-                                        </span>
-                                        <span className='text-xs text-gray-200 overflow-wrap'></span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap space-x-2'>
-                                            <span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>scrum</span>
-                                            </span>
-
-                                            <span className='text-xs my-3 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>engineering</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-center justify-start'>
-                                        <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
-                                            <IoTimer />
-                                            <span>recurring</span>
-                                        </span>
-
-                                        <span className='text-gray-200 text-xs'>10am daily</span>
-                                    </span>
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-
-                                    <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
-                                        Join
-                                    </button>
-
-                                    <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                        <FaBell className='text-sm text-orange-500' />
-                                    </button>
-
-                                    <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
-                                </span>
-
-                            {/* recurring  room - demo */}
-                            <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-20'>
-                                        <span className='text-white font-semibold mr-auto'>
-                                            Sprint Demo
-                                        </span>
-                                        <span className='text-xs text-gray-200 overflow-wrap'>all hands on deck...lets have fun :)</span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap space-x-2'>
-                                            <span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>scrum</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-center justify-start'>
-                                        <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
-                                            <IoTimer />
-                                            <span>recurring</span>
-                                        </span>
-
-                                        <span className='text-gray-200 text-xs text-center'>biweekly fridays!</span>
-                                    </span>
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-
-                                <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
-                                        Join
-                                    </button>
-
-                                    <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                        <FaBell className='text-sm text-orange-500' />
-                                    </button>
-
-                                    <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        
-                                    </span>
-                            </span>
-
-                            {/* recurring room - wine wednesdays */}
-                            <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
-                                {/* header */}
-                                <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
-                                    {/* meeting details */}
-                                    <span className='flex flex-col items-baseline max-w-xs pr-20'>
-                                        <span className='text-white font-semibold mr-auto'>
-                                            Wine Wednesdays
-                                        </span>
-                                        <span className='text-xs text-gray-200 overflow-wrap'>@JOSH YOU BETTER COME</span>                                                    
-                                        
-                                        {/* badges and tags */}
-                                        <span className='flex flex-row flex-wrap space-x-2'>
-                                            <span className='text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
-                                                <span>party 🎉</span>
-                                            </span>
-                                        </span>
-                                    </span>
-
-                                    {/* room status */}
-                                    <span className='flex flex-col items-end'>
-                                        <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
-                                            <IoTimer />
-                                            <span>recurring</span>
-                                        </span>
-
-                                        <span className='text-gray-200 text-xs text-right'>wednesdays 7-9pm</span>
-                                    </span>
-                                </span>
-
-                                {/* footer */}
-                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-
-                                    <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
-                                        Join
-                                    </button>
-
-                                    <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                        <FaBell className='text-sm text-orange-500' />
-                                    </button>
-
-                                    <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        
-                                </span>
-                            </span>
-                        </span>
-                    </section>
-                </div>
+      <div className="container mx-auto max-w-screen-xl py-10 flex flex-col space-y-5">
+        {/* header content */}
+        <section className="flex-1 flex flex-row items-center justify-between py-5">
+          {/* welcome message */}
+          <span className="flex flex-col items-baseline">
+            <span className="font-bold text-xl text-white">
+              👋Hey Arjun, Good Afternoon!
+            </span>
+
+            {/* Date and time */}
+            <span className="flex flex-row space-x-2">
+              <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2">
+                Tues, Jan 11th
+              </span>
+              <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold mt-2">
+                1:34am
+              </span>
+            </span>
+          </span>
+
+          {/* header control section */}
+          <span className="flex flex-row items-center space-x-5">
+            <button
+              onClick={handleSignOut}
+              className="mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded"
+            >
+              👋 Logout
+            </button>
+            {/* search bar */}
+            <div className="pt-2 flex flex-row relative items-center">
+              <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
+                <FaSearch className="text-white" />
+              </button>
+
+              <input
+                className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
+                type="search"
+                name="search"
+                placeholder="Search"
+              />
+
+              <button
+                className="absolute right-1 rounded-lg py-1 px-2 ml-1 
+                                    shadow-md text-center text-white text-sm font-bold"
+              >
+                CTRL + K
+              </button>
             </div>
 
-            {/* attachments */}
-            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                {/* header row */}
-                <span className='flex flex-row justify-start pb-5 items-center'>
-                    <span className='flex flex-col mr-20'>
-                        <span className="text-white mr-auto">Attachments
-                            <button className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
-                            shadow-md text-center text-gray-200 text-sm font-bold">
-                                T
-                            </button>
-                            <button className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
-                            shadow-md text-center text-gray-200 text-sm font-bold">
-                                CTRL + V
-                            </button>
-                        </span>
-                        <span className='text-gray-300 text-xs'>code, links (jira tickets, drive folders, powerpoints), screenshots</span>
+            <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+            <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+            <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+            <FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+
+            {/* avatar */}
+            <span className="relative flex">
+              <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+              <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+              <Image
+                src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
+                alt="profile"
+                width={50}
+                height={50}
+              />
+            </span>
+          </span>
+        </section>
+
+        <div className="flex flex-row items-baseline space-x-5 space-y-5 flex-wrap">
+          {/* personal line */}
+          <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+            <span className="flex flex-row justify-start items-center pb-5">
+              <span className="flex flex-col">
+                <span className="text-white">TEAM</span>
+              </span>
+
+              <button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                <FaPlus className="text-lg text-white" />
+              </button>
+            </span>
+
+            {/* list of team members */}
+            {testFriends.map((friend, i) => {
+              return (
+                <span
+                  key={i}
+                  className={
+                    "flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 " +
+                    (selectedChannel == i
+                      ? "bg-white bg-opacity-80 scale-105 shadow-2xl"
+                      : " ")
+                  }
+                >
+                  <span className="relative flex mr-2">
+                    <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+
+                    {statusBubble(friend.status)}
+
+                    <Image
+                      src={
+                        "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" +
+                        friend.systemAvatar +
+                        ".svg"
+                      }
+                      alt="profile"
+                      width={50}
+                      height={50}
+                    />
+                  </span>
+
+                  <span className="flex flex-col mr-10">
+                    <span className="flex flex-row items-center space-x-2">
+                      <span className="text-sm text-white font-bold">
+                        {friend.name}{" "}
+                      </span>
+                      {selectedChannel == i ? (
+                        <>
+                          <button
+                            className="rounded-lg bg-gray-400 shadow-lg text-center 
+                                                    text-white text-sm py-1 px-2 font-bold"
+                          >
+                            {i}
+                          </button>
+                        </>
+                      ) : (
+                        <button
+                          className="rounded-lg border py-1 px-2 border-gray-100 shadow-md 
+                                                text-center text-gray-200 text-smf font-bold"
+                        >
+                          {i}
+                        </button>
+                      )}
                     </span>
 
-                    {/* tab pane */}
-                    <span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
-                        <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Team</span>
-
-                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Personal</span>
-
-                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Favorites</span>
+                    <span
+                      className={
+                        "text-xs span-sans text-gray-300" +
+                        (selectedChannel == i ? "text-black" : " ")
+                      }
+                    >
+                      {friend.role}
                     </span>
+                  </span>
 
-                    <span className='text-sm mr-5 text-gray-300 flex flex-row items-center'>
-                        TODAY <FaAngleDown />
-                    </span>
-
-                    <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
-                        <FaCode className='text-lg text-white' />
-                    </button>
-
-                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                        <FaLink className='text-lg text-white' />
-                    </button>
-
-                    <BsThreeDots className='text-xl text-white ml-2' />
+                  {renderPulse(friend.status)}
                 </span>
-                
-                {/* row of attachments */}
-                <div className='flex flex-row flex-wrap space-x-2'>
-                    {/* pdf example */}
-                    <span className='flex flex-col rounded-lg'>
-                        {/* attmnt header */}
-                        <span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
-                            <FaFilePdf className='text-4xl text-orange-300 mr-2' />
+              );
+            })}
+          </section>
 
-                            <span className='flex flex-col items-baseline mr-10 space-y-1'>
-                                <span className='text-md font-bold text-white'>report.pdf</span>
-                                
-                                <span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
-                                    <span>blockers</span>
-                                </span>
-                            </span>
+          <div className="flex-1 flex flex-col space-y-5 items-baseline">
+            {/* pinned */}
+            <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+              <span className="flex flex-row justify-start items-center pb-5">
+                <span className="flex flex-col mr-20">
+                  <span className="text-white mr-auto">
+                    ANNOUNCEMENTS
+                    <button
+                      className="right-1 rounded-lg py-1 px-2 ml-1 
+                                        shadow-md text-center text-white text-sm font-bold"
+                    >
+                      CTRL + A
+                    </button>
+                  </span>
+                  <span className="text-gray-300 text-xs">
+                    updates, pep talks, blockers, reminders
+                  </span>
+                </span>
 
-                            {/* attachment actions */}
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
-                                <FaCopy className='text-sm text-white' />
-                            </button>
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaExternalLinkAlt className='text-sm text-white' />
-                            </button>
+                {/* tab pane */}
+                <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
+                  <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
+                    Active
+                  </span>
 
-                            <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaArchive className='text-sm text-orange-500 ' />
-                            </button>
-                        </span>
+                  <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                    Resolved
+                  </span>
+                </span>
 
-                        {/* attmnt footer */}
-                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-                            <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
-                                <span className='relative flex'>
-                                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                    <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
-                                </span>
-                            </span>
+                <span className="text-sm text-gray-300 flex flex-row items-center">
+                  TODAY <FaAngleDown />
+                </span>
 
-                            <span className='flex flex-col items-baseline'>
-                                <span className='text-xs text-gray-200 font-bold'>Adriana</span>
-                                <span className='text-xs text-gray-200 font-extralight'>5 minutes ago</span>
-                            </span>
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaMicrophoneAlt className="text-lg text-white" />
+                </button>
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaPlay className="text-lg text-white" />
+                </button>
+              </span>
 
-                            <BsThreeDots className='text-white ml-auto hover:cursor-pointer' />                                        
-                        </span>
+              <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
+                {/* adriana's announcement */}
+                <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+                  <span className="relative mr-2 grid items-center justify-items-center">
+                    <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+                    {statusBubble(UserStatus.busy)}
+
+                    <Image
+                      src={
+                        "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"
+                      }
+                      alt="profile"
+                      width={50}
+                      height={50}
+                    />
+                  </span>
+
+                  <span className="flex flex-col items-baseline">
+                    <span className="text-md font-bold text-white">
+                      Adriana
                     </span>
-
-                    {/* jira example */}
-                    <span className='flex flex-col rounded-lg'>
-                        {/* attmnt header */}
-                        <span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
-                            <FaAtlassian className='text-4xl text-sky-300 mr-2' />
-
-                            <span className='flex flex-col items-baseline mr-10 space-y-1'>
-                                <span className='text-md font-bold text-white'>RAM-22</span>
-                                <span className='text-xs text-gray-200'>technical doc - stripe</span>
-
-                                <span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
-                                    <span>engineering</span>
-                                </span>
-                            </span>
-
-                            {/* attachment actions */}
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
-                                <FaCopy className='text-sm text-white' />
-                            </button>
-                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaExternalLinkAlt className='text-sm text-white' />
-                            </button>
-
-                            <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
-                                <FaArchive className='text-sm text-orange-500' />
-                            </button>
-                        </span>
-
-                        {/* attmnt footer */}
-                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
-                            <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
-                                <span className='relative flex'>
-                                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                    <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-43.svg"} alt="profile" width={30} height={30} />
-                                </span>
-                            </span>
-
-                            <span className='flex flex-col items-baseline'>
-                                <span className='text-xs text-gray-200 font-bold'>Paul</span>
-                                <span className='text-xs text-gray-200 font-extralight'>2 hours ago</span>
-                            </span>
-
-                            <BsThreeDots className='text-white ml-auto hover:cursor-pointer' />                                        
-                        </span>
+                    <span className="text-xs text-gray-200">5 minutes ago</span>
+                    <span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
+                      <span>blockers</span>
                     </span>
-                </div>
+                  </span>
+                </span>
+
+                {/* arjun's announcement */}
+                <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+                  <span className="relative mr-2 grid items-center justify-items-center">
+                    <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+                    {statusBubble(UserStatus.busy)}
+
+                    <Image
+                      src={
+                        "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
+                      }
+                      alt="profile"
+                      width={50}
+                      height={50}
+                    />
+                  </span>
+
+                  <span className="flex flex-col items-baseline mr-5">
+                    <span className="text-md font-bold text-white">Arjun</span>
+                    <span className="text-xs text-gray-200">
+                      30 minutes ago
+                    </span>
+                    <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
+                      <span>engineering</span>
+                    </span>
+                  </span>
+
+                  <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                    <FaCheck className="text-lg text-white" />
+                  </button>
+                </span>
+              </div>
             </section>
-        </div>
-        
-        <div className='fixed bottom-10 w-full -z-10'>                            
-            {/* dynamic footer based on selection */}
-            <section className={"flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" + (selectedChannel != null ? "scale-100" : " ")}>
-                <span className='flex flex-row'>
-                    <span className='relative flex mr-2'>
+
+            {/* rooms */}
+            <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+              <span className="flex flex-row justify-end space-x-3 pb-5 items-center">
+                <span className="text-white mr-auto">
+                  ROOMS
+                  <button
+                    className="right-1 rounded-lg py-1 px-2 ml-1 
+                                    shadow-md text-center text-white text-sm font-bold"
+                  >
+                    CTRL + R
+                  </button>
+                </span>
+
+                {/* tab pane */}
+                <span className="flex flex-row space-x-5 uppercase mr-5">
+                  <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
+                    All
+                  </span>
+
+                  <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                    Live
+                  </span>
+
+                  <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                    Scheduled
+                  </span>
+
+                  <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                    Recurring
+                  </span>
+                </span>
+
+                <span className="text-sm text-gray-300 flex flex-row items-center uppercase">
+                  Week <FaAngleDown />
+                </span>
+
+                <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+                  <FaPlus className="text-lg text-white" />
+                </button>
+
+                <BsThreeDots className="text-xl text-white" />
+              </span>
+
+              {/* all rooms */}
+              <span className="flex flex-row flex-wrap">
+                {/* spontaneous bugs room */}
+                <span className="flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-1 flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-10">
+                      <span className="text-gray-500 font-semibold mr-auto">
+                        bug fixing
+                      </span>
+                      <span className="text-xs text-gray-400 overflow-wrap">
+                        were just fixing that jsx bug thats a paiiinnnn
+                      </span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap">
+                        <span className="text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center">
+                          <span>blockers</span>
+                        </span>
+
+                        <span className="text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center">
+                          <span>engineering</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-end space-y-1 justify-between h-full">
+                      <span
+                        className="text-xs bg-red-500
+                                        text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
+                      >
+                        <FaClock />
+                        <span>live</span>
+                      </span>
+
+                      {/* room attachments */}
+                      <span className="flex flex-row space-x-2">
+                        <button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-gray-400" />
+                        </button>
+
+                        <button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-gray-400" />
+                        </button>
+                      </span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+                      <span className="relative flex">
                         <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                        
-                        {statusBubble(UserStatus.online)}
-
-                        <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (selectedChannel == null ? "" : testFriends[selectedChannel].systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
+                        <Image
+                          className=""
+                          src={
+                            "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"
+                          }
+                          alt="profile"
+                          width={30}
+                          height={30}
+                        />
+                      </span>
+                      <span className="-mr-4 relative flex">
+                        <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                        <Image
+                          className=""
+                          src={
+                            "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
+                          }
+                          alt="profile"
+                          width={30}
+                          height={30}
+                        />
+                      </span>
                     </span>
-
-                    <span className='flex flex-col'>
-                        <span className="text-sm text-black font-bold">{selectedChannel == null ? "" : testFriends[selectedChannel].name} </span>
-
-                        <span className={"text-xs text-gray-300"}>{selectedChannel == null ? "" : testFriends[selectedChannel].role}</span>
-                    </span> 
+                    <span className="text-xs text-gray-400">
+                      Arjun and Liam
+                    </span>
+                    <button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
+                      👋 Leave
+                    </button>
+                    <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
+                  </span>
                 </span>
 
-                {/* shortcuts */}
-                <span className='flex flex-row space-x-3'>
-                    <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center animate-pulse">
-                        <span className="text-white text-sm font-bold">R</span>
+                {/* live room - design meeting */}
+                <span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-20">
+                      <span className="text-white font-semibold mr-auto">
+                        Shopping Cart Experience
+                      </span>
+                      <span className="text-xs text-gray-200 overflow-wrap">
+                        lets finish the mockups @josh, @mark, and @arjun please
+                        step in for feedback
+                      </span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap space-x-2">
+                        <span className="text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>design</span>
+                        </span>
+                      </span>
                     </span>
-                    <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center animate-pulse">
-                        <span className="text-white text-sm font-bold">SPACE</span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-end justify-between h-full">
+                      <span
+                        className="text-xs bg-red-500
+                                        text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
+                      >
+                        <FaClock />
+                        <span>live</span>
+                      </span>
+                      <span className="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">
+                        <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-white" />
+                        </button>
+
+                        <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+                          <FaLink className="text-sm text-white" />
+                        </button>
+                      </span>
                     </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+                      <span className="relative flex">
+                        <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                        <Image
+                          className=""
+                          src={
+                            "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"
+                          }
+                          alt="profile"
+                          width={30}
+                          height={30}
+                        />
+                      </span>
+                    </span>
+
+                    <span className="text-xs text-white">Adriana</span>
+
+                    <button 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>
+
+                {/* scheduled room - one on one */}
+                <span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-20">
+                      <span className="text-white font-semibold mr-auto">
+                        Arjun and Paul - One on one
+                      </span>
+                      <span className="text-xs text-gray-200 overflow-wrap">
+                        performance review
+                      </span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap space-x-2">
+                        <span className="text-xs my-3 text-white bg-gray-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>private</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-end">
+                      <span className="text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+                        <FaClock />
+                        <span>scheduled</span>
+                      </span>
+
+                      <span className="text-gray-200 text-xs text-center">
+                        3ish? Ill ping you Arjun
+                      </span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <button 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>
+
+                {/* recurring room - dsu */}
+                <span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-20">
+                      <span className="text-white font-semibold mr-auto">
+                        Daily Standup
+                      </span>
+                      <span className="text-xs text-gray-200 overflow-wrap"></span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap space-x-2">
+                        <span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>scrum</span>
+                        </span>
+
+                        <span className="text-xs my-3 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>engineering</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-center justify-start">
+                      <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+                        <IoTimer />
+                        <span>recurring</span>
+                      </span>
+
+                      <span className="text-gray-200 text-xs">10am daily</span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+                      Join
+                    </button>
+                    <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                      <FaBell className="text-sm text-orange-500" />
+                    </button>
+                    <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
+                  </span>
+                </span>
+
+                {/* recurring  room - demo */}
+                <span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-20">
+                      <span className="text-white font-semibold mr-auto">
+                        Sprint Demo
+                      </span>
+                      <span className="text-xs text-gray-200 overflow-wrap">
+                        all hands on deck...lets have fun :)
+                      </span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap space-x-2">
+                        <span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>scrum</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-center justify-start">
+                      <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+                        <IoTimer />
+                        <span>recurring</span>
+                      </span>
+
+                      <span className="text-gray-200 text-xs text-center">
+                        biweekly fridays!
+                      </span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+                      Join
+                    </button>
+
+                    <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                      <FaBell className="text-sm text-orange-500" />
+                    </button>
+
+                    <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+                  </span>
+                </span>
+
+                {/* recurring room - wine wednesdays */}
+                <span className="flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
+                  {/* header */}
+                  <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+                    {/* meeting details */}
+                    <span className="flex flex-col items-baseline max-w-xs pr-20">
+                      <span className="text-white font-semibold mr-auto">
+                        Wine Wednesdays
+                      </span>
+                      <span className="text-xs text-gray-200 overflow-wrap">
+                        @JOSH YOU BETTER COME
+                      </span>
+
+                      {/* badges and tags */}
+                      <span className="flex flex-row flex-wrap space-x-2">
+                        <span className="text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                          <span>party 🎉</span>
+                        </span>
+                      </span>
+                    </span>
+
+                    {/* room status */}
+                    <span className="flex flex-col items-end">
+                      <span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
+                        <IoTimer />
+                        <span>recurring</span>
+                      </span>
+
+                      <span className="text-gray-200 text-xs text-right">
+                        wednesdays 7-9pm
+                      </span>
+                    </span>
+                  </span>
+
+                  {/* footer */}
+                  <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                    <button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
+                      Join
+                    </button>
+
+                    <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                      <FaBell className="text-sm text-orange-500" />
+                    </button>
+
+                    <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+                  </span>
+                </span>
+              </span>
             </section>
+          </div>
         </div>
+
+        {/* attachments */}
+        <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+          {/* header row */}
+          <span className="flex flex-row justify-start pb-5 items-center">
+            <span className="flex flex-col mr-20">
+              <span className="text-white mr-auto">
+                Attachments
+                <button
+                  className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
+                            shadow-md text-center text-gray-200 text-sm font-bold"
+                >
+                  T
+                </button>
+                <button
+                  className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
+                            shadow-md text-center text-gray-200 text-sm font-bold"
+                >
+                  CTRL + V
+                </button>
+              </span>
+              <span className="text-gray-300 text-xs">
+                code, links (jira tickets, drive folders, powerpoints),
+                screenshots
+              </span>
+            </span>
+
+            {/* tab pane */}
+            <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
+              <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
+                Team
+              </span>
+
+              <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                Personal
+              </span>
+
+              <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+                Favorites
+              </span>
+            </span>
+
+            <span className="text-sm mr-5 text-gray-300 flex flex-row items-center">
+              TODAY <FaAngleDown />
+            </span>
+
+            <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
+              <FaCode className="text-lg text-white" />
+            </button>
+
+            <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+              <FaLink className="text-lg text-white" />
+            </button>
+
+            <BsThreeDots className="text-xl text-white ml-2" />
+          </span>
+
+          {/* row of attachments */}
+          <div className="flex flex-row flex-wrap space-x-2">
+            {/* pdf example */}
+            <span className="flex flex-col rounded-lg">
+              {/* attmnt header */}
+              <span className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start">
+                <FaFilePdf className="text-4xl text-orange-300 mr-2" />
+
+                <span className="flex flex-col items-baseline mr-10 space-y-1">
+                  <span className="text-md font-bold text-white">
+                    report.pdf
+                  </span>
+
+                  <span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
+                    <span>blockers</span>
+                  </span>
+                </span>
+
+                {/* attachment actions */}
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                  <FaCopy className="text-sm text-white" />
+                </button>
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaExternalLinkAlt className="text-sm text-white" />
+                </button>
+
+                <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaArchive className="text-sm text-orange-500 " />
+                </button>
+              </span>
+
+              {/* attmnt footer */}
+              <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+                  <span className="relative flex">
+                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                    <Image
+                      className=""
+                      src={
+                        "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"
+                      }
+                      alt="profile"
+                      width={30}
+                      height={30}
+                    />
+                  </span>
+                </span>
+
+                <span className="flex flex-col items-baseline">
+                  <span className="text-xs text-gray-200 font-bold">
+                    Adriana
+                  </span>
+                  <span className="text-xs text-gray-200 font-extralight">
+                    5 minutes ago
+                  </span>
+                </span>
+
+                <BsThreeDots className="text-white ml-auto hover:cursor-pointer" />
+              </span>
+            </span>
+
+            {/* jira example */}
+            <span className="flex flex-col rounded-lg">
+              {/* attmnt header */}
+              <span className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start">
+                <FaAtlassian className="text-4xl text-sky-300 mr-2" />
+
+                <span className="flex flex-col items-baseline mr-10 space-y-1">
+                  <span className="text-md font-bold text-white">RAM-22</span>
+                  <span className="text-xs text-gray-200">
+                    technical doc - stripe
+                  </span>
+
+                  <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
+                    <span>engineering</span>
+                  </span>
+                </span>
+
+                {/* attachment actions */}
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+                  <FaCopy className="text-sm text-white" />
+                </button>
+                <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaExternalLinkAlt className="text-sm text-white" />
+                </button>
+
+                <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+                  <FaArchive className="text-sm text-orange-500" />
+                </button>
+              </span>
+
+              {/* attmnt footer */}
+              <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+                <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+                  <span className="relative flex">
+                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                    <Image
+                      className=""
+                      src={
+                        "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-43.svg"
+                      }
+                      alt="profile"
+                      width={30}
+                      height={30}
+                    />
+                  </span>
+                </span>
+
+                <span className="flex flex-col items-baseline">
+                  <span className="text-xs text-gray-200 font-bold">Paul</span>
+                  <span className="text-xs text-gray-200 font-extralight">
+                    2 hours ago
+                  </span>
+                </span>
+
+                <BsThreeDots className="text-white ml-auto hover:cursor-pointer" />
+              </span>
+            </span>
+          </div>
+        </section>
+      </div>
+
+      <div className="fixed bottom-10 w-full -z-10">
+        {/* dynamic footer based on selection */}
+        <section
+          className={
+            "flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" +
+            (selectedChannel != null ? "scale-100" : " ")
+          }
+        >
+          <span className="flex flex-row">
+            <span className="relative flex mr-2">
+              <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+
+              {statusBubble(UserStatus.online)}
+
+              <Image
+                src={
+                  "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" +
+                  (selectedChannel == null
+                    ? ""
+                    : testFriends[selectedChannel].systemAvatar) +
+                  ".svg"
+                }
+                alt="profile"
+                width={50}
+                height={50}
+              />
+            </span>
+
+            <span className="flex flex-col">
+              <span className="text-sm text-black font-bold">
+                {selectedChannel == null
+                  ? ""
+                  : testFriends[selectedChannel].name}{" "}
+              </span>
+
+              <span className={"text-xs text-gray-300"}>
+                {selectedChannel == null
+                  ? ""
+                  : testFriends[selectedChannel].role}
+              </span>
+            </span>
+          </span>
+
+          {/* shortcuts */}
+          <span className="flex flex-row space-x-3">
+            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center animate-pulse">
+              <span className="text-white text-sm font-bold">R</span>
+            </span>
+            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center animate-pulse">
+              <span className="text-white text-sm font-bold">SPACE</span>
+            </span>
+          </span>
+        </section>
+      </div>
     </>
-    )
-}
\ No newline at end of file
+  );
+}
diff --git a/services/roomService.tsx b/services/roomService.tsx
index f20ddaa..7767847 100644
--- a/services/roomService.tsx
+++ b/services/roomService.tsx
@@ -38,4 +38,13 @@ export default class RoomService {
       { merge: true }
     );
   }
+
+  async updateRoom(room: Room) {
+    const docRef = doc(this.db, Collections.rooms, room.id);
+    await setDoc(
+      docRef,
+      { ...room, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
 }