diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 1f0a683..27db80d 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -12,7 +12,11 @@ import { Link } from "react-router-dom";
 const Footer = () => {
   const currentYear = new Date().getFullYear();
   return (
-    <div className="h-[300px] mt-56 w-full flex flex-col bgfooter sm:h-full">
+
+    <div className="h-[300px] w-full flex flex-col bgfooter sm:h-full" style={{padding:"66px",marginTop:"13rem"}}>
+
+  
+
       {/* //for logo and social links */}
       <div className="sec1  xs:text-[36px]">
         <div>SPRING</div>
diff --git a/frontend/src/components/Home/Home.jsx b/frontend/src/components/Home/Home.jsx
index 651c96e..bf175a1 100644
--- a/frontend/src/components/Home/Home.jsx
+++ b/frontend/src/components/Home/Home.jsx
@@ -147,7 +147,7 @@ function RecentlyPlayedElement({ setCurrentSong, song, name, image, singer }) {
 
 function Genres() {
   return (
-    <div className="bg-[#18181D] w-full h-full rounded-lg">
+    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"50px"}}>
       <div className="h-full w-full flex flex-col p-2">
         <div className="flex h-[15%] justify-between items-center text-center pl-4 pr-4">
           <h1 className="text-2xl text-white font-medium">Genres</h1>
@@ -244,7 +244,11 @@ function TopSongs({ currentArtist, setCurrentSong }) {
   // console.log(topSongs)
 
   return (
-    <div className="bg-[#18181D]  w-full h-full rounded-lg">
+
+    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"50px"}}>
+
+  
+
       <div className="w-full h-full flex flex-col">
         <div className="flex h-[15%] justify-between items-center text-center p-1 ml-4 mr-4 mt-2">
           <h1 className="text-2xl text-white font-medium">{title}</h1>
@@ -311,7 +315,11 @@ function TopArtists({ setCurrentArtist }) {
   }, []);
 
   return (
-    <div className="bg-[#18181D]  w-full h-full rounded-lg">
+
+    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{height:"14rem",padding:"2rem",marginTop:"2rem"}}>
+
+    
+
       <div className="flex flex-col h-[100%] pl-4 pr-4 gap-2 pt-2">
         <div className="flex h-[15%] justify-between items-center text-center p-1">
           <h1 className="text-2xl text-white font-medium">Top Artists</h1>
diff --git a/frontend/src/components/MusicPlayer.jsx b/frontend/src/components/MusicPlayer.jsx
index c6f55aa..880fc25 100644
--- a/frontend/src/components/MusicPlayer.jsx
+++ b/frontend/src/components/MusicPlayer.jsx
@@ -32,7 +32,7 @@ function MusicPlayer({ currSong, shouldAutoPlay }) {
   }
 
   return (
-    <div className="bg-[#18181D] w-full h-full rounded-lg">
+    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"2rem",height:"34.8rem"}}>
       <div className="flex flex-col h-full justify-between p-2">
         {/* Image and like details */}
         <div className="flex h-full pt-6">