diff --git a/public/themes/default.css b/public/themes/default.css
index 0720a62e6..bbf0789c6 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -87,6 +87,7 @@
     --form-element-border-color: rgba(241, 246, 243, 0.15);
     --form-element-bg-color: var(--app-bg-color);
     --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--form-element-text-color);
     --form-element-label-color: var(--app-text-secondary-color);
     --form-element-primary-color: var(--app-accent-color);
     --form-element-secondary-color: rgba(255, 255, 255, 0.2);
diff --git a/public/themes/light.css b/public/themes/light.css
index a21da4472..db38f16b5 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -42,6 +42,7 @@
     --form-element-border-color: rgba(0, 0, 0, 0.3);
     --form-element-bg-color: var(--app-bg-color);
     --form-element-text-color: var(--app-text-color);
+    --form-element-primary-text-color: var(--button-primary-color);
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less
index 4e32eb8cc..e992f72aa 100644
--- a/src/app/common/elements/button.less
+++ b/src/app/common/elements/button.less
@@ -20,7 +20,7 @@
     }
 
     &.primary {
-        color: var(--form-element-text-color);
+        color: var(--form-element-primary-text-color);
         background: var(--form-element-primary-color);
         i {
             fill: var(--form-element-text-color);
diff --git a/src/app/common/elements/datepicker.less b/src/app/common/elements/datepicker.less
index 88b3a631a..889839bf9 100644
--- a/src/app/common/elements/datepicker.less
+++ b/src/app/common/elements/datepicker.less
@@ -22,6 +22,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: var(--form-element-bg-color);
 
     input {
         outline: none !important;
@@ -29,6 +30,7 @@
         height: 100%;
         padding: 0 !important;
         cursor: default !important;
+        background-color: inherit !important;
     }
 
     .fa-calendar {
@@ -99,6 +101,7 @@
             background-color: var(--datepicker-cell-hover-bg-color);
         }
         &.selected {
+            color: var(--form-element-primary-text-color);
             background-color: var(--form-element-primary-color);
             font-weight: bold;
         }
@@ -157,6 +160,7 @@
         }
 
         &.selected {
+            color: var(--form-element-primary-text-color);
             background-color: var(--form-element-primary-color);
         }
     }
diff --git a/src/app/common/elements/modal.tsx b/src/app/common/elements/modal.tsx
index d114e475e..c834370d0 100644
--- a/src/app/common/elements/modal.tsx
+++ b/src/app/common/elements/modal.tsx
@@ -17,7 +17,7 @@ interface ModalHeaderProps {
     title: string;
 }
 
-const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings = true, title }) => (
+const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings, title }) => (
     <div className="wave-modal-header">
         <If condition={keybindings && onClose}>
             <ModalKeybindings onCancel={onClose}></ModalKeybindings>
@@ -80,7 +80,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
     onOk,
     cancelLabel = "Cancel",
     okLabel = "Ok",
-    keybindings = true,
+    keybindings,
 }) => (
     <div className="wave-modal-footer">
         <If condition={keybindings}>
diff --git a/src/app/common/modals/about.tsx b/src/app/common/modals/about.tsx
index 8c87a8d50..363d3d0ed 100644
--- a/src/app/common/modals/about.tsx
+++ b/src/app/common/modals/about.tsx
@@ -61,7 +61,7 @@ class AboutModal extends React.Component<{}, {}> {
         const currentDate = new Date();
         return (
             <Modal className="about-modal">
-                <Modal.Header onClose={this.closeModal} title="About" />
+                <Modal.Header onClose={this.closeModal} title="About" keybindings={true} />
                 <div className="wave-modal-body">
                     <div className="about-section">
                         <div className="logo-wrapper">
diff --git a/src/app/common/modals/alert.tsx b/src/app/common/modals/alert.tsx
index 5fd3cf994..245bdd62d 100644
--- a/src/app/common/modals/alert.tsx
+++ b/src/app/common/modals/alert.tsx
@@ -39,7 +39,7 @@ class AlertModal extends React.Component<{}, {}> {
 
         return (
             <Modal className="alert-modal">
-                <Modal.Header onClose={this.closeModal} title={title} />
+                <Modal.Header onClose={this.closeModal} title={title} keybindings={true} />
                 <div className="wave-modal-body">
                     <If condition={message?.markdown}>
                         <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
diff --git a/src/app/common/modals/createremoteconn.tsx b/src/app/common/modals/createremoteconn.tsx
index 6b5a0ba93..d8016f736 100644
--- a/src/app/common/modals/createremoteconn.tsx
+++ b/src/app/common/modals/createremoteconn.tsx
@@ -363,7 +363,12 @@ class CreateRemoteConnModal extends React.Component<{}, {}> {
                         <div className="settings-field settings-error">Error: {this.getErrorStr()}</div>
                     </If>
                 </div>
-                <Modal.Footer onCancel={this.model.closeModal} onOk={this.handleSubmitRemote} okLabel="Connect" />
+                <Modal.Footer
+                    onCancel={this.model.closeModal}
+                    onOk={this.handleSubmitRemote}
+                    okLabel="Connect"
+                    keybindings={true}
+                />
             </Modal>
         );
     }
diff --git a/src/app/common/modals/editremoteconn.tsx b/src/app/common/modals/editremoteconn.tsx
index c59813801..e63008cae 100644
--- a/src/app/common/modals/editremoteconn.tsx
+++ b/src/app/common/modals/editremoteconn.tsx
@@ -383,7 +383,12 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
                         <div className="settings-field settings-error">Error: {this.remoteEdit?.errorstr}</div>
                     </If>
                 </div>
-                <Modal.Footer onOk={this.submitRemote} onCancel={this.model.closeModal} okLabel="Save" />
+                <Modal.Footer
+                    onOk={this.submitRemote}
+                    onCancel={this.model.closeModal}
+                    okLabel="Save"
+                    keybindings={true}
+                />
             </Modal>
         );
     }
diff --git a/src/app/common/modals/linesettings.tsx b/src/app/common/modals/linesettings.tsx
index 95c02fa3b..22ca93699 100644
--- a/src/app/common/modals/linesettings.tsx
+++ b/src/app/common/modals/linesettings.tsx
@@ -139,7 +139,7 @@ class LineSettingsModal extends React.Component<{}, {}> {
                     <SettingsError errorMessage={this.errorMessage} />
                     <div style={{ height: 50 }} />
                 </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
             </Modal>
         );
     }
diff --git a/src/app/common/modals/screensettings.tsx b/src/app/common/modals/screensettings.tsx
index aafc2d186..c5a05c733 100644
--- a/src/app/common/modals/screensettings.tsx
+++ b/src/app/common/modals/screensettings.tsx
@@ -205,7 +205,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                     </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
             </Modal>
         );
     }
diff --git a/src/app/common/modals/sessionsettings.tsx b/src/app/common/modals/sessionsettings.tsx
index 38d57c76a..1f3839a3e 100644
--- a/src/app/common/modals/sessionsettings.tsx
+++ b/src/app/common/modals/sessionsettings.tsx
@@ -139,7 +139,7 @@ class SessionSettingsModal extends React.Component<{}, {}> {
                     </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
-                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} keybindings={true} />
             </Modal>
         );
     }
diff --git a/src/app/common/modals/userinput.tsx b/src/app/common/modals/userinput.tsx
index 338e05f92..98e40a3be 100644
--- a/src/app/common/modals/userinput.tsx
+++ b/src/app/common/modals/userinput.tsx
@@ -97,7 +97,12 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
             </div>
             <Choose>
                 <When condition={userInputRequest.responsetype == "text"}>
-                    <Modal.Footer onCancel={handleSendCancel} onOk={handleSendText} okLabel="Continue" />
+                    <Modal.Footer
+                        onCancel={handleSendCancel}
+                        onOk={handleSendText}
+                        okLabel="Continue"
+                        keybindings={true}
+                    />
                 </When>
                 <When condition={userInputRequest.responsetype == "confirm"}>
                     <Modal.Footer
@@ -105,6 +110,7 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
                         onOk={() => handleSendConfirm(true)}
                         okLabel="Yes"
                         cancelLabel="No"
+                        keybindings={true}
                     />
                 </When>
             </Choose>
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index d03328ba2..8118dfba7 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -8,7 +8,7 @@ import { If, For } from "tsx-control-statements/components";
 import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, Cmd } from "@/models";
+import { GlobalModel, GlobalCommandRunner } from "@/models";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";