diff --git a/Data/Engine/web-interface/src/Devices/Device_Approvals.jsx b/Data/Engine/web-interface/src/Devices/Device_Approvals.jsx
index 92209224..ceb0dd91 100644
--- a/Data/Engine/web-interface/src/Devices/Device_Approvals.jsx
+++ b/Data/Engine/web-interface/src/Devices/Device_Approvals.jsx
@@ -275,7 +275,8 @@ export default function DeviceApprovals() {
           : "#fbbf24";
         return <span style={{ color, fontWeight: 600 }}>{status}</span>;
       },
-      width: 120,
+      minWidth: 110,
+      width: 110,
     },
     { headerName: "Hostname", field: "hostname_claimed", minWidth: 180 },
     {
@@ -283,20 +284,23 @@ export default function DeviceApprovals() {
       field: "ssl_key_fingerprint_claimed",
       valueFormatter: (p) => formatFingerprint(p.value),
       cellStyle: { fontFamily: "monospace", whiteSpace: "nowrap" },
-      minWidth: 200,
+      minWidth: 150,
+      Width: 150,
     },
     {
       headerName: "Enrollment Code",
       field: "enrollment_code_id",
       cellStyle: { fontFamily: "monospace" },
-      minWidth: 140,
+      minWidth: 100,
+      Width: 100,
     },
     { headerName: "Created", field: "created_at", valueFormatter: (p) => formatDateTime(p.value), minWidth: 160 },
     { headerName: "Updated", field: "updated_at", valueFormatter: (p) => formatDateTime(p.value), minWidth: 160 },
     {
       headerName: "Approved By",
       valueGetter: (p) => p.data?.approved_by_username || p.data?.approved_by_user_id || "—",
-      minWidth: 140,
+      minWidth: 100,
+      Width: 100,
     },
     {
       headerName: "Actions",
diff --git a/Data/Engine/web-interface/src/Devices/Enrollment_Codes.jsx b/Data/Engine/web-interface/src/Devices/Enrollment_Codes.jsx
index 5a9e4bc3..1ab6efc3 100644
--- a/Data/Engine/web-interface/src/Devices/Enrollment_Codes.jsx
+++ b/Data/Engine/web-interface/src/Devices/Enrollment_Codes.jsx
@@ -183,7 +183,7 @@ export default function EnrollmentCodes() {
           "#fbbf24";
         return <span style={{ color, fontWeight: 600 }}>{status}</span>;
       },
-      width: 120
+      minWidth: 100
     },
     {
       headerName: "Installer Code",
@@ -191,9 +191,12 @@ export default function EnrollmentCodes() {
       cellRenderer: (params) => (
         <span style={{ fontFamily: "monospace", color: "#7dd3fc" }}>{maskCode(params.value)}</span>
       ),
-      minWidth: 200
+      minWidth: 340
+    },
+    { headerName: "Expires At", 
+      field: "expires_at", 
+      valueFormatter: p => formatDateTime(p.value)  
     },
-    { headerName: "Expires At", field: "expires_at", valueFormatter: p => formatDateTime(p.value) },
     { headerName: "Created By", field: "created_by_user_id" },
     {
       headerName: "Usage",
diff --git a/Data/Engine/web-interface/src/Login.jsx b/Data/Engine/web-interface/src/Login.jsx
index 244eb113..231382ec 100644
--- a/Data/Engine/web-interface/src/Login.jsx
+++ b/Data/Engine/web-interface/src/Login.jsx
@@ -1,15 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { Box, TextField, Button, Typography } from "@mui/material";
 
-/**
- * Borealis MagicUI Login
- * - Preserves original auth + MFA logic
- * - Adds MagicUI-inspired visuals:
- *    • Aurora gradient background
- *    • Flickering Grid backdrop
- *    • ShineBorder card container
- * - Minimal, component-local CSS (no external deps)
- */
 export default function Login({ onLogin }) {
   // ----------------- Original state & logic -----------------
   const [username, setUsername] = useState("admin");
@@ -258,7 +249,7 @@ export default function Login({ onLogin }) {
               rgba(88,166,255,.0),
               rgba(88,166,255,.45),
               rgba(34,211,238,.0),
-              rgba(167,139,250,.45),
+              rgba(125, 255, 183, 0.3),
               rgba(34,211,238,.0),
               rgba(88,166,255,.45),
               rgba(167,139,250,.0));
@@ -369,7 +360,7 @@ export default function Login({ onLogin }) {
               sx={{ display: "flex", flexDirection: "column", gap: 1 }}
             >
               <div className="brand">
-                <img src="/Borealis_Logo_Full.png" alt="Borealis Automation" style={{ width: "345px", height: "auto" }} />
+                <img src="/Borealis_Logo_Full.png" alt="Borealis Automation" style={{ width: "480px", height: "auto" }} />
               </div>
 
               <Typography variant="h5" className="title">
@@ -386,7 +377,6 @@ export default function Login({ onLogin }) {
                     value={username}
                     disabled={isSubmitting}
                     onChange={(e) => setUsername(e.target.value)}
-                    margin="dense"
                     InputProps={{ sx: { borderRadius: 2 } }}
                   />
 
@@ -398,7 +388,6 @@ export default function Login({ onLogin }) {
                     value={password}
                     disabled={isSubmitting}
                     onChange={(e) => setPassword(e.target.value)}
-                    margin="dense"
                     InputProps={{ sx: { borderRadius: 2 } }}
                   />
 
@@ -410,7 +399,7 @@ export default function Login({ onLogin }) {
                     className="submit"
                     disabled={isSubmitting}
                   >
-                    {isSubmitting ? "Signing In..." : "Sign in"}
+                    {isSubmitting ? "Signing In..." : "Sign In"}
                   </Button>
                 </>
               ) : (
@@ -459,7 +448,6 @@ export default function Login({ onLogin }) {
                       setMfaCode(digits);
                     }}
                     disabled={isSubmitting}
-                    margin="dense"
                     inputProps={{
                       inputMode: "numeric",
                       pattern: "[0-9]*",