diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue
index 71ca2a132..413b299f8 100644
--- a/apps/showcase/components/doc/DocPTViewer.vue
+++ b/apps/showcase/components/doc/DocPTViewer.vue
@@ -1,14 +1,14 @@
 <template>
-    <div ref="container" class="card flex flex-col md:flex-row !p-0">
-        <div class="flex items-center justify-center md:border-r border-b md:border-b-0 border-surface md:w-3/4 w-full p-4">
+    <div ref="container" class="doc-ptviewerwrapper card">
+        <div class="doc-ptviewer">
             <slot />
         </div>
-        <div class="flex flex-col gap-2 p-8 md:p-2 md:w-1/4 w-full max-h-[720px] overflow-y-auto">
+        <div class="doc-ptoptions">
             <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="flex flex-col p-2 cursor-pointer hover:bg-emphasis" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
+                    <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="text-muted-color text-sm">{{ item.label }} element of {{ doc.key }} component</span>
+                        <span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
                     </div>
                 </template>
             </template>
@@ -36,7 +36,9 @@ export default {
 
             this.hoveredElements = find(this.$refs.container, selector);
 
-            this.hoveredElements.forEach((el) => {
+            if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector);
+
+            this.hoveredElements?.forEach((el) => {
                 addClass(el, '!ring !ring-red-500');
             });
         },