diff --git a/main/http_server/axe-os/src/app/components/swarm/swarm.component.html b/main/http_server/axe-os/src/app/components/swarm/swarm.component.html
index 2bc14865..28339090 100644
--- a/main/http_server/axe-os/src/app/components/swarm/swarm.component.html
+++ b/main/http_server/axe-os/src/app/components/swarm/swarm.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="form">
     <label>AxeOS Device IP: </label>
     <input formControlName="ip" type="text">
-    <button style="margin-left: 15px;" class="btn btn-primary" (click)="add()">Add</button>
+    <button style="margin-left: 15px;" class="btn btn-primary" (click)="add()" [disabled]="form.invalid">Add</button>
     <!-- <input type="checkbox" formControlName="sync"> Sync All -->
 </form>
 <div>
diff --git a/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts b/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts
index 9753a9e2..73d96695 100644
--- a/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts
+++ b/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { BehaviorSubject, catchError, combineLatest, forkJoin, map, Observable, of, startWith, switchMap } from 'rxjs';
 import { SystemService } from 'src/app/services/system.service';
@@ -26,7 +26,7 @@ export class SwarmComponent {
     private toastr: ToastrService
   ) {
     this.form = this.fb.group({
-      ip: []
+      ip: [null, [Validators.required, Validators.pattern('(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)')]]
     });
 
     this.swarm$ = this.systemService.getSwarmInfo().pipe(