diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index d55ea7b..dc0b879 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -17,8 +17,8 @@ export default function GlobalError({
     <html>
       <body>
         <main>
-          <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-            <Box display="flex" flexDirection="row">
+          <Box className='main'>
+            <Box className='head'>
               <h1 className='title animate__animated animate__backInDown'>
                 Error
               </h1>
@@ -26,7 +26,7 @@ export default function GlobalError({
                 {error.name}
               </h1>
             </Box>
-            <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+            <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
               <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
                 <Link href="/" >
                   {error.message}
diff --git a/src/app/globals.css b/src/app/globals.css
index 7e7c7b2..1fb9a68 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -15,14 +15,21 @@ a {
   box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
+.main {
+  min-height: 90vh;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.head {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .title {
@@ -38,6 +45,11 @@ a {
   font-weight: 400;
 }
 
+.mainbody {
+  display: flex;
+  flex-direction: column;
+}
+
 .description {
   margin: 2rem 0;
   line-height: 1.5;
@@ -50,6 +62,14 @@ a {
   text-align: center;
 }
 
+.linksbox {
+  display: grid;
+  grid-template-columns: repeat(2, 320px);
+  grid-template-rows: 1fr;
+  justify-content: center;
+  align-items: center;
+}
+
 .links {
   margin: 0;
   line-height: 1.5;
@@ -58,10 +78,8 @@ a {
 }
 
 .links a {
-  margin: 0;
   padding: 1.5rem 5rem;
   display: inline-block;
-  text-align: center;
 }
 
 .orange {
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 3f28f13..f455d1d 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -5,8 +5,8 @@ import 'animate.css'
 export default function NotFound() {
   return (
     <main>
-      <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-        <Box display="flex" flexDirection="row">
+      <Box className='main'>
+        <Box className='head'>
           <h1 className='title animate__animated animate__backInDown'>
             Error
           </h1>
@@ -14,7 +14,7 @@ export default function NotFound() {
             404
           </h1>
         </Box>
-        <Box display="flex" flexDirection="column" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+        <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
           <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
             <Link href="/" >
               Page Not Found
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1bfb990..ee44259 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,8 +5,8 @@ import 'animate.css'
 export default function Home() {
   return (
     <main>
-      <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
-        <Box display="flex" flexDirection="row">
+      <Box className='main'>
+        <Box className='head'>
           <h1 className='title animate__animated animate__backInDown'>
             Andrew
           </h1>
@@ -14,11 +14,11 @@ export default function Home() {
             Dragon
           </h1>
         </Box>
-        <Box display="flex" flexDirection="column" className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
+        <Box className='mainbody animate__animated animate__delay-2s animate__fadeInUp'>
           <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
             YouTube Streamer and Content Creator
           </h2>
-          <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="1fr" justifyContent="center" alignItems="center">
+          <Box className='linksbox'>
             <p className='links animate__animated animate__zoomIn animate__delay-2s'>
               <Link href="/links">
                 My Socials
