diff --git a/src/pages/accounts.css b/src/pages/accounts.css
new file mode 100644
index 00000000..0848f1be
--- /dev/null
+++ b/src/pages/accounts.css
@@ -0,0 +1,56 @@
+#accounts-container {
+  background-color: var(--bg-faded-color);
+}
+
+#accounts-container section {
+  background-color: var(--bg-color);
+  margin: 8px 0 0;
+  padding: 8px 16px;
+  border-top: var(--hairline-width) solid var(--outline-color);
+  border-bottom: var(--hairline-width) solid var(--outline-color);
+  border-radius: 8px;
+}
+#accounts-container section ul > li:last-child {
+  border-bottom: none;
+}
+
+#accounts-container section > ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#accounts-container section > ul > li {
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: var(--hairline-width) solid var(--outline-color);
+}
+
+#accounts-container section > ul > li .current {
+  margin-right: 8px;
+  color: var(--green-color);
+  opacity: 0.1;
+}
+#accounts-container section > ul > li .current.is-current {
+  opacity: 1;
+}
+#accounts-container section > ul > li .current.is-current + .avatar {
+  box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
+}
+#accounts-container section > ul > li .avatar + .name-text {
+  vertical-align: middle;
+}
+#accounts-container section > ul > li > div.actions {
+  flex-basis: fit-content;
+  margin-top: 8px;
+}
+
+#accounts-container .avatar {
+  margin-right: 8px;
+}
+
+#accounts-container .accounts-list li div {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
index 4873da23..b5762077 100644
--- a/src/pages/accounts.jsx
+++ b/src/pages/accounts.jsx
@@ -1,4 +1,4 @@
-import './settings.css';
+import './accounts.css';
 
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useReducer, useState } from 'preact/hooks';
@@ -22,7 +22,7 @@ function Accounts({ onClose }) {
   const [_, reload] = useReducer((x) => x + 1, 0);
 
   return (
-    <div id="settings-container" class="sheet" tabIndex="-1">
+    <div id="accounts-container" class="sheet" tabIndex="-1">
       {!!onClose && (
         <button type="button" class="sheet-close" onClick={onClose}>
           <Icon icon="x" />
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 9da34e8b..6c4428da 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -31,31 +31,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* flex-wrap: wrap; */
+  flex-wrap: wrap;
   border-bottom: var(--hairline-width) solid var(--outline-color);
 }
-#settings-container section > ul > li .current {
-  margin-right: 8px;
-  color: var(--green-color);
-  opacity: 0.1;
-}
-#settings-container section > ul > li .current.is-current {
-  opacity: 1;
-}
-#settings-container section > ul > li .current.is-current + .avatar {
-  box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
-}
-#settings-container section > ul > li .avatar + .name-text {
-  vertical-align: middle;
-}
-#settings-container section > ul > li > div {
-  display: flex;
-  align-items: center;
-}
-#settings-container section > ul > li > div.actions {
-  flex-basis: fit-content;
-  margin-top: 8px;
-}
 #settings-container section > ul > li > div:last-child {
   text-align: right;
 }
@@ -67,15 +45,20 @@
 #settings-container section > ul > li .sub-section p {
   margin-block: 0.5em;
 }
+#settings-container section > ul > li .sub-section ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#settings-container section > ul > li .sub-section ul li {
+  line-height: 1.6;
+}
 #settings-container section > ul > li .sub-section p:last-child {
   margin-block-end: 0;
 }
 #settings-container div {
   vertical-align: middle;
 }
-#settings-container .avatar {
-  margin-right: 8px;
-}
 
 #settings-container section select {
   padding: 4px;