diff --git a/src/App.tsx b/src/App.tsx
index cf50dfa..ef5cf96 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,7 +33,7 @@ export default function App () {
           return (
             <div
               key={uuidv5(JSON.stringify(d), uuidv5.DNS)}
-              className='w-full bg-(--col2) hover:bg-(--col4) border border-(--col4) hover:border-(--col6) rounded-lg px-3 py-1.5 flex flex-row gap-4 items-center relative cursor-pointer transition-colors'
+              className='w-full bg-(--col2)/50 hover:bg-(--col4) border border-(--col4)/50 hover:border-(--col6)/50 rounded-lg px-3 py-1.5 flex flex-row gap-4 items-center relative cursor-pointer transition-colors'
             >
               <FontAwesomeIcon
                 icon={faHardDrive}
@@ -69,7 +69,7 @@ export default function App () {
             </div>
           )
         })}
-        <p className='w-full bg-(--col2) hover:bg-(--col4) border border-(--col4) hover:border-(--col6) rounded-lg px-3 py-1.5 cursor-pointer transition-colors'>
+        <p className='w-full bg-(--col2)/50 hover:bg-(--col4) border border-(--col4)/50 hover:border-(--col6)/50 rounded-lg px-3 py-1.5 cursor-pointer transition-colors'>
           Or select a folder to scan
         </p>
       </div>