diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index df84658..8c8d2a7 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -20,6 +20,11 @@ body {
   padding: var(--gutter);
 }
 
+/* Scrollbar */
+* {
+  scrollbar-color: hsla(180, 1%, 51%, .7) transparent;
+}
+
 /* If an element is [hidden] it needs to be max priority */
 .hidden, [hidden] {
   display: none !important;
diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css
index 4508773..51008d0 100644
--- a/src/assets/css/src/2.blocks.design-to-light.css
+++ b/src/assets/css/src/2.blocks.design-to-light.css
@@ -155,7 +155,7 @@
   max-width: 25rem;
   top: 0;
   bottom: 0;
-  margin-block: auto;
+  margin-top: var(--gutter);
   z-index: 9999;
 }
 #dtl-panel > header {
diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index bd44dd9..3293d5c 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -1,8 +1,8 @@
 /* DIALOG BLOCK */
 
 .dialog {
-  --dialog-max-w: min(100vw - var(--gutter) * 2, 77rem);
-  --dialog-max-h: min(100vh - var(--gutter) * 2, 50rem);
+  --dialog-max-w: calc(100vw - var(--gutter) * 2);
+  --dialog-max-h: calc(100vh - var(--gutter) * 2);
   --dialog-header-h: 4.5rem;
   --dialog-footer-h: 4.5rem;
   --dialog-comments-w: 22.5rem;
@@ -15,14 +15,13 @@
   border-radius: var(--rounded-2xl);
   overflow: hidden;
   background: var(--dialog-background);
-  margin: auto !important;
-  left: var(--gutter);
-  right: var(--gutter);
+  margin: auto;
 }
 
 .dialog.with-dtl {
-  --dialog-max-w: min(100vw - var(--gutter) * 2 - 26rem, 77rem);
-  margin-right: 30rem !important;
+  --dialog-max-w: calc(100vw - var(--gutter) * 2 - 27rem);
+  margin-right: 29rem;
+  margin-left: var(--gutter);
 }
 
 /* Header */