diff --git a/src/assets/styles/Missions.css b/src/assets/styles/Missions.css
index 3350f94..fb1c896 100644
--- a/src/assets/styles/Missions.css
+++ b/src/assets/styles/Missions.css
@@ -50,6 +50,6 @@
   text-transform: uppercase;
 }
 
-.missions-table .active-member .mission-status {
+.missions-table .mission-status .active-member {
   text-transform: capitalize;
 }
diff --git a/src/components/MissionItem.jsx b/src/components/MissionItem.jsx
index 2361469..cbe5626 100644
--- a/src/components/MissionItem.jsx
+++ b/src/components/MissionItem.jsx
@@ -15,13 +15,24 @@ const MissionItem = ({ mission }) => {
   return (
     <tr>
       <td className="mission-name">{ mission.mission_name }</td>
-      <td className="mission-description">{ mission.description}</td>
+      <td className="mission-description">{ mission.description }</td>
       <td className="mission-status">
-        <span className="badge badge-gray">Not a member</span>
+        {
+          mission.reserved ? (
+            <span className="badge badge-blue active-member">Active member</span>
+          )
+            : (
+              <span className="badge badge-gray">Not a member</span>
+            )
+        }
       </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>
+        {mission.reserved ? (
+          <button type="button" className="btn btn-pink" onClick={handleClickLeaveMission}>Leave Mission</button>
+        )
+          : (
+            <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
+          )}
       </td>
     </tr>
   );