diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
index f94d6794..22b87da3 100644
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -3,49 +3,31 @@ import { Elysia, t } from 'elysia'
 import { migrate } from 'drizzle-orm/bun-sqlite/migrator'
 import { db } from './db/db'
 import { todos } from './db/schema'
+import { eq } from 'drizzle-orm'
 
 migrate(db, { migrationsFolder: './drizzle' })
 
-const todoList = [
-  {
-    id: 1,
-    starred: false,
-    completed: false,
-    desc: 'Wake up at 5am'
-  },
-  {
-    id: 2,
-    starred: false,
-    completed: false,
-    desc: 'Brush your teeth'
-  },
-  {
-    id: 3,
-    starred: false,
-    completed: false,
-    desc: "I don't know what to do!"
-  },
-  {
-    id: 4,
-    starred: true,
-    completed: true,
-    desc: "Yeah, I don't know yet!"
-  }
-]
-
 const app = new Elysia()
   .use(cors())
   .get('/todos', () => db.select().from(todos))
   .get(
     '/todos/:id',
-    ({ params, error }) => {
-      const todo = todoList.find((todo) => todo.id === params.id)
-
-      if (!todo) {
-        return error(404, 'Todo not found.')
+    async ({ params, error }) => {
+      try {
+        const [todo] = await db
+          .select()
+          .from(todos)
+          .where(eq(todos.id, params.id))
+
+        if (!todo) {
+          return error(404, 'Todo not found.')
+        }
+
+        return todo
+      } catch (err) {
+        console.error(err)
+        return error(500, 'Internal Server Error')
       }
-
-      return todo
     },
     {
       params: t.Object({
@@ -55,28 +37,43 @@ const app = new Elysia()
   )
   .post(
     '/todos',
-    async ({ body, set }) => {
-      await db.insert(todos).values(body)
-      set.status = 'Created'
+    async ({ body, set, error }) => {
+      try {
+        const [newTodo] = await db.insert(todos).values(body).returning()
+        set.status = 'Created'
+        return newTodo
+      } catch (err) {
+        console.error(err)
+        return error(500, 'Internal Server Error')
+      }
     },
     {
       body: t.Object({
-        desc: t.String()
+        desc: t.String(),
+        starred: t.Boolean(),
+        completed: t.Boolean()
       })
     }
   )
   .put(
     '/todos/:id',
-    ({ params, body, error }) => {
-      const todo = todoList.find((todo) => todo.id === params.id)
-
-      if (!todo) {
-        return error(204, 'Todo can not be updated.')
+    async ({ params, body, error }) => {
+      try {
+        const [updatedTodo] = await db
+          .update(todos)
+          .set(body)
+          .where(eq(todos.id, params.id))
+          .returning()
+
+        if (!updatedTodo) {
+          return error(204, 'Todo can not be updated.')
+        }
+
+        return updatedTodo
+      } catch (err) {
+        console.error(err)
+        return error(500, 'Internal Server Error')
       }
-
-      Object.assign(todo, body)
-
-      return todo
     },
     {
       params: t.Object({
@@ -91,16 +88,23 @@ const app = new Elysia()
   )
   .patch(
     '/todos/:id',
-    ({ params, body, error }) => {
-      const todo = todoList.find((todo) => todo.id === params.id)
-
-      if (!todo) {
-        return error(204, 'Todo can not be updated.')
+    async ({ params, body, error }) => {
+      try {
+        const [updatedTodo] = await db
+          .update(todos)
+          .set(body)
+          .where(eq(todos.id, params.id))
+          .returning()
+
+        if (!updatedTodo) {
+          return error(204, 'Todo can not be updated.')
+        }
+
+        return updatedTodo
+      } catch (err) {
+        console.error(err)
+        return error(500, 'Internal Server Error')
       }
-
-      Object.assign(todo, body)
-
-      return todo
     },
     {
       params: t.Object({
@@ -115,16 +119,22 @@ const app = new Elysia()
   )
   .delete(
     '/todos/:id',
-    ({ params, error }) => {
-      const todo = todoList.find((todo) => todo.id === params.id)
-
-      if (!todo) {
-        return error(204, 'Todo can not be deleted.')
+    async ({ params, error }) => {
+      try {
+        const [deletedTodo] = await db
+          .delete(todos)
+          .where(eq(todos.id, params.id))
+          .returning()
+
+        if (!deletedTodo) {
+          return error(204, 'Todo can not be deleted.')
+        }
+
+        return deletedTodo
+      } catch (err) {
+        console.error(err)
+        return error(500, 'Internal Server Error')
       }
-
-      todoList.splice(todoList.indexOf(todo), 1)
-
-      return todo
     },
     {
       params: t.Object({
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 68e45643..adea9ba0 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -79,34 +79,68 @@ function App() {
     })
   }, [])
 
-  const handleDelete = (id: number) =>
-    setTodos(todos.filter((todo) => todo.id !== id))
-
-  const toggleStar = (id: number) =>
-    setTodos(
-      todos.map((todo) =>
-        todo.id === id ? { ...todo, starred: !todo.starred } : todo
-      )
-    )
-
-  const toggleChecked = (id: number) =>
-    setTodos(
-      todos.map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo
-      )
-    )
-
-  const addTodo = () => {
-    setTodos([
-      ...todos,
-      {
-        id: todos.length,
+  const addTodo = async () => {
+    try {
+      const res = await client.todos.post({
         desc: inputRef.current!.value,
         starred: false,
         completed: false
+      })
+
+      if (res.error) {
+        res.error
+      }
+
+      if (res.data) {
+        setTodos([...todos, res.data])
       }
-    ])
-    inputRef.current!.value = ''
+
+      inputRef.current!.value = ''
+    } catch (error) {
+      console.error('An error occurred while adding todo:', error)
+    }
+  }
+  const handleDelete = async (id: number) => {
+    try {
+      const res = await client.todos({ id }).delete()
+      if (res.error) {
+        res.error
+      } else {
+        setTodos(todos.filter((todo) => todo.id !== id))
+      }
+    } catch (error) {
+      console.error('An error occurred while deleting:', error)
+    }
+  }
+
+  const toggleStar = (id: number) => {
+    const currentStarred = todos.find((todo) => todo.id === id)?.starred
+    client
+      .todos({ id })
+      .patch({ starred: !currentStarred })
+      .then((res) => {
+        if (res.error) {
+          res.error
+        }
+        if (res.data) {
+          setTodos(todos.map((todo) => (todo.id === id ? res.data : todo)))
+        }
+      })
+  }
+
+  const toggleChecked = (id: number) => {
+    const currentChecked = todos.find((todo) => todo.id === id)?.completed
+    client
+      .todos({ id })
+      .patch({ completed: !currentChecked })
+      .then((res) => {
+        if (res.error) {
+          res.error
+        }
+        if (res.data) {
+          setTodos(todos.map((todo) => (todo.id === id ? res.data : todo)))
+        }
+      })
   }
 
   return (