diff --git a/public/index.html b/public/index.html
index 4123528..a2a7345 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Ayush Mukherjee</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet"> 
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 3943904..cf4e44a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <Header></Header>
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
+<script>
+import Header from '@/components/Header'
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+export default {
+  name: 'App',
+  components: {
+    Header
   }
 }
-</style>
+</script>
+
+<style lang="scss">
+@import 'scss/main';
+</style>
\ No newline at end of file
diff --git a/src/assets/illustration.png b/src/assets/illustration.png
new file mode 100755
index 0000000..e86bdea
Binary files /dev/null and b/src/assets/illustration.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
old mode 100644
new mode 100755
index f3d2503..1680476
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..6b631a4
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,19 @@
+<template>
+    <header>
+        <div class="brand">
+            <div class="logo">
+                <img src="@/assets/logo.png" alt="Ayush M. Logo" width="60px" height="60px">
+            </div>
+            <div class="name">
+                <span>Ayush</span>
+                <span>Mukherjee.</span>
+            </div>
+        </div>
+        <nav>
+            <router-link class="active" to="#work">work</router-link>
+            <router-link to="#about">about</router-link>
+            <router-link to="#skills">skills</router-link>
+            <router-link to="#contact">contact</router-link>
+        </nav>
+    </header>
+</template>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index a7d5b9f..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/scss/_main.scss b/src/scss/_main.scss
new file mode 100644
index 0000000..8ba6501
--- /dev/null
+++ b/src/scss/_main.scss
@@ -0,0 +1,3 @@
+@import 'base/index',
+'components/index',
+'pages/index';
\ No newline at end of file
diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
new file mode 100644
index 0000000..7ed6d51
--- /dev/null
+++ b/src/scss/base/_base.scss
@@ -0,0 +1,30 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+*,
+::before,
+::after {
+    box-sizing: inherit;
+}
+
+body {
+    background: $bg;
+    color: $fg;
+    font-family: 'Montserrat', sans-serif;
+    font-size: $font-regular;
+    font-weight: $font-normal;
+    overflow-x: hidden;
+}
+
+p {
+    letter-spacing: 0.005em;
+    line-height: 1.6em;
+}
+
+.container {
+    padding: 0 120px;
+}
\ No newline at end of file
diff --git a/src/scss/base/_index.scss b/src/scss/base/_index.scss
new file mode 100644
index 0000000..6220c82
--- /dev/null
+++ b/src/scss/base/_index.scss
@@ -0,0 +1,2 @@
+@import 'variables',
+        'base';
\ No newline at end of file
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
new file mode 100644
index 0000000..a57a66d
--- /dev/null
+++ b/src/scss/base/_variables.scss
@@ -0,0 +1,22 @@
+// background and text colors
+$bg: #F6FAFF;
+$fg: #05102E;
+
+// theme colors
+$primary: #224AB7;
+$secondary: #FC7DA7;
+$tertiary: #94C3FF;
+$quaternary: #D1E5FF;
+
+// fonts
+$font: 'Montserrat', sans-serif;
+$font-normal: 500;
+$font-bold: 700;
+
+// font sizes
+$font-brand: 16pt;
+$font-nav: 12pt;
+$font-section: 50pt;
+$font-section-sub: 16pt;
+$font-heading: 30pt;
+$font-regular: 16pt;
\ No newline at end of file
diff --git a/src/scss/components/_btn.scss b/src/scss/components/_btn.scss
new file mode 100644
index 0000000..2bde855
--- /dev/null
+++ b/src/scss/components/_btn.scss
@@ -0,0 +1,23 @@
+.btn {
+    display: inline-block;
+    background: $primary;
+    color: $bg;
+    text-decoration: none;
+    padding: 23px 50px;
+    margin-right: 40px;
+    border-radius: 5px;
+    transition: 0.2s ease;
+
+    &:hover {
+        background: lighten($primary, 20%);
+    }
+}
+
+.btn-secondary {
+    color: $fg;
+    background: $secondary;
+
+    &:hover {
+        background: darken($secondary, 10%);
+    }
+}
\ No newline at end of file
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
new file mode 100644
index 0000000..8166a9f
--- /dev/null
+++ b/src/scss/components/_header.scss
@@ -0,0 +1,53 @@
+header {
+    padding: 60px 120px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .brand {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 210px;
+        font-size: $font-brand;
+
+        .logo {
+            width: 60px;
+            height: 60px;
+        }
+
+        .name {
+            display: flex;
+            flex-direction: column;
+            font-weight: $font-bold;
+        }
+    }
+
+    nav {
+        font-size: $font-nav;
+
+        a,
+        a:active,
+        a:visited {
+            display: inline-block;
+            color: $fg;
+            text-decoration: none;
+            text-transform: uppercase;
+            padding-right: 80px;
+            transition: 0.2s ease;
+
+            &:hover {
+                color: $tertiary;
+            }
+
+            &.active {
+                color: $primary;
+                font-weight: $font-bold;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
new file mode 100644
index 0000000..e611cc6
--- /dev/null
+++ b/src/scss/components/_index.scss
@@ -0,0 +1,2 @@
+@import 'header',
+'btn';
\ No newline at end of file
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
new file mode 100644
index 0000000..0cc40df
--- /dev/null
+++ b/src/scss/pages/_home.scss
@@ -0,0 +1,20 @@
+main {
+    position: relative;
+    padding: 60px 120px;
+
+    .tag {
+        font-size: $font-heading;
+        margin-bottom: 60px;
+    }
+
+    .para {
+        max-width: 600px;
+        margin-bottom: 60px;
+    }
+
+    .illustration {
+        position: absolute;
+        top: 0;
+        right: 120px;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss
new file mode 100644
index 0000000..b3e389f
--- /dev/null
+++ b/src/scss/pages/_index.scss
@@ -0,0 +1 @@
+@import 'home';
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8bd6c57..00c7a81 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,28 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+<div class="container">
+  <main>
+    <div class="tag">
+      I design and build
+      <br>
+      interfaces for Humans.
+    </div>
+    <div class="para">
+      <p>I make robust, easy to use systems and applications centered around humans. I believe simplicity is the way forward for modern systems and apps.</p>
+    </div>
+    <div class="cta">
+      <a href="#work" class="btn">See my work</a>
+      <a href="#contact" class="btn btn-secondary">Discuss a project</a>
+    </div>
+    <div class="illustration">
+      <img src="@/assets/illustration.png" alt="Illustration">
+    </div>
+  </main>
+</div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
+  name: 'Home'
 }
 </script>
