diff --git a/Api/Playlist.js b/Api/Playlist.js
index a2d0c46..b7e68a1 100644
--- a/Api/Playlist.js
+++ b/Api/Playlist.js
@@ -4,7 +4,7 @@ async function getPlaylistData(id){
   let config = {
     method: 'get',
     maxBodyLength: Infinity,
-    url: `https://jiosavan-api-with-playlist.vercel.app/api/playlists?id=${id}`,
+    url: `https://jiosavan-api-with-playlist.vercel.app/api/playlists?id=${id}&limit=100000`,
     headers: { },
   };
   try {
diff --git a/App.tsx b/App.tsx
index 67d2430..980167d 100644
--- a/App.tsx
+++ b/App.tsx
@@ -18,7 +18,7 @@ function App(){
     ...DefaultTheme,
     colors: {
       ...DefaultTheme.colors,
-      primary: '#8EBBFF',
+      primary: '#6CC04A',
       text: '#F4F5FC',
       textSecondary: '#CCCCCC',
       white : "white",
@@ -26,7 +26,7 @@ function App(){
       headingSize:width * 0.085,
       fontSize:width * 0.045,
       disabled:'rgb(131,131,131)',
-      background:'black',
+      background:'#101010',
     },
   };
   useEffect(()=>{
diff --git a/Component/Album/AlbumDetails.jsx b/Component/Album/AlbumDetails.jsx
index 63c68d4..b0722f9 100644
--- a/Component/Album/AlbumDetails.jsx
+++ b/Component/Album/AlbumDetails.jsx
@@ -37,7 +37,7 @@ export const AlbumDetails = ({name,releaseData,liked,Data}) => {
   const theme = useTheme()
   const width = Dimensions.get('window').width
   return (
-    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(0,0,0)', theme.colors.background]} style={{
+    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(23,23,23)', theme.colors.background]} style={{
       padding:10,
       alignItems:"center",
       justifyContent:"space-between",
diff --git a/Component/Discover/BundleEachMomentanGenres.jsx b/Component/Discover/BundleEachMomentanGenres.jsx
index c61f8e9..67251e3 100644
--- a/Component/Discover/BundleEachMomentanGenres.jsx
+++ b/Component/Discover/BundleEachMomentanGenres.jsx
@@ -4,7 +4,7 @@ import { EachMomentsandGenres } from "./EachMomentsandGenres";
 export const BundleEachMomentanGenres = ({list, color}) => {
   return (
     <View style={{gap:10}}>
-      {list.map((e,i)=> <EachMomentsandGenres text={e} key={i} color={color[i]}/>)}
+      {list.map((e,i)=> <EachMomentsandGenres text={e} key={i} color={color[i]} showLeftColor={true}/>)}
     </View>
   );
 };
diff --git a/Component/Discover/DiscoverRouteHeading.jsx b/Component/Discover/DiscoverRouteHeading.jsx
deleted file mode 100644
index f3c446e..0000000
--- a/Component/Discover/DiscoverRouteHeading.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Dimensions, Pressable, Text, View } from "react-native";
-import { useNavigation, useTheme } from "@react-navigation/native";
-import Feather from "react-native-vector-icons/Feather";
-import { Spacer } from "../Global/Spacer";
-import FastImage from "react-native-fast-image";
-import { SmallText } from "../Global/SmallText";
-import { GetUserNameValue } from "../../LocalStorage/StoreUserName";
-import { useEffect, useState } from "react";
-
-export const DiscoverRouteHeading = () => {
-  const [userName, setUserName] = useState("");
-
-  const theme = useTheme()
-  const width = Dimensions.get("window").width
-  const navigation = useNavigation()
-  async function getUserName(){
-    const name = await GetUserNameValue()
-    setUserName(FormatName(name))
-  }
-  function FormatName(name){
-    if (name.length >= 10){
-      return name.slice(0,11) + "..."
-    } else {
-      return name
-    }
-  }
-
-  useEffect(() => {
-    getUserName()
-  }, []);
-
-  return (
-    <>
-      <Spacer/>
-      <View style={{
-        paddingHorizontal:10,
-        flexDirection:"row",
-        alignItems:"center",
-        gap: 10,
-      }}>
-        <View style={{
-          borderRadius:1000,
-          elevation:10,
-          height:40,
-          width:40,
-          padding:2,
-        }}>
-          <FastImage source={require("../../Images/Logo.png")} style={{
-            flex:1,
-            borderRadius:1000,
-          }}/>
-        </View>
-        <View>
-          <SmallText text={`Hey, ${userName}`}/>
-          <Text style={{
-            fontWeight:500,
-            color:theme.colors.text,
-            fontSize:width * 0.045,
-          }}>{"Discover Music"}</Text>
-        </View>
-        <View style={{flex:1}}/>
-        <Pressable style={{
-          padding:5,
-          backgroundColor:"rgba(0,0,0,0)",
-          borderRadius:10,
-        }} onPress={()=>{
-          navigation.navigate("Search")
-        }}><Feather name={"search"} size={width * 0.055} color={theme.colors.text}/></Pressable>
-      </View>
-      <Spacer/>
-    </>
-  );
-};
diff --git a/Component/Discover/EachLanguageCard.jsx b/Component/Discover/EachLanguageCard.jsx
index c049365..8fb6d48 100644
--- a/Component/Discover/EachLanguageCard.jsx
+++ b/Component/Discover/EachLanguageCard.jsx
@@ -8,7 +8,7 @@ export const EachLanguageCard = ({language}) => {
     <Pressable onPress={()=>{
       navigation.navigate("LanguageDetail",{language:language.toLowerCase()})
     }} style={{
-      backgroundColor:"rgb(42,41,41)",
+      backgroundColor:"rgba(43,47,44,0.84)",
       padding:15,
       borderRadius:10,
       alignItems:"center",
diff --git a/Component/Discover/EachMomentsandGenres.jsx b/Component/Discover/EachMomentsandGenres.jsx
index f0f0f70..2990d5b 100644
--- a/Component/Discover/EachMomentsandGenres.jsx
+++ b/Component/Discover/EachMomentsandGenres.jsx
@@ -2,26 +2,27 @@ import { Pressable, View } from "react-native";
 import { PlainText } from "../Global/PlainText";
 import { useNavigation } from "@react-navigation/native";
 
-export const EachMomentsandGenres = ({text, color}) => {
+export const EachMomentsandGenres = ({text, color, showLeftColor, style}) => {
   const navigation = useNavigation()
   return (
     <Pressable onPress={()=>{
       navigation.navigate("ShowPlaylistofType",{Searchtext:text.toLowerCase()})
     }} style={{
-      backgroundColor:"rgb(42,41,41)",
+      backgroundColor:"rgba(43,47,44,0.84)",
       borderRadius:10,
       paddingRight:10,
       alignItems:"center",
       justifyContent:"flex-start",
       flexDirection:'row',
+      ...style,
     }}>
-      <View style={{
-        borderRadius:10,
-        width:10,
-        height:50,
-        backgroundColor:color,
-        marginRight:10,
-      }}/>
+      {showLeftColor && <View style={{
+        borderRadius: 10,
+        width: 10,
+        height: 50,
+        backgroundColor: color,
+        marginRight: 10,
+      }} />}
       <PlainText text={text}/>
     </Pressable>
   );
diff --git a/Component/Discover/LargeBentooCard.jsx b/Component/Discover/LargeBentooCard.jsx
deleted file mode 100644
index 41443da..0000000
--- a/Component/Discover/LargeBentooCard.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Pressable, View } from "react-native";
-import { Heading } from "../Global/Heading";
-import { PlainText } from "../Global/PlainText";
-import { useNavigation, useTheme } from "@react-navigation/native";
-import { PaddingConatiner } from "../../Layout/PaddingConatiner";
-import FastImage from "react-native-fast-image";
-import { SmallText } from "../Global/SmallText";
-import { Spacer } from "../Global/Spacer";
-import LinearGradient from "react-native-linear-gradient";
-
-export const LargeBentooCard = ({width,text,subtext,image,id}) => {
-  const theme = useTheme()
-  const navigation = useNavigation()
-  return (
-   <PaddingConatiner>
-     <Pressable onPress={()=>{
-       navigation.navigate("Playlist",{id,image:"https://c.saavncdn.com/editorial/charts_TrendingToday_134351_20230826113717.jpg",name:text,follower:subtext})
-     }} style={{
-       width:width,
-       height:180,
-       borderRadius:10,
-       flexDirection:"row",
-     }}>
-       <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(120,120,120,0)', 'rgba(0,0,0,0.56)', 'rgb(0,0,0)']} style={{
-        flex:1,
-       }}>
-       <FastImage source={image} style={{
-         width:"100%",
-         position:'absolute',
-         height:"100%",
-         borderRadius:10,
-         zIndex:-1,
-       }}/>
-         <View style={{
-           padding:theme.colors.spacing,
-           maxWidth:230,
-         }}>
-           <Heading text={text}/>
-           <PlainText text={subtext}/>
-           <Spacer/>
-           <Spacer/>
-           <SmallText text={"Listen Now →"} color={"black"} style={{
-             fontWeight:"bold",
-             color:'white',
-           }}/>
-         </View>
-       </LinearGradient>
-     </Pressable>
-   </PaddingConatiner>
-  );
-};
diff --git a/Component/Global/Heading.jsx b/Component/Global/Heading.jsx
index af0a911..33ee351 100644
--- a/Component/Global/Heading.jsx
+++ b/Component/Global/Heading.jsx
@@ -26,9 +26,10 @@ export const Heading = ({text, style, nospace}) => {
    <>
      {!nospace && <Spacer/>}
      <Text numberOfLines={2} style={{
-       fontWeight:600,
+       fontWeight:900,
        color:theme.colors.text,
        fontSize:Size,
+       fontFamily:'roboto',
        ...style,
      }}>{text}</Text>
      {!nospace && <Spacer/>}
diff --git a/Component/Global/HorizontalScrollSongs.jsx b/Component/Global/HorizontalScrollSongs.jsx
index 47ee9fb..5d20740 100644
--- a/Component/Global/HorizontalScrollSongs.jsx
+++ b/Component/Global/HorizontalScrollSongs.jsx
@@ -1,4 +1,3 @@
-import { TrendingSongLayout } from "../../Layout/TrendingSongLayout";
 import { EachSongCard } from "./EachSongCard";
 import { Dimensions, ScrollView, View } from "react-native";
 import { useEffect, useState } from "react";
@@ -6,6 +5,7 @@ import { getPlaylistData } from "../../Api/Playlist";
 import { LoadingComponent } from "./Loading";
 import { Heading } from "./Heading";
 import FormatArtist from "../../Utils/FormatArtists";
+import { Spacer } from "./Spacer";
 
 export const HorizontalScrollSongs = ({id}) => {
   const width = Dimensions.get("window").width
@@ -28,13 +28,20 @@ export const HorizontalScrollSongs = ({id}) => {
   }, []);
   return ( <>
       {id && <>
-        <Heading text={Loading ? "Please Wait..." : Data?.data?.name}/>
+        <Spacer/>
+        <Spacer/>
+        <Heading text={Loading ? "Please Wait..." : Data?.data?.name} nospace={true}/>
+        <Spacer/>
         {!Loading && <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
           <View>
-            {Data?.data?.songs?.slice(0,4)?.map((e,i)=><EachSongCard index={i} isFromPlaylist={true} Data={Data} artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={width * 0.85} title={e?.name}  url={e?.downloadUrl} titleandartistwidth={width * 0.5}/>)}
+            {Data?.data?.songs?.slice(0,4)?.map((e,i)=><View style={{marginBottom:7}}>
+              <EachSongCard index={i} isFromPlaylist={true} Data={Data} artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={width * 0.80} title={e?.name}  url={e?.downloadUrl} titleandartistwidth={width * 0.5}/>
+            </View>)}
           </View>
           <View>
-            {Data?.data?.songs?.slice(4,8)?.map((e,i)=><EachSongCard index={i + 4} Data={Data} isFromPlaylist={true}  artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={width * 0.85} title={e?.name}  url={e?.downloadUrl} titleandartistwidth={width * 0.5}/>)}
+            {Data?.data?.songs?.slice(4,8)?.map((e,i)=><View style={{marginBottom:7}}>
+              <EachSongCard index={i + 4} Data={Data} isFromPlaylist={true}  artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={width * 0.80} title={e?.name}  url={e?.downloadUrl} titleandartistwidth={width * 0.5}/>
+            </View>)}
           </View>
           </ScrollView>}
         {Loading && <View style={{
diff --git a/Component/Global/PlainText.jsx b/Component/Global/PlainText.jsx
index 842e516..a72c08e 100644
--- a/Component/Global/PlainText.jsx
+++ b/Component/Global/PlainText.jsx
@@ -27,6 +27,7 @@ export const PlainText = ({text,style, numberOfLine}) => {
       fontSize:Size,
       fontWeight:500,
       paddingRight:10,
+      fontFamily:'roboto',
       ...style,
     }}>{text}</Text>
   );
diff --git a/Component/Global/SearchBar.jsx b/Component/Global/SearchBar.jsx
index 8657adc..7a6fe3c 100644
--- a/Component/Global/SearchBar.jsx
+++ b/Component/Global/SearchBar.jsx
@@ -1,8 +1,8 @@
-import { Dimensions, TextInput, View } from "react-native";
-import Feather from "react-native-vector-icons/Feather";
+import { Dimensions, Pressable, TextInput, View } from "react-native";
 import { useTheme } from "@react-navigation/native";
+import Entypo from "react-native-vector-icons/Entypo";
 
-export const SearchBar = ({onChange}) => {
+export const SearchBar = ({onChange, navigation}) => {
   const width = Dimensions.get("window").width
   const theme = useTheme()
   return (
@@ -10,32 +10,34 @@ export const SearchBar = ({onChange}) => {
       flexDirection:"row",
       gap:2,
       alignItems:"center",
-      height:50,
+      height:60,
       marginHorizontal:10,
-
     }}>
       <View style={{
         flex:1,
-        paddingHorizontal:10,
-        backgroundColor:"rgb(29,33,47)",
+        paddingHorizontal:5,
+        backgroundColor:"rgba(0,0,0,0)",
         borderTopLeftRadius:10,
         borderBottomLeftRadius:10}}>
-        <TextInput style={{
+        <TextInput cursorColor={"rgb(255,255,255)"} placeholder={"Type to search..."} style={{
           color:"white",
+          fontSize:25,
+          fontFamily:"roboto",
         }} onChangeText={onChange} autoFocus={true}/>
       </View>
-        <View style={{
-          backgroundColor:theme.colors.primary,
-          height:50,
+        <Pressable onPress={()=>{
+          navigation.goBack()
+        }} style={{
+          backgroundColor:"white",
+          height:43,
           justifyContent:"center",
-          width:50,
-          borderTopRightRadius:10,
-          borderBottomRightRadius:10,
+          width:43,
+          borderRadius:100000,
           elevation:10,
           alignItems:"center",
         }}>
-          <Feather name={"search"} size={width * 0.045} color={"black"}/>
-        </View>
+          <Entypo name={"cross"} size={width * 0.045} color={"black"}/>
+        </Pressable>
     </View>
   );
 };
diff --git a/Component/Global/SmallText.jsx b/Component/Global/SmallText.jsx
index b036173..c8d654a 100644
--- a/Component/Global/SmallText.jsx
+++ b/Component/Global/SmallText.jsx
@@ -24,6 +24,7 @@ export const SmallText = ({text, color, style, maxLine, selectable}) => {
     <Text selectable={selectable} numberOfLines={maxLine ? maxLine : 2} style={{
       color:(!color) ? theme.colors.textSecondary : color,
       fontSize:Size,
+      fontFamily:'roboto',
       ...style,
     }}>{text}</Text>
   );
diff --git a/Component/Global/Tabs/EachTabs.jsx b/Component/Global/Tabs/EachTabs.jsx
index 7f25a13..4e41df0 100644
--- a/Component/Global/Tabs/EachTabs.jsx
+++ b/Component/Global/Tabs/EachTabs.jsx
@@ -1,4 +1,4 @@
-import { Dimensions, Pressable, Text } from "react-native";
+import { Dimensions, Pressable, Text, View } from "react-native";
 import Animated, {ZoomIn, ZoomOut} from "react-native-reanimated";
 import {memo} from "react";
 import { useTheme } from "@react-navigation/native";
@@ -6,19 +6,34 @@ import { useTheme } from "@react-navigation/native";
 function EachTabs({item,isActive,index,setActive}) {
     const theme = useTheme()
     const width = Dimensions.get('window').width
-    return <Pressable style={{padding:10 , alignItems:"center"}} onPress={()=>{
+    return <Pressable style={{padding:7, alignItems:"center"}} onPress={()=>{
         setActive(index)
     }}>
-        <Text style={{
-            color:isActive ? theme.colors.primary : theme.colors.textSecondary,
-            fontSize:width * 0.04,
-        }}>{item}</Text>
+        {!isActive &&   <View style={{
+            borderRadius:100000000000,
+            paddingVertical:7,
+        }}>
+            <Text style={{
+                color:theme.colors.textSecondary,
+                fontSize:width * 0.04,
+                fontFamily:"roboto",
+                fontWeight:700,
+                paddingHorizontal:10,
+            }}>{item}</Text>
+        </View>}
         {isActive &&  <Animated.View entering={ZoomIn.duration(300)} exiting={ZoomOut.duration(300)} style={{
-            width:width * 0.02,
-            height:width * 0.02,
+            // width:width * 0.02,
+            // height:width * 0.02,
             backgroundColor:theme.colors.primary,
             borderRadius:100000000000,
-        }}/>}
+            paddingVertical:7,
+        }}><Text style={{
+            color:isActive ? "black" : theme.colors.textSecondary,
+            fontSize:width * 0.04,
+            fontFamily:"roboto",
+            fontWeight:700,
+            paddingHorizontal:10,
+        }}>{item}</Text></Animated.View>}
     </Pressable>
 }
 export default memo(EachTabs)
diff --git a/Component/Global/Tabs/Tabs.jsx b/Component/Global/Tabs/Tabs.jsx
index db2d53e..b5751d4 100644
--- a/Component/Global/Tabs/Tabs.jsx
+++ b/Component/Global/Tabs/Tabs.jsx
@@ -3,7 +3,7 @@ import EachTabs from "./EachTabs";
 import {memo} from "react";
 
  function Tabs({tabs,state,setState}) {
-   return <View style={{flexDirection:'row', flexWrap:"wrap", gap:10, paddingHorizontal:10}}>
+   return <View style={{flexDirection:'row', flexWrap:"wrap", gap:0, paddingHorizontal:2}}>
       {tabs.map((e,i)=>{
          if(state === i) return <EachTabs index={i} item={e} isActive={true} setActive={setState} key={i}/>
          else return <EachTabs index={i} item={e} isActive={false} setActive={setState} key={i}/>
diff --git a/Component/Home/DisplayTopGenres.jsx b/Component/Home/DisplayTopGenres.jsx
new file mode 100644
index 0000000..111d793
--- /dev/null
+++ b/Component/Home/DisplayTopGenres.jsx
@@ -0,0 +1,20 @@
+import { memo } from "react";
+import { ScrollView } from "react-native";
+import { EachMomentsandGenres } from "../Discover/EachMomentsandGenres";
+
+export const DisplayTopGenres = memo(() => {
+  const genres = ["Romance", "Lofi", "Hip Hop", "Classical", "Jazz", "Party", "Retro", "Sad"];
+  return (
+    <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} contentContainerStyle={{gap:10, paddingHorizontal:10}}>
+      {genres.map((e,i)=> <EachMomentsandGenres text={e} key={i} color={"rgb(42,41,41)"} style={{
+        alignItems:"center",
+        justifyContent:"center",
+        height:40,
+        padding:0,
+        paddingLeft:15,
+        borderRadius:100000,
+        backgroundColor:"rgb(34,39,34)",
+      }}/>)}
+    </ScrollView>
+  );
+});
diff --git a/Component/Home/DisplayTopSection.jsx b/Component/Home/DisplayTopSection.jsx
index e2ac487..9c9ff76 100644
--- a/Component/Home/DisplayTopSection.jsx
+++ b/Component/Home/DisplayTopSection.jsx
@@ -1,8 +1,9 @@
 import { View } from "react-native";
 import { EachSmallCardHome } from "./EachSmallCardHome";
 import { Spacer } from "../Global/Spacer";
+import { memo } from "react";
 
-export const DisplayTopSection = ({playlist}) => {
+export const DisplayTopSection = memo(({playlist}) => {
   function getRandomInt(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
   }
@@ -21,4 +22,4 @@ export const DisplayTopSection = ({playlist}) => {
       </View>
     </>
   );
-};
+});
diff --git a/Component/Home/EachSmallCardHome.jsx b/Component/Home/EachSmallCardHome.jsx
index 9ac245c..fa35794 100644
--- a/Component/Home/EachSmallCardHome.jsx
+++ b/Component/Home/EachSmallCardHome.jsx
@@ -21,16 +21,16 @@ export const EachSmallCardHome = ({ name, subtitle, image, isPlaylist,id, naviga
       gap:10,
       alignItems:"center",
       justifyContent:"space-between",
-      backgroundColor:"rgb(28,32,33)",
+      backgroundColor:"rgb(35,35,35)",
       paddingRight:10,
-      borderRadius:10,
+      borderRadius:6,
       flex:1,
     }}>
       <FastImage source={isPlaylist ? {uri:image} : image} style={{
         height:ContainerHeight,
         width:ContainerHeight,
-        borderTopLeftRadius:10,
-        borderBottomLeftRadius:10,
+        borderTopLeftRadius:6,
+        borderBottomLeftRadius:6,
         elevation:10,
       }}/>
       <View style={{
diff --git a/Component/Home/RenderTopCharts.jsx b/Component/Home/RenderTopCharts.jsx
index 0bec8d8..f4cd698 100644
--- a/Component/Home/RenderTopCharts.jsx
+++ b/Component/Home/RenderTopCharts.jsx
@@ -14,11 +14,11 @@ export const RenderTopCharts = ({playlist}) => {
   return (
     <>
       {data.map((e,i)=><View style={{
-        gap:5,
+        gap:15,
       }}>
         {/* eslint-disable-next-line no-shadow */}
         {e.map((e,index) => <View style={{
-          marginRight:10,
+          marginRight:15,
         }}>
           <EachPlaylistCard image={e.image[2].link} name={e.title} follower={e.subtitle} key={i+index} id={e.id}/>
         </View>)}
diff --git a/Component/Home/RouteHeading.jsx b/Component/Home/RouteHeading.jsx
index fa74176..e350f37 100644
--- a/Component/Home/RouteHeading.jsx
+++ b/Component/Home/RouteHeading.jsx
@@ -2,52 +2,15 @@ import { Dimensions, Pressable, Text, View } from "react-native";
 import { useNavigation, useTheme } from "@react-navigation/native";
 import Feather from "react-native-vector-icons/Feather";
 import { Spacer } from "../Global/Spacer";
-import FastImage from "react-native-fast-image";
 import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
-import { SmallText } from "../Global/SmallText";
-import { GetUserNameValue } from "../../LocalStorage/StoreUserName";
-import { useEffect, useState } from "react";
-
-export const RouteHeading = () => {
-  const [userName, setUserName] = useState("");
+import { GetCurrentDaytime } from "../../Utils/GetCurrentDaytime";
+import { useGetUserName } from "../../hooks/useGetUserName";
 
+export const RouteHeading = ({bottomText, showSearch, showSettings}) => {
+  const userName =  useGetUserName()
   const theme = useTheme()
   const width = Dimensions.get("window").width
   const navigation = useNavigation()
-  function GetDisplayText() {
-    const now = new Date(),
-      hour = now.getHours();
-
-    const morning = (hour >= 4 && hour <= 11),
-      afternoon = (hour >= 12 && hour <= 16),
-      evening = (hour >= 17 && hour <= 20),
-      night = (hour >= 21 || hour <= 3);
-
-    if (morning) {
-      return "Good Morning"
-    } else if (afternoon){
-     return "Good Afternoon"
-    } else if (evening) {
-      return "Good Evening"
-    } else if (night) {
-      return "Good Night"
-    }
-  }
-  async function getUserName(){
-    const name = await GetUserNameValue()
-    setUserName(FormatName(name))
-  }
-  function FormatName(name){
-    if (name.length >= 10){
-      return name.slice(0,11) + "..."
-    } else {
-      return name
-    }
-  }
-
-  useEffect(() => {
-     getUserName()
-  }, []);
 
   return (
     <>
@@ -58,35 +21,30 @@ export const RouteHeading = () => {
         alignItems:"center",
         gap: 10,
       }}>
-        <View style={{
-          borderRadius:1000,
-          elevation:10,
-          height:40,
-          width:40,
-          padding:2,
-        }}>
-          <FastImage source={require("../../Images/Logo.png")} style={{
-            flex:1,
-            borderRadius:1000,
-          }}/>
-        </View>
         <View>
-           <SmallText text={`Hey, ${userName}`}/>
+          <Text style={{
+            fontWeight:900,
+            color:theme.colors.text,
+            fontSize:width * 0.055,
+            fontFamily:"roboto",
+          }}>{`Hey, ${userName}`}</Text>
+           {/*<SmallText text=/>*/}
           <Text style={{
             fontWeight:500,
             color:theme.colors.text,
-            fontSize:width * 0.045,
-          }}>{GetDisplayText()}</Text>
+            fontSize:width * 0.040,
+            fontFamily:"roboto",
+          }}>{bottomText ? bottomText : GetCurrentDaytime()}</Text>
         </View>
         <View style={{flex:1}}/>
-        <Pressable style={{
+        {showSearch &&  <Pressable style={{
           padding:5,
           backgroundColor:"rgba(0,0,0,0)",
           borderRadius:10,
         }} onPress={()=>{
           navigation.navigate("Search")
-        }}><Feather name={"search"} size={width * 0.055} color={theme.colors.text}/></Pressable>
-        <Pressable onPress={()=>{
+        }}><Feather name={"search"} size={width * 0.055} color={theme.colors.text}/></Pressable>}
+        {showSettings &&  <Pressable onPress={()=>{
           navigation.navigate("Settings")
         }} style={{
           padding:5,
@@ -94,7 +52,7 @@ export const RouteHeading = () => {
           borderRadius:10,
         }}>
           <SimpleLineIcons name={"settings"} size={width * 0.055} color={theme.colors.text}/>
-        </Pressable>
+        </Pressable>}
       </View>
       <Spacer/>
     </>
diff --git a/Component/Home/SearchBar.jsx b/Component/Home/SearchBar.jsx
deleted file mode 100644
index ae05d6e..0000000
--- a/Component/Home/SearchBar.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TextInput, View } from "react-native";
-import AntDesign from "react-native-vector-icons/AntDesign";
-
-export const SearchBar = () => {
-  return (
-    <View style={{
-      backgroundColor:"rgb(56,58,61)",
-      borderRadius:10,
-      padding:5,
-      elevation:10,
-      flexDirection:"row",
-      alignItems:"center",
-      justifyContent:"space-between",
-    }}>
-      <TextInput placeholder={"Search for any song"}/>
-      <View style={{
-        padding:10,
-      }}>
-        <AntDesign name={"search1"} size={20}/>
-      </View>
-    </View>
-  );
-};
diff --git a/Component/Home/SmallBentooCard.jsx b/Component/Home/SmallBentooCard.jsx
index 0d619ea..d0f8c4b 100644
--- a/Component/Home/SmallBentooCard.jsx
+++ b/Component/Home/SmallBentooCard.jsx
@@ -1,9 +1,9 @@
-import { Image, Pressable, Text} from "react-native";
-import LinearGradient from "react-native-linear-gradient";
-import { useNavigation } from "@react-navigation/native";
+import { Image, Pressable, Text, View } from "react-native";
+import { useNavigation, useTheme } from "@react-navigation/native";
 
 export const SmallBentooCard = ({width , image , text, navigate}) => {
   const navigation = useNavigation()
+  const theme = useTheme()
   return (
     <Pressable onPress={()=>{
       navigation.navigate("ShowPlaylistofType",{Searchtext:navigate.toLowerCase()})
@@ -17,18 +17,27 @@ export const SmallBentooCard = ({width , image , text, navigate}) => {
         width:width,
         height:170,
       }}/>
-      <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(120,120,120,0)', 'rgba(0,0,0,0.56)', 'rgb(0,0,0)']} style={{
+      <View style={{
         position:"absolute",
         bottom:0,
         width:"100%",
+        height:"100%",
+        alignItems:"center",
+        justifyContent:"center",
+        backgroundColor:"rgba(9,9,9,0.67)",
       }}>
         <Text style={{
           textAlign:"center",
           fontSize:20,
-          padding:5,
           fontWeight:"bold",
+          color:"rgb(225,225,225)",
         }}>{text}</Text>
-      </LinearGradient>
+        <Text style={{
+          textAlign:"center",
+          fontSize:10,
+          color:"white",
+        }}>Listen Now</Text>
+      </View>
     </Pressable>
   );
 };
diff --git a/Component/Home/TopHeader.jsx b/Component/Home/TopHeader.jsx
new file mode 100644
index 0000000..b2f90f1
--- /dev/null
+++ b/Component/Home/TopHeader.jsx
@@ -0,0 +1,54 @@
+import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
+import { SmallText } from "../Global/SmallText";
+import { memo } from "react";
+import LinearGradient from "react-native-linear-gradient";
+import { useGetUserName } from "../../hooks/useGetUserName";
+import { PlainText } from "../Global/PlainText";
+import { PaddingConatiner } from "../../Layout/PaddingConatiner";
+import { SpaceBetween } from "../../Layout/SpaceBetween";
+import { Dimensions, Pressable, View } from "react-native";
+import Feather from "react-native-vector-icons/Feather";
+import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
+import { useNavigation, useTheme } from "@react-navigation/native";
+import { Heading } from "../Global/Heading";
+
+export const TopHeader = memo(({showHeader}) => {
+  const navigation = useNavigation()
+  const {width} = Dimensions.get("window")
+  const theme = useTheme()
+  return (
+    <>
+      {showHeader && <Animated.View entering={FadeInUp} exiting={FadeOutUp} style={{height:50,width:"100%", backgroundColor:"rgba(0,0,0,0)", position:"absolute", zIndex:100}}>
+        <LinearGradient start={{x: 0, y: 1}} end={{x: 0, y: 0}} colors={["rgba(19,19,19,0.87)", "rgba(19,19,19,0.98)"]} style={{
+         flex:1,
+         height:50,
+          justifyContent:"flex-end",
+        }}>
+        <PaddingConatiner>
+          <SpaceBetween>
+            <View style={{flex:1}}>
+              <Heading text={`Melody`} />
+            </View>
+            <Pressable style={{
+              padding:5,
+              backgroundColor:"rgba(0,0,0,0)",
+              borderRadius:10,
+            }} onPress={()=>{
+              navigation.navigate("Search")
+            }}><Feather name={"search"} size={width * 0.055} color={theme.colors.text}/></Pressable>
+            <Pressable onPress={()=>{
+              navigation.navigate("Settings")
+            }} style={{
+              padding:5,
+              backgroundColor:"rgba(0,0,0,0)",
+              borderRadius:10,
+            }}>
+              <SimpleLineIcons name={"settings"} size={width * 0.055} color={theme.colors.text}/>
+            </Pressable>
+          </SpaceBetween>
+        </PaddingConatiner>
+        </LinearGradient>
+      </Animated.View>}
+    </>
+  );
+});
diff --git a/Component/Library/LibraryTopHeader.jsx b/Component/Library/LibraryTopHeader.jsx
deleted file mode 100644
index 7b888ec..0000000
--- a/Component/Library/LibraryTopHeader.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Dimensions,Text, View } from "react-native";
-import { useTheme } from "@react-navigation/native";
-import { SpaceBetween } from "../../Layout/SpaceBetween";
-import { Spacer } from "../Global/Spacer";
-import FastImage from "react-native-fast-image";
-
-
-export const LibraryRouteHeading = ({text}) => {
-  const theme = useTheme()
-  const width = Dimensions.get("window").width
-  return (
-    <>
-      <Spacer/>
-      <View style={{
-        paddingHorizontal:10,
-        flexDirection:"row",
-        alignItems:"center",
-        gap: 10,
-      }}>
-        <View  style={{
-          borderRadius:1000,
-          elevation:10,
-          height:40,
-          width:40,
-          padding:2,
-        }}>
-          <FastImage source={require("../../Images/Logo.png")} style={{
-            flex:1,
-            borderRadius:1000,
-          }}/>
-        </View>
-        <Text style={{
-          fontWeight:500,
-          color:theme.colors.text,
-          fontSize:width * 0.06,
-        }}>{text}</Text>
-      <View/>
-      </View>
-      <Spacer/>
-    </>
-  );
-};
diff --git a/Component/Library/LikedDetails.jsx b/Component/Library/LikedDetails.jsx
index 7a55d08..22da6a8 100644
--- a/Component/Library/LikedDetails.jsx
+++ b/Component/Library/LikedDetails.jsx
@@ -34,7 +34,7 @@ export const LikedDetails = ({name, Data, dontShowPlayButton}) => {
   const theme = useTheme()
   const width = Dimensions.get('window').width
   return (
-    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(0,0,0)', theme.colors.background]} style={{
+    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(21,21,21)', theme.colors.background]} style={{
       padding:10,
       alignItems:"center",
       justifyContent:"space-between",
diff --git a/Component/MusicPlayer/BottomSheetMusic.jsx b/Component/MusicPlayer/BottomSheetMusic.jsx
index fafa152..64b3e94 100644
--- a/Component/MusicPlayer/BottomSheetMusic.jsx
+++ b/Component/MusicPlayer/BottomSheetMusic.jsx
@@ -30,6 +30,9 @@ const BottomSheetMusic = ({color}) => {
       setIndex(index)
     }
   }, []);
+  const updateIndex = useCallback((index)=>{
+    setIndex(index)
+  },[])
   return (
       <BottomSheet
         enableContentPanningGesture={false}
@@ -41,14 +44,15 @@ const BottomSheetMusic = ({color}) => {
         position:"absolute",
         backgroundColor:"rgba(0,0,0,0)",
       }}
+        backgroundStyle={{
+          backgroundColor:color,
+        }}
+        // handleComponent={props => <MinimizedMusic  setIndex={updateIndex} color={color}/>}
+        handleHeight={5}
         handleStyle={{
-            height:0,
-            overflow:"hidden",
-            width:0,
-            backgroundColor:"rgba(0,0,0,0)",
-           position:"absolute",
+          position:"absolute",
         }}
-        snapPoints={[115, '100%']}
+        snapPoints={[155, '100%']}
         ref={bottomSheetRef}
          index={Index}
         onChange={handleSheetChanges}>
@@ -56,8 +60,8 @@ const BottomSheetMusic = ({color}) => {
           ...styles.contentContainer,
           backgroundColor:color,
         }}>
-          {Index !== 1 &&  <MinimizedMusic  setIndex={setIndex}/>}
-          <FullScreenMusic color={color} Index={Index}/>
+          {Index !== 1 &&  <MinimizedMusic  setIndex={updateIndex}/>}
+          <FullScreenMusic color={color} Index={Index} setIndex={updateIndex}/>
         </BottomSheetView>
       </BottomSheet>
   );
diff --git a/Component/MusicPlayer/FullScreenMusic.jsx b/Component/MusicPlayer/FullScreenMusic.jsx
index f341d04..0218647 100644
--- a/Component/MusicPlayer/FullScreenMusic.jsx
+++ b/Component/MusicPlayer/FullScreenMusic.jsx
@@ -17,8 +17,20 @@ import QueueBottomSheet from "./QueueBottomSheet";
 import { getLyricsSongData } from "../../Api/Songs";
 import { ShowLyrics } from "./ShowLyrics";
 import { useActiveTrack } from "react-native-track-player";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { PlayNextSong, PlayPreviousSong } from "../../MusicPlayerFunctions";
 
-export const FullScreenMusic = ({color, Index}) => {
+export const FullScreenMusic = ({color, Index, setIndex}) => {
+  const pan = Gesture.Pan();
+  pan.onFinalize((e)=>{
+    if (e.translationX > 100){
+      PlayPreviousSong()
+    } else if(e.translationX < -100){
+      PlayNextSong()
+    } else {
+      setIndex(0)
+    }
+  })
   const width = Dimensions.get("window").width
   const currentPlaying = useActiveTrack()
   const [ShowDailog, setShowDailog] = useState(false);
@@ -49,11 +61,11 @@ export const FullScreenMusic = ({color, Index}) => {
   return (
    <Animated.View entering={FadeInDown} style={{backgroundColor:"rgba(0,0,0,0)",flex:1}}>
      <ShowLyrics Loading={Loading} Lyric={Lyric} setShowDailog={setShowDailog} ShowDailog={ShowDailog}/>
-     <ImageBackground blurRadius={10} source={{uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png"}} style={{
+     <ImageBackground blurRadius={20} source={{uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png"}} style={{
        flex:1,
      }}>
        <View style={{flex:1,backgroundColor:"rgba(0,0,0,0.44)"}}>
-         <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)','rgba(9,9,9,0.84)', 'rgba(0,0,0,0.86)', color]} style={{flex:1,alignItems:"center"}}>
+         <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(4,4,4,0.23)','rgba(9,9,9,0.47)', 'rgba(0,0,0,0.65)', 'rgba(0,0,0,0.89)', 'rgba(0,0,0,0.9)', "rgba(0,0,0,1)"]} style={{flex:1,alignItems:"center"}}>
           <View style={{
             width:"90%",
             marginTop:5,
@@ -64,16 +76,19 @@ export const FullScreenMusic = ({color, Index}) => {
           }}>
             <GetLyricsButton onPress={GetLyrics} />
           </View>
-           <FastImage
-             source={{
-               uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png",
-             }}
-             style={{
-               height: width * 0.9,
-               width: width * 0.9,
-               borderRadius: 10,
-             }}
-           />
+           <Spacer height={20}/>
+           <GestureDetector gesture={pan}>
+             <FastImage
+               source={{
+                 uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png",
+               }}
+               style={{
+                 height: width * 0.9,
+                 width: width * 0.9,
+                 borderRadius: 10,
+               }}
+             />
+           </GestureDetector>
            <Spacer/>
            <Heading text={currentPlaying?.title ?? "No music :("} style={{textAlign:"center", paddingHorizontal:2}} nospace={true}/>
            <SmallText text={currentPlaying?.artist ?? "Explore now!"} style={{textAlign:"center", paddingHorizontal:2}}/>
@@ -95,7 +110,7 @@ export const FullScreenMusic = ({color, Index}) => {
          </LinearGradient>
        </View>
      </ImageBackground>
-     <QueueBottomSheet Index={Index - 1}/>
+     <QueueBottomSheet Index={1}/>
    </Animated.View>
   );
 };
diff --git a/Component/MusicPlayer/MinimizedMusic.jsx b/Component/MusicPlayer/MinimizedMusic.jsx
index e5b4edd..9281825 100644
--- a/Component/MusicPlayer/MinimizedMusic.jsx
+++ b/Component/MusicPlayer/MinimizedMusic.jsx
@@ -1,62 +1,82 @@
-import { Dimensions, Pressable, View } from "react-native";
-import React from "react";
+import { Dimensions,  View } from "react-native";
+import React, { memo } from "react";
 import { PlainText } from "../Global/PlainText";
 import { SmallText } from "../Global/SmallText";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
+import Animated, { FadeIn } from "react-native-reanimated";
+import { GestureDetector, Gesture, GestureHandlerRootView } from "react-native-gesture-handler";
 import { PlayPauseButton } from "./PlayPauseButton";
 import { NextSongButton } from "./NextSongButton";
 import { PreviousSongButton } from "./PreviousSongButton";
 import FastImage from "react-native-fast-image";
-import { useActiveTrack } from "react-native-track-player";
+import { useActiveTrack, useProgress } from "react-native-track-player";
+import { PlayNextSong, PlayPreviousSong } from "../../MusicPlayerFunctions";
 
-export const MinimizedMusic = ({setIndex}) => {
+export const MinimizedMusic = memo(({setIndex, color}) => {
+  const { position, duration } = useProgress()
+  // const fling = Gesture.Fling()
+  const pan = Gesture.Pan();
+  pan.onFinalize((e)=>{
+    if (e.translationX > 100){
+      PlayPreviousSong()
+    } else if(e.translationX < -100){
+      PlayNextSong()
+    } else {
+      setIndex(1)
+    }
+  })
+  function TotalCompletedInpercent(){
+    return (position / duration) * 100
+  }
   const size = Dimensions.get("window").height
   const currentPlaying = useActiveTrack()
   return (
-    <Animated.View
-      entering={FadeInUp}
-      exiting={FadeOutUp.delay(0)}
-      style={{
-        flexDirection: 'row',
-        justifyContent:"space-between",
-        height:65,
-        paddingHorizontal:15,
-        paddingTop:5,
-        alignItems:"center",
-        gap:10,
-      }}>
-      <Pressable onPress={()=>{
-        setIndex(1)
-      }} style={{
-        flexDirection:"row",
-        flex:1,
-      }}>
-        <FastImage
-          source={{
-            uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png",
-          }}
-          style={{
-            height: (size *  0.1) - 30,
-            width: (size *  0.1) - 30,
-            borderRadius: 10,
-          }}
-        />
-        <View style={{
-          flex:1,
-          height:(size *  0.1) - 30,
-          alignItems:"flex-start",
-          justifyContent:"center",
-          paddingHorizontal:10,
+    <GestureHandlerRootView style={{flex:1}}>
+      <Animated.View
+        entering={FadeIn}
+        style={{
+          flexDirection: 'row',
+          justifyContent:"space-between",
+          height:80,
+          paddingHorizontal:15,
+          paddingVertical:15,
+          alignItems:"center",
+          gap:10,
+          backgroundColor:color,
         }}>
-          <PlainText text={currentPlaying?.title ?? "No music :("}/>
-          <SmallText text={currentPlaying?.artist ?? "Explore now!"} maxLine={1}/>
+        <GestureDetector gesture={pan}>
+          <View  style={{
+            flexDirection:"row",
+            flex:1,
+          }}>
+            <FastImage
+              source={{
+                uri: currentPlaying?.artwork ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png",
+              }}
+              style={{
+                height: (size *  0.1) - 30,
+                width: (size *  0.1) - 30,
+                borderRadius: 10,
+              }}
+            />
+            <View style={{
+              flex:1,
+              height:(size *  0.1) - 30,
+              alignItems:"flex-start",
+              justifyContent:"center",
+              paddingHorizontal:10,
+            }}>
+              <PlainText text={currentPlaying?.title ?? "No music :("}/>
+              <SmallText text={currentPlaying?.artist ?? "Explore now!"} maxLine={1}/>
+            </View>
+          </View>
+        </GestureDetector>
+        <View style={{gap:20,flexDirection:"row", alignItems:"center"}}>
+          <PreviousSongButton/>
+          <PlayPauseButton isplaying={false}/>
+          <NextSongButton/>
         </View>
-      </Pressable>
-     <View style={{gap:20,flexDirection:"row", alignItems:"center"}}>
-       <PreviousSongButton/>
-       <PlayPauseButton isplaying={false}/>
-       <NextSongButton/>
-     </View>
-    </Animated.View>
+      </Animated.View>
+      <View style={{height:2, width:`${TotalCompletedInpercent()}%`, backgroundColor:"white"}}/>
+    </GestureHandlerRootView>
   );
-};
+});
diff --git a/Component/MusicPlayer/PlayPauseButton.jsx b/Component/MusicPlayer/PlayPauseButton.jsx
index ce47a2f..d7e8653 100644
--- a/Component/MusicPlayer/PlayPauseButton.jsx
+++ b/Component/MusicPlayer/PlayPauseButton.jsx
@@ -26,7 +26,7 @@ export const PlayPauseButton = ({isFullScreen}) => {
         {playerState.state !== "playing" && playerState.state !== "buffering" && <Pressable onPress={()=>{
           PlaySong()
         }} style={{
-          backgroundColor:theme.colors.primary,
+          backgroundColor:"white",
           padding:15,
           height:60,
           width:60,
@@ -39,7 +39,7 @@ export const PlayPauseButton = ({isFullScreen}) => {
         {playerState.state === "playing" &&  <Pressable onPress={()=>{
           PauseSong()
         }} style={{
-          backgroundColor:theme.colors.primary,
+          backgroundColor:"white",
           padding:15,
           height:60,
           width:60,
diff --git a/Component/MusicPlayer/ProgressBar.jsx b/Component/MusicPlayer/ProgressBar.jsx
index 868ce0b..c03b71c 100644
--- a/Component/MusicPlayer/ProgressBar.jsx
+++ b/Component/MusicPlayer/ProgressBar.jsx
@@ -1,14 +1,12 @@
 import Slider from "@react-native-community/slider";
 import React from "react";
 import { Dimensions, View } from "react-native";
-import { useTheme } from "@react-navigation/native";
 import { useProgress } from "react-native-track-player";
 import { SetProgressSong } from "../../MusicPlayerFunctions";
 import { SmallText } from "../Global/SmallText";
 
 export const ProgressBar = () => {
   const width = Dimensions.get("window").width
-  const theme = useTheme()
   const { position, duration } = useProgress()
   function formatTime(val) {
     const time =  parseFloat(val)
@@ -29,9 +27,9 @@ export const ProgressBar = () => {
         minimumValue={0}
         maximumValue={duration}
         value={(position >= duration) ? 0 : position}
-        minimumTrackTintColor={theme.colors.primary}
+        minimumTrackTintColor={"white"}
         maximumTrackTintColor="rgba(44,44,44,1)"
-        thumbTintColor={theme.colors.primary}
+        thumbTintColor={"white"}
       />
       <View style={{flexDirection:"row", justifyContent:"space-between", width:"90%"}}>
         <SmallText text={(position >= duration) ? "0:00" : formatTime(position)}/>
diff --git a/Component/MusicPlayer/QueueBottomSheet.jsx b/Component/MusicPlayer/QueueBottomSheet.jsx
index e675d97..185a69a 100644
--- a/Component/MusicPlayer/QueueBottomSheet.jsx
+++ b/Component/MusicPlayer/QueueBottomSheet.jsx
@@ -1,31 +1,41 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import BottomSheet from "@gorhom/bottom-sheet";
 import { QueueRenderSongs } from "./QueueRenderSongs";
+import { PlainText } from "../Global/PlainText";
+import Entypo from "react-native-vector-icons/Entypo";
+import { View } from "react-native";
 
 const QueueBottomSheet = ({Index}) => {
-  const backgroundColor = 'rgba(16,16,16,0.58)'
+  const backgroundColor = 'rgba(5,5,5,0.76)'
   const bottomSheetRef = useRef(null);
+  const [index, setIndex] = useState(Index);
   return (
       <BottomSheet
+        index={0}
+        onChange={(index)=>{
+          setIndex(index)
+        }}
         enablePanDownToClose={false}
-        index={Index}
         animateOnMount={false}
-        snapPoints={['19%', '50%']}
+        snapPoints={[130, '50%']}
         ref={bottomSheetRef}
         style={{
           backgroundColor,
         }}
-        handleIndicatorStyle={{
-          backgroundColor:"rgba(255,255,255,0.97)",
+        handleComponent={props => {
+          return <View style={{alignItems:"center", justifyContent:"center", backgroundColor:"transparent", height:60}}>
+            <Entypo name={index === 0 ? "chevron-up" : "chevron-down"} size={24} color="white" />
+            <PlainText text={index === 0 ? "Swipe up to see Queue" : "Swipe down to close Queue"}/>
+          </View>
         }}
         backgroundStyle={{
-          backgroundColor:backgroundColor,
+          backgroundColor:"rgb(0,0,0,0)",
         }}
         handleStyle={{
           backgroundColor:backgroundColor,
         }}
       >
-        <QueueRenderSongs key={1} Index={Index}/>
+        {index === 1 && <QueueRenderSongs/>}
       </BottomSheet>
   );
 };
diff --git a/Component/MusicPlayer/ShowLyrics.jsx b/Component/MusicPlayer/ShowLyrics.jsx
index cfc232a..832895a 100644
--- a/Component/MusicPlayer/ShowLyrics.jsx
+++ b/Component/MusicPlayer/ShowLyrics.jsx
@@ -41,7 +41,7 @@ export const ShowLyrics = ({ShowDailog, Loading, Lyric, setShowDailog}) => {
            setShowDailog(false)
          }}  style={{
            flex:1,
-           backgroundColor:"rgb(220,160,160)",
+           backgroundColor:"rgb(255,255,255)",
            alignItems:"center",
            justifyContent:"center",
            padding:10,
diff --git a/Component/Playlist/PlaylistDetails.jsx b/Component/Playlist/PlaylistDetails.jsx
index 0926da1..dc3d6f6 100644
--- a/Component/Playlist/PlaylistDetails.jsx
+++ b/Component/Playlist/PlaylistDetails.jsx
@@ -37,7 +37,7 @@ export const PlaylistDetails = ({name,listener,notReleased,Data, Loading, id, im
   const theme = useTheme()
   const width = Dimensions.get('window').width
   return (
-    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(0,0,0)', theme.colors.background]} style={{
+    <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(44,44,44,0)', 'rgb(18,18,18)', theme.colors.background]} style={{
       padding:10,
       alignItems:"center",
       justifyContent:"space-between",
diff --git a/Component/Tab/CustomTabBar.jsx b/Component/Tab/CustomTabBar.jsx
index 193c620..ed4ed8c 100644
--- a/Component/Tab/CustomTabBar.jsx
+++ b/Component/Tab/CustomTabBar.jsx
@@ -1,17 +1,28 @@
 import React, { useContext, useEffect } from "react";
-import { View, StyleSheet, Pressable} from "react-native";
-import { useTheme } from "@react-navigation/native";
+import { View, StyleSheet, Pressable, Text } from "react-native";
 import BottomSheetMusic from '../MusicPlayer/BottomSheetMusic'
 import Ionicons from "react-native-vector-icons/Ionicons"
-import Animated, { FadeInLeft, FadeInRight} from "react-native-reanimated";
+import Animated, { FadeInDown,FadeInUp } from "react-native-reanimated";
 import Context from "../../Context/Context";
-const bottomColor = "rgb(5,5,5)"
+const bottomColor = "#151515"
 export default function CustomTabBar({ state, descriptors, navigation }) {
  const {setIndex} = useContext(Context)
   useEffect(() => {
     setIndex(0)
   }, []);
-  const theme = useTheme()
+  // eslint-disable-next-line react/no-unstable-nested-components
+  function GetIcon(label, isDiabled = false){
+    if (label === "Home") {
+      return <Ionicons name={"headset-outline"}
+                color={isDiabled ? "rgb(153,151,151)" : "white" } size={22} />
+    } else if (label === "Discover") {
+      return <Ionicons name={"apps-outline"}
+                       color={isDiabled ? "rgb(153,151,151)" : "white" } size={22} />
+    } else if (label === "Library") {
+      return <Ionicons name={"person-outline"}
+                       color={isDiabled ? "rgb(153,151,151)" : "white" } size={22} />
+    }
+  }
     return (
         <>
           <BottomSheetMusic color={bottomColor}/>
@@ -39,31 +50,36 @@ export default function CustomTabBar({ state, descriptors, navigation }) {
                 <Pressable
                   onPress = {onPress}
                   style = {{backgroundColor: "rgba(0,0,0,0)", borderRadius: 20, height:40 }}>
-                  {!isFocused && <View style={{
-                    flexDirection: "row",
+                  {!isFocused &&  <View style={{
+                    justifyContent: "center",
                     alignItems: "center",
                     flex: 1,
                     paddingHorizontal: 15,
-                    gap: 5,
+                    borderRadius:15,
+                    gap:2
                   }}>
-                    <Ionicons name={label !== "Discover" ? label.toString().toLowerCase() : "globe"}
-                              color={theme.colors.text} size={14} />
+                    {GetIcon(label, true)}
+                    <Text style={{
+                      fontSize: 8,
+                      color: "rgb(153,151,151)",
+                      fontFamily:"roboto",
+                      letterSpacing:1,
+                    }}>{label}</Text>
                   </View>}
-                  {isFocused && <Animated.View entering={FadeInRight} style={{
-                    flexDirection: "row",
+                  {isFocused && <Animated.View entering={FadeInUp} style={{
                     justifyContent: "center",
                     alignItems: "center",
                     flex: 1,
                     paddingHorizontal: 15,
-                    gap: 5,
-                    backgroundColor:"rgba(57,136,201,0.12)",
                     borderRadius:15,
+                    gap:2
                   }}>
-                    <Ionicons name={label !== "Discover" ? label.toString().toLowerCase() : "globe"}
-                              color={ theme.colors.primary } size={14} />
-                    <Animated.Text entering={FadeInLeft} style={{
-                      fontSize: 10,
-                      color: theme.colors.primary,
+                    {GetIcon(label)}
+                    <Animated.Text entering={FadeInDown} style={{
+                      fontSize: 8,
+                      color: "white",
+                      fontFamily:"roboto",
+                      letterSpacing:1,
                     }}>{label}</Animated.Text>
                   </Animated.View>}
                 </Pressable>
@@ -77,11 +93,9 @@ export default function CustomTabBar({ state, descriptors, navigation }) {
 const styles = StyleSheet.create({
     mainContainer: {
       flexDirection: 'row',
-      height:50,
+      height:70,
       alignItems:"center",
       backgroundColor:bottomColor,
-      borderTopColor:"rgba(0,0,0,0.26)",
-      borderTopWidth:1,
     },
     mainItemContainer: {
       flex: 1,
diff --git a/Images/AboutProject.png b/Images/AboutProject.png
index f2948fb..b10adc1 100644
Binary files a/Images/AboutProject.png and b/Images/AboutProject.png differ
diff --git a/Images/LikedPlaylist.png b/Images/LikedPlaylist.png
index 42b98e4..a011322 100644
Binary files a/Images/LikedPlaylist.png and b/Images/LikedPlaylist.png differ
diff --git a/Images/LikedSong.png b/Images/LikedSong.png
index 57cce5f..1b2f1c1 100644
Binary files a/Images/LikedSong.png and b/Images/LikedSong.png differ
diff --git a/Images/Logo.jpg b/Images/Logo.jpg
new file mode 100644
index 0000000..22ae8f3
Binary files /dev/null and b/Images/Logo.jpg differ
diff --git a/Images/Logo.png b/Images/Logo.png
deleted file mode 100644
index 92c5c2f..0000000
Binary files a/Images/Logo.png and /dev/null differ
diff --git a/Images/MostSearched.png b/Images/MostSearched.png
new file mode 100644
index 0000000..1ce6ea8
Binary files /dev/null and b/Images/MostSearched.png differ
diff --git a/Images/loading.gif b/Images/loading.gif
index 98682ca..3b26170 100644
Binary files a/Images/loading.gif and b/Images/loading.gif differ
diff --git a/Images/lofi.png b/Images/lofi.png
new file mode 100644
index 0000000..93bae39
Binary files /dev/null and b/Images/lofi.png differ
diff --git a/Images/pop.png b/Images/pop.png
index e7f5d56..8ee9a06 100644
Binary files a/Images/pop.png and b/Images/pop.png differ
diff --git a/Images/trending.png b/Images/trending.png
new file mode 100644
index 0000000..59e7b09
Binary files /dev/null and b/Images/trending.png differ
diff --git a/Layout/MainWrapper.jsx b/Layout/MainWrapper.jsx
index 40f7068..036f81b 100644
--- a/Layout/MainWrapper.jsx
+++ b/Layout/MainWrapper.jsx
@@ -2,13 +2,12 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useTheme } from "@react-navigation/native";
 import { memo } from "react";
 import { StatusBar } from "react-native";
-
 export const MainWrapper = memo(function MainWrapper({children}) {
   const theme = useTheme()
   return (
     <SafeAreaView style={{flex:1,backgroundColor:theme.colors.background}}>
-      <StatusBar backgroundColor={theme.colors.background} animated={true} />
-      {children}
+        <StatusBar backgroundColor={theme.colors.background} animated={true}/>
+        {children}
     </SafeAreaView>
   );
 })
diff --git a/Route/Album.jsx b/Route/Album.jsx
index 2a28392..8010d4e 100644
--- a/Route/Album.jsx
+++ b/Route/Album.jsx
@@ -39,14 +39,15 @@ export const Album = ({route}) => {
         <LoadingComponent loading={Loading}/>}
       {!Loading &&  <>
         {Data?.data?.songs?.length > 0 && <Animated.ScrollView scrollEventThrottle={16} ref={AnimatedRef} contentContainerStyle={{
-          paddingBottom:55,
-          backgroundColor:"black",
+          paddingBottom:80,
+          backgroundColor:"#101010",
         }}>
           <PlaylistTopHeader AnimatedRef={AnimatedRef} url={Data?.data?.image[2]?.url ?? ""} />
           <AlbumDetails name={Data?.data?.name ?? ""} liked={false} releaseData={Data?.data?.year ?? ""}  Data={Data}/>
           {<View style={{
             paddingHorizontal:10,
-            backgroundColor:theme.colors.background,
+            backgroundColor:"#101010",
+            gap:7,
           }}>
             {Data?.data?.songs?.map((e,i)=><EachSongCard isFromPlaylist={true} Data={Data} index={i} artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={"100%"} title={e?.name}  url={e?.downloadUrl} style={{
               marginBottom:15,
diff --git a/Route/Discover/Discover.jsx b/Route/Discover/Discover.jsx
index c97f708..f6ad31a 100644
--- a/Route/Discover/Discover.jsx
+++ b/Route/Discover/Discover.jsx
@@ -1,21 +1,28 @@
 import { MainWrapper } from "../../Layout/MainWrapper";
-import { LargeBentooCard } from "../../Component/Discover/LargeBentooCard";
 import { SmallBentooCard } from "../../Component/Home/SmallBentooCard";
 import { Dimensions, ScrollView, View } from "react-native";
 import { Spacer } from "../../Component/Global/Spacer";
 import { Heading } from "../../Component/Global/Heading";
 import { PaddingConatiner } from "../../Layout/PaddingConatiner";
 import { BundleEachLanguage } from "../../Component/Discover/BundleEachLanguage";
-import { DiscoverRouteHeading } from "../../Component/Discover/DiscoverRouteHeading";
 import { BundleEachMomentanGenres } from "../../Component/Discover/BundleEachMomentanGenres";
+import { RouteHeading } from "../../Component/Home/RouteHeading";
 
 export const Discover = () => {
  const width = Dimensions.get("window").width
   return (
    <MainWrapper>
     <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingBottom:100}}>
-      <DiscoverRouteHeading/>
-      <LargeBentooCard text={"Top Most Hits Music Today"} subtext={"Today's hits"} width={"100%"} image={require("../../Images/Trending.jpg")} id={"110858205"}/>
+      <RouteHeading bottomText={"Discover music"} showSearch={true}/>
+      <View style={{
+        flexDirection:"row",
+        gap:10,
+        justifyContent:"space-around",
+        paddingHorizontal:10,
+      }}>
+        <SmallBentooCard text={"Trending Now"} image={require("../../Images/trending.png")}  width={width * 0.46} navigate={"trending"}/>
+        <SmallBentooCard text={"Most Searched"} image={require("../../Images/MostSearched.png")} width={width * 0.46} navigate={"most searched"}/>
+      </View>
       <Spacer/>
       <View style={{
         flexDirection:"row",
@@ -23,8 +30,8 @@ export const Discover = () => {
         justifyContent:"space-around",
         paddingHorizontal:10,
       }}>
-        <SmallBentooCard text={"Pop Hits"} image={require("../../Images/party.jpg")}  width={width * 0.46} navigate={"pop"}/>
-        <SmallBentooCard text={"Lofi Beats"} image={require("../../Images/lofi.jpg")} width={width * 0.46} navigate={"lofi"}/>
+        <SmallBentooCard text={"Pop Hits"} image={require("../../Images/pop.png")}  width={width * 0.46} navigate={"pop"}/>
+        <SmallBentooCard text={"Lofi Beats"} image={require("../../Images/lofi.png")} width={width * 0.46} navigate={"lofi"}/>
       </View>
       <PaddingConatiner>
         <Heading text={"Languages"}/>
diff --git a/Route/Home/Home.jsx b/Route/Home/Home.jsx
index b7c22a5..2c0a0aa 100644
--- a/Route/Home/Home.jsx
+++ b/Route/Home/Home.jsx
@@ -11,10 +11,13 @@ import { useEffect, useState } from "react";
 import { getHomePageData } from "../../Api/HomePage";
 import { EachPlaylistCard } from "../../Component/Global/EachPlaylistCard";
 import { GetLanguageValue } from "../../LocalStorage/Languages";
-import { DisplayTopSection } from "../../Component/Home/DisplayTopSection";
+import { TopHeader } from "../../Component/Home/TopHeader";
+import { DisplayTopGenres } from "../../Component/Home/DisplayTopGenres";
 export const Home = () => {
   const [Loading, setLoading] = useState(true);
   const [Data, setData] = useState({});
+  const [showHeader, setShowHeader] = useState(false);
+
   async function fetchHomePageData(){
     try {
       setLoading(true)
@@ -35,20 +38,27 @@ export const Home = () => {
       <LoadingComponent loading={Loading}/>
       {
         !Loading &&  <View>
-          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{
+          <ScrollView style={{zIndex:-1}} onScroll={(e)=>{
+            if (e.nativeEvent.contentOffset.y > 200 && !showHeader){
+              setShowHeader(true)
+            } else if (e.nativeEvent.contentOffset.y < 200 && showHeader) {
+              setShowHeader(false)
+            }
+          }} showsVerticalScrollIndicator={false} contentContainerStyle={{
             paddingBottom:90,
           }}>
-            <RouteHeading />
-             <DisplayTopSection Data={Data} playlist={Data.data.charts.filter((e)=>e.type === 'playlist')}/>
+            <RouteHeading showSearch={true} showSettings={true}/>
+             {/*<DisplayTopSection playlist={Data.data.charts.filter((e)=>e.type === 'playlist')}/>*/}
+            <DisplayTopGenres/>
             <PaddingConatiner>
+              <HorizontalScrollSongs id={Data.data.charts[0].id}/>
               <Heading text={"Recommended"}/>
             </PaddingConatiner>
             <FlatList horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{
               paddingLeft:13,
-              gap:10,
+              gap:15,
             }} data={Data?.data?.playlists ?? []} renderItem={(item,i)=><EachPlaylistCard name={item.item.title} follower={item.item.subtitle} key={item.index} image={item.item.image[2].link} id={item.item.id}/>}/>
             <PaddingConatiner>
-              <HorizontalScrollSongs id={Data.data.charts[0].id}/>
               <Heading text={"Trending Albums"}/>
             </PaddingConatiner>
             <FlatList horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{
@@ -62,7 +72,7 @@ export const Home = () => {
             </PaddingConatiner>
             <FlatList horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{
               paddingLeft:13,
-            }}  data={[1]} renderItem={()=><RenderTopCharts playlist={Data.data.charts.filter((e)=>e.type === 'playlist')}/>}/>
+            }}  data={[1]} renderItem={()=><RenderTopCharts playlist={Data.data.charts}/>}/>
             <PaddingConatiner>
               <HorizontalScrollSongs id={Data?.data?.charts[3]?.id}/>
             </PaddingConatiner>
@@ -76,6 +86,7 @@ export const Home = () => {
               <HorizontalScrollSongs id={Data?.data?.charts[2]?.id}/>
             </PaddingConatiner>
           </ScrollView>
+          <TopHeader showHeader={showHeader}/>
         </View>
       }
     </MainWrapper>
diff --git a/Route/Home/HomeRoute.jsx b/Route/Home/HomeRoute.jsx
index 410a71a..f7b84a7 100644
--- a/Route/Home/HomeRoute.jsx
+++ b/Route/Home/HomeRoute.jsx
@@ -9,6 +9,7 @@ import { LikedPlaylistPage } from "../Library/LikedPlaylistPage";
 import { SettingsPage } from "./SettingsPage";
 import { ChangeName } from "./ChangeName";
 import { SelectLanguages } from "./SelectLanguages";
+import ShowPlaylistofType from "../../Component/Discover/ShowPlaylistofType";
 const Stack = createNativeStackNavigator();
 export const HomeRoute = () => {
   return (
@@ -22,6 +23,7 @@ export const HomeRoute = () => {
       <Stack.Screen name={"Settings"} component={SettingsPage}/>
       <Stack.Screen name={"ChangeName"} component={ChangeName}/>
       <Stack.Screen name={"SelectLanguages"} component={SelectLanguages}/>
+      <Stack.Screen  name="ShowPlaylistofType" component={ShowPlaylistofType} />
     </Stack.Navigator>
   );
 };
diff --git a/Route/Home/SettingsPage.jsx b/Route/Home/SettingsPage.jsx
index 32a7d34..9b27887 100644
--- a/Route/Home/SettingsPage.jsx
+++ b/Route/Home/SettingsPage.jsx
@@ -99,7 +99,7 @@ export const SettingsPage = ({navigation}) => {
 
 function EachSettingsButton({text, OnPress}) {
   return <Pressable onPress={OnPress} style={{
-    backgroundColor:"rgb(43,45,55)",
+    backgroundColor:"rgb(34,39,34)",
     padding:20,
     borderRadius:10,
     flexDirection:"row",
@@ -112,7 +112,7 @@ function EachSettingsButton({text, OnPress}) {
 }
 function EachDropDownWithLabel({data, text, placeholder, OnChange}){
   return <View style={{
-    backgroundColor:"rgb(43,45,55)",
+    backgroundColor:"rgb(34,39,34)",
     padding:20,
     borderRadius:10,
     flexDirection:"row",
diff --git a/Route/Library/Library.jsx b/Route/Library/Library.jsx
index 699738b..0501395 100644
--- a/Route/Library/Library.jsx
+++ b/Route/Library/Library.jsx
@@ -1,14 +1,14 @@
 import { MainWrapper } from "../../Layout/MainWrapper";
-import { LibraryRouteHeading } from "../../Component/Library/LibraryTopHeader";
 import { EachLibraryCard } from "../../Component/Library/EachLibraryCard";
 import { Dimensions, ScrollView, View } from "react-native";
+import { RouteHeading } from "../../Component/Home/RouteHeading";
 
 
 export const Library = () => {
   const width = Dimensions.get("window").width
   return (
     <MainWrapper>
-          <LibraryRouteHeading text={"Library"}/>
+      <RouteHeading bottomText={"Your Library"}/>
       <ScrollView>
         <View style={{flexWrap:'wrap', flexDirection:"row", width:width, justifyContent:"space-evenly"}}>
           <EachLibraryCard text={"Liked Songs"} image={require("../../Images/LikedSong.png")} navigate={"LikedSongs"}/>
diff --git a/Route/Library/LikedPlaylistPage.jsx b/Route/Library/LikedPlaylistPage.jsx
index d91ce36..39f00b9 100644
--- a/Route/Library/LikedPlaylistPage.jsx
+++ b/Route/Library/LikedPlaylistPage.jsx
@@ -27,7 +27,7 @@ export const LikedPlaylistPage = () => {
   return (
     <Animated.ScrollView scrollEventThrottle={16} ref={AnimatedRef} contentContainerStyle={{
       paddingBottom:65,
-      backgroundColor:"black",
+      backgroundColor:"rgba(0,0,0)",
     }}>
       <LikedPagesTopHeader AnimatedRef={AnimatedRef} url={require("../../Images/LikedPlaylist.png")} />
       <LikedDetails name={"Liked Playlists"} dontShowPlayButton={true}/>
diff --git a/Route/Library/LikedSongPage.jsx b/Route/Library/LikedSongPage.jsx
index a45a41e..579293e 100644
--- a/Route/Library/LikedSongPage.jsx
+++ b/Route/Library/LikedSongPage.jsx
@@ -42,7 +42,7 @@ export const LikedSongPage = () => {
   return (
     <Animated.ScrollView scrollEventThrottle={16} ref={AnimatedRef} contentContainerStyle={{
       paddingBottom:55,
-      backgroundColor:"black",
+      backgroundColor:"rgba(0,0,0)",
     }}>
       <LikedPagesTopHeader AnimatedRef={AnimatedRef} url={require("../../Images/LikedSong.png")} />
       <LikedDetails name={"Liked Songs"} Data={LikedSongs}/>
diff --git a/Route/OnboardingScreen/Slide1.jsx b/Route/OnboardingScreen/Slide1.jsx
index 96be3f1..5a6fc67 100644
--- a/Route/OnboardingScreen/Slide1.jsx
+++ b/Route/OnboardingScreen/Slide1.jsx
@@ -14,7 +14,7 @@ export const Slide1 = ({navigation}) => {
        justifyContent:"center",
        flex:1,
      }}>
-       <Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/Logo.png")} style={{
+       <Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/Logo.jpg")} style={{
          height:200,
          width:200,
          borderRadius:100,
diff --git a/Route/Playlist.jsx b/Route/Playlist.jsx
index e671224..ea54e12 100644
--- a/Route/Playlist.jsx
+++ b/Route/Playlist.jsx
@@ -40,8 +40,8 @@ export const Playlist = ({route}) => {
   return (
     <MainWrapper>
        <Animated.ScrollView scrollEventThrottle={16} ref={AnimatedRef} contentContainerStyle={{
-        paddingBottom:55,
-        backgroundColor:"black",
+        paddingBottom:80,
+         backgroundColor:"#101010",
       }}>
         <PlaylistTopHeader AnimatedRef={AnimatedRef} url={image} />
         <PlaylistDetails id={id} image={image} name={name} follower={follower} listener={follower ?? ""} releasedDate={Data?.data?.releaseDate ?? ""} Data={Data}  Loading={Loading}/>
@@ -49,7 +49,8 @@ export const Playlist = ({route}) => {
            <LoadingComponent loading={Loading} height={200}/>}
         {!Loading && <View style={{
           paddingHorizontal:10,
-          backgroundColor:theme.colors.background,
+          backgroundColor:"#101010",
+          gap:7,
         }}>
           {Data?.data?.songs?.map((e,i)=><EachSongCard Data={Data} isFromPlaylist={true} index={i}  artist={FormatArtist(e?.artists?.primary)} language={e?.language} playlist={true} artistID={e?.primary_artists_id} key={i} duration={e?.duration} image={e?.image[2]?.url} id={e?.id} width={"100%"} title={e?.name}  url={e?.downloadUrl} style={{
             marginBottom:15,
diff --git a/Route/SearchPage.jsx b/Route/SearchPage.jsx
index 395aa0b..aaa8ffd 100644
--- a/Route/SearchPage.jsx
+++ b/Route/SearchPage.jsx
@@ -12,13 +12,14 @@ import { getSearchAlbumData } from "../Api/Album";
 import AlbumsDisplay from "../Component/SearchPage/AlbumDisplay";
 import { Spacer } from "../Component/Global/Spacer";
 
-export const SearchPage = () => {
+export const SearchPage = ({navigation}) => {
   const [ActiveTab, setActiveTab] = useState(0)
+  const [query, setQuery] = useState("");
+  // const [ApiQuery, setApiQuery] = useState("");
   const [SearchText, setSearchText] = useState("")
   const [Loading, setLoading] = useState(false)
   const [Data, setData] = useState({});
   const limit = 20
-  const TimeOuts= []
   async function fetchSearchData(text){
     if (SearchText !== ""){
       try {
@@ -42,6 +43,19 @@ export const SearchPage = () => {
       setData([])
     }
   }
+  useEffect(() => {
+    if (SearchText){
+      fetchSearchData(SearchText)
+    } else {
+      setData([])
+    }
+  }, [SearchText]);
+  useEffect(() => {
+    const timeoutId = setTimeout(()=>setSearchText(query), 350)
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [query]);
   useEffect(()=>{
       fetchSearchData(SearchText)
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -49,19 +63,11 @@ export const SearchPage = () => {
   return (
     <MainWrapper>
       <Spacer/>
-      <SearchBar onChange={(text)=>{
-        setSearchText(text)
-        const id = setTimeout(()=>{
-          fetchSearchData(SearchText)
-        },500)
-        TimeOuts.push(id)
-        TimeOuts.map((e,i)=>{
-          if ( i < TimeOuts.length - 3){
-            e.clearTimeout()
-          }
-        })
+      <SearchBar navigation={navigation} onChange={(text)=>{
+        setQuery(text)
       }}/>
       <Tabs tabs={["Songs","Playlists","Albums"]} setState={setActiveTab} state={ActiveTab}/>
+      <Spacer height={15}/>
       {Loading && <LoadingComponent loading={Loading}/>}
       {!Loading && <View style={{
         paddingHorizontal:10,
diff --git a/Utils/GetCurrentDaytime.js b/Utils/GetCurrentDaytime.js
new file mode 100644
index 0000000..262417b
--- /dev/null
+++ b/Utils/GetCurrentDaytime.js
@@ -0,0 +1,19 @@
+export   function GetCurrentDaytime() {
+  const now = new Date(),
+    hour = now.getHours();
+
+  const morning = (hour >= 4 && hour <= 11),
+    afternoon = (hour >= 12 && hour <= 16),
+    evening = (hour >= 17 && hour <= 20),
+    night = (hour >= 21 || hour <= 3);
+
+  if (morning) {
+    return "Morning Vibes ✨"
+  } else if (afternoon){
+    return "Afternoon Vibes ✨"
+  } else if (evening) {
+    return "Evening Chill's ✨"
+  } else if (night) {
+    return "Lofi Night's 💫"
+  }
+}
diff --git a/android/app/src/main/ic_launcher-playstore.png b/android/app/src/main/ic_launcher-playstore.png
index 5bb8fa9..20292b5 100644
Binary files a/android/app/src/main/ic_launcher-playstore.png and b/android/app/src/main/ic_launcher-playstore.png differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp
index 88c51c3..14d5bf6 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp
index de78410..ad5c0f4 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp differ
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
index 181d6e3..486eb3d 100644
Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp
index 186c9f7..afa0f2a 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp
index 860e2d0..79a5f76 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp differ
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
index 68b16b5..a8c28aa 100644
Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
index 23f9f9a..30f5e43 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp
index 2548ef6..dfd96ce 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
index 2364fe9..9e3050a 100644
Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
index f038ab8..87307ba 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp
index 1c12113..55459f5 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
index 7782f45..a71645c 100644
Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
index 59aa8a1..1f23245 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp
index 78d6943..bf00d0e 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
index 2f9c620..bd5a08c 100644
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ
diff --git a/android/app/src/main/res/values/ic_launcher_background.xml b/android/app/src/main/res/values/ic_launcher_background.xml
index e645b79..d384f6c 100644
--- a/android/app/src/main/res/values/ic_launcher_background.xml
+++ b/android/app/src/main/res/values/ic_launcher_background.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#5E17EB</color>
+    <color name="ic_launcher_background">#C3242B</color>
 </resources>
\ No newline at end of file
diff --git a/android/settings.gradle b/android/settings.gradle
index 476c2aa..e352153 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -6,3 +6,4 @@ project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir
 includeBuild('../node_modules/@react-native/gradle-plugin')
 include ':app', ':react-native-code-push'
 project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
+
diff --git a/hooks/useGetUserName.js b/hooks/useGetUserName.js
new file mode 100644
index 0000000..511782d
--- /dev/null
+++ b/hooks/useGetUserName.js
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { GetUserNameValue } from "../LocalStorage/StoreUserName";
+
+export const useGetUserName = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [userNameValue, setUserName] = useState("");
+  async function getUserNameLocalStorage(){
+    const name = await GetUserNameValue()
+    setUserName(FormatName(name))
+  }
+  function FormatName(name){
+    const nameArray = name.split(" ")
+    name = nameArray[0]
+    if (name.length >= 10){
+      return name.slice(0,9) + ".."
+    } else {
+      return name
+    }
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getUserNameLocalStorage()
+  }, []);
+  return userNameValue;
+};