diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
index 55dea0f82..cad42da70 100644
--- a/apps/showcase/assets/styles/layout/_doc.scss
+++ b/apps/showcase/assets/styles/layout/_doc.scss
@@ -442,7 +442,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        border-color: var(--p-content-border-color);
+        border-color: var(--border-color);
         border-width: 0 1px 0 0;
         padding: 1rem;
         width: 75%;
@@ -461,16 +461,13 @@
             display: flex;
             flex-direction: column;
             padding: .5rem;
-            cursor: pointer;
 
             &:hover {
-                background-color: var(--p-content-hover-background);
+                background-color: var(--hover-background);
             }
 
-            .doc-ptoption-text {
-                color: var(--p-text-muted-color);
-                font-size: 0.875rem;
-                line-height: 1.25rem;
+            .doc-ptoption-text:hover {
+                cursor: default;
             }
         }
     }
diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue
index 7f5e69b39..0367e68d3 100644
--- a/apps/showcase/components/doc/DocPTViewer.vue
+++ b/apps/showcase/components/doc/DocPTViewer.vue
@@ -7,8 +7,10 @@
             <template v-if="docs[0].data">
                 <template v-for="doc of docs" :key="doc.key">
                     <div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
-                        <span>{{ item.label }}</span>
-                        <span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
+                        <span class="doc-ptoption-text">
+                            {{ item.label }}
+                            <template v-if="docs.length > 1">| {{ doc.key }}</template>
+                        </span>
                     </div>
                 </template>
             </template>
@@ -43,12 +45,12 @@ export default {
             if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
 
             this.hoveredElements?.forEach((el) => {
-                addClass(el, '!ring !ring-red-500 !z-10');
+                addClass(el, '!ring !ring-blue-500 !z-10');
             });
         },
         leaveSection() {
             this.hoveredElements.forEach((el) => {
-                removeClass(el, '!ring !ring-red-500 !z-10');
+                removeClass(el, '!ring !ring-blue-500 !z-10');
             });
 
             this.hoveredElements = [];