diff --git a/src/frontend/components/service/SvcConnectView.vue b/src/frontend/components/service/SvcConnectView.vue
index bf1e630..4508197 100644
--- a/src/frontend/components/service/SvcConnectView.vue
+++ b/src/frontend/components/service/SvcConnectView.vue
@@ -1,11 +1,27 @@
 <script setup lang="ts">
 import { V1Service } from '@backend/k8s/model/V1Service'
+import type { V1ServicePort } from '@backend/k8s/model/V1ServicePort'
+import { K8sService } from '@frontend/service/k8s/K8sService'
 import { ColorHelper } from '@frontend/service/page/ColorHelper'
-import { NSpace, NTable, NTag } from 'naive-ui'
+import * as _ from 'lodash'
+import { NButton, NSpace, NTable, NTag, useMessage } from 'naive-ui'
 
 const props = defineProps({
   svc: V1Service,
 })
+
+const message = useMessage()
+
+async function forward(svc: V1Service, p: V1ServicePort) {
+  const randomInt = _.random(30000, 60000)
+  await K8sService.playService.shellControllerForwardService({
+    ns: svc.metadata.namespace,
+    localPort: randomInt,
+    svcPort: `${p.port}`,
+    svcName: svc.metadata.name,
+  })
+  message.success('转发成功')
+}
 </script>
 
 <template>
@@ -52,9 +68,12 @@ const props = defineProps({
           Ports
         </td>
         <td>
-          <div v-for="port in props.svc.spec.ports" :key="port">
+          <p v-for="port in props.svc.spec.ports" :key="port">
             {{ port.port }}:{{ port.nodePort ? port.nodePort : port.targetPort }}/{{ port.protocol }}
-          </div>
+            <NButton type="success" @click="forward(props.svc, port)">
+              Forward
+            </NButton>
+          </p>
         </td>
       </tr>
     </tbody>
diff --git a/src/frontend/components/service/SvcView.vue b/src/frontend/components/service/SvcView.vue
index 5ea73a8..2eb90cc 100644
--- a/src/frontend/components/service/SvcView.vue
+++ b/src/frontend/components/service/SvcView.vue
@@ -16,15 +16,14 @@ const props = defineProps({
 <template>
   <NMessageProvider>
     <SvcActionView :is-dropdown="false" :svc="props.svc" />
+    <TitleBar title="Basic info" :show-title="true" />
+    <SvcBasicInfoView :svc="props.svc" />
+    <TitleBar title="Connect Info" />
+    <SvcConnectView :svc="props.svc" />
+    <TitleBar title="Endpoints" />
+    <SvcEndpointListView :svc="props.svc" />
+    <InvolvedEventView :item="props.svc.metadata" :show-title="true" />
   </NMessageProvider>
-  <TitleBar title="Basic info" :show-title="true" />
-  <SvcBasicInfoView :svc="props.svc" />
-  <TitleBar title="Connect Info" />
-  <SvcConnectView :svc="props.svc" />
-  <TitleBar title="Endpoints" />
-  <SvcEndpointListView :svc="props.svc" />
-
-  <InvolvedEventView :item="props.svc.metadata" :show-title="true" />
 </template>
 
 <style scoped>