diff --git a/src/webflow/canvas.js b/src/webflow/canvas.js
deleted file mode 100644
index 2129c1e..0000000
--- a/src/webflow/canvas.js
+++ /dev/null
@@ -1,42 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-  const canvas = document.querySelector("#canvas");
-
-  // Adjust the canvas size
-  function resizeCanvas() {}
-
-  // Call resizeCanvas to set initial size and add event listener for any resize
-  resizeCanvas();
-
-  // Flag to track the painting state
-
-  // Function called when the mouse button is pressed
-  // Sets the painting flag to true and starts the drawing process
-  function startPosition(e) {
-    // Call the draw function immediately to allow dot-like drawings
-  }
-
-  // Function called when the mouse button is released
-  // Resets the painting state and prepares the context for a new path
-  function endPosition() {
-    // Starts a new path by resetting the current path. This prevents lines from connecting to the next starting point.
-  }
-
-  // The main drawing function that reacts to mouse movements
-  function draw(e) {
-    // If we are not in painting mode, don't draw
-    // Get the bounding rectangle of the canvas to consider any CSS styling
-    // Calculate mouse position relative to the canvas.
-    // This accounts for any element offset, ensuring the drawing position matches the mouse position.
-    // Set the properties of the drawing line
-    // Create a line to the new position from the last position
-    // Render the line on the canvas
-    // Begin a new path with a move to the current position
-    // This prevents lines from being connected to the subsequent moveTo position
-    // Moves the path to the new position without creating a line
-  }
-
-  // Event Listeners
-  canvas.addEventListener("mousedown", startPosition);
-  canvas.addEventListener("mouseup", endPosition);
-  canvas.addEventListener("mousemove", draw);
-});
diff --git a/src/webflow/interest.js b/src/webflow/interest.js
new file mode 100644
index 0000000..c517f11
--- /dev/null
+++ b/src/webflow/interest.js
@@ -0,0 +1,69 @@
+const form = document.querySelector("#interest-form");
+
+form.addEventListener("submit", function (e) {
+  // Prevent default Webflow form submit
+  e.preventDefault();
+  e.stopPropagation();
+  // Calculate Interest and generate chart
+  calculateInterest();
+});
+
+function calculateInterest() {
+  // Create FormData object from the form
+  const formData = new FormData(form);
+
+  // Use FormData API to get form values
+  const principal = Number(formData.get("principal"));
+  const rate = Number(formData.get("rate"));
+  const frequency = Number(formData.get("frequency"));
+  const years = Number(formData.get("years"));
+
+  // Calculating compound interest
+  const amount =
+    principal * Math.pow(1 + rate / 100 / frequency, frequency * years);
+
+  // Preparing data for the chart
+  const labels = Array.from({ length: parseInt(years) }, (_, i) => i + 1);
+  const data = [];
+  for (let year = 1; year <= years; year++) {
+    const yearAmount =
+      principal * Math.pow(1 + rate / 100 / frequency, frequency * year);
+    data.push(yearAmount);
+  }
+
+  // Chart.js to render the chart
+  const ctx = document.querySelector("#chart").getContext("2d");
+  if (window.interestChart instanceof Chart) {
+    window.interestChart.destroy(); // Destroy existing chart instance if exists
+  }
+  window.interestChart = new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: "Investment Over Time",
+          data: data,
+          borderColor: "#5e75d2",
+        },
+      ],
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: "Amount ($)",
+          },
+        },
+        x: {
+          title: {
+            display: true,
+            text: "Year",
+          },
+        },
+      },
+    },
+  });
+}
diff --git a/src/webflow/video.js b/src/webflow/video.js
deleted file mode 100644
index 0ca4962..0000000
--- a/src/webflow/video.js
+++ /dev/null
@@ -1,55 +0,0 @@
-const video = document.querySelector("#video video");
-const play = document.querySelector("#play");
-const stop = document.querySelector("#stop");
-const progress = document.querySelector("#progress");
-const timestamp = document.querySelector("#timestamp");
-
-/**
- * Play or pause video
- * @returns {void}
- * If video is paused, play it. If video is playing, pause it.
- */
-function playPause() {}
-
-/**
- * Stop video
- * @returns {void}
- * Set video time to 0 and pause video
- */
-function stopVideo() {}
-
-/**
- * Update play button icon
- * @returns {void}
- * If video is paused, show play icon. If video is playing, show pause icon.
- */
-function updatePlayButtonText() {}
-
-/**
- * Update the progress bar
- * @returns {void}
- * Update the progress bar value to the current video time
- */
-function updateProgress() {
-  // Update progress bar using video time divided by duration times 100
-  // Get minutes
-  // Get seconds
-  // Update timestamp
-}
-
-/**
- * Sets the progress bar
- * @returns {void}
- * Set the video time to the progress bar value
- *
- */
-function setProgress() {}
-
-video.addEventListener("click", playPause);
-video.addEventListener("play", updatePlayButtonText);
-video.addEventListener("pause", updatePlayButtonText);
-video.addEventListener("timeupdate", updateProgress);
-
-play.addEventListener("click", playPause);
-stop.addEventListener("click", stopVideo);
-progress.addEventListener("click", setProgress);