diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index a3c01d7..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.App {
-  text-align: center;
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.App-header {
-  min-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
diff --git a/src/App.js b/src/App.js
index 8586dda..fb7c4f0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,10 @@
 import React, { Suspense } from "react";
-import "./App.css";
 import Main from "./components/layout/Main";
 
 function App() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <div className="App">
-        <Main />
-      </div>
+      <Main />
     </Suspense>
   );
 }
diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
index ceaaa08..b17a85a 100644
--- a/src/components/layout/Main.js
+++ b/src/components/layout/Main.js
@@ -1,15 +1,37 @@
 import React from "react";
 import ApplicationStepper from "./stepper/ApplicationStepper";
 import Switcher from "./Switcher";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+  app: {
+    textAlign: "center",
+    backgroundColor: "#282c34",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column"
+  },
+  content: {
+    minHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "calc(10px + 2vmin)",
+    color: "white"
+  }
+}));
 
 const Main = () => {
+  const classes = useStyles();
+
   return (
-    <>
+    <div className={classes.app}>
       <ApplicationStepper />
-      <header className="App-header">
+      <header className={classes.content}>
         <Switcher />
       </header>
-    </>
+    </div>
   );
 };