diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
index 30e42c77cc..8310d3a33f 100644
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu small-menu-items issue-list-navbar">
+<div class="switch">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
-</h2>
+</div>
diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
index 4c2d69355b..efe4fa6756 100644
--- a/templates/repo/issue/openclose.tmpl
+++ b/templates/repo/issue/openclose.tmpl
@@ -1,4 +1,4 @@
-<div class="small-menu-items ui compact tiny menu">
+<div class="switch">
 	<a class="{{if eq .State "open"}}active {{end}}item" href="{{.OpenLink}}" data-test-name="open-issue-count">
 		{{if .PageIsMilestones}}
 			{{svg "octicon-milestone" 16 "tw-mr-2"}}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 49ceb2c8ce..12830299cf 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -17,6 +17,7 @@
 @import "./modules/checkbox.css";
 @import "./modules/modal.css";
 
+@import "./modules/switch.css";
 @import "./modules/select.css";
 @import "./modules/tippy.css";
 @import "./modules/breadcrumb.css";
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css
new file mode 100644
index 0000000000..7afb275065
--- /dev/null
+++ b/web_src/css/modules/switch.css
@@ -0,0 +1,24 @@
+.switch {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  background: var(--color-menu);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--border-radius);
+}
+
+.switch .item {
+  color: var(--color-text);
+  padding: .5em 1.125em;
+  border-radius: var(--border-radius);
+  text-wrap: nowrap;
+}
+
+.switch .active.item {
+  background: var(--color-active);
+  outline: 1px solid var(--color-input-border);
+}
+
+.switch .item svg {
+  vertical-align: sub;
+}