diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
index e69de29..15f7e87 100644
--- a/src/components/ManageList.jsx
+++ b/src/components/ManageList.jsx
@@ -0,0 +1,65 @@
+import styled from '@emotion/native';
+import { COLORS } from '../shared/color';
+import { TouchableOpacity } from 'react-native';
+
+const ManageList = ({ pillName, id }) => {
+ return (
+
+ {pillName}
+
+ console.log('편집', id)}
+ />
+ console.log('삭제', id)}
+ />
+
+
+ );
+};
+
+const TextButton = ({ buttonColor, buttonText, onPress }) => {
+ return (
+
+ {buttonText}
+
+ );
+};
+
+const ManageListContainer = styled.View`
+ background-color: white;
+ margin: 8px 16px;
+ padding: 12px 16px;
+ height: 80px;
+ border-radius: 16px;
+ box-shadow: 0px 0px 8px rgba(202, 202, 202, 0.23);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+const ManageListTitle = styled.Text`
+ font-size: 28px;
+ text-overflow: ellipsis;
+`;
+
+const ButtonGroupContainer = styled.View`
+ flex-direction: row;
+ justify-content: end;
+ gap: 16px;
+`;
+
+const ManageButton = styled.Text`
+ font-size: 20px;
+ line-height: 24px;
+ margin: 0 0 0 16px;
+ color: ${(props) => props.buttonColor};
+`;
+
+export default ManageList;
diff --git a/src/components/index.js b/src/components/index.js
index e69de29..44aeabd 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+import ManageList from './ManageList';
+
+export { ManageList };