diff --git a/frontend/src/components/AddByRecipeDialog.tsx b/frontend/src/components/AddByRecipeDialog.tsx
index a9ec83b..fcce67d 100644
--- a/frontend/src/components/AddByRecipeDialog.tsx
+++ b/frontend/src/components/AddByRecipeDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     Dialog,
     DialogTitle,
@@ -8,23 +8,45 @@ import {
     Box,
 } from '@mui/material';
 
+import { toBuyApi } from '../services/api';
 import { recipeApi } from '../services/api';
 
 import CloseIcon from '@mui/icons-material/Close';
-import { StuffNameAndAmount } from '../types/types';
+import { RecipeDetailWithId, StuffNameAndAmount } from '../types/types';
 
-const AddByRecipeDialog = async ({
+const AddByRecipeDialog =  ({
     openDialog,
     setOpenDialog,
-    recipeId
+    recipeId,
+    numOfPeople,
+    setNumOfPeaple,
+    checked,
+    setChecked
 }: {
     openDialog: boolean,
     setOpenDialog: (open: boolean) => void,
     recipeId: number,
+    numOfPeople: number,
+    setNumOfPeaple: (num: number) => void,
+    checked: boolean,
+    setChecked: (checked: boolean) => void
 }) => {
-    const recipe = await recipeApi.getById(recipeId);
+    const [recipe, setRecipe] = useState<RecipeDetailWithId>();
+    
+    
+    useEffect(() => {
+        console.log("called AddByRecipeDialog useEffect recipeId: ", recipeId);
+        if (recipeId) {
+            const fetchRecipe = async () => {
+                console.log("Fetching recipe with ID:", recipeId);
+                setRecipe(await recipeApi.getById(recipeId));
+            };
+            fetchRecipe();
+        }
+    }, [recipeId]);
 
     return (
+        recipe ? 
         <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}>
             <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
 
@@ -41,31 +63,61 @@ const AddByRecipeDialog = async ({
                 <div>
                     <strong>レシピ名:</strong> {recipe.recipeName}
                 </div>
-                {/* <div>
-                    ({recipe.maxservings})
+                <div>
+                    ({recipe.maxServings}人分在庫あり)
                 </div>
                 <div>
-                    <strong>材料:</strong>
+                    <strong>材料（1人前）:</strong>
                     <ul>
-                        {recipe.stuffNameAndAmountList.map((item, index) => (
+                        {recipe.stuffAndAmountArray.map((item, index) => (
                             <li key={index}>
                                 {item.stuffName} - {item.amount}個
                             </li>
                         ))}
                     </ul>
-                </div> */}
+                </div> 
                 
-                {/* レシピを追加する人数分を入力 */}
+                {/* 在庫との差分を取るかのチェックボックス */}
+                <div>
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={(e) => setChecked(e.target.checked)}
+                        />
+                        在庫との差分を取る
+                    </label>
+                </div>
 
+                {/* レシピを追加する人数分を入力 */}
                 <div>
-                    <strong>材料を買うものリストに追加します。</strong>
+                    <strong>人数:</strong>
+                    <input
+                        type="number"
+                        min="1"
+                        defaultValue={1}
+                        onChange={(e) => {
+                            setNumOfPeaple(parseInt(e.target.value, 10));
+                        }}
+                    />
                 </div>
+
+                {/* 買うものリストに追加するボタン */}
+                <Box sx={{ mt: 2 }}>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={() => {
+                                    toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked);
+                                    setOpenDialog(false);
+                        }}
+                    >
+                    </Button>
+                </Box>
             </DialogContent>
 
-            <DialogActions>
-                <button onClick={() => setOpenDialog(false)}>閉じる</button>
-            </DialogActions>
         </Dialog>
+        : <></>
     );
 }
 
diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx
index 74c5c9f..bd9e225 100644
--- a/frontend/src/pages/RecipeList.tsx
+++ b/frontend/src/pages/RecipeList.tsx
@@ -54,6 +54,8 @@ const RecipeList: React.FC = () => {
   const [openAddByRecipeDialog, setOpenAddByRecipeDialog] = useState(false);
 
   const [addByRecipeId, setAddByRecipeId] = useState(0);
+  const [numOfPeople, setNumOfPeople] = useState(1);
+  const [checked, setChecked] = useState(false);
 
   const openRecipeById = (recipeId: number) => {
     navigate('/addRecipe/' + recipeId);
@@ -147,10 +149,12 @@ const RecipeList: React.FC = () => {
         </div>
       </div>
       {/* 買うものリストへ追加ダイアログ */}
-      {/*
+      {
         <AddByRecipeDialog openDialog={openAddByRecipeDialog} setOpenDialog={setOpenAddByRecipeDialog}
-          recipeId = { addByRecipeId}/>
-      */}
+          recipeId = {addByRecipeId} numOfPeople={numOfPeople} setNumOfPeaple={setNumOfPeople}
+          checked = {checked} setChecked={setChecked}
+        />
+      }
     </>
   );
 };