diff --git a/cope2n-fe/src/locales/en/messages.json b/cope2n-fe/src/locales/en/messages.json
index 3e23b83..14c51d8 100644
--- a/cope2n-fe/src/locales/en/messages.json
+++ b/cope2n-fe/src/locales/en/messages.json
@@ -2,6 +2,7 @@
   "Are you sure you want to leave without saving?": "Are you sure you want to leave without saving?",
   "Back": "Back",
   "Back to Dashboard": "Back to Dashboard",
+  "Bad image reason:": "Bad image reason:",
   "Create New Report": "Create New Report",
   "Dashboard": "Dashboard",
   "Date (GMT+8)": "Date (GMT+8)",
diff --git a/cope2n-fe/src/locales/vi/messages.json b/cope2n-fe/src/locales/vi/messages.json
index 62f6947..664a5da 100644
--- a/cope2n-fe/src/locales/vi/messages.json
+++ b/cope2n-fe/src/locales/vi/messages.json
@@ -2,6 +2,7 @@
   "Are you sure you want to leave without saving?": "Bạn có chắc chắn muốn rời đi mà không lưu lại không?",
   "Back": "",
   "Back to Dashboard": "",
+  "Bad image reason:": "",
   "Create New Report": "",
   "Dashboard": "",
   "Date (GMT+8)": "",
diff --git a/cope2n-fe/src/pages/reviews2/FileCard.tsx b/cope2n-fe/src/pages/reviews2/FileCard.tsx
index 1e76926..15678cf 100644
--- a/cope2n-fe/src/pages/reviews2/FileCard.tsx
+++ b/cope2n-fe/src/pages/reviews2/FileCard.tsx
@@ -7,6 +7,7 @@ import { Button, Tag } from 'antd';
 
 const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
   const fileName = file['File Name'];
+  const extensionType = fileName.split('.').pop();
   let status = true;
   if (file['Is Required'] && !file['Is Reviewed']) {
     status = false;
@@ -52,6 +53,7 @@ const FileCard = ({ file, isSelected, onClick, setIsReasonModalOpen }) => {
             {fileName
               ? fileName.substring(0, 25).replace('temp_', '')
               : fileName}
+            {' '}({extensionType})
           </span>
         </div>
         <Tag
diff --git a/cope2n-fe/src/pages/reviews2/index.tsx b/cope2n-fe/src/pages/reviews2/index.tsx
index b654982..5123174 100644
--- a/cope2n-fe/src/pages/reviews2/index.tsx
+++ b/cope2n-fe/src/pages/reviews2/index.tsx
@@ -9,6 +9,9 @@ import {
 } from '@ant-design/icons';
 import { t } from '@lingui/macro';
 import { Viewer } from '@react-pdf-viewer/core';
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 import {
   Button,
   DatePicker,
@@ -26,9 +29,6 @@ import { useEffect, useState } from 'react';
 import Lightbox from 'react-awesome-lightbox';
 import 'react-awesome-lightbox/build/style.css';
 import { useHotkeys } from 'react-hotkeys-hook';
-// Import the styles
-import '@react-pdf-viewer/core/lib/styles/index.css';
-
 import { badQualityReasonSubmit } from 'request';
 import { getErrorMessage } from 'utils/error-handler';
 import {
@@ -81,7 +81,7 @@ const ReviewPage = () => {
   const [solution, setSolution] = useState('');
   const [otherSolution, setOtherSolution] = useState('');
   const [imageLoading, setImageLoading] = useState(false);
-
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
   useEffect(() => {
     if (reason) {
       setSolution(counter_measure_map[reason]);
@@ -137,8 +137,8 @@ const ReviewPage = () => {
       setSelectedFileData(fileURL);
     } else {
       setSelectedFileData('FAILED_TO_LOAD_FILE');
-      setImageLoading(false);
     }
+    setImageLoading(false);
   };
 
   const loadCurrentRequest = (requestIndex) => {
@@ -283,10 +283,8 @@ const ReviewPage = () => {
       });
       notification.success({ message: 'Update file success' });
 
-      const requestData = await fetchRequest(
-        currentRequest?.RequestID,
-      );
-      setCurrentRequest(requestData)
+      const requestData = await fetchRequest(currentRequest?.RequestID);
+      setCurrentRequest(requestData);
     } catch (error) {
       notification.error({
         message: getErrorMessage(error),
@@ -472,48 +470,57 @@ const ReviewPage = () => {
               ))}
             </div>
           )}
-          <div
-            style={{
-              flexGrow: 1,
-              overflow: 'auto',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            <Spin spinning={imageLoading}>
-              {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
-                <p style={{ color: '#333' }}>Failed to load file.</p>
-              ) : fileExtension === 'pdf' ? (
-                <Viewer fileUrl={selectedFileData} />
-              ) : (
-                <>
-                  <img
-                    style={{
-                      maxHeight: '100%',
-                      maxWidth: '100%',
-                      height: 'auto',
-                      width: 'auto',
-                      cursor: 'zoom-in',
-                    }}
-                    src={selectedFileData}
-                    alt='file'
-                    onClick={() => setLightBox(true)}
-                    onLoad={() => {
-                      setImageLoading(false);
-                    }}
-                  />
+          {selectedFileData === 'FAILED_TO_LOAD_FILE' ? (
+            <p style={{ color: '#333' }}>Failed to load file.</p>
+          ) : fileExtension === 'pdf' ? (
+            <div
+              style={{
+                flexGrow: 1,
+                overflow: 'auto',
+              }}
+            >
+              <Viewer
+                plugins={[defaultLayoutPluginInstance]}
+                fileUrl={selectedFileData}
+                onDocumentLoad={() => setImageLoading(false)}
+              />
+            </div>
+          ) : (
+            <div
+              style={{
+                flexGrow: 1,
+                overflow: 'auto',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                overflowX: 'visible',
+              }}
+            >
+              <img
+                style={{
+                  maxHeight: '100%',
+                  maxWidth: '100%',
+                  height: 'auto',
+                  width: 'auto',
+                  cursor: 'zoom-in',
+                }}
+                src={selectedFileData}
+                alt='file'
+                onClick={() => setLightBox(true)}
+                onLoad={() => {
+                  setImageLoading(false);
+                }}
+              />
 
-                  {lightBox && (
-                    <Lightbox
-                      image={selectedFileData}
-                      onClose={() => setLightBox(false)}
-                    ></Lightbox>
-                  )}
-                </>
+              {lightBox && (
+                <Lightbox
+                  image={selectedFileData}
+                  onClose={() => setLightBox(false)}
+                ></Lightbox>
               )}
-            </Spin>
-          </div>
+            </div>
+          )}
+          <Spin spinning={imageLoading}></Spin>
 
           <div
             style={{
@@ -622,7 +629,7 @@ const ReviewPage = () => {
               type='primary'
               shape='default'
               size='middle'
-              disabled={currentRequest && currentRequest['Is Reviewed'] }
+              disabled={currentRequest && currentRequest['Is Reviewed']}
               style={{ minWidth: '120px', alignSelf: 'flex-end' }}
               onClick={handleConfirmReview}
             >
@@ -717,7 +724,9 @@ const ReviewPage = () => {
                     style={{ background: shouldRevised ? 'yellow' : '' }}
                     size='small'
                     value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
-                    onChange={(e) =>handleUpdateFileInField(data, e.target.value)}
+                    onChange={(e) =>
+                      handleUpdateFileInField(data, e.target.value)
+                    }
                   />
                 </div>
               );