diff --git a/frontend/src/pages/dashboard/index.js b/frontend/src/pages/dashboard/index.js
index 7651895..c61fef3 100644
--- a/frontend/src/pages/dashboard/index.js
+++ b/frontend/src/pages/dashboard/index.js
@@ -1,4 +1,3 @@
-export * from "@/pages/dashboard/home";
-export * from "@/pages/dashboard/profile";
-export * from "@/pages/dashboard/tables";
-export * from "@/pages/dashboard/notifications";
+export * from "@/pages/dashboard/stacks";
+export * from "@/pages/dashboard/maintenance";
+export * from "@/pages/dashboard/logs";
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/logs.jsx b/frontend/src/pages/dashboard/logs.jsx
new file mode 100644
index 0000000..dff6484
--- /dev/null
+++ b/frontend/src/pages/dashboard/logs.jsx
@@ -0,0 +1,112 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Typography,
+  Avatar,
+  Chip,
+  Tooltip,
+  Progress,
+} from "@material-tailwind/react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { authorsTableData, projectsTableData } from "@/data";
+
+export function Logs() {
+  return (
+    <div className="mt-12 mb-8 flex flex-col gap-12">
+      <Card>
+        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
+          <Typography variant="h6" color="white">
+            Authors Table
+          </Typography>
+        </CardHeader>
+        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+          <table className="w-full min-w-[640px] table-auto">
+            <thead>
+              <tr>
+                {["author", "function", "status", "employed", ""].map((el) => (
+                  <th
+                    key={el}
+                    className="border-b border-blue-gray-50 py-3 px-5 text-left"
+                  >
+                    <Typography
+                      variant="small"
+                      className="text-[11px] font-bold uppercase text-blue-gray-400"
+                    >
+                      {el}
+                    </Typography>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {authorsTableData.map(
+                ({ img, name, email, job, online, date }, key) => {
+                  const className = `py-3 px-5 ${
+                    key === authorsTableData.length - 1
+                      ? ""
+                      : "border-b border-blue-gray-50"
+                  }`;
+
+                  return (
+                    <tr key={name}>
+                      <td className={className}>
+                        <div className="flex items-center gap-4">
+                          <Avatar src={img} alt={name} size="sm" variant="rounded" />
+                          <div>
+                            <Typography
+                              variant="small"
+                              color="blue-gray"
+                              className="font-semibold"
+                            >
+                              {name}
+                            </Typography>
+                            <Typography className="text-xs font-normal text-blue-gray-500">
+                              {email}
+                            </Typography>
+                          </div>
+                        </div>
+                      </td>
+                      <td className={className}>
+                        <Typography className="text-xs font-semibold text-blue-gray-600">
+                          {job[0]}
+                        </Typography>
+                        <Typography className="text-xs font-normal text-blue-gray-500">
+                          {job[1]}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Chip
+                          variant="gradient"
+                          color={online ? "green" : "blue-gray"}
+                          value={online ? "online" : "offline"}
+                          className="py-0.5 px-2 text-[11px] font-medium w-fit"
+                        />
+                      </td>
+                      <td className={className}>
+                        <Typography className="text-xs font-semibold text-blue-gray-600">
+                          {date}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          as="a"
+                          href="#"
+                          className="text-xs font-semibold text-blue-gray-600"
+                        >
+                          Edit
+                        </Typography>
+                      </td>
+                    </tr>
+                  );
+                }
+              )}
+            </tbody>
+          </table>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
+
+export default Logs;
diff --git a/frontend/src/pages/dashboard/maintenance.jsx b/frontend/src/pages/dashboard/maintenance.jsx
new file mode 100644
index 0000000..29e89d0
--- /dev/null
+++ b/frontend/src/pages/dashboard/maintenance.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import {
+  Typography,
+  Alert,
+  Card,
+  CardHeader,
+  CardBody,
+} from "@material-tailwind/react";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+
+export function Maintenance() {
+  const [showAlerts, setShowAlerts] = React.useState({
+    blue: true,
+    green: true,
+    orange: true,
+    red: true,
+  });
+  const [showAlertsWithIcon, setShowAlertsWithIcon] = React.useState({
+    blue: true,
+    green: true,
+    orange: true,
+    red: true,
+  });
+  const alerts = ["gray", "green", "orange", "red"];
+
+  return (
+    <div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
+      <Card>
+        <CardHeader
+          color="transparent"
+          floated={false}
+          shadow={false}
+          className="m-0 p-4"
+        >
+          <Typography variant="h5" color="blue-gray">
+            Alerts
+          </Typography>
+        </CardHeader>
+        <CardBody className="flex flex-col gap-4 p-4">
+          {alerts.map((color) => (
+            <Alert
+              key={color}
+              open={showAlerts[color]}
+              color={color}
+              onClose={() => setShowAlerts((current) => ({ ...current, [color]: false }))}
+            >
+              A simple {color} alert with an <a href="#">example link</a>. Give
+              it a click if you like.
+            </Alert>
+          ))}
+        </CardBody>
+      </Card>
+      <Card>
+        <CardHeader
+          color="transparent"
+          floated={false}
+          shadow={false}
+          className="m-0 p-4"
+        >
+          <Typography variant="h5" color="blue-gray">
+            Alerts with Icon
+          </Typography>
+        </CardHeader>
+        <CardBody className="flex flex-col gap-4 p-4">
+          {alerts.map((color) => (
+            <Alert
+              key={color}
+              open={showAlertsWithIcon[color]}
+              color={color}
+              icon={
+                <InformationCircleIcon strokeWidth={2} className="h-6 w-6" />
+              }
+              onClose={() => setShowAlertsWithIcon((current) => ({
+                ...current,
+                [color]: false,
+              }))}
+            >
+              A simple {color} alert with an <a href="#">example link</a>. Give
+              it a click if you like.
+            </Alert>
+          ))}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
+
+export default Maintenance;
diff --git a/frontend/src/pages/dashboard/stacks.jsx b/frontend/src/pages/dashboard/stacks.jsx
new file mode 100644
index 0000000..af12754
--- /dev/null
+++ b/frontend/src/pages/dashboard/stacks.jsx
@@ -0,0 +1,258 @@
+import React from "react";
+import {
+  Typography,
+  Card,
+  CardHeader,
+  CardBody,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  Avatar,
+  Tooltip,
+  Progress,
+} from "@material-tailwind/react";
+import {
+  EllipsisVerticalIcon,
+  ArrowUpIcon,
+} from "@heroicons/react/24/outline";
+import { StatisticsCard } from "@/widgets/cards";
+import { StatisticsChart } from "@/widgets/charts";
+import {
+  statisticsCardsData,
+  statisticsChartsData,
+  projectsTableData,
+  ordersOverviewData,
+} from "@/data";
+import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+
+export function Stacks() {
+  return (
+    <div className="mt-12">
+      <div className="mb-12 grid gap-y-10 gap-x-6 md:grid-cols-2 xl:grid-cols-4">
+        {statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
+          <StatisticsCard
+            key={title}
+            {...rest}
+            title={title}
+            icon={React.createElement(icon, {
+              className: "w-6 h-6 text-white",
+            })}
+            footer={
+              <Typography className="font-normal text-blue-gray-600">
+                <strong className={footer.color}>{footer.value}</strong>
+                &nbsp;{footer.label}
+              </Typography>
+            }
+          />
+        ))}
+      </div>
+      <div className="mb-6 grid grid-cols-1 gap-y-12 gap-x-6 md:grid-cols-2 xl:grid-cols-3">
+        {statisticsChartsData.map((props) => (
+          <StatisticsChart
+            key={props.title}
+            {...props}
+            footer={
+              <Typography
+                variant="small"
+                className="flex items-center font-normal text-blue-gray-600"
+              >
+                <ClockIcon strokeWidth={2} className="h-4 w-4 text-blue-gray-400" />
+                &nbsp;{props.footer}
+              </Typography>
+            }
+          />
+        ))}
+      </div>
+      <div className="mb-4 grid grid-cols-1 gap-6 xl:grid-cols-3">
+        <Card className="overflow-hidden xl:col-span-2 border border-blue-gray-100 shadow-sm">
+          <CardHeader
+            floated={false}
+            shadow={false}
+            color="transparent"
+            className="m-0 flex items-center justify-between p-6"
+          >
+            <div>
+              <Typography variant="h6" color="blue-gray" className="mb-1">
+                Projects
+              </Typography>
+              <Typography
+                variant="small"
+                className="flex items-center gap-1 font-normal text-blue-gray-600"
+              >
+                <CheckCircleIcon strokeWidth={3} className="h-4 w-4 text-blue-gray-200" />
+                <strong>30 done</strong> this month
+              </Typography>
+            </div>
+            <Menu placement="left-start">
+              <MenuHandler>
+                <IconButton size="sm" variant="text" color="blue-gray">
+                  <EllipsisVerticalIcon
+                    strokeWidth={3}
+                    fill="currenColor"
+                    className="h-6 w-6"
+                  />
+                </IconButton>
+              </MenuHandler>
+              <MenuList>
+                <MenuItem>Action</MenuItem>
+                <MenuItem>Another Action</MenuItem>
+                <MenuItem>Something else here</MenuItem>
+              </MenuList>
+            </Menu>
+          </CardHeader>
+          <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+            <table className="w-full min-w-[640px] table-auto">
+              <thead>
+                <tr>
+                  {["companies", "members", "budget", "completion"].map(
+                    (el) => (
+                      <th
+                        key={el}
+                        className="border-b border-blue-gray-50 py-3 px-6 text-left"
+                      >
+                        <Typography
+                          variant="small"
+                          className="text-[11px] font-medium uppercase text-blue-gray-400"
+                        >
+                          {el}
+                        </Typography>
+                      </th>
+                    )
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {projectsTableData.map(
+                  ({ img, name, members, budget, completion }, key) => {
+                    const className = `py-3 px-5 ${
+                      key === projectsTableData.length - 1
+                        ? ""
+                        : "border-b border-blue-gray-50"
+                    }`;
+
+                    return (
+                      <tr key={name}>
+                        <td className={className}>
+                          <div className="flex items-center gap-4">
+                            <Avatar src={img} alt={name} size="sm" />
+                            <Typography
+                              variant="small"
+                              color="blue-gray"
+                              className="font-bold"
+                            >
+                              {name}
+                            </Typography>
+                          </div>
+                        </td>
+                        <td className={className}>
+                          {members.map(({ img, name }, key) => (
+                            <Tooltip key={name} content={name}>
+                              <Avatar
+                                src={img}
+                                alt={name}
+                                size="xs"
+                                variant="circular"
+                                className={`cursor-pointer border-2 border-white ${
+                                  key === 0 ? "" : "-ml-2.5"
+                                }`}
+                              />
+                            </Tooltip>
+                          ))}
+                        </td>
+                        <td className={className}>
+                          <Typography
+                            variant="small"
+                            className="text-xs font-medium text-blue-gray-600"
+                          >
+                            {budget}
+                          </Typography>
+                        </td>
+                        <td className={className}>
+                          <div className="w-10/12">
+                            <Typography
+                              variant="small"
+                              className="mb-1 block text-xs font-medium text-blue-gray-600"
+                            >
+                              {completion}%
+                            </Typography>
+                            <Progress
+                              value={completion}
+                              variant="gradient"
+                              color={completion === 100 ? "green" : "blue"}
+                              className="h-1"
+                            />
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  }
+                )}
+              </tbody>
+            </table>
+          </CardBody>
+        </Card>
+        <Card className="border border-blue-gray-100 shadow-sm">
+          <CardHeader
+            floated={false}
+            shadow={false}
+            color="transparent"
+            className="m-0 p-6"
+          >
+            <Typography variant="h6" color="blue-gray" className="mb-2">
+              Orders Overview
+            </Typography>
+            <Typography
+              variant="small"
+              className="flex items-center gap-1 font-normal text-blue-gray-600"
+            >
+              <ArrowUpIcon
+                strokeWidth={3}
+                className="h-3.5 w-3.5 text-green-500"
+              />
+              <strong>24%</strong> this month
+            </Typography>
+          </CardHeader>
+          <CardBody className="pt-0">
+            {ordersOverviewData.map(
+              ({ icon, color, title, description }, key) => (
+                <div key={title} className="flex items-start gap-4 py-3">
+                  <div
+                    className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${
+                      key === ordersOverviewData.length - 1
+                        ? "after:h-0"
+                        : "after:h-4/6"
+                    }`}
+                  >
+                    {React.createElement(icon, {
+                      className: `!w-5 !h-5 ${color}`,
+                    })}
+                  </div>
+                  <div>
+                    <Typography
+                      variant="small"
+                      color="blue-gray"
+                      className="block font-medium"
+                    >
+                      {title}
+                    </Typography>
+                    <Typography
+                      as="span"
+                      variant="small"
+                      className="text-xs font-medium text-blue-gray-500"
+                    >
+                      {description}
+                    </Typography>
+                  </div>
+                </div>
+              )
+            )}
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export default Stacks;
diff --git a/frontend/src/routes.jsx b/frontend/src/routes.jsx
index 3a5a8da..3e47ca2 100644
--- a/frontend/src/routes.jsx
+++ b/frontend/src/routes.jsx
@@ -1,12 +1,9 @@
 import {
-  HomeIcon,
-  UserCircleIcon,
-  TableCellsIcon,
-  InformationCircleIcon,
-  ServerStackIcon,
-  RectangleStackIcon,
+  Square3Stack3DIcon,
+  WrenchScrewdriverIcon,
+  ListBulletIcon
 } from "@heroicons/react/24/solid";
-import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
+import { Stacks, Maintenance, Logs } from "@/pages/dashboard";
 import { SignIn, SignUp } from "@/pages/auth";
 
 const icon = {
@@ -18,49 +15,43 @@ export const routes = [
     layout: "dashboard",
     pages: [
       {
-        icon: <HomeIcon {...icon} />,
-        name: "dashboard",
-        path: "/home",
-        element: <Home />,
+        icon: <Square3Stack3DIcon {...icon} />,
+        name: "stacks",
+        path: "/stacks",
+        element: <Stacks />,
       },
       {
-        icon: <UserCircleIcon {...icon} />,
-        name: "profile",
-        path: "/profile",
-        element: <Profile />,
+        icon: <WrenchScrewdriverIcon {...icon} />,
+        name: "maintenance",
+        path: "/maintenance",
+        element: <Maintenance />,
       },
       {
-        icon: <TableCellsIcon {...icon} />,
-        name: "tables",
-        path: "/tables",
-        element: <Tables />,
-      },
-      {
-        icon: <InformationCircleIcon {...icon} />,
-        name: "notifications",
-        path: "/notifications",
-        element: <Notifications />,
-      },
-    ],
-  },
-  {
-    title: "auth pages",
-    layout: "auth",
-    pages: [
-      {
-        icon: <ServerStackIcon {...icon} />,
-        name: "sign in",
-        path: "/sign-in",
-        element: <SignIn />,
-      },
-      {
-        icon: <RectangleStackIcon {...icon} />,
-        name: "sign up",
-        path: "/sign-up",
-        element: <SignUp />,
+        icon: <ListBulletIcon {...icon} />,
+        name: "logs",
+        path: "/logs",
+        element: <Logs />,
       },
     ],
   },
+  // {
+  //   title: "auth pages",
+  //   layout: "auth",
+  //   pages: [
+  //     {
+  //       icon: <ServerStackIcon {...icon} />,
+  //       name: "sign in",
+  //       path: "/sign-in",
+  //       element: <SignIn />,
+  //     },
+  //     {
+  //       icon: <RectangleStackIcon {...icon} />,
+  //       name: "sign up",
+  //       path: "/sign-up",
+  //       element: <SignUp />,
+  //     },
+  //   ],
+  // },
 ];
 
 export default routes;
diff --git a/frontend/src/widgets/layout/footer.jsx b/frontend/src/widgets/layout/footer.jsx
index 1ea98e5..ab881ed 100644
--- a/frontend/src/widgets/layout/footer.jsx
+++ b/frontend/src/widgets/layout/footer.jsx
@@ -20,43 +20,11 @@ export function Footer({ brandName, brandLink, routes }) {
           </a>{" "}
           for a better web.
         </Typography>
-        <ul className="flex items-center gap-4">
-          {routes.map(({ name, path }) => (
-            <li key={name}>
-              <Typography
-                as="a"
-                href={path}
-                target="_blank"
-                variant="small"
-                className="py-0.5 px-1 font-normal text-inherit transition-colors hover:text-blue-500"
-              >
-                {name}
-              </Typography>
-            </li>
-          ))}
-        </ul>
+
       </div>
     </footer>
   );
 }
 
-Footer.defaultProps = {
-  brandName: "Creative Tim",
-  brandLink: "https://www.creative-tim.com",
-  routes: [
-    { name: "Creative Tim", path: "https://www.creative-tim.com" },
-    { name: "About Us", path: "https://www.creative-tim.com/presentation" },
-    { name: "Blog", path: "https://www.creative-tim.com/blog" },
-    { name: "License", path: "https://www.creative-tim.com/license" },
-  ],
-};
-
-Footer.propTypes = {
-  brandName: PropTypes.string,
-  brandLink: PropTypes.string,
-  routes: PropTypes.arrayOf(PropTypes.object),
-};
-
 Footer.displayName = "/src/widgets/layout/footer.jsx";
-
 export default Footer;