diff --git a/src/pages/options/index.tsx b/src/pages/options/index.tsx
index c9dc743..1116a44 100644
--- a/src/pages/options/index.tsx
+++ b/src/pages/options/index.tsx
@@ -27,6 +27,7 @@ const Options = () => {
   const responsive = useResponsive();
 
   useEffect(() => {
+    document.body.setAttribute('data-page-name', 'options');
     prefs.ready(() => {
       if (isDarkMode()) {
         document.body.setAttribute('theme-mode', 'dark');
diff --git a/src/pages/popup/index.tsx b/src/pages/popup/index.tsx
index 1b8cde0..616363e 100644
--- a/src/pages/popup/index.tsx
+++ b/src/pages/popup/index.tsx
@@ -60,6 +60,7 @@ const Popup = () => {
   const [enable, setEnable] = useState(true);
 
   useEffect(() => {
+    document.body.setAttribute('data-page-name', 'popup');
     prefs.ready(() => {
       setEnable(!prefs.get('disable-all'));
       // Get dark mode setting
diff --git a/src/share/components/rule-content-switcher.tsx b/src/share/components/rule-content-switcher.tsx
index e53ef38..a72eb75 100644
--- a/src/share/components/rule-content-switcher.tsx
+++ b/src/share/components/rule-content-switcher.tsx
@@ -1,4 +1,4 @@
-import { ArrayField, Button, Dropdown, Form, Modal, Space, Toast, ToastFactory } from '@douyinfe/semi-ui';
+import { ArrayField, Button, Dropdown, Form, Modal, Space } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 import { css } from '@emotion/css';
 import { useLatest } from 'ahooks';
@@ -8,6 +8,7 @@ import type { RULE_ACTION_OBJ, Rule } from '@/share/core/types';
 import useStorage from '@/share/hooks/use-storage';
 import Api from '@/share/pages/api';
 import { getVirtualKey, t } from '@/share/core/utils';
+import { Toast } from '@/share/pages/toast';
 import type { DropdownProps } from '@douyinfe/semi-ui/lib/es/dropdown';
 
 interface RuleContentSwitcherEditProps {
@@ -15,7 +16,7 @@ interface RuleContentSwitcherEditProps {
   onChange: (v: string[]) => void;
 }
 const RuleContentSwitcherEdit: FC<RuleContentSwitcherEditProps> = (props) => {
-  const { initValue, onChange } = props;
+  const { initValue = [''], onChange } = props;
 
   return (
     <Form
@@ -24,12 +25,17 @@ const RuleContentSwitcherEdit: FC<RuleContentSwitcherEditProps> = (props) => {
       }}
       onValueChange={(v) => onChange(v.value)}
     >
-      <ArrayField field="value" initValue={['']}>
+      <ArrayField field="value" initValue={initValue}>
         {({ add, arrayFields }) => (
           <div
             className={css`
               display: flex;
               flex-direction: column;
+
+              .semi-space > .semi-form-field {
+                flex-grow: 1;
+                flex-shrink: 1;
+              }
             `}
           >
             {arrayFields.map(({ key, field, remove }) => (
@@ -64,15 +70,11 @@ const RuleContentSwitcher: FC<RuleContentSwitcherProps> = (props) => {
     const updateRule = async (k: string, v: any) => {
       const newRule = { ...newestRule.current };
       newRule[k] = v;
-      const myToast = add ? Toast : ToastFactory.create({
-        top: 'auto',
-        bottom: 0,
-      });
       try {
         await Api.saveRule(newRule);
-        myToast.success(t('switch_success'));
+        Toast().success(t('switch_success'));
       } catch (e) {
-        myToast.error(e.message);
+        Toast().error(e.message);
       }
     };
 
diff --git a/src/share/pages/toast.ts b/src/share/pages/toast.ts
new file mode 100644
index 0000000..51106b3
--- /dev/null
+++ b/src/share/pages/toast.ts
@@ -0,0 +1,13 @@
+import { Toast as SemiToast, ToastFactory } from '@douyinfe/semi-ui';
+
+export const BottomToast = ToastFactory.create({
+  top: 'auto',
+  bottom: 0,
+});
+
+export const Toast = () => {
+  if (document.body.getAttribute('data-page-name') === 'popup') {
+    return BottomToast;
+  }
+  return SemiToast;
+};