diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index fcf2126..b7a2ddd 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/web/src/ui/settings/SettingsView.css
@@ -3,10 +3,14 @@ div.settings-view {
 	display: flex;
 	flex-direction: column;
 
-	h2, h3 {
+	h2, h3, h4 {
 		margin: 0;
 	}
 
+	summary > h3, summary > h4 {
+		display: inline;
+	}
+
 	table {
 		text-align: left;
 
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 1c932b3..d397290 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -176,9 +176,37 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
 	</div>
 }
 
+const AppliedSettingsView = ({ room }: SettingsViewProps) => {
+	const client = use(ClientContext)!
+
+	return <div className="applied-settings">
+		<h3>Raw settings data</h3>
+		<details>
+			<summary><h4>Applied settings in this room</h4></summary>
+			<JSONView data={room.preferences}/>
+		</details>
+		<details open>
+			<summary><h4>Global account settings</h4></summary>
+			<JSONView data={client.store.serverPreferenceCache}/>
+		</details>
+		<details open>
+			<summary><h4>Global local settings</h4></summary>
+			<JSONView data={client.store.localPreferenceCache}/>
+		</details>
+		<details open>
+			<summary><h4>Room account settings</h4></summary>
+			<JSONView data={room.serverPreferenceCache}/>
+		</details>
+		<details open>
+			<summary><h4>Room local settings</h4></summary>
+			<JSONView data={room.localPreferenceCache}/>
+		</details>
+	</div>
+}
+
 const SettingsView = ({ room }: SettingsViewProps) => {
 	const client = use(ClientContext)!
-	const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined)=>  {
+	const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => {
 		if (context === PreferenceContext.Account) {
 			client.rpc.setAccountData("fi.mau.gomuks.preferences", {
 				...client.store.serverPreferenceCache,
@@ -236,7 +264,7 @@ const SettingsView = ({ room }: SettingsViewProps) => {
 			</tbody>
 		</table>
 		<CustomCSSInput setPref={setPref} room={room} />
-		<JSONView data={room.preferences} />
+		<AppliedSettingsView room={room} />
 	</>
 }
 
diff --git a/web/src/ui/util/JSONView.tsx b/web/src/ui/util/JSONView.tsx
index 22e95d9..dc793c8 100644
--- a/web/src/ui/util/JSONView.tsx
+++ b/web/src/ui/util/JSONView.tsx
@@ -54,9 +54,9 @@ function renderJSONValue(data: unknown, collapsed: boolean) {
 			}
 			return <ul className="json-object-children">
 				{entries.map(([key, value], index, arr) =>
-					<li key={key} className="json-object-entry">
+					value !== undefined ? <li key={key} className="json-object-entry">
 						<JSONValueWithKey data={value} objectKey={key} trailingComma={index < arr.length - 1}/>
-					</li>)}
+					</li> : null)}
 			</ul>
 		}
 	case "string":