diff --git a/src/components/dashboard/loan-history/index.jsx b/src/components/dashboard/loan-history/index.jsx
index 0d8bee8..8fe4bed 100644
--- a/src/components/dashboard/loan-history/index.jsx
+++ b/src/components/dashboard/loan-history/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_LOAN_HISTORY} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -267,7 +267,25 @@ function DashboardLoanHistoryComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {
diff --git a/src/components/dashboard/machinary-office/index.jsx b/src/components/dashboard/machinary-office/index.jsx
index 256ca87..dbf72f0 100644
--- a/src/components/dashboard/machinary-office/index.jsx
+++ b/src/components/dashboard/machinary-office/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -267,7 +267,25 @@ function DashboardMachinaryOfficeComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {
diff --git a/src/components/dashboard/navgan-loan-management/index.jsx b/src/components/dashboard/navgan-loan-management/index.jsx
index d049e01..6c4b8f6 100644
--- a/src/components/dashboard/navgan-loan-management/index.jsx
+++ b/src/components/dashboard/navgan-loan-management/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -268,7 +268,25 @@ function DashboardNavganLoanManagementComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {
diff --git a/src/components/dashboard/navgan-province-manager/index.jsx b/src/components/dashboard/navgan-province-manager/index.jsx
index fc8fcef..ea4a568 100644
--- a/src/components/dashboard/navgan-province-manager/index.jsx
+++ b/src/components/dashboard/navgan-province-manager/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -211,7 +211,25 @@ function DashboardNavganProvinceManagerComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {
diff --git a/src/components/dashboard/passenger-boss/index.jsx b/src/components/dashboard/passenger-boss/index.jsx
index 0da7cc0..8932e19 100644
--- a/src/components/dashboard/passenger-boss/index.jsx
+++ b/src/components/dashboard/passenger-boss/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -268,7 +268,25 @@ function DashboardPassengerOfficeComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {
diff --git a/src/components/dashboard/transportation-assistance/index.jsx b/src/components/dashboard/transportation-assistance/index.jsx
index 46ad2b6..2890c68 100644
--- a/src/components/dashboard/transportation-assistance/index.jsx
+++ b/src/components/dashboard/transportation-assistance/index.jsx
@@ -1,4 +1,4 @@
-import {Box, Typography} from "@mui/material";
+import {Box, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
@@ -211,7 +211,25 @@ function DashboardTransportationAssistanceComponent() {
                 filterFn: "contains",
                 columnFilterModeOptions: ["contains", "equals", "notEquals"],
                 Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
+                    <Stack sx={{border: 1, borderColor: "divider", borderRadius: 1}} direction={'row'}>
+                        <Stack sx={{borderRight: 1, borderColor: "divider", textAlign: 'center', width: "40%"}}>
+                            {renderedCellValue.split('-')[3]}
+                        </Stack>
+                        <Stack direction={'row'} sx={{width: "100%", px: 0.5}}>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[2]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[1]}</Stack>
+                            <Stack sx={{
+                                textAlign: "center",
+                                width: "100%"
+                            }}>{renderedCellValue.split('-')[0]}</Stack>
+                        </Stack>
+                    </Stack>
                 ),
             },
             {