diff --git a/components/Header.tsx b/components/Header.tsx
index 5ff16fc..d2915d2 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,11 +1,22 @@
-const links = [
+const loggedOutLinks = [
   { href: "/", label: "Home" },
   { href: "/sign-in", label: "Sign in" },
   { href: "/sign-up", label: "Sign up" },
-  { href: "/dashboard", label: "Dashboard" },
 ];
 
-export default function Header() {
+const loggedInLinks = [
+  { href: "/", label: "Home" },
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/sign-out", label: "Sign out" },
+];
+
+export interface Props {
+  loggedIn: boolean;
+}
+
+export default function Header(props: Props) {
+  const links = props.loggedIn ? loggedInLinks : loggedOutLinks;
+
   return (
     <div class="navbar bg-base-100 shadow-sm">
       <div class="flex-1">
diff --git a/components/Headline.tsx b/components/Headline.tsx
new file mode 100644
index 0000000..cff9f5b
--- /dev/null
+++ b/components/Headline.tsx
@@ -0,0 +1,7 @@
+export interface Props {
+  children: string;
+}
+
+export default function Headline(props: Props) {
+  return <h1 class="text-2xl font-bold">{props.children}</h1>;
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index ca605be..120814d 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -1,7 +1,10 @@
 import Header from "../components/Header.tsx";
-import { define } from "../utils.ts";
+import { define, isLoggedIn } from "../utils.ts";
+
+export default define.page(function App(ctx) {
+  const Component = ctx.Component;
+  const loggedIn = isLoggedIn(ctx.req);
 
-export default define.page(function App({ Component }) {
   return (
     <html data-theme="light">
       <head>
@@ -10,7 +13,7 @@ export default define.page(function App({ Component }) {
         <title>Deno Fresh Dummy</title>
       </head>
       <body>
-        <Header />
+        <Header loggedIn={loggedIn} />
         <Component />
       </body>
     </html>
diff --git a/routes/dashboard.tsx b/routes/dashboard.tsx
index 23539ac..ed60ea6 100644
--- a/routes/dashboard.tsx
+++ b/routes/dashboard.tsx
@@ -1,5 +1,23 @@
-import { define } from "../utils.ts";
+import Headline from "../components/Headline.tsx";
+import { define, isLoggedIn } from "../utils.ts";
 
-export default define.page(function Dashboard(ctx) {
-  return <h1>Dashboard</h1>;
+export const handler = define.handlers({
+  GET(ctx) {
+    console.log("ASDF");
+    if (!isLoggedIn(ctx.req)) {
+      const url = new URL(ctx.req.url);
+      url.pathname = "/sign-in";
+      return Response.redirect(url, 303);
+    }
+
+    return { data: {} };
+  },
+});
+
+export default define.page<typeof handler>(function Dashboard(_ctx) {
+  return (
+    <div class="container mx-auto p-4">
+      <Headline>Dashboard</Headline>
+    </div>
+  );
 });
diff --git a/routes/sign-in.tsx b/routes/sign-in.tsx
index aa302ef..05a338d 100644
--- a/routes/sign-in.tsx
+++ b/routes/sign-in.tsx
@@ -1,8 +1,7 @@
-import { getCookies, setCookie } from "@std/http/cookie";
 import { z } from "zod";
 import { backendSignIn } from "../backend/sign-in.ts";
 import { SignInForm } from "../components/SignInForm.tsx";
-import { define } from "../utils.ts";
+import { define, isLoggedIn, setAuthCookie } from "../utils.ts";
 
 const loginSchema = z.object({
   email: z.string(),
@@ -11,13 +10,12 @@ const loginSchema = z.object({
 
 export const handler = define.handlers({
   GET(ctx) {
-    const cookies = getCookies(ctx.req.headers);
-    const authCookie = cookies["auth"];
-    if (authCookie === "ok") {
+    if (isLoggedIn(ctx.req)) {
       const url = new URL(ctx.req.url);
       url.pathname = "/dashboard";
       return Response.redirect(url, 303);
     }
+
     return {
       data: {
         email: "",
@@ -52,17 +50,10 @@ export const handler = define.handlers({
       };
     }
 
-    const url = new URL(ctx.req.url);
     const headers = new Headers();
-    setCookie(headers, {
-      name: "auth",
-      value: "ok",
-      maxAge: 120,
-      sameSite: "Lax",
-      domain: url.hostname,
-      path: "/",
-      secure: true,
-    });
+    setAuthCookie(ctx.req, headers);
+
+    const url = new URL(ctx.req.url);
     url.pathname = "/dashboard";
     headers.set("location", url.toString());
     return new Response(null, {
diff --git a/routes/sign-out.tsx b/routes/sign-out.tsx
new file mode 100644
index 0000000..c6b7dfd
--- /dev/null
+++ b/routes/sign-out.tsx
@@ -0,0 +1,16 @@
+import { define, unsetAuthCookie } from "../utils.ts";
+
+export const handler = define.handlers({
+  GET(ctx) {
+    const headers = new Headers();
+    unsetAuthCookie(headers);
+
+    const url = new URL(ctx.req.url);
+    url.pathname = "/";
+    headers.set("location", url.toString());
+    return new Response(null, {
+      status: 303,
+      headers,
+    });
+  },
+});
diff --git a/utils.ts b/utils.ts
index f404216..4dc5c02 100644
--- a/utils.ts
+++ b/utils.ts
@@ -1,3 +1,4 @@
+import { deleteCookie, getCookies, setCookie } from "@std/http/cookie";
 import { createDefine } from "fresh";
 
 // This specifies the type of "ctx.state" which is used to share
@@ -7,3 +8,29 @@ export interface State {
 }
 
 export const define = createDefine<State>();
+
+export function setAuthCookie(
+  req: Request,
+  headers: Headers,
+) {
+  const url = new URL(req.url);
+  setCookie(headers, {
+    name: "auth",
+    value: "ok",
+    maxAge: 60 * 60,
+    sameSite: "Lax",
+    domain: url.hostname,
+    path: "/",
+    secure: true,
+  });
+}
+
+export function unsetAuthCookie(headers: Headers) {
+  deleteCookie(headers, "auth");
+}
+
+export function isLoggedIn(req: Request): boolean {
+  const cookies = getCookies(req.headers);
+  const authCookie = cookies["auth"];
+  return authCookie === "ok";
+}