diff --git a/package-lock.json b/package-lock.json
index b7d0133d..0ab63e1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11928,6 +11928,11 @@
         "resolve": "^1.22.1"
       }
     },
+    "tailwindcss-scoped-groups": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-scoped-groups/-/tailwindcss-scoped-groups-2.0.0.tgz",
+      "integrity": "sha512-uE9PJzfjqzsKlZ0dUjG5yPwBmkEZ/qmrXMLjykRs0otolUHAIclbtV49JQGyeYLo8YA7WPMgzKOg2e4snVyHqw=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index e98258bf..63037887 100644
--- a/package.json
+++ b/package.json
@@ -246,6 +246,7 @@
     "rxjs": "^7.5.6",
     "semver": "^7.3.8",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwindcss-scoped-groups": "^2.0.0",
     "use-double-click": "^1.0.5",
     "uuid": "^9.0.0"
   },
diff --git a/src/renderer/components/shared/bsm-checkbox.component.tsx b/src/renderer/components/shared/bsm-checkbox.component.tsx
index eaba2db1..59ab476d 100644
--- a/src/renderer/components/shared/bsm-checkbox.component.tsx
+++ b/src/renderer/components/shared/bsm-checkbox.component.tsx
@@ -15,8 +15,8 @@ export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
     }
 
     return (
-        <div className={`group ${className}`}>
-            {!disabled && <span className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
+        <div className={`${className} group-one`}>
+            {!disabled && <span className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-one-hover:opacity-100"/>}
 
             <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
                 <BsmIcon className="w-full h-full" icon="check" style={{color: iconColor, backgroundColor: checkedColor, visibility: checked ? "visible" : "hidden"}}/>
diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
index 453e0d24..bad56dd9 100644
--- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
@@ -8,9 +8,9 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
 import { PageStateService } from "renderer/services/page-state.service";
 import useDoubleClick from 'use-double-click';
 
-type Props = {mod: Mod, installedVersion: string, isDependency?: boolean, isSelected?: boolean, onChange?: (val: boolean) => void, wantInfo?: boolean, onWantInfo?: (mod: Mod) => void}
+type Props = {className?: string, mod: Mod, installedVersion: string, isDependency?: boolean, isSelected?: boolean, onChange?: (val: boolean) => void, wantInfo?: boolean, onWantInfo?: (mod: Mod) => void}
 
-export function ModItem({mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo}: Props) {
+export function ModItem({className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo}: Props) {
 
     const modsManager = BsModsManagerService.getInstance();
     const pageState = PageStateService.getInstance();
@@ -23,7 +23,7 @@ export function ModItem({mod, installedVersion, isDependency, isSelected, onChan
         onSingleClick: e => handleWantInfo(e),
         onDoubleClick: e => handleOnChange(e),
         ref: clickRef,
-        latency: 200
+        latency: 175
     })
 
     const wantInfoStyle: CSSProperties = wantInfo ? {borderColor: themeColor}  : {borderColor: "transparent"};
@@ -39,17 +39,17 @@ export function ModItem({mod, installedVersion, isDependency, isSelected, onChan
     const isChecked = isDependency || isSelected ||  mod.required;
 
     return (
-        <div ref={clickRef} className="contents bg-light-main-color-3 dark:bg-main-color-1 text-main-color-1 dark:text-light-main-color-1">
-            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0" style={wantInfoStyle}>
+        <li ref={clickRef} className={`${className} group`}>
+            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0 z-[1] group-hover:brightness-90" style={wantInfoStyle}>
                 <BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={onChange} disabled={mod.required || isDependency} checked={isChecked}/>
             </div>
-            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none" style={wantInfoStyle}>{mod.name}</span>
-            <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 ${(installedVersion && isOutDated) && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>{installedVersion || "-"}</span>
-            <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2" style={wantInfoStyle}>{mod.version}</span>
-            <span title={mod.description} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2" style={wantInfoStyle}>{mod.description}</span>
-            <div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2" style={wantInfoStyle}>
-                {installedVersion && <BsmButton className="z-[1] h-7 w-7 p-[5px] rounded-full" icon="trash" disabled={uninstalling} withBar={false} onClick={e => {e.stopPropagation(); uninstall()}}/>}
+            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none group-hover:brightness-90" style={wantInfoStyle}>{mod.name}</span>
+            <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(installedVersion && isOutDated) && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>{installedVersion || "-"}</span>
+            <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>{mod.version}</span>
+            <span title={mod.description} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>{mod.description}</span>
+            <div className="h-full bg-inherit flex items-center justify-center mr-3 rounded-r-md pr-2 border-t-2 border-b-2 border-r-2 group-hover:brightness-90" style={wantInfoStyle}>
+                {installedVersion && <BsmButton className="z-[1] h-7 w-7 p-[5px] rounded-full group-hover:brightness-90" icon="trash" disabled={uninstalling} withBar={false} onClick={e => {e.stopPropagation(); uninstall()}}/>}
             </div>
-        </div>
+        </li>
     )
 }
diff --git a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
index 44d4fa57..ef3922cc 100644
--- a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
@@ -68,14 +68,13 @@ export function ModsGrid({modsMap, installed, modsSelected, onModChange, moreInf
                         ({text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.uninstall-all", icon: "trash", onClick: handleUninstallAll}),
                     ]}/>
             </span>
+            
             {
                 Array.from(modsMap.keys()).map(key => modsMap.get(key).some(mod => mod.name.toLowerCase().includes(filter)) && (
                     <ul key={key} className="contents">
                         <h2 className="col-span-full py-1 font-bold pl-3">{key}</h2>
                         {modsMap.get(key).map(mod => mod.name.toLowerCase().includes(filter) && (
-                            <li className="contents cursor-pointer" key={mod.name}>
-                                <ModItem mod={mod} installedVersion={installedModVersion(key, mod)} isDependency={isDependency(mod)} isSelected={isSelected(mod)} onChange={(val) => onModChange(val, mod)} onWantInfo={onWantInfos} wantInfo={mod.name === moreInfoMod?.name}/>
-                            </li>
+                            <ModItem key={mod.name} className="contents bg-light-main-color-3 dark:bg-main-color-1 text-main-color-1 dark:text-light-main-color-1 hover:cursor-pointer" mod={mod} installedVersion={installedModVersion(key, mod)} isDependency={isDependency(mod)} isSelected={isSelected(mod)} onChange={(val) => onModChange(val, mod)} onWantInfo={onWantInfos} wantInfo={mod.name === moreInfoMod?.name}/>
                         ))}
                     </ul>
                 ))
diff --git a/tailwind.config.js b/tailwind.config.js
index 42ff802e..34588d5d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   darkMode: 'class',
   content: ['./src/renderer/**/*.tsx'],
   mode: 'jit',
-  plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')({ nocompatible: true })],
+  plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')({ nocompatible: true }), require("tailwindcss-scoped-groups")({groups: ["one"]})],
   theme:{
     colors:{
       ...colors,