diff --git a/Dockerfile b/Dockerfile
index a6f3b68..29db91e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,7 +4,7 @@ FROM base as builder
 USER 1000:1000
 ADD --chown=1000:1000 . /home/node/nextts
 WORKDIR /home/node/nextts
-RUN wget -qO- https://get.pnpm.io/install.sh | ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
 ENV PATH=/home/node/.local/share/pnpm:$PATH
 RUN pnpm install && pnpm run build
 
@@ -29,7 +29,7 @@ ENV NODE_ENV production
 ENV HOME /home/node
 ENV HOSTNAME "0.0.0.0"
 
-RUN wget -qO- https://get.pnpm.io/install.sh | ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
 ENV PATH=/home/node/.local/share/pnpm:$PATH
 RUN pnpm install
 
diff --git a/app/page.tsx b/app/page.tsx
index 3dd56e9..9a07496 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,66 +4,73 @@ import { raleway, syne, questrial } from "@/app/fonts";
 
 export default function Home() {
   return (
-    <div className={`flex flex-col`}>
-      <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
-        <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
-          <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
-            SUYONO
-          </p>
-          <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
-            A Tech Archive
-          </p>
-        </div>
-        <div className={`h-64`}></div> {/* spacer */}
-        <div className={`h-64`}></div> {/* spacer */}
-      </div>
-      <div className={`flex flex-row justify-center my-8`}>
-        <div className={`border border-slate-100 flex flex-col`}>
-          <Link
-            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
-            className={`flex flex-row max-w-4xl items-center`}
-          >
-            <Image
-              src="/assets/pthumb.webp"
-              alt="post thumbnail"
-              width={454}
-              height={341}
-            />
-            <div className={`flex flex-col mx-10`}>
-              <p className={`${syne.className} text-2xl`}>
-                Nginx + SSL Client Certificate Verification: Manage Access to a
-                site
+      <div className={`flex flex-col`}>
+        <div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
+          <Image
+              src={`https://assets.suyono.me/placeholder.webp`}
+              alt={`blog cover`}
+              className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
+              width={1581}
+              height={759}
+          />
+          <div className={`flex flex-col-reverse col-start-1 row-start-1 w-screen`}>
+            <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10 z-10`}>
+              <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
+                SUYONO
               </p>
-              <p className={`${questrial.className} line-clamp-3 mt-4`}>
-                Access control is a fundamental part of security. Most entities
-                rely on the combination of username and password, sometimes with
-                additional multi-factor authentication to improve security. Some
-                entities also use the SSL client certificate verification to
-                manage access to specific resources. One of the use cases where
-                SSL client certificate verification fits perfectly is managing
-                access to internet-facing development or staging servers. In
-                this post, I&apos;ll share how to set up the certificates and
-                configure nginx to verify users based on their certificates.
+              <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
+                A Tech Archive
               </p>
             </div>
-          </Link>
+          </div>
+        </div>
+        <div className={`flex flex-row justify-center my-8`}>
+          <div className={`border border-slate-100 flex flex-col`}>
+            <Link
+                href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
+                className={`flex flex-row max-w-4xl items-center`}
+            >
+              <Image
+                  src="https://assets.suyono.me/pthumb.webp"
+                  alt="post thumbnail"
+                  width={454}
+                  height={341}
+              />
+              <div className={`flex flex-col mx-10`}>
+                <p className={`${syne.className} text-2xl`}>
+                  Nginx + SSL Client Certificate Verification: Manage Access to a
+                  site
+                </p>
+                <p className={`${questrial.className} line-clamp-3 mt-4`}>
+                  Access control is a fundamental part of security. Most entities
+                  rely on the combination of username and password, sometimes with
+                  additional multi-factor authentication to improve security. Some
+                  entities also use the SSL client certificate verification to
+                  manage access to specific resources. One of the use cases where
+                  SSL client certificate verification fits perfectly is managing
+                  access to internet-facing development or staging servers. In
+                  this post, I&apos;ll share how to set up the certificates and
+                  configure nginx to verify users based on their certificates.
+                </p>
+              </div>
+            </Link>
+          </div>
+        </div>
+        <div className={`flex flex-row bg-teal-50 justify-center`}>
+          <div className={`max-w-4xl py-28 px-10`}>
+            <p className={`text-3xl ${raleway.className}`}>Hi There</p>
+            <p className={`text-base ${raleway.className} my-4`}>
+              a new take on experience is the best teacher
+            </p>
+            <p className={`${raleway.className} text-sm`}>
+              I started this blog as an archive of my experiences and knowledge.
+              By writing them out, I hope it will help me unlearn and relearn the
+              various knowledge and skills I&apos;ve accumulated. I hope the
+              articles, source code examples, and server config examples I wrote
+              will help you somehow. Read on and enjoy!
+            </p>
+          </div>
         </div>
       </div>
-      <div className={`flex flex-row bg-teal-50 justify-center`}>
-        <div className={`max-w-4xl py-28 px-10`}>
-          <p className={`text-3xl ${raleway.className}`}>Hi There</p>
-          <p className={`text-base ${raleway.className} my-4`}>
-            a new take on experience is the best teacher
-          </p>
-          <p className={`${raleway.className} text-sm`}>
-            I started this blog as an archive of my experiences and knowledge.
-            By writing them out, I hope it will help me unlearn and relearn the
-            various knowledge and skills I&apos;ve accumulated. I hope the
-            articles, source code examples, and server config examples I wrote
-            will help you somehow. Read on and enjoy!
-          </p>
-        </div>
-      </div>
-    </div>
   );
 }
diff --git a/next.config.js b/next.config.js
index 21db591..7250895 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,15 @@ const nextConfig = {
     webpack: (config) => {
         config.externals = [...config.externals, "jsdom"];
         return config;
+    },
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "assets.suyono.me",
+                pathname: "/**"
+            },
+        ]
     }
 }
 
diff --git a/public/assets/placeholder.webp b/public/assets/placeholder.webp
deleted file mode 100644
index 9129dcb..0000000
Binary files a/public/assets/placeholder.webp and /dev/null differ
diff --git a/public/assets/pthumb.webp b/public/assets/pthumb.webp
deleted file mode 100644
index 8b5bd57..0000000
Binary files a/public/assets/pthumb.webp and /dev/null differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index adcbf29..7050b7e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,10 +12,12 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'blog-cover': "url('/assets/placeholder.webp')"
       },
       width: {
         '224': '56rem',
+      },
+      height: {
+        '192': '48rem',
       }
     },
   },