diff --git a/components/ScannedDataBox.tsx b/components/ScannedDataBox.tsx
index 495de9c..8f64ba2 100644
--- a/components/ScannedDataBox.tsx
+++ b/components/ScannedDataBox.tsx
@@ -459,7 +459,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
 
 
 
-      {type === 'PHONE' && (
+      {type === 'PHONE Nume' && (
         <TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
           <View style={styles.dividerHorizontal} />
           <Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />
diff --git a/screens/EmailScreen.tsx b/screens/EmailScreen.tsx
index 02eb8eb..f84d501 100644
--- a/screens/EmailScreen.tsx
+++ b/screens/EmailScreen.tsx
@@ -24,10 +24,10 @@ const EmailScreen: React.FC = () => {
   const [messageToDelete, setMessageToDelete] = useState(null);
 
   // Start scanning inbox only once when the component mounts
-useEffect(() => {
-  startInboxScanning(); 
-  fetchUserEmail();
-}, []);
+  useEffect(() => {
+    startInboxScanning(); 
+    fetchUserEmail();
+  }, []);
 
   // Function to fetch user email
   const fetchUserEmail = async () => {
@@ -174,7 +174,6 @@ useEffect(() => {
   );
 
   const handleUrlClick = (id) => {
-    console.log('handleURLClik ID :',)
     setSelectedQrCodeId(id);
     setIsModalVisible(true);
   };
@@ -279,12 +278,14 @@ useEffect(() => {
       >
         {/* The greyspace outside, made clickable to close the modal */}
         <TouchableOpacity
-          style={styles.modalContainer}
+          style={styles.modalOverlay}
           activeOpacity={1}
           onPressOut={() => setIsModalVisible(false)}
         >
           {/* Ensure ScannedDataBox does not render another modal */}
-          <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
+          <View style={styles.modalContainer}>
+            <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
+          </View>
         </TouchableOpacity>
       </Modal>
 
@@ -295,23 +296,25 @@ useEffect(() => {
         animationType="fade"
         onRequestClose={() => setIsDeleteModalVisible(false)}
       >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Are you sure?</Text>
-            <Text style={styles.modalText}>This will only delete the entry on the app and not the actual email.</Text>
-            <View style={styles.modalButtons}>
-              <TouchableOpacity 
-                style={styles.modalButton} 
-                onPress={confirmDelete}
-              >
-                <Text style={styles.modalButtonText}>Yes, Delete</Text>
-              </TouchableOpacity>
-              <TouchableOpacity 
-                style={styles.modalButton} 
-                onPress={() => setIsDeleteModalVisible(false)}
-              >
-                <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
-              </TouchableOpacity>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalContent}>
+              <Text style={styles.modalTitle}>Are you sure?</Text>
+              <Text style={styles.modalText}>This will only delete the entry on the app and not the actual email.</Text>
+              <View style={styles.modalButtons}>
+                <TouchableOpacity 
+                  style={styles.modalButton} 
+                  onPress={confirmDelete}
+                >
+                  <Text style={styles.modalButtonText}>Yes, Delete</Text>
+                </TouchableOpacity>
+                <TouchableOpacity 
+                  style={styles.modalButton} 
+                  onPress={() => setIsDeleteModalVisible(false)}
+                >
+                  <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
+                </TouchableOpacity>
+              </View>
             </View>
           </View>
         </View>
@@ -416,38 +419,38 @@ const styles = StyleSheet.create({
   },
   banner: {
     position: 'absolute',
-    top: screenHeight * 0.45, // Adjusts the banner to appear in the middle of the screen
-    left: screenWidth * 0.1,  // Adjust these values to center the banner as needed
+    top: screenHeight * 0.45, 
+    left: screenWidth * 0.1,  
     right: screenWidth * 0.1,
     backgroundColor: '#ff69b4',
-    paddingVertical: screenHeight * 0.02, // Adjust the height of the banner
+    paddingVertical: screenHeight * 0.02, 
     paddingHorizontal: screenWidth * 0.05,
     borderRadius: screenWidth * 0.05,
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 10, // Ensure it appears above other elements
+    zIndex: 10, 
   },
   errorBanner: {
     position: 'absolute',
-    top: screenHeight * 0.4, // Adjusts the banner to appear in the middle of the screen
-    left: screenWidth * 0.1,  // Adjust these values to center the banner as needed
+    top: screenHeight * 0.4,
+    left: screenWidth * 0.1,
     right: screenWidth * 0.1,
     backgroundColor: '#ff69b4',
-    paddingVertical: screenHeight * 0.02, // Adjust the height of the banner
+    paddingVertical: screenHeight * 0.02,
     paddingHorizontal: screenWidth * 0.05,
     borderRadius: screenWidth * 0.05,
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 10, // Ensure it appears above other elements
-  },
-  bannerText: {
+    zIndex: 10,
+  }, bannerText: {
     color: '#fff',
     fontWeight: 'bold',
     textAlign: 'center',
     fontSize: screenWidth * 0.04,
   },
+  
   innerModalContainer: {
-    backgroundColor: '#ffe6f0', // pink box color
+    backgroundColor: '#ffe6f0',
     padding: screenWidth * 0.05,
     borderRadius: screenWidth * 0.03,
     alignItems: 'center',
@@ -456,7 +459,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: screenWidth * 0.02,
     right: screenWidth * 0.02,
-    zIndex: 1, // Ensure it is above other content
+    zIndex: 1,
   },
   deleteButtonContainer: {
     flexDirection: 'row',
@@ -469,12 +472,18 @@ const styles = StyleSheet.create({
     color: '#ff69b4',
     fontSize: screenWidth * 0.035,
   },
-  modalContainer: {
+  modalOverlay: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+  modalContainer: {
+    marginHorizontal: '5%',
+    borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
+    padding: screenWidth * 0.025,
+    elevation: 5,
+  },
   modalContent: {
     width: '80%',
     backgroundColor: 'white',
diff --git a/screens/HistoryScreen.tsx b/screens/HistoryScreen.tsx
index 0af4e70..eff5943 100644
--- a/screens/HistoryScreen.tsx
+++ b/screens/HistoryScreen.tsx
@@ -16,8 +16,10 @@ const HistoryScreen: React.FC = () => {
   const histories = useSelector((state: RootState) => state.qrCodes.histories);
   const { userAttributes } = useFetchUserAttributes();
   const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
+
   const [qrCodeToDelete, setQrCodeToDelete] = useState<string | null>(null);
-  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState<boolean>(false);
+  const [isScannedDataModalVisible, setIsScannedDataModalVisible] = useState<boolean>(false);
   const [historiesLoading, setHistoriesLoading] = useState(false);
   const [historiesError, setHistoriesError] = useState<string | null>(null);
   const [selectedQrCodeId, setSelectedQrCodeId] = useState<string | null>(null);
@@ -42,30 +44,34 @@ const HistoryScreen: React.FC = () => {
     }
   }, [userAttributes?.sub, fetchHistories]);
 
-  const handleDelete = useCallback((qrCodeId: string) => {
+  const handleDeleteQrCode = useCallback((qrCodeId: string) => {
     if (userAttributes?.sub) {
       dispatch(deleteQRCode({ userId: userAttributes.sub, qrCodeId }));
-      setIsModalVisible(false);
+      setIsDeleteModalVisible(false);
     }
   }, [dispatch, userAttributes]);
 
-  const filteredQrCodes = showBookmarks ? histories.filter(qr => qr.bookmarked) : histories;
-
-  const handleItemPress = (item: QRCodeType) => {
+  const handleSelectQrCodeForView = (item: QRCodeType) => {
     setSelectedQrCodeId(item.data.id || null);
+    setIsScannedDataModalVisible(true);
   };
 
-  const clearSelectedData = () => {
+  const clearSelectedQrCodeData = () => {
     setSelectedQrCodeId(null);
+    setIsScannedDataModalVisible(false);
   };
 
+  const filteredQrCodes = showBookmarks
+    ? histories.filter((qr) => qr.bookmarked)
+    : histories;
+
   return (
     <View style={styles.container}>
       <View style={styles.headerContainer}>
-        <TouchableOpacity onPress={() => { setShowBookmarks(false); clearSelectedData(); }}>
+        <TouchableOpacity onPress={() => { setShowBookmarks(false); clearSelectedQrCodeData(); }}>
           <Text style={!showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>History</Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => { setShowBookmarks(true); clearSelectedData(); }}>
+        <TouchableOpacity onPress={() => { setShowBookmarks(true); clearSelectedQrCodeData(); }}>
           <Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
         </TouchableOpacity>
       </View>
@@ -78,18 +84,12 @@ const HistoryScreen: React.FC = () => {
         </Text>
       )}
 
-      {selectedQrCodeId && (
-        <View style={styles.scannedDataBoxContainer}>
-          <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedData} />
-        </View>
-      )}
-
       <FlatList
         data={filteredQrCodes}
         renderItem={({ item }) => (
           <View style={styles.itemContainer}>
             <View style={styles.itemLeft}>
-              <TouchableOpacity onPress={() => handleItemPress(item)} style={styles.itemContent}>
+              <TouchableOpacity onPress={() => handleSelectQrCodeForView(item)} style={styles.itemContent}>
                 <Image source={require('../assets/ScanIcon3.png')} style={styles.scanIcon} />
                 <View style={styles.textContainer}>
                   <Text style={styles.dataText} numberOfLines={1} ellipsizeMode="tail">{item.data.contents}</Text>
@@ -105,9 +105,9 @@ const HistoryScreen: React.FC = () => {
               </TouchableOpacity>
               <TouchableOpacity onPress={() => {
                 setQrCodeToDelete(item.data.id);
-                setIsModalVisible(true);
-                }}>
-                <Ionicons name="close-circle-outline" size={screenWidth * 0.06} color="#ff69b4" />
+                setIsDeleteModalVisible(true);
+              }}>
+                <Ionicons name="trash-outline" size={screenWidth * 0.06} color="#ff69b4" />
               </TouchableOpacity>
             </View>
           </View>
@@ -116,21 +116,38 @@ const HistoryScreen: React.FC = () => {
         contentContainerStyle={styles.flatListContent}
       />
 
+      {/* Modal for ScannedDataBox */}
+      <Modal
+        visible={isScannedDataModalVisible}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={clearSelectedQrCodeData}
+      >
+        <View style={styles.modalOverlay}>
+          <TouchableOpacity style={styles.modalOverlayTouchable} onPress={clearSelectedQrCodeData} activeOpacity={1}>
+            <View style={styles.modalContainer}>
+              <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedQrCodeData} />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+
+      {/* Modal to confirm deletion */}
       <Modal
         transparent={true}
-        visible={isModalVisible}
+        visible={isDeleteModalVisible}
         animationType="fade"
-        onRequestClose={() => setIsModalVisible(false)}
+        onRequestClose={() => setIsDeleteModalVisible(false)}
       >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
             <Text style={styles.modalTitle}>Are you sure?</Text>
             <Text style={styles.modalText}>If bookmarked, this will be removed from both History and Bookmarks.</Text>
             <View style={styles.modalButtons}>
-              <TouchableOpacity style={styles.modalButton} onPress={() => handleDelete(qrCodeToDelete!)}>
+              <TouchableOpacity style={styles.modalButton} onPress={() => handleDeleteQrCode(qrCodeToDelete!)}>
                 <Text style={styles.modalButtonText}>Yes, Delete</Text>
               </TouchableOpacity>
-              <TouchableOpacity style={styles.modalButton} onPress={() => setIsModalVisible(false)}>
+              <TouchableOpacity style={styles.modalButton} onPress={() => setIsDeleteModalVisible(false)}>
                 <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
               </TouchableOpacity>
             </View>
@@ -146,7 +163,7 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#f8f0fc',
     padding: 20,
-    paddingTop: screenHeight * 0.05, // Add padding from the top
+    paddingTop: screenHeight * 0.05,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -212,15 +229,22 @@ const styles = StyleSheet.create({
     color: '#ff69b4',
     marginVertical: screenHeight * 0.02,
   },
-  scannedDataBoxContainer: {
-    marginBottom: screenHeight * 0.02,
-  },
-  modalContainer: {
+  modalOverlay: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+  modalOverlayTouchable: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  modalContainer: {
+    marginHorizontal: '5%',
+    borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
+    padding: screenWidth * 0.025,
+    elevation: 5,
+  },
   modalContent: {
     width: '80%',
     backgroundColor: 'white',