diff --git a/public/css/home.css b/public/css/home.css
index 3cc3ac9..4ad3232 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -68,27 +68,119 @@
   margin: auto;
 }
 
+main > * {
+  padding: 3rem;
+}
+main > :nth-child(2n) {
+  background-color: rgba(var(--brown), 0.21);
+}
+
+.home-text {
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+.home-text > div > * {
+  margin: 2rem 0;
+}
+.home-text h1 {
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+.featured {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.featured > h1 {
+  font-size: 3.25rem;
+  font-weight: 400;
+  color: rgba(var(--black), 0.86);
+}
+.featured > div {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+}
+.featured p, .featured a {
+  margin-top: 1rem;
+  display: inline-block;
+}
+.featured > div > * {
+  text-align: end;
+}
+.featured h2 {
+  font-size: 2.25rem;
+  font-weight: 300;
+}
+
 /* Grid Pattern */
 .home-grid-container {
   padding: 0 15% 2rem 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .home-grid {
   display: grid;
   aspect-ratio: 1 / 1;
-  width: 100%;
+  width: 30rem;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   box-sizing: border-box;
 }
+.home-grid > * {
+  animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
+.home-grid > *:hover {
+  animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
 .home-grid svg {
   width: 100%;
   height: 100%;
   display: block;
 }
 
+@keyframes spin-in {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin-out {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
 /* -md */
 @media (min-width: 992px) {
   .home-grid-container {
     padding: 0;
   }
+  .home-text {
+    padding: 0 2rem;
+  }
+  .home-text h1 {
+    font-size: 4rem;
+  }
+  .featured > h1 {
+    font-size: 4rem;
+  }
+  .featured > div {
+    flex-direction: row;
+  }
+  .featured > div > :first-child {
+    flex: 1;
+  }
+  .featured > div > :last-child {
+    flex: 2;
+  }
 }
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index f2b4914..7da5963 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -8,12 +8,16 @@
   --tan: 158, 144, 112;
   --lightblue: 147, 225, 242;
 
-  --background-color: white;
-  --header-color: white;
+  --background-color: rgba(var(--tan), .12);
+  --header-color: var(--background-color);
   --footer-color: rgba(var(--teal));
   --borders: 1px solid rgba(var(--black), .86);
 }
 
+* {
+  font-family: "Lato", sans-serif;
+}
+
 html, body {
   height: 100vh;
   width: 100vw;
@@ -26,8 +30,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-  /* display: grid;
-  grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height); */
   background-color: var(--background-color);
 }
 body > * {
@@ -40,10 +42,6 @@ header {
   font-variant: small-caps;
   height: var(--navbar-height);
 }
-main {
-  padding: 1rem;
-  height: calc(100% - var(--navbar-height) - var(--footer-height));
-}
 footer {
   background-color: var(--footer-color);
   border-top: var(--borders);
@@ -52,7 +50,10 @@ footer {
 
 .color-teal {
   color: rgba(var(--teal), .86);
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  text-shadow: -1px -1px 0 rgba(var(--black), .52),
+                1px -1px 0 rgba(var(--black), .52),
+               -1px 1px 0 rgba(var(--black), .52), 
+                1px 1px 0 rgba(var(--black), .52);
 }
 .color-tan {
   color: rgba(var(--tan), .86);
@@ -79,13 +80,6 @@ nav {
   height: 64px;
 }
 
-.nav-logo > p {
-  color: red;
-}
-.nav-logo > p > span {
-  color: blue;
-}
-
 .nav-title {
   display: flex;
   align-items: center;
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 629a0a1..568aea6 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -7,6 +7,10 @@
 
   <!-- TODO: Meta tags for embedding -->
 
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/home.css">
 
@@ -34,28 +38,49 @@
     </nav>
   </header>
   <main>
-    <div class="container flex-adaptive">
-      <div class="flex-1">
-        <h1>Welcome to <span class="color-teal">Cyper's Blog</span>!</h1>
-        <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
+    <div>
+      <div class="container flex-adaptive">
+        <div class="flex-1 home-text">
+          <div>
+            <h1 class="color-teal">Cyper's Blog</h1>
+            <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
+          </div>
+        </div>
+        <div class="flex-1 home-grid-container">
+          <div class="home-grid">
+            <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
+            <div class="fill-background fill-black diamond"></div>
+            <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
+
+            <div class="fill fill-tan">
+              <div>
+                {% squareSvg 10 %}
+              </div>
+            </div>
+            <div class="fill-background fill-lightblue border-round border-round-2"></div>
+            <div class="fill-background fill-brown border-round-2 border-round-br"></div>
+
+            <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
+            <div class="fill fill-lightblue">
+              {% triangleSvg 12 %}
+            </div>
+            <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
+          </div>
+        </div>
       </div>
-      <div class="flex-1 home-grid-container">
-        <div class="home-grid">
-          <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
-          <div class="fill-background fill-black diamond"></div>
-          <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
-
-          <div class="fill fill-tan">
-            {% squareSvg 10 %}
+    </div>
+    <div>
+      <div class="container featured">
+        <h1>Featured Posts</h1>
+        <div>
+          <div>
+            <!-- image -->
           </div>
-          <div class="fill-background fill-lightblue border-round border-round-2"></div>
-          <div class="fill-background fill-brown border-round-2 border-round-br"></div>
-
-          <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
-          <div class="fill fill-lightblue">
-            {% triangleSvg 12 %}
+          <div>
+            <h2>Latest Post Title Goes Here</h2>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi dolorem velit facere ea? Fugit dolor libero dolorem laborum sapiente labore quidem eos, ratione deleniti. Hic sunt ea aspernatur iusto!</p>
+            <a href="#">Read more...</a>
           </div>
-          <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
         </div>
       </div>
     </div>