diff --git a/src/navigation/BottomTab.js b/src/navigation/BottomTab.js
index ed0b681..baca24d 100644
--- a/src/navigation/BottomTab.js
+++ b/src/navigation/BottomTab.js
@@ -1,34 +1,20 @@
-import React, { useGlobal } from "reactn";
-import { StyleSheet } from "react-native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Motion } from "@legendapp/motion";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "reactn";
 
-import { responsiveHeight } from "../actions/responsiveSizes.js";
-
-import useLayoutType from "../hooks/useLayoutType.js";
-
-import { Routes } from "./Routes";
 import { Palette } from "../styles";
+import { Routes } from "./Routes";
 
 import { tabs } from "../assets";
 
 import TabBar from "./TabBar";
 
-import HomeStack from "./HomeStack";
-import ChatStack from "./ChatStack";
-import SettingsStack from "./SettingsStack";
-import Library from "../screens/Library/Library.js";
-import Profile from "../screens/Profile/Profile.js";
+import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
+import Library from "../screens/Library/Library.js";
 import Playbacks from "../screens/Playbacks.js";
-
-const bottomTabStyles = StyleSheet.create({
-  icon: {
-    width: responsiveHeight(5),
-    height: responsiveHeight(5),
-    resizeMode: "contain",
-  },
-});
+import Profile from "../screens/Profile/Profile.js";
+import HomeStack from "./HomeStack";
 
 const BottomTab = createBottomTabNavigator();
 
@@ -40,10 +26,11 @@ export const BottomTabScreen = () => {
         tintColor: focused ? Palette.white : "#8B8883",
       }}
       style={[
-        bottomTabStyles.icon,
         {
-          width: 24,
-          height: 24,
+          width: Platform.OS === "web" ? 30 : 24,
+          height: Platform.OS === "web" ? 30 : 24,
+          marginBottom: Platform.OS === "web" ? 13 : 0,
+          marginTop: Platform.OS === "web" ? 13 : 0,
         },
       ]}
       source={icon}
diff --git a/src/navigation/TabBar.js b/src/navigation/TabBar.js
index e7c2fa5..830d140 100644
--- a/src/navigation/TabBar.js
+++ b/src/navigation/TabBar.js
@@ -1,13 +1,10 @@
-import React from "react";
-import { View, TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
 
-import { gutters, Palette, Style } from "../styles";
-import useLayoutType from "../hooks/useLayoutType";
-import BorderGradient from "../components/BorderGradient/BorderGradient";
-import { colors } from "react-native-swiper-flatlist/src/themes";
-import { BlurView } from "expo-blur";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
+import useLayoutType from "../hooks/useLayoutType";
+import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
@@ -32,7 +29,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
           end: { x: 1, y: 0 },
         }}
         style={{
-          height: 65,
+          height: isWeb ? 80 : 65,
         }}
       >
         <View
@@ -50,8 +47,8 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
               options.tabBarLabel !== undefined
                 ? options.tabBarLabel
                 : options.title !== undefined
-                ? options.title
-                : route.name;
+                  ? options.title
+                  : route.name;
 
             const _onPressTabBar = () => {
               if (!isWeb) {
@@ -97,7 +94,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
                   {options?.tabBarIcon({ focused: isFocused })}
                   <Text
                     style={{
-                      fontSize: 10,
+                      fontSize: isWeb ? 14 : 10,
                       color: isFocused ? Palette.white : "#8B8883",
                       fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                       marginTop: 2,
diff --git a/src/screens/Playbacks.js b/src/screens/Playbacks.js
index 180ac41..8574260 100644
--- a/src/screens/Playbacks.js
+++ b/src/screens/Playbacks.js
@@ -1,33 +1,33 @@
-import { useIsFocused, useRoute } from '@react-navigation/native';
-import { useAudioPlayer } from 'expo-audio';
-import { BlurView } from 'expo-blur';
-import { VideoView, useVideoPlayer } from 'expo-video';
+import { useIsFocused, useRoute } from "@react-navigation/native";
+import { useAudioPlayer } from "expo-audio";
+import { BlurView } from "expo-blur";
+import { VideoView, useVideoPlayer } from "expo-video";
 import React, {
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-} from 'react';
-import { Image, Platform, Pressable, Share, Text, View } from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { responsiveHeight } from 'react-native-responsive-dimensions';
-import { icons, img } from '../assets';
-import { openComments } from '../components/bottomsheets/CommentsBottomSheet';
-import KaraokeLyrics from '../components/KaraokeLyrics';
+} from "react";
+import { Image, Platform, Pressable, Share, Text, View } from "react-native";
+import Carousel from "react-native-reanimated-carousel";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { icons, img } from "../assets";
+import { openComments } from "../components/bottomsheets/CommentsBottomSheet";
+import KaraokeLyrics from "../components/KaraokeLyrics";
 import {
   arrayRemove,
   arrayUnion,
   projectsRef,
   usersRef,
-} from '../config/firebase';
-import useDataFromRef from '../hooks/useDataFromRef';
-import { Routes } from '../navigation';
-import { navigate } from '../navigation/NavigationService';
-import { useUser } from '../providers/UserDataProvider';
-import { Palette } from '../styles';
-import { FONT_FAMILY } from '../styles/Fonts';
-import { size } from '../styles/Style';
+} from "../config/firebase";
+import useDataFromRef from "../hooks/useDataFromRef";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+import { useUser } from "../providers/UserDataProvider";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { size } from "../styles/Style";
 
 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const { currentUID, followUser, unfollowUser } = useUser() || {};
@@ -176,7 +176,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
     const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
     return arr.map((w) => ({
-      word: String(w?.word ?? ''),
+      word: String(w?.word ?? ""),
       startS: Number(w?.startS ?? 0),
       endS: Number(w?.endS ?? 0),
     }));
@@ -202,43 +202,47 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     <View
       style={{
         height: responsiveHeight(100),
-        position: 'relative',
-        backgroundColor: 'black',
-      }}>
+        position: "relative",
+        backgroundColor: "black",
+      }}
+    >
       {!!videoUrl ? (
         <VideoView
           player={videoPlayer}
           nativeControls={false}
           contentFit="cover"
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
         />
       ) : (
         <Image
           source={img.placeholder3}
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
         />
       )}
 
       {/* Right side actions */}
       <View
         style={{
-          position: 'absolute',
-          width: '100%',
+          position: "absolute",
+          width: "100%",
           bottom: 130,
           gap: 18,
-        }}>
+        }}
+      >
         <View
           style={{
-            alignSelf: 'flex-end',
-            alignItems: 'center',
+            alignSelf: "flex-end",
+            alignItems: "center",
             gap: 20,
             paddingHorizontal: 13,
-          }}>
-          <View style={{ gap: 6, alignItems: 'center' }}>
+          }}
+        >
+          <View style={{ gap: 6, alignItems: "center" }}>
             <Pressable
               onPress={() => {
                 navigate(Routes.SingerProfile, { userId: item?.userId });
-              }}>
+              }}
+            >
               {owner?.profilePictureURL ? (
                 <Image
                   source={{ uri: owner.profilePictureURL }}
@@ -279,18 +283,19 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                     // rollback on failure
                     setIsFollowing((v) => !v);
                   }
-                }}>
+                }}
+              >
                 <BlurView
                   tint="dark"
-                  intensity={Platform.OS !== 'ios' ? 10 : 20}
+                  intensity={Platform.OS !== "ios" ? 10 : 20}
                   style={{
                     paddingVertical: 6,
                     paddingHorizontal: 12,
                     borderRadius: 12,
                     borderWidth: 1,
                     borderColor: Palette.white,
-                    overflow: 'hidden',
-                    backgroundColor: isFollowing ? '#FFFFFF1A' : undefined,
+                    overflow: "hidden",
+                    backgroundColor: isFollowing ? "#FFFFFF1A" : undefined,
                   }}
                   // experimentalBlurMethod={
                   //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
@@ -301,8 +306,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                       fontSize: 13,
                       color: Palette.white,
                       fontFamily: FONT_FAMILY.InterMedium,
-                    }}>
-                    {isFollowing ? 'Ne plus suivre' : 'Suivre'}
+                    }}
+                  >
+                    {isFollowing ? "Ne plus suivre" : "Suivre"}
                   </Text>
                 </BlurView>
               </Pressable>
@@ -332,7 +338,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                 setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)));
               }
             }}
-            style={{ alignItems: 'center' }}>
+            style={{ alignItems: "center" }}
+          >
             <Image
               source={isLiked ? icons.heart : icons.heartOutline}
               style={size({ size: 26 })}
@@ -345,15 +352,17 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                   fontSize: 11,
                   marginTop: 4,
                   fontFamily: FONT_FAMILY.InterMedium,
-                  textAlign: 'center',
-                }}>
+                  textAlign: "center",
+                }}
+              >
                 {likesCount}
               </Text>
             )}
           </Pressable>
           <Pressable
             onPress={() => item?.id && openComments(item.id)}
-            style={{ alignItems: 'center' }}>
+            style={{ alignItems: "center" }}
+          >
             <Image source={icons.chatBubble} style={size({ size: 26 })} />
             {!!commentsCount && (
               <Text
@@ -362,8 +371,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                   fontSize: 11,
                   marginTop: 4,
                   fontFamily: FONT_FAMILY.InterMedium,
-                  textAlign: 'center',
-                }}>
+                  textAlign: "center",
+                }}
+              >
                 {commentsCount}
               </Text>
             )}
@@ -371,8 +381,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
           <Pressable
             onPress={async () => {
               try {
-                const url = item?.playbackUrl || '';
-                const title = item?.title || 'Partager';
+                const url = item?.playbackUrl || "";
+                const title = item?.title || "Partager";
                 const base = item?.title
                   ? `Découvre « ${item.title} » sur MusicLand`
                   : `Découvre ce playback sur MusicLand`;
@@ -385,20 +395,21 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                   })
                 );
               } catch (e) {}
-            }}>
+            }}
+          >
             <Image source={icons.share} style={size({ size: 26 })} />
           </Pressable>
         </View>
         <View style={{ paddingHorizontal: 28 }}>
           <BlurView
             tint="dark"
-            intensity={Platform.OS !== 'ios' ? 10 : 20}
+            intensity={Platform.OS !== "ios" ? 10 : 20}
             style={{
               paddingHorizontal: 14,
               paddingVertical: 8,
               borderRadius: 20,
               backgroundColor: Palette.glass,
-              overflow: 'hidden',
+              overflow: "hidden",
             }}
             // experimentalBlurMethod={
             //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
@@ -415,8 +426,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                   fontSize: 12,
                   color: Palette.white,
                   fontFamily: FONT_FAMILY.InterRegular,
-                }}>
-                {item?.title || 'Description chanson'}
+                }}
+              >
+                {item?.title || "Description chanson"}
               </Text>
             )}
           </BlurView>
@@ -436,7 +448,7 @@ const Playbacks = () => {
   const { getUserByUid } = useUser() || {};
   const isFocused = useIsFocused();
   const { data: playbacks = [], loadMore } = useDataFromRef({
-    ref: projectsRef.where('playbackUrl', '!=', null),
+    ref: projectsRef.where("playbackUrl", "!=", null),
     simpleRef: false,
     listener: false,
     usePagination: true,
@@ -475,7 +487,7 @@ const Playbacks = () => {
   }, [focusProjectId, playbacks, loadMore]);
 
   return (
-    <View style={{ flex: 1, backgroundColor: 'black' }}>
+    <View style={{ flex: 1, backgroundColor: "black" }}>
       <Carousel
         ref={carouselRef}
         data={playbacks}