diff --git a/src/pages/Missions/Missions.js b/src/pages/Missions/Missions.js
index 32b5705..a063f61 100644
--- a/src/pages/Missions/Missions.js
+++ b/src/pages/Missions/Missions.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchMissionAsync } from '../../redux/missionSlice';
+import { fetchMissionAsync, joiningMission } from '../../redux/missionSlice';
 import './Missions.css';
 
 function Missions() {
@@ -40,20 +40,28 @@ function Missions() {
           <tr key={mission.mission_id}>
             <td>{mission.mission_name}</td>
             <td>{mission.description}</td>
-            <td><p style={{ backgroundColor: mission.reserved ? '#419bf9' : '#6d757d' }}>{mission.reserved ? 'ACTIVE MEMBER' : 'NOT A MEMBER'}</p></td>
             <td>
-              <button
-                type="button"
-                style={{ color: mission.reserved ? 'red' : '', border: mission.reserved ? '1px solid red' : '' }}
+              <p
+                style={{
+                  backgroundColor: mission.reserved ? '#419bf9' : '#6d757d',
+                }}
               >
-                Leave Mission
-              </button>
+                {mission.reserved ? 'ACTIVE MEMBER' : 'NOT A MEMBER'}
+              </p>
+            </td>
+            <td>
+              {!mission.reserved && (
               <button
                 type="button"
-                style={{ color: mission.reserved ? 'red' : '', border: mission.reserved ? '1px solid red' : '' }}
+                style={{
+                  color: mission.reserved ? 'red' : '',
+                  border: mission.reserved ? '1px solid red' : '',
+                }}
+                onClick={() => dispatch(joiningMission(mission.mission_id))}
               >
                 Join Mission
               </button>
+              )}
             </td>
           </tr>
         ))}
diff --git a/src/redux/missionSlice.js b/src/redux/missionSlice.js
index e105801..0dc2c47 100644
--- a/src/redux/missionSlice.js
+++ b/src/redux/missionSlice.js
@@ -20,7 +20,24 @@ export const fetchMissionAsync = createAsyncThunk(
 const missionSlice = createSlice({
   name: 'missions',
   initialState,
-  reducers: {},
+  reducers: {
+    joiningMission: (state, action) => {
+      const id = action.payload;
+      state.missions = state.missions.map((mission) => {
+        if (mission.mission_id !== id) {
+          return mission;
+        }
+        return { ...mission, reserved: true };
+      });
+    },
+  },
+  leavingMission: (state, action) => {
+    const id = action.payload;
+    state.missions = state.missions.map((mission) => {
+      if (mission.mission_id !== id) return mission;
+      return { ...mission, reserved: false };
+    });
+  },
   extraReducers: (builder) => {
     builder
       .addCase(fetchMissionAsync.pending, (state) => {
@@ -37,4 +54,5 @@ const missionSlice = createSlice({
   },
 });
 
+export const { joiningMission } = missionSlice.actions;
 export default missionSlice.reducer;