diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 3ab342b..f290e3d 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,5 +1,5 @@
 import AppBar from "@/components/AppBar";
-import { getServerSession } from "next-auth";
+import { AuthOptions, getServerSession } from "next-auth";
 import { authOptions, SessionWithTokens } from "@/config/authConfig";
 import { redirect } from "next/navigation";
 import Box from "@mui/material/Box";
@@ -11,13 +11,14 @@ import { SetupAxiosInterceptors } from "@/app/(main)/axios/axiosInstance";
 import { CameraProvider } from "@/components/Cameras/CameraProvider";
 import { UploadProvider } from "@/components/UploadProvider/UploadProvider";
 import SessionProviderWrapper from "@/components/SessionProviderWrapper/SessionProviderWrapper";
+import QrCodeScannerProvider from "@/components/QrCodeScannerProvider/QrCodeScannerProvider";
 
 export default async function MainLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const session = await getServerSession(authOptions) as SessionWithTokens;
+  const session = await getServerSession<AuthOptions, SessionWithTokens>(authOptions);
 
   if (!session?.user) {
     redirect("/login");
@@ -27,7 +28,7 @@ export default async function MainLayout({
 
   // Verify if the session is valid
   if (session) {
-    SetupAxiosInterceptors(session?.accessToken ?? null);
+    SetupAxiosInterceptors(session.accessToken);
   }
 
   return (
@@ -35,24 +36,26 @@ export default async function MainLayout({
     <UploadProvider>
       <CameraProvider>
         <AxiosProvider>
-          <>
-            <AppBar
-              profileName={session.user.name!}
-              avatarImageSrc={session.user.image || undefined}
-            />
-            <Box
-              component="main"
-              sx={{
-                marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
-                padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
-              }}
-            >
-              <Stack spacing={2}>
-                <Breadcrumb />
-                {children}
-              </Stack>
-            </Box>
-          </>
+          <QrCodeScannerProvider>
+            <>
+              <AppBar
+                profileName={session.user.name!}
+                avatarImageSrc={session.user.image || undefined}
+              />
+              <Box
+                component="main"
+                sx={{
+                  marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
+                  padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
+                }}
+              >
+                <Stack spacing={2}>
+                  <Breadcrumb />
+                  {children}
+                </Stack>
+              </Box>
+            </>
+          </QrCodeScannerProvider>
         </AxiosProvider>
       </CameraProvider>
       </UploadProvider>
diff --git a/src/config/authConfig.ts b/src/config/authConfig.ts
index 26ab31a..b0d1dc2 100644
--- a/src/config/authConfig.ts
+++ b/src/config/authConfig.ts
@@ -3,12 +3,13 @@ import CredentialsProvider from "next-auth/providers/credentials";
 import { LOGIN_API_PATH } from "./api";
 
 export interface SessionWithTokens extends Session {
-  accessToken?: string;
+  accessToken: string | null;
   refreshToken?: string;
   abilities: string[];
   id?: string | null
 }
 
+
 export const authOptions: AuthOptions = {
   debug: process.env.NODE_ENV === "development",
   providers: [
@@ -51,7 +52,7 @@ export const authOptions: AuthOptions = {
         ...session,
         // Add the data from the token to the session
         id: token.id as string | undefined,
-        accessToken: token.accessToken as string | undefined,
+        accessToken: token.accessToken as string | null,
         refreshToken: token.refreshToken as string | undefined,
         abilities: token.abilities as string[]
       };