diff --git a/app/assets/stylesheets/admin/orders.scss b/app/assets/stylesheets/admin/orders.scss
index 4858c0685a..2f66371ab4 100644
--- a/app/assets/stylesheets/admin/orders.scss
+++ b/app/assets/stylesheets/admin/orders.scss
@@ -134,3 +134,33 @@ table.index td.actions {
     color: $warning-red;
   }
 }
+
+.modal {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.4);
+	text-align: center;
+
+	.modal-content {
+		background-color: $color-1;
+		margin: 15% auto;
+		padding: 1.2em;
+		width: 30%;
+		border-radius: 1em;
+		border: 1px solid $color-border;
+	}
+
+	.modal-title {
+		font-size: $h4-size;
+	}
+
+	.message {
+		font-size: $h5-size;
+		padding: 1.2em 0;
+	}
+}
diff --git a/app/views/spree/admin/shared/_custom-alert.html.haml b/app/views/spree/admin/shared/_custom-alert.html.haml
new file mode 100644
index 0000000000..0120631e41
--- /dev/null
+++ b/app/views/spree/admin/shared/_custom-alert.html.haml
@@ -0,0 +1,8 @@
+#custom-alert.modal
+  .modal-content
+    .modal-title
+      %i.icon-warning-sign
+    .message
+    .action-buttons
+      %button.confirm
+        = t(:ok)
diff --git a/app/views/spree/admin/shared/_custom-confirm.html.haml b/app/views/spree/admin/shared/_custom-confirm.html.haml
new file mode 100644
index 0000000000..77e98b8f9a
--- /dev/null
+++ b/app/views/spree/admin/shared/_custom-confirm.html.haml
@@ -0,0 +1,11 @@
+#custom-confirm.modal
+  .modal-content
+    .modal-title
+      %i.icon-question-sign
+    .message
+      = t(:are_you_sure)
+    .action-buttons
+      %button.cancel
+        = t(:cancel)
+      %button.confirm.red
+        = t(:ok)