diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx
index a11a5629..cfbc50fa 100644
--- a/interface/src/components/BackgroundSelector.tsx
+++ b/interface/src/components/BackgroundSelector.tsx
@@ -136,7 +136,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
           </div>
         ))}
         {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
-          <div key={bg.id}
+          <button key={bg.id}
             onClick={() => handlePresetClick(bg)}
             className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}>
             {bg.isPreset && downloadProgress[bg.id] !== undefined && (
@@ -156,7 +156,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
               className="absolute top-0 object-cover w-full h-full rounded-xl" 
               src={bg.isPreset ? bg.previewUrl : bg.url}  // Use preview for preset backgrounds
               alt="swatch" />
-          </div>
+          </button>
         ))}
       </div>
 
diff --git a/src/css/injected.scss b/src/css/injected.scss
index de767f15..d405673a 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -1662,10 +1662,12 @@ body {
   animation: spin 3s linear infinite;
   -moz-animation: spin 3s linear infinite;
 }
+.dark .LabelList__name___-CHgq {
+  text-shadow: 0 0 5px black;
+}
 .LabelList__name___-CHgq {
   display: flex;
   align-items: center;
-  text-shadow: 0 0 5px black;
 }
 [data-label="inbox"] > .LabelList__name___-CHgq::before {
   content: "";