diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx
index e7e0cd74f..175563dc2 100644
--- a/apps/web/pages/500.jsx
+++ b/apps/web/pages/500.jsx
@@ -6,12 +6,12 @@ import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 export default function Custom500() {
   return (
     <>
-      <div className="relative flex items-center justify-center min-h-full text-white bg-black isolate">
+      <div className="relative flex flex-col items-center justify-center min-h-full text-white bg-black">
         <div className="absolute top-10 left-10">
           <Logo dark className="w-10 md:w-20" />
         </div>
 
-        <div className="px-6 py-48 mx-auto text-center max-w-7xl sm:py-40 lg:px-8">
+        <div className="px-4 py-10 mt-20 max-w-7xl">
           <h1 className="inline text-3xl font-bold tracking-tight sm:text-5xl">
             500
             <span className="px-3 font-thin">|</span>
@@ -20,12 +20,7 @@ export default function Custom500() {
             Something went wrong.
           </p>
           <div className="flex justify-center mt-10">
-            <Button
-              color="secondary"
-              href="/"
-              icon={ArrowSmallLeftIcon}
-              className="text-base font-semibold leading-7 text-brown"
-            >
+            <Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>
               Back to home
             </Button>
           </div>