diff --git a/apps/builder/app/builder/builder.css b/apps/builder/app/builder/builder.css
index e54f2470a2fa..31ddefad6587 100644
--- a/apps/builder/app/builder/builder.css
+++ b/apps/builder/app/builder/builder.css
@@ -6,6 +6,11 @@ body {
   overflow: hidden;
   overscroll-behavior: contain;
   -webkit-font-smoothing: antialiased;
+  /* 
+    This is the top bar and loading screen color (--colors-backgroundTopbar).
+    We are setting it to avoid a white screen flash when opening project from the dashboard.
+   */
+  background-color: #2d2d2d;
 }
 
 [data-radix-scroll-area-viewport] {
diff --git a/apps/builder/app/builder/builder.tsx b/apps/builder/app/builder/builder.tsx
index 09531cca14c5..fe53df9ac7b5 100644
--- a/apps/builder/app/builder/builder.tsx
+++ b/apps/builder/app/builder/builder.tsx
@@ -100,7 +100,7 @@ const SidePanel = ({
         fg: 0,
         // Left sidebar tabs won't be able to pop out to the right if we set overflowX to auto.
         //overflowY: "auto",
-        bc: theme.colors.backgroundPanel,
+        backgroundColor: theme.colors.backgroundPanel,
         height: "100%",
         ...css,
       }}
@@ -403,7 +403,6 @@ export const Builder = ({
                     ? false
                     : true
                 }
-                backgroundColor={theme.colors.backgroundTopbar}
               />
             }
           />
diff --git a/apps/builder/app/builder/shared/loading.tsx b/apps/builder/app/builder/shared/loading.tsx
index e42c0978cf10..56072b20babe 100644
--- a/apps/builder/app/builder/shared/loading.tsx
+++ b/apps/builder/app/builder/shared/loading.tsx
@@ -5,11 +5,9 @@ import { useInterval } from "~/shared/hook-utils/use-interval";
 
 export const LoadingBackground = ({
   show,
-  backgroundColor,
   onTransitionEnd,
 }: {
   show: boolean;
-  backgroundColor: string;
   onTransitionEnd?: () => void;
 }) => {
   const [transitionEnded, setTransitionEnded] = useState(false);
@@ -26,7 +24,7 @@ export const LoadingBackground = ({
         transitionDuration: "300ms",
         pointerEvents: "none",
         transitionProperty: "opacity",
-        backgroundColor,
+        backgroundColor: theme.colors.backgroundTopbar,
         opacity: show ? 1 : 0,
         isolation: "isolate",
       }}
@@ -83,7 +81,6 @@ export const Loading = ({ state }: { state: LoadingState }) => {
     >
       <LoadingBackground
         show={state.state !== "ready"}
-        backgroundColor={theme.colors.backgroundCanvas}
         onTransitionEnd={() => {
           setTransitionEnded(true);
         }}
@@ -96,10 +93,7 @@ export const Loading = ({ state }: { state: LoadingState }) => {
           gap="3"
           css={{ isolation: "isolate" }}
         >
-          <WebstudioIcon
-            size={60}
-            style={{ filter: "drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7))" }}
-          />
+          <WebstudioIcon size={60} />
           <Progress value={fakeProgress} />
         </Flex>
       )}
diff --git a/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx b/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx
index b302a3d79836..2449ce2b87f5 100644
--- a/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx
+++ b/apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx
@@ -104,7 +104,7 @@ export const SidebarTabsContent = styled(TabsContent, {
   top: 0,
   left: "100%",
   height: "100%",
-  bc: theme.colors.backgroundPanel,
+  backgroundColor: theme.colors.backgroundPanel,
   outline: "none",
   // Drawing border this way to ensure content still has full width, avoid subpixels and give layout round numbers
   "&::after": {
diff --git a/apps/builder/app/dashboard/header.tsx b/apps/builder/app/dashboard/header.tsx
index d3edd80be0a1..9474e644d7ee 100644
--- a/apps/builder/app/dashboard/header.tsx
+++ b/apps/builder/app/dashboard/header.tsx
@@ -27,7 +27,7 @@ import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 
 const containerStyle = css({
   px: theme.spacing[13],
-  bc: theme.colors.backgroundPanel,
+  backgroundColor: theme.colors.backgroundPanel,
   height: theme.spacing[15],
   boxShadow: theme.shadows.brandElevationBig,
 });
diff --git a/packages/design-system/src/components/list-position-indicator.tsx b/packages/design-system/src/components/list-position-indicator.tsx
index 4975dbdd7605..58c64ff33e8a 100644
--- a/packages/design-system/src/components/list-position-indicator.tsx
+++ b/packages/design-system/src/components/list-position-indicator.tsx
@@ -27,7 +27,7 @@ const CircleOutline = styled(Box, {
   left: -CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
   borderRadius: "50%",
   pointerEvents: "none",
-  bc: theme.colors.borderContrast,
+  backgroundColor: theme.colors.borderContrast,
 });
 
 const Circle = styled(Box, {