diff --git a/index.html b/index.html
index 63bb317..69b9757 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
         body {
-            background-color: black;
-            color: white;
+            background-color: #0B0C10;
+            color: #E5E5E5;
             font-family: Arial, sans-serif;
         }
 
@@ -17,6 +17,17 @@
             margin: auto;
         }
 
+        #title {
+            padding: 1rem 2rem;
+        }
+
+        .divider {
+            height: 1px;
+            width: 80%;
+
+            background-color: #E5E5E5;
+        }
+
         .legend {
             font-size: 12px;
             display: flex;
@@ -38,30 +49,31 @@
     </style>
 </head>
 <body>
-    <h2>Live Activity</h2>
-
-    <div class="divider"></div>
-
+    <h2 id="title">Live Activity</h2>
     
     <div id="chart"></div>
     <div id="legend" class="legend"></div>
 
     <script>
         const horizontal = true;
-        const categoryAmount = 5;
+        const categoryAmount = 10;
+
+        const parentWidth = document.querySelector('#chart').parentElement.offsetWidth;
 
         // Dimensions
         const margin = { top: 20, right: 20, bottom: 20, left: 50 };
-        const width = 800 - margin.left - margin.right;
-        const height = 85 * categoryAmount / 2 - margin.top - margin.bottom;
+        //const width = 1200 - margin.left - margin.right;
+        const width = parentWidth - margin.left - margin.right;
+        const blockLength = width / (60 * 2); // 60 seconds * 2 poll rate pr second
+        const height = 75 * categoryAmount / 2 - margin.top - margin.bottom;
 
         // Categories with labels
         const categories = [
-            { id: 0, label: "User Onboarded", color: "#FFD700" },
-            { id: 1, label: "Payment Accepted", color: "#00BFFF" },
-            { id: 2, label: "Payment Failed", color: "#FF4500" },
-            { id: 3, label: "Product Added to Cart", color: "#9400D3" },
-            { id: 4, label: "Checkout Started", color: "#32CD32" },
+            { id: 0, label: "User Onboarded", color: "#D90429" }, // NASA Red
+            { id: 1, label: "Payment Accepted", color: "#0E79B2" }, // Space Blue
+            { id: 2, label: "Payment Failed", color: "#F46036" }, // Fuel Orange
+            { id: 3, label: "Product Added to Cart", color: "#F2C94C" }, // Solar Gold
+            { id: 4, label: "Checkout Started", color: "#9CA3AF" }, // Neutral Gray
             { id: 5, label: "Order Placed", color: "#8B4513" },
             { id: 6, label: "Order Cancelled", color: "#FF69B4" },
             { id: 7, label: "Refund Processed", color: "#A9A9A9" },
@@ -90,6 +102,14 @@
             .append("g")
             .attr("transform", `translate(${margin.left},${margin.top})`);
 
+        const defs = svg.append("defs");
+        defs.append("filter")
+            .attr("id", "blend-multiply")
+            .append("feBlend")
+            .attr("mode", "multiply")
+            .attr("in", "SourceGraphic")
+            .attr("in2", "BackgroundImage");
+
         // Time scales
         var x, y;
         if (horizontal) {
@@ -123,11 +143,13 @@
                 cells.enter()
                     .append("rect")
                     .attr("y", d => y(d.category))
-                    .attr("width", 12)
+                    //.attr("width", 12)
+                    .attr("width", blockLength)
                     .attr("x", d => x(new Date(d.timestamp)))
                     .attr("height", 25) // Minimized spacing between blocks
                     .attr("fill", d => categories[d.category].color)
                     .attr("opacity", d => d.intensity)
+                    .attr("filter", "url(#blend-multiply)") // Apply blend mode
                     .merge(cells) // Merge updates
                     .attr("x", d => x(new Date(d.timestamp)))
                     .attr("opacity", d => d.intensity)
