diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 60372a4..ff7ee5e 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -117,13 +117,13 @@
         <div class="spectrum-wrap">
           <div id="spectrum-bookmark-axis"></div>
           <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
+          <canvas id="spectrum-waterfall-canvas"></canvas>
           <canvas id="spectrum-canvas"></canvas>
           <div id="spectrum-zoom-indicator" aria-hidden="true"></div>
           <div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div>
           <div id="spectrum-db-axis" aria-hidden="true"></div>
           <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
           <div id="spectrum-tooltip"></div>
-          <canvas id="spectrum-waterfall-canvas"></canvas>
           <div id="spectrum-freq-axis">
             <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
             <button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">&rsaquo;</button>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 62ad286..dceee43 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -2989,13 +2989,12 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   width: 100%;
   height: var(--spectrum-plot-height);
   background: var(--spectrum-bg);
-  border-radius: 6px 6px 0 0;
   cursor: crosshair;
   touch-action: none;
 }
 #spectrum-db-axis {
   position: absolute;
-  top: 0;
+  top: var(--spectrum-plot-height);
   left: 0;
   width: 3rem;
   height: var(--spectrum-plot-height);
@@ -3111,7 +3110,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 #spectrum-zoom-indicator {
   display: none;
   position: absolute;
-  top: 6px;
+  top: calc(var(--spectrum-plot-height) + 6px);
   right: 3.5rem;
   z-index: 9;
   font-size: 0.68rem;
@@ -3151,6 +3150,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   width: 100%;
   height: var(--spectrum-plot-height);
   background: var(--spectrum-bg);
+  border-radius: 6px 6px 0 0;
   cursor: crosshair;
   touch-action: none;
 }
@@ -3199,7 +3199,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 .spectrum-bookmark-side {
   position: absolute;
-  top: calc(var(--spectrum-plot-height) / 2);
+  top: calc(var(--spectrum-plot-height) * 1.5);
   transform: translateY(-50%);
   z-index: 7;
   width: var(--spectrum-bookmark-side-width);