diff --git a/web/libs/editor/src/common/Button/Button.tsx b/web/libs/editor/src/common/Button/Button.tsx
index 9beb8ad4cbf2..07b0ac064a39 100644
--- a/web/libs/editor/src/common/Button/Button.tsx
+++ b/web/libs/editor/src/common/Button/Button.tsx
@@ -8,10 +8,11 @@ import {
   forwardRef,
   type ForwardRefExoticComponent,
   useMemo,
+  createElement,
 } from "react";
 import { Hotkey } from "../../core/Hotkey";
 import { useHotkey } from "../../hooks/useHotkey";
-import { Block, type CNTagName, Elem } from "../../utils/bem";
+import { cn, type CNTagName } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import "./Button.scss";
 
@@ -107,18 +108,19 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 
     useHotkey(hotkey, rest.onClick as unknown as Keymaster.KeyHandler, hotkeyScope);
 
-    const buttonBody = (
-      <Block name="button" mod={mods} mix={className} ref={ref} tag={finalTag} type={type} {...rest}>
-        <>
-          {iconElem && (
-            <Elem tag="span" name="icon">
-              {iconElem}
-            </Elem>
-          )}
-          {iconElem && children ? <span>{children}</span> : children}
-          {extra !== undefined ? <Elem name="extra">{extra}</Elem> : null}
-        </>
-      </Block>
+    const buttonBody = createElement(
+      finalTag as any,
+      {
+        ref,
+        type,
+        ...rest,
+        className: cn("button").mod(mods).mix(className).toClassName(),
+      },
+      <>
+        {iconElem && <span className={cn("button").elem("icon").toClassName()}>{iconElem}</span>}
+        {iconElem && children ? <span>{children}</span> : children}
+        {extra !== undefined ? <div className={cn("button").elem("extra").toClassName()}>{extra}</div> : null}
+      </>,
     );
 
     if (
@@ -147,11 +149,7 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 Button.displayName = "Button";
 
 const Group: FC<ButtonGroupProps> = ({ className, children, collapsed }) => {
-  return (
-    <Block name="button-group" mod={{ collapsed }} mix={className}>
-      {children}
-    </Block>
-  );
+  return <div className={cn("button-group").mod({ collapsed }).mix(className).toClassName()}>{children}</div>;
 };
 
 Button.Group = Group;
diff --git a/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx b/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
index 43d1487aedea..2a2c427e9927 100644
--- a/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
+++ b/web/libs/editor/src/common/Dropdown/DropdownComponent.tsx
@@ -12,7 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { useFullscreen } from "../../hooks/useFullscreen";
-import { Block, cn } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { alignElements, type Align } from "@humansignal/core/lib/utils/dom";
 import { aroundTransition } from "@humansignal/core/lib/utils/transition";
 import "./Dropdown.scss";
@@ -213,11 +213,10 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
     }, [props.style, dropdownIndex, minIndex, offset]);
 
     const result = (
-      <Block
-        ref={dropdown}
-        name="dropdown"
+      <div
+        ref={dropdown as any}
         data-testid={props.dataTestId}
-        mix={[props.className, visibilityClasses]}
+        className={rootName.mix(props.className, visibilityClasses).toClassName()}
         style={{
           ...compositeStyles,
           borderRadius: isFF(FF_DEV_3873) && 4,
@@ -225,7 +224,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
         onClick={(e: MouseEvent) => e.stopPropagation()}
       >
         {content}
-      </Block>
+      </div>
     );
 
     return props.inline === true ? result : createPortal(result, document.body);
diff --git a/web/libs/editor/src/common/Icon/Icon.jsx b/web/libs/editor/src/common/Icon/Icon.jsx
index 0e12b84f62cb..9562ac8c59e5 100644
--- a/web/libs/editor/src/common/Icon/Icon.jsx
+++ b/web/libs/editor/src/common/Icon/Icon.jsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Icon.scss";
 
 export const Icon = React.forwardRef(({ icon, ...props }, ref) => {
   return (
-    <Block tag="span" name="icon" ref={ref}>
+    <span ref={ref} className={cn("icon").toClassName()}>
       {React.createElement(icon, props)}
-    </Block>
+    </span>
   );
 });
diff --git a/web/libs/editor/src/common/Label/Label.jsx b/web/libs/editor/src/common/Label/Label.jsx
index 2f8a9bf06dbd..ff0eca475f5a 100644
--- a/web/libs/editor/src/common/Label/Label.jsx
+++ b/web/libs/editor/src/common/Label/Label.jsx
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { createElement, forwardRef } from "react";
+import { cn } from "../../utils/bem";
 import "./Label.scss";
 
 export const Label = forwardRef(
@@ -14,16 +14,21 @@ export const Label = forwardRef(
       empty: !children,
     };
 
-    return (
-      <Block ref={ref} name="field-label" mod={mods} tag={tagName} style={style} data-required={required}>
-        <Elem name="text">
-          <Elem name="content">
-            {text}
-            {description && <Elem name="description">{description}</Elem>}
-          </Elem>
-        </Elem>
-        <Elem name="field">{children}</Elem>
-      </Block>
+    return createElement(
+      tagName,
+      {
+        ref,
+        style,
+        "data-required": required,
+        className: cn("field-label").mod(mods).toClassName(),
+      },
+      <div className={cn("field-label").elem("text").toClassName()}>
+        <div className={cn("field-label").elem("content").toClassName()}>
+          {text}
+          {description && <div className={cn("field-label").elem("description").toClassName()}>{description}</div>}
+        </div>
+      </div>,
+      <div className={cn("field-label").elem("field").toClassName()}>{children}</div>,
     );
   },
 );
diff --git a/web/libs/editor/src/common/Menu/Menu.jsx b/web/libs/editor/src/common/Menu/Menu.jsx
index 1d5921f61b2c..327b2e94248a 100644
--- a/web/libs/editor/src/common/Menu/Menu.jsx
+++ b/web/libs/editor/src/common/Menu/Menu.jsx
@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useMemo } from "react";
-import { Block, cn } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { useDropdown } from "../Dropdown/DropdownTrigger";
 import "./Menu.scss";
 import { MenuContext } from "./MenuContext";
@@ -34,17 +34,14 @@ export const Menu = forwardRef(
 
     return (
       <MenuContext.Provider value={contextValue}>
-        <Block
+        <ul
           ref={ref}
-          tag="ul"
-          name="menu"
-          mod={{ size, collapsed }}
-          mix={className}
+          className={cn("menu").mod({ size, collapsed }).mix(className).toClassName()}
           style={style}
           onClick={clickHandler}
         >
           {children}
-        </Block>
+        </ul>
       </MenuContext.Provider>
     );
   },
diff --git a/web/libs/editor/src/common/Pagination/Pagination.tsx b/web/libs/editor/src/common/Pagination/Pagination.tsx
index bc084a3f7e30..c25dbd762607 100644
--- a/web/libs/editor/src/common/Pagination/Pagination.tsx
+++ b/web/libs/editor/src/common/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
 import { type ChangeEvent, type FC, forwardRef, type KeyboardEvent, useCallback, useMemo, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { Select } from "@humansignal/ui";
 import { WithHotkey } from "../Hotkey/WithHotkey";
 import "./Pagination.scss";
@@ -66,15 +66,15 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
     }, [pageSizeOptions]);
 
     return (
-      <Block name="pagination" mod={{ size, outline, align, noPadding, disabled }}>
-        <Elem name="navigation">
+      <div className={cn("pagination").mod({ size, outline, align, noPadding, disabled }).toClassName()}>
+        <div className={cn("pagination").elem("navigation").toClassName()}>
           <>
             <NavigationButton
               mod={["arrow-left", "arrow-left-double"]}
               onClick={() => onChange?.(1)}
               disabled={currentPage === 1 || disabled}
             />
-            <Elem name="divider" />
+            <div className={cn("pagination").elem("divider").toClassName()} />
           </>
           <NavigationButton
             mod={["arrow-left"]}
@@ -82,7 +82,7 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
             hotkey={hotkey?.prev}
             disabled={currentPage === 1 || disabled}
           />
-          <Elem name="input">
+          <div className={cn("pagination").elem("input").toClassName()}>
             {inputMode ? (
               <input
                 type="text"
@@ -116,8 +116,8 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                 }}
               />
             ) : (
-              <Elem
-                name="page-indicator"
+              <div
+                className={cn("pagination").elem("page-indicator").toClassName()}
                 onClick={() => {
                   setInputMode(true);
                 }}
@@ -128,9 +128,9 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                     /*  */
                   }}
                 />
-              </Elem>
+              </div>
             )}
-          </Elem>
+          </div>
           <NavigationButton
             mod={["arrow-right"]}
             onClick={() => onChange?.(currentPage + 1)}
@@ -138,20 +138,20 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
             hotkey={hotkey?.next}
           />
           <>
-            <Elem name="divider" />
+            <div className={cn("pagination").elem("divider").toClassName()} />
             <NavigationButton
               mod={["arrow-right", "arrow-right-double"]}
               onClick={() => onChange?.(totalPages)}
               disabled={currentPage === totalPages || disabled}
             />
           </>
-        </Elem>
+        </div>
         {pageSizeSelectable && (
-          <Elem name="page-size">
+          <div className={cn("pagination").elem("page-size").toClassName()}>
             <Select value={pageSize} onChange={handleChangeSelect} options={options} />
-          </Elem>
+          </div>
         )}
-      </Block>
+      </div>
     );
   },
 );
@@ -174,7 +174,7 @@ const NavigationButton: FC<NavigationButtonProps> = ({ mod, disabled, hotkey, on
 
   return (
     <WithHotkey binging={hotkey as HotkeyList}>
-      <Elem name="btn" mod={buttonMod} onClick={actionHandler} />
+      <div className={cn("pagination").elem("btn").mod(buttonMod).toClassName()} onClick={actionHandler} />
     </WithHotkey>
   );
 };
diff --git a/web/libs/editor/src/common/Range/Range.tsx b/web/libs/editor/src/common/Range/Range.tsx
index 46d6141e9ddd..371acf7e8fad 100644
--- a/web/libs/editor/src/common/Range/Range.tsx
+++ b/web/libs/editor/src/common/Range/Range.tsx
@@ -1,5 +1,5 @@
 import { type CSSProperties, type FC, type MouseEvent as RMouseEvent, useCallback } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { clamp, isDefined } from "../../utils/utilities";
 import { useValueTracker } from "../Utils/useValueTracker";
 import "./Range.scss";
@@ -138,20 +138,20 @@ export const Range: FC<RangeProps> = ({
   const sizeProperty = align === "horizontal" ? "minWidth" : "minHeight";
 
   return (
-    <Block name="range" mod={{ align }} style={{ [sizeProperty]: size }}>
+    <div className={cn("range").mod({ align }).toClassName()} style={{ [sizeProperty]: size }}>
       {reverse
         ? maxIcon && (
-            <Elem name="icon" onMouseDown={increase}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
               {maxIcon}
-            </Elem>
+            </div>
           )
         : minIcon && (
-            <Elem name="icon" onMouseDown={decrease}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
               {minIcon}
-            </Elem>
+            </div>
           )}
-      <Elem name="body" onClick={onClick}>
-        <Elem name="line" />
+      <div className={cn("range").elem("body").toClassName()} onClick={onClick}>
+        <div className={cn("range").elem("line").toClassName()} />
         <RangeIndicator align={align} reverse={reverse} value={currentValue} valueConvert={valueToPercentage} />
         {isMultiArray ? (
           arrayReverse(currentValue, reverse).map((value, i) => {
@@ -196,19 +196,19 @@ export const Range: FC<RangeProps> = ({
             onChange={(val) => updateValue(val, true, true)}
           />
         )}
-      </Elem>
+      </div>
       {reverse
         ? minIcon && (
-            <Elem name="icon" onMouseDown={decrease}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
               {minIcon}
-            </Elem>
+            </div>
           )
         : maxIcon && (
-            <Elem name="icon" onMouseDown={increase}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
               {maxIcon}
-            </Elem>
+            </div>
           )}
-    </Block>
+    </div>
   );
 };
 
@@ -276,8 +276,8 @@ const RangeHandle: FC<RangeHandleProps> = ({
   };
 
   return (
-    <Elem
-      name="range-handle"
+    <div
+      className={cn("range").elem("range-handle").toClassName()}
       style={{ [offsetProperty]: `${valueConvert(value)}%` }}
       onMouseDownCapture={handleMouseDown}
       onDoubleClick={handleDoubleClick}
@@ -318,5 +318,5 @@ const RangeIndicator: FC<RangeIndicatorProps> = ({ value, valueConvert, align, r
     if (reverse && !multi) [style.top, style.bottom] = [style.bottom, style.top];
   }
 
-  return <Elem name="indicator" style={style} />;
+  return <div className={cn("range").elem("indicator").toClassName()} style={style} />;
 };
diff --git a/web/libs/editor/src/common/Space/Space.tsx b/web/libs/editor/src/common/Space/Space.tsx
index 8d81545e4e63..9b5f55211d77 100644
--- a/web/libs/editor/src/common/Space/Space.tsx
+++ b/web/libs/editor/src/common/Space/Space.tsx
@@ -1,8 +1,7 @@
 import type { CSSProperties, FC } from "react";
-import { BemWithSpecificContext } from "../../utils/bem";
-import "./Space.scss";
 
-const { Block } = BemWithSpecificContext();
+import { cn } from "../../utils/bem";
+import "./Space.scss";
 
 export interface SpaceProps {
   direction?: "horizontal" | "vertical";
@@ -30,14 +29,15 @@ export const Space: FC<SpaceProps> = ({
   ...rest
 }) => {
   return (
-    <Block
-      name="space"
-      mod={{ direction, size, spread, stretch, align, collapsed, truncated }}
-      mix={className}
+    <div
       style={style}
       {...rest}
+      className={cn("space")
+        .mod({ direction, size, spread, stretch, align, collapsed, truncated })
+        .mix(className)
+        .toClassName()}
     >
       {children}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
index 9ef34aa43e0c..ec7e89b17031 100644
--- a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import { IconCheck, IconCross } from "@humansignal/icons";
 import { Button, Toggle } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 
 import "./AutoAcceptToggle.scss";
 
@@ -27,31 +27,27 @@ export const AutoAcceptToggle = injector(
     const loading = store.awaitingSuggestions;
 
     return (
-      <Block name="auto-accept">
+      <div className={cn("auto-accept").toClassName()}>
         {withSuggestions && (
-          <Elem name="wrapper" mod={{ loading }}>
+          <div className={cn("auto-accept").elem("wrapper").mod({ loading }).toClassName()}>
             <Space spread>
               {suggestions.size > 0 ? (
                 <Space size="small">
-                  <Elem name="info">
+                  <div className={cn("auto-accept").elem("info").toClassName()}>
                     {suggestions.size} suggestion{suggestions.size > 0 && "s"}
-                  </Elem>
-                  <Elem
-                    name="action"
-                    tag={Button}
-                    mod={{ type: "reject" }}
+                  </div>
+                  <Button
+                    className={cn("auto-accept").elem("action").mod({ type: "reject" }).toClassName()}
                     onClick={() => annotation.rejectAllSuggestions()}
                   >
                     <IconCross />
-                  </Elem>
-                  <Elem
-                    name="action"
-                    tag={Button}
-                    mod={{ type: "accept" }}
+                  </Button>
+                  <Button
+                    className={cn("auto-accept").elem("action").mod({ type: "accept" }).toClassName()}
                     onClick={() => annotation.acceptAllSuggestions()}
                   >
                     <IconCheck />
-                  </Elem>
+                  </Button>
                 </Space>
               ) : (
                 <Toggle
@@ -61,10 +57,10 @@ export const AutoAcceptToggle = injector(
                 />
               )}
             </Space>
-          </Elem>
+          </div>
         )}
-        {loading && <Elem name="spinner" />}
-      </Block>
+        {loading && <div className={cn("auto-accept").elem("spinner").toClassName()} />}
+      </div>
     );
   }),
 );
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
index 367ddf0cf595..8a038948343e 100644
--- a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { Space } from "../../common/Space/Space";
 import { Toggle } from "@humansignal/ui";
 import ToolsManager from "../../tools/Manager";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./DynamicPreannotationsToggle.scss";
 
 export const DynamicPreannotationsToggle = inject("store")(
@@ -15,8 +15,8 @@ export const DynamicPreannotationsToggle = inject("store")(
     }, [enabled]);
 
     return enabled ? (
-      <Block name="dynamic-preannotations">
-        <Elem name="wrapper">
+      <div className={cn("dynamic-preannotations").toClassName()}>
+        <div className={cn("dynamic-preannotations").elem("wrapper").toClassName()}>
           <Space spread>
             <Toggle
               checked={store.autoAnnotation}
@@ -32,8 +32,8 @@ export const DynamicPreannotationsToggle = inject("store")(
               label="Auto-Annotation"
             />
           </Space>
-        </Elem>
-      </Block>
+        </div>
+      </div>
     ) : null;
   }),
 );
diff --git a/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx b/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
index edceaa3348a8..5dc58c7d7c54 100644
--- a/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
+++ b/web/libs/editor/src/components/AnnotationTabs/AnnotationTabs.jsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { IconBan, IconSparks, IconStar } from "@humansignal/icons";
 import { Userpic } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./AnnotationTabs.scss";
 
 export const EntityTab = observer(
@@ -13,10 +13,9 @@ export const EntityTab = observer(
       const infoIsHidden = entity.store.hasInterface("annotations:hide-info");
 
       return (
-        <Block
-          name="entity-tab"
+        <div
           ref={ref}
-          mod={{ selected, bordered }}
+          className={cn("entity-tab").mod({ selected, bordered }).toClassName()}
           style={style}
           onClick={(e) => {
             e.preventDefault();
@@ -25,28 +24,28 @@ export const EntityTab = observer(
           }}
         >
           <Space size="small">
-            <Elem
-              name="userpic"
-              tag={Userpic}
+            <Userpic
+              className={cn("entity-tab").elem("userpic").mod({ prediction }).toClassName()}
               showUsername
               username={prediction ? entity.createdBy : null}
               user={infoIsHidden ? {} : (entity.user ?? { email: entity.createdBy })}
-              mod={{ prediction }}
             >
               {prediction && <IconSparks style={{ width: 16, height: 16 }} />}
-            </Elem>
+            </Userpic>
 
             {!infoIsHidden && (
-              <Elem name="identifier">
+              <div className={cn("entity-tab").elem("identifier").toClassName()}>
                 ID {entity.pk ?? entity.id} {isUnsaved && "*"}
-              </Elem>
+              </div>
             )}
 
-            {displayGroundTruth && entity.ground_truth && <Elem name="ground-truth" tag={IconStar} />}
+            {displayGroundTruth && entity.ground_truth && (
+              <IconStar className={cn("entity-tab").elem("ground-truth").toClassName()} />
+            )}
 
-            {entity.skipped && <Elem name="skipped" tag={IconBan} />}
+            {entity.skipped && <IconBan className={cn("entity-tab").elem("skipped").toClassName()} />}
           </Space>
-        </Block>
+        </div>
       );
     },
   ),
diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
index cf8480bd035e..83232ce5e0eb 100644
--- a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
+++ b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { inject, observer } from "mobx-react";
 import { useCopyText } from "@humansignal/core";
 import { isDefined, userDisplayName } from "@humansignal/core/lib/utils/helpers";
-import { Block, cn, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import {
   IconAnnotationGroundTruth,
   IconAnnotationSkipped2,
@@ -212,20 +212,20 @@ export const AnnotationButton = observer(
     );
 
     return (
-      <Block name="annotation-button" mod={{ selected: entity.selected }}>
-        <Elem name="mainSection" onClick={clickHandler}>
-          <Elem name="picSection">
-            <Elem
-              name="userpic"
-              tag={Userpic}
+      <div className={cn("annotation-button").mod({ selected: entity.selected }).toClassName()}>
+        <div className={cn("annotation-button").elem("mainSection").toClassName()} onClick={clickHandler}>
+          <div className={cn("annotation-button").elem("picSection").toClassName()}>
+            <Userpic
+              className={cn("annotation-button").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
               showUsername
               username={isPrediction ? entity.createdBy : null}
               user={hiddenUser ?? entity.user ?? { email: entity.createdBy }}
-              mod={{ prediction: isPrediction }}
               size={24}
+              block="lsf-annotation-button"
             >
               {isPrediction && <IconSparks style={{ width: 18, height: 18 }} />}
-            </Elem>
+            </Userpic>
+            {/* TODO: Remove block. Selenium is using this anchor that was mistakenly propagated into this element. */}
             {/* to do: return these icons when we have a better way to grab the history action type */}
             {/* {historyActionType === 'accepted' && <Elem name='status' mod={{ approved: true }}><IconCheckBold /></Elem>}
           {historyActionType && (
@@ -238,62 +238,62 @@ export const AnnotationButton = observer(
               <IconCheckBold />
             </Elem>
           )} */}
-          </Elem>
-          <Elem name="main">
-            <Elem name="user">
-              <Elem tag="span" name="name">
+          </div>
+          <div className={cn("annotation-button").elem("main").toClassName()}>
+            <div className={cn("annotation-button").elem("user").toClassName()}>
+              <span className={cn("annotation-button").elem("name").toClassName()}>
                 {hiddenUser ? hiddenUser.email : username}
-              </Elem>
+              </span>
               {!infoIsHidden && (
-                <Elem tag="span" name="entity-id">
+                <span className={cn("annotation-button").elem("entity-id").toClassName()}>
                   #{entity.pk ?? entity.id}
-                </Elem>
+                </span>
               )}
-            </Elem>
+            </div>
             {!infoIsHidden && (
-              <Elem name="info">
-                <Elem name="date" component={TimeAgo} date={entity.createdDate} />
+              <div className={cn("annotation-button").elem("info").toClassName()}>
+                <TimeAgo className={cn("annotation-button").elem("date").toClassName()} date={entity.createdDate} />
                 {isPrediction && isDefined(entity.score) && (
                   <span title={`Prediction score = ${entity.score}`}>
                     {" · "} {(entity.score * 100).toFixed(2)}%
                   </span>
                 )}
-              </Elem>
+              </div>
             )}
-          </Elem>
+          </div>
           {!isPrediction && (
-            <Elem name="icons">
+            <div className={cn("annotation-button").elem("icons").toClassName()}>
               {entity.draftId > 0 && (
                 <Tooltip title="Draft">
-                  <Elem name="icon" mod={{ draft: true }}>
+                  <div className={cn("annotation-button").elem("icon").mod({ draft: true }).toClassName()}>
                     <IconDraftCreated2 color="#617ADA" />
-                  </Elem>
+                  </div>
                 </Tooltip>
               )}
               {entity.skipped && (
                 <Tooltip title="Skipped">
-                  <Elem name="icon" mod={{ skipped: true }}>
+                  <div className={cn("annotation-button").elem("icon").mod({ skipped: true }).toClassName()}>
                     <IconAnnotationSkipped2 color="#DD0000" />
-                  </Elem>
+                  </div>
                 </Tooltip>
               )}
               {isGroundTruth && (
                 <Tooltip title="Ground-truth">
-                  <Elem name="icon" mod={{ groundTruth: true }}>
+                  <div className={cn("annotation-button").elem("icon").mod({ groundTruth: true }).toClassName()}>
                     <IconAnnotationGroundTruth />
-                  </Elem>
+                  </div>
                 </Tooltip>
               )}
               {CommentIcon && (
                 <Tooltip title={renderCommentTooltip(entity)}>
-                  <Elem name="icon" mod={{ comments: true }}>
+                  <div className={cn("annotation-button").elem("icon").mod({ comments: true }).toClassName()}>
                     <CommentIcon />
-                  </Elem>
+                  </div>
                 </Tooltip>
               )}
-            </Elem>
+            </div>
           )}
-        </Elem>
+        </div>
         <ContextMenuTrigger
           className={cn("annotation-button").elem("trigger").toClassName()}
           content={
@@ -304,7 +304,7 @@ export const AnnotationButton = observer(
             />
           }
         />
-      </Block>
+      </div>
     );
   },
 );
diff --git a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
index 853978097a60..aec5edc02a17 100644
--- a/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
+++ b/web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx
@@ -1,7 +1,7 @@
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { clamp, sortAnnotations } from "../../utils/utilities";
 import { AnnotationButton } from "./AnnotationButton";
 import "./AnnotationsCarousel.scss";
@@ -62,13 +62,14 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
   }, [annotationStore, JSON.stringify(annotationStore.predictions), JSON.stringify(annotationStore.annotations)]);
 
   return enableAnnotations || enablePredictions || enableCreateAnnotation ? (
-    <Block
-      name="annotations-carousel"
-      mod={{ scrolled: currentPosition > 0 }}
-      style={{ "--carousel-left": `${currentPosition}px` }}
+    <div
+      className={cn("annotations-carousel")
+        .mod({ scrolled: currentPosition > 0 })
+        .toClassName()}
+      style={{ "--carousel-left": `${currentPosition}px` } as any}
     >
-      <Elem ref={containerRef} name="container">
-        <Elem ref={carouselRef} name="carosel">
+      <div ref={containerRef as any} className={cn("annotations-carousel").elem("container").toClassName()}>
+        <div ref={carouselRef as any} className={cn("annotations-carousel").elem("carosel").toClassName()}>
           {sortAnnotations(entities).map((entity) => (
             <AnnotationButton
               key={entity?.id}
@@ -83,10 +84,10 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
               annotationStore={annotationStore}
             />
           ))}
-        </Elem>
-      </Elem>
+        </div>
+      </div>
       {(!isLeftDisabled || !isRightDisabled) && (
-        <Elem name="carousel-controls">
+        <div className={cn("annotations-carousel").elem("carousel-controls").toClassName()}>
           <Button
             disabled={isLeftDisabled}
             aria-label="Carousel left"
@@ -105,8 +106,8 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
           >
             <IconChevronRight />
           </Button>
-        </Elem>
+        </div>
       )}
-    </Block>
+    </div>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/App/App.jsx b/web/libs/editor/src/components/App/App.jsx
index c8ddaadcd67f..988e169f35bf 100644
--- a/web/libs/editor/src/components/App/App.jsx
+++ b/web/libs/editor/src/components/App/App.jsx
@@ -25,7 +25,7 @@ import "../../tags/Custom";
  */
 import { Space } from "../../common/Space/Space";
 import { Button } from "@humansignal/ui";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import {
   FF_BULK_ANNOTATION,
@@ -74,24 +74,24 @@ class App extends Component {
 
   renderSuccess() {
     return (
-      <Block name="editor">
+      <div className={cn("editor").toClassName()}>
         <Result status="success" title={getEnv(this.props.store).messages.DONE} />
-      </Block>
+      </div>
     );
   }
 
   renderNoAnnotation() {
     return (
-      <Block name="editor">
+      <div className={cn("editor").toClassName()}>
         <Result status="success" title={getEnv(this.props.store).messages.NO_COMP_LEFT} />
-      </Block>
+      </div>
     );
   }
 
   renderNothingToLabel(store) {
     return (
-      <Block
-        name="editor"
+      <div
+        className={cn("editor").toClassName()}
         style={{
           display: "flex",
           alignItems: "center",
@@ -101,7 +101,7 @@ class App extends Component {
         }}
       >
         <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
-        <Block name="sub__result">All tasks in the queue have been completed</Block>
+        <div className={cn("sub__result").toClassName()}>All tasks in the queue have been completed</div>
         {store.taskHistory.length > 0 && (
           <Button
             onClick={(e) => store.prevTask(e, true)}
@@ -112,26 +112,28 @@ class App extends Component {
             Go to Previous Task
           </Button>
         )}
-      </Block>
+      </div>
     );
   }
 
   renderNoAccess() {
     return (
-      <Block name="editor">
+      <div className={cn("editor").toClassName()}>
         <Result status="warning" title={getEnv(this.props.store).messages.NO_ACCESS} />
-      </Block>
+      </div>
     );
   }
 
   renderConfigValidationException(store) {
     return (
-      <Block name="main-view">
-        <Elem name="annotation">
+      <div className={cn("main-view").toClassName()}>
+        <div className={cn("main-view").elem("annotation").toClassName()}>
           <TreeValidation errors={this.props.store.annotationStore.validation} />
-        </Elem>
-        {!isFF(FF_DEV_3873) && store.hasInterface("infobar") && <Elem name="infobar">Task #{store.task.id}</Elem>}
-      </Block>
+        </div>
+        {!isFF(FF_DEV_3873) && store.hasInterface("infobar") && (
+          <div className={cn("main-view").elem("infobar").toClassName()}>Task #{store.task.id}</div>
+        )}
+      </div>
     );
   }
 
@@ -143,14 +145,18 @@ class App extends Component {
     if (as.viewingAll) return this.renderAllAnnotations();
 
     return (
-      <Block key={(as.selectedHistory ?? as.selected)?.id} name="main-view" onScrollCapture={this._notifyScroll}>
-        <Elem name="annotation">
+      <div
+        key={(as.selectedHistory ?? as.selected)?.id}
+        className={cn("main-view").toClassName()}
+        onScrollCapture={this._notifyScroll}
+      >
+        <div className={cn("main-view").elem("annotation").toClassName()}>
           {<Annotation root={root} annotation={as.selected} />}
           {this.renderRelations(as.selected)}
           {isFF(FF_PER_FIELD_COMMENTS) && this.renderCommentsOverlay(as.selected)}
-        </Elem>
+        </div>
         {!isFF(FF_DEV_3873) && getRoot(as).hasInterface("infobar") && this._renderInfobar(as)}
-      </Block>
+      </div>
     );
   }
 
@@ -158,11 +164,11 @@ class App extends Component {
     const { id, queue } = getRoot(as).task;
 
     return (
-      <Elem name="infobar" tag={Space} size="small">
+      <Space className={cn("main-view").elem("infobar").toClassName()} size="small">
         <span>Task #{id}</span>
 
         {queue && <span>{queue}</span>}
-      </Elem>
+      </Space>
     );
   }
 
@@ -221,20 +227,23 @@ class App extends Component {
 
     // tags can be styled in config when user is awaiting for suggestions from ML backend
     const mainContent = (
-      <Block name="main-content" mix={store.awaitingSuggestions ? ["requesting"] : []}>
+      <div
+        className={cn("main-content")
+          .mix(...(store.awaitingSuggestions ? ["requesting"] : []))
+          .toClassName()}
+      >
         {as.validation === null
           ? this._renderUI(as.selectedHistory?.root ?? root, as)
           : this.renderConfigValidationException(store)}
-      </Block>
+      </div>
     );
 
     const isBulkMode = isFF(FF_BULK_ANNOTATION) && !isSelfServe() && store.hasInterface("annotation:bulk");
     const newUIEnabled = isFF(FF_DEV_3873);
 
     return (
-      <Block
-        name="editor"
-        mod={{ fullscreen: settings.fullscreen }}
+      <div
+        className={cn("editor").mod({ fullscreen: settings.fullscreen }).toClassName()}
         ref={isFF(FF_LSDV_4620_3_ML) ? reactCleaner(this) : null}
       >
         <Settings store={store} />
@@ -260,13 +269,14 @@ class App extends Component {
             )}
 
             {isDefined(store) && store.hasInterface("topbar") && <TopBar store={store} />}
-            <Block
-              name="wrapper"
-              mod={{
-                viewAll: viewingAll,
-                bsp: settings.effectiveBottomSidePanel,
-                showingBottomBar: newUIEnabled,
-              }}
+            <div
+              className={cn("wrapper")
+                .mod({
+                  viewAll: viewingAll,
+                  bsp: settings.effectiveBottomSidePanel,
+                  showingBottomBar: newUIEnabled,
+                })
+                .toClassName()}
             >
               {newUIEnabled ? (
                 isBulkMode || !store.hasInterface("side-column") ? (
@@ -297,12 +307,12 @@ class App extends Component {
                   {mainContent}
                 </SidePanels>
               )}
-            </Block>
+            </div>
             <ToastViewport />
           </ToastProvider>
         </Provider>
         {store.hasInterface("debug") && <Debug store={store} />}
-      </Block>
+      </div>
     );
   }
 
diff --git a/web/libs/editor/src/components/BottomBar/Actions.jsx b/web/libs/editor/src/components/BottomBar/Actions.jsx
index 6df74c5c779d..5856c06e49ce 100644
--- a/web/libs/editor/src/components/BottomBar/Actions.jsx
+++ b/web/libs/editor/src/components/BottomBar/Actions.jsx
@@ -1,8 +1,8 @@
 import { IconInfoOutline, IconSettings } from "@humansignal/icons";
 import { Button, Space } from "@humansignal/ui";
-import { Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
-import { FF_BULK_ANNOTATION } from "../../utils/feature-flags";
+import { FF_BULK_ANNOTATION, isFF } from "../../utils/feature-flags";
 import { AutoAcceptToggle } from "../AnnotationTab/AutoAcceptToggle";
 import { DynamicPreannotationsToggle } from "../AnnotationTab/DynamicPreannotationsToggle";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
@@ -48,10 +48,10 @@ export const Actions = ({ store }) => {
       {store.hasInterface("ground-truth") && !isBulkMode && <GroundTruth entity={entity} />}
 
       {!isViewAll && (
-        <Elem name="section">
+        <div className={cn("bottombar").elem("section").toClassName()}>
           <DynamicPreannotationsToggle />
           <AutoAcceptToggle />
-        </Elem>
+        </div>
       )}
     </Space>
   );
diff --git a/web/libs/editor/src/components/BottomBar/BottomBar.jsx b/web/libs/editor/src/components/BottomBar/BottomBar.jsx
index 1cb46a8b0a7f..6808bd1a9b3a 100644
--- a/web/libs/editor/src/components/BottomBar/BottomBar.jsx
+++ b/web/libs/editor/src/components/BottomBar/BottomBar.jsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { Actions } from "./Actions";
 import { Controls } from "./Controls";
 import "./BottomBar.scss";
@@ -13,17 +13,20 @@ export const BottomBar = observer(({ store }) => {
   const isViewAll = annotationStore?.viewingAll === true;
 
   return store && !isViewAll ? (
-    <Block name="bottombar" style={{ borderTop: isFF(FF_DEV_3873) && "1px solid rgba(0,0,0,0.1)" }}>
-      <Elem name="group">
+    <div
+      className={cn("bottombar").toClassName()}
+      style={{ borderTop: isFF(FF_DEV_3873) && "1px solid rgba(0,0,0,0.1)" }}
+    >
+      <div className={cn("bottombar").elem("group").toClassName()}>
         <Actions store={store} />
-      </Elem>
-      <Elem name="group">
+      </div>
+      <div className={cn("bottombar").elem("group").toClassName()}>
         {store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
-          <Elem name="section" mod={{ flat: true }}>
+          <div className={cn("bottombar").elem("section").mod({ flat: true }).toClassName()}>
             <Controls annotation={entity} />
-          </Elem>
+          </div>
         )}
-      </Elem>
-    </Block>
+      </div>
+    </div>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/BottomBar/Controls.tsx b/web/libs/editor/src/components/BottomBar/Controls.tsx
index 751f3fb8c7b9..316199e07f97 100644
--- a/web/libs/editor/src/components/BottomBar/Controls.tsx
+++ b/web/libs/editor/src/components/BottomBar/Controls.tsx
@@ -12,7 +12,7 @@ import { Button, ButtonGroup, type ButtonProps } from "@humansignal/ui";
 import { IconBan, IconChevronDown } from "@humansignal/icons";
 import { Dropdown } from "../../common/Dropdown/Dropdown";
 import type { CustomButtonType } from "../../stores/CustomButton";
-import { Block, cn, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { FF_REVIEWER_FLOW, isFF } from "../../utils/feature-flags";
 import { isDefined, toArray } from "../../utils/utilities";
 import {
@@ -147,7 +147,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
     }
 
     if (buttonsReplacement) {
-      return <Block name="controls">{buttons}</Block>;
+      return <div className={cn("controls").toClassName()}>{buttons}</div>;
     }
 
     if (isReview) {
@@ -180,9 +180,9 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
       buttons.push(<AcceptButton key="review-accept" disabled={disabled} history={history} store={store} />);
     } else if (annotation.skipped) {
       buttons.push(
-        <Elem name="skipped-info" key="skipped">
+        <div className={cn("controls").elem("skipped-info").toClassName()} key="skipped">
           <IconBan /> Was skipped
-        </Elem>,
+        </div>,
       );
       buttons.push(<UnskipButton key="unskip" disabled={disabled} store={store} />);
     } else {
@@ -237,7 +237,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
 
         buttons.push(
           <ButtonTooltip key="submit" title={title}>
-            <Elem name="tooltip-wrapper">
+            <div className={cn("controls").elem("tooltip-wrapper").toClassName()}>
               <ButtonGroup>
                 <Button
                   aria-label="Submit current annotation"
@@ -270,7 +270,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
                   </Dropdown.Trigger>
                 ) : null}
               </ButtonGroup>
-            </Elem>
+            </div>
           </ButtonTooltip>,
         );
       } else if ((userGenerate && sentUserGenerate) || (!userGenerate && store.hasInterface("update"))) {
@@ -315,6 +315,6 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
       }
     }
 
-    return <Block name="controls">{buttons}</Block>;
+    return <div className={cn("controls").toClassName()}>{buttons}</div>;
   }),
 );
diff --git a/web/libs/editor/src/components/BottomBar/CurrentTask.jsx b/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
index fc163ae284e7..0d46aa59cfe9 100644
--- a/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
+++ b/web/libs/editor/src/components/BottomBar/CurrentTask.jsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { guidGenerator } from "../../utils/unique";
 import { isDefined } from "../../utils/utilities";
 import { FF_LEAP_1173, FF_TASK_COUNT_FIX, isFF } from "../../utils/feature-flags";
@@ -23,23 +23,23 @@ export const CurrentTask = observer(({ store }) => {
     store.hasInterface("postpone");
 
   return (
-    <Elem name="section">
-      <Block name="current-task" mod={{ "with-history": historyEnabled }}>
-        <Elem name="task-id">
+    <div className={cn("bottombar").elem("section").toClassName()}>
+      <div className={cn("current-task").mod({ "with-history": historyEnabled }).toClassName()}>
+        <div className={cn("current-task").elem("task-id").toClassName()}>
           {store.task.id ?? guidGenerator()}
           {historyEnabled &&
             (isFF(FF_TASK_COUNT_FIX) ? (
-              <Elem name="task-count">
+              <div className={cn("current-task").elem("task-count").toClassName()}>
                 {store.queuePosition} of {store.queueTotal}
-              </Elem>
+              </div>
             ) : (
-              <Elem name="task-count">
+              <div className={cn("current-task").elem("task-count").toClassName()}>
                 {currentIndex} of {store.taskHistory.length}
-              </Elem>
+              </div>
             ))}
-        </Elem>
+        </div>
         {historyEnabled && (
-          <Elem name="history-controls">
+          <div className={cn("current-task").elem("history-controls").toClassName()}>
             <Button
               variant="neutral"
               data-testid="prev-task"
@@ -56,9 +56,9 @@ export const CurrentTask = observer(({ store }) => {
             >
               <IconChevronRight />
             </Button>
-          </Elem>
+          </div>
         )}
-      </Block>
-    </Elem>
+      </div>
+    </div>
   );
 });
diff --git a/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx b/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
index f425abbc6ed8..3a8985cf360c 100644
--- a/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
+++ b/web/libs/editor/src/components/CurrentEntity/AnnotationHistory.tsx
@@ -17,7 +17,7 @@ import {
 } from "@humansignal/icons";
 import { Tooltip, Userpic } from "@humansignal/ui";
 import { Space } from "../../common/Space/Space";
-import { Block, cn, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { humanDateDiff, userDisplayName } from "../../utils/utilities";
 import { EmptyState } from "../SidePanels/Components/EmptyState";
 import "./AnnotationHistory.scss";
@@ -78,17 +78,17 @@ const DraftState: FC<{
       date={annotation.draftSaved}
       extra={
         annotation.isDraftSaving ? (
-          <Elem name="saving">
-            <Elem name="spin" />
-          </Elem>
+          <div className={cn("annotation-history").elem("saving").toClassName()}>
+            <div className={cn("annotation-history").elem("spin").toClassName()} />
+          </div>
         ) : hasUnsavedChanges ? (
-          <Elem name="saving">
-            <Elem name="dot" />
-          </Elem>
+          <div className={cn("annotation-history").elem("saving").toClassName()}>
+            <div className={cn("annotation-history").elem("dot").toClassName()} />
+          </div>
         ) : hasChanges ? (
-          <Elem name="saving">
-            <Elem name="saved" component={IconCheck} />
-          </Elem>
+          <div className={cn("annotation-history").elem("saving").toClassName()}>
+            <IconCheck className={cn("annotation-history").elem("saved").toClassName()} />
+          </div>
         ) : null
       }
       inline={inline}
@@ -141,17 +141,17 @@ const AnnotationHistoryComponent: FC<any> = ({
   // If we should show empty state, render it
   if (shouldShowEmptyState) {
     return (
-      <Block name="annotation-history" mod={{ inline, empty: true }}>
+      <div className={cn("annotation-history").mod({ inline, empty: true }).toClassName()}>
         {sectionHeader && (
           <div className={`${cn("annotation-history").elem("section-head").toString()} sr-only`}>{sectionHeader}</div>
         )}
         {renderEmptyState ? renderEmptyState() : defaultEmptyState}
-      </Block>
+      </div>
     );
   }
 
   return (
-    <Block name="annotation-history" mod={{ inline }}>
+    <div className={cn("annotation-history").mod({ inline }).toClassName()}>
       {sectionHeader && (
         <div className={`${cn("annotation-history").elem("section-head").toString()} sr-only`}>{sectionHeader}</div>
       )}
@@ -194,7 +194,7 @@ const AnnotationHistoryComponent: FC<any> = ({
             />
           );
         })}
-    </Block>
+    </div>
   );
 };
 
@@ -264,44 +264,42 @@ const HistoryItemComponent: FC<{
   );
 
   return (
-    <Block name="history-item" mod={{ inline, selected, disabled }} onClick={handleClick}>
+    <div className={cn("history-item").mod({ inline, selected, disabled }).toClassName()} onClick={handleClick}>
       <Space spread size="medium" truncated>
         <Space size="small" truncated>
-          <Elem
-            tag={Userpic}
+          <Userpic
+            className={cn("history-item").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
             user={user}
-            name="userpic"
             showUsername
             username={isPrediction ? entity.createdBy : null}
-            mod={{ prediction: isPrediction }}
           >
             {isPrediction && <IconSparks style={{ width: 16, height: 16 }} />}
-          </Elem>
-          <Elem name="name" tag="span">
+          </Userpic>
+          <span className={cn("history-item").elem("name").toClassName()}>
             {isPrediction ? entity.createdBy : userDisplayName(user)}
-          </Elem>
+          </span>
         </Space>
 
         {!infoIsHidden && (
           <Space size="small">
-            {extra && <Elem name="date">{extra}</Elem>}
+            {extra && <div className={cn("history-item").elem("date").toClassName()}>{extra}</div>}
             {date && (
-              <Elem name="date">
+              <div className={cn("history-item").elem("date").toClassName()}>
                 <Tooltip alignment="top-right" title={new Date(date).toLocaleString()}>
                   <span>{humanDateDiff(date)}</span>
                 </Tooltip>
-              </Elem>
+              </div>
             )}
           </Space>
         )}
       </Space>
       {(reason || comment) && (
-        <Elem name="action" tag={Space} size="small">
+        <Space className={cn("history-item").elem("action").toClassName()} size="small">
           {acceptedState && <HistoryIcon type={acceptedState} />}
           <HistoryComment comment={comment} reason={reason} />
-        </Elem>
+        </Space>
       )}
-    </Block>
+    </div>
   );
 };
 
@@ -325,24 +323,26 @@ const HistoryComment: FC<{
   }, []);
 
   return (
-    <Elem name="comment" ref={commentRef} mod={{ collapsed }}>
-      <Elem name="comment-content" data-reason={`${reason}${comment ? ": " : ""}`}>
+    <div className={cn("history-item").elem("comment").mod({ collapsed }).toClassName()} ref={commentRef as any}>
+      <div
+        className={cn("history-item").elem("comment-content").toClassName()}
+        data-reason={`${reason}${comment ? ": " : ""}`}
+      >
         {comment}
-      </Elem>
+      </div>
 
       {collapsible && (
-        <Elem
-          name="collapse-comment"
-          mod={{ collapsed }}
-          onClick={(e: MouseEvent) => {
+        <div
+          className={cn("history-item").elem("collapse-comment").mod({ collapsed }).toClassName()}
+          onClick={(e: any) => {
             e.stopPropagation();
             setCollapsed((v) => !v);
           }}
         >
           {collapsed ? "Show more" : "Show less"}
-        </Elem>
+        </div>
       )}
-    </Elem>
+    </div>
   );
 };
 
@@ -376,7 +376,7 @@ const HistoryIcon: FC<{ type: HistoryItemType }> = ({ type }) => {
     }
   }, [type]);
 
-  return icon && <Elem name="history-icon">{icon}</Elem>;
+  return icon && <div className={cn("history-item").elem("history-icon").toClassName()}>{icon}</div>;
 };
 
 const HistoryItem = observer(HistoryItemComponent);
diff --git a/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx b/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
index a50a349a2673..09344171bfe7 100644
--- a/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
+++ b/web/libs/editor/src/components/CurrentEntity/GroundTruth.jsx
@@ -1,20 +1,19 @@
 import { observer } from "mobx-react";
 import { IconStar, IconStarOutline } from "@humansignal/icons";
 import { Button, Tooltip } from "@humansignal/ui";
-import { BemWithSpecificContext } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
 import "./GroundTruth.scss";
 
-const { Block, Elem } = BemWithSpecificContext();
-
 export const GroundTruth = observer(({ entity, disabled = false, size = "md" }) => {
   const title = entity.ground_truth ? "Unset this result as a ground truth" : "Set this result as a ground truth";
+  const IndicatorIcon = isFF(FF_DEV_3873) && !entity.ground_truth ? IconStarOutline : IconStar;
 
   return (
     !entity.skipped &&
     !entity.userGenerate &&
     entity.type !== "prediction" && (
-      <Block name="ground-truth" mod={{ disabled, size }}>
+      <div className={cn("ground-truth").mod({ disabled, size }).toClassName()}>
         <Tooltip alignment="top-left" title={title}>
           <Button
             size="small"
@@ -25,14 +24,15 @@ export const GroundTruth = observer(({ entity, disabled = false, size = "md" })
               entity.setGroundTruth(!entity.ground_truth);
             }}
           >
-            <Elem
-              name="indicator"
-              tag={isFF(FF_DEV_3873) && !entity.ground_truth ? IconStarOutline : IconStar}
-              mod={{ active: entity.ground_truth, dark: isFF(FF_DEV_3873) }}
+            <IndicatorIcon
+              className={cn("ground-truth")
+                .elem("indicator")
+                .mod({ active: entity.ground_truth, dark: isFF(FF_DEV_3873) })
+                .toClassName()}
             />
           </Button>
         </Tooltip>
-      </Block>
+      </div>
     )
   );
 });
diff --git a/web/libs/editor/src/components/Hint/Hint.tsx b/web/libs/editor/src/components/Hint/Hint.tsx
index 2bd08054b23a..b9feacc1ed15 100644
--- a/web/libs/editor/src/components/Hint/Hint.tsx
+++ b/web/libs/editor/src/components/Hint/Hint.tsx
@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from "react";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 
 import "./Hint.scss";
 
@@ -14,9 +14,9 @@ interface HintProps {
  */
 const Hint: FC<HintProps> = (props) => {
   return (
-    <Block name="hint" tag="sup" className={props.className} data-copy={props.copy} style={props.style}>
+    <sup className={cn("hint").mix(props.className).toClassName()} data-copy={props.copy} style={props.style}>
       {props.children}
-    </Block>
+    </sup>
   );
 };
 
diff --git a/web/libs/editor/src/components/ImageView/Image.jsx b/web/libs/editor/src/components/ImageView/Image.jsx
index ba33c11a8fd1..9f4e5a81dcc9 100644
--- a/web/libs/editor/src/components/ImageView/Image.jsx
+++ b/web/libs/editor/src/components/ImageView/Image.jsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { forwardRef, useCallback, useMemo } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import messages from "../../utils/messages";
 import { ErrorMessage } from "../ErrorMessage/ErrorMessage";
 import "./Image.scss";
@@ -41,7 +41,7 @@ export const Image = observer(
     );
 
     return (
-      <Block name="image" style={imageSize}>
+      <div className={cn("image").toClassName()} style={imageSize}>
         {overlay}
         <ImageProgress
           downloading={imageEntity.downloading}
@@ -60,17 +60,23 @@ export const Image = observer(
             imageTransform={imageTransform}
           />
         ) : null}
-      </Block>
+      </div>
     );
   }),
 );
 
 const ImageProgress = observer(({ downloading, progress, error, src, usedValue }) => {
   return downloading ? (
-    <Block name="image-progress">
-      <Elem name="message">Downloading image</Elem>
-      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001} />
-    </Block>
+    <div className={cn("image-progress").toClassName()}>
+      <div className={cn("image-progress").elem("message").toClassName()}>Downloading image</div>
+      <progress
+        className={cn("image-progress").elem("bar").toClassName()}
+        value={progress}
+        min="0"
+        max={1}
+        step={0.0001}
+      />
+    </div>
   ) : error ? (
     <ImageLoadingError src={src} value={usedValue} />
   ) : null;
diff --git a/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx b/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
index 0fe203f0fb47..1c614df526a4 100644
--- a/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
+++ b/web/libs/editor/src/components/NewTaxonomy/TaxonomySearch.tsx
@@ -9,7 +9,7 @@ import React, {
 } from "react";
 
 import "./TaxonomySearch.scss";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import type { AntTaxonomyItem } from "./NewTaxonomy";
 import debounce from "lodash/debounce";
 
@@ -116,10 +116,9 @@ const TaxonomySearch = React.forwardRef<TaxonomySearchRef, TaxonomySearchProps>(
   );
 
   return (
-    <Block
-      ref={inputRef}
+    <input
+      ref={inputRef as any}
       value={inputValue}
-      tag={"input"}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         setInputValue(e.target.value);
         handleSearch(e);
@@ -131,6 +130,7 @@ const TaxonomySearch = React.forwardRef<TaxonomySearchRef, TaxonomySearchProps>(
       placeholder={"Search"}
       data-testid={"taxonomy-search"}
       name={"taxonomy-search-input"}
+      className={cn("taxonomy-search-input").toClassName()}
     />
   );
 });
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
index dc4a8788f2cc..30774d9504ad 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx
@@ -1,6 +1,6 @@
 import { inject, observer } from "mobx-react";
 import type { FC } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { Comments as CommentsComponent } from "../../Comments/Comments";
 import { AnnotationHistory } from "../../CurrentEntity/AnnotationHistory";
 import { PanelBase, type PanelProps } from "../PanelBase";
@@ -34,9 +34,9 @@ const DetailsComponent: FC<DetailsPanelProps> = ({ currentEntity, regions }) =>
   const selectedRegions = regions.selection;
 
   return (
-    <Block name="details-tab">
+    <div className={cn("details-tab").toClassName()}>
       <Content selection={selectedRegions} currentEntity={currentEntity} />
-    </Block>
+    </div>
   );
 };
 
@@ -49,17 +49,17 @@ const CommentsTab: FC<any> = inject("store")(
     return (
       <>
         {store.hasInterface("annotations:comments") && store.commentStore.isCommentable && (
-          <Block name="comments-panel">
-            <Elem name="section-tab">
-              <Elem name="section-content">
+          <div className={cn("comments-panel").toClassName()}>
+            <div className={cn("comments-panel").elem("section-tab").toClassName()}>
+              <div className={cn("comments-panel").elem("section-content").toClassName()}>
                 <CommentsComponent
                   annotationStore={store.annotationStore}
                   commentStore={store.commentStore}
                   cacheKey={`task.${store.task.id}`}
                 />
-              </Elem>
-            </Elem>
-          </Block>
+              </div>
+            </div>
+          </div>
         )}
       </>
     );
@@ -73,17 +73,19 @@ const RelationsTab: FC<any> = inject("store")(
 
     return (
       <>
-        <Block name="relations">
-          <Elem name="section-tab">
+        <div className={cn("relations").toClassName()}>
+          <div className={cn("relations").elem("section-tab").toClassName()}>
             {hasRelations ? (
               <>
-                <Elem name="view-control">
-                  <Elem name="section-head">Relations ({relationStore.size})</Elem>
+                <div className={cn("relations").elem("view-control").toClassName()}>
+                  <div className={cn("relations").elem("section-head").toClassName()}>
+                    Relations ({relationStore.size})
+                  </div>
                   <RelationsControls relationStore={relationStore} />
-                </Elem>
-                <Elem name="section-content">
+                </div>
+                <div className={cn("relations").elem("section-content").toClassName()}>
                   <RelationsComponent relationStore={relationStore} />
-                </Elem>
+                </div>
               </>
             ) : (
               <EmptyState
@@ -97,8 +99,8 @@ const RelationsTab: FC<any> = inject("store")(
                 }}
               />
             )}
-          </Elem>
-        </Block>
+          </div>
+        </div>
       </>
     );
   }),
@@ -110,8 +112,8 @@ const HistoryTab: FC<any> = inject("store")(
 
     return (
       <>
-        <Block name="history">
-          <Elem name="section-tab">
+        <div className={cn("history").toClassName()}>
+          <div className={cn("history").elem("section-tab").toClassName()}>
             <AnnotationHistory
               inline
               enabled={showAnnotationHistory}
@@ -122,8 +124,8 @@ const HistoryTab: FC<any> = inject("store")(
                 </>
               }
             />
-          </Elem>
-        </Block>
+          </div>
+        </div>
       </>
     );
   }),
@@ -134,8 +136,8 @@ const InfoTab: FC<any> = inject("store")(
     const nothingSelected = !selection || selection.size === 0;
     return (
       <>
-        <Block name="info">
-          <Elem name="section-tab">
+        <div className={cn("info").toClassName()}>
+          <div className={cn("info").elem("section-tab").toClassName()}>
             {nothingSelected ? (
               <EmptyState
                 icon={<IconCursor width={24} height={24} />}
@@ -147,8 +149,8 @@ const InfoTab: FC<any> = inject("store")(
                 <RegionsPanel regions={selection} />
               </>
             )}
-          </Elem>
-        </Block>
+          </div>
+        </div>
       </>
     );
   }),
@@ -160,7 +162,7 @@ const GeneralPanel: FC<any> = inject("store")(
     const showAnnotationHistory = store.hasInterface("annotations:history");
     return (
       <>
-        <Elem name="section">
+        <div className={cn("details").elem("section").toClassName()}>
           <AnnotationHistory
             inline
             enabled={showAnnotationHistory}
@@ -171,27 +173,27 @@ const GeneralPanel: FC<any> = inject("store")(
               </>
             }
           />
-        </Elem>
-        <Elem name="section">
-          <Elem name="view-control">
-            <Elem name="section-head">Relations ({relationStore.size})</Elem>
+        </div>
+        <div className={cn("details").elem("section").toClassName()}>
+          <div className={cn("details").elem("view-control").toClassName()}>
+            <div className={cn("details").elem("section-head").toClassName()}>Relations ({relationStore.size})</div>
             <RelationsControls relationStore={relationStore} />
-          </Elem>
-          <Elem name="section-content">
+          </div>
+          <div className={cn("details").elem("section-content").toClassName()}>
             <RelationsComponent relationStore={relationStore} />
-          </Elem>
-        </Elem>
+          </div>
+        </div>
         {store.hasInterface("annotations:comments") && store.commentStore.isCommentable && (
-          <Elem name="section">
-            <Elem name="section-head">Comments</Elem>
-            <Elem name="section-content">
+          <div className={cn("details").elem("section").toClassName()}>
+            <div className={cn("details").elem("section-head").toClassName()}>Comments</div>
+            <div className={cn("details").elem("section-content").toClassName()}>
               <CommentsComponent
                 annotationStore={store.annotationStore}
                 commentStore={store.commentStore}
                 cacheKey={`task.${store.task.id}`}
               />
-            </Elem>
-          </Elem>
+            </div>
+          </div>
         )}
       </>
     );
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
index 15c20a2b4e5b..dd3f074884d3 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionDetails.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, useEffect, useMemo, useRef } from "react";
-import { Block, Elem, useBEM } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { RegionEditor } from "./RegionEditor";
 import "./RegionDetails.scss";
 import { Typography } from "@humansignal/ui";
@@ -48,53 +48,53 @@ export const ResultItem: FC<{ result: any }> = observer(({ result }) => {
   const content = useMemo(() => {
     if (type === "rating") {
       return (
-        <Elem name="result">
+        <div className={cn("region-meta").elem("result").toClassName()}>
           <Typography size="small">Rating: </Typography>
-          <Elem name="value">
+          <div className={cn("region-meta").elem("value").toClassName()}>
             <RatingResult mainValue={mainValue} />
-          </Elem>
-        </Elem>
+          </div>
+        </div>
       );
     }
     if (type === "textarea") {
       return (
-        <Elem name="result">
+        <div className={cn("region-meta").elem("result").toClassName()}>
           <Typography size="small">Text: </Typography>
-          <Elem name="value">
+          <div className={cn("region-meta").elem("value").toClassName()}>
             <TextResult mainValue={mainValue} />
-          </Elem>
-        </Elem>
+          </div>
+        </div>
       );
     }
     if (type === "choices") {
       return (
-        <Elem name="result">
+        <div className={cn("region-meta").elem("result").toClassName()}>
           <Typography size="small">Choices: </Typography>
-          <Elem name="value">
+          <div className={cn("region-meta").elem("value").toClassName()}>
             <ChoicesResult mainValue={mainValue} />
-          </Elem>
-        </Elem>
+          </div>
+        </div>
       );
     }
     if (type === "taxonomy") {
       return (
-        <Elem name="result">
+        <div className={cn("region-meta").elem("result").toClassName()}>
           <Typography size="small">Taxonomy: </Typography>
-          <Elem name="value">
+          <div className={cn("region-meta").elem("value").toClassName()}>
             <ChoicesResult mainValue={mainValue.map((v: string[]) => v.join("/"))} />
-          </Elem>
-        </Elem>
+          </div>
+        </div>
       );
     }
   }, [type, mainValue]);
 
-  return content ? <Block name="region-meta">{content}</Block> : null;
+  return content ? <div className={cn("region-meta").toClassName()}>{content}</div> : null;
 });
 
 export const RegionDetailsMain: FC<{ region: any }> = observer(({ region }) => {
   return (
     <>
-      <Elem name="result">
+      <div className={cn("detailed-region").elem("result").toClassName()}>
         {(region?.results as any[])
           // hide per-regions stored only in this session just for a better UX
           .filter((res) => res.canBeSubmitted)
@@ -104,15 +104,15 @@ export const RegionDetailsMain: FC<{ region: any }> = observer(({ region }) => {
         {/* @todo dirty hack to not duplicate text for OCR regions */}
         {/* @todo should be converted into universal solution */}
         {region?.text && !region?.ocrtext ? (
-          <Block name="region-meta">
-            <Elem name="item">
-              <Elem name="content" mod={{ type: "text" }}>
+          <div className={cn("region-meta").toClassName()}>
+            <div className={cn("region-meta").elem("item").toClassName()}>
+              <div className={cn("region-meta").elem("content").mod({ type: "text" }).toClassName()}>
                 {region.text.replace(/\\n/g, "\n")}
-              </Elem>
-            </Elem>
-          </Block>
+              </div>
+            </div>
+          </div>
         ) : null}
-      </Elem>
+      </div>
       <RegionEditor region={region} />
     </>
   );
@@ -127,7 +127,6 @@ type RegionDetailsMetaProps = {
 
 export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
   ({ region, editMode, cancelEditMode, enterEditMode }) => {
-    const bem = useBEM();
     const input = useRef<HTMLTextAreaElement | null>();
 
     const saveMeta = (value: string) => {
@@ -149,7 +148,7 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
           <textarea
             ref={(el) => (input.current = el)}
             placeholder="Meta"
-            className={bem.elem("meta-text").toClassName()}
+            className={cn("detailed-region").elem("meta-text").toClassName()}
             value={region.meta.text}
             onChange={(e) => saveMeta(e.target.value)}
             onBlur={(e) => {
@@ -166,9 +165,9 @@ export const RegionDetailsMeta: FC<RegionDetailsMetaProps> = observer(
           />
         ) : (
           region.meta?.text && (
-            <Elem name="meta-text" onClick={() => enterEditMode?.()}>
+            <div className={cn("detailed-region").elem("meta-text").toClassName()} onClick={() => enterEditMode?.()}>
               {region.meta?.text}
-            </Elem>
+            </div>
           )
         )}
       </>
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
index c9d461f01053..f87fdd54a52a 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionEditor.tsx
@@ -14,7 +14,7 @@ import {
 } from "react";
 import { IconPropertyAngle } from "@humansignal/icons";
 import { Checkbox, Select } from "@humansignal/ui";
-import { Block, Elem, useBEM } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { TimeDurationControl } from "../../TimeDurationControl/TimeDurationControl";
 import { TimelineRegionEditor } from "./TimelineRegionEditor";
 import "./RegionEditor.scss";
@@ -57,9 +57,9 @@ const RegionEditorComponent: FC<RegionEditorProps> = ({ region }) => {
   const Component = isTimelineRegion ? TimelineRegionEditor : isAudioRegion ? AudioRegionProperties : RegionProperties;
 
   return (
-    <Block name="region-editor" mod={{ disabled: region.isReadOnly() }}>
+    <div className={cn("region-editor").mod({ disabled: region.isReadOnly() }).toClassName()}>
       <Component region={region} />
-    </Block>
+    </div>
   );
 };
 
@@ -67,7 +67,7 @@ const RegionProperties = ({ region }: RegionEditorProps) => {
   const fields = region.editableFields ?? [];
 
   return (
-    <Elem name="wrapper">
+    <div className={cn("region-editor").elem("wrapper").toClassName()}>
       {region.editorEnabled &&
         fields.map((field, i) => {
           return (
@@ -79,7 +79,7 @@ const RegionProperties = ({ region }: RegionEditorProps) => {
             />
           );
         })}
-    </Elem>
+    </div>
   );
 };
 
@@ -93,7 +93,7 @@ const AudioRegionProperties = observer(({ region }: { region: any }) => {
   };
 
   return (
-    <Elem name="wrapper-time-control">
+    <div className={cn("region-editor").elem("wrapper-time-control").toClassName()}>
       <TimeDurationControl
         startTime={region.start}
         endTime={region.end}
@@ -105,7 +105,7 @@ const AudioRegionProperties = observer(({ region }: { region: any }) => {
         showLabels
         showDuration
       />
-    </Elem>
+    </div>
   );
 });
 
@@ -116,7 +116,6 @@ interface RegionPropertyProps {
 }
 
 const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) => {
-  const block = useBEM();
   const [value, setValue] = useState(region.getProperty(property));
 
   const propertyType = useMemo(() => {
@@ -182,10 +181,10 @@ const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) =>
   }, [region]);
 
   return (
-    <Elem name="property" mod={{ text: isString }} tag="label">
+    <label className={cn("region-editor").elem("property").mod({ text: isString }).toClassName()}>
       {isBoolean ? (
         <Checkbox
-          className={block?.elem("input").toClassName()}
+          className={cn("region-editor").elem("input").toClassName()}
           checked={value}
           onChange={(e) => onChangeHandler(e.target.checked)}
         />
@@ -202,12 +201,12 @@ const RegionProperty: FC<RegionPropertyProps> = ({ property, label, region }) =>
         <Select
           value={value}
           onChange={(val) => onChangeHandler(val)}
-          triggerClassName={block?.elem("select").toClassName()}
+          triggerClassName={cn("region-editor").elem("select").toClassName()}
           options={options}
         />
       ) : null}
       <PropertyLabel label={label} />
-    </Elem>
+    </label>
   );
 };
 
@@ -217,7 +216,6 @@ interface RegionInputProps extends InputHTMLAttributes<HTMLInputElement | HTMLTe
 }
 
 const RegionInput: FC<RegionInputProps> = ({ onChange: onChangeValue, type, value, step, ...props }) => {
-  const block = useBEM();
   const [currentValue, setValue] = useState(value);
 
   const updateValue = useCallback(
@@ -286,7 +284,7 @@ const RegionInput: FC<RegionInputProps> = ({ onChange: onChangeValue, type, valu
   return (
     <Tag
       {...props}
-      className={block?.elem("input").toClassName()}
+      className={cn("region-editor").elem("input").toClassName()}
       type="text"
       step={step}
       onChange={onChangeHandler}
@@ -309,9 +307,7 @@ const PropertyLabel: FC<{ label: string }> = ({ label }) => {
   }, [label]);
 
   return (
-    <Elem name="text" tag="span">
-      {IconComponent ? <IconComponent /> : label}
-    </Elem>
+    <span className={cn("region-editor").elem("text").toClassName()}>{IconComponent ? <IconComponent /> : label}</span>
   );
 };
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
index 5ed785165709..bbb3611bad23 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionItem.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { type FC, forwardRef, useMemo, useState } from "react";
 import { WithHotkey } from "../../../common/Hotkey/WithHotkey";
 import { CREATE_RELATION_MODE } from "../../../stores/Annotation/LinkingModes";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { NodeIcon } from "../../Node/Node";
 import { LockButton } from "../Components/LockButton";
 import { RegionLabels } from "./RegionLabels";
@@ -48,31 +48,31 @@ export const RegionItem: FC<RegionItemProps> = observer(
     }, [region.background, region.style]);
 
     return (
-      <Block name="detailed-region" mod={{ compact }} data-testid="detailed-region">
-        <Elem name="head" style={{ color: color.css() }}>
-          <Elem name="title">
-            <Elem name="icon">
+      <div className={cn("detailed-region").mod({ compact }).toClassName()} data-testid="detailed-region">
+        <div className={cn("detailed-region").elem("head").toClassName()} style={{ color: color.css() }}>
+          <div className={cn("detailed-region").elem("title").toClassName()}>
+            <div className={cn("detailed-region").elem("icon").toClassName()}>
               <NodeIcon node={region} />
-            </Elem>
-            <Elem name="index">
-              <Elem tag="span" name="index_value">
-                {region.region_index}
-              </Elem>
-            </Elem>
+            </div>
+            <div className={cn("detailed-region").elem("index").toClassName()}>
+              <span className={cn("detailed-region").elem("index_value").toClassName()}>{region.region_index}</span>
+            </div>
             <RegionLabels region={region} />
-          </Elem>
+          </div>
           {withIds && <span>{region.cleanId}</span>}
-        </Elem>
+        </div>
         {MainDetails && (
-          <Elem name="content">
+          <div className={cn("detailed-region").elem("content").toClassName()}>
             <MainDetails region={region} />
-          </Elem>
+          </div>
         )}
         {region.isDrawing && (
-          <Elem name="warning">
+          <div className={cn("detailed-region").elem("warning").toClassName()}>
             <IconWarning />
-            <Elem name="warning-text">Incomplete {region.type?.replace("region", "") ?? "region"}</Elem>
-          </Elem>
+            <div className={cn("detailed-region").elem("warning-text").toClassName()}>
+              Incomplete {region.type?.replace("region", "") ?? "region"}
+            </div>
+          </div>
         )}
         {withActions && (
           <RegionAction
@@ -84,16 +84,16 @@ export const RegionItem: FC<RegionItemProps> = observer(
           />
         )}
         {MetaDetails && (
-          <Elem name="content">
+          <div className={cn("detailed-region").elem("content").toClassName()}>
             <MetaDetails
               region={region}
               editMode={editMode}
               enterEditMode={() => setEditMode(true)}
               cancelEditMode={() => setEditMode(false)}
             />
-          </Elem>
+          </div>
         )}
-      </Block>
+      </div>
     );
   },
 );
@@ -138,11 +138,11 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
   );
 
   return (
-    <Block name="region-actions">
-      <Elem name="group" mod={{ align: "left" }}>
+    <div className={cn("region-actions").toClassName()}>
+      <div className={cn("region-actions").elem("group").mod({ align: "left" }).toClassName()}>
         {!region.isReadOnly() && entityButtons}
-      </Elem>
-      <Elem name="group" mod={{ align: "right" }}>
+      </div>
+      <div className={cn("region-actions").elem("group").mod({ align: "right" }).toClassName()}>
         <LockButton
           item={region}
           annotation={region?.annotation}
@@ -176,8 +176,8 @@ const RegionAction: FC<any> = observer(({ region, annotation, editMode, onEditMo
         >
           <IconTrash />
         </RegionActionButton>
-      </Elem>
-    </Block>
+      </div>
+    </div>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
index 1e23fc3c0660..7acf2b2a1c2f 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RegionLabels.tsx
@@ -1,16 +1,16 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 export const RegionLabels: FC<{ region: LSFRegion }> = observer(({ region }) => {
   const labelsInResults = region.labelings.map((result: any) => result.selectedLabels || []);
   const labels: any[] = [].concat(...labelsInResults);
 
-  if (!labels.length) return <Block name="labels-list">{region.noLabelView || "No label"}</Block>;
+  if (!labels.length) return <div className={cn("labels-list").toClassName()}>{region.noLabelView || "No label"}</div>;
 
   return (
-    <Block name="labels-list">
+    <div className={cn("labels-list").toClassName()}>
       {labels.map((label, index) => {
         const color = label.background || "#000000";
 
@@ -21,6 +21,6 @@ export const RegionLabels: FC<{ region: LSFRegion }> = observer(({ region }) =>
           </span>,
         ];
       })}
-    </Block>
+    </div>
   );
 });
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
index 1ee4e69f6d74..3314366f0eb7 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx
@@ -10,7 +10,7 @@ import {
 import { Button, Select } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { type FC, useCallback, useMemo, useState } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { wrapArray } from "../../../utils/utilities";
 import { RegionItem } from "./RegionItem";
 import "./Relations.scss";
@@ -19,9 +19,9 @@ const RealtionsComponent: FC<any> = ({ relationStore }) => {
   const relations = relationStore.orderedRelations;
 
   return (
-    <Block name="relations">
+    <div className={cn("relations").toClassName()}>
       <RelationsList relations={relations} />
-    </Block>
+    </div>
   );
 };
 
@@ -76,17 +76,21 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
   // const;
 
   return (
-    <Elem name="item" mod={{ hidden: !relation.visible }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      <Elem name="content">
-        <Elem name="icon" onClick={relation.rotateDirection}>
-          <Elem name="direction">{directionIcon}</Elem>
-        </Elem>
-        <Elem name="nodes">
+    <div
+      className={cn("relations").elem("item").mod({ hidden: !relation.visible }).toClassName()}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className={cn("relations").elem("content").toClassName()}>
+        <div className={cn("relations").elem("icon").toClassName()} onClick={relation.rotateDirection}>
+          <div className={cn("relations").elem("direction").toClassName()}>{directionIcon}</div>
+        </div>
+        <div className={cn("relations").elem("nodes").toClassName()}>
           <RegionItem compact withActions={false} withIds={false} region={relation.node1} />
           <RegionItem compact withActions={false} withIds={false} region={relation.node2} />
-        </Elem>
-        <Elem name="actions">
-          <Elem name="action">
+        </div>
+        <div className={cn("relations").elem("actions").toClassName()}>
+          <div className={cn("relations").elem("action").toClassName()}>
             {(hovered || relation.showMeta) && relation.hasRelations && (
               <Button
                 primary={relation.showMeta}
@@ -98,8 +102,8 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 <IconMenu />
               </Button>
             )}
-          </Elem>
-          <Elem name="action">
+          </div>
+          <div className={cn("relations").elem("action").toClassName()}>
             {(hovered || !relation.visible) && (
               <Button
                 variant="neutral"
@@ -116,8 +120,8 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 )}
               </Button>
             )}
-          </Elem>
-          <Elem name="action">
+          </div>
+          <div className={cn("relations").elem("action").toClassName()}>
             {hovered && (
               <Button
                 variant="negative"
@@ -134,11 +138,11 @@ const RelationItem: FC<{ relation: any }> = observer(({ relation }) => {
                 <IconTrash />
               </Button>
             )}
-          </Elem>
-        </Elem>
-      </Elem>
+          </div>
+        </div>
+      </div>
       {relation.showMeta && <RelationMeta relation={relation} />}
-    </Elem>
+    </div>
   );
 });
 
@@ -168,7 +172,7 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
   );
 
   return (
-    <Block name="relation-meta">
+    <div className={cn("relation-meta").toClassName()}>
       <Select
         multiple={selectionMode}
         style={{ width: "100%" }}
@@ -177,7 +181,7 @@ const RelationMeta: FC<any> = observer(({ relation }) => {
         onChange={onChange}
         options={options}
       />
-    </Block>
+    </div>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
index 6333f985752e..f0cfe904bfa1 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/RelationsControls.tsx
@@ -1,16 +1,16 @@
 import { Button } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import { type FC, useCallback } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import "./RelationsControls.scss";
 import { IconOutlinerEyeClosed, IconOutlinerEyeOpened, IconSortDown, IconSortUp } from "@humansignal/icons";
 
 const RelationsControlsComponent: FC<any> = ({ relationStore }) => {
   return (
-    <Block name="relation-controls">
+    <div className={cn("relation-controls").toClassName()}>
       <ToggleRelationsVisibilityButton relationStore={relationStore} />
       <ToggleRelationsOrderButton relationStore={relationStore} />
-    </Block>
+    </div>
   );
 };
 
@@ -31,15 +31,16 @@ const ToggleRelationsVisibilityButton = observer<FC<ToggleRelationsVisibilityBut
   const isDisabled = !relationStore?.relations?.length;
   const isAllHidden = !(!isDisabled && relationStore.isAllHidden);
 
+  // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
+  // but this is clearly bad CSS usage.
   return (
-    <Elem
-      tag={Button}
+    <Button
+      className={cn("relation-controls").mod({ hidden: isAllHidden }).toClassName()}
       variant="neutral"
       look="string"
       size="small"
       disabled={isDisabled}
       onClick={toggleRelationsVisibility}
-      mod={{ hidden: isAllHidden }}
       aria-label={isAllHidden ? "Show all" : "Hide all"}
       icon={
         isAllHidden ? (
@@ -71,15 +72,16 @@ const ToggleRelationsOrderButton = observer<FC<ToggleRelationsOrderButtonProps>>
   const isDisabled = !relationStore?.relations?.length;
   const isAsc = relationStore.order === "asc";
 
+  // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
+  // but this is clearly bad CSS usage.
   return (
-    <Elem
-      tag={Button}
+    <Button
+      className={cn("relation-controls").mod({ order: relationStore.order }).toClassName()}
       variant="neutral"
       look="string"
       size="small"
       onClick={toggleRelationsOrder}
       disabled={isDisabled}
-      mod={{ order: relationStore.order }}
       aria-label={isAsc ? "Order by oldest" : "Order by newest"}
       icon={isAsc ? <IconSortUp /> : <IconSortDown />}
       tooltip={isAsc ? "Order by oldest" : "Order by newest"}
diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx b/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
index acf946d9b5a7..dffccc142833 100644
--- a/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
+++ b/web/libs/editor/src/components/SidePanels/DetailsPanel/__tests__/DetailsPanel.test.tsx
@@ -4,16 +4,24 @@ import { Relations, Info } from "../DetailsPanel";
 
 // Mock the dependencies
 jest.mock("../../../../utils/bem", () => ({
-  Block: ({ children, ...props }: any) => (
-    <div data-testid="block" {...props}>
-      {children}
-    </div>
-  ),
-  Elem: ({ children, ...props }: any) => (
-    <div data-testid="elem" {...props}>
-      {children}
-    </div>
-  ),
+  cn: (block: string) => ({
+    elem: (elem: string) => ({
+      toClassName: () => `dm-${block}__${elem}`,
+      mod: (mods: any) => ({
+        toClassName: () => `dm-${block}__${elem}`,
+      }),
+    }),
+    mod: (mods: any) => ({
+      toClassName: () => `dm-${block}`,
+      mix: (...args: any[]) => ({
+        toClassName: () => `dm-${block}`,
+      }),
+    }),
+    toClassName: () => `dm-${block}`,
+    mix: (...args: any[]) => ({
+      toClassName: () => `dm-${block}`,
+    }),
+  }),
 }));
 
 jest.mock("../../../Comments/Comments", () => ({
@@ -148,9 +156,7 @@ describe("DetailsPanel", () => {
       it("does not render relations count header when no relations exist", () => {
         render(<Relations currentEntity={mockCurrentEntityWithoutRelations} />);
 
-        const allElems = screen.getAllByTestId("elem");
-        const relationsCountElem = allElems.find((elem) => elem.textContent?.includes("Relations ("));
-        expect(relationsCountElem).toBeUndefined();
+        expect(screen.queryByText(/Relations \(/)).not.toBeInTheDocument();
       });
     });
 
@@ -171,9 +177,7 @@ describe("DetailsPanel", () => {
       it("renders relations count in header when relations exist", () => {
         render(<Relations currentEntity={mockCurrentEntityWithRelations} />);
 
-        const allElems = screen.getAllByTestId("elem");
-        const relationsCountElem = allElems.find((elem) => elem.textContent === "Relations (3)");
-        expect(relationsCountElem).toBeInTheDocument();
+        expect(screen.getByText("Relations (3)")).toBeInTheDocument();
       });
     });
   });
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
index 968ff744f9d0..88a1f85c20f7 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { PanelBase, type PanelProps } from "../PanelBase";
 import { OutlinerTree } from "./OutlinerTree";
 import { ViewControls } from "./ViewControls";
@@ -79,7 +79,11 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
   );
 
   return (
-    <Block name="outliner" mix={OutlinerFFClasses}>
+    <div
+      className={cn("outliner")
+        .mix(...OutlinerFFClasses)
+        .toClassName()}
+    >
       <ViewControls
         ordering={regions.sort}
         regions={regions}
@@ -88,7 +92,7 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions }) => {
         onGroupingChange={onGroupingChange}
       />
       <OutlinerTreeComponent regions={regions} />
-    </Block>
+    </div>
   );
 };
 
@@ -121,24 +125,28 @@ const OutlinerTreeComponent: FC<OutlinerTreeComponentProps> = observer(({ region
   return (
     <>
       {allRegionsHidden ? (
-        <Block name="filters-info">
+        <div className={cn("filters-info").toClassName()}>
           <IconInfo width={21} height={20} />
-          <Elem name="filters-title">All regions hidden</Elem>
-          <Elem name="filters-description">Adjust or remove the filters to view</Elem>
-        </Block>
+          <div className={cn("filters-info").elem("filters-title").toClassName()}>All regions hidden</div>
+          <div className={cn("filters-info").elem("filters-description").toClassName()}>
+            Adjust or remove the filters to view
+          </div>
+        </div>
       ) : regions?.regions?.length > 0 ? (
         <>
           <OutlinerTree
             regions={regions}
             footer={
               hiddenRegions > 0 && (
-                <Block name="filters-info">
+                <div className={cn("filters-info").toClassName()}>
                   <IconInfo width={21} height={20} />
-                  <Elem name="filters-title">
+                  <div className={cn("filters-info").elem("filters-title").toClassName()}>
                     There {hiddenRegions === 1 ? "is" : "are"} {hiddenRegions} hidden region{hiddenRegions > 1 && "s"}
-                  </Elem>
-                  <Elem name="filters-description">Adjust or remove filters to view</Elem>
-                </Block>
+                  </div>
+                  <div className={cn("filters-info").elem("filters-description").toClassName()}>
+                    Adjust or remove filters to view
+                  </div>
+                </div>
               )
             }
           />
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
index 01a18f05691b..37cd9cdb189f 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
@@ -17,7 +17,7 @@ import {
 } from "react";
 import Registry from "../../../core/Registry";
 import { PER_REGION_MODES } from "../../../mixins/PerRegionModes";
-import { Block, cn, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { FF_DEV_2755, FF_DEV_3873, FF_PER_FIELD_COMMENTS, isFF } from "../../../utils/feature-flags";
 import { flatten, isDefined, isMacOS } from "../../../utils/utilities";
 import { NodeIcon } from "../../Node/Node";
@@ -166,7 +166,7 @@ const OutlinerInnerTreeComponent: FC<OutlinerInnerTreeProps> = observer(({ regio
   }
 
   return (
-    <Block name="outliner-tree" ref={setRef}>
+    <div className={cn("outliner-tree").toClassName()} ref={setRef}>
       {!!height && (
         <Tree
           key={regions.group}
@@ -194,7 +194,7 @@ const OutlinerInnerTreeComponent: FC<OutlinerInnerTreeProps> = observer(({ regio
             : {})}
         />
       )}
-    </Block>
+    </div>
   );
 });
 
@@ -410,20 +410,22 @@ const RootTitle: FC<any> = observer(
     );
 
     return (
-      <Block name="outliner-item">
-        <Elem name="content">
-          {!props.isGroup && <Elem name="index">{props.idx + 1}</Elem>}
-          <Elem name="title">
+      <div className={cn("outliner-item").toClassName()}>
+        <div className={cn("outliner-item").elem("content").toClassName()}>
+          {!props.isGroup && <div className={cn("outliner-item").elem("index").toClassName()}>{props.idx + 1}</div>}
+          <div className={cn("outliner-item").elem("title").toClassName()}>
             {label}
-            {item?.text && <Elem name="text">{item.text.replace(/\\n/g, "\n")}</Elem>}
+            {item?.text && (
+              <div className={cn("outliner-item").elem("text").toClassName()}>{item.text.replace(/\\n/g, "\n")}</div>
+            )}
             {(item?.isDrawing || item?.incomplete) && (
-              <Elem tag="span" name="incomplete">
+              <span className={cn("outliner-item").elem("incomplete").toClassName()}>
                 <Tooltip title={`Incomplete ${item.type?.replace("region", "") ?? "region"}`}>
                   <IconWarning />
                 </Tooltip>
-              </Elem>
+              </span>
             )}
-          </Elem>
+          </div>
           {item?.hideable !== false && (
             <RegionControls
               item={item}
@@ -435,10 +437,10 @@ const RootTitle: FC<any> = observer(
               toggleCollapsed={toggleCollapsed}
             />
           )}
-        </Elem>
+        </div>
 
         {!collapsed && hasControls && isArea && (
-          <Elem name="ocr">
+          <div className={cn("outliner-item").elem("ocr").toClassName()}>
             <RegionItemDesc
               item={item}
               controls={controls}
@@ -446,9 +448,9 @@ const RootTitle: FC<any> = observer(
               setCollapsed={setCollapsed}
               selected={props.selected}
             />
-          </Elem>
+          </div>
         )}
-      </Block>
+      </div>
     );
   },
 );
@@ -506,38 +508,43 @@ const RegionControls: FC<RegionControlsProps> = injector(
     }, []);
 
     return (
-      <Elem name="controls" mod={{ withControls: hasControls, newUI: isFF(FF_DEV_3873) }}>
+      <div
+        className={cn("outliner-item")
+          .elem("controls")
+          .mod({ withControls: hasControls, newUI: isFF(FF_DEV_3873) })
+          .toClassName()}
+      >
         {isFF(FF_DEV_3873) ? (
           <Tooltip title={"Confidence Score"}>
-            <Elem name="control-wrapper">
-              <Elem name="control" mod={{ type: "predict" }}>
+            <div className={cn("outliner-item").elem("control-wrapper").toClassName()}>
+              <div className={cn("outliner-item").elem("control").mod({ type: "predict" }).toClassName()}>
                 {item?.origin === "prediction" && <IconSparks style={{ width: 18, height: 18 }} />}
-              </Elem>
-              <Elem name="control" mod={{ type: "score" }}>
+              </div>
+              <div className={cn("outliner-item").elem("control").mod({ type: "score" }).toClassName()}>
                 {isDefined(item?.score) && item.score.toFixed(2)}
-              </Elem>
-            </Elem>
+              </div>
+            </div>
           </Tooltip>
         ) : (
           <>
-            <Elem name="control" mod={{ type: "score" }}>
+            <div className={cn("outliner-item").elem("control").mod({ type: "score" }).toClassName()}>
               {isDefined(item?.score) && item.score.toFixed(2)}
-            </Elem>
-            <Elem name="control" mod={{ type: "dirty" }}>
+            </div>
+            <div className={cn("outliner-item").elem("control").mod({ type: "dirty" }).toClassName()}>
               {/* dirtyness is not implemented yet */}
-            </Elem>
-            <Elem name="control" mod={{ type: "predict" }}>
+            </div>
+            <div className={cn("outliner-item").elem("control").mod({ type: "predict" }).toClassName()}>
               {item?.origin === "prediction" && <IconSparks style={{ width: 18, height: 18 }} />}
-            </Elem>
+            </div>
           </>
         )}
-        <Elem name={"wrapper"}>
+        <div className={cn("outliner-item").elem("wrapper").toClassName()}>
           {store.hasInterface("annotations:copy-link") && isDefined(item?.annotation?.pk) && (
-            <Elem name="control" mod={{ type: "menu" }}>
+            <div className={cn("outliner-item").elem("control").mod({ type: "menu" }).toClassName()}>
               <RegionContextMenu item={item} />
-            </Elem>
+            </div>
           )}
-          <Elem name="control" mod={{ type: "lock" }}>
+          <div className={cn("outliner-item").elem("control").mod({ type: "lock" }).toClassName()}>
             <LockButton
               item={item}
               annotation={item?.annotation}
@@ -548,8 +555,8 @@ const RegionControls: FC<RegionControlsProps> = injector(
               look="string"
               tooltip={item?.locked ? "Unlock Region" : "Lock Region"}
             />
-          </Elem>
-          <Elem name="control" mod={{ type: "visibility" }}>
+          </div>
+          <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
             {isFF(FF_DEV_3873) ? (
               <RegionControlButton
                 variant="neutral"
@@ -572,9 +579,9 @@ const RegionControls: FC<RegionControlsProps> = injector(
                 )}
               </RegionControlButton>
             )}
-          </Elem>
+          </div>
           {hasControls && (
-            <Elem name="control" mod={{ type: "visibility" }}>
+            <div className={cn("outliner-item").elem("control").mod({ type: "visibility" }).toClassName()}>
               <RegionControlButton variant="neutral" look="string" onClick={onToggleCollapsed}>
                 <IconChevronLeft
                   style={{
@@ -582,10 +589,10 @@ const RegionControls: FC<RegionControlsProps> = injector(
                   }}
                 />
               </RegionControlButton>
-            </Elem>
+            </div>
           )}
-        </Elem>
-      </Elem>
+        </div>
+      </div>
     );
   }),
 );
@@ -613,13 +620,14 @@ const RegionItemDesc: FC<RegionItemOCSProps> = observer(({ item, collapsed, setC
   );
 
   return (
-    <Block
-      name="ocr"
-      mod={{ collapsed, empty: !(controls?.length > 0) }}
+    <div
+      className={cn("ocr")
+        .mod({ collapsed, empty: !(controls?.length > 0) })
+        .toClassName()}
       onClick={onClick}
       onDragStart={(e: any) => e.stopPropagation()}
     >
-      <Elem name="controls">
+      <div className={cn("ocr").elem("controls").toClassName()}>
         {controls.map((tag, idx) => {
           const View = Registry.getPerRegionView(tag.type, PER_REGION_MODES.REGION_LIST);
           const color = item.getOneColor();
@@ -638,8 +646,8 @@ const RegionItemDesc: FC<RegionItemOCSProps> = observer(({ item, collapsed, setC
             />
           ) : null;
         })}
-      </Elem>
-    </Block>
+      </div>
+    </div>
   );
 });
 
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
index d2f669012b24..047a890e568e 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/RegionLabel.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 export type RegionLabelProps = {
   item: any;
@@ -18,18 +18,20 @@ export const RegionLabel = observer(({ item }: RegionLabelProps) => {
     const labels: any[] = [].concat(...labelsInResults);
 
     return (
-      <Block name="labels-list">
+      <div className={cn("labels-list").toClassName()}>
         {labels.map((label, index) => {
           const color = label.background || "#000000";
 
           return [
             index ? ", " : null,
-            <Elem key={label.id} style={{ color }}>
+            // This comes from an Elem tag that was set without a name. The CSS was fixed to make it work,
+            // but this is clearly bad CSS usage.
+            <div key={label.id} className={cn("labels-list").toClassName()} style={{ color }}>
               {label.value || "No label"}
-            </Elem>,
+            </div>,
           ];
         })}
-      </Block>
+      </div>
     );
   }
   if (type.includes("tool")) {
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
index 69277ca75842..4570bf0c9ede 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx
@@ -16,14 +16,12 @@ import { Dropdown } from "../../../common/Dropdown/Dropdown";
 // eslint-disable-next-line
 // @ts-ignore
 import { Menu } from "../../../common/Menu/Menu";
-import { BemWithSpecificContext } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { SidePanelsContext } from "../SidePanelsContext";
 import "./ViewControls.scss";
 import { observer } from "mobx-react";
 import { FF_DEV_3873, isFF } from "../../../utils/feature-flags";
 
-const { Block, Elem } = BemWithSpecificContext();
-
 export type GroupingOptions = "manual" | "label" | "type";
 
 export type OrderingOptions = "score" | "date" | "mediaStartTime";
@@ -145,7 +143,7 @@ export const ViewControls: FC<ViewControlsProps> = observer(
     const renderOrderingDirectionIcon = orderingDirection === "asc" ? <IconSortUp /> : <IconSortDown />;
 
     return (
-      <Block name="view-controls" mod={{ collapsed: context.locked }}>
+      <div className={cn("view-controls").mod({ collapsed: context.locked }).toClassName()}>
         <Grouping
           value={grouping}
           options={["manual", "type", "label"]}
@@ -153,7 +151,7 @@ export const ViewControls: FC<ViewControlsProps> = observer(
           readableValueForKey={getGroupingLabels}
         />
         {grouping === "manual" && (
-          <Elem name="sort">
+          <div className={cn("view-controls").elem("sort").toClassName()}>
             <Grouping
               value={ordering}
               direction={orderingDirection}
@@ -164,10 +162,10 @@ export const ViewControls: FC<ViewControlsProps> = observer(
               extraIcon={renderOrderingDirectionIcon}
               width={230}
             />
-          </Elem>
+          </div>
         )}
         <ToggleRegionsVisibilityButton regions={regions} />
-      </Block>
+      </div>
     );
   },
 );
@@ -267,10 +265,10 @@ interface GroupingMenuItemProps<T extends string> {
 const GroupingMenuItem = <T extends string>({ value, name, label, direction, onChange }: GroupingMenuItemProps<T>) => {
   return (
     <Menu.Item name={name} onClick={() => onChange(name)}>
-      <Elem name="label">
+      <div className={cn("view-controls").elem("label").toClassName()}>
         {label.label}
         <DirectionIndicator direction={direction} name={name} value={value} />
-      </Elem>
+      </div>
     </Menu.Item>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx b/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
index ad8da77f7f23..7da86efed30a 100644
--- a/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
+++ b/web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx
@@ -3,16 +3,24 @@ import { OutlinerPanel } from "../OutlinerPanel";
 
 // Mock the dependencies
 jest.mock("../../../../utils/bem", () => ({
-  Block: ({ children, ...props }: any) => (
-    <div data-testid="block" {...props}>
-      {children}
-    </div>
-  ),
-  Elem: ({ children, ...props }: any) => (
-    <div data-testid="elem" {...props}>
-      {children}
-    </div>
-  ),
+  cn: (block: string) => ({
+    elem: (elem: string) => ({
+      toClassName: () => `dm-${block}__${elem}`,
+      mod: (mods: any) => ({
+        toClassName: () => `dm-${block}__${elem}`,
+      }),
+    }),
+    mod: (mods: any) => ({
+      toClassName: () => `dm-${block}`,
+      mix: (...args: any[]) => ({
+        toClassName: () => `dm-${block}`,
+      }),
+    }),
+    toClassName: () => `dm-${block}`,
+    mix: (...args: any[]) => ({
+      toClassName: () => `dm-${block}`,
+    }),
+  }),
 }));
 
 jest.mock("../../PanelBase", () => ({
@@ -163,7 +171,7 @@ describe("OutlinerPanel", () => {
 
       expect(screen.getByTestId("empty-state")).toBeInTheDocument();
       expect(screen.queryByTestId("outliner-tree")).not.toBeInTheDocument();
-      expect(screen.queryByTestId("block")).not.toBeInTheDocument(); // No filters-info block
+      expect(screen.queryByText("All regions hidden")).not.toBeInTheDocument(); // No filters-info message
     });
 
     it("does not render empty state when regions exist", () => {
@@ -190,15 +198,9 @@ describe("OutlinerPanel", () => {
 
       render(<OutlinerPanel {...defaultProps} regions={regionsAllHidden} />);
 
-      expect(screen.getByTestId("block")).toBeInTheDocument();
       expect(screen.getByTestId("icon-info")).toBeInTheDocument();
-      const titleElem = screen.getAllByTestId("elem").find((elem) => elem.textContent === "All regions hidden");
-      expect(titleElem).toBeInTheDocument();
-
-      const descriptionElem = screen
-        .getAllByTestId("elem")
-        .find((elem) => elem.textContent === "Adjust or remove the filters to view");
-      expect(descriptionElem).toBeInTheDocument();
+      expect(screen.getByText("All regions hidden")).toBeInTheDocument();
+      expect(screen.getByText("Adjust or remove the filters to view")).toBeInTheDocument();
     });
 
     it("shows hidden regions count in footer when some regions are filtered", () => {
diff --git a/web/libs/editor/src/components/SidePanels/PanelBase.tsx b/web/libs/editor/src/components/SidePanels/PanelBase.tsx
index cfdf089c5199..13a6dbcbfe18 100644
--- a/web/libs/editor/src/components/SidePanels/PanelBase.tsx
+++ b/web/libs/editor/src/components/SidePanels/PanelBase.tsx
@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { IconArrowLeft, IconArrowRight, IconOutlinerCollapse, IconOutlinerExpand } from "@humansignal/icons";
 
 import "./PanelBase.scss";
@@ -310,42 +310,66 @@ export const PanelBase: FC<PanelBaseProps> = ({
   );
 
   return (
-    <Block ref={panelRef} name="panel" mix={name} mod={mods} style={{ ...style, ...coordinates }}>
-      <Elem name="content">
+    <div
+      ref={panelRef as any}
+      className={cn("panel").mix(name).mod(mods).toClassName()}
+      style={{ ...style, ...coordinates }}
+    >
+      <div className={cn("panel").elem("content").toClassName()}>
         {!locked && (
-          <Elem ref={headerRef} name="header" onClick={!detached ? handleExpand : undefined}>
-            {(visible || detached) && <Elem name="title">{title}</Elem>}
-
-            <Elem
-              name="toggle"
-              mod={{ enabled: visible }}
+          <div
+            ref={headerRef as any}
+            className={cn("panel").elem("header").toClassName()}
+            onClick={!detached ? handleExpand : undefined}
+          >
+            {(visible || detached) && <div className={cn("panel").elem("title").toClassName()}>{title}</div>}
+
+            <div
+              className={cn("panel").elem("toggle").mod({ enabled: visible }).toClassName()}
               onClick={detached && !visible ? handleExpand : handleCollapse}
               data-tooltip={tooltipText}
             >
               {currentIcon}
-            </Elem>
-          </Elem>
+            </div>
+          </div>
         )}
         {visible && (
-          <Elem name="body">
-            <Block name={name} mix={mix}>
+          <div className={cn("panel").elem("body").toClassName()}>
+            <div
+              className={cn(name)
+                .mix(...(Array.isArray(mix) ? mix : [mix]))
+                .toClassName()}
+            >
               {children}
-            </Block>
-          </Elem>
+            </div>
+          </div>
         )}
-      </Elem>
+      </div>
 
       {visible && !positioning && !locked && (
-        <Elem name="resizers" ref={resizerRef} mod={{ locked: positioning || locked }}>
+        <div
+          className={cn("panel")
+            .elem("resizers")
+            .mod({ locked: positioning || locked })
+            .toClassName()}
+          ref={resizerRef as any}
+        >
           {resizers.map((res) => {
             const shouldRender = ((res === "left" || res === "right") && alignment !== res) || detached || detached;
 
             return shouldRender ? (
-              <Elem key={res} name="resizer" mod={{ drag: res === resizing }} data-resize={res} />
+              <div
+                key={res}
+                className={cn("panel")
+                  .elem("resizer")
+                  .mod({ drag: res === resizing })
+                  .toClassName()}
+                data-resize={res}
+              />
             ) : null;
           })}
-        </Elem>
+        </div>
       )}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/SidePanels.tsx b/web/libs/editor/src/components/SidePanels/SidePanels.tsx
index 126ad9024c78..1500d8c992f1 100644
--- a/web/libs/editor/src/components/SidePanels/SidePanels.tsx
+++ b/web/libs/editor/src/components/SidePanels/SidePanels.tsx
@@ -3,7 +3,7 @@
 
 import { observer } from "mobx-react";
 import { type CSSProperties, type FC, Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { DetailsPanel } from "./DetailsPanel/DetailsPanel";
 import { OutlinerPanel } from "./OutlinerPanel/OutlinerPanel";
 
@@ -483,24 +483,30 @@ const SidePanelsComponent: FC<SidePanelsProps> = ({ currentEntity, panelsHidden,
 
   return (
     <SidePanelsContext.Provider value={contextValue}>
-      <Block
+      <div
         ref={(el: HTMLDivElement | null) => {
           if (el) {
             rootRef.current = el;
             setViewportSizeMatch(el.clientWidth <= maxWindowWidth);
           }
         }}
-        name="sidepanels"
+        className={cn("sidepanels")
+          .mod({ collapsed: sidepanelsCollapsed, newLabelingUI: isFF(FF_DEV_3873) })
+          .toClassName()}
         style={{
           ...padding,
         }}
-        mod={{ collapsed: sidepanelsCollapsed, newLabelingUI: isFF(FF_DEV_3873) }}
       >
         {initialized && (
           <>
-            <Elem name="content" mod={{ resizing: resizing || positioning }}>
+            <div
+              className={cn("sidepanels")
+                .elem("content")
+                .mod({ resizing: resizing || positioning })
+                .toClassName()}
+            >
               {children}
-            </Elem>
+            </div>
             {panelsHidden !== true && (
               <>
                 {Object.entries(panels).map(([key, panel]) => {
@@ -511,16 +517,22 @@ const SidePanelsComponent: FC<SidePanelsProps> = ({ currentEntity, panelsHidden,
                   }
 
                   return (
-                    <Elem key={key} name="wrapper" mod={{ align: key, snap: snap === key && snap !== undefined }}>
+                    <div
+                      key={key}
+                      className={cn("sidepanels")
+                        .elem("wrapper")
+                        .mod({ align: key, snap: snap === key && snap !== undefined })
+                        .toClassName()}
+                    >
                       {content}
-                    </Elem>
+                    </div>
                   );
                 })}
               </>
             )}
           </>
         )}
-      </Block>
+      </div>
     </SidePanelsContext.Provider>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
index 052ba75ef73b..c8a3cd19cd4f 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx
@@ -8,7 +8,7 @@ import {
   type ReactNode,
   useEffect,
 } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -382,7 +382,11 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
   };
 
   return (
-    <Block ref={panelRef} name="tabs-panel" mod={mods} style={{ ...style, ...coordinates }}>
+    <div
+      ref={panelRef as any}
+      className={cn("tabs-panel").mod(mods).toClassName()}
+      style={{ ...style, ...coordinates }}
+    >
       {isBottomPanel && collapsibleBottomPanel && !bottomCollapsed && (
         <div
           className="w-full h-2 absolute -top-2 left-0 cursor-row-resize bg-neutral-emphasis hover:bg-primary-border active:bg-primary-border transition-colors duration-100 select-none z-10"
@@ -393,58 +397,66 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
           tabIndex={-1}
         />
       )}
-      <Elem name="content">
+      <div className={cn("tabs-panel").elem("content").toClassName()}>
         {!locked && collapsedHeader && (
           <>
             {isChildOfGroup && visible && (
-              <Elem
-                name="grouped-top"
-                ref={resizeGroup}
-                mod={{ drag: "grouped-top" === resizing }}
+              <div
+                className={cn("tabs-panel")
+                  .elem("grouped-top")
+                  .mod({ drag: "grouped-top" === resizing })
+                  .toClassName()}
+                ref={resizeGroup as any}
                 data-resize={"grouped-top"}
               />
             )}
-            <Elem
-              ref={headerRef}
+            <div
+              ref={headerRef as any}
               onClick={() => {
                 if (collapsed) handleGroupPanelToggle();
               }}
               id={key}
-              mod={{ collapsed }}
-              name="header"
+              className={cn("tabs-panel").elem("header").mod({ collapsed }).toClassName()}
             >
-              <Elem name="header-left">
-                {!collapsed && <Elem name="icon" style={{ pointerEvents: "none" }} tag={IconOutlinerDrag} />}
-                {!visible && !collapsed && <Elem name="title">{panelViews.map((view) => view.title).join(" ")}</Elem>}
-              </Elem>
-              <Elem name="header-right">
+              <div className={cn("tabs-panel").elem("header-left").toClassName()}>
+                {!collapsed && (
+                  <IconOutlinerDrag
+                    className={cn("tabs-panel").elem("icon").toClassName()}
+                    style={{ pointerEvents: "none" }}
+                  />
+                )}
+                {!visible && !collapsed && (
+                  <div className={cn("tabs-panel").elem("title").toClassName()}>
+                    {panelViews.map((view) => view.title).join(" ")}
+                  </div>
+                )}
+              </div>
+              <div className={cn("tabs-panel").elem("header-right").toClassName()}>
                 {(!detached || collapsed) && (
-                  <Elem
-                    name="toggle"
-                    mod={{ detached, collapsed, alignment }}
+                  <div
+                    className={cn("tabs-panel").elem("toggle").mod({ detached, collapsed, alignment }).toClassName()}
                     onClick={handleGroupPanelToggle}
                     data-tooltip={`${tooltipText} Group`}
                   >
                     {Side.left === alignment ? <IconChevronLeft /> : <IconChevronRight />}
-                  </Elem>
+                  </div>
                 )}
                 {!collapsed && (
-                  <Elem
-                    name="toggle"
-                    mod={{ detached, collapsed, alignment }}
+                  <div
+                    className={cn("tabs-panel").elem("toggle").mod({ detached, collapsed, alignment }).toClassName()}
                     onClick={handlePanelToggle}
                     data-tooltip={tooltipText}
                   >
                     {visible ? <IconCollapseSmall /> : <IconExpandSmall />}
-                  </Elem>
+                  </div>
                 )}
-              </Elem>
-            </Elem>
+              </div>
+            </div>
           </>
         )}
         {visible && !collapsed && (
-          <Elem name="body">
-            {lockPanelContents && <Elem name="shield" />}
+          <div className={cn("tabs-panel").elem("body").toClassName()}>
+            {lockPanelContents && <div className={cn("tabs-panel").elem("shield").toClassName()} />}
             {(() => {
               const onlyChild = React.Children.only(children);
               if (React.isValidElement(onlyChild) && (onlyChild.type as any).displayName === "Tabs") {
@@ -453,26 +465,40 @@ export const PanelTabsBase: FC<BasePropsWithChildren> = ({
                   bottomCollapsed,
                   setBottomCollapsed,
                   settings,
+                  panelHeight,
                 } as Partial<typeof onlyChild.props>);
               }
               return children;
             })()}
-          </Elem>
+          </div>
         )}
-      </Elem>
+      </div>
       {visible && !positioning && !locked && (
-        <Elem name="resizers" ref={resizerRef} mod={{ locked: positioning || locked }}>
+        <div
+          className={cn("tabs-panel")
+            .elem("resizers")
+            .mod({ locked: positioning || locked })
+            .toClassName()}
+          ref={resizerRef as any}
+        >
           {resizers.map((res) => {
             const shouldRender = collapsed
               ? false
               : ((res === "left" || res === "right") && alignment !== res) || detached;
 
             return shouldRender ? (
-              <Elem key={res} name="resizer" mod={{ drag: res === resizing }} data-resize={res} />
+              <div
+                key={res}
+                className={cn("tabs-panel")
+                  .elem("resizer")
+                  .mod({ drag: res === resizing })
+                  .toClassName()}
+                data-resize={res}
+              />
             ) : null;
           })}
-        </Elem>
+        </div>
       )}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
index 9e9c36f2b87c..ec31a33288d1 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/SideTabsPanels.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { type FC, Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { useMedia } from "../../../hooks/useMedia";
 import ResizeObserver from "../../../utils/resize-observer";
 import { clamp } from "../../../utils/utilities";
@@ -540,29 +540,34 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
 
   return (
     <SidePanelsContext.Provider value={contextValue}>
-      <Block
+      <div
         ref={(el: HTMLDivElement | null) => {
           if (el) {
             rootRef.current = el;
             setViewportSizeMatch(el.clientWidth <= maxWindowWidth);
           }
         }}
-        name="sidepanels"
-        mod={{ collapsed: panelBreakPoint }}
+        className={cn("sidepanels").mod({ collapsed: panelBreakPoint }).toClassName()}
         style={{ ...padding }}
       >
         {initialized && (
           <>
-            <Elem ref={contentRef} name="content" mod={{ resizing: lockPanelContents || positioning }}>
+            <div
+              ref={contentRef}
+              className={cn("sidepanels")
+                .elem("content")
+                .mod({ resizing: lockPanelContents || positioning })
+                .toClassName()}
+            >
               {children}
-            </Elem>
+            </div>
             {panelsHidden !== true && panelBreakPoint ? (
               <>
-                <Elem name="wrapper">
+                <div className={cn("sidepanels").elem("wrapper").toClassName()}>
                   <PanelTabsBase {...emptyBaseProps} contentRef={contentRef} isBottomPanel={true}>
                     <Tabs {...emptyBaseProps} />
                   </PanelTabsBase>
-                </Elem>
+                </div>
               </>
             ) : (
               <>
@@ -581,20 +586,22 @@ const SideTabsPanelsComponent: FC<SidePanelsProps> = ({
                     return <Fragment key={panelType}>{content}</Fragment>;
                   }
                   return (
-                    <Elem
+                    <div
                       key={panelType}
-                      name="wrapper"
-                      mod={{ align: panelType, snap: !lockPanelContents && snap === panelType && snap !== undefined }}
+                      className={cn("sidepanels")
+                        .elem("wrapper")
+                        .mod({ align: panelType, snap: !lockPanelContents && snap === panelType && snap !== undefined })
+                        .toClassName()}
                     >
                       {content}
-                    </Elem>
+                    </div>
                   );
                 })}
               </>
             )}
           </>
         )}
-      </Block>
+      </div>
     </SidePanelsContext.Provider>
   );
 };
diff --git a/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx b/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
index 0740320135d5..017990962feb 100644
--- a/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
+++ b/web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { IconOutlinerDrag, IconCollapseSmall, IconExpandSmall } from "@humansignal/ui";
 import { useDrag } from "../../../hooks/useDrag";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { DEFAULT_PANEL_HEIGHT } from "../constants";
 import "./Tabs.scss";
 import { type BaseProps, Side, type TabProps } from "./types";
@@ -158,24 +158,30 @@ const Tab = ({
   );
 
   const Label = () => (
-    <Elem
+    <div
       id={`${panelKey}_${tabIndex}_droppable`}
-      name="tab"
-      mod={{ active: locked ? tabIndex === breakPointActiveTab : active }}
+      className={cn("panel-tabs")
+        .elem("tab")
+        .mod({ active: locked ? tabIndex === breakPointActiveTab : active })
+        .toClassName()}
     >
-      {!locked && <Elem name="icon" tag={IconOutlinerDrag} />}
+      {!locked && <IconOutlinerDrag className={cn("panel-tabs").elem("icon").toClassName()} />}
       {tabText}
-    </Elem>
+    </div>
   );
 
   return (
-    <Block name="panel-tabs">
-      <Elem name="draggable-tab" id={`${tabText}-draggable`} ref={tabRef}>
+    <div className={cn("panel-tabs").toClassName()}>
+      <div
+        className={cn("panel-tabs").elem("draggable-tab").toClassName()}
+        id={`${tabText}-draggable`}
+        ref={tabRef as any}
+      >
         <Label />
-      </Elem>
-      <Elem
-        ref={ghostTabRef}
-        name="ghost-tab"
+      </div>
+      <div
+        ref={ghostTabRef as any}
+        className={cn("panel-tabs").elem("ghost-tab").toClassName()}
         style={{
           width: `${panelWidth}px`,
           height: "fit-content",
@@ -184,9 +190,9 @@ const Tab = ({
         }}
       >
         <Label />
-        {shouldShowGhostTab && <Elem name="contents">{children}</Elem>}
-      </Elem>
-    </Block>
+        {shouldShowGhostTab && <div className={cn("panel-tabs").elem("contents").toClassName()}>{children}</div>}
+      </div>
+    </div>
   );
 };
 
@@ -205,13 +211,16 @@ export const Tabs = (
 
   return (
     <>
-      <Block name="tabs">
-        <Elem name="tabs-row">
+      <div className={cn("tabs").toClassName()}>
+        <div className={cn("tabs").elem("tabs-row").toClassName()}>
           {props.panelViews.map((view, index) => {
             const { component: Component } = view;
 
             return (
-              <Elem name="tab-container" key={`${view.title}-${index}-tab`} mod={{ active: view.active }}>
+              <div
+                className={cn("tabs").elem("tab-container").mod({ active: view.active }).toClassName()}
+                key={`${view.title}-${index}-tab`}
+              >
                 <Tab
                   name={view.name}
                   rootRef={props.root}
@@ -230,14 +239,17 @@ export const Tabs = (
                   breakPointActiveTab={props.breakPointActiveTab}
                   setBreakPointActiveTab={props.setBreakPointActiveTab}
                 >
-                  <Elem name="content">
+                  <div className={cn("tabs").elem("content").toClassName()}>
                     <Component key={`${view.title}-${index}-ghost`} {...props} name={"outliner"} />
-                  </Elem>
+                  </div>
                 </Tab>
-              </Elem>
+              </div>
             );
           })}
-          <Elem id={`${props.name}_${props.panelViews.length}-droppable-space`} name="drop-space-after" />
+          <div
+            id={`${props.name}_${props.panelViews.length}-droppable-space`}
+            className={cn("tabs").elem("drop-space-after").toClassName()}
+          />
           {props.isBottomPanel && props.settings?.collapsibleBottomPanel && (
             <Button
               className="collapsible-bottom-panel-toggle"
@@ -261,13 +273,13 @@ export const Tabs = (
               {props.bottomCollapsed ? <IconExpandSmall /> : <IconCollapseSmall />}
             </Button>
           )}
-        </Elem>
+        </div>
         {!props.bottomCollapsed && (
-          <Elem name="contents" style={{ overflow: "auto" }}>
+          <div className={cn("tabs").elem("contents").toClassName()} style={{ overflow: "auto" }}>
             {ActiveComponent && <ActiveComponent {...props} />}
-          </Elem>
+          </div>
         )}
-      </Block>
+      </div>
     </>
   );
 };
diff --git a/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx b/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
index 86f88b3ca077..293a29fa767c 100644
--- a/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
+++ b/web/libs/editor/src/components/TimeDurationControl/TimeBox.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useCallback, useEffect, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { MaskUtil } from "../../utils/InputMask";
 import Label from "../../common/Label/Label";
 
@@ -76,10 +76,9 @@ export const TimeBox: FC<TimerProps> = ({ sidepanel = false, value, readonly = f
 
   const renderInputTime = () => {
     return (
-      <Elem
-        name={"input-time"}
+      <input
+        className={cn("time-box").elem("input-time").toClassName()}
         maxLength={12}
-        tag={"input"}
         ref={inputRef}
         type="text"
         readOnly={readonly}
@@ -92,9 +91,9 @@ export const TimeBox: FC<TimerProps> = ({ sidepanel = false, value, readonly = f
   };
 
   const timeBoxContent = (
-    <Block name="time-box" mod={{ sidepanel }} {...props}>
+    <div className={cn("time-box").mod({ sidepanel }).toClassName()} {...props}>
       {renderInputTime()}
-    </Block>
+    </div>
   );
 
   return label ? (
diff --git a/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx b/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
index e06589656ae5..f0f97ba16c42 100644
--- a/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
+++ b/web/libs/editor/src/components/TimeDurationControl/TimeDurationControl.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 
 import "./TimeDurationControl.scss";
 import { TimeBox } from "./TimeBox";
@@ -44,7 +44,7 @@ export const TimeDurationControl: FC<TimerProps> = ({
   };
 
   return (
-    <Block name="timer-duration-control">
+    <div className={cn("timer-duration-control").toClassName()}>
       <TimeBox
         sidepanel={isSidepanel}
         readonly={startTimeReadonly}
@@ -71,6 +71,6 @@ export const TimeDurationControl: FC<TimerProps> = ({
           label={showLabels ? "Duration" : undefined}
         />
       )}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls.tsx b/web/libs/editor/src/components/Timeline/Controls.tsx
index cffd10a377f8..0d893b92752a 100644
--- a/web/libs/editor/src/components/Timeline/Controls.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls.tsx
@@ -18,7 +18,7 @@ import { Button, type ButtonProps, Space } from "@humansignal/ui";
 import { type FC, memo, type MouseEvent, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { WithHotkey } from "../../common/Hotkey/WithHotkey";
 import { Hotkey, type HotkeyList } from "../../core/Hotkey";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { TimelineContext } from "./Context";
 import "./Controls.scss";
@@ -116,7 +116,11 @@ export const Controls: FC<TimelineControlsProps> = memo(
 
     const renderControls = () => {
       return (
-        <Elem name="group" tag={Space} size="small" style={{ gridAutoColumns: "auto" }}>
+        <Space
+          className={cn("timeline-controls").elem("group").toClassName()}
+          size="small"
+          style={{ gridAutoColumns: "auto" }}
+        >
           <ConfigControl
             onSetModal={onSetConfigModal}
             onAmpChange={props.onAmpChange}
@@ -137,7 +141,7 @@ export const Controls: FC<TimelineControlsProps> = memo(
             onSetModal={onSetVolumeModal}
             audioModal={audioModal}
           />
-        </Elem>
+        </Space>
       );
     };
 
@@ -174,8 +178,13 @@ export const Controls: FC<TimelineControlsProps> = memo(
     };
 
     return (
-      <Block name="timeline-controls" tag={Space} spread style={{ gridAutoColumns: "auto" }}>
-        {buffering && <Elem name="buffering" aria-label="Buffering Media Source" />}
+      <Space className={cn("timeline-controls").toClassName()} spread style={{ gridAutoColumns: "auto" }}>
+        {buffering && (
+          <div
+            className={cn("timeline-controls").elem("buffering").toClassName()}
+            aria-label="Buffering Media Source"
+          />
+        )}
         {mediaType === "audio" ? (
           renderControls()
         ) : (
@@ -307,7 +316,7 @@ export const Controls: FC<TimelineControlsProps> = memo(
             />
             {customControls?.rightCenter}
           </Space>
-          <Elem name="group" tag={Space} collapsed>
+          <Space className={cn("timeline-controls").elem("group").toClassName()} collapsed>
             {!disableFrames && allowViewCollapse && (
               <ControlButton tooltip="Toggle Timeline" onClick={() => onToggleCollapsed?.(!collapsed)}>
                 {collapsed ? <IconExpand /> : <IconCollapse />}
@@ -318,10 +327,10 @@ export const Controls: FC<TimelineControlsProps> = memo(
                 {fullscreen ? <IconFullscreenExit /> : <IconFullscreen />}
               </ControlButton>
             )}
-          </Elem>
+          </Space>
         </Space>
 
-        <Elem name="group" tag={Space} size="small">
+        <Space className={cn("timeline-controls").elem("group").toClassName()} size="small">
           {mediaType === "audio" ? (
             <>
               {customControls?.right}
@@ -348,8 +357,8 @@ export const Controls: FC<TimelineControlsProps> = memo(
               />
             </>
           )}
-        </Elem>
-      </Block>
+        </Space>
+      </Space>
     );
   },
 );
@@ -381,14 +390,14 @@ const TimeDisplay: FC<TimeDisplay> = ({ currentTime, position, duration, framera
   const totalTimeFormatted = formatter({ time: duration, ...commonOptions });
 
   return (
-    <Elem name="time">
-      <Elem name="time-section">
+    <div className={cn("timeline-controls").elem("time").toClassName()}>
+      <div className={cn("timeline-controls").elem("time-section").toClassName()}>
         <Time time={currentTime} position={currentTimeFormatted} />
-      </Elem>
-      <Elem name="time-section">
+      </div>
+      <div className={cn("timeline-controls").elem("time-section").toClassName()}>
         <Time time={Math.max(duration, 0)} position={totalTimeFormatted} />
-      </Elem>
-    </Elem>
+      </div>
+    </div>
   );
 };
 
diff --git a/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx b/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
index 21433deeb3a9..1e4509c806a7 100644
--- a/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/AudioControl.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { type FC, type MouseEvent, useEffect, useState } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import "./AudioControl.scss";
 import { IconSoundConfig, IconSoundMutedConfig } from "@humansignal/ui";
@@ -53,7 +53,7 @@ export const AudioControl: FC<AudioControlProps> = ({ volume, onVolumeChange, on
 
   const renderModal = () => {
     return (
-      <Elem name="modal">
+      <div className={cn("audio-control").elem("modal").toClassName()}>
         <Slider
           min={0}
           max={MAX_VOL}
@@ -63,26 +63,29 @@ export const AudioControl: FC<AudioControlProps> = ({ volume, onVolumeChange, on
           info={"Increase or decrease the volume of the audio"}
         />
         {renderMuteButton()}
-      </Elem>
+      </div>
     );
   };
 
   const renderMuteButton = () => {
     return (
-      <Elem name={"mute"}>
-        <Elem name="mute-button" onClick={handleSetMute}>
+      <div className={cn("audio-control").elem("mute").toClassName()}>
+        <div className={cn("audio-control").elem("mute-button").toClassName()} onClick={handleSetMute}>
           {isMuted ? "Unmute" : "Mute"}
-        </Elem>
-      </Elem>
+        </div>
+      </div>
     );
   };
 
   return (
-    <Block name="audio-control" onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
+    <div
+      className={cn("audio-control").toClassName()}
+      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
+    >
       <ControlButton look={audioModal ? "filled" : undefined} onClick={onSetModal}>
         {isMuted ? <IconSoundMutedConfig /> : <IconSoundConfig />}
       </ControlButton>
       {audioModal && renderModal()}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
index 62508797c1e3..6b62e118cfe3 100644
--- a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { type FC, type MouseEvent, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Toggle } from "@humansignal/ui";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import { IconConfig } from "@humansignal/icons";
 import { TimelineContext } from "../Context";
@@ -156,33 +156,32 @@ export const ConfigControl: FC<ConfigControlProps> = ({
 
   const renderLayerToggles = () => {
     return (
-      <Elem name={"buttons"}>
-        <Elem name="menu-button" onClick={handleSetTimeline}>
+      <div className={cn("audio-config").elem("buttons").toClassName()}>
+        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetTimeline}>
           {isTimeline ? "Hide" : "Show"} timeline
-        </Elem>
-        <Elem name="menu-button" onClick={handleSetAudioWave}>
+        </div>
+        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetAudioWave}>
           {isAudioWave ? "Hide" : "Show"} audio wave
-        </Elem>
+        </div>
         {isFF(FF_AUDIO_SPECTROGRAMS) && (
-          <Elem name="menu-button" onClick={handleSetSpectrogram}>
+          <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetSpectrogram}>
             {isSpectrogram ? "Hide" : "Show"} spectrogram
-          </Elem>
+          </div>
         )}
-      </Elem>
+      </div>
     );
   };
 
   const renderModal = () => {
     const modalJSX = (
-      <Elem
-        block="audio-config"
-        name="modal"
+      <div
+        className={cn("audio-config").elem("modal").toClassName()}
         ref={modalRef}
         onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()}
         style={{ opacity: 0, position: "fixed" }}
       >
-        <Elem name="scroll-content">
-          <Elem name="section-header">Playback Settings</Elem>
+        <div className={cn("audio-config").elem("scroll-content").toClassName()}>
+          <div className={cn("audio-config").elem("section-header").toClassName()}>Playback Settings</div>
           <Slider
             min={MIN_SPEED}
             max={MAX_SPEED}
@@ -201,43 +200,47 @@ export const ConfigControl: FC<ConfigControlProps> = ({
             info={"Increase or decrease the appearance of amplitude"}
             onChange={handleChangeAmp}
           />
-          <Elem name="toggle">
+          <div className={cn("audio-config").elem("toggle").toClassName()}>
             <Toggle
               checked={settings?.loopRegion}
               onChange={(e) => changeSetting?.("loopRegion", e.target.checked)}
               label="Loop Regions"
               labelProps={{ size: "small" }}
             />
-          </Elem>
-          <Elem name="toggle">
+          </div>
+          <div className={cn("audio-config").elem("toggle").toClassName()}>
             <Toggle
               checked={settings?.autoPlayNewSegments}
               onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)}
               label="Auto-play New Regions"
               labelProps={{ size: "small" }}
             />
-          </Elem>
+          </div>
 
           {isFF(FF_AUDIO_SPECTROGRAMS) && (
             <>
-              <Elem name="section-header">Spectrogram Settings</Elem>
+              <div className={cn("audio-config").elem("section-header").toClassName()}>Spectrogram Settings</div>
               <SpectrogramControl waveform={waveform} />
             </>
           )}
-        </Elem>
+        </div>
         {renderLayerToggles()}
-      </Elem>
+      </div>
     );
 
     return typeof document !== "undefined" ? createPortal(modalJSX, document.body) : null;
   };
 
   return (
-    <Block name="audio-config" ref={buttonRef} onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
+    <div
+      className={cn("audio-config").toClassName()}
+      ref={buttonRef as any}
+      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
+    >
       <ControlButton look={configModal ? "filled" : undefined} onClick={onSetModal} aria-label="Audio settings">
         {<IconConfig />}
       </ControlButton>
       {configModal && renderModal()}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
index c6110d8abbd1..9024faeb6d33 100644
--- a/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/Slider.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { type FC, useEffect, useRef, useState } from "react";
 import { Tooltip } from "@humansignal/ui";
 import { IconInfoConfig } from "@humansignal/icons";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import "./Slider.scss";
 
@@ -67,40 +67,40 @@ export const Slider: FC<SliderProps> = ({
 
   const renderInput = () => {
     return (
-      <Elem name="control">
-        <Elem name="info">
+      <div className={cn("audio-slider").elem("control").toClassName()}>
+        <div className={cn("audio-slider").elem("info").toClassName()}>
           {description}
           {info && (
             <Tooltip title={info}>
               <IconInfoConfig />
             </Tooltip>
           )}
-        </Elem>
+        </div>
         {showInput && (
-          <Elem
-            name="input"
-            tag="input"
+          <input
+            className={cn("audio-slider")
+              .elem("input")
+              .mod(
+                valueError !== undefined &&
+                  (typeof valueError === "string" || valueError > max || valueError < min) && { error: "control" },
+              )
+              .toClassName()}
             type="text"
-            mod={
-              valueError !== undefined &&
-              (typeof valueError === "string" || valueError > max || valueError < min) && { error: "control" }
-            }
             min={min}
             max={max}
             value={valueError === undefined ? value : valueError}
             onChange={handleChangeInputValue}
           />
         )}
-      </Elem>
+      </div>
     );
   };
 
   return (
-    <Block name="audio-slider">
-      <Elem
-        ref={sliderRef}
-        name="range"
-        tag="input"
+    <div className={cn("audio-slider").toClassName()}>
+      <input
+        ref={sliderRef as any}
+        className={cn("audio-slider").elem("range").toClassName()}
         type="range"
         min={min}
         max={max}
@@ -109,6 +109,6 @@ export const Slider: FC<SliderProps> = ({
         onChange={handleChangeInputValue}
       />
       {renderInput()}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx b/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
index f907cdc9e599..c6dda4f6b091 100644
--- a/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
+++ b/web/libs/editor/src/components/Timeline/Controls/SpectrogramControl.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { type FC, useContext, useEffect, useMemo, useState } from "react";
 import { Tooltip, Select } from "@humansignal/ui";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { Range } from "../../../common/Range/Range";
 import { IconInfoConfig, IconWarningCircleFilled } from "@humansignal/icons";
 import { TimelineContext } from "../Context";
@@ -424,7 +424,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
   const isMelScaleSelected = displayScale === "mel";
 
   return (
-    <Block name="spectrogram-controls">
+    <div className={cn("spectrogram-controls").toClassName()}>
       {showWarning && (
         <Tooltip title="High FFT or mel band values may cause performance issues or artifacts.">
           <IconWarningCircleFilled
@@ -442,7 +442,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           />
         </Tooltip>
       )}
-      <Elem name="slider-container">
+      <div className={cn("spectrogram-controls").elem("slider-container").toClassName()}>
         <Slider
           min={0}
           max={FFT_SAMPLE_VALUES.length - 1}
@@ -451,34 +451,32 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           showInput={false}
           onChange={handleChangeFftSamplesSlider}
         />
-        <Elem name="control">
-          <Elem name="info">
+        <div className={cn("spectrogram-controls").elem("control").toClassName()}>
+          <div className={cn("spectrogram-controls").elem("info").toClassName()}>
             FFT Samples
             <Tooltip title={fftInfoText}>
               <IconInfoConfig />
             </Tooltip>
-          </Elem>
-          <Elem
-            tag="input"
-            name="input"
+          </div>
+          <input
+            className={cn("spectrogram-controls").elem("input").mod({ error: fftInputError }).toClassName()}
             type="text"
             value={fftInputText}
             onChange={handleFftInputChange}
-            mod={{ error: fftInputError }}
           />
-        </Elem>
-      </Elem>
-      <Elem name="spectrogram-controls">
-        <Elem name="info">
+        </div>
+      </div>
+      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
+        <div className={cn("spectrogram-controls").elem("info").toClassName()}>
           Scale
           <Tooltip title="Determines the frequency scale mapping: Linear, Logarithmic, or Mel (perceptual).">
             <IconInfoConfig />
           </Tooltip>
-        </Elem>
+        </div>
         <Select value={displayScale} onChange={handleChangeScale} options={SCALE_OPTIONS} style={{ width: "100%" }} />
-      </Elem>
+      </div>
       {isMelScaleSelected && (
-        <Elem name="spectrogram-controls">
+        <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
           <Slider
             min={20}
             max={220}
@@ -488,9 +486,9 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
             info={"Specifies the number of frequency bands using the Mel scale. "}
             onChange={handleChangeNumberOfMelBands}
           />
-        </Elem>
+        </div>
       )}
-      <Elem name="spectrogram-controls">
+      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
         <Range
           multi
           continuous
@@ -502,17 +500,16 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           onChange={handleRangeChange}
           size={200}
         />
-        <Elem name="control">
-          <Elem name="info">
+        <div className={cn("spectrogram-controls").elem("control").toClassName()}>
+          <div className={cn("spectrogram-controls").elem("info").toClassName()}>
             Spectogram dB
             <Tooltip title="Controls the range of decibel values shown in the spectrogram. Lower values show quieter sounds.">
               <IconInfoConfig />
             </Tooltip>
-          </Elem>
-          <Elem name="input-group">
-            <Elem
-              name="input"
-              tag="input"
+          </div>
+          <div className={cn("spectrogram-controls").elem("input-group").toClassName()}>
+            <input
+              className={cn("spectrogram-controls").elem("input").toClassName()}
               type="number"
               value={displayMinDb}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -524,12 +521,9 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
               min={-120}
               max={displayMaxDb - 10}
             />
-            <Elem tag="span" name="separator">
-              to
-            </Elem>
-            <Elem
-              name="input"
-              tag="input"
+            <span className={cn("spectrogram-controls").elem("separator").toClassName()}>to</span>
+            <input
+              className={cn("spectrogram-controls").elem("input").toClassName()}
               type="number"
               value={displayMaxDb}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -541,20 +535,20 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
               min={displayMinDb + 10}
               max={0}
             />
-          </Elem>
-        </Elem>
-      </Elem>
-      <Elem name="spectrogram-controls">
-        <Elem name="label">Windowing Function</Elem>
+          </div>
+        </div>
+      </div>
+      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
+        <div className={cn("spectrogram-controls").elem("label").toClassName()}>Windowing Function</div>
         <Select
           value={displayWindowFunc}
           onChange={handleChangeWindowingFunction}
           options={WINDOWING_OPTIONS}
           style={{ width: "100%" }}
         />
-      </Elem>
-      <Elem name="spectrogram-controls">
-        <Elem name="label">Color Scheme</Elem>
+      </div>
+      <div className={cn("spectrogram-controls").elem("spectrogram-controls").toClassName()}>
+        <div className={cn("spectrogram-controls").elem("label").toClassName()}>Color Scheme</div>
         <Select
           value={displayColorScheme}
           onChange={handleChangeColorScheme}
@@ -565,7 +559,7 @@ export const SpectrogramControl: FC<SpectrogramControlProps> = ({ waveform }) =>
           listHeight={320}
           className="color-scheme-select"
         />
-      </Elem>
-    </Block>
+      </div>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Seeker.tsx b/web/libs/editor/src/components/Timeline/Seeker.tsx
index 04cbd567eb63..566cc4e1b68f 100644
--- a/web/libs/editor/src/components/Timeline/Seeker.tsx
+++ b/web/libs/editor/src/components/Timeline/Seeker.tsx
@@ -1,6 +1,6 @@
 import clamp from "lodash/clamp";
 import { type FC, type ReactElement, useCallback, useRef } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import type { TimelineMinimapProps } from "./Types";
 
 import "./Seeker.scss";
@@ -126,11 +126,21 @@ export const Seeker: FC<SeekerProps> = ({
   );
 
   return (
-    <Block name="seeker" ref={rootRef} onMouseDown={onDrag}>
-      <Elem name="track" />
-      {showIndicator && <Elem name="indicator" ref={viewRef} style={{ left: windowOffset, width }} />}
-      <Elem name="position" ref={seekerRef} style={{ left: `${seekerOffset}%` }} />
-      <Elem name="minimap">{minimap}</Elem>
-    </Block>
+    <div className={cn("seeker").toClassName()} ref={rootRef as any} onMouseDown={onDrag}>
+      <div className={cn("seeker").elem("track").toClassName()} />
+      {showIndicator && (
+        <div
+          className={cn("seeker").elem("indicator").toClassName()}
+          ref={viewRef as any}
+          style={{ left: windowOffset, width }}
+        />
+      )}
+      <div
+        className={cn("seeker").elem("position").toClassName()}
+        ref={seekerRef as any}
+        style={{ left: `${seekerOffset}%` }}
+      />
+      <div className={cn("seeker").elem("minimap").toClassName()}>{minimap}</div>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx b/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
index 0eec442dd992..89c261b1cea2 100644
--- a/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
+++ b/web/libs/editor/src/components/Timeline/SideControls/FramesControl.tsx
@@ -1,5 +1,5 @@
 import { type FC, type MutableRefObject, useMemo, useRef, useState } from "react";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { clamp } from "../../../utils/utilities";
 import type { TimelineSideControlProps } from "../Types";
 import "./FramesControl.scss";
@@ -11,7 +11,7 @@ export const FramesControl: FC<TimelineSideControlProps> = ({ position = 0, leng
   }, [length]);
 
   return (
-    <Block name="frames-control" onClick={() => setInputMode(true)}>
+    <div className={cn("frames-control").toClassName()} onClick={() => setInputMode(true)}>
       {inputMode ? (
         <FrameInput
           length={duration}
@@ -28,7 +28,7 @@ export const FramesControl: FC<TimelineSideControlProps> = ({ position = 0, leng
           {clamp(Math.round(position + 1), 1, duration + 1)} <span>of {duration + 1}</span>
         </>
       )}
-    </Block>
+    </div>
   );
 };
 
diff --git a/web/libs/editor/src/components/Timeline/Timeline.tsx b/web/libs/editor/src/components/Timeline/Timeline.tsx
index 9477878bc808..f69c7230a966 100644
--- a/web/libs/editor/src/components/Timeline/Timeline.tsx
+++ b/web/libs/editor/src/components/Timeline/Timeline.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { type FC, useEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorageState } from "../../hooks/useLocalStorageState";
 import { useMemoizedHandlers } from "../../hooks/useMemoizedHandlers";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { clamp, fixMobxObserve, isDefined } from "../../utils/utilities";
 import { TimelineContextProvider } from "./Context";
 import { Controls } from "./Controls";
@@ -124,7 +124,7 @@ const TimelineComponent: FC<TimelineProps> = ({
   }, [position, length]);
 
   const controls = (
-    <Elem name="topbar">
+    <div className={cn("timeline").elem("topbar").toClassName()}>
       <Controls
         length={length}
         position={currentPosition}
@@ -176,13 +176,13 @@ const TimelineComponent: FC<TimelineProps> = ({
           minimap={View.Minimap ? <View.Minimap /> : null}
         />
       )}
-    </Elem>
+    </div>
   );
 
   regions.map((reg) => fixMobxObserve(reg.sequence));
 
   const view = !viewCollapsed && !disableView && (
-    <Elem name="view">
+    <div className={cn("timeline").elem("view").toClassName()}>
       <View.View
         step={step}
         length={length}
@@ -212,12 +212,12 @@ const TimelineComponent: FC<TimelineProps> = ({
         onSpeedChange={(speed) => handlers.onSpeedChange?.(speed)}
         onZoom={props.onZoom}
       />
-    </Elem>
+    </div>
   );
 
   return (
     <TimelineContextProvider value={contextValue}>
-      <Block name="timeline" className={className}>
+      <div className={cn("timeline").mix(className).toClassName()}>
         {controlsOnTop ? (
           <>
             {controls}
@@ -229,7 +229,7 @@ const TimelineComponent: FC<TimelineProps> = ({
             {controls}
           </>
         )}
-      </Block>
+      </div>
     </TimelineContextProvider>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
index 442fb03ea593..5178ed04ebff 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Frames.tsx
@@ -2,7 +2,7 @@ import { useResizeObserver } from "@humansignal/core/hooks/useResizeObserver";
 import clamp from "lodash/clamp";
 import { type FC, type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useMemoizedHandlers } from "../../../../hooks/useMemoizedHandlers";
-import { Block, Elem } from "../../../../utils/bem";
+import { cn } from "../../../../utils/bem";
 import { isDefined } from "../../../../utils/utilities";
 import type { MSTTimelineRegion, TimelineRegion, TimelineViewProps } from "../../Types";
 import { Keypoints } from "./Keypoints";
@@ -407,27 +407,27 @@ export const Frames: FC<TimelineViewProps> = ({
   };
 
   return (
-    <Block name="timeline-frames" style={styles as any}>
-      <Elem name="controls">
-        <Elem
-          name="indicator"
+    <div className={cn("timeline-frames").toClassName()} style={styles as any}>
+      <div className={cn("timeline-frames").elem("controls").toClassName()}>
+        <div
+          className={cn("timeline-frames").elem("indicator").toClassName()}
           onMouseDown={handleMovement}
           style={{ left: clamp(seekerOffset - step, timelineStartOffset - step, viewWidth) }}
         />
 
         {isDefined(hoverOffset) && hoverEnabled && (
-          <Elem
-            name="hover"
+          <div
+            className={cn("timeline-frames").elem("hover").toClassName()}
             style={{ left: roundToStep(hoverOffset, step), marginLeft: timelineStartOffset }}
             data-frame={toSteps(currentOffsetX + hoverOffset, step) + 1}
           />
         )}
-      </Elem>
+      </div>
 
-      <Elem name="labels-bg" style={{ width: timelineStartOffset }} />
+      <div className={cn("timeline-frames").elem("labels-bg").toClassName()} style={{ width: timelineStartOffset }} />
 
-      <Elem
-        name="scroll"
+      <div
+        className={cn("timeline-frames").elem("scroll").toClassName()}
         ref={scrollable as any}
         onWheel={scrollHandler}
         onMouseMove={hoverHandler}
@@ -435,7 +435,7 @@ export const Frames: FC<TimelineViewProps> = ({
         onClickCapture={scrollClickHandler}
         onMouseDown={onFrameScrub}
       >
-        <Elem name="filler">
+        <div className={cn("timeline-frames").elem("filler").toClassName()}>
           <KeypointsVirtual
             regions={regions}
             scrollTop={currentOffsetY}
@@ -443,11 +443,11 @@ export const Frames: FC<TimelineViewProps> = ({
             onSelectRegion={onSelectRegion}
             disabled={regionSelectionDisabled}
           />
-        </Elem>
-      </Elem>
+        </div>
+      </div>
 
-      <Elem name="background" style={{ backgroundImage: background }} />
-    </Block>
+      <div className={cn("timeline-frames").elem("background").toClassName()} style={{ backgroundImage: background }} />
+    </div>
   );
 };
 
@@ -470,7 +470,7 @@ const KeypointsVirtual: FC<KeypointsVirtualProps> = ({ regions, startOffset, scr
   }, [scrollTop, regions.length]);
 
   return (
-    <Elem name="keypoints" style={{ height: regions.length * height }}>
+    <div className={cn("timeline-frames").elem("keypoints").toClassName()} style={{ height: regions.length * height }}>
       {regions.map((region, i) => {
         return region.sequence.length > 0 || region.timeline ? (
           <Keypoints
@@ -483,6 +483,6 @@ const KeypointsVirtual: FC<KeypointsVirtualProps> = ({ regions, startOffset, scr
           />
         ) : null;
       })}
-    </Elem>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
index 869e9c1995cf..9d2154552387 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Keypoints.tsx
@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import { type FC, memo, type MouseEvent, useCallback, useContext, useMemo } from "react";
-import { Block, Elem } from "../../../../utils/bem";
+import { cn } from "../../../../utils/bem";
 import { clamp } from "../../../../utils/utilities";
 import { TimelineContext } from "../../Context";
 import type { TimelineRegion } from "../../Types";
@@ -71,27 +71,27 @@ export const Keypoints: FC<KeypointsProps> = ({ idx, region, startOffset, render
   const range = timeline ? sequence.map((s) => s.frame) : [];
 
   return (
-    <Block
-      name="keypoints"
-      style={styles}
-      mod={{ selected, timeline }}
+    <div
+      className={cn("keypoints").mod({ selected, timeline }).toClassName()}
+      style={styles as any}
       data-id={region.id}
       data-start={range[0]}
       data-end={range[1]}
       data-locked={locked || undefined}
     >
-      <Elem name="label" onClick={onSelectRegionHandler}>
-        <Elem name="name">{label}</Elem>
-        <Elem name="data">
-          <Elem name="data-item" mod={{ faded: true }}>
-            {idx}
-          </Elem>
-        </Elem>
-      </Elem>
-      <Elem name="keypoints" onClick={(e: any) => onSelectRegionHandler(e, true)}>
+      <div className={cn("keypoints").elem("label").toClassName()} onClick={onSelectRegionHandler}>
+        <div className={cn("keypoints").elem("name").toClassName()}>{label}</div>
+        <div className={cn("keypoints").elem("data").toClassName()}>
+          <div className={cn("keypoints").elem("data-item").mod({ faded: true }).toClassName()}>{idx}</div>
+        </div>
+      </div>
+      <div
+        className={cn("keypoints").elem("keypoints").toClassName()}
+        onClick={(e: any) => onSelectRegionHandler(e, true)}
+      >
         <LifespansList lifespans={lifespans} step={step} visible={visible} offset={offset} />
-      </Elem>
-    </Block>
+      </div>
+    </div>
   );
 };
 
@@ -148,13 +148,22 @@ const LifespanItem: FC<LifespanItemProps> = memo(
     }, [left, right, finalWidth]);
 
     return (
-      <Elem name="lifespan" mod={{ hidden: !visible, instant: !width }} style={style}>
+      <div
+        className={cn("keypoints").elem("lifespan").mod({ hidden: !visible, instant: !width }).toClassName()}
+        style={style}
+      >
         {points.map((frame, i) => {
           const left = (frame - start) * step;
 
-          return <Elem key={i} name="point" style={{ left }} mod={{ last: !!left, locked }} />;
+          return (
+            <div
+              key={i}
+              className={cn("keypoints").elem("point").mod({ last: !!left, locked }).toClassName()}
+              style={{ left }}
+            />
+          );
         })}
-      </Elem>
+      </div>
     );
   },
 );
diff --git a/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx b/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
index dd3c6c57f63e..8cfa94460d75 100644
--- a/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
+++ b/web/libs/editor/src/components/Timeline/Views/Frames/Minimap.tsx
@@ -1,6 +1,6 @@
 import { useResizeObserver } from "@humansignal/core/hooks/useResizeObserver";
 import { type FC, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Block, Elem } from "../../../../utils/bem";
+import { cn } from "../../../../utils/bem";
 import { isDefined } from "../../../../utils/utilities";
 import { TimelineContext } from "../../Context";
 import { visualizeLifespans } from "./Utils";
@@ -29,20 +29,26 @@ export const Minimap: FC<any> = () => {
   }, [length, rootWidth]);
 
   return (
-    <Block ref={root} name="minimap">
+    <div ref={root as any} className={cn("minimap").toClassName()}>
       {visualization.slice(0, 5).map(({ id, color, lifespans }) => {
         return (
-          <Elem key={id} name="region" style={{ "--color": color }}>
+          <div key={id} className={cn("minimap").elem("region").toClassName()} style={{ "--color": color } as any}>
             {lifespans.map((connection, i) => {
               const isLast = i + 1 === lifespans.length;
               const left = connection.start * step;
               const width = isLast && connection.enabled ? "100%" : connection.width;
 
-              return <Elem key={`${id}${i}`} name="connection" style={{ left, width }} />;
+              return (
+                <div
+                  key={`${id}${i}`}
+                  className={cn("minimap").elem("connection").toClassName()}
+                  style={{ left, width }}
+                />
+              );
             })}
-          </Elem>
+          </div>
         );
       })}
-    </Block>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
index 76bfe28c83da..6fad5ad4b101 100644
--- a/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
+++ b/web/libs/editor/src/components/Toolbar/FlyoutMenu.jsx
@@ -1,4 +1,4 @@
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { Fragment, useEffect, useState } from "react";
 import { Hotkey } from "../../core/Hotkey";
@@ -18,7 +18,7 @@ const shortcutView = (shortcut) => {
   const combos = sc.split(",").map((s) => s.trim());
 
   return (
-    <Elem name="shortcut">
+    <div className={cn("flyoutmenu").elem("shortcut").toClassName()}>
       {combos.map((combo, index) => {
         const keys = combo.split("+");
 
@@ -26,15 +26,15 @@ const shortcutView = (shortcut) => {
           <Fragment key={`${keys.join("-")}-${index}`}>
             {keys.map((key) => {
               return (
-                <Elem name="key" tag="kbd" key={key}>
+                <kbd className={cn("flyoutmenu").elem("key").toClassName()} key={key}>
                   {keysDictionary[key] ?? key}
-                </Elem>
+                </kbd>
               );
             })}
           </Fragment>
         );
       })}
-    </Elem>
+    </div>
   );
 };
 
@@ -87,22 +87,28 @@ export const FlyoutMenu = ({ items, icon }) => {
   });
 
   return (
-    <Block
-      name="flyoutmenu"
-      tag="div"
-      className={`${isClicked ? "hovered" : ""}`}
+    <div
+      className={cn("flyoutmenu")
+        .mix(isClicked ? "hovered" : "")
+        .toClassName()}
       onClick={(e) => {
         e.stopPropagation();
         setClicked(!isClicked);
       }}
     >
-      <Elem name="icon" className={`${isClicked ? "isClicked" : ""}`} title="Zoom presets (click to see options)">
+      <div
+        className={cn("flyoutmenu")
+          .elem("icon")
+          .mix(isClicked ? "isClicked" : "")
+          .toClassName()}
+        title="Zoom presets (click to see options)"
+      >
         {icon}
-      </Elem>
-      <Block name="tooltips" tag="div">
+      </div>
+      <div className={cn("tooltips").toClassName()}>
         {items.map((childItem, index) => (
-          <Elem
-            name="tooltip"
+          <div
+            className={cn("tooltips").elem("tooltip").toClassName()}
             key={index}
             onClick={(e) => {
               e.stopPropagation();
@@ -110,13 +116,13 @@ export const FlyoutMenu = ({ items, icon }) => {
               setClicked(false);
             }}
           >
-            <Elem name="tooltip-body">
-              <Elem name="label">{childItem.label}</Elem>
+            <div className={cn("tooltips").elem("tooltip-body").toClassName()}>
+              <div className={cn("tooltips").elem("label").toClassName()}>{childItem.label}</div>
               {shortcutView(childItem.shortcut)}
-            </Elem>
-          </Elem>
+            </div>
+          </div>
         ))}
-      </Block>
-    </Block>
+      </div>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/Tool.jsx b/web/libs/editor/src/components/Toolbar/Tool.jsx
index ea954c229c95..2daf91e9fa6b 100644
--- a/web/libs/editor/src/components/Toolbar/Tool.jsx
+++ b/web/libs/editor/src/components/Toolbar/Tool.jsx
@@ -1,4 +1,4 @@
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { Fragment } from "react";
@@ -40,7 +40,7 @@ export const Tool = ({
     const combos = sc.split(",").map((s) => s.trim());
 
     return (
-      <Elem name="shortcut">
+      <div className={cn("tool").elem("shortcut").toClassName()}>
         {combos.map((combo, index) => {
           const keys = combo.split("+");
 
@@ -48,15 +48,15 @@ export const Tool = ({
             <Fragment key={`${keys.join("-")}-${index}`}>
               {keys.map((key) => {
                 return (
-                  <Elem name="key" tag="kbd" key={key}>
+                  <kbd className={cn("tool").elem("key").toClassName()} key={key}>
                     {keysDictionary[key] ?? key}
-                  </Elem>
+                  </kbd>
                 );
               })}
             </Fragment>
           );
         })}
-      </Elem>
+      </div>
     );
   }, [shortcut]);
 
@@ -107,7 +107,7 @@ export const Tool = ({
   }, [extraShortcuts, active]);
 
   const extraContent = useMemo(() => {
-    return smart && extra ? <Elem name="extra">{extra}</Elem> : null;
+    return smart && extra ? <div className={cn("tool").elem("extra").toClassName()}>{extra}</div> : null;
   }, [smart, extra]);
 
   const showControls = dynamic === false && controls?.length && (active || (controlsOnHover && hovered));
@@ -115,17 +115,18 @@ export const Tool = ({
   const isDisabled = disabled || isAnnotationDrawing;
 
   return (
-    <Block
-      name="tool"
-      tag="button"
+    <button
+      type="button"
       aria-label={ariaLabel}
-      mod={{
-        active,
-        disabled: isDisabled,
-        alignment,
-        expanded: expanded && !dynamic,
-        smart: dynamic || smart,
-      }}
+      className={cn("tool")
+        .mod({
+          active,
+          disabled: isDisabled,
+          alignment,
+          expanded: expanded && !dynamic,
+          smart: dynamic || smart,
+        })
+        .toClassName()}
       onClick={(e) => {
         if (!disabled && !isAnnotationDrawing) {
           e.preventDefault();
@@ -142,34 +143,39 @@ export const Tool = ({
         setHovered(false);
       }}
     >
-      <Elem name="icon">{icon}</Elem>
+      <div className={cn("tool").elem("icon").toClassName()}>{icon}</div>
       {dynamic === false &&
         controlsOnHover === false &&
         (expanded ? (
           <>
-            <Elem name="label">
+            <div className={cn("tool").elem("label").toClassName()}>
               {extraContent}
               {label}
               {shortcutView}
-            </Elem>
+            </div>
           </>
         ) : (
           (isDefined(label) || isDefined(shortcutView)) &&
           !showControls && (
-            <Elem name="tooltip" mod={{ controlled: !!(smart && extra) }}>
-              <Elem name="tooltip-body">
+            <div
+              className={cn("tool")
+                .elem("tooltip")
+                .mod({ controlled: !!(smart && extra) })
+                .toClassName()}
+            >
+              <div className={cn("tool").elem("tooltip-body").toClassName()}>
                 {extraContent}
                 {label}
                 {shortcutView}
-              </Elem>
-            </Elem>
+              </div>
+            </div>
           )
         ))}
       {showControls && (
-        <Elem name="controls" onClickCapture={(e) => e.stopPropagation()}>
-          <Elem name="controls-body">{controls}</Elem>
-        </Elem>
+        <div className={cn("tool").elem("controls").toClassName()} onClickCapture={(e) => e.stopPropagation()}>
+          <div className={cn("tool").elem("controls-body").toClassName()}>{controls}</div>
+        </div>
       )}
-    </Block>
+    </button>
   );
 };
diff --git a/web/libs/editor/src/components/Toolbar/Toolbar.jsx b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
index 3844de094203..5266cf3d8922 100644
--- a/web/libs/editor/src/components/Toolbar/Toolbar.jsx
+++ b/web/libs/editor/src/components/Toolbar/Toolbar.jsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { inject, observer } from "mobx-react";
 
 import { useWindowSize } from "../../common/Utils/useWindowSize";
-import { Block, cn, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import { Tool } from "./Tool";
 import { ToolbarProvider } from "./ToolbarContext";
@@ -45,12 +45,12 @@ export const Toolbar = inject("store")(
 
     return (
       <ToolbarProvider value={{ expanded, alignment }}>
-        <Block ref={(el) => setToolbar(el)} name="toolbar" mod={{ alignment, expanded }}>
+        <div ref={(el) => setToolbar(el)} className={cn("toolbar").mod({ alignment, expanded }).toClassName()}>
           {Object.entries(toolGroups).map(([name, tools], i) => {
             const visibleTools = tools.filter((t) => t.viewClass);
 
             return visibleTools.length ? (
-              <Elem name="group" key={`toolset-${name}-${i}`}>
+              <div className={cn("toolbar").elem("group").toClassName()} key={`toolset-${name}-${i}`}>
                 {visibleTools
                   .sort((a, b) => a.index - b.index)
                   .map((tool, i) => {
@@ -58,11 +58,11 @@ export const Toolbar = inject("store")(
 
                     return <ToolComponent key={`${tool.toolName}-${i}`} />;
                   })}
-              </Elem>
+              </div>
             ) : null;
           })}
           {store.autoAnnotation && <SmartTools tools={smartTools} />}
-        </Block>
+        </div>
       </ToolbarProvider>
     );
   }),
@@ -82,7 +82,7 @@ const SmartTools = observer(({ tools }) => {
 
   return (
     tools.length > 0 && (
-      <Elem name="group">
+      <div className={cn("toolbar").elem("group").toClassName()}>
         <Tool
           smart
           label="Auto-Detect"
@@ -91,7 +91,7 @@ const SmartTools = observer(({ tools }) => {
           shortcut="tool:auto-detect"
           extra={
             tools.length > 1 ? (
-              <Elem name="smart">
+              <div className={cn("toolbar").elem("smart").toClassName()}>
                 {tools.map((t, i) => {
                   const ToolView = t.viewClass;
 
@@ -108,7 +108,7 @@ const SmartTools = observer(({ tools }) => {
                     </div>
                   );
                 })}
-              </Elem>
+              </div>
             ) : null
           }
           controls={selected.controls}
@@ -128,7 +128,7 @@ const SmartTools = observer(({ tools }) => {
             nextTool.manager.selectTool(nextTool, true);
           }}
         />
-      </Elem>
+      </div>
     )
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/Actions.jsx b/web/libs/editor/src/components/TopBar/Actions.jsx
index 6b3ce6605191..cba59c715e53 100644
--- a/web/libs/editor/src/components/TopBar/Actions.jsx
+++ b/web/libs/editor/src/components/TopBar/Actions.jsx
@@ -1,7 +1,7 @@
 import { Button } from "@humansignal/ui";
 import { IconCopy, IconInfo, IconViewAll, IconTrash, IconSettings } from "@humansignal/icons";
 import { Tooltip } from "@humansignal/ui";
-import { Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import { FF_BULK_ANNOTATION, isFF } from "../../utils/feature-flags";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
@@ -22,7 +22,7 @@ export const Actions = ({ store }) => {
   }, [annotationStore]);
 
   return (
-    <Elem name="section">
+    <div className={cn("topbar").elem("section").toClassName()}>
       {store.hasInterface("annotations:view-all") && !isBulkMode && (
         <Tooltip title="Compare all annotations">
           <Button
@@ -125,6 +125,6 @@ export const Actions = ({ store }) => {
           }}
         />
       )}
-    </Elem>
+    </div>
   );
 };
diff --git a/web/libs/editor/src/components/TopBar/Annotations.jsx b/web/libs/editor/src/components/TopBar/Annotations.jsx
index 9b2bb0075c40..0c47a1e9ba63 100644
--- a/web/libs/editor/src/components/TopBar/Annotations.jsx
+++ b/web/libs/editor/src/components/TopBar/Annotations.jsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Space } from "../../common/Space/Space";
 import { IconPlusCircle, IconComment, IconCommentRed, IconSparks } from "@humansignal/icons";
 import { Userpic } from "@humansignal/ui";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined, userDisplayName } from "../../utils/utilities";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
 import "./Annotations.scss";
@@ -99,10 +99,12 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
           onAnnotationSelect?.(ent, ent.type === "prediction");
         }}
         extra={
-          <Elem name={"icons"}>
-            <Elem name="icon-column">{renderCommentIcon(ent)}</Elem>
-            <Elem name="icon-column">{groundTruthEnabled && <GroundTruth entity={ent} disabled />}</Elem>
-          </Elem>
+          <div className={cn("annotations-list").elem("icons").toClassName()}>
+            <div className={cn("annotations-list").elem("icon-column").toClassName()}>{renderCommentIcon(ent)}</div>
+            <div className={cn("annotations-list").elem("icon-column").toClassName()}>
+              {groundTruthEnabled && <GroundTruth entity={ent} disabled />}
+            </div>
+          </div>
         }
       />
     );
@@ -122,16 +124,16 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
 
     return (
       <>
-        <Elem name="draft">{_drafts}</Elem>
-        <Elem name="annotation">{_annotations}</Elem>
+        <div className={cn("annotations-list").elem("draft").toClassName()}>{_drafts}</div>
+        <div className={cn("annotations-list").elem("annotation").toClassName()}>{_annotations}</div>
       </>
     );
   };
 
   return enableAnnotations || enablePredictions || enableCreateAnnotation ? (
-    <Elem name="section" mod={{ flat: true }}>
-      <Block name="annotations-list" ref={dropdownRef}>
-        <Elem name="selected">
+    <div className={cn("topbar").elem("section").mod({ flat: true }).toClassName()}>
+      <div className={cn("annotations-list").toClassName()} ref={dropdownRef}>
+        <div className={cn("annotations-list").elem("selected").toClassName()}>
           <Annotation
             aria-label="Annotations List Toggle"
             entity={annotationStore.selected}
@@ -142,27 +144,27 @@ export const Annotations = observer(({ store, annotationStore, commentStore }) =
             extra={
               entities.length > 0 ? (
                 <Space size="none" style={{ marginRight: -8, marginLeft: 8 }}>
-                  <Elem name="counter">
+                  <div className={cn("annotations-list").elem("counter").toClassName()}>
                     {entities.indexOf(annotationStore.selected) + 1}/{entities.length}
-                  </Elem>
-                  <Elem name="toggle" mod={{ opened }} />
+                  </div>
+                  <div className={cn("annotations-list").elem("toggle").mod({ opened }).toClassName()} />
                 </Space>
               ) : null
             }
           />
-        </Elem>
+        </div>
 
         {opened && (
-          <Elem name="list">
+          <div className={cn("annotations-list").elem("list").toClassName()}>
             {store.hasInterface("annotations:add-new") && (
               <CreateAnnotation annotationStore={annotationStore} onClick={() => setOpened(false)} />
             )}
 
             {renderAnnotationList(entities)}
-          </Elem>
+          </div>
         )}
-      </Block>
-    </Elem>
+      </div>
+    </div>
   ) : null;
 });
 
@@ -175,14 +177,18 @@ const CreateAnnotation = observer(({ annotationStore, onClick }) => {
   }, [annotationStore, onClick]);
 
   return (
-    <Elem name="create" aria-label="Create Annotation" onClick={onCreateAnnotation}>
+    <div
+      className={cn("annotations-list").elem("create").toClassName()}
+      aria-label="Create Annotation"
+      onClick={onCreateAnnotation}
+    >
       <Space size="small">
-        <Elem name="userpic" tag={Userpic} mod={{ prediction: true }}>
+        <Userpic className={cn("annotations-list").elem("userpic").mod({ prediction: true }).toClassName()}>
           <IconPlusCircle />
-        </Elem>
+        </Userpic>
         Create Annotation
       </Space>
-    </Elem>
+    </div>
   );
 });
 
@@ -195,42 +201,37 @@ const Annotation = observer(({ entity, selected, onClick, extra, ...props }) =>
   );
 
   return (
-    <Elem {...props} name="entity" mod={{ selected }} onClick={onClick}>
+    <div {...props} className={cn("annotations-list").elem("entity").mod({ selected }).toClassName()} onClick={onClick}>
       <Space spread>
         <Space size="small">
-          <Elem
-            name="userpic"
-            tag={Userpic}
+          <Userpic
+            className={cn("annotations-list").elem("userpic").mod({ prediction: isPrediction }).toClassName()}
             showUsername
             username={isPrediction ? entity.createdBy : null}
             user={entity.user ?? { username }}
-            mod={{ prediction: isPrediction }}
           >
             {isPrediction && <IconSparks color="#944BFF" style={{ width: 18, height: 18 }} />}
-          </Elem>
+          </Userpic>
           <Space direction="vertical" size="none">
-            <Elem name="user">
-              <Elem tag="span" name="name">
-                {username}
-              </Elem>
-              <Elem tag="span" name="entity-id">
-                #{entity.pk ?? entity.id}
-              </Elem>
-            </Elem>
+            <div className={cn("annotations-list").elem("user").toClassName()}>
+              <span className={cn("annotations-list").elem("name").toClassName()}>{username}</span>
+              <span className={cn("annotations-list").elem("entity-id").toClassName()}>#{entity.pk ?? entity.id}</span>
+            </div>
 
             {isDefined(entity.acceptedState) ? (
-              <Elem name="review" mod={{ state: entity.acceptedState }}>
+              <div className={cn("annotations-list").elem("review").mod({ state: entity.acceptedState }).toClassName()}>
                 {entity.acceptedState}
-              </Elem>
+              </div>
             ) : (
-              <Elem name="created">
-                created, <Elem name="date" component={TimeAgo} date={entity.createdDate} />
-              </Elem>
+              <div className={cn("annotations-list").elem("created").toClassName()}>
+                created,{" "}
+                <TimeAgo className={cn("annotations-list").elem("date").toClassName()} date={entity.createdDate} />
+              </div>
             )}
           </Space>
         </Space>
         {extra}
       </Space>
-    </Elem>
+    </div>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/Controls.jsx b/web/libs/editor/src/components/TopBar/Controls.jsx
index b0c231ef62d3..f309276479b6 100644
--- a/web/libs/editor/src/components/TopBar/Controls.jsx
+++ b/web/libs/editor/src/components/TopBar/Controls.jsx
@@ -5,7 +5,7 @@
 import { inject, observer } from "mobx-react";
 import { IconBan } from "@humansignal/icons";
 import { Button, Tooltip } from "@humansignal/ui";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 
 import "./Controls.scss";
@@ -121,9 +121,9 @@ export const Controls = controlsInjector(
       );
     } else if (annotation.skipped) {
       buttons.push(
-        <Elem name="skipped-info" key="skipped">
+        <div className={cn("controls").elem("skipped-info").toClassName()} key="skipped">
           <IconBan color="#d00" /> Was skipped
-        </Elem>,
+        </div>,
       );
       buttons.push(
         <ButtonTooltip key="cancel-skip" title="Cancel skip: []">
@@ -170,7 +170,7 @@ export const Controls = controlsInjector(
 
         buttons.push(
           <ButtonTooltip key="submit" title={title}>
-            <Elem name="tooltip-wrapper">
+            <div className={cn("controls").elem("tooltip-wrapper").toClassName()}>
               <Button
                 aria-label="Submit current annotation"
                 disabled={disabled || submitDisabled}
@@ -182,7 +182,7 @@ export const Controls = controlsInjector(
               >
                 Submit
               </Button>
-            </Elem>
+            </div>
           </ButtonTooltip>,
         );
       }
@@ -210,9 +210,9 @@ export const Controls = controlsInjector(
     }
 
     return (
-      <Block name="controls">
+      <div className={cn("controls").toClassName()}>
         <div className="grid grid-flow-col auto-cols-fr gap-tight items-center">{buttons}</div>
-      </Block>
+      </div>
     );
   }),
 );
diff --git a/web/libs/editor/src/components/TopBar/CurrentTask.jsx b/web/libs/editor/src/components/TopBar/CurrentTask.jsx
index 5c0ad96c8123..b7f2448010ee 100644
--- a/web/libs/editor/src/components/TopBar/CurrentTask.jsx
+++ b/web/libs/editor/src/components/TopBar/CurrentTask.jsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useEffect, useState } from "react";
 import { Button, IconChevronLeft, IconChevronRight } from "@humansignal/ui";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { FF_DEV_3873, FF_DEV_4174, FF_LEAP_1173, FF_TASK_COUNT_FIX, isFF } from "../../utils/feature-flags";
 import { guidGenerator } from "../../utils/unique";
 import { isDefined } from "../../utils/utilities";
@@ -54,31 +54,38 @@ export const CurrentTask = observer(({ store }) => {
   }
 
   return (
-    <Elem name="section">
-      <Block
-        name="current-task"
-        mod={{ "with-history": historyEnabled }}
+    <div className={cn("topbar").elem("section").toClassName()}>
+      <div
+        className={cn("current-task").mod({ "with-history": historyEnabled }).toClassName()}
         style={{
           padding: isFF(FF_DEV_3873) && 0,
           width: isFF(FF_DEV_3873) && "auto",
         }}
       >
-        <Elem name="task-id" style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}>
+        <div
+          className={cn("current-task").elem("task-id").toClassName()}
+          style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}
+        >
           {store.task.id ?? guidGenerator()}
           {historyEnabled &&
             showCounter &&
             (isFF(FF_TASK_COUNT_FIX) ? (
-              <Elem name="task-count">
+              <div className={cn("current-task").elem("task-count").toClassName()}>
                 {store.queuePosition} of {store.queueTotal}
-              </Elem>
+              </div>
             ) : (
-              <Elem name="task-count">
+              <div className={cn("current-task").elem("task-count").toClassName()}>
                 {currentIndex} of {store.taskHistory.length}
-              </Elem>
+              </div>
             ))}
-        </Elem>
+        </div>
         {historyEnabled && (
-          <Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }}>
+          <div
+            className={cn("current-task")
+              .elem("history-controls")
+              .mod({ newui: isFF(FF_DEV_3873) })
+              .toClassName()}
+          >
             <Button
               data-testid="prev-task"
               aria-label="Previous task"
@@ -101,9 +108,9 @@ export const CurrentTask = observer(({ store }) => {
             >
               <IconChevronRight />
             </Button>
-          </Elem>
+          </div>
         )}
-      </Block>
-    </Elem>
+      </div>
+    </div>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/HistoryActions.jsx b/web/libs/editor/src/components/TopBar/HistoryActions.jsx
index 88c5dc2a9482..933e8201c7ec 100644
--- a/web/libs/editor/src/components/TopBar/HistoryActions.jsx
+++ b/web/libs/editor/src/components/TopBar/HistoryActions.jsx
@@ -1,14 +1,14 @@
 import { observer } from "mobx-react";
 import { IconRedo, IconRemove, IconUndo } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./HistoryActions.scss";
 
 export const EditingHistory = observer(({ entity }) => {
   const { history } = entity;
 
   return (
-    <Block name="history-buttons">
+    <div className={cn("history-buttons").toClassName()}>
       <Button
         variant="neutral"
         look="string"
@@ -40,6 +40,6 @@ export const EditingHistory = observer(({ entity }) => {
         onClick={() => history?.reset()}
         leading={<IconRemove />}
       />
-    </Block>
+    </div>
   );
 });
diff --git a/web/libs/editor/src/components/TopBar/TopBar.jsx b/web/libs/editor/src/components/TopBar/TopBar.jsx
index 68d1f099bd98..a7c804ee4173 100644
--- a/web/libs/editor/src/components/TopBar/TopBar.jsx
+++ b/web/libs/editor/src/components/TopBar/TopBar.jsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { IconViewAll, IconPlus } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
 import { ff } from "@humansignal/core";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { isSelfServe } from "../../utils/billing";
 import { FF_BULK_ANNOTATION, FF_DEV_3873, isFF } from "../../utils/feature-flags";
 import { AnnotationsCarousel } from "../AnnotationsCarousel/AnnotationsCarousel";
@@ -26,9 +26,13 @@ export const TopBar = observer(({ store }) => {
   if (isFF(FF_DEV_3873) && isBulkMode) return null;
 
   return store ? (
-    <Block name="topbar" mod={{ newLabelingUI: isFF(FF_DEV_3873) }}>
+    <div
+      className={cn("topbar")
+        .mod({ newLabelingUI: isFF(FF_DEV_3873) })
+        .toClassName()}
+    >
       {isFF(FF_DEV_3873) ? (
-        <Elem name="group">
+        <div className={cn("topbar").elem("group").toClassName()}>
           <CurrentTask store={store} />
           {store.hasInterface("annotations:view-all") && (
             <Button
@@ -70,30 +74,33 @@ export const TopBar = observer(({ store }) => {
               commentStore={store.commentStore}
             />
           )}
-        </Elem>
+        </div>
       ) : (
         <>
-          <Elem name="group">
+          <div className={cn("topbar").elem("group").toClassName()}>
             {!isBulkMode && <CurrentTask store={store} />}
             {!isViewAll && !isBulkMode && (
               <Annotations store={store} annotationStore={store.annotationStore} commentStore={store.commentStore} />
             )}
             <Actions store={store} />
-          </Elem>
-          <Elem name="group">
+          </div>
+          <div className={cn("topbar").elem("group").toClassName()}>
             {!isViewAll && (
-              <Elem name="section">
+              <div className={cn("topbar").elem("section").toClassName()}>
                 <DynamicPreannotationsToggle />
-              </Elem>
+              </div>
             )}
             {!isViewAll && store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
-              <Elem name="section" mod={{ flat: true }} style={{ width: 320, boxSizing: "border-box" }}>
+              <div
+                className={cn("topbar").elem("section").mod({ flat: true }).toClassName()}
+                style={{ width: 320, boxSizing: "border-box" }}
+              >
                 <Controls annotation={entity} />
-              </Elem>
+              </div>
             )}
-          </Elem>
+          </div>
         </>
       )}
-    </Block>
+    </div>
   ) : null;
 });
diff --git a/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx b/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
index 025dc99f14a9..31f3ec449030 100644
--- a/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
+++ b/web/libs/editor/src/components/VideoCanvas/VideoCanvas.tsx
@@ -1,7 +1,7 @@
 import { useRefCallback } from "@humansignal/core/hooks/useRefCallback";
 import { useValueRef } from "@humansignal/core/hooks/useValueRef";
 import { forwardRef, memo, type MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { FF_VIDEO_FRAME_SEEK_PRECISION, isFF } from "../../utils/feature-flags";
 import { clamp, isDefined } from "../../utils/utilities";
 import { useUpdateBuffering } from "../../hooks/useUpdateBuffering";
@@ -620,14 +620,14 @@ export const VideoCanvas = memo(
     }, []);
 
     return (
-      <Block ref={rootRef} name="video-canvas">
+      <div ref={rootRef as any} className={cn("video-canvas").toClassName()}>
         {loading && (
-          <Elem name="loading">
-            <Block name="spinner" />
-          </Elem>
+          <div className={cn("video-canvas").elem("loading").toClassName()}>
+            <div className={cn("spinner").toClassName()} />
+          </div>
         )}
-        <Elem
-          name="view"
+        <div
+          className={cn("video-canvas").elem("view").toClassName()}
           onClick={props.onClick}
           style={{
             width: canvasWidth,
@@ -644,8 +644,10 @@ export const VideoCanvas = memo(
             width={canvasWidth}
             height={canvasHeight}
           />
-          {!isSyncedBuffering && !loading && buffering && <Elem name="buffering" aria-label="Buffering Media Source" />}
-        </Elem>
+          {!isSyncedBuffering && !loading && buffering && (
+            <div className={cn("video-canvas").elem("buffering").toClassName()} aria-label="Buffering Media Source" />
+          )}
+        </div>
 
         <VirtualVideo
           ref={videoRef as MutableRefObject<HTMLVideoElement>}
@@ -683,7 +685,7 @@ export const VideoCanvas = memo(
           onEnded={handleVideoEnded}
           onError={handleVideoError}
         />
-      </Block>
+      </div>
     );
   }),
 );
diff --git a/web/libs/editor/src/core/Hotkey.ts b/web/libs/editor/src/core/Hotkey.ts
index e74a3b148aab..ccf909b7756d 100644
--- a/web/libs/editor/src/core/Hotkey.ts
+++ b/web/libs/editor/src/core/Hotkey.ts
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { createElement, Fragment } from "react";
 import { Tooltip } from "@humansignal/ui";
 import Hint from "../components/Hint/Hint";
-import { Block, Elem } from "../utils/bem";
+import { cn } from "../utils/bem";
 import { FF_MULTI_OBJECT_HOTKEYS, isFF } from "../utils/feature-flags";
 import { isDefined, isMacOS } from "../utils/utilities";
 import defaultKeymap from "./settings/keymap.json";
@@ -464,10 +464,9 @@ Hotkey.Tooltip = inject("store")(
         shortcut.split(",").forEach((combination: string) => {
           const keys = combination.split("+").map((key: string) =>
             createElement(
-              Elem,
+              "kbd",
               {
-                tag: "kbd",
-                name: "key",
+                className: cn("hotkey").elem("key").toClassName(),
               },
               key,
             ),
@@ -475,10 +474,9 @@ Hotkey.Tooltip = inject("store")(
 
           hotkeys.push(
             createElement(
-              Block,
+              "span",
               {
-                name: "key-group",
-                tag: "span",
+                className: cn("key-group").toClassName(),
                 style: { marginLeft: 5 },
               },
               ...keys,
diff --git a/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx b/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
index 845c7f8a1809..39dd381b5de7 100644
--- a/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
+++ b/web/libs/editor/src/lib/AudioUltra/react/ConfigControl.tsx
@@ -1,7 +1,7 @@
 import type React from "react";
 import { type FC, type MouseEvent, useContext, useEffect, useState } from "react";
 import { Toggle } from "@humansignal/ui";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { IconConfig } from "@humansignal/ui";
 import { TimelineContext } from "../../../components/Timeline/Context";
 import { ControlButton } from "../../../components/Timeline/Controls";
@@ -80,20 +80,20 @@ export const ConfigControl: FC<ConfigControlProps> = ({
 
   const renderLayerToggles = () => {
     return (
-      <Elem name={"buttons"}>
-        <Elem name="menu-button" onClick={handleSetTimeline}>
+      <div className={cn("audio-config").elem("buttons").toClassName()}>
+        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetTimeline}>
           {isTimeline ? "Hide" : "Show"} timeline
-        </Elem>
-        <Elem name="menu-button" onClick={handleSetAudioWave}>
+        </div>
+        <div className={cn("audio-config").elem("menu-button").toClassName()} onClick={handleSetAudioWave}>
           {isAudioWave ? "Hide" : "Show"} audio wave
-        </Elem>
-      </Elem>
+        </div>
+      </div>
     );
   };
 
   const renderModal = () => {
     return (
-      <Elem name="modal">
+      <div className={cn("audio-config").elem("modal").toClassName()}>
         <Slider
           min={MIN_SPEED}
           max={MAX_SPEED}
@@ -112,32 +112,35 @@ export const ConfigControl: FC<ConfigControlProps> = ({
           info={"Increase or decrease the appearance of amplitude"}
           onChange={handleChangeAmp}
         />
-        <Elem name="toggle">
+        <div className={cn("audio-config").elem("toggle").toClassName()}>
           <Toggle
             checked={settings?.loopRegion}
             onChange={(e) => changeSetting?.("loopRegion", e.target.checked)}
             label="Loop Regions"
           />
-        </Elem>
-        <Elem name="toggle">
+        </div>
+        <div className={cn("audio-config").elem("toggle").toClassName()}>
           <Toggle
             checked={settings?.autoPlayNewSegments}
             onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)}
             label="Auto-play New Regions"
           />
-        </Elem>
+        </div>
         {renderLayerToggles()}
         <SpectrogramConfig waveform={waveform} />
-      </Elem>
+      </div>
     );
   };
 
   return (
-    <Block name="audio-config" onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
+    <div
+      className={cn("audio-config").toClassName()}
+      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
+    >
       <ControlButton look={configModal ? "active" : undefined} onClick={onSetModal}>
         {<IconConfig />}
       </ControlButton>
       {configModal && renderModal()}
-    </Block>
+    </div>
   );
 };