diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 134c92d..e20489e 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,8 +1,29 @@
 ---
 ---
 
-<section>
-  <div class="w-full h-full">
-    <h1 class="font-secondary">welcome</h1>
+<section
+  class="min-h-screen py-24 mx-auto flex flex-col gap-6 justify-center w-full"
+>
+  <h1 class="font-secondary text-lg text-primary-50 tracking-widest">
+    welcome, I'm
+  </h1>
+
+  <h3 class="text-4xl md:text-5xl lg:text-7xl font-semibold">Daniel Cuque.</h3>
+
+  <h3 class="text-4xl md:text-5xl lg:text-7xl font-semibold">
+    I build <span class="text-primary-50">web applications.</span>
+  </h3>
+
+  <h6 class="w-full md:w-1/2 text-justify text-gray-400">
+    I'm a software developer based in Guatemala, specializing in building
+    exceptional websites, and everything in between.
+  </h6>
+  <div>
+    <a
+      class="rounded-full text-lg border-2 border-primary-50 px-4 py-2 font-secondary text-primary-50 tracking-widest hover:transition-all hover:bg-primary-50 hover:bg-opacity-10 duration-200"
+      href="mailto:danielcuque78@gmail.com"
+    >
+      Get in touch</a
+    >
   </div>
 </section>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index a657b9a..f0a1604 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,7 +3,9 @@ import { navItems } from "../utils/navItems";
 import NavItem from "./NavItem.astro";
 ---
 
-<nav class="flex flex-row justify-center lg:justify-between mx-16 my-8">
+<nav
+  class="flex justify-center fixed h-10 w-full lg:justify-between px-16 my-8"
+>
   <div class="hidden lg:flex">
     <a href="/">
       <img
@@ -13,7 +15,7 @@ import NavItem from "./NavItem.astro";
       />
     </a>
   </div>
-  <ol class="flex flex-row gap-8 [counter-reset:item]">
+  <ol class="flex gap-8 [counter-reset:item]">
     {navItems.map(({ name, path }) => <NavItem name={name} path={path} />)}
   </ol>
 </nav>
diff --git a/src/components/Social.tsx b/src/components/Social.tsx
index d742544..4029c06 100644
--- a/src/components/Social.tsx
+++ b/src/components/Social.tsx
@@ -26,7 +26,7 @@ export const Social = () => {
           {socialItems.map(({ icon, link }) => (
             <li key={link} className="group w-12 p-2">
               <a
-                className="text-base fill-white group-hover:fill-primary-50 group-hover:transition group-hover:duration-200 group-hover:ease-in-out"
+                className="text-base fill-white group-hover:fill-primary-50 transition duration-200"
                 target="_blank"
                 href={link}
               >
@@ -40,7 +40,7 @@ export const Social = () => {
         <ul className="flex flex-col w-full h-full gap-6">
           <li className="group w-12 p-2">
             <a
-              className="text-xs group-hover:text-primary-50 group-hover:transition group-hover:duration-200 group-hover:ease-in-out [writing-mode:vertical-lr]"
+              className="text-xs group-hover:text-primary-50 transition group-hover:-translate-y-1 duration-200 [writing-mode:vertical-lr]"
               href="mailto:danielcuque78@gmail.com">
               danielcuque78@gmail.com
             </a>