diff --git a/.changeset/long-pots-lay.md b/.changeset/long-pots-lay.md
new file mode 100644
index 0000000000..c1578d3cda
--- /dev/null
+++ b/.changeset/long-pots-lay.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move`Box` styles to PVC
diff --git a/app/components/primer/beta/border_box.pcss b/app/components/primer/beta/border_box.pcss
new file mode 100644
index 0000000000..fb38a79547
--- /dev/null
+++ b/app/components/primer/beta/border_box.pcss
@@ -0,0 +1,284 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+
+  & .Box-header {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+      line-height: 1.25;
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+}
+
+.Box--spacious {
+  & .Box-header {
+    padding: var(--primer-stack-padding-spacious, 24px);
+    line-height: 1.25;
+  }
+
+  & .Box-title {
+    font-size: var(--primer-text-title-size-medium, 20px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-stack-padding-spacious, 24px);
+      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+}
+
+.Box-header {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.Box-title {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Box-body {
+  padding: var(--primer-stack-padding-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+  &:last-of-type {
+    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}
+
+/* Box rows */
+.Box-row {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--color-border-muted);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+
+  &:first-of-type {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  /* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+  &.Box-row--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-accent-fg);
+      text-decoration: none;
+    }
+  }
+}
+
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--color-border-default);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+}
+
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+
+  & .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-footer {
+    border-color: var(--color-accent-muted);
+  }
+}
+
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+.Box--danger {
+  border-color: var(--color-danger-emphasis);
+
+  & .Box-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  & .Box-body {
+    &:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+/* Box with btn-octicon */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }
+}
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
index 0f6e474375..0251ee1234 100644
--- a/app/components/primer/primer.pcss
+++ b/app/components/primer/primer.pcss
@@ -9,6 +9,7 @@
 @import "./alpha/segmented_control.pcss";
 @import "./beta/avatar.pcss";
 @import "./beta/avatar_stack.pcss";
+@import "./beta/border_box.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
index c75f15c181..a5fece60a8 100644
--- a/demo/app/assets/stylesheets/application.css
+++ b/demo/app/assets/stylesheets/application.css
@@ -4,7 +4,6 @@
  *= require @primer/css/dist/primitives.css
  *= require @primer/css/dist/color-modes.css
  *= require @primer/css/dist/base.css
- *= require @primer/css/dist/box.css
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/forms.css
  *= require @primer/css/dist/layout.css
diff --git a/previews/primer/beta/border_box_preview.rb b/previews/primer/beta/border_box_preview.rb
index 4b0f757932..b3817160e6 100644
--- a/previews/primer/beta/border_box_preview.rb
+++ b/previews/primer/beta/border_box_preview.rb
@@ -6,9 +6,22 @@ module Beta
     class BorderBoxPreview < ViewComponent::Preview
       # @label Playground
       #
-      # @param padding [Symbol] select [default, condensed]
-      def playground(padding: :default)
+      # @param padding [Symbol] select [default, condensed, spacious]
+      # @param scheme [Symbol] select [default, neutral, info, warning]
+      def playground(padding: :default, scheme: :default)
         render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
+          component.footer { "Footer" }
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Beta::BorderBox.new) do |component|
           component.header { "Header" }
           component.body { "Body" }
           component.row { "Row one" }
@@ -18,11 +31,34 @@ def playground(padding: :default)
         end
       end
 
-      # @label Default options
+      # @label Header with title
+      def header_with_title
+        render(Primer::Beta::BorderBox.new) do |component|
+          component.with_header do |h|
+            h.title(tag: :h2) do
+              "Header with title"
+            end
+          end
+          component.body { "Body" }
+          component.footer { "Footer" }
+        end
+      end
+
+      # @label Row colors
+      def row_colors
+        render(Primer::Beta::BorderBox.new) do |component|
+          component.row(scheme: :default) { "Default" }
+          component.row(scheme: :neutral) { "Neutral" }
+          component.row(scheme: :info) { "Info" }
+          component.row(scheme: :warning) { "Warning" }
+        end
+      end
+
+      # @!group Padding
       #
-      # @param padding [Symbol] select [default, condensed]
-      def default(padding: :default)
-        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+      # @label Default
+      def padding_default
+        render(Primer::Beta::BorderBox.new) do |component|
           component.header { "Header" }
           component.body { "Body" }
           component.row { "Row one" }
@@ -32,15 +68,31 @@ def default(padding: :default)
         end
       end
 
-      # @label Row schemes
-      #
-      # @param padding [Symbol] select [default, condensed]
-      # @param scheme [Symbol] select [default, neutral, info, warning]
-      def row_schemes(padding: :default, scheme: :default)
-        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} scheme" }
+      # @label Condensed
+      def padding_condensed
+        render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row { "Row one" }
+          component.row { "Row two" }
+          component.row { "Row three" }
+          component.footer { "Footer" }
         end
       end
+
+      # @label Spacious
+      def padding_spacious
+        render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row { "Row one" }
+          component.row { "Row two" }
+          component.row { "Row three" }
+          component.footer { "Footer" }
+        end
+      end
+      #
+      # @!endgroup
     end
   end
 end
diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb
index 8fa04e5928..b8e98cfa7b 100644
--- a/test/css/component_specific_selectors_test.rb
+++ b/test/css/component_specific_selectors_test.rb
@@ -53,6 +53,21 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".UnderlineNav--full",
       ".UnderlineNav-container"
     ],
+    Primer::Beta::BorderBox => [
+      ".Box-btn-octicon",
+      ".Box--spacious .Box-title",
+      ".Box-row--unread",
+      ".Box-row.unread",
+      ".Box-row.navigation-focus",
+      ".Box-row--focus-gray",
+      ".Box-row--focus-blue",
+      ".Box-row-link",
+      ".Box-row--drag-button",
+      ".Box--scrollable",
+      ".Box--blue",
+      ".Box--danger",
+      ".Box-header--blue"
+    ],
     Primer::Beta::Button => [
       "summary.Button",
       ".Button-content--alignStart",