diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index ebfab3b4a6..8422a0f6cb 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import {
 	type ComponentProps,
 	createContext,
@@ -20,22 +19,16 @@ type FormProps = HTMLProps<HTMLFormElement> & {
 	direction?: FormContextValue["direction"];
 };
 
-export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
-	const theme = useTheme();
-
+export const Form: FC<FormProps> = ({ direction, className, ...formProps }) => {
 	return (
 		<FormContext.Provider value={{ direction }}>
 			<form
 				{...formProps}
-				css={{
-					display: "flex",
-					flexDirection: "column",
-					gap: direction === "horizontal" ? 80 : 40,
-
-					[theme.breakpoints.down("md")]: {
-						gap: 64,
-					},
-				}}
+				className={cn(
+					"flex flex-col gap-16",
+					direction === "horizontal" ? "md:gap-20" : "md:gap-10",
+					className,
+				)}
 			/>
 		</FormContext.Provider>
 	);