diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 02f24e039..b1891bb7e 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -14,6 +14,7 @@ import {
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
 import { autoLogin, getGlobalVariables, getHealth } from "./controllers/API";
+import { useGetVersionQuery } from "./controllers/API/queries/version";
 import { setupAxiosDefaults } from "./controllers/API/utils";
 import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path";
 import Router from "./routes";
@@ -27,22 +28,19 @@ export default function App() {
   const queryClient = new QueryClient();
 
   useTrackLastVisitedPath();
-
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
-
   const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
     useContext(AuthContext);
   const setLoading = useAlertStore((state) => state.setLoading);
-  const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
 
   const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
+  useGetVersionQuery(undefined, "updateState");
 
   const [isLoadingHealth, setIsLoadingHealth] = useState(false);
-
   useEffect(() => {
     if (!dark) {
       document.getElementById("body")!.classList.remove("dark");
@@ -85,10 +83,9 @@ export default function App() {
     */
     return () => abortController.abort();
   }, []);
-
   const fetchAllData = async () => {
     setTimeout(async () => {
-      await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+      await Promise.all([refreshStars(), fetchData()]);
     }, 1000);
   };
 
@@ -154,38 +151,36 @@ export default function App() {
   return (
     //need parent component with width and height
     <div className="flex h-full flex-col">
-      <QueryClientProvider client={queryClient}>
-        <ErrorBoundary
-          onReset={() => {
-            // any reset function
-          }}
-          FallbackComponent={CrashErrorComponent}
-        >
-          <>
-            {
-              <FetchErrorComponent
-                description={FETCH_ERROR_DESCRIPION}
-                message={FETCH_ERROR_MESSAGE}
-                openModal={fetchError}
-                setRetry={() => {
-                  checkApplicationHealth();
-                }}
-                isLoadingHealth={isLoadingHealth}
-              ></FetchErrorComponent>
-            }
+      <ErrorBoundary
+        onReset={() => {
+          // any reset function
+        }}
+        FallbackComponent={CrashErrorComponent}
+      >
+        <>
+          {
+            <FetchErrorComponent
+              description={FETCH_ERROR_DESCRIPION}
+              message={FETCH_ERROR_MESSAGE}
+              openModal={fetchError}
+              setRetry={() => {
+                checkApplicationHealth();
+              }}
+              isLoadingHealth={isLoadingHealth}
+            ></FetchErrorComponent>
+          }
 
-            <Case condition={isLoadingApplication}>
-              <div className="loading-page-panel">
-                <LoadingComponent remSize={50} />
-              </div>
-            </Case>
+          <Case condition={isLoadingApplication}>
+            <div className="loading-page-panel">
+              <LoadingComponent remSize={50} />
+            </div>
+          </Case>
 
-            <Case condition={!isLoadingApplication}>
-              <Router />
-            </Case>
-          </>
-        </ErrorBoundary>
-      </QueryClientProvider>
+          <Case condition={!isLoadingApplication}>
+            <Router />
+          </Case>
+        </>
+      </ErrorBoundary>
       <div></div>
       <div className="app-div">
         <AlertDisplayArea />
diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 16f301dc5..95d9d761a 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { ReactFlowProvider } from "reactflow";
@@ -6,18 +7,21 @@ import { ApiInterceptor } from "../controllers/API/api";
 import { AuthProvider } from "./authContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
+  const queryClient = new QueryClient();
   //element to wrap all context
   return (
     <>
       <BrowserRouter>
-        <AuthProvider>
-          <TooltipProvider>
-            <ReactFlowProvider>
-              <ApiInterceptor />
-              {children}
-            </ReactFlowProvider>
-          </TooltipProvider>
-        </AuthProvider>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <TooltipProvider>
+              <ReactFlowProvider>
+                <ApiInterceptor />
+                {children}
+              </ReactFlowProvider>
+            </TooltipProvider>
+          </AuthProvider>
+        </QueryClientProvider>
       </BrowserRouter>
     </>
   );
diff --git a/src/frontend/src/controllers/API/helpers/constants.ts b/src/frontend/src/controllers/API/helpers/constants.ts
index bfcfc7a42..d14f27749 100644
--- a/src/frontend/src/controllers/API/helpers/constants.ts
+++ b/src/frontend/src/controllers/API/helpers/constants.ts
@@ -3,6 +3,7 @@ import { BASE_URL_API } from "../../../constants/constants";
 export const URLs = {
   TRANSACTIONS: `monitor/transactions`,
   API_KEY: `api_key`,
+  VERSION: `version`,
 } as const;
 
 export function getURL(key: keyof typeof URLs, params: any = {}) {
diff --git a/src/frontend/src/controllers/API/queries/version/index.ts b/src/frontend/src/controllers/API/queries/version/index.ts
new file mode 100644
index 000000000..275ee3865
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/version/index.ts
@@ -0,0 +1 @@
+export * from "./use-get-version";
diff --git a/src/frontend/src/controllers/API/queries/version/use-get-version.ts b/src/frontend/src/controllers/API/queries/version/use-get-version.ts
new file mode 100644
index 000000000..dea78c99e
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/version/use-get-version.ts
@@ -0,0 +1,41 @@
+import { useDarkStore } from "@/stores/darkStore";
+import { useQueryFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface versionQueryResponse {
+  version: string;
+  package: string;
+}
+
+export const useGetVersionQuery: useQueryFunctionType<
+  undefined,
+  versionQueryResponse
+> = (_, onFetch) => {
+  const { query } = UseRequestProcessor();
+
+  const responseFn = (data: versionQueryResponse) => {
+    if (!onFetch) return data;
+    if (typeof onFetch === "function") return onFetch(data);
+    const refreshVersion = useDarkStore.getState().refreshVersion;
+    switch (onFetch) {
+      case "updateState": {
+        return refreshVersion(data.version);
+      }
+      default:
+        return data;
+    }
+  };
+
+  const getVersionFn = async () => {
+    return await api.get<versionQueryResponse>(`${getURL("VERSION")}`);
+  };
+
+  const queryResult = query(["useGetVersionQuery"], async () => {
+    const { data } = await getVersionFn();
+    return responseFn(data);
+  });
+
+  return queryResult;
+};
diff --git a/src/frontend/src/stores/darkStore.ts b/src/frontend/src/stores/darkStore.ts
index 8c9c10951..a65252592 100644
--- a/src/frontend/src/stores/darkStore.ts
+++ b/src/frontend/src/stores/darkStore.ts
@@ -12,10 +12,8 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
     set(() => ({ dark: dark }));
     window.localStorage.setItem("isDark", dark.toString());
   },
-  refreshVersion: () => {
-    getVersion().then((data) => {
-      set(() => ({ version: data.version }));
-    });
+  refreshVersion: (v) => {
+    set(() => ({ version: v }));
   },
   refreshStars: () => {
     if (import.meta.env.CI) {
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index c8f9739b5..e1c9173b9 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -233,10 +233,9 @@ export type ResponseErrorDetailAPI = {
   response: { data: { detail: string } };
 };
 
-export type useQueryFunctionType<T, R> = (
-  props: T,
-  onFetch?: ((data: R) => void) | string,
-) => UseQueryResult<R>;
+export type useQueryFunctionType<T = undefined, R = any> = T extends undefined
+  ? (props?: T, onFetch?: ((data: R) => void) | string) => UseQueryResult<R>
+  : (props: T, onFetch?: ((data: R) => void) | string) => UseQueryResult<R>;
 
 export type QueryFunctionType = (
   queryKey: UndefinedInitialDataOptions["queryKey"],
diff --git a/src/frontend/src/types/zustand/dark/index.ts b/src/frontend/src/types/zustand/dark/index.ts
index d4cd394ff..f71b98bde 100644
--- a/src/frontend/src/types/zustand/dark/index.ts
+++ b/src/frontend/src/types/zustand/dark/index.ts
@@ -3,6 +3,6 @@ export type DarkStoreType = {
   stars: number;
   version: string;
   setDark: (dark: boolean) => void;
-  refreshVersion: () => void;
+  refreshVersion: (v: string) => void;
   refreshStars: () => void;
 };