diff --git a/data/posts/2019-07-20-How-to-Set-up-Port-Forwarding-with-iptables.md b/data/posts/2019-07-20-How-to-Set-up-Port-Forwarding-with-iptables.md
index 88c6a0e3..1643281d 100644
--- a/data/posts/2019-07-20-How-to-Set-up-Port-Forwarding-with-iptables.md
+++ b/data/posts/2019-07-20-How-to-Set-up-Port-Forwarding-with-iptables.md
@@ -6,7 +6,7 @@ slug: port-forwarding-with-iptables
 tags:
   - networking
   - guide
-cover: "https://source.unsplash.com/40XgDxBfYXM/2000x600"
+cover: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8"
 ---
 
 If you have a server on a private network and need to access it from the outside (but can't simply give it an external IP) you can use port forwarding on an externally accessible server to get around it. Once set up it simply sends all incoming packets that meet certain criteria to a new IP. That way you can connect to a public server in order to communicate with the private server.
diff --git a/next.config.js b/next.config.js
index 53991af0..7c141b82 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,6 +7,9 @@ module.exports = withPrefresh({
   experimental: {
     jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
   },
+  images: {
+    domains: ["images.unsplash.com"],
+  },
   // preact config
   webpack(config, { dev, isServer }) {
     // Move Preact into the framework chunk instead of duplicating in routes:
diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
index a1949f48..817d384e 100644
--- a/pages/posts/[slug].tsx
+++ b/pages/posts/[slug].tsx
@@ -1,8 +1,9 @@
 import { getAllPosts, getPost, writePostsSpecToFS } from "lib";
+import type { GetStaticProps, GetStaticPaths } from "next";
 
 import React from "react";
-import type { GetStaticProps, GetStaticPaths } from "next";
-import { HomeButton, Tags, Body } from "components";
+import { HomeButton, Body } from "components";
+import Image from "next/image";
 
 type PostProps = {
   meta: PostMetadata;
@@ -10,23 +11,27 @@ type PostProps = {
 };
 
 const Post: React.FC<PostProps> = ({
-  meta: { title, cover, date, readTime, tags, description },
+  meta: { title, cover, date, readTime, description },
   content,
 }) => (
   <>
     <header>
-      <div className="relative overflow-hidden text-center text-white max-h-cover">
+      <div className="relative overflow-hidden text-center text-white max-h-cover min-h-cover">
         <div className="absolute inset-x-0 bottom-0 z-10 max-w-xl px-6 pb-16 mx-auto text-center md:max-w-3xl xl:max-w-4xl text-shadow-lg">
           <p className="text-sm uppercase">{readTime}</p>
           <h1>{title}</h1>
           <p>{date}</p>
         </div>
-        <img
-          className="filter-blur"
-          style={{ transform: "scale(1.03)" }}
-          src={cover}
-          alt="Post cover"
-        />
+        {cover && (
+          <Image
+            className="filter-blur"
+            src={cover}
+            alt="Post cover"
+            width={1600}
+            height={900}
+            layout="responsive"
+          />
+        )}
       </div>
       <HomeButton title={title} description={description} />
     </header>
diff --git a/tailwind.config.js b/tailwind.config.js
index e00188d6..ab1fafbf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -55,6 +55,11 @@ module.exports = {
         cover: "32rem",
         full: "100%",
       },
+      minHeight: {
+        0: "0",
+        cover: "14rem",
+        full: "100%",
+      },
     },
     variants: {
       extend: { margin: ["hover", "group-hover"] },