diff --git a/src/components/Contest/ContestTeams.vue b/src/components/Contest/ContestTeams.vue
index 0461d579..e0e193fb 100644
--- a/src/components/Contest/ContestTeams.vue
+++ b/src/components/Contest/ContestTeams.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 
 import FormInput from '/@/components/UI/FormInput.vue'
 import ContestTeamItem from '/@/components/Contest/ContestTeamItem.vue'
-import { RouterLink } from 'vue-router'
 import { ContestTeam } from '/@/lib/apis'
 import { computed, ref } from 'vue'
 import { searchListCaseInsensitive } from '/@/lib/search'
@@ -30,14 +29,12 @@ const filteredContestTeams = computed(() =>
           icon="magnify"
         />
       </div>
-      <div>
-        <router-link
-          :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
-          :class="$style.link"
-        >
-          <base-button type="primary" icon="mdi:plus">New</base-button>
-        </router-link>
-      </div>
+      <link-button
+        :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
+        type="primary"
+        icon="mdi:plus"
+        >New</link-button
+      >
     </div>
     <ul :class="$style.teamList">
       <li v-for="contestTeam in filteredContestTeams" :key="contestTeam.id">
@@ -60,10 +57,6 @@ const filteredContestTeams = computed(() =>
 .searchForm {
   flex-grow: 1;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .teamList {
   list-style: none;
   padding: 0.5rem 0;
diff --git a/src/components/UI/LinkButton.vue b/src/components/UI/LinkButton.vue
new file mode 100644
index 00000000..545191d4
--- /dev/null
+++ b/src/components/UI/LinkButton.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+import { RouteLocationRaw } from 'vue-router'
+
+type ButtonType = 'primary' | 'secondary' | 'warning'
+
+interface Props {
+  to: RouteLocationRaw
+  type?: ButtonType
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  icon: undefined
+})
+</script>
+
+<template>
+  <router-link
+    :to="props.to"
+    :class="$style.linkButton"
+    :data-button-type="props.type"
+  >
+    <icon v-if="props.icon" :name="props.icon" />
+    <slot />
+  </router-link>
+</template>
+
+<style lang="scss" module>
+.linkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 24px;
+  border-radius: 6px;
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
+  transition: 0.2s ease-in-out;
+  text-decoration: none;
+  color: inherit;
+
+  &[data-button-type='primary'] {
+    color: $color-primary-text;
+    background-color: $color-primary;
+  }
+  &[data-button-type='secondary'] {
+    color: $color-primary;
+    background-color: $color-background;
+    border: 1px solid $color-primary;
+  }
+  &[data-button-type='warning'] {
+    color: $color-primary-text;
+    background-color: $color-warning;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/src/components/User/UserProfileDesktop.vue b/src/components/User/UserProfileDesktop.vue
index 51f23778..d1262c98 100644
--- a/src/components/User/UserProfileDesktop.vue
+++ b/src/components/User/UserProfileDesktop.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
 import type { UserDetail } from '/@/lib/apis'
@@ -22,9 +21,9 @@ defineProps<Props>()
       </div>
       <div :class="$style.accounts">
         <user-accounts :accounts="user.accounts" />
-        <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-          <base-button icon="mdi:account">Edit</base-button>
-        </router-link>
+        <link-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+          >Edit</link-button
+        >
       </div>
     </div>
   </div>
@@ -56,8 +55,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>
diff --git a/src/components/User/UserProfileMobile.vue b/src/components/User/UserProfileMobile.vue
index 380a6e23..255f9cf4 100644
--- a/src/components/User/UserProfileMobile.vue
+++ b/src/components/User/UserProfileMobile.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
 import type { UserDetail } from '/@/lib/apis'
@@ -23,9 +22,9 @@ defineProps<Props>()
     </div>
     <div :class="$style.accounts">
       <user-accounts :accounts="user.accounts" />
-      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-        <base-button icon="mdi:account">Edit</base-button>
-      </router-link>
+      <link-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+        >Edit</link-button
+      >
     </div>
   </div>
 </template>
@@ -57,8 +56,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>
diff --git a/src/pages/Contest.vue b/src/pages/Contest.vue
index 6e3abb82..869a887e 100644
--- a/src/pages/Contest.vue
+++ b/src/pages/Contest.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 
 import apis, { ContestDetail, ContestTeam } from '/@/lib/apis'
-import { RouterLink } from 'vue-router'
 import { getDisplayDuration } from '/@/lib/date'
 import Icon from '/@/components/UI/Icon.vue'
 import useParam from '/@/lib/param'
@@ -34,12 +33,12 @@ const contestTeams: ContestTeam[] = (
         detail="コンテストの詳細です。"
         :class="$style.header"
       />
-      <router-link
+      <link-button
         :to="{ name: 'ContestEdit', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="primary"
+        icon="mdi:pencil"
+        >Edit</link-button
       >
-        <base-button type="primary" icon="mdi:pencil">Edit</base-button>
-      </router-link>
     </div>
     <div>
       <section :class="$style.section">
@@ -76,15 +75,14 @@ const contestTeams: ContestTeam[] = (
       </section>
     </div>
 
-    <router-link :to="{ name: 'Contests' }" :class="$style.link">
-      <base-button
-        :class="$style.backButton"
-        type="secondary"
-        icon="mdi:arrow-left"
-      >
-        Back
-      </base-button>
-    </router-link>
+    <link-button
+      :to="{ name: 'Contests' }"
+      :class="$style.backButton"
+      type="secondary"
+      icon="mdi:arrow-left"
+    >
+      Back
+    </link-button>
   </page-container>
 </template>
 
@@ -97,10 +95,6 @@ const contestTeams: ContestTeam[] = (
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .section {
   margin-bottom: 2rem;
 }
diff --git a/src/pages/ContestEdit.vue b/src/pages/ContestEdit.vue
index e25fd25a..7ed03787 100644
--- a/src/pages/ContestEdit.vue
+++ b/src/pages/ContestEdit.vue
@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { EditContestRequest } from '/@/lib/apis'
 import type { ContestDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -141,18 +142,13 @@ const deleteContest = async () => {
     <delete-form target="コンテスト" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <link-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
       >
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -186,10 +182,6 @@ const deleteContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/ContestNew.vue b/src/pages/ContestNew.vue
index 1944242d..9ca76b7b 100644
--- a/src/pages/ContestNew.vue
+++ b/src/pages/ContestNew.vue
@@ -2,8 +2,9 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { CreateContestRequest } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -114,15 +115,13 @@ const createContest = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Contests' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'Contests' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -147,10 +146,6 @@ const createContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/ContestTeamEdit.vue b/src/pages/ContestTeamEdit.vue
index 986aab9a..dce40787 100644
--- a/src/pages/ContestTeamEdit.vue
+++ b/src/pages/ContestTeamEdit.vue
@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { ContestTeamDetail, EditContestTeamRequest } from '/@/lib/apis'
 import type { ContestDetail, User } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -145,12 +146,12 @@ const deleteContestTeam = async () => {
     <delete-form target="コンテストチーム" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <link-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
       >
-        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -184,10 +185,6 @@ const deleteContestTeam = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
index ffd029e1..6cb76fd5 100644
--- a/src/pages/ContestTeamNew.vue
+++ b/src/pages/ContestTeamNew.vue
@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis from '/@/lib/apis'
 import type { AddContestTeamRequest, ContestDetail, User } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -115,12 +116,12 @@ const createContestTeam = async () => {
     </form>
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <link-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
       >
-        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -145,10 +146,6 @@ const createContestTeam = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/Contests.vue b/src/pages/Contests.vue
index b8e64649..328d9c47 100644
--- a/src/pages/Contests.vue
+++ b/src/pages/Contests.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { RouterLink } from 'vue-router'
 
 import { useContestStore } from '/@/store/contest'
 
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import ContestItem from '/@/components/Contests/ContestItem.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import { searchListCaseInsensitive } from '/@/lib/search'
@@ -37,9 +36,12 @@ const filteredContests = computed(() =>
         />
       </div>
       <div>
-        <router-link :to="{ name: 'ContestNew' }" :class="$style.link">
-          <base-button type="primary" icon="mdi:trophy">New</base-button>
-        </router-link>
+        <link-button
+          :to="{ name: 'ContestNew' }"
+          type="primary"
+          icon="mdi:trophy"
+          >New</link-button
+        >
       </div>
     </div>
     <ul :class="$style.contestList">
@@ -67,11 +69,6 @@ const filteredContests = computed(() =>
   flex-grow: 1;
 }
 
-.link {
-  text-decoration: none;
-  color: inherit;
-}
-
 .contestList {
   list-style: none;
   li {
diff --git a/src/pages/Event.vue b/src/pages/Event.vue
index 63b8a35c..8514aeb9 100644
--- a/src/pages/Event.vue
+++ b/src/pages/Event.vue
@@ -2,10 +2,11 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import EventHostItem from '/@/components/Event/EventHostItem.vue'
 
 import apis, { EditEventRequest, EventDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { getDisplayDuration } from '/@/lib/date'
 import useParam from '/@/lib/param'
 import { ref } from 'vue'
@@ -118,15 +119,13 @@ const updateEvent = async () => {
     </div>
 
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Events' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'Events' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="isSending"
         type="primary"
@@ -148,10 +147,6 @@ const updateEvent = async () => {
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .section {
   margin-bottom: 2rem;
 }
diff --git a/src/pages/Project.vue b/src/pages/Project.vue
index b8609b35..2861e73a 100644
--- a/src/pages/Project.vue
+++ b/src/pages/Project.vue
@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { ProjectMember as ProjectMemberType } from '/@/lib/apis'
 import type { EditProjectRequest, ProjectDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -170,15 +171,13 @@ const handleDelete = (id: string) => {
     </form>
 
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Projects' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'Projects' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -203,10 +202,6 @@ const handleDelete = (id: string) => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index 0c1cd7d8..feaeece6 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -2,11 +2,12 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, {
   CreateProjectRequest,
   ProjectMember as ProjectMemberType
 } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -165,15 +166,13 @@ const handleDelete = (id: string) => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Projects' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'Projects' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         :class="$style.createButton"
@@ -204,10 +203,6 @@ const handleDelete = (id: string) => {
   align-items: center;
   gap: 0.5rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/Projects.vue b/src/pages/Projects.vue
index 82da1845..e2e50152 100644
--- a/src/pages/Projects.vue
+++ b/src/pages/Projects.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { RouterLink } from 'vue-router'
 
 import { useProjectStore } from '/@/store/project'
 
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import ProjectItem from '/@/components/Projects/ProjectItem.vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import { searchListCaseInsensitive } from '/@/lib/search'
 
@@ -36,13 +35,12 @@ const filteredProjects = computed(() =>
           icon="magnify"
         />
       </div>
-      <div>
-        <router-link :to="{ name: 'ProjectNew' }" :class="$style.link">
-          <base-button type="primary" icon="mdi:clipboard-file">
-            New</base-button
-          >
-        </router-link>
-      </div>
+      <link-button
+        :to="{ name: 'ProjectNew' }"
+        type="primary"
+        icon="mdi:clipboard-file"
+        >New</link-button
+      >
     </div>
     <ul :class="$style.projectList">
       <li v-for="project in filteredProjects" :key="project.id">
@@ -69,11 +67,6 @@ const filteredProjects = computed(() =>
   flex-grow: 1;
 }
 
-.link {
-  text-decoration: none;
-  color: inherit;
-}
-
 .projectList {
   list-style: none;
   li {
diff --git a/src/pages/UserAccountEdit.vue b/src/pages/UserAccountEdit.vue
index d3bfd5c1..ec79ecd9 100644
--- a/src/pages/UserAccountEdit.vue
+++ b/src/pages/UserAccountEdit.vue
@@ -2,8 +2,9 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { EditUserAccountRequest } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -126,15 +127,13 @@ const deleteAccount = async () => {
     <delete-form target="アカウント" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'UserAccounts' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -168,10 +167,6 @@ const deleteAccount = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/UserAccountNew.vue b/src/pages/UserAccountNew.vue
index 95e78acc..29ef661e 100644
--- a/src/pages/UserAccountNew.vue
+++ b/src/pages/UserAccountNew.vue
@@ -2,8 +2,9 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { AddAccountRequest } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -111,15 +112,13 @@ const createNewAccount = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'UserAccounts' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -144,10 +143,6 @@ const createNewAccount = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;
diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
index 64c5565b..35fe0b11 100644
--- a/src/pages/UserAccounts.vue
+++ b/src/pages/UserAccounts.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 
 import AccountItem from '/@/components/UserAccounts/AccountItem.vue'
 import apis from '/@/lib/apis'
-import { RouterLink } from 'vue-router'
 
 const me = (await apis.getMe()).data
 </script>
@@ -22,9 +21,12 @@ const me = (await apis.getMe()).data
         detail="アカウント情報を変更します。"
         :class="$style.header"
       />
-      <router-link :to="{ name: 'UserAccountsNew' }" :class="$style.link">
-        <base-button type="primary" icon="mdi:account">New</base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'UserAccountsNew' }"
+        type="primary"
+        icon="mdi:account"
+        >New</link-button
+      >
     </div>
     <ul :class="$style.accountList">
       <li v-for="account in me.accounts" :key="account.id">
@@ -32,15 +34,13 @@ const me = (await apis.getMe()).data
       </li>
     </ul>
 
-    <router-link :to="{ name: 'Profile' }" :class="$style.link">
-      <base-button
-        :class="$style.backButton"
-        type="secondary"
-        icon="mdi:arrow-left"
-      >
-        Back
-      </base-button>
-    </router-link>
+    <link-button
+      :to="{ name: 'Profile' }"
+      :class="$style.backButton"
+      type="secondary"
+      icon="mdi:arrow-left"
+      >Back</link-button
+    >
   </page-container>
 </template>
 
@@ -53,10 +53,6 @@ const me = (await apis.getMe()).data
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .accountList {
   list-style: none;
   padding: 0.5rem 0;