diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx
index 91952fc9d..4edbfd8f9 100644
--- a/packages/desktop/src/app.tsx
+++ b/packages/desktop/src/app.tsx
@@ -39,9 +39,9 @@ const url =
 
 export function App() {
   return (
-    <ErrorBoundary fallback={ErrorPage}>
-      <MetaProvider>
-        <Font />
+    <MetaProvider>
+      <Font />
+      <ErrorBoundary fallback={ErrorPage}>
         <DialogProvider>
           <MarkedProvider>
             <DiffComponentProvider component={Diff}>
@@ -82,7 +82,7 @@ export function App() {
             </DiffComponentProvider>
           </MarkedProvider>
         </DialogProvider>
-      </MetaProvider>
-    </ErrorBoundary>
+      </ErrorBoundary>
+    </MetaProvider>
   )
 }
diff --git a/packages/desktop/src/pages/error.tsx b/packages/desktop/src/pages/error.tsx
index 27c30870a..66fc81d98 100644
--- a/packages/desktop/src/pages/error.tsx
+++ b/packages/desktop/src/pages/error.tsx
@@ -60,9 +60,9 @@ interface ErrorPageProps {
 export const ErrorPage: Component<ErrorPageProps> = (props) => {
   const platform = usePlatform()
   return (
-    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center">
+    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
       <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
-        <Logo class="h-8 w-auto text-text-strong" />
+        <Logo class="w-58.5 opacity-12 shrink-0" />
         <div class="flex flex-col items-center gap-2 text-center">
           <h1 class="text-lg font-medium text-text-strong">Something went wrong</h1>
           <p class="text-sm text-text-weak">An error occurred while loading the application.</p>