diff --git a/src/renderer/src/components/Popups/SettingsPopup.tsx b/src/renderer/src/components/Popups/SettingsPopup.tsx
index 0d4f194bb3..e39e888664 100644
--- a/src/renderer/src/components/Popups/SettingsPopup.tsx
+++ b/src/renderer/src/components/Popups/SettingsPopup.tsx
@@ -8,8 +8,16 @@ interface Props {
   activeTab?: SettingsTab
 }
 
-const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
+const SettingsPopup: FC<Props> = (props) => {
   const [open, setOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<SettingsTab | undefined>(props.activeTab)
+
+  const onOpen = () => {
+    if (props.activeTab) {
+      setActiveTab(props.activeTab)
+    }
+    setOpen(true)
+  }
 
   const onCancel = () => {
     setOpen(false)
@@ -17,7 +25,7 @@ const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
 
   return (
     <>
-      <div onClick={() => setOpen(true)}>{actionButton}</div>
+      <div onClick={onOpen}>{props.actionButton}</div>
       <GlobalStyle />
       <StyledModal
         transitionName="ant-move-down"
@@ -26,7 +34,7 @@ const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
         open={open}
         onCancel={onCancel}
         footer={null}>
-        <SettingsPage activeTab={activeTab} />
+        <SettingsPage activeTab={activeTab} onTabChange={setActiveTab} />
       </StyledModal>
     </>
   )
@@ -48,7 +56,6 @@ const StyledModal = styled(Modal)`
     padding: 0;
     overflow: hidden;
     border-radius: 12px;
-    /* border: 0.5px solid var(--color-border); */
   }
   .ant-modal-close {
     top: 4px;
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index 9e517250e6..8797389331 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -34,6 +34,7 @@ export type SettingsTab =
 
 interface Props {
   activeTab?: SettingsTab
+  onTabChange?: (tab: SettingsTab) => void
 }
 interface MenuItem {
   label: string
@@ -44,9 +45,10 @@ interface MenuItem {
 
 const SettingsPage: FC<Props> = (props) => {
   const { t } = useTranslation()
-  const [activeTab, setActiveTab] = useState<string>(props.activeTab || 'provider')
   const [collapsed, setCollapsed] = useState(false)
 
+  const activeTab = props.activeTab || 'provider'
+
   const settingMenus = useMemo<MenuItem[]>(
     () => [
       {
@@ -141,7 +143,7 @@ const SettingsPage: FC<Props> = (props) => {
         <Title>{t('settings.title')}</Title>
         <Menu
           mode="inline"
-          onClick={(e) => setActiveTab(e.key)}
+          onClick={(e) => props.onTabChange?.(e.key as SettingsTab)}
           selectedKeys={[activeTab]}
           items={settingMenus.filter((item) => item.enabled)}
           inlineCollapsed={collapsed}
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index ce454a776a..19049f7ca6 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -12,7 +12,6 @@ export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
   padding-top: 15px;
   overflow-y: scroll;
   font-family: Ubuntu;
-  /* background: ${(props) => (props.theme === 'dark' ? 'transparent' : 'var(--color-background-soft)')}; */
 
   &::-webkit-scrollbar {
     display: none;