diff --git a/src/utils/ApiRequests.ts b/src/utils/ApiRequests.ts
index f70c701..9b0cf9d 100644
--- a/src/utils/ApiRequests.ts
+++ b/src/utils/ApiRequests.ts
@@ -1,21 +1,29 @@
 import axios from "axios";
 import { StatusCodes as STATUS } from "http-status-codes";
 import { AUTHCODE_REGEX, SHARECODE_REGEX } from "@/constants";
-import type { Store } from "vuex";
-import type { Match, MatchChat, MatchWeapons, Player, PlayerMeta } from "@/api";
-import type { RootState } from "@/stores/matchDetails";
+import type {
+  Match,
+  MatchChat,
+  MatchRounds,
+  MatchWeapons,
+  Player,
+  PlayerMeta,
+} from "@/types";
+import type { infoState } from "@/stores/infoState";
+import { reactive } from "vue";
 
 const API_URL = import.meta.env.VITE_API_URL;
 
 // /player/<id>   GET   returns player <id> details (last 10 matches)
 export const GetUser = async (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  store: Store<"playerDetails", RootState, {}, {}>,
   id: string
-): Promise<Player | null> => {
+): Promise<[Player | null, infoState]> => {
   let response: Player | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/player/${id}`)
@@ -23,41 +31,37 @@ export const GetUser = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Player not found";
+          info.message = "Player not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get meta-stats or player";
+          info.message = "Unable to get meta-stats or player";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /player/<id>/meta/<limit>   GET   returns player <id> meta-stats with <limit>
 export const GetPlayerMeta = async (
-  store: Store<never>,
   player_id: string,
   limit = 4
-): Promise<PlayerMeta | null> => {
+): Promise<[PlayerMeta | null, infoState]> => {
   let response: PlayerMeta | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/player/${player_id}/meta/${limit}`)
@@ -65,41 +69,37 @@ export const GetPlayerMeta = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Player not found";
+          info.message = "Player not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get player meta";
+          info.message = "Unable to get player meta";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /player/<id>/next/<unix>   GET   returns 20 matches after <unix> for player <id>
 export const LoadMoreMatches = async (
-  store: Store<never>,
   player_id: string,
   date: number
-): Promise<Player | null> => {
+): Promise<[Player | null, infoState]> => {
   let response: Player | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/player/${player_id}/next/${date}`)
@@ -107,54 +107,50 @@ export const LoadMoreMatches = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Player not found";
+          info.message = "Player not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get meta-stats or player";
+          info.message = "Unable to get meta-stats or player";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /player/<id>/track   POST   Track player <id> FORM_DATA: authcode, [sharecode]
 export const TrackMe = async (
-  store: Store<never>,
   id64: string,
   authcode: string,
   sharecode = ""
-): Promise<number | null> => {
-  let status: number | null = null;
-  let message = "";
+): Promise<infoState> => {
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   if (sharecode !== "" && !SHARECODE_REGEX.test(sharecode)) {
-    status = STATUS.IM_A_TEAPOT;
-    message = "Sharecode is invalid";
+    info.statusCode = STATUS.IM_A_TEAPOT;
+    info.message = "Sharecode is invalid";
+    info.type = "error";
   }
   if (authcode === "" || !AUTHCODE_REGEX.test(authcode.toUpperCase())) {
-    status = STATUS.IM_A_TEAPOT;
-    message = "Authcode is invalid";
+    info.statusCode = STATUS.IM_A_TEAPOT;
+    info.message = "Authcode is invalid";
+    info.type = "error";
   }
 
-  if (status === null && message === "") {
+  if (info.statusCode === 0 && info.message === "") {
     await axios
       .post(
         `${API_URL}/player/${id64}/track`,
@@ -162,55 +158,52 @@ export const TrackMe = async (
       )
       .then((res) => {
         if (res.status === STATUS.ACCEPTED) {
-          status = STATUS.ACCEPTED;
-          message = "Tracking successful";
+          info.statusCode = STATUS.ACCEPTED;
+          info.message = "Tracking successful";
         }
       })
       .catch((err) => {
         switch (err.response.status) {
           case STATUS.BAD_REQUEST:
-            message = "Invalid arguments";
+            info.message = "Invalid arguments";
             break;
           case STATUS.NOT_FOUND:
-            message = "Player not found";
+            info.message = "Player not found";
             break;
           case STATUS.SERVICE_UNAVAILABLE:
-            message = "Service currently unavailable - Please try again later";
+            info.message =
+              "Service currently unavailable - Please try again later";
             break;
           case STATUS.UNAUTHORIZED:
-            message = "Authcode is invalid";
+            info.message = "Authcode is invalid";
             break;
           case STATUS.PRECONDITION_FAILED:
-            message = "Sharecode is invalid or missing";
+            info.message = "Sharecode is invalid or missing";
             break;
           case STATUS.INTERNAL_SERVER_ERROR:
-            message =
+            info.message =
               "Service is currently unavailable - Please try again later";
             break;
           default:
-            message = "An unknown error occurred";
+            info.message = "An unknown error occurred";
         }
-        status = err.response.status;
+        info.statusCode = err.response.status;
+        info.type = "error";
       });
   }
-
-  store.commit({
-    type: "changeInfoState",
-    data: {
-      statuscode: status,
-      message,
-      type: "error",
-    },
-  });
-  return status;
+  return info;
 };
 
 // /match/<id>   GET   returns details for match <id>
 export const GetMatchDetails = async (
-  store: Store<never>,
   match_id: string
-): Promise<Match | null> => {
+): Promise<[Match | null, infoState]> => {
   let response: Match | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/match/${match_id}`)
@@ -218,47 +211,36 @@ export const GetMatchDetails = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Error parsing matchID";
+          info.message = "Error parsing matchID";
           break;
         case STATUS.NOT_FOUND:
-          message = "Match not found";
+          info.message = "Match not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get match data";
+          info.message = "Unable to get match data";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
-type MatchRounds = {
-  rounds: {
-    [round: string]: {
-      [player: string]: Array<{ equip: number; spent: number; bank: number }>;
-    };
-  };
-};
 // /match/<id>/rounds   GET   returns round-stats for match <id>
 export const GetPlayerValue = async (
-  store: Store<never>,
   match_id: string
-): Promise<MatchRounds | null> => {
+): Promise<[MatchRounds | null, infoState]> => {
   let response: MatchRounds | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/match/${match_id}/rounds`)
@@ -266,40 +248,36 @@ export const GetPlayerValue = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Error parsing matchID";
+          info.message = "Error parsing matchID";
           break;
         case STATUS.NOT_FOUND:
-          message = "Match not found";
+          info.message = "Match not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get match data";
+          info.message = "Unable to get match data";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /match/<id>/weapons   GET   returns weapon-stats for match <id>
 export const GetWeaponDmg = async (
-  store: Store<never>,
   match_id: string
-): Promise<MatchWeapons | null> => {
+): Promise<[MatchWeapons | null, infoState]> => {
   let response: MatchWeapons | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/match/${match_id}/weapons`)
@@ -307,40 +285,36 @@ export const GetWeaponDmg = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Weapon damage not found";
+          info.message = "Weapon damage not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get weapon damage";
+          info.message = "Unable to get weapon damage";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /match/<id>/chat   GET   returns chat history for match <id>
 export const GetChatHistory = async (
-  store: Store<never>,
   match_id: string
-): Promise<MatchChat | null> => {
+): Promise<[MatchChat | null, infoState]> => {
   let response: MatchChat | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/match/${match_id}/chat`)
@@ -348,40 +322,36 @@ export const GetChatHistory = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Weapon damage not found";
+          info.message = "Weapon damage not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get weapon damage";
+          info.message = "Unable to get weapon damage";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /matches/<id>/chat/<langCode>   GET   returns chat history for match <id> with translated sections
 export const GetChatHistoryTranslated = async (
-  store: Store<never>,
   match_id: string
-): Promise<MatchChat | null> => {
+): Promise<[MatchChat | null, infoState]> => {
   let response: MatchChat | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/match/${match_id}/chat?translate=1`)
@@ -389,42 +359,34 @@ export const GetChatHistoryTranslated = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.NOT_FOUND:
-          message = "Chat was not found";
+          info.message = "Chat was not found";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to get chat";
+          info.message = "Unable to get chat";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
 
 // /matches   GET   returns last 20 matches in DB
-export const GetMatches = async (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  store: Store<"matchDetails", RootState, {}, {}>
-): Promise<Match[] | null> => {
+export const GetMatches = async (): Promise<[Match[] | null, infoState]> => {
   let response: Match[] | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/matches`)
@@ -432,40 +394,32 @@ export const GetMatches = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to marshal JSON";
+          info.message = "Unable to marshal JSON";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
-
-  return response;
+  return [response, info];
 };
 
 // /matches/next/<unix>   GET   returns 20 matches after time <unix>
 export const LoadMoreMatchesExplore = async (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  store: Store<"matchDetails", RootState, {}, {}>,
   date: number
-): Promise<Match[] | null> => {
+): Promise<[Match[] | null, infoState]> => {
   let response: Match[] | null = null;
+  const info = reactive<infoState>({
+    statusCode: 0,
+    message: "",
+    type: "success",
+  });
 
   await axios
     .get(`${API_URL}/matches/next/${date}`)
@@ -473,27 +427,19 @@ export const LoadMoreMatchesExplore = async (
       if (res.status === STATUS.OK) response = res.data;
     })
     .catch((err) => {
-      let message = "";
-
       switch (err.response.status) {
         case STATUS.BAD_REQUEST:
-          message = "Bad request";
+          info.message = "Bad request";
           break;
         case STATUS.INTERNAL_SERVER_ERROR:
-          message = "Unable to load more matches";
+          info.message = "Unable to load more matches";
           break;
         default:
-          message = "An unknown error occurred";
+          info.message = "An unknown error occurred";
       }
-      store.commit({
-        type: "changeInfoState",
-        data: {
-          statuscode: err.response.status,
-          message,
-          type: "error",
-        },
-      });
+      info.statusCode = err.response.status;
+      info.type = "error";
     });
 
-  return response;
+  return [response, info];
 };
diff --git a/src/utils/LocalStorage.ts b/src/utils/LocalStorage.ts
index e9b5cee..fc781d9 100644
--- a/src/utils/LocalStorage.ts
+++ b/src/utils/LocalStorage.ts
@@ -1,30 +1,37 @@
-import type { Player } from "@/api";
+export type LSPlayer = {
+  steamId64: string;
+  vanityUrl: string;
+  name: string;
+  avatar: string;
+};
 
-export const SaveLastVisitedToLocalStorage = (data: Player): void => {
-  const a = JSON.parse(localStorage.getItem("recent-visited") || "") || [];
+export const SaveLastVisitedToLocalStorage = (data: LSPlayer): void => {
+  const a = JSON.parse(localStorage.getItem("recent-visited") || "");
+  console.log("hello");
+  console.log("a: ", a);
 
   if (a.length === 0) {
     a.unshift(data);
   } else if (a.length === 9) {
-    if (a.find((p: Player) => p.steamid64 === data.steamid64)) {
+    if (a.find((p: LSPlayer) => p.steamId64 === data.steamId64)) {
       a.shift();
       a.splice(
-        a.findIndex((p: Player) => p.steamid64 === data.steamid64),
+        a.findIndex((p: LSPlayer) => p.steamId64 === data.steamId64),
         1
       );
       a.unshift(data);
-    } else if (!a.find((p: Player) => p.steamid64 === data.steamid64)) {
+    } else if (!a.find((p: LSPlayer) => p.steamId64 === data.steamId64)) {
       a.shift();
       a.unshift(data);
     }
   } else if (a.length > 0 && a.length < 9) {
-    if (a.find((p: Player) => p.steamid64 === data.steamid64)) {
+    if (a.find((p: LSPlayer) => p.steamId64 === data.steamId64)) {
       a.splice(
-        a.findIndex((p: Player) => p.steamid64 === data.steamid64),
+        a.findIndex((p: LSPlayer) => p.steamId64 === data.steamId64),
         1
       );
       a.unshift(data);
-    } else if (!a.find((p: Player) => p.steamid64 === data.steamid64)) {
+    } else if (!a.find((p: LSPlayer) => p.steamId64 === data.steamId64)) {
       a.unshift(data);
     }
   }
diff --git a/src/utils/Utils.ts b/src/utils/Utils.ts
index fb6ea18..c1f128b 100644
--- a/src/utils/Utils.ts
+++ b/src/utils/Utils.ts
@@ -96,7 +96,7 @@ export const getPlayerArr = (
   return arr;
 };
 
-export const constructAvatarUrl = (hash: string, size: number): string => {
+export const constructAvatarUrl = (hash: string, size: string): string => {
   let output = "";
   const base =
     "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars";
@@ -158,3 +158,13 @@ export const StripControlCodes = (str = ""): string => {
 export const ProcessName = (str = ""): string => {
   return StripControlCodes(str).trim();
 };
+
+export const setBgImgDisplay = (value: string, type: any): void => {
+  const bgImg = document.querySelector(".bg-img") as typeof type;
+  bgImg.style.display = value;
+};
+
+export const setAppDivBackground = (value: string, type: any): void => {
+  const appDiv = document.getElementById("app") as typeof type;
+  appDiv.style.background = value;
+};