diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 80ef225..430d4bc 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -57,8 +57,7 @@ const TaskListPage: React.FC = () => {
   //在庫登録ダイアログの表示状態
   const [openInfoDialog, setOpenInfoDialog] = useState(false);
   
-  const [selectedTask, setSelectedTask] = useState<Task>();
-
+  const [selectedTask, setSelectedTask] = useState<ToBuy["tobuy_id"]>(0);
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TASK);
 
@@ -153,8 +152,8 @@ const TaskListPage: React.FC = () => {
               */}
               {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
               <ListItemText
-                primary={tobuy.stuff_name}
-                secondary={tobuy.amount}
+                primary={`${tobuy.stuff_name} × ${tobuy.amount}`}
+                //secondary={tobuy.amount}
                 sx={{
                   textDecoration: false ? 'line-through' : 'none',
                 }}
@@ -165,7 +164,11 @@ const TaskListPage: React.FC = () => {
                   <IconButton
                     edge="end"
                     aria-label="食材情報追加"
-                  //onClick={() => handleDeleteTask(task.id)}
+                    onClick={() => {
+                      setOpenInfoDialog(true)
+                      setSelectedTask(tobuy.tobuy_id)
+                      handleDeleteTask(tobuy.tobuy_id)
+                    }}
                   >
                     <ShoppingBasketIcon />
                   </IconButton>
@@ -306,8 +309,9 @@ const TaskListPage: React.FC = () => {
           <Button onClick={() => setOpenInfoDialog(false)}>キャンセル</Button>
           <Button onClick={() => {
             if (selectedTask) {
-              handleDeleteTask(selectedTask.id)
+              handleDeleteTask(selectedTask)
               setOpenInfoDialog(false)
+              setNewToBuy(EMPTY_TASK); // 入力内容をリセット
             }
             }}
             variant="contained">