diff --git a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx
index f40cc8825..bead76936 100644
--- a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx
+++ b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx
@@ -47,11 +47,7 @@ export function LockDeviceDetails({
   const [snackbarVariant, setSnackbarVariant] =
     useState<SnackbarVariant>('success')
 
-  const accessCodeCount = accessCodes?.length
-
-  if (accessCodes == null) {
-    return null
-  }
+  const accessCodeCount = accessCodes?.length ?? 0
 
   if (accessCodesOpen) {
     return (
@@ -137,13 +133,15 @@ export function LockDeviceDetails({
           </div>
           <div className='seam-box'>
             <div
-              className='seam-content seam-access-codes'
-              onClick={toggleAccessCodesOpen}
+              className={classNames('seam-content seam-access-codes', {
+                disabled: accessCodes == null,
+              })}
+              onClick={accessCodes != null ? toggleAccessCodesOpen : undefined}
             >
               <span className='seam-value'>
-                {accessCodeCount} {t.accessCodes}
+                {accessCodes != null ? accessCodeCount : '–'} {t.accessCodes}
               </span>
-              <ChevronRightIcon />
+              {accessCodes != null && <ChevronRightIcon />}
             </div>
           </div>
 
diff --git a/src/styles/_device-details.scss b/src/styles/_device-details.scss
index e0c9e48d6..5f22c0563 100644
--- a/src/styles/_device-details.scss
+++ b/src/styles/_device-details.scss
@@ -27,6 +27,11 @@
             justify-content: space-between;
             cursor: pointer;
 
+            &.disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+            }
+
             &:hover {
               background: colors.$item-hover-bg;
             }