diff --git a/frontend/src/components/CategoryDropDown.tsx b/frontend/src/components/CategoryDropDown.tsx
new file mode 100644
index 0000000..fce3e55
--- /dev/null
+++ b/frontend/src/components/CategoryDropDown.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+
+const CategoryDropDown = () => {
+  const [selectedValue, setSelectedValue] = useState(""); // 選択された値の状態管理
+
+  return (
+    <FormControl sx={{ width: "50%", marginBottom:2 }}>
+      <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+      <Select
+        labelId="demo-simple-select-label"
+        value={selectedValue}
+        onChange={(event) => setSelectedValue(event.target.value)}
+      >
+        <MenuItem value="乳製品">乳製品</MenuItem>
+        <MenuItem value="肉・魚">肉・魚</MenuItem>
+        <MenuItem value="野菜">野菜</MenuItem>
+        <MenuItem value="調味料">調味料</MenuItem>
+        <MenuItem value="その他">その他</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default CategoryDropDown;
\ No newline at end of file
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index b09759c..76040a1 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -34,7 +34,7 @@ import {
 import { Task } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留
-import DropDown from "../components/DropDown";
+import CategoryDropDown from "../components/CategoryDropDown";
 
 
 
@@ -212,7 +212,7 @@ const TaskListPage: React.FC = () => {
         <DialogContent>
           <Box sx={{ pt: 1 }}>
             {/*材料カテゴリ選択 */}
-            <DropDown></DropDown>
+            <CategoryDropDown></CategoryDropDown>
             {/* タスクタイトル入力フィールド */}
             <TextField
               autoFocus