diff --git a/components/Navbar.js b/components/Navbar.js
index 4802173..45b246c 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Navbar = ({ name, logo }) => (
   <nav className="flex py-2 border-b dark:border-neutral-800 hover:opacity-70">
-    <div className="w-3/12 md:w-7/12 md:mx-auto">
+    <div className="w-3/12 md:w-full lg:w-7/12 md:mx-11 lg:mx-auto">
       <div className="md:w-2/12">
         <Link href="/">
           {logo ? (
diff --git a/pages/_app.js b/pages/_app.js
index 3565e8c..2c793c0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -9,12 +9,12 @@ import config from "../config.json";
 
 const Content = ({ children }) => (
   <div className="flex items-center justify-between w-full my-5">
-    <div className="lg:w-7/12 mx-auto">{children}</div>
+    <div className="md:w-11/12 lg:w-7/12 mx-auto">{children}</div>
   </div>
 );
 
 const App = ({ Component, pageProps }) => (
-  <div className='bg-white dark:bg-black dark:text-neutral-200'>
+  <div className='min-h-screen bg-white dark:bg-black dark:text-neutral-200'>
     <Navbar name={config.navbar.logotype} logo={config.navbar.logo} />
     <Content>
       <Component {...pageProps} />
diff --git a/styles/globals.css b/styles/globals.css
index 1c5fb1d..68abff2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  background-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000000;
+  }
+}
+
 /* Somehow tailwind doesn't include this??? */
 .aspect-photos {
   aspect-ratio: 1 / 1;