diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index ef8f92f..59a71c2 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -97,7 +97,7 @@ const StockPage: React.FC = () => {
             alert("削除する食材を選択してください。");
         }
     };
-    /** 編集ダイアログを閉じる */
+    /** 削除ダイアログを閉じる */
     const handleCloseDelete = () => {
         setIsDeleteOpen(false);
     };
@@ -109,34 +109,57 @@ const StockPage: React.FC = () => {
         if (filteredStocks.length === 0) return null;
 
         return (
-            <TableContainer component={Paper}>
-                <Table>
-                    <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
-                        <TableRow>
-                            <TableCell>食材名</TableCell>
-                            <TableCell>数量</TableCell>
-                            <TableCell>購入価格</TableCell>
-                            <TableCell>賞味・消費期限</TableCell>
-                            <TableCell>購入日</TableCell>
-                        </TableRow>
-                    </TableHead>
-                    <TableBody>
-                        {filteredStocks.map(stock => (
-                            <TableRow
-                                key={stock.stock_id}
-                                onClick={() => handleRowClick(stock)}
-                                style={{ backgroundColor: selectedRow?.stock_id === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}
-                            >
-                                <TableCell>{stock.stuff_name}</TableCell>
-                                <TableCell>{stock.amount}</TableCell>
-                                <TableCell>{stock.price}</TableCell>
-                                <TableCell>{formatDate(stock.exp_date)}</TableCell>
-                                <TableCell>{formatDate(stock.buy_date)}</TableCell>
+            <>
+                <TableContainer component={Paper}>
+                    <Table>
+                        <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
+                            <TableRow>
+                                <TableCell>食材名</TableCell>
+                                <TableCell>数量</TableCell>
+                                <TableCell>購入価格</TableCell>
+                                <TableCell>賞味・消費期限</TableCell>
+                                <TableCell>購入日</TableCell>
                             </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </TableContainer>
+                        </TableHead>
+                        <TableBody>
+                            {filteredStocks.map(stock => (
+                                <TableRow
+                                    key={stock.stock_id}
+                                    onClick={() => handleRowClick(stock)}
+                                    style={{ backgroundColor: selectedRow?.stock_id === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}
+                                >
+                                    <TableCell>{stock.stuff_name}</TableCell>
+                                    <TableCell>{stock.amount}</TableCell>
+                                    <TableCell>{stock.price}</TableCell>
+                                    <TableCell>{formatDate(stock.exp_date)}</TableCell>
+                                    <TableCell>{formatDate(stock.buy_date)}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+
+                {/* 編集ダイアログ */}
+                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                    <DialogTitle>在庫の編集</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
+                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
+                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
+                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
+                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
+                                <Button onClick={() => setIsEditOpen(false)} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
+                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: "68%" }}>
+                                    変更を適用
+                                </Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+            </>
         );
     };
 
@@ -148,18 +171,24 @@ const StockPage: React.FC = () => {
             </Typography>
 
             {/* タスク編集ボタン（全テーブル共通） */}
-                <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}>
-                    編集
-                </Button>
+            <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '80%' }}>
+                編集
+            </Button>
 
             {/* タスク削除ボタン */}
             <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
-            <Dialog open={isDeleteOpen} onClose={handleCloseDelete}>
+            <Dialog open={isDeleteOpen}
+                onClose={handleCloseDelete}
+                fullWidth
+                maxWidth="sm"
+                sx={{ overflow: "hidden" }}
+            >
                 <DialogTitle>食材の削除</DialogTitle>
                 <DialogContent>
                     <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
                     <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                    <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '85%' }}>削除</Button>
+                    <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                    <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
                 </DialogContent>
             </Dialog>
 
@@ -168,135 +197,30 @@ const StockPage: React.FC = () => {
             <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
                 {StockTable(stocks, ["乳製品"])}
-
-                {/* 編集ダイアログ */}
-                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                    <DialogTitle>在庫の編集</DialogTitle>
-                    <DialogContent>
-                        {selectedRow && (
-                            <>
-                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
-                                    変更を適用
-                                </Button>
-                            </>
-                        )}
-                    </DialogContent>
-                </Dialog>
-
             </div>
 
             {/* 肉・魚 */}
             <Typography variant="h4" component="h1" gutterBottom>肉・魚</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-                {StockTable(stocks, ["肉", "魚"])}      
-
-                {/* 編集ダイアログ */}
-                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                    <DialogTitle>在庫の編集</DialogTitle>
-                    <DialogContent>
-                        {selectedRow && (
-                            <>
-                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%'}}>
-                                    変更を適用
-                                </Button>
-                            </>
-                        )}
-                    </DialogContent>
-                </Dialog>
-
+                {StockTable(stocks, ["肉", "魚"])}
             </div>
 
             {/* 野菜 */}
             <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
                 {StockTable(stocks, ["野菜"])}
-
-                {/* 編集ダイアログ */}
-                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                    <DialogTitle>在庫の編集</DialogTitle>
-                    <DialogContent>
-                        {selectedRow && (
-                            <>
-                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
-                                    変更を適用
-                                </Button>
-                            </>
-                        )}
-                    </DialogContent>
-                </Dialog>
-
             </div>
 
             {/* 調味料 */}
             <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
                 {StockTable(stocks, ["調味料"])}
-
-                {/* 編集ダイアログ */}
-                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                    <DialogTitle>在庫の編集</DialogTitle>
-                    <DialogContent>
-                        {selectedRow && (
-                            <>
-                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
-                                    変更を適用
-                                </Button>
-                            </>
-                        )}
-                    </DialogContent>
-                </Dialog>
-
             </div>
 
             {/* その他 */}
             <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
             <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
                 {StockTable(stocks, ["その他"])}
-
-                {/* 編集ダイアログ */}
-                <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-                    <DialogTitle>在庫の編集</DialogTitle>
-                    <DialogContent>
-                        {selectedRow && (
-                            <>
-                                <Typography variant="body1">選択した食材の在庫を編集します</Typography>
-                                <TextField label="食材名" fullWidth margin="normal" defaultValue={selectedRow.stuff_name} />
-                                <TextField label="数量" fullWidth margin="normal" defaultValue={selectedRow.amount} />
-                                <TextField label="購入価格" fullWidth margin="normal" defaultValue={selectedRow.price} />
-                                <TextField label="賞味・消費期限" fullWidth margin="normal" defaultValue={selectedRow.exp_date} />
-                                <TextField label="購入日" fullWidth margin="normal" defaultValue={selectedRow.buy_date} />
-                                <Button variant="contained" color="success" onClick={handleCloseEdit} sx={{ mt: 3, mb: 2, left: '82%' }}>
-                                    変更を適用
-                                </Button>
-                            </>
-                        )}
-                    </DialogContent>
-                </Dialog>
-
             </div>
         </Container>
     );