diff --git a/components/Layout.tsx b/components/Layout.tsx
index 6f2d61a..6ddde68 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import Link from "next/link";
 import Head from "next/head";
 import Image from "next/image";
 import { signIn, signOut, useSession } from "next-auth/client";
@@ -12,7 +11,7 @@ type Props = {
 const Layout = ({ children, title = "This is the default title" }: Props) => {
   const [session, loading] = useSession();
   return (
-    <div>
+    <div id="parentDiv">
       <Head>
         <title>{title}</title>
         <meta charSet="utf-8" />
@@ -109,10 +108,10 @@ const Layout = ({ children, title = "This is the default title" }: Props) => {
           </div>
         </nav>
       </header>
-      <div className="">
+      <div className="_content">
         {children}
         <footer>
-          <div className="content has-text-centered">
+          <div className="has-text-centered">
             <hr />
             <span>
               I'm here to stay (Footer) Maybe add some of the contact info here?
diff --git a/components/ListDetail.tsx b/components/ListDetail.tsx
index fa3f9c3..26598ff 100644
--- a/components/ListDetail.tsx
+++ b/components/ListDetail.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { User } from '../interfaces'
+import { User } from 'next-auth'
 
 type ListDetailProps = {
   item: User
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index d8c36c6..57c2633 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -21,41 +21,39 @@ interface Providers {
 }
 
 const LoginPage = ({ providers }: Providers) => {
-  const {callbackUrl} = useRouter().query
+  const { callbackUrl } = useRouter().query;
   const callback = Array.isArray(callbackUrl) ? callbackUrl[0] : callbackUrl;
   return (
     <Layout title="SHPE UTD">
-      <div className="container">
-        <section className="section mt-4">
-          <div className="columns is-centered is-vcentered">
-            <div className="column is-half">
-              <figure className="center-image is-flex is-4 image is-256x256">
-                <img className="is-rounded" src="/imgs/SHPE_Icon.png" />
-              </figure>
-              <p className="title is-1 is-spaced has-text-centered mt-4">
-                Login
-              </p>
-              <div className="field">
-                <GoogleLoginButton
-                  onClick={() => signIn(providers.google.id, { callbackUrl: callback })}
-                />
-                <LinkedInLoginButton
-                  className="mt-4"
-                  onClick={() =>
-                    signIn(providers.linkedin.id, { callbackUrl: callback})
-                  }
-                />
-                <MicrosoftLoginButton
-                  className="mt-4"
-                  onClick={() =>
-                    alert("Maybe we can login with our school outlooks?")
-                  }
-                />
-              </div>
+      <section className="section mt-4">
+        <div className="columns is-centered is-vcentered">
+          <div className="column is-half">
+            <figure className="center-image is-flex is-4 image is-256x256">
+              <img className="is-rounded" src="/imgs/SHPE_Icon.png" />
+            </figure>
+            <p className="title is-1 is-spaced has-text-centered mt-4">Login</p>
+            <div className="field">
+              <GoogleLoginButton
+                onClick={() =>
+                  signIn(providers.google.id, { callbackUrl: callback })
+                }
+              />
+              <LinkedInLoginButton
+                className="mt-4"
+                onClick={() =>
+                  signIn(providers.linkedin.id, { callbackUrl: callback })
+                }
+              />
+              <MicrosoftLoginButton
+                className="mt-4"
+                onClick={() =>
+                  alert("Maybe we can login with our school outlooks?")
+                }
+              />
             </div>
           </div>
-        </section>
-      </div>
+        </div>
+      </section>
     </Layout>
   );
 };
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index 1ad8159..2a12d5d 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -1,6 +1,6 @@
 import { GetServerSideProps } from 'next'
 
-import { User } from '../../interfaces'
+import { User } from 'next-auth'
 import { sampleUserData } from '../../utils/sample-data'
 import Layout from '../../components/Layout'
 import ListDetail from '../../components/ListDetail'
diff --git a/theming/_variables.scss b/theming/_variables.scss
index 9cec689..38daf25 100644
--- a/theming/_variables.scss
+++ b/theming/_variables.scss
@@ -26,13 +26,23 @@ $secondary: $SHPE-ORANGE;
     height: 4em;
 }
 
+._content{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
 
 footer {
     margin-top: auto;
 }
 
+#parentDiv {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column
+}
+
 .center-image{
     margin-left: auto;
     margin-right: auto;
-}
-
+}
\ No newline at end of file
