diff --git a/src/client/editor/Editor.tsx b/src/client/editor/Editor.tsx
index ae5ef37..2b63c08 100644
--- a/src/client/editor/Editor.tsx
+++ b/src/client/editor/Editor.tsx
@@ -98,7 +98,7 @@ export const Editor: FC<EditorProps> = ({
 								<DropdownMenuTrigger className="flex w-fit min-w-[140px] cursor-pointer items-center justify-between rounded-md border bg-surface-primary px-2 py-1.5 text-content-secondary transition-colors hover:text-content-primary data-[state=open]:text-content-primary">
 									<div className="flex items-center justify-center gap-2">
 										<ZapIcon width={18} height={18} />
-										<p className="text-xs">Snippets</p>
+										<span className="text-xs">Snippets</span>
 									</div>
 									<PlusIcon width={18} height={18} />
 								</DropdownMenuTrigger>
@@ -108,7 +108,7 @@ export const Editor: FC<EditorProps> = ({
 										{snippets.map(
 											({ name, label, icon: Icon, snippet }, index) => (
 												<DropdownMenuItem
-													key={index}
+													key={`${label}-${index}`}
 													onClick={() => onAddSnippet(name, snippet)}
 												>
 													<Icon size={24} />
@@ -124,28 +124,33 @@ export const Editor: FC<EditorProps> = ({
 								<DropdownMenuTrigger className="flex w-fit min-w-[140px] cursor-pointer items-center justify-between rounded-md border bg-surface-primary px-2 py-1.5 text-content-secondary transition-colors hover:text-content-primary data-[state=open]:text-content-primary">
 									<div className="flex items-center justify-center gap-2">
 										<NotebookPenIcon width={18} height={18} />
-										<p className="text-xs">Examples</p>
+										<span className="text-xs">Examples</span>
 									</div>
 									<ChevronDownIcon width={18} height={18} />
 								</DropdownMenuTrigger>
 
 								<DropdownMenuPortal>
 									<DropdownMenuContent>
-										{Object.entries(examples).map(([slug, title]) => {
-											const href = `${window.location.origin}/parameters/example/${slug}`;
-											return (
-												<DropdownMenuItem key={slug} asChild={true}>
-													<a href={href} target="_blank" rel="noreferrer">
-														<span className="sr-only">
-															{" "}
-															(link opens in new tab)
-														</span>
-														<ExternalLinkIcon />
-														{title}
-													</a>
-												</DropdownMenuItem>
-											);
-										})}
+										{Object.entries(examples)
+											.sort()
+											.map(([slug, title], index) => {
+												const href = `${window.location.origin}/parameters/example/${slug}`;
+												return (
+													<DropdownMenuItem
+														key={`${slug}-${index}`}
+														asChild={true}
+													>
+														<a href={href} target="_blank" rel="noreferrer">
+															<span className="sr-only">
+																{" "}
+																(link opens in new tab)
+															</span>
+															<ExternalLinkIcon />
+															{title}
+														</a>
+													</DropdownMenuItem>
+												);
+											})}
 									</DropdownMenuContent>
 								</DropdownMenuPortal>
 							</DropdownMenu>