diff --git a/src/features/event/components/PromotionTemplatesSection.tsx b/src/features/event/components/PromotionTemplatesSection.tsx
index b9786ae..e9f8dca 100644
--- a/src/features/event/components/PromotionTemplatesSection.tsx
+++ b/src/features/event/components/PromotionTemplatesSection.tsx
@@ -3,6 +3,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 type Props = {
   mediaUrl: string;
@@ -28,6 +30,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
   onFileSelected,
   mediaPreview,
 }) => {
+  const isMobile = useIsMobile();
   const templates: PromotionTemplate[] = useMemo(
     () => [
       {
@@ -96,33 +99,92 @@ const PromotionTemplatesSection: React.FC<Props> = ({
     onValueChange: (next: string) => void;
     selected: PromotionTemplate | null;
   }) => {
+    const [open, setOpen] = useState(false);
+
     return (
       <div className="space-y-2">
         <Label>{label}</Label>
         <div className="grid gap-3 md:grid-cols-[1fr,280px] items-start">
-          <Select value={value} onValueChange={onValueChange}>
-            <SelectTrigger>
-              <SelectValue placeholder="Template wählen" />
-            </SelectTrigger>
-            <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-1.5rem)] overflow-x-hidden">
-              {templates.map((tpl) => (
-                <SelectItem key={tpl.id} value={tpl.id}>
-                  <div className="flex items-center gap-3">
-                    <div className="h-10 w-10 rounded border bg-muted/40 overflow-hidden flex items-center justify-center">
-                      {tpl.previewUrl ? (
-                        <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
-                      ) : (
-                        <div className="h-full w-full" />
-                      )}
-                    </div>
-                    <div className="min-w-0">
-                      <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
+          {isMobile ? (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-between"
+                onClick={() => setOpen(true)}
+              >
+                <span className="truncate">{selected?.name || 'Template wählen'}</span>
+                <span className="text-muted-foreground">Auswählen</span>
+              </Button>
+
+              <Sheet open={open} onOpenChange={setOpen}>
+                <SheetContent side="bottom" className="p-0">
+                  <div className="p-4">
+                    <SheetHeader>
+                      <SheetTitle>{label}</SheetTitle>
+                    </SheetHeader>
+                  </div>
+                  <div className="max-h-[70vh] overflow-y-auto px-4 pb-4">
+                    <div className="space-y-2">
+                      {templates.map((tpl) => {
+                        const isActive = tpl.id === value;
+                        return (
+                          <button
+                            key={tpl.id}
+                            type="button"
+                            className={`w-full rounded-md border p-3 text-left transition-colors ${
+                              isActive ? 'bg-primary/10 border-primary/30' : 'hover:bg-muted/40'
+                            }`}
+                            onClick={() => {
+                              onValueChange(tpl.id);
+                              setOpen(false);
+                            }}
+                          >
+                            <div className="flex items-center gap-3">
+                              <div className="h-12 w-12 rounded border bg-muted/40 overflow-hidden flex items-center justify-center shrink-0">
+                                {tpl.previewUrl ? (
+                                  <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
+                                ) : (
+                                  <div className="h-full w-full" />
+                                )}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
+                              </div>
+                            </div>
+                          </button>
+                        );
+                      })}
                     </div>
                   </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+                </SheetContent>
+              </Sheet>
+            </>
+          ) : (
+            <Select value={value} onValueChange={onValueChange}>
+              <SelectTrigger>
+                <SelectValue placeholder="Template wählen" />
+              </SelectTrigger>
+              <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-1.5rem)] overflow-x-hidden">
+                {templates.map((tpl) => (
+                  <SelectItem key={tpl.id} value={tpl.id}>
+                    <div className="flex items-center gap-3">
+                      <div className="h-10 w-10 rounded border bg-muted/40 overflow-hidden flex items-center justify-center">
+                        {tpl.previewUrl ? (
+                          <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
+                        ) : (
+                          <div className="h-full w-full" />
+                        )}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
+                      </div>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
 
           <div className="rounded-md border bg-background p-3">
             <div className="text-xs text-muted-foreground">Vorschau</div>
@@ -213,7 +275,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
       </div>
 
       <div className="flex items-center justify-between gap-3 rounded-md border p-3">
-        <div className="text-sm font-medium">Templates verwalten</div>
+        {/* <div className="text-sm font-medium">Templates verwalten</div> */}
         <div className="flex items-center gap-2">
           <input
             ref={importZipInputRef}