diff --git a/src/app.scss b/src/app.scss
index 9240ba5b..a1c397fe 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -10,7 +10,7 @@
 html {
 	background-color: var(--background);
 	font-size: 62.5%;
-	// height: 100%;
+	height: 100%;
 }
 
 body {
@@ -19,6 +19,8 @@ body {
 	font-family: var(--font-family);
 	font-size: 1.4rem;
 	height: 100%;
+	margin: 0;
+	overflow: hidden; // Prevent body scroll since we handle scrolling in layout
 
 	&.no-scroll {
 		overflow: hidden;
@@ -31,20 +33,24 @@ ul {
 	list-style: none;
 }
 
-main {
-	max-width: var(--main-max-width);
-	margin: 0 auto;
-	width: 100%;
-	transition: max-width 0.3s ease;
+// Main content styling - now applied within the scrollable container
+.main-content {
+	> * {
+		max-width: var(--main-max-width);
+		margin: 0 auto;
+		width: 100%;
+		padding: 0 spacing.$unit-2x; // Only horizontal padding, vertical handled by layout
+		transition: max-width 0.3s ease;
 
-	// Responsive padding for smaller screens
-	@media (max-width: 768px) {
-		padding: 0 spacing.$unit;
-	}
+		// Responsive padding for smaller screens
+		@media (max-width: 768px) {
+			padding: 0 spacing.$unit;
+		}
 
-	// Wider layout for database pages
-	&.database-layout {
-		max-width: 1400px;
+		// Wider layout for database pages
+		&.database-layout {
+			max-width: 1400px;
+		}
 	}
 }
 
diff --git a/src/themes/_effects.scss b/src/themes/_effects.scss
index 23ccf941..9f42b345 100644
--- a/src/themes/_effects.scss
+++ b/src/themes/_effects.scss
@@ -7,8 +7,9 @@ $card-border: 0.5px solid rgba(0, 0, 0, 0.18);
 
 // Elevation
 $page-elevation: 0 0 4px rgba(0, 0, 0, 0.06);
-$dialog-elevation: 0 1px 8px rgba(0, 0, 0, 0.16);
-$card-elevation: 0 1px 3px rgba(0, 0, 0, 0.1);
+$dialog-elevation: 0 0 12px rgba(0, 0, 0, 0.16);
+$card-elevation: 0 0 4px rgba(0, 0, 0, 0.12);
+$card-elevation-hover: 0 0 8px rgba(0, 0, 0, 0.12);
 
 // Shadows
 $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/src/themes/themes.scss b/src/themes/themes.scss
index 6a8aa121..a6ae0c95 100644
--- a/src/themes/themes.scss
+++ b/src/themes/themes.scss
@@ -30,6 +30,7 @@
 	--spacing-2xl: #{spacing.$unit-14x};
 
 	--background: #{colors.$page--bg--light};
+	--background-rgb: 245, 245, 245; // RGB values for grey-90
 	--page-hover: #{colors.$page--hover--light};
 
 	--grid-rep-hover: #{colors.$grid--rep--hover--light};
@@ -280,6 +281,7 @@
 
 [data-theme='dark'] {
 	--background: #{colors.$page--bg--dark};
+	--background-rgb: 25, 25, 25; // RGB values for grey-15
 	--page-hover: #{colors.$page--hover--dark};
 
 	--grid-rep-hover: #{colors.$grid--rep--hover--dark};