diff --git a/frontend/src/components/Auth/firebase.js b/frontend/src/components/Auth/firebase.js
index eafed44..d2ca8a5 100644
--- a/frontend/src/components/Auth/firebase.js
+++ b/frontend/src/components/Auth/firebase.js
@@ -3,14 +3,25 @@ import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
 
 // Your web app's Firebase configuration
+// const firebaseConfig = {
+//   apiKey: import.meta.env.VITE_API_KEY,
+//   authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+//   projectId: import.meta.env.VITE_PROJECT_ID,
+//   storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+//   messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+//   appId: import.meta.env.VITE_APP_ID,
+//   databaseURL: import.meta.env.VITE_DATABASE_URL, 
+// };
+
+
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_API_KEY,
-  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_APP_ID,
-  databaseURL: import.meta.env.VITE_DATABASE_URL, 
+  apiKey: "AIzaSyBNZqJmtwAqYuE0zrtdSMdgcoXZSoRdMew",
+  authDomain: "opensource-2faad.firebaseapp.com",
+  projectId: "opensource-2faad",
+  storageBucket: "opensource-2faad.appspot.com",
+  messagingSenderId: "1060453831050",
+  appId: "1:1060453831050:web:4e94554bd4ec6e9f37f873",
+  measurementId: "G-QL0FTXFWEH"
 };
 
 // Initialize Firebase
@@ -19,12 +30,3 @@ export const auth = getAuth(app);
 export const db = getFirestore(app);
 export default app;
 
-// const firebaseConfig = {
-//   apiKey: "AIzaSyBNZqJmtwAqYuE0zrtdSMdgcoXZSoRdMew",
-//   authDomain: "opensource-2faad.firebaseapp.com",
-//   projectId: "opensource-2faad",
-//   storageBucket: "opensource-2faad.appspot.com",
-//   messagingSenderId: "1060453831050",
-//   appId: "1:1060453831050:web:4e94554bd4ec6e9f37f873",
-//   measurementId: "G-QL0FTXFWEH"
-// };
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 27db80d..68f963d 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -12,11 +12,10 @@ import { Link } from "react-router-dom";
 const Footer = () => {
   const currentYear = new Date().getFullYear();
   return (
-
-    <div className="h-[300px] w-full flex flex-col bgfooter sm:h-full" style={{padding:"66px",marginTop:"13rem"}}>
-
-  
-
+    <div
+      className="h-[300px] w-screen 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>
@@ -26,22 +25,34 @@ const Footer = () => {
       <div className="sec2 ">
         <ul className="company  sm:gap-[10px] sm:grid sm:grid-cols-1 sm:p-[10px] sm:text-center">
           <li>
-            <Link to="/aboutus" className="hov" >About Us</Link>
+            <Link to="/aboutus" className="hov">
+              About Us
+            </Link>
           </li>
           <li>
-            <Link to="/culture" className="hov" >Culture</Link>
+            <Link to="/culture" className="hov">
+              Culture
+            </Link>
           </li>
           <li>
-            <Link to="/blog" className="hov" >Blogs</Link>
+            <Link to="/blog" className="hov">
+              Blogs
+            </Link>
           </li>
           <li>
-            <Link to="/terms" className="hov" >Terms and Policy</Link>
+            <Link to="/terms" className="hov">
+              Terms and Policy
+            </Link>
           </li>
           <li>
-            <Link to="/contactus" className="hov" >Help and Support</Link>
+            <Link to="/contactus" className="hov">
+              Help and Support
+            </Link>
           </li>
           <li>
-            <Link to="/contributors" className="hov">Our Contributors</Link>
+            <Link to="/contributors" className="hov">
+              Our Contributors
+            </Link>
           </li>
         </ul>
       </div>
@@ -52,7 +63,11 @@ const Footer = () => {
           <span className="icons">
             <a href="/" target="_blank" rel="noopener noreferrer">
               {" "}
-              <AiOutlineInstagram color="white" fontSize={25} className="ico " />
+              <AiOutlineInstagram
+                color="white"
+                fontSize={25}
+                className="ico "
+              />
             </a>
           </span>
           <span className="icons">
diff --git a/frontend/src/components/Home/Home.jsx b/frontend/src/components/Home/Home.jsx
index bf175a1..e23ec56 100644
--- a/frontend/src/components/Home/Home.jsx
+++ b/frontend/src/components/Home/Home.jsx
@@ -58,11 +58,14 @@ function Main() {
   }, []);
 
   return (
-    <div className="flex flex-col h-full gap-4 w-full">
+    <div
+      className="flex flex-col h-auto gap-4 w-full"
+      style={{ maxWidth: "calc(100vw - 80px)" }}
+    >
       {/* Top user section */}
       <UserIconSection />
       {/* Middle */}
-      <div className="w-full  mb-6  h-[25%]">
+      <div className="w-full mb-6 h-auto">
         <RecentlyPlayed
           setCurrentSong={setCurrentSong}
           recentlyPlayedSongs={recentlyPlayedSongs}
@@ -70,26 +73,24 @@ function Main() {
       </div>
 
       {/* Bottom */}
-      <div className="h-[75%]  w-full">
-        <div className="flex h-full gap-4">
-          {/* Left section */}
-          <div className="flex flex-col gap-4 w-full h-full">
-            <div className="h-[40%]">
-              <TopArtists setCurrentArtist={setCurrentArtist} />
-            </div>
-            <div className="flex h-[60%]  gap-4 w-full">
-              <Genres />
-              <TopSongs
-                currentArtist={currentArtist}
-                setCurrentSong={setCurrentSong}
-              />
-            </div>
+      <div className="flex flex-row xs:flex-col-reverse h-auto w-full gap-4  ">
+        {/* Left section */}
+        <div className="flex flex-col gap-4  w-auto sm:w-[50%] xs:w-full  ">
+          <div className=" w-full h-auto">
+            <TopArtists setCurrentArtist={setCurrentArtist} />
           </div>
-          {/* Right section */}
-          <div className="w-[30%]  min-w-[300px] h-[80%]  relative">
-            <MusicPlayer currSong={currentSong} shouldAutoPlay={true} />
+          <div className="flex h-auto flex-row sm:flex-col gap-4 w-full">
+            <Genres />
+            <TopSongs
+              currentArtist={currentArtist}
+              setCurrentSong={setCurrentSong}
+            />
           </div>
         </div>
+        {/* Right section */}
+        <div className="w-[30%] md:w-[40%] sm:w-[50%] max-w-[300px]  sm:max-w-none xs:w-full ">
+          <MusicPlayer currSong={currentSong} shouldAutoPlay={true} />
+        </div>
       </div>
     </div>
   );
@@ -147,16 +148,16 @@ function RecentlyPlayedElement({ setCurrentSong, song, name, image, singer }) {
 
 function Genres() {
   return (
-    <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">
+    <div className="bg-[#18181D]  w-[45%] sm:w-full max-h-fit  rounded-lg">
+      <div className="w-full flex flex-col p-4">
+        <div className="flex justify-between items-center ">
           <h1 className="text-2xl text-white font-medium">Genres</h1>
           <h3 className="text-white text-lg">See all</h3>
         </div>
-        <div className="h-full p-2">
-          <div className="flex gap-4 h-full flex-col flex-1 p-2 pl-4 pr-4">
+        <div className="flex w-full">
+          <div className="flex gap-4 w-full flex-col pt-4">
             {/* Genre boxes */}
-            <div className="flex h-full gap-4">
+            <div className="flex w-full  gap-4">
               <div className="bg-[#E76E67] flex flex-1 justify-center text-xl font-medium items-center rounded-lg">
                 Dance/Electric
               </div>
@@ -206,7 +207,7 @@ export function TopSongsElement({
     >
       <div className="flex gap-4 justify-start">
         <div className="text-center m-auto">{index}</div>
-        <div className="flex gap-4">
+        <div className="flex gap-2">
           <img src={img} className="w-10 h-10 object-cover rounded-sm" />
           <div className="text-sm text-start">
             <div>{song.name}</div>
@@ -244,18 +245,14 @@ function TopSongs({ currentArtist, setCurrentSong }) {
   // console.log(topSongs)
 
   return (
-
-    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"50px"}}>
-
-  
-
+    <div className="bg-[#18181D] w-full max-h-80  py-4 px-1 rounded-lg">
       <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">
+        <div className="flex justify-between items-center px-4 mb-2">
           <h1 className="text-2xl text-white font-medium">{title}</h1>
           <h3 className="text-white text-lg">See all</h3>
         </div>
         {/* Top chart list */}
-        <div className="flex flex-col gap-2 overflow-scroll  p-2">
+        <div className="flex flex-col gap-2 overflow-y-auto ">
           {topSongs.slice(0, 10).map((song, index) => (
             <TopSongsElement
               key={index}
@@ -285,14 +282,12 @@ function TopArtistElement({
   return (
     <div
       key={id}
-      className="flex flex-1 p-2 flex-col gap-2 hover:cursor-pointer"
+      className="flex p-2  flex-col gap-2 hover:cursor-pointer"
       onClick={() => onClick(name)}
     >
-      <img src={img} className="h-[60%] aspect-square rounded-lg object-fill" />
+      <img src={img} className=" w-14 h-14 object-cover rounded-lg " />
       <div className="flex h-[20%] flex-col gap-1">
-        <h2 className="font-medium text-white text-[1em]">
-          {name.toUpperCase()}
-        </h2>
+        <h2 className="font-medium text-white text-sm">{name.toUpperCase()}</h2>
         {/* <h4 className="text-white font-medium text-[0.9em]">top charts: {weeks_on_chart} </h4> */}
       </div>
     </div>
@@ -315,17 +310,13 @@ function TopArtists({ setCurrentArtist }) {
   }, []);
 
   return (
-
-    <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">
+    <div className="bg-[#18181D] w-full h-auto  rounded-lg mt-8 p-4">
+      <div className="flex flex-col gap-2 ">
+        <div className="flex justify-between items-center">
           <h1 className="text-2xl text-white font-medium">Top Artists</h1>
           <h3 className="text-white text-lg">See all</h3>
         </div>
-        <div className="flex h-[85%] gap-4">
+        <div className="flex overflow-x-auto w-full gap-4">
           {artists &&
             artists.songs
               .slice(0, 8)
@@ -348,8 +339,8 @@ function TopArtists({ setCurrentArtist }) {
 
 function Home({ setCurrPage }) {
   return (
-    <div className="w-screen h-screen p-4 text-center">
-      <div className="w-full h-full flex gap-4">
+    <div className="max-w-screen h-auto p-4 text-center">
+      <div className="max-w-screen  h-auto flex gap-4">
         <Navbar setCurrPage={setCurrPage} />
         <Main />
       </div>
diff --git a/frontend/src/components/MusicPlayer.jsx b/frontend/src/components/MusicPlayer.jsx
index a2b03ae..fa885d8 100644
--- a/frontend/src/components/MusicPlayer.jsx
+++ b/frontend/src/components/MusicPlayer.jsx
@@ -40,15 +40,22 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
   };
 
   return (
-    <div className="bg-[#18181D] w-full h-full rounded-lg" style={{ marginTop: "2rem", height: "34.8rem" }}>
+    <div className="bg-[#18181D] w-full h-full rounded-lg mt-8 ">
       <div className="flex flex-col h-full justify-between p-2">
         {/* Image and like details */}
         <div className="flex h-full pt-6">
-          <div className={`flex justify-center likeIconOuter w-[20%] h-[20%] ${isLiked ? "clicked" : ""}`}>
+          <div
+            className={`flex justify-center likeIconOuter w-[20%] h-[20%] ${
+              isLiked ? "clicked" : ""
+            }`}
+          >
             <AiFillLike
               className={` mt-2 likeIcon ${isLiked ? "clicked" : ""}`}
-              onClick={handleLikeClick} 
-              style={{ color: isLiked ? 'red' : 'currentColor', fontSize: '27px' }}
+              onClick={handleLikeClick}
+              style={{
+                color: isLiked ? "red" : "currentColor",
+                fontSize: "27px",
+              }}
             />
             <div className="vertical-line vertical-line-1"></div>
             <div className="vertical-line vertical-line-2"></div>
@@ -58,7 +65,11 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
           </div>
           {/* Song Image */}
           <div className="flex flex-col justify-start gap-4 h-full w-[60%]">
-            <img src={songImage} alt="song image" className="rounded-2xl w-full aspect-square" />
+            <img
+              src={songImage}
+              alt="song image"
+              className="rounded-2xl w-full aspect-square"
+            />
             <div className="flex flex-col gap-1">
               <h2 className="text-white font-medium text-2xl">{songName}</h2>
               <h3 className="text-white">{artistName}</h3>
@@ -78,7 +89,7 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
             src={audioUrl}
             customIcons={customIcons}
             onEnded={() => {
-              setSongHasEnded(true)
+              setSongHasEnded(true);
             }}
           />
         </div>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index f2198e0..59da311 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -15,7 +15,7 @@ import { RiHome5Fill } from "react-icons/ri";
 function Navbar() {
 
   return (
-    <div className="w-[5%] min-w-[70px] max-w-[80px] h-full rounded-lg">
+    <div className="min-w-[70px] max-w-[80px] h-full rounded-lg">
       <div className="flex flex-col gap-3 w-full h-full">
         <div className="flex p-4 flex-col gap-6 rounded-lg items-center justify-center hover:bg-gray-800">
           <IoReorderThreeOutline className="w-full h-full scale-[1.2] hover:cursor-pointer" />
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c47425e..a414f9d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,10 +5,10 @@ export default {
     extend: {
       screens: {
         "h-md": { raw: "(max-height: 768px)" },
-        sm: { max: "690px" },
-        lg: { max: "1800px" },
+        sm: { max: "769px" },
+        lg: { max: "1280px" },
         lgm: { max: "1140px" },
-        md: { max: "990px" },
+        md: { max: "1080px" },
         xs: { max: "480px" },
         minmd: "1700px",
         minlg: "2100px",