diff --git a/web/src/App.tsx b/web/src/App.tsx
index 46109ac..bc6116b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -105,10 +105,17 @@ export default function App() {
             <div
               key={album.id}
               className="flex gap-2 p-2"
-              style={{
-                backgroundColor: album.vibrantColor,
-                color: contrastColor,
-              }}
+              style={
+                album.vibrantColor
+                  ? {
+                      backgroundColor: album.vibrantColor,
+                      color: contrastColor,
+                    }
+                  : {
+                      backgroundColor: "white",
+                      color: "black",
+                    }
+              }
             >
               <img
                 src={`/cover/${album.cover}`}
@@ -126,7 +133,11 @@ export default function App() {
               <button
                 type="button"
                 className="cursor-pointer ml-auto mt-auto py-1 px-2"
-                style={{ backgroundColor: oppositeColor, color: contrastColor }}
+                style={
+                  album.vibrantColor
+                    ? { backgroundColor: oppositeColor, color: contrastColor }
+                    : { backgroundColor: "black", color: "white" }
+                }
                 onClick={() => handleDownloadAlbum(album)}
               >
                 Download