diff --git a/frontend/apps/hub/src/app.tsx b/frontend/apps/hub/src/app.tsx
index edc742af0e..eaf4556331 100644
--- a/frontend/apps/hub/src/app.tsx
+++ b/frontend/apps/hub/src/app.tsx
@@ -9,8 +9,13 @@ import { PageLayout } from "@rivet-gg/components/layout";
 import * as Sentry from "@sentry/react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
+import {
+	CatchBoundary,
+	RouterProvider,
+	createRouter,
+} from "@tanstack/react-router";
 import { Suspense } from "react";
+import { LayoutedErrorComponent } from "./components/error-component";
 import { ThirdPartyProviders } from "./components/third-party-providers";
 import { AuthProvider, useAuth } from "./domains/auth/contexts/auth";
 import { routeMasks } from "./lib/route-masks";
@@ -63,9 +68,14 @@ export function App({ cacheKey }: { cacheKey?: string }) {
 				<ThirdPartyProviders>
 					<Suspense fallback={<FullscreenLoading />}>
 						<TooltipProvider>
-							<AuthProvider>
-								<InnerApp />
-							</AuthProvider>
+							<CatchBoundary
+								getResetKey={() => ""}
+								errorComponent={LayoutedErrorComponent}
+							>
+								<AuthProvider>
+									<InnerApp />
+								</AuthProvider>
+							</CatchBoundary>
 						</TooltipProvider>
 					</Suspense>
 
diff --git a/frontend/apps/hub/src/components/error-component.tsx b/frontend/apps/hub/src/components/error-component.tsx
index b22ea9aef1..b5b23f4ffd 100644
--- a/frontend/apps/hub/src/components/error-component.tsx
+++ b/frontend/apps/hub/src/components/error-component.tsx
@@ -10,6 +10,7 @@ import {
 	Code,
 	Text,
 } from "@rivet-gg/components";
+import { PageLayout } from "@rivet-gg/components/layout";
 import { Icon, faBomb, faLock } from "@rivet-gg/icons";
 import * as Sentry from "@sentry/react";
 import {
@@ -18,6 +19,7 @@ import {
 } from "@tanstack/react-query";
 import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
 import { useEffect } from "react";
+import { NetworkIssueError } from "./network-issue-error";
 import { NotFoundComponent } from "./not-found-component";
 
 export const ErrorComponent = ({
@@ -72,6 +74,8 @@ export const ErrorComponent = ({
 		}
 	} else if (!error) {
 		return <NotFoundComponent />;
+	} else if ("statusCode" in error && "body" in error) {
+		return <NetworkIssueError />;
 	}
 
 	return (
@@ -106,3 +110,11 @@ export const ErrorComponent = ({
 		</Card>
 	);
 };
+
+export function LayoutedErrorComponent(props: ErrorComponentProps) {
+	return (
+		<PageLayout.Root>
+			<ErrorComponent {...props} />
+		</PageLayout.Root>
+	);
+}
diff --git a/frontend/apps/hub/src/components/network-issue-error.tsx b/frontend/apps/hub/src/components/network-issue-error.tsx
new file mode 100644
index 0000000000..8e66a07bd5
--- /dev/null
+++ b/frontend/apps/hub/src/components/network-issue-error.tsx
@@ -0,0 +1,43 @@
+import {
+	Button,
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+	Text,
+} from "@rivet-gg/components";
+import { Icon, faWifiSlash } from "@rivet-gg/icons";
+
+export const NetworkIssueError = () => {
+	return (
+		<Card w="full">
+			<CardHeader>
+				<CardTitle className="flex gap-2">
+					<Icon icon={faWifiSlash} />
+					Connection issue!
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<Text>
+					It seems that you do not have working network connection, or
+					one of your extension blocks hub from accessing required
+					resources.
+					<br />
+					Check your network connection, disable browser extensions
+					and try again. If the issue still persist, please contact
+					us.
+				</Text>
+			</CardContent>
+			<CardFooter>
+				<Button
+					onClick={() => {
+						window.location.reload();
+					}}
+				>
+					Refresh
+				</Button>
+			</CardFooter>
+		</Card>
+	);
+};