diff --git a/UI/Web/src/app/registration/user-login/user-login.component.html b/UI/Web/src/app/registration/user-login/user-login.component.html
index 0c2671334..950b1c995 100644
--- a/UI/Web/src/app/registration/user-login/user-login.component.html
+++ b/UI/Web/src/app/registration/user-login/user-login.component.html
@@ -9,18 +9,55 @@
             <div class="card-text">
               <div class="mb-3">
                 <label for="username" class="form-label visually-hidden">{{t('username')}}</label>
-                <input class="form-control custom-input" formControlName="username" id="username" autocomplete="username"
-                       type="text" autofocus [placeholder]="t('username')">
+                <input class="form-control custom-input" 
+                       formControlName="username" 
+                       id="username" 
+                       autocomplete="username"
+                       type="text" 
+                       autofocus 
+                       [placeholder]="t('username')"
+                       [class.is-invalid]="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
+                @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
+                  <div class="invalid-feedback">
+                    {{t('username-required')}}
+                  </div>
+                }
               </div>
 
             <div class="mb-2">
               <label for="password" class="form-label visually-hidden">{{t('password')}}</label>
-              <input class="form-control custom-input" formControlName="password" name="password" autocomplete="current-password"
-                       id="password" type="password" [placeholder]="t('password')">
+              <input class="form-control custom-input" 
+                     formControlName="password" 
+                     name="password" 
+                     autocomplete="current-password"
+                     id="password" 
+                     type="password" 
+                     [placeholder]="t('password')"
+                     [class.is-invalid]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
+              @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+                <div class="invalid-feedback">
+                  @if (loginForm.get('password')?.errors?.['required']) {
+                    <span>{{t('password-required')}}</span>
+                  }
+                  @if (loginForm.get('password')?.errors?.['minlength']) {
+                    <span>{{t('password-min-length')}}</span>
+                  }
+                  @if (loginForm.get('password')?.errors?.['maxlength']) {
+                    <span>{{t('password-max-length')}}</span>
+                  }
+                </div>
+              }
             </div>
 
             <div class="sign-in">
-              <button class="btn btn-outline-primary" type="submit" [disabled]="isSubmitting">{{t('submit')}}</button>
+              <button class="btn btn-outline-primary" 
+                      type="submit" 
+                      [disabled]="isSubmitting() || loginForm.invalid">
+                @if (isSubmitting()) {
+                  <span class="spinner-border spinner-border-sm me-2"></span>
+                }
+                {{t('submit')}}
+              </button>
             </div>
 
             <div class="mt-3 forgot-password">
@@ -31,15 +68,16 @@
       }
 
         @if (showOidcButton()) {
+          <hr/>
           <a
             class="btn btn-outline-primary mt-2 d-flex align-items-center gap-2"
             href="oidc/login"
           >
-            <app-image height="36px" width="36px" [imageUrl]="'assets/icons/open-id-connect-logo.svg'" [styles]="{'object-fit': 'contains'}"></app-image>
+            <app-image height="25px" width="25px" [imageUrl]="'assets/icons/open-id-connect-logo.svg'" [styles]="{'object-fit': 'contains'}"></app-image>
             {{oidcConfig()?.providerName || t('oidc')}}
           </a>
         }
       }
     </ng-container>
   </app-splash-container>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/UI/Web/src/app/registration/user-login/user-login.component.scss b/UI/Web/src/app/registration/user-login/user-login.component.scss
index 274fce84b..3289a97b3 100644
--- a/UI/Web/src/app/registration/user-login/user-login.component.scss
+++ b/UI/Web/src/app/registration/user-login/user-login.component.scss
@@ -8,6 +8,12 @@ div {
 
 a {
     font-size: 0.8rem;
+    font-family: var(--login-input-font-family);
+
+    &.btn {
+        font-size: 1rem;
+        padding: 0.375rem 0.75rem;
+    }
 }
 
 .custom-input {
@@ -31,8 +37,9 @@ a {
 
 .invalid-feedback {
     display: inline-block;
-    color: var(--bs-form-invalid-color);
+    background: var(--bs-form-invalid-color);
     font-family: var(--login-input-font-family);
+    color: var(--login-input-color);
 }
 
 .forgot-password {
@@ -52,3 +59,12 @@ a {
 .text-muted {
   font-size: 0.8rem;
 }
+
+
+hr {
+    border-top: 1px solid;
+    max-width: 80%;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
\ No newline at end of file
diff --git a/UI/Web/src/app/registration/user-login/user-login.component.ts b/UI/Web/src/app/registration/user-login/user-login.component.ts
index c0e3190e4..b238c846f 100644
--- a/UI/Web/src/app/registration/user-login/user-login.component.ts
+++ b/UI/Web/src/app/registration/user-login/user-login.component.ts
@@ -43,7 +43,7 @@ export class UserLoginComponent implements OnInit {
 
   loginForm: FormGroup = new FormGroup({
       username: new FormControl('', [Validators.required]),
-      password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6), Validators.pattern("^.{6,256}$")])
+      password: new FormControl('', [Validators.required, Validators.maxLength(256), Validators.minLength(6)])
   });
 
   /**
@@ -95,6 +95,9 @@ export class UserLoginComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    // Ensure isSubmitting is false on component initialization
+    this.isSubmitting.set(false);
+
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       if (user) {
         this.navService.handleLogin()
@@ -113,6 +116,7 @@ export class UserLoginComponent implements OnInit {
       }
 
       this.isLoaded.set(true);
+      this.cdRef.markForCheck();
     });
 
     this.route.queryParamMap.subscribe(params => {
@@ -138,20 +142,28 @@ export class UserLoginComponent implements OnInit {
 
 
   login(apiKey: string = '') {
+    // Don't proceed if form is invalid (for regular form submission)
+    if (!apiKey && this.loginForm.invalid) {
+      this.loginForm.markAllAsTouched();
+      return;
+    }
+
     const model = this.loginForm.getRawValue();
     model.apiKey = apiKey;
     this.isSubmitting.set(true);
+    
     this.accountService.login(model).subscribe({
       next: () => {
           this.loginForm.reset();
           this.navService.handleLogin()
-
           this.isSubmitting.set(false);
+          this.cdRef.markForCheck();
       },
       error: (err) => {
         this.toastr.error(err.error);
         this.isSubmitting.set(false);
+        this.cdRef.markForCheck();
       }
     });
   }
-}
+}
\ No newline at end of file