diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd9b97b..0315a3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.3.0] - 2026-04-16
+
+### Added
+
+- Content Security Policy compatibility for nonce-based strict CSP. The monitor now reads `content_security_policy_nonce` from the host controller and stamps it onto every inline `<style>` and `<script>` tag emitted by the engine. When no nonce is configured, HTML is byte-identical to prior versions. ([#36](https://github.com/vishaltps/solid_queue_monitor/issues/36))
+
+### Changed
+
+- Removed all inline `onclick`, `onchange`, and `onsubmit` attributes. Behavior is now wired via `addEventListener` and `data-*` attributes.
+- Replaced runtime `element.style.display|opacity|transform` mutations with CSS class toggles (`.is-hidden`, `.is-fading`, `.is-expanded`, `.tooltip-visible`, `.countdown-paused`). Tooltip cursor-tracking position is unchanged.
+- Consolidated confirm-on-submit dialogs into a single `data-confirm="…"` pattern.
+
+### Notes
+
+No host-app changes required. Apps already using nonce-based CSP will see the UI start working once they upgrade. Apps without CSP continue to receive identical output.
+
 ## [1.2.2] - 2026-03-30
 
 ### Added
diff --git a/Gemfile.lock b/Gemfile.lock
index 00bdca7..da57ff9 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    solid_queue_monitor (1.2.1)
+    solid_queue_monitor (1.3.0)
       rails (>= 7.0)
       solid_queue (>= 0.1.0)
 
diff --git a/README.md b/README.md
index bffb890..70d6fa8 100644
--- a/README.md
+++ b/README.md
@@ -206,6 +206,25 @@ This makes it easy to find specific jobs when debugging issues in your applicati
 - **Rails**: 7.1 or higher
 - **Solid Queue**: 0.1.0 or higher
 
+## Content Security Policy
+
+Solid Queue Monitor is compatible with strict Content Security Policy as of v1.3.0.
+
+If your application uses nonce-based CSP (the Rails default when `content_security_policy_nonce_generator` is set), Solid Queue Monitor will automatically stamp the per-request nonce onto every inline `<style>` and `<script>` tag it emits. Ensure your nonce directives include both `script-src` and `style-src`:
+
+```ruby
+# config/initializers/content_security_policy.rb
+Rails.application.config.content_security_policy do |policy|
+  policy.script_src :self
+  policy.style_src  :self
+end
+
+Rails.application.config.content_security_policy_nonce_generator = ->(req) { SecureRandom.base64(16) }
+Rails.application.config.content_security_policy_nonce_directives = %w[script-src style-src]
+```
+
+No other configuration is required. If your application runs CSP without nonces (e.g., strict `script-src 'self'` only), the monitor UI will not function — asset-extraction support is tracked for a future release.
+
 ## Contributing
 
 Contributions are welcome! Here's how you can contribute:
diff --git a/app/controllers/solid_queue_monitor/base_controller.rb b/app/controllers/solid_queue_monitor/base_controller.rb
index 7178aa7..e122422 100644
--- a/app/controllers/solid_queue_monitor/base_controller.rb
+++ b/app/controllers/solid_queue_monitor/base_controller.rb
@@ -28,7 +28,8 @@ def render_page(title, content, search_query: nil)
         content: content,
         message: message,
         message_type: message_type,
-        search_query: search_query
+        search_query: search_query,
+        nonce: content_security_policy_nonce
       ).generate
 
       render html: html.html_safe
diff --git a/app/controllers/solid_queue_monitor/failed_jobs_controller.rb b/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
index 696a887..59323b1 100644
--- a/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/failed_jobs_controller.rb
@@ -13,7 +13,8 @@ def index
                                                                             current_page: @failed_jobs[:current_page],
                                                                             total_pages: @failed_jobs[:total_pages],
                                                                             filters: filter_params,
-                                                                            sort: sort_params).render)
+                                                                            sort: sort_params,
+                                                                            nonce: content_security_policy_nonce).render)
     end
 
     def retry
diff --git a/app/controllers/solid_queue_monitor/jobs_controller.rb b/app/controllers/solid_queue_monitor/jobs_controller.rb
index 55a6d55..8f7d009 100644
--- a/app/controllers/solid_queue_monitor/jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/jobs_controller.rb
@@ -15,7 +15,8 @@ def show
 
       render_page("Job ##{@job.id}", SolidQueueMonitor::JobDetailsPresenter.new(
         @job,
-        **job_data
+        **job_data,
+        nonce: content_security_policy_nonce
       ).render)
     end
 
diff --git a/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb b/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
index bacfc6e..6818d49 100644
--- a/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
+++ b/app/controllers/solid_queue_monitor/scheduled_jobs_controller.rb
@@ -13,7 +13,8 @@ def index
                                                                                   current_page: @scheduled_jobs[:current_page],
                                                                                   total_pages: @scheduled_jobs[:total_pages],
                                                                                   filters: filter_params,
-                                                                                  sort: sort_params).render)
+                                                                                  sort: sort_params,
+                                                                                  nonce: content_security_policy_nonce).render)
     end
 
     def create
diff --git a/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb b/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
index cef39e8..6d4b88e 100644
--- a/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
+++ b/app/presenters/solid_queue_monitor/failed_jobs_presenter.rb
@@ -5,12 +5,13 @@ class FailedJobsPresenter < BasePresenter
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
+    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {}, nonce: nil)
       @jobs = jobs
       @current_page = current_page
       @total_pages = total_pages
       @filters = filters
       @sort = sort
+      @nonce = nonce
     end
 
     def render
@@ -20,6 +21,10 @@ def render
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_filter_form
       <<-HTML
         <div class="filter-form-container">
@@ -76,170 +81,83 @@ def generate_table
           </div>
         </form>
 
-        <script>
+        #{script_tag_open}
           document.addEventListener('DOMContentLoaded', function() {
-            // Handle select all checkboxes
-            const selectAllHeader = document.getElementById('select-all');
-            const checkboxes = document.querySelectorAll('.job-checkbox');
-            const retrySelectedBtn = document.getElementById('retry-selected-top');
-            const discardSelectedBtn = document.getElementById('discard-selected-top');
-            const form = document.getElementById('failed-jobs-form');
-        #{'    '}
+            var selectAllHeader = document.getElementById('select-all');
+            var checkboxes = document.querySelectorAll('.job-checkbox');
+            var retrySelectedBtn = document.getElementById('retry-selected-top');
+            var discardSelectedBtn = document.getElementById('discard-selected-top');
+            var form = document.getElementById('failed-jobs-form');
+
             function updateButtonState() {
-              const checkedBoxes = document.querySelectorAll('.job-checkbox:checked');
+              var checkedBoxes = document.querySelectorAll('.job-checkbox:checked');
               retrySelectedBtn.disabled = checkedBoxes.length === 0;
               discardSelectedBtn.disabled = checkedBoxes.length === 0;
             }
-        #{'    '}
-            function toggleAll(checked) {
-              checkboxes.forEach(checkbox => {
-                checkbox.checked = checked;
-              });
-              selectAllHeader.checked = checked;
-              updateButtonState();
-            }
-        #{'    '}
+
             selectAllHeader.addEventListener('change', function() {
-              toggleAll(this.checked);
+              checkboxes.forEach(function(cb) { cb.checked = selectAllHeader.checked; });
+              updateButtonState();
             });
-        #{'    '}
-            checkboxes.forEach(checkbox => {
-              checkbox.addEventListener('change', function() {
+
+            checkboxes.forEach(function(cb) {
+              cb.addEventListener('change', function() {
                 updateButtonState();
-        #{'        '}
-                // Update select all checkboxes if needed
-                const allChecked = document.querySelectorAll('.job-checkbox:checked').length === checkboxes.length;
+                var allChecked = document.querySelectorAll('.job-checkbox:checked').length === checkboxes.length;
                 selectAllHeader.checked = allChecked;
               });
             });
-        #{'    '}
-            // Handle bulk actions
+
+            function bulkSubmit(action, promptMsg) {
+              var ids = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(function(cb) { return cb.value; });
+              if (ids.length === 0) return;
+              if (!confirm(promptMsg)) return;
+              form.action = action;
+              appendHidden(form, 'redirect_cleanly', 'true');
+              ids.forEach(function(id) { appendHidden(form, 'job_ids[]', id); });
+              form.submit();
+              setTimeout(function() { window.history.replaceState({}, '', window.location.pathname); }, 100);
+            }
+
+            function appendHidden(f, name, value) {
+              var input = document.createElement('input');
+              input.type = 'hidden';
+              input.name = name;
+              input.value = value;
+              f.appendChild(input);
+            }
+
             retrySelectedBtn.addEventListener('click', function() {
-              const selectedIds = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(cb => cb.value);
-              if (selectedIds.length === 0) return;
-        #{'      '}
-              if (confirm('Are you sure you want to retry the selected jobs?')) {
-                form.action = '#{retry_failed_jobs_path}';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                // Add selected IDs as hidden inputs
-                selectedIds.forEach(id => {
-                  const input = document.createElement('input');
-                  input.type = 'hidden';
-                  input.name = 'job_ids[]';
-                  input.value = id;
-                  form.appendChild(input);
-                });
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
-              }
+              bulkSubmit('#{retry_failed_jobs_path}', 'Are you sure you want to retry the selected jobs?');
             });
-        #{'    '}
             discardSelectedBtn.addEventListener('click', function() {
-              const selectedIds = Array.from(document.querySelectorAll('.job-checkbox:checked')).map(cb => cb.value);
-              if (selectedIds.length === 0) return;
-        #{'      '}
-              if (confirm('Are you sure you want to discard the selected jobs?')) {
-                form.action = '#{discard_failed_jobs_path}';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                // Add selected IDs as hidden inputs
-                selectedIds.forEach(id => {
-                  const input = document.createElement('input');
-                  input.type = 'hidden';
-                  input.name = 'job_ids[]';
-                  input.value = id;
-                  form.appendChild(input);
-                });
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
+              bulkSubmit('#{discard_failed_jobs_path}', 'Are you sure you want to discard the selected jobs?');
+            });
+
+            function submitRowAction(action, id) {
+              var f = document.createElement('form');
+              f.method = 'post';
+              f.action = action.replace('PLACEHOLDER', id);
+              appendHidden(f, 'redirect_cleanly', 'true');
+              document.body.appendChild(f);
+              f.submit();
+              setTimeout(function() { window.history.replaceState({}, '', window.location.pathname); }, 100);
+            }
+
+            document.addEventListener('click', function(e) {
+              var btn = e.target.closest('[data-action]');
+              if (!btn) return;
+              var id = btn.dataset.jobId;
+              if (btn.dataset.action === 'retry-failed-job') {
+                submitRowAction('#{retry_failed_job_path(id: 'PLACEHOLDER')}', id);
+              } else if (btn.dataset.action === 'discard-failed-job') {
+                if (confirm('Are you sure you want to discard this job?')) {
+                  submitRowAction('#{discard_failed_job_path(id: 'PLACEHOLDER')}', id);
+                }
               }
             });
-        #{'    '}
-            // Initialize button state
+
             updateButtonState();
-        #{'    '}
-            // Global function for retry action
-            window.submitRetryForm = function(id) {
-              const form = document.createElement('form');
-              form.method = 'post';
-              form.action = '#{retry_failed_job_path(id: 'PLACEHOLDER')}';
-              form.action = form.action.replace('PLACEHOLDER', id);
-              form.style.display = 'none';
-        #{'      '}
-              // Add a special flag to indicate this should redirect properly
-              const redirectInput = document.createElement('input');
-              redirectInput.type = 'hidden';
-              redirectInput.name = 'redirect_cleanly';
-              redirectInput.value = 'true';
-              form.appendChild(redirectInput);
-        #{'      '}
-              document.body.appendChild(form);
-        #{'      '}
-              // Submit the form and then replace the URL location immediately after
-              form.submit();
-        #{'      '}
-              // Delay the redirect to give the form time to submit
-              setTimeout(function() {
-                // Reset to the clean URL without query parameters
-                window.history.replaceState({}, '', window.location.pathname);
-              }, 100);
-            };
-        #{'    '}
-            // Global function for discard action
-            window.submitDiscardForm = function(id) {
-              if (confirm('Are you sure you want to discard this job?')) {
-                const form = document.createElement('form');
-                form.method = 'post';
-                form.action = '#{discard_failed_job_path(id: 'PLACEHOLDER')}';
-                form.action = form.action.replace('PLACEHOLDER', id);
-                form.style.display = 'none';
-        #{'        '}
-                // Add a special flag to indicate this should redirect properly
-                const redirectInput = document.createElement('input');
-                redirectInput.type = 'hidden';
-                redirectInput.name = 'redirect_cleanly';
-                redirectInput.value = 'true';
-                form.appendChild(redirectInput);
-        #{'        '}
-                document.body.appendChild(form);
-        #{'        '}
-                // Submit the form and then replace the URL location immediately after
-                form.submit();
-        #{'        '}
-                // Delay the redirect to give the form time to submit
-                setTimeout(function() {
-                  // Reset to the clean URL without query parameters
-                  window.history.replaceState({}, '', window.location.pathname);
-                }, 100);
-              }
-            };
           });
         </script>
       HTML
@@ -268,13 +186,8 @@ def generate_row(failed_execution)
           <td>#{format_datetime(failed_execution.created_at)}</td>
           <td class="actions-cell">
             <div class="job-actions">
-              <a href="javascript:void(0)"#{' '}
-                 onclick="submitRetryForm(#{failed_execution.id})"#{' '}
-                 class="action-button retry-button">Retry</a>
-        #{'      '}
-              <a href="javascript:void(0)"#{' '}
-                 onclick="submitDiscardForm(#{failed_execution.id})"#{' '}
-                 class="action-button discard-button">Discard</a>
+              <button type="button" data-action="retry-failed-job" data-job-id="#{failed_execution.id}" class="action-button retry-button">Retry</button>
+              <button type="button" data-action="discard-failed-job" data-job-id="#{failed_execution.id}" class="action-button discard-button">Discard</button>
             </div>
           </td>
         </tr>
diff --git a/app/presenters/solid_queue_monitor/job_details_presenter.rb b/app/presenters/solid_queue_monitor/job_details_presenter.rb
index d01a399..18a4499 100644
--- a/app/presenters/solid_queue_monitor/job_details_presenter.rb
+++ b/app/presenters/solid_queue_monitor/job_details_presenter.rb
@@ -3,13 +3,14 @@
 module SolidQueueMonitor
   class JobDetailsPresenter < BasePresenter
     def initialize(job, failed_execution: nil, claimed_execution: nil, scheduled_execution: nil,
-                   recent_executions: [], back_path: nil)
+                   recent_executions: [], back_path: nil, nonce: nil)
       @job = job
       @failed_execution = failed_execution
       @claimed_execution = claimed_execution
       @scheduled_execution = scheduled_execution
       @recent_executions = recent_executions
       @back_path = back_path
+      @nonce = nonce
       calculate_timing
     end
 
@@ -32,6 +33,10 @@ def render
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def calculate_timing
       @created_at = @job.created_at
       @scheduled_at = @job.scheduled_at || @scheduled_execution&.scheduled_at
@@ -139,7 +144,7 @@ def render_actions
 
         actions << <<-HTML
           <form action="#{discard_failed_job_path(id: @failed_execution.id)}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to discard this job?');">
+                data-confirm="Are you sure you want to discard this job?">
             <input type="hidden" name="redirect_to" value="#{failed_jobs_path}">
             <button type="submit" class="action-button discard-button">Discard</button>
           </form>
@@ -301,7 +306,7 @@ def render_error_section
         <div class="job-section error-section">
           <div class="section-header">
             <h3 class="section-title">Error</h3>
-            <button class="copy-button" onclick="copyToClipboard('error-content')">
+            <button class="copy-button" data-action="copy" data-target="error-content">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -329,22 +334,13 @@ def render_backtrace(backtrace)
           <div class="backtrace-header">
             <span class="backtrace-title">Backtrace</span>
             <div class="backtrace-toggle">
-              <button class="toggle-btn active" data-target="app-backtrace" onclick="showBacktrace('app')">App Only</button>
-              <button class="toggle-btn" data-target="full-backtrace" onclick="showBacktrace('full')">Full</button>
+              <button class="toggle-btn active" data-action="show-backtrace" data-backtrace="app">App Only</button>
+              <button class="toggle-btn" data-action="show-backtrace" data-backtrace="full">Full</button>
             </div>
           </div>
           <pre class="backtrace-content" id="app-backtrace">#{format_backtrace_lines(app_lines.presence || lines.first(5))}</pre>
-          <pre class="backtrace-content" id="full-backtrace" style="display: none;">#{format_backtrace_lines(lines)}</pre>
+          <pre class="backtrace-content is-hidden" id="full-backtrace">#{format_backtrace_lines(lines)}</pre>
         </div>
-        <script>
-          function showBacktrace(type) {
-            document.getElementById('app-backtrace').style.display = type === 'app' ? 'block' : 'none';
-            document.getElementById('full-backtrace').style.display = type === 'full' ? 'block' : 'none';
-            document.querySelectorAll('.backtrace-toggle .toggle-btn').forEach(btn => {
-              btn.classList.toggle('active', btn.dataset.target === type + '-backtrace');
-            });
-          }
-        </script>
       HTML
     end
 
@@ -426,7 +422,7 @@ def render_arguments_section
           <div class="section-header">
             <h3 class="section-title">Arguments</h3>
             <div class="section-actions">
-              <button class="copy-button" onclick="copyToClipboard('arguments-content')">
+              <button class="copy-button" data-action="copy" data-target="arguments-content">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                   <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -647,14 +643,14 @@ def truncate_arguments(args)
     def render_raw_data_section
       <<-HTML
         <div class="job-section collapsible-section">
-          <div class="section-header collapsible-header" onclick="toggleSection(this)">
+          <div class="section-header collapsible-header" data-action="toggle-section">
             <div class="collapsible-title">
               <svg class="collapse-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <polyline points="9 18 15 12 9 6"></polyline>
               </svg>
               <h3 class="section-title">Raw Data</h3>
             </div>
-            <button class="copy-button" onclick="event.stopPropagation(); copyToClipboard('raw-data-content')">
+            <button class="copy-button" data-action="copy" data-target="raw-data-content" data-stop-propagation="true">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -662,33 +658,48 @@ def render_raw_data_section
               Copy
             </button>
           </div>
-          <div class="collapsible-content" style="display: none;">
+          <div class="collapsible-content">
             <pre class="raw-data-content" id="raw-data-content">#{CGI.escapeHTML(JSON.pretty_generate(@job.attributes))}</pre>
           </div>
         </div>
-        <script>
-          function toggleSection(header) {
-            const content = header.nextElementSibling;
-            const icon = header.querySelector('.collapse-icon');
-            if (content.style.display === 'none') {
-              content.style.display = 'block';
-              icon.style.transform = 'rotate(90deg)';
-            } else {
-              content.style.display = 'none';
-              icon.style.transform = 'rotate(0deg)';
-            }
-          }
-
-          function copyToClipboard(elementId) {
-            const element = document.getElementById(elementId);
-            const text = element.innerText || element.textContent;
-            navigator.clipboard.writeText(text).then(() => {
-              const btn = event.target.closest('.copy-button');
-              const originalText = btn.innerHTML;
-              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
-              setTimeout(() => { btn.innerHTML = originalText; }, 2000);
+        #{script_tag_open}
+          (function() {
+            document.addEventListener('click', function(e) {
+              var el = e.target.closest('[data-action]');
+              if (!el) return;
+
+              if (el.dataset.stopPropagation === 'true') e.stopPropagation();
+
+              var action = el.dataset.action;
+
+              if (action === 'copy') {
+                var target = document.getElementById(el.dataset.target);
+                if (!target) return;
+                var text = target.innerText || target.textContent;
+                navigator.clipboard.writeText(text).then(function() {
+                  var original = el.innerHTML;
+                  el.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
+                  setTimeout(function() { el.innerHTML = original; }, 2000);
+                });
+              }
+
+              if (action === 'show-backtrace') {
+                var which = el.dataset.backtrace;
+                var appEl = document.getElementById('app-backtrace');
+                var fullEl = document.getElementById('full-backtrace');
+                if (appEl) appEl.classList.toggle('is-hidden', which !== 'app');
+                if (fullEl) fullEl.classList.toggle('is-hidden', which !== 'full');
+                document.querySelectorAll('[data-action="show-backtrace"]').forEach(function(btn) {
+                  btn.classList.toggle('active', btn.dataset.backtrace === which);
+                });
+              }
+
+              if (action === 'toggle-section') {
+                var section = el.closest('.collapsible-section');
+                if (section) section.classList.toggle('is-expanded');
+              }
             });
-          }
+          })();
         </script>
       HTML
     end
diff --git a/app/presenters/solid_queue_monitor/jobs_presenter.rb b/app/presenters/solid_queue_monitor/jobs_presenter.rb
index 746ca8f..7b3511d 100644
--- a/app/presenters/solid_queue_monitor/jobs_presenter.rb
+++ b/app/presenters/solid_queue_monitor/jobs_presenter.rb
@@ -119,7 +119,7 @@ def generate_row(job)
                 </form>
 
                 <form method="post" action="#{discard_failed_job_path(id: failed_execution.id)}" class="inline-form"
-                      onsubmit="return confirm('Are you sure you want to discard this job?');">
+                      data-confirm="Are you sure you want to discard this job?">
                   <input type="hidden" name="redirect_to" value="#{root_path}">
                   <button type="submit" class="action-button discard-button">Discard</button>
                 </form>
diff --git a/app/presenters/solid_queue_monitor/queue_details_presenter.rb b/app/presenters/solid_queue_monitor/queue_details_presenter.rb
index c36caa0..353d691 100644
--- a/app/presenters/solid_queue_monitor/queue_details_presenter.rb
+++ b/app/presenters/solid_queue_monitor/queue_details_presenter.rb
@@ -53,7 +53,7 @@ def action_button
       else
         <<-HTML
           <form action="#{pause_queue_path}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to pause this queue?');">
+                data-confirm="Are you sure you want to pause this queue?">
             <input type="hidden" name="queue_name" value="#{@queue_name}">
             <input type="hidden" name="redirect_to" value="#{queue_details_path(queue_name: @queue_name)}">
             <button type="submit" class="action-button pause-button">Pause Queue</button>
@@ -170,7 +170,7 @@ def generate_row(job)
                 <button type="submit" class="action-button retry-button">Retry</button>
               </form>
               <form method="post" action="#{discard_failed_job_path(id: failed_execution.id)}" class="inline-form"
-                    onsubmit="return confirm('Are you sure you want to discard this job?');">
+                    data-confirm="Are you sure you want to discard this job?">
                 <input type="hidden" name="redirect_to" value="#{queue_details_path(queue_name: @queue_name)}">
                 <button type="submit" class="action-button discard-button">Discard</button>
               </form>
diff --git a/app/presenters/solid_queue_monitor/queues_presenter.rb b/app/presenters/solid_queue_monitor/queues_presenter.rb
index 2c60282..ee8ef71 100644
--- a/app/presenters/solid_queue_monitor/queues_presenter.rb
+++ b/app/presenters/solid_queue_monitor/queues_presenter.rb
@@ -76,7 +76,7 @@ def action_button(queue_name, paused)
       else
         <<-HTML
           <form action="#{pause_queue_path}" method="post" class="inline-form"
-                onsubmit="return confirm('Are you sure you want to pause the #{queue_name} queue? Workers will stop processing jobs from this queue.');">
+                data-confirm="Are you sure you want to pause the #{queue_name} queue? Workers will stop processing jobs from this queue.">
             <input type="hidden" name="queue_name" value="#{queue_name}">
             <button type="submit" class="action-button pause-button" title="Pause queue processing">
               Pause
diff --git a/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb b/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
index a1283eb..5318f1f 100644
--- a/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
+++ b/app/presenters/solid_queue_monitor/scheduled_jobs_presenter.rb
@@ -5,12 +5,13 @@ class ScheduledJobsPresenter < BasePresenter
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {})
+    def initialize(jobs, current_page: 1, total_pages: 1, filters: {}, sort: {}, nonce: nil)
       @jobs = jobs
       @current_page = current_page
       @total_pages = total_pages
       @filters = filters
       @sort = sort
+      @nonce = nonce
     end
 
     def render
@@ -19,6 +20,10 @@ def render
 
     private
 
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_filter_form
       <<-HTML
         <div class="filter-form-container">
@@ -57,7 +62,7 @@ def generate_table_with_actions
       <form id="scheduled-jobs-form" method="POST">
         #{generate_table}
       </form>
-      <script>
+      #{script_tag_open}
         document.addEventListener('DOMContentLoaded', function() {
           const selectAllCheckbox = document.querySelector('th input[type="checkbox"]');
           const jobCheckboxes = document.getElementsByName('job_ids[]');
diff --git a/app/presenters/solid_queue_monitor/workers_presenter.rb b/app/presenters/solid_queue_monitor/workers_presenter.rb
index 873f31e..aa67d2b 100644
--- a/app/presenters/solid_queue_monitor/workers_presenter.rb
+++ b/app/presenters/solid_queue_monitor/workers_presenter.rb
@@ -104,12 +104,17 @@ def generate_summary
     def prune_all_link
       return '' if @dead_count.zero?
 
+      suffix = @dead_count > 1 ? 'es' : ''
+      message = "Remove all #{@dead_count} dead process#{suffix}? " \
+                'This will clean up processes that have stopped sending heartbeats.'
+
       <<-HTML
         <a href="#" class="summary-action"
-           onclick="if(confirm('Remove all #{@dead_count} dead process#{@dead_count > 1 ? 'es' : ''}? This will clean up processes that have stopped sending heartbeats.')) { document.getElementById('prune-all-form').submit(); } return false;">
+           data-confirm-submit="prune-all-form"
+           data-confirm="#{CGI.escapeHTML(message)}">
           Prune all
         </a>
-        <form id="prune-all-form" action="#{prune_workers_path}" method="post" style="display: none;"></form>
+        <form id="prune-all-form" action="#{prune_workers_path}" method="post" class="is-hidden"></form>
       HTML
     end
 
@@ -185,7 +190,7 @@ def action_button(process, status)
 
       <<-HTML
         <form action="#{remove_worker_path(id: process.id)}" method="post" class="inline-form"
-              onsubmit="return confirm('Remove this dead process from the registry?');">
+              data-confirm="Remove this dead process from the registry?">
           <button type="submit" class="action-button discard-button" title="Remove dead process">
             Remove
           </button>
diff --git a/app/services/solid_queue_monitor/chart_data_service.rb b/app/services/solid_queue_monitor/chart_data_service.rb
index 1064d46..0866c8e 100644
--- a/app/services/solid_queue_monitor/chart_data_service.rb
+++ b/app/services/solid_queue_monitor/chart_data_service.rb
@@ -86,9 +86,9 @@ def bucket_index_expr(column, start_epoch, interval_seconds)
       if adapter?('sqlite')
         "CAST((CAST(strftime('%s', #{column}) AS INTEGER) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
       elsif adapter?('mysql') || adapter?('trilogy')
-        "CAST((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds} AS SIGNED)"
+        "FLOOR((UNIX_TIMESTAMP(#{column}) - #{start_epoch}) / #{interval_seconds})"
       else
-        "CAST((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds} AS INTEGER)"
+        "FLOOR((EXTRACT(EPOCH FROM #{column}) - #{start_epoch}) / #{interval_seconds})::integer"
       end
     end
 
diff --git a/app/services/solid_queue_monitor/chart_presenter.rb b/app/services/solid_queue_monitor/chart_presenter.rb
index bd19557..f7303bf 100644
--- a/app/services/solid_queue_monitor/chart_presenter.rb
+++ b/app/services/solid_queue_monitor/chart_presenter.rb
@@ -66,7 +66,7 @@ def render_time_select
 
       <<-HTML
         <div class="chart-time-select-wrapper">
-          <select class="chart-time-select" id="chart-time-select" onchange="window.location.href='?time_range=' + this.value">
+          <select class="chart-time-select" id="chart-time-select">
             #{options}
           </select>
         </div>
@@ -212,15 +212,15 @@ def render_legend
       <<-HTML
         <div class="chart-legend">
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:created]}"></span>
+            <span class="legend-color legend-color-created"></span>
             Created
           </span>
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:completed]}"></span>
+            <span class="legend-color legend-color-completed"></span>
             Completed
           </span>
           <span class="legend-item">
-            <span class="legend-color" style="background-color: #{COLORS[:failed]}"></span>
+            <span class="legend-color legend-color-failed"></span>
             Failed
           </span>
         </div>
@@ -229,7 +229,7 @@ def render_legend
 
     def render_tooltip
       <<-HTML
-        <div id="chart-tooltip" class="chart-tooltip" style="display: none;">
+        <div id="chart-tooltip" class="chart-tooltip">
           <div class="tooltip-label"></div>
           <div class="tooltip-value"></div>
         </div>
diff --git a/app/services/solid_queue_monitor/html_generator.rb b/app/services/solid_queue_monitor/html_generator.rb
index 3a37d68..1ff15aa 100644
--- a/app/services/solid_queue_monitor/html_generator.rb
+++ b/app/services/solid_queue_monitor/html_generator.rb
@@ -5,12 +5,13 @@ class HtmlGenerator
     include Rails.application.routes.url_helpers
     include SolidQueueMonitor::Engine.routes.url_helpers
 
-    def initialize(title:, content:, message: nil, message_type: nil, search_query: nil)
+    def initialize(title:, content:, message: nil, message_type: nil, search_query: nil, nonce: nil)
       @title = title
       @content = content
       @message = message
       @message_type = message_type
       @search_query = search_query
+      @nonce = nonce
     end
 
     def generate
@@ -34,7 +35,7 @@ def generate_head
       <<-HTML
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
+        #{style_tag_open}
           #{SolidQueueMonitor::StylesheetGenerator.new.generate}
         </style>
       HTML
@@ -62,27 +63,14 @@ def render_message
       class_name = @message_type == 'success' ? 'message-success' : 'message-error'
       <<-HTML
         <div id="flash-message" class="message #{class_name}">#{@message}</div>
-        <script>
-          // Automatically hide the flash message after 5 seconds
+        #{script_tag_open}
           document.addEventListener('DOMContentLoaded', function() {
-            var flashMessage = document.getElementById('flash-message');
-            if (flashMessage) {
-              setTimeout(function() {
-                flashMessage.style.opacity = '1';
-                // Fade out animation
-                var fadeEffect = setInterval(function() {
-                  if (!flashMessage.style.opacity) {
-                    flashMessage.style.opacity = 1;
-                  }
-                  if (flashMessage.style.opacity > 0) {
-                    flashMessage.style.opacity -= 0.1;
-                  } else {
-                    clearInterval(fadeEffect);
-                    flashMessage.style.display = 'none';
-                  }
-                }, 50);
-              }, 5000); // 5 seconds
-            }
+            var el = document.getElementById('flash-message');
+            if (!el) return;
+            setTimeout(function() {
+              el.classList.add('is-fading');
+              setTimeout(function() { el.classList.add('is-hidden'); }, 500);
+            }, 5000);
           });
         </script>
       HTML
@@ -149,6 +137,14 @@ def escape_html(text)
       text.to_s.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;').gsub('"', '&quot;')
     end
 
+    def style_tag_open
+      @nonce ? %(<style nonce="#{@nonce}">) : '<style>'
+    end
+
+    def script_tag_open
+      @nonce ? %(<script nonce="#{@nonce}">) : '<script>'
+    end
+
     def generate_auto_refresh_controls
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
@@ -194,7 +190,7 @@ def generate_theme_toggle
     def generate_auto_refresh_script
       return '' unless SolidQueueMonitor.auto_refresh_enabled
 
-      "<script>#{auto_refresh_javascript}</script>"
+      "#{script_tag_open}#{auto_refresh_javascript}</script>"
     end
 
     def auto_refresh_javascript
@@ -229,7 +225,7 @@ def auto_refresh_functions
           if (indicator) indicator.classList.toggle('active', isEnabled);
           if (countdownEl) {
             countdownEl.textContent = countdown + 's';
-            countdownEl.style.opacity = isEnabled ? '1' : '0.4';
+            countdownEl.classList.toggle('countdown-paused', !isEnabled);
           }
         }
         function tick() {
@@ -270,9 +266,10 @@ def auto_refresh_init
 
     def generate_chart_script
       <<-HTML
-        <script>
+        #{script_tag_open}
           #{theme_toggle_javascript}
           #{chart_tooltip_javascript}
+          #{global_behaviors_javascript}
         </script>
       HTML
     end
@@ -363,7 +360,7 @@ def chart_tooltip_javascript
 
               tooltip.querySelector('.tooltip-label').textContent = label;
               tooltip.querySelector('.tooltip-value').textContent = seriesNames[series] + ': ' + value;
-              tooltip.style.display = 'block';
+              tooltip.classList.add('tooltip-visible');
               positionTooltip(e);
             });
 
@@ -372,7 +369,7 @@ def chart_tooltip_javascript
             });
 
             point.addEventListener('mouseleave', function() {
-              tooltip.style.display = 'none';
+              tooltip.classList.remove('tooltip-visible');
             });
           });
 
@@ -387,6 +384,7 @@ def chart_tooltip_javascript
               y = e.clientY + 10;
             }
 
+            // Dynamic cursor-tracked position, not CSP-restricted.
             tooltip.style.left = x + 'px';
             tooltip.style.top = y + 'px';
           }
@@ -394,6 +392,34 @@ def chart_tooltip_javascript
       JS
     end
 
+    def global_behaviors_javascript
+      <<-JS
+        document.addEventListener('submit', function(e) {
+          var form = e.target;
+          var msg = form.dataset && form.dataset.confirm;
+          if (msg && !window.confirm(msg)) { e.preventDefault(); }
+        }, true);
+
+        document.addEventListener('click', function(e) {
+          var el = e.target.closest('[data-confirm-submit]');
+          if (!el) return;
+          e.preventDefault();
+          var msg = el.dataset.confirm || 'Are you sure?';
+          if (!window.confirm(msg)) return;
+          var formId = el.dataset.confirmSubmit;
+          var form = document.getElementById(formId);
+          if (form) form.submit();
+        });
+
+        var timeRangeSelect = document.getElementById('chart-time-select');
+        if (timeRangeSelect) {
+          timeRangeSelect.addEventListener('change', function() {
+            window.location.href = '?time_range=' + this.value;
+          });
+        }
+      JS
+    end
+
     def default_url_options
       { only_path: true }
     end
diff --git a/app/services/solid_queue_monitor/stylesheet_generator.rb b/app/services/solid_queue_monitor/stylesheet_generator.rb
index 862165c..6de83b3 100644
--- a/app/services/solid_queue_monitor/stylesheet_generator.rb
+++ b/app/services/solid_queue_monitor/stylesheet_generator.rb
@@ -1088,6 +1088,18 @@ def generate
         border-radius: 2px;
       }
 
+      .solid_queue_monitor .legend-color-created {
+        background-color: #3b82f6;
+      }
+
+      .solid_queue_monitor .legend-color-completed {
+        background-color: #10b981;
+      }
+
+      .solid_queue_monitor .legend-color-failed {
+        background-color: #ef4444;
+      }
+
       .solid_queue_monitor .chart-tooltip {
         position: fixed;
         background: #1f2937;
@@ -2017,6 +2029,51 @@ def generate
           grid-template-columns: 1fr;
         }
       }
+
+      /* ===== CSP Phase 1 utility classes (replace runtime style mutations) ===== */
+
+      .is-hidden {
+        display: none !important;
+      }
+
+      .countdown-paused {
+        opacity: 0.4;
+      }
+
+      .is-expanded .collapse-icon {
+        transform: rotate(90deg);
+      }
+
+      .collapse-icon {
+        transition: transform 150ms ease;
+      }
+
+      .collapsible-content {
+        display: none;
+      }
+
+      .is-expanded .collapsible-content {
+        display: block;
+      }
+
+      .chart-tooltip {
+        display: none;
+        position: fixed;
+        pointer-events: none;
+      }
+
+      .chart-tooltip.tooltip-visible {
+        display: block;
+      }
+
+      #flash-message {
+        opacity: 1;
+        transition: opacity 500ms ease;
+      }
+
+      #flash-message.is-fading {
+        opacity: 0;
+      }
       CSS
     end
   end
diff --git a/lib/solid_queue_monitor/version.rb b/lib/solid_queue_monitor/version.rb
index 3f87293..a096ab4 100644
--- a/lib/solid_queue_monitor/version.rb
+++ b/lib/solid_queue_monitor/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidQueueMonitor
-  VERSION = '1.2.2'
+  VERSION = '1.3.0'
 end
diff --git a/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb b/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb
new file mode 100644
index 0000000..b5db33d
--- /dev/null
+++ b/spec/presenters/solid_queue_monitor/failed_jobs_presenter_spec.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::FailedJobsPresenter do
+  let(:job) { create(:solid_queue_job) }
+  let(:failed_execution) { create(:solid_queue_failed_execution, job: job) }
+  let(:jobs) { [failed_execution] }
+
+  describe 'CSP nonce propagation' do
+    it 'stamps nonce on its inline <script>' do
+      presenter = described_class.new(jobs, nonce: 'pnonce')
+      html = presenter.render
+      script_tags = html.scan(/<script[^>]*>/)
+      expect(script_tags).not_to be_empty
+      expect(script_tags).to all(include('nonce="pnonce"'))
+    end
+
+    it 'omits nonce when not supplied' do
+      presenter = described_class.new(jobs)
+      html = presenter.render
+      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
+    end
+  end
+end
diff --git a/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb b/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
index a412197..9e895ae 100644
--- a/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
+++ b/spec/presenters/solid_queue_monitor/job_details_presenter_spec.rb
@@ -156,4 +156,20 @@
       expect(rendered_html).to include('timeline-track')
     end
   end
+
+  describe 'CSP nonce propagation' do
+    it 'stamps nonce on all inline <script> tags' do
+      presenter = described_class.new(job, nonce: 'jnonce')
+      html = presenter.render
+      script_tags = html.scan(/<script[^>]*>/)
+      expect(script_tags).not_to be_empty
+      expect(script_tags).to all(include('nonce="jnonce"'))
+    end
+
+    it 'omits nonce when not supplied' do
+      presenter = described_class.new(job)
+      html = presenter.render
+      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
+    end
+  end
 end
diff --git a/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb b/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb
new file mode 100644
index 0000000..e3a8e84
--- /dev/null
+++ b/spec/presenters/solid_queue_monitor/scheduled_jobs_presenter_spec.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::ScheduledJobsPresenter do
+  let(:job) { create(:solid_queue_job) }
+  let(:scheduled_execution) { create(:solid_queue_scheduled_execution, job: job) }
+  let(:jobs) { [scheduled_execution] }
+
+  describe 'CSP nonce propagation' do
+    it 'stamps nonce on its inline <script>' do
+      presenter = described_class.new(jobs, nonce: 'snonce')
+      html = presenter.render
+      script_tags = html.scan(/<script[^>]*>/)
+      expect(script_tags).not_to be_empty
+      expect(script_tags).to all(include('nonce="snonce"'))
+    end
+
+    it 'omits nonce when not supplied' do
+      presenter = described_class.new(jobs)
+      html = presenter.render
+      expect(html.scan(/<script[^>]*>/).join).not_to include('nonce=')
+    end
+  end
+end
diff --git a/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
new file mode 100644
index 0000000..501e412
--- /dev/null
+++ b/spec/requests/solid_queue_monitor/csp_compatibility_spec.rb
@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'CSP compatibility' do
+  let(:inline_handler_pattern) { /\s(onclick|onchange|onsubmit|onfocus|onblur|oninput|onkeyup|onkeydown)=/ }
+
+  before do
+    create_list(:solid_queue_job, 2)
+    create(:solid_queue_failed_execution)
+    create(:solid_queue_scheduled_execution)
+    create(:solid_queue_ready_execution)
+  end
+
+  shared_examples 'a CSP-safe page' do |path|
+    it "#{path} has no inline event handlers" do
+      get path
+      expect(response).to have_http_status(:ok)
+      matches = response.body.scan(inline_handler_pattern).flatten.uniq
+      expect(matches).to be_empty,
+                         "Found inline handler(s) at #{path}: #{matches.join(', ')}"
+    end
+
+    it "#{path} has no inline style attributes" do
+      get path
+      expect(response).to have_http_status(:ok)
+      expect(response.body).not_to match(/\sstyle="/),
+                                   "Inline style= attribute found at #{path} (nonces do not apply to style attributes)"
+    end
+  end
+
+  describe 'without a CSP nonce configured' do
+    [
+      '/',
+      '/ready_jobs',
+      '/in_progress_jobs',
+      '/scheduled_jobs',
+      '/recurring_jobs',
+      '/failed_jobs',
+      '/queues',
+      '/workers'
+    ].each do |path|
+      include_examples 'a CSP-safe page', path
+    end
+
+    it 'emits <style> without nonce attribute' do
+      get '/'
+      expect(response.body).to match(/<style>/)
+      expect(response.body).not_to match(/<style\s+nonce=/)
+    end
+
+    it 'emits <script> tags without nonce attribute' do
+      get '/'
+      response.body.scan(/<script[^>]*>/).each do |tag|
+        expect(tag).not_to include('nonce=')
+      end
+    end
+  end
+
+  describe 'with a CSP nonce configured' do
+    before do
+      allow_any_instance_of(ActionController::Base)
+        .to receive(:content_security_policy_nonce).and_return('test-nonce-123')
+    end
+
+    it 'stamps nonce on the <style> tag' do
+      get '/'
+      expect(response.body).to include('<style nonce="test-nonce-123">')
+    end
+
+    it 'stamps nonce on every <script> tag' do
+      get '/'
+      scripts = response.body.scan(/<script[^>]*>/)
+      expect(scripts).not_to be_empty
+      expect(scripts).to all(include('nonce="test-nonce-123"'))
+    end
+  end
+end
diff --git a/spec/services/solid_queue_monitor/html_generator_spec.rb b/spec/services/solid_queue_monitor/html_generator_spec.rb
new file mode 100644
index 0000000..64c479d
--- /dev/null
+++ b/spec/services/solid_queue_monitor/html_generator_spec.rb
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe SolidQueueMonitor::HtmlGenerator do
+  describe '#generate' do
+    context 'when a nonce is supplied' do
+      subject(:html) do
+        described_class.new(title: 'Test', content: '<p>hello</p>', nonce: 'abc123').generate
+      end
+
+      it 'stamps the nonce on the <style> tag' do
+        expect(html).to include('<style nonce="abc123">')
+      end
+
+      it 'stamps the nonce on every <script> tag' do
+        scripts = html.scan(/<script[^>]*>/)
+        expect(scripts).not_to be_empty
+        expect(scripts).to all(include('nonce="abc123"'))
+      end
+    end
+
+    context 'when no nonce is supplied' do
+      subject(:html) do
+        described_class.new(title: 'Test', content: '<p>hello</p>').generate
+      end
+
+      it 'emits <style> without a nonce attribute' do
+        expect(html).to include('<style>')
+        expect(html).not_to match(/<style\s+nonce=/)
+      end
+
+      it 'emits <script> tags without a nonce attribute' do
+        scripts = html.scan(/<script[^>]*>/)
+        expect(scripts.join).not_to include('nonce=')
+      end
+    end
+
+    context 'when a flash message is rendered' do
+      subject(:html) do
+        described_class.new(
+          title: 'Test',
+          content: '<p>hi</p>',
+          message: 'Done',
+          message_type: 'success',
+          nonce: 'xyz'
+        ).generate
+      end
+
+      it 'stamps nonce on the flash-message <script>' do
+        flash_script = html[%r{<script[^>]*>[^<]*flash-message[\s\S]*?</script>}]
+        expect(flash_script).to include('nonce="xyz"')
+      end
+    end
+  end
+end