diff --git a/apps/web/src/components/layout/AppShell.tsx b/apps/web/src/components/layout/AppShell.tsx
index 1cccfb98b0..c1b6db9536 100644
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { StagingBanner } from '../StagingBanner';
+import { MatrixBackground } from '../MatrixBackground';
 import { AppHeader } from './AppHeader';
 import { AppSidebar } from './AppSidebar';
 import { AppFooter } from './AppFooter';
@@ -24,6 +25,7 @@ export function AppShell({ children }: AppShellProps) {
       >
         <StagingBanner variant="compact" />
         <div className="app-shell" data-testid="app-shell" style={{ height: 'auto', flex: 1 }}>
+          <MatrixBackground />
           <AppHeader />
           <AppSidebar />
           <main className="app-main">{children}</main>
@@ -35,6 +37,7 @@ export function AppShell({ children }: AppShellProps) {
 
   return (
     <div className="app-shell" data-testid="app-shell">
+      <MatrixBackground />
       <AppHeader />
       <AppSidebar />
       <main className="app-main">{children}</main>
diff --git a/apps/web/src/styles/layout.css b/apps/web/src/styles/layout.css
index dc4bf615c7..f85477642e 100644
--- a/apps/web/src/styles/layout.css
+++ b/apps/web/src/styles/layout.css
@@ -16,6 +16,7 @@
     'footer footer';
   height: 100vh;
   overflow: hidden;
+  position: relative;
   background-color: var(--color-background);
 }
 
@@ -29,8 +30,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px 24px;
-  background-color: var(--color-background);
+  background-color: rgba(0, 0, 0, 0.85);
   border-bottom: 1px solid var(--color-border-dim);
+  position: relative;
+  z-index: 2;
 }
 
 .header-left {
@@ -66,9 +69,11 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: var(--color-background);
+  background-color: rgba(0, 0, 0, 0.85);
   border-right: 1px solid var(--color-border-dim);
   overflow-y: auto;
+  position: relative;
+  z-index: 1;
 }
 
 .sidebar-nav {
@@ -145,7 +150,9 @@
 .app-main {
   grid-area: main;
   overflow-y: auto;
-  background-color: var(--color-background);
+  background-color: rgba(0, 0, 0, 0.75);
+  position: relative;
+  z-index: 1;
 }
 
 /* ==========================================================================
@@ -158,8 +165,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 8px 24px;
-  background-color: var(--color-background);
+  background-color: rgba(0, 0, 0, 0.85);
   border-top: 1px solid var(--color-border-dim);
+  position: relative;
+  z-index: 1;
 }
 
 .footer-left,