diff --git a/booklore-ui/src/app/features/book/components/shelf-assigner/shelf-assigner.component.scss b/booklore-ui/src/app/features/book/components/shelf-assigner/shelf-assigner.component.scss
index 3bc58203f..6773e4516 100644
--- a/booklore-ui/src/app/features/book/components/shelf-assigner/shelf-assigner.component.scss
+++ b/booklore-ui/src/app/features/book/components/shelf-assigner/shelf-assigner.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .shelf-assigner {
   width: 550px;
   max-width: 550px;
@@ -11,81 +13,8 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
+  @include panel.panel-header;
   border-bottom: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem 3rem 1rem 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-
-      .p-button {
-        width: 2rem;
-        height: 2rem;
-      }
-    }
-  }
 }
 
 .shelves-container {
@@ -339,31 +268,6 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    flex-direction: column;
-    padding: 1rem;
-    gap: 0.5rem;
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
 }
diff --git a/booklore-ui/src/app/features/book/components/shelf-creator/shelf-creator.component.scss b/booklore-ui/src/app/features/book/components/shelf-creator/shelf-creator.component.scss
index 45f04e7ff..ea549d8eb 100644
--- a/booklore-ui/src/app/features/book/components/shelf-creator/shelf-creator.component.scss
+++ b/booklore-ui/src/app/features/book/components/shelf-creator/shelf-creator.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .shelf-creator {
   display: flex;
   flex-direction: column;
@@ -10,80 +12,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
@@ -306,88 +235,10 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .validation-status {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 1rem;
-    gap: 0.75rem;
-
-    .validation-status {
-      width: 100%;
-    }
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
 }
 
 .validation-message {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-weight: 500;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  width: fit-content;
-  max-width: 100%;
-
-  i {
-    font-size: 0.95rem;
-  }
-
-  &.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: rgb(239, 68, 68);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-
-    i {
-      color: rgb(239, 68, 68);
-    }
-  }
-
-  &.success {
-    background: rgba(34, 197, 94, 0.1);
-    color: rgb(34, 197, 94);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-
-    i {
-      color: rgb(34, 197, 94);
-    }
-  }
-
-  @media (max-width: 640px) {
-    font-size: 0.8rem;
-    padding: 0.375rem 0.5rem;
-    width: 100%;
-
-    i {
-      font-size: 0.875rem;
-    }
-  }
+  @include panel.validation-message;
 }
diff --git a/booklore-ui/src/app/features/book/components/shelf-edit-dialog/shelf-edit-dialog.component.scss b/booklore-ui/src/app/features/book/components/shelf-edit-dialog/shelf-edit-dialog.component.scss
index 9b4a187e2..e3f3dfe78 100644
--- a/booklore-ui/src/app/features/book/components/shelf-edit-dialog/shelf-edit-dialog.component.scss
+++ b/booklore-ui/src/app/features/book/components/shelf-edit-dialog/shelf-edit-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .shelf-form {
   width: 550px;
   max-width: 550px;
@@ -11,80 +13,8 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
+  @include panel.panel-header;
   border-bottom: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem 3rem 1rem 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-
-      .p-button {
-        width: 2rem;
-        height: 2rem;
-      }
-    }
-  }
 }
 
 .shelf-container {
@@ -173,31 +103,6 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    flex-direction: column;
-    padding: 1rem;
-    gap: 0.5rem;
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
 }
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-settings/dashboard-settings.component.scss b/booklore-ui/src/app/features/dashboard/components/dashboard-settings/dashboard-settings.component.scss
index e3023e426..48b2d02a7 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-settings/dashboard-settings.component.scss
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-settings/dashboard-settings.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .dashboard-settings {
   width: 1000px;
   max-width: 1000px;
@@ -11,81 +13,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  ::ng-deep .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .settings-controls {
@@ -267,36 +195,17 @@ label {
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
 
   .footer-left {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    flex: 1;
-  }
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
   }
 
   @media (max-width: 640px) {
-    flex-direction: column;
-    padding: 1rem;
-    gap: 0.75rem;
-
     .footer-left {
-      width: 100%;
       flex-direction: column;
       gap: 0.5rem;
 
@@ -306,8 +215,6 @@ label {
     }
 
     .footer-actions {
-      width: 100%;
-
       ::ng-deep .p-button {
         flex: 1;
       }
diff --git a/booklore-ui/src/app/features/library-creator/library-creator.component.html b/booklore-ui/src/app/features/library-creator/library-creator.component.html
index 2ed127d64..7da35faa2 100644
--- a/booklore-ui/src/app/features/library-creator/library-creator.component.html
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.html
@@ -1,13 +1,13 @@
 <div class="library-creator">
   <div class="main-header">
-    <div class="main-header-icon">
-      <i class="pi pi-book"></i>
+    <div class="header-icon-wrapper">
+      <i class="header-icon pi pi-book"></i>
     </div>
-    <div class="main-header-content">
-      <h1 class="main-header-title">
+    <div class="header-text">
+      <h1 class="panel-title">
         {{ mode === 'edit' ? 'Edit Library' : 'Create New Library' }}
       </h1>
-      <p class="main-header-subtitle">Set up a new library to organize and manage your book collection</p>
+      <p class="panel-description">Set up a new library to organize and manage your book collection</p>
     </div>
     <p-button
       icon="pi pi-times"
diff --git a/booklore-ui/src/app/features/library-creator/library-creator.component.scss b/booklore-ui/src/app/features/library-creator/library-creator.component.scss
index fa484f56b..3a509cd0e 100644
--- a/booklore-ui/src/app/features/library-creator/library-creator.component.scss
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.scss
@@ -1,3 +1,5 @@
+@use '../../shared/styles/panel-shared' as panel;
+
 .library-creator {
   width: 700px;
   max-width: 700px;
@@ -24,129 +26,26 @@
 }
 
 .main-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+  @include panel.panel-header;
   padding: 1.75rem 1.75rem 1.25rem 1.75rem;
   background: var(--overlay-background);
   border-bottom: 1px solid var(--border-color);
-  border-radius: 10px 10px 0 0;
   margin-bottom: 1.5rem;
 
-  .main-header-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
+  .header-icon-wrapper {
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
-    flex-shrink: 0;
-
-    i {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .main-header-content {
-    flex: 1;
-
-    .main-header-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .main-header-subtitle {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  ::ng-deep .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
   }
 
   @media (max-width: 768px) {
     padding: 1.25rem;
-
-    .main-header-icon {
-      width: 44px;
-      height: 44px;
-
-      i {
-        font-size: 1.375rem;
-      }
-    }
-
-    .main-header-content {
-      .main-header-title {
-        font-size: 1.25rem;
-      }
-
-      .main-header-subtitle {
-        font-size: 0.875rem;
-      }
-    }
   }
 
   @media (max-width: 640px) {
     padding: 1.25rem;
-    gap: 1rem;
-
-    .main-header-icon {
-      width: 42px;
-      height: 42px;
-
-      i {
-        font-size: 1.25rem;
-      }
-    }
-
-    .main-header-content {
-      .main-header-title {
-        font-size: 1.125rem;
-      }
-
-      .main-header-subtitle {
-        font-size: 0.8rem;
-      }
-    }
   }
 
   @media (max-width: 480px) {
     padding: 1rem;
-
-    .main-header-icon {
-      width: 40px;
-      height: 40px;
-
-      i {
-        font-size: 1.25rem;
-      }
-    }
-
-    .main-header-content {
-      .main-header-title {
-        font-size: 1.125rem;
-      }
-
-      .main-header-subtitle {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
   }
 }
 
@@ -267,81 +166,7 @@
 }
 
 .panel-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: var(--overlay-background);
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    flex-shrink: 0;
-
-    .header-icon {
-      font-size: 1.375rem;
-      color: dodgerblue;
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    text-align: center;
-
-    .header-icon-wrapper {
-      width: 42px;
-      height: 42px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text .panel-title {
-      font-size: 1.125rem;
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 0.5rem;
-
-    .header-icon-wrapper {
-      width: 36px;
-      height: 36px;
-
-      .header-icon {
-        font-size: 1rem;
-      }
-    }
-
-    .header-text .panel-title {
-      font-size: 1rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
@@ -994,86 +819,13 @@
 }
 
 .panel-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
+  @include panel.dialog-footer;
   border-top: 1px solid var(--border-color);
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  border-left: none;
+  border-right: none;
   flex-shrink: 0;
-
-  .validation-status {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .footer-right {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 1rem;
-    gap: 0.75rem;
-
-    .validation-status {
-      width: 100%;
-    }
-
-    .footer-right {
-      width: 100%;
-      flex-direction: row;
-      justify-content: flex-end;
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 0.75rem 0.5rem 0;
-    gap: 0.5rem;
-
-    .footer-right {
-      gap: 0.5rem;
-    }
-  }
 }
 
 .validation-message {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-weight: 500;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  width: fit-content;
-  max-width: 100%;
-
-  i {
-    font-size: 0.95rem;
-  }
-
-  &.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: rgb(239, 68, 68);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-  }
-
-  &.success {
-    background: rgba(34, 197, 94, 0.1);
-    color: rgb(34, 197, 94);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-  }
-
-  @media (max-width: 640px) {
-    font-size: 0.8rem;
-    padding: 0.375rem 0.5rem;
-    width: 100%;
-  }
+  @include panel.validation-message;
 }
diff --git a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.scss b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.scss
index 2846141e9..c80fd15d5 100644
--- a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.scss
+++ b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.scss
@@ -1,3 +1,5 @@
+@use '../../../shared/styles/panel-shared' as panel;
+
 .magic-shelf-container {
   width: 75rem;
   max-width: 75rem;
@@ -11,87 +13,8 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
+  @include panel.panel-header;
   border-bottom: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  ::ng-deep .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-
-      .p-button {
-        width: 2rem;
-        height: 2rem;
-      }
-    }
-  }
 }
 
 .magic-shelf-content {
@@ -257,31 +180,7 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-    gap: 0.5rem;
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
+  @include panel.dialog-footer-end;
 }
 
 .save-button-section {
diff --git a/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss b/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss
index 91b3fa411..bf39ba372 100644
--- a/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .font-upload-dialog {
   width: 700px;
   max-width: 700px;
@@ -11,86 +13,8 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
+  @include panel.panel-header;
   border-bottom: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-
-      ::ng-deep .p-button {
-        width: 2rem;
-        height: 2rem;
-      }
-    }
-  }
 }
 
 .upload-container {
@@ -424,20 +348,10 @@
 
 // ==================== Dialog Footer ====================
 .dialog-footer {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  padding: 1rem 1.5rem 1.5rem;
+  @include panel.dialog-footer-end;
   border-top: 1px solid var(--border-color);
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-
-    ::ng-deep .p-button {
-      width: 100%;
-    }
-  }
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  box-shadow: none;
 }
diff --git a/booklore-ui/src/app/features/settings/email-v2/create-email-provider-dialog/create-email-provider-dialog.component.scss b/booklore-ui/src/app/features/settings/email-v2/create-email-provider-dialog/create-email-provider-dialog.component.scss
index d15b31510..f75475a29 100644
--- a/booklore-ui/src/app/features/settings/email-v2/create-email-provider-dialog/create-email-provider-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/email-v2/create-email-provider-dialog/create-email-provider-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .email-provider-form {
   padding: 1.5rem;
   display: flex;
@@ -17,80 +19,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
@@ -273,90 +202,12 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .validation-status {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 1rem;
-    gap: 0.75rem;
-
-    .validation-status {
-      width: 100%;
-    }
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
 }
 
 .validation-message {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-weight: 500;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  width: fit-content;
-  max-width: 100%;
-
-  i {
-    font-size: 0.95rem;
-  }
-
-  &.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: rgb(239, 68, 68);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-
-    i {
-      color: rgb(239, 68, 68);
-    }
-  }
-
-  &.success {
-    background: rgba(34, 197, 94, 0.1);
-    color: rgb(34, 197, 94);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-
-    i {
-      color: rgb(34, 197, 94);
-    }
-  }
-
-  @media (max-width: 640px) {
-    font-size: 0.8rem;
-    padding: 0.375rem 0.5rem;
-    width: 100%;
-
-    i {
-      font-size: 0.875rem;
-    }
-  }
+  @include panel.validation-message;
 }
 
 .form-actions {
diff --git a/booklore-ui/src/app/features/settings/email-v2/create-email-recipient-dialog/create-email-recipient-dialog.component.scss b/booklore-ui/src/app/features/settings/email-v2/create-email-recipient-dialog/create-email-recipient-dialog.component.scss
index 93843cccc..98d6613cf 100644
--- a/booklore-ui/src/app/features/settings/email-v2/create-email-recipient-dialog/create-email-recipient-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/email-v2/create-email-recipient-dialog/create-email-recipient-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .email-recipient-creator {
   display: flex;
   flex-direction: column;
@@ -10,80 +12,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
@@ -248,89 +177,11 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  .validation-status {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 1rem;
-    gap: 0.75rem;
-
-    .validation-status {
-      width: 100%;
-    }
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
 }
 
 .validation-message {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-weight: 500;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  width: fit-content;
-  max-width: 100%;
-
-  i {
-    font-size: 0.95rem;
-  }
-
-  &.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: rgb(239, 68, 68);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-
-    i {
-      color: rgb(239, 68, 68);
-    }
-  }
-
-  &.success {
-    background: rgba(34, 197, 94, 0.1);
-    color: rgb(34, 197, 94);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-
-    i {
-      color: rgb(34, 197, 94);
-    }
-  }
-
-  @media (max-width: 640px) {
-    font-size: 0.8rem;
-    padding: 0.375rem 0.5rem;
-    width: 100%;
-
-    i {
-      font-size: 0.875rem;
-    }
-  }
+  @include panel.validation-message;
 }
 
diff --git a/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss b/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss
index bd84b637e..2b39d8218 100644
--- a/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../shared/styles/panel-shared' as panel;
+
 .create-user-dialog {
   width: 800px;
   max-width: 800px;
@@ -11,81 +13,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  ::ng-deep .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    ::ng-deep .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
@@ -349,16 +277,8 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
 
   .footer-info {
     display: flex;
@@ -372,25 +292,9 @@
     }
   }
 
-  .footer-actions {
-    display: flex;
-    gap: 0.75rem;
-  }
-
   @media (max-width: 640px) {
-    flex-direction: column;
-    padding: 1rem;
-    gap: 0.75rem;
-
     .footer-info {
-      width: 100%;
       justify-content: center;
     }
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
   }
 }
diff --git a/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss b/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss
index 40ef91991..cef71afda 100644
--- a/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss
@@ -1,3 +1,5 @@
+@use '../../../shared/styles/panel-shared' as panel;
+
 .user-profile-dialog {
   width: 500px;
   max-width: 650px;
@@ -11,85 +13,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  ::ng-deep .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-
-    .p-button {
-      width: 2.5rem;
-      height: 2.5rem;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.04);
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem 3rem 1rem 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-  }
+  @include panel.panel-header;
 }
 
 .form-container {
diff --git a/booklore-ui/src/app/shared/components/book-uploader/book-uploader.component.scss b/booklore-ui/src/app/shared/components/book-uploader/book-uploader.component.scss
index 7a7c90a62..bd50767b6 100644
--- a/booklore-ui/src/app/shared/components/book-uploader/book-uploader.component.scss
+++ b/booklore-ui/src/app/shared/components/book-uploader/book-uploader.component.scss
@@ -1,3 +1,5 @@
+@use '../../styles/panel-shared' as panel;
+
 .book-uploader {
   width: 700px;
   max-width: 700px;
@@ -11,86 +13,8 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
+  @include panel.panel-header;
   border-bottom: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-
-    .close-button {
-      top: 0.5rem;
-      right: 0.5rem;
-
-      ::ng-deep .p-button {
-        width: 2rem;
-        height: 2rem;
-      }
-    }
-  }
 }
 
 .upload-container {
diff --git a/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss b/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss
index ccb84c895..1c712dfad 100644
--- a/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss
+++ b/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss
@@ -1,3 +1,5 @@
+@use '../../styles/panel-shared' as panel;
+
 .responsive-table {
   min-width: 50rem;
 
@@ -20,70 +22,7 @@
 }
 
 .panel-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  border-radius: 10px 10px 0 0;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  .header-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: var(--primary-color);
-    border-radius: 10px;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
-
-    .header-icon {
-      font-size: 1.5rem;
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .header-text {
-    flex: 1;
-
-    .panel-title {
-      margin: 0 0 0.25rem 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-color);
-    }
-
-    .panel-description {
-      margin: 0;
-      font-size: 0.875rem;
-      color: var(--text-secondary-color);
-    }
-  }
-
-  @media (max-width: 480px) {
-    padding: 1rem;
-
-    .header-icon-wrapper {
-      width: 40px;
-      height: 40px;
-
-      .header-icon {
-        font-size: 1.25rem;
-      }
-    }
-
-    .header-text {
-      .panel-title {
-        font-size: 1.125rem;
-      }
-
-      .panel-description {
-        font-size: 0.8rem;
-      }
-    }
-  }
+  @include panel.panel-header;
 }
 
 .picker-controls {
@@ -539,53 +478,25 @@
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
+  @include panel.dialog-footer;
   border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
 
-  .footer-info {
-    flex: 1;
-
-    .selection-info {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: var(--text-secondary-color);
-      font-size: 0.9rem;
-
-      i {
-        color: var(--primary-color);
-      }
-    }
-  }
-
-  .footer-actions {
+  .selection-info {
     display: flex;
-    gap: 0.75rem;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-secondary-color);
+    font-size: 0.9rem;
+
+    i {
+      color: var(--primary-color);
+    }
   }
 
   @media (max-width: 480px) {
-    flex-direction: column;
-    padding: 1rem;
-    gap: 0.5rem;
-
     .footer-info {
-      width: 100%;
       text-align: center;
     }
-
-    .footer-actions {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
   }
 }
 
diff --git a/booklore-ui/src/app/shared/styles/_panel-shared.scss b/booklore-ui/src/app/shared/styles/_panel-shared.scss
new file mode 100644
index 000000000..a39245ee5
--- /dev/null
+++ b/booklore-ui/src/app/shared/styles/_panel-shared.scss
@@ -0,0 +1,190 @@
+// Shared mixins for panel headers and dialog footers
+// This file provides consistent styling for dialog/panel components
+
+@mixin panel-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
+  border-radius: 10px 10px 0 0;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+  .header-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: var(--primary-color);
+    border-radius: 10px;
+    flex-shrink: 0;
+
+    .header-icon {
+      font-size: 1.5rem;
+      color: var(--primary-contrast-color);
+    }
+  }
+
+  .header-text {
+    flex: 1;
+
+    .panel-title {
+      margin: 0 0 0.25rem 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+
+    .panel-description {
+      margin: 0;
+      font-size: 0.875rem;
+      color: var(--text-secondary-color);
+    }
+  }
+
+  .close-button,
+  ::ng-deep .close-button {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 1rem;
+
+    .header-icon-wrapper {
+      width: 40px;
+      height: 40px;
+
+      .header-icon {
+        font-size: 1.25rem;
+      }
+    }
+
+    .header-text {
+      .panel-title {
+        font-size: 1.125rem;
+      }
+
+      .panel-description {
+        font-size: 0.8rem;
+      }
+    }
+
+    .close-button,
+    ::ng-deep .close-button {
+      top: 0.5rem;
+      right: 0.5rem;
+    }
+  }
+}
+
+@mixin dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.25rem 1.5rem;
+  background: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: 0 0 10px 10px;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+
+  .footer-info,
+  .validation-status {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .footer-actions,
+  .footer-right {
+    display: flex;
+    gap: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem;
+    gap: 0.75rem;
+
+    .footer-info,
+    .validation-status {
+      width: 100%;
+    }
+
+    .footer-actions,
+    .footer-right {
+      width: 100%;
+      justify-content: flex-end;
+      gap: 0.5rem;
+    }
+  }
+}
+
+// Variant for footers that only need right-aligned actions
+@mixin dialog-footer-end {
+  @include dialog-footer;
+  justify-content: flex-end;
+
+  @media (max-width: 480px) {
+    padding: 1rem;
+    gap: 0.5rem;
+
+    .footer-actions {
+      width: 100%;
+      justify-content: flex-end;
+      gap: 0.5rem;
+    }
+  }
+}
+
+// Validation message styles commonly used in footers
+@mixin validation-message {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-weight: 500;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  width: fit-content;
+  max-width: 100%;
+
+  i {
+    font-size: 0.95rem;
+  }
+
+  &.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: rgb(239, 68, 68);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+
+    i {
+      color: rgb(239, 68, 68);
+    }
+  }
+
+  &.success {
+    background: rgba(34, 197, 94, 0.1);
+    color: rgb(34, 197, 94);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+
+    i {
+      color: rgb(34, 197, 94);
+    }
+  }
+
+  @media (max-width: 640px) {
+    font-size: 0.8rem;
+    padding: 0.375rem 0.5rem;
+    width: 100%;
+
+    i {
+      font-size: 0.875rem;
+    }
+  }
+}