diff --git a/.gitignore b/.gitignore
index 397d2434..dd5c40b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ node_modules
 devAssets
 
 .DS_Store
+
+/.history/
diff --git a/package-lock.json b/package-lock.json
index e004ee5c..9dcce834 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@fontsource/inter": "4.5.14",
         "@fontsource/roboto": "4.5.8",
+        "@jitsi/react-sdk": "1.3.0",
         "@khanacademy/simple-markdown": "0.8.6",
         "@matrix-org/olm": "3.2.14",
         "@tippyjs/react": "4.2.6",
@@ -899,6 +900,15 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@jitsi/react-sdk": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@jitsi/react-sdk/-/react-sdk-1.3.0.tgz",
+      "integrity": "sha512-f+xtk/j0iXIMJscJeGt3OXnocFeG1pX6OMjv7H/9AaTnCUNsDc/jfDSPme+h0RmdymzJdkSwyHjmkhDK9aehzw==",
+      "peerDependencies": {
+        "react": "16 || 17 || 18",
+        "react-dom": "16 || 17 || 18"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
diff --git a/package.json b/package.json
index 0ff2338b..2f7b7e1b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@fontsource/inter": "4.5.14",
     "@fontsource/roboto": "4.5.8",
+    "@jitsi/react-sdk": "1.3.0",
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
     "@tippyjs/react": "4.2.6",
diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
index 15be02d2..f08dd73e 100644
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -36,6 +36,7 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
   const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
   const [isEncrypted, setIsEncrypted] = useState(true);
+  const [isVideoRoom, setIsVideoRoom] = useState(false);
   const [isCreatingRoom, setIsCreatingRoom] = useState(false);
   const [creatingError, setCreatingError] = useState(null);
 
@@ -76,8 +77,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
     setCreatingError(null);
 
     const name = target.name.value;
-    let topic = target.topic.value;
-    if (topic.trim() === '') topic = undefined;
+    let topic = target.topic?.value;
+    if (topic && topic.trim() === '') topic = undefined;
+    if (isVideoRoom) {
+      topic = 'd38dd491fefa1cfffc27f9c57f2bdb4a';
+    }
     let roomAlias;
     if (joinRule === 'public') {
       roomAlias = addressRef?.current?.value;
@@ -92,7 +96,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
         topic,
         joinRule,
         alias: roomAlias,
-        isEncrypted: (isSpace || joinRule === 'public') ? false : isEncrypted,
+        isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
         powerLevel,
         isSpace,
         parentId,
@@ -168,52 +172,73 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
       <form className="create-room__form" onSubmit={handleSubmit}>
         <SettingTile
           title="Visibility"
-          options={(
+          options={
             <Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
               {joinRuleShortText[joinRules.indexOf(joinRule)]}
             </Button>
-          )}
-          content={<Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>}
+          }
+          content={
+            <Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>
+          }
         />
         {joinRule === 'public' && (
           <div>
-            <Text className="create-room__address__label" variant="b2">{isSpace ? 'Space address' : 'Room address'}</Text>
+            <Text className="create-room__address__label" variant="b2">
+              {isSpace ? 'Space address' : 'Room address'}
+            </Text>
             <div className="create-room__address">
               <Text variant="b1">#</Text>
               <Input
                 value={addressValue}
                 onChange={validateAddress}
-                state={(isValidAddress === false) ? 'error' : 'normal'}
+                state={isValidAddress === false ? 'error' : 'normal'}
                 forwardRef={addressRef}
                 placeholder="my_address"
                 required
               />
               <Text variant="b1">{`:${userHs}`}</Text>
             </div>
-            {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}:${userHs} is already in use`}</span></Text>}
+            {isValidAddress === false && (
+              <Text className="create-room__address__tip" variant="b3">
+                <span
+                  style={{ color: 'var(--bg-danger)' }}
+                >{`#${addressValue}:${userHs} is already in use`}</span>
+              </Text>
+            )}
           </div>
         )}
         {!isSpace && joinRule !== 'public' && (
           <SettingTile
             title="Enable end-to-end encryption"
             options={<Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />}
-            content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
+            content={
+              <Text variant="b3">
+                You can’t disable this later. Bridges & most bots won’t work yet.
+              </Text>
+            }
           />
         )}
+        <SettingTile
+          title="Video room"
+          options={<Toggle isActive={isVideoRoom} onToggle={setIsVideoRoom} />}
+          content={<Text variant="b3">Use jitsi for voice/video calls</Text>}
+        />
         <SettingTile
           title="Select your role"
-          options={(
+          options={
             <SegmentControl
               selected={roleIndex}
               segments={[{ text: 'Admin' }, { text: 'Founder' }]}
               onSelect={setRoleIndex}
             />
-          )}
-          content={(
+          }
+          content={
             <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
-          )}
+          }
         />
-        <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
+        {!isVideoRoom && (
+          <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
+        )}
         <div className="create-room__name-wrapper">
           <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
           <Button
@@ -231,7 +256,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
             <Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
           </div>
         )}
-        {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
+        {typeof creatingError === 'string' && (
+          <Text className="create-room__error" variant="b3">
+            {creatingError}
+          </Text>
+        )}
       </form>
     </div>
   );
diff --git a/src/app/organisms/room/Room.jsx b/src/app/organisms/room/Room.jsx
index 447686af..64e89554 100644
--- a/src/app/organisms/room/Room.jsx
+++ b/src/app/organisms/room/Room.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './Room.scss';
+import { JitsiMeeting } from '@jitsi/react-sdk';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -12,6 +13,7 @@ import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
 import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
+import { getUsername } from '../../../util/matrixUtil';
 
 function Room() {
   const [roomInfo, setRoomInfo] = useState({
@@ -59,6 +61,34 @@ function Room() {
     return <Welcome />;
   }
 
+  if (
+    roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
+    'd38dd491fefa1cfffc27f9c57f2bdb4a'
+  ) {
+    return (
+      <JitsiMeeting
+        domain="meet.calyx.net"
+        roomName={roomTimeline.roomName}
+        configOverwrite={{
+          startWithAudioMuted: true,
+          disableModeratorIndicator: true,
+          startScreenSharing: true,
+          enableEmailInStats: false,
+        }}
+        interfaceConfigOverwrite={{
+          DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
+        }}
+        userInfo={{
+          displayName: getUsername(mx.getUserId()),
+        }}
+        onApiReady={(externalApi) => {
+          // here you can attach custom event listeners to the Jitsi Meet External API
+          // you can also store it locally to execute commands
+        }}
+      />
+    );
+  }
+
   return (
     <div className="room">
       <div className="room__content">
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss
index cdb8fcc9..d45bd61b 100644
--- a/src/app/templates/client/Client.scss
+++ b/src/app/templates/client/Client.scss
@@ -1,4 +1,5 @@
 @use '../../partials/screen';
+@use '../../partials/flex';
 
 .client-container {
   display: flex;
@@ -7,15 +8,15 @@
 
 .navigation__wrapper {
   width: var(--navigation-width);
-  
+
   @include screen.smallerThan(mobileBreakpoint) {
     width: 100%;
   }
 }
 
 .room__wrapper {
-  flex: 1;
-  min-width: 0;
+  display:grid;
+  @extend .cp-fx__item-one;
 }
 
 @include screen.smallerThan(mobileBreakpoint) {
diff --git a/src/client/state/RoomTimeline.js b/src/client/state/RoomTimeline.js
index 57d91c14..8c406486 100644
--- a/src/client/state/RoomTimeline.js
+++ b/src/client/state/RoomTimeline.js
@@ -88,6 +88,8 @@ class RoomTimeline extends EventEmitter {
     this.matrixClient = initMatrix.matrixClient;
     this.roomId = roomId;
     this.room = this.matrixClient.getRoom(roomId);
+    this.roomName = this.matrixClient.getRoom(roomId).name;
+    this.roomTopic = this.matrixClient.getRoom(roomId).topic;
 
     this.liveTimeline = this.room.getLiveTimeline();
     this.activeTimeline = this.liveTimeline;