diff --git a/frontend/src/components/SubsystemCard.vue b/frontend/src/components/SubsystemCard.vue
index 074d21b..25719b7 100644
--- a/frontend/src/components/SubsystemCard.vue
+++ b/frontend/src/components/SubsystemCard.vue
@@ -19,12 +19,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { subsystemApi, type Subsystem } from '@/api/subsystem'
+import { useRouter } from 'vue-router'
+import type { Subsystem } from '@/api/subsystem'
 
 const props = defineProps<{
   system: Subsystem
 }>()
 
+const router = useRouter()
+
 const bgColor = computed(() => {
   const colors: Record<string, string> = {
     W: 'var(--logo-w-bg)',
@@ -51,13 +54,8 @@ const iconColor = computed(() => {
   return colors[props.system.icon] || 'var(--text-mid)'
 })
 
-const handleClick = async () => {
-  if (props.system.sso_enabled) {
-    const { data } = await subsystemApi.getSSOUrl(props.system.id)
-    window.location.assign(data.sso_url)
-  } else {
-    window.open(props.system.url, '_blank')
-  }
+const handleClick = () => {
+  router.push(`/subsystem/detail/${props.system.name.toLowerCase()}`)
 }
 </script>