diff --git a/src/app/system/manage-surveys/manage-surveys.component.html b/src/app/system/manage-surveys/manage-surveys.component.html
index fd543ab4e..58c856d3d 100644
--- a/src/app/system/manage-surveys/manage-surveys.component.html
+++ b/src/app/system/manage-surveys/manage-surveys.component.html
@@ -41,8 +41,8 @@
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let survey">
-            <div [className]="!isActive(survey.validFrom, survey.validTo) === true ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate)">
-                <fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) === true ?  ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <div [className]="isActive(survey.validFrom, survey.validTo) ? 'enabled' : 'disabled'">
+                <fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
             </div>
         </td>
       </ng-container>
@@ -50,10 +50,10 @@
       <ng-container matColumnDef="action">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
         <td mat-cell *matCellDef="let survey">
-          <button mat-button *ngIf="!isActive(survey.validFrom, survey.validTo)" color="accent">
+          <button mat-button *ngIf="!isActive(survey.validFrom, survey.validTo)" color="accent" (click)="activate(survey); $event.stopPropagation();">
             <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{'labels.buttons.Activate' | translate }}
           </button>
-          <button mat-button *ngIf="isActive(survey.validFrom, survey.validTo)" color="warn">
+          <button mat-button *ngIf="isActive(survey.validFrom, survey.validTo)" color="warn" (click)="deactivate(survey); $event.stopPropagation();">
             <fa-icon icon="lock" class="m-r-10"></fa-icon>{{'labels.buttons.Deactivate' | translate}}
           </button>
         </td>
diff --git a/src/app/system/manage-surveys/manage-surveys.component.ts b/src/app/system/manage-surveys/manage-surveys.component.ts
index 17619cf29..962caac78 100644
--- a/src/app/system/manage-surveys/manage-surveys.component.ts
+++ b/src/app/system/manage-surveys/manage-surveys.component.ts
@@ -5,6 +5,9 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
+import { SystemService } from '../system.service';
+
 /**
  * Manage Surveys component.
  */
@@ -31,7 +34,10 @@ export class ManageSurveysComponent implements OnInit {
    * Retrieves the surveys data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(
+    private route: ActivatedRoute,
+    private systemService: SystemService,
+  ) {
     this.route.data.subscribe(( data: { surveys: any }) => {
       this.surveysData = data.surveys;
     });
@@ -39,12 +45,12 @@ export class ManageSurveysComponent implements OnInit {
 
   /**
    * Returns whether an survey is active based on its duration
-   * @param {number} validFrom Date valid from
-   * @param {number} validTo Date valid to
+   * @param {string} validFrom Date valid from (yyyy-MM-dd)
+   * @param {string} validTo Date valid to (yyyy-MM-dd)
    */
-  isActive(validFrom: number, validTo: number) {
-    const curdate = new Date().getTime();
-    return (curdate > validFrom && curdate < validTo);
+  isActive(validFrom: string, validTo: string) {
+    const curdate = new Date().toISOString().split('T')[0];
+    return (curdate >= validFrom && curdate <= validTo);
   }
 
   /**
@@ -78,4 +84,31 @@ export class ManageSurveysComponent implements OnInit {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
+  /**
+   * Activates a survey.
+   * @param {any} survey Survey to activate.
+   */
+  activate(survey: any) {
+    this.systemService.activateSurvey(survey.id).subscribe(() => {
+      const today = new Date().toISOString().split('T')[0];
+      // This mimics the server-side logic
+      survey.validFrom = today;
+      survey.validTo = today;
+    });
+  }
+
+  /**
+   * Deactivates a survey.
+   * @param {any} survey Survey to deactivate.
+   */
+  deactivate(survey: any) {
+    this.systemService.deactivateSurvey(survey.id).subscribe(() => {
+      const date = new Date();
+      date.setDate(date.getDate() - 1); // Set to yesterday
+      const yesterday = date.toISOString().split('T')[0];
+      // This mimics the server-side logic
+      survey.validTo = yesterday;
+    });
+  }
+
 }
diff --git a/src/app/system/system.service.ts b/src/app/system/system.service.ts
index 6c8788435..8da3825cd 100644
--- a/src/app/system/system.service.ts
+++ b/src/app/system/system.service.ts
@@ -240,6 +240,24 @@ export class SystemService {
     return this.http.put(`/surveys/${surveyId}`, survey);
   }
 
+  /**
+   * Activates a survey.
+   * @param {number} surveyId Survey ID.
+   * @returns {Observable<any>}
+   */
+  activateSurvey(surveyId: number): Observable<any> {
+    return this.http.post(`/surveys/${surveyId}?command=activate`, null);
+  }
+
+  /**
+   * Deactivates a survey.
+   * @param {number} surveyId Survey ID.
+   * @returns {Observable<any>}
+   */
+  deactivateSurvey(surveyId: number): Observable<any> {
+    return this.http.post(`/surveys/${surveyId}?command=deactivate`, null);
+  }
+
 
   /**
    * @returns {Observable<any>} Fetches Jobs.