diff --git a/src/components/SongCard.jsx b/src/components/SongCard.jsx
index 248165b..ce7884f 100644
--- a/src/components/SongCard.jsx
+++ b/src/components/SongCard.jsx
@@ -10,8 +10,8 @@ const SongCard = ({ song, isPlaying, activeSong, data, i }) => {
 
   return (
     <div className="flex flex-col w-[270px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer">
-      <div className="relative w-full h-60">
-        <div className={`absolute inset-0 justify-center items-center ${activeSong.title === song.title ? 'flex bg-black bg-opacity-70' : 'hidden'}`}>
+      <div className="relative w-full h-60 group">
+        <div className={`absolute inset-0 justify-center items-center bg-black bg-opacity-50 group-hover:flex ${activeSong.title === song.title ? 'flex bg-black bg-opacity-70' : 'hidden'}`}>
           {isPlaying && activeSong.title === song.title ? (
             <FaPauseCircle size={35} onClick={() => dispatch(playPause(false))} />
           ) : (
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 0feec9f..800c09a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -24,7 +24,7 @@ const Home = () => {
   const songs = location.pathname.startsWith('/search') ? data.map((song) => song.track) : data;
 
   return (
-    <div className="flex flex-wrap gap-6">
+    <div className="flex flex-wrap gap-8">
       {songs?.map((song, i) => (
         <SongCard
           key={song.key}