diff --git a/components/Card.tsx b/components/Card.tsx
new file mode 100644
index 0000000..303e31e
--- /dev/null
+++ b/components/Card.tsx
@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+
+export function Card(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white border-gray-400 ">
+      <div class="px-6 py-4">
+        <div class="font-bold text-xl mb-2">{props.title}</div>
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 08aed63..0b964dd 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -5,6 +5,7 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
+import * as $_middleware from "./routes/_middleware.ts";
 import * as $about from "./routes/about.tsx";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $api_random_uuid from "./routes/api/random-uuid.ts";
@@ -12,6 +13,7 @@ import * as $countdown from "./routes/countdown.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $search from "./routes/search.tsx";
+import * as $subscribe from "./routes/subscribe.tsx";
 import * as $Countdown from "./islands/Countdown.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -21,6 +23,7 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_layout.tsx": $_layout,
+    "./routes/_middleware.ts": $_middleware,
     "./routes/about.tsx": $about,
     "./routes/api/joke.ts": $api_joke,
     "./routes/api/random-uuid.ts": $api_random_uuid,
@@ -28,6 +31,7 @@ const manifest = {
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,
     "./routes/search.tsx": $search,
+    "./routes/subscribe.tsx": $subscribe,
   },
   islands: {
     "./islands/Countdown.tsx": $Countdown,
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index f3ea080..cb1188e 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -1,16 +1,23 @@
-import type { Signal } from "@preact/signals";
+import { useSignal } from "@preact/signals";
+import { ComponentChildren } from "preact";
 import { Button } from "../components/Button.tsx";
+import { Card } from "../components/Card.tsx";
 
-interface CounterProps {
-  count: Signal<number>;
+interface Props {
+  children: ComponentChildren;
 }
 
-export default function Counter(props: CounterProps) {
+export default function MyIsland({ children }: Props) {
+  const count = useSignal(0);
+
   return (
-    <div class="flex gap-8 py-6">
-      <Button onClick={() => props.count.value -= 1}>-1</Button>
-      <p class="text-3xl tabular-nums">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+1</Button>
-    </div>
+    <Card title={"Counter"}>
+      <div class="flex gap-8">
+        <Button onClick={() => count.value -= 1}>-</Button>
+        <p class="text-3xl tabular-nums">{count}</p>
+        <Button onClick={() => (count.value += 1)}>+</Button>
+      </div>
+      {children}
+    </Card>
   );
 }
diff --git a/routes/_middleware.ts b/routes/_middleware.ts
new file mode 100644
index 0000000..5436d03
--- /dev/null
+++ b/routes/_middleware.ts
@@ -0,0 +1,15 @@
+import { FreshContext } from "$fresh/server.ts";
+
+interface State {
+    data: string;
+}
+
+export async function handler(
+    req: Request,
+    ctx: FreshContext<State>,
+) {
+    ctx.state.data = "myData";
+    const resp = await ctx.next();
+    resp.headers.set("server", "fresh server");
+    return resp;
+}
diff --git a/routes/index.tsx b/routes/index.tsx
index 6855982..4095084 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,11 +1,16 @@
-import { useSignal } from "@preact/signals";
+import { Handlers, PageProps } from "$fresh/server.ts";
 import { Link } from "../components/Link.tsx";
 import Counter from "../islands/Counter.tsx";
 
 const nameList = ["Alice", "Bob", "Charlie", "David", "Eve"];
 
-export default function Home() {
-  const count = useSignal(3);
+export const handler: Handlers<any, { data: string }> = {
+  GET(_req, ctx) {
+    return ctx.render(ctx.state.data);
+  },
+};
+
+export default function Home({ data }: PageProps<string>) {
   const name = nameList[Math.floor(Math.random() * 5)];
 
   return (
@@ -21,13 +26,19 @@ export default function Home() {
       <p class="my-4">
         I am a cat being!!
       </p>
-      <Counter count={count} />
+      <Counter>
+        <p>This text is rendered on the server</p>
+      </Counter>
       <div class="my-4">
         <Link text="Go About Page" href="about" />
         <Link text="Go Greet Page" href={`greet/${name}`} />
         <Link text="Go Search Page" href="search" />
         <Link text="Go Countdown Page" href="countdown" />
       </div>
+
+      <p class="my-4">
+        Server response data: <span id="data">{data}</span>
+      </p>
     </div>
   );
 }