diff --git a/app/src/pages/Chat.tsx b/app/src/pages/Chat.tsx
index 4884adf72..a9f833eda 100644
--- a/app/src/pages/Chat.tsx
+++ b/app/src/pages/Chat.tsx
@@ -18,6 +18,9 @@ import { patchGetOrJoinRoom } from "../api/chat";
 import { Client4, WebSocketClient, WebSocketMessage } from "@mattermost/client";
 import { Sleep } from "../utils/sleep";
 import { Post, PostList } from "@mattermost/types/posts";
+import { addOutline } from "ionicons/icons";
+import { userGetAllByChain } from "../api/user";
+import { User } from "../api/types";
 
 const VITE_CHAT_URL = import.meta.env.VITE_CHAT_URL;
 
@@ -44,7 +47,9 @@ export default function Chat() {
   const [mmWsClient, setMmWsClient] = useState<WebSocketClient | null>(null);
   const [message, setMessage] = useState("");
   const [sendingMsg, setSendingMsg] = useState(SendingMsgState.DEFAULT);
+  const [chatRooms, setChatRooms] = useState<User[] | null>(null);
   const [mmClient, setMmClient] = useState<Client4 | null>(null);
+
   const [postList, setPostList] = useState<PostList>({
     order: [],
     posts: {},
@@ -101,6 +106,7 @@ export default function Chat() {
         setMmData(_mmData);
       });
     }
+    getUsersChatrooms();
   }, [mmData, chain]);
 
   async function handlePostedMessage(
@@ -163,6 +169,21 @@ export default function Chat() {
     }
   }
 
+  async function getUsersChatrooms() {
+    if (authUser) {
+      try {
+        let _users = (
+          await Promise.all(
+            authUser.chains.map((uc) => userGetAllByChain(uc.chain_uid)),
+          )
+        ).map((d) => d.data);
+        setChatRooms(_users[0]);
+      } catch (err: any) {
+        console.error("Unable to load chains", err);
+      }
+    }
+  }
+
   return (
     <IonPage>
       <IonHeader translucent>
@@ -174,59 +195,86 @@ export default function Chat() {
       </IonHeader>
       <IonContent
         fullscreen
-        class={isThemeDefault ? " tw-bg-purple-contrast" : ""}
+        class={isThemeDefault ? "tw-bg-purple-contrast" : ""}
       >
-        <div className="tw-flex tw-flex-col tw-h-full">
-          <div className="tw-flex-grow tw-overflow-y-auto tw-flex tw-flex-col-reverse">
-            {postList.order.map((item) => {
-              let post = postList.posts[item];
-              return (
-                <div>
-                  <IonItem
-                    color="light"
-                    key={post.id}
-                    className={`tw-rounded-tl-2xl tw-rounded-tr-2xl tw-mb-2 ${
-                      post.user_id == authUser?.uid
-                        ? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
-                        : "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
-                    }`}
-                  >
-                    <div className="tw-py-2">
-                      <div className="tw-font-bold">{post.props.username}</div>
-                      <div>{post.message}</div>
+        <div className="tw-relative tw-h-full">
+          <div className="tw-fixed tw-z-10 tw-w-full tw-bg-[#f4f1f9]">
+            <div className="tw-flex tw-ml-5 tw-mb-2 tw-mt-2 tw-overflow-x-auto">
+              <div className="tw-rounded-full tw-w-14 tw-h-14 tw-mr-4 tw-bg-purple-shade tw-flex tw-items-center tw-justify-center">
+                <IonIcon className="tw-text-2xl" src={addOutline} />
+              </div>
+              {chatRooms?.map((cr) => {
+                let initials = cr.name
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("");
+                return (
+                  <div className="tw-mr-4 tw-w-14">
+                    <div className="tw-shrink-0 tw-rounded-full tw-h-14 tw-bg-purple-shade tw-flex tw-items-center tw-justify-center">
+                      <div className="tw-font-bold">{initials}</div>
                     </div>
-                  </IonItem>
-                </div>
-              );
-            })}
+                    <div className="tw-text-xs tw-text-center tw-truncate">
+                      {cr.name}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
           </div>
-          <div>
-            <IonItem
-              color="light"
-              disabled={sendingMsg == SendingMsgState.SENDING}
-            >
-              <IonInput
-                placeholder="Send Message"
-                value={message}
-                disabled={sendingMsg == SendingMsgState.SENDING}
-                onIonInput={(e) => setMessage(e.detail.value as string)}
-                className="tw-ml-2"
-              />
-              <IonButton
-                slot="end"
-                onClick={sendMessage}
-                shape="round"
-                disabled={message == ""}
+          <div className="tw-flex tw-flex-col tw-absolute tw-bottom-0 tw-max-h-[75vh]">
+            <div className="tw-flex-grow tw-overflow-y-auto tw-flex tw-flex-col-reverse">
+              {postList.order.map((item) => {
+                let post = postList.posts[item];
+                return (
+                  <div>
+                    <IonItem
+                      color="light"
+                      key={post.id}
+                      className={`tw-rounded-tl-2xl tw-rounded-tr-2xl tw-mb-2 ${
+                        post.user_id == authUser?.uid
+                          ? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
+                          : "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
+                      }`}
+                    >
+                      <div className="tw-py-2">
+                        <div className="tw-font-bold">
+                          {post.props.username}
+                        </div>
+                        <div>{post.message}</div>
+                      </div>
+                    </IonItem>
+                  </div>
+                );
+              })}
+            </div>
+            <div>
+              <IonItem
                 color="light"
-                className="tw-mr-0"
+                disabled={sendingMsg == SendingMsgState.SENDING}
               >
-                <IonIcon
-                  icon={sendOutline}
-                  color="primary"
-                  className="tw-text-2xl"
+                <IonInput
+                  placeholder="Send Message"
+                  value={message}
+                  disabled={sendingMsg == SendingMsgState.SENDING}
+                  onIonInput={(e) => setMessage(e.detail.value as string)}
+                  className="tw-ml-2"
                 />
-              </IonButton>
-            </IonItem>
+                <IonButton
+                  slot="end"
+                  onClick={sendMessage}
+                  shape="round"
+                  disabled={message == ""}
+                  color="light"
+                  className="tw-mr-0"
+                >
+                  <IonIcon
+                    icon={sendOutline}
+                    color="primary"
+                    className="tw-text-2xl"
+                  />
+                </IonButton>
+              </IonItem>
+            </div>
           </div>
         </div>
       </IonContent>