diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
index 98c553cc1a..4ff490c2bb 100644
--- a/app/assets/javascripts/alchemy/admin.js
+++ b/app/assets/javascripts/alchemy/admin.js
@@ -9,4 +9,3 @@
 //= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.link_dialog
-//= require alchemy/alchemy.preview_window
diff --git a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
deleted file mode 100644
index ef495393f5..0000000000
--- a/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
+++ /dev/null
@@ -1,82 +0,0 @@
-window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
-
-Alchemy.PreviewWindow =
-  MIN_WIDTH: 240
-  HEIGHT: 75 # Top menu height
-
-  init: (previewUrl) ->
-    @select = document.querySelector('#preview_url')
-    @previewUrl = @_getCurrentPreviewUrl() || previewUrl[1]
-    $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{@previewUrl}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
-    $reload = $('#reload_preview_button')
-    @_showSpinner()
-    $iframe.on "load", =>
-      @_hideSpinner()
-    $('body').append($iframe)
-    @currentWindow = $iframe
-    @_bindReloadButton()
-    if @select
-      @select.value = @previewUrl
-      @_bindSelect()
-    return
-
-  resize: (width) ->
-    width = @MIN_WIDTH if width < @MIN_WIDTH
-    @currentWidth = width
-    @currentWindow.css
-      width: width
-
-  refresh: (callback) ->
-    $iframe = $('#alchemy_preview_window')
-    @_showSpinner()
-    # We need to be sure that no load event is binded on the preview frame.
-    $iframe.off('load')
-    $iframe.on "load", (e) =>
-      @_hideSpinner()
-      if callback
-        callback.call(e, $iframe)
-    $iframe.attr('src', @previewUrl)
-    true
-
-  postMessage: (data) ->
-    frameWindow = @currentWindow[0].contentWindow
-    frameWindow.postMessage(data, "*")
-
-  _showSpinner: ->
-    @reload = $('#reload_preview_button')
-    @spinner = new Alchemy.Spinner('small')
-    @reload.html @spinner.spin().el
-
-  _hideSpinner: ->
-    @spinner.stop()
-    @reload.html('<alchemy-icon name="refresh"></alchemy-icon>')
-
-  _bindReloadButton: ->
-    $reload = $('#reload_preview_button')
-    key 'alt+r', =>
-      @refresh()
-    $reload.on "click", (e) =>
-      e.preventDefault()
-      @refresh()
-
-  _getCurrentPreviewUrl: ->
-    if @select
-      option = Array.from(@select.options).find (o) =>
-        o.text == window.localStorage.getItem("alchemyPreview")
-      if option
-        option.value
-      else
-        null
-    else
-      null
-
-  _bindSelect: ->
-    $(@select).on "change", (e) =>
-      @previewUrl = e.target.value
-      option = e.target.querySelector("option[value='#{@previewUrl}']")
-      window.localStorage.setItem("alchemyPreview", option.text)
-      @refresh()
-      return
-
-Alchemy.reloadPreview = ->
-  Alchemy.PreviewWindow.refresh()
diff --git a/app/controllers/alchemy/admin/pages_controller.rb b/app/controllers/alchemy/admin/pages_controller.rb
index 7474f068ea..53cd4c8243 100644
--- a/app/controllers/alchemy/admin/pages_controller.rb
+++ b/app/controllers/alchemy/admin/pages_controller.rb
@@ -112,6 +112,7 @@ def edit
             klass.new(routes: Alchemy::Engine.routes).url_for(@page)
           ]
         end
+        @preview_url = @preview_urls.first.last
         @layoutpage = @page.layoutpage?
       end
 
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index be1a37835a..4325cbd6bb 100644
--- a/app/javascript/alchemy_admin.js
+++ b/app/javascript/alchemy_admin.js
@@ -18,28 +18,10 @@ import Sitemap from "alchemy_admin/sitemap"
 import SortableElements from "alchemy_admin/sortable_elements"
 import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
 
 // Web Components
-import "alchemy_admin/components/button"
-import "alchemy_admin/components/char_counter"
-import "alchemy_admin/components/clipboard_button"
-import "alchemy_admin/components/datepicker"
-import "alchemy_admin/components/dialog_link"
-import "alchemy_admin/components/element_editor"
-import "alchemy_admin/components/elements_window"
-import "alchemy_admin/components/message"
-import "alchemy_admin/components/growl"
-import "alchemy_admin/components/icon"
-import "alchemy_admin/components/ingredient_group"
-import "alchemy_admin/components/link_buttons"
-import "alchemy_admin/components/node_select"
-import "alchemy_admin/components/uploader"
-import "alchemy_admin/components/overlay"
-import "alchemy_admin/components/page_select"
-import "alchemy_admin/components/select"
-import "alchemy_admin/components/spinner"
-import "alchemy_admin/components/tags_autocomplete"
-import "alchemy_admin/components/tinymce"
+import "alchemy_admin/components"
 
 import { setDefaultAnimation } from "shoelace"
 
@@ -85,7 +67,8 @@ Object.assign(Alchemy, {
   Sitemap,
   SortableElements,
   Spinner,
-  PagePublicationFields
+  PagePublicationFields,
+  reloadPreview
 })
 
 Rails.start()
diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js
index 4b1c6a00fa..e53713e15b 100644
--- a/app/javascript/alchemy_admin/components/element_editor.js
+++ b/app/javascript/alchemy_admin/components/element_editor.js
@@ -97,7 +97,7 @@ export class ElementEditor extends HTMLElement {
   }
 
   focusElementPreview() {
-    Alchemy.PreviewWindow.postMessage({
+    this.previewWindow?.postMessage({
       message: "Alchemy.focusElement",
       element_id: this.elementId
     })
@@ -141,7 +141,9 @@ export class ElementEditor extends HTMLElement {
       this.elementErrors.classList.remove("hidden")
     } else {
       Alchemy.growl(data.notice)
-      Alchemy.PreviewWindow.refresh(() => this.focusElementPreview())
+      this.previewWindow?.refresh().then(() => {
+        this.focusElementPreview()
+      })
       this.updateTitle(data.previewText)
       data.ingredientAnchors.forEach((anchor) => {
         IngredientAnchorLink.updateIcon(anchor.ingredientId, anchor.active)
@@ -547,6 +549,10 @@ export class ElementEditor extends HTMLElement {
   get parentElementEditor() {
     return this.parentElement?.closest("alchemy-element-editor")
   }
+
+  get previewWindow() {
+    return document.getElementById("alchemy_preview_window")
+  }
 }
 
 customElements.define("alchemy-element-editor", ElementEditor)
diff --git a/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js b/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
index 3e16e018be..705c293629 100644
--- a/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
+++ b/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
@@ -1,4 +1,5 @@
 import { patch } from "alchemy_admin/utils/ajax"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
 
 export class PublishElementButton extends HTMLElement {
   constructor() {
@@ -14,7 +15,7 @@ export class PublishElementButton extends HTMLElement {
         .then((response) => {
           this.elementEditor.published = response.data.public
           this.tooltip.setAttribute("content", response.data.label)
-          Alchemy.reloadPreview()
+          reloadPreview()
         })
         .catch((error) => Alchemy.growl(error.message, "error"))
     }
diff --git a/app/javascript/alchemy_admin/components/elements_window.js b/app/javascript/alchemy_admin/components/elements_window.js
index 04be4027e5..251c1cc5ca 100644
--- a/app/javascript/alchemy_admin/components/elements_window.js
+++ b/app/javascript/alchemy_admin/components/elements_window.js
@@ -55,6 +55,10 @@ class ElementsWindow extends HTMLElement {
     return document.querySelector("#element_window_button")
   }
 
+  get previewWindow() {
+    return document.getElementById("alchemy_preview_window")
+  }
+
   #attachEvents() {
     this.collapseButton?.addEventListener("click", () => {
       this.collapseAllElements()
@@ -72,7 +76,7 @@ class ElementsWindow extends HTMLElement {
         this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
           editor.classList.remove("selected")
         })
-        Alchemy.PreviewWindow.postMessage({ message: "Alchemy.blurElements" })
+        this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
       }
     })
   }
diff --git a/app/javascript/alchemy_admin/components/index.js b/app/javascript/alchemy_admin/components/index.js
new file mode 100644
index 0000000000..4b9a1ad75e
--- /dev/null
+++ b/app/javascript/alchemy_admin/components/index.js
@@ -0,0 +1,21 @@
+import "alchemy_admin/components/button"
+import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/clipboard_button"
+import "alchemy_admin/components/datepicker"
+import "alchemy_admin/components/dialog_link"
+import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/elements_window"
+import "alchemy_admin/components/message"
+import "alchemy_admin/components/growl"
+import "alchemy_admin/components/icon"
+import "alchemy_admin/components/ingredient_group"
+import "alchemy_admin/components/link_buttons"
+import "alchemy_admin/components/node_select"
+import "alchemy_admin/components/uploader"
+import "alchemy_admin/components/overlay"
+import "alchemy_admin/components/page_select"
+import "alchemy_admin/components/preview_window"
+import "alchemy_admin/components/select"
+import "alchemy_admin/components/spinner"
+import "alchemy_admin/components/tags_autocomplete"
+import "alchemy_admin/components/tinymce"
diff --git a/app/javascript/alchemy_admin/components/preview_window.js b/app/javascript/alchemy_admin/components/preview_window.js
new file mode 100644
index 0000000000..31f934b59b
--- /dev/null
+++ b/app/javascript/alchemy_admin/components/preview_window.js
@@ -0,0 +1,121 @@
+const MIN_WIDTH = 240
+
+class PreviewWindow extends HTMLIFrameElement {
+  #afterLoad
+  #reloadIcon
+
+  constructor() {
+    super()
+    this.addEventListener("load", this)
+  }
+
+  handleEvent(evt) {
+    if (evt.type === "load") {
+      this.#stopSpinner()
+      this.#afterLoad?.call(this, evt)
+    }
+  }
+
+  connectedCallback() {
+    let url = this.url
+
+    this.#attachEvents()
+
+    if (window.localStorage.getItem("alchemy-preview-url")) {
+      url = window.localStorage.getItem("alchemy-preview-url")
+      this.previewUrlSelect.value = url
+    }
+
+    this.refresh(url)
+  }
+
+  disconnectedCallback() {
+    key.unbind("alt+r")
+  }
+
+  postMessage(data) {
+    this.contentWindow.postMessage(data, "*")
+  }
+
+  resize(width) {
+    if (width < MIN_WIDTH) {
+      width = MIN_WIDTH
+    }
+    this.style.width = `${width}px`
+  }
+
+  refresh(url) {
+    this.#startSpinner()
+
+    if (url) {
+      this.src = url
+    } else {
+      this.src = this.url
+    }
+
+    return new Promise((resolve) => {
+      this.#afterLoad = resolve
+    })
+  }
+
+  #attachEvents() {
+    this.reloadButton?.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.refresh()
+    })
+
+    key("alt+r", () => this.refresh())
+
+    // Need to listen with jQuery here because select2 does not emit native events.
+    $(this.sizeSelect).on("change", (evt) => {
+      const select = evt.target
+      const width = select.value
+
+      if (width === "auto") {
+        this.style.width = null
+      } else {
+        this.resize(width)
+      }
+    })
+
+    this.previewUrlSelect?.addEventListener("change", (evt) => {
+      const url = evt.target.value
+      window.localStorage.setItem("alchemy-preview-url", url)
+      this.refresh(url)
+    })
+  }
+
+  #startSpinner() {
+    this.#reloadIcon = this.reloadButton.innerHTML
+    this.reloadButton.innerHTML = `<alchemy-spinner size="small"></alchemy-spinner>`
+  }
+
+  #stopSpinner() {
+    this.reloadButton.innerHTML = this.#reloadIcon
+  }
+
+  get url() {
+    return this.getAttribute("url")
+  }
+
+  get sizeSelect() {
+    return document.querySelector("select#preview_size")
+  }
+
+  get previewUrlSelect() {
+    return document.querySelector("select#preview_url")
+  }
+
+  get reloadButton() {
+    return document.querySelector("#reload_preview_button")
+  }
+}
+
+customElements.define("alchemy-preview-window", PreviewWindow, {
+  extends: "iframe"
+})
+
+export function reloadPreview() {
+  const previewWindow = document.getElementById("alchemy_preview_window")
+  previewWindow.refresh()
+}
diff --git a/app/javascript/alchemy_admin/sortable_elements.js b/app/javascript/alchemy_admin/sortable_elements.js
index d73514aea2..b5314cc43e 100644
--- a/app/javascript/alchemy_admin/sortable_elements.js
+++ b/app/javascript/alchemy_admin/sortable_elements.js
@@ -1,5 +1,6 @@
 import Sortable from "sortablejs"
 import { post } from "alchemy_admin/utils/ajax"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
 
 const SORTABLE_OPTIONS = {
   draggable: ".element-editor",
@@ -36,7 +37,7 @@ function onSort(event) {
     post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
       const data = response.data
       Alchemy.growl(data.message)
-      Alchemy.PreviewWindow.refresh()
+      reloadPreview()
       item.updateTitle(data.preview_text)
     })
   }
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index facfe13f38..7b43d94d22 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -105,7 +105,7 @@
       <label><%= Alchemy.t(:preview_url) %></label>
       <%= select_tag 'preview_url',
         options_for_select(@preview_urls),
-        class: 'large', is: 'alchemy-select' %>
+        class: 'large' %>
     </div>
   <% end %>
   <div class="toolbar_button">
@@ -133,6 +133,13 @@
   <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
+<iframe
+  url="<%= @preview_url %>"
+  id="alchemy_preview_window"
+  is="alchemy-preview-window"
+  frameborder="0">
+</iframe>
+
 <%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id) do %>
   <alchemy-spinner></alchemy-spinner>
 <% end %>
@@ -147,24 +154,6 @@
     });
     Alchemy.PagePublicationFields();
     Alchemy.PageLeaveObserver();
-    Alchemy.PreviewWindow.init(<%== @preview_urls.first %>);
-
-    $('#preview_size').bind('open.selectBoxIt', function (e) {
-      $('#top_menu').css('z-index', 5000);
-    });
-
-    $('#preview_size').bind('blur.selectBoxIt', function (e) {
-      $('#top_menu').css('z-index', 30);
-    });
-
-    $('select#preview_size').on('change', function() {
-      var width = this.value;
-      if (width === 'auto') {
-        Alchemy.PreviewWindow.currentWindow.css('width', '');
-      } else {
-        Alchemy.PreviewWindow.resize(width);
-      }
-    });
   });
 
 </script>
diff --git a/spec/features/admin/edit_elements_feature_spec.rb b/spec/features/admin/edit_elements_feature_spec.rb
index cfe54a5825..097bae7c81 100644
--- a/spec/features/admin/edit_elements_feature_spec.rb
+++ b/spec/features/admin/edit_elements_feature_spec.rb
@@ -156,7 +156,6 @@
     before { visit alchemy.edit_admin_page_path(element.page) }
 
     scenario "expanded ingredient groups persist between visits", :js do
-      expect(page).not_to have_selector("#element_#{element.id}_ingredient_group_details", visible: true)
       page.find("details#element_#{element.id}_ingredient_group_details", text: "Details").click
       expect(page).to have_selector("#element_#{element.id}_ingredient_group_details", visible: true)
       visit alchemy.edit_admin_page_path(element.page)
diff --git a/spec/javascript/alchemy_admin/components/element_editor.spec.js b/spec/javascript/alchemy_admin/components/element_editor.spec.js
index d3b5171d4e..f19ad54168 100644
--- a/spec/javascript/alchemy_admin/components/element_editor.spec.js
+++ b/spec/javascript/alchemy_admin/components/element_editor.spec.js
@@ -178,8 +178,14 @@ describe("alchemy-element-editor", () => {
 
     it("focuses element in preview", () => {
       const click = new Event("click", { bubbles: true })
+      const postMessage = jest.fn()
+      jest.spyOn(editor, "previewWindow", "get").mockImplementation(() => {
+        return {
+          postMessage
+        }
+      })
       editor.dispatchEvent(click)
-      expect(Alchemy.PreviewWindow.postMessage).toHaveBeenCalledWith({
+      expect(postMessage).toHaveBeenCalledWith({
         message: "Alchemy.focusElement",
         element_id: "123"
       })
diff --git a/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js b/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
index 9ee8375031..d8d42a962f 100644
--- a/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
+++ b/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
@@ -1,6 +1,16 @@
 import "alchemy_admin/components/element_editor/publish_element_button"
 import { renderComponent } from "../component.helper"
 
+const mockReloadPreview = jest.fn()
+
+jest.mock("alchemy_admin/components/preview_window", () => {
+  return {
+    reloadPreview: () => {
+      mockReloadPreview()
+    }
+  }
+})
+
 jest.mock("alchemy_admin/utils/ajax", () => {
   return {
     __esModule: true,
@@ -63,7 +73,7 @@ describe("alchemy-publish-element-button", () => {
       return new Promise((resolve) => {
         setTimeout(() => {
           expect(button.tooltip.getAttribute("content")).toEqual("Hide element")
-          expect(Alchemy.reloadPreview).toHaveBeenCalled()
+          expect(mockReloadPreview).toHaveBeenCalled()
           resolve()
         }, 1)
       })