diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index a6caf205f..2811b2be7 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -77,6 +77,17 @@
 
 
 #show {
+
+  #project-nav{
+    @include tab-nav;
+    margin-top: 3em;
+    margin-left: 1em;
+    margin-bottom: 1em;
+
+    border-bottom: solid;
+    border-color: #D0D0D0;
+  }
+
   .pending-project {
     margin-left: 5em;
     padding-bottom: 2em;
@@ -143,6 +154,14 @@
 }
 
 #content {
+  #project-nav{
+    @include tab-nav;
+    margin-bottom: 1em;
+
+    border-bottom: solid;
+    border-color: #D0D0D0;
+  }
+
   #file-list {
     width: 90%;
     border: 1px solid gray;
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 51a3a47d1..a64ab363c 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 class ProjectsController < ApplicationController
-  
+
   before_action :set_breadcrumbs
 
   def new
@@ -115,6 +115,9 @@ def show
     @project_purpose = @project_metadata[:project_purpose]
 
 
+    @project_session = "details"
+
+
     respond_to do |format|
       format.html do
         @project = ProjectShowPresenter.new(project)
@@ -188,6 +191,7 @@ def contents
     @files.sort_by!(&:path)
     @project = ProjectShowPresenter.new(project)
 
+    @project_session = "content"
   end
 
   def project_job_service
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index a9b61a6ab..9986ccd69 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -21,6 +21,7 @@ import { showCreateScript } from './atermScripts';
 import { dashStyle, dashTab } from './dashboardTabs';
 import { setupTable } from './pulDataTables';
 import { showMoreLess } from './showMoreLess';
+import { projectStyle, projectTab } from './projectTabs';
 
 window.bootstrap = bootstrap;
 window.displayMediafluxVersion = displayMediafluxVersion;
@@ -29,6 +30,8 @@ window.dashStyle = dashStyle;
 window.dashTab = dashTab;
 window.setupTable = setupTable;
 window.showMoreLess = showMoreLess;
+window.projectStyle = projectStyle;
+window.projectTab = projectTab;
 
 function initDataUsers() {
   function counterIncrement(counterId) {
diff --git a/app/javascript/entrypoints/projectTabs.js b/app/javascript/entrypoints/projectTabs.js
new file mode 100644
index 000000000..8b2657365
--- /dev/null
+++ b/app/javascript/entrypoints/projectTabs.js
@@ -0,0 +1,177 @@
+export function projectStyle(railsSession) {
+  const content = document.getElementById('project-content');
+  const details = document.getElementById('project-details');
+  const script = document.getElementById('project-script');
+  const approval = document.getElementById('project-approval');
+  const session = railsSession;
+  const project = document.getElementById('show') || document.getElementById('content');
+
+  // Check the session to see which tab should start as active be active
+  if (project) {
+    switch (session) {
+      case 'details':
+        details.style.borderBottom = 'solid';
+        details.style.borderColor = '#E77500';
+        details.classList.add('active');
+        break;
+      case 'script':
+        script.style.borderBottom = 'solid';
+        script.style.borderColor = '#E77500';
+        script.classList.add('active');
+        break;
+      case 'approval':
+        approval.style.borderBottom = 'solid';
+        approval.style.borderColor = '#E77500';
+        approval.classList.add('active');
+        break;
+      default:
+        content.style.borderBottom = 'solid';
+        content.style.borderColor = '#E77500';
+        content.classList.add('active');
+        break;
+    }
+  }
+
+  $('#project-content').on('mouseenter', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!content.classList.contains('active')) {
+      content.style.borderBottom = 'solid';
+      content.style.borderColor = '#121212';
+    }
+  });
+
+  $('#project-content').on('mouseleave', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!content.classList.contains('active')) {
+      content.style.border = 'none';
+    }
+  });
+
+  $('#project-content').on('click', (el) => {
+    const element = el;
+    element.preventDefault();
+    content.style.borderBottom = 'solid';
+    content.style.borderColor = '#E77500';
+    content.classList.add('active');
+  });
+
+  $('#project-details').on('mouseenter', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!details.classList.contains('active')) {
+      details.style.borderBottom = 'solid';
+      details.style.borderColor = '#121212';
+    }
+  });
+
+  $('#project-details').on('mouseleave', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!details.classList.contains('active')) {
+      details.style.border = 'none';
+    }
+  });
+
+  $('#project-details').on('click', (el) => {
+    const element = el;
+    element.preventDefault();
+    details.style.borderBottom = 'solid';
+    details.style.borderColor = '#E77500';
+    details.classList.add('active');
+  });
+
+  $('#project-script').on('mouseenter', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!script.classList.contains('active')) {
+      script.style.borderBottom = 'solid';
+      script.style.borderColor = '#121212';
+    }
+  });
+
+  $('#project-script').on('mouseleave', (el) => {
+    const element = el;
+    element.preventDefault();
+    if (!script.classList.contains('active')) {
+      script.style.border = 'none';
+    }
+  });
+
+  //   $('#project-script').on('click', (el) => {
+  //     const element = el;
+  //     element.preventDefault();
+  //     script.style.borderBottom = 'solid';
+  //     script.style.borderColor = '#E77500';
+  //     script.classList.add('active');
+  //   });
+
+  $('#project-approval').on('mouseenter', (el) => {
+    const element = el;
+    element.preventDefault();
+
+    if (!approval.classList.contains('active')) {
+      approval.style.borderBottom = 'solid';
+      approval.style.borderColor = '#121212';
+    }
+  });
+
+  $('#project-approval').on('mouseleave', (el) => {
+    const element = el;
+    element.preventDefault();
+
+    if (!approval.classList.contains('active')) {
+      approval.style.border = 'none';
+    }
+  });
+
+//   $('#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() {
+  $('#project-content').on('click', (inv) => {
+    const element = inv;
+    element.preventDefault();
+    const contentLocation = `${window.location}/contents`;
+
+    $.ajax({
+      type: 'GET',
+      url: contentLocation,
+      success() { // on success..
+        window.location.href = contentLocation; // update the DIV
+      },
+    });
+  });
+
+  $('#project-details').on('click', (inv) => {
+    const element = inv;
+    element.preventDefault();
+    const baseURL = window.location.href;
+    const content = '/contents';
+    const detailLocation = baseURL.replace(content, '');
+    $.ajax({
+      type: 'GET',
+      url: detailLocation,
+      success() { // on success..
+        window.location.href = detailLocation; // update the DIV
+      },
+    });
+  });
+
+  // $('#project-script').on('click', (inv) => {
+  //   const element = inv;
+  //   element.preventDefault();
+  // });
+
+  // $('#project-approval').on('click', (inv) => {
+  //   const element = inv;
+  //   element.preventDefault();
+  // });
+}
diff --git a/app/views/projects/contents.html.erb b/app/views/projects/contents.html.erb
index dc81b03a9..efe4014f4 100644
--- a/app/views/projects/contents.html.erb
+++ b/app/views/projects/contents.html.erb
@@ -1,9 +1,13 @@
 <%= render partial: "project_details_heading" %>
 
 <content id= "content">
-
-  <h2>Contents Summary</h2>
   <div class="container">
+    <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>
+    </div>
     <div class="row align-items-center contents-summary">
       <div class="col-sm-2 file-inventory">File Inventory:</div>
       <div class="col-sm-2 file-total-label">Total Files: <%= @num_files %></div>
@@ -15,10 +19,6 @@
     </div>
 
     <%= render partial: "contents", locals: { files: @files } %>
-    <section class="container-fluid px-1 mx-0 my-1 project-contents__navigate">
-      <a href="<%= project_path(@project) %>" class="btn btn-primary">Review Metadata</a>
-      <a href="<%= root_path %>" class="btn btn-secondary">Return to Dashboard</a>
-    </section>
     <section class="project-alerts my-4">
       <div class="row">
         <div class="col">
@@ -50,6 +50,7 @@
   </div>
 </div>
 <script type="module">
-    // Setup the DataTables
+    projectStyle('<%= @project_session %>');
+    projectTab();
     setupTable('#project-contents');
 </script>
\ No newline at end of file
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index ceaab018c..4d9027a42 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -7,6 +7,13 @@
   </div>
 <% end %>
 
+<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>
+</div>
+
 <div class="details">
   <h2>Roles
     <%# Per ticket #1114 only superusers have edit access %>
@@ -58,7 +65,7 @@
           <% Affiliation.all.each do |hash| %>
             <% if hash[:code] == department_code %>
             <%= hash[:name] %>
-            <% end %>      
+            <% end %>
           <% end %>
         <% end %>
       </dd>
@@ -89,21 +96,12 @@
   </ul>
 </div>
 
-<div class="details">
-  <% if !current_user.eligible_sysadmin? %>
-    <%= link_to "Review Contents", project_contents_path(@project.id), class: "btn btn-primary btn-sm" %>
-    <%= link_to "Return to Dashboard", root_path, class: "btn btn-primary btn-sm" %>
-  <% end %>
-</div>
-
 <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 %>
-    <%= link_to "Review Contents", project_contents_path(@project.id), class: "btn btn-primary btn-sm" %>
-    <%= link_to "Return to Dashboard", root_path, class: "btn btn-return btn-sm" %>
   <% end %>
 </div>
 
@@ -114,4 +112,6 @@
 <script type="module">
   // Make the AJAX call to fetch the aterm script
   showCreateScript('<%= project_create_script_path(format: "json") %>');
+  projectStyle('<%= @project_session %>');
+  projectTab();
 </script>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 181d6a460..1d6e4cead 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -13,9 +13,9 @@
         </div>
     </div>
     <div id="dashboard-nav">
-    <button id="dash-projects" class="tab-nav"> Projects </button>
-    <button id="dash-activity" class="tab-nav"> Activity </button>
-    <button id="dash-admin" class="tab-nav"> Administration </button>
+      <button id="dash-projects" class="tab-nav"> Projects </button>
+      <button id="dash-activity" class="tab-nav"> Activity </button>
+      <button id="dash-admin" class="tab-nav"> Administration </button>
     </div>
         <% if @dash_session == "project"%>
           <%= render partial: "projects_listing", locals: { projects: @dashboard_projects.sort_by(&:updated_at).reverse,  table_id: "projects-listing" } %>
diff --git a/spec/system/project_show_spec.rb b/spec/system/project_show_spec.rb
index c656b563d..5ccace130 100644
--- a/spec/system/project_show_spec.rb
+++ b/spec/system/project_show_spec.rb
@@ -54,9 +54,9 @@
             expect(page).to have_css ".approved"
             # Per ticket #1114 sponsor users no longer have edit access
             expect(page).not_to have_selector(:link_or_button, "Edit") # button next to role and description heading
-            expect(page).to have_selector(:link_or_button, "Review Contents")
-            expect(page).to have_selector(:link_or_button, "Return to Dashboard")
-            click_on("Return to Dashboard")
+            expect(page).to have_selector(:link_or_button, "Content Preview")
+            expect(page).to have_selector(:link_or_button, "Dashboard")
+            click_on("Dashboard")
             expect(page).to have_content("Welcome, #{sponsor_user.given_name}!")
             find(:xpath, "//h2[text()='#{project_in_mediaflux.title}']").click
           end
@@ -69,12 +69,9 @@
             visit "/projects/#{project_in_mediaflux.id}"
 
             expect(page).to have_selector(:link_or_button, "Edit") # button next to project settings
-            expect(page).to have_selector(:link_or_button, "Review Contents")
             expect(page).not_to have_selector(:link_or_button, "Withdraw Project Request")
-            expect(page).to have_selector(:link_or_button, "Return to Dashboard")
             # The project has already been approved
             expect(page).not_to have_selector(:link_or_button, "Approve Project")
-            expect(page).not_to have_selector(:link_or_button, "Deny Project")
           end
         end
       end
@@ -88,8 +85,8 @@
             expect(page).to have_content(pending_text)
             expect(page).to have_css ".pending"
             expect(page).not_to have_link("Edit")
-            expect(page).to have_selector(:link_or_button, "Review Contents")
-            click_on("Return to Dashboard")
+            expect(page).to have_selector(:link_or_button, "Content Preview")
+            click_on("Dashboard")
             expect(page).to have_content("Welcome, #{sponsor_user.given_name}!")
             find(:xpath, "//h2[text()='#{project_in_mediaflux.title}']").click
           end
@@ -103,7 +100,6 @@
             expect(page).to have_css ".pending"
             expect(page).not_to have_link("Edit")
             expect(page).to have_selector(:link_or_button, "Approve Project")
-            expect(page).to have_selector(:link_or_button, "Review Contents")
           end
         end
       end
@@ -164,15 +160,14 @@
         # sign in and be able to view the file count for the collection
         sign_in sponsor_user
         visit "/projects/#{project.id}"
-        expect(page).to have_selector(:link_or_button, "Review Contents")
-        click_on("Review Contents")
-        expect(page).to have_content("Contents Summary")
+        expect(page).to have_selector(:link_or_button, "Content Preview")
+        click_on("Content Preview")
         expect(page).to have_content("8 out of 22 shown")
         # expect(find(:css, "#file_count").text).to eq "16"
 
         # Be able to return to the dashboard
-        expect(page).to have_selector(:link_or_button, "Return to Dashboard")
-        click_on("Return to Dashboard")
+        expect(page).to have_selector(:link_or_button, "Dashboard")
+        click_on("Dashboard")
         expect(page).to have_content("Welcome, #{sponsor_user.given_name}!")
         find(:xpath, "//h2[text()='#{project.title}']").click
         expect(page).to have_content(project.title)
@@ -182,8 +177,8 @@
         # sign in and be able to view the file count for the collection
         sign_in sponsor_user
         visit "/projects/#{project.id}"
-        expect(page).to have_selector(:link_or_button, "Review Contents")
-        click_on("Review Contents")
+        expect(page).to have_selector(:link_or_button, "Content Preview")
+        click_on("Content Preview")
 
         # Caveat message is displayed
         expect(page).to have_content("Showing the first 100 files due to preview limit.")
@@ -193,8 +188,8 @@
         # sign in and be able to view the file count for the collection
         sign_in sponsor_user
         visit "/projects/#{project.id}"
-        expect(page).to have_selector(:link_or_button, "Review Contents")
-        click_on("Review Contents")
+        expect(page).to have_selector(:link_or_button, "Content Preview")
+        click_on("Content Preview")
 
         # Files are displayed
         expect(page).to have_content(first_file.name)
@@ -247,7 +242,6 @@
         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, "Return to Dashboard")
       end
 
       it "does not show the mediaflux id to the sponsor" do
@@ -259,7 +253,6 @@
         expect(page).not_to have_content pending_text
         expect(page).not_to have_selector(:link_or_button, "Approve Project")
         expect(page).not_to have_selector(:link_or_button, "Deny Project")
-        expect(page).to have_selector(:link_or_button, "Return to Dashboard")
       end
 
       it "shows the sysadmin buttons for a pending project" do
@@ -268,7 +261,6 @@
         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, "Return to Dashboard")
       end
     end
   end