diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
index 5aa9cc3d..e54c37a6 100644
--- a/packages/dito/app/root.tsx
+++ b/packages/dito/app/root.tsx
@@ -299,7 +299,7 @@ export default function App() {
         />
       }
     >
-      <main className="grow">
+      <main className="grow [&:has(.main-bg-blue)]:bg-blue-100">
         <Outlet context={{ featureFlags }} />
       </main>
     </Document>
diff --git a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
index 97aa8257..ac8a59ec 100644
--- a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
+++ b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
@@ -154,7 +154,7 @@ export default function Index() {
   );
 
   return (
-    <div className="flex bg-blue-100 sm:pt-32">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation question={question} answers={answers ?? {}} />
       </div>
diff --git a/packages/dito/app/routes/vorpruefung.hinweise.tsx b/packages/dito/app/routes/vorpruefung.hinweise.tsx
index 31d88081..1ddbbb4d 100644
--- a/packages/dito/app/routes/vorpruefung.hinweise.tsx
+++ b/packages/dito/app/routes/vorpruefung.hinweise.tsx
@@ -26,7 +26,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function GeneralInfo() {
   const { answers } = useLoaderData<typeof loader>();
   return (
-    <div className="flex grow bg-blue-100 sm:pt-32 w-full h-full">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation answers={answers ?? {}} />
       </div>