diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 118b20d3b3..d0e1125013 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -6,6 +6,7 @@ import {
   Collapsible,
   SelectableBox,
   Button,
+  Spinner,
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -32,6 +33,7 @@ const CustomMenu = (props) => {
     selectRef,
     searchTerm,
     value,
+    commitStagedTags,
   } = props.selectProps;
   return (
     <components.Menu {...props}>
@@ -66,7 +68,7 @@ const CustomMenu = (props) => {
             <Button
               variant="tertiary"
               disabled={!(value && value.length)}
-              onClick={() => { /* TODO: Implement this */ }}
+              onClick={() => { commitStagedTags(); handleStagedTagsMenuChange([]); selectRef.current?.blur(); }}
             >
               { intl.formatMessage(messages.collapsibleAddStagedTagsButtonText) }
             </Button>
@@ -103,6 +105,24 @@ CustomMenu.propTypes = {
       value: PropTypes.string.isRequired,
       label: PropTypes.string.isRequired,
     })).isRequired,
+    commitStagedTags: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+const CustomLoadingIndicator = (props) => {
+  const { intl } = props.selectProps;
+  return (
+    <Spinner
+      animation="border"
+      size="xl"
+      screenReaderText={intl.formatMessage(messages.loadingMessage)}
+    />
+  );
+};
+
+CustomLoadingIndicator.propTypes = {
+  selectProps: PropTypes.shape({
+    intl: intlShape.isRequired,
   }).isRequired,
 };
 
@@ -196,12 +216,20 @@ const ContentTagsCollapsible = ({
   const selectRef = React.useRef(null);
 
   const {
-    tagChangeHandler, appliedContentTagsTree, stagedContentTagsTree, contentTagsCount, checkedTags,
+    tagChangeHandler,
+    removeAppliedTagHandler,
+    appliedContentTagsTree,
+    stagedContentTagsTree,
+    contentTagsCount,
+    checkedTags,
+    commitStagedTags,
+    updateTags,
   } = useContentTagsCollapsibleHelper(
     contentId,
     taxonomyAndTagsData,
     addStagedContentTag,
     removeStagedContentTag,
+    stagedContentTags,
   );
 
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -235,7 +263,7 @@ const ContentTagsCollapsible = ({
     );
 
     // Call the `tagChangeHandler` with the unstaged tags to unselect them from the selectbox
-    // and update the staged content tags tree. Since the `handleStagedTagsMenuChange` function is
+    // and update the staged content tags tree. Since the `handleStagedTagsMenuChange` function is={}
     // only called when a change occurs in the react-select menu component we know that tags can only be
     // removed from there, hence the tagChangeHandler is always called with `checked=false`.
     unstagedTags.forEach(unstagedTag => tagChangeHandler(unstagedTag.value, false));
@@ -246,7 +274,7 @@ const ContentTagsCollapsible = ({
     <div className="d-flex">
       <Collapsible title={name} styling="card-lg" className="taxonomy-tags-collapsible">
         <div key={taxonomyId}>
-          <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={tagChangeHandler} />
+          <ContentTagsTree tagsTree={appliedContentTagsTree} removeTagHandler={removeAppliedTagHandler} />
         </div>
 
         <div className="d-flex taxonomy-tags-selector-menu">
@@ -255,6 +283,8 @@ const ContentTagsCollapsible = ({
             <Select
               ref={selectRef}
               isMulti
+              isLoading={updateTags.isLoading}
+              isDisabled={updateTags.isLoading}
               name="tags-select"
               placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
               isSearchable
@@ -262,7 +292,7 @@ const ContentTagsCollapsible = ({
               classNamePrefix="react-select"
               onInputChange={handleSearchChange}
               onChange={handleStagedTagsMenuChange}
-              components={{ Menu: CustomMenu }}
+              components={{ Menu: CustomMenu, LoadingIndicator: CustomLoadingIndicator }}
               closeMenuOnSelect={false}
               blurInputOnSelect={false}
               intl={intl}
@@ -275,6 +305,7 @@ const ContentTagsCollapsible = ({
               selectRef={selectRef}
               searchTerm={searchTerm}
               value={stagedContentTags}
+              commitStagedTags={commitStagedTags}
             />
           )}
         </div>
diff --git a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
index 363e9eabc7..2519adba92 100644
--- a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
@@ -83,13 +83,14 @@ const useContentTagsCollapsibleHelper = (
   taxonomyAndTagsData,
   addStagedContentTag,
   removeStagedContentTag,
+  stagedContentTags,
 ) => {
   const {
     id, contentTags, canTagObject,
   } = taxonomyAndTagsData;
-  // State to determine whether the tags are being updating so we can make a call
+  // State to determine whether an applied tag was removed so we make a call
   // to the update endpoint to the reflect those changes
-  const [updatingTags, setUpdatingTags] = React.useState(false);
+  const [removingAppliedTag, setRemoveAppliedTag] = React.useState(false);
   const updateTags = useContentTaxonomyTagsUpdater(contentId, id);
 
   // Keeps track of the content objects tags count (both implicit and explicit)
@@ -100,35 +101,41 @@ const useContentTagsCollapsibleHelper = (
   const [stagedContentTagsTree, setStagedContentTagsTree] = React.useState({});
 
   // To handle checking/unchecking tags in the SelectableBox
-  const [checkedTags, { add, remove, clear }] = useCheckboxSetValues();
+  const [checkedTags, { add, remove }] = useCheckboxSetValues();
+
+  // Handles making requests to the backend when applied tags are removed
+  React.useEffect(() => {
+    // We have this check because this hook is fired when the component first loads
+    // and reloads (on refocus). We only want to make a request to the update endpoint when
+    // the user removes an applied tag
+    if (removingAppliedTag) {
+      setRemoveAppliedTag(false);
+
+      // Filter out staged tags from the checktags so they do not get committed
+      const tags = checkedTags.map(t => decodeURIComponent(t.split(',').slice(-1)));
+      const staged = stagedContentTags.map(t => t.label);
+      const remainingAppliedTags = tags.filter(t => !staged.includes(t));
+
+      updateTags.mutate({ tags: remainingAppliedTags });
+    }
+  }, [contentId, id, canTagObject, checkedTags, stagedContentTags]);
 
-  // =================================================================
+  // Handles making requests to the update endpoint when the staged tags need to be committed
+  const commitStagedTags = React.useCallback(() => {
+    const staged = stagedContentTags.map(t => t.label);
 
-  // TODO: Properly implement this based on feature/requirements
+    const stagedLineages = stagedContentTags.map(st => decodeURIComponent(st.value).split(',').slice(0, -1)).flat();
 
-  // // Handles making requests to the update endpoint whenever the checked tags change
-  // React.useEffect(() => {
-  //   // We have this check because this hook is fired when the component first loads
-  //   // and reloads (on refocus). We only want to make a request to the update endpoint when
-  //   // the user is updating the tags.
-  //   if (updatingTags) {
-  //     setUpdatingTags(false);
-  //     const tags = checkedTags.map(t => decodeURIComponent(t.split(',').slice(-1)));
-  //     updateTags.mutate({ tags });
-  //   }
-  // }, [contentId, id, canTagObject, checkedTags]);
+    // Filter out applied tags that should become implicit because a child tag was committed
+    const applied = contentTags.map((t) => t.value).filter(t => !stagedLineages.includes(t));
 
-  // ==================================================================
+    updateTags.mutate({ tags: [...applied, ...staged] });
+  }, [contentTags, stagedContentTags, updateTags]);
 
   // This converts the contentTags prop to the tree structure mentioned above
   const appliedContentTagsTree = React.useMemo(() => {
     let contentTagsCounter = 0;
 
-    // Clear all the tags that have not been commited and the checked boxes when
-    // fresh contentTags passed in so the latest state from the backend is rendered
-    setStagedContentTagsTree({});
-    clear();
-
     // When an error occurs while updating, the contentTags query is invalidated,
     // hence they will be recalculated, and the updateTags mutation should be reset.
     if (updateTags.isError) {
@@ -172,6 +179,10 @@ const useContentTagsCollapsibleHelper = (
     tagLineage.forEach(tag => {
       const isExplicit = selectedTag === tag;
 
+      // Clear out the ancestor tags leading to newly selected tag
+      // as they automatically become implicit
+      value.push(encodeURIComponent(tag));
+
       if (!traversal[tag]) {
         traversal[tag] = {
           explicit: isExplicit,
@@ -181,19 +192,11 @@ const useContentTagsCollapsibleHelper = (
         };
       } else {
         traversal[tag].explicit = isExplicit;
-      }
-
-      // Clear out the ancestor tags leading to newly selected tag
-      // as they automatically become implicit
-      value.push(encodeURIComponent(tag));
-
-      if (isExplicit) {
-        add(value.join(','));
-      } else {
         removeStagedContentTag(id, value.join(','));
-        remove(value.join(','));
       }
 
+      // eslint-disable-next-line no-unused-expressions
+      isExplicit ? add(value.join(',')) : remove(value.join(','));
       traversal = traversal[tag].children;
     });
   };
@@ -222,6 +225,9 @@ const useContentTagsCollapsibleHelper = (
       // Remove tag from the SelectableBox.Set
       remove(tagSelectableBoxValue);
 
+      // Remove tags from applied tags
+      removeTags(appliedContentTagsTree, tagLineage);
+
       // Remove tag along with it's from ancestors if it's the only child tag
       // from the staged tags tree and update the staged content tags tree
       setStagedContentTagsTree(prevStagedContentTagsTree => {
@@ -233,19 +239,32 @@ const useContentTagsCollapsibleHelper = (
       // Remove content tag from taxonomy's staged tags select menu
       removeStagedContentTag(id, tagSelectableBoxValue);
     }
-
-    // setUpdatingTags(true);
   }, [
-    stagedContentTagsTree, setStagedContentTagsTree, addTags, removeTags, removeTags,
+    stagedContentTagsTree, setStagedContentTagsTree, addTags, removeTags,
     id, addStagedContentTag, removeStagedContentTag,
   ]);
 
+  const removeAppliedTagHandler = React.useCallback((tagSelectableBoxValue) => {
+    const tagLineage = tagSelectableBoxValue.split(',').map(t => decodeURIComponent(t));
+
+    // Remove tag from the SelectableBox.Set
+    remove(tagSelectableBoxValue);
+
+    // Remove tags from applied tags
+    removeTags(appliedContentTagsTree, tagLineage);
+
+    setRemoveAppliedTag(true);
+  }, [checkedTags]);
+
   return {
     tagChangeHandler,
+    removeAppliedTagHandler,
     appliedContentTagsTree: sortKeysAlphabetically(appliedContentTagsTree),
     stagedContentTagsTree: sortKeysAlphabetically(stagedContentTagsTree),
     contentTagsCount,
     checkedTags,
+    commitStagedTags,
+    updateTags,
   };
 };
 
diff --git a/src/content-tags-drawer/TagBubble.jsx b/src/content-tags-drawer/TagBubble.jsx
index 50c2b3560e..b1b0c9b0ba 100644
--- a/src/content-tags-drawer/TagBubble.jsx
+++ b/src/content-tags-drawer/TagBubble.jsx
@@ -14,7 +14,7 @@ const TagBubble = ({
 
   const handleClick = React.useCallback(() => {
     if (!implicit && canRemove) {
-      removeTagHandler(lineage.join(','), false);
+      removeTagHandler(lineage.join(','));
     }
   }, [implicit, lineage, canRemove, removeTagHandler]);