diff --git a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx
index dad33499..58a45f37 100644
--- a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx
+++ b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx
@@ -53,7 +53,7 @@ function Featured() {
 
 						<div className="flex flex-row justify-end">
 							<Button color="ghost" onClick={() => navigate({ to: '/app/browser/package/$provider/$slug', params: { provider, slug } })}>
-								View Package
+								View
 								<ChevronRightIcon />
 							</Button>
 						</div>
@@ -85,7 +85,7 @@ function List({ provider }: { provider: Provider }) {
 	const [expanded, setExpanded] = useState(false);
 	return (
 		<div>
-			<h3 className="uppercase p-3 opacity-60">{provider}</h3>
+			<h5 className="uppercase p-3 opacity-60">{provider}</h5>
 			<div className={`relative overflow-hidden ${expanded ? '' : 'h-128'}`}>
 				{search.isSuccess
 					? <PackageGrid items={search.data.items} provider={provider} />
diff --git a/apps/onelauncher/frontend/src/routes/app/browser/route.tsx b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
index ab0ae053..243adaa5 100644
--- a/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
+++ b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx
@@ -18,9 +18,9 @@ function RouteComponent() {
 		<BrowserProvider>
 			<div>
 				<AnimatedOutlet
-				enter={{animate: {opacity: 1}, initial: {opacity: 1}}}
-				exit={{animate: {opacity: 0}, initial: {opacity: 0}}}
-				from={Route.id}
+					enter={{ animate: { opacity: 1 }, initial: { opacity: 1 } }}
+					exit={{ animate: { opacity: 0 }, initial: { opacity: 0 } }}
+					from={Route.id}
 				/>
 			</div>
 		</BrowserProvider>
@@ -122,7 +122,7 @@ function BrowserCategories() {
 			<div className="flex flex-col gap-y-6">
 				<Show when>
 					<div className="flex flex-col gap-y-2">
-						<h6 className="my-1 uppercase opacity-60">Categories</h6>
+						<h5 className="my-1 uppercase opacity-60">Categories</h5>
 						{categories.map(category => (
 							<p
 								aria-selected={context.query.filters?.categories?.includes(category.id)}
@@ -142,16 +142,15 @@ function BrowserCategories() {
 
 function BrowserToolbar() {
 	const context = useBrowserContext();
-	const [query, setQuery] = useState(context.query.query ?? "")
+	const [query, setQuery] = useState(context.query.query ?? '');
 	return (
 		<div className="w-full flex flex-row justify-between bg-page">
 			<div className="flex flex-row gap-2" />
 
 			<div className="flex flex-row gap-2">
 				<TextField
-					value={query}
 					iconLeft={<SearchMdIcon />}
-					onChange={e=>setQuery(e.currentTarget.value)}
+					onChange={e => setQuery(e.currentTarget.value)}
 					onKeyDown={(e) => {
 						if (e.key !== 'Enter')
 							return;
@@ -159,6 +158,7 @@ function BrowserToolbar() {
 						context.setQuery({ ...context.query, query: e.currentTarget.value });
 					}}
 					placeholder="Search for content"
+					value={query}
 				/>
 			</div>
 		</div>