diff --git a/package-lock.json b/package-lock.json
index 76119f9..db51fb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,10 @@
         "react-icons": "^5.3.0",
         "react-markdown": "^9.0.1",
         "react-select": "^5.8.2",
+<<<<<<< HEAD
+=======
         "react-syntax-highlighter": "^15.6.1",
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
         "simple-peer": "^9.11.1",
         "socket.io-client": "^4.8.1",
         "uuid": "^11.0.2"
@@ -33,7 +36,11 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+<<<<<<< HEAD
+        "@types/simple-peer": "^9.11.8",
+=======
         "@types/react-syntax-highlighter": "^15.5.13",
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
         "eslint": "^8",
         "eslint-config-next": "15.0.1",
         "postcss": "^8.4.47",
@@ -1165,10 +1172,16 @@
       "version": "9.11.8",
       "resolved": "https://registry.npmjs.org/@types/simple-peer/-/simple-peer-9.11.8.tgz",
       "integrity": "sha512-rvqefdp2rvIA6wiomMgKWd2UZNPe6LM2EV5AuY3CPQJF+8TbdrL5TjYdMf0VAjGczzlkH4l1NjDkihwbj3Xodw==",
+<<<<<<< HEAD
+      "dev": true,
+=======
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
       "dependencies": {
         "@types/node": "*"
       }
     },
+<<<<<<< HEAD
+=======
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -1179,6 +1192,7 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
       "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ=="
     },
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.0.tgz",
@@ -1788,6 +1802,8 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+<<<<<<< HEAD
+=======
     "node_modules/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
@@ -1796,6 +1812,7 @@
         "node": ">= 0.6.0"
       }
     },
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -1849,6 +1866,8 @@
         "node": ">=8"
       }
     },
+<<<<<<< HEAD
+=======
     "node_modules/browserslist": {
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
@@ -1880,6 +1899,7 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -3743,6 +3763,8 @@
         "react-is": "^16.7.0"
       }
     },
+<<<<<<< HEAD
+=======
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -3764,6 +3786,7 @@
         "node": ">=8.0.0"
       }
     },
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3831,11 +3854,14 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+<<<<<<< HEAD
+=======
     },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
       "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
@@ -7463,6 +7489,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+<<<<<<< HEAD
+=======
     },
     "node_modules/utrie": {
       "version": "1.0.2",
@@ -7471,6 +7499,7 @@
       "dependencies": {
         "base64-arraybuffer": "^1.0.2"
       }
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     },
     "node_modules/uuid": {
       "version": "11.0.2",
diff --git a/package.json b/package.json
index 0f273e0..a2d7f73 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,10 @@
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-select": "^5.8.2",
+<<<<<<< HEAD
+=======
     "react-syntax-highlighter": "^15.6.1",
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "simple-peer": "^9.11.1",
     "socket.io-client": "^4.8.1",
     "uuid": "^11.0.2"
@@ -34,7 +37,11 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+<<<<<<< HEAD
+    "@types/simple-peer": "^9.11.8",
+=======
     "@types/react-syntax-highlighter": "^15.5.13",
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
     "eslint": "^8",
     "eslint-config-next": "15.0.1",
     "postcss": "^8.4.47",
diff --git a/src/app/combined/page.tsx b/src/app/combined/page.tsx
index a260cd9..c4239c3 100644
--- a/src/app/combined/page.tsx
+++ b/src/app/combined/page.tsx
@@ -598,12 +598,10 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900">
+        <div className="min-h-screen bg-gray-900">
       {isInitializing ? (
         <div className="flex items-center justify-center min-h-screen">
-          <div className="text-white">
-            Initializing camera and microphone...
-          </div>
+          <div className="text-white">Initializing camera and microphone...</div>
         </div>
       ) : !isJoined ? (
         <div className="flex flex-col items-center justify-center min-h-screen gap-4 p-4">
@@ -618,7 +616,7 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
               </button>
             </div>
           )}
-          <div className="relative w-64 aspect-video bg-gray-800 rounded-lg overflow-hidden mb-4">
+          <div className="relative w-full max-w-md aspect-video bg-gray-800 rounded-lg overflow-hidden mb-4">
             <video
               ref={userVideoRef}
               autoPlay
@@ -635,7 +633,7 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
               </div>
             )}
           </div>
-          <div className="space-y-4 w-[90vw] lg:w-fit md:w-fit">
+          <div className="space-y-4 w-full max-w-md">
             <div className="flex flex-col gap-2">
               <input
                 type="text"
@@ -652,14 +650,14 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
                 Create New Room
               </button>
             </div>
-
+    
             <div className="flex flex-col lg:flex-row gap-2">
               <input
                 type="text"
                 value={roomId}
                 onChange={(e) => setRoomId(e.target.value)}
                 placeholder="Enter Room ID"
-                className="border p-2 rounded-lg"
+                className="border p-2 rounded-lg w-full"
               />
               <button
                 onClick={() => joinRoomClicked(roomId)}
@@ -715,7 +713,7 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
                 )}
               </span>
             </div>
-
+    
             <div className="hidden lg:flex gap-2">
               <button
                 onClick={toggleVideo}
@@ -831,7 +829,7 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
               </div>
             </div>
             {/* Right side - Code Editor */}
-            <div className="w-3/4 space-y-4">
+            <div className="w-full lg:w-3/4 space-y-4">
               <div className="flex justify-between items-center">
                 <div className="hidden lg:flex gap-4">
                   <LanguageDropdown onSelectChange={handleLanguageChange} />
@@ -858,8 +856,8 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
                     max="40"
                   />
                 </div>
-                <div className="flex w-[90vw] gap-4 flex-col items-center justify-center lg:hidden">
-                  <div className="flex w-[90vw] lg:hidden gap-4">
+                <div className="flex w-full lg:hidden gap-4 flex-col items-center justify-center">
+                  <div className="flex w-full lg:hidden gap-4">
                     <LanguageDropdown onSelectChange={handleLanguageChange} />
                     <ThemeDropdown
                       handleThemeChange={handleThemeChange}
@@ -889,7 +887,7 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
                 </div>
               </div>
               <div className="flex flex-col lg:grid lg:grid-cols-3 gap-4">
-                <div className="lg:col-span-2 lg:overflow-x-hidden lg:w-fit w-[90vw] overflow-x-scroll">
+                <div className="lg:col-span-2 lg:overflow-x-hidden lg:w-full w-full overflow-x-scroll">
                   <CodeEditor
                     onCodeChange={onCodeChange}
                     fontSize={fontSize}
@@ -905,10 +903,10 @@ const CollaborativeIDE: React.FC<CollaborativeIDEProps> = ({ userName }) => {
                     }}
                   />
                 </div>
-
+    
                 <div className="flex flex-col gap-4 lg:col-span-1 lg:space-y-4">
                   <button
-                    className="w-[90vw] lg:w-full lg:px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50"
+                    className="w-full lg:w-full lg:px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50"
                     disabled={!code || isLoading}
                     onClick={executeCode}
                   >
diff --git a/src/app/editor/CodeEditor.tsx b/src/app/editor/CodeEditor.tsx
index 930b1d5..b879055 100644
--- a/src/app/editor/CodeEditor.tsx
+++ b/src/app/editor/CodeEditor.tsx
@@ -66,8 +66,13 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
   return (
     <div className="code-editor-container overflow-x-scroll lg:overflow-x-hidden">
       <Editor
+<<<<<<< HEAD
+        height="80vh" // Use vh for height
+        width="100%"
+=======
         height="90vh"
         width="100vh"
+>>>>>>> c2d188ca54710609ba01b7819d67298f1a50388b
         language={language}
         value={code}
         theme={theme}
@@ -83,9 +88,15 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         .remote-cursor {
           border-left: 2px solid red;
         }
+        .code-editor-container {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+        }
       `}</style>
     </div>
   );
 };
 
-export default CodeEditor;
+export default CodeEditor;
\ No newline at end of file
diff --git a/src/app/editor/VideoCall.tsx b/src/app/editor/VideoCall.tsx
new file mode 100644
index 0000000..65aeb62
--- /dev/null
+++ b/src/app/editor/VideoCall.tsx
@@ -0,0 +1,201 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
+
+const socket = io("http://localhost:5000");
+
+const VideoCall = ({ roomId }) => {
+  const localVideoRef = useRef(null);
+  const remoteVideoRef = useRef(null);
+  const peerRef = useRef(null);
+  const [isInitiator, setIsInitiator] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState("Initializing...");
+
+  useEffect(() => {
+    const constraints = { video: true, audio: true };
+    let localStream;
+
+    const createPeerConnection = () => {
+      console.log("Creating peer connection...");
+      const configuration = {
+        iceServers: [
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:stun1.l.google.com:19302" },
+        ],
+      };
+
+      const peer = new RTCPeerConnection(configuration);
+
+      peer.onconnectionstatechange = () => {
+        console.log("Connection state:", peer.connectionState);
+        setConnectionStatus(`Connection: ${peer.connectionState}`);
+      };
+
+      peer.oniceconnectionstatechange = () => {
+        console.log("ICE connection state:", peer.iceConnectionState);
+      };
+
+      localStream.getTracks().forEach((track) => {
+        peer.addTrack(track, localStream);
+        console.log("Added local track:", track.kind);
+      });
+
+      peer.onicecandidate = (event) => {
+        if (event.candidate) {
+          console.log("Sending ICE candidate");
+          socket.emit("ice_candidate", {
+            roomId,
+            candidate: event.candidate,
+          });
+        }
+      };
+
+      peer.ontrack = (event) => {
+        console.log("Received remote track:", event.track.kind);
+        if (remoteVideoRef.current && !remoteVideoRef.current.srcObject) {
+          remoteVideoRef.current.srcObject = event.streams[0];
+          setConnectionStatus("Connected to remote peer");
+        }
+      };
+
+      return peer;
+    };
+
+    const initializeLocalStream = async () => {
+      try {
+        console.log("Requesting media permissions...");
+        localStream = await navigator.mediaDevices.getUserMedia(constraints);
+        console.log("Got local stream");
+
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = localStream;
+          console.log("Set local video source");
+        }
+
+        console.log("Joining room:", roomId);
+        socket.emit("join_room", roomId);
+
+        socket.on("room_status", ({ isFirst }) => {
+          console.log("Room status - isFirst:", isFirst);
+          setIsInitiator(isFirst);
+          setConnectionStatus(isFirst ? "Waiting for peer..." : "Connecting to peer...");
+          peerRef.current = createPeerConnection();
+
+          if (isFirst) {
+            createAndSendOffer();
+          }
+        });
+
+        socket.on("offer", async ({ offer }) => {
+          console.log("Received offer");
+          if (!peerRef.current) {
+            peerRef.current = createPeerConnection();
+          }
+          try {
+            await peerRef.current.setRemoteDescription(new RTCSessionDescription(offer));
+            console.log("Set remote description (offer)");
+
+            const answer = await peerRef.current.createAnswer();
+            await peerRef.current.setLocalDescription(answer);
+            console.log("Created and set local description (answer)");
+
+            socket.emit("answer", { roomId, answer });
+          } catch (error) {
+            console.error("Error handling offer:", error);
+            setConnectionStatus("Error handling offer");
+          }
+        });
+
+        socket.on("answer", async ({ answer }) => {
+          console.log("Received answer");
+          try {
+            await peerRef.current.setRemoteDescription(new RTCSessionDescription(answer));
+            console.log("Set remote description (answer)");
+          } catch (error) {
+            console.error("Error handling answer:", error);
+            setConnectionStatus("Error handling answer");
+          }
+        });
+
+        socket.on("ice_candidate", async ({ candidate }) => {
+          console.log("Received ICE candidate");
+          if (peerRef.current) {
+            try {
+              await peerRef.current.addIceCandidate(new RTCIceCandidate(candidate));
+              console.log("Added ICE candidate");
+            } catch (error) {
+              console.error("Error adding ICE candidate:", error);
+            }
+          }
+        });
+
+      } catch (error) {
+        console.error("Error accessing media devices:", error);
+        setConnectionStatus(`Error: ${error.message}`);
+      }
+    };
+
+    const createAndSendOffer = async () => {
+      try {
+        console.log("Creating offer");
+        const offer = await peerRef.current.createOffer();
+        await peerRef.current.setLocalDescription(offer);
+        console.log("Created and set local description (offer)");
+        socket.emit("offer", { roomId, offer });
+      } catch (error) {
+        console.error("Error creating offer:", error);
+        setConnectionStatus("Error creating offer");
+      }
+    };
+
+    initializeLocalStream();
+
+    return () => {
+      if (localStream) {
+        localStream.getTracks().forEach((track) => track.stop());
+      }
+      if (peerRef.current) {
+        peerRef.current.close();
+      }
+      socket.off("room_status");
+      socket.off("offer");
+      socket.off("answer");
+      socket.off("ice_candidate");
+    };
+  }, [roomId]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="text-sm text-gray-600 mb-2">
+        Status: {connectionStatus}
+      </div>
+      <div className="flex gap-4">
+        <div className="relative">
+          <video 
+            ref={localVideoRef} 
+            autoPlay 
+            muted 
+            playsInline
+            className="w-80 h-60 rounded-lg bg-gray-800"
+          />
+          <span className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
+            You
+          </span>
+        </div>
+        <div className="relative">
+          <video 
+            ref={remoteVideoRef} 
+            autoPlay 
+            playsInline
+            className="w-80 h-60 rounded-lg bg-gray-800"
+          />
+          <span className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
+            Remote
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoCall;
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
index 546d27a..471d63f 100644
--- a/src/app/editor/page.tsx
+++ b/src/app/editor/page.tsx
@@ -7,6 +7,7 @@ import LanguageDropdown from "./LanguageDropdown";
 import ThemeDropdown from "./ThemeDropdown";
 import OutputWindow from "./OutputWindow";
 import CustomInput from "./CustomInput";
+import VideoCall from "./VideoCall"; // Import the VideoCall component
 import axios from "axios";
 import io from "socket.io-client";
 import { v4 as uuidv4 } from "uuid";
@@ -138,51 +139,50 @@ const Landing: React.FC<LandingProps> = (props) => {
   };
 
   return (
-    <div className="bg-gray-600">
-      <div className="flex justify-center p-4 space-x-4">
+    <div className="bg-gray-600 min-h-screen">
+      <div className="flex flex-col md:flex-row justify-center p-4 space-y-4 md:space-y-0 md:space-x-4">
         <input
           type="text"
           placeholder="Enter Room ID"
           value={roomId}
           onChange={(e) => setRoomId(e.target.value)}
-          className="border text-black rounded-md p-2"
+          className="border text-black rounded-md p-2 w-full md:w-auto"
         />
         <button
           onClick={createRoom}
-          className="bg-green-600 text-black rounded-md px-4 py-2 hover:bg-green-700"
+          className="bg-green-600 text-black rounded-md px-4 py-2 hover:bg-green-700 w-full md:w-auto"
         >
           Create Room
         </button>
         <button
           onClick={joinRoom}
-          className="bg-blue-600 text-black rounded-md px-4 py-2 hover:bg-blue-700"
+          className="bg-blue-600 text-black rounded-md px-4 py-2 hover:bg-blue-700 w-full md:w-auto"
         >
           Join Room
         </button>
       </div>
 
-      <div className="flex flex-row w-full justify-between bg-gray-600 md:justify-start">
-        <div className="md:px-4 py-2 px-2 w-5/12 md:w-auto">
+      <div className="flex flex-col md:flex-row w-full justify-between bg-gray-600 md:justify-start p-4 space-y-4 md:space-y-0">
+        <div className="md:px-4 py-2 px-2 w-full md:w-auto">
           <LanguageDropdown onSelectChange={handleLanguageChange} />
         </div>
-        <div className="md:px-4 py-2 px-2 w-5/12 md:w-auto">
+        <div className="md:px-4 py-2 px-2 w-full md:w-auto">
           <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
         </div>
-        <div className="flex justify-end mt-2">
-          <div className="flex flex-row items-center border-2 border-black rounded bg-white shadow-md">
+        <div className="flex justify-end mt-2 w-full md:w-auto">
+          <div className="flex flex-row items-center border-2 border-black rounded bg-white shadow-md w-full md:w-auto">
             <label className="font-thin ml-2 mr-2">Font:</label>
             <input
               type="number"
               value={fontSize}
               onChange={(e) => setFontSize(Number(e.target.value))}
-              className="border border-black mr-1 rounded px-2 custom-input"
+              className="border border-black mr-1 rounded px-2 custom-input w-full md:w-auto"
               min="10"
               max="40"
               style={{
                 color: "#000",
                 fontSize: "0.8rem",
                 lineHeight: "1.75rem",
-                width: "100%",
                 background: "#fff",
               }}
             />
@@ -190,7 +190,7 @@ const Landing: React.FC<LandingProps> = (props) => {
         </div>
       </div>
 
-      <div className="flex bg-gray-600 flex-col md:flex-row w-full justify-start px-4 mt-4">
+      <div className="flex flex-col md:flex-row w-full justify-start px-4 mt-4 space-y-4 md:space-y-0">
         <div className="md:flex flex-col w-full md:w-3/4 md:h-full h-96 justify-start items-end">
           <CodeEditor
             onCodeChange={onCodeChange}
@@ -202,10 +202,10 @@ const Landing: React.FC<LandingProps> = (props) => {
             remoteCursorPosition={remoteCursorPosition}
           />
         </div>
-        <div className="w-full md:w-4/12 p-4 ml-auto">
+        <div className="w-full md:w-1/4 p-4 ml-auto">
           <div className="flex w-full justify-between">
             <button
-              className={`mb-4 bg-black text-white border-2 border-black z-10 rounded-md px-4 py-2 hover:bg-white hover:text-black transition duration-200 ease-in-out transform hover:scale-105 shadow-md`}
+              className={`mb-4 bg-black text-white border-2 border-black z-10 rounded-md px-4 py-2 hover:bg-white hover:text-black transition duration-200 ease-in-out transform hover:scale-105 shadow-md w-full`}
               disabled={!code || isLoading}
               onClick={executeCode}
             >
@@ -218,6 +218,11 @@ const Landing: React.FC<LandingProps> = (props) => {
           </div>
         </div>
       </div>
+
+      {/* Video Call Section */}
+      <div className="video-section mt-8">
+        <VideoCall roomId={roomId} />
+      </div>
     </div>
   );
 };
diff --git a/src/app/editor/video.css b/src/app/editor/video.css
new file mode 100644
index 0000000..011c24c
--- /dev/null
+++ b/src/app/editor/video.css
@@ -0,0 +1,12 @@
+.video-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+  }
+  
+  .controls {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+  }
+  
\ No newline at end of file