diff --git a/src/pages/components/ScriptMenuList/index.tsx b/src/pages/components/ScriptMenuList/index.tsx
index 27448deb7..96ff474b7 100644
--- a/src/pages/components/ScriptMenuList/index.tsx
+++ b/src/pages/components/ScriptMenuList/index.tsx
@@ -210,6 +210,7 @@ const ListMenuItem = React.memo(
 
     return (
       <Collapse
+        className={"popup-list-item"}
         activeKey={isActive ? item.uuid : undefined}
         onChange={(_, keys) => {
           setIsActive(keys.includes(item.uuid));
diff --git a/src/pages/components/layout/PopupLayout.tsx b/src/pages/components/layout/PopupLayout.tsx
index cb7e1c35e..4baac7446 100644
--- a/src/pages/components/layout/PopupLayout.tsx
+++ b/src/pages/components/layout/PopupLayout.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import "./index.css";
+import "./popup.css";
 import { ConfigProvider } from "@arco-design/web-react";
 import { arcoLocale } from "@App/locales/arco";
 import i18n from "@App/locales/locales";
diff --git a/src/pages/components/layout/popup.css b/src/pages/components/layout/popup.css
new file mode 100644
index 000000000..69d9b82ec
--- /dev/null
+++ b/src/pages/components/layout/popup.css
@@ -0,0 +1,65 @@
+.popup-div .arco-collapse-item-header {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    line-height: 125%;
+}
+
+.popup-list-item .arco-collapse-item-header{
+    padding: 4px 12px;
+    line-height: initial;
+}
+
+.popup-list-item .arco-avatar-image {
+    width: 16px;
+    height: 16px;
+}
+
+.popup-list-item .arco-space-item:last-child {
+    margin-right: 16px;
+}
+
+.popup-list-item .arco-avatar-square {
+    display: inline-flex !important;
+    flex-direction: column !important;
+    align-items: center;
+    place-content: center;
+    place-items: center;
+    place-self: center;
+    margin-right: 4px !important;
+}
+
+.popup-list-item .arco-space-item {
+    display: inline-flex !important;
+}
+
+
+.popup-list-item .arco-collapse-item-active .arco-collapse-item-header-title {
+    font-weight: unset !important;
+}
+
+.popup-list-item .arco-collapse-item-content-box * {
+    line-height: initial;
+}
+
+.popup-list-item .arco-collapse-item-content-box .arco-btn-size-default {
+    height: 24px;
+    padding: 0 6px;
+    font-size: 12px;
+}
+
+.popup-list-item .arco-switch-small {
+    min-width: 28px;
+    height: 14px;
+    line-height: 14px;
+}
+
+.popup-list-item .arco-switch-small .arco-switch-dot {
+    border-radius: 6px;
+    width: 10px;
+    height: 10px;
+    left: 2px;
+}
+
+.popup-list-item .arco-switch-small.arco-switch-checked .arco-switch-dot {
+    left: calc(100% - 12px);
+}
diff --git a/src/pages/popup/App.tsx b/src/pages/popup/App.tsx
index 33ffde740..02d009322 100644
--- a/src/pages/popup/App.tsx
+++ b/src/pages/popup/App.tsx
@@ -401,6 +401,7 @@ function App() {
     <>
       <PopupWarnings isBlacklist={isBlacklist} />
       <Card
+        className={"popup-div"}
         size="small"
         title={
           <div className="tw-flex tw-justify-between">
@@ -496,6 +497,7 @@ function App() {
           }
         />
         <Collapse
+          className={"popup-body"}
           bordered={false}
           activeKey={collapseActiveKey}
           onChange={(_, keys) => {
@@ -535,7 +537,7 @@ function App() {
             />
           </CollapseItem>
         </Collapse>
-        <div className="tw-flex tw-flex-row arco-card-header !tw-h-6">
+        <div className="popup-footer tw-flex tw-flex-row arco-card-header !tw-h-6">
           {versionCompare(ExtVersion, checkUpdate.version) === VersionCompare.LESS ? (
             <Tooltip content={`${t("popup.new_version_available")} (v${checkUpdate.version})`}>
               <span