diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
index cfca9070..373670d2 100644
--- a/app/assets/stylesheets/_projects.scss
+++ b/app/assets/stylesheets/_projects.scss
@@ -3,94 +3,103 @@
 @import "bootstrap";
 
 #project-details-heading {
-    margin-bottom: 1.5em;
+  margin-bottom: 1.5em;
 
-    .status {
-        float: right;
-        border-radius: 0.5em;
-        padding: 0.5em 0.75em 0.5em 0.5em;
-        text-transform: capitalize;
-        font-weight: bold;
-    }
+  .status {
+      float: right;
+      border-radius: 0.5em;
+      padding: 0.5em 0.75em 0.5em 0.5em;
+      text-transform: capitalize;
+      font-weight: bold;
+  }
 
-    .status::before {
-        content: "";
-        width: 20px;
-        height: 20px;
-    }
+  .status::before {
+      content: "";
+      width: 20px;
+      height: 20px;
+  }
 
-    .active { 
-        background: url("status_active.svg") no-repeat;
-        background-color: $status-info;
-        background-position: left;
-        padding-left: 20px;
-        color: $blue-dark;
-    }
+  .active { 
+      background: url("status_active.svg") no-repeat;
+      background-color: $status-info;
+      background-position: left;
+      padding-left: 20px;
+      color: $blue-dark;
+  }
 
-    .pending { 
-        background: url("status_pending.svg") no-repeat;
-        background-color: $status-warning;
-        background-position: left;
-        padding-left: 20px;
-        color: $yellow-dark;
+  .pending { 
+      background: url("status_pending.svg") no-repeat;
+      background-color: $status-warning;
+      background-position: left;
+      padding-left: 20px;
+      color: $yellow-dark;
 
-    }
+  }
 
-    .approved {
-        background: url("status_approved.svg") no-repeat;
-        background-color: $status-success;
-        background-position: left;
-        padding-left: 20px;
-        color: $green-dark;
-    }
+  .approved {
+      background: url("status_approved.svg") no-repeat;
+      background-color: $status-success;
+      background-position: left;
+      padding-left: 20px;
+      color: $green-dark;
+  }
 
-    .rejected {
-        background: url("status_rejected.svg") no-repeat;
-        background-color: $status-error;
-        background-position: left;
-        padding-left: 20px;
-        color: $red-darker;
-    }
-    
-    #project-description {
-        color: $black;
-        font-family: "Libre Franklin";
-        font-size: 1em;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 1.5em;
-    }
+  .rejected {
+      background: url("status_rejected.svg") no-repeat;
+      background-color: $status-error;
+      background-position: left;
+      padding-left: 20px;
+      color: $red-darker;
+  }
+  
+  #project-description {
+      color: $black;
+      font-family: "Libre Franklin";
+      font-size: 1em;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.5em;
+  }
 
-    .truncate {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2; 
-    }
+  .truncate {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; 
+  }
 
-    a#show-more-less-link {
-        color: $gray-60;
-    }
+  a#show-more-less-link {
+      color: $gray-60;
+  }
+
+  .label {
+    font-weight: bold;
+  } 
+  
+  .date-and-data-info ul {
+      padding: 0;
+  }
+  
+  .date-and-data-info li {
+      float: left;
+      list-style-type: none;
+      line-height: 1em;
+  }
+
+  .date-and-data-info li:first-child:after { 
+      content: "|"; 
+      padding: 0 .5em; 
+  }
 
-    .label {
+  .storage-quota {
+    border-radius: 0.5rem;
+    &-total {
       font-weight: bold;
-    } 
-    
-    .date-and-data-info ul {
-        padding: 0;
     }
-    
-    .date-and-data-info li {
-        float: left;
-        list-style-type: none;
-        line-height: 1em;
+    @include media-breakpoint-up(lg) {
+      max-width: 75%;
     }
-
-    .date-and-data-info li:first-child:after { 
-        content: "|"; 
-        padding: 0 .5em; 
-    }
-
+  }
 }
 
 .latest-download-link {
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index d7ea178b..025f93eb 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -29,4 +29,8 @@ $status-error: #F3D9D9;
 $status-warning: #FFF6DF;
 $status-info: #E6EEF8;
 
-$libre-franklin: "Libre Franklin", sans-serif;
\ No newline at end of file
+$libre-franklin: "Libre Franklin", sans-serif;
+
+$progress-bar-bg: $princeton-orange;
+$progress-height: 2rem;
+
diff --git a/app/javascript/entrypoints/pulDataTables.js b/app/javascript/entrypoints/pulDataTables.js
index 759e47d8..47b7a117 100644
--- a/app/javascript/entrypoints/pulDataTables.js
+++ b/app/javascript/entrypoints/pulDataTables.js
@@ -19,7 +19,9 @@ export function setupTable(tableId) {
 
   // If we have a table initialize it with DataTables
   if (table) {
-    table.dataTable(datasetOptions);
+    if (table.dataTable) {
+      table.dataTable(datasetOptions);
+    }
   }
 }
 
diff --git a/app/models/project.rb b/app/models/project.rb
index d56bb4b6..0da682e0 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -212,8 +212,12 @@ def asset_count(session_id:)
     values.fetch(:total_file_count, 0)
   end
 
+  def self.default_storage_unit
+    "KB"
+  end
+
   def self.default_storage_usage
-    "0 KB"
+    "0 {default_storage_unit}"
   end
 
   def storage_usage(session_id:)
diff --git a/app/presenters/project_show_presenter.rb b/app/presenters/project_show_presenter.rb
index db4ce236..e74a9915 100644
--- a/app/presenters/project_show_presenter.rb
+++ b/app/presenters/project_show_presenter.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 class ProjectShowPresenter
   delegate "id", "in_mediaflux?", "mediaflux_id", "pending?", "status", "title", to: :project
-  delegate "description", "project_id", "storage_capacity", "storage_performance_expectations", "project_purpose", to: :project_metadata
+  delegate "description", "project_id", "storage_performance_expectations", "project_purpose", to: :project_metadata
 
   attr_reader :project, :project_metadata
 
@@ -30,4 +30,106 @@ def data_manager
   def project_directory
     project.project_directory.gsub(Mediaflux::Connection.hidden_root, "")
   end
+
+  # This might not be needed
+  def storage_unit
+    return Project.default_storage_unit unless project.metadata.key?("storage_capacity")
+
+    root = project.metadata["storage_capacity"]
+    return Project.default_storage_unit unless root.key?("unit")
+
+    units = root["unit"]
+    return Project.default_storage_unit unless units.key?("approved")
+
+    units["approved"]
+  end
+
+  # This might not be needed
+  def storage_unit_tb?
+    storage_unit == "TB"
+  end
+
+  # This might not be needed
+  def storage_unit_gb?
+    storage_unit == "GB"
+  end
+
+  # This might not be needed
+  def storage_unit_mb?
+    storage_unit == "MB"
+  end
+
+  # This might not be needed
+  def divisor
+    if storage_unit_tb?
+      1024.0
+    elsif storage_unit_gb?
+      1.0
+    elsif storage_unit_mb?
+      1.0/(1024.0**1)
+    else
+      1.0/(1024.0**2)
+    end
+  end
+
+  # Usage is in MB
+  def default_usage_divisor
+    1.0/(1024.0**1)
+  end
+
+  # Capacity is in bytes
+  def default_capacity_divisor
+    1.0/(1024.0**3)
+  end
+
+  # This assumed that the storage usage is recorded in the same units as the units specified in the StorageCapacity metadata
+  def storage_usage(session_id:)
+    persisted = project.storage_usage_raw(session_id: session_id)
+    value = persisted.to_f
+
+    value*default_usage_divisor
+  end
+
+  def formatted_storage_usage(session_id:)
+    value = storage_usage(session_id: session_id)
+    format("%.3f", value)
+  end
+
+  def storage_capacity(session_id: nil)
+    return project_metadata.storage_capacity if session_id.nil?
+
+    persisted = project.storage_capacity_raw(session_id: session_id)
+    value = persisted.to_f
+
+    value*default_capacity_divisor
+  end
+
+  def formatted_storage_capacity(session_id:)
+    value = storage_capacity(session_id: session_id)
+    format("%.3f", value)
+  end
+
+  def storage_remaining(session_id:)
+    capacity = storage_capacity(session_id: session_id)
+    return 0.0 if capacity.zero?
+
+    usage = storage_usage(session_id: session_id)
+
+    capacity - usage
+  end
+
+  def formatted_storage_remaining(session_id:)
+    value = storage_remaining(session_id:)
+    format("%.3f", value)
+  end
+
+  def storage_usage_percent(session_id:)
+    capacity = storage_capacity(session_id: session_id)
+    return 0.0 if capacity.zero?
+
+    usage = storage_usage(session_id: session_id)
+
+    value = (usage/capacity)*100.0
+    format("%.1f", value)
+  end
 end
diff --git a/app/views/projects/_project_details_heading.html.erb b/app/views/projects/_project_details_heading.html.erb
index 9df2bcf4..6221ea53 100644
--- a/app/views/projects/_project_details_heading.html.erb
+++ b/app/views/projects/_project_details_heading.html.erb
@@ -1,49 +1,79 @@
 <div id="project-details-heading">
 
   <div class="row">
-  <div class="col-12 col-md-8"> 
-  <h1><%= @project.title %></h1>
-  </div>
-  <div class="col-6 col-md-4">  
-    <div class="status <%= @project.status.downcase %>">
-      <%= @project.status %>
+    <div class="col-6 col-md-8"> 
+      <h1><%= @project.title %></h1>
+    <div class="heading-decoration"></div>
     </div>
-  </div>
-</div>
-  
-  
-<div class="heading-decoration"></div>
-
-  <div id="project-description">
-    <div id="description-text" class="truncate">
-      <%= @project.description %>
+    <div class="col-6 col-md-4">
+      <div class="status <%= @project.status.downcase %>">
+        <%= @project.status %>
+      </div>
     </div>
-    <a id="show-more-less-link" class="show-more" href="#"><span>more...</span></a>
-</div>
+  </div><!-- .row -->
 
-<div class="row">
-  <div class="col-12">
-    <div class="date-and-data-info">
-      <ul> 
-        <li><span class="label">Date Created:</span> <%= @project.created %></li>
-        <li><span class="label">Last updated:</span> <%= @project.updated %></li>
-      </ul>
-    </div>
-  </div>
-</div>
+  <div class="row">
+    <div class="col-lg-6"><!-- .col -->
 
+      <div id="project-description">
+        <div id="description-text" class="truncate">
+          <%= @project.description %>
+        </div>
+        <a id="show-more-less-link" class="show-more" href="#"><span>more...</span></a>
+      </div><!-- #project-description -->
 
-<div class="row">
-  <div class="col-12">
-    <div class="date-and-data-info">
-      <ul> 
-        <li><span class="label">Data Sponsor:</span> <span class="netid-large"><%= @project.data_sponsor %></span></li>
-        <li><span class="label">Data Manager:</span> <span class="netid-large"><%= @project.data_manager %></span></li>
-      </ul>
-    </div>
-  </div>
-</div>
-</div>
+      <div class="row">
+        <div class="col-12">
+          <div class="date-and-data-info">
+            <ul> 
+              <li><span class="label">Date Created:</span> <%= @project.created %></li>
+              <li><span class="label">Last updated:</span> <%= @project.updated %></li>
+            </ul>
+          </div>
+        </div>
+      </div><!-- .row -->
+
+      <div class="row">
+        <div class="col-12">
+          <div class="date-and-data-info">
+            <ul> 
+              <li><span class="label">Data Sponsor:</span> <span class="netid-large"><%= @project.data_sponsor %></span></li>
+              <li><span class="label">Data Manager:</span> <span class="netid-large"><%= @project.data_manager %></span></li>
+            </ul>
+          </div>
+        </div><!-- .col-12 -->
+      </div><!-- .row -->
+    </div><!-- .col -->
+
+    <div class="col-lg-6">
+      <div class="row mt-4">
+        <div class="storage-quota container-fluid px-3 py-2 border border-secondary me-0">
+          <div class="row mt-2 mb-4">
+            <div class="col-6">
+              <b>Storage</b> <span class="storage-quota-total text-secondary">(<%= @project.formatted_storage_capacity(session_id: current_user.mediaflux_session) %> GB)</span>
+            </div>
+            <div class="col-6 text-end">
+              <%= link_to "Request More", "mailto:tigerdata@princeton.edu" %>
+            </div>
+          </div>
+          <div class="row my-2">
+            <div class="progress" role="progressbar" aria-label="Storage quota usage" aria-valuenow="<%= @project.storage_usage_percent(session_id: current_user.mediaflux_session) %>" aria-valuemin="0" aria-valuemax="100">
+              <div class="progress-bar" style="width: <%= @project.storage_usage_percent(session_id: current_user.mediaflux_session) %>%"></div>
+            </div>
+          </div>
+          <div class="row my-2">
+            <div class="col-6">
+              <%= @project.formatted_storage_usage(session_id: current_user.mediaflux_session) %> KB Used
+            </div>
+            <div class="col-6 text-secondary text-end">
+              <%= @project.formatted_storage_remaining(session_id: current_user.mediaflux_session) %> GB Free
+            </div>
+          </div>
+        </div>
+      </div><!-- .row -->
+    </div><!-- .col -->
+  </div><!-- .row -->
+</div><!-- #project-details-heading -->
 
 <script type="module">
 
diff --git a/spec/system/project_details_spec.rb b/spec/system/project_details_spec.rb
index 1a878ef7..7be5dbd6 100644
--- a/spec/system/project_details_spec.rb
+++ b/spec/system/project_details_spec.rb
@@ -156,6 +156,15 @@
         Mediaflux::AssetDestroyRequest.new(session_token: sponsor_user.mediaflux_session, collection: project.mediaflux_id, members: true).resolve
       end
 
+      it "renders the storage quota usage component" do
+        sign_in sponsor_user
+
+        visit "/projects/#{project.id}/details"
+        expect(page).to have_selector(:link_or_button, "Content Preview")
+        click_on("Content Preview")
+        expect(page).to have_content("8 out of 22 shown")
+      end
+
       it "Contents page has collection summary data" do
         # sign in and be able to view the file count for the collection
         sign_in sponsor_user
diff --git a/spec/system/project_spec.rb b/spec/system/project_spec.rb
index d40def68..75209cd2 100644
--- a/spec/system/project_spec.rb
+++ b/spec/system/project_spec.rb
@@ -580,23 +580,60 @@
         end
       end
 
-      context "when the storage capacity is requested, but no quota is allocated" do
-        it "renders the storage capacity in the show view" do
-          pending "how will we really render the storage capacity"
-          visit project_contents_path(approved_project)
-          # An empty strings are returned for a project with no quota allocation
-          expect(page).to have_content "0 KB / [Talk about what the default should be]"
-          expect(page).to be_axe_clean
-            .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
-            .skipping(:'color-contrast')
+      context "when the quota is allocated" do
+        let(:storage_capacity) do
+          {
+            size: { requested: 500, approved: 500 },
+            unit: { requested: "GB", approved: "GB" }
+          }.with_indifferent_access
+        end
+        let(:storage_performance_expectations) do
+          {
+            requested: "Standard",
+            approved: "performant"
+          }.with_indifferent_access
+        end
+        let(:metadata_model) do
+          hash = {
+            data_sponsor: sponsor_user.uid,
+            data_manager: data_manager.uid,
+            project_directory: "project-123",
+            title: "project 123",
+            departments: ["RDSS"],
+            description: "hello world",
+            data_user_read_only: [read_only.uid],
+            data_user_read_write: [read_write.uid],
+            status: ::Project::PENDING_STATUS,
+            created_on: Time.current.in_time_zone("America/New_York").iso8601,
+            created_by: FactoryBot.create(:user).uid,
+            project_id: "abc-123",
+            storage_capacity: storage_capacity,
+            storage_performance_expectations: storage_performance_expectations,
+            project_purpose: "Research"
+            # This cannot be passed to the metadata
+            # quota_used: "409600",
+          }
+          ProjectMetadata.new_from_hash(hash)
+        end
+
+        let(:approved_project) do
+          persisted = FactoryBot.create(:approved_project, metadata_model: metadata_model)
+          persisted.mediaflux_id = nil
+          persisted
+        end
+
+        before do
+          sign_in sponsor_user
+          # Save the project in mediaflux
+          approved_project.save_in_mediaflux(user: sponsor_user)
         end
-      end
 
-      context "when the quota is allocated" do
         it "renders the storage capacity in the show view" do
-          pending "this should not be on the project view page"
-          visit project_contents_path(approved_project)
-          expect(page).to have_content "400 bytes / 500 GB" # should be 300 GB which is the quota, instead of 500GB which is the requested capacity
+          visit project_path(approved_project)
+
+          expect(page).to have_content "Storage (465.661 GB)"
+          expect(page).to have_content "0.391 KB Used"
+          expect(page).to have_content "465.271 GB Free"
           expect(page).to be_axe_clean
             .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa, :section508)
             .skipping(:'color-contrast')