diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 04b056cc60..739c5954b1 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -46,9 +46,15 @@
 						</div>
 					</div>
 				</div>
-				<div class="ui icon buttons small">
-					<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
-					<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
+				<div class="switch">
+					<button id="flow-color-monochrome" class="{{if eq .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">
+						{{svg "material-invert-colors" 16 "tw-mr-1"}}
+						{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}
+					</button>
+					<button id="flow-color-colored" class="{{if ne .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">
+						{{svg "material-palette" 16 "tw-mr-1"}}
+						{{ctx.Locale.Tr "repo.commit_graph.color"}}
+					</button>
 				</div>
 			</div>
 			<div id="git-graph-content">
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css
index 5250274d05..265c2ed45a 100644
--- a/web_src/css/modules/switch.css
+++ b/web_src/css/modules/switch.css
@@ -22,3 +22,11 @@
   background: var(--color-active);
   outline: 1px solid var(--color-input-border);
 }
+
+.switch .item svg {
+  vertical-align: sub;
+}
+
+.switch button.item {
+  background: transparent;
+}