diff --git a/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx b/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
index 7b28bf0a3498..77c8c4df96d5 100644
--- a/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
+++ b/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });
diff --git a/web/libs/editor/src/components/Label/Label.jsx b/web/libs/editor/src/components/Label/Label.jsx
index e4995ffd52b4..115906538bc9 100644
--- a/web/libs/editor/src/components/Label/Label.jsx
+++ b/web/libs/editor/src/components/Label/Label.jsx
@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import React, { useMemo } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { asVars } from "../../utils/styles";
 
 import "./Label.scss";
@@ -36,25 +36,19 @@ export const Label = React.forwardRef(
     }, [color]);
 
     return (
-      <Block
-        tag="span"
+      <span
         ref={ref}
-        name="label"
-        mod={{ empty, hidden, selected, clickable: !!onClick, margins }}
-        mix={className}
+        className={cn("label")
+          .mod({ empty, hidden, selected, clickable: !!onClick, margins })
+          .mix(className)
+          .toClassName()}
         style={styles}
         onClick={onClick}
         {...rest}
       >
-        <Elem tag="span" name="text">
-          {children}
-        </Elem>
-        {hotkey ? (
-          <Elem tag="span" name="hotkey">
-            {hotkey}
-          </Elem>
-        ) : null}
-      </Block>
+        <span className={cn("label").elem("text").toClassName()}>{children}</span>
+        {hotkey ? <span className={cn("label").elem("hotkey").toClassName()}>{hotkey}</span> : null}
+      </span>
     );
   },
 );
diff --git a/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx b/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
index 7b28bf0a3498..77c8c4df96d5 100644
--- a/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
+++ b/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });
diff --git a/web/libs/editor/src/tags/control/Choice.jsx b/web/libs/editor/src/tags/control/Choice.jsx
index 6df286ee3c82..580afd2350cf 100644
--- a/web/libs/editor/src/tags/control/Choice.jsx
+++ b/web/libs/editor/src/tags/control/Choice.jsx
@@ -11,7 +11,7 @@ import Types from "../../core/Types";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { TagParentMixin } from "../../mixins/TagParentMixin";
 import { FF_DEV_3391, isFF } from "../../utils/feature-flags";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choice/Choice.scss";
 import { IconChevron } from "@humansignal/ui";
 import { HintTooltip } from "../../components/Taxonomy/Taxonomy";
@@ -194,16 +194,17 @@ const HtxNewChoiceView = ({ item, store }) => {
   const [collapsed, setCollapsed] = useState(false);
   const toogleCollapsed = useCallback(() => setCollapsed((collapsed) => !collapsed), []);
 
+  const CheckboxComponent = nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value);
+
   return (
-    <Block
-      name="choice"
-      mod={{ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible }}
+    <div
+      className={cn("choice")
+        .mod({ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible })
+        .toClassName()}
     >
-      <Elem name="item" mod={{ notLeaf: !item.isLeaf }} style={style}>
-        <Elem
-          name="checkbox"
-          component={nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value)}
-          mod={{ notLeaf: !item.isLeaf }}
+      <div className={cn("choice").elem("item").mod({ notLeaf: !item.isLeaf }).toClassName()} style={style}>
+        <CheckboxComponent
+          className={cn("choice").elem("checkbox").mod({ notLeaf: !item.isLeaf }).toClassName()}
           checked={item.sel}
           indeterminate={!item.sel && item.indeterminate}
           disabled={item.isReadOnly()}
@@ -213,21 +214,25 @@ const HtxNewChoiceView = ({ item, store }) => {
             {item.html ? <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.html) }} /> : item._value}
             {showHotkey && <Hint>[{item.hotkey}]</Hint>}
           </HintTooltip>
-        </Elem>
+        </CheckboxComponent>
         {!item.isLeaf ? (
-          <Elem name="toggle" mod={{ collapsed }} component={Button} type="text" onClick={toogleCollapsed}>
+          <Button
+            className={cn("choice").elem("toggle").mod({ collapsed }).toClassName()}
+            type="text"
+            onClick={toogleCollapsed}
+          >
             <IconChevron />
-          </Elem>
+          </Button>
         ) : (
           false
         )}
-      </Elem>
+      </div>
       {item.nestedResults && item.children?.length ? (
-        <Elem name="children" mod={{ collapsed }}>
+        <div className={cn("choice").elem("children").mod({ collapsed }).toClassName()}>
           {Tree.renderChildren(item, item.annotation)}
-        </Elem>
+        </div>
       ) : null}
-    </Block>
+    </div>
   );
 };
 
diff --git a/web/libs/editor/src/tags/control/Choices.jsx b/web/libs/editor/src/tags/control/Choices.jsx
index 321ed80b4a4c..964c7d9e476b 100644
--- a/web/libs/editor/src/tags/control/Choices.jsx
+++ b/web/libs/editor/src/tags/control/Choices.jsx
@@ -12,7 +12,7 @@ import Types from "../../core/Types";
 import { guidGenerator } from "../../core/Helpers";
 import ControlBase from "./Base";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choices/Choices.scss";
 
 import "./Choice";
@@ -292,13 +292,14 @@ const ChoicesSelectLayout = observer(({ item }) => {
 
 const HtxChoices = observer(({ item }) => {
   return (
-    <Block
-      name="choices"
-      mod={{ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout }}
+    <div
+      className={cn("choices")
+        .mod({ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout })
+        .toClassName()}
       ref={item.elementRef}
     >
       {item.layout === "select" ? <ChoicesSelectLayout item={item} /> : Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });
 
diff --git a/web/libs/editor/src/tags/control/Labels/Labels.jsx b/web/libs/editor/src/tags/control/Labels/Labels.jsx
index a70c27449145..0c28f2e50c38 100644
--- a/web/libs/editor/src/tags/control/Labels/Labels.jsx
+++ b/web/libs/editor/src/tags/control/Labels/Labels.jsx
@@ -11,7 +11,7 @@ import { AnnotationMixin } from "../../../mixins/AnnotationMixin";
 import DynamicChildrenMixin from "../../../mixins/DynamicChildrenMixin";
 import LabelMixin from "../../../mixins/LabelMixin";
 import SelectedModelMixin from "../../../mixins/SelectedModel";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ControlBase from "../Base";
 import "../Label";
 import "./Labels.scss";
@@ -146,9 +146,9 @@ const LabelsModel = types.compose(
 
 const HtxLabels = observer(({ item }) => {
   return (
-    <Block name="labels" mod={{ hidden: !item.visible, inline: item.showinline }}>
+    <div className={cn("labels").mod({ hidden: !item.visible, inline: item.showinline }).toClassName()}>
       {Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });
 
diff --git a/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx b/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
index 43f67ff74d82..09e452fa7c45 100644
--- a/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
+++ b/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
@@ -8,7 +8,7 @@ import { IconTrash } from "@humansignal/icons";
 import styles from "../../../components/HtxTextBox/HtxTextBox.module.scss";
 import Registry from "../../../core/Registry";
 import { PER_REGION_MODES } from "../../../mixins/PerRegion";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import "./TextArea.scss";
 
@@ -52,7 +52,7 @@ const HtxTextAreaResultLine = forwardRef(
     );
 
     const inputProps = {
-      className: `ant-input ${styles.input}`,
+      className: `ant-input ${styles.input} ${cn("textarea-tag").elem("input").toClassName()}`,
       value: displayValue,
       autoSize: isTextarea ? { minRows: 1 } : null,
       onChange: changeHandler,
@@ -70,23 +70,27 @@ const HtxTextAreaResultLine = forwardRef(
       }
     };
 
+
     return (
-      <Elem name="item">
-        <Elem name="input" tag={isTextarea ? TextArea : Input} {...inputProps} ref={ref} />
+      <div className={cn("textarea-tag").elem("item").toClassName()}>
+        {isTextarea ? (
+          <TextArea {...inputProps} ref={ref} />
+        ) : (
+          <Input {...inputProps} ref={ref} />
+        )}
         {canDelete && !collapsed && !readOnly && (
-          <Elem
-            name="action"
+          <Button
+            className={cn("textarea-tag").elem("action").toClassName()}
             size="small"
             look="string"
             aria-label="Delete Region"
-            tag={Button}
             leading={<IconTrash />}
             onClick={() => {
               onDelete(idx);
             }}
           />
         )}
-      </Elem>
+      </div>
     );
   },
 );
@@ -193,7 +197,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
     ref: mainInputRef,
     value,
     rows: item.rows,
-    className: "is-search",
+    className: `is-search ${cn("textarea-tag").elem("input").toClassName()}` ,
     label: item.label,
     placeholder: item.placeholder,
     autoSize: isTextArea ? { minRows: 1 } : null,
@@ -245,7 +249,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
 
   return (
     (result || showSubmit) && (
-      <Block name="textarea-tag" mod={{ mode: item.mode, outliner }} style={styles}>
+      <div className={cn("textarea-tag").mod({ mode: item.mode, outliner }).toClassName()} style={styles}>
         {result ? (
           <HtxTextAreaResult
             control={item}
@@ -258,9 +262,8 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
         ) : null}
 
         {showSubmit && (
-          <Elem
-            name="form"
-            tag={Form}
+          <Form
+            className={cn("textarea-tag").elem("form").toClassName()}
             onFinish={() => {
               if (item.allowsubmit && item._value && !item.annotation.isReadOnly()) {
                 submitValue();
@@ -271,17 +274,24 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
               e.stopPropagation();
             }}
           >
-            <Elem
-              name="input"
-              tag={isTextArea ? TextArea : Input}
-              {...props}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
-          </Elem>
+            {isTextArea ? (
+              <TextArea
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            ) : (
+              <Input
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            )}
+          </Form>
         )}
-      </Block>
+      </div>
     )
   );
 });
diff --git a/web/libs/editor/src/tags/object/Audio/view.tsx b/web/libs/editor/src/tags/object/Audio/view.tsx
index 4c1357db729a..5205b6ae7746 100644
--- a/web/libs/editor/src/tags/object/Audio/view.tsx
+++ b/web/libs/editor/src/tags/object/Audio/view.tsx
@@ -11,7 +11,7 @@ import { useWaveform } from "../../../lib/AudioUltra/react";
 import type { Region } from "../../../lib/AudioUltra/Regions/Region";
 import type { Segment } from "../../../lib/AudioUltra/Regions/Segment";
 import type { Regions } from "../../../lib/AudioUltra/Regions/Regions";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { useSpectrogramControls as useSpectrogramControlsHook } from "../../../lib/AudioUltra/hooks/useSpectrogramControls";
 import { getCurrentTheme } from "@humansignal/ui";
 import { FF_AUDIO_SPECTROGRAMS, isFF } from "../../../utils/feature-flags";
@@ -182,7 +182,7 @@ const AudioView: FC<AudioProps> = observer(
     }, []);
 
     return (
-      <Block name="audio-tag">
+      <div className={cn("audio-tag").toClassName()}>
         {children}
         <div
           ref={(el) => {
@@ -242,7 +242,7 @@ const AudioView: FC<AudioProps> = observer(
           }}
           layerVisibility={controls.layerVisibility}
         />
-      </Block>
+      </div>
     );
   },
 );
diff --git a/web/libs/editor/src/tags/object/RichText/view.jsx b/web/libs/editor/src/tags/object/RichText/view.jsx
index 5a27750ec3e1..dd87f31ebcb0 100644
--- a/web/libs/editor/src/tags/object/RichText/view.jsx
+++ b/web/libs/editor/src/tags/object/RichText/view.jsx
@@ -9,7 +9,7 @@ import * as xpath from "xpath-range";
 import ObjectTag from "../../../components/Tags/Object";
 import { STATE_CLASS_MODS } from "../../../mixins/HighlightMixin";
 import Utils from "../../../utils";
-import { Block, cn, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { htmlEscape, matchesSelector } from "../../../utils/html";
 import {
   applyTextGranularity,
@@ -558,44 +558,44 @@ class RichTextPieceView extends Component {
       };
 
       return (
-        <Block name="richtext" tag={ObjectTag} item={item}>
-          <Elem
+        <ObjectTag item={item} className={cn("richtext").toClassName()}>
+          <div
             key="root"
-            name="container"
-            mod={{ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) }}
+            className={cn("richtext")
+              .elem("container")
+              .mod({ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) })
+              .mix("htx-richtext")
+              .toClassName()}
             ref={(el) => {
               item.mountNodeRef.current = el;
               el && this.markObjectAsLoaded();
             }}
             data-linenumbers={isText && settings.showLineNumbers ? "enabled" : "disabled"}
-            className="htx-richtext"
             dangerouslySetInnerHTML={{ __html: val }}
             {...eventHandlers}
           />
-        </Block>
+        </ObjectTag>
       );
     }
     return (
-      <Block name="richtext" tag={ObjectTag} item={item}>
-        <Elem name="loading" ref={this.loadingRef}>
+      <ObjectTag item={item} className={cn("richtext").toClassName()}>
+        <div className={cn("richtext").elem("loading").toClassName()} ref={this.loadingRef}>
           <LoadingOutlined />
-        </Elem>
-
-        <Elem
+        </div>
+        {/* biome-ignore lint/a11y/useIframeTitle: As a result from BEM migration */}
+        <iframe
           key="root"
-          name="iframe"
-          tag="iframe"
+          className={cn("richtext").elem("iframe").mix("htx-richtext").toClassName()}
           referrerPolicy="no-referrer"
           sandbox="allow-same-origin allow-scripts"
           ref={(el) => {
             item.setReady(false);
             item.mountNodeRef.current = el;
           }}
-          className="htx-richtext"
           srcDoc={val}
           onLoad={this.onIFrameLoad}
         />
-      </Block>
+      </ObjectTag>
     );
   }
 }
diff --git a/web/libs/editor/src/tags/object/Video/HtxVideo.jsx b/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
index ae1d8c4fad2c..e935806bc015 100644
--- a/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
+++ b/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
@@ -19,7 +19,7 @@ import {
 import { defaultStyle } from "../../../core/Constants";
 import { useFullscreen } from "../../../hooks/useFullscreen";
 import { useToggle } from "../../../hooks/useToggle";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ResizeObserver from "../../../utils/resize-observer";
 import { clamp, isDefined } from "../../../utils/utilities";
 import "./Video.scss";
@@ -497,14 +497,14 @@ const HtxVideoView = ({ item, store }) => {
 
   return (
     <ObjectTag item={item}>
-      <Block name="video-segmentation" ref={mainContentRef} mod={{ fullscreen: isFullScreen }}>
+      <div className={cn("video-segmentation").mod({ fullscreen: isFullScreen }).toClassName()} ref={mainContentRef}>
         {item.errors?.map((error, i) => (
           <ErrorMessage key={`err-${i}`} error={error} />
         ))}
 
-        <Block name="video" mod={{ fullscreen: isFullScreen }} ref={videoBlockRef}>
-          <Elem
-            name="main"
+        <div className={cn("video").mod({ fullscreen: isFullScreen }).toClassName()} ref={videoBlockRef}>
+          <div
+            className={cn("video").elem("main").toClassName()}
             ref={videoContainerRef}
             style={{ height: Number(item.height) }}
             onMouseDown={handlePan}
@@ -553,13 +553,12 @@ const HtxVideoView = ({ item, store }) => {
                 />
               </>
             )}
-          </Elem>
-        </Block>
+          </div>
+        </div>
 
         {loaded && (
-          <Elem
-            name="timeline"
-            tag={Timeline}
+          <Timeline
+            className={cn("video-segmentation").elem("timeline").toClassName()}
             playing={isSyncedBuffering && item.isBuffering ? item.wasPlayingBeforeBuffering : playing}
             buffering={isSyncedBuffering ? item.isBuffering : false}
             length={videoLength}
@@ -612,7 +611,7 @@ const HtxVideoView = ({ item, store }) => {
             onAction={handleAction}
           />
         )}
-      </Block>
+      </div>
     </ObjectTag>
   );
 };
diff --git a/web/libs/editor/src/utils/bem.ts b/web/libs/editor/src/utils/bem.ts
index 6559564c9c8e..ac99e2f736c4 100644
--- a/web/libs/editor/src/utils/bem.ts
+++ b/web/libs/editor/src/utils/bem.ts
@@ -1,11 +1,5 @@
 export {
   cnb as cn,
-  Block,
-  Elem,
-  BemWithSpecificContext,
-  BlockContext,
-  useBEM,
   type CN,
   type CNTagName,
-  type BemComponent,
 } from "@humansignal/core/lib/utils/bem";