diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss
index 8dda35a0607..78a6dd7e2b4 100644
--- a/stylesheets/Main.scss
+++ b/stylesheets/Main.scss
@@ -47,6 +47,7 @@
 @use "commons/Navbox";
 @use "commons/OpponentList";
 @use "commons/Panels";
+@use "commons/Placement";
 @use "commons/Prizepooltable";
 @use "commons/Quote";
 @use "commons/Selectall";
diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss
index 9b60fe62ad7..6c7b00ded9a 100644
--- a/stylesheets/commons/Miscellaneous.scss
+++ b/stylesheets/commons/Miscellaneous.scss
@@ -1303,67 +1303,6 @@ kbd {
 	font-family: "Open Sans", sans-serif;
 }
 
-/*******************************************************************************
-Template(s): Achievement Table Placement Numbers
-Author(s): spazer, Lafungo
-*******************************************************************************/
-.placement-text {
-	text-shadow: 1px 1px rgba( 64, 64, 64, 0.4 ), 1px -1px rgba( 64, 64, 64, 0.4 ), -1px -1px rgba( 64, 64, 64, 0.4 ), -1px 1px rgba( 64, 64, 64, 0.4 );
-	font-weight: bold;
-	color: #ffffff;
-}
-
-.placement-box {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	align-self: center;
-	border-radius: 0.25rem;
-	padding: 0 0.5rem;
-	min-width: 2.75rem;
-	height: 1.5rem;
-	font-size: 0.8125rem;
-	line-height: 1.25;
-}
-
-$placement-colors: (
-	"1": ( var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) ),
-	"2": ( var( --clr-semantic-silver-40 ) ),
-	"3": ( var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) ),
-	"4": ( var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) ),
-	"5": ( var( --clr-elm-40 ), var( --clr-elm-30 ) ),
-	"6": ( var( --clr-elm-30 ), var( --clr-elm-20 ) ),
-	"lightblue": ( var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) ),
-	"blue": ( var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) ),
-	"darkblue": ( var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) ),
-	"darkgrey": ( var( --clr-elm-10 ) ),
-	"win": ( var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) ),
-	"draw": ( var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) ),
-	"lose": ( var( --clr-secondary-80 ), var( --clr-secondary-25 ) ),
-	"up": ( var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) ),
-	"stay": ( var( --clr-sun-40 ), var( --clr-sun-30 ) ),
-	"down": ( color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) ),
-	"dnp": ( var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) ),
-);
-
-@each $name, $colors in $placement-colors {
-	.placement-#{$name} {
-		@if length( $colors ) == 2 {
-			.theme--light & {
-				background-color: nth( $colors, 1 );
-			}
-
-			.theme--dark & {
-				background-color: nth( $colors, 2 );
-			}
-		}
-
-		@else {
-			background-color: nth( $colors, 1 );
-		}
-	}
-}
-
 .green-check {
 	color: #00a901;
 	font-size: 14px;
diff --git a/stylesheets/commons/Placement.scss b/stylesheets/commons/Placement.scss
new file mode 100644
index 00000000000..fcd9de530a2
--- /dev/null
+++ b/stylesheets/commons/Placement.scss
@@ -0,0 +1,53 @@
+/*******************************************************************************
+Template(s): Achievement Table Placement Numbers
+Author(s): spazer, Lafungo
+*******************************************************************************/
+.placement-text {
+	text-shadow: 1px 1px rgba( 64, 64, 64, 0.4 ), 1px -1px rgba( 64, 64, 64, 0.4 ), -1px -1px rgba( 64, 64, 64, 0.4 ), -1px 1px rgba( 64, 64, 64, 0.4 );
+	font-weight: bold;
+	color: #ffffff;
+}
+
+.placement-box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	align-self: center;
+	border-radius: 0.25rem;
+	padding: 0 0.5rem;
+	min-width: 2.75rem;
+	height: 1.5rem;
+	font-size: 0.8125rem;
+	line-height: 1.25;
+	white-space: nowrap;
+}
+
+@mixin placement-color($name, $lightmode-color, $darkmode-color: false) {
+	.placement-#{$name} {
+		background-color: $lightmode-color;
+
+		@if $darkmode-color {
+			.theme--dark & {
+				background-color: $darkmode-color;
+			}
+		}
+	}
+}
+
+@include placement-color( 1, var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) );
+@include placement-color( 2, var( --clr-semantic-silver-40 ) );
+@include placement-color( 3, var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) );
+@include placement-color( 4, var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) );
+@include placement-color( 5, var( --clr-elm-40 ), var( --clr-elm-30 ) );
+@include placement-color( 6, var( --clr-elm-30 ), var( --clr-elm-20 ) );
+@include placement-color( "lightblue", var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) );
+@include placement-color( "blue", var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) );
+@include placement-color( "darkblue", var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) );
+@include placement-color( "darkgrey", var( --clr-elm-10 ) );
+@include placement-color( "win", var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) );
+@include placement-color( "draw", var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) );
+@include placement-color( "lose", var( --clr-secondary-80 ), var( --clr-secondary-25 ) );
+@include placement-color( "up", var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) );
+@include placement-color( "stay", var( --clr-sun-40 ), var( --clr-sun-30 ) );
+@include placement-color( "down", color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) );
+@include placement-color( "dnp", var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) );