diff --git a/src/common/components/TitleButton.tsx b/src/common/components/TitleButton.tsx
new file mode 100644
index 0000000..25be94c
--- /dev/null
+++ b/src/common/components/TitleButton.tsx
@@ -0,0 +1,25 @@
+import { Button } from '@tarojs/components';
+import { memo } from 'react';
+
+interface TitleButtonProps {
+  title: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onClick?: () => void;
+}
+
+const TitleButton: React.FC<TitleButtonProps> = memo(
+  ({ title, isSelected, isDisabled, onClick }) => {
+    return (
+      <Button
+        className={`whitespace-nowrap px-2 py-1 text-xs text-[#f19900] shadow-lg ${isSelected ? 'bg-[#f19900] text-white' : 'bg-gray-200 text-white'}`}
+        disabled={isDisabled}
+        onClick={onClick}
+      >
+        {title}
+      </Button>
+    );
+  }
+);
+
+export default TitleButton;
diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index e2d835d..ee46e8b 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -1,3 +1,4 @@
 export { default as CollectionCourse } from './CollectionCourse/CollectionCourse';
 export { default as FloatingWindow } from './FloatingWindow/FloatingWindow';
+export { default as TitleButton } from './TitleButton';
 export { default as VirtualList } from './VirtualList';
diff --git a/src/common/components/titleButton/titleButton.scss b/src/common/components/titleButton/titleButton.scss
deleted file mode 100644
index 4ac1835..0000000
--- a/src/common/components/titleButton/titleButton.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.title-button {
-  width: 20vw;
-  height: 3vh;
-  color: #f19900;
-  font-size: 20rpx;
-}
-
-.title-button.selected {
-  background-color: #f19900;
-  color: white;
-}
-.title-button:disabled {
-  background-color: gray;
-  color: white;
-}
diff --git a/src/common/components/titleButton/titleButton.tsx b/src/common/components/titleButton/titleButton.tsx
deleted file mode 100644
index 1e7c81e..0000000
--- a/src/common/components/titleButton/titleButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Button } from '@tarojs/components';
-
-import '../titleButton/titleButton.scss';
-
-interface TitleButtonProps {
-  title: string;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  onClick?: () => void;
-}
-
-const TitleButton = ({ title, isSelected, isDisabled, onClick }: TitleButtonProps) => {
-  return (
-    <Button
-      className={`title-button ${isSelected ? 'selected' : ''}`}
-      disabled={isDisabled}
-      onClick={onClick}
-    >
-      {title}
-    </Button>
-  );
-};
-
-export default TitleButton;
diff --git a/src/modules/profile/components/Header.tsx b/src/modules/profile/components/Header.tsx
index dbf96d1..0e69f03 100644
--- a/src/modules/profile/components/Header.tsx
+++ b/src/modules/profile/components/Header.tsx
@@ -5,7 +5,7 @@ import React, { memo, useEffect, useMemo, useState } from 'react';
 
 import { get } from '@/common/api/get';
 import { TopBackground } from '@/common/assets/img/personalPage';
-import TitleButton from '@/common/components/titleButton/titleButton';
+import { TitleButton } from '@/common/components';
 import type { ResponseLevel, ResponseUser } from '@/common/types/userTypes';
 
 const Header: React.FC = memo(() => {
@@ -79,12 +79,10 @@ const Header: React.FC = memo(() => {
           />
         </View>
         <View className="flex flex-col gap-2">
-          <View className="flex w-2/5 items-center gap-2">
+          <View className="flex items-center gap-2">
             <Text className="text-md whitespace-nowrap">{user.nickName}</Text>
             {user.selectedTitle !== 'None' && (
-              <View className="w-1/5">
-                <TitleButton title={user.selectedTitle}></TitleButton>
-              </View>
+              <TitleButton title={user.selectedTitle} isSelected></TitleButton>
             )}
             <Text
               className="text-md font-bold text-white"
@@ -107,7 +105,7 @@ const Header: React.FC = memo(() => {
               color="orange"
               strokeWidth={6}
               borderRadius={100}
-              className="w-32"
+              className="w-36"
             ></Progress>
           </View>
         </View>
diff --git a/src/pages/editUser/index.scss b/src/pages/editUser/index.scss
index 3599828..13363f5 100644
--- a/src/pages/editUser/index.scss
+++ b/src/pages/editUser/index.scss
@@ -53,6 +53,8 @@
   //margin-left: 30%;
   margin-right: 25%;
   display: flex;
+  gap: 1vw;
+  align-items: center;
 }
 .editor-nickname {
   width: 4vw;
@@ -80,9 +82,7 @@
   width: 300rpx;
   height: 81rpx;
   background: #f19900;
-}
-.button-container {
-  display: flex;
+  color: white;
 }
 .logout-button {
   margin-top: 10vw;
diff --git a/src/pages/editUser/index.tsx b/src/pages/editUser/index.tsx
index 298e4d4..5c15f38 100644
--- a/src/pages/editUser/index.tsx
+++ b/src/pages/editUser/index.tsx
@@ -10,7 +10,7 @@ import './index.scss';
 import { get } from '@/common/api/get';
 import { fetchQiniuToken, fetchToQiniu } from '@/common/api/qiniu';
 import { editIcon } from '@/common/assets/img/editPersonal';
-import TitleButton from '@/common/components/titleButton/titleButton';
+import { TitleButton } from '@/common/components';
 import type { ResponseUser } from '@/common/types/userTypes';
 import { post } from '@/common/utils/fetch';
 
@@ -92,10 +92,12 @@ const EditUser: React.FC = () => {
       '/users/edit',
       { avatar: avatarUrl, nickname: nickName, using_title: selectedTitle },
       true
-    ).then((res) => console.log(res));
-    void Taro.showToast({
-      icon: 'success',
-      title: '保存成功',
+    ).then((res) => {
+      console.log(res);
+      void Taro.showToast({ icon: 'success', title: '保存成功' });
+      setTimeout(() => {
+        void Taro.switchTab({ url: '/pages/profile/index' });
+      }, 1000);
     });
   };
   const handleTitleSelect = (title: string) => {
@@ -174,22 +176,15 @@ const EditUser: React.FC = () => {
           ></TitleButton>
         </View>
       </View>
-      <View className="button-container">
-        <Button
-          className="cancel-button"
-          onClick={() => {
-            void Taro.switchTab({ url: '/pages/personalPage/index' });
-          }}
-        >
-          取消
-        </Button>
+      <View className="flex">
+        <Button className="cancel-button">取消</Button>
         <Button className="save-button" onClick={handleSave}>
           保存
         </Button>
+        <Button className="logout-button" onClick={handleLogout}>
+          退出登陆
+        </Button>
       </View>
-      <Button className="logout-button" onClick={handleLogout}>
-        退出登陆
-      </Button>
     </View>
   );
 };