diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index f52991466e..c61b2be6f0 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -279,7 +279,7 @@
     "Inaccessible": "Inaccessible",
     "isResolved": "Effective",
     "cnameTip": "Add the \"CNAME\" record of the domain to resolve to <strong>{{cnameDomain}}</strong>, After the resolution takes effect, the custom domain name can be bound.",
-    "editHostTip": "oss-bucket needs to be in read mode to enable website hosting",
+    "editHostTip": "oss-bucket needs to be in readOnly mode to enable website hosting",
     "CreateWebHosting": "Bind custom domain name",
     "CustomDomain": "Custom Domain",
     "CurrentDomain": "Current domain: ",
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "Custom Application Domain",
     "BucketNameisRequired": "Bucket name is required",
     "Fail": "upload failed",
-    "UploadFailTip": "{{number}} files upload failed"
+    "UploadFailTip": "{{number}} files upload failed",
+    "StartAppTips": " Please start the application first",
+    "SuccessfullyHosted": "Successfully hosted",
+    "SuccessfullyHostedTips": "HTTP is active, HTTPS activation may take some time. To check the hosting status, use HTTP for now.",
+    "BucketTips": "Newly created buckets or buckets after app restart need to wait for 15 ~ 30 s to take effect",
+    "DomainNotResolved": "Try using ping or nslookup to check if domain name resolution is effective"
   },
   "TriggerPanel": {
     "AddTrigger": "Add Trigger",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "You have not created a trigger,",
     "Every8AM": "8 am every day",
     "EveryHour": "per hour",
-    "EveryFiveMinutes": "every five minutes"
+    "EveryFiveMinutes": "every five minutes",
+    "createFail": "Trigger limit reached. Upgrade app configuration."
   },
   "StatusBar": {
     "CurrentApplication": "Current App"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "Login / Register",
     "BindGitHub": "Bind GitHub",
     "BindSuccess": "Bind Successfully",
-    "GitHubLogin": "GitHub Login"
+    "GitHubLogin": "GitHub Login",
+    "PleaseBindUser": "Please bind your user"
   },
   "Time": "Time",
   "CreateTime": "Created",
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
index 4b483f3b6a..07e88cf19f 100644
--- a/web/public/locales/zh-CN/translation.json
+++ b/web/public/locales/zh-CN/translation.json
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "自定义应用域名",
     "BucketNameisRequired": "请输入 Bucket 名称",
     "Fail": "上传失败",
-    "UploadFailTip": "{{number}} 个文件上传失败"
+    "UploadFailTip": "{{number}} 个文件上传失败",
+    "StartAppTips": "请先启动应用",
+    "SuccessfullyHosted": "托管成功",
+    "SuccessfullyHostedTips": "HTTP已生效，HTTPS需要一些时间生效。如需查看托管状态，请暂时使用HTTP访问。",
+    "BucketTips": "新创建的 bucket，或应用重启后的 bucket ，需要等待 15 ~ 30s 才能生效",
+    "DomainNotResolved": "尝试使用 ping 或 nslookup 来查看域名解析是否生效"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "您还没有创建触发器,",
     "Every8AM": "每天上午8点",
     "EveryHour": "每小时",
-    "EveryFiveMinutes": "每五分钟"
+    "EveryFiveMinutes": "每五分钟",
+    "createFail": "触发器数量已达上限，请升级应用配置"
   },
   "StatusBar": {
     "CurrentApplication": "当前应用"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "登录 / 注册",
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
-    "GitHubLogin": "GitHub 登录"
+    "GitHubLogin": "GitHub 登录",
+    "PleaseBindUser": "请绑定对应用户"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
index f6a50536d0..71840ae8be 100644
--- a/web/public/locales/zh/translation.json
+++ b/web/public/locales/zh/translation.json
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "自定义应用域名",
     "BucketNameisRequired": "请输入 Bucket 名称",
     "Fail": "上传失败",
-    "UploadFailTip": "{{number}} 个文件上传失败"
+    "UploadFailTip": "{{number}} 个文件上传失败",
+    "StartAppTips": "请先启动应用",
+    "SuccessfullyHosted": "托管成功",
+    "SuccessfullyHostedTips": "HTTP已生效，HTTPS需要一些时间生效。如需查看托管状态，请暂时使用HTTP访问。",
+    "BucketTips": "新创建的 bucket，或应用重启后的 bucket ，需要等待 15 ~ 30s 才能生效",
+    "DomainNotResolved": "尝试使用 ping 或 nslookup 来查看域名解析是否生效"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "您还没有创建触发器,",
     "Every8AM": "每天上午8点",
     "EveryHour": "每小时",
-    "EveryFiveMinutes": "每五分钟"
+    "EveryFiveMinutes": "每五分钟",
+    "createFail": "触发器数量已达上限，请升级应用配置"
   },
   "StatusBar": {
     "CurrentApplication": "当前应用"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "登录 / 注册",
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
-    "GitHubLogin": "GitHub 登录"
+    "GitHubLogin": "GitHub 登录",
+    "PleaseBindUser": "请绑定对应用户"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx
index b08e1be2b7..56dc3b192b 100644
--- a/web/src/components/ChargeButton/index.tsx
+++ b/web/src/components/ChargeButton/index.tsx
@@ -112,10 +112,11 @@ export default function ChargeButton(props: { amount?: number; children: React.R
                     )}
                     <Button
                       className={clsx(
-                        "w-full !rounded-md !border-2 bg-gray-100 py-10 !text-[24px]",
+                        "w-full !rounded-md !border-2 py-10 !text-[24px]",
                         item.amount === amount * 100
                           ? "!border-primary-400 !text-primary-600"
                           : "!border-transparent",
+                        darkMode ? "bg-gray-500" : "bg-gray-100 ",
                       )}
                       variant={"outline"}
                       key={item.amount}
diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
index 8108b5d557..f579fd8145 100644
--- a/web/src/components/Resize/index.tsx
+++ b/web/src/components/Resize/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import { Box, Center, useColorModeValue } from "@chakra-ui/react";
 import clsx from "clsx";
@@ -18,7 +18,7 @@ export default function Resize(props: {
   const store = useCustomSettingStore();
   const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } =
     store.getLayoutInfoStyle(pageId, panelId);
-  const { isDragging, position, separatorProps } = useResizable({
+  const { isDragging, position, separatorProps, handleClick } = useResizable({
     axis: type,
     initial: type === "x" ? width : height,
     min: type === "x" ? minWidth : minHeight,
@@ -35,6 +35,7 @@ export default function Resize(props: {
     store.setLayoutInfo(pageId, panelId, newPosition);
   }, [position, pageId, panelId, store]);
   const borderColor = useColorModeValue("slate.300", "lafDark.300");
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   return (
     <>
@@ -49,15 +50,25 @@ export default function Resize(props: {
           {...separatorProps}
         >
           <Center className="relative h-full w-full">
-            {type === "x" && width <= 20 ? (
+            {type === "x" && width <= minWidth + 15 ? (
               <div
                 className={clsx(
-                  "z-50",
-                  reverse ? "rounded-l-lg" : "rounded-r-lg",
+                  "absolute z-50 cursor-pointer",
+                  !isCollapsed && !reverse && "mr-2 rounded-l-full",
+                  isCollapsed && !reverse && "ml-2 rounded-r-full",
+                  !isCollapsed && reverse && "ml-2 rounded-r-full",
+                  isCollapsed && reverse && "mr-2 rounded-l-full",
                   "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
                 )}
+                onClick={(e) => {
+                  handleClick(e, isCollapsed);
+                  setIsCollapsed(!isCollapsed);
+                }}
               >
-                {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
+                {!isCollapsed && !reverse && <ChevronLeftIcon fontSize={10} />}
+                {isCollapsed && !reverse && <ChevronRightIcon fontSize={10} />}
+                {!isCollapsed && reverse && <ChevronRightIcon fontSize={10} />}
+                {isCollapsed && reverse && <ChevronLeftIcon fontSize={10} />}
               </div>
             ) : (
               <>
diff --git a/web/src/hooks/useResizable.ts b/web/src/hooks/useResizable.ts
index 1f9f966321..6caf8dd6a5 100644
--- a/web/src/hooks/useResizable.ts
+++ b/web/src/hooks/useResizable.ts
@@ -6,6 +6,7 @@ type Resizable = {
   position: number;
   isDragging: boolean;
   separatorProps: SeparatorProps;
+  handleClick: (e: React.MouseEvent | React.TouchEvent, isCollapsed: boolean) => void;
 };
 type UseResizableProps = {
   axis: "x" | "y";
@@ -72,8 +73,6 @@ const useResizable = ({
         }
       })();
 
-      if (currentPosition <= 4) return setPosition(4);
-
       if (min <= currentPosition && currentPosition <= max) {
         setPosition(currentPosition);
       }
@@ -81,6 +80,20 @@ const useResizable = ({
     [axis, disabled, max, min, reverse, containerRef],
   );
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, isCollapsed: boolean) => {
+      if (disabled) return;
+      e.stopPropagation();
+      e.preventDefault();
+      if (!isCollapsed) {
+        setPosition(4);
+      } else {
+        setPosition(min);
+      }
+    },
+    [disabled, min],
+  );
+
   const handleUp = useCallback(
     (e: MouseEvent | TouchEvent) => {
       if (disabled) return;
@@ -116,6 +129,7 @@ const useResizable = ({
       onMouseDown: handleDown,
       onTouchStart: handleDown,
     },
+    handleClick,
   };
 };
 
diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
index e645a7939f..eb74fa6b96 100644
--- a/web/src/pages/app/database/index.tsx
+++ b/web/src/pages/app/database/index.tsx
@@ -25,7 +25,7 @@ function DatabasePage() {
   return (
     <Content>
       <Row className="flex-grow" ref={containerRef}>
-        <Col {...settingStore.layoutInfo.collectionPage.SideBar}>
+        <Col style={{ width: settingStore.layoutInfo.collectionPage.SideBar.style.width }}>
           <CollectionListPanel />
           <Resize
             type="y"
diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
index 23419bee8c..55a872da33 100644
--- a/web/src/pages/app/functions/index.tsx
+++ b/web/src/pages/app/functions/index.tsx
@@ -25,7 +25,7 @@ function FunctionPage() {
   return (
     <Content>
       <Row ref={containerRef}>
-        <Col {...functionPageConfig.SideBar}>
+        <Col style={{ width: functionPageConfig.SideBar.style.width }}>
           <FunctionPanel />
           <Resize
             type="y"
@@ -71,7 +71,7 @@ function FunctionPage() {
               reverse
               containerRef={containerRef}
             />
-            <Col {...functionPageConfig.RightPanel}>
+            <Col style={{ width: functionPageConfig.RightPanel.style.width }}>
               <DebugPanel containerRef={containerRef} />
             </Col>
           </Row>
diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
index 62ebc64a6d..19cbf0717e 100644
--- a/web/src/pages/app/functions/mods/DebugPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -14,6 +14,7 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import axios from "axios";
+import clsx from "clsx";
 import { keyBy, mapValues } from "lodash";
 
 import JSONViewer from "@/components/Editor/JSONViewer";
@@ -62,6 +63,7 @@ export default function DebugPanel(props: { containerRef: any }) {
   const [runningResData, setRunningResData] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [runningMethod, setRunningMethod] = useState<TMethod>();
+  const [isHovered, setIsHovered] = useState(false);
 
   const compileMutation = useCompileMutation();
   const { colorMode } = useColorMode();
@@ -71,6 +73,8 @@ export default function DebugPanel(props: { containerRef: any }) {
   const [bodyParams, setBodyParams] = useState<{ contentType: string; data: any }>();
   const [headerParams, setHeaderParams] = useState([]);
 
+  const [abortController, setAbortController] = useState(new AbortController());
+
   const functionPageConfig = useCustomSettingStore((store) => store.layoutInfo.functionPage);
   const { displayName } = useHotKey(
     DEFAULT_SHORTCUTS.send_request,
@@ -147,7 +151,7 @@ export default function DebugPanel(props: { containerRef: any }) {
             return status === 500 ? true : status >= 200 && status < 300;
           },
         });
-
+        const signal = abortController.signal;
         const res = await axiosInstance({
           url: getFunctionUrl(),
           method: runningMethod,
@@ -158,6 +162,7 @@ export default function DebugPanel(props: { containerRef: any }) {
             "x-laf-debug-data": encodeData(_funcData),
             "Content-Type": bodyParams?.contentType || "application/json",
           }),
+          signal,
         });
 
         setCurrentRequestId(res.headers["request-id"]);
@@ -166,6 +171,8 @@ export default function DebugPanel(props: { containerRef: any }) {
 
         setRunningResData(res.data);
       }
+
+      return () => abortController.abort();
     } catch (error: any) {
       setRunningResData(error.toString());
     } finally {
@@ -173,6 +180,11 @@ export default function DebugPanel(props: { containerRef: any }) {
     }
   };
 
+  const cancelRequest = () => {
+    abortController.abort();
+    setAbortController(new AbortController());
+  };
+
   return (
     <>
       <Panel className="min-w-[200px] flex-grow overflow-hidden !px-0">
@@ -253,14 +265,32 @@ export default function DebugPanel(props: { containerRef: any }) {
                       );
                     })}
                   </Select>
-                  <Tooltip label={`${t("shortcutKey")} ${displayName.toUpperCase()}`}>
+                  <Tooltip
+                    label={isLoading ? "" : `${t("shortcutKey")} ${displayName.toUpperCase()}`}
+                  >
                     <Button
                       disabled={getFunctionUrl() === ""}
-                      className="ml-2 !h-6 !w-14 !bg-primary-600 !text-base"
-                      onClick={() => runningCode()}
-                      isLoading={isLoading}
+                      className={clsx(
+                        "relative ml-2 !h-6 !w-14 !text-base",
+                        isLoading ? "!bg-primary-400" : "!bg-primary-600 ",
+                      )}
+                      onClick={() => (isLoading ? cancelRequest() : runningCode())}
+                      onMouseEnter={() => setIsHovered(true)}
+                      onMouseLeave={() => setIsHovered(false)}
                     >
-                      {t("FunctionPanel.Debug")}
+                      {isLoading ? (
+                        <>
+                          {isHovered ? (
+                            t("Cancel")
+                          ) : (
+                            <Center>
+                              <Spinner size={"xs"} />
+                            </Center>
+                          )}
+                        </>
+                      ) : (
+                        t("FunctionPanel.Debug")
+                      )}
                     </Button>
                   </Tooltip>
                 </div>
@@ -336,21 +366,18 @@ export default function DebugPanel(props: { containerRef: any }) {
                     pageId="functionPage"
                     panelId="RunningPanel"
                   />
-                  <div className="relative flex-1 overflow-auto">
+                  <div className="h-full flex-1 overflow-auto">
                     {isLoading ? (
-                      <div className="absolute left-0 right-0">
-                        <Center>
-                          <Spinner />
-                        </Center>
-                      </div>
-                    ) : null}
-                    {runningResData !== undefined ? (
+                      <Center className="h-full">
+                        <Spinner />
+                      </Center>
+                    ) : runningResData !== undefined ? (
                       <JSONViewer
                         colorMode={colorMode}
                         code={JSON.stringify(runningResData, null, 2)}
                       />
                     ) : (
-                      <Center minH={140} className="text-grayIron-600">
+                      <Center className="h-full text-grayIron-600">
                         {t("FunctionPanel.EmptyDebugTip")}
                       </Center>
                     )}
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index 325eac45d2..39ed510756 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -335,7 +335,7 @@ export default function FunctionList() {
   }
 
   return (
-    <Panel className="min-w-[215px] flex-grow overflow-hidden">
+    <Panel className="flex-grow overflow-hidden">
       <Panel.Header
         title={
           <div className="flex">
diff --git a/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx b/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
index 45d462c423..df58abe760 100644
--- a/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
+++ b/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
@@ -25,6 +25,7 @@ import { useCreateTriggerMutation } from "../service";
 import {} from "../service";
 
 import { useFunctionListQuery } from "@/pages/app/functions/service";
+import useGlobalStore from "@/pages/globalStore";
 
 const CRON_TEMPLATE = [
   {
@@ -58,13 +59,19 @@ const AddTriggerModal = (props: { children: React.ReactElement; targetFunc?: str
 
   const { targetFunc, children } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { showSuccess, showError } = useGlobalStore();
   const functionListQuery = useFunctionListQuery({ onSuccess: (data: any) => {} });
   const addTriggerMutation = useCreateTriggerMutation(() => {
     onClose();
   });
-  const onSubmit = (data: any) => {
-    addTriggerMutation.mutate(data);
-    onClose();
+  const onSubmit = async (data: any) => {
+    const res = await addTriggerMutation.mutateAsync(data);
+    if (!res.error) {
+      showSuccess(t("CreateSuccess"));
+      onClose();
+    } else if (res.error === "Trigger count limit exceeded") {
+      showError(t("TriggerPanel.createFail"));
+    }
   };
   const initFormData = () => {
     reset({
diff --git a/web/src/pages/app/functions/mods/TriggerModal/index.tsx b/web/src/pages/app/functions/mods/TriggerModal/index.tsx
index c1b45b2d98..fd28cd01b0 100644
--- a/web/src/pages/app/functions/mods/TriggerModal/index.tsx
+++ b/web/src/pages/app/functions/mods/TriggerModal/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import React from "react";
-import { AddIcon, DeleteIcon, Search2Icon } from "@chakra-ui/icons";
+import { AddIcon, Search2Icon } from "@chakra-ui/icons";
 import {
   Button,
   Center,
@@ -27,6 +27,7 @@ import {
 } from "@chakra-ui/react";
 import { t } from "i18next";
 
+import { RecycleDeleteIcon } from "@/components/CommonIcon";
 import ConfirmButton from "@/components/ConfirmButton";
 import EmptyBox from "@/components/EmptyBox";
 import IconWrap from "@/components/IconWrap";
@@ -133,7 +134,7 @@ export default function TriggerModal(props: { children: React.ReactElement }) {
                                       bodyText={t("TriggerPanel.DeleteConfirm")}
                                     >
                                       <IconWrap tooltip={String(t("Delete"))}>
-                                        <DeleteIcon fontSize={15} />
+                                        <RecycleDeleteIcon fontSize={15} />
                                       </IconWrap>
                                     </ConfirmButton>
                                   </HStack>
diff --git a/web/src/pages/app/functions/mods/TriggerModal/service.ts b/web/src/pages/app/functions/mods/TriggerModal/service.ts
index d27790b133..c79519e814 100644
--- a/web/src/pages/app/functions/mods/TriggerModal/service.ts
+++ b/web/src/pages/app/functions/mods/TriggerModal/service.ts
@@ -24,7 +24,6 @@ export const useTriggerListQuery = (onSuccess: (data: any) => void) => {
 };
 
 export const useCreateTriggerMutation = (onSuccess: (data: any) => void) => {
-  const globalStore = useGlobalStore();
   const queryClient = useQueryClient();
   return useMutation(
     (values: any) => {
@@ -32,11 +31,8 @@ export const useCreateTriggerMutation = (onSuccess: (data: any) => void) => {
     },
     {
       onSuccess: async (data) => {
-        if (data.error) {
-          globalStore.showError(data.error);
-        } else {
+        if (!data.error) {
           await queryClient.invalidateQueries(queryKeys.useTriggerQuery);
-          onSuccess && onSuccess(data);
         }
       },
     },
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
index f52531a9ff..589fea0403 100644
--- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
+++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
@@ -186,7 +186,7 @@ export default function LogsModal(props: { children: React.ReactElement }) {
                 style={{ height: "98%", fontSize: settingStore.commonSettings.fontSize - 1 }}
               >
                 <LogViewer
-                  data={logs}
+                  data={logs.replace(/^\s*\n/, "")}
                   hasLineNumbers={false}
                   scrollToRow={100000}
                   height={"100%"}
diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx
index 3e592af009..d4776aec50 100644
--- a/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx
+++ b/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { Cell, Legend, Pie, PieChart, ResponsiveContainer } from "recharts";
 
-import { uniformCapacity } from "@/utils/format";
+import { formatSize, uniformCapacity } from "@/utils/format";
 
 export default function PieCard(props: {
   data: any[];
@@ -37,7 +37,7 @@ export default function PieCard(props: {
               ></span>
               <p>{entry.value}</p>
             </span>
-            <p className="ml-3 mt-1">{(pieData[index]?.value).toFixed(3)} MB</p>
+            <p className="ml-3 mt-1">{formatSize(pieData[index]?.value * 1024 * 1024)}</p>
           </div>
         ))}
       </ul>
diff --git a/web/src/pages/app/setting/SysSetting/CustomDomain/index.tsx b/web/src/pages/app/setting/SysSetting/CustomDomain/index.tsx
index 2276e76814..ab91c83227 100644
--- a/web/src/pages/app/setting/SysSetting/CustomDomain/index.tsx
+++ b/web/src/pages/app/setting/SysSetting/CustomDomain/index.tsx
@@ -19,7 +19,7 @@ import { useBindDomainMutation, useRemoveApplicationMutation } from "./service";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function CustomDomain() {
-  const { currentApp, showSuccess, setCurrentApp } = useGlobalStore();
+  const { currentApp, showSuccess, setCurrentApp, showWarning } = useGlobalStore();
 
   const { register, handleSubmit } = useForm<{ domain: string }>({
     defaultValues: { domain: currentApp?.domain?.customDomain || "" },
@@ -94,6 +94,8 @@ export default function CustomDomain() {
               if (res.data) {
                 setCurrentApp({ ...currentApp, domain: res.data });
                 showSuccess(t("StoragePanel.DomainUpdateSuccess"));
+              } else if (res.error === "domain not resolved") {
+                showWarning(t("StoragePanel.DomainNotResolved"));
               }
             })}
           >
diff --git a/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx b/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx
index bee5b8cf05..444d7722f6 100644
--- a/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx
+++ b/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx
@@ -94,7 +94,11 @@ export default function BillingDetails() {
               <Tr className={clsx("h-8", !darkMode && "bg-[#F4F6F8]")}>
                 <Th className="!pr-0">
                   <span className="flex items-center">
-                    <span className="mr-1 font-normal !text-grayModern-700">AppId</span>
+                    <span
+                      className={clsx("mr-1 font-normal", darkMode ? "" : "text-grayModern-700")}
+                    >
+                      AppId
+                    </span>
                     <Popover>
                       <PopoverTrigger>
                         <FilterIcon className="cursor-pointer !text-grayModern-400" />
@@ -135,7 +139,12 @@ export default function BillingDetails() {
                 </Th>
                 <Th className="!px-0 !pl-2">
                   <span className="flex items-center">
-                    <span className="mr-1 border-l pl-2 font-normal !text-grayModern-700">
+                    <span
+                      className={clsx(
+                        "mr-1 border-l pl-2 font-normal",
+                        darkMode ? "" : "text-grayModern-700",
+                      )}
+                    >
                       {t("Duration")}
                     </span>
                     <Popover>
@@ -165,28 +174,53 @@ export default function BillingDetails() {
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
                     {t("SpecItem.cpu")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
                     {t("SpecItem.memory")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
                     {t("Spec.Database")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
                     {t("Spec.Storage")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
                   <span className="flex items-center">
-                    <span className="mr-1 border-l pl-2 font-normal !text-grayModern-700">
+                    <span
+                      className={clsx(
+                        "mr-1 border-l pl-2 font-normal",
+                        darkMode ? "" : "text-grayModern-700",
+                      )}
+                    >
                       {t("State")}
                     </span>
                     <Popover>
@@ -219,7 +253,12 @@ export default function BillingDetails() {
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
                     {t("TotalAmount")}
                   </span>
                 </Th>
@@ -239,11 +278,51 @@ export default function BillingDetails() {
                     >
                       {item.appid}
                     </Td>
-                    <Td className="text-grayModern-600">{formatDate(item.endAt)}</Td>
-                    <Td className="text-grayModern-600">{item.detail?.cpu?.amount}</Td>
-                    <Td className="text-grayModern-600">{item.detail?.memory?.amount}</Td>
-                    <Td className="text-grayModern-600">{item.detail?.databaseCapacity?.amount}</Td>
-                    <Td className="text-grayModern-600">{item.detail?.storageCapacity?.amount}</Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {formatDate(item.endAt)}
+                    </Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {item.detail?.cpu?.amount}
+                    </Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {item.detail?.memory?.amount}
+                    </Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {item.detail?.databaseCapacity?.amount}
+                    </Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {item.detail?.storageCapacity?.amount}
+                    </Td>
                     <Td
                       className={clsx(
                         darkMode ? "!border-b-grayModern-600" : "",
diff --git a/web/src/pages/app/setting/UserSetting/RechargeHistory/index.tsx b/web/src/pages/app/setting/UserSetting/RechargeHistory/index.tsx
index ae0122e53e..7fcc5ebc1b 100644
--- a/web/src/pages/app/setting/UserSetting/RechargeHistory/index.tsx
+++ b/web/src/pages/app/setting/UserSetting/RechargeHistory/index.tsx
@@ -84,11 +84,18 @@ export default function RechargeHistory() {
             <Thead>
               <Tr className={clsx("h-8", !darkMode && "bg-[#F4F6F8]")}>
                 <Th className="!pr-0">
-                  <span className="mr-1 font-normal !text-grayModern-700">{t("OrderNumber")}</span>
+                  <span className={clsx("mr-1 font-normal", darkMode ? "" : "text-grayModern-700")}>
+                    {t("OrderNumber")}
+                  </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
                   <span className="flex items-center">
-                    <span className="mr-1 border-l pl-2 font-normal !text-grayModern-700">
+                    <span
+                      className={clsx(
+                        "mr-1 border-l pl-2 font-normal",
+                        darkMode ? "" : "!text-grayModern-700",
+                      )}
+                    >
                       {t("Duration")}
                     </span>
                     <Popover>
@@ -119,7 +126,12 @@ export default function RechargeHistory() {
                 </Th>
                 <Th className="!px-0 !pl-2">
                   <span className="flex items-center">
-                    <span className="mr-1 border-l pl-2 font-normal !text-grayModern-700">
+                    <span
+                      className={clsx(
+                        "mr-1 border-l pl-2 font-normal",
+                        darkMode ? "" : "!text-grayModern-700",
+                      )}
+                    >
                       {t("State")}
                     </span>
                     <Popover>
@@ -152,17 +164,32 @@ export default function RechargeHistory() {
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "!text-grayModern-700",
+                    )}
+                  >
                     {t("Recharge amount")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "!text-grayModern-700",
+                    )}
+                  >
                     {t("Bonus amount")}
                   </span>
                 </Th>
                 <Th className="!px-0 !pl-2">
-                  <span className="border-l pl-2 font-normal !text-grayModern-700">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "!text-grayModern-700",
+                    )}
+                  >
                     {t("Total payment amount")}
                   </span>
                 </Th>
@@ -180,10 +207,18 @@ export default function RechargeHistory() {
                     >
                       {item._id}
                     </Td>
-                    <Td className="text-grayModern-600">{formatDate(item.createdAt)}</Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {formatDate(item.createdAt)}
+                    </Td>
                     <Td
                       className={clsx(
-                        darkMode ? "border-b-grayModern-600" : "",
+                        darkMode ? "!border-b-grayModern-600" : "",
                         item.phase === "Paid" ? "text-primary-600" : "text-error-600",
                       )}
                     >
diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
index 97b63cbf24..910ed69e87 100644
--- a/web/src/pages/app/setting/index.tsx
+++ b/web/src/pages/app/setting/index.tsx
@@ -117,10 +117,10 @@ const SettingModal = (props: {
                               }}
                             >
                               <span className="flex">
-                                <span className="flex items-center pr-2 ">{tab.icon}</span>
-                                {tab.name}
+                                <span className="flex items-center pr-2">{tab.icon}</span>
+                                <div className="w-[85%] truncate whitespace-nowrap">{tab.name}</div>
                                 {tab?.status && (
-                                  <span className="ml-4 scale-75 rounded-full border border-red-300 px-1 text-red-300">
+                                  <span className="scale-75 whitespace-nowrap rounded-full border border-red-300 px-1 text-red-300">
                                     {tab.status}
                                   </span>
                                 )}
diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
index ab7c8d8819..b03548a092 100644
--- a/web/src/pages/app/storages/index.tsx
+++ b/web/src/pages/app/storages/index.tsx
@@ -1,8 +1,9 @@
 /****************************
  * cloud functions storage page
  ***************************/
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Center } from "@chakra-ui/react";
 
 import Content from "@/components/Content";
 import EmptyBox from "@/components/EmptyBox";
@@ -19,34 +20,57 @@ import StorageListPanel from "./mods/StorageListPanel";
 import useStorageStore from "./store";
 
 import useCustomSettingStore from "@/pages/customSetting";
+import useGlobalStore from "@/pages/globalStore";
 export default function StoragePage() {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const settingStore = useCustomSettingStore();
   const { currentStorage } = useStorageStore();
+
+  const { currentApp, showWarning } = useGlobalStore((state) => state);
+
+  useEffect(() => {
+    if (currentApp.state !== "Running") {
+      showWarning(t("StoragePanel.StartAppTips"));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Content>
       <Row ref={containerRef}>
-        <Col {...settingStore.layoutInfo.storagePage.SideBar}>
+        <Col
+          style={{
+            width: settingStore.layoutInfo.storagePage.SideBar.style.width,
+          }}
+        >
           <StorageListPanel />
         </Col>
         <Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
         <Col>
-          {currentStorage === undefined ? (
+          {currentApp.state === "Running" ? (
+            currentStorage === undefined ? (
+              <Panel className="h-full items-center">
+                <EmptyBox>
+                  <div>
+                    {t("StoragePanel.EmptyText")}
+                    <CreateBucketModal>
+                      <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
+                        {t("CreateNow")}
+                      </span>
+                    </CreateBucketModal>
+                  </div>
+                </EmptyBox>
+              </Panel>
+            ) : (
+              <FileList />
+            )
+          ) : (
             <Panel className="h-full items-center">
-              <EmptyBox>
-                <div>
-                  {t("StoragePanel.EmptyText")}
-                  <CreateBucketModal>
-                    <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
-                      {t("CreateNow")}
-                    </span>
-                  </CreateBucketModal>
-                </div>
-              </EmptyBox>
+              <Center className="h-full text-lg text-grayModern-700">
+                {t("StoragePanel.StartAppTips")}
+              </Center>
             </Panel>
-          ) : (
-            <FileList />
           )}
         </Col>
       </Row>
diff --git a/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx b/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
index 097eee3253..6add1fed8b 100644
--- a/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
+++ b/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useForm } from "react-hook-form";
+import { InfoOutlineIcon } from "@chakra-ui/icons";
 import {
   Button,
   FormControl,
@@ -145,6 +146,11 @@ function CreateBucketModal(props: { storage?: TBucket; children: React.ReactElem
                   </option>
                 </Select>
               </FormControl>
+
+              <span className="flex items-center text-grayModern-600">
+                <InfoOutlineIcon className="mx-1" />
+                {t("StoragePanel.BucketTips")}
+              </span>
             </VStack>
           </ModalBody>
 
diff --git a/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx b/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
index 8f3281277b..d6f02e2402 100644
--- a/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
+++ b/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
@@ -37,9 +37,12 @@ import useStorageStore from "../../store";
 
 import SiteStatus from "./SiteStatus";
 
+import useGlobalStore from "@/pages/globalStore";
+
 function CreateWebsiteModal() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentStorage, getOrigin } = useStorageStore();
+  const { showSuccess, showInfo, showWarning } = useGlobalStore();
   const { register, setFocus, handleSubmit, reset } = useForm<{ domain: string }>();
   const { t } = useTranslation();
   const createWebsiteMutation = useWebsiteCreateMutation();
@@ -113,7 +116,7 @@ function CreateWebsiteModal() {
           variant={"secondary"}
           style={{ borderRadius: "1rem" }}
           disabled={currentStorage === undefined}
-          onClick={() => {
+          onClick={async () => {
             if (!(currentStorage?.policy === BUCKET_POLICY_TYPE.readonly)) {
               toast({
                 status: "warning",
@@ -122,10 +125,14 @@ function CreateWebsiteModal() {
               });
               return;
             }
-            createWebsiteMutation.mutateAsync({
+            const res = await createWebsiteMutation.mutateAsync({
               bucketName: currentStorage && currentStorage.name,
               state: BUCKET_STATUS.Active,
             });
+            if (!res.error) {
+              showSuccess(t("StoragePanel.SuccessfullyHosted"));
+              showInfo(t("StoragePanel.SuccessfullyHostedTips"), 5000, true);
+            }
           }}
         >
           {t("StoragePanel.websiteHost")}
@@ -175,12 +182,14 @@ function CreateWebsiteModal() {
               type="submit"
               isLoading={updateWebsiteMutation.isLoading}
               onClick={handleSubmit(async (value) => {
-                const res: any = await updateWebsiteMutation.mutateAsync({
+                const res = await updateWebsiteMutation.mutateAsync({
                   id: currentStorage?.websiteHosting._id,
                   domain: value.domain,
                 });
                 if (res.data) {
                   onClose();
+                } else if (res.error === "domain not resolved") {
+                  showWarning(t("StoragePanel.DomainNotResolved"));
                 }
               })}
             >
diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
index 5f7b742b1b..5dcea89596 100644
--- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
+++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -115,9 +115,9 @@ export default function StorageListPanel() {
                       }}
                     >
                       <>
-                        <div className="font-medium">
+                        <div className="flex flex-1 truncate font-medium">
                           <FileTypeIcon type={FileType.bucket} />
-                          <span className="ml-1 text-base">{storage.name}</span>
+                          <div className="ml-1 text-base">{storage.name}</div>
                         </div>
                         <div className="flex items-center">
                           <Tag size="sm" className="w-16 justify-center" variant={storage?.policy}>
diff --git a/web/src/pages/auth/signin/index.tsx b/web/src/pages/auth/signin/index.tsx
index 3d1749454d..c2fd394f0f 100644
--- a/web/src/pages/auth/signin/index.tsx
+++ b/web/src/pages/auth/signin/index.tsx
@@ -11,6 +11,7 @@ import LoginByPasswordPanel from "./mods/LoginByPasswordPanel";
 import LoginByPhonePanel from "./mods/LoginByPhonePanel";
 
 import useAuthStore from "@/pages/auth/store";
+import useGlobalStore from "@/pages/globalStore";
 
 type providersTypes = "user-password" | "phone" | "github" | "wechat";
 
@@ -22,11 +23,18 @@ export default function SignIn() {
   const [currentProvider, setCurrentProvider] = useState<providersTypes>();
 
   const isBindGithub = !!sessionStorage.getItem("githubToken");
+  const { showInfo } = useGlobalStore();
 
   useEffect(() => {
     setCurrentProvider(defaultProvider.name);
   }, [defaultProvider]);
 
+  useEffect(() => {
+    if (isBindGithub) {
+      showInfo(t("AuthPanel.PleaseBindUser"), 5000, true);
+    }
+  }, [isBindGithub, showInfo]);
+
   return (
     <div
       className={clsx(
diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts
index a8d699bc92..b6572e2f46 100644
--- a/web/src/pages/customSetting.ts
+++ b/web/src/pages/customSetting.ts
@@ -62,8 +62,8 @@ const useCustomSettingStore = create<State>()(
             SideBar: {
               id: "SideBar",
               style: {
-                width: 218,
-                minWidth: 0,
+                width: 240,
+                minWidth: 220,
               },
             },
 
@@ -71,7 +71,7 @@ const useCustomSettingStore = create<State>()(
               id: "RightPanel",
               style: {
                 width: 270,
-                minWidth: 0,
+                minWidth: 232,
               },
             },
 
@@ -113,7 +113,7 @@ const useCustomSettingStore = create<State>()(
               id: "SideBar",
               style: {
                 width: 300,
-                minWidth: 0,
+                minWidth: 206,
               },
             },
             CollectionPanel: {
@@ -142,7 +142,7 @@ const useCustomSettingStore = create<State>()(
               id: "SideBar",
               style: {
                 width: 300,
-                minWidth: 0,
+                minWidth: 230,
                 maxWidth: 800,
               },
             },
@@ -184,7 +184,7 @@ const useCustomSettingStore = create<State>()(
 
       {
         name: "laf_custom_setting",
-        version: 2,
+        version: 3,
       },
     ),
   ),
diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
index f29c122798..421dca9e6c 100644
--- a/web/src/pages/globalStore.ts
+++ b/web/src/pages/globalStore.ts
@@ -32,7 +32,8 @@ type State = {
   visitedViews: string[];
 
   showSuccess: (text: string | React.ReactNode) => void;
-  showInfo: (text: string | React.ReactNode) => void;
+  showInfo: (text: string | React.ReactNode, duration?: number, isClosable?: boolean) => void;
+  showWarning: (text: string | React.ReactNode) => void;
   showError: (text: string | React.ReactNode) => void;
 };
 
@@ -161,16 +162,35 @@ const useGlobalStore = create<State>()(
         });
       },
 
-      showInfo: (text: string | React.ReactNode) => {
+      showWarning: (text: string | React.ReactNode) => {
         toast({
           position: "top",
           title: text,
+          status: "warning",
           variant: localStorage.getItem(CHAKRA_UI_COLOR_MODE_KEY) ? "subtle" : "solid",
-          duration: 1000,
+          duration: 3000,
+          containerStyle: {
+            maxWidth: "100%",
+            minWidth: "100px",
+          },
+        });
+      },
+
+      showInfo: (
+        text: string | React.ReactNode,
+        duration: number = 1000,
+        isClosable: boolean = false,
+      ) => {
+        toast({
+          position: "top",
+          title: text,
+          variant: localStorage.getItem(CHAKRA_UI_COLOR_MODE_KEY) ? "subtle" : "solid",
+          duration: duration,
           containerStyle: {
             maxWidth: "100%",
             minWidth: "100px",
           },
+          isClosable: isClosable,
         });
       },
     })),
diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
index d5249661ca..bb0c95c292 100644
--- a/web/src/pages/home/mods/List/index.tsx
+++ b/web/src/pages/home/mods/List/index.tsx
@@ -111,13 +111,13 @@ function List(props: { appList: TApplicationItem[] }) {
                   bg={bg}
                   className="group mb-3 flex h-[68px] items-center rounded-[10px] px-6"
                 >
-                  <div className="w-3/12 ">
-                    <div className="flex">
-                      <span className="mr-2 text-lg font-medium">{item?.name}</span>
+                  <div className="w-3/12">
+                    <div className="flex w-44">
+                      <div className="truncate text-lg font-medium">{item?.name}</div>
                       {item?.createdBy !== userInfo?._id && (
                         <span
                           className={clsx(
-                            "-ml-2 flex scale-[.83] items-center rounded-full border  border-dashed border-[#DEE0E2] px-2",
+                            "flex scale-[.83] items-center whitespace-nowrap rounded-full border border-dashed border-[#DEE0E2] px-2",
                             darkMode ? "" : "text-grayModern-600",
                           )}
                         >