diff --git a/frontend/src/components/DNS/DNSOverrideList.js b/frontend/src/components/DNS/DNSOverrideList.js
index f16fb1b22..cbf31b9e7 100644
--- a/frontend/src/components/DNS/DNSOverrideList.js
+++ b/frontend/src/components/DNS/DNSOverrideList.js
@@ -1,38 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { AlertContext } from 'layouts/Admin'
-import { blockAPI } from 'api/DNS'
-import { format as timeAgo } from 'timeago.js'
-
-import {
-  Box,
-  VStack,
-  FlatList,
-  HStack,
-  Text,
-  Button,
-  ButtonIcon,
-  CloseIcon
-} from '@gluestack-ui/themed'
+import { FlatList, Text } from '@gluestack-ui/themed'
 
 import ListHeader from 'components/List/ListHeader'
-import { ListItem } from 'components/List'
-
-const DNSOverrideList = ({ title, list, ...props }) => {
-  const context = React.useContext(AlertContext)
-
-  const deleteListItem = async (item) => {
-    blockAPI
-      .deleteOverride(item)
-      .then((res) => {
-        props.notifyChange('config')
-      })
-      .catch((error) => {
-        context.error('API Failure: ' + error.message)
-      })
-  }
+import DNSOverrideListItem from './DNSOverrideListItem'
 
+const DNSOverrideList = ({ title, list, deleteListItem, ...props }) => {
   return (
     <>
       <ListHeader title={title} description="Set rules for DNS queries">
@@ -45,59 +19,7 @@ const DNSOverrideList = ({ title, list, ...props }) => {
       <FlatList
         data={list}
         renderItem={({ item }) => (
-          <ListItem>
-            <VStack
-              sx={{ '@md': { flexDirection: 'row' } }}
-              justifyContent="space-evenly"
-              flex={1}
-              space="md"
-            >
-              <VStack
-                flex={1}
-                space="md"
-                sx={{ '@md': { flexDirection: 'row' } }}
-              >
-                <Text bold>{item.Domain}</Text>
-                <HStack space={'md'}>
-                  <Text
-                    sx={{
-                      '@base': { display: 'none' },
-                      '@md': { display: 'flex' }
-                    }}
-                    color="$muted500"
-                  >
-                    =
-                  </Text>
-                  <Text>{item.ResultIP || '0.0.0.0'}</Text>
-                </HStack>
-              </VStack>
-
-              <VStack
-                flex={1}
-                space="md"
-                sx={{ '@md': { flexDirection: 'row' } }}
-                justifyContent="space-between"
-              >
-                <HStack space={'md'}>
-                  <Text color="$muted500">Client:</Text>
-                  <Text>{item.ClientIP}</Text>
-                </HStack>
-
-                <HStack space={'md'}>
-                  <Text color="$muted500">Expiration:</Text>
-                  <Text>
-                    {item.Expiration
-                      ? timeAgo(new Date(item.Expiration * 1e3))
-                      : 'Never'}
-                  </Text>
-                </HStack>
-              </VStack>
-            </VStack>
-
-            <Button variant="link" onPress={() => deleteListItem(item)}>
-              <ButtonIcon as={CloseIcon} color="$red700" />
-            </Button>
-          </ListItem>
+          <DNSOverrideListItem item={item} deleteListItem={deleteListItem} />
         )}
         keyExtractor={(item) => item.Domain}
       />
@@ -108,7 +30,8 @@ const DNSOverrideList = ({ title, list, ...props }) => {
 DNSOverrideList.propTypes = {
   title: PropTypes.string.isRequired,
   list: PropTypes.array,
-  notifyChange: PropTypes.func
+  notifyChange: PropTypes.func,
+  deleteListItem: PropTypes.func
 }
 
 export default DNSOverrideList
diff --git a/frontend/src/views/DNS/DNSOverride.js b/frontend/src/views/DNS/DNSOverride.js
index 85bda6ade..91932bbd4 100644
--- a/frontend/src/views/DNS/DNSOverride.js
+++ b/frontend/src/views/DNS/DNSOverride.js
@@ -58,6 +58,17 @@ const DNSBlock = (props) => {
     refreshConfig()
   }
 
+  const deleteListItem = async (item) => {
+    blockAPI
+      .deleteOverride(item)
+      .then((res) => {
+        notifyChange('config')
+      })
+      .catch((error) => {
+        context.error('API Failure: ' + error.message)
+      })
+  }
+
   if (!enabled) {
     return <PluginDisabled plugin="dns" />
   }
@@ -74,6 +85,7 @@ const DNSBlock = (props) => {
             list={BlockDomains}
             title="Block Custom Domain"
             notifyChange={notifyChange}
+            deleteListItem={deleteListItem}
             renderHeader={() => (
               <ModalForm
                 title="Add Block for Custom Domain"
@@ -96,6 +108,7 @@ const DNSBlock = (props) => {
             list={PermitDomains}
             title="Permit Domain Override"
             notifyChange={notifyChange}
+            deleteListItem={deleteListItem}
             renderHeader={() => (
               <ModalForm
                 title="Add Permit Domain Override"