diff --git a/apps/react-app-router-fm/app/app-nav.tsx b/apps/react-app-router-fm/app/app-nav.tsx
index 8b23a3eb..3c5f6ad6 100644
--- a/apps/react-app-router-fm/app/app-nav.tsx
+++ b/apps/react-app-router-fm/app/app-nav.tsx
@@ -1,16 +1,47 @@
-import { NavLink } from "react-router"
+import { NavLink, useNavigate } from "react-router"
 import { authClient } from "./lib/auth-client.js"
 
 export function AppNav() {
+  const navigate = useNavigate()
   return (
-    <nav>
-      <NavLink end to="/">
-        Home
-      </NavLink>
-      <NavLink end to="/about">
-        About
-      </NavLink>
-      <button onClick={() => authClient.signOut()}>Sign Out</button>
+    <nav
+      className="container-fluid"
+      style={{ position: "sticky", top: 0, zIndex: 10, backdropFilter: "saturate(180%) blur(6px)" }}
+    >
+      <ul>
+        <li>
+          <NavLink end to="/" style={{ fontWeight: 600 }}>
+            Effectify
+          </NavLink>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <NavLink end to="/">
+            Home
+          </NavLink>
+        </li>
+        <li>
+          <NavLink end to="/todo-app">
+            Todo App
+          </NavLink>
+        </li>
+        <li>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await authClient.signOut()
+                navigate("/login")
+              } catch {
+                navigate("/login")
+              }
+            }}
+          >
+            Sign Out
+          </button>
+        </li>
+      </ul>
     </nav>
   )
 }
diff --git a/apps/react-app-router-fm/app/lib/better-auth-options.server.ts b/apps/react-app-router-fm/app/lib/better-auth-options.server.ts
index 020ba05e..79ca89ea 100644
--- a/apps/react-app-router-fm/app/lib/better-auth-options.server.ts
+++ b/apps/react-app-router-fm/app/lib/better-auth-options.server.ts
@@ -4,7 +4,6 @@
 import { betterAuth } from "better-auth"
 import { openAPI } from "better-auth/plugins"
 import type { BetterAuthOptions } from "better-auth/types"
-// import Database from 'better-sqlite3'
 import { pool } from "./prisma.js"
 
 // const __filename = fileURLToPath(import.meta.url)
@@ -16,7 +15,6 @@ export const authOptions = {
   emailAndPassword: {
     enabled: true,
   },
-  // database: new Database(join(__dirname, '../sqlite.db')),
   database: pool,
 
   advanced: {
diff --git a/apps/react-app-router-fm/app/lib/prisma.ts b/apps/react-app-router-fm/app/lib/prisma.ts
index a15d9789..5e5505a5 100644
--- a/apps/react-app-router-fm/app/lib/prisma.ts
+++ b/apps/react-app-router-fm/app/lib/prisma.ts
@@ -3,7 +3,10 @@ import { PrismaPg } from "@prisma/adapter-pg"
 import { Pool } from "pg"
 import { PrismaClient } from "../../prisma/generated/client.js"
 
-const connectionString = `${process.env.DATABASE_URL}`
+const connectionString = process.env.DATABASE_URL
+if (!connectionString || connectionString.trim().length === 0) {
+  throw new Error("Missing DATABASE_URL environment variable")
+}
 
 export const pool = new Pool({ connectionString })
 const adapter = new PrismaPg({ connectionString })
diff --git a/apps/react-app-router-fm/app/root.tsx b/apps/react-app-router-fm/app/root.tsx
index d29b412f..c5c79099 100644
--- a/apps/react-app-router-fm/app/root.tsx
+++ b/apps/react-app-router-fm/app/root.tsx
@@ -15,6 +15,12 @@ export const links: LinksFunction = () => [
     href: "https://fonts.gstatic.com",
     crossOrigin: "anonymous",
   },
+  {
+    rel: "stylesheet",
+    href: "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css",
+    integrity: "sha384-NZhm4G1I7BpEGdjDKnzEfy3d78xvy7ECKUwwnKTYi036z42IyF056PbHfpQLIYgL",
+    crossOrigin: "anonymous",
+  },
   {
     rel: "stylesheet",
     href:
diff --git a/apps/react-app-router-fm/app/routes.tsx b/apps/react-app-router-fm/app/routes.tsx
index 2ec0fd57..886c9ac9 100644
--- a/apps/react-app-router-fm/app/routes.tsx
+++ b/apps/react-app-router-fm/app/routes.tsx
@@ -4,7 +4,7 @@ export default [
   index("./app.tsx"),
   route("api/*", "./routes/api.ts"),
   route("api/auth/*", "./routes/api.auth.ts"),
-  route("about", "./routes/about.tsx"),
+  route("todo-app", "./routes/todo-app.tsx"),
   route("login", "./routes/login.tsx"),
   route("signup", "./routes/signup.tsx"),
 ] satisfies RouteConfig
diff --git a/apps/react-app-router-fm/app/routes/about.tsx b/apps/react-app-router-fm/app/routes/about.tsx
deleted file mode 100644
index 2f28b4f3..00000000
--- a/apps/react-app-router-fm/app/routes/about.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { Route } from "./+types/about.js"
-import * as Effect from "effect/Effect"
-import { httpSuccess } from "@effectify/react-router"
-import { withLoaderEffect } from "../lib/runtime.server.js"
-import { randomUUID } from "node:crypto"
-// import { withBetterAuthGuard } from "@effectify/react-router-better-auth"
-// import { AuthService } from "@effectify/node-better-auth"
-import * as PrismaRepository from "@prisma/effect/prisma-repository.js"
-import { TodoId, TodoModel } from "@prisma/effect/models/Todo.js"
-import { TodoStatus } from "@prisma/enums.js"
-
-export const loader = Effect.gen(function*() {
-  // const { user } = yield* AuthService.AuthContext
-
-  const todoRepo = yield* PrismaRepository.make(TodoModel, {
-    modelName: "todo",
-    spanPrefix: "todo",
-  })
-
-  yield* todoRepo.deleteMany({})
-  const todoCreated = yield* todoRepo.create({
-    data: {
-      id: TodoId.make(randomUUID()),
-      title: "Test Todo",
-      content: "Test Content",
-      published: false,
-      authorId: 1,
-      status: TodoStatus.PENDING,
-    },
-  })
-
-  const todosCreated = yield* todoRepo.createManyAndReturn({
-    data: [{
-      id: TodoId.make(randomUUID()),
-      title: "Test Todo",
-      content: "Test Content",
-      published: false,
-      authorId: 1,
-      status: TodoStatus.PENDING,
-    }, {
-      id: TodoId.make(randomUUID()),
-      title: "Test Todo 2",
-      content: "Test Content 2",
-      published: false,
-      authorId: 1,
-      status: TodoStatus.CANCELLED,
-    }],
-  })
-
-  const todoFindUnique = yield* todoRepo.findUnique({
-    where: {
-      id: todoCreated.id,
-    },
-  })
-
-  yield* Effect.log("todoFindUnique")
-  yield* Effect.log(todoFindUnique)
-
-  yield* Effect.log("todosCreated")
-  yield* Effect.log(todosCreated)
-
-  yield* Effect.log("todoCreated")
-  yield* Effect.log(todoCreated.id.toString())
-
-  const todos = yield* todoRepo.findMany({})
-
-  yield* Effect.log("todos")
-  yield* Effect.log(todos)
-
-  // Use the new httpSuccess helper for better DX
-  return yield* httpSuccess({
-    todos,
-  })
-}).pipe(
-  // withBetterAuthGuard.with({ redirectOnFail: '/login' }),
-  withLoaderEffect,
-)
-
-export default function AboutComponent({
-  loaderData,
-}: Route.ComponentProps) {
-  if (loaderData.ok) {
-    return (
-      <div>
-        <h1>About!!!</h1>
-        <p>{loaderData.data?.todos?.length}</p>
-        <ul>
-          {loaderData.data.todos.map((todo: { id: string; title: string }) => <li key={todo.id}>{todo.title}</li>)}
-        </ul>
-      </div>
-    )
-  }
-  return (
-    <div>
-      <h1>About!!!</h1>
-    </div>
-  )
-}
diff --git a/apps/react-app-router-fm/app/routes/login.tsx b/apps/react-app-router-fm/app/routes/login.tsx
index e0b22373..5eac3f9d 100644
--- a/apps/react-app-router-fm/app/routes/login.tsx
+++ b/apps/react-app-router-fm/app/routes/login.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { authClient } from "./../lib/auth-client.js"
-import { useNavigate } from "react-router"
+import { Link, useNavigate } from "react-router"
 
 export default function Login() {
   const [email, setEmail] = useState("")
@@ -30,66 +30,45 @@ export default function Login() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
-      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-6 shadow-md">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-            Sign in to your account
-          </h2>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleLogin}>
-          <div className="-space-y-px rounded-md shadow-sm">
-            <div>
-              <label htmlFor="email-address" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
+    <main className="container">
+      <article>
+        <h2>Sign in to your account</h2>
+        <form onSubmit={handleLogin}>
+          <div>
+            <label htmlFor="email-address">Email address</label>
+            <input
+              id="email-address"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </div>
-
-          {error && <div className="text-red-500 text-sm text-center">{error}</div>}
-
           <div>
-            <button
-              type="submit"
-              className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Sign in
-            </button>
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </div>
+          {error && (
+            <small role="alert" aria-live="polite" style={{ color: "var(--pico-color-red-500)" }}>{error}</small>
+          )}
+          <button type="submit">Sign in</button>
         </form>
-        <div className="text-center text-sm">
-          <a href="/signup" className="font-medium text-indigo-600 hover:text-indigo-500">
-            Don't have an account? Sign up
-          </a>
-        </div>
-      </div>
-    </div>
+        <p>
+          Don't have an account? <Link to="/signup">Sign up</Link>
+        </p>
+      </article>
+    </main>
   )
 }
diff --git a/apps/react-app-router-fm/app/routes/signup.tsx b/apps/react-app-router-fm/app/routes/signup.tsx
index 859e48bb..4a67cc4b 100644
--- a/apps/react-app-router-fm/app/routes/signup.tsx
+++ b/apps/react-app-router-fm/app/routes/signup.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { authClient } from "./../lib/auth-client.js"
-import { useNavigate } from "react-router"
+import { Link, useNavigate } from "react-router"
 
 export default function SignUp() {
   const [name, setName] = useState("")
@@ -24,7 +24,6 @@ export default function SignUp() {
           navigate("/")
         },
         onError: (ctx) => {
-          console.error("[SignUp] Sign up error:", ctx.error)
           setError(ctx.error.message)
         },
       },
@@ -32,82 +31,58 @@ export default function SignUp() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
-      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-6 shadow-md">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-            Create an account
-          </h2>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSignUp}>
-          <div className="-space-y-px rounded-md shadow-sm">
-            <div>
-              <label htmlFor="name" className="sr-only">
-                Full Name
-              </label>
-              <input
-                id="name"
-                name="name"
-                type="text"
-                autoComplete="name"
-                required
-                className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Full Name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="email-address" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="relative block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                required
-                className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
+    <main className="container">
+      <article>
+        <h2>Create an account</h2>
+        <form onSubmit={handleSignUp}>
+          <div>
+            <label htmlFor="name">Full Name</label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autoComplete="name"
+              required
+              placeholder="Full Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div>
+            <label htmlFor="email-address">Email address</label>
+            <input
+              id="email-address"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </div>
-
-          {error && <div className="text-red-500 text-sm text-center">{error}</div>}
-
           <div>
-            <button
-              type="submit"
-              className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Sign up
-            </button>
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="new-password"
+              required
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </div>
+          {error && (
+            <small role="alert" aria-live="polite" style={{ color: "var(--pico-color-red-500)" }}>{error}</small>
+          )}
+          <button type="submit">Sign up</button>
         </form>
-        <div className="text-center text-sm">
-          <a href="/login" className="font-medium text-indigo-600 hover:text-indigo-500">
-            Already have an account? Sign in
-          </a>
-        </div>
-      </div>
-    </div>
+        <p>
+          Already have an account? <Link to="/login">Sign in</Link>
+        </p>
+      </article>
+    </main>
   )
 }
diff --git a/apps/react-app-router-fm/app/routes/todo-app.tsx b/apps/react-app-router-fm/app/routes/todo-app.tsx
new file mode 100644
index 00000000..2404d6ee
--- /dev/null
+++ b/apps/react-app-router-fm/app/routes/todo-app.tsx
@@ -0,0 +1,209 @@
+import type { Route } from "./+types/todo-app.js"
+import * as Effect from "effect/Effect"
+import { ActionArgsContext, httpFailure, httpRedirect, httpSuccess } from "@effectify/react-router"
+import { withLoaderEffect } from "../lib/runtime.server.js"
+import { withActionEffect } from "../lib/runtime.server.js"
+import { randomUUID } from "node:crypto"
+import * as PrismaRepository from "@prisma/effect/prisma-repository.js"
+import { TodoId, TodoModel } from "@prisma/effect/models/Todo.js"
+import { TodoStatus } from "@prisma/enums.js"
+import { Form, useActionData, useSubmit } from "react-router"
+import { useState } from "react"
+import { withBetterAuthGuard, withBetterAuthGuardAction } from "@effectify/react-router-better-auth"
+import { AuthService } from "@effectify/node-better-auth"
+
+export const loader = Effect.gen(function*() {
+  const todoRepo = yield* PrismaRepository.make(TodoModel, {
+    modelName: "todo",
+    spanPrefix: "todo",
+  })
+
+  const { user } = yield* AuthService.AuthContext
+  const currentUserId = Number(user.id)
+  if (!Number.isInteger(currentUserId)) {
+    return yield* httpSuccess({ todos: [] })
+  }
+  const todos = yield* todoRepo.findMany({ where: { authorId: currentUserId } })
+  return yield* httpSuccess({
+    todos,
+  })
+})
+  .pipe(withBetterAuthGuard.with({ redirectOnFail: "/login" }))
+  .pipe(withLoaderEffect)
+
+export const action = Effect.gen(function*() {
+  const { request } = yield* ActionArgsContext
+  const formData = yield* Effect.tryPromise(() => request.formData())
+  const intent = String(formData.get("intent") ?? "create")
+  const id = String(formData.get("id") ?? "")
+  const title = String(formData.get("title") ?? "")
+  const content = String(formData.get("content") ?? "")
+
+  const todoRepo = yield* PrismaRepository.make(TodoModel, {
+    modelName: "todo",
+    spanPrefix: "todo",
+  })
+
+  const { user } = yield* AuthService.AuthContext
+  const currentUserId = Number(user.id)
+  if (!Number.isInteger(currentUserId)) {
+    return yield* httpFailure("Invalid user id")
+  }
+
+  if (intent === "delete") {
+    if (!id) {
+      return yield* httpFailure("Missing id")
+    }
+    yield* todoRepo.deleteMany({
+      where: { id: TodoId.make(id), authorId: currentUserId },
+    })
+    return yield* httpRedirect("/todo-app")
+  }
+
+  if (intent === "update") {
+    if (!id) {
+      return yield* httpFailure("Missing id")
+    }
+    if (!title.trim()) {
+      return yield* httpFailure("Title is required")
+    }
+    yield* todoRepo.updateMany({
+      where: { id: TodoId.make(id), authorId: currentUserId },
+      data: { title, content },
+    })
+    return yield* httpRedirect("/todo-app")
+  }
+
+  if (intent === "toggle-status") {
+    if (!id) {
+      return yield* httpFailure("Missing id")
+    }
+    const statusStr = String(formData.get("status") ?? "")
+    const status = statusStr === "COMPLETED" ? TodoStatus.COMPLETED : TodoStatus.PENDING
+    yield* todoRepo.updateMany({
+      where: { id: TodoId.make(id), authorId: currentUserId },
+      data: { status },
+    })
+    return yield* httpRedirect("/todo-app")
+  }
+
+  if (!title.trim()) {
+    return yield* httpFailure("Title is required")
+  }
+
+  yield* todoRepo.create({
+    data: {
+      id: TodoId.make(randomUUID()),
+      title,
+      content,
+      published: false,
+      authorId: currentUserId,
+      status: TodoStatus.PENDING,
+    },
+  })
+
+  return yield* httpRedirect("/todo-app")
+})
+  .pipe(withBetterAuthGuardAction.with({ redirectOnFail: "/login" }))
+  .pipe(withActionEffect)
+
+export default function TodoApp({
+  loaderData,
+}: Route.ComponentProps) {
+  const actionData = useActionData<typeof action>()
+  const submit = useSubmit()
+  const [editingId, setEditingId] = useState<string | null>(null)
+  if (loaderData.ok) {
+    return (
+      <main className="container">
+        <article>
+          <h2>Todo App</h2>
+          <p>{loaderData.data?.todos?.length} items</p>
+          <Form method="post">
+            <fieldset>
+              <label htmlFor="title">Title</label>
+              <input id="title" name="title" type="text" required placeholder="Title" />
+              <label htmlFor="content">Content</label>
+              <textarea id="content" name="content" placeholder="Content" rows={3} />
+            </fieldset>
+            <input type="hidden" name="intent" value="create" />
+            {actionData && actionData.ok === false && actionData.errors?.length ?
+              (
+                <small role="alert" aria-live="assertive" style={{ color: "var(--pico-color-red-500)" }}>
+                  {String(actionData.errors[0])}
+                </small>
+              ) :
+              null}
+            <button type="submit">Add</button>
+          </Form>
+          <ul>
+            {loaderData.data.todos.map((todo: any) => (
+              <li key={String(todo.id)}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+                  <input
+                    type="checkbox"
+                    aria-label="Done"
+                    checked={String(todo.status) === "COMPLETED"}
+                    onChange={(e) =>
+                      submit(
+                        {
+                          intent: "toggle-status",
+                          id: String(todo.id),
+                          status: e.currentTarget.checked ? "COMPLETED" : "PENDING",
+                        },
+                        { method: "post" },
+                      )}
+                  />
+                  <div style={{ flex: 1 }}>
+                    <strong>{todo.title}</strong>
+                    {todo.content ? <span>— {todo.content}</span> : null}
+                  </div>
+                  <button type="button" onClick={() => setEditingId(String(todo.id))}>Update</button>
+                  <Form method="post">
+                    <input type="hidden" name="intent" value="delete" />
+                    <input type="hidden" name="id" value={String(todo.id)} />
+                    <button type="submit" aria-label={`Delete ${todo.title}`}>Delete</button>
+                  </Form>
+                </div>
+                {editingId === String(todo.id) ?
+                  (
+                    <Form
+                      method="post"
+                      style={{ display: "flex", gap: "0.75rem", alignItems: "center", marginTop: "0.5rem" }}
+                    >
+                      <input type="hidden" name="intent" value="update" />
+                      <input type="hidden" name="id" value={String(todo.id)} />
+                      <input name="title" type="text" defaultValue={todo.title} placeholder="Title" />
+                      <input name="content" type="text" defaultValue={todo.content ?? ""} placeholder="Content" />
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          const form = (e.currentTarget as HTMLButtonElement).form
+                          if (form) {
+                            const fd = new FormData(form)
+                            submit(fd, { method: "post" })
+                          }
+                          setEditingId(null)
+                        }}
+                      >
+                        Save
+                      </button>
+                      <button type="button" onClick={() => setEditingId(null)}>Cancel</button>
+                    </Form>
+                  ) :
+                  null}
+              </li>
+            ))}
+          </ul>
+        </article>
+      </main>
+    )
+  }
+  return (
+    <main className="container">
+      <article>
+        <h2>Todo App</h2>
+      </article>
+    </main>
+  )
+}