diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index af2bc571379c..f2c7b9dd9165 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -361,6 +361,8 @@ import { KnowledgeBasesComponent } from './knowledge-bases/knowledge-bases.compo
 import { CnpTemplatesComponent } from './create-new-project/cnp-templates/cnp-templates.component';
 import { OnboardingWelcomeComponent } from './create-new-project/onboarding-welcome/onboarding-welcome.component';
 import { HomeNewsFeedModalComponent } from './home-components/home-news-feed/home-news-feed-modal/home-news-feed-modal.component';
+import { AutomationsComponent } from './automations/automations.component';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 
 
@@ -638,7 +640,8 @@ const appInitializerFn = (appConfig: AppConfigService, brandService: BrandServic
     HomeGoToChatComponent,
     CnpTemplatesComponent,
     OnboardingWelcomeComponent,
-    HomeNewsFeedModalComponent
+    HomeNewsFeedModalComponent,
+    AutomationsComponent
   ],
   imports: [
     TooltipModule.forRoot(CutomTooltipOptions as TooltipOptions),
@@ -664,6 +667,7 @@ const appInitializerFn = (appConfig: AppConfigService, brandService: BrandServic
     MatExpansionModule,
     MatDialogModule,
     MatCheckboxModule,
+    MatAutocompleteModule,
     /* PRIVATE */
     PricingModule,
     ChatbotDesignStudioModule,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 79910ea6e2d6..42c22cf7c513 100755
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -146,6 +146,7 @@ import { KnowledgeBasesComponent } from './knowledge-bases/knowledge-bases.compo
 import { CnpIsMobileComponent } from './create-new-project/cnp-is-mobile/cnp-is-mobile.component';
 import { CnpTemplatesComponent } from './create-new-project/cnp-templates/cnp-templates.component';
 import { OnboardingWelcomeComponent } from './create-new-project/onboarding-welcome/onboarding-welcome.component';
+import { AutomationsComponent } from './automations/automations.component';
 
 
 
@@ -456,6 +457,9 @@ const routes: Routes = [
   { path: 'project/:projectid/hours', component: HoursComponent, canActivate: [AuthGuard, ProjectProfileGuard] },
   { path: 'project/:projectid/hours-demo', component: HoursStaticComponent, canActivate: [AuthGuard] },
 
+  // AUTOMATIONS
+  { path: 'project/:projectid/automations', component: AutomationsComponent, canActivate: [AuthGuard]},
+
   // KNOWLEDGE BASES
   { path: 'project/:projectid/knowledge-bases', component: KnowledgeBasesComponent, canActivate: [AuthGuard]},
   { path: 'project/:projectid/knowledge-bases/:calledby', component: KnowledgeBasesComponent, canActivate: [AuthGuard]}, // when called from home
diff --git a/src/app/automations/automations.component.html b/src/app/automations/automations.component.html
new file mode 100644
index 000000000000..adb7d4b9cb7d
--- /dev/null
+++ b/src/app/automations/automations.component.html
@@ -0,0 +1,156 @@
+<span class="navbar-brand navbar-brand-sidebar-settings"
+  [ngStyle]="{'margin-top':isChromeVerGreaterThan100 === true ? '-64px' : '6px' }"
+  [ngClass]="{'is_opened':IS_OPEN_SETTINGS_SIDEBAR, 'is_closed':!IS_OPEN_SETTINGS_SIDEBAR }">
+
+  <i class="material-icons">settings</i>
+
+  <span *ngIf="IS_OPEN_SETTINGS_SIDEBAR">{{ 'Settings' | translate }} </span>
+</span>
+
+
+<div class="main-content" style="padding-top:0px; padding-left: 5px;padding-right: 5px;">
+  <div class="container-fluid" style="padding-left: 5px;padding-right: 5px;">
+
+    <div class="content-wpr" style="display: flex;">
+      <appdashboard-settings-sidebar style="border-right:1px solid #e5effe !important">
+      </appdashboard-settings-sidebar>
+      <div class="teplate-content" style="flex: 1 1 auto; margin: 0 20px;">
+
+        <loading-spinner *ngIf="showSpinner"></loading-spinner>
+
+        <div class="card-content" *ngIf="!showSpinner && showAutomationsList" style="padding-top: 10px;">
+
+          <div class="filters">
+            <!-- // to do -->
+          </div>
+
+          <div class="header">
+            <p style="font-family: 'Poppins';">Last Automations</p>
+            <button class="custom-button" (click)="reload('automations')">
+              <span class="material-icons-round button-icon">sync</span>
+              Reload</button>
+          </div>
+
+          <div class="automation-list">
+
+            <div class="automation" *ngFor="let transaction of transactions"
+              (click)="onAutomationSelect(transaction.transaction_id)">
+              <div class="automation-title-id">
+                <p class="automation-title">{{ transaction.template_name }}</p>
+                <p class="automation-id">{{ transaction.transaction_id }}</p>
+                <div *ngIf="transaction.status === 'pending'" class="automation-status">
+                  <span class="material-icons circle pending-circle">circle</span>
+                  <p>Pending</p>
+                </div>
+
+                <div *ngIf="transaction.status === 'completed'" class="automation-status">
+                  <span class="material-icons circle completed-circle">circle</span>
+                  <p>Completed</p>
+                </div>
+
+                <div *ngIf="transaction.status === 'aborted'" class="automation-status">
+                  <span class="material-icons circle aborted-circle">circle</span>
+                  <p>Aborted</p>
+                </div>
+              </div>
+
+              <div *ngIf="transaction.channel === 'whatsapp'" class="channel-chip">
+                <img src="assets/img/whatsapp-small.png" width="22" height="auto">
+                WhatsApp
+              </div>
+
+              <div class="automation-date">
+                {{ transaction.createdAt | date:'E, d MMM, HH:mm:ss'}}
+              </div>
+
+              <div class="automation-option">
+                <div class="vertical-separator"></div>
+                <span class="material-icons-round option-icon">navigate_next</span>
+              </div>
+
+
+            </div>
+
+          </div>
+
+
+
+        </div>
+
+        <div class="card-content" *ngIf="!showSpinner && showAutomationDetail" style="padding-top: 10px;">
+          <button class="custom-button" (click)="backToAutomations()">
+            <span class="material-icons-round button-icon">navigate_before</span>
+            Back to Automations</button>
+
+          <div class="automation-stats">
+            <p class="subtitle">Automation Stats</p>
+
+            <div class="stats">
+              <span class="stat"> 
+                <span class="material-icons-round counter-icon complete">done_all</span> 
+                <label>Read:</label> <span>{{ read_count }}</span> 
+              </span>
+              <span class="stat">
+                <span class="material-icons-round counter-icon pending">done_all</span> 
+                <label>Delivered:</label> {{ delivered_count }}
+              </span>
+              <span class="stat">
+                <span class="material-icons-round counter-icon pending">done</span> 
+                <label>Sent:</label> {{ sent_count }}
+              </span>
+              <span class="stat">
+                <span class="material-icons-round counter-icon pending">schedule</span> 
+                <label>Accepted:</label> {{ accepted_count }}
+              </span>
+              <span class="stat">
+                <span class="material-icons-round counter-icon error">error_outline</span> 
+                <label>Rejected:</label> {{ failed_count }}
+              </span>
+              <span class="stat">
+                <span class="material-icons-round counter-icon error">error_outline</span> 
+                <label>Failed:</label> {{ rejected_count }}
+              </span>
+            </div>            
+
+          </div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <h4>{{ logs.length }} Messages</h4>
+            <button class="custom-button" (click)="reload('logs')">
+              <span class="material-icons-round button-icon">sync</span>
+              Reload</button>
+          </div>
+
+          <div class="logs-list">
+         
+            <mat-expansion-panel *ngFor="let log of logs" style="border-radius: 0px;">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <label>To:</label> {{log.json_message.to}}
+                </mat-panel-title>
+                <mat-panel-description>
+                  <div class="status-chip">
+                    <span *ngIf="log.error" class="material-icons-round warning-icon">warning</span>
+                    {{ log.status }}
+                  </div>
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <label>Sending date:</label> {{ log.timestamp | date:'E, d MMM, HH:mm:ss'}}
+              <div class="error-box" *ngIf="log.error">
+                <p class="error-label">Error</p>
+                {{ log.error }}
+              </div>
+            </mat-expansion-panel>
+            <div class="end-list">End of list</div>
+
+
+          </div>
+        </div>
+
+
+      </div>
+
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/automations/automations.component.scss b/src/app/automations/automations.component.scss
new file mode 100644
index 000000000000..c5333a51ee8b
--- /dev/null
+++ b/src/app/automations/automations.component.scss
@@ -0,0 +1,335 @@
+@import "../../assets/sass/md/_variables.scss";
+
+.card-content {
+    font-family:'Poppins','Roboto', 'Arial', sans-serif !important;
+}
+
+label {
+    margin-bottom: 0px;
+    margin-right: 6px;
+}
+
+p {
+    margin-bottom: 0px;
+}
+
+
+
+.subtitle {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.header {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+    margin-bottom: 20px;
+    align-items: flex-end;
+
+    p {
+        font-weight: 500;
+        font-size: 22px;
+    }
+}
+
+.automation-option {
+    display: flex;
+    align-items: center;
+    color: #8e9bac;
+
+    .vertical-separator {
+        height: 45px;
+        border: solid 1px #c5d2e3;
+        border-radius: 2px;
+        margin: 0 25px;
+    }
+
+    .option-icon {
+        margin: 0 25px;
+        font-size: 34px;
+        opacity: 0.9;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+}
+
+.automation {
+    border: solid 1px #c5d2e3;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    padding: 10px;
+
+    display: flex;
+    //flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+        //border: solid 1px #b6b6b6;
+        box-shadow: inset 0 0 5px 0 #c5d2e3;
+    }
+}
+
+.channel-chip {
+    background-color: aliceblue;
+    max-width: fit-content;
+    padding: 2px 6px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    //border: solid 1px #1971bd;
+    color: #1971bd;
+    display: flex;
+}
+
+.automation-title-id {
+
+    display: flex;
+    flex-direction: column;
+
+    .automation-title {
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .automation-id {
+        margin-top: -4px;
+        font-size: 10px;
+        font-weight: 400;
+        color: #00000052;
+        //letter-spacing: 1px;
+    }
+}
+
+.automation-status {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 12px;
+
+    p {
+        margin-bottom: 0;
+    }
+
+    .circle {
+        margin-right: 4px;
+        font-size: 12px;
+    }
+
+
+    .pending-circle {
+        color: rgb(255, 234, 0);
+        animation: pulse 1.5s infinite;
+        background-color: rgb(255, 234, 0);
+        border-radius: 30px;
+    }
+
+    .completed-circle {
+        color: green;
+    }
+
+    .aborted-circle {
+        color: red;
+    }
+}
+
+.custom-circle {
+    color: blue;
+
+    padding: 0px;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.95);
+        // box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+        // box-shadow: 0 0 0 0 blue;
+        box-shadow: 0 0 0 0 rgba(255, 234, 0, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
+    }
+
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+}
+
+.custom-button {
+    //font-family: 'Poppins' !important;
+    background-color: white;
+    color: #4462a3;
+    border: solid 1px #4462a3;
+    border-radius: 20px;
+    height: 32px;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+
+    .button-icon {
+        font-size: 18px;
+        margin-right: 8px;
+    }
+
+    &:hover {
+        color: white;
+        background-color: #4462a3;
+    }
+}
+
+// .back-button {
+//     background-color: transparent;
+//     border: solid 1px black;
+//     border-radius: 10px;
+//     height: 26px;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     padding: 6px 18px 6px 6px;
+//     cursor: pointer;
+
+//     &:hover {
+//         background-color: #647491;
+//         color: white;
+//     }
+// }
+
+// .reload-button {
+    
+//     margin-left: 12px;
+//     font-size: 12px;
+//     background-color: transparent;
+//     border: solid 1px black;
+//     border-radius: 10px;
+//     height: 20px;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     padding: 6px 12px 6px 6px;
+//     cursor: pointer;
+
+//     .material-icons-round {
+//         font-size: 14px;
+//         margin-bottom: 1px;
+//     }
+
+//     &:hover {
+//         background-color: #647491;
+//         color: white;
+//     }
+// }
+
+.automation-stats {
+    background-color: aliceblue;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 10px;
+}
+
+.stats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    label {
+        margin-bottom: 1px;
+        margin-right: 4px;
+    }
+
+    .stat {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+    }
+
+
+
+    .counter-icon {
+        font-size: 16px;
+        margin-right: 6px;
+    }
+
+    .complete {
+        color: #70bbe7;
+        background-color: white;
+    border-radius: 12px;
+    padding: 4px;
+    }
+
+    .pending {
+        color: #cbcbcb;
+        background-color: white;
+    border-radius: 12px;
+    padding: 4px;
+    }
+
+    .error {
+        color: #bd1515;
+        background-color: white;
+    border-radius: 12px;
+    padding: 4px;
+    }
+}
+
+.logs-list {
+    max-height: 570px;
+    overflow: scroll;
+
+    &:hover {
+        ::-webkit-scrollbar {
+            width: 3px;
+        }
+    }
+}
+
+.status-chip {
+    background-color: aliceblue;
+    border: dashed 1px #abc6dd;
+    border-radius: 8px;
+    padding: 0px 6px;
+    font-size: 11px;
+    text-transform: uppercase;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    .warning-icon {
+        font-size: 18px;
+        margin-right: 4px;
+        color: #bd1515;
+    }
+}
+
+.error-box {
+    background-color: rgba(255, 0, 0, 0.21);
+    padding: 4px 8px;
+    border-radius: 6px;
+    box-shadow: 0px 0px 3px 0 red;
+    margin: 8px 0px;
+
+    .error-label {
+        margin-bottom: 2px;
+        font-weight: 600;
+        font-size: 15px;
+        color: red;
+    }
+}
+
+.end-list {
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+    color: #00000054;
+}
\ No newline at end of file
diff --git a/src/app/automations/automations.component.spec.ts b/src/app/automations/automations.component.spec.ts
new file mode 100644
index 000000000000..be608302007b
--- /dev/null
+++ b/src/app/automations/automations.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutomationsComponent } from './automations.component';
+
+describe('AutomationsComponent', () => {
+  let component: AutomationsComponent;
+  let fixture: ComponentFixture<AutomationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AutomationsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AutomationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/automations/automations.component.ts b/src/app/automations/automations.component.ts
new file mode 100644
index 000000000000..469f11a30cc6
--- /dev/null
+++ b/src/app/automations/automations.component.ts
@@ -0,0 +1,175 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from 'app/core/auth.service';
+import { AutomationsService } from 'app/services/automations.service';
+import { LoggerService } from 'app/services/logger/logger.service';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+@Component({
+  selector: 'appdashboard-automations',
+  templateUrl: './automations.component.html',
+  styleUrls: ['./automations.component.scss']
+})
+export class AutomationsComponent implements OnInit {
+
+  public IS_OPEN_SETTINGS_SIDEBAR: boolean;
+  public isChromeVerGreaterThan100: boolean;
+
+  showSpinner: boolean = true;
+  showAutomationsList: boolean = true;
+  showAutomationDetail: boolean = false;
+
+  myControl = new FormControl('');
+  channels: string[] = ['WhatsApp'];
+  filteredChannels: Observable<string[]>;
+  project: any;
+
+  channel: string;
+  selected_automation_id: any;
+  transactions = [];
+  logs = [];
+
+  read_count: any;
+  delivered_count: any;
+  sent_count: any;
+  accepted_count: any;
+  rejected_count: any;
+  failed_count: any;
+
+  constructor(
+    private auth: AuthService,
+    private logger: LoggerService,
+    private automationsService: AutomationsService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.getBrowserVersion();
+    this.listenSidebarIsOpened();
+    this.showSpinner = true;
+    this.initializeFilters();
+    this.getTransactions();
+    this.getCurrentProject();
+  }
+
+  initializeFilters() {
+    this.filteredChannels = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map((value) => this._filter(value || ''))
+    )
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.channels.filter((option) =>
+      option.toLowerCase().includes(filterValue)
+    );
+  }
+
+  // ----------------------
+  // UTILS FUNCTION - Start
+  getBrowserVersion() {
+    this.auth.isChromeVerGreaterThan100.subscribe((isChromeVerGreaterThan100: boolean) => {
+      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+    })
+  }
+
+  listenSidebarIsOpened() {
+    this.auth.settingSidebarIsOpned.subscribe((isopened) => {
+      this.logger.log('[AUTOMATION COMP.] SETTINGS-SIDEBAR isopened (FROM SUBSCRIPTION) ', isopened)
+      this.IS_OPEN_SETTINGS_SIDEBAR = isopened
+    });
+  }
+
+  getCurrentProject() {
+    this.auth.project_bs.subscribe((project) => {
+      this.project = project
+      // if ((this.project.profile_name === 'Sandbox' || this.project.profile_name === 'free') && this.project.trial_expired === true) {
+      //   this.plan_expired = true;
+      // }
+    });
+  }
+  // UTILS FUNCTION - End
+  // --------------------
+
+  onChannelSelect(channel) {
+    this.channel = channel;
+    this.getTransactions();
+  }
+
+  getTransactions() {
+    this.automationsService.getTransactions('whatsapp').subscribe((transactions: []) => {
+      this.logger.debug("[AUTOMATION COMP.] Transactions: ", transactions);
+      this.transactions = transactions;
+      this.transactions.sort(function compare(a, b) {
+        if (a.createdAt > b.createdAt) {
+          return -1;
+        }
+        if (a.createdAt < b.createdAt) {
+          return 1;
+        }
+        return 0
+      });
+      this.showSpinner = false;
+
+    }, (error) => {
+      console.error("get transactions error: ", error)
+    })
+  }
+
+  onAutomationSelect(automation_id: string) {
+    this.selected_automation_id = automation_id;
+    this.showSpinner = true;
+    this.getLogs(this.selected_automation_id);
+  }
+
+  getLogs(automation_id: string) {
+    this.automationsService.getTransactionLogs(automation_id).subscribe((logs: []) => {
+      this.logger.debug("[AUTOMATION COMP.] Logs: ", logs);
+      this.logs = logs;
+      this.showAutomationsList = false;
+      this.showAutomationDetail = true;
+      this.counter();
+      this.changeRoute(automation_id)
+      this.showSpinner = false;
+    }, (error) => {
+      this.logger.error("[AUTOMATION COMP.] Get logs error: ", error);
+    })
+  }
+
+  counter() {
+    this.read_count = this.logs.filter(l => l.status_code === 3).length
+    this.delivered_count = this.logs.filter(l => l.status_code === 2).length
+    this.sent_count = this.logs.filter(l => l.status_code === 1).length
+    this.accepted_count = this.logs.filter(l => l.status_code === 0).length
+    this.rejected_count = this.logs.filter(l => l.status_code === -1).length
+    this.failed_count = this.logs.filter(l => l.status_code === -2).length
+  }
+
+  changeRoute(key?) {
+    if (key) {
+      this.router.navigate(['project/' + this.project._id + '/automations/'], { queryParams: { id: key } });
+    } else {
+      this.router.navigate(['project/' + this.project._id + '/automations/']);
+    }
+  }
+
+  backToAutomations() {
+    this.changeRoute();
+    this.showAutomationsList = true;
+    this.showAutomationDetail = false;
+  }
+
+  reload(target) {
+    this.showSpinner = true;
+    if (target === 'logs') {
+      this.getLogs(this.selected_automation_id);
+    }
+    if (target === 'automations') {
+      this.getTransactions();
+    }
+  }
+}
diff --git a/src/app/components/settings-sidebar/settings-sidebar.component.html b/src/app/components/settings-sidebar/settings-sidebar.component.html
index d367c330051e..f9c32a3bb936 100755
--- a/src/app/components/settings-sidebar/settings-sidebar.component.html
+++ b/src/app/components/settings-sidebar/settings-sidebar.component.html
@@ -194,6 +194,29 @@
     </ng-container>
 
 
+    <!-- -------------------------------------------------------- -->
+    <!--  Knowledge Bases  -->
+    <!-- -------------------------------------------------------- -->
+    <ng-container *ngIf="isVisibleAUT && USER_ROLE !== 'agent'">
+      <li [ngClass]="{'active-item': AUTOMATIONS_ROUTE_IS_ACTIVE}" 
+        (click)="goToAutomations()"
+        matTooltipClass="custom-mat-tooltip-in-settings-sidebar" 
+        matTooltip="Automations"
+        #tooltip="matTooltip" 
+        matTooltipPosition='right' 
+        matTooltipHideDelay="100" 
+        [matTooltipDisabled]="IS_OPEN">
+        <a>
+          <i *ngIf="IS_OPEN === true || IS_OPEN === false" class="material-icons settings-sidebar-icons">hdr_auto</i>
+          <p *ngIf="IS_OPEN === true" class="custom_paragraph">
+            {{ 'Automations Log' | translate }}
+            <!-- <span class="trigger-beta-badge">Beta</span> -->
+          </p>
+        </a>
+      </li>
+    </ng-container>
+
+
     <!-- -------------------------------------------------------- -->
     <!--  Knowledge Bases  -->
     <!-- -------------------------------------------------------- -->
diff --git a/src/app/components/settings-sidebar/settings-sidebar.component.ts b/src/app/components/settings-sidebar/settings-sidebar.component.ts
index e1a3b7b08ddb..b0d8ded5ad7e 100755
--- a/src/app/components/settings-sidebar/settings-sidebar.component.ts
+++ b/src/app/components/settings-sidebar/settings-sidebar.component.ts
@@ -34,6 +34,7 @@ export class SettingsSidebarComponent implements OnInit {
   isVisibleAPP: boolean;
   isVisibleETK: boolean;
   isVisibleKNB: boolean;
+  isVisibleAUT: boolean;
   TAG_ROUTE_IS_ACTIVE: boolean;
   EMAIL_TICKETING_ROUTE_IS_ACTIVE: boolean;
   CANNED_RESPONSES_ROUTE_IS_ACTIVE: boolean;
@@ -47,6 +48,7 @@ export class SettingsSidebarComponent implements OnInit {
   PROJECT_SETTINGS_ROUTE_IS_ACTIVE: boolean;
   OPERATING_HOURS_ROUTE_IS_ACTIVE: boolean;
   KNOWLEDGE_BASES_ROUTE_IS_ACTIVE: boolean;
+  AUTOMATIONS_ROUTE_IS_ACTIVE: boolean;
   public_Key: string;
   USER_ROLE: any;
   CHAT_BASE_URL: string;
@@ -281,6 +283,15 @@ export class SettingsSidebarComponent implements OnInit {
           this.isVisibleKNB = true;
         }
       }
+
+      if (key.includes('AUT')) {
+        let aut = key.split(':')
+        if (aut[1] === 'F') {
+          this.isVisibleAUT = false;
+        } else {
+          this.isVisibleAUT = true;
+        }
+      }
     })
 
     if (!this.public_Key.includes('CAR')) {
@@ -301,6 +312,9 @@ export class SettingsSidebarComponent implements OnInit {
     if (!this.public_Key.includes('KNB')) {
       this.isVisibleKNB = false
     }
+    if (!this.public_Key.includes('AUT')) {
+      this.isVisibleAUT = false
+    }
   }
 
   getRoutingTranslation() {
@@ -395,6 +409,10 @@ export class SettingsSidebarComponent implements OnInit {
     this.router.navigate(['project/' + this.project._id + '/hours'])
   }
 
+  goToAutomations() {
+    this.router.navigate(['project/' + this.project._id + '/automations'])
+  }
+
   goToKnowledgeBases() {
     this.logger.log("goToKnowledgeBases -----> project._id: ", this.project._id);
     this.router.navigate(['project/' + this.project._id + '/knowledge-bases'])
@@ -562,7 +580,13 @@ export class SettingsSidebarComponent implements OnInit {
       this.logger.log('[SETTING-SIDEBAR] - KNOWLEDGE_BASES_ROUTE_IS_ACTIVE ',this.KNOWLEDGE_BASES_ROUTE_IS_ACTIVE)
     }
 
-    
+    if (this.route.indexOf('/automations') !== -1) {
+      this.AUTOMATIONS_ROUTE_IS_ACTIVE = true
+      this.logger.log('[SETTING-SIDEBAR] - AUTOMATIONS_ROUTE_IS_ACTIVE ',this.AUTOMATIONS_ROUTE_IS_ACTIVE)
+    } else {
+      this.AUTOMATIONS_ROUTE_IS_ACTIVE = false
+      this.logger.log('[SETTING-SIDEBAR] - AUTOMATIONS_ROUTE_IS_ACTIVE ',this.AUTOMATIONS_ROUTE_IS_ACTIVE)
+    }
 
     if (this.route.indexOf('/project-settings/') !== -1) {
       this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE = true
diff --git a/src/app/services/automations.service.spec.ts b/src/app/services/automations.service.spec.ts
new file mode 100644
index 000000000000..917200293d58
--- /dev/null
+++ b/src/app/services/automations.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AutomationsService } from './automations.service';
+
+describe('AutomationsService', () => {
+  let service: AutomationsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AutomationsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/automations.service.ts b/src/app/services/automations.service.ts
new file mode 100644
index 000000000000..7a42e93b58f3
--- /dev/null
+++ b/src/app/services/automations.service.ts
@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+import { AppConfigService } from './app-config.service';
+import { AuthService } from 'app/core/auth.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { LoggerService } from './logger/logger.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AutomationsService {
+
+  SERVER_BASE_PATH: string;
+  TOKEN: string;
+  user: any;
+  project_id: any;
+
+  constructor(
+    public appConfigService: AppConfigService,
+    private auth: AuthService,
+    private httpClient: HttpClient,
+    private logger: LoggerService
+  ) { 
+    this.user = auth.user_bs.value
+    this.checkIfUserExistAndGetToken()
+
+    this.auth.user_bs.subscribe((user) => {
+      this.user = user;
+      this.checkIfUserExistAndGetToken()
+    });
+    this.getCurrentProject();
+    this.getAppConfig();
+  }
+
+  checkIfUserExistAndGetToken() {
+    if (this.user) {
+      this.TOKEN = this.user.token
+    } else {
+      this.logger.log('[AUTOMATIONS.SERVICE] - No user signed in');
+    }
+  }
+
+  getAppConfig() {
+    this.SERVER_BASE_PATH = this.appConfigService.getConfig().SERVER_BASE_URL;
+  }
+
+  getCurrentProject() {
+    this.auth.project_bs.subscribe((project) => {
+      if (project) {
+        this.project_id = project._id
+      }
+    }, (error) => {
+      this.logger.error('[AUTOMATIONS.SERVICE] - get current project ERROR: ', error);
+    }, () => {
+      this.logger.debug('[AUTOMATIONS.SERVICE] - get current project *COMPLETE*');
+    });
+  }
+
+  getTransactions(channel) {
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        'Authorization': this.TOKEN
+      })
+    }
+
+    const url = this.SERVER_BASE_PATH + this.project_id + "/logs/" + channel;
+    this.logger.debug('[AUTOMATIONS.SERVICE] - get transaction for current project');
+
+    return this.httpClient.get(url, httpOptions);
+  }
+
+  getTransactionLogs(transaction_id) {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        'Authorization': this.TOKEN
+      })
+    }
+
+    const url = this.SERVER_BASE_PATH + this.project_id + "/logs/whatsapp/" + transaction_id;
+    this.logger.debug('[AUTOMATIONS.SERVICE] - get logs for transaction_id ' + transaction_id);
+
+    return this.httpClient.get(url, httpOptions);
+  }
+}