diff --git a/src/components/util/ListItemLink.tsx b/src/components/util/ListItemLink.tsx
index cc1716e9..6b43f785 100644
--- a/src/components/util/ListItemLink.tsx
+++ b/src/components/util/ListItemLink.tsx
@@ -7,8 +7,20 @@
 
 import React from 'react';
 import ListItem, { ListItemProps } from '@mui/material/ListItem';
+import { Link } from 'react-router-dom';
 
-export default function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
+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}
+        />
+    );
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <ListItem button component="a" {...props} />;
+    // return <ListItem button component="a" {...props} />;
 }
diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx
index 0ede72b8..2de7cfb6 100644
--- a/src/screens/Settings.tsx
+++ b/src/screens/Settings.tsx
@@ -60,13 +60,13 @@ export default function Settings() {
     return (
         <>
             <List sx={{ padding: 0 }}>
-                <ListItemLink href="/settings/categories">
+                <ListItemLink to="/settings/categories">
                     <ListItemIcon>
                         <ListAltIcon />
                     </ListItemIcon>
                     <ListItemText primary="Categories" />
                 </ListItemLink>
-                <ListItemLink href="/settings/backup">
+                <ListItemLink to="/settings/backup">
                     <ListItemIcon>
                         <BackupIcon />
                     </ListItemIcon>
@@ -134,7 +134,7 @@ export default function Settings() {
                         </IconButton>
                     </ListItemSecondaryAction>
                 </ListItem>
-                <ListItemLink href="/settings/about">
+                <ListItemLink to="/settings/about">
                     <ListItemIcon>
                         <InfoIcon />
                     </ListItemIcon>
diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index 52c81713..d202a873 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -44,10 +44,10 @@ export default function About() {
             <ListItem>
                 <ListItemText primary="Build time" secondary={buildTime()} />
             </ListItem>
-            <ListItemLink href={about.github}>
+            <ListItemLink to={about.github}>
                 <ListItemText primary="Github" secondary={about.github} />
             </ListItemLink>
-            <ListItemLink href={about.discord}>
+            <ListItemLink to={about.discord}>
                 <ListItemText primary="Discord" secondary={about.discord} />
             </ListItemLink>
         </List>
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index 3c53646c..65330abd 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 href={`${baseURL}/api/v1/backup/export/file`}>
+                <ListItemLink to={`${baseURL}/api/v1/backup/export/file`}>
                     <ListItemText
                         primary="Create Backup"
                         secondary="Backup library as a Tachiyomi backup"