diff --git a/documentation/src/components/Sights/SightCard/SightCard.tsx b/documentation/src/components/Sights/SightCard/SightCard.tsx
index 88d9e1157..3dd2f6f9d 100644
--- a/documentation/src/components/Sights/SightCard/SightCard.tsx
+++ b/documentation/src/components/Sights/SightCard/SightCard.tsx
@@ -5,6 +5,7 @@ import { Sight, VehicleDetails, VehicleModel } from '@monkvision/types';
 import { CopyPopup, CopyPopupHandle } from '@site/src/components';
 import { DynamicSVG } from '../../domOnly';
 import styles from './SightCard.module.css';
+import { DynamicSVGCustomizationFunctions } from '@monkvision/common-ui-web';
 
 const vehicleModelDisplayOverlays: Record<Exclude<VehicleModel, VehicleModel.ALL>, string> = {
   [VehicleModel.AUDIA7]: sights['audia7-WKJlxkiF'].overlay,
@@ -53,11 +54,11 @@ export function SightCard({ item }: SightCardProps) {
     copyPopupRef.current?.open();
   };
 
-  const getOverlayAttributes = () => ({
-    style: {
-      stroke: isDarkTheme ? '#ffffff' : '#000000',
-    },
-  });
+  const getOverlayAttributes: DynamicSVGCustomizationFunctions['getAttributes'] = (element) => {
+    element.attributeStyleMap.forEach(console.log);
+    element.attributeStyleMap.set('stroke', isDarkTheme ? '#ffffff' : '#000000')
+    return null;
+  };
 
   return (
     <>