diff --git a/workspaces/app/src/features/book/components/BookCard.tsx b/workspaces/app/src/features/book/components/BookCard.tsx
index 4ab8ad5ae..6c2050b72 100644
--- a/workspaces/app/src/features/book/components/BookCard.tsx
+++ b/workspaces/app/src/features/book/components/BookCard.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -43,7 +43,7 @@ const BookCard: React.FC<Props> = ({ bookId }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${bookId}`}>
+    <_Wrapper to={`/books/${bookId}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={128} objectFit="cover" src={imageUrl} width={192} />
diff --git a/workspaces/app/src/features/book/components/BookListItem.tsx b/workspaces/app/src/features/book/components/BookListItem.tsx
index bf11c32d5..8b233f0ca 100644
--- a/workspaces/app/src/features/book/components/BookListItem.tsx
+++ b/workspaces/app/src/features/book/components/BookListItem.tsx
@@ -1,9 +1,9 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -38,7 +38,7 @@ export const BookListItem: React.FC<Props> = ({ bookId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (
diff --git a/workspaces/app/src/features/episode/components/EpisodeListItem.tsx b/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
index 348b8e66f..a8b82c013 100644
--- a/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
+++ b/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
@@ -1,9 +1,9 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -39,7 +39,7 @@ export const EpisodeListItem: React.FC<Props> = ({ bookId, episodeId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${bookId}/episodes/${episode.id}`}>
+      <_Link to={`/books/${bookId}/episodes/${episode.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (
diff --git a/workspaces/app/src/features/feature/components/FeatureCard.tsx b/workspaces/app/src/features/feature/components/FeatureCard.tsx
index 947aac0aa..69f214abb 100644
--- a/workspaces/app/src/features/feature/components/FeatureCard.tsx
+++ b/workspaces/app/src/features/feature/components/FeatureCard.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -54,7 +54,7 @@ const FeatureCard: React.FC<Props> = ({ bookId }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${bookId}`}>
+    <_Wrapper to={`/books/${bookId}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={96} objectFit="cover" src={imageUrl} width={96} />
diff --git a/workspaces/app/src/features/ranking/components/RankingCard.tsx b/workspaces/app/src/features/ranking/components/RankingCard.tsx
index 6a1a7be67..76ceaa682 100644
--- a/workspaces/app/src/features/ranking/components/RankingCard.tsx
+++ b/workspaces/app/src/features/ranking/components/RankingCard.tsx
@@ -1,11 +1,11 @@
 import { NavigateNext } from '@mui/icons-material';
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -49,7 +49,7 @@ const RankingCard: React.FC<Props> = ({ bookId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (
diff --git a/workspaces/app/src/foundation/components/Link.tsx b/workspaces/app/src/foundation/components/Link.tsx
deleted file mode 100644
index 5de56ae31..000000000
--- a/workspaces/app/src/foundation/components/Link.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-type Props = {
-  children: React.ReactNode;
-  to?: string;
-} & JSX.IntrinsicElements['a'];
-
-export const Link: React.FC<Props> = ({ children, to, ...rest }) => {
-  return (
-    <a href={to} {...rest}>
-      {children}
-    </a>
-  );
-};
diff --git a/workspaces/app/src/pages/BookDetailPage/index.tsx b/workspaces/app/src/pages/BookDetailPage/index.tsx
index c0480e107..a38c2cfcf 100644
--- a/workspaces/app/src/pages/BookDetailPage/index.tsx
+++ b/workspaces/app/src/pages/BookDetailPage/index.tsx
@@ -1,6 +1,6 @@
 import { useAtom } from 'jotai/react';
 import { Suspense, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import type { RouteParams } from 'regexparam';
 import { styled } from 'styled-components';
 import invariant from 'tiny-invariant';
@@ -12,7 +12,6 @@ import { useEpisodeList } from '../../features/episode/hooks/useEpisodeList';
 import { Box } from '../../foundation/components/Box';
 import { Flex } from '../../foundation/components/Flex';
 import { Image } from '../../foundation/components/Image';
-import { Link } from '../../foundation/components/Link';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
@@ -82,7 +81,7 @@ const BookDetailPage: React.FC = () => {
 
           <Spacer height={Space * 1} />
 
-          <_AuthorWrapper href={`/authors/${book.author.id}`}>
+          <_AuthorWrapper to={`/authors/${book.author.id}`}>
             {auhtorImageUrl != null && (
               <_AvatarWrapper>
                 <Image alt={book.author.name} height={32} objectFit="cover" src={auhtorImageUrl} width={32} />
diff --git a/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx b/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx
index 5b0f8c2dc..ae1accefd 100644
--- a/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx
+++ b/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx
@@ -1,8 +1,8 @@
 import { animated, useSpring } from '@react-spring/web';
 import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-import { Link } from '../../../foundation/components/Link';
 import { Color, Radius, Space } from '../../../foundation/styles/variables';
 
 import { FavButton } from './FavButton';
diff --git a/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx b/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx
index d57221efd..30f695289 100644
--- a/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx
+++ b/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx
@@ -1,7 +1,7 @@
 import { Search } from '@mui/icons-material';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
@@ -33,7 +33,7 @@ export const CoverSection: React.FC = () => {
   return (
     <_Wrapper>
       <HeroImage />
-      <_SearchLink href="/search">
+      <_SearchLink to="/search">
         <Search style={{ color: Color.MONO_A, height: 24, width: 24 }} />
         <Text color={Color.MONO_A} typography={Typography.NORMAL16}>
           検索
diff --git a/workspaces/app/src/routes.tsx b/workspaces/app/src/routes.tsx
index 426e39259..a79fcb880 100644
--- a/workspaces/app/src/routes.tsx
+++ b/workspaces/app/src/routes.tsx
@@ -1,9 +1,8 @@
 import { ArrowBack } from '@mui/icons-material';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Link, Route, Routes } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-import { Link } from './foundation/components/Link';
 import { Text } from './foundation/components/Text';
 import { ActionLayout } from './foundation/layouts/ActionLayout';
 import { CommonLayout } from './foundation/layouts/CommonLayout';
@@ -33,7 +32,7 @@ export const Router: React.FC = () => {
         element={
           <ActionLayout
             leftContent={
-              <_BackToTopButton href={'/'}>
+              <_BackToTopButton to={'/'}>
                 <ArrowBack style={{ color: Color.MONO_100, height: 32, width: 32 }} />
                 <Text color={Color.MONO_100} typography={Typography.NORMAL16} weight="bold">
                   トップへ戻る