diff --git a/src/App.tsx b/src/App.tsx
index 9038f5c..bcdc6e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Music, { MusicEntry } from './components/music.tsx';
 import { Bdpfp, Normalpfp } from './components/pfp.tsx';
 import { InfoCard } from './components/middlecard.tsx';
 export const [shouldpopup, setpopup] = createSignal(false)
+export const [shouldpopupEasterEgg, setpopupEasterEgg] = createSignal(false)
 export const [ishover, setishover] = createSignal(false)
 
 let explodcount = 0
@@ -79,7 +80,7 @@ function App() {
   }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://proxy.mono.exhq.dev/_/plain/https://git.lgbt/assets/img/logo.png" alt="logo of git.lgbt" /> as HTMLImageElement
   return (
     <>
-      {isitmybd() ? <Bdpfp /> : <Normalpfp />}
+      {isitmybd() ? <Bdpfp setpopupEasterEgg={setpopupEasterEgg}/> : <Normalpfp setpopupEasterEgg={setpopupEasterEgg}/>}
 
       <p style={{ display: "none" }}>AdvancedBr my beloved</p>
       <AdvancedBr count={6} />
@@ -177,6 +178,16 @@ function App() {
           </div>
         </div>
       </Music>
+      <Music shouldpopup={shouldpopupEasterEgg}>
+        <div class='musicdiv'>
+          <div class='innermusic'>
+            <div class="music-close-button-div">
+              <button class="close-button" onClick={() => { setpopupEasterEgg(false) }}>X</button>
+            </div>
+            <img src={"https://pico.exhq.dev/-Aax47Gmdsy"}/>
+          </div>
+        </div>
+      </Music>
       <div class='footer'> made with ♥ by amy. <a href="https://git.lgbt/exhq/v2.exhq.dev">this website is opensource</a></div>
     </>
   )
diff --git a/src/components/pfp.tsx b/src/components/pfp.tsx
index e7be414..f1dc269 100644
--- a/src/components/pfp.tsx
+++ b/src/components/pfp.tsx
@@ -1,50 +1,47 @@
 import HoverComponent from "./name"
 import "./pfp.css"
 
-function remov() {
-    for (let i = 0; i < document.styleSheets.length; i++) {
-        let styleSheet = document.styleSheets[i];
-        let rules = styleSheet.cssRules || styleSheet.rules;
-        for (let j = 0; j < rules.length; j++) {
-            let rule = rules[j];
-            if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
-                styleSheet.deleteRule(j);
-            }
-        }
-    }
-}
-
-export function Bdpfp() {
-    return <div onmouseenter={remov} class='header bd' >
+export function Bdpfp({setpopupEasterEgg}: { setpopupEasterEgg: (value: boolean) => void }) {
+    return <div onContextMenu={(e) => {
+        e.preventDefault()
+        setpopupEasterEgg(true)
+    }} class='header bd'>
         <div class="birthdayparent">
-            <img class='birthdaypfp birthday' src="https://proxy.mono.exhq.dev/_/plain/https://dp.nea.moe/avatar/712639419785412668.png" alt="amy's current discord pfp, with a birthday hat on it" />
-            <img class='birthdayhat birthday' src="./birthday.png" alt="" />
-            <HoverComponent />
+            <img class='birthdaypfp birthday'
+                 src="https://proxy.mono.exhq.dev/_/plain/https://dp.nea.moe/avatar/712639419785412668.png"
+                 alt="amy's current discord pfp, with a birthday hat on it"/>
+            <img class='birthdayhat birthday' src="./birthday.png" alt=""/>
+            <HoverComponent/>
         </div>
     </div>
 
 }
 
-export function Normalpfp() {
-    return <div class="birthdayparent header normal">
-        <img class="initialanim" src="https://proxy.mono.exhq.dev/_/plain/https://dp.nea.moe/avatar/712639419785412668.png" alt="amy's current discord pfp" onMouseEnter={(e) => {
+export function Normalpfp({setpopupEasterEgg}: { setpopupEasterEgg: (value: boolean) => void }) {
+    return <div onContextMenu={(e) => {
+        e.preventDefault()
+        setpopupEasterEgg(true)
+    }} class="birthdayparent header normal">
+        <img class="initialanim"
+             src="https://proxy.mono.exhq.dev/_/plain/https://dp.nea.moe/avatar/712639419785412668.png"
+             alt="amy's current discord pfp" onMouseEnter={(e) => {
             (e.target as HTMLImageElement).animate([
-                { transform: "rotateZ(0deg)" },
-                { transform: "rotateZ(360deg)" },
+                {transform: "rotateZ(0deg)"},
+                {transform: "rotateZ(360deg)"},
             ], {
                 duration: 400,
                 iterations: 1,
             })
         }} onClick={(e) => {
             (e.target as HTMLImageElement).animate([
-                { transform: "rotateY(0deg)" },
-                { transform: "rotateY(360deg)" },
+                {transform: "rotateY(0deg)"},
+                {transform: "rotateY(360deg)"},
             ], {
                 duration: 150,
                 iterations: 1,
             })
-        }} />
-        <HoverComponent />
+        }}/>
+        <HoverComponent/>
     </div>
 
 }
\ No newline at end of file