diff --git a/pkgs/ui/prettier.config.js b/pkgs/ui/prettier.config.js
new file mode 100644
index 0000000..a0d9c69
--- /dev/null
+++ b/pkgs/ui/prettier.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+  tailwindFunctions: ['clsx', 'cx'],
+};
diff --git a/pkgs/ui/src/app/dashboard/page.tsx b/pkgs/ui/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..1670f0f
--- /dev/null
+++ b/pkgs/ui/src/app/dashboard/page.tsx
@@ -0,0 +1,25 @@
+import { DashboardCard } from "../../components/card";
+import { Grid } from "@mui/material";
+import { Button } from "@mui/material";
+
+export default function Dashboard() {
+  return (
+    <Grid container>
+      <Grid item xs={12}>
+        <DashboardCard />
+        <Button variant="contained" color="primary">
+          Click me!
+        </Button>
+        Hallo Mike !
+      </Grid>
+      <Grid item xs={6}>
+        <DashboardCard />
+        Server Stats
+      </Grid>
+      <Grid item xs={6}>
+        Network Stats
+        <DashboardCard />
+      </Grid>
+    </Grid>
+  );
+}