diff --git a/src/pages/welcome.css b/src/pages/welcome.css
index 18f7ed2..1060d4b 100644
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@@ -1,40 +1,3 @@
-#welcome {
-  text-align: center;
-  background-image: radial-gradient(
-      circle at center,
-      var(--bg-color),
-      transparent 16em
-    ),
-    radial-gradient(circle at center, var(--bg-color), transparent 8em);
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  padding: 16px;
-  cursor: default;
-}
-
-#welcome .hero-container {
-  padding-block: 60px;
-  height: 100vh;
-  height: 100svh;
-  max-height: 800px;
-  display: flex;
-  flex-direction: column;
-}
-
-#welcome h1 {
-  margin: 0;
-  padding: 0;
-  font-size: 5em;
-  line-height: 1;
-  letter-spacing: -1px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  mix-blend-mode: multiply;
-}
 @keyframes shine2 {
   0% {
     left: -100%;
@@ -46,92 +9,176 @@
     left: 100%;
   }
 }
-#welcome h1:before {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(
-    100deg,
-    rgba(255, 255, 255, 0) 30%,
-    rgba(255, 255, 255, 0.4),
-    rgba(255, 255, 255, 0) 70%
-  );
-  top: 0;
-  left: -100%;
-  pointer-events: none;
-  animation: shine2 5s ease-in-out 1s infinite;
-}
-@media (prefers-color-scheme: dark) {
-  #welcome {
+
+#welcome {
+  text-align: center;
+  background-image: radial-gradient(
+      circle at center,
+      var(--bg-color),
+      transparent 16em
+    ),
+    radial-gradient(circle at center, var(--bg-color), transparent 8em);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  cursor: default;
+
+  @media (prefers-color-scheme: dark) {
     background-image: none;
   }
-  #welcome h1 {
-    mix-blend-mode: normal;
-  }
-  #welcome h1:before {
-    content: none;
-  }
-}
-#welcome img {
-  vertical-align: top;
-  transition: transform 0.3s ease-out;
-}
-#welcome h1 img {
-  filter: drop-shadow(-1px -1px var(--bg-blur-color))
-    drop-shadow(0 -1px 1px #fff)
-    drop-shadow(0 16px 32px var(--drop-shadow-color));
-}
-@media (prefers-color-scheme: dark) {
-  #welcome h1 img {
-    filter: none;
-  }
-}
 
-#welcome h1:hover img {
-  transform: scale(1.05);
-}
-#welcome .desc {
-  font-size: 1.4em;
-  text-wrap: balance;
-  opacity: 0.7;
-}
-#welcome .hero-container > p {
-  margin-top: 0;
-}
+  .hero-container {
+    padding: 16px;
+    height: 100vh;
+    height: 100svh;
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
 
-#why-container .sections {
-  padding-inline: 16px;
-}
-#why-container .sections section {
-  text-align: start;
-  max-width: 480px;
-  background-color: var(--bg-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 17px 20px 40px var(--drop-shadow-color);
-  margin-bottom: 48px;
-}
-#why-container .sections section h4 {
-  margin: 0;
-  padding: 30px 30px 0;
-  font-size: 1.4em;
-  font-weight: 600;
-}
-#why-container .sections section p {
-  margin-inline: 30px;
-  margin-bottom: 30px;
-  opacity: 0.7;
-  text-wrap: balance;
-}
-#why-container .sections section img {
-  width: 100%;
-  height: auto;
-  border-bottom: 1px solid var(--outline-color);
-}
-@media (prefers-color-scheme: dark) {
-  #why-container .sections section img {
-    filter: invert(0.85) hue-rotate(180deg);
+    a {
+      color: inherit;
+
+      &:hover {
+        color: var(--link-text-color);
+      }
+    }
+  }
+
+  h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 5em;
+    line-height: 1;
+    letter-spacing: -1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    mix-blend-mode: multiply;
+
+    @media (prefers-color-scheme: dark) {
+      mix-blend-mode: normal;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(
+        100deg,
+        rgba(255, 255, 255, 0) 30%,
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0) 70%
+      );
+      top: 0;
+      left: -100%;
+      pointer-events: none;
+      animation: shine2 5s ease-in-out 1s infinite;
+
+      @media (prefers-color-scheme: dark) {
+        content: none;
+      }
+    }
+
+    img {
+      filter: drop-shadow(-1px -1px var(--bg-blur-color))
+        drop-shadow(0 -1px 1px #fff)
+        drop-shadow(0 16px 32px var(--drop-shadow-color));
+
+      @media (prefers-color-scheme: dark) {
+        filter: none;
+      }
+    }
+
+    &:hover img {
+      transform: scale(1.05);
+    }
+  }
+
+  img {
+    vertical-align: top;
+    transition: transform 0.3s ease-out;
+  }
+
+  .desc {
+    font-size: 1.4em;
+    text-wrap: balance;
+    opacity: 0.7;
+  }
+
+  .hero-container > p {
+    margin-top: 0;
+  }
+
+  #why-container {
+    padding: 0 16px;
+  }
+
+  .sections {
+    padding-inline: 16px;
+
+    section {
+      text-align: start;
+      max-width: 480px;
+      background-color: var(--bg-color);
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 17px 20px 40px var(--drop-shadow-color);
+      margin-bottom: 48px;
+
+      h4 {
+        margin: 0;
+        padding: 30px 30px 0;
+        font-size: 1.4em;
+        font-weight: 600;
+      }
+
+      p {
+        margin-inline: 30px;
+        margin-bottom: 30px;
+        opacity: 0.7;
+        text-wrap: balance;
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        border-bottom: 1px solid var(--outline-color);
+
+        @media (prefers-color-scheme: dark) {
+          filter: invert(0.85) hue-rotate(180deg);
+        }
+      }
+    }
+  }
+
+  @media (width > 40em) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100vh;
+    height: 100svh;
+
+    .hero-container {
+      height: auto;
+    }
+
+    #why-container {
+      padding: 32px;
+      overflow: auto;
+      mask-image: linear-gradient(to top, transparent 16px, black 64px);
+    }
+
+    footer {
+      grid-row: 2;
+      grid-column: 1 / span 2;
+    }
+  }
+
+  & ~ :is(#compose-button, #shortcuts) {
+    display: none;
   }
 }
diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx
index e0abe16..58882dc 100644
--- a/src/pages/welcome.jsx
+++ b/src/pages/welcome.jsx
@@ -98,31 +98,33 @@ function Welcome() {
           </section>
         </div>
       </div>
-      <hr />
-      <p>
-        <a href="https://github.com/cheeaun/phanpy" target="_blank">
-          Built
-        </a>{' '}
-        by{' '}
-        <a
-          href="https://mastodon.social/@cheeaun"
-          target="_blank"
-          onClick={(e) => {
-            e.preventDefault();
-            states.showAccount = 'cheeaun@mastodon.social';
-          }}
-        >
-          @cheeaun
-        </a>
-        .{' '}
-        <a
-          href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
-          target="_blank"
-        >
-          Privacy Policy
-        </a>
-        .
-      </p>
+      <footer>
+        <hr />
+        <p>
+          <a href="https://github.com/cheeaun/phanpy" target="_blank">
+            Built
+          </a>{' '}
+          by{' '}
+          <a
+            href="https://mastodon.social/@cheeaun"
+            target="_blank"
+            onClick={(e) => {
+              e.preventDefault();
+              states.showAccount = 'cheeaun@mastodon.social';
+            }}
+          >
+            @cheeaun
+          </a>
+          .{' '}
+          <a
+            href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
+            target="_blank"
+          >
+            Privacy Policy
+          </a>
+          .
+        </p>
+      </footer>
     </main>
   );
 }