diff --git a/api/main.py b/api/main.py
index 2b69a76..ab0097f 100644
--- a/api/main.py
+++ b/api/main.py
@@ -146,13 +146,23 @@ async def ask_a_question(chat_id: str, prompt: str):
 
 
 @app.get("/chats", tags=["chats"])
-async def get_all_chats_id():
+async def get_all_chats():
     res = []
 
     for i in (
         await Chat.find_all().sort((Chat.created, SortDirection.DESCENDING)).to_list()
     ):
         await i.fetch_link(Chat.parameters)
-        res.append({"id": i.id, "created": i.created, "model": i.parameters.model})
+        await i.fetch_link(Chat.questions)
+
+        first_q = i.questions[0].question if i.questions else ""
+        res.append(
+            {
+                "id": i.id,
+                "created": i.created,
+                "model": i.parameters.model,
+                "subtitle": first_q,
+            }
+        )
 
     return res
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 88990c7..5e8fa68 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
   import "../app.css";
   import type { LayoutData } from "./$types";
-
-  import Icon from "@iconify/svelte";
-
   export let data: LayoutData;
 
   function timeSince(datestring: string) {
@@ -33,6 +30,10 @@
     }
     return Math.floor(seconds) + " seconds";
   }
+
+  function truncate(str: string, n: number) {
+    return str.length > n ? str.slice(0, n - 1) + "..." : str;
+  }
 </script>
 
 <aside
@@ -51,8 +52,13 @@
             href={"/chat/" + chat.id}
             class="flex items-center p-2 text-base font-normal rounded-lg hover:bg-gray-700"
           >
-            <span class="font-semibold">{chat.model}</span>
-            <span class="ml-3">{timeSince(chat.created) + " ago"}</span>
+            <div class="flex flex-col">
+              <div>
+                <span class="font-semibold">{chat.model}</span>
+                <span class="ml-3">{timeSince(chat.created) + " ago"}</span>
+              </div>
+              <p class="font-light text-sm">{truncate(chat.subtitle, 100)}</p>
+            </div>
           </a>
         </li>
       {/each}
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index 16c6a45..8529a11 100644
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -4,6 +4,7 @@ type t = {
   id: string;
   created: string;
   model: string;
+  subtitle: string;
 };
 
 export const load: LayoutLoad = async ({ fetch }) => {