diff --git a/web/src/context/global-state-provider.tsx b/web/src/context/global-state-provider.tsx
new file mode 100644
index 000000000..0e9c54a02
--- /dev/null
+++ b/web/src/context/global-state-provider.tsx
@@ -0,0 +1,36 @@
+// GlobalStateContext.tsx
+import React, { createContext, useState, ReactNode, useContext } from "react";
+
+interface GlobalStateContextType {
+  lastSelectedCamera: string;
+  setLastSelectedCamera: (camera: string) => void;
+}
+
+const GlobalStateContext = createContext<GlobalStateContextType | undefined>(
+  undefined,
+);
+
+const GlobalStateProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [lastSelectedCamera, setLastSelectedCamera] = useState<string>("");
+
+  return (
+    <GlobalStateContext.Provider
+      value={{ lastSelectedCamera, setLastSelectedCamera }}
+    >
+      {children}
+    </GlobalStateContext.Provider>
+  );
+};
+
+const useGlobalState = (): GlobalStateContextType => {
+  const context = useContext(GlobalStateContext);
+  if (context === undefined) {
+    throw new Error("useGlobalState must be used within a GlobalStateProvider");
+  }
+  return context;
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { GlobalStateProvider, useGlobalState };
diff --git a/web/src/context/providers.tsx b/web/src/context/providers.tsx
index fe5e931e7..fcab7d8f4 100644
--- a/web/src/context/providers.tsx
+++ b/web/src/context/providers.tsx
@@ -5,19 +5,22 @@ import { ApiProvider } from "@/api";
 import { IconContext } from "react-icons";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { StatusBarMessagesProvider } from "@/context/statusbar-provider";
+import { GlobalStateProvider } from "@/context/global-state-provider";
 
 type TProvidersProps = {
   children: ReactNode;
 };
 
-function providers({ children }: TProvidersProps) {
+function Providers({ children }: TProvidersProps) {
   return (
     <RecoilRoot>
       <ApiProvider>
         <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
           <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
-              <StatusBarMessagesProvider>{children}</StatusBarMessagesProvider>
+              <StatusBarMessagesProvider>
+                <GlobalStateProvider>{children}</GlobalStateProvider>
+              </StatusBarMessagesProvider>
             </IconContext.Provider>
           </TooltipProvider>
         </ThemeProvider>
@@ -26,4 +29,4 @@ function providers({ children }: TProvidersProps) {
   );
 }
 
-export default providers;
+export default Providers;