diff --git a/routers/web/org/teams.go b/routers/web/org/teams.go
index 1e22a67032..1ebf400bd4 100644
--- a/routers/web/org/teams.go
+++ b/routers/web/org/teams.go
@@ -54,13 +54,40 @@ func Teams(ctx *context.Context) {
 	ctx.Data["Title"] = org.FullName
 	ctx.Data["PageIsOrgTeams"] = true
 
-	for _, t := range ctx.Org.Teams {
+	page := max(ctx.FormInt("page"), 1)
+	keyword := ctx.FormString("q")
+	ctx.Data["Keyword"] = keyword
+
+	opts := &org_model.SearchTeamOptions{
+		ListOptions: db.ListOptions{
+			Page:     page,
+			PageSize: setting.UI.MembersPagingNum,
+		},
+		OrgID:       org.ID,
+		Keyword:     keyword,
+		IncludeDesc: true,
+	}
+	if !ctx.Org.IsOwner && ctx.Doer != nil {
+		opts.UserID = ctx.Doer.ID
+	}
+
+	teams, total, err := org_model.SearchTeam(ctx, opts)
+	if err != nil {
+		ctx.ServerError("SearchTeam", err)
+		return
+	}
+
+	for _, t := range teams {
 		if err := t.LoadMembers(ctx); err != nil {
 			ctx.ServerError("GetMembers", err)
 			return
 		}
 	}
-	ctx.Data["Teams"] = ctx.Org.Teams
+
+	pager := context.NewPagination(total, setting.UI.MembersPagingNum, page, 5)
+	pager.AddParamFromRequest(ctx.Req)
+	ctx.Data["Page"] = pager
+	ctx.Data["Teams"] = teams
 
 	ctx.HTML(http.StatusOK, tplTeams)
 }
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index 5ea15068fe..79e4c53e43 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -3,45 +3,61 @@
 	{{template "org/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		{{if .IsOrganizationOwner}}
-			<div class="flex-text-block">
-				<div class="tw-flex-1">{{ctx.Locale.Tr "org.teams.manage_team_member_prompt"}}</div>
+		<div class="flex-text-block">
+			<form class="tw-flex-1 ignore-dirty" action="{{.OrgLink}}/teams" method="get">
+				<div class="ui small action input">
+					<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autofocus>
+					<button class="ui small button">{{svg "octicon-search"}}</button>
+				</div>
+			</form>
+			{{if .IsOrganizationOwner}}
 				<a class="ui primary button" href="{{.OrgLink}}/teams/new">{{svg "octicon-plus"}} {{ctx.Locale.Tr "org.create_new_team"}}</a>
-			</div>
-			<div class="divider"></div>
+			{{end}}
+		</div>
+		{{if .IsOrganizationOwner}}
+			<p class="tw-mt-2 tw-mb-2 tw-text-text-light-1">{{ctx.Locale.Tr "org.teams.manage_team_member_prompt"}}</p>
 		{{end}}
-
-		<div class="ui two column stackable grid">
+		<div class="divider"></div>
+		<div class="flex-list">
 			{{range .Teams}}
-				<div class="column">
-					<div class="ui top attached header">
-						<a class="tw-text-text" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
-						<div class="ui right">
-							<a class="ui primary tiny button" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{ctx.Locale.Tr "view"}}</a>
-							{{if .IsMember ctx $.SignedUser.ID}}
-								<form>
-									<button class="ui red tiny button delete-button" data-modal-id="leave-team"
-										data-url="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/action/leave" data-datauid="{{$.SignedUser.ID}}"
-										data-name="{{.Name}}">{{ctx.Locale.Tr "org.teams.leave"}}</button>
-								</form>
-							{{else if $.IsOrganizationOwner}}
-								<form method="post" action="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/action/join">
-									<button type="submit" class="ui primary tiny button" name="uid" value="{{$.SignedUser.ID}}">{{ctx.Locale.Tr "org.teams.join"}}</button>
-								</form>
+				<div class="flex-item">
+					<div class="flex-item-main">
+						<div class="flex-item-title">
+							<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
+						</div>
+						{{if .Description}}
+							<div class="flex-item-body">{{.Description}}</div>
+						{{end}}
+						<div class="flex-item-body tw-flex tw-gap-4 tw-text-text-light-1">
+							<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{svg "octicon-person" 14}} {{.NumMembers}} {{ctx.Locale.Tr "org.lower_members"}}</a>
+							<a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories">{{svg "octicon-repo" 14}} {{.NumRepos}} {{ctx.Locale.Tr "org.lower_repositories"}}</a>
+						</div>
+						<div class="flex-item-body tw-flex tw-gap-1">
+							{{range .Members}}
+								{{template "shared/user/avatarlink" dict "user" .}}
 							{{end}}
 						</div>
 					</div>
-					<div class="ui attached segment members">
-						{{range .Members}}
-							{{template "shared/user/avatarlink" dict "user" .}}
+					<div class="flex-item-trailing">
+						<a class="ui primary tiny button" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{ctx.Locale.Tr "view"}}</a>
+						{{if .IsMember ctx $.SignedUser.ID}}
+							<form>
+								<button class="ui red tiny button delete-button" data-modal-id="leave-team"
+									data-url="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/action/leave" data-datauid="{{$.SignedUser.ID}}"
+									data-name="{{.Name}}">{{ctx.Locale.Tr "org.teams.leave"}}</button>
+							</form>
+						{{else if $.IsOrganizationOwner}}
+							<form method="post" action="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/action/join">
+								<button type="submit" class="ui primary tiny button" name="uid" value="{{$.SignedUser.ID}}">{{ctx.Locale.Tr "org.teams.join"}}</button>
+							</form>
 						{{end}}
 					</div>
-					<div class="ui bottom attached header">
-						<p class="team-meta"><a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{.NumMembers}} {{ctx.Locale.Tr "org.lower_members"}}</a> · <a class="muted" href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories">{{.NumRepos}} {{ctx.Locale.Tr "org.lower_repositories"}}</a></p>
-					</div>
 				</div>
+			{{else}}
+				<div class="empty center">{{ctx.Locale.Tr "no_results_found"}}</div>
 			{{end}}
 		</div>
+		{{template "base/paginate" .}}
 	</div>
 </div>
 <div class="ui g-modal-confirm delete modal" id="leave-team">