diff --git a/src/components/recurrence-picker.tsx b/src/components/recurrence-picker.tsx
index d824bbf..edab6a2 100644
--- a/src/components/recurrence-picker.tsx
+++ b/src/components/recurrence-picker.tsx
@@ -73,88 +73,82 @@ export function RecurrencePicker({ value, onChange }: Props) {
   }
 
   return (
-    <Card className="w-full">
+    <div className="">
+      <Label htmlFor="frequency" className="pt-4 pb-2 pl-1">Repeats</Label>
+      <div className="space-y-2">
+        <Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
+          <SelectTrigger id="frequency">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="NONE">Does not repeat</SelectItem>
+            <SelectItem value="DAILY">Daily</SelectItem>
+            <SelectItem value="WEEKLY">Weekly</SelectItem>
+            <SelectItem value="MONTHLY">Monthly</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
 
-      {/* <CardHeader className="pb-4">
-        <CardTitle className="text-base">Recurrence Settings</CardTitle>
-      </CardHeader> */}
-      <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="frequency">Repeats</Label>
-          <Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
-            <SelectTrigger id="frequency">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="NONE">Does not repeat</SelectItem>
-              <SelectItem value="DAILY">Daily</SelectItem>
-              <SelectItem value="WEEKLY">Weekly</SelectItem>
-              <SelectItem value="MONTHLY">Monthly</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+      {rec.freq !== "NONE" && (
+        <>
+          <div className="space-y-2">
+            <Label htmlFor="interval">
+              Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
+              {rec.interval > 1 ? "s" : ""})
+            </Label>
+            <Input
+              id="interval"
+              type="number"
+              min={1}
+              value={rec.interval}
+              onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
+              className="w-24"
+            />
+          </div>
 
-        {rec.freq !== "NONE" && (
-          <>
+          {rec.freq === "WEEKLY" && (
             <div className="space-y-2">
-              <Label htmlFor="interval">
-                Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
-                {rec.interval > 1 ? "s" : ""})
-              </Label>
+              <Label>Days of the week</Label>
+              <div className="flex flex-wrap gap-4">
+                {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
+                  <div key={day} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={day}
+                      checked={rec.byDay?.includes(day) || false}
+                      onCheckedChange={() => toggleDay(day)}
+                    />
+                    <Label htmlFor={day} className="text-sm font-normal">
+                      {dayLabels[day as keyof typeof dayLabels]}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="count">End after (occurrences)</Label>
               <Input
-                id="interval"
+                id="count"
                 type="number"
-                min={1}
-                value={rec.interval}
-                onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
-                className="w-24"
+                placeholder="e.g. 10"
+                value={rec.count || ""}
+                onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
               />
             </div>
-
-            {rec.freq === "WEEKLY" && (
-              <div className="space-y-2">
-                <Label>Days of the week</Label>
-                <div className="flex flex-wrap gap-4">
-                  {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
-                    <div key={day} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={day}
-                        checked={rec.byDay?.includes(day) || false}
-                        onCheckedChange={() => toggleDay(day)}
-                      />
-                      <Label htmlFor={day} className="text-sm font-normal">
-                        {dayLabels[day as keyof typeof dayLabels]}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="count">End after (occurrences)</Label>
-                <Input
-                  id="count"
-                  type="number"
-                  placeholder="e.g. 10"
-                  value={rec.count || ""}
-                  onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="until">End by date</Label>
-                <Input
-                  id="until"
-                  type="date"
-                  value={rec.until || ""}
-                  onChange={(e) => update({ until: e.target.value || undefined })}
-                />
-              </div>
+            <div className="space-y-2">
+              <Label htmlFor="until">End by date</Label>
+              <Input
+                id="until"
+                type="date"
+                value={rec.until || ""}
+                onChange={(e) => update({ until: e.target.value || undefined })}
+              />
             </div>
-          </>
-        )}
-      </CardContent>
-    </Card>
+          </div>
+        </>
+      )}
+    </div>
   )
 }