diff --git a/resources/skins.citizen.scripts/checkbox.js b/resources/skins.citizen.scripts/checkbox.js
index 0799a51d..961e985c 100644
--- a/resources/skins.citizen.scripts/checkbox.js
+++ b/resources/skins.citizen.scripts/checkbox.js
@@ -6,10 +6,10 @@
 
 const
 	checkboxHack = require( 'mediawiki.page.ready' ).checkboxHack,
-	CHECKBOX_HACK_CONTAINER_SELECTOR = '.mw-checkbox-hack-container',
-	CHECKBOX_HACK_CHECKBOX_SELECTOR = '.mw-checkbox-hack-checkbox',
-	CHECKBOX_HACK_BUTTON_SELECTOR = '.mw-checkbox-hack-button',
-	CHECKBOX_HACK_TARGET_SELECTOR = '.mw-checkbox-hack-target';
+	CHECKBOX_HACK_CONTAINER_SELECTOR = '.citizen-menu-checkbox-container',
+	CHECKBOX_HACK_CHECKBOX_SELECTOR = '.citizen-menu-checkbox-checkbox',
+	CHECKBOX_HACK_BUTTON_SELECTOR = '.citizen-menu-checkbox-button',
+	CHECKBOX_HACK_TARGET_SELECTOR = '.citizen-menu-checkbox-target';
 
 /**
  * Set the checked state and fire the 'input' event.
diff --git a/resources/skins.citizen.styles/Header.less b/resources/skins.citizen.styles/Header.less
index 97082f15..ac12c475 100644
--- a/resources/skins.citizen.styles/Header.less
+++ b/resources/skins.citizen.styles/Header.less
@@ -84,7 +84,7 @@
 		justify-content: space-between;
 		gap: var( --space-xxs );
 
-		.mw-checkbox-hack-checkbox:checked {
+		.citizen-menu-checkbox-checkbox:checked {
 			~ .citizen-header__button {
 				background-color: var( --background-color-primary--active );
 			}
diff --git a/resources/skins.citizen.styles/Menu.less b/resources/skins.citizen.styles/Menu.less
index 3dfa6d3a..523931e9 100644
--- a/resources/skins.citizen.styles/Menu.less
+++ b/resources/skins.citizen.styles/Menu.less
@@ -34,7 +34,7 @@
 /**
  * Invisible checkbox covering the menu button.
  */
-.mw-checkbox-hack {
+.citizen-menu-checkbox {
 	// Has to be visible to be focusable
 	&-checkbox {
 		position: absolute;
@@ -50,7 +50,7 @@
 		// HACK: Fake focus styles
 		&:focus {
 			& + .citizen-header__button,
-			& + .mw-checkbox-hack-button {
+			& + .citizen-menu-checkbox-button {
 				outline: 2px solid var( --color-primary );
 				outline-offset: 1px;
 			}
diff --git a/resources/skins.citizen.styles/Pagetools.less b/resources/skins.citizen.styles/Pagetools.less
index 4e00a4b8..330e1022 100644
--- a/resources/skins.citizen.styles/Pagetools.less
+++ b/resources/skins.citizen.styles/Pagetools.less
@@ -109,7 +109,7 @@
 	}
 
 	// TODO: Merge this with header styles
-	.mw-checkbox-hack-checkbox:checked ~ .page-actions__button {
+	.citizen-menu-checkbox-checkbox:checked ~ .page-actions__button {
 		background-color: var( --background-color-primary--active );
 	}
 }
diff --git a/templates/Drawer.mustache b/templates/Drawer.mustache
index cc190cd0..97d523cb 100644
--- a/templates/Drawer.mustache
+++ b/templates/Drawer.mustache
@@ -2,17 +2,17 @@
 	string msg-citizen-drawer-toggle The label used by the drawer button.
 	string msg-sitetitle the contents of the sitesubtitle message key
 }}
-<div class="citizen-drawer citizen-header__item mw-checkbox-hack-container">
+<div class="citizen-drawer citizen-header__item citizen-menu-checkbox-container">
 	<input 
 		type="checkbox" 
 		id="citizen-drawer__checkbox" 
-		class="mw-checkbox-hack-checkbox"
+		class="citizen-menu-checkbox-checkbox"
 		role="button"
 		aria-labelledby="citizen-drawer__buttonCheckbox"
 		aria-haspopup="true">
 	{{>Drawer__button}}
 	{{! ID needed for a11y and checkbox hack }}
-	<aside id="citizen-drawer__card" class="citizen-drawer__card mw-checkbox-hack-target">
+	<aside id="citizen-drawer__card" class="citizen-drawer__card citizen-menu-checkbox-target">
 		<header class="citizen-drawer__header">
 			{{>Drawer__logo}}
 			<div class="citizen-drawer__siteinfo">
diff --git a/templates/Drawer__button.mustache b/templates/Drawer__button.mustache
index d4ab581c..0305a334 100644
--- a/templates/Drawer__button.mustache
+++ b/templates/Drawer__button.mustache
@@ -1,18 +1,18 @@
- {{!
-	string msg-citizen-drawer-toggle The label used by the drawer button.
-}}
-<div class="citizen-drawer__button citizen-header__button">
-	<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
-		<div></div>
-		<div></div>
-		<div></div>
-	</div>
-	<label
-		id="citizen-drawer__buttonCheckbox"
-		class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
-		for="citizen-drawer__checkbox"
-		title="{{msg-citizen-drawer-toggle}}"
-		aria-hidden="true">
-		<span>{{msg-citizen-drawer-toggle}}</span>
-	</label>
+ {{!
+	string msg-citizen-drawer-toggle The label used by the drawer button.
+}}
+<div class="citizen-drawer__button citizen-header__button">
+	<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
+		<div></div>
+		<div></div>
+		<div></div>
+	</div>
+	<label
+		id="citizen-drawer__buttonCheckbox"
+		class="citizen-menu-checkbox-button citizen-header__buttonCheckbox"
+		for="citizen-drawer__checkbox"
+		title="{{msg-citizen-drawer-toggle}}"
+		aria-hidden="true">
+		<span>{{msg-citizen-drawer-toggle}}</span>
+	</label>
 </div>
\ No newline at end of file
diff --git a/templates/PageTools.mustache b/templates/PageTools.mustache
index ad892e7d..c5e8ba15 100644
--- a/templates/PageTools.mustache
+++ b/templates/PageTools.mustache
@@ -12,24 +12,24 @@
 		{{#data-portlets.data-associated-pages}}{{>Menu}}{{/data-portlets.data-associated-pages}}
 	{{/pagetools-visible}}
 	{{#pagetools-overflow}}
-	<div class="page-actions-more page-actions__item mw-checkbox-hack-container">
+	<div class="page-actions-more page-actions__item citizen-menu-checkbox-container">
 		<input 
 			type="checkbox" 
 			id="page-actions-more__checkbox" 
-			class="mw-checkbox-hack-checkbox"
+			class="citizen-menu-checkbox-checkbox"
 			role="button"
 			aria-labelledby="page-actions-more__buttonCheckbox"
 			aria-haspopup="true">
 		<label
 			id="page-actions-more__buttonCheckbox" 
-			class="mw-checkbox-hack-button page-actions__button page-actions__button--icon" 
+			class="citizen-menu-checkbox-button page-actions__button page-actions__button--icon" 
 			for="page-actions-more__checkbox"
 			title="{{msg-citizen-actions-more-toggle}}"
 			aria-hidden="true">
 			<span class="citizen-ui-icon mw-ui-icon-wikimedia-ellipsis"></span>
 			<span>{{msg-citizen-actions-more-toggle}}</span>
 		</label>
-		<aside id="page-actions-more__card" class="page-actions__card mw-checkbox-hack-target">
+		<aside id="page-actions-more__card" class="page-actions__card citizen-menu-checkbox-target">
 			{{#pagetools-visible}}
 				{{#data-portlets.data-actions}}{{>Menu}}{{/data-portlets.data-actions}}
 			{{/pagetools-visible}}
diff --git a/templates/PageTools__languages.mustache b/templates/PageTools__languages.mustache
index 232a3d54..e115d995 100644
--- a/templates/PageTools__languages.mustache
+++ b/templates/PageTools__languages.mustache
@@ -3,17 +3,17 @@
 	object data-page-variants
 	bool is-uls-ready
 }}
-<div class="citizen-languages page-actions__item mw-checkbox-hack-container">
+<div class="citizen-languages page-actions__item citizen-menu-checkbox-container">
 	<input 
 		type="checkbox" 
 		id="citizen-languages__checkbox" 
-		class="mw-checkbox-hack-checkbox {{#is-uls-ready}}mw-interlanguage-selector{{/is-uls-ready}}"
+		class="citizen-menu-checkbox-checkbox {{#is-uls-ready}}mw-interlanguage-selector{{/is-uls-ready}}"
 		role="button"
 		aria-labelledby="citizen-languages__buttonCheckbox"
 		aria-haspopup="true">
 	<label
 		id="citizen-languages__buttonCheckbox" 
-		class="mw-checkbox-hack-button page-actions__button" 
+		class="citizen-menu-checkbox-button page-actions__button" 
 		for="citizen-languages__checkbox"
 		title="{{msg-citizen-languages-toggle}}"
 		aria-hidden="true"
@@ -21,7 +21,7 @@
 		<span class="citizen-ui-icon mw-ui-icon-wikimedia-textLanguage"></span>
 		<span>{{msg-citizen-languages-toggle}}</span>
 	</label>
-	<aside id="citizen-languages__card" class="page-actions__card mw-checkbox-hack-target">
+	<aside id="citizen-languages__card" class="page-actions__card citizen-menu-checkbox-target">
 		{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
 		{{#data-portlets.data-variants}}{{>Menu}}{{/data-portlets.data-variants}}
 	</aside>
diff --git a/templates/Search.mustache b/templates/Search.mustache
index 18656da9..70d38198 100644
--- a/templates/Search.mustache
+++ b/templates/Search.mustache
@@ -6,16 +6,16 @@
 	string html-random-href URL of Special:Random
 	string msg-randompage tooltip message for random page button
 }}
-<div class="citizen-search citizen-header__item mw-checkbox-hack-container">
+<div class="citizen-search citizen-header__item citizen-menu-checkbox-container">
 	<input
 		type="checkbox" 
 		id="citizen-search__checkbox" 
-		class="mw-checkbox-hack-checkbox"
+		class="citizen-menu-checkbox-checkbox"
 		role="button"
 		aria-labelledby="citizen-search__buttonCheckbox"
 		aria-haspopup="true">
 	{{>Search__button}}
-	<div role="search" class="citizen-search-box citizen-search__card mw-checkbox-hack-target">
+	<div role="search" class="citizen-search-box citizen-search__card citizen-menu-checkbox-target">
 		<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
 		<form action="{{form-action}}" id="searchform" autocomplete="off">
 			<input type="hidden" name="title" value="{{page-title}}">
diff --git a/templates/Search__button.mustache b/templates/Search__button.mustache
index b3f33f3a..0b0d8cb4 100644
--- a/templates/Search__button.mustache
+++ b/templates/Search__button.mustache
@@ -10,7 +10,7 @@
 	</div>
 	<label
 		id="citizen-search__buttonCheckbox" 
-		class="mw-checkbox-hack-button citizen-header__buttonCheckbox" 
+		class="citizen-menu-checkbox-button citizen-header__buttonCheckbox" 
 		for="citizen-search__checkbox"
 		title="{{msg-citizen-search-toggle}} {{msg-citizen-search-toggle-shortcut}}"
 		aria-hidden="true">
diff --git a/templates/TableOfContents.mustache b/templates/TableOfContents.mustache
index daf80012..61383be5 100644
--- a/templates/TableOfContents.mustache
+++ b/templates/TableOfContents.mustache
@@ -1,22 +1,22 @@
 {{#data-toc}}
-<div class="citizen-toc mw-checkbox-hack-container">
+<div class="citizen-toc citizen-menu-checkbox-container">
 	<input 
 		type="checkbox" 
 		id="citizen-toc__checkbox" 
-		class="mw-checkbox-hack-checkbox"
+		class="citizen-menu-checkbox-checkbox"
 		role="button"
 		aria-labelledby="citizen-toc__buttonCheckbox"
 		aria-haspopup="true">
 	<label
 		id="citizen-toc__buttonCheckbox" 
-		class="mw-checkbox-hack-button" 
+		class="citizen-menu-checkbox-button" 
 		for="citizen-toc__checkbox"
 		title="{{msg-toc}}"
 		aria-hidden="true">
 		<span class="citizen-ui-icon mw-ui-icon-wikimedia-listBullet"></span>
 		<span id="mw-panel-toc-label">{{msg-toc}}</span>
 	</label>
-	<nav id="mw-panel-toc" class="citizen-toc__card mw-checkbox-hack-target" role="navigation" aria-labelledby="mw-panel-toc-label">
+	<nav id="mw-panel-toc" class="citizen-toc__card citizen-menu-checkbox-target" role="navigation" aria-labelledby="mw-panel-toc-label">
 		<a class="citizen-toc__top citizen-toc__link" title="{{html-citizen-jumptotop}}" href="#top">
 			<div class="citizen-toc__text">{{msg-citizen-jumptotop}}</div>
 		</a>
diff --git a/templates/UserMenu.mustache b/templates/UserMenu.mustache
index de552f64..ddc8ed80 100644
--- a/templates/UserMenu.mustache
+++ b/templates/UserMenu.mustache
@@ -1,24 +1,24 @@
 {{!
 	string msg-citizen-usermenu-toggle The label used by the user menu button.
 }}
-<div class="citizen-userMenu citizen-header__item mw-checkbox-hack-container">
+<div class="citizen-userMenu citizen-header__item citizen-menu-checkbox-container">
 	<input 
 		type="checkbox" 
 		id="citizen-userMenu__checkbox" 
-		class="mw-checkbox-hack-checkbox"
+		class="citizen-menu-checkbox-checkbox"
 		role="button"
 		aria-labelledby="citizen-userMenu__buttonCheckbox"
 		aria-haspopup="true">
 	<label
 		id="citizen-userMenu__buttonCheckbox" 
-		class="mw-checkbox-hack-button citizen-header__button" 
+		class="citizen-menu-checkbox-button citizen-header__button" 
 		for="citizen-userMenu__checkbox"
 		title="{{msg-citizen-usermenu-toggle}}"
 		aria-hidden="true">
 		<span class="citizen-ui-icon mw-ui-icon-wikimedia-userAvatar"></span>
 		<span>{{msg-citizen-usermenu-toggle}}</span>
 	</label>
-	<aside id="citizen-userMenu__card" class="citizen-userMenu__card mw-checkbox-hack-target">
+	<aside id="citizen-userMenu__card" class="citizen-userMenu__card citizen-menu-checkbox-target">
 		{{#data-user-info}}
 			<div class="citizen-userMenu__header">{{>Menu}}</div>
 		{{/data-user-info}}