diff --git a/ui/wolf.ui.css b/ui/wolf.ui.css
index 2c65e07..ad42446 100644
--- a/ui/wolf.ui.css
+++ b/ui/wolf.ui.css
@@ -31,24 +31,28 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: #00000040;
+    background: rgba(0, 0, 0, 0.251);
     z-index: 10000;
 }
 
-.wolf-dialog {
+.wolf-dialog-row {
     position: fixed;
-    left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 0.1rem 0.25rem #000000A0;
+    transform: translate(0, -50%);
+    width: 100%;
+}
+
+.wolf-dialog {
+    position: relative;
+    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.627);
     border-radius: 0.2rem;
     padding: 1rem;
     background-color: white;
-    /* z-index: 1000; */
     overflow: hidden;
     max-height: 95%;
     max-width: 95%;
-    display:flex;
+    width: fit-content;
+    margin: 0 auto;
 }
 
 .wolf-dialog-message-text {
diff --git a/ui/wolf.ui.js b/ui/wolf.ui.js
index 8b45355..b6e938d 100755
--- a/ui/wolf.ui.js
+++ b/ui/wolf.ui.js
@@ -42,12 +42,15 @@
             } else
                 base = element;
 
+            // Create dialog row
+            var dialog_row=UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog-row", $controller: controller }), { parent: base })[0];
+            base.appendChild(dialog_row);
             // Create dialog frame
             var dialog = UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog", $controller: controller }), { parent: base })[0];
-            base.appendChild(dialog);
+            dialog_row.appendChild(dialog);
 
             dialog.close = function () {
-                element.removeChild((modal ? modalWall : dialog));
+                element.removeChild((modal ? modalWall : dialog_row));
                 controller && controller.close && controller.close();
                 onClose && onClose(dialog.dialogController.result);
             };