diff --git a/web/settings.py b/web/settings.py
index 5ecf753d3..270bbeb3f 100644
--- a/web/settings.py
+++ b/web/settings.py
@@ -116,6 +116,7 @@
     "captcha",
     "markdownx",
     "web",
+    "web.virtual_lab.apps.VirtualLabConfig",
 ]
 
 if DEBUG and not TESTING:
diff --git a/web/templates/base.html b/web/templates/base.html
index 67ccf0b39..abda0ee64 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -283,6 +283,11 @@
               </button>
               <div class="absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform origin-top-left">
                 <div class="py-2 px-1">
+                  <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+                     class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
+                    <i class="fas fa-flask mr-2 text-teal-500"></i>
+                    <span>Virtual Lab</span>
+                  </a>
                   <a href="{% url 'progress_visualization' %}"
                      class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300">
                     <i class="fas fa-chart-line mr-2 text-teal-500"></i>Progress Trackers
@@ -939,6 +944,12 @@ <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">COMMUNITY</h
           <div>
             <h3 class="text-lg font-bold mb-4 text-gray-700 dark:text-gray-200">RESOURCES & INFO</h3>
             <ul class="space-y-2">
+              <li>
+                <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+                   class="text-gray-600 dark:text-gray-300 hover:text-teal-600 dark:hover:text-teal-400 flex items-center">
+                  <i class="fas fa-flask mr-2 text-teal-500 w-5 text-center"></i>Virtual Lab
+                </a>
+              </li>
               <li>
                 <a href="https://github.com/alphaonelabs/education-website/wiki/GSOC-2025-Ideas"
                    target="_blank"
diff --git a/web/urls.py b/web/urls.py
index 156eb20f6..0da6406d2 100644
--- a/web/urls.py
+++ b/web/urls.py
@@ -120,6 +120,8 @@
     path("secure/inbox/", inbox, name="inbox"),
     path("secure/download/<int:message_id>/", download_message, name="download_message"),
     path("secure/toggle_star/<int:message_id>/", toggle_star_message, name="toggle_star_message"),
+    # Virtual Lab Links
+    path("virtual_lab/", include("web.virtual_lab.urls", namespace="virtual_lab")),
     # Social media sharing URLs
     path("social-media/", views.social_media_dashboard, name="social_media_dashboard"),
     path("social-media/post/<int:post_id>/", views.post_to_twitter, name="post_to_twitter"),
diff --git a/web/virtual_lab/__init__.py b/web/virtual_lab/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/virtual_lab/apps.py b/web/virtual_lab/apps.py
new file mode 100644
index 000000000..fc003d2e4
--- /dev/null
+++ b/web/virtual_lab/apps.py
@@ -0,0 +1,10 @@
+"""Django AppConfig for the Virtual Lab application."""
+
+from django.apps import AppConfig
+
+
+class VirtualLabConfig(AppConfig):
+    """Configuration for the Virtual Lab Django application."""
+
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "web.virtual_lab"
diff --git a/web/virtual_lab/css/virtual_lab.css b/web/virtual_lab/css/virtual_lab.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/virtual_lab/models.py b/web/virtual_lab/models.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/virtual_lab/static/virtual_lab/js/common.js b/web/virtual_lab/static/virtual_lab/js/common.js
new file mode 100644
index 000000000..f7b3915d4
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/common.js
@@ -0,0 +1,41 @@
+// Helper to get the CSRF token from cookies:
+function getCSRFToken() {
+  const name = 'csrftoken';
+  const cookies = document.cookie.split(';');
+  for (let c of cookies) {
+    c = c.trim();
+    if (c.startsWith(name + '=')) {
+      return decodeURIComponent(c.substring(name.length + 1));
+    }
+  }
+  return '';
+}
+
+// A simple wrapper for POSTing JSON with CSRF:
+function ajaxPost(url, data, onSuccess, onError) {
+  fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRFToken': getCSRFToken(),
+    },
+    body: JSON.stringify(data),
+  })
+    .then((resp) => {
+      if (!resp.ok) throw new Error('Network response was not OK');
+      return resp.json();
+    })
+    .then(onSuccess)
+    .catch(onError);
+}
+
+// A simple wrapper for GETting JSON:
+function ajaxGet(url, onSuccess, onError) {
+  fetch(url)
+    .then((resp) => {
+      if (!resp.ok) throw new Error('Network response was not OK');
+      return resp.json();
+    })
+    .then(onSuccess)
+    .catch(onError);
+}
diff --git a/web/virtual_lab/static/virtual_lab/js/physics_electrical_circuit.js b/web/virtual_lab/static/virtual_lab/js/physics_electrical_circuit.js
new file mode 100644
index 000000000..a3eb26897
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/physics_electrical_circuit.js
@@ -0,0 +1,404 @@
+// web/virtual_lab/static/virtual_lab/js/physics_electrical_circuit.js
+
+document.addEventListener("DOMContentLoaded", () => {
+  // ==== 1. Tutorial Overlay Logic ====
+  const tutorialOverlay = document.getElementById("tutorial-overlay");
+  const stepNumberElem   = document.getElementById("step-number");
+  const stepList         = document.getElementById("step-list");
+  const prevBtn          = document.getElementById("tutorial-prev");
+  const nextBtn          = document.getElementById("tutorial-next");
+  const skipBtn          = document.getElementById("tutorial-skip");
+
+  const steps = [
+    ["Use the sliders to set battery voltage \(V_0\), resistor \(R\), and capacitor \(C\)."],
+    ["Click “Start” to begin charging the capacitor through \(R\). Watch \(V_C(t)\) rise."],
+    ["Observe how \(I(t)\) decreases as the capacitor charges."],
+    ["After \(5\ tau\), answer the quiz questions."]
+  ];
+
+  let currentStep = 0;
+  function showStep(i) {
+    stepNumberElem.textContent = i + 1;
+    stepList.innerHTML = "";
+    steps[i].forEach((text, idx) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      li.className = "opacity-0 transition-opacity duration-500";
+      stepList.appendChild(li);
+      setTimeout(() => {
+        li.classList.remove("opacity-0");
+        li.classList.add("opacity-100");
+      }, idx * 200);
+    });
+    prevBtn.disabled = i === 0;
+    nextBtn.textContent = i === steps.length - 1 ? "Begin Experiment" : "Next";
+  }
+
+  showStep(currentStep);
+  prevBtn.addEventListener("click", () => {
+    if (currentStep > 0) {
+      currentStep--;
+      showStep(currentStep);
+    }
+  });
+  nextBtn.addEventListener("click", () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      showStep(currentStep);
+    } else {
+      tutorialOverlay.style.display = "none";
+      enableControls();
+    }
+  });
+  skipBtn.addEventListener("click", () => {
+    tutorialOverlay.style.display = "none";
+    enableControls();
+  });
+  // ==== End Tutorial Overlay Logic ====
+
+  // ==== 2. DOM References & State ====
+  const canvas         = document.getElementById("circuit-canvas");
+  const ctx            = canvas.getContext("2d");
+
+  const VSlider        = document.getElementById("V-slider");
+  const VValue         = document.getElementById("V-value");
+  const RSlider        = document.getElementById("R-slider");
+  const RValue         = document.getElementById("R-value");
+  const CSlider        = document.getElementById("C-slider");
+  const CValue         = document.getElementById("C-value");
+
+  const startBtn       = document.getElementById("start-circuit");
+  const stopBtn        = document.getElementById("stop-circuit");
+  const resetBtn       = document.getElementById("reset-circuit");
+
+  const quizDiv        = document.getElementById("postlab-quiz");
+
+  const readoutT       = document.getElementById("readout-t");
+  const readoutVc      = document.getElementById("readout-vc");
+  const readoutI       = document.getElementById("readout-i");
+  const readoutTau     = document.getElementById("readout-tau");
+
+  const vcCtx          = document.getElementById("vc-chart").getContext("2d");
+  const iCtx           = document.getElementById("i-chart").getContext("2d");
+
+  // Physical parameters (will update on slider changes)
+  let V0 = parseFloat(VSlider.value);      // battery voltage in volts
+  let R  = parseFloat(RSlider.value);      // resistance in ohms
+  let C  = parseFloat(CSlider.value) * 1e-6; // convert µF → F
+
+  let tau = R * C;                         // time constant (s)
+
+  // Simulation state
+  let t0       = null;
+  let animId   = null;
+  let running  = false;
+  let maxTime  = 5 * tau;  // simulate up to 5τ for quiz reveal
+
+  // Chart.js setups
+  const vcData = {
+    labels: [],
+    datasets: [{
+      label: "Vc(t) (V)",
+      data: [],
+      borderColor: "#1E40AF",
+      borderWidth: 2,
+      fill: false,
+      pointRadius: 0
+    }]
+  };
+  const vcChart = new Chart(vcCtx, {
+    type: "line",
+    data: vcData,
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "Time (s)" } },
+        y: { title: { display: true, text: "Vc (V)" }, suggestedMax: V0 }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  const iData = {
+    labels: [],
+    datasets: [{
+      label: "I(t) (A)",
+      data: [],
+      borderColor: "#DC2626",
+      borderWidth: 2,
+      fill: false,
+      pointRadius: 0
+    }]
+  };
+  const iChart = new Chart(iCtx, {
+    type: "line",
+    data: iData,
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "Time (s)" } },
+        y: { title: { display: true, text: "I (A)" } }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  // Disable controls until tutorial ends
+  startBtn.disabled = true;
+  stopBtn.disabled  = true;
+  resetBtn.disabled = true;
+  VSlider.disabled  = true;
+  RSlider.disabled  = true;
+  CSlider.disabled  = true;
+
+  // ==== 3. Enable Controls & Initial Draw ====
+  function enableControls() {
+    startBtn.disabled = false;
+    resetBtn.disabled = false;
+    VSlider.disabled  = false;
+    RSlider.disabled  = false;
+    CSlider.disabled  = false;
+    tau = R * C;
+    readoutTau.textContent = tau.toFixed(3);
+    drawCircuit(0); // initial draw at t=0
+  }
+
+  // Draw the schematic of battery→resistor→capacitor and a current arrow
+  function drawCircuit(t) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Coordinates for schematic
+    const leftX = 50;
+    const midX  = 250;
+    const rightX = 450;
+    const centerY = canvas.height / 2;
+
+    // 1) Draw battery as two plates
+    ctx.fillStyle = "#333";
+    ctx.fillRect(leftX - 10, centerY - 40, 10, 80); // negative plate
+    ctx.fillRect(leftX + 10, centerY - 20, 5, 40);  // positive plate
+    ctx.fillStyle = "#000";
+    ctx.font = "14px sans-serif";
+    ctx.fillText("Battery", leftX - 20, centerY - 50);
+    ctx.fillText(`V₀ = ${V0.toFixed(1)}V`, leftX - 30, centerY + 60);
+
+    // 2) Draw resistor as zig-zag between leftX+20 and midX
+    drawResistor(leftX + 20, centerY, midX, centerY);
+    ctx.fillStyle = "#000";
+    ctx.fillText(`R = ${R.toFixed(0)}Ω`, (leftX + 20 + midX) / 2 - 20, centerY - 20);
+
+    // 3) Draw capacitor between midX+20 and midX+20 horizontally (two parallel plates)
+    ctx.strokeStyle = "#333";
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.moveTo(midX + 20, centerY - 30);
+    ctx.lineTo(midX + 20, centerY + 30);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(midX + 45, centerY - 30);
+    ctx.lineTo(midX + 45, centerY + 30);
+    ctx.stroke();
+    ctx.fillStyle = "#000";
+    ctx.fillText(`C = ${(C * 1e6).toFixed(0)}µF`, midX + 5, centerY + 60);
+
+    // 4) Draw wires connecting ends
+    ctx.strokeStyle = "#555";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    // Top wire: battery positive → resistor start
+    ctx.moveTo(leftX + 10, centerY - 20);
+    ctx.lineTo(leftX + 20, centerY - 20);
+    // Continue through resistor zigzag (already drawn), then to capacitor start
+    ctx.lineTo(midX, centerY - 20);
+    ctx.lineTo(midX + 20, centerY - 20);
+    // From capacitor top plate back to battery negative via right wire
+    ctx.lineTo(midX + 45, centerY - 20);
+    ctx.lineTo(rightX, centerY - 20);
+    ctx.lineTo(rightX, centerY + 60);
+    // Bottom wire: capacitor bottom plate back to battery negative
+    ctx.lineTo(midX + 45, centerY + 60);
+    ctx.lineTo(midX + 20, centerY + 60);
+    ctx.lineTo(midX, centerY + 60);
+    ctx.lineTo(leftX + 20, centerY + 60);
+    ctx.lineTo(leftX + 10, centerY + 60);
+    ctx.stroke();
+
+    // 5) Compute Vc(t) and I(t)
+    const VC = V0 * (1 - Math.exp(-t / tau));
+    const I  = (V0 - VC) / R;
+
+    // 6) Draw current arrow on top wire (direction: left→right). Length proportional to I.
+    const arrowLength = Math.min(I * 1000, 100); // scale for visibility
+    if (running) {
+      ctx.strokeStyle = "#DC2626";
+      ctx.fillStyle = "#DC2626";
+      ctx.lineWidth = 2;
+      // arrow shaft
+      ctx.beginPath();
+      ctx.moveTo(leftX + 20, centerY - 20);
+      ctx.lineTo(leftX + 20 + arrowLength, centerY - 20);
+      ctx.stroke();
+      // arrowhead
+      const tipX = leftX + 20 + arrowLength;
+      const tipY = centerY - 20;
+      ctx.beginPath();
+      ctx.moveTo(tipX, tipY);
+      ctx.lineTo(tipX - 8, tipY - 5);
+      ctx.lineTo(tipX - 8, tipY + 5);
+      ctx.closePath();
+      ctx.fill();
+    }
+
+    // 7) Update numeric readouts
+    readoutT.textContent = t.toFixed(2);
+    readoutVc.textContent = VC.toFixed(2);
+    readoutI.textContent = I.toFixed(3);
+    readoutTau.textContent = tau.toFixed(3);
+  }
+
+  // Draw a zig-zag resistor between (x1,y) and (x2,y)
+  function drawResistor(x1, y, x2, y2) {
+    const totalLength = x2 - x1;
+    const peaks = 6;
+    const segment = totalLength / (peaks * 2);
+    ctx.strokeStyle = "#555";
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.moveTo(x1, y);
+    for (let i = 0; i < peaks * 2; i++) {
+      const dx = x1 + segment * (i + 1);
+      const dy = y + (i % 2 === 0 ? -10 : 10);
+      ctx.lineTo(dx, dy);
+    }
+    ctx.lineTo(x2, y);
+    ctx.stroke();
+  }
+
+  // ==== 4. Slider Handlers ====
+  VSlider.addEventListener("input", () => {
+    V0 = parseFloat(VSlider.value);
+    VValue.textContent = V0.toFixed(1);
+    // Update chart Y‐axis max
+    vcChart.options.scales.y.suggestedMax = V0;
+    vcChart.update("none");
+    if (!running) {
+      drawCircuit(0);
+    }
+  });
+
+  RSlider.addEventListener("input", () => {
+    R = parseFloat(RSlider.value);
+    RValue.textContent = R.toFixed(0);
+    tau = R * C;
+    readoutTau.textContent = tau.toFixed(3);
+    if (!running) {
+      drawCircuit(0);
+    }
+  });
+
+  CSlider.addEventListener("input", () => {
+    C = parseFloat(CSlider.value) * 1e-6;
+    CValue.textContent = (C * 1e6).toFixed(0);
+    tau = R * C;
+    readoutTau.textContent = tau.toFixed(3);
+    if (!running) {
+      drawCircuit(0);
+    }
+  });
+
+  // ==== 5. Animation Loop & Launch ====
+  function step(timestamp) {
+    if (!t0) t0 = timestamp;
+    const elapsed = (timestamp - t0) / 1000; // seconds
+    if (elapsed >= maxTime) {
+      drawCircuit(maxTime);
+      revealQuiz();
+      return;
+    }
+    drawCircuit(elapsed);
+
+    // Update graphs
+    //  Vc(t)
+    const VC = V0 * (1 - Math.exp(-elapsed / tau));
+    vcChart.data.labels.push(elapsed.toFixed(2));
+    vcChart.data.datasets[0].data.push(VC.toFixed(2));
+    vcChart.update("none");
+
+    //  I(t)
+    const I = (V0 - VC) / R;
+    iChart.data.labels.push(elapsed.toFixed(2));
+    iChart.data.datasets[0].data.push(I.toFixed(3));
+    iChart.update("none");
+
+    animId = requestAnimationFrame(step);
+  }
+
+  startBtn.addEventListener("click", () => {
+    // Disable controls
+    VSlider.disabled = true;
+    RSlider.disabled = true;
+    CSlider.disabled = true;
+    startBtn.disabled = true;
+    stopBtn.disabled = false;
+    resetBtn.disabled = true;
+
+    tau = R * C;
+    maxTime = 5 * tau;
+    t0 = null;
+
+    // Clear graphs
+    vcChart.data.labels = [];
+    vcChart.data.datasets[0].data = [];
+    vcChart.update("none");
+    iChart.data.labels = [];
+    iChart.data.datasets[0].data = [];
+    iChart.update("none");
+
+    running = true;
+    animId = requestAnimationFrame(step);
+  });
+
+  stopBtn.addEventListener("click", () => {
+    if (animId) cancelAnimationFrame(animId);
+    running = false;
+    stopBtn.disabled = true;
+    startBtn.disabled = false;
+    resetBtn.disabled = false;
+  });
+
+  resetBtn.addEventListener("click", () => {
+    if (animId) cancelAnimationFrame(animId);
+    running = false;
+    t0 = null;
+    // Re-enable controls
+    VSlider.disabled = false;
+    RSlider.disabled = false;
+    CSlider.disabled = false;
+    startBtn.disabled = false;
+    stopBtn.disabled = true;
+    resetBtn.disabled = false;
+    quizDiv.classList.add("hidden");
+
+    // Clear graphs
+    vcChart.data.labels = [];
+    vcChart.data.datasets[0].data = [];
+    vcChart.update("none");
+    iChart.data.labels = [];
+    iChart.data.datasets[0].data = [];
+    iChart.update("none");
+
+    drawCircuit(0);
+  });
+
+  // ==== 6. Quiz Reveal ====
+  function revealQuiz() {
+    stopBtn.disabled = true;
+    resetBtn.disabled = false;
+    quizDiv.classList.remove("hidden");
+  }
+
+  // ==== 7. Initial Draw ====
+  tau = R * C;
+  readoutTau.textContent = tau.toFixed(3);
+  drawCircuit(0);
+});
diff --git a/web/virtual_lab/static/virtual_lab/js/physics_inclined.js b/web/virtual_lab/static/virtual_lab/js/physics_inclined.js
new file mode 100644
index 000000000..576a8dccf
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/physics_inclined.js
@@ -0,0 +1,497 @@
+// web/virtual_lab/static/virtual_lab/js/physics_inclined.js
+
+document.addEventListener("DOMContentLoaded", () => {
+  // ==== 1. Tutorial Overlay Logic ====
+  const tutorialOverlay = document.getElementById("tutorial-overlay");
+  const stepNumberElem   = document.getElementById("step-number");
+  const stepList         = document.getElementById("step-list");
+  const prevBtn          = document.getElementById("tutorial-prev");
+  const nextBtn          = document.getElementById("tutorial-next");
+  const skipBtn          = document.getElementById("tutorial-skip");
+
+  const steps = [
+    ["Drag the block along the ramp to set its starting position."],
+    ["Adjust angle, friction, and mass to see how physics changes."],
+    ["Click “Launch” and watch live readouts, force vectors, and energy bars."],
+    ["Observe the real-time Position vs Time graph and answer the quiz!"]
+  ];
+
+  let currentStep = 0;
+  function showStep(i) {
+    stepNumberElem.textContent = i + 1;
+    stepList.innerHTML = "";
+    steps[i].forEach((text, idx) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      li.className = "opacity-0 transition-opacity duration-500";
+      stepList.appendChild(li);
+      setTimeout(() => {
+        li.classList.remove("opacity-0");
+        li.classList.add("opacity-100");
+      }, idx * 200);
+    });
+    prevBtn.disabled = i === 0;
+    nextBtn.textContent = i === steps.length - 1 ? "Begin Experiment" : "Next";
+  }
+
+  showStep(currentStep);
+  prevBtn.addEventListener("click", () => {
+    if (currentStep > 0) {
+      currentStep--;
+      showStep(currentStep);
+    }
+  });
+  nextBtn.addEventListener("click", () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      showStep(currentStep);
+    } else {
+      tutorialOverlay.style.display = "none";
+      enableControls();
+    }
+  });
+  skipBtn.addEventListener("click", () => {
+    tutorialOverlay.style.display = "none";
+    enableControls();
+  });
+  // ==== End Tutorial Overlay Logic ====
+
+
+  // ==== 2. DOM References & State ====
+  const canvas         = document.getElementById("inclined-canvas");
+  const ctx            = canvas.getContext("2d");
+  if(!ctx)
+  {
+    console.error("Failed to get 2D context for canvas");
+    return;
+  }
+
+  const angleSlider    = document.getElementById("angle-slider");
+  const angleValue     = document.getElementById("angle-value");
+  const frictionSlider = document.getElementById("friction-slider");
+  const frictionValue  = document.getElementById("friction-value");
+  const massSlider     = document.getElementById("mass-slider");
+  const massValue      = document.getElementById("mass-value");
+
+  const startBtn       = document.getElementById("start-inclined");
+  const stopBtn        = document.getElementById("stop-inclined");
+  const resetBtn       = document.getElementById("reset-inclined");
+
+  const quizDiv        = document.getElementById("postlab-quiz");
+
+  const readoutS       = document.getElementById("readout-s");
+  const readoutV       = document.getElementById("readout-v");
+  const readoutA       = document.getElementById("readout-a");
+  const readoutPE      = document.getElementById("readout-pe");
+  const readoutKE      = document.getElementById("readout-ke");
+
+  const barPE          = document.getElementById("bar-pe");
+  const barKE          = document.getElementById("bar-ke");
+
+  const positionCtx    = document.getElementById("position-chart").getContext("2d");
+
+  // Physical constants & scaling
+  const G       = 9.81;                 // m/s²
+  const pxToM   = 0.01;                 // 1 px = 0.01 m
+  const mToPx   = 1 / pxToM;            // inverse
+  const rampPx  = 300;                  // 300 px → 3 m
+  const rampLen = rampPx * pxToM;       // 3 m
+
+  // Canvas dimensions & ramp origin
+  const W       = canvas.width;         // 600 px
+  const H       = canvas.height;        // 400 px
+  const originX = 50;                   // left margin
+  const originY = H - 50;               // bottom margin
+
+  // Experiment state
+  let alphaDeg = Number.parseFloat(angleSlider.value);     // initial angle
+  let alphaRad = (alphaDeg * Math.PI) / 180;
+
+  let mu       = Number.parseFloat(frictionSlider.value);  // friction coefficient
+  let mass     = Number.parseFloat(massSlider.value);      // mass in kg
+
+  let aAcc     = G * Math.sin(alphaRad)            // net accel down-ramp
+                 - mu * G * Math.cos(alphaRad);
+
+  // Block state
+  let s        = 0;       // distance along plane (m) from top
+  let v        = 0;       // speed (m/s)
+  let t0       = null;    // timestamp at launch
+  let animId   = null;    // requestAnimationFrame id
+  let running  = false;   // true while animating
+
+  // Ramp geometry (recompute whenever angle changes)
+  let basePx, heightPx;
+  function updateRampGeometry() {
+    basePx   = rampPx * Math.cos(alphaRad);
+    heightPx = rampPx * Math.sin(alphaRad);
+  }
+  updateRampGeometry();
+
+  // Chart.js: Position vs Time
+  const posData = {
+    labels: [],
+    datasets: [{
+      label: "Position (m)",
+      data: [],
+      borderColor: "#1E40AF",
+      borderWidth: 2,
+      fill: false,
+      pointRadius: 0
+    }]
+  };
+  const posChart = new Chart(positionCtx, {
+    type: "line",
+    data: posData,
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "Time (s)" } },
+        y: { title: { display: true, text: "s (m)" } }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  // Disable controls until tutorial ends
+  startBtn.disabled       = true;
+  stopBtn.disabled        = true;
+  resetBtn.disabled       = true;
+  angleSlider.disabled    = true;
+  frictionSlider.disabled = true;
+  massSlider.disabled     = true;
+
+
+  // ==== 3. Enable Controls & Initial Draw ====
+  function enableControls() {
+    startBtn.disabled       = false;
+    resetBtn.disabled       = false;
+    angleSlider.disabled    = false;
+    frictionSlider.disabled = false;
+    massSlider.disabled     = false;
+    drawScene();
+  }
+
+  // Draw wedge, block, forces, and update UI
+  function drawScene() {
+    ctx.clearRect(0, 0, W, H);
+
+    // --- 3a) Draw ramp as a 3D‐style wedge with gradient ---
+    const grad = ctx.createLinearGradient(
+      originX, originY - heightPx,
+      originX + basePx, originY
+    );
+    grad.addColorStop(0, "#F3F4F6");
+    grad.addColorStop(1, "#E5E7EB");
+
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.moveTo(originX, originY);
+    ctx.lineTo(originX + basePx, originY);
+    ctx.lineTo(originX, originY - heightPx);
+    ctx.closePath();
+    ctx.fill();
+
+    // Outline the triangle
+    ctx.strokeStyle = "#4B5563";
+    ctx.lineWidth   = 2;
+    ctx.beginPath();
+    ctx.moveTo(originX, originY);
+    ctx.lineTo(originX + basePx, originY);
+    ctx.lineTo(originX, originY - heightPx);
+    ctx.closePath();
+    ctx.stroke();
+
+    // --- 3b) Compute block’s pixel position on ramp ---
+    const topX = originX;
+    const topY = originY - heightPx;
+    const d_px = (s / rampLen) * rampPx;  // px from top down the plane
+    const blockX = topX + d_px * Math.cos(alphaRad);
+    const blockY = topY + d_px * Math.sin(alphaRad);
+
+    // Draw block as rotated square (12×12 px)
+    const blkSize = 12;
+    ctx.save();
+    ctx.translate(blockX, blockY);
+    ctx.rotate(-alphaRad);
+    ctx.fillStyle = "#DC2626";
+    ctx.fillRect(-blkSize / 2, -blkSize / 2, blkSize, blkSize);
+    ctx.strokeStyle = "#991B1B";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(-blkSize / 2, -blkSize / 2, blkSize, blkSize);
+    ctx.restore();
+
+    // --- 3c) Draw force vectors at block center ---
+    drawForceVectors(blockX, blockY);
+
+    // --- 3d) Update numeric readouts ---
+    readoutS.textContent = s.toFixed(2);
+    readoutV.textContent = v.toFixed(2);
+    readoutA.textContent = aAcc.toFixed(2);
+
+    const heightM = (rampLen - s) * Math.sin(alphaRad);
+    const PE = mass * G * heightM;
+    const KE = 0.5 * mass * v * v;
+    readoutPE.textContent = PE.toFixed(2);
+    readoutKE.textContent = KE.toFixed(2);
+
+    // --- 3e) Update energy bars ---
+    const maxPE = mass * G * (rampLen * Math.sin(alphaRad));
+    const peFrac = maxPE > 0 ? Math.min(PE / maxPE, 1) : 0;
+    const keFrac = maxPE > 0 ? Math.min(KE / maxPE, 1) : 0;
+    barPE.style.height = `${peFrac * 100}%`;
+    barKE.style.height = `${keFrac * 100}%`;
+  }
+
+  // Draw mg sinα (red), mg cosα (blue), friction (yellow) at block pos
+  function drawForceVectors(cx, cy) {
+    ctx.save();
+    ctx.translate(cx, cy);
+
+    // 1) mg sin α (red)
+    const redLen = 30; // px
+    ctx.strokeStyle = "#DC2626";
+    ctx.lineWidth   = 2;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(redLen * Math.cos(alphaRad), redLen * Math.sin(alphaRad));
+    ctx.stroke();
+    drawArrowhead(redLen * Math.cos(alphaRad), redLen * Math.sin(alphaRad), alphaRad);
+
+    // 2) mg cos α (blue) → perpendicular
+    const blueLen = 20;
+    const perpAngle = alphaRad - Math.PI / 2;
+    ctx.strokeStyle = "#3B82F6";
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(blueLen * Math.cos(perpAngle), blueLen * Math.sin(perpAngle));
+    ctx.stroke();
+    drawArrowhead(blueLen * Math.cos(perpAngle), blueLen * Math.sin(perpAngle), perpAngle);
+
+    // 3) friction (yellow) uphill (opposite motion) if μ>0
+    if (mu > 0) {
+      const yellowLen = 25;
+      const fricAngle = alphaRad + Math.PI; // uphill
+      ctx.strokeStyle = "#FBBF24";
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(yellowLen * Math.cos(fricAngle), yellowLen * Math.sin(fricAngle));
+      ctx.stroke();
+      drawArrowhead(yellowLen * Math.cos(fricAngle), yellowLen * Math.sin(fricAngle), fricAngle);
+    }
+
+    ctx.restore();
+  }
+
+  // Draw an arrowhead at (x,y), pointing angle θ
+  function drawArrowhead(x, y, θ) {
+    const size = 6;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(θ);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(-size, size / 2);
+    ctx.lineTo(-size, -size / 2);
+    ctx.closePath();
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.fill();
+    ctx.restore();
+  }
+
+
+  // ==== 4. Slider Change Handlers ====
+  angleSlider.addEventListener("input", () => {
+    alphaDeg = Number.parseFloat(angleSlider.value);
+    alphaRad = (alphaDeg * Math.PI) / 180;
+    angleValue.textContent = `${alphaDeg}°`;
+    updateDynamics();
+    updateRampGeometry();
+    if (!running) {
+      s = 0;
+      drawScene();
+    }
+  });
+
+  frictionSlider.addEventListener("input", () => {
+    mu = Number.parseFloat(frictionSlider.value);
+    frictionValue.textContent = mu.toFixed(2);
+    updateDynamics();
+    if (!running) drawScene();
+  });
+
+  massSlider.addEventListener("input", () => {
+    mass = Number.parseFloat(massSlider.value);
+    massValue.textContent = `${mass.toFixed(1)} kg`;
+    if (!running) drawScene();
+  });
+
+  function updateDynamics() {
+    aAcc = G * Math.sin(alphaRad) - mu * G * Math.cos(alphaRad);
+  }
+
+
+  // ==== Helper: Map MouseEvent → Canvas Coordinates ====
+  function getMousePos(evt) {
+    const rect = canvas.getBoundingClientRect();
+    // How many canvas pixels correspond to one CSS px?
+    const scaleX = canvas.width  / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    return {
+      x: (evt.clientX - rect.left) * scaleX,
+      y: (evt.clientY - rect.top)  * scaleY
+    };
+  }
+
+
+  // ==== 5. Drag-to-Place Logic (with scaling) ====
+  let isDragging = false;
+
+  canvas.addEventListener("mousedown", (e) => {
+    const mouse = getMousePos(e);
+
+    // Block’s pixel position (in internal 600×400 coordinate):
+    const topX = originX;
+    const topY = originY - heightPx;
+    const d_px = (s / rampLen) * rampPx;
+    const bx = topX + d_px * Math.cos(alphaRad);
+    const by = topY + d_px * Math.sin(alphaRad);
+
+    // If click is within ~10 px (in canvas coords) of the block, start dragging:
+    if (Math.hypot(mouse.x - bx, mouse.y - by) < 10) {
+      isDragging = true;
+      stopAnimation();
+    }
+  });
+
+  canvas.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+    const mouse = getMousePos(e);
+
+    // Project onto the ramp line to find new s:
+    const topX = originX;
+    const topY = originY - heightPx;
+    const dx = mouse.x - topX;
+    const dy = mouse.y - topY;
+    // t* = ( (mx-topX)cosα + (my-topY)sinα ), in px along ramp
+    const tStar = dx * Math.cos(alphaRad) + dy * Math.sin(alphaRad);
+    const tClamped = Math.min(Math.max(tStar, 0), rampPx);
+
+    s = (tClamped / rampPx) * rampLen; // convert px→m
+    drawScene();
+  });
+
+  canvas.addEventListener("mouseup", () => {
+    if (isDragging) isDragging = false;
+  });
+
+
+  // ==== 6. Animation Loop & Launch (with scaled coords) ====
+  let s0 = 0;
+
+  function step(timestamp) {
+    if (!t0) {
+      t0 = timestamp;
+      v  = 0;
+    }
+    const t = (timestamp - t0) / 1000; // seconds
+    const sNew = s0 + 0.5 * aAcc * t * t;
+
+    // If net acceleration ≤ 0, it will not move
+    if (aAcc <= 0) {
+      cancelAnimationFrame(animId);
+      running = false;
+      stopBtn.disabled  = true;
+      startBtn.disabled = false;
+      resetBtn.disabled = false;
+      return;
+    }
+
+    if (sNew >= rampLen) {
+      s = rampLen;
+      v = aAcc * t;
+      drawScene();
+      revealQuiz();
+      return;
+    }
+
+    s = sNew;
+    v = aAcc * t;
+    drawScene();
+
+    // Update Position vs Time chart
+    posChart.data.labels.push(t.toFixed(2));
+    posChart.data.datasets[0].data.push(s.toFixed(2));
+    posChart.update("none");
+
+    animId = requestAnimationFrame(step);
+  }
+
+  startBtn.addEventListener("click", () => {
+    angleSlider.disabled    = true;
+    frictionSlider.disabled = true;
+    massSlider.disabled     = true;
+    startBtn.disabled       = true;
+    stopBtn.disabled        = false;
+    resetBtn.disabled       = true;
+
+    s0       = s;
+    v        = 0;
+    t0       = null;
+    running  = true;
+
+    // Clear chart
+    posChart.data.labels = [];
+    posChart.data.datasets[0].data = [];
+    posChart.update("none");
+
+    animId = requestAnimationFrame(step);
+  });
+
+  function stopAnimation() {
+    if (animId) {
+      cancelAnimationFrame(animId);
+      running = false;
+      stopBtn.disabled    = true;
+      startBtn.disabled   = false;
+      resetBtn.disabled   = false;
+    }
+  }
+
+  stopBtn.addEventListener("click", stopAnimation);
+
+  resetBtn.addEventListener("click", () => {
+    if (animId) cancelAnimationFrame(animId);
+    running = false;
+    s       = 0;
+    v       = 0;
+    t0      = null;
+    angleSlider.disabled    = false;
+    frictionSlider.disabled = false;
+    massSlider.disabled     = false;
+    startBtn.disabled       = false;
+    stopBtn.disabled        = true;
+    resetBtn.disabled       = false;
+    quizDiv.classList.add("hidden");
+
+    // Clear chart
+    posChart.data.labels = [];
+    posChart.data.datasets[0].data = [];
+    posChart.update("none");
+
+    drawScene();
+  });
+
+
+  // ==== 7. Quiz Reveal ====
+  function revealQuiz() {
+    stopBtn.disabled  = true;
+    resetBtn.disabled = false;
+    quizDiv.classList.remove("hidden");
+  }
+
+
+  // ==== 8. Initial Draw ====
+  drawScene();
+});
diff --git a/web/virtual_lab/static/virtual_lab/js/physics_mass_spring.js b/web/virtual_lab/static/virtual_lab/js/physics_mass_spring.js
new file mode 100644
index 000000000..e04f88149
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/physics_mass_spring.js
@@ -0,0 +1,363 @@
+// web/virtual_lab/static/virtual_lab/js/physics_mass_spring.js
+
+document.addEventListener("DOMContentLoaded", () => {
+  // ==== 1. Tutorial Overlay Logic ====
+  const tutorialOverlay = document.getElementById("tutorial-overlay");
+  const stepNumberElem   = document.getElementById("step-number");
+  const stepList         = document.getElementById("step-list");
+  const prevBtn          = document.getElementById("tutorial-prev");
+  const nextBtn          = document.getElementById("tutorial-next");
+  const skipBtn          = document.getElementById("tutorial-skip");
+
+  const steps = [
+    ["Drag the mass horizontally to set its initial displacement \(A\)."],
+    ["Adjust the spring constant \(k\) and mass \(m\)."],
+    ["Click “Start” to watch \(x(t) = A \cos(\omega t)\) with \(\omega = \sqrt{k/m}\)."],
+    ["Observe the Position vs. Time graph and answer the quiz!"]
+  ];
+
+  let currentStep = 0;
+  function showStep(i) {
+    stepNumberElem.textContent = i + 1;
+    stepList.innerHTML = "";
+    steps[i].forEach((text, idx) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      li.className = "opacity-0 transition-opacity duration-500";
+      stepList.appendChild(li);
+      setTimeout(() => {
+        li.classList.remove("opacity-0");
+        li.classList.add("opacity-100");
+      }, idx * 200);
+    });
+    prevBtn.disabled = i === 0;
+    nextBtn.textContent = i === steps.length - 1 ? "Begin Experiment" : "Next";
+  }
+
+  showStep(currentStep);
+  prevBtn.addEventListener("click", () => {
+    if (currentStep > 0) {
+      currentStep--;
+      showStep(currentStep);
+    }
+  });
+  nextBtn.addEventListener("click", () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      showStep(currentStep);
+    } else {
+      tutorialOverlay.style.display = "none";
+      enableControls();
+    }
+  });
+  skipBtn.addEventListener("click", () => {
+    tutorialOverlay.style.display = "none";
+    enableControls();
+  });
+  // ==== End Tutorial Overlay Logic ====
+
+
+  // ==== 2. DOM References & State ====
+  const canvas         = document.getElementById("mass-spring-canvas");
+  const ctx            = canvas.getContext("2d");
+
+  const kSlider        = document.getElementById("k-slider");
+  const kValue         = document.getElementById("k-value");
+  const mSlider        = document.getElementById("m-slider");
+  const mValue         = document.getElementById("m-value");
+  const ASlider        = document.getElementById("A-slider");
+  const AValue         = document.getElementById("A-value");
+
+  const startBtn       = document.getElementById("start-mass-spring");
+  const stopBtn        = document.getElementById("stop-mass-spring");
+  const resetBtn       = document.getElementById("reset-mass-spring");
+
+  const quizDiv        = document.getElementById("postlab-quiz");
+
+  const readoutT       = document.getElementById("readout-t");
+  const readoutX       = document.getElementById("readout-x");
+  const readoutV       = document.getElementById("readout-v");
+  const readoutA       = document.getElementById("readout-a");
+  const readoutPE      = document.getElementById("readout-pe");
+  const readoutKE      = document.getElementById("readout-ke");
+
+  const barPE          = document.getElementById("bar-pe");
+  const barKE          = document.getElementById("bar-ke");
+
+  const positionCtx    = document.getElementById("position-chart").getContext("2d");
+
+  // Physical constants & scaling
+  const pxToM   = 0.01;          // 1 px = 0.01 m
+  const mToPx   = 1 / pxToM;     // invert
+  const equilibriumX = canvas.width / 2; // center pixel is equilibrium (x=0)
+
+  // DOM Element–related state
+  let k = Number.parseFloat(kSlider.value);    // N/m
+  let m = Number.parseFloat(mSlider.value);    // kg
+  let A = Number.parseFloat(ASlider.value);    // m
+  let omega = Math.sqrt(k / m);         // rad/s
+
+  // Simulation state
+  let t0       = null;      // timestamp at “Start”
+  let animId   = null;      // requestAnimationFrame ID
+  let running  = false;     // true while animating
+
+  // Derived state for this run
+  let maxT     = (2 * Math.PI) / omega; // one full period
+
+  // Chart.js: Position vs Time
+  const posData = {
+    labels: [],
+    datasets: [{
+      label: "x(t) (m)",
+      data: [],
+      borderColor: "#1E40AF",
+      borderWidth: 2,
+      fill: false,
+      pointRadius: 0
+    }]
+  };
+  const posChart = new Chart(positionCtx, {
+    type: "line",
+    data: posData,
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "Time (s)" } },
+        y: { title: { display: true, text: "x (m)" } }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  // Disable controls until tutorial ends
+  startBtn.disabled      = true;
+  stopBtn.disabled       = true;
+  resetBtn.disabled      = true;
+  kSlider.disabled       = true;
+  mSlider.disabled       = true;
+  ASlider.disabled       = true;
+
+
+  // ==== 3. Enable Controls & Initial Draw ====
+  function enableControls() {
+    startBtn.disabled      = false;
+    resetBtn.disabled      = false;
+    kSlider.disabled       = false;
+    mSlider.disabled       = false;
+    ASlider.disabled       = false;
+    drawScene(0); // draw mass at initial x = +A
+  }
+
+  // Draw mass‐spring system at time t (in seconds)
+  function drawScene(t) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // 3a) Parameters at current run
+    const kVal = k;
+    const mVal = m;
+    const omegaVal = Math.sqrt(kVal / mVal);
+
+    // 3b) Position x(t) in meters: x = A cos(omega t)
+    const x_m = A * Math.cos(omegaVal * t);
+    const v_m = -A * omegaVal * Math.sin(omegaVal * t);
+    const a_m = -A * omegaVal * omegaVal * Math.cos(omegaVal * t);
+
+    // 3c) Convert x_m to pixel: 0 m → equilibriumX px, positive → right
+    const x_px = equilibriumX + x_m * mToPx;
+    const massY = canvas.height / 2; // vertical position for the block
+    const massSize = 20;             // 20×20 px block
+
+    // Draw horizontal line (spring baseline)
+    ctx.strokeStyle = "#4B5563";
+    ctx.lineWidth   = 2;
+    ctx.beginPath();
+    ctx.moveTo(0, massY);
+    ctx.lineTo(canvas.width, massY);
+    ctx.stroke();
+
+    // Draw spring “coils” from left wall (10 px) to mass position
+    drawSpring(10, massY, x_px - massSize / 2, massY);
+
+    // Draw mass as a square
+    ctx.fillStyle = "#DC2626";
+    ctx.fillRect(x_px - massSize / 2, massY - massSize / 2, massSize, massSize);
+    ctx.strokeStyle = "#991B1B";
+    ctx.strokeRect(x_px - massSize / 2, massY - massSize / 2, massSize, massSize);
+
+    // 3d) Update numeric readouts
+    readoutT.textContent  = t.toFixed(2);
+    readoutX.textContent  = x_m.toFixed(2);
+    readoutV.textContent  = v_m.toFixed(2);
+    readoutA.textContent  = a_m.toFixed(2);
+
+    const PE = 0.5 * kVal * x_m * x_m;      // ½ k x²
+    const KE = 0.5 * mVal * v_m * v_m;      // ½ m v²
+    readoutPE.textContent = PE.toFixed(2);
+    readoutKE.textContent = KE.toFixed(2);
+
+    // 3f) Update energy bars
+    // Max total energy = ½ k A²
+    const Emax = 0.5 * kVal * A * A;
+    const peFrac = Emax > 0 ? Math.min(PE / Emax, 1) : 0;
+    const keFrac = Emax > 0 ? Math.min(KE / Emax, 1) : 0;
+    barPE.style.height = `${peFrac * 100}%`;
+    barKE.style.height = `${keFrac * 100}%`;
+  }
+
+  // Draw a coiled spring from (x1,y1) to (x2,y2)
+  function drawSpring(x1, y1, x2, y2) {
+    const totalLength = x2 - x1;
+    const coilCount = 12;               // number of loops
+    const coilSpacing = totalLength / (coilCount + 1);
+    const amplitude = 10;               // amplitude of the sine wave (px)
+
+    ctx.strokeStyle = "#4A5568";
+    ctx.lineWidth   = 2;
+    ctx.beginPath();
+
+    // Start at x1,y1
+    ctx.moveTo(x1, y1);
+
+    // For each coil, draw a half sine wave segment
+    for (let i = 1; i <= coilCount; i++) {
+      const cx = x1 + coilSpacing * i;
+      const phase = (i % 2 === 0) ? Math.PI : 0; // alternate phase for up/down
+      const px = cx;
+      const py = y1 + Math.sin(phase) * amplitude;
+
+      // Instead of a straight line, approximate with a small sine curve
+      const steps = 10; // subdivide each coil into 10 segments
+      for (let j = 0; j <= steps; j++) {
+        const t = (j / steps);
+        const sx = x1 + coilSpacing * (i - 1) + t * coilSpacing;
+        const angle = ((i - 1 + t) * Math.PI);
+        const sy = y1 + Math.sin(angle) * amplitude * ((i - 1 + t) % 2 === 0 ? 1 : -1);
+        ctx.lineTo(sx, sy);
+      }
+    }
+
+    // Finally connect to x2,y2
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+  }
+
+
+  // ==== 4. Slider Change Handlers ====
+  kSlider.addEventListener("input", () => {
+    k = Number.parseFloat(kSlider.value);
+    kValue.textContent = k.toFixed(0);
+    omega = Math.sqrt(k / m);
+    maxT  = (2 * Math.PI) / omega;
+    if (!running) {
+      drawScene(0);
+    }
+  });
+
+  mSlider.addEventListener("input", () => {
+    m = Number.parseFloat(mSlider.value);
+    mValue.textContent = `${m.toFixed(1)} kg`;
+    omega = Math.sqrt(k / m);
+    maxT  = (2 * Math.PI) / omega;
+    if (!running) {
+      drawScene(0);
+    }
+  });
+
+  ASlider.addEventListener("input", () => {
+    A = Number.parseFloat(ASlider.value);
+    AValue.textContent = A.toFixed(2);
+    if (!running) {
+      drawScene(0);
+    }
+  });
+
+
+  // ==== 5. Animation Loop & Launch ====
+  function step(timestamp) {
+    if (!t0) {
+      t0 = timestamp;
+    }
+    let elapsed = (timestamp - t0) / 1000; // seconds since start
+    if (elapsed >= maxT) {
+      // One full oscillation complete → reveal quiz
+      drawScene(maxT);
+      revealQuiz();
+      return;
+    }
+    drawScene(elapsed);
+
+    // Update Position vs Time chart
+    posChart.data.labels.push(elapsed.toFixed(2));
+    const x_m = A * Math.cos(omega * elapsed);
+    posChart.data.datasets[0].data.push(x_m.toFixed(2));
+    posChart.update("none");
+
+    animId = requestAnimationFrame(step);
+  }
+
+  startBtn.addEventListener("click", () => {
+    // Disable controls while animating
+    kSlider.disabled    = true;
+    mSlider.disabled    = true;
+    ASlider.disabled    = true;
+    startBtn.disabled   = true;
+    stopBtn.disabled    = false;
+    resetBtn.disabled   = true;
+
+    // Prepare for launch
+    omega = Math.sqrt(k / m);
+    maxT  = (2 * Math.PI) / omega;
+    t0    = null;
+
+    // Clear chart
+    posChart.data.labels = [];
+    posChart.data.datasets[0].data = [];
+    posChart.update("none");
+
+    running = true;
+    animId = requestAnimationFrame(step);
+  });
+
+  stopBtn.addEventListener("click", () => {
+    if (animId) cancelAnimationFrame(animId);
+    running = false;
+    stopBtn.disabled    = true;
+    startBtn.disabled   = false;
+    resetBtn.disabled   = false;
+  });
+
+  resetBtn.addEventListener("click", () => {
+    if (animId) cancelAnimationFrame(animId);
+    running = false;
+    t0       = null;
+    // Re-enable sliders
+    kSlider.disabled    = false;
+    mSlider.disabled    = false;
+    ASlider.disabled    = false;
+    startBtn.disabled   = false;
+    stopBtn.disabled    = true;
+    resetBtn.disabled   = false;
+    quizDiv.classList.add("hidden");
+
+    // Clear chart
+    posChart.data.labels = [];
+    posChart.data.datasets[0].data = [];
+    posChart.update("none");
+
+    // Redraw at t=0
+    drawScene(0);
+  });
+
+
+  // ==== 6. Quiz Reveal ====
+  function revealQuiz() {
+    stopBtn.disabled    = true;
+    resetBtn.disabled   = false;
+    quizDiv.classList.remove("hidden");
+  }
+
+
+  // ==== 7. Initial Draw ====
+  drawScene(0);
+});
diff --git a/web/virtual_lab/static/virtual_lab/js/physics_pendulum.js b/web/virtual_lab/static/virtual_lab/js/physics_pendulum.js
new file mode 100644
index 000000000..48874e417
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/physics_pendulum.js
@@ -0,0 +1,396 @@
+// web/virtual_lab/static/virtual_lab/js/physics_pendulum.js
+
+document.addEventListener("DOMContentLoaded", () => {
+  // -------- Tutorial Logic with Animated Steps -------- //
+  const tutorialOverlay = document.getElementById("tutorial-overlay");
+  const stepNumberElem = document.getElementById("step-number");
+  const stepList = document.getElementById("step-list");
+  const prevBtn = document.getElementById("tutorial-prev");
+  const nextBtn = document.getElementById("tutorial-next");
+  const skipBtn = document.getElementById("tutorial-skip");
+
+  // Each step is an array of bullet‐point strings
+  const steps = [
+    ["A pendulum consists of a mass (bob) attached to a string, swinging under gravity."],
+    [
+      "The length (L) of the string determines how fast it swings.",
+      "Longer pendulum → slower oscillation; shorter → faster."
+    ],
+    [
+      "The angular frequency ω = √(g / L), where g ≈ 9.81 m/s².",
+      "ω tells us how quickly the pendulum oscillates."
+    ],
+    [
+      "The motion follows θ(t) = θ₀ · cos(ω t),",
+      "where θ₀ is the initial amplitude in radians."
+    ],
+    [
+      "After one period T = 2π / ω, the pendulum returns to its start.",
+      "Click 'Next' to begin the experiment!"
+    ]
+  ];
+
+  let currentStep = 0;
+
+  function showStep(index) {
+    stepNumberElem.textContent = index + 1;
+    stepList.innerHTML = "";
+    steps[index].forEach((text, idx) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      li.className = "opacity-0 transition-opacity duration-500";
+      stepList.appendChild(li);
+      setTimeout(() => {
+        li.classList.remove("opacity-0");
+        li.classList.add("opacity-100");
+      }, idx * 200);
+    });
+    prevBtn.disabled = index === 0;
+    nextBtn.textContent = index === steps.length - 1 ? "Begin Experiment" : "Next";
+  }
+
+  showStep(currentStep);
+
+  prevBtn.addEventListener("click", () => {
+    if (currentStep > 0) {
+      currentStep--;
+      showStep(currentStep);
+    }
+  });
+
+  nextBtn.addEventListener("click", () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      showStep(currentStep);
+    } else {
+      tutorialOverlay.classList.add("hidden");
+      enableControls();
+    }
+  });
+
+  skipBtn.addEventListener("click", () => {
+    tutorialOverlay.classList.add("hidden");
+    enableControls();
+  });
+  // -------- End Animated Tutorial Logic -------- //
+
+  // -------- Simulation, Chart, Energy, Trail & Readouts -------- //
+  const canvas = document.getElementById("pendulum-canvas");
+  const ctx = canvas.getContext("2d");
+  const lengthSlider = document.getElementById("length-slider");
+  const lengthValue = document.getElementById("length-value");
+  const startButton = document.getElementById("start-pendulum");
+  const stopButton = document.getElementById("stop-pendulum");
+  const postlabQuiz = document.getElementById("postlab-quiz");
+
+  // Energy bars
+  const peBar = document.getElementById("pe-bar");
+  const keBar = document.getElementById("ke-bar");
+
+  // Numeric readouts
+  const timeReadout = document.getElementById("time-readout");
+  const angleReadout = document.getElementById("angle-readout");
+  const speedReadout = document.getElementById("speed-readout");
+
+  // Chart.js mini‐graph
+  const chartCanvas = document.getElementById("angle-chart").getContext("2d");
+
+  // Physical constants and state
+  const g = 9.81;             // m/s²
+  const originX = canvas.width / 2;
+  const originY = 50;         // pivot-point y-coordinate
+  const pixelsPerMeter = 100; // 1 m → 100 px
+  const bobRadius = 15;       // px
+
+  let L = Number.parseFloat(lengthSlider.value); // length in meters
+  let omega = Math.sqrt(g / L);           // angular frequency
+  let theta0 = 0.3;    // initial amplitude (rad)
+  let currentAngle = theta0;
+  let animationId = null;
+  let startTime = null;
+
+  // For drag-and-release
+  let isDragging = false;
+  let dragAngle = 0;
+
+  // Initialize Chart.js
+  const angleChart = new Chart(chartCanvas, {
+    type: "line",
+    data: {
+      labels: [],
+      datasets: [{
+        label: "θ(t) (rad)",
+        data: [],
+        borderColor: "#FF6633",
+        borderWidth: 2,
+        fill: false,
+        pointRadius: 0,
+      }]
+    },
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "Time (s)" } },
+        y: { title: { display: true, text: "Angle (rad)" }, min: -theta0, max: theta0 }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  // Draw pendulum with a "trail" effect
+  function drawPendulum(angle, length) {
+    ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const r = length * pixelsPerMeter;
+    const bobX = originX + r * Math.sin(angle);
+    const bobY = originY + r * Math.cos(angle);
+
+    // Draw rod
+    ctx.beginPath();
+    ctx.moveTo(originX, originY);
+    ctx.lineTo(bobX, bobY);
+    ctx.strokeStyle = "#333";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // Draw bob
+    ctx.beginPath();
+    ctx.arc(bobX, bobY, bobRadius, 0, 2 * Math.PI);
+    ctx.fillStyle = "#007BFF";
+    ctx.fill();
+    ctx.strokeStyle = "#0056b3";
+    ctx.stroke();
+  }
+
+  // Convert mouse coords → angle from vertical
+  function computeAngleFromMouse(mouseX, mouseY, length) {
+    const dx = mouseX - originX;
+    const dy = mouseY - originY;
+    const r = length * pixelsPerMeter;
+    const dist = Math.hypot(dx, dy);
+    const scale = r / dist;
+    const px = dx * scale;
+    const py = dy * scale;
+    return Math.atan2(px, py);
+  }
+
+  // Animation loop: updates everything each frame
+  function animatePendulum(timestamp) {
+    if (!startTime) startTime = timestamp;
+    const elapsedSec = (timestamp - startTime) / 1000; // ms → s
+
+    // Angle: θ(t) = θ₀ cos(ω t)
+    const angle = theta0 * Math.cos(omega * elapsedSec);
+    currentAngle = angle;
+
+    // 1) Draw pendulum with trail
+    drawPendulum(angle, L);
+
+    // 2) Update mini-graph
+    if (angleChart.data.labels.length > 100) {
+      angleChart.data.labels.shift();
+      angleChart.data.datasets[0].data.shift();
+    }
+    angleChart.data.labels.push(elapsedSec.toFixed(2));
+    angleChart.data.datasets[0].data.push(angle);
+    angleChart.update("none");
+
+    // 3) Compute energies (m = 1 kg)
+    const h = L * (1 - Math.cos(angle));   // height above bottom
+    const pe = g * h;                      // PE = m g h (m=1)
+    // Velocity: v = L * (dθ/dt) = L * (−θ₀ ω sin(ωt))
+    const v = -L * theta0 * omega * Math.sin(omega * elapsedSec);
+    const ke = 0.5 * v * v;                // KE = ½ m v² (m=1)
+    const E = pe + ke;
+    const pePct = E ? (pe / E) * 100 : 0;
+    const kePct = E ? (ke / E) * 100 : 0;
+    peBar.style.width = `${pePct.toFixed(1)}%`;
+    keBar.style.width = `${kePct.toFixed(1)}%`;
+
+    // 4) Update numeric readouts
+    timeReadout.textContent = elapsedSec.toFixed(2);
+    angleReadout.textContent = (angle * (180 / Math.PI)).toFixed(1);
+    speedReadout.textContent = Math.abs(v).toFixed(2);
+
+    // 5) Reveal quiz after one full period
+    const period = (2 * Math.PI) / omega;
+    if (elapsedSec >= period && postlabQuiz.classList.contains("hidden")) {
+      postlabQuiz.classList.remove("hidden");
+    }
+
+    animationId = requestAnimationFrame(animatePendulum);
+  }
+
+  // Enable controls after tutorial ends
+  function enableControls() {
+    startButton.disabled = false;
+    stopButton.disabled = false;
+    lengthSlider.disabled = false;
+    currentAngle = theta0;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawPendulum(currentAngle, L);
+  }
+
+  // Initially disable controls
+  startButton.disabled = true;
+  stopButton.disabled = true;
+  lengthSlider.disabled = true;
+
+  // Update length L & ω on slider input
+  lengthSlider.addEventListener("input", () => {
+    L = Number.parseFloat(lengthSlider.value);
+    lengthValue.textContent = `${L.toFixed(1)} m`;
+    omega = Math.sqrt(g / L);
+    // Adjust chart y-axis
+    angleChart.options.scales.y.min = -theta0;
+    angleChart.options.scales.y.max = theta0;
+    angleChart.update("none");
+
+    if (!isDragging && !animationId) {
+      currentAngle = theta0;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawPendulum(currentAngle, L);
+    }
+  });
+
+  // Start button: reset chart, energy bars, trail
+  startButton.addEventListener("click", () => {
+    if (animationId) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+      postlabQuiz.classList.add("hidden");
+    }
+
+    // Clear canvas fully
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Reset chart
+    angleChart.data.labels = [];
+    angleChart.data.datasets[0].data = [];
+    angleChart.update("none");
+
+    // Reset energy bars
+    peBar.style.width = "0%";
+    keBar.style.width = "0%";
+
+    // Reset numeric readouts
+    timeReadout.textContent = "0.00";
+    angleReadout.textContent = (theta0 * (180 / Math.PI)).toFixed(1);
+    speedReadout.textContent = "0.00";
+
+    // Use currentAngle (maybe from drag) as θ₀
+    theta0 = currentAngle;
+    angleChart.options.scales.y.min = -theta0;
+    angleChart.options.scales.y.max = theta0;
+    angleChart.update("none");
+
+    startTime = null;
+    animationId = requestAnimationFrame(animatePendulum);
+  });
+
+  // Stop button: cancel animation
+  stopButton.addEventListener("click", () => {
+    if (animationId) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawPendulum(currentAngle, L);
+  });
+
+  // -------- Drag & Release Logic (Mouse + Touch) -------- //
+
+  // Helper function to get coordinates from mouse or touch event
+  function getEventCoords(e) {
+    const rect = canvas.getBoundingClientRect();
+    if (e.type.startsWith('touch')) {
+      return {
+        x: e.touches[0].clientX - rect.left,
+        y: e.touches[0].clientY - rect.top
+      };
+    } else {
+      return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+    }
+  }
+
+  // Helper function to start dragging
+  function startDrag(e) {
+    if (animationId) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    }
+
+    const coords = getEventCoords(e);
+    const r = L * pixelsPerMeter;
+    const bobX = originX + r * Math.sin(currentAngle);
+    const bobY = originY + r * Math.cos(currentAngle);
+    const distToBob = Math.hypot(coords.x - bobX, coords.y - bobY);
+
+    if (distToBob <= bobRadius + 3) {
+      isDragging = true;
+      dragAngle = currentAngle;
+      e.preventDefault(); // Prevent default for touch events
+    }
+  }
+
+  // Helper function to handle dragging
+  function handleDrag(e) {
+    if (!isDragging) return;
+
+    const coords = getEventCoords(e);
+    dragAngle = computeAngleFromMouse(coords.x, coords.y, L);
+    currentAngle = dragAngle;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawPendulum(currentAngle, L);
+
+    // Update numeric readouts during drag
+    timeReadout.textContent = "0.00";
+    angleReadout.textContent = (currentAngle * (180 / Math.PI)).toFixed(1);
+    speedReadout.textContent = "0.00";
+
+    // Reset energy bars (PE only)
+    const h = L * (1 - Math.cos(currentAngle));
+    const pe = g * h;
+    const total = pe;
+    peBar.style.width = total ? `${((pe / total) * 100).toFixed(1)}%` : "0%";
+    keBar.style.width = "0%";
+
+    e.preventDefault(); // Prevent scrolling on touch
+  }
+
+  // Helper function to end dragging
+  function endDrag() {
+    if (!isDragging) return;
+    isDragging = false;
+    theta0 = dragAngle;
+    angleChart.options.scales.y.min = -theta0;
+    angleChart.options.scales.y.max = theta0;
+    angleChart.update("none");
+
+    startTime = null;
+    animationId = requestAnimationFrame(animatePendulum);
+  }
+
+  // Mouse events
+  canvas.addEventListener("mousedown", startDrag);
+  canvas.addEventListener("mousemove", handleDrag);
+  canvas.addEventListener("mouseup", endDrag);
+  canvas.addEventListener("mouseleave", endDrag);
+
+  // Touch events for mobile
+  canvas.addEventListener("touchstart", startDrag);
+  canvas.addEventListener("touchmove", handleDrag);
+  canvas.addEventListener("touchend", endDrag);
+  canvas.addEventListener("touchcancel", endDrag);
+
+  // Prevent default drag behavior
+  canvas.addEventListener("dragstart", (e) => {
+    e.preventDefault();
+  });
+
+  // -------- End Drag & Release Logic -------- //
+});
diff --git a/web/virtual_lab/static/virtual_lab/js/physics_projectile.js b/web/virtual_lab/static/virtual_lab/js/physics_projectile.js
new file mode 100644
index 000000000..a48e456a6
--- /dev/null
+++ b/web/virtual_lab/static/virtual_lab/js/physics_projectile.js
@@ -0,0 +1,412 @@
+// web/virtual_lab/static/virtual_lab/js/physics_projectile.js
+
+document.addEventListener("DOMContentLoaded", () => {
+  // -------- 1. Tutorial Overlay Logic (animated bullet points) -------- //
+  const tutorialOverlay = document.getElementById("tutorial-overlay");
+  const stepNumberElem = document.getElementById("step-number");
+  const stepList = document.getElementById("step-list");
+  const prevBtn = document.getElementById("tutorial-prev");
+  const nextBtn = document.getElementById("tutorial-next");
+  const skipBtn = document.getElementById("tutorial-skip");
+
+  const steps = [
+    ["Click-and-drag FROM the launch pad (white circle at bottom-left) to set initial speed and angle."],
+    [
+      "Drag length sets speed (longer drag → higher speed), direction sets angle.",
+      "Release to start the simulation."
+    ],
+    [
+      "Adjust gravity and wind sliders BEFORE dragging; they affect the predicted trajectory.",
+      "After release, the full path animates."
+    ],
+    [
+      "During flight, small x/y axes are drawn on the ball, showing velocity components.",
+      "Watch the “y vs x” plot updating in real time."
+    ],
+    ["Click “Begin Experiment” when ready, then drag from the launch pad!"]
+  ];
+
+  let currentStep = 0;
+  function showStep(index) {
+    stepNumberElem.textContent = index + 1;
+    stepList.innerHTML = "";
+    steps[index].forEach((text, idx) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      li.className = "opacity-0 transition-opacity duration-500";
+      stepList.appendChild(li);
+      setTimeout(() => {
+        li.classList.remove("opacity-0");
+        li.classList.add("opacity-100");
+      }, idx * 200);
+    });
+    prevBtn.disabled = index === 0;
+    nextBtn.textContent = index === steps.length - 1 ? "Begin Experiment" : "Next";
+  }
+
+  showStep(currentStep);
+  prevBtn.addEventListener("click", () => {
+    if (currentStep > 0) {
+      currentStep--;
+      showStep(currentStep);
+    }
+  });
+  nextBtn.addEventListener("click", () => {
+    if (currentStep < steps.length - 1) {
+      currentStep++;
+      showStep(currentStep);
+    } else {
+      tutorialOverlay.style.display = "none";
+      enableControls();
+    }
+  });
+  skipBtn.addEventListener("click", () => {
+    tutorialOverlay.style.display = "none";
+    enableControls();
+  });
+  // -------- End Tutorial Logic -------- //
+
+
+  // -------- 2. DOM References & State -------- //
+  const canvas = document.getElementById("projectile-canvas");
+  const ctx = canvas.getContext("2d");
+
+  const trajectoryCanvas = document.getElementById("trajectory-chart").getContext("2d");
+
+  const gravitySlider = document.getElementById("gravity-slider");
+  const gravityValue = document.getElementById("gravity-value");
+  const windSlider = document.getElementById("wind-slider");
+  const windValue = document.getElementById("wind-value");
+  const resetButton = document.getElementById("reset-button");
+
+  const timeReadout = document.getElementById("time-readout");
+  const xReadout = document.getElementById("x-readout");
+  const yReadout = document.getElementById("y-readout");
+  const vxReadout = document.getElementById("vx-readout");
+  const vyReadout = document.getElementById("vy-readout");
+
+  let g = Number.parseFloat(gravitySlider.value);
+  let windAccel = Number.parseFloat(windSlider.value);
+
+  let originY = canvas.height - 10;
+  let pixelsPerMeter = 10;
+
+  let v0 = 0, thetaRad = 0, vx = 0, vy0 = 0;
+  let maxRange = 0, maxHeight = 0;
+
+  // Stores trajectory points and velocities
+  let trajectoryPoints = []; // { x_m, y_m, vx_t, vy_t }
+  let currentFrame = 0;
+  let animationId = null;
+
+  const trajData = {
+    labels: [],
+    datasets: [{
+      label: "y vs x (m)",
+      data: [],
+      borderColor: "#3182CE",
+      borderWidth: 2,
+      fill: false,
+      pointRadius: 0
+    }]
+  };
+  const trajChart = new Chart(trajectoryCanvas, {
+    type: "line",
+    data: trajData,
+    options: {
+      animation: false,
+      scales: {
+        x: { title: { display: true, text: "x (m)" } },
+        y: { title: { display: true, text: "y (m)" } }
+      },
+      plugins: { legend: { display: false } }
+    }
+  });
+
+  gravitySlider.disabled = true;
+  windSlider.disabled = true;
+  resetButton.disabled = true;
+
+
+  // -------- 3. Enable Controls & Initial Drawing -------- //
+  function enableControls() {
+    gravitySlider.disabled = false;
+    windSlider.disabled = false;
+    resetButton.disabled = false;
+    drawScene();
+  }
+
+  function drawAxes() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.moveTo(0, originY);
+    ctx.lineTo(canvas.width, originY);
+    ctx.strokeStyle = "#2D3748";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  }
+
+  function drawLaunchPad() {
+    const padX = 10, padY = originY, padR = 8;
+    ctx.beginPath();
+    ctx.arc(padX, padY, padR, 0, 2 * Math.PI);
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fill();
+    ctx.strokeStyle = "#4A5568";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  }
+
+  function drawScene() {
+    drawAxes();
+    drawLaunchPad();
+  }
+
+  // -------- 4. Gravity & Wind Slider Handlers -------- //
+  gravitySlider.addEventListener("input", () => {
+    g = Number.parseFloat(gravitySlider.value);
+    gravityValue.textContent = g.toFixed(2);
+  });
+  windSlider.addEventListener("input", () => {
+    windAccel = Number.parseFloat(windSlider.value);
+    windValue.textContent = windAccel.toFixed(2);
+  });
+
+
+  // -------- 5. Aim-by-Drag Logic -------- //
+  let isAiming = false;
+  let aimStartX = 0, aimStartY = 0;
+  let aimCurrentX = 0, aimCurrentY = 0;
+
+  canvas.addEventListener("mousedown", (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    const padX = 10, padY = originY, padR = 8;
+    const dist = Math.hypot(mouseX - padX, mouseY - padY);
+    if (dist <= padR + 4) {
+      isAiming = true;
+      aimStartX = padX;
+      aimStartY = padY;
+      aimCurrentX = mouseX;
+      aimCurrentY = mouseY;
+
+      trajChart.data.labels = [];
+      trajChart.data.datasets[0].data = [];
+      trajChart.update("none");
+
+      timeReadout.textContent = "0.00";
+      xReadout.textContent = "0.00";
+      yReadout.textContent = "0.00";
+      vxReadout.textContent = "0.00";
+      vyReadout.textContent = "0.00";
+
+      drawScene();
+    }
+  });
+
+  canvas.addEventListener("mousemove", (e) => {
+    if (!isAiming) return;
+    const rect = canvas.getBoundingClientRect();
+    aimCurrentX = e.clientX - rect.left;
+    aimCurrentY = e.clientY - rect.top;
+
+    drawScene();
+
+    ctx.beginPath();
+    ctx.moveTo(aimStartX, aimStartY);
+    ctx.lineTo(aimCurrentX, aimCurrentY);
+    ctx.strokeStyle = "#DD6B20";
+    ctx.lineWidth = 3;
+    ctx.setLineDash([5, 5]);
+    ctx.stroke();
+    ctx.setLineDash([]);
+  });
+
+  canvas.addEventListener("mouseup", (e) => {
+    if (!isAiming) return;
+    isAiming = false;
+
+    const dx_px = aimCurrentX - aimStartX;
+    const dy_px = aimCurrentY - aimStartY;
+    if (dx_px <= 0) {
+      drawScene();
+      return;
+    }
+
+    // Convert drag to meters using temporary scale: 1 px → 0.1 m
+    const tmpScale = 0.1;
+    const dx_m = dx_px * tmpScale;
+    const dy_m = (originY - aimCurrentY) * tmpScale; // invert y-axis
+
+    v0 = Math.hypot(dx_m, dy_m);
+    thetaRad = Math.atan2(dy_m, dx_m);
+    vx = v0 * Math.cos(thetaRad);
+    vy0 = v0 * Math.sin(thetaRad);
+
+    // Compute theoretical max range & height
+    maxRange = (v0 * v0 * Math.sin(2 * thetaRad)) / g;
+    maxHeight = (v0 * v0 * Math.sin(thetaRad) * Math.sin(thetaRad)) / (2 * g);
+
+    // Recalculate pixelsPerMeter so full path fits
+    const marginX = 60, marginY = 60;
+    const availableWidth = canvas.width - marginX;
+    const availableHeight = originY - marginY;
+    const scaleX = availableWidth / (maxRange + 1);
+    const scaleY = availableHeight / (maxHeight + 1);
+    pixelsPerMeter = Math.min(scaleX, scaleY);
+
+    // Build the discrete trajectory points
+    buildTrajectoryPoints();
+
+    // Clear and draw static full trajectory faintly
+    drawScene();
+    drawStaticTrajectory();
+
+    // Start animation loop
+    currentFrame = 0;
+    if (animationId) cancelAnimationFrame(animationId);
+    animationId = requestAnimationFrame(animateBall);
+  });
+
+
+  // -------- 6. Build Trajectory Points & Velocities -------- //
+  function buildTrajectoryPoints() {
+    trajectoryPoints = [];
+    const timeOfFlight = (2 * vy0) / g;
+    const steps = 200;
+    for (let i = 0; i <= steps; i++) {
+      const t = (i / steps) * timeOfFlight;
+      const x_m = vx * t + 0.5 * windAccel * t * t;
+      const y_m = vy0 * t - 0.5 * g * t * t;
+      if (y_m < 0) {
+        trajectoryPoints.push({ x_m, y_m: 0, vx_t: vx + windAccel * t, vy_t: 0 });
+        break;
+      }
+      const vx_t = vx + windAccel * t;
+      const vy_t = vy0 - g * t;
+      trajectoryPoints.push({ x_m, y_m, vx_t, vy_t });
+    }
+  }
+
+  // -------- 7. Draw Static Full Trajectory (faint) -------- //
+  function drawStaticTrajectory() {
+    ctx.beginPath();
+    trajectoryPoints.forEach((pt, idx) => {
+      const px = pt.x_m * pixelsPerMeter + 10;
+      const py = originY - pt.y_m * pixelsPerMeter;
+      if (idx === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    });
+    ctx.strokeStyle = "rgba(221, 107, 32, 0.3)"; // faint orange
+    ctx.lineWidth = 2;
+    ctx.setLineDash([]);
+    ctx.stroke();
+  }
+
+  // -------- 8. Animation Loop: Move Ball & Draw Axes-On-Ball -------- //
+  function animateBall() {
+    if (currentFrame >= trajectoryPoints.length) return;
+
+    // Clear and redraw background & static path
+    drawScene();
+    drawStaticTrajectory();
+
+    const pt = trajectoryPoints[currentFrame];
+    const canvasX = pt.x_m * pixelsPerMeter + 10;
+    const canvasY = originY - pt.y_m * pixelsPerMeter;
+
+    // Draw the ball
+    ctx.beginPath();
+    ctx.arc(canvasX, canvasY, 6, 0, 2 * Math.PI);
+    ctx.fillStyle = "#E53E3E";
+    ctx.fill();
+    ctx.strokeStyle = "#9B2C2C";
+    ctx.stroke();
+
+    // Draw small x/y axes on the ball, and show velocity components
+    drawAxesOnBall(canvasX, canvasY, pt.vx_t, pt.vy_t);
+
+    // Update numeric readouts
+    const t = (currentFrame / (trajectoryPoints.length - 1)) * ((2 * vy0) / g);
+    timeReadout.textContent = t.toFixed(2);
+    xReadout.textContent = pt.x_m.toFixed(2);
+    yReadout.textContent = pt.y_m.toFixed(2);
+    vxReadout.textContent = pt.vx_t.toFixed(2);
+    vyReadout.textContent = pt.vy_t.toFixed(2);
+
+    // Update live plot with just this point
+    trajChart.data.labels.push(pt.x_m.toFixed(2));
+    trajChart.data.datasets[0].data.push(pt.y_m.toFixed(2));
+    trajChart.update("none");
+
+    currentFrame++;
+    animationId = requestAnimationFrame(animateBall);
+  }
+
+  function drawAxesOnBall(cx, cy, vx_t, vy_t) {
+    // Draw a small cross (x and y axes) centered on the ball
+    const axisLen = 12; // total length of each axis line
+    ctx.strokeStyle = "#000000";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    // Horizontal axis line
+    ctx.moveTo(cx - axisLen / 2, cy);
+    ctx.lineTo(cx + axisLen / 2, cy);
+    // Vertical axis line
+    ctx.moveTo(cx, cy - axisLen / 2);
+    ctx.lineTo(cx, cy + axisLen / 2);
+    ctx.stroke();
+
+    // Now plot velocity components as small dots on those axes:
+    // Scale velocities so they fit within half-axis length
+    const vScale = 0.2; // 1 m/s → 0.2 px
+    let vx_px = vx_t * vScale;
+    let vy_px = vy_t * vScale;
+    // Clamp so dot stays on axis line
+    vx_px = Math.max(Math.min(vx_px, axisLen / 2), -axisLen / 2);
+    vy_px = Math.max(Math.min(vy_px, axisLen / 2), -axisLen / 2);
+
+    // Draw x-velocity dot (blue) on horizontal axis
+    ctx.beginPath();
+    ctx.arc(cx + vx_px, cy, 2.5, 0, 2 * Math.PI);
+    ctx.fillStyle = "#3182CE";
+    ctx.fill();
+
+    // Draw y-velocity dot (green) on vertical axis
+    ctx.beginPath();
+    ctx.arc(cx, cy - vy_px, 2.5, 0, 2 * Math.PI);
+    ctx.fillStyle = "#38A169";
+    ctx.fill();
+  }
+
+  // -------- 9. Reset Handler -------- //
+  resetButton.addEventListener("click", () => {
+    if (animationId) cancelAnimationFrame(animationId);
+    trajectoryPoints = [];
+    currentFrame = 0;
+    trajChart.data.labels = [];
+    trajChart.data.datasets[0].data = [];
+    trajChart.update("none");
+
+    drawScene();
+
+    g = 9.81;
+    windAccel = 0;
+    gravitySlider.value = "9.81";
+    windSlider.value = "0";
+    gravityValue.textContent = "9.81";
+    windValue.textContent = "0.00";
+
+    timeReadout.textContent = "0.00";
+    xReadout.textContent = "0.00";
+    yReadout.textContent = "0.00";
+    vxReadout.textContent = "0.00";
+    vyReadout.textContent = "0.00";
+  });
+
+
+  // -------- 10. Initial Draw -------- //
+  drawScene();
+});
diff --git a/web/virtual_lab/templates/virtual_lab/home.html b/web/virtual_lab/templates/virtual_lab/home.html
new file mode 100644
index 000000000..0f6f85c9b
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/home.html
@@ -0,0 +1,49 @@
+{# web/virtual_lab/templates/virtual_lab/home.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="max-w-5xl mx-auto px-6 py-8">
+    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
+      <div class="px-8 py-6">
+        <h2 class="text-4xl font-extrabold text-gray-800 mb-4">Welcome to the Alpha Science Lab</h2>
+        <p class="text-gray-600 mb-8">
+          Dive into interactive experiments and deepen your understanding of fundamental concepts. Click on any card below to begin.
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <!-- Pendulum Motion Card -->
+          <a href="{% url 'virtual_lab:physics_pendulum' %}"
+             class="block bg-gradient-to-b from-blue-50 to-white border border-blue-200 rounded-lg p-6 shadow hover:shadow-md transition">
+            <h3 class="text-2xl font-semibold text-blue-700 mb-2">Pendulum Motion</h3>
+            <p class="text-blue-600">Visualize how length affects a pendulum's period.</p>
+          </a>
+          <!-- Projectile Motion Card -->
+          <a href="{% url 'virtual_lab:physics_projectile' %}"
+             class="block bg-gradient-to-b from-green-50 to-white border border-green-200 rounded-lg p-6 shadow hover:shadow-md transition">
+            <h3 class="text-2xl font-semibold text-green-700 mb-2">Projectile Motion</h3>
+            <p class="text-green-600">Launch a projectile and observe its real‐time trajectory.</p>
+          </a>
+          <!-- Inclined Plane Card -->
+          <a href="{% url 'virtual_lab:physics_inclined' %}"
+             class="block bg-gradient-to-b from-yellow-50 to-white border border-yellow-200 rounded-lg p-6 shadow hover:shadow-md transition">
+            <h3 class="text-2xl font-semibold text-yellow-800 mb-2">Inclined Plane</h3>
+            <p class="text-yellow-700">See a block slide down and discover acceleration on a ramp.</p>
+          </a>
+          <!-- Mass–Spring Oscillation Card -->
+          <a href="{% url 'virtual_lab:physics_mass_spring' %}"
+             class="block bg-gradient-to-b from-purple-50 to-white border border-purple-200 rounded-lg p-6 shadow hover:shadow-md transition">
+            <h3 class="text-2xl font-semibold text-purple-700 mb-2">Mass–Spring Oscillation</h3>
+            <p class="text-purple-600">Set k and m, drag the mass, then watch it oscillate and view x(t).</p>
+          </a>
+          <!-- Basic Electrical Circuit Card -->
+          <a href="{% url 'virtual_lab:physics_electrical_circuit' %}"
+             class="block bg-gradient-to-b from-teal-50 to-white border border-teal-200 rounded-lg p-6 shadow hover:shadow-md transition">
+            <h3 class="text-2xl font-semibold text-teal-700 mb-2">Basic Electrical Circuit</h3>
+            <p class="text-teal-600">Build an RC circuit, adjust R, C, and V₀, and watch the capacitor charge in real time.</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/layout.html b/web/virtual_lab/templates/virtual_lab/layout.html
new file mode 100644
index 000000000..fd528f14d
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/layout.html
@@ -0,0 +1,50 @@
+{# web/virtual_lab/templates/virtual_lab/layout.html #}
+{% extends 'base.html' %}
+
+{% load static %}
+{% load i18n %}
+
+{% block content %}
+  <div class="min-h-screen flex flex-col bg-gray-50">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+        <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+           class="text-2xl font-bold text-indigo-600 hover:text-indigo-800 transition">Alpha Science Lab</a>
+        <nav class="space-x-8 text-gray-700">
+          <!-- Home Link -->
+          <a href="{% url 'virtual_lab:virtual_lab_home' %}"
+             class="hover:text-indigo-600 transition">{% trans "Home" %}</a>
+          <!-- Physics Dropdown -->
+          <div class="relative group inline-block">
+            <button class="hover:text-indigo-600 transition focus:outline-none">{% trans "Physics" %}</button>
+            <div class="absolute left-0 mt-2 w-40 bg-white border border-gray-200 rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition pointer-events-none group-hover:pointer-events-auto">
+              <a href="{% url 'virtual_lab:physics_pendulum' %}"
+                 class="block px-4 py-2 hover:bg-indigo-50">Pendulum</a>
+              <a href="{% url 'virtual_lab:physics_projectile' %}"
+                 class="block px-4 py-2 hover:bg-green-50">Projectile</a>
+              <a href="{% url 'virtual_lab:physics_inclined' %}"
+                 class="block px-4 py-2 hover:bg-yellow-50">Inclined Plane</a>
+            </div>
+          </div>
+          <!-- Placeholder Links (disabled) -->
+          <span class="opacity-50 cursor-not-allowed">{% trans "Chemistry" %}</span>
+          <span class="opacity-50 cursor-not-allowed">{% trans "Code Editor" %}</span>
+        </nav>
+      </div>
+    </header>
+    <!-- Main Content Area -->
+    <main class="flex-grow">
+      {% block virtual_lab_content %}{% endblock %}
+    </main>
+    <!-- Footer -->
+    <footer class="bg-white border-t border-gray-200">
+      <div class="max-w-6xl mx-auto px-6 py-4 text-center text-gray-500 text-sm">
+        &copy; {{ now.year }} Alpha One Labs. All rights reserved.
+      </div>
+    </footer>
+  </div>
+  <!-- Common JS (e.g., sidebar toggles, utility functions) -->
+  <script src="{% static 'virtual_lab/js/common.js' %}"></script>
+  {% block extra_scripts %}{% endblock %}
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/physics/circuit.html b/web/virtual_lab/templates/virtual_lab/physics/circuit.html
new file mode 100644
index 000000000..13e8db13a
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/physics/circuit.html
@@ -0,0 +1,150 @@
+{# web/virtual_lab/templates/virtual_lab/physics/circuit.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="relative">
+    <!-- ===== Tutorial Overlay ===== -->
+    <div id="tutorial-overlay"
+         class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg p-6 w-11/12 sm:w-3/4 md:w-1/2 lg:w-2/5">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">
+          Step <span id="step-number">1</span> of 4
+        </h3>
+        <ul id="step-list"
+            class="mt-4 text-gray-700 list-disc list-inside space-y-2">
+          <!-- Populated by JS -->
+        </ul>
+        <div class="mt-6 flex justify-end space-x-2">
+          <button id="tutorial-prev"
+                  class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 disabled:opacity-50"
+                  disabled>Previous</button>
+          <button id="tutorial-next"
+                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Next</button>
+          <button id="tutorial-skip"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Skip Tutorial</button>
+        </div>
+      </div>
+    </div>
+    <!-- ===== End Tutorial Overlay ===== -->
+    <div class="max-w-5xl mx-auto px-6 py-8 space-y-8">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-2xl font-bold text-gray-800 mb-2">Basic Electrical Circuit</h2>
+          <p class="text-gray-600">
+            Build a simple RC circuit: a battery \(V_0\), a resistor \(R\), and a capacitor \(C\). Adjust \(V_0\), \(R\), and \(C\), then click “Start” to watch the capacitor charge. Observe real‐time \(V_C(t)\), \(I(t)\), and a live graph of capacitor voltage over time. After \(5\tau\), a quiz appears.
+          </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 px-6 py-4">
+          <!-- ===== Left Column: Canvas + Controls + Quiz ===== -->
+          <div class="space-y-4">
+            <!-- Controls -->
+            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 flex flex-wrap gap-4">
+              <div class="flex items-center space-x-2">
+                <label for="V-slider" class="font-medium text-gray-700">Battery \(V_0\) (V):</label>
+                <input type="range"
+                       id="V-slider"
+                       min="1"
+                       max="10"
+                       step="0.1"
+                       value="5"
+                       class="w-40" />
+                <span id="V-value" class="ml-2 font-semibold text-gray-800">5.0 V</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="R-slider" class="font-medium text-gray-700">Resistor \(R\) (Ω):</label>
+                <input type="range"
+                       id="R-slider"
+                       min="10"
+                       max="1000"
+                       step="10"
+                       value="100"
+                       class="w-40" />
+                <span id="R-value" class="ml-2 font-semibold text-gray-800">100 Ω</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="C-slider" class="font-medium text-gray-700">Capacitor \(C\) (µF):</label>
+                <input type="range"
+                       id="C-slider"
+                       min="1"
+                       max="1000"
+                       step="1"
+                       value="100"
+                       class="w-40" />
+                <span id="C-value" class="ml-2 font-semibold text-gray-800">100 µF</span>
+              </div>
+              <div class="flex space-x-4 pt-1">
+                <button id="start-circuit"
+                        class="px-4 py-2 bg-yellow-500 text-black font-medium rounded hover:bg-yellow-600 transition">
+                  Start
+                </button>
+                <button id="stop-circuit"
+                        class="px-4 py-2 bg-red-500 text-white font-medium rounded hover:bg-red-600 transition disabled:opacity-50"
+                        disabled>Stop</button>
+                <button id="reset-circuit"
+                        class="px-4 py-2 bg-gray-500 text-white font-medium rounded hover:bg-gray-600 transition">
+                  Reset
+                </button>
+              </div>
+            </div>
+            <!-- Canvas + Numeric Readouts -->
+            <div class="relative bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-xl border border-gray-300">
+              <canvas id="circuit-canvas"
+                      width="600"
+                      height="400"
+                      class="rounded-lg"
+                      role="img"
+                      aria-label="RC circuit simulation showing battery, resistor, and capacitor"></canvas>
+              <!-- Numeric Readouts (top-left overlay) -->
+              <div class="absolute top-2 left-2 bg-white bg-opacity-90 p-2 rounded text-sm">
+                <p>
+                  <strong>Time</strong>: <span id="readout-t">0.00</span> s
+                </p>
+                <p>
+                  <strong>Voltage \(V_C\)</strong>: <span id="readout-vc">0.00</span> V
+                </p>
+                <p>
+                  <strong>Current \(I\)</strong>: <span id="readout-i">0.00</span> A
+                </p>
+                <p>
+                  <strong>Time Constant \(\tau\)</strong>: <span id="readout-tau">0.01</span> s
+                </p>
+              </div>
+            </div>
+            <!-- Post-Lab Quiz -->
+            <div id="postlab-quiz"
+                 class="hidden bg-gray-50 border-t border-gray-200 p-4 rounded-lg">
+              <h3 class="text-xl font-semibold text-gray-800 mb-2">Post-Lab Quiz</h3>
+              <ol class="list-decimal list-inside text-gray-700 space-y-2">
+                <li>
+                  Write the expression for \(\tau = R\,C\). Based on the sliders, calculate the theoretical \(\tau\). Compare it to the time at which \(V_C(t)\) reaches ~63% of \(V_0\).
+                </li>
+                <li>
+                  If you double \(R\) while keeping \(C\) and \(V_0\) fixed, how does the charging curve change? Explain qualitatively.
+                </li>
+              </ol>
+            </div>
+          </div>
+          <!-- ===== Right Column: Graph + (formerly Energy Bars) ===== -->
+          <div class="space-y-6">
+            <!-- Real‐Time Graph: \(V_C\) vs Time -->
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+              <h3 class="text-lg font-semibold text-gray-800 mb-2">Capacitor Voltage vs Time</h3>
+              <canvas id="vc-chart" height="200"></canvas>
+            </div>
+            <!-- (Optional) Current vs Time Graph -->
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+              <h3 class="text-lg font-semibold text-gray-800 mb-2">Current vs Time</h3>
+              <canvas id="i-chart" height="200"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Chart.js CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <!-- Include JS logic -->
+  <script src="{% static 'virtual_lab/js/physics_electrical_circuit.js' %}"></script>
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/physics/inclined.html b/web/virtual_lab/templates/virtual_lab/physics/inclined.html
new file mode 100644
index 000000000..6e852a08f
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/physics/inclined.html
@@ -0,0 +1,169 @@
+{# web/virtual_lab/templates/virtual_lab/physics/inclined.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="relative">
+    <!-- ===== Tutorial Overlay ===== -->
+    <div id="tutorial-overlay"
+         class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg p-6 w-11/12 sm:w-3/4 md:w-1/2 lg:w-2/5">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">
+          Step <span id="step-number">1</span> of 4
+        </h3>
+        <ul id="step-list"
+            class="mt-4 text-gray-700 list-disc list-inside space-y-2">
+          <!-- Filled by JS -->
+        </ul>
+        <div class="mt-6 flex justify-end space-x-2">
+          <button id="tutorial-prev"
+                  class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 disabled:opacity-50"
+                  disabled>Previous</button>
+          <button id="tutorial-next"
+                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Next</button>
+          <button id="tutorial-skip"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Skip Tutorial</button>
+        </div>
+      </div>
+    </div>
+    <!-- ===== End Tutorial Overlay ===== -->
+    <div class="max-w-5xl mx-auto px-6 py-8 space-y-8">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-2xl font-bold text-gray-800 mb-2">Inclined Plane Dynamics</h2>
+          <p class="text-gray-600">
+            Drag the block to any starting point, adjust angle, friction, and mass.
+            Click “Launch” to let it slide, watch live readouts, energy bars, force vectors, and a real-time graph.
+            Once it reaches the bottom, a short quiz will appear.
+          </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 px-6 py-4">
+          <div class="space-y-4">
+            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 flex flex-wrap gap-4">
+              <div class="flex items-center space-x-2">
+                <label for="angle-slider" class="font-medium text-gray-700">Angle (°):</label>
+                <input type="range"
+                       id="angle-slider"
+                       min="0"
+                       max="60"
+                       step="1"
+                       value="30"
+                       class="w-40" />
+                <span id="angle-value" class="ml-2 font-semibold text-gray-800">30°</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="friction-slider" class="font-medium text-gray-700">Friction μ:</label>
+                <input type="range"
+                       id="friction-slider"
+                       min="0"
+                       max="1"
+                       step="0.01"
+                       value="0.00"
+                       class="w-40" />
+                <span id="friction-value" class="ml-2 font-semibold text-gray-800">0.00</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="mass-slider" class="font-medium text-gray-700">Mass (kg):</label>
+                <input type="range"
+                       id="mass-slider"
+                       min="0.1"
+                       max="5.0"
+                       step="0.1"
+                       value="1.0"
+                       class="w-40" />
+                <span id="mass-value" class="ml-2 font-semibold text-gray-800">1.0 kg</span>
+              </div>
+              <div class="flex space-x-4 pt-1">
+                <button id="start-inclined"
+                        class="px-4 py-2 bg-yellow-500 text-black font-medium rounded hover:bg-yellow-600 transition">
+                  Launch
+                </button>
+                <button id="stop-inclined"
+                        class="px-4 py-2 bg-red-500 text-white font-medium rounded hover:bg-red-600 transition disabled:opacity-50"
+                        disabled>Stop</button>
+                <button id="reset-inclined"
+                        class="px-4 py-2 bg-gray-500 text-white font-medium rounded hover:bg-gray-600 transition">
+                  Reset
+                </button>
+              </div>
+            </div>
+            <!-- Canvas + Readouts + Energy Bars -->
+            <div class="relative bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-xl border border-gray-300">
+              <canvas id="inclined-canvas" width="600" height="400" class="rounded-lg"></canvas>
+              <!-- Numeric Readouts (overlay top-left) -->
+              <div class="absolute top-2 left-2 bg-white bg-opacity-80 p-2 rounded text-sm">
+                <p>
+                  <strong>Distance ↓</strong>: <span id="readout-s">0.00</span> m
+                </p>
+                <p>
+                  <strong>Speed</strong>: <span id="readout-v">0.00</span> m/s
+                </p>
+                <p>
+                  <strong>Accel</strong>: <span id="readout-a">0.00</span> m/s²
+                </p>
+                <p>
+                  <strong>PE</strong>: <span id="readout-pe">0.00</span> J
+                </p>
+                <p>
+                  <strong>KE</strong>: <span id="readout-ke">0.00</span> J
+                </p>
+              </div>
+            </div>
+            <!-- Force Vectors Legend -->
+            <div class="flex space-x-4 text-sm">
+              <div class="flex items-center space-x-1">
+                <div class="h-3 w-6 bg-red-500"></div>
+                <span>mg sin α</span>
+              </div>
+              <div class="flex items-center space-x-1">
+                <div class="h-3 w-6 bg-blue-500"></div>
+                <span>Normal (mg cos α)</span>
+              </div>
+              <div class="flex items-center space-x-1">
+                <div class="h-3 w-6 bg-yellow-500"></div>
+                <span>Friction (μ mg cos α)</span>
+              </div>
+            </div>
+          </div>
+          <!-- ===== Right Column: Position vs Time Graph + Quiz + Energy Bars ===== -->
+          <div class="space-y-6">
+            <!-- Real-Time Graph: Position vs Time -->
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+              <h3 class="text-lg font-semibold text-gray-800 mb-2">Position vs Time</h3>
+              <canvas id="position-chart" height="200"></canvas>
+            </div>
+            <!-- Energy Bars (moved below the graph) -->
+            <div class="flex space-x-4 items-end">
+              <div class="w-1/2">
+                <p class="text-center text-sm font-semibold">Potential Energy</p>
+                <div class="h-40 bg-gray-100 rounded-lg overflow-hidden border border-gray-300">
+                  <div id="bar-pe" class="bg-green-500 w-full h-0"></div>
+                </div>
+              </div>
+              <div class="w-1/2">
+                <p class="text-center text-sm font-semibold">Kinetic Energy</p>
+                <div class="h-40 bg-gray-100 rounded-lg overflow-hidden border border-gray-300">
+                  <div id="bar-ke" class="bg-indigo-500 w-full h-0"></div>
+                </div>
+              </div>
+            </div>
+            <!-- Post-Lab Quiz (hidden until bottom) -->
+            <div id="postlab-quiz"
+                 class="hidden bg-gray-50 border-t border-gray-200 p-4 rounded-lg">
+              <h3 class="text-xl font-semibold text-gray-800 mb-2">Post-Lab Quiz</h3>
+              <ol class="list-decimal list-inside text-gray-700 space-y-2">
+                <li>Explain how changing μ affects the block’s motion. What’s the threshold μ below which it moves at α = 15°?</li>
+                <li>If α = 30°, μ = 0.10, and m = 2 kg, calculate the theoretical acceleration and compare to the simulation.</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Chart.js CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <!-- Include Unchanged JS Logic -->
+  <script src="{% static 'virtual_lab/js/physics_inclined.js' %}"></script>
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/physics/mass_spring.html b/web/virtual_lab/templates/virtual_lab/physics/mass_spring.html
new file mode 100644
index 000000000..227dbda9f
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/physics/mass_spring.html
@@ -0,0 +1,166 @@
+{# web/virtual_lab/templates/virtual_lab/physics/mass_spring.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="relative">
+    <!-- ===== Tutorial Overlay ===== -->
+    <div id="tutorial-overlay"
+         class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg p-6 w-11/12 sm:w-3/4 md:w-1/2 lg:w-2/5">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">
+          Step <span id="step-number">1</span> of 4
+        </h3>
+        <ul id="step-list"
+            class="mt-4 text-gray-700 list-disc list-inside space-y-2">
+          <!-- Populated by JS -->
+        </ul>
+        <div class="mt-6 flex justify-end space-x-2">
+          <button id="tutorial-prev"
+                  class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 disabled:opacity-50"
+                  disabled>Previous</button>
+          <button id="tutorial-next"
+                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Next</button>
+          <button id="tutorial-skip"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Skip Tutorial</button>
+        </div>
+      </div>
+    </div>
+    <!-- ===== End Tutorial Overlay ===== -->
+    <div class="max-w-5xl mx-auto px-6 py-8 space-y-8">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-2xl font-bold text-gray-800 mb-2">Mass–Spring Oscillation</h2>
+          <p class="text-gray-600">
+            Drag the mass horizontally to set its initial displacement. Adjust the spring constant \(k\) and mass \(m\).
+            Click “Start” to see the mass oscillate. A live Position vs. Time graph and numeric readouts will update in real time.
+            After one full oscillation, a post-lab quiz will appear.
+          </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 px-6 py-4">
+          <!-- ===== Left Column: Canvas + Controls + Quiz ===== -->
+          <div class="space-y-4">
+            <!-- Controls: k, m, A, Start/Stop/Reset -->
+            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 flex flex-wrap gap-4">
+              <div class="flex items-center space-x-2">
+                <label for="k-slider" class="font-medium text-gray-700">Spring \(k\) (N/m):</label>
+                <input type="range"
+                       id="k-slider"
+                       min="1"
+                       max="100"
+                       step="1"
+                       value="25"
+                       class="w-40" />
+                <span id="k-value" class="ml-2 font-semibold text-gray-800">25</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="m-slider" class="font-medium text-gray-700">Mass \(m\) (kg):</label>
+                <input type="range"
+                       id="m-slider"
+                       min="0.1"
+                       max="5.0"
+                       step="0.1"
+                       value="1.0"
+                       class="w-40" />
+                <span id="m-value" class="ml-2 font-semibold text-gray-800">1.0 kg</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <label for="A-slider" class="font-medium text-gray-700">Initial \(A\) (m):</label>
+                <input type="range"
+                       id="A-slider"
+                       min="0.05"
+                       max="0.5"
+                       step="0.01"
+                       value="0.2"
+                       class="w-40" />
+                <span id="A-value" class="ml-2 font-semibold text-gray-800">0.20 m</span>
+              </div>
+              <div class="flex space-x-4 pt-1">
+                <button id="start-mass-spring"
+                        class="px-4 py-2 bg-yellow-500 text-black font-medium rounded hover:bg-yellow-600 transition">
+                  Start
+                </button>
+                <button id="stop-mass-spring"
+                        class="px-4 py-2 bg-red-500 text-white font-medium rounded hover:bg-red-600 transition disabled:opacity-50"
+                        disabled>Stop</button>
+                <button id="reset-mass-spring"
+                        class="px-4 py-2 bg-gray-500 text-white font-medium rounded hover:bg-gray-600 transition">
+                  Reset
+                </button>
+              </div>
+            </div>
+            <!-- Canvas + Numeric Readouts -->
+            <div class="relative bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-xl border border-gray-300">
+              <canvas id="mass-spring-canvas"
+                      width="600"
+                      height="400"
+                      class="rounded-lg"
+                      role="img"
+                      aria-label="Mass-spring oscillation simulation showing spring, mass, and motion"></canvas>
+              <!-- Numeric Readouts (top-left overlay) -->
+              <div class="absolute top-2 left-2 bg-white bg-opacity-80 p-2 rounded text-sm">
+                <p>
+                  <strong>Time</strong>: <span id="readout-t">0.00</span> s
+                </p>
+                <p>
+                  <strong>Position</strong>: <span id="readout-x">0.00</span> m
+                </p>
+                <p>
+                  <strong>Velocity</strong>: <span id="readout-v">0.00</span> m/s
+                </p>
+                <p>
+                  <strong>Acceleration</strong>: <span id="readout-a">0.00</span> m/s²
+                </p>
+                <p>
+                  <strong>Potential (½kx²)</strong>: <span id="readout-pe">0.00</span> J
+                </p>
+                <p>
+                  <strong>Kinetic (½mv²)</strong>: <span id="readout-ke">0.00</span> J
+                </p>
+              </div>
+            </div>
+            <!-- Post-Lab Quiz (moved here, below the canvas) -->
+            <div id="postlab-quiz"
+                 class="hidden bg-gray-50 border-t border-gray-200 p-4 rounded-lg">
+              <h3 class="text-xl font-semibold text-gray-800 mb-2">Post-Lab Quiz</h3>
+              <ol class="list-decimal list-inside text-gray-700 space-y-2">
+                <li>
+                  Derive the period \(T = 2\pi \sqrt{\frac{m}{k}}\). Compare your measured period from the graph to the theoretical value.
+                </li>
+                <li>If you double the mass \(m\) while keeping \(k\) fixed, how does the period change? Explain.</li>
+              </ol>
+            </div>
+          </div>
+          <!-- ===== Right Column: Position vs Time Graph + Energy Bars ===== -->
+          <div class="space-y-6">
+            <!-- Real-Time Graph: Position vs Time -->
+            <div class="bg-white border border-gray-200 rounded-lg p-4">
+              <h3 class="text-lg font-semibold text-gray-800 mb-2">Position vs Time</h3>
+              <canvas id="position-chart" height="200"></canvas>
+            </div>
+            <!-- Energy Bars (moved here, below the graph) -->
+            <div class="flex space-x-4 items-end">
+              <div class="w-1/2">
+                <p class="text-center text-sm font-semibold">Potential Energy</p>
+                <div class="h-32 bg-gray-100 rounded-lg overflow-hidden border border-gray-300">
+                  <div id="bar-pe" class="bg-green-500 w-full h-0"></div>
+                </div>
+              </div>
+              <div class="w-1/2">
+                <p class="text-center text-sm font-semibold">Kinetic Energy</p>
+                <div class="h-32 bg-gray-100 rounded-lg overflow-hidden border border-gray-300">
+                  <div id="bar-ke" class="bg-indigo-500 w-full h-0"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Chart.js CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <!-- Include JS logic (unchanged) -->
+  <script src="{% static 'virtual_lab/js/physics_mass_spring.js' %}"></script>
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/physics/pendulum.html b/web/virtual_lab/templates/virtual_lab/physics/pendulum.html
new file mode 100644
index 000000000..abcf55ca3
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/physics/pendulum.html
@@ -0,0 +1,123 @@
+{# web/virtual_lab/templates/virtual_lab/physics/pendulum.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="relative">
+    {# ---------------- Tutorial Overlay (unchanged) ---------------- #}
+    <div id="tutorial-overlay"
+         class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg p-6 w-11/12 sm:w-3/4 md:w-1/2 lg:w-2/5">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">
+          Step <span id="step-number">1</span> of 5
+        </h3>
+        <ul id="step-list" class="space-y-2 mt-4 text-gray-700">
+          {# Animated bullet points inserted by JS #}
+        </ul>
+        <div class="mt-6 flex justify-end space-x-2">
+          <button id="tutorial-prev"
+                  class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 disabled:opacity-50 transition-opacity duration-300"
+                  disabled>Previous</button>
+          <button id="tutorial-next"
+                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-opacity duration-300">
+            Next
+          </button>
+          <button id="tutorial-skip"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-opacity duration-300">
+            Skip Tutorial
+          </button>
+        </div>
+      </div>
+    </div>
+    {# -------------- End Tutorial Overlay -------------- #}
+    <div class="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <!-- Pre-lab Tutorial Section -->
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-2xl font-bold text-gray-800 mb-2">Pendulum Motion</h2>
+          <p class="text-gray-600">
+            Follow the animated tutorial above, then start the simulation. Watch the pendulum swing and see its trail. Numerical readouts appear at top‐left.
+          </p>
+        </div>
+        {# -------- Pendulum area with trail, mini-graph, and readouts -------- #}
+        <div class="px-6 py-4 relative">
+          <!-- Pendulum Canvas (600×400) -->
+          <canvas id="pendulum-canvas"
+                  width="600"
+                  height="400"
+                  class="border border-gray-300 rounded bg-white"></canvas>
+          {# Numerical Readouts in top-left corner #}
+          <div id="info-panel"
+               class="absolute top-4 left-4 bg-white bg-opacity-75 p-2 rounded shadow text-sm text-gray-800">
+            <div>
+              t = <span id="time-readout">0.00</span> s
+            </div>
+            <div>
+              θ = <span id="angle-readout">0.0</span>°
+            </div>
+            <div>
+              v = <span id="speed-readout">0.0</span> m/s
+            </div>
+          </div>
+          {# Small graph overlaid in top-right #}
+          <div class="absolute top-4 right-2 bg-white bg-opacity-90 border border-gray-200 rounded shadow-lg p-2">
+            <h4 class="text-sm font-semibold text-gray-800 mb-1">θ vs t</h4>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+            <canvas id="angle-chart"
+                    width="250"
+                    height="150"
+                    class="border border-gray-300 rounded"></canvas>
+          </div>
+        </div>
+        {# -------- End Pendulum area -------- #}
+        {# -------- Energy Bars -------- #}
+        <div class="px-6 py-4 space-y-4">
+          <div>
+            <div class="text-gray-700 font-medium mb-1">Potential Energy</div>
+            <div class="w-full bg-gray-200 h-4 rounded">
+              <div id="pe-bar" class="bg-red-500 h-4 rounded" style="width: 0%"></div>
+            </div>
+          </div>
+          <div>
+            <div class="text-gray-700 font-medium mb-1">Kinetic Energy</div>
+            <div class="w-full bg-gray-200 h-4 rounded">
+              <div id="ke-bar" class="bg-green-500 h-4 rounded" style="width: 0%"></div>
+            </div>
+          </div>
+        </div>
+        {# -------- End Energy Bars -------- #}
+        <!-- Controls: Length Slider + Start/Stop -->
+        <div class="px-6 py-4 flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
+          <div class="flex items-center space-x-2">
+            <label for="length-slider" class="font-medium text-gray-700">Length (m):</label>
+            <input type="range"
+                   id="length-slider"
+                   min="0.5"
+                   max="2.5"
+                   step="0.1"
+                   value="1.0"
+                   class="w-48" />
+            <span id="length-value" class="ml-2 font-semibold text-gray-800">1.0 m</span>
+          </div>
+          <button id="start-pendulum"
+                  class="px-5 py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700 transition-opacity duration-300"
+                  disabled>Start</button>
+          <button id="stop-pendulum"
+                  class="px-5 py-2 bg-red-600 text-white font-medium rounded hover:bg-red-700 transition-opacity duration-300"
+                  disabled>Stop</button>
+        </div>
+        <!-- Post-Lab Quiz (hidden for now) -->
+        <div id="postlab-quiz" class="hidden px-6 py-4 border-t border-gray-200">
+          <h3 class="text-xl font-semibold text-gray-800 mb-2">Post-Lab Quiz</h3>
+          <ol class="list-decimal list-inside text-gray-700 space-y-2">
+            <li>If you double the length of the pendulum, does the period increase, decrease, or stay the same? Explain why.</li>
+            <li>Calculate the theoretical period for a length of 1.0 m and compare it to what you observed.</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+  {# Include the updated JS with audio references removed #}
+  <script src="{% static 'virtual_lab/js/physics_pendulum.js' %}"></script>
+{% endblock %}
diff --git a/web/virtual_lab/templates/virtual_lab/physics/projectile.html b/web/virtual_lab/templates/virtual_lab/physics/projectile.html
new file mode 100644
index 000000000..58132a77c
--- /dev/null
+++ b/web/virtual_lab/templates/virtual_lab/physics/projectile.html
@@ -0,0 +1,156 @@
+{# web/virtual_lab/templates/virtual_lab/physics/projectile.html #}
+{% extends "virtual_lab/layout.html" %}
+
+{% load static %}
+
+{% block virtual_lab_content %}
+  <div class="relative">
+    {# ---------------- Pre-Lab Tutorial Overlay ---------------- #}
+    <div id="tutorial-overlay"
+         class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg p-6 w-11/12 sm:w-3/4 md:w-1/2 lg:w-2/5">
+        <h3 class="text-2xl font-bold text-gray-800 mb-2">
+          Step <span id="step-number">1</span> of 5
+        </h3>
+        <ul id="step-list" class="space-y-2 mt-4 text-gray-700">
+          {# JS will inject bullet points here with fade-in #}
+        </ul>
+        <div class="mt-6 flex justify-end space-x-2">
+          <button id="tutorial-prev"
+                  class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400 disabled:opacity-50 transition-opacity duration-300"
+                  disabled>Previous</button>
+          <button id="tutorial-next"
+                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-opacity duration-300">
+            Next
+          </button>
+          <button id="tutorial-skip"
+                  class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-opacity duration-300">
+            Skip Tutorial
+          </button>
+        </div>
+      </div>
+    </div>
+    {# -------------- End Tutorial Overlay -------------- #}
+    <div class="max-w-5xl mx-auto px-6 py-8 space-y-8">
+      <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <!-- Header / Pre-lab Info -->
+        <div class="px-6 py-4 border-b border-gray-200">
+          <h2 class="text-2xl font-bold text-gray-800 mb-2">Projectile Motion</h2>
+          <p class="text-gray-600">
+            Click‐and‐drag from the <strong>launch pad</strong> (white circle) at left to set speed and angle.
+            <br />
+            Release to fire. Adjust gravity or wind on the fly.
+            Watch the path and vectors, and see “y vs x” plotted live.
+          </p>
+        </div>
+        {# -------- Main Simulation Area: Canvas + Plot -------- #}
+        <div class="px-6 py-4 flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6">
+          {# ---------------- Projectile Canvas ---------------- #}
+          <div class="flex-1 relative">
+            <!-- 600×400 px simulation canvas -->
+            <canvas id="projectile-canvas"
+                    width="600"
+                    height="400"
+                    role="img"
+                    aria-label="Projectile motion simulation canvas showing launch pad and trajectory"
+                    class="border border-gray-300 rounded bg-gradient-to-b from-blue-100 to-white"></canvas>
+            {# Launch Pad Icon (white circle)—drawn via JS, but reserve a tooltip #}
+            <div class="absolute bottom-4 left-4 text-xs text-gray-700">
+              <span class="inline-block w-4 h-4 bg-white border-2 border-gray-400 rounded-full"></span>
+              <span class="ml-1">Launch Pad</span>
+            </div>
+            {# Numeric Readouts (top-left) #}
+            <div id="info-panel"
+                 class="absolute top-4 left-4 bg-white bg-opacity-75 p-2 rounded shadow text-xs text-gray-800 space-y-1">
+              <div>
+                t = <span id="time-readout">0.00</span> s
+              </div>
+              <div>
+                x = <span id="x-readout">0.00</span> m
+              </div>
+              <div>
+                y = <span id="y-readout">0.00</span> m
+              </div>
+              <div>
+                vₓ = <span id="vx-readout">0.00</span> m/s
+              </div>
+              <div>
+                v_y = <span id="vy-readout">0.00</span> m/s
+              </div>
+            </div>
+            {# Target Indicator (blue vertical marker), drawn by JS #}
+          </div>
+          {# ---------------- Live Plot: y vs x ---------------- #}
+          <div class="flex-1">
+            <h3 class="text-lg font-semibold text-gray-800 mb-2">Trajectory: y vs x</h3>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+            <canvas id="trajectory-chart"
+                    width="250"
+                    height="200"
+                    class="border border-gray-300 rounded"></canvas>
+          </div>
+        </div>
+        {# -------- End Simulation + Plot -------- #}
+        {# -------- Mid-Flight “What-If” Controls -------- #}
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 space-y-4">
+          <div class="text-gray-700 font-medium mb-1">Mid-Flight Controls:</div>
+          <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
+            <div class="flex flex-col">
+              <label for="gravity-slider" class="text-gray-700 mb-1">
+                Gravity (m/s²): <span id="gravity-value">9.81</span>
+              </label>
+              <input type="range"
+                     id="gravity-slider"
+                     min="0"
+                     max="20"
+                     step="0.01"
+                     value="9.81"
+                     class="w-48" />
+            </div>
+            <div class="flex flex-col">
+              <label for="wind-slider" class="text-gray-700 mb-1">
+                Wind Accel (m/s²): <span id="wind-value">0.00</span>
+              </label>
+              <input type="range"
+                     id="wind-slider"
+                     min="-10"
+                     max="10"
+                     step="0.01"
+                     value="0"
+                     class="w-48" />
+            </div>
+            <div class="flex items-center space-x-2">
+              <button id="reset-button"
+                      class="px-5 py-2 bg-yellow-500 text-white font-medium rounded hover:bg-yellow-600 transition-opacity duration-300">
+                Reset
+              </button>
+              <div id="hit-status" class="text-gray-800 font-semibold"></div>
+            </div>
+          </div>
+        </div>
+        {# -------- End Mid-Flight Controls -------- #}
+        {# -------- Post-Lab Quiz / Target Info (hidden initially) -------- #}
+        <div id="postlab-quiz"
+             class="hidden px-6 py-4 border-t border-gray-200 space-y-2">
+          <h3 class="text-xl font-semibold text-gray-800 mb-2">Results & Quiz</h3>
+          <div id="target-info" class="text-gray-700">
+            Target was at x = <span id="target-x">--</span> m.
+            You landed at x = <span id="land-x">--</span> m.
+            <span id="hit-text" class="font-bold"></span>
+          </div>
+          <ol class="list-decimal list-inside text-gray-700 space-y-2">
+            <li>
+              Explain why changing the <strong>gravity</strong> slider mid-flight altered your arc the way it did.
+            </li>
+            <li>
+              If you increase the <strong>wind</strong> slider to +5 m/s², what happens to your range? Why?
+            </li>
+          </ol>
+        </div>
+        {# -------- End Quiz -------- #}
+      </div>
+    </div>
+  </div>
+  {# Include the JavaScript for all new features #}
+  <script src="{% static 'virtual_lab/js/physics_projectile.js' %}"></script>
+{% endblock %}
diff --git a/web/virtual_lab/tests.py b/web/virtual_lab/tests.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/virtual_lab/urls.py b/web/virtual_lab/urls.py
new file mode 100644
index 000000000..06e3ccaa1
--- /dev/null
+++ b/web/virtual_lab/urls.py
@@ -0,0 +1,21 @@
+from django.urls import path
+
+from .views import (
+    physics_electrical_circuit_view,
+    physics_inclined_view,
+    physics_mass_spring_view,
+    physics_pendulum_view,
+    physics_projectile_view,
+    virtual_lab_home,
+)
+
+app_name = "virtual_lab"
+
+urlpatterns = [
+    path("", virtual_lab_home, name="virtual_lab_home"),
+    path("physics/pendulum/", physics_pendulum_view, name="physics_pendulum"),
+    path("physics/projectile/", physics_projectile_view, name="physics_projectile"),
+    path("physics/inclined/", physics_inclined_view, name="physics_inclined"),
+    path("physics/mass_spring/", physics_mass_spring_view, name="physics_mass_spring"),
+    path("physics/circuit/", physics_electrical_circuit_view, name="physics_electrical_circuit"),
+]
diff --git a/web/virtual_lab/views.py b/web/virtual_lab/views.py
new file mode 100644
index 000000000..5acc8310a
--- /dev/null
+++ b/web/virtual_lab/views.py
@@ -0,0 +1,45 @@
+# web/virtual_lab/views.py
+
+from django.shortcuts import render
+
+
+def virtual_lab_home(request):
+    """
+    Renders the Virtual Lab home page (home.html).
+    """
+    return render(request, "virtual_lab/home.html")
+
+
+def physics_pendulum_view(request):
+    """
+    Renders the Pendulum Motion simulation page (physics/pendulum.html).
+    """
+    return render(request, "virtual_lab/physics/pendulum.html")
+
+
+def physics_projectile_view(request):
+    """
+    Renders the Projectile Motion simulation page (physics/projectile.html).
+    """
+    return render(request, "virtual_lab/physics/projectile.html")
+
+
+def physics_inclined_view(request):
+    """
+    Renders the Inclined Plane simulation page (physics/inclined.html).
+    """
+    return render(request, "virtual_lab/physics/inclined.html")
+
+
+def physics_mass_spring_view(request):
+    """
+    Renders the Mass-Spring Oscillation simulation page (physics/mass_spring.html).
+    """
+    return render(request, "virtual_lab/physics/mass_spring.html")
+
+
+def physics_electrical_circuit_view(request):
+    """
+    Renders the Electrical Circuit simulation page (physics/circuit.html).
+    """
+    return render(request, "virtual_lab/physics/circuit.html")