diff --git a/web/src/App.tsx b/web/src/App.tsx
index e6d986f..816db3c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -70,18 +70,18 @@ function App() {
 	</div> : null
 
 	if (connState?.error && !afterConnectError) {
-		return errorOverlay
+		return <div className="pre-main">{errorOverlay}</div>
 	} else if ((!connState?.connected && !afterConnectError) || !clientState) {
 		const msg = connState?.connected ?
 			"Waiting for client state..." : "Connecting to backend..."
-		return <div className="pre-connect">
+		return <div className="pre-main waiting-to-connect">
 			<ScaleLoader width="2rem" height="2rem" color="var(--primary-color)"/>
 			{msg}
 		</div>
 	} else if (!clientState.is_logged_in) {
-		return <LoginScreen client={client} clientState={clientState}/>
+		return <div className="pre-main"><LoginScreen client={client} clientState={clientState}/></div>
 	} else if (!clientState.is_verified) {
-		return <VerificationScreen client={client} clientState={clientState}/>
+		return <div className="pre-main"><VerificationScreen client={client} clientState={clientState}/></div>
 	} else {
 		return <ClientContext value={client}>
 			<LightboxWrapper>
diff --git a/web/src/index.css b/web/src/index.css
index 48a3a6e..6517adc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -158,7 +158,7 @@ body {
 	font-family: var(--font-stack);
 	margin: 0;
 	padding: 0;
-	background-color: var(--login-background-color);
+	background-color: var(--background-color);
 	line-height: 1.5;
 	font-size: 16px;
 	touch-action: none;
@@ -248,9 +248,15 @@ div.connection-error-wrapper {
 	}
 }
 
-div.pre-connect {
-	margin-top: 2rem;
-	text-align: center;
+div.pre-main {
+	position: fixed;
+	inset: 0;
+	background-color: var(--login-background-color);
+
+	&.waiting-to-connect {
+		padding-top: 2rem;
+		text-align: center;
+	}
 }
 
 a {