diff --git a/pages/stryda/[game_slug]/stats/stats-leagueoflegends.js b/pages/stryda/[game_slug]/stats/stats-leagueoflegends.js
index a0ae331a..0f63951f 100644
--- a/pages/stryda/[game_slug]/stats/stats-leagueoflegends.js
+++ b/pages/stryda/[game_slug]/stats/stats-leagueoflegends.js
@@ -14,7 +14,7 @@ import { StatsLeagueOfLegendsDemoGeneral } from "@/mock-data/data-stats-demo-lea
 import { StatsLeagueOfLegendsDemoLatestMatches } from "@/mock-data/data-stats-demo-leagueoflegends";
 import LoadMore from "../../../../components/LoadMore/LoadMore";
 import LoadMoreContainer from "../../../../components/LoadMore/LoadMoreContainer";
-import ModalConnectIDLeagueOfLegends from "../../modal-connectIDleagueoflegends";
+import ModalConnectGameID from "../../modal-connectgameID";
 
 export default function StatsLeagueOfLegends() {
   const router = useRouter();
@@ -111,8 +111,8 @@ export default function StatsLeagueOfLegends() {
     setSelectedStat(getGeneralStatsByID(selectedGeneralStat));
   }, [selectedGeneralStat]);
 
-  function openModalConnectIDLeagueOfLegends() {
-    uiContext.openModal(<ModalConnectIDLeagueOfLegends />);
+  function openModalConnectGameID() {
+    uiContext.openModal(<ModalConnectGameID />);
   }
 
   return (
@@ -148,7 +148,7 @@ export default function StatsLeagueOfLegends() {
                           <button
                             type="button"
                             className="button button-primary"
-                            onClick={openModalConnectIDLeagueOfLegends}
+                            onClick={openModalConnectGameID}
                           >
                             <span
                               className={`icon icon-game-${selectedGame.slug}-symbol`}
@@ -207,7 +207,7 @@ export default function StatsLeagueOfLegends() {
                       <button
                         type="button"
                         className="button button-primary w-full"
-                        onClick={openModalConnectIDLeagueOfLegends}
+                        onClick={openModalConnectGameID}
                       >
                         <span className="icon icon-game-leagueoflegends-symbol" />
                         <span>Connect my account</span>
diff --git a/pages/stryda/clanevents/index.js b/pages/stryda/clanevents/index.js
index 75c78941..3f36755d 100644
--- a/pages/stryda/clanevents/index.js
+++ b/pages/stryda/clanevents/index.js
@@ -14,7 +14,7 @@ import TabClanLeaderboardsHowItWorks from "./[game_slug]/[leaderboard_id]/tab-ho
 import TabClanLeaderboardsHistory from "./[game_slug]/[leaderboard_id]/tab-history";
 import StructureGamePage from "../components/StructureGamePage";
 import ModalVideoYoutubePlayer from "../modal-videoyoutubeplayer";
-import ModalConnectIDLeagueOfLegends from "../modal-connectIDleagueoflegends";
+import ModalConnectGameID from "../modal-connectgameID";
 
 const TabsItems = [
   {
@@ -65,8 +65,8 @@ export default function Ladders() {
     uiContext.openModal(<ModalVideoYoutubePlayer url={url} />);
   }
 
-  function openModalConnectIDLeagueOfLegends() {
-    uiContext.openModal(<ModalConnectIDLeagueOfLegends />);
+  function openModalConnectGameID() {
+    uiContext.openModal(<ModalConnectGameID />);
   }
 
   return (
@@ -124,7 +124,7 @@ export default function Ladders() {
                             <button
                               type="button"
                               className="button button-secondary"
-                              onClick={openModalConnectIDLeagueOfLegends}
+                              onClick={openModalConnectGameID}
                             >
                               <span
                                 className={`icon icon-game-${selectedGame.slug}-symbol`}
diff --git a/pages/stryda/ladders/index.js b/pages/stryda/ladders/index.js
index b727e159..337f50e1 100644
--- a/pages/stryda/ladders/index.js
+++ b/pages/stryda/ladders/index.js
@@ -19,7 +19,7 @@ import StructureGamePage from "../components/StructureGamePage";
 import ButtonStatsUpdate from "@/components/ButtonStatsUpdate/ButtonStatsUpdate";
 import Countdown from "@/components/Countdown/Countdown";
 import ModalVideoYoutubePlayer from "../modal-videoyoutubeplayer";
-import ModalConnectIDLeagueOfLegends from "../modal-connectIDleagueoflegends";
+import ModalConnectGameID from "../modal-connectgameID";
 
 const TabsItems = [
   {
@@ -66,8 +66,8 @@ export default function Ladders() {
     );
   }
 
-  function openModalConnectIDLeagueOfLegends() {
-    uiContext.openModal(<ModalConnectIDLeagueOfLegends />);
+  function openModalConnectGameID() {
+    uiContext.openModal(<ModalConnectGameID />);
   }
 
   useEffect(() => {
@@ -139,7 +139,7 @@ export default function Ladders() {
                             <button
                               type="button"
                               className="button button-secondary"
-                              onClick={openModalConnectIDLeagueOfLegends}
+                              onClick={openModalConnectGameID}
                             >
                               <span
                                 className={`icon icon-game-${selectedGame.slug}-symbol`}
diff --git a/pages/stryda/ladders/ladders-header.js b/pages/stryda/ladders/ladders-header.js
index 816bb27e..d84955aa 100644
--- a/pages/stryda/ladders/ladders-header.js
+++ b/pages/stryda/ladders/ladders-header.js
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 
 import Link from "next/link";
 import ModalLadderHowitworksVideo from "./modal-howitworks-video";
-import ModalConnectIDLeagueOfLegends from "../modal-connectIDleagueoflegends";
+import ModalConnectGameID from "../modal-connectgameID";
 import { UiContext } from "@/contexts/ui";
 import { usePrototypeData } from "@/contexts/prototype";
 import { useRouter } from "next/router";
@@ -22,8 +22,8 @@ export default function LaddersHeader(props) {
     );
   }
 
-  function openModalConnectIDLeagueOfLegends() {
-    uiContext.openModal(<ModalConnectIDLeagueOfLegends />);
+  function openModalConnectGameID() {
+    uiContext.openModal(<ModalConnectGameID />);
   }
 
   
@@ -115,7 +115,7 @@ export default function LaddersHeader(props) {
                       <button
                         type="button"
                         className="button button-secondary"
-                        onClick={openModalConnectIDLeagueOfLegends}
+                        onClick={openModalConnectGameID}
                       >
                         <span
                           className={`icon icon-game-${selectedGame.slug}-symbol`}
diff --git a/pages/stryda/missions/index.js b/pages/stryda/missions/index.js
index 4c24d523..78c5a484 100644
--- a/pages/stryda/missions/index.js
+++ b/pages/stryda/missions/index.js
@@ -6,7 +6,7 @@ import TabMissionsHowItWorks from "./tab-howitworks";
 import TabMissionsMissions from "./tab-missions";
 import TabMissionsHistory from "./tab-history";
 import TabMissionsLeaderboard from "./tab-leaderboard";
-import ModalConnectIDLeagueOfLegends from "../modal-connectIDleagueoflegends";
+import ModalConnectGameID from "../modal-connectgameID";
 import { UiContext } from "@/contexts/ui";
 import { usePrototypeData } from "@/contexts/prototype";
 import { useRouter } from "next/router";
@@ -54,12 +54,12 @@ export default function Missions() {
 
   useEffect(() => {
     if (modalConnectIDLeagueOfLegends) {
-      openModalConnectIDLeagueOfLegends();
+      openModalConnectGameID();
     }
   }, [modalConnectIDLeagueOfLegends]);
 
-  function openModalConnectIDLeagueOfLegends() {
-    uiContext.openModal(<ModalConnectIDLeagueOfLegends />);
+  function openModalConnectGameID() {
+    uiContext.openModal(<ModalConnectGameID />);
   }
 
   useEffect(() => {
diff --git a/pages/stryda/modal-connectIDleagueoflegends.js b/pages/stryda/modal-connectIDleagueoflegends.js
deleted file mode 100644
index 88af4e41..00000000
--- a/pages/stryda/modal-connectIDleagueoflegends.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { useContext, useState } from "react";
-
-import { UiContext } from "@/contexts/ui.js";
-import { VariablesContext } from "@/contexts/variables.js";
-import { usePrototypeData } from "@/contexts/prototype.js";
-
-export default function ModalConnectIDLeagueOfLegends(props) {
-  const uiContext = useContext(UiContext);
-  const prototype = usePrototypeData();
-  const [submitting, setSubmitting] = useState(false);
-  const [selectedGamesCount, setSelectedGamesCount] = useState(
-    prototype.games.filter((g) => g.isFavorite).length
-  );
-
-  const [isLoLRegionSelected, setIsLoLRegionSelected] = useState(false);
-
-  function selectLoLRegion(e) {
-    setIsLoLRegionSelected(true);
-  }
-
-  function closeModalWithDelay() {
-    setSubmitting(true);
-
-    setTimeout(() => {
-      uiContext.openToastr({
-        size: "medium",
-        text: "Your League of Legends account has been connected",
-        color: "green",
-        autoDelete: true,
-        autoDeleteDelay: 2500,
-      });
-      uiContext.closeModal();
-      setSubmitting(false);
-    }, 1000);
-  }
-
-  function clearSelectedGame() {
-    setSelectedGamesCount(0);
-  }
-
-  return (
-    <>
-      <div className="relative z-10 max-w-md w-full">
-        <div className="modal modal-center w-full">
-          <button
-            type="button"
-            className="button button-secondary button-close"
-            onClick={uiContext.closeModal}
-          >
-            <span className="icon icon-e-remove" />
-          </button>
-          <div className="modal-content">
-            <div className="modal-body text-center">
-              <h2 className="modal-title">Connect your account</h2>
-              <div className="form-group form-select my-4">
-                  <select
-                    id="Leagueoflegends-region"
-                    onChange={(e) => selectLoLRegion(e)}
-                  >
-                    <option disabled selected>
-                      Select your region
-                    </option>
-                    <option>Brazil</option>
-                    <option>Europe Nordic & East</option>
-                    <option>Europe West</option>
-                    <option>North America</option>
-                    <option>Latin America North</option>
-                    <option>Latin America South</option>
-                    <option>Oceania</option>
-                    <option>Russia</option>
-                    <option>Turkey</option>
-                    <option>Japan</option>
-                    <option>Republic of Korea</option>
-                    <option>The Philippines</option>
-                    <option>Singapore, Malaysia, Indonesia</option>
-                    <option>Taiwan, Hong Kong, Macao</option>
-                    <option>Thailand</option>
-                    <option>Vietnam</option>
-                  </select>
-                </div>
-                <p className="text-ui-300 my-4 leading-tight">
-                  By connecting my League of Legends account I acknowledge
-                  making my profile public to all users.
-                </p>
-            </div>
-            <div className="modal-action justify-center">
-              <button
-                type="button"
-                onClick={closeModalWithDelay}
-                disabled={!isLoLRegionSelected}
-                className={`button button-primary flex-1 ${
-                  submitting ? "is-loading" : ""
-                }`}
-              >
-                <span className="icon icon-game-leagueoflegends-symbol" />
-                <span>Connect my account</span>
-              </button>
-              <button
-                className="button button-secondary flex-1"
-                onClick={uiContext.closeModal}
-              >
-                <span>Cancel</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/pages/stryda/modal-connectgameID.js b/pages/stryda/modal-connectgameID.js
new file mode 100644
index 00000000..55e8c856
--- /dev/null
+++ b/pages/stryda/modal-connectgameID.js
@@ -0,0 +1,120 @@
+import React, { useEffect, useContext, useState } from "react";
+
+import { UiContext } from "@/contexts/ui.js";
+import { VariablesContext } from "@/contexts/variables.js";
+import { usePrototypeData } from "@/contexts/prototype.js";
+
+export default function ModalConnectGameID(props) {
+  const uiContext = useContext(UiContext);
+  const prototype = usePrototypeData();
+  const gameID = props.gameID || 2;
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedGame, setSelectedGame] = useState();
+  const [selectedGamesCount, setSelectedGamesCount] = useState(
+    prototype.games.filter((g) => g.isFavorite).length
+  );
+
+  const [isGameRegionSelected, setIsGameRegionSelected] = useState(false);
+
+  useEffect(() => {
+    setSelectedGame(prototype.getGameByID(gameID));
+  }, [gameID]);
+
+  function selectGameRegion(e) {
+    setIsGameRegionSelected(true);
+  }
+
+  function closeModalWithDelay() {
+    setSubmitting(true);
+
+    setTimeout(() => {
+      uiContext.openToastr({
+        size: "medium",
+        text: `Your ${selectedGame.name} account has been connected`,
+        color: "green",
+        autoDelete: true,
+        autoDeleteDelay: 2500,
+      });
+      uiContext.closeModal();
+      setSubmitting(false);
+    }, 1000);
+  }
+
+  function clearSelectedGame() {
+    setSelectedGamesCount(0);
+  }
+
+  return (
+    <>
+      {selectedGame && (
+        <div className="relative z-10 max-w-md w-full">
+          <div className="modal modal-center w-full">
+            <button
+              type="button"
+              className="button button-secondary button-close"
+              onClick={uiContext.closeModal}
+            >
+              <span className="icon icon-e-remove" />
+            </button>
+            <div className="modal-content">
+              <div className="modal-body text-center">
+                <h2 className="modal-title">Connect your account</h2>
+                <div className="form-group form-select mt-8 mb-4">
+                  <select
+                    id="gameaccount-region"
+                    onChange={(e) => selectGameRegion(e)}
+                  >
+                    <option disabled selected>
+                      Select your region
+                    </option>
+                    <option>Brazil</option>
+                    <option>Europe Nordic & East</option>
+                    <option>Europe West</option>
+                    <option>North America</option>
+                    <option>Latin America North</option>
+                    <option>Latin America South</option>
+                    <option>Oceania</option>
+                    <option>Russia</option>
+                    <option>Turkey</option>
+                    <option>Japan</option>
+                    <option>Republic of Korea</option>
+                    <option>The Philippines</option>
+                    <option>Singapore, Malaysia, Indonesia</option>
+                    <option>Taiwan, Hong Kong, Macao</option>
+                    <option>Thailand</option>
+                    <option>Vietnam</option>
+                  </select>
+                </div>
+                <p className="text-ui-300 my-2 leading-tight">
+                  By connecting my {selectedGame.name} account I acknowledge
+                  making my profile public to all users.
+                </p>
+              </div>
+              <div className="modal-action justify-center">
+                <button
+                  type="button"
+                  onClick={closeModalWithDelay}
+                  disabled={!isGameRegionSelected}
+                  className={`button button-primary flex-1 ${
+                    submitting ? "is-loading" : ""
+                  }`}
+                >
+                  <span
+                    className={`icon icon-game-${selectedGame.slug}-symbol`}
+                  />
+                  <span>Connect my account</span>
+                </button>
+                <button
+                  className="button button-secondary flex-1"
+                  onClick={uiContext.closeModal}
+                >
+                  <span>Cancel</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/pages/stryda/profile/settings/tab-gameaccounts.js b/pages/stryda/profile/settings/tab-gameaccounts.js
index e472ab25..9c330949 100644
--- a/pages/stryda/profile/settings/tab-gameaccounts.js
+++ b/pages/stryda/profile/settings/tab-gameaccounts.js
@@ -4,6 +4,7 @@ import { UiContext } from "@/contexts/ui";
 import { usePrototypeData } from "@/contexts/prototype";
 import { useRouter } from "next/router";
 import Tooltip from "@/components/Tooltip/Tooltip";
+import ModalConnectGameID from "../../modal-connectgameID";
 
 export default function TabSettingsGameAccounts() {
   const router = useRouter();
@@ -28,6 +29,10 @@ export default function TabSettingsGameAccounts() {
     setIsLoLRegionSelected(true);
   }
 
+  function openModalConnectGameID(gameID) {
+    uiContext.openModal(<ModalConnectGameID gameID={gameID} />);
+  }
+
   return (
     <>
       {selectedUser && (
@@ -111,9 +116,10 @@ export default function TabSettingsGameAccounts() {
                     <>
                       <button
                         type="button"
-                        onClick={() =>
-                          setIsValorantConnected(!isValorantConnected)
-                        }
+                        onClick={() => {
+                          setIsValorantConnected(!isValorantConnected);
+                          openModalConnectGameID(1);
+                        }}
                         className="button button-primary w-full"
                       >
                         <span className="icon icon-game-valorant-symbol" />
@@ -214,7 +220,10 @@ export default function TabSettingsGameAccounts() {
                     <>
                       <button
                         type="button"
-                        onClick={() => setIsLoLConnected(!isLoLConnected)}
+                        onClick={() => {
+                          setIsLoLConnected(!isLoLConnected);
+                          openModalConnectGameID(6);
+                        }}
                         className="button button-primary w-full"
                       >
                         <span className="icon icon-game-leagueoflegends-symbol" />
@@ -386,6 +395,7 @@ export default function TabSettingsGameAccounts() {
                               setIsAlreadyPUBGConnected(
                                 !isAlreadyPUBGConnected
                               );
+                              openModalConnectGameID(2);
                             }}
                             className="button button-primary w-full"
                           >
@@ -429,7 +439,10 @@ export default function TabSettingsGameAccounts() {
                     <>
                       <button
                         type="button"
-                        onClick={() => setIsPUBGConnected(!isPUBGConnected)}
+                        onClick={() => {
+                          setIsPUBGConnected(!isPUBGConnected);
+                          openModalConnectGameID(2);
+                        }}
                         className="button button-primary w-full"
                       >
                         <span className="icon icon-game-pubg-symbol" />