diff --git a/src/elements/LinkRouter.tsx b/src/elements/LinkRouter.tsx
new file mode 100644
index 0000000..54766a9
--- /dev/null
+++ b/src/elements/LinkRouter.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import Link from '@material-ui/core/Link';
+
+interface LinkRouterProps {
+  to: string,
+  children: React.ReactNode,
+}
+
+export default function LinkRouter({ children, to }: LinkRouterProps): JSX.Element {
+  return (
+    <Link component={RouterLink} to={to}>{children}</Link>
+  );
+}
diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
index a19673a..2f6944e 100644
--- a/src/pages/main/MainPage.tsx
+++ b/src/pages/main/MainPage.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   List, ListItem, ListItemText, Container,
+  Link as MuiLink,
   Typography,
   Paper,
   makeStyles,
 } from '@material-ui/core';
 import Hero from '../../components/Hero';
 import Footer from './Footer';
+import LinkRouter from '../../elements/LinkRouter';
 
 const paperStyles = makeStyles((theme) => ({
   wrapper: {
@@ -40,7 +42,7 @@ const MainPage = (): JSX.Element => {
           <List className={classes.list}>
             <ListItem>
               <ListItemText secondary="Generate a printable calendar for the month">
-                <Link to="/calendar">Calendar</Link>
+                <LinkRouter to="/calendar">Calendar</LinkRouter>
               </ListItemText>
             </ListItem>
           </List>
@@ -48,7 +50,7 @@ const MainPage = (): JSX.Element => {
           <List className={classes.list} aria-label="Worksheets">
             <ListItem>
               <ListItemText>
-                <Link to="/addition-fill-the-blanks">Addition: Fill the Blanks</Link>
+                <LinkRouter to="/addition-fill-the-blanks">Addition: Fill the Blanks</LinkRouter>
               </ListItemText>
             </ListItem>
           </List>