diff --git a/web/src/components/apps/AppVersionHistory.tsx b/web/src/components/apps/AppVersionHistory.tsx
index 2f170331a6..b37215a2a8 100644
--- a/web/src/components/apps/AppVersionHistory.tsx
+++ b/web/src/components/apps/AppVersionHistory.tsx
@@ -2,13 +2,11 @@ import { ChangeEvent, Component, Fragment, createRef } from "react";
 import { Link } from "react-router-dom";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import Modal from "react-modal";
 import find from "lodash/find";
 import isEmpty from "lodash/isEmpty";
 import get from "lodash/get";
 import MountAware from "../shared/MountAware";
 import Loader from "../shared/Loader";
-import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";
 import VersionDiff from "@src/features/VersionDiff/VersionDiff";
 import ShowDetailsModal from "@src/components/modals/ShowDetailsModal";
 import ShowLogsModal from "@src/components/modals/ShowLogsModal";
@@ -44,6 +42,7 @@ import ConfirmDeploymentModal from "@components/modals/ConfirmDeploymentModal";
 import DisplayKotsUpdateModal from "@components/modals/DisplayKotsUpdateModal";
 import NoChangesModal from "@components/modals/NoChangesModal";
 import UpgradeServiceModal from "@components/modals/UpgradeServiceModal";
+import AvailableUpdatesComponent from "./AvailableUpdatesComponent";
 
 dayjs.extend(relativeTime);
 
@@ -1031,6 +1030,7 @@ class AppVersionHistory extends Component<Props, State> {
               this.setState({
                 shouldShowUpgradeServiceModal: false,
                 upgradeService: {
+                  ...this.state.upgradeService,
                   isLoading: false,
                   error: response.currentMessage,
                 },
@@ -1546,95 +1546,6 @@ class AppVersionHistory extends Component<Props, State> {
     this._mounted = true;
   };
 
-  renderAvailableUpdates = (updates: AvailableUpdate[]) => {
-    return (
-      <>
-        <p className="u-fontSize--normal u-fontWeight--medium card-title tw-pb-4">
-          Available Updates
-        </p>
-        <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
-          {updates.map((update, index) => (
-            <div key={index}>
-              <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
-                <div className="flex-column">
-                  <div className="flex alignItems--center">
-                    <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
-                      {update.versionLabel}
-                    </p>
-                    {update.isRequired && (
-                      <span className="status-tag required u-marginLeft--10">
-                        {" "}
-                        Required{" "}
-                      </span>
-                    )}
-                  </div>
-                  {update.upstreamReleasedAt && (
-                    <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
-                      {" "}
-                      Released{" "}
-                      <span className="u-fontWeight--bold">
-                        {Utilities.dateFormat(
-                          update.upstreamReleasedAt,
-                          "MM/DD/YY @ hh:mm a z"
-                        )}
-                      </span>
-                    </p>
-                  )}
-                </div>
-                <div className="flex alignItems--center">
-                  {update?.releaseNotes && (
-                    <>
-                      <Icon
-                        icon="release-notes"
-                        size={24}
-                        onClick={() =>
-                          this.showReleaseNotes(update?.releaseNotes)
-                        }
-                        data-tip="View release notes"
-                        className="u-marginRight--5 clickable"
-                      />
-                      <ReactTooltip
-                        effect="solid"
-                        className="replicated-tooltip"
-                      />
-                    </>
-                  )}
-                  <button
-                    className={"btn tw-ml-2 primary blue"}
-                    onClick={() => this.startUpgraderService(update)}
-                    disabled={!update.isDeployable}
-                  >
-                    <span
-                      key={update.nonDeployableCause}
-                      data-tip-disable={update.isDeployable}
-                      data-tip={update.nonDeployableCause}
-                      data-for="disable-deployment-tooltip"
-                    >
-                      Deploy
-                    </span>
-                  </button>
-                  <ReactTooltip
-                    effect="solid"
-                    id="disable-deployment-tooltip"
-                  />
-                </div>
-              </div>
-              {this.state.upgradeService?.error &&
-                this.state.upgradeService?.versionLabel ===
-                  update.versionLabel && (
-                  <div className="tw-my-4">
-                    <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
-                      {this.state.upgradeService.error}
-                    </span>
-                  </div>
-                )}
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  };
-
   renderAppVersionHistoryRow = (version: Version, index?: number) => {
     if (
       !version ||
@@ -2175,9 +2086,14 @@ class AppVersionHistory extends Component<Props, State> {
                             this.state.availableUpdates.length > 0 &&
                             this.props.outletContext.isEmbeddedCluster && (
                               <div className="TableDiff--Wrapper card-bg u-marginBottom--30">
-                                {this.renderAvailableUpdates(
-                                  this.state.availableUpdates
-                                )}
+                                <AvailableUpdatesComponent
+                                  updates={this.state.availableUpdates}
+                                  showReleaseNotes={this.showReleaseNotes}
+                                  upgradeService={this.state.upgradeService}
+                                  startUpgraderService={
+                                    this.startUpgraderService
+                                  }
+                                />
                               </div>
                             )
                           )}
diff --git a/web/src/components/apps/AvailableUpdatesComponent.tsx b/web/src/components/apps/AvailableUpdatesComponent.tsx
new file mode 100644
index 0000000000..4867a8bbdc
--- /dev/null
+++ b/web/src/components/apps/AvailableUpdatesComponent.tsx
@@ -0,0 +1,103 @@
+import Icon from "@components/Icon";
+import { Utilities } from "@src/utilities/utilities";
+import { AvailableUpdate } from "@types";
+import ReactTooltip from "react-tooltip";
+
+const AvailableUpdatesComponent = ({
+  updates,
+  showReleaseNotes,
+  upgradeService,
+  startUpgraderService,
+}: {
+  updates: AvailableUpdate[];
+  showReleaseNotes: (releaseNotes: string) => void;
+  upgradeService: {
+    versionLabel?: string;
+    isLoading?: boolean;
+    error?: string;
+  } | null;
+  startUpgraderService: (version: AvailableUpdate) => void;
+}) => {
+  return (
+    <>
+      <p className="u-fontSize--normal u-fontWeight--medium card-title tw-pb-4">
+        Available Updates
+      </p>
+      <div className="tw-flex tw-flex-col tw-gap-2 tw-max-h-[275px] tw-overflow-auto">
+        {updates.map((update, index) => (
+          <div key={index}>
+            <div className="tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded">
+              <div className="flex-column">
+                <div className="flex alignItems--center">
+                  <p className="u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title ">
+                    {update.versionLabel}
+                  </p>
+                  {update.isRequired && (
+                    <span className="status-tag required u-marginLeft--10">
+                      {" "}
+                      Required{" "}
+                    </span>
+                  )}
+                </div>
+                {update.upstreamReleasedAt && (
+                  <p className="u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5">
+                    {" "}
+                    Released{" "}
+                    <span className="u-fontWeight--bold">
+                      {Utilities.dateFormat(
+                        update.upstreamReleasedAt,
+                        "MM/DD/YY @ hh:mm a z"
+                      )}
+                    </span>
+                  </p>
+                )}
+              </div>
+              <div className="flex alignItems--center">
+                {update?.releaseNotes && (
+                  <>
+                    <Icon
+                      icon="release-notes"
+                      size={24}
+                      onClick={() => showReleaseNotes(update?.releaseNotes)}
+                      data-tip="View release notes"
+                      className="u-marginRight--5 clickable"
+                    />
+                    <ReactTooltip
+                      effect="solid"
+                      className="replicated-tooltip"
+                    />
+                  </>
+                )}
+                <button
+                  className={"btn tw-ml-2 primary blue"}
+                  onClick={() => startUpgraderService(update)}
+                  disabled={!update.isDeployable}
+                >
+                  <span
+                    key={update.nonDeployableCause}
+                    data-tip-disable={update.isDeployable}
+                    data-tip={update.nonDeployableCause}
+                    data-for="disable-deployment-tooltip"
+                  >
+                    Deploy
+                  </span>
+                </button>
+                <ReactTooltip effect="solid" id="disable-deployment-tooltip" />
+              </div>
+            </div>
+            {upgradeService?.error &&
+              upgradeService?.versionLabel === update.versionLabel && (
+                <div className="tw-my-4">
+                  <span className="u-fontSize--small u-textColor--error u-fontWeight--bold">
+                    {upgradeService.error}
+                  </span>
+                </div>
+              )}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default AvailableUpdatesComponent;
diff --git a/web/src/components/modals/UpgradeServiceModal.tsx b/web/src/components/modals/UpgradeServiceModal.tsx
index 1325f58515..d8f583d364 100644
--- a/web/src/components/modals/UpgradeServiceModal.tsx
+++ b/web/src/components/modals/UpgradeServiceModal.tsx
@@ -13,7 +13,7 @@ const UpgradeServiceModal = ({
   return (
     <Modal
       isOpen={shouldShowUpgradeServiceModal}
-      onRequestClose={onRequestClose}
+      onRequestClose={() => onRequestClose()}
       contentLabel="KOTS Upgrade Service Modal"
       ariaHideApp={false}
       className="Modal UpgradeServiceModal"
@@ -28,7 +28,7 @@ const UpgradeServiceModal = ({
           }}
           className="tw-pt-4 tw-top-0 tw-right-6 tw-absolute tw-overflow-auto"
         >
-          <Icon icon="close" onClick={onRequestClose} size={15} />
+          <Icon icon="close" onClick={() => onRequestClose()} size={15} />
         </button>
         {isStartingUpgradeService ? (
           <div className="flex-column flex1 alignItems--center justifyContent--center tw-mt-4 tw-gap-4">