diff --git a/fe/src/pages/ListDetailPage.vue b/fe/src/pages/ListDetailPage.vue
index b6479bf..889edab 100644
--- a/fe/src/pages/ListDetailPage.vue
+++ b/fe/src/pages/ListDetailPage.vue
@@ -198,7 +198,7 @@ import { useQuasar, QFile } from 'quasar';
 interface Item {
   id: number;
   name: string;
-  quantity?: number | undefined;
+  quantity?: string | undefined;
   is_complete: boolean;
   version: number;
   updating?: boolean;
@@ -234,9 +234,9 @@ const pollingInterval = ref<ReturnType<typeof setInterval> | undefined>(undefine
 const lastListUpdate = ref<string | null>(null);
 const lastItemUpdate = ref<string | null>(null);
 
-const newItem = ref<{ name: string; quantity?: number }>({ name: '' });
+const newItem = ref<{ name: string; quantity?: string }>({ name: '' });
 const editingItemName = ref('');
-const editingItemQuantity = ref<number | undefined>(undefined);
+const editingItemQuantity = ref<string | undefined>(undefined);
 
 // OCR related state
 const showOcrDialog = ref(false);
@@ -257,10 +257,12 @@ const itemNameInput = ref<{ focus: () => void } | null>(null);
 const fetchListDetails = async () => {
   loading.value = true;
   error.value = null;
+  console.log('Fetching list details for ID:', route.params.id);
   try {
     const response = await apiClient.get(
       API_ENDPOINTS.LISTS.BY_ID(String(route.params.id))
     );
+    console.log('List details response:', response.data);
     list.value = response.data as List;
     lastListUpdate.value = response.data.updated_at;
     // Find the latest item update time
@@ -329,7 +331,10 @@ const onAddItem = async () => {
   try {
     const response = await apiClient.post(
       API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)),
-      newItem.value
+      {
+        name: newItem.value.name,
+        quantity: newItem.value.quantity?.toString()
+      }
     );
     list.value.items.push(response.data as Item);
     newItem.value = { name: '' };
@@ -352,7 +357,7 @@ const updateItem = async (item: Item) => {
       API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id)),
       {
         name: editingItemName.value,
-        quantity: editingItemQuantity.value,
+        quantity: editingItemQuantity.value?.toString(),
         completed: item.is_complete,
         version: item.version,
       }
@@ -418,11 +423,11 @@ const addOcrItems = async () => {
     for (const item of ocrItems.value) {
       if (!item.name) continue;
 
-      const response = await apiClient.post<Item>(
-        API_ENDPOINTS.LISTS.ITEMS(list.value.id),
-        { name: item.name, quantity: 1 }
+      const response = await apiClient.post(
+        API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)),
+        { name: item.name, quantity: "1" }
       );
-      list.value.items.push(response.data);
+      list.value.items.push(response.data as Item);
     }
 
     $q.notify({
@@ -478,7 +483,7 @@ const deleteItem = async (item: Item) => {
   item.deleting = true;
   try {
     await apiClient.delete(
-      API_ENDPOINTS.LISTS.ITEM(list.value.id.toString(), item.id.toString())
+      API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id))
     );
     const index = list.value.items.findIndex((i) => i.id === item.id);
     if (index !== -1) {
@@ -496,6 +501,12 @@ const deleteItem = async (item: Item) => {
 
 // Add keyboard event listeners
 onMounted(() => {
+  console.log('Component mounted, route params:', route.params);
+  if (!route.params.id) {
+    console.error('No list ID found in route params');
+    error.value = 'No list ID provided';
+    return;
+  }
   void fetchListDetails().then(() => {
     startPolling();
   });