diff --git a/templates/devstar-home-vscode.tmpl b/templates/devstar-home-vscode.tmpl
index 85c53b0374..dd07a8c743 100644
--- a/templates/devstar-home-vscode.tmpl
+++ b/templates/devstar-home-vscode.tmpl
@@ -18,7 +18,46 @@
 	{{end}}
 	<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
 	<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
-	{{template "base/head_script" .}}
+	<script>
+		window.config = {
+			appUrl: '{{AppUrl}}',
+			appSubUrl: '{{AppSubUrl}}',
+			assetVersionEncoded: encodeURIComponent('{{AssetVersion}}'), // will be used in URL construction directly
+			assetUrlPrefix: '{{AssetUrlPrefix}}',
+			runModeIsProd: {{.RunModeIsProd}},
+			customEmojis: {{CustomEmojis}},
+			csrfToken: '{{.CsrfToken}}',
+			pageData: {{.PageData}},
+			{{if or .Participants .Assignees .MentionableTeams}}
+			mentionValues: Array.from(new Map([
+				{{- range .Participants -}}
+			['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}', name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
+				{{- end -}}
+			{{- range .Assignees -}}
+			['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}', name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
+				{{- end -}}
+			{{- range .MentionableTeams -}}
+			['{{$.MentionableTeamsOrg}}/{{.Name}}', {key: '{{$.MentionableTeamsOrg}}/{{.Name}}', value: '{{$.MentionableTeamsOrg}}/{{.Name}}', name: '{{$.MentionableTeamsOrg}}/{{.Name}}', avatar: '{{$.MentionableTeamsOrgAvatar}}'}],
+				{{- end -}}
+			]).values()),
+			{{end}}
+			mermaidMaxSourceCharacters: {{MermaidMaxSourceCharacters}},
+			{{/* this global i18n object should only contain general texts. for specialized texts, it should be provided inside the related modules by: (1) API response (2) HTML data-attribute (3) PageData */}}
+			i18n: {
+				copy_success: {{ctx.Locale.Tr "copy_success"}},
+				copy_error: {{ctx.Locale.Tr "copy_error"}},
+				error_occurred: {{ctx.Locale.Tr "error.occurred"}},
+				network_error: {{ctx.Locale.Tr "error.network_error"}},
+				remove_label_str: {{ctx.Locale.Tr "remove_label_str"}},
+				modal_confirm: {{ctx.Locale.Tr "modal.confirm"}},
+				modal_cancel: {{ctx.Locale.Tr "modal.cancel"}},
+				more_items: {{ctx.Locale.Tr "more_items"}},
+			},
+		};
+		{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
+		window.config.pageData = window.config.pageData || {};
+	</script>
+	<script src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
 	<noscript>
 		<style>
 			.dropdown:hover > .menu { display: block; }
@@ -88,12 +127,6 @@
 
 <div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
 
-	<!-- united message-->
-	<div class="ui container tw-my-[--page-spacing]">
-		<div id="negative_message" class="ui negative message tw-text-center tw-whitespace-pre-line" tabindex="0" style="display:none;"></div>
-		<div id="positive_message" class="ui positive message tw-text-center tw-whitespace-pre-line" tabindex="0" style="display:none;"></div>
-	</div>
-
 	<div class="ui middle very relaxed page">
 
 		<!-- login -->
@@ -129,227 +162,217 @@
 
 				<div class="divider"></div>
 
-				<h2 class="header">Repositories</h2>
-				<table class="ui table" id="reposTable">
-					<thead>
-					<tr>
-						<th>repoName</th>
-						<th>repoURL</th>
-						<th>Operation</th>
-					</tr>
-					</thead>
-					<tbody>
-					<!-- 动态加载 -->
-					</tbody>
-				</table>
-			</div>
-		</div>
+				<!-- 仓库列表 -->
+				<div id="repo_list" class="flex-list">
+					<!-- 动态加载-->
+				</div>
 
-		<div id="modalForCreatingRepo" class="ui modal" style="width:70%; left: 15%; top: 20%">
-			<div class="content">
-				<div class="close right" style="float: right" onclick="closeModalForCreatingRepo()">X</div>
-				<div class="ui container column fluid" style="height: 50%;">
-					<h2 class="ui top attached header center">Create New Repository</h2>
-					<div class="ui attached segment" >
-						<form id="creatingRepoForm" class="ui form" onsubmit="return createRepo()">
-						<!-- repo name -->
-						<div class="inline required field {{if .Err_RepoName}}error{{end}}">
-							<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label>
-							<input id="repo_name" name="repo_name" value="{{.repo_name}}" autofocus required maxlength="100">
-							<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
-						</div>
+				<!-- ====================== Created Repository ==========================-->
+				<div id="modalForCreatingRepo" class="ui modal" style="width:70%; left: 15%; top: 20%">
+					<div class="content">
+						<div class="close right" style="float: right" onclick="closeModalForCreatingRepo()">X</div>
+						<div class="ui container column fluid" style="height: 50%;">
+							<h2 class="ui top attached header center">Create New Repository</h2>
+							<div class="ui attached segment" >
+								<form id="creatingRepoForm" class="ui form" onsubmit="return createRepo()">
+									<!-- repo name -->
+									<div class="inline required field {{if .Err_RepoName}}error{{end}}">
+										<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label>
+										<input id="repo_name" name="repo_name" value="{{.repo_name}}" autofocus required maxlength="100">
+										<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
+									</div>
 
-						<!-- visibility -->
-<!--						<div class="inline field">-->
-<!--							<label>{{ctx.Locale.Tr "repo.visibility"}}</label>-->
-<!--							<div class="ui checkbox">-->
-<!--									<input id="is_private" name="private" type="checkbox" >-->
-<!--									<label>{{ctx.Locale.Tr "repo.visibility_helper"}}</label>-->
-<!--							</div>-->
-<!--							<span class="help">{{ctx.Locale.Tr "repo.visibility_description"}}</span>-->
-<!--						</div>-->
+									<!-- visibility -->
+<!--									<div class="inline field">-->
+<!--										<label>{{ctx.Locale.Tr "repo.visibility"}}</label>-->
+<!--										<div class="ui checkbox">-->
+<!--												<input id="is_private" name="private" type="checkbox" >-->
+<!--												<label>{{ctx.Locale.Tr "repo.visibility_helper"}}</label>-->
+<!--										</div>-->
+<!--										<span class="help">{{ctx.Locale.Tr "repo.visibility_description"}}</span>-->
+<!--									</div>-->
 
-						<!-- desc -->
-						<div class="inline field {{if .Err_Description}}error{{end}}">
-							<label for="description">{{ctx.Locale.Tr "repo.repo_desc"}}</label>
-							<textarea id="description" rows="2" name="description" placeholder="{{ctx.Locale.Tr "repo.repo_desc_helper"}}" maxlength="2048">{{.description}}</textarea>
-						</div>
+									<!-- desc -->
+									<div class="inline field {{if .Err_Description}}error{{end}}">
+										<label for="description">{{ctx.Locale.Tr "repo.repo_desc"}}</label>
+										<textarea id="description" rows="2" name="description" placeholder="{{ctx.Locale.Tr "repo.repo_desc_helper"}}" maxlength="2048">{{.description}}</textarea>
+									</div>
 
-						<!-- template -->
+									<!-- template -->
 
-						<div id="devstar_template_area" class="inline field">
-							<label>{{ctx.Locale.Tr "repo.devstar_template"}}</label>
-							<div id="devstar_template_search" class="ui search selection dropdown">
-								<input type="hidden" id="devstar_template" name="devstar_template" value="">
-								<div id="devstar_template_name" class="default text">{{.devstar_template_name}}</div>
-								<div class="menu">
-								</div>
-							</div>
-							<span class="help">{{ctx.Locale.Tr "repo.devstar_template_desc" "https://DevStar.cn/"}}</span>
-						</div>
+									<div id="devstar_template_area" class="inline field">
+										<label>{{ctx.Locale.Tr "repo.devstar_template"}}</label>
+										<div id="devstar_template_search" class="ui search selection dropdown">
+											<input type="hidden" id="devstar_template" name="devstar_template" value="">
+											<div id="devstar_template_name" class="default text">{{.devstar_template_name}}</div>
+											<div class="menu">
+											</div>
+										</div>
+										<span class="help">{{ctx.Locale.Tr "repo.devstar_template_desc" "https://DevStar.cn/"}}</span>
+									</div>
 
-					<div id="git_url_template_area" class="inline field">
-						<label>{{ctx.Locale.Tr "repo.git_url_template"}}</label>
-						<input id="git_url_template" name="git_url_template" value="" placeholder="{{ctx.Locale.Tr "repo.git_url_template_helper"}}">
-						<span class="help">{{ctx.Locale.Tr "repo.git_url_template_desc"}}</span>
-					</div>
+									<div id="git_url_template_area" class="inline field">
+										<label>{{ctx.Locale.Tr "repo.git_url_template"}}</label>
+										<input id="git_url_template" name="git_url_template" value="" placeholder="{{ctx.Locale.Tr "repo.git_url_template_helper"}}">
+										<span class="help">{{ctx.Locale.Tr "repo.git_url_template_desc"}}</span>
+									</div>
+
+									<div id="repo_template_area">
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.template"}}</label>
+											<div id="repo_template_search" class="ui search selection dropdown">
+												<input type="hidden" id="repo_template" name="repo_template" value="">
+												<div id="repo_template_name" class="default text">{{.devstar_template_name}}</div>
+												<div class="menu">
+												</div>
+											</div>
+										</div>
+
+										<div id="template_units" {{if not .repo_template}}class="tw-hidden"{{end}}>
+											<div class="inline field">
+												<label>{{ctx.Locale.Tr "repo.template.items"}}</label>
+												<div class="ui checkbox">
+													<input name="git_content" type="checkbox" {{if .git_content}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.git_content"}}</label>
+												</div>
+												<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip-content="{{ctx.Locale.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
+													<input name="git_hooks" type="checkbox" {{if .git_hooks}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.git_hooks"}}</label>
+												</div>
+											</div>
+
+											<div class="inline field">
+												<label></label>
+												<div class="ui checkbox">
+													<input name="webhooks" type="checkbox" {{if .webhooks}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.webhooks"}}</label>
+												</div>
+												<div class="ui checkbox">
+													<input name="topics" type="checkbox" {{if .topics}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.topics"}}</label>
+												</div>
+											</div>
+											<div class="inline field">
+												<label></label>
+												<div class="ui checkbox">
+													<input name="avatar" type="checkbox" {{if .avatar}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.avatar"}}</label>
+												</div>
+												<div class="ui checkbox">
+													<input name="labels" type="checkbox" {{if .labels}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.template.issue_labels"}}</label>
+												</div>
+											</div>
+											<div class="inline field">
+												<label></label>
+												<div class="ui checkbox">
+													<input name="protected_branch" type="checkbox" {{if .protected_branch}}checked{{end}}>
+													<label>{{ctx.Locale.Tr "repo.settings.protected_branch"}}</label>
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div id="non_template"  {{if .repo_template}}class="tw-hidden"{{end}}>
+										<!-- issue label -->
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.issue_labels"}}</label>
+											<div class="ui search selection dropdown">
+												<input id="issue_label" type="hidden" name="issue_labels" value="{{.issueLabels}}">
+												<div class="default text">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
+												<div id="issue_label_menu" class="menu">
+													<div class="item" data-value="">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
+												</div>
+											</div>
+										</div>
+
+										<div class="divider"></div>
+
+										<div class="inline field">
+											<label>.gitignore</label>
+											<div class="ui multiple search selection dropdown">
+												<input id="gitignore" type="hidden" name="gitignores" value="{{.gitignores}}">
+												<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
+												<div id="gitignore_menu" class="menu">
+												</div>
+											</div>
+											<span class="help">{{ctx.Locale.Tr "repo.repo_gitignore_helper_desc"}}</span>
+										</div>
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.license"}}</label>
+											<div class="ui search selection dropdown">
+												<input id="license" type="hidden" name="license" value="{{.license}}">
+												<div class="default text">{{ctx.Locale.Tr "repo.license_helper"}}</div>
+												<div id="license_menu" class="menu">
+													<div class="item" data-value="">{{ctx.Locale.Tr "repo.license_helper"}}</div>
+												</div>
+											</div>
+											<span class="help">{{ctx.Locale.Tr "repo.license_helper_desc" "https://choosealicense.com/"}}</span>
+										</div>
+
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.readme"}}</label>
+											<div class="ui selection dropdown">
+												<input id="readme" type="hidden" name="readme" value="{{.readme}}">
+												<div class="default text">{{ctx.Locale.Tr "repo.readme_helper"}}</div>
+												<div id="readme_menu" class="menu">
+													{{range .Readmes}}
+													<div class="item" data-value="{{.}}">{{.}}</div>
+													{{end}}
+												</div>
+											</div>
+											<span class="help">{{ctx.Locale.Tr "repo.readme_helper_desc"}}</span>
+										</div>
+										<div class="inline field">
+											<label for="default_branch">{{ctx.Locale.Tr "repo.default_branch"}}</label>
+											<input id="default_branch" name="default_branch" value="{{.default_branch}}" placeholder="{{.default_branch}}">
+											<span class="help">{{ctx.Locale.Tr "repo.default_branch_helper"}}</span>
+										</div>
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.object_format"}}</label>
+											<div class="ui selection owner dropdown">
+												<input type="hidden" id="object_format_name" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
+												<div id="default_object_format_name" class="default text">{{.DefaultObjectFormat.Name}}</div>
+												<div id="object_format_menu" class="menu">
+													{{range .SupportedObjectFormats}}
+													<div class="item" data-value="{{.Name}}">{{.Name}}</div>
+													{{end}}
+												</div>
+											</div>
+											<span class="help">{{ctx.Locale.Tr "repo.object_format_helper"}}</span>
+										</div>
+										<div class="inline field">
+											<label>{{ctx.Locale.Tr "repo.template"}}</label>
+											<div class="ui checkbox">
+												<input id="is_template" name="template" type="checkbox">
+												<label>{{ctx.Locale.Tr "repo.template_helper"}}</label>
+											</div>
+										</div>
+									</div>
+
+									<br>
+
+									<div class="inline field">
+										<label></label>
+										<button class="ui primary button" >
+											{{ctx.Locale.Tr "repo.create_repo"}}
+										</button>
+									</div>
+								</form>
 
-					<div id="repo_template_area">
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.template"}}</label>
-							<div id="repo_template_search" class="ui search selection dropdown">
-								<input type="hidden" id="repo_template" name="repo_template" value="">
-								<div id="repo_template_name" class="default text">{{.devstar_template_name}}</div>
-								<div class="menu">
-								</div>
 							</div>
 						</div>
-
-						<div id="template_units" {{if not .repo_template}}class="tw-hidden"{{end}}>
-							<div class="inline field">
-								<label>{{ctx.Locale.Tr "repo.template.items"}}</label>
-								<div class="ui checkbox">
-									<input name="git_content" type="checkbox" {{if .git_content}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.git_content"}}</label>
-								</div>
-								<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip-content="{{ctx.Locale.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
-									<input name="git_hooks" type="checkbox" {{if .git_hooks}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.git_hooks"}}</label>
-								</div>
-							</div>
-
-							<div class="inline field">
-								<label></label>
-								<div class="ui checkbox">
-									<input name="webhooks" type="checkbox" {{if .webhooks}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.webhooks"}}</label>
-								</div>
-								<div class="ui checkbox">
-									<input name="topics" type="checkbox" {{if .topics}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.topics"}}</label>
-								</div>
-							</div>
-							<div class="inline field">
-								<label></label>
-								<div class="ui checkbox">
-									<input name="avatar" type="checkbox" {{if .avatar}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.avatar"}}</label>
-								</div>
-								<div class="ui checkbox">
-									<input name="labels" type="checkbox" {{if .labels}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.template.issue_labels"}}</label>
-								</div>
-							</div>
-							<div class="inline field">
-								<label></label>
-								<div class="ui checkbox">
-									<input name="protected_branch" type="checkbox" {{if .protected_branch}}checked{{end}}>
-									<label>{{ctx.Locale.Tr "repo.settings.protected_branch"}}</label>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div id="non_template"  {{if .repo_template}}class="tw-hidden"{{end}}>
-						<!-- issue label -->
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.issue_labels"}}</label>
-							<div class="ui search selection dropdown">
-								<input id="issue_label" type="hidden" name="issue_labels" value="{{.issueLabels}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
-								<div id="issue_label_menu" class="menu">
-									<div class="item" data-value="">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="divider"></div>
-
-						<div class="inline field">
-							<label>.gitignore</label>
-							<div class="ui multiple search selection dropdown">
-								<input id="gitignore" type="hidden" name="gitignores" value="{{.gitignores}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
-								<div id="gitignore_menu" class="menu">
-								</div>
-							</div>
-							<span class="help">{{ctx.Locale.Tr "repo.repo_gitignore_helper_desc"}}</span>
-						</div>
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.license"}}</label>
-							<div class="ui search selection dropdown">
-								<input id="license" type="hidden" name="license" value="{{.license}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.license_helper"}}</div>
-								<div id="license_menu" class="menu">
-									<div class="item" data-value="">{{ctx.Locale.Tr "repo.license_helper"}}</div>
-								</div>
-							</div>
-							<span class="help">{{ctx.Locale.Tr "repo.license_helper_desc" "https://choosealicense.com/"}}</span>
-						</div>
-
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.readme"}}</label>
-							<div class="ui selection dropdown">
-								<input id="readme" type="hidden" name="readme" value="{{.readme}}">
-								<div class="default text">{{ctx.Locale.Tr "repo.readme_helper"}}</div>
-								<div id="readme_menu" class="menu">
-									{{range .Readmes}}
-									<div class="item" data-value="{{.}}">{{.}}</div>
-									{{end}}
-								</div>
-							</div>
-							<span class="help">{{ctx.Locale.Tr "repo.readme_helper_desc"}}</span>
-						</div>
-						<div class="inline field">
-							<label for="default_branch">{{ctx.Locale.Tr "repo.default_branch"}}</label>
-							<input id="default_branch" name="default_branch" value="{{.default_branch}}" placeholder="{{.default_branch}}">
-							<span class="help">{{ctx.Locale.Tr "repo.default_branch_helper"}}</span>
-						</div>
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.object_format"}}</label>
-							<div class="ui selection owner dropdown">
-								<input type="hidden" id="object_format_name" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
-								<div id="default_object_format_name" class="default text">{{.DefaultObjectFormat.Name}}</div>
-								<div id="object_format_menu" class="menu">
-									{{range .SupportedObjectFormats}}
-									<div class="item" data-value="{{.Name}}">{{.Name}}</div>
-									{{end}}
-								</div>
-							</div>
-							<span class="help">{{ctx.Locale.Tr "repo.object_format_helper"}}</span>
-						</div>
-						<div class="inline field">
-							<label>{{ctx.Locale.Tr "repo.template"}}</label>
-							<div class="ui checkbox">
-								<input id="is_template" name="template" type="checkbox">
-								<label>{{ctx.Locale.Tr "repo.template_helper"}}</label>
-							</div>
-						</div>
-					</div>
-					<br>
-					<div class="inline field">
-						<label></label>
-						<button class="ui primary button" >
-							{{ctx.Locale.Tr "repo.create_repo"}}
-						</button>
-					</div>
-
-						</form>
 					</div>
 				</div>
 			</div>
 		</div>
-
-		<div id="alertBox" class="ui alert"></div>
-
-		<!-- ====================== Created Repository ==========================-->
-
-<!--		<button onclick="loadRepositories()">Load Repositories</button>-->
 	</div>
 </div>
+</div>
 
 </body>
 </html>
+{{template "base/footer" .}}
 
 <!-- ======================================= Script ==================================-->
 <script>
@@ -482,16 +505,16 @@
 					method: 'GET',
 				})
 					.then(response => {
-						if (!response.ok) {
-							throw Error(`There is error when fetching template data from url: ${url}` + response)
-						}
-						return response.json()
-					})
-					.then(data => {
-						resolve(data)
+						response.json().then(data => {
+							if (response.ok) {
+								resolve(data)
+							} else {
+								throw new Error(`Failed to fetch template data from url: ${url} Error: ${data.message}`)
+							}
+						})
 					})
 			} catch (error) {
-				reject('Failed to fetch template data')
+				reject(error)
 				console.error(error)
 			}
 		})
@@ -578,8 +601,8 @@
 			document.getElementById('contentBeforeSigned').style.display = 'none'
 			document.getElementById('contentAfterSigned').style.display = 'block'
 			// load data for page
-			await loadCreatingRepoForm() // form for creating repo
 			loadRepositories() // repo list
+			await loadCreatingRepoForm() // form for creating repo
 		} else {
 			// document.getElementById('signup-link').style.display = 'flex'
 			document.getElementById('signin-link').style.display = 'flex'
@@ -596,7 +619,7 @@
 		// check if user has logged in, only show login modal when user has not logged in
 		if (SIGNED) {
 			console.log('User has logged in')
-			showMessage('positive', '已登录', 3000) // 消息显示3秒后消失
+			showInformationNotification('已登录')
 		} else {
 			document.getElementById('loginModal').style.display = 'block';
 		}
@@ -629,52 +652,50 @@
 			body: JSON.stringify(postData)
 		})
 			.then(response => {
-				if (!response.ok) {
-					throw new Error('Error in logging ' + response.statusText);
-					closeLoginModal()
-				}
-				return response.json();
-			})
-			.then(async data => {
-				// store token in global variable and vscode global state
-				USERTOKEN = data.sha1;
-				USERNAME = username;
-				setUserTokenToVSCode(USERTOKEN);
-				setUsernameToVSCode(username);
-				SIGNED = true
-				await reloadPageModules()
+				response.json().then(async data => {
+					if (response.ok) {
+						// store token in global variable and vscode global state
+						USERTOKEN = data.sha1;
+						USERNAME = username;
+						setUserTokenToVSCode(USERTOKEN);
+						setUsernameToVSCode(username);
+						SIGNED = true
+						await reloadPageModules()
+						closeLoginModal()
 
-				// if user public key exist, meaning that public key has been uploaded
-				await getUserPublicKeyFromVSCode()
-					.then(async userPublicKey => {
-						if (userPublicKey == '') {
-							await createUserPublicKeyByVSCode()
-								.then(async () => {
-									// only upload new created public key
-									await getUserPublicKeyFromVSCode()
-										.then(async userPublicKey => {
-											const dataFromResp = await communicateVSCodeByWebview('getMachineName', {});
-											const machineName = dataFromResp.machineName;
+						// if user public key exist, meaning that public key has been uploaded
+						await getUserPublicKeyFromVSCode()
+							.then(async userPublicKey => {
+								if (userPublicKey === '') {
+									await createUserPublicKeyByVSCode()
+										.then(async () => {
+											// only upload new created public key
+											await getUserPublicKeyFromVSCode()
+												.then(async userPublicKey => {
+													const dataFromResp = await communicateVSCodeByWebview('getMachineName', {});
+													const machineName = dataFromResp.machineName;
 
-											// key title: username-machine-timestamp
-											const timestamp = Date.now();
-											const keyTitle = `${USERNAME}-${machineName}-${timestamp}`
-											await uploadNewCreatedPublicKey(userPublicKey, keyTitle);
+													// key title: username-machine-timestamp
+													const timestamp = Date.now();
+													const keyTitle = `${USERNAME}-${machineName}-${timestamp}`
+													await uploadNewCreatedPublicKey(userPublicKey, keyTitle);
+												})
+												.catch(error => {
+													console.error("Failed to get NEW CREATED user public key from vscode: ", error)
+												})
 										})
-										.catch(error => {
-											console.error("Failed to get NEW CREATED user public key from vscode: ", error)
-										})
-								})
-						}
-					})
-					.catch(error => {
-						console.error("Failed to get user public key from vscode: ", error)
-					})
-
-				closeLoginModal()
+								}
+							})
+							.catch(error => {
+								console.error("Failed to get user public key from vscode: ", error)
+							})
+					} else {
+						showErrorNotification(`登录失败！\nError: ${data.message}`)
+						throw new Error(`登录失败！\nError: ${data.message}`);
+					}
+				})
 			})
 			.catch(error => {
-				closeLoginModal()
 				console.error('There has been a problem when logging', error);
 			});
 	}
@@ -682,7 +703,7 @@
 	function generateTokenName(length = 10) {
 		// tokenName is random string and number and _ combination (10 characters)
 		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
-		let name = '';
+		let name = 'vscode_login_token_';
 		const charactersLength = characters.length;
 		for (let i = 0; i < length; i++) {
 			name += characters.charAt(Math.floor(Math.random() * charactersLength));
@@ -783,24 +804,24 @@
 			body: JSON.stringify(postData)
 		})
 			.then(response => {
-				if (!response.ok) {
-					throw new Error('Error in logging ' + response.statusText);
-				}
-				return response.json();
-			})
-			.then(async data => {
-				console.log("Successfully upload new created public key.\n", data)
+				response.json().then(data => {
+					if (response.ok) {
+						console.log("Successfully upload new created public key.\n", data)
+					} else {
+						throw new Error(`Failed to upload new created public key!\nError: ${data.message}`)
+					}
+				})
 			})
 			.catch(error => {
-				console.error('There has been a problem with your fetch operation:', error);
+				console.error(error);
 			});
 	}
 
 	// ===================================== Repo ===========================
 	function loadRepositories() {
 		// clear old data
-		const tableBody = document.getElementById('reposTable').getElementsByTagName('tbody')[0];
-		tableBody.innerHTML = '';
+		const repoList = document.getElementById('repo_list')
+		repoList.innerHTML = '';
 
 		// load new data
 		var url = DEVSTAR_DOMAIN + "/api/v1/user/repos?page=1&limit=20"
@@ -813,42 +834,128 @@
 			},
 		})
 			.then(response => {
-				if (!response.ok) {
-					throw new Error('Network response was not ok when loading repos' + response.statusText);
-				}
-				return response.json();
-			})
-			.then(data => {
-				var repos = data;
-				repos.forEach((repo, index) => {
-					var row = tableBody.insertRow(-1); // 在表格末尾插入一行
-					var cell1 = row.insertCell(0);
-					var cell2 = row.insertCell(1);
-					var cell3 = row.insertCell(2);
+				response.json().then(data => {
+					if (response.ok) {
+						let repos = data;
+						repos.forEach((repo, index) => {
+							const repoFullName = repo.full_name;
+							const repoURL = repo.html_url;
+							const repoID = repo.id;
 
-					const repoFullName = repo.full_name;
-					const repoURL = repo.html_url;
-					const repoID = repo.id;
-
-					cell1.textContent = repoFullName;
-					cell2.textContent = repoURL;
-					cell3.innerHTML = `<button class="ui button primary" onclick="openProject('${repoID}')">Open Project</button>
-                    <button class="ui red button" onclick="deleteDevContainer('${repoID}')">Delete Container</button>
-                    `;
-
-				});
+							hasDevContainer(repoID)
+								.then(found => {
+									addItemForRepoList(repoFullName, repoURL, repoID, found)
+								})
+						})
+					} else {
+							throw new Error(`Failed to load repos, Error: ${data.message}`);
+					}
+				})
 			})
 			.catch(error => {
-				console.error('There has been a problem with your fetch operation:', error);
+				console.error(error);
 			});
 	}
 
-	// 打开弹窗
+	function addItemForRepoList(repoFullName, repoURL, repoID, hasDevContainer) {
+		const repoList = document.getElementById('repo_list');
+
+		// 创建新的 flex-item 元素
+		const flexItem = document.createElement('div');
+		flexItem.classList.add('flex-item');
+
+		// 创建 flex-item-main
+		const flexItemMain = document.createElement('div');
+		flexItemMain.classList.add('flex-item-main');
+
+		// 创建 flex-item-header
+		const flexItemHeader = document.createElement('div');
+		flexItemHeader.classList.add('flex-item-header');
+
+		// 创建 flex-item-title
+		const flexItemTitle = document.createElement('div');
+		flexItemTitle.classList.add('flex-item-title');
+
+		// 创建名称部分
+		const repoNameDiv = document.createElement('div');
+		repoNameDiv.classList.add('text', 'name');
+		repoNameDiv.textContent = repoFullName;
+
+		// 创建 flex-item-trailing
+		const flexItemTrailing = document.createElement('div');
+		flexItemTrailing.classList.add('flex-item-trailing');
+
+		// 创建按钮
+		const createContainerBtn = document.createElement('button');
+		createContainerBtn.id = `${repoID}_createContainerBtn`
+		createContainerBtn.classList.add('ui', 'green', 'button');
+		createContainerBtn.textContent = 'Create Container';
+		createContainerBtn.onclick = function () {
+			createDevContainer(repoID)
+		}
+
+		const openProjectBtn = document.createElement('button');
+		openProjectBtn.id = `${repoID}_openProjectBtn`
+		openProjectBtn.classList.add('ui', 'primary', 'button');
+		openProjectBtn.textContent = 'Open Project';
+		openProjectBtn.onclick = function () {
+			openDevContainer(repoID)
+		}
+
+		const deleteContainerBtn = document.createElement('button');
+		deleteContainerBtn.id = `${repoID}_deleteContainerBtn`
+		deleteContainerBtn.classList.add('ui', 'red', 'button');
+		deleteContainerBtn.textContent = 'Delete Container';
+		deleteContainerBtn.onclick = function () {
+			deleteDevContainer(repoID)
+		}
+
+		// 创建 flex-item-body
+		const flexItemBody = document.createElement('div');
+		flexItemBody.classList.add('flex-item-body');
+		flexItemBody.textContent = repoURL;
+
+		// 组合所有部分
+		flexItemTitle.appendChild(repoNameDiv);
+		flexItemTrailing.appendChild(createContainerBtn);
+		flexItemTrailing.appendChild(openProjectBtn);
+		flexItemTrailing.appendChild(deleteContainerBtn);
+
+		flexItemHeader.appendChild(flexItemTitle);
+		flexItemHeader.appendChild(flexItemTrailing);
+
+		flexItemMain.appendChild(flexItemHeader);
+		flexItemMain.appendChild(flexItemBody);
+
+		flexItem.appendChild(flexItemMain);
+
+		// 将新创建的 flex-item 添加到 repo_list 中
+		repoList.appendChild(flexItem);
+
+		// 调整按钮显示
+		adjustBtnForRepoItem(repoID, hasDevContainer)
+	}
+
+	function adjustBtnForRepoItem(repoId, hasDevContainer) {
+		const createContainerBtn = document.getElementById(`${repoId}_createContainerBtn`);
+		const openProjectBtn = document.getElementById(`${repoId}_openProjectBtn`);
+		const deleteContainerBtn = document.getElementById(`${repoId}_deleteContainerBtn`);
+		if (hasDevContainer) {
+			createContainerBtn.style.display = 'none';
+      openProjectBtn.style.display = 'block';
+      deleteContainerBtn.style.display = 'block';
+		} else {
+			createContainerBtn.style.display = 'block';
+			openProjectBtn.style.display = 'none';
+			deleteContainerBtn.style.display = 'none';
+		}
+	}
+
+	// 创建仓库modal
 	function openModalForCreateRepository() {
 		document.getElementById('modalForCreatingRepo').style.display = "block";
 	}
 
-	// 关闭弹窗
 	function closeModalForCreatingRepo() {
 		document.getElementById('modalForCreatingRepo').style.display = "none";
 	}
@@ -923,51 +1030,26 @@
 			body: JSON.stringify(postData)
 		})
 			.then(response => {
-				console.log(response)
-				if (!response.ok) {
-					throw new Error('Network response was not ok when creating project' + response.statusText);
-				}
-				return response.json();
-			})
-			.then(data => {
-				console.log(data);
-				showMessage('positive', '项目创建成功！', 3000) // 消息显示3秒后消失
-				loadRepositories()
-				closeModalForCreatingRepo(); // 关闭创建项目弹窗
+				response.json().then(data => {
+					if (response.ok) {
+						showInformationNotification('项目创建成功！')
+						console.log('项目创建成功！')
+						loadRepositories()
+						closeModalForCreatingRepo(); // 关闭创建项目弹窗
+					} else {
+						showErrorNotification(`项目创建失败！\nError: ${data.message}`)
+						throw new Error(`项目创建失败！\nError: ${data.message}`)
+					}
+				})
 			})
 			.catch(error => {
-				console.error('There has been a problem with your fetch operation:', error);
+				console.error(error);
 			});
 		return false;
 	}
 
 	// ===================================== Projects ===========================
-
-	async function openProject(repoId) {
-		var newCreated = false;
-		// check if container exist
-		await hasDevContainer(repoId)
-			.then(async hasDevContainer => {
-				if (!hasDevContainer) {
-					showMessage('positive', "正在创建开发容器...", 3000)
-					await createDevContainer(repoId)
-						.then(res => {
-							newCreated = true;
-							showMessage('positive', "创建容器成功！", 3000)
-							showMessage('positive', "请等待容器打开！", 5000)
-							console.log(`Succeed to create dev container for repo ${repoId}`)
-						})
-						.catch(error => {
-							showMessage('negative', "创建容器失败！", 3000)
-							console.log(`Fail to create dev container for repo ${repoId}: `, error)
-							return;
-						})
-				}
-			}).catch(error => {
-				console.log("There has a problem when check if the repo has devContainer:", error)
-				return;
-			})
-
+	async function openDevContainer(repoId) {
 		console.log("opening project")
 
 		// open devcontainer through repoId
@@ -988,129 +1070,118 @@
 			},
 		})
 			.then(response => {
-				if (!response.ok) {
-					throw new Error('Network response was not ok when querying devContainer by repoId' + response.statusText);
-				}
-				return response.json();
-			})
-			.then(data => {
-				const responseCode = data.code
-				const reponseMsg = data.msg
+				response.json().then(data => {
+					const responseCode = data.code
+					if (response.ok && responseCode === 0) {
+						// container start successfully
+						// get devContainer ssh connection information
+						const devContainerHost = data.data.devContainerHost
+						const devContainerUsername = data.data.devContainerUsername
+						const devContainerPort = data.data.devContainerPort
+						const devContainerWorkDir = data.data.devContainerWorkDir
 
-				if (responseCode == 0) {
-					// container start successfully
-					// get devContainer ssh connection information
-					const devContainerHost = data.data.devContainerHost
-					const devContainerUsername = data.data.devContainerUsername
-					const devContainerPort = data.data.devContainerPort
-					const devContainerWorkDir = data.data.devContainerWorkDir
-
-					// default: open with key
-					communicateVSCodeByWebview('firstOpenRemoteFolder', {
-						host: `${devContainerHost}`,
-						username: `${devContainerUsername}`,
-						port: `${devContainerPort}`,
-						path: `${devContainerWorkDir}`
-					})
-				} else {
-					// show Error to User
-					showMessage('negative', "打开容器失败！", 1500)
-					const responseErrorMsg = data.data.ErrorMsg
-					console.error("Error happen when starting dev container", responseErrorMsg)
-				}
+						// default: open with key
+						communicateVSCodeByWebview('firstOpenRemoteFolder', {
+							host: `${devContainerHost}`,
+							username: `${devContainerUsername}`,
+							port: `${devContainerPort}`,
+							path: `${devContainerWorkDir}`
+						})
+					} else if (response.ok) {
+						// TODO: 等待的code
+						console.warn(`打开容器失败！code: ${responseCode}\nError: ${data.data.ErrorMsg}`)
+						showErrorNotification(`打开容器失败！\nError: ${data.data.ErrorMsg}`)
+						throw new Error(`打开容器失败！\nError: ${data.data.ErrorMsg}`)
+					} else {
+						showErrorNotification(`打开容器失败！\nError: ${data.message}`)
+						throw new Error(`打开容器失败！\nError: ${data.message}`)
+					}
+				})
 			})
 			.catch(error => {
-				console.error('There has been a problem with your fetch operation:', error);
+				console.error(error);
 			});
 	}
 
 	async function hasDevContainer(repoId) {
-		return new Promise((resolve, reject) => {
+		return new Promise(async (resolve) => {
 			url = DEVSTAR_DOMAIN + "/api/devcontainer/user"
 			token = USERTOKEN
 
 			fetch(url, {
-				method: 'GET',  // 或者 'POST', 根据API要求
+				method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
 					'Authorization': 'token ' + token
 				},
 			})
 				.then(response => {
-					if (!response.ok) {
-						throw new Error('Network response was not ok when querying devContainer list' + response.statusText);
-					}
-					return response.json();
-				})
-				.then(data => {
-					const devContainers = data.data.devContainers;
-					devContainers.forEach((c, index) => {
-						if (c.repoId == repoId) {
-							// has devContainer
-							resolve(true)
-							return
+					response.json().then(data => {
+						if (response.ok) {
+							let found = false
+							const devContainers = data.data.devContainers;
+							devContainers.forEach((c, index) => {
+								if (String(c.repoId) === String(repoId)) {
+									// has devContainer
+									found = true
+									resolve(true)
+								}
+							});
+
+							if (!found) {
+								resolve(false)
+							}
+						} else {
+							throw new Error(`Failed to fetch devContainer list.\nError: ${data.message}`)
 						}
-					});
-					resolve(false)
+					})
 				})
 				.catch(error => {
-					console.error('There has been a problem with your fetch operation:', error);
-					reject(error)
+					console.error(error);
 				});
 		})
 	}
 
 	async function createDevContainer(repoId) {
-		return new Promise(async (resolve, reject) => {
-			// request creating container
-			const url = DEVSTAR_DOMAIN + "/api/devcontainer"
-			var token = USERTOKEN
+		showInformationNotification("正在创建开发容器...")
 
-			const postData = {
-				"repoId": repoId.toString(),
-				// "sshPublicKeyList": [publicKey]
-			}
+		// request creating container
+		const url = DEVSTAR_DOMAIN + "/api/devcontainer"
+		var token = USERTOKEN
 
-			fetch(url, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					'Authorization': 'token ' + token
-				},
-				body: JSON.stringify(postData)
-			})
-				.then(response => {
-					if (!response.ok) {
-						throw new Error(`Network response was not ok when creating devContainer ${repoId}` + response.statusText);
-					}
-					return response.json();
-				})
-				.then(data => {
-					const responseCode = data.code
-
-					if (responseCode == 0) {
-						resolve("success")
-					} else {
-						reject(data.data.ErrorMsg)
-					}
-				})
-				.catch(error => {
-					console.error('There has been a problem with your fetch operation:', error);
-					reject(error)
-				});
-
-		})
-	}
-
-	async function getDefaultPublicKeyFromVSCode() {
-		try {
-			const data = await communicateVSCodeByWebview('getDefaultPublicKey', null);
-			const defaultPublicKey = data.defaultPublicKey;
-
-			return defaultPublicKey;
-		} catch (error) {
-			console.log("Failed to get default public key: ", error)
+		const postData = {
+			"repoId": repoId.toString(),
+			// "sshPublicKeyList": [publicKey]
 		}
+
+		fetch(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + token
+			},
+			body: JSON.stringify(postData)
+		})
+			.then(response => {
+				response.json().then(data => {
+					const responseCode = data.code
+					if (response.ok && responseCode === 0) {
+						showInformationNotification(`创建容器成功！`)
+						adjustBtnForRepoItem(repoId, true)
+						console.log('Successfully create dev container!')
+					} else if (response.ok){
+						console.warn(responseCode)
+						showErrorNotification(`创建容器失败！\nError: ${data.data.ErrorMsg}`)
+						throw new Error(`创建容器失败！\nError: ${data.data.ErrorMsg}`)
+					} else {
+						showErrorNotification(`创建容器失败！\nError: ${data.message}`)
+						throw new Error(`创建容器失败！\nError: ${data.message}`)
+					}
+				})
+			})
+			.catch(error => {
+				console.error(error);
+			});
 	}
 
 	function deleteDevContainer(repoId) {
@@ -1130,24 +1201,23 @@
 			},
 		})
 			.then(response => {
-				if (!response.ok) {
-					throw new Error('Network response was not ok when DELETEING devContainer by repoId' + response.statusText);
-				}
-				return response.json();
-			})
-			.then(data => {
-				const respCode = data.code;
-				if (0 == respCode) {
-					console.log('Successfully delete dev container belong to repoId:', repoId, data)
-					showMessage('positive', "删除容器成功！", 1500)
-				} else {
-					const errorMsg = data.data.ErrorMsg
-					throw new Error(errorMsg)
-				}
+				response.json().then(data => {
+					const responseCode = data.code
+					if (response.ok && responseCode === 0) {
+						showInformationNotification("删除容器成功！")
+						adjustBtnForRepoItem(repoId, false)
+						console.log('Successfully delete dev container belong to repoId:', repoId, data)
+					} else if (response.ok) {
+						showErrorNotification(`删除容器失败！\nError: ${data.data.ErrorMsg}`)
+						throw new Error(`删除容器失败！\nError: ${data.data.ErrorMsg}`)
+					} else {
+						showErrorNotification(`删除容器失败！\nError: ${data.message}`)
+						throw new Error(`删除容器失败！\nError: ${data.message}`)
+					}
+				})
 			})
 			.catch(error => {
-				showMessage('negative', `删除容器失败\n${error}`, 3000)
-				console.error(`Failed to delete dev container belong to repoId: ${repoId}\n`, error)
+				console.error(error)
 			})
 	}
 
@@ -1176,23 +1246,21 @@
 
 	// ===================================== Utils ===========================
 
-	// 统一message
-	function showMessage(type, message, duration) {
-		if ('positive' == type) {
-			document.getElementById('positive_message').innerHTML = message;
-			document.getElementById('positive_message').style.display = 'block';
-			document.getElementById('positive_message').focus();
-			setTimeout(function () {
-				document.getElementById('positive_message').style.display = 'none';
-			}, duration); // 消息显示 duration/1000 秒后消失
-		} else if ('negative' == type){
-			document.getElementById('negative_message').innerHTML = message;
-			document.getElementById('negative_message').style.display = 'block';
-			document.getElementById('negative_message').focus();
-			setTimeout(function () {
-				document.getElementById('negative_message').style.display = 'none';
-			}, duration); // 消息显示 duration/1000 秒后消失
-		}
+	// 统一通知
+	function showInformationNotification(message) {
+		communicateVSCodeByWebviewNoReturn('showInformationNotification', {message: message})
+	}
+
+	function showWarningNotification(message) {
+		communicateVSCodeByWebviewNoReturn('showWarningNotification', {message: message})
+	}
+
+	function showErrorNotification(message) {
+		communicateVSCodeByWebviewNoReturn('showErrorNotification', {message: message})
+	}
+
+	async function communicateVSCodeByWebviewNoReturn(action, data) {
+		window.parent.postMessage({target: "vscode_no_return", action: action, data: data}, "*");
 	}
 
 	async function communicateVSCodeByWebview(action, data) {
@@ -1225,6 +1293,3 @@
 
 </script>
 
-
-{{template "base/footer" .}}
-