diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1e1ddd5f..ab218ecaf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14476,20 +14476,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/frontend/src/components/Media/NavigationButtons.tsx b/frontend/src/components/Media/NavigationButtons.tsx
index eea0a0a44..46304733f 100644
--- a/frontend/src/components/Media/NavigationButtons.tsx
+++ b/frontend/src/components/Media/NavigationButtons.tsx
@@ -14,18 +14,22 @@ export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
     <>
       <button
         onClick={onPrevious}
-        className="absolute top-1/2 left-4 z-30 flex -translate-y-1/2 transform cursor-pointer items-center rounded-full bg-black/30 p-3 text-white backdrop-blur-md transition-all duration-200 hover:bg-black/50 hover:shadow-lg"
+        className="group absolute inset-y-0 left-0 z-30 flex w-20 cursor-pointer items-center justify-center bg-transparent text-white"
         aria-label="Previous image"
       >
-        <ChevronLeft className="h-6 w-6" />
+        <span className="flex items-center justify-center rounded-full p-3 backdrop-blur-md transition-all duration-200 group-hover:bg-black/80 group-hover:shadow-lg">
+          <ChevronLeft className="h-6 w-6" />
+        </span>
       </button>
 
       <button
         onClick={onNext}
-        className="absolute top-1/2 right-4 z-30 flex -translate-y-1/2 transform cursor-pointer items-center rounded-full bg-black/30 p-3 text-white backdrop-blur-md transition-all duration-200 hover:bg-black/50 hover:shadow-lg"
+        className="group absolute inset-y-0 right-0 z-30 flex w-20 cursor-pointer items-center justify-center bg-transparent text-white"
         aria-label="Next image"
       >
-        <ChevronRight className="h-6 w-6" />
+        <span className="flex items-center justify-center rounded-full p-3 backdrop-blur-md transition-all duration-200 group-hover:bg-black/80 group-hover:shadow-lg">
+          <ChevronRight className="h-6 w-6" />
+        </span>
       </button>
     </>
   );