diff --git a/css/style.css b/css/style.css
index 38f2868..85d7a25 100755
--- a/css/style.css
+++ b/css/style.css
@@ -135,31 +135,6 @@ header {
 	padding: 0 1.3em;
 }
 
-/* Credit to Lea Verou: https://twitter.com/LeaVerou/status/1449514764221272064 and https://codepen.io/leaverou/pen/abydReB */
-[mv-app="gameState"] meter {
-	display: inline-block;
-	inline-size: 3em;
-	font-size: 130%;
-	background: var(--icon-faded) 0 / auto 100%;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-inner-element {
-	display: block;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-bar {
-	border: none;
-	background: transparent;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-optimum-value {
-	background: var(--icon) 0 / auto 100%;
-}
-
-[mv-app="gameState"] meter::-moz-meter-bar {
-	background: var(--icon) 0 / auto 100%;
-}
-
 #game-board {
 	--theme-color: #ee7622;
 	--matched-card: #eee;
diff --git a/index.html b/index.html
index 7ba18cc..915ac6f 100755
--- a/index.html
+++ b/index.html
@@ -15,6 +15,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css" />
 	<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
 
+	<!-- NudeUI -->
+	<script src="https://nudeui.com/elements/meter-discrete/meter-discrete.js" type="module"></script>
+
 	<link rel="stylesheet prefetch" href="css/style.css" />
 	<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🧠</text></svg>' />
 	<title>Memory Game</title>
@@ -58,7 +61,7 @@ <h2>
 
 	<main>
 		<section mv-app="gameState">
-			<meter value="[game.rating]" max="3"></meter>
+			<meter-discrete value="[game.rating]" max="3"></meter-discrete>
 
 			<div id="moves-counter" mv-value="[pluralize(game.move, 'move', 'moves')]">0 moves</div>