diff --git a/src/components/floating-profile/FloatingProfile.module.scss b/src/components/floating-profile/FloatingProfile.module.scss
index dade25fb..5cd17419 100644
--- a/src/components/floating-profile/FloatingProfile.module.scss
+++ b/src/components/floating-profile/FloatingProfile.module.scss
@@ -211,3 +211,12 @@ body .postItemContainer {
   font-weight: bold;
   gap: 5px;
 }
+
+.buttonsContainer {
+  display: flex;
+  margin-top: 4px;
+  gap: 4px;
+  .button {
+    flex: 1;
+  }
+}
diff --git a/src/components/floating-profile/FloatingProfile.tsx b/src/components/floating-profile/FloatingProfile.tsx
index 069ab6bd..468473c4 100644
--- a/src/components/floating-profile/FloatingProfile.tsx
+++ b/src/components/floating-profile/FloatingProfile.tsx
@@ -51,6 +51,9 @@ import { t } from "i18next";
 import { PostItem } from "../post-area/PostItem";
 import { Skeleton } from "../ui/skeleton/Skeleton";
 import average from "@/common/chromaJS";
+import Button from "../ui/Button";
+import { FlexRow } from "../ui/Flexbox";
+import { emitDrawerGoToMain } from "@/common/GlobalEvents";
 
 interface Props {
   dmPane?: boolean;
@@ -292,6 +295,10 @@ const DesktopProfileFlyout = (props: {
       />
     ));
   };
+  const onMessageClicked = () => {
+    users.openDM(props.userId);
+    emitDrawerGoToMain();
+  };
 
   const StickyArea = () => {
     return (
@@ -317,6 +324,7 @@ const DesktopProfileFlyout = (props: {
               size={82}
             />
           </CustomLink>
+
           <div
             class={styles.flyoutOtherDetailsContainer}
             style={{ background: bgColor() }}
@@ -333,6 +341,7 @@ const DesktopProfileFlyout = (props: {
                 <Text color="rgba(255,255,255,0.6)">:{user()!.tag}</Text>
               </CustomLink>
             </span>
+
             <UserPresence
               showFull
               hideActivity
@@ -372,6 +381,30 @@ const DesktopProfileFlyout = (props: {
                   </CustomLink>
                 </Show>
               </Text>
+              <div class={styles.buttonsContainer}>
+                <Button
+                  padding={4}
+                  textSize={12}
+                  iconSize={16}
+                  href={RouterEndpoints.PROFILE(user()!.id)}
+                  color={colors().primary}
+                  class={styles.button}
+                  label="Full Profile"
+                  iconName="person"
+                  margin={0}
+                />
+                <Button
+                  padding={4}
+                  textSize={12}
+                  iconSize={16}
+                  color={colors().primary}
+                  class={styles.button}
+                  label="Message"
+                  onClick={onMessageClicked}
+                  iconName="mail"
+                  margin={0}
+                />
+              </div>
             </Show>
           </div>
         </div>
diff --git a/src/components/message-pane/MessagePane.tsx b/src/components/message-pane/MessagePane.tsx
index ef9d4c73..5e80c94c 100644
--- a/src/components/message-pane/MessagePane.tsx
+++ b/src/components/message-pane/MessagePane.tsx
@@ -75,6 +75,7 @@ import Checkbox from "../ui/Checkbox";
 import { ChannelIcon } from "../ChannelIcon";
 import { MetaTitle } from "@/common/MetaTitle";
 import { millisecondsToReadable } from "@/common/date";
+import { useResizeObserver } from "@/common/useResizeObserver";
 
 const DeleteMessageModal = lazy(
   () => import("./message-delete-modal/MessageDeleteModal")
@@ -174,6 +175,8 @@ function MessageArea(props: {
   const [showEmojiPicker, setShowEmojiPicker] = createSignal(false);
   const { createPortal } = useCustomPortal();
 
+  const { height } = useResizeObserver(textAreaEl);
+
   const { channels, messages, serverMembers } = useStore();
 
   const setMessage = (content: string) => {
@@ -198,7 +201,7 @@ function MessageArea(props: {
     }
   });
 
-  createEffect(on(message, () => adjustHeight()));
+  createEffect(on([message, height], () => adjustHeight()));
 
   const cancelEdit = () => {
     channelProperties.setEditMessage(params.channelId, undefined);
diff --git a/src/components/right-drawer/RightDrawer.tsx b/src/components/right-drawer/RightDrawer.tsx
index ee16edc1..a50b2f56 100644
--- a/src/components/right-drawer/RightDrawer.tsx
+++ b/src/components/right-drawer/RightDrawer.tsx
@@ -1,25 +1,36 @@
 import styles from "./styles.module.scss";
 import Avatar from "@/components/ui/Avatar";
 import UserPresence from "@/components/user-presence/UserPresence";
-import {useParams} from "solid-navigator";
+import { useParams } from "solid-navigator";
 import useStore from "@/chat-api/store/useStore";
-import {createEffect, createMemo, createSignal, For, JSX, mapArray, on, onCleanup, onMount, Show} from "solid-js";
-import {ServerMember} from "@/chat-api/store/useServerMembers";
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  JSX,
+  mapArray,
+  on,
+  onCleanup,
+  onMount,
+  Show,
+} from "solid-js";
+import { ServerMember } from "@/chat-api/store/useServerMembers";
 import MemberContextMenu from "../member-context-menu/MemberContextMenu";
-import {DrawerHeader} from "@/components/drawer-header/DrawerHeader";
-import {useCustomPortal} from "@/components/ui/custom-portal/CustomPortal";
-import {css} from "solid-styled-components";
-import {bannerUrl} from "@/chat-api/store/useUsers";
+import { DrawerHeader } from "@/components/drawer-header/DrawerHeader";
+import { useCustomPortal } from "@/components/ui/custom-portal/CustomPortal";
+import { css } from "solid-styled-components";
+import { bannerUrl } from "@/chat-api/store/useUsers";
 import Text from "@/components/ui/Text";
 import Icon from "@/components/ui/icon/Icon";
 import Button from "@/components/ui/Button";
-import {Banner} from "@/components/ui/Banner";
-import {fetchChannelAttachments} from "@/chat-api/services/MessageService";
-import {RawAttachment, RawMessage} from "@/chat-api/RawData";
+import { Banner } from "@/components/ui/Banner";
+import { fetchChannelAttachments } from "@/chat-api/services/MessageService";
+import { RawAttachment, RawMessage } from "@/chat-api/RawData";
 import env from "@/common/env";
-import {classNames, conditionalClass} from "@/common/classNames";
+import { classNames, conditionalClass } from "@/common/classNames";
 import socketClient from "@/chat-api/socketClient";
-import {ServerEvents} from "@/chat-api/EventNames";
+import { ServerEvents } from "@/chat-api/EventNames";
 import { emitScrollToMessage } from "@/common/GlobalEvents";
 import { Skeleton } from "../ui/skeleton/Skeleton";
 import { ProfileFlyout } from "../floating-profile/FloatingProfile";
@@ -33,7 +44,9 @@ const MemberItem = (props: { member: ServerMember }) => {
   const params = useParams<{ serverId: string }>();
   const user = () => props.member.user();
   let elementRef: undefined | HTMLDivElement;
-  const [contextPosition, setContextPosition] = createSignal<{ x: number, y: number } | undefined>(undefined);
+  const [contextPosition, setContextPosition] = createSignal<
+    { x: number; y: number } | undefined
+  >(undefined);
   const [hovering, setHovering] = createSignal(false);
   const { createPortal, isPortalOpened } = useCustomPortal();
 
@@ -41,7 +54,6 @@ const MemberItem = (props: { member: ServerMember }) => {
     return isPortalOpened("profile-pane-flyout-" + user().id);
   };
 
-
   const onContextMenu = (event: MouseEvent) => {
     event.preventDefault();
     setContextPosition({ x: event.clientX, y: event.clientY });
@@ -49,65 +61,114 @@ const MemberItem = (props: { member: ServerMember }) => {
 
   const onClick = (e: MouseEvent) => {
     const rect = elementRef?.getBoundingClientRect()!;
-    return createPortal(close => <ProfileFlyout triggerEl={e.target as HTMLElement} position={{ left: rect.left, top: rect.top }} serverId={params.serverId} close={close} userId={user().id} />, "profile-pane-flyout-" + user().id, true);
+    return createPortal(
+      (close) => (
+        <ProfileFlyout
+          triggerEl={e.target as HTMLElement}
+          position={{ left: rect.left, top: rect.top }}
+          serverId={params.serverId}
+          close={close}
+          userId={user().id}
+        />
+      ),
+      "profile-pane-flyout-" + user().id,
+      true
+    );
   };
 
   return (
-    <div class="trigger-profile-flyout" onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)} >
-      <MemberContextMenu position={contextPosition()} serverId={props.member.serverId} userId={props.member.userId} onClose={() => setContextPosition(undefined)} />
-      <div onClick={onClick} ref={elementRef} class={styles.memberItem} onContextMenu={onContextMenu} >
-        <Avatar resize={96} animate={hovering() || !!isProfileFlyoutOpened()} size={30} user={user()} />
+    <div
+      class="trigger-profile-flyout"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <MemberContextMenu
+        position={contextPosition()}
+        serverId={props.member.serverId}
+        userId={props.member.userId}
+        onClose={() => setContextPosition(undefined)}
+      />
+      <div
+        onClick={onClick}
+        ref={elementRef}
+        class={styles.memberItem}
+        onContextMenu={onContextMenu}
+      >
+        <Avatar
+          resize={96}
+          animate={hovering() || !!isProfileFlyoutOpened()}
+          size={30}
+          user={user()}
+        />
         <div class={styles.memberInfo}>
-          <div class={styles.username} style={{ color: props.member.roleColor() }} >{props.member.nickname || user().username}</div>
-          <UserPresence tooltipAnchor="left" animate={hovering() || !!isProfileFlyoutOpened()} userId={user().id} showOffline={false} />
+          <div
+            class={styles.username}
+            style={{ color: props.member.roleColor() }}
+          >
+            {props.member.nickname || user().username}
+          </div>
+          <UserPresence
+            tooltipAnchor="left"
+            animate={hovering() || !!isProfileFlyoutOpened()}
+            userId={user().id}
+            showOffline={false}
+          />
         </div>
       </div>
     </div>
   );
 };
 
-
 const Header = () => {
-
-  return (<DrawerHeader text={t("informationDrawer.title")} />);
+  return <DrawerHeader text={t("informationDrawer.title")} />;
 };
 
-
 const RightDrawer = () => {
-  const params = useParams<{ serverId?: string; channelId?: string; }>();
+  const params = useParams<{ serverId?: string; channelId?: string }>();
   const [showAttachments, setShowAttachments] = createSignal(false);
 
-  createEffect(on(() => params.channelId, () => {
-    setShowAttachments(false);
-  }));
+  createEffect(
+    on(
+      () => params.channelId,
+      () => {
+        setShowAttachments(false);
+      }
+    )
+  );
 
   return (
     <div class={styles.drawerContainer}>
       <Header />
-      <Show when={!showAttachments()}><MainDrawer onShowAttachmentClick={() => setShowAttachments(true)} /></Show>
-      <Show when={showAttachments()}><AttachmentDrawer onHideAttachmentClick={() => setShowAttachments(false)} /></Show>
+      <Show when={!showAttachments()}>
+        <MainDrawer onShowAttachmentClick={() => setShowAttachments(true)} />
+      </Show>
+      <Show when={showAttachments()}>
+        <AttachmentDrawer
+          onHideAttachmentClick={() => setShowAttachments(false)}
+        />
+      </Show>
     </div>
   );
 };
 
-
-
 const AttachmentDrawer = (props: { onHideAttachmentClick(): void }) => {
-  const params = useParams<{ serverId?: string; channelId?: string; }>();
+  const params = useParams<{ serverId?: string; channelId?: string }>();
   const { channels } = useStore();
 
-  const [attachments, setAttachments] = createSignal<RawAttachment[] | null>(null);
+  const [attachments, setAttachments] = createSignal<RawAttachment[] | null>(
+    null
+  );
 
   const incrAttachments = (channelId: string) => {
     const channel = channels.get(channelId);
 
-    const count = (channel?._count?.attachments || 0);
+    const count = channel?._count?.attachments || 0;
     channel?.update({ _count: { attachments: count + 1 } });
   };
   const decrAttachments = (channelId: string) => {
     const channel = channels.get(channelId);
 
-    const count = (channel?._count?.attachments || 1);
+    const count = channel?._count?.attachments || 1;
     channel?.update({ _count: { attachments: count - 1 } });
   };
 
@@ -123,16 +184,20 @@ const AttachmentDrawer = (props: { onHideAttachmentClick(): void }) => {
     if (!attachment) return;
     setAttachments([
       { ...attachment, messageId: payload.message.id },
-      ...attachments()!
+      ...attachments()!,
     ]);
     incrAttachments(params.channelId);
   };
   socketClient.useSocketOn(ServerEvents.MESSAGE_CREATED, onMessage);
 
-  const onDelete = (payload: { messageId: string, channelId: string }) => {
+  const onDelete = (payload: { messageId: string; channelId: string }) => {
     if (!attachments()) return;
     if (payload.channelId !== params.channelId) return;
-    setAttachments(attachments()!.filter(attachment => attachment.messageId !== payload.messageId));
+    setAttachments(
+      attachments()!.filter(
+        (attachment) => attachment.messageId !== payload.messageId
+      )
+    );
     decrAttachments(params.channelId);
   };
   socketClient.useSocketOn(ServerEvents.MESSAGE_DELETED, onDelete);
@@ -141,28 +206,26 @@ const AttachmentDrawer = (props: { onHideAttachmentClick(): void }) => {
     <>
       <Button
         label={t("informationDrawer.attachmentsBack")}
-        iconName='navigate_before'
+        iconName="navigate_before"
         iconSize={16}
         onClick={props.onHideAttachmentClick}
-        class={css`justify-content: start;`}
-        padding={5} />
-
-
+        class={css`
+          justify-content: start;
+        `}
+        padding={5}
+      />
 
       <div class={styles.attachmentList}>
-
         <Show when={!attachments()}>
           <For each={Array(50).fill(undefined)}>
             {() => (
-              <Skeleton.Item width='100%' style={{"aspect-ratio": "1/1"}} />
+              <Skeleton.Item width="100%" style={{ "aspect-ratio": "1/1" }} />
             )}
           </For>
         </Show>
         <Show when={attachments()}>
           <For each={attachments()}>
-            {item => (
-              <AttachmentImage attachment={item} />
-            )}
+            {(item) => <AttachmentImage attachment={item} />}
           </For>
         </Show>
       </div>
@@ -171,66 +234,67 @@ const AttachmentDrawer = (props: { onHideAttachmentClick(): void }) => {
 };
 
 const AttachmentImage = (props: { attachment: RawAttachment }) => {
-
   const isFile = () => props.attachment.fileId;
   const isGif = () => props.attachment.path?.endsWith(".gif");
 
   const url = (ignoreFocus?: boolean) => {
     let url = `${env.NERIMITY_CDN}${props.attachment.path}`;
     if (ignoreFocus) return url;
-    if (isGif()) return url += "?type=webp";
+    if (isGif()) return (url += "?type=webp");
     return url;
   };
 
   const onClicked = () => {
     if (!props.attachment.messageId) return;
     emitScrollToMessage({
-      messageId: props.attachment.messageId
+      messageId: props.attachment.messageId,
     });
   };
 
   return (
-    <div class={classNames(styles.attachmentImageContainer, conditionalClass(isGif(), styles.gif))}>
-      
+    <div
+      class={classNames(
+        styles.attachmentImageContainer,
+        conditionalClass(isGif(), styles.gif)
+      )}
+    >
       <div class={styles.attachmentHover} onClick={onClicked}>
-        <Icon name='visibility' color='var(--primary-color)' />
+        <Icon name="visibility" color="var(--primary-color)" />
       </div>
-      
+
       <Show when={!isFile()}>
-        <img class={styles.attachmentImage}
-          loading="lazy"
-          src={url()}
-        />
+        <img class={styles.attachmentImage} loading="lazy" src={url()} />
       </Show>
       <Show when={isFile()}>
         <div class={styles.fileAttachment}>
-          <Icon name='insert_drive_file' color='var(--primary-color)' size={40} />
+          <Icon
+            name="insert_drive_file"
+            color="var(--primary-color)"
+            size={40}
+          />
         </div>
       </Show>
     </div>
   );
 };
 
-
-
 const MainDrawer = (props: { onShowAttachmentClick(): void }) => {
-  const params = useParams<{ serverId?: string; channelId?: string; }>();
+  const params = useParams<{ serverId?: string; channelId?: string }>();
   const { channels } = useStore();
 
-
   const channel = () => channels.get(params.channelId!);
 
   const incrAttachments = (channelId: string) => {
     const channel = channels.get(channelId);
 
-    const count = (channel?._count?.attachments || 0);
+    const count = channel?._count?.attachments || 0;
     channel?.update({ _count: { attachments: count + 1 } });
   };
 
   const decrAttachments = (channelId: string) => {
     const channel = channels.get(channelId);
 
-    const count = (channel?._count?.attachments || 1);
+    const count = channel?._count?.attachments || 1;
     channel?.update({ _count: { attachments: count - 1 } });
   };
 
@@ -241,61 +305,87 @@ const MainDrawer = (props: { onShowAttachmentClick(): void }) => {
   };
   socketClient.useSocketOn(ServerEvents.MESSAGE_CREATED, onMessage);
 
-  const onDelete = (payload: { messageId: string, channelId: string }) => {
+  const onDelete = (payload: { messageId: string; channelId: string }) => {
     decrAttachments(payload.channelId);
   };
   socketClient.useSocketOn(ServerEvents.MESSAGE_DELETED, onDelete);
 
+  const cachedNotice = () =>
+    params.channelId ? getCachedNotice(() => params.channelId!) : undefined;
 
-  const cachedNotice = () => params.channelId ? getCachedNotice(() => params.channelId!) : undefined;
-
-  return <>
-    <Show when={channel()?.serverId}><BannerItem /></Show>
-    <Show when={channel()?.serverId}>
-      <ServerChannelNotice/>
-    </Show>
-    <Show when={channel()?.recipientId}>
-      <ProfileFlyout channelNotice={cachedNotice()?.content} dmPane userId={channel()?.recipientId!} />
-    </Show>
-    <Show when={channel()}>
-      <Button
-        label={t("informationDrawer.attachments")}
-        customChildren={
-          <>
-            <div class={styles.attachmentCount}>{channel()?._count?.attachments?.toLocaleString?.() ?? "..."}</div>
-            <Icon size={16} color="var(--primary-color)" name='navigate_next' />
-          </>
-        }
-        iconName='attach_file'
-        iconSize={16}
-        onClick={props.onShowAttachmentClick}
-        class={css`justify-content: start;`}
-        
-        padding={5} />
-    </Show>
-    <Show when={params.serverId}><ServerDrawer /></Show>
-  </>;
+  return (
+    <>
+      <Show when={channel()?.serverId}>
+        <BannerItem />
+      </Show>
+      <Show when={channel()?.serverId}>
+        <ServerChannelNotice />
+      </Show>
+      <Show when={channel()?.recipientId}>
+        <ProfileFlyout
+          channelNotice={cachedNotice()?.content}
+          dmPane
+          userId={channel()?.recipientId!}
+        />
+      </Show>
+      <Show when={channel()}>
+        <Button
+          label={t("informationDrawer.attachments")}
+          customChildren={
+            <>
+              <div class={styles.attachmentCount}>
+                {channel()?._count?.attachments?.toLocaleString?.() ?? "..."}
+              </div>
+              <Icon
+                size={16}
+                color="var(--primary-color)"
+                name="navigate_next"
+              />
+            </>
+          }
+          iconName="attach_file"
+          iconSize={16}
+          onClick={props.onShowAttachmentClick}
+          class={css`
+            justify-content: start;
+          `}
+          padding={5}
+        />
+      </Show>
+      <Show when={params.serverId}>
+        <ServerDrawer />
+      </Show>
+    </>
+  );
 };
 
-
 const BannerItem = () => {
-  const params = useParams<{ serverId?: string; channelId?: string; }>();
+  const params = useParams<{ serverId?: string; channelId?: string }>();
   const { servers, channels } = useStore();
 
   const server = () => servers.get(params.serverId!);
 
   const channel = () => channels.get(params.channelId!)?.recipient();
 
-  const bannerData = () => server() || channel() as { hexColor: string, banner?: string; };
+  const bannerData = () =>
+    server() || (channel() as { hexColor: string; banner?: string });
 
   return (
     <Show when={bannerData()?.banner}>
-      <Banner class={css`margin-left: 5px; margin-right: 5px;`} margin={0} brightness={100} hexColor={bannerData()?.hexColor} url={bannerUrl(bannerData()!)} />
+      <Banner
+        class={css`
+          margin-left: 5px;
+          margin-right: 5px;
+        `}
+        margin={0}
+        brightness={100}
+        hexColor={bannerData()?.hexColor}
+        url={bannerUrl(bannerData()!)}
+      />
     </Show>
   );
 };
 
-
 const ServerDrawer = () => {
   const params = useParams();
   const { servers, serverMembers, serverRoles } = useStore();
@@ -305,68 +395,111 @@ const ServerDrawer = () => {
 
   const members = () => serverMembers.array(params.serverId);
 
-  const roleMembers = mapArray(roles, role => {
-
-    const membersInThisRole = () => members().filter(member => {
-      if (!member?.user()) return false;
-      if (!member?.user().presence()?.status) return false;
-      if (server()?.defaultRoleId === role!.id && !member?.unhiddenRole()) return true;
-      if (member?.unhiddenRole()?.id === role!.id) return true;
-    });
+  const roleMembers = mapArray(roles, (role) => {
+    const membersInThisRole = () =>
+      members().filter((member) => {
+        if (!member?.user()) return false;
+        if (!member?.user().presence()?.status) return false;
+        if (server()?.defaultRoleId === role!.id && !member?.unhiddenRole())
+          return true;
+        if (member?.unhiddenRole()?.id === role!.id) return true;
+      });
 
     return { role, members: createMemo(() => membersInThisRole()) };
   });
 
-  const offlineMembers = createMemo(() => members().filter(member => !member?.user().presence()?.status));
-  const defaultRole = () => serverRoles.get(server()?.id!, server()?.defaultRoleId!);
+  const offlineMembers = createMemo(() =>
+    members().filter((member) => !member?.user().presence()?.status)
+  );
+  const defaultRole = () =>
+    serverRoles.get(server()?.id!, server()?.defaultRoleId!);
   return (
     <Show when={server()?.id} keyed={true}>
       <Delay ms={10}>
         <>
           <div style={{ "margin-left": "8px", display: "flex" }}>
             <Text size={14}>{t("informationDrawer.members")}</Text>
-            <div class={styles.memberCount}>{members().length.toLocaleString()}</div>
+            <div class={styles.memberCount}>
+              {members().length.toLocaleString()}
+            </div>
           </div>
           <div class={styles.roleContainer}>
             <For each={roleMembers()}>
               {(item) => (
                 <Show when={!item.role!.hideRole && item.members().length}>
-                  <RoleItem members={item.members().sort((a, b) => a?.user().username.localeCompare(b?.user().username))} roleName={item.role?.name!} roleIcon={item.role?.icon!} />
+                  <RoleItem
+                    members={item
+                      .members()
+                      .sort((a, b) =>
+                        a?.user().username.localeCompare(b?.user().username)
+                      )}
+                    roleName={item.role?.name!}
+                    roleIcon={item.role?.icon!}
+                  />
                 </Show>
               )}
             </For>
 
             {/* Offline */}
-            <RoleItem members={offlineMembers().sort((a, b) => a?.user().username.localeCompare(b?.user().username))} roleName="Offline" roleIcon={defaultRole()?.icon} />
+            <RoleItem
+              members={offlineMembers().sort((a, b) =>
+                a?.user().username.localeCompare(b?.user().username)
+              )}
+              roleName="Offline"
+              roleIcon={defaultRole()?.icon}
+            />
           </div>
         </>
       </Delay>
-
     </Show>
   );
 };
 
-function RoleItem(props: { roleName: string, members: ServerMember[], roleIcon?: string }) {
+function RoleItem(props: {
+  roleName: string;
+  members: ServerMember[];
+  roleIcon?: string;
+}) {
   const [expanded, setExpanded] = createSignal(props.members.length <= 20);
   const [hovered, setHovered] = createSignal(false);
   return (
-    <div class={styles.roleItem} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
+    <div
+      class={styles.roleItem}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <div class={styles.roleTitle} onClick={() => setExpanded(!expanded())}>
-        <div class={styles.roleName}> <Show when={props.roleIcon}><Emoji hovered={hovered()} size={16} resize={16} icon={props.roleIcon} /></Show> {props.roleName}</div>
-        <div class={styles.roleCount}>{props.members.length.toLocaleString()}</div>
-        <Button class={styles.roleExpandButton} padding={5} margin={0} iconName={expanded() ? "expand_more" : "expand_less"} iconSize={12} />
+        <div class={styles.roleName}>
+          {" "}
+          <Show when={props.roleIcon}>
+            <Emoji
+              hovered={hovered()}
+              size={16}
+              resize={16}
+              icon={props.roleIcon}
+            />
+          </Show>{" "}
+          {props.roleName}
+        </div>
+        <div class={styles.roleCount}>
+          {props.members.length.toLocaleString()}
+        </div>
+        <Button
+          class={styles.roleExpandButton}
+          padding={5}
+          iconName={expanded() ? "expand_more" : "expand_less"}
+          iconSize={12}
+        />
       </div>
       <Show when={expanded()}>
         <For each={props.members}>
-          {member => <MemberItem member={member!} />}
+          {(member) => <MemberItem member={member!} />}
         </For>
       </Show>
     </div>
   );
 }
 
-
-
 const ServerChannelNotice = () => {
   const params = useParams<{ channelId: string }>();
 
@@ -376,15 +509,15 @@ const ServerChannelNotice = () => {
     <Show when={cachedNotice()}>
       <div class={styles.channelNotice}>
         <div class={styles.channelNoticeHeader}>
-          <Icon color='var(--primary-color)' name="info" size={14} />
+          <Icon color="var(--primary-color)" name="info" size={14} />
           <Text size={13}>{t("informationDrawer.channelNotice")}</Text>
         </div>
-        <div class={styles.channelNoticeContent}><Markup inline text={cachedNotice()!.content} /></div>
+        <div class={styles.channelNoticeContent}>
+          <Markup inline text={cachedNotice()!.content} />
+        </div>
       </div>
     </Show>
   );
 };
 
 export default RightDrawer;
-
-
diff --git a/src/components/right-drawer/styles.module.scss b/src/components/right-drawer/styles.module.scss
index b6f88dae..56598246 100644
--- a/src/components/right-drawer/styles.module.scss
+++ b/src/components/right-drawer/styles.module.scss
@@ -47,6 +47,7 @@
     gap: 4px;
   }
   .roleExpandButton {
+    margin: 0;
     margin-left: 8px;
   }
   .roleCount {
diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss
new file mode 100644
index 00000000..b8775b48
--- /dev/null
+++ b/src/components/ui/Button.module.scss
@@ -0,0 +1,32 @@
+.container {
+  all: unset;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 5px;
+
+  margin: 5px;
+  border: solid 1px rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: white;
+  background-color: rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  user-select: none;
+  transition: 0.2s background-color, 0.2s opacity;
+  text-align: center;
+  &:focus {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  &.primary {
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+  :nth-child(2) {
+    margin-left: 5px;
+  }
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 80854704..5a9c5100 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,131 +1,108 @@
 import Icon from "@/components/ui/icon/Icon";
-import { JSX, JSXElement } from "solid-js";
-import { styled } from "solid-styled-components";
+import { JSX, JSXElement, splitProps } from "solid-js";
 import Text from "./Text";
+import { cn } from "@/common/classNames";
+import style from "./Button.module.scss";
+import { Dynamic } from "solid-js/web";
+import { A } from "solid-navigator";
 
-export interface ButtonProps {
-  onMouseLeave?: (event: MouseEvent) => void;
-  onMouseEnter?: (event: MouseEvent) => void;
-  onPointerEnter?: (event: PointerEvent) => void;
-  onPointerLeave?: (event: PointerEvent) => void;
-  onPointerMove?: (event: PointerEvent) => void;
-  onTouchMove?: (event: TouchEvent) => void;
-  onTouchStart?: (event: TouchEvent) => void;
-  color?: string;
-  class?: string;
+export type ButtonProps = Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "color"
+> & {
+  color?: string | null;
   label?: string;
   margin?: number | number[];
   padding?: number | number[];
   iconSize?: number;
   textSize?: number;
   iconName?: string;
-  onClick?: (event: MouseEvent) => void;
-  onPointerDown?: (event: PointerEvent) => void;
-  onPointerUp?: (event: PointerEvent) => void;
-  onContextMenu?: (event: MouseEvent) => void;
   primary?: boolean;
   customChildren?: JSXElement;
   customChildrenLeft?: JSXElement;
+  href?: string;
   styles?: JSX.CSSProperties;
   tabIndex?: string;
   hoverText?: string;
   iconClass?: string;
   alert?: boolean;
-}
-
-const ButtonContainer = styled("button")<{
-  padding?: number | number[];
-  margin?: number | number[];
-  primary?: boolean;
-}>`
-  all: unset;
-  display: flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  flex-shrink: 0;
-  padding: ${(props) =>
-    props.padding !== undefined
-      ? typeof props.padding === "object"
-        ? props.padding.join("px ")
-        : props.padding
-      : 5}px;
-  margin: ${(props) =>
-    props.margin !== undefined
-      ? typeof props.margin === "object"
-        ? props.margin.join("px ")
-        : props.margin
-      : 5}px;
-  color: white;
-  cursor: pointer;
-  user-select: none;
-  transition: 0.2s background-color, 0.2s opacity;
-  background-color: rgba(255, 255, 255, 0.08);
-  border: solid 1px rgba(255, 255, 255, 0.1);
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.15);
-    ${(props) => props.primary ? "opacity: 0.6" : undefined};
-  }
-  &:focus {
-    background-color: rgba(255, 255, 255, 0.15);
-  }
-
-  :nth-child(2) {
-    margin-left: 5px;
-  }
-`;
+};
 
 export default function Button(props: ButtonProps) {
+  const [customProps, ogProps] = splitProps(props, [
+    "color",
+    "label",
+    "margin",
+    "padding",
+    "iconSize",
+    "textSize",
+    "iconName",
+    "primary",
+    "customChildren",
+    "href",
+    "customChildrenLeft",
+    "styles",
+    "tabIndex",
+    "hoverText",
+    "iconClass",
+    "alert",
+  ]);
   const color = () =>
-    props.alert ? "var(--alert-color)" : props.color || "var(--primary-color)";
+    customProps.alert
+      ? "var(--alert-color)"
+      : customProps.color || "var(--primary-color)";
 
-  const style = () => ({
-    ...(props.primary ? { "background-color": color() } : undefined),
-    ...props.styles,
+  const btnStyle = () => ({
+    ...(customProps.primary ? { "background-color": color() } : {}),
+    margin:
+      props.margin !== undefined
+        ? typeof props.margin === "object"
+          ? props.margin.join("px ") + "px"
+          : props.margin + "px"
+        : undefined,
+    padding:
+      props.padding !== undefined
+        ? typeof props.padding === "object"
+          ? props.padding.join("px ") + "px"
+          : props.padding + "px"
+        : undefined,
+    ...customProps.styles,
   });
 
   return (
-    <ButtonContainer
-      title={props.hoverText}
-      onTouchStart={props.onTouchStart}
-      ontouchmove={props.onTouchMove}
-      onPointerMove={props.onPointerMove}
-      onPointerEnter={props.onPointerEnter}
-      onPointerLeave={props.onPointerLeave}
-      onPointerDown={props.onPointerDown}
-      onPointerUp={props.onPointerUp}
-      tabindex={props.tabIndex}
-      padding={props.padding}
-      margin={props.margin}
-      primary={props.primary}
-      style={style()}
-      class={`${props.class} button`}
-      onClick={props.onClick}
-      onContextMenu={props.onContextMenu}
-      onMouseEnter={props.onMouseEnter}
-      onMouseLeave={props.onMouseLeave}
+    <Dynamic
+      component={customProps.href ? A : "button"}
+      href={customProps.href}
+      {...ogProps}
+      title={customProps.hoverText}
+      tabindex={customProps.tabIndex}
+      style={btnStyle()}
+      class={cn(
+        style.container,
+        props.class,
+        customProps.primary && style.primary,
+        "button"
+      )}
     >
-      {props.customChildrenLeft && props.customChildrenLeft}
-      {props.iconName && (
+      {customProps.customChildrenLeft && customProps.customChildrenLeft}
+      {customProps.iconName && (
         <Icon
-          class={props.iconClass}
-          size={props.iconSize}
-          name={props.iconName}
-          color={props.primary ? "white" : color()}
+          class={customProps.iconClass}
+          size={customProps.iconSize}
+          name={customProps.iconName}
+          color={customProps.primary ? "white" : color()}
         />
       )}
-      {props.label && (
+      {customProps.label && (
         <Text
-          size={props.textSize || 14}
+          size={customProps.textSize || 14}
           class="label"
-          color={props.primary ? "white" : color()}
+          color={customProps.primary ? "white" : color()}
         >
-          {props.label}
+          {customProps.label}
         </Text>
       )}
-      {props.customChildren && props.customChildren}
-    </ButtonContainer>
+      {customProps.customChildren && customProps.customChildren}
+    </Dynamic>
   );
 }