diff --git a/js/automata.js b/js/automata.js
index 6ef78cf..6c5bddb 100644
--- a/js/automata.js
+++ b/js/automata.js
@@ -137,21 +137,15 @@ export class Automata {
 
   // Draw the cursor only when requried
   drawCursor() {
-    // Draw the cursor/pen outline
+    // Calculate points to draw
     let x = Math.floor(mouseX / cellSize);
     let y = Math.floor(mouseY / cellSize);
+
+    // Clear the grid and draw
     overlayCtx.clearRect(0, 0, canvas.width, canvas.height);
-    if (outlinePoints[0] != [x + fillRadius + 1, y]) {
-      // Draw outline of pen
-      for (const [col, row] of midpointCircle(x, y, fillRadius + 1)) {
-        overlayCtx.fillStyle = this.getPenColor();
-        overlayCtx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
-      }
-    } else {
-      for (const [col, row] of outlinePoints) {
-        overlayCtx.fillStyle = this.getPenColor();
-        overlayCtx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
-      }
+    for (const [col, row] of midpointCircle(x, y, fillRadius + 1)) {
+      overlayCtx.fillStyle = this.getPenColor();
+      overlayCtx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
     }
   }
 
@@ -1434,24 +1428,15 @@ export class Huegene extends Automata {
     }
     this.cycleDraw();
 
-    // Use lifelike automata to randomize
-    let randEngine = new LifeLikeAutomata("B3458/S35678"); // Stain Rule
-    this;
-
-    for (let i = 0; i <= 20; i++) {
-      randEngine.updateGrid(false, false);
-    }
-    randEngine.grid = new Array(this.rows).fill(null).map(
+    // Update the grid
+    this.grid = new Array(this.rows).fill(null).map(
       () =>
         new Array(this.cols)
           .fill(null)
           .map(() =>
-            Math.random() < 0.0001 ? this.penState : packRGB([0, 0, 0])
-          ) // Change probability of 1 to get sparser/denser patterns
+            Math.random() < 0.0003 ? this.penState : packRGB([0, 0, 0])
+          ) // Change probability to get denser patterns
     );
-
-    // Update the grid
-    this.grid = randEngine.grid;
     window.requestAnimationFrame(() => this.drawGrid());
   }
 
diff --git a/js/inputs/userInput.js b/js/inputs/userInput.js
index ec9b0f0..bae411f 100644
--- a/js/inputs/userInput.js
+++ b/js/inputs/userInput.js
@@ -13,18 +13,30 @@ export let mouseX = 0;
 export let mouseY = 0;
 export var outlinePoints = [];
 
+//! MOBILE COMPATIBILITY EVENTS
+const moveEvents = ["mousemove", "touchmove"];
+const downEvents = ["mousedown", "touchstart"];
+const upEvents = ["mouseup", "touchend"];
+const leaveEvents = ["mouseleave", "touchcancel"];
+
+function registerEvents(element, events, callback) {
+  events.forEach((event) => element.addEventListener(event, callback));
+}
+
 //! MOUSE FUNCTIONS
 
 // Update mouse coordinate whenever mouse moves
-export function updateMousePosition(event) {
+function updateMousePosition(event) {
   const rect = ctx.canvas.getBoundingClientRect();
-  mouseX = event.clientX - rect.left;
-  mouseY = event.clientY - rect.top;
-  outlinePoints = midpointCircle(
-    Math.floor(mouseX / cellSize),
-    Math.floor(mouseY / cellSize),
-    fillRadius
-  );
+
+  // Handle touch and mouse event
+  if (event.touches && event.touches.length > 0) {
+    mouseX = event.touches[0].clientX - rect.left;
+    mouseY = event.touches[0].clientY - rect.top;
+  } else {
+    mouseX = event.clientX - rect.left;
+    mouseY = event.clientY - rect.top;
+  }
   automata.drawCursor();
 }
 
@@ -39,15 +51,12 @@ function drawLoop() {
 }
 
 export function registerCanvasCallbacks(ctx) {
-  ctx.canvas.addEventListener("mousemove", updateMousePosition);
-  ctx.canvas.addEventListener("mousedown", () => {
+  registerEvents(ctx.canvas, moveEvents, updateMousePosition);
+  registerEvents(ctx.canvas, downEvents, () => {
     isDrawing = true;
     requestAnimationFrame(drawLoop);
   });
-  ctx.canvas.addEventListener("mouseup", () => {
-    isDrawing = false;
-  });
-  ctx.canvas.addEventListener("mouseleave", () => {
+  registerEvents(ctx.canvas, upEvents.concat(leaveEvents), () => {
     isDrawing = false;
   });
 }
@@ -78,9 +87,12 @@ function triggerDragElement(element) {
 
   // Check for presence of a header
   if (document.getElementById(element.id + "-header")) {
-    document.getElementById(element.id + "-header").onmousedown = dragMouseDown;
+    const header = document.getElementById(element.id + "-header");
+    header.onmousedown = dragMouseDown;
+    header.ontouchstart = dragMouseDown;
   } else {
     element.onmousedown = dragMouseDown;
+    element.ontouchstart = dragMouseDown;
   }
 
   function dragMouseDown(e) {
@@ -90,14 +102,21 @@ function triggerDragElement(element) {
     yPos = e.clientY;
     document.onmouseup = closeDragElement;
     document.onmousemove = elementDrag;
+    document.ontouchend = closeDragElement;
+    document.ontouchmove = elementDrag;
   }
 
   function elementDrag(e) {
     e.preventDefault();
-    changeOfX = xPos - e.clientX;
-    changeOfY = yPos - e.clientY;
-    xPos = e.clientX;
-    yPos = e.clientY < minTop ? yPos : e.clientY; // Clamp mouse y position
+    // Get current position of touch/mouse
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+
+    // Calculate drag distance in x and y directions
+    changeOfX = xPos - clientX;
+    xPos = clientX;
+    changeOfY = yPos > minTop ? yPos - clientY : minTop;
+    yPos = clientY;
 
     // Set new position
     let newTop = element.offsetTop - changeOfY;
@@ -109,6 +128,8 @@ function triggerDragElement(element) {
     // Stop moving when mouse stops
     document.onmouseup = null;
     document.onmousemove = null;
+    document.ontouchend = null;
+    document.ontouchmove = null;
   }
 }