diff --git a/src/scripts/ui/settings.ts b/src/scripts/ui/settings.ts
index 8121f474b..7583fe486 100644
--- a/src/scripts/ui/settings.ts
+++ b/src/scripts/ui/settings.ts
@@ -1,11 +1,9 @@
-// @ts-strict-ignore
-import { $el } from '../ui'
-import { api } from '../api'
+import { api } from '@/scripts/api'
+import type { ComfyApp } from '@/scripts/app'
 import { ComfyDialog } from './dialog'
-import type { ComfyApp } from '../app'
 import type { Setting, SettingParams } from '@/types/settingTypes'
+import type { Settings } from '@/types/apiTypes'
 import { useSettingStore } from '@/stores/settingStore'
-import { Settings } from '@/types/apiTypes'
 import { useToastStore } from '@/stores/toastStore'
 
 export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
@@ -16,44 +14,10 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
 
   constructor(app: ComfyApp) {
     super()
-    const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
     this.app = app
     this.settingsValues = {}
     this.settingsLookup = {}
     this.settingsParamLookup = {}
-    this.element = $el(
-      'dialog',
-      {
-        id: 'comfy-settings-dialog',
-        parent: document.body
-      },
-      [
-        $el('table.comfy-modal-content.comfy-table', [
-          $el(
-            'caption',
-            { textContent: `Settings (v${frontendVersion})` },
-            $el('button.comfy-btn', {
-              type: 'button',
-              textContent: '\u00d7',
-              onclick: () => {
-                this.element.close()
-              }
-            })
-          ),
-          $el('tbody', { $: (tbody) => (this.textElement = tbody) }),
-          $el('button', {
-            type: 'button',
-            textContent: 'Close',
-            style: {
-              cursor: 'pointer'
-            },
-            onclick: () => {
-              this.element.close()
-            }
-          })
-        ])
-      ]
-    ) as HTMLDialogElement
   }
 
   get settings() {
@@ -187,16 +151,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
    * ```
    */
   addSetting(params: SettingParams) {
-    const {
-      id,
-      name,
-      type,
-      defaultValue,
-      onChange,
-      attrs = {},
-      tooltip = '',
-      options = undefined
-    } = params
+    const { id, name, type, defaultValue, onChange } = params
     if (!id) {
       throw new Error('Settings must have an ID')
     }
@@ -236,164 +191,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
       onChange,
       name,
       render: () => {
-        if (type === 'hidden') return
-
-        const setter = (v) => {
-          if (onChange) {
-            onChange(v, value)
-          }
-
-          this.setSettingValue(id, v)
-          value = v
-        }
-        value = this.getSettingValue(id, defaultValue)
-
-        let element
-        const htmlID = id.replaceAll('.', '-')
-
-        const labelCell = $el('td', [
-          $el('label', {
-            for: htmlID,
-            classList: [tooltip !== '' ? 'comfy-tooltip-indicator' : ''],
-            textContent: name
-          })
-        ])
-
-        if (typeof type === 'function') {
-          element = type(name, setter, value, attrs)
-        } else {
-          switch (type) {
-            case 'boolean':
-              element = $el('tr', [
-                labelCell,
-                $el('td', [
-                  $el('input', {
-                    id: htmlID,
-                    type: 'checkbox',
-                    checked: value,
-                    onchange: (event) => {
-                      const isChecked = event.target.checked
-                      if (onChange !== undefined) {
-                        onChange(isChecked)
-                      }
-                      this.setSettingValue(id, isChecked)
-                    }
-                  })
-                ])
-              ])
-              break
-            case 'number':
-              element = $el('tr', [
-                labelCell,
-                $el('td', [
-                  $el('input', {
-                    type,
-                    value,
-                    id: htmlID,
-                    oninput: (e) => {
-                      setter(e.target.value)
-                    },
-                    ...attrs
-                  })
-                ])
-              ])
-              break
-            case 'slider':
-              element = $el('tr', [
-                labelCell,
-                $el('td', [
-                  $el(
-                    'div',
-                    {
-                      style: {
-                        display: 'grid',
-                        gridAutoFlow: 'column'
-                      }
-                    },
-                    [
-                      $el('input', {
-                        ...attrs,
-                        value,
-                        type: 'range',
-                        oninput: (e) => {
-                          setter(e.target.value)
-                          e.target.nextElementSibling.value = e.target.value
-                        }
-                      }),
-                      $el('input', {
-                        ...attrs,
-                        value,
-                        id: htmlID,
-                        type: 'number',
-                        style: { maxWidth: '4rem' },
-                        oninput: (e) => {
-                          setter(e.target.value)
-                          e.target.previousElementSibling.value = e.target.value
-                        }
-                      })
-                    ]
-                  )
-                ])
-              ])
-              break
-            case 'combo':
-              element = $el('tr', [
-                labelCell,
-                $el('td', [
-                  $el(
-                    'select',
-                    {
-                      oninput: (e) => {
-                        setter(e.target.value)
-                      }
-                    },
-                    (typeof options === 'function'
-                      ? options(value)
-                      : options || []
-                    ).map((opt) => {
-                      if (typeof opt === 'string') {
-                        opt = { text: opt }
-                      }
-                      const v = opt.value ?? opt.text
-                      return $el('option', {
-                        value: v,
-                        textContent: opt.text,
-                        selected: value + '' === v + ''
-                      })
-                    })
-                  )
-                ])
-              ])
-              break
-            case 'text':
-            default:
-              if (type !== 'text') {
-                console.warn(
-                  `Unsupported setting type '${type}, defaulting to text`
-                )
-              }
-
-              element = $el('tr', [
-                labelCell,
-                $el('td', [
-                  $el('input', {
-                    value,
-                    id: htmlID,
-                    oninput: (e) => {
-                      setter(e.target.value)
-                    },
-                    ...attrs
-                  })
-                ])
-              ])
-              break
-          }
-        }
-        if (tooltip) {
-          element.title = tooltip
-        }
-
-        return element
+        console.warn('[ComfyUI] Setting render is deprecated', id)
       }
     } as Setting
 
@@ -407,21 +205,4 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
       }
     }
   }
-
-  show() {
-    this.textElement.replaceChildren(
-      $el(
-        'tr',
-        {
-          style: { display: 'none' }
-        },
-        [$el('th'), $el('th', { style: { width: '33%' } })]
-      ),
-      ...this.settings
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((s) => s.render())
-        .filter(Boolean)
-    )
-    this.element.showModal()
-  }
 }