Standardized Aurora Background Across All Pages via App.jsx

Data/Engine/web-interface/src/Access_Management/Credential_List.jsx

@@ -276,7 +276,7 @@ export default function CredentialList({ isAdmin = false }) {
 
   if (!isAdmin) {
     return (
-      <Paper sx={{ m: 2, p: 3, bgcolor: "#1e1e1e" }}>
+      <Paper sx={{ m: 2, p: 3, bgcolor: "transparent" }}>
         <Typography variant="h6" sx={{ color: "#ff8080" }}>
           Access denied
         </Typography>
@@ -293,7 +293,7 @@ export default function CredentialList({ isAdmin = false }) {
         sx={{
           m: 2,
           p: 0,
-          bgcolor: "#1e1e1e",
+          bgcolor: "transparent",
           fontFamily: gridFontFamily,
           color: "#f5f7fa",
           display: "flex",

Data/Engine/web-interface/src/Access_Management/Github_API_Token.jsx

@@ -17,7 +17,7 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 const paperSx = {
   m: 2,
   p: 0,
-  bgcolor: "#1e1e1e",
+  bgcolor: "transparent",
   color: "#f5f7fa",
   display: "flex",
   flexDirection: "column",
@@ -147,7 +147,7 @@ export default function GithubAPIToken({ isAdmin = false }) {
 
   if (!isAdmin) {
     return (
-      <Paper sx={{ m: 2, p: 3, bgcolor: "#1e1e1e" }}>
+      <Paper sx={{ m: 2, p: 3, bgcolor: "transparent" }}>
         <Typography variant="h6" sx={{ color: "#ff8080" }}>
           Access denied
         </Typography>

Data/Engine/web-interface/src/Access_Management/Users.jsx

@@ -30,7 +30,7 @@ import FilterListIcon from "@mui/icons-material/FilterList";
 import { ConfirmDeleteDialog } from "../Dialogs.jsx";
 
 /* ---------- Formatting helpers to keep this page in lockstep with Device_List ---------- */
-const tablePaperSx = { m: 2, p: 0, bgcolor: "#1e1e1e" };
+const tablePaperSx = { m: 2, p: 0, bgcolor: "transparent" };
 const tableSx = {
   minWidth: 820,
   "& th, & td": {

Data/Engine/web-interface/src/Admin/Log_Management.jsx

@@ -322,7 +322,8 @@ const defaultColDef = useMemo(
         m: 0,
         p: 0,
         minHeight: "100%",
-        backgroundImage: AURORA_SHELL.background,
+        backgroundImage: "none",
+        backgroundColor: "transparent",
         borderRadius: 0,
         display: "flex",
         flexDirection: "column",

Data/Engine/web-interface/src/Admin/Page_Template.jsx

@@ -229,7 +229,7 @@ export default function PageTemplate() {
       sx={{
         m: 0,
         p: 0,
-        background: AURORA_SHELL.background,
+        background: "transparent",
         border: "none",
         boxShadow: "none",
         borderRadius: 0,

Data/Engine/web-interface/src/Admin/Server_Info.jsx

@@ -32,7 +32,7 @@ export default function ServerInfo({ isAdmin = false }) {
   if (!isAdmin) return null;
 
   return (
-    <Paper sx={{ m: 2, p: 0, bgcolor: "#1e1e1e" }} elevation={2}>
+    <Paper sx={{ m: 2, p: 0, bgcolor: "transparent" }} elevation={2}>
       <Box sx={{ p: 2 }}>
         <Typography variant="h6" sx={{ color: "#58a6ff", mb: 1 }}>Server Info</Typography>
         <Typography sx={{ color: '#aaa', mb: 1 }}>Basic server information will appear here for informative and debug purposes.</Typography>

Data/Engine/web-interface/src/App.jsx

@@ -95,6 +95,11 @@ const darkTheme = createTheme({
   }
 });
 
+const APP_AURORA_BACKGROUND =
+  "radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), " +
+  "radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), " +
+  "linear-gradient(180deg, #040711 0%, #050816 45%, #050816 100%)";
+
 const LOCAL_STORAGE_KEY = "borealis_persistent_state";
 
   export default function App() {
@@ -1333,7 +1338,19 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-      <Box sx={{ width: "100vw", height: "100vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <Box
+        sx={{
+          width: "100vw",
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          background: APP_AURORA_BACKGROUND,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover",
+          backgroundColor: "#040711",
+        }}
+      >
         {/* Aurora Gradient Header (darker near the logo, brighter to the right) */}
           <AppBar
             position="static"
@@ -1451,7 +1468,18 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
             </Toolbar>
           </AppBar>
 
-        <Box sx={{ display: "flex", flexGrow: 1, overflow: "auto", minHeight: 0 }}>
+        <Box
+          sx={{
+            display: "flex",
+            flexGrow: 1,
+            overflow: "auto",
+            minHeight: 0,
+            background: APP_AURORA_BACKGROUND,
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundColor: "#040711",
+          }}
+        >
           <NavigationSidebar currentPage={currentPage} onNavigate={navigateTo} isAdmin={isAdmin} />
           <Box
             sx={{

Data/Engine/web-interface/src/Assemblies/Assembly_List.jsx

@@ -588,8 +588,7 @@ export default function AssemblyList({ onOpenWorkflow, onOpenScript, userRole =
       sx={{
         m: 0, // Full-bleed to parent container
         p: 0,
-        background:
+        background: "transparent",
-          "radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), #040711",
         border: "none",
         boxShadow: "none",
         borderRadius: 0,

Data/Engine/web-interface/src/Devices/Device_Approvals.jsx

@@ -415,7 +415,7 @@ export default function DeviceApprovals() {
         height: "100%",
         borderRadius: 0,
         border: `1px solid ${MAGIC_UI.panelBorder}`,
-        background: MAGIC_UI.shellBg,
+        background: "transparent",
         boxShadow: "0 25px 80px rgba(6, 12, 30, 0.8)",
         overflow: "hidden",
       }}

Data/Engine/web-interface/src/Devices/Device_Details.jsx

@@ -1510,7 +1510,7 @@ export default function DeviceDetails({ device, onBack, onQuickJobLaunch }) {
         m: 0,
         p: { xs: 2, md: 3 },
         borderRadius: 0,
-        background: MAGIC_UI.shellBg,
+        background: "transparent",
         border: `1px solid ${MAGIC_UI.panelBorder}`,
         boxShadow: MAGIC_UI.glow,
         display: "flex",

Data/Engine/web-interface/src/Devices/Device_List.jsx

@@ -1578,7 +1578,7 @@ export default function DeviceList({
         height: "100%",
         borderRadius: 0,
         border: `1px solid ${MAGIC_UI.panelBorder}`,
-        background: MAGIC_UI.shellBg,
+        background: "transparent",
         boxShadow: MAGIC_UI.glow,
         position: "relative",
         overflow: "hidden",

Data/Engine/web-interface/src/Devices/Filters/Filter_Editor.jsx

@@ -33,7 +33,8 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 const AURORA_SHELL = {
   background:
     "radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), " +
-    "radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), #040711",
+    "radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), " +
+    "linear-gradient(180deg, #040711 0%, #050816 45%, #050816 100%)",
   text: "#e2e8f0",
   subtext: "#94a3b8",
   border: "rgba(148,163,184,0.35)",
@@ -402,13 +403,9 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
                 display: "inline-flex",
                 alignItems: "center",
                 gap: 0.75,
-                px: 1.5,
-                py: 0.4,
-                borderRadius: 999,
-                backgroundColor: theme.background,
                 color: theme.color,
-                fontWeight: 600,
+                fontWeight: 700,
-                fontSize: "0.9rem",
+                fontSize: "0.95rem",
               }}
             >
               <Icon sx={{ fontSize: 18 }} />
@@ -758,14 +755,14 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
       elevation={0}
       sx={{
         minHeight: "100vh",
-        background: AURORA_SHELL.background,
+        backgroundColor: "transparent",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 520px",
-        backgroundAttachment: "scroll",
-        backgroundColor: "#040711",
         color: AURORA_SHELL.text,
         p: 3,
         borderRadius: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        pb: 6,
       }}
     >
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 3 }}>
@@ -852,6 +849,7 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
             display: "flex",
             flexDirection: "column",
             gap: 2.75,
+            flex: 1,
           }}
         >
         <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>

Data/Engine/web-interface/src/Devices/Filters/Filter_List.jsx

@@ -123,21 +123,14 @@ function FilterTypePill({ type }) {
   const meta = FILTER_TYPE_META[key];
   return (
     <Box
+      component="span"
       sx={{
         display: "inline-flex",
         alignItems: "center",
-        px: 1.1,
+        fontWeight: 700,
-        py: 0.25,
+        fontSize: "0.9rem",
-        borderRadius: 8,
-        minWidth: 58,
-        justifyContent: "center",
-        fontWeight: 600,
-        fontSize: "0.72rem",
         letterSpacing: 0.2,
         color: meta.textColor,
-        border: `1px solid ${meta.borderColor}`,
-        backgroundColor: meta.backgroundColor,
-        textTransform: "none",
       }}
     >
       {meta.label}
@@ -326,7 +319,7 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
       sx={{
         height: "100vh",
         minHeight: "100vh",
-        background: AURORA_SHELL.background,
+        backgroundColor: "transparent",
         color: AURORA_SHELL.text,
         p: 3,
         borderRadius: 0,

Data/Engine/web-interface/src/Devices/SSH_Devices.jsx

@@ -230,7 +230,7 @@ export default function SSHDevices({ type = "ssh" }) {
   };
 
   return (
-    <Paper sx={{ m: 2, p: 0, bgcolor: "#1e1e1e" }} elevation={2}>
+    <Paper sx={{ m: 2, p: 0, bgcolor: "transparent" }} elevation={2}>
       <Box
         sx={{
           display: "flex",

Data/Engine/web-interface/src/Scheduling/Create_Job.jsx

@@ -2862,7 +2862,7 @@ const heroTiles = useMemo(() => {
         flexDirection: "column",
         gap: 3,
         borderRadius: 0,
-        background: MAGIC_UI.shellBg,
+        background: "transparent",
         border: `1px solid ${MAGIC_UI.panelBorder}`,
         boxShadow: MAGIC_UI.glow,
       }}

Data/Engine/web-interface/src/Scheduling/Scheduled_Jobs_List.jsx

@@ -699,7 +699,7 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
       sx={{
         m: 0,
         p: 0,
-        background: AURORA_SHELL.background,
+        background: "transparent",
         border: "none",
         boxShadow: "none",
         borderRadius: 0,

Data/Engine/web-interface/src/Sites/Site_List.jsx

@@ -217,7 +217,7 @@ export default function SiteList({ onOpenDevicesForSite }) {
         height: "100%",
         borderRadius: 0,
         border: `1px solid ${MAGIC_UI.panelBorder}`,
-        background: MAGIC_UI.shellBg,
+        background: "transparent",
         boxShadow: "0 25px 80px rgba(6, 12, 30, 0.8)",
         overflow: "hidden",
       }}