diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 4778976b..9507cfe1 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -201,7 +201,9 @@ export default function Navigation() {
                     <div className="flex gap-4">
                       <img src={Message} className="ml-2 w-5"></img>
                       <p className="my-auto text-eerie-black">
-                        {conversation.name}
+                        {conversation.name.length > 45
+                          ? conversation.name.substring(0, 45) + '...'
+                          : conversation.name}
                       </p>
                     </div>