diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx
index 6acfdd3..27485fe 100644
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@@ -26,12 +26,14 @@ const formatDateLocal = (date: Date) => {
 const BuyDialog = ({
     openDialog,
     setOpenDialog,
+    stuffName,
     newStock,
     setNewStock,
     onSubmit,
 }: {
     openDialog: boolean,
     setOpenDialog: (open: boolean) => void,
+    stuffName: string,
     newStock: NewStock,
     setNewStock: (tobuy: NewStock) => void,
     onSubmit: () => void,
@@ -40,11 +42,21 @@ const BuyDialog = ({
     return (
 
 
-        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '500px', maxHeight: '80vh' } }}
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
 >
             <DialogTitle>在庫登録</DialogTitle>
             <DialogContent>
                 <Box sx={{ pt: 1 }}>
+                    {/* 材料名表示 */}
+                    <TextField
+                        margin="dense"
+                        label="材料名"
+                        fullWidth
+                        value={stuffName}
+                        disabled
+                        sx={{ marginBottom: 2 , marginTop: 2}}
+                    />
+
                     {/* 価格入力フィールド */}
                     <TextField
                         autoFocus
@@ -58,6 +70,7 @@ const BuyDialog = ({
                                 setNewStock({ ...newStock, price: value })
                             };
                         }}
+                        sx={{ marginBottom: 2 }}
                     />
                     {/* 購入日・消費期限を横並びに */}
                     <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 01b985e..75a6d10 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -17,7 +17,10 @@ import {
   ListItemButton,
   Divider,
   IconButton,
-  AlertColor
+  AlertColor,
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper
 } from '@mui/material';
 import {
   Menu as MenuIcon,
@@ -25,6 +28,7 @@ import {
   Inventory as InventoryIcon, // テストページ用のアイコン
   Science as ScienceIcon, // 鈴木
   SoupKitchen as SoupKitchenIcon,
+  ShoppingCart as ShoppingCartIcon
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 import { MessageContext } from './MessageContext';
@@ -34,6 +38,7 @@ const Layout: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [bottomNavi, setBottomNavi] = useState(1);
 
   /**
    * ログアウト処理を行うハンドラー関数
@@ -44,19 +49,9 @@ const Layout: React.FC = () => {
     navigate('/login');
   };
 
-  /**
-   * 画面遷移処理を行うハンドラー関数
-   * 指定されたパスに遷移し、サイドメニューを閉じる
-   */
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
+  
 
-  // 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
-  const isSelected = (path: string): boolean => {
-    return location.pathname === path;
-  };
+ 
 
   // メニューを開閉するハンドラー
   const toggleDrawer = () => {
@@ -96,21 +91,27 @@ const Layout: React.FC = () => {
     sessionStorage.removeItem('globalMessage');
   };
 
+  const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
+    setBottomNavi(newValue);
+    switch(newValue) {
+      case 0:
+        navigate('stock');
+        break;
+      case 1:
+        navigate('tasks');
+        break;
+      case 2:
+        navigate('recipeList');
+        break;
+    }
+    // ここでルーティング処理などを行う
+  }
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
       <AppBar position="static" elevation={0}>
         <Toolbar>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             shopchop
           </Typography>
@@ -120,52 +121,31 @@ const Layout: React.FC = () => {
         </Toolbar>
       </AppBar>
 
-      {/* サイドメニュー */}
-      <Drawer
-        anchor="left"
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-      >
-        <Box
-          sx={{ width: 250 }}
-          role="presentation"
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <BottomNavigation
+          showLabels
+          value={bottomNavi}
+          onChange={(event, newValue) => {
+            setBottomNavi(newValue);
+            switch(newValue) {
+              case 0:
+                navigate('stock');
+                break;
+              case 1:
+                navigate('tasks');
+                break;
+              case 2:
+                navigate('recipeList');
+                break;
+            }
+            // ここでルーティング処理などを行う
+          }}
         >
-          <List>
-            <ListItemButton
-              onClick={() => handleNavigate('/tasks')}
-              selected={isSelected('/tasks')}
-            >
-              <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="買うものリスト" />
-            </ListItemButton>
-            {/* テストページへのリンクを追加 */}
-
-            {/* 在庫リストへのリンクを追加 */}
-            <ListItemButton
-              onClick={() => handleNavigate('/addRecipe')}
-              selected={isSelected('/addRecipe')}
-            >
-              <ListItemIcon><SoupKitchenIcon /></ListItemIcon>
-              <ListItemText primary="料理の追加" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/recipeList')}
-              selected={isSelected('/recipeList')}
-            >
-              <ListItemIcon><ScienceIcon /></ListItemIcon>
-              <ListItemText primary="料理リスト" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/stock')}
-              selected={isSelected('/stock')}
-            >
-              <ListItemIcon><InventoryIcon /></ListItemIcon>
-              <ListItemText primary="在庫管理" />
-            </ListItemButton>
-            <Divider />
-          </List>
-        </Box>
-      </Drawer>
+          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+        </BottomNavigation>
+      </Paper>
 
       {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
       <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 7688049..47603c9 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -149,7 +149,7 @@ const StockPage: React.FC = () => {
   };
 
   /**
-   * カテゴリー選択？？
+   * カテゴリー選択
    */
   const onChangeCategory = async (category: string) => {
     setNewStock({ ...newStock, category })
@@ -273,8 +273,6 @@ const StockPage: React.FC = () => {
               <TableRow>
                 <TableCell>食材名</TableCell>
                 <TableCell>数量</TableCell>
-                <TableCell>購入価格</TableCell>
-                <TableCell>購入日</TableCell>
                 <TableCell>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
@@ -293,8 +291,6 @@ const StockPage: React.FC = () => {
                   >
                     <TableCell>{stock.stuffName}</TableCell>
                     <TableCell>{stock.amount}</TableCell>
-                    <TableCell>{stock.price}</TableCell>
-                    <TableCell>{formatDate(stock.buyDate)}</TableCell>
                     <TableCell
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
@@ -333,6 +329,54 @@ const StockPage: React.FC = () => {
                   value={editStock.price}
                   onChange={handleChange}
                 />
+                {/* 購入日・消費期限を横並びに */}
+                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                  {/* 購入日 */}
+                  <DatePicker
+                    selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          buyDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="購入日 (yyyy/MM/dd)"
+                        fullWidth
+                        name="buyDate"
+                      />
+                    }
+                    isClearable
+                  />
+                  {/* 消費・賞味期限 */}
+                  <DatePicker
+                    selected={editStock.expDate ? new Date(editStock.expDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          expDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="消費・賞味期限 (yyyy/MM/dd)"
+                        fullWidth
+                        name="expDate"
+                      />
+                    }
+                    isClearable
+                  />
+                </Box>
+                {/* 以前の書き方
                 <TextField
                   label="購入日 (yyyy-MM-dd)"
                   fullWidth
@@ -348,18 +392,15 @@ const StockPage: React.FC = () => {
                   name="expDate"
                   value={editStock.expDate}
                   onChange={handleChange}
-                />
-
-                <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
-                <Button
-                  variant="contained"
-                  color="success"
-                  onClick={handleApplyChanges}
-                  sx={{ mt: 3, mb: 2, left: "68%" }}
-                >
-                  変更を適用
-                </Button>
-
+                /> */}
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
+                    キャンセル
+                  </Button>
+                  <Button variant="contained" color="success" onClick={handleApplyChanges}>
+                    変更を適用
+                  </Button>
+                </Box>
               </>
             )}
           </DialogContent>
@@ -378,13 +419,26 @@ const StockPage: React.FC = () => {
               <>
                 <Typography variant="h4">【{selectedRow.stuffName}】を削除します。</Typography>
                 <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                <Button onClick={() => { setIsDeleteOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                <Button variant="contained" color="error" onClick={() => {
-                  handleDeleteStock(selectedRow.stockId);
-                  setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
-                  setSelectedRow(null); // セルの選択を解除
-                }}
-                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => {
+                    setIsDeleteOpen(false);
+                    setSelectedRow(null);
+                  }}>
+                    キャンセル
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    onClick={() => {
+                      handleDeleteStock(selectedRow.stockId);
+                      setIsDeleteOpen(false);
+                      setSelectedRow(null);
+                    }}
+                  >
+                    削除
+                  </Button>
+                </Box>
               </>
             )}
           </DialogContent>
@@ -401,6 +455,7 @@ const StockPage: React.FC = () => {
       </Typography>
 
       <Box sx={{ textAlign: 'right' }}>
+      {/* <Box sx={{ position: 'fixed', top: 16, right: 16, zIndex: 1000, display: 'flex', gap: 2 }}> */}
         {/* 在庫の食材追加ボタン */}
         <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
@@ -557,8 +612,9 @@ const StockPage: React.FC = () => {
         </Dialog>
 
         {/* 在庫の食材編集ボタン（全テーブル共通） */}
-        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          編集
+        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
+          mt: 3, mb: 2, mr: 1 }}>
+          詳細・編集
         </Button>
 
         {/* 在庫の食材削除ボタン （全テーブル共通） */}
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 0a20838..fd2335f 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -252,6 +252,7 @@ const TaskListPage: React.FC = () => {
                   <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
                     onClick={() => {
                       setOpenInfoDialog(true)
+                      setEditingItem(tobuy)
                       setSelectedToBuyId(tobuy.tobuyId)
                       // handleDeleteTask(tobuy.tobuyId)
                     }}>
@@ -295,28 +296,28 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           材料のみ追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
         onClick={() => setOpenAddToBuyDialog(true)}
       >
         <AddIcon />
       </Fab>
 
       {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           料理から追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
         onClick={() => {
           // setOpenAddToBuyDialog(true);
           navigate('/RecipeList');
@@ -331,7 +332,7 @@ const TaskListPage: React.FC = () => {
       <AddStuffAmountDialog openDialog={openAddToBuyDialog} setOpenDialog={setOpenAddToBuyDialog} newItem={newToBuy} setNewItem={setNewToBuy} onSubmit={handleAddNewToBuy} />
 
       {/* 購入処理(在庫登録)のための数値入力ダイアログ */}
-      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
+      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} stuffName={editingItem.stuffName} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
 
       {/* 数量変更ダイアログ */}
       <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}