diff --git a/packages/webui/src/data/Todo.class.ts b/packages/webui/src/data/Todo.class.ts
new file mode 100644
index 0000000..9fd8a04
--- /dev/null
+++ b/packages/webui/src/data/Todo.class.ts
@@ -0,0 +1,13 @@
+import { Schema as S } from "@effect/schema"
+import { MobXObservable, MutableClass } from "@thilawyn/thilalib/effect/schema/class"
+import { JsonifiableTodo as CommonJsonifiableTodo, Todo as CommonTodo } from "@todo-tests/common/data"
+
+
+export class Todo
+    extends MutableClass<Todo>("Todo")(CommonTodo.fields).pipe(
+        MobXObservable
+    )
+{}
+
+
+export const JsonifiableTodo = CommonJsonifiableTodo.pipe(S.compose(Todo))
diff --git a/packages/webui/src/data/Todo.ts b/packages/webui/src/data/Todo.ts
deleted file mode 100644
index 7665aba..0000000
--- a/packages/webui/src/data/Todo.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { MobXObservable, MutableClass } from "@thilawyn/thilalib/effect/schema/class"
-import { Todo as CommonTodo } from "@todo-tests/common/data"
-
-
-export class Todo
-    extends MutableClass<Todo>("Todo")(CommonTodo.fields).pipe(
-        MobXObservable
-    )
-{}
diff --git a/packages/webui/src/data/index.ts b/packages/webui/src/data/index.ts
index d5dbbf5..5dcc9d8 100644
--- a/packages/webui/src/data/index.ts
+++ b/packages/webui/src/data/index.ts
@@ -1 +1 @@
-export * from "./Todo"
+export * from "./Todo.class"
diff --git a/packages/webui/src/routes/index.lazy.tsx b/packages/webui/src/routes/index.lazy.tsx
index abf62ec..ebaeeff 100644
--- a/packages/webui/src/routes/index.lazy.tsx
+++ b/packages/webui/src/routes/index.lazy.tsx
@@ -1,22 +1,18 @@
 import { Schema as S } from "@effect/schema"
 import { createLazyFileRoute } from "@tanstack/react-router"
-import { JsonifiableTodo } from "@todo-tests/common/data"
 import { Option, flow, identity } from "effect"
 import { IObservableArray, observable } from "mobx"
 import { observer } from "mobx-react-lite"
 import { useState } from "react"
-import { Todo } from "../data"
+import { JsonifiableTodo, Todo } from "../data"
 import { VTodo } from "../todo/VTodo"
 import { trpc } from "../trpc/trpc"
 
 
 const decodeTodos = flow(
     S.decodeSync(
-        S.mutable(S.Array(
-            JsonifiableTodo.pipe(S.compose(Todo))
-        ))
+        S.mutable(S.Array(JsonifiableTodo))
     ),
-
     observable.array,
 )
 
diff --git a/packages/webui/src/todo/VTodo.tsx b/packages/webui/src/todo/VTodo.tsx
index d21ab51..4facc91 100644
--- a/packages/webui/src/todo/VTodo.tsx
+++ b/packages/webui/src/todo/VTodo.tsx
@@ -1,15 +1,12 @@
 import { Schema as S } from "@effect/schema"
-import { ArrowUpward } from "@mui/icons-material"
-import { JsonifiableTodo } from "@todo-tests/common/data"
+import { ArrowDownward, ArrowUpward } from "@mui/icons-material"
 import { observer } from "mobx-react-lite"
 import { Button } from "primereact/button"
-import { Todo } from "../data"
+import { JsonifiableTodo, Todo } from "../data"
 import { trpc } from "../trpc/trpc"
 
 
-const encodeTodo = S.encodeSync(
-    JsonifiableTodo.pipe(S.compose(Todo))
-)
+const encodeTodo = S.encodeSync(JsonifiableTodo)
 
 
 export interface VTodoProps {
@@ -27,13 +24,32 @@ export const VTodo = observer(({ todo }: VTodoProps) => {
             <p>{todo.content}</p>
 
             <div className="flex flex-row gap-1 content-center">
+                <Button
+                    severity="secondary"
+                    rounded
+                    size="small"
+                    icon={<ArrowDownward />}
+
+                    onClick={() => updateTodo.mutate(encodeTodo(
+                        new Todo({
+                            ...todo,
+                            order: todo.order + 1,
+                        }, { disableValidation: true })
+                    ))}
+                />
+
                 <Button
                     severity="secondary"
                     rounded
                     size="small"
                     icon={<ArrowUpward />}
 
-                    onClick={() => updateTodo.mutate(encodeTodo(todo))}
+                    onClick={() => updateTodo.mutate(encodeTodo(
+                        new Todo({
+                            ...todo,
+                            order: todo.order - 1,
+                        }, { disableValidation: true })
+                    ))}
                 />
             </div>
         </div>