diff --git a/src/App.vue b/src/App.vue
index f08bcb2..76d7a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,10 +54,11 @@ main {
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  gap: 1em
+  gap: 15px;
 }
 
 .vis {
+  padding-left: 55px;
   display: flex;
   place-content: center;
   gap: 1em;
@@ -67,28 +68,29 @@ main {
   display: flex;
   place-content: center;
   align-items: center;
-  gap: 0.5em;
 }
 
 .repr {
   display: flex;
-  width: 100%;
-  flex-direction: row;
-  justify-content: space-evenly;
+  flex-direction: column;
+  gap: 20px;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1280px) {
   main {
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
   }
 
+  .vis {
+    padding-left: 0px;
+  }
+
   .repr {
     width: auto;
     flex-direction: column;
     align-items: center;
-    gap: 3em;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 71fcd9e..a2904c8 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -20,7 +20,7 @@
   --c-text-dark-1: var(--c-light-0);
   --c-text-dark-2: rgba(235, 235, 235, 0.64);
 
-  --quat-bg-alpha: 0.1;
+  --quat-bg-alpha: 0.3;
   --c-bg-quat-x: rgba(255, 0, 0, var(--quat-bg-alpha));
   --c-bg-quat-y: rgba(0, 255, 0, var(--quat-bg-alpha));
   --c-bg-quat-z: rgba(0, 0, 255, var(--quat-bg-alpha));
@@ -29,6 +29,8 @@
   --c-bg-btn: #282828;
   --c-bg-btn-hover: #333;
   --c-bg-btn-active: #555;
+
+  --cont-border-radius: 20px;
 }
 
 /* semantic color variables for this project */
@@ -67,7 +69,6 @@
 }
 
 body {
-  min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition:
diff --git a/src/assets/main.css b/src/assets/main.css
index 6b02f43..2dd9d2a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,9 +2,8 @@
 
 #app {
   max-width: 1280px;
-  min-width: 700px;
+  min-width: 650px;
   margin: 0 auto;
-  /* padding: 2rem; */
   font-weight: normal;
 }
 
@@ -28,10 +27,8 @@ h2 {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
-  /* If you want dots under the hoverable text */
 }
 
-/* Tooltip text */
 .tooltip .tooltiptext {
   line-height: 1.2;
   visibility: hidden;
@@ -41,21 +38,10 @@ h2 {
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
 }
 
-/* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
   visibility: visible;
-}
-
-/* @media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-} */
-
-/* @media (min-width: 1024px) {} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/Vis3D.vue b/src/components/Vis3D.vue
index 8ec1f1d..b52674c 100644
--- a/src/components/Vis3D.vue
+++ b/src/components/Vis3D.vue
@@ -259,6 +259,9 @@ function onKeydown(event: KeyboardEvent) {
     case "ControlLeft":
       focusZ()
       break
+    case "KeyV":
+      renderer.setSize(300, 300)
+      break
   }
 }
 
@@ -354,8 +357,8 @@ onMounted(() => {
     canvas: canvas.value as unknown as HTMLCanvasElement,
     antialias: true,
   })
-  renderer.setClearColor(0x282828)
-  renderer.setSize(W, H)
+  renderer.setClearColor(0x222222)
+  // renderer.setSize(W, H)
   renderer.render(scene, camera)
   controls = new OrbitControls(camera, renderer.domElement)
   controls.enablePan = false
@@ -371,7 +374,7 @@ onMounted(() => {
 
 <template>
   <div class="container">
-    <canvas ref="canvas"></canvas>
+    <canvas width="500" height="500" ref="canvas"></canvas>
     <div class="snap">
       <Snap />
     </div>
@@ -385,8 +388,8 @@ onMounted(() => {
 
 .snap {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 20px;
+  right: 20px;
   display: flex;
   place-content: center;
   align-items: center;
@@ -422,4 +425,19 @@ span {
 .z {
   color: blue
 }
+
+canvas {
+  width: 500px;
+  height: 500px;
+  border-radius: var(--cont-border-radius);
+  /* width: 300px;
+  height: 300px; */
+}
+
+/* @media screen and (min-aspect-ratio: 1/1) {
+  canvas {
+    width: 500px;
+    height: 500px;
+  }
+} */
 </style>
diff --git a/src/components/VisMat.vue b/src/components/VisMat.vue
index 83fe5ab..088b5f5 100644
--- a/src/components/VisMat.vue
+++ b/src/components/VisMat.vue
@@ -11,7 +11,7 @@ import * as Constants from '@/const';
 
 const COPY_TEXT = "Copied matrix to clipboard"
 const PARSE_ERROR_TEXT = "Matrix parsing error"
-const ORTHO_ERROR_TEXT = "Matrix must be orthnormal"
+const ORTHO_ERROR_TEXT = "Matrix must be orthonormal"
 
 const isEdit: ShallowRef<Boolean> = inject("isEdit")!
 const toastMsg: ShallowRef<String> = inject("toastMsg")!
@@ -169,7 +169,14 @@ watch(rotMat, (newRotMat) => {
 </template>
 
 <style scoped>
+h2 {
+    color: white;
+}
+
 .rot {
+    background-color: var(--c-dark-2);
+    border-radius: var(--cont-border-radius);
+    padding: 10px;
     display: flex;
     flex-direction: column;
     place-content: center;
@@ -178,7 +185,8 @@ watch(rotMat, (newRotMat) => {
 
 .content {
     display: flex;
-    align-items: center;
+    /* align-items: center; */
+    /* justify-content: space-between; */
     gap: 1em;
 }
 
@@ -194,12 +202,15 @@ textarea {
     color: white;
     width: 300px;
     height: 100px;
+    padding: 10px;
+    margin: 10px;
 }
 
 .action-buttons {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 1em;
+    /* gap: 5px; */
 }
 
 .invisible {
@@ -219,6 +230,7 @@ td {
     /* border: 1px solid #858585; */
     padding: 8px;
     text-align: center;
+    font-size: 20pt;
 }
 
 .error {
diff --git a/src/components/VisQuat.vue b/src/components/VisQuat.vue
index 7194b37..033a26f 100644
--- a/src/components/VisQuat.vue
+++ b/src/components/VisQuat.vue
@@ -156,7 +156,14 @@ watch(quat, (newQuat) => {
 </template>
 
 <style scoped>
+h2 {
+    color: white;
+}
+
 .quat {
+    background-color: var(--c-dark-2);
+    border-radius: var(--cont-border-radius);
+    padding: 10px;
     display: flex;
     flex-direction: column;
     place-content: center;
@@ -176,12 +183,14 @@ watch(quat, (newQuat) => {
 
 .axis-value {
     padding: 10px;
+    font-size: 20pt;
 }
 
 .axis-label {
-    border-radius: 0 0 30px 30px;
+    border-radius: 0 0 50px 50px;
     text-align: center;
-    padding: 5px;
+    padding: 10px;
+    font-size: 14pt;
 }
 
 .x .axis-label {
@@ -205,10 +214,6 @@ watch(quat, (newQuat) => {
     gap: 5px;
 }
 
-table {
-    user-select: none;
-}
-
 textarea {
     resize: none;
     background-color: #282828;
@@ -216,13 +221,15 @@ textarea {
     border-radius: 10px;
     color: white;
     width: 200px;
-    height: 100px;
+    height: 120px;
+    padding: 10px;
+    margin: 10px;
 }
 
 .action-buttons {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 1em;
 }
 
 .invisible {
@@ -233,17 +240,6 @@ textarea {
     color: white;
 }
 
-table {
-    border-collapse: collapse;
-    white-space: pre-wrap;
-}
-
-td {
-    border: 1px solid #858585;
-    padding: 8px;
-    text-align: center;
-}
-
 .error {
     border-color: red;
 }