diff --git a/src/views/orders/components/MailBox.jsx b/src/views/orders/components/MailBox.jsx
index 8690d5c..604af1e 100644
--- a/src/views/orders/components/MailBox.jsx
+++ b/src/views/orders/components/MailBox.jsx
@@ -5,6 +5,7 @@ import dayjs from 'dayjs'
 import { useEmailList } from '@/hooks/useEmail'
 import { isEmpty } from '@/utils/commons'
 import { MailboxDirIcon } from './MailboxDirIcon'
+import { AttachmentIcon } from '@/components/Icons'
 
 const { RangePicker } = DatePicker
 
@@ -96,11 +97,12 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props }) => {
     const orderNumber = isEmpty(item.MAI_COLI_ID) || isOrderNode ? '' : item.MAI_COLI_ID + ' - '
     const countryName = isEmpty(item.CountryCN) ? '' : '[' + item.CountryCN + '] '
     const mailStateClass = item.MOI_ReadState === 0 ? 'font-bold' : ''
+    const hasAtta = item.MAI_Attachment !== 0 ? <AttachmentIcon className='text-blue-500' /> : null
     return (
       <li
-        className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
-        <div className=''>
-          <Checkbox></Checkbox>
+        className={`flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 active:bg-gray-200 p-2 ${props.currentActiveMailItem === item.key ? 'bg-gray-200' : ''}`}>
+        <div className='flex flex-col gap-1'>
+          <Checkbox></Checkbox>{hasAtta}
         </div>
         <div className='flex-1 pl-2'
         onClick={() => {