diff --git a/flask_app/static/style.css b/flask_app/static/style.css
index b124df3..4a3be4d 100644
--- a/flask_app/static/style.css
+++ b/flask_app/static/style.css
@@ -1,19 +1,20 @@
 :root {
   /* Default to dark palette; light is provided via [data-theme="light"] */
   --bg: #0f172a;
-  --bg-panel: #111827;
+  --bg-panel: #1e293b;
+  --bg-card: #1e293b;
   --text: #e5e7eb;
   --muted: #9ca3af;
   --accent: #22c55e;
   --accent-2: #60a5fa;
   --danger: #ef4444;
-  --border: #1f2937;
+  --border: #334155;
   --code-bg: #0b1022;
 
   /* Design tokens */
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
 
   --space-1: 4px;
   --space-2: 8px;
@@ -23,21 +24,24 @@
   --space-6: 24px;
   --space-8: 32px;
 
-  --shadow-1: 0 1px 2px rgba(0,0,0,0.2);
-  --shadow-2: 0 4px 16px rgba(0,0,0,0.25);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
 /* Light theme overrides (toggled via data-theme attr on html) */
 [data-theme="light"] {
-  --bg: #f9fafb;
+  --bg: #f8fafc;
   --bg-panel: #ffffff;
+  --bg-card: #ffffff;
   --text: #0f172a;
-  --muted: #4b5563;
+  --muted: #64748b;
   --accent: #059669;
   --accent-2: #2563eb;
   --danger: #dc2626;
-  --border: #e5e7eb;
-  --code-bg: #f3f4f6;
+  --border: #e2e8f0;
+  --code-bg: #f1f5f9;
 }
 
 * { box-sizing: border-box; }
@@ -58,8 +62,14 @@ html, body {
 }
 
 .site-header, .site-footer {
-  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
+  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 100%);
   border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(10px);
+}
+
+[data-theme="light"] .site-header,
+[data-theme="light"] .site-footer {
+  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.00) 100%);
 }
 
 .site-footer {
@@ -559,27 +569,30 @@ code {
 }
 
 .badge-info {
-  background-color: rgba(59, 130, 246, 0.1);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
   color: #60a5fa;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  font-weight: 500;
+  font-weight: 600;
+  border: 1px solid rgba(96, 165, 250, 0.3);
 }
 
 .badge-success {
-  background-color: rgba(34, 197, 94, 0.1);
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
   color: #22c55e;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  font-weight: 500;
+  font-weight: 600;
+  border: 1px solid rgba(34, 197, 94, 0.3);
 }
 
 .badge-warning {
-  background-color: rgba(245, 158, 11, 0.1);
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
   color: #f59e0b;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  font-weight: 500;
+  font-weight: 600;
+  border: 1px solid rgba(245, 158, 11, 0.3);
 }
 
 .dashboard-controls {
@@ -607,13 +620,15 @@ code {
   background-color: var(--bg-panel);
   border: 1px solid var(--border);
   color: var(--text);
-  transition: all 150ms ease-in-out;
+  transition: all 0.2s ease-in-out;
+  box-shadow: var(--shadow-sm);
 }
 
 .search-input:focus {
   outline: none;
   border-color: var(--accent-2);
-  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), var(--shadow-md);
+  background-color: var(--bg-card);
 }
 
 .search-icon {
@@ -671,18 +686,20 @@ code {
 }
 
 .content-card {
-  background-color: var(--bg-panel);
+  background-color: var(--bg-card);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  transition: all 150ms ease-in-out;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
 }
 
 .content-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-2);
-  border-color: rgba(96, 165, 250, 0.4);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--accent-2);
 }
 
 .card-header {
@@ -691,17 +708,30 @@ code {
   align-items: center;
   gap: 0.75rem;
   border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(96, 165, 250, 0.05) 0%, transparent 100%);
 }
 
 .card-status-indicator {
   width: 10px;
   height: 10px;
   border-radius: 50%;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+.card-status-indicator.complete {
+  background-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
 }
 
-.card-status-indicator.complete { background-color: var(--accent); }
-.card-status-indicator.partial { background-color: var(--accent-2); }
-.card-status-indicator.todo { background-color: #f59e0b; }
+.card-status-indicator.partial {
+  background-color: var(--accent-2);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+.card-status-indicator.todo {
+  background-color: #f59e0b;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+}
 
 .card-meta {
   display: flex;
@@ -786,140 +816,239 @@ code {
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  justify-content: space-between;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+[data-theme="dark"] .card-actions {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .card-action-icons {
   display: flex;
   gap: 0.5rem;
-  margin-left: auto;
+  width: 100%;
 }
 
-.btn-primary {
-  background-color: var(--accent);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-md);
-  font-weight: 600;
-  text-decoration: none;
-  flex-grow: 1;
-  text-align: center;
+/* Modal Styling */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
 }
 
-.btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-md);
-  font-weight: 600;
-  text-decoration: none;
+.modal.show {
+  display: block !important;
 }
 
-.btn-icon {
-  background: none;
-  border: none;
-  color: var(--muted);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 50%;
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 1.75rem auto;
+  max-width: 800px;
+  pointer-events: none;
 }
 
-.btn-icon:hover {
-  background-color: var(--border);
-  color: var(--text);
+.modal.show .modal-dialog {
+  transform: none;
 }
 
-.btn-icon-labeled {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  background: transparent;
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+}
+
+.modal-backdrop.show {
+  opacity: 0.5;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: var(--bg-panel);
+  color: var(--text);
   border: 1px solid var(--border);
-  color: var(--muted);
-  cursor: pointer;
-  padding: 0.4rem 0.75rem;
-  border-radius: var(--radius-md);
-  font-size: 0.85rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  outline: 0;
 }
 
-.btn-icon-labeled i {
-  font-size: 0.9rem;
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 1.5rem;
 }
 
-.btn-icon-labeled:hover {
-  background-color: var(--border);
+.modal-title {
+  margin: 0;
   color: var(--text);
-  border-color: var(--accent-2);
+  font-weight: 600;
 }
 
-.card-menu {
+.modal-body {
   position: relative;
-  margin-left: auto;
+  flex: 1 1 auto;
+  padding: 1rem 1.5rem;
+  background-color: var(--bg-panel);
+  min-height: 200px;
 }
 
-.dropdown-menu {
-  position: absolute;
-  right: 0;
-  top: 100%;
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem 1.5rem;
   background-color: var(--bg-panel);
+  border-top: 1px solid var(--border);
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+.btn-close {
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  color: var(--text);
+  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+  border: 0;
+  border-radius: 0.25rem;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.btn-close:hover {
+  opacity: 0.75;
+}
+
+[data-theme="light"] .btn-close {
+  filter: none;
+}
+
+[data-theme="dark"] .btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+.demo-output-code,
+.demo-error-code {
+  background-color: var(--code-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 0.5rem;
-  min-width: 150px;
-  z-index: 10;
-  display: none;
+  padding: 1rem;
+  margin: 0;
+  overflow: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text);
+  max-height: 400px;
 }
 
-.dropdown-menu.show {
-  display: block;
+.demo-error-code {
+  color: var(--danger);
 }
 
-.dropdown-menu a {
-  display: block;
-  padding: 0.5rem;
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent-2) 0%, #3b82f6 100%);
+  border: none;
+  color: white;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #3b82f6 0%, var(--accent-2) 100%);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  color: white;
+}
+
+.btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--border);
   color: var(--text);
-  text-decoration: none;
-  border-radius: var(--radius-sm);
+  font-weight: 600;
+  transition: all 0.2s ease;
 }
 
-.dropdown-menu a:hover {
+.btn-secondary:hover {
   background-color: var(--border);
+  border-color: var(--accent-2);
+  color: var(--text);
 }
 
-.demo-output-panel {
-  padding: 1rem;
-  border-top: 1px solid var(--border);
+.btn-success {
+  background: linear-gradient(135deg, var(--accent) 0%, #16a34a 100%);
+  border: none;
+  color: white;
+  font-weight: 600;
+  transition: all 0.2s ease;
 }
 
-.demo-output-panel.error .output-header h4 {
-  color: var(--danger);
+.btn-success:hover {
+  background: linear-gradient(135deg, #16a34a 0%, var(--accent) 100%);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  color: white;
 }
 
-.output-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
+.btn-outline-secondary,
+.btn-outline-info {
+  transition: all 0.2s ease;
 }
 
-.output-header h4 {
-  margin: 0;
+.btn-outline-secondary:hover,
+.btn-outline-info:hover {
+  transform: translateY(-1px);
+}
+
+/* Support for Bootstrap button modifiers with custom buttons */
+.btn-success.btn-sm,
+.btn-secondary.btn-sm,
+.btn-primary.btn-sm {
+  padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
-  font-weight: 600;
+  border-radius: 0.2rem;
 }
 
-.demo-output {
-  background-color: var(--code-bg);
-  padding: 0.75rem;
-  border-radius: var(--radius-sm);
-  max-height: 200px;
-  overflow-y: auto;
+.btn-success.disabled,
+.btn-success:disabled,
+.btn-secondary.disabled,
+.btn-secondary:disabled,
+.btn-primary.disabled,
+.btn-primary:disabled {
+  opacity: 0.65;
+  pointer-events: none;
+  box-shadow: none;
 }
 
+.card-menu {
+  position: relative;
+  margin-left: auto;
+}
 
 /* Search Overlay */
 .search-overlay {
@@ -934,6 +1063,11 @@ code {
   justify-content: center;
   align-items: flex-start;
   padding-top: 10vh;
+  pointer-events: none;
+}
+
+.search-overlay:not([hidden]) {
+  pointer-events: all;
 }
 
 .search-results-container {
diff --git a/flask_app/templates/base.html b/flask_app/templates/base.html
index e0d5809..a9a797c 100644
--- a/flask_app/templates/base.html
+++ b/flask_app/templates/base.html
@@ -12,24 +12,14 @@
         var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         var theme = saved || (prefersDark ? 'dark' : 'light');
         document.documentElement.setAttribute('data-theme', theme);
-        // Keep Tailwind in sync (class-based dark mode)
-        document.documentElement.classList.toggle('dark', theme === 'dark');
       } catch (e) {}
     })();
   </script>
-  <script>
-    // Configure Tailwind (CDN) to use class-based dark mode
-    window.tailwind = window.tailwind || {};
-    window.tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          container: { center: true, padding: '1rem' }
-        }
-      }
-    };
-  </script>
-  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+
+  <!-- Bootstrap 5.3.2 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
@@ -74,6 +64,36 @@ <h1 class="brand"><a href="{{ url_for('index') }}">Python DSA Demos</a></h1>
     </div>
   </footer>
 
+  <!-- Demo Output Modal -->
+  <div class="modal fade" id="demoOutputModal" tabindex="-1" aria-labelledby="demoOutputModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="demoOutputModalLabel">Demo Output</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div id="demoLoadingSpinner" class="text-center py-4">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2 text-muted">Running demo...</p>
+          </div>
+          <div id="demoOutputContent" class="d-none">
+            <pre class="demo-output-code"><code></code></pre>
+          </div>
+          <div id="demoErrorContent" class="d-none alert alert-danger">
+            <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Error</h6>
+            <pre class="demo-error-code mb-0"><code></code></pre>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script>
     (function() {
       var btn = document.getElementById('theme-toggle');
@@ -83,7 +103,6 @@ <h1 class="brand"><a href="{{ url_for('index') }}">Python DSA Demos</a></h1>
       }
       function setTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
-        document.documentElement.classList.toggle('dark', theme === 'dark');
         try { localStorage.setItem('theme', theme); } catch(e) {}
         btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
         btn.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
diff --git a/flask_app/templates/index.html b/flask_app/templates/index.html
index 8e7d863..b5f7b56 100644
--- a/flask_app/templates/index.html
+++ b/flask_app/templates/index.html
@@ -106,47 +106,54 @@ <h3 class="card-title">{{ d.title }}</h3>
                 <footer class="card-actions">
                   {% if category == 'visualizations' or (d.id|string).startswith('viz.') %}
                     {% if d.id == 'viz.sorting' %}
-                      <a class="btn-primary" href="{{ url_for('viz_sorting') }}">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_sorting') }}">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.graph' %}
-                      <a class="btn-primary" href="{{ url_for('viz_graph') }}?algo=bfs">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_graph') }}?algo=bfs">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.path' %}
-                      <a class="btn-primary" href="{{ url_for('viz_path') }}?algo=astar">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_path') }}?algo=astar">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.arrays' %}
-                      <a class="btn-primary" href="{{ url_for('viz_arrays') }}?algo=binary_search">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_arrays') }}?algo=binary_search">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.mst' %}
-                      <a class="btn-primary" href="{{ url_for('viz_mst') }}?algo=kruskal">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_mst') }}?algo=kruskal">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.topo' %}
-                      <a class="btn-primary" href="{{ url_for('viz_topo') }}?algo=kahn">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_topo') }}?algo=kahn">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% elif d.id == 'viz.nn' %}
-                      <a class="btn-primary" href="{{ url_for('viz_nn') }}?dataset=blobs">Launch</a>
+                      <a class="btn btn-success btn-sm flex-grow-1" href="{{ url_for('viz_nn') }}?dataset=blobs">
+                        <i class="fas fa-rocket me-1"></i> Launch
+                      </a>
                     {% endif %}
-                    <button class="btn-secondary" onclick="showCardDetails('{{ d.id }}')">Details</button>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="showCardDetails('{{ d.id }}')">
+                      <i class="fas fa-info-circle me-1"></i> Details
+                    </button>
                   {% else %}
-                    <div class="card-action-icons">
-                      <button class="btn-icon-labeled demo-run-btn" data-module="{{ d.id }}" aria-label="Run Demo">
-                        <i class="fas fa-play"></i> <span>Run</span>
+                    <div class="card-action-icons d-flex gap-2 w-100">
+                      <button class="btn btn-primary btn-sm demo-run-btn flex-grow-1" data-module="{{ d.id }}" data-title="{{ d.title }}" aria-label="Run Demo">
+                        <i class="fas fa-play me-1"></i> Run
                       </button>
                       {% set viz_key = sorting_viz_map.get(d.id) if sorting_viz_map else None %}
                       {% if viz_key %}
-                        <a class="btn-icon-labeled" href="{{ url_for('viz_sorting') }}?algo={{ viz_key }}" aria-label="Visualize">
-                          <i class="fas fa-chart-bar"></i> <span>Visualize</span>
+                        <a class="btn btn-outline-info btn-sm" href="{{ url_for('viz_sorting') }}?algo={{ viz_key }}" aria-label="Visualize">
+                          <i class="fas fa-chart-bar"></i>
                         </a>
                       {% endif %}
-                      <a class="btn-icon-labeled" href="{{ url_for('source') }}?module={{ d.id }}" aria-label="View Source">
-                        <i class="fas fa-code"></i> <span>Source</span>
+                      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('source') }}?module={{ d.id }}" aria-label="View Source">
+                        <i class="fas fa-code"></i>
                       </a>
                     </div>
                   {% endif %}
                 </footer>
-
-                <!-- Inline Demo Output Panel -->
-                <div class="demo-output-panel" hidden>
-                  <div class="output-header">
-                    <h4>Demo Output</h4>
-                    <button class="btn-icon close-output" aria-label="Close output">×</button>
-                  </div>
-                  <pre class="demo-output" role="status" aria-live="polite"><code></code></pre>
-                </div>
               </article>
             {% endfor %}
           {% endfor %}
@@ -203,6 +210,9 @@ <h3>Search Results</h3>
         // Menu dropdowns
         document.addEventListener('click', handleMenus);
 
+        // Setup modal handlers
+        setupModal();
+
         // Removed old initialization
 
         // Apply initial filters if currentView is not "all"
@@ -287,19 +297,42 @@ <h3>Search Results</h3>
 
         e.preventDefault();
         const moduleId = btn.dataset.module;
-        const card = btn.closest('.content-card');
-        const outputPanel = card.querySelector('.demo-output-panel');
-        const outputCode = outputPanel.querySelector('.demo-output code');
-
-        // Show output panel
-        outputPanel.hidden = false;
-        outputPanel.classList.remove('error');
-        outputCode.textContent = '';
+        const moduleTitle = btn.dataset.title || 'Demo';
+
+        // Get modal elements
+        const modal = document.getElementById('demoOutputModal');
+        const modalTitle = document.getElementById('demoOutputModalLabel');
+        const loadingSpinner = document.getElementById('demoLoadingSpinner');
+        const outputContent = document.getElementById('demoOutputContent');
+        const errorContent = document.getElementById('demoErrorContent');
+        const outputCode = outputContent.querySelector('code');
+        const errorCode = errorContent.querySelector('code');
+
+        // Set modal title
+        modalTitle.textContent = `${moduleTitle} - Output`;
+
+        // Show modal with loading state (vanilla JS without Bootstrap)
+        loadingSpinner.classList.remove('d-none');
+        outputContent.classList.add('d-none');
+        errorContent.classList.add('d-none');
+        modal.classList.add('show');
+        modal.style.display = 'block';
+        document.body.classList.add('modal-open');
+
+        // Add backdrop
+        let backdrop = document.querySelector('.modal-backdrop');
+        if (!backdrop) {
+          backdrop = document.createElement('div');
+          backdrop.className = 'modal-backdrop fade show';
+          document.body.appendChild(backdrop);
+        } else {
+          backdrop.className = 'modal-backdrop fade show';
+        }
 
         // Update button state
-        const originalText = btn.textContent;
+        const originalHTML = btn.innerHTML;
         btn.disabled = true;
-        btn.textContent = 'Running...';
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Running...';
 
         try {
           const response = await fetch('/api/demo', {
@@ -308,42 +341,99 @@ <h3>Search Results</h3>
             body: JSON.stringify({ module: moduleId })
           });
 
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+
           const data = await response.json();
 
+          // Hide loading spinner
+          loadingSpinner.classList.add('d-none');
+
           if (data.error) {
-            outputPanel.classList.add('error');
-            outputCode.textContent = data.error;
+            errorContent.classList.remove('d-none');
+            errorCode.textContent = data.error;
           } else {
+            outputContent.classList.remove('d-none');
             outputCode.textContent = data.output || '(no output)';
           }
         } catch (error) {
-          outputPanel.classList.add('error');
-          outputCode.textContent = 'Error: ' + error.message;
+          loadingSpinner.classList.add('d-none');
+          errorContent.classList.remove('d-none');
+          errorCode.textContent = 'Error: ' + error.message;
         } finally {
           btn.disabled = false;
-          btn.textContent = originalText;
+          btn.innerHTML = originalHTML;
         }
       }
 
-      // Menu handling
-      function handleMenus(e) {
-        if (e.target.classList.contains('menu-trigger')) {
-          e.stopPropagation();
-          const menu = e.target.nextElementSibling;
-          menu.classList.toggle('show');
-        } else {
-          // Close all menus
-          document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
-            menu.classList.remove('show');
-          });
+      // Close modal function
+      function closeModal() {
+        const modal = document.getElementById('demoOutputModal');
+        modal.classList.remove('show');
+        modal.style.display = 'none';
+        document.body.classList.remove('modal-open');
+
+        // Remove backdrop
+        const backdrop = document.querySelector('.modal-backdrop');
+        if (backdrop) {
+          backdrop.remove();
         }
+      }
 
-        if (e.target.classList.contains('close-output')) {
-          e.target.closest('.demo-output-panel').hidden = true;
-        }
+      // Set up modal close handlers on init
+      function setupModal() {
+        const modal = document.getElementById('demoOutputModal');
+        if (!modal) return;
+
+        // Close button
+        const closeButtons = document.querySelectorAll('[data-bs-dismiss="modal"]');
+        closeButtons.forEach(btn => {
+          btn.addEventListener('click', closeModal);
+        });
+
+        // Clicking outside modal
+        modal.addEventListener('click', function(e) {
+          if (e.target === modal) {
+            closeModal();
+          }
+        });
 
+        // Escape key to close modal
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape' && modal && modal.classList.contains('show')) {
+            closeModal();
+          }
+        });
+      }
+
+      // Menu handling
+      function handleMenus(e) {
+        // Handle close-search button
         if (e.target.classList.contains('close-search')) {
           hideSearchResults();
+          return;
+        }
+        // Handle menu trigger clicks
+        if (e.target.classList.contains('menu-trigger')) {
+          const dropdown = e.target.nextElementSibling;
+          if (dropdown && dropdown.classList.contains('dropdown-menu')) {
+            dropdown.classList.toggle('show');
+          }
+          return;
+        }
+        // Handle closing dropdown menus
+        if (e.target.classList.contains('dropdown-menu') && e.target.classList.contains('show')) {
+          e.target.classList.remove('show');
+          return;
+        }
+        // Handle close output button clicks
+        if (e.target.classList.contains('close-output')) {
+          const output = e.target.closest('.output-container');
+          if (output) {
+            output.style.display = 'none';
+          }
+          return;
         }
       }