diff --git a/src/api/auth.ts b/src/api/auth.ts
index 3ef9267b..da43227d 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -27,14 +27,21 @@ export const apiAuth = {
 
   async logout() {
     const { data } = await axios.get<Logout>('api/v1/auth/logout');
-    return data;
+    return data.message === 'logout success';
   },
 
   async update(username: string, password: string) {
-    const { data } = await axios.post<Update>('api/v1/auth/update', {
-      username,
-      password,
-    });
-    return data;
+    const message = useMessage();
+    if (password.length < 8) {
+      message.error('密码至少8个字符!');
+      return;
+    } else {
+      const { data } = await axios.post<Update>('api/v1/auth/update', {
+        username,
+        password,
+      });
+
+      return data.message === 'update success';
+    }
   },
 };
diff --git a/src/components.d.ts b/src/components.d.ts
index 04b51d44..32678b43 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,8 +12,10 @@ declare module '@vue/runtime-core' {
     AbAdd: typeof import('./basic/ab-add.vue')['default']
     AbBangumiCard: typeof import('./components/ab-bangumi-card.vue')['default']
     AbButton: typeof import('./basic/ab-button.vue')['default']
+    AbChangeAccount: typeof import('./components/ab-change-account.vue')['default']
     AbCheckbox: typeof import('./basic/ab-checkbox.vue')['default']
     AbContainer: typeof import('./components/ab-container.vue')['default']
+    AbEditRule: typeof import('./components/ab-edit-rule.vue')['default']
     AbFoldPanel: typeof import('./components/ab-fold-panel.vue')['default']
     AbInput: typeof import('./basic/ab-input.vue')['default']
     AbLabel: typeof import('./components/ab-label.vue')['default']
diff --git a/src/components/ab-change-account.vue b/src/components/ab-change-account.vue
new file mode 100644
index 00000000..c44f15e9
--- /dev/null
+++ b/src/components/ab-change-account.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const show = defineModel('show', {
+  default: false,
+});
+
+const { user, update } = useAuth();
+</script>
+
+<template>
+  <ab-popup v-model:show="show" title="Change Account" css="w-365px">
+    <div space-y-16px>
+      <ab-label label="Username">
+        <input
+          v-model="user.username"
+          type="text"
+          placeholder="username"
+          ab-input
+        />
+      </ab-label>
+
+      <ab-label label="Password">
+        <input
+          v-model="user.password"
+          type="password"
+          placeholder="password"
+          ab-input
+        />
+      </ab-label>
+
+      <div line></div>
+
+      <div flex="~ justify-end">
+        <ab-button size="small" @click="update">Update</ab-button>
+      </div>
+    </div>
+  </ab-popup>
+</template>
diff --git a/src/components/ab-status-bar.vue b/src/components/ab-status-bar.vue
index 34905a0e..572faf91 100644
--- a/src/components/ab-status-bar.vue
+++ b/src/components/ab-status-bar.vue
@@ -5,7 +5,12 @@ import { AddOne, More } from '@icon-park/vue-next';
 withDefaults(
   defineProps<{
     running: boolean;
-    items: { id: number; icon: any; label: string; handle: () => void }[];
+    items: {
+      id: number;
+      icon: any;
+      label: string;
+      handle?: () => void | Promise<void>;
+    }[];
   }>(),
   {
     running: false,
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 2943d48b..92de1d21 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -12,12 +12,33 @@ export const useAuth = createSharedComposable(() => {
 
   const isLogin = computed(() => auth.value !== '');
 
+  const clearUser = () => {
+    user.username = '';
+    user.password = '';
+  };
+
+  const check = () => {
+    if (user.username === '') {
+      message.warning('Please Enter Username!');
+      return false;
+    }
+
+    if (user.password === '') {
+      message.warning('Please Enter Password!');
+      return false;
+    }
+
+    return true;
+  };
+
   const login = async () => {
     try {
-      const res = await apiAuth.login(user.username, user.password);
-      auth.value = `${res.token_type} ${res.access_token}`;
-      user.username = '';
-      user.password = '';
+      if (check()) {
+        const res = await apiAuth.login(user.username, user.password);
+        auth.value = `${res.token_type} ${res.access_token}`;
+        clearUser();
+        message.success('Login Success!');
+      }
     } catch (err) {
       const error = err as ApiError;
       message.error(error.detail);
@@ -25,7 +46,14 @@ export const useAuth = createSharedComposable(() => {
   };
 
   const logout = async () => {
-    apiAuth.logout();
+    const res = await apiAuth.logout();
+    if (res) {
+      clearUser();
+      auth.value = '';
+      message.success('Logout Success!');
+    } else {
+      message.error('Logout Fail!');
+    }
   };
 
   const refresh = () => {
@@ -34,7 +62,14 @@ export const useAuth = createSharedComposable(() => {
 
   const update = async () => {
     const res = await apiAuth.update(user.username, user.password);
-    console.log(res);
+    if (res) {
+      message.success('Update Success!');
+      clearUser();
+    } else if (res === false) {
+      message.error('Update Fail!');
+    } else {
+      user.password = '';
+    }
   };
 
   return {
diff --git a/src/views/ab-sidebar.vue b/src/views/ab-sidebar.vue
index 2b9f8760..09a508af 100644
--- a/src/views/ab-sidebar.vue
+++ b/src/views/ab-sidebar.vue
@@ -22,6 +22,7 @@ const props = withDefaults(
 const show = ref(props.open);
 const toggle = () => (show.value = !show.value);
 const route = useRoute();
+const { logout } = useAuth();
 
 const items = [
   {
@@ -133,6 +134,7 @@ const items = [
       transition-colors
       hover:bg="#F1F5FA"
       hover:text="#2A1C52"
+      @click="logout"
     >
       <Logout :size="24" />
       <div text-h2>Logout</div>