Styles: header added

src/app/(auth)/log-in/loginPage.module.scss

@@ -1,6 +1,6 @@
 .loginPage {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   .images {
     width: 100%;
     max-width: 500px;

src/app/(dashboard)/home/page.tsx

@@ -3,14 +3,20 @@ import { Box, Card, Typography } from "@mui/material";
 import React from "react";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
+import TitleHeader from "@/components/titleHeader/titleHeader";
 
 const HomePage = () => {
   return (
     <Box>
-      <Card>
+      <TitleHeader />
-        <CardHeader>
+      <Card
-          <Typography variant="h4">Projects</Typography>
+        sx={{ boxShadow: "none", borderRadius: "12px", marginBlockStart: 2 }}
-        </CardHeader>
+      >
+        <CardHeader
+          title="Projects"
+          fontWeight={"bold"}
+          sx={{ borderBlockEnd: "1px solid var(--primary_light)" }}
+        />
         <CardContent>
           <TanStackTable />
         </CardContent>

src/app/globals.scss

@@ -73,7 +73,7 @@
 /* Body */
 html,
 body {
-  height: 100%;
+  min-height: 100vh;
   padding: 0;
   margin: 0;
 }

src/components/titleHeader/titleHeader.tsx

@@ -0,0 +1,63 @@
+import { Box, Card, CardContent, Typography } from "@mui/material";
+import React from "react";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import HomeIcon from "@mui/icons-material/Home";
+
+// function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+//   event.preventDefault();
+//   console.info('You clicked a breadcrumb.');
+// }
+
+const TitleHeader = () => {
+  return (
+    <Box width={"100%"}>
+      <Card sx={{ boxShadow: "none", borderRadius: "12px" }}>
+        <CardContent
+          sx={{
+            paddingBlock: 1,
+            paddingInline: 2,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            "&:last-child": {
+              paddingBottom: 1,
+            },
+          }}
+        >
+          <Typography variant="h6" color="text.primary" fontWeight={"bold"}>
+            Projects
+          </Typography>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link
+              fontSize={"small"}
+              fontWeight={"medium"}
+              underline="hover"
+              color="inherit"
+              href="/"
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+              }}
+            >
+              <HomeIcon fontSize="small" />
+              Page
+            </Link>
+            <Link
+              fontSize={"small"}
+              fontWeight={"medium"}
+              underline="hover"
+              color="inherit"
+              href="/material-ui/getting-started/installation/"
+            >
+              Project Table
+            </Link>
+          </Breadcrumbs>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default TitleHeader;

src/components/wrapper/DashboardWrapper.module.scss

@@ -7,4 +7,5 @@
 }
 .dashboard_main {
   background: var(--dashboard-bg);
+  min-height: 100vh;
 }

src/theme.ts

@@ -22,6 +22,17 @@ const theme = createTheme({
       light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color
     },
   },
+  components: {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          "&:last-child": {
+            paddingBottom: "16px", // Override the padding for the last child
+          },
+        },
+      },
+    },
+  },
 });
 
 export default theme;

src/utilities/svgConstant.tsx

@@ -1,6 +1,6 @@
 // Import necessary functions and types
+import { createSvgIcon } from "@mui/material";
 import React from "react";
-import { createSvgIcon } from "@mui/material/utils";
 
 // Define the SVG component using createSvgIcon
 export const BUILDING = createSvgIcon(