diff --git a/addons/web/static/src/views/fields/image/image_field.js b/addons/web/static/src/views/fields/image/image_field.js
index 6ce9f2f1ae7..f2898369b95 100644
--- a/addons/web/static/src/views/fields/image/image_field.js
+++ b/addons/web/static/src/views/fields/image/image_field.js
@@ -1,9 +1,10 @@
 /** @odoo-module **/
 
-import { registry } from "@web/core/registry";
+import { isMobileOS } from "@web/core/browser/feature_detection";
+import { _lt } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
 import { url } from "@web/core/utils/urls";
-import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
 import { FileUploader } from "../file_handler";
 import { standardFieldProps } from "../standard_field_props";
 
@@ -24,6 +25,7 @@ function isBinarySize(value) {
 export class ImageField extends Component {
     setup() {
         this.notification = useService("notification");
+        this.isMobile = isMobileOS();
         this.state = useState({
             isValid: true,
         });
diff --git a/addons/web/static/src/views/fields/image/image_field.scss b/addons/web/static/src/views/fields/image/image_field.scss
index 89e3e0ff956..707dff2f5fa 100644
--- a/addons/web/static/src/views/fields/image/image_field.scss
+++ b/addons/web/static/src/views/fields/image/image_field.scss
@@ -1,48 +1,26 @@
 .o_field_image {
+    display: inline-block;
     position: relative;
 
-    .o_form_image_controls {
-        @include o-position-absolute(0, 0);
-        width: 100%;
-        color: white;
-        background-color: $o-brand-primary;
-        opacity: 0;
+    button {
         transition: opacity ease 400ms;
-        min-width: 35px;
-
-        button.fa {
-            border: none;
-            background-color: transparent;
-            outline: 0 !important;
-        }
-        .fa {
-            padding: 4px;
-            margin: 5px;
-            cursor: pointer;
-        }
+        width: 26px;
+        height: 26px;
+        opacity: 0;
+        background: $white;
     }
 
-    @include media-breakpoint-down(sm, $o-extra-grid-breakpoints) {
-        .o_form_image_controls {
-            position: initial;
-            opacity: 1;
-            .fa {
-                width: 50%;
-                padding: 6px;
-                margin: 0px;
-                text-align: center;
-                &.o_select_file_button{
-                    background: $o-brand-primary;
-                }
-                &.o_clear_file_button{
-                    background: map-get($theme-colors, 'danger');
-                }
-            }
-        }
+    &:hover button {
+        @include o-hover-opacity(0.6, 0.9);
     }
 
-    &:hover .o_form_image_controls {
-        opacity: 0.8;
+    .o_mobile_controls {
+        button {
+            @include o-hover-opacity(0.6, 0.9);
+            width: 30px;
+            height: 30px;
+            padding: 6px !important;
+        }
     }
 
     &.o_field_invalid img {
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index c2ae4542f5f..c9b33137221 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -2,37 +2,34 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ImageField" owl="1">
-        <t t-if="!props.readonly">
-            <div class="position-relative" aria-atomic="true" t-att-style="sizeStyle">
-                <div class="o_form_image_controls">
-                    <FileUploader
-                        acceptedFileExtensions="props.acceptedFileExtensions"
-                        onUploaded.bind="onFileUploaded"
-                        type="'image'"
-                    >
-                        <t t-set-slot="toggler">
-                            <button
-                                class="fa fa-pencil fa-lg float-start o_select_file_button"
-                                data-tooltip="Edit"
-                                aria-label="Edit"
-                            />
-                        </t>
+        <div t-attf-class="position-absolute w-100 bottom-0 {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
+            <t t-if="!props.readonly">
+                <FileUploader
+                    acceptedFileExtensions="props.acceptedFileExtensions"
+                    onUploaded.bind="onFileUploaded"
+                    type="'image'"
+                >
+                    <t t-set-slot="toggler">
                         <button
-                            t-if="props.value and state.isValid"
-                            class="fa fa-trash-o fa-lg float-end o_clear_file_button"
-                            data-tooltip="Clear"
-                            aria-label="Clear"
-                            t-on-click="onFileRemove"
+                            class="position-absolute bottom-0 start-0 border-0 rounded-circle m-1 p-1 fa fa-pencil fa-lg o_select_file_button"
+                            data-tooltip="Edit"
+                            aria-label="Edit"
                         />
-                    </FileUploader>
-                </div>
-            </div>
-        </t>
+                    </t>
+                    <button
+                        t-if="props.value and state.isValid"
+                        class="position-absolute bottom-0 end-0 border-0 rounded-circle m-1 p-1 fa fa-trash-o fa-lg o_clear_file_button"
+                        data-tooltip="Clear"
+                        aria-label="Clear"
+                        t-on-click="onFileRemove"
+                    />
+                </FileUploader>
+            </t>
+        </div>
         <img
             class="img img-fluid"
             alt="Binary file"
             t-att-src="getUrl(props.previewImage or props.name)"
-            t-att-border="props.readonly ? 0 : 1"
             t-att-name="props.name"
             t-att-height="props.height"
             t-att-width="props.width"
diff --git a/addons/web/static/tests/views/fields/image_field_tests.js b/addons/web/static/tests/views/fields/image_field_tests.js
index 6534892c3be..4e6b832811d 100644
--- a/addons/web/static/tests/views/fields/image_field_tests.js
+++ b/addons/web/static/tests/views/fields/image_field_tests.js
@@ -125,12 +125,12 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".o_form_image_controls .o_select_file_button",
+            ".o_field_image .o_select_file_button",
             "the image can be edited"
         );
         assert.containsOnce(
             target,
-            ".o_form_image_controls .o_clear_file_button",
+            ".o_field_image .o_clear_file_button",
             "the image can be deleted"
         );
         assert.strictEqual(
@@ -203,12 +203,12 @@ QUnit.module("Fields", (hooks) => {
 
             assert.containsOnce(
                 target,
-                ".o_form_image_controls .o_select_file_button",
+                ".o_field_image .o_select_file_button",
                 "the image can be edited"
             );
             assert.containsNone(
                 target,
-                ".o_form_image_controls .o_clear_file_button",
+                ".o_field_image .o_clear_file_button",
                 "the image cannot be deleted as it has not been uploaded"
             );
         }
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
index 987c617cdab..f020e211215 100644
--- a/addons/website_sale/static/src/scss/website_sale_backend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -52,11 +52,6 @@
                 height: 200px;
                 width: auto;
             }
-
-            .o_form_image_controls {
-                @include o-hover-opacity(0.7, 1);
-                padding: 2%;
-            }
         }
     }
     .o_video_container {