diff --git a/src/components/sq-modal/sq-modal.component.html b/src/components/sq-modal/sq-modal.component.html
index e87cb33..2ad985f 100644
--- a/src/components/sq-modal/sq-modal.component.html
+++ b/src/components/sq-modal/sq-modal.component.html
@@ -17,20 +17,40 @@
         [ngClass]="{
           'without-header': !hasHeader
         }"
+        [ngStyle]="{
+          background: headerBackgroundColor,
+          padding: headerPadding
+        }"
       >
         <ng-container *ngIf="headerTemplate">
           <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
         </ng-container>
-        <button *ngIf="buttonClose" type="button" class="close button-close" aria-label="Close" (click)="modalClose.emit()">
+        <button
+          *ngIf="buttonClose"
+          type="button"
+          class="close button-close"
+          aria-label="Close"
+          (click)="modalClose.emit()"
+        >
           <i class="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
 
-      <div class="modal-body scrollbar">
+      <div
+        class="modal-body scrollbar"
+        [ngStyle]="{ background: bodyBackgroundColor, padding: bodyPadding }"
+      >
         <ng-content></ng-content>
       </div>
 
-      <div class="modal-footer" *ngIf="footerTemplate">
+      <div
+        class="modal-footer"
+        [ngStyle]="{
+          background: footerBackgroundColor,
+          padding: footerPadding
+        }"
+        *ngIf="footerTemplate"
+      >
         <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
       </div>
     </div>
diff --git a/src/components/sq-modal/sq-modal.component.ts b/src/components/sq-modal/sq-modal.component.ts
index a9fb0fd..b88fac5 100644
--- a/src/components/sq-modal/sq-modal.component.ts
+++ b/src/components/sq-modal/sq-modal.component.ts
@@ -81,6 +81,36 @@ export class SqModalComponent implements OnChanges, OnDestroy {
    * Determines whether to display the close button.
    */
   @Input() buttonClose = true
+ 
+  /**
+   * Determines the header padding.
+   */
+  @Input() headerPadding = ''
+ 
+  /**
+   * Determines the body padding.
+   */
+  @Input() bodyPadding = '0 1rem'
+ 
+  /**
+   * Determines the footer padding.
+   */
+  @Input() footerPadding = ''
+ 
+  /**
+   * Determines the header background color.
+   */
+  @Input() headerBackgroundColor = ''
+ 
+  /**
+   * Determines the body background color.
+   */
+  @Input() bodyBackgroundColor = ''
+ 
+  /**
+   * Determines the footer background color.
+   */
+  @Input() footerBackgroundColor = ''
 
   /**
    * Event emitted when the modal is closed.
diff --git a/src/package.json b/src/package.json
index aab3b49..311a789 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",