diff --git a/src/app/app.scss b/src/app/app.scss
index 1f940e07..7c573c5a 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -43,3 +43,14 @@
 strong {
     font-weight: bold;
 }
+
+.sc-dialog .cq-menu-dropdown.cq-menu-dropdown-enter-done {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+    height: 100vh !important;
+    width: 100vw !important;
+    background-color: 'green';
+    background-color: 'beige';
+}
diff --git a/src/components/layout/layout.scss b/src/components/layout/layout.scss
index 7df8e0d1..6f685fec 100644
--- a/src/components/layout/layout.scss
+++ b/src/components/layout/layout.scss
@@ -3,7 +3,7 @@
 .layout {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: 99vh;
 
     .deriv-header {
         background: var(--general-main-1);
diff --git a/src/hooks/firebase/useFirebaseCountriesConfig.ts b/src/hooks/firebase/useFirebaseCountriesConfig.ts
index b5eadb07..85733ab4 100644
--- a/src/hooks/firebase/useFirebaseCountriesConfig.ts
+++ b/src/hooks/firebase/useFirebaseCountriesConfig.ts
@@ -1,4 +1,4 @@
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 import { HUB_ENABLED_COUNTRY_LIST } from '@/components/layout/header/utils';
 
 const REMOTE_CONFIG_URL_STAGING =
diff --git a/src/pages/chart/chart-modal/chart-modal.scss b/src/pages/chart/chart-modal/chart-modal.scss
index 8ccf2dad..196b6939 100644
--- a/src/pages/chart/chart-modal/chart-modal.scss
+++ b/src/pages/chart/chart-modal/chart-modal.scss
@@ -83,9 +83,11 @@
 
             .sc-dialog {
                 height: 100% !important;
+                background-color: 'aqua';
 
                 &__body {
                     height: inherit !important;
+                    z-index: 100000; /* Ensure it's higher than any other element in the system */
 
                     .sc-mcd {
                         height: inherit !important;
diff --git a/src/pages/chart/chart.scss b/src/pages/chart/chart.scss
index 7fe951c8..4e5e3c2d 100644
--- a/src/pages/chart/chart.scss
+++ b/src/pages/chart/chart.scss
@@ -99,7 +99,7 @@
 
     .smartcharts-mobile {
         .cq-context {
-            z-index: 99;
+            z-index: 100002;
 
             .sc-mcd__category:last-child {
                 margin-bottom: 3rem !important;
@@ -112,6 +112,7 @@
 
             .sc-dialog {
                 height: 100% !important;
+                background-color: 'blue';
 
                 &__body {
                     height: inherit !important;
diff --git a/src/pages/chart/chart.tsx b/src/pages/chart/chart.tsx
index 93f92226..d6cb767a 100644
--- a/src/pages/chart/chart.tsx
+++ b/src/pages/chart/chart.tsx
@@ -137,7 +137,18 @@ const Chart = observer(({ show_digits_stats }: { show_digits_stats: boolean }) =
                 requestSubscribe={requestSubscribe}
                 settings={settings}
                 symbol={symbol}
-                topWidgets={() => <ChartTitle onChange={onSymbolChange} />}
+                topWidgets={() => (
+                    <div
+                        style={{
+                            position: 'relative',
+                            zIndex: 99,
+                            width: '100%',
+                            paddingTop: isMobile ? '4rem' : '0', // Add padding for mobile to account for header
+                        }}
+                    >
+                        <ChartTitle onChange={onSymbolChange} />
+                    </div>
+                )}
                 isConnectionOpened={is_connection_opened}
                 getMarketsOrder={getMarketsOrder}
                 isLive