diff --git a/components/main/Main.js b/components/main/Main.js
index 82a84fd..3bca814 100644
--- a/components/main/Main.js
+++ b/components/main/Main.js
@@ -1,7 +1,7 @@
 import mainStyles from './main.module.css';
 
 const Main = ({ children }) => {
-  return <main className={mainStyles.site__main}>{children}</main>;
+  return <main className={mainStyles.hero}>{children}</main>;
 };
 
 export default Main;
diff --git a/components/main/main.module.css b/components/main/main.module.css
index 89ccaf6..0131395 100644
--- a/components/main/main.module.css
+++ b/components/main/main.module.css
@@ -1,4 +1,10 @@
-.site__main {
+.hero {
   display: flex;
   justify-content: space-between;
 }
+
+.hero__greeting {
+  font-weight: 300;
+  font-size: 2.5em;
+  margin-bottom: 20px;
+}
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 9eca58a..24523bb 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -7,7 +7,7 @@ const NavBar = () => {
         <p>__init__</p>
         <ul>
           <li>blog</li>
-          <li>about</li>
+          <li>resume</li>
         </ul>
       </nav>
     </>
diff --git a/components/navigation/navigation.module.css b/components/navigation/navigation.module.css
index 31e793c..3df9e07 100644
--- a/components/navigation/navigation.module.css
+++ b/components/navigation/navigation.module.css
@@ -13,5 +13,5 @@
 }
 
 .site__navbar li:not(:last-child) {
-  margin-right: 30px;
+  margin-right: 25px;
 }
diff --git a/pages/index.js b/pages/index.js
index 1b1d900..5156146 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,32 +1,41 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import Header from '../components/navigation/Header';
-import Main from '../components/main/Main';
 import NavBar from '../components/navigation/NavBar';
+import navStyles from '../components/navigation/navigation.module.css';
+import mainStyles from '../components/main/main.module.css';
 
 export default function Home() {
   return (
     <div className="container">
       <Head>
-        <title>Jesse Egbosionu</title>
+        <title>Home - Jesse Egbosionu</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Header>
-        <NavBar />
-      </Header>
-      <Main>
-        <aside>
-          <h2 style={{ fontWeight: 300 }}>Hi I'm Jesse</h2>
-          <p>I'm a software engineer from Lagos, Nigeria</p>
-        </aside>
-        <aside>
-          <Image
-            src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
-            width={468}
-            height={468}
-          />
-        </aside>
-      </Main>
+      <header className={navStyles.site__header}>
+        <nav className={navStyles.site__navbar}>
+          <p>__init__</p>
+          <ul>
+            <li>blog</li>
+            <li>resume</li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <section className={mainStyles.hero}>
+          <aside>
+            <h2 className={mainStyles.hero__greeting}>I'm Jesse</h2>
+            <p className={mainStyles.hero__description}>
+              I'm a software engineer from Lagos, Nigeria
+            </p>
+          </aside>
+          <aside>
+            <img
+              src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
+              className="hero__image"
+            />
+          </aside>
+        </section>
+      </main>
     </div>
   );
 }