diff --git a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
new file mode 100644
index 000000000..54a38b952
--- /dev/null
+++ b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
@@ -0,0 +1,71 @@
+<Hds::Card::Container @level="base" @hasBorder={{true}} class="mb-3 mt-6">
+  <div class="h-24 p-6 flex space-x-12 overflow-x-scroll">
+    <div class="shrink-0">
+      <div
+        class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
+      >Status</div>
+      <div class="flex items-center">
+        <Peerings::Badge @peering={{@peering}} />
+      </div>
+    </div>
+    <div class="shrink-0">
+      <div
+        class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
+      >Latest heartbeat</div>
+      <div class="flex items-center">
+        {{#if @peering.heartbeat}}
+          {{#let (smart-date-format @peering.heartbeat) as |smartDate|}}
+            <FlightIcon
+              @name="activity"
+              class="mr-0.5 text-hds-foreground-faint fill-current"
+            />
+            {{#if smartDate.isNearDate}}
+              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
+            {{else}}
+              <span>{{smartDate.friendly}}</span>
+            {{/if}}
+          {{/let}}
+        {{else}}
+          <span>None yet</span>
+        {{/if}}
+      </div>
+    </div>
+    <div class="shrink-0">
+      <div
+        class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foregrouny-primary"
+      >Latest receipt</div>
+      <div class="flex items-center">
+        {{#if @peering.receipt}}
+          {{#let (smart-date-format @peering.receipt) as |smartDate|}}
+            {{#if smartDate.isNearDate}}
+              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
+            {{else}}
+              <span>{{smartDate.friendly}}</span>
+            {{/if}}
+          {{/let}}
+        {{else}}
+          <span>None yet</span>
+        {{/if}}
+      </div>
+    </div>
+    <div class="shrink-0">
+      <div
+        class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
+      >Latest send</div>
+      <div class="flex items-center">
+        {{#if @peering.lastSend}}
+          {{#let (smart-date-format @peering.lastSend) as |smartDate|}}
+            {{#if smartDate.isNearDate}}
+              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
+            {{else}}
+              <span>{{smartDate.friendly}}</span>
+            {{/if}}
+          {{/let}}
+        {{else}}
+          <span>None yet</span>
+        {{/if}}
+      </div>
+
+    </div>
+  </div>
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs
index a60f11ae0..25177b78e 100644
--- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs
+++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs
@@ -36,87 +36,7 @@
             </h1>
           </BlockSlot>
           <BlockSlot @name="content">
-            <Hds::Card::Container
-              @level="base"
-              @hasBorder={{true}}
-              class="mb-3 mt-6"
-            >
-              <div class="h-24 p-6 flex space-x-12 overflow-x-scroll">
-                <div class="shrink-0">
-                  <div
-                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
-                  >Status</div>
-                  <div class="flex items-center">
-                    <Peerings::Badge @peering={{item}} />
-                  </div>
-                </div>
-                <div class="shrink-0">
-                  <div
-                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
-                  >Latest heartbeat</div>
-                  <div class="flex items-center">
-                    {{#if item.heartbeat}}
-                      {{#let (smart-date-format item.heartbeat) as |smartDate|}}
-                        <FlightIcon
-                          @name="activity"
-                          class="mr-0.5 text-hds-foreground-faint fill-current"
-                        />
-                        {{#if smartDate.isNearDate}}
-                          <span
-                            {{tooltip smartDate.friendly}}
-                          >{{smartDate.relative}}</span>
-                        {{else}}
-                          <span>{{smartDate.friendly}}</span>
-                        {{/if}}
-                      {{/let}}
-                    {{else}}
-                      <span>None yet</span>
-                    {{/if}}
-                  </div>
-                </div>
-                <div class="shrink-0">
-                  <div
-                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foregrouny-primary"
-                  >Latest receipt</div>
-                  <div class="flex items-center">
-                    {{#if item.receipt}}
-                      {{#let (smart-date-format item.receipt) as |smartDate|}}
-                        {{#if smartDate.isNearDate}}
-                          <span
-                            {{tooltip smartDate.friendly}}
-                          >{{smartDate.relative}}</span>
-                        {{else}}
-                          <span>{{smartDate.friendly}}</span>
-                        {{/if}}
-                      {{/let}}
-                    {{else}}
-                      <span>None yet</span>
-                    {{/if}}
-                  </div>
-                </div>
-                <div class="shrink-0">
-                  <div
-                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
-                  >Latest send</div>
-                  <div class="flex items-center">
-                    {{#if item.lastSend}}
-                      {{#let (smart-date-format item.lastSend) as |smartDate|}}
-                        {{#if smartDate.isNearDate}}
-                          <span
-                            {{tooltip smartDate.friendly}}
-                          >{{smartDate.relative}}</span>
-                        {{else}}
-                          <span>{{smartDate.friendly}}</span>
-                        {{/if}}
-                      {{/let}}
-                    {{else}}
-                      <span>None yet</span>
-                    {{/if}}
-                  </div>
-
-                </div>
-              </div>
-            </Hds::Card::Container>
+            <Consul::Peer::BentoBox @peering={{item}} />
             <Peerings::Provider @peer={{item}} as |peering|>
               <TabNav @items={{peering.data.tabs}} />