diff --git a/src/app.css b/src/app.css
index 6a396a1f..a6e9b582 100644
--- a/src/app.css
+++ b/src/app.css
@@ -583,22 +583,36 @@ button.carousel-dot[disabled].active {
 }
 .sheet {
   align-self: flex-end;
+  display: flex;
+  flex-direction: column;
   max-height: 90vh;
   max-height: 90dvh;
-  overflow: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   background-color: var(--bg-color);
   width: 100%;
   max-width: calc(40em - 50px - 16px);
   border-radius: 16px 16px 0 0;
-  padding: 16px;
-  padding-left: max(16px, env(safe-area-inset-left));
-  padding-right: max(16px, env(safe-area-inset-right));
-  padding-bottom: max(16px, env(safe-area-inset-bottom));
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.2s var(--timing-function);
   border: 1px solid var(--outline-color);
+}
+.sheet header {
+  padding: 16px 16px 8px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+}
+.sheet main {
+  overflow: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
+  padding: 16px 16px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
+  mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
+}
+.sheet header + main {
+  padding-top: 0;
 }
 
 /* TAG */
diff --git a/src/components/account.css b/src/components/account.css
index f49fb4ca..276cac63 100644
--- a/src/components/account.css
+++ b/src/components/account.css
@@ -12,7 +12,7 @@
   font-size: 95%;
   line-height: 1.4;
 }
-#account-container .note:not(:has(p)) {
+#account-container .note:not(:has(p)):not(:empty) {
   /* Some notes don't have <p> tags, so we need to add some padding */
   padding: 1em 0;
 }
diff --git a/src/components/account.jsx b/src/components/account.jsx
index 03603ed3..1b65c5b0 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -108,15 +108,17 @@ function Account({ account }) {
             <Avatar size="xxxl" />
             ███ ████████████
           </header>
-          <div class="note">
-            <p>████████ ███████</p>
-            <p>███████████████ ███████████████</p>
-          </div>
-          <p class="stats">
-            <span>██ Posts</span>
-            <span>██ Following</span>
-            <span>██ Followers</span>
-          </p>
+          <main>
+            <div class="note">
+              <p>████████ ███████</p>
+              <p>███████████████ ███████████████</p>
+            </div>
+            <p class="stats">
+              <span>██ Posts</span>
+              <span>██ Following</span>
+              <span>██ Followers</span>
+            </p>
+          </main>
         </>
       ) : (
         <>
@@ -124,96 +126,99 @@ function Account({ account }) {
             <Avatar url={avatar} size="xxxl" />
             <NameText account={info} showAcct external />
           </header>
-          <div
-            class="note"
-            dangerouslySetInnerHTML={{
-              __html: enhanceContent(note, { emojis }),
-            }}
-          />
-          {fields?.length > 0 && (
-            <div class="profile-metadata">
-              {fields.map(({ name, value, verifiedAt }) => (
-                <div
-                  class={`profile-field ${
-                    verifiedAt ? 'profile-verified' : ''
-                  }`}
-                  key={name}
-                >
-                  <b>
-                    {name}{' '}
-                    {!!verifiedAt && <Icon icon="check-circle" size="s" />}
-                  </b>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: value,
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-          <p class="stats">
-            <span>
-              <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
-            </span>
-            <span>
-              <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
-              Following
-            </span>
-            <span>
-              <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
-              Followers
-            </span>
-            {!!createdAt && (
+          <main>
+            <div
+              class="note"
+              dangerouslySetInnerHTML={{
+                __html: enhanceContent(note, { emojis }),
+              }}
+            />
+            {fields?.length > 0 && (
+              <div class="profile-metadata">
+                {fields.map(({ name, value, verifiedAt }) => (
+                  <div
+                    class={`profile-field ${
+                      verifiedAt ? 'profile-verified' : ''
+                    }`}
+                    key={name}
+                  >
+                    <b>
+                      {name}{' '}
+                      {!!verifiedAt && <Icon icon="check-circle" size="s" />}
+                    </b>
+                    <p
+                      dangerouslySetInnerHTML={{
+                        __html: value,
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+            <p class="stats">
               <span>
-                Joined:{' '}
-                <b>
-                  <time datetime={createdAt}>
-                    {Intl.DateTimeFormat('en', {
-                      year: 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                    }).format(new Date(createdAt))}
-                  </time>
-                </b>
+                <b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
+                Posts
               </span>
-            )}
-          </p>
-          <p class="actions">
-            {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
-            {relationshipUIState !== 'loading' && relationship && (
-              <button
-                type="button"
-                class={`${following ? 'light danger' : ''}`}
-                disabled={relationshipUIState === 'loading'}
-                onClick={() => {
-                  setRelationshipUIState('loading');
-                  (async () => {
-                    try {
-                      let newRelationship;
-                      if (following) {
-                        const yes = confirm(
-                          'Are you sure that you want to unfollow this account?',
-                        );
-                        if (yes) {
-                          newRelationship = await masto.accounts.unfollow(id);
+              <span>
+                <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
+                Following
+              </span>
+              <span>
+                <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
+                Followers
+              </span>
+              {!!createdAt && (
+                <span>
+                  Joined:{' '}
+                  <b>
+                    <time datetime={createdAt}>
+                      {Intl.DateTimeFormat('en', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      }).format(new Date(createdAt))}
+                    </time>
+                  </b>
+                </span>
+              )}
+            </p>
+            <p class="actions">
+              {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
+              {relationshipUIState !== 'loading' && relationship && (
+                <button
+                  type="button"
+                  class={`${following ? 'light danger' : ''}`}
+                  disabled={relationshipUIState === 'loading'}
+                  onClick={() => {
+                    setRelationshipUIState('loading');
+                    (async () => {
+                      try {
+                        let newRelationship;
+                        if (following) {
+                          const yes = confirm(
+                            'Are you sure that you want to unfollow this account?',
+                          );
+                          if (yes) {
+                            newRelationship = await masto.accounts.unfollow(id);
+                          }
+                        } else {
+                          newRelationship = await masto.accounts.follow(id);
                         }
-                      } else {
-                        newRelationship = await masto.accounts.follow(id);
+                        if (newRelationship) setRelationship(newRelationship);
+                        setRelationshipUIState('default');
+                      } catch (e) {
+                        alert(e);
+                        setRelationshipUIState('error');
                       }
-                      if (newRelationship) setRelationship(newRelationship);
-                      setRelationshipUIState('default');
-                    } catch (e) {
-                      alert(e);
-                      setRelationshipUIState('error');
-                    }
-                  })();
-                }}
-              >
-                {following ? 'Unfollow…' : 'Follow'}
-              </button>
-            )}
-          </p>
+                    })();
+                  }}
+                >
+                  {following ? 'Unfollow…' : 'Follow'}
+                </button>
+              )}
+            </p>
+          </main>
         </>
       )}
     </div>
diff --git a/src/components/status.css b/src/components/status.css
index 2d32a2e2..b414312b 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -712,6 +712,11 @@ a.card:hover {
   min-height: 50dvh;
 }
 
+#edit-history h2 {
+  margin: 0;
+  padding: 0;
+}
+
 #edit-history :is(ol, ol li) {
   list-style: none;
   margin: 0;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 22d40def..32705d49 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1134,46 +1134,50 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
 
   return (
     <div id="edit-history" class="sheet">
-      {/* <button type="button" class="close-button plain large" onClick={onClose}>
+      <header>
+        {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
-      <h2>Edit History</h2>
-      {uiState === 'error' && <p>Failed to load history</p>}
-      {uiState === 'loading' && (
-        <p>
-          <Loader abrupt /> Loading&hellip;
-        </p>
-      )}
-      {editHistory.length > 0 && (
-        <ol>
-          {editHistory.map((status) => {
-            const { createdAt } = status;
-            const createdAtDate = new Date(createdAt);
-            return (
-              <li key={createdAt} class="history-item">
-                <h3>
-                  <time>
-                    {Intl.DateTimeFormat('en', {
-                      // Show year if not current year
-                      year:
-                        createdAtDate.getFullYear() === currentYear
-                          ? undefined
-                          : 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                      weekday: 'short',
-                      hour: 'numeric',
-                      minute: '2-digit',
-                      second: '2-digit',
-                    }).format(createdAtDate)}
-                  </time>
-                </h3>
-                <Status status={status} size="s" withinContext readOnly />
-              </li>
-            );
-          })}
-        </ol>
-      )}
+        <h2>Edit History</h2>
+        {uiState === 'error' && <p>Failed to load history</p>}
+        {uiState === 'loading' && (
+          <p>
+            <Loader abrupt /> Loading&hellip;
+          </p>
+        )}
+      </header>
+      <main>
+        {editHistory.length > 0 && (
+          <ol>
+            {editHistory.map((status) => {
+              const { createdAt } = status;
+              const createdAtDate = new Date(createdAt);
+              return (
+                <li key={createdAt} class="history-item">
+                  <h3>
+                    <time>
+                      {Intl.DateTimeFormat('en', {
+                        // Show year if not current year
+                        year:
+                          createdAtDate.getFullYear() === currentYear
+                            ? undefined
+                            : 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        weekday: 'short',
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        second: '2-digit',
+                      }).format(createdAtDate)}
+                    </time>
+                  </h3>
+                  <Status status={status} size="s" withinContext readOnly />
+                </li>
+              );
+            })}
+          </ol>
+        )}
+      </main>
     </div>
   );
 }
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 90e5f4c7..acd1acca 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -24,186 +24,188 @@ function Settings({ onClose }) {
 
   return (
     <div id="settings-container" class="sheet">
-      {/* <button type="button" class="close-button plain large" onClick={onClose}>
+      <main>
+        {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
-      <h2>Accounts</h2>
-      <ul class="accounts-list">
-        {accounts.map((account, i) => {
-          const isCurrent = account.info.id === currentAccount;
-          const isDefault = i === (currentDefault || 0);
-          return (
-            <li>
-              <div>
-                {moreThanOneAccount && (
-                  <span class={`current ${isCurrent ? 'is-current' : ''}`}>
-                    <Icon icon="check-circle" alt="Current" />
-                  </span>
-                )}
-                <Avatar url={account.info.avatarStatic} size="xxl" />
-                <NameText account={account.info} showAcct />
-              </div>
-              <div class="actions">
-                {isDefault && moreThanOneAccount && (
-                  <>
-                    <span class="tag">Default</span>{' '}
-                  </>
-                )}
-                {!isCurrent && (
-                  <button
-                    type="button"
-                    class="light"
-                    onClick={() => {
-                      store.session.set('currentAccount', account.info.id);
-                      location.reload();
-                    }}
-                  >
-                    <Icon icon="transfer" /> Switch
-                  </button>
-                )}
+        <h2>Accounts</h2>
+        <ul class="accounts-list">
+          {accounts.map((account, i) => {
+            const isCurrent = account.info.id === currentAccount;
+            const isDefault = i === (currentDefault || 0);
+            return (
+              <li>
                 <div>
-                  {!isDefault && moreThanOneAccount && (
+                  {moreThanOneAccount && (
+                    <span class={`current ${isCurrent ? 'is-current' : ''}`}>
+                      <Icon icon="check-circle" alt="Current" />
+                    </span>
+                  )}
+                  <Avatar url={account.info.avatarStatic} size="xxl" />
+                  <NameText account={account.info} showAcct />
+                </div>
+                <div class="actions">
+                  {isDefault && moreThanOneAccount && (
+                    <>
+                      <span class="tag">Default</span>{' '}
+                    </>
+                  )}
+                  {!isCurrent && (
                     <button
                       type="button"
-                      class="plain small"
+                      class="light"
                       onClick={() => {
-                        // Move account to the top of the list
-                        accounts.splice(i, 1);
-                        accounts.unshift(account);
-                        store.local.setJSON('accounts', accounts);
-                        setCurrentDefault(i);
+                        store.session.set('currentAccount', account.info.id);
+                        location.reload();
                       }}
                     >
-                      Set as default
+                      <Icon icon="transfer" /> Switch
                     </button>
                   )}
-                  {isCurrent && (
-                    <>
-                      {' '}
+                  <div>
+                    {!isDefault && moreThanOneAccount && (
                       <button
                         type="button"
                         class="plain small"
                         onClick={() => {
-                          const yes = confirm(
-                            'Are you sure you want to log out?',
-                          );
-                          if (!yes) return;
+                          // Move account to the top of the list
                           accounts.splice(i, 1);
+                          accounts.unshift(account);
                           store.local.setJSON('accounts', accounts);
-                          location.reload();
+                          setCurrentDefault(i);
                         }}
                       >
-                        Log out
+                        Set as default
                       </button>
-                    </>
-                  )}
+                    )}
+                    {isCurrent && (
+                      <>
+                        {' '}
+                        <button
+                          type="button"
+                          class="plain small"
+                          onClick={() => {
+                            const yes = confirm(
+                              'Are you sure you want to log out?',
+                            );
+                            if (!yes) return;
+                            accounts.splice(i, 1);
+                            store.local.setJSON('accounts', accounts);
+                            location.reload();
+                          }}
+                        >
+                          Log out
+                        </button>
+                      </>
+                    )}
+                  </div>
                 </div>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-      {moreThanOneAccount && (
-        <p>
-          <small>
-            Note: <i>Default</i> account will always be used for first load.
-            Switched accounts will persist during the session.
-          </small>
+              </li>
+            );
+          })}
+        </ul>
+        {moreThanOneAccount && (
+          <p>
+            <small>
+              Note: <i>Default</i> account will always be used for first load.
+              Switched accounts will persist during the session.
+            </small>
+          </p>
+        )}
+        <p style={{ textAlign: 'end' }}>
+          <a href="/#/login" class="button" onClick={onClose}>
+            Add new account
+          </a>
         </p>
-      )}
-      <p style={{ textAlign: 'end' }}>
-        <a href="/#/login" class="button" onClick={onClose}>
-          Add new account
-        </a>
-      </p>
-      <h2>Theme</h2>
-      <form
-        ref={themeFormRef}
-        onInput={(e) => {
-          console.log(e);
-          e.preventDefault();
-          const formData = new FormData(themeFormRef.current);
-          const theme = formData.get('theme');
-          const html = document.documentElement;
+        <h2>Theme</h2>
+        <form
+          ref={themeFormRef}
+          onInput={(e) => {
+            console.log(e);
+            e.preventDefault();
+            const formData = new FormData(themeFormRef.current);
+            const theme = formData.get('theme');
+            const html = document.documentElement;
 
-          if (theme === 'auto') {
-            html.classList.remove('is-light', 'is-dark');
-          } else {
-            html.classList.toggle('is-light', theme === 'light');
-            html.classList.toggle('is-dark', theme === 'dark');
-          }
-          document
-            .querySelector('meta[name="color-scheme"]')
-            .setAttribute('content', theme);
+            if (theme === 'auto') {
+              html.classList.remove('is-light', 'is-dark');
+            } else {
+              html.classList.toggle('is-light', theme === 'light');
+              html.classList.toggle('is-dark', theme === 'dark');
+            }
+            document
+              .querySelector('meta[name="color-scheme"]')
+              .setAttribute('content', theme);
 
-          if (theme === 'auto') {
-            store.local.del('theme');
-          } else {
-            store.local.set('theme', theme);
-          }
-        }}
-      >
-        <div class="radio-group">
-          <label>
-            <input
-              type="radio"
-              name="theme"
-              value="light"
-              defaultChecked={currentTheme === 'light'}
-            />
-            <span>Light</span>
-          </label>
-          <label>
-            <input
-              type="radio"
-              name="theme"
-              value="dark"
-              defaultChecked={currentTheme === 'dark'}
-            />
-            <span>Dark</span>
-          </label>
-          <label>
-            <input
-              type="radio"
-              name="theme"
-              value="auto"
-              defaultChecked={
-                currentTheme !== 'light' && currentTheme !== 'dark'
-              }
-            />
-            <span>Auto</span>
-          </label>
-        </div>
-      </form>
-      <h2>About</h2>
-      <p>
-        <a href="https://github.com/cheeaun/phanpy" target="_blank">
-          Built
-        </a>{' '}
-        by{' '}
-        <a href="https://mastodon.social/@cheeaun" target="_blank">
-          @cheeaun
-        </a>
-        .
-      </p>
-      {__BUILD_TIME__ && (
+            if (theme === 'auto') {
+              store.local.del('theme');
+            } else {
+              store.local.set('theme', theme);
+            }
+          }}
+        >
+          <div class="radio-group">
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="light"
+                defaultChecked={currentTheme === 'light'}
+              />
+              <span>Light</span>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="dark"
+                defaultChecked={currentTheme === 'dark'}
+              />
+              <span>Dark</span>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="theme"
+                value="auto"
+                defaultChecked={
+                  currentTheme !== 'light' && currentTheme !== 'dark'
+                }
+              />
+              <span>Auto</span>
+            </label>
+          </div>
+        </form>
+        <h2>About</h2>
         <p>
-          Last build:{' '}
-          <relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
-          {__COMMIT_HASH__ && (
-            <>
-              (
-              <a
-                href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
-                target="_blank"
-              >
-                <code>{__COMMIT_HASH__}</code>
-              </a>
-              )
-            </>
-          )}
+          <a href="https://github.com/cheeaun/phanpy" target="_blank">
+            Built
+          </a>{' '}
+          by{' '}
+          <a href="https://mastodon.social/@cheeaun" target="_blank">
+            @cheeaun
+          </a>
+          .
         </p>
-      )}
+        {__BUILD_TIME__ && (
+          <p>
+            Last build:{' '}
+            <relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
+            {__COMMIT_HASH__ && (
+              <>
+                (
+                <a
+                  href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
+                  target="_blank"
+                >
+                  <code>{__COMMIT_HASH__}</code>
+                </a>
+                )
+              </>
+            )}
+          </p>
+        )}
+      </main>
     </div>
   );
 }