diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
index 6d7927bf..f8bfe633 100644
--- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
@@ -9,11 +9,12 @@ import { BsmButton } from "../shared/bsm-button.component"
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook"
 import { MapsManagerService } from "renderer/services/maps-manager.service"
 import { motion, Variants } from "framer-motion";
-import ReactTooltip from 'react-tooltip';
 import { MapsDownloaderService } from "renderer/services/maps-downloader.service"
 import { BsmImage } from "../shared/bsm-image.component"
 import wipGif from "../../../../assets/images/gifs/wip.gif"
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service"
+import { useObservable } from "renderer/hooks/use-observable.hook"
+import { BsmIcon } from "../svgs/bsm-icon.component"
 
 type Props = {
     version?: BSVersion
@@ -30,6 +31,7 @@ export function MapsPlaylistsPanel({version}: Props) {
     const [mapSearch, setMapSearch] = useState("");
     const [playlistSearch, setPlaylistSearch] = useState("");
     const [mapsLinked, setMapsLinked] = useState(false);
+    const isOnline = useObservable(osDiagnostic.isOnline$);
     const color = useThemeColor("first-color");
     const mapsRef = useRef<any>();
 
@@ -62,7 +64,6 @@ export function MapsPlaylistsPanel({version}: Props) {
     const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
 
         const linkedColor = mapsLinked ? color : "red";
-        const addMapColor = color;
 
         const onClickLink = (index: number) => {
             if(index === 0){ handleMapsLinkClick(); }
@@ -79,15 +80,17 @@ export function MapsPlaylistsPanel({version}: Props) {
                 <span>{text}</span>
                 {index === 0 &&(
                     <div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
-                        
-                        <motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip"> 
-                            <span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: addMapColor}}/>
-                            <BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: addMapColor}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}/>
-                        </motion.div>
-                        <ReactTooltip id="add-tooltip" effect="solid" padding="5px">
-                            <span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
-                        </ReactTooltip>
-                        {(!!version && osDiagnostic.isOnline) && (
+                        {isOnline && (
+                            
+                            <motion.div whileHover={"hover"} whileTap={"tap"} className="relative h-[calc(100%-5px)] flex flex-row justify-center items-center shrink-0 rounded-full overflow-hidden pr-2" style={{color}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}>
+                                <span className="absolute top-0 left-0 h-full w-full opacity-20" style={{backgroundColor: "currentcolor"}}/>
+                                <motion.div className="h-full p-0.5" variants={variants}>
+                                    <BsmIcon className="block h-full aspect-square" icon="add"/>
+                                </motion.div>
+                                <span className="text-sm brightness-150">Ajouter</span>
+                            </motion.div>
+                        )}
+                        {(!!version) && (
                             <motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" title={mapsLinked ? "Délier les maps" : "Lier les maps"}> 
                                 <span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: linkedColor}}/>
                                 <BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: linkedColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>