diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 1fa71e0..ebdac0f 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -20,7 +20,7 @@
         }
         .content {
             width: 100%;
-            height: calc(100vh - 250px);
+            height: calc(100vh - 200px);
             iframe {
                 border: none;
                 width: 100%;
@@ -39,9 +39,9 @@
     </nav>
     <div class="content">
         <!-- display total entries from child iframe -->
-        <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
+        <h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
         <!-- filters for job status results-->
-        <div class="card mb-4" style="width:400px">
+        <div class="card mb-4 small" style="width:400px">
             <div class="card-header py-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
                 <i class="bi bi-filter"></i><span class="ms-2">Filter by</span>
                 <i class="bi bi-chevron-expand float-end"></i>
@@ -91,7 +91,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         </div>
         <!-- toolbar to change jobs per page and navigate pages -->
         <div id="jobs-toolbar" class="btn-toolbar justify-content-between mb-2" role="toolbar">
-            <div class="input-group">
+            <div class="input-group input-group-sm">
                 <select class="form-select" onchange="updateJobStatusTableLimit(this.value);this.blur();">
                     {% for l in [10, 25, 50, 100] %}
                     {% if l==default_limit %}<option value="{{ l }}" selected>{{ l }}</option>
@@ -101,11 +101,11 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 </select>
                 <span class="input-group-text">jobs per page</span>
             </div>
-            <div class="btn-group" role="group">
+            <div class="btn-group btn-group-sm" role="group">
                 <!-- display current jobs range e.g, "1 to 10 of 100" -->
                 <span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>
             </div>
-            <div class="btn-group pagination" role="group">
+            <div class="btn-group pagination pagination-sm" role="group">
                 <button id="jobs-page-btn-first" type="button" class="btn page-link"
                     onclick="updateJobStatusTablePage(PaginateTo.FIRST);this.blur();">&laquo; First</button>
                 <button id="jobs-page-btn-prev" type="button" class="btn page-link"
diff --git a/src/aind_data_transfer_service/templates/job_status_table.html b/src/aind_data_transfer_service/templates/job_status_table.html
index b32f905..3ecb89f 100644
--- a/src/aind_data_transfer_service/templates/job_status_table.html
+++ b/src/aind_data_transfer_service/templates/job_status_table.html
@@ -9,14 +9,14 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
   <style>
     .modal-body {
-      height: calc(100vh - 250px);
+      height: calc(100vh - 100px);
     }
 </style>
 </head>
 
 <body>
   <!-- job status table -->
-  <table class="table table-bordered table-striped table-hover table-sm">
+  <table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
     <tr>
       <th>Asset Name</th>
       <th>Job ID</th>
@@ -41,7 +41,7 @@
       <td class="datetime_to_be_adjusted">{{job_status.end_time}}</td>
       <td>{{job_status.comment}}</td>
       <td>
-        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
+        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
           <i class="bi bi-box-arrow-up-right" title="View tasks and logs"></i>
         </button>
       </td>
@@ -52,25 +52,17 @@
   <div class="modal fade" id="tasks-modal" tabindex="-1" aria-labelledby="tasks-modal-label" aria-hidden="true">
     <div class="modal-dialog modal-xl">
       <div class="modal-content">
-        <div class="modal-header">
-          <div class="modal-title container fs-5" id="tasks-modal-label">
-            <div class="row">
-              <div class="col-2">Asset Name:</div>
-              <div id="modal-title-job-name" class="col-md-auto fw-bold"></div>
-            </div>
-            <div class="row">
-              <div class="col-2">Job ID:</div>
-              <div class="col-md-auto fw-bold"><span id="modal-title-job-id" class="me-2"></span><span id="modal-title-job-state" class="badge"></span></div>
-            </div>
+        <div class="modal-header p-2">
+          <div class="modal-title fw-bold" id="tasks-modal-label" style="font-size: small">
+            <span id="modal-title-job-name" class="me-2"></span>
+            <span id="modal-title-job-id" class="me-2"></span>
+            <span id="modal-title-job-state" class="badge"></span>
           </div>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
+        <div class="modal-body p-2">
             <iframe id="tasks-iframe" class="w-100 h-100" src=""></iframe>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
-        </div>
       </div>
     </div>
   </div>
@@ -131,7 +123,7 @@ <h4 class="alert-heading">{{ message }}</h4>
     }
     function updateJobTasksModal(jobId, jobName, jobState) {
       // Update the modal header with the job id and name
-      document.getElementById('modal-title-job-id').textContent = jobId;
+      document.getElementById('modal-title-job-id').textContent = `(${jobId})`;
       document.getElementById('modal-title-job-name').textContent = jobName;
       var modalTitleJobState = document.getElementById('modal-title-job-state');
       modalTitleJobState.textContent = jobState;
diff --git a/src/aind_data_transfer_service/templates/job_tasks_table.html b/src/aind_data_transfer_service/templates/job_tasks_table.html
index ec08f8f..b230605 100644
--- a/src/aind_data_transfer_service/templates/job_tasks_table.html
+++ b/src/aind_data_transfer_service/templates/job_tasks_table.html
@@ -11,7 +11,7 @@
 
 <body>
   <!-- tasks table -->
-  <table class="table table-bordered table-striped table-hover table-sm">
+  <table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
     <tr>
       <th>Task ID</th>
       <th>Try Number</th>
@@ -37,7 +37,7 @@
       <td>{{job_task.duration}}</td>
       <td>
         {% if job_task.try_number > 0 %}
-          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logs-modal"
+        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#logs-modal"
             data-job-id="{{ job_task.job_id }}"
             data-task-id="{{ job_task.task_id }}"
             data-task-state="{{ job_task.task_state }}"
@@ -53,18 +53,15 @@
   <div class="modal fade" id="logs-modal" tabindex="-1" aria-labelledby="logs-modal-label" aria-hidden="true">
     <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">
-        <div class="modal-header">
-          <div class="modal-title fs-5 fw-bold" id="logs-modal-label">
+        <div class="modal-header p-2">
+          <div class="modal-title fw-bold" id="logs-modal-label" style="font-size: small">
             <span id="modal-title-task" class="me-2"></span><span id="modal-title-task-state" class="badge"></span>
           </div>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
+        <div class="modal-body p-2">
             <iframe id="logs-iframe" class="w-100 h-100" src=""></iframe>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close logs</button>
-        </div>
       </div>
     </div>
   </div>
diff --git a/src/aind_data_transfer_service/templates/task_logs.html b/src/aind_data_transfer_service/templates/task_logs.html
index 4fd5563..6c1f2f9 100644
--- a/src/aind_data_transfer_service/templates/task_logs.html
+++ b/src/aind_data_transfer_service/templates/task_logs.html
@@ -9,7 +9,7 @@
   {% if status_code == 200 %}
   <!-- display task logs -->
   <div>
-    <pre class="bg-light p-3 border rounded">{{logs}}</pre>
+    <pre class="bg-light p-1 border rounded" style="font-size: x-small">{{logs}}</pre>
   </div>
   {% else %}
   <!-- display errors to user -->
