diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 0733f9c997..36acecac5f 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -85,7 +85,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         `}</style>
       </head>
       <body
-        className="dark:bg-darkgray-50 todesktop:!bg-transparent bg-subtle antialiased"
+        className="dark:bg-darkgray-50 bg-subtle antialiased"
         style={
           isEmbed
             ? {
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 1858f3b12f..150137f90d 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -88,7 +88,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         <body
-          className="dark:bg-darkgray-50 todesktop:!bg-transparent bg-subtle antialiased"
+          className="dark:bg-darkgray-50 bg-subtle antialiased"
           style={
             isEmbed
               ? {
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index b913516e3c..04f2711230 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -121,6 +121,10 @@ body  {
     https://docs.todesktop.com/
 */
 
+html.todesktop-platform-win32 .todesktop\:\!bg-transparent{
+  background: inherit !important;
+}
+
 /* disable user selection on buttons, links and images on desktop app */
 html.todesktop button,
 html.todesktop a,
@@ -150,6 +154,10 @@ html.todesktop header a {
   -webkit-app-region: no-drag;
 }
 
+html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside {
+  background: transparent !important;
+}
+
 html.todesktop-platform-darwin.dark main.bg-default {
   background: rgba(0, 0, 0, 0.6) !important;
 }
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 59bd05bcf9..c0f88deae7 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -891,7 +891,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
     <div className="relative">
       <aside
         style={{ maxHeight: `calc(100vh - ${bannersHeight}px)`, top: `${bannersHeight}px` }}
-        className="todesktop:!bg-transparent bg-muted border-muted fixed left-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3">
+        className="bg-muted border-muted fixed left-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3">
         <div className="flex h-full flex-col justify-between py-3 lg:pt-4">
           <header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
             {orgBranding ? (
