diff --git a/public/Background Mask.png b/public/Background Mask.png
new file mode 100644
index 0000000..82e56a1
Binary files /dev/null and b/public/Background Mask.png differ
diff --git a/src/components/InstrumentPage.tsx b/src/components/InstrumentPage.tsx
index 28bdeda..cd0ddeb 100644
--- a/src/components/InstrumentPage.tsx
+++ b/src/components/InstrumentPage.tsx
@@ -62,7 +62,20 @@ export default function InstrumentPage<T extends Record<string, string[]>>({
           musicNotes[`${clef}${note}` as keyof typeof musicNotes] +
           musicNotes.staffEnd}
         </p> */}
-      <img src={`/${note}${clef}.png`} alt={`${note}${clef}`} />
+      <img
+        style={{
+          width: '300px',
+          height: '300px',
+          maskImage: `url(/${note}${clef}.png)`,
+          WebkitMaskImage: `url(/${note}${clef}.png)`,
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+        }}
+        src={`/Background Mask.png`}
+        alt={`${note} ${clef}`}
+      />
       <div className="valves">
         {valveSet ? (
           valveSet.map((valve) => ({