diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
index ec0ee6c8b..5cd2052f0 100644
--- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
+++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
@@ -242,6 +242,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
+  // Apply dark style overrides to scrollbar when system is in dark mode and app theme is not set to light
+  html:has(.ember-application:not(.rose-theme-light)) {
+    scrollbar-color: var(--token-color-palette-neutral-400)
+      var(--token-color-palette-neutral-600);
+  }
+
   .ember-application:not(.rose-theme-light) {
     @include dark-mode;
     @include dark-mode-modal-override;
@@ -252,6 +258,12 @@
   }
 }
 
+// Apply dark style overrides to scrollbar when app theme is set to dark regardless of system theme
+html:has(.ember-application.rose-theme-dark) {
+  scrollbar-color: var(--token-color-palette-neutral-400)
+    var(--token-color-palette-neutral-600);
+}
+
 .ember-application.rose-theme-dark {
   @include dark-mode;
   @include dark-mode-modal-override;
diff --git a/addons/rose/app/styles/rose/components/layout/_page.scss b/addons/rose/app/styles/rose/components/layout/_page.scss
index 367d97bfd..862d83717 100644
--- a/addons/rose/app/styles/rose/components/layout/_page.scss
+++ b/addons/rose/app/styles/rose/components/layout/_page.scss
@@ -12,7 +12,7 @@
     'header header header'
     'navigation navigation navigation'
     'body body body';
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, auto);
   grid-template-rows: auto 1fr;
 
   .rose-layout-page-header {
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index f2664d71b..d5e121afa 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -335,7 +335,6 @@
       background: transparent;
       border: transparent;
       color: var(--white);
-      margin: sizing.rems(xs);
     }
 
     .button-window-close {