diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css
index 48fee66..9c64452 100644
--- a/src/assets/style/navbarStyles.css
+++ b/src/assets/style/navbarStyles.css
@@ -53,6 +53,7 @@
   left: 0;
   display: none;
   padding-left: 0px;
+  padding-bottom: 7px;
   /* border: 1px solid #0C489E; */
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.15);
diff --git a/src/pages/GazetteIssue/DataGrid.js b/src/pages/GazetteIssue/DataGrid.js
new file mode 100644
index 0000000..30b75fa
--- /dev/null
+++ b/src/pages/GazetteIssue/DataGrid.js
@@ -0,0 +1,93 @@
+// material-ui
+import * as React from 'react';
+// import { GridActionsCellItem, } from "@mui/x-data-grid";
+import { FiDataGrid } from "components/FiDataGrid";
+// import EditIcon from '@mui/icons-material/Edit';
+import { useEffect } from "react";
+import { dateStr } from "utils/DateUtils";
+// import { useNavigate } from "react-router-dom";
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function GazetteIssueTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    // const navigate = useNavigate()
+
+    useEffect(() => {
+        // console.log(recordList)
+        setRows(recordList);
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'issueYear',
+            field: 'issueYear',
+            headerName: 'Year',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.issueYear}</div>
+            },
+        },
+        {
+            id: 'volume',
+            field: 'volume',
+            headerName: 'Volume',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.volume}</div>
+            },
+        },
+        {
+            id: 'issueNo',
+            field: 'issueNo',
+            headerName: 'Issue No',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.issueNo}</div>
+            },
+        },
+        {
+            id: 'issueDate',
+            field: 'issueDate',
+            headerName: 'Issue Date',
+            flex: 2,
+            renderCell: (params) => {
+                let issueDate = params.row.issueDate;
+                return <div style={{ margin: 4 }}>{dateStr(issueDate)}</div>
+            },
+        },
+        {
+            id: 'closingDate',
+            field: 'closingDate',
+            headerName: 'Closing Date',
+            flex: 2,
+            renderCell: (params) => {
+                let closingDate = params.row.closingDate;
+                return <div style={{ margin: 4 }}>{dateStr(closingDate)}</div>
+            },
+        },
+        {
+            id: 'issueDesc',
+            field: 'issueDesc',
+            headerName: 'Description',
+            flex: 2,
+        },
+    ];
+
+    // function handleRowDoubleClick(params) {
+    //     navigate('/emailTemplate/' + params.id);
+    // }
+
+    return (
+        <div style={{ height: "fit-content", width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={20}
+                // onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/GazetteIssue/SearchForm.js b/src/pages/GazetteIssue/SearchForm.js
new file mode 100644
index 0000000..8d4782c
--- /dev/null
+++ b/src/pages/GazetteIssue/SearchForm.js
@@ -0,0 +1,129 @@
+// material-ui
+import {
+    Button,
+    Grid, 
+    TextField,
+    Autocomplete,
+    Typography
+} from '@mui/material';
+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 ||============================== //
+
+
+const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
+    const [selectedYear, setSelectedYear] = React.useState([]);
+    // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
+    const [comboList, setComboList] = React.useState([]);
+    // const [onReady, setOnReady] = React.useState(false);
+
+    const { 
+        // register, 
+        handleSubmit } = useForm()
+
+    const onSubmit = () => {
+        if (selectedYear !=null){
+            const temp = {
+                year: selectedYear.label,
+            };
+            applySearch(temp);
+        }
+    };
+
+    React.useEffect(() => {
+        if (comboData && comboData.length > 0) {
+            // console.log(comboData)
+            // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
+            // console.log(labelValue)
+            if(selectedYear.length == 0){
+                setSelectedYear(comboData[0])
+            }
+            setComboList(comboData)
+            // setSelectedYear(searchCriteria.dateFrom)
+        }
+    }, [comboData]);
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            >
+
+            <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:1}}>
+                        <Typography variant="h5" >
+                            Year
+                        </Typography>
+                    </Grid>
+                    {/*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 }}>
+                       <Autocomplete
+                            disablePortal
+                            id="year-combo"
+                            value={selectedYear}
+                            // defaultValue={selectedYear}
+                            options={comboList}
+                            // disabled={checkCountry}
+                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            onChange={(event, newValue) => {
+                                setSelectedYear(newValue);
+                            }}
+                            sx={{
+                                "& .MuiInputBase-root": { height: "41px" },
+                                "#year-combo": { padding: "0px 0px 0px 0px" },
+                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                            }}
+                            renderInput={(params) => <TextField {...params} placeholder={""}/>}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        {/* <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        /> */}
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Search
+                            </Button>
+                        </Grid>
+                    </ThemeProvider>
+                </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchGazetteIssueForm;
diff --git a/src/pages/GazetteIssue/index.js b/src/pages/GazetteIssue/index.js
index f231349..1aaaa18 100644
--- a/src/pages/GazetteIssue/index.js
+++ b/src/pages/GazetteIssue/index.js
@@ -10,6 +10,12 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+import MainCard from 'components/MainCard';
+
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const GazetteIssueTable = Loadable(React.lazy(() => import('./DataGrid')))
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -22,17 +28,66 @@ const BackgroundHead = {
 }
 import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import { dateStr_Year } from "utils/DateUtils";
 import { notifySaveSuccess } from 'utils/CommonFunction';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    const [record, setRecord] = React.useState([]);
+    const [comboData, setComboData] = React.useState([]);
+    const [onReady, setOnReady] = React.useState(false);
+    const [onSearchReady, setOnSearchReady] = React.useState(false);
+    // const navigate = useNavigate()
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        year: dateStr_Year(new Date()),
+        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+
     const [attachments, setAttachments] = React.useState([]);
     const [waitImport, setWaitImport] = React.useState(false);
     const [waitDownload, setWaitDownload] = React.useState(false);
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
     const [warningText, setWarningText] = React.useState("");
 
+    React.useEffect(() => {
+        // console.log(searchCriteria)
+        setOnSearchReady(false)
+        loadForm();
+    }, [searchCriteria]);
+    
+    function loadForm() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE,
+            params: searchCriteria,
+            onSuccess: (responseData) => {
+                // console.log(comboData)
+                setRecord(responseData);
+                if (comboData.length == 0) {
+                    loadCombo();
+                }else{
+                    setOnSearchReady(true)
+                }
+            }
+        });
+    }
+
+    function loadCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE_YEAR_COMBO,
+            onSuccess: (responseData) => {
+                let combo = responseData;
+                setComboData(combo);
+                setOnReady(true);
+                setOnSearchReady(true)
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
     React.useEffect(() => {
         if (attachments.length > 0) {
             importHoliday();
@@ -81,12 +136,20 @@ const Index = () => {
                 notifySaveSuccess()
                 setWaitImport(false);
                 setAttachments([]);
-                // loadForm();
+                loadForm();
             }
         });
     }
 
     return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            (
                 <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
@@ -138,7 +201,29 @@ const Index = () => {
                             
                         </Stack>
                     </Grid>
-
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} lg={12} width="100%">
+                    <SearchForm 
+                        applySearch={applySearch}
+                        // generateXML={generateXML}
+                        searchCriteria={searchCriteria}
+                        comboData={comboData}
+                    />
+                    </Grid>
+                    {/*row 2*/}
+                    {!onSearchReady?
+                        <LoadingComponent/>:
+                        <Grid item xs={12} md={12} lg={12} width="100%">
+                            <MainCard elevation={0}
+                                border={false}
+                                content={false}
+                            >
+                                <GazetteIssueTable
+                                    recordList={record}
+                                />
+                            </MainCard>
+                        </Grid>
+                    }
                     <div>
                         <Dialog
                             open={isWarningPopUp}
@@ -161,6 +246,7 @@ const Index = () => {
                         </Dialog>
                     </div>
                 </Grid >
+            )
     );
 };
 
diff --git a/src/pages/Holiday/DataGrid.js b/src/pages/Holiday/DataGrid.js
index 807188d..5120dff 100644
--- a/src/pages/Holiday/DataGrid.js
+++ b/src/pages/Holiday/DataGrid.js
@@ -9,13 +9,13 @@ import { dateStr } from "utils/DateUtils";
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function EmailTemplateTable({ recordList }) {
+export default function HolidayTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
 
     // const navigate = useNavigate()
 
     useEffect(() => {
-        console.log(recordList)
+        // console.log(recordList)
         setRows(recordList);
     }, [recordList]);
 
diff --git a/src/pages/Holiday/SearchForm.js b/src/pages/Holiday/SearchForm.js
index fcaf358..2ebdac6 100644
--- a/src/pages/Holiday/SearchForm.js
+++ b/src/pages/Holiday/SearchForm.js
@@ -16,7 +16,7 @@ import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, comboData}) => {
+const SearchHolidayForm = ({ applySearch, comboData}) => {
     const [selectedYear, setSelectedYear] = React.useState([]);
     // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
     const [comboList, setComboList] = React.useState([]);
@@ -126,4 +126,4 @@ const SearchPublicNoticeForm = ({ applySearch, comboData}) => {
     );
 };
 
-export default SearchPublicNoticeForm;
+export default SearchHolidayForm;
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index a954e4a..01ce47e 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -117,9 +117,11 @@ export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/applicatio
 export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save';
 
 //gazette
-export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo';
-export const GET_ISSUE_LIST = apiPath+'/gazette-issue/export';
-export const POST_ISSUE_FILE = apiPath+'/gazette-issue/import';
+export const GET_ISSUE_COMBO = apiPath+'/gazette-issue/combo';//GET
+export const GET_ISSUE_LIST = apiPath+'/gazette-issue/export';//GET
+export const POST_ISSUE_FILE = apiPath+'/gazette-issue/import';//POST
+export const GET_ISSUE = apiPath+'/gazette-issue/list'; //GET
+export const GET_ISSUE_YEAR_COMBO = apiPath+'/gazette-issue/combo-year'; //GET
 
 export const CHECK_CREATE_PROOF = apiPath+'/proof/check-create';//GET
 export const LIST_PROOF = apiPath+'/proof/list';//GET