diff --git a/docs/src/assets/bg.svg b/docs/src/assets/bg.svg
new file mode 100644
index 0000000..d440219
--- /dev/null
+++ b/docs/src/assets/bg.svg
@@ -0,0 +1,46 @@
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="500" id="gradient-1" gradientTransform="matrix(0.999973, 0.007437, -0.00736, 0.989676, 19.200868, 2.574194)">
+      <stop offset="0" style="stop-color: rgba(0, 0, 0, 0);"></stop>
+      <stop offset="0.150" style="stop-color: rgb(125, 125, 125, .3);"></stop>
+      <stop offset="0.500" style="stop-color: rgb(125, 125, 125, .3);"></stop>
+      <stop offset="0.850" style="stop-color: rgb(125, 125, 125, .3);"></stop>
+      <stop offset="1" style="stop-color: rgba(0, 0, 0, 0);"></stop>
+    </linearGradient>
+	<style>
+		.point{
+			animation: move 7.5s infinite linear;	
+			stroke-width: 4px;
+			stroke: #ff3e0099;
+			stroke-dasharray: 5 1000;
+			stroke-linecap: round;
+			stroke-dashoffset: 10;
+			filter: drop-shadow(0px 0px 2px red);
+		}
+
+		@keyframes move{
+			from{
+				stroke-dashoffset: 10;
+			}
+			20%, to{
+				stroke-dashoffset: 1010;
+			}
+		}
+	</style>
+  </defs>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" x1="50" y1="0" x2="50" y2="500"></line>
+  <line class="point" x1="50" y1="0" x2="50" y2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" x1="150" y1="0" x2="150" y2="500"></line>
+  <line class="point" style="animation-delay: 2.5s;" x1="150" y1="0" x2="150" y2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" x1="250" y1="0" x2="250" y2="500"></line>
+  <line class="point" style="animation-delay: 5.7s" x1="250" y1="0" x2="250" y2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" x1="350" y1="0" x2="350" y2="500"></line>
+  <line class="point" style="animation-delay: 1.3s" x1="350" y1="0" x2="350" y2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" x1="450" y1="0" x2="450" y2="500"></line>
+  <line class="point" style="animation-delay: 8.6s" x1="450" y1="0" x2="450" y2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" y1="50" x1="0" y2="50" x2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" y1="150" x1="0" y2="150" x2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" y1="250" x1="0" y2="250" x2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" y1="350" x1="0" y2="350" x2="500"></line>
+  <line style="stroke-width: 1px; fill: rgb(193, 84, 84); stroke: url(#gradient-1);" y1="450" x1="0" y2="450" x2="500"></line>
+</svg>
diff --git a/docs/src/assets/houston.webp b/docs/src/assets/houston.webp
deleted file mode 100644
index 930c164..0000000
Binary files a/docs/src/assets/houston.webp and /dev/null differ
diff --git a/docs/src/styles/global.css b/docs/src/styles/global.css
index edbd90c..a7827c4 100644
--- a/docs/src/styles/global.css
+++ b/docs/src/styles/global.css
@@ -2,36 +2,37 @@
 :root {
 	--sl-color-accent-low: #421107;
 	--sl-color-accent: #bd2b00;
-	--sl-color-accent-high: #f7b7a7;
+	--sl-color-accent-high: #fff0eb;
 	--sl-color-white: #ffffff;
-	--sl-color-gray-1: #f1edea;
-	--sl-color-gray-2: #c5c1be;
-	--sl-color-gray-3: #928a84;
-	--sl-color-gray-4: #5e5651;
-	--sl-color-gray-5: #3e3732;
-	--sl-color-gray-6: #2c2521;
-	--sl-color-black: #1b1715;
+	--sl-color-gray-1: #eeeeee;
+	--sl-color-gray-2: #c2c2c2;
+	--sl-color-gray-3: #8b8b8b;
+	--sl-color-gray-4: #585858;
+	--sl-color-gray-5: #383838;
+	--sl-color-gray-6: #272727;
+	--sl-color-black: #181818;
 }
 
 /* Light mode colors. */
 :root[data-theme='light'] {
 	--sl-color-accent-low: #fbcabe;
 	--sl-color-accent: #c02c00;
-	--sl-color-accent-high: #5f1100;
-	--sl-color-white: #1b1715;
-	--sl-color-gray-1: #2c2521;
-	--sl-color-gray-2: #3e3732;
-	--sl-color-gray-3: #5e5651;
-	--sl-color-gray-4: #928a84;
-	--sl-color-gray-5: #c5c1be;
-	--sl-color-gray-6: #f1edea;
-	--sl-color-gray-7: #f8f6f5;
+	--sl-color-accent-high: #521400;
+	--sl-color-white: #181818;
+	--sl-color-gray-1: #272727;
+	--sl-color-gray-2: #383838;
+	--sl-color-gray-3: #585858;
+	--sl-color-gray-4: #8b8b8b;
+	--sl-color-gray-5: #c2c2c2;
+	--sl-color-gray-6: #eeeeee;
+	--sl-color-gray-7: #f6f6f6;
 	--sl-color-black: #ffffff;
 }
 
 [data-has-hero] {
 	& body {
-		background: linear-gradient(var(--sl-color-bg), var(--sl-color-accent));
+		background-image: url(../assets/bg.svg);
+		background-size: cover;
 	}
 
 	& header {