diff --git a/frontend/src/i18n/en/index.ts b/frontend/src/i18n/en/index.ts
index 2ae7725d2..99354e913 100644
--- a/frontend/src/i18n/en/index.ts
+++ b/frontend/src/i18n/en/index.ts
@@ -172,13 +172,17 @@ How would you categorize this email?`,
             body: 'You cannot publish an API for the bot that is not shared.',
           },
           deploying: {
-            title: 'The API deployment is in PROGRESS.',
+            title: 'The API deployment is in PROGRESS',
             body: 'Please wait until the deployment is complete.',
           },
           deployed: {
-            title: 'The API has been DEPLOYED.',
+            title: 'The API has been DEPLOYED',
             body: 'You can access the API from the Client using the API Endpoint and API Key.',
           },
+          deployError: {
+            title: 'FAILED to deploy the API',
+            body: 'Please delete the API and re-create the API.',
+          },
         },
         deleteApiDaialog: {
           title: 'Delete?',
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 098dbcc67..56506bc67 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -9,7 +9,7 @@ import './i18n';
 import BotExplorePage from './pages/BotExplorePage.tsx';
 import BotEditPage from './pages/BotEditPage.tsx';
 import BotApiSettingsPage from './pages/BotApiSettingsPage.tsx';
-import AdminPublicBotsPage from './pages/AdminPublicBotsPage.tsx';
+import AdminPublicBotUsagesPage from './pages/AdminPublicBotUsagesPage.tsx';
 import AdminBotApisPage from './pages/AdminBotApisPage.tsx';
 import AdminBotApiManagePage from './pages/AdminBotApiManagePage.tsx';
 
@@ -44,7 +44,7 @@ const router = createBrowserRouter([
       },
       {
         path: '/admin/public-bot/usages',
-        element: <AdminPublicBotsPage />,
+        element: <AdminPublicBotUsagesPage />,
       },
       {
         path: '/admin/publish-apis',
diff --git a/frontend/src/pages/AdminPublicBotsPage.tsx b/frontend/src/pages/AdminPublicBotUsagesPage.tsx
similarity index 93%
rename from frontend/src/pages/AdminPublicBotsPage.tsx
rename to frontend/src/pages/AdminPublicBotUsagesPage.tsx
index abfe9619b..343ecee0b 100644
--- a/frontend/src/pages/AdminPublicBotsPage.tsx
+++ b/frontend/src/pages/AdminPublicBotUsagesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Help from '../components/Help';
 import usePublicBotsForAdmin from '../hooks/usePublicBotsForAdmin';
@@ -10,10 +10,11 @@ import Button from '../components/Button';
 import { PiArrowDown } from 'react-icons/pi';
 import Skeleton from '../components/Skeleton';
 import { twMerge } from 'tailwind-merge';
+import { useNavigate } from 'react-router-dom';
 
 const DATA_FORMAT = 'YYYYMMDD';
 
-const AdminPublicBotsPage: React.FC = () => {
+const AdminPublicBotUsagesPage: React.FC = () => {
   const { t } = useTranslation();
 
   const [searchDateFrom, setSearchDateFrom] = useState<null | string>(
@@ -42,6 +43,15 @@ const AdminPublicBotsPage: React.FC = () => {
       : t('admin.validationError.period');
   }, [searchDateFrom, searchDateTo, t]);
 
+  const navigate = useNavigate();
+
+  const onClickViewBot = useCallback(
+    (botId: string) => {
+      navigate(`/admin/bot/${botId}`);
+    },
+    [navigate]
+  );
+
   return (
     <>
       <div className="flex h-full justify-center">
@@ -149,7 +159,7 @@ const AdminPublicBotsPage: React.FC = () => {
                     available: true,
                   }}
                   onClick={() => {
-                    // onClickViewBot(bot.id);
+                    onClickViewBot(bot.id);
                   }}>
                   <div className="relative flex h-full items-center">
                     <div className="text-lg font-bold">
@@ -178,4 +188,4 @@ const AdminPublicBotsPage: React.FC = () => {
   );
 };
 
-export default AdminPublicBotsPage;
+export default AdminPublicBotUsagesPage;
diff --git a/frontend/src/pages/BotApiSettingsPage.tsx b/frontend/src/pages/BotApiSettingsPage.tsx
index 72a479355..f62ba391d 100644
--- a/frontend/src/pages/BotApiSettingsPage.tsx
+++ b/frontend/src/pages/BotApiSettingsPage.tsx
@@ -91,6 +91,11 @@ const BotApiSettingsPage: React.FC = () => {
     clearAll: clearErrorMessages,
   } = useErrorMessage();
 
+  useEffect(() => {
+    clearErrorMessages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const [origins, setOrigins] = useState<string[]>(['']);
   const onClickAddOrigin = useCallback(() => {
     setOrigins(
@@ -139,13 +144,16 @@ const BotApiSettingsPage: React.FC = () => {
     setOrigins(['']);
   }, []);
 
+  const [hasFailedDeploy, setHasFailedDeploy] = useState(false);
   useEffect(() => {
+    setHasFailedDeploy(false);
     if (!botPublication) {
       return;
     }
-
     if (botPublication.cfnStatus === 'CREATE_COMPLETE') {
       fillApiSettings();
+    } else if (botPublication.cfnStatus === 'ROLLBACK_COMPLETE') {
+      setHasFailedDeploy(true);
     }
   }, [botPublication, fillApiSettings]);
 
@@ -334,6 +342,13 @@ const BotApiSettingsPage: React.FC = () => {
                       <div>{t('bot.apiSettings.alert.botUnshared.body')}</div>
                     </Alert>
                   )}
+                  {hasFailedDeploy && (
+                    <Alert
+                      severity="error"
+                      title={t('bot.apiSettings.alert.deployError.title')}>
+                      {t('bot.apiSettings.alert.deployError.body')}
+                    </Alert>
+                  )}
 
                   {hasCreated && (
                     <>
@@ -379,7 +394,7 @@ const BotApiSettingsPage: React.FC = () => {
                     </>
                   )}
 
-                  {myBot?.isPublic && (
+                  {myBot?.isPublic && !hasFailedDeploy && (
                     <div className="flex flex-col gap-1">
                       <div className="text-lg font-bold">
                         {t('bot.apiSettings.label.usagePlan')}
@@ -536,12 +551,13 @@ const BotApiSettingsPage: React.FC = () => {
                 {!isLoadingShare &&
                   !hasCreated &&
                   !isDeploying &&
-                  hasShared && (
+                  hasShared &&
+                  !hasFailedDeploy && (
                     <Button onClick={onClickCreate} loading={isLoading}>
                       {t('bot.button.create')}
                     </Button>
                   )}
-                {hasCreated && (
+                {(hasCreated || hasFailedDeploy) && (
                   <Button
                     className="bg-red"
                     onClick={() => {