diff --git a/public/index.html b/public/index.html
index 8647cf3..2da0c62 100644
--- a/public/index.html
+++ b/public/index.html
@@ -236,5 +236,9 @@
         </footer>
 
 	<div id="overlay"></div>
+
+        <a href="https://git.arimelody.me/ari/prideflag" target="_blank" id="prideflag">
+                <img src="pridetriangle.svg" width="120" height="120" alt="progressive pride flag">
+        </a>
 </body>
 </html>
diff --git a/public/music.html b/public/music.html
index f008473..0d6d9c7 100644
--- a/public/music.html
+++ b/public/music.html
@@ -121,5 +121,9 @@
         </footer>
 
 	<div id="overlay"></div>
+
+        <a href="https://git.arimelody.me/ari/prideflag" target="_blank" id="prideflag">
+                <img src="pridetriangle.svg" width="120" height="120" alt="progressive pride flag">
+        </a>
 </body>
 </html>
diff --git a/public/style/main.css b/public/style/main.css
index 1a5880a..7dbb40b 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -394,6 +394,31 @@ footer {
 	mix-blend-mode: overlay;
 }
 
+#prideflag img {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 120px;
+        transform-origin: 100% 0%;
+        transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+        z-index: 8008135;
+        pointer-events: none;
+}
+#prideflag img:hover {
+        transform: scale(110%);
+}
+#prideflag img:active {
+        transform: scale(110%);
+}
+#prideflag img * {
+        pointer-events: all;
+}
+@media screen and (max-width: 950px) {
+        #prideflag {
+                display: none;
+        }
+}
+
 @media screen and (max-width: 780px) {
 	body {
 		font-size: 14px;