diff --git a/frontend/src/components/ChatListDrawer.tsx b/frontend/src/components/ChatListDrawer.tsx
index 648d6283e..bceb2465f 100644
--- a/frontend/src/components/ChatListDrawer.tsx
+++ b/frontend/src/components/ChatListDrawer.tsx
@@ -326,7 +326,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
                 <DrawerItem
                   isActive={false}
                   icon={<PiGlobe />}
-                  to="admin/published-bot-apis"
+                  to="admin/publish-apis"
                   labelComponent={t('button.botPublishApis')}
                 />
                 <DrawerItem
diff --git a/frontend/src/hooks/useAdminApi.ts b/frontend/src/hooks/useAdminApi.ts
index 5f4c3281a..6c2695e97 100644
--- a/frontend/src/hooks/useAdminApi.ts
+++ b/frontend/src/hooks/useAdminApi.ts
@@ -14,7 +14,9 @@ const useAdminApi = () => {
       return http.get<ListBotApisResponse>(['/admin/published-bots', req]);
     },
     listPublicBots: (req: ListPublicBotsRequest) => {
-      return http.get<ListPublicBotsResponse>(['/admin/public-bots', req]);
+      return http.get<ListPublicBotsResponse>(
+        !!req.start === !!req.end ? ['/admin/public-bots', req] : null
+      );
     },
   };
 };
diff --git a/frontend/src/i18n/en/index.ts b/frontend/src/i18n/en/index.ts
index fdcb1197c..73f133360 100644
--- a/frontend/src/i18n/en/index.ts
+++ b/frontend/src/i18n/en/index.ts
@@ -234,7 +234,7 @@ How would you categorize this email?`,
           pageTitle: 'Public Bot Usages',
           noPublicBotUsages:
             'During the Calculation Period, the public bots were not utilized.',
-          published: 'The Bot API is published.',
+          published: 'API is published.',
           SearchCondition: {
             title: 'Calculation Period',
             from: 'From',
@@ -245,8 +245,18 @@ How would you categorize this email?`,
         help: {
           overview:
             'Monitor the usage status of Shared Bots and Published Bot APIs.',
+          calculationPeriod:
+            'If the Calculation Period is not set, the cost for today will be displayed.',
         },
       },
+      publishApis: {
+        label: {
+          pageTitle: 'Bot Publish APIs',
+        },
+      },
+      validationError: {
+        period: 'Enter both From and To',
+      },
     },
     deleteDialog: {
       title: 'Delete?',
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e2d502b91..e25e5cc50 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -10,6 +10,7 @@ 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 AdminBotApisPage from './pages/AdminBotApisPage.tsx';
 
 const router = createBrowserRouter([
   {
@@ -44,6 +45,10 @@ const router = createBrowserRouter([
         path: '/admin/public-bots',
         element: <AdminPublicBotsPage />,
       },
+      {
+        path: '/admin/publish-apis',
+        element: <AdminBotApisPage />,
+      },
       {
         path: '/:conversationId',
         element: <ChatPage />,
diff --git a/frontend/src/pages/AdminBotApisPage.tsx b/frontend/src/pages/AdminBotApisPage.tsx
new file mode 100644
index 000000000..b96ecd8d4
--- /dev/null
+++ b/frontend/src/pages/AdminBotApisPage.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Help from '../components/Help';
+import usePublicBotsForAdmin from '../hooks/usePublicBotsForAdmin';
+import ListItemBot from '../components/ListItemBot';
+import { formatDate, formatDatetime } from '../utils/DateUtils';
+
+import InputText from '../components/InputText';
+import Button from '../components/Button';
+import { PiArrowDown } from 'react-icons/pi';
+import Skeleton from '../components/Skeleton';
+
+const AdminBotApisPage: React.FC = () => {
+  const { t } = useTranslation();
+  // const navigate = useNavigate();
+
+  const [searchDateFrom, setSearchDateFrom] = useState<null | string>(null);
+  const [searchDateTo, setSearchDateTo] = useState<null | string>(null);
+
+  const { publicBots, isLoading: isLoadingPublicBots } = usePublicBotsForAdmin({
+    start: searchDateFrom ? searchDateFrom + '00' : undefined,
+    end: searchDateTo ? searchDateTo + '23' : undefined,
+  });
+
+  // const onClickViewBot = useCallback(
+  //   (botId: string) => {
+  //     navigate(`/bot/edit/${botId}`);
+  //   },
+  //   [navigate]
+  // );
+
+  return (
+    <>
+      {/* <DialogConfirmDeleteBot
+        isOpen={isOpenDeleteDialog}
+        target={targetDelete}
+        onDelete={onDeleteMyBot}
+        onClose={() => {
+          setIsOpenDeleteDialog(false);
+        }}
+      />
+      <DialogConfirmShareBot
+        isOpen={isOpenShareDialog}
+        target={targetShareBot}
+        onToggleShare={onToggleShare}
+        onClose={() => {
+          setIsOpenShareDialog(false);
+        }}
+      /> */}
+      <div className="flex h-full justify-center">
+        <div className="w-2/3">
+          <div className="h-full w-full pt-8">
+            <div className="flex items-end justify-between">
+              <div className="flex items-center gap-2">
+                <div className="text-xl font-bold">
+                  {t('admin.publishApis.label.pageTitle')}
+                </div>
+                <Help
+                  direction="right"
+                  message={t('admin.publicBotUsages.help.overview')}
+                />
+              </div>
+            </div>
+
+            <div className="my-2 rounded border p-2">
+              <div className="text-sm font-bold">
+                {t('admin.publicBotUsages.label.SearchCondition.title')}
+              </div>
+
+              <div className="flex gap-2 sm:w-full md:w-3/4">
+                <InputText
+                  className="w-full"
+                  type="date"
+                  label={t('admin.publicBotUsages.label.SearchCondition.from')}
+                  value={formatDate(searchDateFrom, 'YYYY-MM-DD')}
+                  onChange={(val) => {
+                    setSearchDateFrom(formatDate(val, 'YYYYMMDD'));
+                  }}
+                />
+                <InputText
+                  className="w-full"
+                  type="date"
+                  label={t('admin.publicBotUsages.label.SearchCondition.to')}
+                  value={formatDate(searchDateTo, 'YYYY-MM-DD')}
+                  onChange={(val) => {
+                    setSearchDateTo(formatDate(val, 'YYYYMMDD'));
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="my-2 flex justify-end">
+              <Button outlined rightIcon={<PiArrowDown />} onClick={() => {}}>
+                {t('admin.publicBotUsages.label.sortByCost')}
+              </Button>
+            </div>
+
+            <div className="mt-2 border-b border-gray"></div>
+
+            <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
+              {isLoadingPublicBots && (
+                <div className="flex flex-col gap-2">
+                  {new Array(15).fill('').map((_, idx) => {
+                    return <Skeleton key={idx} className="h-12 w-full" />;
+                  })}
+                </div>
+              )}
+
+              {publicBots?.length === 0 && (
+                <div className="flex h-full w-full items-center justify-center italic text-dark-gray">
+                  {t('admin.publicBotUsages.label.noPublicBotUsages')}
+                </div>
+              )}
+              {publicBots?.map((bot, idx) => (
+                <ListItemBot
+                  key={idx}
+                  bot={{
+                    ...bot,
+                    available: true,
+                  }}
+                  onClick={() => {
+                    // onClickViewBot(bot.id);
+                  }}>
+                  <div className="flex gap-3">
+                    <div className="flex gap-1 text-lg font-bold">
+                      {(Math.floor(bot.totalPrice * 100) / 100).toFixed(2)} USD
+                    </div>
+
+                    <div className="flex flex-col gap-1 text-sm">
+                      {bot.isPublished ? (
+                        <>
+                          <div className="font-bold">
+                            {/* {t('admin.label.publishedDate')}: */}
+                          </div>
+                          {bot.publishedDatetime
+                            ? formatDatetime(bot.publishedDatetime)
+                            : null}
+                        </>
+                      ) : (
+                        <div></div>
+                      )}
+                    </div>
+                  </div>
+                </ListItemBot>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AdminBotApisPage;
diff --git a/frontend/src/pages/AdminPublicBotsPage.tsx b/frontend/src/pages/AdminPublicBotsPage.tsx
index 789eefb52..abfe9619b 100644
--- a/frontend/src/pages/AdminPublicBotsPage.tsx
+++ b/frontend/src/pages/AdminPublicBotsPage.tsx
@@ -1,52 +1,49 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Help from '../components/Help';
 import usePublicBotsForAdmin from '../hooks/usePublicBotsForAdmin';
 import ListItemBot from '../components/ListItemBot';
-import { formatDate, formatDatetime } from '../utils/DateUtils';
+import { addDate, formatDate } from '../utils/DateUtils';
 
 import InputText from '../components/InputText';
 import Button from '../components/Button';
 import { PiArrowDown } from 'react-icons/pi';
 import Skeleton from '../components/Skeleton';
+import { twMerge } from 'tailwind-merge';
+
+const DATA_FORMAT = 'YYYYMMDD';
 
 const AdminPublicBotsPage: React.FC = () => {
   const { t } = useTranslation();
-  // const navigate = useNavigate();
 
-  const [searchDateFrom, setSearchDateFrom] = useState<null | string>(null);
-  const [searchDateTo, setSearchDateTo] = useState<null | string>(null);
+  const [searchDateFrom, setSearchDateFrom] = useState<null | string>(
+    formatDate(addDate(new Date(), -1, 'month'), DATA_FORMAT)
+  );
+  const [searchDateTo, setSearchDateTo] = useState<null | string>(
+    formatDate(new Date(), DATA_FORMAT)
+  );
+  const [isDescCost, setIsDescCost] = useState(true);
 
   const { publicBots, isLoading: isLoadingPublicBots } = usePublicBotsForAdmin({
-    start: searchDateFrom ?? undefined,
-    end: searchDateTo ?? undefined,
+    start: searchDateFrom ? searchDateFrom + '00' : undefined,
+    end: searchDateTo ? searchDateTo + '23' : undefined,
   });
 
-  // const onClickViewBot = useCallback(
-  //   (botId: string) => {
-  //     navigate(`/bot/edit/${botId}`);
-  //   },
-  //   [navigate]
-  // );
+  const sortedBots = useMemo(() => {
+    const tmp = isDescCost ? -1 : 1;
+    return publicBots?.sort((a, b) =>
+      a.totalPrice > b.totalPrice ? tmp : tmp * -1
+    );
+  }, [isDescCost, publicBots]);
+
+  const validationErrorMessage = useMemo(() => {
+    return !!searchDateFrom === !!searchDateTo
+      ? null
+      : t('admin.validationError.period');
+  }, [searchDateFrom, searchDateTo, t]);
 
   return (
     <>
-      {/* <DialogConfirmDeleteBot
-        isOpen={isOpenDeleteDialog}
-        target={targetDelete}
-        onDelete={onDeleteMyBot}
-        onClose={() => {
-          setIsOpenDeleteDialog(false);
-        }}
-      />
-      <DialogConfirmShareBot
-        isOpen={isOpenShareDialog}
-        target={targetShareBot}
-        onToggleShare={onToggleShare}
-        onClose={() => {
-          setIsOpenShareDialog(false);
-        }}
-      /> */}
       <div className="flex h-full justify-center">
         <div className="w-2/3">
           <div className="h-full w-full pt-8">
@@ -63,8 +60,11 @@ const AdminPublicBotsPage: React.FC = () => {
             </div>
 
             <div className="my-2 rounded border p-2">
-              <div className="text-sm font-bold">
+              <div className="flex items-center gap-1 text-sm font-bold">
                 {t('admin.publicBotUsages.label.SearchCondition.title')}
+                <Help
+                  message={t('admin.publicBotUsages.help.calculationPeriod')}
+                />
               </div>
 
               <div className="flex gap-2 sm:w-full md:w-3/4">
@@ -74,8 +74,17 @@ const AdminPublicBotsPage: React.FC = () => {
                   label={t('admin.publicBotUsages.label.SearchCondition.from')}
                   value={formatDate(searchDateFrom, 'YYYY-MM-DD')}
                   onChange={(val) => {
-                    setSearchDateFrom(formatDate(val, 'YYYYMMDD'));
+                    if (val === '') {
+                      setSearchDateFrom(null);
+                      return;
+                    }
+                    setSearchDateFrom(formatDate(val, DATA_FORMAT));
                   }}
+                  errorMessage={
+                    searchDateFrom
+                      ? undefined
+                      : validationErrorMessage ?? undefined
+                  }
                 />
                 <InputText
                   className="w-full"
@@ -83,14 +92,35 @@ const AdminPublicBotsPage: React.FC = () => {
                   label={t('admin.publicBotUsages.label.SearchCondition.to')}
                   value={formatDate(searchDateTo, 'YYYY-MM-DD')}
                   onChange={(val) => {
-                    setSearchDateTo(formatDate(val, 'YYYYMMDD'));
+                    if (val === '') {
+                      setSearchDateTo(null);
+                      return;
+                    }
+                    setSearchDateTo(formatDate(val, DATA_FORMAT));
                   }}
+                  errorMessage={
+                    searchDateTo
+                      ? undefined
+                      : validationErrorMessage ?? undefined
+                  }
                 />
               </div>
             </div>
 
             <div className="my-2 flex justify-end">
-              <Button outlined rightIcon={<PiArrowDown />} onClick={() => {}}>
+              <Button
+                outlined
+                rightIcon={
+                  <PiArrowDown
+                    className={twMerge(
+                      'transition',
+                      isDescCost ? 'rotate-0' : 'rotate-180'
+                    )}
+                  />
+                }
+                onClick={() => {
+                  setIsDescCost(!isDescCost);
+                }}>
                 {t('admin.publicBotUsages.label.sortByCost')}
               </Button>
             </div>
@@ -111,7 +141,7 @@ const AdminPublicBotsPage: React.FC = () => {
                   {t('admin.publicBotUsages.label.noPublicBotUsages')}
                 </div>
               )}
-              {publicBots?.map((bot, idx) => (
+              {sortedBots?.map((bot, idx) => (
                 <ListItemBot
                   key={idx}
                   bot={{
@@ -121,19 +151,16 @@ const AdminPublicBotsPage: React.FC = () => {
                   onClick={() => {
                     // onClickViewBot(bot.id);
                   }}>
-                  <div className="flex gap-3">
-                    <div className="flex gap-1 text-lg font-bold">
+                  <div className="relative flex h-full items-center">
+                    <div className="text-lg font-bold">
                       {(Math.floor(bot.totalPrice * 100) / 100).toFixed(2)} USD
                     </div>
 
-                    <div className="flex flex-col gap-1 text-sm">
+                    <div className="absolute bottom-0 right-0 flex origin-bottom-right whitespace-nowrap text-xs font-light">
                       {bot.isPublished ? (
                         <>
-                          <div className="font-bold">
-                            {/* {t('admin.label.publishedDate')}: */}
-                          </div>
-                          {bot.publishedDatetime
-                            ? formatDatetime(bot.publishedDatetime)
+                          {bot.isPublished
+                            ? t('admin.publicBotUsages.label.published')
                             : null}
                         </>
                       ) : (
diff --git a/frontend/src/utils/DateUtils.ts b/frontend/src/utils/DateUtils.ts
index 38d12628f..5e5f32837 100644
--- a/frontend/src/utils/DateUtils.ts
+++ b/frontend/src/utils/DateUtils.ts
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs, { ManipulateType } from 'dayjs';
 
 const DEFAULT_DATETIME_FORMAT = 'YYYY/MM/DD HH:mm:ss';
 const DEFAULT_DATE_FORMAT = 'YYYY/MM/DD';
@@ -10,3 +10,11 @@ export const formatDatetime = (date: dayjs.ConfigType, format?: string) => {
 export const formatDate = (date: dayjs.ConfigType, format?: string) => {
   return dayjs(date).format(format ?? DEFAULT_DATE_FORMAT);
 };
+
+export const addDate = (
+  date: dayjs.ConfigType,
+  value: number,
+  unit?: ManipulateType
+) => {
+  return dayjs(date).add(value, unit).toDate();
+};