diff --git a/external/lang b/external/lang
index da8e3f8b..ede82261 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit da8e3f8bb3cc01867e2f3fb731e2a5a26cdab0f5
+Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 1966785f..14681495 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -187,12 +187,18 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                                         );
                                     }
                                 }}>
-                                {message.attachments && (
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
                                         <>
                                             <File size={16} />
-                                            <em>{message.attachments.length > 1 ?
-                                                "Sent multiple attachments" :
-                                                "Sent an attachment"}</em>
+                                            <em>
+                                                {message.attachments.length >
+                                                0 ? (
+                                                    <Text id="app.main.channel.misc.sent_multiple_files" />
+                                                ) : (
+                                                    <Text id="app.main.channel.misc.sent_file" />
+                                                )}
+                                            </em>
                                         </>
                                     )}
                                 <Markdown
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index 195a2283..b3fd8029 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -32,25 +32,12 @@ const Base = styled.div`
     user-select: none;
     align-items: center;
     background: var(--message-box);
-        
-        .username {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-weight: 600;
-        }
-    }
 
     > div {
         flex-grow: 1;
         margin-bottom: 0;
     }
 
-    .actions {
-        gap: 12px;
-        display: flex;
-    }
-
     .toggle {
         gap: 4px;
         display: flex;
@@ -59,6 +46,22 @@ const Base = styled.div`
         font-weight: 600;
     }
 
+    .username {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 600;
+    }
+
+    .message {
+        display: flex;
+    }
+
+    .actions {
+        gap: 12px;
+        display: flex;
+    }
+
     /*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
         .actions > svg {
             height: 25px;
@@ -109,14 +112,20 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                 <UserShort user={message.author} size={16} />
                             </div>
                             <div class="message">
-                                {message.attachments && (
-                                    <>
-                                        <File size={16} />
-                                        <em>{message.attachments.length > 1 ?
-                                            "Sent multiple attachments" :
-                                            "Sent an attachment"}</em>
-                                    </>
-                                )}
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
+                                        <>
+                                            <File size={16} />
+                                            <em>
+                                                {message.attachments!.length >
+                                                1 ? (
+                                                    <Text id="app.main.channel.misc.sent_multiple_files" />
+                                                ) : (
+                                                    <Text id="app.main.channel.misc.sent_file" />
+                                                )}
+                                            </em>
+                                        </>
+                                    )}
                                 {message.author_id === SYSTEM_USER_ID ? (
                                     <SystemMessage message={message} />
                                 ) : (
diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx
index cf30bbdb..2b8b4896 100644
--- a/src/components/ui/Overline.tsx
+++ b/src/components/ui/Overline.tsx
@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
     error?: string;
     block?: boolean;
     spaced?: boolean;
+    noMargin?: boolean;
     children?: Children;
     type?: "default" | "subtle" | "error";
 };
 
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
-    margin: 0.4em 0;
+
+    ${(props) =>
+        !props.noMargin &&
+        css`
+            margin: 0.4em 0;
+        `}
 
     ${(props) =>
         props.spaced &&
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index 39298ce8..de6c613b 100644
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/src/components/ui/fluent/CategoryButton.tsx
@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import { ChevronRight } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
 
 import { Children } from "../../../types/Preact";
 
@@ -14,13 +15,69 @@ const CategoryBase = styled.div`
     display: flex;
     align-items: center;
     flex-direction: row;
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        font-weight: 600;
+        font-size: 14px;
+
+        .description {
+            font-size: 11px;
+            font-weight: 400;
+
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    ${(props) =>
+        typeof props.onClick !== "undefined" &&
+        css`
+            transition: 0.1s ease background-color;
+
+            &:hover {
+                background: var(--tertiary-background);
+            }
+
+            a {
+                cursor: pointer;
+            }
+        `}
 `;
 
 interface Props {
     icon?: Children;
     children?: Children;
+    description?: Children;
+
+    onClick?: () => void;
+    action?: "chevron" | Children;
 }
 
-export default function CategoryButton({ icon, children }: Props) {
-    return <CategoryBase>{icon}</CategoryBase>;
+export default function CategoryButton({
+    icon,
+    children,
+    description,
+    onClick,
+    action,
+}: Props) {
+    return (
+        <CategoryBase onClick={onClick}>
+            {icon}
+            <div class="content">
+                {children}
+                <div className="description">{description}</div>
+            </div>
+            <div class="action">
+                {typeof action === "string" ? (
+                    <ChevronRight size={24} />
+                ) : (
+                    action
+                )}
+            </div>
+        </CategoryBase>
+    );
 }
diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx
index 3fc7e2e8..6312091d 100644
--- a/src/context/Locale.tsx
+++ b/src/context/Locale.tsx
@@ -80,9 +80,9 @@ export const Languages: { [key in Language]: LanguageEntry } = {
     fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
     hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
     hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
-    hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
+    hu: { display: "Magyar", emoji: "🇭🇺", i18n: "hu" },
     id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
-    it: { display: "italiano", emoji: "🇮🇹", i18n: "it" },
+    it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
     lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
     mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
     nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
diff --git a/src/lib/stopPropagation.ts b/src/lib/stopPropagation.ts
index 05043d25..0a2eec84 100644
--- a/src/lib/stopPropagation.ts
+++ b/src/lib/stopPropagation.ts
@@ -1,5 +1,5 @@
 export const stopPropagation = (
-    ev: JSX.TargetedMouseEvent<HTMLDivElement>,
+    ev: JSX.TargetedMouseEvent<HTMLElement>,
     _consume?: any,
 ) => {
     ev.preventDefault();
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 9e8a5580..a75c25cf 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -1,5 +1,10 @@
 import { At, Key, Block } from "@styled-icons/boxicons-regular";
-import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
+import {
+    Envelope,
+    HelpCircle,
+    Lock,
+    Trash,
+} from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
 import { Profile } from "revolt-api/types/Users";
@@ -8,6 +13,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { stopPropagation } from "../../../lib/stopPropagation";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import {
     ClientStatus,
@@ -18,7 +25,9 @@ import {
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
+import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
+import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 export const Account = observer(() => {
     const { openScreen, writeClipboard } = useIntermediate();
@@ -62,25 +71,29 @@ export const Account = observer(() => {
                     <div className={styles.userDetail}>
                         @{client.user!.username}
                         <div className={styles.userid}>
-                            <Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
+                            <Tooltip
+                                content={
+                                    <Text id="app.settings.pages.account.unique_id" />
+                                }>
                                 <HelpCircle size={16} />
                             </Tooltip>
                             <Tooltip content={<Text id="app.special.copy" />}>
-                                <a onClick={() => writeClipboard(client.user!._id)}>
+                                <a
+                                    onClick={() =>
+                                        writeClipboard(client.user!._id)
+                                    }>
                                     {client.user!._id}
                                 </a>
                             </Tooltip>
                         </div>
                     </div>
                 </div>
-                
-                <Button
-                    onClick={() => switchPage("profile")}
-                    contrast>
-                    Edit Profile
+
+                <Button onClick={() => switchPage("profile")} contrast>
+                    <Text id="app.settings.pages.profile.edit_profile" />
                 </Button>
             </div>
-            <div className={styles.details}>
+            <div>
                 {(
                     [
                         ["username", client.user!.username, <At size={24} />],
@@ -88,64 +101,64 @@ export const Account = observer(() => {
                         ["password", "•••••••••", <Key size={24} />],
                     ] as const
                 ).map(([field, value, icon]) => (
-                    <div>
-                        {icon}
-                        <div className={styles.detail}>
-                            <div className={styles.subtext}>
-                                <Text id={`login.${field}`} />
-                            </div>
-                            <div className={styles.entry}>
-                                {field === "email" ? (
-                                    revealEmail ? (
-                                        <>
-                                            {value}{" "}
-                                            <a
-                                                onClick={() =>
-                                                    setRevealEmail(false)
-                                                }>
-                                                <Text id="app.special.modals.actions.hide" />
-                                            </a>
-                                        </>
-                                    ) : (
-                                        <>
-                                            •••••••••••@{value.split("@").pop()}{" "}
-                                            <a
-                                                onClick={() =>
-                                                    setRevealEmail(true)
-                                                }>
-                                                <Text id="app.special.modals.actions.reveal" />
-                                            </a>
-                                        </>
-                                    )
+                    <CategoryButton
+                        icon={icon}
+                        description={
+                            field === "email" ? (
+                                revealEmail ? (
+                                    <>
+                                        {value}{" "}
+                                        <a
+                                            onClick={(ev) =>
+                                                stopPropagation(
+                                                    ev,
+                                                    setRevealEmail(false),
+                                                )
+                                            }>
+                                            <Text id="app.special.modals.actions.hide" />
+                                        </a>
+                                    </>
                                 ) : (
-                                    value
-                                )}
-                            </div>
-                        </div>
-                        <div>
-                            <Button
-                                onClick={() =>
-                                    openScreen({
-                                        id: "modify_account",
-                                        field,
-                                    })
-                                }
-                                plain>
-                                <Text id="app.settings.pages.account.change_field" />
-                            </Button>
-                        </div>
-                    </div>
+                                    <>
+                                        •••••••••••@{value.split("@").pop()}{" "}
+                                        <a
+                                            onClick={(ev) =>
+                                                stopPropagation(
+                                                    ev,
+                                                    setRevealEmail(true),
+                                                )
+                                            }>
+                                            <Text id="app.special.modals.actions.reveal" />
+                                        </a>
+                                    </>
+                                )
+                            ) : (
+                                value
+                            )
+                        }
+                        action="chevron"
+                        onClick={() =>
+                            openScreen({
+                                id: "modify_account",
+                                field,
+                            })
+                        }>
+                        <Overline type="subtle" noMargin>
+                            <Text id={`login.${field}`} />
+                        </Overline>
+                    </CategoryButton>
                 ))}
             </div>
             <h3>
                 <Text id="app.settings.pages.account.2fa.title" />
             </h3>
-            <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
-            <div className={styles.entrytest}>
-                <Lock size={24}/>
-                <div className={styles.content}>
-                    Currently not available
-                    <div className={styles.description}>
+            <h5>
+                <Text id="app.settings.pages.account.2fa.description" />
+            </h5>
+            <CategoryButton
+                icon={<Lock size={24} color="var(--error)" />}
+                description={
+                    <>
                         Two-factor auth is currently work-in-progress, see{" "}
                         <a
                             href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
@@ -154,54 +167,45 @@ export const Account = observer(() => {
                             tracking issue here
                         </a>
                         .
-                    </div>
-                </div>
-                <Button accent compact disabled>
-                    <Text id="app.settings.pages.account.2fa.add_auth" />
-                </Button>
-            </div>
+                    </>
+                }
+                action={
+                    <Button accent compact disabled>
+                        <Text id="app.settings.pages.account.2fa.add_auth" />
+                    </Button>
+                }>
+                Currently not available
+            </CategoryButton>
             <h3>
                 <Text id="app.settings.pages.account.manage.title" />
             </h3>
             <h5>
                 <Text id="app.settings.pages.account.manage.description" />
             </h5>
-            <div className={styles.entrytest}>
-                <Block size={24}/>
-                <div className={styles.content}>
-                    <Text id="app.settings.pages.account.manage.disable" />
-                    <div className={styles.description}>
-                        Disable your account. You won't be able to access it unless you log back in.
-                    </div>
-                </div>
-                <Button accent compact disabled>
-                    Unavailable
-                </Button>
-            </div>
-            <div className={styles.entrytest}>
-                <Trash size={24}/>
-                <div className={styles.content}>
-                    <Text id="app.settings.pages.account.manage.delete" />
-                    <div className={styles.description}>
-                        Delete your account, including all of your data.
-                    </div>
-                </div>
-                <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
-                    <Button error compact>
-                        <Text id="app.settings.pages.account.manage.delete" />
+            <CategoryButton
+                icon={<Block size={24} color="var(--error)" />}
+                description={
+                    "Disable your account. You won't be able to access it unless you log back in."
+                }
+                action={
+                    <Button accent compact disabled>
+                        <Text id="general.unavailable" />
                     </Button>
-                </a>
-            </div>
-            <div className={styles.buttons}>
-                {/* <Button contrast>
-                    <Text id="app.settings.pages.account.manage.disable" />
-                </Button> 
-                <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
-                    <Button error compact>
-                        <Text id="app.settings.pages.account.manage.delete" />
-                    </Button>
-                </a>*/}
-            </div>
+                }>
+                <Text id="app.settings.pages.account.manage.disable" />
+            </CategoryButton>
+            <CategoryButton
+                icon={<Trash size={24} color="var(--error)" />}
+                description={"Delete your account, including all of your data."}
+                action={
+                    <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
+                        <Button error compact>
+                            <Text id="app.settings.pages.account.manage.delete" />
+                        </Button>
+                    </a>
+                }>
+                <Text id="app.settings.pages.account.manage.delete" />
+            </CategoryButton>
             <Tip>
                 <span>
                     <Text id="app.settings.tips.account.a" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index de4486a8..22a254c5 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -78,42 +78,6 @@
             }
         }
 
-        .detail {
-            flex-grow: 1;
-            min-width: 0;
-
-            display: flex;
-            flex-direction: column;
-
-            .subtext {
-                display: inline;
-                font-size: 12px;
-                font-weight: 600;
-                text-transform: uppercase;
-                color: var(--secondary-foreground);
-
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-            }
-
-            .entry {
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                font-size: 15px;
-            }
-
-            a {
-                font-size: .875rem;
-                cursor: pointer;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
         p {
             margin: 0;
             font-size: 1rem;
@@ -126,7 +90,7 @@
         display: grid;
         place-items: center;
         grid-template-columns: minmax(auto, 100%);
-        
+
         > div {
             width: 100%;
             max-width: 560px;
@@ -152,40 +116,6 @@
         display: flex;
         gap: 12px;
     }
-
-    .entrytest {
-        gap: 12px;
-        /* padding: 4px; */
-        height: 54px;
-        padding: 8px 12px;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        background: var(--secondary-header);
-        border-radius: 6px;
-        margin-bottom: 10px;
-
-        > svg {
-            color: var(--error);
-        }
-
-        .content {
-            display: flex;
-            flex-grow: 1;
-            flex-direction: column;
-            font-weight: 600;
-            font-size: 14px;
-
-            .description {
-                font-size: 11px;
-                font-weight: 400;
-
-                a:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
 }
 
 @media only screen and (max-width: 800px) {
@@ -236,14 +166,13 @@
     }
 
     details {
-
         summary {
-            font-size: .8125rem;
+            font-size: 0.8125rem;
             font-weight: 700;
             text-transform: uppercase;
             color: var(--secondary-foreground);
             cursor: pointer;
-        }      
+        }
     }
 
     .emojiPack {
@@ -297,15 +226,12 @@
             text-transform: unset;
 
             a {
-                
                 opacity: 0.7;
                 color: var(--accent);
                 font-weight: 600;
                 &:hover {
                     text-decoration: underline;
                 }
-
-                
             }
 
             @media only screen and (max-width: 800px) {
@@ -331,7 +257,7 @@
             cursor: pointer;
             display: flex;
             align-items: center;
-            font-size: .875rem;
+            font-size: 0.875rem;
             min-width: 0;
             flex-grow: 1;
             padding: 8px;
@@ -352,7 +278,7 @@
         row-gap: 8px;
         display: grid;
         column-gap: 16px;
-        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         margin-bottom: 20px;
 
         .entry {
@@ -365,7 +291,7 @@
                 flex: 1;
                 display: block;
                 font-weight: 600;
-                font-size: .875rem;
+                font-size: 0.875rem;
                 margin-bottom: 8px;
                 text-transform: capitalize;
 
@@ -427,7 +353,7 @@
             display: flex;
             gap: 12px;
             flex-grow: 1;
-            
+
             svg {
                 margin-top: 1px;
             }
@@ -452,7 +378,6 @@
                     border-bottom: 2px solid var(--primary-background);
                 }
             }
-
         }
 
         &[data-deleting="true"] {
@@ -487,7 +412,7 @@
         .label {
             margin-bottom: 8px;
             color: var(--primary-text);
-            font-size: .75rem;
+            font-size: 0.75rem;
             font-weight: 600;
         }
 
@@ -507,7 +432,7 @@
             }
 
             .time {
-                font-size: .75rem;
+                font-size: 0.75rem;
                 color: var(--teriary-text);
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -524,7 +449,7 @@
             align-items: unset;
             flex-direction: column;
             gap: 20px;
-    
+
             > button {
                 width: 100%;
             }
@@ -542,7 +467,7 @@
         flex-direction: column;
         margin-bottom: 1em;
         gap: 8px;
-        
+
         .entry {
             display: flex;
             height: 45px;
@@ -601,4 +526,4 @@
 
 section {
     margin-bottom: 20px;
-}
\ No newline at end of file
+}