diff --git a/js/app/components/settings/about-category-settings.tsx b/js/app/components/settings/about-category-settings.tsx
index 2445d32c..9badd6b6 100644
--- a/js/app/components/settings/about-category-settings.tsx
+++ b/js/app/components/settings/about-category-settings.tsx
@@ -59,7 +59,7 @@ export function AboutCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center]}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
         <MenuContainer
           style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}
         >
diff --git a/js/app/components/settings/advanced-category-settings.tsx b/js/app/components/settings/advanced-category-settings.tsx
index 16ef8af5..e5714094 100644
--- a/js/app/components/settings/advanced-category-settings.tsx
+++ b/js/app/components/settings/advanced-category-settings.tsx
@@ -43,8 +43,8 @@ export function AdvancedCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               <SettingToggle
diff --git a/js/app/components/settings/danmu-category-settings.tsx b/js/app/components/settings/danmu-category-settings.tsx
index 4fd1d339..06511520 100644
--- a/js/app/components/settings/danmu-category-settings.tsx
+++ b/js/app/components/settings/danmu-category-settings.tsx
@@ -31,8 +31,8 @@ export function DanmuCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <View style={[{ alignItems: "stretch" }, zero.gap.all[12]]}>
             {/* Enable/Disable Danmu */}
             <SettingToggle
diff --git a/js/app/components/settings/languages-category-settings.tsx b/js/app/components/settings/languages-category-settings.tsx
index ab9ab3be..6e4d8e68 100644
--- a/js/app/components/settings/languages-category-settings.tsx
+++ b/js/app/components/settings/languages-category-settings.tsx
@@ -36,8 +36,8 @@ export function LanguagesCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <View>
               <Text size="xl" style={{ marginBottom: 4 }}>
diff --git a/js/app/components/settings/privacy-category-settings.tsx b/js/app/components/settings/privacy-category-settings.tsx
index e2678d38..22c07518 100644
--- a/js/app/components/settings/privacy-category-settings.tsx
+++ b/js/app/components/settings/privacy-category-settings.tsx
@@ -30,7 +30,7 @@ export function PrivacyCategorySettings() {
   return (
     <ScrollView>
       <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               <SettingToggle
diff --git a/js/app/components/settings/settings.tsx b/js/app/components/settings/settings.tsx
index f78c35b7..16f0c2ac 100644
--- a/js/app/components/settings/settings.tsx
+++ b/js/app/components/settings/settings.tsx
@@ -29,7 +29,7 @@ export function Settings() {
   return (
     <ScrollView>
       <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
-        <View style={[{ maxWidth: 500, width: "100%" }]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               {loggedIn && userProfile ? (
diff --git a/js/components/src/components/ui/button.tsx b/js/components/src/components/ui/button.tsx
index e653a0c2..fc3501b4 100644
--- a/js/components/src/components/ui/button.tsx
+++ b/js/components/src/components/ui/button.tsx
@@ -228,9 +228,15 @@ export const Button = forwardRef<any, ButtonProps>(
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
-            {loading && loadingText ? loadingText : children}
-          </TextPrimitive.Root>
+          {typeof children === "string" ? (
+            <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
+              {loading && loadingText ? loadingText : children}
+            </TextPrimitive.Root>
+          ) : loading && loadingText ? (
+            loadingText
+          ) : (
+            children
+          )}
 
           {loading && rightIcon ? (
             <ButtonPrimitive.Icon position="right">