diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
index 861d47e..04ede01 100644
--- a/ts_web/elements/dees-modal.ts
+++ b/ts_web/elements/dees-modal.ts
@@ -93,12 +93,12 @@ export class DeesModal extends DeesElement {
         opacity: 0;
         width: 480px;
         min-height: 120px;
-        background: #111;
+        background: ${cssManager.bdTheme('#ffffff', '#111')};
         border-radius: 8px;
-        border: 1px solid #222;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         transition: all 0.2s;
         overflow: hidden;
-        box-shadow: 0px 2px 5px #00000080;
+        box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
       }
 
       .modal.show {
@@ -118,7 +118,7 @@ export class DeesModal extends DeesElement {
         text-align: center;
         font-weight: 600;
         font-size: 12px;
-        border-bottom: 1px solid #222;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
       }
 
       .modal .content {
@@ -127,7 +127,7 @@ export class DeesModal extends DeesElement {
       .modal .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid #222;
+        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         justify-content: flex-end;
       }
 
@@ -138,8 +138,10 @@ export class DeesModal extends DeesElement {
         line-height: 16px;
         text-align: center;
         font-size: 14px;
-        cursor: default;
+        cursor: pointer;
         user-select: none;
+        transition: all 0.2s;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
       }
 
       .modal .bottomButtons .bottomButton:first-child {
@@ -151,13 +153,26 @@ export class DeesModal extends DeesElement {
 
       .modal .bottomButtons .bottomButton:hover {
         background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #ffffff;
       }
       .modal .bottomButtons .bottomButton:active {
         background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        color: #ffffff;
       }
       .modal .bottomButtons .bottomButton:last-child {
         border-right: none;
       }
+
+      .modal .bottomButtons .bottomButton.primary {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #ffffff;
+      }
+      .modal .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+      }
+      .modal .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
+      }
     `,
   ];
 
@@ -174,8 +189,8 @@ export class DeesModal extends DeesElement {
           <div class="content">${this.content}</div>
           <div class="bottomButtons">
             ${this.menuOptions.map(
-              (actionArg) => html`
-                <div class="bottomButton" @click=${() => {
+              (actionArg, index) => html`
+                <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
                   actionArg.action(this);
                 }}>${actionArg.name}</div>
               `