diff --git a/components/album/preview-image.tsx b/components/album/preview-image.tsx
index 792a27e2..9bde283a 100644
--- a/components/album/preview-image.tsx
+++ b/components/album/preview-image.tsx
@@ -478,9 +478,9 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollPrev()}
               aria-label="Previous photo"
-              className="absolute left-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur transition-opacity hover:bg-black/50 sm:flex"
+              className="absolute left-2 top-1/2 z-30 hidden backdrop-blur text-gray-300 rounded-full items-center justify-center sm:flex"
             >
-              <ChevronLeftIcon size={22} />
+              <ChevronLeftIcon className='!bg-transparent hover:!bg-transparent' size={22} />
             </button>
           )}
           {hasNext && (
@@ -488,9 +488,9 @@ export default function PreviewImage(props: Readonly<PreviewImageHandleProps>) {
               type="button"
               onClick={() => emblaApi?.scrollNext()}
               aria-label="Next photo"
-              className="absolute right-2 top-1/2 z-30 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur transition-opacity hover:bg-black/50 sm:flex"
+              className="absolute right-2 top-1/2 z-30 hidden backdrop-blur text-gray-300 rounded-full items-center justify-center sm:flex"
             >
-              <ChevronRightIcon size={22} />
+              <ChevronRightIcon className='!bg-transparent hover:!bg-transparent' size={22} />
             </button>
           )}
           {photos.length > 1 && !lightboxPhoto && (