diff --git a/resources/js/admin/mobile/BrandingPage.tsx b/resources/js/admin/mobile/BrandingPage.tsx
index 7adae97b..d142eba5 100644
--- a/resources/js/admin/mobile/BrandingPage.tsx
+++ b/resources/js/admin/mobile/BrandingPage.tsx
@@ -129,7 +129,7 @@ export default function MobileBrandingPage() {
   const slug = slugParam ?? null;
   const navigate = useNavigate();
   const { t } = useTranslation('management');
-  const { textStrong, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
+  const { textStrong, text, muted, subtle, border, primary, accentSoft, danger, surfaceMuted, surface } = useAdminTheme();
 
   const [event, setEvent] = React.useState<TenantEvent | null>(null);
   const [form, setForm] = React.useState<BrandingFormValues>(() => buildBrandingFormBase(BRANDING_FORM_DEFAULTS));
@@ -645,13 +645,41 @@ export default function MobileBrandingPage() {
       >
         <MobileCard gap="$2">
           <Tabs.List gap="$2">
-            <Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="branding"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'branding' ? '700' : '600'}
+                color={activeTab === 'branding' ? text : muted}
+                textAlign="center"
+              >
                 {t('events.branding.titleShort', 'Branding')}
               </Text>
             </Tabs.Tab>
-            <Tabs.Tab value="watermark" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="watermark"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'watermark' ? '700' : '600'}
+                color={activeTab === 'watermark' ? text : muted}
+                textAlign="center"
+              >
                 {t('events.watermark.tab', 'Wasserzeichen')}
               </Text>
             </Tabs.Tab>
diff --git a/resources/js/admin/mobile/EventControlRoomPage.tsx b/resources/js/admin/mobile/EventControlRoomPage.tsx
index 2a76821c..12039fd9 100644
--- a/resources/js/admin/mobile/EventControlRoomPage.tsx
+++ b/resources/js/admin/mobile/EventControlRoomPage.tsx
@@ -1383,39 +1383,31 @@ export default function MobileEventControlRoomPage() {
                   orientation="horizontal"
                   flexDirection="row"
                   alignItems="center"
-                  padding="$1"
-                  gap="$1.5"
-                  borderRadius="$pill"
-                  borderWidth={1}
-                  borderColor={border}
-                  backgroundColor={surfaceMuted}
+                  gap="$2"
                 >
                   {MODERATION_FILTERS.map((option) => {
                     const count = moderationCounts[option.value] ?? 0;
+                    const active = option.value === moderationFilter;
                     return (
                       <ToggleGroup.Item
                         key={option.value}
                         value={option.value}
-                        borderRadius="$pill"
-                        paddingVertical="$1.5"
+                        borderRadius="$4"
+                        borderWidth={1}
+                        borderColor={border}
+                        paddingVertical="$2"
                         paddingHorizontal="$3"
+                        hoverStyle={{ backgroundColor: '$backgroundHover' }}
+                        pressStyle={{ backgroundColor: '$backgroundPress' }}
+                        activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
                       >
-                        <XStack alignItems="center" gap="$1.5">
-                          <Text fontSize="$xs" fontWeight="600">
+                        <XStack alignItems="center" gap="$2">
+                          <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
                             {t(option.labelKey, option.fallback)}
                           </Text>
-                          <XStack
-                            paddingHorizontal="$1.5"
-                            paddingVertical="$0.5"
-                            borderRadius="$pill"
-                            borderWidth={1}
-                            borderColor={border}
-                            backgroundColor="$backgroundStrong"
-                          >
-                            <Text fontSize={10} fontWeight="700">
-                              {count}
-                            </Text>
-                          </XStack>
+                          <Text fontSize={10} fontWeight="700" color={active ? text : muted}>
+                            {count}
+                          </Text>
                         </XStack>
                       </ToggleGroup.Item>
                     );
@@ -1563,39 +1555,31 @@ export default function MobileEventControlRoomPage() {
                   orientation="horizontal"
                   flexDirection="row"
                   alignItems="center"
-                  padding="$1"
-                  gap="$1.5"
-                  borderRadius="$pill"
-                  borderWidth={1}
-                  borderColor={border}
-                  backgroundColor={surfaceMuted}
+                  gap="$2"
                 >
                   {LIVE_STATUS_OPTIONS.map((option) => {
                     const count = liveCounts[option.value] ?? 0;
+                    const active = option.value === liveStatusFilter;
                     return (
                       <ToggleGroup.Item
                         key={option.value}
                         value={option.value}
-                        borderRadius="$pill"
-                        paddingVertical="$1.5"
+                        borderRadius="$4"
+                        borderWidth={1}
+                        borderColor={border}
+                        paddingVertical="$2"
                         paddingHorizontal="$3"
+                        hoverStyle={{ backgroundColor: '$backgroundHover' }}
+                        pressStyle={{ backgroundColor: '$backgroundPress' }}
+                        activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
                       >
-                        <XStack alignItems="center" gap="$1.5">
-                          <Text fontSize="$xs" fontWeight="600">
+                        <XStack alignItems="center" gap="$2">
+                          <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
                             {t(option.labelKey, option.fallback)}
                           </Text>
-                          <XStack
-                            paddingHorizontal="$1.5"
-                            paddingVertical="$0.5"
-                            borderRadius="$pill"
-                            borderWidth={1}
-                            borderColor={border}
-                            backgroundColor="$backgroundStrong"
-                          >
-                            <Text fontSize={10} fontWeight="700">
-                              {count}
-                            </Text>
-                          </XStack>
+                          <Text fontSize={10} fontWeight="700" color={active ? text : muted}>
+                            {count}
+                          </Text>
                         </XStack>
                       </ToggleGroup.Item>
                     );
diff --git a/resources/js/admin/mobile/EventRecapPage.tsx b/resources/js/admin/mobile/EventRecapPage.tsx
index cf3c3124..10a30ff6 100644
--- a/resources/js/admin/mobile/EventRecapPage.tsx
+++ b/resources/js/admin/mobile/EventRecapPage.tsx
@@ -215,18 +215,60 @@ export default function MobileEventRecapPage() {
           flexDirection="column"
         >
           <Tabs.List gap="$2">
-            <Tabs.Tab value="overview" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="overview"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'overview' ? '700' : '600'}
+                color={activeTab === 'overview' ? text : muted}
+                textAlign="center"
+              >
                 {t('events.recap.tabs.overview', 'Overview')}
               </Text>
             </Tabs.Tab>
-            <Tabs.Tab value="engagement" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="engagement"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'engagement' ? '700' : '600'}
+                color={activeTab === 'engagement' ? text : muted}
+                textAlign="center"
+              >
                 {t('events.recap.tabs.engagement', 'Engagement')}
               </Text>
             </Tabs.Tab>
-            <Tabs.Tab value="compliance" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="compliance"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'compliance' ? '700' : '600'}
+                color={activeTab === 'compliance' ? text : muted}
+                textAlign="center"
+              >
                 {t('events.recap.tabs.compliance', 'Compliance')}
               </Text>
             </Tabs.Tab>
diff --git a/resources/js/admin/mobile/EventTasksPage.tsx b/resources/js/admin/mobile/EventTasksPage.tsx
index 58c10dcf..5263b286 100644
--- a/resources/js/admin/mobile/EventTasksPage.tsx
+++ b/resources/js/admin/mobile/EventTasksPage.tsx
@@ -1190,8 +1190,11 @@ export default function MobileEventTasksPage() {
                       justifyContent="center"
                       borderRightWidth={index === arr.length - 1 ? 0 : 1}
                       borderRightColor={border}
+                      hoverStyle={{ backgroundColor: '$backgroundHover' }}
+                      pressStyle={{ backgroundColor: '$backgroundPress' }}
+                      activeStyle={{ backgroundColor: '$backgroundPress' }}
                     >
-                      <Text fontSize="$sm" fontWeight={isActive ? '700' : '600'}>
+                      <Text fontSize="$sm" fontWeight={isActive ? '700' : '600'} color={isActive ? text : muted}>
                         {tab.label}
                       </Text>
                     </Tabs.Tab>
diff --git a/resources/js/admin/mobile/EventsPage.tsx b/resources/js/admin/mobile/EventsPage.tsx
index f039c121..6077eef9 100644
--- a/resources/js/admin/mobile/EventsPage.tsx
+++ b/resources/js/admin/mobile/EventsPage.tsx
@@ -319,40 +319,34 @@ function EventsList({
                 orientation="horizontal"
                 flexDirection="row"
                 alignItems="center"
-                padding="$1"
-                gap="$1.5"
-                borderRadius="$pill"
-                borderWidth={1}
-                borderColor={border}
-                backgroundColor={surfaceMuted}
+                gap="$2"
               >
-                {filters.map((filter) => (
-                  <ToggleGroup.Item
-                    key={filter.key}
-                    value={filter.key}
-                    borderRadius="$pill"
-                    paddingVertical="$1.5"
-                    paddingHorizontal="$3"
-                  >
-                    <XStack alignItems="center" gap="$1.5">
-                      <Text fontSize="$xs" fontWeight="600">
-                        {filter.label}
-                      </Text>
-                      <XStack
-                        paddingHorizontal="$1.5"
-                        paddingVertical="$0.5"
-                        borderRadius="$pill"
-                        borderWidth={1}
-                        borderColor={border}
-                        backgroundColor="$backgroundStrong"
-                      >
-                        <Text fontSize={10} fontWeight="700">
+                {filters.map((filter) => {
+                  const active = filter.key === statusFilter;
+                  return (
+                    <ToggleGroup.Item
+                      key={filter.key}
+                      value={filter.key}
+                      borderRadius="$4"
+                      borderWidth={1}
+                      borderColor={border}
+                      paddingVertical="$2"
+                      paddingHorizontal="$3"
+                      hoverStyle={{ backgroundColor: '$backgroundHover' }}
+                      pressStyle={{ backgroundColor: '$backgroundPress' }}
+                      activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
+                    >
+                      <XStack alignItems="center" gap="$2">
+                        <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
+                          {filter.label}
+                        </Text>
+                        <Text fontSize={10} fontWeight="700" color={active ? text : muted}>
                           {filter.count}
                         </Text>
                       </XStack>
-                    </XStack>
-                  </ToggleGroup.Item>
-                ))}
+                    </ToggleGroup.Item>
+                  );
+                })}
               </ToggleGroup>
             </ScrollView>
           </YStack>
diff --git a/resources/js/admin/mobile/ProfileAccountPage.tsx b/resources/js/admin/mobile/ProfileAccountPage.tsx
index 253105d3..50612ce9 100644
--- a/resources/js/admin/mobile/ProfileAccountPage.tsx
+++ b/resources/js/admin/mobile/ProfileAccountPage.tsx
@@ -584,13 +584,41 @@ export default function MobileProfileAccountPage() {
           flexDirection="column"
         >
           <Tabs.List gap="$2">
-            <Tabs.Tab value="account" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="account"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'account' ? '700' : '600'}
+                color={activeTab === 'account' ? text : muted}
+                textAlign="center"
+              >
                 {t('profile.tabs.account', 'Account')}
               </Text>
             </Tabs.Tab>
-            <Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
-              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+            <Tabs.Tab
+              value="branding"
+              flex={1}
+              paddingVertical="$2.5"
+              paddingHorizontal="$3"
+              borderRadius="$4"
+              hoverStyle={{ backgroundColor: '$backgroundHover' }}
+              pressStyle={{ backgroundColor: '$backgroundPress' }}
+              activeStyle={{ backgroundColor: '$backgroundPress' }}
+            >
+              <Text
+                fontSize="$sm"
+                fontWeight={activeTab === 'branding' ? '700' : '600'}
+                color={activeTab === 'branding' ? text : muted}
+                textAlign="center"
+              >
                 {t('profile.tabs.branding', 'Standard-Branding')}
               </Text>
             </Tabs.Tab>
diff --git a/resources/js/admin/mobile/components/Primitives.tsx b/resources/js/admin/mobile/components/Primitives.tsx
index 25069c2d..9fa03c32 100644
--- a/resources/js/admin/mobile/components/Primitives.tsx
+++ b/resources/js/admin/mobile/components/Primitives.tsx
@@ -434,6 +434,7 @@ export function ContentTabs({
   tabs: { value: string; label: string; content: React.ReactNode }[];
   header?: React.ReactNode;
 }) {
+  const { muted, text } = useAdminTheme();
   return (
     <Tabs
       defaultValue={value}
@@ -456,8 +457,15 @@ export function ContentTabs({
             paddingHorizontal="$3"
             alignItems="center"
             justifyContent="center"
+            hoverStyle={{ backgroundColor: '$backgroundHover' }}
+            pressStyle={{ backgroundColor: '$backgroundPress' }}
+            activeStyle={{ backgroundColor: '$backgroundPress' }}
           >
-            <Text fontSize="$sm" fontWeight="600">
+            <Text
+              fontSize="$sm"
+              fontWeight={value === tab.value ? '700' : '600'}
+              color={value === tab.value ? text : muted}
+            >
               {tab.label}
             </Text>
           </Tabs.Tab>