diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 00000000..c72b6823
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,24 @@
+import axios from 'axios';
+import type { Auth, Logout, Update } from '#/auth';
+
+export const apiAuth = {
+  async login() {
+    const { data } = await axios.post<Auth>('api/v1/auth/login');
+    return data;
+  },
+
+  async refresh() {
+    const { data } = await axios.get<Auth>('api/v1/auth/refresh_token');
+    return data;
+  },
+
+  async logout() {
+    const { data } = await axios.get<Logout>('api/v1/auth/logout');
+    return data;
+  },
+
+  async update() {
+    const { data } = await axios.post<Update>('api/v1/auth/update');
+    return data;
+  },
+};
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 0a4f2a17..df9eb747 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -5,6 +5,7 @@ declare global {
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const afterAll: typeof import('vitest')['afterAll']
   const afterEach: typeof import('vitest')['afterEach']
+  const apiAuth: typeof import('./api/auth')['apiAuth']
   const apiBangumi: typeof import('./api/bangumi')['apiBangumi']
   const apiCheck: typeof import('./api/check')['apiCheck']
   const apiConfig: typeof import('./api/config')['apiConfig']
diff --git a/src/basic/ab-select.vue b/src/basic/ab-select.vue
index a387794b..27734607 100644
--- a/src/basic/ab-select.vue
+++ b/src/basic/ab-select.vue
@@ -11,7 +11,7 @@ import { isObject, isString } from 'lodash';
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: SelectItem;
+    modelValue?: SelectItem | string;
     items: Array<SelectItem | string>;
   }>(),
   {}
diff --git a/src/components.d.ts b/src/components.d.ts
index a506e43d..18bdd69a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -28,8 +28,14 @@ declare module '@vue/runtime-core' {
     AbSwitch: typeof import('./basic/ab-switch.vue')['default']
     AbTopbar: typeof import('./views/ab-topbar.vue')['default']
     BangumiCard: typeof import('./components/bangumi-card.vue')['default']
+    ConfigDownload: typeof import('./views/config-download.vue')['default']
+    ConfigManage: typeof import('./views/config-manage.vue')['default']
+    ConfigManager: typeof import('./views/config-manager.vue')['default']
     ConfigNormal: typeof import('./views/config-normal.vue')['default']
+    ConfigNotification: typeof import('./views/config-notification.vue')['default']
+    ConfigNotificcation: typeof import('./views/config-notificcation.vue')['default']
     ConfigParser: typeof import('./views/config-parser.vue')['default']
+    ConfigProxy: typeof import('./views/config-proxy.vue')['default']
     copy: typeof import('./basic/ab-switch copy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/ab-fold-panel.vue b/src/components/ab-fold-panel.vue
index 646d7bd7..2ca82197 100644
--- a/src/components/ab-fold-panel.vue
+++ b/src/components/ab-fold-panel.vue
@@ -14,7 +14,7 @@ const props = withDefaults(
 
 <template>
   <Disclosure v-slot="{ open }">
-    <div rounded-10px overflow-hidden>
+    <div rounded-10px overflow-hidden h-max>
       <DisclosureButton
         bg-theme-row
         w-full
diff --git a/src/components/ab-setting.vue b/src/components/ab-setting.vue
index c932295f..8098e17a 100644
--- a/src/components/ab-setting.vue
+++ b/src/components/ab-setting.vue
@@ -8,7 +8,7 @@ withDefaults(defineProps<AbSettingProps>(), {
   bottomLine: false,
 });
 
-const data = defineModel('data');
+const data = defineModel<any>('data');
 </script>
 
 <template>
diff --git a/src/pages/config.vue b/src/pages/config.vue
index 95fe7f39..4c83c59d 100644
--- a/src/pages/config.vue
+++ b/src/pages/config.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { getConfig } = useConfigStore();
+const { getConfig, setConfig } = useConfigStore();
 
 onBeforeMount(() => getConfig());
 
@@ -9,8 +9,22 @@ definePage({
 </script>
 
 <template>
-  <div flex="~ wrap" gap-20px>
-    <config-normal grow></config-normal>
-    <config-parser grow></config-parser>
+  <div gap-20px grid="~ cols-2">
+    <config-normal></config-normal>
+
+    <config-parser></config-parser>
+
+    <config-download></config-download>
+
+    <config-manage></config-manage>
+
+    <config-notification></config-notification>
+
+    <config-proxy></config-proxy>
+
+    <div fx-cer justify-end gap-8px col-span-2>
+      <ab-button type="warn" @click="getConfig">Cancel</ab-button>
+      <ab-button @click="setConfig">Apply</ab-button>
+    </div>
   </div>
 </template>
diff --git a/src/store/config.ts b/src/store/config.ts
index 719210d2..1b0ccef4 100644
--- a/src/store/config.ts
+++ b/src/store/config.ts
@@ -55,6 +55,10 @@ export const useConfigStore = defineStore('config', () => {
     config.value = res;
   };
 
+  const setConfig = async () => {
+    const res = await apiConfig.updateConfig(config.value);
+  };
+
   const getSettingGroup = <Tkey extends keyof Config>(key: Tkey) => {
     return computed<Config[Tkey]>(() => config.value[key]);
   };
@@ -62,6 +66,7 @@ export const useConfigStore = defineStore('config', () => {
   return {
     config,
     getConfig,
+    setConfig,
     getSettingGroup,
   };
 });
diff --git a/src/views/config-download.vue b/src/views/config-download.vue
new file mode 100644
index 00000000..6350008c
--- /dev/null
+++ b/src/views/config-download.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import type { Downloader, DownloaderType } from '#/config';
+import type { SettingItem } from '#/components';
+
+const { getSettingGroup } = useConfigStore();
+
+const downloader = getSettingGroup('downloader');
+const downloaderType: DownloaderType = ['qbittorrent'];
+
+const items: SettingItem<Downloader>[] = [
+  {
+    configKey: 'type',
+    label: 'Downloader Type',
+    type: 'select',
+    css: 'w-115px',
+    prop: {
+      items: downloaderType,
+    },
+  },
+  {
+    configKey: 'host',
+    label: 'Host',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: '127.0.0.1:8989',
+    },
+  },
+  {
+    configKey: 'username',
+    label: 'Username',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'admin',
+    },
+  },
+  {
+    configKey: 'password',
+    label: 'Password',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'admindmin',
+    },
+    bottomLine: true,
+  },
+  {
+    configKey: 'path',
+    label: 'Download Path',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: '/downloads/Bangumi',
+    },
+  },
+  {
+    configKey: 'ssl',
+    label: 'SSL',
+    type: 'switch',
+  },
+];
+</script>
+
+<template>
+  <ab-fold-panel title="Downloader Setting">
+    <div space-y-12px>
+      <ab-setting
+        v-for="i in items"
+        :key="i.configKey"
+        v-bind="i"
+        v-model:data="downloader[i.configKey]"
+      ></ab-setting>
+    </div>
+  </ab-fold-panel>
+</template>
diff --git a/src/views/config-manage.vue b/src/views/config-manage.vue
new file mode 100644
index 00000000..f06a53a2
--- /dev/null
+++ b/src/views/config-manage.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { BangumiManage, RenameMethod } from '#/config';
+import type { SettingItem } from '#/components';
+
+const { getSettingGroup } = useConfigStore();
+
+const manage = getSettingGroup('bangumi_manage');
+const renameMethod: RenameMethod = ['normal', 'pn', 'advance', 'none'];
+
+const items: SettingItem<BangumiManage>[] = [
+  {
+    configKey: 'enable',
+    label: 'Enable',
+    type: 'switch',
+  },
+  {
+    configKey: 'rename_method',
+    label: 'Rename Method',
+    type: 'select',
+    prop: {
+      items: renameMethod,
+    },
+    bottomLine: true,
+  },
+  {
+    configKey: 'eps_complete',
+    label: 'Eps complete',
+    type: 'switch',
+  },
+  {
+    configKey: 'group_tag',
+    label: 'Add Group Tag',
+    type: 'switch',
+  },
+  {
+    configKey: 'remove_bad_torrent',
+    label: 'Delete Bad Torrent',
+    type: 'switch',
+  },
+];
+</script>
+
+<template>
+  <ab-fold-panel title="Manage Setting">
+    <div space-y-12px>
+      <ab-setting
+        v-for="i in items"
+        :key="i.configKey"
+        v-bind="i"
+        v-model:data="manage[i.configKey]"
+      ></ab-setting>
+    </div>
+  </ab-fold-panel>
+</template>
diff --git a/src/views/config-notification.vue b/src/views/config-notification.vue
new file mode 100644
index 00000000..51fef8f1
--- /dev/null
+++ b/src/views/config-notification.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { Notification, NotificationType } from '#/config';
+import type { SettingItem } from '#/components';
+
+const { getSettingGroup } = useConfigStore();
+
+const notification = getSettingGroup('notification');
+const notificationType: NotificationType = ['telegram', 'server-chan', 'bark'];
+
+const items: SettingItem<Notification>[] = [
+  {
+    configKey: 'enable',
+    label: 'Enable',
+    type: 'switch',
+    bottomLine: true,
+  },
+  {
+    configKey: 'type',
+    label: 'Type',
+    type: 'select',
+    css: 'w-140px',
+    prop: {
+      items: notificationType,
+    },
+  },
+  {
+    configKey: 'token',
+    label: 'Token',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'token',
+    },
+  },
+  {
+    configKey: 'chat_id',
+    label: 'Chat ID',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'chat id',
+    },
+  },
+];
+</script>
+
+<template>
+  <ab-fold-panel title="Notification Setting">
+    <div space-y-12px>
+      <ab-setting
+        v-for="i in items"
+        :key="i.configKey"
+        v-bind="i"
+        v-model:data="notification[i.configKey]"
+      ></ab-setting>
+    </div>
+  </ab-fold-panel>
+</template>
diff --git a/src/views/config-parser.vue b/src/views/config-parser.vue
index 75ab7d76..2c47e33c 100644
--- a/src/views/config-parser.vue
+++ b/src/views/config-parser.vue
@@ -13,6 +13,7 @@ const parser = getSettingGroup('rss_parser');
 
 const sourceItems: RssParserType = ['mikan'];
 const langs: RssParserLang = ['zh', 'en', 'jp'];
+/** @ts-ignore */
 const parserMethods: RssParserMethodType = ['tmdb', 'mikan', 'parser'];
 
 const items: SettingItem<RssParser>[] = [
diff --git a/src/views/config-proxy.vue b/src/views/config-proxy.vue
new file mode 100644
index 00000000..9c82b6b4
--- /dev/null
+++ b/src/views/config-proxy.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { Proxy, ProxyType } from '#/config';
+import type { SettingItem } from '#/components';
+
+const { getSettingGroup } = useConfigStore();
+
+const proxy = getSettingGroup('proxy');
+const proxyType: ProxyType = ['http', 'https', 'socks5'];
+
+const items: SettingItem<Proxy>[] = [
+  {
+    configKey: 'enable',
+    label: 'Enable',
+    type: 'switch',
+  },
+  {
+    configKey: 'type',
+    label: 'Proxy Type',
+    type: 'select',
+    prop: {
+      items: proxyType,
+    },
+    bottomLine: true,
+  },
+  {
+    configKey: 'host',
+    label: 'Host',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: '127.0.0.1',
+    },
+  },
+  {
+    configKey: 'port',
+    label: 'Port',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: '7890',
+    },
+  },
+  {
+    configKey: 'username',
+    label: 'Username',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'username',
+    },
+  },
+  {
+    configKey: 'password',
+    label: 'Password',
+    type: 'input',
+    prop: {
+      type: 'text',
+      placeholder: 'password',
+    },
+  },
+];
+</script>
+
+<template>
+  <ab-fold-panel title="Proxy Setting">
+    <div space-y-12px>
+      <ab-setting
+        v-for="i in items"
+        :key="i.configKey"
+        v-bind="i"
+        v-model:data="proxy[i.configKey]"
+      ></ab-setting>
+    </div>
+  </ab-fold-panel>
+</template>
diff --git a/tsconfig.json b/tsconfig.json
index b26e902a..efceb5f1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,7 @@
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "types/config.ts"
+    "types/**/*.ts"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/types/auth.ts b/types/auth.ts
new file mode 100644
index 00000000..9c11f7b7
--- /dev/null
+++ b/types/auth.ts
@@ -0,0 +1,13 @@
+export type Auth = {
+  access_token: string;
+  token_type: string;
+  expire: number;
+};
+
+export type Logout = {
+  message: 'logout success';
+};
+
+export type Update = {
+  message: 'update success';
+};