diff --git a/api/src/main.ts b/api/src/main.ts
index b1aa046..f24cdb3 100644
--- a/api/src/main.ts
+++ b/api/src/main.ts
@@ -3,6 +3,6 @@ import { AppModule } from "./modules/app/app.module";
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
-  await app.listen(process.env.PORT ?? 3001);
+  await app.listen(process.env.PORT ?? 3000);
 }
 bootstrap();
diff --git a/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx b/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx
new file mode 100644
index 0000000..fa582ad
--- /dev/null
+++ b/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx	
@@ -0,0 +1,68 @@
+import { MainTag } from "@/components/atoms";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { MoreVerticalIcon, Phone, PhoneCallIcon, VideoIcon } from "lucide-react";
+import { Input } from "../../../../components/ui/input";
+import { Button } from "../../../../components/ui/button";
+
+interface Props {
+  params: Promise<{ id: string }>;
+}
+
+export default async function ChatPage(props: Props) {
+  const { id } = await props.params;
+
+  return (
+    <MainTag className="w-full flex flex-col justify-between p-4 ">
+      <div className="cursor-pointer flex justify-between items-center  border-b">
+        <div className="flex items-center gap-2">
+          <Avatar className="w-10 h-10 rounded-full">
+            <AvatarImage
+              src="https://github.com/shadcn.png"
+              alt="@shadcn"
+              className="w-10 h-10  rounded-full"
+            />
+            <AvatarFallback>AN</AvatarFallback>
+          </Avatar>
+
+          <div className="flex flex-col leading-tight">
+            <h4 className="font-semibold text-app-text-dark-500">Van</h4>
+            <p className="text-sm text-app-text-dark-300 truncate">
+              <span>Online</span> &minus; <span>Last Seen </span>
+              <span>2:30pm</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 text-app-blue-500">
+          <Phone />
+          <VideoIcon />
+          <MoreVerticalIcon />
+        </div>
+      </div>
+
+      <div className="flex flex-col">
+        {/* Send */}
+        <div className="flex-1">
+          <div className="flex flex-col items-start">
+            <div className="bg-gray-200 text-app-text-dark-500 py-2 px-4 rounded-lg">
+              Hey There!
+            </div>
+            <span className="text-xs text-gray-400">Today, 8.30pm</span>
+          </div>
+
+          {/* Receive */}
+
+          <div className="flex flex-col items-end">
+            <div className="bg-app-blue-500 text-white py-2 px-4 rounded-lg">Hello!</div>
+            <span className="text-xs text-gray-400 mt-1">Today, 8.33pm</span>
+          </div>
+        </div>
+
+        <div className="flex items-center">
+          <Input placeholder="Type your message here..." />
+          <Button>Send</Button>
+        </div>
+      </div>
+    </MainTag>
+  );
+}
diff --git a/web/src/core/features/pages/chats/chat-page/chat-page.tsx b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
index c933d42..bb752d9 100644
--- a/web/src/core/features/pages/chats/chat-page/chat-page.tsx
+++ b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
@@ -1,11 +1,27 @@
+// "use client"
+
 import type { Chat, Message } from "@/interfaces/chat.types";
 import { MainTag } from "@/components/atoms";
 import { Fetcher } from "@/lib/fetch";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { getInitials, getProfileURLFromInitials } from "@/lib/utils";
 
 interface Props {
   params: Promise<{ id: string }>;
 }
 
+
+
+// const messageCard = () => {
+//   return (
+//     <div>
+//       <div>
+
+//       </div>
+//     </div>
+//   )
+// }
+
 export default async function ChatPage(props: Props) {
   const { id } = await props.params;
 
@@ -16,11 +32,28 @@ export default async function ChatPage(props: Props) {
     chat: Chat;
   }>(`/api/chats/${id}`);
 
+  console.log(messages, 'yo')
+
+  const getPhoto = () => {
+    return chat.profileImg.url || getProfileURLFromInitials(chat.name);
+  }
+
   return (
     <MainTag className="w-full h-[95vh] p-3 overflow-y-auto">
-      Chats Page Loading messages with id: {id}
-      {JSON.stringify(props, null, 4)}
-      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      <div className="bg-app-blue-500 flex items-center gap-2 p-4">
+        <Avatar>
+          <AvatarImage src={getPhoto()} alt={chat.name} />
+          <AvatarFallback>
+            {getInitials(chat.name)}
+          </AvatarFallback>
+        </Avatar>
+        {/* <div className="w-8 h-8 bg-gray-300 rounded-full mr-3"></div> */}
+        <div>
+          <h2 className="text-lg font-bold">{chat.name}</h2>
+          <p className="">{ }</p>
+        </div>
+      </div>
+
     </MainTag>
   );
 }
diff --git a/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx b/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
index 7d9921e..daf3393 100644
--- a/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
+++ b/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
@@ -9,7 +9,7 @@ async function ChatList() {
     <>
       <h2 className="mb-4 font-semibold">Inbox</h2>
 
-      {chats.map((c) => (
+      {chats?.map((c) => (
         <ChatCard key={c.id} chat={c} />
       ))}
     </>