diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
index 1f739ef99..f11790a03 100644
--- a/client/src/components/ChatMessage.tsx
+++ b/client/src/components/ChatMessage.tsx
@@ -156,9 +156,7 @@ const ChatElement = React.memo((
                     }
                     defaultOpen={GAME_MANAGER.getMySpectator()}
                 >
-                    <div className="grave-message">
-                        <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
-                    </div>
+                    <GraveComponent grave={message.variant.grave} playerNames={playerNames}/>
                 </DetailsSummary>
             </div>;
     }
diff --git a/client/src/components/DetailsSummary.tsx b/client/src/components/DetailsSummary.tsx
index 92202cf28..2fa242b86 100644
--- a/client/src/components/DetailsSummary.tsx
+++ b/client/src/components/DetailsSummary.tsx
@@ -24,7 +24,7 @@ export default function DetailsSummary(props: Readonly<{
     }, [props.open, openState, props.disabled]);
 
     return <div className={"details-summary-container "+(props.className??"")}>
-        <div className="details-summary-summary-container"
+        <div className={"details-summary-summary-container"+(open ? " open" : "")}
             onClick={() => {
                 if(props.disabled) return;
                 setOpen(!open);
@@ -33,7 +33,7 @@ export default function DetailsSummary(props: Readonly<{
         >
             {(props.dropdownArrow === undefined || props.dropdownArrow === true) ? 
                 ((props.disabled === undefined || props.disabled===false) ? 
-                    <Icon>{open ? "expand_more" : "expand_less"}</Icon>
+                    <Icon>{open ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon>
                  : 
                     <Icon>close</Icon>
                 ) : 
diff --git a/client/src/components/TextAreaDropdown.tsx b/client/src/components/TextAreaDropdown.tsx
index 84d425acb..1913b7f07 100644
--- a/client/src/components/TextAreaDropdown.tsx
+++ b/client/src/components/TextAreaDropdown.tsx
@@ -1,17 +1,19 @@
-import { ReactElement, useEffect, useMemo, useState } from "react";
+import React, { ReactElement, useEffect, useMemo, useState } from "react";
 import StyledText from "./StyledText";
 import { sanitizePlayerMessage } from "./ChatMessage";
 import GAME_MANAGER, { replaceMentions } from "..";
-import React from "react";
 import { Button } from "./Button";
 import Icon from "./Icon";
 import translate from "../game/lang";
 import "./textAreaDropdown.css";
+import DetailsSummary from "./DetailsSummary";
 
 export function TextDropdownArea(props: Readonly<{
     titleString: string,
     savedText: string,
+    defaultOpen?: boolean,
     open?: boolean,
+    dropdownArrow?: boolean,
     onAdd?: () => void,
     onSubtract?: () => void,
     onSave: (text: string) => void,
@@ -37,18 +39,21 @@ export function TextDropdownArea(props: Readonly<{
     }
 
     return (
-        <details className="text-area-dropdown" open={props.open ?? false}>
-            <summary>
-                <TextDropdownLabel
-                    titleString={props.titleString}
-                    savedText={props.savedText}
-                    field={field}
-                    onAdd={props.onAdd}
-                    onSubtract={props.onSubtract}
-                    onSave={save}
-                    cantPost={props.cantPost}
-                />
-            </summary>
+        <DetailsSummary
+            className="text-area-dropdown"
+            dropdownArrow={props.dropdownArrow}
+            defaultOpen={props.defaultOpen}
+            open={props.open}
+            summary={<TextDropdownLabel
+                titleString={props.titleString}
+                savedText={props.savedText}
+                field={field}
+                onAdd={props.onAdd}
+                onSubtract={props.onSubtract}
+                onSave={save}
+                cantPost={props.cantPost}
+            />}
+        >
             {unsaved ? "Unsaved" : ""}
             <PrettyTextArea
                 field={field}
@@ -56,7 +61,7 @@ export function TextDropdownArea(props: Readonly<{
                 save={save}
                 send={send}
             />
-        </details>
+        </DetailsSummary>
     )
 }
 
@@ -144,11 +149,12 @@ function PrettyTextArea(props: Readonly<{
     const [writing, setWriting] = useState<boolean>(false);
     const [hover, setHover] = useState<boolean>(false);
 
-    return <div
+    return <div className="pretty-text-area"
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onTouchEnd={() => setWriting(true)}
         onFocus={() => setWriting(true)}
-        onBlur={() => setWriting(false)}
+        onBlur={() => {setWriting(false); setHover(false)}}
     >
         {(!writing && !hover)
             ? <div className="textarea">
diff --git a/client/src/components/chatMessage.css b/client/src/components/chatMessage.css
index e7d7f7947..00e348b1f 100644
--- a/client/src/components/chatMessage.css
+++ b/client/src/components/chatMessage.css
@@ -101,14 +101,6 @@
 .chat-message.warning {
     background-color: #660000;
 }
-.grave-message {
-    border: .13rem solid var(--background-border-color);
-    border-bottom-color: var(--background-border-shadow-color);
-    border-right-color: var(--background-border-shadow-color);
-    border-radius: .5rem;
-    margin: .13rem;
-    padding: .25rem;
-}
 
 .kira-guess-results {
     display: flex;
@@ -134,4 +126,7 @@
 }
 .kira-guess-result.notInGame{
     border-color: red;
+}
+.chat-message-div .details-summary-container {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/client/src/components/detailsSummary.css b/client/src/components/detailsSummary.css
index 6d5152ba1..c42d88b41 100644
--- a/client/src/components/detailsSummary.css
+++ b/client/src/components/detailsSummary.css
@@ -5,19 +5,24 @@
     align-items: center;
 
     background-color: var(--primary-color);
-    border: .13rem solid var(--primary-border-color);
-    border-bottom-color: var(--primary-border-shadow-color);
-    border-right-color: var(--primary-border-shadow-color);
-    margin: .13rem;
-    padding: .13rem;
     border-radius: .5rem;
+    padding: .13rem;
+}
+.details-summary-summary-container.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: .13rem solid var(--primary-border-shadow-color);
 }
 .details-summary-container{
     display: flex;
     flex-direction: column;
-    width: 100%;
-    margin: 0;
+    margin: .13rem;
     padding: 0;
+    background-color: var(--secondary-color);
+    border: .13rem solid var(--primary-border-color);
+    border-bottom-color: var(--primary-border-shadow-color);
+    border-right-color: var(--primary-border-shadow-color);
+    border-radius: 0.5rem;
     /* justify-content: left;
     align-items: center; */
 }
\ No newline at end of file
diff --git a/client/src/components/dragAndDrop.css b/client/src/components/dragAndDrop.css
index 595212c2e..d95c16212 100644
--- a/client/src/components/dragAndDrop.css
+++ b/client/src/components/dragAndDrop.css
@@ -1,5 +1,6 @@
 div.draggable {
-    cursor: grab
+    cursor: grab;
+    touch-action: none;
 }
 
 div.draggable.dragged {
diff --git a/client/src/components/gameModeSettings/EnabledModifiersDisplay.tsx b/client/src/components/gameModeSettings/EnabledModifiersDisplay.tsx
deleted file mode 100644
index 11f65ee49..000000000
--- a/client/src/components/gameModeSettings/EnabledModifiersDisplay.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ReactElement, useContext } from "react";
-import { MODIFIERS, ModifierType } from "../../game/gameState.d";
-import React from "react";
-import translate from "../../game/lang";
-import StyledText from "../StyledText";
-import { GameModeContext } from "./GameModesEditor";
-import Select, { SelectOptionsSearch } from "../Select";
-
-export function EnabledModifiersDisplay(props: {
-    disabled: boolean,
-    enabledModifiers?: ModifierType[],
-    onChange?: (modifiers: ModifierType[]) => void,
-}): ReactElement {
-    let {enabledModifiers} = useContext(GameModeContext);
-
-    enabledModifiers = props.enabledModifiers ?? (enabledModifiers as ModifierType[]);
-
-    const dropdownsSelected = props.disabled === true ? enabledModifiers : (enabledModifiers as (ModifierType | null)[]).concat([null])
-
-    return <div className="chat-menu-colors selector-section">
-            <h2><StyledText>{translate("modifiers")}</StyledText></h2>
-            {dropdownsSelected.map((currentModifier, index) => {
-                return <EnabledModifierDisplay
-                    key={index}
-                    modifier={currentModifier}
-                    disabled={props.disabled}
-                    choosableModifiers={
-                        Object.values(MODIFIERS).filter((m) => !enabledModifiers.includes(m)||m===currentModifier)
-                    }
-                    onChange={newModifier => {
-                        if (props.onChange === undefined)
-                            return;
-                        
-                        let currentModifiers: (ModifierType | null)[] = [...enabledModifiers];
-                        currentModifiers.splice(index, 1, newModifier);
-
-                        //make sure to remove duplicates & null
-                        const out = currentModifiers
-                            .filter((value, index, self) => self.indexOf(value) === index)
-                            .filter(modifier => modifier !== null) as ModifierType[];
-
-                        props.onChange(out);
-                    }}
-                />
-                
-            })}
-    </div>
-}
-
-function EnabledModifierDisplay(props: {
-    modifier: ModifierType | null,
-    choosableModifiers?: ModifierType[],
-    disabled: boolean,
-    onChange: (modifier: ModifierType | null) => void,
-}): ReactElement {
-
-    const optionMap: SelectOptionsSearch<ModifierType | "none"> = new Map();
-    optionMap.set("none", [
-        <StyledText noLinks={true}>{translate("none")}</StyledText>,
-        translate("none")
-    ]);
-    for (let modifier of (props.choosableModifiers ?? MODIFIERS)) {
-        optionMap.set(modifier, [
-            <StyledText noLinks={true}>{translate(modifier)}</StyledText>,
-            translate(modifier)
-        ]);
-    }
-
-    return <Select
-        value={props.modifier === null ?  "none" : props.modifier}
-        disabled={props.disabled}
-        optionsSearch={optionMap}
-        onChange={e => props.onChange(
-            e === "none" ? null : e as ModifierType 
-        )}
-    />
-}
\ No newline at end of file
diff --git a/client/src/components/gameModeSettings/EnabledModifiersSelector.tsx b/client/src/components/gameModeSettings/EnabledModifiersSelector.tsx
new file mode 100644
index 000000000..a39c2d7d3
--- /dev/null
+++ b/client/src/components/gameModeSettings/EnabledModifiersSelector.tsx
@@ -0,0 +1,78 @@
+import React, { ReactElement, useCallback, useContext } from "react";
+import { MODIFIERS, ModifierType } from "../../game/gameState.d";
+import translate from "../../game/lang";
+import StyledText from "../StyledText";
+import { GameModeContext } from "./GameModesEditor";
+import { Button } from "../Button";
+
+export function EnabledModifiersSelector(props: Readonly<{
+    disabled: boolean,
+    enabledModifiers?: ModifierType[],
+    onChange?: (modifiers: ModifierType[]) => void,
+}>): ReactElement {
+    let { enabledModifiers } = useContext(GameModeContext);
+    enabledModifiers = props.enabledModifiers ?? enabledModifiers;
+
+    return <div className="chat-menu-colors selector-section">
+        <h2>{translate("modifiers")}</h2>
+        <EnabledModifiersDisplay
+            disabled={props.disabled}
+            modifiable={!props.disabled}
+            enabledModifiers={enabledModifiers}
+            onEnableModifiers={(modifiers: ModifierType[]) => {
+                if (props.onChange) {
+                    props.onChange(enabledModifiers.concat(modifiers))
+                }
+            }}
+            onDisableModifiers={(modifiers: ModifierType[]) => {
+                if (props.onChange) {
+                    props.onChange(enabledModifiers.filter(modifier => !modifiers.includes(modifier)))
+                }
+            }}
+        />
+    </div>
+}
+
+type EnabledModifiersDisplayProps = {
+    enabledModifiers: ModifierType[],
+} & (
+    {
+        modifiable: true,
+        onDisableModifiers: (modifiers: ModifierType[]) => void,
+        onEnableModifiers: (modifiers: ModifierType[]) => void,
+        disabled?: boolean,
+    } |
+    {
+        modifiable?: false,
+    }
+)
+
+export function EnabledModifiersDisplay(props: EnabledModifiersDisplayProps): ReactElement {
+    const isEnabled = useCallback((modifier: ModifierType) => props.enabledModifiers.includes(modifier), [props.enabledModifiers]);
+
+    const modifierTextElement = (modifier: ModifierType) => {
+
+        return <StyledText 
+            noLinks={props.modifiable ?? false}
+            className={!isEnabled(modifier) ? "keyword-disabled" : undefined}
+        >
+            {translate(modifier)}
+        </StyledText>
+    }
+
+    return <div>
+        {MODIFIERS.map((modifier, i) => 
+            props.modifiable 
+                ? <Button key={modifier}
+                    disabled={props.disabled}
+                    onClick={() => (!isEnabled(modifier) ? props.onEnableModifiers : props.onDisableModifiers)([modifier])}
+                >
+                    {modifierTextElement(modifier)}
+                </Button> 
+                : <div key={modifier} className={"placard" + (!isEnabled(modifier) ? " disabled" : "")}>
+                    {modifierTextElement(modifier)}
+                </div>
+            
+        )}
+    </div>
+}
\ No newline at end of file
diff --git a/client/src/components/gameModeSettings/EnabledRoleSelector.tsx b/client/src/components/gameModeSettings/EnabledRoleSelector.tsx
index d5e1c265b..e42fa0308 100644
--- a/client/src/components/gameModeSettings/EnabledRoleSelector.tsx
+++ b/client/src/components/gameModeSettings/EnabledRoleSelector.tsx
@@ -13,12 +13,12 @@ import { GameModeContext } from "./GameModesEditor";
 
 
 
-export default function EnabledRoleSelector(props: {
+export default function EnabledRoleSelector(props: Readonly<{
     disabled?: boolean,
     onDisableRoles: (role: Role[]) => void,
     onEnableRoles: (role: Role[]) => void,
     onIncludeAll: () => void
-}): ReactElement {
+}>): ReactElement {
     const {enabledRoles} = useContext(GameModeContext);
 
     const [roleOutlineOption, setRoleOutlineOption] = useState<RoleOutlineOption>({ type: "roleSet", roleSet: "town" });
@@ -37,7 +37,7 @@ export default function EnabledRoleSelector(props: {
 
     return <div className="role-specific-colors selector-section">
         <h2>{translate("menu.lobby.enabledRoles")}</h2>
-        <div>
+        {(props.disabled !== true) && <div>
             <Button
                 onClick={props.onIncludeAll}
                 disabled={props.disabled}
@@ -63,7 +63,7 @@ export default function EnabledRoleSelector(props: {
                     onChange={setRoleOutlineOption}
                 />
             </div>
-        </div>
+        </div>}
 
         <EnabledRolesDisplay 
             enabledRoles={enabledRoles}
@@ -111,7 +111,7 @@ export function EnabledRolesDisplay(props: EnabledRolesDisplayProps): ReactEleme
                 >
                     {roleTextElement(role)}
                 </Button> 
-                : <div key={i} className={"disabled-role-element" + (!isEnabled(role) ? " disabled" : "")}>
+                : <div key={i} className={"placard" + (!isEnabled(role) ? " disabled" : "")}>
                     {roleTextElement(role)}
                 </div>
             
diff --git a/client/src/components/gameModeSettings/GameModeSelector.tsx b/client/src/components/gameModeSettings/GameModeSelector.tsx
index a1877401d..6aac504d5 100644
--- a/client/src/components/gameModeSettings/GameModeSelector.tsx
+++ b/client/src/components/gameModeSettings/GameModeSelector.tsx
@@ -144,7 +144,7 @@ function GameModeSelectorPanel(props: {
         return true;
     }
 
-    const verbose = !props.canModifySavedGameModes;
+    const verbose = false;
 
     const shareableGameModeJsonString = JSON.stringify({
         format: LATEST_VERSION_STRING,
diff --git a/client/src/components/gameModeSettings/GameModesEditor.tsx b/client/src/components/gameModeSettings/GameModesEditor.tsx
index e87351f7f..d80fefb1d 100644
--- a/client/src/components/gameModeSettings/GameModesEditor.tsx
+++ b/client/src/components/gameModeSettings/GameModesEditor.tsx
@@ -13,7 +13,7 @@ import { defaultPhaseTimes } from "../../game/gameState";
 import { GameModeSelector } from "./GameModeSelector";
 import { Helmet } from "react-helmet";
 import { ShareableGameMode } from "./gameMode";
-import { EnabledModifiersDisplay } from "./EnabledModifiersDisplay";
+import { EnabledModifiersSelector } from "./EnabledModifiersSelector";
 
 const GameModeContext = createContext({
     roleList: [] as RoleList,
@@ -118,7 +118,7 @@ export default function GameModesEditor(props: Readonly<{
                     />
                 </div>
                 <div>
-                    <EnabledModifiersDisplay
+                    <EnabledModifiersSelector
                         disabled={false}
                         onChange={onSetEnabledModifiers}
                     />
diff --git a/client/src/components/gameModeSettings/OutlineSelector.tsx b/client/src/components/gameModeSettings/OutlineSelector.tsx
index 3d20e2262..eae302b8f 100644
--- a/client/src/components/gameModeSettings/OutlineSelector.tsx
+++ b/client/src/components/gameModeSettings/OutlineSelector.tsx
@@ -1,13 +1,14 @@
 import React, { ReactElement, useCallback, useContext } from "react";
 import "./outlineSelector.css";
 import translate from "../../game/lang";
-import { getAllRoles, getRolesFromRoleSet, ROLE_SETS, RoleList, RoleOutline, RoleOutlineOption, simplifyRoleOutline, translateRoleOutlineOption} from "../../game/roleListState.d";
+import { getAllRoles, getRolesFromRoleSet, ROLE_SETS, RoleList, RoleOutline, RoleOutlineOption, simplifyRoleOutline, translateRoleOutline, translateRoleOutlineOption} from "../../game/roleListState.d";
 import { Role } from "../../game/roleState.d";
 import Icon from "../Icon";
 import { DragAndDrop } from "../DragAndDrop";
 import { GameModeContext } from "./GameModesEditor";
 import Select, { SelectOptionsSearch } from "../Select";
 import StyledText from "../StyledText";
+import { Button } from "../Button";
 import { useLobbyOrGameState } from "../useHooks";
 
 type RoleOutlineSelectorProps = {
@@ -207,28 +208,35 @@ export function OutlineListSelector(props: {
 
     return <section className="graveyard-menu-colors selector-section">
         <h2>{translate("menu.lobby.roleList")}: {roleList.length}</h2>
-        <button disabled={props.disabled} onClick={simplify}>
+        {(props.disabled !== true) && <Button onClick={simplify}>
             <Icon>filter_list</Icon> {translate("simplify")}
-        </button>
+        </Button>}
         <div className="role-list-setter-list">
             <DragAndDrop 
-                items={roleList}
+                items={structuredClone(roleList)}
                 onDragEnd={props.setRoleList}
                 disabled={props.disabled}
                 render={(outline, index) => {
                     return <div key={index} className="role-list-setter-outline-div">
                         {props.disabled === true || <Icon>drag_indicator</Icon>}
-                        <RoleOutlineSelector
-                            disabled={props.disabled}
-                            roleOutline={outline}
-                            onChange={(value: RoleOutline) => {props.onChangeRolePicker(value, index);}}
-                            key={index}
-                        />
-                        {props.onRemoveOutline ? 
+                        {props.disabled === true
+                            ? <div className="placard">
+                                <StyledText>
+                                    {translateRoleOutline(outline)}
+                                </StyledText>
+                            </div>
+                            : <RoleOutlineSelector
+                                disabled={props.disabled}
+                                roleOutline={outline}
+                                onChange={(value: RoleOutline) => {props.onChangeRolePicker(value, index);}}
+                                key={index}
+                            />
+                        }
+                        {props.onRemoveOutline &&
                             <button disabled={props.disabled} onClick={() => {
                                 if(props.onRemoveOutline)
                                     props.onRemoveOutline(index)
-                        }}><Icon>delete</Icon></button> : null}
+                        }}><Icon>delete</Icon></button>}
                     </div>
                 }}
             />
diff --git a/client/src/components/gameModeSettings/PhaseTimeSelector.tsx b/client/src/components/gameModeSettings/PhaseTimeSelector.tsx
index 12a550ca8..7d2669962 100644
--- a/client/src/components/gameModeSettings/PhaseTimeSelector.tsx
+++ b/client/src/components/gameModeSettings/PhaseTimeSelector.tsx
@@ -39,26 +39,29 @@ function PhaseTimeSelector(props: Readonly<{
 }>): ReactElement {
     const phaseKey = "phase." + props.phase;
     
-    return <div>
+    return <div className="placard">
         <span>{translate(phaseKey)}</span>
-        <input
-            disabled={props.disabled ?? false}
-            name={phaseKey}
-            type="text"
-            value={props.time}
-            onChange={(e)=>{
-                const value = Number(e.target.value);
+        {props.disabled
+            ? props.time
+            : <input
+                disabled={props.disabled ?? false}
+                name={phaseKey}
+                type="text"
+                value={props.time}
+                onChange={(e)=>{
+                    const value = Number(e.target.value);
 
-                if (!isValidPhaseTime(value)) return
-                
-                props.onChange(props.phase, value);
-                
-            }}
-            onKeyUp={(e)=>{
-                if(e.key !== 'Enter') return;
-                
-                props.onChange(props.phase, props.time);
-            }}
-        />
+                    if (!isValidPhaseTime(value)) return
+                    
+                    props.onChange(props.phase, value);
+                    
+                }}
+                onKeyUp={(e)=>{
+                    if(e.key !== 'Enter') return;
+                    
+                    props.onChange(props.phase, props.time);
+                }}
+            /> 
+        }
     </div>
 }
\ No newline at end of file
diff --git a/client/src/components/gameModeSettings/disabledRoleSelector.css b/client/src/components/gameModeSettings/disabledRoleSelector.css
index 4d1c79417..e8b81c953 100644
--- a/client/src/components/gameModeSettings/disabledRoleSelector.css
+++ b/client/src/components/gameModeSettings/disabledRoleSelector.css
@@ -12,7 +12,7 @@
     flex-grow: 1;
     width: 5rem;
 }
-.disabled-role-element {
+.placard {
     display: inline-block;
     background-color: var(--primary-color);
     border: .13rem solid var(--primary-border-color);
@@ -21,6 +21,6 @@
     border-radius: .25rem;
     white-space: pre;
 }
-.disabled-role-element.disabled {
+.placard.disabled {
     background-color: var(--secondary-color);
 }
\ No newline at end of file
diff --git a/client/src/components/gameModeSettings/gameMode/dataFixer/v3.ts b/client/src/components/gameModeSettings/gameMode/dataFixer/v3.ts
index 75391a400..1ff195bfd 100644
--- a/client/src/components/gameModeSettings/gameMode/dataFixer/v3.ts
+++ b/client/src/components/gameModeSettings/gameMode/dataFixer/v3.ts
@@ -1,6 +1,6 @@
 import { VersionConverter } from ".";
 import { GameMode, GameModeData, GameModeStorage, ShareableGameMode } from "..";
-import { Settings } from "../../../../game/localStorage";
+import { getDefaultSettings, Settings } from "../../../../game/localStorage";
 import { RoleOutline, RoleOutlineOption } from "../../../../game/roleListState.d";
 import { Role } from "../../../../game/roleState.d";
 import { Failure, ParseResult, ParseSuccess, Success, isFailure } from "../parse";
@@ -27,6 +27,13 @@ function parseSettings(json: NonNullable<any>): ParseResult<Settings> {
         }
     }
 
+    for(const key of ['maxMenus', 'menuOrder']) {
+        if (!Object.keys(json).includes(key)) {
+            json.maxMenus = getDefaultSettings().maxMenus
+            json.menuOrder = getDefaultSettings().menuOrder
+        }
+    }
+
     if (json.format !== "v3") {
         return Failure("settingsFormatNotV3", json);
     }
diff --git a/client/src/components/gameModeSettings/outlineSelector.css b/client/src/components/gameModeSettings/outlineSelector.css
index 3d8134c37..d20db8d87 100644
--- a/client/src/components/gameModeSettings/outlineSelector.css
+++ b/client/src/components/gameModeSettings/outlineSelector.css
@@ -40,6 +40,7 @@
     align-items:center;
     gap: .25rem;
     display: flex;
+    overflow-x: auto;
 }
 .role-list-setter-add-button-div {
     justify-content: center;
diff --git a/client/src/components/gameModeSettings/phaseTimeSelector.css b/client/src/components/gameModeSettings/phaseTimeSelector.css
index 5196e056f..d772649e2 100644
--- a/client/src/components/gameModeSettings/phaseTimeSelector.css
+++ b/client/src/components/gameModeSettings/phaseTimeSelector.css
@@ -2,7 +2,6 @@
     max-height: 50vh;
     overflow-y: auto;
     display: flex;
-    gap: .25rem;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: 0.25rem;
@@ -12,20 +11,15 @@
     display: flex;
     flex-basis: 11rem;
     flex-grow: 1;
-    border: .13rem solid var(--primary-border-color);
     background-color: var(--secondary-color);
-    border-radius: 0.5rem;
     align-items: center;
     justify-content: space-between;
 }
 .phase-times-selector > .phase-times > div > span {
-    margin: 0 .25rem;
     white-space: pre;
 }
 .phase-times-selector > .phase-times > div > input {
-    border-top-color: var(--primary-border-shadow-color);
-    border-left-color: var(--primary-border-shadow-color);
-    border-bottom-color: var(--primary-border-color);
-    border-right-color: var(--primary-border-color);
     width: 3rem;
+    margin: 0;
+    padding: 0;
 }
\ No newline at end of file
diff --git a/client/src/components/grave.css b/client/src/components/grave.css
index 438e890b9..ebb468b39 100644
--- a/client/src/components/grave.css
+++ b/client/src/components/grave.css
@@ -1,9 +1,11 @@
 
 .grave {
     white-space: normal;
-    width: 100%;
     background-color: var(--primary-color);
-    border: 1px solid var(--primary-border-color);
+    margin: .25rem;
+    padding: .25rem;
+    border-radius: .5rem;
+    border: .13rem solid var(--primary-border-color);
 }
 .grave .note-area {
     background-color: var(--secondary-color);
diff --git a/client/src/components/textAreaDropdown.css b/client/src/components/textAreaDropdown.css
index 094d925ef..e42eeb9ee 100644
--- a/client/src/components/textAreaDropdown.css
+++ b/client/src/components/textAreaDropdown.css
@@ -1,28 +1,29 @@
-.text-area-dropdown details > div {
-    padding: .13rem;
+.pretty-text-area {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 }
 .text-area-dropdown .textarea, .text-area-dropdown textarea {
     text-align: left;
     height: 20rem;
-    width: 100%;
-    margin: 0;
+    margin: .13rem;
     text-wrap: wrap;
+    resize: none;
 }
 .text-area-dropdown .textarea > * {
     text-wrap: pretty;
 }
-.text-area-dropdown summary > div {
-    display: inline-flex;
+.text-area-dropdown .details-summary-summary-container > div {
+    display: flex;
     width: 100%;
     flex-direction: row;
     flex-wrap: wrap;
+    padding-left: .25rem;
     justify-content: space-between;
     text-align: left;
     align-items: baseline;
-    /* This is a little hacky. This whole thing is a little hacky.*/
-    padding-right: .75rem;
 }
-.text-area-dropdown summary > div > div {
+.text-area-dropdown .details-summary-summary-container > div > div {
     display:flex;
     flex-wrap: wrap;
     gap: 0.25rem;
diff --git a/client/src/components/useHooks.tsx b/client/src/components/useHooks.tsx
index 4c6c3cf11..d7ab73e48 100644
--- a/client/src/components/useHooks.tsx
+++ b/client/src/components/useHooks.tsx
@@ -23,6 +23,22 @@ function usePacketListener(listener: (type?: StateEventType) => void) {
     });
 }
 
+// https://stackoverflow.com/a/77278013/9157590
+function deepEqual<T>(a: T, b: T): boolean {
+    if (a === b) {
+        return true;
+    }
+
+    const bothAreObjects =
+        a && b && typeof a === "object" && typeof b === "object";
+
+    return (
+        bothAreObjects &&
+            Object.keys(a).length === Object.keys(b).length &&
+            Object.entries(a).every(([k, v]) => deepEqual(v, b[k as keyof T]))
+    );
+};
+
 export function useGameState<T>(
     getValue: (gameState: GameState) => T, 
     events?: StateEventType[],
@@ -39,7 +55,7 @@ export function useGameState<T>(
     usePacketListener((type?: StateEventType) => {
         if (GAME_MANAGER.state.stateType === "game" && (events ?? []).includes(type as StateEventType)) {
             const value = getValue(GAME_MANAGER.state);
-            if (value !== state) {
+            if (!deepEqual(value, state)) {
                 setState(value);
             }
         }
@@ -63,7 +79,10 @@ export function useLobbyState<T>(
 
     usePacketListener((type?: StateEventType) => {
         if (GAME_MANAGER.state.stateType === "lobby" && (events ?? []).includes(type as StateEventType)) {
-            setState(getValue(GAME_MANAGER.state));
+            const value = getValue(GAME_MANAGER.state);
+            if (!deepEqual(value, state)) {
+                setState(value);
+            }
         }
     });
 
@@ -88,7 +107,10 @@ export function useLobbyOrGameState<T>(
             (GAME_MANAGER.state.stateType === "lobby" || GAME_MANAGER.state.stateType === "game") 
             && (events ?? []).includes(type as StateEventType)
         ) {
-            setState(getValue(GAME_MANAGER.state));
+            const value = getValue(GAME_MANAGER.state);
+            if (!deepEqual(value, state)) {
+                setState(value);
+            }
         }
     });
 
diff --git a/client/src/game/localStorage.tsx b/client/src/game/localStorage.tsx
index b216017e4..31fc50bd3 100644
--- a/client/src/game/localStorage.tsx
+++ b/client/src/game/localStorage.tsx
@@ -3,6 +3,7 @@ import { CurrentFormat, GameModeStorage } from "../components/gameModeSettings/g
 import { Language } from "./lang";
 import { Role } from "./roleState.d";
 import parseFromJson from "../components/gameModeSettings/gameMode/dataFixer";
+import { ContentMenu } from "../menu/game/GameScreen";
 
 export function saveReconnectData(roomCode: number, playerId: number) {
     localStorage.setItem(
@@ -49,6 +50,8 @@ export type Settings = {
     accessibilityFont: boolean;
     defaultName: string | null;
     language: Language;
+    maxMenus: number;
+    menuOrder: ContentMenu[]
     roleSpecificMenus: Role[] // RoleSpecificMenuType=standalone for all listed roles, otherwise it should be playerlist
 };
 
@@ -59,7 +62,7 @@ export type RoleSpecificMenuType = "playerList" | "standalone";
 export function loadSettingsParsed(): Settings {
     const result = parseFromJson("Settings", loadSettings());
     if(result.type === "failure") {
-        return DEFAULT_SETTINGS;
+        return getDefaultSettings();
     }else{
         return result.value;
     }
@@ -74,7 +77,7 @@ export function loadSettings(): unknown {
             return null;
         }
     }
-    return DEFAULT_SETTINGS;
+    return getDefaultSettings();
 }
 export function saveSettings(newSettings: Partial<Settings>) {
     const currentSettings = parseFromJson("Settings", loadSettings());
@@ -82,7 +85,7 @@ export function saveSettings(newSettings: Partial<Settings>) {
 
     if(currentSettings.type === "failure") {
         localStorage.setItem("settings", JSON.stringify({
-            ...DEFAULT_SETTINGS,
+            ...getDefaultSettings(),
             ...newSettings,
         }));
     }else{
@@ -117,13 +120,23 @@ export function deleteGameModes() {
     localStorage.removeItem("savedGameModes");
 }
 
-
-export const DEFAULT_SETTINGS: Readonly<Settings> = {
-    format: "v3",
-    volume: 0.5,
-    fontSize: 1,
-    accessibilityFont: false,
-    language: "en_us",
-    defaultName: null,
-    roleSpecificMenus: []
-};
\ No newline at end of file
+export function getDefaultSettings(): Readonly<Settings> {
+    return {
+        format: "v3",
+        volume: 0.5,
+        fontSize: 1,
+        accessibilityFont: false,
+        language: "en_us",
+        defaultName: null,
+        maxMenus: window.innerWidth < 600 ? 1 : 6,
+        menuOrder: [
+            ContentMenu.WikiMenu, 
+            ContentMenu.GraveyardMenu, 
+            ContentMenu.PlayerListMenu, 
+            ContentMenu.ChatMenu, 
+            ContentMenu.WillMenu, 
+            ContentMenu.RoleSpecificMenu
+        ],
+        roleSpecificMenus: []
+    }
+}
\ No newline at end of file
diff --git a/client/src/game/messageListener.tsx b/client/src/game/messageListener.tsx
index 61b2346ec..03a5de720 100644
--- a/client/src/game/messageListener.tsx
+++ b/client/src/game/messageListener.tsx
@@ -279,6 +279,7 @@ export default function messageListener(packet: ToClientPacket){
         case "roleOutline":
             //role list entriy
             if(GAME_MANAGER.state.stateType === "lobby" || GAME_MANAGER.state.stateType === "game") {
+                GAME_MANAGER.state.roleList = structuredClone(GAME_MANAGER.state.roleList);
                 GAME_MANAGER.state.roleList[packet.index] = packet.roleOutline;
                 GAME_MANAGER.state.roleList = [...GAME_MANAGER.state.roleList];
             }
diff --git a/client/src/index.css b/client/src/index.css
index 4a951d07f..40bddbf63 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -177,8 +177,8 @@ button, select, summary {
     user-select: none;
 }
 input, option, textarea, .textarea {
-    border-top-color: var(--background-border-shadow-color);
-    border-left-color: var(--background-border-shadow-color);
+    border-top-color: var(--primary-border-shadow-color);
+    border-left-color: var(--primary-border-shadow-color);
 }
 
 :has(input):focus-within > button.clear {
diff --git a/client/src/index.tsx b/client/src/index.tsx
index db5236e2b..5d1a14c7e 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -6,7 +6,9 @@ import { GameManager, createGameManager } from './game/gameManager';
 import LoadingScreen from './menu/LoadingScreen';
 import route from './routing';
 
-export type Theme = "player-list-menu-colors" | "will-menu-colors" | "role-specific-colors" | "graveyard-menu-colors" | "wiki-menu-colors"
+export const DEV_ENV = process.env.NODE_ENV !== 'production';
+
+export type Theme = "chat-menu-colors" | "player-list-menu-colors" | "will-menu-colors" | "role-specific-colors" | "graveyard-menu-colors" | "wiki-menu-colors"
 
 const THEME_CSS_ATTRIBUTES = [
     'background-color', 'fade-color', 'primary-color', 'secondary-color', 
diff --git a/client/src/menu/Anchor.tsx b/client/src/menu/Anchor.tsx
index 7aefd54d9..53b365415 100644
--- a/client/src/menu/Anchor.tsx
+++ b/client/src/menu/Anchor.tsx
@@ -3,7 +3,6 @@ import "../index.css";
 import "./anchor.css";
 import translate, { switchLanguage } from "../game/lang";
 import GlobalMenu from "./GlobalMenu";
-import SettingsMenu from './Settings';
 import { loadSettingsParsed } from "../game/localStorage";
 import LoadingScreen from "./LoadingScreen";
 import { Theme } from "..";
@@ -159,8 +158,6 @@ export default function Anchor(props: Readonly<{
             let coverCardTheme: Theme | null = null;
             if (coverCard.type === WikiCoverCard || coverCard.type === WikiArticle) {
                 coverCardTheme = "wiki-menu-colors"
-            } else if (coverCard.type === SettingsMenu) {
-                coverCardTheme = "graveyard-menu-colors"
             }
 
             if (callback) {
diff --git a/client/src/menu/Settings.tsx b/client/src/menu/Settings.tsx
index c27d1fe68..fbd075353 100644
--- a/client/src/menu/Settings.tsx
+++ b/client/src/menu/Settings.tsx
@@ -3,20 +3,20 @@ import "./settings.css";
 import translate, { Language, languageName, LANGUAGES, switchLanguage } from "../game/lang";
 import StyledText, { computeKeywordData } from "../components/StyledText";
 import Icon from "../components/Icon";
-import { loadSettingsParsed, RoleSpecificMenuType, saveSettings } from "../game/localStorage";
-import { MobileContext, AnchorControllerContext, ANCHOR_CONTROLLER } from "./Anchor";
-import { Role } from "../game/roleState.d";
+import { loadSettingsParsed, saveSettings } from "../game/localStorage";
+import { AnchorControllerContext, ANCHOR_CONTROLLER } from "./Anchor";
 import AudioController from "./AudioController";
-import { getAllRoles } from "../game/roleListState.d";
 import CheckBox from "../components/CheckBox";
+import { DragAndDrop } from "../components/DragAndDrop";
+import { MENU_THEMES, MENU_TRANSLATION_KEYS } from "./game/GameScreen";
 
 export default function SettingsMenu(): ReactElement {
     const [volume, setVolume] = useState<number>(loadSettingsParsed().volume);
     const [fontSizeState, setFontSize] = useState<number>(loadSettingsParsed().fontSize);
     const [defaultName, setDefaultName] = useState<string | null>(loadSettingsParsed().defaultName);
-    const [roleSpecificMenuSettings, setRoleSpecificMenuSettings] = useState(loadSettingsParsed().roleSpecificMenus);
     const [accessibilityFontEnabled, setAccessibilityFontEnabled] = useState(loadSettingsParsed().accessibilityFont);
-    const mobile = useContext(MobileContext)!;
+    const [menuOrder, setMenuOrder] = useState(loadSettingsParsed().menuOrder);
+    const [maxMenus, setMaxMenus] = useState(loadSettingsParsed().maxMenus);
     const anchorController = useContext(AnchorControllerContext)!;
 
     useEffect(() => {
@@ -31,21 +31,23 @@ export default function SettingsMenu(): ReactElement {
         </header>
         
         <main className="settings-menu">
-            <div>
-                <section className="horizontal">
-                    <section className="standout">
-                        <h2><Icon size="small">volume_up</Icon> {translate("menu.settings.volume")}</h2>
-                        <input className="settings-volume" type="range" min="0" max="1" step="0.01" 
-                            value={volume} 
-                            onChange={(e) => {
-                                const volume = parseFloat(e.target.value);
-                                saveSettings({volume});
-                                setVolume(volume);
-                            }
-                        }/>
-                    </section>
-                    <section className="standout">
-                        <h2>{translate("menu.settings.fontSize")}</h2>
+            <div className="graveyard-menu-colors">
+                <h2>{translate("menu.settings.general")}</h2>
+                <section>
+                    <h2><Icon size="small">volume_up</Icon> {translate("menu.settings.volume")}</h2>
+                    <input className="settings-volume" type="range" min="0" max="1" step="0.01" 
+                        value={volume} 
+                        onChange={(e) => {
+                            const volume = parseFloat(e.target.value);
+                            saveSettings({volume});
+                            setVolume(volume);
+                        }
+                    }/>
+                </section>
+                <section>
+                    <h2>{translate("menu.settings.font")}</h2>
+                    <label>
+                        {translate("menu.settings.fontSize")}
                         <input type="number" min="0.5" max="2" step="0.1"
                             value={fontSizeState}
                             onChange={(e)=>{
@@ -56,35 +58,66 @@ export default function SettingsMenu(): ReactElement {
                                 setFontSize(fontSize);
                             }}
                         />
-                    </section>
-                    <section className="standout">
-                        <h2><Icon size="small">language</Icon> {translate("menu.settings.language")}</h2>
-                        <select 
-                            name="lang-select" 
-                            defaultValue={loadSettingsParsed().language}
-                            onChange={e => {
-                                const language = e.target.options[e.target.selectedIndex].value as Language;
-                                switchLanguage(language);
-                                saveSettings({language});
-                                computeKeywordData()
-                                anchorController.reload();
-                            }}
-                        >
-                            {LANGUAGES.map(lang => <option key={lang} value={lang}>{languageName(lang)}</option>)}
-                        </select>
-                    </section>
+                    </label>
+                    <label>
+                        {translate("menu.settings.accessibilityFont")}
+                        <CheckBox checked={accessibilityFontEnabled} onChange={(checked: boolean) => {
+                            setAccessibilityFontEnabled(checked);
+                            saveSettings({accessibilityFont: checked});
+                        }}></CheckBox>
+                    </label>
                 </section>
                 <section>
-                    <h2><StyledText className="keyword-evil">{translate("menu.settings.dangerZone")}</StyledText></h2>
-                    <button onClick={()=>{
-                        if(!window.confirm(translate("confirmDelete"))) return;
-                        localStorage.clear();
-                        anchorController.clearCoverCard();
-                    }}><Icon>delete_forever</Icon> {translate('menu.settings.eraseSaveData')}</button>
+                    <h2><Icon size="small">language</Icon> {translate("menu.settings.language")}</h2>
+                    <select 
+                        name="lang-select" 
+                        defaultValue={loadSettingsParsed().language}
+                        onChange={e => {
+                            const language = e.target.options[e.target.selectedIndex].value as Language;
+                            switchLanguage(language);
+                            saveSettings({language});
+                            computeKeywordData()
+                            anchorController.reload();
+                        }}
+                    >
+                        {LANGUAGES.map(lang => <option key={lang} value={lang}>{languageName(lang)}</option>)}
+                    </select>
                 </section>
             </div>
-            <div>
-                <section className="standout">
+            <div className="chat-menu-colors">
+                <h2>{translate("menu.settings.gameplay")}</h2>
+                <section>
+                    <h2>{translate("menu.settings.menus")}</h2>
+                    <label>
+                        {translate("menu.settings.maxMenus")}
+                        <input type="number" min="1" max="6" step="1"
+                            value={maxMenus}
+                            onChange={(e)=>{
+                                if(e.target.value === "") return;
+                                const maxMenus = parseFloat(e.target.value);
+                                if(Math.floor(maxMenus) !== maxMenus || maxMenus < 1 || maxMenus > 6) return;
+                                saveSettings({maxMenus});
+                                setMaxMenus(maxMenus);
+                            }}
+                        />
+                    </label>
+                    <div>
+                        {translate("menu.settings.menuOrder")}
+                        <div className="menu-list">
+                            <DragAndDrop
+                                items={menuOrder}
+                                render={menu => <div className={"placard " + (MENU_THEMES[menu] ?? "")}>
+                                    {translate(MENU_TRANSLATION_KEYS[menu] + ".icon")}
+                                </div>}
+                                onDragEnd={newItems => {
+                                    saveSettings({menuOrder: [...newItems]})
+                                    setMenuOrder([...newItems])
+                                }}
+                            />
+                        </div>
+                    </div>
+                </section>
+                <section>
                     <h2>{translate("menu.settings.defaultName")}</h2>
                     <input type="text"
                         value={defaultName===null?"":defaultName} 
@@ -96,50 +129,13 @@ export default function SettingsMenu(): ReactElement {
                         }
                     }/>
                 </section>
-                <section className="standout">
-                    <h2>{translate("menu.settings.accessibility")}</h2>
-                    <label>
-                        {translate("menu.settings.font")}
-                        <CheckBox checked={accessibilityFontEnabled} onChange={(checked: boolean) => {
-                            setAccessibilityFontEnabled(checked);
-                            saveSettings({accessibilityFont: checked});
-                        }}></CheckBox>
-                    </label>
-                </section>
                 <section>
-                    {mobile && <h2>{translate("menu.settings.advanced")}</h2>}
-                    <details className="standout role-specific-menu-settings">
-                        <summary>
-                            {translate("menu.settings.roleSpecificMenus")}
-                        </summary>
-                        {
-                            getAllRoles().map(role => {
-                                // const roleSpecificMenuExists = type.roleSpecificMenu;
-                                const menuType: RoleSpecificMenuType = roleSpecificMenuSettings.includes(role as Role) ? "standalone" : "playerList";
-
-
-                                return <div className="role-specific-menu-settings-selector" key={role} >
-                                    <StyledText>{translate(`role.${role}.name`)}</StyledText>
-                                    <select defaultValue={menuType} onChange={e => {
-                                        let newRoleSpecificMenuSettings = [...roleSpecificMenuSettings].filter(x => 
-                                            getAllRoles().includes(x)
-                                        );
-
-                                        if(e.target.options[e.target.selectedIndex].value === "playerList") {
-                                            newRoleSpecificMenuSettings = [...newRoleSpecificMenuSettings].filter(x => x !== role);
-                                        } else {
-                                            newRoleSpecificMenuSettings = [...newRoleSpecificMenuSettings, role as Role];
-                                        }
-                                        setRoleSpecificMenuSettings(newRoleSpecificMenuSettings);
-                                        saveSettings({ roleSpecificMenus: newRoleSpecificMenuSettings });
-                                    }}>
-                                        <option value="playerList">{translate("menu.settings.roleSpecificMenus.playerList")}</option>
-                                        <option value="standalone">{translate("menu.settings.roleSpecificMenus.standalone")}</option>
-                                    </select>
-                                </div>
-                            })
-                        }
-                    </details>
+                    <h2><StyledText className="keyword-evil">{translate("menu.settings.dangerZone")}</StyledText></h2>
+                    <button onClick={()=>{
+                        if(!window.confirm(translate("confirmDelete"))) return;
+                        localStorage.clear();
+                        anchorController.clearCoverCard();
+                    }}><Icon>delete_forever</Icon> {translate('menu.settings.eraseSaveData')}</button>
                 </section>
             </div>
         </main>
diff --git a/client/src/menu/anchor.css b/client/src/menu/anchor.css
index ea3c3eb8e..6cfc24c83 100644
--- a/client/src/menu/anchor.css
+++ b/client/src/menu/anchor.css
@@ -67,8 +67,8 @@
 .anchor .global-menu-button {
     z-index: 101;
     position: fixed;
-    right: .2rem;
-    top: .2rem;
+    right: .25rem;
+    top: .25rem;
     height: fit-content;
     width: fit-content;
     font-size: 1.5rem;
@@ -89,7 +89,7 @@
 
 .anchor-cover-card-content {
     display: flex;
-    padding: 1.5rem;
+    padding: 1rem;
     width: 100%;
     height: 100%;
 }
@@ -112,7 +112,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    padding: 4rem 2rem;
+    padding: 3rem 1rem;
 }
 
 .anchor-cover-card-background-cover::before {
diff --git a/client/src/menu/game/GameScreen.tsx b/client/src/menu/game/GameScreen.tsx
index 16f236527..833c2c719 100644
--- a/client/src/menu/game/GameScreen.tsx
+++ b/client/src/menu/game/GameScreen.tsx
@@ -1,10 +1,10 @@
 import React, { createContext, ReactElement, useCallback, useContext, useEffect, useState } from "react";
-import HeaderMenu from "./HeaderMenu";
+import HeaderMenu, { MenuButtons } from "./HeaderMenu";
 import GraveyardMenu from "./gameScreenContent/GraveyardMenu";
 import ChatMenu from "./gameScreenContent/ChatMenu";
 import PlayerListMenu from "./gameScreenContent/PlayerListMenu";
 import WillMenu from "./gameScreenContent/WillMenu";
-import GAME_MANAGER, { modulus } from "../..";
+import GAME_MANAGER, { DEV_ENV, modulus, Theme } from "../..";
 import WikiMenu from "./gameScreenContent/WikiMenu";
 import "../../index.css";
 import "./gameScreen.css";
@@ -17,6 +17,7 @@ import { Button } from "../../components/Button";
 import translate from "../../game/lang";
 import { useGameState } from "../../components/useHooks";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { loadSettingsParsed } from "../../game/localStorage";
 
 export enum ContentMenu {
     ChatMenu = "ChatMenu",
@@ -36,6 +37,24 @@ export const MENU_ELEMENTS = {
     [ContentMenu.WikiMenu]: WikiMenu
 }
 
+export const MENU_THEMES: Record<ContentMenu, Theme | null> = {
+    [ContentMenu.ChatMenu]: "chat-menu-colors",
+    [ContentMenu.PlayerListMenu]: "player-list-menu-colors",
+    [ContentMenu.RoleSpecificMenu]: "role-specific-colors",
+    [ContentMenu.WillMenu]: "will-menu-colors",
+    [ContentMenu.GraveyardMenu]: "graveyard-menu-colors",
+    [ContentMenu.WikiMenu]: "wiki-menu-colors"
+}
+
+export const MENU_TRANSLATION_KEYS: Record<ContentMenu, string> = {
+    [ContentMenu.ChatMenu]: "menu.chat",
+    [ContentMenu.PlayerListMenu]: "menu.playerList",
+    [ContentMenu.RoleSpecificMenu]: "menu.ability",
+    [ContentMenu.WillMenu]: "menu.will",
+    [ContentMenu.GraveyardMenu]: "menu.gameMode",
+    [ContentMenu.WikiMenu]: "menu.wiki"
+}
+
 const ALL_CONTENT_MENUS = Object.values(ContentMenu);
 
 export interface MenuController {
@@ -45,6 +64,8 @@ export interface MenuController {
     menusOpen(): ContentMenu[];
     menuOpen(menu: ContentMenu): boolean;
     canOpen(menu: ContentMenu): boolean;
+    menus(): ContentMenu[]
+    maxMenus: number
 }
 
 export function useMenuController<C extends Partial<Record<ContentMenu, boolean>>>(
@@ -121,7 +142,11 @@ export function useMenuController<C extends Partial<Record<ContentMenu, boolean>
             },
             canOpen(menu): boolean {
                 return contentMenus[menu] !== undefined
-            }
+            },
+            menus(): ContentMenu[] {
+                return Object.keys(contentMenus).filter(menu => contentMenus[menu as ContentMenu] !== undefined) as ContentMenu[];
+            },
+            maxMenus: maxContent
         })
     }, [contentMenus, getMenuController, maxContent, setMenuController]);
 
@@ -144,17 +169,22 @@ export { MenuControllerContext }
 
 export default function GameScreen(): ReactElement {
     const mobile = useContext(MobileContext)!;
+    const { maxMenus, menuOrder } = loadSettingsParsed();
+
+    const menusOpen: [ContentMenu, boolean | undefined][] = [
+        [ContentMenu.WikiMenu, mobile ? undefined : false ],
+        [ContentMenu.GraveyardMenu, maxMenus > 4 ],
+        [ContentMenu.PlayerListMenu, maxMenus > 1 ],
+        [ContentMenu.ChatMenu, true ],
+        [ContentMenu.WillMenu, maxMenus > 3 ],
+        [ContentMenu.RoleSpecificMenu, maxMenus > 2 ],
+    ];
+
+    menusOpen.sort((a, b) => menuOrder.indexOf(a[0]) - menuOrder.indexOf(b[0]))
 
     const menuController = useMenuController(
-        mobile ? 2 : Infinity, 
-        {
-            WikiMenu: false,
-            GraveyardMenu: !mobile,
-            PlayerListMenu: true,
-            ChatMenu: true,
-            WillMenu: !mobile,
-            RoleSpecificMenu: !mobile,
-        },
+        maxMenus, 
+        Object.fromEntries(menusOpen),
         () => MENU_CONTROLLER_HOLDER.controller!,
         menuController => MENU_CONTROLLER_HOLDER.controller = menuController
     );
@@ -164,6 +194,15 @@ export default function GameScreen(): ReactElement {
         ["addChatMessages"]
     )!;
 
+    useEffect(() => {
+        const onBeforeUnload = (e: BeforeUnloadEvent) => {
+            if (!DEV_ENV) e.preventDefault()
+        };
+
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, [])
+
     useEffect(() => {
         const swipeEventListener = (right: boolean) => {
             // Close the furthest right menu, open the next one to the left or right
@@ -174,7 +213,7 @@ export default function GameScreen(): ReactElement {
             }
 
             const allowedMenus = ALL_CONTENT_MENUS.filter(menu => { 
-                return !menusOpen.includes(menu)
+                return !menusOpen.includes(menu) && menuController.menus().includes(menu)
             });
 
             const rightMostMenu = menusOpen[menusOpen.length - 1];
@@ -198,6 +237,7 @@ export default function GameScreen(): ReactElement {
                 <HeaderMenu chatMenuNotification={chatMenuNotification}/>
             </div>
             <GameScreenMenus />
+            {mobile && <MenuButtons chatMenuNotification={chatMenuNotification}/>}
         </div>
     </MenuControllerContext.Provider>
 }
@@ -225,11 +265,11 @@ export function GameScreenMenus(): ReactElement {
                     className="panel"
                     minSize={minSize}
                     defaultSize={mobile===false?defaultSizes[menu]:undefined}
-                    key={index}
-                    >
+                    key={menu}
+                >
                     <MenuElement />
                 </Panel>
-                {menusOpen.some((_, i) => i > index) && <PanelResizeHandle key={index+".handle"} className="panel-handle"/>}
+                {!mobile && menusOpen.some((_, i) => i > index) && <PanelResizeHandle key={index+".handle"} className="panel-handle"/>}
             </>
         })}
         {menuController.menusOpen().length === 0 && <Panel><div className="no-content">
diff --git a/client/src/menu/game/HeaderMenu.tsx b/client/src/menu/game/HeaderMenu.tsx
index d1e747684..b6c6a8824 100644
--- a/client/src/menu/game/HeaderMenu.tsx
+++ b/client/src/menu/game/HeaderMenu.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useContext, useMemo } from "react";
 import translate from "../../game/lang";
 import GAME_MANAGER from "../../index";
 import { PhaseState, Player, Verdict } from "../../game/gameState.d";
-import { MenuControllerContext, ContentMenu } from "./GameScreen";
+import { MenuControllerContext, ContentMenu, MENU_THEMES, MENU_TRANSLATION_KEYS } from "./GameScreen";
 import "./headerMenu.css";
 import StyledText from "../../components/StyledText";
 import Icon from "../../components/Icon";
@@ -30,7 +30,7 @@ export default function HeaderMenu(props: Readonly<{
     return <div className={"header-menu " + backgroundStyle}>
         {!(GAME_MANAGER.getMySpectator() && !GAME_MANAGER.getMyHost()) && <FastForwardButton />}
         <Information />
-        {!(GAME_MANAGER.getMySpectator() && !mobile) && <MenuButtons chatMenuNotification={props.chatMenuNotification}/>}
+        {!mobile && <MenuButtons chatMenuNotification={props.chatMenuNotification}/>}
         <Timer />
     </div>
 }
@@ -189,56 +189,23 @@ function VerdictButton(props: Readonly<{ verdict: Verdict }>) {
     </Button>
 }
 
-function MenuButtons(props: Readonly<{ chatMenuNotification: boolean }>): ReactElement | null {
+export function MenuButtons(props: Readonly<{ chatMenuNotification: boolean }>): ReactElement | null {
     const menuController = useContext(MenuControllerContext)!;
 
     return <div className="menu-buttons">
-        <Button className="wiki-menu-colors"
-            highlighted={menuController.menusOpen().includes(ContentMenu.WikiMenu)} 
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WikiMenu)}
-        >
-            {translate("menu.wiki.icon")}
-            <span className="mobile-hidden">{translate("menu.wiki.title")}</span>
-        </Button>
-        <Button className="graveyard-menu-colors" 
-            highlighted={menuController.menusOpen().includes(ContentMenu.GraveyardMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.GraveyardMenu)}
-        >
-            {translate("menu.gameMode.icon")}
-            <span className="mobile-hidden">{translate("menu.gameMode.title")}</span>
-        </Button>
-        <Button className="player-list-menu-colors"
-            highlighted={menuController.menusOpen().includes(ContentMenu.PlayerListMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.PlayerListMenu)}
-        >
-            {translate("menu.playerList.icon")}
-            <span className="mobile-hidden">{translate("menu.playerList.title")}</span>
-        </Button>
-        <Button className="chat-menu-colors"
-            highlighted={menuController.menusOpen().includes(ContentMenu.ChatMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.ChatMenu)}
-        >
-            {props.chatMenuNotification && <div className="chat-notification highlighted">!</div>}
-            {translate("menu.chat.icon")}
-            <span className="mobile-hidden">{translate("menu.chat.title")}</span>
-        </Button>
-        {GAME_MANAGER.getMySpectator() || <Button className="will-menu-colors" 
-            highlighted={menuController.menusOpen().includes(ContentMenu.WillMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WillMenu)}
-        >
-            {translate("menu.will.icon")}
-            <span className="mobile-hidden">{translate("menu.will.title")}</span>
-        </Button>}
-        {!GAME_MANAGER.getMySpectator() && <Button className="role-specific-colors" 
-                highlighted={menuController.menusOpen().includes(ContentMenu.RoleSpecificMenu)}
-                onClick={()=>menuController.closeOrOpenMenu(ContentMenu.RoleSpecificMenu)}
+        {menuController.menus().map(menu => {
+            return <Button key={menu} className={MENU_THEMES[menu] ?? ""}
+                highlighted={menuController.menusOpen().includes(menu)} 
+                onClick={()=>menuController.closeOrOpenMenu(menu)}
             >
-                {translate("menu.ability.icon")}
-                <span className="mobile-hidden">
-                    {translate("menu.ability.title")}
-                </span>
+                {menu === ContentMenu.ChatMenu
+                    && props.chatMenuNotification
+                    && <div className="chat-notification highlighted">!</div>
+                }
+                {translate(MENU_TRANSLATION_KEYS[menu] + ".icon")}
+                <span className="mobile-hidden">{translate(MENU_TRANSLATION_KEYS[menu] + ".title")}</span>
             </Button>
-        }
+        })}
     </div>
 }
 
diff --git a/client/src/menu/game/gameScreen.css b/client/src/menu/game/gameScreen.css
index 65a651147..a2ed20c9f 100644
--- a/client/src/menu/game/gameScreen.css
+++ b/client/src/menu/game/gameScreen.css
@@ -4,6 +4,12 @@
     flex-direction: column;
 }
 
+.game-screen > .menu-buttons > button {
+    padding: 0.5rem;
+    font-size: 1.5em;
+    aspect-ratio: 1/1;
+}
+
 .game-screen > .leave-button {
     position: absolute;
     margin: 0;
diff --git a/client/src/menu/game/gameScreenContent/AbilityMenu/AbilityMenu.tsx b/client/src/menu/game/gameScreenContent/AbilityMenu/AbilityMenu.tsx
index acabe89c1..ff07d8fa7 100644
--- a/client/src/menu/game/gameScreenContent/AbilityMenu/AbilityMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/AbilityMenu/AbilityMenu.tsx
@@ -17,10 +17,10 @@ export default function AbilityMenu(): ReactElement {
             {translate("menu.ability.title")}
         </ContentTab>
         {!mySpectator &&
-            <>
+            <div className="abilities">
                 <RoleSpecificSection/>
                 <GenericAbilityMenu/>
-            </>
+            </div>
         }
     </div>
     
diff --git a/client/src/menu/game/gameScreenContent/AbilityMenu/abilityMenu.css b/client/src/menu/game/gameScreenContent/AbilityMenu/abilityMenu.css
index e92cf4d71..a151b4aaa 100644
--- a/client/src/menu/game/gameScreenContent/AbilityMenu/abilityMenu.css
+++ b/client/src/menu/game/gameScreenContent/AbilityMenu/abilityMenu.css
@@ -1,6 +1,10 @@
 .ability-menu {
     overflow-y: auto;
 }
+.ability-menu .abilities {
+    display: flex;
+    flex-direction: column;
+}
 .game-screen .content > .ability-menu {
     width: 10%;
 }
diff --git a/client/src/menu/game/gameScreenContent/AbilityMenu/genericAbilityMenu.css b/client/src/menu/game/gameScreenContent/AbilityMenu/genericAbilityMenu.css
index 2dd331ef2..0fc9e83c9 100644
--- a/client/src/menu/game/gameScreenContent/AbilityMenu/genericAbilityMenu.css
+++ b/client/src/menu/game/gameScreenContent/AbilityMenu/genericAbilityMenu.css
@@ -1,8 +1,3 @@
-.generic-ability-menu {
-    margin-top: .4rem;
-}
-
-
 .generic-ability-menu-tab-summary {
     display: flex;
     flex-direction: row;
@@ -20,6 +15,7 @@
     border-color: var(--primary-border-color);
     border-radius: .4rem;
     border-width: .13rem;
+    margin-top: 0.25rem;
 }
 .generic-ability-menu-tab-no-summary > span{
     display: inline-flex;
diff --git a/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx b/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
index 88da450a8..e555cda6a 100644
--- a/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/GraveyardMenu.tsx
@@ -7,17 +7,20 @@ import StyledText from "../../../components/StyledText";
 import { EnabledRolesDisplay } from "../../../components/gameModeSettings/EnabledRoleSelector";
 import { useGameState, usePlayerState } from "../../../components/useHooks";
 import { translateRoleOutline } from "../../../game/roleListState.d";
-import { EnabledModifiersDisplay } from "../../../components/gameModeSettings/EnabledModifiersDisplay";
 import { Button } from "../../../components/Button";
 import DetailsSummary from "../../../components/DetailsSummary";
+import { EnabledModifiersDisplay } from "../../../components/gameModeSettings/EnabledModifiersSelector";
 
 export default function GraveyardMenu(): ReactElement {
     return <div className="graveyard-menu graveyard-menu-colors">
         <ContentTab close={ContentMenu.GraveyardMenu} helpMenu={"standard/gameMode"}>{translate("menu.gameMode.title")}</ContentTab>
             
-        <div className="graveyard-menu-role-list">
+        <DetailsSummary
+            summary={translate("menu.lobby.roleList")}
+            defaultOpen={true}
+        >
             <RoleListDisplay />
-        </div>
+        </DetailsSummary>
         <EnabledRoles/>
         <EnabledModifiers/>
     </div>
@@ -38,7 +41,7 @@ function RoleListDisplay(): ReactElement {
             const roleOutlineName = translateRoleOutline(entry);
 
             return <Button 
-                className="role-list-button"
+                className="role-list-button placard"
                 style={{ gridRow: index + 1 }} 
                 key={roleOutlineName + crossedOutOutlines?.includes(index) + index}
                 onClick={()=>{
diff --git a/client/src/menu/game/gameScreenContent/WillMenu.tsx b/client/src/menu/game/gameScreenContent/WillMenu.tsx
index d8e53b1e9..dcd5d0990 100644
--- a/client/src/menu/game/gameScreenContent/WillMenu.tsx
+++ b/client/src/menu/game/gameScreenContent/WillMenu.tsx
@@ -2,7 +2,6 @@ import React, { ReactElement, useMemo } from "react";
 import translate from "../../../game/lang";
 import GAME_MANAGER from "../../../index";
 import { ContentMenu, ContentTab } from "../GameScreen";
-import "./willMenu.css";
 import { usePlayerState } from "../../../components/useHooks";
 import { getSingleRoleJsonData } from "../../../game/roleState.d";
 import { TextDropdownArea } from "../../../components/TextAreaDropdown";
@@ -50,7 +49,7 @@ export default function WillMenu(): ReactElement {
         <section>
             <TextDropdownArea
                 titleString={translate("menu.will.will")}
-                open={true}
+                defaultOpen={true}
                 savedText={alibi}
                 cantPost={cantPost}
                 onSave={(text) => {
diff --git a/client/src/menu/game/gameScreenContent/graveyardMenu.css b/client/src/menu/game/gameScreenContent/graveyardMenu.css
index 27a5f68cb..953579aa7 100644
--- a/client/src/menu/game/gameScreenContent/graveyardMenu.css
+++ b/client/src/menu/game/gameScreenContent/graveyardMenu.css
@@ -3,14 +3,7 @@
         width: 100%;
     }
 }
-.graveyard-menu-role-list {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    user-select: none;
-}
-.graveyard-menu-role-list > .role-list-button{
-    margin: 0;
+.graveyard-menu .role-list-button{
     text-align: left;
     text-wrap: wrap;
 }
diff --git a/client/src/menu/game/gameScreenContent/willMenu.css b/client/src/menu/game/gameScreenContent/willMenu.css
index 4cd62561b..e69de29bb 100644
--- a/client/src/menu/game/gameScreenContent/willMenu.css
+++ b/client/src/menu/game/gameScreenContent/willMenu.css
@@ -1,35 +0,0 @@
-.game-screen .content > .will-menu {
-    width: 10%;
-}
-@media only screen and (max-width: 600px) {
-    .game-screen .content > .will-menu {
-        width: 100%;
-    }
-}
-.will-menu details > div {
-    padding: .13rem;
-}
-.will-menu .textarea, .will-menu textarea {
-    text-align: left;
-    height: 19em;
-    resize: none;
-    width: 100%;
-    margin: 0;
-}
-.will-menu summary > div {
-    display: inline-flex;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    text-align: left;
-    align-items: baseline;
-    /* This is a little hacky. This whole thing is a little hacky.*/
-    padding-right: .75rem;
-}
-.will-menu summary > div > div {
-    display:flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    align-items: center;
-}
\ No newline at end of file
diff --git a/client/src/menu/game/headerMenu.css b/client/src/menu/game/headerMenu.css
index f7c1cc3a1..2d0a811e9 100644
--- a/client/src/menu/game/headerMenu.css
+++ b/client/src/menu/game/headerMenu.css
@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
 }
-.header-menu .menu-buttons button{
+.header-menu .menu-buttons button {
     margin: .2%;
     margin-bottom: 0;
     min-width: 10%;
@@ -11,9 +11,11 @@
     border-bottom: 0;
     border-radius: .5rem .5rem 0 0;
     background-color: var(--primary-color);
-    position: relative;
     overflow-x: hidden;
 }
+.menu-buttons button{
+    position: relative;
+}
 .header-menu .menu-buttons button:hover {
     background-color: var(--hover-color);
 }
@@ -73,14 +75,14 @@
     padding: .13rem .13rem;
     margin: .13rem;
 } 
-.header-menu .chat-notification{
-    font-size: 0.83em;
-    height: 0.83em;
+.menu-buttons .chat-notification{
+    font-size: 0.83rem;
+    height: 0.83rem;
     aspect-ratio: 1;
     background-color: var(--primary-color);
     position: absolute;
     padding: 0 0 1rem 0;
-    border-width: 1px;
+    border-width: .13rem;
     border-style: solid;
     border-radius: 50%;
     top: 0;
@@ -88,7 +90,7 @@
 }
 .header-menu .fast-forward-button{
     position: absolute;
-    left: .2rem;
-    top: .2rem;
+    left: .25rem;
+    top: .25rem;
     font-size: 1.5rem;
 }
\ No newline at end of file
diff --git a/client/src/menu/globalMenu.css b/client/src/menu/globalMenu.css
index f41f75f37..7ca86c96a 100644
--- a/client/src/menu/globalMenu.css
+++ b/client/src/menu/globalMenu.css
@@ -3,8 +3,8 @@
     position: fixed;
     display: flex;
     flex-direction: column;
-    right: 1rem;
-    top: 2.5rem;
+    right: 0.38rem;
+    top: 2.75rem;
     height: fit-content;
     min-width: fit-content;
     box-shadow: 0 0 .5rem #0007;
diff --git a/client/src/menu/lobby/LobbyMenu.tsx b/client/src/menu/lobby/LobbyMenu.tsx
index c7412ff36..4ed1d7b05 100644
--- a/client/src/menu/lobby/LobbyMenu.tsx
+++ b/client/src/menu/lobby/LobbyMenu.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useContext, useEffect, useMemo, useState } from "react";
-import GAME_MANAGER from "../../index";
+import GAME_MANAGER, { DEV_ENV } from "../../index";
 import LobbyPlayerList from "./LobbyPlayerList";
 import "./lobbyMenu.css";
 import translate from "../../game/lang";
@@ -18,7 +18,7 @@ import { GameModeSelector } from "../../components/gameModeSettings/GameModeSele
 import LobbyChatMenu from "./LobbyChatMenu";
 import { useLobbyState } from "../../components/useHooks";
 import { Button } from "../../components/Button";
-import { EnabledModifiersDisplay } from "../../components/gameModeSettings/EnabledModifiersDisplay";
+import { EnabledModifiersSelector } from "../../components/gameModeSettings/EnabledModifiersSelector";
 
 export default function LobbyMenu(): ReactElement {
     const isSpectator = useLobbyState(
@@ -27,8 +27,8 @@ export default function LobbyMenu(): ReactElement {
     )!;
     const isHost = useLobbyState(
         lobbyState => {
-            let myClient = lobbyState.players.get(lobbyState.myId!);
-            if (myClient === undefined || myClient === null) return true;
+            const myClient = lobbyState.players.get(lobbyState.myId!);
+            if (myClient === null) return true;
             return myClient.ready === "host";
         },
         ["playersHost", "lobbyClients", "yourId"]
@@ -41,27 +41,38 @@ export default function LobbyMenu(): ReactElement {
         setAdvancedView(isHost || mobile)
     }, [mobile, isHost])
 
+    useEffect(() => {
+        const onBeforeUnload = (e: BeforeUnloadEvent) => {
+            if (!DEV_ENV) e.preventDefault()
+        };
+
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, [])
+
     return <div className="lm">
-        <LobbyMenuHeader isHost={isHost} advancedView={advancedView} setAdvancedView={setAdvancedView}/>
-        {advancedView 
-            ? <main>
-                <div>
-                    <LobbyPlayerList />
-                    <LobbyChatMenu spectator={isSpectator}/>
-                </div>
-                <div>
-                    <LobbyMenuSettings isHost={isHost}/>
-                </div>
-            </main>
-            : <main>
-                <div>
-                    <LobbyPlayerList />
-                </div>
-                <div>
-                    <LobbyChatMenu spectator={isSpectator}/>
-                </div>
-            </main>
-        }
+        <div>
+            <LobbyMenuHeader isHost={isHost} advancedView={advancedView} setAdvancedView={setAdvancedView}/>
+            {advancedView 
+                ? <main>
+                    <div>
+                        <LobbyPlayerList />
+                        <LobbyChatMenu spectator={isSpectator}/>
+                    </div>
+                    <div>
+                        <LobbyMenuSettings isHost={isHost}/>
+                    </div>
+                </main>
+                : <main>
+                    <div>
+                        <LobbyPlayerList />
+                    </div>
+                    <div>
+                        <LobbyChatMenu spectator={isSpectator}/>
+                    </div>
+                </main>
+            }
+        </div>
     </div>
 }
 
@@ -103,7 +114,7 @@ function LobbyMenuSettings(props: Readonly<{
     }, [setAnchorContent]);
 
     const sendRoleList = (newRoleList: RoleList) => {
-        const combinedRoleList = [...roleList];
+        const combinedRoleList = structuredClone(roleList);
         newRoleList.forEach((role, index) => {
             combinedRoleList[index] = role
         })
@@ -125,7 +136,7 @@ function LobbyMenuSettings(props: Readonly<{
                 GAME_MANAGER.sendEnabledModifiersPacket(gameMode.enabledModifiers);
             }}
         />}
-        <EnabledModifiersDisplay
+        <EnabledModifiersSelector
             disabled={!props.isHost}
             onChange={modifiers => GAME_MANAGER.sendEnabledModifiersPacket(modifiers)}
         />
@@ -211,7 +222,7 @@ function LobbyMenuHeader(props: Readonly<{
                     GAME_MANAGER.sendSetLobbyNamePacket(newLobbyName);
                 }}
             /> : 
-            <h1>{lobbyName}</h1>
+            <h3>{lobbyName}</h3>
         }
         
     </header>
diff --git a/client/src/menu/lobby/lobbyMenu.css b/client/src/menu/lobby/lobbyMenu.css
index 109fc21dd..ff33c2ce6 100644
--- a/client/src/menu/lobby/lobbyMenu.css
+++ b/client/src/menu/lobby/lobbyMenu.css
@@ -2,27 +2,32 @@
 .lm {
     display: flex;
     flex-direction: column;
-    padding: 2rem;
-    gap: 2rem;
     overflow-y: auto;
     height: 100%;
+    align-items: center;
+}
+
+.lm > div {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+    width: 100rem;
+    max-width: 100%;
+    height: 100%;
 }
 
-.lm > header {
+.lm > div > header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
+    font-size: 1.25em;
 }
 
-.lm > header input {
-    font-size: 1.5em;
-    
-}
-
-.lm > header div{
+.lm > div > header div{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -30,52 +35,44 @@
     gap: 0.5rem;
 }
 
-.lm > header button{
-    font-size: 1.5em;
-    display: flex;
-    flex-direction: row;
-    gap: .25rem;
-    padding: .25rem .5rem;
+.lm > div > header > * {
+    max-width: 100%;
 }
 
 @media only screen and (max-width: 600px) {
-    .lm > header {
+    .lm > div > header {
         justify-content: center;
     }
-
-    .lm > header button {
-        font-size: 1.25em;
-        padding: .13rem .25rem;
-    }
 }
 
-.lm > main ol {
+.lm > div > main ol {
     list-style: none;
 }
 
-.lm > main {
+.lm > div > main {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     flex-grow: 1;
     row-gap: 1rem;
-    column-gap: 2rem;
+    column-gap: 1rem;
 }
 
-.lm > main > div {
+.lm > div > main > div {
     display: flex;
     flex-direction: column;
     flex-basis: 47%;
+    max-width: 100%;
     flex-grow: 1;
     gap: 1rem;
 }
 
-.lm .name-box {
+.lm > div .name-box {
     display: flex;
     flex-direction: row;
 }
 
-.lm .name-box input {
+.lm > div .name-box input {
     width: 100%;
 }
 
@@ -109,19 +106,19 @@
     flex-grow: 1;
 }
 
-.lm .player-list > .list {
+.lm > div .player-list > .list {
     border: .13rem solid var(--background-border-color);
     border-top-color: var(--background-border-shadow-color);
     border-left-color: var(--background-border-shadow-color);
     border-radius: .5rem;
 }
 
-.lm .player-list > .spectators-ready {
+.lm > div .player-list > .spectators-ready {
     text-align: left;
     margin-top: .5rem;
 }
 
-.lm .player-list ol li {
+.lm > div .player-list ol li {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -131,11 +128,11 @@
     min-height: 2em;
 }
 
-.lm .player-list ol li:nth-of-type(even) {
+.lm > div .player-list ol li:nth-of-type(even) {
     background-color: var(--primary-color);
 }
 
-.lm .player-list ol li > div {
+.lm > div .player-list ol li > div {
     display: flex;
     flex-direction: row;
     gap: .25rem;
diff --git a/client/src/menu/main/PlayMenu.tsx b/client/src/menu/main/PlayMenu.tsx
index ab2313f8b..cf4a5777b 100644
--- a/client/src/menu/main/PlayMenu.tsx
+++ b/client/src/menu/main/PlayMenu.tsx
@@ -45,9 +45,9 @@ export default function PlayMenu(): ReactElement {
     return <div className="play-menu">
         <div className="play-menu-browser graveyard-menu-colors">
             <header>
-                <h1>
+                <h2>
                     {translate("menu.play.title")}
-                </h1>
+                </h2>
                 <div>
                     <button onClick={async () => {
                         setAnchorContent(<LoadingScreen type="host"/>);
diff --git a/client/src/menu/main/playMenu.css b/client/src/menu/main/playMenu.css
index bb77c858d..fe661d8d0 100644
--- a/client/src/menu/main/playMenu.css
+++ b/client/src/menu/main/playMenu.css
@@ -1,8 +1,9 @@
 .play-menu {
     display: flex;
+    justify-content: center;
     height: 100%;
     width: 100%;
-    padding: 2rem;
+    padding: 3rem 1rem;
 }
 
 .play-menu-browser {
@@ -18,6 +19,7 @@
     gap: 1rem;
     
     width: 100%;
+    max-width: 100rem;
     height: 100%;
 }
 
@@ -52,7 +54,7 @@
 }
 
 .play-menu-browser > header button {
-    padding: 0.5rem;
+    padding: 0.25rem;
 }
 
 .play-menu-browser > .play-menu-center {
@@ -66,29 +68,6 @@
     overflow: hidden;
 }
 
-@media only screen and (max-width: 600px) {
-    .play-menu {
-        padding: 0;
-    }
-    .play-menu-browser {
-        border-radius: 0;
-        padding: 2rem 0 1rem 0;
-        border: none;
-    }
-    .play-menu-browser > .play-menu-center {
-        border-left: none;
-        border-right: none;
-        border-radius: 0;
-    }
-    .play-menu-browser > header {
-        padding: 0 1rem 0 1rem;
-    }
-    
-    .play-menu-browser > footer {
-        padding: 0 1rem 0 1rem;
-    }
-}
-
 .play-menu-browser > .play-menu-center > table {
     display: flex;
     flex-direction: column;
diff --git a/client/src/menu/main/standaloneWiki.css b/client/src/menu/main/standaloneWiki.css
index 3dcd1c2d4..5648daa95 100644
--- a/client/src/menu/main/standaloneWiki.css
+++ b/client/src/menu/main/standaloneWiki.css
@@ -18,6 +18,5 @@
 @media only screen and (max-width: 600px) {
     .standalone-wiki {
         border: none;
-        padding: 0;
     }
 }
\ No newline at end of file
diff --git a/client/src/menu/settings.css b/client/src/menu/settings.css
index 3c3a17951..b31a6aa71 100644
--- a/client/src/menu/settings.css
+++ b/client/src/menu/settings.css
@@ -14,71 +14,48 @@
     gap: 0.5rem;
 }
 
-.settings-menu {
+.settings-menu-card input {
+    min-width: 3rem;
+}
+
+.settings-menu-card > main {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 1rem;
     overflow-y: scroll;
     scrollbar-width: none;
+    align-items: flex-start;
 }
 
-.settings-menu > div {
+.settings-menu-card > main > div {
     display: flex;
     flex-direction: column;
-    flex-basis: 47%;
+    flex-basis: 30%;
     flex-grow: 1;
-    gap: 1rem;
+    gap: .5rem;
     max-width: 100%;
+    padding: 1rem;
+    background-color: var(--background-color);
+    border: .13rem solid var(--primary-border-color);
+    border-bottom-color: var(--primary-border-shadow-color);
+    border-right-color: var(--primary-border-shadow-color);
+    border-radius: 1rem;
 }
 .settings-menu > div > section {
     display: flex;
     flex-direction: column;
-}
-
-.settings-menu > div .horizontal {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.settings-menu > div .horizontal > * {
-    flex-grow: 1;
-}
-
-.role-specific-menu-settings {
-    display: flex;
-    flex-direction: column;
-    max-height: 20rem;
-    overflow-y: scroll;
-    gap: 0.25rem;
-}
-
-.role-specific-menu-settings-selector {
-    display: flex;
-    border: .13rem solid var(--primary-border-color);
-    background-color: var(--secondary-color);
-    border-radius: 0.5rem;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 0.25rem;
-}
-.role-specific-menu-settings-selector > span {
-    margin: 0 .25rem;
-    white-space: pre;
-}
-
-.settings-menu > div .standout {
     border: solid .13rem var(--primary-border-color);
     border-top-color: var(--primary-border-shadow-color);
     border-left-color: var(--primary-border-shadow-color);
-    border-radius: .5rem;
-    padding: 0.25rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
     background-color: var(--secondary-color);
+    align-items: center;
 }
 
-.settings-menu div .settings-volume {
-    border: 0;
-    padding: 0;
+.settings-menu .menu-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/client/src/menu/spectator/SpectatorGameScreen.tsx b/client/src/menu/spectator/SpectatorGameScreen.tsx
index edc9801db..6ece70522 100644
--- a/client/src/menu/spectator/SpectatorGameScreen.tsx
+++ b/client/src/menu/spectator/SpectatorGameScreen.tsx
@@ -1,8 +1,9 @@
 import React, { ReactElement, useContext } from "react";
 import "../game/gameScreen.css"
-import HeaderMenu from "../game/HeaderMenu";
-import { MenuController, useMenuController, MenuControllerContext, GameScreenMenus } from "../game/GameScreen";
+import HeaderMenu, { MenuButtons } from "../game/HeaderMenu";
+import { MenuController, useMenuController, MenuControllerContext, GameScreenMenus, ContentMenu } from "../game/GameScreen";
 import { MobileContext } from "../Anchor";
+import { loadSettingsParsed } from "../../game/localStorage";
 
 let CONTENT_CONTROLLER: MenuController | undefined;
 
@@ -10,22 +11,24 @@ export function getSpectatorScreenContentController(): MenuController | undefine
     return CONTENT_CONTROLLER;
 }
 
-type SpectatorContentMenus = {
-    ChatMenu: boolean,
-    PlayerListMenu: boolean,
-    GraveyardMenu: boolean
-}
-
 export default function SpectatorGameScreen(): ReactElement {
     const mobile = useContext(MobileContext)!;
+    const { maxMenus, menuOrder } = loadSettingsParsed();
+
+    const menusOpen: [ContentMenu, boolean | undefined][] = [
+        [ContentMenu.WikiMenu, undefined ],
+        [ContentMenu.GraveyardMenu, maxMenus > 2 ],
+        [ContentMenu.PlayerListMenu, maxMenus > 1 ],
+        [ContentMenu.ChatMenu, true ],
+        [ContentMenu.WillMenu, undefined ],
+        [ContentMenu.RoleSpecificMenu, undefined ],
+    ];
+
+    menusOpen.sort((a, b) => menuOrder.indexOf(a[0]) - menuOrder.indexOf(b[0]))
 
-    const contentController = useMenuController<SpectatorContentMenus>(
-        mobile ? 2 : Infinity,
-        {
-            GraveyardMenu: !mobile,
-            PlayerListMenu: true,
-            ChatMenu: true
-        },
+    const contentController = useMenuController(
+        maxMenus,
+        Object.fromEntries(menusOpen),
         () => CONTENT_CONTROLLER!,
         contentController => CONTENT_CONTROLLER = contentController
     );
@@ -38,6 +41,7 @@ export default function SpectatorGameScreen(): ReactElement {
                     <HeaderMenu chatMenuNotification={false}/>
                 </div>
                 <GameScreenMenus />
+                {mobile === true && <MenuButtons chatMenuNotification={false}/>}
             </div>
         </MenuControllerContext.Provider>
     );
diff --git a/client/src/resources/lang/en_us.json b/client/src/resources/lang/en_us.json
index b101ea7aa..fcea2055b 100644
--- a/client/src/resources/lang/en_us.json
+++ b/client/src/resources/lang/en_us.json
@@ -43,12 +43,16 @@
     "menu.globalMenu.gameSettingsEditor": "Game Mode Editor",
 
     "menu.settings.title": "Settings",
-    "menu.settings.advanced": "Advanced Settings",
+    "menu.settings.general": "General",
+    "menu.settings.gameplay": "Gameplay",
+    "menu.settings.menus": "Menus",
+    "menu.settings.maxMenus": "Max Menus Open",
+    "menu.settings.menuOrder": "Menu Order",
     "menu.settings.dangerZone": "Danger zone",
     "menu.settings.volume": "Volume",
     "menu.settings.font": "Font",
     "menu.settings.fontSize": "Font Size",
-    "menu.settings.accessibility": "Accessibility",
+    "menu.settings.accessibilityFont": "Accessibility Font",
     "menu.settings.language": "Language",
     "menu.settings.defaultName": "Default Name",
     "menu.settings.eraseSaveData": "Erase Save Data",
@@ -124,7 +128,7 @@
     "menu.gameMode.icon": "⚙️",
     "killedBy": "Killed by",
 
-    "menu.gameScreen.noContent": "Click on one of the tabs above to open",
+    "menu.gameScreen.noContent": "Click on one of the tabs to open a menu",
 
     "notification.connectionFailed": "Connection failed",
     "notification.serverNotFound": "Server not found, it could be offline",
diff --git a/server/src/lobby/lobby_client.rs b/server/src/lobby/lobby_client.rs
index 15432082e..b2697aceb 100644
--- a/server/src/lobby/lobby_client.rs
+++ b/server/src/lobby/lobby_client.rs
@@ -24,6 +24,7 @@ pub struct LobbyClient{
 }
 
 #[derive(Clone, Debug, Serialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
 pub enum Ready {
     Host,
     Ready,
diff --git a/server/src/lobby/on_client_message.rs b/server/src/lobby/on_client_message.rs
index d987db02d..5bd0d6e58 100644
--- a/server/src/lobby/on_client_message.rs
+++ b/server/src/lobby/on_client_message.rs
@@ -68,7 +68,7 @@ impl Lobby {
                     return
                 };
 
-                let text = text.trim_newline().trim_whitespace().truncate(100).truncate_lines(1);
+                let text = text.trim_newline().trim_whitespace().truncate(100);
                 if text.is_empty() {return}
                 
                 let name = if let Some(