diff --git a/src/components/chat/ChatList.tsx b/src/components/chat/ChatList.tsx
new file mode 100644
index 0000000..6c7752c
--- /dev/null
+++ b/src/components/chat/ChatList.tsx
@@ -0,0 +1,28 @@
+import {Chat, User} from '@prisma/client';
+import ChatListItem from '@/components/chat/ChatListItem';
+import {useEffect, useState} from 'react';
+
+type Props = {
+  user: User
+}
+
+export default function ChatList({user}: Props) {
+  const [chats, setChats] = useState<(Chat & { User: User[] })[]>([]);
+
+  useEffect(() => {
+    fetch(`/api/chats?where=${JSON.stringify(
+        {id: {'$in': user.ChatID}})}&include=User`)
+        .then(res => res.json())
+        .then(data => setChats(data))
+        .catch(err => console.error(err));
+  }, []);
+
+  return (
+      <>
+        {chats.map(
+            (chat: Chat & { User: User[] }, index: number) =>
+                <ChatListItem key={index} chat={chat} user={user}/>)
+        }
+      </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/ChatListItem.tsx b/src/components/chat/ChatListItem.tsx
new file mode 100644
index 0000000..0c223a0
--- /dev/null
+++ b/src/components/chat/ChatListItem.tsx
@@ -0,0 +1,26 @@
+import {Chat, User} from '@prisma/client';
+import {Box, Flex, Image, Text} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+
+type Props = {
+  user: User,
+  chat: Chat & {User: User[]}
+};
+
+export default function ChatListItem({user, chat}: Props) {
+  const router = useRouter();
+  const otherUser = chat.User.find((u: User) => u.id !== user.id) as User
+
+  console.log(chat);
+
+  return (
+      <>
+        <Flex cursor={"pointer"} onClick={() => router.push(`/chat/${chat.id}`)}>
+          <Image borderRadius={'full'} boxSize='50px' src={otherUser.images[0] ?? "/blank_profile_picture.webp"}/>
+          <Box>
+            <Text>{otherUser.firstName} {otherUser.lastName}</Text>
+          </Box>
+        </Flex>
+      </>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index 013d516..25c808a 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -1,20 +1,14 @@
-import {Button} from '@chakra-ui/react';
 import {useSession} from 'next-auth/react';
-import {useRouter} from 'next/router';
+import ChatList from '@/components/chat/ChatList';
+import LoadingPage from '@/components/LoadingPage';
+import {User} from '@prisma/client';
 
 export default function Chat() {
-  const router = useRouter();
-  const {data: session, status} = useSession();
+  const {data: session, status} = useSession({required: true});
 
+  if (status === 'loading') return <LoadingPage/>;
   if (session)
     return (
-        <>
-          {session.user.ChatID.map(
-              (id: string, index: number) => (
-                  <Button key={index} onClick={() =>
-                      router.push(`/chat/${id}`)}>{id}</Button>
-              ),
-          )}
-        </>
+        <ChatList user={session.user as User}/>
     );
 }
\ No newline at end of file