diff --git a/web-app/src/screens/Console/KMS/AddKey.tsx b/web-app/src/screens/Console/KMS/AddKey.tsx
index 6a8b5e700..38f7cae9c 100644
--- a/web-app/src/screens/Console/KMS/AddKey.tsx
+++ b/web-app/src/screens/Console/KMS/AddKey.tsx
@@ -18,22 +18,16 @@ import React, { Fragment, useEffect } from "react";
 import { BackLink, Grid } from "mds";
 import { useNavigate } from "react-router-dom";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { ErrorResponseHandler } from "../../../common/types";
-import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import AddKeyForm from "./AddKeyForm";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
+import { setHelpName } from "systemSlice";
 
 const AddKey = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const onSuccess = () => navigate(`${IAM_PAGES.KMS_KEYS}`);
-
-  const onError = (err: ErrorResponseHandler) =>
-    dispatch(setErrorSnackMessage(err));
-
   useEffect(() => {
     dispatch(setHelpName("add_key"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,7 +45,7 @@ const AddKey = () => {
           }
           actions={<HelpMenu />}
         />
-        <AddKeyForm onError={onError} onSuccess={onSuccess} />
+        <AddKeyForm />
       </Grid>
     </Fragment>
   );
diff --git a/web-app/src/screens/Console/KMS/AddKeyForm.tsx b/web-app/src/screens/Console/KMS/AddKeyForm.tsx
index d29c54c0d..234a45815 100644
--- a/web-app/src/screens/Console/KMS/AddKeyForm.tsx
+++ b/web-app/src/screens/Console/KMS/AddKeyForm.tsx
@@ -23,23 +23,36 @@ import {
   Grid,
   InputBox,
 } from "mds";
-import { ErrorResponseHandler } from "../../../common/types";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
-import useApi from "../Common/Hooks/useApi";
 import KMSHelpBox from "./KMSHelpbox";
+import { api } from "api";
+import { useAppDispatch } from "store";
+import { useNavigate } from "react-router-dom";
+import { ApiError, HttpResponse } from "api/consoleApi";
+import { setErrorSnackMessage } from "systemSlice";
+import { errorToHandler } from "api/errors";
+import { IAM_PAGES } from "common/SecureComponent/permissions";
 
-interface IAddKeyFormProps {
-  onSuccess: () => void;
-  onError: (err: ErrorResponseHandler) => void;
-}
+const AddKeyForm = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
-const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => {
-  const [loading, invokeApi] = useApi(onSuccess, onError);
   const [keyName, setKeyName] = useState<string>("");
+  const [loadingCreate, setLoadingCreate] = useState<boolean>(false);
 
   const addRecord = (event: React.FormEvent) => {
     event.preventDefault();
-    invokeApi("POST", "/api/v1/kms/keys/", { key: keyName });
+    setLoadingCreate(true);
+    api.kms
+      .kmsCreateKey({ key: keyName })
+      .then((_) => {
+        navigate(`${IAM_PAGES.KMS_KEYS}`);
+      })
+      .catch(async (res: HttpResponse<void, ApiError>) => {
+        const err = (await res.json()) as ApiError;
+        dispatch(setErrorSnackMessage(errorToHandler(err)));
+      })
+      .finally(() => setLoadingCreate(false));
   };
 
   const resetForm = () => {
@@ -103,7 +116,7 @@ const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => {
                 type="submit"
                 variant="callAction"
                 color="primary"
-                disabled={loading || !validSave}
+                disabled={loadingCreate || !validSave}
                 label={"Save"}
               />
             </Grid>