diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index c6b17cc8..b157a96e 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -15,7 +15,7 @@ export const viewport = {
   userScalable: 1,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
index e4c2729c..562215ef 100644
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -6,14 +6,15 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { ModalProvider } from '@/modals';
 import type { AppStore } from '@/redux';
 import makeStore from '@/redux';
-import { ClerkProvider } from '@clerk/nextjs';
+import { ClerkProvider, useAuth } from '@clerk/nextjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpLink } from '@trpc/client';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';
 import superjson from 'superjson';
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+function AllProviders({ children }: { children: React.ReactNode }) {
+  const { getToken } = useAuth();
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -32,6 +33,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
       links: [
         httpLink({
           url: `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/trpc`,
+          async headers() {
+            return { Authorization: `Bearer ${await getToken()}` };
+          },
         }),
       ],
     })
@@ -43,19 +47,25 @@ export default function Providers({ children }: { children: React.ReactNode }) {
     storeRef.current = makeStore();
   }
 
+  return (
+    <ReduxProvider store={storeRef.current}>
+      <api.Provider client={trpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <TooltipProvider delayDuration={200}>
+            {children}
+            <Toaster />
+            <ModalProvider />
+          </TooltipProvider>
+        </QueryClientProvider>
+      </api.Provider>
+    </ReduxProvider>
+  );
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ClerkProvider>
-      <ReduxProvider store={storeRef.current}>
-        <api.Provider client={trpcClient} queryClient={queryClient}>
-          <QueryClientProvider client={queryClient}>
-            <TooltipProvider delayDuration={200}>
-              {children}
-              <Toaster />
-              <ModalProvider />
-            </TooltipProvider>
-          </QueryClientProvider>
-        </api.Provider>
-      </ReduxProvider>
+      <AllProviders>{children}</AllProviders>
     </ClerkProvider>
   );
 }
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index a9af39af..a61f5766 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -5,6 +5,7 @@ import { authMiddleware } from '@clerk/nextjs';
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
   publicRoutes: ['/share/overview/:id', '/api/trpc(.*)'],
+  debug: true,
 });
 
 export const config = {