diff --git a/panel/frontend/src/pages/ServicesPage.vue b/panel/frontend/src/pages/ServicesPage.vue
index 59d07d5..479e152 100644
--- a/panel/frontend/src/pages/ServicesPage.vue
+++ b/panel/frontend/src/pages/ServicesPage.vue
@@ -117,7 +117,12 @@
 
   <template v-else>
     <div class="services-grid">
-      <GnCard v-for="service in services" :key="service.id" class="service-card">
+      <GnCard
+        v-for="service in services"
+        :key="service.id"
+        class="service-card"
+        @click="router.push('/services/' + service.id)"
+      >
         <template #title>
           <span class="service-title">
             <span class="service-name">{{ service.name }}</span>
@@ -203,6 +208,11 @@
 .service-card {
   width: 100%;
   max-width: none;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.service-card:hover {
+  border-color: var(--gn-primary, #4a9d6f);
 }
 .service-title {
   display: flex;