diff --git a/styles/dropdown-arrow.scss b/styles/dropdown-arrow.scss
index ef3d308..22a10a4 100644
--- a/styles/dropdown-arrow.scss
+++ b/styles/dropdown-arrow.scss
@@ -1,4 +1,5 @@
-.sidebar-item.collapsible:not(.sidebar-heading), .navbar-dropdown-title {
+.sidebar-item.collapsible:not(.sidebar-heading),
+.vp-navbar-dropdown-title {
     .arrow {
         @apply ml-2 !important;
     }
diff --git a/styles/navbar.scss b/styles/navbar.scss
index 287a732..d90e9e6 100644
--- a/styles/navbar.scss
+++ b/styles/navbar.scss
@@ -1,51 +1,57 @@
-.navbar span a {
+.vp-navbar span a {
     @apply flex items-center;
     margin-left: 0.1rem;
 }
 
-.navbar span a span {
+.vp-navbar span a span {
     @apply mt-3;
 }
 
-.navbar-items-wrapper {
+.vp-navbar-items-wrapper {
     @apply mt-1;
     max-width: none !important;
 }
 
-.navbar-items {
+.vp-navbar-items {
     @apply space-x-12;
 }
 
-.navbar-item {
-    a, .navbar-dropdown-title {
-        @apply text-gray-900 text-xl font-bold transition-transform transform;
+.vp-navbar-item {
+
+    a,
+    .vp-navbar-dropdown-title {
+        @apply text-gray-900 dark:text-gray-400 text-xl font-bold transition-transform transform;
     }
 
-    .navbar-dropdown {
+    .vp-navbar-dropdown {
         @apply shadow-md p-0 !important;
 
-        .navbar-dropdown-item {
+        .vp-navbar-dropdown-item {
             @apply p-1.5;
         }
+    }
+}
 
-        .navbar-dropdown-item:hover {
-            @apply bg-gray-200;
+.vp-navbar-dropdown-wrapper:not(.mobile) {
+    .vp-navbar-dropdown {
+        .vp-navbar-dropdown-item:hover {
+            @apply bg-gray-200 dark:bg-gray-800;
         }
     }
 }
 
-.navbar-item>a:hover,
-.navbar-item>a.router-link-active {
+.vp-navbar-item>a:hover,
+.vp-navbar-item>a.route-link-active {
     @apply border-b-4 border-gray-900 pb-2 -translate-y-0.5 !important;
 }
 
 html.dark {
-    .navbar-item>a {
+    .vp-navbar-item>a {
         color: #adbac7 !important;
     }
 
-    .navbar-item>a:hover,
-    .navbar-item>a.router-link-active {
+    .vp-navbar-item>a:hover,
+    .vp-navbar-item>a.route-link-active {
         color: #adbac7 !important;
         border-color: #adbac7 !important;
     }
diff --git a/styles/site-name.scss b/styles/site-name.scss
index 4b17a13..fc6cbb8 100644
--- a/styles/site-name.scss
+++ b/styles/site-name.scss
@@ -1,24 +1,24 @@
-span.site-name:after {
+span.vp-site-name:after {
     content: '.io';
     @apply text-4xl text-gray-500 font-light !important;
 }
 
-span.site-name:before {
+span.vp-site-name:before {
     content: 'docs.';
     @apply text-4xl text-gray-500 font-light !important;
 }
 
 html.dark {
-    span.site-name {
+    span.vp-site-name {
         color: #adbac7 !important;
     }
 
-    span.site-name:before {
+    span.vp-site-name:before {
         color: #adbac7 !important;
     }
 }
 
-span.site-name {
+span.vp-site-name {
     @apply text-4xl text-gray-900 font-bold -top-1 !important;
     margin-left: 0.55rem !important;
 }
\ No newline at end of file