diff --git a/app/layout.tsx b/app/layout.tsx
index ec6cf2c..7b2a7ef 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import { SiGithub, SiLinkedin, SiX } from '@icons-pack/react-simple-icons';
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { ThemeProvider } from 'next-themes';
 import { ViewTransitions } from 'next-view-transitions';
 
@@ -12,7 +13,7 @@ import { BASE_URL } from '~/lib/constants';
 import { cn } from '~/lib/utils';
 import { Toaster } from '~/components/ui/sonner';
 import { BotLink, NavLink } from '~/components/navigation';
-import { ThemeToggle } from '~/components/theme-toggle';
+import { ThemeButton } from '~/components/theme-button';
 import { AI } from '~/features/ai';
 import { LanguageStats } from '~/features/github/components/language-stats';
 import { LatestCommit } from '~/features/github/components/latest-commit';
@@ -156,6 +157,23 @@ function Header() {
   );
 }
 
+function ThemeToggle() {
+  return (
+    <div className='flex gap-2 rounded-full border bg-muted'>
+      <span className='sr-only'>Toggle theme</span>
+      <ThemeButton type='light'>
+        <Sun />
+      </ThemeButton>
+      <ThemeButton type='dark'>
+        <Moon />
+      </ThemeButton>
+      <ThemeButton type='system'>
+        <Monitor />
+      </ThemeButton>
+    </div>
+  );
+}
+
 function Footer() {
   return (
     <footer className='mx-auto w-full max-w-screen-lg space-y-6 border-t p-4'>
diff --git a/components/error-boundary.tsx b/components/error-boundary.tsx
index c010181..276d3f7 100644
--- a/components/error-boundary.tsx
+++ b/components/error-boundary.tsx
@@ -1,3 +1,21 @@
 'use client';
 
-export { ErrorBoundary } from 'react-error-boundary';
+import type { ComponentProps } from 'react';
+import { unstable_rethrow as rethrow } from 'next/navigation';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+
+export function ErrorBoundary({
+  onError,
+  ...rest
+}: ComponentProps<typeof ReactErrorBoundary>) {
+  return (
+    <ReactErrorBoundary
+      {...rest}
+      onError={(error, info) => {
+        rethrow(error);
+        console.error(error);
+        onError?.(error, info);
+      }}
+    />
+  );
+}
diff --git a/components/theme-toggle.tsx b/components/theme-button.tsx
similarity index 60%
rename from components/theme-toggle.tsx
rename to components/theme-button.tsx
index eca158f..12511fe 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-button.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useState, type PropsWithChildren } from 'react';
-import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
 import { cn } from '~/lib/utils';
@@ -11,7 +10,7 @@ interface ThemeButtonProps extends PropsWithChildren {
   type: 'light' | 'dark' | 'system';
 }
 
-function ThemeButton({ type, children }: Readonly<ThemeButtonProps>) {
+export function ThemeButton({ type, children }: Readonly<ThemeButtonProps>) {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
@@ -34,20 +33,3 @@ function ThemeButton({ type, children }: Readonly<ThemeButtonProps>) {
     </Button>
   );
 }
-
-export function ThemeToggle() {
-  return (
-    <div className='flex gap-2 rounded-full border bg-muted'>
-      <span className='sr-only'>Toggle theme</span>
-      <ThemeButton type='light'>
-        <Sun />
-      </ThemeButton>
-      <ThemeButton type='dark'>
-        <Moon />
-      </ThemeButton>
-      <ThemeButton type='system'>
-        <Monitor />
-      </ThemeButton>
-    </div>
-  );
-}