src/pages/login/forms/Form.tsx

-import { Legal } from "./Legal";
-import { Text } from "preact-i18n";
+import { CheckCircle, Envelope } from "@styled-icons/boxicons-regular";
+import { useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
+
 import styles from "../Login.module.scss";
-import { useForm } from "react-hook-form";
-import { MailProvider } from "./MailProvider";
+import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
-import { CheckCircle, Mail } from "@styled-icons/feather";
-import { takeError } from "../../../context/revoltjs/util";
-import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../context/revoltjs/util";
 
-import FormField from "../FormField";
+import wideSVG from "../../../assets/wide.svg";
 import Button from "../../../components/ui/Button";
 import Overline from "../../../components/ui/Overline";
 import Preloader from "../../../components/ui/Preloader";
 
-import wideSVG from '../../../assets/wide.svg';
+import FormField from "../FormField";
+import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
+import { Legal } from "./Legal";
+import { MailProvider } from "./MailProvider";
 
 interface Props {
     page: "create" | "login" | "send_reset" | "reset" | "resend";
@@ -28,11 +30,17 @@ interface Props {
 }
 
 function getInviteCode() {
-    if (typeof window === 'undefined') return '';
+    if (typeof window === "undefined") return "";
 
     const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get('code');
-    return code ?? '';
+    const code = urlParams.get("code");
+    return code ?? "";
+}
+
+interface FormInputs {
+    email: string;
+    password: string;
+    invite: string;
 }
 
 export function Form({ page, callback }: Props) {
@@ -43,23 +51,19 @@ export function Form({ page, callback }: Props) {
     const [error, setGlobalError] = useState<string | undefined>(undefined);
     const [captcha, setCaptcha] = useState<CaptchaProps | undefined>(undefined);
 
-    const { handleSubmit, register, errors, setError } = useForm({
+    const { handleSubmit, register, errors, setError } = useForm<FormInputs>({
         defaultValues: {
-            email: '',
-            password: '',
-            invite: getInviteCode()
-        }
+            email: "",
+            password: "",
+            invite: getInviteCode(),
+        },
     });
 
-    async function onSubmit(data: {
-        email: string;
-        password: string;
-        invite: string;
-    }) {
+    async function onSubmit(data: FormInputs) {
         setGlobalError(undefined);
         setLoading(true);
 
-        function onError(err: any) {
+        function onError(err: unknown) {
             setLoading(false);
 
             const error = takeError(err);
@@ -81,7 +85,7 @@ export function Form({ page, callback }: Props) {
                 page !== "reset"
             ) {
                 setCaptcha({
-                    onSuccess: async captcha => {
+                    onSuccess: async (captcha) => {
                         setCaptcha(undefined);
                         try {
                             await callback({ ...data, captcha });
@@ -93,7 +97,7 @@ export function Form({ page, callback }: Props) {
                     onCancel: () => {
                         setCaptcha(undefined);
                         setLoading(false);
-                    }
+                    },
                 });
             } else {
                 await callback(data);
@@ -109,7 +113,7 @@ export function Form({ page, callback }: Props) {
             <div className={styles.success}>
                 {client.configuration?.features.email ? (
                     <>
-                        <Mail size={72} />
+                        <Envelope size={72} />
                         <h2>
                             <Text id="login.check_mail" />
                         </h2>
@@ -143,7 +147,13 @@ export function Form({ page, callback }: Props) {
     return (
         <div className={styles.form}>
             <img src={wideSVG} />
-            <form onSubmit={handleSubmit(onSubmit) as any}>
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={
+                    handleSubmit(
+                        onSubmit,
+                    ) as JSX.GenericEventHandler<HTMLFormElement>
+                }>
                 {page !== "reset" && (
                     <FormField
                         type="email"

src/pages/login/forms/FormCreate.tsx

-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useContext } from "preact/hooks";
+
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
 import { Form } from "./Form";
 
 export function FormCreate() {
@@ -8,7 +10,7 @@ export function FormCreate() {
     return (
         <Form
             page="create"
-            callback={async data => {
+            callback={async (data) => {
                 await client.register(import.meta.env.VITE_API_URL, data);
             }}
         />

src/pages/login/forms/FormLogin.tsx

-import { Form } from "./Form";
 import { detect } from "detect-browser";
-import { useContext } from "preact/hooks";
 import { useHistory } from "react-router-dom";
+
+import { useContext } from "preact/hooks";
+
 import { OperationsContext } from "../../../context/revoltjs/RevoltClient";
 
+import { Form } from "./Form";
+
 export function FormLogin() {
     const { login } = useContext(OperationsContext);
     const history = useHistory();
@@ -11,12 +14,16 @@ export function FormLogin() {
     return (
         <Form
             page="login"
-            callback={async data => {
+            callback={async (data) => {
                 const browser = detect();
                 let device_name;
                 if (browser) {
                     const { name, os } = browser;
-                    device_name = `${name} on ${os}`;
+                    if (window.isNative) {
+                        device_name = `Revolt Desktop on ${os}`;
+                    } else {
+                        device_name = `${name} on ${os}`;
+                    }
                 } else {
                     device_name = "Unknown Device";
                 }

src/pages/login/forms/FormResend.tsx

-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useContext } from "preact/hooks";
+
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
 import { Form } from "./Form";
 
 export function FormResend() {
@@ -8,7 +10,7 @@ export function FormResend() {
     return (
         <Form
             page="resend"
-            callback={async data => {
+            callback={async (data) => {
                 await client.req("POST", "/auth/resend", data);
             }}
         />

src/pages/login/forms/FormReset.tsx

-import { Form } from "./Form";
-import { useContext } from "preact/hooks";
 import { useHistory, useParams } from "react-router-dom";
+
+import { useContext } from "preact/hooks";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import { Form } from "./Form";
+
 export function FormSendReset() {
     const client = useContext(AppContext);
 
     return (
         <Form
             page="send_reset"
-            callback={async data => {
+            callback={async (data) => {
                 await client.req("POST", "/auth/send_reset", data);
             }}
         />
@@ -24,10 +27,10 @@ export function FormReset() {
     return (
         <Form
             page="reset"
-            callback={async data => {
-                await client.req("POST", "/auth/reset" as any, {
+            callback={async (data) => {
+                await client.req("POST", "/auth/reset", {
                     token,
-                    ...(data as any)
+                    ...data,
                 });
                 history.push("/login");
             }}

src/pages/login/forms/Legal.tsx

@@ -7,21 +7,21 @@ export function Legal() {
             <a
                 href="https://revolt.chat/about"
                 target="_blank"
-            >
+                rel="noreferrer">
                 <Text id="general.about" />
             </a>
             &middot;
             <a
                 href="https://revolt.chat/terms"
                 target="_blank"
-            >
+                rel="noreferrer">
                 <Text id="general.tos" />
             </a>
             &middot;
             <a
                 href="https://revolt.chat/privacy"
                 target="_blank"
-            >
+                rel="noreferrer">
                 <Text id="general.privacy" />
             </a>
         </span>

src/pages/login/forms/MailProvider.tsx

-import { Text } from "preact-i18n";
 import styles from "../Login.module.scss";
+import { Text } from "preact-i18n";
+
 import Button from "../../../components/ui/Button";
 
 interface Props {
@@ -42,7 +43,7 @@ export function MailProvider({ email }: Props) {
 
     return (
         <div className={styles.mailProvider}>
-            <a href={provider[1]} target="_blank">
+            <a href={provider[1]} target="_blank" rel="noreferrer">
                 <Button>
                     <Text
                         id="login.open_mail_provider"

src/pages/settings/ChannelSettings.tsx

+import { ListCheck, ListUl } from "@styled-icons/boxicons-regular";
+import { Route, Switch, useHistory, useParams } from "react-router-dom";
+
 import { Text } from "preact-i18n";
-import { List } from "@styled-icons/feather";
-import Category from "../../components/ui/Category";
-import { GenericSettings } from "./GenericSettings";
+
+import { useClient } from "../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../context/revoltjs/util";
-import { Route, useHistory, useParams } from "react-router-dom";
-import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
 
-import { Overview } from "./channel/Overview";
+import Category from "../../components/ui/Category";
+
+import { GenericSettings } from "./GenericSettings";
+import Overview from "./channel/Overview";
+import Permissions from "./channel/Permissions";
 
 export default function ChannelSettings() {
-    const { channel: cid } = useParams<{ channel: string; }>();
-    const ctx = useForceUpdate();
-    const channel = useChannel(cid, ctx);
-    if (!channel) return null;
-    if (channel.channel_type === 'SavedMessages' || channel.channel_type === 'DirectMessage') return null;
+    const { channel: cid } = useParams<{ channel: string }>();
 
+    const client = useClient();
     const history = useHistory();
+    const channel = client.channels.get(cid);
+
+    if (!channel) return null;
+    if (
+        channel.channel_type === "SavedMessages" ||
+        channel.channel_type === "DirectMessage"
+    )
+        return null;
+
     function switchPage(to?: string) {
+        let base_url;
+        switch (channel?.channel_type) {
+            case "TextChannel":
+            case "VoiceChannel":
+                base_url = `/server/${channel.server_id}/channel/${cid}/settings`;
+                break;
+            default:
+                base_url = `/channel/${cid}/settings`;
+        }
+
         if (to) {
-            history.replace(`/channel/${cid}/settings/${to}`);
+            history.replace(`${base_url}/${to}`);
         } else {
-            history.replace(`/channel/${cid}/settings`);
+            history.replace(base_url);
         }
     }
 
@@ -28,19 +48,44 @@ export default function ChannelSettings() {
         <GenericSettings
             pages={[
                 {
-                    category: <Category variant="uniform" text={getChannelName(ctx.client, channel, true)} />,
-                    id: 'overview',
-                    icon: <List size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.channel_pages.overview.title" />
-                }
-            ]}
-            children={[
-                <Route path="/"><Overview channel={channel} /></Route>
+                    category: (
+                        <Category
+                            variant="uniform"
+                            text={getChannelName(channel, true)}
+                        />
+                    ),
+                    id: "overview",
+                    icon: <ListUl size={20} />,
+                    title: (
+                        <Text id="app.settings.channel_pages.overview.title" />
+                    ),
+                },
+                {
+                    id: "permissions",
+                    icon: <ListCheck size={20} />,
+                    title: (
+                        <Text id="app.settings.channel_pages.permissions.title" />
+                    ),
+                },
             ]}
+            children={
+                <Switch>
+                    <Route path="/server/:server/channel/:channel/settings/permissions">
+                        <Permissions channel={channel} />
+                    </Route>
+                    <Route path="/channel/:channel/settings/permissions">
+                        <Permissions channel={channel} />
+                    </Route>
+
+                    <Route>
+                        <Overview channel={channel} />
+                    </Route>
+                </Switch>
+            }
             category="channel_pages"
             switchPage={switchPage}
             defaultPage="overview"
             showExitButton
         />
-    )
+    );
 }

src/pages/settings/GenericSettings.tsx

-import { Text } from "preact-i18n";
-import { useEffect } from "preact/hooks";
+import { ArrowBack, X } from "@styled-icons/boxicons-regular";
+import { Helmet } from "react-helmet";
+import { useHistory, useParams } from "react-router-dom";
+
 import styles from "./Settings.module.scss";
-import { Children } from "../../types/Preact";
-import Header from '../../components/ui/Header';
-import Category from '../../components/ui/Category';
+import classNames from "classnames";
+import { Text } from "preact-i18n";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+import { ThemeContext } from "../../context/Theme";
+
+import Category from "../../components/ui/Category";
+import Header from "../../components/ui/Header";
 import IconButton from "../../components/ui/IconButton";
 import LineDivider from "../../components/ui/LineDivider";
-import { ArrowLeft, X, XCircle } from "@styled-icons/feather";
-import { Switch, useHistory, useParams } from "react-router-dom";
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
 import ButtonItem from "../../components/navigation/items/ButtonItem";
+import { Children } from "../../types/Preact";
 
 interface Props {
     pages: {
-        category?: Children,
-        divider?: boolean,
-        id: string,
-        icon: Children
-        title: Children
-    }[]
-    custom?: Children
-    children: Children
-    defaultPage: string
-    showExitButton?: boolean
-    switchPage: (to?: string) => void
-    category: 'pages' | 'channel_pages' | 'server_pages'
+        category?: Children;
+        divider?: boolean;
+        id: string;
+        icon: Children;
+        title: Children;
+        hidden?: boolean;
+        hideTitle?: boolean;
+    }[];
+    custom?: Children;
+    children: Children;
+    defaultPage: string;
+    showExitButton?: boolean;
+    switchPage: (to?: string) => void;
+    category: "pages" | "channel_pages" | "server_pages";
 }
 
-export function GenericSettings({ pages, switchPage, category, custom, children, defaultPage, showExitButton }: Props) {
+export function GenericSettings({
+    pages,
+    switchPage,
+    category,
+    custom,
+    children,
+    defaultPage,
+    showExitButton,
+}: Props) {
     const history = useHistory();
-    const { page } = useParams<{ page: string; }>();
+    const theme = useContext(ThemeContext);
+    const { page } = useParams<{ page: string }>();
+
+    const [closing, setClosing] = useState(false);
+    const exitSettings = useCallback(() => {
+        if (history.length > 1) {
+            setClosing(true);
 
-    function exitSettings() {
-        if (history.length > 0) {
-            history.goBack();
+            setTimeout(() => {
+                history.goBack();
+            }, 100);
         } else {
-            history.push('/');
+            history.push("/");
         }
-    }
+    }, [history]);
 
     useEffect(() => {
         function keyDown(e: KeyboardEvent) {
@@ -48,24 +72,46 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
 
         document.body.addEventListener("keydown", keyDown);
         return () => document.body.removeEventListener("keydown", keyDown);
-    }, []);
+    }, [exitSettings]);
 
     return (
-        <div className={styles.settings} data-mobile={isTouchscreenDevice}>
+        <div
+            className={classNames(styles.settings, {
+                [styles.closing]: closing,
+                [styles.native]: window.isNative,
+            })}
+            data-mobile={isTouchscreenDevice}>
+            <Helmet>
+                <meta
+                    name="theme-color"
+                    content={
+                        isTouchscreenDevice
+                            ? theme["background"]
+                            : theme["secondary-background"]
+                    }
+                />
+            </Helmet>
             {isTouchscreenDevice && (
                 <Header placement="primary">
                     {typeof page === "undefined" ? (
                         <>
-                            { showExitButton &&
+                            {showExitButton && (
                                 <IconButton onClick={exitSettings}>
-                                    <X size={24} />
-                                </IconButton> }
+                                    <X
+                                        size={27}
+                                        style={{ marginInlineEnd: "8px" }}
+                                    />
+                                </IconButton>
+                            )}
                             <Text id="app.settings.title" />
                         </>
                     ) : (
                         <>
                             <IconButton onClick={() => switchPage()}>
-                                <ArrowLeft size={24} />
+                                <ArrowBack
+                                    size={24}
+                                    style={{ marginInlineEnd: "10px" }}
+                                />
                             </IconButton>
                             <Text
                                 id={`app.settings.${category}.${page}.title`}
@@ -76,43 +122,65 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
             )}
             {(!isTouchscreenDevice || typeof page === "undefined") && (
                 <div className={styles.sidebar}>
-                    <div className={styles.container}>
-                        {
-                            pages.map((entry, i) =>
-                                <>
-                                    { entry.category && <Category variant="uniform" text={entry.category} /> }
-                                    <ButtonItem
-                                        active={page === entry.id || (i === 0 && !isTouchscreenDevice && typeof page === "undefined")}
-                                        onClick={() => switchPage(entry.id)}
-                                        compact
-                                    >{entry.icon} {entry.title}</ButtonItem>
-                                    { entry.divider && <LineDivider /> }
-                                </>
-                            )
-                        }
-                        { custom }
+                    <div className={styles.scrollbox}>
+                        <div className={styles.container}>
+                            {pages.map((entry, i) =>
+                                entry.hidden ? undefined : (
+                                    <>
+                                        {entry.category && (
+                                            <Category
+                                                variant="uniform"
+                                                text={entry.category}
+                                            />
+                                        )}
+                                        <ButtonItem
+                                            active={
+                                                page === entry.id ||
+                                                (i === 0 &&
+                                                    !isTouchscreenDevice &&
+                                                    typeof page === "undefined")
+                                            }
+                                            onClick={() => switchPage(entry.id)}
+                                            compact>
+                                            {entry.icon} {entry.title}
+                                        </ButtonItem>
+                                        {entry.divider && <LineDivider />}
+                                    </>
+                                ),
+                            )}
+                            {custom}
+                        </div>
                     </div>
                 </div>
             )}
             {(!isTouchscreenDevice || typeof page === "string") && (
                 <div className={styles.content}>
-                    {!isTouchscreenDevice && (
-                        <h1>
-                            <Text
-                                id={`app.settings.${category}.${page ?? defaultPage}.title`}
-                            />
-                        </h1>
-                    )}
-                    <Switch>
-                        { children }
-                    </Switch>
-                </div>
-            )}
-            {!isTouchscreenDevice && (
-                <div className={styles.action}>
-                    <IconButton onClick={exitSettings}>
-                        <XCircle size={48} />
-                    </IconButton>
+                    <div className={styles.scrollbox}>
+                        <div className={styles.contentcontainer}>
+                            {!isTouchscreenDevice &&
+                                !pages.find(
+                                    (x) => x.id === page && x.hideTitle,
+                                ) && (
+                                    <h1>
+                                        <Text
+                                            id={`app.settings.${category}.${
+                                                page ?? defaultPage
+                                            }.title`}
+                                        />
+                                    </h1>
+                                )}
+                            {children}
+                        </div>
+                        {!isTouchscreenDevice && (
+                            <div className={styles.action}>
+                                <div
+                                    onClick={exitSettings}
+                                    className={styles.closeButton}>
+                                    <X size={28} />
+                                </div>
+                            </div>
+                        )}
+                    </div>
                 </div>
             )}
         </div>

src/pages/settings/ServerSettings.tsx

+import { ListUl, ListCheck, ListMinus } from "@styled-icons/boxicons-regular";
+import { XSquare, Share, Group } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Route, Switch, useHistory, useParams } from "react-router-dom";
+
 import { Text } from "preact-i18n";
-import Category from "../../components/ui/Category";
-import { GenericSettings } from "./GenericSettings";
-import { useServer } from "../../context/revoltjs/hooks";
-import { Route, useHistory, useParams } from "react-router-dom";
-import { List, Share, Users, XSquare } from "@styled-icons/feather";
+
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
+import { useClient } from "../../context/revoltjs/RevoltClient";
 
-import { Overview } from "./server/Overview";
-import { Members } from "./server/Members";
-import { Invites } from "./server/Invites";
+import Category from "../../components/ui/Category";
+
+import { GenericSettings } from "./GenericSettings";
 import { Bans } from "./server/Bans";
+import { Categories } from "./server/Categories";
+import { Invites } from "./server/Invites";
+import { Members } from "./server/Members";
+import { Overview } from "./server/Overview";
+import { Roles } from "./server/Roles";
 
-export default function ServerSettings() {
-    const { server: sid } = useParams<{ server: string; }>();
-    const server = useServer(sid);
+export default observer(() => {
+    const { server: sid } = useParams<{ server: string }>();
+    const client = useClient();
+    const server = client.servers.get(sid);
     if (!server) return null;
 
     const history = useHistory();
@@ -30,36 +38,79 @@ export default function ServerSettings() {
             pages={[
                 {
                     category: <Category variant="uniform" text={server.name} />,
-                    id: 'overview',
-                    icon: <List size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.channel_pages.overview.title" />
+                    id: "overview",
+                    icon: <ListUl size={20} />,
+                    title: (
+                        <Text id="app.settings.server_pages.overview.title" />
+                    ),
                 },
                 {
-                    id: 'members',
-                    icon: <Users size={20} strokeWidth={2} />,
-                    title: "Members"
+                    id: "categories",
+                    icon: <ListMinus size={20} />,
+                    title: (
+                        <Text id="app.settings.server_pages.categories.title" />
+                    ),
                 },
                 {
-                    id: 'invites',
-                    icon: <Share size={20} strokeWidth={2} />,
-                    title: "Invites"
+                    id: "members",
+                    icon: <Group size={20} />,
+                    title: (
+                        <Text id="app.settings.server_pages.members.title" />
+                    ),
                 },
                 {
-                    id: 'bans',
-                    icon: <XSquare size={20} strokeWidth={2} />,
-                    title: "Bans"
-                }
-            ]}
-            children={[
-                <Route path="/server/:server/settings/members"><RequiresOnline><Members server={server} /></RequiresOnline></Route>,
-                <Route path="/server/:server/settings/invites"><RequiresOnline><Invites server={server} /></RequiresOnline></Route>,
-                <Route path="/server/:server/settings/bans"><RequiresOnline><Bans server={server} /></RequiresOnline></Route>,
-                <Route path="/"><Overview server={server} /></Route>
+                    id: "invites",
+                    icon: <Share size={20} />,
+                    title: (
+                        <Text id="app.settings.server_pages.invites.title" />
+                    ),
+                },
+                {
+                    id: "bans",
+                    icon: <XSquare size={20} />,
+                    title: <Text id="app.settings.server_pages.bans.title" />,
+                },
+                {
+                    id: "roles",
+                    icon: <ListCheck size={20} />,
+                    title: <Text id="app.settings.server_pages.roles.title" />,
+                    hideTitle: true,
+                },
             ]}
+            children={
+                <Switch>
+                    <Route path="/server/:server/settings/categories">
+                        <Categories server={server} />
+                    </Route>
+                    <Route path="/server/:server/settings/members">
+                        <RequiresOnline>
+                            <Members server={server} />
+                        </RequiresOnline>
+                    </Route>
+                    <Route path="/server/:server/settings/invites">
+                        <RequiresOnline>
+                            <Invites server={server} />
+                        </RequiresOnline>
+                    </Route>
+                    <Route path="/server/:server/settings/bans">
+                        <RequiresOnline>
+                            <Bans server={server} />
+                        </RequiresOnline>
+                    </Route>
+                    <Route path="/server/:server/settings/roles">
+                        <RequiresOnline>
+                            <Roles server={server} />
+                        </RequiresOnline>
+                    </Route>
+                    <Route>
+                        <Overview server={server} />
+                    </Route>
+                </Switch>
+            }
             category="server_pages"
             switchPage={switchPage}
             defaultPage="overview"
             showExitButton
         />
-    )
-}
+    );
+});

src/pages/settings/Settings.module.scss

+/* Settings animations */
 @keyframes open {
-    0% {transform: scale(1.2);};
-    100% {transform: scale(1);};
+    0% {
+        transform: scale(1.2);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
-@keyframes opacity {
-    0% {opacity: 0;};
-    20% {opacity: .5;}
-    50% {opacity: 1;}
+@keyframes close {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.2);
+        opacity: 0;
+    }
 }
 
-@keyframes close {
-    0% {transform: scale(1); opacity: 1;};
-    100% {transform: scale(1.2); opacity: 0;};
+@keyframes opacity {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
 }
 
+/* Settings CSS */
 .settings[data-mobile="true"] {
     flex-direction: column;
     background: var(--primary-header);
 
-    .sidebar, .content {
+    .sidebar,
+    .content {
         background: var(--primary-background);
     }
 
+    .scrollbox {
+        &::-webkit-scrollbar-thumb {
+            border-top: none;
+        }
+    }
+
+    /* Sidebar */
     .sidebar {
-        justify-content: flex-start;
+        overflow-y: auto;
 
         .container {
-            padding: 20px 8px;
+            padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
             min-width: 218px;
         }
 
-        > div {
+        .scrollbox {
             width: 100%;
         }
-
         .version {
             place-items: center;
-
         }
     }
 
+    /* Content */
     .content {
-        padding: 10px 12px 50px;
+        padding: 0;
+
+        .scrollbox {
+            overflow: auto;
+        }
+
+        .contentcontainer {
+            max-width: unset !important;
+            padding: 16px 12px var(--bottom-navigation-height) !important;
+        }
     }
 }
 
@@ -52,8 +88,11 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    animation: open .18s ease-out,
-               opacity .18s;
+    animation: open 0.18s ease-out, opacity 0.18s;
+
+    &.closing {
+        animation: close 0.18s ease-in;
+    }
 }
 
 .settings {
@@ -61,20 +100,40 @@
     display: flex;
     user-select: none;
     flex-direction: row;
-    justify-content: center;
     background: var(--primary-background);
 
+    .scrollbox {
+        overflow-y: scroll;
+        visibility: hidden;
+        transition: visibility 0.1s;
+    }
+
+    .container,
+    .contentcontainer,
+    .scrollbox:hover,
+    .scrollbox:focus {
+        visibility: visible;
+    }
+
+    // All children receive custom scrollbar.
+    > * > ::-webkit-scrollbar-thumb {
+        width: 4px;
+        background-clip: content-box;
+        border-top: 80px solid transparent;
+    }
+
     .sidebar {
-        flex-grow: 1;
+        flex: 1 0 218px;
         display: flex;
-        flex-shrink: 0;
-        overflow-y: scroll;
         justify-content: flex-end;
         background: var(--secondary-background);
 
         .container {
-            width: 218px;
-            padding: 60px 8px;
+            min-width: 218px;
+            padding: 80px 8px;
+            display: flex;
+            gap: 2px;
+            flex-direction: column;
         }
 
         .divider {
@@ -84,20 +143,17 @@
         .donate {
             color: goldenrod !important;
         }
-
         .logOut {
             color: var(--error) !important;
         }
 
         .version {
             margin: 1rem 12px 0;
-            font-size: 10px;
+            font-size: 0.625rem;
             color: var(--secondary-foreground);
-            font-family: "Fira Mono", monospace;
+            font-family: var(--monospace-font), monospace;
             user-select: text;
-
             display: grid;
-            //place-items: center;
 
             > div {
                 gap: 2px;
@@ -105,87 +161,118 @@
                 flex-direction: column;
             }
 
-            .revision a:hover {
+            a:hover {
                 text-decoration: underline;
             }
         }
-
-        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
     }
 
     .content {
-        flex-grow: 2;
-        max-width: 740px;
-        padding: 60px 2em;
-        overflow-y: scroll;
-        overflow-x: hidden;
+        flex: 1 1 800px;
+        display: flex;
+        overflow-y: auto;
+
+        .scrollbox {
+            display: flex;
+            flex-grow: 1;
+        }
+
+        .contentcontainer {
+            display: flex;
+            gap: 13px;
+            height: fit-content;
+            max-width: 740px;
+            padding: 80px 32px;
+            width: 100%;
+            flex-direction: column;
+        }
 
         details {
             margin: 14px 0;
         }
 
         h1 {
-            margin-top: 0;
-            line-height: 1em;
-            font-size: 1.2em;
+            margin: 0;
+            line-height: 1rem;
+            font-size: 1.2rem;
             font-weight: 600;
         }
 
         h3 {
-            font-size: 13px;
+            font-size: 0.8125rem;
             text-transform: uppercase;
             color: var(--secondary-foreground);
+
+            &:first-child {
+                margin-top: 0;
+            }
         }
 
         h4 {
             margin: 4px 2px;
-            font-size: 13px;
-
+            font-size: 0.8125rem;
             color: var(--tertiary-foreground);
             text-transform: uppercase;
         }
 
+        h5 {
+            margin-top: 0;
+            font-size: 0.75rem;
+            font-weight: 400;
+        }
+
         .footer {
             border-top: 1px solid;
             margin: 0;
             padding-top: 5px;
-            font-size: 14px;
+            font-size: 0.875rem;
             color: var(--secondary-foreground);
         }
     }
 
     .action {
         flex-grow: 1;
-        flex-shrink: 0;
-        padding: 60px 8px;
-        color: var(--tertiary-background);
-        
+        padding: 80px 8px;
+        visibility: visible;
+        position: sticky;
+        top: 0;
+
         &:after {
             content: "ESC";
+            margin-top: 4px;
             display: flex;
-            text-align: center;
-            align-content: center;
             justify-content: center;
-            position: relative;
-            color: var(--foreground);
-            width: 48px;
-            opacity: .5;
-            font-size: .75em;
-        }
-
-        > div {
-            display: inline;
-            > svg {
-                &:active {
-                    transform: translateY(2px);
-                }
+            width: 40px;
+            opacity: 0.5;
+            font-size: 0.75rem;
+        }
+
+        .closeButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            height: 40px;
+            width: 40px;
+            border: 3px solid var(--tertiary-background);
+            cursor: pointer;
+
+            svg {
+                color: var(--secondary-foreground);
+            }
+            &:hover {
+                background: var(--secondary-header);
+            }
+            &:active {
+                transform: translateY(2px);
             }
         }
     }
 }
 
-.loader {
-    > div {
-        margin: auto;
+@media (pointer: coarse) {
+    .scrollbox {
+        visibility: visible !important;
+        overflow-y: auto;
     }
 }

src/pages/settings/Settings.tsx

-import { Text } from "preact-i18n";
-import { Sync } from "./panes/Sync";
-import { useContext } from "preact/hooks";
-import styles from "./Settings.module.scss";
-import { LIBRARY_VERSION } from "revolt.js";
-import { APP_VERSION } from "../../version";
-import { GenericSettings } from "./GenericSettings";
-import { Route, useHistory } from "react-router-dom";
+import { Gitlab } from "@styled-icons/boxicons-logos";
 import {
-    Bell,
-    Box,
-    Coffee,
-    Gitlab,
+    Sync as SyncIcon,
     Globe,
-    Image,
     LogOut,
-    RefreshCw,
-    Shield,
-    ToggleRight,
-    User
-} from "@styled-icons/feather";
-import { Megaphone } from "@styled-icons/bootstrap";
-import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
-import LineDivider from "../../components/ui/LineDivider";
+    Desktop,
+} from "@styled-icons/boxicons-regular";
+import {
+    Bell,
+    Palette,
+    Coffee,
+    IdCard,
+    CheckShield,
+    Flask,
+    User,
+    Megaphone,
+} from "@styled-icons/boxicons-solid";
+import { Route, Switch, useHistory } from "react-router-dom";
+import { LIBRARY_VERSION } from "revolt.js";
+
+import styles from "./Settings.module.scss";
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
-import ButtonItem from "../../components/navigation/items/ButtonItem";
-import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
+import {
+    AppContext,
+    OperationsContext,
+} from "../../context/revoltjs/RevoltClient";
+
+import LineDivider from "../../components/ui/LineDivider";
 
+import ButtonItem from "../../components/navigation/items/ButtonItem";
+import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
+import { APP_VERSION } from "../../version";
+import { GenericSettings } from "./GenericSettings";
 import { Account } from "./panes/Account";
-import { Profile } from "./panes/Profile";
-import { Sessions } from "./panes/Sessions";
+import { Appearance } from "./panes/Appearance";
+import { ExperimentsPage } from "./panes/Experiments";
 import { Feedback } from "./panes/Feedback";
 import { Languages } from "./panes/Languages";
-import { Appearance } from "./panes/Appearance";
+import { Native } from "./panes/Native";
 import { Notifications } from "./panes/Notifications";
-import { ExperimentsPage } from "./panes/Experiments";
+import { Profile } from "./panes/Profile";
+import { Sessions } from "./panes/Sessions";
+import { Sync } from "./panes/Sync";
 
 export default function Settings() {
     const history = useHistory();
     const client = useContext(AppContext);
     const operations = useContext(OperationsContext);
-    
+
     function switchPage(to?: string) {
         if (to) {
             history.replace(`/settings/${to}`);
@@ -52,112 +62,165 @@ export default function Settings() {
         <GenericSettings
             pages={[
                 {
-                    category: <Text id="app.settings.categories.user_settings" />,
-                    id: 'account',
-                    icon: <User size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.account.title" />
+                    category: (
+                        <Text id="app.settings.categories.user_settings" />
+                    ),
+                    id: "account",
+                    icon: <User size={20} />,
+                    title: <Text id="app.settings.pages.account.title" />,
                 },
                 {
-                    id: 'profile',
-                    icon: <Image size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.profile.title" />
+                    id: "profile",
+                    icon: <IdCard size={20} />,
+                    title: <Text id="app.settings.pages.profile.title" />,
                 },
                 {
-                    id: 'sessions',
-                    icon: <Shield size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.sessions.title" />
+                    id: "sessions",
+                    icon: <CheckShield size={20} />,
+                    title: <Text id="app.settings.pages.sessions.title" />,
                 },
                 {
-                    category: <Text id="app.settings.categories.client_settings" />,
-                    id: 'appearance',
-                    icon: <Box size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.appearance.title" />
+                    category: (
+                        <Text id="app.settings.categories.client_settings" />
+                    ),
+                    id: "appearance",
+                    icon: <Palette size={20} />,
+                    title: <Text id="app.settings.pages.appearance.title" />,
                 },
                 {
-                    id: 'notifications',
-                    icon: <Bell size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.notifications.title" />
+                    id: "notifications",
+                    icon: <Bell size={20} />,
+                    title: <Text id="app.settings.pages.notifications.title" />,
                 },
                 {
-                    id: 'language',
-                    icon: <Globe size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.language.title" />
+                    id: "language",
+                    icon: <Globe size={20} />,
+                    title: <Text id="app.settings.pages.language.title" />,
                 },
                 {
-                    id: 'sync',
-                    icon: <RefreshCw size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.sync.title" />
+                    id: "sync",
+                    icon: <SyncIcon size={20} />,
+                    title: <Text id="app.settings.pages.sync.title" />,
+                },
+                {
+                    id: "native",
+                    hidden: !window.isNative,
+                    icon: <Desktop size={20} />,
+                    title: <Text id="app.settings.pages.native.title" />,
                 },
                 {
                     divider: true,
-                    id: 'experiments',
-                    icon: <ToggleRight size={20} strokeWidth={2} />,
-                    title: <Text id="app.settings.pages.experiments.title" />
+                    id: "experiments",
+                    icon: <Flask size={20} />,
+                    title: <Text id="app.settings.pages.experiments.title" />,
                 },
                 {
-                    id: 'feedback',
-                    icon: <Megaphone size={20} strokeWidth={0.3} />,
-                    title: <Text id="app.settings.pages.feedback.title" />
-                }
-            ]}
-            children={[
-                <Route path="/settings/profile"><Profile /></Route>,
-                <Route path="/settings/sessions">
-                    <RequiresOnline><Sessions /></RequiresOnline>
-                </Route>,
-                <Route path="/settings/appearance"><Appearance /></Route>,
-                <Route path="/settings/notifications"><Notifications /></Route>,
-                <Route path="/settings/language"><Languages /></Route>,
-                <Route path="/settings/sync"><Sync /></Route>,
-                <Route path="/settings/experiments"><ExperimentsPage /></Route>,
-                <Route path="/settings/feedback"><Feedback /></Route>,
-                <Route path="/"><Account /></Route>
+                    id: "feedback",
+                    icon: <Megaphone size={20} />,
+                    title: <Text id="app.settings.pages.feedback.title" />,
+                },
             ]}
+            children={
+                <Switch>
+                    <Route path="/settings/profile">
+                        <Profile />
+                    </Route>
+                    <Route path="/settings/sessions">
+                        <RequiresOnline>
+                            <Sessions />
+                        </RequiresOnline>
+                    </Route>
+                    <Route path="/settings/appearance">
+                        <Appearance />
+                    </Route>
+                    <Route path="/settings/notifications">
+                        <Notifications />
+                    </Route>
+                    <Route path="/settings/language">
+                        <Languages />
+                    </Route>
+                    <Route path="/settings/sync">
+                        <Sync />
+                    </Route>
+                    <Route path="/settings/native">
+                        <Native />
+                    </Route>
+                    <Route path="/settings/experiments">
+                        <ExperimentsPage />
+                    </Route>
+                    <Route path="/settings/feedback">
+                        <Feedback />
+                    </Route>
+                    <Route path="/">
+                        <Account />
+                    </Route>
+                </Switch>
+            }
             defaultPage="account"
             switchPage={switchPage}
             category="pages"
-            custom={[
-                <a
-                    href="https://gitlab.insrt.uk/revolt"
-                    target="_blank"
-                >
-                    <ButtonItem compact>
-                        <Gitlab size={20} strokeWidth={2} />
-                        <Text id="app.settings.pages.source_code" />
-                    </ButtonItem>
-                </a>,
-                <a href="https://ko-fi.com/insertish" target="_blank">
-                    <ButtonItem className={styles.donate} compact>
-                        <Coffee size={20} strokeWidth={2} />
-                        <Text id="app.settings.pages.donate.title" />
+            custom={
+                <>
+                    <a
+                        href="https://gitlab.insrt.uk/revolt"
+                        target="_blank"
+                        rel="noreferrer">
+                        <ButtonItem compact>
+                            <Gitlab size={20} />
+                            <Text id="app.settings.pages.source_code" />
+                        </ButtonItem>
+                    </a>
+                    <a
+                        href="https://insrt.uk/donate"
+                        target="_blank"
+                        rel="noreferrer">
+                        <ButtonItem className={styles.donate} compact>
+                            <Coffee size={20} />
+                            <Text id="app.settings.pages.donate.title" />
+                        </ButtonItem>
+                    </a>
+                    <LineDivider />
+                    <ButtonItem
+                        onClick={() => operations.logout()}
+                        className={styles.logOut}
+                        compact>
+                        <LogOut size={20} />
+                        <Text id="app.settings.pages.logOut" />
                     </ButtonItem>
-                </a>,
-                <LineDivider />,
-                <ButtonItem
-                    onClick={() => operations.logout()}
-                    className={styles.logOut}
-                    compact
-                >
-                    <LogOut size={20} strokeWidth={2} />
-                    <Text id="app.settings.pages.logOut" />
-                </ButtonItem>,
-                <div className={styles.version}>
-                    <div>
+                    <div className={styles.version}>
                         <span className={styles.revision}>
-                            <a href={`${REPO_URL}/${GIT_REVISION}`} target="_blank">
-                                { GIT_REVISION.substr(0, 7) }
+                            <a
+                                href={`${REPO_URL}/${GIT_REVISION}`}
+                                target="_blank"
+                                rel="noreferrer">
+                                {GIT_REVISION.substr(0, 7)}
                             </a>
                             {` `}
-                            <a href={GIT_BRANCH !== 'DETACHED' ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}` : undefined} target="_blank">
-                                ({ GIT_BRANCH })
+                            <a
+                                href={
+                                    GIT_BRANCH !== "DETACHED"
+                                        ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
+                                        : undefined
+                                }
+                                target="_blank"
+                                rel="noreferrer">
+                                ({GIT_BRANCH})
                             </a>
                         </span>
-                        <span>{ GIT_BRANCH === 'production' ? 'Stable' : 'Nightly' } {APP_VERSION}</span>
-                        <span>API: {client.configuration?.revolt ?? "N/A"}</span>
+                        <span>
+                            {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
+                            {APP_VERSION}
+                        </span>
+                        {window.isNative && (
+                            <span>Native: {window.nativeVersion}</span>
+                        )}
+                        <span>
+                            API: {client.configuration?.revolt ?? "N/A"}
+                        </span>
                         <span>revolt.js: {LIBRARY_VERSION}</span>
                     </div>
-                </div>
-            ]}
+                </>
+            }
         />
-    )
+    );
 }

src/pages/settings/assets/dark.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
-  <g id="Dark" transform="translate(-225 -535)">
-    <g id="Group_188" data-name="Group 188">
-      <rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#333234"/>
-      <path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#212121"/>
-      <g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
-        <g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
-          <rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#373737"/>
-          <rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#efefef"/>
-          <rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#fff"/>
-          <g id="Group_198" data-name="Group 198">
-            <rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
-            <rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
-            <rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
-          </g>
-          <g id="Voice_Channel" data-name="Voice Channel">
-            <rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
-            <rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
-            <g id="Connected_Users" data-name="Connected Users">
-              <circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
-              <circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
-              <circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
-            </g>
-          </g>
-          <g id="Group_199" data-name="Group 199" transform="translate(0 54)">
-            <rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
-            <rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
-          </g>
-          <g id="Group_200" data-name="Group 200" transform="translate(0 74)">
-            <rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
-            <rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#fff"/>
-            <rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
-          </g>
-          <g id="Group_201" data-name="Group 201" transform="translate(0 94)">
-            <rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
-            <rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
-            <rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
-          </g>
-        </g>
-        <path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#404040"/>
-      </g>
-    </g>
-    <g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
-      <circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
-      <rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
-      <rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
-      <rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#fff"/>
-      <rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#fff"/>
-    </g>
-    <g id="Group_189" data-name="Group 189">
-      <line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
-    </g>
-    <g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
-      <rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
-      <rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
-      <g id="Group_194" data-name="Group 194" transform="translate(0 2)">
-        <rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
-        <rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#888"/>
-        <line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1"/>
-      </g>
-      <circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
-    </g>
-    <g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
-      <circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
-      <rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
-      <rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
-      <rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#fff"/>
-      <rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#fff"/>
-      <rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#fff"/>
-    </g>
-    <rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#434343"/>
-    <g id="Rectangle_229" data-name="Rectangle 229" transform="translate(506 709)" fill="#707070" stroke="#707070" stroke-width="1">
-      <path d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
-      <path d="M1,.5H17A3.5,3.5,0,0,1,20.5,4V14A3.5,3.5,0,0,1,17,17.5H1A.5.5,0,0,1,.5,17V1A.5.5,0,0,1,1,.5Z" fill="none"/>
-    </g>
-  </g>
-</svg>
+<svg width="323" height="202" viewBox="0 0 323 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="323" height="202" fill="#191919"/>
+<path d="M27 14C27 11.7909 28.7909 10 31 10H90V202H31C28.7909 202 27 200.209 27 198V14Z" fill="#1E1E1E"/>
+<rect x="90" y="10" width="233" height="192" fill="#242424"/>
+<rect x="90" y="10" width="233" height="18" fill="#363636"/>
+<rect x="97" y="16" width="30" height="6" rx="2" fill="#DEDEDE"/>
+<path d="M106.517 163.445C111.534 163.445 115.601 159.378 115.601 154.361C115.601 149.344 111.534 145.277 106.517 145.277C101.5 145.277 97.4326 149.344 97.4326 154.361C97.4326 159.378 101.5 163.445 106.517 163.445Z" fill="#686868"/>
+<path d="M150.206 145.277H124.252C123.296 145.277 122.522 146.052 122.522 147.008V150.468C122.522 151.424 123.296 152.198 124.252 152.198H150.206C151.162 152.198 151.936 151.424 151.936 150.468V147.008C151.936 146.052 151.162 145.277 150.206 145.277Z" fill="#E8E8E8"/>
+<path d="M178.756 145.277H157.992C157.037 145.277 156.262 146.052 156.262 147.008V150.468C156.262 151.424 157.037 152.198 157.992 152.198H178.756C179.711 152.198 180.486 151.424 180.486 150.468V147.008C180.486 146.052 179.711 145.277 178.756 145.277Z" fill="#676767"/>
+<path d="M141.555 158.255H124.252C123.296 158.255 122.522 159.029 122.522 159.985V161.715C122.522 162.671 123.296 163.445 124.252 163.445H141.555C142.51 163.445 143.285 162.671 143.285 161.715V159.985C143.285 159.029 142.51 158.255 141.555 158.255Z" fill="white"/>
+<path d="M185.677 158.255H148.476C147.52 158.255 146.746 159.029 146.746 159.985V161.715C146.746 162.671 147.52 163.445 148.476 163.445H185.677C186.632 163.445 187.407 162.671 187.407 161.715V159.985C187.407 159.029 186.632 158.255 185.677 158.255Z" fill="white"/>
+<path d="M236.72 158.255H192.598C191.642 158.255 190.868 159.029 190.868 159.985V161.715C190.868 162.671 191.642 163.445 192.598 163.445H236.72C237.676 163.445 238.45 162.671 238.45 161.715V159.985C238.45 159.029 237.676 158.255 236.72 158.255Z" fill="white"/>
+<path opacity="0.5" d="M97 131.868H262.242" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
+<path d="M150.206 81.257H124.252C123.296 81.257 122.522 82.0316 122.522 82.9872V86.4478C122.522 87.4034 123.296 88.1781 124.252 88.1781H150.206C151.162 88.1781 151.936 87.4034 151.936 86.4478V82.9872C151.936 82.0316 151.162 81.257 150.206 81.257Z" fill="#E8E8E8"/>
+<path d="M178.756 81.257H157.992C157.037 81.257 156.262 82.0316 156.262 82.9872V86.4478C156.262 87.4034 157.037 88.1781 157.992 88.1781H178.756C179.711 88.1781 180.486 87.4034 180.486 86.4478V82.9872C180.486 82.0316 179.711 81.257 178.756 81.257Z" fill="#676767"/>
+<path d="M190.868 94.2341H124.252C123.296 94.2341 122.522 95.0088 122.522 95.9644V97.6947C122.522 98.6503 123.296 99.425 124.252 99.425H190.868C191.823 99.425 192.598 98.6503 192.598 97.6947V95.9644C192.598 95.0088 191.823 94.2341 190.868 94.2341Z" fill="#68ABEE"/>
+<path d="M146.746 106.708H130.308C129.352 106.708 128.578 107.483 128.578 108.439V110.169C128.578 111.124 129.352 111.899 130.308 111.899H146.746C147.701 111.899 148.476 111.124 148.476 110.169V108.439C148.476 107.483 147.701 106.708 146.746 106.708Z" fill="#68ABEE"/>
+<path d="M215.957 114.997H130.308C129.352 114.997 128.578 115.772 128.578 116.728V118.458C128.578 119.413 129.352 120.188 130.308 120.188H215.957C216.912 120.188 217.687 119.413 217.687 118.458V116.728C217.687 115.772 216.912 114.997 215.957 114.997Z" fill="#888888"/>
+<path d="M122.954 105.913V120.621" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
+<path d="M106.517 99.4249C111.534 99.4249 115.601 95.3579 115.601 90.3409C115.601 85.324 111.534 81.257 106.517 81.257C101.5 81.257 97.4326 85.324 97.4326 90.3409C97.4326 95.3579 101.5 99.4249 106.517 99.4249Z" fill="#686868"/>
+<path d="M106.517 56.1679C111.534 56.1679 115.601 52.1009 115.601 47.084C115.601 42.067 111.534 38 106.517 38C101.5 38 97.4326 42.067 97.4326 47.084C97.4326 52.1009 101.5 56.1679 106.517 56.1679Z" fill="#686868"/>
+<path d="M150.206 38H124.252C123.296 38 122.522 38.7747 122.522 39.7303V43.1908C122.522 44.1464 123.296 44.9211 124.252 44.9211H150.206C151.162 44.9211 151.936 44.1464 151.936 43.1908V39.7303C151.936 38.7747 151.162 38 150.206 38Z" fill="#E8E8E8"/>
+<path d="M178.756 38H157.992C157.037 38 156.262 38.7747 156.262 39.7303V43.1908C156.262 44.1464 157.037 44.9211 157.992 44.9211H178.756C179.711 44.9211 180.486 44.1464 180.486 43.1908V39.7303C180.486 38.7747 179.711 38 178.756 38Z" fill="#676767"/>
+<path d="M202.98 50.9771H124.252C123.296 50.9771 122.522 51.7517 122.522 52.7073V54.4376C122.522 55.3932 123.296 56.1679 124.252 56.1679H202.98C203.935 56.1679 204.71 55.3932 204.71 54.4376V52.7073C204.71 51.7517 203.935 50.9771 202.98 50.9771Z" fill="white"/>
+<path d="M145.88 62.2239H124.252C123.296 62.2239 122.522 62.9985 122.522 63.9542V65.6844C122.522 66.64 123.296 67.4147 124.252 67.4147H145.88C146.836 67.4147 147.611 66.64 147.611 65.6844V63.9542C147.611 62.9985 146.836 62.2239 145.88 62.2239Z" fill="white"/>
+<path d="M192.598 62.2239H152.802C151.846 62.2239 151.071 62.9985 151.071 63.9542V65.6844C151.071 66.64 151.846 67.4147 152.802 67.4147H192.598C193.554 67.4147 194.328 66.64 194.328 65.6844V63.9542C194.328 62.9985 193.554 62.2239 192.598 62.2239Z" fill="white"/>
+<path d="M265.27 50.9771H209.901C208.945 50.9771 208.17 51.7517 208.17 52.7073V54.4376C208.17 55.3932 208.945 56.1679 209.901 56.1679H265.27C266.225 56.1679 267 55.3932 267 54.4376V52.7073C267 51.7517 266.225 50.9771 265.27 50.9771Z" fill="white"/>
+<rect x="90" y="184" width="233" height="18" fill="#363636"/>
+<circle cx="317" cy="5" r="2" fill="#C4C4C4"/>
+<circle cx="310" cy="5" r="2" fill="#C4C4C4"/>
+<circle cx="303" cy="5" r="2" fill="#C4C4C4"/>
+<line x1="4.5" y1="34.5" x2="21.5" y2="34.5" stroke="#414141" stroke-linecap="round"/>
+<rect x="30" y="16" width="36" height="6" rx="2" fill="#F3F3F3"/>
+<rect x="30" y="35" width="26" height="4" rx="2" fill="#F3F3F3"/>
+<rect x="39" y="46" width="32" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="39" y="70" width="29" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="39" y="58" width="13" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="55" y="58" width="22" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="30" y="83" width="26" height="4" rx="2" fill="#F3F3F3"/>
+<rect x="39" y="94" width="32" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="39" y="118" width="29" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="39" y="106" width="13" height="4" rx="2" fill="#BBBBBB"/>
+<rect x="55" y="106" width="22" height="4" rx="2" fill="#BBBBBB"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="10" width="18" height="18">
+<circle cx="13" cy="19" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<circle cx="13" cy="19" r="9" fill="url(#paint0_linear)"/>
+<circle cx="11.92" cy="22.24" r="3.6" fill="#F9FAFB"/>
+<path d="M4 22.6H6.88L9.04 21.52L11.2 20.8L12.64 21.52L14.44 21.16L16.24 21.52L16.96 21.88L19.12 21.52L20.56 21.88L22 21.16V29.08H16.6H11.92H4V24.04V22.6Z" fill="#C42626"/>
+<path d="M6.88 22.6H4V24.04L6.88 22.6Z" fill="#882C2F"/>
+<path d="M14.44 21.16L12.64 21.52L11.2 24.04L11.92 29.08H16.6L15.88 27.64L16.24 22.96L16.96 21.88L16.24 21.52L14.44 21.16Z" fill="#AF373B"/>
+</g>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="42" width="18" height="18">
+<circle cx="13" cy="51" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1)">
+<circle cx="13" cy="51" r="9" fill="#D6D4D5"/>
+<path d="M13.612 53.8162C19.048 49.6124 22.0252 53.8162 22.0252 53.8162V60.4402H5.89721L7.49201 53.988C7.99666 53.5705 8.17601 58.02 13.612 53.8162Z" fill="url(#paint1_linear)"/>
+<path d="M4.53998 54.0601C4.53998 54.0601 8.10867 49.2615 12.388 54.9961C16.3011 60.2399 20.3145 56.741 20.668 55.8518V55.6801C20.7021 55.7083 20.7011 55.7686 20.668 55.8518V60.684H4.53998V54.0601Z" fill="url(#paint2_linear)"/>
+<path d="M21.568 47.1119C21.568 48.2254 20.6654 49.1279 19.552 49.1279C18.4386 49.1279 17.536 48.2254 17.536 47.1119C17.536 45.9985 18.4386 45.0959 19.552 45.0959C20.6654 45.0959 21.568 45.9985 21.568 47.1119Z" fill="#E76563"/>
+<path d="M19.12 49.0559H19.984V49.4879H19.12V49.0559Z" fill="#E76563"/>
+<rect x="19.12" y="49.344" width="0.864" height="0.072" fill="white"/>
+<path d="M19.264 49.488H19.336V49.776H19.264V49.488Z" fill="#4F65B6"/>
+<path d="M19.48 49.488H19.624V49.776H19.48V49.488Z" fill="#4F65B6"/>
+<path d="M19.768 49.488H19.84V49.776H19.768V49.488Z" fill="#4F65B6"/>
+<path d="M19.048 49.776H20.056L19.984 50.28H19.12L19.048 49.776Z" fill="#4F65B6"/>
+</g>
+<circle cx="20" cy="45" r="3.5" fill="#EF3B3B" stroke="black"/>
+<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="65" width="18" height="18">
+<circle cx="13" cy="74" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask2)">
+<circle cx="13" cy="74" r="9" fill="url(#paint3_linear)"/>
+<path d="M11.056 79.184L13.936 75.764V80.516L11.992 80.336L11.056 79.184Z" fill="#2E2816"/>
+<path d="M5.97998 76.2679L13.72 80.3719L13.792 85.0159L5.97998 82.3519L5.15198 79.1839L5.97998 76.2679Z" fill="url(#paint4_linear)"/>
+<path d="M4.75598 78.0319L5.97998 76.2679L5.22398 79.4719L4.93598 78.5359L4.75598 78.0319Z" fill="#7EA6A6"/>
+<path d="M19.12 68.708L21.64 70.544L24.484 76.124L22.468 79.94L19.12 68.708Z" fill="#EDEDED"/>
+<path d="M12.964 79.976L13.864 80.444L13.936 84.008L13 83.972L12.964 79.976Z" fill="#878787" fill-opacity="0.5"/>
+<path d="M13.468 75.584L19.12 68.708L23.008 79.112L13.72 85.736L13.468 75.584Z" fill="url(#paint5_linear)"/>
+</g>
+<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="88" width="18" height="18">
+<circle cx="13" cy="97" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask3)">
+<circle cx="13" cy="97" r="9" fill="url(#paint6_linear)"/>
+<path d="M4.252 89.404C4.252 89.404 11.236 87.2439 16.024 92.284C20.812 97.324 19.732 106.396 19.732 106.396H4.252L3.604 97.936L4.252 89.404Z" fill="url(#paint7_linear)"/>
+<path d="M14.404 106.396C12.208 111.508 19.732 106.396 19.732 106.396C19.732 106.396 20.488 100.348 18.508 95.956C16.528 91.564 13.72 90.448 13.72 90.448C13.72 90.448 16.6 101.284 14.404 106.396Z" fill="url(#paint8_linear)"/>
+</g>
+<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="110" width="18" height="18">
+<circle cx="13" cy="119" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask4)">
+<circle cx="13" cy="119" r="9" fill="url(#paint9_linear)"/>
+<path d="M3.35199 122.708L22.216 122.708" stroke="#8181B1" stroke-width="0.144"/>
+<path d="M3.28003 121.376L22.144 121.376" stroke="#A2A2BE" stroke-width="0.144"/>
+<path d="M3.56799 119.936L22.432 119.936" stroke="#ADADBD" stroke-width="0.216"/>
+<path d="M3.784 118.496L22.648 118.496" stroke="#BBBBCD" stroke-width="0.216"/>
+<line x1="3.35199" y1="124.004" x2="22.216" y2="124.004" stroke="#8181B1" stroke-width="0.072"/>
+<line x1="3.35199" y1="125.3" x2="22.216" y2="125.3" stroke="#8181B1" stroke-width="0.072"/>
+<path d="M13.144 122.816L13.828 123.824C13.828 123.824 13.936 124.256 13.828 124.328C13.72 124.4 13.288 123.824 13.18 123.5C13.072 123.176 13.144 122.816 13.144 122.816Z" fill="#E6E7F4"/>
+<path d="M13.828 124.328V123.824C13.828 123.824 15.304 123.608 16.708 122.816C18.112 122.024 18.364 120.944 18.364 120.944C18.364 120.944 18.292 121.952 16.924 123.032C15.556 124.112 13.828 124.328 13.828 124.328Z" fill="#E6E7F4"/>
+<path d="M18.364 120.944C15.448 120.764 13.144 122.826 13.144 122.826L13.828 123.834C13.828 123.834 17.644 123.248 18.364 120.944Z" fill="white"/>
+<path d="M18.256 121.016C15.6819 120.86 13.252 122.816 13.252 122.816L13.864 123.716C13.864 123.716 17.6204 123.017 18.256 121.016Z" fill="url(#paint10_linear)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="13" y1="10" x2="13" y2="28" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AAB6BD"/>
+<stop offset="1" stop-color="#D4DDE1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="14.908" y1="54.744" x2="22.756" y2="61.08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F65B6"/>
+<stop offset="1" stop-color="#C6D0F1"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="8.39198" y1="54.276" x2="21.496" y2="60.324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F65B6"/>
+<stop offset="1" stop-color="#C6D0F1"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="9.292" y1="65.432" x2="18.22" y2="82.388" gradientUnits="userSpaceOnUse">
+<stop stop-color="#009092"/>
+<stop offset="1" stop-color="#79C6C8"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="9.39998" y1="76.2679" x2="9.39998" y2="85.0519" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBCBCB"/>
+<stop offset="1" stop-color="#FAFAFA"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="18.238" y1="68.708" x2="18.238" y2="85.736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95ABA9"/>
+<stop offset="1" stop-color="#DCDCDC"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="10.876" y1="87.604" x2="17.86" y2="105.136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41486A"/>
+<stop offset="1" stop-color="#3B3F5C"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="7.312" y1="91.168" x2="19.84" y2="107.224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4C7799"/>
+<stop offset="0.9999" stop-color="#39AEBF"/>
+<stop offset="1" stop-color="#4C7799" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="16.636" y1="96.568" x2="12.388" y2="87.316" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DD4878"/>
+<stop offset="1" stop-color="#D7E1E8"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="9.94" y1="109.244" x2="13.756" y2="125.912" gradientUnits="userSpaceOnUse">
+<stop stop-color="#847DAF"/>
+<stop offset="1" stop-color="#4547AE"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="15.484" y1="122.024" x2="16.924" y2="123.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DFDFE1"/>
+<stop offset="1" stop-color="#F5F4FB"/>
+</linearGradient>
+</defs>
+</svg>

src/pages/settings/assets/dark_old.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
+  <g id="Dark" transform="translate(-225 -535)">
+    <g id="Group_188" data-name="Group 188">
+      <rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#333234"/>
+      <path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#212121"/>
+      <g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
+        <g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
+          <rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#373737"/>
+          <rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#efefef"/>
+          <rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#fff"/>
+          <g id="Group_198" data-name="Group 198">
+            <rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
+            <rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
+            <rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
+          </g>
+          <g id="Voice_Channel" data-name="Voice Channel">
+            <rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
+            <rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
+            <g id="Connected_Users" data-name="Connected Users">
+              <circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
+              <circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
+              <circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
+            </g>
+          </g>
+          <g id="Group_199" data-name="Group 199" transform="translate(0 54)">
+            <rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
+            <rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
+          </g>
+          <g id="Group_200" data-name="Group 200" transform="translate(0 74)">
+            <rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
+            <rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#fff"/>
+            <rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
+          </g>
+          <g id="Group_201" data-name="Group 201" transform="translate(0 94)">
+            <rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
+            <rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
+            <rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
+          </g>
+        </g>
+        <path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#404040"/>
+      </g>
+    </g>
+    <g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
+      <circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
+      <rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
+      <rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
+      <rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#fff"/>
+      <rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#fff"/>
+    </g>
+    <g id="Group_189" data-name="Group 189">
+      <line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
+    </g>
+    <g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
+      <rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
+      <rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
+      <g id="Group_194" data-name="Group 194" transform="translate(0 2)">
+        <rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
+        <rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#888"/>
+        <line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1"/>
+      </g>
+      <circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
+    </g>
+    <g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
+      <circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
+      <rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
+      <rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
+      <rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#fff"/>
+      <rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#fff"/>
+      <rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#fff"/>
+    </g>
+    <rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#434343"/>
+    <g id="Rectangle_229" data-name="Rectangle 229" transform="translate(506 709)" fill="#707070" stroke="#707070" stroke-width="1">
+      <path d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
+      <path d="M1,.5H17A3.5,3.5,0,0,1,20.5,4V14A3.5,3.5,0,0,1,17,17.5H1A.5.5,0,0,1,.5,17V1A.5.5,0,0,1,1,.5Z" fill="none"/>
+    </g>
+  </g>
+</svg>

src/pages/settings/assets/light.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
-  <g id="Light" transform="translate(-225 -535)">
-    <g id="Group_188" data-name="Group 188">
-      <rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#fbfbfb"/>
-      <path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#fff"/>
-      <g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
-        <g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
-          <rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#e8e8e8"/>
-          <rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#5a5a5a"/>
-          <rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#464646"/>
-          <g id="Group_198" data-name="Group 198">
-            <rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
-            <rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
-            <rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
-          </g>
-          <g id="Voice_Channel" data-name="Voice Channel">
-            <rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
-            <rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
-            <g id="Connected_Users" data-name="Connected Users">
-              <circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
-              <circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
-              <circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
-            </g>
-          </g>
-          <g id="Group_199" data-name="Group 199" transform="translate(0 54)">
-            <rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
-            <rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
-          </g>
-          <g id="Group_200" data-name="Group 200" transform="translate(0 74)">
-            <rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
-            <rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#464646"/>
-            <rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
-          </g>
-          <g id="Group_201" data-name="Group 201" transform="translate(0 94)">
-            <rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
-            <rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
-            <rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
-          </g>
-        </g>
-        <path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#c7c7c7"/>
-      </g>
-    </g>
-    <g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
-      <circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
-      <rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
-      <rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
-      <rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#4a4a4a"/>
-      <rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#4a4a4a"/>
-    </g>
-    <g id="Group_189" data-name="Group 189">
-      <line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
-    </g>
-    <g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
-      <rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
-      <rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
-      <g id="Group_194" data-name="Group 194" transform="translate(0 2)">
-        <rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
-        <rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#4a4a4a"/>
-        <line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#bfbfbf" stroke-linecap="round" stroke-width="1"/>
-      </g>
-      <circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
-    </g>
-    <g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
-      <circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
-      <rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
-      <rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
-      <rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
-      <rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#4a4a4a"/>
-      <rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#4a4a4a"/>
-      <rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#4a4a4a"/>
-    </g>
-    <rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#ececec"/>
-    <path id="Rectangle_229" data-name="Rectangle 229" d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(506 709)" fill="#bebfc1"/>
-  </g>
-</svg>
+<svg width="323" height="202" viewBox="0 0 323 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="323" height="202" fill="#F6F6F6"/>
+<path d="M27 14C27 11.7909 28.7909 10 31 10H90V202H31C28.7909 202 27 200.209 27 198V14Z" fill="#EDEDED"/>
+<rect x="90" y="10" width="233" height="192" fill="white"/>
+<rect x="90" y="10" width="233" height="18" fill="#E8E8E8"/>
+<rect x="97" y="16" width="30" height="6" rx="2" fill="#C4C4C4"/>
+<path d="M106.517 163.445C111.534 163.445 115.601 159.378 115.601 154.361C115.601 149.344 111.534 145.277 106.517 145.277C101.5 145.277 97.4326 149.344 97.4326 154.361C97.4326 159.378 101.5 163.445 106.517 163.445Z" fill="#CFCFCF"/>
+<path d="M150.206 145.277H124.252C123.296 145.277 122.522 146.052 122.522 147.008V150.468C122.522 151.424 123.296 152.198 124.252 152.198H150.206C151.162 152.198 151.936 151.424 151.936 150.468V147.008C151.936 146.052 151.162 145.277 150.206 145.277Z" fill="#464646"/>
+<path d="M178.756 145.277H157.992C157.037 145.277 156.262 146.052 156.262 147.008V150.468C156.262 151.424 157.037 152.198 157.992 152.198H178.756C179.711 152.198 180.486 151.424 180.486 150.468V147.008C180.486 146.052 179.711 145.277 178.756 145.277Z" fill="#676767"/>
+<path d="M141.555 158.255H124.252C123.296 158.255 122.522 159.029 122.522 159.985V161.715C122.522 162.671 123.296 163.445 124.252 163.445H141.555C142.51 163.445 143.285 162.671 143.285 161.715V159.985C143.285 159.029 142.51 158.255 141.555 158.255Z" fill="#4A4A4A"/>
+<path d="M185.677 158.255H148.476C147.52 158.255 146.746 159.029 146.746 159.985V161.715C146.746 162.671 147.52 163.445 148.476 163.445H185.677C186.633 163.445 187.407 162.671 187.407 161.715V159.985C187.407 159.029 186.633 158.255 185.677 158.255Z" fill="#4A4A4A"/>
+<path d="M236.72 158.255H192.598C191.642 158.255 190.868 159.029 190.868 159.985V161.715C190.868 162.671 191.642 163.445 192.598 163.445H236.72C237.676 163.445 238.45 162.671 238.45 161.715V159.985C238.45 159.029 237.676 158.255 236.72 158.255Z" fill="#4A4A4A"/>
+<path opacity="0.5" d="M97 131.868H262.242" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
+<path d="M150.206 81.257H124.252C123.296 81.257 122.522 82.0316 122.522 82.9872V86.4478C122.522 87.4034 123.296 88.1781 124.252 88.1781H150.206C151.162 88.1781 151.936 87.4034 151.936 86.4478V82.9872C151.936 82.0316 151.162 81.257 150.206 81.257Z" fill="#464646"/>
+<path d="M178.756 81.257H157.992C157.037 81.257 156.262 82.0316 156.262 82.9872V86.4478C156.262 87.4034 157.037 88.1781 157.992 88.1781H178.756C179.711 88.1781 180.486 87.4034 180.486 86.4478V82.9872C180.486 82.0316 179.711 81.257 178.756 81.257Z" fill="#676767"/>
+<path d="M190.868 94.2341H124.252C123.296 94.2341 122.522 95.0088 122.522 95.9644V97.6947C122.522 98.6503 123.296 99.425 124.252 99.425H190.868C191.823 99.425 192.598 98.6503 192.598 97.6947V95.9644C192.598 95.0088 191.823 94.2341 190.868 94.2341Z" fill="#68ABEE"/>
+<path d="M146.746 106.708H130.308C129.352 106.708 128.578 107.483 128.578 108.439V110.169C128.578 111.124 129.352 111.899 130.308 111.899H146.746C147.701 111.899 148.476 111.124 148.476 110.169V108.439C148.476 107.483 147.701 106.708 146.746 106.708Z" fill="#68ABEE"/>
+<path d="M215.957 114.997H130.308C129.352 114.997 128.578 115.772 128.578 116.728V118.458C128.578 119.413 129.352 120.188 130.308 120.188H215.957C216.912 120.188 217.687 119.413 217.687 118.458V116.728C217.687 115.772 216.912 114.997 215.957 114.997Z" fill="#4A4A4A"/>
+<path d="M122.954 105.913V120.621" stroke="#BFBFBF" stroke-width="0.86514" stroke-linecap="round"/>
+<path d="M106.517 99.4249C111.534 99.4249 115.601 95.3579 115.601 90.3409C115.601 85.324 111.534 81.257 106.517 81.257C101.5 81.257 97.4326 85.324 97.4326 90.3409C97.4326 95.3579 101.5 99.4249 106.517 99.4249Z" fill="#CFCFCF"/>
+<path d="M106.517 56.1679C111.534 56.1679 115.601 52.1009 115.601 47.084C115.601 42.067 111.534 38 106.517 38C101.5 38 97.4326 42.067 97.4326 47.084C97.4326 52.1009 101.5 56.1679 106.517 56.1679Z" fill="#CFCFCF"/>
+<path d="M150.206 38H124.252C123.296 38 122.522 38.7747 122.522 39.7303V43.1908C122.522 44.1464 123.296 44.9211 124.252 44.9211H150.206C151.162 44.9211 151.936 44.1464 151.936 43.1908V39.7303C151.936 38.7747 151.162 38 150.206 38Z" fill="#464646"/>
+<path d="M178.756 38H157.992C157.037 38 156.262 38.7747 156.262 39.7303V43.1908C156.262 44.1464 157.037 44.9211 157.992 44.9211H178.756C179.711 44.9211 180.486 44.1464 180.486 43.1908V39.7303C180.486 38.7747 179.711 38 178.756 38Z" fill="#676767"/>
+<path d="M202.98 50.9771H124.252C123.296 50.9771 122.522 51.7517 122.522 52.7073V54.4376C122.522 55.3932 123.296 56.1679 124.252 56.1679H202.98C203.935 56.1679 204.71 55.3932 204.71 54.4376V52.7073C204.71 51.7517 203.935 50.9771 202.98 50.9771Z" fill="#4A4A4A"/>
+<path d="M145.88 62.2239H124.252C123.296 62.2239 122.522 62.9985 122.522 63.9542V65.6844C122.522 66.64 123.296 67.4147 124.252 67.4147H145.88C146.836 67.4147 147.611 66.64 147.611 65.6844V63.9542C147.611 62.9985 146.836 62.2239 145.88 62.2239Z" fill="#4A4A4A"/>
+<path d="M192.598 62.2239H152.802C151.846 62.2239 151.071 62.9985 151.071 63.9542V65.6844C151.071 66.64 151.846 67.4147 152.802 67.4147H192.598C193.554 67.4147 194.328 66.64 194.328 65.6844V63.9542C194.328 62.9985 193.554 62.2239 192.598 62.2239Z" fill="#4A4A4A"/>
+<path d="M265.27 50.9771H209.901C208.945 50.9771 208.17 51.7517 208.17 52.7073V54.4376C208.17 55.3932 208.945 56.1679 209.901 56.1679H265.27C266.225 56.1679 267 55.3932 267 54.4376V52.7073C267 51.7517 266.225 50.9771 265.27 50.9771Z" fill="#4A4A4A"/>
+<rect x="90" y="184" width="233" height="18" fill="#D3D3D3"/>
+<circle cx="317" cy="5" r="2" fill="#C4C4C4"/>
+<circle cx="310" cy="5" r="2" fill="#C4C4C4"/>
+<circle cx="303" cy="5" r="2" fill="#C4C4C4"/>
+<line x1="4.5" y1="34.5" x2="21.5" y2="34.5" stroke="#C0C0C0" stroke-linecap="round"/>
+<rect x="30" y="16" width="36" height="6" rx="2" fill="#BCBCBC"/>
+<rect x="30" y="35" width="26" height="4" rx="2" fill="#676565"/>
+<rect x="39" y="46" width="32" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="39" y="70" width="29" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="39" y="58" width="13" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="55" y="58" width="22" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="30" y="83" width="26" height="4" rx="2" fill="#676565"/>
+<rect x="39" y="94" width="32" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="39" y="118" width="29" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="39" y="106" width="13" height="4" rx="2" fill="#9A9A9A"/>
+<rect x="55" y="106" width="22" height="4" rx="2" fill="#9A9A9A"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="10" width="18" height="18">
+<circle cx="13" cy="19" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<circle cx="13" cy="19" r="9" fill="url(#paint0_linear)"/>
+<circle cx="11.9199" cy="22.24" r="3.6" fill="#F9FAFB"/>
+<path d="M4 22.6H6.88L9.04 21.52L11.2 20.8L12.64 21.52L14.44 21.16L16.24 21.52L16.96 21.88L19.12 21.52L20.56 21.88L22 21.16V29.08H16.6H11.92H4V24.04V22.6Z" fill="#C42626"/>
+<path d="M6.88 22.6H4V24.04L6.88 22.6Z" fill="#882C2F"/>
+<path d="M14.44 21.16L12.64 21.52L11.2 24.04L11.92 29.08H16.6L15.88 27.64L16.24 22.96L16.96 21.88L16.24 21.52L14.44 21.16Z" fill="#AF373B"/>
+</g>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="42" width="18" height="18">
+<circle cx="13" cy="51" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1)">
+<circle cx="13" cy="51" r="9" fill="#D6D4D5"/>
+<path d="M13.612 53.8162C19.048 49.6124 22.0251 53.8162 22.0251 53.8162V60.4402H5.89715L7.49195 53.988C7.9966 53.5705 8.17595 58.02 13.612 53.8162Z" fill="url(#paint1_linear)"/>
+<path d="M4.54004 54.0601C4.54004 54.0601 8.10873 49.2615 12.388 54.9961C16.3012 60.2399 20.3146 56.741 20.668 55.8518V55.6801C20.7021 55.7083 20.7011 55.7686 20.668 55.8518V60.684H4.54004V54.0601Z" fill="url(#paint2_linear)"/>
+<path d="M21.568 47.1119C21.568 48.2254 20.6654 49.1279 19.552 49.1279C18.4386 49.1279 17.536 48.2254 17.536 47.1119C17.536 45.9985 18.4386 45.0959 19.552 45.0959C20.6654 45.0959 21.568 45.9985 21.568 47.1119Z" fill="#E76563"/>
+<path d="M19.12 49.0559H19.984V49.4879H19.12V49.0559Z" fill="#E76563"/>
+<rect x="19.12" y="49.344" width="0.864" height="0.072" fill="white"/>
+<path d="M19.264 49.488H19.336V49.776H19.264V49.488Z" fill="#4F65B6"/>
+<path d="M19.48 49.488H19.624V49.776H19.48V49.488Z" fill="#4F65B6"/>
+<path d="M19.768 49.488H19.84V49.776H19.768V49.488Z" fill="#4F65B6"/>
+<path d="M19.048 49.776H20.056L19.984 50.28H19.12L19.048 49.776Z" fill="#4F65B6"/>
+</g>
+<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="65" width="18" height="18">
+<circle cx="13" cy="74" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask2)">
+<circle cx="13" cy="74" r="9" fill="url(#paint3_linear)"/>
+<path d="M11.056 79.184L13.936 75.764V80.516L11.992 80.336L11.056 79.184Z" fill="#2E2816"/>
+<path d="M5.97998 76.2679L13.72 80.3719L13.792 85.0159L5.97998 82.3519L5.15198 79.1839L5.97998 76.2679Z" fill="url(#paint4_linear)"/>
+<path d="M4.75598 78.0319L5.97998 76.2679L5.22398 79.4719L4.93598 78.5359L4.75598 78.0319Z" fill="#7EA6A6"/>
+<path d="M19.12 68.708L21.64 70.544L24.484 76.124L22.468 79.94L19.12 68.708Z" fill="#EDEDED"/>
+<path d="M12.964 79.976L13.864 80.444L13.936 84.008L13 83.972L12.964 79.976Z" fill="#878787" fill-opacity="0.5"/>
+<path d="M13.468 75.584L19.12 68.708L23.008 79.112L13.72 85.736L13.468 75.584Z" fill="url(#paint5_linear)"/>
+</g>
+<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="88" width="18" height="18">
+<circle cx="13" cy="97" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask3)">
+<circle cx="13" cy="97" r="9" fill="url(#paint6_linear)"/>
+<path d="M4.252 89.404C4.252 89.404 11.236 87.2439 16.024 92.284C20.812 97.324 19.732 106.396 19.732 106.396H4.252L3.604 97.936L4.252 89.404Z" fill="url(#paint7_linear)"/>
+<path d="M14.404 106.396C12.208 111.508 19.732 106.396 19.732 106.396C19.732 106.396 20.488 100.348 18.508 95.956C16.528 91.564 13.72 90.448 13.72 90.448C13.72 90.448 16.6 101.284 14.404 106.396Z" fill="url(#paint8_linear)"/>
+</g>
+<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="110" width="18" height="18">
+<circle cx="13" cy="119" r="9" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask4)">
+<circle cx="13" cy="119" r="9" fill="url(#paint9_linear)"/>
+<path d="M3.35205 122.708L22.2161 122.708" stroke="#8181B1" stroke-width="0.144"/>
+<path d="M3.28003 121.376L22.144 121.376" stroke="#A2A2BE" stroke-width="0.144"/>
+<path d="M3.56799 119.936L22.432 119.936" stroke="#ADADBD" stroke-width="0.216"/>
+<path d="M3.78406 118.496L22.6481 118.496" stroke="#BBBBCD" stroke-width="0.216"/>
+<line x1="3.35205" y1="124.004" x2="22.2161" y2="124.004" stroke="#8181B1" stroke-width="0.072"/>
+<line x1="3.35205" y1="125.3" x2="22.2161" y2="125.3" stroke="#8181B1" stroke-width="0.072"/>
+<path d="M13.144 122.816L13.828 123.824C13.828 123.824 13.936 124.256 13.828 124.328C13.72 124.4 13.288 123.824 13.18 123.5C13.072 123.176 13.144 122.816 13.144 122.816Z" fill="#E6E7F4"/>
+<path d="M13.828 124.328V123.824C13.828 123.824 15.304 123.608 16.708 122.816C18.112 122.024 18.364 120.944 18.364 120.944C18.364 120.944 18.292 121.952 16.924 123.032C15.556 124.112 13.828 124.328 13.828 124.328Z" fill="#E6E7F4"/>
+<path d="M18.364 120.944C15.448 120.764 13.144 122.826 13.144 122.826L13.828 123.834C13.828 123.834 17.644 123.248 18.364 120.944Z" fill="white"/>
+<path d="M18.256 121.016C15.6818 120.86 13.252 122.816 13.252 122.816L13.864 123.716C13.864 123.716 17.6204 123.017 18.256 121.016Z" fill="url(#paint10_linear)"/>
+</g>
+<circle cx="20" cy="45" r="3.5" fill="#EF3B3B" stroke="#F6F6F6"/>
+<defs>
+<linearGradient id="paint0_linear" x1="13" y1="10" x2="13" y2="28" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AAB6BD"/>
+<stop offset="1" stop-color="#D4DDE1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="14.908" y1="54.744" x2="22.7559" y2="61.08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F65B6"/>
+<stop offset="1" stop-color="#C6D0F1"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="8.39204" y1="54.276" x2="21.496" y2="60.324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F65B6"/>
+<stop offset="1" stop-color="#C6D0F1"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="9.292" y1="65.432" x2="18.22" y2="82.388" gradientUnits="userSpaceOnUse">
+<stop stop-color="#009092"/>
+<stop offset="1" stop-color="#79C6C8"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="9.39998" y1="76.2679" x2="9.39998" y2="85.0519" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBCBCB"/>
+<stop offset="1" stop-color="#FAFAFA"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="18.238" y1="68.708" x2="18.238" y2="85.736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95ABA9"/>
+<stop offset="1" stop-color="#DCDCDC"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="10.876" y1="87.604" x2="17.86" y2="105.136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41486A"/>
+<stop offset="1" stop-color="#3B3F5C"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="7.312" y1="91.168" x2="19.84" y2="107.224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4C7799"/>
+<stop offset="0.9999" stop-color="#39AEBF"/>
+<stop offset="1" stop-color="#4C7799" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="16.636" y1="96.568" x2="12.388" y2="87.316" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DD4878"/>
+<stop offset="1" stop-color="#D7E1E8"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="9.94" y1="109.244" x2="13.756" y2="125.912" gradientUnits="userSpaceOnUse">
+<stop stop-color="#847DAF"/>
+<stop offset="1" stop-color="#4547AE"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="15.484" y1="122.024" x2="16.924" y2="123.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DFDFE1"/>
+<stop offset="1" stop-color="#F5F4FB"/>
+</linearGradient>
+</defs>
+</svg>

src/pages/settings/assets/light_old.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
+  <g id="Light" transform="translate(-225 -535)">
+    <g id="Group_188" data-name="Group 188">
+      <rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#fbfbfb"/>
+      <path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#fff"/>
+      <g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
+        <g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
+          <rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#e8e8e8"/>
+          <rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#5a5a5a"/>
+          <rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#464646"/>
+          <g id="Group_198" data-name="Group 198">
+            <rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
+            <rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
+            <rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
+          </g>
+          <g id="Voice_Channel" data-name="Voice Channel">
+            <rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
+            <rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
+            <g id="Connected_Users" data-name="Connected Users">
+              <circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
+              <circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
+              <circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
+            </g>
+          </g>
+          <g id="Group_199" data-name="Group 199" transform="translate(0 54)">
+            <rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
+            <rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
+          </g>
+          <g id="Group_200" data-name="Group 200" transform="translate(0 74)">
+            <rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
+            <rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#464646"/>
+            <rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
+          </g>
+          <g id="Group_201" data-name="Group 201" transform="translate(0 94)">
+            <rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
+            <rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
+            <rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
+          </g>
+        </g>
+        <path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#c7c7c7"/>
+      </g>
+    </g>
+    <g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
+      <circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
+      <rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
+      <rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
+      <rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#4a4a4a"/>
+      <rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#4a4a4a"/>
+    </g>
+    <g id="Group_189" data-name="Group 189">
+      <line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
+    </g>
+    <g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
+      <rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
+      <rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
+      <g id="Group_194" data-name="Group 194" transform="translate(0 2)">
+        <rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
+        <rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#4a4a4a"/>
+        <line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#bfbfbf" stroke-linecap="round" stroke-width="1"/>
+      </g>
+      <circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
+    </g>
+    <g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
+      <circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
+      <rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
+      <rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
+      <rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
+      <rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#4a4a4a"/>
+      <rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#4a4a4a"/>
+      <rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#4a4a4a"/>
+    </g>
+    <rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#ececec"/>
+    <path id="Rectangle_229" data-name="Rectangle 229" d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(506 709)" fill="#bebfc1"/>
+  </g>
+</svg>

src/pages/settings/assets/mutant_emoji.svg

-<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M46.6542 31.4888C46.6542 34.5025 45.8664 36.6415 44.6376 38.2006C43.3969 39.7748 41.6127 40.8766 39.4233 41.6367C34.9808 43.1788 29.2654 43.1935 24.1496 43.1935C19.0358 43.1935 13.2409 43.1793 8.71974 41.6345C6.48927 40.8724 4.66749 39.7674 3.40073 38.1907C2.14775 36.6313 1.34512 34.4956 1.34512 31.4888C1.34512 25.8668 2.55606 19.0242 6.00774 13.6332C9.40822 8.32209 15.0271 4.33438 24.1496 4.33438C32.7968 4.33438 38.3534 8.3292 41.8066 13.6813C45.3033 19.1009 46.6542 25.9511 46.6542 31.4888Z" fill="#FBC546" stroke="black" stroke-width="2.69025"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2728 33.3183C13.8733 31.4729 12.147 28.7982 11.5225 25.7256H36.6027C35.9782 28.7982 34.2518 31.4729 31.8523 33.3183C30.4293 31.7762 17.6959 31.7762 16.2728 33.3183Z" fill="#722245"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2744 33.3182C17.6975 31.7761 19.7271 30.8445 21.9206 30.8445C23.3155 30.8445 24.8128 30.8445 26.2077 30.8445C28.4012 30.8445 30.4309 31.7761 31.8539 33.3182C29.6963 34.9768 26.9948 35.9634 24.0642 35.9634C21.1336 35.9634 18.432 34.9768 16.2744 33.3182Z" fill="#CA3B8F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7473 24.4461C16.9349 24.4461 18.0725 23.9739 18.912 23.1344C19.7516 22.2949 20.2238 21.1572 20.2238 19.9696C20.2238 19.1288 20.2238 18.2483 20.2238 17.4075C20.2238 14.9338 18.2184 12.9285 15.7447 12.9285H15.7421C14.5545 12.9285 13.4169 13.4007 12.5774 14.2402C11.7378 15.0797 11.2656 16.2174 11.2656 17.405C11.2656 18.2458 11.2656 19.1262 11.2656 19.967C11.2656 22.4407 13.271 24.4461 15.7447 24.4461H15.7473V24.4461Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8252 16.7675C13.8252 16.0892 14.0952 15.4378 14.5751 14.9579C15.055 14.478 15.7064 14.208 16.3847 14.208C17.0629 14.208 17.7143 14.478 18.1942 14.9579C18.6741 15.4378 18.9441 16.0892 18.9441 16.7675C18.9441 17.9653 18.9441 19.3884 18.9441 20.5849C18.9441 21.2645 18.6741 21.9146 18.1942 22.3958C17.7143 22.8757 17.0629 23.1444 16.3847 23.1444C15.7064 23.1444 15.055 22.8757 14.5751 22.3958C14.0952 21.9146 13.8252 21.2645 13.8252 20.5849C13.8252 19.3884 13.8252 17.9653 13.8252 16.7675Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3789 24.4458C31.1913 24.4458 30.0536 23.9736 29.2141 23.1341C28.3746 22.2946 27.9023 21.1569 27.9023 19.9693C27.9023 19.1285 27.9023 18.2481 27.9023 17.4073C27.9023 14.9336 29.9077 12.9282 32.3814 12.9282H32.384C33.5716 12.9282 34.7093 13.4004 35.5488 14.24C36.3883 15.0795 36.8605 16.2171 36.8605 17.4047C36.8605 18.2455 36.8605 19.126 36.8605 19.9668C36.8605 22.4405 34.8551 24.4458 32.3814 24.4458H32.3789Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.3006 16.7675C34.3006 16.0892 34.0306 15.4378 33.5507 14.9579C33.0708 14.478 32.4194 14.208 31.7411 14.208C31.0629 14.208 30.4115 14.478 29.9316 14.9579C29.4517 15.4378 29.1816 16.0892 29.1816 16.7675C29.1816 17.9653 29.1816 19.3884 29.1816 20.5849C29.1816 21.2645 29.4517 21.9146 29.9316 22.3958C30.4115 22.8757 31.0629 23.1444 31.7411 23.1444C32.4194 23.1444 33.0708 22.8757 33.5507 22.3958C34.0306 21.9146 34.3006 21.2645 34.3006 20.5849C34.3006 19.3884 34.3006 17.9653 34.3006 16.7675Z" fill="black"/>
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M123 45C123 45 127.019 28.9275 129.02 20.922C129.669 18.3225 132.004 16.5 134.683 16.5H134.685C143.971 16.5 151.5 24.0285 151.5 33.315V33.3165C151.5 35.9955 149.678 38.331 147.078 38.9805C139.073 40.9815 123 45 123 45Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M142.5 25.5C142.5 25.5 145.146 24.177 147.568 22.9665C150.106 21.696 152.113 19.569 153.231 16.959C153.364 16.6485 153.501 16.332 153.636 16.0155C155.07 12.669 158.359 10.5 162 10.5" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M136.5 19.5C136.5 19.5 136.5 18.5295 136.5 17.49C136.5 15.9645 137.362 14.5695 138.727 13.887C138.727 13.8855 138.729 13.8855 138.731 13.8855C139.73 13.3845 140.49 12.5085 140.844 11.448C141.196 10.3875 141.116 9.2295 140.615 8.2305C140.013 7.026 139.5 6 139.5 6" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M150.75 30.75C150.75 30.75 151.517 30.75 152.417 30.75C154.28 30.75 156.117 31.1835 157.783 32.0175C159.421 32.8365 161.25 33.75 161.25 33.75" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 13.5L145.5 10.5L148.5 13.5L145.5 16.5L142.5 13.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M148.5 7.5L150 3L154.5 4.5L153 9L148.5 7.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M150 27L151.5 22.5L156 24L154.5 28.5L150 27Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 9L130.5 6L133.5 9L130.5 12L127.5 9Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M159 19.5L162 16.5L165 19.5L162 22.5L159 19.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 10.5L150 7.5H159V21H135V9L142.5 10.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M130.5 18.2695L149.734 37.504C149.014 38.206 148.107 38.728 147.078 38.9845C139.073 40.9855 123 45.004 123 45.004C123 45.004 127.019 28.9315 129.02 20.926C129.276 19.897 129.798 18.9895 130.5 18.2695Z" fill="#E4AB1B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M130.5 18.2655C131.571 17.166 133.065 16.5 134.683 16.5H134.685C143.971 16.5 151.5 24.0285 151.5 33.315V33.3165C151.5 34.935 150.834 36.429 149.734 37.5H148.5C143.725 37.5 139.148 35.604 135.773 32.2275C132.396 28.8525 130.5 24.2745 130.5 19.5V18.2655V18.2655Z" fill="#5E3D05"/>
-<path d="M142.5 25.5C142.5 25.5 145.146 24.177 147.568 22.9665C150.106 21.696 152.113 19.569 153.231 16.959C153.364 16.6485 153.501 16.332 153.636 16.0155C155.07 12.669 158.359 10.5 162 10.5" stroke="#37CBE8" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M136.5 19.5C136.5 19.5 136.5 18.5295 136.5 17.49C136.5 15.9645 137.362 14.5695 138.727 13.887C138.727 13.8855 138.729 13.8855 138.731 13.8855C139.73 13.3845 140.49 12.5085 140.844 11.448C141.196 10.3875 141.116 9.2295 140.615 8.2305C140.013 7.026 139.5 6 139.5 6" stroke="#F2C618" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M150.75 30.75C150.75 30.75 151.517 30.75 152.417 30.75C154.28 30.75 156.117 31.1835 157.783 32.0175C159.421 32.8365 161.25 33.75 161.25 33.75" stroke="#FF4586" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 13.5L145.5 10.5L148.5 13.5L145.5 16.5L142.5 13.5Z" fill="#9146DC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 9L130.5 6L133.5 9L130.5 12L127.5 9Z" fill="#9146DC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M159 19.5L162 16.5L165 19.5L162 22.5L159 19.5Z" fill="#9146DC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M148.5 7.5L150 3L154.5 4.5L153 9L148.5 7.5Z" fill="#F2298A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M150 27L151.5 22.5L156 24L154.5 28.5L150 27Z" fill="#F2C618"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5L105 43.5V45H93C93 45 87.5445 39.5445 85.9395 37.9395C85.6575 37.6575 85.5 37.2765 85.5 36.879C85.5 33.1425 85.5 13.5765 85.5 6C85.5 4.3425 86.8425 3 88.5 3C88.5 3 93.876 13.752 95.5245 17.0505C95.838 17.6745 96 18.363 96 19.062C96 22.71 96 34.5 96 34.5Z" stroke="black" stroke-width="6" stroke-miterlimit="2" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5L63 43.5V45H75C75 45 80.4555 39.5445 82.0605 37.9395C82.3425 37.6575 82.5 37.2765 82.5 36.879C82.5 33.1425 82.5 13.5765 82.5 6C82.5 4.3425 81.1575 3 79.5 3C79.5 3 74.124 13.752 72.4755 17.0505C72.162 17.6745 72 18.363 72 19.062C72 22.71 72 34.5 72 34.5Z" stroke="black" stroke-width="6" stroke-miterlimit="2" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5H75L78.75 38.25V41.25L75 45H63V43.5L72 34.5Z" fill="#CE8D15"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5H93L89.25 38.25V41.25L93 45H105V43.5L96 34.5Z" fill="#CE8D15"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5L78.75 41.25C78.75 41.25 81.0705 38.9295 82.0605 37.9395C82.3425 37.6575 82.5 37.2765 82.5 36.879C82.5 33.1425 82.5 13.5765 82.5 6C82.5 4.3425 81.1575 3 79.5 3C79.5 3 74.124 13.752 72.4755 17.0505C72.162 17.6745 72 18.363 72 19.062C72 22.71 72 34.5 72 34.5Z" fill="#FFC20B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.5 36H79.5C77.8425 36 76.5 34.6575 76.5 33C76.5 33 76.5 20.823 76.5 16.5C76.5 15.306 76.974 14.1615 77.8185 13.3185C78.6615 12.474 79.806 12 81 12L81.2235 12.006C82.335 12.06 83.391 12.5265 84.1815 13.3185C85.026 14.1615 85.5 15.306 85.5 16.5V33C85.5 34.6575 84.1575 36 82.5 36ZM79.5 33H82.5V16.5C82.5 16.1025 82.3425 15.72 82.0605 15.4395C81.78 15.1575 81.3975 15 81 15C80.6025 15 80.22 15.1575 79.9395 15.4395C79.6575 15.72 79.5 16.1025 79.5 16.5C79.5 20.823 79.5 33 79.5 33Z" fill="#765018"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M75 36V31.5H85.5V37.5H76.5L75 36Z" fill="#FFC20B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5L89.25 41.25C89.25 41.25 86.9295 38.9295 85.9395 37.9395C85.6575 37.6575 85.5 37.2765 85.5 36.879C85.5 33.1425 85.5 13.5765 85.5 6C85.5 4.3425 86.8425 3 88.5 3C88.5 3 93.876 13.752 95.5245 17.0505C95.838 17.6745 96 18.363 96 19.062C96 22.71 96 34.5 96 34.5Z" fill="#FFC20B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88.5 36C90.1575 36 91.5 34.6575 91.5 33C91.5 33 91.5 20.823 91.5 16.5C91.5 15.306 91.026 14.1615 90.1815 13.3185C89.3385 12.474 88.194 12 87 12C85.806 12 84.6615 12.474 83.8185 13.3185C82.974 14.1615 82.5 15.306 82.5 16.5C82.5 20.823 82.5 33 82.5 33C82.5 34.6575 83.8425 36 85.5 36H88.5ZM88.5 33V16.5C88.5 16.1025 88.3425 15.72 88.0605 15.4395C87.78 15.1575 87.3975 15 87 15C86.6025 15 86.22 15.1575 85.9395 15.4395C85.6575 15.72 85.5 16.1025 85.5 16.5V33H88.5Z" fill="#765018"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M91.5 37.5L93 36V31.5H82.5V37.5H91.5Z" fill="#FFC20B"/>
-<defs>
-<clipPath id="clip0">
-<rect width="48" height="48" fill="white" transform="translate(120)"/>
-</clipPath>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{fill-rule:evenodd}.C{stroke-linejoin:round}.D{stroke-width:6}.E{fill:#ffc20b}.F{stroke-miterlimit:1.5}.G{stroke-linecap:square}]]></style><path d="M46.654 31.489c0 3.014-.788 5.153-2.017 6.712-1.241 1.574-3.025 2.676-5.214 3.436-4.442 1.542-10.158 1.557-15.274 1.557s-10.909-.014-15.43-1.559c-2.23-.762-4.052-1.867-5.319-3.444-1.253-1.559-2.056-3.695-2.056-6.702 0-5.622 1.211-12.465 4.663-17.856 3.4-5.311 9.019-9.299 18.142-9.299 8.647 0 14.204 3.995 17.657 9.347 3.497 5.42 4.848 12.27 4.848 17.808z" fill="#fbc546" stroke="#000" stroke-width="2.69"/><g class="B"><path d="M16.273 33.318c-2.399-1.845-4.126-4.52-4.75-7.593h25.08c-.624 3.073-2.351 5.747-4.75 7.593-1.423-1.542-14.156-1.542-15.579 0z" fill="#722245"/><path d="M16.274 33.318a7.68 7.68 0 0 1 5.646-2.474h4.287a7.68 7.68 0 0 1 5.646 2.474 12.74 12.74 0 0 1-7.79 2.645 12.74 12.74 0 0 1-7.79-2.645z" fill="#ca3b8f"/><path d="M15.747 24.446c1.188 0 2.325-.472 3.165-1.312s1.312-1.977 1.312-3.165v-2.562a4.48 4.48 0 0 0-4.479-4.479h-.003c-1.188 0-2.325.472-3.165 1.312s-1.312 1.977-1.312 3.165v2.562a4.48 4.48 0 0 0 4.479 4.479h.003 0z" fill="#fff"/><path d="M13.825 16.768a2.56 2.56 0 0 1 2.559-2.559 2.56 2.56 0 0 1 2.559 2.559v3.817c0 .68-.27 1.33-.75 1.811a2.56 2.56 0 0 1-3.619 0c-.48-.481-.75-1.131-.75-1.811v-3.817z" fill="#000"/><path d="M32.379 24.446c-1.188 0-2.325-.472-3.165-1.312s-1.312-1.977-1.312-3.165v-2.562a4.48 4.48 0 0 1 4.479-4.479h.003c1.188 0 2.325.472 3.165 1.312s1.312 1.977 1.312 3.165v2.562a4.48 4.48 0 0 1-4.479 4.479h-.002z" fill="#fff"/><path d="M34.301 16.768a2.56 2.56 0 0 0-2.56-2.559 2.56 2.56 0 0 0-2.559 2.559v3.817c0 .68.27 1.33.75 1.811a2.56 2.56 0 0 0 3.619 0c.48-.481.75-1.131.75-1.811v-3.817z" fill="#000"/></g><g clip-path="url(#A)"><g stroke="#000" class="C F"><path d="M123 45l6.02-24.078c.649-2.599 2.984-4.422 5.663-4.422h.002A16.82 16.82 0 0 1 151.5 33.315v.002c0 2.679-1.822 5.015-4.422 5.664L123 45z" class="D"/><g stroke-width="9" class="G"><use xlink:href="#B"/><use xlink:href="#C"/><path d="M150.75 30.75h1.667c1.863 0 3.7.433 5.366 1.267l3.467 1.733"/></g><g class="D"><path d="M142.5 13.5l3-3 3 3-3 3-3-3zm6-6L150 3l4.5 1.5L153 9l-4.5-1.5zM150 27l1.5-4.5L156 24l-1.5 4.5L150 27zM127.5 9l3-3 3 3-3 3-3-3zM159 19.5l3-3 3 3-3 3-3-3z"/></g></g><g class="B"><path d="M142.5 10.5l7.5-3h9V21h-24V9l7.5 1.5z" fill="#000"/><path d="M130.5 18.27l19.234 19.234a5.81 5.81 0 0 1-2.656 1.48L123 45.004l6.02-24.078a5.81 5.81 0 0 1 1.48-2.656z" fill="#e4ab1b"/><path d="M130.5 18.266c1.071-1.099 2.565-1.765 4.183-1.765h.002A16.82 16.82 0 0 1 151.5 33.315v.002c0 1.619-.666 3.113-1.766 4.184H148.5a17.99 17.99 0 0 1-18-18v-1.235h0z" fill="#5e3d05"/></g><g stroke-width="3" class="C F G"><use xlink:href="#B" stroke="#37cbe8"/><use xlink:href="#C" stroke="#f2c618"/><path d="M150.75 30.75h1.667c1.863 0 3.7.433 5.366 1.267l3.467 1.733" stroke="#ff4586"/></g><g class="B"><g fill="#9146dc"><path d="M142.5 13.5l3-3 3 3-3 3-3-3zm-15-4.5l3-3 3 3-3 3-3-3zM159 19.5l3-3 3 3-3 3-3-3z"/></g><path d="M148.5 7.5L150 3l4.5 1.5L153 9l-4.5-1.5z" fill="#f2298a"/><path d="M150 27l1.5-4.5L156 24l-1.5 4.5L150 27z" fill="#f2c618"/></g></g><path d="M96 34.5l9 9V45H93l-7.061-7.06a1.5 1.5 0 0 1-.439-1.061V6a3 3 0 0 1 3-3l7.025 14.051A4.48 4.48 0 0 1 96 19.062V34.5zm-24 0l-9 9V45h12l7.061-7.06a1.5 1.5 0 0 0 .439-1.061V6a3 3 0 0 0-3-3l-7.025 14.051A4.48 4.48 0 0 0 72 19.062V34.5z" stroke="#000" stroke-miterlimit="2" class="C D"/><g class="B"><path d="M72 34.5h3l3.75 3.75v3L75 45H63v-1.5l9-9zm24 0h-3l-3.75 3.75v3L93 45h12v-1.5l-9-9z" fill="#ce8d15"/><path d="M72 34.5l6.75 6.75 3.311-3.31a1.5 1.5 0 0 0 .439-1.061V6a3 3 0 0 0-3-3l-7.025 14.051A4.48 4.48 0 0 0 72 19.062V34.5z" class="E"/><path d="M82.5 36h-3a3 3 0 0 1-3-3V16.5c0-1.194.474-2.338 1.319-3.181S79.806 12 81 12l.224.006a4.49 4.49 0 0 1 2.958 1.313c.844.843 1.319 1.987 1.319 3.182V33a3 3 0 0 1-3 3zm-3-3h3V16.5c0-.398-.157-.78-.439-1.06S81.398 15 81 15s-.78.158-1.061.44-.439.663-.439 1.06V33z" fill="#765018"/><g class="E"><path d="M75 36v-4.5h10.5v6h-9L75 36z"/><path d="M96 34.5l-6.75 6.75-3.311-3.31a1.5 1.5 0 0 1-.439-1.061V6a3 3 0 0 1 3-3l7.025 14.051A4.48 4.48 0 0 1 96 19.062V34.5z"/></g><path d="M88.5 36a3 3 0 0 0 3-3V16.5c0-1.194-.474-2.338-1.319-3.181S88.194 12 87 12s-2.338.474-3.181 1.319S82.5 15.306 82.5 16.5V33a3 3 0 0 0 3 3h3zm0-3V16.5c0-.398-.157-.78-.439-1.06S87.398 15 87 15s-.78.158-1.061.44-.439.663-.439 1.06V33h3z" fill="#765018"/><path d="M91.5 37.5L93 36v-4.5H82.5v6h9z" class="E"/></g><defs><clipPath id="A"><path fill="#fff" transform="translate(120)" d="M0 0h48v48H0z"/></clipPath><path id="B" d="M142.5 25.5l5.068-2.533c2.538-1.27 4.545-3.398 5.663-6.007l.405-.944A9.1 9.1 0 0 1 162 10.5"/><path id="C" d="M136.5 19.5v-2.01a4.03 4.03 0 0 1 2.227-3.603c1.003-.503 1.763-1.379 2.117-2.439s.272-2.219-.229-3.218L139.5 6"/></defs></svg>
\ No newline at end of file

src/pages/settings/assets/noto_emoji.svg

-<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M122.794 46.2263C123.645 47.1488 127.152 45.5401 129.919 44.2501C131.993 43.2863 140.292 39.8813 144.417 38.1151C145.53 37.6388 147.15 37.0163 148.317 35.4826C149.352 34.1176 152.097 28.3201 146.569 22.4476C140.959 16.4851 135.18 18.1313 133.02 19.6613C131.749 20.5613 130.714 22.5901 130.249 23.6213C128.284 27.9788 125.483 35.9626 124.343 39.1013C123.507 41.4151 121.95 45.3113 122.794 46.2263Z" fill="#FFC107"/>
-<path d="M129.694 24.9338C129.746 25.5863 129.878 26.6476 130.328 28.6913C130.635 30.0938 131.138 31.5638 131.546 32.5351C132.773 35.4563 134.494 36.6338 136.238 37.5788C139.2 39.1838 141.214 39.4838 141.214 39.4838L138.799 40.4701C138.799 40.4701 137.336 40.1663 135.341 39.1838C133.44 38.2463 131.46 36.6601 130.013 33.5551C129.386 32.2088 129.023 30.9038 128.813 29.8688C128.554 28.5863 128.513 27.8588 128.513 27.8588L129.694 24.9338Z" fill="#FF8F00"/>
-<path d="M126.728 32.5388C126.728 32.5388 127.028 34.9726 129.038 38.0438C131.393 41.6363 134.682 42.2251 134.682 42.2251L132.496 43.1251C132.496 43.1251 130.055 42.3788 127.733 39.2101C126.286 37.2338 125.881 34.8713 125.881 34.8713L126.728 32.5388Z" fill="#FF8F00"/>
-<path d="M124.647 38.3062C124.647 38.3062 125.194 40.4062 126.394 41.9737C127.823 43.8449 129.642 44.3887 129.642 44.3887L127.965 45.1312C127.965 45.1312 126.694 44.8649 125.303 43.1024C124.245 41.7637 123.945 40.2262 123.945 40.2262L124.647 38.3062Z" fill="#FF8F00"/>
-<g opacity="0.44">
-<path opacity="0.44" d="M123.735 43.6387C123.66 43.4699 123.66 43.2787 123.739 43.1137L133.29 23.3062L134.862 29.2124L124.812 43.7287C124.542 44.1337 123.934 44.0812 123.735 43.6387Z" fill="#FFFDE7"/>
-</g>
-<path d="M135.619 31.1964C140.082 36.4164 145.163 35.7639 146.854 34.4439C148.549 33.1202 149.888 28.5714 145.444 23.4377C140.787 18.0602 135.514 19.5939 134.296 20.7564C133.077 21.9189 131.524 26.4077 135.619 31.1964Z" fill="url(#paint0_linear)"/>
-<path d="M150.945 33.3449C149.318 31.9799 148.451 32.2237 147.289 32.7074C145.789 33.3299 143.43 33.7912 140.228 32.7074L141.191 30.3862C143.093 31.0274 144.469 30.7162 145.658 30.0149C147.188 29.1149 149.28 27.8812 152.535 30.6149C153.893 31.7549 155.284 32.5124 156.304 32.1674C157.046 31.9199 157.44 30.8137 157.639 29.9324C157.658 29.8537 157.688 29.6287 157.71 29.4299C157.89 28.0537 158.19 25.0837 160.403 23.5649C162.769 21.9412 165.255 21.9412 165.255 21.9412L165.705 26.4112C164.561 26.2424 163.766 26.4749 163.095 26.8462C160.568 28.2524 162.769 33.6524 158.835 35.4674C155.051 37.2262 151.958 34.1924 150.945 33.3449Z" fill="#03A9F4"/>
-<path d="M137.025 27.645L135.397 26.1863C138.386 22.8488 137.599 20.3963 137.025 18.6113C136.909 18.2513 136.8 17.91 136.729 17.5837C136.474 16.4287 136.421 15.4238 136.5 14.5463C135.352 13.1175 134.846 11.6212 134.812 11.52C134.115 9.40875 134.64 7.35 135.844 5.41875C138.277 1.5 142.684 1.5 142.684 1.5L144.154 5.43375C143.036 5.38875 139.372 5.445 138.247 7.21875C136.826 9.45375 137.76 10.8337 137.827 10.9912C138.101 10.635 138.379 10.35 138.626 10.1288C140.422 8.535 141.982 8.30625 142.976 8.39625C144.094 8.4975 145.106 9.06 145.83 9.9825C146.621 10.995 146.947 12.3113 146.696 13.5075C146.452 14.6738 145.676 15.66 144.51 16.2863C142.474 17.3813 140.779 17.2312 139.642 16.8525C139.65 16.8787 139.654 16.9087 139.661 16.935C139.702 17.1225 139.785 17.385 139.882 17.6887C140.546 19.7437 141.78 23.0063 137.025 27.645ZM139.781 13.5712C139.999 13.7287 140.227 13.86 140.464 13.9537C141.251 14.2687 142.11 14.1637 143.085 13.6387C143.659 13.3312 143.726 13.0013 143.749 12.8925C143.816 12.5663 143.704 12.15 143.46 11.8387C143.246 11.565 142.999 11.4225 142.702 11.3925C142.14 11.3437 141.379 11.7 140.617 12.3787C140.254 12.705 139.976 13.1062 139.781 13.5712Z" fill="#F44336"/>
-<path d="M143.539 28.2563L141.21 28.1925C141.21 28.1925 142.316 21.945 145.897 20.895C146.569 20.7 147.304 20.5013 148.042 20.3925C148.481 20.325 149.175 20.2238 149.516 20.0963C149.595 19.5075 149.347 18.7575 149.07 17.9063C148.852 17.2463 148.627 16.5675 148.507 15.825C148.275 14.3775 148.661 13.0988 149.595 12.2175C150.735 11.1488 152.576 10.8075 154.654 11.28C155.839 11.55 156.712 12.1313 157.481 12.6413C158.58 13.3725 159.221 13.7438 160.564 12.84C162.187 11.745 160.065 7.45876 158.936 4.98376L163.147 3.22876C163.714 4.46626 166.447 10.8338 164.644 14.4675C164.036 15.69 162.99 16.5 161.617 16.8038C158.632 17.4713 156.885 16.3088 155.61 15.4613C155.006 15.06 154.477 14.745 153.904 14.58C149.917 13.4438 155.482 19.3088 152.876 21.945C151.312 23.5238 147.491 23.94 147.244 24C144.784 24.5925 143.539 28.2563 143.539 28.2563Z" fill="#F48FB1"/>
-<path d="M136.497 14.5464C136.426 15.3714 136.392 15.8626 136.606 16.9351C137.637 17.6926 139.883 17.6926 139.883 17.6926C139.786 17.3889 139.699 17.1264 139.662 16.9389C139.654 16.9126 139.651 16.8826 139.643 16.8564C137.359 15.7164 136.497 14.5464 136.497 14.5464Z" fill="#C92B27"/>
-<path d="M131.825 18.2401L127.947 16.3388L129.879 13.5488L132.92 15.5626L131.825 18.2401Z" fill="#FFC107"/>
-<path d="M126.109 12.975C124.129 12.7087 122.112 11.0287 121.891 10.8375L123.837 8.55371C124.426 9.05246 125.674 9.88871 126.511 10.0012L126.109 12.975Z" fill="#FB8C00"/>
-<path d="M129.604 7.97611L126.754 7.04236C127.08 6.04486 127.166 4.96861 126.998 3.92986L129.96 3.45361C130.204 4.96111 130.08 6.52486 129.604 7.97611Z" fill="#03A9F4"/>
-<path d="M150.334 5.10573L147.403 5.74683L148.25 9.61535L151.18 8.97425L150.334 5.10573Z" fill="#FB8C00"/>
-<path d="M154.673 6.66367L152.61 4.48492C153.69 3.46117 153.938 2.12242 153.938 2.10742L156.9 2.59117C156.863 2.82742 156.484 4.94992 154.673 6.66367Z" fill="#FFC107"/>
-<path d="M158.439 17.3992L155.819 18.218L156.714 21.0815L159.334 20.2627L158.439 17.3992Z" fill="#FB8C00"/>
-<path d="M156.582 42.3863L153.601 42.0338C153.728 40.9725 152.937 39.6713 152.72 39.3825L155.12 37.5825C155.3 37.8188 156.863 39.9825 156.582 42.3863Z" fill="#F44336"/>
-<path d="M165.139 38.5839C164.018 38.4151 162.87 38.3476 161.738 38.3889L161.637 35.3889C162.953 35.3439 164.284 35.4189 165.585 35.6176L165.139 38.5839Z" fill="#FB8C00"/>
-<path d="M163.213 40.5786L161.105 42.7134L164.006 45.5774L166.114 43.4426L163.213 40.5786Z" fill="#F48FB1"/>
-<path d="M157.08 26.2273L154.912 23.749L152.434 25.9165L154.601 28.3947L157.08 26.2273Z" fill="#F44336"/>
-<g clip-path="url(#clip0)">
-<path d="M66.7683 34.2337C66.7496 34.2187 66.7308 34.2037 66.7121 34.1924C66.5921 34.1212 66.5208 34.0124 66.4946 33.8849C66.4721 33.7574 66.5021 33.6224 66.5808 33.4949C67.4508 33.0824 73.8558 30.0262 75.4383 28.5899C75.8471 28.2187 76.0421 27.2812 76.4058 25.3724C76.4883 24.9374 76.5783 24.4724 76.6758 23.9812C76.7696 23.5274 77.0171 22.6874 77.2758 21.7987C77.6321 20.5874 77.9996 19.3387 78.1233 18.5999C79.1508 12.3862 80.0058 4.68369 80.0133 4.60869C80.1521 3.26994 80.4446 1.90869 81.5321 1.90869C82.8146 1.90869 83.7108 2.71494 83.7108 3.87369L83.7896 33.5099C83.7896 35.6324 82.9833 35.9399 82.0496 36.2962C81.5246 36.4949 80.9321 36.7237 80.5121 37.2824C79.6533 38.4299 78.7346 39.9524 77.8458 41.4262C77.4671 42.0524 77.0808 42.6974 76.7021 43.3012L66.7683 34.2337V34.2337Z" fill="url(#paint1_radial)"/>
-<path d="M81.536 2.28003C82.616 2.28003 83.3398 2.91753 83.3398 3.87003L83.4185 33.5025C83.4185 35.3663 82.8223 35.595 81.9185 35.94C81.3485 36.1575 80.6998 36.405 80.216 37.05C79.346 38.2125 78.4235 39.7425 77.531 41.2275C77.231 41.7225 76.9273 42.2288 76.6273 42.7163L67.0273 33.9563C66.9935 33.9263 66.956 33.8963 66.9148 33.87C66.881 33.8513 66.8735 33.8325 66.8735 33.8138C66.8698 33.8025 66.8698 33.7875 66.8735 33.7725C68.111 33.1838 74.141 30.2813 75.6973 28.8675C76.196 28.4138 76.391 27.4913 76.781 25.4438C76.8635 25.0125 76.9535 24.5438 77.051 24.0563C77.141 23.6175 77.3848 22.785 77.6435 21.9075C78.0035 20.685 78.3748 19.425 78.4985 18.66C79.526 12.435 80.381 4.72503 80.3923 4.64253C80.5648 2.98503 80.906 2.28003 81.536 2.28003V2.28003ZM81.536 1.53003C80.0473 1.53003 79.7735 3.35628 79.646 4.56378C79.646 4.56378 78.7948 12.2588 77.7598 18.5363C77.5498 19.8075 76.5335 22.8263 76.316 23.9063C75.8548 26.1713 75.6185 27.9225 75.191 28.3125C73.5523 29.8013 66.3373 33.195 66.3373 33.195C65.9848 33.6413 66.0635 34.23 66.5173 34.5075L76.781 43.875C78.0935 41.8125 79.5223 39.225 80.8123 37.5C81.8435 36.12 84.1648 37.125 84.1648 33.5025L84.086 3.87003C84.086 2.58003 83.1185 1.53003 81.536 1.53003V1.53003Z" fill="#EDA600"/>
-<path d="M77.838 48.9976L58.9043 48.7876L59.1143 34.23L71.0168 28.8863C71.5755 28.6388 72.2243 28.95 72.3743 29.5425C72.7305 30.9338 73.5593 33.4013 75.3743 35.8763C77.0843 38.2088 78.9293 40.0088 80.0768 41.0363C80.7368 41.6288 80.9243 42.585 80.5305 43.38L75.9705 46.8863L77.838 48.9976V48.9976Z" fill="url(#paint2_linear)"/>
-<path d="M79.7246 6.75003C79.7246 6.75003 80.0321 4.81128 81.7946 4.81128C83.5571 4.81128 83.6771 6.75003 83.6771 6.75003" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M79.166 11.6251C79.166 11.6251 79.5523 9.50635 81.4198 9.50635C83.2873 9.50635 83.7148 11.6251 83.7148 11.6251" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<g opacity="0.2">
-<path opacity="0.2" d="M71.3282 29.9813C71.7032 31.3875 72.5845 33.9713 74.467 36.54C76.207 38.91 78.0707 40.7475 79.327 41.8725C79.552 42.075 79.6495 42.3825 79.5932 42.6713L75.3107 45.795C75.0595 45.9788 74.8982 46.2525 74.857 46.56C74.8157 46.8675 74.9057 47.175 75.1007 47.415L75.4532 47.8463L60.052 47.6738L60.2357 34.965L71.3282 29.9813V29.9813ZM71.422 28.8C71.287 28.8 71.152 28.8263 71.0207 28.8863L59.1182 34.23L58.9082 48.7875L77.842 48.9975L75.9707 46.7025L80.5307 43.38C80.9245 42.585 80.7407 41.625 80.077 41.0363C78.9295 40.0088 77.0882 38.2125 75.3745 35.8763C73.5595 33.405 72.7307 30.9375 72.3745 29.5425C72.262 29.0888 71.8532 28.8 71.422 28.8V28.8Z" fill="#424242"/>
-</g>
-<path d="M91.1207 43.2974C90.7457 42.6937 90.3557 42.0487 89.977 41.4224C89.0882 39.9487 88.1695 38.4224 87.3107 37.2787C86.8907 36.7199 86.2982 36.4912 85.7732 36.2924C84.8395 35.9362 84.0332 35.6287 84.0332 33.5062L84.112 3.87369C84.112 2.71494 85.0082 1.90869 86.2907 1.90869C87.3782 1.90869 87.667 3.27369 87.8095 4.60869C87.817 4.68744 88.672 12.3899 89.6995 18.6037C89.8195 19.3424 90.1907 20.5949 90.547 21.8024C90.8095 22.6912 91.057 23.5312 91.147 23.9849C91.2482 24.4762 91.3382 24.9449 91.4207 25.3799C91.7845 27.2887 91.9795 28.2224 92.3882 28.5937C93.967 30.0299 100.376 33.0862 101.246 33.4987C101.324 33.6224 101.354 33.7574 101.332 33.8849C101.309 34.0124 101.234 34.1212 101.114 34.1924C101.096 34.2037 101.077 34.2187 101.058 34.2337L91.1207 43.2974V43.2974Z" fill="url(#paint3_radial)"/>
-<path d="M86.2878 2.28003C86.9178 2.28003 87.259 2.98878 87.4353 4.64628C87.4428 4.72503 88.3015 12.435 89.329 18.66C89.4528 19.4213 89.8278 20.685 90.184 21.9038C90.4428 22.785 90.6865 23.6138 90.7765 24.0525C90.8778 24.5438 90.964 25.0088 91.0465 25.44C91.4365 27.4875 91.6315 28.41 92.1303 28.8638C93.6865 30.2813 99.7165 33.18 100.954 33.7688C100.958 33.7838 100.958 33.7988 100.954 33.81C100.95 33.825 100.943 33.8438 100.913 33.8663C100.872 33.8925 100.834 33.9188 100.8 33.9525L91.2003 42.7125C90.9003 42.225 90.5965 41.7188 90.2965 41.2238C89.404 39.7425 88.4778 38.2088 87.6115 37.0463C87.1278 36.4013 86.479 36.1538 85.909 35.9363C85.0053 35.5913 84.409 35.3625 84.409 33.5025L84.4878 3.86628C84.484 2.91753 85.2115 2.28003 86.2878 2.28003V2.28003ZM86.2878 1.53003C84.7053 1.53003 83.734 2.58003 83.734 3.87003L83.6553 33.5025C83.6553 37.125 85.9765 36.12 87.0078 37.5C88.2978 39.225 89.7265 41.8125 91.039 43.875L101.303 34.5113C101.757 34.2338 101.839 33.645 101.483 33.1988C101.483 33.1988 94.2678 29.805 92.629 28.3163C92.2015 27.9263 91.9653 26.175 91.504 23.91C91.2865 22.83 90.2703 19.8113 90.0603 18.54C89.0253 12.2625 88.174 4.56753 88.174 4.56753C88.054 3.35628 87.7765 1.53003 86.2878 1.53003V1.53003Z" fill="#EDA600"/>
-<path d="M89.981 48.9976L108.915 48.7876L108.705 34.23L96.8022 28.8863C96.2435 28.6388 95.5947 28.95 95.4447 29.5425C95.0885 30.9338 94.2597 33.4013 92.4447 35.8763C90.7347 38.2088 88.8897 40.0088 87.7422 41.0363C87.0822 41.6288 86.8947 42.585 87.2885 43.38L91.8485 46.8863L89.981 48.9976V48.9976Z" fill="url(#paint4_linear)"/>
-<path d="M88.099 6.75003C88.099 6.75003 87.7915 4.81128 86.029 4.81128C84.2665 4.81128 84.1465 6.75003 84.1465 6.75003" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M88.6571 11.6251C88.6571 11.6251 88.2709 9.50635 86.4034 9.50635C84.5321 9.50635 84.1084 11.6251 84.1084 11.6251" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<g opacity="0.2">
-<path opacity="0.2" d="M96.4947 29.9813L107.591 34.9613L107.775 47.67L92.3735 47.8425L92.726 47.4113C92.921 47.1713 93.011 46.8638 92.9697 46.5563C92.9285 46.2488 92.7672 45.975 92.516 45.7913L88.2335 42.6675C88.1772 42.3788 88.2747 42.0713 88.4997 41.8688C89.756 40.7438 91.6197 38.9063 93.3597 36.5363C95.2385 33.9713 96.1197 31.3875 96.4947 29.9813V29.9813ZM96.401 28.8C95.966 28.8 95.561 29.0888 95.4447 29.5425C95.0885 30.9338 94.2597 33.4013 92.4447 35.8763C90.7347 38.2088 88.8897 40.0088 87.7422 41.0363C87.0822 41.6288 86.8947 42.585 87.2885 43.38L91.8485 46.7025L89.9772 48.9975L108.911 48.7875L108.701 34.23L96.8022 28.8863C96.671 28.8263 96.536 28.8 96.401 28.8V28.8Z" fill="#424242"/>
-</g>
-</g>
-<path d="M23.707 44.55C13.2445 44.55 1.95703 37.9875 1.95703 23.5875C1.95703 9.1875 13.2445 2.625 23.707 2.625C29.5195 2.625 34.882 4.5375 38.857 8.025C43.1695 11.85 45.457 17.25 45.457 23.5875C45.457 29.925 43.1695 35.2875 38.857 39.1125C34.8745 42.6 29.482 44.55 23.707 44.55Z" fill="url(#paint5_radial)"/>
-<path d="M16.5 15.3525C14.9287 15.3525 13.5 16.68 13.5 18.885C13.5 21.09 14.9287 22.4138 16.5 22.4138C18.075 22.4138 19.5 21.0863 19.5 18.885C19.5 16.6838 18.09 15.3525 16.5 15.3525Z" fill="#422B0D"/>
-<path d="M16.369 16.8263C15.8365 16.5713 15.1953 16.7963 14.9365 17.3288C14.7378 17.745 14.8278 18.2438 15.1615 18.5663C15.694 18.8213 16.3353 18.5963 16.594 18.0638C16.7928 17.6475 16.7028 17.1488 16.369 16.8263Z" fill="#896024"/>
-<path d="M30.8994 15.3525C29.3282 15.3525 27.8994 16.68 27.8994 18.885C27.8994 21.09 29.3282 22.4138 30.8994 22.4138C32.4707 22.4138 33.8994 21.0863 33.8994 18.885C33.8994 16.6838 32.4707 15.3525 30.8994 15.3525Z" fill="#422B0D"/>
-<path d="M30.7499 16.8263C30.2174 16.5713 29.5762 16.7963 29.3174 17.3288C29.1187 17.745 29.2087 18.2438 29.5424 18.5663C30.0749 18.8213 30.7162 18.5963 30.9749 18.0638C31.1737 17.6475 31.0837 17.1488 30.7499 16.8263Z" fill="#896024"/>
-<path d="M41.8085 11.1262C43.8072 14.3512 44.8497 18.1912 44.8497 22.4625C44.8497 28.8 42.5622 34.1625 38.2497 37.9875C34.2747 41.475 28.8747 43.425 23.0997 43.425C16.3272 43.425 9.22473 40.6687 5.03223 34.8225C9.06723 41.445 16.6572 44.55 23.8497 44.55C29.6247 44.55 35.0247 42.6 38.9997 39.1125C43.3122 35.2875 45.5997 29.925 45.5997 23.5875C45.5997 18.81 44.2985 14.565 41.8085 11.1262Z" fill="#EB8F00"/>
-<path d="M38.2761 26.8576C37.7511 25.9088 36.6111 25.4926 35.5986 25.8751C31.7511 26.9963 27.7611 27.5551 23.7523 27.5363C19.7436 27.5551 15.7536 26.9963 11.9061 25.8751C10.8973 25.4926 9.75731 25.9051 9.23231 26.8501C8.72231 27.7913 9.08981 28.8826 9.52106 29.8238C11.9286 35.1113 17.2348 38.2763 23.7223 38.2951H23.7823C30.2698 38.2951 35.5761 35.1113 37.9873 29.8238C38.4148 28.8751 38.7861 27.7988 38.2761 26.8576Z" fill="#422B0D"/>
-<path d="M29.7559 36.8024C29.6171 36.6749 29.4746 36.5586 29.3321 36.4274C27.8021 35.0811 25.8221 34.3574 23.7821 34.3986C21.6821 34.3649 19.6384 35.0624 17.9996 36.3749C17.8571 36.4911 17.7071 36.6036 17.5684 36.7499C17.4296 36.8961 17.3546 37.0011 17.2646 37.1249C19.3271 37.9311 21.5246 38.3436 23.7409 38.3324H23.8009C25.9234 38.3324 28.0271 37.9536 30.0146 37.2074C29.9396 37.0649 29.8534 36.9299 29.7559 36.8024Z" fill="#ED7770"/>
-<path d="M35.5993 25.8749C31.7518 26.9962 27.7618 27.5549 23.753 27.5362C19.7443 27.5549 15.7543 26.9962 11.9068 25.8749C10.898 25.4924 9.75805 25.9049 9.23305 26.8499C9.15805 26.9924 9.09805 27.1424 9.06055 27.2962C9.1843 27.3599 9.3268 27.4237 9.49555 27.4912C14.0105 29.7524 19.0018 30.8999 24.0493 30.8399C28.8905 30.8962 33.6755 29.8424 38.048 27.7649C38.2243 27.6899 38.3705 27.6187 38.5018 27.5512C38.4718 27.3074 38.393 27.0674 38.2768 26.8499C37.7518 25.9049 36.6118 25.4887 35.5993 25.8749Z" fill="white"/>
-<path d="M38.2911 26.8613C37.7586 25.9126 36.6148 25.4926 35.5948 25.8751C31.7473 26.9963 27.7573 27.5551 23.7523 27.5363C19.7436 27.5551 15.7536 26.9963 11.9061 25.8751C10.8973 25.4926 9.75731 25.9051 9.23231 26.8501C8.72231 27.7913 9.08981 28.8826 9.52106 29.8238C9.71231 30.2476 9.92606 30.6638 10.1623 31.0651C10.1623 31.0651 9.37481 28.1476 10.0573 27.3001C10.2898 26.9401 10.6798 26.7151 11.1073 26.6926C11.2836 26.6926 11.4561 26.7226 11.6248 26.7751C15.5398 27.9263 19.6011 28.5076 23.6848 28.5001H23.8161C27.8998 28.5076 31.9611 27.9263 35.8761 26.7751C36.0448 26.7226 36.2173 26.6926 36.3936 26.6926C36.8211 26.7151 37.2148 26.9401 37.4473 27.3001C38.1411 28.1476 37.3423 31.0763 37.3423 31.0763C37.5748 30.6751 37.8073 30.2626 38.0023 29.8351C38.4298 28.8938 38.8011 27.8063 38.2911 26.8613Z" fill="#EB8F00"/>
-<defs>
-<linearGradient id="paint0_linear" x1="147.895" y1="23.1896" x2="136.732" y2="29.8873" gradientUnits="userSpaceOnUse">
-<stop offset="0.0235" stop-color="#8F4700"/>
-<stop offset="1" stop-color="#703E2D"/>
-</linearGradient>
-<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(79.3273 14.9794) scale(16.2763 24.2983)">
-<stop offset="0.3533" stop-color="#FFCA28"/>
-<stop offset="0.8723" stop-color="#FFB300"/>
-</radialGradient>
-<linearGradient id="paint2_linear" x1="58.9068" y1="38.8988" x2="80.7338" y2="38.8988" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2196F3"/>
-<stop offset="1" stop-color="#64B5F6"/>
-</linearGradient>
-<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(88.4879 14.9794) rotate(180) scale(16.2763 24.2983)">
-<stop offset="0.3533" stop-color="#FFCA28"/>
-<stop offset="0.8723" stop-color="#FFB300"/>
-</radialGradient>
-<linearGradient id="paint4_linear" x1="108.915" y1="38.8988" x2="87.0897" y2="38.8988" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2196F3"/>
-<stop offset="1" stop-color="#64B5F6"/>
-</linearGradient>
-<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.707 23.5875) scale(21.3599)">
-<stop offset="0.5" stop-color="#FDE030"/>
-<stop offset="0.92" stop-color="#F7C02B"/>
-<stop offset="1" stop-color="#F4A223"/>
-</radialGradient>
-<clipPath id="clip0">
-<rect width="48" height="48" fill="white" transform="translate(60)"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><path d="M122.794 46.226c.851.922 4.358-.686 7.125-1.976 2.074-.964 10.373-4.369 14.498-6.135 1.113-.476 2.733-1.099 3.9-2.633 1.035-1.365 3.78-7.162-1.748-13.035-5.61-5.963-11.389-4.316-13.549-2.786-1.271.9-2.306 2.929-2.771 3.96-1.965 4.357-4.766 12.341-5.906 15.48-.836 2.314-2.393 6.21-1.549 7.125z" fill="#ffc107"/><path d="M129.694 24.934c.052.652.184 1.714.634 3.757.307 1.403.81 2.873 1.218 3.844 1.227 2.921 2.948 4.099 4.692 5.044 2.962 1.605 4.976 1.905 4.976 1.905l-2.415.986s-1.463-.304-3.458-1.286c-1.901-.937-3.881-2.524-5.328-5.629-.627-1.346-.99-2.651-1.2-3.686-.259-1.282-.3-2.01-.3-2.01l1.181-2.925zm-2.966 7.605s.3 2.434 2.31 5.505c2.355 3.593 5.644 4.181 5.644 4.181l-2.186.9s-2.441-.746-4.763-3.915c-1.447-1.976-1.852-4.339-1.852-4.339l.847-2.332zm-2.081 5.767s.547 2.1 1.747 3.668c1.429 1.871 3.248 2.415 3.248 2.415l-1.677.742s-1.271-.266-2.662-2.029c-1.058-1.339-1.358-2.876-1.358-2.876l.702-1.92z" fill="#ff8f00"/><path opacity=".194" d="M123.735 43.639c-.075-.169-.075-.36.004-.525l9.551-19.807 1.572 5.906-10.05 14.516a.62.62 0 0 1-1.077-.09z" fill="#fffde7"/><path d="M135.619 31.196c4.463 5.22 9.544 4.567 11.235 3.247s3.034-5.872-1.41-11.006c-4.657-5.378-9.93-3.844-11.148-2.681s-2.772 5.651 1.323 10.44z" fill="url(#A)"/><path d="M150.945 33.345c-1.627-1.365-2.494-1.121-3.656-.638-1.5.623-3.859 1.084-7.061 0l.963-2.321c1.902.641 3.278.33 4.467-.371 1.53-.9 3.622-2.134 6.877.6 1.358 1.14 2.749 1.898 3.769 1.553.742-.248 1.136-1.354 1.335-2.235.019-.079.049-.304.071-.503.18-1.376.48-4.346 2.693-5.865 2.366-1.624 4.852-1.624 4.852-1.624l.45 4.47c-1.144-.169-1.939.064-2.61.435-2.527 1.406-.326 6.806-4.26 8.621-3.784 1.759-6.877-1.275-7.89-2.122z" fill="#03a9f4"/><path d="M137.025 27.645l-1.628-1.459c2.989-3.337 2.202-5.79 1.628-7.575l-.296-1.028c-.255-1.155-.308-2.16-.229-3.037-1.148-1.429-1.654-2.925-1.688-3.026-.697-2.111-.172-4.17 1.032-6.101 2.433-3.919 6.84-3.919 6.84-3.919l1.47 3.934c-1.118-.045-4.782.011-5.907 1.785-1.421 2.235-.487 3.615-.42 3.772a6.38 6.38 0 0 1 .799-.862c1.796-1.594 3.356-1.823 4.35-1.733 1.118.101 2.13.664 2.854 1.586.791 1.012 1.117 2.329.866 3.525-.244 1.166-1.02 2.153-2.186 2.779-2.036 1.095-3.731.945-4.868.566.008.026.012.056.019.082.041.188.124.45.221.754.664 2.055 1.898 5.318-2.857 9.956zm2.756-14.074c.218.158.446.289.683.383.787.315 1.646.21 2.621-.315.574-.307.641-.637.664-.746.067-.326-.045-.742-.289-1.054-.214-.274-.461-.416-.758-.446-.562-.049-1.323.307-2.085.986-.363.326-.641.727-.836 1.192z" fill="#f44336"/><path d="M143.539 28.256l-2.329-.064s1.106-6.247 4.687-7.297c.672-.195 1.407-.394 2.145-.503.439-.067 1.133-.169 1.474-.296.079-.589-.169-1.339-.446-2.19-.218-.66-.443-1.339-.563-2.081-.232-1.447.154-2.726 1.088-3.607 1.14-1.069 2.981-1.41 5.059-.937 1.185.27 2.058.851 2.827 1.361 1.099.731 1.74 1.103 3.083.199 1.623-1.095-.499-5.381-1.628-7.856l4.211-1.755c.567 1.238 3.3 7.605 1.497 11.239-.608 1.223-1.654 2.033-3.027 2.336-2.985.668-4.732-.495-6.007-1.342-.604-.401-1.133-.716-1.706-.881-3.987-1.136 1.578 4.729-1.028 7.365-1.564 1.579-5.385 1.995-5.632 2.055-2.46.593-3.705 4.256-3.705 4.256z" fill="#f48fb1"/><path d="M136.497 14.546c-.071.825-.105 1.316.109 2.389 1.031.758 3.277.758 3.277.758l-.221-.754c-.008-.026-.011-.056-.019-.082-2.284-1.14-3.146-2.31-3.146-2.31z" fill="#c92b27"/><path d="M131.825 18.24l-3.878-1.901 1.932-2.79 3.041 2.014-1.095 2.678z" fill="#ffc107"/><path d="M126.109 12.975c-1.98-.266-3.997-1.946-4.218-2.137l1.946-2.284c.589.499 1.837 1.335 2.674 1.447l-.402 2.974z" fill="#fb8c00"/><path d="M129.604 7.976l-2.85-.934c.326-.998.412-2.074.244-3.113l2.962-.476c.244 1.507.12 3.071-.356 4.523z" fill="#03a9f4"/><path d="M150.334 5.106l-2.931.641.847 3.869 2.93-.641-.846-3.869z" fill="#fb8c00"/><path d="M154.673 6.664l-2.063-2.179c1.08-1.024 1.328-2.362 1.328-2.377l2.962.484c-.037.236-.416 2.359-2.227 4.073z" fill="#ffc107"/><path d="M158.439 17.399l-2.62.819.895 2.863 2.62-.819-.895-2.863z" fill="#fb8c00"/><path d="M156.582 42.386l-2.981-.352c.127-1.061-.664-2.362-.881-2.651l2.4-1.8c.18.236 1.743 2.4 1.462 4.804z" fill="#f44336"/><path d="M165.139 38.584c-1.121-.169-2.269-.236-3.401-.195l-.101-3c1.316-.045 2.647.03 3.948.229l-.446 2.966z" fill="#fb8c00"/><path d="M163.213 40.579l-2.108 2.135 2.901 2.864 2.108-2.135-2.901-2.864z" fill="#f48fb1"/><path d="M157.08 26.227l-2.168-2.478-2.478 2.168 2.167 2.478 2.479-2.167z" fill="#f44336"/><g clip-path="url(#G)"><path d="M66.768 34.234l-.056-.041c-.12-.071-.191-.18-.218-.307s.007-.263.086-.39c.87-.413 7.275-3.469 8.858-4.905.409-.371.604-1.309.968-3.218l.27-1.391c.094-.454.341-1.294.6-2.183.356-1.211.724-2.46.847-3.199 1.028-6.214 1.882-13.916 1.89-13.991.139-1.339.431-2.7 1.519-2.7 1.282 0 2.179.806 2.179 1.965l.079 29.636c0 2.122-.806 2.43-1.74 2.786-.525.199-1.117.428-1.537.986-.859 1.148-1.778 2.67-2.666 4.144l-1.144 1.875-9.934-9.068h0z" fill="url(#B)"/><path d="M81.536 2.28c1.08 0 1.804.638 1.804 1.59l.079 29.632c0 1.864-.596 2.093-1.5 2.438-.57.218-1.219.465-1.703 1.11-.87 1.163-1.792 2.693-2.685 4.178l-.904 1.489-9.6-8.76a.9.9 0 0 0-.112-.086c-.034-.019-.041-.037-.041-.056-.004-.011-.004-.026 0-.041 1.237-.589 7.267-3.491 8.824-4.905.499-.454.694-1.376 1.084-3.424l.27-1.387c.09-.439.334-1.271.593-2.149.36-1.223.731-2.482.855-3.247 1.027-6.225 1.882-13.935 1.894-14.017.172-1.657.514-2.362 1.144-2.362h0zm0-.75c-1.489 0-1.763 1.826-1.89 3.034 0 0-.851 7.695-1.886 13.973-.21 1.271-1.226 4.29-1.444 5.37-.461 2.265-.698 4.016-1.125 4.406-1.639 1.489-8.854 4.883-8.854 4.883-.352.446-.274 1.035.18 1.313l10.264 9.368c1.313-2.062 2.741-4.65 4.031-6.375 1.031-1.38 3.353-.375 3.353-3.998L84.086 3.87c0-1.29-.968-2.34-2.55-2.34h0z" fill="#eda600"/><path d="M77.838 48.998l-18.934-.21.21-14.558 11.903-5.344c.559-.247 1.207.064 1.358.656.356 1.391 1.185 3.859 3 6.334a34.43 34.43 0 0 0 4.703 5.16 1.97 1.97 0 0 1 .454 2.344l-4.56 3.506 1.867 2.111h0z" fill="url(#C)"/><g stroke="#eda600" stroke-width=".75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M79.725 6.75s.308-1.939 2.07-1.939 1.882 1.939 1.882 1.939m-4.511 4.875s.386-2.119 2.254-2.119 2.295 2.119 2.295 2.119"/></g><g opacity=".2"><path opacity=".2" d="M71.328 29.981a20.08 20.08 0 0 0 3.139 6.559c1.74 2.37 3.604 4.208 4.86 5.333a.86.86 0 0 1 .266.799l-4.282 3.124c-.251.184-.412.457-.454.765a1.12 1.12 0 0 0 .244.855l.352.431-15.401-.172.184-12.709 11.092-4.984h0zm.094-1.181c-.135 0-.27.026-.401.086L59.118 34.23l-.21 14.558 18.934.21-1.871-2.295 4.56-3.322c.394-.795.21-1.755-.454-2.344-1.147-1.027-2.989-2.824-4.703-5.16-1.815-2.471-2.644-4.939-3-6.334a.98.98 0 0 0-.953-.742h0z" fill="#424242"/></g><path d="M91.121 43.297l-1.144-1.875-2.666-4.144c-.42-.559-1.013-.788-1.537-.986-.934-.356-1.74-.664-1.74-2.786l.079-29.633c0-1.159.896-1.965 2.179-1.965 1.088 0 1.376 1.365 1.519 2.7.007.079.862 7.781 1.89 13.995.12.739.491 1.991.847 3.199.263.889.51 1.729.6 2.183l.274 1.395c.364 1.909.559 2.843.968 3.214 1.579 1.436 7.988 4.493 8.858 4.905.078.124.108.259.086.386s-.098.236-.218.307c-.018.011-.037.026-.056.041l-9.937 9.064h0z" fill="url(#D)"/><path d="M86.288 2.28c.63 0 .971.709 1.147 2.366.008.079.866 7.789 1.894 14.014.124.761.499 2.025.855 3.244.259.881.502 1.71.593 2.149l.27 1.388c.39 2.047.585 2.97 1.084 3.424 1.556 1.418 7.586 4.316 8.824 4.905.004.015.004.03 0 .041s-.011.034-.041.056a.66.66 0 0 0-.113.086l-9.6 8.76-.904-1.489c-.892-1.481-1.819-3.015-2.685-4.177-.484-.645-1.133-.893-1.703-1.11-.904-.345-1.5-.574-1.5-2.434l.079-29.636c-.004-.949.724-1.586 1.8-1.586h0zm0-.75c-1.583 0-2.554 1.05-2.554 2.34l-.079 29.632c0 3.623 2.321 2.617 3.353 3.998 1.29 1.725 2.719 4.313 4.031 6.375l10.264-9.364c.454-.277.536-.866.18-1.312 0 0-7.215-3.394-8.854-4.882-.428-.39-.664-2.141-1.125-4.406-.218-1.08-1.234-4.099-1.444-5.37-1.035-6.277-1.886-13.972-1.886-13.972-.12-1.211-.398-3.037-1.886-3.037h0z" fill="#eda600"/><path d="M89.981 48.998l18.934-.21-.21-14.558-11.903-5.344c-.559-.247-1.207.064-1.358.656-.356 1.391-1.185 3.859-3 6.334a34.43 34.43 0 0 1-4.703 5.16 1.97 1.97 0 0 0-.454 2.344l4.56 3.506-1.868 2.111h0z" fill="url(#E)"/><g stroke="#eda600" stroke-width=".75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M88.099 6.75s-.308-1.939-2.07-1.939-1.882 1.939-1.882 1.939m4.51 4.875s-.386-2.119-2.254-2.119-2.295 2.119-2.295 2.119"/></g><g opacity=".2"><path opacity=".2" d="M96.495 29.981l11.096 4.98.184 12.709-15.401.172.352-.431a1.12 1.12 0 0 0 .244-.855c-.041-.307-.203-.581-.454-.765l-4.282-3.124a.86.86 0 0 1 .266-.799c1.256-1.125 3.12-2.962 4.86-5.333 1.879-2.565 2.76-5.149 3.135-6.555h0zm-.094-1.181c-.435 0-.84.289-.956.742-.356 1.391-1.185 3.859-3 6.334a34.43 34.43 0 0 1-4.703 5.16 1.97 1.97 0 0 0-.454 2.344l4.56 3.322-1.871 2.295 18.934-.21-.21-14.558-11.899-5.344c-.131-.06-.266-.086-.401-.086h0z" fill="#424242"/></g></g><path d="M23.707 44.55c-10.462 0-21.75-6.562-21.75-20.962S13.245 2.625 23.707 2.625c5.813 0 11.175 1.912 15.15 5.4 4.313 3.825 6.6 9.225 6.6 15.562s-2.288 11.7-6.6 15.525c-3.983 3.488-9.375 5.438-15.15 5.438z" fill="url(#F)"/><path d="M16.5 15.353c-1.571 0-3 1.328-3 3.533s1.429 3.529 3 3.529 3-1.327 3-3.529-1.41-3.533-3-3.533z" fill="#422b0d"/><path d="M16.369 16.826a1.08 1.08 0 0 0-1.432.503c-.199.416-.109.915.225 1.237a1.08 1.08 0 0 0 1.433-.502c.199-.416.109-.915-.225-1.238z" fill="#896024"/><path d="M30.899 15.353c-1.571 0-3 1.328-3 3.533s1.429 3.529 3 3.529 3-1.327 3-3.529-1.429-3.533-3-3.533z" fill="#422b0d"/><path d="M30.75 16.826a1.08 1.08 0 0 0-1.433.503c-.199.416-.109.915.225 1.237a1.08 1.08 0 0 0 1.433-.502c.199-.416.109-.915-.225-1.238z" fill="#896024"/><path d="M41.809 11.126c1.999 3.225 3.041 7.065 3.041 11.336 0 6.338-2.288 11.7-6.6 15.525-3.975 3.488-9.375 5.438-15.15 5.438-6.772 0-13.875-2.756-18.067-8.602 4.035 6.623 11.625 9.728 18.817 9.728 5.775 0 11.175-1.95 15.15-5.437 4.313-3.825 6.6-9.187 6.6-15.525 0-4.777-1.301-9.022-3.791-12.461z" fill="#eb8f00"/><path d="M38.276 26.858a2.18 2.18 0 0 0-2.678-.983c-3.847 1.121-7.837 1.68-11.846 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975-.51.941-.143 2.032.289 2.974 2.408 5.288 7.714 8.453 14.201 8.471h.06c6.488 0 11.794-3.184 14.205-8.471.428-.949.799-2.025.289-2.966z" fill="#422b0d"/><path d="M29.756 36.802l-.424-.375a8.15 8.15 0 0 0-5.55-2.029c-2.1-.034-4.144.664-5.782 1.976-.143.116-.293.229-.431.375s-.214.251-.304.375a17.55 17.55 0 0 0 6.476 1.208h.06a17.67 17.67 0 0 0 6.214-1.125 2.85 2.85 0 0 0-.259-.405z" fill="#ed7770"/><path d="M35.599 25.875c-3.847 1.121-7.837 1.68-11.846 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975a1.96 1.96 0 0 0-.173.446 5.05 5.05 0 0 0 .435.195c4.515 2.261 9.506 3.409 14.554 3.349a31.75 31.75 0 0 0 13.999-3.075c.176-.075.322-.146.454-.214-.03-.244-.109-.484-.225-.701-.525-.945-1.665-1.361-2.678-.975z" fill="#fff"/><path d="M38.291 26.861c-.532-.949-1.676-1.369-2.696-.986-3.847 1.121-7.837 1.68-11.842 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975-.51.941-.143 2.032.289 2.974.191.424.405.84.641 1.241 0 0-.787-2.918-.105-3.765a1.33 1.33 0 0 1 1.05-.608c.176 0 .349.03.518.082a42.47 42.47 0 0 0 12.06 1.725h.131a42.47 42.47 0 0 0 12.06-1.725c.169-.052.341-.082.517-.082a1.34 1.34 0 0 1 1.054.608c.694.848-.105 3.776-.105 3.776a14.5 14.5 0 0 0 .66-1.241c.428-.941.799-2.029.289-2.974z" fill="#eb8f00"/><defs><linearGradient id="A" x1="147.895" y1="23.19" x2="136.732" y2="29.887" xlink:href="#H"><stop offset=".024" stop-color="#8f4700"/><stop offset="1" stop-color="#703e2d"/></linearGradient><radialGradient id="B" cx="0" cy="0" r="1" gradientTransform="translate(79.3273 14.9794) scale(16.2763 24.2983)" xlink:href="#H"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><linearGradient id="C" x1="58.907" y1="38.899" x2="80.734" y2="38.899" xlink:href="#H"><stop stop-color="#2196f3"/><stop offset="1" stop-color="#64b5f6"/></linearGradient><radialGradient id="D" cx="0" cy="0" r="1" gradientTransform="translate(88.4879 14.9794) rotate(180) scale(16.2763 24.2983)" xlink:href="#H"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><linearGradient id="E" x1="108.915" y1="38.899" x2="87.09" y2="38.899" xlink:href="#H"><stop stop-color="#2196f3"/><stop offset="1" stop-color="#64b5f6"/></linearGradient><radialGradient id="F" cx="0" cy="0" r="1" gradientTransform="translate(23.707 23.5875) scale(21.3599)" xlink:href="#H"><stop offset=".5" stop-color="#fde030"/><stop offset=".92" stop-color="#f7c02b"/><stop offset="1" stop-color="#f4a223"/></radialGradient><clipPath id="G"><path fill="#fff" transform="translate(60)" d="M0 0h48v48H0z"/></clipPath><linearGradient id="H" gradientUnits="userSpaceOnUse"/></defs></svg>
\ No newline at end of file

src/pages/settings/assets/openmoji_emoji.svg

-<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.0003 39.3334C32.4687 39.3334 39.3337 32.4684 39.3337 24.0001C39.3337 15.5317 32.4687 8.66675 24.0003 8.66675C15.532 8.66675 8.66699 15.5317 8.66699 24.0001C8.66699 32.4684 15.532 39.3334 24.0003 39.3334Z" fill="#FCEA2B"/>
-<path d="M33.7297 27.76C33.7378 28.7865 33.5406 29.8042 33.1497 30.7533C24.8231 32.7733 16.1964 30.98 14.8231 30.6667C14.4505 29.7432 14.2626 28.7557 14.2697 27.76H14.3431C14.3431 27.76 24.2097 30.1533 33.6031 27.8067L33.7297 27.76Z" fill="white"/>
-<path d="M33.1499 30.7534C31.9566 33.6001 28.9166 35.5734 24.0232 35.5734C19.0832 35.5734 16.0032 33.5534 14.8232 30.6667C16.1966 30.9801 24.8232 32.7734 33.1499 30.7534Z" fill="#EA5A47"/>
-<path d="M24.0003 39.3334C32.4687 39.3334 39.3337 32.4684 39.3337 24.0001C39.3337 15.5317 32.4687 8.66675 24.0003 8.66675C15.532 8.66675 8.66699 15.5317 8.66699 24.0001C8.66699 32.4684 15.532 39.3334 24.0003 39.3334Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.0459 24.1479C20.1505 24.1479 21.0459 22.535 21.0459 20.5454C21.0459 18.5558 20.1505 16.9429 19.0459 16.9429C17.9413 16.9429 17.0459 18.5558 17.0459 20.5454C17.0459 22.535 17.9413 24.1479 19.0459 24.1479Z" fill="black"/>
-<path d="M28.9541 24.1501C30.0587 24.1501 30.9541 22.5372 30.9541 20.5476C30.9541 18.558 30.0587 16.9451 28.9541 16.9451C27.8495 16.9451 26.9541 18.558 26.9541 20.5476C26.9541 22.5372 27.8495 24.1501 28.9541 24.1501Z" fill="black"/>
-<path d="M33.7297 27.76C33.7378 28.7865 33.5406 29.8042 33.1497 30.7533C24.8231 32.7733 16.1964 30.98 14.8231 30.6667C14.4505 29.7432 14.2626 28.7557 14.2697 27.76H14.3431C14.3431 27.76 24.2097 30.1533 33.6031 27.8067L33.7297 27.76Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M33.1499 30.7534C31.9566 33.6001 28.9166 35.5734 24.0232 35.5734C19.0832 35.5734 16.0032 33.5534 14.8232 30.6667C16.1966 30.9801 24.8232 32.7734 33.1499 30.7534Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M78.1115 45.3335H62.667V37.5557L72.667 32.5557C70.9314 38.2468 77.6371 42.2603 81.0003 40.3335L78.1115 45.3335Z" fill="#92D3F5"/>
-<path d="M90.8605 45.3332H106.305V37.5554L96.305 32.5554C98.0406 38.2466 91.3349 42.2601 87.9717 40.3332L90.8605 45.3332Z" fill="#92D3F5"/>
-<path d="M79.8873 40.7393C75.7701 40.7393 72.4385 37.5467 72.4385 33.6014C76.8551 30.9209 77.2922 24.3749 77.7505 20.6249C78.0839 18.6979 78.945 18.6979 79.2505 16.7708L81.0005 4.89821C81.4172 2.66661 84.0532 2.89447 84.4867 4.66661V35.9444C84.4867 37.2341 82.5561 38.2777 81.8895 38.2777C81.3477 38.2777 79.8873 40.2974 79.8873 40.7393Z" fill="#FCEA2B"/>
-<path d="M89.0856 40.7393C93.2029 40.7393 96.5345 37.5467 96.5345 33.6014C92.1178 30.9209 91.6807 24.3749 91.2224 20.6249C90.8891 18.6979 90.0279 18.6979 89.7224 16.7708L87.9724 4.89826C87.5557 2.6666 84.9198 2.89446 84.4863 4.6666V35.9444C84.4863 37.2341 86.4169 38.2777 87.0835 38.2777C87.6252 38.2777 89.0856 40.2974 89.0856 40.7393Z" fill="#FCEA2B"/>
-<path d="M78.1105 45.3335H62.666V37.5557L72.666 32.5557C70.9304 38.2468 77.6361 42.2603 80.9993 40.3335L78.1105 45.3335Z" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M79.8864 40.7395C79.8864 40.2977 81.3468 38.278 81.8884 38.278C82.5551 38.278 84.4856 37.2344 84.4856 35.9446V4.66685C84.0522 2.89472 81.4162 2.66685 80.9996 4.89845L79.2496 16.771C78.944 18.6981 78.0829 18.6981 77.7496 20.6251C77.2912 24.3751 76.8542 30.9211 72.4375 33.6016" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M90.8605 45.3335H106.305V37.5557L96.305 32.5557C98.0406 38.2468 91.3349 42.2603 87.9717 40.3335L90.8605 45.3335Z" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M89.0846 40.7395C89.0846 40.2977 87.6242 38.278 87.0826 38.278C86.4159 38.278 84.4854 37.2344 84.4854 35.9446V4.66685C84.9188 2.89472 87.5548 2.66685 87.9715 4.89845L89.7215 16.771C90.027 18.6981 90.8882 18.6981 91.2215 20.6251C91.6798 24.3751 92.1169 30.9211 96.5336 33.6016" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M137.453 13.4539L145.833 21.8333L154.212 30.2128L139.859 36.1865L125.506 42.1602L131.48 27.8071L137.453 13.4539Z" fill="#F1B31C"/>
-<path d="M146.666 23.3334L137.128 13.7795L130.927 28.3597L124.727 42.9397L146.666 23.3334Z" fill="#FCEA2B"/>
-<path d="M130.148 30.1899L137.523 37.5646L133.836 39.0656L128.638 33.8675L130.148 30.1899Z" fill="#EA5A47"/>
-<path d="M131.562 36.8317L133.836 39.0656L137.523 37.5646L134.323 34.364L131.562 36.8317Z" fill="#D22F27"/>
-<path d="M133.869 21.4417L138.333 25.9061L146.133 33.7055L141.951 35.6145L136.503 30.1665L132.1 25.7631L133.869 21.4417Z" fill="#EA5A47"/>
-<path d="M137.69 31.3541L141.951 35.6143L146.133 33.7054L140.907 28.4797L137.69 31.3541Z" fill="#D22F27"/>
-<path d="M140.197 10.9524C140.933 10.9524 141.53 10.3642 141.53 9.63857C141.53 8.91295 140.933 8.32471 140.197 8.32471C139.46 8.32471 138.863 8.91295 138.863 9.63857C138.863 10.3642 139.46 10.9524 140.197 10.9524Z" fill="#8967AA"/>
-<path d="M160.197 13.6192C160.933 13.6192 161.53 13.0309 161.53 12.3053C161.53 11.5797 160.933 10.9915 160.197 10.9915C159.46 10.9915 158.863 11.5797 158.863 12.3053C158.863 13.0309 159.46 13.6192 160.197 13.6192Z" fill="#F1B31C"/>
-<path d="M158.197 27.6192C158.933 27.6192 159.53 27.031 159.53 26.3053C159.53 25.5797 158.933 24.9915 158.197 24.9915C157.46 24.9915 156.863 25.5797 156.863 26.3053C156.863 27.031 157.46 27.6192 158.197 27.6192Z" fill="#D22F27"/>
-<path d="M153.775 30.4264L153.887 30.5385L139.307 36.7391L124.727 42.9398L130.927 28.3597L137.128 13.7795" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M137.2 13.8523L145.507 22.1593L153.775 30.4267" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M137.128 13.7795L137.2 13.852" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M150.993 4.91162C151.149 5.21075 151.261 5.54029 151.319 5.89362C151.62 7.72515 150.355 9.50302 148.493 9.86462" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M148.622 9.85107C148.285 9.87667 147.946 9.95594 147.616 10.0937C145.903 10.8079 145.064 12.8224 145.742 14.5932" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M161.195 17.8113C161.129 18.1424 161.01 18.4693 160.833 18.7809C159.919 20.3959 157.818 20.9869 156.142 20.1009" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M156.249 20.1707C155.971 19.9795 155.658 19.8287 155.314 19.7287C153.532 19.2104 151.615 20.2532 151.032 22.0578" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{stroke:#000}.C{stroke-width:1.333}.D{stroke-linejoin:round}.E{fill:#fcea2b}.F{fill:#ea5a47}.G{stroke-linecap:round}.H{fill:#d22f27}.I{stroke-miterlimit:10}]]></style><use xlink:href="#B" class="E"/><use xlink:href="#C" fill="#fff"/><use xlink:href="#D" class="F"/><use xlink:href="#B" class="B C D"/><path d="M19.046 24.148c1.105 0 2-1.613 2-3.602s-.895-3.602-2-3.602-2 1.613-2 3.602.895 3.602 2 3.602zm9.908.002c1.105 0 2-1.613 2-3.602s-.895-3.602-2-3.602-2 1.613-2 3.602.895 3.602 2 3.602z" fill="#000"/><g class="B C D"><use xlink:href="#C"/><use xlink:href="#D"/></g><path d="M78.112 45.334H62.667v-7.778l10-5c-1.736 5.691 4.97 9.705 8.333 7.778l-2.889 5zm12.749-.001h15.445v-7.778l-10-5c1.736 5.691-4.97 9.705-8.333 7.778l2.889 5z" fill="#92d3f5"/><g class="E"><path d="M79.887 40.739c-4.117 0-7.449-3.193-7.449-7.138 4.417-2.68 4.854-9.226 5.312-12.976.333-1.927 1.194-1.927 1.5-3.854l1.75-11.873c.417-2.232 3.053-2.004 3.486-.232v31.278c0 1.29-1.931 2.333-2.597 2.333-.542 0-2.002 2.02-2.002 2.462z"/><path d="M89.086 40.739c4.117 0 7.449-3.193 7.449-7.138-4.417-2.68-4.854-9.226-5.312-12.976-.333-1.927-1.194-1.927-1.5-3.854l-1.75-11.873c-.417-2.232-3.053-2.004-3.486-.232v31.278c0 1.29 1.931 2.333 2.597 2.333.542 0 2.002 2.02 2.002 2.462z"/></g><g class="B C D I"><path d="M78.111 45.334H62.666v-7.778l10-5c-1.736 5.691 4.97 9.705 8.333 7.778l-2.889 5z"/><path d="M79.886 40.74c0-.442 1.46-2.462 2.002-2.462.667 0 2.597-1.044 2.597-2.333V4.667c-.433-1.772-3.069-2-3.486.232l-1.75 11.873c-.306 1.927-1.167 1.927-1.5 3.854-.458 3.75-.895 10.296-5.312 12.976" class="G"/><path d="M90.861 45.334h15.445v-7.778l-10-5c1.736 5.691-4.97 9.705-8.333 7.778l2.889 5z"/><path d="M89.085 40.74c0-.442-1.46-2.462-2.002-2.462-.667 0-2.597-1.044-2.597-2.333V4.667c.433-1.772 3.069-2 3.486.232l1.75 11.873c.305 1.927 1.167 1.927 1.5 3.854.458 3.75.895 10.296 5.312 12.976" class="G"/></g><path d="M137.453 13.454l8.38 8.379 8.379 8.38-14.353 5.974-14.353 5.974 5.974-14.353 5.973-14.353z" fill="#f1b31c"/><path d="M146.666 23.333l-9.538-9.554-6.201 14.58-6.2 14.58 21.939-19.606z" class="E"/><path d="M130.148 30.19l7.375 7.375-3.687 1.501-5.198-5.198 1.51-3.678z" class="F"/><path d="M131.562 36.832l2.274 2.234 3.687-1.501-3.2-3.201-2.761 2.468z" class="H"/><path d="M133.869 21.442l4.464 4.464 7.8 7.799-4.182 1.909-5.448-5.448-4.403-4.403 1.769-4.321z" class="F"/><path d="M137.69 31.354l4.261 4.26 4.182-1.909-5.226-5.226-3.217 2.874z" class="H"/><use xlink:href="#E" fill="#8967aa"/><use xlink:href="#E" x="20" y="2.667" fill="#f1b31c"/><use xlink:href="#E" x="18" y="16.667" class="H"/><g class="B C D G I"><path d="M153.775 30.426l.112.112-14.58 6.201-14.58 6.201 12.401-29.16"/><path d="M137.2 13.852l16.575 16.574M137.128 13.78l.072.072m13.793-8.94a3.26 3.26 0 0 1 .326.982c.301 1.832-.964 3.609-2.826 3.971"/><path d="M148.622 9.851a3.25 3.25 0 0 0-1.006.243c-1.713.714-2.552 2.729-1.874 4.499m15.453 3.218a3.24 3.24 0 0 1-.362.97c-.914 1.615-3.015 2.206-4.691 1.32m.107.07a3.24 3.24 0 0 0-.935-.442c-1.782-.518-3.699.524-4.282 2.329"/></g><defs ><path id="B" d="M24 39.333c8.468 0 15.333-6.865 15.333-15.333S32.469 8.667 24 8.667 8.667 15.532 8.667 24 15.532 39.333 24 39.333z"/><path id="C" d="M33.73 27.76a7.7 7.7 0 0 1-.58 2.993c-8.327 2.02-16.953.227-18.327-.087-.373-.923-.56-1.911-.553-2.907h.073s9.867 2.393 19.26.047l.127-.047z"/><path id="D" d="M33.15 30.753c-1.193 2.847-4.233 4.82-9.127 4.82-4.94 0-8.02-2.02-9.2-4.907 1.373.313 10 2.107 18.327.087z"/><path id="E" d="M140.197 10.952c.736 0 1.333-.588 1.333-1.314s-.597-1.314-1.333-1.314-1.334.588-1.334 1.314.597 1.314 1.334 1.314z"/></defs></svg>
\ No newline at end of file

src/pages/settings/assets/toki_pona.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="468pt" height="617pt" viewBox="0 0 468 617"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.5, written by Peter Selinger 2001-2004
+</metadata>
+<g transform="translate(0,617) scale(0.709091,-0.709091)"
+fill="#000099" stroke="none">
+<path fill="#000099" stroke="none" d="M302 838 c-14 -14 -16 -126 -3 -147 5
+-8 16 -11 25 -8 12 5 16 21 16 71 0 89 -10 112 -38 84z"/>
+<path fill="#000099" stroke="none" d="M521 775 c-27 -57 -32 -108 -10 -113
+18 -3 84 122 75 144 -11 30 -44 15 -65 -31z"/>
+<path fill="#000099" stroke="none" d="M34 797 c-8 -22 59 -158 76 -154 38 7
+-11 167 -51 167 -11 0 -22 -6 -25 -13z"/>
+<path fill="#000099" stroke="none" d="M254 590 c-50 -7 -128 -52 -175 -100
+-98 -100 -65 -346 57 -423 63 -40 107 -50 200 -44 125 7 212 62 275 172 53 92
+32 220 -51 317 -62 71 -170 99 -306 78z"/>
+<path fill="#ffff63" stroke="none" d="M443 539 c47 -13 112 -70 138 -120 24
+-48 26 -147 3 -190 -22 -43 -82 -108 -117 -125 -137 -71 -277 -55 -351 41 -39
+52 -51 92 -51 175 1 77 19 113 82 161 80 63 198 86 296 58z"/>
+<path fill="#000099" stroke="none" d="M462 367 c-5 -7 -15 -28 -21 -48 -21
+-67 -100 -120 -144 -98 -30 15 -65 56 -88 102 -21 40 -51 48 -57 14 -5 -26 53
+-111 96 -141 89 -62 204 -7 252 119 15 40 -15 81 -38 52z"/>
+</g>
+</svg>
\ No newline at end of file