diff --git a/frontend/src/app/chat/[roomId]/ChatBody.tsx b/frontend/src/app/chat/[roomId]/ChatBody.tsx
index fc6ff35..ee63d59 100644
--- a/frontend/src/app/chat/[roomId]/ChatBody.tsx
+++ b/frontend/src/app/chat/[roomId]/ChatBody.tsx
@@ -22,7 +22,7 @@ function Page() {
   }, []);
 
   return (
-    <div className="flex relative flex-col w-full h-screen space-x-2 space-y-2">
+    <div className="flex relative flex-col w-full h-screen">
       <ChatHeader roomId={roomId} />
       <ChatBody roomId={roomId} />
       <ChatFooter roomId={roomId} />
diff --git a/frontend/src/app/chat/[roomId]/page.tsx b/frontend/src/app/chat/[roomId]/page.tsx
index e92f092..eb2043c 100644
--- a/frontend/src/app/chat/[roomId]/page.tsx
+++ b/frontend/src/app/chat/[roomId]/page.tsx
@@ -27,7 +27,10 @@ function Page() {
   }, []);
 
   return (
-    <div className="flex relative flex-col w-full h-screen">
+    <div
+      className="flex relative flex-col w-full h-screen"
+      style={{ height: "calc(100vh - 1rem)" }}
+    >
       <ChatHeader roomId={roomId} />
       <ChatBody roomId={roomId} />
       <ChatFooter roomId={roomId} />
diff --git a/frontend/src/app/chat/layout.tsx b/frontend/src/app/chat/layout.tsx
index d025440..c7d434d 100644
--- a/frontend/src/app/chat/layout.tsx
+++ b/frontend/src/app/chat/layout.tsx
@@ -10,7 +10,7 @@ export default function RoomLayout({
   return (
     <RoomProvider>
       <SocketProvider>
-        <div className="flex h-screen space-x-2 space-y-2">
+        <div className="flex gap-2 m-2 overflow-auto">
           <RoomSideBar />
           {children}
         </div>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 3b84627..ec52c0b 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -17,7 +17,7 @@
 
 @layer utilities {
   body.dark {
-    background-color: #222222; /* same as bg-gray-800 */
+    background-color: #161616; /* same as bg-gray-800 */
   }
 }
 @layer base {
diff --git a/frontend/src/components/Chat/ChatBody.tsx b/frontend/src/components/Chat/ChatBody.tsx
index 57ae499..70d3232 100644
--- a/frontend/src/components/Chat/ChatBody.tsx
+++ b/frontend/src/components/Chat/ChatBody.tsx
@@ -81,7 +81,14 @@ function ChatBody({ roomId }: { roomId: string }) {
   }, [socket, roomId]);
 
   return (
-    <div style={{ flexGrow: 1, overflowY: "auto" }}>
+    <div
+      style={{
+        flexGrow: 1,
+        overflowY: "auto",
+        overflowX: "auto",
+        height: "calc(100vh - 60px)",
+      }}
+    >
       <div className="basis_[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar rounded-lg">
         {messages[roomId]?.map((message: any, index: number) => (
           <Message
diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
index 32225c6..68301bc 100644
--- a/frontend/src/components/Room/RoomSideBar.tsx
+++ b/frontend/src/components/Room/RoomSideBar.tsx
@@ -50,7 +50,10 @@ function RoomSideBar() {
   }, [showAddRoomPanel]);
 
   return (
-    <div className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg">
+    <div
+      className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg"
+      style={{ maxWidth: "25vw", height: "calc(100vh - 1rem)" }}
+    >
       <div className="flex justify-center">
         <button
           type="submit"