diff --git a/src/frontend/components/secret/SecretDataKeysView.vue b/src/frontend/components/secret/SecretDataKeysView.vue
index 8d1c80b..b7c6a14 100644
--- a/src/frontend/components/secret/SecretDataKeysView.vue
+++ b/src/frontend/components/secret/SecretDataKeysView.vue
@@ -1,15 +1,34 @@
 <script setup lang="ts">
 import { V1Secret } from '@backend/k8s/model/V1Secret'
+import { ResType } from '@backend/k8s/watch/watch.model'
+import SecretView from '@frontend/components/secret/SecretView.vue'
+import { useDrawerService } from '@frontend/service/drawer-service/use-drawer'
+import { ColorHelper } from '@frontend/service/page/ColorHelper'
+import { DrawerHelper } from '@frontend/service/page/DrawerHelper'
+import { NSpace, NTag } from 'naive-ui'
 
 const props = defineProps({
   secret: V1Secret,
 })
+
+const drawer = useDrawerService()
+
+function show() {
+  DrawerHelper
+    .instance
+    .drawer(drawer)
+    .show(`${ResType.Secret}:${props.secret.metadata.name}`, SecretView, { secret: props.secret })
+}
 </script>
 
 <template>
-  <NTag v-for="(v, k) in props.secret.data" :key="k">
-    {{ k }}
-  </NTag>
+  <NSpace v-for="(v, k) in props.secret.data" :key="k" :vertical="false">
+    <NTag :color="{ color: ColorHelper.randomColor() }">
+      <span @click="show">
+        {{ k }}
+      </span>
+    </NTag>
+  </NSpace>
 </template>
 
 <style scoped>
diff --git a/src/frontend/components/secret/SecretDataListView.vue b/src/frontend/components/secret/SecretDataListView.vue
index 629440f..55116b4 100644
--- a/src/frontend/components/secret/SecretDataListView.vue
+++ b/src/frontend/components/secret/SecretDataListView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { V1Secret } from '@backend/k8s/model/V1Secret'
 import SecretDataValueEditView from '@frontend/components/secret/SecretDataValueEditView.vue'
-import { NDivider } from 'naive-ui'
+import { NTabPane, NTabs } from 'naive-ui'
 
 const props = defineProps({
   secret: V1Secret,
@@ -9,12 +9,13 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-for="(v, k) in props.secret.data" :key="k" style="height: 50%;max-height: 100px">
-    <NDivider title-placement="left">
-      {{ k }}
-    </NDivider>
-    <SecretDataValueEditView :v="v" :k="k" :meta="props.secret.metadata" />
-  </div>
+  <NTabs type="card">
+    <NTabPane v-for="(v, k) in props.secret.data" :key="k" :name="k" :tab="k">
+      <div style="height: 100%;min-height: 20px">
+        <SecretDataValueEditView :v="v" :k="k" :meta="props.secret.metadata" />
+      </div>
+    </NTabPane>
+  </NTabs>
 </template>
 
 <style scoped>