diff --git a/client/src/app/[id]/page.tsx b/client/src/app/[id]/page.tsx
deleted file mode 100644
index a2f3d21..0000000
--- a/client/src/app/[id]/page.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-import useDebounce from "@/hook/useDebounce";
-import API from "@/lib/api";
-import socket from "@/lib/socket";
-import {
-  saveDocumentLocally,
-  getLocalDocument,
-  deleteLocalDocument,
-} from "@/lib/db";
-
-export default function Page({ params }: { params: { id: string } }) {
-  const { id } = params;
-  const [participants, setParticipants] = useState<string[]>([]);
-  const [message, setMessage] = useState<string>("");
-  const [messages, setMessages] = useState<string[]>([]);
-  const [content, setContent] = useState<string>("");
-  const [isOffline, setIsOffline] = useState<boolean>(false);
-  const debouncedContent = useDebounce(content, 500);
-
-  const handleOnline = () => setIsOffline(false);
-  const handleOffline = () => setIsOffline(true);
-
-  const fetchDocument = async () => {
-    try {
-      const localData = await getLocalDocument(id);
-      if (localData) {
-        setContent(localData.content);
-        setIsOffline(true);
-      } else {
-        const { data } = await API.get(`/api/document/${id}`);
-        setContent(data.content);
-      }
-    } catch (error) {
-      console.error("Failed to fetch document:", error);
-    }
-  };
-
-  const handleChangeContent = (value: string) => {
-    setContent(value);
-    socket.emit("edit-document", id, value);
-  };
-
-  const sendMessage = () => {
-    socket.emit("send-message", message);
-    setMessages((prevMessages) => [...prevMessages, message]);
-    setMessage("");
-  };
-
-  const syncData = async () => {
-    if (!isOffline) {
-      const localData = await getLocalDocument(id);
-      if (localData) {
-        try {
-          await API.put(`/api/document/${id}`, { content: localData.content });
-          await deleteLocalDocument(id);
-          toast.success("Changes synced with server");
-        } catch (error) {
-          console.error("Failed to sync with server: ", error);
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    fetchDocument();
-
-    window.addEventListener("online", handleOnline);
-    window.addEventListener("offline", handleOffline);
-
-    return () => {
-      window.removeEventListener("online", handleOnline);
-      window.removeEventListener("offline", handleOffline);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  useEffect(() => {
-    if (debouncedContent) {
-      if (isOffline) {
-        saveDocumentLocally(id, debouncedContent);
-      } else {
-        API.put(`/api/document/${id}`, { content: debouncedContent })
-          .then(() => {
-            deleteLocalDocument(id);
-          })
-          .catch((error) => {
-            console.error("Failed to save document: ", error);
-            saveDocumentLocally(id, debouncedContent);
-          });
-      }
-    }
-  }, [debouncedContent, isOffline, id]);
-
-  useEffect(() => {
-    socket.on("update-participants", (participants: string[]) => {
-      setParticipants(participants);
-    });
-
-    return () => {
-      socket.off("update-participants");
-    };
-  }, []);
-
-  useEffect(() => {
-    socket.on("receive-message", (message: string) => {
-      toast("New message received");
-      setMessages((prevMessages) => [...prevMessages, message]);
-    });
-
-    return () => {
-      socket.off("receive-message");
-    };
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("online", syncData);
-
-    return () => {
-      window.removeEventListener("online", syncData);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, isOffline]);
-
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold">Editing Document</h1>
-      {isOffline && (
-        <div className="bg-yellow-300 text-yellow-900 p-2 mb-2 rounded">
-          You are offline. Changes will be synced when you are back online.
-        </div>
-      )}
-      <textarea
-        className="border p-2 w-full h-64"
-        value={content}
-        onChange={(e) => handleChangeContent(e.target.value)}
-      />
-      <h2 className="text-lg font-bold">Participants</h2>
-      <ul>
-        {participants.map((participant, index) => (
-          <li key={index} className="text-gray-700">
-            {participant}
-          </li>
-        ))}
-      </ul>
-      <h2 className="text-lg font-bold">Chat</h2>
-      <div className="bg-gray-100 p-4 h-64 overflow-y-scroll">
-        {messages.map((msg, index) => (
-          <div key={index} className="text-gray-800">
-            {msg}
-          </div>
-        ))}
-      </div>
-      <input
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        className="border p-2 w-full mt-2"
-        placeholder="Type a message..."
-      />
-      <button onClick={sendMessage} className="bg-blue-500 text-white p-2 mt-2">
-        {" "}
-        Send
-      </button>
-    </div>
-  );
-}
diff --git a/client/src/components/Chat/index.tsx b/client/src/components/Chat/index.tsx
new file mode 100644
index 0000000..464da65
--- /dev/null
+++ b/client/src/components/Chat/index.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import socket from "@/lib/socket";
+
+interface ChatProps {
+  id: string;
+}
+
+export default function Chat({ id }: ChatProps) {
+  const [message, setMessage] = useState<string>("");
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const sendMessage = () => {
+    socket.emit("send-message", message);
+    setMessages((prevMessages) => [...prevMessages, message]);
+    setMessage("");
+  };
+
+  useEffect(() => {
+    socket.on("receive-message", (message: string) => {
+      toast("New message received");
+      setMessages((prevMessages) => [...prevMessages, message]);
+    });
+
+    return () => {
+      socket.off("receive-message");
+    };
+  }, [id]);
+
+  return (
+    <div>
+      <h2 className="text-lg font-bold">Chat</h2>
+      <div className="bg-gray-100 p-4 h-64 overflow-y-scroll">
+        {messages.map((msg, index) => (
+          <div key={index} className="text-gray-800">
+            {msg}
+          </div>
+        ))}
+      </div>
+      <input
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        className="border p-2 w-full mt-2"
+        placeholder="Type a message..."
+      />
+      <button onClick={sendMessage} className="bg-blue-500 text-white p-2 mt-2">
+        Send
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/components/DocumentEditor/index.tsx b/client/src/components/DocumentEditor/index.tsx
index affc877..7dee2e5 100644
--- a/client/src/components/DocumentEditor/index.tsx
+++ b/client/src/components/DocumentEditor/index.tsx
@@ -1,30 +1,86 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
-import dynamic from "next/dynamic";
-import "react-quill/dist/quill.snow.css";
-
-const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
-  ssr: false,
-  loading: () => <p>Loading...</p>,
-});
+import { useEffect, useState } from "react";
+import QuillEditor from "@/components/QuillEditor";
+import useDebounce from "@/hook/useDebounce";
+import API from "@/lib/api";
+import socket from "@/lib/socket";
+import {
+  saveDocumentLocally,
+  getLocalDocument,
+  deleteLocalDocument,
+} from "@/lib/db";
 
 interface DocumentEditorProps {
-  content: string;
-  onChange: (value: string) => void;
+  id: string;
 }
 
-export default function DocumentEditor({
-  content,
-  onChange,
-}: DocumentEditorProps) {
+export default function DocumentEditor({ id }: DocumentEditorProps) {
+  const [content, setContent] = useState<string>("");
+  const [isOffline, setIsOffline] = useState<boolean>(false);
+  const debouncedContent = useDebounce(content, 500);
+
+  const handleOnline = () => setIsOffline(false);
+  const handleOffline = () => setIsOffline(true);
+
+  const fetchDocument = async () => {
+    try {
+      const localData = await getLocalDocument(id);
+      if (localData) {
+        setContent(localData.content);
+        setIsOffline(true);
+      } else {
+        const { data } = await API.get(`/api/document/${id}`);
+        setContent(data.content);
+      }
+    } catch (error) {
+      console.error("Failed to fetch document:", error);
+    }
+  };
+
+  const handleChangeContent = (value: string) => {
+    setContent(value);
+    socket.emit("edit-document", id, value);
+  };
+
+  useEffect(() => {
+    fetchDocument();
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [id]);
+
+  useEffect(() => {
+    if (debouncedContent) {
+      if (isOffline) {
+        saveDocumentLocally(id, debouncedContent);
+      } else {
+        API.put(`/api/document/${id}`, { content: debouncedContent })
+          .then(() => {
+            deleteLocalDocument(id);
+          })
+          .catch((error) => {
+            console.error("Failed to save document: ", error);
+            saveDocumentLocally(id, debouncedContent);
+          });
+      }
+    }
+  }, [debouncedContent, isOffline, id]);
+
   return (
     <div className="mt-4">
-      <QuillNoSSRWrapper
-        theme="snow"
-        value={content}
-        onChange={onChange}
-        className="bg-white p-2"
-      />
+      {isOffline && (
+        <div className="bg-yellow-300 text-yellow-900 p-2 mb-2 rounded">
+          You are offline. Changes will be synced when you are back online.
+        </div>
+      )}
+      <QuillEditor value={content} onChange={handleChangeContent} />
     </div>
   );
 }
diff --git a/client/src/components/ParticipantsList/index.tsx b/client/src/components/ParticipantsList/index.tsx
new file mode 100644
index 0000000..3f96ce4
--- /dev/null
+++ b/client/src/components/ParticipantsList/index.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import socket from "@/lib/socket";
+
+interface ParticipantsListProps {
+  id: string;
+}
+
+export default function ParticipantsList({ id }: ParticipantsListProps) {
+  const [participants, setParticipants] = useState<string[]>([]);
+
+  useEffect(() => {
+    socket.emit("join-document", id);
+
+    socket.on("update-participants", (participants: string[]) => {
+      setParticipants(participants);
+    });
+
+    return () => {
+      socket.off("update-participants");
+    };
+  }, [id]);
+
+  return (
+    <div>
+      <h2 className="text-lg font-bold">Participants</h2>
+      <ul>
+        {participants.map((participant, index) => (
+          <li key={index} className="text-gray-700">
+            {participant}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/components/QuillEditor/index.tsx b/client/src/components/QuillEditor/index.tsx
new file mode 100644
index 0000000..0fb2717
--- /dev/null
+++ b/client/src/components/QuillEditor/index.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import "react-quill/dist/quill.snow.css";
+
+const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
+  ssr: false,
+  loading: () => <p>Loading...</p>,
+});
+
+interface QuillEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function QuillEditor({ value, onChange }: QuillEditorProps) {
+  return (
+    <QuillNoSSRWrapper
+      theme="snow"
+      value={value}
+      onChange={onChange}
+      className="bg-white p-2"
+    />
+  );
+}
diff --git a/client/src/template/DocumentPage.tsx b/client/src/template/DocumentPage.tsx
index 97bdac3..61bfef8 100644
--- a/client/src/template/DocumentPage.tsx
+++ b/client/src/template/DocumentPage.tsx
@@ -6,6 +6,8 @@ import { useState, useEffect } from "react";
 
 import DocumentEditor from "@/components/DocumentEditor";
 import VersionHistory from "@/components/VersionHistory";
+import ParticipantsList from "@/components/ParticipantsList";
+import Chat from "@/components/Chat";
 import useDebounce from "@/hook/useDebounce";
 import socket from "@/lib/socket";
 import API from "@/lib/api";
@@ -51,11 +53,6 @@ export default function DocumentPage({ params }: DocumentPageProps) {
     }
   };
 
-  const handleChangeContent = (value: string) => {
-    setContent(value);
-    socket.emit("edit-document", id, value);
-  };
-
   useEffect(() => {
     if (!id) return;
 
@@ -85,13 +82,15 @@ export default function DocumentPage({ params }: DocumentPageProps) {
   return (
     <div className="p-4">
       <div className="flex justify-between items-center mb-4">
-        <h1 className="text-2xl font-bold">Document ID: {id}</h1>
+        <h1 className="text-2xl font-bold">Editing Document</h1>
+        <DocumentEditor id={id} />
+        <VersionHistory
+          versions={versions}
+          onRestore={restoreVersionOfDocument}
+        />
+        <ParticipantsList id={id} />
+        <Chat id={id} />
       </div>
-      <DocumentEditor content={content} onChange={handleChangeContent} />
-      <VersionHistory
-        versions={versions}
-        onRestore={restoreVersionOfDocument}
-      />
     </div>
   );
 }