diff --git a/src/api/host.js b/src/api/host.js
index 9b43599..03cc9cd 100644
--- a/src/api/host.js
+++ b/src/api/host.js
@@ -11,3 +11,15 @@ export const getMyAgency = async () => {
     throw error
   }
 }
+
+// 退出团队
+export const leaveAgency = async (data) => {
+  try {
+    const response = await post(`/team/user/apply`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch leave agency:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/views/HostSettingView.vue b/src/views/HostSettingView.vue
index efa56b3..f8e258b 100644
--- a/src/views/HostSettingView.vue
+++ b/src/views/HostSettingView.vue
@@ -40,11 +40,39 @@
           </div>
           <!-- 按钮 -->
           <div style="display: flex; align-items: center">
-            <div class="leave-btn" @click="leaveAgent">Leave</div>
+            <div class="leave-btn" @click="maskLayerShow = true">Leave</div>
           </div>
         </div>
       </div>
     </div>
+
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <div style="min-height: 100vh; display: flex; justify-content: center; align-items: center">
+        <div
+          style="position: relative; margin: 20% 5%; background-color: white; border-radius: 12px"
+          @click.stop
+        >
+          <div style="padding: 20px 20px 0 20px">
+            <div
+              style="margin: 0; font-size: 18px; font-weight: 600; color: #333; text-align: center"
+            >
+              Tips
+            </div>
+          </div>
+
+          <div style="padding: 16px 20px; text-align: center">
+            <div style="margin: 0 0 8px 0; font-size: 14px; color: #666; line-height: 1.5">
+              The host can only leave the current agent on the 1st and 16th of each month
+            </div>
+          </div>
+
+          <div style="display: flex; gap: 12px; padding: 0 20px 20px 20px">
+            <button class="cancel-btn" @click="maskLayerShow = false">Cancel</button>
+            <button class="confirm-btn" @click="confirmLeave">Confirm</button>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
   </div>
 </template>
 
@@ -53,9 +81,12 @@ import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { showError } from '@/utils/toast.js'
-import { getMyAgency } from '@/api/host'
+import { getMyAgency, leaveAgency } from '@/api/host'
+import maskLayer from '@/components/MaskLayer.vue'
+import { getTeamId } from '@/utils/userStore.js'
 
 const router = useRouter()
+const maskLayerShow = ref(false)
 
 // 用户信息
 const userInfo = ref({})
@@ -66,12 +97,13 @@ const defaultAvatarUrl = (e) => {
   e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
 
-// 方法
-const leaveAgent = () => {
-  if (confirm('Are you sure you want to leave this agency?')) {
-    showError('Leave agency request submitted')
-    // 这里可以添加实际的离开代理商逻辑
+// 确定离开
+const confirmLeave = async () => {
+  console.log('确定离开')
+  const resLeave = await leaveAgency({ reason: 'QUIT', teamId: getTeamId() })
+  if (resLeave.status) {
   }
+  maskLayerShow.value = false
 }
 
 const getMyAgencyInfo = async () => {
@@ -110,6 +142,38 @@ onMounted(() => {
   background-color: #00000010;
 }
 
+.cancel-btn,
+.confirm-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancel-btn {
+  border: 1px solid #e6e6e6;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.confirm-btn {
+  color: rgba(255, 255, 255, 0.8);
+  background: linear-gradient(
+    152deg,
+    rgba(198, 112, 255, 0.6) 7.01%,
+    rgba(119, 38, 255, 0.6) 92.99%
+  );
+}
+
+.cancel-btn:active,
+.confirm-btn:active {
+  transform: scale(0.98);
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;