diff --git a/frontend/src/controller/canvasController.js b/frontend/src/controller/canvasController.js
index b1af71c..603df0a 100644
--- a/frontend/src/controller/canvasController.js
+++ b/frontend/src/controller/canvasController.js
@@ -5,10 +5,12 @@ import bubble3 from "../assets/images/bubble3.png";
 import bubble4 from "../assets/images/bubble4.png";
 import io from "socket.io-client";
 import bubblePop from "../assets/audio/bubblePop.mp3";
+import { $ } from "../utils/querySelector";
+
 export default class CanvasController {
   constructor() {
     this.socket = io(process.env.SOCKET_IP, { path: "/api/*" });
-    this.canvas = document.getElementById("canvas");
+    this.canvas = $("#canvas");
     this.canvas.width = window.innerWidth;
     this.canvas.height = window.innerHeight;
     this.ctx = this.canvas.getContext("2d");
diff --git a/frontend/src/controller/inputController.js b/frontend/src/controller/inputController.js
index 6f36414..19455a3 100644
--- a/frontend/src/controller/inputController.js
+++ b/frontend/src/controller/inputController.js
@@ -1,9 +1,10 @@
 import io from "socket.io-client";
+import { $ } from "../utils/querySelector";
 
 export default class InputController {
   constructor() {
-    this.input = document.getElementById("message_input");
-    this.button = document.getElementById("message_submit_button");
+    this.input = $("#message_input");
+    this.button = $("#message_submit_button");
     this.socket = io(process.env.SOCKET_IP, { path: "/api/*" });
   }