diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d9defb9e..1f57fee3 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -206,7 +206,7 @@ export default function Conversation() {
             onClick={() => {
               setShareModalState(true);
             }}
-            className="fixed top-4 right-20 z-30 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            className="fixed top-4 right-20 z-0 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
           >
             <img
               className="m-2 h-5 w-5 filter dark:invert"
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index dc0a3c83..6f93dbb4 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -79,138 +79,139 @@ export default function ConversationTile({
     setIsEdit(false);
   }
   return (
-    <div
-      ref={tileRef}
-      onMouseEnter={() => {
-        setOpen(false);
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-      onClick={() => {
-        conversationId !== conversation.id &&
-          selectConversation(conversation.id);
-      }}
-      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-        conversationId === conversation.id || isOpen
-          ? 'bg-gray-100 dark:bg-[#28292E]'
-          : ''
-      }`}
-    >
-      <div className={`flex w-10/12 gap-4`}>
-        <img
-          src={isDarkTheme ? MessageDark : Message}
-          className="ml-4 w-5 dark:text-white"
-        />
-        {isEdit ? (
-          <input
-            autoFocus
-            type="text"
-            className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
-            value={conversationName}
-            onChange={(e) => setConversationsName(e.target.value)}
+    <>
+      <div
+        ref={tileRef}
+        onMouseEnter={() => {
+          setIsHovered(true);
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false);
+        }}
+        onClick={() => {
+          conversationId !== conversation.id &&
+            selectConversation(conversation.id);
+        }}
+        className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
+          conversationId === conversation.id || isOpen || isHovered
+            ? 'bg-gray-100 dark:bg-[#28292E]'
+            : ''
+        }`}
+      >
+        <div className={`flex w-10/12 gap-4`}>
+          <img
+            src={isDarkTheme ? MessageDark : Message}
+            className="ml-4 w-5 dark:text-white"
           />
-        ) : (
-          <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
-            {conversationName}
-          </p>
-        )}
-      </div>
-      {(conversationId === conversation.id || isHovered || isOpen) && (
-        <div className="flex text-white dark:text-[#949494]" ref={menuRef}>
           {isEdit ? (
-            <div className="flex gap-1">
-              <img
-                src={CheckMark2}
-                alt="Edit"
-                className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
-                id={`img-${conversation.id}`}
-                onClick={(event: SyntheticEvent) => {
-                  event.stopPropagation();
-                  handleSaveConversation({
-                    id: conversation.id,
-                    name: conversationName,
-                  });
-                }}
-              />
-              <img
-                src={Exit}
-                alt="Exit"
-                className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
-                id={`img-${conversation.id}`}
-                onClick={(event: SyntheticEvent) => {
-                  event.stopPropagation();
-                  onClear();
-                }}
-              />
-            </div>
+            <input
+              autoFocus
+              type="text"
+              className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
+              value={conversationName}
+              onChange={(e) => setConversationsName(e.target.value)}
+            />
           ) : (
-            <button
-              onClick={(event: SyntheticEvent) => {
-                event.stopPropagation();
-                setOpen(true);
-              }}
-              className="mr-2 flex w-4 justify-center"
-            >
-              <img src={threeDots} width={8} />
-            </button>
-          )}
-          {isOpen && (
-            <div className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
-              <button
-                onClick={(event: SyntheticEvent) => {
-                  event.stopPropagation();
-                  setShareModalState(true);
-                  setOpen(false);
-                }}
-                className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-              >
-                <img
-                  src={Share}
-                  alt="Share"
-                  width={14}
-                  height={14}
-                  className="cursor-pointer hover:opacity-50"
-                  id={`img-${conversation.id}`}
-                />
-                <span>{t('convTile.share')}</span>
-              </button>
-              <button
-                onClick={handleEditConversation}
-                className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-              >
-                <img
-                  src={Edit}
-                  alt="Edit"
-                  width={16}
-                  height={16}
-                  className="cursor-pointer hover:opacity-50"
-                  id={`img-${conversation.id}`}
-                />
-                <span>{t('convTile.rename')}</span>
-              </button>
-              <button
-                onClick={(event: SyntheticEvent) => {
-                  event.stopPropagation();
-                  setDeleteModalState('ACTIVE');
-                  setOpen(false);
-                }}
-                className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-              >
-                <img
-                  src={Trash}
-                  alt="Edit"
-                  width={24}
-                  height={24}
-                  className="cursor-pointer hover:opacity-50"
-                />
-                <span>{t('convTile.delete')}</span>
-              </button>
-            </div>
+            <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
+              {conversationName}
+            </p>
           )}
         </div>
-      )}
+        {(conversationId === conversation.id || isHovered || isOpen) && (
+          <div className="flex text-white dark:text-[#949494]" ref={menuRef}>
+            {isEdit ? (
+              <div className="flex gap-1">
+                <img
+                  src={CheckMark2}
+                  alt="Edit"
+                  className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
+                  id={`img-${conversation.id}`}
+                  onClick={(event: SyntheticEvent) => {
+                    event.stopPropagation();
+                    handleSaveConversation({
+                      id: conversation.id,
+                      name: conversationName,
+                    });
+                  }}
+                />
+                <img
+                  src={Exit}
+                  alt="Exit"
+                  className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
+                  id={`img-${conversation.id}`}
+                  onClick={(event: SyntheticEvent) => {
+                    event.stopPropagation();
+                    onClear();
+                  }}
+                />
+              </div>
+            ) : (
+              <button
+                onClick={(event: SyntheticEvent) => {
+                  event.stopPropagation();
+                  setOpen(true);
+                }}
+                className="mr-2 flex w-4 justify-center"
+              >
+                <img src={threeDots} width={8} />
+              </button>
+            )}
+            {isOpen && (
+              <div className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36">
+                <button
+                  onClick={(event: SyntheticEvent) => {
+                    event.stopPropagation();
+                    setShareModalState(true);
+                    setOpen(false);
+                  }}
+                  className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+                >
+                  <img
+                    src={Share}
+                    alt="Share"
+                    width={14}
+                    height={14}
+                    className="cursor-pointer hover:opacity-50"
+                    id={`img-${conversation.id}`}
+                  />
+                  <span>{t('convTile.share')}</span>
+                </button>
+                <button
+                  onClick={handleEditConversation}
+                  className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+                >
+                  <img
+                    src={Edit}
+                    alt="Edit"
+                    width={16}
+                    height={16}
+                    className="cursor-pointer hover:opacity-50"
+                    id={`img-${conversation.id}`}
+                  />
+                  <span>{t('convTile.rename')}</span>
+                </button>
+                <button
+                  onClick={(event: SyntheticEvent) => {
+                    event.stopPropagation();
+                    setDeleteModalState('ACTIVE');
+                    setOpen(false);
+                  }}
+                  className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+                >
+                  <img
+                    src={Trash}
+                    alt="Edit"
+                    width={24}
+                    height={24}
+                    className="cursor-pointer hover:opacity-50"
+                  />
+                  <span>{t('convTile.delete')}</span>
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
       <ConfirmationModal
         message={t('convTile.deleteWarning')}
         modalState={deleteModalState}
@@ -227,6 +228,6 @@ export default function ConversationTile({
           conversationId={conversation.id}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index ce44b713..c7651f8b 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -108,7 +108,7 @@
       "label": "Create a public page to share",
       "note": "Source document, personal information and further conversation will remain private",
       "create": "Create",
-      "option":"Allow users to prompt further"
+      "option": "Allow users to prompt further"
     }
   },
   "sharedConv": {
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index a68d440c..d368749f 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -108,7 +108,7 @@
       "label": "Crear una página pública para compartir",
       "note": "El documento original, la información personal y las conversaciones posteriores permanecerán privadas",
       "create": "Crear",
-      "option":"Permitir a los usuarios realizar más consultas."
+      "option": "Permitir a los usuarios realizar más consultas."
     }
   },
   "sharedConv": {
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index f4e2980f..350faf09 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -108,7 +108,7 @@
       "label": "共有ページを作成して共有する",
       "note": "ソースドキュメント、個人情報、および以降の会話は非公開のままになります",
       "create": "作成",
-      "option":"ユーザーがより多くのクエリを実行できるようにします。"
+      "option": "ユーザーがより多くのクエリを実行できるようにします。"
     }
   },
   "sharedConv": {
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index a3ff940b..db93dcfc 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -108,7 +108,7 @@
       "label": "创建用于分享的公共页面",
       "note": "源文档、个人信息和后续对话将保持私密",
       "create": "创建",
-      "option":"允许用户进行更多查询。"
+      "option": "允许用户进行更多查询。"
     }
   },
   "sharedConv": {
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index f1bb4549..0b39440b 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -1,4 +1,3 @@
-import { SyntheticEvent } from 'react';
 import Exit from '../assets/exit.svg';
 import { ActiveState } from '../models/misc';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +21,6 @@ function ConfirmationModal({
   const { t } = useTranslation();
   return (
     <article
-      onClick={(event: SyntheticEvent) => event.stopPropagation()}
       className={`${
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index 939a4efc..c7ef0ad6 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -1,4 +1,4 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import {
@@ -117,10 +117,7 @@ export const ShareConversationModal = ({
   };
 
   return (
-    <div
-      onClick={(event: SyntheticEvent) => event.stopPropagation()}
-      className="z-100 fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver"
-    >
+    <div className="fixed top-0 left-0 z-40 flex h-screen w-screen cursor-default items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver">
       <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
         <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
           <img className="filter dark:invert" src={Exit} />
@@ -173,7 +170,7 @@ export const ShareConversationModal = ({
             </span>
             {status === 'fetched' ? (
               <button
-                className="my-1 h-10 w-28 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
+                className="my-1 h-10 w-28 rounded-full border border-solid  bg-purple-30 p-2 text-sm text-white hover:bg-[#6F3FD1]"
                 onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
               >
                 {isCopied
@@ -182,7 +179,7 @@ export const ShareConversationModal = ({
               </button>
             ) : (
               <button
-                className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full  border border-solid border-purple-30 p-2 text-center text-sm font-normal text-purple-30 hover:bg-purple-30 hover:text-white"
+                className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full  border border-solid bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-[#6F3FD1]"
                 onClick={() => {
                   shareCoversationPublicly(allowPrompt);
                 }}