diff --git a/src/pages/DemandNote/Details/ApplicationDetailCard.js b/src/pages/DemandNote/Details/ApplicationDetailCard.js
index 931965c..27ada79 100644
--- a/src/pages/DemandNote/Details/ApplicationDetailCard.js
+++ b/src/pages/DemandNote/Details/ApplicationDetailCard.js
@@ -12,6 +12,7 @@ import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
+import * as HttpUtils from "utils/HttpUtils";
 
 import DownloadIcon from '@mui/icons-material/Download';
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
@@ -33,8 +34,7 @@ const ApplicationDetailCard = ({ data }) => {
             skey: appDetail.appSkey,
             filename: appDetail.appFilename,
         });
-        notifyDownloadSuccess()
-        setUploadStatus(true)
+        notifyDownloadSuccess();
     };
 
     return (
@@ -56,7 +56,9 @@ const ApplicationDetailCard = ({ data }) => {
                                 </Grid>
 
                                 <Grid item xs={12} md={9} lg={9}>
-                                    {appDetail.appNo}
+                                    <Typography variant="h5">
+                                        {appDetail.appNo}
+                                    </Typography>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -69,7 +71,7 @@ const ApplicationDetailCard = ({ data }) => {
 
                                 <Grid item xs={12} md={9} lg={9}>
                                     <FormControl variant="outlined">
-                                        {StatusUtils.getStatusByTextEng(appDetail.status)}
+                                        {StatusUtils.getStatusByTextEng(appDetail.appStatus)}
                                     </FormControl>
                                 </Grid>
                             </Grid>
@@ -85,9 +87,11 @@ const ApplicationDetailCard = ({ data }) => {
 
                                 <Grid item xs={12} md={9} lg={9}>
                                     <FormControl variant="outlined" fullWidth disabled >
-                                        {appDetail.orgId === null ?
-                                            appDetail.contactPerson : appDetail.enCompanyName
-                                        }
+                                        <Typography variant="h5">
+                                            {appDetail.orgId === null ?
+                                                appDetail.contactPerson : appDetail.enCompanyName
+                                            }
+                                        </Typography>
                                     </FormControl>
                                 </Grid>
                             </Grid>
@@ -100,7 +104,9 @@ const ApplicationDetailCard = ({ data }) => {
                                 </Grid>
 
                                 <Grid item xs={12} md={8} lg={8}>
-                                    {appDetail.contactTelNo ? appDetail.contactTelNo.countryCode + " " + appDetail.contactTelNo.phoneNumber : ""}
+                                    <Typography variant="h5">
+                                        {appDetail.contactTelNo ? appDetail.contactTelNo.countryCode + " " + appDetail.contactTelNo.phoneNumber : ""}
+                                    </Typography>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -114,7 +120,9 @@ const ApplicationDetailCard = ({ data }) => {
                                 </Grid>
 
                                 <Grid item xs={12} md={9} lg={9}>
-                                    {appDetail.contactPerson}
+                                    <Typography variant="h5">
+                                        {appDetail.contactPerson}
+                                    </Typography>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -126,7 +134,9 @@ const ApplicationDetailCard = ({ data }) => {
                                 </Grid>
 
                                 <Grid item xs={12} md={8} lg={8}>
-                                    {appDetail.contactFaxNo ? appDetail.contactFaxNo.countryCode + " " + appDetail.contactFaxNo.faxNumber : ""}
+                                    <Typography variant="h5">
+                                        {appDetail.contactFaxNo ? appDetail.contactFaxNo.countryCode + " " + appDetail.contactFaxNo.faxNumber : ""}
+                                    </Typography>
                                 </Grid>
                             </Grid>
                         </Grid>
@@ -150,7 +160,7 @@ const ApplicationDetailCard = ({ data }) => {
                                                             id='fileName'
                                                             variant="h5"
                                                         >
-                                                            {appDetail.filename}
+                                                            {appDetail.appFilename}
                                                         </Typography>
                                                     </FormControl>
                                                 </Grid>
diff --git a/src/pages/DemandNote/Details/ClientDetailCard.js b/src/pages/DemandNote/Details/ClientDetailCard.js
index ce3a290..d9cdd1c 100644
--- a/src/pages/DemandNote/Details/ClientDetailCard.js
+++ b/src/pages/DemandNote/Details/ClientDetailCard.js
@@ -21,14 +21,14 @@ const ClientDetailCard = ({ data }) => {
     }, [data]);
 
     const getDisplayField = (label, value) => {
-        return <Grid container direction="column" justifyContent="flex-start"
-            alignItems="flex-start">
-            <Grid item xs={12} md={12} lg={12} mb={1}
-                sx={{ display: 'flex', alignItems: 'center' }}>
+        return <Grid container direction="row" >
+            <Grid item xs={12} md={6} lg={6} mb={6}>
                 <FormLabel><Typography variant="h5">{label}:</Typography></FormLabel>
             </Grid>
-            <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
-                {value}
+            <Grid item xs={12} md={6} lg={6} mb={6} >
+                <Typography variant="h5">
+                    {value}
+                </Typography>
             </Grid>
         </Grid>;
     }
diff --git a/src/pages/DemandNote/Details/DnDetailCard.js b/src/pages/DemandNote/Details/DnDetailCard.js
index f542fcf..beac57a 100644
--- a/src/pages/DemandNote/Details/DnDetailCard.js
+++ b/src/pages/DemandNote/Details/DnDetailCard.js
@@ -7,11 +7,13 @@ import {
 } from '@mui/material';
 
 import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
 import * as StatusUtils from "utils/statusUtils/DnStatus";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 
 import DownloadIcon from '@mui/icons-material/Download';
+import { notifyDownloadSuccess } from 'utils/CommonFunction';
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -25,9 +27,16 @@ const DnDetailCard = ({ data }) => {
         }
     }, [data]);
 
-    const onDownloadClick = () => {
-
-    }
+    const onDownloadClick = () => () => {
+        HttpUtils.fileDownload({
+            fileId: dnData.fileId,
+            skey: dnData.skey,
+            filename: dnData.filename,
+            onResponse: function(){
+                notifyDownloadSuccess();
+            }
+        });
+    };
 
     const getDisplayField = (label, value) => {
         return <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
diff --git a/src/pages/DemandNote/Details/GazetteDetailCard.js b/src/pages/DemandNote/Details/GazetteDetailCard.js
index 0fdddcf..956a23e 100644
--- a/src/pages/DemandNote/Details/GazetteDetailCard.js
+++ b/src/pages/DemandNote/Details/GazetteDetailCard.js
@@ -40,7 +40,9 @@ const GazetteDetailCard = ({ data }) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        {appData.issueNum}
+                                        <Typography variant="h5">
+                                            {appData.issueNum}
+                                        </Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -52,7 +54,9 @@ const GazetteDetailCard = ({ data }) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        {appData.groupNo}
+                                        <Typography variant="h5">
+                                            {appData.groupNo}
+                                        </Typography>
 
                                     </Grid>
                                 </Grid>
@@ -68,7 +72,9 @@ const GazetteDetailCard = ({ data }) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        {appData.gazetteIssueDate}
+                                        <Typography variant="h5">
+                                            {appData.gazetteIssueDate}
+                                        </Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -80,7 +86,9 @@ const GazetteDetailCard = ({ data }) => {
                                     </Grid>
 
                                     <Grid item xs={12} md={9} lg={9}>
-                                        {appData.groupTitle}
+                                        <Typography variant="h5">
+                                            {appData.groupTitle}
+                                        </Typography>
 
                                     </Grid>
                                 </Grid>
diff --git a/src/pages/DemandNote/Details/index.js b/src/pages/DemandNote/Details/index.js
index aaea97f..83ffeae 100644
--- a/src/pages/DemandNote/Details/index.js
+++ b/src/pages/DemandNote/Details/index.js
@@ -75,7 +75,7 @@ const DemandNote_index = () => {
 
       <Grid item xs={12} >
         <Grid container direction="row">
-          <Grid item xs={12} md={10} lg={10} xl={10}>
+          <Grid item xs={12} md={9} lg={9} xl={9}>
             <Grid container direction="column">
               <Grid item xs={12} md={10} lg={10} xl={10}>
                 <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
@@ -101,7 +101,7 @@ const DemandNote_index = () => {
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={12} md={2} lg={2} xl={2}>
+          <Grid item xs={12} md={3} lg={3} xl={3}>
             <Grid container>
               <Grid item xs={12} md={12}>
                 <Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
diff --git a/src/utils/HttpUtils.js b/src/utils/HttpUtils.js
index 453db92..eaeafd8 100644
--- a/src/utils/HttpUtils.js
+++ b/src/utils/HttpUtils.js
@@ -58,7 +58,7 @@ export const postWithFiles = ({url, params, files, onSuccess, onFail, onError})
     });
 };
 
-export const fileDownload = ({fileId, skey, filename, onError}) =>{
+export const fileDownload = ({fileId, skey, filename, onResponse, onError}) =>{
     axios.get( FILE_DOWN_GET+"/"+fileId+"/"+skey+"/"+filename,
         {
             responseType: 'blob',
@@ -73,6 +73,9 @@ export const fileDownload = ({fileId, skey, filename, onError}) =>{
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
+            if(onResponse){
+                onResponse();
+            }
         }
     ).catch(error => {
         return handleError(error,onError);