diff --git a/frontend/src/pages/DishList.tsx b/frontend/src/pages/DishList.tsx
index f30216f..387b634 100644
--- a/frontend/src/pages/DishList.tsx
+++ b/frontend/src/pages/DishList.tsx
@@ -64,7 +64,7 @@ const DishList: React.FC = () => {
     // }
 
     // すべての料理リスト
-    const [allDish, setAllDish] = useState<Dish[]>();
+    const [allDish, setAllDish] = useState<Dish[]>(testdish);
     // 画面表示用の食材情報配列
     const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
     // エラーメッセージの状態管理
@@ -74,7 +74,9 @@ const DishList: React.FC = () => {
     // 料理リスト編集ダイアログの表示状態
     const [openChangeDialog, setOpenChangeDialog] = useState(false);
     // 料理リストの食材の個数編集ダイアログの表示状態
-    const [openChangeItemDialog, setOpenChangeItemDialog] = useState(false);
+    const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false);
+    // 編集する食材の状態
+    const [selectedEditingStuff, setSelectedEditingStuff] = useState<Dish>();
 
     const changeDialog = () => {
         setOpenDialog(false);
@@ -86,6 +88,17 @@ const DishList: React.FC = () => {
         setOpenDialog(true);
         setOpenChangeDialog(false);
     };
+    // 選択された食材
+    let selectedItem : string = '';
+    // 選択された食材の個数
+    let selectedItemAmount : number = 0;
+    // 選択された食材の個数を変更するダイアログを開く処理
+    const changeSelectedItemAmount = (dish : Dish, stuff_name : string, stuff_amount : number) => { 
+        setOpenChangeAmountDialog(true)
+        setSelectedEditingStuff(dish);
+        selectedItem = stuff_name;
+        selectedItemAmount = stuff_amount;
+    };
     /**
      * タスクを削除するハンドラー
      * 指定されたIDのタスクをAPIを通じて削除
@@ -120,8 +133,8 @@ const DishList: React.FC = () => {
 
     const fetchTasks = async () => {
         try {
-            const dishlistfirst = await recipeApi.getAllRecipes();
-            setAllDish(dishlistfirst);
+            // const dishlistfirst = await recipeApi.getAllRecipes();
+            // setAllDish(dishlistfirst);
         } catch (error) {
             alert("取得失敗");
             // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
@@ -178,7 +191,7 @@ const DishList: React.FC = () => {
                     </Button>
                 </div>
                 {/*新規料理追加ボタン - 画面下部に固定表示 */}
-                      <Tooltip title="料理から追加">
+                      {/* <Tooltip title="料理から追加">
                         <Fab
                           color="primary"
                           sx={{ position: 'fixed', bottom: 106, left: '60%', transform: 'translateX(-50%)' }}
@@ -186,9 +199,9 @@ const DishList: React.FC = () => {
                         >
                           <SoupKitchenIcon />
                         </Fab>
-                      </Tooltip>
+                      </Tooltip> */}
             </Box>
-            {/* 新規タスク作成ダイアログ */}
+            {/* 料理リストの詳細表示ダイアログ */}
             <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}
                 maxWidth="lg"
                 fullWidth
@@ -234,13 +247,13 @@ const DishList: React.FC = () => {
                     </Button>
                 </DialogActions>
             </Dialog>
-            {/* 食材の個数の編集ダイアログ */}
+            {/* 食材編集ダイアログ */}
             <Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true}
                 maxWidth="lg"
                 fullWidth
                 >
                 <Box display="flex" alignItems="center">
-                    <DialogTitle sx={{ flexGrow: 1 }}>食材名</DialogTitle>
+                    <DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle>
                 </Box>
                 <FormGroup>
                     {/* <List> */}
@@ -277,11 +290,11 @@ const DishList: React.FC = () => {
                                 />
                                 {/* 買い物リスト：食材情報記入ボタン */}
                                 <ListItemSecondaryAction>
-                                    <Tooltip title="食材情報追加">
+                                    <Tooltip title="個数を編集">
                                     <IconButton
                                         edge="end"
-                                        aria-label="食材情報追加"
-                                    //onClick={() => handleDeleteTask(task.id)}
+                                        aria-label="個数を編集"
+                                        onClick={() => changeSelectedItemAmount(test, test.recipeName, test.summary)}
                                     >
                                         <ShoppingBasketIcon />
                                     </IconButton>
@@ -346,115 +359,52 @@ const DishList: React.FC = () => {
                     </Button>
                 </DialogActions>
             </Dialog>
-            {/* 食材編集ダイアログ */}
-            <Dialog open={openChangeDialog} onClose={() => setOpenChangeDialog(false)} disableScrollLock={true}
+            {/* 食材の個数の編集ダイアログ */}
+            <Dialog open={openChangeAmountDialog} onClose={() => setOpenChangeAmountDialog(false)} disableScrollLock={true}
                 maxWidth="lg"
                 fullWidth
                 >
                 <Box display="flex" alignItems="center">
-                    <DialogTitle sx={{ flexGrow: 1 }}>料理名</DialogTitle>
+                    <DialogTitle sx={{ flexGrow: 1 }}>数量の変更</DialogTitle>
                 </Box>
-                <FormGroup>
-                    {/* <List> */}
-                        {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
-                        {testDishArray.map((test, id) => (
-                            <ListItem
-                                key={id}
-                                sx={{
-                                    bgcolor: 'background.paper',
-                                    mb: 1,
-                                    borderRadius: 1,
-                                    boxShadow: 1,
-                                }}
-                                >
-                                {/* タスク完了状態を切り替えるチェックボックス
-                                <Checkbox
-                                    checked={task.completed}
-                                    onChange={() => handleToggleComplete(task.id)}
-                                /> */}
-                                {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
-                                <ListItemText
-                                    primary={test.recipeName}
-                                    // secondary={task.description}
-                                    sx={{width: '80%'}}
-                                />
-                                {/* 食材の個数を表示 */}
-                                <ListItemText
-                                    primary={<Typography style={{textAlign:"center"}}>個数<br />
-                                    {test.summary}
-                                    </Typography>
-                                    }
-                                    // secondary={task.description}
-                                    sx={{ align: "right", fontSize: "20px" }}
-                                />
-                                {/* 買い物リスト：食材情報記入ボタン */}
-                                <ListItemSecondaryAction>
-                                    <Tooltip title="食材情報追加">
-                                    <IconButton
-                                        edge="end"
-                                        aria-label="食材情報追加"
-                                    //onClick={() => handleDeleteTask(task.id)}
-                                    >
-                                        <ShoppingBasketIcon />
-                                    </IconButton>
-                                    </Tooltip>
-                                    {/* 買い物リスト：食材削除ボタン */}
-                                    <Tooltip title="項目を削除"
-                                    componentsProps={{
-                                        tooltip: {
-                                        sx: {
-                                            backgroundColor: "white",
-                                            color: "red",
-                                            fontSize: "0.8rem",
-                                            padding: "6px",
-                                            borderRadius: "6px",
-                                        },
-                                        },
-                                    }}
-                                    >
-                    
-                                    <IconButton
-                                        edge="end"
-                                        aria-label="delete"
-                                        onClick={() => handleDeleteStuffTemp(id)}
-                                    >
-                                        <DeleteIcon />
-                                    </IconButton>
-                                    </Tooltip>
-                                </ListItemSecondaryAction>
-                    
-                                </ListItem>
-                                // <Button onClick={() => setOpenDialog(true)} key = {index}>
-                                //     {test}
-                                // </Button>
-                            // <ListItem 
-                            //     key={index}
-                            //     sx={{
-                            //         bgcolor: 'background.paper',
-                            //         mb: 1,
-                            //         borderRadius: 1,
-                            //         boxShadow: 2,
-                            //     }}
-                            // >
-                            //     {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
-                            //     <ListItemText
-                            //     primary={test}
-                            //     //secondary={tobuy.amount}
-                            //     primaryTypographyProps={{ fontSize: '40px', margin: '10px' }}
-                            //     sx={{
-                            //         textDecoration: false ? 'line-through' : 'none',
-                            //     }}
-                            //     />
-                            // </ListItem>
-                        ))}
-                    {/* </List> */}
-                </FormGroup>
+                <DialogContent>
+                    <Box sx={{ pt: 1 }}>
+                
+                    {/* 材料名表示 */}
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        label="材料名"
+                        fullWidth
+                        value={selectedItem}
+                        disabled
+                        sx={{ marginBottom: 2 }}
+                    />
+                    {/* 数量入力フィールド */}
+                    <TextField
+                        margin="dense"
+                        label="数量"
+                        fullWidth
+                        value={selectedItemAmount}
+                        onChange={(e) => {
+                        const value = e.target.value;
+                        const parsedValue = parseInt(value, 10); // 数値に変換
+                        // if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
+                        //     setSelectedEditingTask({ ...selectedEditingTask, amount: parsedValue }); // number型で保存
+                        // }
+
+                        }}
+                        sx={{ width: "20%" }}
+                        type="number"
+                        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+        
+                    />
+                    </Box>
+                </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => cancelChange()}>変更をキャンセル</Button>
-                    <Button onClick={() => setOpenDialog(false)} variant="contained"
-                        style={{width: '40%', fontSize: '40px'}}
-                    >
-                        料理リストへ登録
+                    <Button onClick={() => setOpenChangeAmountDialog(false)}>キャンセル</Button>
+                    <Button onClick={() => setOpenChangeAmountDialog(false)} variant="contained">
+                    確定
                     </Button>
                 </DialogActions>
             </Dialog>