diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 42a375b..6222975 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -24,6 +24,7 @@ const navGroups = [
       { key: 'welcome', label: 'Willkommen', icon: <Sparkles size={18} /> },
       { key: 'birthday', label: 'Birthday', icon: <CalendarDays size={18} /> },
       { key: 'events', label: 'Events', icon: <Activity size={18} /> },
+      { key: 'reactionroles', label: 'Reaction Roles', icon: <Tag size={18} /> },
     ]
   },
   {
@@ -38,7 +39,6 @@ const navGroups = [
     label: 'Moderation',
     items: [
       { key: 'automod', label: 'Automod', icon: <Shield size={18} /> },
-      { key: 'reactionroles', label: 'Reaction Roles', icon: <Tag size={18} /> },
       { key: 'tasks', label: 'Team-Aufgaben', icon: <ListChecks size={18} /> },
       { key: 'watchlist', label: 'Watchlist', icon: <Eye size={18} /> },
     ]
@@ -48,6 +48,11 @@ const navGroups = [
     items: [
       { key: 'dynamicvoice', label: 'Dynamic Voice', icon: <AudioLines size={18} /> },
       { key: 'music', label: 'Musik', icon: <Music size={18} /> },
+    ]
+  },
+  {
+    label: 'Statistiken',
+    items: [
       { key: 'statuspage', label: 'Statuspage', icon: <RadioTower size={18} /> },
       { key: 'serverstats', label: 'Server Stats', icon: <Activity size={18} /> },
       { key: 'growth', label: 'Wachstum', icon: <TrendingUp size={18} /> },
diff --git a/frontend/src/components/shared/ModuleActiveToggle.tsx b/frontend/src/components/shared/ModuleActiveToggle.tsx
new file mode 100644
index 0000000..5efd088
--- /dev/null
+++ b/frontend/src/components/shared/ModuleActiveToggle.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { AppSwitch } from './AppSwitch';
+
+type Props = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  isSelected: boolean;
+  onChange: (value: boolean) => void;
+};
+
+export function ModuleActiveToggle({ icon, title, description, isSelected, onChange }: Props) {
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-accent bg-accent-soft p-3">
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground">
+        {icon}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="text-sm font-semibold">{title}</div>
+        <div className="text-xs text-muted">{description}</div>
+      </div>
+      <AppSwitch aria-label={title} isSelected={isSelected} onChange={onChange} />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Automod.tsx b/frontend/src/pages/Automod.tsx
index dcab63a..a41bb9c 100644
--- a/frontend/src/pages/Automod.tsx
+++ b/frontend/src/pages/Automod.tsx
@@ -6,6 +6,7 @@ import { SectionCard } from '../components/shared/SectionCard';
 import { ChannelSelect, type ChannelOption } from '../components/shared/ChannelSelect';
 import { RoleSelect, type RoleOption } from '../components/shared/RoleSelect';
 import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 import { useGuildResources } from '../hooks/useGuildResources';
 
 const FILTERS = [
@@ -206,20 +207,13 @@ export function Automod() {
             <h3 className="text-base font-semibold">Automod</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-4 p-5">
-            <div className="flex items-center gap-3 rounded-xl border border-accent bg-accent-soft p-3">
-              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground">
-                <Shield size={16} />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="text-sm font-semibold">Automod aktiv</div>
-                <div className="text-xs text-muted">Schaltet alle Filter unten gesammelt ein oder aus.</div>
-              </div>
-              <AppSwitch
-                aria-label="Automod aktiv"
-                isSelected={settings.automodEnabled !== false}
-                onChange={(v) => setSettings((s) => ({ ...s, automodEnabled: v }))}
-              />
-            </div>
+            <ModuleActiveToggle
+              icon={<Shield size={16} />}
+              title="Automod aktiv"
+              description="Schaltet alle Filter unten gesammelt ein oder aus."
+              isSelected={settings.automodEnabled !== false}
+              onChange={(v) => setSettings((s) => ({ ...s, automodEnabled: v }))}
+            />
 
             <div className="flex flex-col gap-2">
               {FILTERS.map((f) => {
diff --git a/frontend/src/pages/Birthday.tsx b/frontend/src/pages/Birthday.tsx
index f7f2ae7..05358ef 100644
--- a/frontend/src/pages/Birthday.tsx
+++ b/frontend/src/pages/Birthday.tsx
@@ -3,7 +3,7 @@ import { CalendarDays, Save, Cake, Clock } from 'lucide-react';
 import { useApp } from '../context/AppContext';
 import { SectionCard } from '../components/shared/SectionCard';
 import { ChannelSelect } from '../components/shared/ChannelSelect';
-import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 import { useGuildResources } from '../hooks/useGuildResources';
 
 export function Birthday() {
@@ -18,10 +18,12 @@ export function Birthday() {
             <h3 className="text-base font-semibold">Konfiguration</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-4 p-5">
-            <AppSwitch
+            <ModuleActiveToggle
+              icon={<Cake size={16} />}
+              title="Birthday aktiv"
+              description="Speichert Geburtstage und sendet automatisch Glückwünsche."
               isSelected={birthday.config?.enabled !== false}
               onChange={(v) => setBirthday((s) => ({ ...s, config: { ...s.config, enabled: v } }))}
-              label={<div className="flex items-center gap-2"><Cake size={16} /> Birthday aktiv</div>}
             />
 
             <TextField>
diff --git a/frontend/src/pages/DynamicVoice.tsx b/frontend/src/pages/DynamicVoice.tsx
index 161fc2b..be51656 100644
--- a/frontend/src/pages/DynamicVoice.tsx
+++ b/frontend/src/pages/DynamicVoice.tsx
@@ -3,7 +3,7 @@ import { AudioLines, Save, Mic, Users } from 'lucide-react';
 import { useApp } from '../context/AppContext';
 import { SectionCard } from '../components/shared/SectionCard';
 import { ChannelSelect } from '../components/shared/ChannelSelect';
-import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 import { useGuildResources } from '../hooks/useGuildResources';
 
 export function DynamicVoice() {
@@ -18,10 +18,12 @@ export function DynamicVoice() {
             <h3 className="text-base font-semibold">Konfiguration</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-4 p-5">
-            <AppSwitch
+            <ModuleActiveToggle
+              icon={<AudioLines size={16} />}
+              title="Dynamic Voice aktiv"
+              description="Erstellt private Voice-Channels aus der konfigurierten Lobby."
               isSelected={settings.dynamicVoiceEnabled !== false}
               onChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceEnabled: v }))}
-              label={<div className="flex items-center gap-2"><AudioLines size={16} /> Dynamic Voice aktiv</div>}
             />
 
             <TextField>
diff --git a/frontend/src/pages/ServerStats.tsx b/frontend/src/pages/ServerStats.tsx
index b2ea9de..98dd6c9 100644
--- a/frontend/src/pages/ServerStats.tsx
+++ b/frontend/src/pages/ServerStats.tsx
@@ -2,7 +2,7 @@ import { Card, CardContent, CardHeader, Input, Button, Chip, Separator, TextFiel
 import { Activity, Save, Trash2, Plus, BarChart3 } from 'lucide-react';
 import { useApp } from '../context/AppContext';
 import { SectionCard } from '../components/shared/SectionCard';
-import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 
 export function ServerStats() {
   const { statsDraft, setStatsDraft, saveServerStats, statsItemDraft, setStatsItemDraft, addStatsItem, deleteStatsItem } = useApp();
@@ -17,10 +17,12 @@ export function ServerStats() {
             <h3 className="text-base font-semibold">Konfiguration</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-4 p-5">
-            <AppSwitch
+            <ModuleActiveToggle
+              icon={<BarChart3 size={16} />}
+              title="Server Stats aktiv"
+              description="Zeigt Mitglieder-/Channel-Zahlen als Voice-Statistiken an."
               isSelected={statsDraft?.enabled === true}
               onChange={(v) => setStatsDraft((s) => ({ ...(s || {}), enabled: v }))}
-              label={<div className="flex items-center gap-2"><BarChart3 size={16} /> Server Stats aktiv</div>}
             />
 
             <TextField>
diff --git a/frontend/src/pages/Statuspage.tsx b/frontend/src/pages/Statuspage.tsx
index 72fecdd..6fb490b 100644
--- a/frontend/src/pages/Statuspage.tsx
+++ b/frontend/src/pages/Statuspage.tsx
@@ -4,7 +4,7 @@ import { useApp } from '../context/AppContext';
 import { SectionCard } from '../components/shared/SectionCard';
 import type { StatusService } from '../types';
 import { ChannelSelect } from '../components/shared/ChannelSelect';
-import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 import { useGuildResources } from '../hooks/useGuildResources';
 
 export function Statuspage() {
@@ -21,10 +21,12 @@ export function Statuspage() {
             <h3 className="text-base font-semibold">Konfiguration</h3>
           </CardHeader>
           <CardContent className="flex flex-col gap-4 p-5">
-            <AppSwitch
+            <ModuleActiveToggle
+              icon={<RadioTower size={16} />}
+              title="Statuspage aktiv"
+              description="Postet und aktualisiert die Statusseite mit deinen Services."
               isSelected={statusDraft?.enabled !== false}
               onChange={(v) => setStatusDraft((s) => ({ ...(s || {}), enabled: v }))}
-              label={<div className="flex items-center gap-2"><RadioTower size={16} /> Statuspage aktiv</div>}
             />
 
             <TextField>
diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx
index 0ec2e80..494a21a 100644
--- a/frontend/src/pages/Welcome.tsx
+++ b/frontend/src/pages/Welcome.tsx
@@ -4,7 +4,7 @@ import { useApp } from '../context/AppContext';
 import { SectionCard } from '../components/shared/SectionCard';
 import { DiscordPreview } from '../components/shared/DiscordPreview';
 import { ChannelSelect } from '../components/shared/ChannelSelect';
-import { AppSwitch } from '../components/shared/AppSwitch';
+import { ModuleActiveToggle } from '../components/shared/ModuleActiveToggle';
 import { useGuildResources } from '../hooks/useGuildResources';
 
 export function Welcome() {
@@ -22,10 +22,12 @@ export function Welcome() {
             </div>
           </CardHeader>
           <CardContent className="flex flex-col gap-4">
-            <AppSwitch
+            <ModuleActiveToggle
+              icon={<Sparkles size={16} />}
+              title="Welcome aktiv"
+              description="Sendet ein Begrüßungs-Embed, wenn neue Mitglieder beitreten."
               isSelected={settings.welcomeConfig?.enabled !== false}
               onChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), enabled: v } }))}
-              label={<div className="flex items-center gap-2"><Sparkles size={16} /> Welcome aktiv</div>}
             />
 
             <TextField>