diff --git a/assets/icons/squareBehindSquare4_stroke2_corner0_rounded.svg b/assets/icons/squareBehindSquare4_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..3fa7e5d390
--- /dev/null
+++ b/assets/icons/squareBehindSquare4_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/icons/SquareBehindSquare4.tsx b/src/components/icons/SquareBehindSquare4.tsx
new file mode 100644
index 0000000000..425599cbce
--- /dev/null
+++ b/src/components/icons/SquareBehindSquare4.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SquareBehindSquare4_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z',
+})
diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx
index 620133f1ad..8ed51dd5cb 100644
--- a/src/screens/Moderation/index.tsx
+++ b/src/screens/Moderation/index.tsx
@@ -26,11 +26,12 @@ import {
 } from '#/state/queries/preferences'
 import {useModServicesDetailedInfoQuery} from '#/state/queries/modservice'
 
-import {useTheme, atoms as a, useBreakpoints} from '#/alf'
+import {useTheme, atoms as a, useBreakpoints, native} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {SquareBehindSquare4_Stroke2_Corner0_Rounded as SquareBehindSquare} from '#/components/icons/SquareBehindSquare4'
 import {Text} from '#/components/Typography'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -38,7 +39,7 @@ import {InlineLink, Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {useLabelGroupStrings} from '#/lib/moderation/useLabelGroupStrings'
 import * as Dialog from '#/components/Dialog'
-import {Button} from '#/components/Button'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {
   getModerationServiceTitle,
   useConfigurableLabelGroups,
@@ -365,79 +366,90 @@ function LabelGroup({
       </View>
 
       {!!mods.length && (
-        <View style={[a.flex_row, a.align_start, a.pb_md]}>
+        <View
+          style={[
+            a.flex_row,
+            a.align_start,
+            a.justify_between,
+            a.mb_md,
+            a.p_sm,
+            a.rounded_sm,
+            t.atoms.bg_contrast_25,
+          ]}>
+          <View style={[a.flex_row, a.align_center, a.flex_1, a.gap_xs]}>
+            {mods.map(mod => {
+              const modservicePreferences =
+                preferences.moderationOpts.mods.find(
+                  ({did}) => did === mod.creator.did,
+                )
+              const labelGroupEnabled =
+                !modservicePreferences?.disabledLabelGroups?.includes(
+                  labelGroup,
+                )
+              const isLabelerEnabled = modservicePreferences?.enabled
+              const enabled = labelGroupEnabled && isLabelerEnabled
+              return (
+                <View
+                  key={mod.creator.did}
+                  style={[
+                    a.flex_row,
+                    a.align_center,
+                    a.gap_sm,
+                    a.py_sm,
+                    a.px_md,
+                    a.rounded_full,
+                    a.border,
+                    t.atoms.border_contrast_low,
+                    enabled && t.atoms.border_contrast_high,
+                    enabled && t.atoms.bg,
+                  ]}>
+                  <View
+                    style={[
+                      a.rounded_full,
+                      t.atoms.bg_contrast_300,
+                      {
+                        height: 6,
+                        width: 6,
+                      },
+                      enabled && {
+                        backgroundColor: t.palette.positive_500,
+                      },
+                    ]}
+                  />
+                  <Text
+                    style={[
+                      a.text_xs,
+                      a.font_bold,
+                      native({
+                        top: 1,
+                      }),
+                      t.atoms.text_contrast_medium,
+                      enabled && t.atoms.text_contrast_high,
+                    ]}>
+                    {getModerationServiceTitle({
+                      displayName: mod.creator.displayName,
+                      handle: mod.creator.handle,
+                    })}
+                  </Text>
+                </View>
+              )
+            })}
+          </View>
+
           <Button
-            label={_(
-              msg`Configure moderation services for category: ${name.toLowerCase()}`,
-            )}
-            onPress={() =>
+            size="tiny"
+            variant="ghost"
+            color="secondary"
+            label={_(msg`Configure enabled labelers for this content type`)}
+            style={[a.mt_xs]}
+            onPress={() => {
               openModSettingsDialog({
                 labelGroup,
                 modservices: mods,
               })
-            }
-            style={[a.flex_1]}>
-            {ctx => (
-              <View
-                style={[
-                  a.w_full,
-                  a.flex_row,
-                  a.align_center,
-                  a.gap_xs,
-                  a.p_sm,
-                  a.border,
-                  a.rounded_sm,
-                  t.atoms.border_contrast_low,
-                  (ctx.hovered || ctx.focused) && t.atoms.bg_contrast_25,
-                ]}>
-                {mods.map(mod => {
-                  const modservicePreferences =
-                    preferences.moderationOpts.mods.find(
-                      ({did}) => did === mod.creator.did,
-                    )
-                  const enabled =
-                    !modservicePreferences?.disabledLabelGroups?.includes(
-                      labelGroup,
-                    )
-                  return (
-                    <View
-                      key={mod.creator.did}
-                      style={[
-                        a.py_xs,
-                        a.px_sm,
-                        a.rounded_sm,
-                        a.border,
-                        t.atoms.border_contrast_low,
-                        enabled && t.atoms.bg_contrast_800,
-                      ]}>
-                      <Text
-                        style={[
-                          a.text_xs,
-                          a.font_bold,
-                          t.atoms.text_contrast_high,
-                          enabled && t.atoms.text_inverted,
-                        ]}>
-                        {getModerationServiceTitle({
-                          displayName: mod.creator.displayName,
-                          handle: mod.creator.handle,
-                        })}
-                      </Text>
-                    </View>
-                  )
-                })}
-
-                <Text
-                  style={[
-                    a.text_xs,
-                    a.font_bold,
-                    a.pl_sm,
-                    a.italic,
-                    t.atoms.text_contrast_low,
-                  ]}>
-                  Configure
-                </Text>
-              </View>
-            )}
+            }}>
+            <ButtonText>Configure</ButtonText>
+            <ButtonIcon icon={SquareBehindSquare} position="right" />
           </Button>
         </View>
       )}