diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index 2bc17201..d272b960 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -3,7 +3,17 @@ import { boolean } from "boolean";
 import NextLink from "next/link";
 import { FlaggableElement } from "../FlaggableElement";
 
-export function MessageTableEntry({ item, idx }) {
+interface Message {
+  text: string;
+  id: string;
+  is_assistant: boolean;
+}
+interface MessageTableEntryProps {
+  item: Message;
+  idx: number;
+}
+export function MessageTableEntry(props: MessageTableEntryProps) {
+  const { item, idx } = props;
   const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
 
   return (
diff --git a/website/src/pages/api/messages/[id]/children.ts b/website/src/pages/api/messages/[id]/children.ts
new file mode 100644
index 00000000..9c8fb84a
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/children.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/conversation.ts b/website/src/pages/api/messages/[id]/conversation.ts
new file mode 100644
index 00000000..6fa8feb9
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/conversation.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/index.ts b/website/src/pages/api/messages/[id]/index.ts
new file mode 100644
index 00000000..8e056532
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/index.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+  const message = await messageRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(message);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/[id]/parent.ts b/website/src/pages/api/messages/[id]/parent.ts
new file mode 100644
index 00000000..05a69cfa
--- /dev/null
+++ b/website/src/pages/api/messages/[id]/parent.ts
@@ -0,0 +1,48 @@
+import { getToken } from "next-auth/jwt";
+
+const handler = async (req, res) => {
+  const token = await getToken({ req });
+
+  // Return nothing if the user isn't registered.
+  if (!token) {
+    res.status(401).end();
+    return;
+  }
+
+  const { id } = req.query;
+
+  if(!id){
+    res.status(400).end()
+    return;
+  }
+
+  const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+
+  const message = await messageRes.json();
+
+  if(!message.parent_id){
+    res.status(404).end();
+    return;
+  }
+
+  const parentRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${message.parent_id}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+      "Content-Type": "application/json",
+    },
+  });
+
+  const parent = await parentRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(parent);
+};
+
+export default handler;
diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.ts
similarity index 100%
rename from website/src/pages/api/messages/index.tsx
rename to website/src/pages/api/messages/index.ts
diff --git a/website/src/pages/api/messages/user.tsx b/website/src/pages/api/messages/user.ts
similarity index 100%
rename from website/src/pages/api/messages/user.tsx
rename to website/src/pages/api/messages/user.ts
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
new file mode 100644
index 00000000..8816fcba
--- /dev/null
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -0,0 +1,80 @@
+import { Box, Container, Flex, HStack, useColorModeValue } from "@chakra-ui/react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import useSWRImmutable from "swr/immutable";
+
+import fetcher from "src/lib/fetcher";
+import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
+import { colors } from "styles/Theme/colors";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+
+const MessageDetail = () => {
+  const bg = useColorModeValue("white", colors.dark.bg);
+  const router = useRouter()
+  const { id } = router.query
+  const [message, setMessage] = useState(null);
+  const [parent, setParent]= useState(null);
+  const [children, setChildren] = useState(null);
+
+  const { isLoading } = useSWRImmutable(`/api/messages/${id}`, fetcher, {
+    onSuccess: (data) => {
+      setMessage(data);
+    },
+  });
+
+  const { isLoading: isLoadingChildren } = useSWRImmutable(`/api/messages/${id}/children`, fetcher, {
+    onSuccess: (data) => {
+      setChildren(data);
+    },
+  });
+
+  const { isLoading: isLoadingParent } = useSWRImmutable(`/api/messages/${id}/parent`, fetcher, {
+
+    onSuccess: (data) => {
+      console.log(data);
+      setParent(data);
+    },
+    onError: (err, key, config) => {
+      console.log(parent);
+    }
+  });
+
+  if (isLoading || isLoadingChildren || isLoadingParent) {
+    return <LoadingScreen text="Loading..." />;
+  }
+  return <>
+    <Head>
+      <title>Open Assistant</title>
+      <meta
+        name="description"
+        content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+      />
+    </Head>
+    <main>
+      <Container>
+      {parent && 
+        <Box my="3" bg={bg} rounded='lg' p="4">
+            <MessageTableEntry item={parent} idx={1} />
+          </Box>
+        }
+        {message &&
+          <Box my="3" bg={bg} rounded='lg' p="4">
+            <MessageTableEntry item={message} idx={1} />
+          </Box>
+        }
+          </Container>
+          {children && Array.isArray(children) &&
+          <HStack spacing={8} alignItems="start">
+            {children.map((item, idx) =>
+              <Box bg={bg} rounded='lg' flex="1" p="4">
+                <MessageTableEntry item={item} idx={idx * 2} />
+              </Box>
+          )}
+          </HStack>
+          }
+    </main>
+  </>
+}
+
+export default MessageDetail;
\ No newline at end of file