diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index dd96894e..7a5edd00 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -62,6 +62,7 @@ const ICONS = {
   history: 'mingcute:history-line',
   share: 'mingcute:share-2-line',
   sparkles: 'mingcute:sparkles-line',
+  exit: 'mingcute:exit-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 54e14f34..8ff32ff8 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -12,7 +12,7 @@
   margin-top: 2em;
 }
 
-#settings-container :is(section, .section) {
+#settings-container section {
   background-color: var(--bg-color);
   margin: 0;
   padding: 8px 16px;
@@ -20,16 +20,16 @@
   border-bottom: var(--hairline-width) solid var(--outline-color);
   border-radius: 8px;
 }
-#settings-container :is(section, .section) > li:last-child {
+#settings-container section ul > li:last-child {
   border-bottom: none;
 }
 
-#settings-container ul {
+#settings-container section > ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-#settings-container ul:not([role='menu']) > li {
+#settings-container section > ul > li {
   padding: 8px 0 16px;
   display: flex;
   justify-content: space-between;
@@ -37,26 +37,26 @@
   flex-wrap: wrap;
   border-bottom: var(--hairline-width) solid var(--outline-color);
 }
-#settings-container ul:not([role='menu']) > li .current {
+#settings-container section > ul > li .current {
   margin-right: 8px;
   color: var(--green-color);
   opacity: 0.1;
 }
-#settings-container ul:not([role='menu']) > li .current.is-current {
+#settings-container section > ul > li .current.is-current {
   opacity: 1;
 }
-#settings-container ul:not([role='menu']) > li .current.is-current + .avatar {
+#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 ul:not([role='menu']) > li > div {
+#settings-container section > ul > li > div {
   flex-grow: 1;
   max-width: 100%;
 }
-#settings-container ul:not([role='menu']) > li > div.actions {
+#settings-container section > ul > li > div.actions {
   flex-basis: fit-content;
   margin-top: 8px;
 }
-#settings-container ul:not([role='menu']) > li > div:last-child {
+#settings-container section > ul > li > div:last-child {
   text-align: right;
 }
 #settings-container div,
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 716bbfd0..ce12ec71 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -119,7 +119,8 @@ function Settings({ onClose }) {
                             setCurrentDefault(i);
                           }}
                         >
-                          Set as default
+                          <Icon icon="check-circle" />
+                          <span>Set as default</span>
                         </MenuItem>
                       )}
                       <MenuItem
@@ -133,7 +134,8 @@ function Settings({ onClose }) {
                           location.href = '/';
                         }}
                       >
-                        Log out
+                        <Icon icon="exit" />
+                        <span>Log out</span>
                       </MenuItem>
                     </Menu>
                   </div>
@@ -156,88 +158,90 @@ function Settings({ onClose }) {
           </p>
         </section>
         <h2>Settings</h2>
-        <ul class="section">
-          <li>
-            <div>
-              <label>Appearance</label>
-            </div>
-            <div>
-              <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;
+        <section>
+          <ul>
+            <li>
+              <div>
+                <label>Appearance</label>
+              </div>
+              <div>
+                <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 === 'auto' ? 'dark light' : 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 === 'auto' ? 'dark light' : 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>
-            </div>
-          </li>
-          <li>
-            <label>
-              <input
-                type="checkbox"
-                checked={snapStates.settings.boostsCarousel}
-                onChange={(e) => {
-                  states.settings.boostsCarousel = e.target.checked;
-                }}
-              />{' '}
-              Boosts carousel (experimental)
-            </label>
-          </li>
-        </ul>
+                    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>
+              </div>
+            </li>
+            <li>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={snapStates.settings.boostsCarousel}
+                  onChange={(e) => {
+                    states.settings.boostsCarousel = e.target.checked;
+                  }}
+                />{' '}
+                Boosts carousel (experimental)
+              </label>
+            </li>
+          </ul>
+        </section>
         <h2>Hidden features</h2>
         <section>
           <div>