diff --git a/app/animator.html b/app/animator.html
index 07371b47..3e05e0aa 100644
--- a/app/animator.html
+++ b/app/animator.html
@@ -136,7 +136,7 @@ <h2><i class="fa fa-heartbeat fa-fw"></i> Debugging</h2>
                 <div id="btn-stop" class="mediaControls" title="Stop Playback"><i class="fa fa-stop"></i></div>
                 <div id="btn-play-pause" class="mediaControls" title="Playback Frames"><i class="fa fa-play"></i></div>
             </div>
-            <div id="deleteLastFrame"><i class="fa fa-trash"></i> Delete last frame</div>
+            <div id="deleteLastFrame" title="Delete last frame captured"><i class="fa fa-trash"></i> Delete last frame</div>
         </div>
         <div id="capture-control">
             <div id="captureFrame" class="fa-stack fa-lg" title="Capture Frame">
@@ -152,8 +152,6 @@ <h2><i class="fa fa-heartbeat fa-fw"></i> Debugging</h2>
                 <table class="hidden">
                     <tr id="reel-captured-imgs">
                       <!--This is where the frame is added through JS -->
-                    </tr>
-                    <tr>
                         <td>
                            <div id="btn-live-view" title="Live Preview">
                               <i class="fa fa-video-camera"></i>
diff --git a/app/css/animator.css b/app/css/animator.css
index b4b66443..5adf8524 100644
--- a/app/css/animator.css
+++ b/app/css/animator.css
@@ -121,9 +121,8 @@ a {
 #video, #canvas { display: none; }
 
 #captureWindow, #playbackWindow {
+  height: calc(100vh - 56px - 132px - 37px);
   text-align: center;
-  padding-top: 0.5em;
-  padding-bottom: 0.3em;
   background-color: black;
 }
 
@@ -134,8 +133,7 @@ a {
   max-width: 100%;
   padding: 0;
   margin: 0;
-  min-height: 20em;
-  max-height: 30em;
+  height: 100%;
 }
 
 .windowTitleContainer {
@@ -143,11 +141,16 @@ a {
   display: inline-block;
 }
 
+#playback {
+    height: calc((100vh - 56px - 132px - 37px));
+    width: calc((100vh - 56px - 132px - 37px) / 4));
+}   
+
 /*========== ONION SKINNING ==============*/
 
 #onionSkinningLayer{
-  width: 100%;
   height: 0;
+  width: 100%;
   overflow: visible;
   padding: 0;
   margin: 0;
@@ -161,9 +164,8 @@ a {
   border: 0;
   opacity: 0.5;
   display: none;
-  max-height: 30em;
-  min-height: 20em;
-  max-width: 100%;
+  width: calc((100vh - 56px - 132px - 37px) / 4));
+  height: calc((100vh - 56px - 132px - 37px));
 }
 #onion-skinning-frame.visible { display: inline; }
 
@@ -255,14 +257,13 @@ a {
 .btn-frame-delete:hover { opacity: 0.8; }
 
 #btn-live-view {
-  margin-top: -0.15em;
+  
   width: 5rem;
-  height: 3.75rem;
+  height: calc(75px + 0em);
   background-color: #171717;
   text-align: center;
   font-size: 2.5em;
   cursor: pointer;
-  float: right;
 }
 
 #btn-live-view i { padding-top: 0.3em; }
diff --git a/app/js/main.js b/app/js/main.js
index 123eca31..39fb9faf 100644
--- a/app/js/main.js
+++ b/app/js/main.js
@@ -162,6 +162,10 @@ function startup() {
             console.log("height: " + height);
             console.log("width: " + width);
             console.log("Aspect ratio: " + aspectRatio);
+            
+            if (aspectRatio === 1.33) {
+                captureWindow.classList.add("4by3");            
+            }
 
             notifySuccess("Camera successfully connected.");
         }
@@ -288,8 +292,8 @@ function updateFrameReel(action, id) {
 
     // Add the newly captured frame
     if (action === "capture") {
-        frameReelRow.insertAdjacentHTML("beforeend", `<td><div class="frame-reel-preview">
-<img class="frame-reel-img" id="img-${id}" title="Expand image" width="80" height="60" src="${capturedFramesRaw[id - 1]}">
+        frameReelRow.insertAdjacentHTML("afterbegin", `<td><div class="frame-reel-preview">
+<img class="frame-reel-img" id="img-${id}" title="Expand image" width="100" height="75" src="${capturedFramesRaw[id - 1]}">
 <i class="btn-frame-delete fa fa-trash" title="Delete Frame"></i>
 </div></td>`);
 
@@ -479,8 +483,8 @@ function stopitwhenlooping() {
     isPlaying = false;
     //stop increasing playback frame number
     clearInterval(yoplayit);
-    document.getElementById('playback').setAttribute("src", capturedFramesRaw[curFrame - 1]);
-    document.querySelector('#currentFrame span').innerHTML = curFrame;
+    playback.setAttribute("src", capturedFramesRaw[curFrame - 1]);
+    statusBarCurFrame.innerHTML = curFrame;
     btnPlayPause.children[0].classList.remove("fa-pause");
     btnPlayPause.children[0].classList.add("fa-play");