diff --git a/src/components/HotelContext.jsx b/src/components/HotelContext.jsx
index fc3d891..c3c2f07 100644
--- a/src/components/HotelContext.jsx
+++ b/src/components/HotelContext.jsx
@@ -23,20 +23,31 @@ export function HotelProvider({ accessToken, children }) {
     return res.json();
   }
 
-async function updateRoomStatus(roomId, status) {
-  await fetch(`${API_BASE}/rooms/clean_db_update/${roomId}`, {
-    method: "PUT",
-    headers: {
-      Authorization: `Bearer ${accessTokenSingle}`,
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ status }),
-  });
+  async function updateRoomStatus(roomId, status) {
+    await fetch(`${API_BASE}/rooms/clean_db_update/${roomId}`, {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ status }),
+    });
 
-  // refresh cached rooms
-  const updated = await fetchRooms();
-  setRooms(updated);
-}
+    // refresh cached rooms
+    const updated = await fetchRooms();
+    setRooms(updated);
+  }
+
+  async function fetchHotelUsers() {
+    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
+      method: "POST",
+      headers: { 
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json", 
+      },
+    });
+    return res.json();
+  }
 
   async function fetchConversations() {
     const res = await fetch(`${API_BASE}/chat/get_conv`, {
@@ -53,13 +64,30 @@ async function updateRoomStatus(roomId, status) {
     return res.json();
   }
 
-  async function fetchHotelUsers() {
-    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
-      headers: { Authorization: `Bearer ${accessTokenSingle}` },
+  async function fetchMessages({ conv_id }) {
+
+    const payload = {
+    conv_id,
+    timestamp: "2025-09-25 11:05:33",
+    };
+
+    console.log(JSON.stringify(payload));
+
+    const res = await fetch(`${API_BASE}/chat/get_message`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
     });
-    return res.json();
+
+    return res;
+    
+    //return res.json
   }
 
+
   // --- INITIAL DATA LOADING ---
   useEffect(() => {
     if (!accessToken) return;
@@ -68,12 +96,12 @@ async function updateRoomStatus(roomId, status) {
       const [roomsData, convData, usersData] = await Promise.all([
         fetchRooms(),
         fetchConversations(),
-        //fetchHotelUsers(),
+        fetchHotelUsers(),
       ]);
 
       setRooms(roomsData);
       setConversations(convData);
-      //setUsers(usersData);
+      setUsers(usersData);
     }
 
     load();
@@ -86,6 +114,7 @@ async function updateRoomStatus(roomId, status) {
         conversations,
         users,
         updateRoomStatus,
+        fetchMessages,
       }}
     >
       {children}
diff --git a/src/components/MainApp.jsx b/src/components/MainApp.jsx
index ee7d509..46dfbc4 100644
--- a/src/components/MainApp.jsx
+++ b/src/components/MainApp.jsx
@@ -1,6 +1,8 @@
 import { HotelProvider, useHotel } from "./HotelContext";
 import RoomWidget from "./widget/roomWidget"
+import ChatWidget from "./widget/chatWidget"
 
+import "./MainApp.css"
 
 export default function MainAppWrapper() {
   const accessToken = localStorage.getItem("access_tokens");
@@ -22,15 +24,15 @@ function MainApp() {
 
       <h2>Access token</h2>
       <pre>{accessToken}</pre>
+      <h3>Rooms: {rooms.length}</h3>
+      <h3>Conversations: {conversations.length}</h3>
+      <h3>Users: {users.length}</h3>
+      <h2>Dashboard</h2>
+      <section className="main">
 
-      <section>
-        <h2>Dashboard</h2>
-        <ul>
-          <li>Rooms: {rooms.length}</li>
-          <RoomWidget roomlist={rooms}/> 
-          <li>Conversations: {conversations.length}</li>
-          <li>Users: {users.length}</li>
-        </ul>
+        <RoomWidget roomlist={rooms}/> 
+        <ChatWidget convlist={conversations}/> 
+          
       </section>
     </div>
   );
diff --git a/src/components/Mainapp.css b/src/components/Mainapp.css
new file mode 100644
index 0000000..abca177
--- /dev/null
+++ b/src/components/Mainapp.css
@@ -0,0 +1,6 @@
+.main {
+
+    display: flex;
+    justify-content: space-around;
+    background-color: rgb(160, 149, 199);
+}
\ No newline at end of file
diff --git a/src/components/widget/ConvWiget.jsx b/src/components/widget/ConvWiget.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/widget/RoomWidget.css b/src/components/widget/RoomWidget.css
index 6e7ca97..fd4d341 100644
--- a/src/components/widget/RoomWidget.css
+++ b/src/components/widget/RoomWidget.css
@@ -1,11 +1,14 @@
 .grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  display: flex;
+  justify-items: space-around;
   gap: 1px;
     background-color: #777777;
 }
 
 .card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
   gap: 1px;
     background-color: #a3a3a3;
     padding: 5px;
diff --git a/src/components/widget/chatWidget.css b/src/components/widget/chatWidget.css
new file mode 100644
index 0000000..d7acf47
--- /dev/null
+++ b/src/components/widget/chatWidget.css
@@ -0,0 +1,11 @@
+.convcard {
+    background-color: brown;
+}
+
+.convlist {
+    
+    display: flex;
+    flex-direction: column;
+    align-items: right;
+    background-color: darkcyan;
+}
\ No newline at end of file
diff --git a/src/components/widget/chatWidget.jsx b/src/components/widget/chatWidget.jsx
new file mode 100644
index 0000000..20d1d4a
--- /dev/null
+++ b/src/components/widget/chatWidget.jsx
@@ -0,0 +1,40 @@
+import { useHotel } from "../HotelContext";
+import { useState } from "react";
+
+//import {fetchMessage} from .
+
+import "./chatWidget.css"
+
+export default function ChatWidget({convlist}) {
+
+
+
+    return (
+        <div className="convlist">
+            {convlist.map(conv => (
+                <ConvCard
+                key={conv.id}
+                id={conv.id}
+                title={conv.title}
+                />
+            ))}
+        </div>
+    );
+}
+
+function ConvCard({id, title}) {
+
+    const {fetchMessages} = useHotel();
+
+    return(
+    <div className="convcard">
+    <h3>ConvId : {id} </h3>
+    <h3>Name : {title}</h3>
+    <p onClick={() => fetchMessages({conv_id: 4})}> GET MESSAAGE</p>
+    </div>
+    )
+}
+
+function MessagesBox({id}) {
+
+}
\ No newline at end of file
diff --git a/src/components/widget/roomWidget.jsx b/src/components/widget/roomWidget.jsx
index 614ee32..e3fd2e2 100644
--- a/src/components/widget/roomWidget.jsx
+++ b/src/components/widget/roomWidget.jsx
@@ -19,50 +19,50 @@ export default function RoomWidget({ roomlist }) {
 }
 
 function RoomCard({ number, status ,id}) {
-const { updateRoomStatus } = useHotel();
-const [editing, setEditing] = useState(false);
-const [value, SetValue] = useState(status);
-
+  
+  const { updateRoomStatus } = useHotel();
+  const [editing, setEditing] = useState(false);
+  const [value, SetValue] = useState(status);
 
   function submit() {
     updateRoomStatus(id,value);
     setEditing(false);
   }
 
-        return (
-            <div className="card">
-            <h3>Room {number}</h3>
-            <h4>Id {id}</h4>
+  return (
+      <div className="card">
+      <h3>Room {number}</h3>
+      <h4>Id {id}</h4>
 
-            {!editing ?(
-              <p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
-                Status: {status}
-              </p>
-            ): (
-              <div>
-                <input
-                type="text"
-                value={value}
-                autoFocus
-                onChange={e => SetValue(e.target.value)}
-                onKeyDown={e => e.key === "Enter" && submit()}
-                />
-              </div>
-            )}
+      {!editing ?(
+        <p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
+          Status: {status}
+        </p>
+      ): (
+        <div>
+          <input
+          type="text"
+          value={value}
+          autoFocus
+          onChange={e => SetValue(e.target.value)}
+          onKeyDown={e => e.key === "Enter" && submit()}
+          />
+        </div>
+      )}
 
 
-            <div className="actions">
-              <button onClick={() => updateRoomStatus(id, "clean")}>
-                Mark Clean
-              </button>
+      <div className="actions">
+        <button onClick={() => updateRoomStatus(id, "clean")}>
+          Mark Clean
+        </button>
 
-              <button onClick={() => updateRoomStatus(id, "dirty")}>
-                Mark Dirty
-              </button>
-            </div>
+        <button onClick={() => updateRoomStatus(id, "dirty")}>
+          Mark Dirty
+        </button>
+      </div>
 
-            </div>
-        );
+      </div>
+  );
 }
 
 //export default roomWidget
\ No newline at end of file