diff --git a/public/index.html b/public/index.html
index b6991b4..389debf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -55,18 +55,18 @@
 			padding: var(--padding);
 			display: block;
 			border: solid 2px #11111b;
-			background-color: #31324480;
 			border-radius: 20px;
 		}
 
 		#stats {
+			background-color: #31324480;
 			right: var(--padding);
 			position: absolute;
 			top: var(--padding);
 		}
 
 		#controls {
-
+			background-color: #313244;
 		}
 
 		#interpolate {
@@ -75,14 +75,14 @@
 
 		#matrices {
 			display: grid;
-			grid-template-columns: repeat(6, 1fr);
+			grid-template-columns: 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px;
 			grid-gap: var(--padding);
 			padding-left: var(--padding);
 			padding-right: var(--padding);
 		}
 
-		#matrices > div {
-			background-color: rgba(255, 255, 255, 0.1);
+		.matrix {
+			background-color: #45475a;
 			border-radius: 20px;
 			display: flex;
 			justify-content: center;
@@ -92,7 +92,7 @@
 			overflow: hidden;
 		}
 
-		#matrices > div::before {
+		.matrix::before {
 			content: '';
 			position: absolute;
 			border-radius: 20px;
@@ -100,7 +100,26 @@
 			height: 100%;
 			right: 0;
 			top: 0;
-			background-color: rgba(255, 255, 255, 0.1);
+			background-color: #585b70;
+			transition: width linear 0.05s;
+		}
+		#matrices > span {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.matrix svg {
+			max-width: 100%;
+			height: auto;
+		}
+
+		.projection {
+			color: #f38ba8;
+		}
+
+		.lookAt {
+			color: #a6e3a1;
 		}
 	</style>
 </head>
@@ -121,9 +140,9 @@
 	</div>
 	<div id="controls">
 		<div id="matrices">
-			<div>
+			<span></span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & 0 \\
 				0 & 1 & 0 & 0 \\
@@ -132,9 +151,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				\frac{2}{r-l} & 0 & 0 & 0 \\
 				0 & \frac{2}{t-b} & 0 & 0 \\
@@ -143,9 +162,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & - \frac{r+l}{2} \\
 				0 & 1 & 0 & - \frac{t+b}{2} \\
@@ -154,9 +173,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix projection">
 				$$
-				\color{red}
 				\begin{pmatrix}
 				1 & 0 & 0 & 0 \\
 				0 & 1 & 0 & 0 \\
@@ -165,9 +184,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix lookAt">
 				$$
-				\color{green}
 				\begin{pmatrix}
 				u_x & u_y & u_z & 0 \\
 				v_x & v_y & v_z & 0 \\
@@ -176,9 +195,9 @@
 				\end{pmatrix}
 				$$
 			</div>
-			<div>
+			<span>$$\dot{}$$</span>
+			<div class="matrix lookAt">
 				$$
-				\color{green}
 				\begin{pmatrix}
 				1 & 0 & 0 & -e_x \\
 				0 & 1 & 0 & -e_y \\
@@ -187,6 +206,7 @@
 				\end{pmatrix}
 				$$
 			</div>
+			<span></span>
 		</div>
 		<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
 		<datalist id="steplist">
diff --git a/public/script.js b/public/script.js
index 6362917..84767ec 100644
--- a/public/script.js
+++ b/public/script.js
@@ -93,7 +93,7 @@ async function init() {
 	document.getElementById("interpolate").addEventListener("input", (e) => {
 		animation.time = 6.0 - e.target.value;
 		for (let i = 0; i < 6; ++i) {
-			document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
+			document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
 		}
 	});
 	document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
@@ -706,4 +706,4 @@ function hexToRgb(hex) {
 }
 
 
-window.addEventListener("DOMContentLoaded", init);
\ No newline at end of file
+window.addEventListener("DOMContentLoaded", init);