diff --git a/src/components/containers/index.js b/src/components/containers/index.js
index 1ce044d1180..ef0ecd52911 100644
--- a/src/components/containers/index.js
+++ b/src/components/containers/index.js
@@ -8,7 +8,7 @@ import CssGrid, { CssGridColumn } from './css-grid'
 import SEO from './seo'
 import Show from './show'
 import Box from './box'
-import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK } from './visibility'
+import { Desktop, Mobile, EU, UK, ROW, NonEU, NonUK, UKEU } from './visibility'
 
 export {
     Container,
@@ -26,6 +26,7 @@ export {
     Mobile,
     EU,
     UK,
+    UKEU,
     ROW,
     NonUK,
     NonEU,
diff --git a/src/components/containers/visibility.tsx b/src/components/containers/visibility.tsx
index 618dac01a5f..b8f4ba0e136 100644
--- a/src/components/containers/visibility.tsx
+++ b/src/components/containers/visibility.tsx
@@ -64,6 +64,20 @@ const deviceRenderer = (): boolean => {
     return is_loaded
 }
 
+export const getCountryRule = () => {
+    const { is_eu_domain, is_uk_domain } = domainBasedCheck()
+    const { is_eu_country, is_uk_country } = React.useContext<StoreDataType>(DerivStore)
+
+    const is_eu = (is_eu_country || is_eu_domain) && !is_uk_country
+    const is_uk = is_uk_country || is_uk_domain
+    const is_non_uk = !is_uk
+    const is_non_eu = !is_eu
+    const is_eu_uk = !(!is_eu && !is_uk)
+    const is_row = !is_eu_uk
+
+    return { is_eu, is_uk, is_non_uk, is_non_eu, is_eu_uk, is_row }
+}
+
 export const Desktop = ({
     children,
     breakpoint = DEFAULT_BREAKPOINT,
@@ -96,47 +110,37 @@ export const Mobile = ({ children, breakpoint = DEFAULT_BREAKPOINT }: Responsive
 }
 
 export const EU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu_domain } = domainBasedCheck()
-    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_eu = is_eu_country || is_eu_domain
+    const { is_eu } = getCountryRule()
 
     return is_eu ? <>{children}</> : null
 }
 
 export const NonEU = ({ children }: ResponsiveContainerProps) => {
-    const { is_eu_domain } = domainBasedCheck()
-    const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_eu = is_eu_domain || is_eu_country
+    const { is_non_eu } = getCountryRule()
 
-    return !is_eu ? <>{children}</> : null
+    return is_non_eu ? <>{children}</> : null
 }
 
 export const UK = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain } = domainBasedCheck()
-    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_uk = is_uk_country || is_uk_domain
+    const { is_uk } = getCountryRule()
 
     return is_uk ? <>{children}</> : null
 }
 
 export const NonUK = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain } = domainBasedCheck()
-    const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
+    const { is_non_uk } = getCountryRule()
+
+    return is_non_uk ? <>{children}</> : null
+}
 
-    const is_uk = is_uk_domain || is_uk_country
+export const UKEU = ({ children }: ResponsiveContainerProps) => {
+    const { is_eu_uk } = getCountryRule()
 
-    return !is_uk ? <>{children}</> : null
+    return is_eu_uk ? <>{children}</> : null
 }
 
 export const ROW = ({ children }: ResponsiveContainerProps) => {
-    const { is_uk_domain, is_eu_domain } = domainBasedCheck()
-    const { is_uk_country, is_eu_country } = React.useContext<StoreDataType>(DerivStore)
-
-    const is_uk = is_uk_country || is_uk_domain
-    const is_eu = is_eu_domain || is_eu_country
+    const { is_row } = getCountryRule()
 
-    return !is_eu && !is_uk ? <>{children}</> : null
+    return is_row ? <>{children}</> : null
 }