diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index e6c5bb64..4c5aac3a 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -32,6 +32,7 @@ import { useMediaQuery, useOutsideAlerter } from './hooks';
 import Upload from './upload/Upload';
 import { Doc, getConversations } from './preferences/preferenceApi';
 import SelectDocsModal from './preferences/SelectDocsModal';
+import ConversationTile from './conversation/ConversationTile';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -126,6 +127,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         );
       });
   };
+
+  function updateConversationName(updatedConversation: object) {
+    console.log(updatedConversation);
+  }
   useOutsideAlerter(
     navRef,
     () => {
@@ -210,41 +215,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </NavLink>
         <div className="conversations-container max-h-[25rem] overflow-y-auto">
           {conversations
-            ? conversations.map((conversation) => {
-                return (
-                  <div
-                    key={conversation.id}
-                    onClick={() => {
-                      handleConversationClick(conversation.id);
-                    }}
-                    className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
-                      conversationId === conversation.id ? 'bg-gray-100' : ''
-                    }`}
-                  >
-                    <div className="flex gap-4">
-                      <img src={Message} className="ml-2 w-5"></img>
-                      <p className="my-auto text-eerie-black">
-                        {conversation.name.length > 45
-                          ? conversation.name.substring(0, 45) + '...'
-                          : conversation.name}
-                      </p>
-                    </div>
-
-                    {conversationId === conversation.id ? (
-                      <img
-                        src={Exit}
-                        alt="Exit"
-                        className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
-                        id={`img-${conversation.id}`}
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          handleDeleteConversation(conversation.id);
-                        }}
-                      />
-                    ) : null}
-                  </div>
-                );
-              })
+            ? conversations.map((conversation, index) => (
+                <ConversationTile
+                  key={index}
+                  conversation={conversation}
+                  selectConversation={(id) => handleConversationClick(id)}
+                  onDeleteConversation={(id) => handleDeleteConversation(id)}
+                  onSave={(conversation) =>
+                    updateConversationName(conversation)
+                  }
+                />
+              ))
             : null}
         </div>