diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index face2f7bfd..47931e8e19 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -188,8 +188,12 @@
 										<SchemaEditorProperty {property} />
 									</td>
 									<td>{property.description}</td>
-									<td>{JSON.stringify(property.default) ?? ''}</td>
-									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
+									<td
+										>{#if schema.required.includes(name)}
+											<span class="text-red-600 font-bold text-lg">*</span>
+										{/if}</td
+									>
 									<td class="justify-end flex">
 										<Button
 											color="red"
diff --git a/frontend/src/lib/components/SchemaEditorProperty.svelte b/frontend/src/lib/components/SchemaEditorProperty.svelte
index dda90b77d4..af611e2798 100644
--- a/frontend/src/lib/components/SchemaEditorProperty.svelte
+++ b/frontend/src/lib/components/SchemaEditorProperty.svelte
@@ -5,10 +5,12 @@
 	export let property: SchemaProperty
 </script>
 
-<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
-{#if property.format}
-	<Badge color="green">{property.format?.toUpperCase()}</Badge>
-{/if}
-{#if property.contentEncoding}
-	<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
-{/if}
+<div class="flex flex-row flex-wrap gap-1">
+	<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
+	{#if property.format}
+		<Badge color="green">{property.format?.toUpperCase()}</Badge>
+	{/if}
+	{#if property.contentEncoding}
+		<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
+	{/if}
+</div>