diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index 4c27014f8..9c088f9f6 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -4,6 +4,7 @@ import cn from 'classnames';
 import { Popup } from 'UI';
 import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 import { Controls as Player } from 'Player';
+import { INDEXES } from 'App/constants/zIndex';
 
 interface Props {
   onClick?: () => void;
@@ -45,7 +46,7 @@ function XRayButton(props: Props) {
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
-              style={{ zIndex: 99999, position: 'relative' }}
+              style={{ zIndex: INDEXES.POPUP_GUIDE_BTN, position: 'relative' }}
             >
               <span className="z-1">X-RAY</span>
             </button>
@@ -53,7 +54,7 @@ function XRayButton(props: Props) {
             <div
               className="absolute bg-white top-0 left-0 z-0"
               style={{
-                zIndex: 99998,
+                zIndex: INDEXES.POPUP_GUIDE_BG,
                 width: '100px',
                 height: '50px',
                 borderRadius: '30px',
diff --git a/frontend/app/constants/zindex.ts b/frontend/app/constants/zindex.ts
new file mode 100644
index 000000000..114871b83
--- /dev/null
+++ b/frontend/app/constants/zindex.ts
@@ -0,0 +1,9 @@
+export const INDEXES = {
+  POPUP_GUIDE_BG: 99998,
+  POPUP_GUIDE_BTN: 99999,
+}
+
+export const getHighest = () => {
+  const allIndexes = Object.values(INDEXES)
+  return allIndexes[allIndexes.length - 1] + 1
+}