diff --git a/public/css/style.css b/public/css/style.css
index 592ebf5..f46d965 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -314,6 +314,15 @@ footer ul li:last-child {
   text-align: center;
   margin: 1rem 0 0 0;
 }
+.footer-links ul li a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.footer-links ul li a ion-icon {
+  position: relative;
+  top: 0.05em;
+}
 .footer-links > * {
   flex-grow: 1;
 }
diff --git a/src/_data/metadata.js b/src/_data/metadata.js
index 84494de..43ff4ac 100644
--- a/src/_data/metadata.js
+++ b/src/_data/metadata.js
@@ -8,11 +8,28 @@ const formattedDate = date.toLocaleDateString('en-GB', {
 export default {
 	author: {
 		name: "Cyper",
-		url: "https://cyper.cc"
+    socials: [
+      { name: "Twitter", url: "https://twitter.com/Cyperita", icon: "logo-twitter" },
+      { name: "YouTube", url: "https://www.youtube.com/@Cyperita", icon: "logo-youtube" },
+      { name: "TikTok", url: "https://www.tiktok.com/@cyperita", icon: "logo-tiktok" },
+      { name: "Instagram", url: "https://www.instagram.com/cyperita/", icon: "logo-instagram" },
+      { name: "RSS", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
+    ],
+
+		sites: [
+      { name: "Main Site", url: "https://cy.cyper.cc", icon: "home-sharp" },
+      { name: "Gitea", url: "https://gitea.cyper.cc", icon: "code-slash-sharp" },
+    ],
+
+    // TODO: email / newsletter sign up?
+    consumables: [
+      { name: "RSS Feed", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
+    ]
 	},
   
 	title: "Cy-by-Side",
 	url: "https://cy.cyper.cc/",
+  rss: "https://cy.cyper.cc/rss.xml",
 	language: "en",
 	description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
   date: formattedDate,
diff --git a/src/_includes/components/footer.liquid b/src/_includes/components/footer.liquid
new file mode 100644
index 0000000..56c432c
--- /dev/null
+++ b/src/_includes/components/footer.liquid
@@ -0,0 +1,46 @@
+<div class="container">
+      <div>
+        <h3>Cyper Catalog</h3>
+        <div class="footer-links">
+          <div>
+            <h4>Websites</h4>
+            <ul>
+              {%- for site in metadata.author.sites -%}
+                <li>
+                  <a href="{{ site.url }}">
+                    <ion-icon name="{{ site.icon }}"></ion-icon>
+                    <span>{{ site.name }}</span>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+          <div>
+            <h4>Consumables</h4>
+            <ul>
+              {%- for item in metadata.author.consumables -%}
+                <li>
+                  <a href="{{ item.url }}">
+                    <ion-icon name="{{ item.icon }}"></ion-icon>
+                    <span>{{ item.name }}</span>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3>{{ metadata.title }}</h3>
+        <p>by {{ metadata.author.name }}</p>
+        <h4>Connect with me!</h4>
+        
+        <div class="footer-socials">
+          {%- for social in metadata.author.socials -%}
+            <a href="{{ social.url }}" target="_blank" rel="noopener noreferrer">
+              <ion-icon name="{{ social.icon }}"></ion-icon>
+            </a>
+          {%- endfor -%}
+        </div>
+      </div>
+    </div>
\ No newline at end of file
diff --git a/src/_includes/components/meta-tags.liquid b/src/_includes/components/meta-tags.liquid
new file mode 100644
index 0000000..87f9bb0
--- /dev/null
+++ b/src/_includes/components/meta-tags.liquid
@@ -0,0 +1,29 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="{{ eleventy.generator }}">
+
+<meta property="og:title" content="{{ metadata.title }}">
+<meta property="og:site_name" content="Cyper's Blog">
+<meta property="og:type" content="website">
+<meta property="og:description" content="{{ metadata.description }}">
+<meta property="og:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="350">
+<meta property="og:image:height" content="350">
+<meta property="og:url" content="{{ metadata.url }}">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ title | default: metadata.title }}">
+<meta name="twitter:description" content="{{ metadata.description }}">
+<meta name="twitter:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta name="twitter:site" content="@CyperWoof">
+<meta name="twitter:creator" content="@CyperWoof">
+<meta name="description" content="{{ metadata.description }}">
+<meta name="author" content="{{ metadata.author.name }}">
+<meta name="keywords" content="blog,tech,food,photos,photography,cyber,cybersecurity,cyper,cyperita,art,3d,2d">
+<meta name="theme-color" content="#A2DFCB">
+<meta name="name" content="{{ metadata.title }}">
+<meta itemprop="name" content="{{ metadata.title }}">
+<meta itemprop="description" content="{{ metadata.description }}">
+<meta itemprop="image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta itemprop="url" content="{{ metadata.url }}">
+<meta itemprop="thumbnailUrl" content="https://dummyimage.com/350x350/19171E/a2dfcb">
\ No newline at end of file
diff --git a/src/_includes/components/navbars.liquid b/src/_includes/components/navbars.liquid
new file mode 100644
index 0000000..6e37ce3
--- /dev/null
+++ b/src/_includes/components/navbars.liquid
@@ -0,0 +1,64 @@
+<nav class="container nav h-100" aria-label="Main nav">
+<div class="nav-logo">
+  <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+</div>
+<div class="nav-title">
+  <h1>{{ metadata.title }}</h1>
+</div>
+<div class="nav-hyperlinks">
+  <ul>
+    <li data-mobile>
+      <button id="mobile-nav-btn" class="hamburger" aria-label="Toggle menu">
+        <ion-icon name="menu-sharp"></ion-icon>
+      </button>
+    </li>
+    <li>
+      <a href="/">
+        <ion-icon name="home-sharp"></ion-icon>
+        <span>Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="/posts">
+        <ion-icon name="newspaper-sharp"></ion-icon>
+        <span>Posts</span>
+      </a>
+    </li>
+    <li>
+      <a href="/about">
+        <ion-icon name="help-circle-sharp"></ion-icon>
+        <span>About</span>
+      </a>
+    </li>
+  </ul>
+</div>
+</nav>
+<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
+<div class="mobile-nav-header">
+  <h1>{{ metadata.title }}</h1>
+  <button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
+    <ion-icon name="close-sharp"></ion-icon>
+  </button>
+</div>
+<div class="mobile-nav-links">
+  <ul>
+    <li>
+      <a href="/">
+        <ion-icon name="home-sharp"></ion-icon>
+        <span>Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="/posts">
+        <ion-icon name="newspaper-sharp"></ion-icon>
+        <span>Posts</span>
+      </a>
+    </li>
+    <li>
+      <a href="/about">
+        <ion-icon name="help-circle-sharp"></ion-icon>
+        <span>About</span>
+      </a>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/src/_includes/components/scripts.liquid b/src/_includes/components/scripts.liquid
new file mode 100644
index 0000000..3f98e63
--- /dev/null
+++ b/src/_includes/components/scripts.liquid
@@ -0,0 +1,2 @@
+<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
\ No newline at end of file
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
deleted file mode 100644
index 3eb4143..0000000
--- a/src/_includes/layout.html
+++ /dev/null
@@ -1,248 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="generator" content="{{ eleventy.generator }}">
-
-  <meta property="og:title" content="{{ metadata.title }}">
-  <meta property="og:site_name" content="Cyper's Blog">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="{{ metadata.description }}">
-  <meta property="og:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
-  <meta property="og:image:type" content="image/png">
-  <meta property="og:image:width" content="350">
-  <meta property="og:image:height" content="350">
-  <meta property="og:url" content="{{ metadata.url }}">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="{{ title | default: metadata.title }}">
-  <meta name="twitter:description" content="{{ metadata.description }}">
-  <meta name="twitter:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
-  <meta name="twitter:site" content="@CyperWoof">
-  <meta name="twitter:creator" content="@CyperWoof">
-  <meta name="description" content="{{ metadata.description }}">
-  <meta name="author" content="{{ metadata.author.name }}">
-  <meta name="keywords" content="blog,tech,food,photos,photography,cyber,cybersecurity,cyper,cyperita,art,3d,2d">
-  <meta name="theme-color" content="#A2DFCB">
-  <meta name="name" content="{{ metadata.title }}">
-  <meta itemprop="name" content="{{ metadata.title }}">
-  <meta itemprop="description" content="{{ metadata.description }}">
-  <meta itemprop="image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
-  <meta itemprop="url" content="{{ metadata.url }}">
-  <meta itemprop="thumbnailUrl" content="https://dummyimage.com/350x350/19171E/a2dfcb">
-  
-  <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
-
-  <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">
-
-  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
-</head>
-<body>
-  <header>
-    <nav class="container nav h-100" aria-label="Main nav">
-      <div class="nav-logo">
-        <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
-      </div>
-      <div class="nav-title">
-        <h1>{{ metadata.title }}</h1>
-      </div>
-      <div class="nav-hyperlinks">
-        <ul>
-          <li data-mobile>
-            <button id="mobile-nav-btn" class="hamburger" aria-label="Toggle menu">
-              <ion-icon name="menu-sharp"></ion-icon>
-            </button>
-          </li>
-          <li>
-            <a href="/">
-              <ion-icon name="home-sharp"></ion-icon>
-              <span>Home</span>
-            </a>
-          </li>
-          <li>
-            <a href="/posts">
-              <ion-icon name="newspaper-sharp"></ion-icon>
-              <span>Posts</span>
-            </a>
-          </li>
-          <li>
-            <a href="/about">
-              <ion-icon name="help-circle-sharp"></ion-icon>
-              <span>About</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-    <nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
-      <div class="mobile-nav-header">
-        <h1>{{ metadata.title }}</h1>
-        <button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
-          <ion-icon name="close-sharp"></ion-icon>
-        </button>
-      </div>
-      <div class="mobile-nav-links">
-        <ul>
-          <li>
-            <a href="/">
-              <ion-icon name="home-sharp"></ion-icon>
-              <span>Home</span>
-            </a>
-          </li>
-          <li>
-            <a href="/posts">
-              <ion-icon name="newspaper-sharp"></ion-icon>
-              <span>Posts</span>
-            </a>
-          </li>
-          <li>
-            <a href="/about">
-              <ion-icon name="help-circle-sharp"></ion-icon>
-              <span>About</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-  </header>
-  <main>
-    <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-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>
-    <div>
-      <div class="container featured">
-        <h1>Featured Posts</h1>
-        <div>
-          <div>
-            <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
-          </div>
-          <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>
-      </div>
-    </div>
-    <div>
-      <div class="container about">
-        <h1>The Skinny</h1>
-        <div>
-          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
-          <br>
-          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
-        </div>
-      </div>
-    </div>
-  </main>
-  <footer>
-    <div class="container">
-      <div>
-        <h3>Cyper Catalog</h3>
-        <div class="footer-links">
-          <div>
-            <h4>Websites</h4>
-            <ul>
-              <li><a href="#">Main Site</a></li>
-              <li><a href="#">Gitea</a></li>
-            </ul>
-          </div>
-          <div>
-            <h4>Consumables</h4>
-            <ul>
-              <li><a href="#">RSS Feed</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div>
-        <h3>{{ metadata.title }}</h3>
-        <p>by {{ metadata.author.name }}</p>
-        <h4>Connect with me!</h4>
-        
-        <div class="footer-socials">
-          <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-tiktok"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-rss"></ion-icon></a>
-        </div>
-      </div>
-    </div>
-  </footer>
-
-  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-  <script>
-    const mobileNav = document.getElementById('mobile-nav');
-    
-    function toggleMobileNav() {
-      if (mobileNav.classList.contains('show')) {
-        removeBackdrop()
-      } else {
-        const backdrop = document.createElement('div');
-        backdrop.className = 'mobile-nav-backdrop';
-        document.body.appendChild(backdrop);
-        backdrop.addEventListener('click', () => {
-          mobileNav.classList.remove('show');
-          removeBackdrop();
-        });
-        setTimeout(() => backdrop.classList.add('show'), 10);
-      }
-      mobileNav.classList.toggle('show');
-    }
-
-    function removeBackdrop() {
-      const backdrop = document.querySelector('.mobile-nav-backdrop');
-      if (backdrop) {
-        backdrop.classList.remove('show');
-        setTimeout(() => {
-          backdrop.remove();
-        }, 250);
-      }
-    }
-
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape') {
-        if (mobileNav.classList.contains('show')) {
-          mobileNav.classList.remove('show');
-          removeBackdrop();
-        }
-      }
-    });
-    document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
-    document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
new file mode 100644
index 0000000..a615927
--- /dev/null
+++ b/src/_includes/layout.liquid
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  
+  {% include "components/meta-tags.liquid" %}
+  
+  <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
+
+  <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">
+
+  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
+</head>
+<body>
+  <header>
+    {% include "components/navbars.liquid" %}
+  </header>
+  <main>
+    {{ content }}
+  </main>
+  <footer>
+    {% include "components/footer.liquid" %}
+  </footer>
+
+  {% include "components/scripts.liquid" %}
+  <script>
+    // TODO: move to script file
+    const mobileNav = document.getElementById('mobile-nav');
+    
+    function toggleMobileNav() {
+      if (mobileNav.classList.contains('show')) {
+        removeBackdrop()
+      } else {
+        const backdrop = document.createElement('div');
+        backdrop.className = 'mobile-nav-backdrop';
+        document.body.appendChild(backdrop);
+        backdrop.addEventListener('click', () => {
+          mobileNav.classList.remove('show');
+          removeBackdrop();
+        });
+        setTimeout(() => backdrop.classList.add('show'), 10);
+      }
+      mobileNav.classList.toggle('show');
+    }
+
+    function removeBackdrop() {
+      const backdrop = document.querySelector('.mobile-nav-backdrop');
+      if (backdrop) {
+        backdrop.classList.remove('show');
+        setTimeout(() => {
+          backdrop.remove();
+        }, 250);
+      }
+    }
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        if (mobileNav.classList.contains('show')) {
+          mobileNav.classList.remove('show');
+          removeBackdrop();
+        }
+      }
+    });
+    document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
+    document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/about.liquid b/src/about.liquid
new file mode 100644
index 0000000..cdbf59a
--- /dev/null
+++ b/src/about.liquid
@@ -0,0 +1,8 @@
+---
+layout: layout.liquid
+title: About Cyper
+---
+
+<div class="container">
+  <h1>About page!</h1>
+</div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 0a5d017..3313cf4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,8 +1,60 @@
 ---
-layout: layout.html
+layout: layout.liquid
 ---
 
-{% for post in collections.post %}
-<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-<p>{{ post.content }}</p>
-{% endfor %}
\ No newline at end of file
+<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-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>
+<div>
+  <div class="container featured">
+    <h1>Featured Posts</h1>
+    <div>
+      <div>
+        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
+      </div>
+      <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>
+  </div>
+</div>
+<div>
+  <div class="container about">
+    <h1>The Skinny</h1>
+    <div>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
+      <br>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/posts.html b/src/posts.html
deleted file mode 100644
index 7423ac5..0000000
--- a/src/posts.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: layout.html
-title: Hello World! Layout file change
----
-
-{% for post in collections.post %}
-<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-<p>{{ post.content }}</p>
-{% endfor %}
\ No newline at end of file
diff --git a/src/posts.liquid b/src/posts.liquid
new file mode 100644
index 0000000..b0642dd
--- /dev/null
+++ b/src/posts.liquid
@@ -0,0 +1,11 @@
+---
+layout: layout.liquid
+title: Posts
+---
+
+<div class="container">
+  {% for post in collections.post %}
+  <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+  <p>{{ post.content }}</p>
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/posts/posts.json b/src/posts/posts.json
index be37ec9..8f8a9e5 100644
--- a/src/posts/posts.json
+++ b/src/posts/posts.json
@@ -1,4 +1,4 @@
 {
-  "layout": "layout.html",
+  "layout": "layout.liquid",
   "tags": "post"
 }
\ No newline at end of file