diff --git a/src/pages/DemandNote/Create/SearchForm.js b/src/pages/DemandNote/Create/SearchForm.js
index 740cde8..2473214 100644
--- a/src/pages/DemandNote/Create/SearchForm.js
+++ b/src/pages/DemandNote/Create/SearchForm.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography,
@@ -15,6 +14,8 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -35,22 +36,6 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
     const [issueCombo, setIssueCombo] = React.useState([]);
     const navigate = useNavigate()
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     React.useEffect(() => {
         if (issueComboData && issueComboData.length > 0) {
             setIssueCombo(issueComboData);
@@ -128,20 +113,21 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={_sx}
         >
 
             <form>
                 {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h5">Please Select Gazette Issue :</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Please Select Gazette Issue :
+                        </Typography>
                     </Grid>
-                </CardContent>
+                    {/*row 2*/}
 
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 1 }}>
+                    <Grid container display="flex" alignItems={"center"} sx={{mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}>
                         <Autocomplete
                             disablePortal
                             size="small"
@@ -178,17 +164,15 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         </Button>
                     </Grid> */}
                     <Grid item sx={{ ml: 3, mr: 3 }} >
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={onSubmit}
                             color="success"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Create</Typography>
+                        >
+                            Create
                         </Button>
+                        </ThemeProvider>
                     </Grid>
 
                     <Grid item sx={{ ml: 3, mr: 3 }} >
@@ -199,6 +183,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         <Typography variant="h5">Pending Publish: {publishCount}</Typography>
                     </Grid>
                 </Grid>
+                </Grid>
             </form>
             <div>
                 <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
diff --git a/src/pages/DemandNote/Create/index.js b/src/pages/DemandNote/Create/index.js
index b8740ac..d0e09c2 100644
--- a/src/pages/DemandNote/Create/index.js
+++ b/src/pages/DemandNote/Create/index.js
@@ -80,16 +80,18 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{minHeight: '85vh', backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Create Demand Note</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                Create Demand Note
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     issueComboData={issueCombo}
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index ef85bcf..4e8cbb2 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -18,6 +18,8 @@ import { notifyDownloadSuccess } from 'utils/CommonFunction';
 
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ recordList, reloadFun, applySearch }) {
@@ -272,6 +274,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
     return (
         <div style={{ height: '100%', width: '100%' }}>
             <Grid container maxWidth justifyContent="flex-start">
+                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <input
                         id="uploadFileBtn"
@@ -295,62 +298,46 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                         <Button
                             component="span"
                             variant="contained"
-                            size="large"
                         >
-                            <Typography variant="h5">Attach DN</Typography>
+                            Attach DN
                         </Button>
                     </label>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={findReadyToSend}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Ready Send</Typography>
+                    >
+                        Ready Send
                     </Button>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setSendPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Send DN</Typography>
+                    >
+                        Send DN
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => exportXml()}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Export XML</Typography>
+                    >
+                        Export XML
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setConfirmPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Mark as Paid</Typography>
+                        >
+                        Mark as Paid
                     </Button>
                 </Grid>
+                </ThemeProvider>
             </Grid>
             <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
                 <FiDataGrid
diff --git a/src/pages/DemandNote/Search/SearchForm.js b/src/pages/DemandNote/Search/SearchForm.js
index 3a8bc4a..222e6b8 100644
--- a/src/pages/DemandNote/Search/SearchForm.js
+++ b/src/pages/DemandNote/Search/SearchForm.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -12,6 +11,8 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -88,14 +89,12 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                     {/*row 1*/}
-                    <Grid item xs={12}>
-                        <CardContent sx={{ px: 2.5, pt: 3 }}>
-                            <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">Search Form</Typography>
-                            </Grid>
-                        </CardContent>
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1, ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form
+                        </Typography>
                     </Grid>
                     {/*row 2*/}
                     <Grid container display="flex" alignItems={"center"}>
@@ -261,28 +260,25 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb:3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={resetForm}
                                 >
-                                <Typography variant="h5">Clear</Typography>
+                                Clear
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3, mb:3}}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Submit</Typography>
+                            >
+                                Submit
                             </Button>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index 23eaa30..d84e03e 100644
--- a/src/pages/DemandNote/Search/index.js
+++ b/src/pages/DemandNote/Search/index.js
@@ -98,12 +98,14 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Demand Note</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                Demand Note
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
                     <SearchForm
                         applySearch={applySearch}
                         orgComboData={orgCombo}
diff --git a/src/pages/GFMIS/SearchForm.js b/src/pages/GFMIS/SearchForm.js
index 01e65fb..7f9bebc 100644
--- a/src/pages/GFMIS/SearchForm.js
+++ b/src/pages/GFMIS/SearchForm.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     // Autocomplete,
     Typography
@@ -10,6 +9,8 @@ import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // import * as ComboData from "utils/ComboData";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -20,22 +21,6 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     const { register, handleSubmit, getValues } = useForm()
 
     const onSubmit = (data) => {
@@ -67,20 +52,19 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={_sx}
             >
 
-            <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h5">Credit Date</Typography>
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Credit Date
+                        </Typography>
                     </Grid>
-                </CardContent>
-
-                {/*row 2*/}
-                <Grid container  alignItems="center">
+                    {/*row 2*/}
 
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -121,31 +105,26 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                     </Grid> */}
                 </Grid>
                 <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mb: 3, }} >
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Preview</Typography>
+                        >
+                            Preview
                         </Button>
                     </Grid>
 
                     <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={generateHandler}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Generate</Typography>
+                        >
+                            Generate
                         </Button>
                     </Grid>
+                    </ThemeProvider>
+                </Grid>
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/GFMIS/index.js b/src/pages/GFMIS/index.js
index aaecf68..a20353a 100644
--- a/src/pages/GFMIS/index.js
+++ b/src/pages/GFMIS/index.js
@@ -100,7 +100,7 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{minHeight: '85vh', backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -109,7 +109,7 @@ const Index = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     generateXML={generateXML}
diff --git a/src/pages/Payment/Search_GLD/SearchForm.js b/src/pages/Payment/Search_GLD/SearchForm.js
index 954bc4f..83dd76d 100644
--- a/src/pages/Payment/Search_GLD/SearchForm.js
+++ b/src/pages/Payment/Search_GLD/SearchForm.js
@@ -10,6 +10,8 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -44,7 +46,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
             >
 
             <form onSubmit={handleSubmit(onSubmit)} >
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: 2.5}} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
                         <Typography variant="h5" >
@@ -148,32 +150,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mb: 3}}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Reset</Typography>
+                        >
+                            Reset
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
+                        >
+                            Submit
                         </Button>
                     </Grid>
+                    </ThemeProvider>
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/Payment/Search_GLD/index.js b/src/pages/Payment/Search_GLD/index.js
index d27248c..f62fe09 100644
--- a/src/pages/Payment/Search_GLD/index.js
+++ b/src/pages/Payment/Search_GLD/index.js
@@ -75,7 +75,7 @@ const Index = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     searchCriteria={searchCriteria}