diff --git a/web/package.json b/web/package.json
index b5c643ce..2c71afab 100644
--- a/web/package.json
+++ b/web/package.json
@@ -66,7 +66,6 @@
     "css-loader": "0.14.0",
     "cssnano": "^3.10.0",
     "dropzone": "^5.1.1",
-    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "exports-loader": "~0.6.4",
     "flotr2": "git+https://github.com/EnterpriseDB/Flotr2.git",
     "font-awesome": "^4.7.0",
@@ -79,6 +78,7 @@
     "jquery-ui": "^1.12.1",
     "leaflet": "^1.3.3",
     "moment": "^2.20.1",
+    "moment-timezone": "^0.5.21",
     "mousetrap": "^1.6.1",
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
@@ -92,6 +92,8 @@
     "spectrum-colorpicker": "^1.8.0",
     "sprintf-js": "^1.1.1",
     "tablesorter": "^2.30.6",
+    "tempusdominus-bootstrap-4": "^5.1.2",
+    "tempusdominus-core": "^5.0.3",
     "underscore": "^1.8.3",
     "underscore.string": "^3.3.4",
     "watchify": "~3.9.0",
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index b1e95adb..f226fa07 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -132,7 +132,7 @@ define('pgadmin.browser', [
         isCloseable: false,
         isPrivate: true,
         elContainer: true,
-        content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">' + select_object_msg + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div class="alert alert-info pg-panel-message">' + select_object_msg + '</div></div>',
         events: panelEvents,
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index a7f43974..69b64dee 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -479,7 +479,7 @@ define('pgadmin.browser.node', [
         isCloseable: true,
         isPrivate: true,
         elContainer: true,
-        content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div class="alert alert-info pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');
         },
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index 8a113f00..aeb0354a 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -2,7 +2,7 @@
 @import '~alertifyjs/build/css/themes/bootstrap.css';
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
-@import '~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
+@import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
 @import '~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
 @import '~backgrid-select-all/backgrid-select-all.css';
 @import '~backgrid-filter/backgrid-filter.css';
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 7bfbcb90..0d941b42 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2340,13 +2340,19 @@ define([
         label: '',
         options: {
           format: 'YYYY-MM-DD HH:mm:ss Z',
-          showClear: true,
-          showTodayButton: true,
+          icons: {
+            clear: 'fa fa-trash',
+          },
+          buttons: {
+            showClear: true,
+            showToday: true,
+          },
           toolbarPlacement: 'top',
           widgetPositioning: {
             horizontal: 'auto',
             vertical: 'bottom',
           },
+          keepOpen: false,
         },
         placeholder: 'YYYY-MM-DD HH:mm:ss Z',
         extraClasses: [],
@@ -2362,16 +2368,16 @@ define([
       },
       openPicker: function() {
         if (this.has_datepicker) {
-          this.$el.find('input').datetimepicker('show');
+          this.$el.find('input').datetimepicker('toggle');
         }
       },
       template: _.template([
         '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
         '<div class="input-group  <%=Backform.controlsClassName%>">',
-        ' <input type="text" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-        ' <span class="input-group-addon">',
-        '  <span class="fa fa-calendar"></span>',
-        ' </span>',
+        ' <input type="text" class="<%=Backform.controlClassName%> datetimepicker-input <%=extraClasses.join(\' \')%>" name="<%=name%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> data-toggle="datetimepicker"/>',
+        ' <div class="input-group-append">',
+        '   <span class="input-group-text fa fa-calendar"></span>',
+        ' </div>',
         '</div>',
         '<% if (helpMessage && helpMessage.length) { %>',
         ' <div class="<%=Backform.controlsClassName%>">',
@@ -2464,7 +2470,6 @@ define([
           );
         }
         this.updateInvalid();
-
         return this;
       },
       clearInvalid: function() {
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index e9cd9757..80ec67f5 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -1348,9 +1348,15 @@ define([
         },
         options = _.extend({
           format: 'YYYY-MM-DD HH:mm:ss Z',
-          showClear: true,
-          showTodayButton: true,
+          icons: {
+            clear: 'fa fa-trash',
+          },
+          buttons: {
+            showClear: true,
+            showToday: true,
+          },
           toolbarPlacement: 'top',
+          keepOpen: false,
         }, evalF(this.column.get('options')), {
           keyBinds: {
             'shift tab': function(widget) {
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 92cdf46a..c7f39255 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -1051,6 +1051,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .obj_properties .backform-tab > .tab-content {
     padding: 0px;
     overflow-y: auto;
+    min-height: 100%;
     max-height: 100%;
 }
 
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 6e201b9f..2b86824a 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -186,7 +186,7 @@
                         tabindex="0" disabled>
                     <i class="fa fa-filter" aria-hidden="true"></i>
                 </button>
-                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -195,10 +195,16 @@
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
                     <li>
-                        <a id="btn-filter-menu" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
-                        <a id="btn-include-filter" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
-                        <a id="btn-exclude-filter" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
-                        <a id="btn-remove-filter" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
+                        <a id="btn-filter-menu" class="dropdown-item" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
+                    </li>
+                    <li>
+                        <a id="btn-include-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
+                    </li>
+                    <li>
+                        <a id="btn-exclude-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
+                    </li>
+                    <li>
+                        <a id="btn-remove-filter" class="dropdown-item" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
                     </li>
                 </ul>
             </div>
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 30581c45..c42e08cf 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -48,6 +48,8 @@ const providePlugin = new webpack.ProvidePlugin({
   Backbone: 'backbone',
   Backgrid: 'backgrid',
   pgAdmin: 'pgadmin',
+  'moment': 'moment',
+  'window.moment':'moment',
 });
 
 // Minify and omptimize JS/CSS to reduce bundle size. It is used in production
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index c6217fde..bb4f1f7c 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -25,6 +25,7 @@ var webpackShimConfig = {
       'exports': 'jQuery.fn.datepicker',
     },
     'bootstrap.datetimepicker': {
+      'deps': ['moment'],
       'exports': 'jQuery.fn.datetimepicker',
     },
     'bootstrap.switch': {
@@ -161,7 +162,7 @@ var webpackShimConfig = {
     'backbone.undo': path.join(__dirname, './node_modules/backbone-undo/Backbone.Undo'),
     'backform': path.join(__dirname, './node_modules/backform/src/backform'),
     'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
-    'bootstrap.datetimepicker': path.join(__dirname, './node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min'),
+    'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
     'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
     'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
     'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js
index a7118711..f8c020cd 100644
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@@ -14,6 +14,8 @@ module.exports = {
       _: 'underscore',
       'underscore.string': 'underscore.string',
       'window.jQuery': 'jquery',
+      'moment': 'moment',
+      'window.moment':'moment',
     }),
   ],
 
@@ -65,7 +67,7 @@ module.exports = {
       'jquery.ui': path.join(__dirname, './node_modules/slickgrid/lib/jquery-ui-1.11.3'),
       'spectrum': path.join(__dirname, './node_modules/spectrum-colorpicker/spectrum'),
       'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
-      'bootstrap.datetimepicker': path.join(__dirname, './node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min'),
+      'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
       'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
       'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
       'backform': path.join(__dirname, './node_modules/backform/src/backform'),
@@ -78,6 +80,7 @@ module.exports = {
       'slickgrid.grid': nodeModulesDir + '/slickgrid/slick.grid',
       'bean': path.join(__dirname, './node_modules/flotr2/lib/bean'),
       'flotr2': path.join(__dirname, './node_modules/flotr2/flotr2.amd'),
+      'moment': path.join(__dirname, './node_modules/moment/moment'),
       'browser': path.resolve(__dirname, 'pgadmin/browser/static/js'),
       'pgadmin': sourcesDir + '/js/pgadmin',
       'pgadmin.sqlfoldcode': sourcesDir + '/js/codemirror/addon/fold/pgadmin-sqlfoldcode',