diff --git a/components/Dashboard/Rooms.tsx b/components/Dashboard/Rooms.tsx
index dc09370..b78d565 100644
--- a/components/Dashboard/Rooms.tsx
+++ b/components/Dashboard/Rooms.tsx
@@ -1,8 +1,420 @@
 import React, { useState } from "react";
 import { render } from "react-dom";
+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 Image from "next/image";
 
 export default function DashboardRoom() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
-  return <div>hi</div>;
-}
\ No newline at end of file
+  return (
+    <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>
+  );
+}
diff --git a/components/Layouts/BackgroundLayout.js b/components/Layouts/BackgroundLayout.js
index f3fc725..cd81859 100644
--- a/components/Layouts/BackgroundLayout.js
+++ b/components/Layouts/BackgroundLayout.js
@@ -1,6 +1,6 @@
 export default function BackgroundLayout({ children }) {
   return (
-    <div id="bg" className="text-white w-screen h-screen">
+    <div id="bg" className="text-white min-w-full min-w-screen">
       {children}
     </div>
   );
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index 15e7f28..9880fc9 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -2,6 +2,7 @@ import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../../components/Dashboard/Header";
+import Rooms from "../../components/Dashboard/Rooms";
 import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import Loading from "../../components/Loading";
@@ -85,6 +86,8 @@ function TeamDashboard() {
 
       <div className="flex flex-row items-baseline space-x-5 space-y-5 flex-wrap">
         <TeamVoiceLine />
+
+        <Rooms />
       </div>
     </div>
   );