diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index b2b63281..053b9482 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
+import Exit from './assets/exit.svg';
 import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
@@ -21,6 +22,7 @@ import {
 } from './preferences/preferenceSlice';
 import { useOutsideAlerter } from './hooks';
 import Upload from './upload/Upload';
+import { Doc } from './preferences/preferenceApi';
 
 export default function Navigation({
   navState,
@@ -48,6 +50,23 @@ export default function Navigation({
     useState<ActiveState>('INACTIVE');
 
   const navRef = useRef(null);
+  const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+
+  const handleDeleteClick = (index: number, doc: Doc) => {
+    const docPath = 'indexes/' + 'local' + '/' + doc.name;
+
+    fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
+      method: 'GET',
+    })
+      .then(() => {
+        // remove the image element from the DOM
+        const imageElement = document.querySelector(
+          `#img-${index}`,
+        ) as HTMLElement;
+        imageElement.parentNode?.removeChild(imageElement);
+      })
+      .catch((error) => console.error(error));
+  };
   useOutsideAlerter(
     navRef,
     () => {
@@ -149,11 +168,18 @@ export default function Navigation({
                             dispatch(setSelectedDocs(doc));
                             setIsDocsListOpen(false);
                           }}
-                          className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                          className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
                         >
-                          <p className="ml-5 py-3">
+                          <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                             {doc.name} {doc.version}
                           </p>
+                          <img
+                            src={Exit}
+                            alt="Exit"
+                            className="mr-4 h-3 w-3 cursor-pointer"
+                            id={`img-${index}`}
+                            onClick={() => handleDeleteClick(index, doc)}
+                          />
                         </div>
                       );
                     }