diff --git a/css/styles.css b/css/styles.css
index 841264f1d..855ea32d3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -668,6 +668,11 @@ input:disabled + .slider {
 }
 
 /* Styles for Right Alignment of input type date */
+#preferences-window input[type="text"].date-right {
+  text-align: right;
+  position: relative;
+}
+
 #preferences-window input[type="date"].date-right::-webkit-datetime-edit {
   text-align: right;
   position: relative;
diff --git a/js/date-to-string-util.js b/js/date-to-string-util.js
index f81a6cf3e..6be98af20 100644
--- a/js/date-to-string-util.js
+++ b/js/date-to-string-util.js
@@ -26,7 +26,20 @@ function getMonthName(languageData, monthIndex)
     return getTranslationInLanguageData(languageData, `$DateUtil.${monthNames[monthIndex]}`);
 }
 
+
+function getMonthNames(languageData)
+{
+    return monthNames.map(val => getTranslationInLanguageData(languageData, `$DateUtil.${val}`));
+}
+
+function getDayAbbrvs(languageData)
+{
+    return dayAbbrs.map(val => getTranslationInLanguageData(languageData, `$DateUtil.${val}`));
+}
+
 export {
     getDayAbbr,
-    getMonthName
+    getMonthName,
+    getMonthNames,
+    getDayAbbrvs
 };
\ No newline at end of file
diff --git a/js/menus.js b/js/menus.js
index 8d9f4894f..99633e860 100644
--- a/js/menus.js
+++ b/js/menus.js
@@ -154,6 +154,14 @@ function getEditMenuTemplate(mainWindow)
                         BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
                     }
                 });
+                prefWindow.webContents.on('before-input-event', (event, input) =>
+                {
+                    if (input.control && input.shift && input.key.toLowerCase() === 'r')
+                    {
+                        BrowserWindow.getFocusedWindow().reload();
+                    }
+                });
+
             },
         },
         {type: 'separator'},
diff --git a/package.json b/package.json
index 6c62d1130..77ee40fbe 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,9 @@
     "i18next-node-fs-backend": "^2.1.3",
     "is-online": "^9.0.1",
     "jquery": "^3.6.0",
-    "jquery-mousewheel": "^3.1.13"
+    "jquery-mousewheel": "^3.1.13",
+    "jquery-ui": "^1.13.2",
+    "jquery-ui-css": "^1.11.5"
   },
   "engines": {
     "node": ">=14.15.5",
diff --git a/src/preferences.html b/src/preferences.html
index e368c058b..8480d6d83 100644
--- a/src/preferences.html
+++ b/src/preferences.html
@@ -5,6 +5,8 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
     <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../node_modules/jquery-ui-css/jquery-ui.theme.min.css">
+    <link rel="stylesheet" href="../node_modules/jquery-ui-css/jquery-ui.structure.min.css">
 
     <!-- First we need to declare jQuery and $ globals with jquery -->
     <script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
@@ -13,6 +15,7 @@
     </script>
 
     <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js" charset="utf-8"></script>
+    <script src="../node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
     <script type="module" src="preferences.js"></script>
 </head>
 
@@ -105,7 +108,9 @@
             </div>
             <div class="flex-box">
                 <p><i class="fas fa-sign-in-alt"></i><span data-i18n="$Preferences.overallBalanceStart">Overall Balance Start Date</span></p>
-                <label id='overall-balance-start-date'><input type="date" class="date-right" name="overall-balance-start-date"></label>
+                <label id="overall-balance-start-date"><input id="datepicker" type="text" class="date-right" name="overall-balance-start-date">
+                    <i class="fa fa-calendar" aria-hidden="true"></i>
+                </label>
             </div>
             <div class="flex-box">
                 <p><i class="fas fa-eye"></i><span data-i18n="$Preferences.view">View</span></p>
diff --git a/src/preferences.js b/src/preferences.js
index 7aeb1a276..57dcf9dd9 100644
--- a/src/preferences.js
+++ b/src/preferences.js
@@ -2,6 +2,8 @@
 
 import { applyTheme } from '../renderer/themes.js';
 import { translatePage } from '../renderer/i18n-translator.js';
+import { getMonthNames, getDayAbbrvs } from '../js/date-to-string-util.js';
+
 
 // Global values for preferences page
 let usersStyles;
@@ -35,6 +37,7 @@ function listenerLanguage()
         window.mainApi.changeLanguagePromise(this.value).then((languageData) =>
         {
             translatePage(this.value, languageData, 'Preferences');
+            refreshDate(this.value, languageData);
             window.mainApi.notifyNewPreferences(preferences);
         });
     });
@@ -47,9 +50,25 @@ function setupLanguages()
     window.mainApi.getLanguageDataPromise().then(languageData =>
     {
         translatePage(usersStyles['language'], languageData.data, 'Preferences');
+        refreshDate(usersStyles['language'], languageData.data);
     });
 }
 
+function refreshDate(language, languageData)
+{
+    const monthAbbrs = getMonthNames(languageData);
+    const dayAbbrs = getDayAbbrvs(languageData);
+    $.datepicker.regional[`${language}`] = {
+        monthNames: monthAbbrs,
+        monthNamesShort: monthAbbrs,
+        weekHeader: 'Sm',
+        dayNames: dayAbbrs,
+        dayNamesShort: dayAbbrs,
+        dayNamesMin: dayAbbrs,
+        firstDay: 0};
+    $.datepicker.setDefaults($.datepicker.regional[`${language}`]);
+}
+
 function refreshContent()
 {
     return new Promise((resolve) =>
@@ -91,6 +110,15 @@ function renderPreferencesWindow()
         $('#view').val(usersStyles['view']);
     }
 
+    $(()=>
+    {
+        $( '#datepicker' ).datepicker({
+            dateFormat: 'yy-mm-dd',
+            changeYear: true,
+            changeMonth: true
+        });
+    });
+
     $('input[type="checkbox"]').on('change', function()
     {
         changeValue(this.name, this.checked);
@@ -105,7 +133,7 @@ function renderPreferencesWindow()
         }
     });
 
-    $('input[type="number"], input[type="date"]').on('change', function()
+    $('input[type="number"], input[type="date"], input[type="text"]').on('change', function()
     {
         changeValue(this.name, this.value);
     });