diff --git a/src/components/OptionsForm.module.css b/src/components/OptionsForm.module.css
index bbf5760f..a7a3c7d5 100644
--- a/src/components/OptionsForm.module.css
+++ b/src/components/OptionsForm.module.css
@@ -106,6 +106,7 @@
 .secondaryOptions {
 	flex-direction: column;
 	gap: 3rem;
+	margin-top: 1.25rem;
 }
 
 @media screen and (width >= 700px) {
@@ -138,3 +139,17 @@
 	height: 2rem;
 	padding: 0.5rem;
 }
+
+.optionsSummary {
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+	font-style: italic;
+	gap: 4px;
+	justify-content: center;
+	list-style: none;
+}
+
+.optionsDetails[open] .chevronIcon {
+	transform: rotate(180deg);
+}
diff --git a/src/components/OptionsForm.tsx b/src/components/OptionsForm.tsx
index 26ce9e56..4c75629d 100644
--- a/src/components/OptionsForm.tsx
+++ b/src/components/OptionsForm.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { PackageOwnership } from "tidelift-me-up";
 
 import { CallToAction } from "./CallToAction";
@@ -16,6 +18,8 @@ export interface OptionsFormProps {
 export function OptionsForm({ options }: OptionsFormProps) {
 	const ownerships = new Set(options.ownership);
 
+	const optionsExpanded = !options.username;
+
 	return (
 		<form className={styles.optionsForm}>
 			<div className={styles.primaryOptions}>
@@ -39,44 +43,62 @@ export function OptionsForm({ options }: OptionsFormProps) {
 			</div>
 
 			<div className={styles.secondaryOptionsArea}>
-				<h2 className={styles.h2}>optionally, filter by:</h2>
-				<div className={styles.secondaryOptions}>
-					<div className={styles.secondaryOptionArea}>
-						<label className={styles.labelSecondary} htmlFor="since">
-							Updated Since
-						</label>
-						<input
-							className={styles.inputSecondary}
-							defaultValue={options.since && options.since.toString()}
-							id="since"
-							name="since"
-							type="date"
-						></input>
-					</div>
-
-					<fieldset className={styles.secondaryOptionArea} name="ownership">
-						<legend className={styles.legendSecondary}>
-							Relationship to Project
-						</legend>
-						<div className={styles.fieldsetOptions}>
-							{(["author", "maintainer", "publisher"] as const).map(
-								(ownershipForm) => (
-									<div className={styles.secondaryOption} key={ownershipForm}>
-										<input
-											defaultChecked={ownerships.has(ownershipForm)}
-											id={ownershipForm}
-											name={ownershipForm}
-											type="checkbox"
-										/>
-										<label htmlFor={ownershipForm}>
-											{upperFirst(ownershipForm)}
-										</label>
-									</div>
-								),
-							)}
+				<details className={styles.optionsDetails} open={optionsExpanded}>
+					<summary className={styles.optionsSummary}>
+						optionally, filter by{" "}
+						<svg
+							className={styles.chevronIcon}
+							fill="none"
+							height="24"
+							stroke="currentColor"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							viewBox="0 0 24 24"
+							width="24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path d="M6 9l6 6 6-6" />
+						</svg>
+					</summary>
+					<div className={styles.secondaryOptions}>
+						<div className={styles.secondaryOptionArea}>
+							<label className={styles.labelSecondary} htmlFor="since">
+								Updated Since
+							</label>
+							<input
+								className={styles.inputSecondary}
+								defaultValue={options.since && options.since.toString()}
+								id="since"
+								name="since"
+								type="date"
+							></input>
 						</div>
-					</fieldset>
-				</div>
+
+						<fieldset className={styles.secondaryOptionArea} name="ownership">
+							<legend className={styles.legendSecondary}>
+								Relationship to Project
+							</legend>
+							<div className={styles.fieldsetOptions}>
+								{(["author", "maintainer", "publisher"] as const).map(
+									(ownershipForm) => (
+										<div className={styles.secondaryOption} key={ownershipForm}>
+											<input
+												defaultChecked={ownerships.has(ownershipForm)}
+												id={ownershipForm}
+												name={ownershipForm}
+												type="checkbox"
+											/>
+											<label htmlFor={ownershipForm}>
+												{upperFirst(ownershipForm)}
+											</label>
+										</div>
+									),
+								)}
+							</div>
+						</fieldset>
+					</div>
+				</details>
 			</div>
 		</form>
 	);