diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js
index a6021f308..8437dc91f 100644
--- a/src/public/app/widgets/buttons/calendar.js
+++ b/src/public/app/widgets/buttons/calendar.js
@@ -74,12 +74,12 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
 
     doRender() {
         super.doRender();
-        
+
         this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
         this.$weekHeader = this.$dropdownContent.find(".calendar-week");
-        
+
         this.manageFirstDayOfWeek();
-        
+
         // Month navigation
         this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
         this.$monthSelect.on("input", (e) => {
@@ -88,10 +88,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         });
         this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
         this.$next.on('click', () => {
-        this.date.setMonth(this.date.getMonth() + 1);
+            this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
-        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');        
+        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
         this.$previous.on('click', e => {
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();
@@ -108,7 +108,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             this.date.setFullYear(this.date.getFullYear() + 1);
             this.createMonth();
         });
-        this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');        
+        this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
         this.$previousYear.on('click', e => {
             this.date.setFullYear(this.date.getFullYear() - 1);
             this.createMonth();
@@ -123,12 +123,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
 
             if (note) {
                 appContext.tabManager.getActiveContext().setNote(note.noteId);
+                this.dropdown.hide();
             }
             else {
                 toastService.showError(t("calendar.cannot_find_day_note"));
             }
-        });  
-        
+        });
+
         // Prevent dismissing the calendar popup by clicking on an empty space inside it.
         this.$dropdownContent.on("click", (e) => e.stopPropagation());
     }
@@ -137,9 +138,9 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.firstDayOfWeek = options.getInt("firstDayOfWeek");
 
         // Generate the list of days of the week taking into consideration the user's selected first day of week.
-        let localeDaysOfWeek = [ ...DAYS_OF_WEEK ];
+        let localeDaysOfWeek = [...DAYS_OF_WEEK];
         const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
-        localeDaysOfWeek = [ ...localeDaysOfWeek, ...daysToBeAddedAtEnd ];
+        localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd];
         this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`));
     }
 
@@ -235,11 +236,11 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.$yearSelect.val(this.date.getFullYear());
     }
 
-    async entitiesReloadedEvent({loadResults}) {
+    async entitiesReloadedEvent({ loadResults }) {
         if (!loadResults.getOptionNames().includes("firstDayOfWeek")) {
             return;
         }
-        
+
         this.manageFirstDayOfWeek();
         this.createMonth();
     }
diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js
index 236b1f0be..ab6ca0bc2 100644
--- a/src/public/app/widgets/buttons/right_dropdown_button.js
+++ b/src/public/app/widgets/buttons/right_dropdown_button.js
@@ -30,6 +30,7 @@ export default class RightDropdownButtonWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$dropdownMenu = this.$widget.find(".dropdown-menu");
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
         this.tooltip = new bootstrap.Tooltip(this.$tooltip);
diff --git a/src/public/app/widgets/ribbon_widgets/book_properties.js b/src/public/app/widgets/ribbon_widgets/book_properties.js
index 74cefef1f..c597f02b6 100644
--- a/src/public/app/widgets/ribbon_widgets/book_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/book_properties.js
@@ -18,7 +18,7 @@ const TPL = `
     <div style="display: flex; align-items: baseline">
         <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
         
-        <select class="view-type-select form-control form-control-sm">
+        <select class="view-type-select form-select form-select-sm">
             <option value="grid">${t("book_properties.grid")}</option>
             <option value="list">${t("book_properties.list")}</option>
         </select>
diff --git a/src/public/app/widgets/search_options/ancestor.js b/src/public/app/widgets/search_options/ancestor.js
index 49aa75faf..8a56057f9 100644
--- a/src/public/app/widgets/search_options/ancestor.js
+++ b/src/public/app/widgets/search_options/ancestor.js
@@ -13,7 +13,7 @@ const TPL = `
             
             <div style="margin-left: 10px; margin-right: 10px">${t('ancestor.depth_label')}:</div>
             
-            <select name="depth" class="form-control d-inline ancestor-depth" style="flex-shrink: 3">
+            <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
                 <option value="">${t('ancestor.depth_doesnt_matter')}</option>
                 <option value="eq1">${t('ancestor.depth_eq', {count: 1})} (${t('ancestor.direct_children')})</option>
                 <option value="eq2">${t('ancestor.depth_eq', {count: 2})}</option>
diff --git a/src/public/app/widgets/type_widgets/options/appearance/fonts.js b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
index 3fa1cf016..fdc096f43 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/fonts.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
@@ -37,7 +37,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("fonts.font_family")}</label>
-            <select class="main-font-family form-control"></select>
+            <select class="main-font-family form-select"></select>
         </div>
     
         <div class="col-6">
@@ -55,7 +55,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="tree-font-family form-control"></select>
+            <select class="tree-font-family form-select"></select>
         </div>
     
         <div class="col-6">
@@ -73,7 +73,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="detail-font-family form-control"></select>
+            <select class="detail-font-family form-select"></select>
         </div>
         
         <div class="col-6">
@@ -91,7 +91,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="monospace-font-family form-control"></select>
+            <select class="monospace-font-family form-select"></select>
         </div>
     
         <div class="col-6">
diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.js b/src/public/app/widgets/type_widgets/options/appearance/i18n.js
index ed7d0768e..7b16261cf 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/i18n.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/i18n.js
@@ -10,12 +10,12 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("i18n.language")}</label>
-            <select class="locale-select form-control"></select>
+            <select class="locale-select form-select"></select>
         </div>
 
         <div class="col-6">
             <label>${t("i18n.first-day-of-the-week")}</label>
-            <select class="first-day-of-week-select form-control">
+            <select class="first-day-of-week-select form-select">
                 <option value="0">${t("i18n.sunday")}</option>
                 <option value="1">${t("i18n.monday")}</option>
             </select>
diff --git a/src/public/app/widgets/type_widgets/options/appearance/theme.js b/src/public/app/widgets/type_widgets/options/appearance/theme.js
index fd26daa23..3fb365cd2 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -10,7 +10,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("theme.theme_label")}</label>
-            <select class="theme-select form-control"></select>
+            <select class="theme-select form-select"></select>
         </div>
         
         <div class="col-6">
diff --git a/src/public/app/widgets/type_widgets/options/backup.js b/src/public/app/widgets/type_widgets/options/backup.js
index 1be36366e..fc3c070a4 100644
--- a/src/public/app/widgets/type_widgets/options/backup.js
+++ b/src/public/app/widgets/type_widgets/options/backup.js
@@ -12,19 +12,19 @@ const TPL = `
     <ul style="list-style: none">
         <li>
             <label>
-                <input type="checkbox" class="daily-backup-enabled">
+                <input type="checkbox" class="daily-backup-enabled form-check-input">
                 ${t('backup.enable_daily_backup')}
             </label>
         </li>
         <li>    
             <label>
-                <input type="checkbox" class="weekly-backup-enabled">
+                <input type="checkbox" class="weekly-backup-enabled form-check-input">
                 ${t('backup.enable_weekly_backup')}
             </label>
         </li>
         <li>
         <label>
-            <input type="checkbox" class="monthly-backup-enabled">
+            <input type="checkbox" class="monthly-backup-enabled form-check-input">
             ${t('backup.enable_monthly_backup')}
             </label>
         </li>
diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
index 0a7b8b934..8d9a9f3ae 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
@@ -24,7 +24,7 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
             const id = "code-mime-type-" + (idCtr++);
 
             this.$mimeTypes.append($("<li>")
-                .append($('<input type="checkbox">')
+                .append($('<input type="checkbox" class="form-check-input">')
                     .attr("id", id)
                     .attr("data-mime-type", mimeType.mime)
                     .prop("checked", mimeType.enabled))
diff --git a/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js b/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js
index 0b072df3f..a1065c51a 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js
@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t('vim_key_bindings.use_vim_keybindings_in_code_notes')}</h4>
     <label>
-        <input type="checkbox" class="vim-keymap-enabled">
+        <input type="checkbox" class="vim-keymap-enabled form-check-input">
         ${t('vim_key_bindings.enable_vim_keybindings')}
     </label>
 </div>`;
diff --git a/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js b/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js
index c9300beda..73c5eb85b 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js
@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t("wrap_lines.wrap_lines_in_code_notes")}</h4>
     <label>
-        <input type="checkbox" class="line-wrap-enabled">
+        <input type="checkbox" class="line-wrap-enabled form-check-input">
         ${t("wrap_lines.enable_line_wrap")}
     </label>
 </div>`;
diff --git a/src/public/app/widgets/type_widgets/options/other/network_connections.js b/src/public/app/widgets/type_widgets/options/other/network_connections.js
index e723d32e0..061f9425c 100644
--- a/src/public/app/widgets/type_widgets/options/other/network_connections.js
+++ b/src/public/app/widgets/type_widgets/options/other/network_connections.js
@@ -6,7 +6,7 @@ const TPL = `
     <h4>${t("network_connections.network_connections_title")}</h4>
         
     <label>
-        <input class="check-for-updates" type="checkbox" name="check-for-updates">
+        <input class="check-for-updates form-check-input" type="checkbox" name="check-for-updates">
         ${t("network_connections.check_for_updates")}
     </label>
 </div>`;
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js b/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js
index 5f5a7da28..cfc2edf7f 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js
@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t("heading_style.title")}</h4>
     
-    <select class="heading-style form-control">
+    <select class="heading-style form-select">
         <option value="plain">${t("heading_style.plain")}</option>
         <option value="underline">${t("heading_style.underline")}</option>
         <option value="markdown">${t("heading_style.markdown")}</option>
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js b/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js
index 7166e4023..fb089126e 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js
@@ -8,11 +8,11 @@ const TPL = `
     <p>${t("highlights_list.description")}</p>
 
     </div>
-        <label><input type="checkbox" class="highlights-list-check" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="color"> ${t("highlights_list.color")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
     </div>
 
     <br/><br/>
diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css
index 1e7b37143..c8c17d8e5 100644
--- a/src/public/stylesheets/calendar.css
+++ b/src/public/stylesheets/calendar.css
@@ -100,6 +100,10 @@
   font-weight: bold;
 }
 
+.calendar-dropdown-widget a {
+  text-decoration: none;
+}
+
 .calendar-dropdown-widget .calendar-date-exists {
   text-decoration: underline !important;
 }
@@ -107,3 +111,4 @@
 .calendar-dropdown-widget .calendar-date:not(.calendar-date-active) {
   cursor: pointer;
 }
+
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 06cc24213..53e010165 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -36,22 +36,78 @@ a, a:visited, a:hover {
     color: var(--link-color);
 }
 
-input, select, textarea {
+.note-list-widget a {
+    text-decoration: none;
+}
+
+.note-list-widget a:hover {
+    text-decoration: underline;
+}
+
+input,
+select,
+textarea,
+.form-control,
+.form-select {
     color: var(--input-text-color);
     background: var(--input-background-color);
 }
 
-#left-pane input, select, textarea {
+.form-control:focus {
+    color: var(--input-text-color);
+    background: var(--input-background-color);
+}
+
+.form-select {
+    background: var(--input-background-color) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") right .75rem center/15px 20px no-repeat;
+}
+
+/* Hide number input arrows */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox browser */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* Show number input arrows when focus or hover */
+input[type="number"]:focus::-webkit-inner-spin-button,
+input[type="number"]:focus::-webkit-outer-spin-button,
+input[type="number"]:hover::-webkit-inner-spin-button,
+input[type="number"]:hover::-webkit-outer-spin-button {
+    -webkit-appearance: inner-spin-button;
+}
+
+/* Restore default apperance */
+input[type="number"]:focus,
+input[type="number"]:hover {
+    appearance: auto;
+}
+
+#left-pane input,
+#left-pane select,
+#left-pane textarea {
     color: var(--left-pane-text-color);
     background: var(--left-pane-background-color);
 }
 
-input::placeholder {
+input::placeholder,
+.form-control::placeholder,
+#left-pane input::placeholder {
     color: var(--muted-text-color);
 }
 
-table td, table th {
+.table thead th,
+.table td,
+.table th {
+    /* Fix center vertical alignment of table cells */
+    vertical-align: middle;
     color: var(--main-text-color);
+    background: transparent;
 }
 
 .ck .todo-list__checkmark {
@@ -184,10 +240,15 @@ div.ui-tooltip {
     display: none;
 }
 
+.dropdown-divider {
+    background-color: var(--menu-text-color);
+}
+
 .dropdown-menu {
     border: 1px solid var(--dropdown-border-color);
     color: var(--menu-text-color) !important;
     background-color: var(--menu-background-color) !important;
+    font-size: inherit;
 }
 
 .dropdown-menu .disabled {
@@ -281,6 +342,10 @@ body .CodeMirror {
     border-color: var(--button-border-color);
 }
 
+.btn:hover {
+    border-color: var(--hover-item-border-color);
+}
+
 button.btn, button.btn-sm {
     font-size: inherit;
 }
@@ -686,6 +751,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 }
 
 .card {
+    color: inherit !important;
     background-color: inherit !important;
     border-color: var(--main-border-color) !important;
 }
@@ -717,7 +783,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     color: var(--main-text-color) !important;
     z-index: 9999999999 !important;
     pointer-events: all;
-    flex-basis: 0; /* otherwise toast is always at least 350px tall (happens since 4.5.1, perhaps a bug) */
 }
 
 .toast-header {
@@ -824,10 +889,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     cursor: row-resize;
 }
 
-.dropdown-menu {
-    font-size: inherit;
-}
-
 #context-menu-container {
     max-height: 100vh;
     /* !!! Cannot set overflow: auto, submenus will break !!! */
@@ -1089,7 +1150,6 @@ button.close:hover {
 }
 
 .options-number-input {
-    text-align: right;
     /* overriding settings from .form-control */
     width: 10em !important;
     flex-grow: 0 !important;
@@ -1099,12 +1159,6 @@ textarea {
     cursor: auto;
 }
 
-.table thead th,
-.table td, .table th {
-    /* Fix center vertical alignment of table cells */
-    vertical-align: middle;
-}
-
 .ck-powered-by-balloon {
     display: none !important;
 }
diff --git a/src/public/translations/cn/translation.json b/src/public/translations/cn/translation.json
index b2d09f996..3b3293ba3 100644
--- a/src/public/translations/cn/translation.json
+++ b/src/public/translations/cn/translation.json
@@ -1034,8 +1034,8 @@
     "title": "下拉菜单可用的MIME文件类型"
   },
   "vim_key_bindings": {
-    "use_vim_keybindings_in_code_notes": "",
-    "enable_vim_keybindings": ""
+    "use_vim_keybindings_in_code_notes": "Vim 快捷键",
+    "enable_vim_keybindings": "在代码笔记中启用 Vim 快捷键（不包含 ex 模式）"
   },
   "wrap_lines": {
     "wrap_lines_in_code_notes": "代码笔记自动换行",