diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 36f18c230a..35267ad5cb 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -7,7 +7,7 @@ function ErrorPage() {
   };
 
   return (
-    <div className="grid h-screen place-items-center p-4">
+    <div className="bg-surface-1 grid h-screen place-items-center p-4">
       <div className="space-y-8 text-center">
         <div className="space-y-2">
           <h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3>
diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index e32b008a24..79f2f7e3ea 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -114,7 +114,7 @@ function IssuesLayout(props: Route.ComponentProps) {
 
   if (!publishSettings && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="bg-surface-1 flex items-center justify-center h-screen w-full">
         <LogoSpinner />
       </div>
     );
diff --git a/apps/space/app/not-found.tsx b/apps/space/app/not-found.tsx
index 411859ac04..2ae119c39e 100644
--- a/apps/space/app/not-found.tsx
+++ b/apps/space/app/not-found.tsx
@@ -3,9 +3,9 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 function NotFound() {
   return (
-    <div className="h-screen w-screen grid place-items-center">
+    <div className="h-screen w-screen grid place-items-center bg-surface-1">
       <div className="text-center">
-        <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1">
+        <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full">
           <div className="size-16 md:size-32 grid place-items-center">
             <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
           </div>
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index 4b473b566b..6f58126ed1 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -29,7 +29,7 @@ const HomePage = observer(function HomePage() {
 
   if (isInitializing)
     return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+      <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
         <LogoSpinner />
       </div>
     );
@@ -37,7 +37,7 @@ const HomePage = observer(function HomePage() {
   if (currentUser && isAuthenticated) {
     if (nextPath && isValidNextPath(nextPath)) {
       return (
-        <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
           <LogoSpinner />
         </div>
       );
diff --git a/apps/space/app/root.tsx b/apps/space/app/root.tsx
index a7f04af7d6..ad5e8fff22 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -72,7 +72,7 @@ export default function Root() {
 
 export function HydrateFallback() {
   return (
-    <div className="relative flex h-screen w-full items-center justify-center">
+    <div className="bg-surface-1 relative flex h-screen w-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/core/components/common/powered-by.tsx
index 2edac37818..824cad483c 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/core/components/common/powered-by.tsx
@@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
   return (
     <a
       href={WEBSITE_URL}
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
       target="_blank"
       rel="noreferrer noopener"
     >
diff --git a/apps/space/core/components/issues/issue-layouts/error.tsx b/apps/space/core/components/issues/issue-layouts/error.tsx
index a0c5697ff1..8ae86f1ba9 100644
--- a/apps/space/core/components/issues/issue-layouts/error.tsx
+++ b/apps/space/core/components/issues/issue-layouts/error.tsx
@@ -3,9 +3,9 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
 export function SomethingWentWrongError() {
   return (
-    <div className="grid min-h-screen w-full place-items-center p-6">
+    <div className="bg-surface-1 grid min-h-screen w-full place-items-center p-6">
       <div className="text-center">
-        <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-layer-1">
+        <div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
           <div className="grid h-32 w-32 place-items-center">
             <img
               src={SomethingWentWrongImage}
diff --git a/apps/space/core/components/views/auth.tsx b/apps/space/core/components/views/auth.tsx
index 04b11626d6..3fdf137356 100644
--- a/apps/space/core/components/views/auth.tsx
+++ b/apps/space/core/components/views/auth.tsx
@@ -6,7 +6,7 @@ import { AuthHeader } from "./header";
 
 export function AuthView() {
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="bg-surface-1 relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
       <AuthHeader />
       <AuthRoot />
       <PoweredBy />