diff --git a/packages/pl-fe/src/modals/edit-announcement-modal.tsx b/packages/pl-fe/src/modals/edit-announcement-modal.tsx
index 543b1e06c..1e0a229b9 100644
--- a/packages/pl-fe/src/modals/edit-announcement-modal.tsx
+++ b/packages/pl-fe/src/modals/edit-announcement-modal.tsx
@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
+import List, { ListItem } from '@/components/list';
 import Form from '@/components/ui/form';
 import FormGroup from '@/components/ui/form-group';
-import HStack from '@/components/ui/hstack';
 import Modal from '@/components/ui/modal';
-import Stack from '@/components/ui/stack';
-import Text from '@/components/ui/text';
 import Textarea from '@/components/ui/textarea';
 import Toggle from '@/components/ui/toggle';
 import { DatePicker } from '@/features/ui/util/async-components';
@@ -186,23 +184,24 @@ const EditAnnouncementModal: React.FC<BaseModalProps & EditAnnouncementModalProp
             isClearable
           />
         </FormGroup>
-        <HStack alignItems='center' space={2}>
-          <Toggle checked={allDay} onChange={onChangeAllDay} />
-          <Stack>
-            <Text tag='span' theme='muted'>
+        <List>
+          <ListItem
+            label={
               <FormattedMessage
                 id='admin.edit_announcement.fields.all_day_label'
                 defaultMessage='All-day event'
               />
-            </Text>
-            <Text size='xs' tag='span' theme='muted'>
+            }
+            hint={
               <FormattedMessage
                 id='admin.edit_announcement.fields.all_day_hint'
                 defaultMessage='When checked, only the dates of the time range will be displayed'
               />
-            </Text>
-          </Stack>
-        </HStack>
+            }
+          >
+            <Toggle checked={allDay} onChange={onChangeAllDay} />
+          </ListItem>
+        </List>
       </Form>
     </Modal>
   );
diff --git a/packages/pl-fe/src/modals/edit-domain-modal.tsx b/packages/pl-fe/src/modals/edit-domain-modal.tsx
index fbe774cae..41851df89 100644
--- a/packages/pl-fe/src/modals/edit-domain-modal.tsx
+++ b/packages/pl-fe/src/modals/edit-domain-modal.tsx
@@ -1,13 +1,11 @@
 import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
+import List, { ListItem } from '@/components/list';
 import Form from '@/components/ui/form';
 import FormGroup from '@/components/ui/form-group';
-import HStack from '@/components/ui/hstack';
 import Input from '@/components/ui/input';
 import Modal from '@/components/ui/modal';
-import Stack from '@/components/ui/stack';
-import Text from '@/components/ui/text';
 import Toggle from '@/components/ui/toggle';
 import { useDomains } from '@/queries/admin/use-domains';
 import toast from '@/toast';
@@ -107,28 +105,29 @@ const EditDomainModal: React.FC<BaseModalProps & EditDomainModalProps> = ({
             disabled={!!domainId}
           />
         </FormGroup>
-        <HStack alignItems='center' space={2}>
-          <Toggle
-            checked={isPublic}
-            onChange={({ target }) => {
-              setPublic(target.checked);
-            }}
-          />
-          <Stack>
-            <Text tag='span' theme='muted'>
+        <List>
+          <ListItem
+            label={
               <FormattedMessage
                 id='admin.edit_domain.fields.public_label'
                 defaultMessage='Public'
               />
-            </Text>
-            <Text size='xs' tag='span' theme='muted'>
+            }
+            hint={
               <FormattedMessage
                 id='admin.edit_domain.fields.public_hint'
                 defaultMessage='When checked, everyone can sign up for an username with this domain'
               />
-            </Text>
-          </Stack>
-        </HStack>
+            }
+          >
+            <Toggle
+              checked={isPublic}
+              onChange={({ target }) => {
+                setPublic(target.checked);
+              }}
+            />
+          </ListItem>
+        </List>
       </Form>
     </Modal>
   );