diff --git a/src/api/form.ts b/src/api/form.ts
index 560d077..33c8960 100644
--- a/src/api/form.ts
+++ b/src/api/form.ts
@@ -1,17 +1,20 @@
-import { api } from './instance'
+import { api, apiAuth } from './instance'
 
 export const sendJoinSZTeamForm = async ({
   discordId,
+  joinTeam,
   content,
 }: {
   discordId: string
+  joinTeam: string
   content: string
 }) => {
-  return await api({
+  return await apiAuth({
     method: 'POST',
-    url: `/joinSZTeamForm`,
+    url: `/website/joinSZTeamForm`,
     data: {
       discordId,
+      joinTeam,
       content,
     },
   })
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index f242b7c..779e6c2 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,36 +1,43 @@
 <template>
-    <n-button class="base-button" secondary :style="computedStyle">
-        <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
-            <slot :name="slot"></slot>
-        </template>
-    </n-button>
+  <n-button
+    class="base-button"
+    secondary
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(slot, index) of Object.keys($slots)"
+      :key="index"
+      v-slot:[slot]
+    >
+      <slot :name="slot"></slot>
+    </template>
+  </n-button>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { NButton } from 'naive-ui'
 
-
 export interface BaseButtonProps {
-    border?: boolean,
-    borderColor?: string,
+  border?: boolean
+  borderColor?: string
 }
 
 const props = withDefaults(defineProps<BaseButtonProps>(), {
-    border: false,
-    borderColor: 'var(--base)',
+  border: false,
+  borderColor: 'var(--base)',
 })
 
 const computedStyle = computed(() => {
-    return {
-        border: props.border ? `1px solid ${props.borderColor}` : undefined,
-    }
+  return {
+    border: props.border ? `1px solid ${props.borderColor}` : undefined,
+  }
 })
-
 </script>
 
 <style scoped lang="postcss">
 .base-button {
-    @apply rounded-normal;
+  @apply rounded-normal;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index ed69bbe..545e059 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -1,7 +1,7 @@
 import { get } from 'lodash-es'
 import { useAppStore } from '@/stores/app'
 import dayjs from 'dayjs'
-import { h } from 'vue'
+import { h, type Component, type Ref } from 'vue'
 import { NIcon } from 'naive-ui'
 
 export const getHost = (hostName: string) => {
@@ -31,3 +31,12 @@ export const renderIcon = (icon: Component, props: any = null) => {
     })
   }
 }
+
+export const checkForm = async (formRef: any) => {
+  return new Promise((resolve) => {
+    formRef.validate((errors: any) => {
+      if (errors) return resolve(false)
+      resolve(true)
+    })
+  })
+}
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index ad2ca9a..0e2e8d4 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -31,6 +31,6 @@ import Topic from './components/Topic/Topic.vue'
 }
 
 .section-max-w {
-  @apply max-w-[800px] px-[50px] m-auto;
+  @apply max-w-[800px] viewPx m-auto;
 }
 </style>
diff --git a/src/views/Home/components/TeamIntro/TeamIntro.vue b/src/views/Home/components/TeamIntro/TeamIntro.vue
index 15cfc1d..c656241 100644
--- a/src/views/Home/components/TeamIntro/TeamIntro.vue
+++ b/src/views/Home/components/TeamIntro/TeamIntro.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tram-intro">
+  <div class="team-intro">
     <SectionTitle title="Development Team">
       <template #prefix>💻</template>
     </SectionTitle>
@@ -10,8 +10,6 @@
 <script setup lang="ts">
 import SectionTitle from '@/components/Title/SectionTitle.vue'
 import TeamMembers from './components/TeamMembers.vue'
-
-import { Code } from '@vicons/carbon'
 </script>
 
 <style scoped lang="postcss"></style>
diff --git a/src/views/SZTeam/components/JoinTeamForm.vue b/src/views/SZTeam/components/JoinTeamForm.vue
index 31c6365..08c738f 100644
--- a/src/views/SZTeam/components/JoinTeamForm.vue
+++ b/src/views/SZTeam/components/JoinTeamForm.vue
@@ -2,15 +2,22 @@
   <section>
     <n-form
       ref="formRef"
+      :model="formData"
+      :rules="formRules"
       class="text-left"
       @submit.prevent
       @keypress.self.enter.prevent
     >
-      <n-form-item label="申請加入團隊">
-        <n-select :options="teamOptions" :render-label="renderLabel" />
+      <n-form-item label="申請加入團隊" path="joinTeam">
+        <n-select
+          v-model:value="formData.joinTeam"
+          :options="teamOptions"
+          :render-label="renderLabel"
+        />
       </n-form-item>
-      <n-form-item label="自我介紹 (可使用 discord 語法)">
+      <n-form-item label="自我介紹 (可使用 discord 語法)" path="content">
         <n-input
+          v-model:value="formData.content"
           type="textarea"
           :autosize="{ minRows: 5 }"
           :placeholder="introPlaceholder"
@@ -18,17 +25,25 @@
       </n-form-item>
     </n-form>
 
-    <BaseButton type="info" border @clcik="onSubmit">
-      <template #icon>
+    <BaseButton type="info" border @click="onSubmit" :disabled="!user.sz">
+      <template #icon v-if="user.sz">
         <MailAll />
       </template>
-      送出申請
+      {{ user.sz ? '送出申請' : '請先登入' }}
     </BaseButton>
   </section>
 </template>
 
 <script setup lang="ts">
-import { NInput, NSelect, NForm, NFormItem, NIcon } from 'naive-ui'
+import {
+  NInput,
+  NSelect,
+  NForm,
+  NFormItem,
+  NIcon,
+  useMessage,
+  type FormRules,
+} from 'naive-ui'
 import {
   teamTypesConfig,
   teamTypeIconConfig,
@@ -36,14 +51,19 @@ import {
 } from '@/configs/team'
 import { map, find, get } from 'lodash-es'
 import BaseButton from '@/components/BaseButton.vue'
-import { h, type Component, type VNodeChild } from 'vue'
+import {
+  h,
+  type Component,
+  type VNodeChild,
+  computed,
+  ref,
+  reactive,
+} from 'vue'
 import { sendJoinSZTeamForm } from '@/api/form'
-
+import { storeToRefs } from 'pinia'
 import { MailAll } from '@vicons/carbon'
 import { useOauthStore } from '@/stores/oauth'
-import { computed } from 'vue'
-import { reactive } from 'vue'
-import { ref } from 'vue'
+import { checkForm } from '@/utils/helper'
 
 interface TeamOption {
   label: string
@@ -53,11 +73,18 @@ interface TeamOption {
 }
 
 const oauthStore = useOauthStore()
+const message = useMessage()
 
-const formData = reactive({})
-
+const formData = reactive({
+  joinTeam: null,
+  content: null,
+})
+const { user } = storeToRefs(oauthStore)
 const formRules = computed(() => {
-  const rules = {}
+  const rules = {
+    joinTeam: { required: true, trigger: ['change'] },
+    content: { required: true, trigger: ['input'] },
+  }
   return rules
 })
 
@@ -92,13 +119,21 @@ const introPlaceholder = '請輸入自我介紹，'
 
 const submitData = computed(() => {
   return {
-    discordId: get(oauthStore.user, 'discord.id'),
-    content: '',
+    // discordId: get(user.value, 'sz.discordId'),
+    joinTeam: formData.joinTeam,
+    content: formData.content,
   }
 })
 
 const onSubmit = async () => {
-  await sendJoinSZTeamForm(submitData.value)
+  if (!(await checkForm(formRef.value))) return
+  const [, errMsg]: any = await sendJoinSZTeamForm(submitData.value)
+  if (errMsg) {
+    console.log(errMsg.message || errMsg)
+    message.error(errMsg.message || errMsg)
+    return
+  }
+  message.success('✅ 送出申請成功！')
 }
 </script>