diff --git a/frontend/public/assets/logo-veridian.jpg b/frontend/public/assets/logo-veridian.jpg
new file mode 100644
index 0000000..24d4e4e
Binary files /dev/null and b/frontend/public/assets/logo-veridian.jpg differ
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 635dd13..d2dcab8 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -36,10 +36,10 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="min-h-screen bg-[var(--color-bg-primary)] text-slate-100 flex overflow-hidden font-sans selection:bg-[var(--color-primary)]/30">
+        <div className="min-h-screen bg-[var(--color-bg-primary)] flex overflow-hidden font-sans selection:bg-[var(--color-primary)]/30">
             {/* Left Side: Brand/Visual */}
             <div className="hidden lg:flex flex-1 relative items-center justify-center border-r border-[var(--color-border-subtle)] bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-[var(--color-bg-secondary)] via-[var(--color-bg-primary)] to-[var(--color-bg-primary)]">
-                <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#1e293b 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
+                <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(var(--color-border-default) 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
 
                 <motion.div
                     initial={{ opacity: 0, scale: 0.9 }}
@@ -56,7 +56,7 @@ export default function LoginPage() {
                         <div className="absolute inset-0 rounded-3xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" />
                     </div>
                     <div className="space-y-2">
-                        <h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent">
+                        <h2 className="text-5xl font-bold tracking-tighter text-[var(--color-text-primary)]">
                             VERIDIAN
                         </h2>
                         <p className="text-[var(--color-text-tertiary)] font-mono text-sm tracking-[0.3em] uppercase">
@@ -64,10 +64,10 @@ export default function LoginPage() {
                         </p>
                     </div>
 
-                    <div className="flex items-center gap-6 mt-12 bg-slate-900/50 backdrop-blur-md px-6 py-3 rounded-full border border-slate-800/50 shadow-xl">
+                    <div className="flex items-center gap-6 mt-12 bg-[var(--color-bg-tertiary)] backdrop-blur-md px-6 py-3 rounded-full border border-[var(--color-border-subtle)] shadow-xl">
                         <div className="flex -space-x-3">
                             {[1, 2, 3].map(i => (
-                                <div key={i} className="w-8 h-8 rounded-full border-2 border-[#050505] bg-slate-800" />
+                                <div key={i} className="w-8 h-8 rounded-full border-2 border-[var(--color-bg-primary)] bg-[var(--color-bg-secondary)]" />
                             ))}
                         </div>
                         <p className="text-xs text-[var(--color-text-tertiary)] font-medium">Operations Center</p>
@@ -76,7 +76,7 @@ export default function LoginPage() {
                 </motion.div>
 
                 {/* Decorative elements */}
-                <div className="absolute bottom-12 left-12 text-[10px] font-mono text-slate-700 tracking-tighter uppercase leading-none">
+                <div className="absolute bottom-12 left-12 text-[10px] font-mono text-[var(--color-text-quaternary)] tracking-tighter uppercase leading-none">
                     Veridian Operations<br />
                     Cultivation Platform<br />
                     v1.0.0
@@ -100,7 +100,7 @@ export default function LoginPage() {
                             />
                             <div className="absolute inset-0 rounded-xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity blur-lg" />
                         </motion.div>
-                        <motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl">
+                        <motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)] lg:text-4xl">
                             Sign In
                         </motion.h1>
                         <motion.p variants={itemVariants} className="text-[var(--color-text-tertiary)] text-sm">
@@ -130,7 +130,7 @@ export default function LoginPage() {
                                     <input
                                         type="email"
                                         required
-                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
+                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-[var(--color-text-quaternary)]"
                                         placeholder="you@example.com"
                                         value={email}
                                         onChange={(e) => setEmail(e.target.value)}
@@ -146,7 +146,7 @@ export default function LoginPage() {
                                     <input
                                         type="password"
                                         required
-                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
+                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-[var(--color-text-quaternary)]"
                                         placeholder="••••••••••••"
                                         value={password}
                                         onChange={(e) => setPassword(e.target.value)}
@@ -160,7 +160,7 @@ export default function LoginPage() {
                         <button
                             type="submit"
                             disabled={isLoading}
-                            className="group relative w-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] rounded-xl h-14 font-bold tracking-tight shadow-xl shadow-emerald-600/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center overflow-hidden"
+                            className="group relative w-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] rounded-xl h-14 font-bold tracking-tight shadow-xl transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center overflow-hidden"
                         >
                             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-[100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
                             {isLoading ? (
@@ -174,11 +174,11 @@ export default function LoginPage() {
                         </button>
                     </motion.form>
 
-                    <motion.div variants={itemVariants} className="pt-24 border-t border-slate-800 space-y-4">
+                    <motion.div variants={itemVariants} className="pt-24 border-t border-[var(--color-border-subtle)] space-y-4">
                         <div className="flex items-center justify-between">
-                            <p className="text-[10px] font-bold text-slate-600 uppercase tracking-widest">Global Security</p>
-                            <div className="h-px flex-1 bg-slate-800 mx-4" />
-                            <Shield className="text-slate-700" size={14} />
+                            <p className="text-[10px] font-bold text-[var(--color-text-quaternary)] uppercase tracking-widest">Global Security</p>
+                            <div className="h-px flex-1 bg-[var(--color-border-subtle)] mx-4" />
+                            <Shield className="text-[var(--color-text-quaternary)]" size={14} />
                         </div>
                         <p className="text-[11px] text-[var(--color-text-tertiary)] leading-relaxed text-center">
                             This system is for the exclusive use of authorized personnel. All activity is logged and monitored for compliance integrity.