diff --git a/app/about/page.tsx b/app/about/page.tsx
index 67e5868..a8e13ac 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -12,7 +12,7 @@ const page = () => {
     <>
       <AboutModel />
 
-      <main className="h-[calc(100vh-142px)] flex flex-col">
+      <main className="h-[calc(100dvh-142px)] flex flex-col">
         <div
           className={clsx(
             'flex max-w-3xl',
diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 0000000..980fe0d
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import clsx from 'clsx';
+import Button from 'components/rua/button';
+
+const GlobalError = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  return (
+    <html>
+      <body
+        className={clsx('w-full h-dvh flex', 'justify-center items-center')}
+      >
+        <div>
+          <h2 className="text-xl text-subtext1">
+            Something went wrong! ノ( OωOノ)
+          </h2>
+          <Button onClick={() => reset()}>Try again</Button>
+        </div>
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;
diff --git a/app/layout.tsx b/app/layout.tsx
index c9189b5..46baa5e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -41,7 +41,7 @@ export default function RootLayout({
       </head>
       <body>
         <RUAThemeProvider>
-          <div className="flex flex-col min-h-[100vh]">
+          <div className="flex flex-col min-h-dvh">
             <HeadBar />
             {children}
             <Footer />
