diff --git a/src/components/servers/customize-pane/ServerCustomizePane.tsx b/src/components/servers/customize-pane/ServerCustomizePane.tsx
index ea9831cf..4f0d5c27 100644
--- a/src/components/servers/customize-pane/ServerCustomizePane.tsx
+++ b/src/components/servers/customize-pane/ServerCustomizePane.tsx
@@ -1,10 +1,27 @@
 import styles from "./styles.module.scss";
 
 import { useParams } from "solid-navigator";
-import { For, Setter, Show, batch, createEffect, createSignal, on, onMount } from "solid-js";
+import {
+  For,
+  Setter,
+  Show,
+  batch,
+  createEffect,
+  createSignal,
+  on,
+  onMount,
+} from "solid-js";
 import useStore from "@/chat-api/store/useStore";
-import { addAnswerToMember, getWelcomeQuestions, removeAnswerFromMember, updateWelcomeQuestion } from "@/chat-api/services/ServerService";
-import { RawServerWelcomeAnswer, RawServerWelcomeQuestion } from "@/chat-api/RawData";
+import {
+  addAnswerToMember,
+  getWelcomeQuestions,
+  removeAnswerFromMember,
+  updateWelcomeQuestion,
+} from "@/chat-api/services/ServerService";
+import {
+  RawServerWelcomeAnswer,
+  RawServerWelcomeQuestion,
+} from "@/chat-api/RawData";
 import Checkbox from "@/components/ui/Checkbox";
 import Icon from "@/components/ui/icon/Icon";
 import Text from "@/components/ui/Text";
@@ -15,105 +32,157 @@ import { RadioBoxItem } from "@/components/ui/RadioBox";
 import { SetStoreFunction, createStore, reconcile } from "solid-js/store";
 
 export default function Pane() {
-  const params = useParams<{serverId: string}>();
+  const params = useParams<{ serverId: string }>();
   const { header } = useStore();
 
   const [questions, setQuestions] = createStore<RawServerWelcomeQuestion[]>([]);
 
-
-  createEffect(on(() => params.serverId, async () => {
-    const questions = await getWelcomeQuestions(params.serverId!);
-    setQuestions(reconcile(questions));
-  }));
+  createEffect(
+    on(
+      () => params.serverId,
+      async () => {
+        const questions = await getWelcomeQuestions(params.serverId!);
+        setQuestions(reconcile(questions));
+      }
+    )
+  );
 
   onMount(() => {
     header.updateHeader({
       title: "Customize",
       serverId: params.serverId!,
-      iconName: "tune"
+      iconName: "tune",
     });
   });
 
   return (
     <>
-      <div class={styles.pane}>  
-        <WelcomeMessage/>
+      <div class={styles.pane}>
+        <WelcomeMessage />
         <QuestionList questions={questions} updateQuestions={setQuestions} />
       </div>
-      <ContinueFooter/>
+      <ContinueFooter />
     </>
   );
 }
 
 const WelcomeMessage = () => {
-  const params = useParams<{serverId: string}>();
+  const params = useParams<{ serverId: string }>();
   const store = useStore();
   const server = () => store.servers.get(params.serverId!);
 
   return (
     <div class={styles.welcomeMessage}>
-      <Text size={24} class={styles.title}>{server()?.name}</Text>
-      <Text size={16} opacity={0.6}>Complete these questions:</Text>
+      <Text size={24} class={styles.title}>
+        {server()?.name}
+      </Text>
+      <Text size={16} opacity={0.6}>
+        Complete these questions:
+      </Text>
     </div>
   );
 };
 
-const QuestionList = (props: {questions: RawServerWelcomeQuestion[], updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>}) => {
+const QuestionList = (props: {
+  questions: RawServerWelcomeQuestion[];
+  updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>;
+}) => {
   return (
     <div class={styles.questionList}>
       <For each={props.questions.toSorted((a, b) => a.order - b.order)}>
-        {(question) => <QuestionItem questions={props.questions} question={question} updateQuestions={props.updateQuestions} />}
+        {(question) => (
+          <QuestionItem
+            questions={props.questions}
+            question={question}
+            updateQuestions={props.updateQuestions}
+          />
+        )}
       </For>
     </div>
   );
 };
 
-const QuestionItem = (props: {question: RawServerWelcomeQuestion; questions: RawServerWelcomeQuestion[], updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>}) => {
+const QuestionItem = (props: {
+  question: RawServerWelcomeQuestion;
+  questions: RawServerWelcomeQuestion[];
+  updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>;
+}) => {
   return (
     <div class={styles.questionItem}>
       <div class={styles.title}>{props.question.title}</div>
-      <Show when={props.question.answers.length}><AnswerList questions={props.questions} updateQuestions={props.updateQuestions} multiselect={props.question.multiselect} answers={props.question.answers}/></Show>
+      <Show when={props.question.answers.length}>
+        <AnswerList
+          questions={props.questions}
+          updateQuestions={props.updateQuestions}
+          multiselect={props.question.multiselect}
+          answers={props.question.answers}
+        />
+      </Show>
     </div>
   );
 };
 
-const AnswerList = (props: {answers: RawServerWelcomeAnswer[], multiselect: boolean, questions: RawServerWelcomeQuestion[], updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>}) => {
+const AnswerList = (props: {
+  answers: RawServerWelcomeAnswer[];
+  multiselect: boolean;
+  questions: RawServerWelcomeQuestion[];
+  updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>;
+}) => {
   return (
     <div class={styles.answerList}>
       <For each={props.answers.toSorted((a, b) => a.order - b.order)}>
-        {(answer) => <AnswerItem questions={props.questions} answer={answer} multiselect={props.multiselect} updateQuestions={props.updateQuestions} />}
+        {(answer) => (
+          <AnswerItem
+            questions={props.questions}
+            answer={answer}
+            multiselect={props.multiselect}
+            updateQuestions={props.updateQuestions}
+          />
+        )}
       </For>
     </div>
   );
 };
 
-const AnswerItem = (props: {answer: RawServerWelcomeAnswer, questions: RawServerWelcomeQuestion[], multiselect: boolean, updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>}) => {
-  const params = useParams<{serverId: string}>();
+const AnswerItem = (props: {
+  answer: RawServerWelcomeAnswer;
+  questions: RawServerWelcomeQuestion[];
+  multiselect: boolean;
+  updateQuestions: SetStoreFunction<RawServerWelcomeQuestion[]>;
+}) => {
+  const params = useParams<{ serverId: string }>();
+  const { serverRoles } = useStore();
   const onChange = async (newVal: boolean) => {
     if (newVal) {
       await addAnswerToMember(params.serverId, props.answer.id);
       if (!props.multiselect) {
-
-        const index = props.questions.findIndex(q => q.id === props.answer.questionId);
+        const index = props.questions.findIndex(
+          (q) => q.id === props.answer.questionId
+        );
 
         if (index === -1) return;
 
         const answers = props.questions[index]?.answers!;
 
-
         batch(() => {
           for (let i = 0; i < answers.length; i++) {
             const answer = answers[i];
-            props.updateQuestions(index, "answers", i, "answered", answer?.id === props.answer.id);
+            props.updateQuestions(
+              index,
+              "answers",
+              i,
+              "answered",
+              answer?.id === props.answer.id
+            );
           }
         });
       }
-    }
-    else {
+    } else {
       await removeAnswerFromMember(params.serverId, props.answer.id);
       if (!props.multiselect) {
-
-        const index = props.questions.findIndex(q => q.id === props.answer.questionId);
+        const index = props.questions.findIndex(
+          (q) => q.id === props.answer.questionId
+        );
 
         if (index === -1) return;
 
@@ -127,16 +196,59 @@ const AnswerItem = (props: {answer: RawServerWelcomeAnswer, questions: RawServer
       }
     }
   };
+
+  const roles = () =>
+    props.answer.roleIds
+      .map((roleId) => serverRoles.get(params.serverId, roleId)!)
+      .sort((a, b) => a?.order - b?.order)
+      .filter((r) => r);
   return (
-    <div class={styles.answerItem}>
-      <Show when={!props.multiselect}><RadioBoxItem onClick={() => onChange(!props.answer.answered)} selected={props.answer.answered} item={{label: props.answer.title, id: props.answer.id}} labelSize={14} class={styles.radioBox} /></Show>
-      <Show when={props.multiselect}><Checkbox onChange={onChange} checked={props.answer.answered} labelSize={14} label={props.answer.title} class={styles.checkbox} /></Show>
-      <Show when={props.answer._count.answeredUsers}><UserCount count={props.answer._count.answeredUsers}/></Show>
+    <div class={styles.outerAnswerItem}>
+      <div class={styles.answerItem}>
+        <Show when={!props.multiselect}>
+          <RadioBoxItem
+            onClick={() => onChange(!props.answer.answered)}
+            selected={props.answer.answered}
+            item={{ label: props.answer.title, id: props.answer.id }}
+            labelSize={14}
+            class={styles.radioBox}
+          />
+        </Show>
+        <Show when={props.multiselect}>
+          <Checkbox
+            onChange={onChange}
+            checked={props.answer.answered}
+            labelSize={14}
+            label={props.answer.title}
+            class={styles.checkbox}
+          />
+        </Show>
+        <Show when={props.answer._count.answeredUsers}>
+          <UserCount count={props.answer._count.answeredUsers} />
+        </Show>
+      </div>
+      <Show when={roles().length}>
+        <div class={styles.roleList}>
+          <Icon
+            class={styles.roleIcon}
+            name="leaderboard"
+            size={14}
+            color="rgba(255,255,255,0.8)"
+          />
+          <For each={roles()}>
+            {(role) => (
+              <div class={styles.roleItem}>
+                <div style={{ color: role.hexColor }}>{role.name}</div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
     </div>
   );
 };
 
-const UserCount = (props: {count: number}) => {
+const UserCount = (props: { count: number }) => {
   return (
     <div class={styles.userCount}>
       <Icon name="person" size={14} />
@@ -145,17 +257,28 @@ const UserCount = (props: {count: number}) => {
   );
 };
 
-
 const ContinueFooter = () => {
-  const params = useParams<{serverId: string}>();
+  const params = useParams<{ serverId: string }>();
   const store = useStore();
 
   const server = () => store.servers.get(params.serverId!);
   const defaultChannel = () => store.channels.get(server()?.defaultChannelId);
 
   return (
-    <CustomLink href={RouterEndpoints.SERVER_MESSAGES(params.serverId!, defaultChannel()?.id!)} class={styles.continueFooter}>
-      <Button margin={0} class={styles.button} label={`Continue To #${defaultChannel()?.name}`} color="white" customChildren={<Icon name="keyboard_arrow_right" size={24} />} />
+    <CustomLink
+      href={RouterEndpoints.SERVER_MESSAGES(
+        params.serverId!,
+        defaultChannel()?.id!
+      )}
+      class={styles.continueFooter}
+    >
+      <Button
+        margin={0}
+        class={styles.button}
+        label={`Continue To #${defaultChannel()?.name}`}
+        color="white"
+        customChildren={<Icon name="keyboard_arrow_right" size={24} />}
+      />
     </CustomLink>
   );
 };
diff --git a/src/components/servers/customize-pane/styles.module.scss b/src/components/servers/customize-pane/styles.module.scss
index 0d97e75a..7f6bfaad 100644
--- a/src/components/servers/customize-pane/styles.module.scss
+++ b/src/components/servers/customize-pane/styles.module.scss
@@ -1,34 +1,34 @@
 .pane {
   display: flex;
+  flex: 1;
   flex-direction: column;
   padding: 10px;
-  flex: 1;
 }
 
 .welcomeMessage {
   display: flex;
-  flex-direction: column;
   display: flex;
   flex-direction: column;
+  flex-direction: column;
   margin-bottom: 8px;
   .title {
-    text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
 .questionList {
   display: flex;
-  gap: 8px;
   flex-direction: column;
+  gap: 8px;
 }
 
 .questionItem {
   display: flex;
   flex-direction: column;
-  background-color: rgba(255, 255, 255, 0.05);
   padding: 8px;
   border-radius: 6px;
+  background-color: rgba(255, 255, 255, 0.05);
 
   .title {
     word-break: break-word;
@@ -39,7 +39,6 @@
 .answerList {
   display: flex;
   flex-direction: column;
-  gap: 8px;
   margin-top: 8px;
 }
 
@@ -50,40 +49,71 @@
     flex: 1;
   }
   .radioBox {
-    margin: 0;
+    flex: 1;
     padding: 0;
+    margin: 0;
     background-color: transparent;
-    flex: 1;
   }
   .userCount {
     display: flex;
     align-items: center;
-    font-size: 12px;
-    gap: 4px;
+    padding: 2px 6px;
     border-radius: 999px;
     background-color: rgba(0, 0, 0, 0.2);
-    padding: 2px 6px;
+    font-size: 12px;
+    gap: 4px;
   }
 }
-
-.continueFooter {
+.outerAnswerItem {
+  display: flex;
+  flex-direction: column;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  gap: 4px;
+}
+.roleList {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  .roleIcon {
+    margin-right: 2px;
+    margin-left: 2px;
+  }
 
-  font-size: 14px;
-  backdrop-filter: blur(34px);
+  .roleItem {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    padding-right: 4px;
+    padding-left: 4px;
+    border: solid 1px rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    background-color: rgba(255, 255, 255, 0.04);
+    font-size: 12px;
+    gap: 3px;
+  }
+}
+
+.continueFooter {
   position: sticky;
-  bottom: 10px;
   z-index: 111;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
   margin: 10px;
   margin-bottom: 0;
 
   border-radius: 8px;
 
+  font-size: 14px;
+  backdrop-filter: blur(34px);
+
   .button {
+    overflow: hidden;
     flex: 1;
     padding: 12px;
-    overflow: hidden;
   }
   .button > span:nth-child(1) {
     width: 100%;