diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
index 7af463e..ae67d30 100644
--- a/src/components/BlogItem.astro
+++ b/src/components/BlogItem.astro
@@ -19,7 +19,7 @@ interface Props {
 const { title, description, date, href, header } = Astro.props;
 ---
 
-<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 20px;">
+<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 2vw;">
     <span class="cursor-pointer group block w-full">
         {
             href ? (
diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
index 06bafdb..400dde0 100644
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@@ -15,10 +15,10 @@ const blogs = (await getCollection("blogs"))
 ---
 
 <Terminal path="blogs/">
-    <TerminalBorder header="Shell" margin="0.5rem 0 20px">
+    <TerminalBorder header="Shell" margin="0.625vw 0 1.5625vw">
         <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
-    <div class="max-h-[18.5rem] overflow-y-auto">
+    <div class="max-h-[24vw] overflow-y-auto">
         {
             blogs.map((blog) => (
                 <>