diff --git a/src/features/background/components/BackgroundImage.jsx b/src/features/background/components/BackgroundImage.jsx
index 3ee5f8a3..7dc18286 100644
--- a/src/features/background/components/BackgroundImage.jsx
+++ b/src/features/background/components/BackgroundImage.jsx
@@ -1,23 +1,37 @@
-import { memo } from 'react';
+import { memo, useState, useEffect } from 'react';
 import PhotoInformation from './PhotoInformation';
 import variables from 'config/variables';
 import { updateHash } from 'utils/deepLinking';
 import EventBus from 'utils/eventbus';
+import { getAllBackgrounds } from 'utils/customBackgroundDB';
 
 /**
  * BackgroundImage component for rendering image backgrounds
  */
 function BackgroundImage({ photoInfo, currentAPI, url }) {
   const isCustomType = localStorage.getItem('backgroundType') === 'custom';
-  const customBackgrounds = (() => {
-    try {
-      const stored = localStorage.getItem('customBackground');
-      return stored && stored !== 'null' ? JSON.parse(stored) : [];
-    } catch {
-      return [];
-    }
-  })();
-  const hasNoCustomImages = isCustomType && (!customBackgrounds || customBackgrounds.length === 0);
+  const [customBackgrounds, setCustomBackgrounds] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadCustomBackgrounds = async () => {
+      if (isCustomType) {
+        try {
+          const backgrounds = await getAllBackgrounds();
+          setCustomBackgrounds(backgrounds || []);
+        } catch (error) {
+          console.error('Failed to load custom backgrounds:', error);
+          setCustomBackgrounds([]);
+        }
+      }
+      setIsLoading(false);
+    };
+
+    loadCustomBackgrounds();
+  }, [isCustomType]);
+
+  const hasNoCustomImages =
+    isCustomType && !isLoading && (!customBackgrounds || customBackgrounds.length === 0);
 
   const handleOpenSettings = () => {
     updateHash('#settings/background/source');
@@ -28,21 +42,24 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
     <>
       <div id="backgroundImage" />
       {hasNoCustomImages && (
-        <div style={{
-          position: 'absolute',
-          bottom: '20px',
-          left: '20px',
-          color: 'white',
-          background: 'rgba(0, 0, 0, 0.6)',
-          padding: '20px 30px',
-          borderRadius: '10px',
-          zIndex: 1,
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '20px',
+            left: '20px',
+            color: 'white',
+            background: 'rgba(0, 0, 0, 0.6)',
+            padding: '20px 30px',
+            borderRadius: '10px',
+            zIndex: 1,
+          }}
+        >
           <h2 style={{ margin: '0 0 10px 0', fontSize: '20px' }}>
             {variables.getMessage('widgets.background.no_images_title') || 'No Custom Images'}
           </h2>
           <p style={{ margin: '0 0 15px 0', fontSize: '14px', opacity: 0.9 }}>
-            {variables.getMessage('widgets.background.no_images_description') || 'Please add custom images in the Background settings'}
+            {variables.getMessage('widgets.background.no_images_description') ||
+              'Please add custom images in the Background settings'}
           </p>
           <button
             onClick={handleOpenSettings}
@@ -68,9 +85,7 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
           </button>
         </div>
       )}
-      {photoInfo?.credit && (
-        <PhotoInformation info={photoInfo} api={currentAPI} url={url} />
-      )}
+      {photoInfo?.credit && <PhotoInformation info={photoInfo} api={currentAPI} url={url} />}
     </>
   );
 }