diff --git a/package.json b/package.json
index f62fb13cee..c7750459a7 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
     "type": "git",
     "url": "https://github.com/zurichat/zc_main"
   },
-  
   "bugs": {
     "url": "https://github.com/zurichat/zc_main/issues"
   },
@@ -49,3 +48,4 @@
   },
   "dependencies": {}
 }
+
diff --git a/packages/main/src/components/media-chat/VideoChat.jsx b/packages/main/src/components/media-chat/VideoChat.jsx
deleted file mode 100644
index 0ba2dfca67..0000000000
--- a/packages/main/src/components/media-chat/VideoChat.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities";
-import AgoraUIKit from "agora-react-uikit";
-import { useState } from "react";
-import styles from "./VideoChat.module.css";
-
-const VideoChat = () => {
-  const [videoCall, setVideoCall] = useState(false);
-
-  const rtcProps = {
-    appId: AGORA_APP_ID,
-    channel: "plug",
-    token: AGORA_TOKEN
-  };
-
-  const callbacks = {
-    EndCall: () => setVideoCall(false)
-  };
-
-  return videoCall ? (
-    <div style={{ display: "flex", width: "100vw", height: "100%" }}>
-      <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
-    </div>
-  ) : (
-    <button
-      colorScheme="blue"
-      onClick={() => setVideoCall(true)}
-      className={styles.joinBtn}
-    >
-      Join Video Chat
-    </button>
-  );
-};
-
-export default VideoChat;
diff --git a/packages/main/src/components/media-chat/video/VideoRoom.jsx b/packages/main/src/components/media-chat/video/VideoRoom.jsx
new file mode 100644
index 0000000000..5b90d61943
--- /dev/null
+++ b/packages/main/src/components/media-chat/video/VideoRoom.jsx
@@ -0,0 +1,129 @@
+import { useState, useEffect } from "react";
+import AgoraUIKit from "agora-react-uikit";
+import { AGORA_APP_ID, AGORA_TOKEN } from "@zuri/utilities";
+import styles from "./styles/videoRoom.css";
+import axios from "axios";
+
+const VideoRoom = ({ workspaceId }) => {
+  const [videoCall, setVideoCall] = useState(false);
+  const [token, setToken] = useState(null);
+  const fetchToken = () => {
+    axios
+      .get(
+        `https://staging.api.zuri.chat/rtc/${workspaceId}/publisher/userAccount`
+      )
+      .then(response => {
+        if (response.status === 200) {
+          setToken(response.data.data.token);
+          setVideoCall(true);
+        }
+      })
+      .catch(error => console.log(error));
+  };
+  useEffect(() => {
+    fetchToken();
+  }, []);
+  const rtcProps = {
+    appId: AGORA_APP_ID,
+    channel: workspaceId,
+    token: token
+  };
+  const callbacks = {
+    EndCall: () => setVideoCall(false)
+  };
+
+  const styleProps = {
+    videoMode: { max: "cover" },
+    UIKitContainer: {
+      position: "relative",
+      background: "#838383",
+      overflow: "hidden"
+    },
+    minViewContainer: {
+      maxWidth: "auto",
+      maxHeight: "168px",
+      position: "absolute",
+      top: "0px",
+      right: "0px",
+      display: "flex",
+      justifyContent: "flex-end"
+    },
+    minViewStyles: {
+      maxWidth: "128px",
+      maxHeight: "128px",
+      margin: "32px 40px 0 0",
+      overflow: "hidden",
+      borderRadius: "10px",
+      boxShadow: "1px 1px 15px 3px rgba(184, 88, 32, 0.2)"
+    },
+    minViewOverlayContainer: {
+      background: "red"
+    },
+
+    maxViewContainer: {
+      position: "absolute",
+      width: "100%",
+      height: "100%"
+    },
+    maxViewStyles: {},
+    localBtnContainer: {
+      background: "#00b87c"
+    },
+    localBtnStyles: {
+      endCall: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "rgb(220,60,60)",
+        border: "none"
+      },
+      muteLocalAudio: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "transparent",
+        border: "none"
+      },
+      muteLocalVideo: {
+        minHeight: "48px",
+        minWidth: "48px",
+        background: "transparent",
+        border: "none"
+      }
+    }
+  };
+  return videoCall ? (
+    <div
+      style={{
+        display: "flex",
+        width: "100%",
+        height: "100vh",
+        padding: "10px"
+      }}
+    >
+      <AgoraUIKit
+        styleProps={styleProps}
+        rtcProps={rtcProps}
+        callbacks={callbacks}
+      />
+    </div>
+  ) : (
+    <div
+      style={{
+        justifyContent: "center",
+        display: "flex",
+        alignItems: "center",
+        height: "100%",
+        width: "100%"
+      }}
+    >
+      <button
+        colorScheme="blue"
+        onClick={() => setVideoCall(true)}
+        className={styles.joinBtn}
+      >
+        Join Video Chat
+      </button>
+    </div>
+  );
+};
+
+export default VideoRoom;
diff --git a/packages/main/src/components/media-chat/video/styles/videoRoom.css b/packages/main/src/components/media-chat/video/styles/videoRoom.css
new file mode 100644
index 0000000000..409422284e
--- /dev/null
+++ b/packages/main/src/components/media-chat/video/styles/videoRoom.css
@@ -0,0 +1,5 @@
+.joinBtn {
+    padding: 12px 24px;
+    font-size: 21px;
+    background-color: #20c997;
+}
\ No newline at end of file
diff --git a/packages/main/src/components/protected/sidebar/assets/icons/videos.svg b/packages/main/src/components/protected/sidebar/assets/icons/videos.svg
new file mode 100644
index 0000000000..f2d60f460d
--- /dev/null
+++ b/packages/main/src/components/protected/sidebar/assets/icons/videos.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
+</svg>
diff --git a/packages/main/src/components/protected/sidebar/components/EditWorkspaceModal.jsx b/packages/main/src/components/protected/sidebar/components/EditWorkspaceModal.jsx
index 9520fac272..eb0cfb91ca 100644
--- a/packages/main/src/components/protected/sidebar/components/EditWorkspaceModal.jsx
+++ b/packages/main/src/components/protected/sidebar/components/EditWorkspaceModal.jsx
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 
 const EditWorkspaceModal = ({ workSpace, editDetails, setEditDetails }) => {
   const { t } = useTranslation();
-  
+
   // getting current workspace id
   const currentWorkspace = localStorage.getItem("currentWorkspace");
   const orgs = JSON.parse(sessionStorage.getItem("organisations"));
diff --git a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx
index 4ed3a3f7b2..a5c6b28576 100644
--- a/packages/main/src/components/protected/sidebar/components/Sidebar.jsx
+++ b/packages/main/src/components/protected/sidebar/components/Sidebar.jsx
@@ -1,20 +1,19 @@
 import { useState, useEffect, useRef, useCallback } from "react";
+import { navigateToUrl } from "single-spa";
 import styles from "../styles/Sidebar.module.css";
 import { useTranslation } from "react-i18next";
-
+// import videoIcon from "../assets/icons/videos.svg";
 import threadIcon from "../assets/icons/thread-icon.svg";
 import dmIcon from "../assets/icons/dm-icon.svg";
-import liveicon from "../assets/icons/newlive.svg";
-import phoneicon from "../assets/icons/phone.svg";
 import draftIcon from "../assets/icons/draft-icon.svg";
 import { subscribeToChannel } from "@zuri/utilities";
 import { ACTIONS } from "../reducers/sidebar.reducer";
 import Header from "./Header";
-import Room from "./Room";
 import SingleRoom from "./SingleRoom";
 import Category from "./Category";
 import Starred from "./Starred";
 import { storeSideBarInfo } from "../../../../utils/cache-sidebar";
+import { FiVideo } from "react-icons/fi";
 
 const categories = [];
 
@@ -231,7 +230,7 @@ const Sidebar = props => {
         <div className={styles.sb__content}>
           <Header state={props.state} />
           <div className={`${styles.subCon2}`}>
-            <>
+            <div>
               <SingleRoom
                 name={`${t("workspace_chat.threads")}`}
                 image={threadIcon}
@@ -242,30 +241,28 @@ const Sidebar = props => {
                 image={dmIcon}
                 link={`/workspace/${currentWorkspaceShort}/plugin-chat/all-dms`}
               />
-              <SingleRoom
-                name="Video Chat"
-                image={dmIcon}
-                link={`/workspace/${currentWorkspaceShort}/video-chat`}
-              />
               <SingleRoom
                 name={`${t("workspace_chat.drafts")}`}
                 image={draftIcon}
               />
-              <SingleRoom
-                name="LiveBroadcast"
-                image={liveicon}
-                link={`/workspace/${currentWorkspaceShort}/LiveBroadcast`}
-              />
-              <SingleRoom
-                name="Voice Call"
-                image={phoneicon}
-                link={`/workspace/${currentWorkspaceShort}/voice-call`}
-              />
               <div className={styles.sb__divider} />
               <Starred starredRooms={starredRooms} />
               {singleItems}
               {categorizedItems}
-            </>
+            </div>
+            <div>
+              <div
+                className={styles.videoCall}
+                onClick={() =>
+                  navigateToUrl(
+                    `/workspace/${currentWorkspaceShort}/video-chat`
+                  )
+                }
+              >
+                <FiVideo />
+                Video call
+              </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/packages/main/src/components/protected/sidebar/styles/Drop.module.css b/packages/main/src/components/protected/sidebar/styles/Drop.module.css
index 0b1efc1fb5..b4fcacb01f 100644
--- a/packages/main/src/components/protected/sidebar/styles/Drop.module.css
+++ b/packages/main/src/components/protected/sidebar/styles/Drop.module.css
@@ -47,6 +47,7 @@
 
 .item__img {
   margin-left: 0.1rem;
+  width: 14px;
 }
 
 .item__list,
diff --git a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css
index 1d6c0308fa..e2576a73d8 100644
--- a/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css
+++ b/packages/main/src/components/protected/sidebar/styles/Sidebar.module.css
@@ -54,8 +54,12 @@
 }
 
 .subCon2 {
-  height: 100%;
+  height: 90vh;
   width: unset;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
 }
 
 .subCon2::-webkit-scrollbar {
@@ -264,3 +268,32 @@
 .displayCategory {
   display: block;
 }
+
+.videoCall {
+  height: 50px;
+  border-top: 2px solid rgba(128, 128, 128, 0.5);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  padding: 0px 20px;
+  cursor: pointer;
+}
+
+.videoCall:hover {
+  background-color: #7ed5af;
+}
+
+.videoCall:active {
+  background-color: #7ed5af;
+}
+.videoCall > div {
+  width: 100%;
+}
+
+.videoCall > div > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
diff --git a/packages/main/src/pages/protected/workspace/Workspace.jsx b/packages/main/src/pages/protected/workspace/Workspace.jsx
index d1ef2a82d1..f7a7f8dd4e 100644
--- a/packages/main/src/pages/protected/workspace/Workspace.jsx
+++ b/packages/main/src/pages/protected/workspace/Workspace.jsx
@@ -6,7 +6,6 @@ import {
   useLocation,
   useRouteMatch
 } from "react-router-dom";
-import LiveBroadcast from "../../../components/media-chat/LiveBroadcast";
 import useParamHook from "./useParamHook";
 import {
   ExtraSidebarWrapperStyle,
@@ -16,8 +15,16 @@ import {
   WorkspaceWrapperStyle
 } from "./Workspace.style";
 
-import VideoChat from "../../../components/media-chat/VideoChat";
-import VoiceCall from "../../../components/media-chat/VoiceCall/VoiceCall";
+// import { GeneralLoading } from "../../../components";
+
+import { useMediaQuery } from "@chakra-ui/react";
+import {
+  BsFillCaretDownFill,
+  BsFillQuestionCircleFill,
+  BsGearFill,
+  BsPlusCircle
+} from "react-icons/bs";
+import VideoRoom from "../../../components/media-chat/video/VideoRoom";
 import { Sidebar, TopBar } from "../../../components/protected";
 import ExtraSidebar from "../../../components/protected/extra-sidebar";
 import WorkspaceLoading from "../../../components/general-loading/WorkspaceLoading";
@@ -84,38 +91,29 @@ export default function Index() {
         </>
 
         <WorkspaceWrapperStyle>
-          <div id="single-spa-loader">
-            <WorkspaceLoading text="Initializing Workspace..." />
-          </div>
-          <div id="zuri-plugin-load-section"></div>
-          <Switch>
-            <Route exact path="/workspace/:workspaceId">
-              <h1>Welcome to your Workspace</h1>
-            </Route>
-            <Route path="/workspace/:workspaceId/LiveBroadcast">
-              <LiveBroadcast />
-            </Route>
+          <div id="zuri-plugin-load-section">
+            <Switch>
+              <Route exact path="/workspace/:workspaceId">
+                <h1>Welcome to your Workspace</h1>
+              </Route>
+              <Route path="/workspace/:workspaceId/video-chat">
+                <VideoRoom workspaceId={workspaceId} />
+              </Route>
 
-            <Route path="/workspace/:workspaceId/video-chat">
-              <VideoChat />
-            </Route>
-            <Route path="/workspace/:workspaceId/voice-call">
-              <VoiceCall />
-            </Route>
+              {/* <Route
+                exact
+                path="/workspace/:workspaceId/marketplace"
+                component={() => <h1>MarketPlace</h1>}
+              /> */}
 
-            {/* <Route
-              exact
-              path="/workspace/:workspaceId/marketplace"
-              component={() => <h1>MarketPlace</h1>}
-            /> */}
-
-            {/* All other routes not by main go to Single SPA */}
-            {/* <Route path="/workspace/:workspaceId/*">
-              <div id="zuri-plugin-load-section">
-                <p>SHOULD SHOW PLUGINS</p>
-              </div>
-            </Route> */}
-          </Switch>
+              {/* All other routes not by main go to Single SPA */}
+              {/* <Route path="/workspace/:workspaceId/*">
+                <div id="zuri-plugin-load-section">
+                  <p>SHOULD SHOW PLUGINS</p>
+                </div>
+              </Route> */}
+            </Switch>
+          </div>
         </WorkspaceWrapperStyle>
       </div>
     </>