diff --git a/src/common/component/StyledSettingContainer.tsx b/src/common/component/StyledSettingContainer.tsx
index eb73d7cb..ca1ec881 100644
--- a/src/common/component/StyledSettingContainer.tsx
+++ b/src/common/component/StyledSettingContainer.tsx
@@ -65,7 +65,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
         </div>
         <div className={clsx("relative bg-white w-full max-h-full overflow-auto px-4 md:px-8 py-2 md:py-8 dark:bg-gray-700", !nav ? "hidden md:block" : "!pb-4")}>
           <GoBackNav path={pathPrefix} className="!left-1 top-1.5" />
-          {nav && <h4 className="font-bold text-xl text-gray-600 mb-4 md:mb-8 pl-4 md:pl-0 dark:text-gray-100">{nav.title}</h4>}
+          {nav && <h4 className="font-bold text-xl text-center md:text-left text-gray-600 mb-4 md:mb-8 pl-4 md:pl-0 dark:text-gray-100">{nav.title}</h4>}
           {children}
         </div>
       </div>
diff --git a/src/common/component/Version.tsx b/src/common/component/Version.tsx
index 29969255..68bf606b 100644
--- a/src/common/component/Version.tsx
+++ b/src/common/component/Version.tsx
@@ -15,7 +15,7 @@ const Version: FC<Props> = () => {
     unregister();
     setTimeout(() => {
       location.reload();
-    }, 1500);
+    }, 2000);
   };
   return (
     <ul className="flex flex-col gap-2 dark:text-white">
diff --git a/src/common/component/styled/Radio.tsx b/src/common/component/styled/Radio.tsx
index be3ecb38..c0474db3 100644
--- a/src/common/component/styled/Radio.tsx
+++ b/src/common/component/styled/Radio.tsx
@@ -43,7 +43,7 @@ const Radio: FC<Props> = ({
             }}
             id={`${id}-${index}`}
           />
-          <div className="drop-shadow-sm px-2 py-3 border border-solid border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300  peer-checked:text-white">
+          <div className="drop-shadow-sm text-left px-2 py-3 border border-solid border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300  peer-checked:text-white">
             <label className="ml-6" htmlFor={`${id}-${index}`}>{item}</label>
           </div>
           <div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-solid border-gray-300 peer-checked:hidden"></div>
diff --git a/src/routes/setting/APIDocument.tsx b/src/routes/setting/APIDocument.tsx
index 1a5f46ad..94cdf6d9 100644
--- a/src/routes/setting/APIDocument.tsx
+++ b/src/routes/setting/APIDocument.tsx
@@ -17,7 +17,7 @@ const APIDocument = () => {
             <div className="text-gray-500 dark:text-gray-100">
                 {t("api_doc.desc")}
             </div>
-            <div className='flex flex-col gap-2'>
+            <div className='flex flex-col gap-2 w-full'>
                 <h2 className='text-gray-700 dark:text-white text-xl font-bold'>
                     {t("api_doc.access")}
                 </h2>
@@ -25,11 +25,11 @@ const APIDocument = () => {
                     {APIUrl}
                 </a>
             </div>
-            <div className='flex flex-col gap-2'>
+            <div className='flex flex-col gap-2 w-full'>
                 <h2 className='text-gray-700 dark:text-white text-xl font-bold'>
                     {t("api_doc.use_method")}
                 </h2>
-                <div className=" flex flex-col gap-6">
+                <div className="flex flex-col gap-6">
                     <div className="flex flex-col gap-2">
                         <h3 className='text-gray-700 dark:text-white text-lg'>
                             👉 {t("api_doc.step_1")}
@@ -45,7 +45,7 @@ const APIDocument = () => {
                             </span>
                         </h3>
                         <div className='flex flex-col border border-solid border-green-500 bg-green-100 rounded-md p-2 w-fit break-words text-sm relative'>
-                            <p className="max-w-4xl font-bold">
+                            <p className="break-all md:max-w-4xl font-bold">
                                 {token}
                                 <IconCopy onClick={handleCopy} className="absolute right-2 bottom-2 cursor-pointer" />
                             </p>
diff --git a/src/routes/setting/License/index.tsx b/src/routes/setting/License/index.tsx
index fcab26dc..f5f1dc7e 100644
--- a/src/routes/setting/License/index.tsx
+++ b/src/routes/setting/License/index.tsx
@@ -10,10 +10,10 @@ import UpdateLicenseModal from "./UpdateLicenseModal";
 
 interface ItemProps extends HTMLAttributes<HTMLSpanElement> { label: string, data?: string | number | string[], foldable?: boolean }
 const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
-  const infoClass = clsx("font-bold w-full cursor-pointer", foldable ? "truncate" : "whitespace-pre-wrap break-all");
+  const infoClass = clsx("font-bold w-full cursor-pointer dark:text-green-500", foldable ? "truncate" : "whitespace-pre-wrap break-all");
   if (!data) return null;
   return <div className="whitespace-nowrap  flex flex-col items-start justify-start text-lg">
-    <span className="text-sm text-gray-400 dark:text-white">{label}</span>
+    <span className="text-sm text-green-500">{label}</span>
     {Array.isArray(data) ? <ul className={infoClass}>
       {data.map((d) => {
         return <li key={d}>{d}</li>;
@@ -44,7 +44,7 @@ export default function License() {
   return (
     <>
       <div className="max-w-3xl flex flex-col justify-start items-start gap-4">
-        <div className={clsx('relative w-full p-3 rounded border-solid border flex flex-col gap-4 shadow', reachLimit ? "border-red-600 bg-red-200/50" : "border-green-600 bg-green-200/50")}>
+        <div className={clsx('relative w-full p-3 rounded border-solid border flex flex-col gap-4 shadow', reachLimit ? "border-red-600 bg-red-200/50" : "border-green-600 bg-green-100 dark:bg-green-900")}>
           <Item label={t("license.signed")} data={licenseInfo?.sign ? "Yes" : "Not Yet"} />
           <Item label={t("license.domain")} data={licenseInfo?.domains} />
           <Item label={t("license.user_limit")} data={licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit} />