diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
index bf188fde9e..e2fb1d46ec 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
@@ -71,4 +71,56 @@ export default `
 background-color: rgba(0, 0, 0, 0.6);
 }
 
+.confirmation .confirmation-backdrop {
+	 background: rgba(0, 0, 0, 0.7) !important;
+}
+ .confirmation .confirmation-dialog {
+	 border: none;
+	 border-radius: 10px;
+	 background-color: #fff;
+	 box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
+}
+ .confirmation .confirmation-dialog .icon-container .icon {
+	 stroke: #fff;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .icon-container.info .icon {
+	 stroke: #2f96b4;
+	 color: #2f96b4;
+}
+ .confirmation .confirmation-dialog .icon-container.success .icon {
+	 stroke: #51a351;
+	 color: #51a351;
+}
+ .confirmation .confirmation-dialog .icon-container.warning .icon {
+	 stroke: #f89406;
+	 color: #f89406;
+}
+ .confirmation .confirmation-dialog .icon-container.error .icon {
+	 stroke: #bd362f;
+	 color: #bd362f;
+}
+ .confirmation .confirmation-dialog .content .title {
+	 color: #222;
+}
+ .confirmation .confirmation-dialog .content .message {
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer {
+	 background: transparent;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button {
+	 background-color: #eee;
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button:hover, .confirmation .confirmation-dialog .footer .confirmation-button:focus, .confirmation .confirmation-dialog .footer .confirmation-button:active {
+	 background-color: #bbb;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm {
+	 background-color: #2f96b4;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm:hover {
+	 background-color: #2e819b;
+}
 `;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index 07faa3a8a7..f2b1417f14 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,4 +1,4 @@
-<div class="confirmation show" *ngIf="visible">
+<div class="confirmation" *ngIf="visible">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
     <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
@@ -15,7 +15,7 @@
     <div class="footer">
       <button
         id="cancel"
-        class="confirmation-button confirmation-button-reject"
+        class="confirmation-button confirmation-button--reject"
         *ngIf="!data?.options?.hideCancelBtn"
         (click)="close(reject)"
       >
@@ -23,7 +23,7 @@
       </button>
       <button
         id="confirm"
-        class="confirmation-button confirmation-button-approve"
+        class="confirmation-button confirmation-button--approve"
         *ngIf="!data?.options?.hideYesBtn"
         (click)="close(confirm)"
       >
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
index 752bb22eee..a28dd3a7c3 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
@@ -4,19 +4,16 @@
   right: 0;
   bottom: 0;
   left: 0;
-  display: none;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1060;
-  &.show {
-    display: grid;
-  }
   .confirmation-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(#000, 0.7);
     z-index: 1061 !important;
   }
   .confirmation-dialog {
@@ -24,12 +21,8 @@
     flex-direction: column;
     margin: 20px auto;
     padding: 0;
-    border: none;
-    border-radius: 10px;
     width: 450px;
     min-height: 300px;
-    background-color: #fff;
-    box-shadow: 0 0 10px -5px rgba(#000, 0.5);
     z-index: 1062 !important;
     .icon-container {
       display: flex;
@@ -41,28 +34,9 @@
         width: 100px;
         height: 100px;
         stroke-width: 1;
-        fill: #fff;
         font-size: 80px;
         text-align: center;
       }
-      &.neutral .icon {
-      }
-      &.info .icon {
-        stroke: #2f96b4;
-        color: #2f96b4;
-      }
-      &.success .icon {
-        stroke: #51a351;
-        color: #51a351;
-      }
-      &.warning .icon {
-        stroke: #f89406;
-        color: #f89406;
-      }
-      &.error .icon {
-        stroke: #bd362f;
-        color: #bd362f;
-      }
     }
     .content {
       flex-grow: 1;
@@ -79,7 +53,6 @@
         display: block;
         margin: 10px auto;
         padding: 20px;
-        color: #777;
         font-size: 16px;
         font-weight: 400;
         text-align: center;
@@ -98,22 +71,8 @@
         padding: 10px 20px;
         border: none;
         border-radius: 6px;
-        color: #777;
         font-size: 14px;
         font-weight: 600;
-        background-color: #eee;
-        &:hover {
-          background-color: darken(#eee, 5);
-        }
-        &-reject {
-        }
-        &-approve {
-          background-color: #2f96b4;
-          color: #fff;
-          &:hover {
-            background-color: darken(#2f96b4, 5);
-          }
-        }
       }
     }
   }