diff --git a/gadget-code/frontend/src/pages/SignIn.tsx b/gadget-code/frontend/src/pages/SignIn.tsx
index 6fa2684..fd30e1e 100644
--- a/gadget-code/frontend/src/pages/SignIn.tsx
+++ b/gadget-code/frontend/src/pages/SignIn.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { api, AuthResponse, User } from '../lib/api';
+import GadgetGrid from '../components/GadgetGrid';
 
 interface SignInProps {
   onSuccess: (user: User, token: string) => void;
@@ -27,58 +28,79 @@ export default function SignIn({ onSuccess }: SignInProps) {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-bg-primary">
-      <div className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
-        {error && (
-          <div className="mb-4 p-3 bg-red-900/30 border border-red-700 rounded-lg text-red-200">
-            {error}
+    <div className="relative flex-1 flex bg-bg-primary overflow-hidden">
+      <div className="absolute inset-0">
+        <GadgetGrid />
+      </div>
+      <div className="relative z-10 flex items-center justify-center p-8">
+        <div className="w-full max-w-md">
+          <div className="border-2 border-border-default p-6 rounded bg-bg-secondary">
+            <div className="font-mono text-text-secondary text-sm">
+              <div className="mb-1 text-text-muted">// AUTHENTICATION REQUIRED</div>
+              <div className="mb-6 text-text-primary">SYSTEM ACCESS</div>
+              
+              <div className="text-text-muted mb-6">
+                Accounts are administered. Contact your administrator for access.
+              </div>
+
+              {error && (
+                <div className="mb-4 p-3 border border-red-800 rounded bg-red-950/50">
+                  <div className="text-red-400 font-mono text-sm">
+                    <span className="text-text-muted">// ERROR: </span>
+                    {error}
+                  </div>
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label htmlFor="email" className="block text-sm text-text-muted mb-1 font-mono">
+                    email_address
+                  </label>
+                  <input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary font-mono focus:outline-none focus:border-border-highlight"
+                    required
+                    autoComplete="email"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="block text-sm text-text-muted mb-1 font-mono">
+                    password_hash
+                  </label>
+                  <input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary font-mono focus:outline-none focus:border-border-highlight"
+                    required
+                    autoComplete="current-password"
+                  />
+                </div>
+                <div className="flex gap-4 pt-4">
+                  <Link
+                    to="/"
+                    className="flex-1 px-4 py-2 text-center border border-border-highlight text-text-primary hover:bg-bg-tertiary rounded transition-colors font-mono text-sm"
+                  >
+                    CANCEL
+                  </Link>
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded transition-colors disabled:opacity-50 font-mono text-sm"
+                  >
+                    {loading ? 'VERIFYING...' : 'AUTHENTICATE'}
+                  </button>
+                </div>
+              </form>
+            </div>
           </div>
-        )}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="email" className="block text-sm text-text-muted mb-1">
-              Email Address
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="password" className="block text-sm text-text-muted mb-1">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
-              required
-            />
-          </div>
-          <div className="flex gap-4 pt-2">
-            <Link
-              to="/"
-              className="flex-1 px-4 py-2 text-center border border-border-default rounded-lg hover:bg-bg-tertiary transition-colors"
-            >
-              Cancel
-            </Link>
-            <button
-              type="submit"
-              disabled={loading}
-              className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded-lg transition-colors disabled:opacity-50"
-            >
-              {loading ? 'Signing in...' : 'Sign In'}
-            </button>
-          </div>
-         </form>
-       </div>
-     </div>
-   );
- }
\ No newline at end of file
+        </div>
+      </div>
+    </div>
+  );
+}