diff --git a/src/frontend/app/ui/albums/album/album.component.css b/src/frontend/app/ui/albums/album/album.component.css
index fbac46cd..fab55b70 100644
--- a/src/frontend/app/ui/albums/album/album.component.css
+++ b/src/frontend/app/ui/albums/album/album.component.css
@@ -31,7 +31,7 @@ a {
   border: 1px solid #333;
   width: 180px;
   height: 180px;
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
 }
 
 .no-image {
diff --git a/src/frontend/app/ui/faces/face/face.component.css b/src/frontend/app/ui/faces/face/face.component.css
index 611c3d7d..009f6ecd 100644
--- a/src/frontend/app/ui/faces/face/face.component.css
+++ b/src/frontend/app/ui/faces/face/face.component.css
@@ -40,7 +40,7 @@ a {
   border: 1px solid #333;
   width: 180px;
   height: 180px;
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
 }
 
 .no-image {
diff --git a/src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css b/src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css
index b11f9a44..27c0c8c0 100644
--- a/src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css
+++ b/src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css
@@ -14,7 +14,7 @@ a {
   border: 1px solid #333;
   width: 180px;
   height: 180px;
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
 }
 
 
diff --git a/src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css b/src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
index cfe77071..25f3b326 100644
--- a/src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
+++ b/src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
@@ -1,7 +1,7 @@
 .static {
   width: 100%;
   height: 100%;
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
   color: #7f7f7f;
   font-size: 50px;
 }
@@ -23,7 +23,7 @@
 .sk-cube-grid .sk-cube {
   width: calc(100% / 3);
   height: calc(100% / 3);
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
   float: left;
 }
 
diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
index 26c4ee91..ff739707 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
@@ -19,6 +19,10 @@ img {
   vertical-align: unset;
 }
 
+img.loading{
+  background: var(--item-background) ;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
index ecf9006d..50043e30 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
@@ -2,6 +2,8 @@
 
 
   <img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src"
+       (load)="loaded=true"
+       [class.loading]="!loaded"
        *ngIf="thumbnail.Available">
 
   <app-gallery-grid-photo-loading
diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
index ecc90bc7..9ce692ef 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
@@ -29,6 +29,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   searchEnabled = true;
 
   wasInView: boolean = null;
+  loaded = false;
 
   constructor(
     private thumbnailService: ThumbnailManagerService,
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
index 7fa1c838..f31b5901 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -138,7 +138,7 @@
 }
 
 ::ng-deep .lightbox-map-gallery-component-preview-loading {
-  background-color: #bbbbbb;
+  background-color: var(--item-background);
   color: var(--bs-secondary-color-rgb);
 }
 
diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 1264a87e..27bc467e 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -1,3 +1,6 @@
+:root{
+  --item-background: #bbbbbb
+}
 
 a {
   text-decoration: none;