diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index e6acb988..7aaec75b 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <CSidebar
-    class="border-end"
+    class="sidebar-dark border-end"
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 25dfb803..8e05a489 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -62,6 +62,7 @@ const AppSidebarNav = defineComponent({
         return h(
           CNavGroup,
           {
+            compact: true,
             ...(firstRender.value && {
               visible: item.items.some((child) => isActiveItem(route, child)),
             }),
@@ -97,11 +98,16 @@ const AppSidebarNav = defineComponent({
                   },
                   {
                     default: () => [
-                      item.icon &&
-                        h(resolveComponent('CIcon'), {
-                          customClassName: 'nav-icon',
-                          name: item.icon,
-                        }),
+                      item.icon
+                        ? h(resolveComponent('CIcon'), {
+                            customClassName: 'nav-icon',
+                            name: item.icon,
+                          })
+                        : h(
+                            'span',
+                            { class: 'nav-icon' },
+                            h('span', { class: 'nav-icon-bullet' }),
+                          ),
                       item.name,
                       item.badge &&
                         h(