diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index cd8166724..c1282893f 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -21,7 +21,8 @@ const { show_dialog, width } = defineProps({
     variant="panel"
     padding="pa-0"
     class="position-absolute elevation-24"
-    style="z-index: 2; top: 90px; right: 55px"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <v-card-text class="pa-0">
       <Saver />
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index e512c4636..39882f1a6 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -172,7 +172,8 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
-    style="z-index: 2; top: 90px; right: 55px"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <div
       class="pa-0 overflow-hidden position-relative"
diff --git a/app/components/FeedBack/ErrorBanner.vue b/app/components/FeedBack/ErrorBanner.vue
index 8b04b4844..e254fb78d 100644
--- a/app/components/FeedBack/ErrorBanner.vue
+++ b/app/components/FeedBack/ErrorBanner.vue
@@ -12,7 +12,7 @@ function reload() {
   <v-banner
     v-if="feedbackStore.server_error"
     elevation="2"
-    style="background-color: grey; z-index: 9999"
+    style="background-color: grey; z-index: 4"
     position="fixed"
   >
     <v-row>
diff --git a/app/components/FeedBack/Snackers.vue b/app/components/FeedBack/Snackers.vue
index 6ae99d34d..0b309728a 100644
--- a/app/components/FeedBack/Snackers.vue
+++ b/app/components/FeedBack/Snackers.vue
@@ -24,6 +24,7 @@ function calc_margin(index) {
     max-width="200px"
     height="20px"
     timeout="10000"
+    z-index="4"
   >
     <v-row dense class="flex-nowrap">
       <v-col cols="auto">
diff --git a/app/components/HybridViewerTooltip.vue b/app/components/HybridViewerTooltip.vue
index b0eb74714..3a5196c6a 100644
--- a/app/components/HybridViewerTooltip.vue
+++ b/app/components/HybridViewerTooltip.vue
@@ -181,7 +181,7 @@ function formatAttributeValue(val) {
 .floating-tooltip {
   position: absolute;
   pointer-events: none;
-  z-index: 10000;
+  z-index: 4;
   min-width: 200px;
   max-width: 450px;
   transition: opacity 0.15s ease;
diff --git a/app/components/Launcher.vue b/app/components/Launcher.vue
index 18dfff138..aac2d9c13 100644
--- a/app/components/Launcher.vue
+++ b/app/components/Launcher.vue
@@ -31,7 +31,7 @@ if (infraStore.app_mode !== appMode.CLOUD) {
         class="align"
         cols="12"
         align-self="center"
-        style="z-index: 1000"
+        z-index="4"
       >
         <Recaptcha :button_color="'secondary'" />
       </v-col>
diff --git a/app/components/Loading.vue b/app/components/Loading.vue
index 349d90ef0..1a59ce7fb 100644
--- a/app/components/Loading.vue
+++ b/app/components/Loading.vue
@@ -61,8 +61,8 @@ onUnmounted(() => {
           height: 100vh;
           background: rgba(0, 0, 0, 0.45);
           backdrop-filter: blur(10px);
-          z-index: 2400;
           pointer-events: auto;
+          z-index: 3;
         "
       >
         <div
@@ -73,7 +73,7 @@ onUnmounted(() => {
             background-size: 40px 40px;
             background-position: center;
             pointer-events: none;
-            z-index: -1;
+            z-index: 0;
           "
         />
 
diff --git a/app/components/RemoteRenderingView.vue b/app/components/RemoteRenderingView.vue
index 5e9a0c1ad..4c8879250 100644
--- a/app/components/RemoteRenderingView.vue
+++ b/app/components/RemoteRenderingView.vue
@@ -105,7 +105,8 @@ onMounted(async () => {
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
+        style="overflow: hidden; position: relative; height: 100%; width: 100%"
+        z-index="0"
         class="pa-0"
         @click="get_x_y"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
@@ -117,7 +118,7 @@ onMounted(async () => {
 <style scoped>
 .list {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   top: 0;
   background-color: transparent;
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index 30afe4198..902a5dabc 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -62,7 +62,7 @@ function close() {
 
 <style scoped>
 .tool-panel {
-  z-index: 2;
+  z-index: 1;
   top: 90px;
   right: 55px;
 }
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index f31ee6a98..57d08dea2 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -215,7 +215,7 @@ const camera_options = computed(() => [
 <style module>
 .floatToolbar {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   right: 20px;
   top: 20px;
   background-color: rgba(0, 0, 0, 0);
diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 6e355de9a..546a11a86 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -74,7 +74,8 @@ function onCenterClick(event) {
     icon
     variant="outlined"
     class="central-selector-btn elevation-6"
-    style="width: 52px; height: 52px; z-index: 5"
+    style="width: 52px; height: 52px"
+    z-index="1"
     :style="computedItemStyles"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 532c0d08c..926dafd53 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -242,7 +242,7 @@ function toggleOptions() {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 1001;
+  z-index: 4;
 }
 
 .options-right {
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index cf2b934ce..46b4df565 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -178,7 +178,7 @@ const formattedId = computed(() => {
   bottom: 110px; /* Positions it beautifully above the circular menu */
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100;
+  z-index: 3;
   pointer-events: auto;
 }
 </style>
diff --git a/app/components/Viewer/ObjectTree/Base/StickyHeader.vue b/app/components/Viewer/ObjectTree/Base/StickyHeader.vue
index dc2541091..ba80096af 100644
--- a/app/components/Viewer/ObjectTree/Base/StickyHeader.vue
+++ b/app/components/Viewer/ObjectTree/Base/StickyHeader.vue
@@ -37,7 +37,7 @@ const emit = defineEmits(["toggle-open", "toggle-select"]);
   border-bottom: 2px solid rgba(0, 0, 0, 0.05);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   cursor: pointer;
-  z-index: 20;
+  z-index: 2;
 }
 
 .sticky-tree-header:hover {
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 6d2e008a4..a4a592e8b 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -304,7 +304,7 @@ function onVerticalResizeStart(event, index) {
 <style scoped>
 .treeview-layout {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   top: 0;
   height: calc(100vh - 100px);
@@ -414,7 +414,7 @@ function onVerticalResizeStart(event, index) {
   position: relative;
   cursor: ns-resize;
   background-color: transparent;
-  z-index: 5;
+  z-index: 1;
 }
 
 .v-split-resizer::after {
@@ -442,7 +442,7 @@ function onVerticalResizeStart(event, index) {
   width: 8px;
   height: 100%;
   cursor: ew-resize;
-  z-index: 10;
+  z-index: 2;
 }
 
 .total-resizer:hover {
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index c5769ef73..d4e4daedb 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -135,7 +135,7 @@ defineExpose({ get_viewer_id });
   top: 20px;
   left: 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: 3;
 }
 
 @keyframes pulse-ring {