diff --git a/packages/scripts/bin/app-scripts b/packages/scripts/bin/app-scripts
old mode 100644
new mode 100755
diff --git a/packages/scripts/bin/app-workflow b/packages/scripts/bin/app-workflow
old mode 100644
new mode 100755
diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html
index efaeac915f..310fc867a4 100644
--- a/src/app/shared/components/template/components/button/button.component.html
+++ b/src/app/shared/components/template/components/button/button.component.html
@@ -30,11 +30,12 @@
   <!-- "card-portrait" variant. This variant is not achievable using an ion-button -->
   <div
     *ngSwitchCase="true"
-    class="button-container"
+    class="button-container ion-activatable"
     (click)="triggerActions('click')"
     [attr.data-variant]="params.variant"
     [attr.data-has-children]="_row.rows ? true : false"
   >
+    <ion-ripple-effect></ion-ripple-effect>
     <img *ngIf="params.image" src="{{ params.image | plhAsset }}" />
     <div *ngIf="_row.value" [class]="'button-text ' + params.textAlign">
       {{ _row.value }}
diff --git a/src/app/shared/components/template/components/button/button.component.scss b/src/app/shared/components/template/components/button/button.component.scss
index 4d37f1500d..904127fc57 100644
--- a/src/app/shared/components/template/components/button/button.component.scss
+++ b/src/app/shared/components/template/components/button/button.component.scss
@@ -77,6 +77,11 @@ ion-button[data-variant~="card"] {
   }
 }
 
+// set the speed of the ripple effect to ensure that it is consistent across all buttons
+.ion-ripple-effect {
+  --ion-ripple-duration: 500ms;
+}
+
 .button-container[data-variant~="card-portrait"] {
   background-color: white;
   color: var(--ion-color-primary);
@@ -92,6 +97,7 @@ ion-button[data-variant~="card"] {
   padding: 1.5rem 0.5rem 0.5rem;
   // TODO: make a variable
   width: 160px;
+  overflow: hidden;
 
   &:active {
     background-color: var(--ion-color-gray-light);
diff --git a/src/app/shared/components/template/components/tile-component/tile-component.component.html b/src/app/shared/components/template/components/tile-component/tile-component.component.html
index ca277fd46f..058d85e204 100644
--- a/src/app/shared/components/template/components/tile-component/tile-component.component.html
+++ b/src/app/shared/components/template/components/tile-component/tile-component.component.html
@@ -1,4 +1,4 @@
-<div [class]="style" class="tile-wrapper default_style" (click)="triggerActions('click')">
+<div [class]="style" class="tile-wrapper default_style ripple-parent ion-activatable" (click)="triggerActions('click')">
   <div *ngIf="left_icon_src" class="left-icon">
     <ion-icon *ngIf="!isCustomIcon" [name]="left_icon_src"></ion-icon>
   </div>
diff --git a/src/app/shared/components/template/components/tile-component/tile-component.component.scss b/src/app/shared/components/template/components/tile-component/tile-component.component.scss
index 383f025baf..2984be30d7 100644
--- a/src/app/shared/components/template/components/tile-component/tile-component.component.scss
+++ b/src/app/shared/components/template/components/tile-component/tile-component.component.scss
@@ -41,7 +41,7 @@ $background-secondary-light: var(
       --box-shadow: none;
 
       box-shadow: none;
-      --ripple-color: transparent;
+
       img {
         width: 60px;
         height: 60px;
@@ -61,6 +61,7 @@ $background-secondary-light: var(
   box-shadow: var(--ion-default-box-shadow);
   min-height: var(--tile-default-height);
   border-radius: var(--ion-border-radius-standard);
+  overflow: hidden;
 }
 
 /***********************************************************************************************