diff --git a/src/renderer/components/maps-mangement-components/map-item.component.tsx b/src/renderer/components/maps-mangement-components/map-item.component.tsx
index b71ccd33..71cc59ca 100644
--- a/src/renderer/components/maps-mangement-components/map-item.component.tsx
+++ b/src/renderer/components/maps-mangement-components/map-item.component.tsx
@@ -21,6 +21,7 @@ import useDoubleClick from "use-double-click";
 import { GlowEffect } from "../shared/glow-effect.component";
 import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
 import { useService } from "renderer/hooks/use-service.hook";
+import Tippy from "@tippyjs/react";
 
 export type ParsedMapDiff = { type: BsvMapDifficultyType; name: string; stars: number };
 
@@ -51,7 +52,7 @@ export type MapItemProps<T = unknown> = {
 };
 
 export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, ranked, bpm, duration, likes, createdAt, selected, downloading, showOwned, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick }: MapItemProps) => {
-    
+
     const linkOpener = useService(LinkOpenerService);
     const audioPlayer = useService(AudioPlayerService);
 
@@ -156,25 +157,25 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
     return (
         <motion.li className="relative h-[100px] w-[400px] min-w-[370px] shrink-0 grow basis-0 text-white group cursor-pointer" onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)} style={{ zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden" }}>
             <GlowEffect visible={hovered || (selected && !!onSelected)} />
-            <AnimatePresence>
-                {(diffsPanelHovered || bottomBarHovered) && (
-                    <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
-                        {Array.from(diffs.entries()).map(([charac, diffSet]) => (
-                            <ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
-                                {diffSet.map(({ type, name, stars }) => (
-                                    <li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
-                                        <BsmIcon className="h-full w-fit p-px" icon={charac} />
-                                        <span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
-                                            {stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
-                                        </span>
-                                        <span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
-                                    </li>
-                                ))}
-                            </ol>
-                        ))}
-                    </motion.ul>
-                )}
-            </AnimatePresence>
+                <AnimatePresence>
+                    {(diffsPanelHovered || bottomBarHovered) && (
+                        <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
+                            {Array.from(diffs.entries()).map(([charac, diffSet]) => (
+                                <ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
+                                    {diffSet.map(({ type, name, stars }) => (
+                                        <li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
+                                            <BsmIcon className="h-full w-fit p-px" icon={charac} />
+                                            <span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
+                                                {stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
+                                            </span>
+                                            <span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
+                                        </li>
+                                    ))}
+                                </ol>
+                            ))}
+                        </motion.ul>
+                    )}
+                </AnimatePresence>
             <div className="h-full w-full relative pl-[100px] rounded-md overflow-hidden flex flex-row justify-end">
                 <div className={`absolute top-0 left-0 h-full aspect-square cursor-pointer ${showOwned && "border-l-[5px]"}`} style={{ borderColor: showOwned && color }}>
                     <BsmImage className="w-full h-full object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
@@ -246,46 +247,66 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
 
                     <div className="flex flex-col justify-center items-center gap-1 w-full h-full overflow-hidden opacity-0 group-hover:opacity-100">
                         {onDelete && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor={color}
-                                icon="trash"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onDelete(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.delete")} placement="left" className="!bg-main-color-1" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor={color}
+                                    icon="trash"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onDelete(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                         )}
                         {onDownload && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor={color}
-                                icon="download"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onDownload(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.download")} placement="left" className="!bg-main-color-1" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor={color}
+                                    icon="download"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onDownload(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                         )}
                         {onCancelDownload && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor="red"
-                                icon="cross"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onCancelDownload(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.cancel-download")} placement="left" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor="red"
+                                    icon="cross"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onCancelDownload(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                         )}
-                        {downloading && <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />}
+                        {downloading &&
+                        <Tippy content={t("maps.map-item.downloading")} placement="left" theme="default">
+                        <div>
+                            <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />
+                        </div>
+                        </Tippy>
+                        }
                         {previewUrl && (
+                        <Tippy content={t("maps.map-item.preview")} placement="left" theme="default">
+                            <div>
                             <BsmButton
                                 className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
                                 iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -297,8 +318,12 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                                     openPreview();
                                 }}
                             />
+                            </div>
+                        </Tippy>
                         )}
                         {mapId && (
+                        <Tippy content={t("maps.map-item.bsr-code")} placement="left" className="!bg-main-color-1" theme="default">
+                            <div>
                             <BsmButton
                                 className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
                                 iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -310,6 +335,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                                     copyBsr();
                                 }}
                             />
+                            </div>
+                        </Tippy>
                         )}
                     </div>
                 </div>