diff --git a/blog/content/_index.md b/blog/content/_index.md
index aacc80e..99c27d2 100644
--- a/blog/content/_index.md
+++ b/blog/content/_index.md
@@ -17,5 +17,5 @@ class Main {
 }
 ```
 
-<canvas id="canvas"/>
+<canvas id="rendering_canvas"/>
 
diff --git a/blog/static/main.js b/blog/static/main.js
index cb26ea1..bbe4944 100644
--- a/blog/static/main.js
+++ b/blog/static/main.js
@@ -11,14 +11,19 @@ let previousFrame = performance.now();
 
 // Rendering.
 const renderer = new THREE.WebGLRenderer({
-    canvas: document.querySelector('#canvas'),
+    canvas: document.querySelector('#rendering_canvas'),
 });
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setAnimationLoop(animate);
 document.body.appendChild(renderer.domElement);
 
-// Resizing the camera position based on window width. 
+// Change location of canvas. 
+let footer = document.querySelector('#footer');
+let canvas = document.querySelector('#rendering_canvas');
+footer.before(canvas);
+
+// Resizing the camera position based on window width. (change this to be automatic I guess) 
 if (window.innerWidth <= 400) {
     camera.position.z = 6.5;
 }
@@ -31,6 +36,7 @@ else if (window.innerWidth > 650 && window.innerWidth <= 915) {
     camera.position.z = 3.5;
 }
 
+
 // Lighting. 
 const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
 scene.add(light);
diff --git a/blog/templates/base.html b/blog/templates/base.html
index 1dcbb2b..e11cd9f 100644
--- a/blog/templates/base.html
+++ b/blog/templates/base.html
@@ -36,7 +36,7 @@
     </section>
 </body>
 
-<footer>
+<footer id="footer">
     <center>
         <a href="https://evilr.ing/cjsatnarine/previous">&lt;</a>
         <a href="https://evilr.ing">EVILRING</a>