diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 870333edc..1113606eb 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -28,17 +28,26 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-close-button {
   background-color: $osd_bg_color;
+  color: $osd_fg_color;
   border-radius: 99px;
-  width: 64px;
-  height: 64px;
-  margin: 64px;
+  padding: 6px;
+  height: 30px;
+  width: 30px;
+  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
+  margin-top: 8px;
 
-  &:hover, &:focus { background-color: $hover_bg_color; }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: darken($osd_bg_color, 5%); }
+  &.left { margin-left: 8px; }
+  &.right { margin-right: 8px; }
 
-  StIcon {
-    icon-size: $base_icon_size * 2;
+  & StIcon { icon-size: 24px; }
+
+  &:hover {
+    background-color: lighten($osd_bg_color, 15%);
+  }
+
+  &:active {
+    color: transparentize($osd_fg_color, 0.2);
+    background-color: darken($osd_bg_color, 5%);
   }
 }
 
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index fc3334fb7..544513fec 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ScreenshotService, ScreenshotUI, showScreenshotUI */
 
-const { Clutter, Cogl, Gio, GObject, GLib, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi;
 
 const GrabHelper = imports.ui.grabHelper;
 const Layout = imports.ui.layout;
@@ -1089,12 +1089,24 @@ var ScreenshotUI = GObject.registerClass({
 
         this._closeButton = new St.Button({
             style_class: 'screenshot-ui-close-button',
-            x_align: Clutter.ActorAlign.END,
-            y_align: Clutter.ActorAlign.START,
-            x_expand: true,
-            y_expand: true,
+            child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
         });
-        this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
+        this._closeButton.add_constraint(new Clutter.BindConstraint({
+            source: this._panel,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
+        this._closeButton.add_constraint(new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.Y_AXIS,
+            pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
+            factor: 0,
+        }));
+        this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.X_AXIS,
+            pivot_point: new Graphene.Point({ x: 0.5, y: -1 }),
+        });
+        this._closeButton.add_constraint(this._closeButtonXAlignConstraint);
         this._closeButton.connect('clicked', () => this.close());
         this._primaryMonitorBin.add_child(this._closeButton);
 
@@ -1281,6 +1293,21 @@ var ScreenshotUI = GObject.registerClass({
         );
     }
 
+    _refreshButtonLayout() {
+        const buttonLayout = Meta.prefs_get_button_layout();
+
+        this._closeButton.remove_style_class_name('left');
+        this._closeButton.remove_style_class_name('right');
+
+        if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) {
+            this._closeButton.add_style_class_name('left');
+            this._closeButtonXAlignConstraint.factor = 0;
+        } else {
+            this._closeButton.add_style_class_name('right');
+            this._closeButtonXAlignConstraint.factor = 1;
+        }
+    }
+
     _rebuildMonitorBins() {
         for (const bin of this._monitorBins)
             bin.destroy();
@@ -1429,6 +1456,8 @@ var ScreenshotUI = GObject.registerClass({
         if (!grabResult)
             return;
 
+        this._refreshButtonLayout();
+
         this.remove_all_transitions();
         this.visible = true;
         this.ease({