diff --git a/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx b/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
index 6e5dfd3..54695db 100644
--- a/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
+++ b/src/components/dashboard/navgan/followUp-loan/RequestCard.jsx
@@ -1,25 +1,50 @@
-import {Card, CardContent, CardHeader, Grid, Typography} from "@mui/material";
-import SellIcon from '@mui/icons-material/Sell';
+import {Box, Button, Card, CardContent, Grid, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
-
+import moment from "jalali-moment";
+import {LinkRouting} from "@witel/webapp-builder";
+import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
 
 const RequestCard = ({item}) => {
     const t = useTranslations();
     return (
-        <Grid item xs={12} md={6} lg={4}>
+        <Grid item xs={12} lg={6} xl={4}>
             <Card sx={{
                 width: "100%",
                 boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
             }}>
-                <CardHeader
-                    avatar={<SellIcon color="primary"/>}
-                    title={`${t("LoanFollowUp.request_number")}: (${item.id})`}
-                    subheader={item.latest_history_created_at}
-                />
-                <CardContent sx={{pt: 0}}>
-                    <Typography variant="button">
-                        {item.loan_state}
+                <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , paddingBottom: '16px !important'}}>
+                    <Box
+                        sx={{
+                            borderLeft: '6px solid',
+                            borderColor: 'primary.main',
+                            borderRadius: '6px 0px 0px 6px',
+                            paddingLeft: '10px',
+                        }}
+                    >
+                        <Typography variant="h6" sx={{lineHeight: 2 , fontWeight:'bold'}}>
+                            {`${t("LoanFollowUp.loan_unique_code")}: ${item.id}`}
+                        </Typography>
+                    </Box>
+                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
+                        {`${t("LoanFollowUp.loan_date")}: ${moment(item.created_at).locale("fa").format("HH:mm | YYYY/MM/DD")}`}
                     </Typography>
+                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
+                        {`${t("LoanFollowUp.loan_bank_branch")}: ${item.branch_info === null ? '-' : item.branch_info}`}
+                    </Typography>
+                    <Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
+                        {`${t("LoanFollowUp.loan_status")}: `}
+                        {item.loan_state}
+                        {item.state_id >= 1 && item.state_id <= 6 && <AccessTimeFilledIcon sx={{verticalAlign: 'middle', marginLeft: '4px' , color: '#48a4df'}}/>}
+                        {item.state_id === 8 && <CheckCircleIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'green'}}/>}
+                        {item.state_id === 7 && <CancelIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'red'}}/>}
+                    </Typography>
+                    <Button variant="contained" color="primary" sx={{alignSelf: 'flex-end'}}>
+                        <LinkRouting underline="none" color="inherit" href={`/dashboard/navgan/${item.id}/show`}>
+                            {t("LoanFollowUp.loan_details")}
+                        </LinkRouting>
+                    </Button>
                 </CardContent>
             </Card>
         </Grid>
diff --git a/src/components/dashboard/navgan/followUp-loan/index.jsx b/src/components/dashboard/navgan/followUp-loan/index.jsx
index 558babb..aa031a6 100644
--- a/src/components/dashboard/navgan/followUp-loan/index.jsx
+++ b/src/components/dashboard/navgan/followUp-loan/index.jsx
@@ -1,55 +1,44 @@
-import {
-    Grid,
-    Stack,
-} from "@mui/material";
+import { Grid } from "@mui/material";
 import {useEffect, useState} from "react";
 import {SHOW_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
-import moment from "jalali-moment";
 import RequestCard from "@/components/dashboard/navgan/followUp-loan/RequestCard";
-import {useLoading, useRequest} from "@witel/webapp-builder";
+import {FullPageLayout , useRequest} from "@witel/webapp-builder";
 
 const LoanFollowUpComponent = () => {
     const requestServer = useRequest();
-    const {setLoadingPage} = useLoading();
+    const [isLoading, setIsLoading] = useState(false)
     const [requestsList, setRequestsList] = useState([]);
-    // get form data
     useEffect(() => {
-        setLoadingPage(true)
-        requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", {auth: true, notification: false})
+        setIsLoading(true)
+        requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", {
+            auth: true,
+            pending:false,
+            success:{notification:{show:false}}
+        })
             .then(function ({data}) {
                 const items = data.data;
-                const formattedData = items.map((item, index) => ({
-                    id: item.id,
-                    latest_history_created_at: moment(item.latest_history_created_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
-                    state_id: item.state_id,
-                    loan_state: item.loan_state,
-                }));
-                setRequestsList(formattedData);
-                setLoadingPage(false)
+                setRequestsList(items);
+                setIsLoading(false)
             })
             .catch(function (error) {
             })
     }, []);
 
     return (
-            <Stack
-                spacing={2}
-                sx={{
-                    p: 4,
-                    width: "100%",
-                }}
+        <FullPageLayout>
+            <Grid
+                container
+                columnSpacing={2}
+                rowSpacing={2}
+                sx={{alignItems: "start", justifyContent: "center", padding: "24px"}}
             >
-                <Grid
-                    container
-                    columnSpacing={2}
-                    rowSpacing={2}
-                    sx={{alignItems: "start", justifyContent: "center"}}
-                >
-                    {requestsList.map((item, index) => (
-                        <RequestCard item={item} key={item.id}/>
-                    ))}
-                </Grid>
-            </Stack>
+                {requestsList.map((item) => (
+                    <RequestCard item={item} key={item.id}/>
+                ))}
+            </Grid>
+        </FullPageLayout>
+
+
     );
 };