diff --git a/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html b/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html
index b51880f89c..394ef5c4ec 100644
--- a/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html
+++ b/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html
@@ -1,37 +1,37 @@
-<div class="result-overlay"
+<div class="op-bcf-list-container--result-overlay"
      *ngIf="(showResultOverlay$ | async) && showTableView"></div>
 
 <!-- TABLE + TIMELINE horizontal split -->
-<div class="work-packages-split-view--tabletimeline-container"
-     [ngClass]="{ '-with-resizer': showResizerInCardView() }"
+<div class="op-bcf-list-container--work-packages-split-view--tabletimeline-container"
+     [ngClass]="{ '_with-resizer': showResizerInCardView() }"
      *ngIf="tableInformationLoaded && showTableView">
-  <wp-resizer elementClass="work-packages-partitioned-page--content-right"
-              localStorageKey="openProject-splitViewFlexBasis">
-  </wp-resizer>
+<wp-resizer elementClass="work-packages-partitioned-page--content-right"
+          localStorageKey="openProject-splitViewFlexBasis">
+</wp-resizer>
 
-  <wp-table [projectIdentifier]="CurrentProject.identifier"
-            [configuration]="wpTableConfiguration"
-            (itemClicked)="handleWorkPackageClicked($event)"
-            (stateLinkClicked)="openStateLink($event)"
-            class="work-packages-split-view--tabletimeline-content">
-  </wp-table>
+<wp-table [projectIdentifier]="CurrentProject.identifier"
+          [configuration]="wpTableConfiguration"
+          (itemClicked)="handleWorkPackageClicked($event)"
+          (stateLinkClicked)="openStateLink($event)"
+          class="work-packages-split-view--tabletimeline-content">
+</wp-table>
 </div>
 
 <!-- GRID representation of the WP -->
 <div *ngIf="!showTableView"
-     class="work-packages--card-view-container"
-     [ngClass]="{ '-with-resizer': showResizerInCardView() }" >
-  <wp-grid [configuration]="wpTableConfiguration"
-           [showResizer]="showResizerInCardView()"
-           (itemClicked)="handleWorkPackageCardClicked($event)"
-           (stateLinkClicked)="openStateLink($event)"
-           resizerClass="work-packages-partitioned-page--content-right"
-           resizerStorageKey="openProject-splitViewFlexBasis">
-  </wp-grid>
+     class="op-bcf-list-container--work-packages--card-view-container"
+     [ngClass]="{ '_with-resizer': showResizerInCardView() }" >
+<wp-grid [configuration]="wpTableConfiguration"
+          [showResizer]="showResizerInCardView()"
+          (itemClicked)="handleWorkPackageCardClicked($event)"
+          (stateLinkClicked)="openStateLink($event)"
+          resizerClass="work-packages-partitioned-page--content-right"
+          resizerStorageKey="openProject-splitViewFlexBasis">
+</wp-grid>
 </div>
 
 <!-- Footer -->
 <div class="work-packages-split-view--tabletimeline-footer hide-when-print"
      *ngIf="tableInformationLoaded">
-  <wp-table-pagination></wp-table-pagination>
-</div>
+<wp-table-pagination></wp-table-pagination>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass b/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass
index 2d0a8cd1ac..cfe0b13010 100644
--- a/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass
+++ b/frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass
@@ -1,35 +1,36 @@
 @import "src/assets/sass/helpers"
 
-.result-overlay
-  @include overlay-background
-  background-color: #FFFFFF
-  opacity: 0.5
+.op-bcf-list-container
+  &--result-overlay
+    @include overlay-background
+    background-color: #FFFFFF
+    opacity: 0.5
 
-.work-packages--card-view-container
-  width: 100%
-  overflow: auto
-  padding-bottom: 5px
-  @include styled-scroll-bar
+  &--work-packages--card-view-container
+    width: 100%
+    overflow: auto
+    padding-bottom: 5px
+    @include styled-scroll-bar
 
-  @media screen and (min-width: 679px)
-    &.-with-resizer
-     padding-left: 10px
+    @media screen and (min-width: 679px)
+      &._with-resizer
+        padding-left: 10px
 
-  @media screen and (max-width: 679px)
-    // Ensure the WP cards span the complete width on mobile
-    // --> Move scrollbar out of visible area
-    min-width: calc(100vw + 10px)
+    @media screen and (max-width: 679px)
+      // Ensure the WP cards span the complete width on mobile
+      // --> Move scrollbar out of visible area
+      min-width: calc(100vw + 10px)
 
-.work-packages-split-view--tabletimeline-container
-  display: flex
-  flex: 1 1 auto
-  @include styled-scroll-bar
+  &--work-packages-split-view--tabletimeline-container
+    display: flex
+    flex: 1 1 auto
+    @include styled-scroll-bar
 
-  @media screen and (min-width: 679px)
-    &.-with-resizer
-     padding-left: 10px
+    @media screen and (min-width: 679px)
+      &._with-resizer
+        padding-left: 10px
 
-  @media screen and (max-width: 679px)
-    // Ensure the WP cards span the complete width on mobile
-    // --> Move scrollbar out of visible area
-    min-width: calc(100vw + 10px)
\ No newline at end of file
+    @media screen and (max-width: 679px)
+      // Ensure the WP cards span the complete width on mobile
+      // --> Move scrollbar out of visible area
+      min-width: calc(100vw + 10px)
\ No newline at end of file
diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
index a0a6856039..e609f51658 100644
--- a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
+++ b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
@@ -1,5 +1,5 @@
 <div #outerContainer
-     class="ifc-model-viewer">
+     class="op-ifc-viewer">
 
   <div *ngIf="modelCount === 0" class="notification-box -info">
     <div class="notification-box--content">
@@ -15,21 +15,26 @@
     </div>
   </div>
 
-  <div class="ifc-model-viewer--container xeokit-busy-modal-backdrop">
+  <div class="op-ifc-viewer--container xeokit-busy-modal-backdrop"
+        data-qa-selector="op-ifc-viewer--container">
     <div *ngIf="modelCount && !keyboardEnabled"
-         class="ifc-model-viewer--focus-warning">
-      <a class="ifc-model-viewer--keyboard-disabled-icon icon-no-color icon-input-disabled"
+         class="op-ifc-viewer--focus-warning">
+      <a class="op-ifc-viewer--keyboard-disabled-icon icon-no-color icon-input-disabled"
          (mousedown)="enableFromIcon($event)"
          [attr.title]="text.keyboard_input_disabled">
       </a>
     </div>
 
-    <div class="ifc-model-viewer--toolbar-container"></div>
+    <div class="op-ifc-viewer--toolbar-container"
+          data-qa-selector="op-ifc-viewer--toolbar-container">
+    </div>
     <canvas #modelCanvas
-            class="ifc-model-viewer--model-canvas"
+            class="op-ifc-viewer--model-canvas"
+            data-qa-selector="op-ifc-viewer--model-canvas"
             tabindex="0">
     </canvas>
   </div>
 
-  <canvas class="ifc-model-viewer--nav-cube-canvas"></canvas>
+  <canvas class="op-ifc-viewer--nav-cube-canvas"
+          data-qa-selector="op-ifc-viewer--nav-cube-canvas" ></canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass
index cf13925b89..88c1c761ee 100644
--- a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass
+++ b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass
@@ -1,58 +1,58 @@
 @import "src/assets/sass/helpers"
 
-.ifc-model-viewer
+.op-ifc-viewer
   height: 100%
 
   .notification-box
     position: absolute
     right: 10px
 
-.ifc-model-viewer--nav-cube-canvas
-  position: absolute
-  width: 200px
-  height: 200px
-  bottom: 0
-  right: 0
-  z-index: 10
-
-.ifc-model-viewer--section-planes-overview-canvas
-  position: absolute
-  width: 250px
-  height: 250px
-  top: 50px
-  right: 50px
-  z-index: 2000
-
-.ifc-model-viewer--container
-  position: relative
-  width: 100%
-  height: 100%
-  padding-bottom: 10px
-  overflow: hidden
-  min-width: 420px
-
-.ifc-model-viewer--model-canvas
-  width: 100%
-  height: 100%
-
-  &:focus
-    outline: none
+  &--nav-cube-canvas
+    position: absolute
+    width: 200px
+    height: 200px
+    bottom: 0
+    right: 0
+    z-index: 10
 
-.ifc-model-viewer--focus-warning
-  @include without-link-styling
-  position: absolute
-  top: 6px
-  right: 395px
+  &--section-planes-overview-canvas
+    position: absolute
+    width: 250px
+    height: 250px
+    top: 50px
+    right: 50px
+    z-index: 2000
+
+  &--container
+    position: relative
+    width: 100%
+    height: 100%
+    padding-bottom: 10px
+    overflow: hidden
+    min-width: 420px
+
+  &--model-canvas
+    width: 100%
+    height: 100%
+
+    &:focus
+      outline: none
+
+  &--focus-warning
+    @include without-link-styling
+    position: absolute
+    top: 6px
+    right: 395px
 
-.ifc-model-viewer--keyboard-disabled-icon
-  font-size: 20px
+  &--keyboard-disabled-icon
+    font-size: 20px
 
-.ifc-model-viewer--toolbar-container,
-.ifc-model-viewer--focus-warning
-  margin-top: 10px
-  margin-right: 5px
+  &--toolbar-container,
+  &--focus-warning
+    margin-top: 10px
+    margin-right: 5px
 
-@media only screen and (max-width: 679px)
-  .ifc-model-viewer--nav-cube-canvas,
-  .ifc-model-viewer--focus-warning
-    display: none
+  &--nav-cube-canvas,
+  &--focus-warning
+    @media only screen and (max-width: 679px)
+      display: none
diff --git a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
index e75f530b5b..b9bb4ccbcc 100644
--- a/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
+++ b/frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
@@ -94,10 +94,10 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
       ).subscribe((manageIfcModelsAllowed) => {
         this.ifcViewer.newViewer(
           {
-            canvasElement: element.find('.ifc-model-viewer--model-canvas')[0], // WebGL canvas
-            explorerElement: jQuery('.ifc-model-viewer--tree-panel')[0], // Left panel
-            toolbarElement: element.find('.ifc-model-viewer--toolbar-container')[0], // Toolbar
-            navCubeCanvasElement: element.find('.ifc-model-viewer--nav-cube-canvas')[0],
+            canvasElement: element.find('[data-qa-selector="op-ifc-viewer--model-canvas"]')[0], // WebGL canvas
+            explorerElement: jQuery('[data-qa-selector="op-ifc-viewer--tree-panel"]')[0], // Left panel
+            toolbarElement: element.find('[data-qa-selector="op-ifc-viewer--toolbar-container"]')[0], // Toolbar
+            navCubeCanvasElement: element.find('[data-qa-selector="op-ifc-viewer--nav-cube-canvas"]')[0],
             busyModelBackdropElement: element.find('.xeokit-busy-modal-backdrop')[0],
             enableEditModels: manageIfcModelsAllowed,
           },
diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
index d18e1c4495..6e5830c36e 100644
--- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
+++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
@@ -31,7 +31,7 @@
     .work-packages-partitioned-page--content-container
       flex-direction: column
 
-    .ifc-model-viewer--container
+    .op-ifc-viewer--container
       height: 33vh !important
       min-width: unset !important
 
diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass
index 38c8098325..015151de84 100644
--- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass
+++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass
@@ -1,5 +1,5 @@
 // -------------------------- GENERIC --------------------------
-.ifc-model-viewer--tree-panel
+.op-ifc-viewer--tree-panel
   padding: 0 15px
   color: var(--main-menu-font-color)
 
diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
index 083d85a6bc..dd5057b723 100644
--- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
+++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
@@ -1,5 +1,5 @@
 // -------------------------- GENERIC --------------------------
-.ifc-model-viewer--toolbar-container
+.op-ifc-viewer--toolbar-container
   position: absolute
   width: 100%
   padding: 0px 6px
@@ -89,11 +89,11 @@
 // -------------------------- MOBILE specific --------------------------
 
 @media only screen and (max-width: 679px)
-  .ifc-model-viewer--toolbar-container
+  .op-ifc-viewer--toolbar-container
     padding-right: 15px
 
-  .ifc-model-viewer--focus-warning,
-  .ifc-model-viewer--toolbar-container
+  .op-ifc-viewer--focus-warning,
+  .op-ifc-viewer--toolbar-container
     .fa-male,
     .fa-cut
       display: none
diff --git a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
index a0430aaf3d..f3ae4e2cf1 100644
--- a/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
+++ b/modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
@@ -1 +1 @@
-<div class="ifc-model-viewer--tree-panel active"></div>
+<div class="op-ifc-viewer--tree-panel active" data-qa-selector="op-ifc-viewer--tree-panel"></div>
diff --git a/modules/bim/spec/support/pages/ifc_models/index.rb b/modules/bim/spec/support/pages/ifc_models/index.rb
index 62517e6c1d..e119a24d94 100644
--- a/modules/bim/spec/support/pages/ifc_models/index.rb
+++ b/modules/bim/spec/support/pages/ifc_models/index.rb
@@ -102,7 +102,7 @@ module Pages
       def show_model(model)
         click_model_link model.title
 
-        expect_correct_page_loaded '.ifc-model-viewer--container'
+        expect_correct_page_loaded '[data-qa-selector="op-ifc-viewer--container"]'
 
         expect_model_active(model)
       end
@@ -114,7 +114,7 @@ module Pages
       def show_defaults(models = [])
         click_toolbar_button 'Show defaults'
 
-        expect_correct_page_loaded '.ifc-model-viewer--container'
+        expect_correct_page_loaded '[data-qa-selector="op-ifc-viewer--container"]'
 
         models.each do |model|
           expect_model_active(model, model.is_default)
diff --git a/modules/bim/spec/support/pages/ifc_models/show_default.rb b/modules/bim/spec/support/pages/ifc_models/show_default.rb
index 3f98e8c188..c5443c552d 100644
--- a/modules/bim/spec/support/pages/ifc_models/show_default.rb
+++ b/modules/bim/spec/support/pages/ifc_models/show_default.rb
@@ -54,7 +54,7 @@ module Pages
       end
 
       def model_viewer_visible(visible)
-        selector = '.ifc-model-viewer--model-canvas'
+        selector = '[data-qa-selector="op-ifc-viewer--model-canvas"]'
         expect(page).to (visible ? have_selector(selector, wait: 10) : have_no_selector(selector, wait: 10))
       end
 
@@ -62,12 +62,12 @@ module Pages
         selector = '.xeokit-btn'
 
         if visible
-          within ('.ifc-model-viewer--toolbar-container') do
+          within ('[data-qa-selector="op-ifc-viewer--toolbar-container"]') do
             expect(page).to have_selector(selector, count: 9)
           end
         else
           expect(page).to have_no_selector(selector)
-          expect(page).to have_no_selector('.ifc-model-viewer--toolbar-container')
+          expect(page).to have_no_selector('[data-qa-selector="op-ifc-viewer--toolbar-container"]')
         end
       end