diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 804ceba8..5c37074d 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -228,13 +228,13 @@ class MarkdownNoteDetail extends React.Component {
               <span styleName='info-delete-message'>
                 Are you sure to delete this note?
               </span>
-              <button styleName='info-delete-cancelButton'
-                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
-              >Cancel</button>
               <button styleName='info-delete-confirmButton'
                 onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
                 ref='deleteConfirmButton'
               >Confirm</button>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
             </div>
           </div>
           : <div styleName='info'>
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 5a63a9b8..fb7e55a2 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -14,28 +14,27 @@ $info-height = 75px
 
 .info-delete
   height 80px
-  clearfix()
+  display flex
 
 .info-delete-message
   height 80px
   line-height 80px
   padding 0 25px
-  float left
+  overflow ellipsis
+  flex 1
 
 .info-delete-confirmButton
-  float right
   margin 25px 5px 0
+  width 80px
   height 30px
-  padding 0 25px
   border-radius 2px
   border none
   colorDangerButton()
 
 .info-delete-cancelButton
-  float right
+  width 80px
   height 30px
   margin 25px 5px 0
-  padding 0 25px
   border $ui-border
   border-radius 2px
   color $ui-text-color
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 6da4276d..94471e2d 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -405,17 +405,16 @@ class SnippetNoteDetail extends React.Component {
               tabIndex='-1'
               onKeyDown={(e) => this.handleDeleteKeyDown(e)}
             >
-
               <span styleName='info-delete-message'>
                 Are you sure to delete this note?
               </span>
-              <button styleName='info-delete-cancelButton'
-                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
-              >Cancel</button>
               <button styleName='info-delete-confirmButton'
                 onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
                 ref='deleteConfirmButton'
               >Confirm</button>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
             </div>
           </div>
           : <div styleName='info'>
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index cd387995..5a875180 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -14,29 +14,27 @@ $info-height = 75px
 
 .info-delete
   height 80px
-  clearfix()
+  display flex
 
 .info-delete-message
   height 80px
   line-height 80px
   padding 0 25px
-  float left
+  overflow ellipsis
+  flex 1
 
 .info-delete-confirmButton
-  float right
   margin 25px 5px 0
+  width 80px
   height 30px
-  padding 0 25px
   border-radius 2px
   border none
-  color $ui-text-color
   colorDangerButton()
 
 .info-delete-cancelButton
-  float right
+  width 80px
   height 30px
   margin 25px 5px 0
-  padding 0 25px
   border $ui-border
   border-radius 2px
   color $ui-text-color