diff --git a/src/components/Card.astro b/src/components/Card.astro
index 82fe815..6a425f4 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -50,7 +50,6 @@ const { href, title, rel, body, newTab = false } = Astro.props;
   .link-card > a {
     width: 100%;
     text-decoration: none;
-    line-height: 1.4;
     padding: 1em 1.3em;
     border-radius: 0.35rem;
     color: var(--text-color);
@@ -61,6 +60,11 @@ const { href, title, rel, body, newTab = false } = Astro.props;
   h2 {
     margin: 0;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
   }
 
   p {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a23a098..d234019 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,8 +8,10 @@
 
 <style>
   footer {
-    font-size: small;
-    margin-top: 2em;
+    margin-top: 1em;
     text-align: right;
   }
+  footer ul {
+    font-size: var(--font-size-sm);
+  }
 </style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index ef56f77..b58ada2 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -6,8 +6,6 @@ export type Link = {
   newTab?: boolean;
 };
 
-const url = Astro.url.pathname.toString();
-
 export interface Props {
   links: Array<Link>;
 }
@@ -15,15 +13,8 @@ export interface Props {
 const { links } = Astro.props;
 ---
 
-<div class="nav-wrapper">
   <nav>
-    <div id="left-wrapper">
-      {
-        (url !== "/") &&
-        (<a href="/"><Icon pack="mdi" name="home" />Home</a>)
-      }
-    </div>
-    <div id="right-wrapper">
+    <div id="wrapper">
       {
         links
           .filter((link) => link.url !== "")
@@ -35,37 +26,32 @@ const { links } = Astro.props;
       }
     </div>
   </nav>
-</div>
 
 <style>
-  div.nav-wrapper {
-    background: var(--ayo-gradient);
-  }
   nav {
+    background: var(--ayo-gradient);
     display: flex;
-    width: var(--content-width);
     margin: 0 auto;
   }
   nav a {
     display: inline-block;
     text-decoration: underline;
-    font-weight: normal;
     color: var(--color-bg);
-    padding: 5px;
+    padding: 0.5em 1em;
+    font-size: var(--font-size-sm);
   }
   nav a:hover {
     color: var(--color-brand-complement);
   }
 
   nav a svg {
-    width: 0.75rem;
+    width: 1.5rem;
   }
 
-  #left-wrapper,
-  #right-wrapper {
+  #wrapper {
     flex: 1;
-  }
-  #right-wrapper {
+    max-width: var(--content-width);
+    margin: 0 auto;
     text-align: right;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6591750..9ad346a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,6 +10,10 @@ export interface Props {
 
 const { title, description } = Astro.props;
 const links: Link[] = [
+  {
+    url: "/",
+    icon: "home",
+  },
   {
     url: "https://ayos.blog",
     icon: "blog",
@@ -35,10 +39,10 @@ const links: Link[] = [
   <body>
     <Nav links={links} />
     <slot />
-
     <style>
       :root {
         --content-width: 700px;
+        --font-size-sm: clamp(0.75rem, 0.20vw + 0.66rem, 0.8rem);
         --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
         --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
         --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@@ -107,6 +111,14 @@ const links: Link[] = [
         border-radius: 0.4rem;
       }
 
+      p,
+      img,
+      table,
+      ul {
+        margin: 1em 0;
+        font-size: var(--font-size-base);
+      }
+
       .text-gradient {
         font-weight: 900;
         background-image: var(--ayo-gradient);
diff --git a/src/pages/404.astro b/src/pages/404.astro
index ccec765..1120641 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -64,9 +64,8 @@ const description = "Have you tried turning it off and on again?";
     padding: 1em;
     max-width: var(--content-width);
     font-weight: normal;
-    font-size: large;
+    font-size: (--font-size-lg);
     color: var(--color-bg);
-    line-height: 1.6;
   }
 
   .now-wrapper {
@@ -75,7 +74,7 @@ const description = "Have you tried turning it off and on again?";
     padding: 8px 4px;
     font-weight: normal;
     color: white;
-    font-size: small;
+    font-size: var(--font-size-sm);
     text-decoration: none;
   }
 
@@ -123,7 +122,7 @@ const description = "Have you tried turning it off and on again?";
   @media only screen and (max-device-width: 360px) {
     .now-wrapper {
       border: 0px;
-      font-size: x-small;
+      font-size: var(--font-size-sm);
       width: 100%;
 
       display: -webkit-box;
@@ -152,13 +151,13 @@ const description = "Have you tried turning it off and on again?";
 
   @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
     .highlighted-section__content ul li {
-      font-size: 14px;
+      font-size: var(--font-size-sm);
     }
   }
 
   @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
     .highlighted-section__content ul li {
-      font-size: 20px;
+      font-size: var(--font-size-base);
     }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 31e5403..ab53a2f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -84,7 +84,7 @@ import Footer from "../components/Footer.astro";
     padding: 8px 4px;
     font-weight: normal;
     color: white;
-    font-size: small;
+    font-size: var(--font-size-sm);
     text-decoration: none;
   }
 
@@ -110,12 +110,11 @@ import Footer from "../components/Footer.astro";
 
   .highlighted-section__content {
     margin: auto;
-    padding: 1em;
+    padding: 0.5em 1em;
     max-width: var(--content-width);
     font-weight: normal;
-    font-size: large;
+    font-size: var(--font-size-lg);
     color: var(--color-bg);
-    line-height: 1.6;
   }
 
   .highlighted-section__content__profile-picture {
@@ -152,7 +151,7 @@ import Footer from "../components/Footer.astro";
   @media only screen and (max-device-width: 360px) {
     .now-wrapper {
       border: 0px;
-      font-size: x-small;
+      font-size: var(--font-size-sm);
       width: 100%;
 
       display: -webkit-box;
@@ -187,16 +186,17 @@ import Footer from "../components/Footer.astro";
   @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
     .highlighted-section__content__profile-picture {
       float: none;
+      margin: 0;
       width: 100px;
     }
     .highlighted-section__content ul li {
-      font-size: 14px;
+      font-size: var(--font-size-sm);
     }
   }
 
   @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
     .highlighted-section__content ul li {
-      font-size: 20px;
+      font-size: var(--font-size-base);
     }
   }
 </style>
diff --git a/src/pages/now/and-then/index.astro b/src/pages/now/and-then/index.astro
index ac76b14..734c1c0 100644
--- a/src/pages/now/and-then/index.astro
+++ b/src/pages/now/and-then/index.astro
@@ -17,9 +17,6 @@ const title = "Previously...";
 </Layout>
 
 <style>
-  h1 {
-    margin: 2rem 0;
-  }
 
   main {
     margin: auto;
@@ -40,7 +37,6 @@ const title = "Previously...";
   }
 
   .highlighted-content {
-    line-height: 1.6;
     margin: 1rem 0;
     background: #4f39fa;
     padding: 1rem;
@@ -49,7 +45,7 @@ const title = "Previously...";
   }
 
   .highlighted-content code {
-    font-size: 0.875em;
+    font-size: var(--font-size-base);
     border: 0.1em solid var(--color-border);
     border-radius: 4px;
     padding: 0.15em 0.25em;
diff --git a/src/pages/now/and-then/posts/09-20-2022.astro b/src/pages/now/and-then/posts/09-20-2022.astro
index 3f3126e..c66f818 100644
--- a/src/pages/now/and-then/posts/09-20-2022.astro
+++ b/src/pages/now/and-then/posts/09-20-2022.astro
@@ -29,9 +29,6 @@ const description =
 </Layout>
 
 <style>
-  h1 {
-    margin: 2rem 0;
-  }
 
   main {
     margin: auto;
@@ -52,7 +49,6 @@ const description =
   }
 
   .highlighted-content {
-    line-height: 1.6;
     margin: 1rem 0;
     background: #4f39fa;
     padding: 1rem;
@@ -61,7 +57,7 @@ const description =
   }
 
   .highlighted-content code {
-    font-size: 0.875em;
+    font-size: var(--font-size-base);
     border: 0.1em solid var(--color-border);
     border-radius: 4px;
     padding: 0.15em 0.25em;
diff --git a/src/pages/now/index.astro b/src/pages/now/index.astro
index 31cf8f3..3a723b5 100644
--- a/src/pages/now/index.astro
+++ b/src/pages/now/index.astro
@@ -51,10 +51,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
 </Layout>
 
 <style>
-  h1 {
-    margin: 2rem 0;
-  }
-
   main {
     margin: auto;
     padding: 1em;
@@ -74,7 +70,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
   }
 
   .highlighted-content {
-    line-height: 1.6;
     margin: 1rem 0;
     background: #4f39fa;
     padding: 1rem;
@@ -83,7 +78,7 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
   }
 
   .highlighted-content code {
-    font-size: 0.875em;
+    font-size: var(--font-size-base);
     border: 0.1em solid var(--color-border);
     border-radius: 4px;
     padding: 0.15em 0.25em;
diff --git a/src/pages/social.astro b/src/pages/social.astro
index 7f91b23..7cc6aa1 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -38,12 +38,8 @@ import Footer from "../components/Footer.astro";
 </Layout>
 
 <style>
-  h1 {
-    margin: 2rem 0;
-  }
 
   .highlighted-content {
-    line-height: 1.6;
     margin: 1rem 0;
     background: #4f39fa;
     padding: 1rem;
@@ -52,7 +48,7 @@ import Footer from "../components/Footer.astro";
   }
 
   .highlighted-content code {
-    font-size: 0.875em;
+    font-size: var(--font-size-base);
     border: 0.1em solid var(--color-border);
     border-radius: 4px;
     padding: 0.15em 0.25em;
