diff --git a/frontend/src/components/DropdownList/DropdownList.css b/frontend/src/components/DropdownList/DropdownList.css
new file mode 100644
index 00000000..f39a2e95
--- /dev/null
+++ b/frontend/src/components/DropdownList/DropdownList.css
@@ -0,0 +1,14 @@
+.dropdown{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.select{
+    width: 241px;
+    height: 34px;
+    font-size: 13px !important;
+}
+.menuItem{
+    font-size: 13px !important;
+}
diff --git a/frontend/src/components/DropdownList/DropdownList.jsx b/frontend/src/components/DropdownList/DropdownList.jsx
new file mode 100644
index 00000000..2397d462
--- /dev/null
+++ b/frontend/src/components/DropdownList/DropdownList.jsx
@@ -0,0 +1,26 @@
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import React from 'react'
+import PropTypes from 'prop-types'
+import './DropdownList.css'
+
+const DropdownList = ({actions = []}) => {
+  return (
+    <div className='dropdown'>
+    <Select
+          defaultValue={actions[0]}
+          className='select'
+        >
+          {actions.map((action, index) => (
+            <MenuItem key={index} className='menuItem' value={action}>{action}</MenuItem>
+          ))}
+        </Select>
+        </div>
+  )
+}
+
+DropdownList.propTypes = {
+    actions: PropTypes.array
+}
+
+export default DropdownList