diff --git a/public/icons/headerLogo.png b/public/icons/headerLogo.png
new file mode 100644
index 0000000..86dbfcd
Binary files /dev/null and b/public/icons/headerLogo.png differ
diff --git a/src/components/first/FooterDetails.jsx b/src/components/first/FooterDetails.jsx
new file mode 100644
index 0000000..df9b43f
--- /dev/null
+++ b/src/components/first/FooterDetails.jsx
@@ -0,0 +1,25 @@
+import {Box, Button, Container, Grid, Stack, Typography} from "@mui/material";
+
+const FooterDetails = () => {
+
+    return(
+        <Box sx={{backgroundColor : 'black', color : 'white'}}>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Grid container sx={{py : 2}}>
+                    <Grid item xs={12} md={8}>
+                        <Button disabled startIcon={<img src='/icons/favicon.png' alt="Your Alt Text" />}>
+                            <Typography color={'white'}>کلیه حقوق محفوظ و متعلق به سازمان راهداری و حمل و نقل جاده ای می باشد</Typography>
+                        </Button>
+                    </Grid>
+                    <Grid item xs={12} md={4}>
+                        <Stack alignItems='center' justifyItems='center'>
+                            <Typography>آخرین به روزرسانی</Typography>
+                            <Typography>1402/08/22</Typography>
+                        </Stack>
+                    </Grid>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+export default FooterDetails
\ No newline at end of file
diff --git a/src/components/first/HeaderDetails.jsx b/src/components/first/HeaderDetails.jsx
new file mode 100644
index 0000000..adbd77c
--- /dev/null
+++ b/src/components/first/HeaderDetails.jsx
@@ -0,0 +1,16 @@
+import {Box, Button, Container, Grid} from "@mui/material";
+
+const HeaderDetails = () => {
+    return(
+        <Box>
+            <Container sx={{py : 3}} maxWidth="xl">
+                <Grid container>
+                    <Grid item sx={12} md={8}>
+                        <Button startIcon={<img src='/icons/headerLogo.png' alt='icon'/>} />
+                    </Grid>
+                </Grid>
+            </Container>
+        </Box>
+    )
+}
+export default HeaderDetails
\ No newline at end of file
diff --git a/src/components/first/HeaderLandingPage.jsx b/src/components/first/LoanRegister.jsx
similarity index 94%
rename from src/components/first/HeaderLandingPage.jsx
rename to src/components/first/LoanRegister.jsx
index 4e53dec..1d84a0e 100644
--- a/src/components/first/HeaderLandingPage.jsx
+++ b/src/components/first/LoanRegister.jsx
@@ -2,12 +2,12 @@ import {Box, Container, Grid, Stack, Typography} from "@mui/material";
 import LinkRouting from "@/core/components/LinkRouting";
 import {useTranslations} from "next-intl";
 
-const HeaderLandingPage = () => {
+const LoanRegister = () => {
     const t = useTranslations();
     return(
         <Box sx={{backgroundColor : "primary.light"}}>
             <Container sx={{padding : 3, color : "white"}} maxWidth="xl">
-                <Typography sx={{my : 3}} textAlign={'center'} variant={'h3'}>
+                <Typography sx={{my : 3}} variant={'h3'}>
                     {t("app_name")}
                 </Typography>
                 <Stack sx={{color : "white"}}>
@@ -43,4 +43,4 @@ const HeaderLandingPage = () => {
         </Box>
     )
 }
-export default HeaderLandingPage
\ No newline at end of file
+export default LoanRegister
\ No newline at end of file
diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx
index 922f571..e06a00a 100644
--- a/src/components/first/index.jsx
+++ b/src/components/first/index.jsx
@@ -1,9 +1,11 @@
 import FullPageLayout from "@/layouts/FullPageLayout";
 import {Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
-import HeaderLandingPage from "@/components/first/HeaderLandingPage";
+import LoanRegister from "@/components/first/LoanRegister";
 import LoanDescription from "@/components/first/LoanDescription";
 import LoanCondition from "@/components/first/LoanCondition";
+import FooterDetails from "@/components/first/FooterDetails";
+import HeaderDetails from "@/components/first/HeaderDetails";
 
 const FirstComponent = () => {
     const t = useTranslations();
@@ -11,9 +13,11 @@ const FirstComponent = () => {
     return (
         <FullPageLayout>
             <Stack>
-                <HeaderLandingPage />
+                <HeaderDetails />
+                <LoanRegister />
                 <LoanDescription />
                 <LoanCondition />
+                <FooterDetails />
             </Stack>
         </FullPageLayout>
     );