diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
index edb1061d..542ff112 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -1,4 +1,7 @@
 <script>
+  import { browser } from '$app/environment';
+  import { page } from '$app/stores';
+
   import ProductPage from "../[product]/+page.svelte";
   import Grid from "$lib/components/Grid.svelte";
   import LinkButton from "$lib/components/LinkButton.svelte";
@@ -7,10 +10,12 @@
   import Space from "$lib/components/Space.svelte";
 
   import { faq } from "$lib/constants/faq.svelte";
+  import { vehicleCountText, NO_HARNESS_OPTION } from '$lib/constants/vehicles.js';
 
   import FourImage from "$lib/images/products/comma-four/four_screen_on.png";
   import OBDCCableImage from "$lib/images/products/obd-c-cable/obd-c-cable-four.png";
   import ReplacementMountsImage from "$lib/images/products/replacement-mounts/replacement-mounts-four.png";
+  import CarHarnessImage from "$lib/images/products/car-harness/car-harness.jpg";
   import CarBrandCollageImage from "$lib/images/car-brand-collage.jpg";
   import CoolingImage from "$lib/images/products/comma-four/cooling.png";
   import DeviceFrameImage from "$lib/images/products/comma-four/four_front.png";
@@ -28,9 +33,11 @@
   import DisplayIcon from "$lib/icons/features/display.svg?raw";
   import CableIcon from "$lib/icons/features/cable.svg?raw";
   import LocationIcon from "$lib/icons/features/location.svg?raw";
-  import { vehicleCountText } from '$lib/constants/vehicles.js';
 
   export let data;
+
+  $: harnessParam = browser ? $page.url.searchParams.get('harness') : null;
+  $: hasHarness = harnessParam && decodeURIComponent(harnessParam) !== NO_HARNESS_OPTION.car;
 </script>
 
 <ProductPage {data} />
@@ -51,7 +58,7 @@
     <hr />
     <Grid rowGap="0" templateColumns="0.5fr 1.25fr">
       <h2>In the Box</h2>
-      <div class="box-contents">
+      <div class="box-contents" class:has-harness={hasHarness}>
         <div>
           <img src={FourImage} loading="lazy" alt="comma four device">
           <p>comma four</p>
@@ -64,6 +71,12 @@
           <img src={ReplacementMountsImage} loading="lazy" alt="mount">
           <p>2 mounts</p>
         </div>
+        {#if hasHarness}
+        <div>
+          <img src={CarHarnessImage} loading="lazy" alt="car harness">
+          <p>car harness</p>
+        </div>
+        {/if}
       </div>
     </Grid>
     <hr />
@@ -389,21 +402,24 @@
     }
 
     & .box-contents {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2rem;
       text-align: center;
 
-      & > div {
-        width: 300px;
-        margin-bottom: 2rem;
+      &.has-harness {
+        grid-template-columns: repeat(2, 1fr);
+      }
 
-        & img {
-          max-height: 150px;
+      @media screen and (max-width: 768px) {
+        &, &.has-harness {
+          grid-template-columns: 1fr;
         }
+      }
 
-        & p {
-          margin: 0 2rem;
-        }
+      & img {
+        height: 150px;
+        object-fit: contain;
       }
     }