diff --git a/src/components/ModelCatalog.jsx b/src/components/ModelCatalog.jsx
index cb1cc50df0c42a..461b41bf838629 100644
--- a/src/components/ModelCatalog.jsx
+++ b/src/components/ModelCatalog.jsx
@@ -80,22 +80,22 @@ const ModelCatalog = ({ models }) => {
 
 	return (
 		<div className="md:flex">
-			<div className="md:w-1/4 w-full mr-8">
+			<div className="mr-8 w-full md:w-1/4">
 				<input
 					type="text"
-					className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2"
+					className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
 					placeholder="Search models"
 					value={filters.search}
 					onChange={(e) => setFilters({ ...filters, search: e.target.value })}
 				/>
 
-				<div className="!mb-8 md:block hidden">
-					<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
+				<div className="!mb-8 hidden md:block">
+					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
 						▼ Model Types
 					</span>
 
 					{tasks.map((task) => (
-						<label key={task} className="block !my-2">
+						<label key={task} className="!my-2 block">
 							<input
 								type="checkbox"
 								className="mr-2"
@@ -119,13 +119,13 @@ const ModelCatalog = ({ models }) => {
 					))}
 				</div>
 
-				<div className="!mb-8 md:block hidden">
-					<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
+				<div className="!mb-8 hidden md:block">
+					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
 						▼ Capabilities
 					</span>
 
 					{capabilities.map((capability) => (
-						<label key={capability} className="block !my-2">
+						<label key={capability} className="!my-2 block">
 							<input
 								type="checkbox"
 								value={capability}
@@ -151,13 +151,13 @@ const ModelCatalog = ({ models }) => {
 					))}
 				</div>
 
-				<div className="md:block hidden">
-					<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
+				<div className="hidden md:block">
+					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
 						▼ Authors
 					</span>
 
 					{authors.map((author) => (
-						<label key={author} className="block !my-2">
+						<label key={author} className="!my-2 block">
 							<input
 								type="checkbox"
 								className="mr-2"
@@ -183,9 +183,9 @@ const ModelCatalog = ({ models }) => {
 					))}
 				</div>
 			</div>
-			<div className="flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0">
+			<div className="!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4">
 				{modelList.length === 0 && (
-					<div className="border bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+					<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800">
 						<span className="text-lg !font-bold">No models found</span>
 						<p>
 							Try a different search term, or broaden your search by removing
@@ -206,36 +206,36 @@ const ModelCatalog = ({ models }) => {
 					return (
 						<a
 							key={model.model.id}
-							className="p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md lg:w-[48%] w-full block !text-inherit no-underline self-start hover:bg-gray-50 dark:hover:bg-black mb-3"
+							className="mb-3 block w-full self-start rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 lg:w-[48%]"
 							href={`/workers-ai/models/${model.model_display_name}`}
 						>
 							<div className="-mb-1 flex items-center">
 								{authorData[model.model.name.split("/")[1]]?.logo ? (
 									<img
-										className="block w-6 mr-2"
+										className="mr-2 block w-6"
 										src={authorData[model.model.name.split("/")[1]]?.logo}
 									/>
 								) : (
-									<div className="w-6 h-6 rounded-md bg-gray-100 text-gray-400 uppercase text-sm font-black flex justify-center items-center mr-2">
+									<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-sm font-black uppercase text-gray-400">
 										{author.substr(0, 1)}
 									</div>
 								)}
-								<span className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap">
+								<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
 									{model.model_display_name}
 								</span>
 								{isBeta && (
-									<span className="ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
+									<span className="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
 										Beta
 									</span>
 								)}
 							</div>
-							<div className="text-xs !m-0">
+							<div className="!m-0 text-xs">
 								<ModelInfo model={model.model} />
 							</div>
 							<p className="!mt-2 line-clamp-2 text-sm leading-6">
 								{model.model.description}
 							</p>
-							<div className="text-xs !mt-2">
+							<div className="!mt-2 text-xs">
 								<ModelBadges model={model.model} />
 							</div>
 						</a>
diff --git a/src/components/ProductCatalog.tsx b/src/components/ProductCatalog.tsx
index 21166bbe97361d..927581585707e5 100644
--- a/src/components/ProductCatalog.tsx
+++ b/src/components/ProductCatalog.tsx
@@ -54,22 +54,22 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 
 	return (
 		<div className="md:flex">
-			<div className="md:w-1/4 w-full mr-8">
+			<div className="mr-8 w-full md:w-1/4">
 				<input
 					type="text"
-					className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2"
+					className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
 					placeholder="Search products"
 					value={filters.search}
 					onChange={(e) => setFilters({ ...filters, search: e.target.value })}
 				/>
 
-				<div className="!mb-8 md:block hidden">
-					<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
+				<div className="!mb-8 hidden md:block">
+					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
 						Groups
 					</span>
 
 					{groups.map((group) => (
-						<label key={group} className="block !my-2">
+						<label key={group} className="!my-2 block">
 							<input
 								type="checkbox"
 								className="mr-2"
@@ -97,9 +97,9 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 				</div>
 			</div>
 
-			<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 lg:gap-4 lg:w-3/4 w-full items-stretch self-start !mt-0">
+			<div className="!mt-0 grid w-full grid-cols-1 items-stretch gap-2 self-start md:grid-cols-2 lg:w-3/4 lg:grid-cols-3 lg:gap-4">
 				{productList.length === 0 && (
-					<div className="border lg:col-span-3 md:col-span-2 bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+					<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800 md:col-span-2 lg:col-span-3">
 						<span className="text-lg !font-bold">No products found</span>
 						<p>
 							Try a different search term, or broaden your search by removing
@@ -111,11 +111,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 					return (
 						<a
 							href={product.data.product.url}
-							className="self-stretch p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md block !text-inherit no-underline hover:bg-gray-50 dark:hover:bg-black"
+							className="block self-stretch rounded-md border border-solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
 						>
 							<div className="flex items-start">
 								{product.icon && (
-									<div className="rounded-full p-1 bg-orange-50 mr-2 text-orange-500 dark:bg-orange-950">
+									<div className="mr-2 rounded-full bg-orange-50 p-1 text-orange-500 dark:bg-orange-950">
 										<svg
 											{...product.icon.attributes}
 											width={24}
@@ -125,11 +125,11 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 									</div>
 								)}
 								{!product.icon && (
-									<div className="flex items-center justify-center leading-none rounded-full p-1 bg-orange-50 dark:bg-orange-950 mr-2 text-[color:var(--orange-accent-200)] text-lg font-bold w-8 h-8">
+									<div className="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-orange-50 p-1 text-lg font-bold leading-none text-[color:var(--orange-accent-200)] dark:bg-orange-950">
 										{product.data.name.substr(0, 1)}
 									</div>
 								)}
-								<span className="font-semibold text-md mt-0.5">
+								<span className="text-md mt-0.5 font-semibold">
 									{product.data.name}
 								</span>
 							</div>