diff --git a/apps/challenges/models.py b/apps/challenges/models.py
index a07b475e9f..dfb105235e 100644
--- a/apps/challenges/models.py
+++ b/apps/challenges/models.py
@@ -36,7 +36,7 @@ def __init__(self, *args, **kwargs):
         self._original_evaluation_script = self.evaluation_script
         self._original_approved_by_admin = self.approved_by_admin
 
-    title = models.CharField(max_length=100, db_index=True)
+    title = models.CharField(max_length=100, db_index=True, unique=True)
     short_description = models.TextField(null=True, blank=True)
     description = models.TextField(null=True, blank=True)
     terms_and_conditions = models.TextField(null=True, blank=True)
@@ -100,7 +100,7 @@ def __init__(self, *args, **kwargs):
         default=8, verbose_name="EC2 storage (GB)"
     )
     ephemeral_storage = models.PositiveIntegerField(
-        default=20, verbose_name="Ephemeral Storage (GB)"
+        default=21, verbose_name="Ephemeral Storage (GB)"
     )
     featured = models.BooleanField(
         default=False, verbose_name="Featured", db_index=True
diff --git a/apps/challenges/views.py b/apps/challenges/views.py
index 808aa28c30..4f8c0215c8 100644
--- a/apps/challenges/views.py
+++ b/apps/challenges/views.py
@@ -4449,6 +4449,11 @@ def create_or_update_challenge(request, challenge_host_team_pk):
 
     challenge_pk = request.data.get("id")
     if not challenge_pk:
+        if Challenge.objects.filter(title=request.data.get("title")).exists():
+            response_data = {
+                "error": "The challenge title already exists. Please choose a different title."
+            }
+            return Response(response_data, status=status.HTTP_400_BAD_REQUEST)
         data = request.data.copy()
         data["is_docker_based"] = True
         data["enable_forum"] = True
@@ -4481,6 +4486,11 @@ def create_or_update_challenge(request, challenge_host_team_pk):
             }
             return Response(response_data, status=status.HTTP_404_NOT_FOUND)
         challenge.title = request.data.get("title")
+        if Challenge.objects.filter(title=challenge.title).exclude(id=challenge_pk).exists():
+            response_data = {
+                "error": "The challenge title already exists. Please choose a different title."
+            }
+            return Response(response_data, status=status.HTTP_400_BAD_REQUEST)
         challenge.short_description = request.data.get("short_description")
         challenge.description = request.data.get("description")
         challenge.evaluation_details = request.data.get("evaluation_details")
@@ -4489,7 +4499,11 @@ def create_or_update_challenge(request, challenge_host_team_pk):
         challenge.leaderboard_description = request.data.get("leaderboard_description")
         challenge.start_date = datetime.strptime(request.data.get("start_date"), "%Y-%m-%dT%H:%M:%S%z")
         challenge.end_date = datetime.strptime(request.data.get("end_date"), "%Y-%m-%dT%H:%M:%S%z")
-        challenge.image = simple_image_url(request.data.get("image"))
+        image = request.data.get("image")
+        if isinstance(image, str):
+            challenge.image = simple_image_url(image)
+        else:
+            challenge.image = image
         published = request.data.get("published")
         if published is not None:
             published = published.lower() == 'true'
@@ -4533,6 +4547,12 @@ def create_or_update_challenge_phase(request, challenge_host_team_pk, challenge_
     challenge_phase_pk = request.data.get("id")
     if not challenge_phase_pk:
         try:
+            codename = request.data["codename"]
+            if ChallengePhase.objects.filter(challenge=challenge, codename=codename).exists():
+                response_data = {
+                    "error": f"A ChallengePhase with the codename '{codename}' already exists for the given challenge."
+                }
+                return Response(response_data, status=status.HTTP_400_BAD_REQUEST)
             with transaction.atomic():
                 request.data["slug"] = "{}-{}-{}".format(
                     challenge.title.split(" ")[0].lower(),
@@ -4585,6 +4605,13 @@ def create_or_update_challenge_phase(request, challenge_host_team_pk, challenge_
         except ChallengePhase.DoesNotExist:
             response_data = {"error": "Challenge Phase does not exist"}
             return Response(response_data, status=status.HTTP_400_BAD_REQUEST)
+        codename = request.data["codename"]
+        if ChallengePhase.objects.filter(challenge=challenge, codename=codename).exclude(id=challenge_phase_pk).exists():
+            response_data = {
+                "error": f"A ChallengePhase with the codename '{codename}' already exists for the given challenge."
+            }
+            return Response(response_data, status=status.HTTP_400_BAD_REQUEST)
+        challenge_phase.codename = codename
         challenge_phase.name = request.data.get("name")
         challenge_phase.description = request.data.get("description")
         challenge_phase.leaderboard_public = request.data.get("leaderboard_public")
@@ -4593,7 +4620,6 @@ def create_or_update_challenge_phase(request, challenge_host_team_pk, challenge_
         challenge_phase.start_date = datetime.strptime(request.data.get("start_date"), "%Y-%m-%dT%H:%M:%S%z")
         challenge_phase.end_date = datetime.strptime(request.data.get("start_date"), "%Y-%m-%dT%H:%M:%S%z")
         challenge_phase.test_annotation_file = request.data.get("test_annotation_file")
-        challenge_phase.codename = request.data.get("codename")
         challenge_phase.max_submissions_per_day = request.data.get("max_submissions_per_day")
         challenge_phase.max_submissions_per_month = request.data.get("max_submissions_per_month")
         challenge_phase.max_submissions = request.data.get("max_submissions")
diff --git a/apps/jobs/sender.py b/apps/jobs/sender.py
index 6e6c98bf6b..5561c391b0 100644
--- a/apps/jobs/sender.py
+++ b/apps/jobs/sender.py
@@ -52,7 +52,7 @@ def get_or_create_sqs_queue(queue_name, challenge=None):
             )
 
     if queue_name == "":
-        queue_name = "evalai_submission_queue"
+        queue_name = "arena"
 
     # Check if the queue exists. If not, then create one.
     try:
diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index e32a2eae3d..4b647acd55 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -29,6 +29,7 @@ const toolbarConfig = {
 };
 const editorConfig = {
   placeholder: '',
+  maxLength: 5000,
   MENU_CONF: {
     uploadImage: {
       server: import.meta.env.VITE_APP_BASE_API + '/api/web/upload_image/',
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ce36dd492b..eba3d81c66 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -207,9 +207,7 @@ export default {
   },
   participate: {
     continue: 'Continue',
-    accept_text1: 'please accept the',
-    accept_text2: 'rules and terms',
-    accept_text3: 'in order to participate.',
+    accept_text: 'Please read and accept the rules and conditions.',
     accept_label: 'I accept the terms and conditions.',
   },
   submission: {
@@ -282,17 +280,17 @@ export default {
     editChall: 'Edit Challenge',
     title: 'Title',
     titlePH: 'Autonomous Driving Algorithms Challenge',
-    shortDesc: 'Short_description',
+    shortDesc: 'Short description',
     shortDescPH: 'Autonomous Driving Algorithm Challenge for each submission',
     desc: 'Description',
-    evaluation: 'Evaluation_details',
-    termsConditions: 'Terms_and_conditions',
+    evaluation: 'Evaluation details',
+    termsConditions: 'Terms and conditions',
     image: 'Image',
     imagePH: 'Please upload logo jpg format is supported',
-    SubmiGuide: 'Submission_guidelines',
-    lbDesc: 'Leaderboard_description',
-    startDate: 'Start_date',
-    endDate: 'End_date',
+    SubmiGuide: 'Submission guidelines',
+    lbDesc: 'Leaderboard description',
+    startDate: 'Start date',
+    endDate: 'End date',
     published: 'Published',
     createSuccess: 'Contest creation success',
     updateSuccess: 'Challenge updated successfully!',
@@ -302,18 +300,18 @@ export default {
     editPhase: 'Edit Phase',
     name: 'Name',
     desc: 'Description',
-    lbPublic: 'Leaderboard_public',
-    isPublic: 'Is_public',
-    isSubmiPublic: 'Is_submission_public',
-    startDate: 'Start_date',
-    endDate: 'End_date',
+    lbPublic: 'Leaderboard public',
+    isPublic: 'Is public',
+    isSubmiPublic: 'Is submission public',
+    startDate: 'Start date',
+    endDate: 'End date',
     codename: 'Codename',
-    maxSubmiPerDay: 'Max_submissions_per_day',
-    maxSubmiPerMonth: 'Max_submissions_per_month',
-    maxSubmissions: 'Max_submissions',
-    isRestrictedToSelectOneSubmission: 'Is_restricted_to_select_one_submission',
-    isPartialSubmissionEvaluationEnabled: 'Is_partial_submission_evaluation_enabled',
-    allowedSubmissionFileTypes: 'Allowed_submission_file_types',
+    maxSubmiPerDay: 'Max submissions perday',
+    maxSubmiPerMonth: 'Max submissions per month',
+    maxSubmissions: 'Max submissions',
+    isRestrictedToSelectOneSubmission: 'Is restricted to select onesubmission',
+    isPartialSubmissionEvaluationEnabled: 'Is partial submission evaluation enabled',
+    allowedSubmissionFileTypes: 'Allowed submission file types',
     createSuccess: 'Phase creation successfully!',
     updateSuccess: 'Phase updated successfully!',
   },
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 3bb76317b8..1079a4b6cb 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -205,9 +205,7 @@ export default {
   },
   participate: {
     continue: '继续',
-    accept_text1: '请接受',
-    accept_text2: '规则和条款',
-    accept_text3: '才能参加比赛。',
+    accept_text: '请阅读并接受规则和条件。',
     accept_label: '我接受条款和条件',
   },
   submission: {
diff --git a/frontend/src/permission.js b/frontend/src/permission.js
index 24a522c165..f4d4249d6c 100644
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@@ -23,9 +23,6 @@ router.beforeEach((to, from, next) => {
               .then((res) => {
                 next({ path: '/' });
               })
-              .catch((err) => {
-                next({ path: '/' });
-              });
           });
       } else if (to.path.startsWith('/host')) {
         if (store.state.isHost === 1) {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 9d256e35c8..403792e4e8 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -93,7 +93,7 @@ export default createStore({
             removeToken();
             removeJwtToken();
             commit('clearStore');
-            reject(error);
+            resolve();
           });
       });
     },
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 2d06fe1344..3ab94b99f9 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -393,6 +393,29 @@ body {
   }
 }
 
+// 折叠面板
+.el-collapse.oa-collapse {
+  border: none;
+  margin-top: -16px;
+  // margin-bottom: 24px;
+  --el-collapse-border-color: rgba(67, 77, 96, 0.6);
+  .el-collapse-item__header {
+    font-size: 14px;
+    font-weight: 700;
+  }
+  .el-collapse-item__wrap {
+    border-bottom-color: rgba(67, 77, 96, 0.6);
+  }
+  .el-collapse-item:nth-last-child(1) {
+    .el-collapse-item__wrap {
+      border-bottom: none;
+    }
+    .el-collapse-item__header {
+      border-bottom-color: transparent;
+    }
+  }
+}
+
 // 已选择项tag框
 .custom-selected-tag {
   &.el-tag {
diff --git a/frontend/src/views/challenge/Detail.vue b/frontend/src/views/challenge/Detail.vue
index 94e04675ad..eb0555216e 100644
--- a/frontend/src/views/challenge/Detail.vue
+++ b/frontend/src/views/challenge/Detail.vue
@@ -19,7 +19,10 @@
           <overview :detailInfo="detailInfo" :phases="phases"></overview>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.participate')" name="participate" v-if="!teamDetail">
-          <participate :challengeId="challengeId" @callback="getPartTeam('submission')" @openTerm="openTerm"></participate>
+          <participate
+            :challengeId="challengeId"
+            :termsConditions="detailInfo.terms_and_conditions"
+            @callback="getPartTeam('submission')"></participate>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.submission')" name="submission" v-else>
           <submission
@@ -81,13 +84,6 @@ const getPartTeam = (tabId) => {
   });
 };
 
-const openTerm = () => {
-  activeName.value = 'overview';
-  setTimeout(() => {
-    let dom = document.querySelector('#term');
-    dom && dom.scrollIntoView();
-  }, 200);
-};
 const clearPartTeam = (tabId) => {
   teamDetail.value = undefined;
   activeName.value = tabId;
diff --git a/frontend/src/views/challenge/Leaderboard.vue b/frontend/src/views/challenge/Leaderboard.vue
index c6d173525d..5092cbf83b 100644
--- a/frontend/src/views/challenge/Leaderboard.vue
+++ b/frontend/src/views/challenge/Leaderboard.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="title mb24">{{ $t('challenge.leaderboard') }}</div>
-  <div class="mb24">
-    <div v-html="description" class="editor-content-view"></div>
-  </div>
+  <el-collapse :model-value="['1']" class="oa-collapse">
+    <el-collapse-item :title="$t('challenge.leaderboard')" name="1">
+      <div v-html="description" class="editor-content-view"></div>
+    </el-collapse-item>
+  </el-collapse>
 
   <div class="flex-center mb16">
     <el-select v-model="curSplitId" :placeholder="$t('submission.phasePH')" @change="splitChange" style="width: 360px" class="mr16">
       <el-option v-for="item in splits" :key="item.id" :label="getSplitLabel(item)" :value="item.id" />
     </el-select>
-    <!-- <el-checkbox :label="$t('leaderboard.orderScore')" name="type" v-model="isByScore" @change="splitChange"></el-checkbox> -->
 
     <el-select v-model="curOrderBy" :placeholder="$t('submission.orderPH')" @change="splitChange" style="width: 360px" class="mr16">
       <el-option v-for="item in labels" :key="item" :label="item" :value="item" />
@@ -18,7 +18,6 @@
   <el-table :data="leaderboardList" stripe style="width: 100%" header-cell-class-name="thBg">
     <el-table-column fixed prop="rank" :label="$t('leaderboard.rank')" width="80" />
     <el-table-column fixed sortable prop="submission__participant_team__team_name" :label="$t('leaderboard.team')" width="250" />
-    <!-- <el-table-column sortable prop="filtering_score" :label="$t('leaderboard.score')" /> -->
     <el-table-column sortable :label="label" v-for="(label, i) in labels" :key="label" width="280">
       <template #default="{ row }">
         {{ row.result[i] }}
@@ -45,7 +44,6 @@ import { formatTime } from '@/utils/tool';
 const props = defineProps(['challengeId', 'description']);
 const curSplitId = ref('');
 const splits = ref([]);
-const isByScore = ref(false);
 const curOrderBy = ref('');
 const labels = ref([
   'Driving score',
diff --git a/frontend/src/views/challenge/Overview.vue b/frontend/src/views/challenge/Overview.vue
index c4431847a6..9e1ad8f78a 100644
--- a/frontend/src/views/challenge/Overview.vue
+++ b/frontend/src/views/challenge/Overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-collapse v-model="activeNames">
+  <el-collapse v-model="activeNames" class="oa-collapse">
     <el-collapse-item :title="$t('overview.view.title')" name="1">
       <div v-html="detailInfo.description" class="editor-content-view"></div>
     </el-collapse-item>
@@ -67,20 +67,4 @@ const props = defineProps({
   }
 }
 
-.el-collapse {
-  border: none;
-  margin-top: -16px;
-}
-:deep(.el-collapse-item__header) {
-  font-size: 14px;
-  font-weight: 700;
-}
-:deep(.el-collapse-item__wrap) {
-  border-bottom-color: rgba(67, 77, 96, 0.6);
-}
-.el-collapse-item:nth-last-child(1) {
-  :deep(.el-collapse-item__wrap) {
-    border-bottom: none;
-  }
-}
 </style>
diff --git a/frontend/src/views/challenge/Participate.vue b/frontend/src/views/challenge/Participate.vue
index a11353633d..3e80a650e8 100644
--- a/frontend/src/views/challenge/Participate.vue
+++ b/frontend/src/views/challenge/Participate.vue
@@ -15,9 +15,9 @@
         @size-change="getTeams"
         @current-change="getTeams"
         class="mt24 oa-pagination" />
-      <el-button type="primary" size="large" class="long-button mt24" :disabled="!activeId" @click="participate">{{
-        $t('participate.continue')
-      }}</el-button>
+      <el-button type="primary" size="large" class="long-button mt24" :disabled="!activeId" @click="participate">
+        {{ $t('participate.continue') }}
+      </el-button>
     </div>
     <div class="team_ul nodata" v-else>
       <img src="@/assets/images/no_data.png" alt="" />
@@ -50,16 +50,18 @@
   <el-dialog
     v-model="acceptDialog.visible"
     :title="$t('overview.term.title')"
-    width="500"
+    width="660"
     class="oa-dialog"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     align-center>
-    <div class="accept-con">
-      {{ $t('participate.accept_text1') }} <span @click="goTermDetail">{{ $t('participate.accept_text2') }}</span>
-      {{ $t('participate.accept_text3') }}
+    <div class="accept-title mb24">
+      {{ $t('participate.accept_text') }}
     </div>
-    <el-checkbox v-model="acceptDialog.accept" :label="$t('participate.accept_label')" />
+    <div class="accept-con small-scrollbar">
+      <div v-html="termsConditions" class="editor-content-view"></div>
+    </div>
+    <el-checkbox v-model="acceptDialog.accept" :label="$t('participate.accept_label')" size="small" />
     <template #footer>
       <div class="between">
         <div></div>
@@ -84,7 +86,7 @@ const { t } = useI18n();
 const router = useRouter();
 const store = useStore();
 
-const props = defineProps(['challengeId']);
+const props = defineProps(['challengeId', 'termsConditions']);
 const emit = defineEmits(['callback', 'openTerm']);
 const pager = reactive({
   total: 0,
@@ -151,11 +153,6 @@ const confirmParticipate = () => {
   });
 };
 
-const goTermDetail = () => {
-  acceptDialog.visible = false;
-  emit('openTerm');
-};
-
 const goLogin = () => {
   router.push('/auth/login');
 };
@@ -248,15 +245,22 @@ const goLogin = () => {
   align-items: center;
   justify-content: center;
 }
-.accept-con {
+.accept-title {
   color: #fff;
-  margin-bottom: 10px;
   span {
     color: var(--el-color-primary);
     cursor: pointer;
     text-decoration: underline;
   }
 }
+.accept-con {
+  max-height: 400px;
+  background: #212733;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px dashed #555f6e;
+  padding: 16px;
+  margin-bottom: 20px;
+}
 .el-checkbox :deep(.el-checkbox__label) {
   color: #7f889a;
   font-size: 12px;
diff --git a/frontend/src/views/challenge/Submission.vue b/frontend/src/views/challenge/Submission.vue
index 70e9ebbfc9..1f4c405533 100644
--- a/frontend/src/views/challenge/Submission.vue
+++ b/frontend/src/views/challenge/Submission.vue
@@ -1,189 +1,180 @@
 <template>
-  <div class="title mb24">{{ $t('submission.guidelines') }}</div>
-  <div class="mb24">
-    <div v-html="guidelines" class="editor-content-view"></div>
-  </div>
-
-  <div v-if="!approved">
-    <div class="title mb24">
-      <span>{{ $t('submission.deregisterChallenge') }}:</span>
-      <el-button type="primary" @click="deregister" class="ml16">{{ $t('submission.deregister') }}</el-button>
-    </div>
-    <div class="describe mb24">{{ $t('submission.notApproved') }}</div>
-  </div>
-
-  <template v-else>
-    <div class="title mb24 mt32">{{ $t('submission.submission') }}</div>
-    <div class="mb24">{{ $t('submission.selectPhase') }}</div>
-
-    <div class="selected-bar btw mb16" v-if="curPhase.id">
-      <div>
-        <span class="label mr8">{{ $t('submission.todayRemain') }}:</span>
-        <span class="value">{{ curPhase.max_submissions_per_day }}</span>
-      </div>
-      <div>
-        <span class="label mr8">{{ $t('submission.monthRemain') }}:</span>
-        <span class="value">{{ curPhase.max_submissions_per_month }}</span>
-      </div>
-      <div>
-        <span class="label mr8">{{ $t('submission.totalRemain') }}:</span>
-        <span class="value">{{ curPhase.max_submissions }}</span>
-      </div>
-    </div>
-    <div class="selected-bar mb16" v-else>
-      <span>—</span>
-    </div>
-    <div class="phase-box mb32" :class="{ more: phases.length > 1 }">
-      <div class="phase-card" v-for="item in phases" :key="item" @click="handleSelect(item)">
-        <div class="flex-between mb16">
-          <div class="second-title">{{ item.name }}</div>
-          <el-radio class="custom-radio" :model-value="curPhase.id" :label="item.id"></el-radio>
-        </div>
-        <div class="row mb16">
-          <span class="label mr8">{{ $t('submission.startDate') }}:</span>
-          <span class="value">{{ formatTime(item.start_date) }}</span>
-        </div>
-        <div class="row">
-          <span class="label mr8">{{ $t('submission.endDate') }}:</span>
-          <span class="value">{{ formatTime(item.end_date) }}</span>
+  <el-collapse :model-value="['1', '2', '3', '4']" class="oa-collapse">
+    <el-collapse-item :title="$t('submission.guidelines')" name="1">
+      <div v-html="guidelines" class="editor-content-view"></div>
+      <div v-if="!approved" class="mt24">
+        <div class="title mb24">
+          <span>{{ $t('submission.deregisterChallenge') }}:</span>
+          <el-button type="primary" @click="deregister" class="ml16">{{ $t('submission.deregister') }}</el-button>
         </div>
+        <div class="describe mb24">{{ $t('submission.notApproved') }}</div>
       </div>
-    </div>
-    <div v-if="curPhase.id">
-      <div class="title mb24">{{ $t('submission.instruction') }}</div>
-      <div class="instr_con mb32">
-        <div class="subTitle mb16">1. {{ $t('submission.install') }}</div>
-        <div class="flex-center mb24">
-          <span class="command ellipsis">$ {{ commandTxt1 }}</span>
-          <span class="copy ml16" v-copyText="{ txt: commandTxt1, msg: $t('submission.copySuccess') }">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-copy"></use>
-            </svg>
-          </span>
-        </div>
-
-        <div class="subTitle mb16">2. {{ $t('submission.addToken') }}</div>
-        <div class="flex-center mb24">
-          <span class="command ellipsis">$ {{ commandTxt2 }}</span>
-          <span class="copy ml16" v-copyText="{ txt: commandTxt2, msg: $t('submission.copySuccess') }">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-copy"></use>
-            </svg>
-          </span>
+    </el-collapse-item>
+    <template v-if="approved">
+      <el-collapse-item :title="$t('submission.submission')" name="2">
+        <div class="mb24">{{ $t('submission.selectPhase') }}</div>
+        <div class="selected-bar btw mb16" v-if="curPhase.id">
+          <div>
+            <span class="label mr8">{{ $t('submission.todayRemain') }}:</span>
+            <span class="value">{{ curPhase.max_submissions_per_day }}</span>
+          </div>
+          <div>
+            <span class="label mr8">{{ $t('submission.monthRemain') }}:</span>
+            <span class="value">{{ curPhase.max_submissions_per_month }}</span>
+          </div>
+          <div>
+            <span class="label mr8">{{ $t('submission.totalRemain') }}:</span>
+            <span class="value">{{ curPhase.max_submissions }}</span>
+          </div>
         </div>
-        <div class="subTitle mb16">3. {{ $t('submission.submission') }}</div>
-        <div class="flex-center mb24">
-          <span class="command ellipsis">$ {{ commandTxt3 }}</span>
-          <span class="copy ml16" v-copyText="{ txt: commandTxt3, msg: $t('submission.copySuccess') }">
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-copy"></use>
-            </svg>
-          </span>
+        <div class="selected-bar mb16" v-else>
+          <span>—</span>
         </div>
-        <div class="subTitle mb24">4. {{ $t('submission.flagTxt') }}</div>
-        <div class="subTitle flex-center">
-          <span> 5. {{ $t('submission.forMore') }}</span>
-          <el-link type="primary" :underline="false" class="ml5" href="https://github.com/guardstrikelab/arena-cli" target="_blank">
-            {{ $t('submission.referDocument') }}
-          </el-link>
+        <div class="phase-box mb32" :class="{ more: phases.length > 1 }">
+          <div class="phase-card" v-for="item in phases" :key="item" @click="handleSelect(item)">
+            <div class="flex-between mb16">
+              <div class="second-title">{{ item.name }}</div>
+              <el-radio class="custom-radio" :model-value="curPhase.id" :label="item.id"></el-radio>
+            </div>
+            <div class="row mb16">
+              <span class="label mr8">{{ $t('submission.startDate') }}:</span>
+              <span class="value">{{ formatTime(item.start_date) }}</span>
+            </div>
+            <div class="row">
+              <span class="label mr8">{{ $t('submission.endDate') }}:</span>
+              <span class="value">{{ formatTime(item.end_date) }}</span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+        <div class="mb24">{{ $t('submission.instruction') }}</div>
+        <div class="instr_con mb16">
+          <div class="subTitle mb16">1. {{ $t('submission.install') }}</div>
+          <div class="flex-center mb24">
+            <span class="command ellipsis">$ {{ commandTxt1 }}</span>
+            <span class="copy ml16" v-copyText="{ txt: commandTxt1, msg: $t('submission.copySuccess') }">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-copy"></use>
+              </svg>
+            </span>
+          </div>
 
-    <div class="title mb24">{{ $t('submission.list') }}</div>
-    <el-select v-model="selectedPhaseId" class="mb16" :placeholder="$t('submission.phasePH')" @change="handleChangePhase" style="width: 300px">
-      <el-option v-for="item in phases" :key="item.id" :label="item.name" :value="item.id" />
-    </el-select>
-    <el-table :data="submissionList" stripe style="width: 100%">
-      <el-table-column fixed type="index" label="#" width="50" :index="(i) => (i + 1).toString().padStart(2, '0')" />
-      <el-table-column prop="status" :label="$t('submission.status')">
-        <template #default="{ row }">
-          <span :class="['submis-status', row.status]">{{ row.status?.charAt(0).toUpperCase() + row.status.slice(1) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="execution_time" :label="$t('submission.executTime')" width="160" />
-      <!-- <el-table-column prop="input_file" :label="$t('submission.submittedFile')">
-        <template #default="{ row }">
-          <el-link type="primary" v-if="row.input_file" :href="row.input_file" target="_blank">Link</el-link>
-          <span v-else>-</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column prop="submission_result_file" :label="$t('submission.resultFile')">
-        <template #default="{ row }">
-          <el-link type="primary" v-if="row.submission_result_file" :href="row.submission_result_file" target="_blank">Link</el-link>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="stdout_file" :label="$t('submission.stdoutFile')">
-        <template #default="{ row }">
-          <el-link type="primary" v-if="row.stdout_file" :href="row.stdout_file" target="_blank">Link</el-link>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="stderr_file" :label="$t('submission.stderrFile')">
-        <template #default="{ row }">
-          <el-link type="primary" v-if="row.stderr_file" :href="row.stderr_file" target="_blank">Link</el-link>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="submitted_at"
-        :label="$t('submission.submittedAt')"
-        :formatter="
-          (row) => {
-            return formatTime(row.submitted_at);
-          }
-        "
-        width="200" />
-      <el-table-column prop="is_public" :label="$t('submission.showOnLeaderboard')" width="170">
-        <template #default="{ row }">
-          <el-switch
-            v-model="row.is_public"
-            size="small"
-            :before-change="
-              () => {
-                return beforeChange(row);
-              }
-            " />
-          <span class="ml8">{{ row.is_public ? $t('submission.public') : $t('submission.private') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" :label="$t('operate')">
-        <template #default="{ row }">
-          <div class="flex">
-            <el-tooltip class="box-item" effect="light" :content="$t('cancel')" placement="top-start">
-              <span class="icon-button mr8" @click="cancelSubmis(row)">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-Cancel"></use>
-                </svg>
-              </span>
-            </el-tooltip>
-            <el-tooltip class="box-item" effect="light" :content="$t('submission.rerun')" placement="top-start" v-if="store.state.isHost === 1">
-              <span class="icon-button mr8" @click="reRun(row)">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-load"></use>
-                </svg>
-              </span>
-            </el-tooltip>
-            <el-tooltip class="box-item" effect="light" :content="$t('submission.resume')" placement="top-start">
-              <span class="icon-button" @click="resume(row)" :class="{ disabled: row.status !== 'failed' }">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-kaishi"></use>
-                </svg>
-              </span>
-            </el-tooltip>
+          <div class="subTitle mb16">2. {{ $t('submission.addToken') }}</div>
+          <div class="flex-center mb24">
+            <span class="command ellipsis">$ {{ commandTxt2 }}</span>
+            <span class="copy ml16" v-copyText="{ txt: commandTxt2, msg: $t('submission.copySuccess') }">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-copy"></use>
+              </svg>
+            </span>
+          </div>
+          <div class="subTitle mb16">3. {{ $t('submission.submission') }}</div>
+          <div class="flex-center mb24">
+            <span class="command ellipsis">$ {{ commandTxt3 }}</span>
+            <span class="copy ml16" v-copyText="{ txt: commandTxt3, msg: $t('submission.copySuccess') }">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-copy"></use>
+              </svg>
+            </span>
+          </div>
+          <div class="subTitle mb24">4. {{ $t('submission.flagTxt') }}</div>
+          <div class="subTitle flex-center">
+            <span> 5. {{ $t('submission.forMore') }}</span>
+            <el-link type="primary" :underline="false" class="ml5" href="https://github.com/guardstrikelab/arena-cli" target="_blank">
+              {{ $t('submission.referDocument') }}
+            </el-link>
           </div>
-        </template>
-      </el-table-column>
-    </el-table>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item :title="$t('submission.list')" name="3">
+        <el-select v-model="selectedPhaseId" class="mb16" :placeholder="$t('submission.phasePH')" @change="handleChangePhase" style="width: 300px">
+          <el-option v-for="item in phases" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-table :data="submissionList" stripe style="width: 100%">
+          <el-table-column fixed type="index" label="#" width="50" :index="(i) => (i + 1).toString().padStart(2, '0')" />
+          <el-table-column prop="status" :label="$t('submission.status')">
+            <template #default="{ row }">
+              <span :class="['submis-status', row.status]">{{ row.status?.charAt(0).toUpperCase() + row.status.slice(1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="execution_time" :label="$t('submission.executTime')" width="160" />
+          <el-table-column prop="submission_result_file" :label="$t('submission.resultFile')">
+            <template #default="{ row }">
+              <el-link type="primary" v-if="row.submission_result_file" :href="row.submission_result_file" target="_blank">Link</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stdout_file" :label="$t('submission.stdoutFile')">
+            <template #default="{ row }">
+              <el-link type="primary" v-if="row.stdout_file" :href="row.stdout_file" target="_blank">Link</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stderr_file" :label="$t('submission.stderrFile')">
+            <template #default="{ row }">
+              <el-link type="primary" v-if="row.stderr_file" :href="row.stderr_file" target="_blank">Link</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="submitted_at"
+            :label="$t('submission.submittedAt')"
+            :formatter="
+              (row) => {
+                return formatTime(row.submitted_at);
+              }
+            "
+            width="200" />
+          <el-table-column prop="is_public" :label="$t('submission.showOnLeaderboard')" width="170">
+            <template #default="{ row }">
+              <el-switch
+                v-model="row.is_public"
+                size="small"
+                :before-change="
+                  () => {
+                    return beforeChange(row);
+                  }
+                " />
+              <span class="ml8">{{ row.is_public ? $t('submission.public') : $t('submission.private') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" :label="$t('operate')">
+            <template #default="{ row }">
+              <div class="flex">
+                <el-tooltip class="box-item" effect="light" :content="$t('cancel')" placement="top-start">
+                  <span class="icon-button mr8" @click="cancelSubmis(row)">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-Cancel"></use>
+                    </svg>
+                  </span>
+                </el-tooltip>
+                <el-tooltip class="box-item" effect="light" :content="$t('submission.rerun')" placement="top-start" v-if="store.state.isHost === 1">
+                  <span class="icon-button mr8" @click="reRun(row)">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-load"></use>
+                    </svg>
+                  </span>
+                </el-tooltip>
+                <el-tooltip class="box-item" effect="light" :content="$t('submission.resume')" placement="top-start">
+                  <span class="icon-button" @click="resume(row)" :class="{ disabled: row.status !== 'failed' }">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#icon-kaishi"></use>
+                    </svg>
+                  </span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <el-button link class="mt24" @click="loadMore" v-if="pager.total > pager.pageNum * pager.pageSize">
-      <svg class="icon mr8" aria-hidden="true">
-        <use xlink:href="#icon-load"></use>
-      </svg>
-      <span>{{ $t('loadMore') }}...</span>
-    </el-button>
-  </template>
+        <el-button link class="mt24" @click="loadMore" v-if="pager.total > pager.pageNum * pager.pageSize">
+          <svg class="icon mr8" aria-hidden="true">
+            <use xlink:href="#icon-load"></use>
+          </svg>
+          <span>{{ $t('loadMore') }}...</span>
+        </el-button>
+      </el-collapse-item>
+    </template>
+  </el-collapse>
 </template>
 
 <script setup>
diff --git a/frontend/src/views/host/AddChallenge.vue b/frontend/src/views/host/AddChallenge.vue
index e49a2b4e22..2f0f52a7f6 100644
--- a/frontend/src/views/host/AddChallenge.vue
+++ b/frontend/src/views/host/AddChallenge.vue
@@ -11,7 +11,7 @@
         status-icon
         hide-required-asterisk>
         <el-form-item :label="$t('addChall.title')" prop="title">
-          <el-input v-model="ruleForm.title" />
+          <el-input v-model="ruleForm.title" maxlength="100" />
         </el-form-item>
         <el-form-item :label="$t('addChall.shortDesc')" prop="short_description">
           <editor v-model="ruleForm.short_description"></editor>
diff --git a/frontend/src/views/host/AddPhase.vue b/frontend/src/views/host/AddPhase.vue
index bf8a03f51e..1913188378 100644
--- a/frontend/src/views/host/AddPhase.vue
+++ b/frontend/src/views/host/AddPhase.vue
@@ -12,7 +12,7 @@
         status-icon
         hide-required-asterisk>
         <el-form-item :label="$t('addPhase.name')" prop="name">
-          <el-input v-model="ruleForm.name" />
+          <el-input v-model="ruleForm.name" maxlength="100" />
         </el-form-item>
         <el-form-item :label="$t('addChall.desc')" prop="description">
           <editor v-model="ruleForm.description"></editor>
@@ -47,16 +47,16 @@
           </div>
         </el-form-item>
         <el-form-item :label="$t('addPhase.codename')" prop="codename" required>
-          <el-input v-model="ruleForm.codename" />
+          <el-input v-model="ruleForm.codename" maxlength="100" />
         </el-form-item>
         <el-form-item :label="$t('addPhase.maxSubmiPerDay')" prop="max_submissions_per_day" required>
-          <el-input v-model="ruleForm.max_submissions_per_day" />
+          <el-input v-model="ruleForm.max_submissions_per_day" maxlength="32" />
         </el-form-item>
         <el-form-item :label="$t('addPhase.maxSubmiPerMonth')" prop="max_submissions_per_month" required>
-          <el-input v-model="ruleForm.max_submissions_per_month" />
+          <el-input v-model="ruleForm.max_submissions_per_month" maxlength="32" />
         </el-form-item>
         <el-form-item :label="$t('addPhase.maxSubmissions')" prop="max_submissions" required>
-          <el-input v-model="ruleForm.max_submissions" />
+          <el-input v-model="ruleForm.max_submissions" maxlength="32" />
         </el-form-item>
         <el-form-item :label="$t('addPhase.isRestrictedToSelectOneSubmission')" prop="is_restricted_to_select_one_submission">
           <radio-group v-model="ruleForm.is_restricted_to_select_one_submission"></radio-group>