diff --git a/cli/medperf/web_ui/templates/dataset_detail.html b/cli/medperf/web_ui/templates/dataset_detail.html
index a935d6221..7c8ab2aa5 100644
--- a/cli/medperf/web_ui/templates/dataset_detail.html
+++ b/cli/medperf/web_ui/templates/dataset_detail.html
@@ -90,18 +90,31 @@ <h5 class="card-title mb-0">Details</h5>
         </div>
     </div>
 </div>
-<!-- Display associated models without status -->
+
+<!-- Display associated models with improved layout and dynamic actions -->
 <div class="card mb-3">
     <div class="card-body">
         <h5>Associated Models</h5>
         {% for assoc in benchmark_associations %}
-            <h6>Benchmark: {{ benchmarks[assoc.benchmark].name }}</h6>
-            <ul>
+            <h6>
+                Benchmark: <a href="/benchmarks/ui/display/{{ benchmarks[assoc.benchmark].id }}">
+                    <strong>{{ benchmarks[assoc.benchmark].name }}</strong>
+                </a>
+            </h6>
+            <ul class="list-group mb-3">
                 {% for model_uid in benchmark_models[assoc.benchmark] %}
-                    <li>
-                        Model ID: {{ model_uid }}
-                        <span class="model-status" id="status-{{ assoc.benchmark }}-{{ model_uid }}">🔄 Fetching status...</span>
-                        <button class="btn btn-primary run-model-btn" data-benchmark-id="{{ assoc.benchmark }}" data-model-id="{{ model_uid }}">▶️ Run</button>
+                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                        <div>
+                            Model ID: <a href="/models/ui/display/{{ model_uid }}">
+                                <strong>{{ model_uid }}</strong>
+                            </a>
+                        </div>
+                        <div id="status-container-{{ assoc.benchmark }}-{{ model_uid }}">
+                            <button class="btn btn-primary run-model-btn" data-benchmark-id="{{ assoc.benchmark }}"
+                                    data-model-id="{{ model_uid }}" id="run-btn-{{ assoc.benchmark }}-{{ model_uid }}">
+                                ▶️ Run
+                            </button>
+                        </div>
                     </li>
                 {% endfor %}
             </ul>
@@ -109,6 +122,7 @@ <h6>Benchmark: {{ benchmarks[assoc.benchmark].name }}</h6>
     </div>
 </div>
 
+
 <!-- Set Operational Modal -->
 
 <div class="modal fade" id="setOperationalModal" tabindex="-1" aria-labelledby="setOperationalModalLabel" aria-hidden="true">
@@ -221,23 +235,25 @@ <h5 class="modal-title" id="setOperationalModalLabel">Approval Required</h5>
             $('#setOperationalModal').modal('hide');
         });
 
-        const fetchStatus = async (datasetId, benchmarkId, modelId, element, intervalId) => {
+        const fetchStatus = async (datasetId, benchmarkId, modelId, statusContainer, intervalId) => {
             try {
                 const response = await fetch(`/datasets/run_draft/status?dataset_id=${datasetId}&benchmark_id=${benchmarkId}&model_id=${modelId}`);
                 const statusData = await response.json();
                 const resultId = `b${benchmarkId}m${modelId}d${datasetId}`;  // Calculate result_id
 
+                let statusLink = '';
                 if (statusData.status === 'done') {
-                    element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-success">✅ Done</a>`;
+                    statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-success">✅ Done</a>`;
                     clearInterval(intervalId);  // Stop polling
                 } else if (statusData.status === 'failed') {
-                    element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-danger">❌ Failed</a>`;
+                    statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-danger">❌ Failed</a>`;
                     clearInterval(intervalId);  // Stop polling
                 } else if (statusData.status === 'pending') {
-                    element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-info">⏳ Pending...</a>`;
-                } else {
-                    element.innerHTML = `<span class="text-muted">🔄 Not started</span>`;
-                    clearInterval(intervalId);  // Stop polling if status is N/A
+                    statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-info">⏳ Pending...</a>`;
+                }
+
+                if (statusLink) {
+                    statusContainer.innerHTML = statusLink;  // Replace run button with status link
                 }
             } catch (error) {
                 console.error('Error fetching status:', error);
@@ -245,26 +261,24 @@ <h5 class="modal-title" id="setOperationalModalLabel">Approval Required</h5>
         };
 
         // Iterate over all model statuses and fetch them
-        document.querySelectorAll('.model-status').forEach(statusElement => {
-            const [benchmarkId, modelId] = statusElement.id.split('-').slice(1);
+        document.querySelectorAll('.run-model-btn').forEach(btn => {
+            const benchmarkId = btn.getAttribute('data-benchmark-id');
+            const modelId = btn.getAttribute('data-model-id');
             const datasetId = {{ entity.id }};
-            const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusElement, intervalId), 1000);  // Poll status every second
-        });
+            const statusContainer = document.getElementById(`status-container-${benchmarkId}-${modelId}`);
 
-        // Handle the "Run" button click
-        document.querySelectorAll('.run-model-btn').forEach(btn => {
-            btn.addEventListener('click', async function() {
-                const benchmarkId = this.getAttribute('data-benchmark-id');
-                const modelId = this.getAttribute('data-model-id');
-                const datasetId = {{ entity.id }};
-                const statusElement = document.getElementById(`status-${benchmarkId}-${modelId}`);
+            // Polling to update status
+            const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusContainer, intervalId), 1000);
 
+            // Handle the "Run" button click
+            btn.addEventListener('click', async function() {
                 try {
                     await fetch(`/datasets/run_draft/run?dataset_id=${datasetId}&benchmark_id=${benchmarkId}&model_id=${modelId}`, {
                         method: 'POST'
                     });
-                    statusElement.innerHTML = `<span class="text-info">⏳ Pending...</span>`;
-                    const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusElement, intervalId), 1000);  // Poll status every second
+                    // Replace the run button with a pending status immediately
+                    statusContainer.innerHTML = `<a href="#" class="btn btn-info">⏳ Pending...</a>`;
+                    const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusContainer, intervalId), 1000);
                 } catch (error) {
                     console.error('Error running model:', error);
                 }