diff --git a/ui/src/cmsData/region_login.json b/ui/src/cmsData/region_login.json
index 6b1d5ce18..507b185ca 100644
--- a/ui/src/cmsData/region_login.json
+++ b/ui/src/cmsData/region_login.json
@@ -5,6 +5,7 @@
   "description": "Please select Contentstack <strong>North America (AWS, Azure or GCP)</strong> or Contentstack <strong>Europe (AWS or Azure)</strong> to continue.",
   "regions": [
     {
+      "region": "NA",
       "service_icon": {
         "uid": "bltbe45879eac0025d8",
         "created_at": "2023-10-31T06:59:22.783Z",
@@ -28,6 +29,7 @@
       "_metadata": { "uid": "cs32a9ba30ec1496ef" }
     },
     {
+      "region": "AZURE_NA",
       "service_icon": {
         "uid": "blt85d2a7024c613199",
         "created_at": "2023-10-31T07:00:56.567Z",
@@ -51,6 +53,7 @@
       "_metadata": { "uid": "cs77a3bf15c456afbb" }
     },
     {
+      "region": "EU",
       "service_icon": {
           "uid": "blt57dafa9c1472b46f",
           "created_at": "2024-07-29T10:57:59.058Z",
@@ -79,6 +82,7 @@
       }
     },
     {
+      "region": "AZURE_EU",
       "service_icon": {
         "uid": "bltbe45879eac0025d8",
         "created_at": "2023-10-31T06:59:22.783Z",
@@ -102,6 +106,7 @@
       "_metadata": { "uid": "csf578f8fbea1ae0c0" }
     },
     {
+      "region": "GCP_NA",
       "service_icon": {
         "uid": "blt85d2a7024c613199",
         "created_at": "2023-10-31T07:00:56.567Z",
diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
index 9a9416cb9..520e691e0 100644
--- a/ui/src/pages/RegionalLogin/index.tsx
+++ b/ui/src/pages/RegionalLogin/index.tsx
@@ -1,14 +1,13 @@
 // Libraries
 import { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
-import { useNavigate } from 'react-router-dom';
 
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 
 // Utilities
 import { validateArray } from '../../utilities/functions';
-import { CS_ENTRIES, REGIONS } from '../../utilities/constants';
+import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
 import { RegionType } from './regionalLogin.interface';
@@ -19,8 +18,6 @@ import './index.scss';
 const RegionalLogin = () => {
   const [data, setData] = useState<RegionType>({});
 
-  const navigate = useNavigate();
-
   const fetchData = async () => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
     await getCMSDataFromFile(CS_ENTRIES.REGIONS)
@@ -35,81 +32,54 @@ const RegionalLogin = () => {
     fetchData();
   }, []);
 
-  const loginClick = (regionName: string, serviceName: string) => {
-    let loginUrl: string;
-
-    switch (true) {
-      case regionName === 'North America' && serviceName === 'Microsoft Azure':
-        loginUrl = `/login?region=${REGIONS.AZURE_NA}`;
-        break;
-      case regionName === 'Europe' && serviceName === 'Amazon Web Services':
-        loginUrl = `/login?region=${REGIONS.EU}`;
-        break;
-      case regionName === 'Europe' && serviceName === 'Microsoft Azure':
-        loginUrl = `/login?region=${REGIONS.AZURE_EU}`;
-        break;
-      case regionName === 'North America' && serviceName === 'Google Cloud Platform':
-        loginUrl = `/login?region=${REGIONS.GCP_NA}`;
-        break;
-      default:
-        loginUrl = `/login?region=${REGIONS.NA}`;
-        break;
-    }
-    navigate(loginUrl);
-  };
-
   const { description, heading, regions } = data;
 
   return (
-    <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
-      <div className="container mx-auto">
-        <div className="text-center mt-4">
-          {heading && <h1>{heading}</h1>}
-          {description && description != '' && (
-            <div className="textStone600 pt-3 lh-condensed">{parse(description)}</div>
-          )}
-        </div>
+    <div className="d-flex vh-100 justify-content-center flex-column">
+      <div className="mx-3">
+        <div className='container-fluid'>
+          <div className="text-center mt-4">
+            {heading && <h1>{heading}</h1>}
+            {description && description != '' && (
+              <div className="textStone600 pt-3 lh-condensed">{parse(description)}</div>
+            )}
+          </div>
 
-        <div className="row pt-6 justify-content-center">
-          {regions &&
-            validateArray(regions) &&
-            regions?.map((region, index) => (
-              <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
-                <div className="card h-100">
-                  <div className="cardBody">
-                    <div className="d-flex align-items-center flex-grow-1">
-                      {region?.service_icon?.url && (
-                        <img
-                          src={region?.service_icon?.url}
-                          className="thumb me-2"
-                          alt={region?.service_icon?.title}
-                        />
-                      )}
-                      {region?.service_title && (
-                        <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
-                      )}
+          <div className="row pt-6 justify-content-center">
+            {regions &&
+              validateArray(regions) &&
+              regions?.map((region, index) => (
+                <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
+                  <div className="card h-100">
+                    <div className="cardBody">
+                      <div className="d-flex align-items-center flex-grow-1">
+                        {region?.service_icon?.url && (
+                          <img
+                            src={region?.service_icon?.url}
+                            className="thumb me-2"
+                            alt={region?.service_icon?.title}
+                          />
+                        )}
+                        {region?.service_title && (
+                          <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
+                        )}
+                      </div>
+                      {region?.region_title && <h2 className="pt-3">{region?.region_title}</h2>}
                     </div>
-                    {region?.region_title && <h2 className="pt-3">{region?.region_title}</h2>}
+                    {region?.cta?.title && (
+                      <div className="CardFooter pb-3">
+                        <a
+                          href={`/login?region=${region?.region}`}
+                          className="body-4 fw-bold stretched-link"
+                        >
+                          <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
+                        </a>
+                      </div>
+                    )}
                   </div>
-                  {region?.cta?.title && (
-                    <div className="CardFooter pb-3">
-                      <a
-                        // href={loginUrl}
-                        className="body-4 fw-bold stretched-link"
-                        onClick={() =>
-                          loginClick(
-                            region?.region_title as string,
-                            region?.service_title as string
-                          )
-                        }
-                      >
-                        <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
-                      </a>
-                    </div>
-                  )}
                 </div>
-              </div>
-            ))}
+              ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui/src/pages/RegionalLogin/regionalLogin.interface.ts b/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
index 9d5d60eac..a6296aa2a 100644
--- a/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
+++ b/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
@@ -8,6 +8,7 @@ export interface RegionType {
 
 interface Region {
   cta?: CTA;
+  region?: string;
   region_title?: string;
   service_icon?: Image;
   service_title?: string;
diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss
index f295b9184..e01f575ab 100644
--- a/ui/src/scss/App.scss
+++ b/ui/src/scss/App.scss
@@ -300,9 +300,11 @@ h4,
 h5,
 h6 {
   color: $color-font-black;
+  font-family: $font-family-primary;
 }
 p {
   color: $color-font-gray;
+  font-family: $font-family-primary;
   line-height: $line-height-default !important;
   margin: 0;
 }