diff --git a/src/app/pages/publications/publications.module.ts b/src/app/pages/publications/publications.module.ts
index 457aa4759..d484b04fa 100644
--- a/src/app/pages/publications/publications.module.ts
+++ b/src/app/pages/publications/publications.module.ts
@@ -11,6 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
 import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
 import { PublicationDetailPage } from 'src/app/shared/publication/publication-detail/publication-detail.page';
+import { NewActionPage } from 'src/app/shared/publication/new-action/new-action.page';
 
 
 @NgModule({
@@ -25,7 +26,8 @@ import { PublicationDetailPage } from 'src/app/shared/publication/publication-de
     PublicationsPage,
     ViewPublicationsPage,
     NewPublicationPage,
-    PublicationDetailPage
+    PublicationDetailPage,
+    NewActionPage
   ]
 })
 export class PublicationsPageModule {}
diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html
index 62e73ad84..4d5920280 100644
--- a/src/app/pages/publications/publications.page.html
+++ b/src/app/pages/publications/publications.page.html
@@ -88,6 +88,12 @@
         [publicationId]="publicationId"
       ></app-publication-detail-shared>
 
+      <app-new-action
+        *ngIf="desktopComponent.showAddActions"
+        class="height-100 d-flex flex-column overflow-hidden background-white"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+      ></app-new-action>
+
     </div>
 
   </div>
diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts
index 131658f40..5d2d83a3f 100644
--- a/src/app/pages/publications/publications.page.ts
+++ b/src/app/pages/publications/publications.page.ts
@@ -35,7 +35,8 @@ export class PublicationsPage implements OnInit {
   desktopComponent: any = {
     showViewPublication: false,
     showAddNewPublication: false,
-    showPublicationDetail: false
+    showPublicationDetail: false,
+    showAddActions: false
   }
 
   folderId: string;
@@ -102,19 +103,24 @@ export class PublicationsPage implements OnInit {
   async AddPublicationFolder(item:any) {
     
     this.closeDesktopComponent();
+    if(window.innerHeight >= 1024){
+      const modal = await this.modalController.create({
+        component: NewActionPage,
+        componentProps:{
+          item: item,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh();
+      });
+    } else {
+      this.desktopComponent.showAddActions = true;
+    }
     
-    const modal = await this.modalController.create({
-      component: NewActionPage,
-      componentProps:{
-        item: item,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      this.doRefresh();
-    });
+
   }
 
   async viewPublications(folderId: string) {
@@ -197,7 +203,8 @@ export class PublicationsPage implements OnInit {
     this.desktopComponent = {
       showViewPublication: false,
       showAddNewPublication: false,
-      showPublicationDetail: false
+      showPublicationDetail: false,
+      showAddActions: false,
     }
   }
 
diff --git a/src/app/shared/publication/new-action/new-action-routing.module.ts b/src/app/shared/publication/new-action/new-action-routing.module.ts
new file mode 100644
index 000000000..1d4569653
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewActionPage } from './new-action.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewActionPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewActionPageRoutingModule {}
diff --git a/src/app/shared/publication/new-action/new-action.module.ts b/src/app/shared/publication/new-action/new-action.module.ts
new file mode 100644
index 000000000..466fe5a3a
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NewActionPageRoutingModule } from './new-action-routing.module';
+
+import { NewActionPage } from './new-action.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewActionPageRoutingModule
+  ],
+  declarations: [NewActionPage]
+})
+export class NewActionPageModule {}
diff --git a/src/app/shared/publication/new-action/new-action.page.html b/src/app/shared/publication/new-action/new-action.page.html
new file mode 100644
index 000000000..40e9946b8
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.html
@@ -0,0 +1,95 @@
+<ion-header class="ion-no-border pt-20 px-20">
+  <div class="title-content d-flex align-center justify-space-between ">
+    <div class="div-title">
+      <ion-label class="title"> Nova Acção</ion-label>
+    </div>
+    <div class="actionType">
+      <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+        <ion-segment-button value="Viagem">
+          <ion-label>Viagem</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="Evento">
+          <ion-label>Evento</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </div>
+    
+  </div>
+</ion-header>
+
+<ion-content>
+  <div class="content-container">
+
+    <div class="ion-item-container">
+      <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex ">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            [(ngModel)]="folder.DateBegin"
+            placeholder="Início"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022">
+          </ion-datetime>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class d-flex flex-grow-1">
+          <ion-datetime 
+            class="flex-grow-1"
+            [(ngModel)]="folder.DateEnd"
+            placeholder="Fim"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022">
+          </ion-datetime>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-textarea-class flex-grow-1">
+          <ion-textarea [(ngModel)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da acção..."></ion-textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
+
+</ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar width-100 justify-space-between d-flex px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Criar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/shared/publication/new-action/new-action.page.scss b/src/app/shared/publication/new-action/new-action.page.scss
new file mode 100644
index 000000000..d2a0784bd
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.scss
@@ -0,0 +1,128 @@
+:host{
+  background: #fff;
+}
+ion-content{
+  --background: transparent;
+  transform: translate3d(0, 5px, 0);
+  --border-radius: 30px;
+}
+ion-footer{
+    background: #fff;
+}
+ion-toolbar{
+  /* --background:#0782c9; */
+  border-width: 0 !important;
+}
+.div-top-header{
+  margin: 0 auto;
+  background-color: #0782c9;
+  overflow: auto;
+  padding-top: 15px;
+  border: 0!important;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 140px;
+  margin: 5px 0 0px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}
+.content-top{
+  background: #f3f2f2;
+  height: 20px;
+  margin: 0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+}
+.content-container{
+  width: 100%;
+  margin:0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background: #ffffff;
+  height: 100%;
+  padding: 25px 20px 0 20px;
+  overflow: auto;
+}
+.title-content{
+  margin: 0px auto;
+  overflow: auto;
+  padding: 0 !important;
+}
+.div-title{
+  width: 180px;
+/* padding: 0!important; */
+float: left;
+margin: 2.5px 0 0 5px;
+}
+.title{
+font-size: 25px;
+}
+.container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+  }
+  .ion-item-container-no-border{
+    width: 100%;
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  .ion-input-class{
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-textarea-class{
+    width: 315px;
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .actionType{
+   float: right;
+    overflow: auto;
+    border-radius: 30px;
+  }
+  .ion-segment{
+    --background: #0782c9;
+  }
\ No newline at end of file
diff --git a/src/app/shared/publication/new-action/new-action.page.spec.ts b/src/app/shared/publication/new-action/new-action.page.spec.ts
new file mode 100644
index 000000000..7407b0b41
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewActionPage } from './new-action.page';
+
+describe('NewActionPage', () => {
+  let component: NewActionPage;
+  let fixture: ComponentFixture<NewActionPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewActionPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewActionPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/publication/new-action/new-action.page.ts b/src/app/shared/publication/new-action/new-action.page.ts
new file mode 100644
index 000000000..6b7ab30ee
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.ts
@@ -0,0 +1,52 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { PublicationsService } from 'src/app/services/publications.service';
+
+@Component({
+  selector: 'app-new-action',
+  templateUrl: './new-action.page.html',
+  styleUrls: ['./new-action.page.scss'],
+})
+export class NewActionPage implements OnInit {
+
+  folder: PublicationFolder;
+  segment:string;
+
+  @Output() closeDesktopComponent= new EventEmitter<any>();
+
+  constructor(
+    private modalController: ModalController,
+    private publication: PublicationsService
+  ) { 
+    this.folder = new PublicationFolder();
+  }
+
+  ngOnInit() {
+    this.segment = "Viagem";
+  }
+
+  segmentChanged(ev: any) {
+    console.log(ev.detail.value);
+  }
+
+  save(){
+    this.folder = {
+      ProcessId: null,
+      Description: this.folder.Description,
+      Detail: this.folder.Detail,
+      DateBegin: this.folder.DateBegin,
+      DateEnd: this.folder.DateEnd,
+      ActionType: this.segment,
+    }
+    console.log(this.folder);
+    
+    this.publication.CreatePublicationFolder(this.folder);
+    this.close();
+  }
+
+  close(){
+    this.closeDesktopComponent.emit();
+  }
+
+}
diff --git a/src/app/shared/publication/publication-detail/publication-detail.page.html b/src/app/shared/publication/publication-detail/publication-detail.page.html
index 4fceaf3a8..ddbede493 100644
--- a/src/app/shared/publication/publication-detail/publication-detail.page.html
+++ b/src/app/shared/publication/publication-detail/publication-detail.page.html
@@ -57,7 +57,7 @@
   </div>     
 </ion-content>
 <ion-footer>
-  <ion-toolbar class="footer-toolbar">
+  <ion-toolbar class="footer-toolbar width-md-100 px-md-20">
     <ion-buttons slot="start">
       <ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
         <ion-label>Eliminar</ion-label>
diff --git a/src/style/main.scss b/src/style/main.scss
index ccb5ab9e9..dceb24bd9 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -150,35 +150,35 @@
     
       @each $property, $short in $properties {
         // all directions
-        .#{$short}-md-a-#{$size} {
+        .#{$short}a-md-#{$size} {
           #{$property}-left: #{$size}px !important; 
           #{$property}-right: #{$size}px !important;
           #{$property}-top: #{$size}px !important; 
           #{$property}-bottom: #{$size}px !important;
         }
         // top
-        .#{$short}-md-t-#{$size} {
+        .#{$short}t-md-#{$size} {
           #{$property}-top: #{$size}px !important
         }
         // bottom
-        .#{$short}-md-b-#{$size} {
+        .#{$short}b-md-#{$size} {
           #{$property}-bottom: #{$size}px !important
         }
         // left
-        .#{$short}-md-l-#{$size} {
+        .#{$short}l-md-#{$size} {
           #{$property}-left: #{$size}px!important
         }
         // right
-        .#{$short}-md-r-#{$size} {
+        .#{$short}r-md-#{$size} {
           #{$property}-right: #{$size}px!important
         }
         // left and right
-        .#{$short}-md-x-#{$size} {
+        .#{$short}x-md-#{$size} {
           #{$property}-left: #{$size}px!important;
           #{$property}-right: #{$size}px!important;
         }
         // top and bottom
-        .#{$short}-md-y-#{$size} {
+        .#{$short}y-md-#{$size} {
           #{$property}-top: #{$size}px !important;
           #{$property}-bottom: #{$size}px !important;
         }
@@ -296,35 +296,35 @@
     
       @each $property, $short in $properties {
         // all directions
-        .#{$short}-lg-a-#{$size} {
+        .#{$short}a-lg-#{$size} {
           #{$property}-left: #{$size}px !important; 
           #{$property}-right: #{$size}px !important;
           #{$property}-top: #{$size}px !important; 
           #{$property}-bottom: #{$size}px !important;
         }
         // top
-        .#{$short}-lg-t-#{$size} {
+        .#{$short}t-lg-#{$size} {
           #{$property}-top: #{$size}px !important
         }
         // bottom
-        .#{$short}-lg-b-#{$size} {
+        .#{$short}b-lg-#{$size} {
           #{$property}-bottom: #{$size}px !important
         }
         // left
-        .#{$short}-lg-l-#{$size} {
+        .#{$short}l-lg-#{$size} {
           #{$property}-left: #{$size}px!important
         }
         // right
-        .#{$short}-lg-r-#{$size} {
+        .#{$short}r-lg-#{$size} {
           #{$property}-right: #{$size}px!important
         }
         // left and right
-        .#{$short}-lg-x-#{$size} {
+        .#{$short}x-lg-#{$size} {
           #{$property}-left: #{$size}px!important;
           #{$property}-right: #{$size}px!important;
         }
         // top and bottom
-        .#{$short}-lg-y-#{$size} {
+        .#{$short}y-lg-#{$size} {
           #{$property}-top: #{$size}px !important;
           #{$property}-bottom: #{$size}px !important;
         }