diff --git a/changelog.md b/changelog.md
index aaae905..5426e75 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-03 - 3.52.1 - fix(dees-modal)
+refine modal styling, spacing, and animations for a cleaner overlay presentation
+
+- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
+- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
+- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
+
 ## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
 add full page toggle control for chart area
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 3d47e2f..0101663 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.52.0',
+  version: '3.52.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
index 6758468..e61a02f 100644
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
@@ -129,8 +129,7 @@ export class DeesModal extends DeesElement {
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        will-change: transform;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
       .modalContainer {
         display: flex;
@@ -144,18 +143,21 @@ export class DeesModal extends DeesElement {
         justify-content: center;
       }
       dees-tile {
-        will-change: transform;
-        transform: translateY(0px) scale(0.95);
+        will-change: transform, opacity;
+        transform: translateY(8px) scale(0.98);
         opacity: 0;
         min-height: 120px;
-        max-height: calc(100vh - 40px);
-        transition: all 0.2s ease;
-        margin: 20px;
+        max-height: calc(100vh - 80px);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+        margin: 40px;
         overscroll-behavior: contain;
       }
 
       dees-tile::part(outer) {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
       }
 
       /* Width variations */
@@ -207,37 +209,45 @@ export class DeesModal extends DeesElement {
 
       dees-tile.show {
         opacity: 1;
-        transform: translateY(0px) scale(1);
+        transform: translateY(0) scale(1);
       }
 
       dees-tile.show.predestroy {
         opacity: 0;
-        transform: translateY(10px) scale(1);
+        transform: translateY(6px) scale(0.98);
+        transition: transform 0.15s ease-in, opacity 0.15s ease-in;
       }
 
       .heading {
-        height: 40px;
-        font-family: ${cssGeistFontFamily};
+        height: 36px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 12px;
+        padding: 0 8px 0 16px;
         position: relative;
       }
 
+      .heading .heading-text {
+        flex: 1;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       .heading .header-buttons {
         display: flex;
         align-items: center;
-        gap: 4px;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
+        gap: 2px;
+        flex-shrink: 0;
+        margin-left: 8px;
       }
 
       .heading .header-button {
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -245,88 +255,85 @@ export class DeesModal extends DeesElement {
         cursor: pointer;
         transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
       }
 
       .heading .header-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
       }
 
       .heading .header-button:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
       }
 
       .heading .header-button dees-icon {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
         display: block;
       }
 
-      .heading .heading-text {
-        flex: 1;
-        text-align: center;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 40px;
-        padding: 0 40px;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-      }
-
       .content {
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
       }
       .bottomButtons {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        gap: 8px;
-        padding: 8px;
+        align-items: center;
+        gap: 0;
+        height: 36px;
         width: 100%;
         box-sizing: border-box;
       }
 
       .bottomButtons .bottomButton {
-        padding: 8px 16px;
-        border-radius: 4px;
-        line-height: 16px;
+        padding: 0 16px;
+        height: 100%;
         text-align: center;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 500;
         cursor: pointer;
         user-select: none;
         transition: all 0.15s ease;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: transparent;
+        border: none;
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+      }
+
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
       }
 
       .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
+
       .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-      }
-      .bottomButtons .bottomButton:last-child {
-        border-right: none;
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
       }
 
       .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        color: #ffffff;
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
       }
+
       .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
-        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
+
       .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
-        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
       }
     `,
   ];