diff --git a/apps/dashboard/app/assets/stylesheets/projects.scss b/apps/dashboard/app/assets/stylesheets/projects.scss
index 8b5427cd6..5fc0fd40e 100644
--- a/apps/dashboard/app/assets/stylesheets/projects.scss
+++ b/apps/dashboard/app/assets/stylesheets/projects.scss
@@ -75,3 +75,62 @@
 .workflow-item {
   justify-content: right;
 }
+
+#project_jobs_files_col {
+  padding-right: 0px;
+
+  .jobs-files-item {
+    padding-right: 0px;
+  }
+
+  #jobs_item {
+    @media (min-width: 992px) {
+      padding-right: calc(var(--bs-gutter-x) * 0.5);
+    }
+  }
+}
+
+.pill-box {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0px;
+  padding: 0px;
+
+  .job-pill {
+    width: min-content;
+    padding: 0rem 1rem;
+
+    button.badge {
+      color: var(--bs-btn-hover-color);
+    }
+
+    button.badge.collapsed {
+      color: var(--bs-badge-color);
+    }
+
+    button.badge.collapsed:hover {
+      color: var(--bs-btn-hover-color);
+    }
+  }
+
+  .job-popup {
+    position: absolute;
+    left: 5.75%;
+    width: 88.5%; // 2*left + width should always = 100
+
+    @media (min-width: 576px) {
+      left: 37%;
+      width: 59.5%;
+    }
+
+    @media (min-width: 992px) {
+      left: 18.5%;
+      width: 30.5%;
+    }
+
+    @media (min-width: 1600px) {
+      left: 18%;
+      width: 31.9%;
+    }
+  }
+}
diff --git a/apps/dashboard/app/javascript/projects.js b/apps/dashboard/app/javascript/projects.js
index 56b8c77fa..74528e754 100644
--- a/apps/dashboard/app/javascript/projects.js
+++ b/apps/dashboard/app/javascript/projects.js
@@ -82,7 +82,7 @@ function moveCompletedPanel(id, newHTML) {
 
   const div = document.createElement('div');
   div.id = id;
-  div.classList.add('col-md-4');
+  div.classList.add('job-pill');
 
   const row = document.getElementById('completed_jobs');
   row.appendChild(div);
diff --git a/apps/dashboard/app/views/projects/_job_details.html.erb b/apps/dashboard/app/views/projects/_job_details.html.erb
index 284c750d9..ccc6b2b3c 100644
--- a/apps/dashboard/app/views/projects/_job_details.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details.html.erb
@@ -6,7 +6,7 @@
   data-job-cluster="<%= job.cluster %>"
   data-job-id="<%= job.id %>"
   data-job-status="<%= job.status.to_s %>"
-  class="col-md-4">
+  class="job-pill">
 
   <div class="d-flex justify-content-center">
     <div class="spinner-border" role="status">
diff --git a/apps/dashboard/app/views/projects/_job_details_content.html.erb b/apps/dashboard/app/views/projects/_job_details_content.html.erb
index daf8c1679..84a10f942 100644
--- a/apps/dashboard/app/views/projects/_job_details_content.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details_content.html.erb
@@ -4,12 +4,12 @@
 -%>
 
 <div>
-  <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
+  <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
     <span>
-      <%= job.id %> <%= status_text(job.status.to_s) %>
+      <%= job.id %> <%= status_text(job.status.to_s) unless job.status.to_s == 'completed' %>
     </span>
   </button>
-  <div class="collapse" id="<%= id %>_data">
+  <div class="accordion-collapse collapse job-popup" id="<%= id %>_data" data-bs-parent="#jobs_item">
     <div class="card card-body">
       <table class="table table-bordered table-sm m-0 mb-2">
         <tr>
diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index 1728ba180..cc905e9ea 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -29,7 +29,7 @@
 </div>
 
 <div class="row mb-3">
-  <div class="col-md-2 mt-3">
+  <div class="col-sm-4 col-lg-2 mt-3">
     <div class="list-group bg-white rounded">
       <a class="list-group-item list-group-item-action bg-light font-weight-bold list-toggler"
           data-bs-toggle="collapse" data-bs-target="#launcher_list"
@@ -59,41 +59,43 @@
     <%= render partial: 'workflows/workflow', locals: { project: @project, workflows: @workflows } %>
   </div>
   
-  <div class="col-md-4">
-    <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
-      <div class="row">
-        <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>
-        <%= render(partial: 'job_details', collection: @project.active_jobs, as: :job, locals: { project: @project }) %>
-      </div>
+  <div id="project_jobs_files_col" class="row col-sm-8 col-lg-10 d-flex">
+    <div id="jobs_item" class="accordion col-12 col-lg-5 jobs-files-item" aria-live="assertive">
+      <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
+        <div class="row pill-box">
+          <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>
+          <%= render(partial: 'job_details', collection: @project.active_jobs, as: :job, locals: { project: @project }) %>
+        </div>
 
-      <div class="row">
-        <h2 class="lead fw-bolder d-flex justify-content-center">Completed Jobs</h2>
-        <div id="completed_jobs" class="row">
-          <%- @project.completed_jobs.each do |job| -%>
-          <div class="col-md-4" id="<%= "job_#{job.cluster}_#{job.id}" %>">
-            <%= render(partial: 'job_details_content', locals: { job: job, project: @project }) %>
+        <div class="row">
+          <h2 class="lead fw-bolder d-flex justify-content-center">Completed Jobs</h2>
+          <div id="completed_jobs" class="row pill-box">
+            <%- @project.completed_jobs.each do |job| -%>
+            <div class="job-pill" id="<%= "job_#{job.cluster}_#{job.id}" %>">
+              <%= render(partial: 'job_details_content', locals: { job: job, project: @project }) %>
+            </div>
+            <%- end -%>
           </div>
-          <%- end -%>
         </div>
       </div>
     </div>
-  </div>
-  <div class="col-md-6">
-    <div id="directory_browser" class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
-      <h2 class="lead fw-bolder d-flex justify-content-center"><%= "#{t('dashboard.project')} #{t('dashboard.directory')}" %>: &nbsp<i><%= @project.id %></i></h2>
-      <hr>
-      <%= turbo_frame_tag 'project_directory', 
-            src: directory_frame_path(
-              files: @files,
-              path: @project&.directory
-           ) do
-      %>
-        <div class="d-flex justify-content-center">
-          <div id="loading-icon" class="spinner-border rem-5" role="status">
-            <span class="sr-only">Loading...</span> 
+    <div class="col-12 col-lg-7 jobs-files-item">
+      <div id="directory_browser" class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
+        <h2 class="lead fw-bolder d-flex justify-content-center"><%= "#{t('dashboard.project')} #{t('dashboard.directory')}" %>: &nbsp<i><%= @project.id %></i></h2>
+        <hr>
+        <%= turbo_frame_tag 'project_directory', 
+              src: directory_frame_path(
+                files: @files,
+                path: @project&.directory
+            ) do
+        %>
+          <div class="d-flex justify-content-center">
+            <div id="loading-icon" class="spinner-border rem-5" role="status">
+              <span class="sr-only">Loading...</span> 
+            </div>
           </div>
-        </div>
-      <%- end -%>
+        <%- end -%>
+      </div>
     </div>
   </div>
 </div>