diff --git a/themes/plain/layouts/partials/home.html b/themes/plain/layouts/partials/home.html
index b116419..40c0e76 100644
--- a/themes/plain/layouts/partials/home.html
+++ b/themes/plain/layouts/partials/home.html
@@ -1,11 +1,36 @@
+<script type="text/javascript">
+  let vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+    window.addEventListener('resize', () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    });
+</script>
+
 <style type="text/css">
     body {
         padding: 0;
         margin: 0;
     }
 
+    .title {
+        display: block;
+        font-weight: bold;
+
+        font-size: 40px;
+        margin-bottom: 8px;
+    }
+    
+    .subtitle {
+        display: block;
+
+        font-size: 16px;
+        margin-bottom: 38px;
+    }
+
     .home {
         height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -45,6 +70,17 @@
 
 
     @media (max-width: 700px) {
+        .title {
+            font-size: 28px;
+            margin-top: 2.4em;
+            margin-bottom: 12px;
+        }
+        
+        .subtitle {
+            font-size: 16px;
+            margin-bottom: 32px;
+        }
+
         .links {
             flex-direction: column;
             align-items: flex-start;
@@ -65,8 +101,8 @@
 
 <div class="home">
     <div class="card">
-        <h1>Morgan J.</h1>
-        <h3>Average Linux user</h3>
+        <div class="title">Morgan J.</div>
+        <div class="subtitle">Average Linux user</div>
         <div class="links">
             <li><a href="/about">/about</a></li>
             <li><a href="https://git.morgan.kr">/projects</a></li>