diff --git a/src/renderer/style.less b/src/renderer/style.less
index c34e901f..41645589 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -103,6 +103,16 @@ body[platform='linux'] {
   display: none !important;
 }
 
+input[type="text"], input[type="number"] {
+  background: #1c1c1c;
+  border-radius: 3px;
+  border: 1px solid rgb(200 200 200 / 25%);
+  color: #eee;
+  padding: 6px;
+  font-size: 1em;
+  font-family: inherit;
+}
+
 
 .bg-artwork--placeholder {
   position: absolute;
@@ -1652,12 +1662,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .spatialproperties-panel {
   .modal-window {
-    height: 600px;
-    max-height: 600px;
+    height: 700px;
+    max-height: 700px;
     width: 800px;
     max-width: 800px;
     overflow: hidden;
 
+    .info-header {
+      padding-left: 12px;
+    }
+
     .visual-container {
       display: flex;
       justify-content: center;
@@ -1680,7 +1694,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         height: calc(12px * 6);
         border-radius: 6px;
         transform: rotateX(60deg) rotateZ(-45deg);
-        transition: transform 0.2s var(--appleEase);
+        transition: transform 0.2s linear;
       }
 
       .face:nth-of-type(1) {
diff --git a/src/renderer/views/components/spatial-properties.ejs b/src/renderer/views/components/spatial-properties.ejs
index 55531ab7..1b7f5813 100644
--- a/src/renderer/views/components/spatial-properties.ejs
+++ b/src/renderer/views/components/spatial-properties.ejs
@@ -6,26 +6,56 @@
                 <button class="close-btn" @click="close()"></button>
             </div>
             <div class="modal-content">
+                <div class="row">
+                    <div class="col"><h3>Room Dimensions</h3></div>
+                </div>
                 <div class="row">
                     <div class="col">
-                        <label>
-                            Width
-                            <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
-                                   v-model="room_dimensions.width" step="1"/>
-                        </label>
-                        <label>
-                            Height
-                            <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
-                                   v-model="room_dimensions.height" step="1"/>
-                        </label>
-                        <label>
-                            Depth
-                            <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
-                                   v-model="room_dimensions.depth" step="1"/>
-                        </label>
+
+                        <div class="row">
+                            <div class="col-3 flex-center">
+                                Width
+                            </div>
+                            <div class="col flex-center">
+                                <input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
+                                       v-model="room_dimensions.width" step="1"/>
+                            </div>
+                            <div class="col-3 flex-center">
+                                <input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
+                                       v-model="room_dimensions.width" step="1"/>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-3 flex-center">
+                                Height
+                            </div>
+                            <div class="col flex-center">
+                                <input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
+                                       v-model="room_dimensions.height" step="1"/>
+                            </div>
+                            <div class="col-3 flex-center">
+                                <input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
+                                       v-model="room_dimensions.height" step="1"/>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-3 flex-center">
+                                Depth
+                            </div>
+                            <div class="col flex-center">
+                                <input type="range" class="md-slider" min="0" max="100" @input="setRoom()" style="width: 100%;"
+                                       v-model="room_dimensions.depth" step="1"/>
+                            </div>
+                            <div class="col-3 flex-center">
+                                <input type="number" min="0" @input="setRoom()" style="width: 100%;text-align: center"
+                                       v-model="room_dimensions.depth" step="1"/>
+                            </div>
+                        </div>
                         <label v-if="!app.cfg.audio.normalization">
                             Gain
-                            <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
+                            <input type="number" min="0" @input="setRoom()" style="width: 100%;"
                                    v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
                         </label>
                     </div>
@@ -36,9 +66,12 @@
                         </div>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="col"><h3>Room Materials</h3></div>
+                </div>
                 <div class="row">
                     <div class="col"></div>
-                    <div class="col">
+                    <div class="col flex-center">
                         <label>
                             Up
                             <select class="md-select" @input="setRoom()"
@@ -50,7 +83,7 @@
                     <div class="col"></div>
                 </div>
                 <div class="row">
-                    <div class="col">
+                    <div class="col flex-center">
                         <label>
                             Left
                             <select class="md-select" @input="setRoom()"
@@ -59,7 +92,7 @@
                             </select>
                         </label>
                     </div>
-                    <div class="col">
+                    <div class="col flex-center">
                         <label>
                             Front
                             <select class="md-select" @input="setRoom()"
@@ -75,7 +108,7 @@
                             </select>
                         </label>
                     </div>
-                    <div class="col">
+                    <div class="col flex-center">
                         <label>
                             Right
                             <select class="md-select" @input="setRoom()"
@@ -87,7 +120,7 @@
                 </div>
                 <div class="row">
                     <div class="col"></div>
-                    <div class="col">
+                    <div class="col flex-center">
                         <label>
                             Down
                             <select class="md-select" @input="setRoom()"