diff --git a/packages/app/src/pages/callRoom/[id].jsx b/packages/app/src/pages/callRoom/[id].jsx
new file mode 100644
index 00000000..1ebf669d
--- /dev/null
+++ b/packages/app/src/pages/callRoom/[id].jsx
@@ -0,0 +1,81 @@
+import React from "react"
+import { LiveChat } from "components"
+import classnames from "classnames"
+//import Peer from "peer"
+
+import "./index.less"
+
+export default class CallRoom extends React.Component {
+    state = {
+        participants: [],
+    }
+
+    peer = null
+
+    viewsRef = React.createRef()
+
+    selfVideoRef = React.createRef()
+
+    componentDidMount = async () => {
+        this.initialize()
+    }
+
+    initialize = async () => {
+        const stream = await this.createMediaStream()
+
+        this.selfVideoRef.current.srcObject = stream
+    }
+
+    async createMediaStream() {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: {
+
+            },
+        })
+
+        return stream
+    }
+
+    render() {
+        return <div className="room">
+            <div
+                className={classnames(
+                    "room_views",
+                    {
+                        "one": this.state.participants.length === 0
+                    }
+                )}
+                ref={this.viewsRef}
+            >
+                <div className="participant_video">
+                    <video
+                        autoPlay
+                        muted
+                        playsInline
+                        ref={this.selfVideoRef}
+                    />
+                </div>
+
+                {
+                    this.state.participants.map((participant) => {
+                        return <div className="participant_video">
+                            <video
+                                autoPlay
+                                muted
+                                playsInline
+                                srcObject={participant.stream}
+                            />
+                        </div>
+                    })
+                }
+            </div>
+
+            <div className="text_room">
+                <LiveChat
+                    roomId={this.props.params.id}
+                />
+            </div>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/pages/callRoom/index.less b/packages/app/src/pages/callRoom/index.less
new file mode 100644
index 00000000..e3e92b7a
--- /dev/null
+++ b/packages/app/src/pages/callRoom/index.less
@@ -0,0 +1,46 @@
+.room {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+
+    gap: 30px;
+    
+    .room_views {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: space-evenly;
+
+        width: 100%;
+
+        height: 30vh;
+
+        padding: 20px 50px;
+
+        background-color: var(--background-color-accent);
+
+        border-radius: 12px;
+
+        &.one {
+            justify-content: center;
+        }
+
+        .participant_video {
+            height: 100%;
+
+            video {
+                border-radius: 8px;
+
+                height: 100%;
+            }
+        }
+    }
+
+    .text_room {
+        border-radius: 12px;
+        padding: 0 20px;
+    }
+}
\ No newline at end of file