diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index e669ea2..0de51dc 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -31,7 +31,8 @@ import {
   selectConversations,
   setConversations,
   selectConversationId,
-  selectModalState,
+  selectModalStateDeleteConv,
+  setModalStateDeleteConv,
 } from './preferences/preferenceSlice';
 import {
   setConversation,
@@ -69,7 +70,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
-  const modalState = useSelector(selectModalState);
+  const modalStateDeleteConv = useSelector(selectModalStateDeleteConv);
   const conversationId = useSelector(selectConversationId);
 
   const { isMobile } = useMediaQuery();
@@ -80,9 +81,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
 
-  const [deleteConvModalState, setDeleteConvState] =
-    useState<ActiveState>('INACTIVE');
-
   const isSelectedDocsSet = useSelector(selectSelectedDocsStatus);
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
@@ -102,8 +100,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   }, [conversations, dispatch]);
 
   useEffect(() => {
-    console.log(modalState);
-  }, [modalState]);
+    console.log(modalStateDeleteConv);
+  }, [modalStateDeleteConv]);
 
   async function fetchConversations() {
     return await getConversations()
@@ -407,8 +405,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         isCancellable={isApiKeySet}
       />
       <DeleteConvModal
-        modalState={modalState}
-        setModalState={setDeleteConvState}
+        modalState={modalStateDeleteConv}
+        setModalState={setModalStateDeleteConv}
         handleDeleteAllConv={handleDeleteAllConversations}
       />
       <Upload
diff --git a/frontend/src/preferences/DeleteConvModal.tsx b/frontend/src/preferences/DeleteConvModal.tsx
index b809a9a..9a600e5 100644
--- a/frontend/src/preferences/DeleteConvModal.tsx
+++ b/frontend/src/preferences/DeleteConvModal.tsx
@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { ActiveState } from '../models/misc';
 import { useMediaQuery, useOutsideAlerter } from './../hooks';
 import Modal from '../Modal';
+import { useDispatch } from 'react-redux';
 
 export default function DeleteConvModal({
   modalState,
@@ -12,7 +13,7 @@ export default function DeleteConvModal({
   setModalState: (val: ActiveState) => void;
   handleDeleteAllConv: () => void;
 }) {
-  //   const dispatch = useDispatch()
+  const dispatch = useDispatch();
   const modalRef = useRef(null);
   const { isMobile } = useMediaQuery();
 
@@ -20,7 +21,7 @@ export default function DeleteConvModal({
     modalRef,
     () => {
       if (isMobile && modalState === 'ACTIVE') {
-        setModalState('INACTIVE');
+        dispatch(setModalState('INACTIVE'));
       }
     },
     [modalState],
@@ -28,11 +29,11 @@ export default function DeleteConvModal({
 
   function handleSubmit() {
     handleDeleteAllConv();
-    setModalState('INACTIVE');
+    dispatch(setModalState('INACTIVE'));
   }
 
   function handleCancel() {
-    setModalState('INACTIVE');
+    dispatch(setModalState('INACTIVE'));
   }
 
   return (
diff --git a/frontend/src/preferences/preferenceSlice.ts b/frontend/src/preferences/preferenceSlice.ts
index 2d9bcb8..80eab20 100644
--- a/frontend/src/preferences/preferenceSlice.ts
+++ b/frontend/src/preferences/preferenceSlice.ts
@@ -121,7 +121,7 @@ export const selectSelectedDocsStatus = (state: RootState) =>
   !!state.preference.selectedDocs;
 export const selectSourceDocs = (state: RootState) =>
   state.preference.sourceDocs;
-export const selectModalState = (state: RootState) =>
+export const selectModalStateDeleteConv = (state: RootState) =>
   state.preference.modalState;
 export const selectSelectedDocs = (state: RootState) =>
   state.preference.selectedDocs;