diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 62c76ae1..a2aec50c 100755
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -48,6 +48,8 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import Drift from "react-driftjs";
 
+import { AppContext } from './context/contextApi.jsx';
+
 // Production - backend proxy forwarding in nginx
 var globalUrl = window.location.origin;
 
@@ -612,26 +614,28 @@ const App = (message, props) => {
       </div>
 
   return (
-    <ThemeProvider theme={theme}>
-	  <CssBaseline />
-      <CookiesProvider>
-        <BrowserRouter>
-		  {includedData}
-        </BrowserRouter>
-		<ToastContainer 
-			position="bottom-center"
-			autoClose={5000}
-			hideProgressBar={false}
-			newestOnTop={false}
-			closeOnClick
-			rtl={false}
-			pauseOnFocusLoss
-			draggable
-			pauseOnHover
-			theme="dark"
-		/>
-      </CookiesProvider>
-    </ThemeProvider>
+	<AppContext>
+		<ThemeProvider theme={theme}>
+		  <CssBaseline />
+		  <CookiesProvider>
+			<BrowserRouter>
+			  {includedData}
+			</BrowserRouter>
+			<ToastContainer 
+				position="bottom-center"
+				autoClose={5000}
+				hideProgressBar={false}
+				newestOnTop={false}
+				closeOnClick
+				rtl={false}
+				pauseOnFocusLoss
+				draggable
+				pauseOnHover
+				theme="dark"
+			/>
+		  </CookiesProvider>
+		</ThemeProvider>
+	  </AppContext>
   );
 };
 
diff --git a/frontend/src/components/Searchfield.jsx b/frontend/src/components/Searchfield.jsx
index 83fb7675..b3a89011 100644
--- a/frontend/src/components/Searchfield.jsx
+++ b/frontend/src/components/Searchfield.jsx
@@ -4,7 +4,7 @@ import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import SearchBox from "../components/SearchData.jsx";
 
-import { Context } from '../Context/contextApi.js';
+import { Context } from '../context/contextApi.jsx';
 
 import {
 	Chip,
diff --git a/frontend/src/context/contextApi.jsx b/frontend/src/context/contextApi.jsx
new file mode 100644
index 00000000..b5506a49
--- /dev/null
+++ b/frontend/src/context/contextApi.jsx
@@ -0,0 +1,23 @@
+
+import { createContext, useState } from 'react';
+
+export const Context = createContext();
+
+export const AppContext =(props) => {
+
+    // Left side bar global states
+    const [searchBarModalOpen, setSearchBarModalOpen] = useState(false);
+    const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(false);
+
+
+    return (
+        <Context.Provider value={{
+            searchBarModalOpen,
+            setSearchBarModalOpen,
+            leftSideBarOpenByClick,
+            setLeftSideBarOpenByClick
+        }}>
+            {props.children}
+        </Context.Provider>
+    )
+}