diff --git a/components/Footer.js b/components/Footer.js
index f026544..c56331a 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,26 +1,11 @@
+import styles from './Footer.module.css'
+
 export default function Footer() {
   return (
     <>
-      <footer>
-        Made with{' '}
-        <img src="/netliheart.svg" alt="Netlify Logo" className="logo" /> for
-        you
+      <footer className={styles.footer}>
+        Made with <img src="/netliheart.svg" alt="Netlify Logo" className={styles.logo} /> for you
       </footer>
-      <style jsx>{`
-        footer {
-          width: 100%;
-          height: 100px;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .logo {
-          height: 1em;
-          margin: 5px;
-        }
-      `}</style>
     </>
   )
 }
diff --git a/components/Footer.module.css b/components/Footer.module.css
new file mode 100644
index 0000000..2af6f64
--- /dev/null
+++ b/components/Footer.module.css
@@ -0,0 +1,13 @@
+.footer {
+  width: 100%;
+  height: 100px;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  height: 1em;
+  margin: 5px;
+}
diff --git a/jsconfig.json b/jsconfig.json
index 1b487ca..94fe14c 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "@components/*": ["components/*"]
+      "@components/*": ["components/*"],
+      "@styles/*": ["styles/*"]
     }
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000..4d6f018
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,7 @@
+import '@styles/globals.css'
+
+function Application({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default Application
diff --git a/pages/index.js b/pages/index.js
index e3cfc44..809d0de 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -18,46 +18,6 @@ export default function Home() {
       </main>
 
       <Footer />
-
-      <style jsx>{`
-        .container {
-          height: 100vh;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        main {
-          padding: 5rem 0;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        code {
-          background: #fafafa;
-          border-radius: 5px;
-          padding: 0.75rem;
-          font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
-        }
-      `}</style>
-
-      <style jsx global>{`
-        html,
-        body {
-          padding: 0;
-          margin: 0;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-            Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-        }
-
-        * {
-          box-sizing: border-box;
-        }
-      `}</style>
     </div>
   )
 }
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..3b37d52
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,35 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+main {
+  padding: 5rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
+}
+
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}