diff --git a/components/animate/AnimationPreview.tsx b/components/animate/AnimationPreview.tsx
index 01ce403..16d689c 100644
--- a/components/animate/AnimationPreview.tsx
+++ b/components/animate/AnimationPreview.tsx
@@ -3,13 +3,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Play, Pause, RotateCcw, Square, Circle, Type } from 'lucide-react';
 import { buildCSS } from '@/lib/animate/cssBuilder';
@@ -63,18 +56,13 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
     <Card className="h-full flex flex-col">
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
         <CardTitle>Preview</CardTitle>
-        <Select value={speed} onValueChange={setSpeed}>
-          <SelectTrigger className="w-20 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {SPEEDS.map((s) => (
-              <SelectItem key={s.value} value={s.value} className="text-xs">
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)}>
+          {SPEEDS.map((s) => (
+            <ToggleGroupItem key={s.value} value={s.value} size="sm" className="text-xs px-2.5">
+              {s.label}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
       </CardHeader>
       <CardContent className="flex-1 flex flex-col gap-4">
         {/* Preview canvas */}