diff --git a/app/assets/stylesheets/alchemy/selects.scss b/app/assets/stylesheets/alchemy/selects.scss
index f492fc27f1..e044673a41 100644
--- a/app/assets/stylesheets/alchemy/selects.scss
+++ b/app/assets/stylesheets/alchemy/selects.scss
@@ -269,8 +269,9 @@ select {
   align-items: center;
   margin: 0 3 * $default-margin;
 
-  label {
-    margin-right: 2 * $default-margin;
+  label,
+  alchemy-icon {
+    margin-right: var(--spacing-2);
   }
 }
 
diff --git a/app/javascript/alchemy_admin/components/preview_window.js b/app/javascript/alchemy_admin/components/preview_window.js
index 44f5b6e805..6be8a97478 100644
--- a/app/javascript/alchemy_admin/components/preview_window.js
+++ b/app/javascript/alchemy_admin/components/preview_window.js
@@ -66,8 +66,7 @@ class PreviewWindow extends HTMLIFrameElement {
 
     key("alt+r", () => this.refresh())
 
-    // Need to listen with jQuery here because select2 does not emit native events.
-    $(this.sizeSelect).on("change", (evt) => {
+    this.sizeSelect.addEventListener("change", (evt) => {
       const select = evt.target
       const width = select.value
 
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index a4d27b997b..87c33693ea 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -94,10 +94,12 @@
   <% end %>
   <div class="toolbar_spacer"></div>
   <div class="select_with_label">
-    <label><%= Alchemy.t(:preview_size) %></label>
-    <%= select_tag 'preview_size',
-      preview_sizes_for_select,
-      class: 'medium', is: 'alchemy-select' %>
+    <sl-tooltip content="<%= Alchemy.t(:preview_size) %>" placement="top-start">
+      <%= render_icon(:computer) %>
+      <%= select_tag "preview_size",
+        preview_sizes_for_select,
+        include_blank: Alchemy.t("auto", scope: "preview_sizes") %>
+    </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
   <% if @preview_urls.many? %>