diff --git a/public/scripts/index.js b/public/scripts/index.js
index e7a847c..88b5194 100644
--- a/public/scripts/index.js
+++ b/public/scripts/index.js
@@ -204,19 +204,22 @@
 
     document.body.addEventListener("click", (e) => {
       if (e.target.closest(".home-link")) return handleHomeClick(e);
-      if (e.target.closest("[data-topic]")) return handleDataTopicClick(e);
+      if (e.target.closest(".topics [data-topic]"))
+        return handleDataTopicClick(e);
     });
 
     document.body.addEventListener(
       "mouseenter",
       (e) => {
-        const link = e.target.closest("[data-topic]");
+        const link = e.target.closest(".topics [data-topic]");
         if (!link) return;
-        const color =
-          (window.getTopicColor &&
-            window.getTopicColor(link.dataset.topic?.toLowerCase() || "")) ||
-          "";
-        if (color) link.style.color = color;
+        const raw = link.dataset.topic || "";
+        const key = raw.split("/")[0].toLowerCase();
+        const color = (window.getTopicColor && window.getTopicColor(key)) || "";
+        if (color) {
+          link.style.color = color;
+          link.style.textDecorationColor = color;
+        }
       },
       true,
     );
@@ -224,9 +227,12 @@
     document.body.addEventListener(
       "mouseleave",
       (e) => {
-        const link = e.target.closest("[data-topic]");
+        const link = e.target.closest(".topics [data-topic]");
         if (!link) return;
-        if (!link.classList.contains("active")) link.style.color = "";
+        if (!link.classList.contains("active")) {
+          link.style.color = "";
+          link.style.textDecorationColor = "";
+        }
       },
       true,
     );
diff --git a/src/content/algorithms/extrema-circular-buffer.mdx b/src/content/algorithms/extrema-circular-buffer.mdx
index ed6543f..8250f0e 100644
--- a/src/content/algorithms/extrema-circular-buffer.mdx
+++ b/src/content/algorithms/extrema-circular-buffer.mdx
@@ -4,6 +4,9 @@ date: "30/07/2024"
 useKatex: true
 ---
 
+import { Code } from 'astro:components';
+
+
 # context
 
 While working for [TRB Capital Management](https://trbcap.com/), certain strategies necessitated finding the minimum and maximum of a moving window of prices.
@@ -12,6 +15,7 @@ While working for [TRB Capital Management](https://trbcap.com/), certain strateg
 
 Design a data structure supporting the following operations:
 
+
 - `build(size_t capacity)` : initialize the data structure with capacity/window size `capacity`
   The data structure must always hold $\leq$ `capacity` prices.
 - `void push_back(double value)`
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index dc7aadc..333f3e1 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -29,7 +29,7 @@ const {
     <Footer />
     <script is:inline>
       window.getTopicColor = function (topicName) {
-        switch (topicName) {
+        switch ((topicName || "").toLowerCase()) {
           case "software":
             return "#0073e6";
           case "algorithms":
@@ -37,7 +37,9 @@ const {
           case "meditations":
             return "#6a0dad";
           case "autonomous-racing":
-            return "#009975";
+            return "#3d8a44";
+          case "git":
+            return "#e67300";
           default:
             return "#000000";
         }
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 1ca1177..d95e82d 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,5 +1,5 @@
 export function getTopicColor(topicName) {
-  switch (topicName) {
+  switch ((topicName || "").toLowerCase()) {
     case "software":
       return "#0073e6";
     case "algorithms":
@@ -7,7 +7,9 @@ export function getTopicColor(topicName) {
     case "meditations":
       return "#6a0dad";
     case "autonomous-racing":
-      return "#009975";
+      return "#3d8a44";
+    case "git":
+      return "#e67300";
     default:
       return "#000000";
   }