diff --git a/app/assets/stylesheets/shared/image_edit_modal.scss b/app/assets/stylesheets/shared/image_edit_modal.scss
new file mode 100644
index 000000000..b5f592e90
--- /dev/null
+++ b/app/assets/stylesheets/shared/image_edit_modal.scss
@@ -0,0 +1,37 @@
+// Image edit modal
+.modal-file-edit {
+  background: transparent;
+  font-size: $font-size-base;
+  padding: 0 !important;
+
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    width: auto;
+  }
+
+  .modal-content {
+    border: 0;
+    height: 100%;
+  }
+
+  .modal-header {
+    align-items: center;
+    background: $color-white;
+    display: flex;
+    height: 4em;
+    padding: 0 1em;
+
+    .file-name {
+      font-weight: bold;
+      margin-right: auto;
+    }
+  }
+
+  .modal-body {
+    height: calc(100% - 4em);
+    padding: 0;
+  }
+}
+
+
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 8cfde42c4..1bc515b94 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1591,61 +1591,6 @@ ul.content-activities {
   }
 }
 
-// Image edit modal
-.modal-file-edit {
-  background: transparent;
-  font-size: $font-size-large;
-  padding: 0 !important;
-
-  .preview-close {
-    background: transparent;
-    border: 0;
-    color: $color-white;
-    display: inline-block;
-    float: right;
-  }
-
-  .modal-dialog {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    width: auto;
-  }
-
-  .modal-content {
-    background: transparent;
-    border: 0;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    color: $color-white;
-    height: 100%;
-    width: auto;
-  }
-
-  .modal-header {
-    background: $color-black;
-    border: 0;
-    height: 60px;
-    text-align: center;
-
-    .file-name {
-      float: left;
-    }
-  }
-
-  .modal-body {
-    height: calc(100% - 60px);
-    padding: 0;
-  }
-
-  .file-save-link {
-    color: $color-white;
-    display: inline-block;
-    float: right;
-    margin-right: 20px;
-  }
-}
-
 // Disable textarea resizing throughout application
 // (will be done via autosize JS plugin)
 textarea {
diff --git a/app/views/shared/_file_edit_modal.html.erb b/app/views/shared/_file_edit_modal.html.erb
index 74eced9b4..a57db6bfd 100644
--- a/app/views/shared/_file_edit_modal.html.erb
+++ b/app/views/shared/_file_edit_modal.html.erb
@@ -8,11 +8,15 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
         <span class="file-name"></span>
-        <a class="file-save-link" href='#'>
-          <p><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
-        </a>
+        <div class="sci-btn-group">
+          <a class="file-save-link btn btn-light" href='#'>
+            <span class="fas fa-save"></span> <%= t('SaveClose')%>
+          </a>
+          <button type="button" class="preview-close btn btn-light icon-btn" data-dismiss="modal">
+            <span class="fas fa-times"></span>
+          </button>
+        </div>
       </div>
       <div class="modal-body">
         <div id="tui-image-editor">