diff --git a/assets/icons/heart2_filled_stroke2_corner0_rounded.svg b/assets/icons/heart2_filled_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..1dfefb4c99
--- /dev/null
+++ b/assets/icons/heart2_filled_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" d="M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z"/></svg>
diff --git a/assets/icons/heart2_stroke2_corner0_rounded.svg b/assets/icons/heart2_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..5b3da8e00e
--- /dev/null
+++ b/assets/icons/heart2_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="M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z" clip-rule="evenodd"/></svg>
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index a86f8ae7f4..43ee3bd51f 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -195,6 +195,9 @@ export const atoms = {
   font_bold: {
     fontWeight: tokens.fontWeight.semibold,
   },
+  italic: {
+    fontStyle: 'italic',
+  },
 
   /*
    * Border
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index f88fbcbde2..9428b6a063 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -49,7 +49,7 @@ export type VariantProps = {
 }
 
 export type ButtonProps = React.PropsWithChildren<
-  Pick<PressableProps, 'disabled' | 'onPress'> &
+  Pick<PressableProps, 'disabled' | 'onPress' | 'testID'> &
     AccessibilityProps &
     VariantProps & {
       label: string
diff --git a/src/components/icons/Heart2.tsx b/src/components/icons/Heart2.tsx
new file mode 100644
index 0000000000..07f5a1d2c8
--- /dev/null
+++ b/src/components/icons/Heart2.tsx
@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Heart2_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z',
+})
+
+export const Heart2_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z',
+})
diff --git a/src/screens/ProfileModerationService/index.tsx b/src/screens/ProfileModerationService/index.tsx
index b8ce5f807e..c5fd6d4e5b 100644
--- a/src/screens/ProfileModerationService/index.tsx
+++ b/src/screens/ProfileModerationService/index.tsx
@@ -13,7 +13,6 @@ import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
 import {TextLink} from 'view/com/util/Link'
 import {Button as OldButton} from 'view/com/util/forms/Button'
 import {Text as RNText} from 'view/com/util/text/Text'
-import {RichText} from 'view/com/util/text/RichText'
 import {ModServicePrefs} from '#/view/com/moderation/ModServicePrefs'
 import * as Toast from 'view/com/util/Toast'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
@@ -43,6 +42,9 @@ import {Text} from '#/components/Typography'
 import {Loader} from '#/components/Loader'
 import {Button, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Heart2_Stroke2_Corner0_Rounded as Heart, Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled} from '#/components/icons/Heart2'
+import {RichText} from '#/components/RichText'
+import {InlineLink} from '#/components/Link'
 
 import {ErrorState} from '#/screens/ProfileModerationService/ErrorState'
 import {Header} from '#/screens/ProfileModerationService/Header'
@@ -130,6 +132,7 @@ export function ProfileModserviceScreenInner({
   preferences: UsePreferencesQueryResponse
   modInfo: AppBskyModerationDefs.ModServiceViewDetailed
 }) {
+  const t = useTheme()
   const {_} = useLingui()
   const pal = usePalette('default')
   const {hasSession} = useSession()
@@ -149,17 +152,6 @@ export function ProfileModserviceScreenInner({
   // !unpinnedFeed &&
   // (!!pinnedFeed || preferences.feeds.pinned.includes(feedInfo.uri))
 
-  const descriptionRT = useMemo(
-    () =>
-      modInfo.description
-        ? new RichTextAPI({
-            text: modInfo.description,
-            facets: modInfo.descriptionFacets,
-          })
-        : undefined,
-    [modInfo],
-  )
-
   useSetTitle(modInfo.creator.displayName || modInfo.creator.handle)
 
   // event handlers
@@ -187,102 +179,79 @@ export function ProfileModserviceScreenInner({
     }
   }, [likeUri, isLiked, modInfo, likeMod, unlikeMod, track, _])
 
-  // render
-  // =
-
   return (
-    <View style={s.hContentRegion}>
-      <ScrollView
-        scrollEventThrottle={1}
-        contentContainerStyle={{
-          minHeight: Dimensions.get('window').height * 1.5,
-        }}>
-        <Header info={modInfo} />
-        <View
-          style={[
-            {
-              borderTopWidth: 1,
-              paddingVertical: 20,
-              paddingHorizontal: 14,
-              gap: 12,
-            },
-            pal.border,
-          ]}>
-          {descriptionRT ? (
-            <RichText
-              testID="modinfoDescription"
-              type="lg"
-              style={pal.text}
-              richText={descriptionRT}
-            />
-          ) : (
-            <RNText type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
-              <Trans>No description</Trans>
-            </RNText>
-          )}
-          <RNText type="lg" style={pal.textLight}>
-            <Trans>
-              Operated by{' '}
-              <TextLink
-                href={makeProfileLink(modInfo.creator)}
-                text={sanitizeHandle(modInfo.creator.handle, '@')}
-                style={pal.link}
-              />
-              . Handles reports of anti-social behavior, illegal content,
-              unwanted sexual content, and misinformation.
-            </Trans>
-          </RNText>
+    <ScrollView
+      scrollEventThrottle={1}
+      contentContainerStyle={{
+        minHeight: Dimensions.get('window').height * 1.5,
+        borderWidth: 0,
+      }}>
+      <Header info={modInfo} />
 
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
-            <OldButton
-              type="default"
-              testID="toggleLikeBtn"
-              accessibilityLabel={_(msg`Like this feed`)}
-              accessibilityHint=""
-              disabled={!hasSession || isLikePending || isUnlikePending}
-              onPress={onToggleLiked}
-              style={{paddingHorizontal: 10}}>
-              {isLiked ? (
-                <HeartIconSolid size={19} style={s.likeColor} />
-              ) : (
-                <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
-              )}
-            </OldButton>
-            {typeof modInfo.likeCount === 'number' && (
-              <TextLink
-                href={'#todo'}
-                text={_(
-                  msg`Liked by ${modInfo.likeCount} ${pluralize(
-                    modInfo.likeCount,
-                    'user',
-                  )}`,
-                )}
-                style={[pal.textLight, s.semiBold]}
-              />
+      <View style={[a.gap_md]}>
+        {modInfo.description ? (
+          <RichText
+            testID="modinfoDescription"
+            resolveFacets
+            value={modInfo.description}
+            style={[a.text_md, a.leading_normal]}
+          />
+        ) : (
+          <Text
+            style={[
+              a.text_md,
+              a.leading_normal,
+              t.atoms.text_contrast_700,
+              {fontStyle: 'italic'},
+            ]}>
+            <Trans>No description</Trans>
+          </Text>
+        )}
+
+        <Text style={[a.text_md, a.leading_normal, a.italic, t.atoms.text_contrast_700]}>
+          <Trans>
+            Operated by{' '}
+            <TextLink
+              href={makeProfileLink(modInfo.creator)}
+              text={sanitizeHandle(modInfo.creator.handle, '@')}
+              style={pal.link}
+            />
+            . Handles reports of anti-social behavior, illegal content, unwanted
+            sexual content, and misinformation.
+          </Trans>
+        </Text>
+
+        <View style={[a.flex_row, a.gap_md, a.align_center]}>
+          <Button
+            testID="toggleLikeBtn"
+            size='small'
+            color='secondary'
+            variant='solid'
+            shape='round'
+            label={_(msg`Like this feed`)}
+            disabled={!hasSession || isLikePending || isUnlikePending}
+            onPress={onToggleLiked}>
+            {isLiked ? (
+              <HeartFilled fill={t.palette.negative_400} />
+            ) : (
+              <Heart fill={t.atoms.text_contrast_700.color} />
             )}
-          </View>
+          </Button>
+
+          {typeof modInfo.likeCount === 'number' && (
+            <InlineLink
+              to={'#todo'}
+              style={[pal.textLight, s.semiBold]}
+            >
+              <Trans>Liked by {modInfo.likeCount} {pluralize(modInfo.likeCount, 'user')}</Trans>
+            </InlineLink>
+          )}
         </View>
-        <ModServicePrefs />
-        <View style={{height: 20}} />
-      </ScrollView>
-    </View>
+      </View>
+
+      <ModServicePrefs />
+
+      <View style={{height: 20}} />
+    </ScrollView>
   )
 }
-
-const styles = StyleSheet.create({
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingVertical: 7,
-    paddingHorizontal: 14,
-    borderRadius: 50,
-    marginLeft: 6,
-  },
-  notFoundContainer: {
-    margin: 10,
-    paddingHorizontal: 18,
-    paddingVertical: 14,
-    borderRadius: 6,
-  },
-})