diff --git a/src/components/MissionItem.jsx b/src/components/MissionItem.jsx
index 8d40c34..2361469 100644
--- a/src/components/MissionItem.jsx
+++ b/src/components/MissionItem.jsx
@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { addReservedMission } from '../redux/missions/missionsSlice';
+import { addReservedMission, LeaveMission } from '../redux/missions/missionsSlice';
 
 const MissionItem = ({ mission }) => {
   const dispatch = useDispatch();
@@ -8,6 +8,10 @@ const MissionItem = ({ mission }) => {
     dispatch(addReservedMission(mission.mission_id));
   };
 
+  const handleClickLeaveMission = () => {
+    dispatch(LeaveMission(mission.mission_id));
+  };
+
   return (
     <tr>
       <td className="mission-name">{ mission.mission_name }</td>
@@ -17,6 +21,7 @@ const MissionItem = ({ mission }) => {
       </td>
       <td className="mission-join-button">
         <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
+        <button type="button" className="btn btn-pink" onClick={handleClickLeaveMission}>Leave Mission</button>
       </td>
     </tr>
   );