diff --git a/src/components/wizard/BackendSelectionStep.tsx b/src/components/wizard/BackendSelectionStep.tsx
index e835317..33883eb 100644
--- a/src/components/wizard/BackendSelectionStep.tsx
+++ b/src/components/wizard/BackendSelectionStep.tsx
@@ -7,6 +7,7 @@ import type { BackendType } from '../../store/types';
 import { BACKEND_REGISTRY } from '../../schemas/registry';
 import { BackendCard } from '../ui/BackendCard';
 import { MD3_BTN_FILLED } from '../../styles/md3-buttons';
+import { TextFieldMD3 } from '../ui/TextFieldMD3';
 
 const remoteNameSchema = z.object({
   name: z
@@ -54,13 +55,13 @@ export function BackendSelectionStep() {
     <div>
       <h2>Step 1: Select Backend</h2>
       <form onSubmit={handleSubmit(onValidSubmit)}>
-        <div>
-          <label htmlFor="remote-name">Remote name</label>
-          <input id="remote-name" type="text" {...register('name')} />
-          {errors.name && (
-            <p role="alert">{errors.name.message}</p>
-          )}
-        </div>
+        <TextFieldMD3
+          id="remote-name"
+          label="Remote name"
+          registration={register('name')}
+          error={errors.name}
+          required
+        />
         <div data-testid="backend-cards">
           {Object.entries(BACKEND_REGISTRY).map(([type, entry]) => (
             <BackendCard