diff --git a/app/javascript/entrypoints/projectTabs.js b/app/javascript/entrypoints/projectTabs.js
index 8541d024d..fe6a51452 100644
--- a/app/javascript/entrypoints/projectTabs.js
+++ b/app/javascript/entrypoints/projectTabs.js
@@ -126,16 +126,16 @@ export function projectStyle(railsSession) {
     }
   });
 
-//   $('#project-approval').on('click', (el) => {
-//     const element = el;
-//     element.preventDefault();
-//     approval.style.borderBottom = 'solid';
-//     approval.style.borderColor = '#E77500';
-//     approval.classList.add('active');
-//   });
+  $('#project-approval').on('click', (el) => {
+    const element = el;
+    element.preventDefault();
+    approval.style.borderBottom = 'solid';
+    approval.style.borderColor = '#E77500';
+    approval.classList.add('active');
+  });
 }
 
-export function projectTab(contentUrl, detailsUrl) {
+export function projectTab(contentUrl, detailsUrl, approveUrl) {
   $('#project-content').on('click', (element) => {
     element.preventDefault();
     $.ajax({
@@ -157,4 +157,15 @@ export function projectTab(contentUrl, detailsUrl) {
       },
     });
   });
+
+  $('#project-approval').on('click', (element) => {
+    element.preventDefault();
+    $.ajax({
+      type: 'GET',
+      url: approveUrl,
+      success() {
+        window.location.href = approveUrl; // update the browser's URL
+      },
+    });
+  });
 }
diff --git a/app/views/projects/details.html.erb b/app/views/projects/details.html.erb
index 48dca3fce..98f4c033d 100644
--- a/app/views/projects/details.html.erb
+++ b/app/views/projects/details.html.erb
@@ -10,8 +10,12 @@
 <div id="project-nav">
   <button id="project-content" class="tab-nav"> Content Preview </button>
   <button id="project-details" class="tab-nav"> Details </button>
-  <button id="project-script" class="tab-nav"> View Create Script </button>
-  <button id="project-approval" class="tab-nav"> Approval Setting </button>
+  <% if current_user.eligible_sysadmin? %>
+    <% if @project.pending? %>
+      <button id="project-script" class="tab-nav"> View Create Script </button>
+      <button id="project-approval" class="tab-nav"> Approval Setting </button>
+    <% end %>
+  <% end %>
 </div>
 
 <div class="details">
@@ -99,7 +103,6 @@
 <div class="details">
   <% if current_user.eligible_sysadmin? %>
     <% if @project.pending? %>
-      <%= link_to "Approve Project", project_approve_path(@project.id), class: "btn btn-primary btn-sm" %>
       <%= link_to " View Create Script", "#", class: "bi bi-code btn btn-secondary btn-sm", id: "create-script-btn" %>
     <% end %>
   <% end %>
@@ -113,5 +116,5 @@
   // Make the AJAX call to fetch the aterm script
   showCreateScript('<%= project_create_script_path(format: "json") %>');
   projectStyle('<%= @project_session %>');
-  projectTab("<%= project_path %>", "<%= project_details_path %>");
+  projectTab("<%= project_path %>", "<%= project_details_path %>", "<%= project_approve_path %>");
 </script>
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index dc828c29a..6ed374095 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -5,8 +5,12 @@
     <div id="project-nav">
       <button id="project-content" class="tab-nav"> Content Preview </button>
       <button id="project-details" class="tab-nav"> Details </button>
-      <button id="project-script" class="tab-nav"> View Create Script </button>
-      <button id="project-approval" class="tab-nav"> Approval Setting </button>
+      <% if current_user.eligible_sysadmin? %>
+        <% if @project.pending? %>
+          <button id="project-script" class="tab-nav"> View Create Script </button>
+          <button id="project-approval" class="tab-nav"> Approval Setting </button>
+          <% end %>
+      <% end %>
     </div>
     <div class="row align-items-center contents-summary">
       <div class="col-sm-2 file-inventory">File Inventory:</div>
@@ -51,6 +55,6 @@
 </div>
 <script type="module">
     projectStyle('<%= @project_session %>');
-    projectTab("<%= project_path %>", "<%= project_details_path %>");
+    projectTab("<%= project_path %>", "<%= project_details_path %>", "<%= project_approve_path %>");
     setupTable('#project-contents');
 </script>
diff --git a/spec/system/project_details_spec.rb b/spec/system/project_details_spec.rb
index 000d5e712..14134c08a 100644
--- a/spec/system/project_details_spec.rb
+++ b/spec/system/project_details_spec.rb
@@ -99,7 +99,7 @@
             expect(page).to have_content(pending_text)
             expect(page).to have_css ".pending"
             expect(page).to have_link("Edit")
-            expect(page).to have_selector(:link_or_button, "Approve Project")
+            expect(page).to have_selector(:link_or_button, "Approval Setting")
           end
         end
       end
@@ -238,7 +238,7 @@
         expect(page).to have_content "1234"
         expect(page).not_to have_content "This project has not been saved to Mediaflux"
         expect(page).not_to have_content pending_text
-        expect(page).to have_selector(:link_or_button, "Approve Project")
+        expect(page).to have_selector(:link_or_button, "Approval Setting")
       end
 
       it "does not show the mediaflux id to the sponsor" do
@@ -257,7 +257,7 @@
         visit "/projects/#{project_not_in_mediaflux.id}/details"
         expect(page).to have_content "This project has not been saved to Mediaflux"
         expect(page).to have_content pending_text
-        expect(page).to have_selector(:link_or_button, "Approve Project")
+        expect(page).to have_selector(:link_or_button, "Approval Setting")
       end
     end
   end