diff --git a/src/components/util/ListItemLink.tsx b/src/components/util/ListItemLink.tsx
index 6b43f785..3e08a27f 100644
--- a/src/components/util/ListItemLink.tsx
+++ b/src/components/util/ListItemLink.tsx
@@ -9,18 +9,13 @@ import React from 'react';
 import ListItem, { ListItemProps } from '@mui/material/ListItem';
 import { Link } from 'react-router-dom';
 
-export default function ListItemLink(props: ListItemProps<Link, {}>) {
-    return (
-        <ListItem
-            // @ts-ignore
-            // sx={{ color: 'white', textDecoration: 'none', '-webkit-text-decoration': 'none' }}
-            // @ts-ignore
-            button
-            component={Link}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        />
-    );
+export default function ListItemLink(props: ListItemProps<Link, { directLink?: boolean }>) {
+    const { directLink, to } = props;
+    if (directLink) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <ListItem button component="a" href={to} {...props} />;
+    }
+
     // eslint-disable-next-line react/jsx-props-no-spreading
-    // return <ListItem button component="a" {...props} />;
+    return <ListItem button component={Link} {...props} />;
 }
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index 65330abd..9f9ffa3c 100644
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -68,7 +68,7 @@ export default function Backup() {
     return (
         <>
             <List sx={{ padding: 0 }}>
-                <ListItemLink to={`${baseURL}/api/v1/backup/export/file`}>
+                <ListItemLink to={`${baseURL}/api/v1/backup/export/file`} directLink>
                     <ListItemText
                         primary="Create Backup"
                         secondary="Backup library as a Tachiyomi backup"