diff --git a/.github/scripts/assign-or-comment.js b/.github/scripts/assign-or-comment.js
index c93b19dd..60bd827f 100644
--- a/.github/scripts/assign-or-comment.js
+++ b/.github/scripts/assign-or-comment.js
@@ -1,5 +1,3 @@
-#!/bin/bash
-
 const { Octokit } = require("@octokit/rest");
 
 const octokit = new Octokit({
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 2d4dbfcc..08e40624 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - uses: ruby/setup-ruby@v1
         with:
@@ -24,7 +24,7 @@ jobs:
         run: bundle exec jekyll serve --port=4000 --detach
 
       - name: API Generation
-        run: sudo python utils/api_generator.py
+        run: python utils/api_generator.py
 
       - name: Kill Temporary Server
         run: pkill -f jekyll
diff --git a/_config.yml b/_config.yml
index 45172390..d5292650 100644
--- a/_config.yml
+++ b/_config.yml
@@ -80,7 +80,7 @@ aux_links:
 
 # Footer content 
 # appears at the bottom of every page's main content
-footer_content: "Copyright © 2026 Contributors to CircuitVerse. Distributed under a [CC-by-sa] license."
+footer_content: "Copyright © {% assign current_year = 'now' | date: '%Y' %}{{ current_year }} Contributors to CircuitVerse. Distributed under a [CC-by-sa] license."
 
 # Footer last edited timestamp
 last_edit_timestamp: false # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
@@ -99,8 +99,8 @@ gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into t
 color_scheme: circuitverse
 
 # Google Analytics Tracking (optional)
-# e.g, UA-1234567-89
-ga_tracking: UA-112678513-3
+# e.g, G-XXXXXXXXXX (GA4 format)
+# ga_tracking: G-XXXXXXXXXX
 
 jekyll-spaceship:
   # default enabled processors
diff --git a/_includes/gate_animation.html b/_includes/gate_animation.html
new file mode 100644
index 00000000..86486389
--- /dev/null
+++ b/_includes/gate_animation.html
@@ -0,0 +1,204 @@
+{% comment %}
+  Usage: {% include gate_animation.html gate="AND" %}
+  Supported: AND, OR, NOT, NAND, NOR, XOR, XNOR
+{% endcomment %}
+
+<div class="gate-anim-wrapper" data-gate="{{ include.gate }}">
+  <canvas class="gate-anim-canvas" width="340" height="120" aria-label="{{ include.gate }} gate animation"></canvas>
+  <div class="gate-anim-controls">
+    {% if include.gate == "NOT" %}
+      <label>A: <input type="checkbox" class="gate-anim-input" data-gate="{{ include.gate }}" data-input="0"> <span class="bit-label">0</span></label>
+    {% else %}
+      <label>A: <input type="checkbox" class="gate-anim-input" data-gate="{{ include.gate }}" data-input="0"> <span class="bit-label">0</span></label>
+      <label>B: <input type="checkbox" class="gate-anim-input" data-gate="{{ include.gate }}" data-input="1"> <span class="bit-label">0</span></label>
+    {% endif %}
+    <span class="gate-anim-output">Output: <strong class="output-val">—</strong></span>
+  </div>
+</div>
+
+<script>
+(function() {
+  var wrapper = document.currentScript && document.currentScript.previousElementSibling;
+  if (!wrapper || !wrapper.classList.contains("gate-anim-wrapper")) return;
+
+  var gateId = wrapper.dataset.gate;
+  var canvas = wrapper.querySelector(".gate-anim-canvas");
+  if (!canvas) return;
+
+  var ctx = canvas.getContext("2d");
+  var inputs = [false, false];
+  var animProgress = 0;
+  var animFrame = null;
+
+  function computeOutput(gate, a, b) {
+    switch(gate) {
+      case "AND":  return a && b;
+      case "OR":   return a || b;
+      case "NOT":  return !a;
+      case "NAND": return !(a && b);
+      case "NOR":  return !(a || b);
+      case "XOR":  return a !== b;
+      case "XNOR": return a === b;
+    }
+  }
+
+  function drawGateShape(gate, cx, cy, active) {
+    ctx.strokeStyle = "#333";
+    ctx.lineWidth = 2.5;
+    ctx.fillStyle = active ? "#d4edda" : "#f8f9fa";
+
+    if (gate === "NOT") {
+      // Triangle
+      ctx.beginPath();
+      ctx.moveTo(cx - 22, cy - 20);
+      ctx.lineTo(cx + 18, cy);
+      ctx.lineTo(cx - 22, cy + 20);
+      ctx.closePath();
+      ctx.fill(); ctx.stroke();
+      // Bubble
+      ctx.beginPath();
+      ctx.arc(cx + 24, cy, 6, 0, Math.PI * 2);
+      ctx.fillStyle = active ? "#28a745" : "#fff";
+      ctx.fill(); ctx.stroke();
+    } else if (gate === "AND" || gate === "NAND") {
+      ctx.beginPath();
+      ctx.moveTo(cx - 22, cy - 22);
+      ctx.lineTo(cx, cy - 22);
+      ctx.arc(cx, cy, 22, -Math.PI / 2, Math.PI / 2);
+      ctx.lineTo(cx - 22, cy + 22);
+      ctx.closePath();
+      ctx.fill(); ctx.stroke();
+      if (gate === "NAND") {
+        ctx.beginPath();
+        ctx.arc(cx + 28, cy, 6, 0, Math.PI * 2);
+        ctx.fillStyle = active ? "#28a745" : "#fff";
+        ctx.fill(); ctx.stroke();
+      }
+    } else {
+      // OR / NOR / XOR / XNOR — curved body
+      ctx.beginPath();
+      ctx.moveTo(cx - 22, cy - 22);
+      ctx.quadraticCurveTo(cx - 5, cy, cx - 22, cy + 22);
+      ctx.quadraticCurveTo(cx + 5, cy + 22, cx + 22, cy);
+      ctx.quadraticCurveTo(cx + 5, cy - 22, cx - 22, cy - 22);
+      ctx.fill(); ctx.stroke();
+      if (gate === "XOR" || gate === "XNOR") {
+        ctx.beginPath();
+        ctx.moveTo(cx - 28, cy - 22);
+        ctx.quadraticCurveTo(cx - 11, cy, cx - 28, cy + 22);
+        ctx.stroke();
+      }
+      if (gate === "NOR" || gate === "XNOR") {
+        ctx.beginPath();
+        ctx.arc(cx + 28, cy, 6, 0, Math.PI * 2);
+        ctx.fillStyle = active ? "#28a745" : "#fff";
+        ctx.fill(); ctx.stroke();
+      }
+    }
+  }
+
+  function signalColor(on, alpha) {
+    return on
+      ? "rgba(40,167,69," + alpha + ")"
+      : "rgba(180,180,180," + alpha + ")";
+  }
+
+  function drawWire(x1, y1, x2, y2, on, progress) {
+    var len = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
+    var ex = x1 + (x2 - x1) * progress;
+    var ey = y1 + (y2 - y1) * progress;
+
+    // Base wire (grey)
+    ctx.beginPath();
+    ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);
+    ctx.strokeStyle = "#ccc"; ctx.lineWidth = 3;
+    ctx.stroke();
+
+    // Animated signal
+    ctx.beginPath();
+    ctx.moveTo(x1, y1); ctx.lineTo(ex, ey);
+    ctx.strokeStyle = signalColor(on, 1);
+    ctx.lineWidth = 3;
+    ctx.stroke();
+
+    // Signal dot
+    ctx.beginPath();
+    ctx.arc(ex, ey, 5, 0, Math.PI * 2);
+    ctx.fillStyle = signalColor(on, 0.9);
+    ctx.fill();
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var isNot = (gateId === "NOT");
+    var a = inputs[0], b = inputs[1];
+    var out = computeOutput(gateId, a, b);
+    var cx = 185, cy = 60;
+    var p = animProgress;
+
+    // Input wires
+    if (isNot) {
+      drawWire(30, cy, cx - 22, cy, a, Math.min(p * 2, 1));
+    } else {
+      drawWire(30, 35, cx - 22, cy - 14, a, Math.min(p * 2, 1));
+      drawWire(30, 85, cx - 22, cy + 14, b, Math.min(p * 2, 1));
+    }
+
+    // Gate body
+    var bodyAlpha = Math.max(0, p * 2 - 1);
+    ctx.globalAlpha = 0.3 + bodyAlpha * 0.7;
+    drawGateShape(gateId, cx, cy, out);
+    ctx.globalAlpha = 1;
+
+    // Output wire
+    var outX = (gateId === "NOT" || gateId === "NAND" || gateId === "NOR" || gateId === "XNOR") ? cx + 30 : cx + 22;
+    var outProgress = Math.max(0, p * 2 - 1);
+    drawWire(outX, cy, 310, cy, out, outProgress);
+
+    // Labels
+    ctx.fillStyle = "#333";
+    ctx.font = "bold 13px monospace";
+    ctx.fillText("A=" + (a ? "1" : "0"), 5, 39);
+    if (!isNot) ctx.fillText("B=" + (b ? "1" : "0"), 5, 89);
+    ctx.fillText("Out=" + (out ? "1" : "0"), 315, 64);
+
+    // Update output display
+    var outEl = wrapper.querySelector(".output-val");
+    if (outEl) {
+      outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)";
+      outEl.style.color = out ? "#28a745" : "#dc3545";
+    }
+  }
+
+  function animate() {
+    animProgress += 0.03;
+    draw();
+    if (animProgress < 1) {
+      animFrame = requestAnimationFrame(animate);
+    } else {
+      animProgress = 1;
+      draw();
+    }
+  }
+
+  function startAnim() {
+    if (animFrame) cancelAnimationFrame(animFrame);
+    animProgress = 0;
+    animate();
+  }
+
+  // Init
+  animProgress = 1;
+  draw();
+
+  // Wire up checkboxes
+  wrapper.querySelectorAll(".gate-anim-input").forEach(function(cb) {
+    cb.addEventListener("change", function() {
+      var idx = parseInt(this.dataset.input);
+      inputs[idx] = this.checked;
+      this.nextElementSibling.textContent = this.checked ? "1" : "0";
+      startAnim();
+    });
+  });
+})();
+</script>
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index afdb473f..0b009d9e 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -279,19 +279,13 @@ $text-color: #111111;
   bottom: 15px;
 }
 
-// Added transitions
-a,
-h1,
-h2,
-h3,
-h4,
-h5,
-button,
+// Added transitions — only structural layout elements, not links/buttons
+// (animating a/button causes a blue color flash during theme switches)
 .main-content,
 .side-bar,
 .site-nav,
 .search {
-  transition: linear 0.3s;
+  transition: background-color 0.3s linear, color 0.3s linear;
 }
 
 .search-active .search-input,
@@ -309,3 +303,47 @@ button,
   width: 0%;
   z-index: 10000;
 }
+
+// Gate animation widget
+.gate-anim-wrapper {
+  background: $body-background-color;
+  border: 1px solid $border-color;
+  border-radius: 6px;
+  display: inline-block;
+  margin: 1rem 0;
+  max-width: 420px;
+  padding: 0.75rem 1rem;
+  width: 100%;
+}
+
+.gate-anim-canvas {
+  display: block;
+  max-width: 340px;
+  width: 100%;
+}
+
+.gate-anim-controls {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+
+  label {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    margin-right: 1.2rem;
+  }
+}
+
+.bit-label {
+  font-family: monospace;
+  font-weight: bold;
+  margin-left: 0.3rem;
+  min-width: 0.8rem;
+}
+
+.gate-anim-output {
+  margin-left: auto;
+}
diff --git a/assets/js/global_scripts.js b/assets/js/global_scripts.js
index 22da4543..6aa42015 100644
--- a/assets/js/global_scripts.js
+++ b/assets/js/global_scripts.js
@@ -2,44 +2,46 @@
  * Global Scripts for Interactive Book
  */
 
-// Switch Color Scheme as soon as possible
-var searchText = "mode";
 var storageItem = "colorMode";
-var isDarkMode = localStorage.getItem(storageItem);
-
-if (isDarkMode == 0 || isDarkMode == null) {
-	isDarkMode = 0;
-	localStorage.setItem(storageItem, isDarkMode);
-} else if (isDarkMode == 1) {
-	jtd.setTheme('circuitversedark');
-	
+var isDarkMode = localStorage.getItem(storageItem) === "1";
+
+if (localStorage.getItem(storageItem) === null) {
+	isDarkMode = false;
+	localStorage.setItem(storageItem, "0");
 }
 
+// Apply saved theme only after jtd is ready to avoid race condition
+document.addEventListener('DOMContentLoaded', function () {
+	if (isDarkMode) {
+		jtd.setTheme('circuitversedark');
+	}
+});
+
 $(document).ready(function () {
 
 	//dark mode functionality
 	var a = $('a.site-button:contains("mode")');
 
-	if (isDarkMode == 1) {
+	if (isDarkMode) {
 		a.text("Light mode");
 	}
 
 	a.click(function () {
-		
-		if (isDarkMode == 0 || isDarkMode == null) {
+		if (!isDarkMode) {
 			jtd.setTheme('circuitversedark');
 			a.text("Light mode");
-			isDarkMode = 1;
-			localStorage.setItem(storageItem, isDarkMode);
+			isDarkMode = true;
 		} else {
 			jtd.setTheme('circuitverse');
 			a.text("Dark mode");
-			isDarkMode = 0;
-			localStorage.setItem(storageItem, isDarkMode);
+			isDarkMode = false;
 		}
+		localStorage.setItem(storageItem, isDarkMode ? "1" : "0");
 
 		// Reset Disqus thread to reload with matching color scheme
-		setTimeout(function(){ DISQUS.reset({reload: true}); }, 500);
+		if (typeof DISQUS !== 'undefined') {
+			setTimeout(function () { DISQUS.reset({ reload: true }); }, 500);
+		}
 		return false;
 	});
 
diff --git a/assets/js/module.js b/assets/js/module.js
index 0d2577ee..ec022090 100644
--- a/assets/js/module.js
+++ b/assets/js/module.js
@@ -145,6 +145,7 @@ function show_result()
         default:
             document.getElementById("operator").style.backgroundImage = "url('/assets/images/NOT_gate.png')";
             document.getElementById("result").style.backgroundImage = bit_display_bool[!bit_bool[0]];
+            return;
     }
 }
 
@@ -2326,7 +2327,6 @@ function KarnaughMap(parentDivId, qmcRef) {
         hooveredKVField = -1;
         var oldHooveredElement = hooveredElement;
         hooveredElement = mouseOverElement(pos);
-        console.log(hooveredElement);
         if (hooveredElement !== -1) {
             hooveredKVField = uiElements[hooveredElement].ref;
         }
@@ -2348,9 +2348,10 @@ function KarnaughMap(parentDivId, qmcRef) {
             } while ((element = element.offsetParent));
         }
 
+        var windowScrollTop = window.scrollY || window.pageYOffset || 0;
+        var pageY = (typeof e.pageY === "number") ? e.pageY : (e.clientY + windowScrollTop);
         mx = e.pageX - offsetX;
-        my = e.pageY - offsetY + document.getElementById("scrollcount").scrollTop;
-        console.log(mx + " " + my + " " + document.getElementById("scrollcount").scrollTop );
+        my = pageY - offsetY;
         return {x: mx, y: my};
     }
 }
diff --git a/assets/js/quiz.js b/assets/js/quiz.js
index 7322aa80..cffcbd4e 100644
--- a/assets/js/quiz.js
+++ b/assets/js/quiz.js
@@ -1,7 +1,7 @@
 $(function() {
     var quizSettings = $('.quiz');
 
-    if (quizSettings != null) {
+    if (quizSettings.length > 0) {
         var quiz = $('<div class="pop-quiz">' +
         '<h2>Pop Quiz</h2>' +
         '</div>');
@@ -28,8 +28,13 @@ $(function() {
                 });
             });
 
-            // Shuffle answers
-            answers.sort(function() { return 0.5 - Math.random(); });
+            // Shuffle answers (Fisher-Yates)
+            for (var i = answers.length - 1; i > 0; i--) {
+                var j = Math.floor(Math.random() * (i + 1));
+                var temp = answers[i];
+                answers[i] = answers[j];
+                answers[j] = temp;
+            }
 
             // Show answers
             var questionAnswers = $('<div class="quiz-answers"></div>');
diff --git a/docs/comb-ssi/logic-gates.md b/docs/comb-ssi/logic-gates.md
index 6f2fa30d..671ed5d2 100644
--- a/docs/comb-ssi/logic-gates.md
+++ b/docs/comb-ssi/logic-gates.md
@@ -44,6 +44,8 @@ The NOT gate is also known as an inverter because it produces the exact opposite
 
 {% include image.html url='/assets/images/NotGate.svg' description='Not Gate' %}
 
+{% include gate_animation.html gate="NOT" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46600" id="gates_01" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for NOT gate
@@ -70,6 +72,8 @@ The Truth table for AND gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/AndGate.svg' description='AND Gate' %}
 
+{% include gate_animation.html gate="AND" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46601" id="gates_02" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for AND gate
@@ -97,6 +101,8 @@ The Truth table of OR gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/OrGate.svg' description='AND Gate' %}
 
+{% include gate_animation.html gate="OR" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46603" id="gates_03" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for OR gate
@@ -125,6 +131,8 @@ The Truth table of NAND gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/NandGate.svg' description='NAND Gate' %}
 
+{% include gate_animation.html gate="NAND" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46604" id="gates_04" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for NAND gate
@@ -154,6 +162,8 @@ The Truth table of NOR gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/NorGate.svg' description='NOR Gate' %}
 
+{% include gate_animation.html gate="NOR" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46606" id="gates_05" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for NOR gate
@@ -181,6 +191,8 @@ The Truth table of XOR gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/XorGate.svg' description='XOR Gate' %}
 
+{% include gate_animation.html gate="XOR" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46609" id="gates_06" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for XOR gate
@@ -208,6 +220,8 @@ The Truth table of XNOR gate which consists of two inputs is given below
 
 {% include image.html url='/assets/images/XnorGate.svg' description='XNOR Gate' %}
 
+{% include gate_animation.html gate="XNOR" %}
+
 <iframe width="100%" height="220px" src="https://circuitverse.org/simulator/embed/46613" id="gates_07" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe>
 
 ### Verilog code for XNOR gate