diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 958cc197d..909cdbc83 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,3 +1,4 @@
+@use '../../variables/sizing';
 @use '../../variables/media';
 
 .rose-layout-page {
@@ -6,7 +7,7 @@
     'header header header header'
     'sidebar main main main';
   // Define static grid column for sidebar
-  grid-template-columns: 12rem auto 1fr;
+  grid-template-columns: 16rem auto 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
 }
@@ -21,6 +22,7 @@
 
 .rose-layout-sidebar {
   grid-area: sidebar;
+  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
 }
 
 @media (max-width: media.width(small)) {
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index d7fe5dd9a..a771edd48 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -1,8 +1,10 @@
+@use 'rose/variables/sizing';
+
 @import 'rose';
 
 .projects-overview {
-  margin: 0 10px;
-
+  margin: sizing.rems(l);
+  
   .projects {
     display: flex;
     padding: 20px 0;
@@ -19,7 +21,8 @@
 
 .project-overview,
 .project-new {
-  margin: 0 10px;
+  margin: sizing.rems(l);
+
   .breadcrumbs,
   .breadcrumbs a {
     color: #6f7682;