diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 512d91393e..a2211fc1be 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2872,7 +2872,6 @@ teams.all_repositories = All repositories
 teams.all_repositories_helper = Team has access to all repositories. Selecting this will <strong>add all existing</strong> repositories to the team.
 teams.invite.title = You have been invited to join team <strong>%s</strong> in organization <strong>%s</strong>.
 teams.invite.by = Invited by %s
-teams.invite.description = Please click the button below to join the team.
 
 [admin]
 dashboard = Dashboard
diff --git a/templates/org/team/invite.tmpl b/templates/org/team/invite.tmpl
index 14a97ae659..749f99968a 100644
--- a/templates/org/team/invite.tmpl
+++ b/templates/org/team/invite.tmpl
@@ -2,20 +2,17 @@
 <div role="main" aria-label="{{.Title}}" class="page-content organization invite">
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div class="ui centered card">
-			<div class="image">
-				{{ctx.AvatarUtils.Avatar .Organization 140}}
-			</div>
-			<div class="content">
-				<div class="header">{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</div>
-				<div class="meta">{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</div>
-				<div class="description">{{ctx.Locale.Tr "org.teams.invite.description"}}</div>
-			</div>
-			<div class="extra content">
-				<form class="ui form" action="" method="post">
-					<button class="fluid ui primary button">{{ctx.Locale.Tr "org.teams.join"}}</button>
-				</form>
-			</div>
+		<div class="invite-content">
+			<hgroup>
+				<div>{{ctx.AvatarUtils.Avatar .Organization 140}}</div>
+				<h2>{{ctx.Locale.Tr "org.teams.invite.title" .Team.Name .Organization.Name}}</h2>
+			</hgroup>
+
+			<p>{{ctx.Locale.Tr "org.teams.invite.by" .Inviter.Name}}</p>
+
+			<form class="ui form" action="" method="post">
+				<button class="ui primary button">{{ctx.Locale.Tr "org.teams.join"}}</button>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/tests/integration/org_team_invite_test.go b/tests/integration/org_team_invite_test.go
index ab2962b5d0..b36d1acb71 100644
--- a/tests/integration/org_team_invite_test.go
+++ b/tests/integration/org_team_invite_test.go
@@ -57,8 +57,17 @@ func TestOrgTeamEmailInvite(t *testing.T) {
 
 	session = loginUser(t, user.Name)
 
-	// join the team
+	// get the invite page
 	inviteURL := fmt.Sprintf("/org/invite/%s", invites[0].Token)
+	req = NewRequest(t, "GET", inviteURL)
+	resp = session.MakeRequest(t, req, http.StatusOK)
+	doc := NewHTMLParser(t, resp.Body)
+
+	// check the button exists
+	submitButton := doc.Find(`button:contains('Join')`).Length()
+	assert.Equal(t, 1, submitButton)
+
+	// join the team
 	req = NewRequest(t, "POST", inviteURL)
 	resp = session.MakeRequest(t, req, http.StatusSeeOther)
 	req = NewRequest(t, "GET", test.RedirectURL(resp))
diff --git a/web_src/css/org.css b/web_src/css/org.css
index 1ea22dcdbb..3653afe912 100644
--- a/web_src/css/org.css
+++ b/web_src/css/org.css
@@ -155,24 +155,22 @@
   margin-bottom: 5px;
 }
 
-.organization.invite #invite-box {
-  margin: 50px auto auto;
-  width: 500px !important;
+.organization.invite .invite-content {
+  max-width: 420px;
+  margin-inline: auto;
+  margin-block: 3rem;
+  text-align: center;
 }
-
-.organization.invite #invite-box #search-user-box input {
-  margin-inline-start: 0;
-  width: 300px;
+.organization.invite .invite-content :is(h2, p) {
+  text-wrap: balance;
+  overflow-wrap: break-word;
 }
-
-.organization.invite #invite-box .ui.button {
-  margin-inline-start: 5px;
-  margin-top: -3px;
+.organization.invite .invite-content h2 {
+  margin-block-end: 1rem;
+  font-size: 1.3rem;
 }
-
-.organization.invite .ui.avatar {
-  width: 100%;
-  height: 100%;
+.organization.invite h2 :is(b, strong) {
+  font-weight: var(--font-weight-bold);
 }
 
 .organization.teams .detail .item {