diff --git a/assets/css/style.css b/assets/css/style.css
index 4b761eb..285ef18 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -64,11 +64,17 @@ strong {
 .cards {
     margin-top: 30px !important;
     background-color: #252525;
+	border: 2px solid #333;
     padding: 20px;
     border-radius: 10px;
     width: 600px !important;
     text-align: left;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+	transition: border 0.1s;
+}
+
+.cards:hover {
+	border: 2px solid #444;
 }
 
 footer {
@@ -572,12 +578,21 @@ div[class="cards sitemap shadow"] > h4 {
 	width: 600px;
 	padding: 20px;
 	border-radius: 10px;
-	backdrop-filter: blur(10px);
+	backdrop-filter: blur(5px);
+	visibility: hidden;
+	border: 2px solid #333;
+	opacity: 0;
+	transition: 0.3s;
+}
+
+.music-pop:hover {
+	border: 2px solid #444;
 }
 
 .top {
 	display: flex;
 	justify-content: space-between;
+	align-items: center;
 }
 
 .top button {
diff --git a/assets/js/index.js b/assets/js/index.js
index 91820b2..6b66aeb 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -236,3 +236,13 @@ setInterval(() => {
 	fetchSong();
 }, 60000)
 
+document.getElementById('banan').addEventListener('click', function() {
+	document.getElementById('music-pop').style.visibility = 'visible';
+	document.getElementById('music-pop').style.opacity = '1';
+})
+
+document.getElementById('close').addEventListener('click', function() {
+	document.getElementById('music-pop').style.opacity = '0';
+	document.getElementById('music-pop').style.visibility = 'hidden';
+})
+
diff --git a/index.html b/index.html
index 57c2f23..4ca6f34 100644
--- a/index.html
+++ b/index.html
@@ -112,9 +112,10 @@
 		</div>
 
 		<div class="music">
-			<img src="assets/img/dancing-banan.gif" class="banan">
-			<div class="music-pop">
-				<div class="top"><h3>Listening To <a id="artist">No one</a></h3><button><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g> </g></svg></button></div>
+			<img src="assets/img/dancing-banan.gif" class="banan" id="banan">
+			<div class="music-pop shadow" id="music-pop">
+				<div class="top"><h3>Listening To <a id="artist">No one</a></h3>
+					<button id="close"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g> </g></svg></button></div>							
 				<div class="song">
 					<div>
 						<img src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" id="song-cover">