diff --git a/src/client/routes/index.tsx b/src/client/routes/index.tsx
index cee3b9e..b96e5b5 100644
--- a/src/client/routes/index.tsx
+++ b/src/client/routes/index.tsx
@@ -1,5 +1,6 @@
 import {
 	Alert,
+	Box,
 	CircularProgress,
 	Table,
 	TableBody,
@@ -7,11 +8,13 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
+	Typography,
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 import z from "zod";
+import { RouterButton } from "../components/RouterButton";
 
 const Announcements = z.array(
 	z.object({
@@ -49,35 +52,48 @@ function RouteComponent() {
 	}, [announcementsQuery.error]);
 
 	// handle loading / error / show values
-	return announcementsQuery.status === "pending" ? (
-		<CircularProgress aria-label="Loading…" />
-	) : announcementsQuery.status === "error" ? (
-		<Alert severity="error">Error (see console)</Alert>
-	) : (
-		// <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
-		<TableContainer>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableCell />
-						<TableCell>Title</TableCell>
-						<TableCell>Text</TableCell>
-						<TableCell>Publication Date</TableCell>
-					</TableRow>
-				</TableHead>
-				<TableBody>
-					{announcementsQuery.data.map((a) => (
-						<TableRow key={a.id}>
-							<TableCell>{a.id}</TableCell>
-							<TableCell>{a.title}</TableCell>
-							<TableCell>
-								{a.text.substring(0, 50) + (a.text.length > 50 ? "..." : "")}
-							</TableCell>
-							<TableCell>{a.publication_date.toString()}</TableCell>
-						</TableRow>
-					))}
-				</TableBody>
-			</Table>
-		</TableContainer>
+	return (
+		<Box sx={{ flexDirection: "column", display: "flex", gap: "3em" }}>
+			<Box
+				sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+			>
+				<Typography variant="h4">Announcements</Typography>
+				<RouterButton to="/" variant="contained">
+					Add announcement
+				</RouterButton>
+			</Box>
+			{announcementsQuery.status === "pending" ? (
+				<CircularProgress aria-label="Loading…" />
+			) : announcementsQuery.status === "error" ? (
+				<Alert severity="error">Error (see console)</Alert>
+			) : (
+				// <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+				<TableContainer>
+					<Table>
+						<TableHead>
+							<TableRow>
+								<TableCell />
+								<TableCell>Title</TableCell>
+								<TableCell>Text</TableCell>
+								<TableCell>Publication Date</TableCell>
+							</TableRow>
+						</TableHead>
+						<TableBody>
+							{announcementsQuery.data.map((a) => (
+								<TableRow key={a.id}>
+									<TableCell>{a.id}</TableCell>
+									<TableCell>{a.title}</TableCell>
+									<TableCell>
+										{a.text.substring(0, 50) +
+											(a.text.length > 50 ? "..." : "")}
+									</TableCell>
+									<TableCell>{a.publication_date.toString()}</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</TableContainer>
+			)}
+		</Box>
 	);
 }