diff --git a/package-lock.json b/package-lock.json
index b18416df9f86..f10bce8d5cde 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
                 "@datadog/browser-logs": "^5.11.0",
                 "@datadog/browser-rum": "^5.11.0",
                 "@deriv-com/analytics": "1.4.13",
-                "@deriv-com/quill-ui": "^1.9.17",
+                "@deriv-com/quill-ui": "^1.9.27",
                 "@deriv-com/ui": "^1.14.5",
                 "@deriv-com/utils": "^0.0.20",
                 "@deriv/api-types": "^1.0.172",
@@ -2963,12 +2963,13 @@
             }
         },
         "node_modules/@deriv-com/quill-ui": {
-            "version": "1.9.22",
-            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.9.22.tgz",
-            "integrity": "sha512-qvbL8RnmxpJM5XNCtn6nEPnwPgds17uNtGOafH4SZDmhAFrZb+YWXkIb2xybIDb8U+34W78dMDCvm1wxLKj4BQ==",
+            "version": "1.9.27",
+            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.9.27.tgz",
+            "integrity": "sha512-bdxHaNM/Anb2mjkO5OUnwBs+k4uExBZtY8LFYlgxkxAxM5tzscMwDf8fN5GRkmdby/bPv2y8SzfmoxElWdjfbQ==",
             "dependencies": {
                 "@deriv/quill-icons": "^1.19.20",
                 "@headlessui/react": "^1.7.18",
+                "react-calendar": "^5.0.0",
                 "react-swipeable": "^6.2.1",
                 "usehooks-ts": "^3.0.2",
                 "uuid": "^9.0.1"
@@ -2977,6 +2978,30 @@
                 "@rollup/rollup-linux-x64-gnu": "^4.9.6"
             }
         },
+        "node_modules/@deriv-com/quill-ui/node_modules/react-calendar": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.0.0.tgz",
+            "integrity": "sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==",
+            "dependencies": {
+                "@wojtekmaj/date-utils": "^1.1.3",
+                "clsx": "^2.0.0",
+                "get-user-locale": "^2.2.1",
+                "warning": "^4.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@deriv-com/quill-ui/node_modules/usehooks-ts": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
diff --git a/packages/core/package.json b/packages/core/package.json
index 0856ec587fab..90910675e90a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -96,7 +96,7 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.9.17",
+        "@deriv-com/quill-ui": "^1.9.27",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",
diff --git a/packages/trader/package.json b/packages/trader/package.json
index 3207f66d94c5..2b3f270b349c 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -89,7 +89,7 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.9.17",
+        "@deriv-com/quill-ui": "^1.9.27",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
diff --git a/packages/trader/src/AppV2/app.tsx b/packages/trader/src/AppV2/app.tsx
index d9d796474e9d..fce6ad4a4377 100644
--- a/packages/trader/src/AppV2/app.tsx
+++ b/packages/trader/src/AppV2/app.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type { TWebSocket } from 'Types';
 import initStore from 'App/init-store';
-import 'Sass/app.scss';
 import type { TCoreStores } from '@deriv/stores/types';
 import TraderProviders from '../trader-providers';
 import BottomNav from './Components/BottomNav';
@@ -9,6 +8,8 @@ import Trade from './Containers/Trade';
 import Markets from './Containers/Markets';
 import Positions from './Containers/Positions';
 import Menu from './Containers/Menu';
+import 'Sass/app.scss';
+import '@deriv-com/quill-ui/quill.css';
 
 type Apptypes = {
     passthrough: {