diff --git a/config.toml b/config.toml
index 04d42e3..4f68d7d 100644
--- a/config.toml
+++ b/config.toml
@@ -1,4 +1,5 @@
 baseURL = "https://shockrah.gitlab.io"
+title = "Hi I'm Shockrah"
 
 languageCode = "en-us"
 theme = "resume"
@@ -8,7 +9,7 @@ unsafe= true
 
 [params]
 	name = "Alejandro"
-	description = "A summary of my past and present works"
+	description = "I make candy and code"
 	title = "My personal portfolio"
 
     author = "Alejandro Santillana"
diff --git a/static/images/favicon.png b/static/images/favicon.png
new file mode 100644
index 0000000..7f7ba29
--- /dev/null
+++ b/static/images/favicon.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:65e3d28b356de7fe1e34bfef3bb6e7886f022dfb26a8ea03e67fef934c257da9
+size 38245
diff --git a/themes/resume/layouts/index.html b/themes/resume/layouts/index.html
index 41a7208..3ce11a9 100644
--- a/themes/resume/layouts/index.html
+++ b/themes/resume/layouts/index.html
@@ -2,23 +2,31 @@
 <html lang="en-us">
 {{ partial "head.html" . }}
 <body>
-    <div class="banner-container">
-        <img src="/images/banner.jpg" style="max-width: 100%;">
-        <div class="headline">Hi I'm Alex</div>
-        <a class="btn btn-default btn-lg banner-button" href="#content">
-            <i class="fa fa-arrow-circle-down"></i>
-        </a>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand"><img src="/images/favicon.png" width="30", height="30" class="d-inline-block align-top" alt="">
+        <strong>Why not look through my:</strong>
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+            {{ range .Pages }}
+            <li class="nav-item">
+                <a class="nav-link" href="#{{trim .RelPermalink "/"}}">
+                    {{.Title}} or
+                </a>
+            </li>
+            {{ end }}
+        </ul>
     </div>
-    <div id="content" class="content-container sections">
-        <!-- Range the cards first -->
-        {{ range .Pages }}
-        <div class="card">
-            <div class="card-body">
-                <h2 class="card-title">{{.Title}}</h2>
-                <div class="card-text">{{.Content}}</div>
-            </div>
-        </div>
-        {{ end }}
+</nav>
+<div class="banner-container">
+    <div class="fade-in-image">
+        <img class="img-fluid" src="/images/banner.jpg">
     </div>
+    <h1 class="headline">{{.Site.Title}}</h1>
+    <h2 class="headline" style="bottom: 3%">{{.Site.Params.Description}}</h2>
+</div>
 </body>
 </html>
diff --git a/themes/resume/layouts/partials/head.html b/themes/resume/layouts/partials/head.html
index c907b49..875341c 100644
--- a/themes/resume/layouts/partials/head.html
+++ b/themes/resume/layouts/partials/head.html
@@ -2,6 +2,7 @@
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <link rel="shortcut icon" type="image/png" href="{{ .Site.BaseURL }}/images/favicon.png">
     <meta property="og:title" content="{{ .Site.Title }}">
     <meta property="og:description" content="{{ .Site.Params.description }}">
     <meta property="og:site_name" content="{{ .Site.Params.name }}">
diff --git a/themes/resume/static/css/style.css b/themes/resume/static/css/style.css
index 370c372..28ce778 100644
--- a/themes/resume/static/css/style.css
+++ b/themes/resume/static/css/style.css
@@ -18,11 +18,44 @@ html {
     max-width: 100%;
 }
 
+.fade-in-image {
+  animation: fadeIn 3s;
+  -webkit-animation: fadeIn 5s;
+  -moz-animation: fadeIn 5s;
+  -o-animation: fadeIn 5s;
+  -ms-animation: fadeIn 5s;
+}
+@keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+
 .headline {
     position: absolute;
     font-weight: bold;
     font-size: 5rem;
-    top: 4rem;
+    bottom: 10%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
@@ -40,48 +73,3 @@ html {
     color: white;
 }
 
-.sections {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-.card {
-    margin: 1em;
-    max-width: 800px;
-    border: none;
-}
-.card-title {
-    font-size: 5rem;
-    font-weight: bold;
-    text-decoration: none;
-    color: #4dc09f;
-}
-
-.card-text {
-    font-size: 2rem;
-}
-.card-body {
-    background-color: #212121;
-}
-/* Ripped from my blog */
-.embed { 
-    padding-left: 1em; 
-    line-height: 0; 
-    border-radius: 10px;
-    background: #191818; 
-    padding-right: 0.75em;
-    padding-bottom: 0.5em; 
-    min-width: 300px; 
-    margin-bottom: 2em;
-    border-left: 8px solid;
-}
-.embed-img { 
-    max-width: 600px; 
-}
-
-a {
-    color: #dcdcdc;
-}
-a:hover {
-    color: white;
-}
