diff --git a/web/libs/editor/src/components/Settings/Settings.jsx b/web/libs/editor/src/components/Settings/Settings.jsx
index 9c42a42af121..870972031c0c 100644
--- a/web/libs/editor/src/components/Settings/Settings.jsx
+++ b/web/libs/editor/src/components/Settings/Settings.jsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { Hotkey } from "../../core/Hotkey";
 
 import "./Settings.scss";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { triggerResizeEvent } from "../../utils/utilities";
 
 import EditorSettings from "../../core/settings/editorsettings";
@@ -30,23 +30,23 @@ const HotkeysDescription = () => {
         key: k,
         combo: k.split(",").map((keyGroup) => {
           return (
-            <Elem name="key-group" key={keyGroup}>
+            <div className={cn("keys").elem("key-group").toClassName()} key={keyGroup}>
               {keyGroup
                 .trim()
                 .split("+")
                 .map((k) => (
-                  <Elem tag="kbd" name="key" key={k}>
+                  <kbd className={cn("keys").elem("key").toClassName()} key={k}>
                     {k}
-                  </Elem>
+                  </kbd>
                 ))}
-            </Elem>
+            </div>
           );
         }),
         descr: descr[k],
       }));
 
   return (
-    <Block name="keys">
+    <div className={cn("keys").toClassName()}>
       <Tabs size="small">
         {Object.entries(keyNamespaces).map(([ns, data]) => {
           if (Object.keys(data.descriptions).length === 0) {
@@ -59,7 +59,7 @@ const HotkeysDescription = () => {
           );
         })}
       </Tabs>
-    </Block>
+    </div>
   );
 };
 
@@ -82,26 +82,28 @@ if (isFF(FF_DEV_3873)) {
 }
 
 const SettingsTag = ({ children }) => {
-  return <Block name="settings-tag">{children}</Block>;
+  return <div className={cn("settings-tag").toClassName()}>{children}</div>;
 };
 
 const GeneralSettings = observer(({ store }) => {
   return (
-    <Block name="settings" mod={newUI}>
+    <div className={cn("settings").mod(newUI).toClassName()}>
       {editorSettingsKeys.map((obj, index) => {
         return (
-          <Elem name="field" tag="label" key={index}>
+          <label className={cn("settings").elem("field").toClassName()} key={index}>
             {isFF(FF_DEV_3873) ? (
               <>
-                <Block name="settings__label">
-                  <Elem name="title">
+                <div className={cn("settings__label").toClassName()}>
+                  <div className={cn("settings__label").elem("title").toClassName()}>
                     {EditorSettings[obj].newUI.title}
                     {EditorSettings[obj].newUI.tags?.split(",").map((tag) => (
                       <SettingsTag key={tag}>{tag}</SettingsTag>
                     ))}
-                  </Elem>
-                  <Elem name="description">{EditorSettings[obj].newUI.description}</Elem>
-                </Block>
+                  </div>
+                  <div className={cn("settings__label").elem("description").toClassName()}>
+                    {EditorSettings[obj].newUI.description}
+                  </div>
+                </div>
                 <Toggle
                   key={index}
                   checked={store.settings[obj]}
@@ -121,17 +123,17 @@ const GeneralSettings = observer(({ store }) => {
                 <br />
               </>
             )}
-          </Elem>
+          </label>
         );
       })}
-    </Block>
+    </div>
   );
 });
 
 const LayoutSettings = observer(({ store }) => {
   return (
-    <Block name="settings" mod={newUI}>
-      <Elem name="field">
+    <div className={cn("settings").mod(newUI).toClassName()}>
+      <div className={cn("settings").elem("field").toClassName()}>
         <Checkbox
           checked={store.settings.bottomSidePanel}
           onChange={() => {
@@ -141,15 +143,15 @@ const LayoutSettings = observer(({ store }) => {
         >
           Move sidepanel to the bottom
         </Checkbox>
-      </Elem>
+      </div>
 
-      <Elem name="field">
+      <div className={cn("settings").elem("field").toClassName()}>
         <Checkbox checked={store.settings.displayLabelsByDefault} onChange={store.settings.toggleSidepanelModel}>
           Display Labels by default in Results panel
         </Checkbox>
-      </Elem>
+      </div>
 
-      <Elem name="field">
+      <div className={cn("settings").elem("field").toClassName()}>
         <Checkbox
           value="Show Annotations panel"
           defaultChecked={store.settings.showAnnotationsPanel}
@@ -159,9 +161,9 @@ const LayoutSettings = observer(({ store }) => {
         >
           Show Annotations panel
         </Checkbox>
-      </Elem>
+      </div>
 
-      <Elem name="field">
+      <div className={cn("settings").elem("field").toClassName()}>
         <Checkbox
           value="Show Predictions panel"
           defaultChecked={store.settings.showPredictionsPanel}
@@ -171,10 +173,10 @@ const LayoutSettings = observer(({ store }) => {
         >
           Show Predictions panel
         </Checkbox>
-      </Elem>
+      </div>
 
       {/* Saved for future use */}
-      {/* <Elem name="field">
+      {/* <div className={cn("settings").elem("field").toClassName()}>
         <Checkbox
           value="Show image in fullsize"
           defaultChecked={store.settings.imageFullSize}
@@ -184,8 +186,8 @@ const LayoutSettings = observer(({ store }) => {
         >
           Show image in fullsize
         </Checkbox>
-      </Elem> */}
-    </Block>
+      </div> */}
+    </div>
   );
 });
 
@@ -228,12 +230,14 @@ export default observer(({ store }) => {
   }, []);
 
   return (
-    <Block
-      tag={Modal}
+    <Modal
+      className={cn(DEFAULT_MODAL_SETTINGS.name).toClassName()}
       open={store.showingSettings}
       onCancel={store.toggleSettings}
       footer=""
-      {...DEFAULT_MODAL_SETTINGS}
+      title={DEFAULT_MODAL_SETTINGS.title}
+      closeIcon={DEFAULT_MODAL_SETTINGS.closeIcon}
+      bodyStyle={DEFAULT_MODAL_SETTINGS.bodyStyle}
     >
       <Tabs defaultActiveKey={DEFAULT_ACTIVE}>
         {Object.entries(Settings).map(([key, { name, component }]) => (
@@ -247,6 +251,6 @@ export default observer(({ store }) => {
           </Tabs.TabPane>
         ))}
       </Tabs>
-    </Block>
+    </Modal>
   );
 });
diff --git a/web/libs/editor/src/components/Settings/TagSettings/SettingsRenderer.tsx b/web/libs/editor/src/components/Settings/TagSettings/SettingsRenderer.tsx
index 7befd5ae9022..12b9c8bfe344 100644
--- a/web/libs/editor/src/components/Settings/TagSettings/SettingsRenderer.tsx
+++ b/web/libs/editor/src/components/Settings/TagSettings/SettingsRenderer.tsx
@@ -3,16 +3,16 @@ import { Checkbox } from "@humansignal/ui";
 import { observer } from "mobx-react";
 import type { FC } from "react";
 import type { SettingsProperties, SettingsProperty } from "../../../core/settings/types";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { isFF } from "../../../utils/feature-flags";
 
 const SettingsRendererPure: FC<{ store: any; settings: SettingsProperties }> = ({ store, settings }) => {
   return (
-    <Block name="settings">
+    <div className={cn("settings").toClassName()}>
       {Object.entries(settings).map(([key, value]) => {
         return value.ff && !isFF(value.ff) ? null : <SettingsField key={key} name={key} store={store} value={value} />;
       })}
-    </Block>
+    </div>
   );
 };
 
@@ -54,7 +54,7 @@ const SettingsField: FC<{
   }
 
   return (
-    <Elem name="field" key={name}>
+    <div className={cn("settings").elem("field").toClassName()} key={name}>
       {value.type === "boolean" ? (
         <Checkbox {...props}>{value.description}</Checkbox>
       ) : (
@@ -63,7 +63,7 @@ const SettingsField: FC<{
           <Input {...props} />
         </label>
       )}
-    </Elem>
+    </div>
   );
 });