diff --git a/app/components/product/ProductImageCarousel.tsx b/app/components/product/ProductImageCarousel.tsx
index c3b873f..504f3d1 100644
--- a/app/components/product/ProductImageCarousel.tsx
+++ b/app/components/product/ProductImageCarousel.tsx
@@ -163,13 +163,15 @@ export const ProductImageCarousel = ({
         <>
           <button
             onClick={handleSettingsClick}
-            className="absolute top-3 left-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
+            style={{ top: "calc(env(safe-area-inset-top, 0px) + 12px)" }}
+            className="absolute left-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
           >
             <EllipsisVertical size={20} className="text-WHITE2" />
           </button>
           <button
             onClick={() => safeGoBack(navigate)}
-            className="absolute top-3 right-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
+            style={{ top: "calc(env(safe-area-inset-top, 0px) + 12px)" }}
+            className="absolute right-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
           >
             <ArrowRight size={20} className="text-WHITE2" />
           </button>
diff --git a/app/routes/store.$storeId.products.tsx b/app/routes/store.$storeId.products.tsx
index b104daa..e1f2b52 100644
--- a/app/routes/store.$storeId.products.tsx
+++ b/app/routes/store.$storeId.products.tsx
@@ -319,7 +319,10 @@ function StoreProductsContent() {
   }
 
   return (
-    <div ref={containerRef} className="bg-WHITE lg:bg-transparent">
+    <div
+      ref={containerRef}
+      className="bg-WHITE lg:bg-transparent pt-[env(safe-area-inset-top)] lg:pt-0"
+    >
       <div className="border-b border-gray-200 px-4 py-3 lg:border-0 lg:px-0 lg:py-0 lg:mb-6 lg:flex lg:items-end lg:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-right lg:text-[24px] lg:font-extrabold">