diff --git a/livestore/livestore/examples/linearlite/src/pages/Issue/index.tsx b/vulcan/linearite/src/pages/Issue/index.tsx
index 2ba4028..708eef7 100644
--- a/livestore/livestore/examples/linearlite/src/pages/Issue/index.tsx
+++ b/vulcan/linearite/src/pages/Issue/index.tsx
@@ -7,33 +7,22 @@ import StatusMenu from '../../components/contextmenu/StatusMenu'
 import PriorityIcon from '../../components/PriorityIcon'
 import StatusIcon from '../../components/StatusIcon'
 import Avatar from '../../components/Avatar'
-import { PriorityDisplay, StatusDisplay } from '../../types/issue'
+import { PriorityDisplay, PriorityType, StatusDisplay, StatusType } from '../../types/issue'
 import Editor from '../../components/editor/Editor'
 import DeleteModal from './DeleteModal'
 import Comments from './Comments'
-import { Issue } from '../../types'
-import { querySQL, sql } from '@livestore/livestore'
-import { useStore, useTemporaryQuery } from '@livestore/livestore/react'
-
-// This would be best:
-// const issue$ = querySQL<Issue>((_) => sql`SELECT * FROM issue WHERE id = $id`).getFirstRow()
-// const issue = useQuery(issue$, { id })
+import { DBName } from '../../domain/Schema'
+import { first, useDB, useQuery2 } from '@vlcn.io/react'
+import { queries } from '../../domain/queries'
+import { mutations } from '../../domain/mutations'

 function IssuePage() {
   const navigate = useNavigate()
   const { id } = useParams() || ''

-  const makeIssueQuery = useCallback(
-    () => querySQL<Issue>((_) => sql`SELECT * FROM issue WHERE id = '${id}'`).getFirstRow(),
-    [id],
-  )
-  const makeDescriptionQuery = useCallback(
-    () => querySQL<{ body: string }>((_) => sql`SELECT body FROM description WHERE id = '${id}'`).getFirstRow(),
-    [id],
-  )
-  const issue = useTemporaryQuery(makeIssueQuery)
-  const description = useTemporaryQuery(makeDescriptionQuery).body
-  const { store } = useStore()
+  const ctx = useDB(DBName)
+  const issue = first(useQuery2(ctx, queries.issue, [id]).data)
+  const description = first(useQuery2(ctx, queries.issueDescription, [id]).data)?.body

   const [showDeleteModal, setShowDeleteModal] = useState(false)

@@ -42,46 +31,38 @@ function IssuePage() {
   } else if (issue === null) {
     return <div className="p-8 w-full text-center">Issue not found</div>
   }

-  const handleStatusChange = (status: string) => {
-    store.applyEvent('updateIssueStatus', {
+  const handleStatusChange = (status: StatusType) => {
+    mutations.updateIssue(ctx.db, {
       id: issue.id,
       status,
     })
   }

-  const handlePriorityChange = (priority: string) => {
-    store.applyEvent('updateIssuePriority', {
+  const handlePriorityChange = (priority: PriorityType) => {
+    mutations.updateIssue(ctx.db, {
       id: issue.id,
       priority,
     })
   }

   const handleTitleChange = (title: string) => {
-    store.applyEvent('updateIssueTitle', {
+    mutations.updateIssue(ctx.db, {
       id: issue.id,
       title,
     })
   }

   const handleDescriptionChange = (body: string) => {
-    store.applyEvent('updateDescription', {
+    mutations.updateDescription(ctx.db, {
       id: issue.id,
       body,
     })
   }

-  const handleDelete = () => {
-    // TODO: how to create a tx?
-    store.applyEvent('deleteIssue', {
-      id: issue.id,
-    })
-    store.applyEvent('deleteDescription', {
-      id: issue.id,
-    })
-    store.applyEvent('deleteCommentsByIssueId', {
-      issueId: issue.id,
-    })
+  const handleDelete = async () => {
+    await mutations.deleteIssue(ctx.db, issue.id)
     handleClose()
   }

@@ -131,7 +112,7 @@ function IssuePage() {
                 <div className="flex flex-[2_0_0] mr-2 md-mr-0 items-center">Opened by</div>
                 <div className="flex flex-[3_0_0]">
                   <button className="inline-flex items-center h-6 ps-1.5 pe-2 text-gray-500border-none rounded hover:bg-gray-100">
-                    <Avatar name={issue.creator} />
+                    <Avatar name={issue.creator ?? undefined} />
                     <span className="ml-1">{issue.creator}</span>
                   </button>
                 </div>
@@ -172,7 +153,7 @@ function IssuePage() {
             <input
               className="w-full px-3 py-1 text-lg font-semibold placeholder-gray-400 border-transparent rounded "
               placeholder="Issue title"
-              value={issue.title}
+              value={issue.title ?? undefined}
               onChange={(e) => handleTitleChange(e.target.value)}
             />