diff --git a/src/components/list.tsx b/src/components/list.tsx
index a64f19450..4d5934d26 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -133,4 +133,4 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
   );
 };
 
-export { List as default, ListItem };
+export { List as default, type IListItem, ListItem };
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index 384994eba..e00d3c30f 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import List, { ListItem } from './list';
+import List, { type IListItem, ListItem } from './list';
 
 interface IRadioGroup {
   onChange: React.ChangeEventHandler;
@@ -15,7 +15,7 @@ const RadioGroup = ({ onChange, children }: IRadioGroup) => {
   return <List>{childrenWithProps}</List>;
 };
 
-interface IRadioItem {
+interface IRadioItem extends IListItem {
   label: React.ReactNode;
   hint?: React.ReactNode;
   value: string;
@@ -23,8 +23,8 @@ interface IRadioItem {
   onChange?: React.ChangeEventHandler;
 }
 
-const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => (
-  <ListItem label={label} hint={hint}>
+const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value, ...props }) => (
+  <ListItem label={label} hint={hint} {...props}>
     <input
       type='radio'
       checked={checked}
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index a68437cbb..75d6ff2c1 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -5,7 +5,8 @@ import { useLocation } from 'react-router-dom';
 
 import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
 import LoadMore from 'soapbox/components/load-more';
-import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio';
+import { CardTitle, Column, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
 
 import AccountCard from './components/account-card';
@@ -51,37 +52,41 @@ const Directory = () => {
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <Stack space={4}>
-        <div className='grid grid-cols-2 gap-2'>
-          <div>
-            <Text weight='medium'>
-              <FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />
-            </Text>
-            <fieldset className='mt-3'>
-              <legend className='sr-only'>
-                <FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />
-              </legend>
-              <div className='space-y-2'>
-                <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={handleChangeOrder} />
-                <RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={handleChangeOrder} />
-              </div>
-            </fieldset>
-          </div>
+        <div className='grid grid-cols-1 gap-2 md:grid-cols-2'>
+          <Stack space={2}>
+            <CardTitle title={<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />} />
+
+            <RadioGroup onChange={handleChangeOrder}>
+              <RadioItem
+                label={intl.formatMessage(messages.recentlyActive)}
+                checked={order === 'active'}
+                value='active'
+              />
+              <RadioItem
+                label={intl.formatMessage(messages.newArrivals)}
+                checked={order === 'new'}
+                value='new'
+              />
+            </RadioGroup>
+          </Stack>
 
           {features.federating && (
-            <div>
-              <Text weight='medium'>
-                <FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />
-              </Text>
-              <fieldset className='mt-3'>
-                <legend className='sr-only'>
-                  <FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />
-                </legend>
-                <div className='space-y-2'>
-                  <RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: instance.title })} checked={local} onChange={handleChangeLocal} />
-                  <RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={handleChangeLocal} />
-                </div>
-              </fieldset>
-            </div>
+            <Stack space={2}>
+              <CardTitle title={<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />} />
+
+              <RadioGroup onChange={handleChangeLocal}>
+                <RadioItem
+                  label={intl.formatMessage(messages.local, { domain: instance.title })}
+                  checked={local}
+                  value='1'
+                />
+                <RadioItem
+                  label={intl.formatMessage(messages.federated)}
+                  checked={!local}
+                  value='0'
+                />
+              </RadioGroup>
+            </Stack>
           )}
         </div>